07-Maquetar Sitios 2011

Capitulo 7: Maquetar sitios con css
C.F.P Nro. 401 de San Martn
MAQUETAR SITIOS CON CSS

No me digas lo mucho que trabajas. Hblame de lo mucho que haces.
(James Ling)
Durante aos los diseadores Web recurrieron al uso de tablas para establecer diferentes
elementos dentro de la pgina. Esta fue una solucin que permiti maquetar pginas que en
apariencia estaban formadas por varias columnas y filas, donde cada celda poda estar
compuesta de otros montajes complejos.
Desgraciadamente estas estructuras son demasiadas complicadas como para realizar ms
adelante un mantenimiento, para colmo los robots de los buscadores no lo analizan
correctamente.
Con el nuevo concepto de accesibilidad web este tipo de maquetacin esta cada vez mas en
desuso y se recomienda el uso de capas o etiqueta divs (divisin) para componer o maquetar
una pgina web.
QUE ES UN CAPA o LAYER?

Seguramente habr visitado sitios donde pudo observar su diseo. En ella habr observado
botoneras, seccin con contenido, encabezados, pie de pginas, etc. Dicho diseo se
denomina layout. Se llama capa o layer a determinada zona o bloque de una pgina web que
puede encerrar cualquier contenido HTML. El tag o la etiqueta a utilizar ser la etiqueta <div>.
El elemento div fue introducido en la especificacin HTML 4 para proveer un mecanismo
genrico para agrupar y dar estructura a los documentos.
Se puede decir que las capas son bloques dentro de las pginas que pueden ser manejados
por CSS.
<div id=capa1>Aqui va el contenido de la capa</div>
El cdigo anterior se sita en el body, cada capa debe tener un nombre nico que no se puede
repetir dentro de la pgina. Dentro de un div puede haber otros divs, incluso con una estructura
similar.
EL MODELO DE CAJAS
Tarde o temprano, todo sitio queda bajo la influencia del Modelo de Caja. El modelo de caja fue
implementado por la especificacin 2 de la CSS y es uno de los elementos bsicos de las
Hojas de Estilo en Cascada y por lo tanto su correcta interpretacin resulta fundamental a la
hora de lograr los resultados deseados en un diseo, por ms simple que ste resulte.
Aunque desde hace tiempo los diseadores Web han optado por la utilizacin de tablas HTML
para el diseo de pginas Web, el uso que se le daba era para diagramar las pginas cuando
el verdadero cometido de las tablas es albergar contenido tabulado.
Cada caja posee, adems de su rea de Contenido, otras tres reas opcionales:
rea de Margen : Margin

rea de Relleno : Padding
rea de Borde : Border
Figura 7.1. El Box Model o Modelo de Caja.
Contenido: Que puede ser, por ejemplo, un prrafo representado por el elemento <p>, o una
imagen, usando el elemento <img>. Las cajas tambin pueden, a su vez, contener otras cajas,
lo que las hace muy tiles.
Relleno: Padding en ingles. Es el espacio que hay entre el contenido y el borde de la caja.
CSS nos brinda las siguientes propiedades para poder manejar a gusto el padding una caja.
Padding-top;
Padding-Right;
Padding-Bottom;
Padding-Left;
Estas propiedades especifican el tamao que deber tener el padding, en porcentajes o
unidades de medida (px o em).
<html>
<head>
<title> Una pagina de prueba para css </title>
<style>
h1 {
background-color: #c0c0c0;
padding-left: 25px;
padding-top: 15px;
padding-bottom: 30px;
padding-right: 20px;
}
</style>
</head>
<body>
<h1> Titulo Principal </h1>
</body>
</html>
El Resultado seria lo siguiente:
Tambin se podra haber logrado lo mismo escribiendo:
<html>
<head>
<title> Una pagina de prueba para CSS </title>
<style>
h1 {
background-color: #c0c0c0;
padding: 15px 20px 30px 25px;
}
</style>
</head>
<body>
<h1> Titulo Principal </h1>
</body>
</html>
El primer valor establece el relleno superior, el segundo el relleno derecho, el tercero el inferior,
el cuarto el izquierdo.
Nota
Para acordarse en que orden deben ponerse los valores del padding
debe pensar como corre las agujas del reloj.
No tenemos que usar obligatoriamente pxeles como unidades de medida tambin podramos
usar ems o porcentajes. Ambas unidades de medida tienen efectos ligeramente distintos.
Utilizando em como medida el relleno se ajusta teniendo en cuenta el tamao de la letra del
contenido; en cambio, utilizando porcentajes el relleno se ajusta teniendo en cuenta el ancho
del bloque que contiene el elemento.
Borde: Todas las cajas tienen bordes. Es una lnea que encierra completamente el contenido y
su relleno. CSS permite modificar el ancho, el color y hasta el estilo que debern tener los
cuatros bordes (superior, derecho, inferior e izquierdo) de nuestra caja, usando las siguientes
propiedades.
Border-top-width;
Border-right-width;
Border-bottom-width;
Border-left-width;
Border-top-color;
Border-right-color;
Border-bottom-color;
Border-left-color;
Border-top-style;
Border-right-style;
Border-bottom-style;
Border-left-style;
Margen: Es el espacio que hay de separacin entre una caja y otra.
PROPIEDADES TIPO SHORTHAND

