CAPITULOS Introducción a Dreamweaver El entorno de Dreamweaver CS4 El Texto Usando imágenes Uso de Tablas Creando Hipervínculos Usando elementos

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

Docente MARCO A. CORCUERA DE LOS SANTOS.
marco2703@latinmail.com

Área: Tecnología Audio Visual y Gestión.

ESCUELA SUPERIOR DE BELLAS ARTES PÚBLICA “MAC EDONIO DE LA TORR E”

com: organizaciones comerciales. .Conceptos básicos ¿Qué es Dreamweaver? Dreamweaver es un software fácil de usar que permite crear páginas web profesionales. codificar y desarrollar sitios. imágenes e incluso sonidos. HTTP: Es el protocolo de transferencia de hipertexto.edu: instituciones educacionales. desarrollo rápido de aplicaciones web. el cual da el nombre del computador al cual se accesará. propio de Internet. el protocolo que los servidores de World Wide Web utilizan para mandar documentos HTML a través de Internet. Términos Básicos usados en este manual:  World Wide Web (WWW): Es un sistema de información. de una forma muy sencilla y visual. La segunda parte es el Host. Las funciones de edición visual de Dreamweaver CS4 permiten agregar rápidamente diseño y funcionalidad a las páginas. por ejemplo: . o dicho más claramente. es decir. Por ejemplo. mediante herramientas útiles y sencillas de manejar. Servidor: Se encarga de proporcionar al navegador los documentos y medios que este solicita. . Puede trabajar en un solo entorno para crear. También hay terminaciones con las siglas del país al que pertenecen. Ejemplo Internet Explorer. Mediante herramientas visuales de composición. que puede ser http:// . Sus características son: o Información por hipertexto: Diversos elementos (texto o imágenes) de la información que vemos en pantalla tiene vínculos con otras informaciones que pueden ser de otras fuentes.. Este lenguaje se basa en etiquetas (instrucciones que le dicen al texto como deben mostrarse) y atributos (parámetros que dan valor a la etiqueta)..     2 . páginas y aplicaciones Web. La parte antes del ://. URL (Uniform Resources Locator): Localizador Uniforme de Recursos. . insertar comportamientos JavaScript.mil: organizaciones militares.  HTML: Estas siglas se corresponden con la definición "Lenguaje para marcado de hipertexto". . Para acceder a esta otra información bastará con hacer clic sobre dichos vínculos.ve: organizaciones o empresas originales o radicadas en Venezuela. Utiliza un protocolo HTTP para atender las solicitudes de archivos por parte de un navegador. Debe ser capaz de comunicarse con un servidor y comprender el lenguaje de todas las herramientas que manejan la información de Web. Navegador: Es el programa que nos ofrece acceso a Internet.gov: cuando pertenece a un Gobierno. El Host puede constar de varias partes separadas por un punto. o Gráfico: En la pantalla aparece simultáneamente texto. sin la necesidad de programar manualmente el código HTML. etc. se trata de un lenguaje para estructurar documentos a partir de texto en World Wide Web. Se puede crear tablas. El URL tiene dos partes separadas por: ://. editar marcos. Provee los conocimientos para diseñar. es la dirección que localiza una información dentro de Internet. con un amplio soporte para la edición de código. trabajar con capas. dentro de un ambiente cómodo y con todas las opciones a la mano. La ultima parte se refiere al tipo de organización a la cual pertenece el computador (servidor). es el Protocolo. También puede crear potentes aplicaciones de Internet. hacer y administrar rápidamente sitios web y aplicaciones de Internet.

para saber diferenciar entre cada uno de ellos. La pantalla que se muestra a continuación (y en general todas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador. la pantalla. Las barras La barra de título La barra de título contiene el nombre del programa (Marcromedia Dreamweaver CS3) y seguidamente el nombre del documento que aparecerá en el explorador y entre paréntesis. su ubicación y el nombre del archivo en formato html. etc. las barras. como veremos más adelante. Aprenderemos cómo se llaman. ya que cada usuario puede decidir qué elementos quiere que se vean en cada momento y dónde. vamos a ver sus componentes fundamentales. En el extremo de la derecha están los botones para minimizar.El entorno de Dreamweaver Vamos a ver cuáles son los elementos básicos de Dreamweaver. La pantalla inicial Al arrancar Dreamweaver aparece una pantalla inicial como ésta. dónde están y para qué sirven. Así conoceremos los nombres de los diferentes elementos y será más fácil entender el resto del curso. los paneles.. La barra de menús 3 .. maximizar/restaurar y cerrar..

Los paneles e inspectores Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas. de la barra de menús. si está en negrita o cursiva. 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 estándar. o zoom. la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado. Pulsando sobre el botón se despliega para mostrar más opciones. cuando el elemento seleccionado sea texto mostrará el tipo de fuente. 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>). Guardar . 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%). veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver. La diferencia entre panel e inspector es que. El inspector de Propiedades El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado que son usadas de forma más frecuente. por ejemplo. es posible mostrar u ocultar cada uno de los paneles o inspectores. pero para algunas es preferible o indispensable hacerlas desde los paneles. como Abrir . Vamos a ver los más importantes. la alineación. También nos es posible alternar entre los modos de selección. vista previa. Al hacer clic en Insertar. La barra de herramientas estándar La barra de herramientas estándar contiene iconos para ejecutar de forma inmediata algunas de las operaciones más habituales. que se conocen como paneles o inspectores. Muchas de las operaciones se pueden hacer a partir de estos menús. mano (para arrastrar la página). Por ejemplo. Este botón se encuentra en la esquina 4 . etc.Agrupadas en menús desplegables. Estas operaciones son las de cambio de vista del documento. en general. etc. A través de la opción Ventana.

Evitarás horas perdidas buscando fallos Permite insertar elementos en un documento sin la necesidad de recurrir al menú Insertar. Algunos servidores (los que utilizan linux) distinguen entre mayúsculas y minúsculas. El texto Características del texto Las características del texto seleccionado pueden ser definidas a través del menú Texto. los nombres en minúscula. objetos de formulario. ni espacios en blanco en los nombres de archivos o carpetas. De esta forma te asegurarás de que el servidor puede reconocer sin ningún tipo de problemas los nombres de los archivos que alojes en él.jpg deberás guardarla con ese nombre. Los encabezados se utilizan para establecer títulos dentro de un documento. que puede ser encabezado. aunque sean menos que las que se nos ofrecen a través del menú Texto. 5 . Formato: Permite seleccionar un formato de párrafo ya definido para HTML. para que se muestren los nombres de los objetos. Es posible configurar este panel para que en los botones se muestren los iconos de los objetos (como ocurre en la imagen anterior). Vamos a ver las posibilidades que se nos ofrecen a través del inspector de propiedades. Los elementos están clasificados según su categoría: tablas. Seguramente será la herramienta de Dreamweaver que más vayas a utilizar. Para evitar errores de enlaces rotos o imágenes que no se muestran intenta escribir. pero al establecer el formato preformateado se respetará que hayan varios espacios en lugar de solo uno. o para que se muestren ambos a la vez. y a través del inspector de propiedades. por ejemplo. El formato preformateado sirve para que el texto aparezca tal cual ha sido escrito. etc. por lo que si en tu página quieres mostrar la imagen foto1. La barra de herramientas Insertar o panel de objetos Recuerda que será mejor que no utilices caracteres especiales como acentos o eñes.inferior-derecha. texto. si entre dos palabras se introducen varios espacios solo se considera uno. también. párrafo o preformateado.

Si nunca has hecho una página web.. el color del texto por defecto será el negro. este es el momento para descubrir lo fácil que es. Color: Permite seleccionar el color de la fuente. Seguidamente introduce. Por ejemplo. subrayar el texto. Helvetica. La sangría es una especie de márgen que se establece a ambos lados del texto. una imagen y un enlace a otra página solo te llevará unos pocos minutos. Mi primera página Lo primero que tienes que hacer es abrir Dreamweaver.. Ya has visto en la página anterior como puede hacerse. ya que es posible que al establecer una única fuente el usuario no la tenga en su ordenador. Sangria: Estos dos botones permiten sangrar el texto y anular la sangría. centímetros. el texto se verá con la fuente Arial. Estilo: Estos botones permiten establecer si el texto aparecerá en negrita o en cursiva. el texto que aparece en la imagen siguiente. si seleccionamos Arial. etc. pero si esta no existe se verá en Helvetica. Aparecen conjuntos de fuentes en lugar de una sola. A través del menú Texto también se puede. centrada. derecha y justificada. ignorando el color que se haya definido en las propiedades de la página. Si no se ha establecido ningún color en las propiedades de la página ni aquí. en el documento en blanco. Esta opción no aparece en el panel de Propiedades ya que de normal no suele utilizarse. El tamaño lo podemos indicar en diversas unidades.Fuente: Permite seleccionar un conjunto de fuentes. en píxeles. Alinear: A través de estos botones es posible establecer la alineación del texto de una de estas cuatro formas distintas: izquierda. Sansserif. El seleccionar un conjunto de fuentes posibilita que en el caso de que el usuario no tenga una fuente se aplique otra del conjunto. En este caso caso los botones se refieren a sangría a la izquierda del texto. Lista: Estos botones permiten crear listas con viñetas o listas numeradas. debido a que los vínculos aparecen subrayados y el subrayar texto normal podría hacer que el usuario pensara que se trata de un vínculo. y sabrás cómo trabajar con los elementos básicos con los que están hechas la mayoría de las páginas web. 6 . Ejercicio: Crear una página web sencilla Con varios estilos de texto. entre otras cosas. HTML. Tamaño: Permite cambiar el tamaño del texto. Abres un documento nuevo y seleccionas la Categoría Página básica.

(dependiendo del navegador que utilices) que permite grabar dicha imagen en un fichero de nuestro disco duro. Para ello debes hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página. vas a modificar el título y el color de fondo del documento. En Color de Fondo escribe #CCCCFF.Una vez introducido el texto. en un cd-rom o en un disquete. Entonces se abrirá una ventana como la que aparece más abajo. pero preferiblemente en el disco duro.. Para insertar la imagen. ha de estar accesible para nosotros. 7 . Muchas de las imágenes que vemos en Internet se pueden copiar al disco duro. se abre una ventana con una opción similar a Guardar imagen como. Al hacer clic con el botón derecho del ratón sobre la imagen que queremos traer de Internet. Para ello debe encontrarse en nuestro disco duro. de este modo el fondo del documento pasará a ser de color azul. Seguidamente pulsa sobre el botón Aceptar.. Cambia el Título por Mi primera página. Ahora vas a insertar una imagen.

