| NOTA PREVIA: Este tutorial de ejemplo hace referencia a conceptos explicados en el Tutorial de maquetación web, de esta misma web. |
| Para hacer la estructura de nuestra web, lo primero que tenemos que tener claro es el diseño de esa estructura. Yo voy a escoger el diseño que hay dibujado en el Tutorial de maquetación, que se ajusta bastante al de esta web. |
 |
| Contendrá un encabezado, un pie y en médio tres columnas, la del centro mucho más ancha para introducir los contenidos. En la izquierda se pueden situar los menus, y en la derecha, por ejemplo publicidad, o links a páginas externas, o encuestas o noticias. Lo que deseemos. |
| Ahora crearemos una carpeta en el sitio que queramos de nuestro PC y dentro de ella crearemos dos ficheros de texto (por ejemplo, con el notepad). Uno de ello se llamará index.html (ahi estará todo el código HTML de nuestra página) y el otro se llamará misestilos.css que contendrá todas las propiedades CSS que necesitemos para dar formato a los elementos HTML de nuestra web. |
| En el fichero misestilos.css de momento solo escribiremos la línea |
| *{margin:0; padding:0;} |
| para asegurarnos de que los margenes de cualquier navegador que usemos estan a cero (cada navegador preestablece sus márgenes y eso genera discrepancias en los diseños). |
| Por otra parte, el fichero index.html deberá contener una estructura como esta: |
 |
