leccion 12 botones barras y zonas

8/8/2019 leccion 12 botones barras y zonas

1/57

[FIREWORKS] IDSYSTEMS 2011

LECCION 12 BOTONES, BARRAS Y ZONAS Pgina 1

LECCION 12 BOTONES, BARRAS DE NAVEGACION Y ZONAS

INTERACTIVAS

Divisiones, rollovers y zonas interactivas

Los elementos bsicos para la creacin de elementos interactivos en MacromediaFireworks 8 son las divisiones. Las divisiones no son imgenes, son objetos Webcompuestos de cdigo HTML. Es posible ver, seleccionar y asignar otro nombremediante la capa de Web del panel Capas. En este captulo se examinan losconceptos principales de las divisiones y los procedimientos para utilizarlas paraaadir interactividad en pginas Web.

El mtodo rollover de arrastrar y colocar permite aadir interactividad en lasdivisiones. Gracias a este mtodo puede crear rpidamente efectos de rollover y

de intercambio de imgenes en el espacio de trabajo. Los comportamientosasignados pueden verse en el panel Comportamientos y es posible crearelementos interactivos ms complejos mediante este panel.

Tambin puede incorporar mayor interactividad en pginas Web mediante zonasinteractivas. Las zonas interactivas se utilizan para crear un mapa de imgenes,que es cdigo HTML que define un rea interactiva en un documento HTML. Esasreas no son necesariamente un vnculo; pueden activar un comportamiento odefinir un texto alternativo. Estas zonas interactivas tambin pueden utilizar loseventos de ratn, de forma que se pueden utilizar comportamientos JavaScriptque actan como en las divisiones.

12.1 Creacin y edicin de divisiones

La divisin corta un documento de Fireworks en porciones ms pequeas que seexportan como archivos independientes. Durante la exportacin, Fireworkstambin crea un archivo HTML que contiene el cdigo de la tabla que recompone elgrfico en un navegador Web.

La divisin corta un documento de Fireworks en varias porciones que se exportancomo archivos independientes.


2/57



Existen tres razones por las que resulta til realizar este paso:

Optimizacin: Uno de los retos del diseo grfico para la Web es el mantener lasimgenes lo suficientemente pequeas para que se descarguen rpidamente sinsacrificar la calidad. Las divisiones permiten optimizar cada divisin individual conel formato de archivo y los ajustes de compresin ms adecuados. Para msinformacin, consulte el Optimizacin y exportacin(See 2.14).

Interactividad: Puede crear divisiones para crear reas que se activen con lasacciones del ratn. Para obtener ms informacin sobre cmo aadir interactividaden divisiones, consulte Adicin de interactividad en las divisiones(See 2.11.2).

Actualizacin de partes de una pgina Web: Gracias a las divisiones resultamuy fcil actualizar partes de una pgina Web que se modifique con frecuencia.Por ejemplo, suponga que su empresa tiene una pgina Web con una seccin parael empleado del mes que cambia de forma mensual. Las divisiones permitencambiar rpidamente slo el nombre y la foto del empleado sin tener que

reemplazar toda la pgina.12.1.1 Creacin de objetos de divisin

Puede crear un objeto de divisin dibujndolo con la herramienta Divisin oinsertando una divisin que se base en un objeto seleccionado.

Las lneas que se extienden desde el objeto de divisin son las guas de divisin,determinan los lmites de los distintos archivos de imagen en los que se dividir eldocumento durante la exportacin. De forma predeterminada, estas guas son decolor rojo.

Para insertar una divisin rectangular en funcin de un objetoseleccionado:

1.Seleccione Edicin > Insertar > Divisin. La divisin es un rectngulo cuyarea incluye los bordes ms externos del objeto seleccionado.

2.Si selecciona ms de un objeto, elija cmo desea aplicar las divisiones:Una crear un nico objeto de divisin que abarcar todos los objetosseleccionados.


3/57



Varias crear un objeto de divisin para cada objeto seleccionado.Para dibujar un objeto de divisin rectangular:

1. Seleccione la herramienta Divisin.2.Arrastre para dibujar el objeto de divisin. El objeto de divisin aparece en

la capa de Web y las guas de divisin aparecen en el documento.

Nota: la posicin de una divisin puede ajustarse mientras se dibuja.Mantenga pulsado el botn del ratn, pulse y mantenga pulsada la barraespaciadora, despus, arrastre la divisin hasta otro punto del lienzo. Sueltela barra espaciadora para continuar el dibujo de la divisin.

12.1.1.1 Creacin de divisiones HTML

Una divisin HTML designa el rea donde se presenta texto HTML estndar en elnavegador. Una divisin HTML no exporta una imagen; exporta el texto HTML queaparece en la celda de la tabla definida por la divisin.

Las divisiones HTML son muy tiles para actualizar texto que aparece en el sitioWeb sin tener que crear otros elementos grficos.

Para crear una divisin HTML:

1.Dibuje un objeto de divisin y seleccinelo.2.En el Inspector de propiedades, elija HTML en el men emergente Tipo.3.Haga clic en Edicin.4.Escriba texto en la ventana Editar divisin HTML y asigne el formato que

desee mediante etiquetas de formato de texto HTML.Nota: como alternativa, puede aadir etiquetas de formato al cdigo HTMLdespus de exportarlo utilizando un editor de texto o de HTML comoMacromedia Dreamweaver.

5.Haga clic en Aceptar para aplicar los cambios y cerrar la ventana Editardivisin HTML.


4/57



El texto y las etiquetas HTML que haya introducido aparecen en el archivoPNG de Fireworks en el cuerpo de la divisin como cdigo HTML sin formato.

Nota: las divisiones de texto HTML creadas de esta forma puedenvariar de aspecto cuando se visualicen en distintos navegadores y en otros

sistemas operativos, ya que en el navegador Web es posible definir eltamao y la fuente.

12.1.1.2 Creacin de divisiones no rectangulares

A veces, las divisiones rectangulares no son suficientes al tratar de aadir msinteractividad a una imagen no rectangular. Por ejemplo, si desea incluir uncomportamiento rollover en una divisin y los objetos de la divisin se solapan otienen una forma irregular, una divisin rectangular podra intercambiar losgrficos de fondo junto con la imagen. Para solucionar este problema, Fireworkspermite dibujar divisiones con cualquier forma poligonal gracias a la herramientaDivisin poligonal.

Tambin es posible insertar una divisin sobre el trazado vectorial para creardivisiones con formas irregulares.

Para dibujar un objeto de divisin poligonal:

1. Seleccione la herramienta Divisin poligonal.2.Haga clic para colocar los puntos de vector del polgono. La herramienta

Divisin poligonal dibuja slo segmentos en lnea recta.

3.Cuando dibuje un objeto de divisin poligonal alrededor de objetos conbordes suaves, debe incluir todo el objeto para evitar la creacin involuntariade bordes duros en el elemento grfico de la divisin.

4.Para dejar de utilizar la herramienta Divisin poligonal, elija otraherramienta en el panel Herramientas. No es necesario que haga clic denuevo en el primer punto para cerrar el polgono.

Nota: no es conveniente abusar de las divisiones poligonales, ya querequieren ms cdigo JavaScript que las divisiones rectangulares. La


5/57



utilizacin de demasiadas divisiones poligonales puede aumentar eltiempo de proceso del navegador Web.Para crear una divisin poligonal o una rectangular a partir de un

objeto de vectores o un trazado:

1.Seleccione un trazado vectorial.2.Seleccione Editar > Insertar > Insertar divisin rectangular o Insertar

divisin poligonal (dependiendo de la forma que desee).

12.1.2 Visualizacin de las divisiones y de las guas

Puede controlar la visibilidad de las divisiones y de otros objetos Web deldocumento mediante el panel Capas y el panel Herramientas. Cuando desactiva lavisibilidad de las divisiones para todo el documento, tambin se ocultan las guasde divisin.

Gracias al Inspector de propiedades puede organizar las divisiones asignando uncolor diferente a cada objeto de divisin. Tambin puede cambiar el color de lasguas de divisin mediante el men Ver.

12.1.2.1 Visualizacin de las divisiones en el panel Capas

La capa de Web muestra todos los objetos Web presentes en el documento deforma que puede seleccionar y ver cada uno de ellos.

Para visualizar y seleccionar una divisin en el panel Capas:

1.Seleccione Ventana > Capas para abrir el panel Capas.2.Expanda la Capa de Web haciendo clic en el signo ms (+) (Windows) o

tringulo (Macintosh).

La capa de Web muestra la lista completa de objetos Web presentesactualmente en el documento.

3.Haga clic en un nombre de divisin para seleccionarla.La divisin aparece resaltada en la capa de Web y se selecciona en el lienzo.

12.1.2.2 Visualizacin y ocultacin de divisiones

Cuando se oculta una divisin, sta se hace invisible en el archivo PNG deFireworks. Es posible desactivar todos o algunos de los objetos Web. Las divisionesson objetos Web y aparecen enumerados en la capa de Web y del panel Capas; endicha capa puede activar y desactivar la visibilidad de una divisin seleccionada.Tambin es posible controlar la visibilidad de una divisin mediante el panelHerramientas. Cuando se oculta un objeto de divisin no se evita que la divisin seexporte en el cdigo HTML.


6/57



Para ocultar y mostrar unas divisiones y zonas interactivasdeterminadas:

1.Haga clic en el icono de ojo junto a cada objeto Web individual del panelCapas.

2.Haga clic en la columna Ojo para volver a activar la visibilidad. El icono deojo vuelve a aparecer cuando los objetos Web son de nuevo visibles.

Para ocultar o mostrar todas las zonas interactivas, divisiones yguas, siga uno de estos procedimientos:

Haga clic en el botn Ocultar/Mostrar divisiones adecuado de la seccin deherramientas Web del panel Herramientas.

Haga clic en el icono de ojo junto a la capa de Web del panel Capas.Para ocultar o mostrar las guas de divisin en todas las vistas de

documento:

Seleccione Ver > Guas de divisin.12.1.2.3 Cambio del color de la divisin y de las guas de divisin

Si los colores utilizados en un documento son similares al color de la divisin,

