Fireworks

Utilizacin de
Fireworks CS5

4
Qu e s Fireworks?
Fireworks, es una herramienta de edicin de
imgenes vectoriales y de mapa de bits, que facilita el diseo de sitios web e interfaces de usuario, y
la creacin y optimizacin de imgenes para la Web
con un diseo profesional de grficos en pantalla.

En este captulo aprender a utilizar de

forma sencilla el programa Fireworks, si

desea profundizar en su manejo, le recomendamos 0[ue consulte un manual dedicado al mismo.

Sus innovadoras soluciones resuelven los principales problemas a los que se enfrentan los
diseadores grficos y los responsables de sitios
web. Utilizando la amplia gama de herramientas de
Fireworks, es posible crear y editar imgenes
vectoriales y de mapa de bits en un solo archivo.

Para qu sirve?
La aplicacin, permite crear y editar imgenes
de mapa de bits y vectoriales, disear efectos web,
como rollovers y mens emergentes, recortar y
optimizar elementos grficos para reducir su tamao de archivo, etc. Cuando un documento est terminado, se puede exportar o guardar en formato de
archivo JPEG, GIF u otro para utilizarlo en la Web.

Creacin de un
desde Fireworks

Le recomendamos que aunque exporte el

fichero a otro formato (JPEG o GIF) una

vez finalizado, guarde una copla del f i chero original (PNG) por si desea efectuar alguna modificacin sobre el mismo
con posterioridad.

archivo

Cuando se crea un nuevo documento desde el

programa Fireworks, se crea un archivo del tipo
PNG (Portable Network Graphic). Una vez creado,
puede exportarlo a otros formatos compatibles con
la Web (JPEG, G I F y G I F animado) o a otros que se
utilizan fuera de la misma (TIFF, PSD y BMP).
Sean cuales sean los p a r m e t r o s de
optimizacin elegidos, el archivo PNG de Fireworks
se conserva para facilitar ediciones posteriores
siempre y cuando lo almacene.
En el siguiente ejemplo crear un sencillo botn rollover que podr utilizar en cualquier pgina
web.

C S 5 Curso de Creacin Web - Fireworks

48

1. Cargue
CS5.

la aplicacin

Adobe

Fireworks

Nuevo d o c u m e n t o

Tamao del tenzo: 9.8K

2. Abra el men Archivo y efecte
sobre la opcin Nuevo.

un clic

Anchura:

Se abrir el cuadro de dilogo Nuevo documento (figura 1) donde deber especificar las dimensiones de la imagen que va a crear, la resolucin y
el color del lienzo.

Deje la resolucin que aparece por defecto (72) ya que es la idnea para mostrar
una imagen en pantalla.

25

IPixeies

Resoiuan:

72

\a

Al.: 25

Calar del t e m o
EKanco
o Transparente

3. Imtroduzca los valores 100 y 25 en los

cuadros Anchura y Altura
respectivamente utilizando Pxeles como unidad de medida.
4.

An,; 100

100

Altura:

Personis zaoo:

Aceptar

i ]

Cancelar

Fig. 1. Cuadro de dilogo Nuevo documento.

Si deeea utilizar un color determinado

5. Seleccione Transparente como Color del

lienzo y pulse el botn Aceptar.

como color de lienzo, utilice la ventana

emergente del cuadro de coloree FereonaWzado.

Aparecer la ventana mostrando el lienzo con

las dimensiones (100 x 25) y el color de relleno
(Transparente) que defini en los pasos anteriores (figura 2).
Si al llegar a este punto se da cuenta de que se
ha equivocado al definir alguna de las propiedades de la nueva imagen, puede utilizar las opciones que aparecen en el Inspector de propiedades
(figura 3).
1 - Lienzo

2 - Cambiar tamao del lienzo

3 - Cambiar tamao de la imagen
4 - Ajustar al lienzo

Fig. 2. Ventana de Fireworks con el lienzo que ha definido

anteriormente.

5 - Opciones de exportacin predeterminadas

6 - Estado

! Propiedades

Docunento

Lienzo: 1 /

[TaniaooellienzoT^j

Sin tftulo-2
Estado: Estado 1

Fig. 3. Panel

Inspector de propiedades.

Tarrao dla imagen...

) |

Ajustar lienzo

49

Utilizacin de Fireworks C S 5

Tamao del enzo

Lienzo. Permite modificar el color del lienzo.

Tamao de lienzo.... A l pulsar este botn

