Curso de Diseño Web CSS con Dreamweaver (Programa detallado)

Objetivo

Aprender las posibilidades del uso de Estilos CSS para desarrollar un diseño web complejo sin la necesidad de recurrir a códigos y tecnologías que restan accesibilidad a nuestro sitio web.

Se le dotará al alumno de una serie de recursos eminentemente prácticos y técnica de diseño de última generación para que pueda dar formato a cualquier elemento XHTML de una página web con la mínima injerencia en su código y, de esta forma, aumentar la accesibilidad de esa web, poder mejorar fácilmente su promoción en buscadores y facilitar la gestión posterior de su código.
Todo ello sin la necesidad de renunciar a un diseño elaborado y de calidad que sea atractivo para el visitante.

Dirigido a:

Este curso va dirigido a los diseñadores y profesionales del diseño web que deseen actualizar sus conocimientos sobre las últimas técnicas de diseño web con estilos CSS, respetuosas con los estándares W3C, y que ya tengan un conocimiento básico de estilos CSS, HTML y Dreamweaver en cualquiera de sus versiones.

Requisitos:

Disponer de Dreamweaver CS3 y conocimientos básicos de HTML y diseño web.

PROGRAMA DEL CURSO

1.- Introducción a tener en cuenta

Objetivo

Explicar los objetivos de este módulo y su funcionamiento. Presentar una introducción al lenguaje de estilos CSS, su historia, su estado actual y herramientas que nos pueden servir de ayuda.

Contenido

  1. 1. A tener en cuenta
    1. Para qué sirve este Módulo
    2. Introducción a los Estandares web
    3. Las cosas claras sobre el CSS
    4. XHTML y CSS de la mano
    5. Los navegadores
    6. RECETA Extra 1: Web Developer y Firebug
  2. Ejercicios
    1. Ejercicio 1
    2. Ejercicio 2
    3. Ejercicio 3

2.- Breve Glosario de CSS

Objetivo

Presentar al alumno las bases del lenguaje sobre las que nos basaremos a lo largo del curso.

Contenido

  1. 2. Glosario básico de CSS
    1. Introducción
    2. Componentes de una regla CSS
    3. Selectores básicos
    4. Selectores avanzados
    5. PSeudo-clases
    6. PSEUDO-elementos
    7. REsumen
    8. Herencia y Especificidad
    9. Comentarios en css
    10. RECETA de Gourmet: Resumir el CSS
  2. Ejercicios
    1. Ejercicio 1
    2. Ejercicio 2
    3. Ejercicio 3

3.- CSS y Dreamweaver

Objetivo

Configurar Dreamweaver para su uso dirigido a estilos CSS. Gestión de los estilos CSS desde este software.

Contenido

  1. 3. CSS y Dreamweaver
    1. Introducción
    2. Preferencias de Dreamweaver
    3. Ayudas
    4. Aplicar CLASES E IDENTIFICADORES
    5. Gestión y Creación de estilos en DW
    6. El panel Estilos a fondo
    7. RECETA 1 Extra: Detectar el Estilo Actual
  2. Ejercicios
    1. Ejercicio 1
    2. Ejercicio 2: Sitio Zen Garden
    3. Ejercicio 3
    4. Ejercicio 4

4.- Gestión de Hojas de estilos

Objetivo

Ver las posibilidades de creación y gestión de hojas de estilos.

Contenido

  1. 4. Gestión de hojas de Estilo
    1. Localización de estilos
    2. Gestionar hojas de estilo
    3. Los Media de la hojas de estilos
    4. Consejos
    5. receta extra 1: vincular una hoja a varias páginas.
    6. Receta Extra 2: Escudriñar los estilos de las páginas por las que navegamos
    7. Receta extra 3: Resetear la CSS del navegador
  2. Ejercicios
    1. Ejercicio 1
    2. Ejercicio 2
    3. Ejercicio 3
    4. Ejercicio 4
    5. Ejercicio 5

5.- Layouts 1: Bases de la maquetación con CSS

Objetivo

Introducción a los conceptos básicos para la maquetación con estilos CSS.

Contenido

  1. 5. Layout 1: Bases de la maquetación CSS
    1. Introducción
    2. Elementos de Bloque y de LÍNEA
    3. Modelo de Cajas
    4. Medida de Anchuras
    5. Posicionamiento 1: POSITION
    6. Posicionamiento 2 : FLOTAR y limpiar
    7. Position vs. Float
    8. Resumen
    9. RECETA extra 1: Índice z y desbordamiento
    10. RECETA extra 2: Centrar una página horizontalmente
    11. RECETA extra 3: Centrar una pÁgina verticalmente.
  2. Ejercicios
    1. Ejercicio 1
    2. Ejercicio 2

6.- Layouts 2: Perfeccionando la maquetación

Objetivo

Aprender nuevas técnicas y conceptos asociados a la maquetación con estilos CSS.

Contenido

  1. 6. LAYOUT 2: Perfeccionamiento
    1. Introducción
    2. Layout FLOAT de 2 columnas fijas.
    3. Layout FLOAT 3 columnas fijas
    4. Layout ELÁSTICOS
    5. Alturas/anchuras máximas y mínimas
    6. RECOMENDACIONES.
    7. RECETA EXTRA 1: Layout de rejilla
    8. RECETA EXTRA 2: Proporción Aurea
    9. Receta Extra 3: Equivalencias.
  2. Ejercicios
    1. Ejercicio 1
    2. Ejercicio 2
    3. Ejercicio 3
    4. Ejercicio 4

7.- Encabezados y Textos

Objetivo

Conocer las propiedades y reglas CSS dirigidas a los textos.

Contenido

  1. 7. Encabezados, Listas y textos
    1. Introducción
    2. Estilizando encabezados
    3. Estilizando cajas de texto
    4. Tamaño del texto al detalle
    5. Repartir el PESO visual del texto
    6. Recomendaciones
    7. Listas
    8. Propiedades raras
    9. Receta Extra 1: Reemplazar texto por IMÁGENES
    10. Receta Extra 2: Tests de Legibilidad
    11. RECETA ESTA 3: Hoja de estilo para imprimir
  2. Ejercicios
    1. Ejercicio 1
    2. Ejercicio 2
    3. Ejercicio 3
    4. Ejercicio 4
    5. Ejercicio 5

8.- Imágenes y Fondos

Objetivo

Ver las posibilidades de los estilos CSS para la decoración de los enlaces a un nivel básico, y la elaboración de diferentes botoneras a un nivel más complejo, para conseguir mejor accesibilidad, promoción y usabilidad.

Contenido

  1. 8. Imagen y fondos
    1. Introducción
    2. ESTILIZAR IMÁGENES
    3. Propiedades de Imagen de fondo
    4. Técnicas de fondo de imagen
    5. IMÁGENES de fondo que engañan
    6. Receta Extra 1: Columnas de 100% de altura
    7. Receta Extra 2: Fondos de cajas elásticas
  2. Ejercicios
    1. Ejercicio 1
    2. Ejercicio 2
    3. Ejercicio 3
    4. EJERCICIO 4

9.- Enlaces y Barras de navegación

Objetivo

Ver las posibilidades de estilización de enlaces.

Contenido

  1. 9. Estilizar la navegación: Listas, enlaces y menús
    1. La importancia de la navegación
    2. CSS básico para enlaces
    3. Lista - Barra vertical
    4. Lista - Barra horizontal: nivel 1
    5. Lista - Barra horizontal: nivel 2
    6. Roll Over sólo de imagen
    7. RECETA de gourmet 1: Lista-Barra-Solo imagen
    8. RECETA DE GOURMET 2: Todo con una sola imagen.
  2. Ejericicios
    1. Ejercicio 1
    2. Ejercicio 2
    3. Ejercicio 3

10.- Tablas y Formularios

Objetivo

Conocer las reglas y técnicas para estilizar formularios y tablas.

Contenido

  1. 10. Tablas y Formularios
    1. Introducción
    2. CSS de Tablas
    3. CSS de Formularios
  2. Ejercicios
    1. Ejercicio 1
    2. Ejercicio 2

11.- Técnicas Multi-Navegadores y Hacks

Objetivo

Conocer las técnicas necesarias para que nuestras hojas de estilo sean igualmente procesadas por el mayor número de navegadores.

Contenido

  1. 11. Validación, Técnicas Multinavegador y Hacks
    1. Control de calidad
    2. Validación del Código
    3. Probando el diseño PARA navegadores
    4. QuÉ hacer cuando algo no funciona
    5. Hacks y filtros
    6. RECETA EXTRA 1: hasLayout
    7. RECETA EXTRA 2: min-height
    8. RECETA EXTRA 3: PNG transparentes
    9. Receta Extra 4: Extensiones CSS
    10. CSS3: el Css que viene
  2. Ejercicios
    1. Ejercicio 1
    2. Ejercicio 2
    3. Ejercicio 3
    4. Ejercicio 4
Copyright 2018© D&S CAP | gestion-online@dscap.es