Unidad 14. Ejercicio paso a paso: 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 index.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 en el marco izquierdo.
7. Haz clic sobre el menú Insertar.
8. Elige la opción Objetos de diseño, luego elige la opción Div PA.
9. Haz clic derecho sobre la esquina superior izquierda (el recuadro blanco), y en el menú contextual elige Editar...
10. Escribe sugerencia como nuevo ID y pulsa Aceptar.
11. Sitúa el punto de inserción dentro de la capa.
12. Escribe el texto no olvides mandarnos tus dudas y sugerencias.
13. Selecciona la capa pulsando sobre el cuadrado blanco que aparece en su esquina superior-izquierda.
14. Utilizando los controles para redimensionar y mover la capa, haz que quede debajo de la imagen, centrada, y que todo el texto quepa dentro. Si lo prefieres, puedes introducir los valores:
    • En Iz escribe 56px.
    • En An escribe 150px.
    • En Al escribe 52px.
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 (por defecto #apDiv1, pero lo hemos cambiado a #sugerencia), y pulsa el botón Editar regla.
17. Edita las propiedades CSS para darle un fondo blanco, 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 la capa ha quedado debajo de la imagen de sustitución, si no haz clic en el cuadrado blanco de su esquina superior-izquierda y arrástralo hasta que quede centrado en el marco y bajo la imagen de email. Comprueba también que el tamaño permite leer todo el texto.
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.