aparecer el cuadro de dilogo Tamao de
lienzo (figura 4) donde podr especificar
las nuevas dimensiones del mismo.

Tamao de la imagen.... Abre el cuadro de

dilogo Tamao de la imagen (figura 5) donde puede especificar su tamao, el tamao
de impresin y la resolucin del mismo que
no tiene por qu coincidir con el mostrado
en pantalla.

Ajustar lienzo. Si pulsa este botn podr

recortar el espacio que sobra alrededor del
lienzo, o bien expandirlo para incluir todos
los objetos que sobrepasan sus lmites.

Opciones de exportacin. Este botn permite seleccionar el formato en que desea

exportar el archivo actual (figura 6).

6.

Efecte un clic sobre el botn Rectngulo

del apartado Vector y seleccione
Herramienta Rectngulo (U).

Njevo tamao
Pxetes

25

Andaje:

[~T^|pT~|

/ Slo pgina actual

Tamao actual
*-+

iQQ

pxeies

25

pixeles

Fig. 4. Cuadro de dilogo Tamao de lienzo.

Tartao de la imaaen
Dimensiones en pixeles
100

Tamao de impresin

1.389

Pulgaoas

0.347

[Pulgadas

Resolucin:

72

Pxetes/pugada

Restringir las proporciones

J Volver a muesrear la imagen

Btcbtco

J: Slo pgina a c t i ^
;

Aceptar

Fig. 5. Cuadro de dilogo Tamao de la imagen.

GIF
GIF
GIF
GIF

Web 216
WebSnap 256
WebSnap 128
adaptable 256

7. Dibuje un rectngulo que ocupe todo el

lienzo y apliquele un color de relleno Negro.
8. En el cuadro Redondez
lor 65.
9. Haga clic sobre
Texto

introduzca

el botn de

el va-

herramienta

Tj-

mmmsm
JPEG - Archivo ms pequeo
GIF animado WebSnap 128

Fig. 6. Opciones de esportacin.

No se preocupe si el rectngulo no se ajusta en su totalidad al tamao del lienzo.

Para resolver este pequeo Inconveniente puede utilizar el apartado de la parte Inferior Izquierda del Inspector de propiedades tecleando para el
recuadro las mismas dimen100 X:
siones que tenga el lienzo y
~Z5~ *
el valor O para los cuadros
XeY.

10. En el Inspector de propiedades,

seleccione el color Blanco, un tamao de 12 y una
alineacin de Centrado para el texto que
teclee.
11. Efecte un clic dentro del rectngulo y teclee Botn Prueba.
12. Introduzca los valores 7 y 3 en los cuadros XeY para que el texto quede centrado con respecto al rectngulo.
13. Almacene el documento con el nombre
Botn en la carpeta
EjerciciosWeb.
14. Seleccione el rectngulo y el texto, abra el
men Modificar, seleccione la opcin Sim-

C S 5 Curso de Creacin Web

50

bolo y haga clic sobre Convertir en smbolo....

Fireworks

OOOOOOaijpg-Win;

K t j 4 B u l V C:\Users\Albert\Ap

O bien:

Archivo

14. Seleccione
el rectngulo
de funcin F8.

y pulse la tecla

15. En el cuadro Nombre introduzca

16. En el apartado Tipo seleccione
Botn y pulse Aceptar.

Botn.

Edicin

Ver Favoritos

f 00000001.jpg

Botn Prueba

la opcin
Internet | Modo protegido; activado

17. Seleccione la herramienta Puntero y efecte un doble clic sobre el smbolo para
entrar en el modo edicin.

Negro al inicio

Entrar en el modo de edicin donde podr

configurar los diferentes comportamientos del botn cuando se acte sobre el mismo.

:0 C:\Users\Albert\Ap
Archivo
W

18. Haga clic sobre la opcin Sobre en la opcin Estado del Inspector de propiedades.

Edicin

Ver Favoritos

$ 00000001.jpg

Botn Prueba

19. Haga clic sobre el botn Copiar grfico

Arriba del Inspector de propiedades.
0 Internet | Modo protegido: activado

Con esto conseguir que se copie el aspecto

del botn en el estado anterior (Arriba).
20. Aplquele

el color Rojo al rectngulo.

21. Haga clic fuera del rectngulo,

seleccione
el estado Abajo y pulse el botn Copiar
grfico Sobre.
22. Aplique un color Verde oscuro
gulo.

nuevamente

0u0O0O01.jpg - W i n d

i <=>

' C:\Users\Albert\Ap
Archivo

Edicin

&

&

Ver Favoritos

00000001.jpg

al rectn-

23. Pulse el botn de flecha para finalizar todos los cambios.

24. Almacene

Rojo al situarse sobre l

el botn.

25. Abra el men Archivo y seleccione

cin Vista previa en el navegador

Internet j Modo protegido: activado

Verde al hacer clic

la op(figura

Fig. 7. Diferentes vistas del botn.

V-

Exportar una imagen de Fireworks

Una vez creado el botn y comprobado que
funciona de forma correcta, deber exportarlo desde Fireworks con formato H T M L para que pueda
utilizarlo en una pgina web.
1. Abra el men Archivo y seleccione
cin Exportar....

la opFig. 8. Cuadro de dilogo Exportar.

51

Utilizacin de Fireworks C S 5

Los pasos descritos anteriormente son

los que deber efectuar tantas

veces

como Imgenes desee exportar siempre

y cuando stas tengan algn comportamiento (en el ejemplo actual cambia de
color el botn al situarse y hacer clic
sobre l). De no ser as bastar con se-

2. En la opcin Exportar seleccione

la opcin HTML e imgenes (figura 8).
3. Active la casilla Colocar imgenes en
subearpeta y mediante el botn Examinar... localice la carpeta donde desea colocarlas.
4. Pulse el botn

Guardar.

leccionar el formato en que desea expor-

tarla, elegir la opcin Exportar... y asignarle un nombrey una ubicacin a la imagen.

CW.

Insercin HTML de Fireworks

Una vez exportadas todas las imgenes que
haya creado con Fireworks, slo falta insertarlas
en el documento de Dreamweaver. Sin embargo, el
cdigo deber insertarse de un modo un tanto especial.

Ctri-Ah-I
I Mamador 2= pesie;', de csqefi

Dtete, ee imagen
Media
Wk

Ctrt-AH-T i

Irrgen de ssjst(tiicior
HTML t Fireworks

Objetos de tabla
Objeto: dt fest-e

Formularte

2. Site el punto de insercin en el lugar donde quiera colocar la imagen.

Fkpcrvtnculo
Yincufo ele CEB-EEO ett.tr mico
Andar con nombre

Ctrl* A. A

U M
ierver-Srfe Induce
Comentarle
HTM

OojHO! de pf intua
Fragmento* recentes

WirJgel...

sm
kiConet Etiting

1. Abra el documento de Dreamweaver donde desee insertar la imagen creada con

Fireworks.

Objeto! de datos

3. Abra el men Insertar, seleccione

tos de imagen y efecte un clic
HTML de Fireworks (figura 9).

Objesobre

4. Localice
el archivo generado con Fireworks (Botn.htm) pulsando el botn Examinar... (figura 10).

Personsiiiar f av o ritos..
_ r--i*r rr>5i es

Fig. 9. Acceso a la opcin H T M L de Fireworks.

Si desea eliminar de forma automtica el fichero

Botn.htm una vez se haya insertado, active la casilla Eliminar archivo despus de insertar.
5.

Una vez seleccionado,

Abrir.

pulse

el

botn

6. Pulse el botn Aceptar para cerrar el cuadro Insertar HTML de Fireworks.

He*. 10. Cuadro de dilogo Insertar H T M L de Fireworks.

Automticamente, se insertar el imagen que

acaba de seleccionar junto a sus comportamientos
(cambio de color al interactuar sobre ella).
7. Realice una previa del mismo y compruebe que funciona de forma correcta (figura
11).

Fig. 11. Vista previa.

Cuando est trabajando con Dreamweaver e

inserte una imagen creada con Fireworks puede
modificarla directamente desde Dreamweaver sin
necesidad de abrir la aplicacin que utiliz para
crearla.

52

C S 5 Curso de Creacin Web - Fireworks

Definicin de un editor externo

Dependiendo del orden en que instalase las
aplicaciones Dreamweaver y Fireworks es posible que tenga que realizar algunos cambios para
especificar el editor predeterminado a la hora de
editar una imagen.
1. Vaya a la aplicacin

Dreamweaver.

2. Abra el men Edicin y haga clic sobre la

opcin Preferencias
3. Active la categora Tipos de archivo/editores en caso de no estarlo (figura 12)

Fig. 12. Cuadro de dilogo Preferencias.

4. Asegrese de que en el cuadro

Extensiones los tipos .png. .gif, .jpg, jpe y jpeg
tienen asignado
como editor
principal
Fireworks.
5. Si alguna de estas extensiones
no tiene
asignado
dicho editor, seleccinelo
o
lacalcelo en la siguiente ruta C:\Archivos
de programa\Adobe\Adobe
Fireworks
CS5\Fireworks.exe
en el cuadro Editores
y pulse el botn Convertir en principal.
6. Pulse el botn

Aceptar.

Editar u n a imagen d e s d e
Dreamweaver
Una vez haya configurado el editor como se
explica en el apartado anterior, cuando desee editar una imagen insertada en Dreamweaver con
Fireworks, deber:
1. Seleccionar
la imagen y efectuar un clic
sobre el botn Editar del Inspector de propiedades.
Automticamente, se abrir la aplicacin
Fireworks para que pueda efectuar los cambios
que desee y aparecer un cuadro de dilogo (figura 13) en el que elegir el fichero que desea editar
en un formato determinado (.png o .jpg).

||||gHHM

Desea utiiizar un PNG de Fireworts rjjmo origen de ^ t o n . p g ' o pre%re

e3;s^ e; st&'V os <nsce^ -rectamente?

Seieedone una de las acdortes siguientes oe^e

Ardiva exigen de Frrewtrts:

xSr ss ^"eeriaas.

2. Pulse el botn Utilizar PNG.

Fig. 13. Cuadro de dilogo Buscar origen.

3. Seleccione el archivo que desea editar en

el cuadro de dilogo Abrir y pulse Abrir.
4. Efecte los cambios que considere oportunos y vuelva a almacenar el archivo.

53

Utilizacin de Fireworks C S 5
5. Abra el men Archivo y seleccione
cin Actualizar.
A n . : 25

la op-

6. Haga clic sobre el botn Listo situado en

Edicin desde
Dreamweaver.

S,: 25

Los cambios efectuados tambin se producen

en el documento de Dreamweaver.

Creacin
animada
Fig. 14. Cuadro de dilogo Nuevo documento.
i HerrafTiigfits R e c t n g u l o ' { ) .
J i-ierramiersie Elipse \}J)
,j

H e r r a m i e i t s P c i i g o n c (U)

Espirales
^

Estrelle

r^> Flecha,
[ p Forma de L

J? Herramienta

P o l g o n o inteligente
l_J Rectngulo biselado
Rectngulo c o n chafln
Rectngulo redondeado

:-/- Secaon

3. En el apartado Vector seleccione Donut y

dibuje una en el interior del lienzo (figura
15).

Propiedades
Donut

Ar: 20

"

Al:

.
?n

X;

Y:

Fig. 16. Asigne estos valores.

; Ninguno
Slido
Tramado wefo
fen

^.I^BIIIIIIIlillMillllllllllllllllllll

Bordt

F i e . 17. Seleccione
I - g r a d a d o en la

Textura:

documento.

2. Establezca
una Anchura y Altura de 25
Pixeles, una Resolucin de 72 Pixeles/
pulgada y un Color de lienzo que sea
Transparente
(figura 14) pulse el botn
Aceptar.

Lnea d e flecha

Fig. 15. Seleccione Donut.

En este apartado aprender a crear una imagen

animada, es decir que tiene movimiento. De este
modo, no cabe duda, que en un primer momento,
desviar la atencin del visitante de la pgina hacia la imagen animada. La prctica que realizar a
continuacin consistir en crear dos estrellas que
giran sobre s mismas, una en el sentido de las
agujas del reloj y la otra al contrario.
1. Abra un nuevo

Medicin

T _ Lr>ea d e c o n e x i n

de u n a imagen

SJC.'zbco
ADN

4. Asigne los valores que aparecen

gura 16.

en la fi-

5. Haga clic sobre el icono del cubo de pintura en la barra de herramientas y en la

ventana que aparece pulse sobre el botn Opciones de relleno.
6. Seleccione
la opcin Degradado
en el
men desplegable superior (figura 17).
7. Seleccione la opcin Contorno en el men
desplegable
que ha aparecido
inmediatamente debajo (figura 18).
8. Haga clic sobre el botn Edicin... y use
los tiradores para obtener un degradado
que vaya de blanco a verde.

- z. 18. Seleccione
T i n t o r n o en la
'.i.

9. Abra el men Modificar, seleccione

la
opcin Animacin y haga clic sobre Animar seleccin....

54

C S 5 Curso de Creacin Web

10. En el cuadro Estados

ra 19).

introduzca

11. Teclee el valor 0 en los cuadros

Ajustar escala a.

15 (figu-

Fireworks
-

Animar

Mover y

12. En el cuadro Opacidad deje el primer valor a 100 y en a teclee 0.

Mover:
Direccin:

13. Pulse el botn

14. Almacene
circulo.

Opaddad:

Aceptar.

el documento

Girar:

con el

0
0
0
0 " 0
100 0
0

nombre

O""

i Horario
Antihorario

15. Realice una vista previa de la imagen y

compruebe que funciona
correctamente.

Una vez que ha comprobado que funciona de

correctamente, el paso siguiente consistir en exportar la imagen en formato GIF.
16. Abra el men Archivo
opcin Exportar....

y seleccione

la

Creacin de un Men emergente

Otra utilidad muy interesente disponible en
Fireworks, es la posibilidad de crear mens emergentes en muy pocos pasos para luego utilizarlos
en su pgina web. En la prctica de ejemplo que
realizar a continuacin crear el mismo men que
us en el apartado Ejemplo de men Spry del captulo 11. Trabajar con capas. Vea la figura 21.
1. Cree un nuevo

Ajustar escala a:

!^

Estados: 15

Aparecer un cuadro de dilogo informndole

que se aadirn ms fotogramas para hacer posible la animacin que usted desea (figura 20).

1.

Editar..,

3. Dibuje un rectngulo de color Negro con

un tamao de 250 (An) y 35 (Al).
4. Sitelo en la posicin 25 (X), 10 (Y).
5. Aplique una Redondez

de 50.

6. Colquele un borde de color Rojo con un

ancho de 2.

Aceptar

Fig. 19. Cuadro de dilogo Animar.

MQfl

Fireworks

La animaon de este smbolo sobrepasa el ltimo estado del

doaimento. Desea aadir autrMtKarrserite nuevos estados?

: No volver a mostrar mensaje

Aceptar

Fig. 20. Cuadro de dilogo informativo.

REVISTAS

documento.

2. Defina un tamao de lienzo con un valor

de 300 Pixeles de Anchura y de Altura,
con una Resolucin de 72 Pixeles,pulgada y el valor Transparente como Color de
lienzo.

Cancelar

20 minutos
Deportes

El Peridico
La Vanguardia

Fig. 21. Ejemplo de men emergente.

Cancelar

Utilizacin de Fireworks C S 5

Apliquefescomportamientos a las zonas interactivas q

divisiones mediante el panel CornportarraentDs. Desea crear
una zona interactiva o una divisin?

55

7. Abra el men Modificar, seleccione

Men
emergente y haga clic sobre Aadir men
emergente....
Aparecer un cuadro de advertencia indicndole si desea crear una zona interactiva o una divisin (figura 22).

Zona interactiva

le. 22. Cuadro de dilogo informativo.

8. Haga clic sobre el botn

Divisin.

El editor de men emergente es un cuadro de

dilogo formado por cuatro pestaas que le guiar
durante el proceso de creacin de un men emergente. Vea la figura 23.

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

9. Teclee PERIDICOS en la columna Texto, pulse el botn (Ms) para insertar una
nueva fila.

^is. 22. Cuadro de dilogo Editor de m e n emergente.

10. Teclee Noticias en la columna Texto de la

segunda fila, pulse Intro, haga clic sobre
la casilla que acaba de escribir para seleccionarla y pulse sobre el botn Sangrar men para considerar la linea que
acaba de introducir como una subopcin.
11. En la fila inferior de la columna Texto introduzca 20 minutos y pulse la tecla Tab.
12. Teclee http://www.20minutos.es
en la columna Vnculo y pulse la tecla Tab.

:::os

rmutos

http: //www. 2mriutos. es

Dan-

E ^enodico

-ttp: | W .eipenodtco,corr:

_b an.

Ll vanguardia

http://www.lavanguardia.es

_blark

-:

http://www.clarioas.es

_blank

ixrt

http://www.sport.es

_ d an.

Hj Interesante

http://www.rmjyriteresante.es

_D 3-V.

?_C

http: //www. que. es

-S

"AS
^-trScas

-ctugramas

http: 'v.v.vt .fbtogranas.es

-5 Butaca

http://www.labutaca.net

blank

14. Seleccione la ltima fila que acaba de introducir y pulse 2 veces el botn Sangrar
men.
15. Repita los pasos anteriores y cree una
estructura como la mostrada en la imagen que aparece en la figura 23.

_b.ari<

I
R s . 23. Cree una estructura como la que se indica en esta

fisura..

13. En la columna Destino seleccione el valor _blank si quiere que el vnculo se abra
en una nueva pestaa del navegador

16. Pulse el botn

Siguiente.

Aspecto. La segunda pestaa contiene opciones que determinan el aspecto de estado Arriba y de estado Sobre de cada celda
del men, as como la orientacin vertical u
horizontal del mismo.

C S 5 Curso de Creacin Web - Fireworks

56

17. Seleccione
la opcin HTML para que el
men sea creado mediante texto y colores de fondo.

.i

Celdas :

html

.../Imagen

_^*V^*

Fuente ; Ves dar ^j^""??^ sns-serif

18. Active la opcin Men horizontal

men desplegable
de la derecha
24).

en el
(figura,

i
i

T^^-rr^^

jj

ftor ^a^,l

- n c m [m a

Estaco Amfea
V

' *

'

E&ado Sobre
Ce*:

Tem:

ff.

19. Aplique un tamao de 12, un aspecto de

Negrita y una alineacin Centrar al texto
de las opciones del men.
20. A las opciones de Estado Arriba aplique
el color Negro a Texto y el Azul (#99CCFF)
a Celda.
21. A las opciones de Estado Sobre aplique
el color Blanco a Texto y el Azul (#003366)
a Celda.
22. Pulse el botn

el valor 2 en Relleno

Fig. 24. Cuadro de d i l o g o Editor de men

emergente, pestaa Aspecto.

itra de celda: 23

'mili nllui

Reteio <k rw. 2

ES39CK) errtrt atoas: 3

*]

Sangra ce texto: a
Demora de irenr. 100C ns

de celda.

24. Mantenga activada la casilla Mostrar bordes, introduzca 2 en Ancho del borde y
seleccione
los colores
Negro,
Azul
(#669999) y Blanco para Color del borde, Sombra y Resaltado
respectivamente.
25. Pulse el botn

Ninguno

Siguiente.

Avanzado. La tercera pestaa contiene opciones que determinan las dimensiones de

celda, relleno y espaciado; la anchura del
borde de la celda y el color; la demora de
men y el sangrado del texto (figura 25).

23. Inroduzca

PERIDICOS ^ l ^ - l ^ M

Fig. 25. Cuadro de dilogo Editor de men emergente, pestaa Avanzado.

Siguiente.

Posicin. La ltima pestaa contiene opciones que determinan la ubicacin del men
y del submen (figura 26):
La opcin Posicin del men coloca el
men emergente en relacin con la divisin. La opcin Preestablecido lo incluye en la parte inferior, inferior derecha,
superior y superior derecha de una divisin.
-

Posicin del submen coloca el submen emergente en la parte derecha o

inferior derecha del men principal, o
debajo del mismo.

Cancelar

<Atas

Lista

Fig. 26. Cuadro de dilogo Editor de men emergente, pestaa Posicin.

57

Utilizacin de Fireworks C S 5

26. Haga clic sobre el segundo botn \

la izquierda de Posicin del men para
situar el men en la parte inferior de la
divisin.
27. Haga clic sobre el botn central en Posicin del submen
S una vez finalizado el men emergente,
desea realizar alguna modificacin, deber abrir el men Modificar, seleccionar la opcin Men emergente y por lti~io Editar men emergente....

j e para colocar los

submens en la parte superior

del men.

derecha

28. Desactive la casilla Colocar en la misma

posicin en caso de que aparezca seleccionada.
29. Haga clic sobre el botn Listo para finalizar la creacin del men.

MEN DE OPCIONES
PERIDICOS

Noticias
Deportes

Fig. 27. Men emergente.

2 0 minutos
1 El Peridico
L a Vanguardia

30. Efecte un clic sobre el botn Herramienta Texto y vuelva a hacer clic en el interior
del rectngulo.
31. Teclee MEN DE OPCIONES y aplquele
un tamao de 18, un aspecto de Negrita y
color Blanco con la fuente Verdana.
32. Almacene
men.

el documento

con el nombre

33. Realice una vista previa del men emergente en el navegador y compruebe que
funciona de forma correcta (figura 27).
Si desea utilizar este men emergente en un
documento de H T M L de Dreamweaver, deber exportarlo siguiendo los pasos detallados en los apartados Exportar una imagen de Fireworks e Insercin H T M L de Fireworks.
Con esto daremos por finalizado el captulo
dedicado a la aplicacin Fireworks.