Curso Muse

Descripción del curso.

Muse es un programa de la familia Adobe compatible con Dreamweaver, Illustrator y Photoshop, que permite crear sitios web tan fácilmente como maquetar con InDesign para impresión.
Sin escribir código permite diseñar y publicar páginas HTML basados en los últimos estándar web y compatibles con ordenadores de escritorio, tablets y smartphones. En síntesis Adobe lo expresa así "Piense en el diseño, no en el código"


¿Qué aprenderás en este curso?

1. Planifica tu sitio:
    Mapa del sitio
    Páginas maestras
2. Diseñar con libertad, herramientas Adobe familiares. Soporta:
    Estilos de carácter, párrafo y gráficos
    Acceso a más de 400 fuentes web (Adobe Typekit)
    Gestión de imágenes
    Encabezamientos y pies
    Altura de páginas dinámicos (auto-redimensiona según el contenido)
    Optimización de imágenes
3. Interactividad avanzada:
    Auto-generar menús de navegación y galerías de imágenes personalizables
    Incluir HTML (googleMaps, youTube…)
    Anclas con transiciones
4. Publicación del sitio: dos métodos


¿A quien va dirigido este curso?

A cualquier persona que desee crear sitios web (de tamaño pequeño o medio). Permite la creación y publicación sitios web con sencillez y aumentando la productividad. Con una curva de aprendizaje muy rápida (interface similar a InDesign e Illustrator)
Recomendado para diseñadores gráficos del entorno de impresión, que deseen migrar al diseño web, sin conocimientos de programación.


Conocimientos Previos

No se requieren conocimientos previos, aunque sería recomendable, haber trabajado con Photoshop, Illustrator e InDesing y tener nociones básicas del entorno web.
Tener una formación específica inicial favorece la comprensión del contenido del curso, pero no es imprescindible.


Cursos relacionados

Dreamweaver CS6, Web App, Photoshop CS6, Illustrator CS6


Contenidos

El temario añadido a continuación se impartirá con ejercicios prácticos de manera que se puedan consolidar los conocimientos aprendidos de una manera intuitiva y útil para poder aplicarlos al flujo de trabajo diario.


Interficie
¿Qué es Adobe Muse y para que sirve?
Como adquirir Adobe Muse. Instalación y configuración.
Interficie. Paneles. Zoom y desplazamiento.
Flujo de trabajo (modos Plan, Diseño, Previsualizar, Publicar, Gestionar)

Concepto de sitio en Muse
Configurar propiedades del sitio y propiedades de página: Favicon, Metadatos.
Gestión de mapa del sitio:
Creación de páginas hermanas e hijas.
Reorganizar jerarquía.
Eliminación.
Páginas del sitio y maestras.

Páginas Maestras
Zonas: Relleno del navegador, contenido. Imagen de fondo y color de fondo (transparencia, degradados css3)
Guías maestras: establecer altura para zonas de encabezamiento, contenido y pie.
Diseño fluido vs. diseño fijo: fijar elementos sensibles a scroll y al pie.
Añadir nuevas paginas maestras. Asignar páginas maestras a páginas del sitio.
Witget menú de navegación.

Estilos de carácter y párrafo
Colocar texto (archivos soportados)
Formato local: tamaño, interlineado, interletrado, color…
Tipos de Fuentes:
web seguras
de sistema
web-fonts css3.
Rotar cajas de texto

Formas y color
Marco rectangular:
Bordes: global y para lados individuales
Ancho fijo y porcentual (body).
Imagen de fondo para marcos. Mosaico (repetición) y fijar al scroll.
Color, degradados. Muestras: almacenar, asignar nombre, herramienta cuentagotas.

Gestión de imágenes enlazadas
Colocar y multi-colocar imagen y texto.
Archivos soportados. Resolución
Colocar archivos .psd de Photoshop.
Transformación:
Re-dimensionar proporcionalmente y deformar
Re-encuadrar y pixels desbordados.
Rotar
Imágenes con cantos redondeados (problemas de peso)
Texto alternativo y tooltips.
Gestión de imágenes:
Editar original
Optimizar imágenes re-dimensionadas.
Actualizar y re-vincular.
Estilos de carácter y párrafo. Redefinir estilo.
Contorneo. Estilos de objeto
Importación de archivos Flash

Hipervínculos y botones
Hipervínculos tipos: relativos, absolutos, correo electrónico, anclas
Hipervínculos aplicados a:
Texto (estilos para links)
Imagen. Botones con estados:
.psd multicapa vs. imágenes acopladas con estados.

Efectos y estilos gráficos
Cantos redondeados: global y para lados individuales
Creación de círculos
Efectos: opacidad, sombra, bisel, resplandor
Estilos gráficos
Insertar HTML:
google map
editar HTML

Witgets
Lightbox
Pase de diapositivas…

Publicar
Excluir paginas para la exportación
Exportación del sitio para alojarlo en:
Business Catalyst
HTML