ESCUELA: Tecnologas de Informacin y Comunicaciones

ASIGNATURA: Taller de Programacin para Internet

PROFESORA: Sofa Acevedo L.

GUIA

DE EJERCICIOS N 12:

TEMA: Introduccin a Dreamweaver

OBJETIVO: Al trmino de la gua el alumno estar en condiciones de:
1.
2.
3.
4.

5.

Planificar un Sitio Web elaborando un Mapa del Sitio.

Reconocer el entorno Dreamweaver y sus espacios de trabajo.
Definir un Sitio Web con Dreamweaver
Crear una plantilla Dreamweaver.
Optimizar la plantilla creada formateando texto y agregando imgenes.

FUNDAMENTO TEORICO:
1. Entornos de trabajo en Dreamweaver
Dreamweaver es una herramienta de desarrollo que ayuda en la construccin de sitios
web. Es un editor HTML WYSIWYG (We See We Get Lo que vemos es lo que obtenemos, por
sus siglas en ingls) que ayuda a crear pginas visualmente (sin saber cdigo HTML).
Dreamweaver es similar a la herramienta Flash ya estudiada. El panel de propiedades se
encuentra en la parte inferior de la pantalla, el Panel de archivos al lado derecho. En la parte
superior tenemos el men con todas las posibilidades que nos brinda la herramienta. Los
botones de acceso rpido nos permiten realizar las tareas ms usuales ms rpidamente.
Mencin especial merecen los botones "Cdigo", "Dividir" y "Diseo" que se ven al abrir
un documento, los cuales permiten trabajar en un entorno de Diseo, escribiendo cdigo o
dividiendo la pantalla para tener ambos ambientes.
2. Planificar el Sitio
Antes de empezar a crear pginas web en Dreamweaver, se debe haber planeado el sitio
y haber diseado la presentacin del mismo.
Para empezar, se necesita disear qu es lo que queremos en el sitio web. Es bueno
dibujarlo primero en papel, en un Mapa del Sitio. Usualmente habr una "Home Page" o Pgina
de Inicio, una pgina de contacto , una de "quines somos" y otras pginas de contenido. Tal
vez quiera adicionar alguna caracterstica adicional, como foros, libro de visitas, blogs, etc.

Otra forma de disear el Mapa del Sitio es usando notas de tipo post-it. Cada vez que se
nos ocurra alguna idea que deseemos incorporar al sitio, lo anotamos en un post-it. Una vez
hecho esto, en una pared o superficie grande, debemos colocar cada item en un esquema
lgico e intuitivo y seguir acomodndolos hasta quedar seguros de lo que queremos.
Se debe establecer un plan de Sitio que sea fcil de navegar y que permita a los
visitantes encontrar lo que necesitan rpida y fcilmente.
Luego, para construir el sitio web usando Dreamweaver, se seguirn, generalmente, los
siguientes pasos:
Paso 1: Definir un nuevo sitio web en Dreamweaver
Paso 2: Crear una Plantilla Dreamweaver
Paso 3: Crear la presentacin de las Pgina en la Plantilla Dreamweaver
Paso 4: Crear una Hoja de Estilo CSS
Paso 5: Insertar elementos comunes en la Plantilla Dreamweaver:Texto e Imgenes
Paso 6: Crear Libreras o inclusiones de lado de Servidor
Paso 7: Definir las Regiones Editables de la Plantilla
Paso 8: Crear las pginas HTML del Sitio con Contenido/Formularios
Paso 9: Enlazar las Pginas
Paso 10: Hacer pruebas locales del Sitio y subirlas a un servidor
Ejercitaremos algunos de estos pasos en esta y prximas guas.

3. Definir un Sitio Web en Dreamweaver

Para definir un nuevo Sitio Web en Dreamweaver, siga los siguientes pasos:

1. Cree una carpeta en la cual guardar los archivos de su proyecto. Cree tambin una
carpeta "imgenes" dentro de la anterior y agregue en ella alguna imgenes.
2. Abra Dreamweaver
3. Defina un nuevo Sitio: Sitio (o Sitio de Dreamweaver en la pantalla inicial de la
aplicacin) > Nuevo Sitio > Pestaa "Avanzadas"
4. Complete el nombre de su Sitio en la caja de texto "Nombre de Sitio"
5. Use el cono de la carpeta amarilla al lado de la caja de texto "Carpeta Raz Local" para
navegar hasta la carpeta del proyecto que haba creado.
6. Se debera poder ver la carpeta 'imgenes'. Haga clic en "Seleccionar" y luego
"Aceptar". Debera ver la carpeta en el Panel de archivos, al lado derecho de su pantalla.
4. Crear una plantilla en Dreamweaver
Si la mayora de las pginas de sus sitio debe tener una misma presentacin, es recomendable
usar plantillas.
Las ventajas de crear una plantilla Dreamweaver son:
Todas las pginas se vern consistentes
Cuando necesitemos realizar cambios que afecten la presentacin de todo el sitio,
podremos simplemente hacer los cambios a la plantilla y se actualizarn todas las
pginas automticamente.
El archivo de plantilla de dreamweaver tiene una extensin .dwt y se guardar en una carpeta
llamada "Templates".
Para crear una plantilla dreamweaver siga estos pasos:
1. Archivo > Nuevo
2. Tipo de Pgina > Plantilla en blanco > Plantilla HTML
3. Diseo Seleccione alguna de las opciones prediseadas y mejrela, o seleccione
"ninguno" y disee una usted mismo.

FUENTE PARA LA ELABORACIN DE ESTA GUIA:

http://www.vineyardesigns.com/resources/dreamweaver/

ACTIVIDADES :
1) Elija un tema para elaborar un Sitio Web.
2) Elabore un esquema del Plan de un Sitio Web. Coloque tanto las pginas usuales como otras
secciones o pginas acordes al tema elegido.
2) Defina un nuevo Sitio Web con Dreamweaver.
3) Cree una Plantilla Dreamweaver.
4) Enriquezca esta plantilla agregando texto e imgenes de la carpeta de imgenes de su sitio.