diseño web, taller 6 maquetado

INSTITUCION EDUCATIVA TECNICO SUPERIOR INDUSTRIALBarrancabermeja

AREA: Tecnología e Informática – Grado 11TEMA: Diseño Web VI - Maquetación web

6.1 IntroducciónLa 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 utilizandocapas (<div>), también llamadas divisiones ocontenedores. La colocación de las capas en lapágina se realiza a través de CSS. Esto permite, porejemplo, que podamos pasar de un diseño con unmenú lateral a otro con el menú en la partesuperior, 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ñoLa maquetación se realiza sobre elementos en bloque. Por defecto los elementos de bloque ocupan todo el ancho delelemento 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 elsiguiente ejemplo, hemos contenido todo el texto en una capa, a la que le hemos asignado el id="contenido", y en la hoja deestilo 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;}

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

http://www.w3.org/1999/xhtml

</style></head><body><div id="contenido"><h1>Pá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 leocongue 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. Praesentvulputate 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 risushendrerit ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nasceturridiculus 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, sagittistristique, sem. Quisque nec leo. Etiam fringilla pellentesque turpis. Vestibulum at est. Sedsapien nunc, faucibus ac, suscipit sit amet, lacinia porttitor, mauris. Curabitur congue justosed nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpisegestas. 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 DesbordamientoAl utilizar un elemento de bloque, como una capa, un párrafo, el body, etc... el tamaño depende del contenido. Pero al definir untamaño fijo nos puede surgir un problema: ¿qué pasa si el contenido del elemento (texto, imágenes, etc...) no cabe? Entonces seproduce 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 PosicionamientoEl posicionamiento es el lugar donde el navegador coloca un elemento HTML para visualizarlo. Por defecto, los elementos seposicionan uno a continuación de otro. Si se trata de elementos de bloque, como capas, párrafos, listas, etc, se irán colocandouno 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 tiposde 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 queun 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 relativoEl 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, paradesplazar 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 elposicionamiento relativo a elementos para poder utilizar una propiedad que requiere posicionamiento, como puede ser z-

index.

6.6 Posicionamiento absolutoAl 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 unhueco 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 lapá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 lapá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 lacolumna de la izquierda la queremos con un ancho fijo, por ejemplo de 200px, lo que haremos será asignar a la columna de laderecha 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 Explorersiempre 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 columnasCopie 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 leocongue 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. Praesentvulputate dui id lacus. Nunc vel odio. Nulla eleifend rutrum nulla. </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. Sedsapien nunc, faucibus ac, suscipit sit amet, lacinia porttitor, mauris. Curabitur congue justosed nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpisegestas. Integer tristique diam vitae ligula. Nulla tincidunt, metus sit amet congue porttitor,

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

http://www.w3.org/1999/xhtml

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 auguequis nisl. Praesent ut mi interdum lorem consequat vulputate. Vivamus ac urna non elitpellentesque 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 quisjusto. Donec sit amet ligula. In vehicula, elit ut pellentesque viverra, arcu nisl tinciduntipsum, in viverra dui orci vel massa. Nunc tincidunt congue risus. Donec nec sem id elit egestasporttitor. Fusce ultrices nulla. </p>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis nulla et risus. Ineleifend sapien a neque. Etiam fermentum. Sed dapibus suscipit diam. Praesent non nisi ac leocongue 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. Praesentvulputate dui id lacus. Nunc vel odio. Nulla eleifend rutrum nulla. </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. Sedsapien nunc, faucibus ac, suscipit sit amet, lacinia porttitor, mauris. Curabitur congue justosed nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpisegestas. 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, elalto 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 lascolumnas, 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 nospide 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 altode 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 iddistintivo.

1. El título estará en una caja formando la cabecera. Por lo tanto, encierra la etiqueta <h1></h1> en una caja, y asígnaleel 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 deelementos, 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 <styletype="text/css"></style>. Te recomendamos que vayas visualizando en el navegador cada cambio que hagamos (desdeKompoZer, 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 elalto 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 quetiene 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). Elancho es fijo, de 900px (width:900px). Lo más complicado es centrarlo, ya que la ventana no tiene un ancho fijo. Vamos autilizar un truco que consiste en desplazar el lado izquierdo hasta el centro de la caja (900px/2=450px) utilizando un margennegativo (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 aldiv pagina. Como queremos que quede al principio, en la esquina superior izquierda, la distancia sera de 0 con la parte dearriba (top:0;) y de 0 con la parte izquierda (left:0;). El alto no será del 100%, porque tenemos que dejar abajo un huecopara 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á loque 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 hacefalta (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 deltodo (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 comoimá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

http://itsitics.blogspot.com

diseño web, taller 6 maquetado

Education