Vínculos y Navegación

VÍNCULOS Y NAVEGACIÓN
VÍNCULOS
Existen varios métodos para crear vínculos de hipertexto con páginas Web,
imágenes, archivos multimedia o software transferible.
Algunos prefieren crear vínculos con páginas o archivos que todavía no existen
cuando están trabajando, mientras que otros prefieren crear primero todos los
archivos y las páginas y añadir los vínculos más tarde.
Otra forma consiste en crear páginas temporales o en borrador que representan el

archivo al que queremos hacer el vínculo y permita añadir vínculos rápidamente y
comprobarlos antes de terminar todas las páginas.
Para crear un enlace sencillo, es por medio del inspector de propiedades,

permite establecer el vínculo de un texto o de un objeto seleccionado.
Cada página Web tiene una dirección exclusiva, denominada URL (Localizador
Uniforme de Recursos, Uniform Resource Locator).Sin embargo, cuando se crea
un vínculo local (un vínculo de un documento con otro documento del mismo sitio),
no suele ser necesario especificar el URL completo del documento de destino. En
este caso se especifica una ruta relativa desde el documento actual o desde la
carpeta raíz del sitio.
Existen tres tipos de rutas de vínculos:
• Rutas absolutas.
• Rutas relativas al documento.
• Rutas relativas a la raíz del sitio.
Rutas absolutas: http://www.senasantander.org/cursos/dreamweaver/index.php
Para vincular un documento situado en otro servidor, es preciso emplear una ruta
absoluta. Las rutas absolutas proporcionan el URL completo del documento
vinculado, incluido el protocolo que se debe usar (generalmente, http:// para
páginas Web).
Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander
Todos los derechos reservados
Rutas relativas al documento: dreamweaver/index.php
Son las más apropiadas para manejar vínculos locales en la mayoría de los sitios
Web. Resultan particularmente útiles cuando el documento actual y el documento
con el que se establece el vínculo se encuentran en la misma carpeta y es
probable que vayan a permanecer juntos. Asimismo puede utilizar una ruta relativa
de otra carpeta, pero especificando la ruta a través de la jerarquía de carpetas
desde el documento actual hasta el vinculado.
Rutas relativas a la raíz del sitio: /cursos/dreamweaver/index.php
Las rutas relativas a la raíz del sitio indican la ruta desde la carpeta raíz del sitio
hasta un documento. Puede utilizar este tipo de rutas si trabaja con un sitio Web
grande que usa varios servidores o un servidor que alberga varios sitios distintos.
Sin embargo, si no está familiarizado con este tipo de ruta, le resultará más
cómodo mantener las rutas relativas al documento.
Una ruta relativa a la raíz del sitio comienza por una barra diagonal (/), que
representa la carpeta raíz del sitio.
Por ejemplo: /inf /mision/contenido.html es una ruta relativa a la raíz del sitio de un
archivo (contenido.html) situado en la subcarpeta de mision de la carpeta raíz del
sitio.
DESTINO
El destino determina en qué ventana va a ser abierta la página vinculada. Puede

especificarse en el inspector de propiedades a través de Dest, o en la ventana que
aparece a través del menú Insertar>> Hipervínculo.
• _blank:
Abre el documento vinculado en una ventana nueva del navegador.
• _parent:
Abre el documento vinculado en la ventana del marco que contiene el
vínculo o en el conjunto de marcos padre.
• _self:
Es la opción predeterminada. Abre el documento vinculado en el mismo
marco o ventana que el vínculo.
• _top:
Abre el documento vinculado en la ventana completa del navegador.
VINCULACIÓN DE DOCUMENTOS MEDIANTE EL INSPECTOR DE
PROPIEDADES
Puede utilizar el icono de carpeta o el cuadro de texto Vínculo del inspector de

propiedades para crear vínculos desde una imagen, un objeto o texto hasta otro
documento o archivo.
1. Seleccione texto o una imagen.
2. En el inspector de propiedades (Ventana > Propiedades) siga uno de

estos procedimientos:
■ Haga clic en el icono de carpeta situado a la derecha del cuadro de texto Vínculo
para localizar y seleccionar un archivo.
La ruta del documento vinculado aparecerá en el cuadro de texto URL. Utilice el

menú emergente Relativa a del cuadro de diálogo Seleccionar archivo HTML para
indicar si la ruta es relativa al documento o a la raíz del sitio. Preferiblemente
trabaje las rutas como Relativa al Documento. A continuación, haga clic en
Seleccionar.
■ Escriba la ruta y el nombre de archivo del documento en el cuadro de texto

