La caja de dilogo Nuevo sitio aparece. Ms tarde, cuando se abre el mismo cuadro de dilogo mientras se est trabajando, tambin se le llama el cuadro de dilogo Propiedades del sitio. Utilice esta interfaz para editar las configuraciones que se aplican a todo el sitio. Establecer el ancho de pgina 960 y establezca el campo Altura mnima de 960. Establecer el nmero de columnas a 9. En la seccin Relleno, definir el margen superior a 18 e inferior a 0. Establecer todos los mrgenes a 20. Escriba los nmeros 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 disear las pginas. Nota: Al editar un sitio, puede acceder a este panel, en cualquier momento seleccionando Archivo> Propiedades del sitio. Sin embargo, es una buena prctica 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 dilogo, escriba un nombre para el sitio: MyFirstSite.muse. Vaya a la ubicacin 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 ubicacin en el escritorio para guardar el sitio. Nota: La carpeta FirstMuseSite contiene una versin final del proyecto de ejemplo denominado katies-cafe.muse. Si lo desea, puede hacer doble clic en el archivo existente. Musa para abrirlo despus de guardar la versin de su proyecto como MyFirstSite.muse. Muse le permite abrir mltiples 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 automticamente una pgina de inicio (la pgina de ndice), que est vinculada al diseo de pginas maestras (ver Figura 4).

Figura 4. Un nuevo sitio contiene una pgina maestra y una pgina de inicio correspondiente. Para crear una experiencia consistente, se le coloque elementos repetidos de sitio, como el encabezado, pie de pgina y la navegacin del sitio, en las pginas principales. Con esta estrategia, slo tendr que aadir el contenido nico a las diferentes pginas a medida que construye el diseo del sitio. Volver al inicio >>

Edicin de pginas maestras para aadir elementos que son comunes a todas las pginas webEn esta seccin, el diseo de la pgina principal del sitio, que contiene la obra de arte persistente que las otras pginas enlazadas en el sitio automticamente. Aunque en muchos sentidos Muse se comporta como una herramienta de diseo, detrs de las escenas que genera la industria estndar de HTML, JavaScript y CSS para crear pginas 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 cuadrcula de pxeles. En cambio, el resultado final publicado es un completo y funcional basado en estndares web. En vista de plano, haga doble clic en la pgina principal para abrirlo en la vista Diseo. El archivo A-Master se abre en su propia pestaa en la parte superior del espacio de trabajo. Mira en la esquina superior izquierda del panel de control para localizar el indicador de seleccin. Por el momento, cuando nada ms se ha seleccionado, el indicador de seleccin muestra la pgina de la palabra, es decir, slo la pgina en s se selecciona. Al hacer clic en los objetos en la pgina, 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 atencin al indicador de seleccin para asegurarse de que est seleccionando el elemento que desea controlar. Para seleccionar toda la pgina, haga clic en el rea gris a la izquierda oa la derecha de la pgina. El indicador de seleccin se mostrar la pgina de Word. Aunque la pgina est seleccionada, utilice los mens de la barra de control para actualizar la configuracin de color de relleno y trazo. Ajuste el color de relleno de la pgina 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 mens de ancho de trazo en la barra de control para actualizar la pgina y la configuracin de tu navegador. Seleccione la herramienta Rectngulo (ver Figura 6).

Figura 6. La herramienta Rectngulo (cuadrado icono) se encuentra junto a la herramienta Mano en la barra de control. Haga clic y arrastre la herramienta Rectngulo en toda la anchura de la pgina, cerca de la parte superior, para crear un contenedor. Puesto que usted ha dibujado el rectngulo, se selecciona automticamente. (Puede ver el nombre del elemento seleccionado en el indicador de seleccin en la esquina superior izquierda de la barra de control). En este caso, el rectngulo no es necesario un derrame cerebral, por lo que establece el ancho del trazo del rectngulo 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 transformacin de un rectngulo seleccionado, usted puede controlar su posicin, la forma, rotacin y tamao. Mientras que un rectngulo o una imagen se ha seleccionado, tambin puede aadir efectos, como sombras, biseles, y brilla a travs del men Efectos en la barra de control. Si lo desea, tambin puede cambiar la transparencia del elemento seleccionado mediante el ajuste del valor numrico a un valor inferior a 100 en el control de opacidad. Volver al inicio >>

