paso a paso instrucciones.docx

7/25/2019 Paso a paso instrucciones.docx

1/3

Paso a paso instrucciones

1 Incluir capas para organizar el documento

A partir del documento 0crear las siguientes capas:

Capa #contenedor que incluye todo el contenido dentro de la pgina, es decir, contiene todo lo que

hay dentro de body.

Dentro de esta capa #contenedor habr a su vez las siguientes capas:

Capa #cabecera para la parte superior de la pgina donde irn las siguientes capas:

. Capa #busqueda donde ir el !ormulario que busca en google.

Capa #menu para contener una lista no numerada con las opciones de los menus

Capa #lateralizquierdo que contendr a su vez:

. Capa #noticias

". Capa #enlaces

. Capa #publicidad

Capa #central que contendr una capa por cada articulo central $en nuestro caso art%culos&

Capa #lateralderecho con articulos menos importantes

Capa #pie

#cabecera

#menu

#lateralizquierdo

#noticias

#enlaces

#publicidad

#central

#lateralderecho

#pie

2 Dimensionar las capas.

A partir del resultado obtenidoen el anterior paso vamos a dar las siguientes dimensiones en una ho'a de

estilos aparte llamada pap.css

borde a las areas princiaples

#contenedor: ancho (00 p), margen auto.

#identi!icacion

#busqueda
http://www.suarezdefigueroa.es/manuel/LMSGI/css/pasoapaso0.htmlhttp://www.suarezdefigueroa.es/manuel/LMSGI/css/pasoapaso0.htmlhttp://www.suarezdefigueroa.es/manuel/LMSGI/css/pasoapaso1.htmlhttp://www.suarezdefigueroa.es/manuel/LMSGI/css/pasoapaso1.htmlhttp://www.suarezdefigueroa.es/manuel/LMSGI/css/pasoapaso0.html


2/3

#cabecera: ancho 00 *. !lotante derecha. borde "p) verde, relleno 0.+ em

#identi!icacion: ancho 00 p) alto 00 p) !lotante izquierda

#busqueda: !lotante derecha, ancho "+0 p) alto 00 p)

#menu: ancho 00* !lotante derecha. alto 0 p) borde "p blanco

#pie: ancho 00*, clear: both

#identi!icador: !lotante izquierda, ancho 00p), alto 00p)

#lateralizquierdo: !lotante izquierda, ancho "-+ p), margen derecho + p)

#principal: !lotante izquierda, ancho -00 p), clear ninguno

#lateralderecho !lotante derecha, ancho "-+ p), margen izquierda +p)

3 Menu

A partir del resultado obtenidovamos a dise/ar el t%pico menu que hay en todas las plantillas, para ello el menu

lo visualizamos como un bloque, cada opcin ser un cuadrado en linea, a los hipervinculos le quitaremos los

subrayados y dise/aremos el :hover del hipervinculo con un !ondo no repetido y una iluminacin de sombra al

te)to. 1os estilos quedar%an:

#menu ul: estilo lista:none margen: auto display:bloc2

#menu ul li: display:inline !loat:le!t altura "+p) ancho "0p) letra 3erdana 4p)

#menu ul li a: te)t5decoration: none relleno "0 p) color #DC4606

#menu ul li a:hover imagen de !ondo orange7bullet.gi!no repetida a la izquierda sombra radio +p)

#8(8C4D

9ara los mens tambi;n podemos a/adir una clase que se aplicar a la opcin de men cuando la pgina que se

visualiza es la asociada a la opcin de men. 9or e'emplo cuando la pgina visualizada es la tres a la opcin de

menu tres le aplicamos esta clase.

#menu ul li a.seleccionado: !ondo gris, letra blanca negrita. $en el e'emplo hemos seleccionado laopcion tres&

4 Decorando los bloques

A partir del resultado obtenidovamos a decorar poco a poco los di!erentes apartados:

8ondo de pginarepetido en )

8ondo de la cabecera

8ondo de principal

1etra en blanco en cabecera


3/3

la clase .articulo:8ondo, relleno "0 pi)els.

el estilo .articulo h": !ondo #D66+8D color #=00 relleno 0 p) y margenes izquierdo y derecho

negativo en 0

6stilo multiple para #noticias, #enlaces, #publicidad: !ondono repetido relleno +p) borde derecho yin!erior.

6l estilo #lateralizquierdo le pondremos repetida la imagen !lateral.gi!

6l estilo #principal le pondremos repetida la imagen !principal.'pg

h tama/o letra +0* negrita !ondo !titulos.gi!relleno 0 p)

6stilo .articulo img ser !loat le!t margen +p)

#lateralderecho h" en blanco subrayado y centrado

9ie de pgina: ancho (00 p) posicion !i'a borde superior e in!erior azul color de !ondo #pie #8D8->+

El resultado final sereste
http://www.suarezdefigueroa.es/manuel/LMSGI/imagenes/farticulo.jpghttp://www.suarezdefigueroa.es/manuel/LMSGI/imagenes/farticulo.jpghttp://www.suarezdefigueroa.es/manuel/LMSGI/imagenes/fnoticias.gifhttp://www.suarezdefigueroa.es/manuel/LMSGI/imagenes/fnoticias.gifhttp://www.suarezdefigueroa.es/manuel/LMSGI/imagenes/flateral.gifhttp://www.suarezdefigueroa.es/manuel/LMSGI/imagenes/fprincipal.jpghttp://www.suarezdefigueroa.es/manuel/LMSGI/imagenes/ftitulos.gifhttp://www.suarezdefigueroa.es/manuel/LMSGI/css/pasoapaso4.htmlhttp://www.suarezdefigueroa.es/manuel/LMSGI/css/pasoapaso4.htmlhttp://www.suarezdefigueroa.es/manuel/LMSGI/imagenes/farticulo.jpghttp://www.suarezdefigueroa.es/manuel/LMSGI/imagenes/fnoticias.gifhttp://www.suarezdefigueroa.es/manuel/LMSGI/imagenes/flateral.gifhttp://www.suarezdefigueroa.es/manuel/LMSGI/imagenes/fprincipal.jpghttp://www.suarezdefigueroa.es/manuel/LMSGI/imagenes/ftitulos.gifhttp://www.suarezdefigueroa.es/manuel/LMSGI/css/pasoapaso4.html

paso a paso instrucciones.docx

Documents