ManualDreamweaver II

DISEO
DE con
PAGINAS
WEB
Diseo de
Pginas Web
DreamWeaver
CON DREAMWEAVER-NIVEL II
INDICE
Leccin 1: Las capas
Apartado 1: Introduccin
Apartado 2: Trabajando con capas
Apartado 3: Practicando con las capas
Apartado 4: Convertir capas en tablas y tablas en capas
Apartado 5: Cdigo HTML
Apartado 6: Pon a prueba tus conocimientos
Leccin 2: Los formularios
Apartado 2: Crear formularios
Apartado 3: Elementos del formulario
Apartado 4: Validar los formularios
Apartado 5: Formatear formularios
Leccin 3: Los marcos
Apartado 2: Creacin de marcos
Apartado 3: Seleccionar el conjunto y los marcos
Apartado 4: Propiedades de los marcos
Apartado 5: Contenido de los marcos
Leccin 4: Otros elementos de la web
Apartado 1: DTHML
Apartado 2: Imgenes de sustitucin
Apartado 3: Barras de navegacin
Apartado 4: Botones y texto flash
Apartado 5: Animacin de capas
Apartado 6: Comportamiento
Leccin 5: Subir la web al servidor
Apartado 1: Subir nuestra pgina
Apartado 2: FTP
Diseo de Pginas Web con DreamWeaver
LECCION 1: LAS CAPAS

Las capas en Dreamweaver son contenedores de objetos, como pueden ser textos,
tablas, imgenes, etc
Son cuadradas y pueden moverse por la pgina y solaparse entre ellas. Tambin
podemos ocultarlas o indicarles ciertas acciones. Todo esto nos concede una gran
versatilidad a la hora de crear diseos ms espectaculares.
Apartado 2: Trabajando con capas

CREAR CAPAS
Veamos una forma sencilla de crear capas con Dreamweaver:
En el men Insertar elige la opcin Objetos de diseo y selecciona la

opcin capa. De este modo se insertar automticamente en tu documento
una capa.
CMO PUEDO SELECCIONAR UNA CAPA?

Para seleccionar una capa solo tienes que situar el cursor sobre cualquiera de sus
bordes, ste cambiar su aspecto habitual por el de un puntero de cuatro flechas.
En ese momento haz un clic e inmediatamente vers como aparecen unos
cuadraditos negros llamados manejadores de tamao. Fjate en las imgenes de
abajo:
PUEDO SELECCIONAR VARIAS CAPAS SIMULTNEAMENTE?

En algunas ocasiones necesitaremos seleccionar varias capas al mismo tiempo.
del
Para ello no tienes ms que mantener pulsada la tecla Shift
teclado mientras seleccionas las capas tal como te hemos indicado anteriormente.
CMO PUEDO CAMBIAR EL TAMAO DE UNA CAPA?

En Dreamweaver podemos cambiar el tamao
de las capas de varias formas. Por ahora
veremos cmo hacerlo de modo manual ya que
an no hemos llegado a las propiedades.
pulsa y arrastra sin soltar.
Decamos antes que cuando seleccionbamos

una capa aparecan unos cuadraditos negros
llamados manejadores de tamao. Si colocas
el puntero del ratn sobre cualquiera de ellos
vers como cambia de aspecto. En ese momento
CMO PUEDO MOVER UNA CAPA POR EL DOCUMENTO?

Cuando una capa est seleccionada puedes ver que aparece sobre su esquina
superior izquierda un cuadradito lo ves? Se llama manejador de seleccin y si
pulsas sobre l y arrastras sin soltar podrs mover por el documento la capa y
soltarla donde lo desees.
Cmo podr eliminar una capa?
Eliminar una o varias capas es muy sencillo. Solo
tienes que seleccionar las capas que quieres eliminar y
pulsar la tecla Supr del teclado.
PROPIEDADES DE LAS CAPAS

Como todos los elementos que hemos insertado en Dreamweaver, las capas
tambin tienen sus propiedades. Tambin al igual que ocurre con el resto de los
elementos, es necesario seleccionar una capa para ver sus propiedades.
Vamos a ver cmo podemos configurar y modificar algunos aspectos de las capas
desde el Inspector de propiedades.
Fjate en la siguiente imagen que corresponde al Inspector de propiedades, a

continuacin te explicamos para que sirven algunas de las opciones que te
muestra:
ID de capa: Permite especificar un nombre para identificar la capa.

An y Al (Ancho y Alto): Determinan la anchura y la altura de la capa. Debes
escribir el nmero seguido de la unidad de medida sin espacios. Las unidades
vlidas de medida son: px (pxeles), mm (milmetros), cm (centmetros), pc
(picas), in (pulgadas), pt (puntos) y % (porcentaje)
ndice Z: Establece el orden de las capas asignndoles nmeros segn se van
insertando. Este orden se puede cambiar, ms adelante veremos la importancia de
ordenar las capas.
Vis: Determina el estado inicial de visualizacin de la capa. Durante este curso solo
usaremos dos valores Visible (visible) o Hidden (oculta).
Col. Fondo: Permite especificar un color de fondo para la capa.
Desb. (Desbordamiento): Determina lo que ocurrir si el contenido de una capa
excede de su tamao. Las opciones disponibles son:
Visible: la capa aumenta de tamao para que sea visible todo su
contenido.
Hidden: la capa mantiene su tamao y el contenido que no quepa no se
ver.
Scroll: aparecern barras de desplazamiento en la capa.
Auto: muestra las barras de desplazamiento solamente cuando el
contenido de la capa excede de sus lmites.
INSERTAR CONTENIDO EN LAS CAPAS
Para insertar tanto texto, como imgenes, etc la capa no puede estar
seleccionada. Debes situar el cursor dentro de ella y en ese momento podrs
introducir lo que quieras.
PANEL CAPAS
El panel Capas proporciona una vista de todas
las capas del documento. Es muy cmodo
trabajar con l o al menos tenerlo visible cuando
trabajemos con capas. Veamos cmo hacerlo:
Si no ests viendo entre los paneles el panel
Diseo debes ir al men Ventana y seleccionar
la opcin Capas.
En ese momento vers como aparece el panel Diseo con la pestaa Capas activa.
Fjate en el aspecto del panel, nos muestra todas las capas del documento. Vamos
a analizarlo:
Las capas aparecen en la lista en el orden
descendente segn su creacin. Desde este panel
podrs seleccionar capas, definir su visibilidad,
cambiar su nombre, cambiar su orden, etc. En la
siguiente animacin veremos paso a paso las
posibilidades que nos ofrece este panel:
ORDEN DE APILAMIENTO DE LAS CAPAS

En algunas ocasiones podemos necesitar que las capas de nuestra pgina se
solapen. Es decir que una capa determinada se superponga por encima de otra,
bien por cuestiones estticas o por cuestiones de espacio.
En otras ocasiones, sin embargo lo que necesitaremos es asegurarnos de que esto
no sucede.
Bien. Esto en Dreamweaver se consigue con el orden de apilamiento de capas.
Fjate en las siguientes capas:
Para conseguir lo que ves, hemos indicado en la propiedad ndice Z del Inspector
de propiedades el orden de apilamiento de cada capa. Teniendo en cuenta que las
capas se ordenan en orden descendente se ver por encima de las dems la que
mayor numeracin tenga. El resto ha sido moverlas hasta conserguir que se
superpongan de este modo.
Apartado 3: Practicando con las capas

