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

+++

Creacin de pginas web

(Dreamweaver nivel bsico)

1. INTRODUCCIN
Una 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.

Pg. 2

Melchor Gmez

Especialista en TIC

Nombre del documento

2. INSERTAR UN BOTN
Con 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

Especialista en TIC

Melchor Gmez

Pg. 3

Creacin de pginas web

(Dreamweaver nivel bsico)

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

Pg. 4

Melchor Gmez

Especialista en TIC

Nombre del documento

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:

Especialista en TIC

Melchor Gmez

Pg. 5

Creacin de pginas web

(Dreamweaver nivel bsico)

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 BOTONES

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

Pg. 6

Melchor Gmez

Especialista en TIC

Nombre del documento

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.

Especialista en TIC

Melchor Gmez

Pg. 7

Creacin de pginas web

(Dreamweaver nivel bsico)

3.3. Arriba, Sobre, Abajo y Sobre mientras abajo

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

Pg. 8

Melchor Gmez

Especialista en TIC