DREAMWEAVER SEPARATA ESBAT 3

8/8/2019 DREAMWEAVER SEPARATA ESBAT 3

1/17

Docente MARCO A. CORCUERA DE LOS SANTOS. rea: Tecnologa Audio Visual y [email protected]

ESCUELA SUPERIOR DE BELLAS ARTES PBLICAMACEDONIO DE LA TORRE

CAPITULOS

Introduccin a DreamweaverEl entorno de Dreamweaver CS4El Texto

Usando imgenesUso de TablasCreando HipervnculosUsando elementosMultimedia:flash,.Sonidos,


2/17

2

Conceptos bsicos

Qu es Dreamweaver?

Dreamweaver es un software fcil de usar que permite crear pginas web profesionales. Las funciones deedicin visual de Dreamweaver CS4 permiten agregar rpidamente diseo y funcionalidad a las pginas, sinla necesidad de programar manualmente el cdigo HTML.

Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc.., de unaforma muy sencilla y visual. Provee los conocimientos para disear, codificar y desarrollar sitios, pginas yaplicaciones Web, mediante herramientas tiles y sencillas de manejar, dentro de un ambiente cmodo ycon todas las opciones a la mano. Tambin puede crear potentes aplicaciones de Internet. Puede trabajaren 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 ampliosoporte 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. Paraacceder 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 deWeb. 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 separadaspor: ://. La parte antes del ://, es el Protocolo, que puede ser http:// . La segunda parte es el Host, elcual 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 deorganizacin 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 lassiglas del pas al que pertenecen, por ejemplo: .ve: organizaciones o empresas originales oradicadas en Venezuela.

HTML: Estas siglas se corresponden con la definicin "Lenguaje para marcado de hipertexto", setrata de un lenguaje para estructurar documentos a partir de texto en World Wide Web. Estelenguaje se basa en etiquetas (instrucciones que le dicen al texto como deben mostrarse) yatributos (parmetros que dan valor a la etiqueta).


3/17

3

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 elnombre del documento que aparecer en el explorador y entre parntesis, su ubicacin y el nombre del archivo enformato html. En el extremo de la derecha estn los botones para minimizar, maximizar/restaurar y cerrar.

La barra de mens


4/17

4

Agrupadas en mens desplegables. Al hacer clic en Insertar , por ejemplo, veremos las operaciones relacionadascon 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 oindispensable 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 otrasoperaciones habituales que no incluye la barra de herramientas estndar. Estas operaciones son las de cambio devista 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 alencontrarnos en un documento en blanco estamos directamente sobre la etiqueta ).

