Guía Rápida de DW8 - Delia Esquer Meléndez

UNIVERSIDAD AUTÓNOMA
DE BAJA CALIFORNIA
Departamento de Información Académica
TALLER:
Delia Esquer Meléndez
[email protected]
Ensenada, Baja California
Junio 2008
INTRODUCCIÓN
1. Qué es un editor de páginas web?
Es una aplicación diseñada con el fin de facilitar la creación de documentos HTML o
XHTML. Su complejidad puede variar desde la de un simple editor de texto plano,
entornos WYSIWYG, hasta editores WYSIWYM.
TEXTO PLANO
- Permiten escribir un documento viendo solamente el código HTML.
TEXTO PLANO + ICONOS
- Permiten escribir un documento utilizando iconos que ayudan a la escritura del
código
- Trabajan como plug-in de otra aplicación
WYSIWYG Æ What You See Is What You Get
- Permiten escribir un documento viendo directamente el resultado final
WYSIWYM Æ What You See Is What You Mean
- Es un paradigma para la creación de documentos alternativo al modelo más
difundido (WYSIWYG).
- El usuario se encarga de introducir los contenidos de forma estructurada siguiendo
su valor semántico, en lugar de indicar su formato de representación final. Por
ejemplo, indicando si lo que está escribiendo es un título, una sección, un autor,
etc.
- La principal ventaja de este sistema es que se produce una total separación entre
contenido y presentación.
2. Qué es Dreamweaver?
Dreamweaver es un software fácil de usar que permite crear 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.
Este producto pertenece al grupo Macromedia, el cual en la actualidad es el grupo más
fuerte en lo que a desarrollo web se refiere.
Taller de Dreamweaver
-
UABC
-
Delia Esquer Meléndez
-
desquer@uabc.,mx
1
3. Iniciar sesión de Dreamweaver
- Start (Inicio)
- All Programs (Todos los Programas)
- Macromedia
- Macromedia Dreamwever 8
Crear un
archivo nuevo
Abrir un
archivo existente
ENTORNO DE TRABAJO
4. Los menús y las ventanas de DW
Barra de título
Menú Principal
Vistas del
entorno de trabajo
Code: Código HTML
Split: Código / Diseño
Design: Diseño
Ventana de Propiedades
Taller de Dreamweaver
-
UABC
-
Delia Esquer Meléndez
Area de Trabajo
-
desquer@uabc.,mx
2
LOS ELEMENTOS BASICOS EN UNA PÁAGINA WEB
5. Qué puede contener una página web?
ƒ
ƒ
TEXTO
Insertar texto: Desde teclado
Modificar Propiedades: Ventana de propiedades
IMAGEN
Insertar imagen: Insert (Insertar) > Image (Imagen)
Modificar Propiedades: Ventana de propiedades
ƒ
ƒ
LIGAS O ENLACES
Insertar liga o enlace: a) Seleccionar texto/imagen, b) Insertar liga o
enlace en ventana de propiedades
TABLAS
Insertar tabla:
a) Insert (Insertar) > Table (Tabla)
b) Especificar número de filas y
columnas
Modificar Tabla: Menú Contextual (botón
derecho), Seleccionar: Table (Tabla)
Agregar filas/columnas: Menú Contextual
(botón derecho), Seleccionar: Table
(Tabla), Insert Row/Column (Insertar
Fila/Columna)
Ventana de propiedades
Taller de Dreamweaver
-
UABC
-
Delia Esquer Meléndez
-
desquer@uabc.,mx
3
6. Qué más puede tener….?
ƒ 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
7. 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
8. Salvar archivo
File (Archivo) > Save (Salvar)
9. Abrir archivo
File (Archivo) > Open (Abrir)
10. Terminar sesión de Dreamweaver
File (Archivo) > Exit (Salir)
Taller de Dreamweaver
-
UABC
-
Delia Esquer Meléndez
-
desquer@uabc.,mx
4