Taller Multimedia de Publicidad PRÁCTICA 3 Adición de contenidos a las páginas Este tutorial le muestra cómo añadir contenido a las páginas Web en Macromedia Dreamweaver 8. Puede añadir a las páginas Web contenidos de diversa índole incluyendo, entre otros, gráficos, archivos de Macromedia Flash, vídeos de Macromedia Flash y texto. Una vez añadido el contenido a las páginas, puede obtener una vista previa con un navegador, para ver cómo va a aparecer en la Web. 3.1 Inserción de imágenes En este apartado vamos a insertar 4 imágenes a la página index del sitio Café Townsend siguiendo varios métodos. 1. Vamos a insertar la imagen banner_graphic.jpg que está ubicada en la carpeta/images de nuestro sitio. 2. Una vez la hayamos insertado haz clic fuera de la tabla para quitar la selección de la imagen. 3. Guarda el trabajo. Ahora vamos a insertar una imagen utilizando el menú insertar: 1. Haz clic en la tercera fila de la primera tabla (dos filas debajo del gráfico que acabas de insertar). 2. Seleccione Insertar / Imagen. 3. En el cuadro de diálogo encontrarás seleccionar origen de imagen. Accede a la carpeta de imágenes de Café Townsend y selecciona body_main_header.gif y haz clic en aceptar. 4. Nota, se abrirá el cuadro opciones de accesibilidad que debes rellenar. 5. El gráfico que hemos insertado parece un color de fondo pero si te fijas tiene las esquinas redondeadas lo cual le da un aspecto interesante a la web. Otro método para añadir elementos a la web es insertar una imagen arrastrando: 1
1. Simplemente colócate en la última fila de la última tabla. 2. Vete al panel archivos (ventana>archivos) y busca el archivo body_main_footer.gif (dentro de la carpeta imágenes) y arrástralo a la última fila de la última tabla. 3. Una vez fuera de la tabla guarda la página. Insertar una imagen desde el panel activos: 1. Haz clic dentro de la columna central de la tabla de 3 columnas (la primera de color claro). 2. En el menú propiedades, selecciona centro en el menú emergente horizontal y selecciona superior en el menú emergente vertical. Esto alineará el contenido de la tabla en el centro de la celda y empujará el contenido de la celda a la parte superior de la misma. 3. Presiona intro en Windows para crear más espacio. 4. Haz clic en la ficha activos del panel archivos (ventana>activos). Aparecerá un listado de archivos ordenados por formatos (selecciona imágenes) 5. En el panel activos,selecciona el archivo street_sign.jpg 6. Dale a insertar en la parte inferior del panel activos o arrastra la imagen al punto de inserción. 3.2 Inserción y reproducción de un archivo flash A continuación vas a insertar un archivo Flash que reproduce una serie de fotografías de alimentos ofrecidos por Cafe Townsend. El archivo Flash que vas a insertar es un archivo FMA, o área de mensajería flexible. Un FMA es un tipo de aplicación Flash común que muestra un mensaje informativo. El mensaje puede cambiar según las necesidades específicas. Por ejemplo, si Cafe Townsend va a celebrar un acontecimiento especial, el FMA se podría cambiar fácilmente (sin afectar al resto de la página) para mostrar información sobre el evento en lugar de mostrar los alimentos ofrecidos. Para insertar el archivo FMA de Flash necesita insertar código HTML para incrustar el archivo en la página de Dreamweaver. Para hacer esto, lo más sencillo es insertar el archivo SWF (el archivo de película Flash exportado) en la página. Cuando se inserta un archivo SWF en Dreamweaver, Dreamweaver escribe por ti todo el código Flash HTML necesario. 2
1. Volvemos al documento de Dreamweaver con el que estamos trabajando. Clicamos en la segunda fila de la primera tabla. 2. En la ventana propiedades, seleccionamos centro en el menú emergente horizontal y medio en el menú emergente vertical. Esta acción se realiza para colocar los elementos en el centro de la celda. 3. A continuación, vamos a insertar y seleccionamos media/flash. Seleccionamos el archivo flash_fma.swf y hacemos clic en aceptar. Archivos flash Al crear activos en Macromedia Flash, se trabaja con archivos FLA, el tipo de archivo predeterminado de la aplicación Flash. Los archivos FLA tienen la extensión.fla. Por ejemplo, si está trabajando con un logotipo animado para un sitio Web, el nombre del archivo Flash podría ser animated_logo.fla. Cuando termines de trabajar con el archivo FLA en Flash, debe exportar el archivo a un formato que pueda verse en la Web con Flash Player. Al exportar archivos FLA en Flash, se convierten en archivos SWF con la extensión.swf. Los archivos SWF (no FLA) reproducen contenido Flash en un navegador; es el tipo de archivo que se debe introducir en una página Web que se está diseñando con Dreamweaver. 4. Una vez insertado vamos al menú propiedades y hacemos clic en reproducir para ver el comportamiento del archivo. Posteriormente le damos a detener y guardamos la página. 3.3 Inserción y reproducción de flash video 1. Con la página index abierta haz clic sobre el gráfico de la columna central de la tabla de tres columnas. Debes crear un espacio para que pueda entrar el vídeo. Con el marcador de posición intermitente dale a intro. 2. Posteriormente, selecciona insertar/media/flash Vídeo 3. En el cuadro de diálogo Insertar de Flash Video, selecciona Vídeo de descarga progresiva en el menú emergente Tipo de vídeo. NOTA: Flash Video El comando Insertar Flash Video de Dreamweaver le permite insertar contenido de Flash Video en las páginas Web sin tener que utilizar la herramienta de autoría de Flash. El comando inserta un componente de Flash, que muestra el contenido de Flash Video seleccionado, además de un conjunto de mandos de reproducción cuando se muestra en un navegador. El comando Insertar Flash Video le permite ofrecer contenido de vídeo a los visitantes de su sitio a través de una de estas opciones: 3
El vídeo de descarga progresiva descarga el archivo de Flash Video (FLV) al disco duro del usuario y lo reproduce. Sin embargo, a diferencia de los métodos tradicionales de entrega de vídeo de tipo "descarga y reproducción", la descarga progresiva permite iniciar la reproducción del archivo de vídeo antes de que haya finalizado la descarga. El vídeo de flujo transfiere el contenido de Flash Video y lo reproduce en la página Web de inmediato cuando se solicite. No obstante, para poder utilizar el vídeo de flujo en páginas Web, es necesario tener acceso a Macromedia Servidor de comunicaciones de Flash, el único servidor que puede transferir contenido de Flash Video. 4. En el cuadro de texto URL, especifica una ruta relativa al archivo cafe_townsend_home.flv; para ello, haz clic en Examinar, acceda al archivo cafe_townsend_home.flv (situado en la carpeta raíz cafe_townsend del sitio), y seleccione el archivo FLV. 5. Selecciona Aspecto de halo 2 en el menú emergente Apariencia. Se muestra una vista previa del aspecto seleccionado bajo el menú emergente Apariencia. La opción Apariencia determina el aspecto y funcionamiento del componente de Flash Video que incluirá el contenido de Flash Video. 6. En los cuadros de texto Ancho y Alto, sigue este procedimiento: a. En el cuadro de texto Ancho, escribe 180. b. En el cuadro de texto Alto, escribe 135 y presione Intro (Windows) o Retorno (Macintosh). 7. En el resto de opciones, deja los valores predeterminados: Restringir mantiene la misma relación de aspecto entre el ancho y alto del componente de Flash Video. Esta opción está activada de forma predeterminada. Reproducción automática especifica si el archivo se va a reproducir al abrir la página Web. Rebobinado automático especifica si el control de reproducción vuelve al punto de inicio cuando finalice la reproducción. Esta opción está desactivada de forma predeterminada. 8. Haz clic en Aceptar para cerrar el cuadro de diálogo y añadir el contenido de Flash Video a la página Web. El comando Insertar Flash Video crea un archivo de reproducción de vídeo SWF y un archivo de skin SWF que se utilizan para reproducir el contenido de Flash Video en una página Web. (Quizás tenga que hacer clic en el botón Actualizar del panel Archivos para ver los nuevos archivos.) Estos archivos se almacenan en el mismo directorio que el archivo HTML al que está añadiendo contenido de Flash Video (en este caso, la carpeta raíz cafe_townsend). Al cargar la página HTML con el contenido de Flash Video, Dreamweaver carga estos archivos como archivos dependientes (siempre que haga clic en Sí en el cuadro de diálogo Colocar archivos dependientes). 9. Guarda la página. 4
3.4 Inserción de texto Para añadir texto a la página podemos escribir directamente texto en ella o copiarlo y pegarlo de otro origen (Word,etc.). 3.4.1 Inserción del texto del cuerpo de la página 1. Abrimos el archivo sample_text.txt (en la carpeta raíz Café Townsend). Abrimos el archivo, seleccionamos todo el texto, lo copiamos. 2. Hacemos clic dentro de la tercera celda de la tabla de tres columnas y pegamos el texto. 3. Una vez insertado el texto observamos que está un poco descolocado y sin formato. Vamos a la ventana/propiedades y seleccionamos superior en el menú emergente vertical. En clases posteriores le daremos formato a ese texto con las hojas de estilo en cascada (CSS). 4. Guardamos la página. 3.4.2 Inserción de texto en una barra de navegación 1. En la primera columna de la tabla de tres columnas (color marrón rojizo) escribimos en diferentes líneas: Cocina - Chef, Artículos - Eventos especiales, Localización Menú y Contacto. Separamos las palabras con un espacio. 2. Hacemos clic en la etiqueta <td> del selector de etiquetas. 3. En el inspector de propiedades seleccionamos superior en el menú emergente Vert. 4. Guardamos la página. 3.5 Creación de vínculos 1. Un vínculo es una referencia insertada en una página Web que señala a otro documento. Puede convertir prácticamente cualquier tipo de activo en un vínculo, pero el tipo de vínculo más común es el de texto. 2. Selecciona la palabra cocina. 5
3. En el inspector de propiedades hacemos clic en la carpeta situada junto al cuadro de texto vínculo. En el cuadro de diálogo Seleccionar archivo, localiza el archivo menu.html (que está en la misma carpeta que el archivo index.html) y haz clic en Aceptar. 4. Haga clic una vez en la página para anular la selección de la palabra Cocina. El texto Cocina aparecerá subrayado y de color azul, lo que indica que se ha convertido en un vínculo. 5. Repite los pasos anteriores para vincular cada palabra o conjunto de palabras escritas para así poder navegar. Tendrá que crear seis vínculos más: para Chef, Articulos, Eventos especiales, Localización, Menú y Contacto. Enlaza con vínculos cada palabra o conjunto de palabras a la página menu.html, y al crear los vínculos tengacuidado de no incluir los espacios antes y después de las palabras o grupos de palabras. Se trata sólo de un conjunto de vínculos ficticios; en un sitio real, enlazarías cada palabra de la barra de navegación con una página específica diferente. 6. Guarda la página. Para ver los vínculos en funcionamiento presionamos F12 y comprobamos el funcionamiento de los vínculos. 6
7