La caja de diálogo Nuevo sitio aparece. 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. Utilice esta interfaz para editar las configuraciones que se aplican a todo el

sitio. Establecer el ancho de página 960 y establezca el campo Altura mínima de 960. Establecer el número de columnas a 9. En la

sección Relleno, definir el margen superior a 18 e inferior a 0. Establecer todos los márgenes a 20. Escriba los números en los campos

o haga clic en las flechas arriba y abajo al lado de cada campo para aumentar o disminuir los valores actuales. Haga clic en Aceptar

(vea la Figura 2).

Figura 2. Establecer las propiedades del sitio cuando se crea un nuevo sitio, antes de comenzar a diseñar las páginas.

Nota: Al editar un sitio, puede acceder a este panel, en cualquier momento seleccionando Archivo> Propiedades del sitio. Sin

embargo, es una buena práctica para establecer las dimensiones de la primera vez que empezamos un proyecto, del mismo modo que

la hora de establecer una mesa de trabajo, documento o lienzo.

Seleccione el menú Archivo> Guardar. En el Guardar archivo como cuadro de diálogo, escriba un nombre para el sitio:

MyFirstSite.muse. Vaya a la ubicación donde desea guardar este proyecto de ejemplo (como la carpeta FirstMuseSite en el

escritorio). Haga clic en Guardar (ver Figura 3).

Figura 3. Introduzca el nombre del sitio y elija una ubicación en el escritorio para guardar el sitio.

Nota: La carpeta FirstMuseSite contiene una versión final del proyecto de ejemplo denominado katies-cafe.muse. Si lo desea, 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 (ver Figura 4).

Figura 4. Un nuevo sitio contiene una página maestra y una página de inicio correspondiente.

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.

                                                                                                                                                                             

Volver al inicio >>

Edición de páginas maestras para añadir elementos que son comunes a todas las páginas webEn esta sección, el diseño de la página principal del sitio, que contiene la obra de arte persistente que las otras páginas enlazadas en

el sitio automáticamente.

Aunque en muchos sentidos Muse se comporta como una herramienta de diseño, detrás de las escenas que genera la industria

estándar de HTML, JavaScript y CSS para crear páginas web. Cuando usted elige 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. En cambio, el resultado final

publicado es un completo y funcional basado en estándares web.

En vista de plano, haga doble clic en la página principal para abrirlo en la 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 de la palabra, es decir, sólo la página en sí se selecciona. Al hacer clic

en los objetos en la página, como una imagen, la imagen de la palabra en la pantalla. Es muy útil saber qué elemento está

seleccionado en ese momento, de manera que usted trabaja prestar atención al indicador de selección para asegurarse de que está

seleccionando el elemento que desea controlar.

Para seleccionar toda la página, haga clic en el área gris a la izquierda oa la derecha de la página. El indicador de selección se

mostrará la página de Word. Aunque la página está seleccionada, utilice los menús de la barra de control para actualizar la

configuración de color de relleno y trazo. Ajuste el color de relleno de la página en blanco y establecer el ancho de la carrera a

0. Configurar el navegador color de relleno a blanco (ver Figura 5).

Figura 5. Utilice el color de relleno y los menús de ancho de trazo en la barra de control para actualizar la página y la configuración de

tu navegador.

Seleccione la herramienta Rectángulo (ver Figura 6).

Figura 6. La herramienta Rectángulo (cuadrado icono) se encuentra junto a la herramienta Mano en la barra de control.

Haga clic y arrastre la herramienta Rectángulo en toda la anchura de la página, cerca de la parte superior, para crear un

