Crear álbum de fotos
-
Upload
samuel-molina-javier -
Category
Documents
-
view
303 -
download
5
Transcript of Crear álbum de fotos
![Page 1: Crear álbum de fotos](https://reader034.fdocuments.co/reader034/viewer/2022042601/553541794a79598f768b46a0/html5/thumbnails/1.jpg)
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
![Page 2: Crear álbum de fotos](https://reader034.fdocuments.co/reader034/viewer/2022042601/553541794a79598f768b46a0/html5/thumbnails/2.jpg)
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
![Page 3: Crear álbum de fotos](https://reader034.fdocuments.co/reader034/viewer/2022042601/553541794a79598f768b46a0/html5/thumbnails/3.jpg)
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
![Page 4: Crear álbum de fotos](https://reader034.fdocuments.co/reader034/viewer/2022042601/553541794a79598f768b46a0/html5/thumbnails/4.jpg)
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
![Page 5: Crear álbum de fotos](https://reader034.fdocuments.co/reader034/viewer/2022042601/553541794a79598f768b46a0/html5/thumbnails/5.jpg)
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
![Page 6: Crear álbum de fotos](https://reader034.fdocuments.co/reader034/viewer/2022042601/553541794a79598f768b46a0/html5/thumbnails/6.jpg)
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
![Page 7: Crear álbum de fotos](https://reader034.fdocuments.co/reader034/viewer/2022042601/553541794a79598f768b46a0/html5/thumbnails/7.jpg)
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
![Page 8: Crear álbum de fotos](https://reader034.fdocuments.co/reader034/viewer/2022042601/553541794a79598f768b46a0/html5/thumbnails/8.jpg)
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
![Page 9: Crear álbum de fotos](https://reader034.fdocuments.co/reader034/viewer/2022042601/553541794a79598f768b46a0/html5/thumbnails/9.jpg)
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.