Manual Maquetacion PDF

MANUAL DE MAQUETACIN DE PGINAS WEB CON CSS
Hasta hace poco la maquetacin de una pagina web se haca mediante tablas html. Actualmente la
maquetacin se realiza con hojas de estilo en cascada (css), separando completamente el contenido del
archivo html de las definiciones de estilo que se guardarn en un archivo .css externo que es enlazado
por los documentos html del sitio web.
css puede ahorrar mucho tiempo de trabajo. Para cambiar, por ejemplo, el color de fondo de un sitio
web compuesto por 500 pginas, con css bastara una pequea modificacin en la hoja de estilo. Sin
css habra que cambiar de forma manual los 500 documentos html.
El archivo css es cargado por los navegadores en el cach con lo que disminuye el tiempo de respuesta.
Veamos algunas posibilidades de maquetacin con css:
maquetacin con css a dos columnas
maquetacin con css a tres columnas
DISEOS CON DOS COLUMNAS

Los diseos que presentamos a continuacin son muy simples, constan de cabecera, dos columnas y un
pie de pgina. A estos elementos bsicos pueden aadirse otros como: elementos de navegacin
(men, breadcrumbs o migas de pan), espacios para anuncios ,etc.
Para ser didcticos utilizaremos colores de fondo en las cajas y dividiremos la pgina de forma
esquemtica en:
- cabecera o caja superior (color verde) donde puede colocarse el logotipo o imagen del sitio web.
- cuerpo, con dos columnas que llamaremos izquierda (color rojo) y derecha (color azul).
- pie o caja inferior (color amarillo).
Diseo 1: columna izquierda de ancho fijo de 300 px y columna derecha de ancho

variable.
Diseo 2: columna izquierda de ancho variable del 70% y columna derecha de ancho
variable del 30%.
Diseo 3: columna derecha de ancho fijo de 300 px y columna izquierda de ancho
variable.
DISEO CON DOS COLUMNAS: IZQUIERDA CON ANCHO FIJO DE 300 px

Y DERECHA VARIABLE
En este diseo a dos columnas se establece una columna a la izquierda con un ancho fijo de 300 px, en
la que se podra incluir un men de navegacin, y otra columna a la derecha de ancho variable para
que se adapte a la configuracin del monitor o pantalla.
La estructura de esta pgina sera la siguiente:
El cdigo css usado es el siguiente:

#contenedor2{
width:80%; background-color: #f5f5f5; text-align: center; margin: 0 auto 0 auto; font-family:Verdana; }
#cabecera2{
width:100%; background-color: green; text-align: center; overflow:hidden; padding: 0px 0px 0px 0px; margin: 0 auto 10px
auto; }
#cuerpo2{
width: 100%; margin: 0px auto 0px auto; background-color: #f5f5f5; overflow: hidden; }
#izquierda2{
float: left; width: 300px; background-color: red; font: 10pt Verdana; text-align: center; }
#derecha2{
margin: 0px 0px 0px 320px; background-color: #eeffff; font: 12pt Verdana; text-align: center; }
#pie2{
background-color: yellow; margin: 10px 0 0 0; padding: 0 0 0 0px; text-align:center; clear: both; font: 8pt Verdana; }
El cdigo html usado es el siguiente:
<
<
<
<
<
<
<
<
<
<
<
div id="contenedor2">
div id="cabecera2">
/div>
div id="cuerpo2">
div id="izquierda2">
/div>
div id="derecha2">
/div>
/div>
div id="pie2">
/div>< /div>
DISEO CON DOS COLUMNAS DE ANCHO VARIABLE:

IZQUIERDA 70%, DERECHA 30%
En este diseo a dos columnas se establece una columna a la izquierda, con un ancho variable del 70%,
y otra columna a la derecha con un ancho variable del 30%.

#contenedor2{
#cabecera2{
auto; }
#cuerpo2{
#izquierda2{
float: left; width: 69%; margin: 0px 0px 0px 0px; background-color: red; font: 12pt Verdana; text-align: justify; }
#derecha2{
float:left; width: 29%; background-color: #eeffff; font: 10pt Verdana; text-align: center; margin: 0px 0px 0px 10px; }
#pie2{
<
<
<
<
<
<
<
<
<
<
<
div id="cabecera2">
/div>
div id="cuerpo2">
/div>
div id="derecha2">
/div>
/div>
div id="pie2">
/div>< /div>
DISEO CON DOS COLUMNAS: DERECHA CON ANCHO FIJO DE

