Diseño Web CSS con Dreamweaver

PROGRAMA DEL CURSO

Curso de Diseño Web CSS con Dreamweaver: 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
1. Bienvenida
2. Cómo leer este curso
2. Introducción a los Estandares web
1. Un poco de historia
2. Por separado
3. El w3C
3. Las cosas claras sobre el CSS
1. Por qué es tan importante
2. ¡Olvídate de las TABLAS!
3. Un poco de Historia del CSS
4. Estándares Oficiales del CSS
4. XHTML y CSS de la mano
1. XHTML
2. Desarrollar Código Semántico
3. Rescatar HTML olvidado
5. Los navegadores
1. Comedores de código
2. Los modos Quirks y Estándar
3. ¡DOCTYPE FOREVER!
6. RECETA Extra 1: Web Developer y Firebug
2. Ejercicios
1. Ejercicio 1
2. Ejercicio 2
3. Ejercicio 3
1. 3.1 : Desnudar a la página.
2. 3.2 ¿ Dr. Jekyll o Mr. Hyde ?
3. 3.3 Estructura semántica del código

Inscríbete ahora y accede a 2 unidades gratis

Curso de Diseño Web CSS con Dreamweaver: 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
1. Los Selectores son la clave
2. Select. Universal: *
3. Select. de Etiqueta: p
4. Select. Descendente: div p a
5. Select. de Clase: p.especial
6. Select. de Identificador: #pie
7. Combinación de selectores básico.
4. Selectores avanzados
1. No para todos los navegadores
2. Hijos directo: div > a
3. Select. Adyacente: h1 + h2
4. Select. de Atributos
5. PSeudo-clases
6. PSEUDO-elementos
7. REsumen
8. Herencia y Especificidad
1. Las reglas de los padres las heredan los hijos
2. Conflictos entre estilos
3. Especificidad
4. Proximidad
5. !important
9. Comentarios en css
10. RECETA de Gourmet: Resumir el CSS
1. Agrupación de reglas
2. Shorthand
2. Ejercicios
1. Ejercicio 1
1. 1.1 Examinar el CSS de una web
2. 1.2 Analizando las reglas de estilo.
2. Ejercicio 2
1. 2.1 Análisis comparado: XHTML + CSS
2. 2.2 Destripar el XHTML de Zen Garden
3. Ejercicio 3
1. 3.1 Introduce los selectores

Inscríbete ahora y accede a 2 unidades gratis

Curso de Diseño Web CSS con Dreamweaver: 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
1. Ayuda para las ayudas
2. Contenido del Head
3. Ayudas visuales
4. Barra representación de estilos
5. Editar código CSS directamente
4. Aplicar CLASES E IDENTIFICADORES
1. Atributos CLASS e ID
2. Clases desde el panel PROPIEDADES
3. Clases e ID desde el Selector de Etiquetas
4. Combinar varias clases
5. DES-aplicar una clase o un ID a un elemento
5. Gestión y Creación de estilos en DW
6. El panel Estilos a fondo
1. Modificar un estilo. Método 1.
2. Modificar un estilo. Método 2.
3. Modificar un estilo. Método 3.
4. Borrar un estilo
5. Cambiar el selector de una regla.
6. Duplicar estilos
7. Cambiar el orden.
8. Ir al código CSS...
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
1. 4.1 Selectores desde DW
2. 4.2 Aplicando clases
3. 4.3 Detectando estilos

Inscríbete ahora y accede a 2 unidades gratis

Curso de Diseño Web CSS con Dreamweaver: 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
1. Navegador > Usuario > Diseñador
2. En línea > Incrustado > Externo
2. Gestionar hojas de estilo
1. Crear desde 0
2. Crear desde Estilos incrustados u otras hojas
3. Vincular las hojas de estilo
4. Importar Hojas de estilo
1. Importar en páginas web...
2. Importar en hojas de estilo.
5. @Import vs. Link
6. LOS Media de la hojas de estilos
1. Qué son
2. Los Media en DW
7. Consejos
1. Orden en la creación de los estilos.
2. CSS estructurado con comentarios
3. Dividir el CSS en varias Hojas de estilo
8. receta extra 1: vincular una hoja a varias páginas.
9. Receta Extra 2: Escudriñar los estilos de las páginas por las que navegamos
10. 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

