Armar sitio web en Fireworks - Parte 1

Transcripción

1 FIREWORKS 1 Armar sitio web en Fireworks - Parte 1 Una vez diseñado el layout de tu página en Fireworks, puedes añadir comportamientos a los botones. En el panel de States (Estados), duplica 2 el State 1 para crear el State 2. 3 Selecciona el State 2 Selecciona los objetos que deseas editar 4 para crear el rollover del los botones. 5 En este ejemplo, cambié el color los botones a naranja y todos los textos a blanco. Recuerda que el cambio es el State 2.

2 6 Selecciona la herramienta de Slices y marca cada botón. 7 Seleccionado el Slice haz click derecho y selecciona Add Simple Rollover Behavior (Agregar comportamiento simple de rollover). Este comportamiento permite que al pasar el puntero del mouse sobre el elemento, se visualice el cambio aplicado en el State 2. Otra opción para aplicar el comportamiento es a través del panel Behaviors (Comportamientos), que se encuentra en Window > Behaviors. Se hace click en el botón con signo de + y se selecciona Simple Rollover

3 8 Realiza el mismo procedimiento para cada uno de tus botones. Si tu proyecto lo requiere, puedes añadir el Pop-Up Menu a través del panel Behaviors, añadiendo con la opción + y seleccionando Set Pop-Up Menu. 9 Puedes revisar el comportamiento (Rollover) de los botones mediante la previsualización en un navegador. Selecciona File > Preview in Browser > Preview in Firefox (o el navegador disponible). Al pasar el puntero por los botones deben de cambiar su estado. 10 El siguiente paso es indicar en cada botón su respectivo enlace. Selecciona el Slice correspondiente y en el panel Properties (Propiedades) dentro del campo Link (Enlace) escribe el nombre del archivo HTM al cual se dirigirá cuando se haga click en el botón. En el ejemplo, seleccionamos el Slice del botón Inicio y en Link escribimos index.htm. Realiza los mismo en cada botón con su respectivo nombre. Por default Fireworks utiliza archivos en HTM (es básicamente igual a un HTML, sólo que son más compatibles con navegadores antiguos). Para efectos de este ejercicio usaremos sólo archivos HTM.

4 11 En el panel Pages (Páginas), cambia el nombre a index de la primera página, dando doble click en el nombre para editarlo. De la misma manera a cada página que elabores le indicarás el nombre correspondiente a cada link (en este caso sin la extención.htm, ya que ésta será agregada por Fireworks al exportar). Si no has realizado el diseño de las páginas de contenido, puedes duplicar la página para elaborar la siguiente y así sucesivamente. En caso de que ya tengas las páginas de contenidos, puedes copiar los Slices de los botones de la página de inicio (los que tienen los comportamientos aplicados) y los pegas en cada página elaborada. Recuerda que en el State 2 de cada página deben encontrarse los botones modificados (con cambio de color). 12 Utiliza la herramienta Slice para dividir cada uno de los elementos de las páginas que elaboraste.

5 13 Para agregar video, incrustaremos el código de un video en YouTube. Puedes ajustar el slice a la medida de 560 x 315 px (que es una de las medidas estándar del reproductor de YouTube). Cambia el tipo del slice en el panel Properties. Selecciona la opción HTML. El slice cambiará a un color verde intenso. Esto permitirá agregar el código HTML. 14 Para conseguir el código del video, en YouTube haz click en la opción Compartir y después en la opción Insertar vínculo. Deselecciona las opciones de la parte inferior. Copia el código con: Control + C (PC) Command + C (Mac)

6 15 En el panel Properties haz click en Edit de la opción HTML para abrir la ventana para insertar el código. 16 En la ventana que aparece, pega el código que copiaste de la página de YouTube. El código debe mostrarse de la siguiente forma: 17 Puedes insertar también una ubicación de Google Maps. Entra a maps.google.com.mx y busca un sitio.

7 18 Haz click en el ícono de engrane que se encuentra en la parte inferior derecha de la página. Selecciona la opción Compartir e insertar mapa. 19 Aparece una ventana y selecciona la opción Insertar mapa. Puedes elegir un tamaño predeterminado o personalizar uno con la opción Tamaño personalizado. El tamaño debe coincidir con el tamaño del Slice que creaste en Fireworks. Copia el código generado. 20 En Fireworks, realiza en mismo procedimiento (usado en el video) para pegar el código en el Slice. NOTA: Al realizar una prueba de previsualización en el navegador, puede ser que no visualice el video o el mapa (o aparezca un mensaje de archivo no encontrado). Esto debe solucionarse al publicarlo en el servidor.