Curso de diseño web - Apuntes
Maquetar con DIVS y CSS
Una vez resuelto el diseño en Fireworks o Photoshop, analizamos el sitio de manera de separar en zonas según su contenido, por ejemplo: encabezado, menu, contenido y pie. Con ese criterio comenzamos a armar en html la estructura semántica del sitio.
Cómo empezar:
1 - En un archivo nuevo, insertar etiqueta div con ID "contenedor". Esta etiqueta nos permitirá definir el ancho y la alineación de la página y servirá para contener todas las otras divs.
2- Borramos el texto (con cuidado de no borrar la div) y volvemos a insertar una etiqueta div, esta vez con ID "encabezado". Borramos nuevamente el texto y colocamos aqui los elementos importantes (texto o imágenes) del encabezado, dejando las imágenes de fondo para los CSS.
3- La siguiente div "menu", deberá estar debajo de la etiqueta encabezado pero dentro de la etiqueta contenedor. Para insertarla usamos la opción después de la etiqueta y seleccionamos "encabezado":
Luego borramos el texto y colocamos el texto para el menú.
4- De la misma manera insertamos las etiquetas contenido y pie.
Jerarquizar
Después de colocar el contenido es fundamental jerarquizarlo y chequear que cada elemento esté dentro de la etiqueta que le corresponde. Por ejemplo a los títulos y subtítulos colocar encabezados <h1> <h2>, a los enlaces convertirlos en listas con las etiquetas <ul> y <li>, chequear que los párrafos estén correctamente colocados en etiquetas <p> y no separados por <br><br> y por último ver que las imágenes no queden encerradas en etiquetas <p>. Al logo o nombre del sitio si estuviera resuelto con una imagen, ésta puede ser colocada dentro de la etiqueta <h1> con su texto alternativo, para que éste tome la jerarquía que le corresponde cuando la imagen no se visualice.
De esta manera el HTML quedó terminado, y el contenido correctamente estructurado con criterio semántico.
Definir estilos
Todos los estilos se pueden crear desde la opción avanzadas si tenemos la precaución de escribir correctamente el nombre del estilo.
Para comenzar se crea un estilo para la etiqueta body, definiendo por ejemplo el color o la imagen de fondo y la familia y tamaño de la fuente.
Luego se definen los estilos para cada div que se llamarán #contenedor , #encabezado, #menu, #contenidos, #pie con sus imágenes de fondo, y rellenos para "despegar" el contenido de sus bordes.
Para los demás elemetos utilizamos lo que se denomina selector descendente, que especifica la ubicación de la etiqueta a la que queremos modificar.
Por ejemplo: podemos crear un estilo #encabezado img con borde="0" para quitarle el borde azul al logo si es que lo vinculamos. Este estilo se refiere únicamente a la etiqueta <img> dentro de la div encabezado y no afecta a las otras imágenes del sitio. Otro ejemplo: #contenidos h2 para definir tipografía y márgenes de los títulos.
De la misma manera, se define un estilo para los enlaces del menú con el nombre #menu a, definiendo el cambio del enlace al pasar el mouse por arriba con el estilo #menu a:hover. Así podemos crear otro estilo de enlaces para los textos con #contenidos a y #contenidos a:hover.
Links recomendados:
http://www.cristalab.com/tutoriales/180/el-modelo-de-caja-de-css
http://www.disenorama.com/tutoriales/disena-una-pagina-con-codigo-semantico
http://www.cristalab.com/tutoriales/131/componer-un-diseno-de-3-
columnas-en-xhtml-y-css
http://www.tejedoresdelweb.com/w/CSS
http://www.librosweb.es/css/index.html
http://www.sidar.org/recur/desdi/traduc/es/css/cover.html
http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/