Guia 06 hojas de estilo

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