Sábado, 04 Marzo 2017 21:20

Bootstrap desde Dreamweaver: Carousel Responsivo

Valora este artículo
(3 votos)

 Cabezal: Carousel Bootstrap con Dreamweaver

Bootstrap: Slider responsivo desde Dreamweaver CC2017

En esta oportunidad veremos, brevemente, cómo insertar, editar y ver los resultados de un slider responsivo basado en Bootstrap usando Dreamweaver:

1. Luego de crear un archivo nuevo en Dreamweaver (ver pasos 1 a 3 de esta entrada) procedemos a insertar el componente Carousel a través de la opción del menú Insertar -> Componente Bootstrap -> Carousel:

Insertando el componente Carousel desde Dreamweaver

2. Inmediatamente a esto, DW genera los códigos necesarios para insertar el slider responsivo basado en Bootstrap, cuyo aspecto gráfico es el siguiente:

 Aspecto del slider recién insertado

3. Es posible ver el código en vivo haciendo clic en este enlace, y descargar el ejemplo comprimido haciendo clic aquí.

Explicación de los códigos generados:

Como dijimos más arriba, al insertar un slider responsivo (Carousel), Dreamweaver genera todos los códigos para el funcionamiento de un slider básico de tres imágenes con sus respectivos textos descriptivos. Veamos a continuación como editar estos códigos para poder agregar o quitar fotogramas a nuestro Carousel:

a. En este bloque de código Dreamweaver inserta las etiquetas necesarias para generar los indicadores del slide activo:

Códigos para los indicadores de slider activo

Nota: Debemos aumentar correlativamente los valores del código anterior, agregando tantos li's adicionales como imágenes adicionales necesitemos agregar a nuestro carousel.

Se ha subido un ejemplo al que se integraron cuatro fotografías diferentes; el bloque de indicadores del slider se verá ahora de la siguiente manera (existe un nuevo li, en el que se aumentó el valor correlativo a 3):

Códigos para los indicadores del slider con cuatro fotos

Es posible ver el ejemplo funcionando haciendo clic aquí, y descargarlo en formato .zip en este enlace.

b. Una vez configurados los bloques indicadores del slide activo podemos agregar los códigos necesarios para incluir las fotos a incluir en nuestro slider; para lo cual debemos identificar los bloques que contienen a estas las fotos con sus textos descriptivos:

Bloque contenedor de uno de los slides del carousel

A modo de muestra, podemos ver el código de uno de estos bloques insertando una de las imágenes de ejemplo:

Ejemplo del código para una de las fotos del slider

Cada una de estas fotos requerirá de un bloque completo como el anterior:

Notas importantes:

  • Es conveniente que las imágenes utilizadas en el carousel tengan, por lo menos, las mismas proporciones, y de ser posible, las mismas dimensiones, para que el carousel no esté modificando su altura cada vez que cambia de slide.
  • Carousel Básico: Vista en vivo / Descarga
  • Ejemplo Carousel con 4 fotos: Vista en vivo / Descarga

Espero haber contribuido con estos ejemplos.

Como en todos los casos, las consultas puntuales sobre éste y otros ejemplos, para los alumnos que cursan Diseño Web o Dreamweaver, las pueden realizar en clases o vía email.

Saludos para todos!
Plácido.

Visto 522 veces Modificado por última vez en Sábado, 04 Marzo 2017 21:57