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.