Maquetación Web

UNIDAD 7 - Maquetación web

Maquetar una página web

La maquetación es la distribución de los elementos en nuestra página. Piensa en una página web cualquiera. Seguro que distingues algunos elementos, como encabezados, columnas, menús laterales, etc.

Hace unos años, la maquetación de las páginas web se realizaba utilizando tablas (<table>). Una vez entendido este proceso podía resultar sencillo, aunque si no se dominaban las tablas, podía convertirse en algo tedioso. El problema de las tablas es que generaban una página muy encorsetada, y el código se volvía complejo de entender. Además, algunos buscadores encontraban problemas al analizar la estructura de la página.

Actualmente, la maquetación con tablas ha caído en desuso, y 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.

En esta unidad veremos las técnicas de maquetación más comunes, aunque hay que decir que existen diversas formas de conseguir una misma maquetación.

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. Nota: Lo aquí explicado funciona para webs con el DTD XHTML Transitional o Strict. Al declarar otro DTD, o no hacerlo, puede que el resultado no sea el esperado. Tamaño

Por lo general, la maquetación se realiza sobre elementos en bloque. Normalmente divisiones, pero también lo podemos hacer con párrafos, listas, o con el propio “body”. Por defecto los elementos de bloque ocupan todo el ancho del elemento que lo contiene, y su alto se ajusta al contenido.

1

http://www.aulaclic.es/paginas-web/secuencias/t07_maquetacion_web01.htm

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. Por ejemplo, un párrafo, por defecto, tienen un ancho del 100% y un alto ajustado al contenido.

Por ejemplo, hemos definido el tamaño para el siguiente párrafo:

Por defecto, al no ocupar todo el ancho, el elemento queda

alineado a la izquierda, como en el ejemplo anterior. Una forma sencilla de centrarlo es dándole al margen (margin) derecho e izquierdo el valor 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.

2

https://sites.google.com/site/glgcreaciondepaginasweb/home/unidad-7/Nueva%20imagen%20(1).png?attredirects=0



<!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á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

3

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>

<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>

</div>

</body>

</html>

4

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.

Por lo que, si el desbordamiento es visible, puede tapar a los elementos que haya después.

5



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.

Las cajas del siguiente ejemplo aparecen solapadas. Al pasar el cursor sobre ellas, se le asigna z-index: 10;, lo que hace que se vean por encima del resto.

Nota: para que “z-index” funcione, se debe de haber especificado un tipo de posicionamiento para el elemento.

6


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. 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

7


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 left). En el siguiente elemento, 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%;

}

8


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.


position: absolute;

left: 0;

top: 0;

height: 100%;

width: 200px;

}


position: absolute;

right: 0;

left: 200px;

top: 0;

height: 100%;

}

Hay que decir que esto no funciona correctamente en Internet

Explorer 6, que no interpreta correctamente el ancho del elemento si definimos la posición de los dos lados, en vez de un lado y el ancho.

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:




<head>



9

<title>Columna sin scroll a la izquierda</title>


html {

overflow: hidden;

}


position: absolute;

top:0; left: 0;

height: 100%;

width:20%;

background-color:#FFE9D7;

}


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>



</ul>

</div>

<div id="columna_derecha">

<h2> Columna fija a la derecha</h2>

<h3 id="ap1"> 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,

10

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,

11

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>

<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>

</div>

</body>

</html>

12

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:

div#encabezado {

position: absolute;

top:0; left: 0;

height:10%;

width:100%;

background-color:RoyalBlue;

}


position: absolute;

top:10%; left: 0;

height: 90%;

width:20%;

13


background-color:SandyBrown;

}


position: absolute;

top:10%; right: 0;

bottom: 0;

width: 80%;

background-color:LightGreen;

}

Para practicar todo esto, te recomendamos hacer el ejercicio paso a paso Maquetar con posicionamiento absoluto, y después el ejercicio paso a paso Simular páginas. Y para que veas que con un poco de imaginación se pueden hacer muchas cosas, te recomendamos el ejercicio paso a paso Texto en 3D.

En el primero de los ejercicios paso a paso anterior hemos visto una forma de

crear una columna centrada en la página. Ya vimos que esto se podía hacer también definiendo un ancho y utilizando la propiedad ”margin: 0 auto;”. No da igual utilizar uno u otro. Si lo hacemos con posicionamiento absoluto, y hacemos la ventana más pequeña que la columna, dejarán de verse el lado derecho y el izquierdo por igual. En cambio, de la otra forma, dejara de verse el lado derecho de la columna. Por lo que es mejor este sistema si tenemos un menú de navegación a la izquierda que queremos que se vea siempre.

Los principales inconvenientes del posicionamiento absoluto es que hemos de definir el tamaño del elemento, no se ajusta al contenido, y no se crean huecos en la página, por eso no podemos utilizarlo para cualquier cosa.

14