Configuracin de una imagen de fondo como un relleno en mosaico para una forma de rectnguloUtilice 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 pgina. Haga clic en el icono de carpeta junto a la imagen. En el cuadro de dilogo 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 pginas crear flexibles puede cambiar el tamao del rectngulo con las dimensiones que mejor se adapte a su diseo y los mosaicos de la imagen de fondo a la perfeccin. Seleccione el rectngulo y arrastre la transformacin 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 rectngulo para alinearse con la parte superior de la pgina. Cuando se publica el sitio, la imagen original que establece como un relleno de mosaico se carga slo una vez por el explorador puede cambiar el tamao del rectngulo para cubrir grandes reas de la pgina 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 pgina. Dibujar un rectngulo con la herramienta rectngulo que abarca la anchura de la pgina y es de unos 300 pxeles de alto, cerca de la parte inferior de la pgina. Mientras que el rectngulo 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 opcin de azulejos, baldosas, lo que hace que la imagen en mosaico horizontal y verticalmente. Arrastre los selectores de transformacin del rectngulo para colocarlo a la parte inferior de la zona visible, y ajustar la anchura de interseccin con los lados izquierdo y derecho de la pgina. (Usted ver un borde rojo aparecen de forma temporal que indica cuando el rectngulo se ajusta a "modo de ancho de 100%). Esta caracterstica le permite crear elementos de diseo que se mostrarn en toda la anchura de la ventana del navegador, no importa cun amplio es el visitante tamao de su navegador. Utilice la herramienta Rectngulo para dibujar otro recipiente rectngulo que abarca toda la anchura de la pgina, cerca de (y superpuestas) del borde superior del rectngulo 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 transformacin para cambiar el tamao y la posicin del rectngulo para colocarlo a lo largo de la parte inferior de la pgina, de manera que se extiende por toda la anchura. Expanda su altura para mostrar todo el grfico borde festoneado. Este archivo PNG tiene un fondo transparente, que da el efecto del color de relleno blanco la pgina que muestra a travs. Volver al inicio >>

Colocando una sola imagen en la pginaEn esta seccin, vamos a usar una tcnica diferente para aadir ms imgenes a la pgina. Esta vez, en lugar de establecer imgenes de fondo como el relleno de los contenedores rectangulares, que colocaremos las imgenes directamente en la pgina. 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 dilogo 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 grfico en su tamao original) en el rea de pie de pgina, y luego usar la herramienta de seleccin y las Guas inteligentes para centrar el contenido en el medio de la pgina. El pie de pgina se ha completado. Pero hay una tarea ms que hacer antes de pasar a las reas de pgina. Seleccione los tres puntos en el pie de pgina: El rectngulo que contiene footer.jpg El rectngulo 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 verificacin junto a pie de pgina en la barra de control (o compruebe que est marcada) o el botn derecho del ratn (Control-clic) en cada elemento y elija Elemento pie de pgina en el men contextual que aparece. Esto es importante para asegurar que estos tres elementos se asignan como elementos de pie de pgina y permanecer colocado por debajo del contenido de la pgina (ver Figura 9).

Figura 9. Active la casilla de verificacin Pie de pgina, mientras que la seleccin de los tres elementos en el rea de pie de pgina, como alternativa, haga clic para establecer el pie de pgina del artculo en el men contextual que aparece. Volver al inicio >>

Colocar un botn de PhotoshopA continuacin, usted aprender cmo hacer una imagen del botn que se ha creado en Photoshop. Un botn de Photoshop es un grfico que contiene dos o ms capas, que crean el botn "estados" que se visualizan cuando el cursor del visitante interacta con ellos. Usted aprender ms acerca de los estados ms adelante en este artculo. Elija Archivo> Colocar el botn de Photoshop. En el cuadro de dilogo Place Photoshop botn que aparece, busque y seleccione el archivo con el nombre katiescafe.psd. Haga clic en Seleccionar. La importacin de Photoshop cuadro de dilogo Opciones aparece. La vista previa de la refinanciacin de la Normal, del ratn y los Estados activos muestran un patrn de casilla, lo que indica que el lienzo del documento de Photoshop es transparente, por lo que el grfico del botn se integrar con los grficos de fondo. El archivo PSD contiene dos capas con un grfico idntico (salvo por el color de relleno). Para este ejemplo, deje la configuracin predeterminada para los estados, pero note que usted puede utilizar los mens en el cuadro de dilogo Opciones de importacin de Photoshop para especificar qu capa se mostrar con cada evento de ratn cuando el visitante interacta con el botn. Cuando de antemano en un navegador, el grfico 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 importacin de Photoshop cuadro de dilogo Opciones. Haga clic una vez cerca de la parte izquierda de la cabecera, para colocar el logotipo grfico en la zona azul medio. Utilice la herramienta Seleccin para alinear el logotipo en el centro de la zona de cabecera (ver Figura 10).

Figura 10. Despus de colocar el botn de Photoshop, la posicin en la regin de cabecera de la izquierda. Volver al inicio >>

Agregar un enlace a una imagen de botnMientras que el logotipo est seleccionado, use el men para seleccionar un enlace a la pgina de inicio. De esta manera, cada vez que un visitante hace clic en el logo, que le presentar el Hogar (pgina ndice) de la pgina web (ver Figura 11).

Figura 11. Vincular el logotipo del botn de Photoshop a la pgina principal con el men Enlace. Volver al inicio >>

Definicin de las regiones de cabecera, pie de pgina y la pgina en la pgina principalCuando usted construye un sitio web con HTML y CSS, las pginas individuales son a menudo distintas alturas, con base en el contenido nico que se muestra en cada pgina. Muse incluye caractersticas que permiten a las pginas de un sitio para mostrar a diferentes longitudes, en funcin del contenido exclusivo en cada pgina. Puede configurar las regiones de manera que la cabecera siempre permanece en su lugar en la parte superior y el contenido de pie de pgina siempre se muestra justo debajo del contenido de la pgina, independientemente de la altura de cada pgina. En esta seccin, va a definir el encabezado y pie de pgina de las regiones de la pgina principal.

Habilitacin de las guas para establecer regiones de la pginaDurante la edicin de la pgina principal en la vista Diseo, 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 opcin de Mostrar guas y encabezado y pie de pgina Mostrar. (Si lo prefiere, puede utilizar el men de opciones de visualizacin con el icono de regla en el panel de control para que tanto las guas de cabecera y el pie de pgina y guas).

Blue guas horizontales parece que se extienden a travs de la anchura de la pgina. A partir de la parte superior, las guas de arrastre vertical para definir la parte superior de la pgina, el borde inferior de la cabecera, el borde superior del pie de pgina, la parte inferior de la pgina y la parte inferior de la ventana de bsqueda. Nota: La parte inferior de la ventana del navegador determina la parte ms baja del rea de la pantalla cuando un usuario visita el sitio en un navegador, dependiendo del diseo, se puede establecer un color de fondo o una imagen para el propio navegador y configurar la gua para el fondo de la pgina superior de la parte inferior de la gua explorador para permitir que el color o imagen de fondo para mostrar el resultado por debajo del contenido de la pgina. Si no desea que el explorador rellene para mostrar a continuacin el contenido de la pgina, puede arrastrar tanto a la parte inferior de la gua de la pgina web y la parte inferior de la gua ventana del navegador en la misma ubicacin en la parte inferior de la pgina, como se muestra en la Figura 12. Las tres guas de medios de definir el contenido que se mostrar en el encabezado y pie de pgina. El resto de la regin centro es la zona donde va a aadir el contenido de la pgina nica medida que construir cada pgina, esta rea central se expande para adaptarse a la altura de los elementos colocados en cada pgina. A medida que arrastra las guas para definir estas reas, una informacin sobre herramientas se describe cada gua. Puede ser til para aumentar la ampliacin de la pgina, de modo que usted puede hacer zoom para ver los bordes de los elementos de la pgina con mayor claridad. Tambin puede seleccionar los rectngulos y los elementos de la pgina y usar sus dimensiones de las cajas para ayudar a alinear las guas mientras se ajustan las reas de encabezado y pie de pgina. Para este ejemplo, arrastre la parte superior de la pgina de la gua hasta la cima. Este proyecto de ejemplo muestra las pginas de limpiar la parte superior de la ventana del navegador, sin bordes de la ventana del navegador que muestra a travs. Arrastre la segunda gua hacia abajo, justo debajo de la parte inferior de los grficos de cabecera. Arrastre la gua de la tercera hasta la parte superior, justo encima de la parte superior del pie de pgina grfico. Arrastre la gua cuarta hacia abajo, para que coincida con la parte inferior del pie de pgina grfico (para definir la parte inferior de la pgina). Y finalmente, arrastra la gua quinto hasta el fondo de la gua de la pgina, para configurar la parte inferior de la pgina al ras con la parte inferior de la ventana de bsqueda (ver Figura 12).

Figura 12. Establecimiento de la cabecera de la pgina, y las regiones de pie de pgina arrastrando las guas en el lado izquierdo. Ahora que ha aadido el encabezado y pie de pgina de grficos, haga clic para ver el Plan de Plan de ver y revisar las imgenes en miniatura. Tenga en cuenta que el encabezado y pie de pgina los elementos en la pgina principal se agregan automticamente a la pgina principal. Su diseo de pgina bsica ya est completa. En el siguiente tutorial, La construccin de su primer sitio web en la parte Muse 2 usted aprender cmo crear ms pginas para el sitio, para fijar objetos y definir los enlaces externos del navegador.

La construccin de su primer sitio web con Muse, parte 2Contenido Aadiendo nuevas pginas en el sitio y la organizacin de su estructura Colocacin de imgenes mltiples al mismo tiempo para agregar contenido a la pgina de inicio Fijacin de las imgenes a la ventana del navegador Adicin de enlaces externos a las imgenes Adicin de una caja de luz que muestra el vdeo alojado en un servidor de terceros En La construccin de su primer sitio web en la Parte 1 Muse nos centramos en cmo empezar con Muse y definir los elementos de la pgina principal que se repiten en todo el sitio. En la parte 2 de esta serie usted aprender cmo crear ms pginas para el sitio, para fijar objetos y definir los enlaces externos del navegador.

Aadiendo nuevas pginas en el sitio y la organizacin de su estructuraPase el ratn sobre la miniatura de la pgina principal y haga clic en el signo ms (+) situado a la derecha de la miniatura de la pgina principal, para crear otra pgina en el mismo nivel que la primera. Haga clic en el campo de etiqueta debajo de la nueva pgina y el nombre de: Alimentos. Al hacer clic en el signo ms (+) por debajo de un icono de signo de la pgina, se crea una pgina de nivel inferior para ampliar una seccin que se refiere a un tema especfico. Por ejemplo, si usted est creando un sitio web para un restaurante, se puede crear una pgina de nivel superior para mostrar una visin general de la comida que se sirve, y tres sub-nivel de las pginas que contienen el desayuno, el almuerzo y la cena. Haga clic en el signo ms (+) icono de signo por debajo de la miniatura de pgina de los Alimentos. Haga clic en la etiqueta y cambiar el nombre del Desayuno pgina. Haga clic en el signo ms (+) icono de signo a la derecha de la miniatura de vacaciones, para crear una nueva pgina y el nombre de Almuerzo. Repita esta operacin una vez ms, para crear un total de tres sub-pginas de nivel por debajo de la pgina de la Alimentacin llamada Desayuno, Almuerzo y Cena (ver Figura 13).

Figura 13. Crear nuevas pginas y subpginas, haga clic en los iconos ms. Nota: Para los propsitos de este tutorial, slo va a crear dos niveles en el sitio. Sin embargo, al construir sus propios sitios, puede crear sub-sub-nivel de las pginas, para organizar las pginas que desee. Tambin puede hacer clic en el signo ms (+) junto al icono de signo de la pgina principal en la parte inferior, para crear ms pginas principales, si desea utilizar diferentes diseos en diferentes secciones del sitio. Si usted tiene ms de una pgina maestra, puede hacer clic derecho (o Control-clic) en las pginas del sitio a la vista del Plan de vincularlos a una pgina principal concreta. Sin embargo, si slo tiene una pgina principal, las pginas de enlace a un maestro-de forma automtica. El punto de vista del Plan proporciona las herramientas para estructurar un sitio y definir cmo los visitantes tendrn acceso a cada una de las secciones. Si desea cambiar la organizacin del sitio, usted puede ajustar el flujo con slo arrastrar las miniaturas de las pginas en torno a cambiar la posicin. Volver al inicio >>

Colocacin de imgenes mltiples al mismo tiempo para agregar contenido a la pgina de inicioEn esta seccin, vamos a aadir el contenido que aparece en la pgina de ndice del sitio. Tambin ver cmo ahorrar tiempo mediante la colocacin de varias imgenes en un solo lugar la operacin como a construir un diseo de pgina. Haga doble clic en la miniatura de la pgina de inicio. La pgina principal se abre en la vista Diseo, aparece en su propia pestaa en la parte superior de la interfaz de la vista Diseo (ver Figura 14).

Figura 14. Las pestaas debajo de la barra de control muestra las pginas que estn abiertas. Elegir lugar Archivo>. En el cuadro de dilogo 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 dilogo Abrir.

Haga clic una vez cerca de la parte derecha de la pgina debajo de la cabecera para colocar el botn de Twitter horizontal y luego otra vez en el lado izquierdo (en el rea de la pgina en blanco) para colocar la imagen de casa ms grande. Utilice la herramienta Seleccin para seleccionar el botn 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 Seleccin para arrastrar la imagen Twitter girar o presionar las teclas de flecha para alinear el botn de Twitter contra el centro de la parte derecha de la pgina. Seleccione la imagen de casa ms grande que acaba de colocar en el centro de la pgina del centro utilizando las guas inteligentes que aparecen. Tambin puede mantener pulsada la tecla Mays mientras pulsa las teclas de flecha para mover la imagen seleccionada 10 pxeles a la vez en una direccin especfica. Despus de realizar estos cambios, la imagen de casa ms grande debe estar centrado en la parte blanca de la pgina y la imagen girada Twitter botn centrados y alineados a lo largo del extremo derecho de la pgina (ver Figura 15).

Figura 15. Coloque el mensaje de Twitter en el lado extremo derecho de la pgina y colocar la imagen en casa grande en el medio de la pgina. Nota: Cuando colocas los objetos, adems de hacer clic en (que se inserta la imagen en su tamao original) tambin puede hacer clic y arrastrar el cursor para redimensionar la imagen para adaptarse a una regin especfica en la pgina. Sin embargo, como de completar estos pasos, simplemente haga clic en la pgina cerca de la ubicacin deseada para colocar las imgenes en la pgina en sus dimensiones originales. A medida que se estn posicionando la imagen de casa grande, observe que la pgina se expande en longitud si se arrastra la imagen de ms abajo en la pgina. El contenido de pie de pgina se mueve hacia abajo y el encabezado y pie de pgina se conservan. Para este ejemplo, la posicin de la imagen de su casa para alinear en el centro del rea de la pgina, de aproximadamente 20 pxeles por debajo de la lnea de gua que separa la cabecera de la pgina principal de la pgina, por lo que est por debajo de la cabecera y por encima del pie de pgina con alguna espacio en blanco en todos los lados. Volver al inicio >>

Fijacin de las imgenes a la ventana del navegadorCuando se coloca una imagen o utilizar otros mtodos para aadir ilustraciones a una pgina, puede utilizar la herramienta de seleccin y las teclas de flecha para cambiar su posicin. A medida que avanza la imagen de todo, se mueve en relacin con los otros elementos (imgenes, texto y multimedia) que tambin existen en la pgina. Usted tiene la capacidad de mover los elementos de otros tambin, pero la pgina entera se comporta como un folleto o un cartel. Los elementos de la pgina existe en un solo plano. Si una pgina es larga (contiene una gran cantidad de contenido vertical) y los rollos de los visitantes hacia abajo ya no ven las imgenes en la parte superior de la pgina. 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 pgina. Cuando se utiliza la herramienta Pin, que son esencialmente de la eliminacin de una imagen del flujo de la pgina. En lugar de por la que se a cabo en relacin con los otros elementos de pgina, lo establece en una ubicacin especfica en relacin con el navegador. Pinned imgenes parecen ser "pegajoso" - mantenindose siempre en un punto (por ejemplo, la esquina superior derecha, o flotando cerca de la parte inferior), independientemente de otros elementos de desplazamiento de pgina. Si el visitante cambia el tamao de su navegador, las imgenes siempre se quedan prendidas en su lugar de clavado en relacin con la ventana del navegador. Usted puede pensar en depositadas como una forma de "romper la imagen hacia fuera" del diseo de una pgina 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 posicin de clavado en relacin con el navegador si el visitante cambia el tamao de la ventana del navegador, pero el elemento fijado no se mover si los rollos de visitantes del contenido de la pgina 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 transformacin controladores de esquina para girar la imagen 90 grados, a una orientacin vertical con el texto hacia el lado derecho de la pgina. Utilice la herramienta de seleccin y las Guas inteligentes que aparecen automticamente para centrar la imagen verticalmente en la pgina. Mientras que la imagen est an seleccionado, haga clic en la posicin 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 posicin del punto en la herramienta Pin para especificar qu regin 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 tamao para disminuir y aumentar el ancho de la ventana de vista previa. Se dar cuenta de que el grfico de Twitter se mueve horizontalmente a medida que cambia el tamao del ancho de la ventana del navegador. Ms tarde, si se agrega ms contenido a la pgina de inicio para que sea ms largo, la imagen fija se quedarn donde estn y permanecen visibles, incluso si el visitante se desplaza hacia abajo para ver la parte inferior de una pgina de largo. Nota: Para asegurarse de que una imagen siempre se mantiene por encima de todos los otros elementos de pgina, 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 >>

