Muse CC para diseño web responsivo

Puntos de rotura o breakpoints en la página maestra

¡Prueba gratis durante 10 días

nuestros 1203 cursos !

Prueba gratis Mostrar modalidades de suscripción
Creamos un punto de rotura inicial en la página maestra y, posteriormente, también lo creamos en la página de inicio teniendo como base la flecha guía que aparece automáticamente reflejando el punto de rotura de la página maestra.
03:44

Transcripción

Ya tenemos listo el diseño inicial de nuestro sitio web. Ahora queremos que este sitio web sea "responsive". El primer paso que voy a realizar es agregar los diferentes "breakpoints" o puntos de rotura, para definir dónde van a ir los cambios importantes de diseño. Voy entonces a entrar a la página maestra haciendo un doble clic, y entramos al modo de diseño. Tenemos nuestro primer "breakpoint" de 1280 pixeles y ahora voy a generar un segundo "breakpoint" o punto de rotura. Antes de hacer eso, sin embargo, voy a hacer una evaluación. Tomo este elemento, hago clic, lo arrastro y observen como este logo cambia de tamaño de forma proporcional. Recuerden: cuando nosotros tenemos sitios web cuyo ancho es flexible, los elementos –por lo menos la mayoría de ellos– por defecto son flexibles. Yo no quiero que este elemento escale, así que en el panel Transformar, en el área Cambiar de tamaño seleccionamos la primera opción Ninguno. Esto hace que cuando cambiemos el tamaño de la ventana del navegador, este elemento mantenga su tamaño. Vamos entonces ahora cerca del área de 750 aproximadamente, hacemos un clic derecho sobre la regla y seleccionamos la opción Añadir punto de rotura. Seleccionamos esa opción, 768 pixeles –observen que sigue siendo anchura fluida– hago clic en OK y aquí tenemos nuestro segundo "breakpoint". Este es un "breakpoint" o punto de rotura que está orientado para dispositivos tipo tablet, no se trata de un tamaño que corresponda a una norma, estos tamaños pueden variarse de acuerdo a la necesidad del diseño particular. Me explico: por ejemplo, puede ser que dentro de nuestro público objetivo hayamos identificado que las tablets que utilizan tengan una resolución mayor, en ese caso entonces utilizamos un punto de rotura o "breakpoint" con una resolución diferente. Ahora voy a tomar el menú de navegación y voy a alinearlo en la parte derecha respecto al margen de guía. Hago lo mismo con este logo: alineo respecto al margen de guía. Y la caja de texto también la voy a alinear de la misma manera. Ya tenemos entonces los ajustes necesarios de la página maestra en el segundo "breakpoint" o punto rotura de 768 pixeles. Voy a cerrar entonces esta página y voy a abrir la página Inicio. Observen que dentro de las páginas de contenido, estas flechas blancas me están indicando los puntos de rotura que se encuentran en la página maestra. Si yo quiero aplicar un punto de rotura o "breakpoint" dentro de esta página de inicio, exactamente en la misma posición donde se realizó en la página maestra, entonces hago clic sobre esta flecha. Esto hace que la barra que teníamos en la parte derecha se desplace y que aparezca este icono con un más. Si hacemos clic, entonces estamos generando ese punto de rotura dentro de esta página de inicio. Esto quiere decir que se pueden tener puntos de rotura o "breakpoint" diferentes en las páginas maestras y en las páginas de contenido. Lo que vamos a hacer ahora es realizar los ajustes de diseño necesarios.

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:
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.