adobe muse manual de referencia

ADOBE MUSECreacin del primer sitio web

Tabla de contenido

Captulo 1

Ir al principio

Instalacin del software y configuracin del proyecto de ejemploCreacin del mapa del sitioEdicin de la pgina maestra AConfiguracin de la paleta de colores y cambio de nombres de muestras en el panel MuestrasTrabajo con elementos con una anchura del 100%Trabajo con botones de estado y botones de Photoshop colocadosConfiguracin de las opciones de trazo de un rectngulo para crear lneas

En este tutorial podr familiarizarse con el espacio de trabajo de Adobe Muse y aprender a crear un sitio web completo sin necesidad de escribircdigo. En la Parte 1 de Creacin de su primer sitio web con Adobe Muse se incluyen instrucciones para ayudarle a comenzar a trabajar conMuse. Aprender a trabajar con pginas maestras, widgets, imgenes colocadas y vnculos. Mientras trabaja en este tutorial podr ver en todomomento la apariencia que tendr el sitio una vez terminado consultando el sitio web activo de Katie's Caf.

Instalacin del software y configuracin del proyecto de ejemplo

1. Descargar e instalar la ltima versin de Adobe Muse CC.2. Descargar los archivos de ejemplo (ZIP, 78 MB).3. Descomprima el archivo ZIP y guarde la carpeta denominada Katies Caf Building v3 en su escritorio.4. Inicie Muse. Aparece la pantalla de bienvenida. Seleccione Archivo > Nuevo sitio.5. Seleccione Adobe Muse CC > Preferencias. En la seccin General, seleccione el tema de color deseado para el espacio de trabajo y

haga clic en OK (vase la Figura 1).

Figura 1. Haga clic en una de las muestras de color gris para establecer el tema de color de Adobe Muse.

Aparece el cuadro de dilogo Nuevo sitio. Utilice esta interfaz para editar la configuracin que debe aplicarse a todo el sitio.

6. Defina el nmero de columnas en 9. En la seccin Mrgenes, defina los mrgenes superior e inferior en 0 cuando se desvinculan loscampos. Defina los mrgenes derecho e izquierdo en 4. En la seccin Relleno, establezca el relleno superior e inferior en 0. Defina laanchura de la pgina en 960 y la altura mnima en 872 (vase la Figura 2).

1

Nota:

Figura 2. Actualice el nmero de columnas en el cuadro de dilogo Nuevo sitio.

Utilice el men Resolucin para elegir entre las opciones Estndar y HiDPI (2x). Esta configuracin permite definir la calidad del resultadode los activos cuando se publica o exporta un sitio Muse. Para obtener ms informacin, consulte Creacin de sitios web de alta resolucin.

En este tutorial, aprender a crear su primer sitio web en Muse para ordenadores de sobremesa. Mantenga el men Diseo inicial establecido enOrdenador, como se encuentra de forma predeterminada. Recuerde que cuando desee crear un sitio web con diseos alternativos parasmartphones y tablets, puede usar este men para elegir el diseo con el que desea trabajar en primer lugar.

La opcin etiquetada como Pie de pgina adhesivo est activada de forma predeterminada. Hace que el pie de pgina permanezca en la posicindeseada, incluso si la ventana del navegador es mucho mayor que el diseo de la pgina web, como ocurre en una pantalla de cine de Apple(vase la Figura 3).

Figura 3. La opcin Pie de pgina adhesivo est activada de forma predeterminada.

Cuando la opcin Pie de pgina adhesivo se encuentra activada, el contenido del pie de pgina queda alineado con la parte inferior de la ventanadel navegador, independientemente de la resolucin y de las dimensiones del monitor de escritorio del visitante (vase la Figura 4).

2

Ir al principio

Figura 4. Comparacin de un sitio activado alejado que tiene la opcin Pie de pgina adhesivo activada (izquierda) y un sitio que tiene dichaopcin desactivada (derecha).

En este ejemplo de proyecto de sitio (y en la mayora de los casos) deber mantener la opcin Pie de pgina adhesivo activada en el cuadro dedilogo Nuevo sitio.

Nota: la carpeta de archivos de ejemplo katiesCafe contiene una versin final del proyecto de ejemplo denominada katiescafe-final.muse. Si lodesea, puede hacer doble clic en la versin final del archivo .muse para abrirlo despus de guardar su versin del proyecto comokatiesCafe.muse. Adobe Muse le permite abrir varios proyectos de sitio a la vez, por lo que puede revisar el archivo katiescafe-final y utilizarlocomo referencia mientras contina con estas instrucciones.

En la siguiente seccin, empezar a aadir pginas nuevas al sitio.

7. Haga clic en OK para guardar los cambios y cerrar el cuadro de dilogo Nuevo sitio.8. Seleccione Archivo > Guardar sitio. En el cuadro de dilogo Guardar archivo de Adobe Muse como, introduzca un nombre para el sitio:

katiesCafe.muse. Vaya a la ubicacin en la que desee guardar este proyecto de ejemplo (como la carpeta katiesCafe del escritorio) y hagaclic en Guardar.

Creacin del mapa del sitio

Un mapa del sitio es una lista estructurada de las pginas que existen en la jerarqua de un sitio web. Puede crear pginas que estn en el mismonivel (sin subpginas) o puede crear mapas del sitio que contengan niveles diferentes de pginas. (Por ejemplo, un sitio ms grande puede teneruna pgina Acerca de que contenga dos subpginas denominadas Nuestro objetivo y Nuestro personal). Muse facilita la creacin y reorganizacinde pginas en el orden que prefiera, y nunca tendr que preocuparse por vnculos rotos. Sin embargo, es importante dedicar algn tiempo aorganizar el contenido de un sitio nuevo, definir qu pginas son necesarias y decidir cmo presentar la informacin del sitio. En un proyecto real,los procesos de finalizar las diferentes secciones del sitio y elegir el orden de las pginas forman parte de la fase de planificacin previa. Paraobtener ms informacin, consulte Creacin del mapa del sitio.

Despus de cerrar el cuadro de dilogo Nuevo sitio, se le redireccionar automticamente a la vista Plan de Muse. De forma predeterminada,todos los sitios nuevos contienen una pgina web (denominada Inicio) que est vinculada a una pgina maestra (denominada A-Pgina maestra).Puede ponerle el nombre que desee a ambas.

Para crear una experiencia coherente, debe colocar en las pginas maestras los elementos repetitivos del sitio, como el encabezado, el pie depgina y la navegacin del sitio. Mediante esta estrategia, al crear el diseo del sitio solo tendr que aadir el contenido exclusivo de las pginasindividuales.

Este proyecto de ejemplo es un sitio pequeo que contiene un total de cinco pginas, incluyendo la pgina de inicio. Siga los pasos que sedescriben a continuacin para agregar pginas nuevas:

Al hacer clic en el icono de signo ms (+) situado debajo de una miniatura de pgina, se crea una pgina de subnivel para ampliar unaseccin con pginas relacionadas con un tema especfico.

En este punto, el mapa del sitio tiene un total de cinco pginas: home, food, events, about y visit [inicio, comida, eventos, acerca de y visita](vase la Figura 5).

1. Pase el cursor por encima de la miniatura de la pgina de inicio y haga clic en el icono de signo ms (+), situado a la derecha de dichaminiatura de la pgina de inicio para crear otra pgina en el mismo nivel que la primera. Haga clic en el campo de etiqueta debajo de lapgina nueva y pngale un nombre: food (comida).

2. Haga clic en el icono de signo ms (+) situado a la derecha de la miniatura de la pgina de food (comida) para crear otra pgina nueva.Haga clic en la etiqueta y cambie el nombre de la pgina: eventos. Haga clic en el icono de signo ms (+) situado a la derecha de laminiatura de pgina de eventos para crear una pgina nueva. Introduzca el nombre la pgina nueva: acerca de. Repita esta operacin denuevo para crear una pgina nueva ms en el mismo nivel que la pgina de inicio y pngale nombre: visit (visita).

3

Nota:

Figura 5. Cree un total de cinco pginas en el mapa del sitio.

Este sitio de ejemplo contiene cinco pginas en el mismo nivel. Sin embargo, puede crear pginas de subnivel para organizar las pginassegn desee. Las pginas de subnivel suelen utilizarse para crear diferentes secciones del sitio. Si crea ms de una pgina maestra, puedehacer clic con el botn derecho del ratn (o pulsar la tecla Control y hacer clic) en las miniaturas de pgina en el Modo de plan para establecer unvnculo a una pgina maestra concreta. La primera vez que cree un sitio nuevo, las pginas se vincularn automticamente a A-Pgina maestra.

El Modo de plan proporciona herramientas para estructurar un sitio y generar el mapa del sitio. Si desea cambiar la organizacin del sitio, puedeajustar la disposicin de pginas arrastrando las miniaturas de pgina del mapa del sitio.

3. Pase el ratn por encima de la miniatura de pgina GALLERY y haga clic en el signo ms (+) situado debajo de l. Haga clic en el campode la nueva pgina secundaria y llmelo: Gallery-fullscreen (vase la Figura 6).

Figura 6. Agregue una nueva pgina de subnivel al mapa del sitio de la seccin de la galera.

Despus de realizar estos cambios, el mapa del sitio se ha completado.

Tenga en cuenta que en la parte superior de la interfaz de la vista Plan hay tres botones de diseo: Ordenador, Tablet y Mvil. En este proyectode ejemplo, solo se crear un diseo de escritorio para visualizar el sitio en pantallas de ordenador. Los diseos Tablet y Mvil muestran un iconode signo ms (+) junto al nombre, lo que indica que an no se han creado (vase la Figura 7).

Figura 7. Los botones de diseo le permiten crear y desplazarse entre tres diseos alternativos para el sitio.

Adems de hacer clic en los botones de diseo para desplazarse entre los diseos del sitio, tambin puede utilizar atajos de teclado paraalternar entre los planes de sitio cuando haya ms de un diseo:

Pulse Comando+7 (Mac) o Control+7 (Windows) para ir al mapa del sitio Ordenador.Pulse Comando+8 (Mac) o Control+8 (Windows) para ir al mapa del sitio Tablet.Pulse Comando+9 (Mac) o Control+9 (Windows) para ir al mapa del sitio Mvil.

Estos atajos de teclado solo se activan en proyectos de sitio que contienen al menos dos diseos: Ordenador, Tablet o Mvil.

Si sigue con el resto de este artculo continuar creando el diseo Ordenador. Para obtener ms informacin sobre el diseo de sitios web paratablets y dispositivos mviles, consulte Creacin de diseos para dispositivos mviles en Muse.

En la siguiente seccin, aprender a editar la pgina maestra A para aadir los elementos compartidos del sitio, incluido el contenido del pie depgina.

4

Ir al principio

Edicin de la pgina maestra A

Comience a disear la primera pgina maestra para el sitio aadiendo las ilustraciones que se mostrarn en todas las pginas vinculadas en elsitio.

Debido a que Muse se comporta como una herramienta de diseo, en segundo plano genera cdigo HTML, JavaScript y CSS estndar para crearpginas web. Cuando se decide aplicar un estilo (como redondeado de esquinas y colores de relleno de degradado), Muse no crea una formavectorial o una cuadrcula de pxeles. El proyecto .muse que se publica es un sitio web completamente funcional. Para empezar, actualice el colorde fondo de la pgina maestra.

1. En el modo Plan, haga doble clic en el campo situado debajo de la miniatura de la pgina maestra A y cambie el nombre de la pginamaestra: Pie de pgina. A continuacin, haga doble clic en la miniatura de la pgina maestra A para abrirla en el modo de diseo. Lapgina maestra se abre en su propia ficha en la parte superior del espacio de trabajo (vase la Figura 8).

Figura 8. La pgina maestra A est lista para su edicin en el modo de diseo.

El indicador de seleccin se encuentra en la esquina superior izquierda del panel de control. Si no se ha seleccionado nada ms, el indicador deseleccin muestra la palabra Pgina, lo que significa que solo est seleccionada la propia pgina. Si se selecciona un objeto de la pgina, comoun rectngulo, se muestra la palabra Rectngulo.

Mientras trabaja, preste atencin al indicador de seleccin para comprobar que ha seleccionado el elemento que desea editar. Si selecciona otroselementos de la pgina, siempre puede volver a seleccionar toda la pgina haciendo clic en el rea gris a ambos lados de la pgina.

Mientras la pgina est seleccionada, puede usar los mens del panel de control para actualizar la configuracin del color de relleno y del trazo.De forma predeterminada, el relleno de la pgina est configurado en ningn color y el trazo de la pgina est configurada en 0. Para estediseo, deje la configuracin predeterminada.

2. Haga clic en el vnculo Relleno del navegador para definir el color o imagen de fondo de la ventana del navegador que muestra el reaexterior de la pgina.

3. Para este diseo de pgina, defina el color de relleno del navegador con un color especfico, escriba el valor hexadecimal en el campo:#F5F1EE (vase la Figura 9).

5

Ir al principio

Figura 9. Actualice la muestra de color en el men Relleno del navegador.

4. Haga clic en cualquier lugar fuera del men Relleno del navegador para cerrarlo.

Configuracin de la paleta de colores y cambio de nombres de muestras en el panel Muestras

Para que despus le resulte ms fcil aplicar el mismo color a otros elementos del sitio, puede aadir y cambiar el nombre de las muestras decolor. Esto tambin le permite modificar una muestra del color con nombre para actualizar todas las instancias de dicho color utilizado en el sitio.

1. Abra el panel Muestras (Ventana > Muestras). 2. Seleccione Archivo > Colocar. Busque y seleccione el archivo en la carpeta de archivos de ejemplo llamado color-palette.png. Haga clic en

cualquier lugar de la pgina para colocar la imagen. 3. Haga clic con el botn derecho en el panel Muestras y elija Eliminar todo lo no usado (vase la Figura 10).

Figura 10. Seleccione la opcin para eliminar todos los colores no utilizados en el sitio.

Cambio de nombre de colores

Ahora se muestran los colores utilizados fundamentalmente en el diseo del sitio, junto con las muestras de color gris, blanco y negro genricasdel 50%. A continuacin, deber cambiar el nombre de los colores.

1. Haga doble clic en la muestra del cuadrado de color marrn en la parte ms a la derecha. Se abrir el cuadro de dilogo Opciones demuestra para mostrar los atributos de color. Adems de especificar un valor de color diferente para la muestra, puede actualizar lasOpciones de muestra a fin de nombrar un color de muestra de manera descriptiva.

2. Anule la seleccin de la casilla de verificacin Nombre con valor de color e introduzca un nombre nuevo en el campo Nombre de muestra:Marrn oscuro (vase la Figura 11).

6

Ir al principio

Figura 11. Asigne un nombre descriptivo a la muestra de color.

3. Haga clic en OK para cerrar el cuadro de dilogo Opciones de muestra.4. Repita los pasos del 1 al 3 para cambiar el nombre de la segunda muestra de color de la derecha. Asgnele el nombre: Blanco crudo.5. Cambie el nombre de los dos colores restantes, movindose de derecha a izquierda: Marrn claro y Marrn.6. Seleccione la imagen colocada (color-palette.png) y pulse la tecla Supr o Retroceso para eliminarla.

A continuacin, crear el pie de pgina que aparecer en todas las pginas.

Trabajo con elementos con una anchura del 100%

Los elementos que se definen con una anchura del 100% rellenan el navegador en horizontal, independientemente de la anchura a la que seredimensione la ventana del navegador del visitante. Si define un elemento de pgina para que se alinee tambin con el borde superior e inferiorde la ventana del navegador, un objeto relleno con un color slido o un activo en mosaico tambin se ampliar para adaptarse al espaciodisponible.

1. Dibuje un rectngulo con la herramienta Rectngulo que abarque el ancho de la pgina y sea de aproximadamente 250 pxeles de alto,cerca de la parte inferior de la pgina.

2. Con el rectngulo seleccionado, utilice el men Relleno para establecer el color de relleno del rectngulo en Marrn oscuro y establecer suanchura de trazo en 0. Puede saberse cundo est seleccionado el rectngulo porque aparece a su alrededor un cuadro delimitador azulcon manejadores y el indicador de seleccin de la esquina superior izquierda muestra la palabra Rectngulo (vase la Figura 12).

7

Nota:

Ir al principio

Figura 12. Arrastre los manejadores en los lados del rectngulo para cambiar su tamao.

3. Utilice la herramienta Seleccin para mover el rectngulo a su posicin. Debe ver brevemente un borde rojo que resalta los lados izquierdo,superior, inferior y derecho de la ventana del navegador. Este borde rojo indica que el rectngulo se ha configurado para mostrarse en unaanchura del 100%.

Si lo prefiere, tambin puede abrir el panel Transformar (Ventana > Transformar) y hacer clic en el botn Anchura (100%).

4. Si desea ver el diseo del sitio sin la superposicin de gua, seleccione Ver > Ocultar guas. Tambin puede utilizar el men Opciones devisualizacin del panel de control para ocultar y mostrar las guas.

Trabajo con botones de estado y botones de Photoshop colocados

Los botones de estado son elementos de pgina que se pueden arrastrar y soltar desde la biblioteca de widgets. Aportan un contenedoradecuado para crear botones de rollover. Una ventaja de utilizar los botones de estado es que todos los elementos en su interior cambiarn susestados al mismo tiempo, en funcin de la interaccin del visitante. Aada marcos de texto, imgenes, rectngulos, grficos y botones dePhotoshop colocados para crear botones personalizados con objeto de adecuarse al diseo de un sitio.

El botn de estado contiene un punto gris y un marco de texto con las palabras Lorem Ipsum como contenido del marcador de posicin. Aunquecada uno de estos elementos tiene sus propios estados, responden a la vez al pasar el ratn sobre el botn de estado o hacer clic en l. Si creamanualmente un botn con diferentes elementos, puede que solo el texto o solo el punto gris responda a los movimientos del ratn del visitante,dependiendo de dnde site el cursor el visitante.

1. Abra la biblioteca de widgets (Ventana > Biblioteca de widgets). Haga clic en la categora Botones para expandirla.2. Seleccione el widget Botn de estado y arrstrelo a la pgina.3. Haga clic en Previsualizar para ver una vista previa de la pgina. Utilice el cursor para desplazarse y haga clic en el botn predeterminado.

1. Haga clic en Diseo para continuar editando la pgina..

2. Seleccione el punto gris a la izquierda del texto del marcador de posicin y pulse la tecla Supr o Retroceso para eliminarlo. 3. Seleccione Archivo > Colocar botn de Photoshop y busque y seleccione el archivo denominado banner.psd en la carpeta Assets. Deje

todos los valores predeterminados en el cuadro de dilogo Importar opciones de Photoshop que aparece y haga clic en OK (vase la Figura13).

8

Nota:

Figura 13. El cuadro de dilogo muestra las capas en el archivo de Photoshop y los mens Estado le permiten elegir qu capa se mostrar paracada estado del botn.

7. Haga clic una vez dentro del botn de estado para colocar el archivo de Photoshop. 8. Con el grfico colocado an seleccionado, haga clic con el botn derecho y seleccione Organizar > Enviar detrs (vase la Figura 14).

Figura 14. Cambie la imagen del banner de Photoshop para mostrar detrs del marco de texto.

9. Seleccione el texto del marcador de posicin Lorem Ipsum con la herramienta Texto y escriba: DOWNLOAD MENU.10. Con el texto seleccionado, actualice el color del texto en el panel de control o en el panel Texto a blanco crudo. Utilice el men Fuente para

elegir la primera opcin: Aadir fuentes web. En la interfaz que aparece, busque y seleccione Open Sans Condensed Bold para dar formatoal texto.

Nota: Open Sans Condensed Bold es una fuente web que puede descargar seleccionando Aadir fuentes web en el men Fuente. Paraobtener ms informacin sobre el uso de fuentes web, lea Tipografa en Muse: uso de fuentes web, fuentes web seguras y fuentes del sistema.

11. Defina el tamao de fuente en 15 y seleccione la alineacin centrada. Definir tracking en 0 y el interlineado en 24 pxeles. Deje el estilo devnculo predeterminado. En el men Etiqueta de nivel de prrafo, seleccione el subttulo (h2) para mejorar la optimizacin para motores de

9

Ir al principio

bsqueda del sitio (vase la Figura 15).

Figura 15. Actualice los estilos de formato con las opciones del panel Texto.

Consulte el panel Estados para ver que los cuatro estados del marco de texto son idnticos. Ese es el aspecto de este diseo. Sin embargo,puede actualizar los colores del texto para los distintos estados, si lo desea.

12. Utilice la herramienta Seleccin para arrastrar los manejadores laterales del marco de texto para hacerlo ms ancho, de modo que el textose ajuste. Arrastre el marco de texto horizontalmente hasta que se centre dentro del botn de estado. Cuando el marco de texto estcentrado en el botn de estado, se mostrar brevemente una gua vertical azul oscura.

13. Presione Esc una vez para seleccionar el botn de estado completo.14. Abra el panel Estados (Ventana > Estados) para previsualizar el aspecto de los cuatro estados: Normal, Rollover, Ratn pulsado y Activo.

El estado Normal aparece seleccionado. Este panel le permite editar las distintas formas en las que se muestra el grfico del botn,dependiendo de la actividad del cursor del visitante.

15. Utilice el men Relleno para establecer el color de relleno del botn de estado en Ninguno.16. Repita los pasos 14 y 15 para definir el color de relleno de todos los estados en Ninguno.17. Utilice la herramienta Seleccin para colocar el botn de estado cerca de la parte superior del rectngulo marrn, utilizando las guas de

alineacin para centrarlo verticalmente en la pgina (vase la Figura 16).

Figura 16. Centre el botn de estado personalizado en la parte superior del rea de pie de pgina.

Configuracin de las opciones de trazo de un rectngulo para crear lneas

A fin de aadir un poco de detalle visual, crear una lnea y despus la duplicar.

1. Utilice la herramienta Rectngulo para dibujar un rectngulo a la izquierda del botn de estado que es de aproximadamente 377 pxeles deancho y 15 pxeles de alto. Aparecer una sugerencia con las dimensiones del rectngulo a medida que se dibuja.

2. Configure el color de relleno en Ninguno y el color de trazo en blanco crudo.3. Haga clic en la palabra Trazo del panel de control para abrir las opciones de trazo.

10

Los trminos de Creative Commons no cubren las publicaciones en Twitter y Facebook.

Avisos legales | Poltica de privacidad en lnea

4. Mantenga la configuracin de alineacin predeterminada: Alinear trazo al centro. Haga clic en el icono de enlace para permitir las diferentesanchuras de trazo para cada lado del rectngulo. Defina la anchura de los trazos inferior, izquierdo y derecho en 0, de modo que solo laparte superior tenga una anchura de trazo de 1 (vase la Figura 17).

Figura 17. Actualice la configuracin de la opcin de trazo para mostrar nicamente un trazo en la parte superior del rectngulo.

5. Haga clic en cualquier otra parte de la pgina para cerrar el cuadro de dilogo Opciones de trazo.6. Utilice la herramienta Seleccin para colocar el rectngulo de modo que se encuentre a la izquierda del botn de estado y el borde superior

est centrado horizontalmente.7. Opcin y arrastre el rectngulo para duplicar el rectngulo. Colquelo a la derecha del botn de estado (vase la Figura 18).

Figura 18. Alinee horizontalmente los dos rectngulos entre s y con el botn de estado.

Siga leyendo este tutorial. En el captulo siguiente, aprender a trabajar con los widgets de men. Los widgets permiten agregar rpidamentefuncionalidades avanzadas a las pginas sin escribir cdigo. Aprender a modificar el comportamiento y la apariencia de los widgets parapersonalizar el modo en el que se muestran en del diseo del sitio.

11

Captulo 2

Ir al principio

Trabajo con los widgets de menCreacin y aplicacin de estilos de prrafoAdicin de iconos de Font Awesome Brand a una pginaAdicin de vnculos a archivos descargablesAdicin de vnculos a sitios web externos Creacin de vnculos de correo electrnicoUso de guas para definir las regiones de encabezado y pie de pgina de una pginaConfiguracin de elementos de pgina como elementos de pie de pginaAdicin de un anclaje en la parte superior de la pgina

En el Captulo 1 de Creacin del primer sitio web con Muse, ha creado un nuevo sitio, utilizado el modo Plan para crear las pginas del sitio yeditado la pgina maestra en modo Diseo para aadir elementos de pgina al pie de pgina. En esta seccin, aprender a aadir y personalizarlos widgets. El primer tipo de widget que aadir se denomina widget de men y ayudar a los visitantes a navegar a las pginas del sitio.Tambin conocer los diferentes tipos de vnculos que puede agregar en Adobe Muse.

Trabajo con los widgets de men

El pie de pginas maestras normalmente incluye la navegacin del sitio, por lo que ser eso lo que aadiremos a continuacin.

1. Abra la Biblioteca de widgets; seleccione Ventana>Biblioteca de widgets. 2. En la biblioteca de widgets, haga clic en la seccin de mens para expandirla. Seleccione el widget horizontal y arrstrelo del panel a la

zona de pie de pgina de la pgina maestra A (vase la Figura 19).

Figura 19. El widget horizontal muestra el estilo predeterminado cuando se arrastra a una pgina.

El panel negro que aparece siempre que arrastra un widget desde la biblioteca de widgets se llama panel de opciones. Haga clic lejos del panelpara cerrarlo. Puede hacer clic en el botn de flecha azul siempre que quiera volver a acceder de nuevo.

El men muestra automticamente los nombres de las pginas que ha creado, en el mismo orden en el que aparecen en el mapa del sitio. Losnombres de las pginas estn vinculados automticamente a las pginas y se actualizan de manera dinmica. Si posteriormente cambia de

12

nombre o mueve la pgina en modo Plan, se actualizan los widgets de men y vnculos de men siguen funcionando segn lo esperado.

Aunque cada tipo de widget ofrece distintas funcionalidades, muchos de los conceptos que se utilizan al trabajar con widgets son los mismos.Busque el widget que desea utilizar en la biblioteca de widgets y, a continuacin, arrstrelo hasta la pgina. Cada widget contiene una jerarquade elementos de widget anidados. Cuando seleccione un widget, podr continuar haciendo clic para descubrir sus elementos secundarios. Alhacer esto, podr ver que el indicador de seleccin de la esquina superior izquierda muestra el nombre del elemento que est seleccionado enese momento.

Por ejemplo, cuando se hace clic por primera vez en el widget, el propio widget se selecciona. Si hace clic de nuevo, puede seleccionar unelemento segundario, como un contenedor y, a continuacin, hacer clic de nuevo para seleccionar el marco de texto dentro del contenedor. Paratrabajar fuera del elemento secundario seleccionado, pulse la tecla Esc. Para anular la seleccin, tambin puede hacer clic en cualquier lugar dela pgina fuera del rea del widget.

Cuando todo el widget est seleccionado, podr cambiar su posicin. Es posible arrastrar los manejadores de transformacin para cambiar laescala o el tamao de las dimensiones de todo el widget. Puede definir el color del relleno y del trazo, as como aplicar estilos para controlar elaspecto de todo el widget.

3. Utilice la herramienta Seleccin para colocar el widget de men debajo del botn de estado, centrado verticalmente.

Configuracin y personalizacin de widgets

Para configurar widgets, actualice los ajustes en el panel Opciones. El panel Opciones es contextual y le permite aplicar cambios para actualizarlos ajustes especficos para ese widget al completo, o el elemento secundario seleccionado del widget. Algunos widgets tienen ms opciones queotros. El panel Opciones permite controlar el comportamiento de los widgets y cmo se muestra su contenido.

Mientras un elemento contenedor est seleccionado, por ejemplo un elemento de men, puede aplicar estilo al widget definiendo las opciones derelleno y de trazo. Cuando se seleccionan etiquetas de texto, es posible utilizar el panel Texto o las opciones de texto del panel de control paraaplicar estilo al texto. A veces, deber editar las etiquetas de texto en los widgets. Sin embargo, a menos que configure los widgets de menpara que utilicen el Tipo de men manual, ya habr configurado los nombres de las pginas segn las pginas del mapa del sitio

1. Haga clic en el widget de men una vez y observe que el indicador de seleccin muestra la palabra: Menu. Haga clic en el botn azul deflecha para acceder al panel Opciones (vase la Figura 20).

Figura 20. Abra el panel Opciones para configurar los ajustes del widget.

Asegrese de que se establecen las siguientes opciones predeterminadas, como se muestra en la Figura 22.

Tipo de men: pginas de nivel superiorDireccin: horizontalEditar conjuntamente: activadoTamao del elemento: tamao uniformeMostrar icono a la izquierda: desactivadoMostrar etiqueta: activadoMostrar icono a la derecha: solo submensPosicin de las partes: horizontal; centrado

La configuracin del men Opciones le permitir configurar el comportamiento del men.

A continuacin, aprender a editar el aspecto de los botones del men, y cmo controlar el formato de texto para que coincida con el diseo delsitio.

2. Haga clic en cualquier otra parte de la pgina para cerrar el men Opciones.

13

Nota:

Aspectos bsicos de los estados de los botones

1. Seleccione Archivo > Vista previa de sitio en navegador para previsualizar el sitio y para comprobar el widget de men.2. Mire los botones del men cuando cargue la pgina por primera vez (este estado se conoce como estado Normal). Site el cursor sobre los

botones para ver si aparece el estado de rollover. Al hacer clic en un botn, la pgina correspondiente se carga y el botn se muestra conun color gris ms oscuro, que es el estado activo predeterminado. El estado activo indica la pgina seleccionada actualmente mientras quelos visitantes navegan por el sitio.

Nota: si hace clic y mantiene pulsado el botn del ratn, hay un estado adicional, Ratn pulsado, que muestra un aspecto personalizado cuandoel visitante hace clic en el botn.

Edicin de los estados de botn

A continuacin, ver cmo editar el estado de un botn.

1. Cierre el navegador y vuelva a Adobe Muse.2. Haga clic en el widget una vez para seleccionar el men completo. Haga clic en el botn de comida una vez ms para seleccionar el

elemento del men de comida (consulte la Figura 23). Si, accidentalmente, hace clic una tercera vez y el indicador de seleccin muestra lapalabra Etiqueta, pulse la tecla Esc una vez para subir un nivel en la jerarqua, de forma que aparezca la palabra Elemento de men.

Si, accidentalmente, hace clic una tercera vez y el indicador de seleccin muestra la palabra Etiqueta, pulse la tecla Esc una vez para subirun nivel en la jerarqua, de forma que el indicador de seleccin muestre de nuevo la palabra Elemento de men.

Como la opcin Editar conjuntamente est activada en el panel Opciones, los cambios que se realicen en el aspecto de este elemento de mense aplicarn al resto de botones del widget de men. Esto agiliza la edicin. A menos que necesite aplicar un estilo diferente a cada botn,mantenga la opcin Editar conjuntamente activada.

Los botones grises definen la apariencia de cada estado (vase la Figura 21).

3. Abra el panel Estados mediante la seleccin de su ficha o en Ventana > Estados.

Figura 21. Utilice el panel Estados para elegir los diferentes estados y editar su apariencia.

4. En el panel Estados, haga clic en cada elemento de la lista: estados normal, rollover, ratn pulsado y activo. Tenga en cuenta que al hacerclic en los estados del panel, el widget de men de la pgina se actualiza para mostrar el aspecto del estado.

5. Haga clic en el estado Normal. Si est seleccionado el elemento de men INICIO, use el men Relleno para establecer el color de rellenoen Ninguno. Cuando se establece un color diferente de relleno para el botn INICIO, todos los elementos de men actualizan su estadoNormal porque la opcin Editar conjuntamente est activada.

6. Haga clic en el estado de rollover en el panel Estados y establezca el color de relleno en Ninguno. Repita este proceso dos veces ms paradefinir el color de relleno de los estados Ratn pulsado y Activo en Ninguno. Esto elimina el color de relleno de fondo para crear botonestransparentes.

Ms tarde, cuando realice sus propias pginas, podr experimentar y establecer un color de relleno para todo el widget y, a continuacin,establecer un color de relleno distinto para los elementos de men. Tambin puede aadir imgenes de fondo para rellenar los elementos demen.

A continuacin, actualizar la apariencia de las etiquetas de botn mediante un proceso de edicin similar.

14

Ir al principio

Nota:

Edicin de etiquetas de los widget de men

Siga estos pasos para actualizar el formato de las etiquetas de texto que muestran los nombres de pgina en cada elemento de men.

Para obtener ms informacin sobre el uso de fuentes web, lea

