Está en la página 1de 7

INSTITUCION EDUCATIVA TECNICO SUPERIOR INDUSTRIAL

Barrancabermeja

AREA: Tecnología e Informática – Grado 11


TEMA: Diseño Web VI - Maquetación web

6.1 Introducción
La maquetación es la distribución de los elementos en nuestra página, como columnas, menús laterales, etc.

Actualmente, la maquetación se realiza utilizando


capas (<div>), también llamadas divisiones o
contenedores. La colocación de las capas en la
página se realiza a través de CSS. Esto permite, por
ejemplo, que podamos pasar de un diseño con un
menú lateral a otro con el menú en la parte
superior, sólo cambiando la hoja de estilos.
Las capas pueden estar anidadas unas dentro de
otra. Básicamente, lo que haremos será definir cómo se posiciona en la página, su colocación y su tamaño.

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.

Si le damos un nuevo tamaño quedará a la izquierda:

Podemos centrarlo con respecto a su contenedor, con la propiedad margin: auto;

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 .

Ejemplo 1: Maquetado con una columna centrada


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
<title>Una columna</title>
<style type="text/css">
body {
background-color:#C2C5E7;
margin: 0;
}
div#contenido {
width: 800px;
margin: auto;
border-left: #6699FF 2px solid;
border-right: #6699FF 2px solid;
background-color: #EDEEF8;
padding: 5px;
}
</style>
</head>
<body>
<div id="contenido">
<h1>P&aacute;gina con una columna</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis nulla et risus. In
eleifend sapien a neque. Etiam fermentum. Sed dapibus suscipit diam. Praesent non nisi ac leo
congue vestibulum. Mauris ac orci eu nisl dictum ultrices. Morbi blandit dolor vitae sapien.
Vivamus in neque. Integer sit amet mi. Curabitur ipsum lectus, ultricies sit amet, bibendum a,
sodales vitae, massa. Quisque metus. Sed blandit hendrerit urna. Aenean eu nulla. Praesent
vulputate dui id lacus. Nunc vel odio. Nulla eleifend rutrum nulla. </p>
<p>Praesent ut ipsum. Nullam vitae nunc. Nam sit amet libero id mauris consectetur pulvinar.
Suspendisse vulputate lorem quis lectus. Quisque commodo purus et nibh. Nunc quis mi quis risus
hendrerit ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Aliquam ac dui. Mauris vulputate fermentum tellus. Morbi rhoncus lorem id nibh.
</p>
<p>Etiam cursus nulla ac purus. Pellentesque massa elit, dignissim et, volutpat eu, sagittis
tristique, sem. Quisque nec leo. Etiam fringilla pellentesque turpis. Vestibulum at est. Sed
sapien nunc, faucibus ac, suscipit sit amet, lacinia porttitor, mauris. Curabitur congue justo
sed nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Integer tristique diam vitae ligula. Nulla tincidunt, metus sit amet congue porttitor,
purus pede commodo odio, vel varius mauris nulla id augue. Mauris pellentesque volutpat lacus.
Maecenas erat. </p>
</div>
</body>
</html>

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.

6.5 Posicionamiento relativo


El posicionamiento relativo coloca el elemento en su posición normal, y a partir de ahí lo desplaza la distancia que le indiquemos.
Al desplazarlo deja un "hueco" donde estaría su posición normal.
Para aplicarlo, lo primero es declararlo en el estilo, utilizando position: relative;

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.

6.6 Posicionamiento absoluto


Al utilizar el posicionamiento absoluto indicamos de forma precisa la posición del elemento en la página.

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.

Para aplicarlo, lo primero es declararlo en el estilo, utilizando position: absolute;.

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:

Ejemplo 2: Maquetado a dos columnas


