UOC

CSS-Dreamweaver 8

Introducción

Guía de Dreamweaver 8 en la que se explica como diseñar documentos web con CSS dando la máxima prioridad al acceso a la información, empezando por un correcto marcado que aporte el mayor significado semántico al contenido.

Se hace una descripción de la interfaz y funcionamiento del programa, se explica la correcta utilización de los principales elementos del código, y se inicia el desarrollo práctico de una web, separando el proceso en dos fases, una inicial centrada en el contenido, elementos y carga semántica de los mismos, y una segunda fase dedicada a la presentación de ese contenido.

Todo el proceso está pensado para aprender a desarrollar documentos accesibles ajustados a los estándares web actuales de estructura y presentación, aprovechando las herramientas y ayudas de Dreamweaver 8 creadas para simplificar y agilizar el trabajo con CSS.

Objetivos

Objetivo General

Aprender a utilizar Dreamweaver para desarrollar documentos web de código limpio, fáciles de entender y mantener, bien estructurados y exentos de atributos de presentación. Con ello aprendemos a trabajar con uno de los mejores y más utilizados editores de html, pero a la vez establecemos las bases y metodología de trabajo propias del diseño web accesible basado en estándares W3C .

Tutorial 1. Interfaz y Operaciones básicas

  • Configurar el panel preferencias de acuerdo al tipo de trabajo a realizar.
  • Crear y configurar un sitio web en local.
  • Crear el primer documento, y declarar el estándar al que se ajusta.
  • Conocer la Interfaz de trabajo de Dreamweaver, la disposición de paneles y barras de herramientas.

Tutorial 2. Otros Paneles Importantes

  • Simplificar y optimizar cualquier proceso relacionado con la presentación de una web.
  • Disponer y acceder de forma rápida a los recursos del sitio web.
  • Facilitar la creación de scripts para comportamientos.
  • Simplificar la reutilización de cualquier fragmento de código, y su inserción correcta en el documento web

Tutorial 3. Nociones del Código Web

  • Saber estructurar correctamente el código de una web, para que sea válido conforme a los estándares actuales basados en xml

Tutorial 4. Tipos de elementos

  • Conocer la sintaxis y hacer un uso correcto de los principales elementos del lenguaje de marcas utilizado. Saber en que casos debe utilizarse un determinado elemento y en cuales no, dependiendo del tipo de contenido a marcar.

Tutorial 5. Contenido Semántico

  • Ser capaces de desarrollar un documento web exento de cualquier tipo de presentación, cuyo contenido esté bien estructurado de manera que tenga sentido aun sin hoja de estilo, y cuya utilización correcta de elementos aporte significado semántico al contenido.

Tutorial 6. Aplicando estilos CSS

  • Conocer los principales selectores y reglas de estilo que especifican la presentación de cada elemento de la web.
  • Conocer otros factores que determinan la presentación del contenido, como son la herencia y el contexto en el que se sitúa su elemento correspondiente.
  • Conocer el modo óptimo de trabajar con Dreamweaver para aplicar y editar reglas de estilo.

Tutorial 7. Posicionamiento CSS

  • Maquetar una web identificando y marcando correctamente cada una de sus partes principales, así como los elementos que contienen, controlando mediante CSS la posición y el comportamiento visual del contenido en distintos dispositivos.

Tutorial 8. Operaciones Automatizadas

  • Aprovechar el potencial de algunas herramientas Dreamweaver para gestionar el contenido de varios archivos de forma automatizada.

Tutorial 9. Administración de Sitios

  • Conocer las principales tareas de configuración y gestión de sitios, tanto para trabajar con un servidor remoto, como para operaciones de web dinámica en local.

Tutorial 10. Resultados e Informes

  • Saber operar con el panel resultados para obtener información sobre múltiples aspectos del estado de nuestros documentos a nivel parcial, o de todo el sitio

Contenidos

Tutorial 1. Interfaz y Operaciones Básicas

  1. Iniciando Dreamweaver 8
  2. Configuración local de un sitio web
  3. Interfaz. Barras de herramientas
  4. Primer documento web
  5. Disposición general del área de trabajo

Tutorial 2. Otros Paneles Importantes

  1. Estilos
  2. Activos
  3. Fragmentos
  4. Atributos
  5. Comportamientos

Tutorial 3. Nociones del Código Web

  1. Xhtml. Estructura del código web
  2. Tipo de documento, DTD
  3. Verificar la codificación
  4. Idioma, metainformación, y título
  5. Esquema de un elemento

Tutorial 4. Tipos de Elementos

  1. Encabezados
  2. Párrafos
  3. Listas sin ordenar
  4. Listas de definición
  5. Partes de un texto con b,i,strong, y em.
  6. Marcando citas con blockquote.
  7. Acrónimos y abreviaturas
  8. Elemento de bloque div
  9. Elemento de línea span
  10. Texto preformateado pre
  11. Datos tabulares con table

Tutorial 5. Contenido Semántico

  1. Descripción del documento a desarrollar
  2. Designación Jerárquica de Encabezados
  3. Ejemplo Cabecera de documento
  4. Interactividad. Elementos de navegación
  5. Hipervínculos
  6. Insertando Contenido

Tutorial 6. Aplicando estilos CSS

  1. Hoja de estilo
  2. Tipos de fuente, y familia genérica
  3. Herencia y prevalencia de estilos
  4. Selectores de elemento
  5. Selectores de clase
  6. Selectores contextuales

Tutorial 7. Posicionamiento CSS

  1. Elementos de bloque y línea
  2. Disposición del contenido
  3. Marcando partes únicas
  4. Posicionando elementos de navegación
  5. Cuadro flotante .
  6. Maquetando en columnas

Tutorial 8. Operaciones Automatizadas

  1. Elementos de biblioteca
  2. Plantillas
  3. Cambiar fragmentos de código
  4. Buscar y cambiar etiquetas
  5. Cambiar vínculos
  6. Limpiar código

Tutorial 9. Administración de Sitios

  1. Administrar Sitios
  2. Servidor remoto
  3. Servidor de prueba
  4. Estructura de carpetas
  5. Colocar, obtener, y proteger archivos
  6. Importar y exportar como xml

Tutorial 10. Resultados e Informes

  1. Herramientas del informe
  2. Verificador de v ínculos
  3. Informes del sitio
  4. Navegadores de destino
  5. Validación

Funcionamiento

En la guía se utilizan herramientas interactivas que ayudan a seguir de forma visual los procesos descritos, mostrando imágenes generales (para situarse en el espacio de trabajo de Dreamweaver), y ampliadas (para ver de forma nítida los pasos de cada proceso)

Documento conforme W3C XHTML 1.0|CSS 2.0|WAI AA