ETIQUETAS DREAMWEAVER

1. FIREWORKS
David Escudero Mancebo
Alfonso Pedriza Rebollo

2. FIREWORKS
•DISEÑO GRÁFICO
•DISEÑO WEB

3. DISEÑO GRÁFICO
1.Creación y almacenamiento de un documento nuevo
2.Entorno de trabajo
3.Tipos de objetos
4.Creación de objetos vectoriales
5.Mapas de bits
6.Utilización de capas y objetos
7.Creación y modificación de una máscara
8.Creación y modificación de texto
9.Exportación del documento

4. 1. Creación y almacenamiento
de un documento nuevo
•Archivo>Nuevo
•Tamaño del lienzo
–Ancho
–Alto
–Resolución
•Color del lienzo
–Blanco
–Transparente
–Personalizado
•Archivo>Guardar Como. Extensión .png

5. 2. Entorno de trabajo
•Ventana de documento (Centro)
–Original
–Vista Previa
–2-arriba
–4-arriba
•Barra de menús (Arriba)
•Panel de herramientas (Izquierda)
•Inspector de propiedades (Abajo). Presenta las propiedades de
un objeto o herramienta seleccionada.
•Paneles (Derecha)
–Capas
–Optimizar
–Archivos
–Fotogramas e Historial
–Respuestas

7. 3. Tipos de objetos
•Podemos crear dos tipos de imágenes:
–Objetos vectoriales
–Imágenes de mapa de bits
•Objetos vectoriales. Es una descripción matemática de una
forma geométrica, se definen con puntos. Su calidad no se
degrada cuando cambian de escala
•Imágenes de mapa de bits. Compuestas por una
cuadrícula de píxeles de color. Su calidad si se degrada cuando
cambian de escala.

8. 4. Creación de objetos
vectoriales
•Creación de rectángulos. Herramienta Rectángulo(U).
Arrastrar con el ratón en la pantalla
•Herramienta puntero. Selecciona el rectángulo y lo desplaza.
•Inspector de propiedades (propiedades de la herramienta):
–Relleno
–Color de trazo
–Tamaño de la punta
–Alto y Ancho del rectángulo
–Opacidad
–Textura
–Efectos

9. 5. Mapas de bits
•Importación de un mapa de bits.
Archivo>Importar
•Creación de una selección de pixeles
–Visualización de la imagen. Zoom y Mano
–Herramientas Lazo y Lazo poligonal
Delimitar la zona a seleccionar.
–Editar>Copiar.
–Editar>Pegar. La imagen seleccionada se pega como un
nuevo objeto de mapa bits

10. 5. Mapas de bits
•Adición y modificación de efectos automáticos
–Hacer clic en el botón añadir efectos
–Elegir efecto (aparecerá el efecto elegido en la lista de efectos)
–Suprimir efecto
–Modificación de efectos. Pulsar el icono de información y variar las
propiedades del efecto.

11. 6. Utilización de capas y objetos
•Las capas dividen los documentos en planos distintos
•Panel Capas. Ventana>Capas
•Fusión de mapas de bits (fusiona dos objetos de mapa de
bits)
–Elegir el mapa de bits que se encuentre en un nivel superior
–Pulsar el icono del menú emergente de opciones del panel crear
–Escoger Fusionar con inferior

12. 6. Utilización de capas y objetos
•Asignación de nombre a los objetos
–Hacer doble clic en las palabras que figuran junto a la
imagen en el panel Capas.
–Escribir en el cuadro de nombre de objeto del Inspector
de propiedades.
•Seleccionar objetos pulsando el icono del panel
Capas
•Cambiar el orden de apilamiento de los objetos.
Desplazar los objetos en el panel Capas, los objetos en líneas
superiores se superponen a los inferiores

