Prcticas guiadas par

a el
diseo web con
Dreamweaver MX

Prof. Roger Carrera Mendoza

Prof. Roger Carrera Mendoza

Prctica 1 - Introduccin a DREAMWEAVER

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

Editar pginas web

Tal y como ya hemos visto, 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. Aunque es
necesario conocer algo de HTML para poder hacer pginas de
cierta calidad.
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 Macromeda
Dreamweaver.

Conceptos bsicos de DREAMWEAVER

Cuando entramos a Dreamweaver lo primero que vemos es esta pantalla:

Cuadro de
Herramientas:

Barra de propiedades: en ella tenemos las

propiedades de cada uno de los elementos de

para insertar
imgenes,
hipervnculos,
capas, barras,
mens
desplegables, etc

nuestra pgina web. Por ejemplo si

seleccionamos un texto desde ah podemos
cambiar el tipo de letra, el tamao, la
alineacin, ponerle un hiperenlace, etc.

1) Esta va a ser nuestra primera pgina web. Lo primero va a ser ponerle un ttulo. Para ello vamos a
seguir los siguientes pasos:

Pulsar con el botn derecho sobre cualquier parte de la hoja en blanco y seleccionar la
opcin Propiedades de la pgina.
Aparecer la siguiente ventana, en ella pondremos el ttulo que tenemos aqu y como color
de fondo pondremos el naranja.

Desde aqu se puede

poner
tambin
una
imagen como fondo de
pantalla si quisiramos,
se hace seleccionndola
desde aqu

2) Hasta ahora deberamos tener una pgina web donde arriba del todo ponga el ttulo que
hemos introducido y como color de fondo tengamos el color naranja. Ahora vamos a introducir
el siguiente texto:
COLOR
CREAR PGINAS WEB CON DREAMWEAVER
AZUL
Muchas de las imgenes que vemos en Internet se pueden 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.

3) Para conseguir los efectos que hay en el texto que acabas de copiar (negritas, letras
en colores, cursivas, etc) se debe recurrir a la ventana de propiedades. Para ello
seleccionaremos el texto deseado (por ejemplo: botn derecho del ratn debe ir en
negrita) y se pone pulsando sobre

TIPO DE LETRA

COLOR DE

(seleccionar el tipo

LETRA

ARIAL)

CURSIVA

ALINEACIN DEL
TEXTO: Izquierda,
Centrada o Derecha

4) Crear dentro de vuestra carpeta de alumno una carpeta llamada DREAM y dentro guardar
esta pgina con el nombre pagina1.htm

Prctica 2 - Introduccin a DREAMWEAVE

R
Configuracin de un sitio local (I)
Un sitio web es un conjunto de archivos y carpetas , relacionados entre si, con un diseo
similar o un objetivo comn. Es necesario disear y planificar el sitio web antes de crear la
s
pginas que va a contener.
Por ejemplo si vamos a crear una pgina web sobre un equipo de ftbol, lo primero es crear un
sitio web (por ejemplo que se llame ftbol) y dentro de ese sitio ya irn las diversas pginas que
formen parte de l. Como por ejemplo presentacion.htm, palmares.htm, plantilla.htm, etc.
La forma habitual de crear un sitio web consiste en crear una carpeta en el disco local. Lo
s
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.
Es muy importante que la pgina principal 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 escribiramos la direccin genrica http://www.petrer.es/ en el navegador, ste
intentara cargar la pgina http://www.petrer.es/index.html, por lo que se producira un error
en el caso de que no existiera ninguna pgina con el nombre index.html

Crear o editar un sitio web

Una vez creadas las carpetas que formarn un sitio local, ya es posible definir el sitio
en
Dreamweaver. Para ello hay que seguir los siguientes pasos:
1) Deberis tener creada dentro de vuestra carpeta de alumno una carpeta llamada DREAM
2) Dirigirse al men Sitio, a la opcin Nuevo sitio. All veremos la siguiente pantalla:
3) Ah introduciremos los
siguientes datos:
- Donde pone Nombre del
sitio pondremos Sitio web
de vuestro nombre
- En la Carpeta raz local
seleccionaremos la carpeta
DREAM que previamente
hemos creado.

Cuando aceptemos nos aparecer una nueva ventana que ser el sitio web. En ella habrn dos
columnas. En la de la derecha veremos la lista de pginas web que tiene nuestro sitio, y en la

izquierda veremos la estructura de rbol que va adoptando nuestro sitio web. Esta ventana la
dejaremos minimizada porque en ella podremos ir viendo la estructura que tiene la pgina.
4) Ahora nos vamos a la otra ventana, la que est toda en blanco y vamos a definir tal y como
hicimos en la prctica anterior las propiedades de la pgina (se haca pulsando con el bot
n
derecho y seleccionando la opcin Propiedades de pgina). Introduciremos los siguiente
s
valores:
- Titulo: Primera pgina del sitio web
- Color de fondo: Azul claro
5) Utilizando los elementos de la barra de propiedades, escribir el siguiente texto en la pgina
que tenis abierta:
Obtener ayuda del men de ayuda
Slo tiene que hacer clic en Ayuda de Microsoft Word, en el men de ayuda. Si el
Ayudante est activado, aparecer en pantalla. Si el Ayudante est desactivado, aparecer la
ventana de ayuda. Para escribir una pregunta en la ventana de ayuda, haga clic en la ficha
Asistente para Ayuda. Para desplazarse por una tabla de contenido de la ayuda, haga clic en
la ficha Contenido. Cuando desee buscar palabras o frases especficas, haga clic en la ficha
ndice.

Formato:
Fuente:

Tamao:
Color:
Estilo:
Alinear:
Lista:

Permite poner encabezados al texto seleccionado

Permite cambiar tipo de fuente del texto
seleccionado.

Permite cambiar el tamao del texto seleccionado.

Permite cambiar el color del texto seleccionado.
Permite cambiar el texto seleccionado a negrita / cursiva.
Permite alinear el texto seleccionado a la izqda., centrado, dcha.
Permite crear listas para el texto seleccionado

Sangria:

Permite establecer sangras para el texto seleccionado

6) Guardar la pgina con el nombre index.html dentro del sitio web DREAM

Prctica 3 - Introduccin a DREAMWEAVE

R
Configuracin de un sitio local (II)
1) Vamos a crear dos pginas web nuevas, para ello nos vamos al men Archivo
/
Nuevo.
-

La primera la guardaremos con el nombre prueba1.htm dentro del sitio web

DREAM y dentro tendr el siguiente texto:
Texto de la pgina prueba1.htm

La segunda la guardaremos con el nombre prueba2.htm dentro del sitio web

DREAM y dentro tendr el siguiente texto:
Texto de la pgina prueba2.htm

2) Ahora vamos a abrir la pgina index.htmly en ella escribiremos al final de la

pgina el siguiente texto:
Acceso a prueba1

Acceso a prueba2
Queremos establecer hipervnculos para que cuando pulse sobre Acceso a prueba1 pase a la
pgina prueba1.htm. El proceso para realizar esto es muy sencillo:
- Seleccionar la frase Acceso a prueba1 y pulsar sobre el botn de la barra de propiedades.

- Se abrir una ventana donde especificaremos el destino del hipervnculo. En este caso
seleccionaremos la pgina prueba1.htm
- Realizar este mismo proceso con Acceso a prueba2 y guardar los cambios

Vistas del sitio

Es posible visualizar un sitio en el panel Sitio o en una ventana. El panel Sitio se puede abrir a
travs del men Ventana, opcin Sitio. Tambin pulsando F8 o sobre el botn

del
lanzador.
3) Vamos a hacer la prueba con nuestro sitio web DREAM. Si todo ha ido bien hasta
el
momento deberamos tener 3 pginas web: index.html, prueba1.htm y prueba2.htm.

- Pulsaremos sobre el botn

quedar algo como esto:

y nos debera

En esta imagen se visualizan el mapa del sitio y el sitio local.

En este caso los documentos prueba1.htm y prueba2.htm cuelgan del documento index.html,
ya que ste ha sido definido como pgina principal del sitio y contiene vnculos hacia los otros
dos.
Si los archivos se mueven de una carpeta a otra, o se cambian de nombre, desde fuera
de
Dreamweaver, las pginas no se mostrarn correctamente: no aparecern imgenes,
no
funcionarn enlaces, etc.
En cambio, si estas modificaciones se hacen desde dentro de Dreamweaver , a travs del
sitio, es posible actualizar automticamente las pginas para que si hacen referencia a un
objeto que ha cambiado, despus no se produzcan problemas al visualizarlas.
Al modificar algn objeto que es referenciado por algn otro documento, se muestra u
na
ventana similar a esta, que indica los documentos que hacen referencia a dicho objeto, y qu
e
pueden ser actualizados para que no se produzcan los problemas antes mencionados.
Simplemente hay que pulsar sobre el botn Actualizar.
4) Cambiar las propiedades de pgina de las pginas prueba1.htm y prueba2.htm (se haca
pulsando el botn derecho y seleccionando Propiedades de pgina) y ponerles los siguient
es
atributos:
prueba1.htm
-

Color de fondo de color amarillo

Color de texto de color verde

Titulo de pgina: Mi segunda pgina web con Dreamweaver : prueba1

Escribir al final de la pgina el texto Volver e insertar un hipervnculo para que vuelva a
index.html

prueba2.htm
-

Color de fondo de color naranja

Color de texto de color azul

Titulo de pgina: Mi tercera pgina web con Dreamweaver : prueba2

Escribir al final de la pgina el texto Volver e insertar un hipervnculo para que vuelva a
index.html

Guardar los cambios y ver si ha cambiado algo en el sitio web.

5) Abrir la pgina index.html y pulsar la tecla F12. Con esto conseguimos ver una vista previa de
cmo quedara esta pgina web en el navegador.

Comprobar que todos los hipervnculos funcionan bien y si alguno falla corregirlo.

Prctica 4 - Introduccin a DREAMWEAVE

R
Imgenes (I)
En este tema vamos a ver cmo insertar imgenes en un documento. Tambin veremos
cmo crear algunas imgenes especiales, como es el caso de los Rollovers y lo
s
botones flash, que ayudan a mejorar la apariencia de nuestras pginas.
Para insertar una imagen hay que dirigirse al men Insertar , a la opcin Image
n.
Despus de esto, ya es posible seleccionar una imagen a travs de la nueva ventana.
1) Vamos a insertar dentro de la pgina index.html de vuestro sitio web DREAM unas
cuantas imgenes. stas debern guardarse previamente dentro de una carpeta llamada
IMAGENES que deberis crear dentro del sitio web DREAM. Las imgenes a insertar
las tenis dentro de la carpeta C:\ ALUMNO \ RECURSOS PARA EL ALUMNO \
IMGENES:
AERONAVE.JPG

ARCO.JPG

AVION.JPG CADENA.JPG

Ponerlas una debajo de la otra centradas, utilizando el botn centrar y guardar la pgina
index.html

Cambiar el tamao de una imagen

Dentro de Dreamweaver puede modificarse el tamao de las imgenes. Dicho cambio
de tamao no se aplica directamente sobre el archivo de imagen, sino que lo que vara
es la visualizacin de la imagen dentro de la pgina (por lo tanto no es recomendable).
Es muy probable que la imagen resultante no sea de buena calidad, en comparacin de
como podra quedar modificndola desde un editor externo, como Photoshop o Gimp.
Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa
al
icono de Dreamweaver y modificamos su tamao de varias formas diferentes:

Imagen original

Imagen con tamao modificado

Puede apreciarse claramente que los resultados no son muy satisfactorios, pero e
n
ocasiones puede resultar til modificar el tamao de algunas imgenes aunque est
o
implique perder calidad.
Existen dos formas de modificar el tamao:

Una de ellas es, una vez seleccionada la imagen, arrastrar con el

puntero alguno de los recuadros negros que aparecen alrededor de la
imagen.

La otra es a travs de la ventana de propiedades, cambiando los

campos An (anchura) o Al (altura). Estos campos aparecern en el
inspector cuando sea seleccionada alguna imagen.

Para cambiar la alineacin de la imagen (izquierda, centrada, derecha) podemos hacerlo

igual que hicimos con el texto, utilizando las opciones de alineacin de la ventana d
e
propiedades.
Pueden crearse vnculos y comportamientos sobre partes de una imagen, sin
la
alineacin:
IMAGE
AERONAVE.JPG

ANCHURA
600

(AN)

ALTURA (AL)
200

ALINEACIN
Derecha

ARCO.JPG

150

500

Centrada

AVION.JPG

300

300

Izquierda

CADENA.JPG

500

100

Derecha

necesidad de que sea sobre toda ella. A esto se le conoce como mapa de imagen.

2) Vamos a abrir la pgina web index.html y modificaremos el tamao de l

as
imgenes que antes insertamos, de forma que queden con el siguiente tamao
y

3) Ahora crearemos dentro de nuestro sitio web DREAM, tres pginas ms, llamadas
valencia.htm, andalucia.htm y madrid.htm. stas tendrn el siguiente texto
dentro:
- valencia.htm = Pgina principal de la Comunidad Valenciana , con fondo amarillo

- andalucia.htm = Pgina principal de la Comunidad Andaluza, con fondo rojo

- madrid.htm = Pgina principal de la Comunidad de Madrid, con fondo naranja

4) A continuacin, guardad las pginas anteriores y cread una pgina web nue
va
llamada mapa.htm, donde aadiremos una imagen del mapa de Espaa (qu
e
previamente os deberis bajar de Google).

Seguidamente definiremos sobre ella un mapa de imagen. Esto significa

que dependiendo de la zona de la imagen donde pinchemos podremos abrir
un hipervnculo diferente. Para ello utilizaremos la herramienta

Dibujar con esta herramienta el contorno de la Comunidad

Valenciana y luego donde pone vnculo, estableced la
pgina valencia.htm.
Haced lo mismo con el resto de Comunidades, guardar los cambios y comprobad que
todo funciona correctamente pulsando sobre F12.
Guardad los cambios a la pgina mapa.htm.

Prctica 5 - Introduccin a DREAMWEAVE

R
Imgenes (II) - Imagen de sustitucin
Un rollover o imagen de sustitucin es una imagen que cambia por otra cuando e
l
puntero se sita sobre ella. Este tipo de imagen suele utilizarse en los mens o en los
botones para desplazarnos a travs de distintas pginas.
Para insertar un rollover hay que dirigirse al men Insertar, Imgenes interactivas, a
la opcin Imagen de sustitucin. En la nueva ventana hay que especificar la imgen
original y la de sustitucin.
El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el
que aparecer en lugar de la imagen en el caso de que por algn motivo sta no pueda
ser mostrada en el navegador.
El texto alternativo puede asignarse a todas las imgenes, no slo a los rollovers. Puede
hacerse a travs del campo Alt del inspector de propiedades de la ima
gen
seleccionada.
1) Entrar dentro del sitio web DREAM y crear all una nueva pgina llam
ada
menu.htm y que tenga las siguientes caractersticas (las imgenes deberis copiarlas
previamente a vuestra carpeta:
-

Fondo con la imagen NUBES.JPG situada en la carpeta RECURSOS PARA

EL ALUMNO / IMGENES.

Color del texto amarillo

Insertar una imagen de sustitucin con las imgenes 8208.jpg y 8223.jpg

para que accedan a la pgina index.html. Centrar la imagen y poner debajo
Acceso a la pgina principal

Insertar

dos

imgenes

de

sustitucin

para

que

accedan

las

pgi

nas
prueba1.htm y prueba2.htm. Elegid las 4 imgenes que queris de la carpeta
RECURSOS PARA EL ALUMNO / IMGENES y ponerle debajo los textos
Acceso a la pgina prueba1 y Acceso a la pgina prueba2.htm

respectivamente.
Guardad la pgina y comprobar que cambian las imgenes en la vista previa de
la
pgina.
2) Aadir en la pgina anterior hipervnculos a los textos que habis escrito, de forma
que se pueda acceder a las pginas index.html, prueba1.htm y prueba2.htm

tanto desde las imgenes como desde los textos. Guardar y comprobar que funcionan los
cambios.

Botones Flash
Existen otra serie de imgenes especiales, similares a los rollovers, que suelen utilizarse
para crear mens, como pueden ser los botones Flash. Para insertar un botn Flash hay
que dirigirse al men Insertar, Imgenes interactivas, a la opcin Botn Flash.

A travs de Estilo puede seleccionarse uno de los distintos formatos de botn que s
e
ofrecen. En esta misma ventana hay que especificar tambin el texto que mostrar e
l
botn, as como el nombre con el que ser guardado y el vnculo asociado.
Es preferible guardar los botones Flash en el mismo directorio que los documentos
HTML, en lugar de en la carpeta destinada a almacenar imgenes, ya que de no ser as
es posible que al intentar asignar un vnculo dentro del propio sitio, Dreamweaver n
o
permita guardar el botn con ese vnculo en una ubicacin diferente de la de dic
ho
documento.
donde pongamos 4 botones flash con las siguientes propiedades:
ESTILO

TEXTO

VNCULO

BlipArrow

Acceso al menu 1

menu.htm

Generic Gold

Acceso a prueba1

prueba1.htm

Glass Purple

Acceso a prueba2

prueba2.htm

Soft - Orange

Acceso a index

index.html

Recuerda que los botones deben guardarse con la extensin SWF.

3) Crear una nueva pgina web llamada menu2.htm que tenga color de fondo rojo y

A travs del inspector de propiedades del botn Flash es posible editar de nuevo sus
atributos. Puede volver a abrirse la ventana anterior pulsando sobre el botn Editar, y a
travs del botn Reproducir es posible probar el funcionamiento del botn Flash desde
Dreamweaver, sin la necesidad de tener que abrir la pgina con algn navegado
r.
Despus de haber probado el funcionamiento del botn Flash, debe pulsarse de nuevo
sobre el botn Reproducir (que habr cambiado por el botn Detener).

4) Cambiar las propiedades de los botones que antes habis insertado para hacerlos un

poco ms grandes. Tambin podis cambiar alguno de los estilos anteriores (desd
e
Editar...) si no os gustan. Guardar y probar cmo han quedado.

5) Aadirles un parmetro para que cada uno de los botones tengan el fo

ndo
transparente. En este caso lo haremos pulsando sobre Parmetros y ponie
ndo
Parmetro=wmode y Valor=transparent. Guardar los cambios y comprobar el efecto
producido.

Prctica 6 - Introduccin a DREAMWEAVER

Tablas (I)
En este tema vamos a ver cmo trabajar con tablas. Podremos, entre otras cosas,
insertar tablas, combinar celdas, insertar filas o columnas y cambiar el tamao del
borde.
Todos los objetos se alinean por defecto a la
izquierda de las pginas web, pero gracias a las
tablas es posible distribuir el texto en columnas,
colocar imgenes al lado de un bloque de texto, y
otra serie de cosas que sin las tablas seran
imposibles de realizar.
COLUMNA
imagen y texto
Hoy en da, la mayora de las pginas web se
basan en tablas, ya que resultan de gran utilidad Texto dentro de una
celda
al mejorar notablemente las opciones de diseo.
Las celdas son cada uno de los recuadros que
forman una tabla, que son el resultado de la
FILA
interseccin entre una fila y una columna.

CELDA

Para poder insertar algn elemento en una celda,

ya sea texto o imgenes, simplemente hay que situar el cursor previamente dentro de la
celda deseada.

Insertar una tabla

Para insertar una tabla hay que dirigirse al men Insertar, a la opcin Tabla.
En la nueva ventana habr que especificar el nmero de Filas y Columnas que tendr la
tabla, as como el Ancho. El Ancho puede ser definido como Pxeles o como
Porcentaje.
Borde indica el grosor del borde de
Relleno de celda indica la distancia
contenido de las celdas y los bordes
y Espacio entre celdas indica la
entre las celdas de la tabla.

la tabla,
entre el
de stas,
distancia

1) Crear la tabla que tenis a continuacin dentro de la pgina index.html:

Poner como colores de
arriba hacia abajo:
marrn, naranja, rojo,
y amarillo claro.
Guardar los cambios y
comprobar cmo ha
quedado.

Formato de tabla

Las propiedades de la tabla se especifican a travs de su inspector de propiedades.

A travs del inspector de propiedades se pueden modificar los valores que

se
especificaron al insertar la tabla. Al mismo tiempo, pueden indicarse otros como pueden
ser el valor Alinear , el color de fondo o de borde de la tabla, o la imagen de fondo.
Si lo que se selecciona es una celda, o un conjunto de celdas, el inspector
de
propiedades cambia, para permitir especificar otros valores.

La parte superior del inspector de propiedades en este caso sirve para especificar las
propiedades del texto que se insertar dentro de la celda (o celdas) seleccionada.
La parte inferior sirve para especificar valores propios de la celda, como puede ser e
l
color o imagen de fondo (diferentes de los especificados para la tabla global), el color
del borde de la celda, etc.

2) Crear una pgina web que tenga como ttulo Meses del ao y un encabezado en la
primera lnea que ponga Mes de Abril. A continuacin deberis definir la tabl
a
necesaria para albergar este mes. Guardar la pgina con el nombre abril.htm dentro
de vuestro sitio web DREAM. Adems la pgina debe tener las sigui
entes
caractersticas:
color de fondo verde
color de fondo de la tabla de color naranja
letras para cada fila en un color diferente.

Prctica 7 - Introduccin a DREAMWEAVE

R
Tablas (II) - Aadir y eliminar filas y columnas

Existen varias formas de aadir y eliminar filas y columnas a una tabla.

Lo primero que hay que hacer es, estando el cursor en una celda o seleccionando varias,
desplegar el men contextual de la tabla al pulsar con el botn derecho sobre ella, o
bien abrir el men Modificar. En ambos casos aparece la opcin Tabla.
Segn las celdas seleccionadas, algunas de las opciones de Tabla se podrn utiliza
r
mientras que otras no.
Para insertar una fila o una columna, hay que pulsar sobre las opciones Insertar fila o
Insertar columna. La fila se inserta sobre la celda o el conjunto de ce
ldas
seleccionadas, mientras que la columna se inserta a su izquierda.

Tambin es posible insertar filas o columnas a travs de la opcin Insertar filas

o
columnas. Al pulsar sobre este botn aparece una nueva ventana, donde es posibl
e
determinar si lo que se insertarn sern filas o columnas, el nmero de ellas que
se
insertar, y la posicin donde se insertarn.
Para eliminar una fila o una columna, hay que pulsar sobre las opciones Eliminar fila o
Eliminar columna.

1) Abrir la pgina web abril.htm situada dentro de vuestro sitio web. Aadir un
a
columna a la derecha y otra a la izquierda y tambin una arriba y otra abajo. Deberis
poner como color de fondo de las celdas creadas el color gris. Esto lo podis hace
r
seleccionando las celdas y pulsando sobre el botn

Guardar la tabla resultante con el nombre abril_modificado.htm

Debe haberos quedado algo similar a esto, donde los datos de la tabla son los q
ue
pusisteis en la prctica anterior:

Anidar,
dividirotra
y combinar
celdas
primera celda de una tabla
se a insertado
tabla.
Es posible insertar tab
las dentro de las celdas d
e otras tablas. A esto
se le llama anidar
tablas. A continuaci
n tienes un ejemplo d
e anidamiento. Com
o puedes ver, en la

2) Crear en una pgina web nueva el ejemplo anterior, donde insertaris una tabla de 2
filas por 2 columnas y en el interior de la primera celda volveris a introducir una tabla
de ese tamao. Poner a la primera tabla el color de fondo verde claro y a la ta
bla
interior el color naranja.
El ttulo de la pgina ser Tablas anidadas, tendr como color de fondo el gris y l
a
deberis guardar con el nombre tablas2.htm dentro de vuestro sitio web DREAM.
Una de las formas de dividir y combinar celdas es a travs del inspector
de
propiedades, con los botones.

Si se seleccionan varias celdas pueden combinarse pulsando sobre el botndel

inspector de propiedades. Tienes que tener en cuenta que slo es posible combinar
celdas contiguas, cuya combinacin pueda dar como resultado otra celda.
Para dividir una celda hay que pulsar sobre el botn del inspector de propiedades,

o sobre la opcin Dividir celda de la opcin Tabla.

3) Abrir la pgina web del ejercicio anterior y realizar los siguientes pasos:
- combinar las 4 celdas de la tabla interior
- aadir dos columnas a la derecha de tabla exterior
- dividir las 4 celdas de la tabla interior
- insertar una nueva tabla a continuacin de 5 filas x 6 columnas y guardar los
cambios realizados.

Prctica 8 - Introduccin a DREAMWEAVE

R
Formularios (I)
Vamos a ver qu es un formulario, para qu se utiliza, cmo insertar uno y qu elemento
s
puede contener.
Los formularios se utilizan para recoger datos de los
usuarios, nos pueden servir para realizar un pedido en una
tienda virtual, crear una encuesta, conocer las opiniones de
los usuarios, recibir preguntas, etc.
Una vez el usuario rellena los datos y pulsa el botn para
enviar el formulario se arrancar un programa que recibir
los datos y har el tratamiento correspondiente.
Un formulario est formado, entre otras cosas, por etiquetas, campos de texto, me
ns
desplegables, y botones.

Crear formularios
Puedes crear formularios a travs del men Insertar, opcin Formulario.
Una vez creado un formulario, este aparecer en la ventana de Dreamweaver como un recuadro
formado por lneas rojas discontinuas.
Dentro de dicho formulario se podrn insertar los elementos del formulario a travs del men
Insertar, opcin Objetos de formulario.
1) Crear una nueva pgina web dentro del mismo sitio web DREAM que tenga las siguientes
caractersticas:
- Ttulo de la pgina: Formulario para la introduccin de datos.
- Color de fondo: Violeta, con texto en color Blanco
- Una lnea donde ponga Introduce aqu tus datos para realizar la reserva:
y en la lnea de abajo insertar un formulario con datos similares a los que tienes en el ejemplo de
arriba.
Guardar la pgina con el nombre formulario.htm

Elementos de un formulario
Los elementos de un formulario pueden insertarse en una pgina a travs del men Insertar,
opcin Objetos de formulario.
A travs de esta opcin se puede acceder a la lista de todos los objetos de formulario que pueden
ser insertados en la pgina.

Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de u
n
formulario, as como algunas de sus propiedades:

NOMBRE

DESCRIPCIN

Campo de
texto y rea
de texto:

Permiten aadir un cuadro de texto. El Campo de texto slo permite escribir una lnea al
usuario, mientras que el rea de texto permite escribir varias. Se puede pasar de Campo de
texto a rea de texto a travs del inspector de propiedades.
A travs del inspector de propiedades es posible cambiar sus propiedades.
Ej Nombre:

Botn:

Es el botn tradicional de Windows. El botn puede tener asignadas tres opciones:Env

iar
formulario, Restablecer formulario (borrar todos los campos del formulario), o Ningun
a
(para poder asignarle un comportamiento diferente de los dos anteriores).

Casilla de
verificacin:

Es un cuadrito que se puede activar o desactivar.

Puede asignrsele el estado inicial como Activado o como Desactivado.
Ej. Mdulos realizados:

Botn de
opcin:

Lista/Men:

Mdulo 1

Mdulo 2

Mdulo 3

Es un pequeo botn redondo que puede activarse o desactivarse. Si hay varios del mismo
formulario, solo puede haber uno activado. Cuando se activa uno, automticamente se
desactivan los dems.
Ej. Estado civil:
Soltero
Casado
Una lista o men es un elemento de formulario que lleva asociada una lista de opciones.
Los elementos se aaden a travs de botn Valores de lista del inspector de propiedades.
Ej. Tipo de habitacin

Elije tipo de habitacin

2) Abrir la pgina formulario.htm si no la tienes abierta, e inserta los siguientes elementos

dentro del formulario que creaste:
Posibles valores:

Nombre:

DNI:
Da:

Don Benito

Madrid

San Carlos

Legans

Vallecas

e-mail:
Lunes

Mes:

Instalacin o actividad:

Enero

Hora:

Pista tenis

Centro:

Don Benito

Posibles valores:
Restablecer Enviar

3) Guardar los
cambios y com

probar que funciona todo correctamente.

Pista tenis

Pista Pdel

Campo de ftbol

Prctica 9 - Introduccin a DREAMWEAVE

R
Formularios (II)
1) Realizad la siguiente pgina Web con Dreamweaver (en una pgina en blanco).

Debe tener las siguientes caractersticas:

- Tabla, con 9 filas y 4 columnas
- Todo centrado.
- Tamao del borde = 3
- Color del fondo de la 1 lnea, Verde
- Color
a 2 lne
TABLA DE PRECIOS 2005
- Color
TEMPORADA ALTA
TEMPORADA BAJA
esto de l
HAB.
HAB.
do
55.00
40.00

INDIVIDUAL
HAB. DOBLE

INDIVIDUAL
HAB. DOBLE 58.00

68.00

SUIT

125.00

SUIT

DESAYUNO

10.00

DESAYUNO

COMIDA

45.00

COMIDA

32.00

CENA

48.00

CENA

35.00

100.00
8.00

Todos los Precios son en y no incluyen el IVA

del fondo de l
a, Azulado
del fondo del r
a tabla, Platea

2) A continuacin de la Tabla de precios de nuestra

pgina Web, vamos a insertar un Formulario de reservas
(dejando un par de lneas de separacin) donde podamos
recoger Reservas para nuestro hotel por Internet.

Este formulario debe contener los elementos necesarios

ya vistos en la prctica anterior para que nos quede como
el que tenemos a continuacin:

HOTEL LAS FUENTES

* * * *

Para realizar su Reserva rellene el siguiente Formulario:

Nombre:
Apellidos:
D.N.I.:
Tipo de habitacin

Elije tipo de habitacin

(botn Men desplegable)

Creamos 4 elementos para la lista desplegable: Elige tipo de habitacin..., Individual,

Doble y Suit

Rgimen escogido:
Alojamiento
AD
MP
Da de entrada:
Da de salida:
Extras que deseara utilizar (elija cuantos quiera):
Lavandera

Minibar

Servicio habitaciones

PC (Botn de opcin)

Sauna

Gimnasio

(con el botn Casilla de verificacin)

Enviar

Restablecer

(botn de comando)

Guardar la pgina con el nombre reservas.htm

3) En las propiedades del formulario debis especificar que estos datos se enven por corre
o
cuando pulsemos el botn Enviar. Para ello introducir en el campo Accin la direccin d
e
correo luisescandell@yahoo.es

4) Abrir la pagina Web reservas.htm desde el Internet Explorer y rellenar el siguient

e
formulario de reserva:

Antonio Lpez Gonzlez, con DNI: 29.567.980-C.

Habitacin doble en Media Pensin.
Entrada el 1 de junio y salida el 7 de junio.
Extras de Minibar y Sauna.

Cuando le deis a Enviar, se debera recibir en ese correo la seleccin escogida.

5) Probad a enviar varias reservas ms que vosotros queris

Prctica 10 - Introduccin a DREAMWEAV

ER
Marcos
Vamos a ver qu son los marcos y para qu se utilizan. Tambin veremos cmo insertar u
n
marco sencillo en una pgina, y cmo trabajar con l.
Los marcos o frames sirven para distribuir mejor los datos de las pginas, ya que permite
n
mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegacin, mientras
que otras s pueden cambiar. Adems de mejorar la funcionalidad, pueden mejorar tambin la
apariencia.
Cada uno de los marcos de una pgina, contiene un
documento HTML individual. Por ejemplo, en la imagen
de la derecha puedes ver una pgina con tres marcos.

Marco izquierdo
Marco derecho o principal
Marco de arriba

Para poder visualizar la pgina de este modo, hemos

tenido que abrir en el navegador una pgina web
(index.html) que es la que incluye a todas las dems.

Crear marcos
1) Para crear un marco, primero hay que abrir algn documento. En este caso vamos a crear uno
nuevo dentro de nuestro sitio web DREAM (Archivo / Nuevo).
Lo primero que hay que hacer es dirigirse al men Insertar, a la opcin Marcos. A travs de
esta opcin puede elegirse el tipo de marco que va a crearse.
Pulsaremos sobre Insertar / Marcos / Izquierda se crear un nuevo marco a la izquierda del
documento actual.
A continuacin pulsaremos sobre Insertar / Marcos / Arriba y se crear un nuevo marco arriba
del documento actual.
Como puedes ver en la imagen, aparece unas lneas que divide el documento en tres.
El
documento de partida era uno nuevo.
En este caso tendremos cuatro documentos: el de la izquierda, el de la derecha, el de arriba, y el
que contiene los marcos. El de la derecha es el documento que tenamos inicialmente, que est
en el marco conocido como marco padre (MainFrame).
Para diferenciar cada uno de los marcos vamos a cambiar el color de fondo de cada uno de ellos.
Pulsad el botn derecho encima de cada uno de ellos y en Propiedades de pgina poned l
os

siguientes colores:
-

marco principal = amarillo claro

marco de arriba = rojo claro
marco de la izquierda = azul claro

2) Por ltimo guardaremos todos los marcos (recordad que ahora tendremos 4 pgina
s).
Seleccionar la opcin Archivo / Guardar todos los marcos y poned los siguientes nombres:
-

Al
Al
Al
Al

marco
marco
marco
marco

que engloba a todos los dems lo llamaremos marcos.htm

principal lo llamaremos principal.htm
de arriba lo llamaremos arriba.htm
de la izquierda lo llamaremos izquierda.htm

Con esto ya tendremos guardados cada uno de los marcos de nuestra pgina.

Probad

a
ejecutarlos desde el navegador (entrar en Mi PC / Alumno / etc) y ver cmo ha quedado cada
uno de ellos. Deberis comprobar que el archivo marcos.htm contiene al resto de marcos.

Modificar marcos
Si en algn momento se necesita modificar alguno de los marcos para hacerlos m
s
grandes o ms pequeos se puede hacer accediendo al men Ver / Ayudas Visuales /
Marcos. Entonces solamente con pinchar y arrastrar en el borde del marco lo podremos
agrandar.
3) Abrir la pgina marcos.htm y hacer los marcos de la izquierda y el de arriba ms grandes.
4) Insertar en el marco izquierda.htm botones flash que contengan hipervnculos a la
s
siguientes pginas (que ya deberamos tener creadas):
prueba1.htm / prueba2.htm / abril.htm / formulario.htm / reservas.htm / menu.htm
5) Crear usando el Gimp una imagen de tamao 250x75 que tenga el texto Mi primera pgina
de Prueba, guardar esta imagen con el nombre Imagen1.jpg en vuestra carpeta DREAM. A
continuacin insertarla en el marco de arriba.
6) Guardar la imagen DISPARO.JPG dentro de la carpeta DREAM y a continuaci
n
insertarla en la pgina principal junto al texto PGINA PRINCIPAL.
7)

Guardar todos los marcos y probar si funcionan bien los hipervnculos.

Modificar propiedades de los marcos

Si en algn momento se necesita modificar las propiedades de los marcos como puedan ser sus
nombres o el de los hipervnculos, se puede hacer siguiendo las siguientes indicaciones:
8) A travs del men Ventana / Marcos se puede acceder a las propiedades de cada marco,
aprovecharemos para cambiar al nombre a cada marco, llamndolos respectivame
nte
principal, izquierda y arriba

9) Si en algn momento una pgina no se abre en el marco correcto es porque debemos indicarle

en las propiedades del hipervnculo el destino hacia donde va a abrirse la nueva pgina. P
or
ejemplo, en el ejercicio anterior puede que se os haya abierto los enlaces en el marco de
la
izquierda, cuando nosotros queramos que se abriera en el principal. Para ello hay que cambiar
el destino en las propiedades del botn flash:

Prctica 11 - Introduccin a DREAMWEAV

ER
Creacin de la primera web (1)
En las siguientes 3 prcticas vamos a ir creando una pgina web con diferentes secciones que ya
se puede aproximar una de las webs que encontramos en Internet.
1) En primer lugar debemos crear un nuevo sitio web (Sitio / Nuevo sitio) que tendr l
as
siguientes caractersticas.
- Crearlo dentro de la carpeta CICLISMO que a su vez estar dentro de tu carpeta de alumno,
es decir en la ruta C:\ALUMNO \ TU_NOMBRE \ CICLISMO
- Nombre del sitio: Sitio web de aprendizaje con Dreamweaver de .......

(poner tu nombre)

2) Una vez creado el sitio web debemos crear una nueva pgina. Va a ser una pgina web con
marcos con lo cual sobre una pgina en blanco insertaremos un marco a la izquierda y ot
ro
arriba. Guardarlos respectivamente con estos nombres:
-

Al
Al
Al
Al

marco
marco
marco
marco

que engloba a todos los dems lo llamaremos index.html

principal lo llamaremos principal.htm
de arriba lo llamaremos arriba.htm
de la izquierda lo llamaremos izquierda.htm

3) Abrir la pgina principal y establecer en ella las siguientes caractersticas:

-

Ttulo de la pgina Bicicletas Rocamora lo mejor en bicicletas

Fondo de pgina con color amarillo claro
Texto : Bicicletas Rocamora con estilo Encabezado 1
Bajaros de Internet la foto de una bicicleta e insertarla a continuacin de ese texto
Al final de la pgina poner el texto :
VENTA DE BICICLETAS - REPARACIONES - ACCESORIOS - MATERIAL DEPORTIVO
Carretera de Castilla, n:289, Tfno.-fax: 981 313674, Alicante, Espaa

Guardar la pgina principal.htm

4) Para el marco de arriba vamos a insertar una imagen que previamente disearis vosotros. Se
trata de que sea el logo de nuestra empresa y debe tener una pequea imagen de una bicicleta y

un texto. Aqu ya entra en juego vuestra imaginacin, un ejemplo propuesto sera este:

El tamao debe ajustarse a cmo hayis hecho el marco. Guardar la pgina arriba.htm
5) En el marco de la izquierda (izquierda.htm) vamos a crear un men para poder acceder a
las diferentes secciones, para ello crearemos una tabla de 9 filas por 1 columna, dond
e
introduciremos las siguientes secciones:

El color de fondo de la tabla debe ser el naranja claro, menos la primera

celda que estar en azul claro. Con letras en color negro.
6) Justo encima de la primera celda podis
poner, si os queda sitio, un icono pequeo de
vuestra empresa (que previamente deberis
disear). Por ejemplo uno similar a ste:
7) Llegado a este punto deberamos tener diseada ya la pgi
na
principal del sitio web. Guardar todas las pginas y abridla desde el
navegador para comprobar que se ve todo correctamente.
8) Ahora nos queda ir definiendo el resto de secciones y aadiendo los
hiperenlaces en las opciones del men. Crearemos una pgina nueva y
en ella definiremos la seccin:
Quines somos? Se trata de poner un texto introductorio que
explique cmo es nuestra empresa. Este texto os lo podis inventar, si
no se os ocurre nada podis utilizar el siguiente texto:
Desde esta seccin, queremos en primer lugar explicaros en pocas lneas un pequeo
resumen de nuestra historia, Bicicletas Rocamora fu fundada en el ao 1.948 por dos de
los hermanos Rocamora, Avelino y Manuel, en aquellos aos compaginaban el taller con
la competicin pues los dos hermanos hacan sus pinitos compitiendo en aquellas
carreras que se organizaban por aquel entonces en el Campo de Batallones. En nuestros
inicios como taller nos dedicbamos a las bicicletas y a las motocicletas, de la
s
bicicletas se encargaba Avelino y de las motocicletas el encargado era Manuel, (padre y
to del actual propietario), el taller se encontraba en Jubia, justo al pasar el puente con
direccin a Neda en el lado izquierdo, all estuvimos hasta el ao 1.955.

Aadir alguna imagen que tenga relacin con el mundo ciclista intercalada con el texto.
Guardar la pgina con el nombre quienes.htm dentro del sitio web CICLISMO
9) A continuacin crearemos una pgina nueva y en ella definiremos la seccin:
Taller Se trata de poner un texto explicativo de los servicios que ofrece nuestra empresa. Este
texto os lo podis inventar, si no se os ocurre nada podis utilizar el siguiente texto:
Nuestra intencin, es poder atender las demandas de nuestros clientes, cada vez ms
exigentes, con lo cual intentamos ser nosotros tambin exigentes con nosotros mismos,
para poder ofrecer un buen servicio y una buena calidad con unos precios m
uy
competitivos. Para comprobarlo solo tenis que dirigiros a nuestro comercio y lo
comprobareis en situ, que al margen de las palabras es la mejor forma de comprobarlo.

Aadir tambin alguna imagen relacionada con la reparacin de bicicletas intercalada con el
texto.
Guardar la pgina con el nombre taller.htm dentro del sitio web CICLISMO

Prctica 12 - Introduccin a DREAMWEAV

ER
Creacin de la primera web (2)
Vamos a seguir definiendo las secciones de la web que comenzamos en la prctica anterior.
1) Para la seccin Fotos deberemos crear una nueva pgina en blanco y bajarnos de Internet una
serie de fotos relacionadas con el ciclismo (al menos 8 fotos), que guardaremos en una carpeta
llamada
FOTOS y qu
FOTO
FOTO
e a su v
ez estar dentr
o del sit
io web CICLI
Descripcin
de
la
foto
Descripcin
de
la
foto
SMO.
FOTO
FOTO
Estas fo
aremos
Descripcin de la foto
Descripcin de la foto
ue estar
pecto a
...
...
be tene
la foto
in justo debajo. Nos debe quedar algo parecido a esto:

tos las organiz

en una tabla q
centrada res
la pgina y de
r
y una descripc

Guardar la pgina con el nombre fotos.htm

2) Para la seccin Ofertas deberemos crear una nueva pgina en blanco y bajarnos de Internet

una serie de fotos relacionadas con productos para el ciclismo (al menos 6 productos) como por
ejemplo bicicletas, sillines, maillots, cascos, etc. Los guardaremos en una carpeta llamad
a
IMGENES, que a su vez estar dentro del sitio web CICLISMO.
Organizad los productos igual que hicisteis con las fotos, es decir, por medio de una tabla donde
aparezca la foto del producto, al lado una pequea descripcin, y a su derecha el precio. Debe
quedar algo como esto:
Guardar la pgina con el nombre ofertas.htm

3) Para la seccin Enlaces tendris que crear una nueva pgina en blanco y crear en ella un
a
recopilacin de enlaces relacionados con el ciclismo. Pinchando encima de cada enlace se debe
poder acceder a esa pgina mostrada en una pgina aparte. Para hacer esto pulsaremos sobre la
opcin del hipervnculo siguiente

Ejemplo:
Pgina del Tour de Francia

http://www.tourdefrancia.es

Pgina de la vuelta a Espaa

...

http://www.vueltaespaa.es
...

Enlaces interesantes

Guardar la pgina con el nombre enlaces.htm

4) Para la seccin Nuestras Marcas tendris que

crear una nueva pgina en blanco y crear en ella
una recopilacin de imgenes de marcas
relacionados con el ciclismo, ya sean marcas de
bicicletas, sillines, pedales, etc. Debe quedaros
algo como lo siguiente

Guardar la pgina con el nombre marcas.htm

5) Para la ltima de las secciones, la seccin E-mail , tendris que crear una nueva pgina
en blanco y en ella pondris la forma de contactar con vosotros. El e-mail os lo podis inventar.
Aadir tambin algn icono que tenga relacin con el envo de correo electrnico, como po
r
ejemplo este:

Guardar la pgina con el nombre email.htm

Prctica 13 - Introduccin a DREAMWEAV

ER
Creacin de la primera web (3)
Vamos a terminar de retocar la web que comenzamos en las prcticas anteriores.
1) Crear un hipervnculo en cada una de las opciones del men para que se pueda acceder a cada
una de las secciones. Por ejemplo cuando pinchemos en Fotos se debe poder acceder a la pgina
fotos.htm y comprobar que se abre la pgina en el marco principal.
2) En cada una de las pginas de las secciones anteriores deberemos crear un encabezado a
l
principio de la pgina que ponga el ttulo de la seccin. Por ejemplo en la seccin Fo
tos
pondremos al principio de la pgina un ttulo centrado como ste:

Fotos
3) Insertar recursos para que la web quede con un aspecto ms agradable (fondos, barra
s,
iconos, gifs animados, etc). Hay muchas pginas en Internet donde encontrar recursos par
a
bajar, si no encontris ninguno podis entrar a la web http://www.areas.net/colorvivo.htm .
En ella tenis fondos, iconos, barras, gifs animados, etc as que bajaros algunos de ellos
e
insertarlos en las pginas que previamente habis creado.
Para ello deberis guardarlos dentro de vuestro sitio web CICLISMO.
4) Ponerle un sonido de fondo a la web. Para hacer esto nos guardaremos un sonido descargado
de Internet en formato midi, y sino encontris ninguno guardaros cualquier cancin de las que
hay en Entorno de Red dentro de vuesto sitio web CICLISMO.
A continuacin abriremos la pgina izquierda.htm (porque siempre la vamos a tener fija en
nuestra pantalla) y en ella mostrad el cdigo fuente de la pgina pulsando el botn
Dentro del <body> escribid la siguiente lnea:
<bgsound src="nombre_del_archivo.mid" loop="100">
5) Crear dentro de la seccin E-mail un formulario similar al que creamos en prctic
as
anteriores que nos permita recoger las sugerencias acerca de nuestra pgina web y enviarlas por
correo. Guardar la pgina email.htm
6) Sustituir en la pgina del men los hipervnculos creados por botones flash que tengan lo

s
mismos hipervnculos y el mismo texto en su interior que los anteriores hipervnculos. Guardar
la pgina izquierda.htm.
7) Comprobar que todo est bien enlazado y si consideris que podis retocar algo de la pgina
para que quede mejor, hacedlo ahora.

Prctica 14 - Introduccin a DREAMWEAV

ER
Trabajo Final
1) Crear un sitio web en Dreamweaver que tenga como ttulo: Trabajo Final d

e
Informtica y lo guardaris dentro de la carpeta FINAL que a su vez estar dentro
de tu carpeta de alumno, es decir en la ruta C:\ALUMNO \ TU_NOMBRE \ FINAL
2) Utilizando Dreamweaver, realizar una pgina web libre similar a la que habis creado
en las prcticas anteriores sobre un tema que vosotros consideris relevante, p
or
ejemplo un personaje del siglo XX o XXI que sea de vuestro inters, sobre vosotro
s
mismos, un grupo de msica, un deporte, etc. y en las que deberis uti
lizar
obligatoriamente los siguientes elementos:
-

Imgenes, fondos, barras e iconos.

Botones Flash para los mens

Mapas de imagen.

Sonidos de fondo

Marcos (2 o 3 lo que consideris).

Hipervnculos de unas pginas con otras. Desde el men de la izquierda se tiene

que poder acceder a las dems pginas.

Tablas

Formularios

Debis realizar al menos 5 pginas y la pgina principal ser index.html .

3) La informacin y elementos que incluyis en vuestras pginas puede obtenerse de las

siguientes formas:
-

De Internet. Recordad que las pginas http://www.areas.net/colorvivo.htm ,

http://www.webestilo.com y http://www.gifmania.com contienen elementos
tiles para la creacin de pginas.

De cosecha propia (las imgenes elaboradas con Gimp y los textos inventados).

De cualquier material bibliogrfico o pgina web que podis encontrar.

4) Acordaos de guardar las pginas y todos los elementos que usis en vuestra carpeta
FINAL.
5) Probar que todo funciona correctamente y est bien enlazado.

Prctica 15 Subir la pgina web por FTP

A continuacin vamos a ver cmo subir nuestra pgina web a Internet para que pueda
verla todo el mundo utilizando un gestor FTP.
1) Una vez hemos activado la pgina web, nos bajaremos un programa para subir las
pginas por ftp a Internet (SI NO LO TENEMOS YA INSTALADO). Para ello
deberis entrar en http://www.smartftp.com y ah descargaros el programa SmartFtp.
Este programa es gratuito y muy sencillo de utilizar para subir datos a Internet.

2) Instalad el programa dndole a aceptar a todos los pasos (si tenis alguna duda no
ADDRESS (HOST)
LOGIN (USUARIO)
PASSWORD (CONTRASEA)

CONFIGURACIN
el
servidor
nombre
********

dudis en preguntarlo).
3) Se os crear un acceso directo en el escritorio de esta forma.
Entrad en este programa y tendris que conectar con el servidor del
colegio para poder acceder a los datos de vuestra web. Para ello deberis
introducir estos datos:

Y pulsar sobre el botn de conectar (

Para que os aparezca el navegador de vuestro disco duro tendris que pulsar sobre el
men FTP/Local Browser.
En estos momentos deberis tener dos ventanas, una donde veis los archivos de vuestro
disco duro y otra que estar enlazando con el espacio web que acabis de crear

Os los facilitar
profesor

4) Antes de subir los archivos aseguraros que toda vuestra pgina funciona
correctamente y que la pgina principal del sitio se llama index.html (ser la que
cargue en primera instancia).

ESPACIO
WEB

DISCO
DURO

5) Hacer doble clic en la carpeta public_html (de la ventana de arriba) para entrar
dentro de ella. Este es el espacio reservado para guardar vuestra pgina web.

6) Para pasar los archivos de un sitio a otro simplemente tenis que seleccionarlos
y arrastrar hasta la carpeta web donde queris que queden guardados (si os pide
sobrescribir algn archivo contestar que S)

7) Comprobad que la pgina funciona correctamente, accediendo a la direccin web

otorgada.