contenedor. Puesto que usted ha dibujado el rectángulo, se selecciona automáticamente. (Puede 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, el rectángulo no es

necesario un derrame cerebral, por lo que establece el ancho del trazo del rectángulo a cero, escriba 0 en el campo o haga clic en la

flecha hacia abajo una vez en el menú ancho del trazo.

Uso de los tiradores de transformación de un rectángulo seleccionado, usted puede controlar su posición, la forma, rotación y

tamaño. Mientras que un rectángulo o una imagen se ha seleccionado, también puede añadir efectos, como sombras, biseles, y brilla

a través del menú Efectos en la barra de control. Si lo desea, también puede cambiar la transparencia del elemento seleccionado

mediante el ajuste del valor numérico a un valor inferior a 100 en el control de opacidad.

Volver al inicio >>

Configuración de una imagen de fondo como un relleno en mosaico para una forma de rectánguloUtilice 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 en rodajas que se haga y se descargan con rapidez cuando el visitante

accede a la página. Haga clic en el icono de carpeta junto a la imagen. En el cuadro de diálogo Abrir que aparece, busque el archivo

en la carpeta llamada FirstMuseSite header.jpg y haga clic en Seleccionar (ver Figura 7).

Figura 7. Examinar para seleccionar la imagen de fondo y haga clic en Seleccionar.

Utilice el menú de montaje para fijar la imagen de fondo de mosaico horizontal. Contenedores rectangulares con elementos de imagen

en mosaico-que se llena de páginas crear flexibles puede cambiar el tamaño del rectángulo con las dimensiones que mejor se adapte

a su diseño y los mosaicos de la imagen de fondo a la perfección.

Seleccione el rectángulo y arrastre 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. Arrastre dos asas laterales para ampliar su anchura. Coloque el rectángulo

para alinearse con la parte superior de la página.

Cuando se publica el sitio, la imagen original que establece como un relleno de mosaico se carga sólo una vez por el explorador puede

cambiar el tamaño del rectángulo para cubrir grandes áreas de la página cuando sea necesario sin afectar 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 abarca la anchura de la página y es de unos 300 píxeles de alto, cerca de la

parte inferior de la página. Mientras que el rectángulo es seleccionado, establecer el ancho de la carrera a 0. Utilice el menú de relleno

para establecer la imagen de fondo footer.jpg. En el menú de montaje, ajuste la opción de azulejos, baldosas, lo que hace que la

imagen en mosaico horizontal y verticalmente. Arrastre los selectores de transformación del rectángulo para colocarlo a la parte inferior

de la zona visible, y ajustar la anchura de intersección con los lados izquierdo y derecho de la página. (Usted verá un borde rojo

aparecen de forma temporal que indica cuando el rectángulo se ajusta a "modo de ancho de 100%). Esta característica le permite

crear elementos de diseño que se mostrarán en toda la anchura de la ventana del navegador, no importa cuán amplio es el visitante

tamaño de su navegador.

Utilice la herramienta Rectángulo para dibujar otro recipiente rectángulo que abarca toda la anchura de la página, cerca de (y

superpuestas) del borde superior del rectángulo existente. Ajuste el ancho de la carrera a 0. Ajuste el color de relleno a ninguno.Utilice

el menú de relleno para seleccionar el archivo llamado bottom_border.png como imagen de fondo y la puso en mosaico

horizontal. Utilizar 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 extiende por toda la anchura. Expanda su altura para mostrar todo el gráfico borde

festoneado. Este archivo PNG tiene un fondo transparente, que da el efecto del color de relleno blanco la página que muestra a través.

Volver al inicio >>

Colocando una sola imagen en la páginaEn 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, que colocaremos las imágenes directamente en la página. Elija Archivo>

Colocar (ver Figura 8).

Figura 8. Si prefiere utilizar el atajo de teclado para colocar los archivos, pulse Control-D (Windows) o Comando + D (Mac).

En el cuadro de diálogo Abrir que aparece, busque y seleccione el archivo con el nombre footer_content.png encuentra en la carpeta

archivos de muestra en el escritorio. Haga clic en Seleccionar. Haga clic una vez (para colocar el gráfico en su tamaño original) en el

área de pie de página, y luego usar 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. Seleccione 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 colocada archivo llamado footer_content.png

Mientras que los tres elementos seleccionados, o bien seleccionar la casilla de verificación junto a pie de página en la barra de control

(o compruebe que está marcada) o el botón derecho del ratón (Control-clic) en cada elemento y elija 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á colocado por debajo del contenido de la página (ver Figura 9).

Figura 9. Active la casilla de verificación Pie de página, mientras que la selección de los tres elementos en el área de pie de página,

como alternativa, haga clic para establecer el pie de página del artículo en el menú contextual que aparece.

 

Volver al inicio >>

Colocar un botón de PhotoshopA continuación, usted aprenderá 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 el botón "estados" que se visualizan cuando el cursor del visitante interactúa con

ellos. Usted aprenderá más acerca de los estados más adelante en este artículo.

Elija Archivo> Colocar el botón de Photoshop. En el cuadro de diálogo Place Photoshop botón que aparece, busque y seleccione el

archivo con el nombre katiescafe.psd. Haga clic en Seleccionar. La importación de Photoshop cuadro de diálogo Opciones aparece. La

vista previa de la refinanciación de la Normal, del ratón y los Estados activos muestran 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, deje la configuración predeterminada para los estados, pero note que usted puede 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 de ratón cuando el visitante

interactúa con el botón. Cuando de antemano en un navegador, el gráfico en la segunda capa en el archivo de Photoshop muestra un

efecto de rollover cuando el visitante se cierne el cursor sobre el logo. Haga clic en Aceptar para cerrar la importación de Photoshop

cuadro de diálogo Opciones.

Haga clic una vez cerca de la parte izquierda de la cabecera, para colocar el logotipo gráfico en la zona azul medio. Utilice la

herramienta Selección para alinear el logotipo en el centro de la zona de cabecera (ver Figura 10).

Figura 10. Después de colocar el botón de Photoshop, la posición en la región de cabecera de la izquierda.

Volver al inicio >>

Agregar un enlace a una imagen de botónMientras que el logotipo está seleccionado, use el menú para seleccionar un enlace a la página de inicio. De esta manera, cada vez

que un visitante hace clic en el logo, que le presentará el Hogar (página índice) de la página web (ver Figura 11).

Figura 11. Vincular el logotipo del botón de Photoshop a la página principal con el menú Enlace.

Volver al inicio >>

 

Definición de las regiones de cabecera, pie de página y la página en la página principalCuando usted construye un sitio web con HTML y CSS, las páginas individuales son a menudo distintas alturas, con base en el

contenido único que se muestra en cada página. Muse incluye características que permiten a las páginas de un sitio para mostrar a

diferentes longitudes, en función del contenido exclusivo en cada página. Puede configurar las regiones de manera que la cabecera

siempre permanece en su lugar en la parte superior y el contenido de pie de página siempre se muestra justo debajo del contenido de

la página, independientemente de la altura de cada página. En esta sección, va 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, haga clic en (o Control-clic) en el lado izquierdo en 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 encabezado y pie de página

Mostrar. (Si lo prefiere, puede utilizar el menú de opciones de visualización con el icono de regla en el panel de control para que tanto

las guías de cabecera y el pie de página y guías).

Blue guías horizontales parece que se extienden a través de la anchura de la página. A partir de la parte superior, las guías de arrastre

vertical para definir 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 para

mostrar el resultado por debajo del contenido de la página. Si no desea que el explorador rellene para mostrar a continuación el

contenido de la página, puede arrastrar tanto a la parte inferior de la guía de la página web y la parte inferior de la guía ventana del

navegador en la misma ubicación en la parte inferior de la página, como se muestra en la Figura 12.

Las tres guías de medios de definir el contenido que se mostrará en el encabezado y pie de página. El resto de la región centro es la

zona donde va a añadir el contenido de la página única medida que construir cada página, esta área central se expande para

adaptarse a la altura de los elementos colocados en cada página.

A medida que arrastra las guías para definir estas áreas, una información sobre herramientas se describe cada guía. Puede ser útil

para aumentar la ampliación de la página, de modo que usted puede 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, arrastre la parte superior de la página de la guía hasta la cima. Este proyecto de ejemplo muestra las páginas de

limpiar la parte superior de la ventana del navegador, sin bordes de la ventana del navegador que muestra a través.

Arrastre la segunda guía hacia abajo, justo debajo de la parte inferior de los gráficos de cabecera. Arrastre la guía de la tercera hasta

la parte superior, justo encima de la parte superior del pie de página gráfico. Arrastre la guía cuarta 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 guía quinto 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 (ver Figura

12).

Figura 12. Establecimiento de la cabecera de la página, y las regiones de pie de página arrastrando las guías en el lado izquierdo.

Ahora que ha añadido el encabezado y pie de página de gráficos, haga clic para ver el Plan de Plan de ver y revisar las imágenes en

miniatura. Tenga en cuenta que el encabezado y pie de página los elementos en la página principal se agregan automáticamente a la

página principal.

Su diseño de página básica ya está completa. En el siguiente tutorial, La construcción de su primer sitio web en la parte Muse 2 usted

aprenderá cómo crear más páginas para el sitio, para fijar objetos y definir los enlaces externos del navegador. 

La construcción de su primer sitio web con Muse, parte 2Contenido

Añadiendo nuevas páginas en el sitio y la organización de su estructura

Colocación de imágenes múltiples al mismo tiempo para agregar contenido a la página de inicio

Fijación de las imágenes a la ventana del navegador

Adición de enlaces externos a las imágenes

Adición de una caja de luz que muestra el vídeo alojado en un servidor de terceros

 

En La construcción de su primer sitio web en la Parte 1 Muse  nos centramos en cómo empezar con Muse y definir los elementos de la

página principal que se repiten en todo el sitio. En la parte 2 de esta serie usted aprenderá cómo crear más páginas para el sitio, para

fijar objetos y definir los enlaces externos del navegador.

Añadiendo nuevas páginas en el sitio y la organización de su estructuraPase el ratón sobre la miniatura de la página principal y haga clic en el signo más (+) situado a la derecha de la miniatura de la página

principal, para crear otra página en el mismo nivel que la primera. Haga clic en el campo de etiqueta debajo de la nueva página y el

nombre de: Alimentos.

Al hacer clic en el signo más (+) por debajo de un icono de signo de la página, se crea una página de nivel inferior para ampliar una

sección que se refiere a un tema específico.

Por ejemplo, si usted está creando un sitio web para un restaurante, se puede crear una página de nivel superior para mostrar una

visión general de la comida que se sirve, y tres sub-nivel de las páginas que contienen el desayuno, el almuerzo y la cena.

Haga clic en el signo más (+) icono de signo por debajo de la miniatura de página de los Alimentos. Haga clic en la etiqueta y cambiar

el nombre del Desayuno página. Haga clic en el signo más (+) icono de signo a la derecha de la miniatura de vacaciones, para crear

una nueva página y el nombre de Almuerzo. Repita esta operación una vez más, para crear un total de tres sub-páginas de nivel por

debajo de la página de la Alimentación llamada Desayuno, Almuerzo y Cena (ver Figura 13).

Figura 13. Crear nuevas páginas y subpáginas, haga clic en los iconos más.

Nota: Para los propósitos de este tutorial, sólo va a crear dos niveles en el sitio. Sin embargo, al construir sus propios sitios, puede

crear sub-sub-nivel de las páginas, para organizar las páginas que desee. También puede hacer clic en el signo más (+) junto al icono

de signo de la página principal en la parte inferior, para crear más páginas principales, si desea utilizar diferentes diseños en diferentes

secciones del sitio. Si usted tiene más de una página maestra, puede hacer clic derecho (o Control-clic) en las páginas del sitio a la

vista del Plan de vincularlos a una página principal concreta. Sin embargo, si sólo tiene una página principal, las páginas de enlace a

un maestro-de forma automática.

El punto de vista del Plan proporciona las herramientas para estructurar un sitio y definir cómo los visitantes tendrán acceso a cada

una de las secciones. Si desea cambiar la organización del sitio, usted puede ajustar el flujo con sólo arrastrar las miniaturas de las

páginas en torno a cambiar la posición.

Volver al inicio >>

Colocación de imágenes múltiples al mismo tiempo para agregar contenido a la página de inicioEn esta sección, vamos a añadir el contenido que aparece en la página de índice del sitio. También verá cómo ahorrar tiempo

mediante la colocación de varias imágenes en un solo lugar la operación como a construir un diseño de página.

Haga doble clic en la miniatura de la página de inicio. La página principal se abre en la vista Diseño, aparece en su propia pestaña en

la parte superior de la interfaz de la vista Diseño (ver Figura 14).

Figura 14. Las pestañas debajo de la barra de control muestra las páginas que están abiertas. 

Elegir lugar Archivo>. En el cuadro de diálogo Abrir que aparece, seleccione los dos archivos en la carpeta del proyecto de ejemplo

denominado follow_us_on_twitter.png y la home_image.jpg. Para seleccionar los dos elementos no contiguos en la lista, mantenga

pulsada la tecla Control (Windows) o Comando (Mac) mientras hace clic en los nombres de archivo. Haga clic en Seleccionar para

seleccionar los dos archivos y cerrar el cuadro de diálogo Abrir.

Haga clic una vez cerca de la parte derecha de la página debajo de la cabecera para colocar el botón de Twitter horizontal y luego otra

vez en el lado izquierdo (en el área de la página en blanco) para colocar la imagen de casa más grande. Utilice la herramienta

Selección para seleccionar el botón de Twitter y luego usar uno de los controladores de esquina para girar la imagen Twitter de

manera que se muestra en vertical como se muestra en la Figura 15.

Utilice la herramienta Selección para arrastrar la imagen Twitter girar o presionar las teclas de flecha para alinear el botón de Twitter

contra el centro de la parte derecha de la página. Seleccione la imagen de casa más grande que acaba de colocar en el centro de la

página del centro utilizando las guías inteligentes que aparecen. También puede mantener pulsada la tecla Mayús mientras pulsa las

teclas de flecha para mover la imagen seleccionada 10 píxeles a la vez en una dirección específica. Después de realizar estos

cambios, la imagen de casa más grande debe estar centrado en la parte blanca de la página y la imagen girada Twitter botón

centrados y alineados a lo largo del extremo derecho de la página (ver Figura 15).

Figura 15. Coloque el mensaje de Twitter en el lado extremo derecho de la página y colocar la imagen en casa grande en el medio de

la página.

Nota: Cuando colocas los objetos, además de hacer clic en (que se inserta la imagen en su tamaño original) también puede hacer clic

y arrastrar el cursor para redimensionar la imagen para adaptarse a una región específica en la página. Sin embargo, como de

completar estos pasos, simplemente haga clic en la página cerca de la ubicación deseada para colocar las imágenes en la página en

sus dimensiones originales.

A medida que se están posicionando la imagen de casa grande, observe que la página se expande en longitud si se arrastra la imagen

de más abajo en la página. El contenido de pie de página se mueve hacia abajo y el encabezado y pie de página se conservan. Para

este ejemplo, la posición de la imagen de su casa para alinear en el centro del área de la página, de aproximadamente 20 píxeles por

debajo de la línea de guía que separa la cabecera de la página principal de la página, por lo que está por debajo de la cabecera y por

encima del pie de página con alguna espacio en blanco en todos los lados.

Volver al inicio >>

Fijación de las imágenes a la ventana del navegadorCuando se coloca una imagen o utilizar otros métodos para añadir ilustraciones a una página, puede utilizar la herramienta de

selección y las teclas de flecha para cambiar su posición. A medida que avanza la imagen de todo, se mueve en relación con los otros

elementos (imágenes, texto y multimedia) que también existen en la página. Usted tiene la capacidad de mover los elementos de otros

también, pero la página entera se comporta como un folleto o un cartel. Los elementos de la página existe en un solo plano. Si una

página es larga (contiene una gran cantidad de contenido vertical) y los rollos de los visitantes hacia abajo ya no ven las imágenes en

la parte superior de la página.

Es probable que usted ha visto los objetos anclados al visualizar sitios web, sino que son los "persistentes" los elementos que siempre

se muestran en un solo lugar. Ellos parecen flotar por encima del resto del contenido de la página.

Cuando se utiliza la herramienta Pin, que son esencialmente de la eliminación de una imagen del flujo de la página. En lugar de por la

que se a cabo en relación con los otros elementos de página, lo establece en una ubicación específica en relación con el

navegador. Pinned imágenes parecen ser "pegajoso" - manteniéndose siempre en un punto (por ejemplo, la esquina superior derecha,

o flotando cerca de la parte inferior), independientemente de otros elementos de desplazamiento de página. Si el visitante cambia el

tamaño de su navegador, las imágenes siempre se quedan prendidas en su lugar de clavado en relación con la ventana del

navegador. 

Usted puede pensar en depositadas como una forma de "romper la imagen hacia fuera" del diseño de una página y pegarla en el

navegador en lugar de, como fijando una nota a un panel de corcho. El elemento clavado se trasladará a mantener su posición de

clavado en relación con el navegador si el visitante cambia el tamaño de la ventana del navegador, pero el elemento fijado no se

moverá si los rollos de visitantes del contenido de la página horizontal o vertical.

Siga estos pasos para utilizar la herramienta de los pines:

Seleccione el archivo follow_us_on_twitter.png que ha colocado previamente. Si bien se ha seleccionado, utilizar la transformación

controladores de esquina para girar la imagen 90 grados, a una orientación vertical con el texto hacia el lado derecho de la página.

Utilice la herramienta de selección y las Guías inteligentes que aparecen automáticamente para centrar la imagen verticalmente en la

página. Mientras que la imagen está aún seleccionado, haga clic en la posición superior derecha de las seis opciones posibles en la

herramienta Pin situado en la barra de control. Esto establece el "pin" que une la imagen a la orilla derecha de la ventana del

navegador (ver figura 16).

Figura 16. Haga clic en la posición del punto en la herramienta Pin para especificar qué región de la imagen se fija en la ventana del

navegador.

Haga clic en Vista previa y utilizar la parte inferior derecha se encarga de cambiar el tamaño para disminuir y aumentar el ancho de la

ventana de vista previa. Se dará cuenta de que el gráfico de Twitter se mueve horizontalmente a medida que cambia el tamaño del

ancho de la ventana del navegador. Más tarde, si se agrega más contenido a la página de inicio para que sea más largo, la imagen fija

se quedarán donde están y permanecen visibles, incluso si el visitante se desplaza hacia abajo para ver la parte inferior de una página

de largo.

Nota: Para asegurarse de que una imagen siempre se mantiene por encima de todos los otros elementos de página, haga clic derecho

(o Control-clic) en la imagen y elija Organizar> Traer al frente para especificar el orden de apilamiento y de garantizar que la imagen se

muestra en la parte superior.

Volver al inicio >>

   Adición de enlaces externos a las imágenesCuando los visitantes llegan a la página principal, hay dos objetivos principales: la ruta a ver un vídeo y atraer a seguir la compañía en

Twitter. En esta sección, usted aprenderá cómo agregar el enlace a la gráfica Twitter clavado en la parte derecha de la página.

Cuando se coloca el botón de Photoshop en la página principal, utiliza el menú de Enlace para seleccionar el nombre de la página

principal de la lista, para agregar un enlace a la página de inicio para el logotipo. En esta sección, usted aprenderá cómo agregar un

enlace externo a una imagen.

Seleccione el gráfico Twitter. A pesar de que está seleccionado, vamos a añadir un enlace nuevo, pero esta vez tendrá un vínculo a un

sitio web externo, en lugar de seleccionar una página del sitio existente. Escriba o copie y pegue el siguiente enlace absoluta

directamente en el campo de enlace:

http://twitter.com/katiescafe

Además de introducir las direcciones URL a otros sitios web, también puede escribir direcciones de correo electrónico para crear

enlaces de correo electrónico, en este formato: address@email.com (ver Figura 17).

Figura 17. Introduzca la ruta absoluta en el campo de enlace copiando la URL en la barra de direcciones del navegador, o escribiendo

la URL en el campo.

Volver al inicio >>

 

 

 Adición de una característica de la colección que muestra el vídeo alojado en un servidor de tercerosUna caja de luz es un bonito efecto que es fácil de configurar. Le permite incluir contenido de una manera que temporalmente se

oscurece el resto de la página, pero es el único elemento resaltado mientras está activo. Para crear una caja de luz, vamos a usar uno

de los widgets en la Biblioteca de Widgets. Los widgets son creados previamente las características del sitio que se pueden arrastrar y

colocar en una página para añadir nuevas funcionalidades.

Usted aprenderá más acerca de los widgets más adelante en este artículo, pero al insertar ésta en primer lugar, observa lo fácil que es

añadir características complejas a su sitio y crear una experiencia única en línea para los visitantes. Esencialmente, este control puede

ser configurado de forma que cuando un visitante interactúa con el contenedor de disparo, el contenido del contenedor de destino se

muestra prominentemente como todo el resto de la página está atenuado temporalmente. Una caja de luz atrae la atención del

visitante con el contenido ofrecido en el blanco.

Abra la librería de widgets en la parte inferior derecha, en el grupo de paneles. (Ya debería estar abierto, pero si está cerrado, elija

Ventana> Biblioteca Widgets). Expanda la sección Composición clic en la flecha que apunta hacia abajo. Seleccione el widget de la

pantalla la mesa de luz, y arrastrarlo a la página (ver Figura 18).

Figura 18. Arrastre una copia del widget pantalla la mesa de luz fuera de la sección Las composiciones de la Biblioteca de Widgets y

en la página. 

Para este ejemplo, los visitantes haga clic en la imagen de casa grande (en el contenedor de disparo) para invocar la caja de luz y ver

el video (que se mostrará en el contenedor de destino).

La versión por defecto del widget pantalla la mesa de luz tiene tres recipientes más pequeños gatillo gris situado sobre el contenedor

de destino más grande (borde negro con la imagen de la flor). Haga clic en la pequeña caja gris a la derecha dos veces. La primera

vez, el indicador de selección muestra el widget de la palabra. Haga clic una segunda vez, hasta que el indicador de selección en la

esquina superior izquierda del panel de control dice: Contenedor. (Las cajas más pequeñas grises son el desencadenante de este

widget).

Pulse Retroceso (Windows) o Suprimir (Mac) para eliminar el disparo seleccionado. A continuación, haga clic en el segundo (centro)

dos veces al cuadro gris, (el gatillo a la izquierda de la que usted acaba de eliminar). Pulse Retroceso o Supr para removerla. Ahora,

sólo una sola caja gatillo gris que queda. Como se borran cada disparo, que también se elimina el contenedor de destino

correspondiente. Después de realizar estos cambios sólo un par se mantiene: un contenedor de un solo disparo sobre fondo gris y una

caja de selección mayor, con un borde oscuro y un marcador de posición de la hoja gráfica camellones.

Haga clic de distancia para que el widget no está seleccionada. Se puede decir que hay otros elementos son seleccionados cuando el

indicador de selección en la esquina superior izquierda muestra la página de la palabra.

Seleccione la imagen de casa grande en la página y elija Edición> Cortar (o pulse el atajo de teclado). Haga clic en la parte superior

izquierda restante cuadrado gris dos veces (primero para seleccionar todo el widget, y luego otra vez para seleccionar el envase más

pequeño gatillo gris).

Elija Edición> Pegar (o pulse el atajo de teclado para pegar la imagen en casa dentro del contenedor de activación del widget pantalla

la mesa de luz). El recipiente pequeño gatillo gris actualiza automáticamente para adaptarse a las dimensiones de la imagen pegada

en casa (ver Figura 19).

Figura 19. Pegue la imagen en casa dentro del contenedor de activación del widget de pantalla de luz.

Si hace clic en el botón de vista previa en el panel de control y probar la página de inicio, verá la imagen de casa grande, como las

primeras cargas de la página. Si hace clic en el "Misterio Latte" de la imagen (en el contenedor de activación), el efecto de la colección

se invoca y la página se oscurece como la hoja acanalada se muestra en el contenedor de destino. Pulse Escape para salir de la caja

de luz y, a continuación, haga clic en el botón Diseño en el panel de control para continuar editando la página de inicio. 

Actualmente, el contenedor de destino está lleno de un archivo de imagen que contiene una hoja acanalada. Sin embargo, puede

colocar todo tipo de contenido en el contenedor de destino, incluyendo los archivos de imagen diferentes, rectángulos rellenos, texto o

contenido HTML incrustado que ha copiado de otro sitio web. El contenido HTML incrustado se aborda con más detalle más adelante

en este artículo, pero por el momento, imagine que usted visitó YouTube.com y copiar el código de inserción de un vídeo que publicó

en su sitio. El código fuente se copia se guarda en el portapapeles. Sin embargo, a los efectos de este ejemplo, puede copiar el código

fuente que se proporciona a continuación:

<iframe title="YouTube de vídeo width="640" height="390" player"

src="http://www.youtube.com/embed/krqjM5GmqzQ" frameborder="0" allowfullscreen> </ iframe>

 

El código anterior contiene un enlace a un archivo de vídeo real que se publicó en YouTube, de modo que usted puede experimentar

con el juego que dentro de una "ventana" (algo que se llama un iFrame) que va a agregar a la página web.

Después de copiar el código anterior, volver a Muse. Utilice la herramienta Selección para hacer clic de distancia en el borde gris de la

página, de modo que la selección de los Indicadores en la esquina superior izquierda muestra la página de la palabra, lo que significa

que sólo la página seleccionada.

Haga clic en el contenedor de destino más grande con el indicador de selección de la hoja acanalada image.The en la esquina

superior izquierda aparece la palabra: Widget. Haga clic en la imagen de la hoja acanalada de nuevo, así que el indicador de selección

en la esquina superior izquierda muestra la palabra: Contenedor. Haga clic de nuevo (se dice de contenedores de nuevo) y luego una

vez más, hasta que el indicador de selección muestra la palabra: Image Frame. Pulse Retroceso (Windows) o Suprimir (Mac) para

eliminar la imagen de marcador de posición del contenedor de destino.

Mientras que el contenedor de destino interno aún está seleccionada, se le pega el código HTML que ha copiado más arriba.Esto

puede ser un poco difícil porque el objetivo es pegar el código dentro del contenedor de destino del widget. Es posible (dependiendo

de lo que usted ha seleccionado en ese momento) para pegar el código de vídeo fuera del widget, por lo que se incrustan

directamente en la página. Así que ten cuidado de que eso ocurra ... si se prueba la mesa de luz, haga clic en Vista previa para ver

que el video se muestra aunque no haya hecho clic en la casa grande "Misterio Latte" de la imagen, significa que el código de vídeo no

se pegó correctamente en el contenedor, por lo que muestra inmediatamente.

Siga estos pasos para pegar el código de vídeo en el contenedor de destino (mientras que el Indicador de Selección muestra la

palabra: Contenedor). 

Elija Objeto> Insertar HTML. En la ventana que aparece, seleccione el texto del marcador por defecto y pulse Retroceso o Supr para

eliminarlo. Elija Edición> Pegar para pegar el código de YouTube que ha copiado arriba, en el campo de código HTML.Haga clic en

Aceptar.

Por otra parte, en muchos casos, Muse detectará automáticamente cuando se pega el código HTML, y entender que se trata de HTML

en lugar de sólo texto sin formato. Así que si usted prefiere, en lugar de elegir Objeto> Insertar HTML para abrir la ventana HTML,

también puede hacer clic derecho (o Control-clic), mientras que el contenedor de destino interno está seleccionado y elija Pegar en el

menú contextual que aparece. (O seleccione Editar> Pegar o utilice el atajo de teclado para pegar el código fuente en el contenedor de

destino). Muse ofrece muchos métodos para lograr el mismo objetivo de pegar el código de vídeo en el contenedor de destino.

Después de pegar el código en el contenedor de destino, verá el primer fotograma del vídeo que se muestra. Eso indica que el

contenedor tiene código HTML pegado en su interior. El video sólo se reproducirá cuando haga clic en el botón de vista previa en el

panel de control o previsualizar la página en un navegador.

Mientras que el contenedor de destino se selecciona, arrastre los selectores de transformación para hacer que el contenedor de

destino mucho más grande, de aproximadamente 640 x 400, con el fin de mostrar las dimensiones del vídeo de YouTube.También

puede utilizar la herramienta Selección para volver a colocar el contenedor de destino para ponerlo en el lugar donde desea que

aparezca en la página.

Desde la selección de la parte correcta del widget es muy importante, es posible que resulte más fácil hacer clic completamente

alejado desde el widget (haga clic en el borde gris en el lado de la página, de modo que el indicador de selección muestra la palabra:

la página). A continuación, haga clic en el widget una vez más, de manera que el indicador de selección muestra la palabra: Widget. Si

bien todo el widget en la pantalla, se puede mover todo el conjunto de los contenedores anidados para reposicionar. O, si desea mover

sólo el contenedor de destino que contiene el vídeo, haga clic de nuevo para que el contenedor de destino externa se selecciona, para

volver a colocar el vídeo.

Haga clic dos veces más (para seleccionar el recipiente interior y, a continuación seleccionar el vídeo, que es el código

HTML).Mientras que el video es seleccionado, el indicador de selección muestra la palabra: elemento HTML.

Si pulsa la tecla Escape una vez, el indicador de selección pasos subir un nivel en la jerarquía anidada y selecciona el recipiente

interior de la meta. El Indicador de Selección muestra la palabra: Contenedor. Mientras que el interior más contenedor de destino se

selecciona, establecer el color de relleno del recipiente a sólido blanco para crear un marco alrededor del vídeo.

A continuación, pulse la tecla Escape una vez más, para pasar a otro nivel, el recipiente exterior de la meta. El indicador de selección

sigue mostrando el contenedor de la palabra, pero se puede decir que ha seleccionado el recipiente exterior debido a que el cuadro de

límite con asas rodea el recipiente exterior que se ha seleccionado en la página.

Mientras que el contenedor de destino externa está seleccionada, establezca su relleno a un color marrón claro malva o la luz (se

puede utilizar la herramienta Cuentagotas en el menú de relleno para seleccionar un color de la foto de café en la casa grande de la

imagen) y luego ajuste la opacidad de el color de relleno en el recipiente exterior a 90, de modo que el relleno del recipiente exterior es

ligeramente transparente (véase Figura 20).

Figura 20. Pegue el código fuente de video en el contenedor de destino interior, establecer el color de relleno de los contenedores de

destinatarios internos y externos, y entonces redimensionar y reposicionar los contenedores para centrar el contenido de vídeo en la

página.

Si bien el recipiente exterior se ha seleccionado para el contenedor de destino, puede utilizar la herramienta Selección para arrastrar el

contenedor de destino a la mitad de la página. Cuando está en el centro horizontal, un rojo guía inteligente vertical aparece

temporalmente, lo que indica que los elementos que se arrastran en el centro de la página. O si lo prefiere, también puede colocar el

contenedor de destino a un lado, mientras el video sigue siendo visible en la página principal.

Como puede ver, los elementos de widgets son fáciles de usar. Puede pegar en el contenido que desea agregar al botón (contenedor

de disparo) y luego pegar en (o el tipo o lugar) el contenido que desea que aparezca en el destino que se muestra cuando el usuario

hace clic en el gatillo en el sitio en vivo.

Antes de vista previa de la página de inicio en un navegador, hay algunos ajustes que hará para personalizar el widget y el control de

cómo se comporta.

Cada widget tiene un botón de flecha azul muestra a la derecha de la misma, mientras que el widget está seleccionado en la vista

Diseño. Haga clic en este botón de la flecha azul para acceder al menú de opciones del widget. A medida que se las obras de

construcción, puede hacer clic en este botón flecha azul en cualquier momento, para cambiar la configuración de los widgets que haya

añadido a una página.

Para este ejemplo, utilice la siguiente configuración en el menú de opciones (ver Figura 21).

Posición: la mesa de luz

Evento: Al hacer clic

Transición: Fading

Velocidad: Rápido

Reproducción automática: Off

Los disparadores de Arriba: Off

Ocultar todo Inicialmente: Off

Anterior (Deseleccionar para ocultar el botón Anterior)

Siguiente (Deseleccionar para ocultar el botón Siguiente)

Cerrar (Seleccione esta opción para mostrar el botón Cerrar)

Mantenga la opción habilitada para ver lightbox partes durante la edición

Seleccione la opción de Mostrar todo en el modo de diseño

Figura 21. Actualización de la configuración en el menú de opciones para controlar cómo se comporta el widget.

Haga clic en cualquier lugar fuera del menú de opciones para cerrarla.

Utilice la herramienta Selección para posicionar el botón Cerrar (la X) a la esquina superior derecha del contenedor de destino interior

blanca (ver Figura 22).

Figura 22. Coloque el botón Cerrar en la esquina superior derecha del contenedor de destino interior blanca. 

Pruebe la página principal haciendo clic en el botón de vista previa en el panel de control o seleccionando Archivo> Vista previa de

páginas en el explorador. Cuando la página se carga por primera vez, sólo se ve la imagen en casa grande con el mensaje Misterio

Latte y el botón de Twitter en el área de la página principal, debido a que el contenedor de destino con el vídeo está oculto (Figura 23).

 Figura 23. Vista previa de la página en un navegador para ver cómo aparecerá a los visitantes.

Haga clic en la imagen de misterio en casa Latte para ver la ventana de la colección parece que oscurece el resto de la página.Llenar

el contenedor de destino externo (que es malva o de color marrón claro, semi-transparente) llena la ventana del navegador y el vídeo

se enmarca en blanco el contenedor de destino interior de color de relleno sólido. Haga clic en el botón Reproducir en el centro del

vídeo para verlo jugar. (El video está reproduciendo desde el sitio web de YouTube, donde se aloja el archivo de vídeo). Cuando haya

terminado de ver el video, haga clic en el botón de cerrar (x-icon) en la esquina superior derecha del área de marco blanco para cerrar

la caja de luz y volver a la página de inicio.

Haga clic en el botón de Twitter para ver la carga de la página de Twitter. Las características de la página de inicio ahora están

trabajando como se esperaba.  

Ahora que ha añadido algo de contenido a la página principal, podrá continuar a la siguiente sección de este tutorial, La construcción

de su primer sitio web en la parte Muse 3.  En la Parte 3, usted aprenderá cómo utilizar la herramienta Rectángulo para crear

elementos de borde mediante un relleno de fondo de las imágenes en mosaico y la forma de copiar y pegar los elementos en una sola

página para pegarlos en su lugar y añadirlas a otras páginas en el sitio.