El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Dreamweaver CC 2017 esencial

Dreamweaver y Bootstrap: responsive design

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Si pensamos en diseño, es bueno que también pensemos en el framework responsivo más utilizado en los últimos tiempos: Bootstrap. Este es una combinación de CSS y JS pensada para dar aspecto a las páginas de forma fácil y adaptable a los distintos dispositivos.

Transcripción

(hombre) A lo largo del curso, he ido hablando varias veces de "Bootstrap". Es bueno explicar un poco en qué consiste. Bootstrap es un "framework" que combina HTML, CSS y JavaScript para crear contenidos que se adapten a diferentes pantallas y que además de crearlos sea fácil darles un aspecto atractivo. Una forma muy fácil de entender en qué consiste Bootstrap es ver la documentación un poco. Dentro del apartado del CCS, vemos que se pueden hacer muchas cosas. Por ejemplo, crear sistemas de rejillas. Sistemas que consisten en una serie de columnas, las cuales van a parecer dependiendo de clases que voy añadiendo a cada uno de los elementos. Aquí vemos que al añadir estas clases, se adapta al nº de columnas especificadas. Asi que el "col" sirve para indicar que estoy añadiendo columnas y el "número" indica el nº de columnas que tendrá de ancho un elemento concreto. El máximo es doce. En este caso, vemos como tenemos un elemento con 4 columnas y otro con 8. Además, se puede hacer que los elementos aparezcan seguidos siempre que quepan, según el número de columnas, es decir, según la suma del primero más el segundo, si entran doce. O el primero, el segundo o el tercero. Además, permite también añadir indicadores del tamaño de la pantalla en la que se va aplicar esa clase. Por ejemplo, MD significa tamaños medios de pantalla, pero puedo especificar para pantallas pequeñas o grandes. Así, simplemente utilizando clases, definiré cómo tiene que comportarse un determinado elemento para los diferentes tipos de pantalla. También tiene muchos componentes. Por ejemplo, tiene muchos iconos y elementos interactivos como sistemas de botones o desplegables con aspecto muy cómodo y fácil de usar. Están pensados para que funcionen en páginas web de ordenador y móvil. Bootstrap está integrado en Dreamweaver, y podemos utilizarlo siempre que queramos. Para ello, tenemos dos opciones. Podemos hacer un archivo nuevo y en ese archivo nuevo en HTML seleccionar Bootstrap. Aquí, puedo crear uno nuevo o usar uno existente. No tengo ninguno, así que seleccionaré uno nuevo, puedo añadir otros estilos de CSS, si quiero, adaptarme a los valores de cuadrícula que vienen prediseñados o personalizar el número de columnas que tiene que tener, el espacio que habrá entre columnas y también los tamaños a los que se van a asociar la clases de pequeño mediano y grande. Mantendré el que viene por defecto, que funciona muy bien. Pulsaré en "Crear" y en realidad solo ha creado una página por defecto, en las que tengo muchos contenidos sobre los que empezaré a trabajar. Ha creado básicamente una página basada en una plantilla, pero no es la única que hay. Si me muevo otra vez a "Nuevo" "Plantillas de Boostrap" Por ejemplo, "Agencia". Consistirá en la misma idea, elmentos de Bootstrap, pero que como vemos, en este caso está más simplificada y sobre la que puedo hacer modificaciones. Es interesante ver que si quiero hacer cambios de algunas de las propiedades de las que he hablado, por ejemplo, sobre las clases. Aquí vemos que estará a 4 columnas en tamaño grande, en tamaño pequeño a 12 columnas, es decir, con la pantalla completa pero podría añadir también un tamaño intermedio. Y ni siquiera tengo que saberlos de memoria. Si me voy al "Panel de propiedades", en el apartado de "Clases" en este menú. si desciendo hacia abajo, aparecen todas las clases creadas en los estilos vinculados a este documento. Y entre estas vienen los posibles anchos en columnas y para los distintos tamaños. Entonces puedo decirle que a tamaño medio ocupe 6 columnas. Eso me habrá añadido esta clase a ese elemento y ese elemento para ese tamaño concreto se comportará de esta nueva manera. El objetivo de este curso no es enseñar a manejar Bootstrap, aunque más adelante dedicaremos algún capítulo a añadir algunos de los contenidos que tenemos para Bootstrap. Y es que dentro del desplegable, en "Insertar", tengo un apartado, "Componentes de Bootstrap", dentro del cual podemos ver una selección de los componentes más utilizados de este "framework".

Dreamweaver CC 2017 esencial

Crea sitios web gracias al software de Adobe, Dreamweaver CC 2017. Con este repaso esencial a sus fundamentos podrás crear páginas responsive y mostrar tus contenidos a la última.

6:11 horas (78 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.