1. Si est seleccionado el elemento de men INICIO, haga clic en el botn de nuevo para seleccionar el texto dentro del botn. La palabraEtiqueta se muestra en el indicador de seleccin.

2. En el panel Estados, asegrese de que el estado Normal est seleccionado.3. Para abrir el panel Texto, haga clic en su ficha o elija Ventana > Texto.4. Actualice el texto utilizando el men Texto en el panel de control o el panel Texto. Defina el color como blanco crudo. En el men Fuente,

seleccione la primera opcin: Aadir fuentes Web. En la interfaz que aparece, busque y seleccione la fuente web Open Sans paraagregarla. A continuacin, seleccinela de la lista de fuentes para aplicarla.

5. Defina el tamao de fuente en 12 y utilice la alineacin centrada. Defina el tracking en 1 y el interlineado en 120% (vase la Figura 22):

Figura 22. Defina las opciones en el men Texto para actualizar el aspecto de la etiqueta de men.

Creacin y aplicacin de estilos de prrafo

1. Abra el panel Estilos de prrafo haciendo clic en su ficha o en Ventana > Estilos de prrafo.2. Haga clic en el botn Nuevo estilo (icono de pgina) en la parte inferior del panel para guardar este conjunto de estilos de fuente, lo que

permite aplicarlos fcilmente a otros elementos de texto ms adelante.3. Haga doble clic en el nuevo estilo que acaba de crear en el panel Estilos de prrafo, al que se le ha dado el nombre predeterminado de

Estilo de prrafo. Cambie el nombre del pie de pgina en el men (vase la Figura 23).

Figura 23. Haga clic en Estilo nuevo (icono de pgina) para aadir un nuevo estilo de prrafo y, a continuacin, haga doble clic en el nuevo estiloe introduzca un nombre descriptivo en el campo Nombre de estilo.

Haga clic con el botn derecho (o pulse la tecla Control y haga clic) en el nombre de un estilo en el panel Estilos de prrafo para ver un

15

Ir al principio

men que le permitir duplicar, eliminar o desvincula estilos. Tambin puede seleccionar Opciones de estilo en el men, en lugar de hacer dobleclic en el nombre de estilo, para acceder a las opciones de Estilo de prrafo.

Tenga en cuenta que en la ventana Opciones de estilo podr aplicar un estilo a una etiqueta HTML concreta.

Si busca en el panel Estados, se dar cuenta de que todos los estados (Normal, Rollover, Ratn pulsado y Activo) utilizan el mismo formato defuente para las etiquetas del elemento de men.

1. Haga clic en Previsualizar para ver el diseo tal y como aparece en un navegador. Muse utiliza para mostrar la pgina una versin deWebkit que muchos navegadores web modernos utilizan. Al interactuar con el men, se debe tener en cuenta que los botones solomuestran sus etiquetas (los contenedores del elemento de men son transparentes). Tambin tenga en cuenta que las etiquetas nocambian cuando se desplaza el cursor o hace clic en los botones del men.

2. Despus de probar el men, haga clic en Diseo para continuar editando la pgina maestra A.

Adicin de iconos de Font Awesome Brand a una pgina

En lugar de agregar imgenes colocadas, que tardan ms en cargarse y son ms tediosas de crear y de editar, puede colocar elementos de FontAwesome en la pgina. Estos elementos son similares a las fuentes web. Puede aadir elementos de fuente, que incluyen muchos iconoscomunes. Para actualizarlos, utilice la configuracin del panel de control o el panel Texto del mismo modo que los marcos de texto de estilo.

1. En un navegador, visite el widget Font Awesome en la biblioteca del complemento Adobe Muse.2. Haga clic en el botn Descargar para descargar la extensin a partir de la fuente comprimida (con la extensin de archivo .mulib) en el

escritorio. No expanda el archivo descargado.

3. Abra el panel Biblioteca (Ventana > Biblioteca).4. Haga clic en el botn Importar y busque y seleccione el archivo .mulib descargado en el paso 2.5. El elemento de biblioteca de FontAwesome (icono) se muestra en el panel Biblioteca (consulte la Figura 24).

Figura 24. Despus de importar elementos de biblioteca aparecern en el panel, listos para usarse.

6. Haga clic en la flecha para expandir la carpeta de iconos de FontAwesome.7. Arrastre un elemento de los iconos al rea del pie de pgina.

8. Haga clic en el botn de flecha azul para abrir el panel Opciones y elija la opcin de Facebook en el men.

Puede ver una barra de progreso conforme se carga el icono en la vista Diseo. Esto sucede porque los iconos se alojan en un servidor diferentecomo fuentes web.

9. En el panel de control, establezca el color de relleno en marrn. En el panel Texto, defina el color de fuente del blanco (vase la Figura 25).

16

Ir al principio

Figura 25. Actualizacin del aspecto del icono de Facebook definiendo el color de relleno y de texto.

10. Repita los pasos del 7 al 9 para crear 4 iconos ms en Google+, Tumblr y Twitter. Utilice la herramienta Seleccin para alinearhorizontalmente (vase la Figura 26).

Figura 26. Alinee el conjunto de cuatro iconos de redes sociales en una fila, utilizando las guas inteligentes para organizarlos coherentemente.

11. Seleccione todos los iconos de las redes sociales y elija Objeto > Agrupar para agruparlos en un conjunto. Arrastre el grupo en la pginahasta que se centre verticalmente debajo del botn Download menu (descargar men) y del widget de men.

Adicin de vnculos a archivos descargables

Muchos sitios del restaurante publican su men en lnea en formato PDF para que los visitantes puedan guardar una copia en su escritorio oimprimirla.

1. Seleccione el widget Botn de estado.2. Utilice el men Hipervnculos del panel de control para seleccionar el elemento de la seccin de archivos en la parte inferior del men,

Vincular a archivo. En el cuadro de dilogo Importar que aparece, seleccione el archivo denominado Katie's Cafe Menu.pdf en la carpeta dearchivos de ejemplo. Haga clic en Abrir para seleccionarlo (vase la Figura 27).

Figura 27. Busque y seleccione la versin PDF del men.

17

Ir al principio

Ir al principio

Cuando utilice la funcin Vincular a archivo, se carga el archivo cuando el sitio se publica o se incluye en la carpeta del sitio cuando se exporta elsitio. Se recomienda copiar todos los archivos del sitio en la carpeta del sitio local.

Si observa el panel Activos, ver que el archivo KatiesCafeMenu.pdf aparece ahora como uno de los activos del sitio.

Dependiendo del navegador que est utilizando, algunos navegadores mostrarn el PDF en la ventana del navegador mientras que otrossimplemente descargarn el archivo PDF en su escritorio.

3. Seleccione Archivo > Vista previa de pgina en navegador.4. Haga clic en el vnculo Download menu (Descargar men) y compruebe las muestras vinculadas del archivo PDF.

Adicin de vnculos a sitios web externos

Puede agregar vnculos absolutos a otras pginas web fuera del sitio. Siga estos pasos para aadir vnculos externos a cada uno de los iconosde las redes sociales.

1. Seleccione el icono de Facebook y, a continuacin, escriba (o copie/pegue) el vnculo a la pgina de Facebook de Katie's Caf en el campodel men Hipervnculo: http://www.facebook.com/KatiesCafeSF

2. Seleccione el icono de Google+ e introduzca el vnculo a la pgina de Katie's Caf en Google+:3. Seleccione el icono de Tumblr e introduzca el vnculo al blog de Katie's Caf en Tumblr: http://katiessf.tumblr.com4. Seleccione el icono de Twitter e introduzca el vnculo a la pgina de Katie's Caf en Twitter: http://twitter.com/katiescafesf5. Haga clic en el icono de Facebook nuevamente para seleccionarlo. En el panel de control, haga clic en la palabra Hipervnculos subrayada

en azul. En el cuadro de dilogo que aparece, seleccione la opcin: Abrir el vnculo en una nueva ventana o ficha. Introduzca tambin unadescripcin en el campo de informacin (vase la Figura 28).

Figura 28. Active la casilla para abrir el vnculo en una nueva ventana o ficha.

6. Repita el paso 5 para configurar los vnculos de Google+, Tumblr y Twitter y abrirlos tambin en una nueva ventana del navegador. Escribala informacin sobre cada vnculo (que aparece cuando un visitante pasa el ratn sobre los botones de los iconos de las redes sociales).

Esta es una convencin de diseo web comn: los vnculos que van a otras pginas del mismo sitio se abren en la misma ventana del navegador(lo que ocurre por defecto en Adobe Muse) y los vnculos a pginas en otros sitios web externos se suelen abrir en una nueva ventana o ficha.

Creacin de vnculos de correo electrnico

Este sitio de ejemplo utiliza el widget de formulario de contacto simple para permitir que los visitantes enven mensajes. Ms adelante en esteartculo, aprender a aadir un formulario de contacto en la pgina de contacto.

Si lo desea, puede aadir los vnculos de correo electrnico (que, cuando se hace clic en ellos, provoquen que se inicie el cliente de correoelectrnico del visitante con un mensaje que indica la direccin de correo electrnico en el campo Para).

Introduzca la direccin de correo electrnico con la expresin mailto: en el men Hipervnculo, as:

mailto:[email protected]

La lista de vnculos en el men de los hipervnculos puede alargarse en sitios web ms grandes. Para buscar una pgina especfica, vnculo de

18

Ir al principio

Nota:

anclaje, archivo enlazado o URL externa, puede filtrar la lista rpidamente escribiendo las primeras letras del vnculo en el campo del menVnculos para ver los elementos coincidentes.

Uso de guas para definir las regiones de encabezado y pie de pgina de una pgina

Al disear pginas individuales, suelen variar en altura, dependiendo del contenido aadido a cada pgina. En Muse puede configurar regiones,de manera que el encabezado siempre permanezca en la parte superior y el contenido del pie de pgina siempre se muestre directamente debajodel contenido de la pgina, independientemente de su altura.

Siga estos pasos para ver las guas y configurar las reas de pgina:

1. Para mostrar las guas de encabezado y pie de pgina, elija Ver > Mostrar encabezado y pie de pgina. Como alternativa, puede utilizar elmen Ver del panel de control para activar las guas de encabezado y pie de pgina. Cuando estn visibles, aparece una casilla deverificacin junto al elemento de encabezado y de pie de pgina (vase la Figura 29).

Figura 29. Compruebe que las guas de encabezado y pie de pgina estn visibles.

Si lo prefiere, tambin puede hacer clic con el botn derecho en la parte izquierda del espacio de trabajo, fuera de la ventana del navegador yelegir la opcin Mostrar al encabezado y al pie de pgina en el men que aparece.

Las reglas tambin deben estar visibles para colocar las guas de encabezado y pie de pgina, para que pueda establecer las guas en unaposicin de pxeles especfica.

