I.E.P.

Alexander Von Humboldt

Pginas Web
EDUCACIN PARA EL TRABAJO

Dreamweaver

Estimado alumno, podemos afirmar que la enseanza y el aprendizaje del rea de Educacin para el Trabajo tiene por finalidad desarrollar competencias laborales, capacidades y actitudes emprendedoras, que permitan a los estudiantes insertarse en el mercado laboral, como trabajador dependiente o generar su propio puesto de trabajo creando su microempresa, en el marco de una cultura exportadora y emprendedora. Los temas que trataremos en las 8 Unidades Didcticas son: I. Conociendo el diseador de pginas web Dreamweaver II. Dando formato especfico a mis pginas educativas III. Introduccin a la programacin en Visual Basic IV. Utilizando las herramientas de programacin V. Animaciones Web VI. Formalizacin y formacin laboral VII. Mantenimiento y ensamblaje de PC VIII. Edicin de audio y video MODULO: Programacin

I BIMESTRE - UNIDAD N 1 CONOCIENDO DREAMWEAVER En la presente unidad se busca que los estudiantes desarrollen sus capacidades, reconociendo, analizando y aplicando los diferentes conceptos relacionados al diseo de Pginas Educativas SESIN N 1.- CONCEPTOS BSICOS DE DREAMWEAVER.Objetivos: - Conocer conceptos bsicos relacionados al editor de pginas web Dreamweaver - Identificar el entorno Dreamweaver 1. DREAMWEAVER.- Macromedia Dreamweaver 8 es un editor HTML profesional para disear, codificar y desarrollar sitios, pginas y aplicaciones Web. Tanto si desea controlar manualmente el cdigo HTML como si prefiere trabajar en un entorno de edicin visual, Dreamweaver le proporciona tiles herramientas que mejorarn su experiencia de creacin Web. Las funciones de edicin visual de Dreamweaver permiten crear pginas Web de forma rpida, sin escribir una sola lnea de cdigo. Puede ver todos los elementos o activos del sitio y arrastrarlos desde un panel fcil de usar directamente hasta un documento. Puede agilizar el flujo de trabajo de desarrollo mediante la creacin y edicin de imgenes en Macromedia Fireworks o en otra aplicacin de grficos y su posterior importacin directa a Dreamweaver. Tambin contiene herramientas que facilitan la adicin de activos de Flash a las pginas web. 2. CONOCIENDO EL ESPACIO DE TRABAJO DE DREAMWEAVER 8.- El espacio de trabajo de Dreamweaver permite ver las propiedades de los documentos y los objetos. Adems, coloca muchas de las operaciones ms frecuentes en barras de herramientas para que pueda realizar cambios en los documentos rpidamente. a) Diseo del espacio de trabajo: En Windows, Dreamweaver proporciona un diseo integrado en una nica ventana. En el espacio de trabajo integrado, todas las ventanas y paneles estn integrados en una nica ventana de la aplicacin de mayor tamao. - Barra de herramientas de Documento: La barra de herramientas de Documento contiene botones que permiten alternar entre diferentes vistas del documento rpidamente: vista Cdigo, vista Diseo y una vista dividida que muestra las vistas Cdigo y Diseo. La barra de herramientas contiene tambin algunos comandos y opciones relativos a la visualizacin del documento y a su transferencia entre los sitios local y remoto.

5 Secundaria

Educacin para el Trabajo

- Prof. Migel Florez F.

I.E.P. Alexander Von Humboldt

Pginas Web

Dreamweaver

Barra de estado.- La barra de estado, situada en la parte inferior de la ventana de documento, proporciona informacin adicional sobre el documento que est creando.

Barra Insertar.- La barra Insertar contiene botones para la creacin e insercin de diversos tipos de objetos, como tablas, capas e imgenes. Al pasar el puntero sobre un botn, aparece una descripcin de la herramienta con el nombre del botn. Los botones estn organizados en categoras, a las que puede cambiar en la parte izquierda de la barra Insertar. Si el documento actual contiene cdigo de servidor, como los documentos ASP o CFML, aparecen tambin otras categoras. Cuando se inicia Dreamweaver, se abre la ltima categora con la que ha trabajado.

5 Secundaria

Educacin para el Trabajo

- Prof. Migel Florez F.

I.E.P. Alexander Von Humboldt

Pginas Web
ACTIVIDAD

Dreamweaver

