omtica

pcio
CREACION DE BOTONES , BARRA DE NAVEGACION Y
MENS
EMERGENTES

A. Creacin De Botones

Los botones constituyen los elementos de navegacin de una pgina web. Adobe Fireworks CSS
permite crear una gran variedad de botones y mens emergentes JavaScript induso si no conoce
JavaScript.

El editor de botones de Fireworks guia al usuario a travs del proceso de creacin de
botones y le permite automatizar muchas de las tareas. El resultado es un prctico simbolo de
botn. Despus de crear un slmbolo de botn, puede fcilmente crear instancias del

Crear un botn con tres o cuatro estados
Aunque los botones con cuatro estados no son obligatorios, su uso permite sacar part do de
los comportamientos incorporados de la barra de navegacin.
1. Abra un botn con dos estados en el lienzo en modo de edicin de simbolos, seleccione
el estado Abajo en el men desplegable del Inspector de propiedades.
2. Haga die en Copiar griflco Sobre para pegar una copia del elemento grfico del
estado Sobre en la ventana delestado Abajo y moditrquelo para cambiar su aspecto.
3. Para anadir un estado Sobre y Abajo, compruebe que el botn de estado Abajo est abierto y repita
el paso 2.
4. (Opcional) Aplique filtros preestablecidos a los botones.
5. Cierre la venta deleditor de simbolos
smbolo para crear una barra de navegacin o bar nav.

Estados de Botn

Un botn puede tener hasta cuatro estados diferentes. Cada estado representa el aspecto
del botn en respuesta a un evento del mouse:

./ El estado Arriba es el estado predeterminado o aspecto "de reposo' del botn.
./ El estado Sobre es el nuevo aspecto con el que aparecer el botn al mover el puntero sobre el
mismo. Este estado avisa al usuario de que al hacer cHe es probable que se produzca una
accin.
./ El estado Abajo es a menudo una imagen del botn con el aspecto de estar
"presionado", representa el botn despus de hacer clic sobre el mismo. Este estado de
botn representa normalmente la pgina web actual en la barras de navegacin con
varios botones.
Nota: al insertar o crear un grfico para los estad os Abajo o
para incluir el estado en la barra de navegacin se seleccionan aut


B. Creacin de una Barra de Navegacin Bsica

Una barra de navegacin. tambin denominada bar nav, es un grupo de botones que ofrece vfnculos
a otras reas de un sitio web. Normalmente, no cambia de aspecto en el sitio de modo que ofrece
un mtodo coherente de navegacin sin Importar el lugar en que se encuent re el usuario en el sitio
web. La barra de navegacin tiene el mismo aspecto de una pgina web a otra, pero los enlaces
pueden ser especfficos para el funcionamie nto de cada pgina.

El proceso es el siguiente:
nes
;_
. i
j
./ El estado Sobre y Abajo es el aspecto del botn al pasar el cursor sobre l cuando est en
el estado Abajo . Este estado de botn representa normalmente que el puntero se encuentra
en el botn correspondiente a la pgina web actual en las barras de navegacin con varios
botones.

Con el Editor de botones puede crear todos estos estados, asl como el rea para la
activacin de la accin del botn.

Crear un botn simple con dos estados
1. Acceder al editor de slmbolos:
./ Elija Edicin > Insertar > Nuevo botn.
2. Siga uno de estos procedimientos para importar o crear el grfico en estado Arriba :
./ Inserte el objeto (con la herramienta rectngulo) o importe, al rea de trabajo el grfico
que deba representar el estado Arriba del botn.
./ Elija la herramienta Texto y cree el texto del botn.
3. Para crear el estado Sobre, seleccione Sobre en el men desplegable y realice una de las
acciones siguientes :
./ Haga clic en el botn Copiar grfico Arriba, para pegar la copia del botn del estado
Anriba en la ventana delestado Sobre y modiffquelo (puedes cambiar su apariencia con el
inspector de propiedades) .
4. Cierre la venta del editor de simbolos

1. Cree un sfmbolo de botn y duplquelo tantas veces como lo requiera.
2. Arrastre unaInstancia (copia) del simbolo desde elpanel Biblioteca hasta elespacio de trabajo.
3. Para obtener un control ms predso, utilice las tedas de flecha para ubicar el slmbolo.
4. Seleccione cada instancia y asigne un texto nico, un valor URL y otras propiedades utilizando el
Inspector de propiedades.

