Este documento presenta una introducción al uso del programa Dreamweaver para diseñar sitios web. Explica cómo crear y modificar sitios, insertar contenido como texto, imágenes, tablas y formularios, y agregar comportamientos interactivos con JavaScript sin programar. También cubre temas como el uso de plantillas, recursos gratuitos y la interfaz del programa.

1. FPE Diseñador Web y Multimedia Carmina Barreiro. Curso de Adams. Módulo 1. Teoría. Planificar y entender. Módulo 3. Dreamweaver. Bendito WYSIWYG!

2. Dreamweaver Introducción Interfaz de Dreamweaver Panel de Propiedades Barra Insertar Personalizar espacio de trabajo Dividir para ver Código

3. Dreamweaver Crear un Sitio Web Como crear y modificar datos del sitio Ventana Archivo Conocimientos básico del nombre de los archivos.

4. Dreamweaver Escribir Cuidado al copiar desde Word u otra web y Pegar en Dreamweaver Estilos predefinidos Párrafo Encabezados Listas Listas Numeradas

5. Dreamweaver Insertar enlaces. Barra propiedades Enlaces a página Enlaces externos Enlaces a correos Comprobar vínculos

6. Dreamweaver Las imágenes Características y Formatos para Web Insertar una imagen y propiedades

7. Dreamweaver Las Tablas: Propiedades de la Tabla Propiedades de las Filas Propiedades de las Celdas Combinar Celdas “Truco” Borde Fino con color de fondo y espacio entre celdas Usar imágenes de fondo

8. Dreamweaver Formularios: Elementos de Formularios Página de Respuesta A Tomar en Cuenta: Ya no se usa tanto y es innecesario el botón borrar. Solicitar la información mínima indispensable. Disposición a rellenar formularios es directamente proporcional al interés del usuario (No te creas Dios) Cuidado con la “manía” de campos obligatorios. No limitar el número de caracteres sin necesidad. No olvidar la Ley de Protección Datos Útil para medir conversiones de publicidad online.

9. Dreamweaver Formularios. Cómo funciona el envío de datos:

10. Dreamweaver Los Comportamientos (Javascript sin programar!) Javascript: lenguaje de programación orientado objeto que permite mejoras en la interfaz de la web ¿Qué es la programación orientada a Objetos?una forma de programación que usa objetos y sus interacciones, para diseñar aplicaciones y programas informáticos. Elementos Fundamentales Comportamientos:EVENTO afecta a un OBJETO  desencadena una ACCIÓN

11. Dreamweaver Los Comportamientos. Usos: Validar formularios Imágenes de sustitución Abrir nueva ventana

12. Dreamweaver Las imágenes Mapear una imagen Crear imágenes de sustitución Imagen en reposo Imagen en onMouseOver

13. Dreamweaver Elementos Spry: Barra de Navegación de Spry Acordeón Formularios con Validación

14. Dreamweaver Trabajar con Plantillas: Crear Plantillas Crear Documento a partir de plantilla Aplicar plantilla a documento Aplicar cambios desde una plantilla Uso para una web un segundo idioma

15. Dreamweaver RECURSOS: Imágenes, ilustraciones, animaciones, sonido…: Istcokphoto: http://www.istockphoto.com/ Fotolia: http://es.fotolia.com/ Dreamstime: http://www.dreamstime.com/

16. Dreamweaver RECURSOS: Tipografías Gratis: http://www.fontsquirrel.com/ http://www.exljbris.com/ Complemento de Firefox parainspeccionar el código de una web: Firebug (http://getfirebug.com)

17. Dreamweaver NOTA FINAL: Las imágenes de Dreamweaver incluidas en esta presentación corresponden a la interfaz de la versión CS3 para Mac. Pueden variar ligeramente de la versión para PC. Pero ambas incluyen las mismas funciones, en el mismo lugar.