Guía 6 Aplicar Hojas de estilo a nuestra Plantilla PROYECTO VENTA DE LIBROS POR INTERNET 1. Acceda a su carpeta raíz llamado myweb y dentro de ella cree una carpeta llamada “CSS”
Ing. Godofredo Pocori Umeres
2. Creamos un nuevo documento en Dreamwaver del tipo css
1
3. Guardamos este archivo dentro de la carpeta css con el nombre style.css
Ing. Godofredo Pocori Umeres
4. Proceso de guardado
2
Quedando:
Ing. Godofredo Pocori Umeres
5. Regresamos a nuestra plantilla y lo vinculamos con el archivo estyle.css que hemos creado
3
6. Ahora tenemos que tener a la medida las siguientes medidas para configurar el estilo de cada contenedor.
Ing. Godofredo Pocori Umeres
7. Seleccionamos el div container y agregamos un estilo en su hojas de estilo.
4
5
Ing. Godofredo Pocori Umeres
Ing. Godofredo Pocori Umeres
8. Propiedades en la hoja de estilo
6
Ing. Godofredo Pocori Umeres
9. Ahora seleccionamos el div header, similar a lo anterior agregamos una nueva regla; puede agregar color de fondo dentro de la regla, si es que lo desea
7
Ing. Godofredo Pocori Umeres
10. Las reglas de estilo en cuadro es
8
main
Ing. Godofredo Pocori Umeres
11. Ahora seleccionamos el div
9
13. Selccionamos la etiqueta left y configuramos su estilo
Ing. Godofredo Pocori Umeres
12. Estilo para el contenedor main
1 0
15. Seleccionamos el container2 y configuramos su estilo
Ing. Godofredo Pocori Umeres
14. Configuramos sus propiedades en un estilo
1 1
17. Seleccionamos el div content y lo configuramos
Ing. Godofredo Pocori Umeres
16. Configuramos sus propiedades
1 2
19. Seleccionamos el div right y lo configuramos
Ing. Godofredo Pocori Umeres
18. Configuramos las propiedades del estilo
1 3
Borramos el texto que queda “Colocar aquí el contenido para id "container2"” en el contenedor container2 y el espacio sobrante.
Ing. Godofredo Pocori Umeres
20. Configuramos sus propiedades
1 4
21. Finalmente seleccionamos el div footer y le damos un estilo
Ing. Godofredo Pocori Umeres
Nota: Eliminar los espacios vacĂos que no necesitamos. 22. Quedando nuestra plantilla como se muestra en la figura
1 5
Ing. Godofredo Pocori Umeres
23. Ejercicios:
1 6