C. C cin de Mens Emergentes

Los mens emergentes son mens que aparecen en un navegador como respuesta al movimiento
del puntero (o en respuesta a la acdn de hacer clic) sobre objetos web de activacin como una
divisin o zona interactiva. Los elementos de los mens emergentes pueden incluir v fnculos URL para
la navegacin. Por ejemplo, puede utilizar los mens emergentes para organizar diferentes opciones
de navegacin que estn relacionadas con un botn en una barra de navegacin. Puede crear
submens en los mens emergentes con el nmero de niveles que desee.

Cada elemento de un men emergente aparece como una celda HTML o de imagen, con un estado
Arriba, un estado Sobre y texto en ambos estados. Para ver una presentacin preliminar de un men
emergente en un navegador debe pulsar F12. Las v istas previas del espacio de trabajo de Firewori<s MX
no muestran los mens emergentes.



Sesin OS
Sesin 05
pg.8
111P'lreworks
pg. 9

Fireworks



Crear un men emergente nnclllo

1. Seleccione el objeto que adivar el men emergente. Ejemplo:Deportes.
2. Seleccione Modificar> Men emergente > Alladlr men emergente.
3. Haga die en el botn Zona lnten cUva para adivar el editor de mens.
4. Haga elle en la ficha Contenido.
5. Haga doble clie en cada celda y espedfique la informacin adecuada de texto, vinculo y
destino. En los campos VInculo y Destino, espedfique Informacin personalizada o selecdone
desde los mens mostrados.

6. Haga die en Siguiente o Uato, o bien seleccione otra ficha.

Crear submens en un men emergente
Los submens son mens emergentes que aparecen cuando un usuario desplaza el cursor por endma
de otro elemento del men emergente o hace elle en este . Puede crear tantos niveles de submens
como desea.
1. Activ,tlaC!i"a-<: enldo del Editor de men emel!/8nle y cree elementos de men.
2. Reaalte el elemento del men emergente que desea convertir en un elemento de submen y, a
continuadn. haga elle en el botn Sang1'11r men.

un submen emergente .

Te""
Cambiar el aspecto de un men emergente
Tras crear un men bsico y los submens opcionales, puede dar formato al texto, aplicar estilos de grfico
para los estados Sobre y An1be y elegir la orientacin vertical u horizontal en la ftcha Aspecto del Editor de men
emergente.
1. Active el Editor de men emergente y haga elle en la ficha Aapecto .
2. . Elija la alineacin del men:vertical u horlzontlll.
3. Elija una opcin de Celdas:
HTML Deftne el aspecto delmen utilizando slo cdigo HTML. Esta configuracin produce pginas
con el menor tamano posible.
Imagen Le permite seleccionar un estilo de imagen que se uti zar como fondo de celda. Esta
configuracin produce pginas de mayor tamano.
4. Elija un tamano preestablecido en el men emergente Tamano o introduzca un valor en el cuadro de texto
Tamano.
5. Elija un grupo de fuentes del sistema en el men emergente Fuente.
6. (Opcional) Aplique un estilo, justificacin y color para el texto.
7. Elijalos colores del texto y de la celda para cada estado.
8. Si ha seleccionado Imagen como tipo de celda, elija un estilo grfico para cada estado.












..

L

M'cdo
-

....,,,,._,......-...
_.,