puede resultar difcil ver las divisiones en estos objetos del documento. Parafacilitar la visualizacin, puede asignar un color diferente a las divisionesseleccionadas. Cada divisin puede tener un color exclusivo para organizarlasmejor. Tambin es posible modificar el color de las guas de divisin.

Nota: en la Vista previa, las divisiones no seleccionadas aparecen con unasuperposicin de color blanco.

Para cambiar el color de un objeto de divisin seleccionado:

En el Inspector de propiedades elija un nuevo color en el cuadro de colores.Para cambiar el color de las guas de divisin:

1.Seleccione Ver > Guas > Editar guas.2.Seleccione un nuevo color en la seccin Color divisin del cuadro de dilogo

Guas y haga clic en Aceptar.


7/57



12.1.3 Edicin de divisiones

En Fireworks un diseo de divisiones se manipula como una tabla en unprocesador de textos. Cuando arrastre una gua para cambiar el tamao de unadivisin, Fireworks tambin cambiar automticamente de tamao todas lasdivisiones rectangulares adyacentes. Adems, puede utilizar el Inspector depropiedades para cambiar el tamao y transformar divisiones como lo hara conlos objetos vectoriales y de mapa de bits.

12.1.3.1 Desplazamiento de guas para editar divisiones

Las guas de divisin definen el permetro y la posicin de las divisiones. Las guasde divisin que se extienden ms all de los objetos de divisin definen cmo sedividir el resto del documento durante la exportacin. La forma de un objeto dedivisin rectangular puede cambiarse arrastrando las guas que lo rodean. No esposible cambiar el tamao de los objetos de divisin no rectangulares al mover lasguas de divisin.

Cambio del tamao de un objeto de divisin arrastrando sus guas

Nota: cuando se arrastran las guas de divisin que rodean un botn de Fireworksen la ventana de documento, Fireworks cambiar el tamao de la divisin quedefine el rea activa de dicho botn. Sin embargo, no es posible eliminar el reaactiva de un botn de Fireworks arrastrando las guas de divisin que lo rodean.

Si se ha alineado varios objetos de divisin a lo largo de una nica gua dedivisin, podr arrastrar dicha gua de divisin para cambiar el tamao de todoslos objetos de forma simultnea.


8/57



Cambio del tamao de varios objetos de divisin arrastrando una gua

Adems, si arrastra una gua a lo largo de una coordenada determinada, el restode las guas en la misma coordenada se mover con ella.

Para cambiar el tamao de una o varias divisiones:

1.Site la herramienta Puntero o Subseleccin sobre una gua de divisin.El cursor adopta la forma del puntero de movimiento de guas.

2.Arrastre la gua de divisin hasta la ubicacin que desee.Se cambiar el tamao de las divisiones y todas las divisiones adyacentestambin cambiarn de tamao automticamente.Para cambiar la posicin de una gua de divisin hasta el borde del

lienzo:

Utilice la herramienta Puntero o Subseleccin para arrastrar la gua dedivisin fuera del borde del lienzo.

Para desplazar guas de divisin adyacentes:

1.Arrastre, manteniendo pulsada la tecla Mays, una gua de divisin a lo largode otras guas de divisiones adyacentes.

2.Libere la gua de divisin en la ubicacin que desee.Todas las guas de divisin que ha arrastrado se desplazarn hasta esta

ubicacin.

Sugerencia: puede cancelar esta operacin liberando la tecla Maysantes de soltar el botn del ratn. Todas las guas de divisin que haseleccionado se ajustarn en sus posiciones originales.

12.1.3.2 Utilizacin de herramientas para editar objetos de divisin

Utilice las herramientas Puntero, Subseleccin y Transformar para modificar laforma o el tamao de una divisin. Slo se pueden sesgar y distorsionar lasdivisiones poligonales.

Nota: al utilizar estas herramientas para cambiar el tamao y la forma de lasdivisiones, es posible que se creen divisiones superpuestas, debido a que eltamao de los objetos de divisin adyacentes no se ajusta automticamente. Si lasdivisiones se superponen, la divisin superior en el orden de apilamiento tendrprioridad al utilizar funciones para interactividad. Para evitar la superposicin dedivisiones utilice las guas para editar las divisiones. Para ms informacin,consulte Desplazamiento de guas para editar divisiones(See 2.11.1.3.1).


9/57



Para editar la forma de una divisin seleccionada, siga uno de estosprocedimientos:

Seleccione la herramienta Puntero o Subseleccin y arrastre los puntos deesquina de la divisin para modificar su forma.

Utilice una herramienta de transformacin para realizar la transformacinque desee.

Para ms informacin sobre la utilizacin de las herramientas detransformacin, consulte Transformacin y distorsin de objetosseleccionados y selecciones(See 2.3.4).

Nota: al transformar una divisin rectangular puede cambiar su forma,posicin o tamao, pero la propia divisin sigue siendo rectangular.

12.1.3.3 Utilizacin del Inspector de propiedades o panel Informacin para

editar objetos de divisinEs posible cambiar la posicin y el tamao de un objeto de divisin introduciendovalores numricos en el Inspector de propiedades. Para obtener ms informacinsobre cmo cambiar el tamao de un objeto introduciendo valores numricos,consulte Transformacin numrica de objetos(See 2.3.4.6). Para ms informacinsobre cmo cambiar la posicin de un objeto introduciendo valores numricos,consulte Edicin de objetos seleccionados(See 2.3.3).

12.2 Adicin de interactividad en las divisiones

Los elementos bsicos para la creacin de interactividad en Fireworks son los

objetos de divisin. Fireworks ofrece dos mtodos para aadir interactividad en lasdivisiones:

La forma ms sencilla es el mtodo rollover de arrastrar y colocar. Con sloarrastrar el tirador de comportamiento de una divisin y colocarlo en unadivisin de destino podr crear rpidamente una interactividad sencilla.

El panel Comportamientos permite crear una interactividad ms compleja.Adems, el panel Comportamientos contiene diferentes comportamientosinteractivos que puede incluir en las divisiones. Si incluye varioscomportamientos en una nica divisin, podr crear interesantes efectos.

Tambin puede elegir entre una variedad de acciones de ratn que activancomportamientos interactivos.

Los comportamientos de Fireworks son compatibles con los de MacromediaDreamweaver. Cuando exporta un rollover de Fireworks a Dreamweaver, puedeeditar los comportamientos de Fireworks mediante el panel Comportamientos deDreamweaver.


10/57


11/57



cualquier fotograma; los rollovers desunidos intercambian imgenes de unadivisin diferente de la divisin de activacin.

Cuando selecciona un objeto Web de activacin en Fireworks que se haya creadomediante un tirador de comportamiento o el panel Comportamientos, aparecentodas sus relaciones de comportamiento. De forma predeterminada, una

interaccin de rollover se representa mediante una lnea azul de comportamiento.12.2.1.2 Creacin de un rollover simple

Un rollover simple intercambia el fotograma que se encuentra justo debajo delfotograma superior y requiere slo una divisin.

Para incluir un rollover simple en una divisin:

1.Asegrese de que el objeto de activacin no se encuentra en una capacompartida. Para ms informacin, consulte Utilizacin compartida decapas(See 2.9.1.7).

2.Seleccione Edicin > Insertar > Divisin para crear una divisin sobre elobjeto de activacin.3.Cree un nuevo fotograma en el panel Fotogramas haciendo clic en el botn

Fotograma nuevo/duplicado.

4.Cree, pegue o importe una imagen para utilizarla como imagen deintercambio en el nuevo fotograma.


12/57



Site la imagen debajo de la divisin que cre en el paso 2, que est anvisible aunque ahora est en el Fotograma 2. Las divisiones son visibles entodos los fotogramas.

5.Seleccione el Fotograma 1 en el panel Fotogramas para volver al fotograma

que contiene la imagen original.6.Seleccione la divisin y coloque el puntero sobre el tirador de

comportamiento. El puntero cambia a una mano.

Nota: puede seleccionar la divisin en cualquier fotograma.

7.Haga clic en el tirador de comportamiento y elija Rollover simple en el men.8.Haga clic en la ficha Vista previa y pruebe el rollover simple o pulse F12 para

verlo en un navegador.

12.2.1.3 Creacin de un rollover desunido

Un rollover desunido intercambia una imagen bajo un objeto Web cuando elpuntero se sita sobre otro objeto Web. En respuesta a la accin de colocar elcursor o puntero sobre el rea o a la accin de hacer clic en la imagen deactivacin, aparece otra imagen en una ubicacin distinta de la pgina Web. Laimagen sobre la que se sita el cursor se considera el elemento activador; laimagen que cambia se considera el elemento destino.

Al igual que en el caso de los rollovers simples de slo una divisin, primero debeconfigurar la divisin del elemento activador y la divisin de destino con elfotograma en el que reside la imagen de intercambio. Despus, debe vincular el

rea de activacin y la divisin de destino con una lnea de comportamiento.Nota: no es necesario que el rea de activacin de un rollover desunido sea unadivisin. Las zonas interactivas y los botones tambin tienen tiradores decomportamiento que pueden utilizarse para crear rollovers desunidos. Paraobtener ms informacin sobre las zonas interactivas, consulte Creacin de zonasinteractivas(See 2.11.4.1). Para ms informacin sobre los botones, consulteCreacin de smbolos de botn(See 2.12.1).


13/57



Para incluir un rollover desunido en una imagen seleccionada:

1.Seleccione Edicin > Insertar > Divisin o Zona interactiva para incluir unadivisin o zona interactiva en la imagen de activacin.

Nota: este paso no es necesario si el objeto seleccionado es un botn o si yaexiste una divisin o una zona interactiva en la imagen.

2.Cree un nuevo fotograma haciendo clic en el botn Fotogramanuevo/duplicado del panel Fotogramas.

3.Coloque una segunda imagen, que se utilizar como elemento destino, en elnuevo fotograma y en la posicin que desee en el lienzo. Puede colocar laimagen en cualquier punto salvo debajo de la divisin que cre en el paso 1.

4.Seleccione la imagen y elija Edicin > Insertar > Divisin para incluir unadivisin en la imagen.

5.Seleccione el Fotograma 1 en el panel Fotogramas para volver al fotogramaque contiene la imagen original.