| donde la línea < link href="misestilos.css" rel="stylesheet" type="text/css" > |
| nos indica que este documento va a utilizar como hoja de estilos el archivo externo misestilos.css. |
| Creo que resulta obvio que la zona visible de una web depende de la resolucion del monitor del visitante. Si tenemos una resolución de 800x600 pixels, veremos menos contenido que en una resolución de 1280x1024 pixels. Eso resulta un problema para nuestra estructura, pues no sabemos el tamaño máximo que tendrá nuestra página. Hay nuchas formas de crear páginas que se adapten al ancho de la pantalla de cualquier ordenador, utilizando medidas específicas para ello. Yo, por mi parte, prefiero hacer la web de un tamaño preestablecido (al menos el ancho de la página) y para ello debo tomas una decisión ¿que resolución le doy a la página? |
| A fecha de hoy, la mayoría de los monitores tienen una resolución entre los 1024x768 y los 1600x1050 pixels o superior incluso. Entonces he decidido que voy a hacer la página para una anchuda de 1024 pixels. Si la resolución de la pantalla del visitante es inferior, se le verá la barra de scroll horizontal o perderá algo de información (dependiendo de la propiedad overflow que pongamos), y si la resolución es superior, parte de la pantalla quedará vacía. |
| He escogido esta resolución de ancho y no otra inferior, porque en ese caso los monitores muy grandes verán el contenido de nuestra página demasiado pequeño, y el futuro se orienta a que desaparezcan las resoluciones pequeñas y aparezcan nuevas más grandes, con lo que empeoraríamos la situación. Esa es mi decisión. Cualquier otra puede ser igual de buena. |
| Pero lo que no me gusta es que la página aparezca a la izquierda de la pantalla dejando el hueco libre a la derecha. Lo que yo deseo es que, en resoluciones grandes, mi página aparezca centrada horizontalmente. Para ello lo primero que vamos a hacer es generar una gran caja (que vamos a llamar CONTENEDOR) y la centraremos respecto a la pantalla. Asi, dentro de ella, crearemos nuestra estructura de la web. |
| Creamos en el BODY de index.html las etiquetas < DIV ID="contenedor" >< /DIV > |
| En misestilos.css crearemos la etiqueta BODY y de momento le pondremos un color de fondo, por ejemplo, negro. |
| BODY { background-color: black;} |
| Y ahora crearemos la etiqueta de CONTENEDOR en el fichero de estilos y le daremos algunos atributos. ¿cuales? |
| El color del fondo, por ejemplo, amarillo (vamos a usar colores distintos para tener mejor detalle visual mientras estructuramos la web, pero no serán los definitivos). |
| La altura y la anchura. |
| Posicionaremos la caja con top y left en la pantalla. |
| La anchura parece que está clara, es 1024px. Pero hay algo que hay que tener en cuenta. Si el contenido desborda la pantalla (que sucederá seguro por abajo), saldrá una barra de scroll vertical. Si declaramos la anchura justo como 1024px, en pantallas de dicha resolución, la barra se comerá parte del contenido, con lo que hay que restarle a 1024 el ancho de la barra de scroll, que son 20 pixels. De esta forma , el atributo WIDTH de nuestra caja CONTENEDOR tendrá el valor 1004. |
| Dandole a la altura el valor 200px de momento, voy a posicionar la caja poniendole un position:relative, que la colocará la primera dentro del BODY porque no hay ninguna otra antes y le corresponde por el flujo del documento. |
| El top y el left los voy a poner a 0px, porque la caja va posicionarse arriba y a la izquierda de la pantalla. |
| Pero si pongo el left a 0px, la caja empezará a la izquierda de la pantalla y yo queria centrarla, es decir, que la caja tenga un ancho fijo (eso ya lo sabiamos) y que los huecos de los lados sean flexibles, de esta forma a medida que voy cerrando la ventana de un lado, los margenes exteriores de la caja contenedor deben ir disminuyendo dejando la caja centrada horizontalmente. Para lograrlo dejaremos la caja posicionada totalmente a la izquierda de la pantalla y jugaremos con la propiedad MARGIN (margen) para dejar los espacios a los lados. Eso se hace de la siguiente forma: |
| Coloco en la etiqueta BODY la propiedad TEXT-ALIGN con el valor CENTER. Esto hará que todo el contenido de esta caja aparezca centrado, es decir, estamos centrando todo el contenido de nuestra web (realmente esto no deberia ser asi y porque la propiedad TEXT-ALIGN solo deberia actuar sobre los elementos "en linea" y no sobre un bloque completo, pero nos aprovechamos de este error para lograr nuestro objetivo). |
| Ahora, en la etiqueta CONTENEDOR añadimos la propiedad margin:auto. Esto hará que la caja CONTENEDOR reparta los margenes equitativamente a un lado y a otro. Como la anchura es de 1004px, lo que sobre (segun la resloucion de la pantalla) se repartirá a cada lado de la caja CONTENEDOR. |
| Un ultimo detalle es que debemos volver a corregir la alineacion del texto en la caja CONTENEDOR, porque si no lo hacemos, todos los contenidos aparecerán centrados. Colocamos un TEXT-ALIGN:LEFT; y asi volveremos a la forma normal de posicionamiento a la izquierda de la caja. |
| NOTA: La propiedad margin se explica con detalle en el tutorial de Bordes y Margenes. |
| NOTA2: La propiedad text-align aun no la he explicado, pero basta con saber de momento que sirve para alinear el texto respecto a la ventana, aunque aqui aprovechemos un error en su implementacion para alinear todo el contenido del bloque (en nuestro caso, la caja CONTENEDOR). Sus posibles valores son LEFT, RIGHT, AUTO y JUSTIFY. |
| El codigo resultante del CSS será este: |
 |
| El aspecto de la web será este: |
 |
| Pulsa en este link ' EJEMPLO 1 ' para ejecutarlo. |
| Prueba con la ventana sin maximizar y ve variando el margen derecho con el raton para que veas como los huecos laterales disminuyen de tamaño y la caja se mantiene centrada hasta que el tamaño de la ventana es menor al de la caja. Entonces aparece la barra de scroll horizontal para poder visualizar el contenido que no entre en la ventana o en la pantalla. |
| Aun nos queda que solucionar el tema de la altura. La hemos definido en una medida fija (200px), pero lo que suele suceder es que nunca sabremos lo que va a medir la página. Lo más normal es que el modelo de página la dupliques varias veces para acceder a las distintas secciones de la web, y cada seccion tendrá un tamaño de largo dependiento de sus contenidos (fijate en esta). Ante este sistema, lo lógico seria ponerle de altura HEIGHT:auto; ya que así, cuando definamos otras cajas dentro de ésta, su tamaño determinará el tamaño de la principal. Pero si ahora le ponemos la altura como auto, la caja no se verá porque dentro aun no hay contenido, con lo que de momento la ampliaremos para ver mejor al valor 600px. Puede que ahora mismo sea un poco complicado de entender, pero más adelante será más fácil. |
|
| Vamos a ir llenando de contenido nuestra caja CONTENEDOR. |
| Lo primero que vamos a añadir es una cabecera, donde pondremos más adelante el banner principal. La llamaremos de una forma complicada, CABECERA. ;) |
| Esa cabecera vá a ocupar de ancho toda la caja, y de alto, por ejemplo 100px. |
| A mi no me gusta posicionar la cabecera fija (fixed) entre otras cosas porque pierdo espacio de pantalla para siempre y porque IExplorer no soporta ese atributo. La podemos posicionar como absolute o como relative, pero como bajo ella vamos a ir posicionando las demás, creo más oportuno hacerlo como relative. |
| A esta cabecera no le vamos a dar la opcion de desbordarse, para que no nos descuadre los demás contenidos. Para ello fijaremos su overflow a hidden. Por último la colorearemos de azul, por ejemplo, para ver los cambios. |
| En el BODY, tendrás que añadir las etiquetas < DIV ID="cabecera" >< /DIV >, entre las etiquetas de apertura y cierre de la caja CONTENEDOR. |
| El codigo resultante del CSS será este: |
 |
| El aspecto de la web será este: |
 |
