Saltar al contenido

Dreamweaver CC Responsive Design con Bootstrap

Sección Introducción Transcripciones

Resumen del curso

Dreamweaver CC Responsive Design con Bootstrap
Dreamweaver CC Responsive Design con Bootstrap

Este curso te introduce en la creación de páginas web sensibles usando Bootstrap y Dreamweaver. A lo largo del curso aprenderás sobre el diseño sensible, cómo Bootstrap utiliza CSS para crear diseños sensibles, y cómo utilizar Dreamweaver para aprender fácilmente el CSS de Bootstrap y elaborar el diseño de tu página. El comienzo del curso te guiará a través de conceptos clave, incluyendo cómo trabajar con HTML y CSS, cómo trabajar con diseños a lo largo del sistema de cuadrícula de Bootstrap, y cómo trabajar con componentes predefinidos de Bootstrap en Dreamweaver. Hacia el final del curso se centrará en conceptos intermedios, incluyendo la construcción de la estructura de un proyecto de sitio web, la marca del proyecto de sitio web con los archivos de Photoshop suministrados y la previsualización del proyecto de sitio web en todos los dispositivos, así que empecemos por echar un vistazo al proyecto en un navegador. Puedes ver que el sitio web tiene un diseño simple que se adapta al tamaño de la pantalla. A medida que muevo el ancho del navegador hacia adelante y hacia atrás puedes ver que el diseño se ajusta a sí mismo para mostrar siempre el contenido en cualquier tamaño. El sitio incluye cinco páginas, cada una de las cuales representa un diseño común que tal vez quieras crear. Hay una página de aterrizaje, con un diseño de cuadrícula simple, una página de Características, con un diseño de video y contenido de lista de apoyo, una página de Galería tiene un diseño de carrusel junto con texto y una cuadrícula, una página de Artículos, como un diseño de estilo de blog de artículo simple, y finalmente, una página de Contacto que tiene un formulario, como usted podría crearlo, para enviar información de contacto, y aquí está el proyecto completo en Dreamweaver. En el panel Archivos podrás ver que crearás una serie de activos, incluyendo HTML, CSS y archivos de imagen que extraerás de las composiciones de diseño de Photoshop. Puede ver, al mirar el espacio de trabajo, que estará trabajando tanto en código, como en la representación en vivo del código en la vista en vivo, donde verá una vista previa, y utilizando los diversos paneles y herramientas que Dreamweaver suministra para ayudarle a entender Bootstrap, y trabajar a través de la personalización. En la lección 2 repasarás todo lo que necesitas saber para configurar el proyecto. Por ahora, vamos a sumergirnos en los conceptos clave que te ayudarán a acelerar el curso.