6.Seleccione la divisin, zona interactiva o botn que cubre el rea deactivacin (la imagen original) y coloque el puntero sobre el tirador decomportamiento. El puntero cambia a una mano.

7.Arrastre el tirador de comportamiento de la zona activa o divisin deactivacin a la divisin de destino que cre en el paso 4.

La lnea de comportamiento se extiende desde el centro del objeto activador

hasta la esquina superior izquierda de la divisin de destino y se abre elcuadro de dilogo Intercambiar imagen.

8.En el men emergente Intercambiar imagen de, seleccione el fotograma quecre en el paso 2 y haga clic en Aceptar.

9.Haga clic en el botn Vista previa para ver una presentacin preliminar yprobar el rollover desunido.


14/57



12.2.1.4 Aplicacin de varios rollovers a una divisin

Es posible arrastrar ms de un tirador de comportamiento desde una divisin paracrear varios comportamientos de intercambio. Por ejemplo, es posible activar unrollover normal y otro desunido a partir de la misma divisin.

Una divisin que activa un comportamiento de rollover y un comportamiento de

rollover desunidoNota: tambin puede aadir varios comportamientos mediante el panelComportamientos. Para ms informacin, consulte Utilizacin del panelComportamientos para aadir interactividad en las divisiones(See 2.11.2.2).

Para aplicar ms de un rollover a una divisin seleccionada:

1.Arrastre un tirador de comportamiento desde la divisin seleccionada hastael borde de la misma divisin o sobre otra divisin.

Al arrastrar el tirador hasta el borde superior izquierdo de la misma divisin,

se crea una imagen de intercambio, si la arrastra hasta otra divisin se creaun rollover desunido.

2.Seleccione el fotograma de la imagen de intercambio y haga clic en Aceptar.3.Cree ms rollovers repitiendo los pasos 1 y 2 tantas veces como lo desee.

12.2.1.5 Eliminacin de un rollover de arrastrar y colocar

Puede eliminar fcilmente un rollover de arrastrar y colocar de una divisin, zonainteractiva o botn.

Para eliminar un rollover de arrastrar y colocar de un objeto Web obotn seleccionado:

1.Haga clic en la lnea azul de comportamiento que desee eliminar.2.Haga clic en Aceptar para eliminar el comportamiento de intercambio de

imagen.


15/57



12.2.2 Utilizacin del panel Comportamientos para aadirinteractividad en las divisiones

Adems de los rollovers, es posible incluir otros tipos de interactividad en lasdivisiones utilizando el panel Comportamientos. Puede crear sus propiasinteracciones personalizadas si edita los comportamientos existentes.

Nota: aunque es posible crear rollovers simples, desunidos y complejos con elpanel Comportamientos, se recomienda utilizar el mtodo de rollover de arrastrary colocar. Para ms informacin, consulte Incorporacin de interactividad sencillaen las divisiones(See 2.11.2.1).

En Fireworks estn disponibles los siguientes comportamientos:

Rollover simple aade un comportamiento de rollover a la divisin seleccionadautilizando el Fotograma 1 como estado Arriba y el Fotograma 2 como estadoSobre. Despus de seleccionar este comportamiento, debe crear una imagen en unsegundo fotograma, en la misma divisin, para crear el estado Sobre. En realidad,la opcin Rollover simple es un grupo de comportamientos que contiene loscomportamientos Intercambiar imagen y Restaurar imagen de intercambio.

Intercambiar imagen reemplaza el contenido de la divisin especificada por elde otro fotograma o el de un archivo externo.

Restaurar imagen intercambiada devuelve el objeto destino a su aspectopredeterminado del Fotograma 1.

Establecer imagen de Bar Nav determina si una divisin es parte de una barrade navegacin de Fireworks. Todas las divisiones que forman parte de la barra denavegacin deben tener este comportamiento. En realidad, la opcin Establecerimagen de barra de navegacin es un grupo de comportamientos que contiene loscomportamientos Bar Nav Sobre, Bar Nav Abajo y Restaurar Bar Nav. Estecomportamiento se define automticamente de forma predeterminada cuandoutiliza el Editor de botones para crear un botn que incluya los estados Incluirestado Sobre y Abajo o Mostrar imagen Abajo despus de cargar. Al crear unbotn de dos estados, se asigna un comportamiento rollover simple a la divisin.Al crear un botn de tres o cuatro estados, se asigna un comportamientoEstablecer imagen de barra de navegacin a la divisin. Para obtener msinformacin sobre los botones, consulte Creacin de smbolos de botn(See2.12.1).

Bar Nav Sobre especifica el estado Sobre para la divisin seleccionada cuandoforma parte de una barra de navegacin y tambin puede especificar los estadosPrecargar imgenes e Incluir estado Sobre y Abajo.

Bar Nav Abajo especifica el estado Abajo para la divisin seleccionada cuandoforma parte de una barra de navegacin y tambin puede especificar el estadoPrecargar imgenes.


16/57



Restaurar Bar Nav restaura las otras divisiones de la barra de navegacin a suestado Arriba.

Establecer men emergente asocia un men emergente a una divisin o zonainteractiva. Al aplicar un comportamiento de men emergente, se puede utilizar elEditor de mens emergentes. Para ms informacin, consulte Creacin de mensemergentes(See 2.12.3).

Establecer el texto de la barra de estado permite definir texto que apareceren la barra de estado de la parte inferior de las ventanas de la mayora de losnavegadores.

12.2.2.1 Asociacin de comportamientos

Gracias al panel Comportamientos puede asociar un comportamiento a unadivisin. Tambin es posible asociar ms de un comportamiento.

Para asociar un comportamiento a una divisin seleccionada

mediante el panel Comportamientos:

1.Haga clic en el botn Aadir comportamiento (el botn ms) del panelComportamientos.

2.Seleccione un comportamiento en el botn Aadir comportamiento. Paraobtener una explicacin de cada comportamiento, consulte Utilizacin delpanel Comportamientos para aadir interactividad en las divisiones(See

2.11.2.2).12.2.2.2 Edicin de comportamientos

El panel Comportamientos tambin ofrece la posibilidad de editar comportamientosexistentes. Puede especificar el tipo de evento de ratn (como onClick) que activael comportamiento.


17/57



Nota: no es posible cambiar el evento de Rollover simple ni de Establecer imagende barra de navegacin.

Para cambiar el evento de ratn que activa el comportamiento:

1.Seleccione la divisin de activacin o zona interactiva que contiene elcomportamiento que desee modificar.Todos los comportamientos asociados con dicha divisin o zona activaaparecen en el panel Comportamientos.

2.Seleccione el comportamiento que desee editar.3.Haga clic en la flecha que se encuentra junto al evento y elija un nuevo

evento en el men desplegable:

onMouseOver activa el comportamiento cuando el puntero se encuentra

sobre el rea de activacin.onMouseOut activa el comportamiento cuando el puntero abandona

el rea de activacin.

onClick activa el comportamiento cuando se hace clic en el objeto deactivacin.

onLoad activa el comportamiento cuando se carga la pgina Web.

12.2.2.3 Utilizacin de imgenes externas como imgenes de intercambio

Puede utilizar una imagen externa al documento actual de Fireworks como origen

para una imagen de intercambio. Las imgenes de origen pueden estar en formatoGIF, GIF animado, JPEG o PNG. Si elige un archivo externo como origen delrollover, Fireworks intercambia dicho archivo con la divisin de destino cuando seactiva la imagen de intercambio en un navegador Web.

El archivo debe tener la misma altura y anchura que la divisin en que se va acolocar. En caso contrario, el navegador acomoda el archivo para encajarlo dentrodel objeto de divisin. Este cambio de tamao puede reducir la calidad,especialmente si se trata de un GIF animado.

Para seleccionar un archivo de imagen externo como origen de una

imagen de intercambio:

1.Elija Archivo de imagen y haga clic en el icono de carpeta en los cuadros dedilogo Intercambiar imagen, Bar Nav Sobre o Bar Nav Abajo.

Nota: Si no aparece esta opcin en el cuadro de dilogo Intercambiarimagen, elija Ms opciones y realice el paso 1.


18/57



2.Localice el archivo que desee utilizar y haga clic en Abrir.3.Si fuera necesario, no seleccione la casilla Precargar imgenes (si el archivo

externo es un archivo GIF animado).

El cach previo puede interrumpir la visualizacin de los archivos GIF

animados como estados de rollover. No seleccione la casilla Precargarimgenes cuando defina el rollover para evitar este problema.

Nota: si desea exportar el documento para utilizarlo en la Web,asegrese de que es posible acceder al archivo de imagen externo desde elcdigo HTML exportado de Fireworks. Fireworks crea rutas de accesorelativas al documento para los archivos de imagen. Se recomienda copiarlos archivos externos en su ubicacin local antes de utilizarlos comoimgenes de intercambio en Fireworks. Cuando transfiera sus archivo a laWeb, asegrese de transferir tambin los archivos de imagen externos. Params informacin sobre el cdigo HTML de Fireworks, consulte Exportacin

HTML(See 2.14.4.7).

12.3 Preparacin de las divisiones para la exportacin

Mediante el Inspector de propiedades es posible crear divisiones interactivas a lasque puede asignar vnculos y destinos. Asimismo puede especificar textoalternativo que aparecer en un navegador conforme se carga una imagen.Tambin puede elegir un formato de exportacin de archivo para optimizar unadivisin seleccionada. Si el Inspector de propiedades est minimizado, haga clic enla flecha de expansin que se encuentra en la esquina inferior derecha para vertodas las propiedades de la divisin.

Propiedades de la divisin en el Inspector de propiedades

Utilice el Inspector de propiedades o el panel Capas para asignar diferentesnombres a las divisiones. Fireworks utiliza el nombre que especifique para asignarnombres a los archivos que se generarn a partir de la divisin durante laexportacin. Si no introduce un nombre de divisin en el Inspector de

propiedades, Fireworks asignar de forma automtica nombres para las divisionesdurante la exportacin. Puede cambiar el criterio de denominacin automtica queutiliza Fireworks en el cuadro de dilogo Configuracin de HTML.

