Paso a paso instrucciones.docx
Transcript of 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 -
7/25/2019 Paso a paso instrucciones.docx
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
-
7/25/2019 Paso a paso instrucciones.docx
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