En este apartado trataremos de crear una pgina utilizando todas las opciones de
capas que hemos visto hasta ahora en la leccin
Abre una pgina nueva en blanco e inserta dentro de ella una capa. Escribe
dentro de la capa el siguiente texto: "FLORA Y FAUNA DE ASTURIAS"
Crea una segunda capa y escribe en ella el siguiente contenido: "La

vegetacin natural est formada por especies propias de zonas
hmedas. Los bosques ocupan una gran extensin salpicada de
prados naturales. Las especies ms comunes son robles (carbayu),
castaos, hayas y olmos. Se han aclimatado bien rboles forneos,
como el pino y el eucalipto."
Inserta otra capa ms y escribe dentro de ella el siguiente texto: "La fauna
es rica en especies poco comunes en el resto de Espaa, como el oso
parto; hay tambin lobos, rebecos, corzos, , zorros (raposos),
guilas reales y una gran variedad de peces de ros de aguas bravas.
Para la conservacin de la fauna se han creado reservas naturales

como la Reserva nacional de Somiedo, el Parque nacional de los
Picos de Europa y otras de menor extensin."
Descarga ahora las siguientes imgenes. Gurdalas

carpeta imgenes que est dentro de Turismo .
FLORA
dentro
de
la
FAUNA
Crea dos capas ms dentro de la pgina e inserta una imagen en cada una,
para ello sita el cursor dentro de la capa e inserta la imagen
Debes conseguir que la pgina adquiera el siguiente aspecto. No te preocupes,

nosotros de indicaremos a continuacin los pasos que hemos seguido:
Hemos variado el tamao de la capa ttulo para que ste se muestre en una
sola lnea.
Las dos capas correspondientes a los textos de flora y fauna tienen un

tamao de 175px de ancho y 249px de alto.
La primera de ellas tiene un desbordamiento visible y color de fondo

#FFFFCC. La segundatiene un desbordamiento Auto y no tiene color de
fondo.
Hemos movido las capas hasta conseguir la distribucin que ves en la

imagen. El motivo de la superposicin es que hemos jugado con el orden de
las capas desde el panel Capas . Hasta conseguir que unas se vean por
encima o debajo de las otras.
Recuerdas los estilos de texto? Vamos a aplicarlos a los textos de las capas. No
olvides que antes debes adjuntarlos, si no recuerdas como se haca es buen
momento para hacer un repaso.
Abre la pgina Web florayfauna.htm y aplcale al ttulo el estilo titulo de la

hoja de estiloscontenidos.css , puede que ahora tengas que variar el ancho
de esta capa para que el ttulo se siga viendo en una sola lnea.
Por ltimo aplica a los

estilos contenidos.css .
Guarda los cambios realizados en el documento y pulsa F12 para comprobar

el resultado es algo similar a esto?
textos
el
estilo
parrafos
de
la
hoja
de
Apartado 4. Convertir capas en tablas y tablas en capas

Uno de los problemas que surge en el uso de las capas es que las versiones
anteriores a 4.0 de Netscape o Internet Explorer no las admiten. Una manera de
solucionar este problema es convertir las capas en tablas, aunque hoy en da
prcticamente todo el mundo tiene su navegador actualizado.
Dreamweaver nos permite hacer conversiones de capas en tablas y viceversa. Es
muy sencillo:
La opcin Convertir el men Modificar nos ofrece estas dos posibilidades.
Vamos a ver cmo funciona la opcin Convertir capas en tabla mediante un

ejercicio. Para ello utilizaremos el documento convertir.htm
Abre el documento en Dreamweaver y fjate en su contenido. Contiene la

informacin estructurada en 7 capas separadas entre s.
Para convertir todas las capas de este documento en una tabla vete a la
opcin
Convertir
del men
Modificar y
selecciona Capas
en
tabla . Aparecer el siguiente cuadro de dilogo:
La opcin Ms preciso crear una celda por cada capa, junto con las celdas
adicionales necesarias para conservar el espacio entre capas.
La opcin Usar GIF transparentes nos garantiza que la tabla tenga las
mismas anchuras en todos los navegadores. Insertando para ello imgenes
transparentes al final de la tabla.
Tambin podremos centrar la tabla si marcamos la casilla Centrar en

pgina .
Pulsa Aceptar y observa el resultado.
10
Apartado 5. Cdigo HTML

El contenido de las capas (texto, imgenes, etc.) se encierra entre las etiquetas que
te mostramos a continuacin, presta atencin:
<div> Etiqueta contenedora de apertura de cada capa. Dentro de ella se indicar el
nombre de la capa, el alto, ancho, etc
</div> Etiqueta contenedora de cierre de cada capa.
11
LECCION 2: LOS FORMULARIOS

Una de las caractersticas ms importantes de la web es la posibilidad de recoger
informacin proporcionada por los usuarios, es decir, dotar de interactividad a las
pginas.
Mediante la utilizacin de formularios podemos pedir ciertos datos a los usuarios,
y en funcin de lo que respondan efectuar unas acciones u otras.
Por ejemplo, si has creado alguna cuenta de correo con hotmail, terra, yahoo, etc
habrs tenido que rellenar un formulario. Ese formulario ha sido comprobado para
verificar que los datos han sido introducidos correctamente y permitirte la creacin
de la cuenta.
Por tanto podemos decir que los formularios permiten al usuario cosas como enviar
informacin de respuesta, rellenar libros de visita, cumplimentar solicitudes de
estudios, registros de cuentas y comercio electrnico, por nombrar algunos de sus
usos.
Apartado 2. Crear formularios

AADIR UN FORMULARIO
En Dreamweaver puedes insertar un formulario de igual manera que se inserta
cualquier otro objeto en una pgina web. Puedes hacerlo a partir del men
Insertar o desde la barra de herramientas Insertar en la pestaa
formularios .
En el momento que insertes el formulario nicamente vers un rectngulo marcado

por una lnea roja discontinua. Dentro de l introduciremos todos los elementos que
contendr el formulario y que sern objeto de este tema.
12
Abre una nueva pgina en blanco e inserta un formulario. Nos basaremos en

l para realizar las explicaciones a lo largo de todo este tema. Por tanto
sera conveniente que lo tuvieses siempre a mano ya que haremos
referencia a l de forma constante.
Gurdalo con el nombre solicitud.htm .
PROPIEDADES DE LOS FORMULARIOS

Una vez insertada la estructura bsica para el formulario, puedes configurar sus
propiedades utilizando el Inspector de propiedades.
Pon al formulario el nombre formulario y en la propiedad Accin introduce lo

siguiente:mailto: tu direccin de correo electrnico
Apartado 3. Elementos del formulario

CAMPOS DE TEXTO
Los campos de texto permiten al usuario introducir la informacin en el formulario
escribindola.
Asegrate de que el campo de texto se encuentre seleccionado haciendo un

