Video en slider responsivo

Colocar un video responsivo en un slider responsivo

Respuesta a consulta en clases: Insertar un video responsivo en un slider responsivo, usando Bootstrap desde Dreamweaver. Veamos como:

Cabecera thumbnails responsivos con Bootstrap desde Dreamweaver

Thumbnails responsivos con Bootstrap desde Dreamweaver CC

En esta entrada sobre el uso de Bootstrap desde Dreamweaver CC2017 veremos como insertar imágenes de miniatura (thumbnails) responsivas en tres niveles de dificultad creciente: Insertar el componente Thumbnail en su versión más sencilla, la repetición de cuatro de estos cuatro thumbnails, y la sustitución de la imagen que Dreamweaver inserta por defecto ("Thumbnail_Placeholder.png") por cuatro imágenes de muestra, modificando el comportamiento de algunas etiquetas y agregando otras. Veamos como:

Tutorial imagen responsiva con Bootstrap desde Dreamweaver

Insertar una imagen responsive desde Dreamweaver CC2017

Esta entrada forma parte de una serie de microtutoriales llamados "Bootstrap desde Dreamweaver..." creados como material de apoyo a los cursos de diseño web y Dreamweaver, por lo que, como en todos ellos, los procedimientos son tratados de forma descriptiva, aunque de manera rápida y breve; los detalles de edición más avanzados son tratados en cada una de las clases, sean éstas presenciales o remotas.

Veamos como insertar imágenes responsivas desde Dreamweaver, con Bootstrap:

 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:

El componente Navbar desde Dreamweaver CC2017

Insertando una barra de navegación responsiva desde DW 2017

Esta es la primera de varias entradas orientadas a ayudar al estudiante inicial de diseño web con Dreamweaver a insertar y visualizar el resultado funcional de estos componentes responsivos que utilizan Bootstrap.

Insertar una barra de navegación responsive en DW CC2015

Menú responsivo con Bootstrap desde Dreamweaver CC2015

En este tutorial veremos que el procedimiento de insertar una barra de navegación responsiva usando Bootstrap desde Dreamweaver CC2015 lleva apenas unos cuandos pasos, luego de los cuales solo le siguen algunos pasos adicionales de configuración, algunos de los cuales se detallan a continuación:

Miércoles, 24 Agosto 2016 15:07

Diseñando un sitio web con Dreamweaver

Cabezal Diseñando un sitio con Dreamweaver

Pautas para el diseño de sitios con Dreamweaver

Este tutorial busca orientar técnicamente al alumno para el diseño de un sitio web en Dreamweaver, teniendo en cuenta aspectos relacionados con:

Cabezal artículo Accordion de BS en DW CC 2015

Tutorial Básico: Acordeón de Bootstrap desde DW CC 2015

Este tutorial surge en respuesta a una consulta surgida en clases: ¿Cómo insertar un acordeón en HTML usando Dreamweaver?

Veremos la solución a este problema insertando el componente Accordion de Bootstrap desde Dreamweaver CC 2015 en una página recién creada, de modo que en este tutorial nuestro componente quedará colocado directamente dentro del body del documento; en caso de trabajar con páginas parcialmente desarrolladas debemos elegir dentro de qué etiqueta insertaremos este componente, de acuerdo a nuestras necesidades de diseño; por otra parte, cada vez que se hable de ediciones en la vista de diseño debemos tener presente que es posible trabajar directamente en la ventana de códigos si es que nos resulta más cómodo, lo que dependerá de los conocimientos que cada uno de nosotros tenga con los mismos.

Plantillas de inicio en DW CC 2015

Creando páginas con las plantillas de inicio de DW CC 2015

En esta entrada trabajaremos en un brevísimo tutorial donde mostraremos como trabajar con las plantillas de inicio de Dreamweaver CC 2015, a partir de las cuales podremos luego crear nuevas páginas web; para lo cual se espera que el alumno, o eventual diseñador, adquiera o maneje las habilidades necesarias de edición de los documentos generados, de forma que le permitan modificar el diseño, así como cambiar, eliminar o agregar comportamientos nuevos de acuerdo a los propósitos desados.

Comencemos entonces con este tutorial de dificultad baja, dirigido a estudiantes iniciales y diseñadores que toman primer contacto con Dreamweaver, o más específicamente, con Dreamweaver CC 2015:

Slider responsivo - Cabezal del tutorial

Carousel responsivo usando Bootstrap en Dreamweaver CC

En este tutorial veremos la forma de generar un slider (slideshow) con Bootstrap en Dreamweaver CC 2015, para lo cual alternaremos entre la vista de diseño y la ventana de códigos con la finalidad de mejorar la comprensión de los códigos html y, por consiguiente, la edición lo más afinada posible de los mismos, lo que genera una independencia paulatina de la plataforma usada, así como un conocimiento mayor de los comportamientos de cada etiqueta html y las propiedades CSS involucradas. En este tutorial, además del agregado del Carousel de forma casi automática en Dreamweaver hablaremos sobre etiquetas body, div, ul, ol y otras:

Página 1 de 2