Escolar Documentos
Profissional Documentos
Cultura Documentos
La maquetacin con CSS es algo que ya forma parte de nuestro da a da. Es as? Si tu
respuesta es que s, felicidades!! ests ahorrndote muchos quebraderos de cabeza y enfocando
tus esfuerzos en la va correcta, que te permitir crecer y evolucionar como diseador web y
desarrollador en general. Puedes incluso ahorrarte la lectura de este artculo y pasar
directamente
otros
temas
ms
avanzados
del
manual
de
Maquetacin
CSS
de
DesarrolloWeb.com.
Si respondiste que la maquetacin CSS no forma parte de tus tcnicas habituales, o si piensas
que no la necesitas, ests en el lugar correcto, donde intentaremos hacerte cambiar de idea y
sobre todo, ensearte a hacer las cosas tal como dicen los estndares, que a la postre
comprobars que es la manera ms sencilla y ms potente.
En DesarrolloWeb.com tenemos diversos artculos ya publicados sobre la maquetacin web y
segn escribimos estas lneas, los estamos agrupando todos en el Manual de Maquetacin CSS.
Estamos creando este artculo como una mera introduccin al mundo de la maquetacin web
basada en estndares, con CSS, o si lo preferimos, el diseo web sin tablas, o "tableless", como
se conoce en ingls.
Las tablas solucionaron por un buen tiempo las necesidades de los diseadores de webs, pero
tenan diversos problemas, aparte de no facilitar mucho la estructura de sitios con un diseo
complejo.
El contenido se mezcla con las reglas de presentacin o formato. Lo que hace que el
cdigo de tu pgina web sea innecesariamente grande y ello deriva en pginas ms
pesadas. Al final, con tablas tenemos una web ms lenta y la transferencia de datos de
nuestro servidor tambin aumenta, con lo que tu servidor podra atender a menos
usuarios al mismo tiempo y te saldr ms caro de mantener.
El rediseo de una web se hace mucho ms complicado, porque para cambiar la forma
con la que se ve tu pgina tendrs que actualizar todo el cdigo. Si maquetas utilizando
CSS slo tendrs que cambiar el cdigo CSS para que el aspecto de tu pgina sea tan
distinto como desees.
Tu pgina tendr problemas serios al verse en otros dispositivos, como Palms o telfonos
mviles, que tienen pantallas menores.
Tendrs que remar contra corriente para intentar que tu pgina se vea como quieres,
porque ests utilizando unas herramientas, las tablas, que no te ofrecen las posibilidades
necesarias para maquetar a voluntad. Tendrs que aprender mil truqillos para saltarte
las limitaciones de las tablas y a medida que los apliques, tu cdigo se har ms y ms
pesado, menos entendible y su mantenimiento ser cada da ms complicado.
extensa documentacin sobre la maquetacin con hojas de estilo en cascada, que podemos leer
en DesarrolloWeb.com y en otros muchos sitios, aparte de infinidad de libros. Sobre la pereza,
estoy seguro que la opinin de muchos webmasters en artculos como este y la evolucin de
sitios web de referencia, han hecho que poco a poco nos haya resultado menos pesado empezar
a trabajar intensivamente con CSS.
Por otra parte, la profesionalizacin de los diseadores de webs y la competencia, hace necesario
que, las personas que nos pretendemos dedicar a trabajar en este mundo del desarrollo,
tengamos que aumentar la calidad de nuestro trabajo, as como mejorar la productividad y la
facilidad
de
mantenimiento.
Incluso
si
no
pretendemos
convertirnos
en
diseadores
profesionales y tan slo queremos tener una web bonita y prctica, las CSS sern nuestro mejor
aliado.
Y todo esto por qu? Slo porque con CSS se separa el contenido del aspecto o presentacin?
Entiendo que muchas personas no encuentren de entrada ventajas en separar el contenido de la
presentacin. Yo mismo tard bastante en entender cmo esta prctica iba a ayudar en mi
trabajo, pero os comentar un par de casos de mi experiencia:
Hace ya bastantes aos, DesarrolloWeb.com estaba alojado en un servicio de hosting donde me
cobraban un extra por la transferencia. Es decir, tena contratado con el servidor un plan de
alojamiento (que por aquel entonces era el plano mayor que exista en ese alojador), que me
asignaba una tasa de transferencia mensual que siempre acababa superando. Entonces la
empresa de hosting me pasaba una factura mensual por el extra de transferencia que haba
consumido el sitio. Ahora ya no recuerdo bien las tasas de transferencia que estaban contratadas
y las que utilizbamos, pero lo que s recuerdo fue que hicimos un cambio rpido a CSS (por
aquel entonces no utilizaba las hojas de estilo para nada en la pgina), de manera que el estilo
qued separado (en buena parte) del contenido de la web y no se repetan infinidad de veces
etiquetas del estilo de FONT, tablas con estilos repetitivos, etc. Todo eso hizo que el peso de
cada pgina se redujera bastante y tambin la transferencia del servidor y recuerdo me ahorr
alrededor de 20.000 de las antiguas pesetas (unos 120 euros) al mes en factura por el extra de
transferencia. He de reconocer que en esta actualizacin ni siquiera nos libramos de las tablas,
pero fue un primer paso en la adecuacin del sitio a las CSS, hoy s que si hubiramos
suprimido las tablas todava habra ahorrado ms dinero.
Os cuento otro caso representativo, que ocurri con otro sitio web que realizamos tambin
nosotros: Guiarte.com, que estaba diseado con tablas y llevamos unos 4 aos en redisearlo
con maquetacin CSS, desde que me nos lo propusimos hasta que lo terminamos. Ya s, es
vergonzoso, pero por falta de tiempo ocurri as. El rediseo, de tablas a maquetacin CSS, se
hizo a la vez que un cambio de tecnologa de servidor y haba que rehacer el sitio por completo.
Pero sirva de prueba que en el ltimo ao se redise otra vez y slo tuvo que intervenir una
persona de nuestro equipo durante un par de semanas para conseguirlo.
Uno de los sitios web que ms me impactaron a la hora de entender cmo CSS podra ayudar en
la maquetacin de webs, fue el CSS Zend Garden, en el que podemos ver una web a la que se le
cambia el diseo radicalmente, slo alterando la hoja de estilo en cascada. Podemos acceder a
ese sitio y ver el diseo principal, pero adems, en la barra de la derecha, encontrars un listado
de alternativas de aspecto creadas por otras personas que resultan sin duda impactantes, por lo
mucho que cambian con respecto a diseo original con slo alterar el archivo CSS con los estilos.
Sin duda, una demostracin como la de CSS Zend Garden es realmente ilustradora sobre las
posibilidades que tendremos a nuestro alcance, si maquetamos nicamente con hojas de estilos.
Sobre las ventajas de maquetar con CSS frente a la maquetacin con tablas ya hemos hablado
en otros artculos en DesarrolloWeb.com, por lo que no voy a repetir de nuevo las mismas ideas.
En este artculo he querido hablar sobre las desventajas de las tablas y compartir con vosotros
algunas de mis experiencias, con intencin de motivar a las personas en el aprendizaje de la
maquetacin CSS.
As pues, espero que os animis a leer este manual de Maquetacin CSS, donde aprenderis
diversas tcnicas con las que empezar a utilizar posicionamiento CSS en lugar de las poco
recomendables tablas.
Una vez adquiridos unos conocimientos bsicos, con la lectura de los siguientes artculos, os
sugiero completar las explicaciones y de paso aprender un poco sobre las prcticas habituales
sobre maquetacin CSS en los vdeos: Videotutorial de introduccin a la maquetacin con CSS y
en el Vdeo Prctico de Maquetacin CSS.
Os sugiero tambin de paso otro manual interesante que tambin trata sobre la maquetacin de
webs con CSS, que tiene adems una serie de vdeos donde podris ver las tcnicas que
utilizamos de primera mano: Maquetacin CSS con 960 Grid System .
Trfico en el servidor. Las pginas pueden reducir su tamao entre un 40% y un 60%, y
los navegadores guardan la hoja de estilos en la cach, sto reduce los costos de envo
de informacin.
Tiempos de carga. Por la gran reduccin en el peso de las pginas, mejora la experiencia
del usuario, que valora de un sitio el menor tiempo en la descarga.
Posicionamiento. Las pginas diseadas con CSS tienen un cdigo ms limpio porque no
llevan diseo, slo contenido. Esto es semnticamente ms correcto y la pgina
aparecer mejor posicionada en los buscadores. Google navega obviando el diseo.
Imgenes de partida
Podemos ver la imagen que hemos creado y que vamos a intentar maquetar lo ms parecido
posible. No es el objetivo de este manual ofrecer las tcnicas para realizar esta imagen, aunque
en otros manuales de DesarrolloWeb.com podemos ver tutoriales para aprender algunos de los
trucos de diseo utilizados.
Se trata de un diseo sencillo, pero en el que se encuentran elementos distintos y variados con
los que trabajar.
De esta imagen hemos extrado algunos grficos, que utilizaremos a la hora de maquetar el
diseo. Sera interesante descargarlo para poder realizar el ejercicio por vuestra cuenta.
Para los impacientes, tenemos un enlace a la pgina resultado que vamos a conseguir realizar al
final del artculo. Puede ser bueno verla para hacerse una idea de donde queremos llegar.
Desarrollo de la pgina y la hoja de estilos
Vamos a generar los archivos HTML y CSS a la vez, pero paso a paso, de modo que podamos
explicar las etiquetas y estilos que hemos utilizado para cada parte de la pgina.
Como primer paso, en la cabecera <head> del documento HTML, enlazaremos con una hoja de
estilos externa.
< head>
<title>La web del invierno</title>
<link rel="STYLESHEET" type="text/css" href="estilo.css">
< /head>
BODY {
background : #C0D9D9 url(images/fondo.gif) repeat;
font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #666666;
margin : 20px 0px 20px 0px;
text-align: center;
La capa contenedor
Generalmente, se utiliza una capa principal, a la que hemos llamado contenedor. Dentro de esta
capa se colocan todos los elementos que va a tener la pgina.
En esta capa definimos el alineamiento del texto a la izquierda (porque en el cuerpo habamos
centrado el texto, para que Internet Explorer centre la capa contenedor y deseamos que la
alineacin por defecto sea a izquierda). Tambin definimos una anchura de 700px, un color de
fondo blanco y el margen, con el atributo "margin", lo definimos como "auto", para que Mozilla y
otros navegadores centren la capa.
#contenedor{
text-align: left;
width: 700px;
background-color : #ffffff;
margin: auto;
}
Por cierto, nos hemos dejado deliberadamente el borde de la capa, que habamos definido en el
diseo original. Se podra haber definido el atributo "border", pero eso nos repercute
negativamente en la maquetacin en Explorer. Veremos ms adelante cmo colocarlo para que
se vea correctamente en todos los navegadores.
Vemos que es una simple imagen, pero atencin, que tenemos que colocar el </div> a
continuacin de <img> sin ningn espacio ni salto de lnea, porque si no, Internet Explorer, nos
introducir un pequeo mrgen debajo de la imagen, que queremos evitar.
Los atributos de estilo definidos para la cabecera son las dimensiones de la capa, que queremos
que sean las mismas que las de la imagen. Aunque en este caso podramos habernos ahorrado
definir esos valores porque son los que se tomaran por defecto.
#cabecera{
height : 106px;
width: 700px;
}
La barra de navegacin
Vamos con la capa utilizada para definir la barra de navegacin horizontal que hay debajo de la
cabecera.
< div id="navegador">
<a href="#" class="enlacenav">Portada</a> |
<a href="#" class="enlacenav">Invierno</a> |
<a href="#" class="enlacenav">Diciembre a marzo</a> |
<a href="#" class="enlacenav">La chimenea</a> |
<a href="#" class="enlacenav">Deportes de invierno</a> |
<a href="#" class="enlacenav">Contacto</a>
< /div>
Como se puede ver, simplemente hemos definido una serie de enlaces dentro de una capa. Hay
que fijarse que adems los enlaces tienen una clase, llamada "enlacenav", que utilizaremos para
darle un estilo especfico a a estos enlaces, independiente del definido por defecto en la pgina.
Por lo que respecta a la capa, se define un color y una imagen de fondo, unos mrgenes internos
(atributo padding) y un borde, tanto para la parte de arriba de la capa como para la de abajo.
#navegador{
background : #F5F4C3 url(images/fondonav.gif);
padding : 3px 10px 5px 10px;
border-top : 1px solid #cccccc;
Para los estilos de los enlaces utilizamos una clase. Para definir los estilos de cada uno de los
estados de los enlaces (visitados, activos, no visitados, etc), se utilizan las pseudo-clases
VISITED, ACTIVE, FOCUS, LINK Y HOVER. Simplemente definimos el color de los enlaces, el
mismo para todas las pseudo-clases, menos para HOVER, que tiene un color distinto. HOVER es
el estado del enlace cuando el puntero ratn est situado encima. En este caso, cuando el ratn
est encima, cambiar de color.
A.enlacenav, A.enlacenav:VISITED, A.enlacenav:ACTIVE, A.enlacenav:FOCUS, A.enlacenav:LINK{
color: #494E6B;
}
A.enlacenav:HOVER{
color: #3F7DE3;
}
Vemos que el cuerpo tiene un ttulo, varios prrafos y un div, incluido dentro del propio cuerpo,
con una segunda barra de enlaces que faciliten la navegacin para las personas que lleguen al
final del scroll vertical de la pgina.
Los estilos del cuerpo definen la anchura, margen, margen interno, y un color de fondo. Adems,
se define el atributo "float:left" para hacer que el cuerpo "flote" a la izquierda. El resultado es
que la capa del cuerpo se coloque a la izquierda y el contenido escrito a continuacin se site,
rodeando a esta capa, a la derecha. (El efecto es el mismo que si asignamos en HTML el atributo
align=left en una imagen)
Para posibilitar la disposicin en dos columnas que hemos definido en el diseo original, vamos a
hacer que la capa de la izquerda -el cuerpo- "flote" a la izquierda. Posteriormente, la capa de la
derecha que aun no hemos colocado-el lateral-, haremos que "flote" a la derecha.
#cuerpo{
width:480px;
margin-left: 8px;
padding: 12px 0px 10px 0px;
background-color : #ffffff;
float:left;
}
Tambin se define un estilo para cada algunas de las etiquetas que hemos situado dentro del
cuerpo:
H1{
font-size: 12pt;
}
Para asignar una negrita en el div de la parte inferior del cuerpo, que tiene enlaces para facilitar
la navegacin.
Podemos ver el ejercicio tal como queda con los pasos realizados hasta el momento.
El contenido que vamos a situar dentro de esta capa lo veremos por partes, pues tiene bastantes
detalles que destacar tranquilamente. Los estilos son los siguientes:
#lateral{
width: 200px;
background-color: #EBF2FE;
border-bottom : 1px solid #cccccc;
border-left : 1px solid #cccccc;
float:right;
}
Se define una anchura, un color de fondo y bordes de color gris claro en la parte lateral izquierda
y abajo, los otros dos lados no tendrn borde por estar en contacto con los bordes de otros
elementos.
Adems, con el atributo float:right, indicamos que este lateral debe "flotar" hacia la derecha.
As, el cuerpo flota a la izquierda y el lateral a la derecha, con lo que conseguimos una
disposicin en 2 columnas.
Veremos a continuacin los elementos que vamos a colocar dentro de la capa lateral, en una
especie de cajas independientes. Aunque, antes de ver esas cajas una a una, merece la pena
conocer en lneas generales cmo van a crearse. Cada caja tendr este cdigo HTML, compuesto
por un titulo y un contenido de la caja:
< h2 class="titlat">Titulo de la caja</h2>
< div id="idunico" class="cuerpolateral">
Contenido de la caja
< /div>
El ttulo lo incluimos con una etiqueta <h2> y la parte de la caja con el contenido, se define con
un div. Cada uno de estos elementos tiene una clase, que se aplicar a los mismos elementos en
cada una de las cajas, de modo que todos los elementos del lateral compartan un mismo estilo.
.titlat{
background-color:#68729E;
color:#ffffff;
font-size:8pt;
text-transform : uppercase;
padding: 7px 3px 7px 8px;
font-weight : normal;
letter-spacing : 2px;
margin: 0px 0px 8px 0px;
}
.cuerpolateral{
padding: 5px 4px 13px 10px;
}
El encabezado de nivel 2 utiliza la clase "titlat", que define un color de fondo, un color del texto,
un tamao de letra, un cambio a maysculas de las letras del ttulo, unos mrgenes internos,
peso de letra normal (no negrita, como suelen ser los encabezamientos por defecto), un
espaciado de letras de 2 pixel y un margen. Los titulares llevan asociado un salto de lnea doble
arriba y abajo, que deseamos evitar y para ello hemos definido un margen de 0 pixels, menos en
la parte de abajo, que tendr 8 pixel.
Las cajas laterales tambin tienen un estilo, que se aplica a todos los cuerpos de las cajas que
hay en el lateral. Ese estilo simplemente define unos mrgenes internos.
Caja de buscar
Uno de los elementos que vamos a colocar dentro del lateral es una caja de bsqueda, con un
formulario para realizar bsquedas internas, dentro del sitio, y en todo el web.
Esa caja de bsqueda se coloca en un formulario. Hemos puesto diversos identificadotes a los
elementos que hay dentro del fomulario, para poder aplicar estilos a cada componente por
separado. Aunque algunos de estos selectores ni siquiera los hemos llegado a utilizar, pueden
venir bien si queremos hacer en el futuro modificaciones de la hoja de estilos para actualizar el
diseo del web.
< h2 class="titlat">Buscar</h2>
< div id="fbuscar" class="cuerpolateral">
<form>
<div id="campotexto"><input type="text" name="criterio"></div>
<div id="botonbuscar"><input type=image src="images/go.gif" width="25" height="15"></div>
<div class="radio"><input type="radio" name="op" value="1"> En la Web del invierno</div>
<div class="radio"><input type="radio" name="op" value="2"> En toda la Web</div>
</form>
< /div>
Los elementos que hemos definido en la hoja de estilos para este pequeo formulario son los
siguientes:
INPUT {
font-size : 8pt;
}
Con ello definimos que los campos de texto tienen un tamao de letra de 8 puntos.
#fbuscar form{
margin-bottom : 0px;
margin-top : 0px;
}
El formulario, que est situado dentro de la capa fbuscar, no debe tener mrgenes, ni arriba ni
abajo.
#campotexto{
float: left;
}
La capa "campotexto", donde est el campo de texto, hemos definido que debe "flotar" a la
izquerda.
#campotexto input{
width:100px;
}
El input que hay dentro de la capa campotexto debe tener 100 pixels de ancho.
#botonbuscar {
padding-top : 3px;
padding-left: 106px;
}
La capa donde est el botn de submit, que en este caso es una imagen de submitir (<input
type="imagen">), tiene un margen interno de 3 pixels por arriba, y de 106 por el lado izquierdo.
Los 106 pixels de ancho salen de los 100 que ocupa el campo de texto que hay a la izquierda,
ms 6 pixeles adicionales, que son el verdadero margen que habr entre el campo de texto y la
imagen de submitir.
#botonbuscar input{
border : 0px none;
}
Con esta ltima definicin estamos indicando que la imagen de submitir (el <input
type="image"> que hay dentro de la capa botonbuscar) no tenga borde.
.radio{
clear:both;
}
Esta clase, que afecta a las capas donde estn los botones de radio, define que no deben haber
elementos "flotando" ni a la izquierda ni a la derecha, de los botones de radio.
La caja de registro
En la siguiente caja del lateral aparece un pequeo texto invitando a registrarse al visitante.
< div id="registro" class="cuerpolateral">
<a href="#">Registrese con nosotros</a> y obtenga muchas ventajas.
< /div>
Esta capa no tiene ningn estilo especfico, simplemente se comporta heredando los estilos de
otras capas y con los que se han definido en las clases que se utilizan.
La caja de otras informaciones
Situaremos una ltima caja dentro del lateral, que contiene enlaces a otras informaciones.
Dentro de la caja colocaremos varios enlaces dentro de una lista.
Por un lado tenemos el estilo definido para toda la lista de elementos. En este caso se eliminan
los mrgenes que este tipo de listas tienen implcitos. Se coloca tambin un margen interno 4
pixel a la izquierda y cero en el resto de las posiciones. Con "list-style:none" se indica que no se
desea ninguna bolita a la izquierda de los elementos, puesto que la vamos a colocar a
continuacin nosotros manualmente como fondo de los <li>.
#otras li{
padding-left: 14px;
background: transparent url("images/bullet.gif") 0 2px no-repeat;
margin-bottom: 10px;
}
Por otra parte, para cada uno de los elementos de la lista, de define un espacio de 14 pixel a la
izquierda. Esos 14 pixel sirven para hacer espacio, para que quepan unas pequeas imgenes
que vamos a poner de fondo en las listas, que van a hacer las veces de bolita. Tambin se define
un fondo de los <li> que es la imagen con la bolita personalizada, a juego con nuestro diseo.
Tambin se define un margen en la parte inferior.
Despus de integrar todo lo que hemos visto en este ejercicio para crear el lateral de la pgina,
el diseo queda tal como se puede ver en esta pgina.
Con "clear:both" indicamos que la capa debe mostrarse sin elementos flotando a izquierda y
derecha, de modo que la posicin de la capa ser inmediatamente por debajo de la capa cuerpo
y lateral.
Luego se define un color para el texto una alineacin de texto, unos mrgenes y un margen
interno por la parte de debajo de 10 pixel.
El borde externo
El diseo original inclua un borde de 2 pixel rodeando a toda la capa principal. Podemos hacer la
prueba de incluir un borde en la capa contenedor. Para ello hay que aadir en el estilo para la
capa contenedor el atributo border, de la siguiente manera.
#contenedor{
text-align: left;
border: 2px solid #cccccc;
width: 700px;
margin: auto;
background-color : #ffffff;
}
En Mozilla y navegadores similares, todo es correcto. Pero en Internet Explorer la cosa tiene su
problema. Esto es debido a que el espacio de los bordes, en Explorer, se toma del que se haya
asignado a la propia capa y en Mozilla y otros navegadores, se toma como espacio adicional,
aparte del que se haya asignado a la capa en si.
Lo mejor es probarlo y verlo por uno mismo, o bien encontrarse con el problema y encontrarle
solucin sin tener que romperse la cabeza.
Nosotros lo hemos arreglado quitando el borde en la capa contenedor y creando una nueva
capa, en la que situaremos el contenedor. Esa nueva capa la hemos llamado borde y es la que va
a tener el estilo de borde definido.
< div id="borde">
< div id="contenedor">
.... contenido de toda la pgina
< /div>
< /div>
Para conseguir el borde se han definido el siguiente estilo para la capa borde.
#borde{
border: 2px solid #cccccc;
text-align: left;
width: 700px;
margin: auto;
}
La experiencia en el trabajo con CSS, nos dice que a menudo surgen los mismos problemas o
similares. Una vez que ya los hemos resuelto unas pocas veces y nos hemos acostumbrado a
ello, igual que hicimos con los detalles relativos al HTML y la maquetacin con tablas, CSS se
torna mucho ms sencillo, potente y rpido de desarrollar.
< /div>
BODY {
font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #666666;
margin : 0px 0px 0px 0px;
padding : 0px 0px 0px 0px;
text-align: center;
background-color: #E8F4CD;
background-image: url(images/fondo.gif);
background-position: top left;
background-repeat: repeat-x;
}
A, A:ACTIVE, A:FOCUS, A:LINK, A:VISITED {
color : #3F7DE3;
}
A:HOVER {
color: #378237;
}
INPUT {
font-size : 8pt;
}
H1{
font-size: 12pt;
}
H2{
font-size: 10pt;
}
#borde{
border-left : 2px solid #144700;
border-right : 2px solid #144700;
width: 549px;
text-align: left;
margin: auto;
}
#contenedor{
text-align: left;
width: 549px;
margin: auto;
background-color : #ffffff;
}
#cabecera{
background: transparent url(images/cabecera.jpg) no-repeat;
height : 288px;
width: 549px;
}
/* using an image to replace text in an h1. This trick courtesy Douglas Bowman,
http://www.stopdesign.com/articles/css/replace-text/ */
#cabecera h1 {
margin : 0px 0px 0px 0px;
}
#cabecera h1 span {
display:none;
}
#navegador{
background: transparent url(images/barranav.jpg) no-repeat;
height : 29px;
width: 549px;
background-color: #144700;
}
#navegador p{
padding: 8px 3px 1px 10px;
margin : 0px 0px 0px 0px;
}
#cuerpo{
width: 335px;
padding: 13px 3px 15px 10px;
float:right;
background: transparent url(images/decora_trans.jpg) no-repeat bottom right;
}
#fbuscar{
}
#campotexto{
float: left;
}
#campotexto input{
width:100px;
}
#fbuscar form{
margin-bottom : 0px;
margin-top : 0px;
}
#botonbuscar {
padding-top : 3px;
padding-left: 106px;
}
#botonbuscar input{
border : 0px none;
}
.radio{
clear : both;
}
#lateral{
width: 200px;
float:left;
height: 500px;
margin-top: 3px;
}
#registro{
}
#otras{
}
.cuerpolateral{
background-color: #F0E68C;
padding: 5px 4px 13px 10px;
margin-bottom: 15px;
}
.titlat{
color:#ffffff;
font-size:8pt;
ext-transform : uppercase;
padding: 7px 3px 7px 8px;
margin: 20px 0px 0px 0px;
font-weight : normal;
letter-spacing : 2px;
background: #20550B url(images/titlat3.jpg) no-repeat bottom right;
clear : both;
color : #cccccc;
text-align : center;
margin : 30px 10px 0px 10px;
padding-bottom:10px;
Vamos a ver cmo realizar una maquetacin a dos columnas con CSS, sin utilizar tablas. Adems
de las dos columnas, para completar la estructura tpica de una web, colocaremos una cabecera
y un pie de pgina.
El ejemplo pretende ser el inicio de una serie de artculos para mostrar cmo realizar distintos
tipos de plantillas, maquetando con CSS en lugar de tablas. Iremos publicando estos artculos en
nuestro Taller de CSS.
Empezamos mostrando los dos ejemplos de maquetacin que veremos en este artculo, siempre
con dos columnas, dejando la columna con los enlaces de la barra de navegacin a la izquierda o
la derecha.
El cdigo HTML
El cdigo HTML de los dos ejemplos que hemos adelantado es el mismo. Bsicamente este:
<div id="contenedor">
<div id="cabecera">
Cabecera 01
</div>
<div id="cuerpo">
<div id="lateral">
<ul>
<li><a href="#">Enlace 1</a>
<li><a href="#">Vnculo 2</a>
<li><a href="#">Otro enlace</a>
<li><a href="#">Link chulo</a>
<li><a href="#">Ms enlaces</a>
<li><a href="#">Otro ltimo</a>
</ul>
</div>
<div id="principal">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
......
</div>
</div>
<div id="pie">
2005 DesarrolloWeb.com
</div>
</div>
Se puede ver que tenemos una capa contenedor, que engloba todo el cdigo. Luego, dentro del
contenedor tenemos tres bloques. La cabecera, el cuerpo y el pie de pgina. La cabecera y el pie
de pgina son dos capas tal cual, que ocupan todo el espacio del contenedor. El lugar donde
tendremos las dos columnas es el cuerpo.
Dentro del cuerpo tenemos dos partes, para codificar cada una de las dos columnas. Una parte,
que hemos llamado "lateral", con una lista de enlaces (sera la barra de navegacin) y otra parte
con el texto de la pgina, que hemos llamado "principal".
El cdigo CSS
Como habamos adelantado, veremos dos variantes de codificacin a dos columnas, con los
enlaces a la izquierda y a la derecha. No obstante, la mayor parte del cdigo CSS de ambos
ejemplos es la misma, pues slo vara la declaracin de estilos de la capa "lateral" y de la capa
"principal".
Maquetar con los enlaces a la izquierda
Veamos la codificacin CSS para la pgina con los enlaces a la izquierda.
<style type="text/css">
BODY {
font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10 0 10 0px;
text-align: center;
background-color: #ebebeb;
}
#contenedor{
text-align: left;
width: 770px;
margin: auto;
}
#cabecera{
background-color: #d0d0ff;
color: #333300;
font-size:12pt;
font-weight: bold;
padding: 3 3 3 10px;
}
#cuerpo{
margin: 10 0 10 0px;
}
#lateral{
width: 160px;
background-color: #999999;
float:left;
}
#lateral ul{
margin : 0 0 0 0px;
padding: 0 0 0 0px;
list-style: none;
}
#lateral li{
background-color: #ffffcc;
margin: 2 2 2 2px;
padding: 2 2 2 2px;
font-weight: bold;
}
#lateral a{
color: #3333cc;
text-decoration: none;
}
#principal{
margin-left: 170px;
background-color: #ffffff;
padding: 4 4 4 4px;
}
#pie{
background-color: #cccccc;
padding: 3 10 3 10px;
text-align:right;
}
La parte que vamos a remarcar es donde se define el estilo del lateral y la capa principal. El
lateral hacemos que tenga un tamao fijo de 160 pixel, pero lo ms importante es que hacemos
que "flote" a la izquierda con float:left;. Esto hace que el lateral se quede en la izquierda y
permite que el contenido insertado despus del lateral se coloque a la misma altura, pero a la
derecha.
Por su parte, para la capa principal, simplemente se indica que tiene un margen a la izquierda de
170 pxeles. Esto hace que se coloque al lado de la capa lateral, dejando un espacio en blanco de
10 pxeles. Tiene un margen de 170, de los que 160 son para el espacio que va a ocupar la capa
de los enlaces y 10 pxeles de espacio entre la capa principal y la lateral.
Como la capa principal no tiene definida su anchura, se har tan grande como lo permita el
contenedor.
Nota: Estas explicaciones no son completas de todo el ejercicio. Se supone que el lector ya tiene
asimilados algunos conceptos que se han explicado en el Manual de CSS o en el Taller de CSS.
Podemos ver el ejemplo en marcha en una pgina aparte. Como es un archivo HTML, podemos
ver el cdigo fuente para ver cmo queda el conjunto de maquetacin y declaracin de estilos
completo.
Maquetar con los enlaces a la derecha
Continuamos mostrando los cambios que habra que hacer para maquetar la pgina con la
columna de enlaces a la derecha. Simplemente vamos a cambiar el cdigo CSS de las capas
lateral y principal.
#lateral{
width: 160px;
background-color: #999999;
float:right;
}
#principal{
background-color: #ffffff;
padding: 4 4 4 4px;
margin-right: 170px;
}
Ahora la capa lateral estamos indicando que flote a la derecha. Por su parte, en la capa principal
hemos cambiado el margen que haba antes hacia la izquierda para ponerlo en la parte de la
derecha.
Podemos ver el ejemplo en una pgina aparte.
Diseo fluido
Hasta aqu en este artculo hemos visto cmo hacer un diseo con una anchura fija. Si queremos
un diseo fluido (que se ajusta a la anchura de la ventana del navegador), bastara con quitarle
al contenedor el atributo width: 770px;. Si no tiene definida una anchura, la capa contenedor se
ajustar al tamao de la ventana del navegador que tenga el visitante.
Adems, tendremos que darle un margen al BODY, para que el contenedor no se acople por
completo al borde de la ventana. Por ejemplo, podemos darle un margen de 10 pxeles a cada
lado.
Tendramos ahora esta declaracin de estilos para el BODY y la capa "contenedor":
BODY {
font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10 10 10 10px;
text-align: center;
background-color: #ebebeb;
}
#contenedor{
text-align: left;
margin: auto;
}
Continuando nuestros talleres de CSS, vamos a ver ahora como hacer una estructura de tres
columnas para una pgina web. Esta es una estructura bastante tpica de portal. En una de las
columnas se suele situar la barra de navegacin, en otra el contenido y en la ltima una serie de
banners con promociones.
Sera bueno ver el resultado que buscamos en una pgina aparte.
Este artculo va a presuponer que el lector comprende ya la maquetacin con CSS y que ha ledo
el artculoMaquetacin CSS a dos columnas. Nos basaremos en ese artculo para componer la
pgina con CSS a tres columnas.
En lneas generales, la posibilidad que vamos a explorar a continuacin para maquetar una web
con tres columnas, consiste en lo siguiente: Pondremos la columna de la izquierda flotando a la
izquierda, la columna de la derecha flotando a la derecha y por ltimo pondremos la parte
principal, que aparecer en el centro de la pgina.
El cdigo HTML para hacer este ejemplo ser el siguiente:
<div id="contenedor">
<div id="cabecera">
Cabecera 01
</div>
<div id="cuerpo">
<div id="lateral">
<ul>
<li><a href="#">Enlace 1</a>
<li><a href="#">Vnculo 2</a>
<li><a href="#">Otro enlace</a>
<li><a href="#">Link chulo</a>
<li><a href="#">Ms enlaces</a>
<li><a href="#">Otro ltimo</a>
</ul>
</div>
<div id="otrolado">
<img src="bannerlateral.gif" width="120" height="600" alt="">
</div>
<div id="principal">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla
condimentum commodo orci. Nulla eget purus nec massa
...
</div>
</div>
<div id="pie">
2005 DesarrolloWeb.com
</div>
</div>
Vemos que la pgina contiene tres partes, la cabecera, el cuerpo y el pie. La cabecera y el pie se
colocarn en el documento ocupando todo el ancho disponible. La parte donde colocaremos las
tres columnas es el cuerpo.
Dentro del cuerpo, como podemos ver, tenemos tres capas. La capa "lateral", que es la que
hemos pensado colocar a la izquierda. Luego est la capa "otrolado", que es la que planeamos
colocar a la derecha. Por ltimo est la capa "principal", que es la parte central. La capa
"principal" aparecer en el centro, porque a los dos lados estarn ocupados por las capas
laterales.
El CSS que vamos a utilizar para maquetar esto ser el siguiente. Se parece mucho al ejemplo
de maquetacin CSS a dos columnas. Luego lo comentaremos.
BODY {
font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10 0 10 0px;
text-align: center;
background-color: #ebebeb;
}
#contenedor{
text-align: left;
width: 770px;
margin: auto;
}
#cabecera{
background-color: #d0d0ff;
color: #333300;
font-size:12pt;
font-weight: bold;
padding: 3 3 3 10px;
}
#cuerpo{
margin: 10 0 10 0px;
}
#lateral{
width: 160px;
background-color: #999999;
float:left;
}
#lateral ul{
margin : 0 0 0 0px;
padding: 0 0 0 0px;
list-style: none;
}
#lateral li{
background-color: #ffffcc;
margin: 2 2 2 2px;
padding: 2 2 2 2px;
font-weight: bold;
}
#lateral a{
color: #3333cc;
text-decoration: none;
}
#otrolado{
width: 120px;
float: right;
}
#principal{
margin-left: 170px;
background-color: #ffffff;
padding: 4 4 4 4px;
width: 460px;
}
#pie{
background-color: #cccccc;
padding: 3 10 3 10px;
text-align:right;
clear: both;
}
Tendremos un contenedor, de 770 pxeles (px) de ancho, que es donde vamos a colocar todas
las capas. Nos centramos en explicar la zona del cuerpo, que es donde aparecern las tres
columnas.
Vemos como la capa "lateral" tiene definido un ancho de 160 px, y un float: left; para que flote a
la izquierda. Vemos luego como la capa "otrolado" tiene 120 px de ancho y flota a la derecha.
Luego vemos la capa "principal", que tiene un margen a la izquierda de 170 px, para dejar un
espacio con respecto a la capa "lateral". 170 px porque la capa "lateral" ocupa 160 px de ancho,
ms 10 px que es lo que realmente estamos poniendo de margen. En la capa "principal" tambin
hemos definido un ancho de 460 px, para que ocupe justo el espacio que queda en el centro.
Se puede ver el ejemplo en marcha en una pgina aparte.
Diseo fluido
Los diseos fluidos son los que se ajustan a la anchura que tengamos en la ventana del
navegador. En el anterior ejemplo el diseo tena una anchura fija de 700 pxeles y ahora vamos
a hacer un par de modificaciones para que el diseo se ajuste a la ventana del navegador.
Simplemente tendremos que quitar la definicin de anchura de la capa "contenedor".
#contenedor{
text-align: left;
margin: auto;
}
Luego, tambin quitaremos la definicin de anchura de la capa "principal" y aadiremos el
atributo margin-right: 130px; para que la capa con el contenido central tenga un margen con
respecto a la capa que queda a la derecha. 130 px porque la capa de la derecha ocupaba 120
px, ms 10 px que es realmente el margen que estamos dejando.
#principal{
margin-left: 170px;
background-color: #ffffff;
padding: 4 4 4 4px;
margin-right: 130px;
}
Ya vimos en un artculo anterior una manera de realizar una maquetacin con CSS a tres
columnas. Ahora vamos a realizar unos cambios sencillos para mejorar algo el cdigo del
anterior artculo.
Antes que nada habra que explicar por qu estimamos que puede mejorarse el ejercicio de
maquetacin a tres columnas, tal y como fue planteado anteriormente. Se trata simplemente de
mejorar la organizacin del contenido de la pgina de una manera ms inteligente.
A mi me gusta siempre ver el aspecto que tiene una pgina web sin la hoja de estilo en cascada,
para ver si la informacin tiene sentido y orden tal y como se ha colocado en el cdigo HTML. Es
decir, si est presentada de una forma adecuada, aunque no se estn visualizando los estilos
definidos en el CSS.
Cualquier navegador que no tenga soporte a CSS mostrar la pgina sin ningn estilo y todos los
elementos aparecern uno detrs de otro segn se hayan colocado. No es habitual que nos visite
una persona que tenga un navegador incompatible con hojas de estilo en cascada, pero para
mejorar la accesibilidad de las pginas, tambin conviene que se lean bien, aunque no se tenga
acceso a CSS.
As se vera la maquetacin CSS a tres columnas sin la declaracin de estilos que
habamos presentado en el anterior ejemplo. Si pulsamos el enlace podremos comprobar que
aparece el banner vertical en la parte superior de la pgina, cuando lo interesante sera que
apareciera debajo del contenido, por lo menos en mi opinin.
Variacin al ejercicio anterior para maquetar a tres columnas
Bsicamente vamos a hacer una maquetacin a dos columnas, la izquierda, con la barra de
navegacin y la de la derecha, con el otro contenido. En la parte de la derecha, a su vez,
haremos dos columnas ms, una a la izquierda que tendr el texto de la pgina y otra a la
derecha, con la barra lateral derecha.
En realidad, el ejercicio queda muy similar. Veamos el cdigo HTML:
<div id="contenedor">
<div id="cabecera">
Cabecera 01
</div>
<div id="cuerpo">
<div id="lateral">
<ul>
<li><a href="#">Enlace 1</a>
<li><a href="#">Vnculo 2</a>
<li><a href="#">Otro enlace</a>
</div>
<div id="otrolado">
<img src="bannerlateral.gif" width="120" height="600" alt="">
</div>
</div>
</div>
<div id="pie">
2005 DesarrolloWeb.com
</div>
</div>
La capa "derecha" es la que hemos creado nueva, donde colocamos tanto el texto principal como
la capa del banner vertical.
El cdigo CSS que hemos variado slo afecta a la capa "derecha", que no estaba creada
anteriormente y a la capa "principal", que es donde est el texto central.
#derecha{
margin: 0 0 0 170px;
}
#principal{
background-color: #ffffff;
padding: 4 4 4 4px;
width: 460px;
float: left;
}
La capa "derecha" tiene un margen de 170 pixels, para dejar espacio a la barra de enlaces de la
izquierda. La capa "principal", que antes tena ese margen de 170 pxeles, ya no lo necesita,
pero en cambio s que hemos puesto el atributo float: left, para que se flote en la parte de la
izquierda.
En definitiva, es una maquetacin a dos columnas, en las que una de las columnas tiene a su
vez otra maquetacin en dos columnas.
Se puede ver el ejemplo en marcha en una pgina aparte. El cdigo fuente del ejemplo entero
no lo vamos a escribir. Pero se puede analizar tanto el HTML como el CSS a travs de la opcin
"ver cdigo fuente" del navegador.
La maquetacin con mapas de Google, que creamos con el API de Google Maps, es muy sencilla,
ya que el mapa ocupa el espacio disponible en la capa donde est contenido. As pues, al
incorporar un mapa a una pgina web, no tenemos que especificar el tamao del mapa por
Javascript ni nada parecido, simplemente el mapa de Google tomar el los atributos de ancho y
alto de la capa (el <div> ) donde est contenido. Esto es dinmico, es decir, si cambia el espacio
disponible de la capa donde est el mapa -ya sea porque el usuario ha cambiado el tamao de la
ventana o porque se han alterando los atributos width y height de la capa con Javascript o por
cualquier modo- cambiar automticamente el tamao del mapa para ajustarse dinmicamente
al espacio disponible.
Dicho esto, puede resultar poco revelador este artculo, porque no vamos a ver nada de
Javascript ni de creacin de mapas de Google, sino que vamos a mostrar como maquetar con
CSS, teniendo en cuenta que en una de las capas hay un mapa de Google. No obstante, seguro
que algunas de las informaciones proporcionadas aqu no van a ser triviales para los lectores.
En DesarrolloWeb.com ofrecemos un manual en el que puedes aprender a trabajar con el API de
Google Maps.
Tambin recomiendo la lectura del material que ofrecemos en DesarrolloWeb.com sobre
la maquetacin CSS, pues voy a dar por sabidos los aspectos sobre maquetacin con hojas de
estilos y por tanto, no los voy a explicar.
Los atributos de altura y anchura de un mapa son la capa que lo contiene
El ejemplo ms sencillo que podemos encontrarnos para maquetar un mapa de google es que
tenga dimensiones en ancho y alto fijas. Es como hemos colocado los mapas en el manual hasta
este momento:
Este mapa ocupara todo el rea disponible de la ventana del navegador, o bien de la capa donde
estuviera contenido.
El ejemplo se complica si queremos que el mapa de Google ocupe adems todo el alto disponible
en el navegador, que tambin, sabemos, puede ser variable dependiendo de las caractersticas
de pantalla o del estado de la ventana del browser. Lo normal es que probsemos algo como
esto:
Ahora veamos el ejemplo de un mapa de Google Maps que ocupa todo el ancho y alto del
espacio en una pgina aparte.
Maquetar un mapa de Google con width y height 100%, pero mezclado con otros
elementos
Para acabar veamos un ejemplo de maquetacin de un Google Maps que ocupa el 100% del
espacio, pero que tiene una cabecera y una barra lateral. La cabecera y el lateral ocupan unos
espacios fijos y el mapa de google ocupar todo el sitio que dejan libre otros elementos de la
maquetacin.
Para explicarlo lo ms sencillo es ver directamente el ejemplo en una pgina aparte.
El ejercicio es simple, pero necesitaremos conocimientos de CSS sobre maquetacin y
posicionamiento. El cdigo es el siguiente:
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(33,0),3);
map.addControl(new GLargeMapControl());
map.setMapType(G_NORMAL_MAP);
}
}
window.onload=load
//]]>
</script>
<style type="text/css">
html,body{
margin:0px;
height:100%;
}
</style>
</head>
<body>
<div id="contenedor" style="width:100%; height:100%;">
<div id="cabecera" style="background-color: #ffcc99; font-weight:bold; fontsize: 110%; height: 23px; padding: 3px; margin-bottom:10px;">Esto es la
cabecera!!</div>
<div id="lateral" style="float:right; width:200px; height:100%; backgroundcolor:#eeff99;">
<div id="contenidolateral" style="padding: 30px 10px 0 10px;">
Por <a href="http://www.guiarte.com">guiarte.com</a>
<br />
<br />
Esto son contenidos que colocamos en el lateral izquierdo. Resulta muy
fcil maquetar con un mapa de Google en una capa que toma el tamao del
contendor donde se encuentra.
</div>
</div>
<div id="map" style="height: 100%; margin-right:210px;"></div>
</div>
</body>
</html>
Vamos a realizar una serie de artculos sobre la maquetacin de pginas web con 960 Grid
System, que nos permitir implementar nuestros diseos de webs ms fcilmente. 960 Grid
System es un framework CSS, que no es ms que una declaracin de estilos que dispone las
clases necesarias para implementar columnas en una pgina web, de diversos tamaos, con las
que maquetar nuestros contenidos fcil y ordenadamente.
Nosotros mismos podramos hacer un sistema propio para maquetar una pgina con diversas
columnas, como hemos visto en diversos artculos del Taller de CSS, pero utilizando un
framework como 960 Grid ya tendremos la mayor parte del trabajo realizado, pues simplemente
tendremos que colocar a cada contenedor de elementos las clases disponibles en el sistema,
para que tenga la anchura y posicin deseadas.
Utilizar un framework CSS no aporta nada de creatividad para realizar un diseo bonito, pero
nos permite anclar contenidos en la pgina de una manera sencilla. Nosotros, por tanto,
seremos los que nos encargaremos de disear una pgina web que tenga un aspecto agradable,
pero podremos partir de una estructura en columnas, donde ceir los espacios para que quede
todo bien colocado. Con la prctica notaris que, saber de antemano los espacios disponibles
para las columnas del diseo de nuestra web, resulta bastante til a la hora de disear con algn
programa como Photoshop, tal como podris ver en el siguiente vdeo del diseo de una web con
Photoshop.
960 Grid System lleva este nombre porque es un sistema de rejilla para hacer pginas con 960
pxeles de ancho. Las columnas que podremos colocar en la rejilla tendrn distintas anchuras,
pero siempre el ancho total de la pgina ser de 960 pxeles. Se ha elegido este valor porque
960 es divisible por una buena cantidad de nmeros, lo que lo hace ms verstil para poder
alcanzar pginas resultantes de la ms variada gama.
En la propia pgina de inicio de 960 Grid System se puede acceder a la descarga del Framework
y a algunas explicaciones sobre su uso, as como a ejemplos de pginas que lo utilizan para la
maquetacin CSS y a un demo interesante para poder ver el tipo de columnas que se pueden
conseguir, sus anchuras, etc.
http://960.gs
elementos. La variante de 12 columnas da menos posibilidades para repartir los espacios, pero
en muchos de los casos ser ms que suficiente para crear cualquier estructura de pgina. En
cuanto a la variante de 16 columnas, da una gama mayor de posibles anchos para las columnas,
que puede ser necesaria en diseos con un nivel de detalle ms alto.
En ambas variantes las columnas que se consiguen tienen un margen a cada lado de 10 pxeles,
por lo que si colocamos dos columnas, una al lado de otra, entre los mrgenes de las dos a la
vez, obtendremos una separacin de 20 pxeles entre ellas.
40px
100px
160px
220px
280px
340px
400px
460px
520px
10:
11:
12:
13:
14:
15:
16:
580px
640px
700px
760px
820px
880px
940px
As pues, con este sistema podramos maquetar hasta 16 columnas de 40 pxeles cada una, o
cualquier combinacin que deseemos, siempre que la anchura ms los mrgenes de los
elementos sea de 960 pxeles.
Nota: Si te ha interesado este tema y quieres investigar sobre otras posibilidades para la maquetacin CSS,
puedes encontrar tambin en DesarrolloWeb.com un Manual del Framework CSS Blueprint.
En los archivos para descarga del framework encontraremos un demo que nos puede dar una
idea exacta de los tamaos de las cajas y las posibilidades de maquetacin. Tambin podemos
ver el demo en la URL:http://960.gs/demo.html
En definitiva, con 960 Grid tenemos bastante versatilidad para hacer nuestras maquetaciones.
Todava tenemos que explicar cmo utilizar el framework, lo que dejaremos para siguientes
artculos, pero al menos podemos hacernos una idea de las posibilidades.
Qu es un Framework CSS
Quizs convendra definir qu se conoce como framework CSS. Pues simplemente se trata de
una serie de declaraciones de estilos definidos de forma estndar para que sirvan como base
para el diseo de todo tipo de webs. Por decirlo de otra manera, es un poco de cdigo CSS que
se podra considerar til para desarrollar cualquier tipo de web y que se pone a disposicin para
solucionar diversos problemas o situaciones, comunes en el desarrollo de webs.
Cada framework CSS, aunque quizs deberamos llamarles simplemente "Libreras CSS", tiene
su propia filosofa a la hora de crear el cdigo para solucionar esos problemas. Algunas veces las
formas de actuar son similares y otras veces distintas, por ello el uso o no de los frameworks
CSS, as como la eleccin del mismo es una decisin muy particular de cada programador o
desarrollador web.
Existe adems una discusin sobre si es o no conveniente el uso de Frameworks CSS, pero es un
asunto donde no vamos a entrar en este artculo. Simplemente queremos contaros cmo
funciona Blueprint y cada persona podr elegir o no usarlo.
Caractersticas de Blueprint
El framework CSS Blueprint est creado sobre una slida base de cdigo CSS que ayudar a
desarrollar el diseo y maquetacin de sitios web. Entre las cosas que nos aporta podemos
destacar:
Una rejilla, que nos permitir crear cualquier estructura de pgina web. Bsicamente se
trata de un conjunto de clases CSS para posicionar cualquier elemento en un espacio de
950 pxeles de anchura, dividido en 24 columnas.
Estilos para formularios, con los que mejorar las interfaces de usuario.
Estilos para impresin, con las definiciones CSS ms tiles para que las pginas se
lean bien cuando se imprimen en papel.
Estilos especficos para IE, con los que resolver algunos de los problemas ms
comunes de Internet Explorer.
Con todo esto conseguimos una base con la que comenzar fcilmente a hacer pginas web
complejas y que sern ms compatibles en distintos navegadores. Adems, Blueprint se
completa con algunos plugins creados por terceras personas que sirven para hacer cosas ms
avanzadas o diferentes. Por ejemplo hay plugins para conseguir iconos, para hacer pginas
fluidas (que se adaptan a la anchura de la ventana del navegador), etc.
Para comenzar a usar Blueprint tenemos que acceder a su pgina web y descargarlo, a travs de
su pgina web:
http://www.blueprintcss.org/
En los siguientes artculos del Manual de Blueprint te explicaremos todo lo que tienes que
conocer para comenzar con buen pie y que te sea muy sencillo adaptarte al framework CSS.
http://www.desarrolloweb.com/manuales/maquetacion-css.html