ya que si se mueve todo el sitio a una ubicación diferente.. la imagen puede no verse al estar siendo buscada en la ubicación anterior. para luego poder insertarla en la página web que estamos creando. que ayudan a mejorar la apariencia de nuestras páginas. Puedes guardarla. En Relativa a es posible especificar si la imagen será relativa al documento o a la carpeta raíz del sitio. Imágenes En este tema vamos a ver cómo insertar imágenes en un documento. Después de esto. si haces clic en el icono del disquete aparecerá el mismo menú Guardar imagen como. en la carpeta Mis Documentos. 8 . ya es posible seleccionar una imagen a través de la nueva ventana. a la opción Imagen. Es preferible que sea relativa al Documento. Todas las páginas web acostumbran a tener un cierto número de imágenes. este no aparecerá a no ser que en Tipo se seleccione Todos los archivos. Copia la imagen que aparece a continuación. por ejemplo. a que hacíamos referencia anteriormente. Insertar una imagen Para insertar una imagen hay que dirigirse al menú Insertar..En los navegadores más modernos al colocar el cursor sobre una imagen aparecen estos iconos en una esquina de la imagen. que permiten mejorar su apariencia. o dotarla de una mayor información visual. Si por algún motivo se desea insertar un BMP.

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. aunque sí en el navegador. En el caso de insertar la imagen como relativa al Documento la ruta sería: imagenes/aulaclic. En Dreamweaver aparecerá de la siguiente forma: Esa misma imagen es la que aparece en Dreamweaver cuando no se encuentra una imagen que había sido insertada. Por ejemplo. Propiedades de una imagen Cuando seleccionamos una imagen el Inspector de propiedades muestra esta apariencia: Desde aquí podrás acceder a distintas propiedades: Desde el campo Alt podrás asignarle una ayuda contextual a la imagen.jpg Ocurre lo mismo que cuando se crea un hipervínculo a un documento relativo al documento o a la carpeta raíz del sitio. así podrás darle alineación. Si le damos un valor al campo Vínculo convertiremos al imagen en un link a otra página. este no aparece correctamente en Dreamweaver. se encuentra dentro de la carpeta imagenes. Si se inserta un BMP en un documento. En Clase podrás asignarle un estilo que hayas creado anteriormente. imagina que dentro de la carpeta raíz del sitio (la carpeta del sitio) se encuentran la carpeta imagenes y el documento en el que deseamos insertar la imagen. desde fuera de Dreamweaver. Para enlaces externos recuerda que debe empezar siempre por HTTP:// y si deseas crear un vínculo a un enlace electrónico deberá empezar por mailto: 9 . o si se ha movido de directorio. bordes e incluso tamaño con sólo un clic. y es muy útil de cara a hacer páginas accesibles ya que el texto que se escribe será leído por los programas lectores para invidentes. la imagen que aparecerá en el navegador será similar a esta: Aparece un recuadro blanco con una X roja. En ese caso. Esto puede ocurrir si se ha modificado el nombre de la imagen. junto con el nombre de la imagen o el contenido del campo Alt del inspector de propiedades.Lo mismo ocurre cuando se selecciona un documento para crear un vínculo. dependiendo de si ha sido insertada como relativa a la carpeta raíz del sitio o relativa al documento. llamada aulaclic. si la imagen por alguna razón no puede mostrarse.jpg Mientras que en el caso de ser insertada como relativa a la Raíz del sitio la ruta sería: /imagenes/aulaclic. Dicha imagen. esta se mostrará cuando coloques el ratón sobre ella. como ya hemos visto. También es muy útil. que explicaremos a continuación.jpg.

cambiando los campos An (anchura) o Al (altura). Una de ellas es. una vez seleccionada la imagen. Estos campos aparecerán en el inspector cuando esté seleccionada alguna imagen. Puedes asignarle un tamaño de borde desde el campo Borde. Por ejemplo. La otra es a través de inspector de propiedades. Estos campos indican el espacio vertical y horizontal respectivamente entre la imagen y el texto. Si estos campos no contienen el tamaño original de la imagen. Dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen. como Fireworks. Existen dos formas de modificar el tamaño. Cambiar el tamaño de una imagen Dentro de Dreamweaver puede modificarse el tamaño de las imágenes. pero en ocasiones puede resultar útil modificar el tamaño de algunas imágenes aunque esto implique perder calidad. sino que lo que varía es la visualización de la imagen dentro de la página. Es muy probable que la imagen resultante no sea de buena calidad. vamos a ver lo que ocurre si insertamos una imagen que representa el icono de Dreamweaver y modificamos su tamaño de varias formas diferentes: Imagen original Imagen con tamaño modificado Puede apreciarse claramente que los resultados no son muy satisfactorios. en comparación de cómo podría quedar modificándola desde un editor externo. arrastrar con el puntero alguno de los recuadros negros que aparecen alrededor de la imagen. el valor aparecerá resaltado en negrita y aparecerá a la derecha una flecha circular que permite volver al tamaño original haciendo clic sobre ella. Y puedes seleccionar su alineación con respecto al texto desde el campo Alinear.En caso de que le hayas asignado un vínculo podrás decidir en qué ventana quieres que se abra selecionando un valor en el campo Destino. Por último las opciones Espacio V y Espacio H te serán muy útiles para separar la imagen del texto y así no queden demasiado pegadas a él. 10 .

