Video Tutoriales de Dreamweaver CC 2015

Video tutoriales de Dreamweaver CC 2015 y Bootstrap GRATIS Online


···Video tutoriales en español de como usar Dreamweaver CC 2015 y Bootstrap GRATIS Online
Como hacer páginas web Adaptables ···

video tutorial Dreamweaver CC 2015 español

Primer ejemplo práctico. Tutorial en el que creas una galeria de imágenes en Dreamweaver con la libreria de Bootstrap

Para que te hagas a la idea de lo fácil que es utilizar Bootstrap y dreamweaver, en este video tutorial aprendes como insertar una galeria de imágenes la cual puedes personalizar. Esta galeria se adapta a su contenedor y al

video tutorial Dreamweaver CC 2015 español

Segundo ejemplo práctico del uso de los componentes de Bootstrap en Dreamweaver. Creamos un menú adaptable en la parte superios de una página web.

Como verás en este video tutorial lo interesante de este menú adaptable, es que al adaptarse a los móviles, aparece en la parte donde estaba el menú, una imagen llamada sanwich que nos permite abrir o cerrar el menú. Seguro lo has visto muchas veces si navegas con tu móvil.

video tutorial Dreamweaver CC 2015 español

Insertamos un vídeo adaptable de youtube con la libreria de Bootstrap

Aprende con este video tutorial de Dreamweaver lo fácil que es insertar un vídeo adaptable en tu web.

Video tutorial de Dreamweaver CC 2015
Nueva ventana para la consulta de medios visuales, es decir, controlar como se verá la web en diferentes dispositivos. Añadirmos nuevas consultas

1.- Tutorial de Nueva ventana para la consulta de medios visuales, es decir, controlar con este tutorial de Dreamweaver como se verá la web en diferentes dispositivos. Esta nueva utilidad solo la podrás ver si estas en vista en vivo no en vista de diseño.

Como podrás ver, bootstrap ya viene configurado para trabajar con móvil la primera zona de la izquierda, tablet, la siguiente zona de la izquierda, ordenador postatil, la tercera zona y ordenador de sobremesa. En este videotutorial, añadirmos nuevas consultas para que aprendas como se tiene que configurar.

Video tutorial de Dreamweaver CC 2015
Mejoras en la ventana de código. Ahora podemos escribir un poco de la etiqueta y es escribe el resto solo. Mejoras en el control de errores

2.- Tutorial de Mejoras en la ventana de código.

Se ha a reincorporado la contracción de los bloques del código . Ahora, tendrá las siguientes opciones:Contraer código de etiqueta, Contraer una porción de código al seleccionarla.

Cuando se selecciona un bloque de código, se muestra la opción correspondiente para contraerlo,  Ahora podemos escribir un poco de la etiqueta y es escribe el resto solo. Mejoras en el control de errores, en este video tutorial de Dreamweaver te muestro como

video tutorial Dreamweaver CC 2015 español

3.- Tutorial de Nueva libreria de Javascript y CSS para facilitarnos el diseño de sitios adaptables.

Ahora al crear un nuevo documento, Dreamweaver te ofrece la posibilidad de utilizar la Libreria de Bootstrap.La libreria Bootstrap consta de unos ficheros, estilos CSS y JavaScript que te facilitan mucho el diseño de páginas web adaptables al dispositivo. Tu no te tienes que preocupar demasiado, más bien asegurarte de que todo queda como tu esperas. Esta libreria proporciona todo el código para facilitarte el trabajo de diseño.

video tutorial Dreamweaver CC 2015 español

4.- Visualiza y organiza la jerarquía de tu web con la nueva ventana de DOM.

Al utilizar divs anidados, en ocasiones o más bien, siempre es un poco complicado movernos y seleccionar el div en concreto al que le queremos aplicar una clase o editar cualquier parámetro, con esta nueva ventana, te será mucho más simple seleccionar el div que quieres editar. También la piedes utilizar para eliminar divs o incluso para moverlos.

Verás que te muestra la etiqueta de lo que tienes seleccionado y si haces un clic en la etiqueta, se abre su arbol para mostrarte que tiene anidado. Realmente comodo si tu web tiene una jererquia de anidamiento muy profunda. Y perfecta para utilizarla con los nuevos componentes de Bootstrap

video tutorial Dreamweaver CC 2015 español

5.- Ahora es mucho más fácil insertar elementos en nuestra web en vista en vivo.

Si esta viendo tu web en vista en vivo, puedes arrastrar objetos desde la ventana de inserción hasta la posición que tu quierás de tu página. Al mantener el ratón apretado verás diferentes opciones de donde quieres que lo situe, lo puedes ver claramente en este tutorial.

···Ejemplos gratuitos del Curso de Bootstrap y Dreamweaver Online ···

video tutorial Dreamweaver CC 2015 español

6.- Que es la libreria de Bootstrap

Aprende que es Bootastrap creando una nueva página web en Dreamweaver y activamos la opción de Bootstrap, con esto verás los ficheros que te ha creado. Estos son ficheros CSS, JS Y fuentes. Y si mirlas el código verás que inserta enlaces a estos ficheros. Verás un ejemplo simple de como utilizar Bootstrap en una web.

video tutorial Dreamweaver CC 2015 español

7.- Aprender de las plantilla de bootstrap que incorpora Dreamweaver

Aprende con este video tutorial como se crea un nuevo documento con Bootstrap y ver que fucheros nos crea. Creamos una página a partir de plantilla para ver cono esta utilizando Bootstrap. Aprenderás como interpretar la forma que Dreamweaver te muestra que tienes seleccionado. Diferentes cosas que puedes insertar del dialogo de Bootstrap.

video tutorial Dreamweaver CC 2015 español

8.- Los contenedores que tiene Dreamweaver al usar Bootstrap

Aprende con este video tutorial como usar los diferentes tipos de contenedores que tenemos en el panel de inserción. El primero que se llama container fluid ocupa el 100% de la página y el que se llama container, se cenra en la página y tiene pequeños márgenes a los lados. Aprende como anidar uno dentro del otro. Inserta una galeria dentro de un contenedor.

video tutorial Dreamweaver CC 2015 español

9.- Inserta un menú en Dreamweaver con Bootstrap

Aprende con este video tutorial como puedes insertar un menú en un contenedor fluido y cambiar sus colores para adaptarlo a tu gusto. Lo primero es analizar de que esta compuesto el menú por medio de la ventana de DOM. Añades y quitas elementos del menú.

video tutorial Dreamweaver CC 2015 español

10.- Distribuye tu contenido en columnas con Dreamweaver con Bootstrap

Aprende con este video tutorial como puedes configurar columnas para poder poner tu contenido. Mira como Dreamweaver te muestra en que medio esta trabajando. Verás que es la teoria de las 12 columnas para destribuir el contenido. Verás que clases css se aplican a cada Div para hacer que actuen como columnas.

video tutorial Dreamweaver CC 2015 español

11.- Personaliza las columnas con Dreamweaver con Bootstrap

Aprende con este video tutorial como puedes personalizar las columnas para que tengan una imagen de tu logo y a continuación el menú, esto en el medio del ordenador de sobremesa, encambio en el tablet o móvil, el logo estara arriba centrado y el menú de contrae.

video tutorial Dreamweaver CC 2015 español

12.- Utiliza HTML5 con Dreamweaver con Bootstrap

Aprende con este video tutorial como puedes personalizar las etiquetas HTML que inserta Dreamweaver ya que por ahora lo que nos inserta son div, no utiliza las nuevas etiquetas de HTML5

videotutoriales.es ®2005-2016 Telf: 692272294 Islas Baleares - ciutadella de Menorca