adobe dreamweaver cs3

Universidad Nacional de IngenieríaUNI On Line

Diplomado en Pedagogía Virtual Avanzado

Dreamweaver CS3Norman Trujillo, Ing.norman.trujillo@uni.edu.ni

Contenidos

¿Qué es Dreamweaver?

Conociendo la Interfaz

Haciendo mi web docente

¿Qué es Dreamweaver?

Editor HTMLSitios web

1. - Diseño

2.- Modificación

Herramientas

1. - código HTML

2.- edición visual

Personalización

1.- objetos y comandos

2.- métodos abreviados de teclado

Conociendo la Interfaz

• Abrir elementos recientes

• Crear un nuevo documento

• Crear con una plantilla

Conociendo la Interfaz

Inicio

• En el grupo Crear con plantilla

• Escoger página de inicio (tema)

Seleccionando una plantilla

• En la carpeta de muestra Página de inicio (tema)

• Selecciona Alojamiento – Página principal

• Crear

Almacenando los archivos

• Asígnele nombre a la primera página (index.html)

la carpeta raíz donde se guardarán los

archivos generados ya está configurada

por defecto

Almacenando los archivos

• Asígnele nombre a la carpeta donde se guardarán otros archivos

– Imágenes

– Archivos CSS

– …

• recursos_index

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

Estado actual de la pantalla

Construyendo la web docente

• Modifique el contenido de la web – Escriba el nombre

de la asignatura– Muestre algunos

posibles vínculos del sitio (objetivos, contenidos, metodología, etc.)

– Agregue una imagen suya

– Indique su nombre– Redacte el mensaje

de bienvenida

Nombre de la asignatura

Objetivos de la asignatura Contenidos Metodología Evaluación Profesor

MENSAJE DE BIENVENIDA

IMAGEN DEL DOCENTE

NOMBRE DEL DOCENTE

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)

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

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

Estado actual de la pantalla

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

Creando vínculos entre las páginas

• Abra la página index.html

• Seleccione el texto que dice Objetivos de la asignatura

Creando vínculos entre las páginas

• En la barra Propiedades

• Seleccione Vínculo

Creando vínculos entre las páginas

• Localice el archivo objetivos.html

• Presione el botón Aceptar

• ActividadesEn la página Objetivos el texto que dice Inicio debe referenciar la página index.html

Salvando el trabajo

• En el menú Archivo

• Seleccione la opción Guardar

• Haga lo mismo en los archivosindex.html yobjetivos.html

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 hasta el momento

¿Funciona?

Terminando el trabajo

• En esta página agregue los contenidos por unidad que se verán en la asignatura que está virtualizando

Contenidos (contenidos.html)

• Incluya aquí la información relativa a la metodología de trabajo que se desarrollará en la clase

Metodología (metodologia.html)

• Explique las formas en que serán evaluados los estudiantes

Evaluación (evaluacion.html)

• Muestre un pequeño currículo de usted

Profesor (profesor.html)

Terminando el trabajo

Cree los enlaces entre las páginas web que acaba de crear

Pruebe el sitio que ya tiene construido

Revise el diseño del sitio (ortografía, gramática, colores, imágenes, etc.)

1 2 3

Finalmente, …