PRACTICA 1 : DREAMWEAVER CS3

INTRODUCCIN
Qu es Dreamweaver CS3?
Dreamweaver CS3 es un software fcil de usar que permite crear pginas web
profesionales.
Las funciones de edicin visual de Dreamweaver CS3 permiten agregar rpidamente
diseo y funcionalidad a las pginas, sin la necesidad de programar manualmente el
cdigo HTML.

Cualquier editor de texto permite crear

pginas web. Para ello slo es necesario
crear los documentos con la extensin
HTML o HTM, e incluir como contenido
del documento el cdigo HTML deseado.
Puede utilizarse incluso el Bloc de notas
para hacerlo.
Pero crear pginas web mediante el
cdigo HTML es ms costoso que hacerlo utilizando un editor grfico. Al no utilizar un editor
grfico cuesta mucho ms insertar cada uno de los elementos de la pgina, al mismo tiempo
que es ms complicado crear una apariencia profesional para la pgina.
Hoy en da existe una amplia gama de editores de pginas web. Uno de los ms utilizados, y
que destaca por su sencillez y por las numerosas funciones que incluye, es Adobe
Dreamweaver.

Adems de Dreamweaver, existen otra serie de buenos editores de pginas web, como
pueden ser Microsoft Frontpage, Adobe Pagemill, Adobe GoLive, NetObjects Fusion,
CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, algunos de los cuales
tienen la ventaja de ser gratuitos.

Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que luego
querrs que se encuentre a disposicin de todo el mundo en Internet.

Por tanto, una vez hayas terminado de disearla en modo local slo tendrs que subirla a tu
servidor manteniendo la estructura del local. Es decir, debers subir todos los archivos tal y
como aparecen en tu disco duro, respetando el nombre de los archivos y la organizacin de las
carpetas. Si no lo haces de este modo, tu sitio experimentar fallos y enlaces que no
funcionarn.

Recuerda que ser mejor que no utilices caracteres especiales como acentos o ees, ni
espacios en blanco. De esta forma te asegurars de que el servidor puede reconocer sin

ningn tipo de problemas los nombres de los archivos que alojes en l.

Para evitar errores de enlaces rotos o imgenes que no se muestran intenta escribir,
tambin, los nombres en minscula. Algunos servidores distinguen entre maysculas y

minsculas, por lo que si en tu pgina quieres mostrar la imagen foto1.jpg debers

guardarla con ese nombre y no como Foto1.jpg. Evitars horas perdidas buscando
fallos.

1. Configurar mi sitio WEB

Un sitio web es un conjunto de archivos y
carpetas, relacionados entre s, con un diseo
similar o un objetivo comn. Es necesario disear
y planificar el sitio web antes de crear las pginas
que va a contener.
La forma habitual de crear un sitio consiste en
crear una carpeta en el disco local, en un
dispositivo USB (recuerda que los ordenadores
de aula estn congelados). Los documentos
HTML normalmente se crean dentro de dicha
carpeta, mientras que para contener las
imgenes, las animaciones, las hojas de estilo,
etc., se deben crear nuevas carpetas dentro de
sta, con el objetivo de tener una mejor
organizacin de los archivos a la hora de
trabajar. Esto es lo que se conoce como sitio
local.
Despus se podrn copiar los archivos en un
servidor web, en el denominado sitio remoto, lo
que equivale a publicar el sitio, de modo que la
gente podr verlo en Internet.
Es conveniente que la pgina inicial del sitio
tenga el nombre index.html, ya que los
navegadores buscan una pgina con ese nombre
cuando se intenta acceder a una URL genrica.
Por ejemplo, si escribimos la direccin
http://www.iesfrancesdearanda.com en el
navegador, intentara cargar la pgina http://www.
iesfrancesdearanda.com/index.htm, por lo que se
producira un error en el caso de que no existiera
ninguna pgina con el nombre index.htm.

Vamos a comenzar esta primera prctica creando

un sitio web en modo local.
1. Crea una carpeta en tu memoria USB,
llamada MIWEB
2. Crea una carpeta dentro de ella que se
llame imgenes.
3. Ejecuta DW.
4. Selecciona crear un nuevo documento
HTML.
5. Selecciona en Sitio Nuevo sitio.
6. Pon nombre a tu sitio. Llmale
PrimeraWeb
7. Haz clic en siguiente.
8. Siguiente de nuevo.
9. Selecciona la memoria USB dnde vas a
almacenar tu sitio.
10. Selecciona local/red y la carpeta MIWEB
11. Siguiente
12. Finalmente te aparece un resumen de la
creacin del sitio web.

13. Al hacer clic en completado te aparece a

la derecha de la pantalla una ventana de
navegacin de tu sitio web. Te indica que
ests en el sitio PrimeraWeb.

14. Para guardar el sitio web Sitio

Administrar sitios Exportar, a
continuacin selecciona la carpeta
MIWEB, pon un nombre al archivo que
ser almacenado con la extensin de sitio
.ste.
Dentro de esta carpeta se guardarn cada una
de las pginas (html) que crees, as como la
pgina principal de tu web (index.html), el archivo
.ste, carpeta imgenes.
Desde la pgina principal se establecern
vnculos al resto de las pginas.
Todas las imgenes que introduzcas en cada una
de tus pginas se deben de encontrar guardadas
en la carpeta imgenes.

2. Mi primera pgina WEB

Lo primero que tienes que hacer es abrir Dreamweaver. Abre un documento nuevo y
seleccionas la Categora Pgina bsica, HTML.
Seguidamente introduce, en el documento en blanco, el texto que aparece en la
imagen siguiente.

Una vez introducido el texto, modifica el ttulo y el color de fondo del documento.
Para ello debes hacer clic sobre el men Modificar y elegir la opcin Propiedades de la
pgina.
Entonces se abrir una ventana como la que aparece ms abajo.

Cambia el Ttulo por Mi primera pgina.

En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasar a ser de
color azul.
Seguidamente pulsa sobre el botn Aceptar.

Ahora vas a insertar una imagen. Previamente a insertar la imagen, guarda la imagen en la
carpeta imgenes.

Inserta la imagen debajo de la segunda lnea de texto. En primer lugar debes situar el
cursor al final de la segunda lnea y pulsar un intro (Enter) para ir a una nueva lnea.
Despus debes dirigirte al men Insertar, a la opcin Imagen.
Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el
inspector de propiedades que se encuentra normalmente en la parte inferior de la
ventana, y que tiene el siguiente aspecto:

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
contrado. 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 #0000FF (azul), 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 ltimas 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
botn

(cursiva) y pulsa tres veces sobre el

Selecciona de nuevo la ltima lnea, y en Vnculo introduce

http://www.iesfrancesdearanda.es, para crear un enlace a esa otra pgina:

Por ltimo guarda el documento. Ya sabes que puedes hacerlo a travs del men
Archivo, desde la opcin Guardar.
Llama al documento prueba1.htm.
Fjate que a la derecha en la ventana de archivos locales aparece el archivo guardado.
Una vez finalizada la primera pgina, puedes comprobar cmo se visualizar con el
explorador mozilla, Explorer

Si todo lo has realizado correctamente te quedar similar a: