Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
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 web
En 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 rectngulo
Utilice 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 >>
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 >>
Figura 10. Despus de colocar el botn de Photoshop, la posicin en la regin de cabecera de la izquierda. Volver al inicio >>
Figura 11. Vincular el logotipo del botn de Photoshop a la pgina principal con el men Enlace. Volver al inicio >>
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.
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 inicio
En 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 >>
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 >>
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 terceros
Una 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: <iframe title="YouTube de vdeo width="640" height="390" player" src="http://www.youtube.com/embed/krqjM5GmqzQ" frameborder="0" allowfullscreen> </ iframe> 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.