Creación de encabezados y pies de página en Adobe Muse

Defina las regiones de encabezado y pie de página de su sitio web para añadir menús, logotipos, avisos de copyright y mucho más en Adobe Muse.

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 las preguntas frecuentes sobre el fin de servicio de Adobe Muse.

Adobe Muse le permite crear encabezados y pies de página en una página web de forma sencilla. Le recomendamos utilizar siempre el mismo encabezado y pie de página para que el aspecto del sitio web sea coherente. Para ello defina el encabezado y el pie de página en la página maestra de Adobe Muse. Si actualiza la página maestra los cambios se aplicarán a todas las páginas del sitio web.

Cuando se crea un sitio web con HTML y CSS, las páginas individuales suelen variar en altura, dependiendo del contenido exclusivo que muestre en cada página. Muse incluye funciones que permiten que las páginas de un sitio se puedan mostrar en distintos tamaños, dependiendo del contenido exclusivo de cada página. Puede configurar las regiones, de manera que el encabezado siempre permanezca en la parte superior y el contenido del pie de página siempre se muestre directamente debajo del contenido de la página, independientemente de su altura.

Adición de encabezados y pies de página

Antes de definir las regiones de encabezado y pie de página, asegúrese de que se vean las guías de encabezado y pie de página. Si no se ven, seleccione Ver > Mostrar encabezado y pie de página.

Como alternativa, puede utilizar el menú Ver del panel de control para activar las guías de encabezado y pie de página.

Compruebe que las guías de encabezado y pie de página estén activadas.
Compruebe que las guías de encabezado y pie de página estén activadas.

Si lo prefiere, también puede hacer clic con el botón derecho del ratón en la parte izquierda del espacio de trabajo, fuera de la ventana del navegador. En el menú contextual que aparece, active la opción Mostrar encabezado y pie de página.

Trabajo con guías y reglas

Debe activarse la regla para volver a colocar las guías de encabezado y pie de página. La regla le permite definir las guías en una posición de píxeles exacta. De manera predeterminada, también se muestran las guías regulares (que muestran el número de columnas definidas al crear el sitio nuevo).

Cinco guías horizontales azules abarcan el ancho de la página. Comenzando por la parte superior, estas cinco guías se utilizan para definir la parte superior de la página, el borde inferior del encabezado, el borde superior del pie de página, la parte inferior de la página web y la parte inferior de la ventana del navegador. Al arrastrar las guías para definir estas áreas, un texto de sugerencia describe cada guía y su ubicación actual. Puede ser útil aumentar el factor de ampliación de la página, de forma que se pueda acercar para colocar las guías de manera más precisa.

Las tres guías centrales definen el contenido que se mostrará en las zonas de encabezado y pie de página. La región central restante es el área a la que añadirá el contenido de página exclusivo; esta área central se amplía para ajustarse a la altura de los elementos situados en cada página.

También puede seleccionar los rectángulos y los elementos en la página. Resulta útil utilizar los cuadros delimitadores de elementos seleccionados para facilitar la alineación de las guías al configurar las zonas de encabezado y pie de página.

Nota:

la parte inferior de la ventana del navegador establece la parte inferior del área de visualización cuando un visitante ve el sitio en un navegador. En función del diseño, puede definir un color de fondo o una imagen de fondo para el propio navegador y definir la guía para la parte inferior de la página por encima de la parte inferior de la guía del navegador para permitir que el color o la imagen de fondo se muestren debajo el contenido de la página.

Definición de los elementos de encabezado y pie de página

Para definir elementos de encabezado y pie de página, haga lo siguiente:

  1. Arrastre la guía Parte inferior de la página y la guía Parte inferior del navegador a la misma ubicación de la parte inferior de la página, inmediatamente debajo del rectángulo del pie de página, como se muestra en la imagen de abajo.
Definición de los elementos de encabezado y pie de página en Adobe Muse
Definición de los elementos de encabezado y pie de página en Adobe Muse

  1. Seleccione el rectángulo del pie de página que contiene la imagen de fondo de mosaico. Arrastre la guía Pie de página hasta que quede alineada con la parte superior del rectángulo del pie de página.
  2. Deje la guía Principio de la página en la parte superior (en la ubicación Y: 0 px). Arrastre la guía Encabezado hasta el nivel deseado.

El contenido de encabezado se mostrará en la zona entre la parte superior de la página y la guía Encabezado.

Arrastrar la guía Encabezado para definir el área de encabezado
Arrastre la guía Encabezado para definir el área de encabezado

En cualquier momento durante el proceso de diseño, puede volver a A-Página maestra si necesita reajustar las guías para que encaje el contenido del encabezado y del pie de página.

