Universidad Nacional de Ingeniería
                        UNI On Line
   Diplomado en Pedagogía Virtual Avanzado



Dreamweaver CS3
Norman Trujillo, Ing.
norman.trujillo@uni.edu.ni
Contenidos

         ¿Qué es
      Dreamweaver?

       Conociendo la
          Interfaz

      Haciendo mi web
          docente
¿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
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            la carpeta raíz donde
                       se guardarán los
  (index.html)       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                                                      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
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
• Actividades
  En 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 archivos
  index.html y
  objetivos.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       ¿Funciona?
  hasta el momento
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)
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.)
Finalmente, …
Adobe Dreamweaver CS3

Adobe Dreamweaver CS3

  • 1.
    Universidad Nacional deIngenierí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.
  • 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 dela pantalla
  • 13.
    Construyendo la webdocente • 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áginaObjetivos • 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 dela pantalla
  • 18.
    Construyendo la páginaObjetivos • 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 entrelas páginas • Abra la página index.html • Seleccione el texto que dice Objetivos de la asignatura
  • 20.
    Creando vínculos entrelas páginas • En la barra Propiedades • Seleccione Vínculo
  • 21.
    Creando vínculos entrelas 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.