En este post aprenderás cómo empezar a utilizar Muse y definir los elementos de la página principal, los botones de Photoshop e hipervínculos. A medida que trabajes a través de este tutorial podrás ver cómo quedará la web final en cualquier momento, mediante la revisión en vivo de la página web.

 

Instalación del software y configuración del proyecto

  1. Descarga e instala Muse (la aplicación de AIR, 5.5MB)
  2. Descargar los archivos de ejemplo (ZIP, 3.8MB)
  3. Descomprimir el archivo ZIP y guardar la carpeta con el nombre FirstMuseSite en tu escritorio
  4. Lanzar Muse. La pantalla de bienvenida. Selecciona Crear Nuevo sitio> (ver Figura 1).

Comenzando con el sitio web

adobe-muse-comenzar

Aparece la caja de diálogo Nuevo sitio. Más tarde, cuando se abre el mismo cuadro de diálogo mientras se está trabajando, también se le llama el cuadro de diálogo Propiedades del sitio. Utiliza esta interfaz para editar las configuraciones que se aplican a todo el sitio. Estableceremos el ancho de página a 960px. y estableceremos el campo Altura mínima a 960 px. Establece el número de columnas en 9. En la sección Relleno, define el margen superior a 18 px. e inferior a 0 px. Estableceremos todos los márgenes a 20 px. Escribiremos los números en los campos o haremos clic en las flechas arriba y abajo al lado de cada campo para aumentar o disminuir los valores actuales. Haz clic en Aceptar.

Nota: Al editar un sitio, puedes acceder a este panel, en cualquier momento seleccionando Archivo> Propiedades del sitio. Sin embargo, es una buena práctica establecer las dimensiones en el primer momento, cuando empezamos un proyecto, del mismo modo que a la hora de establecer una mesa de trabajo, un documento o un lienzo.

Selecciona el menú Archivo> Guardar. En el archivo Guardar como cuadro de diálogo, escribe un nombre para el sitio: MyFirstSite.muse. Ve a la ubicación donde deseas guardar este proyecto de ejemplo (como la carpeta FirstMuseSite en el escritorio). Haz clic en Guardar.

Nota: La carpeta FirstMuseSite contiene una versión final del proyecto de ejemplo denominado katies-cafe.muse. Si lo deseas, puede hacer doble clic en el archivo existente. Musa para abrirlo después de guardar la versión de su proyecto como MyFirstSite.muse. Muse le permite abrir múltiples proyectos de sitios a la vez, así que usted puede revisar el archivo katies-cafe.muse y lo utilizan como una referencia que usted lo sigue con estas instrucciones.

Las cargas vista en planta. La primera vez que crear un nuevo sitio, Muse genera automáticamente una página de inicio (la página de índice), que está vinculada al diseño de páginas maestras.

Para crear una experiencia consistente, se le coloque elementos repetidos de sitio, como el encabezado, pie de página y la navegación del sitio, en las páginas principales. Con esta estrategia, sólo tendrá que añadir el contenido único a las diferentes páginas a medida que construye el diseño del sitio.

 

Edición de páginas maestras para añadir elementos que son comunes en todas las páginas webpagina-maestra-adobe-muse

En esta sección, el diseño de la página principal del sitio, que contiene el estilo artístico e identidad de la web, se enlazará al resto de páginas del sitio automáticamente.

En muchos sentidos Muse se comporta como una herramienta de diseño, sin embargo, este programa genera estándares de HTML, JavaScript y CSS para crear páginas web. Cuando eliges un estilo, como redondeos, o aplicar un efecto, como un color de relleno de degradado, Muse no crea una forma vectorial o una cuadrícula de píxeles. El resultado final publicado es un completo y funcional basado en estándares web.

En la vista de plano, haz doble clic en la página principal para abrir el sitio en una pestaña llamada vista Diseño. El archivo A-Master se abre en su propia pestaña en la parte superior del espacio de trabajo.

Mira en la esquina superior izquierda del panel de control para localizar el indicador de selección. Por el momento, cuando nada más se ha seleccionado, el indicador de selección muestra la Página, es decir, sólo la página en sí se selecciona. Al hacer clic en los objetos de la página, como una imagen, en la pantalla se muestra Imagen. Es muy útil saber qué elemento está seleccionado en cada momento, de manera que puedes trabajar prestando atención al indicador de selección para asegurarte de que está seleccionando el elemento que deseas controlar.

Para seleccionar toda la página, haz clic en el área gris a la izquierda o a la derecha de la página. El indicador de selección se mostrará la Página. Aunque la página está seleccionada, utiliza los menús de la barra de control para actualizar la configuración de color de relleno y trazo. Ajusta el color de relleno de la página a blanco y establece el ancho de trazo a 0px. Configura el navegador de color de relleno a blanco. Selecciona la herramienta Rectángulo

Haz clic y arrastra la herramienta Rectángulo en toda la anchura de la página, cerca de la parte superior, para crear un contenedor. Puesto que has dibujado un rectángulo, se selecciona automáticamente. (Puedes ver el nombre del elemento seleccionado en el indicador de selección en la esquina superior izquierda de la barra de control). En este caso, para el restándulo establece el ancho del trazo del rectángulo a cero, escribe 0 en el campo o haz clic una vez en la flecha hacia abajo en el menú de ancho del trazo.

Usando los tiradores de transformación de un rectángulo seleccionado, puedes controlar su posición, forma, rotación y tamaño. Cuando un rectángulo o una imagen estan seleccionados, puedes añadir efectos, como sombras, biseles, y brillos a través del menú Efectos en la barra de control. Si lo deseas, también puedes cambiar la transparencia del elemento seleccionado mediante el ajuste del valor numérico a un valor inferior a 100 en el control de opacidad.

 

Configuración de una imagen de fondo como un relleno en mosaico para una forma de rectángulofondo-adobe-muse

Utiliza el menú de relleno (que se encuentra inmediatamente a la izquierda del menú Color de relleno) para establecer una imagen de fondo como un relleno. Vamos a usar una imagen de mosaico que se forme por partes y se descargue con rapidez cuando el visitante accede a la página. Haz clic en el icono de la carpeta junto a la imagen. En el cuadro de diálogo Abrir que aparece, busca el archivo en la carpeta llamada FirstMuseSite y haz clic en header.jpg y Seleccionar.

Utiliza el menú de montaje para fijar la imagen de fondo de mosaico horizontal. Los contenedores rectangulares con elementos de imagen en mosaico permiten llenarlos y crear páginas flexibles en las que cambiar el tamaño del rectángulo con las dimensiones que mejor se adapten al diseño y sin problemas, los mosaicos de la imagen de fondo se adaptarán a la perfección.

Selecciona el rectángulo y arrastra la transformación del centro de la parte inferior del mango hacia abajo para mostrar toda la altura de la imagen de cabecera, incluyendo el borde festoneado. Arrastra dos asas laterales para ampliar su anchura. Coloca el rectángulo para alinearlo con la parte superior de la página.

Cuando se publica el sitio, la imagen original que se establece como un relleno de mosaico se carga sólo una vez por el explorador y puedes cambiar el tamaño del rectángulo para cubrir grandes áreas de la página cuando sea necesario sin afectar a la velocidad de descarga o el rendimiento de un sitio.

Vamos a usar un proceso similar para crear el pie de página.

Dibujar un rectángulo con la herramienta rectángulo que abarque la anchura de la página y sea de unos 300 píxeles de alto, cerca de la parte inferior de la página. Mientras que el rectángulo está seleccionado, establecer el ancho de trazo a 0 px. Utilizar el menú de relleno para establecer la imagen de fondo footer.jpg. En el menú de montaje, escoger la opción de azulejos, baldosas, lo que hace que la imagen en mosaico se ajuste horizontal y verticalmente. Arrastra los selectores de transformación del rectángulo para colocarlo a la parte inferior de la zona visible, y ajusta la anchura de intersección con los lados izquierdo y derecho de la página. (Verás que temporalmente aparece un borde rojo que indica cuando el rectángulo se ajusta a modo de ancho de 100%). Esta característica te permite crear elementos de diseño que se mostrarán en toda la anchura de la ventana del navegador, no importa cuán amplio sea el tamaño del navegador del visitante.

Utiliza la herramienta Rectángulo para dibujar otro recipiente rectángulo que abarca toda la anchura de la página, cerca (y superpuesto) del borde superior del rectángulo existente. Ajusta el ancho del trazo a 0 px. Ajusta el color de relleno a ninguno. Utiliza el menú de relleno para seleccionar el archivo llamado bottom_border.png como imagen de fondo y escoge la opción de mosaico horizontal. Utiliza los selectores de transformación para cambiar el tamaño y la posición del rectángulo para colocarlo a lo largo de la parte inferior de la página, de manera que se extienda por toda la anchura. Expande su altura para mostrar todo el borde festoneado del gráfico. Este archivo PNG tiene un fondo transparente, que coge el efecto del color de relleno blanco de la página que se muestra detrás de él.

 

Colocando una sola imagen en la página

En esta sección, vamos a usar una técnica diferente para añadir más imágenes a la página. Esta vez, en lugar de establecer imágenes de fondo como el relleno de los contenedores rectangulares, colocaremos las imágenes directamente en la página. Elige Archivo> Colocar.

En el cuadro de diálogo Abrir que aparece, busca y selecciona el archivo con el nombre footer_content.png que se encuentra en la carpeta de archivos de muestra en el escritorio. Haz clic en Seleccionar. Haz clic una vez (para colocar el gráfico en su tamaño original) en el área de pie de página, y luego usa la herramienta de selección y las Guías inteligentes para centrar el contenido en el medio de la página.

El pie de página se ha completado. Pero hay una tarea más que hacer antes de pasar a las áreas de página. Selecciona los tres puntos en el pie de página:

El rectángulo que contiene footer.jpg

El rectángulo que contiene bottom_border.png

La imagen de archivo colocada llamada footer_content.png

Cuando los tres elementos están seleccionados, o bien selecciona la casilla de verificación junto a pie de página en la barra de control (comprobando que está marcada) o el botón derecho del ratón (Control-clic) en cada elemento y elige Elemento pie de página en el menú contextual que aparece. Esto es importante para asegurar que estos tres elementos se asignan como elementos de pie de página y permanecerán colocados por debajo del contenido de la página.

 

Colocar un botón de Photoshop

A continuación, aprenderás cómo hacer una imagen del botón que se ha creado en Photoshop. Un botón de Photoshop es un gráfico que contiene dos o más capas, que crean en el botón unos estados que se visualizan cuando el cursor del visitante interactúa con ellos. Aprenderás más acerca de los estados en adelante en este artículo.

Elige Archivo> Colocar el botón de Photoshop. En el cuadro de diálogo Colocar botón de Photoshop que aparece, busca y selecciona el archivo con el nombre katiescafe.psd. Haz clic en Seleccionar. Con la importación aparece un cuadro de diálogo Opciones de Photoshop. La vista previa de la vista Normal, de los estados del mouse se muestran activos en un patrón de casilla, lo que indica que el lienzo del documento de Photoshop es transparente, por lo que el gráfico del botón se integrará con los gráficos de fondo. El archivo PSD contiene dos capas con un gráfico idéntico (salvo por el color de relleno).

Para este ejemplo, deja la configuración predeterminada para los estados, pero piensa que puedes utilizar los menús en el cuadro de diálogo Opciones de importación de Photoshop para especificar qué capa se mostrará con cada evento del mouse cuando el visitante interactúe con el botón. Haz clic en Aceptar para cerrar el cuadro de diálogo Opciones de importación de Photoshop.

Haz clic una vez cerca de la parte izquierda de la cabecera, para colocar el logotipo gráfico en la zona azul del medio. Utiliza la herramienta Selección para alinear el logotipo en el centro de la zona de la cabecera.

 

