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.

Trabajo con páginas maestras jerárquicas

Con Muse podrá crear páginas maestras y aplicarlas a otras páginas maestras. Las páginas maestras jerárquicas funcionan de forma similar al modo en el que se aplican páginas maestras a una página en la vista Plan. En las versiones anteriores de Muse se podían crear varias páginas maestras, pero solo se podía aplicar una página maestra con un conjunto de elementos de página a la vez a una página web.

Antes, si quería crear un sitio con dos secciones diferentes que fueran similares, pero que cada una tuviera un aspecto único, podía duplicar una página maestra, cambiarla ligeramente y aplicarla a las páginas específicas. Como resultado, las dos páginas maestras normalmente contenían algunos elementos iguales, por lo que cada vez que se actualizaba el sitio, era necesario editar el contenido de ambas páginas maestras para mantener todos los elementos sincronizados.

Con Muse 4.0 y versiones posteriores, puede crear una A-Página maestra que contenga elementos comunes que se muestren en varias páginas maestras (como, por ejemplo, añadir el fondo y el pie de página tal como se describe en las secciones anteriores), y, a continuación, crear otras páginas maestras que hereden todos los elementos de A-Página maestra, además de contener cualquier otro elemento exclusivo de la primera sección. Si se ha creado una tercera página maestra, dicha página podría utilizar los elementos de A-Página maestra, además de cualquier otro elemento exclusivo de la segunda sección.   

La ventaja de utilizar páginas maestras jerárquicas es que permiten limitar la aparición de un elemento a una instancia. Al rediseñar un sitio, solo tiene que editar cada elemento una vez y todas sus instancias se actualizan en el sitio automáticamente.

Las páginas maestras se aplican y gestionan en la vista Plan. Del mismo modo que puede hacer clic y arrastrar una miniatura de página maestra para aplicar dicha página maestra a una página, puede crear varias páginas maestras y, a continuación, hacer clic y arrastrar una página maestra a otra página maestra. O si lo prefiere, puede hacer clic con el botón derecho del ratón en cualquier miniatura de página o página maestra en la vista Plan y usar la opción Páginas maestras del menú contextual que aparece para definir la página maestra.

Tenga en cuenta que cuando se pase el ratón sobre el nombre de una página o página maestra, una sugerencia mostrará la jerarquía de las páginas maestras aplicadas a dicha página o página maestra.

En este momento, se ha creado la A-Página maestra con el fondo de mosaico de relleno del navegador y el contenido del pie de página. En la siguiente sección, aprenderá a crear una nueva página maestra que herede el contenido de la A-Página maestra para añadirle después el encabezado y aplicárselo a las páginas del sitio. Siga estos pasos:

  1. Al ver el mapa del sitio en la vista Plan, sitúe el cursor sobre la miniatura de A-Página maestra para ver el botón de signo + en ambos lados. Haga clic en el icono de signo + situado a la derecha de A-Página maestra para crear una nueva página maestra. De forma predeterminada, la nueva página maestra se denomina B-Página maestra.
  2. Haga doble clic en el campo de texto B-Página maestra situado debajo de la miniatura para editarlo. Escriba un nombre más descriptivo para la nueva página maestra que acaba de crear: Principal.
  3. Haga clic con el botón derecho del ratón en la miniatura de la página maestra Principal y seleccione Páginas maestras > Página maestra A en el menú contextual que aparece.
En este tutorial podrá familiarizarse con el espacio de trabajo de Adobe Muse y aprenderá a crear un sitio web completo sin necesidad de escribir código. También aprenderá a crear un mapa del sitio, averiguar en qué consisten las páginas maestras y descubrir las opciones de relleno de navegador de Muse.
Seleccione Página maestra A en el menú para aplicarla a la página maestra principal.

Tenga en cuenta que tras aplicar A-Página maestra a la página maestra Principal, se actualizará la miniatura de la página maestra Principal para mostrar el mismo aspecto. La etiqueta azul bajo la miniatura de la página maestra Principal dice [A-Página maestra] porque se aplicó a la página maestra Principal en el paso 3.

Es importante recordar que la página maestra Principal realmente no contiene los elementos de A-Página maestra, no ha duplicado A-Página maestra. En su lugar, se ha configurado la página maestra Principal para establecer un vínculo a A-Página maestra, lo que significa que cualquier contenido nuevo que se añada a A-Página maestra automáticamente aparecerá en la página maestra Principal.

Como se mencionó anteriormente, lo bueno de las páginas maestras jerárquicas es que el pie de página, el menú y el fondo solo existen en A-Página maestra. Después, si un cliente solicita que utilice un fondo de mosaico diferente, puede actualizar A-Página maestra y la página maestra Principal se actualizará automáticamente.

Más adelante en este tutorial, podrá crear dos páginas maestras diferentes con distintos aspectos para las dos secciones del sitio. No obstante, por ahora puede actualizar las páginas en la vista Plan para que todas utilicen la nueva página maestra Principal, en lugar de utilizar A-Página maestra.

  1. Haga clic y arrastre la página maestra Principal a la miniatura de la página de comida de la esquina superior izquierda. Observe que, al arrastrar y soltar la miniatura de la página maestra Principal en la miniatura de la página de comida, el texto azul bajo la miniatura de la página de comida se actualiza de [A-Página maestra] a [Principal].

Esta es la forma más común de aplicar páginas maestras a las páginas en la vista Plan, pero también puede intentar aplicarlas con el menú contextual:

  1. Haga clic con el botón derecho del ratón en la miniatura de la página de eventos y seleccione Páginas maestras > Principal en el menú contextual que aparece.
En este tutorial podrá familiarizarse con el espacio de trabajo de Adobe Muse y aprenderá a crear un sitio web completo sin necesidad de escribir código. También aprenderá a crear un mapa del sitio, averiguar en qué consisten las páginas maestras y descubrir las opciones de relleno de navegador de Muse.
Utilice el menú contextual para establecer la página maestra principal como la página maestra de la página de eventos.

  1. Utilice su método favorito (descrito en los pasos 4 y 5) y defina la página maestra Principal como la página maestra de las tres páginas restantes: inicio, acerca de y visita.

Después de realizar este cambio, todas las etiquetas de texto azul bajo cada miniatura de página deben decir [Principal]. Si pasa el cursor sobre cualquiera de las etiquetas azules, aparecerá una sugerencia con la jerarquía de las páginas maestras aplicadas.

En este tutorial podrá familiarizarse con el espacio de trabajo de Adobe Muse y aprenderá a crear un sitio web completo sin necesidad de escribir código. También aprenderá a crear un mapa del sitio, averiguar en qué consisten las páginas maestras y descubrir las opciones de relleno de navegador de Muse.
Al pasar el cursor sobre la etiqueta, aparece un texto de sugerencia sobre la jerarquía.

En este ejemplo, la jerarquía solo tiene un nivel de profundidad. En otras palabras, la página maestra Principal hereda el contenido de A-Página maestra. Sin embargo, debe tener en cuenta que puede crear una cadena de páginas maestras si así lo desea. Por ejemplo, puede crear una página maestra denominada Encabezado, que solo tenga el contenido de encabezado y, a continuación, crear otra página maestra denominada Pie de página, que herede el contenido de la página maestra Encabezado y, después, crear otra página maestra denominada Principal, que herede todo lo que aparece en la página maestra Pie de página (que también incluye el encabezado). Puede crear los niveles de herencia para definir varios niveles de profundidad en función del diseño de un sitio y de la probabilidad de que algunos elementos cambien. Dividir el diseño de esta manera es, en cierto modo, como crear símbolos, ya que se pueden aislar partes específicas de un diseño y, a continuación, buscar y editar fácilmente dicha parte más adelante, según sea necesario.

El siguiente tutorial es la segunda parte de Uso de Muse para la creación del primer sitio web, donde aprenderá a trabajar con widgets (funciones de sitio interactivas integradas que se pueden arrastrar a páginas). Los widgets permiten agregar rápidamente funcionalidades avanzadas a las páginas sin escribir código. Aprenderá a modificar el comportamiento y la apariencia de los widgets para personalizar el modo en el que se muestran dentro del diseño del sitio.

Adición del contenido del encabezado a la página maestra principal

Ahora que ha finalizado el pie de página al añadir un widget de menú a la página maestra Principal, deberá añadir la navegación de nivel superior. Siga estos pasos para añadir contenido al área de encabezado.

  1. En la vista Plan, haga doble clic en la miniatura de la página maestra Principal para abrir la página y empezar a editarla en la vista Diseño (si aún no está abierta).
  2. Utilice la herramienta Rectángulo para dibujar un rectángulo que comience en la esquina superior izquierda del área visible del navegador y abarque todo el ancho, hasta la esquina superior derecha. Utilice la herramienta Selección para arrastrar los manejadores de la parte superior, izquierda y derecha del rectángulo hasta que vea que el borde rojo aparece brevemente, lo que indica que el rectángulo se ha establecido a una anchura del 100%, del mismo modo que creó el pie de página.
fig_30_building
Dibuje un rectángulo que abarque toda la parte superior de la ventana del navegador.

 

Después de arrastrar los manejadores, el tamaño del rectángulo debe ser de aproximadamente 1160 píxeles de ancho por 253 píxeles de alto. El valor X horizontal es -100, lo que significa que la esquina superior izquierda del rectángulo se encuentra a 100 píxeles de la esquina superior izquierda de la página. El valor de Y es 0 (lo que significa que la esquina superior izquierda del rectángulo coincide con la esquina superior izquierda de la página vertical). Si desea establecer estos valores con exactitud, puede revisar los campos en el panel Transformar o en el panel de control, mientras que el rectángulo esté seleccionado.

  1. Establezca la anchura del trazo en 0 y utilice el menú Relleno para establecer el color de relleno en Ninguno. Haga clic en la carpeta que se encuentra a la derecha de la sección de la imagen y busque la imagen denominada tile-header.png para seleccionarla. Establezca el menú Encaje en Mosaico horizontal.
fig_31_building
Utilice el menú Encaje para definir como mosaico horizontal la imagen de fondo.

 

Aunque el encabezado consta de un único rectángulo, la imagen de fondo definida como mosaico horizontal que lo rellena crea la impresión de que existe un rectángulo gris sobre un rectángulo negro.

  1. Seleccione Archivo > Colocar o utilice el método abreviado de teclado: Comando+D (Mac) o Control+D (Windows) para abrir el cuadro de diálogo Importar.
  2. Seleccione el archivo denominado bg-ribbon.png ubicado en la carpeta de archivos de ejemplo. Haga clic en Abrir para seleccionarlo y cerrar el cuadro de diálogo Importar.
  3. Haga clic una vez en el centro del rectángulo del encabezado, cerca de la parte superior de la página. De este modo, se coloca una sola instancia del archivo bg-ribbon.png con sus dimensiones originales.
  4. Utilice la herramienta Selección para alinear el gráfico de cinta de color naranja y que quede centrado verticalmente cerca de la parte superior del encabezado y abarque el ancho de la página.
fig_32_building
El gráfico de cinta naranja está colocado de manera que queda centrado en el encabezado.

 

El gráfico de cinta naranja formará el fondo del menú de nivel superior que deberá añadir en la sección siguiente.

Duplicación de una página maestra

El contenido del encabezado de la página maestra Principal se ha completado. Aunque puede utilizar simplemente la página maestra Principal para todas las páginas del sitio, este diseño de sitio tiene dos secciones. El diseño de la página maestra Principal será finalmente utilizado para las páginas de inicio y de visitas. Una segunda página maestra, ligeramente distinta, se utilizará para la comida, los eventos y las páginas acerca de.

Siga estos pasos para duplicar la página maestra Principal:

  1. En la vista Plan, haga clic con el botón derecho en la miniatura de la página maestra Principal.
  2. En el menú contextual que aparece, seleccione Duplicar página.
fig_38_building
Utilice el menú para duplicar la página maestra Principal existente.

 

Una nueva página aparece a la derecha de la página maestra Principal, con el nombre predeterminado: Copia principal. Dado que se duplica la página maestra Principal, la nueva página maestra también está basada en la A-Página maestra.

  1. Haga doble clic en el campo de nombre debajo de la página maestra que acaba de crear y cambie su nombre: Foreground.

En la siguiente sección, aprenderá a configurar la disposición de los elementos de una página maestra, por lo que, en lugar de que los elementos siempre se muestren debajo, pueden mostrase sobre los elementos de la página. Llegados a este punto, es un buen momento para guardar el trabajo.

  1. Seleccione Archivo > Guardar sitio.

Una de las ventajas de crear una página maestra duplicada es que puede establecer que alguno de los contenidos se muestre sobre otros contenidos de la página, tal y como si hubiera seleccionado Organizar > Traer al frente. Este comportamiento de "primer plano" es el deseado para las páginas de eventos y comida.

La capacidad de establecer el orden de apilamiento de los elementos de la página maestra es una nueva característica disponible en Muse 4.0. Anteriormente, se debían poner elementos de encabezado o pie de página en cada página, en lugar de una página maestra, si deseaba crear elementos de sitio comunes sobre otro contenido en el diseño de la página.

Definición de elementos en páginas maestras para que se muestren al frente

En Muse, la interfaz de la vista Diseño le permite seleccionar un elemento de página y elegir Objeto > Traer al frente, Traer hacia delante, Enviar detrás o Enviar hacia atrás para que un elemento se muestre por encima o por debajo de otro elemento de la página. (También puede hacer clic con el botón derecho del ratón en un elemento o grupo y elegir Organizar > Traer al frente, Traer hacia delante, Enviar detrás o Enviar hacia atrás para definir el orden de apilamiento).

Al diseñar sitios con versiones anteriores de Muse, el comportamiento predeterminado es que los elementos de una página maestra siempre se muestran detrás de todos los elementos de una página cuando se representa la página. Esta disposición en capas de fondo a veces es problemática (según el diseño del sitio), ya que la única solución implica copiar y pegar los elementos que normalmente colocaría en una página maestra en todas las páginas del sitio donde desearía que se mostraran en la parte superior.

Muse incluye la nueva función que permite controlar la disposición de los elementos en las páginas maestras. Ahora, en lugar de mostrar siempre todo lo que hay en una página maestra detrás de los elementos de la página, puede seleccionar los elementos en las páginas maestras y establecer que se muestren como un elemento de primer plano. Los elementos de las páginas maestras establecidos como elementos de primer plano se mostrarán por encima de todos los elementos de la página.

Esta nueva opción está disponible mediante la selección de Objeto > Mover a > Página maestra: Frente. Además, puede hacer clic con el botón derecho en cualquier elemento en la vista Diseño mientras se edita una página maestra y seleccionar Mover a > Página maestra: Frente en el menú contextual que aparece.

En este proyecto de muestra, el diseño requiere que el contenido de la página de inicio y de visitas utilice el orden de apilamiento predeterminado (los elementos de la página se muestran en la parte superior del encabezado de la página maestra Principal), excepto para la comida, los eventos y las páginas acerca de.

Para las páginas de comida y visitas, deberá actualizar la página maestra Foreground, para que el contenido del encabezado aparezca en primer plano, sobre el contenido de la página cuando las páginas se desplacen. Siga estos pasos:

  1. En la vista Plan, haga doble clic en la miniatura de página maestra Foreground para abrir la página y empezar a editar en la vista Diseño (si aún no está abierta).
  2. Utilice la herramienta Selección para hacer clic y arrastrar a fin de seleccionar todo el contenido del encabezado, incluido el rectángulo con el fondo de mosaico, el gráfico colocado de cinta naranja, el widget de menú, y el logotipo de GIF animado en el centro.
  3. Con todo el contenido del encabezado seleccionado, haga clic con el botón derecho y elija Mover a > Página maestra: frente. Tenga en cuenta que al contrario de lo que ocurre con el borde azul habitual para los objetos seleccionados, los elementos que se establecen para mostrarse en primer plano tienen un borde rojo cuando se seleccionan.
fig_39_building
Mueva el contenido del encabezado en primer plano con el menú contextual.

Esto garantiza que el encabezado se mostrará sobre los elementos de la página en las páginas donde la opción Página maestra: Foreground esté aplicada.

  1. Mientras el encabezado esté aún seleccionado, podrá fijarlo a la parte superior de la página, de manera que aunque la página se desplace, el encabezado no se desplazará con él. Obtendrá más información sobre la fijación de objetos en la séptima parte, pero por ahora, haga clic en la posición de fijación central superior en el panel de control para fijar el encabezado en su lugar.
fig_40_building
Fije el encabezado seleccionado la posición central superior.

  1. Haga clic y arrastre la página maestra Foreground en la página de comida, para aplicarlo. Repita este paso dos veces más para aplicar la página maestra Foreground en la página de eventos y en la página acerca de.

Después de realizar este cambio, el texto de la etiqueta azul muestra las palabras [Foreground], que indica que la comida, los eventos y páginas acerca de están ahora utilizando la página maestra Foreground. Si pasa el ratón sobre la etiqueta [Foreground] azul, un texto de sugerencia indica que la página maestra frontal se basa en la A-Página maestra.

Al diseñar sus propios proyectos de sitio, puede experimentar con la nueva función Mover al frente para establecer que los elementos en las páginas maestras se muestren en la parte superior. Más adelante, en esta serie de tutoriales, deberá finalizar el diseño para las páginas de comida y eventos y ver cómo la configuración de primer plano garantiza que el encabezado se muestre sobre otro contenido de la página.

En la cuarta parte de este tutorial, Creación de su primer sitio web con Muse, verá cómo trabajar con HTML incorporado para mostrar el código copiado de otros sitios web. También aprenderá cómo añadir un widget de composición de caja de iluminación para crear la página de inicio.

Uso de varias páginas maestras y animaciones incorporadas

En esta sección, aprenderá a trabajar con páginas maestras y a mostrar contenido común del sitio en varias páginas maestras para crear coherencia, al tiempo que crea diferentes secciones de un sitio. También aprenderá estrategias para trasladar elementos de las páginas maestras, ya que en algunos diseños de sitios puede resultarle útil crear varias páginas maestras y colocar únicamente gráficos específicos en cada una (por ejemplo, un sitio con cuatro zonas codificadas por colores). También aprenderá a trasladar elementos que normalmente están en una página maestra a una página individual específica, para crear efectos de diseño, como capas de elementos situados uno encima de otro.

Edición de contenido de página maestra

Los objetos colocados en una página maestra aparecerán en capas debajo de cualquier contenido que coloque en una página individual. Por ejemplo, los objetos que se coloquen en el encabezado o pie de página de la página principal aparecerán en capas sobre los fondos colocados en el encabezado y pie de página de la página maestra. Por esta razón, es posible que encuentre situaciones en las que sea necesario mover elementos de una página maestra y colocarlos en páginas individuales para que aparezcan sobre otros elementos de la página.

El contenido añadido a las páginas maestras debe editarse más adelante abriendo la página maestra. Si abre una página que está asociada a una página maestra e intenta editar el encabezado, el pie de página o cualquier otro contenido de la página maestra, este contenido parece estar bloqueado. Puede usar dos estrategias diferentes cuando necesite cambiar el contenido de una página maestra:

  1. Haga doble clic en la miniatura de la página maestra en la vista Plan y, a continuación, edite el contenido de la página maestra en la vista Diseño.

  2. Haga doble clic en la miniatura de la página maestra en la vista Plan para abrirla en la vista Diseño. Seleccione los elementos que desea editar (pero necesita estar sobre otros elementos colocándolos en una página del sitio) y elija Edición > Cortar, o utilice los métodos abreviados de teclado, Comando-X (Mac) o Control-X (Windows).

  3. Vuelva a la vista Plan y haga doble clic en la página que incluirá el contenido (anteriormente de página maestra). Elija Edición > Pegar en contexto. Con esto se garantiza que el elemento o elementos que corte en la página maestra se coloquen en la misma ubicación en una página normal. Si lo desea, puede abrir varias páginas y elegir Edición > Pegar en contexto para distribuir el contenido que hubiera en la página maestra a diferentes páginas del sitio.

Si es necesario, también puede duplicar una página maestra existente. Puede configurar el sitio de manera que la mayoría de las páginas utilice una sola página maestra, mientras una página especial utiliza un duplicado, una versión similar a la maestra (con elementos concretos copiados de esa página maestra duplicada en la página especial del sitio). Para obtener más información sobre la duplicación de páginas maestras, consulte el siguiente apartado.

Una vez que el objeto esté en las páginas individuales y no en la página maestra, puede editar el objeto por página como sea necesario y asegurarse de que el objeto aparezca en la parte superior.

En este proyecto de ejemplo, el sitio está actualmente mostrando el logotipo de Kevin's Koffee Kart (bicicleta roja con pancarta) directamente por encima de los elementos de navegación del sitio en el encabezado. El contenido del encabezado y pie de página aparecen automáticamente en cada página porque, de forma predeterminada, la página principal (y cualquier otra página que cree) está vinculada a la página maestra A, que es la que incluye este contenido. En la mayoría de los casos, se puede elegir crear sitios web que utilicen la misma página maestra para crear coherencia en el sitio.

Sin embargo, este sitio tiene un logotipo animado único que solo aparece en la página principal. Si revisa el ejemplo activo del sitio Kevin's Koffee Kart verá que, en la página principal, el logotipo de la bicicleta roja se anima una vez cuando la página se carga por primera vez: la bicicleta circula por la página desde el lado izquierdo. Al hacer clic para visitar otras páginas, verá que la animación solo se produce en la página principal; todos los demás logotipos de las páginas del sitio son estáticos.

En el siguiente apartado aprenderá a crear una página maestra duplicada y a asignar páginas para utilizar una página maestra específica en la vista Plan.

Duplicación y eliminación de páginas maestras

  1. Haga clic en el vínculo Plan para acceder a la vista Plan. Busque la miniatura de la página maestra A, situada en la parte inferior de la interfaz de la vista Plan.

  2. Pase el cursor por encima de la miniatura de la página maestra A y observe que, cuando pasa sobre ella, aparecen los mismos iconos de signo más (+) que se muestran al agregar páginas nuevas al mapa del sitio. Haga clic en el signo más (+) situado a la derecha de la miniatura de la página maestra A. Puede utilizar esta técnica siempre que desee crear una página maestra nueva partiendo de cero. Tenga en cuenta que la miniatura está en blanco, lo que significa que no incluye el contenido que ha añadido a la página maestra A. La nueva página maestra se denomina página maestra B de forma predeterminada, aunque puede hacer clic en el campo situado debajo de la miniatura para cambiarle el nombre como desee.

    En este caso, en lugar de crear una nueva página maestra en blanco, creará un duplicado de la página maestra A existente.

  3. Haga clic en el icono X situado en la esquina superior derecha de la página maestra B para eliminarla. (Si alguna vez elimina por error una página maestra existente mediante esta estrategia, elija Edición > Deshacer Eliminar página maestra para restaurarla).

  4. Haga clic con el botón derecho del ratón en la miniatura de la página maestra A y elija Duplicar página en el menú contextual que aparece. Aparece una nueva miniatura que muestra una página maestra duplicada, denominada copia maestra A.

    fig_59_getting
    Duplique la página maestra A en la vista Plan.

  5. Haga clic en el campo que aparece debajo de la miniatura de la copia maestra A y cambie el nombre de la página maestra duplicada a "MasterFlash". Utilizará esta página para añadir contenido multimedia que se anime exclusivamente en la página principal, mientras que todas las demás páginas continuarán apuntando a la página maestra A, que muestra una versión estática del logotipo en la cabecera.

  6. Haga clic con el botón derecho en la miniatura de la página principal. En el menú que aparece, seleccione Páginas maestras > MasterFlash. Esta operación asociará la página maestra MasterFlash a la página principal.

    Nota:

    Si lo prefiere, puede arrastrar la miniatura de MasterFlash encima de la miniatura de la página principal para aplicarla.

Una vez aplicada, aparece el nombre de la página maestra MasterFlash entre corchetes debajo de la miniatura de la página principal en la vista Plan.

Si hace clic en Previsualizar, no apreciará ninguna diferencia en la página principal. Dado que MasterFlash es una copia duplicada del archivo de página maestra A, la página principal aparece como lo hacía antes y se muestra el logotipo estático. Sin embargo, en el siguiente apartado, editará el contenido de MasterFlash para añadir la animación que solo se producirá en la página principal.

Utilizar páginas maestras duplicadas casi iguales (pero algo distintas) es un método excelente para distinguir una sección específica de un sitio web, así como para convertir en única la página principal, como se ha descrito en este proyecto.

En este tutorial aprenderá a utilizar páginas maestras. Vamos a examinar y analizar tres diseños de sitio, explorando la forma de conseguir efectos interesantes y coherencia en el sitio mediante elementos comunes dentro de una página maestra.

Pero, en primer lugar, ¿qué es una página maestra? Una página maestra le permite aplicar elementos comunes como encabezados, pies de página, logotipos y elementos de navegación a varias páginas del sitio. Puede utilizar una página maestra para su sitio web o configurar varias, de forma que pueda aplicar rápida y coherentemente estilos exclusivos a las diferentes secciones del sitio.

De forma predeterminada, Muse crea una página principal en blanco y una página maestra en blanco al crear un sitio nuevo. Estas páginas son el punto de partida para cualquier sitio Web. Puede planificar su mapa del sitio con las páginas en blanco y aplicarles páginas maestras más adelante, o bien puede crear su sitio Web a partir de la página maestra, aplicarla a una sola página (la página principal) y luego crear páginas nuevas basadas en ese diseño.

Análisis de diseños de sitio

Una buena manera de aprender nuevas estrategias de diseño de sitios es revisar distintos diseños de páginas maestras. En este artículo examinaremos tres diseños de sitio diferentes creados en Muse y exploraremos cómo se construyeron originalmente.

Si desea seguir adelante y abrir los activos de cada uno de los sitios de ejemplo, descargue los archivos de ejemplo, descomprima el archivo ZIP y haga doble clic en cada archivo .muse para abrirlo en Muse.