1.- Crea una carpeta en la unidad D:\ de tu disco duro, con el nombre MI Primera Web y aade las subcarpetas Webs, Imgenes, Msica, Animaciones. D:\Mi Primera Web Webs Imgenes Msica Animaciones 2.- Crea en Word 3 artculos extrados de Internet con imgenes y texto artstico y al momento de Guardar como, elige Guardar como tipo: Pgina Web. Gurdalas en la Subcarpeta Webs. (Sugerencias: 1.- A. Von Humboldt, 2.- La Hora del Planeta 3.- Da Internacional de la Mujer 3.- Tambin de Internet busca imgenes, animaciones, msica y las copias en sus respectivas Subcarpetas Imgenes, Animaciones, Msica. 4.- Ingresa al Programa Dreamweaver (Clic en Men Inicio/Todos los Programas/Macromedia/Dreamweaver 8

12.- En esta opcin hacemos clic en la carpeta amarilla y seleccionamos la carpeta que creamos Mi Primera Web y presionamos siguiente.

13.- Aqu hacemos clic en la carpeta amarilla y nuevamente buscamos nuestra carpeta que hemos creado, luego presionamos siguiente:

14 Aqu lo dejamos como est y presionamos siguiente:

5.- De la primera ventana que aparece selecciona HTML 6. Ahora estamos en la ventana principal de Dreamweaver. 7.- Hacemos clic en Diseo

15.- Finalmente hacemos clic en COMPLETADO

8. De la lista que se despliega seleccionamos DISEO haciendo Clic 9.- El siguiente paso es crear nuestro SITIO, para ello hacemos clic en el Men Sitio y elegimos Nuevo Sitio 10.- Colocar el nombre del Sitio: Humboldt

16.- El siguiente paso es hacer clic en Marcos, de la barra de herramientas

17 Elegimos el Marco Superior e izquierdo anidado

18.- Seguidamente hacemos clic en el Men Archivo y seleccionamos guardar todo 19.- El primer marco que se guarda es el principal lo llamaremos INDEX, al segundo marco lo llamaremos DERECHA, al tercero IZQUIERDA, al cuarto SUPERIOR (notar la marca que aparece al guardar cada marco) Ahora pondremos color y texto a cada marco

11.- Elegimos NO y presionamos siguiente

5 Secundaria

Educacin para el Trabajo

- Prof. Migel Florez F.

I.E.P. Alexander Von Humboldt

SUPERIOR IZQUIERDA DERECHA

Pginas Web

Dreamweaver
Animar texto con la opcin marquee a) Seleccionar el texto que se desea animar. b) De la barra de propiedades hacer clic en el botn Quick Tag Editor de la lista desplegable hacer doble clic en la opcin marquee

A la lnea del marco le vamos a cambiar de color para ello hacemos clic en la lnea y seleccionamos Bordes: SI, y le damos un color al borde

20.- Seleccionar el marco superior, hacer clic derecho, de la lista desplegada seleccionar la opcin PROPIEDADES DE LA PGINA

Vnculos con otras Pginas Web Por ejemplo del marco izquierdo del men que hemos creado seleccionamos Alexander Von Humboldt, luego de la barra de propiedades hacemos clic en la carpeta amarilla de vnculo, y buscamos de nuestra carpeta MI Primera Web, Subcarpeta WEBS el archivos Alexander Von Humboldt. En la opcin Destino DEST, seleccionar MAINFRAME.

Seleccionar el color de fondo. 21.- Tambin le podemos agregar texto al marco aplicndole formato de la barra de propiedades, la pgina deber quedar como el esquema siguiente:
I.E.P.Alexander Von Humbodt Men - Alexander Von Humboldt - La Hora del Planeta - Da Internacional de la Mujer

AUTOEVALUACION N 1 (En el cuaderno) I BIMESTRE Unida N 1 CONOCIENDO DREAMWEAVER 1. 2. 3. 4. 5. 6. Qu caractersticas presenta el programa Dreamweaver? Par que sirve? Qu es una pgina Web? Qu es cdigo HTML? Cmo ingresamos el Programa Dreamweaver? Dibuja/pega la ventana de Dreamweaver y describe cada una de sus partes Trabajo de Investigacin. (En el cuaderno). Realiza un trabajo de investigacin Tema: Pginas Educativas

5 Secundaria

Educacin para el Trabajo

- Prof. Migel Florez F.