Obtenga más información sobre cómo añadir y configurar menús para su sitio de Adobe Muse. Obtenga más información sobre cómo crear menús móviles y estados de rollover, y editar etiquetas de menú.

Nota:

Adobe Muse ya no añadirá nuevas funciones y dejará de ofrecer asistencia técnica el 26 de marzo de 2020. Para obtener información detallada y asistencia, consulte Página de fin de servicio de Adobe Muse.

La navegación es uno de los aspectos más importantes a tener en cuenta a la hora de diseñar un sitio web. Cuando se diseña un sitio web, elegir el tipo y la colocación de la navegación del sitio es crucial. La experiencia del usuario de un sitio web puede mejorarse o romperse debido a la navegación de los menús o el sitio.

Adobe Muse le permite crear rápidamente un sistema de navegación del sitio mediante widgets de menú. Aunque puede crear vínculos para conectar las páginas manualmente, los widgets de menú le proporcionan una forma fácil y flexible de añadir
navegación a su sitio. Al igual que otros widgets, solo tiene que arrastrar el widget de menú a su página para añadir menús. De esta forma, verá que las etiquetas de menú, que son las mismas que las del nombre de la página, se rellenan automáticamente. Cuando cambia el nombre de la página en la vista Plan, las etiquetas de menú se actualizan automáticamente. 

Puede añadir menús verticales y horizontales. Además, Adobe Muse le permite crear menús de páginas intermedias y estados de rollover para los elementos de menú. Siga leyendo para descubrir cómo hacer todo esto con Adobe Muse.

 

Adición de un widget de menú

  1. Con la página maestra abierta para su edición en la vista Diseño, abra la Biblioteca de widgets. Si aún no está abierta, elija Ventana > Biblioteca de widgets.

  2. En el panel Biblioteca de widgets, haga clic en Menús para expandir la lista de widgets de menú. En función del diseño de su sitio y el lugar en el que desea colocar el menú, seleccione una de las siguientes opciones:

    • Horizontal para añadir un menú horizontal.
    • Vertical para añadir un menú vertical.
    Seleccione el widget de menú horizontal o vertical en Adobe Muse.
    Seleccione el widget de menú horizontal o vertical.
  3. Utilice la herramienta Selección para arrastrar el widget y colocarlo en la posición deseada en el diseño. Por ejemplo, puede colocar un widget de menú horizontal en la sección de encabezado.

    Coloque el widget de menú encima de la imagen de fondo de cinta marrón en el encabezado.
    Coloque el widget de menú encima de la imagen de fondo de cinta marrón en el encabezado.

    Tenga en cuenta que el menú muestra automáticamente los nombres de las páginas que ha creado, en el mismo orden en el que aparecen en el mapa del sitio. Las etiquetas de menú están vinculadas automáticamente a las páginas, y son dinámicas. Es decir, si posteriormente decide cambiar o mover las páginas, el menú se actualiza automáticamente. Los enlaces seguirán funcionando de la forma prevista.

  4. Haga clic en el selector de color del Panel de control y ajuste el color para el menú. A continuación, utilice el campo Tamaño de texto para ajustar el tamaño del texto para el texto del menú.

    Elija el tamaño y el color del texto
    Defina el color de la fuente y el tamaño en puntos para controlar los botones de texto en el widget de menú Horizontal.

Configuración y personalización de los widgets de menú