clic sobre l. Luego observa el Inspector de propiedades:
13
LISTAS O MENS
Las listas y los mens se usan para proporcionar al usuario varias opciones de
eleccin.
Ambos elementos son similares, ayudarn al usuario a realizar la misma funcin.
No obstante, las primeras se usan para mostrar todas o varias de las opciones
disponibles, mientras que los segundos consisten en un men desplegable.
Una vez insertada la lista puedes seleccionarla y ver sus propiedades en el
inspector de propiedades:
Pon a la lista un nombre y selecciona el tipo (lista o men). Luego pulsa

el botn valores de lista. Aparecer un cuadro de dilogo en el que
debes introducir los elementos de la lista.
14
Cada elemento tiene un valor que le diferencia de los dems, de este

modo sabremos cul ha sido la eleccin del usuario.
Una vez introducidos todos los elementos de la lista volveremos al Inspector de

propiedades:
En la propiedad Seleccionado inicialmente puedes seleccionar el

elemento que quieres que aparezca seleccionado por defecto en la lista.
Fjate tambin en la propiedad Alto. Indica en ella el nmero de

elementos que se vern inicialmente.
LAS CASILLAS DE VERIFICACIN

Estas casillas de verificacin indican el estado de una opcin, activada (la casilla
muestra una marca) o desactivada (la casilla se encuentra vaca). Lo mismo
ocurre con los botones de opcin.
Las casillas de verificacin se utilizan cuando se desea que el usuario pueda elegir
ms de una de las opciones ofrecidas. Mientras que los botones de opcin son
excluyentes.
Puedes insertar los botones de opcin uno por uno, lo cual no tiene mucho sentido
ya que estos botones se utilizan para excluir.
15
En el cuadro de dilogo Grupo de opcin introduce el nombre que recibir

todo el grupo de opciones. A continuacin inserta tantas opciones como
necesites y sus valores. Luego pulsa Aceptar.
Haz clic sobre el primero de los botones de opcin para ver

sus propiedades en el Inspector de propiedades.
La propiedad Estado inicial nos indicar qu opcin estar activada por

defecto.
BOTONES ENVIAR Y RESTABLECER

Un botn es un objeto que al hacer clic sobre l inicia una accin: enviar el
formulario, restablecer los valores iniciales del formulario, etc
El botn Enviar enva el formulario a su destino. El botn Restablecer se usa para
borrar todos los campos de un formulario, es decir, lo reinicia.
Por tanto, podemos decir que el botn Enviar es una parte fundamental de los
formularios. Sin l un formulario no servira de nada ya que sus datos no tendran
ninguna utilidad.
Cuando insertas un botn debes indicar en sus propiedades si ste va a enviar
latos o a restablecer el formulario. Fjate en el inspector de propiedades.
16
Esto es muy sencillo, slo tendrs que seleccionar la Accin Enviar formulario o la
accin Restablecer formulario, segn la finalidad del botn.
Apartado 4. Validar los formularios

PARA QU SE VALIDAN LOS FORMULARIOS?
Ya hemos resuelto el tema de la introduccin de datos en
el formulario y tambin cmo enviarlos una vez que el
usuario los ha introducido.
Pero Qu ocurre si quieres que alguno de los datos
requeridos en el formulario sea de entrada obligatoria?
Deberas hacer algo para que el usuario no pudiese enviar
el formulario sin rellenar ese o esos campos verdad?
Bien. Para eso se validan los formularios. El comportamiento Validar
formulario comprueba que el usuario haya introducido los datos en el campo o
campos que t especifiques.
VALIDAR UN FORMULARIO
Vamos a ver cmo validar un formulario utilizando para ello el que hemos creado
en el documento solicitud.htm . Lo que haremos ser asegurarnos de que los
campos nombre y apellidos estn rellenos en el momento de enviar el formulario.
Por lo tanto el comportamientovalidar formulario se har para el botn Enviar .
Sigue los pasos que te proponemos a continuacin:
Selecciona el botn Enviar y en el panel

el botn
aadir
comportamiento
comportamiento Validar formulario .
En el cuadro de dilogo Validar formulario selecciona el campo nombre

(ves la importancia de dar nombre a cada campo?)
Comportamientos pulsa
(+). Selecciona
el
17
Indica que el valor de entrada es obligatorio . Tambin puedes indicar que

tipo de valor se debe introducir, deja cualquier cosa. Luego pulsa Aceptar .
Repite los mismos pasos para validar el campo apellidos.
Apartado 5. Formatear formularios

Una vez realizado
darle formato :
nuestro
formulario
lo
siguiente
que
haremos
ser
Selecciona los textos del formulario y aplcale el estilo parrafo .
Selecciona ahora los textos "Clase:" y "Actividades:" y aplcales el estilo

titulo .
Habrs observado que aplicar alineaciones a un formulario puede resultar muy

complicado. La solucin a este problema sera haber introducido los elementos del
formulario dentro de una tabla.
18
Creando primero el formulario y dentro de ste una tabla con las filas y columnas
necesarias para distribuir despus los elementos que vayas insertando. Intenta
realizar la siguiente prctica haciendo esto practica1.doc
Para terminar esta leccin vincularemos el formulario a nuestro sitio Web:
Abre la pgina actividades.html y escribe al final del contenido de sta el

texto "Solicita aqu tu viaje".
Selecciona el texto y vinculalo a la pgina solicitud.htm , este vnculo debe

abrirse en una nueva pgina.
Guarda los cambios y abre la pgina principal.htm en el navegador. Pulsa

sobre el botn actividades y accede al vnculo que acabas de crear
funciona?

Vamos a analizar brevemente el cdigo HTML que ha generado dreamweaver para
el formulario que hemos creado.
Los formularios se crean dentro del cuerpo de la pgina, es decir, entre las
etiquetas <body> </body>
Las etiquetas que encierran el formulario son <form> </form>. Dentro de la
etiqueta de apertura del formulario se introduce el nombre de ste, la accin, etc
A continuacin puedes ver las etiquetas utilizadas para insertar el cuadro de texto
nombre:
19
En las etiquetas de cuadro de texto se indica el nombre de ste, la longitud, el

tamao, etc
La siguiente imagen muestra el cdigo empleado en las listas y mens:
Las etiquetas <select> </select> contienen toda la lista o men mientras que las
etiquetas <option value=valor> </option> contienen cada elemento de la
lista o men.
Por ltimo veremos
Restablecer:
las
etiquetas
utilizadas
para
los
botones
Enviar
Como ves, para los botones se emplea la etiqueta <Input> y dentro de ella se
indica el nombre del botn, el tipo (si enva o restablece), etc
20
LECCION 3: LOS MARCOS

Hasta el momento hemos creado pginas html y las hemos guardado en nuestro
sitio Turismo. Con la utilizacin de marcos iremos un poquito ms all.
Los marcos no son ms que subdivisiones de una pgina html. Todas estas
subdivisiones se agrupan en lo que denominamos conjunto de marcos. El conjunto
de marcos es una pgina html que contiene una estructura que nosotros podremos
elegir. Fjate en el siguiente ejemplo de conjunto de marcos:
Esta estructura contendr las pginas web de nuestro sitio. De modo que nosotros
debemos indicar qu pgina se mostrar en cada marco.
La pgina del ayuntamiento de Siero es un buen ejemplo de sitio Web que funciona
con marcos. Pulsa el siguiente vnculo para verla: http://www.ayto-siero.es
Apartado 2: Creacin de marcos

CREAR MARCOS
21
Dreamweaver nos ofrece diversas formas de crear conjuntos de marcos. Dado que
somos principiantes, escogeremos la opcin que mejor nos puede llevar a entender
su funcionamiento:
En el men Archivo debers seleccionar la opcin Nuevo. Se abrir el

cuadro de dilogo Nuevo documento (es el que usamos para crear
nuevas pginas en blanco). Lo que queremos crear en este caso no es una
pgina HTML, sino un conjunto de marcos as que escogeremos esa opcin
en la lista Categora.
A la derecha de la lista categora vers la lista conjuntos de marcos. Esta lista

contiene los diferentes tipos de marcos que te ofrece Dreamweaver. Cada vez que
selecciones uno de ellos a su derecha podrs ver su aspecto.
Vete al men Archivo y selecciona la opcin Guardar conjunto de marcos.
22
Apartado 3. Seleccionar el conjunto y los marcos

SELECCIONAR MARCOS
Tanto el conjunto de marcos como cada marco tienen una serie de propiedades que
podremos modificar. Para ello tendremos que seleccionar el marco con el que
queremos trabajar o el conjunto completo.
Lo haremos seleccionando el marco que deseemos haciendo un clic sobre l, para
ello utilizaremos el panel Marcos que se encuentra en el men Ventana.
Vamos a practicar la seleccin de marcos tal como hemos visto en la animacin
anterior:
Si has cerrado el documento principal.htm debes volver a abrirlo. Cuando

lo hagas vers dos mensajes de advertencia, acptalos, ms adelante
veremos porqu nos han salido.
Asegrate de ver a la derecha el panel de marcos. Recuerda que puedes

hacerlo visible desde el men Ventana .
Selecciona el marco izquierdo haciendo un clic sobre l en el panel Marcos .

Fjate en el Inspector de propiedades.
Luego haz lo mismo con el marco derecho y por ltimo selecciona todo el
conjunto de marcos.
Apartado 4. Propiedades de los marcos

Vamos a analizar ahora las propiedades de los marcos por medio del Inspector de
propiedades:
Nombre de marco: Determina el nombre del marco seleccionado.
Origen: Define la pgina web que mostrar el marco.
Desplaz.: Permite elegir si aparecen barras de desplazamiento o no. Si

escogemos la opcin Automtico aparecern nicamente cuando sea necesario.
23
Mismo tamao: Al activar esta casilla se impide a los usuarios arrastrar los
bordes del marco para modificar su tamao en su navegador.
Bordes: Configura si los marcos mostrarn o no la lnea de divisin que existe

entre ellos.
Color de borde: Permite establecer un color para el borde que separa los
marcos.
Ancho del margen: Indica en pxeles el ancho de los mrgenes izquierdo y

derecho, es decir, el espacio que hay entre el borde izquierdo y derecho del
marco y su contenido.
Alto del margen: Indica en pxeles el alto de los mrgenes superior e inferior,
es decir, del espacio que hay entre los bordes superior e inferior del marco y su
contenido.
PROPIEDADES DEL CONJUNTO DE MARCOS

A continuacin vamos a analizar algunas de las propiedades que podemos
configurar en un conjunto de marcos:
Bordes: determina si se quieren visualizar o no los bordes que delimitan los

marcos.
Ancho: Indica el grosor del borde en el caso de que se quiera visualizar.
Color del borde: elegiremos el color del borde si ste es visible.
Columna: indica el tamao de la columna de la izquierda. Puede establecerse

dicha medida en pxeles o en porcentaje.
Apartado 5. Contenido de los marcos

VINCULAR CONTENIDO DE LOS MARCOS
La razn de utilizar marcos en los sitios Web es que de este modo podemos hacer
la navegacin mucho ms sencilla. Ya que uno de los marcos puede contener un
men con el mapa de la pgina mientras que otro mostrar las pginas que el
usuario quiera ver.
Esto se consigue estableciendo vnculos, ya hemos visto cmo crear hipervnculos
en la leccin 6 lo recuerdas? Tambin habamos visto los diferentes destinos de los
vnculos, un vnculo se poda abrir en una ventana nueva, en la misma ventana,
etc
24
En este caso nos interesa precisar un poquito ms, ya que necesitaremos que los
vnculos seleccionados en un marco se abran en el otro. En la siguiente pantalla
trabajaremos con todo esto.
Para establecer los vnculos entre los marcos de un conjunto debers seguir los
pasos que te proponemos a continuacin:
Abre la pgina de marcos y coloca el cursor dentro del marco izquierdo.
Ahora inserta los textos o imgenes que funcionarn como vnculos a las
dems pginas.
Selecciona cada uno de los textos o imgenes que has introducido en el

marco izquierdo y crea los vnculos a las pginas correspondientes.
Ten en cuenta que el destino de stos ser el marco derecho, de esta

manera, cada vez que pulsemos sobre un vnculo se cargar su pgina en el
marco derecho.
25

Un conjunto de marcos tiene una etiqueta <frameset> en lugar de la etiqueta
<body> que se encontrara en una pgina HTML normal
Vamos a revisar el cdigo HTML que genera Dreamweaver para una pgina de
marcos. Observa como entre las etiquetas <frameset> y </frameset> aparecen
las etiquetas <frame> que representan a cada uno de los marcos, con las
propiedades asignadas a cada uno de ellos.
26
LECCION 4: OTROS CONTENIDOS DE LA RED
Apartado 1: Qu es el DHTML?
QU ES DHTML?
Dynamic HTML o HTML dinmico no es ms que el lenguaje HTML que conocemos
complementado con otro lenguaje, como puede ser Javascript.
Esta combinacin permite presentar pginas HTML con determinados efectos que
ofrecen un mayor dinamismo y espectacularidad a la pgina.
Una pgina que utilice DHTML puede contener imgenes que aparecen y
desaparecen, objetos que se desplazan por la pantalla y mens que se ocultan o se
muestran.
Apartado 2. Imgenes de sustitucin

QU SON LAS IMGENES DE SUSTITUCIN?
Una imagen de sustitucin es una imagen que, al visualizarse en un navegador,
muestra otra imagen cuando el puntero pasa sobre ella.
En realidad se trata de dos imgenes: la imagen principal (aparece al cargarse
inicialmente la pgina) y la imagen secundaria (aparece al pasar el puntero sobre
la principal).
Es conveniente que ambas imgenes tengan el mismo tamao ya que en caso
contrario, Dreamweaver cambia automticamente el tamao de la segunda imagen
para que se ajuste al de la primera. Y esto puede hacer que la segunda imagen se
muestre distorsionada.
INSERTAR UNA IMAGEN DE SUSTITUCIN
A continuacin puedes ver cmo insertar una imagen de sustitucin paso a paso en
Dreamweaver:
Antes de comenzar tendrs que situar el cursor en el lugar donde quieres

