Unidad 5. Ejercicio paso a paso: Crear un hiperenlace
Objetivo
Practicar
cómo crear un hiperenlace.
Ejercicio
Si no tienes abierto Dreamweaver,
ábrelo para realizar el ejercicio.
Si no aparece el panel Archivos,
ábrelo a través del menú Ventana,
opción Archivos.
Selecciona el sitio Cocina en el panel Archivos.
Haz doble clic sobre el documento quienes.htm, que aparece en el panel Archivos.
Se abrirá el documento en Dreamweaver.
Si no aparece el inspector
de propiedades, ábrelo a través del menú
Ventana, opción Propiedades.
Si el inspector
de propiedades no se muestra en su totalidad, pulsa sobre el
botón
para desplegar sus propiedades más avanzadas.
Selecciona la imagen del logotipo
de aulaClic. Para ello hay que hacer clic sobre ella.
En Vínculo,
del inspector de propiedades, escribe
http://www.aulaclic.es.
En Dest
selecciona la opción _blank.
Pulsa fuera del texto para que
deje de estar seleccionado y se le apliquen todos los cambios.
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.
Cierra la ventana del navegador.
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.
En Tipo de selector elige Compuesto.
En Nombre del selector, escribe a img.
En Definición de regla selecciona la hoja estilococina.css.
Pulsa Aceptar.
Ve a la categoría Borde. En Border-style elige none y pulsa Aceptar.
Haz doble clic sobre el documento menu.htm, que aparece en el panel Archivos.
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.
En el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nueva regla CSS> y pulsa en Editar regla.
Observa que aparece el selectir compuesto .menu li a. Pulsa Aceptar.
En la categoría Tipo, en color introduce #000 y en Text-decoration selecciona none.
En la categoría Cuadro, en Padding, deja marcado Igual para todo e introduce 3 en Top.
En la categoría Bloque, en Display, selecciona Block. Esto hará que el enlace ocupe todo el elemento de la lista.
Pulsa Aceptar.
En el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nueva regla CSS> y pulsa en Editar regla.
Observa que aparece el selectir compuesto .menu li a. Complétalo para que quede .menu li a:hover (cuando el cursor esté sobre el elemento). Pulsa Aceptar.
En la categoría Tipo, en Color introduce #DB8C15 y pulsa Aceptar.