300 px E IZQUIERDA VARIABLE
En este diseo a dos columnas se establece una columna a la derecha con un ancho fijo de 300 px, en
la que se podra incluir un men de navegacin, y otra columna a la izquierda de ancho variable para
que se adapte a la configuracin del monitor o pantalla.
- cuerpo, con dos columnas que llamaremos izquierda y derecha.

#contenedor2{
#cabecera2{
auto; }
#cuerpo2{
#izquierda2{
float: right; width: 300px; background-color: red; font: 10pt Verdana; text-align: center; }
#derecha2{
#pie2{

<
<
<
<
<
<
<
<
<
<
<
div id="cabecera2">
/div>
div id="cuerpo2">
/div>
div id="derecha2">
/div>
/div>
div id="pie2">
/div>< /div>
DISEO CON TRES COLUMNAS

Los diseos que presentamos a continuacin son muy simples, constan de cabecera, tres columnas y un
pie de pgina. A estos elementos bsicos pueden aadirse otros como: elementos de navegacin
(men, breadcrumbs o migas de pan), espacios para anuncios ,etc.
Para ser didcticos utilizaremos colores de fondo en las cajas y dividiremos la pgina de forma
esquemtica en:
- cabecera o caja superior (color amarillo) donde puede colocarse el logotipo o imagen del sitio web.
- cuerpo, con tres columnas que llamaremos izquierda (color rojo), centro (color verde) y derecha
(color azul).
- pie o caja inferior (color marrn).
Diseo 1: columnas izquierda y central con ancho fijo de 250 px y 500 px,
respectivamente, y columna derecha de ancho variable para que se adapte a la
configuracin del monitor.
Diseo 2: columna izquierda de ancho fijo de 180 px y columnas central y derecha de
ancho variable para adaptarse a la configuracin del monitor.
DISEO CON TRES COLUMNAS: IZQUIERDA Y CENTRO DE

ANCHO FIJO Y DERECHA DE ANCHO VARIABLE
En este diseo a tres columnas las columnas izquierda y centro tienen un ancho fijo de 250 px y 500
px, respectivamente, y la columna de la derecha tiene un ancho variable para que se adapte a la
configuracin del monitor o pantalla.
(color azul).
A estos elementos bsicos pueden aadirse otros como: elementos de navegacin (men,
breadcrumbs o migas de pan), espacios para anuncios ,etc.

#contenedor2{
width:90%; background-color: #ffffff; text-align: center; margin: 0 auto 0 auto; font-family:Verdana; }
#cabecera2{
width:100%; background-color: yellow; text-align: center; overflow:hidden; padding: 0px 0px 0px 0px; margin: 0 auto 10px
auto; }
#cuerpo2{
#izquierda2{
#centro2{
float: left; width: 500px; margin: 0px 0px 0px 10px; background-color: green; font: 12pt Verdana; text-align: justify; }
#derecha2{
#pie2{
background-color: brown; margin: 10px 0 0 0; padding: 0 0 0 0px; text-align:center; clear: both; font: 8pt Verdana; color:
yellow; }
< div id="contenedor2">
< div id="cabecera2">< /div>
< div id="cuerpo2">
<
<
<
<
div id="izquierda2">< /div>

div id="centro2">< /div>
div id="derecha2">< /div>
/div>
< div id="pie2">

< /div>< /div>
DISEO CON TRES COLUMNAS: IZQUIERDA DE ANCHO FIJO, CENTRO Y

DERECHA DE ANCHO VARIABLE
En este diseo a tres columnas la columna de la izquierda tiene un ancho fijo de 180 px y las columnas
centro y derecha tienen un ancho variable para que se adapten a la configuracin del monitor o
pantalla.
(color azul).
A estos elementos bsicos pueden aadirse otros como: elementos de navegacin (men,
breadcrumbs o migas de pan), espacios para anuncios ,etc.

#contenedor2{
width:998 px; background-color: #ffffff; text-align: center; margin: 0 auto 0 auto; font-family:Verdana; }
#cabecera2{
width:100%; background-color: yellow; text-align: center; overflow:hidden; padding: 0px 0px 0px 0px; margin: 0 auto 10px
auto; }
#cuerpo2{
#izquierda2{
#centro2{
float: left; width: 60%; margin: 0px 0px 0px 10px; background-color: green; font: 12pt Verdana; text-align: justify; }
#derecha2{
float: left; width: 18%; margin: 0px 0px 0px 10px; background-color: #eeffff; font: 10pt Verdana; text-align: center; }
#pie2{
background-color: brown; margin: 10px 0 0 0; padding: 0 0 0 0px; text-align:center; clear: both; font: 8pt Verdana; color:
yellow; }
< div id="contenedor2">
< div id="cabecera2">< /div>
< div id="cuerpo2">
<
<
<
<
div id="izquierda2">< /div>

