Actividad 9 Grado.docx

Colegio Gimnasio Campestre San Sebastián

Actividad Grado 9

CUESTIONARIO

Contesta las siguientes preguntas, que son clave para la evaluación final y de este periodo, este cuestionario será evaluado en el cuaderno de informática.

Contesta en tu cuaderno las siguientes preguntas.

1- Defina que es Dreamweaver.2- Que es un sitio web y como se crea?3- Que nombre debe tener la página inicial de nuestro sitio?4- Como pueden ser definidas las características del texto?5- Como convertir un texto a modo de lista?6- Como accedemos a las propiedades de la lista?7- Como creamos un enlace?8- Que es destino del enlace y cuáles son los tipos de destino?9- Como insertar una imagen?10- Como insertamos una tabla?11- Que son películas flash, en donde es frecuente verlas, y que extensión tiene?12- Como insertamos una película flash.13- Que formatos de video suelen usarse en internet?14- Como insertamos un video en una página web?15- Que se necesita para reproducir un objeto insertado con la opción Plug-in?


CONCEPTOS PARA RESOLVER EL CUESTIONARIO

TECNOLOGIA E INFORMATICAPRIMER PERIODO

9 GRADO

Qué es Dreamweaver CS5

Dreamweaver CS5 es un software fácil de usar que permite crear páginas web profesionales.

Las funciones de edición visual de Dreamweaver CS5 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML.

Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc.., de una forma muy sencilla y visual.

Además 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 versión gratuita de Dreamweaver desde la página de Adobe, la versión caduca al cabo de 30 días, pero seguro que te dará tiempo a entenderlo y decidir si quieres adquirir la versión completa de este fantástico programa.

Nota: Esta versión estará disponible hasta que Adobe lance la nueva versión 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, cómo crearlos y gestionarlos, y cómo modificar las propiedades de los documentos, como puede ser el color de fondo.

1.1. Introducción

Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común. Es necesario diseñar y planificar el sitio web antes de crear las páginas que va a contener.

http://www.adobe.com/es/products/dreamweaver/


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 imágenes, las animaciones, archivos de tipos específico, etc., se deben crear nuevas carpetas dentro de ésta, con el objetivo de tener una mejor organización de los archivos a la hora de trabajar. Esto es lo que se conoce como sitio local.

Después se podrán 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 organización de los archivos en un sitio permite administrar y compartir archivos, mantener los vínculos de forma automática, utilizar FTP para cargar el sitio local en el servidor, etc.

La página inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya que cuando se intenta acceder a una URL genérica, el servidor devuelve la página con ese nombre.

Por ejemplo, si escribiéramos la dirección genérica http://www.aulaclic.es en el navegador, éste intentaría cargar la página http://www.aulaclic.com/index.htm, por lo que se produciría un error en el caso de que no existiera ninguna página con el nombre index.htm, y no se podría 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 conexión a Internet

Una vez creadas las carpetas que formarán la estructura del sitio local, o por lo menos la carpeta raíz, ya es posible definir el nuevo sitio.

Para ello hay que dirigirse al menú Sitio, a la opción Administrar sitios... o directamente a Nuevo sitio.


Recuerda que a través del panel Archivos, se puede cambiar a cada uno de los sitios definidos.

También podemos acceder desde el icono de acceso rápido de la barra de la aplicación a la opción Administrar sitios o Nuevo sitio...

En el caso de haber seleccionado la opción 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 opción Nuevo..., como si se elige la opción Editar..., se mostrará la misma ventana en la que definir o modificar las características del sitio.


Las opciones del sitio se agrupan en diferentes categorías que aparecen en la parte izquierda.

Para visualizar las características de una categoría basta con seleccionarla de la lista haciendo clic en ella.

Las dos únicas opciones imprescindibles son las que encontramos en la categoría Sitio, y de momento son las únicas que cambiaremos:

