Muse CC: Responsive webs

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

¡Prueba gratis durante 10 días

nuestros 1145 cursos !

Prueba gratis Mostrar modalidades de suscripción
Dado que el formulario de contacto es un widget que no es flexible (su tamaño es fijo), es recomendado fijar la posición de algunos elementos al centro de la página para que mantengan su alineación al respecto de la misma.
03:59

Transcripción

Vamos a trabajar con el segundo "breakpoint" en la página Contacto. Antes voy a verificar cómo se están comportando estos elementos respecto al cambio de la ventana del navegador en el "breakpoint" 1280. Así que voy a tomar este manejador, empiezo a arrastrarlo y observo, por ejemplo en la parte inferior, que estos elementos se escalan de forma proporcional y podríamos tratar de ajustar también estos elementos. Vamos a hacer clic nuevamente en la regla para volver al tamaño original, voy a seleccionar entonces este elemento, es decir, el formulario de contacto, y en el panel Transformar quiero indicar que la posición de este elemento debe quedar fija respecto al centro de la página. Me aparece esta guía punteada indicando que ese es el centro respecto al cual se va a definir la posición de este elemento. Voy a hacer algo similar con esta caja de texto: hago clic en el punto central de Fijar a página. Miremos el comportamiento, bastante similar, sin embargo, me gusta más porque la posición del formulario de contacto está fija. Ahora voy a seleccionar los elementos de la parte inferior y estos elementos tienen marcada la opción Ninguno, es decir, que no van a tener ningún tipo de escala y a ellos también les voy a marcar la posición central de Fijar a página. Esto evita que estos elementos se vayan a desplazar hacia la izquierda y hacia la derecha y de hecho es algo que suele pasar cuando tenemos elementos que no están cambiando de tamaño dentro de un sitio web que tiene el ancho fluido. Ya hemos hecho estos ajustes, ahora vamos a crear entonces el segundo "breakpoint". Aquí tenemos ese segundo "breakpoint" o punto de rotura, hacemos los ajustes necesarios y voy a tomar este elemento, voy a quitar esa opción de fijar a la posición de la página. Lo mismo va a pasar con esta caja de texto, le quito esa opción y ajusto el ancho de esa caja, teniendo en cuenta las guías de margen. Este elemento lo desplazamos hacia la parte superior, ajustamos primero el tamaño de esta caja y dentro del panel de Alinear me aseguro que el formulario de contacto quede totalmente centrado. Vamos a desplazar estos elementos hacia la parte inferior y ajusto el alto de este rectángulo azul. Vamos a centrar este texto y verificamos el comportamiento: observen como este elemento se empieza a desplazar hacia la parte derecha. El problema que tenemos con el formulario de contacto es que este tipo de "widget" no tiene la característica de fluidez, es decir, su tamaño es fijo aun cuando la página sea fluida. Vamos entonces a seleccionar la opción Fijar a página respecto al centro. Comparemos y observen como se mantiene en el centro. Si bien su tamaño sigue siendo fijo, al menos se mantiene en el centro y no se desplaza hacia un lado o hacia otro. Aquí tenemos entonces ajustados los elementos de la página de contacto en el "breakpoint" de 768 píxeles.

Muse CC: Responsive webs

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:
Formadores:
Fecha de publicación:15/09/2016
Duración:3:10 horas (41 Videos)

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.