Mientras revisa cada uno de estos sitios de ejemplo, tome nota de algunas de las funciones utilizadas para crear diseños de sitio que facilitan la navegación y orientan a los visitantes mientras descubren el contenido del sitio:

  • Configure las propiedades del sitio para definir las dimensiones de todas las páginas
  • Utilice las guías para definir las regiones de encabezado y pie de página en la página maestra
  • Fije objetos a la ventana del navegador para situarlos fuera del diseño de la página
  • Cree efectos interesantes definiendo que los rellenos de las imágenes de fondo se desplacen o permanezcan fijos
  • Amplíe rectángulos para mostrar el ancho del 100% que abarque la anchura del navegador
  • Añada widgets Acordeón y widgets Proyección de diapositivas para visualizar contenido interactivo en la página
  • Personalice y aplique estilo a los widgets Menú para facilitar los elementos de navegación del sitio
  • Cree vínculos de anclaje para saltar en vertical o en horizontal a secciones específicas de la página
  • Pegue código desde sitios de terceros (HTML incrustado) para añadir funciones a las páginas

Mientras visita cada sitio de ejemplo, pruebe a desplazarse y a redimensionar la ventana de su navegador para ver cómo funciona el ejemplo en activo. A continuación, abra cada archivo .muse en Muse para ver cómo se utilizan las páginas maestras para estandarizar los diseños del sitio y crear una experiencia en línea más unificada.

Ejemplo 1: Happy Valley Adventure

fig01.master.b720

En el primer ejemplo, los gráficos del pie de página se fijan en la parte inferior de la ventana del navegador. Además, el fondo del pie se define en un ancho del 100% que abarca la parte inferior de la página de manera horizontal. El contenido más largo de la página se desplaza detrás del primer plano del pie de página para crear un efecto de cielo degradado. Al hacer clic en los vínculos de anclaje del lado izquierdo, la página se desplaza verticalmente a la sección correspondiente. Los elementos gráficos semitransparentes y un orden de apilamiento estratégico contribuyen a transmitir la experiencia de volar por el aire en un globo.

Al revisar el archivo .muse de este sitio, observe lo siguiente:

En la página maestra, una serie de rectángulos rellenos degradados proporcionan el fondo para el contenido más largo de la página.

  • La página principal incluye un gráfico en el pie de página con una imagen de fondo de mosaico horizontal definida para abarcar una anchura del 100% que se fija en la parte inferior de la ventana del navegador. Un segundo gráfico de pie de página (el pico de la montaña) está centrado y también fijo en la parte inferior del navegador, y se organiza para mostrar por encima otro gráfico en mosaico de pie de página seleccionando Organizar > Traer al frente. Esta estrategia se adapta a cualquier tamaño de monitor.
  • Los vínculos de navegación en la parte izquierda saltan a las etiquetas de anclaje que se agregan a la larga página orientada verticalmente. Mientras los visitantes hacen clic en los vínculos, la página se desplaza para visualizar el contenido correspondiente. El diseño parece equilibrado y unificado a medida que se descubren nuevas secciones del sitio.
  • La sección de contacto de la página principal incluye HTML incrustado para mostrar elementos de formulario de contacto que faciliten la comunicación con los visitantes y programen las próximas aventuras.

Ejemplo 2: Kevin's Koffee Kart

fig02.master.b720
Este sitio multinivel utiliza un widget Menú y código HTML incorporado.

La página principal del sitio Kevin's Koffee Kart incluye animación Flash en el encabezado y gráficos fijos de nubes. Cuando utilice las barras de desplazamiento para navegar por la página, observe que la imagen de fondo está fija y no se desplaza, pero el contenido de la página se desplaza por encima de ella. Una presentación de diapositivas se reproduce automáticamente, recorriendo un ciclo de imágenes debajo de un canal de Twitter con código HTML incorporado.

La barra de menú del encabezado se creó con un widget Menú horizontal con el fin de generar botones persistentes de navegación por el sitio que se actualizan automáticamente cuando se añaden nuevas páginas. En este ejemplo, el widget Menú está configurado para mostrar tanto páginas de nivel superior como subniveles.

Interactúe con el menú y vea cómo cada página se carga al hacer clic en los botones. El encabezado y el pie de página son un estándar en todas las páginas, pero las alturas de página varían en función del contenido. El pie de página marrón se compone de dos rectángulos con una anchura del 100% que ocupan todo el ancho de la ventana del navegador para aportar concordancia en cada página.