Inscríbete ahora y accede a 2 unidades gratis

Curso de Diseño Web CSS con Dreamweaver: 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
1. Quién es quién
2. Propiedad Display
3. Modelo de Cajas
1. Qué es
2. Cómo funciona
3. Insertar Cajas DIV con DW
4. Propiedades de Caja: Margen, Relleno y Borde
4. Medida de Anchuras
1. Unidades relativas y absolutas
2. Anchuras PX
3. Anchuras % y em
4. ¿PX , % o EM?
5. Posicionamiento 1: POSITION
1. Posicionamiento Normal
2. RELATIVE (Relativo)
3. ABSOLUTE (Absoluta)
4. FIXED (Fija)
5. Position: Resumen
6. Posicionamiento 2 : FLOTAR y limpiar
1. FLOAT (Flotar)
2. CLEAN (Limpiar)
3. Float: Resumen
7. Position vs. Float
8. Resumen
9. RECETA extra 1: Índice z y desbordamiento
1. Z-index (índice z)
2. Overflow (desbordamiento)
10. RECETA extra 2: Centrar una página horizontalmente
11. RECETA extra 3: Centrar una pÁgina verticalmente.
2. Ejercicios
1. Ejercicio 1
1. 1.1 Insertar las DIVs
2. 1.2 Dimensiones
3. 1.3 Posicionamiento Float
4. 1.4 Comprendiendo el modelo de caja (Box Model)
5. 1.5 Aplicar Márgenes y Rellenos
2. Ejercicio 2
1. 2.1 Posicionamiento Absoluto
2. 2.2 Ayuda

Inscríbete ahora y accede a 2 unidades gratis

Curso de Diseño Web CSS con Dreamweaver: 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
1. Filas y columnas
2. Planificación
2. Layout FLOAT de 2 columnas fijas.
1. Esquema
2. Insertar las DIV
3. Crear las REGLAS de estilo css
4. Soluciones alternativas:
3. Layout FLOAT 3 columnas fijas
1. Solución 1: Float
2. Solución 2: Float + Márgenes
3. Solución 3: Absolute
4. Layout ELÁSTICOS
1. Al ampliar el tamaño de Texto: EM
2. Al Ampliar el tamaño de Ventana: %
3. Combinación: Elásticos + Fijos
5. Alturas/anchuras máximas y mínimas
6. RECOMENDACIONES.
1. Resetea los márgenes y rellenos
2. Relleno del contenedor = márgenes del contenido
3. Nombrar los id y class
4. No abuses de la cascada
7. RECETA EXTRA 1: Layout de rejilla
1. Intro
2. Rejilla / Retícula / Grilla / Grid
3. Pautas para aplicarlo
8. RECETA EXTRA 2: Proporción Aurea
1. Intro: ¿Qué es?
2. Pautas para aplicarla
9. Receta Extra 3: Equivalencias.
2. Ejercicios
1. Ejercicio 1
1. 1.1 Nuevo contenido = Nuevo etiquetado
2. Ejercicio 2
1. Hoja de 2 Columnas y las dos flotando
2. Hoja de 2 Columnas y solo una flotando
3. Ejercicio 3
1. Hoja de 3 Columnas y todas flotando
2. Hoja de 3 Columnas
4. Ejercicio 4
1. Otros retos
2. Ayuda:
3. 6. LAYOUT 2: Perfeccionamiento
1. Introducción
1. Filas y columnas
2. Planificación
2. Layout FLOAT de 2 columnas fijas.
1. Esquema
2. Insertar las DIV
3. Crear las REGLAS de estilo css
4. Soluciones alternativas:
3. Layout FLOAT 3 columnas fijas
1. Solución 1: Float
2. Solución 2: Float Márgenes
3. Solución 3: Absolute
4. Layout ELÁSTICOS
1. Al ampliar el tamaño de Texto: EM
2. Al Ampliar el tamaño de Ventana: %
3. Combinación: Elásticos Fijos
5. Alturas/anchuras máximas y mínimas
6. RECOMENDACIONES.
1. Resetea los márgenes y rellenos
2. Relleno del contenedor = márgenes del contenido
3. Nombrar los id y class
4. No abuses de la cascada
7. RECETA EXTRA 1: Layout de rejilla
1. Intro
2. Rejilla / Retícula / Grilla / Grid
3. Pautas para aplicarlo
8. RECETA EXTRA 2: Proporción Aurea
1. Intro: ¿Qué es?
2. Pautas para aplicarla
9. Receta Extra 3: Equivalencias.
4. Ejercicios
1. Ejercicio 1
1. 1.1 Nuevo contenido = Nuevo etiquetado
2. Ejercicio 2
1. Hoja de 2 Columnas y las dos flotando
2. Hoja de 2 Columnas y solo una flotando
3. Ejercicio 3
1. Hoja de 3 Columnas y todas flotando
2. Hoja de 3 Columnas
4. Ejercicio 4
1. Otros retos
2. Ayuda:

Inscríbete ahora y accede a 2 unidades gratis

Curso de Diseño Web CSS con Dreamweaver: 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
1. Estilo predeterminado de los encabezados
2. Familia de fuente
3. Grosor
4. Estilo
5. Espaciado de letra y palabras
6. Mayúsculas, minúsculas y Variantes
3. Estilizando cajas de texto
1. Alto de línea
2. Alineación de texto
3. Sangría de texto
4. Márgenes y rellenos
4. Tamaño del texto al detalle
1. Unidades
2. Tamaño de texto recomendado
5. Repartir el PESO visual del texto
1. ¿Qué es lo importante?
2. Se fiel al XHTML
3. Experimento práctico
6. Recomendaciones
1. Palo seco y Serifa
2. Contraste texto-fondo
3. Párrafos oxigenados
4. Longitud de la línea de texto
5. Problemas de la Justificación
7. Listas
1. Propiedades de las listas
2. Resetear una lista
3. Convertirla en cajas
8. Propiedades raras
1. Alineación vertical: vertical-align
2. Espacio en blanco: white-space
3. Pseudo-elementos :first-line, :first-letter, :before, :after
9. Receta Extra 1: Reemplazar texto por IMÁGENES
1. Para usar cualquier fuente o efecto de imagen
2. Paso a paso
10. Receta Extra 2: Tests de Legibilidad
1. Test de color: Vischeck
2. Test de contraste: Juicystudio
11. RECETA ESTA 3: Hoja de estilo para imprimir
1. Ejemplo: A List Apart
2. media="print"
3. Imprimiendo los enlaces
2. Ejercicios
1. Ejercicio 1
1. 1.1 Aplicar recomendaciones
2. 1.2 Repartir el peso
3. 1.3 Diseñar el pie
2. Ejercicio 2
1. 2.1 Atacando a las listas
3. Ejercicio 3
1. 3.1 Reemplazar encabezados por imágenes
4. Ejercicio 4
1. 4.1 Propiedades raras
5. Ejercicio 5
1. 5.1 Media: print

Inscríbete ahora y accede a 2 unidades gratis

Curso de Diseño Web CSS con Dreamweaver: 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
1. Imágenes e Imágenes de fondo
2. Recomendación: Localizar las imágenes
2. ESTILIZAR IMÁGENES
1. Estilos para IMG
2. Fondo de imagen
3. Propiedades de Imagen de fondo
1. En general
2. Repetición
3. Posición
4. Técnicas de fondo de imagen
1. Trama
2. Fondo Corrido
3. Fondo Corrido + Color
4. Múltiples fondos
5. Fondos Transparentes : GIF y PNG
5. IMÁGENES de fondo que engañan
1. Bordes Falsos
2. Columnas Falsas
6. Receta Extra 1: Columnas de 100% de altura
1. El problema
2. Solución 1: Columnas falsas
3. Solución 2: Overflow + Margin + Padding
7. Receta Extra 2: Fondos de cajas elásticas
1. Decorar una caja
2. Solución
3. Paso a paso
2. Ejercicios
1. Ejercicio 1
1. 1.1 Examinar las imágenes de una web
2. Ejercicio 2
3. Ejercicio 3
1. 3.1 Fondo de la página
2. 3.2 Fondo de #intro
4. EJERCICIO 4
1. 4.1 Pastillas Extra
2. 4.2 Iconos para los elementos de Lista

Inscríbete ahora y accede a 2 unidades gratis

Curso de Diseño Web CSS con Dreamweaver: 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
1. Jerarquía de la navegación
2. Listas: por una navegación semántica
2. CSS básico para enlaces
1. Estilo predeterminado: text-decoration
2. Estados de los enlaces: pseudo-clases
3. ¡Aprovéchate de la herencia!
4. Enlace: de LÍNEA a BLOQUE
5. Icono - Imagen de fondo
3. Lista - Barra vertical
1. 1. Material
2. 2. Eliminar las propiedades de lista
3. 3. Mostrar los enlaces como BLOQUE
4. 4. Maquetar la Lista
5. 5. Maquetar y decorar el enlace
6. 6. Decorar el estado :hover
7. La guinda: Destacar el "USTED ESTÁ AQUÍ"
4. Lista - Barra horizontal: nivel 1
1. 1. + 2. Comenzando con la Lista de siempre
2. 3. Mostrar los elementos <li> en línea
3. 4. Maquetar y decorar el enlace
4. 5. Estado :hover y clase .activado
5. Lista - Barra horizontal: nivel 2
1. 3. Mostar la Lista como Tabla ...
2. 4. ... y las <li> como celdas
3. 4. Mostrar el enlace como BLOQUE
4. 5. Decorar los enlaces, estado :hover y clase .activado
6. Roll Over sólo de imagen
1. ¿Por qué?
2. ¿Cómo?
3. Paso a paso
7. RECETA de gourmet 1: Lista-Barra-Solo imagen
1. Introducción
2. 1. Crear el HTML
3. 2. Eliminar la apariencia de Lista
4. 3. Maquetar los enlaces como BLOQUES
5. 4. Hacer desaparecer el texto
6. 5. Personalizar los enlaces
8. RECETA DE GOURMET 2: Todo con una sola imagen.
1. ¿Por qué?
2. ¿Cómo?
3. 1 + 2 + 3 + 4 Comenzando igual que antes
4. 5. Propiedades de Fondo para todos los enlaces
5. 5. Personalizar el fondo de los enlaces
6. 6. Personalizar el estado :hover
2. Ejericicios
1. Ejercicio 1
1. 1.1 Enlaces de #referencias
2. Ejercicio 2
1. 2.1 Botones "volver arriba"
3. Ejercicio 3

Inscríbete ahora y accede a 2 unidades gratis

Curso de Diseño Web CSS con Dreamweaver: 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
1. Tabla bien etiquetada
2. Bordes CSS
3. Combinar bordes de elementos de tabla
4. Tablas cebra
5. Pseudo-clase :hover
6. Estilos avanzados: empty-cells / caption-side / table-layout
3. CSS de Formularios
1. Formularios bien etiquetados
2. Semántica: Label y Fieldset
3. Alinear el Label
4. Mejorar campos y áreas de texto
5. Juego de campo - fieldset
6. Pseudo-clase :focus
2. Ejercicios
1. Ejercicio 1
2. Ejercicio 2

Inscríbete ahora y accede a 2 unidades gratis

Curso de Diseño Web CSS con Dreamweaver: 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
1. Validar el XHTML
2. Validar el CSS
3. Probando el diseño PARA navegadores
1. Desde DW
2. Desde los navegadores
4. QuÉ hacer cuando algo no funciona
1. ¿Qué está pasando?
2. 1. Relájate y descansa
3. 2. Valida
4. 3. Aísla el problema
5. 4. Examina tus elementos
6. 5. Busca en la red
7. 6. Experimenta
8. 7. Pide ayuda
5. Hacks y filtros
1. ¿Por qué?
2. ¿Cómo funciona?
3. Recomendaciones
4. Hacks 1. Inscrustados en el CSS
5. Hacks 2. Comentarios condicionales
6. Hacks NO recomendados
7. Resumen
6. RECETA EXTRA 1: hasLayout
1. Como piensa IE
2. Solución CSS:
7. RECETA EXTRA 2: min-height
1. El problema:
2. Solución CSS:
8. RECETA EXTRA 3: PNG transparentes
1. El problema
2. Solución al Background CSS
3. Solución a los PNG en el HTML
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

Inscríbete ahora y accede a 2 unidades gratis