+++

1. INTRODUCCINUna barra de exploracin es uno de los elementos ms recurridos para facilitar la navegacin a travs del sitio web. Mediante este elemento podrs crear vnculos a las principales secciones del sitio adems de introducir interactividad a tus pginas.

Bsicamente, una barra de exploracin es un conjunto de imgenes con funciones de botones de men que estn dispuestas, o bien horizontalmente en la parte superior de un documento o al pie del mismo, o bien verticalmente a un lado del documento (normalmente el izquierdo).

Observa el ejemplo de la imagen inferior:

Estos botones responden a acciones del visitante y normalmente poseen varios estados de apariencia segn el ratn est encima, est fuera o est haciendo clic sobre l, de modo que la apariencia de botn sea lo ms real posible.

2. INSERTAR UN BOTNCon el men flash podemos colocar botones prediseados. De esta manera se hace la botonera en poco tiempo y de modo sencillo

En el men comn, elegimos el botn, y ah elegimos la opcin botn flash

Podramos llegar a este mismo sitio a travs del Men superior: insertar > media > botn flash

Entrars de ste modo en el men especfico de los botones en el que debers elegir es el modelo de botn que ms te gusta en estilo. Podrs ir viendo una vista preliminar de tu botn en muestra

.

A continuacin slo tendrs que ir rellenando los diferentes apartados:

Texto: palabras que quieres que aparezcan inscritas en el botn

Fuente y tamao y color de fondo: referidas al texto interior del botn

Vnculo: documento html, archivo, web, al que queramos se dirija el usuario cuando acciona el botn. Tenemos la posibilidad de buscarlo a travs de la opcin Examinar

Destino:

Nos determina dnde queremos que se abra la pgina a la que nos dirige el botn. Hay cuatro opciones, de las que nos interesan de momento las dos primeras.

_blank nos la abrira en una ventana nueva

_parent nos la abrira en la misma ventana

Guardar como: nos pide nombre y lugar donde guardar el botn. Esto es importante recordarlo porque el botn es un elemento independiente de la pgina.

Es preferible guardar los botones Flash en el mismo directorio que los documentos HTML, en lugar de la carpeta destinada a almacenar imgenes, ya que de no ser as es posible que al intentar asignar un vnculo dentro del propio sitio, Dreamweaver no permita guardar el botn con ese vnculo en una ubicacin diferente de la de dicho documento. Recuerda que los botones deben guardarse con la extensin SWF.

A travs del inspector de propiedades del botn Flash es posible editar de nuevo sus atributos:

Puede volver a abrirse el cuadro de dilogo anterior pulsando sobre el botn Editar, y a travs del botn Reproducir es posible probar el funcionamiento del botn Flash desde Dreamweaver, sin la necesidad de tener que abrir la pgina con algn navegador.

Despus de haber probado el funcionamiento del botn Flash, debe pulsarse de nuevo sobre el botn Reproducir (que habr cambiado por el botn Detener) .

Repitiendo los pasos anteriores, iremos colocando todos los botones que deseemos de la barra de men (horizontal o verticalmente).3. INSERTAR UNA BARRA DE BOTONESCon el men barra de exploracin podemos construir todo manualmente, siendo un procedimiento laborioso y ms lento (que se utiliza menos habitualmente), pero que permite personalizar todo el contenido de tu botonera.

Lo primero de todo es crear las imgenes que formarn parte de cada uno de los cuatro estados. Debes saber que no es necesario que cada estado tenga una imagen definida. Por ejemplo, puedes decidir que solamente vas a crear los estados Arriba, Sobre y Abajo. Asimismo, puedes elegir que dos o ms estados estn asociados a la misma imagen. El nico estado que es imprescindible definir es Arriba.

1. Elige Men Insertar > Barra de exploracin o haz clic en el botn correspondiente del panel comn de la paleta de objetos.

2. Aparece el cuadro de dilogo Insertar barra de exploracin.

3. Rellena el cuadro de dilogo atendiendo a estas opciones:

3.1. Elementos de la barra de exploracin

Cada uno de los botones que crees para la barra de exploracin aparecern en este listado. Encima del listado, en la parte izquierda, hay dos botones ( + y -) para aadir o borrar elementos de la barra. Tambin encima del listado, pero en su parte derecha, hay dos botones con flechas para cambiar la posicin en la lista del botn seleccionado.

3.2. Nombre de elemento

En este campo debes introducir un nombre para cada botn que quieras crear en la barra de exploracin. 3.3. Arriba, Sobre, Abajo y Sobre mientras abajoSon los cuatro estados posibles de un botn de la barra de exploracin. En estos campos debes introducir la ruta que lleva a la imagen en cuestin o seleccionarla tras hacer clic en el icono de carpeta.

3.4. Al hacer clic, ir a URL

En este campo debes introducir la URL del documento destino del vnculo. En el men desplegable de la derecha selecciona una ubicacin en la que se abrir el archivo. Las opciones que hay son Ventana principal (para abrir el archivo en la misma ventana) o Marco (selecciona uno de los marcos que tiene la pgina actual).

3.5. Carga previa de imgenes

Con esta opcin seleccionada el explorador carga todos los estados de los botones al iniciar la carga de la pgina. Si esta opcin no est seleccionada, es posible que se produzca una demora cuando el visitante mueva el cursor sobre el botn.

3.6. Mostrar 'Imagen abajo' inicialmente

Con esta opcin seleccionada el explorador muestra el botn seleccionado en su estado abajo cuando se carga la pgina. Esto te servir, por ejemplo, si tienes un botn para ir a la pgina principal en la barra de exploracin. De esa forma cuando se carga la pgina principal, el botn de dicha pgina estar en su estado abajo.

3.7. Insertar

Puedes escoger entre barra de exploracin vertical u horizontal con el men emergente. Para insertar los elementos de barra de exploracin en una tabla, activa la casilla de verificacin Usar tablas.

4. Cuando hayas rellenado el cuadro de dilogo con el primer elemento de la barra de exploracin, haz clic en el botn ms (+) para agregar otro botn.

5. Cuando hayas agregado todos los botones para tu barra de exploracin haz clic en Aceptar.

2.5. CREACIN DE PGINAS WEB

(Dreamweaver nivel avanzado)

Tecnologas de la Informacin y la Comunicacin: Recursos y herramientas para el profesorado (on-line)

1. Barras de exploracin

Profesor/a: Melchor Gmez

Pg. 2 Melchor GmezEspecialista en TICEspecialista en TIC Melchor GmezPg. 7