https://sites.google.com/site/glgbachillerato/home/creacion-paginas-web/Ejerciciopasoapaso.Unidad7.Maquetarconposicionamientoabsoluto.pdf?attredirects=0

https://sites.google.com/site/glgbachillerato/home/creacion-paginas-web/Ejerciciopasoapaso.Unidad7.Textoen3D.pdf?attredirects=0

https://sites.google.com/site/glgbachillerato/home/creacion-paginas-web/Ejerciciopasoapaso.Unidad7.Simularp%C3%A1ginas.pdf?attredirects=0


Posicionamiento flotante

El posicionamiento es un poco distinto al resto. Para empezar, no se define con la propiedad position, si no con la propiedad float. Puede tomar estos valores:

- left: flotante a la izquierda (float: left;).- right: flotante a la derecha (float: right;).- none: sin flotante.

Lo que hace este posicionamiento es desplazar el elemento todo lo que pueda

hacia la dirección indicada, hasta encontrar el límite del elemento contenedor, u otro elemento también flotante. Además hace que todos los elementos fluyan alrededor de él.

Es muy común utilizarlo en imágenes, para que el texto fluya alrededor de ellas. En el siguiente ejemplo, todas las cajas contienen un párrafo con una imagen al principio (<p><img /> Texto</p>). Sólo cambia el float de la imagen.

Observa que el texto puede quedar demasiado pegado a la imagen. Para solucionarlo, no hay más que aplicar un pequeño margin a la imagen, hacia el lado que está el texto.

Existen algunos inconvenientes al utilizar el posicionamiento flotante. Un elemento que contiene a otro flotante, no lo tiene en cuenta para su tamaño a lo alto. Por ejemplo, el siguiente párrafo tiene un borde, y vemos que si la imagen es flotante, "se sale".

15

http://www.aulaclic.es/paginas-web/secuencias/t07_maquetacion_web02.htm





Además, si por ejemplo hay varios párrafos con elementos flotantes al mismo

lado, hace que se "amontonen":

Para solucionar esto, disponemos de la propiedad clear, que rompe el

flotamiento. Puede tomar tres valores:

- left: impide el flotamiento a la izquierda.- right: impide el flotamiento a la derecha.- both: impide el flotamiento por ambos lados.

En el siguiente ejemplo, utilizamos el mismo que en el ejemplo anterior, pero al

segundo párrafo le hemos dado la propiedad de estilo clear: right;.

Con el posicionamiento flotante, podemos por ejemplo colocar elementos uno al

lado del otro. En el siguiente ejemplo, hemos utilizado cajas, todas con float:left; y un pequeño margen para que no se peguen. Observa cómo se comportan cuando cambias el tamaño de la ventana:

De forma muy parecida, podemos utilizar el posicionamiento flotante para

crear columnas en un documento. Basta con que la suma del ancho de las capas que harán de columnas quepa en el ancho de elemento contenedor, y que tengan posicionamiento flotante. En Internet Explorer, si la suma de los anchos es del 100%, para algunos tamaños de ventana no cabe, por lo que mostrará una columna debajo de la otra, aunque esto sólo ocurre a veces. Por eso, cuando utilizamos porcentajes es mejor utilizar un ancho total un poco menor, por ejemplo del 99% o 99.5%.

De acuerdo con lo que hemos dicho, podemos dividir un elemento en dos columnas de la siguiente manera:

16





float: left;

width: 30%;

height: 100%;


}


float: left;

width: 69.5%;

height: 100%;


}

Para añadir una cabecera al principio, no hay más que poner una capa antes de

las columnas, con todo el ancho. Y para poner un pie, haríamos lo mismo, pero colocándolo después de las columnas, y rompiendo el flotamiento con clear:both;.

div#cabecera {

width: 99.5%;

height: 10%;

background-color:RoyalBlue;

}


float: left;

width: 30%;

height: 80%;


}


17


float: left;

width: 69.5%;

height: 80%;


}

div#pie {

clear: both;

width: 99.5%;

height: 10%;

background-color:Violet;

}

La principal diferencia con el posicionamiento absoluto es que al flotante sí le

afectan los márgenes, propios y del elemento contenedor, y que no estamos obligados a definir el alto. En el ejemplo anterior, hemos establecido el alto porque no hay contenido, pero si no lo especificamos, el alto se ajustaría al contenido del elemento.

Para practicar lo que hemos visto, te recomendamos que hagas los ejercicios Maquetar con posicionamiento flotante y Organizar elementos.

Posicionamiento fijo

El posicionamiento fijo (position: fixed;) se define igual que el posicionamiento absoluto, con las propiedades top, bottom, left y right. Pero su comportamiento es distinto: el posicionamiento fijo se refiere siempre a la ventana del navegador,

18

https://sites.google.com/site/glgbachillerato/home/creacion-paginas-web/Ejerciciopasoapaso.Unidad7.Organizarelementosflotantes.pdf?attredirects=0