13. 7. Creación y modificación de
una máscara
•En Fireworks es posible aplicar dos tipos de
máscaras: máscaras vectoriales y máscaras de
mapa de bits.
•Añadir máscara. Hacer clic en el botón Añadir máscara
situado en la parte inferior del panel Capas.
•Añadir Relleno degradado
–Seleccionar la miniatura de la máscara
–Seleccionar la Herramienta degradado (G)
–Hacer clic en el cuadro de relleno del Inspector de
propiedades
–Arrastrar el puntero de degradado en el objeto a aplicar.

14. 8. Creación y modificación de
texto
•Seleccionar la Herramienta texto en el panel de
herramientas.
•Hacer clic en el documento para escribir, o trazar un
rectángulo donde se ajustará el texto.
•Modificar las propiedades en el Inspector de
propiedades. Podemos añadir efectos al texto.

15. 9. Exportación del documento
•Optimización de la imagen. Garantiza que la imagen se
exporte con el mejor equilibrio posible entre compresión y
calidad.
–Panel Optimizar. Ventana>Optimizar
–Escoger las opciones deseadas.
–En la ventana de documento en Vista previa podemos ver como
se exportará la imagen con las opciones actuales.

16. 9. Exportación del documento
•Exportación de la imagen
–Archivo>Exportar
–Aparece la extensión escogida en optimizar
–Archivo > Guardar para guardar los cambios en el
archivo PNG.

17. DISEÑO WEB
2.División del documento
3.Creación de un rollover
4.Creación y edición de botones para generar una
barra de navegación
5.Creación y edición de un menú emergente
6.Optimización del documento
7.Exportación de HTML

18. 1. División del documento
•División para desmembrar los documentos web.
–Añade interactividad
–Descarga de la página más rápida (las imágenes pequeñas se
cargan de forma más rápida)
–Podemos optimizar cada división de forma diferente.
•Método para crear una división:
–Seleccionamos la imagen en la que queremos insertar la división.
–Editar>Insertar>División
–Podemos editar varias divisiones a la vez.
•Seleccionar las zonas a dividir (pulsando Mayús)
•Pulsar Editar>Insertar>División
•Pulsar Varios en el mensaje emergente.
•Si las guías de división no se muestran; pulsar Ver>Guías de
división.
•Las divisiones creadas aparecen en Panel Capas.

19. 2. Creación de un rollover
•Hay dos clases de rollovers:
–rollovers simples
–rollovers desunidos.
•Un rollover simple muestra una imagen diferente
cuando el puntero se coloca sobre él en un
navegador web.
• Un rollover desunido provoca el cambio de imagen
en otro lugar de la pantalla cuando el puntero se
coloca sobre él.

20. 2. Creación de un rollover
•Seleccionar la división que contiene la zona donde
queremos la interactividad
•Pulsar el símbolo de comportamiento
• Tenemos los siguientes:
–Comportamiento de rollover simple
–Comportamiento de intercambiar imagen
–Mensaje de barra de estado
–Barra de Navegación
–Menú emergente

21. 2. Creación de un rollover
•Podemos realizar un rollover de forma muy sencilla:
–Arrastrar el símbolo de comportamiento a la división donde
queremos que se intercambie la imagen
–Soltar el botón , aparece el cuadro de diálogo Intercambiar
Imagen
–Escoger el fotograma donde se encuentre la imagen a
intercambiar. Si tenemos sólo uno, escoger Fotograma 2.
–Panel Fotogramas. Ventana>Fotogramas. Haga clic en el
botón Fotograma nuevo/duplicado
–Tenemos un segundo fotograma con las mismas divisiones del
anterior
–Importamos en la zona donde queremos el intercambio la imagen
a intercambiar.

22. 3. Creación y edición de botones
para generar una barra de
navegación
•Los botones son objetos web que conducen a otras
páginas web. Su aspecto suele variar según el
movimiento del ratón u otras acciones del usuario,
como un clic.
•Una barra de navegación (o Bar Nav) es un
conjunto de botones que aparece en una o varias
páginas de un sitio web.

