Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Barrancabermeja
6.1 Introducción
La maquetación es la distribución de los elementos en nuestra página, como columnas, menús laterales, etc.
6.2 Tamaño
La maquetación se realiza sobre elementos en bloque. Por defecto los elementos de bloque ocupan todo el ancho del
elemento que lo contiene, y su alto se ajusta al contenido.
Cualquier elemento HTML de bloque, tiene dos atributos que pueden definir su tamaño: ancho (width) y alto
(height).
Los valores para estas medidas, pueden ser expresados en las medidas habituales:
Tamaños absolutos, utilizando px, cm, etc...
Tamaños relativos al elemento que lo contiene, utilizando porcentajes (%).
Tamaños relativos a la fuente, utilizando em.
El valor auto es el valor por defecto.
Con sólo esto, podríamos maquetar una página web que contenga una columna central, con un ancho fijo o relativo. En el
siguiente ejemplo, hemos contenido todo el texto en una capa, a la que le hemos asignado el id="contenido", y en la hoja de
estilo le hemos asignado un ancho fijo y la hemos centrado. Copia el código en un nuevo archivo usando Kompozer. Asegúrate de
pegarlo en la vista .
Al terminar, guárdelo en el escritorio como maquetado1.html y presiona F5 para visualizarlo en el navegador web.
6.3 Desbordamiento
Al utilizar un elemento de bloque, como una capa, un párrafo, el body, etc... el tamaño depende del contenido. Pero al definir un
tamaño fijo nos puede surgir un problema: ¿qué pasa si el contenido del elemento (texto, imágenes, etc...) no cabe? Entonces se
produce un desbordamiento, que podemos controlar desde el estilo con la propiedad overflow. Podemos darle estos valores:
visible. Es la opción por omisión. El contenido sale de elemento, y puede que se solape con los elementos que haya a
continuación.
hidden. Lo que no quepa en el elemento, queda oculto.
auto. Muestra las barras de desplazamiento en el elemento cuando sea necesario.
scroll. Siempre muestra las barras de desplazamiento.
6.4 Posicionamiento
El posicionamiento es el lugar donde el navegador coloca un elemento HTML para visualizarlo. Por defecto, los elementos se
posicionan uno a continuación de otro. Si se trata de elementos de bloque, como capas, párrafos, listas, etc, se irán colocando
uno debajo del otro. A este posicionamiento se le denomina estático.
Utilizando CSS, con la propiedad position podemos cambiar el tipo de posicionamiento de los elementos. Existen cuatro tipos
de posicionamiento:
static. Es el normal.
relative. El posicionamiento relativo coloca el elemento en su posición normal. A partir de ahí, podemos desplazar el
elemento, permaneciendo el hueco de su posición original.
absolute. Con el posicionamiento absoluto, especificamos la posición del elemento con respecto al elemento que lo
contiene.
fixed. Se establece la posición del elemento de forma parecida al absoluto, pero el elemento queda fijo en la pantalla,
aunque utilicemos barras de desplazamiento.
Al cambiar el desplazamiento de un elemento, es fácil que se solape sobre otro. Esto produce que
un elemento quede oculto. Para controlar esto, disponemos de la propiedad CSS z-index, a la
que podemos asignar un valor numérico. Un elemento con un z-index mayor se verá por
encima de otro con un z-index menor.
Para indicar el desplazamiento horizontal, utilizamos left para desplazarlo a la izquierda y right
para hacerlo a la derecha. Utilizar valores negativos, produce el efecto opuesto. Por ejemplo, para
desplazar un elemento 40px a la derecha, podríamos poner right: 40px; o left: -40px;
Del mismo modo, podemos desplazarlo verticalmente utilizando top para desplazarlo hacia arriba o
bottom para hacerlo hacia abajo.
Si no establecemos valores de desplazamiento el elemento no cambia su posición, por eso es muy común asignar el
posicionamiento relativo a elementos para poder utilizar una propiedad que requiere posicionamiento, como puede ser z-
index.
Al contrario que con el posicionamiento relativo, el elemento al que le hemos asignado un posicionamiento absoluto no deja un
hueco en la página. Podemos decir que el resto de elementos lo ignoran, y se colocan como si no existiese.
La posición y tamaño del elemento se indica siempre en relación a otro elemento que lo contiene. El elemento contenedor será
el más cercano que haya con posicionamiento no estático. Si no hay ninguno, se utilizará el body.
Para definir la posición utilizamos top para referirnos a la distancia entre el borde superior del elemento posicionado y el borde
superior del elemento contenedor. Por lo tanto left será la distancia entre los lados izquierdos, right entre los lados
derechos y bottom entre los lados inferiores.
Para posicionar un elemento del que conocemos sus dimensiones, basta con indicar un punto en vertical (top o bottom) y un
punto en horizontal (right o lef). En la siguiente gráfica, todas las cajas tienen position:absolute; witdth:60px;
height:60px y un borde. Para cada una hemos cambiado la posición. Además, a la caja que contiene a todas, le hemos dado
position:relative; para que las cajas de dentro tomen su posición a partir de ella.
Utilizando este posicionamiento, obtenemos gran flexibilidad para maquetar nuestra página. Por ejemplo, podemos dividir la
página en dos (o más) columnas. Utilizaremos dos capas, con un alto al 100%, y que la suma de sus anchos sea el total de la
página. Por ejemplo:
div#columna_izquierda {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 50%;
}
div#columna_derecha {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 50%;
}
Esto originaría dos columnas, cada una con un ancho de la mitad del de la página (o del elemento que las contenga).
Si queremos obtener dos columnas, una con un ancho fijo y la otra con lo que sobre, lo haremos de otra forma. Por ejemplo, si la
columna de la izquierda la queremos con un ancho fijo, por ejemplo de 200px, lo que haremos será asignar a la columna de la
derecha una distancia con el lado izquierdo de esos 200px, y con el lado derecho de 0, en vez de indicar el ancho.
div#columna_izquierda {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 200px;
}
div#columna_derecha {
position: absolute;
right: 0;
left: 200px;
top: 0;
height: 100%;
}
Podemos conseguir un efecto muy interesante controlando el desbordamiento de las columnas. Podemos dejar una columna fija,
por ejemplo con un menú, y otra que muestre el contenido, a la que damos la propiedad overflow:auto;. Esto hará que nos
podamos desplazar por el contenido de la página manteniendo el menú siempre visible. Como por defecto, Internet Explorer
siempre muestra la barra de desplazamiento en la etiqueta html, queda mejor si lo quitamos html{overflow:hidden;}
Todo esto lo veremos mejor con un ejemplo:
Recuerda que podemos anidar las capas. Por ejemplo, podríamos subdividir una de las capas en otras dos dentro de ella,
utilizando el mismo sistema.
Otro elemento muy utilizado en la maquetación, es el encabezado y el pie. Observa que en los ejemplos que hemos visto,
colocábamos las capas en la parte superior del todo (top: 0;). Si queremos utilizar un encabezado, en vez de comenzar arriba
del todo, debemos de dejar una separación igual al alto del encabezado. Si el alto del encabezado lo indicamos en porcentajes, el
alto de las columnas deberá de ser del 100% - el alto del encabezado. En vez de eso, resulta más claro si en vez del alto de las
columnas, indicamos la parte superior (top) y la inferior (bottom). En este caso, nos dará igual la medida que utilicemos. Como
mejor lo veremos será con un ejemplo:
Para que se vea mejor la estructura de las capas, le daremos a cada una un color de fondo distinto.
Para este ejercicio, se recomienda que edites directamente el código fuente de la página, ya que el texto ya está escrito.
Primero, vamos a identificar los distintos elementos, y crear las cajas que los contengan. A todas las cajas le daremos un id
distintivo.
1. El título estará en una caja formando la cabecera. Por lo tanto, encierra la etiqueta <h1></h1> en una caja, y asígnale
el id cabecera <div id="cabecera">
2. Como todo lo demás va a ir en una columna con ancho fijo, lo más cómodo es crear una caja que contenga al resto de
elementos, a la que le daremos el ancho que queramos.
3. Crea otra caja, que comience donde acababa la anterior, y vaya hasta el final del body. Asígnale el id pagina.
Vamos a subdividir el div pagina en las distintas columnas:
4. Como la lista formará otra columna, crea otra caja que la contenga. Asígnale el id menú.
5. El texto va a aparecer en otra columna central. Así que crea otra caja que contenga a todo el texto, desde el <h2> hasta
el cierre del penúltimo párrafo (el último es para el pie). Asígnale el id texto.
6. Encierra el último párrafo en otra caja, y asígnale el id pie.
Ahora, vamos a ir dándole estilos a los distintos elementos, en el head de la página, en la etiqueta <style
type="text/css"></style>. Te recomendamos que vayas visualizando en el navegador cada cambio que hagamos (desde
KompoZer, basta con pulsar F5).
1. Para poner el div cabecera al principio no es necesario posicionarlo, porque ya es el primer elemento. Lo único será darle el
alto fijo, y el color de fondo que daremos a todos los divs. Añade el estilo div#cabecera {height: 50px;
background-color: #918CE3;}.
2. Prueba la página en el navegador. Observa que no queda arriba del todo. Esto se debe al margen que tiene el body y el que
tiene el h1. Quítalo añadiendo al selector body la propiedad margin:0;, y añadiendo el estilo h1 {margin: 0;}.
Si lo hubiésemos posicionado de forma absoluta, nos habrían dado igual los márgenes.
3. Para crear la columna central, div pagina, utilizaremos posicionamiento absoluto (position:absolute;). Arriba,
dejaremos como separación el alto del encabezado (top:50px;) y debe de llegar hasta abajo del todo (bottom: 0). El
ancho es fijo, de 900px (width:900px). Lo más complicado es centrarlo, ya que la ventana no tiene un ancho fijo. Vamos a
utilizar un truco que consiste en desplazar el lado izquierdo hasta el centro de la caja (900px/2=450px) utilizando un margen
negativo (margin-left:-450px). Ahora, ya podemos dejar una distancia de la mitad de la ventana a ese lado
(left:50%).
Por lo tanto, añade el estilo div#pagina {position:absolute; top:50px; bottom:0; width:900px;
margin-left:-450px; left:50%; background-color:#FFFFCC;}
4. Vamos a posicionar el div menu. Le vamos a dar un posicionamiento absoluto (position:absolute;), con respecto al
div pagina. Como queremos que quede al principio, en la esquina superior izquierda, la distancia sera de 0 con la parte de
arriba (top:0;) y de 0 con la parte izquierda (left:0;). El alto no será del 100%, porque tenemos que dejar abajo un hueco
para el pie, con su alto (bottom:40px;), y el ancho lo vamos a dejar en 140px (width:140px;).
Por lo tanto, añade el estilo div#menu {position:absolute; top:0; left:0; bottom:40px;
width:140px; background-color:#D2D1EF;}.
5. El div texto será casi como el anterior. Sólo que en vez de a la izquierda, a la derecha del todo (right:0;), y el ancho será lo
que quede del menú. Como estamos utilizando tamaños fijos, no tenemos más que restar al ancho total el del div menú
(900px-140px=760px) (width:760px;). Como puede desbordar, haremos que muestre la barra de desplazamiento si hace
falta (overflow:auto;). Añade el estilo div#texto {position:absolute; top:0; right:0;
width:760px; bottom:40px; overflow:auto; }.
6. El div pie, con respecto a su contenedor que es el div página, también absoluto (position:absolute;), está abajo del
todo (bottom:0;), a la izquierda del todo, (left:0;), ocupa todo el ancho (width:100%;), y tiene un alto fijo de 40px
(height:40px;).
El estilo a añadir es div#pie { position:absolute; bottom:0; left:0; width:100%; height:40px;
background-color:#A9A8CF; }.
7. Por último y por estética, vamos a ocultar la barra de desplazamiento del html que muestra siempre Internet Explorer.
Para acabar, añade html {overflow:hidden;}.
8. Guárdalo y muéstrale al profesor.
Compromiso:
Para la siguiente clase, traer en formato digital la maquetación de su sitio web. Deben observarse los siguientes elementos:
Maquetado con las secciones (encabezado, menú, contenido, pie)
Las opciones del menú que permitirán el acceso a los contenidos
Página de inicio (index.html)
Recuerden que todo el contenido del sitio web debe estar almacenado en una carpeta general y los elementos tales como
imágenes, sonidos, videos, etc., deben estar organizados en subcarpetas dentro de la carpeta general.
Igualmente, se les recuerda que todos los talleres (incluyendo este), los pueden encontrar en el blog http://itsitics.blogspot.com