Fireworks exporta un documento de Fireworks con divisiones como un archivoHTML y varios archivos de imagen. Las propiedades del archivo HTML exportadopueden definirse en el cuadro de dilogo Configuracin de HTML.


19/57



12.3.1 Asignacin de URL

Un valor URL (Uniform Resource Locator) es una direccin especfica de Internetpara una pgina o un archivo. Cuando se asigna un valor URL a una divisin, elusuario puede ir directamente a la direccin cuando haga clic en el rea definidadentro del navegador Web.

Para asignar un vnculo URL a una divisin seleccionada:

Introduzca un valor URL en el cuadro de texto Vnculo del Inspector depropiedades.

Sugerencia: si piensa volver a utilizar los mismos valores URL, puede crear unabiblioteca de vnculos en el panel URL para guardar estos valores. Para msinformacin, consulte Utilizacin de URL(See 2.10.3).

12.3.2 Introduccin de texto alternativo

El texto alternativo o alt aparece en el marcador de posicin de la imagenmientras sta se descarga de la Web. Tambin aparece en lugar de una imagenque no se descargue correctamente. En algunas de las versiones ms recientes delos navegadores, este texto tambin aparece como un cuadro de sugerencias.

La introduccin de texto alternativo conciso y til adquiere cada vez msimportancia en el diseo Web. Un nmero creciente de personas con problemas devisin utilizan aplicaciones de lectura de la pantalla que leen el texto alternativocon una voz sinttica cuando el puntero se sita sobre las imgenes de una pginaWeb.

Para especificar texto alt en una divisin o zona interactivaseleccionada:

En el inspector Propiedades, escriba el texto en el cuadro de texto Alt.12.3.3 Asignacin de un marco destino

Un destino es un marco de pgina Web alternativo, o una ventana de navegadorWeb, en donde se abre el documento vinculado. Puede especificar un destino parauna divisin seleccionada en el Inspector de propiedades. Si el Inspector depropiedades est minimizado, haga clic en la flecha de expansin para ver todaslas propiedades.

Para especificar un destino de una divisin o zona interactivaseleccionada en el Inspector de propiedades:

Introduzca un nombre de marco HTML en el cuadro de texto Destino o elijaun destino reservado en el men emergente Destino:


20/57



blank carga los documentos vinculados en una ventana de navegador nuevasin nombre.

parent carga el documento vinculado en el conjunto de marcosrelacionados o en la ventana del marco que contiene el vnculo. Si el marco

que contiene el vnculo no est anidado, el documento vinculado se carga enla ventana de navegador completa.

selfcarga el documento vinculado en el mismo marco o en la mismaventana que el vnculo. Normalmente no es necesario especificar el destino,ya que est implcito.

_top carga el documento vinculado en la ventana de navegadorcompleta y, por consiguiente, se eliminan todos los marcos.

12.3.4 Configuracin de exportacin

Es posible optimizar una divisin seleccionando una opcin del men emergenteConfiguracin de exportacin del Inspector de propiedades o del panel Optimizar.Puede elegir diferentes ajustes de exportacin para definir rpidamente unformato de archivo y aplicar ajustes especficos de un formato. Para obtener msinformacin sobre la utilizacin y la personalizacin de estas configuraciones,consulte Utilizacin de las configuraciones de optimizacin(See 2.14.3.1).

12.3.5 Asignacin de nombres para las divisiones

La divisin corta una imagen en varios trozos. Fireworks exporta cada porcin decada fotograma como un archivo independiente que debe tener un nombre.

Fireworks asigna un nombre a cada archivo de divisin durante la exportacin.Puede aceptar los criterios de denominacin predeterminados, cambiar estoscriterios, o especificar un nombre especfico para cada divisin.

12.3.5.1 Denominacin personalizada de archivos de divisin

Puede ser conveniente asignar nombres a las divisiones para identificar fcilmentelos archivos de divisin en la estructura de archivos de su sitio Web. Por ejemplo,si tiene un botn en una barra de navegacin que retorna a la pgina principal,puede denominarlo Principal.

Para introducir un nombre personalizado de divisin, siga uno de

estos procedimientos:

Seleccione la divisin en el lienzo, introduzca un nombre en el cuadroNombre de objeto del Inspector de propiedades y pulse Intro.

Haga doble clic en el nombre de la divisin de la capa de Web, escriba unnuevo nombre y pulse Intro.


21/57



No aada ninguna extensin de archivo al nombre base. Durante laexportacin, Fireworks aade la extensin de archivo de forma automtica alos archivos de divisin.

12.3.5.2 Denominacin automtica de archivos de divisin

Si no introduce un nombre de divisin en el Inspector de propiedades o en el panelCapas, Fireworks asignar de forma automtica nombres para las divisiones. Ladenominacin automtica asigna un nombre especfico a cada archivo de divisinsegn los criterios de denominacin predeterminados.

Para asignar de forma automtica un nombre a un archivo dedivisin:

Cuando exporte la imagen con divisiones, especifique un nombre en elcuadro de texto Nombre de archivo (Windows) o Nombre (Macintosh) delcuadro de dilogo Exportar. No aada ninguna extensin de archivo. Durante

la exportacin, Fireworks aade la extensin de archivo de forma automticaa los archivos de divisin.

12.3.5.3 Modificacin de los criterios predeterminados de denominacinautomtica

La ficha Especfico del documento del cuadro de dilogo Configuracin de HTMLpermite cambiar los criterios de denominacin de las divisiones.

Fireworks permite especificar su propio criterio de denominacin que utilice unaamplia variedad de opciones para asignar nombres. Puede crear un criterio dedenominacin que tenga hasta ocho elementos. Un elemento puede constar decualquiera de las opciones siguientes de denominacin automtica.

Opcin Descripcin

Ninguna No se aplica ningn nombre al elemento.

nombre.doc

El elemento utiliza el nombre del documento.

"divisin" Inserta la palabra "divisin" en el criterio dedenominacin.

N dedivisin(1,2,3...)

N dedivisin(01,02,03...)

El elemento se enumera de forma numrica o alfabtica,segn el estilo que elija.


22/57



N dedivisin(A,B,C...)

N dedivisin (a,b,c...)

fila/columna (r3_c2,r4_c7...)

