1) Abrir y cambiar color Lienzo.
2) Importar una imagen a FWks.
3) Insertar Pagina y crear texto.
4) Direccionar y guardar practica como archivo HTML.
Una breve introducción sobre Fireworks.
Diseñe páginas Web completas en el potente entorno gráfico de Fireworks y exporte en un paso los diseños basados en CSS compatibles con los estándares para la Web, junto con las hojas de estilos externas. Empiece con uno de los seis diseños más comunes e integre gráficos de primer plano y de fondo con la detección automática de margen y relleno.
Incluya símbolos HTML sofisticados en los diseños de Fireworks para especificar cabeceras, vínculos y propiedades de formato y obtener un control CSS preciso.
Abrir y cambiar color Lienzo
Para esto tendremos en cuenta, el primer pantallazo que nos ofrece este editor de página web, en el cual tenemos las herramientas de abrir un documento ya existente o un documento en blanco, recordando el formato de archivo de los documentos en Fireworks (PNG).
1. Imagen: Primer pantallazo Fireworks CS4
Posteriormente, al elegir la opción de documento de Fireworks (PNG), emergerá un cuadro de dialogo, el cual nos preguntara el tamaño del espacio de trabajo, en este caso para Fireworks es llamado Lienzo, además de esto también podemos escoger el color de lienzo.
2. Imagen: Se recomienda las medidas que aparecen en este ejemplo (1200 x 650)
Además debes tener en cuenta la resolución del lienzo que se toma en pixeles por pulgada, recordando que un pixel es un cuadro de color que compone una imagen y entre mas pixeles por pulgada, el archivo de imagen será mucho mas pesado. Necesitamos un peso medio para nuestro archivo ya que entre mas pesado nuestro diseño tendremos problemas de carga de archivo y bloqueos del editor.
Después de determinar los parámetros de nuestro lienzo, visualizamos toda la composición grafica del editor de paginas web (Lienzo, herramientas, opciones barras de herramientas,…etc.), Podemos minimizar la visualización del lienzo a un 50% para un mejor trabajo y ver los limites en los que podemos trabajar.
3. Imagen: Lienzo al 50%
Encontramos la herramienta con la cual podemos minimizar la visualización en el lado derecho del lienzo, las herramientas de una forma de columna vertical.
4. Imagen: Herramientas de selección.
5. Imagen: Herramientas mapa de Bit.
6. Imagen: Herramientas Vector.
7. Imagen: Herramientas Web.
8. Imagen: Herramientas Colores
9. Imágenes: Herramientas Ver.
Posteriormente de observar las herramientas que componen el plano grafico de Fireworks, encontraremos en la parte inferior de la pantalla de manera horizontal la herramienta para cambiar color de lienzo.
10. Imagen: Pantalla completa.
11. Imagen: Herramientas para selección de color de lienzo.
Importar una imagen a FWks
Ahora para importar una imagen a Fireworks, utilizaremos la barra de herramientas archivo y buscaremos la opción de importar, seleccionamos para que aparezca de la siguiente forma.
12. Imagen: Aparece la opción de importar.
Posteriormente aparecerá el cuadro de dialogo importar, buscamos la carpeta de ubicación de nuestra imagen recordando cuales son los archivos compatibles con Fireworks (PNG, JPEG,…etc.).
13. Imagen: Cuadro de dialogo importar imagen.
Seleccionamos la imagen a importar, pero esta no aparecerá de inmediato ya que el cursor cambiara de forma y al hacer clic izquierdo sostenido y crear un rectángulo en este espacio rectangular aparecerá, nuestra imagen en un recuadro azul con cuadros azules en sus vértices.
14. Imagen: En esta aparece nuestra imagen importada.
Insertar Pagina y crear texto
Primero crearemos un texto simple y corto, para crear nuestra pagina de inicio, la cual tendrá los link que ya diseñamos en el cuaderno según la presentación que elaboramos con este fin. En este caso realizaremos un ejemplo corto como lo podemos apreciar en la imagen, con ayuda de la herramienta texto.
15. Imagen: Podemos cambiar parámetros del texto con las herramientas de la parte inferior.
Para insertar una página nos acercamos al lado derecho de la pantalla y con clic derecho después de aparecer el menú desplegable seleccionamos la opción inserta página.
16. Imagen: Encontramos las opciones para insertar pagina.
Después de insertar las paginas en este ejemplo tenemos las paginas Teoría, practicas, calificaciones, después de insertarlas colocaremos un pequeño texto y posteriormente le cambiaremos el nombre de cada una de las paginas con la herramienta cambiar pagina de la misma forma en la que insertamos pagina. Recordamos que siempre la página de inicio se debe asignar el nombre de index.
Direccionar y guardar practica como archivo HTML
Debemos entender que es direccionar, este termino lo manejaremos como la forma en la que el contenido de un archivo de pagina web es accesible para los usuarios. Teniendo esto en cuenta, utilizaremos las herramientas web que encontramos al lado izquierdo de la pantalla (Anteriormente explicada cada una de ellas) herramienta zona interactiva rectangular.
17. Imagen: Herramienta zona interactiva rectangular (Cuadro rojo).
Después de seleccionar la herramienta zona interactiva rectangular, realizaremos rectángulos sobre el texto que pretendamos volver botones de entrada a diferentes paginas que conforman nuestro diseño (Paginas de contenido).
18. Imagen: Vemos los rectángulos sobre el texto en nuestra pag. de inicio.
Para direccionar nuestra pagina, tendremos que realizarlo con las herramientas que vemos en la parte inferior dela pantalla, allí encontraremos el espacio vinculo; que es donde nosotros queremos enlazar ese clic, también encontraremos alt; que es la información que le proporcionaremos al usuario en el momento de manejar nuestra pagina, y por ultimo destino; que es simplemente donde se cargara la pestaña que cargaremos o una nueva pestaña, también tiene distintas opciones, la mas recomendada es self, que se cargara en la misma pestaña de visualización.
19. Imagen: Se ven las opciones al momento de direccionar una página en Fireworks.
Debemos de direccionar cada una de los link de la pagina de inicio, sin olvidarnos de direccionar las otras paginas de contenido, dirigiéndolas hacia la pagina de inicio, colocando en vinculo index, alt Ir a inicio, destino self.
Por ultimo exportaremos nuestro diseño hacia un archivo del tipo HTML (HyperText Markup Language «lenguaje de marcado de hipertexto»), tendremos en cuenta que utilizaremos nuevamente la herramienta archivo y seleccionaremos la opción exportar.
20. Imagen: Vemos la herramienta archivo y en un rectángulo rojo la herramienta exportar
Después de seleccionar exportar, se abrirá una ventana de exportación la cual nos permite realizar los parámetros de exportación, para nuestro diseño de página web, teniendo en cuenta el principal medida el espacio de colocar imágenes en subcarpeta, ya que de esta forma el archivo será visible en formato HTML.
21. Imagen: Vemos ventana emergente exportar donde seleccionamos incluir áreas sin divisiones y colocar imágenes en subcarpeta.
Enseguida de seleccionar la exportación por ultimo damos clic en guardar, de inmediato nuestros archivos aparecerán con un icono de acuerdo del navegador en el que trabajemos, en este caso Firefox Mozilla.
22. Imagen: Vemos carpeta de ubicación de nuestro diseño ya guardado.
Teniendo en cuenta que después de haber exportado nuestro diseño a archivos HTML, en esta visualización no es posible realizar cambios, pero en Fireworks si es posible con nuestro archivo PNG.
Para visualizar nuestro archivo de modo de pagina web simplemente hacemos doble clic sobre el archivo index.
23. Imagen: Vemos diseño en forma de pagina web.
De tal forma que se abrirá una pestaña tal cual si nuestro diseño ya hubiese sido subido a internet, pero la dirección que aparece es la ubicación de nuestros archivos HTML en nuestro equipo.
24. Imagen: Vemos dirección archivo HTML en nuestro equipo.