Adicin de enlaces externos a las imgenesCuando los visitantes llegan a la pgina principal, hay dos objetivos principales: la ruta a ver un vdeo y atraer a seguir la compaa en Twitter. En esta seccin, usted aprender cmo agregar el enlace a la grfica Twitter clavado en la parte derecha de la pgina. Cuando se coloca el botn de Photoshop en la pgina principal, utiliza el men de Enlace para seleccionar el nombre de la pgina principal de la lista, para agregar un enlace a la pgina de inicio para el logotipo. En esta seccin, usted aprender cmo agregar un enlace externo a una imagen. Seleccione el grfico Twitter. A pesar de que est seleccionado, vamos a aadir un enlace nuevo, pero esta vez tendr un vnculo a un sitio web externo, en lugar de seleccionar una pgina del sitio existente. Escriba o copie y pegue el siguiente enlace absoluta directamente en el campo de enlace: http://twitter.com/katiescafe Adems de introducir las direcciones URL a otros sitios web, tambin puede escribir direcciones de correo electrnico para crear enlaces de correo electrnico, 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 >>

Adicin de una caracterstica de la coleccin que muestra el vdeo alojado en un servidor de tercerosUna caja de luz es un bonito efecto que es fcil de configurar. Le permite incluir contenido de una manera que temporalmente se oscurece el resto de la pgina, 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 caractersticas del sitio que se pueden arrastrar y colocar en una pgina para aadir nuevas funcionalidades. Usted aprender ms acerca de los widgets ms adelante en este artculo, pero al insertar sta en primer lugar, observa lo fcil que es aadir caractersticas complejas a su sitio y crear una experiencia nica en lnea para los visitantes. Esencialmente, este control puede ser configurado de forma que cuando un visitante interacta con el contenedor de disparo, el contenido del contenedor de destino se muestra prominentemente como todo el resto de la pgina est atenuado temporalmente. Una caja de luz atrae la atencin del visitante con el contenido ofrecido en el blanco. Abra la librera de widgets en la parte inferior derecha, en el grupo de paneles. (Ya debera estar abierto, pero si est cerrado, elija Ventana> Biblioteca Widgets). Expanda la seccin Composicin clic en la flecha que apunta hacia abajo. Seleccione el widget de la pantalla la mesa de luz, y arrastrarlo a la pgina (ver Figura 18).

