Spanish (Español) translation by Nadia Gonzales (you can also view the original English article)
Hace un par de semanas, aprendimos a crear un diseño web con temática de cómic en nuestro sitio hermano, Webdesigntuts+. Hoy, abordaremos la segunda parte: es hora de sectorizar el diseño y convertirlo en un diseño HTML funcional, listo para ser portado a cualquier CMS. ¡Empecemos!
Antes de empezar
Puedes obtener tu propio PSD siguiendo el proceso paso a paso en Webdesigntuts+ o simplemente descargándolo aquí.
Como este no es un tutorial para principiantes, me saltaré algunas explicaciones básicas: se espera un conocimiento práctico de HTML y CSS, así como un poco de conocimiento sobre sectorización de imágenes en Photoshop.
Paso 1 - Diseño HTML
Empecemos por crear la carpeta de trabajo; como este tutorial no requiere el uso de un lenguaje del lado del servidor, puede estar en cualquier lugar de tu sistema. Crea un archivo llamado index.html, y tres carpetas iniciales:
/images/js/style
El contenido de estas carpetas debería ser bastante autoexplicativo.
Añade los contenedores básicos de la página a index.html. Envuelve todo con un div llamado page. Dentro de ese div, añade tres más con los IDs de header, content y footer respectivamente.
En la carpeta style, crea un nuevo archivo llamado default.css y añade un reset para eliminar todos los estilos por defecto. Yo estoy usando el de Eric Meyer pero siéntete libre de empezar con tu favorito.
Siguiendo el código HTML para este paso:
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
2 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
3 |
<head>
|
4 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
5 |
<title>Comicastic</title> |
6 |
<link href="style/default.css" rel="stylesheet" type="text/css" /> |
7 |
</head>
|
8 |
<body>
|
9 |
<div id="page"> |
10 |
<div id="header"> |
11 |
Header |
12 |
</div>
|
13 |
<div id="content"> |
14 |
Content |
15 |
</div>
|
16 |
<div id="footer"> |
17 |
Footer |
18 |
</div>
|
19 |
</div>
|
20 |
</body>
|
21 |
</html>
|
Y el CSS:
1 |
@charset "utf-8"; |
2 |
/* CSS Document */
|
3 |
/* http://meyerweb.com/eric/tools/css/reset/
|
4 |
v2.0 | 20110126
|
5 |
License: none (public domain)
|
6 |
*/
|
7 |
html, body, div, span, applet, object, iframe, |
8 |
h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
9 |
a, abbr, acronym, address, big, cite, code, |
10 |
del, dfn, em, img, ins, kbd, q, s, samp, |
11 |
small, strike, strong, sub, sup, tt, var, |
12 |
b, u, i, center, |
13 |
dl, dt, dd, ol, ul, li, |
14 |
fieldset, form, label, legend, |
15 |
table, caption, tbody, tfoot, thead, tr, th, td, |
16 |
article, aside, canvas, details, embed, |
17 |
figure, figcaption, footer, header, hgroup, |
18 |
menu, nav, output, ruby, section, summary, |
19 |
time, mark, audio, video { |
20 |
margin: 0; |
21 |
padding: 0; |
22 |
border: 0; |
23 |
font-size: 100%; |
24 |
font: inherit; |
25 |
vertical-align: baseline; |
26 |
}
|
27 |
|
28 |
/* HTML5 display-role reset for older browsers */
|
29 |
article, aside, details, figcaption, figure, |
30 |
footer, header, hgroup, menu, nav, section { |
31 |
display: block; |
32 |
}
|
33 |
body { |
34 |
line-height: 1; |
35 |
}
|
36 |
ol, ul { |
37 |
list-style: none; |
38 |
}
|
39 |
blockquote, q { |
40 |
quotes: none; |
41 |
}
|
42 |
blockquote:before, blockquote:after, |
43 |
q:before, q:after { |
44 |
content: ''; |
45 |
content: none; |
46 |
}
|
47 |
table { |
48 |
border-collapse: collapse; |
49 |
border-spacing: 0; |
50 |
}
|
51 |
/* End of reset */
|
Probando el código en Firefox, deberías ver algo como esto:
Paso 2 - Diseño CSS básico
Primero vamos a estilizar la estructura del diseño.
Envolvemos todo el contenido con un contenedor de 960px de ancho, y luego establecemos las alturas de los divs interiores. Para obtener la altura exacta de cada div puedes utilizar la herramienta Regla de Photoshop.
Ahora sectorizaremos las imágenes de fondo de toda la página y de la sección de pie de página.
En Photoshop, abre Comicastic.psd y oculta todo excepto las carpetas Header BG y Footer BG. Utilizando la herramienta "sector", dibuja un gran corte desde la parte superior izquierda hasta 575px por debajo del borde superior. A continuación, dibuja otro sector de la guía que delimite el fondo del pie de página (mira la imagen de abajo). Por supuesto, puedes utilizar las guías para obtener un resultado preciso.
Usando la herramienta Seleccionar sector, selecciona los dos sectores recientemente creados y nombra cada uno con sus respectivos nombres: bg-body y bg-footer. A continuación, haz doble clic en todos los sectores automáticos y cambia el "tipo de sector" a No Image.
A continuación, ve a File > Save for Web and Devices. Selecciona los dos sectores que quieres guardar (Mantén presionada la tecla Mayús para seleccionar más de uno), establece el "tipo de archivo" en JPG, establece la Calidad en 70 y haz clic en Guardar. Busca tu directorio de trabajo y elige el archivo raíz (este diálogo guardará automáticamente tus archivos dentro de la /images folder).
Ahora que tienes las imágenes de fondo, vamos a añadir el CSS para todos los contenedores.
Estableceremos una altura de prueba para los divs excepto el encabezado (que tiene una altura de 180px en realidad) y añadiremos algunos colores de fondo temporales para fines de prueba.
1 |
/*Common*/
|
2 |
body{ |
3 |
background-color:#000; |
4 |
background-image:url(../images/bg-body.jpg); |
5 |
background-position:center top; |
6 |
background-repeat:no-repeat; |
7 |
}
|
8 |
|
9 |
/*Containers*/
|
10 |
#page{ |
11 |
margin:0px auto; |
12 |
width:960px; |
13 |
}
|
14 |
#header{ |
15 |
width:960px; |
16 |
height:180px; |
17 |
float:left; |
18 |
background-color:#666; |
19 |
}
|
20 |
#content{ |
21 |
width:960px; |
22 |
height:400px;/* Temporal */ |
23 |
float:left; |
24 |
background-color:#FCC; |
25 |
}
|
26 |
#footer{ |
27 |
width:960px; |
28 |
height:250px;/* Temporal */ |
29 |
float:left; |
30 |
|
31 |
background-image:url(../images/bg-footer.jpg); |
32 |
background-position:top center; |
33 |
background-repeat:no-repeat; |
34 |
}
|
Probando en un navegador, deberías tener algo como la imagen de abajo.
Paso 3 - Sectoriza de las imágenes de fondo del encabezado y del contenido
Ahora que ya sabes cómo sectorizar la imagen, vamos a hacer lo mismo con todas las imágenes de fondo (o primer plano) del encabezado y del contenido. Para las imágenes del encabezado, crea una copia del documento "comicastic.psd" y oculta todo excepto la carpeta Logo y las capas relacionadas con el fondo de búsqueda (además, añado el botón de búsqueda en esta vista después de moverlo unos píxeles a la derecha). Ahora, dibuja los sectores alrededor de los segmentos visibles, y nómbralos logo, bg-search y search-button, respectivamente. Guárdalos como PNGs con fondos transparentes.
Pasemos con el banner de contenido.
Muestra sólo la carpeta Background dentro de Top Banner, muestra la carpeta Page Curl y la capa Page Bg bajo Page Content y muestra la carpeta Header Bg incluyendo el fondo negro general. Luego, con estas capas visibles, dibuja dos sectores: uno para el fondo del banner llamado bg-banner y otro pequeño para el rizo de la página llamado content-page-curl. Luego guárdalos a ambos como JPEG.
Añade un nuevo div llamado logo dentro de "header" y otro div llamado top-banner dentro de content a nuestro archivo HTML.
1 |
<div id="header"> |
2 |
<div id="logo"> |
3 |
<a href="#"><img src="images/logo.png" width="340" height="135" alt="Comicastic" /></a> |
4 |
</div>
|
5 |
</div>
|
6 |
<div id="content"> |
7 |
<div id="top_banner">Top Banner</div> |
8 |
</div>
|
Y el código CSS para que se vean bien:
1 |
#logo{ |
2 |
padding-top:32px; |
3 |
padding-left:70px; |
4 |
}
|
5 |
|
6 |
[...]
|
7 |
|
8 |
#top_banner{ |
9 |
float:left; |
10 |
width:960px; |
11 |
height:250px; |
12 |
background-image:url(../images/bg-banner.jpg); |
13 |
background-position:center top; |
14 |
background-repeat:no-repeat; |
15 |
}
|
Ahora deberías tener algo así:
Paso 4 - Navegación superior
Vamos a añadir el HTML para la navegación superior. Añade el siguiente código dentro del div header, debajo del logo.
1 |
<ul id="main_navigation"> |
2 |
<li><a href="#">Home</a></li> |
3 |
<li><a href="#">About us</a></li> |
4 |
<li><a href="#">Contact us</a></li> |
5 |
</ul>
|
El trabajo más duro con este div será el posicionamiento. Haremos que flote a la derecha, y jugaremos con el padding para colocarlo en su sitio. Añade el siguiente CSS:
1 |
#main_navigation{ |
2 |
float:right; |
3 |
}
|
4 |
#main_navigation li{ |
5 |
display:inline; |
6 |
}
|
7 |
#main_navigation li a{ |
8 |
display:block; |
9 |
float:left; |
10 |
}
|
11 |
#main_navigation li a:hover{ |
12 |
}
|
Paso 5 - Sustitución de fuentes
Como no tengo intención de utilizar "Comic Sans" para este diseño, utilizaremos un tipo de letra más interesante. Aprovecharemos las ventajas de CSS3 para que se vea bien en los navegadores modernos.
En primer lugar, descarga los paquetes de fuentes CSS "Komika Title" y "Komika Text" y colócalos en una nueva carpeta, llamada /fonts. Cada paquete tiene un montón de archivos de fuentes y un archivo .CSS que importaremos a nuestro documento default.css, como se indica a continuación:
1 |
/*Font Face Kits*/
|
2 |
@import url("../fonts/komika-text/stylesheet.css") screen; |
3 |
@import url("../fonts/komika-title/stylesheet.css") screen; |
Ahora que las fuentes están importadas, podemos utilizarlas en cualquier parte de nuestro sitio. Cada conjunto tiene un número de variantes para elegir; puedes usar las que estén acorde con el diseño gráfico. Para empezar, estableceremos todo el texto del cuerpo con 'KomikaTextTightRegular' de la siguiente manera:
1 |
body{ |
2 |
background-color:#000; |
3 |
background-image:url(../images/bg-body.jpg); |
4 |
background-position:center top; |
5 |
background-repeat:no-repeat; |
6 |
|
7 |
font-family:'KomikaTextTightRegular', Arial, Helvetica, sans-serif; |
8 |
font-size:1em; |
9 |
}
|
Y puedes probar el resultado en el navegador:
Paso 6 - Estilizar la navegación superior
Vuelve al archivo psd ahora. Oculta todo excepto el fondo de la pestaña, crea un nuevo sector para la pestaña de navegación llamado bg-main-navigation y guárdalo para la web como un archivo PNG.
En nuestro archivo CSS, vamos a añadir los estilos para la barra de navegación, para conseguir el efecto hover deseado. Añadiremos el fondo a la acción hover y crearemos un estilo similar para la instancia a.selected. En cuanto a la tipografía, según el gráfico, utilizaremos "KomikaTextItalic" y añadiremos un bonito estilo de sombra de texto para que se vea mejor.
1 |
#main_navigation{ |
2 |
float:right; |
3 |
margin-top:-18px; |
4 |
margin-right:20px; |
5 |
}
|
6 |
|
7 |
#main_navigation li{ |
8 |
display:inline; |
9 |
width:120px; |
10 |
}
|
11 |
|
12 |
#main_navigation li a{ |
13 |
display:block; |
14 |
float:left; |
15 |
|
16 |
padding-top:7px; |
17 |
padding-bottom:8px; |
18 |
padding-left:20px; |
19 |
padding-right:20px; |
20 |
|
21 |
margin-left:5px; |
22 |
|
23 |
color:#FFF; |
24 |
font-family:'KomikaTextItalic', Arial, Helvetica, sans-serif; |
25 |
font-size:18px; |
26 |
text-decoration:none; |
27 |
|
28 |
text-shadow:2px 2px 2px rgba(0,0,0,.5); |
29 |
|
30 |
-webkit-border-top-right-radius: 3px; |
31 |
-khtml-border-radius-topright: 3px; |
32 |
-moz-border-radius-topright: 3px; |
33 |
border-top-right-radius: 3px; |
34 |
}
|
35 |
|
36 |
#main_navigation li a:hover{ |
37 |
background-image:url(../images/bg-main-navigation.png); |
38 |
background-position:left; |
39 |
background-repeat:no-repeat; |
40 |
}
|
41 |
|
42 |
#main_navigation li a.selected{ |
43 |
background-image:url(../images/bg-main-navigation.png); |
44 |
background-position:left; |
45 |
background-repeat:no-repeat; |
46 |
}
|
Tu página debería verse así en esta fase de desarrollo:
Paso 7 - Contenido del encabezado
Además del logotipo y la barra de navegación, tendremos que añadir la barra de búsqueda y los enlaces a las redes sociales a la sección del encabezado. Empecemos creando el cuadro contenedor en HTML y añadiendo el siguiente div dentro del div header.
1 |
<div id="header-content"> |
2 |
Top Right |
3 |
</div>
|
Y algunos estilos necesarios:
1 |
#header-content{ |
2 |
background-color:#036; |
3 |
float:right; |
4 |
width:440px; |
5 |
height:105px; |
6 |
}
|
Cuando se prueba en el navegador:
Paso 8 - Barra de búsqueda
A continuación, comenzaremos a estilizar el área de búsqueda. Es básicamente un formulario con una casilla de entrada y un botón (ver paso 3). Para ello, añade el siguiente código dentro del div "header-content:
1 |
<div id="search"> |
2 |
<form>
|
3 |
<input type="text" class="search_input" value="Looking for something?"/> |
4 |
<input type="image" src="images/search-btn.png" /> |
5 |
</form>
|
6 |
</div>
|
Y el estilo para que se vea bien:
1 |
#search{ |
2 |
text-align:right; |
3 |
padding-top:10px; |
4 |
}
|
5 |
|
6 |
#search input{ |
7 |
vertical-align:middle; |
8 |
}
|
9 |
|
10 |
#search .search_input{ |
11 |
width:160px; |
12 |
margin-right:10px; |
13 |
padding:6px 10px; |
14 |
|
15 |
color:#F2AA00; |
16 |
font-family:'KomikaTextTightRegular',Arial, Helvetica, sans-serif; |
17 |
font-size:14px; |
18 |
|
19 |
background-color:#280000; |
20 |
border:1px solid #7C0000; |
21 |
|
22 |
-webkit-border-radius: 3px; |
23 |
-khtml-border-radius: 3px; |
24 |
-moz-border-radius: 3px; |
25 |
border-radius: 3px; |
26 |
}
|
Eso debería darnos:
Paso 9 - Enlaces a redes sociales
Debajo del div search, añade un div con un id de social_media. En él, puedes insertar una lista de enlaces de redes sociales de tu elección. Estoy usando el Paquete de iconos de redes sociales de Komodo Media
1 |
<div id="social_media"> |
2 |
Follow us
|
3 |
<a href="#"><img src="images/icons/twitter_16.png" width="16" height="16" alt="Twitter" /></a> |
4 |
<a href="#"><img src="images/icons/facebook_16.png" width="16" height="16" alt="Twitter" /></a> |
5 |
<a href="#"><img src="images/icons/technorati_16.png" width="16" height="16" alt="Twitter" /></a> |
6 |
<a href="#"><img src="images/icons/rss_16.png" width="16" height="16" alt="Twitter" /></a> |
7 |
</div>
|
Y en la hoja de estilo:
1 |
#social_media{ |
2 |
padding-top:15px; |
3 |
text-align:right; |
4 |
color:#FFF; |
5 |
font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif; |
6 |
font-size:15px; |
7 |
|
8 |
vertical-align:middle; |
9 |
|
10 |
text-shadow:2px 2px 2px rgba(0,0,0,.5); |
11 |
}
|
Paso 10 - Banner deslizante
Comenzaremos con el banner deslizante Empieza descargando Easy Slider 1.5 y pega los archivos en una carpeta llamada Banner.
Hay varios ejemplos en la carpeta de la biblioteca... imitaremos 02.html. Renombra el archivo, si es necesario, elimina todo el código HTML innecesario y reemplaza las imágenes con algunas imágenes de ejemplo.
Así, el archivo HTML para el banner debería ser algo así:
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
2 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
3 |
<head>
|
4 |
<title>Banner</title> |
5 |
<meta http-equiv="content-type" content="text/html;charset=UTF-8" /> |
6 |
<script type="text/javascript" src="js/jquery.js"></script> |
7 |
<script type="text/javascript" src="js/easySlider1.5.js"></script> |
8 |
<script type="text/javascript"> |
9 |
$(document).ready(function(){ |
10 |
$("#slider").easySlider(); |
11 |
});
|
12 |
</script>
|
13 |
<link href="css/default.css" rel="stylesheet" type="text/css" /> |
14 |
</head>
|
15 |
<body>
|
1 |
<div id="container"> |
2 |
<div id="content"> |
3 |
<div id="slider"> |
4 |
<ul>
|
5 |
<li><a href="#"><img src="images/01.jpg" alt="Preview" /><div class="bubble">test</div></a></li> |
6 |
<li><a href="#"><img src="images/02.jpg" alt="Preview" /><div class="bubble">test22</div></a></li> |
7 |
<li><a href="#"><img src="images/03.jpg" alt="Preview" /></a></li> |
8 |
<li><a href="#"><img src="images/04.jpg" alt="Preview" /><div class="bubble">test</div></a></li> |
9 |
<li><a href="#"><img src="images/05.jpg" alt="Css Template Preview" /></a></li> |
10 |
</ul>
|
11 |
</div>
|
12 |
</div>
|
13 |
</div>
|
1 |
</body> |
2 |
</html> |
Y aquí está el CSS
1 |
@charset "utf-8"; |
2 |
/* CSS Document */
|
3 |
/* image replacement */
|
4 |
img{ |
5 |
border:0px; |
6 |
}
|
7 |
.graphic, #prevBtn, #nextBtn{ |
8 |
margin:0; |
9 |
padding:0; |
10 |
display:block; |
11 |
overflow:hidden; |
12 |
text-indent:-8000px; |
13 |
}
|
14 |
/* // image replacement */
|
15 |
#container{ |
16 |
margin:0 auto; |
17 |
position:relative; |
18 |
text-align:left; |
19 |
width:696px; |
20 |
background:#fff; |
21 |
margin-bottom:2em; |
22 |
}
|
23 |
|
24 |
#content{ |
25 |
position:relative; |
26 |
}
|
27 |
|
28 |
/* Easy Slider */
|
29 |
#slider{ |
30 |
position:relative; |
31 |
width:760px!important; |
32 |
background:none; |
33 |
}
|
34 |
#slider ul, #slider li{ |
35 |
margin:0; |
36 |
padding:0; |
37 |
list-style:none; |
38 |
background:none; |
39 |
}
|
40 |
#slider li{ |
41 |
width:760px!important; |
42 |
}
|
43 |
#slider li a{ |
44 |
background:none; |
45 |
}
|
46 |
#slider li{ |
47 |
/*
|
48 |
define width and height of list item (slide)
|
49 |
entire slider area will adjust according to the parameters provided here
|
50 |
*/
|
51 |
width:696px; |
52 |
height:241px; |
53 |
overflow:hidden; |
54 |
}
|
55 |
#prevBtn, #nextBtn{ |
56 |
display:block; |
57 |
width:30px; |
58 |
height:77px; |
59 |
position:absolute; |
60 |
left:-30px; |
61 |
top:71px; |
62 |
}
|
63 |
#nextBtn{ |
64 |
left:696px; |
65 |
}
|
66 |
#prevBtn a, #nextBtn a{ |
67 |
display:block; |
68 |
width:30px; |
69 |
height:77px; |
70 |
background:url(../images/btn_prev.gif) no-repeat 0 0; |
71 |
}
|
72 |
#nextBtn a{ |
73 |
background:url(../images/btn_next.gif) no-repeat 0 0; |
74 |
}
|
75 |
|
76 |
.bubble{ |
77 |
position:absolute; |
78 |
float:right; |
79 |
background-color:#036; |
80 |
|
81 |
width:250px; |
82 |
height:100px; |
83 |
margin-top:-240px; |
84 |
margin-left:500px; |
85 |
|
86 |
color:#FFF; |
87 |
}
|
88 |
/* // Easy Slider */
|
En este punto deberías tener algo así:
No te preocupes si el deslizador presenta algunos problemas, lo arreglaremos en un minuto.
Ajusta la posición y sustituye las flechas
Sectoriza las dos flechas (anterior y siguiente) y guárdalas como archivos PNG en la carpeta de imágenes del directorio de pruebas del banner.
A continuación, ajusta el CSS para que funcione correctamente con las nuevas flechas
1 |
#prevBtn, #nextBtn{ |
2 |
display:block; |
3 |
width:50px; |
4 |
height:40px; |
5 |
position:absolute; |
6 |
left:-50px; |
7 |
top:71px; |
8 |
}
|
9 |
#nextBtn{ |
10 |
left:630px; /* this is the li width*/ |
11 |
}
|
12 |
#prevBtn a{ |
13 |
display:block; |
14 |
width:50px; |
15 |
height:40px; |
16 |
background:url(../images/btn-prev.png) no-repeat 0 0; |
17 |
}
|
18 |
#nextBtn a{ |
19 |
display:block; |
20 |
width:50px; |
21 |
height:40px; |
22 |
background:url(../images/btn-next.png) no-repeat 0 0; |
23 |
}
|
Lo que produce:
Posicionamiento
Ahora, vamos a establecer el posicionamiento, el ancho y la altura de todos los divs relacionados con el banner. También arreglaremos la librería JS para evitar cualquier problema relacionado con el div bubble adicional.
Aquí está el CSS modificado:
1 |
#container{ |
2 |
margin:0 auto; |
3 |
width:830px; |
4 |
position:relative; |
5 |
text-align:left; |
6 |
background:#096; |
7 |
margin-bottom:2em; |
8 |
padding-left:65px; |
9 |
}
|
10 |
#content{ |
11 |
position:relative; |
12 |
}
|
13 |
/* Easy Slider */
|
14 |
#slider{ |
15 |
position:relative; |
16 |
width:830px; |
17 |
overflow:hidden; |
18 |
background:none; |
19 |
background-color:#09F; |
20 |
}
|
21 |
#slider ul, #slider li{ |
22 |
margin:0; |
23 |
padding:0; |
24 |
list-style:none; |
25 |
background:none; |
26 |
}
|
27 |
#slider li{ |
28 |
width:830px; |
29 |
height:250px; |
30 |
overflow:hidden; |
31 |
}
|
32 |
#slider li a{ |
33 |
background:none; |
34 |
}
|
35 |
#prevBtn, #nextBtn{ |
36 |
display:block; |
37 |
width:65px;/*img width +15 padding*/ |
38 |
height:40px; |
39 |
position:absolute; |
40 |
left:-65px; |
41 |
top:185px; |
42 |
}
|
43 |
#nextBtn{ |
44 |
left:630px; /*Banner Width*/ |
45 |
}
|
46 |
#prevBtn a{ |
47 |
display:block; |
48 |
width:65px; /*img width +15 padding*/ |
49 |
height:40px; |
50 |
background:url(../images/btn-prev.png) no-repeat left; |
51 |
background-color:#066; |
52 |
}
|
53 |
#nextBtn a{ |
54 |
display:block; |
55 |
width:65px;/*img width +15 padding*/ |
56 |
height:40px; |
57 |
background:url(../images/btn-next.png) no-repeat right; |
58 |
background-color:#066; |
59 |
}
|
60 |
|
61 |
.bubble{ |
62 |
position:absolute; |
63 |
float:right; |
64 |
background-color:#036; |
65 |
|
66 |
width:250px; |
67 |
height:100px; |
68 |
margin-top:-240px; |
69 |
margin-left:500px; |
70 |
|
71 |
color:#FFF; |
72 |
}
|
73 |
/* // Easy Slider */
|
Y el resultado en el navegador:
Fondo de la burbuja
Ahora, sectoriza el fondo del contenido de la publicación. Con sólo las burbujas de dialogo visibles en tu .PSD, dibuja un sector llamado "bg-bubble" y guárdalo como un archivo .png.
Modifica el CSS para añadir el fondo y ajustar el posicionamiento del div bubble, como corresponde.
1 |
.bubble{ |
2 |
position:absolute; |
3 |
float:right; |
4 |
width:295px; |
5 |
height:210px; |
6 |
margin-top:-255px; |
7 |
margin-left:535px; |
8 |
background-image:url(../images/bg-bubble.png); |
9 |
color:#FFF; |
10 |
}
|
Así es como se ve en el navegador; elimina todos los colores de fondo temporales si lo deseas.
Contenido de la publicación
Para terminar la sección del banner, vamos a añadir el HTML para el contenido de la publicación.
1 |
<div class="featured_post"> |
2 |
<h2 class="post_title">Post title</h2> |
3 |
<p class="post_brief">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam</p> |
4 |
<div class="post_info"> |
5 |
<span class="author">Posted by <a href="#">Admin</a></span>, |
6 |
<span class="date">Apr 14</span> |
7 |
</div>
|
8 |
<div class="post_comments"> |
9 |
<div class="number"><a href="#">29</a></div> |
10 |
<div class="comments"><a href="#">Comments</a></div> |
11 |
</div>
|
12 |
</div>
|
Combinación con el archivo principal de plantillas
Es el momento de combinar el módulo separado con nuestro documento principal.
Primero, copia la carpeta /js del banner a la raíz de la plantilla, luego añade todas las imágenes del banner en la carpeta /images al directorio de la plantilla.
A continuación, añade el siguiente código dentro de la etiqueta <head> de nuestro archivo index.html" :
1 |
<script type="text/javascript" src="js/jquery.js"></script> |
2 |
<script type="text/javascript" src="js/easySlider1.5.js"></script> |
3 |
<script type="text/javascript"> |
4 |
$(document).ready(function(){ |
5 |
$("#slider").easySlider(); |
6 |
});
|
7 |
</script>
|
Y añadir los divs del banner en consecuencia dentro de top_banner div.
1 |
<!-- Top Banner -->
|
2 |
<div id="top_banner"> |
3 |
<div class="banner_container"> |
4 |
<div id="slider"> |
5 |
<ul>
|
6 |
<li><a href="#"><img src="images/banner/01.jpg" alt="Preview" /></a> |
7 |
<div class="bubble"> |
8 |
<div class="featured_post"> |
9 |
<h2 class="post_title">Post title</h2> |
10 |
<p class="post_brief">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam</p> |
11 |
<div class="post_info"> |
12 |
<span class="author">Posted by <a href="#">Admin</a></span>, |
13 |
<span class="date">Apr 14</span> |
14 |
</div>
|
15 |
<div class="post_comments"> |
16 |
<div class="number"><a href="#">29</a></div> |
17 |
<div class="comments"><a href="#">Comments</a></div> |
18 |
</div>
|
19 |
</div>
|
20 |
</div>
|
21 |
</li>
|
22 |
<li><a href="#"><img src="images/banner/02.jpg" alt="Preview" /></a><div class="bubble">test22</div></li> |
23 |
<li><a href="#"><img src="images/banner/03.jpg" alt="Preview" /></a><div class="bubble">test333</div></li> |
24 |
<li><a href="#"><img src="images/banner/04.jpg" alt="Preview" /></a><div class="bubble">test4444</div></li> |
25 |
<li><a href="#"><img src="images/banner/05.jpg" alt="Preview" /></a><div class="bubble">test55555</div></li> |
26 |
</ul>
|
27 |
</div>
|
28 |
</div>
|
29 |
</div>
|
30 |
<!-- End of Top Banner -->
|
Y el CSS completo para hacer que el banner funcione
1 |
/* Top Banner */
|
2 |
#top_banner{ |
3 |
float:left; |
4 |
width:830px; |
5 |
height:250px; |
6 |
padding-left:130px; |
7 |
padding-top:10px; |
8 |
background-image:url(../images/bg-banner.jpg); |
9 |
background-position:center top; |
10 |
background-repeat:no-repeat; |
11 |
}
|
12 |
|
13 |
.banner_container{ |
14 |
float:left; |
15 |
width:860px; |
16 |
height:250px; |
17 |
|
18 |
position:relative; |
19 |
text-align:left; |
20 |
}
|
21 |
|
22 |
/* image replacement */
|
23 |
#prevBtn, #nextBtn{ |
24 |
margin:0; |
25 |
padding:0; |
26 |
display:block; |
27 |
overflow:hidden; |
28 |
position:absolute; |
29 |
text-indent:-8000px; |
30 |
}
|
31 |
/* // image replacement */
|
32 |
|
33 |
/* Easy Slider */
|
34 |
|
35 |
#slider{ |
36 |
position:relative; |
37 |
width:830px; |
38 |
margin-left:100px |
39 |
overflow:hidden; |
40 |
}
|
41 |
#slider ul, #slider li{ |
42 |
margin:0; |
43 |
padding:0; |
44 |
list-style:none; |
45 |
background:none; |
46 |
}
|
47 |
|
48 |
#slider li{ |
49 |
width:830px; |
50 |
height:250px; |
51 |
overflow:hidden; |
52 |
}
|
53 |
|
54 |
#slider li img{ |
55 |
border:1px solid #FFF; |
56 |
height:248px; |
57 |
}
|
58 |
|
59 |
#slider li a{ |
60 |
background:none; |
61 |
}
|
62 |
|
63 |
#prevBtn, #nextBtn{ |
64 |
display:block; |
65 |
width:65px;/*img width +15 padding*/ |
66 |
height:40px; |
67 |
position:absolute; |
68 |
left:-65px; |
69 |
top:185px; |
70 |
}
|
71 |
#nextBtn{ |
72 |
left:630px; /*Banner Width*/ |
73 |
}
|
74 |
#prevBtn a{ |
75 |
display:block; |
76 |
width:65px; /*img width +15 padding*/ |
77 |
height:40px; |
78 |
background:url(../images/btn-prev.png) no-repeat left; |
79 |
}
|
80 |
#nextBtn a{ |
81 |
display:block; |
82 |
width:65px;/*img width +15 padding*/ |
83 |
height:40px; |
84 |
background:url(../images/btn-next.png) no-repeat right; |
85 |
}
|
86 |
|
87 |
.bubble{ |
88 |
position:absolute; |
89 |
float:right; |
90 |
width:295px; |
91 |
height:210px; |
92 |
margin-top:-255px; |
93 |
margin-left:535px; |
94 |
background-image:url(../images/bg-bubble.png); |
95 |
color:#FFF; |
96 |
}
|
97 |
/* // Easy Slider */
|
98 |
/* End of Top Banner*/
|
En breve estilizaremos el contenido de la publicación destacada. En este punto, sin embargo, deberías tener algo similar a la siguiente imagen:
Paso 11 - Envoltorio de contenido y fondo
Siguiendo con la maqueta, añade un div debajo del banner superior, llamado content_wrapper, y dentro de otro div llamado page_content, que contendrá la información real.
1 |
<div id="content_wrapper"> |
2 |
<div id="page_content"> |
3 |
Page content |
4 |
</div>
|
5 |
</div>
|
A continuación, para que se parezca al diseño, utilizaremos CSS3 para añadir las esquinas redondeadas al div page_content y al rizo de la página que hemos sectorizado en el paso 3.
1 |
/*Page content*/
|
2 |
#content{ |
3 |
float:left; |
4 |
width:960px; |
5 |
}
|
6 |
#content_wrapper{ |
7 |
float:left; |
8 |
width:910px; |
9 |
padding-left:10px; |
10 |
padding-right:40px; |
11 |
padding-top:10px; |
12 |
}
|
13 |
|
14 |
#page_content{ |
15 |
float:left; |
16 |
width:100%; |
17 |
height:350px;/*temporal*/ |
18 |
background-color:#FFF; |
19 |
background-image:url(../images/content-page-curl.jpg); |
20 |
background-position:bottom right; |
21 |
background-repeat:no-repeat; |
22 |
|
23 |
-webkit-border-radius: 5px; |
24 |
-khtml-border-radius: 5px; |
25 |
-moz-border-radius: 5px; |
26 |
border-radius: 5px; |
27 |
|
28 |
-webkit-border-bottom-right-radius: 0px; |
29 |
-khtml-border-radius-bottomright: 0px; |
30 |
-moz-border-radius-bottomright: 0px; |
31 |
border-bottom-right-radius: 0px; |
32 |
}
|
33 |
/*End of Page Content*/
|
Cómo debería ser nuestra página, en este punto:
Paso 12 - Imagen y título de la publicación
Vamos a hacer una publicación de prueba.
Según el diseño, necesitaremos tener una imagen cuadrada con el título de la publicación y la lista de categorías colocada en dos franjas por encima de ella. Vamos a tratar con el HTML primero.
Crea un div llamado post y colócalo dentro del div page_content. A continuación, añade una imagen, un título y algunos metadatos al contenedor.
1 |
<div class="post"> |
2 |
<img src="images/posts/01.jpg" class="post-image" /> |
3 |
<h2><a href="#">Lorem Ipsum Post Title</a></h2> |
4 |
<div class="met ad at a"><a href="#">Comics</a>, <a href="#">Movies</a>, <a href="#">Latest Launches</a>, <a href="#">Lorem Ipsum Category</a></div> |
5 |
</div>
|
El CSS para esta parte es complicado ya que cada entrada debe tener un ancho del 50% en referencia al contenedor page_content, además las franjas deben estar delante de la imagen. Tendremos que jugar con el posicionamiento relativo y los márgenes negativos para lograrlo.
1 |
.post{ |
2 |
float:left; |
3 |
width:445px; |
4 |
height:230px; |
5 |
}
|
6 |
|
7 |
.post .post-image{ |
8 |
position:relative; |
9 |
top:0px; |
10 |
left:0px; |
11 |
border:1px solid #FFB800; |
12 |
}
|
13 |
|
14 |
.post h2{ |
15 |
position:relative; |
16 |
top:-70px; |
17 |
left:0px; |
18 |
width:300px; |
19 |
|
20 |
padding:5px; |
21 |
padding-left:10px; |
22 |
|
23 |
font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif; |
24 |
font-size:18px; |
25 |
|
26 |
color:#680000; |
27 |
background-color:#F2AA00; |
28 |
}
|
29 |
|
30 |
.post h2 a{ |
31 |
color:#680000; |
32 |
text-decoration:none; |
33 |
}
|
34 |
|
35 |
.post h2 a:hover{ |
36 |
color:#FFFFFF; |
37 |
}
|
38 |
|
39 |
.post .metadata{ |
40 |
position:relative; |
41 |
top:-70px; |
42 |
left:0px; |
43 |
width:250px; |
44 |
|
45 |
padding:5px; |
46 |
padding-left:10px; |
47 |
|
48 |
font-size:13px; |
49 |
|
50 |
background-color:#FFF; |
51 |
border:1px solid #FFB800; |
52 |
}
|
53 |
|
54 |
.post .metadata a{ |
55 |
color:#000; |
56 |
text-decoration:none; |
57 |
}
|
58 |
|
59 |
.post .metadata a:hover{ |
60 |
color:#9C0000; |
61 |
}
|
Ahora deberías tener algo así:
Paso 13 - Fondo y posición del contenido de la publicación
Ahora, vamos a añadir un div que contiene el contenido de la publicación.
1 |
<div class="post"> |
2 |
<img src="images/posts/01.jpg" class="post-image" /> |
3 |
<h2><a href="#">Lorem Ipsum Post Title</a></h2> |
4 |
<div class="metadata"><a href="#">Comics</a>, <a href="#">Movies</a>, <a href="#">Latest Launchs</a>, <a href="#">Lorem Ipsum Category</a></div> |
5 |
|
6 |
<div class="post_content">Post Content</div> |
7 |
</div>
|
Sectoriza la imagen de fondo para el div post_content, y guárdala como un archivo PNG.
En primer lugar, estableceremos su posicionamiento en el archivo CSS.
1 |
.post .post_content{ |
2 |
position:relative; |
3 |
top:-275px; |
4 |
left:230px; |
5 |
|
6 |
width:210px; |
7 |
height:220px; |
8 |
background-image:url(../images/bg-post-content.png); |
9 |
background-position:top left; |
10 |
background-repeat:no-repeat; |
11 |
}
|
Echando un vistazo en el navegador:
Paso 14 - Contenido de la publicación
Añadamos los contenedores para el resumen de la publicación, la información de la publicación y los comentarios:
1 |
<div class="post_content"> |
2 |
<div class="post_brief">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam |
3 |
</div>
|
4 |
<div class="post_info"> |
5 |
<span class="author">Posted by <a href="#">Admin</a></span>, |
6 |
<span class="date">Apr 14</span> |
7 |
</div>
|
8 |
<div class="post_comments"> |
9 |
<div class="number"><a href="#">29</a></div> |
10 |
<div class="comments"><a href="#">Comments</a></div> |
11 |
</div>
|
12 |
</div>
|
Y el estilo para que todo se vea bonito:
1 |
.post .post_content .post_brief{ |
2 |
width:150px; |
3 |
height:98px; |
4 |
overflow:hidden; |
5 |
|
6 |
padding-left:35px; |
7 |
padding-top:15px; |
8 |
text-align:right; |
9 |
color:#FFF; |
10 |
}
|
11 |
|
12 |
.post .post_info{ |
13 |
width:150px; |
14 |
margin-left:35px; |
15 |
margin-top:8px; |
16 |
padding-top:4px; |
17 |
|
18 |
text-align:right; |
19 |
|
20 |
border-top:1px solid #787878; |
21 |
|
22 |
font-family:Tahoma, Geneva, sans-serif; |
23 |
font-size:10px; |
24 |
color:#787878; |
25 |
}
|
26 |
|
27 |
.post .post_info a{ |
28 |
color:#787878; |
29 |
text-decoration:none; |
30 |
}
|
31 |
|
32 |
.post .post_info a:hover{ |
33 |
color:#D8D8D8; |
34 |
text-decoration:none; |
35 |
}
|
36 |
|
37 |
.post .post_comments{ |
38 |
width:50px; |
39 |
margin-top:37px; |
40 |
margin-left:56px; |
41 |
|
42 |
text-align:center; |
43 |
}
|
44 |
|
45 |
.post .post_comments a{ |
46 |
color:inherit; |
47 |
text-decoration:none; |
48 |
}
|
49 |
|
50 |
.post .post_comments .number{ |
51 |
font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif; |
52 |
font-size:14px; |
53 |
color:#FFF; |
54 |
}
|
55 |
|
56 |
.post .post_comments .comments{ |
57 |
font-size:12px; |
58 |
color:#F2AA00; |
59 |
}
|
¡Y ya terminamos con la publicación!
Paso 15 - Añade más publicaciones
Vamos a añadir más publicaciones a tu maqueta. Duplica este bloque tantas veces como quieras el div post. Debes deshacerte de la altura temporal que pusimos en el div page_content. Si todo se ejecuta correctamente, el diseño aumentará su altura a medida que agreguemos más publicaciones a la página de inicio.
Paso 16 - Contenido de la publicación destacada
Ahora que tenemos el estilo básico de la publicación terminado, vamos a estilizar el contenido de la publicación destacada. ¿Recuerdas que teníamos el siguiente código dentro del div bubble?
1 |
<div class="featured_post"> |
2 |
<h2 class="post_title">Post title</h2> |
3 |
<p class="post_brief">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam</p> |
4 |
<div class="post_info"> |
5 |
<span class="author">Posted by <a href="#">Admin</a></span>, |
6 |
<span class="date">Apr 14</span> |
7 |
</div>
|
8 |
<div class="post_comments"> |
9 |
<div class="number"><a href="#">29</a></div> |
10 |
<div class="comments"><a href="#">Comments</a></div> |
11 |
</div>
|
12 |
</div>
|
Añade el siguiente CSS y replica bubble en todas las diapositivas de nuestro banner rotativo.
1 |
/* Post */
|
2 |
|
3 |
.featured_post .post_title{ |
4 |
height:29px; |
5 |
padding-top:18px; |
6 |
|
7 |
text-align:right; |
8 |
font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif; |
9 |
font-size:18px; |
10 |
|
11 |
color:#680000; |
12 |
}
|
13 |
|
14 |
.featured_post .post_title a{ |
15 |
color:#680000; |
16 |
text-decoration:none; |
17 |
}
|
18 |
|
19 |
.featured_post .post_title a:hover{ |
20 |
color:#FFFFFF; |
21 |
}
|
22 |
|
23 |
.featured_post .post_brief{ |
24 |
height:67px; |
25 |
padding-left:30px; |
26 |
overflow:hidden; |
27 |
text-align:right; |
28 |
color:#1B1B1B; |
29 |
}
|
30 |
|
31 |
.featured_post .post_info{ |
32 |
margin-left:30px; |
33 |
text-align:right; |
34 |
padding-top:2px; |
35 |
|
36 |
font-family:Tahoma, Geneva, sans-serif; |
37 |
font-size:10px; |
38 |
color:#969696; |
39 |
|
40 |
border-top:1px solid #FFC000; |
41 |
}
|
42 |
|
43 |
.featured_post .post_info a{ |
44 |
color:#969696; |
45 |
text-decoration:none; |
46 |
}
|
47 |
|
48 |
.featured_post .post_info a:hover{ |
49 |
color:#1B1B1B; |
50 |
}
|
51 |
|
52 |
.featured_post .post_comments{ |
53 |
text-align:center; |
54 |
float:right; |
55 |
margin-top:20px; |
56 |
margin-right:10px; |
57 |
|
58 |
width:65px; |
59 |
height:40px; |
60 |
}
|
61 |
|
62 |
.featured_post .post_comments a{ |
63 |
color:inherit; |
64 |
text-decoration:none; |
65 |
}
|
66 |
|
67 |
.featured_post .post_comments .number{ |
68 |
font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif; |
69 |
font-size:24px; |
70 |
color:#FFF; |
71 |
}
|
72 |
|
73 |
.featured_post .post_comments .comments{ |
74 |
font-size:14px; |
75 |
color:#F2AA00; |
76 |
}
|
77 |
|
78 |
/* // Post */
|
También añadí un border y una box-shadow a la imagen deslizante:
1 |
#slider li img{ |
2 |
border:1px solid #FFF; |
3 |
height:248px; |
4 |
|
5 |
box-shadow: 0px 0px 20px rgba(0,0,0,.5); |
6 |
-moz-box-shadow: 0px 0px 20px rgba(0,0,0,.5); |
7 |
-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,.5); |
8 |
}
|
Debería ser así:
Paso 17 - Widgets de pie de página
En lugar de la clásica barra lateral, quería añadir un pie de página listo para los widgets. Añade el siguiente código dentro del div footer. Dentro de la barra lateral, habrá otro contenedor llamado widget, y, dentro de ese div:
- un título
- una lista desordenada y
- un
divpara la esquina rizada
Primero nos ocuparemos de la lista de categorías.
1 |
<div id="sidebar"> |
2 |
<div class="widget"> |
3 |
<h3>Categories</h3> |
4 |
<ul>
|
5 |
<li><a href="#">Lorem ipsum dolor sit amet</a></li> |
6 |
<li><a href="#">Consectetur adipisicing elit</a></li> |
7 |
<li><a href="#">Sed do eiusmod tempor</a></li> |
8 |
<li><a href="#">Incididunt ut labore</a></li> |
9 |
<li><a href="#">Et dolore magna aliqua</a></li> |
10 |
<li><a href="#">Ut enim ad minim veniam</a></li> |
11 |
<li><a href="#">Lorem ipsum</a></li> |
12 |
<li><a href="#">Dolor sit amet</a></li> |
13 |
<li><a href="#">Consectetur adipisicing</a></li> |
14 |
</ul>
|
15 |
<div class="corner"> </div> |
16 |
</div>
|
17 |
<div class="widget">W2</div> |
18 |
<div class="widget">W3</div> |
19 |
</div>
|
Ahora, en el archivo PSD, sectoriza la esquina, nómbrala widget-curl y guarda la imagen para la web como un archivo JPG. De nuevo, corta la pequeña flecha junto a los enlaces, llámala arrow y guárdala como un archivo PNG.
Y edita el archivo CSS así:
1 |
/*Footer*/
|
2 |
#footer{ |
3 |
width:940px; |
4 |
padding-left:0px; |
5 |
padding-right:10px; |
6 |
padding-top:20px; |
7 |
height:250px;/* Temporal */ |
8 |
float:left; |
9 |
|
10 |
background-image:url(../images/bg-footer.jpg); |
11 |
background-position:top center; |
12 |
background-repeat:no-repeat; |
13 |
}
|
14 |
/*End of Footer*/
|
15 |
|
16 |
/* Footer sidebar */
|
17 |
#sidebar{ |
18 |
float:left; |
19 |
width:940px; |
20 |
}
|
21 |
.widget{ |
22 |
float:left; |
23 |
margin-left:10px; |
24 |
margin-right:10px; |
25 |
}
|
26 |
.widget h3{ |
27 |
color:#F2AA00; |
28 |
|
29 |
font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif; |
30 |
font-size:14px; |
31 |
padding-bottom:10px; |
32 |
padding-left:10px; |
33 |
}
|
34 |
|
35 |
.widget ul{ |
36 |
width:200px; |
37 |
padding:20px 10px; |
38 |
|
39 |
background-color:rgba(26,26,26,.5); |
40 |
border:1px solid #252525; |
41 |
|
42 |
-webkit-border-radius: 5px; |
43 |
-khtml-border-radius: 5px; |
44 |
-moz-border-radius: 5px; |
45 |
border-radius: 5px; |
46 |
}
|
47 |
|
48 |
.widget .corner{ |
49 |
background-image:url(../images/widget-curl.jpg); |
50 |
background-position:bottom right; |
51 |
background-repeat:no-repeat; |
52 |
|
53 |
height:30px; |
54 |
margin-top:-30px; |
55 |
margin-right:-2px; |
56 |
}
|
57 |
|
58 |
.widget ul li{ |
59 |
font-size:16px; |
60 |
padding-bottom:3px; |
61 |
color:#FFF; |
62 |
}
|
63 |
|
64 |
.widget ul li a{ |
65 |
padding-left:20px; |
66 |
color:#FFF; |
67 |
text-decoration:none; |
68 |
}
|
69 |
|
70 |
.widget ul li a:hover{ |
71 |
color:#DC0000; |
72 |
background-image:url(../images/arrow.png); |
73 |
background-position:0px 6px; |
74 |
background-repeat:no-repeat; |
75 |
}
|
76 |
/* //Footer sidebar */
|
Cuando se pruebe en un navegador, deberías ver algo parecido a la siguiente imagen:
Paso 18 - Más widgets
Repite el código HTML para añadir un segundo o incluso un tercer widget de lista. Esta vez, añadiremos archivos al pie de página. Puedes probar el diseño ahora añadiendo varias copias del widget div para ver cómo queda. Lo ideal es que el área del pie de página aumente a medida que se añadan más widgets.
1 |
<!-- Widget -->
|
2 |
<div class="widget"> |
3 |
<h3>Archives</h3> |
4 |
<ul>
|
5 |
<li><a href="#">January 2011</a></li> |
6 |
<li><a href="#">February 2011</a></li> |
7 |
<li><a href="#">March 2011</a></li> |
8 |
<li><a href="#">May 2011</a></li> |
9 |
<li><a href="#">June 2011</a></li> |
10 |
<li><a href="#">July 2011</a></li> |
11 |
</ul>
|
12 |
<div class="corner"> </div> |
13 |
</div>
|
14 |
<!-- End of widget -->
|
Así es como se ve con la sección de archivos añadida:
Paso 19 - Panel con pestañas
Como ejemplo de un widget más complejo, vamos a añadir un panel con pestañas con tres tipos diferentes de contenido en cada pestaña.
Primero, añade el siguiente código HTML como marcado básico: una lista desordenada para las pestañas, y divs con diferentes ids para el contenido. Estoy añadiendo una clase general, llamada tab a todos los divs de contenido para evitar duplicar el código en el archivo CSS.
1 |
<div class="widget"> |
2 |
<div id="tabs"> |
3 |
<ul>
|
4 |
<li><a href="#tab-1">Popular Posts</a></li> |
5 |
<li><a href="#tab-2">Recent Posts</a></li> |
6 |
<li><a href="#tab-3">Recent Comments</a></li> |
7 |
</ul>
|
8 |
<div class="tab" id="tab-1"> |
9 |
<p>Tab1</p> |
10 |
</div>
|
11 |
<div class="tab" id="tab-2"> |
12 |
<p>Tab2</p> |
13 |
</div>
|
14 |
<div class="tab" id="tab-3"> |
15 |
<p>Tab3</p> |
16 |
</div>
|
17 |
</div>
|
18 |
<div class="corner"> </div> |
19 |
</div>
|
Vamos a crear un documento JavaScript, llamado tabs.js, y guardarlo en la carpeta /js. Inclúyelo añadiendo esta línea a la etiqueta <head>
1 |
<script type="text/javascript" src="js/tabs.js"></script> |
Ahora, añade un panel básico de pestañas jQuery añadiendo el siguiente código al archivo tabs.js.
1 |
$(document).ready(function(){
|
2 |
$('#tabs div').hide();
|
3 |
$('#tabs div:first').show();
|
4 |
$('#tabs ul li:first').addClass('active');
|
5 |
$('#tabs ul li a').click(function(){
|
6 |
$('#tabs ul li').removeClass('active');
|
7 |
$(this).parent().addClass('active');
|
8 |
var currentTab = $(this).attr('href');
|
9 |
$('#tabs div').hide();
|
10 |
$(currentTab).show(); |
11 |
return false; |
12 |
}); |
13 |
}); |
Con la función de JavaScript funcionando, vamos a añadir el estilo para que tenga un aspecto atractivo. En primer lugar, tendremos que cortar la pequeña flecha que apunta a la pestaña seleccionada. Llámala tab-arrow, y guárdala como PNG.
Ahora agrega el siguiente código al archivo CSS:
1 |
/* Footer Tabbed Pane */
|
2 |
#tabs{ |
3 |
}
|
4 |
|
5 |
#tabs ul{ |
6 |
background:none; |
7 |
border:0px; |
8 |
padding:0px; |
9 |
margin:0px; |
10 |
width:428px; |
11 |
min-height:30px; |
12 |
height:30px; |
13 |
|
14 |
-webkit-border-radius: 0px; |
15 |
-khtml-border-radius: 0px; |
16 |
-moz-border-radius: 0px; |
17 |
border-radius: 0px; |
18 |
}
|
19 |
|
20 |
#tabs ul li{ |
21 |
display:inline; |
22 |
float:left; |
23 |
text-align:left; |
24 |
}
|
25 |
#tabs ul .active{ |
26 |
background-image:url(../images/tab-arrow.png); |
27 |
background-position:bottom center; |
28 |
background-repeat:no-repeat; |
29 |
}
|
30 |
|
31 |
#tabs ul .active a{ |
32 |
color:#F2AA00; |
33 |
}
|
34 |
|
35 |
#tabs ul li a{ |
36 |
display:block; |
37 |
margin:0px; |
38 |
padding:0px; |
39 |
|
40 |
color:#5A5A5A; |
41 |
|
42 |
font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif; |
43 |
font-size:14px; |
44 |
padding-bottom:10px; |
45 |
padding-left:10px; |
46 |
padding-right:20px; |
47 |
}
|
48 |
|
49 |
#tabs ul li a:hover{ |
50 |
background-image:none; |
51 |
color:#F2AA00; |
52 |
}
|
53 |
|
54 |
#tabs .tab{ |
55 |
width:405px; |
56 |
padding:20px 10px; |
57 |
min-height:170px; |
58 |
/*This is to get the arrow above the tab*/
|
59 |
margin-top:-6px; |
60 |
|
61 |
background-color:rgba(26,26,26,.5); |
62 |
border:1px solid #252525; |
63 |
|
64 |
-webkit-border-radius: 5px; |
65 |
-khtml-border-radius: 5px; |
66 |
-moz-border-radius: 5px; |
67 |
border-radius: 5px; |
68 |
}
|
69 |
/* //Footer Tabbed Pane */
|
Ahora deberías tener el panel de pestañas funcionando; ¡vamos a añadir el contenido dentro!
Paso 20 - Contenido de la pestaña
Vamos a añadir algo de contenido a la pestaña. Echando un vistazo al gráfico, te darás cuenta de que tenemos una lista de tres publicaciones (últimas y populares) con el título, un resumen, y un paginador en la parte inferior para navegar por las publicaciones.
Pega el siguiente código dentro de una pestaña:
1 |
<span class="item"> |
2 |
<h4><a href="#">John Doe</a></h4> |
3 |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore...</p> |
4 |
</span>
|
5 |
<span class="item"> |
6 |
<h4><a href="#">Jane Smith</a></h4> |
7 |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore...</p> |
8 |
</span>
|
9 |
<span class="item"> |
10 |
<h4><a href="#">SpiderHuman</a></h4> |
11 |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore...</p> |
12 |
</span>
|
13 |
|
14 |
<span class="pager"><a href="#">«</a><a href="#">1</a><a href="#" class="active">2</a><a href="#">3</a><a href="#">»</a></span> |
Y ahora el CSS:
1 |
/*Tabs Content*/
|
2 |
.tab .item{ |
3 |
float:left; |
4 |
padding:5px 10px; |
5 |
|
6 |
-webkit-border-radius: 7px; |
7 |
-khtml-border-radius: 7px; |
8 |
-moz-border-radius: 7px; |
9 |
border-radius: 7px; |
10 |
}
|
11 |
|
12 |
.tab .item:hover{ |
13 |
background-color:#000; |
14 |
|
15 |
background-image: -moz-linear-gradient(left, #000000, #0D0D0D); |
16 |
background-image: -webkit-gradient(linear, left, right, color-stop(0.00, #000000), color-stop(1.00, #0D0D0D)); |
17 |
}
|
18 |
|
19 |
.tab .item:hover h4 a{ |
20 |
color:#F2AA00; |
21 |
}
|
22 |
|
23 |
.tab .item h4{ |
24 |
padding-bottom:3px; |
25 |
color:#FFFFFF; |
26 |
|
27 |
font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif; |
28 |
font-size:14px; |
29 |
}
|
30 |
|
31 |
.tab .item h4 a{ |
32 |
color:#FFFFFF; |
33 |
text-decoration:none; |
34 |
}
|
35 |
|
36 |
.tab .item h4 a:hover{ |
37 |
color:#F2AA00; |
38 |
}
|
39 |
|
40 |
.tab .item p{ |
41 |
color:#909090; |
42 |
font-size:15px; |
43 |
}
|
44 |
|
45 |
.pager{ |
46 |
float:right; |
47 |
text-align:right; |
48 |
padding-right:40px; |
49 |
}
|
50 |
|
51 |
.pager a{ |
52 |
color:#4A4848; |
53 |
padding-left:5px; |
54 |
}
|
55 |
|
56 |
.pager a:hover{ |
57 |
color:#F2AA00; |
58 |
}
|
59 |
|
60 |
.pager a.active{ |
61 |
color:#D11300; |
62 |
}
|
63 |
/* //Tabs Content*/
|
Replicar el HTML para cada pestaña. Así es como debería verse:
Paso 21 - Pie de página
Por último, añade la barra de navegación del pie de página y la información sobre el copyright:
1 |
<div id="footer_content"> |
2 |
<ul id="footer_nav"> |
3 |
<li><a href="#">Home</a></li> |
4 |
<li><a href="#">About us</a></li> |
5 |
<li><a href="#">Contact us</a></li> |
6 |
<li><a href="#">Privacy Policy</a></li> |
7 |
<li><a href="#">Sitemap</a></li> |
8 |
</ul>
|
9 |
<div id="copyright">Tuts+</div> |
10 |
</div>
|
Ahora, sectoriza la línea de degradado de 1px del archivo PSD, nómbrala "bg-footer-line" y guárdala como JPG. Por último, edita el CSS para configurar todo.
1 |
/* Footer Nav */
|
2 |
#footer_content{ |
3 |
float:left; |
4 |
width:940px; |
5 |
height:45px; |
6 |
padding:10px; |
7 |
margin-top:10px; |
8 |
|
9 |
background-image:url(../images/bg-footer-line.jpg); |
10 |
background-position:top center; |
11 |
background-repeat:no-repeat; |
12 |
|
13 |
font-family:Tahoma, Geneva, sans-serif; |
14 |
font-size:10px; |
15 |
color:#515151; |
16 |
}
|
17 |
|
18 |
#footer_nav{ |
19 |
|
20 |
}
|
21 |
|
22 |
#footer_nav li{ |
23 |
display:inline; |
24 |
}
|
25 |
|
26 |
#footer_nav li:last-child a{ |
27 |
border-right:none; |
28 |
}
|
29 |
|
30 |
#footer_nav li a{ |
31 |
color:#515151; |
32 |
padding-right:5px; |
33 |
border-right:1px solid #292929; |
34 |
}
|
35 |
|
36 |
#footer_nav li a:hover{ |
37 |
color:#F2AA00; |
38 |
}
|
39 |
|
40 |
#copyright{ |
41 |
float:right; |
42 |
padding-right:30px; |
43 |
}
|
Conclusión
¡Y ya está! Hemos terminado con el proceso de conversión. El código utilizado en este caso ha sido probado en la mayoría de los navegadores. Si necesitas compatibilidad con IE6 y 7, no debería ser un gran problema escribir algunas correcciones para ellos específicamente. Nuestro diseño está ahora listo para ser integrado perfectamente en cualquier CMS. ¡Buena suerte y muchas gracias por leer!
By
