Unidad 6. Ejercicio: Crear un hiperenlace

Objetivo

Practicar cómo crear un hiperenlace.

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 quienes.htm, que aparece en el panel Archivos.
5. Se abrirá el documento en Dreamweaver.
6. Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades.
7. Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botón para desplegar sus propiedades más avanzadas.
8. Selecciona la imagen del logotipo de aulaClic. Para ello hay que hacer clic sobre ella.
9. En Vínculo, del inspector de propiedades, escribe https://www.aulaclic.es.
10. En Destino selecciona la opción _blank.
11. Pulsa fuera del texto para que deje de estar seleccionado y se le apliquen todos los cambios.
12. Pulsa F12 para ver el resultado en tu navegador, observa que si posicionas el ratón encima de la imagen, el puntero del ratón cambia de aspecto (normalmente toma forma de mano con el dedo índice señalando) esto te indica que asociado a la imagen hay un hiperenlace y en la barra de estado puedes ver la página a la que enlaza.
    Observa también que la imagen muestra un recuadro naranja alrededor, que no queda demasiado bien con su fondo transparente.
13. Cierra la ventana del navegador.
14. Vamos a quitar el borde de la imagen. En el Inspector de propiedades CSS, pulsa el botón CSS Designer.
15. En el subpanel Fuentes selecciona estilococina.css.
16. En el subpanel Selectores pulsa el botón para añadir un selector.
17. En la caja de texto escribe a img.
18. En el subpanel Propiedades pulsa el icono Borde.
19. En el icono que representa los cuatro bordes establece la propiedad style en none.
20. Haz doble clic sobre el documento menu.htm, que aparece en el panel Archivos.
21. Para cada elemento de la lista, selecciona el texto y crea el enlace a la página correspondiente del sitio. No pongas nada en Destino.
22. Con el cursor en un elemento de la lista, en el Inspector de propiedades CSS pulsa el botón CSS Designer.
23. En el subpanel Selectores pulsa el botón para añadir un selector.
24. Escribe en la caja de texto .menu li a.
25. En el subpanel Propiedades, pulsa el icono Texto.
26. Establece la propiedad color introduciendo #000 y en Text-decoration selecciona el primer icono none.
27. Pulsa el icono Diseño del subpanel Propiedades.
28. En la sección Padding modifica el valor del esquema a 3 en la parte superior. Los otros valores quedan en cero.
29. ,En Display, selecciona Block. Esto hará que el enlace ocupe todo el elemento de la lista.
30. Crea un nuevo selector en el subpanel Selectores. En la caja de texto escribe .menu li a:hover (cuando el cursor esté sobre el elemento).
31. En el subpanel Propiedades pulsa el icono Texto.
32. En Color introduce #DB8C15.
33. Haz clic en el menú Archivo → Guardar todo.