23. 3. Creación y edición de botones
para generar una barra de
navegación
•Crear el símbolo que será base del botón.
–Modificar > Símbolo > Convertir en símbolo
–Se abre el cuadro de diálogo Propiedades de símbolo
–Dar nombre al símbolo y pulsar la opción de Botón
–El símbolo aparece en la biblioteca.Ventana>Biblioteca

24. 3. Creación y edición de botones
para generar una barra de
navegación
•Creación de estados del botón (los estados de botón son los
diferentes modos en que aparece un botón cuando el puntero se
desplaza sobre él o cuando se hace clic en él en un navegador web).
–Doble click en la instancia de botón creada o en la vista previa del
botón en el panel Biblioteca y modificar los estados.
–Crear los distintos estados:
•Arriba
•Sobre
•Abajo
•Sobre y Abajo Área activa
•Hacer clic en Listo
•Copiar el botón y probar los efectos.

25. 3. Creación y edición de botones
para generar una barra de
navegación
•Creación de varias instancias de botón
–Seleccionar el botón.
–Editar > Clonar.
–Aparece una nueva instancia de botón.
–Desplazarla al sitio deseado.
•En el Inspector de propiedades se pone el nuevo texto.
•Asignamos valores URL a los botones en el campo Vínculo del
Inspector de propiedades.
•Alinearlo con cuidado:
–Modificar> Alinear

26. 4. Creación y edición de un
menú emergente
•Menú emergente es el menú que aparece al desplazar el
puntero sobre una imagen de activación en un navegador.
Contiene una lista de opciones que conducen a otras páginas
web.
•Creación de las opciones del menú emergente.
–Modificar>Menú emergente>Añadir menú emergente
–Doble clic en el cuadro de Texto para insertar el nombre
–Doble clic en el cuadro de Vínculo para insertar la dirección URL o
el enlace a otra página.
–Doble clic en el cuadro Destino para insertar cómo se va a abrir la
página del enlace o URL especificada.
–Pulsar Listo
•Comprobar el menú emergente. Archivo>Vista previa en el
navegador>Navegador

27. 4. Creación y edición de un
menú emergente
•Personalización del menú emergente
–Doble clic en el contorno del menú emergente.
–Clic en Siguiente. Patilla Aspecto. Cambia las fuentes y
los colores utilizados en menús emergentes.
–Clic en Siguiente. Patilla Avanzado. Cambia varias
propiedades de celda y borde.
–Clic en Siguiente. Patilla Posición. Especifica la posición
de la pantalla donde debe aparecer el menú emergente.

28. 4. Creación y edición de un
menú emergente
•Edición del menú emergente
–Doble clic en el contorno del menú emergente. Patilla
Contenido.
–Clic el botón Añadir menú. Añade una línea en blanco.
–Seleccionar una entrada y hacer clic en el botón Sangrar
menú. La opción sangrada emergerá de la entrada
anterior
–Desplazar de posición las entradas desplazándolas con el
ratón.

29. 5. Optimización del documento
•Antes de exportar un documento, primero siempre
hay que optimizarlo
•Panel Optimizar.Ventana>Optimizar
–Escoger las opciones más convenientes
–Ventana de documento ficha 2-arriba, permite ver los
resultados de los parámetros de optimización y compararlos
con el original

30. 6. Exportación de HTML
•Definición de las preferencias en HTML
–Archivo>Configuración de HTML
–Se abre el cuadro de diálogo Configuración de HTML. Las
opciones que se definan afectarán a todos los documentos que
creemos en el futuro, excepto a las opciones de la ficha Específico
del documento.
•Ficha General, elegimos un estilo de HTML
•Ficha Tabla, cambia las propiedades de tablas HTML
•Ficha Específico del documento, permite elegir varias preferencias
para cada documento.
•Exportación del documento. Archivo>Exportar
–Tipo HTML e Imágenes
–Exportar divisiones
–Sólo divisiones seleccionadas