Introduccin

Qu es Adobe Muse?

use Crea y publica sitios web dinmicos para ordenadores de sobremesa y

dispositivos mviles que cumplan con los estndares web ms recientes sin
escribir cdigo. Disea libremente con herramientas conocidas y cientos de
fuentes web. Aporta interactividad fcilmente, incluidas presentaciones de
diapositivas, formularios y otros elementos. Guarda archivos con Creative Cloud para
acceder desde cualquier lugar y compartir con facilidad. Todo tu mundo creativo en un
nico lugar. Solo en Creative Cloud.

Funciones:
Planificacin de Sitios Sencillo: Disea tu
sitio de forma visual. Aade, nombra y organiza las
pginas en tu mapa del sitio y aplica la
configuracin de la pgina maestra con tan solo
unos clics. Arrastra y suelta las pginas para
reorganizarlas.

Funciones de diseos intuitivos: Utiliza el

nuevo panel Capas para controlar los elementos de
diseo. Disea con la ayuda de las conocidas
herramientas de Adobe como Cuentagotas, Guas
inteligentes, Pegar en contexto y Editar original.

Adobe Muse

tu

Cientos de fuentes: Elige entre cientos de tipos de letra, incluidas las Adobe Edge Web
Fonts alojadas en el servicio de Adobe Typekit, adems de fuentes compatibles con la Web
y fuentes de sistema.
Interactividad fascinante: Aade a tus
sitios
web
navegacin
personalizada,
presentaciones de diapositivas, formularios de
contacto y otros elementos con solo arrastrar
y soltar. Todos los widgets interactivos de
Adobe Muse CC funcionan de forma tctil en
los dispositivos mviles.

HTML incrustado: Aade a tus sitios Google

Maps, vdeos de YouTube, feeds de Facebook,
archivos de animacin HTML5 y mucho ms sin escribir cdigo. Solo tienes que copiar y
pegar el cdigo fuente en tu pgina y Adobe Muse CC se encarga del resto.

Prueba y vista previa del sitio:

Realiza una vista previa de las
versiones para ordenador de
sobremesa, smartphone y tablet
tus sitios web. Revisa los sitios web
tus
clientes
y
realiza
modificaciones antes de que se
publiquen.

de
con

Edicin en el navegador: Permite que los propietarios de los sitios web introduzcan
cambios en el contenido de sus sitios web publicados por medio de un navegador. Decide si
deseas fusionar los cambios con los archivos originales de Adobe Muse o no.
Optimizado para motores de bsqueda: Consigue que te encuentren en Google, Bing y
Yahoo! Los mapas de sitio generados automticamente se han optimizado para su
funcionamiento con motores de bsqueda, con independencia de que utilices servicios de
alojamiento de Adobe o de un proveedor externo.
Acceso a archivos desde cualquier lugar: Disfruta de 20 GB de almacenamiento en la
nube y del acceso a tus archivos de sitios web en cualquier momento y en cualquier lugar.
Comparte bocetos de diseos y demostraciones de sitios publicados con clientes y
compaeros.
Pginas maestras: Define y controla elementos comunes a varias pginas, como
encabezados, pies de pgina, logotipos y navegacin. Basta con agregarlos al diseo de las
pginas maestras.

Adobe Muse

Entorno del Programa.

Barra de Mens

Barra de Ttulos

Fases de Publicacin

Barra de Propiedades

Esquema de la Pginas Dividas en Organigramas

Pginas Maestra

Barra de Ttulos: Lugar donde se encuentra el nombre de nuestra pgina.

Adobe Muse

Barra de Mens: Es la barra de men estndar encontrada en todos los programas de

diseo.

Fases de Publicacin: En ella encontramos 4 fases que son planificacin, Diseo, Pre
visualizacin y Publicacin. Nos da la posibilidad la crear nuestras pginas y tambin
generar nuestra pgina maestra.

Esquema de las Pginas: Esta ordenada por un orden jerrquico en el cual podemos
crear los botones muy fcilmente.

Pgina Maestra: Nos da la posibilidad de crear objetos que se repiten en otras pginas.

Tenemos la posibilidad de disear las pginas y tambin modificar

la Pgina
maestra
Nos permite
visualizar
tal como se ver en el navegador

Permite Publicar la pgina online.

Ambiente grfico para disear la pgina podemos insertar formas, botones, imgenes, etc.

Cmo Crear un Sitio Nuevo?

Crear un Nuevo sitio.
1- Clic en Archivo.
2- Nuevo sitio.
3- O directamente con el comando Ctrl+N en
nuestro teclado