Vamos a ver los datos que hay que editar para la categoría 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 características son las imprescindibles para definir un sitio local. El resto son opcionales, y de momento no nos interesan.

Las demás 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.

Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio.


1.3. Abrir un sitio

Para abrir un sitio ya definido hay que dirigirse al menú Sitio, a la opción Administrar sitios.... seleccionar el sitio de la lista de sitios y pulsar sobre el botón Listo.

También 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. Características del texto

Las características del texto seleccionado pueden ser definidas a través del menú Formato, y a través del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a través del inspector de propiedades, que están clasificadas en dos categorías 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 párrafo ya definido para HTML, que puede ser encabezado, párrafo o formato predeterminado. Los encabezados se utilizan para establecer títulos 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, debería ir siempre en párrafos, 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 cómo se muestran esos encabezados, recuerda que siempre podremos personalizarlo.

Estilo: El botón B encierra el texto en una etiqueta <strong></strong>, que por defecto se muestra en

negrita. El botón I, lo encierra entre <em></em>, que por defecto se ve en cursiva. Estas son las etiquetas de resaltado más habituales, pero existen otras que encontramos a través del

menú Texto. Por ejemplo, subrayar el texto. Esta opción no aparece en el panel de Propiedades ya que de normal no suele utilizarse, 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. Además, emplea etiquetas que están en desuso.

Lista: Estos botones permiten crear listas con viñetas o listas numeradas. Veremos qué son las listas en el

siguiente apartado.

Sangría: Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie de

margen que se establece a ambos lados del texto. En este caso los botones se refieren a sangría 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 viñetas.

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 opción de lista correspondiente, ya sea a través del inspector de propiedades, o a través del menú Formato.

La lista con viñetas (sin ordenar) se selecciona a través del botón , mientras que la lista numerada

(ordenada) se selecciona a través del botón .

Ejemplo de lista numerada (ordenada):

1. Preparar la mochila 1. Sacar los libros de ese día2. Introducir los libros del día siguiente

2. Ponerme el pijama3. Lavarme los dientes


4. Poner el despertador

Ejemplo de lista con viñetas (sin ordenar):

o Perroo Gatoo Aves

Canario Loro

o Hámster

Para establecer listas anidadas dentro de otras como en los ejemplos anteriores, es necesario añadir una sangría en los elementos de la lista que se desee que pasen a formar parte de la lista anidada.

A través del menú Formato, opción 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 algún lugar de la lista para que se active este submenú.

En la ventana Propiedades de lista se puede especificar el tipo de lista (con números o con viñetas), el tipo de números o viñetas que se utilizarán (en la propiedad Estilo:), y en el caso de las listas ordenadas, el número por el que comenzará el recuento.

Unidad 4. Hiperenlaces

4.1 Crear enlaces

La forma más sencilla de crear un enlace es a través del inspector de propiedades. Para ello es necesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer el Vínculo 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 también vínculos vacíos, que pueden ser útiles cuando se utilizan comportamientos, etc. Para ello es necesario escribir en Vínculo únicamente una almohadilla #. Veremos su utilidad más adelante.

Otra forma de crear un enlace es a través del menú Insertar, opción Hipervínculo.

Crear vínculos de esta forma es muy sencillo, sólo deberás rellenar los campos que explicaremos a continuación y el enlace se colocará en el lugar en el que estaba situado el cursor.

Texto: es el texto que mostrará el enlace. Si teníamos un texto seleccionado, aparecerá ahí. Vínculo: es la página a la que irá redirigida el enlace, si se trata de un enlace externo deberás

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 página, este campo se explica en el siguiente apartado.

Título: se trata de la ayuda contextual del vínculo, que aparecerá al mantener un instante el cursor sobre el enlace.

Tecla de acceso: atributo que facilita la accesibilidad a las páginas, habilita el acceso al enlace mediante la pulsación de la tecla Alt más la tecla de acceso indicada.

