Unidad 5. 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 http://www.aulaclic.es.
  10. En Dest 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, en Regla de destino, elige Nueva regla, y pulsa el botón Editar regla.
  15. En Tipo de selector elige Compuesto.
  16. En Nombre del selector, escribe a img.
  17. En Definición de regla selecciona la hoja estilococina.css.
  18. Pulsa Aceptar.
  19. Ve a la categoría Borde. En Border-style elige none y pulsa Aceptar.
  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. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nueva regla CSS> y pulsa en Editar regla.
  23. Observa que aparece el selector compuesto .menu li a. Pulsa Aceptar.
  24. En la categoría Tipo, en color introduce #000 y en Text-decoration selecciona none.
  25. En la categoría Cuadro, en Padding, deja marcado Igual para todo e introduce 3 en Top.
  26. En la categoría Bloque, en Display, selecciona Block. Esto hará que el enlace ocupe todo el elemento de la lista.
  27. Pulsa Aceptar.
  28. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nueva regla CSS> y pulsa en Editar regla.
  29. Observa que aparece el selector compuesto .menu li a. Complétalo para que quede .menu li a:hover (cuando el cursor esté sobre el elemento). Pulsa Aceptar.
  30. En la categoría Tipo, en Color introduce #DB8C15 y pulsa Aceptar.
  31. Haz clic en el menú ArchivoGuardar todo.

   Inicio