Vínculo. Para establecer un vínculo con un documento del sitio, introduzca una
ruta relativa al documento o relativa a la raíz del sitio. Para establecer un vínculo
con un documento externo al sitio, introduzca una ruta absoluta que incluya el
protocolo (por ejemplo, http://). Puede utilizar este método para introducir un
vínculo para un archivo que aún no se ha creado.
MAPA DE IMÁGENES
El mapa de imagen es una imagen que se ha dividido en regiones o zonas
interactivas. Cuando el usuario hace clic en una zona interactiva, se realiza una
acción (se abre un archivo nuevo, por ejemplo).
Para crear un mapa de imágenes, primero que todo hay que seleccionar en la
página la imagen sobre la que se va a trabajar. Al hacer esto inmediatamente
aparecerá en el Inspector de Propiedades los tres botones que se utilizan para
crear los mapas; tienen la forma rectangular, circular y libre. Cuando se pulsa
alguno de estos botones la apariencia del puntero cambia al situarlo sobre la
imagen.
Si esta seleccionando el mapa de imágenes, aparecerá el inspector de

propiedades de zonas interactivas.
En la casilla de vínculo se puede referenciar a una parte de la misma página, a un

archivo o a una página nueva. La apariencia del puntero cambia al pasar sobre la
forma de mapa que se creo.
BARRA DE NAVEGACIÓN
Una barra de de navegación se compone de una imagen o un conjunto de

imágenes cuya visualización cambia según las acciones que realiza el usuario. La
barra de navegación permite desplazar fácilmente entre las páginas y los archivos
de un sitio.
En la siguiente imagen se resalta con una línea roja la barra de navegación.
Antes de usar el comando Insertar barra de navegación, cree un conjunto de

imágenes para los estados que se mostraran con cada elemento de navegación.
Un elemento de navegación se puede considerar como un botón, ya que al hacer
clic en él, lleva al usuario a otra página.
Para insertar una barra de navegación se debe dirigir al menú Insertar >>
Objetos de imagen >> Barra de Navegación.
Para establecer las opciones de las barras de navegación:
1. Introduzca un nombre para el

elemento de la barra de navegación como, por ejemplo, Inicio. Cada
elemento corresponde a un botón con un conjunto de hasta cuatro
imágenes de estado.
Los nombres de elemento aparecen en la lista Elementos de barra de

navegación.
Utilice los botones para organizar los elementos en la barra de

navegación.
2. Haga clic
en Examinar para seleccionar la imagen que desea mostrar inicialmente.
Nota: este cuadro de texto es obligatorio. Las demás opciones de estado de

imagen son opcionales.
3. Haga clic
en Examinar para seleccionar la imagen que desea mostrar cuando el usuario
mueva el puntero del Mouse sobre la Imagen Arriba.
4. Haga clic
en Examinar para seleccionar la imagen que desea mostrar después que el
usuario haga clic en la imagen.
5. Haga clic
en Examinar para seleccionar la imagen que desea mostrar cuando el usuario
mueva el puntero del Mouse sobre la Imagen Abajo.
6. Introduzca un nombre
descriptivo para el elemento. Los lectores de pantalla leen el texto alternativo y
algunos navegadores muestran este texto cuando el usuario se desplaza por el
elemento de la barra de navegación.
7. Haga clic
en el botón Examinar para seleccionar un archivo vinculado y abrirlo. A
continuación, elija una ubicación en el menú emergente para abrir el archivo.
8. Seleccione Carga previa de imágenes para transferir las imágenes cuando se

cargue la página. Si no selecciona esta opción, es posible que se produzca una
demora cuando el usuario mueva el puntero sobre la imagen de sustitución.
9. Seleccione Mostrar "Imagen abajo" inicialmente para mostrar el elemento

seleccionado en su estado Abajo cuando se muestra la página, en lugar de su
estado Arriba predeterminado.
10. En el menú emergente Insertar, elija si desea insertar los elementos de la barra
de navegación vertical u horizontalmente en el documento.
Active la casilla de verificación Utilizar tablas para insertar los elementos de la

barra de navegación en una tabla.
11. Haga clic en el botón de signo más (+) para añadir otro elemento a la barra de
navegación y, a continuación, repita los pasos anteriores para definir el
elemento.
12. Haga clic en Aceptar cuando termine de añadir y definir elementos a la barra
de navegación.
ROLLOVER (IMAGEN DE SUSTITUCIÓN)
La imagen de sustitución o Rollover, es una imagen que al visualizarse en un

navegador, cambia cuando el puntero pasa sobre ella. Se puede crear una imagen
de sustitución con dos archivos de imágenes: la imagen original (la que aparece al
cargarse inicialmente la página) y la imagen de sustitución (la que aparece al pasar
el puntero sobre la imagen principal). Ambas imágenes deben tener el mismo
tamaño. Si tienen tamaños distintos, Dreamweaver cambia automáticamente el
tamaño de la segunda imagen para que se ajuste a las propiedades de la primera.
Para insertar un Rollover se debe ingresar al menú Insertar >> Objetos de

imagen >> Imagen de sustitución.
Es recomendable tener seleccionada la opción de carga previa para evitar

demoras cuando se cargue la página. En Texto Alternativo se introduce
información que describa la imagen para que el usuario la visualicé al pasar el
cursor sobre esta. En el campo Al hacerse clic, ir a URL, haga clic en Examinar y
seleccione el archivo o escriba la ruta del archivo que desea que se abra cuando
un usuario haga clic en la imagen de sustitución.
UTILIDADES FLASH
Flash es una herramienta de edición con la que pueden crearse desde animaciones
simples hasta complejas aplicaciones Web interactivas. Las aplicaciones de Flash
pueden enriquecerse añadiendo imágenes, sonido y vídeo.
Cuando crea con Flash, trabaja con un documento de Flash, un archivo que, al
guardarse, tiene la extensión .fla. Una vez que está preparado para desarrollar su
contenido de Flash, lo publica, creando un archivo SWF de Flash con una extensión
.swf.
Dreamweaver permite insertar elementos Flash en sus documentos. Los elementos

Flash (extensión .SWF) se podrán visualizar si el usuario tiene instalado el Flash
Player el cual se puede descargar desde la siguiente dirección:
http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Versio
n=ShockwaveFlash&Lang=Spanish&P5_Language=Spanish
Para insertar un archivo flash hay que desplazarse al Menú Insertar >> Media >>
Flash. También se puede realizar por medio de la combinación de teclas Ctrl + Alt
+ F.
Texto Flash
El objeto de texto Flash permite crear e insertar una película Flash que sólo
contiene texto. Esto permite crear una pequeña película de gráficos vectoriales con
fuentes de diseño y el texto que elija.
Para insertar un objeto de texto flash se debe dirigir al menú Insertar>> Media >>
Texto Flash.
En el cuadro de diálogo Insertar texto Flash además del texto, el vínculo y el
nombre con el que será guardado el texto, hay que especificar el color original y el
de sustitución.
Botones Flash
Los botones Flash son Similares a las imágenes de sustitución, realizan acciones
cuando se pasa el cursor del Mouse por encima del botón.
Para insertar un Botón Flash seleccione en el menú Insertar >> Media >>Botón
Flash.
En Estilo seleccionan el botón que deseen utilizar, también si el tipo de botón lo

permite se podrá introducir un texto con el tipo de fuente deseada. Además puede
establecer vínculos y sus destinos, además permite insertar un color de fondo al
botón.
Se recomienda guardar los botones Flash en el mismo directorio donde se
encuentren las paginas html, ya que de no ser así, es posible que al intentar
asignar un vínculo dentro del propio sitio, Dreamweaver no permita guardar el
botón con ese vínculo en una ubicación diferente de la de dicho documento.
Nota: Los botones flash se guardan con la extensión .swf.
El inspector de propiedades muestra las propiedades del botón Flash. Puede

utilizar el inspector de propiedades para modificar los atributos HTML del botón,
como su ancho, alto y color de fondo.
Para la realización de este documento, se tomó como referencia el “Manual

Adobe Dreamweaver CS3” de la empresa Adobe y el Sitio Web
http://www.aulaclic.es/dreamweavercs3/index.htm

Vínculos y Navegación

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Vínculos y Navegación

Uploaded by

Copyright:

Available Formats

VÍNCULOS Y NAVEGACIÓN

Otra forma consiste en crear páginas temporales o en borrador que representan el

Para crear un enlace sencillo, es por medio del inspector de propiedades,

Existen tres tipos de rutas de vínculos:

Rutas absolutas: http://www.senasantander.org/cursos/dreamweaver/index.php

Rutas relativas a la raíz del sitio: /cursos/dreamweaver/index.php

El destino determina en qué ventana va a ser abierta la página vinculada. Puede

Puede utilizar el icono de carpeta o el cuadro de texto Vínculo del inspector de

1. Seleccione texto o una imagen.

2. En el inspector de propiedades (Ventana > Propiedades) siga uno de

La ruta del documento vinculado aparecerá en el cuadro de texto URL. Utilice el

■ Escriba la ruta y el nombre de archivo del documento en el cuadro de texto

Si esta seleccionando el mapa de imágenes, aparecerá el inspector de

En la casilla de vínculo se puede referenciar a una parte de la misma página, a un

Una barra de de navegación se compone de una imagen o un conjunto de

En la siguiente imagen se resalta con una línea roja la barra de navegación.

Antes de usar el comando Insertar barra de navegación, cree un conjunto de

1. Introduzca un nombre para el

Los nombres de elemento aparecen en la lista Elementos de barra de

Utilice los botones para organizar los elementos en la barra de

Nota: este cuadro de texto es obligatorio. Las demás opciones de estado de

8. Seleccione Carga previa de imágenes para transferir las imágenes cuando se

9. Seleccione Mostrar "Imagen abajo" inicialmente para mostrar el elemento

Active la casilla de verificación Utilizar tablas para insertar los elementos de la

La imagen de sustitución o Rollover, es una imagen que al visualizarse en un

Para insertar un Rollover se debe ingresar al menú Insertar >> Objetos de

Es recomendable tener seleccionada la opción de carga previa para evitar

Dreamweaver permite insertar elementos Flash en sus documentos. Los elementos

En Estilo seleccionan el botón que deseen utilizar, también si el tipo de botón lo

Nota: Los botones flash se guardan con la extensión .swf.

El inspector de propiedades muestra las propiedades del botón Flash. Puede

Para la realización de este documento, se tomó como referencia el “Manual

You might also like