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

Herramientas que uso para Diseñar Páginas Web.

Es indispensable un editor Web que haga mas fácil la labor de código HTML y mas si no estas relacionado con el tema, yo utilizo Dreamweaver es bueno al menos tener conocimiento básico de este lenguaje; existen herramientas de diseño como lo es FireWorks o PhotoShop, donde podrás realizar la maqueta de tu sitio Web, vamos a ver algo de Fireworks que es la herramienta que mas he utilizado para los diseños de mis paginas Web.

El XHTML se basa mucho en el uso de CSS, hojas de estilo en cascada, que nos sirve para definir el aspecto de nuestra pagina, dando forma y orden al contenido, ubicando las imágenes, los control html, los formularios, los texto, la alineación, las márgenes, esto se logra con el uso de la etiqueta “<div>” en la cual se aplicará el aspecto o propiedad que hayamos dispuesto.

Para hacer que nuestros sitios Web sean mas funcionales, ágiles,  y dinámicos podemos valernos del uso de Javascript es un leguaje que permite realizar validaciones del lado del cliente, sin necesidad de volver a cargar la pagina, hoy en día se utiliza mucho un framework (ósea unas librerías) llamado JQuery, y realizando búsquedas en Internet podemos encontrarnos con muchas utilidades bastante atractivas que hacen mas vistosas tus paginas Web y están desarrolladas sobre esta tecnología.

Para administrar el contenido de tus sitios Web, tendrías que valerte de la programación, y entrar a ese fascinante mundo, que para muchos puede llegar a ser frustrante, podemos optar por utilizar tecnología Microsoft lo cual representa ($) Dinero, la plataforma .Net que nos permite realizar aplicaciones Web valiéndonos del ASP.NET la evolución de las paginas .asp (las paginas dinámicas de Microsoft) que ahora son .aspx, donde tu puedes escoger el lenguaje con el cual te sientas mas cómodo yo he utilizado C# para aquellas personas que han trabajado con leguaje C ó turbo C++, también tenemos VB.NET, para aquellos que tienen conocimiento en Visual Basic en sus versiones 5 y/o 6.0 y algunos otros lenguajes; por otro lado tenemos el software libre o gratuito como lo es PHP es el que mas he usado para mis paginas por que es mucho mas económico a la hora de contratar hosting y sobre el cual existe gran cantidad de información y foros.

A la hora de depurar nuestro código en este caso PHP y utilizando un gran Navegador que se ha vuelto para mi una herramienta indispensable estoy hablando de Mozilla FireFox el cual cuenta con varias extensiones, una que nos debe interesar es Firebug muy útil a la hora de hacer seguimiento a nuestro código, ya sea HTML, Javascript o CSS.

Estas son algunas de las herramientas que he utilizado para mis trabajos Web, pero existe gran cantidad de herramientas de uso libre y comercial que podrás encontrar, lo importante es que te sientas cómodo con la que uses.