CAPITULOS Introduccin a Dreamweaver El entorno de Dreamweaver CS4 El Texto Usando imgenes Uso de Tablas Creando Hipervnculos Usando elementos

Multimedia:flash,.Sonidos, animaciones, y Videos.

Docente MARCO A. CORCUERA DE LOS SANTOS.

marco2703@latinmail.com

rea: Tecnologa Audio Visual y Gestin.

ESCUELA SUPERIOR DE BELLAS ARTES PBLICA MAC EDONIO DE LA TORR E

Conceptos bsicos
Qu es Dreamweaver? Dreamweaver es un software fcil de usar que permite crear pginas web profesionales. Las funciones de edicin visual de Dreamweaver CS4 permiten agregar rpidamente diseo y funcionalidad a las pginas, sin la necesidad de programar manualmente el cdigo HTML. Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc.., de una forma muy sencilla y visual. Provee los conocimientos para disear, codificar y desarrollar sitios, pginas y aplicaciones Web, mediante herramientas tiles y sencillas de manejar, dentro de un ambiente cmodo y con todas las opciones a la mano. Tambin puede crear potentes aplicaciones de Internet. Puede trabajar en un solo entorno para crear, hacer y administrar rpidamente sitios web y aplicaciones de Internet. Mediante herramientas visuales de composicin, desarrollo rpido de aplicaciones web, con un amplio soporte para la edicin de cdigo.

Trminos Bsicos usados en este manual: World Wide Web (WWW): Es un sistema de informacin, propio de Internet. Sus caractersticas son: o Informacin por hipertexto: Diversos elementos (texto o imgenes) de la informacin que vemos en pantalla tiene vnculos con otras informaciones que pueden ser de otras fuentes. Para acceder a esta otra informacin bastar con hacer clic sobre dichos vnculos. o Grfico: En la pantalla aparece simultneamente texto, imgenes e incluso sonidos. Navegador: Es el programa que nos ofrece acceso a Internet. Debe ser capaz de comunicarse con un servidor y comprender el lenguaje de todas las herramientas que manejan la informacin de Web. Ejemplo Internet Explorer. Servidor: Se encarga de proporcionar al navegador los documentos y medios que este solicita. Utiliza un protocolo HTTP para atender las solicitudes de archivos por parte de un navegador. HTTP: Es el protocolo de transferencia de hipertexto, es decir, el protocolo que los servidores de World Wide Web utilizan para mandar documentos HTML a travs de Internet. URL (Uniform Resources Locator): Localizador Uniforme de Recursos, o dicho ms claramente, es la direccin que localiza una informacin dentro de Internet. El URL tiene dos partes separadas por: ://. La parte antes del ://, es el Protocolo, que puede ser http:// . La segunda parte es el Host, el cual da el nombre del computador al cual se accesar. El Host puede constar de varias partes separadas por un punto. La ultima parte se refiere al tipo de organizacin a la cual pertenece el computador (servidor). Por ejemplo, .gov: cuando pertenece a un Gobierno, .com: organizaciones comerciales; .edu: instituciones educacionales; .mil: organizaciones militares. Tambin hay terminaciones con las siglas del pas al que pertenecen, por ejemplo: .ve: organizaciones o empresas originales o radicadas en Venezuela. HTML: Estas siglas se corresponden con la definicin "Lenguaje para marcado de hipertexto", se trata de un lenguaje para estructurar documentos a partir de texto en World Wide Web. Este lenguaje se basa en etiquetas (instrucciones que le dicen al texto como deben mostrarse) y atributos (parmetros que dan valor a la etiqueta).