Agregar un enlace a botón de imagen

Mientras que el logotipo está seleccionado, usa el menú para seleccionar un enlace a la página de inicio. De esta manera, cada vez que un visitante haga clic en el logo, irá a la Home (página índice) de la página web.

Definición de las regiones de cabecera, pie de página y la página en la página maestra

Cuando construyes un sitio web con HTML y CSS, las páginas individuales son a menudo de distintas alturas, dependiendo del contenido único que se muestra en cada página. Muse incluye características que permiten mostrar diferentes longitudes de las páginas de un sitio, en función del contenido exclusivo de cada página. Puedes configurar las regiones de manera que la cabecera siempre permanezca en su lugar en la parte superior y el contenido de pie de página siempre se muestre justo debajo del contenido de la página, independientemente de la altura de cada página. En esta sección, vas a definir el encabezado y pie de página de las regiones de la página principal.

Habilitación de las guías para establecer regiones de la página

Durante la edición de la página principal en la vista Diseño, haz clic en (o Control-clic) en el lado izquierdo de la zona gris del área de trabajo, a las afueras del área de la ventana del navegador. Habilita la opción de Mostrar guías y Mostrar encabezado y pie de página . (Si lo prefieres, puedes utilizar el menú de opciones de visualización con el icono de regla en el panel de control tanto para las guías de cabecera y las guías de pie de página).

Las guías azules horizontales se extienden a través de la anchura de la página. A partir de la parte superior, las guías de arrastre verticales definen la parte superior de la página, el borde inferior de la cabecera, el borde superior del pie de página, la parte inferior de la página y la parte inferior de la ventana de búsqueda.

Nota: La parte inferior de la ventana del navegador determina la parte más baja del área de la pantalla cuando un usuario visita el sitio en un navegador, dependiendo del diseño, se puede establecer un color de fondo o una imagen para el propio navegador y configurar la guía para el fondo de la página superior de la parte inferior de la guía explorador para permitir que el color o imagen de fondo se muestre por debajo del contenido de la página. Si no deseas que el explorador rellene para mostrar a continuación el contenido de la página, puedes arrastrar tanto a la parte inferior de la guía de la página web como la parte inferior de la guía de ventana del navegador en el mismo punto en la parte inferior de la página, como se muestra en la Figura 12.

Las tres guías del medio definen el contenido que se mostrará en el encabezado y pie de página. El resto de la región centro es la zona donde de añadirá el contenido de la página única a medida que se construye cada página, esta área central se expande para adaptarse a la altura de los elementos colocados en cada página.

A medida que arrastras las guías para definir estas áreas, se describe cada guía en información sobre herramientas. Puede ser útil para aumentar la ampliación de la página, de modo que puedes hacer zoom para ver los bordes de los elementos de la página con mayor claridad. También puede seleccionar los rectángulos y los elementos de la página y usar sus dimensiones de las cajas para ayudar a alinear las guías mientras se ajustan las áreas de encabezado y pie de página.

Para este ejemplo, arrastra la parte superior de la página de la guía hasta la cima. Este proyecto de ejemplo muestra las páginas pegadas a la parte superior de la ventana del navegador, limpias, sin bordes en la ventana del navegador.

Arrastra la segunda guía hacia abajo, justo debajo de la parte inferior de los gráficos de cabecera. Arrastra la tercera guía hasta la parte superior, justo encima de la parte superior del pie de página gráfico. Arrastra la cuarta guía hacia abajo, para que coincida con la parte inferior del pie de página gráfico (para definir la parte inferior de la página). Y finalmente, arrastra la quinta guía hasta el fondo de la guía de la página, para configurar la parte inferior de la página al ras con la parte inferior de la ventana de búsqueda.

Ahora que has añadido los gráficos del encabezado y pie de página, haz clic para ver el Plan y revisar las imágenes en miniatura. Ten en cuenta que los elementos del encabezado y pie de página en la página principal se agregan automáticamente a la página principal. El diseño de página básica ya está completa.