Maquetación de una página web
Con los elementos que ya conocemos podemos realizar operaciones de maquetación dentro de una página web.
La ventaja del uso de bloques definidos con <div>, además de aplicar formato es que podemos posicionarlos en el lugar que más nos convenga, gracias a algunas de las propiedades de las hojas de estilo.
Ubicación de un bloque
Utilizando los valores de Flotación podemos ubicar el bloque a la izquierda, a la derecha e incluso centrarlo en determinados momentos.
Traducido a estilos, este cambio es tan sencillo como indicar lo siguiente:
<div syle="float: right;">
Posicionamiento absoluto
Probemos ahora a modificar la posición de varios bloques. En la figura se muestra una página con tres contenidos diferentes: un título, un índice y un bloque de texto largo. Mientras no se apliquen estilos, los contenidos se mostrarán uno sobre otro.
La parte que nos interesa del código fuente ha quedado así:
<body>
<div checked="true" style="position: absolute; top: 21px; left: 8px; width: 719px; height: 54px;">
<h1>Centro integrado</h1>
</div>
<div style="position: absolute; top: 110px; left: 20px; height: 349px; width: 145px;">
<h1>Índice</h1>
Página principal<br />
Material multimedia<br />
Autores<br />
</div>
<div checked="true" style="position: absolute; top: 106px; left: 213px; width: 445px; height: 645px;">
<h1>Introducción<br /> .....
A continuación, iremos seleccionando cada uno de los bloques y seleccionando la opción Absoluta, en la opción de Posición.
Podemos repetir el mismo proceso hasta ubicarlos a nuestro gusto.
Observando de nuevo el código fuente, veremos que se han incorporado algunos estilos con sus respectivos valores:
- position: absolute: indica que vamos a establecer una posición fija para ese <div> en la página. El resto de los valores situarán el elemento de diferente forma.
- left (izquierdo), right (derecho), bottom (inferior) y top (superior): estos valores, seguidos de un número de píxeles, porcentaje u otros valores, establecen la distancia que habrá entre el div y el borde respectivo.
- width (ancho) y height (alto): indican la altura o anchura que tendrá el cuadro.
No entraremos en mayores complicaciones por el momento; sólo un par de muestras de la potencia de este modelo. Imaginemos que queremos que sólo se desplace el bloque central de texto y que el título y el índice permanezcan fijos. Bastaría con cambiar esos dos <div> de posición absoluta a fija y el resultado sería el de la figura.
Por último, no es necesario establecer siempre valores fijos. En lugar de píxeles podemos emplear porcentajes. Así podríamos crear un cuadro de texto que se sitúa siempre en el centro de la pantalla, independientemente de las dimensiones de la ventana del navegador.
Con esta configuración de div se consigue el efecto deseado.
<div style="text-align: center; position: absolute; top: 30%; left: 30%; right: 30%; bottom: 30%;">
En realidad conseguir un centrado perfecto es algo más complejo, pero con estos valores se consigue un efecto aproximado para una imagen de las dimensiones de la figura.
Si probamos a modificar el tamaño de la ventana, veremos cómo el contenido se desplaza para mantener su posición; esto se debe al uso de porcentajes en lugar de píxeles.
Podemos observar también que un <div> no sólo contiene texto, sino que puede contener a cualquier otro elemento HTML: imágenes, párrafos, iframes, vídeos, cualquier cosa. Incluso pueden contener otros <div>. De hecho anidar unos <div> dentro de otros es una práctica más que habitual para estructurar correctamente una página web.
Pregunta de Elección Múltiple
Actividad 9
Crear una nueva página web que se llame indice.html, que contenga un titulo con posicionamiento flotante en el centro, Una serie de enlaces a todos los ejercicios anteriormente desarrollados posicionados de forma fija en la izquierda de la página y una sección en el centro que contenga una explicacion de los ejercicios reqalizados.
Obra colocada bajo licencia Creative Commons Attribution Share Alike 3.0 License