Tutorial bsico de diseo Web

Este tutorial describe las tareas bsicas de diseo de grficos Web e interactividad con Macromedia
Fireworks MX 2004. Ayuda a obtener experiencia prctica en la aplicacin de grficos Web ms
utilizada del mercado y a aprender con ello conceptos bsicos de diseo Web.

Contenido
Con este tutorial reproducir el flujo de trabajo habitual en Fireworks para disear una pgina
Web. Aprender lo siguiente:
Copia de la carpeta Tutorial2
Visualizacin de la pgina Web finalizada
Apertura del archivo de origen
Importacin de un elemento grfico
Divisin del documento
Creacin de un rollover de arrastrar y colocar
Creacin y edicin de botones para generar una barra de navegacin
Creacin y edicin de un men emergente
Optimizacin del documento
Exportacin de HTML
Comprobacin del archivo finalizado

1
Conocimientos necesarios
Para estudiar este tutorial hace falta estar familiarizado con el diseo grfico en Fireworks u otras
aplicaciones de imgenes de mapa de bits o vectoriales. Debe poseer los conocimientos bsicos
descritos en el Tutorial bsico de diseo grfico de Fireworks. En concreto, ha de saber realizar
las siguientes tareas en Fireworks:
Almacenamiento de documentos
Seleccin de objetos
Edicin de las propiedades de los objetos
Apertura y utilizacin de paneles
Utilizacin de capas y objetos
Creacin y edicin de texto
Exportacin de imgenes

Copia de la carpeta Tutorial2

Antes de empezar, debe copiar la carpeta Tutorial2 que ha descargado para poder guardar los
resultados del trabajo y conservar los archivos originales por si otros usuarios utilizan el tutorial
ms adelante.
Nota: si est utilizando Windows, asegrese de descomprimir los archivos que ha descargado para
este tutorial antes de continuar. (En Macintosh, StuffIt Expander descomprime los archivos
automticamente.)

1 Elija la carpeta Tutorial2 que ha descargado del sitio Web de Macromedia.

2 Siga uno de estos procedimientos:
(Windows) Haga una copia de la carpeta pulsando las teclas Control+C y, a continuacin,

Control+V para pegar la copia en el escritorio.

(Macintosh) Pulse Comando+D para duplicar la carpeta.

3 Llame a la nueva carpeta Tutorial2_Copy.

Visualizacin de la pgina Web finalizada

A continuacin ver el archivo de tutorial terminado para comprobar el aspecto final del proyecto
despus de exportarlo como archivo HTML.
1 Inicie el navegador Web.
2 En el disco duro, desplcese a la carpeta Tutorial2 que ha descargado del sitio Web de
Macromedia y sitese en la carpeta Tutorial2/Complete.
Nota: de forma predeterminada, algunas versiones de Microsoft Windows ocultan la extensin de
los tipos de archivos conocidos. Si no ha modificado este parmetro, los archivos de la carpeta
Complete aparecern sin extensin. Cuando se trata de grficos y pginas Web, es mejor ver las
extensiones de archivo. Para informacin sobre cmo activar de nuevo las extensiones de los
archivos, vase la Ayuda de Windows.

3 Seleccione el archivo final.htm y arrstrelo a la ventana abierta del navegador.

En este tutorial terminar la versin parcial de esta pgina para Global, una empresa de alquiler
de coches.
4 Desplace el puntero por la imagen de Vintage grande.

2 Tutorial bsico de diseo Web

 Cuando el puntero se desplaza por la imagen de Vintage, otra imagen de la pgina cambia. A
esto se le llama rollover desunido.
5 Desplace el puntero por la barra de navegacin que recorre la parte superior de la pgina Web.
Los botones cambian a medida que el puntero pasa sobre ellos. Haga clic en el botn Rates para
comprobar el vnculo.
El vnculo conduce a la pgina de Fireworks en www.macromedia.com/es/. Sin embargo, a lo
largo del tutorial tendr que introducir su propia direccin URL para ste y otros elementos.
6 Utilice el botn Atrs del navegador para volver a la pgina final.htm.
7 Desplace el puntero por la imagen de Worldwide Airports. Aparece un men emergente.
Desplace el puntero por todas las opciones del men, incluida la primera, que a su vez contiene
un submen.
8 Haga clic en United States para comprobar el vnculo y regrese a la pgina final.htm.
9 Despus de ver la pgina Web, puede cerrarla o dejarla abierta para consultarla mientras estudia
el tutorial.
Nota: la carpeta Complete tambin incluye el documento de Fireworks utilizado para generar el
archivo HTML. Para verlo, haga doble clic sobre final.png.

Apertura del archivo de origen

Despus de ver el archivo final.htm en el navegador, ya est preparado para empezar.
1 En Fireworks, elija Archivo > Abrir.
2 Desplcese a la carpeta Tutorial2 en el disco duro. Desplcese a Tutorial2/Start y abra
global.png.
Nota: conforme avance con el tutorial, recuerde guardar regularmente el trabajo con Archivo >
Guardar.

Importacin de un elemento grfico

Una vez abierto el diseo inacabado de la pgina Web de Global, va a importar un elemento
grfico.
Si ya ha estudiado el Tutorial bsico de diseo grfico, utilizar el archivo JPEG creado. Si no lo
ha estudiado, utilizar una imagen provista a tal efecto.
1 Elija Archivo > Importar y siga uno de estos procedimientos:
Si ya ha estudiado el Tutorial bsico de diseo grfico, desplcese a la carpeta Tutorial1/
Export.
En caso contrario, desplcese a la carpeta Tutorial2/Assets.