Ahora que ha añadido el widget de menú a su diseño, puede personalizar este widget de forma que se adapte a sus necesidades. Puede configurar los menús mediante el panel Opciones.  El panel Opciones es un panel contextual que le permite aplicar cambios para actualizar los ajustes que son específicos de dicho widget. Utilice este panel para controlar cómo se comportan los widgets y cómo se muestra el contenido del widget.

  1. Haga clic en el widget de menú y, a continuación, en la flecha azul situada en la esquina superior derecha del widget. El sistema muestra el panel Opciones.

    Configure el widget de menú desde el panel Opciones.
    Configure el widget de menú desde el panel Opciones.
  2. Configure el widget de menú mediante el panel Opciones. Puede configurar las siguientes opciones:

    • Tipo de menú: especifica qué tipo de páginas se incluirán en la navegación del sitio. Seleccione Páginas principales para incluir solo las páginas del primer nivel o páginas principales. Seleccione Todas las páginas para incluir también las páginas secundarias en la navegación. Las páginas secundarias aparecen como submenús. Seleccione Manual para seleccionar manualmente las páginas deseadas que se mostrarán en el widget de menú.
    • Dirección: especifique si desea añadir el menú horizontal o verticalmente.
    • Editar conjuntamente: seleccione esta casilla de verificación si desea actualizar todos los elementos de menú juntos. De manera predeterminada, esta casilla de verificación está seleccionada. Si no selecciona esta casilla de verificación, las configuraciones que elija solo se aplican al elemento de menú seleccionado.
    • Tamaño de elemento: especifique si los elementos de menú deben estar uniformemente distribuidos por ancho o tamaño.
    • Mostrar icono a la izquierda: de forma predeterminada, esta casilla de verificación no está seleccionada. Seleccione esta opción si desea añadir un icono en la esquina izquierda de cada elemento de menú.
    • Mostrar etiqueta: de forma predeterminada, esta casilla de verificación está seleccionada. Cuando se desactiva esta casilla de verificación, las etiquetas de menú no se muestran.
    • Mostrar icono a la derecha: seleccione Desactivado si desea desactivar los iconos situados a la derecha. Seleccione Activado si desea configurar los iconos situados en la esquina derecha de los elementos de menú. El icono situado a la derecha es una opción útil cuando desee añadir flechas para indicar que existen submenús para un elemento de menú. También puede elegir la opción Solo submenús para configurar un icono a la derecha solo para aquellos elementos de menú que tienen submenús.
    • Posición de las partes: especifica el punto de inicio para las partes internas de cada ficha.
    Configure los widgets de menú mediante el panel Opciones.
    Configure los widgets de menú mediante el panel Opciones.

Editar etiquetas de menú y estilos

El siguiente procedimiento especifica cómo actualizar las etiquetas de texto que muestran los nombres de página en cada elemento de menú. Por ejemplo, un widget de menú horizontal que utiliza un diseño muy básico con vínculos de texto sencillos. Para este ejemplo, supongamos que se utiliza el mismo formato de fuente para todos los estados.

  1. Haga doble clic y seleccione la etiqueta de menú que desea editar.

  2. Para editar el texto dentro del elemento de menú, abra el panel Texto (Ventana > Texto). Con la etiqueta seleccionada, utilice el panel Texto para dar formato al texto seleccionando estas opciones obligatorias:

    • Fuente: seleccione la fuente que desea aplicar a la etiqueta de menú.
    • Estilo de fuente: seleccione cursiva o negrita, si es necesario, para la etiqueta de menú.
    • Tamaño: seleccione el tamaño de fuente para la etiqueta de menú.
    • Color: en el campo desplegable Color, introduzca el código hexadecimal del color que desea aplicar. O bien seleccione el color que desee con el gotero.
    Edite las etiquetas de los widgets de menú.
    Edite las etiquetas de los widgets de menú.
  3. Utilice el panel Texto para configurar los valores de los márgenes para su etiqueta de menú. Si ya tiene un estilo de hipervínculo que desea aplicar a la etiqueta de menú, seleccione el estilo en el campo desplegable situado junto a abc.

    Para aplicar un estilo de párrafo, seleccione el estilo en el campo desplegable Estilo de párrafo del panel Texto.

  4. Para aplicar Relleno y Trazo a las etiquetas de menú, haga doble clic y seleccione la etiqueta de menú. En la barra de herramientas situada en la parte superior de la página, seleccione el color de relleno y color del trazo. 

    También puede editar el grosor del trazo y habilitar el radio de vértice para las etiquetas de menú desde la barra de herramientas.

    Aplique ajustes de relleno y trazo a etiquetas de menú.
    Aplique ajustes de relleno y trazo a etiquetas de menú.

