UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA Departamento de Información Académica DREAMWEAVER CS3 Guía Rápida Delia Esquer Meléndez desquer@uabc.mx Ensenada, Baja California Enero 2009
INTRODUCCIÓN 1. Qué es un editor de páginas web? Los editores web son aplicaciones de software que sirven para desarrollar páginas web. Hay tres tipos de editores web: - Editores web de texto: estos ayudan al desarrollador en la escritura del código HTML (y otros códigos de lenguajes web), proveyendo distintos colores al texto de forma automática, acceso a códigos ya definidos, ayuda de asistentes, etc. - Editores web de objetos: estos alternan entre la edición de texto y el uso de objetos para el desarrollo de una página web. - Editores web gráficos o WYSIWYG: estos proveen una interfaz gráfica, donde es posible modificar y ver la página web tal cual se verá en un navegador. Son los editores más fáciles de utilizar. WYSIWYG What You See Is What You Get - Permiten escribir un documento viendo directamente el resultado final. 2. Qué es Dreamweaver? Dreamweaver es un software fácil de usar que permite diseñar, crear y desarrollar páginas web profesionales. Las funciones de edición visual de Dreamweaver permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML. Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual. Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa. Esta aplicación permite crear sitios de forma totalmente gráfica, y dispone de funciones para acceder al código HTML generado. Permite la conexión a un servidor, a base de datos, soporte para programación en ASP, PHP, Javascript, cliente FTP integrado, etc. Este producto pertenece al grupo Adobe el cual en la actualidad es el grupo más fuerte en lo que a desarrollo web se refiere. Dreamweaver CS3 - UABC - Delia Esquer Meléndez - desquer@uabc.,mx 1
Iniciar sesión de Dreamweaver - Inicio (Start) - Todos los Programas (All Programs) - Adobe Web Premiun CS3 - Adobe Dreamweaver CS3 Crear un archivo nuevo Abrir un archivo existente ENTORNO DE TRABAJO Los menús y las ventanas de DW Barra de título Menú Principal Barra de edición de archivo - Área de Trabajo Inspector de Propiedades Dreamweaver CS3 - UABC - Delia Esquer Meléndez - desquer@uabc.,mx 2
Barra de edición de archivo La barra de edición de archivo se encuentra inmediatamente después de la pestaña que contiene el nombre del archivo en edición y se administra de manera individual, conteniendo los siguientes elementos: Barra de estado La barra de estado se encuentra al final de la ventana de edición de cada archivo, conteniendo lo siguientes elementos: PROPIEDADES DE LA PÁGINA Tipo de letra Tamaño de letra Color de texto Color de fondo de página Imagen de fondo Repetir imagen de fondo Dreamweaver CS3 - UABC - Delia Esquer Meléndez - desquer@uabc.,mx 3
LOS ELEMENTOS BÁSICOS EN UNA PÁGINA WEB Qué puede contener una página web? TEXTO Insertar: Directamente desde teclado Modificar Propiedades: Seleccionar el texto / Ventana de propiedades IMAGEN Insertar: Insertar (Insert) > Imagen (Image) Modificar Propiedades: Ventana de propiedades LIGAS O ENLACES Insertar: a) Seleccionar texto/imagen, b) Insertar liga o enlace en ventana de propiedades en el recuadro de Vínculo (Link) TABLAS Insertar: a) Insert (Insertar) > Table (Tabla) b) Especificar número de filas y columnas Modificar: Menú Contextual (botón derecho), Seleccionar: Table (Tabla) Agregar filas/columnas: a) Menú Contextual (botón derecho) b) Seleccionar: Tabla (Table) Dreamweaver CS3 - UABC - Delia Esquer Meléndez - desquer@uabc.,mx 4
c) Insertar Fila/Columna (Insert Row/Column) Propiedades Qué más puede tener una página Web? Elementos interactivos - Imágenes de sustitución (rollover) - Mapas sensibles - Botones de Flash - Texto de Flash - Menús emergentes Multimedia - Música - Sonido - Video - Flash Capas (layers) Formularios VISUALIZACIÓN DE UNA PÁGINA WEB Cómo veo una página web en el navegador? a)file (Archivo) > Preview in Browser (Vista preliminar) ó b) También se puede pre-visualizar por medio del ícono: ó c) Utilizando la tecla F12 MANEJO DE ARCHIVOS Salvar archivo File (Archivo) > Save (Salvar) Abrir archivo File (Archivo) > Open (Abrir) Salir de Dreamweaver File (Archivo) > Exit (Salir) Dreamweaver CS3 - UABC - Delia Esquer Meléndez - desquer@uabc.,mx 5