Configurar el nuevo sitio

Configura la plataforma en el cual se har la pgina, Ordenador, Tablet o Mvil.

Adobe Muse
Configura el anchoPermite
y la altura
mnima
pixeles.ms prctica la cantidad de columnas, ancho y medianil.
colocar
deen
manera

Configura las 4 mrgenes

principales
enelpixeles.
Permite
cambiar
relleno de las mrgenes que se ver en el navegador.

Lugar de trabajo.
Barra de Herramientas y colores

Panel de ventanas acoplables.

Espacio de Trabajo
Regla

Herramientas de Diseo en Adobe muse

Adobe Muse

Nivel(H)
de zoom. Teclado:
(H)
Texto. Teclado: Mano.
(T)
Teclado:
Opciones
de Visualizacin.

Seleccin. Teclado: (V)

Ir a (M)
Pgina. Teclado: (Ctrl+J)
Cortar Teclado: (C)
Rectngulo
Teclado:
Lupa Teclado:
(Z)

Importante: Cada herramienta cuenta con propiedades diferentes, que podemos

verlas por debajo mismas de ellas.

Cambia el color del fondo o de un objeto, dependiendo

sobreagregar
que
estamos
ubicados
Modifica el
grosor
de
la lnea
de un
objeto.
Permite
efectos
tanto
como sombras, resplandore

Propiedades de la herramienta seleccin

5
Modifica
el color uno
de los
de los objetos
imgenes.
Aplica el
transparencia
a losde
objetos
imgenes.
Redondea
porcontornos
uno, los extremos
de losoModifica
objetos,
poniendo
redondez
en pixeles.
color de el
losgrado
contornos
en e
nuestra
pgina

Ejercicio N 1.
Crea lo siguiente utilizando lo aprendido.

Rellenos degradados.
1- En la barra de herramienta hacer clic
en Relleno.

Adobe Muse

2- Luego elegir la opcin degradada.

3- Elegir dos muestras de colores.
4- Luego la direccin del nuestro
degradado.
Ejercicio N 2.

Realizamos lo siguiente:

Relleno con imagen.

1- Insertar una forma rectangular

2- En la barra de herramienta hacer clic
en Relleno.

3- Luego elegir la opcin Imagen.

4- Se abrir una ventana en el cual
podrs importar la imagen que
usaremos.
6

5- Una vez importada la imagen

tendremos que configurar el
Encaje.
Entre las opciones de Encaje
tenemos:
Cambiar escala hasta rellenar, Cambiar escala hasta encajar, Tamao
original, Mosaico, Mosaico Horizontal, Mosaico Vertical.
Ejercicio N 3.

Realizamos lo siguiente:

Adobe Muse

Propiedades de la herramienta texto.

Aplica:
Negrita, Cursiva, Subrayado, en ese orden.
Permite cambiar el estilo
de Texto.
Relleno del texto

Tamao
Alineaciones:Modificamos
Izquierda, centrada,
derecha
y justificada, en ese orden.
La pgina
maestra.
1- Le damos doble clic a la pgina
maestra que est ubicado en la parte
inferior de nuestra ventana.
2- Se abrir nuestro espacio de trabajo y
empezamos a insertar los Clic en el cuadro para modificar la pgina maestra.
objetos que sern visibles en
todas las pginas.
3- Realizamos los cambios que
deseemos.

Adobe Muse

Creamos la Pgina maestra

1- Creamos un nuevo sitio de trabajo de 950x1000 px.

2- Nos ubicamos en la pgina maestra.
3- Vamos a Archivo->Colocar y buscamos un fondo para nuestra pgina.

Tamao del fondo:

X: 0 y:0
An: 959 Al: 1000

Fondo de la pgina.
4- El fondo debe tener ms o menos el mismo tamao de nuestra pgina.
5- Luego pasamos a poner el encabezado y el pie de pgina como nos muestra la
imagen.

Adobe Muse
Encabezado

Pie de pgina

rea de planificacin.
Una vez creada la pgina maestra nos dirigimos en el rea de planificacin de nuestra
pgina web.

Mostrar en pantalla lo siguiente.

Crean pginas que

luego se convertirn
en botones de acceso
para nuestra pgina.

Oculta los SubPginas

El rea de
planificacin
est
estructurada en
forma de

Adobe Muse

10

Ejercicio N 4.
Crear el siguiente rbol de pginas en el rea de planificacin.

