Colegio Gimnasio Campestre San Sebastin

Actividad Grado 9 CUESTIONARIO Contesta las siguientes preguntas, que son clave para la evaluacin final y de este periodo, este cuestionario ser evaluado en el cuaderno de informtica. Contesta en tu cuaderno las siguientes preguntas. 123456789101112131415Defina que es Dreamweaver. Que es un sitio web y como se crea? Que nombre debe tener la pgina inicial de nuestro sitio? Como pueden ser definidas las caractersticas del texto? Como convertir un texto a modo de lista? Como accedemos a las propiedades de la lista? Como creamos un enlace? Que es destino del enlace y cules son los tipos de destino? Como insertar una imagen? Como insertamos una tabla? Que son pelculas flash, en donde es frecuente verlas, y que extensin tiene? Como insertamos una pelcula flash. Que formatos de video suelen usarse en internet? Como insertamos un video en una pgina web? Que se necesita para reproducir un objeto insertado con la opcin Plug-in?

CONCEPTOS PARA RESOLVER EL CUESTIONARIO

Colegio Gimnasio Campestre San Sebastin

TECNOLOGIA E INFORMATICA PRIMER PERIODO 9 GRADO

Qu es Dreamweaver CS5 Dreamweaver CS5 es un software fcil de usar que permite crear pginas web profesionales.

Las funciones de edicin visual de Dreamweaver CS5 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. Adems incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa. Para seguir este curso te puedes descargar la versin gratuita de Dreamweaver desde la pgina de Adobe, la versin caduca al cabo de 30 das, pero seguro que te dar tiempo a entenderlo y decidir si quieres adquirir la versin completa de este fantstico programa. Nota: Esta versin estar disponible hasta que Adobe lance la nueva versin del programa. Los logotipos de Dreamweaver son propiedad de Adobe, as como las marcas registradas Dreamweaver y Adobe.

Unidad 1. Configurar un sitio local (I) En este tema vamos a ver qu es un sitio web, cmo crearlos y gestionarlos, y cmo modificar las propiedades de los documentos, como puede ser el color de fondo. 1.1. Introduccin Un sitio web es un conjunto de archivos y carpetas, relacionados entre s, con un diseo similar o un objetivo comn. Es necesario disear y planificar el sitio web antes de crear las pginas que va a contener. La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imgenes, las animaciones, archivos de tipos especfico, etc., se deben crear nuevas carpetas dentro de sta, con el objetivo de tener una mejor organizacin de los archivos a la hora de trabajar. Esto es lo que se conoce como sitio local.

Colegio Gimnasio Campestre San Sebastin

Despus se podrn copiar los archivos en un servidor web, en el denominado sitio remoto, lo que equivale a publicar el sitio, de modo que la gente podr verlo en Internet. Por tanto, el sitio local y el sitio remoto tienen la misma estructura. El sitio local es la copia del sitio con la que trabajaremos, y los cambios los actualizaremos en el sitio remoto. La organizacin de los archivos en un sitio permite administrar y compartir archivos, mantener los vnculos de forma automtica, utilizar FTP para cargar el sitio local en el servidor, etc. La pgina inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya que cuando se intenta acceder a una URL genrica, el servidor devuelve la pgina con ese nombre. Por ejemplo, si escribiramos la direccin genrica http://www.aulaclic.es en el navegador, ste intentara cargar la pgina http://www.aulaclic.com/index.htm, por lo que se producira un error en el caso de que no existiera ninguna pgina con el nombre index.htm, y no se podra navegar por el sitio a no ser que se escribiese exactamente http://www.aulaclic.es/nombrepagina.htm 1.2. Crear o editar un sitio web sin conexin a Internet

Una vez creadas las carpetas que formarn la estructura del sitio local, o por lo menos la carpeta raz, ya es posible definir el nuevo sitio. Para ello hay que dirigirse al men Sitio, a la opcin Administrar sitios... o directamente a Nuevo sitio. Recuerda que a travs del panel Archivos, se puede cambiar a cada uno de los sitios definidos. Tambin podemos acceder desde el icono de acceso rpido de la barra de la aplicacin a la opcin Administrar sitios o Nuevo sitio...

Colegio Gimnasio Campestre San Sebastin

En el caso de haber seleccionado la opcin Administrar sitios, aparece una ventana que contiene la lista de sitios locales definidos Por supuesto, pueden existir varios sitios locales en un mismo ordenador. Tanto si se elige la opcin Nuevo..., como si se elige la opcin Editar..., se mostrar la misma ventana en la que definir o modificar las caractersticas del sitio.

Colegio Gimnasio Campestre San Sebastin

Las opciones del sitio se agrupan en diferentes categoras que aparecen en la parte izquierda. Para visualizar las caractersticas de una categora basta con seleccionarla de la lista haciendo clic en ella. Las dos nicas opciones imprescindibles son las que encontramos en la categora Sitio, y de momento son las nicas que cambiaremos: Vamos a ver los datos que hay que editar para la categora Datos locales, que ser lo nico que empleemos de momento:

Debe definirse el Nombre del sitio, que nicamente nos servir para identificarlo en la lista de sitios. La Carpeta del sitio local, que es en la que se encuentra el sitio dentro del disco duro local. La carpeta puede contener ya archivos o no.

Estas dos caractersticas son las imprescindibles para definir un sitio local. El resto son opcionales, y de momento no nos interesan. Las dems opciones en este momento no nos interesan, ya que estamos definiendo el sitio local, y no es necesario establecer los datos del servidor en el que estar el sitio remoto. Despus de rellenar los datos pulsamos el botn Aceptar y abrimos el sitio. 1.3. Abrir un sitio Para abrir un sitio ya definido hay que dirigirse al men Sitio, a la opcin Administrar sitios.... seleccionar el sitio de la lista de sitios y pulsar sobre el botn Listo.

Colegio Gimnasio Campestre San Sebastin

Tambin podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el men desplegable Archivos.

Unidad 2. El texto: propiedades y formato (I) A lo largo de este tema vamos a aprender a cambiar las propiedades del texto y a crear estilos CSS, que permiten asignar al texto clases y estilos creados por nosotros mismos, no predefinidos. 2.1. Caractersticas del texto Las caractersticas del texto seleccionado pueden ser definidas a travs del men Formato, y a travs del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a travs del inspector de propiedades, que estn clasificadas en dos categoras HTML y CSS. Comenzamos viendo las propiedades HTML

Todas estas propiedades generan etiquetas HTML, que tienen un estilo por defecto en el navegador. Pero al final, podremos personalizarlas con CSS para que se vean exactamente como queramos.

Formato: Permite seleccionar un formato de prrafo ya definido para HTML, que puede ser encabezado, prrafo o formato predeterminado. Los encabezados se utilizan para establecer ttulos dentro de un documento. El formato predeterminado 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 predeterminado se respetar que hayan varios espacios en lugar de solo uno. El texto normal, debera ir siempre en prrafos, salvo que est en otros elementos, como tablas o listas. Es importante emplear correctamente los encabezados, ya que se organizar mejor el contenido de nuestra web, y es importante de cara a buscadores y visitantes. No te preocupes por cmo se muestran esos encabezados, recuerda que siempre podremos personalizarlo.

Colegio Gimnasio Campestre San Sebastin

Estilo: El botn B encierra el texto en una etiqueta <strong></strong>, que por defecto se muestra en negrita. El botn I, lo encierra entre <em></em>, que por defecto se ve en cursiva. Estas son las etiquetas de resaltado ms habituales, pero existen otras que encontramos a travs del men Texto. Por ejemplo, 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. Adems, emplea etiquetas que estn en desuso. Lista: Estos botones permiten crear listas con vietas o listas numeradas. Veremos qu son las listas en el siguiente apartado. Sangra: Estos dos botones permiten sangrar el texto y anular la sangra. La sangra es una especie de margen que se establece a ambos lados del texto. En este caso los botones se refieren a sangra a la izquierda del texto. Si lo aplicamos sobre texto normal, lo encerrar en una etiqueta <blockquote></blockquote>, que por defecto se muestra indentada hacia la derecha. En cambio, al aplicarlo sobre una lista, crear una sublista dentro de sta.

