[FUNDAMENTOS DE PROGRAMACION WEB] HTML

Capítulo MAQUETACIÓN
CON FIREWORKS CS5
Considerado por muchos diseñadores como el mejor editor de
gráficos para dispositivos tecnológicos y web, Adobe Fireworks
CS5 logra destacarse entre otros programas por su buen
desempeño y gran compatibilidad.

Es un programa muy útil, ya sea para crear pequeños botones o para lograr interfaces de usuario. Permite una
separación de imágenes indispensable para maquetación, una renderización de píxeles perfecta y excelentes
herramientas para el retoque de fotografías.

La dupla Fireworks y Dreamweaver es ideal, se pueden exportar ficheros HTML y retocar menús Javascript de manera
más fácil y rápida. El programa permite también exportar en PDF, crear interfaces para Adobe Air (una plataforma
para ejecutar aplicaciones sin un navegador) y guardar los proyectos como plantillas para poder compartirlos con
otros diseñadores y editarlos todas las veces que necesitemos.

Una de las características importantes es que habiendo realizado nuestros diseños ya sea en Adobe Photoshop CS5 o
Illustrator CS5 la suite nos permite cargar dichos trabajos desde Fireworks CS5 manteniendo por ejemplo las capas y
otras características que hay en el diseño original, entonces eso ayuda a que muchos diseñadores les permite crear
sus páginas y después poder usar Fireworks para maquetarlos, eso es lo que vamos a aprender en este capítulo.

¿Cómo ingresar a Fireworks CS5?

Bueno para poder ingresar a este programa que es parte de la suite de Adobe, podemos realizarlo buscando la ruta

Observación

También podemos realizarlo colocando el nombre en la

ventana ejecutar.

Mostrándose en cualquiera de los casos el siguiente logo el cual nos indica que está cargando el programa:

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 1

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Aquí se muestra nuestra ventana inicial de Fireworks, desde aquí trabajaremos nuestros diseños:

Como cargar un diseño en Fireworks CS5

Por ejemplo si su diseño esta realizado en Photoshop o Illustrator podemos simplemente abrirlo como si fuese
cualquiera de los programas mencionados anteriormente, en este caso se ha realizado el diseño en el mismo
Fireworks.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 2

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Creando una botonera para nuestra página Web

Una vez que tengamos nuestro diseño cargado en Fireworks, ahora viene la creación de una botonera, cabe
mencionar si deseamos que los botones sean diferentes, debemos crear botón por botón; en nuestro caso vamos a
crear un solo botón para toda nuestra botonera.

1.- Seleccionamos la imagen que será nuestro botón, si usted creo el diseño del botón a parte no hay problema
simplemente impórtelo a Fireworks (menú Archivo/importar), en cualquier caso seleccionaremos la imagen.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 3

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

2.- Convertiremos dicha imagen en símbolo botón, puede ser de dos maneras: mediante menú Modificar/ símbolo/
convertir en símbolo, o la otra forma simplemente pulsamos la tecla F8, en cualquier caso aparecerá el siguiente
mensaje

Note lo siguiente

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 4

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

3.- Ahora si deseamos editar nuestro botón, es decir, colocarle las respectivas animaciones según nuestro estado,
bastara hacer doble clic y nuestro ambiente de trabajo ha cambiado, pasando a editar botones, veamos:

4.- Los estados de un botón son:

 Estado Arriba, es el estado por defecto es decir el estado inicial que se mostrara al cargar nuestra página
Web.
 Estado Sobre, este estado se activa cuando pasamos el mouse por encima del botón y se regresa al estado
anterior cuando el mouse esta fuera del botón.
 Estado Abajo, dicho estado se activa cuando hemos presionado sobre dicho botón.
 Estado Sobre y Abajo, este estado se activa solo cuando el botón haya sido pulsado, es decir, si está siendo
utilizado y pasamos el mouse por encima de dicho botón.
 Estado Zona activa, en particular esta última opción solo sirve para definir que área nos servirá para vincular,
el tratamiento es similar a lo ya realizado en Dreamweaver al cual denominamos Zona interactiva.

Por ejemplo en nuestro ejercicio, tenemos el estado Arriba, le colocaremos un contorno nada más.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 5

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Ahora para editar el siguiente estado solo habrá que seleccionarlo.

Vamos a pulsar copiar grafico Arriba, y modificarlo, en este caso simplemente lo haremos un poco mas grande.

Así sucesivamente todos los estados, tenga en cuenta que no es obligatorio modificarlos todos, eso depende en
este caso de usted.

Por ejemplo en el estado Abajo, vamos a modificar el degradado, en el estado Sobre y Abajo, vamos a modificar un
poco el color, y el ultimo zona interactiva, no vamos a realizar nada.

Ahora para poder ver como quedo nuestro botón podemos presionar la tecla F12 para poder visualizarlo en un
navegador.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 6

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

5.- Crearemos ahora nuestra botonera, solo duplicaremos cada botón pulsando la tecla ALT y arrastrándolo

