View
306
Download
5
Category
Preview:
Citation preview
Comportamientos en Dreamweaver
Profesor: Samuel Molina Javier Página 1
Crear álbum de fotos
I. Crear carpeta raíz “Album”
II. Crear sitio web “album1”
III. Crear un nuevo documento HTML e insertar tabla:
Fila: 1
Columnas: 2
Ancho de tabla: 955
Grosor del borde: 0
Comportamientos en Dreamweaver
Profesor: Samuel Molina Javier Página 2
IV. Cambiar propiedades de tabla
Alineación de tabla: centro
Cambiar alineación de la 1ra celda: horizontal – centro y vertical – superior
Cambiar alineación de la 1ra celda: horizontal – centro y vertical – medio
V. Insertar las imágenes en la 1ra celda
Tamaño de cada imagen: 250 x 150
Asignar nombre a cada imagen ejemplo. Img1
Comportamientos en Dreamweaver
Profesor: Samuel Molina Javier Página 3
VI. Ahora insertar imagen otra imagen en 2da celda:
Tamaño de imagen: 670 x 490
Nombre de imagen: contenedor
VII. Ahora activamos el panel de comportamientos
Comportamientos en Dreamweaver
Profesor: Samuel Molina Javier Página 4
VIII. Seleccionar img1
IX. Seleccionamos tipo de comportamiento
Clic en signo + del panel comportamientos
Clic en Intercambiar imagen
Comportamientos en Dreamweaver
Profesor: Samuel Molina Javier Página 5
X. En ventana intercambiar imagen
Seleccionar Imagen “contenedor” del cuadro imágenes
Y luego hacer clic Examinar
Seleccionar img1 e insertar
XI. Desactivar la opción Restaurar imágenes OnMouseOut y clic en aceptar.
Ahora seleccione img2 y ejecute los mismos procedimientos que realizaste con img1
Una vez terminada guar la página con nombre mi_album1
Comportamientos en Dreamweaver
Profesor: Samuel Molina Javier Página 6
XII. Para ver el resultado presiona F12 y veraz que al pasar el cursos por encima de cada imagen
cambiará de tamaño en imagen contenedor.
XIII. Agregando más efectos de comportamiento a nuestro álbum.
Seleccione la img1
Y veraz en el panel comportamientos onMouseOver
Cambiamos a evento onClick
También cambiamos color de relleno de tabla anegro
Comportamientos en Dreamweaver
Profesor: Samuel Molina Javier Página 7
Al presionar F12 veras que ahora al pasar el curso sobre img1 no cambia sino recién al hacer click
XIV. Realiza el mismo cambio para cada imagen
Comportamientos en Dreamweaver
Profesor: Samuel Molina Javier Página 8
XV. Agregar efecto desvanecer y aparecer
Seleccione img1
Click en signo + del panel comportamientos
Click en efectos
Click en aparecer/Desvanecer
En ventana aparecer/Desvanecer
Seleccione img “contenedor” del elemento de destino
En efecto: aparecer
Comportamientos en Dreamweaver
Profesor: Samuel Molina Javier Página 9
XVI. Ahora seleccione realiza el mismo procedimiento para cada imagen y veras el resultado final
es muy interesante.
Recommended