Índice de tabulador: Como habrás podido observar puedes saltar a través de los enlaces pulsando la tecla Tabulador. En este campo podrás 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 tabularán por orden de aparición.


Destino del enlace

El destino del enlace determina en qué ventana va a ser abierta la página vinculada, puede variar dependiendo de si el documento está basado en marcos.

Puede especificarse en el inspector de propiedades HTML a través de Destino, o en la ventana que aparece a través del menú Insertar, opción Hipervínculo.

_blank:

Abre el documento vinculado en una nueva ventana o pestaña del navegador.

_parent:

Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. Tiene sentido si se emplean marcos.

_self:

Es la opción predeterminada, y la que se produce si no indicamos otra cosa. Abre el documento vinculado en el mismo marco o ventana que el vínculo.

_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 volverán a ver en el tema de Marcos.

Si la página no usa marcos (lo habitual hoy en día) 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 páginas del sitio en la misma ventana, y los enlaces externos en ventanas nuevas. Otra tendencia dice que una página nunca debería de abrir nuevas ventanas, y que debe de ser el usuario el que decida qué enlaces quiere abrir en ventanas nuevas. En la mayoría de navegadores, para abrir un enlace un una ventana nueva, basta con hacer clic con la ruedecilla del ratón.

Unidad 5. Imágenes

En este tema vamos a ver cómo insertar imágenes en un documento. También veremos cómo crear algunas imágenes especiales, como es el caso de los Rollovers y los botones flash, que ayudan a mejorar la apariencia de nuestras páginas.


5.1. Introducción

Las imágenes son un aspecto muy importante de la web. Ya sea como complementos a la información o parte del diseño, la hacen mucho más atractiva a ojos del visitante. No obstante, no conviene abusar, ya que aumentarán mucho el tamaño final de la web.

Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web.

5.2. Insertar una imagen

Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen. Después de esto, ya es posible seleccionar una imagen a través de la nueva ventana. Cuando te acostumbres, te será más cómodo acceder con la combinación de teclas Ctrl + Alt + I.

En Relativa a es posible especificar si la imagen será relativa al documento o a la carpeta raíz del sitio. Es preferible que sea relativa al Documento, ya que si cambiamos la página de carpeta, lo habitual es cambiar también sus imágenes.

Lo mismo ocurre cuando se selecciona un documento para crear un vínculo.


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 raíz del sitio o relativa al documento.

Por ejemplo, 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. 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 sería:

imagenes/aulaclic.jpg

Mientras que en el caso de ser insertada como relativa a la Raíz del sitio la ruta sería:

/imagenes/aulaclic.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.

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 continuación.

Imágenes

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 dirección en el

campo Vínculo, y decidir en qué ventana se abre con el campo Destino. Podemos hacer que cada zona de la imagen tenga un vínculo 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 deberíamos incluir siempre para hacer páginas accesibles. Por ejemplo, el texto que se escribe será leído 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 código 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 harán, respetando el estándar.

En Clase podrás asignarle un estilo que hayas creado anteriormente, así podrás darle alineación, bordes e incluso tamaño con sólo un clic.

Existen otros atributos que afectan al diseño de la imagen. Como ya hemos explicado, la tendencia actual es utilizar CSS para todo lo relativo a diseño, por lo que estos atributos están cayendo en desuso y no deberían de ser empleados. No obstante, los explicaremos para que entiendas su función:

Puedes asignarle un grosor de borde desde el campo Borde. En CSS, existe el atributo border. Puedes seleccionar su alineación 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 serán ú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 tamaño de una imagen

Dentro de Dreamweaver puede modificarse el tamaño de las imágenes.

Por un lado, podemos cambiar el tamaño con el que se ve una imagen, pero dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen, que conservará el tamaño original.

Es muy probable que la imagen resultante no sea de buena calidad, en comparación de cómo podría quedar modificándola 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 tamaño de varias formas diferentes:


Tamaño original

Con tamaño modificado