que aparezca la imagen de sustitucin.
En el men Insertar, la opcin Objetos de imagen te ofrece la posibilidad

de insertar una Imagen de sustitucin.
En la barra de herramientas Insertar (pestaa Comn) vers el botn

Imgenes. La flecha que aparece a su derecha despliega un men que
contiene la opcin Imagen de sustitucin.
27
En ese momento aparecer el cuadro de dilogo Insertar imagen de

sustitucin. Que debes rellenar pulsando sobre los botones Examinar, que
te permitirn buscar la imagen inicial y la secundaria.
Una vez cumplimentado el cuadro de dilogo pulsa el botn Aceptar.
Apartado 3: Barras de Navegacin

QU SON LAS BARRAS DE NAVEGACIN?
Una barra de navegacin no es ms que una imagen o conjunto de imgenes que
se intercambian cuando el usuario realiza determinadas acciones (pasar el cursor,
hacer clic).
Estas barras se vinculan a otras pginas o archivos, de ah que reciban el nombre
de barras de navegacin. Pues permitirn al usuario navegar por la Web.
Antes de crear una barra de navegacin, debes crear un conjunto de imgenes para
cada estado de visualizacin. Un elemento de la barra de navegacin puede tener
cuatro estados aunque no es necesario activarlos todos
-
Arriba: es la apariencia predeterminada del botn, tal y como lo ve el usuario

por primera vez.
Sobre: es el aspecto que presenta el botn cuando el usuario pasa el puntero

del ratn sobre l. El estado Sobre es el que advierte al usuario de que este
botn es interactivo y que le conduce a otra pgina.
28
Abajo: es el aspecto del botn cuando se pulsa. A menudo tiene una apariencia
de profundidad.
Sobre mientras abajo: es la apariencia del botn que se encuentra en estado

Abajo y se mueve el puntero del ratn sobre l.
Los dos estados ms usados son Arriba y Sobre.
CMO SE PUEDE CREAR UNA BARRA DE NAVEGACIN?
Para crear una barra de navegacin debers acceder al men Insertar, y

dentro de la opcin Objetos de imagen seleccionar Barra de navegacin.
Tambin puedes utilizar el botn Imgenes de la barra de herramientas
Insertar, dentro de la ficha Comn.
En el cuadro de dilogo que aparece podrs introducir el nombre de cada

botn de la barra de navegacin.
Luego introducirs la imagen correspondiente al botn en estado de reposo

(arriba) y a continuacin la imagen del botn que se mostrar al pasar el
cursor sobre ste (sobre).
Por ltimo introduce la URL de la pgina que se abrir al pulsar sobre el

botn, puedes buscarla con ayuda del botn Examinar.
29
Cuando hayas terminado de crear el primer botn pulsa sobre el botn

para crear el siguiente botn de la barra de navegacin.
Apartado 4. Botones y texto flash

QU ES FLASH?
Macromedia es una empresa de software de grficos y
desarrollo web. Entre sus productos se encuentra
Dreamweaver, y tambin flash.
Flash es una tecnologa que ha supuesto un gran avance en
materia de diseo web. Ya que permite la creacin de
animaciones (pelculas) con muy poco "peso".
Esto es algo muy importante a la hora de disear una
pgina. Ya que cuanto menos pesen los objetos que insertamos en ella menos
tiempo tardarn en ser cargados por el navegador y por tanto, ms rpida ser la
navegacin por la Web.
Dreamweaver proporciona una seleccin de botones Flash que puedes usar como
elementos de tu barra de navegacin o insertarlos en cualquier otra parte de tu
pgina web.
Para insertar un botn Flash Dreamweaver nos ofrece dos posibilidades, sigue los
siguientes pasos:
Lo primero es guardar la pgina antes de insertar el botn Flash. Una vez

guardada la pgina accede al men Insertar y elige la opcin botn
Flash dentro de Media .
Tambin puedes seleccionar botn Flash dentro de Media en la barra de

herramientas Insertar (Comn).
30
Ha llegado el momento de que crees botones flash por ti mismo te atreves?

Vamos all! Sigue los pasos que te indicamos a continuacin:
Abre la pgina zonas.htm , en ella tenemos cuatro vnculos de texto (norte,

sur, oriente y occidente). Brralos para sustituirlos luego por botones flash.
Sita el cursor justo encima del mapa de asturias y saca el cuadro de texto
Insertar botn flash y crea el primer botn teniendo en cuenta que:
o Puedes escoger el estilo que ms te guste.
o El texto debe ser Norte.
o La fuente : Arial Black, 12
o El destino ser _blank
o Por ltimo, lo guardaremos como norte.swf . Pulsa sobre el
botn Examinar para guardar los botones en una carpeta "flash"
dentro de tu sitio turismo.
Pulsa Aceptar y crea los botones para abrir las pginas sur, oriente y
occidente.
Guarda los cambios realizados en la pgina zonas.htm . Luego abre la

pgina principal.htmen
el
explorador
y
pulsa
sobre
el
vnculo Geografa Has conseguido algo similar a esto?
31
Asegrate de que todos los vnculos se abren correctamente en una nueva

ventana. Cada uno de estos botones tiene un efecto Qu efecto tienen los
botones que has elegido?
Si necesitas modificar cualquier botn solo tendrs que hacer doble clic
sobre el en la vista diseo y se abrir de nuevo el cuadro de dilogo.
La opcin Texto flash que podemos encontrar tanto en el men Insertar como
en la barra de herramientas Insertar . Nos ofrece la posibilidad de
utilizar textos con efectos dinmicos . Estos textos tienen la misma finalidad que
los botones que hemos utilizado anteriormente.
32
Es el momento de crear un texto flash por ti mismo no crees? Vamos all!
Abre la pgina ciudades.htm , al final de sta tienes dos vnculos a los

ayuntamientos de Oviedo y Gijn. Vamos a sustituirlos por textos flash,
elimnalos.
Sita el cursor en el lugar donde se encontraba el primer vnculo. Abre el

cuadro de dilogoInsertar texto flash teniendo en cuenta ...
o
o
o
o
o
Fuente : Verdana, 14
Alineacin : Centrada
Colores de fondo y sustitucin : #669900 y #6600CC
Texto : Ayuntamiento de Gijn
Vnculo : http://www.ayto-gijon.es (escribe la ruta "relativa" en
el cuadro de texto. El botn examinar es para buscar pginas dentro
del sitio)
Destino : _blank
Cuando termines de rellenar el cuadro de dilogo pulsa Aceptar . Luego

inserta debajo otro texto flash para el ayuntamiento de Oviedo teniendo en
cuenta que su direccin es:http://www.ayto-oviedo.es
Guarda los cambios efectuados en el documento ciudades.htm . Luego

abre la pginaprincipal.htm en el navegador y pulsa sobre el
vnculo Ciudades principales ves algo como esto?
33
Comprueba que las pginas de los ayuntamientos de Gijn y Oviedo se

abren correctamente.
Apartado 5. Animacin de capas

QU ES ANIMAR CAPAS?
Dreamweaver nos ofrece la posibilidad de realizar determinadas animaciones en
nuestras pginas Web. Estas animaciones pueden consistir en mostrar u ocultar
textos, imgenes u otros elementos, hacer que stos se desplacen por la ventana
del navegador, cambiar su tamao, etc
El nico requisito que deben cumplir los elementos que queramos animar es el de
encontrarse dentro de una capa.
Dreamweaver mecaniza este proceso a travs de las lneas de tiempo y los
comportamientos de capas. Las lneas de tiempo contienen fotogramas, estos
fotogramas contendrn los objetos (introducidos en capas) que deseamos animar.
LINEAS DE TIEMPO
34
En el momento que selecciones la opcin Lneas de tiempo del men Ventana

aparecer un panel como el que te mostramos a continuacin. Te indicaremos el
nombre de las opciones del panel con las que trabajaremos durante este curso:
CREAR UNA ANIMACIN
Abre una pgina nueva en blanco e inserta en ella una capa. Escribe dentro
de la capa el siguiente texto: "ANIMAR CAPA"
Selecciona la capa y despliega el men que se encuentra a la derecha del

panel. Selecciona la opcin Registrar ruta de capa .
35
Ahora mueve la capa por la ventana de diseo haciendo el recorrido que

quieras. Vers como se va dibujando una gua .
Cuando sueltes vers como aparecen resaltados en morado los fotogramas

que se han grabado en la lnea de tiempo.
Ahora dale a la lnea de tiempo el nombre AnimarCapa y selecciona la

casilla Reprod . auto.
Cuando lo hagas vers un cuadro de dilogo como el que te mostramos a

continuacin. Selecciona No volver a mostrar este mensaje y pulsa
Aceptar .
Este mensaje indica que cada vez que marcas la opcin de reproduccin
automtica ests diciendo que quieres que la pelcula se ejecute al cargarse
la pgina en el navegador.
36
Guarda el documento con el nombre animar1.htm y pulsa F12 para

comprobar su funcionamiento.
La capa se mover por la pgina repitiendo los movimientos que tu le has indicado
anteriormente en la vista diseo. Luego se detendr, si quieres que no se detenga
nunca marca la casilla Bucle.
Para hacer que la animacin ocupe ms o menos fotogramas pulsa sobre el final de
la linea violeta y arrastra hacia la derecha o la izquierda
Apartado 6. Comportamientos
QU SON LOS COMPORTAMIENTOS?

Los comportamientos son muy importantes en Dreamweaver, ya que se usan
para controlar todas las funciones dinmicas. En este apartado analizaremos
algunos de los comportamientos que se usan para controlar la reproduccin de
lneas de tiempo.
Panel comportamientos
Para
aplicar
comportamientos
a
las
capas
utilizaremos
el
panel
comportamientos. Como el resto de los paneles, lo encontrars en el men
Ventana.
37
EJECUTAR LNEA DE TIEMPO

El comportamiento Ejecutar lnea de tiempo se usa para iniciar una lnea de
tiempo en respuesta a un evento, como la pulsacin del ratn. Este
comportamiento se utiliza cuando no se desea activar Reproduccin automtica
y se desea iniciar la animacin pulsando sobre una imagen, texto, etc.
Para agregar un comportamiento Reproducir lnea de tiempo debers haber
creado la animacin previamente. Tal como hemos visto en el apartado de
animacin de capas.
La primera vez que apliques un comportamiento debes asegurarte de tener los
eventos para el navegador adecuado. Pulsa sobre el botn (+) y selecciona la
opcin Mostrar eventos para . Luego elige IE 6.0 (Internet Explorer versin
6.0). Si eligieses un navegador ms antiguo tendras menos eventos disponibles.
Continuaremos con el documento animar1.htm . Quita la reproduccin

automtica del panel Lnea de tiempo.
Asegrate de tener visible el panel comportamientos ( men Ver ).

Selecciona la capa y pulsa sobre el botn (+) . En el desplegable selecciona
Lnea de tiempo y a continuacin Reproducir lnea de tiempo .
38
En el cuadro de dilogo que aparece selecciona la lnea de tiempo que

quieres reproducir. En este momento solo tienes una (AnimarCapa) pero
podras tener varias.
Fjate ahora en el panel que te muestra los comportamientos. Al producirse

el evento se ejecutar el comportamiento. Si tu evento no es el que aparece
en la imagen no te preocupes lo modificaremos.
39
Una vez que ests seguro de que los eventos que vas a ver son los del IE
6.0. Pulsa sobre el evento que tienes actualmente para modificarlo y
aparecer un desplegable. Busca el evento onClick (al hacer clic) y
seleccinalo.
Por ltimo guarda los cambios en el documento animar1.htm y pulsa F12

para verlo en el navegador. Cuando hagas un clic sobre la capa, sta
comenzar la animacin creada en la lnea de tiempo.
Si quieres detener la lnea de tiempo los pasos son casi idnticos. Seleccionars
entre los comportamientos Detener lnea de tiempo . Luego indicars qu lnea
de tiempo deseas detener (tambin puedes detenerlas todas) y por ltimo el evento
que desencadenar ese comportamiento.
MOSTRAR-OCULTAR CAPAS
Una de las opciones ms tiles de las capas es la capacidad de poderlas mostrar u
ocultar a voluntad.
Para usar la accin Mostrar-Ocultar capas debes seleccionar primero un objeto
que active la accin. Este objeto puede ser cualquier elemento, excepto una capa,
las imgenes suelen ser los objetos ms utilizados, aunque tambin podramos
utilizar textos.
El usuario realizara un evento sobre ese objeto (hacer un clic, pasar el puntero
sobre l, etc). Y este evento desencadenara el comportamiento lo entiendes?
Abre una nueva pgina en blanco e inserta en ella la imagen de San

Salvador de Valdedios.
Luego dibuja una capa e inserta en ella el siguiente texto:
San Salvador de Valdedis es monumento de estilo prerromnico tardo. Situado en

lugar privilegiado por la naturaleza, y a pesar de sus reducidas dimensiones, el
popular Conventn impresiona por el equilibrio de sus formas y volmenes.
En su realizacin se introducen avances tcnicos -Nez Rodrguez seala, entre
otros, el abovedamiento total y la luz directa-, y se aprovechan las anteriores
experiencias del estilo ramirense.
Luego oculta la capa. Recuerda que puedes hacerlo desde el panel Capas o
desde el Inspector de propiedades.
Selecciona la imagen, luego en el panel comportamientos escoge la opcin

Mostrar-Ocultar capas.
40
Vers un cuadro de dilogo donde debes seleccionar la capa que quieres

mostrar u ocultar. Cuando tenemos varias capas es conveniente ponerles
nombre para no liarse. En este caso no tiene importancia ya que solo
tenemos una, seleccinala y pulsa Mostrar .
Ahora selecciona el evento que desencadenar el comportamiento de

mostrar la capa. Selecciona OnMouseOver (cuando el ratn pasa sobre el
elemento).
Repite el proceso para ocultar la capa cuando el ratn no se encuentre sobre

