PDF de programación - ADOBE MUSE Creación del primer sitio web

ADOBE® MUSE®
Creación del primer sitio web

Tabla de contenido

Capítulo 1

Instalación del software y configuración del proyecto de ejemplo
Creación del mapa del sitio
Edición de la página maestra A
Configuración de la paleta de colores y cambio de nombres de muestras en el panel Muestras
Trabajo con elementos con una anchura del 100%
Trabajo con botones de estado y botones de Photoshop colocados
Configuración de las opciones de trazo de un rectángulo para crear líneas

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. En la Parte 1 de Creación de su primer sitio web con Adobe Muse se incluyen instrucciones para ayudarle a comenzar a trabajar con
Muse. Aprenderá a trabajar con páginas maestras, widgets, imágenes colocadas y vínculos. Mientras trabaja en este tutorial podrá ver en todo
momento la apariencia que tendrá el sitio una vez terminado consultando el sitio web activo de Katie's Café.

Instalación del software y configuración del proyecto de ejemplo

Ir al principio

1. Descargar e instalar la última versión 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 sección General, seleccione el tema de color deseado para el espacio de trabajo y

haga clic en OK (véase 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 diálogo Nuevo sitio. Utilice esta interfaz para editar la configuración que debe aplicarse a todo el sitio.
6. Defina el número de columnas en 9. En la sección Márgenes, defina los márgenes superior e inferior en 0 cuando se desvinculan los
campos. Defina los márgenes derecho e izquierdo en 4. En la sección Relleno, establezca el relleno superior e inferior en 0. Defina la
anchura de la página en 960 y la altura mínima en 872 (véase la Figura 2).

1 Figura 2. Actualice el número de columnas en el cuadro de diálogo Nuevo sitio.

Utilice el menú Resolución para elegir entre las opciones Estándar y HiDPI (2x). Esta configuración permite definir la calidad del resultado

Nota:
de los activos cuando se publica o exporta un sitio Muse. Para obtener más información, consulte Creación de sitios web de alta resolución.

En este tutorial, aprenderá a crear su primer sitio web en Muse para ordenadores de sobremesa. Mantenga el menú Diseño inicial establecido en
Ordenador, como se encuentra de forma predeterminada. Recuerde que cuando desee crear un sitio web con diseños alternativos para
smartphones y tablets, puede usar este menú para elegir el diseño con el que desea trabajar en primer lugar.
La opción etiquetada como Pie de página adhesivo está activada de forma predeterminada. Hace que el pie de página permanezca en la posición
deseada, incluso si la ventana del navegador es mucho mayor que el diseño de la página web, como ocurre en una pantalla de cine de Apple
(véase la Figura 3).

Figura 3. La opción Pie de página adhesivo está activada de forma predeterminada.

Cuando la opción Pie de página adhesivo se encuentra activada, el contenido del pie de página queda alineado con la parte inferior de la ventana
del navegador, independientemente de la resolución y de las dimensiones del monitor de escritorio del visitante (véase la Figura 4).

2 Figura 4. Comparación de un sitio activado alejado que tiene la opción Pie de página adhesivo activada (izquierda) y un sitio que tiene dicha
opción desactivada (derecha).

En este ejemplo de proyecto de sitio (y en la mayoría de los casos) deberá mantener la opción Pie de página adhesivo activada en el cuadro de
diálogo Nuevo sitio.
Nota: la carpeta de archivos de ejemplo katiesCafe contiene una versión final del proyecto de ejemplo denominada katiescafe-final.muse. Si lo
desea, puede hacer doble clic en la versión final del archivo .muse para abrirlo después de guardar su versión del proyecto como
katiesCafe.muse. Adobe Muse le permite abrir varios proyectos de sitio a la vez, por lo que puede revisar el archivo katiescafe-final y utilizarlo
como referencia mientras continúa con estas instrucciones.
En la siguiente sección, empezará a añadir páginas nuevas al sitio.
7. Haga clic en OK para guardar los cambios y cerrar el cuadro de diálogo Nuevo sitio.
8. Seleccione Archivo > Guardar sitio. En el cuadro de diálogo Guardar archivo de Adobe Muse como, introduzca un nombre para el sitio:

katiesCafe.muse. Vaya a la ubicación en la que desee guardar este proyecto de ejemplo (como la carpeta katiesCafe del escritorio) y haga
clic en Guardar.

Creación del mapa del sitio

Ir al principio

Un mapa del sitio es una lista estructurada de las páginas que existen en la jerarquía de un sitio web. Puede crear páginas que estén en el mismo
nivel (sin subpáginas) o puede crear mapas del sitio que contengan niveles diferentes de páginas. (Por ejemplo, un sitio más grande puede tener
una página Acerca de que contenga dos subpáginas denominadas Nuestro objetivo y Nuestro personal). Muse facilita la creación y reorganización
de páginas en el orden que prefiera, y nunca tendrá que preocuparse por vínculos rotos. Sin embargo, es importante dedicar algún tiempo a
organizar el contenido de un sitio nuevo, definir qué páginas son necesarias y decidir cómo presentar la información del sitio. En un proyecto real,
los procesos de finalizar las diferentes secciones del sitio y elegir el orden de las páginas forman parte de la fase de planificación previa. Para
obtener más información, consulte Creación del mapa del sitio.
Después de cerrar el cuadro de diálogo Nuevo sitio, se le redireccionará automáticamente a la vista Plan de Muse. De forma predeterminada,
todos los sitios nuevos contienen una página web (denominada Inicio) que está vinculada a una página maestra (denominada A-Página maestra).
Puede ponerle el nombre que desee a ambas.
Para crear una experiencia coherente, debe colocar en las páginas maestras los elementos repetitivos del sitio, como el encabezado, el pie de
página y la navegación del sitio. Mediante esta estrategia, al crear el diseño del sitio solo tendrá que añadir el contenido exclusivo de las páginas
individuales.
Este proyecto de ejemplo es un sitio pequeño que contiene un total de cinco páginas, incluyendo la página de inicio. Siga los pasos que se
describen a continuación para agregar páginas nuevas:

Al hacer clic en el icono de signo más (+) situado debajo de una miniatura de página, se crea una página de subnivel para ampliar una
sección con páginas relacionadas con un tema específico.

En este punto, el mapa del sitio tiene un total de cinco páginas: home, food, events, about y visit [inicio, comida, eventos, acerca de y visita]
(véase la Figura 5).
1. Pase el cursor por encima de la miniatura de la página de inicio y haga clic en el icono de signo más (+), situado a la derecha de dicha
miniatura de la página de inicio para crear otra página en el mismo nivel que la primera. Haga clic en el campo de etiqueta debajo de la
página nueva y póngale un nombre: food (comida).

2. Haga clic en el icono de signo más (+) situado a la derecha de la miniatura de la página de food (comida) para crear otra página nueva.

Haga clic en la etiqueta y cambie el nombre de la página: eventos. Haga clic en el icono de signo más (+) situado a la derecha de la
miniatura de página de eventos para crear una página nueva. Introduzca el nombre la página nueva: acerca de. Repita esta operación de
nuevo para crear una página nueva más en el mismo nivel que la página de inicio y póngale nombre: visit (visita).

3 Figura 5. Cree un total de cinco páginas en el mapa del sitio.

Este sitio de ejemplo contiene cinco páginas en el mismo nivel. Sin embargo, puede crear páginas de subnivel para organizar las páginas

Nota:
según desee. Las páginas de subnivel suelen utilizarse para crear diferentes secciones del sitio. Si crea más de una página maestra, puede
hacer clic con el botón derecho del ratón (o pulsar la tecla Control y hacer clic) en las miniaturas de página en el Modo de plan para establecer un
vínculo a una página maestra concreta. La primera vez que cree un sitio nuevo, las páginas se vincularán automáticamente a A-Página maestra.

El Modo de plan proporciona herramientas para estructurar un sitio y generar el mapa del sitio. Si desea cambiar la organización del sitio, puede
ajustar la disposición de páginas arrastrando las miniaturas de página del mapa del sitio.
3. Pase el ratón por encima de la miniatura de página GALLERY y haga clic en el signo más (+) situado debajo de él. Haga clic en el campo

de la nueva página secundaria y llámelo: Gallery-fullscreen (véase la Figura 6).

Figura 6. Agregue una nueva página de subnivel al mapa del sitio de la sección de la galería.

Después 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 diseño: Ordenador, Tablet y Móvil. En este proyecto
de ejemplo, solo se creará un diseño de escritorio para visualizar el sitio en pantallas de ordenador. Los diseños Tablet y Móvil muestran un icono
de signo más (+) junto al nombre, lo que indica que aún no se han creado (véase la Figura 7).

Figura 7. Los botones de diseño le permiten crear y desplazarse entre tres diseños alternativos para el sitio.

Además de hacer clic en los botones de diseño para desplazarse entre los diseños del sitio, también puede utilizar atajos de teclado para
alternar entre los planes de sitio cuando haya más de un diseño:

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 (Wi