Unidad 14. Ejercicio: Asignar ID a capas y establecer sus propiedades CSS

Objetivo

Practicar las operaciones que hay que realizar para asignar una ID a capas y establecer sus propiedades CSS.

Ejercicio

1. Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.
2. Si no aparece el panel Archivos, ábrelo a través del menú Ventana, opción Archivos.
3. Selecciona el sitio Cocina en el panel Archivos.
4. Haz clic en el menú Archivo y abre los siguientes archivos: menu.htm, platosemana.htm, postresemana.htm, quienes.htm y tureceta.htm. Cada archivo quedará en una pestaña separada de Dreamweaver.
5. Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades.
6. Haz clic en la pestaña de menu.htm, para que trabajes con ese archivo.
7. Sitúa el punto de inserción a la izquierda de la imagen superior y arrastra pulsando el ratón hasta que hayas seleccionado todos los elementos. Recuerda que debes incluir una capa oculta que verás al arrastrar el ratón.
8. Haz clic sobre el menú Insertar.
9. Elige la opción Div, o bien Estructura y luego Div.
10. En el cuadro de diálogo Insertar Div establece la propiedad ID c_izquierda y pulsa el botón Nueva Regla CSS.
11. En el cuadro de diálogo siguiente asegúrate que la definición de la regla sea el archivo estilococina.css.
12. En la categoría Cuadro establece su ancho en 270px, el alto en auto y la propiedad float en izquierda (left). Verás que la capa se posiciona a la izquierda de la ventana de diseño con todos los elementos de la página.
13. Haz clic fuera de la capa, a la derecha. Haz clic en el menú Insertar y luego en Div.
14. En el cuadro de diálogo Insertar Div establece la propiedad ID como c_derecha y pulsa el botón Nueva Regla CSS.
15. En el cuadro de diálogo siguiente asegúrate que la definición de la regla sea el archivo estilococina.css.
16. En la categoría Cuadro establece su ancho en auto, el alto en auto, la propiedad float en izquierda (left) y margen izquierdo en 20px (debes desactivar la casilla Igual para todo de márgenes.). Verás el recuadro de la capa recién creada.
17. Haz clic en la pestaña del archivo quienes.htm. Haz clic a la izquierda del título y selecciona todo el contenido de la página. Luego utiliza la opción Edición, Copiar.
18. Haz clic en la pestaña del archivo menu.htm y pega el contenido dentro de la capa de la derecha.
19. Utiliza el menú Archivo, Guardar como y grábalo con el nombre index.htm.
20. Haz clic en el aspa de la pestaña del archivo quienes.htm para que lo cierres.
21. Utiliza de nuevo el menú Archivo, Guardar como y grábalo ahora con el nombre quienes.htm. Se abrirá un cuadro de diálogo preguntando si debe sustituirse el archivo, indica que sí.
22. Haz clic en la pestaña del archivo platosemana.htm, selecciona todo el contenido de la página y copialo con el menú Edición, Copiar. Enseguida cierra la pestaña de platosemana.htm
23. Haz clic en la pestaña del archivo index.htm, selecciona todo el contenido de la capa de la derecha y bórralo, después haz clic en el menú Edición, Pegar.
24. Utiliza el menú Archivo, Guardar como y grábalo ahora como platosemana.htm, sustituye el archivo anterior.
25. Repetiremos el proceso para postresemana.htm. Ve a la pestaña de postresemana.htm, selecciona y copia todo el contenido y cierra la pestaña, luego ve a la pestaña index.htm, elimina el contenido de la capa de la derecha y pega.
26. Grábalo ahora como postresemana.htm, sustituyendo el anterior.
27. Finalmente, repite el proceso para tureceta.htm (copia el contenido de la página, ciérrala, pégalo en la capa derecha del archivo index.htm y guarda la página con el nombre tureceta.htm, sustituyendo la anterior).
28. Utiliza la opción de menú Archivo, Guardar todo para que guardes los cambios en el archivo estilococina.css.

Con esto haz creado toda la estructura del sitio Cocina. Prueba la página index.htm en tu navegador y comprueba que con el menú puedes moverte a todas las páginas del sitio.

Ya ahora sólo falta un último detalle que realizaremos en el capítulo 15 para que el sitio quede listo.