Las propiedades de tipo "shorthand" son propiedades de CSS que permiten establecer de
forma simultnea el valor de varias propiedades diferentes pero relacionadas. El uso de las
propiedades "shorthand" es muy extendido, ya que permiten crear hojas de estilos ms
compactas. En la siguiente lista se enumeran todos los atributos de cada propiedad, ordenados
en la forma con la que se pondran usar:
Font
font-style | font-variant | font-weight | font-size / line-height | font family
EJEMPLO:
p {font: italic normal bold 10px/12pt Helvetica, Tahoma, Arial}
Background
background-color | background-image | background-repeat | background-attachment |
background-position
EJEMPLO:
body {background: #FFF url(../images/ejemplo.gif) no-repeat fixed center}
Margin
longitud | porcentaje | auto
EJEMPLO:
body {margin: 5px} (todos los mrgenes a 5px)
p {margin: 2px 4px} (mrgenes superior e inferior a 2px, mrgenes izquierdo y derecho a 4px)
div {margin: 1px 2px 3px 4px} (margen superior a 1px, margen derecho a 2px, margen inferior
a 3px, margen izquierdo a 4px)
Padding
longitud | porcentaje | auto
EJEMPLO:
body {padding: 2px 3px 4px 5px} (Si definimos cuatro valores estamos aplicando el padding
superior, derecho, inferior e izquierdo)
body {padding: 2px 4px) (Si definimos dos o tres valores, los valores faltantes se toman del
lado opuesto: superior e inferior a 2px, derecho e izquierdo a 4px)
body {padding: 5px} (Si definimos un solo valor se aplican a todos los lados)
Border
border-width | border-style | color
EJEMPLO:
h3 {border: thick dotted blue}
PROPIEDAD WIDTH
La propiedad widht permite definir el ancho de los elementos de bloque. Por ejemplo para que
un bloque no ocupe todo el ancho de una pgina (solo 150px) se definir lo siguiente:
#columna {
width: 150px;
}
Si en vez de una unidad de medida se indica un porcentaje, la referencia de ese valor es el

ancho del elemento que lo contiene. En el siguiente ejemplo, los dos elementos <div> interiores
tienen el mismo ancho del 50%, pero como el ancho de su elemento contenedor es diferente, el
ancho real de cada <div> interno tambin es diferente.
Figura 7.2. Propiedad width empleando el uso de porcentajes.
COMO CENTRAR UNA PAGINA HORIZONTALMENTE