div id="centro2">< /div>
div id="derecha2">< /div>
/div>
< div id="pie2">

< /div>< /div>
DISEANDO CAJAS CON CSS

El
modelo
de
cajas
(box
model)
es
la
caracterstica
ms
importante
del
lenguaje
css.
El modelo de cajas es el comportamiento de css que hace que todos los elementos (prrafos,
encabezados, imgenes, lnea horizontal, listas, enlaces, tablas, etc.) de las pginas web sean cajas
rectangulares que ocupan todo el ancho disponible. La altura se regula segn el contenido.
Las cajas de una pgina se crean automticamente al definir un elemento html. Cada vez que
insertamos una etiqueta html, se crea una nueva caja rectangular que encierra los contenidos de ese
elemento. Estas cajas no son visibles a simple vista porque inicialmente no muestran ningn color de
fondo ni ningn borde.
PARTES DE UNA CAJA CSS

Cada una de las cajas est formada por cuatro partes que de dentro afuera son las siguientes:
Contenido (content). Es el contenido html del elemento (texto, imagen, lnea horizontal,
lista de elementos, etc.).
Relleno (padding). Es el espacio libre opcional existente entre el contenido y el borde.
Borde (border). Es la lnea que encierra el relleno y el contenido.
Margen (margin). Es la separacin (opcional) que existe entre la caja y las cajas
adyacentes.
Es posible modificar las caractersticas de cada parte de la caja. (+ info)

Un ejemplo prctico con dos cajas, utilizando un borde de 2 px de color rojo:
En este caso la separacin entre

cajas es de 30 px ya que se suman
los 15 px del margen derecho de la
caja 1 con los 15 px del margen
izquierdo de la caja 2.
DIMENSIONES DE LA CAJA
Es importante tener en cuenta que el ancho total de la caja es la suma
del ancho del contenido + relleno + borde + margen.
As, una caja con un contenido de 300 px de ancho, padding izquierdo y
derecho de 5 px, borde de 2 px y margenes derecho e izquierdo de 15
px tendr un ancho total de: 300 + 5 + 5 + 2 + 2 + 15 + 15 = 344 px.
Lo mismo ocurre con el alto de la caja.

Las dimensiones pueden expresarse en unidades absolutas o relativas. (+ info)
DISEANDO CAJAS CON CSS3
Como puede verse en los ejemplos anteriores, las posibilidades que tenemos con css para disear cajas
son muy variadas. CSS3 (la ltima versin de css) admite incluso modificaciones de la caja en 3
dimensiones. (+ info)
10
TIPOS DE DISEO CON CSS

La maquetacin de una pagina web utilizando hojas de estilo en cascada (css) puede hacerse mediante:
diseos de ancho fijo (utilizan pxeles).

diseos de ancho variable, llamados diseos lquidos o fluidos (utilizan porcentajes).
diseos elsticos (utilizan em).
DISEO ELSTICO CON CSS
Para maquetar una pagina web utilizando css con diseo elstico definimos el ancho de los componentes con unidades relativas
tipo em que estn relacionadas con el tamao del texto. Nuestro diseo se adaptar cuando el visitante del sitio cambie el
tamao del texto, pero no se adaptar en funcin de los cambios de tamao de la ventana del navegador.
Qu es un em?
La unidad de medida que se utiliza en diseos elsticos para definir las dimensiones de todos los elementos de la pgina es el
em.
El em es una unidad relativa, es decir, su valor depende del tamao de fuente definido en el navegador.
El em es una unidad de tipografa que mide exactamente el ancho de la letra M mayscula de una tipografa dada y a un
tamao dado. Por tanto, un em no mide siempre lo mismo.
Afortunadamente, actualmente, el tamao de fuente por defecto en todos los navegadores es de 16 pxeles, por lo que,
simplificando y con fines didcticos podemos decir que 1em = 16px.
En css el valor del em puede definirse con nmeros enteros o con decimales (utilizando el punto para separar, no la coma).
Ejemplos: 1em, 0.75em, 1.325em, etc. Se admiten hasta tres decimales.
Maquetando con em conseguiremos que nuestros diseos se adapten a los cambios de tamao de la letra.
UN CONTENEDOR ELSTICO
El cdigo css utilizado para confeccionar un elemento contenedor elstico que contenga todos los elementos (cabecera,
contenido, espacios para anuncios, pie, etc) de una pgina web cualquiera, podra ser el siguiente:
/*Para que el redimensionamiento sea correcto en IExplorer*/
html{ font-size:100%; }
11
/*Para centrar todo lo que contenga el body y asignar un tamao de fuente de 1 em */

