images/header.jpg

Creación de vínculos en Adobe Dreamweaver CS3

video2brain


Los vínculos son una de las funciones esenciales de las páginas web, ya que nos permiten navegar con un simple clic. En este tutorial vamos a ver cómo crear vínculos internos, externos o de correo electrónico en Adobe Dreamweaver CS3 y cómo texto e imágenes pueden funcionar como vínculos.

Requisitos:

Para llevar a cabo este tutorial necesita tener instalado:

Puede ver un video de este tutorial en el Taller de vÌdeo para Adobe Creative Suite 3.

Creación de vínculos

  1. Vaya a Archivo > Abrir para abrir el archivo Aquo_Site > company > index.html (figura 1).
  2. Abbildung 1

    Figura 1: El archivo index.html, abierto en la ventana de documento.

  3. Baje hasta el final de la página, donde se encuentran las palabras y frases clave que se deben transformar en vínculos y que actualmente son solamente texto.
  4. Comience seleccionando la palabra Product. Pulse en el panel Propiedades en el campo Vínculo. Pulse el icono de la carpeta al lado del campo para buscar el vínculo necesario (figura 2), lo cual resulta mucho más fácil que introducir manualmente el URL del vínculo.
  5. Abbildung 2

    Figura 2: Pulse en el icono carpeta junto al campo de texto Vínculo para buscar el archivo necesario.

  6. Pulse en el icono punto de mira (Señalar archivo) y mantenga el ratón pulsado para seleccionar directamente del panel Archivos la carpeta necesaria.
  7. Pulse en el punto de mira y, sin soltar el ratón, vaya hasta el archivo index.html en el panel Archivos. La ruta hasta este documento aparece automáticamente en el campo Vínculo (figura 3).
  8. Abbildung 3

    Figura 3: Pulse en Señalar archivo (punto de mira) y arrastre el ratón hasta encontrar en el panel Archivos el documento que quiera incluir.

  9. Pulse en el símbolo Vista previa/Depurar en explorador en la barra de herramientas de la ventana de documento y seleccione un navegador. En la ventana de diálogo pulse a Guardar y la página se abrirá en el navegador.
  10. Pulse en el navegador en el vínculo Products, que acaba de crear, para llegar a la página de productos. Cierre el navegador.
  11. Convertir imágenes en vínculos es muy fácil.
  12. Seleccione en su ventana de documento la imagen de las personas saltando. En el panel Propiedades se abre un campo de texto Vínculo, aunque en un lugar diferente del panel. Como en casos anteriores, se puede incluir el URL del vínculo manualmente o con el icono punto de mira, seleccionando en el panel Archivos. Es importante no utilizar ni el punto de mira ni la carpeta al lado del campo de texto Origen, ya que esto cambiaría el URL de la imagen.

Todos los vínculos creados hasta ahora han sido vínculos internos, que dirigen a otras páginas del mismo sitio web. Esto significa que las direcciones se incluyen en relación con el archivo actual (por ejemplo, products/index.htm). Sin embargo, en ocasiones es necesario vincular páginas externas a la pagina que se está creando. En este caso se habla de URL absolutos y deben incluir la direción completa de la página con la que se quiere realizar el vínculo, incluyendo http://www....

  1. Seleccione la palabra "Events" y sustitúyala por "Adobe".
  2. Para realizar un vínculo con la página de Adobe, vaya al panel Propiedades, campo Vínculo y escriba "http://www.adobe.com". Sólo "adobe.com" sería muy poco. Lo más conveniente para evitar errores a la hora de escribir una dirección larga, es copiarla del navegador y pegarla después en el campo de texto,
  3. Para realizar un vínculo de correo electrónico, seleccione la frase "Privacy policy". Vaya al panel Insertar, en la parte alta de su pantalla; en la pestaña Común, se encuentra Vínculo de correo electrónico.
  4. En la ventana de diálogo, escriba bajo Texto, "Contacto" (esta palabra aparecerá en la botonera de la página web que se está creando) y bajo Correo electrónico, "info@aquo-drink.com". El vínculo Contacto aparece en la lista de vínculos del panel Propiedades (figura 4).
  5. Abbildung 4

    Figura 4: El vínculo Contacto aparece en la página y se incluye en la lista de vínculos del panel Propiedades.

  6. Vaya al símbolo Vista previa/Depurar en explorador en la barra de herramientas superior y seleccione un navegador. Cuando pulse en Contacto, se abrirá una ventana para escribir un mensaje nuevo a la dirección "info@aquo-drink.com" en la aplicación de correo electrónico predeterminada

Para saber más:

Más información y tutoriales en Adobe Design Center.