Unidad 3. El texto: propiedades y formato 3.1. Listas Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con vietas. Para que un texto que ya ha sido introducido en el documento se convierta en una lista, simplemente hay que seleccionarlo y pulsar sobre la opcin de lista correspondiente, ya sea a travs del inspector de propiedades, o a travs del men Formato.

La lista con vietas (sin ordenar) se selecciona a travs del botn (ordenada) se selecciona a travs del botn Ejemplo de lista numerada (ordenada): 1. Preparar la mochila 1. Sacar los libros de ese da 2. Introducir los libros del da siguiente Ponerme el pijama Lavarme los dientes Poner el despertador .

, mientras que la lista numerada

2. 3. 4.

Ejemplo de lista con vietas (sin ordenar):

o o o o

Perro Gato Aves

Canario Loro

Hmster

Colegio Gimnasio Campestre San Sebastin

Para establecer listas anidadas dentro de otras como en los ejemplos anteriores, es necesario aadir una sangra en los elementos de la lista que se desee que pasen a formar parte de la lista anidada. A travs del men Formato, opcin Lista, es posible acceder a las propiedades de la lista seleccionada. Se debe seleccionar el texto de la lista previamente o tener el cursor en algn lugar de la lista para que se active este submen. En la ventana Propiedades de lista se puede especificar el tipo de lista (con nmeros o con vietas), el tipo de nmeros o vietas que se utilizarn (en la propiedad Estilo:), y en el caso de las listas ordenadas, el nmero por el que comenzar el recuento.

Unidad 4. Hiperenlaces 4.1 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 HTML. Por ejemplo, en la siguiente imagen hay un enlace a www.aulaclic.es, que al ser un archivo externo es de referencia absoluta, por eso contiene http://

Es posible crear tambin vnculos vacos, que pueden ser tiles cuando se utilizan comportamientos, etc. Para ello es necesario escribir en Vnculo nicamente una almohadilla #. Veremos su utilidad ms adelante.

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

Colegio Gimnasio Campestre San Sebastin

Crear vnculos de esta forma es muy sencillo, slo debers rellenar los campos que explicaremos a continuacin y el enlace se colocar en el lugar en el que estaba situado el cursor.

Texto: es el texto que mostrar el enlace. Si tenamos un texto seleccionado, aparecer ah. Vnculo: es la pgina a la que ir redirigida el enlace, si se trata de un enlace externo debers escribirla empezando siempre por http://. Haz clic sobre el icono de carpeta para buscar los archivos que existan dentro del sitio. Por defecto Dreamweaver te crear un enlace relativo al documento. Destino: la ventana donde se abrir la pgina, este campo se explica en el siguiente apartado. Ttulo: se trata de la ayuda contextual del vnculo, que aparecer al mantener un instante el cursor sobre el enlace. Tecla de acceso: atributo que facilita la accesibilidad a las pginas, habilita el acceso al enlace mediante la pulsacin de la tecla Alt ms la tecla de acceso indicada. ndice de tabulador: Como habrs podido observar puedes saltar a travs de los enlaces pulsando la tecla Tabulador. En este campo podrs establecer un ndice indicando la prioridad del enlace y as configurar el modo en el que actuar el Tabulador es sus diferentes saltos. Por defecto, se tabularn por orden de aparicin.

Destino del enlace El destino del enlace determina en qu ventana va a ser abierta la pgina vinculada, puede variar dependiendo de si el documento est basado en marcos. Puede especificarse en el inspector de propiedades HTML a travs de Destino, o en la ventana que aparece a travs del men Insertar, opcin Hipervnculo.

_blank: Abre el documento vinculado en una nueva ventana o pestaa del navegador. _parent:

Colegio Gimnasio Campestre San Sebastin

Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de marcos padre. Tiene sentido si se emplean marcos. _self: Es la opcin predeterminada, y la que se produce si no indicamos otra cosa. Abre el documento vinculado en el mismo marco o ventana que el vnculo. _top: Abre el documento vinculado en la ventana completa del navegador. Tiene sentido si se emplean marcos. No te preocupes si no te queda del todo claro para qu sirve cada una de estas opciones de destino, ya que se volvern a ver en el tema de Marcos. Si la pgina no usa marcos (lo habitual hoy en da) simplemente no especificaremos nada para abrirlo en la misma ventana, y emplearemos _blank para abrir ventanas nuevas. Lo habitual es abrir las los enlaces a pginas del sitio en la misma ventana, y los enlaces externos en ventanas nuevas. Otra tendencia dice que una pgina nunca debera de abrir nuevas ventanas, y que debe de ser el usuario el que decida qu enlaces quiere abrir en ventanas nuevas. En la mayora de navegadores, para abrir un enlace un una ventana nueva, basta con hacer clic con la ruedecilla del ratn.