| Pulsa en este link ' EJEMPLO 2 ' para ejecutarlo. |
| Ahora vamos a hacer el cuerpo, es decir, la ancha columna del centro. La voy a hacer antes que los laterales, porque esta caja irá posicionada de forma relativa (relative) bajo la cabecera. En principio, algunos datos van a ser faciles de entender. |
| La posicion será relative y cambiaremos su color del fondo a blanco. |
| Ahora, antes de posicionarla debemos saber que anchura deseamos que tenga es caja, y la anchura de las dos columnas laterales. Si el total son 1004px, voy a dejar la columna izquierda a 200px de ancho, la central o cuerpo a 620px y la columna derecha a 184px, por ejemplo. Eso me deja un top a 0 (porque la caja es relative y se situará bajo la caja hermana relative, la cabecera. Si la caja cabecera fuese absoluta, tendriamos que definir el top a 100px, para colocarla bien, porque las posiciones absolutas se salen fuera del flujo del documento) y un left a 200px. |
| Ahora vamos con la altura. Realmente esta es la caja responsable de la altura de la web. Esto es asi porque considero que siempre los contenidos de esta caja de todas las páginas con esta estructura van a ser mayores que los contenidos de las cajas laterales. Para ello, si definimos la altura de esta caja en auto, a medida que le vaya metiendo datos, la caja crecerá y con ella la caja CONTENEDOR y las laterales cuando las defina. A la caja CONTENEDOR ahora le cambiaré su valor de altura a auto tambien. |
| Pero aunque esté seguro de que la caja central será mayor que las dos laterales, podria ser que no en alguna ocasion. Para asegurarme de no cometer errores y que la ventana se cierre sobre los contenidos de las cajas laterales, podria establecer una altura mínima donde esté seguro que los menus de la caja izquierda y los contenidos de la caja derecha no van a llegar nunca. Podriamos definir esa altura mínima como la suficiente para que si luego le ponemos un pie a la pagina de, por ejemplo, 40px, desde la cabecera hasta el pie se pueda ver completa en el navegador maximizado. Como hemos supuesto una definicion mínima de 1024x 768, le daremos a esa altura mínima el valor de 700px (si vemos que en ese espacio no nos entran loscontenidos de las columnas laterales, lo agrandaríamos). |
Para definir la altura mínima de una caja DIV se utiliza la propiedad MIN-HEIGHT. |
| El problema es que esa propiedad no la soporta IExplorer, que con la propiedad HEIGHT actua de la misma forma que el resto de navegadores con MIN-HEIGHT, es decir, prolongará la longitud de la caja hasta englobar al contenido (eso siempre y cuando el overflow de la caja esté en visible, claro, como está por defecto). |
| Hay que recurrir a un buen truquillo que he encontrado en foros y blogs y que funciona bastante bien. |
| Primero definimos la altura mínima con MIN-HEIGHT: 700px; |
| Esta linea la entenderán todos los navegadores exepto IExplorer. |
| Segundo colocamos la linea HEIGHT: auto; |
| Tercero colocamos la linea HEIGHT: 700px; |
| El truco consiste en darle un mayor peso a la ejecucion de la segunda linea añadiendole el atributo ! important, que IExplorer no entiende y que el resto de navegadores entiende como que si existe dos veces especificada la misma propiedad, la que tenga ese atributo será la que se ejecute. |
| Si ponemos las tres lineas consecutivas, tendremos |
| MIN-HEIGHT: 700px; |
| HEIGHT: auto ! important; |
| HEIGHT: 700px; |
| IExplorer reaccionará a la primera y a la tercera linea, no haciendole caso a la segunda. Como IExplorer desborda la caja para contener a su contenido (valga la redundancia), la mínima altura funciona perfectamente. |
| Para el resto de exploradores, la primera sentencia la entienden tal cual es, y entre la segunda y la tercera, que son la misma propiedad, escogeran la !important y estableceran la altura de la caja en auto, que es lo que deseamos. |
| Voy a hacer los cambios paso a paso. |
| Lo primero declaro nuestra nueva caja < DIV > en el BODY bajo la caja CABECERA, dentro de la capa CONTENEDOR. |
| El codigo resultante del index.html será este: |
 |
| Segundo, ya en el archivo CSS, modifico la altura de la caja CONTENEDOR a auto y luego declaro las propiedades de la nueva caja CUERPO. |
| El codigo resultante del CSS será este: |
 |
| El aspecto de la web será este: |
 |
| Pulsa en este link ' EJEMPLO 3 ' para ejecutarlo. |
| Siguiendo hacia abajo, pondremos el pie. Es tan simple como declararlo bajo el div CUERPO en el BODY y como propiedades CSS le daremos 40px de altura. |
| El codigo resultante del index.html será este: |
 |
| El codigo resultante del CSS será este: |
 |
| El aspecto de la web será este: |
 |
| Pulsa en este link ' EJEMPLO 4 ' para ejecutarlo. |
| Para terminar, posicionaré las dos columnas laterales. Una de rojo y otra de naranja. La izquierda de 200px de ancho, y la derecha de 184px de ancho. Las dos llegarán hasta abajo, con lo que su altura será del 100% de su contenedor padre, que en este caso es CONTENEDOR. |
| Estas dos columnas debo posicionarlas de modo absoluto (absolute) para colocarlas donde deseo. Esto tambien significa que en la declaracion de los DIV en el BODY, no es necesario colocarlos detras del DIV PIE, pues como se salen del flujo del programa por estar posicionadas de forma absoluta, su relacion con el resto de hermanos carece de valor. |
| El codigo resultante del index.html será este: |
 |
| El codigo resultante del CSS será este: |
 |
| El aspecto de la web será este: |
 |
| Pulsa en este link ' EJEMPLO 5 ' para ejecutarlo. |
Español
English
Página de Portada
