Estos son los temas que trabajamos con los alumnos de 5to de Secundaria. Trabajamos Flash y Dreamweaver...

1. Diseño Web: Dreamweaver - Flash
PRACTICA 1
1. Define según tu criterio lo que entiendes de la definición de
una Página Web:
Es un entorno que muestra información por medio de textos,
imágenes, animaciones, hipervínculos, etc.
2. ¿Qué tipos de navegadores utilizas con frecuencia? Menciona
Nestcape Navigator – Internet Explorer – Mozila Firefox
3. ¿Cuál es la diferencia entre un sitio Web y un sitio en
Dreamweaver?
• Sitio Web es un espacio en internet en el cual están
guardados archivos que se ven en una página web.
• Sitio de Dreamweaver es una carpeta en la cual están
guardados todos nuestros archivos de nuestra pagina Web.
4. RELACIONA LOS SIGUIENTES CONCEPTOS CON SU DEFINICION:
Pagina Web • Documentos vinculados
• Dreamweaver
Navegador
• Internet Explorer, Netscape
Sitio Web
• Documento de tipo HTML
Editor de páginas Web
5. MARQUE VERDADERO O FALSO
El modo básico nos permite utilizar el Asistente para crear nuevos sitios ( V )
El panel de archivos nos permite visualizar los archivos y carpetas que están
asociados en nuestro sitio ( V)
Un elemento multimedia puede ser un video o audio ( V)
W s W

2. Diseño Web: Dreamweaver - Flash
PRACTICA 2
1. Marca Verdadero o Falso según corresponda:
( V ) En la elaboración del boceto de nuestras páginas,
debemos incluir elementos tales como textos, imágenes,
botones e hipervínculos.
( V ) Una tabla consta de varias filas, cada una de las cuales
consta, a su vez de una o más celdas.
( V ) En el modo estándar las tablas no se visualizan como en
el navegador, ni como quedara exactamente la pagina.
( V) El ancho de una tabla anidad estará limitado por el ancho
de la celda en que aparece.
2. Es muy recomendable elaborar un BOCETO pues ayuda a
ver mejor las ideas que queremos representar y expresar en
nuestras Páginas Web.
3. Las PLANTILLAS son una herramienta perfecta para
organizar datos de manera ordenada y además, podemos
usarlas para definir la estructura de la Pagina Web.
4. El panel de PROPIEDADES permite examinar y editar las
propiedades del elemento de pagina, sea tabla, celda,
seleccionada actualmente.
5. Una tabla ANIDADA es una tabla dentro de otra.
6. A los comandos Dividir celda y combinar celda, los podemos
encontrar en CLIC DERECHO EN LA TABLA TABLA
7. Para cambiar el tamaño de una celda o una tabla, debemos
manipular los NODOS que aparecen alrededor de ellas
cuando la seleccionamos.
W s W

3. Diseño Web: Dreamweaver - Flash
SOBREEXPOSICIÓN DE IMAGENES
Seguro que el efecto de sobreexponer imágenes has visto en las diversas
páginas web. Consiste en hacer que una imagen aparezca, desaparezca y
se visualiza otra en su lugar. La verdad es que este efecto asombra por su
sencillez.
Para hacerlo, simplemente creamos una interpolación de movimiento con
nuestras imágenes.
1. En el primer fotograma inserta una imagen (Archivo – Importar –
importar a escenario).
2. Cambia el tamaño de la imagen en el panel de Propiedades (an: 550 y
al: 400).
3. Ubica la imagen en el centro del escenario y crea una Interpolación de
Movimiento en el Fotograma 1(Clic derecho – Crear Interpolación de
movimiento).
4. Crea tres fotogramas (presionando F6) en el número
30, 50 y 80.
5. Haz clic en el Fotograma N° 1. Ahora clic en la
imagen. En el panel de Propiedades elige Color:
Avanzado y luego presiona en el Botón
“CONFIGURACION”. Cambia a los siguientes valores.
6. Ahora haz clic en el fotograma 30. Sigue el
mismo paso anterior pero cambia las
cantidades como se ve a continuación:
Ahora haz clic en el fotograma 80 y haz lo mismo del paso 5.
Ahora viene la Práctica de verdad.
7. Inserta una nueva capa (Insertar –Línea de tiempo - Capa) haz clic en
el fotograma 82 de esta ultima capa (2) y presiona la tecla F6. Importa otra
imagen (Archivo – Importar-importar a escenario).
W s W