body{ font-size: 1em; font-family: verdana; text-align: center; color: #000; background-color: #f5f5f5; padding: 0; margin: 0;
}
/*Definimos, por ltimo nuestro contenedor elstico que llamaremos contenedor con un ancho de 75em, unos mrgenes
superior e inferior de 0.25em de ancho, centraremos su contenido, aplicaremos unos bordes derecho e izquierdo de 0.2em de
grosor de color #bcd2e6 y relieve y le pondremos un color de fondo #eef5f5*/
#contenedor{ width: 75em; margin: 0.25em auto; background-color: #eef5f5; text-align: center; border-right: 0.2em ridge
#bcd2e6; border-left: 0.2em ridge #bcd2e6; }
EJEMPLO DE DISEO ELSTICO CON CSS

Este diseo elstico tiene un ancho de 75 em.
Puede probarlo pulsando a la vez las teclas Control (Ctrl) y + -. Tambin con la tecla Control (Ctrl) y la rueda del ratn.
Comprobar que el diseo se adapta a cualquier cambio de tamao de fuente, redimensionandose automticamente el tamao de
los elementos de la pgina y respetando nuestro diseo original.
Los componentes de la pgina se adaptan automticamente a los cambios del tamao de la fuente.
Observe como estas dos cajas centrales no se descolocan a pesar de aumentar o disminuir el tamao de la fuente.
diseos mixtos o hbridos que utilizan una combinacin de los mtodos anteriores.
DISEO HBRIDO CON CSS
La maquetacin de una pagina web utilizando hojas de estilo en cascada (css) puede hacerse mediante diseos hbridos, es decir,
combinando las diferentes opciones de maquetacin con css:
diseos de ancho fijo (utilizan pxeles).

diseos de ancho variable, llamados diseos lquidos o fluidos (utilizan porcentajes).
diseos elsticos (utilizan em).
Los diseos hbridos combinan las tres opciones anteriores y representan la mejor opcin para que nuestros diseos sean
compatibles tanto con cualquier resolucin (tamao) de pantalla como con cualquier tamao de letra. Al utilizar em y
porcentajes, ambas unidades relativas, para las medidas de fuentes y cajas, cuando aumentamos o disminuimos el tamao de
fuente en el navegador, o el tamao de pantalla se redimensiona automticamente el tamao de todos los elementos de la pgina
y se respeta nuestro diseo original.
Por tanto, este diseo es el ideal si pretendemos que nuestra web se visualice correctamente en todo tipo de plataformas y/o
dispositivos (telfonos mviles, celulares, ordenadores porttiles, ordenadores de sobremesa, tabletas, etc.).
Por ejemplo, en un diseo hbrido con dos columnas, una de ellas se expresar en porcentajes (%) para que se adapte al tamao
de la ventana del navegador y la otra se expresar en em para que se adapte al tamao del texto.
12
UN EJEMPLO DE DISEO HBRIDO

Un ejemplo de diseo hbrido que combine tanto unidades tipo em como pxeles o porcentajes puede verse aqu.
PGINA DE EJEMPLO DE DISEO HBRIDO CON CSS

