Adobe Dreamweaver CS3

27
Universidad Nacional de Ingeniería UNI On Line Diplomado en Pedagogía Virtual Avanzado Dreamweaver CS3 Norman Trujillo, Ing. [email protected]

description

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

Transcript of Adobe Dreamweaver CS3

Page 1: Adobe Dreamweaver CS3

Universidad Nacional de IngenieríaUNI On Line

Diplomado en Pedagogía Virtual Avanzado

Dreamweaver CS3Norman Trujillo, [email protected]

Page 2: Adobe Dreamweaver CS3

Contenidos

¿Qué es Dreamweaver?

Conociendo la Interfaz

Haciendo mi web docente

Page 3: Adobe Dreamweaver CS3

¿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

Page 4: Adobe Dreamweaver CS3

Conociendo la Interfaz

• Abrir elementos recientes

• Crear un nuevo documento

• Crear con una plantilla

Page 5: Adobe Dreamweaver CS3

Conociendo la Interfaz

Page 6: Adobe Dreamweaver CS3
Page 7: Adobe Dreamweaver CS3

Inicio

• En el grupo Crear con plantilla

• Escoger página de inicio (tema)

Page 8: Adobe Dreamweaver CS3

Seleccionando una plantilla

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

• Selecciona Alojamiento – Página principal

• Crear

Page 9: Adobe Dreamweaver CS3

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

Page 10: Adobe Dreamweaver CS3

Almacenando los archivos

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

– Imágenes

– Archivos CSS

– …

• recursos_index

Page 11: Adobe Dreamweaver CS3

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

Page 12: Adobe Dreamweaver CS3

Estado actual de la pantalla

Page 13: Adobe Dreamweaver CS3

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

Page 14: Adobe Dreamweaver CS3

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)

Page 15: Adobe Dreamweaver CS3

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

Page 16: Adobe Dreamweaver CS3

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

Page 17: Adobe Dreamweaver CS3

Estado actual de la pantalla

Page 18: Adobe Dreamweaver CS3

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

Page 19: Adobe Dreamweaver CS3

Creando vínculos entre las páginas

• Abra la página index.html

• Seleccione el texto que dice Objetivos de la asignatura

Page 20: Adobe Dreamweaver CS3

Creando vínculos entre las páginas

• En la barra Propiedades

• Seleccione Vínculo

Page 21: Adobe Dreamweaver CS3

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

Page 22: Adobe Dreamweaver CS3

Salvando el trabajo

• En el menú Archivo

• Seleccione la opción Guardar

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

Page 23: Adobe Dreamweaver CS3

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?

Page 24: Adobe Dreamweaver CS3

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)

Page 25: Adobe Dreamweaver CS3

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

Page 26: Adobe Dreamweaver CS3

Finalmente, …

Page 27: Adobe Dreamweaver CS3