la imagen ( OnMouseOut ). Debes volver a la opcin Mostrar-Ocultar capas
para indicar que la quieres ocultar. Y luego indicar el evento.
41
Guarda el documento como MostrarOcultar.htm y pulsa F12 para

comprobar el resultado. La capa que contiene el texto debe verse
nicamente cuando el cursor se encuentre sobre la imagen.
Si quieres eliminar un comportamiento, nicamente debes acceder al panel

Comportamientos y seleccionar el comportamiento que deseas eliminar. Luego
pulsar la tecla Supr . O hacer clic sobre el botn (-)
PRACTICANDO EN EL SITIO TURISMO

Abre la pgina introduccion.htm , vers que esta pgina tiene la imagen

de un mapa de asturias. Queremos que cuando el usuario pase el cursor
sobre ella se muestre una capa con el siguiente texto :
La extensin del litoral asturiano se encuentra entre la punta de Tina, en el concejo

de Ribadedeva, y la punta de la Cruz, en el concejo de Castropol. Es alta,
caracterizada por lo abrupto de sus acantilados y la carencia de grandes puertos
naturales. Al pie de los cantiles se ofrecen hermosas playas, amplias y abiertas
unas, recoletas otras, de arenas finas y limpias. No hay concejo de la costa que no
tenga arenales famosos y concurridos en el perodo estival, desde la playa de La
Franca (Ribadedeva) hasta la de Pearronda o Penarronda (Castropol).
Por el contrario, cuando el cursor no se encuentre sobre la imagen la capa

debe ocultarse sabras hacerlo? Si tienes alguna dificultad sera conveniente
que echases un vistazo al apartado Mostrar-Ocultar capas .
42
Abre la pgina portada.htm (no olvides que esta pgina se encuentra

dentro de la carpeta prueba).
Inserta una capa y dentro de ella crea una tabla de 1 fila y 3 columnas. El
tamao de la tabla ser 750px por 188px. Inserta una imagen en cada
celda.
Registra una ruta para la capa que mueva la capa de derecha a izquierda. El
movimiento debe comenzar al cargarse la pgina y no debe interrumpirse
nunca te parece muy difcil? Si es as vuelve al apartado Ejecutar lnea de
tiempo.
43
Apartado 7. Cdigo HTML

Como ya hemos comentado al comienzo de este tema, Dreamweaver genera cdigo
en lenguaje JavaScript para implementar los efectos de animacin. Este cdigo se
incluye directamente en el archivo HTML, por lo que est disponible para cualquiera
que desee verlo.
Qu es javascript?
El lenguaje JavaScript es un lenguaje de programacin que nos ayuda a realizar
efectos que el HTML no permite. Dreamweaver permite la incorporacin de
elementos que dinamizan las pginas web de una forma sencilla, sin tener que
conocer ningn lenguaje de programacin.
Se dice que JavaScript es un lenguaje de guiones ( scripts ). Normalmente sern
pequeos fragmentos de cdigo (guiones) que aparecern junto al resto del cdigo
de la pgina web.
Si abres cualquiera de las pginas en las que has insertado animaciones y miras en
su vista Cdigo. Podrs ver una serie de guiones de cdigo entre las etiquetas:
Como ya hemos comentado anteriormente, el cdigo JavaScript se escribe junto al

resto del cdigo de la pgina web. Se puede incorporar tanto en la seccin de
cabecera (HEAD) como en la seccin del cuerpo (BODY) de la pgina, dependiendo
de la funcin que realice.
44
LECCION 5: SUBIR LA WEB AL SERVIDOR

Apartado 1. Subir nuestra pgina
INTRODUCCIN
Nuestro sitio Web ya est terminado. Pero el nico modo de visualizarlo es desde
nuestro ordenador. Ya que hemos configurado el sitio en local.
Para que nuestra pgina pueda ser visitada desde cualquier ordenador es necesario
publicarla en Internet. O lo que es lo mismo, almacenarla en un servidor de
Internet.
Como tener nuestro propio servidor se escapara de lo que pretendemos en este
curso, haremos algo mucho ms sencillo. Utilizaremos los servicios gratuitos que
ofrecen algunos servidores, tele cable, el ayuntamiento de Gijn, etc... Es decir, les
solicitaremos un espacio para subir nuestra Web.
Por qu estos servicios son gratuitos?
Es muy sencillo, nos ofrecen un espacio gratis donde colocar nuestra pgina a
cambio de mostrar publicidad.
Adems la direccin para llegar a nuestra web estar precedida de la direccin del
sitio que nos ha ofrecido el espacio.
Obtener un espacio de pago
Si queremos que nuestra Web no tenga publicidad, necesitamos un mayor espacio
y velocidad, queremos tener un dominio propio que permita a la gente acceder con
mayor facilidad a nuestra pgina, etc...
Lo que debemos hacer es contratar un espacio en un servidor de pago. Existen gran
cantidad de servidores de pago, estos servidores cobran una cuota mensual o anual
45
ADQUIRIR UN ESPACIO GRATUITO

Como ya hemos comentado antes, existen muchos servidores que nos ofrecen
espacio gratuito para nuestras pginas. Nosotros hemos escogido geocities, pulsa
sobre el siguiente vnculo para registrarte como usuario de geocities y crear tu
propio espacio web:
http://es.geocities.yahoo.com/
Sigue los pasos que te indicamos a continuacin:
Pulsa sobre el vnculo que te ofrece geocities para crear tu sitio Web.
A continuacin vers un contrato, debes aceptarlo para continuar con la

creacin del sitio. Una vez que lo aceptes vers un formulario en que
tienes que introducir tus datos, en el apartado ID de Yahoo! Hemos
introducido turismoenasturias. Lo que introduzcas aqu ser parte de la
direccin del sitio.
46
Si cumplimentas correctamente el formulario ya tendrs tu sitio Web. En la

siguiente pantalla que vers te indicar los datos que necesitas.
Apartado 2. FTP
An no hemos subido los archivos que componen nuestro sitio Web a internet, por
el momento lo nico que hemos hecho ha sido crear el sitio.
Antes de continuar debemos detenernos un instante para hablar sobre el FTP
47
QU ES ESTO DE FTP?
Bien. FTP son las siglas de File Transfer Protocol, es decir, Protocolo de
Transferencia de Archivos. Es el sistema ms sencillo y eficaz para enviar y
recibir archivos entre ordenadores a travs de la red Internet.
Justo lo que queremos! Enviar los archivos que tenemos en nuestro ordenador al
sitio Web que acabamos de crear.
Existen muchos programas de FTP (Cute FTP, Ws_FTP LE, etc...) que podramos
utilizar para realizar esta transferencia. Nosotros lo haremos a travs de
Dreamweaver que tambin nos ofrece esta opcin.
CARGAR LOS ARCHIVOS EN EL SERVIDOR WEB REMOTO

Hasta ahora tenamos nuestro sitio Web en "local" es decir en nuestro equipo.
Ahora vamos a transferirlo al servidor Web "remoto".
48
En primer lugar asegrate de tener visible el panel Archivos. En la