Cinco guas horizontales azules abarcan el ancho de la pgina. Comenzando por la parte superior, estas cinco guas se utilizan para definir laparte superior de la pgina, la parte inferior del encabezado, la parte superior del pie de pgina, la parte inferior de la pgina web y la parte inferiorde la ventana del navegador. Al arrastrar las guas para definir estas reas, un texto de sugerencia describe cada gua y muestra su ubicacinactual. Puede aumentar la ampliacin de la pgina, para colocar las guas con mayor precisin.

La parte inferior de la gua de la ventana del navegador establece la parte inferior de la pantalla que se muestra a los visitantes. En funcindel diseo, puede establecer una imagen de color o de relleno de fondo para rellenar el navegador y establecer la gua en la parte inferior de lapgina sobre la parte inferior de la gua del navegador, si desea que el contenido de relleno del navegador se muestre debajo del contenido decada pgina.

En este proyecto de ejemplo, el relleno del navegador no se muestra debajo del contenido de la pgina.

2. Arrastre la gua de la parte inferior de la pgina y la gua de la parte inferior del navegador a la misma ubicacin de la parte inferior de lapgina, justo debajo del rectngulo del pie de pgina, como se muestra en la Figura 30.

19

Ir al principio

Ir al principio

Figura 30. Si las guas de la parte inferior de la pgina y de la parte inferior del navegador se encuentran en la misma ubicacin, el contenido derelleno del navegador no se muestra bajo la parte inferior de la pgina.

Las tres guas superiores definen las regiones para el contenido mostrado en el encabezado, el pie de pgina, y el contenido exclusivo; el reacentral se ampla para ajustarse a la altura de los elementos agregados a cada pgina.

Despus de realizar estos cambios, el apartado de pie de pgina se ha completado.

3. Arrastre la gua Pie de pgina hasta que se encuentre ligeramente sobre la parte superior del rectngulo del pie de pgina, aaproximadamente 620 px.

4. Deje la gua Principio de la pgina en la parte superior (en la ubicacin Y: 0 px). Arrastre la gua Encabezado hasta 0px tambin.

Configuracin de elementos de pgina como elementos de pie de pgina

Asegrese de establecer los elementos del rea de pie de pgina como elementos de pie de pgina. Esto garantiza que el pie de pgina semuestre siempre en cada pgina por debajo del contenido exclusivo de pgina. Siga estos pasos:

1. Utilice la herramienta Seleccin para seleccionar todo el contenido de la pgina del pie de pgina. Puede hacer clic y arrastrar loselementos en el pie de pgina, o bien elija Edicin > Seleccionar todo.

2. Haga clic con el botn derecho en los elementos y asegrese de que la opcin Elemento de pie de pgina est marcada en el men queaparece. Como alternativa, compruebe que la casilla de pie de pgina en el panel de control est activada (vase la Figura 31).

Figura 31. Compruebe que los elementos seleccionados del pie de pgina se establecen como elementos de pie de pgina.

Adicin de un anclaje en la parte superior de la pgina

20



El contenido de la pgina maestra del pie de pgina aparece en el resto de pginas del sitio. Es una buena ubicacin para aadir el anclaje quepermitir a los visitantes ir a la parte superior de las pginas ms largas.

1. Haga clic en el botn de anclaje en el panel de control para cargar un anclaje en el cursor de colocacin.

2. Asigne un nombre al anclaje top y colquelo en la parte superior de la pgina (vase la Figura 32).

Figura 32. Crear un anclaje con nombre top y colquelo en la parte superior del rea de pgina.

Vaya al captulo 3 de Creacin de su primer sitio web, donde descubrir en qu consisten las pginas maestras jerrquicas y aprender a aplicarpginas maestras a pginas individuales. Tambin ver cmo crear activos de sitio reutilizables y almacenarlos en el panel Biblioteca.

21

Captulo 3

Ir al principio

Trabajo con pginas maestras jerrquicasCreacin del encabezado de la pgina maestra InteriorCreacin del encabezado de la pgina maestra de aterrizajeAplicacin de pginas maestras a las pginas del diseoRelleno de un rectngulo con una imagen de fondoAplicacin de formato y estilo a contenido de textoDiseo de un separador de pgina decorativo con elementos agrupadosCreacin de un elemento de biblioteca reutilizableAlineacin de elementos de pgina mediante las guas de la cuadrcula de la pginaAplicacin de estilo a diferentes lneas de texto dentro del mismo marco de textoRelleno del resto de la pgina de inicio

En el captulo 2 del tutorial de creacin del primer sitio web con Adobe Muse, ha creado nuevas pginas maestras y ha aadido navegacin delsitio mediante un widget de men. Ha aprendido a profundizar en los elementos secundarios de los widgets, para seleccionarlos y editar laapariencia de estados y etiquetas con el panel Estados. Tambin ha comprobado cmo aadir contenido de texto y aplicar estilo mediante estilosde prrafo, y ha realizado un repaso rpido del uso del archivo un archivo de biblioteca de Muse para aadir la biblioteca Font Awesome coniconos de pgina de carga rpida. En esta seccin, ver cmo crear sus propios elementos de biblioteca y cmo reutilizarlos en las pginas.

Trabajo con pginas maestras jerrquicas

Haga clic en el vnculo Plan o en la ficha denominada katiesCafe para volver al modo Plan

.Tenga en cuenta que todas las miniaturas de pgina del sitio actual muestran los elementos de diseo que se han aadido a la pgina maestraPie de pgina vinculada (vase la Figura 33).

Figura 33. El diseo de la pgina maestra Pie de pgina se muestra en todas las miniaturas de pgina vinculadas al modo Plan.

Al disear un sitio, los cambios realizados en la pgina maestra actualizarn automticamente las pginas vinculadas. Las pginas maestrasfacilitan la actualizacin y el mantenimiento de un sitio. Puede actualizar una pgina maestra para cambiar la apariencia del sitio.

Puede aplicar pginas maestras a otras pginas maestras. Una pgina maestra puede contener elementos compartidos que se muestran en unapgina maestra distinta (como el pie de pgina que se describe en las secciones anteriores) y, posteriormente, puede crear pginas maestrasadicionales que heredan todos los elementos de dicha pgina maestra, adems de cualquier otro elemento que sea exclusivo de una seccin del

22

Ir al principio

sitio.

Tambin puede mover elementos copiados entre las pginas maestras mediante Edicin > Pegar en contexto.

Cuando coloque el ratn sobre el nombre de una pgina o pgina maestra, una sugerencia mostrar la jerarqua de las pginas maestrasaplicadas a dicha pgina o pgina maestra.

Realice los siguientes pasos para crear una nueva pgina maestra que herede el contenido de la pgina maestra Pie de pgina:

1. En el modo Plan, coloque el ratn sobre la miniatura de la pgina Pie de pgina y haga clic en el signo ms (+) en el lado derecho paracrear una nueva pgina maestra.

2. Aparece una nueva pgina maestra a la derecha de Pie de pgina, denominada B-Pgina maestra. Cambie el nombre de la pginamaestra: Pgina de aterrizaje.

3. Haga clic con el botn derecho en la miniatura de la pgina maestra de la copia de Pie de pgina y seleccione Pginas maestras > Pie depgina en el men contextual. Observe que al hacer esto la etiqueta [Pie de pgina] se muestra bajo la miniatura, lo que indica que lapgina maestra de aterrizaje hereda el contenido de la pgina maestra Pie de pgina (vase la Figura 34).

Figura 34. Defina la pgina maestra de aterrizaje para que herede el contenido de la pgina maestra Pie de pgina.

Es importante distinguir que la pgina maestra de aterrizaje no incluye realmente los elementos de la pgina maestra Pie de pgina, no se tratasimplemente de duplicar la pgina Pie de pgina (A-Pgina maestra). En su lugar, se ha aplicado la pgina maestra Pie de pgina a la pginamaestra de aterrizaje, lo que significa que cualquier contenido nuevo que aada a la pgina maestra Pie de pgina tambin aparecerautomticamente en la pgina maestra de aterrizaje. Si necesita editar el contenido del pie de pgina, haga doble clic en la miniatura de la pginamaestra Pie de pgina para abrirla directamente.

Despus de aadir los elementos de diseo a las pginas maestras Interior y de aterrizaje, se aplicarn las pginas maestras a las pginas delmapa del sitio. En este diseo, la pgina de inicio utiliza la pgina maestra de aterrizaje, y en el resto de las pginas del sitio se ha aplicado lapgina maestra Interior.

Si coloca el ratn sobre las miniaturas de las pginas maestras Interior y de aterrizaje, aparece la indicacin: Pgina maestra aplicada: Pie depgina.

En este sitio de ejemplo, la jerarqua de la pgina maestra solo tiene un nivel de profundidad. Sin embargo, puede crear una cadena de pginasmaestras, donde una pgina maestra que hereda otra pgina maestra completa se puede aplicar a una tercera pgina maestra, para crear losniveles de la herencia de varios niveles. La divisin de elementos de diseo es similar a la creacin de smbolos. Se recomienda crear pginasmaestras independientes para las diferentes secciones de un sitio.

4. Coloque el ratn sobre la miniatura de la pgina maestra de aterrizaje y haga clic en el signo ms (+) en el lado derecho para crear unatercera pgina maestra. Cambie el nombre a Interior.

5. Haga clic y arrastre la miniatura de la pgina maestra Pie de pgina a la nueva miniatura de la pgina maestra Interior. Observe que, alarrastrar y soltar la miniatura de la pgina maestra Pie de pgina en la miniatura de la pgina Interior, el texto azul que aparece bajo laminiatura de la pgina Interior se actualiza de [Sin pgina maestra] a [Pie de pgina].

Creacin del encabezado de la pgina maestra Interior

La pgina maestra Interior definir la apariencia de la mayora de las pginas del sitio.

1. Haga doble clic en la miniatura de la pgina maestra Interior para abrirla en modo de diseo.2. Dibuje un rectngulo de 90 pxeles de alto aproximadamente que abarque toda la anchura de la ventana del navegador. Arrastre los

manejadores laterales hasta que la visualizacin se establezca en una anchura del 100%. Alinee la parte superior del rectngulo con la partesuperior de la pgina.

3. Establezca el color de relleno del rectngulo en marrn y la anchura de trazo en 0.

23

4. Vuelva al modo Plan y haga doble clic en la miniatura de la pgina maestra Pie de pgina para abrirla en el modo de diseo. Seleccione elwidget de men completo y cpielo.

5. Vuelva a la pgina maestra Interior y pegue el widget de men. Utilice la herramienta Seleccin para arrastrarlo hasta el lado derecho delencabezado marrn.

6. Haga clic en el botn INICIO dos veces para seleccionar el elemento de men. Aplique la siguiente configuracin del panel de texto o delmen Texto del panel de control:

Fuente web: Open Sans Condensed BoldTamao de fuente: 20Color: Marrn claroAlineacin: IzquierdaTracking: 0Interlineado: 24 pxEspacio despus: 24Etiqueta de nivel de prrafo: Subttulo (h2)

Observe que todos los elementos de men se actualizan para tener el mismo formato.

