03 HTML CSS maquetar con div Maquetar o estructurar una pgina Web consiste en organizar su contenido para que cada elemento aparezca en el lugar y con el formato que queramos. El formato (los estilos) los dejamos para CSS y la estructura la organizamos en HTML. Lo habitual es crear una hoja denominada plantilla.html con la estructura deseada y otra con los estilos plantilla.css, para que sirvan de base al desarrollo de todas las pginas posteriores. HTML Estructura. Que elementos bsicos suele contener una pgina Web?. Generalmente, tienen: Una cabecera En la que aparecer un logotipo y un ttulo o lema. Un men de navegacin Para acceder fcilmente a cualquier pgina del sitio Web. Un cuerpo principal Donde aparecer el contenido de la pgina. Un pie En el que se colocarn referencias del autor, copiright, etc. 03 HTML CSS maquetar con div | Recursos didcticos http://joaquinrec.wordpress.com/programacion/css-indice/html-css-ma... 1 de 9 02/10/2013 2:28 Opcionalmente podrn incluir: Una zona de anuncios Para avisos sobre temas relacionados. Una zona de enlaces En la que se muestran Webs recomendadas. etc, etc. La siguiente gura muestra un posible diseo. (hp://joaquinrec.wordpress.com/programacion/css-hojas-de-estilo-en-cascada/html-css-maquetar- con-div/htmlestructurapweb/) La zona denominada Global contiene a todas las divisiones y a su vez, est contenida en el body de la pgina Vamos a ver como conseguimos esta estructura utilizando la etiqueta div Cdigo HTML: <body> <div id="global"> <div id="cabecera"> Contenido de la cabecera. </div> <div id="navegacion"> Contenido de men de navegacin. </div> <div id="principal"> Contenido de la pgina. </div> <div class="anuncios1"> Contenido de la zona de anuncios 1, ya que podemos poner ms. </div> <div id="pie"> Contenido del pie </div> </div> </body> Ten esto en cuenta. Si el bloque es nico para la pgina, lo que ocurre con: global, cabecera, navegacin, principal y pie, la etiqueta div va acompaada de la palabra clave id. En caso 03 HTML CSS maquetar con div | Recursos didcticos http://joaquinrec.wordpress.com/programacion/css-indice/html-css-ma... 2 de 9 02/10/2013 2:28 contrario, deber incorporar la palabra clave class. Esto lo veremos cuando demos formato en CSS. Por supuesto, dentro de cada bloque podrs crear cuantas divisiones necesites utilizando de nuevo <div > </div> dentro del bloque correspondiente. Crea un archivo plantilla.html con el contenido anterior y el resto de etiquetas necesarias, o puedes copiar y pegar el que te indico a continuacin. Lo ejecutas y compruebas su resultado. Vers que lo nico que aparecen son los textos en cada lnea. El formato se lo vamos a empezar a aplicar. Cdigo HTML: <html> <head> <title>Creando divisiones</title> </head> <body> <div id="global"> <div id="cabecera"> Contenido de la cabecera. </div> <div id="navegacion"> Contenido de men de navegacin. </div> <div id="principal"> Contenido de la pgina. </div> <div class="anuncios1"> Contenido de la zona de anuncios 1, ya que podemos poner ms. </div> <div id="pie"> Contenido del pie </div> </div> </body> </html> CSS Formato (estilos). Creadas las zonas vamos a darle formatos individualizados con CSS. En primer lugar tenemos que crear el archivo .css y escribir las declaraciones, pero antes debemos comprender los parmetros que rigen a cada bloque, as como las unidades de medida que se emplearn para establecerlos, como poner colores, etc., etc.. 03 HTML CSS maquetar con div | Recursos didcticos http://joaquinrec.wordpress.com/programacion/css-indice/html-css-ma... 3 de 9 02/10/2013 2:28 Conceptos del bloque. La estructura de cualquier elemento considerado un bloque tienen los siguientes componentes. (hp://joaquinrec.wordpress.com/programacion/css-hojas-de-estilo-en-cascada/html-css-maquetar- con-div/htmlbloques/) Contenido. Este espacio ser el que albergar, en su totalidad, tanto al texto como a las imgenes que insertemos entre las etiquetas <div > y </div> as como a cualquier otro bloque que pertenezca a l. Ancho y alto (width height). Especican exactamente las dimensiones que tendr la supercie que alberga el CONTENIDO. Borde (border). Determina la decoracin del bloque; es decir, si est recuadrado o no con lneas, en su totalidad o solo en algunos de sus lados, si son visibles o no, el tipo de lnea que emplea, el color, etc. Relleno (padding). Consiste en el espacio que intermedia entre el borde y el contenido. Podramos interpretarlo como los mrgenes interiores. Se controlan los cuatro a la vez, o de forma individualizada. Margen (margin). Controla la distancia entre el borde de nuestro bloque y los elementos del bloque contenedor; es decir, del bloque en el que est introducido nuestro bloque en cuestin, dado que los bloques pueden ser ho o padres de otros. Para no hacernos un lo, los margenes de toda la vida, el espacio en el que no podemos escribir nada. Para diferenciarlo del padding, podramos decir que son los mrgenes exteriores. 03 HTML CSS maquetar con div | Recursos didcticos http://joaquinrec.wordpress.com/programacion/css-indice/html-css-ma... 4 de 9 02/10/2013 2:28 Otras propiedades de nuestro bloque a tener en cuenta son: Imagen de fondo (backgroun-image). Muestra, como fondo, la imagen a la que se enlace, teniendo en cuenta que rellenar la supercie que abarque tanto el CONTENIDO como el PADDING, si es que el tamao de la imagen da para ello, aunque esto se podra solucionar. Color de fondo (background-color). Muestra, como fondo, el color que se le asigne. Abarca la misma supercie que la imagen de fondo, pero por detrs de sta si estn los dos elementos establecidos. La imagen de fondo con zonas transparentes permitirn ver el color de fondo, dado que ste quedara como la capa de nivel inferior. Unidades de medida. Para establecer las dimensiones, debemos utilizar las unidades. Existen de tres tipos: absolutas (in, cm, mm, pt, pc), porcentajes (x%), y relativas (px, em, ex). De entre ellas, emplearemos las relativas, ya que se adaptarn mejor a todos los dispositivos que visualicen las pginas. px = pxel (relativa a los puntos de la pantalla en la que se visualice la pgina). em = ancho de la letra M mayscula de la fuente que se est utilizando. ex = alto de la letra x de la fuente que se est utilizando. Colores. La forma ms extendida consiste en establecerlo por medio del cdigo RGB rojo-verde-azul (Red-Green-Blue) en hexadecimal, anteponindole el smbolo #. Por ejemplo, el rojo puro sera #FF0000. Cualquier programa de edicin de imgenes puede facilitarnos la paleta de colores y su equivalente en hexadecimal, el cual trasladaramos a nuestro cdigo. Es posible establecer 17 colores indicando su nombre, pero est opcin, por su limitacin no se suele emplear. 03 HTML CSS maquetar con div | Recursos didcticos http://joaquinrec.wordpress.com/programacion/css-indice/html-css-ma... 5 de 9 02/10/2013 2:28 Otra opcin consiste en utilizar una aplicacin especca como la que se puede encontrar en este blog (hp://www.trucosblogger.com/2007/06/generador-hex-color.html). Reglas CSS. El formato que emplearemos para establecer los estilos de cada elemento se ajusta al siguiente patrn. (hp://joaquinrec.wordpress.com/programacion/css-hojas-de-estilo-en-cascada/css-pwebreglacss/) El selector puede corresponder a: .- Una etiqueta convencional del HTML a la que le queremos modicar algn parmetro. En este caso, el selector se corresponde exactamente con el nombre de la etiqueta; por ejemplo, h1, que hacer referencia a los texto de ttulo. .- Una etiqueta div acompaada por el identicador id, que maniesta la existencia nica de esa etiqueta en toda la pgina Web; por ejemplo <div id=cabecera> </div>, ya que solo habr una cabecera. En este caso el selector ser el nombre de la etiqueta precedida por el smbolo #; por ejemplo #cabecera. .- Una etiqueta div acompaada por el identicador class, que indica la existencia nica o mltiple de esa etiqueta en toda la pgina Web; por ejemplo <div class=anuncios1> </div>. En este caso el selector ser el nombre de la etiqueta precedida por el smbolo .; por ejemplo .anuncios1. Las referencias y valores aplicables segn es stndar ocial CSS2 se pueden consultar aqu (hp://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/), y aqu (hp://www.w3.org/TR/CSS21/) las especicaciones. En este otro lugar (hp://www.librosweb.es/), puedes descargarte algunos libros gratuitos en formato .pdf relacionados con el tema. Vamos a iniciar una archivo de estilos para establecer dimensiones colores y posiciones a algunos de nuestros bloques. Cdigo CSS: 03 HTML CSS maquetar con div | Recursos didcticos http://joaquinrec.wordpress.com/programacion/css-indice/html-css-ma... 6 de 9 02/10/2013 2:28 body { backgroundcolor: #E2F47C; } #global { width:800px; height:800px; margin: 0 auto 0 auto; backgroundcolor: #ffbbbb; } .anuncios1 { width:150px; margin: 0 auto 0 auto; backgroundcolor: #B4ff68; float: right; } Como podemos observar, entre los smbolos de llave van colocadas todas las declaraciones que se le aplicarn a cada bloque, eso s, nalizadas con un punto y coma ; ya que de lo contrario tendramos problemas. Por ltimo, lo que nos queda es enlazar los dos archivos. Para ello, el archivo plantilla.html, debe contener la siguiente lnea <link rel="stylesheet" href="plantilla.css" type="text/css" media="all"> dentro de las etiqueta <head> </head> Los archivos nales, con algunos aadidos quedaran as: Cdigo HTML: plantilla.html 03 HTML CSS maquetar con div | Recursos didcticos http://joaquinrec.wordpress.com/programacion/css-indice/html-css-ma... 7 de 9 02/10/2013 2:28 <!DOCTYPE html> <! SIN ESTO, NO RECONOCE html5> <html lang="es"> <head> <meta charset="utf8" /> <link rel="stylesheet" href="plantilla.css" type="text/css" media="all"> <title>Recursos didcticos(jbfb)</title> <! Insertar aqu mas Metatags> </head> <body> <div id="global"> <div id="cabecera"> Contenido de la cabecera. </div> <div id="navegacion"> Contenido de men de navegacin. </div> <div id="principal"> Contenido de la pgina. <p> prrafo vacio</P> <p> prrafo vacio</P> <p> prrafo vacio</P> <p> prrafo vacio</P> <p> prrafo vacio</P> <p> prrafo vacio</P> <p> prrafo vacio</P> <p> prrafo vacio</P> <p> prrafo vacio</P> </div> <div class="anuncios1"> Contenido de la zona de anuncios 1, ya que podemos poner ms. </div> <div id="pie"> Contenido del pie </div> </div> </body> </html> Cdigo CSS: plantilla.css 03 HTML CSS maquetar con div | Recursos didcticos http://joaquinrec.wordpress.com/programacion/css-indice/html-css-ma... 8 de 9 02/10/2013 2:28 body { backgroundcolor: #E2F47C; } #global { width:800px; height:800px; margin: 0 auto 0 auto; backgroundcolor: #ffbbbb; } #cabecera { width:800px; margin: 0 auto 0 auto; backgroundcolor: #B40068; } #navegacion { width:780px; margin: 0 auto 0 auto; backgroundcolor: #B4CD00; } #principal { width:650px; margin: 0 auto 0 auto; backgroundcolor: #ffCD68; float: left; } .anuncios1 { width:150px; margin: 0 auto 0 auto; backgroundcolor: #B4ff68; float: right; } #pie { width:800px; margin: 0 auto 0 auto; backgroundcolor: #B4C355; float: left; } Cpialos , archvalos y comprueba su resultado haciendo doble clic sobre el archivo plantilla.html. Si quieres, pinchando aqu (hp://joaquin.16mb.com/ejemplosdelblog/maquetado.html)puedes ver el resultado antes de hacerlo t. A partir de ahora lo que tendramos que hacer es completar el contenido de cada bloque, y por supuesto, cambiar los colores.
Continuar Blog de WordPress.com. The Paperpunch Theme. 03 HTML CSS maquetar con div | Recursos didcticos http://joaquinrec.wordpress.com/programacion/css-indice/html-css-ma... 9 de 9 02/10/2013 2:28