Cómo hacer un Light Box en Dreamweaver

Escrito por chad buleen | Traducido por mayra nava
  • Comparte
  • Twittea
  • Comparte
  • E-mail

Una lightbox ofrece a los desarrolladores web la flexibilidad para insertar imágenes en una página web. Las imágenes utilizadas en una lightbox esencialmente aparecen en la parte de arriba de una página web, no dentro de ella. Estas son efectivas porque permite que una persona que usa tu página web tenga la habilidad de hacer clic en una imagen pequeña y hacerla más grande en una caja sombreada en la parte superior de la página abierta. Esto mantiene al usuario en tu página y permite que coloques más imágenes en ella si usar mucho espacio. Puedes hacer una lightbox en Dreamweaver insertando la codificación correcta en el lugar adecuado de la página.

Nivel de dificultad:
Moderadamente difícil

Otras personas están leyendo

Necesitarás

  • Adobe Dreamweaver
  • Computadora

Lista completaMinimizar

Instrucciones

  1. 1

    Abre Dreamweaver. Selecciona "Ctrl+N" y luego "Documento HTML en blanco" para abrir una página nueva. Haz clic en la pestaña "Código" para obtener el lugar apropiado para trabajar con el código lightbox.

  2. 2

    Corta y pega el siguiente código en la sección "Principal" del documento Dreamweaver:

    <script type="text/javascript" src="js/prototype.js"></script><script type="text/javascript" src="js/scriptaculous.js?load=effects"></script><script type="text/javascript" src="js/lightbox.js"></script><link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

  3. 3

    Después de haber insertado este código, debes colocar los enlaces para las imágenes en miniatura en la página. Estas son fotos que lightbox hace más grandes. Utiliza este código para cada imagen:

    <a href="images/yourfirstimage.jpg" rel="lightbox" title="put your caption here">image name goes here</a>

    Este código debe colocarse justo debajo del código anterior.

  4. 4

    Haz clic en el botón "Vista previa" en la parte superior de la ventana de Dreamweaver para ver cómo funciona la página en un navegador web. Si estás satisfecho con su apariencia, continúa con el siguiente paso. Si no lo estás, haz modificaciones y revísalo de nuevo.

  5. 5

    Utiliza "Ctrl+A", "Ctrl+C" y "Ctrl+V" para seleccionar, copiar y pegar el código completo que se ha creado en Dreamweaver. Este puede pegarse en la caja de edición HTML en el extremo posterior de cualquier servidor web que utilices para publicar tu página. Una vez que hayas terminado, las imágenes se publicarán y podrán abrirse en tu lightbox.

Consejos y advertencias

  • Asegúrate de subir todas las imágenes individuales al servidor.
  • Las imágenes deben ser lo suficientemente grandes, normalmente de por lo menos 500k, para tener una calidad decente al abrir la imagen con el código lightbox.
  • Asegúrate de incluir todas las comillas en el código lightbox. Si te falta una, el código puede desactivarse.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles