El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Muse CC para diseño web responsivo

Creación de elementos de la página maestra

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
En la página maestra ubicamos los elementos que son comunes en varias o todas las páginas de contenido, y de esa manera automatizamos dicho proceso. Creamos los primeros elementos y hacemos ajustes de guías.
04:58

Transcripción

Vamos a empezar a trabajar en la página maestra. Para eso, voy a hacer un doble clic sobre el icono de la página y entro en el modo de diseño de la página maestra. Aquí podemos ver varias guías: tenemos las guías de columna –recuerden que nosotros configuramos 12 columnas y el espacio entre cada una de esas columnas es de 40 píxeles–, tenemos también la guía de margen. Nosotros configuramos esa guía de margen a 40 píxeles por todos los lados. Entonces tenemos este margen de 40 píxeles arriba, 40 píxeles hacia la izquierda, 40 píxeles a la derecha y 40 píxeles en la parte inferior. Tenemos la guía de encabezado y tenemos la guía del pie de la página. Vamos a modificar la posición de la guía del encabezado. Para eso voy a hacer un zoom en esta área, presiono barra espaciadora y Comando, o barra espaciadora y Control si estoy trabajando en Windows, y hago un marco de zoom. Tomo esta guía, hago un clic sostenido y voy a arrastrarla hasta la posición de 100 píxeles, presiono Comando + 0 o Control + 0 para ajustar el tamaño de la página a la ventana, y ahora voy a dibujar un rectángulo con la herramienta de dibujo de rectángulos: selecciono la herramienta hago un clic y arrastro. No importa el tamaño que voy a configurar en este momento cuando estoy dibujando, porque ese tamaño lo vamos a ajustar de forma precisa con el panel Transformar. Tomo entonces la herramienta de selección, abro el panel Transformar y el tamaño al alto va a ser de 100 pixeles. En muchos casos, es muy flexible el hacer la transformación de forma libre. Sin embargo, cuando sabemos un tamaño de forma precisa, también en muchos casos es mejor realizar la transformación con el panel Transformar. Digito entonces 100 píxeles en el área de altura y ya este rectángulo tiene el tamaño requerido. Vamos a seleccionarlo y vamos a ubicarlo en el área de encabezado. El ancho de este rectángulo, yo necesito que cubra todo el ancho de la ventana del navegador. Así que la forma fácil de hacer esto es dentro del panel Transformar, en el área Cambiar tamaño, voy a seleccionar este menú desplegable y seleccionar la última opción: Ajustar a anchura de navegador. Esto entonces hace justo lo que yo necesito: que el tamaño del rectángulo coincida con el tamaño del ancho de la ventana del navegador. Ahora voy a duplicar este rectángulo: lo selecciono, arrastro hacia la parte inferior y presiono Option y Shift, o presiono Alt y Shift si estoy trabajando en Windows, suelto y aquí tengo el duplicado. El duplicado va a tener 90 pixeles de alto, ya lo ajustamos. Para configurar ese tamaño de alto, debo tener deshabilitada la función de Restringir anchura y altura, es decir, restringir proporción, porque al estar deshabilitada, entonces yo puedo cambiar el tamaño del alto de este elemento sin afectar el ancho. Ubico este elemento en el pie de la página y miren lo que ocurre: por defecto, el alto de las páginas en Muse es dinámico, esto quiere decir que si Muse ve que yo necesito más espacio para ubicar un elemento, automáticamente amplía el tamaño mínimo que le ha dado a la página. Para evitar este comportamiento, entonces yo voy a marcar la opción Pie de página para este elemento. Ahora lo muevo y lo ubico alineándolo en la parte inferior. Eso es todo lo que necesitamos hacer. Y vamos a hacer un zoom nuevamente sobre esta área. Recuerden, el atajo de teclado es: barra espaciadora y Comando o barra espaciadora y Control. Ahora necesito que la guía del pie de la página quede 45 pixeles más hacia arriba del borde superior de este rectángulo. Esto básicamente es para que todos los elementos que yo ubique sobre la página respeten esa distancia de 45 pixeles respecto a los elementos que nosotros tenemos en el pie de la página. Voy a hacer algo muy sencillo y es dibujar un rectángulo. El alto de este rectángulo va a ser 45 pixeles y esto de forma muy simple va a ayudar a que yo pueda alinear esa guía al tamaño o posición que yo necesito. Listo, ya tenemos la guía en la posición indicada, simplemente voy a eliminar este elemento, Comando + 0 o Control + 0, y ya tenemos la guía de pie de la página, la guía de encabezado, el rectángulo que vamos a necesitar de fondo en el encabezado y el rectángulo que vamos a necesitar de fondo en el pie de la página.

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.