Diseña tu Pagina Web

Fireworks

Es un editor de gráficos vectoriales, esta herramienta nos va ayudar a realizar la maqueta de nuestra pagina Web, la cual posteriormente podemos convertir en plantilla, y al momento de crear una nueva pagina para nuestro sitio Web partiríamos de dicha plantilla.

Lo primero que debemos hacer es definir las dimensiones (Resolución de pantalla) que deseamos tenga nuestra pagina, en este caso (1000 x 600) Píxeles.

Abrimos Fireworks, vamos a la barra de menú Archivo, y seleccionamos Nuevo (Ctrl.+N)  

Asignamos Anchura: 9000 Altura: 600
Como se ve en la imagen.

 

Ahora usando la herramienta Rectángulo, vamos a sectorizar o a establecer las divisiones que tendrá nuestra página Web, la zona del encabezado o banner, dos zonas laterales una a cada lado y el pie de página, debes tener definido los colores que vas a utilizar en tu pagina; puedes aplicar colores degradados en la ventana de propiedades (sino la puedes visualizar ve la barra de menú Ventana, y seleccionas Propiedades.) junto al color de la herramienta del cubo de pintura, que debe aparecer el valor de Sólido, seleccionas Degradado y Lineal ó el que sea de tu preferencia

Botón tipo Tabs (pestañas)

Con la herramienta Rectángulo Redondeado, dibujamos un rectángulo que nos servirá para los botones del menú de nuestra pagina, yo le aplique color verde con un leve degradado.
 

Con la herramienta rectángulo dibujamos un rectángulo que quede sobre la parte inferior del rectángulo redondeado un poco más grande para que lo cubra completamente y en el siguiente orden: manteniendo presionada la tecla shift seleccionamos primero el rectángulo redondeado y en segundo lugar el rectángulo que se encuentra encima de este.

vamos a la opción de menú Modificar, seleccionamos Combinar Trazados, y Perforación, nos quedara listo nuestro botón con la forma como se ve en la imagen.

Ubicamos el botón deforma que la parte inferior quede justo con la parte inferior del encabezado, ahora lo duplicamos o simplemente Copiar (Ctrl. + C) y luego Pegar (Ctrl. + V) y con las flechas del teclado ubicamos la nueva copia justo a su lado de forma horizontal hacemos tantas copias como opciones de menú necesitemos para nuestro sitio Web.

Con la herramienta de texto seleccionada, damos clic justo encima del botón y digitamos el texto que le pondremos a nuestro botón pro ejemplo: Inicio, Conózcanos, Actividades, Contáctenos.

Puedes incluir una imagen y organizarla enviándola al Fondo, para que los marcos que dibujamos con los cuadros queden por encima de la foto. Lo haces dándole clic derecho sobre la imagen Organizar y Enviar al fondo.

Para este momento ya tenemos listo nuestro diseño el cual te debe haber quedado así:

Ahora usando la herramienta División dibujamos recuadros sobre los marcos laterales, pie de pagina, o zonas que quieras dejar como imágenes que terminaran divididas, pero al exportar este diseño a HTML, se mantendrá el diseño tal cual lo hayas construido en una tabla HTML. Lo cual veremos mas adelante.

También debes dibujar recuadros sobre los botones cubriendo exactamente el tamaño del botón. Como se ve en la Imagen.

Nota: cuando se dibuja un recuadro con la herramienta División este tendrá un color verde, para visualizarlo deberá estar seleccionada la opción Mostrar Divisiones y zonas interactivas de la barra de herramientas.

Para dar animación a los botones, primero deber ir a la barra de menú Ventanas y verificar que esta seleccionada la opción Fotogramas,  ubicado en la ventana de fotogramas dar clic en la opción Fotograma Nuevo/duplicado, aparecerá un nuevo fotograma vació, debes volver al fotograma 1, donde esta nuestro diseño, presionamos de la barra de herramientas la opción Ocultar divisiones y zonas interactivas, luego seleccionamos todas las imágenes de nuestro diseño podemos hacerlo presionando (Ctrl. + A) las copiamos (Ctrl. +  C) nos ubicamos en el fotograma 2 y pegamos (Ctrl. + V) debemos asegurarnos que todo se encuentran en la misma posición tanto en el fotograma 1 como en el 2. lo puedes verificar en la barra de propiedades en el cajón de texto X: y Y:

Estando es el fotograma 2 vamos a realizar algún cambio al aspecto del botón, puede ser cambiar el color al los textos, este cambio se lo debemos realizar a todos los botones únicamente estando en el fotograma 2.

Ahora volvemos a mostrar las divisiones dando clic sobre la opción Mostrar Divisiones y zonas interactivas de la barra de herramientas, damos clic sobre uno de los botones veremos un circulo blanco que parecerá en el centro, arrastramos este circulo dentro del mismo recuadro aparecerá una ventana intercambiar imagen en la opción intercambiar imagen de: debe estar seleccionado el fotograma 2. y le damos Aceptar. Ahora notaremos que del círculo se extiende una línea indicando que se intercambiaran los fotogramas entre el 1 y el 2.

Para ver el funcionamiento en tu navegador presiona la tecla F12.

Nota:Recuerda ir guardando cada vez que realices un cambio a tu diseño.

Solo nos falta exportar nuestro diseño como una pagina HTML. Vamos a la barra de menú Archivo y damos clic en Exportar, nos aparecerá una ventana donde pondremos el nombre a nuestro archivo el cual tendrá extensión .html.

En Exportar: debe aparecer HTML e Imágenes.

En HTML: debe estar Exportar archivo HTML.

Y en Divisiones: Exportar divisiones.

Puedes marcar la casilla Colocar imágenes en subcarpeta.

Damos clic en el bóton Guardar y ya tendremos nuestra pagina Web lista.

Puedes ver un diseño realizado de esta forma en: www.grosella.com.co

Espero esta explicación te sea útil,

Saludos desde Colombia. “Tierra de lindas y hermosas mujeres”.