2 Seleccione vintage.jpg y haga clic en Abrir.

3 Haga clic en cualquier punto del rea blanca y vaca del lienzo.
La imagen aparece seleccionada.

Importacin de un elemento grfico 3

 4 Arrastre la imagen hasta colocarla como se muestra en la siguiente ilustracin.

Divisin del documento

Los diseadores Web utilizan un proceso llamado divisin para cortar los documentos Web en
trozos pequeos por distintas razones. En la Web se descargan con ms rapidez las imgenes
pequeas, lo cual permite que los usuarios vayan viendo una pgina progresivamente en lugar de
esperar a que se descargue toda una imagen grande. Adems, con la divisin es posible optimizar
las distintas partes del documento de forma diferente. La divisin tambin es necesaria para aadir
interactividad.
En esta seccin va a crear divisiones para algunos elementos grficos de la pgina Web. Despus
les aadir interactividad y ajustar las opciones de optimizacin y compresin.
1 Con la imagen de Vintage an seleccionada, elija Edicin > Insertar > Divisin.
En la parte superior de la imagen se inserta una divisin. De forma predeterminada, las
divisiones se solapan en verde.

2 Haga clic en cualquier punto fuera de la divisin para anular su seleccin.

Las guas de divisin rojas definen la divisin e indican la anchura y altura del documento. Al
crear la divisin, Fireworks ha dividido automticamente el resto del documento.
Nota: si las guas de divisin rojas no se muestran en pantalla, elija Ver > Guas de divisin.

3 Pulse la tecla Mays mientras hace clic en las imgenes de Worldwide Airports y Great Weekend
Rates situadas a la izquierda del documento para seleccionarlas ambas a la vez.

4 Tutorial bsico de diseo Web

4 Elija Edicin > Insertar > Divisin. En el cuadro de mensaje que aparece, elija Varios. De este
modo podr insertar varias divisiones a la vez.
Las divisiones se insertan sobre las imgenes seleccionadas. Cuando se aaden ms divisiones,
cambia el formato de las dems divisiones automticas del documento.

5 Haga clic en cualquier punto fuera de las divisiones para anular su seleccin.
Ahora hay un espacio entre la divisin de Vintage y la de Great Weekend Rates. Es una divisin
automtica estrecha.
6 Coloque el puntero sobre la gua de divisin izquierda de la imagen de Vintage.

El puntero adopta la forma de movimiento de gua, que indica que es posible asir la divisin y
arrastrarla. Cuando se arrastra una gua de divisin, puede modificarse la forma de la divisin.
7 Elija Ver > Guas > Ajustar a guas para activar Ajustar a guas si an no estuviese activado.
8 Arrastre la gua de divisin hacia la izquierda hasta que se ajuste a la gua de divisin derecha de
la imagen de Great Weekend Rates como se muestra en la siguiente ilustracin.

9 Suelte el botn del ratn.

Divisin del documento 5

 Ahora la divisin de Vintage se extiende hasta el borde de la divisin de Great Weekend Rates,
y se ha eliminado la pequea divisin automtica que haba entre ellas. Las divisiones son como
las celdas de las tablas de una hoja de clculo o un programa de tratamiento de texto. Cuando
se arrastran guas de divisin para cambiar el tamao de una divisin, Fireworks cambia el
tamao de las dems divisiones, del mismo modo que, cuando se arrastra el borde de una celda
en una tabla, cambia el tamao de las dems celdas de la tabla. Si se arrastra una gua de
divisin sobre las dems divisiones automticas e incluso ms all, las guas de divisin se
fusionan y desaparecen las divisiones automticas innecesarias.
10 Si el panel Capas est minimizado o no est visible, haga clic en su flecha de ampliacin o elija
Ventana > Capas.
En la parte superior del panel se encuentra la capa de Web. Contiene todos los objetos Web de
un documento. Las tres divisiones creadas aparecen en esta lista. En todos los documentos la
capa de Web es siempre la capa superior. No se puede desplazar, cambiar de nombre ni
eliminar.

Creacin de un rollover de arrastrar y colocar

Una vez dividido el documento, va a aadirle interactividad. Utilizar dos de las divisiones
insertadas en el paso anterior para crear un rollover de arrastrar y colocar.
Existen dos tipos de rollovers de arrastrar y colocar: 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 Seleccione la divisin que cubre la imagen de Vintage.

6 Tutorial bsico de diseo Web

 El icono redondo del centro de la divisin se denomina smbolo de comportamiento. Permite
aadir comportamientos o interactividad a una divisin. Si ya est familiarizado con los
comportamientos de Macromedia Dreamweaver, reconocer muchos comportamientos iguales
en Fireworks.

Tirador de comportamiento

Tambin pueden aplicarse comportamientos con el panel Comportamientos. En los casos de

interactividad simple, como puede ser el caso de los rollovers, es ms rpido y sencillo aplicar
un comportamiento a travs del tirador de comportamiento de la divisin.
2 Arrastre el smbolo de comportamiento a la divisin de Great Weekend Rates y suelte el botn
del ratn.