Planificacin.
1- Inicio.
2- Nosotros.
2.1- Contactos.
2.2- Inicios
3- Ventas.
3.1- Hardware
3.2- Software
4- Cursos.
4.1- Secretariado.
4.2- Informtica.

Adobe Muse

11

Crea la siguiente pgina.

Pasos:
1- Lo primero que aremos es, ir a rea de Planificacin.
2- Creamos nuestras pginas los nombres de: Inicio, Educacin, Objetivos,
Actividades y Contacto, uno tras de otro.
3- Nos dirigimos en nuestra Pgina maestra y Colocamos los objetos que se
repetir en todas las pginas.
4- Creamos lo siguiente de abajo en sus correspondientes pginas.
5- Observacin: En la pgina maestra inserta un men en, Objeto->Insertar
Widget->Men, y elija el men horizontal, luego personaliza los colores del
men.

INICIO

Adobe Muse

12

EDUCACIN.

Adobe Muse

13

OBJETIVOS.

Adobe Muse

14

ACTIVIDADES

Adobe Muse

15

CONTACTOS

Adobe Muse

16

Widgets en Muse

uede agregar funciones interactivas de sitio y contenido generado de forma dinmica con los
widgets en Muse. Los widgets son objetos predefinidos y configurables con algunas de las
prestaciones web ms habituales, como mens,
formularios, proyecciones de diapositivas, etc.
En
Muse encontrar una amplia gama de widgets que le
facilitarn hasta el diseo web ms complicado.
El estilo de los widgets de Muse puede ir acorde al diseo
de
su
sitio, de forma que se combinen perfectamente con el resto
de
pginas web. La Biblioteca de widgets contiene todas las
funciones del sitio incorporadas previamente (widgets) que
se
pueden arrastrar a las pginas, configurar para controlar su comportamiento y asignar un estilo para
modificar su aspecto.

Tipos de widgets
En Adobe Muse se incluyen los siguientes tipos de widgets:
Widgets de composicin: estos widgets permiten interactuar con una zona de la
pgina web para cambiar el contenido mostrado en otra zona. Este cambio puede
implicar una animacin de desplazamiento o atenuacin.
Widgets de formulario: aaden un formulario al sitio que pueden usar los
visitantes para ponerse en contacto con usted. Hay disponibles diferentes campos de
formulario, en funcin del widget de formulario elegido.
Widgets de men: crean una barra de mens rellena de forma manual o
dinmicamente con un estado para cada elemento del men. En cada pgina, el
vnculo de men correspondiente tendr de forma automtica un estado "activo"
para demostrar que se encuentra en esa pgina.
Widgets de panel: muestran los paneles de contenido de uno en uno, con vnculos
de navegacin intuitivos para cambiar de panel visible. Puede elegir entre una
estructura de acorden con una animacin de desplazamiento o un diseo con
pestaas mucho ms familiar.
Widgets de proyeccin de diapositivas: estos widgets permiten mostrar las
imgenes en una galera con animaciones ms que elegantes. Son ideales para
proyecciones de imgenes sencillas. Si quiere darles un uso ms complejo, le
recomendamos que use un widget de composicin.
Widgets sociales: los widgets sociales permiten configurar de forma fcil HTML
personalizado e incrustarlo en las pginas de Muse. La mayora de widgets web
incluyen funciones que tambin estn disponibles si se incrusta HTML de sitios web
de terceros. Podr ahorrar bastante tiempo si aade y configura el contenido web
desde Muse en lugar de generar el cdigo fuera de la aplicacin y pegarlo despus
en Muse como HTML incrustado.

Adobe Muse

17

Adicin de un widget a una pgina web de Muse

Puede seleccionar y aadir widgets a una pgina web de Muse desde la biblioteca de
widgets. Para aadir un widget, haga lo siguiente:
1.
En Adobe Muse, seleccione Ventana > Biblioteca de widgets. Aparecer el panel
de la biblioteca de widgets.
2.
En dicho panel, seleccione el widget que desee y arrstrelo a la pgina web de Muse.
Para seguir configurando el widget, haga clic en el botn
para abrir el panel de opciones.
Para obtener ms informacin, consulte Configuracin y personalizacin de widgets.

Configuracin y personalizacin de widgets

