vínculos y navegación

Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander Todos los derechos reservados

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).


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

Documents