Curso completo Dreamweaver CS6

Nivel Básico.

Descripción del curso

Dreamweaver se ha convertido la en primera herramienta profesional para el desarrollo de sitios web.


¿Qué aprenderás en este curso?

Con este curso aprenderás a trabajar a nivel profesional con Adobe DreamWeaver CS6 para la realización de contenidos web. Aprenderás a crear, administrar y visualizar un proyecto web utilizando las múltiples opciones de creación de contenidos, a la vez que conoces la filosofía de maquetación de HTML, optimizando así una web compatible con los principales navegadores y versiones existentes.
Aprende cómo publicar un sitio web y gestionar los archivos de forma fácil y sencilla desde tu ordenador.


¿A quien va dirigido este curso?

Curso dirigido a profesionales del diseño gráfico y del diseño web que necesiten crear proyectos profesionales, así como a particulares y estudiantes que quieran conocer en profundidad el programa de Adobe DreamWeaver CS6


Conocimientos Previos

Se requieren conocimientos básicos del sistema operativo MacOS o Windows.


Contenidos

Introducción:

• Internet y la WWW
• Navegadores y editores de páginas web
• Principales lenguajes de edición de páginas web
• HTML: estructura y semántica
• CSS: formato y maquetación
• JavaScript: interactividad
• Contenidos estáticos y dinámicos:
• Lado cliente, lado servidor
• Concepto de sitio y página web

Interficie y entorno de trabajo en Adobe Dreamweaver CS6

• Diseño WYSIWYG
• Modos de visualización: código, diseño, en vivo
• Paneles: agrupar-desagrupar, anclar
• Guardar espacios de trabajo

Hipervínculos:

• absolutos, relativos, correo electrónico, anclas
• Hypervínculos entre imágenes
• Mapas sensitivos

Sección head: title, meta (redireccionar, metadatos)

Texto (tags):

• bloque: párrafos, encabezamientos, div…
• inline: em, strong, span…

Imágenes:

• Atributo alt
• Marcadores de posición
• Integración con Adobe Photoshop CS6: editar en origen, objetos inteligentes, copiar y pegar
• Integración con Adobe Illustrator

Tablas:

• Uso para mostrar datos, no como elementos de maquetación.

Publicación:

• Concepto de sitio web: local y remoto
• FTP alojar en un sitio remoto (ocultación)
• Favicon

Introducción a CSS (formato y maquetación)

• Concepto de hojas de estilo: dónde declarar código css
• Asociar hojas de estilo a documentos
• Panel CSS
• Tipos de selectores: redefinir elemento HTML, clase, id, contextules, grupo de selectores
• Selección múltiple de clases CSS: simultáneamente a un mismo elemento HTML, de forma asistida
• Modelo de cajaFUN- SOME NIGHTS
• Aplicar estilo a vínculos
• Maquetación uso de etiquetas div: desde cero (concepto de float, clear)
• Layouts predeterminados de DreamWeaver cs6

Widgets de Spry:

• Panel contraible, Acordeón, Paneles en fichas, Barra de menús, xml
• Inserción de elementos multimedia: swf, flv
• Comportamientos: pop-menu, mostrar-ocultar, alert…

Formularios
_________

Nivel Avanzado.


Descripción del curso.

El conocimiento del lenguaje CSS es fundamental para la maquetación de contenidos para la web.


¿Qué aprenderás en este curso?

Profundizarás en el conocimiento del CSS, aplicado a la creación de estilos y a la maquetación de una página web.
Conoceremos la siguiente versión, CSS3, para aplicar diferentes efectos visuales que mejoran el flujo de trabajo con este lenguaje y ayudarán a aumentar las posibilidades de tus diseños.
Introduciremos el trabajo con frameworks para facilitar la maquetación de tus páginas web.


¿A quien va dirigido este curso?

Curso dirigido a profesionales del diseño gráfico y del diseño web que necesiten crear proyectos profesionales.


Conocimientos Previos
Se requieren conocimientos medios del sistema operativo MacOS o Windows.
Son imprescindibles conocimientos de HTML, saber trabajar con Adobe Dreamweaver CS5, y tener conocimientos básicos de CSS.


Contenidos


CSS2 avanzado

• ¿Dónde se escribe el código CSS? Cascada y herencia

Tipos de Selectores:

• Redefinir etiqueta HTML. Universal. Identificador. Clase. Descendente. Selector hijo. de Atributos, Agrupación de selectores. Pseudo-clases, Pseudo-elementos.

Sintaxis:

• Escritura abreviada de CSS. Unidades de medida.

Media Queries CSS

• Creación de layout
• medias CSS2: impresión, dispositivos móviles antiguos
• medias condiciones CSS3: detección de distintos anchos de pantalla escritorio, iPad, iPhone

Maquetación Líquida (Responsive Web Design)
Layout de rejilla líquida. Adaptación y reestructuración de contenidos sensibles a distintos tamaños de pantalla.


CSS3

• Modificadores para añadir compatibilidad con Mozilla, Webkit, Opera
• Border-radius
• Cantos romos a imágenes y cajas
• Mismo y distintos valores para los cuatro vértices
• Sombras: cajas, imágenes, texto
• Fondos: escalables, múltiples
• Transformaciones, transiciones, animaciones
• Color HSL, HSLA, RGB, RGBA
• Opacidad
• Degradados: lineales, radiales
• Selectores de atributos con expresiones regulares

Multi-columnas

• Importación fuentes
• Generadores CSS3
• Saber la compatibilidad CSS3 y HTML5 con navegadores y versiones

HTML5

• Etiquetas semánticas:
• header, footer, nav, section, article, aside
• Compatibilidad con navegadores antiguos
• Trabajo off-line
• Audio y video nativo
• SVG archivo vectoriales nativos
• Formularios mejorados
• tipos de input: date, range, color, deslizadores
• atributos: placeholder, requered, valid

Transiciones y transformaciones CSS3 de forma asistida

• Cambiar determinadas propiedades de forma progresiva, no bruscamente, mediante cuadros de diálogo

Uso de WebFonts con links locales de forma asistida

• Configurar y descargar conjuntos fuentes web, con todos los formatos para garantizar soporte en todos los navegadores modernos. Gestión en el sitio local usando Paneles (Importación y aplicación de Web Fonts).

Uso de WebFonts basados en links remotos

• Validación desde DreamWeaver
• JumpMenu y alternativa sin JavaSprit
• Widgets
• Anclas usando identificadores
• Server-Side include
• Sugerencias de código HTML5 y CSS3
• Configurar Preferencias para testear en el emulador iOS

Introducción a Adobe Edge (animaciones HTML5)

• Las animaciones generadas por Flash no están soportas por dispositivos iOS.
• Adobe Edge permite crear animaciones nativas HTML5 (no requiere instalar plugins en el navegador con en Flash) y esta soportado por Tablets y smartPhones y navegadores de escritorio de última generación. Interficie similar a Adobe After Effects. También permite añadir interactidad y efectos especiales a tus páginas web.

Adobe Wallaby

• Convertir animaciones Flash a animaciones HTML5.

Introducción a JavaScript + PHP

• Variables, Array, funciones, eventos, objetos métodos propiedades

jQuery+jQueryUI

• jQuery es una librería gratuita y con amplia compatibilidad con navegadores y versiones. Nos ajuda a mejorar nuestras páginas web de una forma sencilla, incrementando la productividad y que el usuario obtenga una experiencia más dinámica. Con conocimientos de HTML, CSS y javaScript la curva de aprendizaje es muy rápida.