Dreamweaver CS4 / Guía Dw.008

Transcripción

1 1 Dreamweaver CS4 / Guía Dw.008 INTERACTIVIDAD Contenidos de esta guía Colocar archivos de Photoshop Efectos de animación a imágenes y textos Cambio de imagen SWAP Colocar animaciones (swf, flv, video quicktime) Colocar y descargar música 2008 Material exclusivo de Academia MacPC

2 Colocar archivos de Photoshop 2 INTERACTIVIDAD Figura 1 Dreamweaver permite interactuar con aplicaciones que permiten interactividad y hoy con la versión CS3 podemos aplicar efectos que trae el programa. PHOTOSHOP: A partir de la versión CS4 de dreamweaver nos permite colocar archivos PSD de photoshop. Figura 2 UN PSD CON LAS CAPAS Y TEXTO Podemos utilizar un archivo psd con varias capas de imágenes, filtros y textos y estar guardado con la extensión PSD. Desde dreamweaver lo insertamos como una imagen.(figura 5). VENTANA DE OPTIMIZACIÓN DE PSD Figura 3 Como no podemos colocar un PSD ya que este pesa demasiado para la web, cuando importamos un PSD (con el proceso de colocar una imagen), dreamweaver nos muestra una ventana para optimizar el archivo y crear la versión optimizada.(figura 6). MODOS DE ACTUALIZAR herramientas para editar la imagen Para actualizar el archivo clic en la herramienta del icono de photoshop de la paleta propiedades, una vez hecho los cambios guardar el PSD, y al volver al Dreamweaver hacer clic en la imagen y actualizar la imagen. (Figura 7). Hacer los cambios en photoshop,. guardar el archivo Seleccionar la imagen en Dreamweaver y actualizar.

3 Efectos de animación a imágenes y textos 3 Figura 4 EFECTOS A IMÁGENES Y TEXTOS DE DREAMWEAVER Dreamweaver CS3 trae opciones de aplicar efectos de movimientos a imágenes y textos, sin la necesidad de tener que utilizar otra herramientas. Esta opción se encuentra en la paleta Behavior o Comportamientos, seleccionamos el elemento y desde la opción del signo seleccionamos la opción Efectos. (Figura 4). Figura 5 Además que cuando aplicas un efecto a una imagen tienes la posibilidad de manipular con que acción del mouse quieres que ocurra el efecto: (Figura 5). onclick: cuando haces click sobre la imagen. ondblclick: cuando haces doble click sobre la imagen. onmouseover: cuando pasas el puntero sobre la imagen. Figura 6 onmouseout: cuando una vez que pasaste sobre la imagen y sacas el puntero se ejecuta el efecto. Cuando quieras aplicar algún efecto a un texto recuerda que este debe tener aplicado el formato de parrafo, encabezado (h1-h6) o un estilo de clase. (Figura 6)

4 Cambio de Imagen SWAP 4 Figura 7 REQUERIMIENTOS Antes de empezar debes tener en cuenta la medida de los elementos con los que vas a trabajar, o sea tener las imágenes pequeñas (solo si quieres, puedes utilizar un texto tambien). Figura 8 Una vez lista la estructura debes tener o utilizar una imagen en la cual se cargaran las demás imagenes. Es necesario que le coloques un nombre haciendo un click sobre ella y escribirlo en la paleta propiedades.(figura 7). Una vez marcada la imagen seleccionas la pequeña o el texto y desde la paleta Window/ Behavior aplicas el Swap Image, que se encuentra en el icono (Figura 8). Aparecerá una ventana en la cual te aparecerán todas las imágenes del HTML, como anteriormente se le colocó un nombre a la imagen sabremos cual seleccionar y luego cargaremos la imagen grande que pertenece al vinculo seleccionado. (Figura 9). Figura 9 El vinculo quedará con un comportamiento de cuando pasen sobre él y muestre la imagen y otra en que se restaure la anterior cuando el puntero salga de la imagen. (Figura 10). Figura 10

5 Colocar animaciones 5 Figura 11 COLOCAR UN SWF: Para colocar una animación o un sitio hecho completamente en flash debemos crear una tabla o caja, colocar el cursor adentro e ir al menú insertar/media/flash, también se puede encontrar la opcíon en la paleta Insertar/ común/opción 7 media. (Figura 11). Figura 12 Editar el flash, resetear su tamaño y darle play para verlo COLOCAR UN FLV: Un.flv (flash video) es un formato de video para ser incrustado o vinculado a un archivo.fla o también ser vinculado directamente a dreamweaver, para ello hay que ir al menú insertar/media/flash video, también se puede encontrar la opcíon en la paleta Insertar/común/opción 7 media. Cuando cargamos un FLV nos da la opción de elegir que estilo de botones colocar para manejar la película, detectar y cambiar el tamaño, decidir si emprezará con Stop o Play, y el mensaje que saldrá si la persona no tiene instalado el Flash Player. (Figura 12). Figura 13 COLOCAR UN VIDEO QUICKTIME: El formato de quicktime es.mov por lo cual este formato para insertarlo en el html debemos ir al menú insertar/media/ plugin, lo bueno es que podemos manipular que parte de la caja del video ver. Colocar el tamaño Probar la película desde aquí Cuando se coloca un video es necesario que manualmente le demos las medidas con el cuidado de mantener las proporciones ya que podriamos pasar a cortar la visualización de una parte de la película. (Figura 13).

6 Colocar y descargar música 6 FORMATOS: Figura 14 Los tipos de formatos que se pueden utilizar son mp3 y wav. Para ello debes colocar el puntero en donde quieres colocar el reproductor ir al menú insertar/media/plugin, y podemos manipular el largo que queremos para ajustarlo a nuestra gráfica. (Figura 14). ESCUCHAR Y/O DESCARGAR: Figura 15 Además de colocar la música de modo que se reproduzca altiro, muchas veces es más óptimo colocar la música de manera que se abra en una nueva ventana o que se descargue. Para ello debes seleccionar la palabra o la imagen y colocar como vinculo el archivo mp3 o wav, y además colocar un target de _blank para que se abra en una nueva ventana. (Figura 15). Si quieres que se descargue automatiamente debes comprimir el archivo en.zip o.rar. SE PROHIBE TODA REPRODUCCION PARCIAL O TOTAL DE ESTE MATERIAL, EN CUALQUIER FORMATO IMPRESO O DIGITAL, QUE NO SEA UTILIZADO PARA LOS FINES EDUCATIVOS DE ACADEMIAMACPC. ACADEMIAMACPC