Tecnología

Inicio

Cómo construir una demostración del cuadro Galería de imágenes en Dreamweaver CS3

Cómo construir una demostración del cuadro Galería de imágenes en Dreamweaver CS3


Una "muestra la imagen", o "galería de imágenes," presenta fotografías en una página web similar a la cartera. Mientras que las galerías de imágenes pueden tener muchas configuraciones, se muestra un formato popular las imágenes en miniatura a lo largo del lateral, superior o inferior de la página. A medida que el usuario hace clic en cada miniatura, una versión de tamaño completo correspondiente de la fotografía se muestra en el centro de la página. Dreamweaver CS3 soporta varias maneras de crear galerías de imágenes. Uno de los métodos más fáciles y más común es utilizar un "conjunto de marcos." Un conjunto de marcos es un contenedor de página HTML que consta de dos o más "marcos". Cada cuadro muestra una página individual o URL.

Instrucciones

La preparación de sus fotos

1 Cambiar el tamaño de las fotos en su software de edición de imágenes. Usted necesitará dos versiones de cada imagen --- una versión de tamaño completo (por ejemplo, 400 por 300 píxeles, o lo que funciona mejor para la forma y el tamaño de las fotos) y una versión en miniatura (por ejemplo, 100 por 75 píxeles) .

2 Ajuste la resolución de cada imagen de puntos "72" (o píxeles) por pulgada (o "96" para monitores de alta definición).

3 Guardar cada imagen en un subdirectorio del directorio donde va a crear su sitio web galería de imágenes. Nombrar el subdirectorio de "imágenes". Guardar las imágenes como archivos JPEG. nómbralas "foto1", "photo2", y así sucesivamente; nombrar las miniaturas correspondientes "Thumb1", "thumb2", etc.

Creación de su Galería de imágenes en Dreamweaver

4 Abrir Dreamweaver y, a continuación, haga clic en "Archivo" en la barra de menús. Seleccione la opción "Nuevo" para mostrar el cuadro de diálogo Nuevo documento.

5 Haga clic en "Página de la Muestra" en la columna izquierda del cuadro de diálogo y haga clic en "marcos" en la columna "Carpeta de muestra". Esto muestra una lista de conjuntos de marcos de muestra en la tercera columna del cuadro de diálogo. Eligió "Fija a la izquierda."

6 Haga clic en "Crear". Dreamweaver muestra la "etiqueta de marco Atributos de accesibilidad" cuadro de diálogo. Haga clic en Aceptar." Los marcos se denominan según su ubicación en la página. El marco izquierdo se denomina "leftFrame," y el bastidor principal se llama "mainframe."

7 Haga clic en "Archivo" en la barra de menú y selecciona "Guardar todo." Dreamweaver le pedirá que nombrar tres archivos, uno tras otro: En primer lugar, el conjunto de marcos --- el nombre de "galería". En segundo lugar, el marco principal --- El nombre de "photo1." En tercer lugar, la izquierda del marco --- el nombre "miniaturas".

8 Insertar "photo1.jpg" en el marco principal (derecha), y luego haga clic en "Archivo" en la barra de menú y selecciona "Guardar marco."

9 Crear un nuevo archivo HTML en el marco principal para cada foto y guardarlo, como esto: Eliminar "photo1.jpg" de la trama principal. Insertar "photo2.jpg" en el marco principal. Haga clic en "Archivo" en la barra de menú y selecciona "Guardar marco como". Nombre del archivo "photo2" y guardarlo. Repita este procedimiento para cada una de sus fotos, nombrando a cada archivo HTML con el nombre de la foto correspondiente.

10 Insertar sus imágenes en miniatura en el marco izquierdo. Coloque las imágenes verticalmente en el marco en el orden en que los nombró --- "foto1" primero ", photo2" segundo, etc.

11 Seleccione la primera miniatura. Vaya al panel Propiedades y escriba el nombre de archivo y la ruta de la primera página de fotos HTML de tamaño completo en el campo "Enlace", de esta manera: "images / photo1.html" (sin comillas).

12 Haga clic en el "Target" desplegable en el panel Propiedades y seleccione "mainframe." Esto le dice el navegador del usuario para cargar photo1.html en el marco principal cuando se hace clic en la imagen en miniatura.

13 Repita los dos pasos anteriores para cada uno de la uña del pulgar y los conjuntos de imágenes de tamaño completo.

14 Haga clic en "Archivo" en la barra de menú y selecciona "Guardar marco" para guardar "thumbnails.html."

15 Abrir "gallery.html" en un navegador para probar su galería de imágenes.

Consejos y advertencias

  • Si prefiere colocar sus imágenes en miniatura a través de la parte inferior o superior de la página, seleccione el conjunto de marcos adecuada en el cuadro de diálogo Nuevo documento, como "inferior fijo" para colocar el marco en miniatura en la parte inferior.
  • Al cargar la galería de imágenes a un servidor web, asegúrese de incluir todos los archivos HTML y el subdirectorio de "imágenes".