https://sites.google.com/site/glgbachillerato/home/creacion-paginas-web/Ejerciciopasoapaso.Unidad7.Maquetarconposicionamientoflotante.pdf?attredirects=0


independientemente de que el elemento posicionado esté dentro de otro elemento con posicionamiento, como pasaba con el absoluto. Además, el elemento siempre se muestra en la misma posición, aunque la página sea larga y nos desplacemos hacia abajo o hacia un lado.

En el siguiente ejemplo, tenemos dos cajas con posicionamiento fijo. La de la izquierda está al principio de la página. La de la derecha, está al final, dentro de elementos con posicionamiento. Observa que esto no le afecta.




<head>



<title>Posicionamiento fijo</title>


div#fijo_izquierda {

position: fixed;

left: 10%;

top: 50px;

width: 100px;

height: 100px;

border: #663366 5px double;

}

div#fijo_derecha {

position: fixed;

right: 10%;

top: 50px;

width: 100px;

height: 100px;

border: #663366 5px double;

}

div#columna {

width: 50%;

margin: auto;

19

}

.verde, .azul {

height: 500px;

border: #006666 5px dashed;

border-width: 0 5px 5px 5px;

position: relative;

}

.verde {

background-color: #66CC99;

}

.azul {

background-color:#6699FF;

}

</style>

</head>

<body>

<div id="fijo_izquierda">Posicionamiento fijo<br />Izquierda</div>

<div id="columna">

<div class="azul"></div>

<div class="verde"></div>










<div class="verde">

<div id="fijo_derecha">Posicionamiento fijo<br />Derecha</div></div>

</div>

</body>

20

</html>

Una de las propiedades de este posicionamiento es que si

imprimimos la página web y ocupa varias páginas en papel, los elementos fijos se imprimen en todas las páginas, por lo que puede resultar útil para pies y encabezados. Nota: Intenet Explorer 6 no soportaba este posicionamiento. Ancho de la página, líquido o elástico

Al crear el diseño de una web, básicamente existen dos tendencias: que la página ocupe todo el ancho de la ventana del navegador (diseño líquido), o que ocupe sólo una columna con un ancho fijo (diseño fijo).

No es que uno sea claramente mejor que otro, tienen sus pros y sus contras:

Diseño fijo

En el diseño fijo, la página tiene un tamaño exacto, normalmente expresado en píxeles. Esto facilita el diseño, sobre todo si está compuesto por imágenes divididas en trozos que deben casar perfectamente, ya que podemos posicionar todo de forma exacta. También nos permite controlar el ancho de los elementos de texto, no creando columnas ni demasiado largas ni demasiado pequeñas.

Por contra, no aprovecha bien el espacio. Pensemos en una página de ancho fijo, de 900px. Si un usuario la ve desde la pantalla de su teléfono móvil, que tiene un ancho de 320px, la mayor parte de la página no quedará visible. En cambio, si se ve desde un monitor panorámico de 24'', con 1920px de ancho, la mayor parte del espacio estará desaprovechado.

Como ejemplo de diseño fijo, tenemos la página de inicio de aulaClic.

21

http://www.aulaclic.es/


Diseño líquido

En el diseño líquido, en vez de unidades absolutas se utilizan relativas al tamaño

de la ventana. Esto hace que la página sea más flexible a los distintos dispositivos de visualización.

Por contra, es más difícil controlar el diseño, sobre todo si se basa en muchas imágenes, porque hay que pensar en qué ocurre si la ventana es muy pequeña o muy grande, y que no se descoloque todo al cambiar de tamaño. También puede producir líneas de texto muy largas, lo que incomoda la lectura. Aunque el usuario siempre tiene la opción de hacer más pequeña su ventana.

Para intentar controlar un poco el tamaño de los elementos, existen las propiedades de estilo max-width (ancho máximo), min-width (ancho mínimo), max-height (alto máximo) y min-height (alto mínimo).

Un ejemplo de diseño líquido puede ser la página de este curso.

Diseño elástico

Últimamente, se ha acuñado el término "diseño elástico" para el diseño en el que el tamaño de los objetos, no es ni fijo ni en relación al tamaño de la ventana, si no al tamaño del texto (basado en em), dando al usuario la posibilidad de cambiar su tamaño, y en proporción, el de todos los elementos. Aunque permite que el texto se controle, sigue sin adaptarse a las distintas ventanas, y resulta difícil controlar las imágenes.

Actualmente, la mayoría de las páginas ofrecen un diseño fijo, sobre todo si tienen un diseño más elaborado. Las que ofrecen un diseño más elástico, suelen mostrar una columna central elástica, que se adapta a la pantalla, y columnas con un ancho fijo, para menús o para la publicidad.

22

Maquetación Web

Documents

Transcript of Maquetación Web