Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Manual de Fireworks 8
Manual de Fireworks 8
Marcas comerciales
1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central,
ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite,
FlashPaper, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder, Macromedia, MXML,
RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit, Studio MX, UltraDev y
WebHelp son marcas comerciales registradas o marcas comerciales de Macromedia, Inc. y pueden estar registradas en Estados
Unidos o en otras jurisdicciones, incluidas las de otros pases. Otros nombres de productos, logotipos, diseos, ttulos, palabras o
frases utilizados en esta publicacin pueden ser marcas comerciales, marcas de servicios o nombres comerciales de Macromedia,
Inc. o de otras entidades y estar registrados en determinadas jurisdicciones, incluidas las de otros pases.
Informacin de terceros
Esta gua contiene vnculos a sitios Web de terceros que no se encuentran bajo el control de Macromedia, y de cuyo contenido
Macromedia no es responsable. El acceso a cualquier sitio Web de otras empresas que se mencione en esta gua es responsabilidad
exclusiva del usuario. Macromedia proporciona estos vnculos slo como ayuda, pero su inclusin no implica que Macromedia
haga suyo ni acepte responsabilidad alguna por el contenido de dichos sitios.
Copyright 2005 Macromedia, Inc. Todos los derechos reservados. Este manual no se puede copiar, fotocopiar,
reproducir, traducir ni convertir a ningn formato electrnico o legible por mquina, en parte o en su totalidad, sin el
permiso por escrito de Macromedia, Inc. No obstante, el propietario, o persona autorizada, de una copia del software con
el que se incluye este manual est autorizado a realizar una copia impresa de una versin electrnica de este manual con
fines exclusivos de aprendizaje de uso del software, teniendo en cuenta que ninguna parte de este manual se puede
imprimir, reproducir, distribuir, revender ni transmitir para otros fines, incluidos, sin limitacin, fines comerciales, como
vender esta documentacin o proporcionar servicios de soporte de pago ZFW80M100L.
Agradecimientos
Gestin del proyecto: Charles Nadeau, Debi Robson
Redaccin: David Sullivan, Rosanne Conroy, Charles Nadeau
Edicin: Melba Lancaster, Shawn Jackson, Linda Adler
Responsable de produccin: Patrice ONeill
Produccin y diseo multimedia: Adam Barnett, Aaron Begley, Arena Reed, Paul Rangel, John Francis, Mario Reynoso
Gestin del proyecto de localizacin: Luciano Arruda
Especialista en localizacin de productos: Masayo Noda
Agradecimientos especiales a Jon Varese, Jennifer Rowe, Jay Armstrong, Alan Musselman, Maureen Keating, Matt Hoffberg,
David Spells, Sheila McGinn, Andrew Wilson, Rosana Francescato, Kristin Conradi, Yuriko Ando, Rubric, Inc. y a todos los
miembros de los equipos de ingeniera y control de calidad de Fireworks .
Primera edicin: Agosto de 2005
Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103 (EE.UU.)
Contenido
Captulo 1: Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Utilidades de Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Novedades de Fireworks 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Instalacin de Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Captulo 2: Aprendizaje de Fireworks . . . . . . . . . . . . . . . . . . . . . . .11
Procedimientos iniciales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11
Cmo aprovechar al mximo la documentacin de Fireworks. . . . . . . .11
Utilizacin del sistema de ayuda de Fireworks . . . . . . . . . . . . . . . . . . . . 12
Captulo 3: Conceptos bsicos de Fireworks . . . . . . . . . . . . . . . . 17
El espacio de trabajo de Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Realizacin de tareas bsicas en Fireworks. . . . . . . . . . . . . . . . . . . . . . 28
Captulo 4: Tutorial: Creacin de pginas-maqueta . . . . . . . . . . .33
Creacin de una carpeta de trabajo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Revisin del trabajo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Creacin y almacenamiento de un documento nuevo . . . . . . . . . . . . . 36
Importacin y posicionamiento de las imgenes. . . . . . . . . . . . . . . . . . .37
Creacin de un boceto del rea de contenidos . . . . . . . . . . . . . . . . . . . 39
Posicionamiento de texto e imgenes . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Exportacin de la imagen para la Web . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Captulo 5: Tutorial: Administracin de fotografas . . . . . . . . . . 55
Revisin del trabajo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Proceso por lotes de archivos de imagen de gran tamao . . . . . . . . .
Composicin de las imgenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Vista previa y exportacin de las imgenes . . . . . . . . . . . . . . . . . . . . . .
Visualizacin de las imgenes optimizadas finales. . . . . . . . . . . . . . . .
55
56
58
64
65
Contenido
CAPTULO 1
Introduccin
Utilidades de Fireworks
Fireworks puede utilizarse para crear, editar y animar grficos Web, aadir
interactividad avanzada y optimizar imgenes en entornos profesionales.
En Fireworks es posible crear y modificar imgenes vectoriales y de mapa
de bits en una sola aplicacin. Todo es modificable en todo momento. Y el
flujo de trabajo puede automatizarse para satisfacer las necesidades de
cambio y actualizacin que de otra forma exigiran una enorme dedicacin.
Fireworks se integra con otros productos de Macromedia, como
Dreamweaver, Flash, FreeHand y Director, y con otros editores HTML y
aplicaciones grficas de uso frecuente para ofrecer una solucin Web global.
Los grficos de Fireworks pueden exportarse fcilmente con cdigo HTML
y JavaScript adaptado al editor de HTML que se utilice.
Novedades de Fireworks 8
Cree y optimice de forma precisa imgenes para la Web en un entorno
intuitivo y personalizable. Fireworks admite ahora formatos ActionScript y
CSS (Cascading Style Sheet), lo que permite a la aplicacin trabajar de una
manera incluso ms eficaz con Dreamweaver y Flash. Nuevos formatos de
archivos, nuevos paneles y un flujo de trabajo espectacularmente
simplificado que no slo permite optimizar sus imgenes, sino tambin su
tiempo.
Optimizacin
Panel Edicin de
imagen
Ms formatos de
archivos de
importacin
Flujo de trabajo de
proceso por lotes
optimizado
Introduccin
Mens emergentes
CSS (Cascading Style
Sheet)
Compatibilidad de
vectores
Reconocimiento de
valores de color de
ActionScript
Utilice el comando
Guardar como para
guardar mapas de bits
en distintos tipos de
archivos.
Cuadrculas menos
intrusivas
Sombra de
perspectiva
Sombra slida
Componentes de
interfaces mviles
Novedades de Fireworks 8
Texto de nombres
automticos
Panel Caracteres
especiales
Remodelacin de
texto en trazado
Ahorre tiempo y esfuerzo con las muchas mejoras incorporadas a las tareas
habituales.
Mejoras en el flujo de trabajo
Introduccin
Las fuentes y
optimizacin
recientes recuerdan la
ltima configuracin
utilizada
Almacenamiento de
varias selecciones
Seleccin de objetos
que comparten un
borde en el panel
Capas
Preferencias de
almacenamiento
automtico
Agrupamiento de
desplazamientos
consecutivos
Compatibilidad con
tabletas mejorada
Bloqueo de objetos
Instalacin de Fireworks
En esta seccin se explica la instalacin de Fireworks.
Asegrese de leer las notas de versin en el sitio Web de Macromedia
http://www.macromedia.com/go/fw_documentation_es para conocer la
informacin o las instrucciones ms recientes.
Para instalar Fireworks:
1.
2.
3.
4.
Instalacin de Fireworks
10
Introduccin
CAPTULO 2
Aprendizaje de Fireworks
Procedimientos iniciales
Si es la primera vez que utiliza Fireworks, comience leyendo
Captulo 3, Conceptos bsicos de Fireworks, en la pgina 17 y,
a continuacin, realice los tutoriales.
Si tiene experiencia con el uso de grficos Web, comience realizando los
tutoriales de esta gua y, a continuacin, lea Conceptos bsicos de
Fireworks en Utilizacin de Fireworks.
Utilizacin de Fireworks
11
un animado
intercambio de tcnicas tiles entre los usuarios, el personal de
asistencia tcnica y el equipo de desarrollo de Fireworks. Para
consultar news://forums.macromedia.com/macromedia.fireworks,
utilice un lector de noticias.
incluye informacin sobre la escritura de
JavaScript para automatizar las tareas de Fireworks. Es posible controlar
cualquier comando o configuracin de Fireworks utilizando comandos
especiales de JavaScript que Fireworks pueda interpretar. El manual est
disponible en la Ayuda y en el sitio Web de Macromedia como PDF
descargable.
Ampliacin de Fireworks
12
Aprendizaje de Fireworks
Acceso a la Ayuda
Puede acceder a la ayuda en lnea de Fireworks mientras trabaja.
Para abrir la Ayuda de Fireworks:
Bsquedas en la Ayuda
Puede realizar bsquedas de texto completo en la Ayuda de Fireworks.
Para buscar en la ayuda en lnea (Windows):
2.
3.
2.
SUGERENCIA
1.
13
2.
Desplcese hasta una entrada del ndice de la lista alfabtica y haga doble
clic sobre ella para ver la informacin.
SUGERENCIA
1.
2.
Haga clic en una letra y desplcese hasta una entrada del ndice de la
lista.
3.
2.
14
Aprendizaje de Fireworks
Impresin de la documentacin de
Fireworks
Los siguientes manuales tambin estn disponibles en
formato PDF en el sitio Web de Macromedia en
http://www.macromedia.com/go/fw_documentation_es
Utilizacin de Fireworks
Introduccin a Fireworks
Ampliacin de Fireworks
15
Aprendizaje de Fireworks
16
Aprendizaje de Fireworks
CAPTULO 3
Conceptos bsicos de
Fireworks
17
El espacio de trabajo de
Fireworks
Al abrir un documento en Fireworks por primera vez, Fireworks activa el
entorno de trabajo, en el que se incluye el panel Herramientas, el Inspector
de propiedades, los mens y los dems paneles.
El panel Herramientas, situado a la izquierda de la pantalla, contiene varias
secciones de herramientas de distintos grupos, como mapa de bits, vector y
Web. El Inspector de propiedades aparece en la parte inferior del
documento e inicialmente muestra las propiedades del mismo; stas
cambian cuando elige una nueva herramienta o un objeto del documento.
Los paneles estn inicialmente acoplados en grupos a lo largo de la parte
derecha de la pantalla.
18
19
20
Elija Seleccionar > Anular seleccin para anular la seleccin de todos los
objetos.
2.
21
Arrastre el asa del ngulo superior izquierdo a otra parte del espacio de
trabajo.
NOTA
22
El panel Optimizar
23
Herramientas.
permite almacenar y volver a utilizar combinaciones de
caractersticas de objetos o elegir un estilo entre los almacenados.
El panel Estilos
El panel URL
frecuencia.
(Ventana > Mezclador de colores) permite
crear colores nuevos y aadirlos a la paleta de colores del documento actual
o aplicar los objetos seleccionados.
El panel Muestras
documento actual.
El panel Informacin (Ventana > Informacin) proporciona datos sobre las
El panel Alinear
24
especiales) permite
insertar caracteres especiales en el texto directamente desde Fireworks, en
lugar de tener que copiar y pegar los caracteres de otra fuente.
Haga clic en el botn Cerrar de la barra de ttulo del panel cuando ste
est desacoplado.
S UG E R E NCI A
Una marca de
verificacin junto al
nombre del panel en
el men Ventana
significa que el panel
est abierto.
Arrastre hacia la izquierda el asa del panel del ngulo superior izquierdo
para alejarlo del rea de acoplamiento de la derecha de la pantalla.
NOTA
25
2.
Seleccione Ventana > Disposiciones del rea de trabajo > 1024 x 768.
Seleccione Ventana > Disposiciones del rea de trabajo > 1280 x 1024.
NOTA
26
Seleccione Ventana > Ocultar paneles. Para ver los paneles ocultos,
vuelva a elegir Ventana > Ocultar paneles.
27
28
JPEG
2.
3.
29
4.
NOTA
1.
2.
30
1.
2.
3.
2.
3.
31
32
CAPTULO 4
Tutorial: Creacin de
pginas-maqueta
Este tutorial describe las tareas bsicas para crear una maqueta de una
pgina Web con Macromedia Fireworks 8. Las pginas-maqueta se
utilizan habitualmente para mostrar diseos de pginas a compaeros
o clientes. Una vez diseada y aprobada, los diseadores Web utilizan
la maqueta como prototipo para crear la pgina.
En este tutorial, realizar las siguientes tareas:
Creacin de una carpeta de trabajo . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Revisin del trabajo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Creacin y almacenamiento de un documento nuevo . . . . . . . . . . 36
Importacin y posicionamiento de las imgenes . . . . . . . . . . . . . . 37
Creacin de un boceto del rea de contenidos . . . . . . . . . . . . . . . . 39
Posicionamiento de texto e imgenes. . . . . . . . . . . . . . . . . . . . . . . . 45
Exportacin de la imagen para la Web . . . . . . . . . . . . . . . . . . . . . . . 52
33
3.
34
Cuando el equipo volvi a la oficina, les dijeron que a los clientes les
interesaron dos diseos en particular, que se realizaron en los siguientes
esbozos:
35
Se les asigna la tarea de crear una maqueta del segundo diseo para
mostrrsela a los clientes. La maqueta tendr el aspecto de una pgina Web
real, aunque no funcionar como tal.
Creacin y almacenamiento de
un documento nuevo
Tras visualizar la presentacin preliminar de la maqueta completa, ya puede
comenzar con el proyecto.
1.
2.
3.
4.
36
5.
6.
NOTA
Importacin y posicionamiento
de las imgenes
El siguiente paso ser la importacin de las imgenes y su posicionamiento
en el lienzo de Fireworks para ver cmo encajarn en la pgina Web final.
2.
37
3.
Alinee el punto con el ngulo superior izquierdo del lienzo y haga clic
para insertar el grfico de titular publicitario.
El titular publicitario aparece rodeado de un marco azul que indica que
es el objeto seleccionado.
4.
5.
Haga clic en cualquier punto fuera del titular publicitario para anular su
seleccin.
6.
Guarde el trabajo.
2.
38
3.
4.
5.
6.
Guarde el trabajo.
39
2.
40
3.
4.
5.
6.
41
1.
NOTA
2.
42
3.
4.
Guarde el trabajo.
2.
2.
3.
43
NOTA
Guarde el trabajo.
2.
2.
44
3.
NOTA
Posicionamiento de texto e
imgenes
Tras crear la maqueta del rea de contenidos, decide crear algunos
cuadros de texto para representar el contenido y los vnculos de
navegacin, e importar imgenes para representar otras funciones del
rea de contenidos.
45
Escala
horizontal
2.
Interlineado
Botones de alineacin
NOTA
3.
Con el puntero de texto, haga clic una vez junto a la esquina superior
izquierda del rectngulo de la barra lateral.
Este paso crea un bloque de texto vaco.
46
4.
5.
Escriba los elementos siguientes y pulse Intro cada vez para comenzar
una nueva lnea.
Chef Ipsum
Articles
Special Events
Location
Menu
Contact Us
6.
7.
Guarde el trabajo.
47
Posicionamiento de un marcador de
posicin de imagen para vdeo
A continuacin va a aadir un marcador de posicin de imagen en el rea
principal de contenidos para representar un vdeo que se ejecutar en la
pgina Web final. Vase Revisin del trabajo en la pgina 34.
1.
48
2.
3.
4.
5.
6.
Guarde el trabajo.
Posicionamiento de un marcador de
posicin de imagen para un elemento
A continuacin va a aadir un marcador de posicin de imagen en el rea
principal de contenidos para representar un elemento de men que se ver
en la pgina Web final. Vase Revisin del trabajo en la pgina 34.
1.
2.
3.
4.
5.
6.
Guarde el trabajo.
49
2.
3.
50
4.
Ahora que ha creado los bloques de texto bsicos, decide modificar parte
del texto para que los prrafos empiecen con texto resaltado y que haya
texto al final de cada prrafo que represente vnculos simulados.
1.
2.
3.
Repita estos pasos para las primeras tres palabras del segundo prrafo.
2.
3.
4.
5.
51
6.
7.
8.
Guarde el trabajo.
52
1.
2.
3.
4.
5.
6.
53
54
CAPTULO 5
Tutorial: Administracin de
fotografas
Este tutorial describe las tareas bsicas para optimizar fotografas con
Macromedia Fireworks 8. Aprender a procesar archivos por lotes y a
componer y exportar grupos de imgenes.
En este tutorial, realizar las siguientes tareas:
Revisin del trabajo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Proceso por lotes de archivos de imagen de gran tamao. . . . . . 56
Composicin de las imgenes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Vista previa y exportacin de las imgenes . . . . . . . . . . . . . . . . . . . 64
Visualizacin de las imgenes optimizadas finales . . . . . . . . . . . . 65
55
2.
56
3.
Para seleccionar de forma rpida todos los archivos para el proceso por
lotes, haga clic en Aadir todos y, a continuacin, en Siguiente.
Aparece el cuadro de dilogo Procesar por lotes. Este cuadro de dilogo
permite especificar las acciones que se van a realizar en un lote de
archivos. En este caso, desea cambiar la escala y el nombre de los
archivos.
4.
5.
6.
7.
8.
9.
57
58
2.
3.
Establezca el color del lienzo como Blanco y haga clic en Aceptar para
crear el archivo origen de la imagen.
4.
5.
6.
7.
2.
SUGERENCIA
Es posible que
durante el tutorial
necesite deshacer
algn cambio
realizado. Fireworks
puede deshacer
varios de sus
cambios recientes,
dependiendo del
nmero definido al
efecto en
Preferencias. Para
deshacer el cambio
ms reciente,
seleccione Edicin >
Deshacer.
59
60
3.
4.
6.
NOTA
8.
Guarde el trabajo.
61
2.
3.
4.
62
5.
6.
7.
Repita los pasos del 1 al 6 para las cinco imgenes que quedan,
seleccionando siempre un nuevo fotograma vaco antes de importar cada
imagen.
8.
Guarde el trabajo.
63
2.
64
3.
4.
5.
6.
Todas las imgenes estn cortadas para mostrar la composicin que cre
cuando situ las imgenes en el lienzo.
65
Tamao de archivo
1013.jpg
402 Kb
1088.jpg
1732 Kb
1095.jpg
753 Kb
1111.jpg
2831 Kb
1320.jpg
1364 Kb
1396.jpg
1435 Kb
Imgenes finales
Nombre de archivo Dimensiones del
archivo
Tamao de archivo
Image0
12 Kb
Image1
16 Kb
Image2
23 Kb
Image3
19 Kb
Image4
21 Kb
Image5
14 Kb
66
CAPTULO 6
Tutorial: Creacin de
titulares publicitarios
67
2.
3.
4.
5.
NOTA
68
2.
3.
69
5.
6.
70
7.
8.
2.
71
3.
4.
5.
6.
72
Guarde el trabajo.
2.
3.
4.
Cambie el nombre de las capas haciendo doble clic en cada una de ellas
y escribiendo los nombres siguientes en el cuadro de texto Nombre de
capa que aparece:
Para la Capa 3, Grficos
SUGERENCIA
Es aconsejable
asignar nombre a las
capas para poder
identificarlas
fcilmente despus.
Cuando un
documento aumenta
y contiene muchas
capas, a veces es
difcil manejarlo si las
capas no tienen un
nombre exclusivo.
73
Acerca de
Ms informacin sobre capas Las capas dividen los documentos de Fireworks en planos distintos.
Un documento puede estar compuesto por muchas capas y cada una contener muchos objetos. En
Fireworks, el panel Capas muestra las capas de un documento y los objetos que contiene cada capa.
Los objetos y capas del panel Capas muestran el orden en el que estn apilados estos elementos en la
composicin. Las capas u objetos situados en la parte superior del panel irn sobre los objetos que estn
situados debajo en el panel. Al cambiar el orden de las capas u objetos de una capa, puede crear el
efecto de objetos que tapan o bloquean otros objetos.
5.
6.
7.
74
Guarde el trabajo.
2.
75
3.
b.
76
c.
d.
77
e.
4.
SUGERENCIA
78
5.
Acerque el
documento para
perfeccionar su
trabajo.
6.
7.
Guarde el trabajo.
Creacin de un contorno
alrededor del titular publicitario
Desea crear un contorno negro alrededor del titular publicitario. Para crear
este efecto, decide utilizar un rectngulo redondeado como una mscara
vectorial.
Una mscara vectorial recorta los objetos subyacentes con la forma de su
trazado, con un efecto de molde para galletas.
1.
79
2.
3.
4.
80
5.
6.
7.
8.
Guarde el trabajo.
2.
81
3.
4.
En la ventana de documento fuera del lienzo, haga clic cuatro veces para
dibujar una forma rectangular y, a continuacin, haga clic en el primer
punto para cerrar la forma.
El rectngulo debe ser un poco ms alto que el grfico del titular
publicitario y su longitud debe ser aproximadamente una tercera parte
la del grfico.
5.
NOTA
82
La forma est en la capa Grficos, por lo que tapa la imagen de fondo, pero
no el logotipo. Segn el orden de apilamiento que se muestra en el panel
Capas, la capa Logotipo est sobre la capa Grficos, mientras que la capa
Fondo se encuentra debajo.
6.
7.
Guarde el trabajo.
Incorporacin de un eslogan al
titular publicitario
A continuacin, necesita aadir el eslogan de la empresa, Nouveau World
Cuisine, al titular publicitario.
1.
2.
3.
Haga clic en el cuadro Color, escriba F7EFE3 como color del texto
y pulse Intro.
Haga clic en el botn Alinear a la izquierda.
83
4.
Haga clic debajo del grfico del logotipo y escriba Nouveau World
Cuisine.
5.
Haga clic una vez fuera del bloque de texto para aplicar el texto
introducido.
Fireworks crea un nuevo objeto de texto en la capa Graphics que tiene
como nombre predeterminado el texto que ha introducido. Esta
funcin ofrece la posibilidad de identificar rpidamente los objetos de
texto utilizados en la composicin.
6.
Guarde el trabajo.
Exportacin de un archivo de
imagen optimizada
Ahora que ha terminado el grfico del titular publicitario, ya puede
optimizar y exportar la imagen como un archivo JPEG.
y
Acerca de
El objetivo final del diseo de grficos Web es la creacin de imgenes atractivas que se descarguen lo
ms rpidamente posible. Para ello, debe reducir el tamao del archivo de la imagen manteniendo en lo
posible la misma calidad. Este equilibrio es la optimizacin, es decir, buscar la proporcin correcta de
color, compresin y calidad.
84
2.
85
3.
Exportacin de la imagen
Tras elegir la configuracin de optimizacin, exporte la imagen como un
archivo JPEG.
1.
2.
86
3.
4.
NOTA
87
88
CAPTULO 7
Tutorial: Creacin de
pginas Web
Ese tutorial describe las tareas bsicas del diseo y creacin de pginas
Web con Macromedia Fireworks 8. Asimismo, aprender a crear
elementos interactivos, como botones, rollovers y mens emergentes.
Antes de comenzar, debe crear una carpeta de trabajo. Para obtener
instrucciones, consulte Creacin de una carpeta de trabajo en la pgina
34.
En este tutorial, realizar las siguientes tareas:
Visualizacin de la pgina Web finalizada . . . . . . . . . . . . . . . . . . . . 90
Apertura del archivo de origen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Importacin de una imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Divisin del documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Creacin de un rollover . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Creacin de botones para una barra de navegacin . . . . . . . . . . .101
Creacin y edicin de un men emergente . . . . . . . . . . . . . . . . . . .110
Optimizacin del documento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .119
Exportacin de HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Comprobacin del archivo finalizado . . . . . . . . . . . . . . . . . . . . . . . 127
89
2.
3.
4.
5.
6.
7.
8.
9.
10. Haga
90
11.
NOTA
2.
3.
NOTA
2.
3.
Haga clic en cualquier punto del rea blanca y vaca del lienzo para
insertar el grfico.
91
4.
5.
Guarde el trabajo.
92
2.
NOTA
93
4.
5.
6.
94
Seleccione Ver > Guas > Ajustar a guas para activar Ajustar a guas si
an no estuviese activado.
8.
9.
95
10. Si
11.
96
Guarde el trabajo.
Creacin de un rollover
Ahora que ha dividido el documento, puede crear elementos interactivos.
Decide utilizar dos de las divisiones para crear un rollover.
Hay dos clases de rollovers: rollovers simples y desunidos. Un rollover
simple muestra una imagen diferente cuando el puntero se coloca sobre l
en un navegador Web. Un rollover desunido provoca el cambio de imagen
en otro lugar de la pantalla cuando el puntero se coloca sobre l. En este
caso va a crear un rollover desunido.
1.
Tirador de comportamiento
Creacin de un rollover
97
2.
4.
98
5.
6.
7.
8.
Creacin de un rollover
99
9.
10. Haga
11.
SUGERENCIA
Si la imagen parece
saltar ligeramente o
la transicin entre los
grficos no es
uniforme, oculte las
divisiones y ajuste la
posicin de la
imagen
intercambiada del
Fotograma 2 con el
Inspector de
propiedades. Sus
coordenadas x e y
deben coincidir con
las coordenadas de
la imagen de Great
Weekend Rates (11,
202).
Guarde el trabajo.
2.
3.
101
4.
2.
3.
4.
5.
6.
7.
8.
9.
Guarde el trabajo.
2.
3.
4.
2.
3.
2.
3.
Para este tutorial, bastar con una URL que funcione. Si se tratara de
un sitio Web real, introducira la URL a la que debera llevar el botn
Vehicles.
NOTA
Asigne una URL a cada una de las instancias del botn restantes.
Una vez ms, sirve cualquier URL.
5.
NOTA
2.
3.
4.
5.
6.
7.
8.
9.
10. Repita
11.
12. Haga clic en la herramienta Puntero del panel Herramientas para anular
14. Haga
el trabajo.
110
2.
3.
111
4.
5.
6.
7.
NOTA
112
9.
NOTA
el trabajo.
2.
113
3.
4.
5.
6.
114
7.
8.
9.
115
en el botn Siguiente.
Aparece la ficha Posicin. Aqu es donde puede especificar la posicin
del men emergente en la pantalla. Cuando las coordenadas son 0,0,
significa que el ngulo superior izquierdo del men emergente se
alinear con el ngulo superior izquierdo de la divisin que lo activa.
Tambin hay varias posiciones preestablecidas entre las que elegir.
11.
NOTA
el men emergente.
Desplace el puntero sobre la imagen de Worldwide Airports. El men
emergente ha cambiado de lugar y es ms ancho. Desplace el puntero
sobre cada entrada del men para ver los cambios de color.
13.
116
Guarde el trabajo.
2.
3.
Haga clic en el botn Ms (+) sobre la lista de entradas para insertar una
opcin de men vaca.
4.
Arrastre la entrada Amrica Latina o del Sur una lnea hacia arriba y
suelte el botn del ratn.
Mientras arrastra, una lnea negra indica dnde se colocar la entrada si
suelta el ratn en ese momento.
La entrada se coloca donde ha especificado.
6.
117
7.
NOTA
8.
9.
Haga clic otra vez en el botn Ms (+) y cree una nueva entrada para
Canada.
Acaba de crear un submen que aparecer cuando desplace el puntero
sobre la entrada Amrica del Norte en un navegador.
10. Asigne
12. Guarde
118
el trabajo.
119
2.
SUGERENCIA
Utilice la herramienta
Mano de la seccin
Ver del panel
Herramientas para
ver las partes de la
imagen que no estn
visibles.
4.
5.
6.
121
7.
8.
9.
Guarde el trabajo.
Exportacin de HTML
HTML, o HyperText Markup Language, es el mtodo principal utilizado
en Internet para crear y mostrar pginas Web. No es necesario conocer
HTML para utilizar Fireworks, pero es til recordar que las divisiones de
Fireworks se convierten en celdas de una tabla HTML cuando se exportan.
En esta seccin va a exportar y visualizar el documento finalizado en un
navegador Web. Tambin examinar el cdigo HTML que exporta
Fireworks.
2.
3.
4.
5.
6.
7.
SUGERENCIA
Los ajustes de la
ficha Especfico del
documento se
pueden aplicar a
todos los
documentos nuevos;
para ello, haga clic
en el botn Fijar
predeterminados .
2.
3.
4.
5.
7.
2.
2.
3.
4.