Maquetar Una Pagina Web

1.
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 un 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.
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.
OJO: 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.
2. 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.
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:
<p style="width:200px; height:100px; border: red 2px

solid">
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.
<p style="width:200px; height:100px; border: red 2px solid;

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.
<!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
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>
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.
visible. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.
hidden. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.
auto. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.
auto. Éste sí cabe.
scroll. Éste sí cabe.
Si el desbordamiento es visible, puede tapar a los elementos que haya

después.
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.
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.

Maquetar Una Pagina Web

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Maquetar Una Pagina Web

Cargado por

Copyright:

Formatos disponibles

1.

Maquetar una página web

La maquetación es la distribución de los elementos en nuestra página. Piensa

Hace unos años, la maquetación de las páginas web se realizaba utilizando

Actualmente, la maquetación con tablas ha caído en desuso, y se realiza

Por lo general, la maquetación se realiza sobre elementos en bloque.

 Tamaños absolutos, utilizando px, cm, etc...

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

<p style="width:200px; height:100px; border: red 2px

Por defecto, al no ocupar todo el ancho, el elemento queda alineado a la

<p style="width:200px; height:100px; border: red 2px solid;

En el siguiente ejemplo, hemos contenido todo el texto en una capa, a la que le

border-left: #6699FF 2px solid;

border-right: #6699FF 2px solid;

<h1>P&aacute;gina con una columna</h1>

<p>Praesent ut ipsum. Nullam vitae nunc. Nam sit amet

<p>Etiam cursus nulla ac purus. Pellentesque massa elit,

<p>Vestibulum ante ipsum primis in faucibus orci luctus

Al utilizar un elemento de bloque, como una capa, un párrafo, el body, etc... el

 visible. Es la opción por omisión. El contenido sale de elemento, y puede

Si el desbordamiento es visible, puede tapar a los elementos que haya

El posicionamiento es el lugar donde el navegador coloca un elemento HTML

Por defecto, los elementos se posicionan uno a continuación de otro. Si se trata

Utilizando CSS, con la propiedad position podemos cambiar el tipo de

Al cambiar el desplazamiento de un elemento, es fácil que se solape sobre otro.

Nota: para que z-index funcione, se debe de haber especificado un tipo de

También podría gustarte

<h1>Página con una columna</h1>