APERTURA DEL ARCHIVO DE ORIGEN

Una vez visto el archivo final.htm en el navegador, ya está todo listo para empezar.

1.- En Fireworks, debe elegir Archivo > Abrir.
2.- Acceder a la carpeta Tutorial2 en el disco duro. Desplazarse a Tutorial2/Start y abir
global.png.
Debe recordar que conforme vaya avanzando con el tutorial, deberá guardar regularmente el trabajo con Archivo >Guardar.

IMPORTACIÓN DE UN ELEMENTO GRÁFICO

Una vez que haya abierto el diseño inacabado de la página Web de Global, tiene que importar un elemento gráfico. Como ya ha estudiado el Tutorial básico de diseño gráfico deberá utilizar el archivo JPEG creado. Ahora si no lo ha estudiado todavía, deberá utilizará una imagen provista.

1.-Elegir Archivo > Importar y siga uno de estos procedimientos:
 Si ha estudiado el Tutorial básico de diseño gráfico, desplazarse a la carpeta Tutorial1/Export.
 En caso contrario, desplazarse a la carpeta Tutorial2/Assets.

2.- Seleccionar vintage.jpg y hacer clic en Abrir.

3.- Hacer clic en cualquier punto del área blanca y vacía del lienzo. La imagen aparece seleccionada.

4.- Arrastrar la imagen hasta colocarla como se muestra en el siguiente gráfico.

TUTORIAL BÁSICO DE DISEÑO WEB (FIREWORKS MX 2004) II

COPIA DE LA CARPETA

Antes de comenzar con nuestro II tutorial debemos copiar la carpeta Tutorial2 que hemos descargado para poder guardar los resultados del trabajo y así poder conservar los archivos originales por si otros usuarios utilizan el tutorial. Cabe mencionar que si estamos utilizando Windows, debemos asegurarnos de descomprimir los archivos que hemos descargado para este tutorial antes de continuar. En Macintosh, StuffIt Expander descomprime los archivos de manera automática

1.- Elegir la carpeta Tutorial2 que hemos descargado del sitio Web.

2.-Seguir uno de estos procedimientos:

 (Para Windows) Realizar una copia de la carpeta pulsando las teclas Control +C , luego
Control +V para poder pegar la copia en el escritorio.
 (Para Macintosh) Pulsar Comando +D para duplicar la carpeta.

3.- Debemos llamar a la nueva carpeta Tutorial2_Copy.

Visualización de la página Web finalizada

Podremos visualizar el archivo del tutorial finalizado para comprobar el aspecto final del proyecto
Después de exportarlo como archivo HTML.

1. Iniciar el navegador Web.

2. En nuestro disco duro, ubiquemos la carpeta Tutorial2 que hemos descargado del sitio Web y posicionémonos en la carpeta Tutorial2/Complete.
Cabe resaltar que de forma predeterminada en algunas versiones de Microsoft Windows ocultan la extensión de los tipos de archivos conocidos. Si no hemos modificado este parámetro previamente, los archivos de la carpeta Complete aparecerán sin extensión. Cuando trabajamos con gráficos y páginas Web es mejor ver las extensiones de archivo. Para mayor información sobre cómo activar de nuevo las extensiones de los archivos, revisar la Ayuda de Windows.

3. Seleccionar el archivo final.htm y después arrastrarlo a la ventana abierta del navegador.
En este tutorial terminaremos la versión parcial de esta página para Global (empresa de alquiler de coches).

4. Desplace el cursor por la imagen de Vintage grande. Podemos apreciar que cuando el cursor se desplaza por la imagen de Vintage, otra imagen de la página cambia. A esto se le denomina rollover desunido.

5. Desplacemos el cursor por la barra de navegación que recorre la parte superior de la página Web. Como vemos, los botones cambian a medida que el cursor pasa sobre ellos. Haga clic en el botón Rates para comprobar el vínculo. Este vínculo conduce a la página de Fireworks en www.macromedia.com/es/. Sin embargo, en el tutorial tendremos que introducir nuestra propia URL para éste y otros elementos.

6. Utilizar el botón Atrás del navegador para poder volver a la página final.htm.

7. Desplazar cursor por la imagen de Worldwide Airports. Aparecerá un menú emergente.
Desplacemos el cursor por todas las opciones del menú, incluida la primera, que también contiene un submenú.

8. Hacer clic en United States para poder comprobar el vínculo y regresar a la página final.htm.

9. Después de ver esta página Web, puede cerrarla o dejarla abierta para consultarla mientras estudiamos el tutorial.

Cabe resaltar que la carpeta Complete además incluye el documento de Fireworks utilizado para generar el archivo HTML. Para poder obsérvalo, haga doble clic sobre final.png.

TUTORIAL BÁSICO DE DISEÑO WEB (FIREWORKS MX 2004) I

En este primer tutorial describiremos las tareas básicas de diseño de gráficos Web e interactividad con Macromedia Fireworks MX 2004. Este tutorial mostrara el flujo de trabajo habitual en Fireworks para diseñar una página web. Aprenderemos lo siguiente:
 Copiar la carpeta Tutorial2
 Visualizar la página Web finalizada
 Abrir el archivo de origen
 Importar de un elemento gráfico
 División del documento
 Creación de un rollover (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
 Comprobar el archivo finalizado

Conocimientos necesarios
Para comprender este tutorial tenemos que estar familiarizado con el diseño gráfico en Fireworks u otras aplicaciones de imágenes de mapa de bits o vectoriales. Concretamente debemos saber realizar lo siguiente en Fireworks:
 Almacenar documentos
 Seleccionar objetos
 Editar las propiedades de los objetos
 Aperturar y utilizar paneles
 Utilizar capas y objetos
 Crear y editar texto
 Exportar imágenes