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
- 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
Se enumeran los pasos correspondientes a cada tutorial.
Tutorial 1. Interfaz y Operaciones Básicas
- Iniciando Dreamweaver CS3
- Configuración Local de un Sitio Web
- Interfaz. Barras de Herramientas
- Primer Documento Web
- Disposición General del Área de Trabajo
Tutorial 2. Otros Paneles Importantes
- Estilos
- Activos
- Fragmentos
- Atributos
- Comportamientos
Tutorial 3. Nociones del Código Web
- Xhtml. Estructura del Código Web
- Tipo de documento, DTD
- Verificar la Codificación
- Idioma, Metainformación, y Título
- Esquema de un Elemento
Tutorial 4. Tipos de Elementos
- Encabezados
- Párrafos
- Listas sin ordenar
- Listas de definición
- Partes de un texto con b,i,strong, y em.
- Marcando citas con Blockquote.
- Acrónimos y abreviaturas
- Elemento de bloque div
- Elemento de Línea span
- Texto preformateado pre
- Datos tabulares con Table
Tutorial 5. Contenido Semántico
- Descripción del documento a desarrollar
- Designación Jerárquica de Encabezados
- Ejemplo Cabecera de documento
- Interactividad. Elementos de navegación
- Hipervínculos
- Insertando Contenido
Tutorial 6. Aplicando estilos CSS
- Hoja de estilo
- Tipos de fuente, y familia genérica
- Herencia y prevalencia de estilos
- Selectores de elemento
- Selectores de clase
- Selectores contextuales
Tutorial 7. Posicionamiento CSS
- Elementos de bloque y línea
- Disposición del contenido
- Marcando partes únicas
- Posicionando elementos de navegación
- Cuadro flotante .
- Maquetando en columnas
Tutorial 8. Operaciones Automatizadas
- Elementos de Biblioteca
- Plantillas
- Cambiar fragmentos de código
- Buscar y Cambiar etiquetas
- Cambiar vínculos
- Limpiar código
Tutorial 9. Administración de Sitios
- Administrar Sitios
- Servidor Remoto
- Servidor de Prueba
- Estructura de carpetas
- Colocar, Obtener, y Proteger archivos
- Importar y Exportar como xml
Tutorial 10. Resultados e Informes
- Herramientas del informe
- Verificador de Vínculos
- Informes del sitio
- Navegadores de destino
- 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
- Jose Manuel López Pola
- Lab. Producción Digital 3
- Universidad Oberta de Catalunya