ya que resultan de gran utilidad al mejorar notablemente las opciones de diseño. y otra serie de cosas que sin las tablas serían imposibles de realizar. 11 . Hoy en día. La diferencia de uno y otro es que el ancho en Píxeles es siempre el mismo. la mayoría de las páginas web se basan en tablas. en cambio. colocar imágenes al lado de un bloque de texto.Tablas Todos los objetos se alinean por defecto a la izquierda de las páginas web. el ancho en Porcentaje indica el porcentaje que va a ocupar la tabla dentro de la página y se ajustará al tamaño de la ventana del navegador. aprovechen todo el ancho de pantalla. A continuación tienes un ejemplo de tabla. a la opción Tabla. El Ancho puede ser definido como Píxeles o como Porcentaje. Insertar una tabla Para insertar una tabla hay que dirigirse al menú Insertar. En la nueva ventana habrá que especificar el número de Filas y Columnas que tendrá la tabla. esto permite que los usuarios que tengan pantallas grandes. independientemente del tamaño de la ventana del navegador en la que se visualice la página. Las tablas están formadas por un conjunto de celdas. pero gracias a las tablas es posible distribuir el texto en columnas. así como el Ancho de la tabla . distribuidas en filas y columnas.

El tamaño de la tabla a través del inspector de propiedades estará especificado por los valores de An (anchura) y Al (altura). el Ancho de una tabla puede ser definido como Píxeles o como Porcentaje. A través del inspector de propiedades se pueden modificar los valores que se especificaron al insertar la tabla. Los lectores de pantalla leen los encabezados de tabla y ayudan a los usuarios de los mismos a mantener un seguimiento de la información de la tabla. el color del Borde de la celda. Formato de tabla Las propiedades de la tabla se especifican a través de su inspector de propiedades. 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. al centro o a la derecha). pueden indicarse otros como pueden ser el valor Alinear (que permite alinear la tabla a la izquierda. no la altura. o un conjunto de celdas. lo indicamos en Texto. o la imagen de fondo (en Im. Si queremos incluir un título. borde ). que definen la alineación del contenido de la celda de forma horizontal y vertical respectivamente.Grosor del Borde indica el grosor del borde de la tabla en píxeles. También 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. etc. los lectores de pantalla leen el texto del resumen pero dicho texto no aparece en el navegador del usuario. Si lo que se selecciona es una celda. En alinear texto indicamos dónde queremos alinear el título con respecto a la tabla. por defecto se le asigna uno (1). Dos opciones que posiblemente necesites utilizar con frecuencia serán Horiz y Vert. Cambiar tamaño de tabla y celdas Como ya sabes. Relleno de celda indica la distancia entre el contenido de las celdas y los bordes de éstas. Al mismo tiempo. el título aparecerá fuera de la tabla. Espacio entre celdas indica la distancia entre las celdas de la tabla.). Normalmente sólo se especifica la anchura. Fondo) o de borde de la tabla (en Col. el inspector de propiedades cambia. el color de fondo (en Col. En Resumen: indicamos una descripción de la tabla. 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). 12 .

Para insertar una fila o una columna. hay que pulsar sobre las opciones Insertar fila o Insertar columna. 13 . Según las celdas seleccionadas.. Lo primero que hay que hacer es. En ambos casos aparece la opción Tabla. donde es posible determinar si lo que se insertarán serán filas o columnas. la opción Insertar filas o columnas.. y no que se ajusten al contenido o al tamaño de la ventana. a no ser que se desee que se mantenga obligatoriamente ese tamaño. También es posible hacerlo manteniendo pulsado el ratón sobre alguno de los bordes. estando el cursor en una celda o seleccionando varias.. No solo puede establecerse el tamaño de las tablas y de las celdas a través del inspector de propiedades. También tenemos una opción más completa. La fila se inserta sobre la celda o el conjunto de celdas seleccionadas. algunas de las opciones de Tabla se podrán utilizar mientras que otras no. Añadir y eliminar filas y columnas Existen varias formas de añadir y eliminar filas y columnas a una tabla.Los valores An y Al de una celda siempre están en Píxeles. mientras que la columna se inserta a su izquierda. el número de ellas que se insertará. arrastrándolo hacia la posición deseada. desplegar el menú contextual de la tabla al pulsar con el botón derecho sobre ella. No es necesario especificar ninguno de estos dos valores para las celdas. Al seleccionarla aparece una nueva ventana. y la posición donde se insertarán. o bien abrir el menú Modificar.

que al ser pulsado lleva de una página o archivo a otra página o archivo. o a parte de una imagen. Para ello es necesario seleccionar el texto o el objeto que va a servir de enlace. Crear enlaces La forma más sencilla de crear un enlace es a través del inspector de propiedades. hay que posicionar el cursor en la fila o columna a eliminar y elegir la opción Eliminar fila o Eliminar columna del menú Tabla. o vínculo. Es posible asignar un vínculo a un texto. También se puede seleccionar la fila o columna a borrar y pulsar la tecla de borrado (Del o Supr) Hiperenlaces Un hiperenlace.Para eliminar una fila o una columna. hipervínculo. no es más que un enlace. a una imagen. 14 . y seguidamente establecer el Vínculo en el inspector.

es. Animaciones Flash L Las películas Flash son animaciones. En concreto.Por ejemplo. Flash que aparece en la pestaña Común del panel 15 . Multimedia Vamos a ver cómo insertar elementos multimedia. un sonido y un vídeo. que al igual que los botones y el texto Flash. aquí hay un enlace a www. o pulsando Ctrl+Alt+F. opción Hipervínculo. a modo de presentación hacia los usuarios. opción Flash. y necesitan que el usuario tenga instalado el plug-in para poder ser visualizadas. Estas películas pueden crearse mediante el programa Flash de Macromedía. Es frecuente verlas en las páginas iniciales de los sitios web. Media. veremos cómo insertar una animación Flash. tienen la extensión SWF.elpais. que es de referencia absoluta. aunque se pueden utilizar para realizar cualquier tipo de animación. por eso contiene HTTP:// Otra forma de crear un enlace es a través del menú Insertar. Pueden insertarse en una página a través del menú Insertar. botón Media. También pueden insertarse pulsando sobre la opción Insertar.

pero que no se muestren los controles de audio. y se reproducen solamente una vez. apropiado al contenido de la página. (reproducción automática). ya que algunos usuarios suelen estar escuchando su propia música cuando navegan en Internet. para el que se muestran los controles de audio. el MP3. Por ejemplo. se mostraría únicamente el primer fotograma de la película. Una vez definidos los podremos cambiar desde el inspector de propiedades con el botón Parámetros. Muchas de las páginas que contienen sonido suelen ofrecer la posibilidad de activarlo o desactivarlo. abre un cuadro de diálogo donde podemos cambiar esos valores una vez introducidos. Los sonidos se reproducen automáticamente al cargarse la página.El inspector de propiedades de las películas Flash es prácticamente igual que el de los botones y el texto Flash.. En el inspector de propiedades pueden establecerse la altura y la anchura con la que se mostrarán los controles de audio. si los tienes). mediante Al y An. A pesar de ello. el archivo anterior aparecía en el código como <embed src="varios/audio. Sonido No es muy habitual incluir sonido en una página web. el botón Parámetros. La línea de código del archivo de audio ha quedado del siguiente modo: <embed src="varios/audio. La otra es la opción Rep. 16 .. Medía. En Dreamweaver no se mostrarán los controles de audio. Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio. Si lo deseas. para que aquellos usuarios que no deseen escuchar el sonido de la página puedan desactivarlo. Todos los archivos que son insertados como plug-in aparecen representadas dentro de Dreamweaver por una imagen como la de la izquierda.mid" autostart="false" loop="true"></embed> En el Inspector de propiedades del sonido.. La opción Bucle indica que al finalizar la película. que al estar marcada indica que nada más cargarse la página comenzará a reproducirse la película Flash. pero existen dos opciones nuevas que hacen referencia a la visualización de la película. autom. como ocurre en el ejemplo de arriba. A la derecha tienes un ejemplo de un archivo de sonido.mid"></embed>. y que no por ello sea de mala calidad. opción Plug-in. Si lo que se desea es que se escuche el sonido en la página. ésta volverá a comenzar desde el principio. los campos Al y An deben valer cero. Para insertar un archivo de audio en un documento tienes que dirigirte al menú Insertar. por lo que el escuchar también sonido en cada página que se visita puede resultar algo molesto.. y para que se reproduzca continuamente se ha añadido loop="true". Si esta opción no estuviera marcada. Pero para que no se reproduzca automáticamente se ha añadido autostart="false". Estos valores no pueden definirse a través del inspector de propiedades. el WAV y en algunas ocasiones el MIDI. se mostrará el tamaño por defecto de los controles. aunque existen otros formatos diferentes que también pueden utilizarse. puede hacerla más atractiva. Los formatos de sonido más habituales en Internet son. pero sí a través del código. fundamentalmente. puedes reproducirlo pulsando sobre los controles (recuerda encender los altavoces. En el caso de no especificar ningún tamaño. Interesa desmarcar esta opción cuando se desea que la reproducción sea activada por algún comportamiento. el incluir un sonido agradable.

Los formatos de vídeo que suelen utilizarse en Internet son el AVI. ya que ambos se insertan como Plug-in. Si quieres poner música de fondo en una página web. 3 . Todos los objetos insertados a través de la opción Plug-in precisan que el usuario tenga instalado un reproductor o un plug-in apropiado para reproducirlos. es necesario insertar una serie de comportamientos que se encarguen de esa tarea.wav" loop="-1"> Insértalo después de la etiqueta </title> Con el parámetro loop puedes decidir cuántas veces quieres que se reproduzca. puedes escribir este código directamente en la vista Código. Estos valores pueden cambiarse a través del código. <bgsound src="cancion1. 17 . El inspector de propiedades para los archivos de vídeo insertados de esta forma es el mismo que el de los archivos de audio. sin que aparezcan los controles de audio. A la derecha tienes un ejemplo de un archivo de vídeo. para el que se muestran los controles de vídeo. 1. opción Plug-in. del mismo modo que en el caso de los archivos de audio. Para insertar un archivo de vídeo en un documento tienes que dirigirte al menú Insertar.. 2. puede establecerse en el campo URL plg una página en la que pueda encontrarlo. En el campo Origen del inspector de propiedades se establece el archivo vinculado (el archivo de audio o de vídeo) que ha de reproducirse.Para poder hacer que el audio pueda activarse y desactivarse cuando no se muestran los controles. Puedes reproducirlo pulsando sobre los controles. y se reproducen solamente una vez. En el caso de que el usuario no tenga instalado ningún plug-in adecuado. añadiendo autostart="false" y loop="true". (con -1 se reproduce de modo continuo). Los vídeos también se reproducen automáticamente al cargarse la página. el MPEG y el MOV. pero hay que tener en cuenta que los vídeos suelen ocupar mucho espacio en disco. precisan de mucho tiempo para descargarse. Medía. Vídeos En ocasiones puede interesar incluir algún vídeo en una página web. y por lo tanto..

Sign up to vote on this title
UsefulNot useful