6.- Ahora nos falta colocar los nombres a cada uno de nuestros botones, para ello solo buscaremos crear una capa y
colocar allí los textos, tenga presente que como hemos creado nuestros botones a partir de uno de ellos solo
duplicándolo si modificamos alguno de ellos automáticamente se modificara los demás, por eso optaremos por crear
una capa, pero si en el caso suyo quisiera modificar cada botón debe crear uno por uno.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 7

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Veamos crearemos una capa y le colocaremos el nombre texto

Ahora debemos crear un mapa de bits que es justo donde se colocara los textos.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 8

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Procedemos a escribir los textos para nuestros botones con la herramienta texto :

Bueno hasta allí ya tenemos nuestra botonera de nuestra página Web, ahora para poder ver como ha quedado
nuestro diseño bastara hacer una prueba en el navegador, recordando era pulsar la tecla F12.

¿Nuestro ejemplo creado será una página Web?

Bueno la respuesta es NO, Adobe Fireworks nos ha ayudado a maquetarlo y a visualizarlo como tal, pero para que
genere un archivo HTML, debemos realizar un paso más, tenga presente que el archivo que tenemos es un archivo de
Fireworks por eso la extensión png.

Ahora para poder generar el archivo HTML, elegimos menú Archivo/Exportar, nos mostrara la siguiente ventana.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 9

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Una vez exportado se mostrara un archivo HTML y una carpeta con sus respectivas imágenes, si desea ver la
información por ejemplo puede abrirlo con Dreamweaver.

Creando una Website

Un sitio web es un conjunto de páginas web, típicamente comunes a
un dominio de Internet o subdominio en la World Wide Web en
Internet.

Adobe Fireworks tiene una manera muy sencilla de crear una

Website, de eso nos encargaremos en esta parte.

Primero se debe crear un diseño el cual servirá de página maestra

(plantilla)

Pasos a seguir:

1.- Abrir nuestro diseño creado ya sea en cualquier programa de diseño

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 10

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

2.- Vamos a definir sus enlaces o vínculos de cada botón, para ello trabajaremos en el panel de propiedades teniendo
presente que botón hemos seleccionado:

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 11

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Tenga presente que hemos escrito inicio.htm mas no inicio.html esto se debe a que Fireworks va a crear las páginas
con la extensión htm, pero eso no es problema si creamos nuestro enlace por ejemplo inicio.html o inicio.php,
inicio.aspx, etc. lo único que debemos hacer es renombrar la páginas creadas con la extensión requerida, pero en
nuestro caso vamos a evitarnos dicho problema escribiéndolas con la extensión htm, solo es por el motivo de dicho
material.
Al igual podemos también colocar el destino donde deseamos que se abra nuestra página, es decir, puede aplicar
todo lo aprendido en el capítulo de vínculos.

Se le sugiere que complete lo mismo con todos los botones.

Observación (importante)
Cuando escribamos el nombre de nuestras páginas
debemos tener presente las mayúsculas y minúsculas,
como también la extensión, y uno de los errores más
comunes es no digitar bien el nombre, por eso una
sugerencia después de haber escrito todos los enlaces
volver a revisar nuevamente la extensión y los
nombres.

3.- Ahora en Fireworks vamos abrir en panel páginas, sino lo ubica ir a menú ventana/paginas o simplemente pulsar
la tecla F5, en cualquiera de los casos se mostrara el siguiente panel.

4.- Definamos ahora la página maestra, dicha página nos servirá como plantilla, para ello haremos clic derecho en la
imagen que aparece en el panel páginas.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 12

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

La imagen cambiara y se mostrara así:

5.- Ahora ya estamos listos para crear el resto de páginas, vamos a crear nuestra primera página se le sugiere que
dichas páginas tengan el nombre de los botones para que sea más fácil organizarlos, como se mostraba en la
observación anterior hay que tener cuidado con colocar los nombres, ello debe ser igual a los colocados en los
vínculos, no colocar extensiones, ello se crear por defecto.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 13

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Note que al crear así estamos creando una nueva página denominada inicio.htm, entonces ahora haga los mismo
para el resto de las páginas, siguiendo el mismo procedimiento, quedando así:

6.- Para ver la diferencia entre una página y otra vamos a modificar cada una de ellas colocándole su respectivo
nombre, ahora ya depende de usted que desea modificar.

Para poder realizar modificar cada página solo debemos seleccionarlo del panel páginas, veamos:

De igual manera los siguientes botones, veamos:

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 14

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 15

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 16

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

7.- Finalmente ahora solo nos falta crear el archivo HTML, para ello solo debemos tener presente los pasos a seguir ya
que es uno de los errores que normalmente se equivocan, evitaremos esos errores siguiendo los siguientes pasos:

* Haga clic en cualquier parte fuera del diseño.

* Seleccione todas páginas realizadas.

* Ahora vaya al menú Archivo/Exportar, mostrándose la siguiente ventana:

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 17

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

8.- Haga clic en Guardar (Save) y ya está listo haga la prueba para que vea el resultado.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 18