Manual Maquetacion Css PDF

Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

Manual de Maquetacin CSS
Manual en el que ensearemos a maquetar pginas web utilizando nicamente CSS, en lugar de
tablas, lo que tambin se conoce como Maquetacin Tableless.
Autores del manual
Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:
Miguel Angel Alvarez
Director de DesarrolloWeb.com y EscuelaIT
http://www.desarrolloweb.com
(1 cap!tulos"
Serviweb
Dise#o web $urcia
http://www.ser%iweb.es/
(1 cap!tulo"
Manual de Maquetacin CSS: www.desarrolloweb.com/manuales/maquetacion-
css.html
& 'os manuales de DesarrolloWeb.com tienen el copyright de sus autores. (o reproducir sin autorizaci)n.
1
Introduccin a la maquetacin con CSS
a maquetacin con CSS es !undamental a la "ora de obtener unos resultados de calidad en el diseo de
tu pgina web # te simpli!icar la $ida, no slo al crear la web, sino tambin a la "ora de mantenerla.
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 aorrndote mucos que!raderos de ca!e"a y enfocando tus esfuer"os en la #a correcta, que te permitir crecer y
e#olucionar como dise$ador %e! y desarrollador en general. &uedes incluso aorrarte la lectura de este artculo y pasar
directamente a otros temas ms a#an"ados del manual de 'aquetacin CSS de (esarrollo)e!.com.
Si respondiste que la maquetacin CSS no forma parte de tus t*cnicas a!ituales, o si piensas que no la necesitas, ests
en el lugar correcto, donde intentaremos acerte cam!iar de idea y so!re todo, ense$arte a acer las cosas tal como
dicen los estndares, que a la postre compro!ars que es la manera ms sencilla y ms potente.
En (esarrollo)e!.com tenemos di#ersos artculos ya pu!licados so!re la maquetacin %e! y seg+n escri!imos estas
lneas, los estamos agrupando todos en el 'anual de 'aquetacin CSS. Estamos creando este artculo como una mera
introduccin al mundo de la maquetacin %e! !asada en estndares, con CSS, o si lo preferimos, el dise$o %e! sin
ta!las, o ,ta!leless,, como se conoce en ingl*s.
Qu haba antes de la maquetacin CSS
-ntes de la llegada de CSS disponamos +nicamente del ./'L, que tena m+ltiples carencias a la ora de posicionar
elementos en la pgina, porque cuando fue creado no se espera!a que la %e! se con#irtiera en un multi0medio, donde
los profesionales aportaran caudales de creati#idad y dise$os capricosos. ./'L en principio +nicamente permita
organi"ar el te1to en prrafos, acompa$ado de enlaces, listas, imgenes, ta!las y poco ms.
Como slo a!a ./'L, los dise$adores utili"aron el +nico recurso que tenan a mano para posicionar elementos en la
pgina2 las ta!las, que esta!an pensadas para presentar informacin ta!ulada 3en celdas formadas por filas y columnas4,
pero no para maquetar una %e! entera. -nidando ta!las 3colocando unas ta!las dentro de otras4 y con el recurso de
imgenes de un p1el transparente, se poda o!tener una estructura de dise$o para luego llenarla con los contenidos que
se desease.
Las ta!las solucionaron por un !uen tiempo las necesidades de los dise$adores de %e!s, pero tenan di#ersos
pro!lemas, aparte de no facilitar muco la estructura de sitios con un dise$o comple5o.
El contenido se me"cla con las reglas de presentacin o formato. Lo que ace que el cdigo de tu pgina %e!
sea innecesariamente grande y ello deri#a en pginas ms pesadas. -l final, con ta!las tenemos una %e! ms
lenta y la transferencia de datos de nuestro ser#idor tam!i*n aumenta, con lo que tu ser#idor podra atender a
menos usuarios al mismo tiempo y te saldr ms caro de mantener.
El redise$o de una %e! se ace muco ms complicado, porque para cam!iar la forma con la que se #e tu
pgina tendrs que actuali"ar todo el cdigo. Si maquetas utili"ando CSS slo tendrs que cam!iar el cdigo
CSS para que el aspecto de tu pgina sea tan distinto como desees.
/u pgina tendr pro!lemas serios al #erse en otros dispositi#os, como &alms o tel*fonos m#iles, que tienen
pantallas menores.
/endrs que remar contra corriente para intentar que tu pgina se #ea como quieres, porque ests utili"ando
unas erramientas, las ta!las, que no te ofrecen las posi!ilidades necesarias para maquetar a #oluntad. /endrs
que aprender mil truqillos para saltarte las limitaciones de las ta!las y a medida que los apliques, tu cdigo se
ar ms y ms pesado, menos entendi!le y su mantenimiento ser cada da ms complicado.
Por qu maquetar con CSS
Cuando apareci CSS tu#imos que aprender un lengua5e nue#o, lo que siempre es, al menos, un poco pesado. &ero es
que los na#egadores al principio tampoco lo soporta!an completamente y lo peor de todo, no sa!amos cmo utili"arlo
css.html
2
para li!rarnos de las ta!las, o incluso no sa!amos que CSS nos i!a a ser#ir para eso. En definiti#a, que durante un !uen
tiempo esta!a la solucin a todos los pro!lemas 3las o5as de estilo en cascada2 CSS4 delante de nosotros, pero ya sea
por pere"a, por falta de soporte de los !ro%sers, o porque no sa!amos cmo #alernos de ese nue#o lengua5e, mucos de
nosotros retrasamos todo lo posi!le la incorporacin de esta nue#a erramienta para maquetar toda una %e!.
-fortunadamente, todas las ra"ones por las que podamos estar de5ando de maquetar una %e! con CSS an pasado a la
istoria. Los na#egadores las soportan por completo y e1iste una e1tensa documentacin so!re la maquetacin con
o5as de estilo en cascada, que podemos leer en (esarrollo)e!.com y en otros mucos sitios, aparte de infinidad de
li!ros. So!re la pere"a, estoy seguro que la opinin de mucos %e!masters en artculos como este y la e#olucin de
sitios %e! de referencia, an eco que poco a poco nos aya resultado menos pesado empe"ar a tra!a5ar
intensi#amente con CSS.
&or otra parte, la profesionali"acin de los dise$adores de %e!s y la competencia, ace necesario que, las personas que
nos pretendemos dedicar a tra!a5ar en este mundo del desarrollo, tengamos que aumentar la calidad de nuestro tra!a5o,
as como me5orar la producti#idad y la facilidad de mantenimiento. 6ncluso si no pretendemos con#ertirnos en
dise$adores profesionales y tan slo queremos tener una %e! !onita y prctica, las CSS sern nuestro me5or aliado.
7 todo esto por qu*? Slo porque con CSS se separa el contenido del aspecto o presentacin?
Entiendo que mucas personas no encuentren de entrada #enta5as en separar el contenido de la presentacin. 7o mismo
tard* !astante en entender cmo esta prctica i!a a ayudar en mi tra!a5o, pero os comentar* un par de casos de mi
e1periencia2
.ace ya !astantes a$os, (esarrollo)e!.com esta!a alo5ado en un ser#icio de osting donde me co!ra!an un e1tra por la
transferencia. Es decir, tena contratado con el ser#idor un plan de alo5amiento 3que por aquel entonces era el plano
mayor que e1ista en ese alo5ador4, que me asigna!a una tasa de transferencia mensual que siempre aca!a!a superando.
Entonces la empresa de osting me pasa!a una factura mensual por el e1tra de transferencia que a!a consumido el
sitio. -ora ya no recuerdo !ien las tasas de transferencia que esta!an contratadas y las que utili"!amos, pero lo que s
recuerdo fue que icimos un cam!io rpido a CSS 3por aquel entonces no utili"a!a las o5as de estilo para nada en la
pgina4, de manera que el estilo qued separado 3en !uena parte4 del contenido de la %e! y no se repetan infinidad de
#eces etiquetas del estilo de 89:/, ta!las con estilos repetiti#os, etc. /odo eso i"o que el peso de cada pgina se
redu5era !astante y tam!i*n la transferencia del ser#idor y recuerdo me aorr* alrededor de ;<.<<< de las antiguas
pesetas 3unos =;< euros4 al mes en factura por el e1tra de transferencia. .e de reconocer que en esta actuali"acin ni
siquiera nos li!ramos de las ta!las, pero fue un primer paso en la adecuacin del sitio a las CSS, oy s* que si
u!i*ramos suprimido las ta!las toda#a a!ra aorrado ms dinero.
9s cuento otro caso representati#o, que ocurri con otro sitio %e! que reali"amos tam!i*n nosotros2 >uiarte.com, que
esta!a dise$ado con ta!las y lle#amos unos ? a$os en redise$arlo con maquetacin CSS, desde que me nos lo
propusimos asta que lo terminamos. 7a s*, es #ergon"oso, pero por falta de tiempo ocurri as. El redise$o, de ta!las a
maquetacin CSS, se i"o a la #e" que un cam!io de tecnologa de ser#idor y a!a que reacer el sitio por completo.
&ero sir#a de prue!a que en el +ltimo a$o se redise$ otra #e" y slo tu#o que inter#enir una persona de nuestro equipo
durante un par de semanas para conseguirlo.
@no de los sitios %e! que ms me impactaron a la ora de entender cmo CSS podra ayudar en la maquetacin de
%e!s, fue el CSS Aend >arden, en el que podemos #er una %e! a la que se le cam!ia el dise$o radicalmente, slo
alterando la o5a de estilo en cascada. &odemos acceder a ese sitio y #er el dise$o principal, pero adems, en la !arra de
la dereca, encontrars un listado de alternati#as de aspecto creadas por otras personas que resultan sin duda
impactantes, por lo muco que cam!ian con respecto a dise$o original con slo alterar el arci#o CSS con los estilos.
Sin duda, una demostracin como la de CSS Aend >arden es realmente ilustradora so!re las posi!ilidades que
tendremos a nuestro alcance, si maquetamos +nicamente con o5as de estilos.
So!re las #enta5as de maquetar con CSS frente a la maquetacin con ta!las ya emos a!lado en otros artculos en
(esarrollo)e!.com, por lo que no #oy a repetir de nue#o las mismas ideas. En este artculo e querido a!lar so!re las
des#enta5as de las ta!las y compartir con #osotros algunas de mis e1periencias, con intencin de moti#ar a las personas
en el aprendi"a5e de la maquetacin CSS.
-s pues, espero que os anim*is a leer este manual de 'aquetacin CSS, donde aprender*is di#ersas t*cnicas con las
que empe"ar a utili"ar posicionamiento CSS en lugar de las poco recomenda!les ta!las.
css.html
3
@na #e" adquiridos unos conocimientos !sicos, con la lectura de los siguientes artculos, os sugiero completar las
e1plicaciones y de paso aprender un poco so!re las prcticas a!ituales so!re maquetacin CSS en los #deos2
Bideotutorial de introduccin a la maquetacin con CSS y en el Bdeo &rctico de 'aquetacin CSS.
9s sugiero tam!i*n de paso otro manual interesante que tam!i*n trata so!re la maquetacin de %e!s con CSS, que tiene
adems una serie de #deos donde podr*is #er las t*cnicas que utili"amos de primera mano2 'aquetacin CSS con CD<
>rid System .
Artculo por Miguel Angel Alvarez
Por qu disear con CSS
Mostramos algunas $enta%as al maquetar con CSS respecto a otras !ormas de "acerlo.
Las ta!las e1isten y e1istieron desde el comien"o en ./'L, pero no se crearon para dise$ar un sitio, sino para la
presentacin de datos ta!ulares. La utili"acin del !orderE< y las imgenes transparentes icieron posi!le crear una
re5illa que permiti a los dise$adores organi"ar te1tos e imgenes, esta!lecer tama$os y u!icar o!5etos. &ero *sto es
sencillamente incorrecto. Las ta!las no se crearon para maquetar y no de!en utili"arse para eso, porque de esta forma se
me"clan presentacin y contenido.
La solucin es clara2 CSSF./'LGH./'L. -fortunadamente, cada #e" son ms las empresas que deciden de5ar atrs
las tediosas ta!las y e#olucionar desarrollando sus sitios respetando los estndares esta!lecidos por la )IC
3organi"acin internacional que desde ace unos =; a$os se dedica al desarrollo de pautas y estndares %e!4, lo que
facilita la accesi!ilidad y la correcta #isuali"acin de las pginas en los na#egadores que respeten dicos estndares.
-lgunas de las #enta5as de la maquetacin con CSS2
Separacin de forma y contenido. >eneralmente CSS y ./'L se encuentran en arci#os separados, lo que
facilita el tra!a5o en equipo porque dise$ador y programador pueden tra!a5ar independientemente. &or otro
lado, permite el acceso a distintos na#egadores y dispositi#os.
/rfico en el ser#idor. Las pginas pueden reducir su tama$o entre un ?<J y un D<J, y los na#egadores
guardan la o5a de estilos en la cac*, *sto reduce los costos de en#o de informacin.
/iempos de carga. &or la gran reduccin en el peso de las pginas, me5ora la e1periencia del usuario, que
#alora de un sitio el menor tiempo en la descarga.
&recisin. La utili"acin de CSS permite un control muco mayor so!re el dise$o, especificando e1actamente
la u!icacin y tama$o de los elementos en la pgina. /am!i*n se pueden emplear medidas relati#as o #aria!les
para que la pantalla o la ca5a contenedora se acomode a su contenido.
'antenimiento. Keduce nota!lemente el tiempo de mantenimiento cuando es necesario introducir un cam!io
porque se modifica un solo arci#o, el de la presentacin, sin tener que tocar las pginas que contienen la
estructura con el contenido.
(ise$o unificado y fle1i!ilidad. Es posi!le cam!iar completa o parcialmente el aspecto de un sitio con slo
modificar la o5a de estilos. &or otro lado, el tener el estilo de una %e! en un solo arci#o permite mantener la
misma apariencia en todas las pginas.
&osicionamiento. Las pginas dise$adas con CSS tienen un cdigo ms limpio porque no lle#an dise$o, slo
contenido. Esto es semnticamente ms correcto y la pgina aparecer me5or posicionada en los !uscadores.
>oogle na#ega o!#iando el dise$o.
Kecomiendo un sitio simptico y didctico so!re el tema2 ttp2GG%%%.otdesign.comGsey!oldGspanisG
Artculo por Serviweb
css.html
4
Maquetar una !"gina con CSS
Tutorial para maquetar una pgina web utilizando CSS en lugar de tablas.
Bamos a reali"ar un e5ercicio de maquetacin de una pgina %e! utili"ando +nicamente o5as de estilo en cascada
3CSS4, separando completamente el contenido del arci#o ./'L de las definiciones del aspecto, que se guardarn en
un arci#o .css. El e5ercicio lo reali"aremos paso a paso, partiendo de una imagen dise$ada pre#iamente con un
programa de edicin grfica como &otosop.
Referencia: /enemos un manual para aprender CSS en (esarrollo)e!.com, donde adems se e1plican las
primeras nociones y conceptos que ay que conocer so!re la maquetacin.
Imgenes de partida
&odemos #er la imagen que emos creado y que #amos a intentar maquetar lo ms parecido posi!le. :o es el o!5eti#o
de este manual ofrecer las t*cnicas para reali"ar esta imagen, aunque en otros manuales de (esarrollo)e!.com
podemos #er tutoriales para aprender algunos de los trucos de dise$o utili"ados.
Se trata de un dise$o sencillo, pero en el que se encuentran elementos distintos y #ariados con los que tra!a5ar.
(e esta imagen emos e1trado algunos grficos, que utili"aremos a la ora de maquetar el dise$o. Sera interesante
descargarlo para poder reali"ar el e5ercicio por #uestra cuenta.
&ara los impacientes, tenemos un enlace a la pgina resultado que #amos a conseguir reali"ar al final del artculo. &uede
ser !ueno #erla para acerse una idea de donde queremos llegar.
Desarrollo de la pgina y la hoja de estilos
Bamos a generar los arci#os ./'L y CSS a la #e", pero paso a paso, de modo que podamos e1plicar las etiquetas y
estilos que emos utili"ado para cada parte de la pgina.
Como primer paso, en la ca!ecera LeadM del documento ./'L, enla"aremos con una o5a de estilos e1terna.
<head>
<title>La web del invierno</title>
<link rel="STYLESHEET" type="text/css" hre="estilo!css">
</head>
El cuerpo de la pgina <body>
En la declaracin de estilos CSS, para el cuerpo de la pgina, emos definido una imagen de fondo ,fondo.gif,, que se
repetir por toda la pgina en un mosaico. /am!i*n se definen unos mrgenes y el alineamiento del te1to, en este caso
centrado, para que el contenido de la pgina apare"ca en el centro 3esto es necesario para 6nternet E1plorer, el centrado
en 'o"illa y otros na#egadores se reali"a en la capa principal con el atri!uto ,margin, definido como ,auto,4.
-dems se definen otros atri!utos para el cuerpo de la pgina, que luego eredarn otros elementos, como el tipo de
letra o el color del te1to.
"#$Y %
back&ro'nd ( )*+$,$, 'rl-i.a&es/ondo!&i/ repeat0
ont ( 1pt 2erdana3 4eneva3 5rial3 Helvetica3 sans6seri0
color ( )7777770
.ar&in ( 8+px +px 8+px +px0
text6ali&n( center0
9
css.html
5
La capa contenedor
>eneralmente, se utili"a una capa principal, a la que emos llamado contenedor. (entro de esta capa se colocan todos
los elementos que #a a tener la pgina.
<div id="contenedor">
</div>
En esta capa definimos el alineamiento del te1to a la i"quierda 3porque en el cuerpo a!amos centrado el te1to, para
que 6nternet E1plorer centre la capa contenedor y deseamos que la alineacin por defecto sea a i"quierda4. /am!i*n
definimos una ancura de N<<p1, un color de fondo !lanco y el margen, con el atri!uto ,margin,, lo definimos como
,auto,, para que 'o"illa y otros na#egadores centren la capa.
)contenedor%
text6ali&n( let0
width( :++px0
back&ro'nd6color ( )0
.ar&in( a'to0
9
&or cierto, nos emos de5ado deli!eradamente el !orde de la capa, que a!amos definido en el dise$o original. Se
podra a!er definido el atri!uto ,!order,, pero eso nos repercute negati#amente en la maquetacin en E1plorer.
Beremos ms adelante cmo colocarlo para que se #ea correctamente en todos los na#egadores.
Este e5ercicio lo #amos a #er en #arios pasos. En el siguiente !loque mostraremos cmo se maqueta la ca!ecera y la
!arra de na#egacin.
Maquetar una !"gina con CSS II
&'plicamos la creacin de la cabecera de la pgina, que se simpli!icar al m'imo para "acer el e%ercicio
ms !acil.
Continuamos el e5ercicio prctico para reali"ar la maquetacin de una pgina paso a paso con capas y o5as de estilo en
cascada. Se puede #er el artculo anterior de esta serie en 'aquetar una pgina con CSS.
La cabecera de la pgina
La imagen de la parte de arri!a de la pgina la #amos a colocar en un +nico arci#o grfico. Es lo ms cmodo para este
dise$o, pues la ca!ecera no tiene otro moti#o que decoracin.
<div id="cabecera"><i.& src="i.a&es/cabecera!;p&" width=":++" hei&ht="<+7" alt="La =eb del >nvierno"
border="+"></div>
Bemos que es una simple imagen, pero atencin, que tenemos que colocar el LGdi#M a continuacin de LimgM sin
ning+n espacio ni salto de lnea, porque si no, 6nternet E1plorer, nos introducir un peque$o mrgen de!a5o de la
imagen, que queremos e#itar.
Los atri!utos de estilo definidos para la ca!ecera son las dimensiones de la capa, que queremos que sean las mismas que
las de la imagen. -unque en este caso podramos a!ernos aorrado definir esos #alores porque son los que se tomaran
por defecto.
css.html
6
)cabecera%
hei&ht ( <+7px0
width( :++px0
9
La barra de navegacin
Bamos con la capa utili"ada para definir la !arra de na#egacin ori"ontal que ay de!a5o de la ca!ecera.
<div id="nave&ador">
<a hre=")" class="enlacenav">?ortada</a> @
<a hre=")" class="enlacenav">>nvierno</a> @
<a hre=")" class="enlacenav">$icie.bre a .arAo</a> @
<a hre=")" class="enlacenav">La chi.enea</a> @
<a hre=")" class="enlacenav">$eportes de invierno</a> @
<a hre=")" class="enlacenav">*ontacto</a>
</div>
Como se puede #er, simplemente emos definido una serie de enlaces dentro de una capa. .ay que fi5arse que adems
los enlaces tienen una clase, llamada ,enlacena#,, que utili"aremos para darle un estilo especfico a a estos enlaces,
independiente del definido por defecto en la pgina.
&or lo que respecta a la capa, se define un color y una imagen de fondo, unos mrgenes internos 3atri!uto padding4 y un
!orde, tanto para la parte de arri!a de la capa como para la de a!a5o.
)nave&ador%
back&ro'nd ( )BCBD*E 'rl-i.a&es/ondonav!&i/0
paddin& ( Epx <+px Cpx <+px0
border6top ( <px solid )cccccc0
border6botto. ( <px solid )cccccc0
9
&ara los estilos de los enlaces utili"amos una clase. &ara definir los estilos de cada uno de los estados de los enlaces
3#isitados, acti#os, no #isitados, etc4, se utili"an las pseudo0clases B6S6/E(, -C/6BE, 89C@S, L6:O 7 .9BEK.
Simplemente definimos el color de los enlaces, el mismo para todas las pseudo0clases, menos para .9BEK, que tiene
un color distinto. .9BEK es el estado del enlace cuando el puntero ratn est situado encima. En este caso, cuando el
ratn est* encima, cam!iar de color.
5!enlacenav3 5!enlacenav(2>S>TE$3 5!enlacenav(5*T>2E3 5!enlacenav(B#*FS3 5!enlacenav(L>GH%
color( )D,DE7"0
9
5!enlacenav(H#2EI%
color( )EB:$EE0
9
&odemos #er cmo queda el e5ercicio reali"ado asta el momento.
Maquetar una !"gina con CSS III
(ealizamos la maquetacin del rea del cuerpo, donde se mostrar el contenido de la pgina.
Este e5ercicio trata de maquetar una pgina utili"ando capas y css. La primera parte se puede #er en2 'aquetar una
pgina con CSS.
css.html
7
El cuerpo de la pgina
La parte de la pgina donde colocamos la informacin principal. Crearemos una capa independiente para el cuerpo y
colocaremos dentro el ttulo, el te1to y otros elementos que queramos situar. Los elementos los introducimos con las
etiquetas ./'L que de!eran tener en una pgina !sica. Luego, con CSS definiremos el estilo para el cuerpo y cada
una de las etiquetas que colocamos dentro.
<div id="c'erpo">
<h<>TJt'lo de la pK&ina</h<>
<p>
En este artJc'lo va.os a conocer la .aL'etaciMn de pa&inas 'tiliAando Ho;as de estilos en cascada
-*SS/! 2ere.os cM.o realiAar este tipo de .aL'etaciMn3 ;'nto con al&'nas venta;as e inconvenientes!
?ara .'chos serK todavJa 'n ca.po por explorar! 5'nL'e no va.os a entrar en &randes detalles3 va.os
a intentar dar a conocer la .aL'etaciMn con *SS para L'e c'brir la posible la&'na por parte del
lector! En capJt'los s'cesivos a.pliare.os la inor.aciMn y orecere.os t'toriales .Ks prKcticos!
</p>
<p>
*o.o se ha podido aprender en el Nan'al de *SS3 las ho;as de estilo en cascada ay'dan a separar el
contenido de la or.a3 es decir!!!
</p>
<div id="navaba;o">
<a hre=")">2olver</a> @
<a hre=")">?ortada</a> @
<a hre=")">Napa del sitio</a>
</div>
</div>
Bemos que el cuerpo tiene un ttulo, #arios prrafos y un di#, incluido dentro del propio cuerpo, con una segunda !arra
de enlaces que faciliten la na#egacin para las personas que lleguen al final del scroll #ertical de la pgina.
Los estilos del cuerpo definen la ancura, margen, margen interno, y un color de fondo. -dems, se define el atri!uto
,float2left, para acer que el cuerpo ,flote, a la i"quierda. El resultado es que la capa del cuerpo se coloque a la
i"quierda y el contenido escrito a continuacin se sit+e, rodeando a esta capa, a la dereca. 3El efecto es el mismo que si
asignamos en ./'L el atri!uto alignEleft en una imagen4
&ara posi!ilitar la disposicin en dos columnas que emos definido en el dise$o original, #amos a acer que la capa de
la i"querda 0el cuerpo0 ,flote, a la i"quierda. &osteriormente, la capa de la dereca que aun no emos colocado0el
lateral0, aremos que ,flote, a la dereca.
)c'erpo%
width(D1+px0
.ar&in6let( 1px0
paddin&( <8px +px <+px +px0
loat(let0
9
/am!i*n se define un estilo para cada algunas de las etiquetas que emos situado dentro del cuerpo2
H<%
ont6siAe( <8pt0
9
Los enca!e"ados de ni#el =, que tengan tama$o de letra =;pt.
)navaba;o%
ont6wei&ht ( bold0
9
&ara asignar una negrita en el di# de la parte inferior del cuerpo, que tiene enlaces para facilitar la na#egacin.
&odemos #er el e5ercicio tal como queda con los pasos reali"ados asta el momento.
css.html
8
Maquetar una !"gina con CSS I#
Creamos el lateral de la pgina, donde se muestran $arios recuadros con un buscador # acceso a otras
in!ormaciones.
En los pasos anteriores de este taller #imos cmo crear la ca!ecera y cuerpo de la pgina. -ora #amos a #er cmo
acer el lateral dereco de la pgina.
La capa lateral
En el lateral dereco situamos una nue#a capa, que ofrece acceso a ser#icios y otras informaciones.
<div id="lateral">
!!! contenido lateral!!!
</div>
El contenido que #amos a situar dentro de esta capa lo #eremos por partes, pues tiene !astantes detalles que destacar
tranquilamente. Los estilos son los siguientes2
)lateral%
width( 8++px0
back&ro'nd6color( )E"B8BE0
border6botto. ( <px solid )cccccc0
border6let ( <px solid )cccccc0
loat(ri&ht0
9
Se define una ancura, un color de fondo y !ordes de color gris claro en la parte lateral i"quierda y a!a5o, los otros dos
lados no tendrn !orde por estar en contacto con los !ordes de otros elementos.
-dems, con el atri!uto float2rigt, indicamos que este lateral de!e ,flotar, acia la dereca. -s, el cuerpo flota a la
i"quierda y el lateral a la dereca, con lo que conseguimos una disposicin en ; columnas.
Beremos a continuacin los elementos que #amos a colocar dentro de la capa lateral, en una especie de ca5as
independientes. -unque, antes de #er esas ca5as una a una, merece la pena conocer en lneas generales cmo #an a
crearse. Cada ca5a tendr este cdigo ./'L, compuesto por un titulo y un contenido de la ca5a2
<h8 class="titlat">Tit'lo de la ca;a</h8>
<div id="id'nico" class="c'erpolateral">
*ontenido de la ca;a
</div>
El ttulo lo incluimos con una etiqueta L;M y la parte de la ca5a con el contenido, se define con un di#. Cada uno de
estos elementos tiene una clase, que se aplicar a los mismos elementos en cada una de las ca5as, de modo que todos los
elementos del lateral compartan un mismo estilo.
!titlat%
back&ro'nd6color()71:8,E0
color()0
ont6siAe(1pt0
text6transor. ( 'ppercase0
paddin&( :px Epx :px 1px0
ont6wei&ht ( nor.al0
letter6spacin& ( 8px0
css.html
9
.ar&in( +px +px 1px +px0
9
!c'erpolateral%
paddin&( Cpx Dpx <Epx <+px0
9
El enca!e"ado de ni#el ; utili"a la clase ,titlat,, que define un color de fondo, un color del te1to, un tama$o de letra, un
cam!io a may+sculas de las letras del ttulo, unos mrgenes internos, peso de letra normal 3no negrita, como suelen ser
los enca!e"amientos por defecto4, un espaciado de letras de ; pi1el y un margen. Los titulares lle#an asociado un salto
de lnea do!le arri!a y a!a5o, que deseamos e#itar y para ello emos definido un margen de < pi1els, menos en la parte
de a!a5o, que tendr P pi1el.
Las ca5as laterales tam!i*n tienen un estilo, que se aplica a todos los cuerpos de las ca5as que ay en el lateral. Ese estilo
simplemente define unos mrgenes internos.
!aja de buscar
@no de los elementos que #amos a colocar dentro del lateral es una ca5a de !+squeda, con un formulario para reali"ar
!+squedas internas, dentro del sitio, y en todo el %e!.
Esa ca5a de !+squeda se coloca en un formulario. .emos puesto di#ersos identificadotes a los elementos que ay dentro
del fomulario, para poder aplicar estilos a cada componente por separado. -unque algunos de estos selectores ni
siquiera los emos llegado a utili"ar, pueden #enir !ien si queremos acer en el futuro modificaciones de la o5a de
estilos para actuali"ar el dise$o del %e!.
<h8 class="titlat">"'scar</h8>
<div id="b'scar" class="c'erpolateral">
<or.>
<div id="ca.potexto"><inp't type="text" na.e="criterio"></div>
<div id="botonb'scar"><inp't type=i.a&e src="i.a&es/&o!&i" width="8C" hei&ht="<C"></div>
<div class="radio"><inp't type="radio" na.e="op" val'e="<"> En la =eb del invierno</div>
<div class="radio"><inp't type="radio" na.e="op" val'e="8"> En toda la =eb</div>
</or.>
</div>
Los elementos que emos definido en la o5a de estilos para este peque$o formulario son los siguientes2
>G?FT %
ont6siAe ( 1pt0
9
Con ello definimos que los campos de te1to tienen un tama$o de letra de P puntos.
)b'scar or.%
.ar&in6botto. ( +px0
.ar&in6top ( +px0
9
El formulario, que est situado dentro de la capa f!uscar, no de!e tener mrgenes, ni arri!a ni a!a5o.
)ca.potexto%
loat( let0
9
La capa ,campote1to,, donde est el campo de te1to, emos definido que de!e ,flotar, a la i"querda.
)ca.potexto inp't%
width(<++px0
9
css.html
10
El inp't L'e hay dentro de la capa ca.potexto debe tener <++ pixels de ancho!
)botonb'scar %
paddin&6top ( Epx0
paddin&6let( <+7px0
9
La capa donde est el !otn de su!mit, que en este caso es una imagen de su!mitir 3Linput typeE,imagen,M4, tiene un
margen interno de I pi1els por arri!a, y de =<D por el lado i"quierdo. Los =<D pi1els de anco salen de los =<< que
ocupa el campo de te1to que ay a la i"quierda, ms D pi1eles adicionales, que son el #erdadero margen que a!r entre
el campo de te1to y la imagen de su!mitir.
)botonb'scar inp't%
border ( +px none0
9
Con esta +ltima definicin estamos indicando que la imagen de su!mitir 3el Linput typeE,image,M que ay dentro de la
capa !oton!uscar4 no tenga !orde.
!radio%
clear(both0
9
Esta clase, que afecta a las capas donde estn los !otones de radio, define que no de!en a!er elementos ,flotando, ni a
la i"quierda ni a la dereca, de los !otones de radio.
La caja de registro
En la siguiente ca5a del lateral aparece un peque$o te1to in#itando a registrarse al #isitante.
<div id="re&istro" class="c'erpolateral">
<a hre=")">Ie&istrese con nosotros</a> y obten&a .'chas venta;as!
</div>
Esta capa no tiene ning+n estilo especfico, simplemente se comporta eredando los estilos de otras capas y con los que
se an definido en las clases que se utili"an.
La caja de otras informaciones
Situaremos una +ltima ca5a dentro del lateral, que contiene enlaces a otras informaciones. (entro de la ca5a colocaremos
#arios enlaces dentro de una lista.
<h8 class="titlat">#tras inor.aciones</h8>
<div id="otras" class="c'erpolateral">
<'l>
<li><a hre=")">O'ienes so.os</a>
<li><a hre=")">G'estra .isiMn</a>
<li><a hre=")">5&enda de eventos</a>
</'l>
</div>
&ara personali"ar el estilo de la lista de enlaces se utili"an los siguientes estilos.
)otras 'l%
.ar&in ( Cpx <+px +px +px0
paddin&( +px +px +px Dpx0
list6style( none0
9
css.html
11
&or 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 tam!i*n un margen interno ? pi1el a la i"quierda y cero en el resto de las
posiciones. Con ,list0style2none, se indica que no se desea ninguna !olita a la i"quierda de los elementos, puesto que la
#amos a colocar a continuacin nosotros manualmente como fondo de los LliM.
)otras li%
paddin&6let( <Dpx0
back&ro'nd( transparent 'rl-"i.a&es/b'llet!&i"/ + 8px no6repeat0
.ar&in6botto.( <+px0
9
&or otra parte, para cada uno de los elementos de la lista, de define un espacio de =? pi1el a la i"quierda. Esos =? pi1el
sir#en para acer espacio, para que quepan unas peque$as imgenes que #amos a poner de fondo en las listas, que #an a
acer las #eces de !olita. /am!i*n se define un fondo de los LliM que es la imagen con la !olita personali"ada, a 5uego
con nuestro dise$o. /am!i*n se define un margen en la parte inferior.
(espu*s de integrar todo lo que emos #isto en este e5ercicio para crear el lateral de la pgina, el dise$o queda tal como
se puede #er en esta pgina.
Maquetar una !"gina con CSS #
)ara acabar, $amos a crear un pie de pgina # un borde enmarque la pgina. *!receremos tambin unas
conclusiones del e%ercicio.
-puntaremos los +ltimos retoques en el dise$o de la pgina con CSS para finali"ar el taller de maquetacin con CSS. Se
puede #er la primera parte del artculo.
"ie de la pgina
Este elemento no lo a!amos pre#isto en la imagen original, creada pre#iamente, pero lo emos decidido colocar
porque lo necesitamos, para que en la parte donde est el cuerpo y el lateral, apare"ca el fondo de color !lanco. En
E1plorer aparece el fondo !lanco sin ning+n pro!lema, pero en 'o"illa y otros na#egadores, al estar las dos capas de
cuerpo y lateral ,flotando, a i"quierda y dereca, no entiende que de!a mantener el fondo !lanco definido en el
container.
:o se si se entiende esto !ien, pero lo me5or es acer una prue!a y #er lo que emos definido asta el momento en la
plantilla en 8irefo1 o 'o"illa. Beremos que el fondo !lanco no est continuado acia a!a5o.
<div id="pie">
?r'ebas de .aL'etaciMn *SS P 8++C $esarrollo=eb!co.
</div>
Esta capa tiene el siguiente estilo definido2
)pie%
clear ( both0
color ( )cccccc0
text6ali&n ( ri&ht0
.ar&in ( <+px <+px +px <+px0
paddin&6botto.(<+px0
9
Con ,clear2!ot, indicamos que la capa de!e mostrarse sin elementos flotando a i"quierda y dereca, de modo que la
css.html
12
posicin de la capa ser inmediatamente por de!a5o de la capa cuerpo y lateral.
Luego se define un color para el te1to una alineacin de te1to, unos mrgenes y un margen interno por la parte de
de!a5o de =< pi1el.
El borde e#terno
El dise$o original inclua un !orde de ; pi1el rodeando a toda la capa principal. &odemos acer la prue!a de incluir un
!orde en la capa contenedor. &ara ello ay que a$adir en el estilo para la capa contenedor el atri!uto !order, de la
siguiente manera.
)contenedor%
text6ali&n( let0
border( 8px solid )cccccc0
width( :++px0
.ar&in( a'to0
9
En 'o"illa y na#egadores similares, todo es correcto. &ero en 6nternet E1plorer la cosa tiene su pro!lema. Esto es
de!ido a que el espacio de los !ordes, en E1plorer, se toma del que se aya asignado a la propia capa y en 'o"illa y
otros na#egadores, se toma como espacio adicional, aparte del que se aya asignado a la capa en si.
Lo me5or es pro!arlo y #erlo por uno mismo, o !ien encontrarse con el pro!lema y encontrarle solucin sin tener que
romperse la ca!e"a.
:osotros lo emos arreglado quitando el !orde en la capa contenedor y creando una nue#a capa, en la que situaremos el
contenedor. Esa nue#a capa la emos llamado !orde y es la que #a a tener el estilo de !orde definido.
<div id="borde">
!!!! contenido de toda la pK&ina
</div>
</div>
&ara conseguir el !orde se an definido el siguiente estilo para la capa !orde.
)borde%
border( 8px solid )cccccc0
text6ali&n( let0
width( :++px0
.ar&in( a'to0
9
&rimero emos definido un !orde de ; pi1el. Luego un centrado a la i"quierda 3para contrarrestar el centrado al centro
que tiene el !ody y que a!amos puesto para que E1plorer centrase la capa del contenido. /am!i*n se incluye una
ancura de N<< pi1el y un margen ,auto, para que 'o"illa y otros na#egadores centren la capa.
El resultado final del e5ercicio se puede #er en una pgina aparte. &or supuesto, con#iene #er el resultado final
utili"ando #arios na#egadores distintos.
!onclusin
.emos #isto cmo maquetar una pgina utili"ando CSS paso a paso. Esperamos que ayis podido seguir el e5ercicio y
que ninguna dificultad os aya frenado. Kealmente el tra!a5o con CSS para la maquetacin es una tarea fcil, pero
tam!i*n es muy sencillo encontrarnos con escollos o pro!lemas misteriosos que no parecen tener respuesta.
Sin ser un dise$o complicado, reali"ar esta maquetacin nos a lle#ado #arias oras de tra!a5o y alg+n que otro
padecimiento, que por suerte no a llegado a desesperacin. So!retodo e1isten dificultades a la ora de conseguir el
css.html
13
dise$o que se #ea correctamente en todos los na#egadores del mercado. Este dise$o lo emos pro!ado con *1ito en
'o"illa, 8irefo1, :etscape, 9pera y E1plorer.
&ara que la compati!ilidad entre na#egadores no signifique un pro!lema muy pesado, nuestro conse5o y el de otros
desarrolladores, es dise$ar con 'o"illa o na#egadores similares. Luego se puede #er el resultado en E1plorer y adaptar
lo que fuera necesario para terminar de cuadrar el dise$o. En este caso a!rn pocas cosas que cam!iar, mientras que si
dise$amos para E1plorer y luego #emos el resultado en otros na#egadores, seguramente nos tiremos de los pelos porque
nada est* en su sitio.
La e1periencia en el tra!a5o con CSS, nos dice que a menudo surgen los mismos pro!lemas o similares. @na #e" que ya
los emos resuelto unas pocas #eces y nos emos acostum!rado a ello, igual que icimos con los detalles relati#os al
./'L y la maquetacin con ta!las, CSS se torna muco ms sencillo, potente y rpido de desarrollar.
Kesultado final del e5ercicio.
Referencias en v$deo: Si te interesa o!tener nue#as e1plicaciones prcticas so!re maquetacin CSS te recomendamos #er los #deos2
6ntroduccin a la maquetacin con CSS y la &rctica de 'aquetacin CSS. -m!os #ideotutoriales te seguirn ayudando con nue#os
e5emplos +tiles para dominar estas t*cnicas.
#ariar el diseo $ maquetacin con la ho%a de estilos
Continuamos el taller de maquetacin con CSS. Creamos un diseo distinto, que aplicamos al e%emplo
realizado anteriormente, cambiando solamente la "o%a de estilos.
.emos #isto en una serie de artculos anteriores un e5emplo de cmo maquetar una pgina utili"ando +nicamente CSS
para posicionar sus distintos elementos. @na de las principales #enta5as de CSS es que se puede cam!iar el aspecto de
una pgina radicalmente, sin necesidad de cam!iar su cdigo ./'L. &or ello, nos a parecido interesante seguir
profundi"ando en la maquetacin de pginas %e! con CSS, ofreciendo una nue#a propuesta de dise$o para el mismo
arci#o ./'L que a!amos utili"ado anteriormente.
&ara empe"ar, podemos ecar un #ista"o al dise$o que emos creado, utili"ando un programa de edicin grfica tipo
&otosop o 8ire%orQs. Bamos a tra!a5ar so!re esta imagen, para que el dise$o resultante sea lo ms parecido posi!le.
/am!i*n ofrecemos para descarga un arci#o comprimido con todas las imgenes que #amos a utili"ar en este dise$o.
Ser interesante tenerlo a mano para tratar de acer por nosotros mismos el e5emplo.
El mismo cdigo %&'L
6nsistimos en la idea de que #amos a utili"ar el mismo cdigo ./'L que emos construido al acer el e5emplo del
artculo de maquetacin CSS, dado que las o5as de estilo en cascada nos proporcionan erramientas para alterar el
aspecto de la pgina sin editar siquiera el arci#o ./'L.
La anterior maquetacin ya se i"o pensando en que se i!a a utili"ar para proponer ms de un dise$o, por lo que se
a$adi alguna etiqueta, clase o identificador adicional para facilitar este paso.
-unque durante la creacin de este segundo e5emplo emos estado tentados de editar el cdigo ./'L, slo emos
cam!iado un aspecto que #amos a se$alar a continuacin.
css.html
14
Se trata de la imagen de la ca!ecera. Si nos fi5amos en el arci#o ./'L anterior, compro!aremos que la imagen est
incluida por medio de una etiqueta LimgM. -l definirse la ruta de la imagen y sus #alores de anco y alto por medio de
los atri!utos de LimgM, no podemos cam!iar esos datos con la o5a de estilos. Como deseamos cam!iar la imagen en
distintos dise$os, en lugar de colocar la imagen con la etiqueta directamente en el cdigo ./'L, #amos a utili"ar un
truco que emos aprendido en CSSAen>arden, que se !asa en incluir un titular de te1to, que luego #amos a sustituirlo
por la imagen que deseemos. - su #e", ay que decir que este truco es original de (ouglas Ro%man
ttp2GG%%%.stopdesign.comGarticlesGcssGreplace0te1tG.
-ntes, a!amos definido el siguiente peda"o de cdigo para situar la imagen de ca!ecera2
<div id="cabecera"><i.& src="i.a&es/cabecera!;p&" width=":++" hei&ht="<+7" alt="La =eb del >nvierno"
border="+"></div>
-ora, el cdigo de la ca!ecera ser el siguiente2
<div id="cabecera">
<h<><span>La ?ri.avera</span></h<>
</div>
Simplemente emos definido un titular, que luego no aparecer en la pgina, porque lo ocultaremos por medio de el
atri!uto #isi!ility de CSS. En su lugar, definiremos un fondo para la capa ,ca!ecera, y asignaremos sus atri!utos por
medio de o5as de estilo.
-s quedarn los estilos para el elemento ca!ecera y el enca!e"amiento L=M2
)cabecera%
back&ro'nd( transparent 'rl-i.a&es/cabecera!;p&/ no6repeat0
hei&ht( 811px0
width( CD,px0
9
)cabecera h< %
.ar&in( +px +px +px +px0
9
)cabecera h< span %
display(none0
9
El nuevo cdigo !((
-parte de lo comentado para la ca!ecera, el cdigo CSS creado para aplicar los estilos no aporta muca no#edad a lo
que emos #isto asta el momento.
Rsicamente se a utili"ado nue#as imgenes para los fondos y emos #ariado los tama$os y mrgenes de las capas.
-parte, en la parte central o cuerpo de la pgina, se a alineado de manera distinta los elementos, quedando los
cuadrados del !uscador y enlaces a otras secciones a la i"quierda y el te1to de la pgina a la dereca.
/am!i*n se puede apreciar como se an utili"ado unas imgenes para decorar el fondo de los titulares de los recuadros
de la i"quierda. /am!i*n se a colocado una imagen en el fondo donde est el te1to de la pgina. Esta imagen est muy
difuminada para permitir leer el te1to con comodidad.
Bamos a de5ar de lado, tal #e" para pr1imos artculos, la e1plicacin detallada de la declaracin de estilos utili"ada. En
lugar de eso ponemos los enlaces acia el arci#o ./'L y el CSS.
&gina con el resultado final del e5ercicio.
(eclaracin de o5as de estilo utili"ada.
css.html
15
Maquetacin CSS a dos columnas
Mostramos cmo "acer una pgina web maquetada utilizando nicamente CSS, sin tablas, con una
distribucin de + columnas, una cabecera # un pie de pgina. Con diseo de anc"ura !i%a o !luido.
Bamos a #er cmo reali"ar una maquetacin a dos columnas con CSS, sin utili"ar ta!las. -dems de las dos columnas,
para completar la estructura tpica de una %e!, colocaremos una ca!ecera y un pie de pgina.
El e5emplo pretende ser el inicio de una serie de artculos para mostrar cmo reali"ar distintos tipos de plantillas,
maquetando con CSS en lugar de ta!las. 6remos pu!licando estos artculos en nuestro /aller de CSS.
Empe"amos mostrando los dos e5emplos de maquetacin que #eremos en este artculo, siempre con dos columnas,
de5ando la columna con los enlaces de la !arra de na#egacin a la i"quierda o la dereca.
'aquetacin con dos columnas y enlaces a la i"quierda
'aquetacin con dos columnas y enlaces a la dereca
El cdigo %&'L
El cdigo ./'L de los dos e5emplos que emos adelantado es el mismo. Rsicamente este2
<div id="cabecera">
*abecera +<
</div>
<div id="c'erpo">
<div id="lateral">
<'l>
<li><a hre=")">Enlace <</a>
<li><a hre=")">2Jnc'lo 8</a>
<li><a hre=")">#tro enlace</a>
<li><a hre=")">Link ch'lo</a>
<li><a hre=")">NKs enlaces</a>
<li><a hre=")">#tro Qlti.o</a>
</'l>
</div>
<div id="principal">
Lore. ips'. dolor sit a.et3 consectet'er adipiscin& elit!
!!!!!!
</div>
</div>
<div id="pie">
P 8++C $esarrollo=eb!co.
</div>
</div>
Se puede #er que tenemos una capa contenedor, que englo!a todo el cdigo. Luego, dentro del contenedor tenemos tres
!loques. La ca!ecera, el cuerpo y el pie de pgina. La ca!ecera 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.
(entro del cuerpo tenemos dos partes, para codificar cada una de las dos columnas. @na parte, que emos llamado
,lateral,, con una lista de enlaces 3sera la !arra de na#egacin4 y otra parte con el te1to de la pgina, que emos
llamado ,principal,.
css.html
16
El cdigo !((
Como a!amos adelantado, #eremos dos #ariantes de codificacin a dos columnas, con los enlaces a la i"quierda y a la
dereca. :o o!stante, la mayor parte del cdigo CSS de am!os e5emplos es la misma, pues slo #ara la declaracin de
estilos de la capa ,lateral, y de la capa ,principal,.
'a)uetar con los enlaces a la i*)uierda
Beamos la codificacin CSS para la pgina con los enlaces a la i"quierda.
<style type="text/css">
"#$Y %
ont( 1pt 2erdana3 4eneva3 5rial3 Helvetica3 sans6seri0
.ar&in( <+ + <+ +px0
text6ali&n( center0
back&ro'nd6color( )ebebeb0
9
)contenedor%
text6ali&n( let0
width( ::+px0
.ar&in( a'to0
9
)cabecera%
back&ro'nd6color( )d+d+0
color( )EEEE++0
ont6siAe(<8pt0
ont6wei&ht( bold0
paddin&( E E E <+px0
9
)c'erpo%
.ar&in( <+ + <+ +px0
9
)lateral%
width( <7+px0
back&ro'nd6color( ),,,,,,0
loat(let0
9
)lateral 'l%
.ar&in ( + + + +px0
paddin&( + + + +px0
list6style( none0
9
)lateral li%
back&ro'nd6color( )cc0
.ar&in( 8 8 8 8px0
paddin&( 8 8 8 8px0
ont6wei&ht( bold0
9
)lateral a%
color( )EEEEcc0
text6decoration( none0
9
)principal%
.ar&in6let( <:+px0
back&ro'nd6color( )0
paddin&( D D D Dpx0
9
)pie%
back&ro'nd6color( )cccccc0
paddin&( E <+ E <+px0
text6ali&n(ri&ht0
9
La parte que #amos a remarcar es donde se define el estilo del lateral y la capa principal. El lateral acemos que tenga
css.html
17
un tama$o fi5o de =D< pi1el, pero lo ms importante es que acemos que ,flote, a la i"quierda con float2leftS. Esto ace
que el lateral se quede en la i"quierda y permite que el contenido insertado despu*s del lateral se coloque a la misma
altura, pero a la dereca.
&or su parte, para la capa principal, simplemente se indica que tiene un margen a la i"quierda de =N< p1eles. Esto ace
que se coloque al lado de la capa lateral, de5ando un espacio en !lanco de =< p1eles. /iene un margen de =N<, de los
que =D< son para el espacio que #a a ocupar la capa de los enlaces y =< p1eles de espacio entre la capa principal y la
lateral.
Como la capa principal no tiene definida su ancura, se ar tan grande como lo permita el contenedor.
+ota: Estas e1plicaciones no son completas de todo el e5ercicio. Se supone que el lector ya tiene
asimilados algunos conceptos que se an e1plicado en el 'anual de CSS o en el /aller de CSS.
&odemos #er el e5emplo en marca en una pgina aparte. Como es un arci#o ./'L, podemos #er el cdigo fuente
para #er cmo queda el con5unto de maquetacin y declaracin de estilos completo.
'a)uetar con los enlaces a la derecha
Continuamos mostrando los cam!ios que a!ra que acer para maquetar la pgina con la columna de enlaces a la
dereca. Simplemente #amos a cam!iar el cdigo CSS de las capas lateral y principal.
)lateral%
width( <7+px0
loat(ri&ht0
9
)principal%
paddin&( D D D Dpx0
.ar&in6ri&ht( <:+px0
9
-ora la capa lateral estamos indicando que flote a la dereca. &or su parte, en la capa principal emos cam!iado el
margen que a!a antes acia la i"quierda para ponerlo en la parte de la dereca.
&odemos #er el e5emplo en una pgina aparte.
Dise,o fluido
.asta aqu en este artculo emos #isto cmo acer un dise$o con una ancura fi5a. Si queremos un dise$o fluido 3que
se a5usta a la ancura de la #entana del na#egador4, !astara con quitarle al contenedor el atri!uto %idt2 NN<p1S. Si no
tiene definida una ancura, la capa contenedor se a5ustar al tama$o de la #entana del na#egador que tenga el #isitante.
-dems, tendremos que darle un margen al R9(7, para que el contenedor no se acople por completo al !orde de la
#entana. &or e5emplo, podemos darle un margen de =< p1eles a cada lado.
/endramos aora esta declaracin de estilos para el R9(7 y la capa ,contenedor,2
"#$Y %
.ar&in( <+ <+ <+ <+px0
text6ali&n( center0
9
)contenedor%
text6ali&n( let0
.ar&in( a'to0
css.html
18
9
Maquetacin CSS a tres columnas
,eamos cmo "acer una pgina, maquetada nicamente con -o%as de &stilo en Cascada, compuesta por
tres columnas. Con diseo de anc"ura !i%a # !luido.
Continuando nuestros talleres de CSS, #amos a #er aora como acer una estructura de tres columnas para una pgina
%e!. Esta es una estructura !astante tpica de portal. En una de las columnas se suele situar la !arra de na#egacin, en
otra el contenido y en la +ltima una serie de !anners con promociones.
Sera !ueno #er el resultado que !uscamos en una pgina aparte.
Este artculo #a a presuponer que el lector comprende ya la maquetacin con CSS y que a ledo el artculo
'aquetacin CSS a dos columnas. :os !asaremos en ese artculo para componer la pgina con CSS a tres columnas.
En lneas generales, la posi!ilidad que #amos a e1plorar a continuacin para maquetar una %e! con tres columnas,
consiste en lo siguiente2 &ondremos la columna de la i"quierda flotando a la i"quierda, la columna de la dereca
flotando a la dereca y por +ltimo pondremos la parte principal, que aparecer en el centro de la pgina.
El cdigo ./'L para acer este e5emplo ser el siguiente2
<div id="cabecera">
*abecera +<
</div>
<div id="c'erpo">
<div id="lateral">
<'l>
</'l>
</div>
<div id="otrolado">
<i.& src="bannerlateral!&i" width="<8+" hei&ht="7++" alt="">
</div>
Lore. ips'. dolor sit a.et3 consectet'er adipiscin& elit! G'lla condi.ent'. co..odo orci!
G'lla e&et p'r's nec .assa
!!!
</div>
</div>
<div id="pie">
</div>
</div>
Bemos que la pgina contiene tres partes, la ca!ecera, el cuerpo y el pie. La ca!ecera y el pie se colocarn en el
documento ocupando todo el anco disponi!le. La parte donde colocaremos las tres columnas es el cuerpo.
css.html
19
(entro del cuerpo, como podemos #er, tenemos tres capas. La capa ,lateral,, que es la que emos pensado colocar a la
i"quierda. Luego est la capa ,otrolado,, que es la que planeamos colocar a la dereca. &or +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 #amos a utili"ar para maquetar esto ser el siguiente. Se parece muco al e5emplo de maquetacin CSS a
dos columnas. Luego lo comentaremos.
"#$Y %
.ar&in( <+ + <+ +px0
text6ali&n( center0
9
)contenedor%
text6ali&n( let0
width( ::+px0
.ar&in( a'to0
9
)cabecera%
back&ro'nd6color( )d+d+0
color( )EEEE++0
ont6siAe(<8pt0
ont6wei&ht( bold0
paddin&( E E E <+px0
9
)c'erpo%
.ar&in( <+ + <+ +px0
9
)lateral%
width( <7+px0
loat(let0
9
)lateral 'l%
.ar&in ( + + + +px0
paddin&( + + + +px0
list6style( none0
9
)lateral li%
back&ro'nd6color( )cc0
.ar&in( 8 8 8 8px0
paddin&( 8 8 8 8px0
ont6wei&ht( bold0
9
)lateral a%
color( )EEEEcc0
text6decoration( none0
9
)otrolado%
width( <8+px0
loat( ri&ht0
9
)principal%
.ar&in6let( <:+px0
paddin&( D D D Dpx0
width( D7+px0
9
)pie%
back&ro'nd6color( )cccccc0
paddin&( E <+ E <+px0
text6ali&n(ri&ht0
clear( both0
9
css.html
20
/endremos un contenedor, de NN< p1eles 3p14 de anco, que es donde #amos a colocar todas las capas. :os centramos
en e1plicar la "ona del cuerpo, que es donde aparecern las tres columnas.
Bemos como la capa ,lateral, tiene definido un anco de =D< p1, y un float2 leftS para que flote a la i"quierda. Bemos
luego como la capa ,otrolado, tiene =;< p1 de anco y flota a la dereca.
Luego #emos la capa ,principal,, que tiene un margen a la i"quierda de =N< p1, para de5ar un espacio con respecto a la
capa ,lateral,. =N< p1 porque la capa ,lateral, ocupa =D< p1 de anco, ms =< p1 que es lo que realmente estamos
poniendo de margen. En la capa ,principal, tam!i*n emos definido un anco de ?D< p1, para que ocupe 5usto el
espacio que queda en el centro.
Se puede #er el e5emplo en marca en una pgina aparte.
Dise,o fluido
Los dise$os fluidos son los que se a5ustan a la ancura que tengamos en la #entana del na#egador. En el anterior
e5emplo el dise$o tena una ancura fi5a de N<< p1eles y aora #amos a acer un par de modificaciones para que el
dise$o se a5uste a la #entana del na#egador.
Simplemente tendremos que quitar la definicin de ancura de la capa ,contenedor,.
)contenedor%
text6ali&n( let0
.ar&in( a'to0
9
Luego, tam!i*n quitaremos la definicin de ancura de la capa ,principal, y a$adiremos el atri!uto margin0rigt2
=I<p1S para que la capa con el contenido central tenga un margen con respecto a la capa que queda a la dereca. =I< p1
porque la capa de la dereca ocupa!a =;< p1, ms =< p1 que es realmente el margen que estamos de5ando.
)principal%
.ar&in6let( <:+px0
paddin&( D D D Dpx0
.ar&in6ri&ht( <E+px0
9
#ariacin de la maquetacin con CSS a & columnas
Mostramos una me%ora al cdigo mostrado anteriormente para maquetar una pgina con CSS a tres
columnas.
7a #imos en un artculo anterior una manera de reali"ar una maquetacin con CSS a tres columnas. -ora #amos a
reali"ar unos cam!ios sencillos para me5orar algo el cdigo del anterior artculo.
-ntes que nada a!ra que e1plicar por qu* estimamos que puede me5orarse el e5ercicio de maquetacin a tres
columnas, tal y como fue planteado anteriormente. Se trata simplemente de me5orar la organi"acin del contenido de la
pgina de una manera ms inteligente.
- mi me gusta siempre #er el aspecto que tiene una pgina %e! sin la o5a de estilo en cascada, para #er si la
css.html
21
informacin tiene sentido y orden tal y como se a colocado en el cdigo ./'L. Es decir, si est presentada de una
forma adecuada, aunque no se est*n #isuali"ando los estilos definidos en el CSS.
Cualquier na#egador que no tenga soporte a CSS mostrar la pgina sin ning+n estilo y todos los elementos aparecern
uno detrs de otro seg+n se ayan colocado. :o es a!itual que nos #isite una persona que tenga un na#egador
incompati!le con o5as de estilo en cascada, pero para me5orar la accesi!ilidad de las pginas, tam!i*n con#iene que se
lean !ien, aunque no se tenga acceso a CSS.
-s se #era la ma)uetacin !(( a tres columnas sin la declaracin de estilos que a!amos presentado en el anterior
e5emplo. Si pulsamos el enlace podremos compro!ar que aparece el !anner #ertical en la parte superior de la pgina,
cuando lo interesante sera que apareciera de!a5o del contenido, por lo menos en mi opinin.
-ariacin al ejercicio anterior para ma)uetar a tres columnas
Rsicamente #amos a acer una maquetacin a dos columnas, la i"quierda, con la !arra de na#egacin y la de la
dereca, con el otro contenido. En la parte de la dereca, a su #e", aremos dos columnas ms, una a la i"quierda que
tendr el te1to de la pgina y otra a la dereca, con la !arra lateral dereca.
En realidad, el e5ercicio queda muy similar. Beamos el cdigo ./'L2
<div id="cabecera">
*abecera +<
</div>
<div id="c'erpo">
<div id="lateral">
<'l>
</'l>
</div>
<div id="derecha">
Lore. ips'. dolor sit a.et3 consectet'er adipiscin& elit!

</div>
<div id="otrolado">
<i.& src="bannerlateral!&i" width="<8+" hei&ht="7++" alt="">
</div>
</div>
</div>
<div id="pie">
</div>
</div>
La capa ,dereca, es la que emos creado nue#a, donde colocamos tanto el te1to principal como la capa del !anner
#ertical.
El cdigo CSS que emos #ariado slo afecta a la capa ,dereca,, que no esta!a creada anteriormente y a la capa
,principal,, que es donde est el te1to central.
)derecha%
.ar&in( + + + <:+px0
9
TprincipalU
!acQground0color2 TffffffS
padding2 ? ? ? ?p1S
%idt2 ?D<p1S
float2 leftS
css.html
22
V
La capa ,dereca, tiene un margen de =N< pi1els, para de5ar espacio a la !arra de enlaces de la i"quierda. La capa
,principal,, que antes tena ese margen de =N< p1eles, ya no lo necesita, pero en cam!io s que emos puesto el atri!uto
float2 left, para que se flote en la parte de la i"quierda.
En definiti#a, es una maquetacin a dos columnas, en las que una de las columnas tiene a su #e" otra maquetacin en
dos columnas.
Se puede #er el e5emplo en marca en una pgina aparte. El cdigo fuente del e5emplo entero no lo #amos a escri!ir.
&ero se puede anali"ar tanto el ./'L como el CSS a tra#*s de la opcin ,#er cdigo fuente, del na#egador.
Se puede #er cmo quedara esta maquetacin a tres columnas si nuestro na#egador no fuera compati!le con CSS.
Maquetar una !"gina con un ma!a de 'oogle( usando CSS
&s mu# !cil maquetar una pgina que tenga un mapa de .oogle, simplemente debemos utilizar
maquetacin # posicionamiento CSS.
La maquetacin con mapas de >oogle, que creamos con el -&6 de >oogle 'aps, es muy sencilla, ya que el mapa ocupa
el espacio disponi!le en la capa donde est* contenido. -s pues, al incorporar un mapa a una pgina %e!, no tenemos
que especificar el tama$o del mapa por Wa#ascript ni nada parecido, simplemente el mapa de >oogle tomar el los
atri!utos de anco y alto de la capa 3el Ldi#M 4 donde est contenido. Esto es dinmico, es decir, si cam!ia el espacio
disponi!le de la capa donde est el mapa 0ya sea porque el usuario a cam!iado el tama$o de la #entana o porque se an
alterando los atri!utos %idt y eigt de la capa con Wa#ascript o por cualquier modo0 cam!iar automticamente el
tama$o del mapa para a5ustarse dinmicamente al espacio disponi!le.
(ico esto, puede resultar poco re#elador este artculo, porque no #amos a #er nada de Wa#ascript ni de creacin de
mapas de >oogle, sino que #amos a mostrar como maquetar con CSS, teniendo en cuenta que en una de las capas ay
un mapa de >oogle. :o o!stante, seguro que algunas de las informaciones proporcionadas aqu no #an a ser tri#iales
para los lectores.
En (esarrollo)e!.com ofrecemos un manual en el que puedes aprender a tra!a5ar con el -&6 de >oogle 'aps.
/am!i*n recomiendo la lectura del material que ofrecemos en (esarrollo)e!.com so!re la maquetacin CSS, pues #oy
a dar por sa!idos los aspectos so!re maquetacin con o5as de estilos y por tanto, no los #oy a e1plicar.
Los atributos de altura y anchura de un mapa son la capa )ue lo contiene
El e5emplo ms sencillo que podemos encontrarnos para maquetar un mapa de google es que tenga dimensiones en
anco y alto fi5as. Es como emos colocado los mapas en el manual asta este momento2
<div id=".ap" style="width( :7Cpx0 hei&ht( E11px"></div>
En este e5emplo el mapa ocupa NDX p1el de anco y IPP de alto. Esto no tiene ning+n secreto.
&ero qu* pasa si queremos que un mapa de >oogle 'aps tenga el anco de toda la #entana del na#egador? &orque
sa!emos que el na#egador puede tener distintos tama$os, dependiendo de la definicin de pantalla del #isitante y si la
#entana est ma1imi"ada o dimensionada de cualquier otra forma.
Entonces es muy sencillo, podemos colocar %idt2=<<J en la declaracin de estilos css de la capa donde est el mapa.
css.html
23
<div id=".ap" style="width( <++R0 hei&ht( E11px"></div>
Este mapa ocupara todo el rea disponi!le de la #entana del na#egador, o !ien de la capa donde estu#iera contenido.
El e5emplo se complica si queremos que el mapa de >oogle ocupe adems todo el alto disponi!le en el na#egador, que
tam!i*n, sa!emos, puede ser #aria!le dependiendo de las caractersticas de pantalla o del estado de la #entana del
!ro%ser. Lo normal es que pro!semos algo como esto2
<div id=".ap" style="hei&ht( <++R0 width(<++R0"></div>
&ero esto tal cual, sin acer ninguna otra cosa, tiene un pro!lema y es que misteriosamente el mapa aparece #aco o con
eigt E <. Esto es porque los na#egadores tienen pro!lemas al maquetar con eigtE=<<J. La idea para solucionarlo
es colocar a todas las capas que contengan al mapa eigt2=<<J, as como a las etiquetas LR9(7M y L./'LM que
tam!i*n de!eran tener el eigt de =<<J. Entonces nos de!era funcionar y el mapa ocupara todo el alto y anco de la
#entana.
Referencia: &odemos #er una 8-Y con e1plicaciones so!re utili"acin del eigt2=<<J en CSS.
-ora #eamos el e5emplo de un mapa de >oogle 'aps que ocupa todo el anco y alto del espacio en una pgina aparte.
'a)uetar un mapa de .oogle con /idth y height 01123 pero me*clado con otros elementos
&ara aca!ar #eamos un e5emplo de maquetacin de un >oogle 'aps que ocupa el =<<J del espacio, pero que tiene una
ca!ecera y una !arra lateral. La ca!ecera y el lateral ocupan unos espacios fi5os y el mapa de google ocupar todo el
sitio que de5an li!re otros elementos de la maquetacin.
&ara e1plicarlo lo ms sencillo es #er directamente el e5emplo en una pgina aparte.
El e5ercicio es simple, pero necesitaremos conocimientos de CSS so!re maquetacin y posicionamiento. El cdigo es el
siguiente2
<S$#*TY?E ht.l ?F"L>* "6//=E*//$T$ THTNL <!+ Strict//EG"
"http(//www!wE!or&/TI/xht.l</$T$/xht.l<6strict!dtd">
<ht.l x.lns="http(//www!wE!or&/<,,,/xht.l" x.lns(v="'rn(sche.as6.icrosot6co.(v.l">
<head>
<NET5 HTT?6EOF>2="*ontent6Type" *#GTEGT="text/ht.l0charset=>S#611C,6<">
<title>Napa de 4oo&le</title>
<script src="http(//.aps!&oo&le!co./.apsUile=apiVv=8Vkey=coloca6t'6llave"
type="text/;avascript"></script>
<script type="text/;avascript">
//<SW*$5T5W
'nction load-/ %
i -4"rowser>s*o.patible-// %
var .ap = new 4Nap8-doc'.ent!&etEle.ent"y>d-".ap"//0
.ap!set*enter-new 4LatLn&-EE3+/3E/0
.ap!add*ontrol-new 4Lar&eNap*ontrol-//0
.ap!setNapType-4XG#IN5LXN5?/0
9
9
window!onload=load
//YY>
</script>
<style type="text/css">
ht.l3body%
.ar&in(+px0
hei&ht(<++R0
9
</style>
</head>
css.html
24
<body>
<div id="contenedor" style="width(<++R0 hei&ht(<++R0">
<div id="cabecera" style="back&ro'nd6color( )cc,,0 ont6wei&ht(bold0 ont6siAe( <<+R0 hei&ht(
8Epx0 paddin&( Epx0 .ar&in6botto.(<+px0">Esto es la cabeceraSS</div>
<div id="lateral" style="loat(ri&ht0 width(8++px0 hei&ht(<++R0 back&ro'nd6color()ee,,0">
<div id="contenidolateral" style="paddin&( E+px <+px + <+px0">
?or <a hre="http(//www!&'iarte!co.">&'iarte!co.</a>
<br />
<br />
Esto son contenidos L'e coloca.os en el lateral iAL'ierdo! Ies'lta .'y Kcil .aL'etar con 'n
.apa de 4oo&le en 'na capa L'e to.a el ta.aZo del contendor donde se enc'entra!
</div>
</div>
<div id=".ap" style="hei&ht( <++R0 .ar&in6ri&ht(8<+px0"></div>
</div>
</body>
</ht.l>
Presentacin de )*+ 'rid S$stem
/ntroduccin a la maquetacin de pginas web usando CSS con el sistema 012 .rid.
Bamos a reali"ar una serie de artculos so!re la maquetacin de pginas %e! con CD< >rid System, que nos permitir
implementar nuestros dise$os de %e!s ms fcilmente. CD< >rid System es un frame%orQ CSS, que no es ms que una
declaracin de estilos que dispone las clases necesarias para implementar columnas en una pgina %e!, de di#ersos
tama$os, con las que maquetar nuestros contenidos fcil y ordenadamente.
:osotros mismos podramos acer un sistema propio para maquetar una pgina con di#ersas columnas, como emos
#isto en di#ersos artculos del /aller de CSS, pero utili"ando un frame%orQ como CD< >rid ya tendremos la mayor parte
del tra!a5o reali"ado, pues simplemente tendremos que colocar a cada contenedor de elementos las clases disponi!les en
el sistema, para que tenga la ancura y posicin deseadas.
@tili"ar un frame%orQ CSS no aporta nada de creati#idad para reali"ar un dise$o !onito, pero nos permite anclar
contenidos en la pgina de una manera sencilla. :osotros, por tanto, seremos los que nos encargaremos de dise$ar una
pgina %e! que tenga un aspecto agrada!le, pero podremos partir de una estructura en columnas, donde ce$ir los
espacios para que quede todo !ien colocado. Con la prctica notar*is que, sa!er de antemano los espacios disponi!les
para las columnas del dise$o de nuestra %e!, resulta !astante +til a la ora de dise$ar con alg+n programa como
&otosop, tal como podr*is #er en el siguiente #deo del dise$o de una %e! con &otosop.
CD< >rid System lle#a este nom!re porque es un sistema de re5illa para acer pginas con CD< p1eles de anco. Las
columnas que podremos colocar en la re5illa tendrn distintas ancuras, pero siempre el anco total de la pgina ser de
CD< p1eles. Se a elegido este #alor porque CD< es di#isi!le por una !uena cantidad de n+meros, lo que lo ace ms
#erstil para poder alcan"ar pginas resultantes de la ms #ariada gama.
En la propia pgina de inicio de CD< >rid System se puede acceder a la descarga del 8rame%orQ y a algunas
e1plicaciones so!re su uso, as como a e5emplos de pginas que lo utili"an para la maquetacin CSS y a un demo
interesante para poder #er el tipo de columnas que se pueden conseguir, sus ancuras, etc.
ttp2GGCD<.gs
#ariantes de )*+ 'rid
El propio frame%orQ dispone de dos #ariantes distintas, para acer pginas utili"ando =; =D columnas. :o es que
necesitemos utili"ar todas las columnas disponi!les para reali"ar la maquetacin, sino que la re5illa tendr esas
css.html
25
di#isiones #erticales donde podemos situar los elementos. La #ariante de =; columnas da menos posi!ilidades para
repartir los espacios, pero en mucos de los casos ser ms que suficiente para crear cualquier estructura de pgina. En
cuanto a la #ariante de =D columnas, da una gama mayor de posi!les ancos para las columnas, que puede ser necesaria
en dise$os con un ni#el de detalle ms alto.
En am!as #ariantes las columnas que se consiguen tienen un margen a cada lado de =< p1eles, por lo que si colocamos
dos columnas, una al lado de otra, entre los mrgenes de las dos a la #e", o!tendremos una separacin de ;< p1eles
entre ellas.
Anchuras !osibles con la variante de ,- columnas
Con la primera de las #ariantes de CD< >rid podemos acer di#isiones en asta =; columnas distintas. /eniendo en
cuenta los mrgenes a la i"quierda y la dereca de las columnas, las ancuras de las que disponemos sern las
siguientes2
=2 D<p1
;2 =?<p1
I2 ;;<p1
?2 I<<p1
X2 IP<p1
D2 ?D<p1
N2 X?<p1
P2 D;<p1
C2 N<<p1
=<2 NP<p1
==2 PD<p1
=;2 C?<p1
Cualquier columna tendr que tener uno de estos tama$os disponi!les. En una seccin podemos poner #arias columnas
de di#ersos tama$os, siempre teniendo en cuenta que la ancura m1ima disponi!le ser de CD p1eles, menos los
mrgenes.
&or e5emplo, para un dise$o a I columnas, una com!inacin de ancuras podra ser de =?<p1, ?D<p1 y I<<p1.
Anchuras !osibles con la variante de ,* columnas
@tili"ando la #ariante de =D columnas tenemos =D posi!les ancuras de elementos de la pgina, lo que puede aumentar
las posi!ilidades de eleccin. Las distintas ancuras so!re las que podramos tra!a5ar son las siguientes2
=2 ?<p1
;2 =<<p1
I2 =D<p1
?2 ;;<p1
X2 ;P<p1
D2 I?<p1
N2 ?<<p1
P2 ?D<p1
C2 X;<p1
=<2 XP<p1
==2 D?<p1
=;2 N<<p1
=I2 ND<p1
=?2 P;<p1
=X2 PP<p1
=D2 C?<p1
css.html
26
-s pues, con este sistema podramos maquetar asta =D columnas de ?< p1eles cada una, o cualquier com!inacin que
deseemos, siempre que la ancura ms los mrgenes de los elementos sea de CD< p1eles.
+ota: Si te a interesado este tema y quieres in#estigar so!re otras posi!ilidades para la maquetacin CSS, puedes encontrar tam!i*n en
(esarrollo)e!.com un 'anual del 8rame%orQ CSS Rlueprint.
En los arci#os para descarga del frame%orQ encontraremos un demo que nos puede dar una idea e1acta de los tama$os
de las ca5as y las posi!ilidades de maquetacin. /am!i*n podemos #er el demo en la @KL2 ttp2GGCD<.gsGdemo.tml
En definiti#a, con CD< >rid tenemos !astante #ersatilidad para acer nuestras maquetaciones. /oda#a tenemos que
e1plicar cmo utili"ar el frame%orQ, lo que de5aremos para siguientes artculos, pero al menos podemos acernos una
idea de las posi!ilidades.
.lue!rint( /ramewor0 CSS
)resentacin de 3lueprint, un !ramewor4 CSS que sir$e de apo#o en el diseo # maquetacin de webs +.2,
gracias a su re%illa # otros estilos de tipogra!5a e impresin.
Rlueprint es un complemento para desarrolladores de %e!s que aumentar la producti#idad en las tareas de dise$o y
maquetacin de pginas. Se trata de una serie de li!reras de .o5as de Estilo en Cascada que contienen cdigo +til para
maquetar una pgina %e! y aplicar otros tipos de estilos tipogrficos o de impresin, algo que com+nmente conocemos
como 8rame%orQ CSS.
Este sistema nos ofrece una serie de arci#os con cdigo CSS que podremos incluir en las pginas %e! para aplicar
estilos de una manera rpida, y solucionar tam!i*n mucos de los pro!lemas de compati!ilidad entre na#egadores que
pueden surgir durante la etapa de maquetacin.
E1isten di#ersos 8rame%orQ CSS disponi!les de manera gratuita en 6nternet, creados por #arios desarrolladores
distintos. Rlueprint es qui"s el ms conocido, o por lo menos uno de los ms populares y prue!a de ello es que se an
creado incluso algunas #ariantes o productos deri#ados para a5ustar Rlueprint a las distintas necesidades de los
desarrolladores.
+ota: 9tro de los 8rame%orQs CSS que tenemos !ien documentado en (esarrollo)e!.com es CD< >rid System, del que podemos
encontrar un manual amplio y un e5emplo completo de maquetacin CSS en #deo.
Qu es un /ramewor0 CSS
Yui"s con#endra definir qu* se conoce como frame%orQ CSS. &ues simplemente se trata de una serie de declaraciones
de estilos definidos de forma estndar para que sir#an como !ase para el dise$o de todo tipo de %e!s. &or decirlo de
otra manera, es un poco de cdigo CSS que se podra considerar +til para desarrollar cualquier tipo de %e! y que se
pone a disposicin para solucionar di#ersos pro!lemas o situaciones, comunes en el desarrollo de %e!s.
Cada frame%orQ CSS, aunque qui"s de!eramos llamarles simplemente ,Li!reras CSS,, tiene su propia filosofa a la
ora de crear el cdigo para solucionar esos pro!lemas. -lgunas #eces las formas de actuar son similares y otras #eces
distintas, por ello el uso o no de los frame%orQs CSS, as como la eleccin del mismo es una decisin muy particular de
cada programador o desarrollador %e!.
E1iste adems una discusin so!re si es o no con#eniente el uso de 8rame%orQs CSS, pero es un asunto donde no
#amos a entrar en este artculo. Simplemente queremos contaros cmo funciona Rlueprint y cada persona podr elegir o
no usarlo.
css.html
27
Caractersticas de .lue!rint
El frame%orQ CSS Rlueprint est creado so!re una slida !ase de cdigo CSS que ayudar a desarrollar el dise$o y
maquetacin de sitios %e!. Entre las cosas que nos aporta podemos destacar2
4na rejilla, que nos permitir crear cualquier estructura de pgina %e!. Rsicamente se trata de un con5unto de
clases CSS para posicionar cualquier elemento en un espacio de CX< p1eles de ancura, di#idido en ;?
columnas.
4na definicin de tipograf$a predeterminada, de manera precisa para todos los elementos de la pgina que
pueden tener te1to.
Estilos para formularios, con los que me5orar las interfaces de usuario.
Estilos para impresin, con las definiciones CSS ms +tiles para que las pginas se lean !ien cuando se
imprimen en papel.
Estilos espec$ficos para IE, con los que resol#er algunos de los pro!lemas ms comunes de 6nternet E1plorer.
Con todo esto conseguimos una !ase con la que comen"ar fcilmente a acer pginas %e! comple5as y que sern ms
compati!les en distintos na#egadores. -dems, Rlueprint se completa con algunos plugins creados por terceras personas
que sir#en para acer cosas ms a#an"adas o diferentes. &or e5emplo ay plugins para conseguir iconos, para acer
pginas fluidas 3que se adaptan a la ancura de la #entana del na#egador4, etc.
&ara comen"ar a usar Rlueprint tenemos que acceder a su pgina %e! y descargarlo, a tra#*s de su pgina %e!2
ttp2GG%%%.!lueprintcss.orgG
En los siguientes artculos del 'anual de Rlueprint te e1plicaremos todo lo que tienes que conocer para comen"ar con
!uen pie y que te sea muy sencillo adaptarte al frame%orQ CSS.
css.html
28

Manual Maquetacion Css PDF

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Manual Maquetacion Css PDF

Caricato da

Copyright:

Formati disponibili

Tu mejor ayuda para aprender a hacer webs

Potrebbero piacerti anche