Muse CC para diseño web responsivo

Trabajar con la página galería en el breakpoint de 768 px

¡Prueba gratis durante 10 días

nuestros 1268 cursos !

Prueba gratis Mostrar modalidades de suscripción
En este punto de rotura organizaremos las imágenes de forma vertical y reajustaremos el tamaño de cada uno de los widget, teniendo en cuenta que necesitaremos ajustar sus componentes de forma individual.
04:57

Transcripción

Vamos ahora a agregar el "breakpoint" o punto de rotura de 768 pixeles en la página Galería. Hacemos un clic en este triángulo blanco que corresponde al "breakpoint" o punto de rotura que ya existe en la página maestra, luego hacemos clic en este círculo azul y aquí tenemos nuestro nuevo "breakpoint" o punto de rotura. Vamos a hacer entonces los ajustes: tomamos este texto y ajustamos también el ancho tomando como guía los márgenes que nosotros tenemos definidos en la página. Ahora vamos al punto de 1280 y vamos a hacer una revisión visual de lo que va a pasar con las imágenes cuando cambie el tamaño de la ventana del navegador. Se está comportando relativamente bien, vamos a volver a 768 y en este caso yo quiero que las imágenes se organicen de forma vertical y que además tengan el mismo tamaño original, es decir, las imágenes tienen 374 pixeles en el punto de rotura de 1280. Ese mismo tamaño de 374 pixeles lo quiero dentro de este punto de rotura o "breakpoint". Vamos a desplazar estas imágenes hacia abajo, selecciono este elemento y recuerden que este elemento es un "widget", así que vamos a darle el tamaño de 374 pixeles. Observen que el tamaño del "widget" amplía, pero tenemos que ampliar de forma manual los elementos que están dentro de ese "widget", es decir, la caja de texto y también la imagen. Vamos a hacer un último ajuste y es que el alto del botón tiene que ser de 310. Y listo, ya tenemos entonces el tamaño original nuevamente de esta imagen dentro de este "breakpoint": 374 por 310. Vamos a realizar el mismo proceso en las otras imágenes. Ya tenemos ajustadas todas las imágenes, voy a presionar Comando + 0 o Control + 0, las selecciono todas y vamos a alinearlas. Aquí tenemos ya el proceso de alineación, todas las imágenes alineadas al centro. Vamos a igualar los espacios. Listo, ya tenemos el ajuste del contenido de la página Galería dentro del "breakpoint" o punto de rotura de 768 pixeles.

Muse CC para diseño web responsivo

Crea una web responsive sin escribir una sola línea de código gracias a Adobe Muse CC, la aplicación de la familia Adobe que te permite diseñar tu página de forma gráfica.

3:10 horas (41 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:15/09/2016

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.