Muse CC para diseño web responsivo

Ajuste de elementos de la página contacto

¡Prueba gratis durante 10 días

nuestros 1203 cursos !

Prueba gratis Mostrar modalidades de suscripción
Hacemos los ajustes necesarios en la página contacto reduciendo el ancho de los campos del formulario para evitar problemas con pantallas muy pequeñas, ya que el punto de rotura es de 480 px. Finalmente realizamos ajustes adicionales al sitio web.
06:24

Transcripción

Vamos ahora a trabajar con la página Contacto. Hacemos clic en este triángulo, agregamos el punto de rotura o "breakpoint" y básicamente ya tenemos ajustada nuestra página en este punto de rotura. Sin embargo, vamos a hacer algunos ajustes, especialmente a este texto y a este texto. Vamos a seleccionar este formulario de contacto. Y este formulario tiene un ancho de 340 pixeles, vamos a reducir ese ancho a 300 pixeles, ya que hay algunos dispositivos donde, si dejamos ese tamaño de 340 pixeles, el formulario se sale del campo de la pantalla. Así que seleccionamos este campo, desmarcamos la opción de proporción y vamos a dejar 300 pixeles de ancho. Esto cambia automáticamente este campo, porque es del mismo tipo, pero tenemos que hacer el ajuste en este campo de forma independiente: 300 pixeles de ancho y finalmente esta caja también la tenemos que cambiar. Al seleccionar todo el formulario, observen que ya el ancho va a ser de 300 pixeles. Vamos a alinear al centro y recuerden, como este no es un elemento flexible, entonces en el panel Transformar, en el área Fijar a página, es buena idea verificar que esté marcada la opción Hacia el centro. Esto es todo lo que nosotros tenemos que hacer y de esta manera hemos terminado el proceso de adaptación del contenido de la página Contacto en el "breakpoint" de 480 pixeles. Y también de esa manera hemos terminado todos los ajustes necesarios en los diferentes "breakpoint" para cada una las páginas. Vamos a hacer una previsualización de todo el sitio. Lo primero que me doy cuenta es que el menú de navegación no aparece en este punto de rotura, en este tampoco y en este sí. Vamos a ver qué pasó en Muse. Abrimos la página maestra, no aparece el menú de navegación. Vamos al panel de Capas, ocultamos la capa 'Menú' y aquí tenemos nuestro menú de navegación. Lo que ha ocurrido es que este menú de navegación quedó en la 'Capa 1'. Vamos entonces a activar la visibilidad de la capa 'Menú' y tomamos este cuadro azul y lo pasamos a la siguiente capa, a la capa 'Menú'. Ya se encuentra en la capa 'Menú' y ya hemos solucionado el inconveniente. Vamos entonces a previsualizar nuevamente el sitio en el navegador. Aquí tenemos las diferentes páginas de este "breakpoint" o este punto de rotura. Aquí tenemos el siguiente punto de rotura, el efecto de rollover está funcionando correctamente, el formulario de contacto está bien. Vamos al último punto de rotura, el menú desplegable está bien, vamos de hecho a navegar a Planes, a Equipo, a Contacto y nos damos cuenta de otro error: no están funcionando estos vínculos del menú de navegación para dispositivos móviles o el del "breakpoint" o punto de rotura de 480 pixeles. Vamos entonces a Muse a verificar qué es lo que ha pasado. Vamos a la página maestra, estamos en el punto de rotura de 480, desplegamos este "widget" de acordeón y el primer error que yo noto ahora es que tenemos unos elementos del menú que de hecho ni siquiera corresponden a las páginas Planes, Equipo y Contacto. Planes y Equipo no existe dentro del área planeación y Home tampoco, sino Inicio. Tenemos entonces Inicio, Planes, Galería. ¿Por qué está de esta manera? Básicamente porque este menú de navegación es un menú de navegación que se ha hecho de forma manual, por lo tanto los "labels" hay que configurarlos de forma manual y los vínculos también hay que configurarlos de forma manual. Entonces este "label" es Inicio, las otras dos páginas son Planes y Galería. Planes está bien, Galería y finalmente Contacto. Ahora vamos con los vínculos: seleccionamos el primer elemento del menú que es Inicio y me lleva a Inicio, Planes me lleva a Planes. Galería me lleva a Galería y Contacto me lleva a la página deContacto. Vamos a colapsar, guardamos cambios y vamos a previsualizar nuevamente el sitio en el navegador. Aquí tenemos nuevamente la previsualización del sito en el punto de rotura o "breakpoint" de 480 pixeles. Vamos a verificar el menú, que me lleve a Planes, que me lleve a la Galería de imágenes, que estén funcionando los rollovers y que me lleve a la página de Contacto. Así que está funcionando correctamente nuestro sitio web, un sitio web que diseñamos desde cero y al cual posteriormente le generamos los diferentes "breakpoints", para que fuera un sitio web Responsive.

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.