El resultado puede ser más o menos satisfactorio, dependiendo del navegador que es el que aplica realmente el reescalado, pero en ocasiones puede resultar útil modificar el tamaño de algunas imágenes aunque esto implique perder calidad.

Existen dos formas de modificar el tamaño.

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 través de inspector de propiedades, cambiando los campos Ancho o Alto. Estos campos aparecerán en el inspector cuando esté seleccionada alguna imagen.

Si estos campos no contienen el tamaño original 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.

Como hemos comentado, este cambio de tamaño se produce alterando los atributos de anchura y altura, pero no cambiando el tamaño real del archivo, por lo que el usuario deberá descargarse el archivo completo con su tamaño original.

Por ejemplo, si tenemos una fotografía de nuestra cámara de fotos, de un tamaño grande (por ejemplo 2592x1944px), y queremos mostrar una miniatura (por ejemplo, de 200x150px) esta sería una mala solución, porque el usuario se estaría descargando el archivo completo, y no una miniatura real que ocuparía mucho menos tamaño.


Dreamweaver también nos permite cambiar el tamaño real del archivo de imagen.

Para hacerlo, seleccionamos la imagen, y pulsamos en el icono del Inspector de propiedades. Se abrirá la ventana Presentación preliminar de la imagen. Nos fijamos en la pestaña Archivo.

En la sección escala, podemos establecer un porcentaje del tamaño original.

El nuevo tamaño se mostrará en An (ancho) y Al (alto). También podemos introducir directamente el nuevo tamaño.

Incluso podemos recortar un área de la imagen, seleccionando Exportar área, y seleccionando el área de la imagen en la previsualización de la derecha (no se ve en la imagen anterior).

Cuando lo tengamos, pulsamos Aceptar.

En este caso, si hemos alterado físicamente 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 cómo trabajar con tablas. Podremos, entre otras cosas, insertar tablas, combinar celdas, insertar filas o columnas y cambiar el tamaño del borde.


6.1. Introducción

Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizar.

La finalidad de las tablas es presentar una serie de datos de forma clara y organizada, dividiéndolos en filas y columnas.

Hasta hace poco, y todavía hoy es fácil encontrar diseños 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 práctica recomendable, ya que las tablas no fueron pensadas para ello, y si no están bien anidadas pueden ocasionar problemas al analizar nuestra web con herramientas automáticas, como los bots que indexan el contenido para los buscadores. Para maquetar nuestras páginas, lo recomendado es emplear capas (div) y CSS.

Las tablas están formadas por un conjunto de celdas, distribuidas en filas y columnas. A continuación tienes un ejemplo de tabla.

6.2. Insertar una tabla

Para insertar una tabla hay que dirigirse al menú Insertar, a la opción Tabla. En la nueva ventana habrá que especificar el número de Filas y Columnas que tendrá la tabla, así como el Ancho de la tabla.


El Ancho puede ser definido como Píxeles o como Porcentaje. La diferencia de uno y otro es que el ancho en Píxeles es siempre el mismo, independientemente del tamaño de la ventana del navegador en la que se visualice la página, en cambio, el ancho en Porcentaje indica el porcentaje de la página o del elemento contenedor) y se ajustará al tamaño 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 píxeles, 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.


También se puede establecer si se quiere un encabezado para la tabla, por ejemplo para indicar el contenido de filas o columnas. Aunque podríamos lograr el mismo diseño 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 información de la tabla.

Si queremos incluir un título, lo indicamos en Texto, el título aparecerá fuera de la tabla.

En Resumen: podemos indicar una descripción 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 cómo insertar elementos multimedia. En concreto, veremos cómo insertar una animación Flash, un sonido y un vídeo, que son los más empleados.

7.1. Películas Flash (SWF)

Las películas Flash son animaciones, cuyo archivo tiene la extensión SWF. Es frecuente verlas en las páginas iniciales de los sitios web, a modo de presentación hacia los usuarios, como banners publicitarios, como botones... Flash es el elemento multimedia más empleado en las páginas web.