Fila (r##) y Col (c##) designan las filas y las columnasde la tabla que utilizarn los navegadores Web parareconstruir una imagen dividida. Puede utilizar estainformacin en el criterio de denominacin.

SubrayadoPuntoEspacioGuin

El elemento utiliza cualquiera de estos caracteres,normalmente, como separadores entre otros elementos.

Por ejemplo, si el nombre del documento es midoc, el criterio de denominacinnombre.doc + "divisin" + Divisin n. (A,B,C...)crear una divisin denominadamidocdivisinA. Es probable que nunca necesite un criterio de denominacin queutilice los ocho elementos.

Si una divisin tiene ms de un fotograma, Fireworks aade, de formapredeterminada, un nmero a cada archivo de fotograma. Por ejemplo, siespecifica el nombre personalizado de archivo de divisin principal para un botncon tres estados, Fireworks asigna el nombre "principal.gif" al grfico del estadoArriba, "principal_f2.gif" al grfico del estado Sobre y "principal_f3.gif" al grficodel estado Abajo. Fireworks permite crear su propio criterio de denominacin paralas divisiones con varios fotogramas mediante el cuadro de dilogo Configuracinde HTML.

Para cambiar los criterios predeterminados de denominacinautomtica:

1.Seleccione Archivo > Configuracin de HTML para abrir el cuadro de dilogoConfiguracin de HTML.

2.Haga clic en la ficha Especfico del documento.3.En la seccin Nombres de archivo, cree el criterio que desee seleccionandoelementos en las listas.


23/57



4.(Opcional) Para definir esta informacin como valor predeterminado en losnuevos documentos de Fireworks, haga clic en Fijar predeterminados.

Nota: Tenga cuidado si utiliza la opcin de men Ninguno comodenominacin automtica de divisiones. Si elige Ninguno en las tresprimeras opciones, Fireworks exporta archivos de divisin que sesobrescribirn, se exportar un nico archivo grfico y una tabla quemostrar este grfico en cada celda.

12.3.6 Definicin de la exportacin de tablas HTML

La creacin de divisiones define cmo aparecer la estructura de la tabla HTMLcuando exporte un documento Fireworks para utilizarlo en la Web.

Si exporta un documento con divisiones de Fireworks como HTML, el documentose vuelve a ensamblar mediante una tabla HTML. Cada elemento de divisin deldocumento Fireworks reside en una celda de tabla. Tras la exportacin, unadivisin de Fireworks se convierte en una celda de tabla en el cdigo HTML.

Puede elegir cmo se reconstruye una tabla de Fireworks en un navegador. Entrelas diversas opciones disponibles, puede elegir si desea utilizar espaciadores otablas anidadas durante la exportacin a HTML:

Los espaciadores son imgenes que permiten alinear correctamente lasceldas de tabla al mostrarse en un navegador.


24/57



Una tabla anidada es una tabla dentro de otra tabla. Las tablas anidadas noutilizan espaciadores. Pueden tardar ms en cargarse en un navegador, perola edicin del cdigo HTML resulta ms fcil al no haber espaciadores.

Para ms informacin sobre HTML, consulte Exportacin HTML(See 2.14.4.7).

Para definir la forma en que Fireworks exporta tablas HTML:

1.Seleccione Archivo > Configuracin de HTML o haga clic en el botnOpciones en el cuadro de dilogo Exportar.

2.Haga clic en la ficha Tabla.3.Seleccione una opcin de espaciado en el men emergente Espacio con:

Tablas anidadas -- Sin espaciadores crea una tabla anidada sinespaciadores.

Tabla nica -- Sin espaciadores crea una sola tabla sinespaciadores. Esta opcin puede provocar que las tablas aparezcanincorrectamente en algunos casos.

Espaciador transparente de 1 pxel utiliza un archivo GIFtransparente de 1x1 pxeles como espaciador cuyo tamao puede cambiarseconforme sea necesario en el cdigo HTML. Genera una fila de 1 pxel dealtura a lo ancho de la parte superior de la tabla y una columna de 1 pxel deancho en la parte derecha de la tabla.

4.Seleccione un color de celda para las divisiones HTML:

Seleccione Usar color del lienzo para que las celdas tengan el mismocolor de fondo que el lienzo del documento.

Si desea elegir otro color, no seleccione Usar color del lienzo y elija uncolor en la ventana emergente Color.

Nota: Si elige un color de la ventana emergente, slo se aplicar a lasdivisiones HTML; las divisiones de imagen seguirn utilizando el color dellienzo.

5.En el men emergente Contenido, elija lo que desea colocar en las celdasvacas:Ninguno hace que las celdas permanezcan vacas.

Imagen espaciadora coloca un pequeo archivo de imagentransparente denominado spacer.gif en las celdas vacas.

Espacio indivisible coloca una etiqueta HTML de espacio en lasceldas vacas. La celda aparece hueca.


25/57



Nota: las celdas vacas slo se producen si no se selecciona Incluirreas sin divisiones en el cuadro de dilogo Exportar.

6.Haga clic en Aceptar.Para ms informacin sobre las opciones de exportacin de HTML, consulteAjuste de las opciones de exportacin de HTML(See 2.14.4.7.11).

Nota: es posible especificar valores diferentes de exportacin de tablapara cada objeto dividido de cada documento. Si lo desea, puede utilizar elbotn Fijar predeterminados de la ficha Especfico del documento del cuadrode dilogo Configuracin de HTML para utilizar estos valores comopredeterminados en todos los nuevos documentos.

12.4 Utilizacin de zonas interactivas y mapas de imagen

Los diseadores Web pueden utilizar pequeas zonas interactivas en imgenes

ms grandes, vinculando reas de grficos Web a una URL. En Fireworks esposible crear un mapa de imagen exportando HTML de un documento quecontenga zonas interactivas.

Un mapa de imagen con zonas interactivas

Las zonas interactivas y los mapas de imagen necesitan normalmente menosrecursos que los grficos con divisiones. La creacin de divisiones necesita msrecursos por parte de los navegadores Web debido a que es preciso descargar el

cdigo HTML adicional y volver a ensamblar los grficos divididos.Nota: es posible crear un mapa de imagen con divisiones. Al exportar un mapa deimagen con divisiones, se suelen generar varios archivos grficos. Para obtenerinformacin adicional sobre las divisiones, consulte Creacin de objetos dedivisin(See 2.11.1.1).

Las zonas interactivas resultan convenientes cuando desea vincular reas de unaimagen con otras pginas Web, pero no necesita resaltar estas reas ni producir


26/57



efectos de rollover en respuesta a los movimientos o acciones del ratn. Las zonasinteractivas y los mapas de imagen tambin son perfectas cuando el grfico en elque ha insertado las zonas interactivas se exporta mejor como un nico archivo deimagen, es decir, utilizando un mismo formato de archivo y la mismaconfiguracin de optimizacin.

12.4.1 Creacin de zonas interactivas

Despus de identificar las reas del grfico origen que podran servir como zonasinteractivas, puede crear estas zonas y asignarles vnculos URL, mensemergentes, mensajes de barra de estado y texto alt. Existen dos formas de crearzonas interactivas:

Puede dibujar un rea de destino en el grfico, utilizando las herramientasZona interactiva rectangular, circular o poligonal (forma irregular).

Es posible seleccionar un objeto e insertar en l la zona interactiva.Las zonas interactivas pueden tener formas que no sean rectngulos ni crculos.Tambin puede crear zonas interactivas poligonales que consten de muchospuntos. Esto puede ser necesario cuando se trabaje con imgenes complejas.

Para crear una zona interactiva rectangular o circular:

1.Seleccione la herramienta Zona interactiva rectangular o Zona interactivacircular en la seccin Web del panel Herramientas.

2.Arrastre la herramienta Zona interactiva para dibujar una zona interactivasobre un rea del grfico. Mantenga pulsadas las teclas Alt+Mays(Windows) u Opcin+Mays (Macintosh) para dibujar a partir de un puntocentral.

Nota: es posible ajustar la posicin de una zona interactiva al arrastrarlamientras la dibuja. Mantenga pulsado el botn del ratn, pulse y mantengapulsada la barra espaciadora, despus, arrastre la zona interactiva hastaotro punto del lienzo. Suelte la barra espaciadora para continuar el dibujo dela zona interactiva.Para crear una zona interactiva con forma irregular:

1. Elija la herramienta Zona interactiva poligonal.


27/57



2.Haga clic en la herramienta para trazar los puntos de vector, igual que siestuviese dibujando segmentos de lnea recta con la herramienta Pluma. Elrelleno permite definir el rea de la zona interactiva, sin importar si eltrazado est abierto o cerrado.

Para crear una zona interactiva mediante el trazado de uno o variosobjetos seleccionados:

1.Seleccione Edicin > Insertar > Zona interactiva.Si selecciona varios objetos, aparece un mensaje en el que se pregunta sidesea crear una nica zona interactiva rectangular que abarque todos losobjetos o varias zonas interactivas, una para cada objeto.

2.Haga clic en Uno o en Varios. En la capa de Web aparece una o varias zonasinteractivas nuevas.

12.4.2 Edicin de zonas interactivas

Las zonas interactivas son objetos Web y, al igual que otros muchos objetos,pueden modificarse mediante las herramientas Puntero, Subseleccin yTransformar. Para obtener ms informacin sobre la utilizacin de lasherramientas para editar un objeto Web, consulte Utilizacin de herramientas paraeditar objetos de divisin(See 2.11.1.3.2).

Es posible cambiar la posicin y el tamao de una zona interactiva introduciendovalores numricos en el Inspector de propiedades o panel Informacin. Paraobtener ms informacin sobre cmo cambiar el tamao de un objeto

introduciendo valores numricos, consulte Transformacin numrica deobjetos(See 2.3.4.6). Para ms informacin sobre cmo cambiar la posicin de unobjeto introduciendo valores numricos, consulte Edicin de objetosseleccionados(See 2.3.3).

El Inspector de propiedades tambin permite cambiar la forma de una zonainteractiva.

Para convertir una zona interactiva seleccionada en otra rectangular,circular o poligonal:

En el Inspector de propiedades, elija Rectngulo, Crculo o Polgono en elmen emergente Forma de la zona interactiva.12.4.3 Preparacin de las zonas interactivas para la exportacin

Puede utilizar el Inspector de propiedades para asignar valores URL, textoalternativo, marcos destino y nombres personalizados a las zonas interactivas. Siel Inspector de propiedades est minimizado, haga clic en la flecha de la esquinainferior derecha para ver todas las propiedades.


28/57



Las propiedades de una zona interactiva se asignan del mismo modo que las

propiedades de una divisin. Para ms informacin sobre la utilizacin delInspector de propiedades para asignar URL, texto alternativo, marcos destino ynombres personalizados, consulte Preparacin de las divisiones para laexportacin(See 2.11.3).

12.4.4 Creacin de mapas de imagen

Una vez que ha aadido varias zonas interactivas sobre una imagen, es precisoexportar la imagen para que funcione como un mapa de imagen en un navegadorWeb. Cuando se exporta un mapa de imagen, se generan el archivo grfico y elarchivo HTML que contiene la informacin de mapa para las zonas interactivas y

los vnculos URL correspondientes.Nota: Fireworks slo crea mapas de imagen de cliente durante la exportacin.

Como alternativa a la exportacin, puede copiar el mapa de imagen en elPortapapeles y pegarlo en Dreamweaver u otro editor de HTML.

Para exportar un mapa de imagen o copiarlo en el Portapapeles:

1.Para preparar el grfico con el fin de exportarlo, debe optimizarlo.Para ms informacin, consulte Acerca de la optimizacin(See 2.14.1).

2.Seleccione Archivo > Exportar.3.Si desea exportar una imagen (en lugar de copiarla en el Portapapeles), abra

la carpeta en la que desea colocar el archivo HTML y asigne un nombre alarchivo.

Si ya ha creado una estructura local de archivos para el sitio Web, puedeguardar el grfico en la carpeta correcta del sitio.

4.En el men desplegable Tipo, elija HTML e imgenes.5.Seleccione una opcin en el men emergente HTML:

Exportar archivo HTML genera el archivo HTML necesario y los archivos degrficos correspondientes que despus podr importar en Dreamweaver uotro editor de HTML.

Copiar al portapapeles copia todo el HTML necesario, incluida unatabla si se trata de un documento con divisiones, al portapapeles de formaque pueda pegarlo despus en Dreamweaver u otro editor de HTML.


29/57



6.En Divisiones, elija Ninguna slo si el documento no contiene ningunadivisin.

7.Si fuera necesario, seleccione la opcin Colocar imgenes en subcarpeta yabra la carpeta adecuada.

Nota: Si elige Copiar al portapapeles, este paso no es necesario y, portanto, se desactivar la opcin.

8.Haga clic en Guardar para cerrar el cuadro de dilogo Exportar.Sugerencia: cuando exporte archivos, Fireworks emplea comentarios HTMLpara marcar con claridad el comienzo y el final del cdigo de los mapas deimagen y de otras funciones Web creadas en Fireworks. De formapredeterminada, los comentarios HTML no se incluyen en el cdigo. Si deseaincluirlos, seleccione Incluir comentarios HTML en la ficha General del cuadrode dilogo Configuracin de HTML.

Para ms informacin sobre la colocacin de contenido exportado deFireworks en Dreamweaver, consulte Funcionamiento con MacromediaDreamweaver(See 2.15.1).

12.4.5 Creacin de rollovers con zonas interactivas

Si utiliza el mtodo de rollover de arrastrar y colocar para crear interactividad,podr incluir fcilmente un efecto de rollover desunido en una zona interactiva si elrea destino est definida como una divisin. Los efectos rollover se aplican enzonas interactivas como si fueran divisiones. Para ms informacin, consulteIncorporacin de interactividad sencilla en las divisiones(See 2.11.2.1).

Nota: una zona interactiva slo puede activar un rollover desunido. No puede serel destino de un rollover que provenga de otra zona interactiva o divisin.

Despus de crear un rollover desunido con una zona interactiva, la lnea azul deconexin permanece visible al seleccionar la zona interactiva.


30/57



12.4.6 Utilizacin de zonas interactivas sobre divisiones

Puede colocar una zona interactiva sobre una divisin para activar una accin ocomportamiento. Esto es conveniente si tiene una gran imagen y slo desea queuna pequea porcin acte como activador de una accin.

Por ejemplo, si tiene un grfico grande con texto sobre el mismo y desea que sloel texto active una accin o comportamiento, como un efecto rollover, puedecolocar una divisin sobre el grfico y despus una zona interactiva sobre el texto.Al situar el cursor sobre el texto se activa el efecto rollover, aunque todo el grficoque se encuentra debajo de la divisin desaparece al producirse el efecto rollover.Evite la creacin de zonas interactivas que se superpongan sobre ms de unadivisin ya que puede producirse un efecto impredecible.

Para crear un activador para un efecto rollover utilizando una zonainteractiva sobre una divisin:

1.Inserte una divisin sobre la imagen que desee intercambiar.2.Cree un nuevo fotograma en el panel Fotogramas e inserte una imagen que

se utilizar como imagen de intercambio. Asegrese de colocarla debajo dela divisin insertada en el paso 1.

3.Arrastre una lnea de comportamiento desde la zona interactiva hasta ladivisin que contiene la imagen que desea intercambiar.

Se abre el cuadro de dilogo Intercambiar imagen.

4.Seleccione el fotograma que contiene la imagen de rollover en la listaIntercambiar imagen de, y haga clic en Aceptar.

12.5 Creacin de botones y mens emergentes

Macromedia Fireworks 8 permite crear distintos botones JavaScript y mensemergentes CSS o JavaScript incluso a usuarios que no conocen JavaScript y elcdigo CSS.


31/57



El editor de botones de Fireworks gua al usuario a travs del proceso de creaciny permite automatizar muchas de las tareas. El resultado es un prctico smbolode botn a partir del cual se pueden crear instancias fcilmente para disear unabarra de navegacin o bar nav.

Fireworks tambin incluye el Editor de men emergente que permite crear rpiday fcilmente mens emergentes horizontales y verticales. La ficha Avanzado delEditor de men emergente le ofrece un control creativo sobre el espaciado, rellenoy bordes de celdas, la sangra del texto y otras propiedades.

Al exportar un botn o men emergente, Fireworks genera de forma automtica elcdigo CSS o JavaScript necesario para mostrarlo en un navegador Web. EnMacromedia Dreamweaver, puede insertar fcilmente el cdigo CSS, HTML yJavaScript de Fireworks en las pginas Web o cortar y pegar el cdigo en cualquierarchivo HTML.

12.5.1 Creacin de smbolos de botn

Los botones constituyen los elementos de navegacin de una pgina Web. Losbotones creados en el Editor de botones tienen las caractersticas siguientes:

Puede convertir prcticamente cualquier grfico u objeto de texto en unbotn.

Se puede crear un botn nuevo o convertir un objeto existente en un botnadems de importar otros ya creados.

Un botn es un tipo especial de smbolo. Es posible arrastrar instanciassuyas desde la biblioteca de smbolos al documento.

De este modo puede cambiar el aspecto grfico de un botn y actualizarautomticamente el aspecto de todas las instancias del botn en una barnav. Para ms informacin sobre smbolos, consulte Utilizacin desmbolos(See 2.10.2).

Es posible editar el texto, la URL y el elemento destino de una instancia debotn sin afectar al resto de las instancias del mismo botn y sin romper larelacin smbolo-instancia.

Las instancias de botn estn encapsuladas. Si arrastra la instancia de botnen el documento, Fireworks desplaza todos los componentes y estadosasociados, por lo que no es necesario editar los distintos fotogramas.

Un botn puede editarse de forma sencilla. Haga doble clic en la instanciadel lienzo y podr modificarlo en el Editor de botones o el Inspector depropiedades.


32/57



Al igual que otros smbolos, los botones tienen un punto de registro. Elpunto de registro es un punto central que facilita la alineacin del texto y delos distintos estados del botn cuando est en el Editor de botones.

12.5.1.1 Acerca de los estados de botn

Un botn puede tener hasta cuatro estados diferentes. Cada estado representa elaspecto del botn en respuesta a una accin del ratn:

El estado Arriba es el estado predeterminado o el aspecto "de reposo" del botn.

El estado Sobre es el nuevo aspecto con el que aparecer el botn al mover elpuntero sobre el mismo. Este estado avisa al usuario de que al hacer clic esprobable que se produzca una accin.

El estado Abajo es el que corresponde al botn cuando se hace clic en l. Amenudo se utiliza una imagen cncava del botn para indicar que se ha pulsado.Este estado representa normalmente la pgina Web actual en las barras de

navegacin con varios botones.El estado Sobre y Abajo se presenta cuando se mueve el puntero sobre unbotn que se encuentra en estado Abajo. Este estado de botn normalmenteindica que el puntero est sobre el botn correspondiente a la pgina Web actualen las barras de navegacin con varios botones.

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

12.5.1.2 Utilizacin del Editor de botones

Utilice el Editor de botones de Fireworks para crear y editar un smbolo de botnJavaScript. Las fichas que se encuentran en la parte superior del Editor de botonesse corresponden con los cuatro estados de botn y el rea activa. Las sugerenciasque puede observar en cada opcin del Editor de botones le ayudan a tomardecisiones de diseo para los cuatro estados de botn.

12.5.1.3 Creacin de un botn simple de dos estados

Mediante el Editor de botones puede crear botones personalizados dibujandoformas, importando imgenes o arrastrando objetos desde la ventana dedocumento. A continuacin, el Editor de botones le guiar por los pasos que

permiten controlar el comportamiento del botn.Para crear un estado Arriba:

1.Seleccione Edicin > Insertar > Nuevo botn para abrir el Editor de botones.Se abre el Editor de botones con la ficha del estado Arriba.

2.Importe o cree el grfico del estado Arriba:


33/57



Arrastre y coloque o importe el grfico que aparecer como el estadoArriba del botn en el rea de trabajo del Editor de botones.

Utilice las herramientas de dibujo para crear un grfico o utilice laherramienta Texto para crear un botn a partir de texto.

Haga clic en Importar un botn y seleccione un botn editable yacreado en la biblioteca Importar un botn. Si elige esta opcin no debepreocuparse de la creacin del resto de los estados del botn. Cadauno de los estados del botn aparecer automticamente con losgrficos y el texto adecuados.

3.Si lo desea, elija la herramienta Texto y cree el texto del botn.Para crear un estado Sobre:

1.Haga clic en la ficha Sobre del Editor de botones.2.Siga uno de los procedimientos siguientes para crear el estado Sobre del

botn:

Haga clic en Copiar grfico Arriba, pegue la copia del botn en estadoArriba en la ventana del estado Sobre y modifique el aspecto o texto.

Importe, dibuje o arrastre y coloque un grfico.12.5.1.4 Creacin de un botn con tres o cuatro estados

Al crear un botn, es posible aadir el estado Abajo y Sobre y Abajo adems delos estados Arriba y Sobre. Estos estados presentan indicaciones visuales extra a

los usuarios de pginas Web.Es posible crear una barra de navegacin que utilice dos o incluso tres botones deestado, pero slo un botn con los cuatro estados puede considerarse unverdadero botn de barra de navegacin en Fireworks. Fireworks incluye varioscomportamientos de bar nav para que los botones acten como si estuvieranrelacionados unos con otros. Por ejemplo, puede crear botones de barra denavegacin que acten como pulsadores de una radio de un coche antiguo: alhacer clic en un botn, permanece pulsado hasta que se haga clic en otro.

Aunque no es obligatorio crear botones de cuatro estados en una barra de

navegacin, si los utiliza, podr sacar partido de los comportamientos de la barrade navegacin en Fireworks.

Para ms informacin sobre la creacin de los estados de botn Arriba y Sobre,consulte Creacin de un botn simple de dos estados(See 2.12.1.3).

Para crear el estado Abajo:


34/57



1.Abra un botn de dos estados en el Editor de botones y haga clic en la fichaAbajo.

2.Siga uno de los procedimientos siguientes para crear el estado Abajo delbotn:

Haga clic en Copiar grfico Sobre para pegar una copia del elementogrfico del estado Sobre en la ventana del estado Abajo y modifquelopara cambiar su aspecto.

Importe, dibuje o arrastre y coloque un grfico.Nota: Al insertar o crear un grfico para el estado Abajo, se seleccionaautomticamente la opcin Incluir estado Abajo en Bar Nav. Este estado debotn es adecuado para los botones que forman parte de barras denavegacin.Para crear un estado Sobre y Abajo:

1.Abra un botn de tres estados en el Editor de botones y haga clic en la fichaSobre y Abajo.

2.Siga uno de los procedimientos siguientes para crear el estado Sobre yAbajo del botn:

Haga clic en Copiar grfico Abajo para pegar una copia del elementogrfico del estado Abajo en la ventana del estado Sobre y Abajo ymodifquelo para cambiar su aspecto.

Importe, dibuje o arrastre y coloque un grfico.Nota: Al insertar o crear un grfico para el estado Sobre y Abajo, seselecciona automticamente la opcin Incluir estado Sobre y Abajo en BarNav. Este estado de botn es adecuado para los botones que forman partede barras de navegacin.

12.5.1.5 Utilizacin de filtros de biselado para dibujar estados de unbotn

Al crear grficos para cada estado de botn, puede aplicar filtros automticospreestablecidos para lograr el aspecto comn de cada estado. Por ejemplo, si sedesea crear un botn de cuatro estados, puede utilizar el filtro Elevado en elgrfico del estado Arriba, el efecto Resaltado para el estado Abajo, etc.

Para aplicar un filtro automtico preestablecido a un smbolo debotn:

1.Abra el smbolo de botn que desee en el Editor de botones y seleccione elgrfico en el que desea aadir un filtro automtico.


35/57



2.Haga clic en el botn Aadir filtros automticos del Inspector depropiedades.

3.En el men emergente, realice uno de estos procedimientos: Seleccione Bisel y Relieve > Bisel interior. Seleccione Bisel y Relieve > Bisel exterior.

4.En la ventana emergente, elija un filtro preestablecido de botn. Encontraruna descripcin a continuacin.

Filtropreestablecido de botn

Descripcin

ElevadoEl bisel parece elevarse respecto a los obje

subyacentes.

ResaltadoEl color del botn se aclara.

HundidoEl bisel parece hundirse respecto a los obje

subyacentes.

InvertidoEl bisel parece hundirse en los obje

subyacentes y los colores se iluminan.

5.Repita los pasos del 1 al 4 para el resto de los estados de botones, incluyaen cada estado un filtro preestablecido de botn diferente.

12.5.1.6 Conversin de rollovers de Fireworks en botones

Se pueden crear botones a partir de rollovers creados en versiones anteriores deFireworks. Los componentes se convierten en un botn y el nuevo botn se colocaen la biblioteca.

Para ms informacin sobre los rollover, consulte Adicin de interactividad en las

divisiones(See 2.11.2).Para convertir un rollover de Fireworks en un botn:

1.Borre la divisin o zona interactiva que cubre las imgenes de rollover.2.Elija Mostrar todos los fotogramas del men emergente Papel cebolla en el

panel Fotogramas.


36/57



3.Seleccione todos los objetos que se incluirn en el botn.Sugerencia: Utilice la herramienta Seleccionar detrs para seleccionar losobjetos que estn ocultos detrs de otros. Para ms informacin, consulteUtilizacin de la herramienta Seleccionar detrs(See 2.3.1.3).

4.Seleccione Modificar > Smbolo > Convertir en smbolo.Se abre el cuadro de dilogo Propiedades de smbolo.

5.Introduzca un nombre para el smbolo en el cuadro de texto Nombre.6.Elija el tipo de smbolo de botn.7.Haga clic en Aceptar.

El nuevo botn se agrega a la biblioteca.

Sugerencia: Tambin es posible convertir animaciones de cuatro fotogramas enbotones. Slo debe seleccionar los cuatro objetos y cada uno se colocar en supropio estado de botn.

12.5.1.7 Insercin de botones en un documento

Es posible insertar instancias de smbolos de botn en un documento desde elpanel Biblioteca.

Para colocar instancias de un smbolo de botn en un documento:

1.Abra el panel Biblioteca.

2.Arrastre el smbolo de botn al documento.Para colocar instancias adicionales de un smbolo de botn en un

documento, siga uno de los procedimientos siguientes:

Seleccione una instancia y elija Edicin > Clonar para colocar otra instanciadelante de la seleccionada. La nueva instancia se convierte en el objetoseleccionado.

Sugerencia: La clonacin de instancias de botones resulta til al crear unabarra de navegacin alineada, ya que puede mover las copias en una

direccin con las teclas de flecha y mantener la alineacin con la otracoordenada de posicin.

Arrastre otra instancia de botn desde el panel Biblioteca hasta eldocumento.

Mantenga pulsada la tecla Alt (Windows) u Opcin (Macintosh) mientrasarrastra una instancia en el lienzo para crear otra instancia de botn.


37/57



Copie una instancia y pegue instancias adicionales.12.5.1.8 Importacin de smbolos de botn

Los smbolos de botn del panel Biblioteca son especficos del documento. Si haabierto un documento con smbolos en el panel Biblioteca y crea uno nuevo, el

panel Biblioteca del nuevo documento estar vaco. No obstante, existen variosmtodos para importar smbolos de botn en el panel Biblioteca de un documento,ya sea desde una biblioteca o desde otro documento de Fireworks.

Para importar smbolos de botn en el panel Biblioteca de undocumento, siga uno de los procedimientos siguientes:

Arrastre y coloque una instancia de botn de otro documento de Fireworksen el documento actual.

Corte y pegue una instancia de botn de otro documento de Fireworks en eldocumento actual.

Importe smbolos de botn desde un archivo PNG de Fireworks. Exporte smbolos de botn de otro documento de Fireworks en un archivo de

biblioteca PNG, despus, importe los smbolos de botn desde el archivo debiblioteca PNG en el documento actual.

Seleccione Edicin > Bibliotecas e importe los smbolos de botn en el panelBiblioteca del documento desde las bibliotecas de botones del submen.Estas bibliotecas contienen una amplia variedad de smbolos de botnpredefinidos preparados por Macromedia.

Los smbolos de botn se importan y exportan como las animaciones y smbolosgrficos. Para ms informacin, consulte Importacin de smbolos(See 2.10.2.5.1)y Exportacin de smbolos(See 2.10.2.5.2).

12.5.1.9 Edicin de smbolos de botn

Los smbolos de botn de Fireworks son de una clase especial y presentan dostipos de propiedades: las que cambian en todas las instancias cuando se edita unainstancia del smbolo y otras que slo afectan a la instancia actual.

Los smbolos de botn de Fireworks permiten sacar partido de la facilidad de uso

de los smbolos a la vez que hacen posible la edicin de determinadas propiedadesde una instancia de botn como, por ejemplo, el texto, sin afectar al resto de lasinstancias.

12.5.1.9.1 Edicin de las propiedades de smbolo

Los smbolos de botn se editan en el Editor de botones. Las propiedades deinstancia que puede modificar son las que normalmente son consistentes en losbotones de una barra de navegacin:


38/57



Las modificaciones del aspecto grfico como el color y tipo de trazo, el colory tipo de relleno, forma del trazado y las imgenes

Filtros automticos, opacidad o el modo de mezcla aplicado a objetosindependientes dentro del smbolo de botn

Tamao y posicin del rea activa Comportamiento principal de un botn Configuracin de optimizacin y de exportacin Vnculo URL (tambin disponible como una propiedad a nivel de instancia) Marco destino (tambin disponible como una propiedad a nivel de instancia)

Para editar las propiedades de un botn como smbolo:

1.Siga uno de los procedimientos siguientes para abrir el botn en el Editor debotones: Haga doble clic en una instancia del botn en el espacio de trabajo. En el panel Biblioteca, haga doble clic en la vista previa del botn o en

el icono de smbolo que se encuentra junto al smbolo de botn.

2.Modifique las caractersticas del botn y haga clic en Listo.Los cambios se aplican a todas las instancias del smbolo de botn.

12.5.1.9.2 Edicin de las propiedades de instancia

Las propiedades de instancia se editan en el Inspector de propiedades cuando seselecciona una nica instancia. La edicin no afecta a los smbolos asociados o aninguna otra instancia del smbolo en particular. Estas propiedades normalmenteson diferentes de un botn a otro en una serie de botones:

Un nombre de objeto de instancia, que aparece en el panel Capas y que seutiliza para asignar nombres a las divisiones de la instancia de botn durantela exportacin

Filtros automticos u opacidad aplicados a toda la instancia Los caracteres de texto y su formato, como fuente, tamao, orientacin y

color

Vnculo URL (prevalece cualquier URL que sea una propiedad de smbolo) Texto alternativo (alt) con la descripcin de imagen Fotograma destino (prevalece cualquier fotograma destino que sea una

propiedad de smbolo)


39/57



Comportamientos adicionales asignados a una instancia mediante el panelComportamientos

La opcin Mostrar imagen Abajo despus de cargar del Inspector depropiedades para las instancias de una barra de navegacin

Nota: En Fireworks 8, no es necesario que elija la opcin Mostrar imagenAbajo despus de cargar cada instancia de botn de una barra denavegacin. La seccin Especfico del documento del cuadro de dilogoConfiguracin HTML contiene la opcin Exportar varios archivos. Al escogeresta opcin y exportar una barra de navegacin, Fireworks 8 exporta laspginas HTML con el estado Abajo correspondiente del botn. Para msinformacin, consulte Ajuste de las opciones de exportacin de HTML(See2.14.4.7.11).

Para editar las propiedades de instancia de una nica instancia de

smbolo de botn:

1.Seleccione la instancia de botn en el rea de trabajo.2.Defina las propiedades en el Inspector de propiedades.

12.5.1.10 Definicin de las propiedades interactivas de botn

Con Fireworks puede controlar los elementos interactivos de un botn, incluidos elrea activa, URL, elemento destino y texto alternativo (alt) con la descripcin de laimagen.

12.5.1.10.1 Modificacin del rea activa de un smbolo de botn

El rea activa de un smbolo de botn es la zona en la que se activa lainteractividad cuando un usuario desplaza el cursor por encima o hace clic en unnavegador Web. El rea activa de un botn es una propiedad de smbolo que slotienen los smbolos de botn.

Cuando crea un smbolo de botn, Fireworks crea de forma automtica una

divisin lo suficientemente grande como para abarcar todos los estados del botn.Slo puede editar una divisin de botn en la ficha rea activa del Editor debotones. Cada botn slo puede tener una divisin. Si dibuja una divisinmediante una herramienta de divisin en el rea activa, la divisin anterior sesustituye por la nueva divisin. Puede dibujar objetos de zona interactiva en laficha rea activa, pero slo puede editar dichas zonas interactivas en el Editor debotones.


40/57


41/57



En el panel Biblioteca, haga doble clic en la vista previa del botn o enel icono de smbolo que se encuentra junto al smbolo de botn.

2.Haga clic en la ficha rea activa del editor de botones.3.Seleccione la divisin o zona interactiva de rea activa.4.Siga uno de estos procedimientos:

Introduzca la URL en el cuadro de texto Vnculo del Inspector depropiedades.

Elija la URL en el panel URL.Nota: Si cambia la URL de un smbolo de botn no se cambiar la URL de lasinstancias de botn de dicho smbolo que ya tengan URL exclusivasasignadas. Igual ocurre con las modificaciones realizadas en el destino de unsmbolo de botn y el texto alt.

Para configurar la URL de una instancia de botn seleccionada en elespacio de trabajo, siga uno de los procedimientos siguientes:

Introduzca la URL en el cuadro de texto Vnculo del Inspector depropiedades.

Elija la URL en el panel URL.12.5.1.10.3 Configuracin del destino de un botn

El elemento destino es la ventana o fotograma en que aparecer la pgina Web alhacer clic en una instancia de botn. Si no introduce un elemento destino en el

Inspector de propiedades, la pgina Web aparecer en el mismo fotograma oventana que el vnculo. El valor de destino puede ser una propiedad de smbolo ode instancia. Puede definir el destino de un smbolo de forma que todas susinstancias tengan la misma opcin de destino.

Para definir el elemento destino de un smbolo de botn en el Editorde botones:

1.Siga uno de los procedimientos siguientes para abrir el botn en el Editor debotones:

Haga doble clic en una instancia del botn en el espacio de trabajo. En el panel Biblioteca, haga doble clic en la vista previa del botn o en

el icono de smbolo que se encuentra junto al smbolo de botn.

2.Siga uno de los procedimientos siguientes en el Inspector de propiedades: Seleccione un destino preestablecido en el men emergente Destino.


42/57



Ninguno o _selfcarga la pgina Web en el mismo fotograma oventana que el vnculo.

blank carga la pgina Web en una ventana nueva sin nombredel navegador.

parent carga la pgina Web en el conjunto de marcos primario oen la ventana del marco que contiene el vnculo.

top carga la pgina Web en la ventana completa del navegadoreliminando todos los marcos.

Introduzca un valor de destino en el cuadro de texto Destino.Nota: Si cambia el valor de destino de un smbolo de botn no se cambiardicho valor en las instancias de botn de este smbolo que ya tengan valoresdestino nicos asignados. Igual ocurre con las modificaciones realizadas en

la URL y el texto alt de un smbolo de botn.Para configurar el valor destino de una instancia de botn en elespacio de trabajo:

1.Seleccione la instancia de botn en el espacio de trabajo.2.Siga uno de los procedimientos siguientes en el Inspector de propiedades:

Seleccione un destino preestablecido en el men emergente Destino.Ninguno o _selfcarga la pgina Web en el mismo fotograma oventana que el vnculo.

_blank carga la pgina Web en una ventana nueva sin nombredel navegador.

_parent carga la pgina Web en el conjunto de marcos primarioo en la ventana del marco que contiene el vnculo.

_top carga la pgina Web en la ventana completa del navegadoreliminando todos los marcos.

Introduzca un valor de destino en el cuadro de texto Destino.

12.5.1.10.4 Definicin del texto alternativo (alt) para un smbolo de botn oinstancia

El texto Alt (alternativo) aparece sobre el marcador de posicin de la imagen ocerca mientras sta se descarga de la Web, tambin aparece en lugar del grficocuando la imagen no se descarga correctamente. Tambin aparece en lugar de losgrficos si el usuario a definido en su navegador que no se muestren imgenes. Eltexto Alt puede ser una propiedad de smbolo o de instancia. Es posible definir el


43/57



texto alternativo para un smbolo de botn o instancia en el Inspectorpropiedades.

Sugerencia: Las aplicaciones de ayuda para las personas con problemas de visinleen el texto alternativo de los grficos en las pginas Web de un navegador. Paralos textos alternativos, se debern realizar descripciones claras y concisas de loselementos grficos.

Para definir el texto Alt de un smbolo de botn en el Editor debotones:

1.Siga uno de los procedimientos siguientes para abrir el botn en el Editor debotones:

Haga doble clic en una instancia del botn en el espacio de trabajo. En el panel Biblioteca, haga doble clic en la vista previa del botn o en

el icono de smbolo que se encuentra junto al smbolo de botn.2.En el Inspector de propiedades introduzca el texto que desee que aparezca

como texto alt en un navegador.

Nota: Si cambia el texto alt de un smbolo de botn no se cambiar el textoalt de las instancias de botn que haya para dicho smbolo que ya tengantexto alt asignado. Igual ocurre con las modificaciones realizadas en eldestino y la URL de un smbolo de botn.Para configurar el texto alt de una instancia de botn en el espacio

de trabajo:

1.Seleccione la instancia de botn en el espacio de trabajo.2.Introduzca la descripcin en el cuadro de texto Alt del Inspector de

propiedades.

12.6 Creacin de barras de navegacin

Una barra de navegacin, tambin denominada bar nav, es un grupo de botonesque ofrece vnculos a otras reas de un sitio Web. Normalmente, no cambia deaspecto en el sitio de modo que ofrece un mtodo coherente de navegacin sinimportar el lugar en que se encuentre el usuario en el sitio Web. La barra denavegacin tiene el mismo aspecto de una pgina Web a otra, pero los enlacespueden ser especficos para el funcionamiento de cada pgina.

En Fireworks, puede crear una bar nav creando un smbolo en el Editor de botonesy colocando instancias de dicho smbolo en el espacio de trabajo.

Para crear una bar nav bsica:


44/57



1.Cree un smbolo de botn. Para ms informacin, consulte Creacin desmbolos de botn(See 2.12.1).

2.Arrastre una instancia (copia) del smbolo desde el panel Biblioteca hasta elrea de trabajo.

3.Siga uno de los procedimientos siguientes para crear una copia de lainstancia de botn:

Seleccione la instancia de botn y elija Edicin > Clonar. Mantenga pulsada la tecla Alt (Windows) u Opcin (Macintosh)

mientras arrastra la instancia de botn.

4.Pulse la tecla de maysculas y arrastre el botn para alinearlo en horizontalo vertical. Para mover las instancias de forma ms precisa, utilice las teclasde flecha.

5.Repita los pasos 3 y 4 para crear instancias de botn adicionales.6.Seleccione cada instancia y asgnele un texto nico, una URL y otras

propiedades con ayuda del Inspector de Propiedades.

12.6.1 Creacin de mens emergentes

Los mens emergentes aparecen en el navegador cuando el usuario mueve elpuntero sobre un objeto Web o bien hace clic en l, por ejemplo en una divisin ozona interactiva. Los elementos de estos mens pueden incluir vnculos URL parala navegacin. Por ejemplo, puede utilizar los mens emergentes para organizardiferentes opciones de navegacin que estn relacionadas con un botn de una

barra de navegacin. Adems, puede crear tantos submens como desee .Cada elemento de un men emergente aparece como una celda HTML o deimagen, con un estado Arriba, un estado Sobre y texto en ambos estados. Paraver una presentacin preliminar de un men emergente en un navegador, pulseF12. Las vistas previas del rea de trabajo de Fireworks no muestran los mensemergentes.

12.6.1.1 Acerca del Editor de men emergente

El Editor de men emergente es un cuadro de dilogo con fichas que le guadurante el proceso de creacin de un men emergente. Contiene muchas opcionespara controlar las caractersticas de un men emergente y estn organizadas encuatro fichas:

Contenido tiene opciones que determinan la estructura bsica del men, as comoel texto, vnculo URL y el valor de destino de cada elemento de men.


45/57


46/57



12.6.1.2 Creacin de un men emergente bsico

En la ficha Contenido del Editor de men emergente crear la estructura bsica yel contenido del men emergente. Cuando crea un men se aplican los ajustesactuales o predeterminados de las opciones del resto de las fichas del Editor demen emergente.

Para crear un men emergente sencillo:

1.Seleccione una zona interactiva o divisin que corresponda al rea deactivacin del men emergente.

2.Siga uno de estos procedimientos para abrir el Editor de men emergente: Seleccione Modificar > Men emergente > Aadir men emergente. Haga clic en el tirador de comportamiento de la divisin y elija Aadir

men emergente.

3.Si la ficha Contenido no est visible, haga clic en ella.4.Haga clic en el botn Aadir men para aadir un elemento vaco de

men.

Se pueden aadir, eliminar y editar celdas en cualquier momento.

5.Haga doble clic en cada celda e introduzca o elija la informacin adecuada:Texto especifica el texto para el elemento de men.

Vnculo determina la URL del elemento de men. Puede introducir unvnculo personal o elegir uno del men emergente Vnculo, si hubiera algunodisponible. Si ha introducido direcciones URL para el resto de los objetosWeb del documento, stas aparecern en el men emergente Vnculo.

Destino designa el elemento destino de la URL. Puede introducir unelemento destino personal o elegir un valor preestablecido en el menemergente Destino.

Al aadir texto en la ltima lnea de la ventana se agrega una lneavaca debajo de la misma.

Sugerencia: Para ir de una celda activa a otra celda y seguirintroduciendo informacin, pulse la tecla de tabulador para desplazarse porlas distintas celdas y las teclas Flecha arriba y abajo paradesplazarse verticalmente.

6.Repita los pasos 4 y 5 hasta aadir todos los elementos de men.


47/57



7.Si lo prefiere, para eliminar un elemento de men, resltelo y haga clic en elbotn Suprimir men.

8.Siga uno de estos procedimientos: Haga clic en Siguiente para ir hasta la ficha Aspecto o elija otra fichapara continuar con la creacin del men emergente. Cree entradas de submen para el men emergente. Para obtener

informacin, consulte Creacin de submens en un menemergente(See 2.12.3.3).

Haga clic en Listo para finalizar el men emergente y cerrar el Editorde men emergente.

En el rea de trabajo, la zona interactiva o divisin utilizada para crear elmen emergente muestra una lnea azul de comportamiento unida a uncontorno del nivel superior del men emergente.

Nota: Para ver el men emergente en un navegador debe pulsar F12.Las vistas previas del rea de trabajo de Fireworks no muestran los mensemergentes.

12.6.1.3 Creacin de submens en un men emergente

Gracias a los botones Sangrar men y Men con sangra inversa de la fichaContenido del Editor de men emergente puede crear submens emergentes queaparecern cuando se mueva el puntero o se haga clic sobre el elemento de menemergente correspondiente. Puede crear tantos niveles de submens como desee.

Para crear un submen emergente:

1.Abra la ficha Contenido del Editor de men emergente y cree elementos demen. Cree los elementos de men que desee utilizar para el submen,colquelos directamente bajo el elemento de men que activar el submen.Para ms informacin, consulte Creacin de un men emergente bsico(See2.12.3.2).

2.Haga clic para resaltar un elemento de men emergente que desee convertiren elemento de submen.

3.Haga clic en el botn Sangrar men para convertir el elemento resaltado enuna opcin de submen del elemento que le sigue por arriba en la lista.

4.Para aadir el elemento siguiente del submen, resltelo y haga clic en elbotn Sangrar men.

Todos los elemen

Documents

leccion 12 botones barras y zonas