El entorno de Dreamweaver
Vamos a ver cules son los elementos bsicos de Dreamweaver, la pantalla, las barras, los paneles, etc..., para saber diferenciar entre cada uno de ellos. Aprenderemos cmo se llaman, dnde estn y para qu sirven. La pantalla inicial Al arrancar Dreamweaver aparece una pantalla inicial como sta, vamos a ver sus componentes fundamentales. As conoceremos los nombres de los diferentes elementos y ser ms fcil entender el resto del curso. La pantalla que se muestra a continuacin (y en general todas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qu elementos quiere que se vean en cada momento y dnde, como veremos ms adelante.

Las barras
La barra de ttulo

La barra de ttulo contiene el nombre del programa (Marcromedia Dreamweaver CS3) y seguidamente el nombre del documento que aparecer en el explorador y entre parntesis, su ubicacin y el nombre del archivo en formato html. En el extremo de la derecha estn los botones para minimizar, maximizar/restaurar y cerrar.

La barra de mens

Agrupadas en mens desplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver. Muchas de las operaciones se pueden hacer a partir de estos mens, pero para algunas es preferible o indispensable hacerlas desde los paneles.

La barra de herramientas estndar

La barra de herramientas estndar contiene iconos para ejecutar de forma inmediata algunas de las operaciones ms habituales, como Abrir , Guardar , etc.

La barra de herramientas de documento

La barra de herramientas de documento contiene iconos para ejecutar de forma inmediata algunas otras operaciones habituales que no incluye la barra de herramientas estndar. Estas operaciones son las de cambio de vista del documento, vista previa, etc. La barra de estado

La barra de estado nos indica en cada momento en qu etiqueta HTML nos encontramos (en la imagen al encontrarnos en un documento en blanco estamos directamente sobre la etiqueta <body>). Tambin nos es posible alternar entre los modos de seleccin, mano (para arrastrar la pgina), o zoom. En cualquier momento puedes seleccionar el zoom preferido desde el desplegable zoom y ajustar la vista al porcentaje preferido (por defecto siempre viene al 100%).

Los paneles e inspectores

Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado. A travs de la opcin Ventana, de la barra de mens, es posible mostrar u ocultar cada uno de los paneles o inspectores. Vamos a ver los ms importantes.

El inspector de Propiedades

El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado que son usadas de forma ms frecuente. Por ejemplo, cuando el elemento seleccionado sea texto mostrar el tipo de fuente, la alineacin, si est en negrita o cursiva, etc. Pulsando sobre el botn se despliega para mostrar ms opciones. Este botn se encuentra en la esquina

inferior-derecha. Seguramente ser la herramienta de Dreamweaver que ms vayas a utilizar.

La barra de herramientas Insertar o panel de objetos

Recuerda que ser mejor que no utilices caracteres especiales como acentos o ees, ni espacios en blanco en los nombres de archivos o carpetas. De esta forma te asegurars de que el servidor puede reconocer sin ningn tipo de problemas los nombres de los archivos que alojes en l. Para evitar errores de enlaces rotos o imgenes que no se muestran intenta escribir, tambin, los nombres en minscula. Algunos servidores (los que utilizan linux) distinguen entre maysculas y minsculas, por lo que si en tu pgina quieres mostrar la imagen foto1.jpg debers guardarla con ese nombre. Evitars horas perdidas buscando fallos

Permite insertar elementos en un documento sin la necesidad de recurrir al men Insertar. Los elementos estn clasificados segn su categora: tablas, texto, objetos de formulario, etc. Es posible configurar este panel para que en los botones se muestren los iconos de los objetos (como ocurre en la imagen anterior), para que se muestren los nombres de los objetos, o para que se muestren ambos a la vez.

El texto
Caractersticas del texto
Las caractersticas del texto seleccionado pueden ser definidas a travs del men Texto, y a travs del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a travs del inspector de propiedades, aunque sean menos que las que se nos ofrecen a travs del men Texto.

Formato: Permite seleccionar un formato de prrafo ya definido para HTML, que puede ser encabezado, prrafo o preformateado. Los encabezados se utilizan para establecer ttulos dentro de un documento. El formato preformateado sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno, pero al establecer el formato preformateado se respetar que hayan varios espacios en lugar de solo uno.

Fuente: Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en lugar de una sola, ya que es posible que al establecer una nica fuente el usuario no la tenga en su ordenador. El seleccionar un conjunto de fuentes posibilita que en el caso de que el usuario no tenga una fuente se aplique otra del conjunto. Por ejemplo, si seleccionamos Arial, Helvetica, Sansserif, el texto se ver con la fuente Arial, pero si esta no existe se ver en Helvetica.

Tamao: Permite cambiar el tamao del texto. El tamao lo podemos indicar en diversas unidades, en pxeles, centmetros, etc...

Color: Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las propiedades de la pgina. Si no se ha establecido ningn color en las propiedades de la pgina ni aqu, el color del texto por defecto ser el negro. Estilo: Estos botones permiten establecer si el texto aparecer en negrita o en cursiva. A travs del men Texto tambin se puede, entre otras cosas, subrayar el texto. Esta opcin no aparece en el panel de Propiedades ya que de normal no suele utilizarse, debido a que los vnculos aparecen subrayados y el subrayar texto normal podra hacer que el usuario pensara que se trata de un vnculo. Alinear: A travs de estos botones es posible establecer la alineacin del texto de una de estas cuatro formas distintas: izquierda, centrada, derecha y justificada. Lista: Estos botones permiten crear listas con vietas o listas numeradas. Sangria: Estos dos botones permiten sangrar el texto y anular la sangra. La sangra es una especie de mrgen que se establece a ambos lados del texto. En este caso caso los botones se refieren a sangra a la izquierda del texto.

Ejercicio: Crear una pgina web sencilla Con varios estilos de texto, una imagen y un enlace a otra pgina solo te llevar unos pocos minutos, y sabrs cmo trabajar con los elementos bsicos con los que estn hechas la mayora de las pginas web. Si nunca has hecho una pgina web, este es el momento para descubrir lo fcil que es.

Mi primera pgina
Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la pgina anterior como puede hacerse. Abres un documento nuevo y seleccionas la Categora Pgina bsica, HTML. Seguidamente introduce, en el documento en blanco, el texto que aparece en la imagen siguiente.

Una vez introducido el texto, vas a modificar el ttulo y el color de fondo del documento. Para ello debes hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina. Entonces se abrir una ventana como la que aparece ms abajo.

Cambia el Ttulo por Mi primera pgina. En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasar a ser de color azul. Seguidamente pulsa sobre el botn Aceptar. Ahora vas a insertar una imagen. Para insertar la imagen, ha de estar accesible para nosotros. Para ello debe encontrarse en nuestro disco duro, en un cd-rom o en un disquete, pero preferiblemente en el disco duro. Muchas de las imgenes que vemos en Internet se pueden copiar al disco duro. Al hacer clic con el botn derecho del ratn sobre la imagen que queremos traer de Internet, se abre una ventana con una opcin similar a Guardar imagen como... (dependiendo del navegador que utilices) que permite grabar dicha imagen en un fichero de nuestro disco duro.

En los navegadores ms modernos al colocar el cursor sobre una imagen aparecen estos iconos en una esquina de la imagen, si haces clic en el icono del disquete aparecer el mismo men Guardar imagen como... a que hacamos referencia anteriormente. Copia la imagen que aparece a continuacin, para luego poder insertarla en la pgina web que estamos creando. Puedes guardarla, por ejemplo, en la carpeta Mis Documentos.

Imgenes

En este tema vamos a ver cmo insertar imgenes en un documento. que ayudan a mejorar la apariencia de nuestras pginas.

Todas las pginas web acostumbran a tener un cierto nmero de imgenes, que permiten mejorar su apariencia, o dotarla de una mayor informacin visual.

Insertar una imagen

Para insertar una imagen hay que dirigirse al men Insertar, a la opcin Imagen. Despus de esto, ya es posible seleccionar una imagen a travs de la nueva ventana.

Si por algn motivo se desea insertar un BMP, este no aparecer a no ser que en Tipo se seleccione Todos los archivos. En Relativa a es posible especificar si la imagen ser relativa al documento o a la carpeta raz del sitio. Es preferible que sea relativa al Documento, ya que si se mueve todo el sitio a una ubicacin diferente, la imagen puede no verse al estar siendo buscada en la ubicacin anterior.

Lo mismo ocurre cuando se selecciona un documento para crear un vnculo. La ruta en la que se encuentra la imagen aparecer representada de una u otra forma en el campo URL de la ventana y en el campo Origen del inspector de propiedades, dependiendo de si ha sido insertada como relativa a la carpeta raz del sitio o relativa al documento. Por ejemplo, imagina que dentro de la carpeta raz del sitio (la carpeta del sitio) se encuentran la carpeta imagenes y el documento en el que deseamos insertar la imagen. Dicha imagen, llamada aulaclic.jpg, se encuentra dentro de la carpeta imagenes. En el caso de insertar la imagen como relativa al Documento la ruta sera: imagenes/aulaclic.jpg Mientras que en el caso de ser insertada como relativa a la Raz del sitio la ruta sera: /imagenes/aulaclic.jpg Ocurre lo mismo que cuando se crea un hipervnculo a un documento relativo al documento o a la carpeta raz del sitio. Si se inserta un BMP en un documento, este no aparece correctamente en Dreamweaver, aunque s en el navegador. En Dreamweaver aparecer de la siguiente forma: Esa misma imagen es la que aparece en Dreamweaver cuando no se encuentra una imagen que haba sido insertada. Esto puede ocurrir si se ha modificado el nombre de la imagen, o si se ha movido de directorio, desde fuera de Dreamweaver. En ese caso, la imagen que aparecer en el navegador ser similar a

esta: Aparece un recuadro blanco con una X roja, junto con el nombre de la imagen o el contenido del campo Alt del inspector de propiedades, que explicaremos a continuacin.

Propiedades de una imagen

Cuando seleccionamos una imagen el Inspector de propiedades muestra esta apariencia:

Desde aqu podrs acceder a distintas propiedades: Desde el campo Alt podrs asignarle una ayuda contextual a la imagen, esta se mostrar cuando coloques el ratn sobre ella, y es muy til de cara a hacer pginas accesibles ya que el texto que se escribe ser ledo por los programas lectores para invidentes. Tambin es muy til, como ya hemos visto, si la imagen por alguna razn no puede mostrarse. En Clase podrs asignarle un estilo que hayas creado anteriormente, as podrs darle alineacin, bordes e incluso tamao con slo un clic. Si le damos un valor al campo Vnculo convertiremos al imagen en un link a otra pgina. Para enlaces externos recuerda que debe empezar siempre por HTTP:// y si deseas crear un vnculo a un enlace electrnico deber empezar por mailto:

En caso de que le hayas asignado un vnculo podrs decidir en qu ventana quieres que se abra selecionando un valor en el campo Destino. Puedes asignarle un tamao de borde desde el campo Borde. Y puedes seleccionar su alineacin con respecto al texto desde el campo Alinear. Por ltimo las opciones Espacio V y Espacio H te sern muy tiles para separar la imagen del texto y as no queden demasiado pegadas a l. Estos campos indican el espacio vertical y horizontal respectivamente entre la imagen y el texto.

Cambiar el tamao de una imagen

Dentro de Dreamweaver puede modificarse el tamao de las imgenes. Dicho cambio de tamao no se aplica directamente sobre el archivo de imagen, sino que lo que vara es la visualizacin de la imagen dentro de la pgina. Es muy probable que la imagen resultante no sea de buena calidad, en comparacin de cmo podra quedar modificndola desde un editor externo, como Fireworks. Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa el icono de Dreamweaver y modificamos su tamao de varias formas diferentes:

Imagen original

Imagen con tamao modificado

Puede apreciarse claramente que los resultados no son muy satisfactorios, pero en ocasiones puede resultar til modificar el tamao de algunas imgenes aunque esto implique perder calidad. Existen dos formas de modificar el tamao. Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de los recuadros negros que aparecen alrededor de la imagen. La otra es a travs de inspector de propiedades, cambiando los campos An (anchura) o Al (altura). Estos campos aparecern en el inspector cuando est seleccionada alguna imagen. Si estos campos no contienen el tamao original de la imagen, el valor aparecer resaltado en negrita y aparecer a la derecha una flecha circular que permite volver al tamao original haciendo clic sobre ella.

10

Tablas
Todos los objetos se alinean por defecto a la izquierda de las pginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imgenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas seran imposibles de realizar. Hoy en da, la mayora de las pginas web se basan en tablas, ya que resultan de gran utilidad al mejorar notablemente las opciones de diseo. Las tablas estn formadas por un conjunto de celdas, distribuidas en filas y columnas. A continuacin tienes un ejemplo de tabla.

Insertar una tabla

Para insertar una tabla hay que dirigirse al men Insertar, a la opcin Tabla.

En la nueva ventana habr que especificar el nmero de Filas y Columnas que tendr la tabla, as como el Ancho de la tabla . El Ancho puede ser definido como Pxeles o como Porcentaje. La diferencia de uno y otro es que el ancho en Pxeles es siempre el mismo, independientemente del tamao de la ventana del navegador en la que se visualice la pgina, en cambio, el ancho en Porcentaje indica el porcentaje que va a ocupar la tabla dentro de la pgina y se ajustar al tamao de la ventana del navegador, esto permite que los usuarios que tengan pantallas grandes, aprovechen todo el ancho de pantalla.

11

Grosor del Borde indica el grosor del borde de la tabla en pxeles, por defecto se le asigna uno (1). Relleno de celda indica la distancia entre el contenido de las celdas y los bordes de stas. Espacio entre celdas indica la distancia entre las celdas de la tabla. Tambin se puede establecer si se quiere un encabezado para la tabla es recomendable utilizar encabezados en el caso de que los usuarios utilicen lectores de pantalla. Los lectores de pantalla leen los encabezados de tabla y ayudan a los usuarios de los mismos a mantener un seguimiento de la informacin de la tabla. Si queremos incluir un ttulo, lo indicamos en Texto, el ttulo aparecer fuera de la tabla. En alinear texto indicamos dnde queremos alinear el ttulo con respecto a la tabla. En Resumen: indicamos una descripcin de la tabla, los lectores de pantalla leen el texto del resumen pero dicho texto no aparece en el navegador del usuario.

Formato de tabla
Las propiedades de la tabla se especifican a travs de su inspector de propiedades.

A travs del inspector de propiedades se pueden modificar los valores que se especificaron al insertar la tabla. Al mismo tiempo, pueden indicarse otros como pueden ser el valor Alinear (que permite alinear la tabla a la izquierda, al centro o a la derecha), el color de fondo (en Col. Fondo) o de borde de la tabla (en Col. borde ), o la imagen de fondo (en Im.). Si lo que se selecciona es una celda, o un conjunto de celdas, el inspector de propiedades cambia, para permitir especificar otros valores.

La parte superior del inspector de propiedades en este caso sirve para especificar las propiedades del texto que se insertar dentro de la celda (o celdas) seleccionada. La parte inferior sirve para especificar valores propios de la celda, como puede ser el color o imagen de fondo diferentes de los especificados para la tabla global (en Fnd), el color del Borde de la celda, etc. Dos opciones que posiblemente necesites utilizar con frecuencia sern Horiz y Vert, que definen la alineacin del contenido de la celda de forma horizontal y vertical respectivamente.

Cambiar tamao de tabla y celdas

Como ya sabes, el Ancho de una tabla puede ser definido como Pxeles o como Porcentaje. El tamao de la tabla a travs del inspector de propiedades estar especificado por los valores de An (anchura) y Al (altura). Normalmente slo se especifica la anchura, no la altura.

12

Los valores An y Al de una celda siempre estn en Pxeles. No es necesario especificar ninguno de estos dos valores para las celdas, a no ser que se desee que se mantenga obligatoriamente ese tamao, y no que se ajusten al contenido o al tamao de la ventana. No solo puede establecerse el tamao de las tablas y de las celdas a travs del inspector de propiedades. Tambin es posible hacerlo manteniendo pulsado el ratn sobre alguno de los bordes, arrastrndolo hacia la posicin deseada.

Aadir y eliminar filas y columnas

Existen varias formas de aadir y eliminar filas y columnas a una tabla. Lo primero que hay que hacer es, estando el cursor en una celda o seleccionando varias, desplegar el men contextual de la tabla al pulsar con el botn derecho sobre ella, o bien abrir el men Modificar. En ambos casos aparece la opcin Tabla. Segn las celdas seleccionadas, algunas de las opciones de Tabla se podrn utilizar mientras que otras no. Para insertar una fila o una columna, hay que pulsar sobre las opciones Insertar fila o Insertar columna. La fila se inserta sobre la celda o el conjunto de celdas seleccionadas, mientras que la columna se inserta a su izquierda.

Tambin tenemos una opcin ms completa, la opcin Insertar filas o columnas.... Al seleccionarla aparece una nueva ventana, donde es posible determinar si lo que se insertarn sern filas o columnas, el nmero de ellas que se insertar, y la posicin donde se insertarn.

13

Para eliminar una fila o una columna, hay que posicionar el cursor en la fila o columna a eliminar y elegir la opcin Eliminar fila o Eliminar columna del men Tabla.

Tambin se puede seleccionar la fila o columna a borrar y pulsar la tecla de borrado ( Del o Supr)

Hiperenlaces
Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado lleva de una pgina o archivo a otra pgina o archivo. Es posible asignar un vnculo a un texto, a una imagen, o a parte de una imagen.

Crear enlaces
La forma ms sencilla de crear un enlace es a travs del inspector de propiedades. Para ello es necesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer el Vnculo en el inspector.

14

Por ejemplo, aqu hay un enlace a www.elpais.es, que es de referencia absoluta, por eso contiene HTTP://

Otra forma de crear un enlace es a travs del men Insertar, opcin Hipervnculo.

Multimedia

Vamos a ver cmo insertar elementos multimedia. En concreto, veremos cmo insertar una animacin Flash, un sonido y un vdeo.

Animaciones Flash
L Las pelculas Flash son animaciones, que al igual que los botones y el texto Flash, tienen la extensin SWF. Es frecuente verlas en las pginas iniciales de los sitios web, a modo de presentacin hacia los usuarios, aunque se pueden utilizar para realizar cualquier tipo de animacin. Estas pelculas pueden crearse mediante el programa Flash de Macromeda, y necesitan que el usuario tenga instalado el plug-in para poder ser visualizadas.

Pueden insertarse en una pgina a travs del men Insertar, Media, opcin Flash, o pulsando Ctrl+Alt+F. Tambin pueden insertarse pulsando sobre la opcin Insertar, botn Media. Flash que aparece en la pestaa Comn del panel

15

El inspector de propiedades de las pelculas Flash es prcticamente igual que el de los botones y el texto Flash, pero existen dos opciones nuevas que hacen referencia a la visualizacin de la pelcula.

La opcin Bucle indica que al finalizar la pelcula, sta volver a comenzar desde el principio. La otra es la opcin Rep. autom. (reproduccin automtica), que al estar marcada indica que nada ms cargarse la pgina comenzar a reproducirse la pelcula Flash. Si esta opcin no estuviera marcada, se mostrara nicamente el primer fotograma de la pelcula. Interesa desmarcar esta opcin cuando se desea que la reproduccin sea activada por algn comportamiento.

Sonido
No es muy habitual incluir sonido en una pgina web, ya que algunos usuarios suelen estar escuchando su propia msica cuando navegan en Internet, por lo que el escuchar tambin sonido en cada pgina que se visita puede resultar algo molesto. A pesar de ello, el incluir un sonido agradable, apropiado al contenido de la pgina, puede hacerla ms atractiva. Muchas de las pginas que contienen sonido suelen ofrecer la posibilidad de activarlo o desactivarlo, para que aquellos usuarios que no deseen escuchar el sonido de la pgina puedan desactivarlo. Los formatos de sonido ms habituales en Internet son, fundamentalmente, el MP3, el WAV y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que tambin pueden utilizarse. Lo ideal es incluir algn archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad. Para insertar un archivo de audio en un documento tienes que dirigirte al men Insertar, Meda, opcin Plug-in. A la derecha tienes un ejemplo de un archivo de sonido, para el que se muestran los controles de audio. Si lo deseas, puedes reproducirlo pulsando sobre los controles (recuerda encender los altavoces, si los tienes). En Dreamweaver no se mostrarn los controles de audio. Todos los archivos que son insertados como plug-in aparecen representadas dentro de Dreamweaver por una imagen como la de la izquierda.

En el inspector de propiedades pueden establecerse la altura y la anchura con la que se mostrarn los controles de audio, mediante Al y An. En el caso de no especificar ningn tamao, se mostrar el tamao por defecto de los controles, como ocurre en el ejemplo de arriba. Si lo que se desea es que se escuche el sonido en la pgina, pero que no se muestren los controles de audio, los campos Al y An deben valer cero. Los sonidos se reproducen automticamente al cargarse la pgina, y se reproducen solamente una vez. Estos valores no pueden definirse a travs del inspector de propiedades, pero s a travs del cdigo. Una vez definidos los podremos cambiar desde el inspector de propiedades con el botn Parmetros... Por ejemplo, el archivo anterior apareca en el cdigo como <embed src="varios/audio.mid"></embed>. Pero para que no se reproduzca automticamente se ha aadido autostart="false", y para que se reproduzca continuamente se ha aadido loop="true". La lnea de cdigo del archivo de audio ha quedado del siguiente modo: <embed src="varios/audio.mid" autostart="false" loop="true"></embed> En el Inspector de propiedades del sonido, el botn Parmetros... abre un cuadro de dilogo donde podemos cambiar esos valores una vez introducidos.

16

Para poder hacer que el audio pueda activarse y desactivarse cuando no se muestran los controles, es necesario insertar una serie de comportamientos que se encarguen de esa tarea. Si quieres poner msica de fondo en una pgina web, sin que aparezcan los controles de audio, puedes escribir este cdigo directamente en la vista Cdigo. <bgsound src="cancion1.wav" loop="-1"> Insrtalo despus de la etiqueta </title> Con el parmetro loop puedes decidir cuntas veces quieres que se reproduzca, 1, 2, 3 ... (con -1 se reproduce de modo continuo).

Vdeos
En ocasiones puede interesar incluir algn vdeo en una pgina web, pero hay que tener en cuenta que los vdeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse. Los formatos de vdeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV. Para insertar un archivo de vdeo en un documento tienes que dirigirte al men Insertar, Meda, opcin Plug-in. A la derecha tienes un ejemplo de un archivo de vdeo, para el que se muestran los controles de vdeo. Puedes reproducirlo pulsando sobre los controles.

El inspector de propiedades para los archivos de vdeo insertados de esta forma es el mismo que el de los archivos de audio, ya que ambos se insertan como Plug-in.

Los vdeos tambin se reproducen automticamente al cargarse la pgina, y se reproducen solamente una vez. Estos valores pueden cambiarse a travs del cdigo, del mismo modo que en el caso de los archivos de audio, aadiendo autostart="false" y loop="true". Todos los objetos insertados a travs de la opcin Plug-in precisan que el usuario tenga instalado un reproductor o un plug-in apropiado para reproducirlos. En el campo Origen del inspector de propiedades se establece el archivo vinculado (el archivo de audio o de vdeo) que ha de reproducirse. En el caso de que el usuario no tenga instalado ningn plug-in adecuado, puede establecerse en el campo URL plg una pgina en la que pueda encontrarlo.

17