Tutorial Muse 1
Transcript of Tutorial Muse 1
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: [email protected] (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.