Tambin nos es posible alternar entre los modos de seleccin , mano (para arrastrar la pgina), o zoom . Encualquier momento puedes seleccionar el zoom preferido desde el desplegable zoom y ajustar la vista al porcentajepreferido (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 inspectorcambian 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 oinspectores. Vamos a ver los ms importantes.

El inspector de Propiedades

El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado que sonusadas 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


5/17

5

inferior-derecha.

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

La barra de herramientas Insertar o panel de objetos

P ermite insertar elementos en un documento sin la necesidad de recurrir al men Insertar . Los elementos estnclasificados 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 enla 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 depropiedades , 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 opreformateado. 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 seintroducen varios espacios solo se considera uno, pero al establecer el formato preformateado se respetar quehayan varios espacios en lugar de solo uno.

Recuerda que ser mejor que no utilicescaracteres especiales como acentos o ees, niespacios en blanco en los nombres dearchivos o carpetas. De esta forma teasegurars de que el servidor puede reconocersin ningn tipo de problemas los nombres delos archivos que alojes en l.

Para evitar errores de enlaces rotos oimgenes que no se muestran intenta escribir,tambin, los nombres en minscula. Algunosservidores (los que utilizan linux) distinguenentre maysculas y minsculas, por lo que sien tu pgina quieres mostrar la imagenfoto1. debers uardarla con ese nombre.


6/17

6

Fuente: Permite seleccionar un conjunto de fuentes.Aparecen conjuntos de fuentes en lugar de una sola, yaque es posible que al establecer una nica fuente elusuario no la tenga en su ordenador. El seleccionar unconjunto de fuentes posibilita que en el caso de que elusuario no tenga una fuente se aplique otra del conjunto.Por ejemplo, si seleccionamos Arial, Helvetica, Sans-serif , 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 lapgina. Si no se ha establecido ningn color en las propiedades de la pgina ni aqu, el color del texto por defectoser el negro.

Estilo:

Estos botones permiten establecer si el texto aparecer en negrita o en cursiva. A travs del men Texto tambinse puede, entre otras cosas, subrayar el texto. Esta opcin no aparece en el panel de Propiedades ya que denormal no suele utilizarse, debido a que los vnculos aparecen subrayados y el subrayar texto normal podra hacerque 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 seestablece 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 sabrscmo trabajar con los elementos bsicos con los que estn hechas la mayora de las pginas web. Si nunca hashecho 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.


7/17

7

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 debeencontrarse 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 botnderecho 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 ficherode nuestro disco duro.


8/17

8

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 menGuardar 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 denuestras 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 posibleseleccionar 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 losarchivos .

En Relativa a es posible especificar si la imagen ser relativa al documento o a la carpeta raz del sitio. Espreferible que sea relativa al Documento , ya que si se mueve todo el sitio a una ubicacin diferente, la imagenpuede no verse al estar siendo buscada en la ubicacin anterior.


9/17

9

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 laventana y en el campo Origen del inspector de propiedades , dependiendo de si ha sido insertada como relativa ala 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 carpetaimagenes y el documento en el que deseamos insertar la imagen. Dicha imagen, llamada aulaclic.jpg , seencuentra 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 razdel 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 sidoinsertada. Esto puede ocurrir si se ha modificado el nombre de la imagen, o si se ha movido de directorio, desdefuera 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 delinspector 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 elratn sobre ella, y es muy til de cara a hacer pginas accesibles ya que el texto que se escribe ser ledo por losprogramas lectores para invidentes. Tambin es muy til, como ya hemos visto, si la imagen por alguna razn nopuede mostrarse.

En Clase podrs asignarle un estilo que hayas creado anteriormente, as podrs darle alineacin, bordes eincluso tamao con slo un clic.

Si le damos un valor al campo Vnculo convertiremos al imagen en un link a otra pgina. Para enlaces externosrecuerda que debe empezar siempre por HTTP:// y si deseas crear un vnculo a un enlace electrnico deberempezar por mailto:


10/17

10

En caso de que le hayas asignado un vnculo podrs decidir en qu ventana quieres que se abra selecionandoun 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 laimagen 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 aplicadirectamente 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 quedarmodificndola desde un editor externo, como Fireworks.

Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa el icono de Dreamweaver ymodificamos 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 recuadrosnegros que aparecen alrededor de la imagen.

La otra es a travs de inspector de propiedades , cambiando los campos An (anchura) o Al (altura). Estoscampos 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 yaparecer a la derecha una flecha circular que permite volver al tamao original haciendo clic sobre ella.


11/17

11

Tablas

Todos los objetos se alinean por defecto a la izquierda de las pginas web, pero gracias a las tablas es posibledistribuir el texto en columnas, colocar imgenes al lado de un bloque de texto, y otra serie de cosas que sin lastablas seran imposibles de realizar.

Hoy en da, la mayora de las pginas web se basan en tablas, ya que resultan de gran utilidad al mejorarnotablemente las opciones de diseo.

Las tablas estn formadas por un conjunto de celdas, distribuidas en filas y columnas. A continuacin tienes unejemplo 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 elAncho 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 lapgina, en cambio, el ancho en Porcentaje indica el porcentaje que va a ocupar la tabla dentro de la pgina y seajustar al tamao de la ventana del navegador, esto permite que los usuarios que tengan pantallas grandes,aprovechen todo el ancho de pantalla.


12/17

12

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 yayudan 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 dichotexto 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. Almismo 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 imagende fondo (en Im. ).

Si lo que se selecciona es una celda, o un conjunto de celdas, el inspector de propiedades cambia, para permitirespecificar otros valores.

La parte superior del inspector de propiedades en este caso sirve para especificar las propiedades del texto quese 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 delcontenido 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 latabla 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.


13/17

13

Los valores An y Al de una celda siempre estn en Pxeles . No es necesario especificar ninguno de estos dosvalores para las celdas, a no ser que se desee que se mantenga obligatoriamente ese tamao, y no que se ajustenal 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 laposicin 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 mencontextual de la tabla al pulsar con el botn derecho sobre ella, o bien abrir el men Modificar . En ambos casosaparece 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 suizquierda.

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


14/17

14

Para eliminar una fila o una columna , hay que posicionar el cursor en la fila o columna a eliminar y elegir laopcin 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 archivoa 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 necesarioseleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer el Vnculo en el inspector.


15/17

15

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 sepueden utilizar para realizar cualquier tipo de animacin.

Estas pelculas pueden crearse mediante el programa Flash de Macromeda , y necesitan que el usuario tengainstalado 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 Flash que aparece en la pestaa Comn del panelInsertar , botn Media .


16/17

16

El inspector de propiedades de las pelculas Flash es prcticamente igual que el de los botones y el textoFlash, 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 cargarsela 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 supropia msica cuando navegan en Internet, por lo que el escuchar tambin sonido en cada pgina que se visitapuede 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 queaquellos 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 algunasocasiones el MIDI, aunque existen otros formatos diferentes que tambin pueden utilizarse. Lo ideal es incluir algnarchivo 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 (recuerdaencender los altavoces, si los tienes).

En Dreamweaver no se mostrarn los controles de audio. Todos los archivos que son insertadoscomo 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 controlesde audio, mediante Al y An .

En el caso de no especificar ningn tamao, se mostrar el tamao por defecto de los controles, como ocurre enel ejemplo de arriba. Si lo que se desea es que se escuche el sonido en la pgina, pero que no se muestren loscontroles 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. Estosvalores no pueden definirse a travs del inspector de propiedades, pero s a travs del cdigo. Una vez definidos lospodremos cambiar desde el inspector de propiedades con el botn Parmetros...

Por ejemplo, el archivo anterior apareca en el cdigo como . Peropara que no se reproduzca automticamente se ha aadido autostart="false" , y para que se reproduzcacontinuamente se ha aadido loop="true" .

La lnea de cdigo del archivo de audio ha quedado del siguiente modo:

En el Inspector de propiedades del sonido, el botn Parmetros... abre un cuadro de dilogo donde podemoscambiar esos valores una vez introducidos.


17/17

17

Para poder hacer que el audio pueda activarse y desactivarse cuando no se muestran los controles, es necesarioinsertar 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 escribireste cdigo directamente en la vista Cdigo .

Insrtalo despus de la etiqueta Con el parmetro loop puedes decidir cuntas veces quieres que sereproduzca, 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 losvdeos 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 loscontroles 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 losarchivos 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 reproductoro un plug-in apropiado para reproducirlos. En el campo Origen del inspector de propiedades se establece el archivovinculado (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 URLplg una pgina en la que pueda encontrarlo.

Date post:	10-Apr-2018
Category:	Documents
Upload:	corcuera14
View:	214 times
Download:	0 times

DREAMWEAVER SEPARATA ESBAT 3

Documents