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, partiendo siempre de un código 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, 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.
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
- 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)
Ver un ejemplo de funcionamiento