Curso Diseño Web

OBJETIVOS:

Tras la realización del presente curso el alumno será capaz de diseñar una web, incluyendo los elementos que la componen, navegación y funcionamiento. Conocerá los conceptos y vocabulario utilizados en el entorno laboral de diseño web. Además, podrá desenvolverse con dominio en los aspectos de creación y mantenimiento de páginas web, así como en el manejo de archivos almacenados en un servidor web.


Programa:

Conceptos básicos
Navegadores y editores de páginas web.
Principales lenguajes de edición de páginas web
Lenguajes cliente.
Lenguajes servidor.
XHTML, HTML y CSS.
Contenido y presentación.
W3C
Etiquetas.
Tipos de contenidos
Contenidos estáticos.
Contenidos dinámicos.
El concepto de sitio web.
Diseño WYSIWYG.
Edición de código.

Entorno de trabajo en Adobe Dreamweaver CS5
Modos de visualización
Vista de código.
Vista diseño.
Vista partida.
Vista en vivo.
Código en vivo.
Paneles principales
Barra de aplicación.
Barra de inserción.
Panel de Propiedades.
Panel de Archivos.
Panel de CSS.
Panel de elementos PA.
Otros paneles.
Modificar el espacio de trabajo
Agrupar y desagrupar paneles.
Fijar paneles.
Mover grupos de paneles.
Cambiar la visualización de los paneles.
Personalizar espacios de trabajo.
Guardar espacios de trabajo.
Modificar y eliminar espacios de trabajo.
Alternar entre espacios de trabajo.
Ayudas visuales
La cuadrícula.
Modificar aspecto de la cuadrícula.
Reglas y guías.
Modificar y bloquear guías.

Creación y administración de sitios web
Concepto de sitio web.
Diferencia entre sitio web local y remoto.
Control del sitio web mediante la ventana Sitio.
Configuración de sitios web.

Creación de una página web
Configuración general de la página web.
Tipos de archivos en Adobe Dreamweaver CS5.
Plantillas de inicio con CSS.
Extensiones.
Inserción de texto.
Tipos de estructuras de párrafo.
Inserción de imágenes
Integración con Adobe Photoshop CS5.
Smart Objects.
Uso de mapas sensitivos.
Inserción de vínculos
A una URL.
A una página del sitio web.
A una dirección de correo electrónico.
A un marcador o anclaje.
Vínculos entre imágenes.
Creación de tablas.

CSS en Adobe Dreamweaver CS5
Concepto de hojas de estilo.
Estilo dentro del documento.
Asociar hojas de estilo externas a documentos.
Panel CSS.
CSS desde el panel de propiedades.
Navegador de código.
Tipos de selectores.
Selector de etiqueta.
Selector de ID.
Selector de clase.
Selector compuesto.
Selector universal.
Pseudo-clases.
Pseudo-elementos.
Agrupación de selectores.
Propiedades en CSS.
Categorías de propiedades
Tipo.
Fondo.
Bloque.
Cuadro.
Borde.
Lista.
Posición.
Extensiones.
Unidades de medida
Medidas fijas.
Medidas relativas.
Modelo de caja
Ancho y alto.
Relleno.
Margen.
Aplicar estilo a vínculos.
Aplicar estilo a una tabla de datos.
Modo Inspector CSS.
Habilitar/deshabilitar CSS.
Maquetación en CSS
Maquetación con float.
Maquetación en columnas.
Maquetación absoluta.
Maquetación por capas.
Imagen de rastreo.

Trabajar con plantillas
Regiones editables.
Marcador de posición de imágenes.
Atributos editables.

Inserción de elementos multimedia
Inserción de elementos archivos Flash.
Inserción de vídeo FLV.
Inseción de un plug-in de vídeo.
Skins para el reproductor de vídeo.
Insertar un vídeo de youtube.

Práctica
Galería de fotos con Lightbox.
Crear una página web con plantilas.

El framework de Spry
Lenguajes que componen AJAX.
Archivos creados por Adobe Dreamweaver CS5.
Efectos de Spry
Aparecer/desaparecer.
Persiana.
Aumentar/reducir.
Resaltado.
Agitar.
Deslizar.
Arrinconar.
Inserción de widgets de Spry
Widget panel contraible.
Widget acordeón.
Widget paneles en fichas.
Widget barra de menús.

HTML5
Concepto y estructura.
Diferencias con anteriores versiones.
Nuevas etiquetas.
Canvas.
Audio.
Vídeo.
Etiquetas estructurales.