Los navegadores alinean por defecto las pginas Web a la izquierda de la ventana. Cuando la
resolucin de la pantalla es muy grande, la mayora de pginas de ancho fijo alineadas a la
izquierda parecen muy estrechas y provocan una sensacin de vaco. La solucin ms sencilla
para evitar los grandes espacios en blanco consiste en crear pginas con una anchura fija
adecuada y centrar la pgina horizontalmente respecto de la ventana del navegador.
Para centrar una pagina deberemos poner el valor auto a la propiedad margin de la capa
contenedora que encierra todos los contenidos (wrapper o container en ingles) esto es
suficiente para centra cualquier elemento de bloque, pero esto no funciona en Internet Explorer
6. Para resolver esto deberemos establecer la propiedad text-align en center en el elemento
contenedor del que queremos centrar.
#container {
width: 750px;
margin: 0px auto 0px auto;
}
El valor 0px auto 0px auto significa que los mrgenes superior e inferior son iguales a 0 y los
mrgenes laterales toman un valor de auto. Cuando se asignan mrgenes laterales
automticos a un elemento, los navegadores centran ese elemento respecto de su elemento
padre. En este ejemplo, el elemento padre del <div> es la propia pgina (el elemento <body>),
por lo que se consigue centrar el elemento <div> respecto de la ventana del navegador.
Modificando ligeramente el cdigo CSS anterior se puede conseguir un diseo dinmico o
fluido que se adapta al ancho de la ventana del navegador y permanece siempre centrado.
#container {
width: 75%;
margin: 0px auto 0px auto;
}
Mediante un porcentaje el ancho del elemento se adapta al ancho de la ventana del navegador.
De esta forma, si se reduce el ancho de la ventana del navegador, la pgina se ver ms
estrecha y si se maximiza la ventana del navegador, la pgina se ver ms ancha.
DISEO DE NUESTRA PAGINA INDEX

En este capitulo se empezara a disear la estructura de la pagina index.html. La misma se
dividir en las siguientes secciones: Header, Navigation, Content, News, Footer.
Figura 7.3 Estructura de la pagina index.html
Truco
Antes de comenzar con el cdigo HTML es siempre conveniente tener
un esquema de nuestro trabajo (layout). Puede utilizar Fireworks para
construir dicha grafica o cualquier otro programa de diseo grafico.
Empezaremos escribiendo el cdigo HTML del mismo, en este caso como vimos anteriormente
tenemos 5 secciones mas una mas que ser el DIV container.
<html>
<head>
<title>Centro de Formacion Profesional Nro. 401 de San Martin</title>
</head>
<body>
<div id="container">
<div id="header">
<h2>
Centro de Formacion Profesional Nro. 401 de San Martin
</h2>
</div>
<div id="navigation">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Cursos</a></li>
<li><a href="#">Inscripcion</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
<div id="content-container">
<div id="content">
<h4>Titulo de la Pagina</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
vitae aliquam odio. Pellentesque bibendum aliquam condimentum.
Nullam faucibus lacinia elit, vel faucibus augue suscipit in.
Nullam quis lacus diam. Donec augue lorem, venenatis at porta
sed, blandit non nisl. Fusce congue interdum adipiscing. Donec
malesuada dignissim eros. Nulla placerat egestas magna, eget
dictum dolor tincidunt aliquet. Etiam rutrum metus sit amet
felis consequat lobortis. Maecenas sit amet
tellus justo. Nullam iaculis odio ut elit feugiat sit amet
blandit justo tempus. Duis elit lectus,
varius ac vehicula in, ullamcorper quis magna. Praesent porta
tristique porttitor. Vivamus porttitor tincidunt elementum.
Praesent id metus vitae mi vulputate aliquet et ac elit. Mauris vitae
sem vel metus volutpat feugiat. Curabitur
molestie metus at purus aliquam vehicula. Aliquam erat
volutpat.</p>
</div>
<div id="news">
<h4> Ultimas Novedades </h4>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
vitae aliquam odio. Pellentesque bibendum aliquam condimentum.
Nullam faucibus lacinia elit, vel faucibus augue suscipit in.
Nullam quis lacus diam </p>
</div>
</div>
</div>
<div id="footer">
Copyright CFP 401 de San Martin, 2011
</div>
Luego crearemos una hoja de estilo interna como se vio oportunamente y crearemos un estilo
tipo ID denominado container (el smbolo numeral, #, identifica que es un selector ID).
#container {
background: #fff;
width: 800px;
margin: 0px auto;
}
Las propiedades de este ID de CSS dice que el ancho es de 800 pixeles, y que los mrgenes
sern de 0 pixeles. Al margen podra ponerle otros valores o no ponerle ninguno. El contenedor
se visualizara centrado gracias al valor auto del mismo.
Ahora pasaremos al header que tendr las siguientes propiedades:
#header {
background: #ccc;
width: 100%;
height: 50px;
text-align: center;
}
INSERTAR ETIQUETAS DIV DESDE EL MENU

