Creacin de pginas web

(Dreamweaver nivel bsico)

EJERCICIO 8
Para que te vayas haciendo una idea de cmo funciona Dreamweaver,
vamos a crear una pgina web sencilla, con varios estilos de texto, una
imagen y un enlace a otra pgina. Crear esta pgina solo te llevar unos
pocos minutos, y sabrs cmo trabajar con los elementos bsicos con los
que estn hechas la mayora de las pginas web. Si nunca has hecho
una pgina web, este es el momento para descubrir lo fcil que es.

Lo primero que tienes que hacer es abrir Dreamweaver. Abres un

documento nuevo y seleccionas la Categora Pgina bsica, HTML.
Seguidamente introduce, en el documento en blanco, un texto similar al
que aparece a continuacin ()

Ahora tienes que insertar la imagen debajo de la segunda lnea de texto.

En primer lugar debes situar el cursor al final de la segunda lnea y pulsar
enter para ir a una nueva lnea. Despus debes dirigirte al men Insertar,
a la opcin Imagen.
En la nueva ventana que aparece, debers buscar la imagen en la
carpeta en la que la habas guardado, y despus seleccionarla.

IMPORTANTE: Si no guardas previamente la imagen en tu carpeta de

imgenes, Dreamweaver te advierte que la imagen en cuestin est
localizada fuera del sitio COLEGIOIMAGINARIO y te pregunta si quieres
guardarla dentro. Haz clic en S y dile que la guarde en la carpeta
imagenes de tu sitio.
Una vez introducido el texto, vas a modificar el ttulo y el color de fondo GUARDAR IMGENES DE

del documento. INTERNET:

Para ello debes hacer clic sobre el men Modificar y elegir la opcin Muchas de las imgenes que

Propiedades de la pgina. vemos en Internet se pueden

Entonces se abrir la siguiente ventana. copiar al disco duro. Al hacer clic

con el botn derecho del ratn
sobre la imagen que queremos
traer de Internet, se abre una
ventana con una opcin similar a
Guardar imagen como...
(dependiendo del navegador
que utilices) que permite grabar
dicha imagen en un fichero de
nuestro disco duro.
En los navegadores ms
modernos al colocar el cursor
sobre una imagen aparecen
estos iconos
en una
esquina de la imagen, si haces
clic en el icono del disquete
aparecer el mismo men

Cambia el Ttulo por "Primera pgina del Colegio". Guardar imagen como... a que

En Color de Fondo escribe "#CCCCFF", de este modo el fondo del hacamos referencia

documento pasar a ser de color azul. anteriormente.

Seguidamente pulsa sobre el botn Aceptar. Copia una imagen, para luego
poder insertarla en la pgina

Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas web que estamos creando.

visualizar el inspector de propiedades que se encuentra normalmente en Puedes guardarla en la carpeta

la parte inferior de la ventana, y que tiene el siguiente aspecto: imgenes del sitio
Colegioimaginario o en la
carpeta Mis Documentos.

Si no te aparece, puedes mostrarlo a travs del men Ventana, con la

opcin Propiedades.

Si lo que te ocurre es que nicamente te aparece el ttulo del panel, es

porque est contraido. Para que te aparezca desplegado debes pulsar
sobre el botn , que aparece junto al nombre.
Selecciona la primera lnea de texto y cambia el Formato por
"Encabezado 1" y el color por "#000066", tal y como se muestra en la
siguiente imagen.

Despus de esto, la apariencia de la primera lnea habr cambiado.

Selecciona la imagen y las dos lneas de texto. Pulsa sobre el botn
para centrarlos.
Una vez hayas centrado la imagen y las otras dos lneas siguientes,
selecciona la segunda lnea de texto, que an no ha sido modificada.
Cambia el Formato por "Encabezado 3", pulsa una vez sobre el botn
y pulsa tres veces sobre el botn .

Selecciona en la ltima lnea la palabra bsquedas, y en Vnculo

introduce "http://www.google.es", para crear un enlace a esa otra pgina:

NOTA: Todas las web tienen un

documento llamado index.htm
que es el documento en el que
se iniciar la visualizacin de la
web, la pgina de partida.
Guarda este documento con el nombre index.htm

A continuacin vas a crear dos documentos ms:

1.- uno llamado proyecto donde pondrs lo que te parezca del proyecto
educativo
2.- otro llamado servicios donde enumerars los diferentes servicios que
tendra tu colegio imaginario.
Guarda todo en el sitio COLEGIOIMAGINARIO

Para que tu tutor pueda ir viendo cmo va tu trabajo, comprime la carpeta

sitio COLEGIOIMAGINARIO (con sus archivos y subcarpetas) y enva por
correo electrnico tu trabajo.