PDF de programación - Tutorial básico de diseño Web

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

1

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.

2

Tutorial básico de diseño Web

■
■
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.

Importación de un elemento gráfico

3

■
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.

4

Tutorial básico de diseño Web

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.

División del documento

5

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 Vintag