Hipervinculos en Fireworks

Una vez mas, volvemos al termino de hiper, como ya vimos antes, este termino nos habla de la relación que hay entre algo, en este caso son los vínculos. Básicamente es la base de una pagina web. Desarrollar un vinculo nos permite manejar la dirección de nuestra página web, por medio de botones, para poder indicar hacia donde se quiere ir. Las opciones son variadas, puedes dirigir un botón hacia un link en una pagina nueva, o sobreescribir la que ya esta abierta.

En fireworks existen distintas formas de convertir en botón una imagen o un símbolo:

*Con la tecla F8 aparece el cuadro de diálogo donde elegimos si queremos un botón, un gráfico, o una animación

*ir a modify, symbol, convert to symbol.

Los botones tienen diferentes estados:

*Up: es el estado potencial del botón antes de que le des click.

*Over: es cuando se pasa el puntero sobre el botón, o se posiciona sobre de el; nos permite agregarle animaciones o efectos para mostrar el cambio, también es conocido como roll over, claramente este tipo de efectos pueden llegar a pesar, y volviendo al tema de la funcionalidad se recomienda no abusar de ellos, ya que puede que el usuario se canse y deje la página.

*Down: es el estado del botón cuando se ejecuta la acción, al presionarlo es decir al elegir la información.

*Active áreas: es la zona de acción que permite seleccionar al botón sin afectar a los demás.

Los botones se pueden hacer con las figuras y formas del programa, pero también se pueden importar imágenes en .png de programas como photoshop.

Una vez creado la forma, se selecciona y se siguen los pasos del principio para convertirlo a botón.

Con la herramienta de  slice se selecciona el área activa, y al darle doble click al botón, se generan los states en la parte derecha de la computadora, o bien, entrando a ventana, states, en programas anteriores se les conocía como frames. En los states se generan 4 opciones diferentes, cada una para los tipos de botones que se explicaron en párrafos anteriores. Cabe mencionar que el cuarto estado no solo es la zona activa, sino que también puede ser lo que se conoce con over way down, esta opción es para marcar cuando el usuario ya selecciono la opción.

Como ejercicio se creo una nueva pagina en Fireworks de 800 por 600, para desarrollar nuestra interfaz, el ejercicio consiste en realizar una opción con tres botones, que nos direcciones a 3 páginas diferentes, cuyas opciones nos ofrezcan la opción de regresar o adelantar la la pagina.

Se deberán crear cuatro páginas, una será la principal, llamada intex, y las otras deberán estar guardadas en una carpeta raíz, la cual contendrá todas las imágenes y gráficos.

Una vez diseñadas las paginas, con sus respectivos botones, se seleccionan, y en la parte inferior se encontrara la opción link: en ella se pondrá el nombre del archivo al que se direccionara, agregando el .htm. En el caso de las paginas que tienen el botón de regreso a la pagina principal, se le deberá poner índex.htm.

Debajo del link, se encuentra otra opción, la de target, por el momento solo nos interesan dos de ellas. Target es a donde se va a desplegar la nueva pagina, es decir, si se abrirá en una nueva pestaña, o si se abrirá una nueva ventana. Blank, es la opción para una nueva pagina, mientras que self es sobre la misma pestaña.

Las otras dos opciones las utilizaremos mas adelante en dreamweaber.

Al finalizar, exportamos en htm y se guarda en la misma carpeta las imágenes.

Se pueden agregar nuevos estados, son como intervalos de tiempo, de momentos extras, o adicionales a los ya existentes, para la siguiente acción, lo agregaremos al final, sobre la pagina índex, si se le agregan  estados a la pagina principal, estos se encontraran en un estado paralelo a los estados de los botones, aunque se podrán manipular por separado, uno será el tiempo de la interfaz y otro el de los botones.

Para poder relacionarlos, se deberá realizar un slice sobre lo que se le agrego al estado, se deberán copiar y pegar las imágenes en todos los estados.

En las herramientas de web tenemos la opción de slice tool, hay uno poligonal y otro rectangular, con el poligonal rodearemos los estados, y del centro del botón saldrá una especie de linea, esto se hace para relacionar los frames.