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

Media queries para diseños adaptables con Dreamweaver 2017

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Dreamweaver CC 2017 tiene grandes herramientas visuales para poder modificar y testar el resultado dependiendo del tamaño de la pantalla, y todo ello desde la misma aplicación. Veremos qué fácil es crear media queries y testearlas.

Transcripción

Dreamweaver también está optimizado para el trabajo con media queries. Vamos a ver cómo trabajar con diferentes tamaños de pantalla. Osea, cómo crear contenidos y luego gestionar los CSS para que estos contenidos se adapten a diferentes tamaños de pantalla. De entrada desde el panel de Diseñador de CSS puedo seleccionar un archivo cualquiera y debajo de él tengo la opción de añadir nuevos medios. De hecho ya hay uno por defecto que es el global, que engloba todos los selectores CSS que no están metidos dentro de ninguna media query, que se van a ejecutar hasta que se active una en concreto. Pulsando sobre el botón 'Más', añadirá sobre la fuente que tengo seleccionada, una nueva media query. Aquí vemos la pantalla que me sirve para crearlas. Aquí debajo se ve el código que se va a generar con lo que yo voy añadiendo. De entrada, le voy a decir para qué medida. Le voy a especificar que es para pantalla. Porque tanto los móviles como las tablets como los ordenadores son los que tienen pantalla. Pulsando en "+" puedo seguir añadiendo diferentes características. Por ejemplo, la orientación. En mi caso, yo lo que quiero es definir cómo tiene que cambiar la pantalla cuando el ancho sea menor que un tamaño determinado, que un tamaño fijo. Con eso voy a conseguir hacer que para todos los dispositivos más pequeños que ese tamaño, la página cambie y me recoloque los elementos para que se puedan ver mejor. Voy a poner algo completamente genérico. Voy a pedir que para todas las pantallas, osea si yo estoy en una pantalla cuyo tamaño máximo sea 500, o dicho de otra manera, todas las pantallas que sean más pequeñas que 500 pixeles, van a ejecutar el código que yo meta dentro de esta media query. Y de hecho puedo hacer también que por ejemplo una segunda media query en la que tenga un tamaño mínimo de 501, osea justo después de este 500. Incluso por ejemplo podría especificar también un tamaño máximo de por ejemplo 720 y con eso conseguiré también tener una media query que se active para los dispositivos pequeños, una media query que se active para los dispositivos un poco más grandes, y luego el resto del código para cuando estamos hablando de pantallas de ordenador, de pantallas un poco más grandes. Cuando yo añado una media query, se le asigna un color. Ese color aparece en la parte superior de la vista en vivo. Me sirve para poner la pantalla en ese tamaño en concreto. Hago click sobre él y me pone la pantalla, aquí lo podemos ver, cómo se ha transformado, cómo lo puedo ver en tamaño tablet, o cómo haciendo doble clic sobre el borde exterior pues ya me pone la pantalla al tamaño que tengo disponible. Así va a ser muy fácil ahora hacer modificaciones y ver cómo quedan. Por ejemplo, este logotipo no me gusta que aparezca aquí. Bueno, pues, selecciono para ese color verde, añado el selector para este objeto en concreto. En realidad no tanto para el texto "Header", como para el "Header right", al elemento este que tengo colocado aquí hacia la derecha. Entonces aquí ahora le puedo hacer modificaciones. Le voy a pedir que la propiedad, de hecho voy a ponerlo mejor como "Mostrar conjunto". Que la propiedad "Bottom", por ejemplo, sea automática. Entonces ya me coloca ese elemento en la parte superior y no está estorbando sobre el resto. Por ejemplo, pues también puedo hacer que cada uno de estos elementos, que tienen todo este espacio, cada uno de los "a", que como se puede observar tienen muchísimo padding a los dos lados, pues que tengan menos. Bueno, pues más de lo mismo. Vengo aquí y pido que el padding sea en total, por ejemplo, 4 pÍxeles. Como se puede ver, bueno, se trata poco a poco de ir haciendo modificaciones sobre estos estilos. Me pasaría a la siguiente media query, seleccionaría la siguiente media query, y empezaría a hacer modificaciones también sobre ésta. Esto que estoy haciendo de manera así tan automática y que como se ve es muy cómodo, se puede todavía mejorar más si es que yo puedo hacer que se vea la página en tamaños un poco más concretos. Osea, pinchando y arrastrando sobre el borde, tengo la opción de ir cambiando el tamaño. Y me está mostrando además aquí, en esta parte, el tamaño concreto. Y si yo en un momento dado detecto que hay un problema, por ejemplo supongamos que al llegar a este punto en concreto, veo que cambia el aspecto de esta zona, debería hacer algún cambio sobre los estilos en ese punto. Ni más ni menos. Bueno, pues también puedo hacer clic en ese punto y me va a generar la media query necesaria para trabajar a partir de este momento. Lo puedo crear en un nuevo archivo o lo puedo crear en el mismo estilo CSS, Entonces aquí, en este punto, en esta nueva media query que acabo de crear, hago la modificación que yo quiera. Pues en ese caso sería hacer que esta fotografía fuera tamaño completo, por ejemplo. Como vemos, son formas muy rápidas de trabajar y me permiten además ver las modificaciones en un instante. Otra posibilidad que tengo también es jugar con tamaños de pantalla exactos. Hay predefinidos ya unos cuantos tamaños de iPads, iPhone, algunos de los teléfonos Android más famosos, o también puedo editar esos tamaños y me va a Preferencias, a 'Tamaños de ventana' y aquí puedo, pulsando en el "+" hacer también nuevos tamaños distintos. Entonces, gracias a eso, si lo que quiero es ver cómo quedaría con un iPhone 5, pues pulso en ello y veo esta página en ese iPhone 5. La combinación de todas estas posibilidades me permite trabajar de una manera muy fácil y muy visual. Pero también incluso me permite trabajar viendo los resultados. Cuando yo pulso en la "Vista previa en tiempo real", este cuadrado que aparece aquí, este código QR, permite que con cualquier dispositivo móvil, con una tablet o con un teléfono móvil, yo puedo escanearlo, me abrirá el navegador, y se verá el resultado de lo que estoy haciendo en ese navegador. Y cualquier cambio que yo haga dentro del archivo, cuando guarde el documento en tiempo real, se ocupará también de actualizar la vista en ese navegador con lo cual no sólamente voy a poder hacer pruebas fácilmente dentro de la vista en vivo con diferentes tamaños, sino que también voy a poder ver cómo queda realmente en los distintos dispositivos que pueda conectar con este código QR.

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.