7. En el panel Estilos de prrafo, cree un nuevo estilo de prrafo y llmelo: subttulo.8. En el panel Estados, seleccione el estado de rollover. Establezca el color del texto en marrn para los estados de rollover, de ratn pulsado

y activo (vase la Figura 35).

Figura 35. Establezca el resto de los estados de elementos de men para utilizar el color de texto marrn.

Solo queda un elemento para aadir al encabezado de la pgina maestra Interior.

En este momento, se ha completado la navegacin del sitio de nivel superior de la pgina maestra Interior.

1. Elija Archivo > Colocar (o use Comando+D en Mac o Control+D en Windows) para abrir el cuadro de dilogo Importar. Busque y seleccioneel archivo en la carpeta de archivos de ejemplo denominado logo-interior.png y haga clic en Aceptar.

2. Haga clic una vez en el lado izquierdo del encabezado para colocar la imagen del logotipo en la pgina. Utilice la herramienta Seleccinpara cambiar la posicin del grfico para centrarlo con el widget de men, en el centro vertical del rectngulo marrn.

3. Haga clic en Previsualizacin para ver la pgina maestra procesada en Muse (vase la Figura 36).

Figura 36. El encabezado completo se muestra en la pgina maestra Interior.

4. Haga clic en Diseo para continuar editando las pginas maestras.

24

Ir al principio

Ir al principio

Ir al principio

Creacin del encabezado de la pgina maestra de aterrizaje

A continuacin, deber rellenar la pgina maestra de aterrizaje, que define el encabezado de la pgina de inicio. El encabezado es muy similar,pero no incluye un rectngulo marrn.

En este momento, se ha completado tambin la navegacin del sitio de nivel superior de la pgina maestra Interior.

1. En modo de diseo, copie el widget de men en la pgina Interior.2. Abra la pgina maestra de aterrizaje en modo de diseo y seleccione Edicin > Pegar en contexto.3. Con el men seleccionado, mantenga pulsada la tecla Mays mientras presiona la flecha hacia abajo cuatro veces, para bajar el men

aproximadamente 40 pxeles desde la parte superior de la pgina.4. Seleccione Archivo > Colocar, y busque y seleccione el archivo de la carpeta de archivos de ejemplo denominado logo-landing.png y haga

clic en Aceptar.5. Haga clic una vez en el lado izquierdo del encabezado para colocar la imagen del logotipo transparente en la pgina. Utilice la herramienta

Seleccin y las guas inteligentes para colocar el grfico centrado con el widget de men.

Aplicacin de pginas maestras a las pginas del diseo

Si lo desea, puede hacer clic con el botn derecho en cada miniatura de pgina y seleccionar el nombre de la pgina maestra que desea aplicara cada pgina. Sin embargo, suele ser ms rpido simplemente arrastrar y colocar las pginas maestras:

Haga clic y arrastre la miniatura de la pgina maestra Interior a todas las pginas restantes del mapa del sitio. Observe que los diseos deminiaturas se actualizan a medida que se aplica cada pgina maestra.

1. Haga clic y arrastre la miniatura de la pgina maestra de aterrizaje a la miniatura de la pgina de INICIO para aplicarla. El texto azul que

aparece bajo la miniatura de la pgina de INICIO se actualiza de [Sin pgina maestra] a [Pgina de aterrizaje].

Relleno de un rectngulo con una imagen de fondo

1. En el modo Plan, haga doble clic en la miniatura de la pgina de INICIO para que se abra en el modo de diseo.

Observe que no puede seleccionar los elementos de encabezado y pie de pgina en la pgina. Se encuentran en las pginas maestras (Pginade aterrizaje y Pie de pgina ) y solo se pueden editar en esas pginas.

2. Dibuje un rectngulo que abarque toda la anchura de la pgina, establezca la visualizacin en una anchura del 100%.3. Utilice el men Relleno para hacer clic en el icono de carpeta junto a la seccin Imgenes. En el cuadro de dilogo Importar que aparece,

seleccione el archivo de la carpeta de archivos de ejemplo denominado img-salad-darker.png y haga clic en Abrir (vase la Figura 37).

Figura 37. Establezca la imagen de relleno de fondo del rectngulo.

25

Ir al principio

4. Establezca el men Encaje en Escalar para rellenar y haga clic en la posicin superior derecha de la seccin Posicin para alinear laimagen por la esquina superior derecha en la pgina.

5. Haga clic en cualquier otra parte de la pgina para cerrar el men Relleno.6. Utilice la herramienta Seleccin para arrastrar los manejadores y cambiar el tamao del rectngulo segn sea necesario. Utilice las guas

inteligentes para colocar el grfico de forma que quede centrado y alinee el borde superior de la imagen con la parte superior de la ventanadel navegador.

Aplicacin de formato y estilo a contenido de texto

A continuacin, aadir algunos marcos de texto y configurar estilos de prrafo para controlar la apariencia del texto.

Fuente web: Open Sans Condensed BoldTamao de fuente: 50Color de fuente: MarrnAlineacin: CentradoTracking: 1Interlineado: 48 pxEtiqueta de nivel de prrafo: Subttulo (h1)

Fuente web: Gentium Book Basic Bold ItalicTamao de fuente: 16Color de fuente: Marrn claroAlineacin: IzquierdaTracking: 1Interlineado: 48 pxEtiqueta de nivel de prrafo: Subttulo (h3)

1. Utilice la herramienta Texto para dibujar un marco de texto centrado debajo del rectngulo que ha creado en el rea de encabezado.2. Escriba: WELCOME TO KATIES CAF. Utilice el panel de texto o el men Texto del panel de control para configurar los siguientes

atributos:

3. Cree un nuevo estilo de prrafo y llmelo: encabezado4. Cree un segundo marco de texto debajo del encabezado y escriba: A small family-owned chain of cafs in San Francisco.5. Configure los siguientes atributos:

6. Cree un nuevo estilo de prrafo y llmelo: Subttulo serif

Normalmente, el texto del subttulo se alinea a la izquierda. Pero en este caso concreto en la pgina de inicio, lo alinear en el centro.

7. Mientras que el texto est an seleccionado, establezca la alineacin en centrado.

Observe que el panel Estilos de prrafo ahora muestra un signo ms (+) junto al nombre del estilo de prrafo. Esto indica que se haaplicado el estilo de prrafo al texto seleccionado actualmente, pero se ha cambiado al menos un atributo de estilo.

8. Coloque el ratn sobre el nombre del estilo de prrafo y aparecer una sugerencia que muestra la configuracin del texto. Todos losatributos distintos de los atributos del estilo original se muestran debajo de la lnea. En este caso, el elemento que aparece debajo de lalnea indica: alineacin: centro (vase la Figura 38).

26

Ir al principio

Ir al principio

Figura 38. Un signo ms indica que el texto utiliza un formato diferente y la sugerencia especifica cul es la diferencia entre el texto seleccionadoy el estilo de prrafo.

Diseo de un separador de pgina decorativo con elementos agrupados

Debajo de los dos marcos de texto, aadir un separador de pgina decorativo.

No es necesario establecer una etiqueta de prrafo para este marco de texto decorativo.

1. Para mostrar las guas, seleccione Ver > Mostrar guas.2. Utilice la herramienta Rectngulo para dibujar un rectngulo de 445 pxeles de anchura y 20 pxeles de altura. Colquelo de forma que

abarque la mitad izquierda de la pgina (alineado con el lado izquierdo de la cuadrcula de pgina de 9 columnas) que se extiende en elcentro de la pgina.

3. Establezca el color de relleno del rectngulo en ninguno. Establezca el color del trazo en marrn claro. En las opciones de trazo, desvinculelos campos. Establezca la anchura de trazo en 2 y todos los dems en 0, del mismo modo que ha creado una lnea para el diseo del piede pgina.

4. Presione Opcin/Alt y utilice la herramienta Seleccin para arrastrar una copia del rectngulo horizontalmente, para alinearlo con el primerrectngulo y su extremo se alinea con el lado derecho de la cuadrcula de pgina.

5. Utilice la herramienta Texto para crear un campo de texto pequeo entre los dos rectngulos, en el centro de la pgina.6. Fuera de Muse, abra el visor de caracteres para insertar un carcter especial. Busque el trmino: White Four Pointed Star (Estrella de

cuatro puntas blanca) e insrtelo en el elemento dos veces para crear dos estrellas.7. En el panel de texto, aplique la siguiente configuracin:

Fuente web: Gentium Book BasicTamao de fuente: 24Color: Marrn claroAlineacin: CentroTracking: 3Interlineado: 24 px

8. Seleccione los dos rectngulos y el marco de texto y seleccione Objeto > Grupo.

Creacin de un elemento de biblioteca reutilizable

1. Abra el panel Biblioteca seleccionando Ventana > Biblioteca.2. Haga clic en el icono de carpeta situado en la parte inferior derecha del panel Biblioteca para crear una nueva carpeta.

27

Ir al principio

3. Haga clic en el campo de la nueva carpeta y llmela: Diseos de pgina.4. Seleccione el grupo que cre en la seccin anterior. Haga clic en el botn Aadir elementos seleccionados (icono de paso de pgina) para

aadir el grupo de elementos a la carpeta. Cambie el nombre del elemento de biblioteca: Separador de pgina (vase la Figura 39).

Figura 39. Cree y asigne un nombre a un nuevo elemento dentro de la carpeta del panel Biblioteca.

Observe que se muestra una previsualizacin del grupo en la biblioteca para ayudarle a identificar elementos.

En las prximas secciones de este artculo, har clic en la carpeta de diseos de pgina del panel Biblioteca para expandirla y arrastre una copiadel separador de pgina a la pgina.

Alineacin de elementos de pgina mediante las guas de la cuadrcula de la pgina

A continuacin, dibujar tres rectngulos, utilizar las cuadrculas de columnas de la pgina para alinearlas y las rellenar con las imgenes defondo.

1. Utilice la herramienta Rectngulo para dibujar un rectngulo de aproximadamente 304 x 304 pxeles.2. Utilice la herramienta Seleccin para alinear el lado izquierdo del rectngulo con el lado izquierdo de la pgina.3. Mantenga pulsada Opcin/Alt y arrastre una copia del rectngulo al centro de la pgina con un pequeo espacio entre ellos. Presione

Opcin/Alt y arrastre el rectngulo central y coloque la segunda copia para que quede alineado con el lado derecho de la pgina.4. Vuelva a seleccionar el primer rectngulo de la izquierda. Utilice el men Relleno para establecer la imagen de fondo para utilizar el archivo

llamado img-coffee.jpg. Establezca el men Encaje en Escalar para rellenar y a continuacin, haga clic en el punto central de la seccinPosicin. Haga clic fuera para cerrar el men Relleno.

5. Repita el paso 4 para establecer el relleno de fondo del rectngulo central y los rectngulos de la derecha con la misma configuracin. Amenos que establezca el relleno del rectngulo central para utilizar la imagen img-baking.jpg y el rectngulo derecho para utilizar la imagenimg-dinner.jpg (vase la Figura 40).

28

Ir al principio