pestaa Archivos selecciona la opcin Administrar sitios.
Edita el sitio turismo y vers el asistente que ya habamos utilizado al

comienzo del curso para crearlo lo recuerdas?
En la primera pantalla aparece el nombre del sitio, que dejaremos como

est. Pulsa Siguiente.
Ahora debes indicar que s quieres utilizar una tecnologa de servidor (no
especifiques ninguna en el desplegable) y pulsar Siguiente.
En esta pantalla la opcin que debemos marcar es Editar localmente y luego

cargar al servidor de prueba remoto. La ruta a la carpeta que contiene nuestro
sitio ya la habamos metido al crearlo, por tanto no es necesario modificarla. Pulsa
Siguiente.
Esta pantalla es
correctamente:
la
ms
importante,
asegrate
de
introducir
los
datos
49
La forma de conectar con el servidor ser FTP, la direccin del servidor es

ftp.es.geocities.com
La conexin FTP ser la ID que hayas rellenado en el formulario de

Geocities, en nuestro caso turismoenasturias.
Y la contrasea ser la que t hayas indicado en dicho formulario.
Cuando hayas rellenado esto correctamente pulsa Siguiente. Los siguientes pasos
djalos con los datos que te propone por defecto y pulsa Siguiente en cada
pantalla hasta completar el asistente.
Por ltimo pulsa sobre el botn Listo.
En este momento tenemos configurado el sitio remoto. Por tanto podremos elegir si
queremos ver los archivos locales o los archivos que se encuentran en el servidor
remoto. Para ello escogeremos la opcin que nos interese en el segundo
desplegable que se encuentra en la pestaa Archivos.
50
Selecciona Vista remota.
Pulsa sobre el botn Conectar y espera un poquito hasta que se realice

correctamente la conexin con el sitio remoto .
En cuanto se haya realizado la conexin vers la raz de tu sitio y la pgina

index.htm (habitualmente la pgina principal de los sitios debe tener este
nombre).
Ahora pulsa sobre el botn Expandir/Contraer y se abrir la herramienta

con la que colocaremos todos los archivos en Internet.
Antes de comenzar a colocar los archivos en el servidor cambia el nombre de

tu archivo principal.htm por index.htm. De este modo sobrescribiremos el
ndex actual por el nuestro para que la Web comience con la pgina de
marcos.
La pgina inicial de un sitio debe llamarse index.htm para que ste funcione.
51
Selecciona todos los archivos que quieres subir, en este caso selecciona todo y
pulsa sobre el botn Colocar archivo(s).
Puede que te salga un cuadro de dilogo preguntndote si quieres colocar

tambin los archivos dependientes, contesta que no y espera un poquito.
Dependiendo del volumen de archivos que tenga que colocar tardar ms o
menos. Cuando la transferencia est realizada aparecern a la derecha de la
ventana.
Abre una ventana del explorador e introduce la direccin de tu sitio

http://es.geocities.com/turismoenasturias
Si alguno de tus archivos contiene caracteres como la o acentos, etc... no podrn

ser colocados. Por tanto debers quitar de su nombre dicho carcter y
seleccionarlos para volver a intentar colocarlos. Cuando les cambies el nombre
actualiza los vnculos.
52

ManualDreamweaver II

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

ManualDreamweaver II

Transféré par

Droits d'auteur :

Formats disponibles

DISEO

Diseo de Pginas Web con DreamWeaver

LECCION 1: LAS CAPAS

Apartado 2: Trabajando con capas

En el men Insertar elige la opcin Objetos de diseo y selecciona la

CMO PUEDO SELECCIONAR UNA CAPA?

Diseo de Pginas Web con DreamWeaver

PUEDO SELECCIONAR VARIAS CAPAS SIMULTNEAMENTE?

CMO PUEDO CAMBIAR EL TAMAO DE UNA CAPA?

pulsa y arrastra sin soltar.

Decamos antes que cuando seleccionbamos

CMO PUEDO MOVER UNA CAPA POR EL DOCUMENTO?

pulsar la tecla Supr del teclado.

PROPIEDADES DE LAS CAPAS

Fjate en la siguiente imagen que corresponde al Inspector de propiedades, a

ID de capa: Permite especificar un nombre para identificar la capa.

Diseo de Pginas Web con DreamWeaver

ORDEN DE APILAMIENTO DE LAS CAPAS

Diseo de Pginas Web con DreamWeaver

Apartado 3: Practicando con las capas

Crea una segunda capa y escribe en ella el siguiente contenido: "La

Diseo de Pginas Web con DreamWeaver

Para la conservacin de la fauna se han creado reservas naturales

Descarga ahora las siguientes imgenes. Gurdalas

Debes conseguir que la pgina adquiera el siguiente aspecto. No te preocupes,

Las dos capas correspondientes a los textos de flora y fauna tienen un

La primera de ellas tiene un desbordamiento visible y color de fondo

Hemos movido las capas hasta conseguir la distribucin que ves en la

Diseo de Pginas Web con DreamWeaver

Abre la pgina Web florayfauna.htm y aplcale al ttulo el estilo titulo de la

Por ltimo aplica a los

Guarda los cambios realizados en el documento y pulsa F12 para comprobar

Apartado 4. Convertir capas en tablas y tablas en capas

Diseo de Pginas Web con DreamWeaver

Vamos a ver cmo funciona la opcin Convertir capas en tabla mediante un

Abre el documento en Dreamweaver y fjate en su contenido. Contiene la

Tambin podremos centrar la tabla si marcamos la casilla Centrar en

Pulsa Aceptar y observa el resultado.

Diseo de Pginas Web con DreamWeaver

Apartado 5. Cdigo HTML

Diseo de Pginas Web con DreamWeaver

LECCION 2: LOS FORMULARIOS

Apartado 2. Crear formularios

En el momento que insertes el formulario nicamente vers un rectngulo marcado

Diseo de Pginas Web con DreamWeaver

Abre una nueva pgina en blanco e inserta un formulario. Nos basaremos en

Gurdalo con el nombre solicitud.htm .

PROPIEDADES DE LOS FORMULARIOS

Pon al formulario el nombre formulario y en la propiedad Accin introduce lo

Apartado 3. Elementos del formulario

Asegrate de que el campo de texto se encuentre seleccionado haciendo un

Diseo de Pginas Web con DreamWeaver

Pon a la lista un nombre y selecciona el tipo (lista o men). Luego pulsa

Diseo de Pginas Web con DreamWeaver

Cada elemento tiene un valor que le diferencia de los dems, de este

Una vez introducidos todos los elementos de la lista volveremos al Inspector de

En la propiedad Seleccionado inicialmente puedes seleccionar el

Fjate tambin en la propiedad Alto. Indica en ella el nmero de

LAS CASILLAS DE VERIFICACIN

En el cuadro de dilogo Grupo de opcin introduce el nombre que recibir

Haz clic sobre el primero de los botones de opcin para ver

La propiedad Estado inicial nos indicar qu opcin estar activada por

BOTONES ENVIAR Y RESTABLECER

Diseo de Pginas Web con DreamWeaver