En este ejemplo de maquetacin hemos utilizado una combinacin de varios mtodos de diseo css, lo que se denomina diseo
hbrido.
La combinacin de diferentes tipos de unidades, tanto absolutas como relativas, proporciona una gran flexibilidad a nuestros
diseos que podrn adaptarse a cualquier modificacin, tanto de la configuracin de la pantalla, como del tamao de letra.
El diseo hbrido es el ideal si pretendemos que nuestra web se visualice correctamente en todo tipo de plataformas y/o
dispositivos (telfonos mviles, celulares, ordenadores porttiles, ordenadores de sobremesa, tabletas, etc.).
En este ejemplo hemos utilizado un contenedor de 75 em de ancho (equivalente a 1200 px) que alberga varios elementos como:
cabecera, barra de men, anuncios, cuerpo con dos cajas, pie, etc.
En el cuerpo hemos situado dos cajas: izquierda y derecha.
La caja de la izquierda la hacemos flotar a la izquierda y le damos un ancho de 57 em.
La caja de la derecha la hacemos flotar a la derecha y le damos un ancho del 20%.
Con este diseo hbrido conseguimos que la columna que se expresa en em se adapte a los cambios de tamao del texto y que
la columna que se expresa en porcentajes (%) se adapte al tamao de la ventana del navegador.
Puede probarlo pulsando a la vez las teclas Control (Ctrl) y + -. Tambin con la tecla Control (Ctrl) y la rueda del ratn.
Los diseos fijos establecen un diseo inamovible mediante un contenedor de ancho fijo, especificado
en pxeles, por ejemplo 1250 pxeles, que alberga otros componentes tambin de ancho fijo. Los
usuarios que visitan la pgina vern sus elementos siempre con la misma anchura independientemente
de la resolucin de pantalla o del tamao del texto.
En los diseos lquidos o fluidos el ancho de los componentes internos se configura con unidades
relativas tipo porcentaje (%) relacionadas con el tamao de la resolucin de la pantalla del visitante,
adaptndose a la configuracin de la pantalla del usuario pero no al tamao del texto.
13
Los diseos elsticos configuran el ancho de los componentes con unidades relativas tipo em
relacionadas con el tamao del texto. El diseo se adapta si el visitante del sitio cambia el tamao del
texto, pero no se adapta en funcin del tamao de la ventana del navegador.
Los diseos hbridos son una combinacin de las tres opciones anteriores y representan la mejor opcin
para que nuestros diseos sean compatibles tanto con cualquier resolucin (tamao) de pantalla como
con cualquier tamao de letra. Al utilizar unidades relativas para las medidas de fuentes y cajas, al
aumentar o disminuir el tamao de fuente en el navegador, o el tamao de pantalla se redimensiona
automticamente el tamao de todos los elementos de la pgina y se respeta nuestro diseo original.
Por tanto, el diseo hbrido es el ideal si pretendemos que nuestra web se visualice correctamente en
todo tipo de plataformas y/o dispositivos (telfonos mviles, celulares, ordenadores porttiles,
ordenadores de sobremesa, tabletas, etc.).
14
Apendice
PROPIEDADES DE CADA PARTE DE LA CAJA
Contenido (content)
Relleno (padding)
Borde (border)
Margen (margin)
CONTENIDO DE LA CAJA (CONTENT)

El modelo de cajas css hace que todos los elementos html (prrafos, encabezados, imgenes,
lnea horizontal, listas, enlaces, tablas, etc.) generen cajas rectangulares.
La parte central de la caja css que alberga el elemento html es el rea de contenido.
PROPIEDADES ANCHO (WIDTH) Y ALTO (HEIGHT)

Al
rea
de
contenido
se
le
puede
asignar
un
ancho
un
alto
(width
height).
La propiedad width no representa el ancho de la caja sino el ancho interior del rea de contenido,
por lo tanto para calcular el ancho total de la caja debemos sumarle el relleno, los bordes y los
mrgenes. (+ info)
DIMENSIONES DE LAS CAJAS
Ancho = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
Alto = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + marginbottom
Para calcular el ancho total de esta caja a la que hemos asignado un width de 300 px tenemos que sumarle
el padding derecho (5 px) e izquierdo (5 px), los bordes derecho (2 px) e izquierdo (2 px) y los mrgenes
derecho (5 px) e izquierdo (5 px). Total ancho = 300 + 10 + 4 + 10 = 324 px.
Css nos permite definir el ancho y la altura de las cajas y, tambin, controlar los espacios (margen) entre
cajas.
Si no asignamos ningn valor a estas propiedades las dimensiones de la caja vendrn determinadas por el
navegador.
ANCHO (WIDTH)
La propiedad width define el ancho del elemento.
ALTO (HEIGHT)
La propiedad height define la altura del elemento.
En ambos casos lo que definimos es el ancho o el alto del rea de contenido, es decir, que para saber la
anchura y altura total de la caja debemos sumarle el espacio que ocupan las reas de relleno, borde y
margen.
UNIDADES
Se expresan en valores numricos seguidos de una unidad que se expresa con una abreviatura de una o dos
letras.
Entre el valor y la unidad no debe dejarse espacio en blanco.
Si se utilizan valores decimales se separan por un punto, por ejemplo: 2.57em
Al valor cero 0 no es necesario aadirle ninguna unidad.
Las unidades que podemos utilizar pueden ser:
- ABSOLUTAS, indican una longitud fija.
Unidades absolutas: pixel (px), pulgada (in), centmetro (cm), milmetro (mm), punto (pt), pica (pc).
- RELATIVAS, en las que la longitud se calcula con relacin a otros elementos.
Unidades relativas: Porcentaje (%). EM (em), etc.
Las unidades absolutas no pueden adaptarse al navegador o al ancho de la pantalla mientras que las
relativas se adaptan a cualquier resolucin (tamao) de pantalla y a cualquier tamao de letra por lo que son
las ms recomendables si queremos que nuestros diseos de pginas web se visualicen correctamente en
todo tipo de plataformas y/o dispositivos (telfonos mviles, celulares, ordenadores porttiles, ordenadores
de sobremesa, tabletas, etc.).
De igual forma la propiedad height representa el alto del rea de contenido y por tanto para calcular el alto
total de la caja tambin debemos sumarle el relleno, los bordes y los mrgenes. (+ info)
DIMENSIONES DE LAS CAJAS
Ancho = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
Alto = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + marginbottom
Para calcular el ancho total de esta caja a la que hemos asignado un width de 300 px tenemos que sumarle
el padding derecho (5 px) e izquierdo (5 px), los bordes derecho (2 px) e izquierdo (2 px) y los mrgenes
derecho (5 px) e izquierdo (5 px). Total ancho = 300 + 10 + 4 + 10 = 324 px.
Css nos permite definir el ancho y la altura de las cajas y, tambin, controlar los espacios (margen) entre
cajas.
Si no asignamos ningn valor a estas propiedades las dimensiones de la caja vendrn determinadas por el
navegador.
ANCHO (WIDTH)
La propiedad width define el ancho del elemento.
ALTO (HEIGHT)
La propiedad height define la altura del elemento.
En ambos casos lo que definimos es el ancho o el alto del rea de contenido, es decir, que para saber la
anchura y altura total de la caja debemos sumarle el espacio que ocupan las reas de relleno, borde y
margen.
UNIDADES
Se expresan en valores numricos seguidos de una unidad que se expresa con una abreviatura de una o dos
letras.
Entre el valor y la unidad no debe dejarse espacio en blanco.
Si se utilizan valores decimales se separan por un punto, por ejemplo: 2.57em
Al valor cero 0 no es necesario aadirle ninguna unidad.
Las unidades que podemos utilizar pueden ser:
- ABSOLUTAS, indican una longitud fija.
Unidades absolutas: pixel (px), pulgada (in), centmetro (cm), milmetro (mm), punto (pt), pica (pc).
- RELATIVAS, en las que la longitud se calcula con relacin a otros elementos.
Unidades relativas: Porcentaje (%). EM (em), etc.
Las unidades absolutas no pueden adaptarse al navegador o al ancho de la pantalla mientras que las
relativas se adaptan a cualquier resolucin (tamao) de pantalla y a cualquier tamao de letra por lo que son
las ms recomendables si queremos que nuestros diseos de pginas web se visualicen correctamente en
todo tipo de plataformas y/o dispositivos (telfonos mviles, celulares, ordenadores porttiles, ordenadores
de sobremesa, tabletas, etc.).
LA PROPIEDAD FONDO (BACKGROUND)