Figura 40. Alinee los tres rectngulos rellenos mediante las guas de pgina.

Aplicacin de estilo a diferentes lneas de texto dentro del mismo marco de texto

Debajo de los tres rectngulos rellenos, crear tres marcos de texto con estilo.

1. Dibuje un marco de texto que abarque las mismas tres columnas bajo el rectngulo alineado al lado izquierdo de la pgina. Escriba el textosiguiente, pulsando la tecla Retorno/Intro para crear saltos de lnea entre la primera lnea de texto y el resto:

The finest coffee & tea

We serve only premium roast coffees from around the world and offer fresh coffee for each customer. We also offer a selection of loose leafteas, everything from exotic flavors to the classics.

2. Utilice la herramienta Seleccin para seleccionar solo la primera frase. Haga clic con el botn derecho en el texto y seleccione Cambiarmays./mins. > MAYSCULAS para resaltar el encabezado del marco de texto.

3. Abra el panel Estilos de prrafo y aplique el estilo de subttulo.4. Seleccione el texto restante en el marco de texto. Utilice el panel de texto para aplicar los siguientes ajustes:

Fuente: Gentium Book BasicTamao de fuente: 16Color: MarrnAlineacin: IzquierdaTracking: 0Interlineado: 24 pxEspacio despus: 24Etiqueta de nivel de prrafo: Predeterminado (p)

5. Volver a utilizar este estilo con frecuencia, de modo que cree un nuevo estilo de prrafo denominado: cuerpo.

6. Cree un segundo marco de texto que abarque las tres columnas de la cuadrcula de pgina central, por debajo del rectngulo central.Escriba lo siguiente:

Delicious home baking

Based on Katies original award-winning recipes, we serve a full menu of baked goods. These items are made fresh each morning to ensureyou are getting the best quality possible.

7. Cambie el encabezado a maysculas. Aplique los estilos de prrafo de subttulo y cuerpo.

8. Cree un tercer marco de texto bajo el rectngulo de la derecha. Aplique estilo al texto del mismo modo que a los otros dos marcos de textodespus de escribir:

Fresh & healthy meals

With an extensive breakfast, lunch, and dinner menu, we do more than your typical caf. All our meals are made to order and contain only

29

Ir al principio

the freshest ingredients.9. Utilice la herramienta Texto para crear un nuevo campo de texto debajo de los otros tres campos de texto que abarquen las 4 primeras

columnas del lado izquierdo de la pgina. Escriba:

Introducing our seasonal cupcake

For a limited time, you can get one of our Maple Walnut Cupcakes. Based on the same ingredients that make all our cupcakes taste sogood, plus the rich and decadent flavors of maple and walnut, you wont want to pass these up.

Katie Ricks

10. Establezca el encabezado en maysculas y aplique el estilo de prrafo: subttulo.11. Seleccione las dos frases centrales y aplique el estilo de prrafo de cuerpo.12. Seleccione el nombre Katie Ricks. Utilice el panel de texto para aplicar la siguientes configuracin:

Fuente web: La Belle AuroreTamao de fuente: 42Color: MarrnAlineacin: DerechaTracking: 0Interlineado: 24 pxEspacio despus: 6

Este formato de fuente crea la ilusin de una firma.13. Utilice la herramienta Seleccin para seleccionar todo el marco de texto. En el men Relleno, establezca el color de relleno en blanco y el

regulador de opacidad en 77.

Relleno del resto de la pgina de inicio

Realice los siguientes pasos para aadir el contenido al final de la pgina de inicio.

A continuacin, volver a utilizar algunos de los elementos que ha creado anteriormente, copindolos.

OUR STORY

Katie's Caf is a small family-owned chain of cafs in San Francisco, California, USA. The original Katie's location in Noe Valley opened it's doorsin the summer 2006 after founder Katie Ricks decided to spread her love of delicious baked goods and quality coffee to the neighborhood sheresided in.

Katie's in Noe expanded its menu to include full meals in addition to baked goods in 2007. Soon afterward in spring 2008 Katie's opened a newlocation in Laurel Heights just north of the University of San Francisco. A third location in Cole Valley opened in winter 2011.

Every item served at Katie's Caf is created from Katie's own recipes, painstakingly crafted through years of baking for friends and family.

Y por ltimo, aadir un conjunto ms de marcos de texto y rectngulos con relleno en la parte inferior.

AWARDS

Katie's Caf has won several awards in the annual San Francisco Times Best of SF competition, most notably Caf of the Year in 2010.

Katie's was also recently featured in an episode of No Fear: The Culinary Travels of Andrew Bourdin; Andrew pronounced her Abomination Untothe Lord Cake "a life-changing experience that has ruined me for all other cakes."

A continuacin, crear un rectngulo con relleno.

1. Dibuje un rectngulo que abarque toda la pgina debajo de los tres marcos de texto y establezca la visualizacin en una anchura del 100%.2. Utilice el men Relleno para rellenar el rectngulo con una imagen de fondo denominada img-cupcakes.jpg. Establezca el men Encaje en

Escalar para rellenar y haga clic en la posicin superior izquierda de la seccin Posicin para alinear la imagen por la esquina superiorizquierda en la pgina.

3. Haga clic en cualquier otra parte de la pgina para cerrar el men Relleno.4. Utilice la herramienta Seleccin para arrastrar los manejadores y cambiar el tamao del rectngulo segn sea necesario. Debe estar

centrado, con una visualizacin del 100% y se debe alinear el borde superior del rectngulo a aproximadamente 1214 pxeles desde laparte superior de la pgina.

30

5. Haga clic con el botn derecho en el rectngulo y seleccione Organizar > Enviar detrs. El marco de texto con la firma que creanteriormente debe aparecer ahora en la parte superior, y su fondo semitransparente permite que la imagen de la magdalena se muestre atravs de l.

1. Desplcese hacia arriba y seleccione el marco de texto de encabezado: WELCOME TO KATIES CAF.2. Presione Opcin/Alt y arrstrelo debajo del rectngulo relleno con magdalenas. Utilice la herramienta Texto para escribir sobre el

encabezado y reemplazar el texto con: ABOUT KATIE'S CAF.3. Abra el panel Biblioteca. Expanda la carpeta de diseos de pgina y arrastre una copia del separador de pgina a la pgina que aparece

debajo del marco de texto. Centre ambos elementos en la pgina.4. Dibuje un rectngulo de aproximadamente 450 pxeles de anchura por 300 pxeles de alto. Rellene el rectngulo con la imagen de fondo

denominada img-cookie.jpg. Establezca el fondo en Escalar para rellenar y haga clic en la posicin central.5. Alinee el rectngulo con el lado izquierdo de la pgina.

6. Dibuje un marco de texto a la derecha del rectngulo de galletas, de 450 pxeles de anchura aproximadamente. Escriba o pegue el texto

siguiente:

1. Aplique el estilo del subttulo al encabezado y el estilo del cuerpo al resto del cuadro de texto.2. Alinee el borde derecho del marco de texto con el lado derecho de las guas de pgina.

1. Desplcese hacia abajo y dibuje un marco de texto debajo del rectngulo de galletas, de 450 pxeles de anchura aproximadamente. Escribao pegue el texto siguiente:

1. Aplique el estilo del subttulo al encabezado y el estilo del cuerpo al resto del cuadro de texto.2. Alinee el borde izquierdo del marco de texto con el lado izquierdo de las guas de pgina.

1. Dibuje un rectngulo de 450 pxeles de anchura aproximadamente.2. Establezca el trazo y el color de relleno del rectngulo en ninguno. Establezca el relleno de fondo para que se utilice la imagen img-

breakfast.jpg, con Relleno establecido en Escalar para rellenar y la posicin definida en superior izquierda.3. Alinee el rectngulo con la parte derecha de las guas de pgina, debajo del marco de texto Nuestra historia.4. Abra el panel Biblioteca y expanda la carpeta FontAwesome. Arrastre el elemento de iconos de direccin hasta la parte inferior derecha de

la pgina, justo encima de la gua de pie de pgina y alineado con el lado derecho de la pgina.5. Haga clic en el botn de flecha azul para abrir el men Opciones. Seleccione la opcin de crculo con flecha hacia arriba del men.

Establezca el color del texto en marrn (vase la Figura 41).

Figura 41. Configure el icono de fuente Awesome y aplique el estilo que coincida con el diseo del sitio.

6. Con el icono de flecha hacia abajo seleccionado, utilice el men de Hipervnculos para seleccionar el enlace de anclaje denominadosuperior (vase la Figura 42).

31



Figura 42. Establezca el vnculo para que apunte al anclaje denominado superior que cre en la pgina maestra.

7. Seleccione Archivo > Vista previa de pgina en navegador. Desplcese por la pgina para ver el contenido de la misma. Haga clic en elicono de flecha hacia arriba para volver a la parte superior de la pgina.

8. Haga clic en Diseo para continuar editando la pgina de inicio. Si lo desea, seleccione Ver > Ocultar guas para ocultar las guas de lapgina.

En la siguiente seccin de este tutorial, el Captulo 4, aprender a aplicar efectos de desplazamiento para controlar el movimiento y crear unefecto interactivo en la pgina de inicio. Tambin aprender a crear un widget de men manual para crear navegacin secundaria en la pgina demen. Y, a continuacin, aplicar anclajes a la pgina y vincular los elementos de men a los anclajes, antes de aadir un segundo menoculto que aparece cuando el visitante se desplaza por la pgina.

32

Captulo 4

Ir al principio

Aplicacin de efectos de desplazamiento a rectngulos con imgenes de fondoCreacin de la pgina de menConfiguracin de un widget de men manualTrabajo con regiones de etiquetas de anclaje y estados activos Adicin de enlaces de anclaje a los elementos de menAdicin de las cinco secciones a la pgina del menColocacin del contenido del texto para completar el contenido del men para cada seccinAdicin de efectos de desplazamiento a los encabezados de seccin en la pgina MenAdicin de un men "anclado" en el encabezado mediante los efectos de desplazamiento

En el captulo 3 del tutorial sobre creacin del primer sitio web con Muse, se agrega y edita una pgina maestra para agregar elementos denavegacin del sitio mediante un widget de men horizontal. Ha aprendido a aplicar estilo a los elementos de men y a las etiquetas utilizando elpanel Estados. Tambin se aprende a trabajar con elementos de la biblioteca y a crear elementos reutilizables que puede arrastrar y soltar en laspginas.

Aplicacin de efectos de desplazamiento a rectngulos con imgenes de fondo

Existen diversos tipos de efectos de desplazamiento que se pueden aplicar en Muse, incluidos los efectos de movimiento, opacidad, proyeccinde diapositivas y desplazamiento de Edge Animate. Puede aplicar efectos de desplazamiento mediante el panel Efectos de desplazamiento ytambin controlar el movimiento mediante la ficha Desplazamiento del men Relleno.

1. Desplcese hacia arriba y seleccione el rectngulo grande alineado con la parte superior de la pgina.2. Seleccione Ventana > Efectos de desplazamiento. En el panel Efectos de desplazamiento, especifique los ajustes siguientes (vase la

Figura 43).