Unidad 5. Imgenes En este tema vamos a ver cmo insertar imgenes en un documento. Tambin veremos cmo crear algunas imgenes especiales, como es el caso de los Rollovers y los botones flash, que ayudan a mejorar la apariencia de nuestras pginas. 5.1. Introduccin Las imgenes son un aspecto muy importante de la web. Ya sea como complementos a la informacin o parte del diseo, la hacen mucho ms atractiva a ojos del visitante. No obstante, no conviene abusar, ya que aumentarn mucho el tamao final de la web. Existen una serie de formatos de imagen ms recomendables que otros para ser introducidos en una pgina web. 5.2. 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. Cuando te acostumbres, te ser ms cmodo acceder con la combinacin de teclas Ctrl + Alt + I.

Colegio Gimnasio Campestre San Sebastin

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 cambiamos la pgina de carpeta, lo habitual es cambiar tambin sus imgenes. 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.

Colegio Gimnasio Campestre San Sebastin

Otra forma de insertar una imagen, es arrastrarla directamente desde el panel Archivos sobre el documento.

Si insertamos una imagen y luego la borramos, la movemos, o escribimos mal su nombre, en Dreamweaver aparecer as indicando que el enlace al archivo est roto.

En ese caso, la imagen que aparecer en el navegador ser similar a sta:

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.

Imgenes 5.3. Propiedades de una imagen Cuando seleccionamos una imagen el Inspector de propiedades muestra esta apariencia:

Desde aqu podremos establecer distintos atributos a la imagen:

Ancho y Alto son las dimensiones de la imagen. Dreamweaver las pondr directamente. Como pasaba con el texto, podemos crear un hiperenlace en la imagen escribiendo la direccin en el campo Vnculo, y decidir en qu ventana se abre con el campo Destino. Podemos hacer que cada zona de la imagen tenga un vnculo distinto, creando un Mapa de imagen. En el campo Alt escribimos el texto que remplazar a la imagen si sta no puede mostrarse. Es un atributo muy importante que deberamos incluir siempre para hacer pginas accesibles. Por ejemplo, el texto que se escribe ser ledo por los programas lectores para invidentes. Si lo que queremos es mostrar un ayuda contextual cuando el usuario tenga el cursor sobre la imagen, debemos de empelar el atributo title. No podemos insertarlo desde el panel, tenemos que hacerlo desde el cdigo fuente con el formato title="Texto a mostrar". Internet Explorer muestra Alt como ayuda contextual cuando la imagen no lleva title, pero el resto de navegadores no lo harn, respetando el estndar. En Clase podrs asignarle un estilo que hayas creado anteriormente, as podrs darle alineacin, bordes e incluso tamao con slo un clic.

Existen otros atributos que afectan al diseo de la imagen. Como ya hemos explicado, la tendencia actual es utilizar CSS para todo lo relativo a diseo, por lo que estos atributos estn cayendo en desuso y no deberan de ser empleados. No obstante, los explicaremos para que entiendas su funcin:

Colegio Gimnasio Campestre San Sebastin

Puedes asignarle un grosor de borde desde el campo Borde. En CSS, existe el atributo border. Puedes seleccionar su alineacin con respecto al texto desde el campo Alinear. En CSS, existe el atributo vertical-align. Por ltimo las opciones Espacio V y Espacio H te sern 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. En CSS, podemos hacerlo con el margin.

5.4. Cambiar el tamao de una imagen Dentro de Dreamweaver puede modificarse el tamao de las imgenes. Por un lado, podemos cambiar el tamao con el que se ve una imagen, pero dicho cambio de tamao no se aplica directamente sobre el archivo de imagen, que conservar el tamao original. 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, Photoshop, etc.. 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:

