-
Cómo tomar imágenes en Dreamweaver CS5 Transición
-
transiciones de imágenes a través de una ventana superpuesta consulta impulsada Javascript son un sitio web elemento de diseño común, para la exhibición de fotografías y la transición entre las imágenes como una presentación. Este tipo de transición generalmente se llama una "caja de luz". editor HTML de gama alta de Adobe, Dreamweaver CS5 le permite enlazar las bibliotecas existentes de fotografías para pre-escritos librerías Javascript para lograr este efecto, sin tener que escribir ningún código Javascript en su cuenta.Instrucciones
1 Descargar el archivo creado previamente caja de luz de su elección, y descomprimir el archivo. Usted encontrará una serie de cuatro carpetas y un archivo index.html. Las carpetas son "css", que tiene los archivos de hojas de estilo en cascada, "fotos", que contiene dos copias de cada una de las fotos que va a utilizar - uno con una miniatura, una a resolución completa, "imágenes", que contiene los iconos utilizados para los botones y controles, y "JS", que contiene los archivos Javascript que va a utilizar.
2 Copiar sus propias imágenes y las imágenes en miniatura en la carpeta "fotos"; asegurarse de que las miniaturas anteponga el nombre de la imagen con "thumb_." Por ejemplo, "car.jpg" tendría una miniatura de "thumb_car.jpg." Asegúrese de que cada imagen tiene su correspondiente versión en miniatura.
3 Copia la carpeta caja de luz en el directorio de trabajo para su copia local de su sitio web, y abre su página web en Dreamweaver. Utilice la herramienta "Enlace Imágenes" para enlazar las imágenes en miniatura en su página web en los lugares que desea que estén en.
4 Haga clic en cada imagen en miniatura en la vuelta y mirar el área de propiedades de los elementos de la aplicación Dreamweaver; encontrar una opción para crear un enlace en torno a esa miniatura. Al lado de ese cuadro de texto es un icono para "punto de presentar." Haga clic en eso y arrastre la flecha que da lugar a la imagen más grande la imagen señalará. Repita este procedimiento hasta que haya vinculado cada miniatura de cada imagen.
5 Haga clic en la ventana de código del archivo HTML, y desplazarse hasta la cabecera. Dentro de las etiquetas <head> y </ head>, escriba una etiqueta que tiene este aspecto:
<Script type = "text / javascript" src = "
Dreamweaver se tire hacia arriba un pequeño menú donde puede seleccionar el js carpeta que utiliza su mesa de luz, y donde poder seleccionar el archivo "jquery.js." El código final se verá algo como esto - pero puede variar dependiendo de donde se ha colocado la carpeta caja de luz:
<Script type = "text / javascript" src = "/ js jquery.js"> </ script>
6 Añadir una segunda etiqueta de script, como esto:
<Script type = "text / javascript" src = "js / jquery.lightbox-0.5..js"> </ script>
La primera etiqueta script que agregó detiene la función "jQuery", y éste se detiene en la caja de luz específica código javascript. El nombre del código puede variar en función de la luz que está utilizando.
7 Configurar la función de "gancho" para su caja de luz a partir del código fuente proporcionado, dentro de una función Javascript que tiene este aspecto:
<Script type = "text / javascript">
$ (Function () {
$ ( 'A.lightbox') Álbum (.);
});
</ Script>8 Desplazarse hacia abajo y encontrar cada etiqueta <a href> que rodea una etiqueta <img>. Inserte el siguiente texto en cada etiqueta:
class = "caja de luz"
justo antes del paréntesis de cierre de la etiqueta <a href>. Por ejemplo, podría ser algo como esto:
<a href="photos/car.jpg" class="lightbox">
9 Vincular el archivo CSS que acompaña a la luz de la cabeza de su documento HTML; usted puede hacer esto con la función "Adjuntar hoja de estilos" de Dreamweaver en el panel Archivos. Busque el archivo jQuery.css, y vincularlo en.
Consejos y advertencias
- También se puede poner un atributo de título en cada atributo href> <a, como esto: <a href="car.jpg" class="lightbox" title="Camaro">, pero no es necesario para la transición de imagen.
