Creando una Website con fireworks

[FUNDAMENTOS DE PROGRAMACION WEB] HTML

DOCENTE: Salinas Encinas, Aldo [email protected] Página 1

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

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

Observación

También podemos realizarlo colocando el nombre en la

ventana ejecutar.



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.



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.



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



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.



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.



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.



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.



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.



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



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:



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

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.



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.



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:



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:



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

Creando una Website con fireworks

Documents

Transcript of Creando una Website con fireworks