Desde el smbolo de comportamiento hasta la esquina de la divisin se extiende una lnea azul
de comportamiento, y aparece el cuadro de dilogo Intercambiar imagen.
3 Asegrese de que en el men emergente Intercambiar imagen de est seleccionado Fotograma
2; haga clic en Aceptar.
Cuando el puntero se desplace por la divisin de Vintage en un navegador, una imagen de
Fotograma 2 reemplazar al elemento grfico de Great Weekend Rates. La imagen de Vintage
se considera el activador del efecto de rollover, y la imagen que sustituye al elemento grfico de
Great Weekend Rates es la imagen intercambiada.

Creacin de un rollover de arrastrar y colocar 7

 4 Si el panel Fotogramas est minimizado o no est visible, haga clic en la flecha de ampliacin
del grupo de paneles Fotogramas y Historial y despus en la ficha Fotogramas, o elija Ventana
> Fotogramas.

El panel Fotogramas indica los fotogramas disponibles en el documento actual. Actualmente

slo hay un fotograma en el documento. El panel Fotogramas suele utilizarse para animacin.
En el caso de rollovers, sirve para guardar imgenes intercambiadas.
5 Haga clic en el botn Fotograma nuevo/duplicado de la parte inferior del panel.
Se crea un nuevo fotograma, llamado Fotograma 2, en el panel Fotogramas. Ahora el espacio
de trabajo est vaco salvo por las divisiones insertadas.

En el panel Capas no se indica ningn objeto, excepto el contenido de la capa de Web. Esto se
debe a que no todos los fotogramas comparten las capas de Fireworks de forma
predeterminada, con la excepcin de la capa de Web, que siempre se comparte. Los objetos de
la capa de Web aparecen en todos los fotogramas del documento, por lo que cualquier cambio
introducido en objetos Web, como divisiones, afecta a todos los fotogramas.
6 Elija Archivo > Importar y desplcese a la carpeta Tutorial2/Assets. Seleccione el archivo
denominado rates.gif y haga clic en Abrir.

8 Tutorial bsico de diseo Web

7 Coloque el puntero de insercin sobre la divisin en la que se coloc la imagen de Great
Weekend Rates en el Fotograma 1. Alinee el puntero con el ngulo superior izquierdo de la
divisin.

8 Haga clic para insertar la imagen.

Aparece la imagen de Vintage Classic Rates.

9 Haga clic en el botn Vista previa de la parte superior de la ventana de documento y despus en
el botn Ocultar divisiones y zonas interactivas de la seccin Web del panel Herramientas para
ocultar las divisiones del documento.

Desplace el puntero por la imagen de Vintage. La imagen de Great Weekend Rates cambia
cuando el puntero se desplaza por la imagen de Vintage.
Sugerencia: si la imagen parece saltar ligeramente o la transicin entre elementos grficos no es
uniforme, ajuste la posicin de la imagen intercambiada del Fotograma 2 en la vista Original. Para
obtener una colocacin precisa, active Papel cebolla en el panel Fotogramas o verifique que las
coordenadas X e Y de la imagen de Vintage Classic Rates son iguales a las de la imagen de Great
Weekend Rates en el Inspector de propiedades. Cuando termine, vuelva al Fotograma 1 y
desactive la opcin Papel de cebolla si es necesario. Para obtener ms informacin sobre estas
opciones, remtase al ndice del manual Utilizacin de Fireworks o busque en los temas de Ayuda
de Fireworks.

10 Cuando finalice, haga clic en el botn Original de la parte superior de la ventana de documento
para recuperar la vista normal y haga clic en el botn Mostrar divisiones y zonas interactivas del
panel Herramientas para ver las divisiones otra vez.
Ha creado con xito un rollover desunido. Los rollovers simples se crean de la misma manera: al
arrastrar el tirador de comportamiento de una divisin como se indica en el paso 2, slo ha de
arrastrarlo de vuelta a la misma divisin.

Creacin de un rollover de arrastrar y colocar 9

 En general, los diseadores Web aaden efectos de rollover a una imagen para indicar visualmente
a los usuarios que es posible hacer clic en ella. Si el sitio Web de Global fuera un sitio real en
Internet, probablemente sera deseable vincular las imgenes de Vintage y Rates a otras pginas
que proporcionaran ms informacin. En este tutorial dejaremos el rollover desunido tal como
est. En la siguiente seccin obtendr la prctica necesaria para asociar vnculos a otros objetos
Web.

Creacin y edicin de botones para generar una barra de

navegacin
Los botones son objetos Web que conducen a otras pginas Web. Su aspecto suele variar segn el
movimiento del ratn u otras acciones del usuario, como un clic, a modo de indicador visual de
interactividad. Por ejemplo, un botn muestra un efecto de rollover diferente si se desplaza el
puntero sobre l o si se hace clic.
Una barra de navegacin (o Bar Nav) es un conjunto de botones que aparece en una o varias
pginas de un sitio Web. Normalmente, todos los botones de una barra de navegacin tienen el
mismo aspecto, salvo por el texto que contienen.
Aqu va a crear una barra de navegacin para el sitio Web de Global.

Creacin de un smbolo de botn

La imagen y el texto de uno de los botones estn ya creados. Ahora va a convertir esta imagen en
un smbolo de botn.
1 En Fireworks, seleccione la imagen del botn (con el rtulo BUTTON TEXT) en el ngulo
superior izquierdo del documento.
2 Elija Modificar > Smbolo > Convertir en smbolo.
Se abre el cuadro de dilogo Propiedades de smbolo.
3 Escriba My Button en el cuadro de texto Nombre, elija Botn como tipo de smbolo y haga clic
en Aceptar.

