Tutoriales desarrollo web

1
Tutorial básico de diseño Web
Este tutorial describe las tareas básicas de diseño de gráficos Web e interactividad con Macromedia
Fireworks MX 2004. Ayuda a obtener experiencia práctica en la aplicación de gráficos Web más
utilizada del mercado y a aprender con ello conceptos básicos de diseño Web.
Contenido
Con este tutorial reproducirá el flujo de trabajo habitual en Fireworks para diseñar una página
Web. Aprenderá lo siguiente:
• Copia de la carpeta Tutorial2
• Visualización de la página Web finalizada
• Apertura del archivo de origen
• Importación de un elemento gráfico
• División del documento
• Creación de un rollover de arrastrar y colocar
• Creación y edición de botones para generar una barra de navegación
• Creación y edición de un menú emergente
• Optimización del documento
• Exportación de HTML
• Comprobación del archivo finalizado
2 Tutorial básico de diseño Web
Conocimientos necesarios
Para estudiar este tutorial hace falta estar familiarizado con el diseño gráfico en Fireworks u otras
aplicaciones de imágenes de mapa de bits o vectoriales. Debe poseer los conocimientos básicos
descritos en el “Tutorial básico de diseño gráfico” de Fireworks. En concreto, ha de saber realizar
las siguientes tareas en Fireworks:
• Almacenamiento de documentos
• Selección de objetos
• Edición de las propiedades de los objetos
• Apertura y utilización de paneles
• Utilización de capas y objetos
• Creación y edición de texto
• Exportación de imágenes
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
más adelante.
Nota: si está utilizando Windows, asegúrese de descomprimir los archivos que ha descargado para
este tutorial antes de continuar. (En Macintosh, StuffIt Expander descomprime los archivos
automáticamente.)
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 continuación,
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.
Visualización de la página Web finalizada
A continuación verá el archivo de tutorial terminado para comprobar el aspecto final del proyecto
después de exportarlo como archivo HTML.
1 Inicie el navegador Web.
2 En el disco duro, desplácese a la carpeta Tutorial2 que ha descargado del sitio Web de
Macromedia y sitúese en la carpeta Tutorial2/Complete.
Nota: de forma predeterminada, algunas versiones de Microsoft Windows ocultan la extensión de
los tipos de archivos conocidos. Si no ha modificado este parámetro, los archivos de la carpeta
Complete aparecerán sin extensión. Cuando se trata de gráficos y páginas Web, es mejor ver las
extensiones de archivo. Para información sobre cómo activar de nuevo las extensiones de los
archivos, véase la Ayuda de Windows.
3 Seleccione el archivo final.htm y arrástrelo a la ventana abierta del navegador.
En este tutorial terminará la versión parcial de esta página para Global, una empresa de alquiler
de coches.
4 Desplace el puntero por la imagen de Vintage grande.
Importación de un elemento gráfico 3
Cuando el puntero se desplaza por la imagen de Vintage, otra imagen de la página cambia. A
esto se le llama rollover desunido.
5 Desplace el puntero por la barra de navegación que recorre la parte superior de la página Web.
Los botones cambian a medida que el puntero pasa sobre ellos. Haga clic en el botón Rates para
comprobar el vínculo.
El vínculo conduce a la página de Fireworks en www.macromedia.com/es/. Sin embargo, a lo
largo del tutorial tendrá que introducir su propia dirección URL para éste y otros elementos.
6 Utilice el botón Atrás del navegador para volver a la página 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 vínculo y regrese a la página final.htm.
9 Después de ver la página Web, puede cerrarla o dejarla abierta para consultarla mientras estudia
el tutorial.
Nota: la carpeta Complete también incluye el documento de Fireworks utilizado para generar el
archivo HTML. Para verlo, haga doble clic sobre final.png.
Apertura del archivo de origen
Después de ver el archivo final.htm en el navegador, ya está preparado para empezar.
1 En Fireworks, elija Archivo > Abrir.
2 Desplácese a la carpeta Tutorial2 en el disco duro. Desplácese a Tutorial2/Start y abra
global.png.
Nota: conforme avance con el tutorial, recuerde guardar regularmente el trabajo con Archivo >
Guardar.
Importación de un elemento gráfico
Una vez abierto el diseño inacabado de la página Web de Global, va a importar un elemento
gráfico.
Si ya ha estudiado el Tutorial básico de diseño gráfico, 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 básico de diseño gráfico, desplácese a la carpeta Tutorial1/
Export.
■ En caso contrario, desplácese a la carpeta Tutorial2/Assets.
2 Seleccione vintage.jpg y haga clic en Abrir.
3 Haga clic en cualquier punto del área blanca y vacía del lienzo.
La imagen aparece seleccionada.
4 Tutorial básico de diseño Web
4 Arrastre la imagen hasta colocarla como se muestra en la siguiente ilustración.
División del documento
Los diseñadores Web utilizan un proceso llamado división para cortar los documentos Web en
trozos pequeños por distintas razones. En la Web se descargan con más rapidez las imágenes
pequeñas, lo cual permite que los usuarios vayan viendo una página progresivamente en lugar de
esperar a que se descargue toda una imagen grande. Además, con la división es posible optimizar
las distintas partes del documento de forma diferente. La división también es necesaria para añadir
interactividad.
En esta sección va a crear divisiones para algunos elementos gráficos de la página Web. Después
les añadirá interactividad y ajustará las opciones de optimización y compresión.
1 Con la imagen de Vintage aún seleccionada, elija Edición > Insertar > División.
En la parte superior de la imagen se inserta una división. De forma predeterminada, las
divisiones se solapan en verde.
2 Haga clic en cualquier punto fuera de la división para anular su selección.
Las guías de división rojas definen la división e indican la anchura y altura del documento. Al
crear la división, Fireworks ha dividido automáticamente el resto del documento.
Nota: si las guías de división rojas no se muestran en pantalla, elija Ver > Guías de división.
3 Pulse la tecla Mayús mientras hace clic en las imágenes de Worldwide Airports y Great Weekend
Rates situadas a la izquierda del documento para seleccionarlas ambas a la vez.
División del documento 5
4 Elija Edición > Insertar > División. 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 imágenes seleccionadas. Cuando se añaden más divisiones,
cambia el formato de las demás divisiones automáticas del documento.
5 Haga clic en cualquier punto fuera de las divisiones para anular su selección.
Ahora hay un espacio entre la división de Vintage y la de Great Weekend Rates. Es una división
automática estrecha.
6 Coloque el puntero sobre la guía de división izquierda de la imagen de Vintage.
El puntero adopta la forma de movimiento de guía, que indica que es posible asir la división y
arrastrarla. Cuando se arrastra una guía de división, puede modificarse la forma de la división.
7 Elija Ver > Guías > Ajustar a guías para activar Ajustar a guías si aún no estuviese activado.
8 Arrastre la guía de división hacia la izquierda hasta que se ajuste a la guía de división derecha de
la imagen de Great Weekend Rates como se muestra en la siguiente ilustración.
9 Suelte el botón del ratón.
6 Tutorial básico de diseño Web
Ahora la división de Vintage se extiende hasta el borde de la división de Great Weekend Rates,
y se ha eliminado la pequeña división automática que había entre ellas. Las divisiones son como
las celdas de las tablas de una hoja de cálculo o un programa de tratamiento de texto. Cuando
se arrastran guías de división para cambiar el tamaño de una división, Fireworks cambia el
tamaño de las demás divisiones, del mismo modo que, cuando se arrastra el borde de una celda
en una tabla, cambia el tamaño de las demás celdas de la tabla. Si se arrastra una guía de
división sobre las demás divisiones automáticas e incluso más allá, las guías de división se
fusionan y desaparecen las divisiones automáticas innecesarias.
10 Si el panel Capas está minimizado o no está visible, haga clic en su flecha de ampliación 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.
Creación de un rollover de arrastrar y colocar
Una vez dividido el documento, va a añadirle 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 división que cubre la imagen de Vintage.
Creación de un rollover de arrastrar y colocar 7
El icono redondo del centro de la división se denomina símbolo de comportamiento. Permite
añadir comportamientos o interactividad a una división. Si ya está familiarizado con los
comportamientos de Macromedia Dreamweaver, reconocerá muchos comportamientos iguales
en Fireworks.
También pueden aplicarse comportamientos con el panel Comportamientos. En los casos de
interactividad simple, como puede ser el caso de los rollovers, es más rápido y sencillo aplicar
un comportamiento a través del tirador de comportamiento de la división.
2 Arrastre el símbolo de comportamiento a la división de Great Weekend Rates y suelte el botón
del ratón.
Desde el símbolo de comportamiento hasta la esquina de la división se extiende una línea azul
de comportamiento, y aparece el cuadro de diálogo Intercambiar imagen.
3 Asegúrese de que en el menú emergente Intercambiar imagen de está seleccionado Fotograma
2; haga clic en Aceptar.
Cuando el puntero se desplace por la división de Vintage en un navegador, una imagen de
Fotograma 2 reemplazará al elemento gráfico de Great Weekend Rates. La imagen de Vintage
se considera el activador del efecto de rollover, y la imagen que sustituye al elemento gráfico de
Great Weekend Rates es la imagen intercambiada.
Tirador de comportamiento
8 Tutorial básico de diseño Web
4 Si el panel Fotogramas está minimizado o no está visible, haga clic en la flecha de ampliación
del grupo de paneles Fotogramas y Historial y después en la ficha Fotogramas, o elija Ventana
> Fotogramas.
El panel Fotogramas indica los fotogramas disponibles en el documento actual. Actualmente
sólo hay un fotograma en el documento. El panel Fotogramas suele utilizarse para animación.
En el caso de rollovers, sirve para guardar imágenes intercambiadas.
5 Haga clic en el botón 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á vacío salvo por las divisiones insertadas.
En el panel Capas no se indica ningún 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 excepción 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 desplácese a la carpeta Tutorial2/Assets. Seleccione el archivo
denominado rates.gif y haga clic en Abrir.
Creación de un rollover de arrastrar y colocar 9
7 Coloque el puntero de inserción sobre la división 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
división.
8 Haga clic para insertar la imagen.
Aparece la imagen de Vintage Classic Rates.
9 Haga clic en el botón Vista previa de la parte superior de la ventana de documento y después en
el botón Ocultar divisiones y zonas interactivas de la sección 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 transición entre elementos gráficos no es
uniforme, ajuste la posición de la imagen intercambiada del Fotograma 2 en la vista Original. Para
obtener una colocación 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 opción Papel de cebolla si es necesario. Para obtener más información sobre estas
opciones, remítase al índice del manual Utilización de Fireworks o busque en los temas de Ayuda
de Fireworks.
10 Cuando finalice, haga clic en el botón Original de la parte superior de la ventana de documento
para recuperar la vista normal y haga clic en el botón 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 división como se indica en el paso 2, sólo ha de
arrastrarlo de vuelta a la misma división.
10 Tutorial básico de diseño Web
En general, los diseñadores Web añaden 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 sería deseable vincular las imágenes de Vintage y Rates a otras páginas
que proporcionaran más información. En este tutorial dejaremos el rollover desunido tal como
está. En la siguiente sección obtendrá la práctica necesaria para asociar vínculos a otros objetos
Web.
Creación y edición de botones para generar una barra de
navegación
Los botones son objetos Web que conducen a otras páginas Web. Su aspecto suele variar según el
movimiento del ratón u otras acciones del usuario, como un clic, a modo de indicador visual de
interactividad. Por ejemplo, un botón muestra un efecto de rollover diferente si se desplaza el
puntero sobre él o si se hace clic.
Una barra de navegación (o Bar Nav) es un conjunto de botones que aparece en una o varias
páginas de un sitio Web. Normalmente, todos los botones de una barra de navegación tienen el
mismo aspecto, salvo por el texto que contienen.
Aquí va a crear una barra de navegación para el sitio Web de Global.
Creación de un símbolo de botón
La imagen y el texto de uno de los botones están ya creados. Ahora va a convertir esta imagen en
un símbolo de botón.
1 En Fireworks, seleccione la imagen del botón (con el rótulo BUTTON TEXT) en el ángulo
superior izquierdo del documento.
2 Elija Modificar > Símbolo > Convertir en símbolo.
Se abre el cuadro de diálogo Propiedades de símbolo.
3 Escriba My Button en el cuadro de texto Nombre, elija Botón como tipo de símbolo y haga clic
en Aceptar.
Sobre la imagen del botón aparece una división y, a la izquierda de ésta, un icono de tecla de
método abreviado. Indica que la selección en el espacio de trabajo es una instancia del símbolo
recién creado. Los símbolos son como copias maestras de las imágenes. Cuando se cambia un
símbolo, todas las instancias de ese símbolo en el documento cambian automáticamente. Los
símbolos residen en la biblioteca.
Creación y edición de botones para generar una barra de navegación 11
4 Si el panel Biblioteca está minimizado o no está visible, haga clic en la flecha de ampliación del
grupo de paneles Activos y haga clic en la ficha Biblioteca, o elija Ventana > Biblioteca.
El símbolo aparece en la lista del panel Biblioteca.
Creación de estados del botón
Ahora va a crear varios estados para el símbolo de botón. Los estados de botón son los diferentes
modos en que aparece un botón 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 botón creada.
Sugerencia: también puede hacer doble clic en la vista previa del botón en el panel Biblioteca o
en el icono de símbolo que se encuentra junto a él en la lista de símbolos del panel Biblioteca.
Se abre el editor de botones con la imagen del botón 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 botón. La última, Área Activa, representa
el área activa del botón, es decir, donde debe hacer clic o mover el ratón el usuario para activar
los estados del botón. El área activa también es el área intercambiada del botón, es decir, el área
que cambia con cada estado del botón. Actualmente no hay estados asociados al símbolo de
botón salvo el estado Arriba, que es el estado del botón antes de que el ratón pase o haga clic
sobre él.
12 Tutorial básico de diseño Web
3 Haga clic en la ficha Sobre de la parte superior del editor de botones y después en el botón
Copiar gráfico Arriba.
La imagen del botón se copia de la ficha Arriba. El estado Sobre de un botón es su aspecto
cuando el puntero pasa sobre él. Para que el usuario reciba información visual, va a cambiar el
color del rectángulo sobre el que aparece el texto.
4 Seleccione el rectángulo. Cerciórese de seleccionar el rectángulo 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 rectángulo es negro.
6 Haga clic en la ficha Abajo del editor de botones y después en el botón Copiar gráfico Sobre.
La imagen del botón se copia de la ficha Sobre. El estado Abajo de un botón es su aspecto
cuando el usuario hace clic sobre él. Esta vez no va a cambiar el color del rectángulo; lo dejará
tal cual está.
7 Haga clic en Listo en el editor de botones para aplicar los cambios al símbolo de botón.
8 Haga clic en el botón Vista previa de la ventana de documento y compruebe los estados del
botón. Desactive las divisiones si es necesario. Cuando finalice, haga clic en el botón Original y
vuelva a activar las divisiones.
Creación de varias instancias del botón
Ahora va a crear más instancias del símbolo de botón.
1 Seleccione el botón en el espacio de trabajo si no está ya seleccionado.
2 Elija Edición > Clonar.
Sobre el botón original aparece una nueva instancia de botón.
3 Mantenga pulsada la tecla Mayús 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 píxeles. Si es necesario, utilice
únicamente las teclas de flecha para desplazar la selección píxel a píxel. Coloque la instancia
inmediatamente a la derecha de la instancia original, sin que se solapen, como se muestra en la
siguiente ilustración.
4 Clone dos o más instancias del botón y coloque cada una a la derecha de la anterior.
Sugerencia: como método abreviado, pulse Alt (Windows) u Opción (Macintosh) mientras
arrastra la instancia seleccionada con el puntero para copiarla. Después de colocar la nueva
instancia inmediatamente a la derecha de la instancia anterior, elija Edición > Repetir Duplicar para
crear y colocar automáticamente otra copia de la instancia.
Creación y edición de botones para generar una barra de navegación 13
Cambio del texto de las instancias del botón
Una vez creados todos los botones de la barra de navegación, es preciso introducir en cada uno de
ellos un texto propio. El texto de un botón puede cambiarse fácilmente con el Inspector de
propiedades.
1 Seleccione la instancia de botón del extremo izquierdo.
Sus propiedades aparecen en el Inspector de propiedades. A excepción del menú emergente
Configuración de exportación, estas propiedades se aplican únicamente a la instancia
seleccionada. Si introduce cambios aquí, el símbolo de botón 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
mayúsculas. A continuación pulse Intro.
El texto del botón cambia para reflejar la modificación.
3 Cambie el texto de los tres botones restantes por VEHICLES, RATES y CONTACT US
respectivamente.
Asignación de valores URL a los botones
A continuación va a asignar un vínculo o valor URL único a cada instancia de botón. Un valor
URL (Uniform Resource Locator) es una dirección o posición de una página en la Web. Con el
Inspector de propiedades es fácil asignar valores URL a los botones.
1 Seleccione la instancia de botón con el rótulo Home.
2 Introduzca index.htm en el cuadro de texto Vínculo del Inspector de propiedades.
Al hacer clic en el botón Home en un navegador Web, se le dirigirá a una página llamada
index.htm. A medida que avance con el tutorial descubrirá la razón por la que ha vinculado el
botón Home a esta página.
3 Seleccione la instancia de botón Vehicles e introduzca su valor URL favorito en el cuadro de
texto Vínculo del Inspector de propiedades.
14 Tutorial básico de diseño Web
En este tutorial se puede utilizar cualquier valor URL. Si estuviese creando un sitio Web real,
introduciría el valor URL al que se dirigiría el botón Vehicles.
Nota: cerciórese de introducir el valor URL de un sitio Web real para poder comprobar los
vínculos de los botones más tarde.
4 Asigne un valor URL a cada una de las instancias del botón restantes. Una vez más, sirve
cualquier URL.
5 Elija Archivo > Vista previa en el navegador > Vista previa en [el navegador que prefiera]. Para
comprobar los vínculos 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 excepción
del botón Home, que remite a un archivo todavía inexistente, cada botón debe acceder al
vínculo especificado en Fireworks.
Edición del símbolo de botón
A continuación modificará el símbolo original del botón. Los cambios que lleve a cabo se
aplicarán automáticamente a todas las instancias de un botón en su barra de navegación.
Quizá se pregunte cuál es el aspecto del símbolo original ahora que ha modificado el texto en
varias de sus instancias.
1 Haga doble clic en cualquiera de las instancias del botón en el espacio de trabajo.
El editor de botones se abre con el símbolo y texto originales del botón que aparece en el
espacio de trabajo. El símbolo original del botón aún no se ha modificado y muestra el texto
original.
Cuando cambió el texto de cada botón en el espacio de trabajo simplemente editó las instancias
del botón. Si aquí modifica el aspecto del rectángulo o el texto, editará el símbolo original, por
lo que los cambios se reflejarán en todas las instancias del espacio de trabajo.
2 Haga clic en la ficha Sobre.
3 Seleccione el rectángulo 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 rectángulo es naranja.
5 Haga clic en Listo en el editor de botones para aplicar el cambio al símbolo de botón.
6 Haga clic en el botón Vista previa de la ventana de documento y compruebe los botones.
Ahora el estado Sobre de cada botón es naranja. Sólo ha cambiado el símbolo de botón, pero el
cambio se ha aplicado a todas las instancias del botón en la barra de navegación.
7 Haga clic en el botón Original y, a continuación, haga doble clic en cualquier instancia de botón
en el espacio de trabajo. Esta vez va a cambiar el texto del símbolo de botón.
Creación y edición de un menú emergente 15
8 Seleccione el texto del botón en el editor de botones y elija Arial como fuente en el Inspector de
propiedades. Haga lo mismo con cada estado del botón.
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 selección.
11 Haga clic en Sí en el cuadro de mensaje que pregunta si desea cambiar el texto en los demás
estados del botón.
Examine los diversos estados del botón en el editor de botones. Los cambios de texto de un
estado se reflejan en todos los demás. 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 gráfico a cada estado de un botón. Esto es útil, por ejemplo, si desea que el
color del texto cambie cuando el usuario desplace el ratón sobre un botón.
12 Haga clic en Listo para salir del editor de botones.
La fuente de cada instancia del botón cambia para reflejar la nueva selección de fuente, pero el
texto sigue siendo el mismo. Las instancias de botón sólo reflejan los cambios introducidos en
el aspecto gráfico de un símbolo de botón, incluidos los atributos de texto, pero no los cambios
realizados en el texto propiamente dicho.
Los símbolos de botón permiten cambiar con rapidez el aspecto gráfico de todas las instancias
de un botón en una barra de navegación y a la vez conservar el texto propio de cada instancia.
Creación y edición de un menú emergente
Un menú emergente es el menú que aparece al desplazar el puntero sobre una imagen de
activación en un navegador. Contiene una lista de opciones que conducen a otras páginas Web.
Ahora va a crear y editar un menú emergente con la lista de aeropuertos donde opera Global.
Creación 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 división que cubre la imagen de Worldwide Airports.
2 Elija Modificar > Menú emergente > Añadir menú emergente.
16 Tutorial básico de diseño Web
Se abre el editor de menú emergente.
3 Haga doble clic en el cuadro de texto del ángulo superior izquierdo (sólo Windows).
4 Escriba North America en el cuadro de texto y pulse Intro.
El siguiente cuadro de texto se resalta para que introduzca otra opción.
5 Escriba Europe y pulse Intro.
6 Cree tres entradas más con Africa, Middle East y Asia/Pacific.
7 Haga doble clic en el cuadro de texto Vínculo de la entrada North America.
8 Introduzca un valor URL cualquiera que funcione y pulse Intro.
Creación y edición de un menú emergente 17
En este tutorial vale cualquier valor URL. Asegúrese de que el valor URL funcione para que
después se