Estas películas pueden crearse mediante el programa Flash también de Adobe. Para poder ser visualizado en el navegador, y necesitan que el usuario tenga instalado el plug-in de Flash Player. Su instalación es muy sencilla y normalmente ya viene con el navegador.

Las películas Flash pueden insertarse en una página a través del menú Insertar → Media, opción SWF, o pulsando Ctrl + Alt + F.


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

Como en otros elementos, como las imágenes, 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 ubicación en Origen. Así, para editarlo, bastará con pulsar Editar.

La opción Bucle indica que al finalizar la película, ésta volverá a comenzar desde el principio. La otra es la opción Rep. autom. (reproducción automática), que al estar marcada indica que nada

más cargarse la página comenzará a reproducirse la película Flash. Si esta opción no estuviera marcada, se mostraría únicamente el primer fotograma de la película hasta que el usuario la activase. Por tanto interesa desmarcar esta opción cuando se desea que la reproducción sea activada por algún comportamiento.

La Calidad, cuanto más 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 películas Flash no siempre son del tamaño exacto del contenido, pueden tener un escenario de fondo alrededor del objeto, aunque no se muestre. Si dejamos Predeterminada, se verá todo la película. En cambio, si elegimos Ajuste exacto, se verán sólo los objetos, omitiendo el escenario de fondo.


Alinear funciona como con las imágenes, y nos permite alinear la película en relación con el texto. Si queremos centrarla horizontalmente, podemos optar por centrar el contenido del elemento que contiene el Flash (normalmente un párrafo) empleando CSS.

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 botón Reproducir nos permite ver la película.

Al insertarse la película, veremos la ubicación en la vista de diseño con el siguiente aspecto:

Al insertarse animaciones Flash, es frecuente que Dreamweaver añada algunos archivos que nos permitirán reproducir los elementos, normalmente creando la carpeta Scripts. Es importante incluir esta carpeta cuando publiquemos nuestro sitio, si no los archivos no se verán. De todas formas, Dreamweaver nos avisará cuando incluya archivos.

7.2. Vídeos

En ocasiones puede interesar incluir algún vídeo en una página web, pero hay que tener en cuenta que los vídeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse.

En este apartado nos referimos a insertar vídeo de un archivo alojado en nuestro sitio. No a mostrar vídeos de sitios especializados, como youTube.


Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.

Para insertar un archivo de vídeo en un documento tienes que dirigirte al menú Insertar, Medía, opción Plug-in.

Puedes ver el vídeo (si tienes el plugin adecuado) a continuación:

El inspector de propiedades para los archivos de vídeo 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 atención al ancho y alto. Por defecto, si Dreamweaver no puede obtener el tamaño del archivo lo fijará a 32 x 32, insuficiente para ver un vídeo. Es mejor borrarlos, y así el vídeo se mostrará con su tamaño original. Si conocemos el tamaño del vídeo, podemos pensar en insertarlo directamente, pero hay que tener en cuenta el tamaño de los controles de reproducción, que depende de cada navegador.

Los vídeos también se reproducen automáticamente al cargarse la página, y se reproducen solamente una vez. Estos valores pueden cambiarse a través botón Parámetros, del mismo modo que en el caso de los archivos de audio, añadiendo autostart="false" y loop="true".

Como ya hemos dicho, 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. 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.

En el caso de que el usuario no tenga instalado ningún plug-in adecuado, puede establecerse en el campo URL plg una página en la que pueda encontrarlo. No será necesario en los archivos más comunes de audio y vídeo, pero sí si intentamos cargar un archivo más 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

http://www.taringa.net/posts/videos/13570465/Tutorial-Dreamweaver-CS5---Aprende-a-crear-un-sitio-Web.html

http://www.aulaclic.es/dreamweaver-cs5/t_18_5.htm

Documents

Actividad 9 Grado.docx