Sobre la imagen del botn aparece una divisin y, a la izquierda de sta, un icono de tecla de
mtodo abreviado. Indica que la seleccin en el espacio de trabajo es una instancia del smbolo
recin creado. Los smbolos son como copias maestras de las imgenes. Cuando se cambia un
smbolo, todas las instancias de ese smbolo en el documento cambian automticamente. Los
smbolos residen en la biblioteca.

10 Tutorial bsico de diseo Web

 4 Si el panel Biblioteca est minimizado o no est visible, haga clic en la flecha de ampliacin del
grupo de paneles Activos y haga clic en la ficha Biblioteca, o elija Ventana > Biblioteca.
El smbolo aparece en la lista del panel Biblioteca.

Creacin de estados del botn

Ahora va a crear varios estados para el smbolo de botn. Los estados de botn son los diferentes
modos en que aparece un botn cuando el puntero se desplaza sobre l o cuando se hace clic en l
en un navegador Web.
1 Haga doble clic en la instancia de botn creada.
Sugerencia: tambin puede hacer doble clic en la vista previa del botn en el panel Biblioteca o
en el icono de smbolo que se encuentra junto a l en la lista de smbolos del panel Biblioteca.

Se abre el editor de botones con la imagen del botn abierta en el rea de trabajo.

2 Haga clic en las fichas de la parte superior del editor de botones.

Las primeras cuatro fichas representan los estados del botn. La ltima, rea Activa, representa
el rea activa del botn, es decir, donde debe hacer clic o mover el ratn el usuario para activar
los estados del botn. El rea activa tambin es el rea intercambiada del botn, es decir, el rea
que cambia con cada estado del botn. Actualmente no hay estados asociados al smbolo de
botn salvo el estado Arriba, que es el estado del botn antes de que el ratn pase o haga clic
sobre l.

Creacin y edicin de botones para generar una barra de navegacin 11

 3 Haga clic en la ficha Sobre de la parte superior del editor de botones y despus en el botn
Copiar grfico Arriba.
La imagen del botn se copia de la ficha Arriba. El estado Sobre de un botn es su aspecto
cuando el puntero pasa sobre l. Para que el usuario reciba informacin visual, va a cambiar el
color del rectngulo sobre el que aparece el texto.
4 Seleccione el rectngulo. Cercirese de seleccionar el rectngulo y no el texto; si no est seguro
de ello, compruebe en el panel Capas qu ha seleccionado.
5 Haga clic en el cuadro de color de relleno del Inspector de propiedades y elija el color negro.
Ahora el rectngulo es negro.
6 Haga clic en la ficha Abajo del editor de botones y despus en el botn Copiar grfico Sobre.
La imagen del botn se copia de la ficha Sobre. El estado Abajo de un botn es su aspecto
cuando el usuario hace clic sobre l. Esta vez no va a cambiar el color del rectngulo; lo dejar
tal cual est.
7 Haga clic en Listo en el editor de botones para aplicar los cambios al smbolo de botn.
8 Haga clic en el botn Vista previa de la ventana de documento y compruebe los estados del
botn. Desactive las divisiones si es necesario. Cuando finalice, haga clic en el botn Original y
vuelva a activar las divisiones.

Creacin de varias instancias del botn

Ahora va a crear ms instancias del smbolo de botn.
1 Seleccione el botn en el espacio de trabajo si no est ya seleccionado.
2 Elija Edicin > Clonar.
Sobre el botn original aparece una nueva instancia de botn.
3 Mantenga pulsada la tecla Mays mientras pulsa repetidamente la tecla de flecha derecha para
desplazar la nueva instancia hacia la derecha.
De este modo, la instancia se desplaza a incrementos de 10 pxeles. Si es necesario, utilice
nicamente las teclas de flecha para desplazar la seleccin pxel a pxel. Coloque la instancia
inmediatamente a la derecha de la instancia original, sin que se solapen, como se muestra en la
siguiente ilustracin.

4 Clone dos o ms instancias del botn y coloque cada una a la derecha de la anterior.
Sugerencia: como mtodo abreviado, pulse Alt (Windows) u Opcin (Macintosh) mientras
arrastra la instancia seleccionada con el puntero para copiarla. Despus de colocar la nueva
instancia inmediatamente a la derecha de la instancia anterior, elija Edicin > Repetir Duplicar para
crear y colocar automticamente otra copia de la instancia.

12 Tutorial bsico de diseo Web

Cambio del texto de las instancias del botn
Una vez creados todos los botones de la barra de navegacin, es preciso introducir en cada uno de
ellos un texto propio. El texto de un botn puede cambiarse fcilmente con el Inspector de
propiedades.
1 Seleccione la instancia de botn del extremo izquierdo.
Sus propiedades aparecen en el Inspector de propiedades. A excepcin del men emergente
Configuracin de exportacin, estas propiedades se aplican nicamente a la instancia
seleccionada. Si introduce cambios aqu, el smbolo de botn original guardado en el panel
Biblioteca no se ver afectado.

2 En el Inspector de propiedades, sustituya el texto en el cuadro de texto por HOME en

maysculas. A continuacin pulse Intro.
El texto del botn cambia para reflejar la modificacin.

3 Cambie el texto de los tres botones restantes por VEHICLES, RATES y CONTACT US
respectivamente.

Asignacin de valores URL a los botones

A continuacin va a asignar un vnculo o valor URL nico a cada instancia de botn. Un valor
URL (Uniform Resource Locator) es una direccin o posicin de una pgina en la Web. Con el
Inspector de propiedades es fcil asignar valores URL a los botones.
1 Seleccione la instancia de botn con el rtulo Home.
2 Introduzca index.htm en el cuadro de texto Vnculo del Inspector de propiedades.

Al hacer clic en el botn Home en un navegador Web, se le dirigir a una pgina llamada
index.htm. A medida que avance con el tutorial descubrir la razn por la que ha vinculado el
botn Home a esta pgina.
3 Seleccione la instancia de botn Vehicles e introduzca su valor URL favorito en el cuadro de
texto Vnculo del Inspector de propiedades.

Creacin y edicin de botones para generar una barra de navegacin 13

 En este tutorial se puede utilizar cualquier valor URL. Si estuviese creando un sitio Web real,
introducira el valor URL al que se dirigira el botn Vehicles.
Nota: cercirese de introducir el valor URL de un sitio Web real para poder comprobar los
vnculos de los botones ms tarde.

4 Asigne un valor URL a cada una de las instancias del botn restantes. Una vez ms, sirve
cualquier URL.
5 Elija Archivo > Vista previa en el navegador > Vista previa en [el navegador que prefiera]. Para
comprobar los vnculos de los botones, es preciso abrir la vista previa del documento en un
navegador.
Nota: si su navegador no figura en la lista, primero debe seleccionar uno mediante Archivo > Vista
previa en el navegador > Establecer navegador principal.

Cuando el documento se abra en el navegador, compruebe los botones creados. A excepcin

del botn Home, que remite a un archivo todava inexistente, cada botn debe acceder al
vnculo especificado en Fireworks.

Edicin del smbolo de botn

A continuacin modificar el smbolo original del botn. Los cambios que lleve a cabo se
aplicarn automticamente a todas las instancias de un botn en su barra de navegacin.
Quiz se pregunte cul es el aspecto del smbolo original ahora que ha modificado el texto en
varias de sus instancias.
1 Haga doble clic en cualquiera de las instancias del botn en el espacio de trabajo.
El editor de botones se abre con el smbolo y texto originales del botn que aparece en el
espacio de trabajo. El smbolo original del botn an no se ha modificado y muestra el texto
original.
Cuando cambi el texto de cada botn en el espacio de trabajo simplemente edit las instancias
del botn. Si aqu modifica el aspecto del rectngulo o el texto, editar el smbolo original, por
lo que los cambios se reflejarn en todas las instancias del espacio de trabajo.
2 Haga clic en la ficha Sobre.
3 Seleccione el rectngulo negro.
4 Haga clic en el cuadro de color de relleno del Inspector de propiedades e introduzca FF6633
como el valor del color. Pulse Intro para aplicar el cambio de color.
Ahora el rectngulo es naranja.
5 Haga clic en Listo en el editor de botones para aplicar el cambio al smbolo de botn.
6 Haga clic en el botn Vista previa de la ventana de documento y compruebe los botones.
Ahora el estado Sobre de cada botn es naranja. Slo ha cambiado el smbolo de botn, pero el
cambio se ha aplicado a todas las instancias del botn en la barra de navegacin.
7 Haga clic en el botn Original y, a continuacin, haga doble clic en cualquier instancia de botn
en el espacio de trabajo. Esta vez va a cambiar el texto del smbolo de botn.

14 Tutorial bsico de diseo Web

 8 Seleccione el texto del botn en el editor de botones y elija Arial como fuente en el Inspector de
propiedades. Haga lo mismo con cada estado del botn.

9 Haga doble clic en el bloque de texto del editor de botones y elimine la palabra BUTTON.

10 Haga clic en cualquier punto dentro del espacio de trabajo que no sea el bloque de texto para
anular la seleccin.
11 Haga clic en S en el cuadro de mensaje que pregunta si desea cambiar el texto en los dems
estados del botn.
Examine los diversos estados del botn en el editor de botones. Los cambios de texto de un
estado se reflejan en todos los dems. Compare este cambio con el cambio de fuente; en aquel
caso tuvo que introducir el cambio en cada estado. Se debe a que es posible aplicar atributos
diferentes de texto y grfico a cada estado de un botn. Esto es til, por ejemplo, si desea que el
color del texto cambie cuando el usuario desplace el ratn sobre un botn.
12 Haga clic en Listo para salir del editor de botones.
La fuente de cada instancia del botn cambia para reflejar la nueva seleccin de fuente, pero el
texto sigue siendo el mismo. Las instancias de botn slo reflejan los cambios introducidos en
el aspecto grfico de un smbolo de botn, incluidos los atributos de texto, pero no los cambios
realizados en el texto propiamente dicho.
Los smbolos de botn permiten cambiar con rapidez el aspecto grfico de todas las instancias
de un botn en una barra de navegacin y a la vez conservar el texto propio de cada instancia.

Creacin y edicin de un men emergente

Un men emergente es el men que aparece al desplazar el puntero sobre una imagen de
activacin en un navegador. Contiene una lista de opciones que conducen a otras pginas Web.
Ahora va a crear y editar un men emergente con la lista de aeropuertos donde opera Global.

Creacin de las opciones del men emergente

En primer lugar va a crear las opciones del men emergente con el editor de men emergente.
1 Seleccione la divisin que cubre la imagen de Worldwide Airports.
2 Elija Modificar > Men emergente > Aadir men emergente.

Creacin y edicin de un men emergente 15

 Se abre el editor de men emergente.

3 Haga doble clic en el cuadro de texto del ngulo superior izquierdo (slo Windows).
4 Escriba North America en el cuadro de texto y pulse Intro.
El siguiente cuadro de texto se resalta para que introduzca otra opcin.

5 Escriba Europe y pulse Intro.

6 Cree tres entradas ms con Africa, Middle East y Asia/Pacific.

7 Haga doble clic en el cuadro de texto Vnculo de la entrada North America.

8 Introduzca un valor URL cualquiera que funcione y pulse Intro.

16 Tutorial bsico de diseo Web

 En este tutorial vale cualquier valor URL. Asegrese de que el valor URL funcione para que
despus sea posible comprobar los vnculos.

9 Introduzca los valores URL de las dems entradas.

Nota: en la parte inferior de la lista de entradas del editor de men emergente siempre queda una
lnea en blanco. Sirve para aadir entradas nuevas sin necesidad de hacer clic en el botn Aadir
men.

10 Haga clic en Listo para cerrar el Editor de mens emergentes.

En el espacio de trabajo, junto a la divisin aparece el contorno del men emergente.

11 Para comprobar el men emergente, elija Archivo > Vista previa en el navegador > Vista previa
en [el navegador que prefiera] para abrir la vista previa del documento en un navegador.
Nota: la vista previa de los mens emergentes debe abrirse en un navegador; no son visibles con
la ficha Vista previa de Fireworks.

Cuando el documento se abra en el navegador, desplace el puntero sobre la imagen de

Worldwide Airports. Aparece el men emergente que ha creado. Haga clic en todas las entradas
para comprobar que funcionan.

Personalizacin del men emergente

Ahora va a volver al editor de men emergente para modificar el aspecto del men emergente.
1 En Fireworks, haga doble clic en el contorno del men emergente.
Aparece el editor de men emergente con las entradas creadas.
2 Haga clic en el botn Siguiente.

Creacin y edicin de un men emergente 17

 Aparece la ficha Aspecto. Aqu es donde puede cambiar las fuentes y los colores utilizados en
mens emergentes.

3 Elija HTML como tipo de celda y Men vertical como alineacin.

4 Elija Verdana, Arial, Helvetica, sans-serif como fuente y 12 como tamao de fuente.
5 En la seccin Estado Arriba, defina el color del texto en negro si no est ya seleccionado.
Despus haga clic en el cuadro de color de celda. Si no aparece CCCCCC en el cuadro de texto
situado en la parte superior de la ventana emergente de color, introduzca CCCCCC y pulse
Intro.
Estos valores de color son los predeterminados en el editor de men emergente si nunca se ha
creado antes un men emergente. Una vez modificados estos colores, aparecern cada vez que
cree un men emergente hasta que elija otros.
6 En la seccin Estado Sobre, defina el color del texto en blanco si no est ya seleccionado y haga
clic en el cuadro de color de celda. Haga clic con el puntero de cuentagotas sobre el rectngulo
azul del lienzo que rodea la imagen de Worldwide Airports como se muestra a continuacin.

7 Haga clic en el botn Siguiente.

18 Tutorial bsico de diseo Web

 Aparece la ficha Avanzado. La ficha Avanzado permite cambiar varias propiedades de celda y
borde. Ahora va a aumentar la anchura de la celda para ensanchar el men emergente.

8 Elija Pxeles en el men emergente Anchura de celda.

As se activa el cuadro Anchura de celda.
9 Escriba 137 para la anchura de la celda.
10 Elija Automtico en el men emergente Altura de celda y haga clic en el botn Siguiente.

Creacin y edicin de un men emergente 19

 Aparece la ficha Posicin. Aqu es donde puede especificar la posicin de la pantalla donde
debe aparecer el men emergente. 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 Escriba 3 en los cuadros X e Y en Posicin del men y haga clic en Listo.

Nota: la posicin de un men emergente tambin puede cambiarse arrastrando su contorno por el
espacio de trabajo.

12 Visualice en un navegador la vista previa de los cambios introducidos en 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.

Edicin del men emergente

Ahora va a utilizar de nuevo el editor de men emergente para aadir otra entrada al men
emergente. Tambin cambiar el orden de las entradas y aadir un submen.
1 En Fireworks, haga doble clic en el contorno del men emergente.
2 Haga clic en la entrada Europe para seleccionarla.
3 Haga clic en el botn Aadir men situado sobre la lista de entradas.
Se inserta una lnea en blanco.

20 Tutorial bsico de diseo Web

4 Haga doble clic en el campo Texto de la nueva entrada y escriba Latin/South America. Haga
clic en cualquier punto fuera del campo Texto para aplicar la entrada.

Las Amricas no estn juntas en la lista.

5 Arrastre la entrada Latin/South America 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 Seleccione la entrada North America y haga clic en el botn Aadir men.

7 Haga doble clic en el campo Texto de la nueva entrada y escriba United States. A continuacin,
haga clic en cualquier punto fuera de los campos de entrada. Tenga cuidado de no seleccionar
otra entrada.
8 Seleccione la entrada United States si no est ya seleccionada y haga clic en el botn Sangrar
men.
La entrada se sangra debajo de North America.

9 Haga clic otra vez en el botn Aadir men y cree una nueva entrada para Canada.

Creacin y edicin de un men emergente 21

 Acaba de crear un submen que aparecer cuando desplace el puntero sobre la entrada North
America en un navegador.

