Muse CC: Responsive webs

Creación del menú de navegación de nuestro sitio

¡Prueba gratis durante 10 días

nuestros 1144 cursos !

Prueba gratis Mostrar modalidades de suscripción
Creamos el menú de navegación del sitio haciendo uso de un widget que encontramos en el panel de widgets y le aplicamos el formato requerido, incluyendo la aplicación de una fuente web de la librería TypeKit.
03:47

Transcripción

Vamos ahora a crear el menú de navegación. Estamos trabajando en la página maestra y vamos ahora a abrir el panel Biblioteca de widgets, vamos a abrir la categoría Menús, voy a seleccionar la opción Horizontal y simplemente arrastro hacia la página. Ahora voy a abrir el panel de Texto y selecciono el menú de navegación; vamos a formatear las características generales de texto. En este menú desplegable, voy a seleccionar la opción Añadir fuente web. Recuerden que nosotros tenemos 3 tipos de fuentes web que podemos utilizar dentro de Muse: las fuentes de la librería Typekit, las fuentes de la librería Edge Web Fonts y fuentes locales que podamos tener. Voy a hacer clic en el botón Introducción, y teniendo seleccionada la pestaña Typekit, voy a buscar una fuente haciendo clic en esta casilla y escribiendo "open sans". Esta es la fuente que quiero utilizar, así que hago un clic para seleccionarla, hago clic en el botón de OK y me aparece esta ventana que me está diciendo que he añadido una familia de fuentes al menú de fuentes web, hago clic en OK, nuevamente hago clic en este menú desplegable y ahora ya aparece la fuente con los diferentes estilos que hacen parte de esa fuente. Voy a seleccionar el estilo Bold de la fuente Open Sans que acabo de agregar. Aquí tenemos ya la fuente agregada y el tamaño va a ser 16 pixeles. Tenemos entonces la fuente Open Sans Bold a 16 pixeles. Ahora voy a abrir el panel Transformar y voy a configurar el tamaño al ancho de este menú de navegación. El tamaño va a ser 786 pixeles, así que escribo el valor, presiono Enter y aquí tenemos nuestro tamaño. Voy a seleccionar este menú y voy a alinearlo en la parte superior con la guía de margen y en la parte derecha con la guía de margen derecha. Ya tenemos alineado nuestro menú de navegación. Ahora vamos a formatear cada uno de los estados: voy a hacer clic en este elemento del menú, en este momento tenemos seleccionado el estado normal y voy a empezar a aplicarle los colores requeridos. El color de relleno va a ser blanco y el color de texto va a ser azul. Aquí tenemos la muestra de color azul, así que hacemos un clic, ahora hacemos clic en este "hyperlink" normal y me muestra los diferentes estados. Voy a seleccionar el estado Rollover y los colores van a ser opuestos a normal, es decir, el relleno va a ser azul y el color de texto va a ser blanco. Ahora voy a seleccionar el estado 'Ratón pulsado' y verifico los colores: relleno gris y color de texto blanco. Y finalmente voy a seleccionar el estado activo y va a quedar exactamente de los mismos colores que tenemos en el estado Rollover: relleno azul y color de texto blanco. Vamos a previsualizar nuestro menú de navegación, para eso hago clic en el botón Previsualizar, quiero verificar que estén correctamente formateados todos los estados. Aquí tenemos el Rollover, aquí tenemos el Ratón pulsado y el estado normal.

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.