Las siguientes convenciones de diseño se utilizaron para crear el sitio Kevin's Koffee Kart:

  • Este sitio incluye dos páginas maestras similares: la página maestra sin componentes Flash se aplica a la mayoría de las páginas del sitio y una segunda página maestra con la película Flash se aplica solo a la página principal. Las dos páginas maestras tienen pies de página con anchura del 100% con bordes de diseño transparentes y utilizan el mismo widget Menú para mantener la coherencia. Después de crear la primera página maestra, los elementos se copian y después se pegan en su lugar de la segunda página maestra, para asegurarse de que todos los elementos se alineen perfectamente.
  • Las páginas se organizan en la vista Plan para crear secciones de nivel superior y subniveles del sitio, lo que se refleja en los elementos desplegables del widget Menú.
  • El mapa de imagen de fondo usado como relleno del navegador está configurado para mostrarse a tamaño original, en lugar de en mosaico. Está centrado y configurado para no desplazarse por debajo del contenido de la página.
  • El relleno de fondo de la página es blanco sólido con una ligera transparencia para que la imagen del mapa de fondo se vea.
  • La página principal incluye dos imágenes semitransparentes de nubes fijadas en el navegador. Desplácese por la página verticalmente para ver que los elementos fijos no se mueven y permanecen en posición si se cambia el tamaño de la ventana del navegador.
  • La página principal utiliza código HTML incrustado para mostrar contenido activo del canal de Twitter.
  • La página Koffee incluye un widget Acordeón que expande y contrae los paneles cuando se hace clic en él para ver más contenido en un área compacta de la página.
  • La página Origins incluye un widget Proyección de diapositivas en miniatura para mostrar una galería de fotos interactiva. La página Preparation utiliza elementos de navegación con etiquetas de anclaje para saltar a cada sección de la página, y la página Kart Map incluye código HTML incorporado para mostrar un mapa activo de Google Latitude, basado en la ubicación actual del teléfono móvil utilizado para dicha cuenta.

Ejemplo 3: More than Square

fig03.master.b720
Una potente superposición de gráficos fijos enmarca el contenido desplazable de la página.

Mientras contempla el ejemplo final, observe que los gráficos de los edificios se fijan en las esquinas superior derecha e inferior izquierda para enmarcar el contenido de la página. El edificio de la esquina superior derecha se dispone al frente superponiéndose por encima del contenido de la página, mientras que el edificio de la parte inferior izquierda aparece debajo de la página.

El contenido de la página está centrado, es semitransparente y parte de elementos arquitectónicos con esquinas redondeadas. El contenido de la página se desplaza verticalmente y la altura oscila a medida que hace clic por las páginas. Los vínculos a las redes sociales (Twitter, Facebook y YouTube) continúan en el lado izquierdo de la página para promover la interconexión y extender un diseño asimétrico coherente por el sitio.

La página principal presenta una galería de fotos con botones de navegación Siguiente y Anterior que también está configurada para reproducir las diapositivas lentamente si el visitante elige no hacer clic en los botones. La página How to Get Here incluye un mapa interactivo creado con código HTML incrustado copiado de Google Maps.

Mientras revisa el origen del archivo .muse para este ejemplo, considere lo siguiente:

En este ejemplo, casi todos los elementos comunes de página se encuentran en la página maestra. Esta estrategia facilita la actualización del sitio y la realización de cambios en el contenido de las páginas individuales.

La página maestra contiene un gráfico de fondo sin desplazamiento para la imagen del pie de página, que se fija en la parte inferior izquierda del navegador. La página maestra también contiene el diseño de esquina redondeada y semitransparente con los elementos de navegación del sitio.

Todas las páginas del sitio tienen un gráfico fijado en la esquina superior derecha que se dispone para mostrarse al frente del contenido de la página con el fin de crear la ilusión de perspectiva, que se materializa en los ángulos de las imágenes de los edificios.

Muse es una herramienta de diseño muy intuitiva que permite colocar sus diseños en la Web. La colocación creativa de los elementos en las páginas maestras y el contenido único que aparece en cada página le permiten realizar diseños convincentes. Para crear sitios innovadores para sus clientes, la única limitación es su propia imaginación.

Para leer más sugerencias sobre el uso de Muse, visite la página Ayuda y tutoriales de Muse; o bien la página de Muse Events (Eventos de Muse), donde encontrará diversos seminarios web, tanto en directo como grabados.

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