APUNTES

DE

DREAMWEAVER

CLASE I

PROF. VIVIANA LLORET

http://aulamatic.blogspot.com
 DREAMWEAVER

Clase I: En esta clase aprenderemos a configurar un sitio local, pero

antes definamos qué es un sitio web: Es un conjunto de archivos y
carpetas, relacionados entre sí, con un diseño similar y un objetivo
común.

Crear un sitio consiste en crear una carpeta en el disco local. Los do-
cumentos HTML, se guardarán dentro de esta carpeta, mientras que
las imágenes, las animaciones, las hojas de estilo se crearán en nue-
vas carpetas dentro de la primera.

Después se podrán copiar los archivos en un servidor web “sitio re-

moto”, lo que equivale a publicar el sitio.
La página inicial se debe guardar con el nombre index.htm o index.h-
tml.

En la actividad que debes desarrollar crearemos una página web lla-

mada currículum_vitae;

Crea en el disco local una carpeta con el nombre

currículum_vitae_Apellido, y dentro de ésta crea otra con el
nombre imagenes. Copia el archivo foto.JPEG en la carpeta
imagenes y currículo.doc en la carpeta currículum_vitae_Ape-
llido.

Una vez creada las carpetas que formarán el sitio local, definimos el
sitio en Dreamweaver.

Para ello haz clic en Sitio > Nuevo

Definir
– Nombre del sitio
– Carpeta raíz local ( haz clic en el icono con forma de car-
peta y selecciona la carpeta currículum_vitae)
– Carpeta predeterminada de imágenes (carpeta image-
nes)

Dreamweaver Prof. Viviana Lloret

La primer página la guardamos con el nombre index.html, para
guardar la página, haz clic en Archivo > Guardar
Para agregar nuevas páginas, haz clic en Archivo > Nuevo > HTML.

Crear las siguientes páginas: Perfil, Experiencia_Laboral, Es-

tudio, Computación, Cursos, hobbies, idioma.

Como en todas las páginas debemos insertar una tabla de 8 filas y 2

columnas, aprenderemos a crear una plantilla (página especial en la
cual se crea la tabla pedida, se crearán los hipervínculos a las demás
páginas, y se configurará una región (Región editable) para agregar
el contenido correspondiente a cada página. La guardamos como
plantilla (Dreamweaver le agregará la extensión . dwt). Luego vincu-
laremos la plantilla a cada página.

Para ello haz clic en Archivo > Nuevo > Plantilla HTML.
Para insertar la tabla Insertar > Tabla. Completamos las casillas se-
gún el modelo:

Dreamweaver 3 Prof. Viviana Lloret

Combinaremos las celdas de la segunda columna, Para ello:
Selecciona las celdas de la segunda columna, haz clic en Com-
binar celdas.

En las celdas de la primer columna escribe los nombres de

cada página creada: Home (index), Perfil, Estudios,…

Hipervínculos: Los hipervínculos son enlaces que al hacer clic en ellos

nos lleva a otra página o archivo.

Dreamweaver 4 Prof. Viviana Lloret

Insertaremos hipervínculos a las páginas creadas; para ello:
Selecciona el texto Home, haz clic en el icono, en la ventana
propiedades, con forma de carpeta que se encuentra a la de-
recha del cuadro de texto vínculo, haz clic en la página In-
dex.html > Aceptar.
Realiza el mismo procedimiento para insertar hipervínculos a
las restantes páginas.

Modificaremos el color de fondo de la página, para ello:

Ubica el cursor en un lugar libre de la página, haz clic en Propiedades
de la página, en la ventana propiedades, selecciona el color #cccc66

Dreamweaver 5 Prof. Viviana Lloret

Modificamos, ahora, el color de fondo de la tabla, para ello, seleccio-
namos la tabla, esto lo podemos hacer ubicando el cursor en alguna
celda, clic en Modificar > Tabla > Seleccionar Tabla

Selecciona como color de fondo #00cc33, y como color de bor-

de #003300 (Modificar previamente el tamaño de borde a 1).

Por último, ubicamos el cursor en la segunda columna para crear una

región editable, que contendrá el contenido variable de cada página.

Dreamweaver 6 Prof. Viviana Lloret

Haz clic en Insertar > Objetos de Plantilla >Región editable,
en la ventana que se abre asígnale el nombre “contenido”.

Una vez lista la plantilla la debemos guardar dando el nombre, por

ejemplo, plantilla.dwt (Las plantillas tienen la extensión .dwt y al cre-
arlas se crea automáticamente la carpeta Templates ).

Luego debemos vincular la plantilla a cada página, para ello:

Nos ubicamos en cada página, clic en Modificar >Plantilla >

Aplicar plantilla a la página, seleccionar la plantilla y listo.

Una vez guardados todos los cambios, con la tecla F12 podrás visua-
lizar la página creada en tu navegador.

Por último modificaremos el alto de las celdas de la primer columna a

60, esto lo debemos hacer en la plantilla y luego al guardarla se nos
preguntará si deseamos actualizar las páginas, a lo que respondere-
mos que sí.

Dreamweaver 7 Prof. Viviana Lloret

Oprimimos F12, veremos

En la próxima clase completaremos la página agregando el texto (lo

copiaremos del archivo currículum.doc) e insertaremos la foto foto.J-
PEG.

Dreamweaver 8 Prof. Viviana Lloret

Dreamweaver 9 Prof. Viviana Lloret