Active la casilla de verificacin MovimientoDeje los dos campos de la seccin Movimiento inicial con el valor 0Establezca el valor 0 px como posicin clave (el campo central)Active la direccin en la seccin Movimiento final y establezca el valor 0.5Deje la direccin horizontal con el valor 0

Figura 43. Aplique la configuracin de movimiento del efecto de desplazamiento al rectngulo en el encabezado de la pgina.

Esta configuracin indica que una vez que la pgina se ha desplazado ms all de la posicin clave (0 pxeles, el extremo superior de la pgina),el rectngulo debe desplazarse hacia arriba a una velocidad 0,5 veces superior al resto de los desplazamientos de pgina.

33

Ir al principio

Ir al principio

Active la casilla de verificacin MovimientoActive la direccin hacia arriba en la seccin Movimiento inicial y configrelo en 0,5Deje la direccin horizontal con el valor 0Establezca el valor 1114 px como posicin clave (el campo central) Active la direccin hacia arriba en la seccin Movimiento final y establezca el valor en 0,5Deje la direccin horizontal con el valor 0

3. Seleccione Archivo > Vista previa de pgina en navegador. Desplcese hacia abajo en la pgina y observe que el rectngulo superior en elencabezado se mueve a la mitad de velocidad que el resto de elementos de la pgina.

4. Vuelva a Muse y desplcese hacia abajo para seleccionar el rectngulo grande que incluye la imagen de magdalenas.

5. Abra el panel Efectos de desplazamiento (Ventana > Efectos de desplazamiento), e introduzca lo siguiente (vase la Figura 44).

Figura 44. Aplique efectos de desplazamiento para controlar el movimiento del rectngulo a medida que se desplaza por la pgina.

6. Vuelva a seleccionar Archivo > Vista previa de pgina en navegador. Desplcese hacia abajo en la pgina y observe que los dosrectngulos con una anchura del 100% se mueven a la mitad de velocidad que el resto de elementos de la pgina.

7. Vuelva a Muse. Haga clic en la X para cerrar la ficha de la pgina Inicio en el modo de diseo.

Creacin de la pgina de men

La pgina de men incluye una serie de elementos para el desayuno, almuerzo, cena y postres, as como bebidas. Para navegar por la pgina,los visitantes utilizan una barra de mens con enlaces de anclaje para acceder a cada seccin.

1. Abra la pgina Men en el modo de diseo. Se muestran las guas para ayudarle a disear la pgina.2. Utilice la herramienta Texto para dibujar un marco de texto que aparezca centrado debajo del rea de encabezado.3. Escriba las palabras: FRESH LOCAL INGREDIENTS & INNOVATIVE RECIPES4. Aplique el estilo de prrafo: encabezado.5. Utilice la herramienta Seleccin para cambiar el tamao del marco de texto, de modo que ocupe toda la pgina. En el sitio de ejemplo, el

texto se ajusta despus del signo & a una segunda lnea. 6. Arrastre una copia del separador de pgina del panel Biblioteca y cntrela debajo del texto.

Configuracin de un widget de men manual

Al disear la pgina maestra de pie de pgina, se aade un widget de men que se vincula a todas las pginas del sitio. A continuacin, aadirel widget de men manual que se vincula a distintas secciones de la misma pgina.

34

Tipo de men: ManualDireccin: HorizontalEditar conjuntamente: ActivadoTamao de elemento: Espaciado uniformeMostrar icono a la izquierda: DesactivadoMostrar etiqueta: ActivadoMostrar icono a la derecha: Solo submensPosicin de las partes: Horizontal, Centrado

1. En la Biblioteca de widgets, expanda la seccin de mens y arrastre un widget de men horizontal a la pgina.2. Utilice la herramienta Seleccin para cambiar el tamao de anchura de todo el men, de manera que abarque a las 5 columnas centrales de

las guas de la cuadrcula.3. Haga clic en el botn de flecha azul para abrir el panel Opciones. Aplique la siguiente configuracin (vase la Figura 45):

Figura 45. Establezca el Tipo de men en Manual en el panel Opciones.

4. Haga clic en otra parte para cerrar el panel Opciones y observe las actualizaciones del men a un solo elemento de men con la etiqueta:[Nombre]

5. Haga clic dos veces en el elemento de men, una vez para seleccionar todo el widget de men, y de nuevo para seleccionar el elemento demen. Utilice la herramienta Texto para seleccionar la etiqueta del marcador de posicin y escriba: BREAKFAST.

6. Cambie a la herramienta Seleccin y pase el ratn sobre el elemento de men. Haga clic en el signo ms (+) que aparece a la derecha delelemento de men BREAKFAST para crear un nuevo elemento de men. Utilice la herramienta Texto para cambiar el nombre del nuevobotn: LUNCH.

7. Repita el paso 6 para aadir tres elementos de men ms y para cambiarles el nombre: DINNER, DESSERT y DRINKS.8. Mientras se selecciona uno de los elementos de men, abra el panel Estados. Seleccione el estado Normal y establezca el color de relleno

del elemento de men en Ninguno. A continuacin, haga clic en cada uno de los estados restantes (Rollover, Ratn pulsado y Activo) yestablezca su color de relleno en Ninguno.

9. Seleccione el estado Normal y establezca el color de trazo en marrn claro. En las opciones de Trazo, desvincule los cuatro campos yestablezca el valor 0 en todos ellos, excepto el trazo de lado derecho que debe establecerse en 2. Esto crea separadores entre cadaelemento de men.

10. En el panel Opciones, deseleccione la opcin: Editar conjuntamente. Seleccione el elemento de men de BEVERAGE y el estado Normal y,a continuacin, establezca el color de trazo en Ninguno. Repita este paso para el estado Activo. A continuacin, vuelva a activar la opcinEditar conjuntamente.

11. Seleccione el estado Normal otra vez. Aplique el estilo de prrafo de subttulo. Utilice el panel Texto para realizar los siguientes cambios alformato de texto:

Fuente: Open SansTamao: 16Alineacin: CentradaEspacio despus: 0El estilo del subtitular ahora muestra un signo ms (+) junto al mismo, lo que indica que ha cambiado. Si lo desea, puede crear un nuevoestilo de prrafo, pero es conveniente dejarlo como est.

12. Los estados Rollover y Ratn pulsado se actualizan automticamente. Repita el paso 9 para aplicar el mismo formato al estado Activo.13. Utilice la herramienta Seleccin para alinear el men, de modo que quede centrado verticalmente y a aproximadamente 52 pxeles por

35

Ir al principio

debajo del separador de la pgina.

En este momento, el men no tiene ningn vnculo. Los widgets de men manuales deben configurarse para utilizar los vnculos que desee, yaque no heredan los vnculos de la pgina del modo Plan.

Trabajo con regiones de etiquetas de anclaje y estados activos

La pgina Men contendr un total de cinco secciones diferentes con elementos de alimentacin y bebida, separados por rectngulos grandescon una anchura del 100%. Por consiguiente, no se puede mostrar todo el contenido de la pgina sin desplazarse hacia abajo. Este es unaspecto importante a la hora de trabajar con las etiquetas de anclaje y los efectos de desplazamiento. Es posible que parezca que ambasfunciones del sitio no funcionan si la pgina no es lo suficientemente larga como para que el visitante pueda desplazarse hacia abajo.

Imagine que aadir etiquetas de anclaje es como fijar un marcador en algn lugar de la pgina. Cuando los visitantes hacen clic en un enlace aese anclaje, el enlace se desplazar hacia abajo hasta donde se encuentra el marcador.

Comenzar creando cinco anclajes denominados: breakfast, lunch, dinner, dessert y drinks, que se corresponden con cada una de las cincoregiones de la pgina. Siga estos pasos:

1. Haga clic en el botn Anclaje en el panel Control para cargar la herramienta Anclaje (vase la Figura 46).

Figura 46. Cargue el cursor de colocacin para el primer anclaje haciendo clic en el botn Anclaje.

2. Haga clic una vez cerca de la parte superior izquierda de la pgina, justo debajo del separador de la pgina, para colocar el anclaje.3. En el cuadro de dilogo Cambiar el nombre de un anclaje que aparece, introduzca el nombre del anclaje: breakfast. Utilice la herramienta

Seleccin para moverlo a aproximadamente 303 pxeles desde la parte superior de la pgina (vase la Figura 47).

Figura 47. Asigne un nombre al anclaje para el men Breakfast cerca de la parte superior de la pgina.

4. Repita estos pasos. Esta vez, haga clic en el botn Anclaje cuatro veces y, a continuacin, haga clic en la pgina para colocar los anclajescon nombre en las siguientes posiciones hacia abajo en la pgina:

lunch: 1255 pxdinner: 1731 pxdessert: 2798 pxdrinks: 3200 px

36

Nota:

Ir al principio

Ir al principio

Si lo desea, puede utilizar el panel Transformar para seleccionar cada anclaje y establecer el valor en Y.

La cantidad de espacio entre el primer anclaje y la primera instancia del contenido vinculado (el widget de men manual) define el reaactiva que hace que el estado activo cambie en cada regin. Por ejemplo, si el primer anclaje se coloca 100 pxeles por encima del men, elestado activo de los elementos de men para cada actualizacin de men 100 pxeles antes del men aparece cuando el visitante se desplazahacia abajo en la pgina.

A continuacin, vincular los elementos de men a las etiquetas de anclaje para crear la navegacin, de modo que los visitantes puedan saltarhacia abajo en la pgina para leer cada men.

Adicin de enlaces de anclaje a los elementos de men

1. Haga clic en el elemento de men BREAKFAST dos veces para seleccionarlo. El indicador de seleccin muestra las palabras "Elemento demen".

2. Utilice el men Hipervnculos para seleccionar la etiqueta de anclaje de Breakfast en la pgina Men (vase la Figura 48).

Figura 48. Defina el vnculo para el botn BREAKFAST a la etiqueta de anclaje de Breakfast.

3. Repita el paso 2 para aadir los anclajes a los cuatro elementos de men restantes.4. Seleccione Archivo > Vista previa de pgina en navegador para comprobar el men y ver cmo salta a cada seccin de la pgina. Vuelva a

desplazarse hacia arriba para hacer clic en cada uno de los botones.

Resulta algo tedioso seguir desplazndose hacia arriba manualmente, as que posteriormente aadir los botones para volver a la parte de arribay un men oculto con efectos de desplazamiento que permitir que un segundo widget de men permanezca en el rea de encabezado.

5. Vuelva a Muse para continuar editando la pgina del men.

Adicin de las cinco secciones a la pgina del men

Esta pgina utiliza un diseo similar al de la pgina Inicio, con rectngulos que tienen una anchura del 100% y que tienen efectos dedesplazamiento y marcos de texto con estilo.

Los ttulos de la seccin ya se han completado. Si lo desea, haga clic en Previsualizar para ver cmo puede hacer clic en los botones de flechap

adobe muse manual de referencia

Documents