Puede insertar rpidamente una etiqueta div usando el men de dreamweaver para ello debe
dirigirse al men Insertar y desde all seleccionar la opcin etiqueta div de la opcin Objetos de
diseo.
Figura 7.4. Cuadro Insertar etiqueta div.
En el cuadro id puede colocar un nombre a dicho div. Recuerde que ese nombre debe ser
nico dentro de la pagina. Despus de insertar una etiqueta div puede aadir contenido a ella
(como un texto, una imagen o una pelcula) y tambin puede modificar su aspecto con css para
ello desde el mismo cuadro anterior seleccione Nueva Regla Css.
Figura 7.5. Definicin de reglas para el nuevo div.
POSICIONAMIENTO
Los navegadores crean y posicionan de forma automtica todas las cajas que forman cada
pgina HTML. No obstante, CSS permite al diseador modificar la posicin en la que se
muestra cada caja.
Hay dos posibles formas de situar su posicin: absoluta y relativa. En realidad hay ms
posibilidades, pero de momento las dejamos. La propiedad para manejar esto se denomina
position.
Con posicionamiento absoluto decimos dnde queremos la caja dentro de la ventana del
navegador, el resto de elementos de la pgina ignoran la nueva posicin del elemento. El punto
inicial o coordenadas iniciales de este tipo de posicionamiento es la esquina superior izquierda.
Mientras que con posicin relativa lo nico que hacemos es desplazarla respecto a su posicin
normal, el origen de sus coordenadas no es la esquina superior izquierda del elemento
contenedor, sino la posicin que ocuparan naturalmente, de no estar condicionados o
posicionados.
CAJAS FLOTANTES
A diferencia de html, css permite un buen control sobre el posicionamiento de elementos. Los
elementos en una pgina web fluyen en el orden en que aparecen. Por lo tanto, los elementos
aparecen a medida que se desplaza por la pagina html.
Utilizando la propiedad float de css es posible romper ese flujo normal. Dicha propiedad admite
tres valores, right, left y none.
Un valor left significa que el elemento formar un bloque que se situar a la izquierda de los
elementos adyacentes. Un valor right significa que el bloque se situar a la derecha.
Un bloque 'flotante' debe tener definida su anchura, implcita o expresamente, ya que de lo
contrario ser tratado como no flotante.
Ejemplo de Cajas Flotantes:
La regla CSS que se aplica en la imagen del ejemplo anterior es:

img{
float:left;
}
La propiedad clear permite contrarrestar el comportamiento por defecto de los float y permite
forzar a un elemento a mostrarse debajo de cualquier elemento posicionado con float. De esta
forma permite limpiar el lado derecho, izquierdo o ambos de un elemento, para que no se
muestren elementos adyacentes
Esto se puede lograr con esta lnea:

p{
clear:left;
}
Para el content y el news usando el concepto de cajas flotantes quedara as:

#content {
background:#ffffff;
padding: 10px 0px;
margin: 0 5px 0 0;
float: left;
width: 580px;
text-align: left;
}
#news{
float:right;
width: 200px;
padding: 10px 5px;
}
Para el caso del content usamos la propiedad y el valor float:left, es decir el bloque se quedar
pegado a la izquierda. Para el news el valor es right.
Ahora viene el footer, para evitar los solapamientos ocasionados por los elementos
posicionados usaremos la propiedad clear:both, El valor both despeja los lados izquierdo y
derecho del elemento, ya que desplaza el footer de forma descendente hasta que el borde
superior se encuentre por debajo del borde inferior de cualquier elemento flotante hacia la
izquierda o hacia la derecha.
10
Truco
Como tenemos una columna con float:left y otra con float:right,
debemos usar clear:both en el footer. De esta forma se ira hacia abajo,
hasta encontrar un hueco del 100% para l.
#footer{
background: #ccc;
width: 100%;
text-align:center;
clear: both;
}
Adems agregaremos un selector HTML body donde modificaremos la fuente y la alineacin.

body {
font-family:arial;
text-align:center; /*Para centrar con IE6*/
}
El listado final de la hoja de estilo interna es la siguiente:

/* ------------------------------------Site:
Sitio CFP 401 de San Martin
CSS author: Claudio Alonso
Updated:
30/04/11
Updated by: Claudio Alonso
---------------------------------------- */
body {
font-family:arial;
text-align:center; /*Para centrar con IE6*/
}
h2 { margin: 0;}
h4{ margin 0;color:#003D97 }
#container {
background: #fff;
width: 800px;
margin: 0px auto;
}
#header {
background: #ccc;
width: 100%;
height: 50px;
text-align: center;
}
#content-container
{
float: left;
width: 800px;
background: #fff url(bg.gif) repeat-y 100%;
}
11
#content {
background:#ffffff;
padding: 10px 0px;
margin: 0 5px 0 0;
float: left;
width: 580px;
text-align: left;
}
#news{
float:right;
width: 200px;
padding: 10px 5px;
}
#navigation{
background: #333;
width: 100%;
text-align: left;
}
#footer{
background: #ccc;
width: 100%;
text-align:center;
clear: both;
}
#navigation
{
float: left;
width: 800px;
background: #333;
}
ul
{
margin: 0;
padding: 0;
}
ul,li
{
list-style-type: none;
display: inline;
}
#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:hover { background: #383; }
12
RESUMEN DEL TRABAJO REALIZADO

1.
2.
3.
4.
5.
6.
Inicialmente el layout de una pagina se hacia con tablas hoy en da se apoya

fuertemente en las etiquetas div y en las propiedades de css.
El elemento div de html proporciona la posibilidad de dividir el html en elementos
lgicos que se pueden manipular utilizando css.
Creamos las capas en el orden que aparecen en la pgina.
Las capas que tienen que ir unas al lado de otras (columnas) tienen que tener la
propiedad float con el valor left.
Las capas que vayan despus de estas deben tener la propiedad clear con el valor
left o both.
Todas las capas las englobamos dentro de otra denominada contenedora.
Figura 7.6. Pagina Terminada.
13

07-Maquetar Sitios 2011

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

07-Maquetar Sitios 2011

Cargado por

Copyright:

Formatos disponibles

Capitulo 7: Maquetar sitios con css

C.F.P Nro. 401 de San Martn

MAQUETAR SITIOS CON CSS

QUE ES UN CAPA o LAYER?

rea de Margen : Margin

Capitulo 7: Maquetar sitios con css

C.F.P Nro. 401 de San Martn

Figura 7.1. El Box Model o Modelo de Caja.

El Resultado seria lo siguiente:

Capitulo 7: Maquetar sitios con css

C.F.P Nro. 401 de San Martn

Tambin se podra haber logrado lo mismo escribiendo:

Capitulo 7: Maquetar sitios con css

C.F.P Nro. 401 de San Martn

PROPIEDADES TIPO SHORTHAND

Capitulo 7: Maquetar sitios con css

C.F.P Nro. 401 de San Martn

Si en vez de una unidad de medida se indica un porcentaje, la referencia de ese valor es el

Figura 7.2. Propiedad width empleando el uso de porcentajes.

COMO CENTRAR UNA PAGINA HORIZONTALMENTE

Capitulo 7: Maquetar sitios con css

C.F.P Nro. 401 de San Martn

DISEO DE NUESTRA PAGINA INDEX

Figura 7.3 Estructura de la pagina index.html

Capitulo 7: Maquetar sitios con css

C.F.P Nro. 401 de San Martn

Capitulo 7: Maquetar sitios con css

C.F.P Nro. 401 de San Martn

INSERTAR ETIQUETAS DIV DESDE EL MENU

Figura 7.4. Cuadro Insertar etiqueta div.

Figura 7.5. Definicin de reglas para el nuevo div.

Capitulo 7: Maquetar sitios con css

C.F.P Nro. 401 de San Martn

Capitulo 7: Maquetar sitios con css

C.F.P Nro. 401 de San Martn

La regla CSS que se aplica en la imagen del ejemplo anterior es:

Esto se puede lograr con esta lnea:

Para el content y el news usando el concepto de cajas flotantes quedara as:

Capitulo 7: Maquetar sitios con css

C.F.P Nro. 401 de San Martn

Adems agregaremos un selector HTML body donde modificaremos la fuente y la alineacin.

El listado final de la hoja de estilo interna es la siguiente:

Capitulo 7: Maquetar sitios con css

C.F.P Nro. 401 de San Martn

Capitulo 7: Maquetar sitios con css

C.F.P Nro. 401 de San Martn

RESUMEN DEL TRABAJO REALIZADO

Inicialmente el layout de una pagina se hacia con tablas hoy en da se apoya

Figura 7.6. Pagina Terminada.

También podría gustarte