Figura 18. Arrastre una copia del widget pantalla la mesa de luz fuera de la seccin Las composiciones de la Biblioteca de Widgets y en la pgina. 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 versin por defecto del widget pantalla la mesa de luz tiene tres recipientes ms pequeos gatillo gris situado sobre el contenedor de destino ms grande (borde negro con la imagen de la flor). Haga clic en la pequea caja gris a la derecha dos veces. La primera vez, el indicador de seleccin muestra el widget de la palabra. Haga clic una segunda vez, hasta que el indicador de seleccin en la esquina superior izquierda del panel de control dice: Contenedor. (Las cajas ms pequeas grises son el desencadenante de este widget). Pulse Retroceso (Windows) o Suprimir (Mac) para eliminar el disparo seleccionado. A continuacin, 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, slo una sola caja gatillo gris que queda. Como se borran cada disparo, que tambin se elimina el contenedor de destino correspondiente. Despus de realizar estos cambios slo un par se mantiene: un contenedor de un solo disparo sobre fondo gris y una caja de seleccin mayor, con un borde oscuro y un marcador de posicin de la hoja grfica 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 seleccin en la esquina superior izquierda muestra la pgina de la palabra. Seleccione la imagen de casa grande en la pgina y elija Edicin> 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 ms pequeo gatillo gris). Elija Edicin> Pegar (o pulse el atajo de teclado para pegar la imagen en casa dentro del contenedor de activacin del widget pantalla la mesa de luz). El recipiente pequeo gatillo gris actualiza automticamente 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 activacin del widget de pantalla de luz. Si hace clic en el botn de vista previa en el panel de control y probar la pgina de inicio, ver la imagen de casa grande, como las primeras cargas de la pgina. Si hace clic en el "Misterio Latte" de la imagen (en el contenedor de activacin), el efecto de la coleccin se invoca y la pgina se oscurece como la hoja acanalada se muestra en el contenedor de destino. Pulse Escape para salir de la caja de luz y, a continuacin, haga clic en el botn Diseo en el panel de control para continuar editando la pgina 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, rectngulos rellenos, texto o contenido HTML incrustado que ha copiado de otro sitio web. El contenido HTML incrustado se aborda con ms detalle ms adelante en este artculo, pero por el momento, imagine que usted visit YouTube.com y copiar el cdigo de insercin de un vdeo que public en su sitio. El cdigo fuente se copia se guarda en el portapapeles. Sin embargo, a los efectos de este ejemplo, puede copiar el cdigo fuente que se proporciona a continuacin: El cdigo anterior contiene un enlace a un archivo de vdeo 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 pgina web. Despus de copiar el cdigo anterior, volver a Muse. Utilice la herramienta Seleccin para hacer clic de distancia en el borde gris de la pgina, de modo que la seleccin de los Indicadores en la esquina superior izquierda muestra la pgina de la palabra, lo que significa que slo la pgina seleccionada. Haga clic en el contenedor de destino ms grande con el indicador de seleccin 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 seleccin en la esquina superior izquierda muestra la palabra: Contenedor. Haga clic de nuevo (se dice de contenedores de nuevo) y luego una vez ms, hasta que el indicador de seleccin muestra la palabra: Image Frame. Pulse Retroceso (Windows) o Suprimir (Mac) para eliminar la imagen de marcador de posicin del contenedor de destino. Mientras que el contenedor de destino interno an est seleccionada, se le pega el cdigo HTML que ha copiado ms arriba.Esto puede ser un poco difcil porque el objetivo es pegar el cdigo dentro del contenedor de destino del widget. Es posible (dependiendo de lo que usted ha seleccionado en ese momento) para pegar el cdigo de vdeo fuera del widget, por lo que se incrustan directamente en la pgina. 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 cdigo de vdeo no se peg correctamente en el contenedor, por lo que muestra inmediatamente. Siga estos pasos para pegar el cdigo de vdeo en el contenedor de destino (mientras que el Indicador de Seleccin 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 Edicin> Pegar para pegar el cdigo de YouTube que ha copiado arriba, en el campo de cdigo HTML.Haga clic en Aceptar. Por otra parte, en muchos casos, Muse detectar automticamente cuando se pega el cdigo HTML, y entender que se trata de HTML en lugar de slo texto sin formato. As que si usted prefiere, en lugar de elegir Objeto> Insertar HTML para abrir la ventana HTML, tambin 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 cdigo fuente en el contenedor de destino). Muse ofrece muchos mtodos para lograr el mismo objetivo de pegar el cdigo de vdeo en el contenedor de destino. Despus de pegar el cdigo en el contenedor de destino, ver el primer fotograma del vdeo que se muestra. Eso indica que el contenedor tiene cdigo HTML pegado en su interior. El video slo se reproducir cuando haga clic en el botn de vista previa en el panel de control o previsualizar la pgina en un navegador. Mientras que el contenedor de destino se selecciona, arrastre los selectores de transformacin para hacer que el contenedor de destino mucho ms grande, de aproximadamente 640 x 400, con el fin de mostrar las dimensiones del vdeo de YouTube.Tambin puede utilizar la herramienta Seleccin para volver a colocar el contenedor de destino para ponerlo en el lugar donde desea que aparezca en la pgina. Desde la seleccin de la parte correcta del widget es muy importante, es posible que resulte ms fcil hacer clic completamente alejado desde el widget (haga clic en el borde gris en el lado de la pgina, de modo que el indicador de seleccin muestra la palabra: la pgina). A continuacin, haga clic en el widget una vez ms, de manera que el indicador de seleccin 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 slo el contenedor de destino que contiene el vdeo, haga clic de nuevo para que el contenedor de destino externa se selecciona, para volver a colocar el vdeo.

Haga clic dos veces ms (para seleccionar el recipiente interior y, a continuacin seleccionar el vdeo, que es el cdigo HTML).Mientras que el video es seleccionado, el indicador de seleccin muestra la palabra: elemento HTML. Si pulsa la tecla Escape una vez, el indicador de seleccin pasos subir un nivel en la jerarqua anidada y selecciona el recipiente interior de la meta. El Indicador de Seleccin muestra la palabra: Contenedor. Mientras que el interior ms contenedor de destino se selecciona, establecer el color de relleno del recipiente a slido blanco para crear un marco alrededor del vdeo. A continuacin, pulse la tecla Escape una vez ms, para pasar a otro nivel, el recipiente exterior de la meta. El indicador de seleccin sigue mostrando el contenedor de la palabra, pero se puede decir que ha seleccionado el recipiente exterior debido a que el cuadro de lmite con asas rodea el recipiente exterior que se ha seleccionado en la pgina. Mientras que el contenedor de destino externa est seleccionada, establezca su relleno a un color marrn 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 (vase Figura 20).

Figura 20. Pegue el cdigo 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 vdeo en la pgina. Si bien el recipiente exterior se ha seleccionado para el contenedor de destino, puede utilizar la herramienta Seleccin para arrastrar el contenedor de destino a la mitad de la pgina. Cuando est en el centro horizontal, un rojo gua inteligente vertical aparece temporalmente, lo que indica que los elementos que se arrastran en el centro de la pgina. O si lo prefiere, tambin puede colocar el contenedor de destino a un lado, mientras el video sigue siendo visible en la pgina principal. Como puede ver, los elementos de widgets son fciles de usar. Puede pegar en el contenido que desea agregar al botn (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 pgina de inicio en un navegador, hay algunos ajustes que har para personalizar el widget y el control de cmo se comporta. Cada widget tiene un botn de flecha azul muestra a la derecha de la misma, mientras que el widget est seleccionado en la vista Diseo. Haga clic en este botn de la flecha azul para acceder al men de opciones del widget. A medida que se las obras de construccin, puede hacer clic en este botn flecha azul en cualquier momento, para cambiar la configuracin de los widgets que haya aadido a una pgina. Para este ejemplo, utilice la siguiente configuracin en el men de opciones (ver Figura 21). Posicin: la mesa de luz Evento: Al hacer clic Transicin: Fading Velocidad: Rpido Reproduccin automtica: Off Los disparadores de Arriba: Off Ocultar todo Inicialmente: Off Anterior (Deseleccionar para ocultar el botn Anterior) Siguiente (Deseleccionar para ocultar el botn Siguiente) Cerrar (Seleccione esta opcin para mostrar el botn Cerrar) Mantenga la opcin habilitada para ver lightbox partes durante la edicin Seleccione la opcin de Mostrar todo en el modo de diseo

Figura 21. Actualizacin de la configuracin en el men de opciones para controlar cmo se comporta el widget. Haga clic en cualquier lugar fuera del men de opciones para cerrarla. Utilice la herramienta Seleccin para posicionar el botn Cerrar (la X) a la esquina superior derecha del contenedor de destino interior blanca (ver Figura 22).

Figura 22. Coloque el botn Cerrar en la esquina superior derecha del contenedor de destino interior blanca. Pruebe la pgina principal haciendo clic en el botn de vista previa en el panel de control o seleccionando Archivo> Vista previa de pginas en el explorador. Cuando la pgina se carga por primera vez, slo se ve la imagen en casa grande con el mensaje Misterio Latte y el botn de Twitter en el rea de la pgina principal, debido a que el contenedor de destino con el vdeo est oculto (Figura 23).

Figura 23. Vista previa de la pgina en un navegador para ver cmo aparecer a los visitantes. Haga clic en la imagen de misterio en casa Latte para ver la ventana de la coleccin parece que oscurece el resto de la pgina.Llenar el contenedor de destino externo (que es malva o de color marrn claro, semi-transparente) llena la ventana del navegador y el vdeo se enmarca en blanco el contenedor de destino interior de color de relleno slido. Haga clic en el botn Reproducir en el centro del vdeo para verlo jugar. (El video est reproduciendo desde el sitio web de YouTube, donde se aloja el archivo de vdeo). Cuando haya terminado de ver el video, haga clic en el botn de cerrar (x-icon) en la esquina superior derecha del rea de marco blanco para cerrar la caja de luz y volver a la pgina de inicio. Haga clic en el botn de Twitter para ver la carga de la pgina de Twitter. Las caractersticas de la pgina de inicio ahora estn trabajando como se esperaba. Ahora que ha aadido algo de contenido a la pgina principal, podr continuar a la siguiente seccin de este tutorial, La construccin de su primer sitio web en la parte Muse 3. En la Parte 3, usted aprender cmo utilizar la herramienta Rectngulo para crear elementos de borde mediante un relleno de fondo de las imgenes en mosaico y la forma de copiar y pegar los elementos en una sola pgina para pegarlos en su lugar y aadirlas a otras pginas en el sitio.