4. Diseño Web: Dreamweaver - Flash
COMPLETA:
¿Qué tipos de archivos crea Flash? Especificar:
: FLA: Archivos editables : SWF: Archivos compilados (animación)
¿Cuáles son las partes principales de Flash?
Escenario – Línea de tiempo – herramientas – panel de propiedades –
paneles de librería, historial, etc
¿Cuáles son las formas de ver la animación en flash? especifica
: Enter: ver la vista previa en el programa (Flash).
: Ctrol + Enter: Ver la animación compilada. (Presentación final).
¿Qué es un Fotograma en Flash?
Es 1 segundo de movimiento.
¿Qué código utiliza flash?
Utiliza el código Action Script que permite crear y dar movimiento a formas
básicas dentro de un programa.
¿Cuál es la diferencia entre un Fotograma y un fotograma clave?
Un Fotograma es 1 segundo de movimiento. Fotograma clave es un
marcador del inicio o final de una animación.
¿Cuál es el tamaño estándar del escenario de Flash?
550 pixeles de anchura y 400 pixeles de altura
¿Por qué cuando tenemos una animación de Flash; en la página creada
aparece una barra amarilla donde debemos permitir elementos
emergentes?
Es porque el navegador pide permiso para visualizar contenido que no
tiene la firma o permiso para que se visualice, eso ocurre cuando los
objetos (video, imágenes, animaciones) no son de la misma empresa del
navegador.
¿Qué es un Plugin?Es un visualizador de objetos que requiere instalarse
para poder ver información. Normalmente para ver animaciones en una
página web y que el navegador no puede ya que tiene otra tecnología.
W s W

5. Diseño Web: Dreamweaver - Flash
VÍNCULOS
Dreamweaver crea vínculos a otras páginas web del sitio empleando rutas
relativas a documentos. También podemos indicar a Dreamweaver que cree
vínculos nuevos utilizando rutas relativas a la raíz del sitio.
Es posible crear varios tipos de vínculos en un documento:
• Un vinculo con otro documento (pagina web) o archivo, como un archivo
grafico, de película, de sonido, etc.
• Un vínculo de anclaje con nombre que “salta” a un lugar especifico
dentro de un documento.
• Un vínculo de correo electrónico, que crea un mensaje de correo
electrónico en blanco o con la dirección del destinatario ya rellenada.
CREACION DE UN HIPERVÍNCULO CON OTRO DOCUEMNTO
• Ubicar el documento donde desees que aparezca el hipervínculo.
• Para abrir el cuadro de dialogo insertar hipervínculo presiona en Menú
insertar – Hipervínculo
Se abrirá el cuadro de dialogo
En él disponemos de lo siguiente:
Texto; en donde digitamos el texto que aparecerá como hipervínculo en el
documento.
Vinculo; hace clic en la carpeta para seleccionar el documento del
hipervínculo.
Destino; elegiremos la ventana en la que se abrirá el documento.
Titulo; lo que digitemos en este campo aparecerá cuando ubiquemos el botón
del mouse sobre el hipervínculo.
Tecla de acceso, especifica una tecla que digitaremos en el navegador para
que se seleccione el hipervínculo.
W s W