Haga clic en el vínculo Plan o en la ficha denominada katiesCafe para volver a la vista Plan.

Tenga en cuenta que todas las miniaturas de página del sitio actual muestran los elementos de diseño que se han agregado a la página maestra A vinculada.

Observe el encabezado y el pie de página que se especifican en todas las páginas vinculadas a la página maestra A
El diseño de la A-Página maestra se muestra en todas las miniaturas de página vinculadas a la vista Plan.

Mientras se diseña un sitio, los cambios que se realicen en la página maestra se actualizarán automáticamente en las páginas vinculadas. Las páginas maestras facilitan la actualización y el mantenimiento de un sitio, ya que se puede actualizar una página maestra para cambiar la apariencia del sitio.

Colocación de una imagen para completar el contenido del encabezado

Dado que el logotipo del sitio aparecerá en todas las páginas, es un candidato perfecto para colocarlo en el encabezado de la página maestra.

  1. Seleccione Archivo > Colocar. O bien, si lo prefiere, utilice el método abreviado de teclado Control+D (Windows) o Comando+D (Mac) para colocar una imagen.

  2. En el cuadro de diálogo Importar que aparece, seleccione el archivo de la carpeta Kevins_Koffee_Kart denominado Logo.png. Haga clic en Seleccionar.

  3. Utilice la herramienta Selección para arrastrar el logotipo hacia arriba, cerca de la parte superior de la región del encabezado que se haya definido previamente.

A continuación, deberá colocar otra imagen que servirá como gráfico de fondo del widget Barra de menús que añadiremos en la siguiente sección.

  1. Seleccione Archivo > Colocar o utilice el atajo de teclado correspondiente a su sistema operativo: Control+D (Windows) o Comando+D (Mac).

  2. Vaya a la carpeta Kevins_Koffee_Kart y seleccione el archivo denominado top-nav.png.

  3. Haga clic una vez en la parte superior de la página, en el área que anteriormente haya definido como el encabezado. Asegúrese de colocar la imagen por encima del marcador de encabezado, de forma que aparezca en el mismo lugar, sobre el contenido de la página principal, en cada página.

  4. Utilice la herramienta Selección para arrastrar el gráfico de cinta marrón que acaba de colocar, de forma que los neumáticos rojos de la bicicleta rocen la parte superior de la cinta marrón. Esto crea la ilusión de que la bicicleta se mueve sobre la cinta marrón.

  5. Seleccione de nuevo Archivo > Colocar. Busque y seleccione el archivo llamado thedrip.png. Haga clic una vez cerca de la parte inferior derecha del gráfico marrón de cinta para colocar la imagen a su tamaño original.

  6. Utilice la herramienta Selección para volver a colocar la imagen de la gota, de forma que se alinee con la cinta marrón y parezca café goteando desde el lateral derecho.

    Contenido del encabezado, tal como aparece después de añadir el logotipo y el fondo para navegar por el sitio.
    Contenido del encabezado, tal como aparece después de añadir el logotipo y el fondo para navegar por el sitio.

    Puede comprobar el ejemplo del sitio activo para ver la correcta colocación del logotipo y la navegación por la parte superior.

    En la siguiente sección aprenderá a añadir widgets tras una breve descripción de cómo trabajar con contenedores de widgets.

Uso de la opción Pie de página adhesivo

Con la opción Pie de página adhesivo podrá fijar un elemento de pie de página en una página web. La opción Pie de página adhesivo está diseñada expresamente para visitantes con monitores de ordenador grandes. Al activar la opción Pie de página adhesivo, el pie de página permanece en la posición deseada, incluso si la ventana del navegador es mucho mayor que el diseño de la página web.

La opción Pie de página adhesivo se encuentra en el cuadro de diálogo Nuevo sitio (Archivo > Nuevo sitio), cuando se crea un sitio en Muse. También puede acceder al Pie de página adhesivo en los cuadros de diálogo Propiedades de la página (Página > Propiedades de la página) y Propiedades del sitio (Archivo > Propiedades del sitio).

La opción Pie de página adhesivo está activada de forma predeterminada. Por lo general, es preferible utilizar esta función al diseñar sitios. Sin embargo, si observa que la longitud de las páginas se muestra con una longitud mucho mayor de la deseada (porque un sitio tiene un contenido de página menor y las páginas son bastante cortas), siempre se puede desactivar la casilla en el cuadro de diálogo Propiedades de la página.

Sin embargo, si desea desactivarla para todo el sitio web, puede hacerlo si deselecciona la opción en el cuadro de diálogo Propiedades del sitio.

Logotipo de Adobe

Inicia sesión en tu cuenta