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

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.

Tutorial bsico de diseo Web

6 7

8 9

Cuando el puntero se desplaza por la imagen de Vintage, otra imagen de la pgina cambia. A esto se le llama rollover desunido. 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. Utilice el botn Atrs del navegador para volver a la pgina final.htm. 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. Haga clic en United States para comprobar el vnculo y regrese a la pgina final.htm. 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

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.

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

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.

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

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.

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

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

4 5 6

7 8

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. 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. Haga clic en el cuadro de color de relleno del Inspector de propiedades y elija el color negro. Ahora el rectngulo es negro. 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. Haga clic en Listo en el editor de botones para aplicar los cambios al smbolo de botn. 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.

2 3 4

5 6

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. Haga clic en la ficha Sobre. Seleccione el rectngulo negro. 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. Haga clic en Listo en el editor de botones para aplicar el cambio al smbolo de botn. 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. 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