En Adobe Muse podr configurar widgets a travs del panel Opciones despus de colocarlos
en las pginas web. El panel Opciones es un panel contextual que le permite aplicar cambios
para actualizar los ajustes que son especficos de dicho widget. El panel Opciones contiene
ajustes con los que es posible determinar el aspecto del contenido.
Con las opciones de relleno y trazo podr mejorar an ms el aspecto de un widget. Si el
widget contiene texto, puede usar el panel Texto(Ventana > Texto o las opciones de texto
del panel de control) para modificar y aplicar estilo al texto conforme lo crea necesario.

Adobe Muse

Para configurar un widget, haga lo siguiente:

En el ejemplo siguiente, se muestra el panel Opciones de un widget horizontal.

1. En Adobe Muse,
arrastre
cualquier
widget a la pgina web.
2. Con el widget
seleccionado,
haga clic en el botn
Opciones.

para mostrar el panel

3. En
el
panel
Opciones, modifique o actualice los ajustes segn
sea necesario.
4. Haga clic en cualquier otra parte de la pgina para cerrar el panel Opciones.

18

Seleccin de elementos anidados y contenedores dentro de una jerarqua

de widget
Cuando se arrastra un widget fuera de la Biblioteca de widgets y a una pgina,
fundamentalmente se est colocando un conjunto anidado de contenedores.
Al trabajar con widgets, es importante entender cmo se debe seleccionar tanto el widget
como sus contenedores. Adobe Muse muestra su seleccin actual con el indicador de
seleccin. El indicador de seleccin (que encontrar en la esquina superior izquierda de
Adobe Muse) muestra la seleccin actual, junto con un men desplegable en el que podr
pre visualizar un objeto con un estado concreto.
En los siguientes ejemplos, el indicador de seleccin muestra la seleccin de la pgina (si no
se ha seleccionado ningn objeto de la pgina web), un widget de men (al seleccionar
dicho widget) y un elemento de men (contenedor de un widget de men).

Al dejar todos los elementos de la pgina sin seleccionar.

Adobe Muse
Al seleccionar un widget de men.

Al seleccionar un contenedor y en este caso un elemento de men en un widget de

men.
Cuando se hace clic en todo el widget, el indicador de seleccin muestra la palabra
"Widget". Si hace clic de nuevo, puede seleccionar un contenedor dentro del widget y el
indicador de seleccin muestra la palabra "Contenedor". Puede seguir haciendo clic
varias veces para seleccionar los elementos (como, por ejemplo, los marcos de texto)
que se anidan en el interior de los contenedores. Mientras selecciona un marco de texto, el
indicador de seleccin muestra la palabra "Marco de texto". Mientras hace clic en un widget
para "profundizar" en el interior de los elementos anidados, es recomendable tener en
cuenta las palabras del indicador de seleccin para saber qu elementos anidados estn
seleccionados. Deber seleccionar diferentes contenedores (como, por ejemplo, botones
individuales de navegacin) para actualizar los estados de los botones, lo que le permite
controlar opcionalmente el aspecto de los botones cuando la pgina se carga por primera
vez, cuando el visitante se sita sobre un botn y cuando el visitante hace clic en ellos.
Haga clic en los contenedores anidados en un widget; se puede hacer clic varias veces en el
elemento que desee editar. Tenga en cuenta el indicador de seleccin y las opciones
presentadas en el panel Estados para ver cundo ha seleccionado el elemento anidado que
desea cambiar. Una vez que haya terminado de actualizar un widget, puede hacer clic en
otra parte (otro lugar de la pgina) para deseleccionar el widget o pulsar la tecla Escape
varias veces para subir un nivel en la jerarqua del widget.

19

Control del comportamiento y visualizacin de los widgets actualizando los

ajustes en el men de opciones
1- Despus de arrastrar un widget
fuera de la Biblioteca de widgets y a
una pgina, ver un icono azul de
flecha que aparece en la esquina
superior derecha del widget, cuando
el widget est seleccionado. Haga
clic en este icono azul de flecha
para abrir el men de opciones.
2- Cada
widget
tiene
diferentes
opciones disponibles, por lo que las
opciones que se pueden definir en
la
interfaz
del
men Opciones pueden variar. La
configuracin
controla
el
comportamiento del widget (por
ejemplo,
eligiendo
si
una
presentacin de diapositivas se
reproduce automticamente o si los
visitantes deben hacer clic en las
miniaturas para ver las imgenes
ms grandes) y su visualizacin (por
ejemplo, especificando el tipo de
transicin que se animar a medida
que se muestre cada nueva
imagen).
3- Como alternativa, tambin puede optar por
configurar manualmente los widgets de men,
si prefiere asignar personalmente un nombre a
los botones y aadirles los vnculos a las
pginas especficas, en lugar de permitir que
Muse cree los elementos del men. En el men
Opciones, en la seccin denominada Tipo de
men, puede seleccionar la opcin Manual