T....
""''',._......,.....
.......

..._...

U.lbottod
.....
"""'"
4. Haga die en Siguiente para continuar la aeacin del men emergente o haga elle en
Listo.

Sesin 05

Plreworks

pg. 10

Sesin 05

pg. 11

Configurar propiedades avanzadas de celda
1. Abra el Editor de men emergente y haga cUc en la ficha Avan:udo .
2. Seleccione una restriccin de anchura o de altura en el men emergente
Autom,tloo/Pfxeln:
3. Introduzca un valor en el cuadro de texto Relleno celda para determinar la distancia que
habr entre el texto del men emergente y el borde de la celda.
4. Introduzca un valor en el cuadro de texto Espacio entre celdas para definir el espacio que habr
entre las celdas de men.
5. Introduzca un valor en el cuadro de texto Sangrfa de texto para definir el sangrado del texto
del men emergente .
6. Introduzca un valor en el cuadro de texto Demora de men para definir los milisegundos
que el men permanecer visible despus de que elpuntero se aleje.
7. Seleccione mostrar u ocultar los bordes de un men emergente . Si selecciona mostrar los
bordes,configure sus atributos .
6. Continela creacin del men emergente o haga clic en Usto.




Establecer una posicin especifica para un men o submen emergente
1. Abra el men emergente que desee en el Editor de men emergente y haga clic en la ficha
Posicin.
2. Siga uno de estos procedimientos para definir la posicin del men:
" Introduzca las coordenadas x e y.Las coordenadas 0,0 permiten alinearla esquina
superior izquierda del men emergente con la esquina superior izquierda de la divisin
o zona interactiva que lo activa.
a. Defina la posicin del submen :
" Haga elle en un botn Posicin del submen para situar el submen emergente
en relacin con el elemento de men emergente que lo activa.
Ejen:lclo 04:
1. Ablir Firewor1<s,creamos una imagen de 80 pixeles x 32 pixetes a la cual le agregamos un texto (por ejemplo: Men)
al que luego agregaremos el men emergente interactivo.Grabe el archivo en su sitio web (por
ejemplo:menu.png).


2. En el panel de Herramientas de FlntWOrits,en Web,seleccionamos "Hemunlenta dt zona Interactiva
rKtangutar":





Dibujamos una forma rectangular encima de la imagen,justo encima del dibujo delbotn
"Men":



Observaremos que en el centro de este recuadro de color verde daro,aparece un botoncito redondo con fonma de
mira telescpica.

3. Seleccione la herramienta Punt.ro,haga doble cc en 61, y seleccione Al\adlr men emergente.



l,liiiiiiiiiiliiiji..
' r;zt!".
1 s.vmr 1r:>dos 1oo ""'1)01-,tos



4. Se abre la ventana "Editor de men emergente", con 4 fichas: Contenido
Aspecto
Avanzado
Posicin

A En la ficha Contenido, pondremos todos los mens y submens que deseamos mostrar, junto con sus
links (y la fonna en que queremos que se abran esos links dentro del Html,el "destinoj:



Sesin 05
Sesin os
pg.15


l"lrewoms

pg. 12







l'lrewortts
'*cW .0





..;'



En Texto: escriba el Titulo a mostrar en e( men.

EnVInculo : Escriba la pagina destino o de enlace.

En Destino:Elija la opcin adecuada

blank: Abre el documento vinculado en una ventana nueva del navegador.
parent:Abre el documento vinculado en la ventana del marco que contiene el
'J
vinculo o en el conjunto de marcos padre.
self:Es la opcin predeterminada . Abre el documento vinculado en el mismo
C. En la ficha "Avanzado". Aqul podemos definir el tamano de las celdas (Altura y Anchura , o Relleno de Celda),
definir el tiempo entre que sacamos el ratn de encima el men,y este desaparece (Demora de men,en
milisegundos).

Tambin podemos
definir el
desplazamiento del texto dentro de los elementos
del men (Sangrfa de texto; si
es positivo, se
desplaza hacia la
derecha); si ponemos bordes y el color de estos.








. '
llri.dliftllll'lll (3.....botdar . "
; - .. :...,.,..G:j .' ;....; .







.
marco o ventana que el vinculo.
top: Abre el documento vinculado en la ventana completa del navegador, lo
cual quiere decir que los marcos de la ventana desaparecern al abnr el vinculo en
ella.
...,.-.,.-.-;;;;=>
Nota:Usamos el botn r;f.. 1 para hacer submenus.

B. En la ficha "Aspac:to". Seleccionaremos la apariencia de los botones del men, si el men debe
ser vertical u horizontal , el tipo y eltamano dela letra de los elementos del
men. Bueno, esto va a de ca d a u no.. ...llllllllllllllll-.-

O. En la ficha "Posicin". Definimosla posicin en la que aparecer el men respecto del recuadro creado con la
"Herramienta de zona interactiva", al lntCIO. Tambin definimos la posicin de los elementos
submen (Sub1) respecto del elemento superior delmen (Eiemento2):



5. Una vez deftnidos estos parmetros , hacemos die en elbotn "Llato". Ya tenemos nuestro
men emergente.
An estamos en Flreworils, enelescenario nos quedar algo
asi:
6. Grabar elarchivo para actualizar los cambios.
7. Exportar el archivo.






Sesin os

Plreworks




pllg . 16
Sesin 05



p6g. 17