Copie el código en un nuevo archivo en Kompozer. Asegúrese de estar en la vista código fuente.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
<title>Columna sin scroll a la izquierda</title>
<style type="text/css">
html {
overflow: hidden;
}
div#columna_izquierda {
position: absolute;
top:0; left: 0;
height: 100%;
width:20%;
background-color:#FFE9D7;
}
div#columna_derecha {
position: absolute;
top:0; right: 0;
height: 100%;
width: 80%;
overflow: auto;
background-color:#DDF2F9;
}
</style>
</head>
<body>
<div id="columna_izquierda">
<ul>
<li><a href="#ap1">Apartado 1</a></li>
<li><a href="#ap2">Apartado 2</a></li>
<li><a href="#ap3">Apartado 3</a></li>
</ul>
</div>
<div id="columna_derecha">
<h2> Columna fija a la derecha</h2>
<h3 id="ap2"> Apartado 1</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis nulla et risus. In
eleifend sapien a neque. Etiam fermentum. Sed dapibus suscipit diam. Praesent non nisi ac leo
congue vestibulum. Mauris ac orci eu nisl dictum ultrices. Morbi blandit dolor vitae sapien.
Vivamus in neque. Integer sit amet mi. Curabitur ipsum lectus, ultricies sit amet, bibendum a,
sodales vitae, massa. Quisque metus. Sed blandit hendrerit urna. Aenean eu nulla. Praesent
vulputate dui id lacus. Nunc vel odio. Nulla eleifend rutrum nulla. </p>
<p>Praesent ut ipsum. Nullam vitae nunc. Nam sit amet libero id mauris consectetur pulvinar.
Suspendisse vulputate lorem quis lectus. Quisque commodo purus et nibh. Nunc quis mi quis risus
hendrerit ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Aliquam ac dui. Mauris vulputate fermentum tellus. Morbi rhoncus lorem id nibh.
</p>
<h3 id="ap2">Apartado 2</h3>
<p>Etiam cursus nulla ac purus. Pellentesque massa elit, dignissim et, volutpat eu, sagittis
tristique, sem. Quisque nec leo. Etiam fringilla pellentesque turpis. Vestibulum at est. Sed
sapien nunc, faucibus ac, suscipit sit amet, lacinia porttitor, mauris. Curabitur congue justo
sed nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Integer tristique diam vitae ligula. Nulla tincidunt, metus sit amet congue porttitor,
purus pede commodo odio, vel varius mauris nulla id augue. Mauris pellentesque volutpat lacus.
Maecenas erat. </p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Vestibulum volutpat, lacus non mattis vulputate, lorem nunc varius odio, in venenatis ante augue
quis nisl. Praesent ut mi interdum lorem consequat vulputate. Vivamus ac urna non elit
pellentesque sollicitudin. Nunc pharetra nibh in quam. Proin eu magna ut ligula volutpat mollis.
Quisque mollis, nulla a porttitor commodo, orci diam commodo pede, ac congue neque libero quis
justo. Donec sit amet ligula. In vehicula, elit ut pellentesque viverra, arcu nisl tincidunt
ipsum, in viverra dui orci vel massa. Nunc tincidunt congue risus. Donec nec sem id elit egestas
porttitor. Fusce ultrices nulla. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis nulla et risus. In
eleifend sapien a neque. Etiam fermentum. Sed dapibus suscipit diam. Praesent non nisi ac leo
congue vestibulum. Mauris ac orci eu nisl dictum ultrices. Morbi blandit dolor vitae sapien.
Vivamus in neque. Integer sit amet mi. Curabitur ipsum lectus, ultricies sit amet, bibendum a,
sodales vitae, massa. Quisque metus. Sed blandit hendrerit urna. Aenean eu nulla. Praesent
vulputate dui id lacus. Nunc vel odio. Nulla eleifend rutrum nulla. </p>
<p>Praesent ut ipsum. Nullam vitae nunc. Nam sit amet libero id mauris consectetur pulvinar.
Suspendisse vulputate lorem quis lectus. Quisque commodo purus et nibh. Nunc quis mi quis risus
hendrerit ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Aliquam ac dui. Mauris vulputate fermentum tellus. Morbi rhoncus lorem id nibh.
</p>
<h3 id="ap3">Apartado 3</h3>
<p>Etiam cursus nulla ac purus. Pellentesque massa elit, dignissim et, volutpat eu, sagittis
tristique, sem. Quisque nec leo. Etiam fringilla pellentesque turpis. Vestibulum at est. Sed
sapien nunc, faucibus ac, suscipit sit amet, lacinia porttitor, mauris. Curabitur congue justo
sed nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Integer tristique diam vitae ligula. Nulla tincidunt, metus sit amet congue porttitor,
purus pede commodo odio, vel varius mauris nulla id augue. Mauris pellentesque volutpat lacus.
Maecenas erat. </p>
</div>
</body>
</html>

Guárdelo en el escritorio como maquetado2.html. Visualícelo en el navegador pulsando F5.

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 practicar todo esto, realiza el siguiente ejercicio paso a paso.


Ejercicio 3: Maquetado con posicionamiento absoluto.
Objetivo:
Copia en el escritorio el archivo ej_maquetacion_absoluto.htm, que puedes encontrar en la carpeta \\profesor1\web, se nos
pide que maquetemos la página para que tenga el siguiente aspecto:
 Habrá un encabezado, con el título (h1), que ocupará todo el ancho de la página, comenzando arriba del todo, y con un alto
de 50px.
 El resto de la página, estará limitado a un ancho fijo de 900px.
 En esos 900px, reservaremos una columna a la izquierda en la que irá la lista con los enlaces.
 El resto se mostrará en una columna a la derecha.
 Al final de la página habrá un pie, con un alto de 40px y ancho que ocupe los 900px.
 Habrá una única barra de desplazamiento, que nos permita recorrer el texto. El encabezado, menú y pie siempre aparecerá
visible.

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.

La estructura general de la página te habrá quedado:


<body>
<div id="cabecera">
<h1>...</h1>
</div> → cierre de "cabecera"
<div id="pagina">
<div id="menu">
<ul>...</ul>
</div> → cierre de "menu"
<div id="texto">
<h2>...</h2>
<h3>...</h3>
...
<p>...</p>
</div> → cierre de "texto"
<div id="pie">
<p>...</p>
</div> → cierre de "pie"
</div> → cierre de "pagina"
</body>

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

También podría gustarte