Creación de estados de rollover para elementos de menú

  1. Con la herramienta Selección, elija la etiqueta de menú para la que desee crear el estado de rollover. Abra el panel Estados. Observe que los estados predeterminados del botón ya están definidos. Haga clic en la miniatura Rollover del panel Estados para editar ese estado.

  2. Con la etiqueta de menú aún seleccionada, utilice el selector de color de Relleno y elija la opción sin relleno (transparente) haciendo clic en la muestra de color blanco con la línea diagonal roja.

  3. Haga clic en la herramienta Texto y utilice el selector de color en el panel de control para elegir un color blanco hueso para el estado Rollover.

  4. En el panel Estados, seleccione el estado Ratón pulsado. Con la herramienta Texto todavía seleccionada, establezca el texto de Ratón pulsado en un color más oscuro, seleccionando una muestra de color en el selector de color del panel de control.

  5. En el panel Estados, seleccione el estado Activo. Haga clic en el vínculo Relleno del panel de control para abrir el menú Relleno.

  6. En el menú Relleno, haga clic en el selector de color y defina el color de relleno en Ninguno. Haga clic en el icono de la carpeta que está junto a la sección Imagen. En el cuadro de diálogo Importar que aparece a continuación, busque y seleccione el archivo de imagen de fondo denominado top-nav-over.png. Haga clic en Seleccionar para elegirlo. El cuadro de diálogo Importar se cierra automáticamente.

  7. Estando todavía en el menú Relleno, compruebe que la opción Encaje se defina en Tamaño original. A continuación, en la sección Posición, haga clic en el centro de los nueve puntos. Esto provoca que la imagen de fondo se rellene desde la posición central sin color de relleno, a tamaño original. Haga clic en cualquier otra parte para cerrar el menú Relleno.

    Definición de estados de botón
    Defina el estado activo del elemento del menú.

    Como la opción predeterminada Editar conjuntamente está activada en el widget de menú horizontal, todos los cambios realizados en la etiqueta de menú se aplican automáticamente a todos los botones de la barra de navegación.

  8. Seleccione Archivo > Guardar para guardar el trabajo. Haga clic en la X que aparece en la pestaña maestra A para cerrar la página en la vista Diseño y volver a la vista Plan. Tenga en cuenta que todas las miniaturas de la página se actualizan para incluir el contenido añadido a la página maestra.

    Nota:

    las guías de las regiones de encabezado y pie de página solo pueden editarse en páginas maestras de su sitio. Siempre que desee modificar el tamaño del encabezado o pie de página de sus páginas, haga doble clic en la página maestra para abrirla en la vista Diseño y volver a colocar las guías allí.

Creación de un menú móvil

Adobe Muse también permite crear un menú intermedio o un menú móvil. Cuando se crea este tipo de menú, aparece un submenú desplegable cuando coloca el cursor sobre el menú principal. Para crear este tipo de menú, consulte Creación de submenús con los widgets de composición.

Exclusión de páginas del menú

Cada vez que cree una nueva página de nivel superior para su sitio en la vista Plan, Adobe Muse añade automáticamente la página al menú. Sin embargo, habrá ocasiones en las que quizás desee probar una página antes de hacerla accesible a los visitantes, o bien ocultar una página específica. En estos casos, Adobe Muse le permite excluir páginas específicas de la navegación para garantizar que estas páginas no se muestran como elementos de menú en el widget de menú.

Realice el siguiente procedimiento para excluir páginas del widget de menú:

  1. Supongamos que ya ha creado el mapa del sitio para su sitio: vaya a la vista Plan en Adobe Muse. Para este procedimiento, supongamos que tiene un mapa del sitio con páginas que incluyen Inicio, Portafolio, Mi historia, Contacto y Productos.

    Vea el mapa del sitio en la vista Plan.
    Vea el mapa del sitio en la vista Plan.

    Si va a la página maestra y arrastra un widget de menú, verá que todas las páginas están incluidas como parte del menú.

  2. Para excluir una página específica, en la vista Plan, haga clic con el botón derecho en la página que desea excluir. Haga clic en Opciones de menú > Excluir página de menús.

    Por ejemplo, si desea excluir la página Productos, haga clic con el botón derecho en Productos. A continuación, seleccione Opciones de menú> Excluir página de menús.

    Excluya páginas específicas de los widgets de menú.
    Excluya páginas específicas de los widgets de menú.

    Ahora, cuando regrese a la sección de la página maestra para ver su menú, puede ver que Productos se ha eliminado del widget de menú.

    Nota:

    Para eliminar todo el menú, vaya a la página a la que ha añadido el widget de menú. Seleccione el widget y pulse Eliminar.

    En situaciones en las que desea que aparezca un elemento de menú sin un vínculo, haga clic con el botón derecho en la página específica en la vista Plan. Seleccione Opciones de menú > Incluir página sin hipervínculo.

    Esta opción es adecuada en varios casos de uso durante la creación de un sitio web. Por ejemplo, si tiene una página Productos de rollover en la que desea que los visitantes del sitio solo hagan clic en las categorías de productos y no en la etiqueta de Productos principal, puede utilizar esta opción.

Trabajo con los widgets de menú

Trabajo con los widgets de menú
Con este vídeo, presentado por Brian Wood, aprenderá a insertar un widget de menú en una página.
Adobe Press - Peachpit

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea