Aprende a utilizar el Adobe Dreamweaver CS3 par diseñar tus páginas web docentes

1. Universidad Nacional de Ingeniería
UNI On Line
Diplomado en Pedagogía Virtual Avanzado
Dreamweaver CS3
Norman Trujillo, Ing.
norman.trujillo@uni.edu.ni

2. Contenidos
¿Qué es
Dreamweaver?
Conociendo la
Interfaz
Haciendo mi web
docente

3. ¿Qué es Dreamweaver?
Editor HTML
Sitios web Herramientas Personalización
1. - Diseño 1. - código HTML 1.- objetos y
2.- Modificación 2.- edición visual comandos
2.- métodos
abreviados de
teclado

4. Conociendo la Interfaz
• Abrir elementos
recientes
• Crear un nuevo
documento
• Crear con una
plantilla

5. Conociendo la Interfaz

7. Inicio
• En el grupo
Crear con
plantilla
• Escoger
página de
inicio (tema)

8. Seleccionando una plantilla
• En la carpeta
de muestra
Página de
inicio (tema)
• Selecciona
Alojamiento
– Página
principal
• Crear

9. Almacenando los archivos
• Asígnele nombre
a la primera
página la carpeta raíz donde
se guardarán los
(index.html) archivos generados
ya está configurada
por defecto

10. Almacenando los archivos
• Asígnele nombre a la
carpeta donde se
guardarán otros
archivos
– Imágenes
– Archivos CSS
–…
• recursos_index

11. Preparándonos para trabajar
• En el menú Ver
• Seleccione la
opción Diseño
– Para trabajar en
pantalla con el
diseño gráfico del
sitio web

12. Estado actual de la pantalla

13. Construyendo la web docente
• Modifique el Nombre de la asignatura
contenido de la web Objetivos de la asignatura Contenidos Metodología Evaluación Profesor
– Escriba el nombre
de la asignatura
– Muestre algunos IMAGEN DEL
posibles vínculos del DOCENTE
sitio (objetivos, MENSAJE DE BIENVENIDA
contenidos,
metodología, etc.)
– Agregue una imagen NOMBRE DEL
suya DOCENTE
– Indique su nombre
– Redacte el mensaje
de bienvenida

14. Completando la web
• En el menú Archivo
• Seleccione la opción de Nuevo
• En el espacio de Carpeta de
muestra
• Escoja Página de inicio
(tema)

15. Completando la web
• En el espacio Página de muestra
• Escoja entre:
– Alojamiento – Calendario
– Alojamiento – Catálogo
– Alojamiento – Página de productos
– Alojamiento – Página de texto
– Alojamiento – Página principal

16. Almacenando la página Objetivos
• El nombre para la nueva
página será objetivos.html
• Nombre la carpeta donde
se guardarán otros archivos
como recursos_objetivos

17. Estado actual de la pantalla

18. Construyendo la página Objetivos
• Modifique el
contenido de la
web
– Escriba el nombre
de la asignatura
– Identifique la
página (Objetivos)
– Muestre el vínculo
hacia la página
principal
– Redacte los
objetivos de la
asignatura
– Inserte una imagen
si así lo desea

19. Creando vínculos entre las páginas
• Abra la página
index.html
• Seleccione el
texto que dice
Objetivos de la
asignatura

20. Creando vínculos entre las páginas
• En la barra Propiedades
• Seleccione Vínculo

21. Creando vínculos entre las páginas
• Localice el
archivo
objetivos.html
• Presione el
botón Aceptar
• Actividades
En la página
Objetivos el
texto que dice
Inicio debe
referenciar la
página
index.html

22. Salvando el trabajo
• En el menú Archivo
• Seleccione la opción
Guardar
• Haga lo mismo en
los archivos
index.html y
objetivos.html

23. Probando lo realizado …
• Localice en su disco
duro la carpeta
C:DPVA
• Abra el archivo
index.html
• Visualice y haga las
pruebas
respectivas al
trabajo realizado ¿Funciona?
hasta el momento

24. Terminando el trabajo
• En esta página • Incluya aquí la
agregue los información relativa
contenidos por a la metodología de
unidad que se verán trabajo que se
en la asignatura que desarrollará en la
está virtualizando clase
Contenidos Metodología
(contenidos.html) (metodologia.html)
• Explique las formas • Muestre un pequeño
en que serán currículo de usted
evaluados los
estudiantes
Evaluación Profesor
(evaluacion.html) (profesor.html)

25. Terminando el trabajo
1 2 3
Cree los Pruebe el sitio Revise el
enlaces entre que ya tiene diseño del sitio
las páginas construido (ortografía,
web que acaba gramática,
de crear colores,
imágenes, etc.)

26. Finalmente, …