Adobe Muse

20

Ejercicios de Widgets.
Ejercicio 1- Widget en Blanco:
1- Crear un Nuevo sitio.
2- Dirigirse al rea de diseo.
3- Insertar un widget de tipo composicin en
blanco. Objeto->Insertar Widget>Composicin->En Blanco.
4- Editar cada estado de cada uno de los tres
botones inferiores y tambin la imagen que
aparecer por encima de ese botn. (Con solo
hacer un clic en el botn vas cambiando de
accin o estado.)
5- Por cada botn insertar una imagen semejante
al ejemplo de abajo (Puedes hacer doble clic en
el cuadro donde ira el celular y rellenar con una
imagen.)
6- Debes tener en cuenta que para
poder nombrar cada botn
solo debes utilizar la
herramienta de texto.
7- Lo nico que va cambiando en
la este widget es la imagen de
fondo del celular. (Podras
insertar una forma y rellanarla
con la imagen de fondo)
8- Una vez terminado de editar
los tres botones puedes
visualizar el trabajo en el rea
de Previsualizar.

Adobe Muse

21

Ejercicio 2 - Presentacin con diapositivas

1- Crear un Nuevo sitio.
2- Dirigirse al rea de diseo.
3- Insertar un widget de tipo Proyeccin de
Diapositivas. Objeto->Insertar Widget
->Proyeccin de Diapositivas ->En
Blanco.
4Ajuste
el
tamao
del
widget
a
su
gusto,
para
aadir
las
imgenes

dirigirse

en

Proyeccin de Diapositivas

las

opciones

de

, y luego clic en el

icono
para poder aadir las imgenes.
5- Una vez insertadas las imgenes, configuramos
lo siguiente:
Transicin: Horizontal.
Velocidad de Transicin: 1 segundo.
Desactivar la Reproduccin Automtica.
6- Para cambiar los botones de siguiente y anterior lo que debemos hacer es, colocar
una imagen que ser nuestro botn de siguiente y anterior en Archivo->Colocar o
con el comando Ctrl+D.
7- Clic sobre nuestra imagen y nos dirigimos en Edicin->Cortar.
8- Ubicamos nuestros botones, uno al lado izquierdo y otro al lado derecho.
9- Doble clic sobre el botn derecho para marcarlo, nuevamente doble clic sobre el
botn para seleccionar el contenido.
10- Una vez seleccionado, pegamos nuestra imagen, y realizamos lo mismo para el
otro lado. (Usted debe realizar las transformaciones acorde al lado del botn Que
mire al lado izquierdo o derecho, automticamente la imagen heredara todas las
caractersticas del botn).

Adobe Muse

22

11- Podemos cambiar el pe de la ilustracin El texto que aparece por debajo de las
imgenes, por sus correspondiente nombres Invierno, Otoo, Primavera, Verano.
Para poder modificar el contenido del pie de la ilustracin solo debemos
hacer doble clic sobre ella, y para pasar a la siguiente imagen bastar con
un clic sobre nuestro botn.
12- Una vez terminada la edicin del pie, solo queda ver nuestra Presentacin en el
rea de Previsualizar.

Ejercicio 3 Crear un formulario

1- Crear un Nuevo sitio.
2- Dirigirse al rea de diseo.
3- Insertar un widget de tipo Proyeccin de
Diapositivas. Objeto->Insertar Widget
->Formulario ->Contacto (Sencillo),
o estirarla desde la biblioteca de
Widgets.
4- Una
vez
insertado
el
formulario
colocamos los siguientes campos:
Dato
Nombres

Adobe Muse
Apellidos

Lugar de Nacimiento
Curso
Nmero
mvil
Edad

de

Telfono

Todos los campos deben ser Obligatorios.

23

Ejercicio 4. Panel
1- Crear un Nuevo sitio.
2- Dirigirse al rea de diseo.
3- Insertar un widget de tipo Proyeccin de Diapositivas. Objeto->Insertar Widget
->Panel ->Ficha, o estirarla desde la biblioteca de Widgets.
4- Para poder editar el texto de cada ficha debemos darle un clic sobre la ficha, y para
editar el contenido doble clic sobre la misma.
5- Realizamos lo Siguiente:

Adobe Muse

24

Ejercicios

Adobe Muse

25

Adobe Muse

26

Ejercicio Final

Adobe Muse

27