10 Asigne valores URL a todas las entradas nuevas. Tambin puede eliminar el vnculo de North
America, porque los usuarios elegirn opciones en el submen.
11 Haga clic en Listo para cerrar el editor de men emergente y despus visualice los cambios del
men emergente en un navegador.

Optimizacin del documento

El documento est casi listo para la Web. Lo nico que falta antes de exportarlo es optimizarlo.
Antes de exportar un documento de Fireworks, primero siempre hay que optimizarlo. La
optimizacin es garanta de que los elementos grficos se exportarn con el mejor equilibrio
posible entre compresin y calidad.
Cuando en un mismo documento hay diferentes tipos de elementos grficos, es recomendable
elegir el formato de archivo y el ajuste de compresin ms adecuados para cada uno. La pgina
Web de Global est compuesta por varios elementos: mapas de bits, objetos vectoriales y texto.
1 Si el panel Optimizar est minimizado o no est visible, haga clic en su flecha de ampliacin o
elija Ventana > Optimizar.

Fireworks elige GIF como formato de archivo de exportacin predeterminado y Adaptable

Websnap como paleta de colores predeterminada. La mayora de los elementos grficos de la
pgina Web de Global Rental Cars quedarn bien con estos parmetros. Sin embargo, la
imagen de mapa de bits de Vintage contiene una fotografa y un degradado. A causa de sus
complejas variaciones de color, es mejor exportarla en otro formato.

22 Tutorial bsico de diseo Web

2 Haga clic en el botn 2 copias de la ventana de documento.

El botn 2 copias permite ver los resultados de los parmetros de optimizacin y compararlos
con el original. A estas alturas ya habr observado el solapamiento de divisin blanco que se
produce al visualizar con vista previa. El solapamiento permite enfocar nicamente el rea que
va a optimizarse.
3 Haga clic en la divisin de la imagen de Vintage en la vista previa de la derecha.
El solapamiento de divisin desaparece para que pueda verse la imagen que hay debajo de la
divisin. En la parte inferior de la vista previa se indica el formato de archivo de exportacin de
la divisin seleccionada, as como el tamao previsto de dicho archivo y el tiempo que se
tardar en descargar el elemento grfico de la Web.

Sugerencia: utilice la herramienta Mano de la seccin Ver del panel Herramientas para ver las
partes de la imagen que no estn visibles.

4 Haga clic en el botn Ocultar divisiones y zonas interactivas de la seccin Web del panel
Herramientas para ocultar las divisiones momentneamente.
De este modo podr comparar la vista previa con el original y ver la diferencia entre ambas
imgenes. La vista previa de la derecha tiene bandas de degradado.
5 Vuelva a activar las divisiones y haga clic en la imagen de Vintage con la herramienta Puntero.

Optimizacin del documento 23

 6 En el panel Optimizar, elija JPEG - Archivo ms pequeo en el men emergente Configuracin.

Ahora las bandas de degradado han desaparecido y el tamao del archivo ha disminuido
notablemente. Se debe a que las fotografas y las imgenes con complejas variaciones de color se
optimizan y se comprimen mejor en formato JPEG que en formato GIF.
Ahora que el tamao de archivo ha decrecido, la imagen est borrosa.

7 Para mejorar el aspecto del mapa de bits, arrastre el deslizador Calidad del panel Optimizar hasta
77 y ajuste la opcin Suavizado en 0.
El mapa de bits est mucho ms claro, pero el tamao del archivo tambin ha aumentado. No
obstante, sigue siendo mejor opcin que cuando la imagen estaba optimizada como archivo
GIF.
8 Haga clic en el botn Original para volver a la vista normal.

24 Tutorial bsico de diseo Web

Exportacin de HTML
HTML, o HyperText Markup Language, es el mtodo principal utilizado en Internet para crear y
mostrar pginas Web. No es necesario comprender HTML para utilizar Fireworks, pero es til
recordar que las divisiones de Fireworks se convierten en celdas de una tabla HTML cuando se
exportan.
Ahora va a exportar y visualizar el documento finalizado en un navegador Web. Tambin
examinar el cdigo HTML que exporta Fireworks.

Definicin de las preferencias en HTML

Antes de exportar el documento, debe definir las preferencias de exportacin en HTML.
1 Elija Archivo > Configuracin de HTML.
Se abre el cuadro de dilogo Configuracin de HTML. Las opciones que defina en este cuadro
de dilogo afectarn a todos los documentos que cree con Fireworks en el futuro, excepto a las
opciones de la ficha Especfico del documento.

2 En la ficha General, elija un estilo de HTML.

Si utiliza un editor de HTML como Macromedia Dreamweaver o Microsoft FrontPage, eljalo
en el men emergente. De este modo podr abrir y editar fcilmente el archivo exportado en
ese editor de HTML. Si no utiliza un editor de HTML o utiliza uno que no est en la lista,
elija HTML genrico.
3 Elija .htm como extensin de archivo.
4 Haga clic en la ficha Tabla.

Exportacin de HTML 25
 La ficha Tabla permite cambiar las propiedades de las tablas HTML.

5 En el men emergente Espacio con, elija Espaciador transparente de 1 pxel.

