CAPITULO 5. Creación de algunos elementos para web:

5.1. Botones:

Hoy en día, el concepto de "navegabilidad" de una página determina, de muchas maneras, la eficacia y claridad en la presentación de un producto en la web.
Además de procurar tener un organigrama completo y preciso, es necesario que todas las secciones de ese organigrama sean accesibles desde cualquier lugar del sitio, y en cualquier momento que el usuario quiera accederlas, evitando con esto los ya anacrónicos "volver" que poblaban las primeras páginas web.
Con este fin es que la "botonera" de una página se ha vuelto un elemento necesario y constitutivo de todo sitio web que se precie de ser tal.
Los modelos pueden variar, pero lo importante es que en la botonera se halle el acceso rápido e intuitivo a cualquier lugar de un sitio.
En este sentido, la elaboración de botones individuales o de "barras de navegación" completas es súmamente rápida y fácil en Fireworks.
Vamos a comenzar por hacer un botón:

1- Vamos a Edit>Insert>New Button. Nos encontraremos entonces en la siguiente ventana:

Las "instancias" son los distintos estados de función en una página web.

UP: es cómo se verá el botón por defecto, cuando entramos a la página.
OVER: es cómo se verá el botón cuando el mouse pase sobre él.
DOWN: es cómo se verá el botón cuando presionesmos sobre él para hacer clic y hacerlo funcionar.
OVER WHILE DOWN: es cómo se verá el botón una vez que estemos en el link a dónde nos condujo. Por ejemplo: estamos en la página principal, y hacemos clic en un botón que se llame "clientes", entonces iremos a la sección de clientes, y el botón de clientes cambiará de aspecto, para recordarnos gráficamente que estamos en la sección clientes.
ACTIVE AREA: en esta sección determinamos qué parte del botón funcionará como botón.

Pero vamos a ir paso por paso:

En el UP hemos puesto un botón de "Inicio" tal como se verá normalmente.

Para evitar las dificultades de intentar dibujar exactamente lo mismo en el OVER, utilizamos primeramente el botón "Copy Up Graphic" (copiar el gráfico del UP), y una vez realizado, le hacemos los cambios que creamos convenientes. En este caso sólo le cambiamos el color y agregamos una pequeña sombra al texto.

Lo mismo hemos hecho en DOWN, o sea, copiar el gráfico del OVER, y luego le hemos cambiado un poco el color, para diferenciarlo.

Nos salteamos el OVER WHILE DOWN, porque el proceso consite exctamente en lo mismo, o sea, en cambiar o conservar el aspecto del botón, según querramos.

En ACTIVE AREA vemos que el botón aparece cubierto por un àrea transparente. Esta área es un "Slice" y es la que posibilita que el área marcada por el mismo sea interactiva, o sea, por ejemplo, que le podamos agregar un link. El tamaño de este slice determinará el área que funcionará como botón. En este caso, obviamente, ambos tamaños coinciden: el del botón y el del área activa.

Nuestro botón ya está básicamente terminado, así que le damos a DONE, para volver al canvas normal de nuestro trabajo:

y así es como se ve en el área de trabajo, con el slice superpuesto. Si visualmente nos molesta verlo de esta manera, podemos recurrir a los botones que sirven para ocultar o mostrar los slices, y que se hallan en la paleta de herramientas.

Podemos ver, además, el botón terminado y funcionando:

Si pasamos el mouse sobre él, sin hacer clic, veremos el cambio de gráficos del UP al OVER. Si hacemos clic sobre él, veremos que queda de otro color. Ese es el aspecto que le asignamos al OVER WHILE DOWN, o sea, el aspecto que tendrá el botón una vez usado (por decirlo de alguna manera).

No hace falta repetir todo el proceso para elaborar otros botones. Basta con mantener la tecla ALT presionada y arrastar el primer botón: automáticamente lo duplicará. Luego, en la barra de propiedades, le haremos los cambio necesarios:

En Text le ponemos el texto que llevará el nuevo botón. Si hiciese falta, en Link, le ponemos el link correspondiente, y así sucesivamente podemos ir duplicando los botones sin necesidad de trabajarlos uno por uno.

4.2. Menúes y submenúes:

Es frecuente que en la estructura de contenidos de un sitio, nos encontremos con que una sección deberá estar dividida en varias "sub-secciones". Para no afectar la navegabilidad del sitio, se utilizan los menúes y submenúes, que pueden nacer de algún botón en particular.
Siguiendo con nuestro ejemplo, hemos duplicado otra vez un botón para crear el que se llame Links, pero en nuestro proyecto imaginario, la sección links estará dividida en tres secciones; y una de estas tres, en otras dos.
Seleccionamos el botón de Links, y vamos a Modify>Pop-up Menu>Add Pop-Up Menu.

En esta ventana empezamos a armar el menú de Links, que estará dividido en Portales, Diseño, y Tutoriales. Pero en nuestro proyecto imaginario, dividiremos Tutoriales en dos secciones:

Lo que hemos hecho aquí es:

1- Con el signo + agregar dos nuevos campos abajo de Tutoriales, a los que hemos dado los nombres de Gratuítos y Pagos, con sus correspondientes vínculos.
2- Los hemos "Indentado" (así se llama la operación que los "subordina" a Tutoriales).
3- hacemos clic en Next para seguir armando estos menúes.

Hacemos clic en Next y pasamos a la parte de la configuración "gráfica" de los botones del menú.

1- Hay dos estilos para los botones. nosotros hemos escogido el de "Image" porque es el más variado en opciones, y es el que la da cierto "volúmen" a los botones. La opción de HTML es gráficamente mucho más sencilla, pero en fin, son opciones de cada uno: dependen del concepto estético por el que se haya optado para el sitio.
Como ven, hay además opciones para configurar el tipo de fuente (letra) que se utilizará, el tamaño, alineación del texto, etc.
2- También puedes configurar a tu gusto los colores que tendrán los botones tanto en la instancia UP como en OVER, o bien utilizar los estilos predefinidos que nos da Fireworks.

Las siguientes opciones, que se hayan en las solapas de Advanced y Position hacen referencia a aspectos más detallados de la apariencia, y a la posición que tendrán los menúes y sibmenúes respecto al botón de origen.

Y aquí tenemos el resultado final: