UOC

Guía de Dreamweaver CS3

Introducción

Se trata de una guía de iniciación al diseño web con Dreamweaver, en la que se da prioridad al acceso a la información sobre la presentación, partiendo de un código que debe aportar el mayor significado semántico al contenido.

Se empieza con una descripción de la interfaz y modo de trabajo de Dreamweaver. 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, 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, sin que ello exija grandes conocimientos de maquetación CSS. Esto es posible grácias a las herramientas y ayudas de Dreamweaver CS3 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 elementos 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 de las directrices de accesibilidad cada vez más presentes en el diseño web actual.

Objetivos Específicos de cada Tutorial

Tutorial 1. Interfaz y Operaciones básicas

Tutorial 2. Otros Paneles Importantes

Tutorial 3. Nociones del Código Web

Tutorial 4. Tipos de elementos

Tutorial 5. Contenido Semántico

Tutorial 6. Aplicando estilos CSS

Tutorial 7. Posicionamiento CSS

Tutorial 8. Operaciones Automatizadas

Tutorial 9. Administración de Sitios

Tutorial 10. Resultados e Informes

Contenidos

Se enumeran los pasos correspondientes a cada tutorial.

Tutorial 1. Interfaz y Operaciones Básicas

  1. Iniciando Dreamweaver CS3
  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