La propiedad background nos permite definir el color de fondo de un elemento o establecer una o
ms imgenes en el fondo de un elemento.
El fondo de un elemento ocupa la totalidad del rea de contenido ms el rea de relleno, justo
hasta el borde.
Los diseadores de pginas web suelen definir tanto un color de fondo como una imagen. La
imagen tiene prioridad sobre el color de fondo y es la que se visualiza pero, si la imagen no est
disponible, se visualizar el color de fondo y si la imagen de fondo no cubre totalmente la caja del
elemento o si la imagen tiene zonas transparentes, tambin se visualiza el color de fondo.
Combinando imgenes transparentes y colores de fondo se pueden lograr efectos grficos muy
interesantes.
BACKGROUND-COLOR
Caja en la que se ha definido un background-color: #ffffcc
SINTAXIS: background-color:valor
La propiedad background-color especifica el color de fondo de un elemento.
El valor por defecto de esta propiedad es transparente.
El color del fondo se puede definir mediante:
- Nombre del color: red, green, etc.
- Valor RGB: especificando un valor RGB (255,0,0).

- Valor hexadecimal, especificando un valor hexadecimal (#ff0000).
BACKGROUND-IMAGE
SINTAXIS: background-image:url('/images/imagen.gif')
Esta propiedad establece una o ms imgenes que se utilizarn como fondo de un elemento.
Caja en la que se ha definido un background-color: #ffffcc y a la vez la imagen de fondo que se

muestra arriba a la derecha, que por defecto se repite en sentido vertical y horizontal.
Hay varias propiedades que permiten modificar la apariencia de la imagen de fondo de un
elemento:
- BACKGROUND-REPEAT
SINTAXIS: background-repeat:valor
Esta propiedad controla la forma en la que se repiten las imgenes de fondo de los elementos. Por
defecto, si la imagen de fondo que se establece con la propiedad background-image es ms
pequea que el sitio disponible, el navegador repite la imagen en sentido horizontal y vertical
hasta cubrir completamente la superficie del fondo del elemento.
Caja en la que se ha definido un background-color: #ffffcc y a la vez la imagen de fondo que se

muestra arriba a la derecha, con la propiedad background-repeat:no-repeat para que se visualice
solo una vez en la esquina superior izquierda.
Los valores de esta propiedad son los siguientes:
- repeat, coincide con el comportamiento por defecto del navegador y repite la imagen en todas
las direcciones.
- no-repeat, muestra la imagen de fondo solo una vez, en la esquina superior izquierda.
- repeat-x, repite la imagen de fondo slo en direccin horizontal.
- repeat-y, repite la imagen de fondo slo en direccin vertical.
- BACKGROUND-POSITION
Cuando la imagen no se repite, por defecto se muestra en la esquina superior izquierda del
elemento. CSS permite desplazar la imagen de fondo a otra posicin.
- BACKGROUND-ATTACHMENT
Esta propiedad establece si la imagen de fondo permanece fija o si se desplaza por la pgina.
Los valores de esta propiedad son los siguientes:
- scroll. La imagen se desplaza con el resto de la pgina. Es el valor por defecto.
- fixed. La imagen est fija y no se desplaza.
RELLENO DE LA CAJA (PADDING)

El relleno o padding es el rea (opcional) situada entre el contenido del elemento html y el borde
de la caja.
Lo habitual es definir el ancho del relleno en pxeles. El valor por defecto es 0. No se amiten
valores negativos.
Otras unidades que pueden utilizarse son: cm, mm, in, pt, pc, em, ex o %.
Si definimos cuatro valores (padding:15px 10px 25px 10px;) se aplicaran, en el sentido de las
agujas del reloj, por el siguiente orden: superior, derecho, inferior e izquierdo.
Si slo se define un valor, ste se aplica a las cuatro partes del padding.
Por ejemplo, padding:50px, indica que el relleno tendr un ancho de 50 px por todas sus partes.
Si se especifican dos valores, el primero se aplica a los lados superior e inferior y el segundo a los
lados derecho e izquierdo.
Si se especifican tres valores, el primero se aplica al lado superior, el segundo a los lados derecho
e izquierdo y el tercero al inferior.
Cada parte del relleno (superior, derecho, inferior, izquierdo) puede ser definido de forma
independiente. Por ejemplo:
padding-top:50px;
padding-right:20px;
padding-bottom:10px;
padding-left:15px;
BORDE DE LA CAJA (BORDER)

El borde es la parte de la caja que rodea el relleno y el contenido.
TIPOS DE BORDE
SINTAXIS CSS: border-style:valor
Esta caja se ha diseado con un borde de 4 px de ancho de color rojo, siendo el borde superior de
tipo slido, el borde derecho punteado, el inferior tipo lnea discontnua y el izquierdo doble.
none: sin borde. Es el valor por defecto.

solid: borde slido.
dotted: borde formado por puntos.
dashed: borde formado por una lnea discontinua.

double: borde doble.
groove: borde 3D en surco o ranura (El efecto 3D depende del color del borde).
ridge: borde 3D en cresta (El efecto 3D depende del color del borde).
inset: borde 3D con relieve hacia dentro (El efecto 3D depende del color del borde).
outset: borde 3D con relieve hacia fuera (El efecto 3D depende del color del borde).
ANCHO DEL BORDE

SINTAXIS CSS: border-width:valor
Lo habitual es definir el ancho del borde en pxeles.
Esta propiedad (border-width) no funciona si se utiliza sola. Es necesario definir la opcin borderstyle primero:
border-style:solid;
border-width:2px;
COLOR DEL BORDE

SINTAXIS CSS: border-color:valor
El color del borde se puede definir mediante:
- Nombre del color: red, green, etc.
- Valor RGB: especificando un valor rgb (255,0,0).
- Valor hexadecimal, especificando un valor hexadecimal (#ff0000)
Esta propiedad (border-color) no funciona si se utiliza sola. Es necesario definir la opcin borderstyle primero:
border-style:solid;
border-color:red;
AGRUPANDO PROPIEDADES
Esta caja se ha diseado con las mismas propiedades en los cuatro bordes: slidos, de color rojo y
2 px de ancho.
Para abreviar el cdigo css es posible definir todas las propiedades del borde en una sola lnea.
Por ejemplo, para definir un borde slido de 2 px de ancho y de color rojo especificaremos en el
cdigo css: border:2px solid red;
DEFINIENDO DIFERENTES PROPIEDADES A CADA PARTE DEL BORDE

Esta caja se ha diseado con bordes de diferentes estilos, colores y grosores.
Cada parte del borde (superior, derecho, inferior, izquierdo) puede ser definido de forma
diferente.
Por ejemplo:
border-top:solid 4px red;
border-right:dotted 7px green;

border-bottom:dashed 6px orange;
MARGEN DE LA CAJA (MARGIN)

El margen es la parte ms exterior de la caja y se sita por fuera del borde. Es completamente
transparente, no se le puede asignar ningn color.
Lo habitual es definir el ancho del margen en pxeles, siendo el valor por defecto de 0 px.
Si se define como auto el navegador calcula el margen automticamente.
Para centrar esta caja se han utilizado mrgenes auto a derecha e izquierda
Como los navegadores alinean por defecto las pginas web a la izquierda de la pantalla,
estableciendo valores auto para los mrgenes derecho e izquierdo podemos centrar
horizontalmente la caja.
Otras unidades que pueden utilizarse son: cm, mm, in, pt, pc, px, em, ex o % y pueden ser
valores tanto positivos como negativos.
Si definimos cuatro valores (margin:15px 50px 25px 80px;) se aplican, en el sentido de las agujas
del reloj, por el siguiente orden: superior, derecho, inferior e izquierdo.
Si slo se define un valor, ste se aplica a los cuatro mrgenes.
Por ejemplo, margin:50px, indica que todos los mrgenes tendrn un ancho de 50 px.
Si se especifican dos valores, el primero se aplica a los mrgenes superior e inferior y el segundo
a los mrgenes derecho e izquierdo.
Si se especifican tres valores, el primero se aplica al margen superior, el segundo a los mrgenes
derecho e izquierdo y el tercero al margen inferior.
Cada parte del margen (superior, derecho, inferior, izquierdo) puede ser definido de forma
independiente. Por ejemplo:
margin-top:50px;
margin-right:200px;
margin-bottom:100px;
margin-left:150px;

Manual Maquetacion 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 PDF

Caricato da

Copyright:

Formati disponibili

MANUAL DE MAQUETACIN DE PGINAS WEB CON CSS

maquetacin con css a dos columnas

maquetacin con css a tres columnas

DISEOS CON DOS COLUMNAS

Diseo 1: columna izquierda de ancho fijo de 300 px y columna derecha de ancho

DISEO CON DOS COLUMNAS: IZQUIERDA CON ANCHO FIJO DE 300 px

El cdigo css usado es el siguiente:

DISEO CON DOS COLUMNAS DE ANCHO VARIABLE:

El cdigo css usado es el siguiente:

DISEO CON DOS COLUMNAS: DERECHA CON ANCHO FIJO DE

El cdigo css usado es el siguiente:

El cdigo html usado es el siguiente:

DISEO CON TRES COLUMNAS

DISEO CON TRES COLUMNAS: IZQUIERDA Y CENTRO DE

El cdigo css usado es el siguiente:

div id="izquierda2">< /div>

< div id="pie2">

DISEO CON TRES COLUMNAS: IZQUIERDA DE ANCHO FIJO, CENTRO Y

El cdigo css usado es el siguiente:

div id="izquierda2">< /div>

< div id="pie2">

DISEANDO CAJAS CON CSS

PARTES DE UNA CAJA CSS

Es posible modificar las caractersticas de cada parte de la caja. (+ info)

En este caso la separacin entre

Lo mismo ocurre con el alto de la caja.

DISEANDO CAJAS CON CSS3

TIPOS DE DISEO CON CSS

diseos de ancho fijo (utilizan pxeles).

/*Para centrar todo lo que contenga el body y asignar un tamao de fuente de 1 em */

EJEMPLO DE DISEO ELSTICO CON CSS

diseos de ancho fijo (utilizan pxeles).

UN EJEMPLO DE DISEO HBRIDO

PGINA DE EJEMPLO DE DISEO HBRIDO CON CSS

CONTENIDO DE LA CAJA (CONTENT)

PROPIEDADES ANCHO (WIDTH) Y ALTO (HEIGHT)

LA PROPIEDAD FONDO (BACKGROUND)

- Valor RGB: especificando un valor RGB (255,0,0).

Caja en la que se ha definido un background-color: #ffffcc y a la vez la imagen de fondo que se

Caja en la que se ha definido un background-color: #ffffcc y a la vez la imagen de fondo que se

RELLENO DE LA CAJA (PADDING)

BORDE DE LA CAJA (BORDER)

none: sin borde. Es el valor por defecto.

dashed: borde formado por una lnea discontinua.

ANCHO DEL BORDE

COLOR DEL BORDE

DEFINIENDO DIFERENTES PROPIEDADES A CADA PARTE DEL BORDE

border-right:dotted 7px green;

MARGEN DE LA CAJA (MARGIN)

Potrebbero piacerti anche

/Para centrar todo lo que contenga el body y asignar un tamao de fuente de 1 em /