1. Crear Hipervínculos
La creación de enlaces es algo cotidiano e importante en el proceso de desarrollo de un sitio Web. Los enlaces entre sus páginas conformarán la estructura del sitio.
Dreamweaver nos ofrece varias posibilidades para crear vínculos. Esta es una de las bazas de este programa para facilitar el trabajo al diseñador. Tiene varios métodos
que están pensados para ser rápidos e intuitivos, sobre todo para crear enlaces entre las páginas de un mismo sitio Web. Entr e todas estas opciones cada uno elegirá
la que le resulte más rápida en cada ocasión.
¡MUCHO OJO!
Cuando vayas a introducir una dirección URL absoluta como vínculo ( por ejemplo, a una
página externa al sitio web) debes asegurarte de que la incluyes completa. Con protocolo,
servidor, ruta, archivo y los signos de separación.
Basta que te confundas en una letra para que el navegador no encuentre el archivo. Una buena
fórmula consiste en visitar la página con el navegador y cuando se haya comprobado se copia
la URL de la barra de direcciones y se pega en el lugar correspondiente en Dreamweaver.
Utilizando el icono de carpeta o el campo de texto Vínculo del
inspector de Propiedades
1. Seleccionamos el texto que deseamos que se convierta en hipervínculo.
2. Abrimos el inspector de Propiedades (menú Ventana > Propiedades) y llevamos a
cabo una de las siguientes operaciones:
Escribimos el destino directamente en el campo de texto Vínculo.
o Para enlazar con un documento del sitio escribe la ruta y el nombre del
archivo. (mejor seleccionarlo con otro método).
o Para establecer un vínculo con un documento externo escribimos la
dirección absoluta URL.
Pulsamos en el icono de carpeta situado a la derecha del cuadro de texto
Vínculo para localizar y seleccionar un archivo de nuestro sitio.
2. Vemos que basta con seleccionar el archivo de destino para que
automáticamente escriba la dirección URL. Eso si, habrá que tener cuidado de
seleccionar en este cuadro siempre la opción Relativa a Documento, ya que
la otra opción nos puede dar muchos disgustos.
Crear un hipervínculo: método 1
Señalar archivos para crear enlaces relativos.
¡¡Este método es mi favorito!!:
1. Seleccionamos el texto que deseamos convertir en hipervínculo
2. Activamos el panel Archivos > Sitio , el cual muestra todos los documentos que
contiene el sitio en el que trabajamos.
3. Arrastramos el icono de señalización de archivos , situado a la derecha del cuadro
de texto Vínculo del inspector de Propiedades, y señalamos un documento de la solapa
Sitio.
3. 4. Liberamos el botón del ratón y comprobamos que el archivo escogido aparece en el
campo Vinculo del inspector de Propiedades. Así de fácil: apuntas, disparas... y listo.
Crear un hipervínculo: método 2
Desde una selección de un documento abierto
1. Selecciona un texto.
2. Mantén la tecla Mayúsculas pulsada.
3. Arrastra la selección (con Mayúscula presionada). Veras que el cursor de convierte en
el marcador de archivos.
4. Señala un documento en la solapa Sitio.
4. 5. Libera el botón del ratón. Comprueba que el archivo escogido aparece en el campo
Vínculo del inspector de Propiedades.
Crear un hipervínculo: método 3
Utilizando el menú Insertar
Éste es el método general y más completo (aunque un poco lento):
1. Sitúa el cursor en la zona del documento en donde quieres que aparezca el
hipervínculo
2. Realiza una de estas dos operaciones para mostrar el cuadro de dialogo Hipervínculo
o Vamos al menú Insertar > Hipervínculo
o Pulsamos sobre el botón Hipervínculo del panel Insertar > Común.
3. Para realizar un enlace simple basta con rellenar estos campos de texto:
o Texto : el texto que se mostrará como hipervínculo en el documento.
o Vínculo : la dirección URL del vínculo o haga clic en el icono de carpeta para
localizar y seleccionar un archivo dentro del sitio web (hipervínculo relativo).
o Destino : Lo explicaremos detenidamente al final de esta Unidad.
o Título: Escribiremos un texto alternativo que se muestra en un letrero amarillo.
Los otros campos son relativos a la accesibilidad del enlace, presiona el botón Ayuda si
quieres más información.
4. Aceptamos y el resultado es este: Buscar con google
Crear un hipervínculo: método 4
¡Nota!
Si lo que queremos es que un texto deje de ser enlace y pase a ser texto normal basta con
que eliminemos la ruta que tenga en el campo Vínculo del panel de Propiedades... le
estaremos quitanto la propiedad de enlace.
Hipervínculos de correo electrónico
5. Cuando un usuario hace clic en un enlace de correo electrónico se abre en una ventana el programa de correo electrónico del u suario con un mensaje en blanco (se
utiliza el programa de correo configurado en el navegador del usuario). En la ventana de mensaje de correo electrónico, en el campo Para se completa
automáticamente la dirección de correo electrónico establecida en el enlace.
Por ejemplo, si se quieren recibir comentarios de los usuarios que visitan la página, se puede crear un hipervínculo que per mita redactar y enviar un mensaje de correo
electrónico a una determinada dirección.
Ejemplo: Para contactar conmigo pulsa aquí
Código: Para contactar conmigo pulsa <a href="mailto:profesor@hotmail.com">aqui</a>
¡Nota! No todos los exploradores de Web admiten hipervínculos a las direcciones de correo
electrónico. Para que funcione, es imprescindible que el usuario que pica sobre el enlace tenga
configurado su programa de correo electrónico.
El procedimiento para realizar un enlace de este tipo es el siguiente:
1. Sitúa el cursor donde quieres insertar el hipervínculo o selecciona el texto que deseas
que se convierta en enlace.
2. Realiza una de estas operaciones para insertar el hipervínculo:
o Selecciona Insertar/Vínculo de correo electrónico
o Pulsa el icono de la solapa Común del panel Insertar.
Aparecerá este cuadro de dialogo:
3. Completa los campos de texto:
o Texto : Texto que se mostrará como enlace. Si hemos seleccionado texto
antes de insertar el vínculo aparecerá en este casillero.( Ejemplo: aquí )
o Correo electrónico: Dirección de correo electrónico a la que queramos que
escriba el usuario.( Ejemplo: profesor@hotmail.com )
4. Haremos clic en Aceptar
También se puede introducir un vínculo a un correo electrónico directamente desde el cuadro Vínculo del inspector de Propiedades. Solo has de
escribir mailto: seguido de la dirección de correo. Por ejemplo: mailto:profesor@hotmail.com (sin espacio alguno entre los dos puntos y la dirección)
Crear un hipervínculo de correo electrónico
Hipervínculos a marcadores
Hay enlaces que no nos llevan a otros documentos, sino que nos llevan a un lugar determinado de la página. Esos lugares de la misma página a los que nos dirige el
enlace están marcados. Para marcar se utilizan marcadores, También llamados Anclas o Anclaje con nombre (complicado nombre que utiliza Dreamweaver). Un
marcador es una posición en una página que se ha marcado, lo que permite crear un hipervínculo a dicho marcador con el fin de mostrar una determinada sección de
una página Web.
Ejemplo: Repasa cómo crear vínculos de correo electrónico
Código del marcador:<a name="hiper">Crear Hipervínculos de correo electrónico</a>
Código del enlace:<a href="#hiper">Repasa cómo crear vínculos de correo electrónico</a>
Como ves, un hipervínculo a un marcador, se indica mediante el signo (#), que precede a la dirección URL de destino. Por lo tanto cuando utilizamos marcadores hay
dos tareas que realizar, en primer lugar crear los marcadores y en segundo lugar hacer los enlaces a dichos marcadores.
Crear un marcador
6. 1. Situamos el cursor donde deseamos insertar el marcador
2. Realizamos una de estas operaciones:
o Seleccionamos menú Insertar > Anclaje con nombre.
o Pulsamos el botón "ancla" de la solapa Común del panel Insertar.
Aparecerá este cuadro de dialogo:
3. Escribimos un nombre para el marcador y aceptamos. (Es importante respecto de la
compatibilidad no incluir espacios ni caracteres especiales dentro de los marcadores).
Donde hemos insertado el marcador aparecerá este icono . Solamente es una ayuda visual para localizar los marcadores en la vista de diseño que no se
reproducirán en el navegador.
¡Nota! Si no se muestra la ayuda visual del icono de marcador, selecciona Ver/Ayudas
visuales/Elementos invisibles.
Crear un enlace a un marcador
1. Seleccionamos el texto que deseamos que se convierta en enlace.
2. En el cuadro de texto Vinculo del inspector de Propiedades, introducimos el signo
almohadilla (#) seguido del nombre del marcador. Por ejemplo:
o Para enlazarlo con un marcador, situado en el inicio de la misma página,
llamado "arriba", escribimos #arriba.
o Para enlazarlo con un marcador llamado "arriba" situado en un documento
distinto pero en la misma carpeta, escribimos nombredelarchivo.htm#arriba.
Una forma mas sencilla de hacer estos enlaces consiste en utilizar el señalizador de archivos (recuerda, , situado a la derecha del campo Vínculo ¡Muy útil!)
1. Seleccionamos el texto que deseamos convertir en enlace.
2. Podemos utilizar cualquiera de estos dos métodos:
o
Arrastramos el señalizador hasta el icono que localiza el marcador
o
Mantenemos pulsada la tecla de Mayúsculas mientras arrastramos el texto
hasta el marcador deseado.
3. Liberamos el botón del ratón. ¡Y ya está!
7. Crear un marcador y un enlace al marcador
Destino-Target de los Hipervínculos
Cuando pulsamos en un enlace, el archivo al que llamamos necesita de una ventana del navegador para mostrarse. Por defecto el documento se abre en la misma
ventana, sustituyendo el contenido que estamos viendo por el de la página a la que enlazamos. Nosotros podemos cambiar este comportamiento y determinar cuál va
a ser la ventana de destino del enlace. Ese trabajo lo va a realizar el atributo target de la etiqueta <a> de hipervínculo.
Cuando realizamos un hipervínculo, una vez que el cuadro de texto Vínculo contiene la dirección del enlace, se activa el menú Destino del inspector de Propiedades.
... o desde el botón en el panel Insertar:
Este menú presenta 4 opciones como destino de nuestro enlace:
_blank carga el archivo vinculado en una ventana de navegador nueva.
_parent * se utiliza cuando el enlace se encuentra en una página de marcos, carga el
archivo vinculado en el marco padre.
_self *carga el archivo vinculado en la misma ventana que el vínculo. Este destino es el
predeterminado, por lo que normalmente no es preciso especificarlo.
_top *carga el archivo vinculado en la ventana completa del navegador, quita los
marcos que hubiera.
*Las opciones _parent _self y _top no serán empleadas hasta el capítulo 8 donde se tratan los marcos.
Ejemplo:Búscalo en Google (Este enlace tendrá como destino una ventana nueva del navegador)
Código HTML: <a href="http://www.google.com" target="_blank">Búscalo en Google</a>
8. Asignar un destino a un hipervínculo
¡¡¡¡CONSEJO IMPORTANTE!!!!
Al realizar un enlace comprueba en el navegador (F12) que el enlace se reproduce sin
problemas:
¿tiene el aspecto que deseas en cada uno de los estados: normal, sobre, visitado y
activo?
¿lleva al documento o dirección que deseas?
¿ese documento se abre en la ventana que desas?
Si es un enlace a un marcador...
¿Está colocado el marcador en la posición que deseas?