Muse CC para diseño web responsivo

Trabajar con la página inicio en el breakpoint de 768 px

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Hacemos un ajuste en una imagen para que se escale de la forma como necesitamos, y adaptamos el tamaño y posición de los elementos que hacen parte de las dos primeras secciones que tenemos en la página inicio.
07:55

Transcripción

Estamos trabajando en la página Inicio y ya tenemos dos "breakpoint" o puntos de rotura: 1280 pixeles y 768 pixeles. Vamos a seleccionar el "breakpoint" de 1280 pixeles, tomamos este elemento, hacemos un clic y arrastramos para simular el cambio en el tamaño de la ventana del navegador. Resulta que este elemento está reduciendo su tamaño de forma proporcional y eso hace que cuando se acerque al tamaño de 768 pixeles, quede muy pequeño respecto al texto que tenemos sobre esa imagen. Vamos a mirar cómo solucionamos ese inconveniente. Seleccionamos esta imagen, abrimos el panel Transformar, y lo que necesitamos es que nos reduzca de forma proporcional, así que hacemos clic n este menú desplegable y necesitamos la opción Anchura adaptable, para que solamente afecte el ancho, no el alto. Sin embargo, no está disponible, ¿por qué? Porque cuando yo creé el marco para rellenar con una imagen utilicé este tipo de marco, un marco de rectángulo, y por defecto cuando utilizo este tipo de marcos la opción que está disponible es Anchura y altura adaptables, mientras que si yo utilizo la herramienta rectángulo, cuando dibujo un rectángulo, en las opciones de trasformación sí tengo la opción de anchura adaptable. De manera que vamos a solucionar este inconveniente de forma bastante rápida. Vamos a seleccionar este elemento, para mirar el tamaño 1280 por 283. Vamos a darle ese mismo tamaño: 1280 por 283. Aquí tenemos nuestro rectángulo, el cual vamos a rellenar: en las opciones de relleno, Añadir imagen 'banner-1280', Escalar para rellenar y la opción Centrada. Eliminamos este elemento, tomamos este nuevo elemento y lo colocamos en la misma ubicación, clic derecho, y vamos a seleccionar en el submenú organizar Enviar detrás. Ahora venimos a las opciones, Cambiar tamaño, y observen que por defecto está seleccionada la opción Anchura adaptable. ¿Qué ha pasado en el otro "breakpoint"? Vamos a seleccionarlo y resulta que, por defecto, en el otro "breakpoint" también se hace el mismo remplazo. Recuerden que todos los elementos que tenemos en este "breakpoint" o punto de rotura se reflejan en los demás "breakpoints" o puntos de rotura. Estos elementos quedaron superpuestos, vamos a seleccionar uno de ellos y tomamos esta guía de control de movimiento vertical y arrastramos hacia la parte inferior. Vamos a 1280, verificamos que todo haya quedado bien, volvemos a 768 y empezamos a hacer los ajustes necesarios. Por ejemplo, voy a seleccionar esta caja, la voy a arrastrar hacia la parte derecha, estas son las columnas 1, 2, 3, 4, 5, 6, 7 columnas, necesitamos que esta caja quede del ancho de 7 columnas. Y este botón vamos a dejarlo de 5 columnas. Aquí tenemos nuestro tamaño: 7 y 5 columnas. Vamos a mirar cómo se comportan estos elementos cuando cambiamos el tamaño de la ventana del navegador, más o menos hasta 500 pixeles. Vamos a hacer la evaluación y observen que se están comportando bastante bien. Si es necesario, de todas maneras, después hacemos los ajustes. Hacemos un clic nuevamente en 768 y tenemos que seguir ajustando estos elementos. Vamos a tomar ahora estos logos: teniendo activa la opción de proporción, les vamos a dar un tamaño de 90 pixeles. Tomamos este elemento, lo desplazamos hacia la parte superior, tomamos este elemento y con la guía arrastramos todos los demás elementos hacia la parte inferior. Este elemento lo pegamos, para que quede tocando con el borde de la imagen superior. Ahora vamos a abrir un panel que se llama el panel Alinear. En este menú desplegable, seleccionamos Alinear con el área de contenido y alineamos al centro. Esto nos garantiza que este elemento está centrado. Y en el panel Transformar, en el valor Y sumamos 45 pixeles, para que me de ese margen o esa separación de 45 pixeles. Tomamos el texto, lo ubicamos aproximadamente en este lugar, vamos a desplazar nuevamente estos elementos hacia abajo, tomamos este botón y lo dejamos también en esta posición aproximadamente. Seleccionamos esta caja y el tamaño no proporcional va a ser de 526 pixeles. Podemos ajustar el alto, y alineamos hacia el centro. Al botón le vamos a dar un tamaño de 324 pixeles de ancho, alineamos al centro, y ahora arrastramos hacia la parte superior. Y repetimos el mismo proceso para los demás elementos. Vamos a desplazarlo 45 pixeles hacia abajo, vamos a alinearlo hacia el centro. Este mismo tamaño de 526 lo voy a dar a esta caja de texto. Vamos a hacerlo de una vez con esta caja de texto 526. El tamaño del botón, recuerden, 324. Necesitamos más espacio, entonces tomamos esta guía, arrastramos hacia la parte inferior. Tomamos el texto y tomamos el botón. 324, entonces este también tiene que tener 324 pixeles. Seleccionamos los tres elementos y vamos a alinear al centro esos tres elementos. Todo esto lo queremos desplazar hacia la parte inferior, aproximadamente en esta posición, y ya tenemos entonces estos elementos desplazados u organizados de forma vertical. ¿Por qué de forma vertical? Porque tenemos menos espacio en este "breakpoint", entonces para mayor comodidad, lo hacemos de esa manera, reorganizamos los elementos.

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.