6. Diseño Web: Dreamweaver - Flash
Índice del tabulador, digitamos un número para el orden de fichas (alm.
interno).
OBS:
• La lista despegable del campo del campo Dest del panel de
propiedades, selecciona una ubicación para abrir el documento:
_blank, visualiza el documento vinculado en una nueva ventana
_parent, visualiza el documento en el marco padre o en la ventana
padre del marco que contiene el vinculo.
_self, visualiza el documento vinculado en el mismo marco o la
misma ventana que el vinculo.
_top, visualiza el documento vinculado en la ventana del navegador.
VÍNCULOS DE CORREO ELECTRONICO
Nos permite crear un enlace en el cual aparecerá el programa de correo
instantáneo; en donde dice para: se rellenara automáticamente el correo que
especificamos. Esto se ve en el caso de empresas que encontramos en su
pagina las palabra: escríbenos, contáctanos, etc.
Aplicar este vincula de la siguiente forma: Insertar – vínculo de correo
electrónico
Y aparecerá:
• En el campo Texto, se digitara el texto que se desea mostrar en el
documento como vinculo del correo electrónico.
• En el campo Correo Electrónico, se escribe la dirección a la cual se
deberá enviar el correo.
W s W

7. Diseño Web: Dreamweaver - Flash
TRABAJO CON IMÁGENES
• Propiedades de una imagen
Cuando seleccionamos una imagen veremos las propiedades de esta en el
panel de propiedades.
La opciones An y Al; sirven para cambiar el tamaño
En la opción Vínculo seleccionaremos o escribimos el nombre de una página
Web.
• Zonas Interactivas
Sirven para marcar una zona de la imagen en la que podemos hacer clic para
que nos lleve hacia un hipervínculo. Tenemos 3 formas:
Zona interactiva poligonal
Zona interactiva rectangular
Zona interactiva oval
• Imagen de sustitución
Permite hacer que al pasar sobre una imagen (en el navegador) aparezca otra.
Para aplicar:
Menú insertar – objetos de imagen – imagen de sustitución
Debemos elegir dos imágenes para poder ver la sustitución. (Imagen original,
imagen de sustitución)
En el campo: Al hacerse clic, ir a URL; podemos escribir una dirección Web
de una página Web.
W s W

8. Diseño Web: Dreamweaver - Flash
CREAR UN ENLACE DE DESCARGA
1. Crea un texto con la palabra: Descargar, Download.
2. Selecciona el texto y haz clic en insertar – hipervínculo.
3. En el campo vinculo selecciona un archivo para descargar.
4. Presiona Ok.
OBS:
Cuando ejecutas tu página verás que al hacer clic sobre la palabra
saldrá el mensaje con las opciones de abrir y guardar archivo.
Tener en cuenta que con la opción Abrir cargará el archivo desde
internet y no guardaran los cambios que realizamos.
Guardar es más recomendable ya que permite guardarlo en un
disco y hacer los cambios que deseamos.
INSERTAR VIDEOS EN TU PAGINA WEB
Lo más recomendable es no tener en la carpeta de nuestro sitio lo
videos que deseamos sino hay que copiar el código de enlace de
los videos guardados en los servidores de internet.
Para insertar videos en nuestra página hacemos lo siguiente:
Ingresamos a www.youtube.com o a otra página de videos en el
cual se pueda copiar el enlace al servidor.
Buscamos el video que deseamos y al presionar el botón Embed
o Insert aparecerá un “código script” el cual lo copiaremos en la
vista código de nuestra página.
Tener cuidado al ubicarse en la codificación de la pagina.
Para esto haz clic en donde quieras tener el video (en vista diseño),
presiona en la pestaña código y aparecerá el cursor dentro de las
etiquetas que tiene nuestro diseño pero en código. Pégalo ahí y
veras que aparece una rectángulo plomo que es en realidad el
video (vista diseño). Cambia el tamaño y la ubicación donde creas
conveniente.
Solo falta guardar (Ctrol + S) y visualizar tu pagina.
W s W