ETIQUETAS DREAMWEAVER

7,568 views

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
7,568
On SlideShare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

ETIQUETAS DREAMWEAVER

  1. 1. FIREWORKS David Escudero Mancebo Alfonso Pedriza Rebollo
  2. 2. FIREWORKS <ul><li>DISEÑO GRÁFICO </li></ul><ul><li>DISEÑO WEB </li></ul>
  3. 3. DISEÑO GRÁFICO <ul><li>Creación y almacenamiento de un documento nuevo </li></ul><ul><li>Entorno de trabajo </li></ul><ul><li>Tipos de objetos </li></ul><ul><li>Creación de objetos vectoriales </li></ul><ul><li>Mapas de bits </li></ul><ul><li>Utilización de capas y objetos </li></ul><ul><li>Creación y modificación de una máscara </li></ul><ul><li>Creación y modificación de texto </li></ul><ul><li>Exportación del documento </li></ul>
  4. 4. 1. Creación y almacenamiento de un documento nuevo <ul><li>Archivo>Nuevo </li></ul><ul><li>Tamaño del lienzo </li></ul><ul><ul><li>Ancho </li></ul></ul><ul><ul><li>Alto </li></ul></ul><ul><ul><li>Resolución </li></ul></ul><ul><li>Color del lienzo </li></ul><ul><ul><li>Blanco </li></ul></ul><ul><ul><li>Transparente </li></ul></ul><ul><ul><li>Personalizado </li></ul></ul><ul><li>Archivo>Guardar Como . Extensión .png </li></ul>
  5. 5. 2. Entorno de trabajo <ul><li>Ventana de documento (Centro) </li></ul><ul><ul><li>Original </li></ul></ul><ul><ul><li>Vista Previa </li></ul></ul><ul><ul><li>2-arriba </li></ul></ul><ul><ul><li>4-arriba </li></ul></ul><ul><li>Barra de menús (Arriba) </li></ul><ul><li>Panel de herramientas (Izquierda) </li></ul><ul><li>Inspector de propiedades (Abajo). Presenta las propiedades de un objeto o herramienta seleccionada. </li></ul><ul><li>Paneles (Derecha) </li></ul><ul><ul><li>Capas </li></ul></ul><ul><ul><li>Optimizar </li></ul></ul><ul><ul><li>Archivos </li></ul></ul><ul><ul><li>Fotogramas e Historial </li></ul></ul><ul><ul><li>Respuestas </li></ul></ul>
  6. 7. 3. Tipos de objetos <ul><li>Podemos crear dos tipos de imágenes: </li></ul><ul><ul><li>Objetos vectoriales </li></ul></ul><ul><ul><li>Imágenes de mapa de bits </li></ul></ul><ul><li>Objetos vectoriales. E s una descripción matemática de una forma geométrica , se definen con puntos . Su calidad no se degrada cuando cambian de escala </li></ul><ul><li>Imágenes de mapa de bits. C ompuesta s por una cuadrícula de píxeles de color . Su calidad si se degrada cuando cambian de escala. </li></ul>
  7. 8. 4. Creación de objetos vectoriales <ul><li>Creación de rectángulos. Herramienta Rectángulo(U). Arrastrar con el ratón en la pantalla </li></ul><ul><li>Herramienta puntero . Selecciona el rectángulo y lo desplaza. </li></ul><ul><li>Inspector de propiedades (propiedades de la herramienta) : </li></ul><ul><ul><li>Relleno </li></ul></ul><ul><ul><li>Color de trazo </li></ul></ul><ul><ul><li>Tamaño de la punta </li></ul></ul><ul><ul><li>Alto y Ancho del rectángulo </li></ul></ul><ul><ul><li>Opacidad </li></ul></ul><ul><ul><li>Textura </li></ul></ul><ul><ul><li>Efectos </li></ul></ul>
  8. 9. 5. Mapas de bits <ul><li>Importación de un mapa de bits. Archivo>Importar </li></ul><ul><li>Creación de una selección de pixeles </li></ul><ul><ul><li>Visualización de la imagen. Zoom y Mano </li></ul></ul><ul><ul><li>Herramientas Lazo y Lazo poligonal </li></ul></ul><ul><ul><li>Delimitar la zona a seleccionar. </li></ul></ul><ul><ul><li>Editar>Copiar . </li></ul></ul><ul><ul><li>Editar>Pegar . La imagen seleccionada se pega como un nuevo objeto de mapa bits </li></ul></ul>
  9. 10. 5. Mapas de bits <ul><li>Adición y modificación de efectos automáticos </li></ul><ul><ul><li>Hacer clic en el botón añadir efectos </li></ul></ul><ul><ul><li>Elegir efecto (aparecerá el efecto elegido en la lista de efectos) </li></ul></ul><ul><ul><li>Suprimir efecto </li></ul></ul><ul><ul><li>Modificación de efectos. Pulsar el icono de información y variar las propiedades del efecto. </li></ul></ul>
  10. 11. 6. Utilización de capas y objetos <ul><li>Las capas dividen los documentos en planos distintos </li></ul><ul><li>Panel Capas. Ventana>Capas </li></ul><ul><li>Fusión de mapas de bits (fusiona dos objetos de mapa de bits) </li></ul><ul><ul><li>Elegir el mapa de bits que se encuentre en un nivel superior </li></ul></ul><ul><ul><li>Pulsar el icono del menú emergente de opciones del panel crear </li></ul></ul><ul><ul><li>Escoger Fusionar con inferior </li></ul></ul>icono menú emergente
  11. 12. 6. Utilización de capas y objetos <ul><li>Asignación de nombre a los objetos </li></ul><ul><ul><li>Hacer doble clic en las palabras que figuran junto a la imagen en el panel Capas . </li></ul></ul><ul><ul><li>Escribir en el cuadro de nombre de objeto del Inspector de propiedades. </li></ul></ul><ul><li>Seleccionar objetos pulsando el icono del panel Capas </li></ul><ul><li>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 </li></ul>
  12. 13. 7. Creación y modificación de una máscara <ul><li>En Fireworks es posible aplicar dos tipos de máscaras: máscaras vectoriales y máscaras de mapa de bits . </li></ul><ul><li>Añadir máscara. Ha cer clic en el botón Añadir máscara situado en la parte inferior del panel Capas . </li></ul><ul><li>Añadir Relleno degradado </li></ul><ul><ul><li>Seleccionar la miniatura de la máscara </li></ul></ul><ul><ul><li>Seleccionar la Herramienta degradado (G) </li></ul></ul><ul><ul><li>Hacer clic en el cuadro de relleno del Inspector de propiedades </li></ul></ul><ul><ul><li>Arrastrar el puntero de degradado en el objeto a aplicar. </li></ul></ul>
  13. 14. 8. Creación y modificación de texto <ul><li>Seleccionar la Herramienta texto en el panel de herramientas. </li></ul><ul><li>Hacer clic en el documento para escribir, o trazar un rectángulo donde se ajustará el texto. </li></ul><ul><li>Modificar las propiedades en el Inspector de propiedades . Podemos añadir efectos al texto. </li></ul>
  14. 15. 9. Exportación del documento <ul><li>Optimización de la imagen. G arantiza que la imagen se exporte con el mejor equilibrio posible entre compresión y calidad. </li></ul><ul><ul><li>Panel Optimizar . Ventana>Optimizar </li></ul></ul><ul><ul><li>Escoger las opciones deseadas. </li></ul></ul><ul><ul><li>En la ventana de documento en Vista previa podemos ver como se exportará la imagen con las opciones actuales. </li></ul></ul>
  15. 16. 9. Exportación del documento <ul><li>Exportación de la imagen </li></ul><ul><ul><li>Archivo>Exportar </li></ul></ul><ul><ul><li>Aparece la extensión escogida en optimizar </li></ul></ul><ul><ul><li>Archivo > Guardar para guardar los cambios en el archivo PNG. </li></ul></ul>
  16. 17. DISEÑO WEB <ul><li>División del documento </li></ul><ul><li>Creación de un rollover </li></ul><ul><li>Creación y edición de botones para generar una barra de navegación </li></ul><ul><li>Creación y edición de un menú emergente </li></ul><ul><li>Optimización del documento </li></ul><ul><li>Exportación de HTML </li></ul>
  17. 18. 1. División del documento <ul><li>División para desmembrar los documentos web. </li></ul><ul><ul><li>Añade interactividad </li></ul></ul><ul><ul><li>Descarga de la página más rápida (las imágenes pequeñas se cargan de forma más rápida) </li></ul></ul><ul><ul><li>Podemos optimizar cada división de forma diferente. </li></ul></ul><ul><li>Método para crear una división: </li></ul><ul><ul><li>Seleccionamos la imagen en la que queremos insertar la división. </li></ul></ul><ul><ul><li>Editar>Insertar>División </li></ul></ul><ul><ul><li>Podemos editar varias divisiones a la vez. </li></ul></ul><ul><ul><ul><li>Seleccionar las zonas a dividir (pulsando Mayús) </li></ul></ul></ul><ul><ul><ul><li>Pulsar Editar>Insertar>División </li></ul></ul></ul><ul><ul><ul><li>Pulsar Varios en el mensaje emergente. </li></ul></ul></ul><ul><li>Si las guías de división no se muestran; pulsar Ver>Guías de división. </li></ul><ul><li>Las divisiones creadas aparecen en Panel Capas . </li></ul>
  18. 19. 2. Creación de un rollover <ul><li>Hay dos clases de rollovers : </li></ul><ul><ul><li>rollovers simples </li></ul></ul><ul><ul><li>rollovers desunidos. </li></ul></ul><ul><li>Un rollover simple muestra una imagen diferente cuando el puntero se coloca sobre él en un navegador web. </li></ul><ul><li>Un rollover desunido provoca el cambio de imagen en otro lugar de la pantalla cuando el puntero se coloca sobre él. </li></ul>
  19. 20. 2. Creación de un rollover <ul><li>Seleccionar la división que contiene la zona donde queremos la interactividad </li></ul><ul><li>Pulsar el símbolo de comportamiento </li></ul><ul><li>Tenemos los siguientes: </li></ul><ul><ul><li>Comportamiento de rollover simple </li></ul></ul><ul><ul><li>Comportamiento de intercambiar imagen </li></ul></ul><ul><ul><li>Mensaje de barra de estado </li></ul></ul><ul><ul><li>Barra de Navegación </li></ul></ul><ul><ul><li>Menú emergente </li></ul></ul>
  20. 21. 2. Creación de un rollover <ul><li>Podemos realizar un rollover de forma muy sencilla: </li></ul><ul><ul><li>Arrastrar el símbolo de comportamiento a la división donde queremos que se intercambie la imagen </li></ul></ul><ul><ul><li>Soltar el botón , aparece el cuadro de diálogo Intercambiar Imagen </li></ul></ul><ul><ul><li>Escoger el fotograma donde se encuentre la imagen a intercambiar. Si tenemos sólo uno, escoger Fotograma 2 . </li></ul></ul><ul><ul><li>Panel Fotogramas . Ventana>Fotogramas . Haga clic en el botón Fotograma nuevo/duplicado </li></ul></ul><ul><ul><li>Tenemos un segundo fotograma con las mismas divisiones del anterior </li></ul></ul><ul><ul><li>Importamos en la zona donde queremos el intercambio la imagen a intercambiar. </li></ul></ul>
  21. 22. 3. Creación y edición de botones para generar una barra de navegación <ul><li>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. </li></ul><ul><li>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. </li></ul>
  22. 23. 3. Creación y edición de botones para generar una barra de navegación <ul><li>Crea r el símbolo que será base del botón. </li></ul><ul><ul><li>Modificar > Símbolo > Convertir en símbolo </li></ul></ul><ul><ul><li>Se abre el cuadro de diálogo Propiedades de símbolo </li></ul></ul><ul><ul><li>Dar nombre al símbolo y pulsar la opción de Botón </li></ul></ul><ul><ul><li>El símbolo aparece en la biblioteca. Ventana>Biblioteca </li></ul></ul>
  23. 24. 3. Creación y edición de botones para generar una barra de navegación <ul><li>Creación de estados del botón (l os 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 ) . </li></ul><ul><ul><li>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. </li></ul></ul><ul><ul><li>Crear los distintos estados: </li></ul></ul><ul><ul><ul><li>Arriba </li></ul></ul></ul><ul><ul><ul><li>Sobre </li></ul></ul></ul><ul><ul><ul><li>Abajo </li></ul></ul></ul><ul><ul><ul><li>Sobre y Abajo Área activa </li></ul></ul></ul><ul><ul><ul><li>Hacer clic en Listo </li></ul></ul></ul><ul><li>Copiar el botón y probar los efectos. </li></ul>
  24. 25. 3. Creación y edición de botones para generar una barra de navegación <ul><li>Creación de varias instancias de botón </li></ul><ul><ul><li>Seleccionar el botón. </li></ul></ul><ul><ul><li>Editar > Clonar . </li></ul></ul><ul><ul><li>A parece una nueva instancia de botón . </li></ul></ul><ul><ul><li>Desplazarla al sitio deseado. </li></ul></ul><ul><li>En el Inspector de propiedades se pone el nuevo texto. </li></ul><ul><li>Asignamos valores URL a los botones en el campo Vínculo del Inspector de propiedades . </li></ul><ul><li>Alinearlo con cuidado: </li></ul><ul><ul><li>Modificar> Alinear </li></ul></ul>
  25. 26. 4. Creación y edición de un menú emergente <ul><li>M enú 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. </li></ul><ul><li>Creación de las opciones del menú emergente. </li></ul><ul><ul><li>Modificar>Menú emergente>Añadir menú emergente </li></ul></ul><ul><ul><li>Doble clic en el cuadro de Texto para insertar el nombre </li></ul></ul><ul><ul><li>Doble clic en el cuadro de Vínculo para insertar la dirección URL o el enlace a otra página. </li></ul></ul><ul><ul><li>Doble clic en el cuadro Destino para insertar cómo se va a abrir la página del enlace o URL especificada. </li></ul></ul><ul><ul><li>Pulsar Listo </li></ul></ul><ul><li>Comprobar el menú emergente. Archivo>Vista previa en el navegador>Navegador </li></ul>
  26. 27. 4. Creación y edición de un menú emergente <ul><li>Personalización del menú emergente </li></ul><ul><ul><li>Doble clic en el contorno del menú emergente. </li></ul></ul><ul><ul><li>Clic en Siguiente . Patilla Aspecto . Cambia las fuentes y los colores utilizados en menús emergentes. </li></ul></ul><ul><ul><li>Clic en Siguiente . Patilla Avanzado . Cambia varias propiedades de celda y borde . </li></ul></ul><ul><ul><li>Clic en Siguiente . Patilla Posición . E specifica la posición de la pantalla donde debe aparecer el menú emergente . </li></ul></ul>
  27. 28. 4. Creación y edición de un menú emergente <ul><li>Edición del menú emergente </li></ul><ul><ul><li>Doble clic en el contorno del menú emergente . Patilla Contenido . </li></ul></ul><ul><ul><li>Clic el botón Añadir menú . Añade una línea en blanco. </li></ul></ul><ul><ul><li>Seleccionar una entrada y hacer clic en el botón Sangrar menú . La opción sangrada emergerá de la entrada anterior </li></ul></ul><ul><ul><li>Desplazar de posición las entradas desplazándolas con el ratón. </li></ul></ul>
  28. 29. 5. Optimización del documento <ul><li>Antes de exportar un documento , primero siempre hay que optimizarlo </li></ul><ul><li>Panel Optimizar . Ventana>Optimizar </li></ul><ul><ul><li>Escoger las opciones más convenientes </li></ul></ul><ul><ul><li>Ventana de documento ficha 2-arriba , permite ver los resultados de los parámetros de optimización y compararlos con el original </li></ul></ul>
  29. 30. 6. Exportación de HTML <ul><li>Definición de las preferencias en HTML </li></ul><ul><ul><li>Archivo>Configuración de HTML </li></ul></ul><ul><ul><li>Se abre el cuadro de diálogo Configuración de HTML . Las opciones que se defina n afectarán a todos los documentos que creemos en el futuro, excepto a las opciones de la ficha Específico del documento. </li></ul></ul><ul><ul><ul><li>Ficha General , elegimos un estilo de HTML </li></ul></ul></ul><ul><ul><ul><li>Ficha Tabla , cambia las propiedades de tablas HTML </li></ul></ul></ul><ul><ul><ul><li>Ficha Específico del documento , permite elegir varias preferencias para cada documento . </li></ul></ul></ul><ul><li>Exportación del documento. Archivo>Exportar </li></ul><ul><ul><li>Tipo HTML e Imágenes </li></ul></ul><ul><ul><li>Exportar divisiones </li></ul></ul><ul><ul><li>Sólo divisiones seleccionadas </li></ul></ul>

×