Cuando se elige esta opcin, Fireworks exporta un archivo grfico denominado spacer.gif, que
es una imagen transparente de 1 pxel. Los diseadores Web utilizan espaciadores como ayuda
para crear el formato de pgina. Los espaciadores mantienen abiertas las celdas vacas de las
tablas HTML. Si no los utiliza, las celdas vacas de las tablas HTML se contraen, alterando as
el formato deseado para la pgina. Podr ver el archivo spacer.gif cuando visualice los archivos
exportados.
No es necesario que comprenda los espaciadores, pero es prctico que conozca esta opcin por
si desea utilizarla en el futuro.
6 Haga clic en la ficha Especfico del documento.

26 Tutorial bsico de diseo Web

 La ficha Especfico del documento permite elegir varias preferencias para cada documento,
incluida una convencin personalizada de asignacin de nombre para los archivos exportados.
Recuerde que las opciones que defina aqu slo se aplicarn al documento de Fireworks actual.
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.

7 Haga clic en Aceptar para aceptar los parmetros de la ficha Especfico del documento y cerrar
el cuadro de dilogo Configuracin de HTML.

Exportacin del documento a formato HTML

Ahora el documento est listo para exportar.
1 Seleccione Archivo > Exportar.
Se abre el cuadro de dilogo Exportar.

2 En el cuadro de dilogo, desplcese a la carpeta Tutorial2/Export.

3 Compruebe que HTML e imgenes est seleccionado como tipo de archivo e introduzca
index.htm como nombre de archivo. Asignar el nombre index.htm a la pgina principal es una
convencin habitual en la Web. Incluso muchos navegadores muestran automticamente la
pgina index.htm cuando un valor URL indica un lugar y no un nombre de pgina.
Recuerde que en este tutorial asign al botn Home el valor URL index.htm. Por ahora slo
existe una pgina en el sitio Web de Global, por lo que no tiene mucho sentido vincular esta
pgina a s misma. Pero si en el futuro crea ms pginas para este sitio, podr utilizar esta barra
de navegacin en todas sus pginas, lo que proporcionar a los usuarios un mtodo de
desplazamiento uniforme.
4 Compruebe que en el men emergente HTML est elegida la opcin Exportar Archivo HTML
y que en el men emergente Divisiones est seleccionada la opcin Exportar divisiones.

Exportacin de HTML 27
 5 Elija las siguientes opciones y deje las dems sin seleccionar:
Incluir reas sin divisiones
Colocar imgenes en subcarpeta
Cuando se elige esta opcin, Fireworks permite elegir una carpeta en la que almacenar los
archivos grficos exportados. Si an no existe tal carpeta, Fireworks la crea automticamente. Si
no elige una carpeta, Fireworks selecciona de forma predeterminada una carpeta llamada
images. En este tutorial, acepte el valor predeterminado.
6 Haga clic en Guardar.
Los archivos se exportan a la ubicacin especificada.
7 Elija Archivo > Guardar para almacenar su archivo con formato Grficos de red porttiles de
Fireworks (PNG).

Comprobacin del archivo finalizado

Una vez exportados los archivos, ha llegado el momento de comprobar el resultado.

Visualizacin de la lista de archivos exportados

En primer lugar va a examinar la lista de archivos que Fireworks ha exportado. Los nuevos
archivos creados durante el proceso de exportacin aparecen en la carpeta Export.
1 En el escritorio, desplcese a la carpeta Tutorial2/Export y brala.
Fireworks cre ah un archivo HTML llamado index.htm. Es la pgina inicial del sitio Web de
Global. Tambin ha creado un archivo denominado mm_menu.js, que contiene el cdigo
necesario para mostrar mens emergentes.

2 Abra la subcarpeta de imgenes.

Fireworks tambin ha exportado archivos grficos de todos los trabajos realizados. Cada
divisin de Fireworks se exporta como un archivo grfico completamente independiente. Hay
varios archivos GIF y un archivo JPEG. El archivo JPEG es la imagen de mapa de bits que ha
optimizado antes. El archivo denominado spacer.gif es el resultado de la opcin de espaciador
seleccionada en el cuadro de dilogo Configuracin de HTML que se utilizar como ayuda
para crear el formato de pgina.

28 Tutorial bsico de diseo Web

Visualizacin del archivo HTML de Fireworks en un navegador
Una vez examinados los archivos exportados, puede comprobar la pgina Web en un navegador.
1 En la carpeta Export, arrastre el archivo index.htm a un navegador Web abierto.
2 En el navegador, haga clic en los botones aadidos para comprobar los vnculos y despus vuelva
al archivo index.htm.
3 Pruebe las otras funciones que ha incluido.
4 La mayora de los navegadores Web permiten ver el cdigo original con un comando similar a
Ver > Cdigo fuente. Localice y ejecute el comando que permite ver el cdigo.

5 Desplcese por el cdigo. Si conoce el lenguaje HTML y JavaScript, reconocer el cdigo que
Fireworks ha creado. Si no conoce estos lenguajes, apreciar que Fireworks no imponga ninguna
obligacin de aprenderlos.

Pasos siguientes
Ha llevado a cabo las tareas principales del flujo de trabajo de produccin para crear una pgina
Web en Fireworks. Ha aprendido a abrir un documento, a importar elementos grficos en l y a
dividirlo. Tambin ha creado un rollover de arrastrar y colocar, botones y un men emergente.
Finalmente, ha aprendido a optimizar y a exportar el documento terminado.
Si desea informacin ms detallada sobre las funciones tratadas en el tutorial y sobre otras
funciones de Fireworks, consulte el ndice del manual Utilizacin de Fireworks o busque en los
temas de Ayuda de Fireworks.

Pasos siguientes 29
30 Tutorial bsico de diseo Web