Tamao original

Con tamao modificado El resultado puede ser ms o menos satisfactorio, dependiendo del navegador que es el que aplica realmente el reescalado, 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 Ancho o Alto. Estos campos aparecern en el inspector cuando est seleccionada alguna imagen.

Colegio Gimnasio Campestre San Sebastin

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.

Como hemos comentado, este cambio de tamao se produce alterando los atributos de anchura y altura, pero no cambiando el tamao real del archivo, por lo que el usuario deber descargarse el archivo completo con su tamao original. Por ejemplo, si tenemos una fotografa de nuestra cmara de fotos, de un tamao grande (por ejemplo 2592x1944px), y queremos mostrar una miniatura (por ejemplo, de 200x150px) esta sera una mala solucin, porque el usuario se estara descargando el archivo completo, y no una miniatura real que ocupara mucho menos tamao.

Dreamweaver tambin nos permite cambiar el tamao real del archivo de imagen.

Para hacerlo, seleccionamos la imagen, y pulsamos en el icono del Inspector de propiedades. Se abrir la ventana Presentacin preliminar de la imagen. Nos fijamos en la pestaa Archivo.

En la seccin escala, podemos establecer un porcentaje del tamao original. El nuevo tamao se mostrar en An (ancho) y Al (alto). Tambin podemos introducir directamente el nuevo tamao. Incluso podemos recortar un rea de la imagen, seleccionando Exportar rea, y seleccionando el rea de la imagen en la previsualizacin de la derecha (no se ve en la imagen anterior).

Colegio Gimnasio Campestre San Sebastin

Cuando lo tengamos, pulsamos Aceptar. En este caso, si hemos alterado fsicamente el archivo. El resultado es bastante bueno, aunque siempre ser mejor con herramientas especializadas, como Photoshop o GIMP.

Unidad 6. Tablas En este tema vamos a ver cmo trabajar con tablas. Podremos, entre otras cosas, insertar tablas, combinar celdas, insertar filas o columnas y cambiar el tamao del borde. 6.1. Introduccin 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. La finalidad de las tablas es presentar una serie de datos de forma clara y organizada, dividindolos en filas y columnas. Hasta hace poco, y todava hoy es fcil encontrar diseos web basados en tablas. Esto es debido a la facilidad que nos ofrecen estos elementos para organizar contenidos y repartir el espacio. No obstante, esta no es una prctica recomendable, ya que las tablas no fueron pensadas para ello, y si no estn bien anidadas pueden ocasionar problemas al analizar nuestra web con herramientas automticas, como los bots que indexan el contenido para los buscadores. Para maquetar nuestras pginas, lo recomendado es emplear capas (div) y CSS. Las tablas estn formadas por un conjunto de celdas, distribuidas en filas y columnas. A continuacin tienes un ejemplo de tabla.

6.2. 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.

Colegio Gimnasio Campestre San Sebastin

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 de la pgina o del elemento contenedor) 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. Grosor del Borde indica el grosor del borde de la tabla en pxeles, por defecto se le asigna uno (1). Si lo ponemos a 0 o en blanco, la tabla no mostrar borde. Relleno de celda (cellpadding) indica la distancia entre el contenido de las celdas y los bordes de stas. Espacio entre celdas (cellspacing) indica la distancia entre las celdas de la tabla.

Colegio Gimnasio Campestre San Sebastin

Tambin se puede establecer si se quiere un encabezado para la tabla, por ejemplo para indicar el contenido de filas o columnas. Aunque podramos lograr el mismo diseo con celdas normales y estilos CSS, 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 Resumen: podemos indicar una descripcin de la tabla, los lectores de pantalla leen el texto del resumen pero dicho texto no aparece en el navegador del usuario.

Unidad 7. Multimedia Vamos a ver cmo insertar elementos multimedia. En concreto, veremos cmo insertar una animacin Flash, un sonido y un vdeo, que son los ms empleados. 7.1. Pelculas Flash (SWF) Las pelculas Flash son animaciones, cuyo archivo tiene la extensin SWF. Es frecuente verlas en las pginas iniciales de los sitios web, a modo de presentacin hacia los usuarios, como banners publicitarios, como botones... Flash es el elemento multimedia ms empleado en las pginas web. Estas pelculas pueden crearse mediante el programa Flash tambin de Adobe. Para poder ser visualizado en el navegador, y necesitan que el usuario tenga instalado el plug-in de Flash Player. Su instalacin es muy sencilla y normalmente ya viene con el navegador. Las pelculas Flash pueden insertarse en una pgina a travs del men Insertar Media, opcin SWF, o pulsando Ctrl + Alt + F.

Colegio Gimnasio Campestre San Sebastin

Veamos las opciones ms importantes que nos ofrece el inspector de propiedades cuando tenemos seleccionado el archivo Flash:

Como en otros elementos, como las imgenes, podemos asignarle el ancho (An.) y alto (Alt.). En Archivo, indicamos la ruta hasta el archivo SWF.

Si disponemos de Flash instalado en el equipo, y vamos a ir haciendo cambios sobre el archivo original (.fla), nos resultar muy til indicar su ubicacin en Origen. As, para editarlo, bastar con pulsar Editar. 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 hasta que el usuario la activase. Por tanto interesa desmarcar esta opcin cuando se desea que la reproduccin sea activada por algn comportamiento. La Calidad, cuanto ms baja, antes se cargar el archivo pero peor se ver. Conviene dejarla en Alta para verlo tal cual se cre. La Escala permite elegir cuanto se ver del archivo. Las pelculas Flash no siempre son del tamao exacto del contenido, pueden tener un escenario de fondo alrededor del objeto, aunque no se muestre. Si dejamos Predeterminada, se ver todo la pelcula. En cambio, si elegimos Ajuste exacto, se vern slo los objetos, omitiendo el escenario de fondo. Alinear funciona como con las imgenes, y nos permite alinear la pelcula en relacin con el texto. Si queremos centrarla horizontalmente, podemos optar por centrar el contenido del elemento que contiene el Flash (normalmente un prrafo) empleando CSS.

Colegio Gimnasio Campestre San Sebastin

Wmode es el modo de ventana. Si es opaco, otros elementos pueden aparecer sobre el Flash. En cambio, si es Transparente, el fondo se ver transparente (a no ser que se haya especificado un color de fondo en el Flash). El botn Reproducir nos permite ver la pelcula.

Al insertarse la pelcula, veremos la ubicacin en la vista de diseo con el siguiente aspecto:

Al insertarse animaciones Flash, es frecuente que Dreamweaver aada algunos archivos que nos permitirn reproducir los elementos, normalmente creando la carpeta Scripts. Es importante incluir esta carpeta cuando publiquemos nuestro sitio, si no los archivos no se vern. De todas formas, Dreamweaver nos avisar cuando incluya archivos.

7.2. 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. En este apartado nos referimos a insertar vdeo de un archivo alojado en nuestro sitio. No a mostrar vdeos de sitios especializados, como youTube. 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 Plugin. Puedes ver el vdeo (si tienes el plugin adecuado) a continuacin:

Colegio Gimnasio Campestre San Sebastin

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.

Hay que prestar especial atencin al ancho y alto. Por defecto, si Dreamweaver no puede obtener el tamao del archivo lo fijar a 32 x 32, insuficiente para ver un vdeo. Es mejor borrarlos, y as el vdeo se mostrar con su tamao original. Si conocemos el tamao del vdeo, podemos pensar en insertarlo directamente, pero hay que tener en cuenta el tamao de los controles de reproduccin, que depende de cada navegador. Los vdeos tambin se reproducen automticamente al cargarse la pgina, y se reproducen solamente una vez. Estos valores pueden cambiarse a travs botn Parmetros, del mismo modo que en el caso de los archivos de audio, aadiendo autostart="false" y loop="true".

Como ya hemos dicho, 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. No ser necesario en los archivos ms comunes de audio y vdeo, pero s si intentamos cargar un archivo ms raro.

FUENTES BIBLIOGRAFICAS http://www.aulaclic.es/dreamweaver-cs5/t_18_5.htm http://www.taringa.net/posts/videos/13570465/Tutorial-Dreamweaver-CS5---Aprende-a-crear-un-sitio-Web.html