Unidad 14. Ejercicio: Insertar una capa

Objetivo

Practicar las operaciones que hay que realizar para insertar una capa y modificar sus propiedades.

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 doble clic sobre el documento menu.htm, que aparece en el panel Archivos.
   Se abrirá el documento en Dreamweaver.
5. Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades.
6. Sitúa el punto de inserción a continuación de la imagen de sustitución de email que habíamos incluido y pulsa Enter para que el punto de Inserción vaya a la siguiente fila.
7. Haz clic sobre el menú Insertar.
8. Elige la opción Div, o bien Estructura y luego Div.
9. En el cuadro de diálogo Insertar Div establece la propiedad ID escribiendo sugerencia y pulsa el botón Nueva Regla CSS.
10. Asegúrate que en el cuadro de diálogo, el destino de la nueva regla sea estilococina.css.
11. En la categoría Posición establece su ancho en 150px, el alto en 52px y una distancia de 56px desde la izquierda. En Posición selecciona Absoluta.
12. Pulsa Aceptar para cerrar la ventana Definición de Regla CSS y Aceptar para cerrar el cuadro de diálogo Insertar Div.
13. Sitúa el punto de inserción dentro de la capa.
14. Escribe el texto No olvides mandarnos tus dudas y sugerencias.
15. Haz clic en el contenido y ve al Inspector de propiedades CSS.
16. Asegúrate que está seleccionada como Regla de destino el nombre de la capa (#sugerencia), y pulsa el botón Editar regla.
17. Edita las propiedades CSS para darle un fondo blanco (#FFF), un borde gris (#666) de 1px sólido, reducir el tamaño de la fuente a un 90% y darle un padding de 5px. Acepta los cambios del editor de estilo.
18. Comprueba que el tamaño permite leer todo el texto, si no es así, arrastra alguno de los recuadros para ajustarla.
19. Guarda y visualízalo en el navegador.
20. Selecciona la capa pulsando sobre el cuadrado blanco que aparece en su esquina superior-izquierda.
21. En Vis selecciona hidden.
22. Pulsa fuera de la capa para que deje de estar seleccionada y se le aplique el último cambio.
23. Haz clic sobre el botón Guardar de la barra de herramientas.
24. Comprueba en el navegador que la capa ya no se muestra.