TUTORIAL DE MACROMEDIA DREAMWEAVER

Crear el sitio.
Lo primero que tenemos que hacer es crear una carpeta que ser el sitio donde residan
nuestras pginas y todos los archivos que vayamos aadiendo. Es recomendable que
esta carpeta "cuelgue" directamente del disco duro C. As que pinchamos en Sitio, en la
Barra de Mens de arriba, y se desplegar el siguiente men:

Elegimos Nuevo sitio... y se abre esta otra ventana:

Hacemos doble clic en el icono

de la Carpeta raz local. Se desplegar la ventana de

bsqueda de directorios. Elegimos C y le damos al icono

carpeta.

para crear una nueva

Aparecer la siguiente ventana:

Cambiamos el nombre de la Nueva carpeta y le ponemos, por ejemplo, mi_sitio_web y

le damos a

Casi con toda seguridad tengas que volver a repetir el proceso anterior pues habrs
vuelto a la ventana de Definicin del sitio:

Le das al icono

y, ahora s, seleccionas la carpeta que acabas de crear, le das a

, aparecer esta ventana:

Le das a
y volvers a la ventana de Definicin del Sitio pero ahora ya con la
carpeta creada y seleccionada como Carpeta raz local:

Ponemos el nombre al sitio. Por ejemplo Mi primer sitio. Lo dems lo dejamos como
est y le damos a Aceptar.
3

Volveremos a la ventana mltiple del Sitio:

Observa el lateral inferior derecho:

Aparece abierto el sitio que acabamos de crear:

carpeta
denominada
mi_primer_sitio
que
C:

est

que est alojado en una

en
el
disco
duro

Crear el primer documento.

En la ventana mltiple ya se ha creado un primer archivo al que Dreamweaver llama
Untitled-1: Observa la pestaa inferior izquierda del espacio mayor vaco:
Por otro lado, el documento (no el archivo) lo que ser la pgina, tampoco tiene
ttulo:
. Antes de hacer nada con l, podemos
proceder a guardarlo. Como va a ser nuestro primer documento, vamos a guardarlo con
el nombre especial de index. DreamWeaver le aadir la extensin .htm de pgina web.
Le damos a Archivo > Guardar

Aparecer la ventana Guardar como:

Le ponemos el nombre index:

Y le damos a Guardar.

Observa como en el lateral inferior derecho aparece el archivo dentro de la carpeta del
sitio:

Y, en la pestaa inferior del documento ya aparece el nuevo nombre (index)que le

hemos dado al archivo:

Falta poner el ttulo al documento. Lo vamos a hacer en el prximo apartado.

La primera pgina
Simplemente empezamos a escribir en el espacio vaco.
Podemos empezar dando la bienvenida a nuestros visitantes. Escribimos pulsando Enter
para saltar a la siguiente lnea:

Para dar formato al texto, disponemos de las herramientas que se desplegan en el

denominado Inspector de Propiedades:

Si no ves este panel es porque est oculto:

. Observa que el tringulo
en flecha est sealando hacia la derecha. Simplemente haciendo clic en l, pasa a la
posicin anterior.
Para efectuar los cambios que deseemos, previamente seleccionaremos el texto al que
queramos hacer referencia:

Por ejemplo a la primera lnea le hemos aplicado un tamao de Encabezado 1. No

hemos modificado el tipo de fuente, ni el tamao (de forma explcita). Le hemos puesto
de color rojo y lo hemos centrado en la lnea.

Ahora hacemos cambios en la segunda lnea:

Ahora hemos cambiado el tipo de fuente, el tamao, el color. Lo hemos puesto en

negrita y centrado.
Para finalizar, vamos a poner un ttulo al documento, por ejemplo, Pgina de saludo. Lo
escribimos directamente en la ventana Ttulo:
.Observa cmo ha cambiado la barra de ttulo:

En primer lugar aparece el nombre del documento: Pgina de saludo. En segundo lugar
la carpeta raz: mi_sitio_web y finalmente, el nombre del archivo: index. El asterisco
que viene a continuacin nos recuerda que el documento no ha sido guardado despus
de los cambios efectuados. As que es lo que podemos hacer ahora: Archivo > Guardar:

10

El asterisco habr desaparecido:

Ahora vamos a poner un color de fondo a la pgina. Para ello pinchamos en cualquier
punto vaco de la pgina con el botn derecho del ratn y elegimos Propiedades de la
pgina... del men contextual:

Aparecer la siguiente ventana:

11

De todo lo que se puede hacer aqu, de momento nos quedamos con poner un color de
fondo. Pincha en el cuadrito de Fondo y aparecer la paleta de colores:

Elegimos el que nos parezca y vemos su efecto en Aplicar. Cuando estemos

convencidos, le damos a Aceptar.
Nuestra pgina tiene, ahora este aspecto:

12

Le damos a Archivo > Guardar (No olvides hacerlo de vez en cuando, por lo que pueda
pasar...)
Comprobar el documento con los navegadores.
Va siendo hora de que comprobemos nuestra pgina con el navegador (con los
navegadores).
Una primera forma de hacerlo consiste en darle a la tecla de funciones de nuestro
teclado: F12. Se abrir el navegador que tengamos configurado como predeterminado y
veremos el aspecto de la pgina.

Otra forma conveniente es ver nuestra pgina desde fuera de Dreamweaver. Para ello
vamos al Explorador de Windows o al disco duro C y buscamos la carpeta
mi_sitio_web y el archivo que contiene la primera pgina: index.htm
Hacemos doble clic sobre el archivo y visualizaremos nuestra pgina con el navegador
que tengamos predeterminado. En este caso, como vemos por el icono, es el Explorer.
Conviene comprobar la pgina, tambin, con algn otro navegador, para
asegurarnos de que no hay problemas de visualizacin: A veces hemos cometido un
fallo que un navegador detecta y otro no...Algunas de las funciones un poco ms
sofisticadas, no son igualmente soportadas por todos los navegadores (hojas de estilo,
comportamientos,...). Si el otro navegador es el Netscape (el segundo ms conocido), lo

13

buscamos
y abrimos.Probablemente nos pedir que iniciemos la conexin telefnica.
Le decimos que no y, cuando est ya la primera pgina del navegador abierta sin
mensajes, le damos a Archivo > Abrir pgina...:

Nos aparecer la ventana Abrir pgina. Le damos a Elegir archivo...

Y buscamos en el disco duro la carpeta mi_sitio_web

14

Le damos a Abrir

Haciendo doble clic sobre el icono para abrirla:

Aparecer esta ventana.Le damos a Abrir estando seleccionado Navigator.

La pgina se ve as con el Netscape:

15

A partir de este momento conviene minimizar (no cerrar) el Netscape, para tener a mano
la comprobacin de los cambios que vayamos realizando tambin con este navegador.
La Barra de Tareas debera tener un aspecto similar a ste:

El botn de Dreamweaver ,el botn del Explorer y el del Netscape.

16

Insertar una tabla.

Desde Insertar de la barra de Mens, elegimos Tabla.

Aparecer una ventana similar a sta:

Podemos determinar el nmero de Filas, el nmero de Columnas, el Ancho de la tabla

en pxeles o porcentaje, especificar si queremos que la tabla tenga Borde e indicarle el
grosor del borde en su caso.El Relleno de celda hace referencia al espacio que queremos
que exista entre el texto, o lo que coloquemos en cada una de las celdas, y su borde. El
Espacio celda es el espacio que queremos que haya entre una celda y otra. Ambos se
indican en pxeles y se pueden quedar vacos en el caso de que queramos que tanto el
relleno de celda como el espacio de celda sea el mnimo posible.
A modo de ejemplo vamos a insertar una tabla con 3 filas y 6 columnas y que ocupe el
80 % del ancho, un borde de 2 pxeles y un relleno de celda de 5 pxeles:
Lunes

Martes

Mircoles

Jueves

Viernes

Maana
Tarde

17

Modificar la tabla.
Si ponemos el cursor en cualquier punto de la tabla, en la barra de estado,
encontraremos una informacin similar a sta:
Son las etiquetas del lenguaje HTML que veremos ms adelante. De momento, indicar
que la etiqueta <body> hace referencia a todo el documento que se visualiza con el
navegador. La etiqueta <table> hace referencia a la tabla entera, la etiqueta <tr> a la fila
en la que est el cursor y la etiqueta <td> a la celda. Observa que la ltima etiqueta est
en negrita. Eso quiere decir que es la celda la que est seleccionada.
Por debajo de esta barra de estado nos encontramos con el panel del Inspector de
Propiedades que harn referencia a la celda en la que, en ese momento, est el cursor:

Desde ese panel podramos cambiar las propiedades de la celda en cuestin.

Si, desde la Barra de Estado pulsamos la etiqueta <table>, se seleccionar toda la tabla.

Si ahora vemos las propiedades, stas sern las propiedades de la tabla y, desde all,
podremos cambiar las propiedades de la tabla y su configuracin.

Podemos modificar el nmero de Filas en Filas, el nmero de columnas en Cols, la

anchura en An, la altura en Al, el espacio entre los bordes y el contenido en Rell.celda,
el espacio entre las celdas en Esp.celda, la alineacin en Alinear, el grosor del borde en

18

Borde. De momento, ignoraremos los seis iconos siguientes:

. Podemos
establecer un color de fondo en Col.Fondo, un color de borde en Col.borde o una
imagen en Im.
Vamos a realizar algn cambio en la tabla:

Hemos aadido una fila, alineado al centro, incrementado el grosor del borde a 5
pxeles, establecido un color de fondo y otro diferente para el borde. El resultado es
ste:
Lunes

Martes

Mircoles

Jueves

Viernes

Maana
Tarde

Podemos hacer cambios a una celda concreta, a una fila entera, o a la tabla entera como
acabamos de ver.
Para hacer cambios a una fila colocamos el cursor en una celda de esa fila y marcamos
la etiqueta <tr> de la barra de estado. Quedar seleccionada la fila entera. Desde el
panel Propiedades podemos hacer los cambios oportunos:

Hemos seleccionado la primera fila. Ahora el panel Propiedades afectar a la fila

seleccionada:

19

Si pulsamos, por ejemplo, el botn el texto que est escrito en las celdas de esa fila se
colocar centrado en cada una de las celdas. Pulsando, por ejemplo, el botn el texto
escrito pasar a estar en negrita. El resultado ser:

Otra forma de seleccionar filas o/y celdas consiste en situar el cursor en una de las
celdas y arrastar con el ratn hasta donde se desee:

Hemos seleccionado las cuatro celdas intermedias de la ltima fila. Si le damos, por
ejemplo al icono las celdas seleccionadas se agruparn en una sla:

Podemos aadir texto o variar las propiedades de las celdas por los procedimientos
descritos:

20

Hemos seleccionado por el mtodo de arrastrar el cursor las celdas anteriores para
cambiar el color de fondo:

El resultado es:

21

Imgenes
Para insertar una imagen es conveniente tenerla previamente guardada en la carpeta del
sitio. De lo contrario Dreamweaver nos advertir para que guardemos una copia en la
carpeta correspondiente.
Las imgenes pueden estar sueltas en la carpeta raz junto con los archivos de cada uno
de los documentos o, mucho mejor, en una carpeta especial dentro del sitio a la que
llamaremos imagenes (nombre de los archivos y carpetas sin acentos) o cualquier otro nombre
que nos sugiera que, dentro de esa carpeta, estn nuestras imgenes.
Para crear una carpeta dentro de la carpeta raz del sitio, pulsamos la pestaa Archivo de
la franja lateral derecha y elegimos Nueva carpeta

Por cierto, para hacer visible o invisible la franja lateral derecha le damos al icono
Se crear una carpeta con el nombre untitled que habr que cambiar por el que
deseemos tenga nuestra carpeta de imgenes:

Por ejemplo, podemos llamarla imag:

22

Podemos llevar las imgenes a la carpeta por cualquiera de los procedimientos

habituales en Windows. Si por ejemplo, tal como indicbamos al principio, la imagen
no est previamente guardada en la carpeta, Dreamweaver nos va a sugerir que lo
hagamos. Supongamos que queremos insertar una imagen que tenemos guardada en el
Escritorio.La imagen se llama obras.
Pinchamos en Insertar de la barra de mens y soltamos en Imagen:

Aparecer la ventana Seleccionar origen de imagen:

Pinchamos en Escritorio y seleccionamos la imagen: obras

23

Aparecer el mensaje de advertencia dicindonos que la imagen no est en la carpeta

raz del sitio:

Le decimos que S y se abrir la ventana Copiar archivo como

24

Hacemos doble clic sobre la carpeta imag para abrirla

Le damos a Guardar. La imagen se guardar en la carpeta imag y se colocar en el

documento:

25

Una imagen puede colocarse tambin como fondo de una pgina, o de una tabla, o de
una celda. Por ejemplo, en la tabla que hemos creado en el apartado anterior
Lunes

Martes

Mircoles

Jueves

Viernes

Maana

Aula 1

Aula 2

Aula 1

Aula 2

Aula 1

Tarde

Aula 1

Aula 3

Aula 1

Aula 3

Aula 1

Noche

Tiempo libre

Fiesta final

Podemos poner una imagen de fondo en alguna o algunas de las celdas. Por ejemplo,
seleccionamos la primera celda (colocamos el cursor en ella y pulsamos <td> en la barra
de

estado).

En

el

panel

de

Propiedades

pinchamos

en

de

26

Aparecer la ventana de Seleccionar origen de imagen. La buscamos y. una vez

seleccionada,

le damos a Aceptar y la imagen se colocar como fondo de la celda seleccionada:

A propsito de las imgenes, es muy importante que controlemos el tamao de las

mismas para que no tarden mucho tiempo en su descarga cuando alguien visite nuestra
pgina. Cuando insertamos una imagen aparece, en el cuadro de dilogo, una
informacin sobre el tamao y el tiempo de descarga aproximado. Otra forma de ver
estos tamaos es pulsando el icono
(Ampliar/contraer)de la franja lateral derecha. La
ventana se ampliar proporcionando informacin sobre los tamaos de los archivos:

27

As vemos que la imagen obras ocupa 3 KB lo cual es un tamao aceptable. En cambio

el fondo1 ocupa mucho espacio: 24 KB. Esta imagen sera adecuado sustituirla por otra
que fuese bastante ms ligera.
Observa que los dos formatos de imagen que ms abundan (precisamente porque no
ocupan demasiado) en Internet, son los formatos gif y los jpg. Los gif se emplean para
imgenes con pocos colores y los jpg para imgenes, como fotografas, que requieren
ms colores. Ahora empieza a extenderse otro formato: el png.En cuanto a los gifs,
decir que un uso muy extendido son los gif animados que son imgenes con cierto
movimiento que no ocupan demasiado espacio. Por ejemplo:

La imagen ocupa 9 KB y, siempre sin hacer un uso abusivo, estos gifs animados pueden
alegrar nuestra pginas.
(Nota: Dreamweaver hace un clculo del tamao por aproximacin redondeando al
valor en KB ms prximo por arriba -17,2 KB se convierte en 18 KB por ejemplo-. Si
deseas ver el tamao exacto lo puedes hacer desde el explorador de Windows: te situas
con el botn derecho del ratn encima de la imagen y le das a Propiedades)
Este
gif
se
ha
sacado
http://ausmall.com.au/freegraf/freegrfa.htm

de

la

siguiente

direccin:

Aunque hay muchos otros sitios web que proporcionan gifs animados y sin animar de
forma gratuita.

28

Vnculos
Los vnculos, hipervnculos, enlaces, hiperenlaces (todas estas palabras designan el
mismo concepto) es uno de los elementos ms importantes del lenguaje HTML con el
que se construyen las pginas web.
Vnculos a otro documento del mismo sitio
Es, quiz, el vnculo ms usado. Para ello se selecciona el elemento que va a servir para
enlazar (puede ser una palabra, una frase, una imagen, un fragmento de imagen,...). Una
vez seleccionado pinchamos en el icono
Propiedades.

de la seccin Vnculo dentro del panel de

Por ejemplo. Vamos a hacer que la frase ir a la pgina anterior sea un vnculo con la
pgina anterior de este curso de Dreamweaver. Seleccionamos la frase

abrimos el panel Propiedades, si no est abierto, pinchamos en

Pinchamos en el icono
abrir:

de

y se

29

Seleccionamos el archivo correspondiente, en este caso es seis y le damos a Aceptar.

El enlace habr quedado marcado de otro color y subrayado aunque esto se puede
modificar:

Cuando probemos con el navegador comprobaremos que al pinchar en la frase nos

vamos al documento anterior: Imgenes. El documento se abrir en su comienzo.
Vnculos a documentos externos
Es cuando el vnculo nos lleva a una pgina de internet ajena a nuestro sitio. Hay que
hacer lo mismo: Seleccionar el elemento que va a ser el activador del vnculo y, ahora,
escribir en la caja de texto la direccin completa del sitio.
Supongamos que queremos hacer que esta imagen

sea un vnculo a la pgina del CNICE. Pues bien, la seleccionamos y escribimos la URL
de la pgina http://www.cnice.mecd.es en la caja de texto:

30

Como en el caso anterior, comprobaremos que funciona dndole a la tecla F12 y

comprobando con el navegador
Vnculos a otras partes del mismo documento
Es cuando queremos que al pinchar en el activador se nos coloque al principio de la
pgina, al final, al comienzo de un apartado determinado, ... siempre dentro del mismo
documento.
Para ello primeramente hay que hacer marcas en los puntos a los cuales queremos que
vaya el vnculo.
Por ejemplo: Vamos a hacer vnculos a cada una de las partes de este documento: Al
comienzo (apartado 12) y a los apartados 12.1 , 12.2. 12.3 y 12.4. Para ello nos
colocamos con el cursor en el punto en cual queremos establecer un denominado punto
de fijacin con nombre.
Lo hacemos con el comienzo: Situamos el cursor delante del ttulo del documento
(delante de Vnculos) y pinchamos en la barra de mens Insertar > Punto de fijacin con
nombre

Aparecer un cuadro de dilogo para que introduzcamos el nombre que le queremos

dar:

31

Ponemos 1 y le damos a Aceptar:

Aparecer este icono

justo en el sitio donde habamos colocado el cursor y que es el
punto al cual se ir cuando activemos el enlace. Este icono no se visulizar cuando
veamos la pgina con el navegador.

Hacemos los mismo con los apartados siguientes: Les damos el nombre 2 , 3 , 4 y 5.
Ahora establezcamos los enlaces:
Ir al comienzo (1)
Ir a vnculos con otros documentos del mismo sitio (2)
Ir a vnculos externos (3)
Ir a vnculos con otras partes del mismo documento (4)
Ir a vnculos a puntos concretos de otros documentos del sitio (5)
Seleccionamos las frases y en la caja de texto del vnculo escribimos #1 , #2 , ... segn
vaya correspondiendo

32

Vnculos a puntos concretos de otros documentos del mismo sitio

Los dos tipos de vnculos anteriores se pueden combinar, de tal manera que podamos ir
a partes concretas de otros documentos. En este caso, una vez definido el punto de
fijacin con nombre en el documento correspondiente, se establece el enlace escribiendo
el nombre de la pgina con su extensin .htm seguido de almohadilla y el nombre del
punto de fijacin.
Ir a Declaracin de Intenciones
Ir a Instalar el Programa
Ir a Abrir el Programa
Ir a Crear el Sitio
Ir a Crear el primer documento

Vnculos de correo electrnico.

Se puede establecer tambin vnculos de correo electrnico a partir de una imagen o un
texto, de manera muy similar al resto de los hiperenlaces.
Veamos un ejemplo. Vamos a vincular un nombre (o una expresin o frase cualquiera)
con su direccin de correo electrnico. Una forma de hacerlo es:
Colocar el cursor en el punto en el que queramos que est el enlace y darle a Insertar >
Vnculo de correo electrnico:

Aparecer el cuadro de dilogo en el que pondremos el texto que queramos que sirva
como enlace y la direccin de correo electrnico:

33

ste es el resultado:
Escrbeme
Cuando un visitante de nuestra pgina pinche sobre este vnculo se abrir su programa
de correo y podr enviar un mensaje a la persona a cuya direccin hemos vinculado el
enlace.
13.- Una vista al cdigo fuente
Podemos aprovechar este tema para echar un vistazo al cdigo que Dreamweaver va
generando automticamente.
Si no tienes mucha idea de a qu nos estamos refiriendo pincha aqu:
cdigo html. Si ya sabes, aunque slo sea un poco, de lenguaje html, contina leyendo.
Vamos a ver cmo ha quedado el cdigo para ese enlace de correo electrnico:
Selecciono la palabra Escrbeme y, una vez seleccionada, pincho en el botn de la barra
de herramientas:
. Veremos el cdigo fuente de nuestra pgina. Entre el resto del
cdigo aparecer:

Vemos la palabra seleccionada Escrbeme (el acento se escribe con los caracteres
especiales &iacute;) rodeada de dos etiquetas. La primera de enlace al correo que
comienza <a href= con el mailto dentro de las comillas y la segunda etiqueta de cierre
del enlace </a>.
Para volver a la vista normal pincho en
Pues bien, si yo quiero emplear una imagen como enlace del correo, puedo hacerlo
desde el cdigo. Primero coloco la imagen:
cdigo fuente pinchando en
. Ver lo siguiente:

. La selecciono y me voy a ver el

Que me est diciendo que la imagen (img) se encuentra (src source en ingls) en la
carpeta ima , se llama correo_sonrisa y tiene formato gif. Despus viene su medida en
pxeles en anchura y altura.

34

Pues bien, puedo colocar las etiquetas de enlace de correo anteriores: <a
href="mailto:apuente@roble.cnice.mecd.es"> delante y </a> detrs:

Dndole a Archivo > Guardar cuando hayas acabado y volviendo a la vista normal
(Vista diseo) pinchando en
De esta manera he conseguido que la imagen anterior se convierta en un enlace al
correo electrnico. Comprueba que funciona dndole a la tecla f12.
(Nota: Al ir escribiendo directamente el cdigo, Dreamweaver MX nos va ayudando a
partir de las primeras letras que vayamos introduciendo, proporcionndonos los posibles
fragmentos de cdigo que pudiramos ir necesitando. Simplemente haciendo doble clic
sobre el correcto, ste se incorpora al cdigo)

Salto de lnea.
Probablemente a estas alturas del curso ya te habrs encontrado con la necesidad de
separar dos lneas de texto por algo menos del espacio que se origina al pulsar el intro
del teclado.
Ello se consigue con Insertar > Caracteres especiales > Salto de lnea
Vamos a observar el cdigo que se genera cuando pulsamos el intro (lo pulso):

Observa que ha colocado el prrafo anterior entre la etiqueta <p> con los atributos de
estilo "texto"(esto lo veremos ms adelante) y alineacin izquierda y la etiqueta de cierre (no
imprescindible) </p>
Vamos
ahora
a
insertar
un
Observamos el cdigo que se ha escrito:

salto

de

lnea.

(Lo

inserto)

35

En el momento que hemos insertado el salto de lnea se ha escrito la etiqueta <br> del
ingls break, romper.
Este salto de lnea es una utilidad que, siendo muy usada, parece que est un poco
escondida en este editor.

36

Listas de cosas.
Cuando queremos realizar una enumeracin de objetos, lo hacemos pulsando la tecla del
panel de propiedades (una vez que nos hemos situado en el primer objeto de la lista):
Estas son mis aficiones:

El cine
La lectura
Los paseos por el campo

Para acabar la enumeracin, vuelvo a pulsar el mismo botn:

Veamos el cdigo que se ha generado:

Se introduce la lista con la etiqueta <ul> unordered list y despus cada uno de los
objetos de la lista con las etiquetas <li> list item de apertura y su correspondiente de
cierre.
Si, en cambio, queremos que nuestra lista sea numerada, pulsamos el botn

Estas son mis aficiones por orden de preferencia:

1. El deporte de aventura.
2. La msica rock
3. Salir de juerga con mis amigos
Veamos el cdigo que se ha generado:

La etiqueta <ol> de ordered list. Las otras etiquetas son las mismas <li> list item que en
el caso de las listas no ordenadas.

37

Sangrar el texto.
Si deseo que una determinada lnea comience algo ms all del margen, no lo
conseguir dndole al espaciador. Tendr que pulsar la tecla
que permitir que el
texto se site sangrado desde el margen izquierdo. Puedo pulsarlo varias veces.
Hacemos una prueba pulsndolo cuatro veces:
He pulsado 4 veces este botn

. Y pulso intro:

Ahora el margen se guarda. Pulso intro:

Para volver al margen inicial pulsar la tecla
Pulso 4 veces la tecla

Pulso intro

. Esta lnea ha vuelto al margen inicial.

Veamos el cdigo generado:

Cada vez que pulso el botn se ha generado la etiqueta <blockquote> que quedaba sin
cerrar. El botn se encargaba de ir cerrando cada una de las etiquetas anteriormente
abiertas.
Otra forma de hacer esto de manera ms manual (y ms precisa o exacta) es
introduciendo desde el cdigo un carcter especial de avance de un espacio. Es el
carcter &nbsp; no break space. Podemos poner tantos como haga falta para conseguir
nuestros objetivos:
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa

38

aaaa
aaaa
Este es el cdigo que, esta vez, hemos escrito directamente:

No olvidarse de guardar los cambios dando a Archivo > Guardar )

39

Marcos
Se denomina Marcos o Frames a una forma de organizar los diferentes documentos de
nuestro sitio web.
Una o ms partes de la pantalla permanecen con contenidos fijos y otra parte va
cambiando en funcin de los enlaces que pulsamos en otra de las partes de la pantalla.
Veamos un aspecto de la pantalla organizada en marcos:

En este caso la pantalla se divide en tres partes:

La parte superior en la que va el ttulo del sitio.

La parte de la izquierda que contiene los enlaces de los diferentes documentos
que forman nuestro sitio web.
La parte ms amplia donde se van a cargar los enlaces que pulsemos.

Para crear una pgina con marcos, debemos saber que:

La estructura de la pgina es un documento independiente.

Cada uno de los marcos es otro documento independiente.
Cuando se carguen los diferentes documentos, el documento inicial situado en el
espacio principal (main frame), ser sustituido por el enlace que haya sido
pulsado.

Empezamos:
Voy a crear un sitio nuevo al que voy a llamar Ejemplo de marcos dentro de la carpeta
raz marcos que creo en el disco duro C.
40

Empiezo creando un nuevo archivo: Archivo > Nuevo archivo

Aparecer el nuevo archivo al que Dreamweaver llamar untitled.htm

Hago doble clic sobre l para abrirlo:

41

Pulsamos

para que se despliegue:

Pinchamos en la pestaa

para que aparezcan los patrones de marcos:

Colocando el cursor sobre cada uno de los iconos nos muestra los diferentes conjuntos
de marcos que podemos insertar.
)
Una vez decidido qu conjunto de marcos vamos a utilizar (en nuestro caso:
hacemos un clic sobre el icono y el conjunto de marcos dividir nuestra pgina. Si no
estamos de acuerdo con la anchura de los marcos podemos modificarlo simplemente
situndonos con el cursor en el borde y arrastrando.

42

En este momento, Dreamweaver ya ha creado 4 diferentes documentos: El primero que

es el que contiene la estructura de los tres marcos (frameset) y uno por cada marco (el
superior, el izquierdo y el principal) los frames. Podemos, ahora, escribir algo en cada
una de las tres partes para identificarlas posteriormente: Por ejemplo:

Escribimos: Frame del ttulo.

Frame del ndice.
Frame principal.

Algo as:

43

Procedemos a Guardar: Archivo > Guardar todo:

Este proceso es muy importante y te sugiero que lo hagas tal como se indica:
Aparecer esta ventana:

44

Observa que a la carpeta raz del sitio la hemos llamado marcos, luego vamos a guardar
en esta carpeta los frames creados. Puede ocurrir que Dreamweaver intente guardarlo en
otro sitio, en ese caso tienes que buscar la carpeta marcos dentro del disco duro C.
Observa, tambin, que aparece, aparte de la carpeta _notes, un documento denominado
untitled (ms adelante sabremos qu documento es ste).
Lo primero que se va a guardar es el conjunto de marcos o frameset. Dreamweaver le ha
puesto un nombre: UntitledFrameset-7. Nosotros le podemos llamar conjunto o bien
index porque es la pgina que se va a abrir al principio con todos los marcos cargados.
que recorre todo el espacio, eso nos indica que es el conjunto
Observa el cordn
de marcos lo que estamos guardando.

45

Una vez cambiado el nombre y guardado, aparecer la siguiente ventana:

Observa que ahora el cordn

est rodeando el frame de la izquierda, el frame de
los enlaces. Adems, el nombre que le est poniendo Dreamweaver ya no es Frameset
sino Frame: UntitledFrame-6 Le ponemos el nombre que nos parezca, por ejemplo,
indice.

Le damos a Guardar y aparecer la ltima ventana:

46

Ahora el cordn
est rodeando al marco superior. De nuevo observamos el
nombre de Dreamweaver: UntitledFrame... Estamos guardando el marco del ttulo.
Podemos llamarlo titulo.

Le damos a Guardar y ya no aparecen ms ventanas. Nos falta, sin embargo, un frame

por guardar el frame principal: ste es el documento que Dreamweaver ha guardado con
el nombre untitled que veamos en la carpeta marcos.
Veamos los archivos que tenemos:

47

Observamos que aparecen los cuatro documentos:

index.htm con la estructura de todos los marcos.

indice.htm el marco izquierdo.
titulo.htm el marco superior.
untitled.htm que es el marco principal.

Podemos cambiar el nombre a este ltimo marco y le llamamos principal.htm desde este
mismo lugar. Botn derecho del ratn: Renombrar
Al haberle cambiado el nombre, aparecer la siguiente ventana de actualizacin de los
vnculos:

Le damos a Actualizar. Nuestro proceso habr finalizado. Lo nico que nos queda es
modificar el texto de cada uno de los marcos con los contenidos reales que queramos
colocar.
Comprobamos, finalmente, que los tres marcos y el conjunto de marcos estn dentro de
la carpeta del sitio:

48

Vamos a intentar entender un poco la estructura de este complejo sistema.

Abrimos nuestro index.htm haciendo doble clic sobre l.

Observa las etiquetas que aparecen:

: Nos indican que el frame
principal (observa que est subrayado el contorno y la etiqueta en negrita) est dentro de
un frameset que es la banda horizontal entera (con el frame del ndice) y que este
frameset est dentro de otro que divide al espacio en dos bandas.
Si al menos un
no aparece al abrir el index pincha con el ratn en cualquiera de
los bordes internos de separacin entre marcos (a veces cuesta un poco, parece que el
borde inferior es el que antes responde). Cuando ya tengas al menos un frameset pincha
en
para ver el cdigo fuente generado:

49

Nos fijamos en la etiqueta <frameset rows"80,*" . Esto nos est diciendo que la primera
estructura de marcos es una divisin del espacio en una fila de 80 pxeles y "lo que
quede" (eso indica el asterisco). El resto de esa lnea lo dejamos de momento.
La siguiente lnea <frame name="topFrame" indica que la primera fila es el marco
topFrame y que en ese marco se va a cargar el documento titulo.htm: src="titulo.htm">
Si slo hubiese esa divisin en dos filas, ahora vendra la etiqueta de esa segunda fila,
pero como la segunda fila se ha dividido en dos columnas, eso es otro frameset, que es
la etiqueta que viene en la tercera lnea:
<franeset cols="80,*: Dos columnas, la primera de 80 pxeles y la segunda de "lo que
quede" (lo indica el *).
Ahora viene los nombres y lo que se carga en cada una de esas dos columnas: En la
primera cuyo nombre es leftFrame <frame name="leftFrame" se carga el indice.htm
src="indice.htm">
En la segunda columna cuyo nombre es mainFrame <frame name="mainFrame" se
carga el documento principal.htm src="principal.htm>
Los dos frameset tienen border=0, eso significa que el borde entre ellos no se va a
visualizar con una lnea cuando se visite el sitio. Esto se puede modificar con el panel
de propiedades del conjunto de marcos:

50

Cargar otros documentos en el marco principal

Cada uno de los tres documentos que forman nuestro espacio se pueden modificar desde
el conjunto de marcos, o bien, abriendo cada uno de ellos de manera independiente.
El documento que va a tener los enlaces se recomienda que sea modificado dentro de la
estructura de marcos para poder elegir el destino de los enlaces. As colocamos el texto,
los fondos, que nos parezca y, cuando vayamos a hacer los enlaces:

51

Seleccionamos el 1 y pinchamos en la carpeta

del panel de propiedades:

52

Nos aparecer la ventana de seleccin de archivos.

53

Elegimos uno (que tenemos que tener preparado de antemano, lgicamente) y le damos
a Aceptar.
A continuacin tenemos que elegir el marco de destino en Dest:

54

Elegimos mainFrame
Hacemos lo mismo para el enlace del 2: Lo seleccionamos le damos a la carpeta del
vnculo. Elegimos el archivo dos y en Dest seleccionamos el mainFrame.
Lo mismo para el tercer enlace.
Y guardamos: Archivo > Guardar todo
Le damos a F12 para comprobar con el navegador que las cosas funcionan:

55

Formularios
Vamos con una de las herramientas ms tiles en toda pgina web. Es aquella que
recoge informacin del visitante y, o bien se almacena en el servidor, o bien se nos
enva a travs de una direccin de correo electrnico.
Son los formularios.
Para insertar un formulario: Pinchamos en

para que se desplegue el panel:

si no est ya desplegado, y elegimos la pestaa

Colocamos el cursor en el sitio donde queramos que se coloque el formulario y

pinchamos en el icono

Aparecern los lmites del formulario representados por un rectngulo cuyos lados son
una lnea discontinua de color rojo:

Ahora, por motivos estticos, vamos a colocar una tabla dentro del formulario con dos
columnas y varias filas: Situamos el cursor dentro del rectngulo de lneas discontinuas,
introducimos la tabla y la centramos:

Vamos a emplear, la columna de la izquierda para realizar la pregunta correspondiente

(justificado a la derecha) y la columna de la derecha para colocar los objetos de
formulario (justificado a la izquierda).

56

Campo de texto.
Vamos a hacer, como ejemplo, un formulario que recoja la opinin sobre esta pgina
web. Empezamos con el primer Objeto de formulario: Campo de texto.
Situamos el cursor en la primera celda, alineamos a la derecha y escribimos, por
ejemplo, Nombre:
En la primera celda de la derecha insertamos un campo de texto
Nuestro formulario tendr este aspecto:

Y,debajo, aparecer la ventana de propiedades

del campo de texto:

All podemos elegir la anchura del campo, el nmero de caracteres mximo, si

queremos que conste de una o varias lneas, si queremos que se oculte al ser escrito
(tipo contrasea), si queremos que aparezca un texto inicialmente y, lo que es ms
importante, el nombre que le queremos dar: Quitamos textfield y ponemos: nombre

Botn de opcin.
Vamos ahora a preguntar la opinin sobre la pgina. En la segunda celda de la columna
de la derecha, insertamos un botn de opcin

Nuestro formulario tendr este aspecto:

57

Y, debajo, aparecer el panel de propiedades del botn:

En la primera casilla de la izquierda borramos radiobutton y escribimos el nombre de la

opcin global: opinion En la segunda casilla al lado de Valor activado, escribimos lo
que corresponda con esta primera opcin que puede ser: muy buena. Podemos elegir
que esta opcin est activada o desactivada de entrada. Tenemos que escribir a la
derecha del botn el texto que ver el visitante: Muy buena, excelente. El formulario ir
quedando as:

Tenemos que seguir insertando los dems botones de opcin correspondientes a esta
misma cuestin. Por lo tanto los siguientes botones se debern seguir llamando opinion
y en cada caso habr que escribir lo que corresponde con esa opcin.
Para que el segundo botn no quede muy separado del primero le damos un salto de
lnea recuerdas? Insertar > Caracteres especiales > Salto de lnea
El segundo botn, por ejemplo, debera quedar as:

58

Ponemos un tercer botn con la opcin de que la pgina es Mala.Bastante mala: Ya

sabes el mismo nombre: opinion y como valor activado: mala.

Si queremos colocar otra pregunta de opcin deberemos llamarla de otra manera para
que no se excluyan las selecciones. Por ejemplo podemos preguntarle al visitante sobre
sus conocimientos de informtica. El nombre de la opcin podra ser conoc_infor (por
ejemplo)
El formulario va teniendo este aspecto:

59

Casillas de verificacin.
(permiten elegir varias opciones). En
Vamos a insertar ahora casillas de verificacin
nuestro caso, podramos hacerlo con las cosas que le han gustado o llamado la atencin
de este curso de Dreamweaver.
Introducimos la pregunta en la siguiente celda de la izquierda Qu es lo que ms te ha
gustado del curso?. En la celda de la derecha introducimos la primera casilla de
verificacin pulsando en el icono correspondiente.
Le ponemos un nombre a la casilla, por ejemplo, gustado, y, como primer valor uno de
los que se nos puedan ocurrir, por ejemplo,paso a paso (para Valor activado) y una
frase un poco ms construida para el formulario visible.

Damos un salto de lnea e introducimos nuevas casillas, siempre con el mismo nombre,
gustado, y una frase nueva como Valor activado que debe ser una expresin corta de lo
que escribamos en el formulario. Esta parte del formulario podra quedar as:

60

Listas y mens.
A continuacin, podemos incluir un men o lista desplegable. La diferencia entre men
y lista es que la lista permite varias elecciones y el men una nica. Podemos hacerlo,
por ejemplo, preguntando por la edad del visitante. Escribimos la pregunta en la
siguiente celda Indica tu edad e incluimos el men en la celda de la derecha pulsando en
.

Le damos un nombre a la Lista/men, por ejemplo, edad y pulsamos

Aparecer la siguiente ventana:

61

Vamos escribiendo en
los elementos del men. En Valor
escribimos lo mismo (ser lo que aparezca al ser enviado el formulario). Pulsando la
tecla
para incluir el siguiente y la tecla
para quitar uno ya introducido. Con las
flechas vamos cambiando el orden de las etiquetas de elemento.

Cuando lo tengamos todos le damos a Aceptar.

Las diferentes etiquetas no aparecen, slo lo harn al lanzar la pgina con el navegador:

Podemos incluir una campo de texto para comentarios. Lo podemos hacer con el botn
de Campo de texto

definiendo

propiedades, o bien, dando directamente al botn:

en las
(rea de texto):

Lo introducimos:

62

Podemos introducir ahora (campo de texto) la direccin de correo electrnico del

visitante. En este caso, podemos poner un Valor inicial:

Botones (Borrar y Enviar).

Finalmente, tenemos que insertar un botn para enviar el formulario y, si lo deseamos,
un botn para borrar todo lo que haya podido escribir el visitante. Empezamos por el de
borrar:
Vamos a colocar el botn de borrar en la ltima celda de la izquierda alineado a la
derecha. Colocamos el cursor en la celda, alineamos y pulsamos el icono
. Por
defecto, Dreamweaver coloca el botn de Enviar.

Nosotros modificamos de la siguiente forma:

63

A continuacin, nos colocamos en la celda de la derecha, alineamos a la izquierda,

pulsamos el icono
Aparecer, de nuevo la ventana anterior que modificamos, esta
vez ligeramente:

Podemos dar por finalizado nuestro formulario. Queda por definir la accin que
queremos que haga una vez relleno. Para usuarios personales, la opcin ms habitual es
el envo por correo electrnico de los datos obtenidos. Esto se hace colocando el cursor
en cualquier punto del formulario y eligiendo <form> desde la barra de estado:
. Aparecern las propiedades del formulario:

En Accin escribimos mailto:direcciondecorreo. Por ejemplo en mi caso, escribira

mailto:apuente@roble.pntic.mec.es
De todas formas, para que el envo del formulario pueda leerse como un mensaje de
correo ordinario, hay que escribir en la etiqueta del formulario del cdigo fuente el
atributo enctype="text/plain".

Si no est
Podemos intentar seleccionarlo del men:
all tenemos que escribirlo directamente en el cdigo. Seleccionamos el formulario
colocando el cursor y pulsando <form> de la barra de estado. Pulsamos el botn
para acceder al cdigo:

Incluimos lo acordado:

Vemos, de nuevo, las propiedades del formulario:

64

Nuestro formulario ya tiene que funcionar. Lo guardamos primero, lo lanzamos con el

navegador, y realizamos un rellenado de prueba para ver si lo recibimos
satisfactoriamente por el correo electrnico.
Antes de dar por concluido el formulario podemos hacer alguna modificacin en la
tabla, aadiendo algn color de fondo para separar unas filas de otras. Con el cursor
(arrastrando) seleccionamos la primera fila:

Y en la ventana de propiedades de la fila

Elegimos un color de fondo:

Elegimos otro color para la segunda fila y vamos alternando.

65

Estilos CSS
Los Estilos en cascada, estilos css, nos permiten controlar los parmetros de estilo para
todos los documentos que forman un sitio web. Esto es as cuando los estilos css los
definimos en una hoja externa, por otro lado, la forma ms rentable de trabajar esta
herramienta. Por ejemplo el Tutorial Dreamweaver MX de iniciacin al editor, estaba
controlado por una hoja de estilos que defina una serie de valores de color, forma,
tamao, para unas cuantas de las palabras y textos empleados en el sitio. Definir as los
estilos de un sitio le da una coherencia y sensacin de unidad que, de otro modo, es
difcil de conseguir. Por otro lado, si un estilo no nos gusta una vez ya realizado todo el
sitio, bastar modificar el estilo concreto en esa hoja, para que se modifique en todos los
documentos que formen el sitio y que estn vinculados con esa hoja de estilos.
Para crear una hoja de estilos css, teniendo abierto cualquier documento del sitio, le
damos a Ventana > Estilos CSS

En la columna de la derecha se abrir:

Ahora pincharemos en el icono

de

y aparecer la siguiente ventana:

66

En esta ventana podemos darle un nombre al estilo que vamos a crear (por defecto el
programa le da el nombre .unnamed1).
Podemos elegir si lo que queremos es definir un estilo personal, o bien, redefinir una de
las etiquetas del lenguaje HTML. (Ms adelante explicaremos la tercera opcin: Usar
selector CSS).
Por ltimo podemos definir el estilo en una hoja externa o bien, que se aplique
nicamente al documento en el que estamos trabajando.
Vamos a empezar trabajando los valores que estn elegidos por defecto:

Le damos un nombre a nuestro estilo, por ejemplo, palabrasclave

Ser un estilo personal.
En una hoja externa.

Cambiamos el .unnamed1 por .palabrasclave (si no ponemos el punto al comienzo,

Dreamweaver lo har por nosotros) y, sin ms, le damos a Aceptar. Aparecer la
siguiente ventana:

En esta ventana nos aparece la carpeta raz del sitio, en este caso, la carpeta para este
sitio de ejemplo que he llamado webDreamMXcurso . Le daremos un nombre en
Nombre de archivo (por ejemplo hoja1) y pulsaremos Guardar:

67

Se abrir la siguiente ventana para que definamos el estilo:

Por ejemplo:

68

Y le damos a Aceptar
Podemos observar la inclusin del estilo que acabamos de definir:

Y, por otro lado, vemos la hoja de estilos dentro de los archivos del sitio:

69

Si hacemos doble clic sobre el icono

nuestra hoja:

veremos los estilos definidos en

Volvemos a nuestro documento para aplicar nuestro estilo: Seleccionaremos la palabra a

la que se lo queramos aplicar, abriremos de nuevo (o vamos directamente a
) los Estilos CSS desde Ventana > Estilos CSS y haremos clic en el estilo palabrasclave.

El texto seleccionado pasar a estar escrito con los parmetros definidos.

Si una vez definido el estilo, no nos gusta, podemos modificarlo haciendo doble clic en
el estilo correspondiente
.
le damos al icono y se abrir
Para definir otro estilo, dentro de la ventana
la ventana Nuevo estilo. Le ponemos un nombre, por ejemplo, .texto1 y lo definimos

Esta es la definicin que he hecho:

70

Este estilo lo quiero aplicar a todos los prrafos que escriba en los documentos. Para
hacerlo bastar colocar el cursor en el inicio del prrafo y hacer clic sobre el estilo
. Observa que, si dentro del prrafo, hay una palabra ya definida como
palabraclave el estilo de sta no se va a modificar. Un estilo prevalece sobre el otro.
Para acabar este apartado, defino otro estilo para los ttulos de los apartados y lo aplico.
Nuestra hoja tiene, ahora, estos tres estilos definidos:

Empezamos con otro nuevo documento.

Para vincular este documento con la hoja de estilos que ya tenemos creada, le damos a
Ventana > Estilos CSS y se abrir la columna de la derecha desplegndose

71

Ahora pinchamos en el icono

de

y se abrir:

Nuestra hoja est en el sitio web en el que estamos trabajando. Por eso, no hay que
importarla de ningn otro sitio. Le damos a Examinar... y se abre:

Seleccionamos nuestra hoja1 y le damos a Aceptar:

72

Volver a salir la ventana anterior con la hoja ya seleccionada:

Le damos a Aceptar.
En el desplegable Diseo se habrn colocado todos los estilos definidos en la hoja1 que
acabamos de vincular:

Y podremos aplicar los estilos creados a las palabras o prrafos que nos interese.
Observad que el estilo texto1 se aplica automticamente conforme pulsamos la tecla
Enter y creamos un nuevo prrafo.

73

Un vistazo al cdigo fuente generado

Pinchamos en el icono

para ver el cdigo fuente.

Vemos que en la cabecera del documento entre las etiquetas <head> y </head> se ha
vinculado el documento con la hoja de estilos que hemos llamado hoja1

Ms adelante, cada vez que hacemos uso de uno de los estilos definido dentro de esa
hoja se genera una etiqueta
<p class> o <span class> que afecta al prrafo o al texto seleccionado:

Los estilos que hemos definido han sido de la categora tipo:

Como se puede ver hay un montn ms de categoras que se pueden definir.

Nosotros, de momento, vamos a pasar a ver los estilos que redefinen una etiqueta
HTML.

74

En primer lugar, vinculamos nuestro documento con la hoja de estilos hoja1 que
tenemos creada: Ventana > Estilos CSS , pinchamos en :

Le damos a Examinar:

Seleccionamos la hoja1 y le damos a Aceptar

Volvemos a Aceptar
Ahora pinchamos en el icono

para crear nuevo estilo. Se abrir:

75

Pero ahora seleccionamos Redefinir etiqueta HTML.

Ahora si pinchamos en la flechita de Etiqueta se desplegar:

Probablemente, muchas de las personas que lean este tutorial, desconocern algunas o
muchas de las etiquetas que aparecen en este listado. No es obligatorio conocerlas y,
adems, Dreamweaver las escribe por nosotros. Nosotros, slo a modo de ejemplo,
vamos a redefinir la etiqueta <a> que es la etiqueta de los enlaces. Bien; la
seleccionamos:

76

y le damos a Aceptar. Aparecer la ventana de Definir el estilo:

Definimos el estilo y elegimos Decoracin: ninguna:

77

Le damos a Aceptar.
Qu hemos hecho? Hemos indicado al programa que, aparte del tipo de fuente, del
tamao y del grosor, cuando haya un enlace, el vnculo no est subrayado. Como esto lo
hemos definido dentro de la hoja de estilos hoja1, lo que acabamos de hacer tiene
influencia en todos los documentos vinculados con la hoja, tambin en los creados
anteriormente.
Ahora vamos a aadir un efecto a este estilo: Queremos que cuando pase el puntero del
ratn por el vnculo, ste se subraye.
Para ello volvemos a pinchar en el icono

y ahora marcamos Usar selector CSS

En Selector: elegimos a:hover

78

Le damos a Aceptar y aparecer la ventana de Definicin de estilo. Marcamos

subrayado y le damos a Aceptar.:

Observa que lo que acabamos de hacer no se guarda como un estilo a aplicar:

De hecho, siempre que establezcamos un enlace se van a implementer las caractersticas

de estilo definidas. Sin embargo, si pinchamos en Editar estilos, s aparece la
redifinicin de la etiqueta <a> :

79

Haciendo doble clic sobre este estilo, o sobre cualquier otro, podremos modificar las
caractersticas del mismo.
Como se ha podido intuir, las hojas de estilo tienen una gran potencialidad y sus
posibilidades son muchas. Nosotros slo nos hemos asomado a unas pocas de las
utilidades que tiene esta herramienta. Se deja para el lector la experimentacin y
profundizacin a partir de las pistas dadas.

80

Los colores.
A estas alturas ya hemos empleado unas cuantas veces las paletas de color del
Dreamweaver.

Si ninguno de estos colores nos gusta, pulsando en

colores:

podemos crear nuestros propios

Cdigos de color.
Supongamos que quiero cambiar el color de esta palabra. La selecciono y la pongo de
color ms o menos azul.
Ahora voy a ver qu ha pasado en el cdigo fuente:

El cdigo del color est formado por 6 smbolos alfa-numricos precedidos del smbolo
#.

81

Los smbolos alfa-numricos son las diez cifras numricas y las seis primeras letras del
alfabeto ordenadas de la siguiente forma:
0

Siendo 0 el valor mnimo y f el valor mximo.

A su vez los seis smbolos se dividen en tres grupos de dos smbolos:

El primero de dos smbolos indica la cantidad de rojo (00 es el mnimo y ff el

mximo)
El segundo de dos smbolos indica la cantidad de verde (00 es el mnimo y ff el
mximo)
El tercero de dos smbolos indica la cantidad de azul (00 es el mnimo y ff el
mximo)

Las mezclas y combinaciones de cantidad van dando origen a los diferentes colores.

ffffff

000000 ff0000 00ff00

0000ff ffff00

cccccc ff00ff

Es el denominado cdigo hexadecimal.

Este cdigo tambin se puede sustituir por la palabra inglesa que define el color. As red
ser lo mismo que #ff0000 o green ser lo mismo que #00ff00. El problema viene
cuando no es un color primario ni secundario. Por ejemplo, el color blanchedalmond se
corresponde con el cdigo hexadecimal #ffebcd y es el siguiente color

Observa que he rellenado la celda con el color escribiendo en el inspector de

propiedades el cdigo nombre del color:

82

Imagen de sustitucin (roll-over).

Es una imagen, vnculo a otro documento, que cambia de aspecto al pasar el puntero del
ratn por encima de ella.
Primeramente deberemos tener, lgicamente, preparadas las dos imgenes y guardadas
en cualquier parte del ordenador.
Le damos a Insertar > Imgenes interactivas > Imagen de sustitucin

Aparecer la siguiente ventana:

En el Nombre de la imagen podemos dejar la que aparece por defecto.

En la Imagen original e Imagen de sustitucin le damos a Examinar para buscar las
imgenes que tenemos guardadas en el ordenador.
El programa nos avisar que las imgenes no estn guardadas dentro de la carpeta raz
del sitio y que debemos guardarlas dentro de esa carpeta:

83

Le decimos que S y guardamos las imgenes dentro de nuestro sitio en la carpeta que
hayamos creado para dejar las imgenes (o sueltas dentro de la carpeta raz del sitio).
Despus escribimos la URL completa de la pgina a la cual queremos enlazar la imagen
en el caso de que el enlace sea a un documento externo. O bien le damos al botn
Examinar en el caso de que nuestro enlace vaya a un documento de nuestro sitio. Y ya
est:

En el ejemplo, hemos puesto una imagen con un enlace a un documento externo: El

curso de Turismo Rural del Proyecto Mentor de Enseanza Telemtica del MECD. Para
ver el efecto pulsamos la tecla F12 y lo probamos con el navegador.

84

lbum de fotos.
Una opcin muy interesante es la creacin de un lbum de fotos.
Para hacerlo es necesario tener instalado en el ordenador una versin de Fireworks la
herramienta
grfica
de
Macromedia.
Desde
este
sitio:
http://www.macromedia.com/software/trial_download/ puedes descargarte una demo.
Para crear el lbum, lo primero que hay que hacer es tener en una carpeta, en cualquier
parte del ordenador, las fotografas guardadas. En el caso que vamos a poner de
ejemplo, las fotos estn guardadas en una carpeta en D con el nombre fotos_ayerbe. Son
fotografas del entorno de Ayerbe (Huesca) el sitio donde nac hace ya unos cuntos
aos...
Empezamos: Aunque el lbum no se va a colocar en el documento donde estemos
trabajando, es necesario tener cualquier documento abierto para acceder a Comandos >
Crear lbum de fotos web...

En el caso de que no se tenga el Fireworks en el ordenador aparecer la siguiente

ventana de advertencia:

Y se podr ir a la pgina de Macromedia para descargar una demo del programa.

Aparecer la siguiente ventana:
85

Ponemos un Ttulo a nuestro lbum y una informacin de subencabezado, si se desea.

Examinamos la carpeta origen de las imgenes (en este caso en D: fotos_ayerbe):

Le damos a Abrir y aparecer la carpeta:

86

Aunque aparezca vaca, la carpeta contiene las imgenes previamente guardadas. Le

damos a Seleccionar.
A continuacin pinchamos en Examinar... de la Carpeta de destino. Se abrir la carpeta
raz del sitio y all deberemos crear una nueva carpeta con el nombre que queramos, por
ejemplo, album1

87

Para crear la carpeta, pinchamos en el icono

carpeta
album1.

. Inmediatamente aparecer la nueva

a la que cambiaremos el nombre tal como hemos quedado por

El tamao de la miniatura puede estar bien (lo podemos modificar si queremos).

Desactivamos la casilla de mostrar nombre de archivos.
Elegimos el nmero de columnas que deseemos tenga la pgina inicial.
sta ha sido mi ventana completada:

Le damos a Aceptar y saltar el Fireworks procesando la informacin de cada imagen.

Al final aparecer el mensaje:

Y se presentar en pantalla la primera pgina del lbum con todas las miniaturas
(thumbnails). Podemos modificar los textos introducidos, colocar una imagen o color de
fondo, centrar el texto,... para mejorar el aspecto de la pgina.

88

Modificar el lbum.
Para empezar echamos un vistazo a las carpetas creadas. Vamos a la columna de la
:
derecha, la abrimos si no est abierta y desplegamos

Vemos que se ha creado 1 carpeta con el nombre de album1, dentro de la cual hay otras
tres carpetas y un archivo nuevos.
Las carpetas son:

images (que contiene las imgenes del lbum)

pages (que contiene las paginas que soportan cada una de las imgenes)
thumbnails (que contiene las miniaturas)

Y el archivo es el index.htm. Es la primera pgina que contiene las miniaturas de todo el

lbum.
Si abrimos el index.htm (de la carpeta album1) veremos algo as:

89

Vamos a centrar los textos. Cambiar el color de los mismos, cambiar el fondo... Lo
hacemos como ya sabemos pues se trata, simplemente, de una pgina web.
Una vez arreglada la primera pgina, abrimos cada una del las pages y vemos cmo se
han creado:

90

Evidentemente el nombre del archivo (Aguero_40.jpg.jpg en este caso) sobra. As que

lo eliminamos.
La imagen, por otro lado, debera estar centrada. Una forma buena de hacerlo es
.
seleccionar todo: Pinchamos en cualquier parte dentro de la tabla y, despus en
Se seleccionar toda la tabla que contiene el ttulo, los enlaces para navegar y la imagen.
Despus desde el inspector de propiedades de la tabla le decimos Alinear: Centro.

91

Botones Flash.
Los botones flash son elementos animados que sirven como enlaces.
Para ver las posibles opciones de botones pincha aqu.
Para insertar un botn le damos a Insertar > Imgenes interactivas > Botn Flash

Aparecer la siguiente ventana:

En Estilo eliges el botn que quieras. En Muestra vers el botn elegido.

En Texto del botn escribes lo que quieres que aparezca en el botn.
Puedes elegir el tipo de fuente y el tamao.
92

En Vnculo escribe la direccin URL completa si es un vnculo externo, o dale a

Examinar y elige el archivo en caso de ser un vnculo a un documento de la propia web.
En Destino puedes elegir que se abra en la pantalla completa (_top), en ventana nueva
(blank),...
Puedes elegir el color de fondo que rodear al botn ( a veces, segn el botn, no se ve
apenas nada).
Finalmente puedes dejar el nombre por defecto o poner otro. Es importante saber que
los botones tienen que estar en la misma carpeta que el documento. No pueden estar en
carpetas diferentes.
Le damos a Aceptar y el botn se habr colocado en el sitio elegido.
Vamos a colocar un botn a continuacin de esta lnea con enlace a otra pgina de este
sitio:
Esto ha sido lo que he escrito:

Si una vez hecho el botn, quieres modificar alguna de las propiedades del mismo basta
con hacer doble clic sobre el botn para volver a la ventana anterior y poder hacer los
cambios oportunos.

93

Si, en cambio, haces un nico clic se obtiene la ventana:

94

Texto Flash.
Otra forma muy sencilla de crear botones con animacin para los vnculos es, con el
denominado, texto flash.
Le damos a Insertar > Imgenes interactivas > Texto Flash

Nos aparecer la siguiente ventana:

Aqu podemos elegir el tipo de fuente, el tamao, negrita, cursiva, el tipo de

justificacin dentro del botn, el texto que va a tener... Elegimos el archivo con el que
se vincula, el destino: si es en ventana nueva o en toda la pantalla, el color de fondo y el
nombre con el que lo vamos a guardar...
Esto ha sido lo que he escrito en la ventana:

95

Haciendo doble clic sobre el botn se vuelve a la ventana anterior.

Tambin haciendo un solo clic se abre esta ventana:

En ella se pueden hacer algunos cambios, ver el comportamiento

caso, volver a la pantalla de Insertar texto Flash dndole a

y, en todo

96

Barra de navegacin
Si has llegado hasta aqu es gracias a la Barra de Navegacin que tienes encima de estas
lneas.
Es una herramienta de Dreamweaver que permite la navegacin por el sitio de manera
similar a los botones flash. La ventaja de la Barra es que nos indica el botn que hemos
pulsado en un momento determinado, lo que no ocurre con los botones flash ni con el
texto flash.
La desventaja es que tenemos que tener previamente preparadas y guardadas las
imgenes.
Para hacer las imgenes yo empleo PhotoShop. Esta es una buena direccin en la que
puedes aprender sobre este programa grfico:
Para cada botn de la barra tenemos que tener preparadas un mximo de cuatro
imgenes. No es necesario llegar hasta el mximo. En realidad, la ltima imagen no es
necesaria en absoluto. La Barra de Navegacin de este Tutorial slo tiene 3 imgenes.
Voy a poner un ejemplo de barra de navegacin con tres botones. Estas son las
imgenes que he preparado para cada botn:

Para insertar la Barra: Insertar > Imgenes interactivas > Barra de navegacin:

Aparecer la siguiente ventana:

97

Empezamos con Nombre de elemento: Escribimos el nombre y vamos seleccionando las

imgenes que hemos ido guardando en una carpeta (mejor dentro de la carpeta raz del
sitio). Yo las he guardado en una carpeta denominada ima.
Si la barra se coloca dentro de un marco y ste no ha sido guardado, aparecer la
siguiente advertencia:

Al hacer clic, ir a URL: Darle a Examinar para buscar el archivo o escribir la direccin
entera. La siguiente casilla indica donde se va a cargar. Yo lo voy a hacer dentro de un
marco, por eso estar la opcin: main-frame (marco principal). Las dems opciones las
dejamos como estn.
Por ltimo podemos apilar los botones Horizontalmente o Verticalmente o bien usando
tablas para que queden sujetos a la distribucin que queramos. Posteriormente cada
botn se puede colocar en una celda distinta de la tabla.

98

Esta es la ventana rellena para el primer elemento de la tabla.

Para insertar el segundo elemento pinchamos en

y rellenamos los datos. Cuando
hayamos acabado con todos los elementos pulsamos Aceptar.
Si queremos modificar la barra una vez creada, hay que hacer como si fusemos a crear
una nueva. El programa nos advertir:

Le damos a Aceptar y nos encontraremos con los elementos de la tabla. Los podremos
seleccionar y hacer las modificaciones oportunas:

99

100

Plantillas.
Una plantilla es una estructura en la que hay partes no editables (que no se van a poder
modificar) y otras que son modificables para llenarse de contenido.
Es una utilidad aconsejable cuando se van a repetir determinados documentos en los que
unas partes van a permanecer fijas y otras van a cambiar. Ahorra trabajo y permite la
presentacin de determinados contenidos con una unidad de estilo.
Vamos a poner como ejemplo la realizacin de la siguiente plantilla:

Empezamos abriendo desde Archivo de la barra superior

Elegimos la pestaa General y seleccionamos Pgina de plantilla y, dentro de ella,

Plantilla HTML :

101

Se abre el documento y, en l, podemos empezar a trabajar y colocar los distintos

elementos:

En el caso que estamos haciendo de ejemplo, una tabla:

102

Una vez finalizado tenemos que elegir los elementos que van a poder ser modificados:
Primero seleccionamos el elemento modificable (en el primer ejemplo el 2 del nmero
del tema) y abrimos Insertar > Objetos de plantilla > Regin editable

Se abrir la siguiente ventana:

Le cambiamos el nombre:

103

Y le damos a Aceptar.

Repetimos el proceso para todos los dems elementos editables. ste es el resultado
final:

Lgicamente el nombre de los elementos editables solamente se ve dentro de

Dreamweaver. Cuando se visite la pgina con el navegador, no se notarn las
diferencias entre las regiones editables y no editables, nada sealar unas partes u otras.
Ahora lo guardamos como plantilla: Archivo > Guardar como plantilla...

El programa nos permite elegir el sitio donde guardar la plantilla y el nombre con el que
guardarla:

104

En nuestros archivos se habr creado una carpeta con el nombre Templates y, dentro de
ella, la plantilla que acabamos de crear. (A veces no se visualiza inmediatamente, hay
que cerrar y abrir de nuevo el sitio para que se haga visible la carpeta):

Ahora, para crear un documento basado en esa plantilla, abrimos Archivo > Nuevo >
Plantillas. Y le damos a crear

105

Se abrir la plantilla y podremos modificar, o no, los elementos editables. Bastar

guardar como un documento nuevo cada una de las modificaciones para hacer funcionar
la plantilla.

106

Notas.
Es una herramienta de Dreamweaver muy til cuando el sitio se construye entre varias
personas o cuando queremos realizar alguna anotacin que nos sirva para el futuro.
Las Notas se pueden adjuntar a cualquier archivo, documento, imagen,... Lgicamente
estas notas son para uso de los diseadores del sitio y no las vern los visitantes de la
pgina.
Para adjuntar un archivo de notas una de las formas de hacerlo es:
pinchamos con el botn derecho del ratn en el archivo
Desde la vista
al que le queremos adjuntar las notas y en el men contextual elegimos Design Notes...:

Aparecer la siguiente ventana:

107

Escribimos lo que nos parezca oportuno en el cuadro de texto principal:

En Estado: puedo elegir entre unas cuntas opciones y abajo puedo elegir que las notas
se abran al abrir el archivo (lo que es bastante recomendable).

108

Para abrir las notas, puedo volver por el camino que llev al escribirlas, o bien, en la
vista de
,con el documento concreto seleccionado, pinchamos en
y seleccionamos Design Notes... Las notas se volvern a abrir y podremos
modificarlas.

Lo mismo que hemos hecho con un archivo .htm podemos hacerlo con una imagen, una
carpeta,... Botn derecho del ratn > Men contextual > Design Notes.

109

Meta tags.
Para que nuestro sitio sea encontrado por los buscadores debemos hacer varias cosas.
La primera de ellas es poner, en la cabecera de cada uno de los documentos que forman
nuestro sitio, una informacin determinada colocada entre las denominadas meta tags o
meta etiquetas.
Supongo que ya sabes algo de la cabecera de los documentos. Es la parte del mismo
comprendido entre las etiquetas <head> y </head>. En esta parte se coloca el ttulo del
documento (entre <title> y </title>) y algunas otras cosas que, aunque en principio no
son visibles en el cuerpo del documento (lo comprendido entre <body> y </body>), s
que pueden tener influencia en l. Es el caso de las vinculaciones a hojas de estilo
externas o de los scripts.
Nosotros, de momento, vamos a concentrarnos en estas etiquetas que no tienen ninguna
influencia en la parte visible del documento. Sirven, como ya se ha dicho, para que
nuestro sitio sea localizado por los robots o motores de bsqueda que emplean los
buscadores de la red.
Vamos a comenzar colocando las etiquetas e informacin que yo he puesto en este sitio:

<html>: Comienza el documento.

<head>: Comienza la cabecera del mismo.
<title>: El ttulo que hemos puesto al documento
<meta http-equiv... : Es una etiqueta generada automticamente por Dreamweaver.

110

<link rel= ... : Es la referencia a que ese documento est vinculado con la hoja de estilos
hoja1.
<meta name="Title" : Es el comienzo de las meta tags propiamente dichas. La primera
de ellas es el ttulo del documento o del sitio (mejor el del sitio pues es lo que queremos
que se encuentre). Como esta informacin es para los robots y motores de bsqueda yo
no pondra acentos ninguno.
<meta name="Author" : El nombre del autor del sitio.
<meta name="Subject" : El tema del sitio.
<meta name="Description" : La descripcin del sitio.
<meta name="Keywords" : Palabras clave. Es muy importante esta etiqueta. Hay que
escribir palabras sueltas separadas por comas. Se pueden poner juntas dos o ms
palabras tambin, pero no hay que hacer frases...
<meta name="Generator" : El nombre del editor con el que has hecho la pgina.
<meta name="Language" : El idioma.
<meta name="Revisit" : Se indica la periodicidad en la que se pueden realizar cambios.
<meta name="Distribution" : Se indica que nuestro sitio es de incumbencia general.
<meta name="Robots" : Indicamos que todos.
</head>: Se acaba ya la cabecera.
Como escribir estas etiquetas?
Una forma es copiar estas mas (Con el navegador Explorer: Botn derecho > Men
contextual > Ver cdigo fuente). Se abrir el Bloc de Notas. Seleccionar lo que nos
interese y copiar. Abrimos un documento nuevo del Bloc de Notas, pegamos y
modificamos lo que sea necesario. Cuando ya est, seleccionamos y copiamos. Vamos
al documento, pinchamos en
para acceder al cdigo fuente. All pegamos nuestras
etiquetas entre </title> y </head>.
Otra forma de hacerlo:
En

pinchamos en la pestaa

Ahora pinchamos en

. Aparecern, debajo, los iconos:

. Se abrir la ventana:

111

Podemos emplear esta herramienta cuntas veces haga falta para las primeras meta tags:
Title, Author, Subject :

Le damos a Aceptar y volvemos a pulsar

Hacemos lo mismo para la siguiente meta tag : Subject.

Ahora pulsamos

para escribir la descripcin:

112

Le damos a Aceptar. Pulsamos

comas:

para escribir las palabras claves separadas por

Y as sucesivamente con las dems etiquetas, dndole al icono

que es el genrico.

113

Refresh.
Con esta palabra indicamos que la pgina que estamos visualizando en un momento
determinado se va a cambiar por otra elegida por el diseador de la web. El visitante no
va a poder hacer nada ms que esperar esa actualizacin.
En este sitio web hay un "refresh" en la primera pgina. Al cabo de un cierto tiempo se
cambia por otra.
Para insertar una actualizacin automtica de este tipo:
Abrimos

si es que no est abierto y pinchamos en la pestaa

Nos aparecern los siguientes iconos:

algunos de los cuales ya son conocidos. Pinchamos en

. Se abrir:

Le tenemos que poner el tiempo que queremos que permanezca la pgina antes de
cambiar y elegir el documento al cual queremos que salte, dndole a Examinar y
seleccionando el archivo, o bien, escribiendo toda la URL en el caso de que sea un
enlace a un documento ajeno a nuestro sitio.

En el cdigo, dentro de la cabecera (entre <head> y </head>),se habr generado una

lnea como sta:

114

Que indica que va a tardar 15 segundos en cambiarse la pgina a otra que se ha llamado
con el nombre de tuto_dreamweaverMX.

115

Mapas de imgenes para enlaces.

Con Dreamweaver es muy fcil "mapear" una imagen para hacer que cada una de las
zonas elegidas de la imagen sea un vnculo con un documento diferente.
Una vez insertada en el documento la imagen:

Y, con ella seleccionada, elegimos una de estas tres herramientas

Inspector de propiedades:

La primera herramienta

se usa para hacer zonas rectangulares.

La segunda herramienta

se usa para hacer zonas circulares.

La tercera herramienta

se usa para hacer zonas poligonales.

del panel del

Vamos a emplear esta ltima para seleccionar la zona de la Entrada y Pasillo en forma
de "ele". Vamos pinchando de manera ordenada en cada uno de los seis vrtices de este
polgono:

116

Observa que la zona seleccionada se queda sombreada de color azul.

En el panel que aparece seleccionamos el Vnculo y el Destino y escribimos el texto Alt
que aparecer al situarse el puntero del ratn sobre el enlace:

117

Capas
Es difcil definir qu es una capa.
Una de las formas consistira en imaginar que es una pgina web dentro de otra pgina
web. En realidad varias pginas web dentro de una pgina porque capas puede haber
todas las que queramos.
Dentro de cada una de las capas se puede insertar texto, imgenes,... (en realidad hemos
quedado que la imaginamos como una pgina web dentro de otra). La caracterstica ms
importante de la capa es que la puedo mover para colocarla exactamente donde quiera.
As puedo colocar una imagen dentro de una capa y, una vez dentro, mover la capa para
que la imagen se coloque exactamente en el sitio deseado. Esto es difcil de conseguir
por otros medios...
A las capas tambin se les puede adjuntar "comportamientos" que son fragmentos de
javascript que permiten al visitante interactividad con la pgina.
Para insertar una capa: Insertar > Capa

Aparecer la capa:

El icono

nos va a indicar cada una de las capas que incorporemos a la pgina.

Pinchando en l se selecciona la capa. Tambin podemos seleccionar la capa pinchando

en el cuadrado

. Cuando la capa est seleccionada tiene este aspecto:

118

sirve, adems de para seleccionar la capa, para arrastrarla hasta el

El cuadrado
punto exacto que deseemos. Con los cuadrados rellenos:
podemos estirar o encoger
la capa adaptando su tamao a las necesidades.
Cuando la capa est seleccionada y teniendo abierto el panel de propiedades, aparece la
informacin sobre las propiedades de esa capa:

La ha llamado Capa 1 (Layer 1), viene la anchura y la altura y nada ms, porque no
hemos puesto nada en la capa. (En realidad, de momento, no he puesto en la pgina
ninguna capa, esto era una prueba para capturar las imgenes y los paneles).
Trabajar con capas.
Vamos a hacer un trabajo concreto con capas para aprender sobre su funcionamiento e
intuir posibles utilidades.
El trabajo que quiero hacer es un pasatiempo denominado "cuadrado mgico". Consiste
en colocar determinados nmeros en un cuadrado con un nmero igual de filas y de
columnas de tal manera que las filas sumen lo mismo que las columnas y las diagonales
del cuadrado.
Nuestro cuadrado mgico va a ser de 3 filas x 3 columnas, nueve casillas en total a
ocupar por las cifras del 1 al 9. La suma de todas las filas y de todas las columnas y
diagonales debe ser 15.

119

Lo que primero hay que hacer es disear, con un programa grfico, las 9 cifras:

Es importante realizar cada imagen con un tamao "redondo". En el ejemplo miden 100
x 100 pxeles.
A continuacin iremos insertando capas e introduciendo una imagen dentro de cada una
de las capas (observa que el cursor est dentro de la capa antes de insertar la imagen).

120

Es conveniente cambiar el tamao de la capa para adaptarla al contenido. Observa en el

panel de Propiedades que la capa tiene el mismo tamao que la imagen (100 x 100).

Desplazamos la primera capa a otro lugar de la pantalla para que se quede el icono
arriba, desplazado respecto de la capa que representa y de su contenido.
Vamos incorporando nuevas capas y, en cada una de ellas, colocamos un nmero.
Dreamweaver llamar a la primera capa Layer1 (y estar la imagen del 1) a la segunda
capa Layer2 (y estar la imagen del 2)... Es conveniente ser consciente del nombre que
Dreamweaver le va dando a cada capa (Inspector de Propiedades).
Desplazamos esta segunda capa con el nmero 2 cerca de la anterior para separarla del
icono que la representa.
Cuando hayamos acabado tendremos en la parte superior izquierda de la pgina los
nueve iconos que representan las nueve capas que hemos introducido.

121

Observa cmo, en el momento capturado por la imagen superior, est seleccionada la

capa 9 en la imagen y en el icono: . Puedes ir pinchando en todos los iconos de capa:
para comprobar que se seleccionan todos y cada uno de los nmeros. Ten abierto el
Panel de Propiedades y comprueba, una vez ms, el nombre de la capa.
A continuacin vamos a colocar los nmeros tal y como como van a estar en la solucin
final. Empezamos por la casilla superior izquierda que, en esta solucin, va a ser el 4.
Lo llevamos ms o menos al centro de la pantalla y le damos a Ventana >
Comportamientos

Se abrir la siguiente ventana:

122

Ahora pincharemos en el icono

comportamientos:

y se desplegar el siguiente catlogo de

De todos los comportamientos elegimos Arrastrar capa (si no tuvieses activo este
comportamiento al pinchar en la cruz, pincha dentro de la capa para seleccionar la
imagen y vulvelo a hacer).
Aparecer la siguiente ventana:

Tenemos que:

En Capa: Seleccionar la capa "Layer4" (Estamos colocando el 4). Muy

importante.
Movimiento: Dejamos Sin restricciones.
Pinchamos en Obtener posicin actual para que se rellenen los nmeros del
Destino de forma automtica.
Ajustamos a 20 pxeles del destino. Esto quiere decir que, cuando el visitante
suelte el objeto a menos de 20 puntos de la solucin, el objeto se colocar solo
de manera exacta en el sitio que acaba de ser obtenido al pinchar en Obtener
123

posicin actual. Lo que proporcionar belleza en la solucin final y sensacin de

seguridad al saber que es esa la posicin a la que haba que llevar el objeto (en
este caso el nmero).

Le damos a Aceptar y comprobamos nuestra capa en el panel de propiedades antes de

pasar al siguiente nmero:

Si seleccionamos la capa comprobaremos su situacin:

Vamos colocando cada uno de los nmeros procurando que estn perfectamente
alineados con sus vecinos. Podemos ajustar y modificar la posicin escribiendo
directamente en el panel de Propiedades la posicin Iz y Sup:
Si el primer nmero ha quedado a 250 puntos de la izquierda y a 100 puntos de arriba, y cada capa
(e imagen) ocupa 100 x 100, el segundo nmero deber quedar a 350 puntos de la izquierda y a 100
puntos de arriba, el tercer nmero a 450 puntos y a 100 puntos respectivamente. El siguiente
nmero ser el primero de la segunda fila, por eso deber estar a 250 puntos de la izquierda y a 200
puntos de arriba, el siguiente a 350 - 200, el siguiente a 450 - 200. Por ltimo la tercera fila: 250 300 ; 350 - 300 y 450 - 300.

Repetimos el proceso indicado para el nmero 4 de aadir comportamiento "arrastrar

capa" para cada uno de los nmeros segn se vayan quedando colocados en su posicin
124

"de solucin".Al nmero que vamos a colocar en el centro (el 5) no le adjuntamos el

comportamiento de "arrastrar capa". Su posicin ser inamovible: El visitante de la
pgina no lo podr mover de su posicin central.
Cuando lo hayamos acabado y, para que pueda ser un pasatiempo para el visitante,
tendremos que desordenar los nmeros: Cambiar los nmeros que nos parezca excepto
el del centro que no lo tocaremos. El visitante de la pgina recibir el cuadro tal como lo
hayamos guardado esta ltima vez, pero, al ser manipulado por l, el programa
"recordar" la posicin que tena cuando el cuadro estaba bien resuelto y cada imagen se
dejar llevar automticamente a su posicin correcta cuando el nmero se acerque
menos de 20 puntos y el jugador suelte el ratn.

125

Limpiar el cdigo generado por Word.

El procesador de texto Word permite la creacin de una pgina web a partir,
simplemente, de guardar el documento como pgina web.
El problema es que Word genera una tremenda cantidad de cdigo que no es, en
absoluto, necesario.
Veamos un ejemplo:
Escribo con Word 2000 el siguiente texto:

Que guardo como pgina web:

Vuelvo a abrir el documento y, pinchando en cualquier punto del mismo, con el botn
derecho del ratn accedo a su cdigo fuente:

126

Esto es un retazo de la tremenda cantidad de cdigo generado:

Bien, con el explorador de Windows, metemos en nuestra carpeta raz del sitio, este
documento:
127

y lo abrimos desde el Dreamweaver.

Una vez abierto le damos a Comandos > Limpiar HTML de Word...

Aparecer la siguiente ventana:

Le damos a Aceptar y aparece este mensaje de aviso:

128

Volvemos a darle a Aceptar. El documento ha quedado como estaba desde el punto de

vista de su aspecto desde el navegador, pero, ahora, contiene exactamente este cdigo:

An podramos meternos en el cdigo y cambiar el ttulo por una expresin menos

larga.

129

Publicar el sitio
Puede parecer un poco prematuro empezar ya a pensar en la publicacin de nuestra
pgina.
Tal como la tenemos apenas tiene un saludo de bienvenida... Carece de contenido y, pr
tanto, de inters. Pero este curso quiere hacer hincapi en ensear al interesado de
manera minuciosa los pasos que, por experiencia, estn descuidados en otros cursos o
tutoriales... Al alumno que est aprendiendo le cuestan, fundamentalmente, los primeros
pasos y los ltimos. Y, es en esos dos momentos, cuando necesita ms ayuda. As que
vamos a proceder a desarrollar los pasos necesarios para conseguir publicar nuestra
pgina.
Conseguir un servidor que nos la aloje.
Es la primera condicin: Conseguir un host u ordenador servidor que nos haga un hueco
en su espacio en internet. Hay algunos servidores que proporcionan espacio para webs
de forma gratuita sobre todo si son de carcter personal o sin intereses econmicos.
Este ordenador servidor nos tiene que proporcionar unas claves para la transferencia de
los ficheros y la direccin en la cual se encontrar nuestra pgina inicial.
El propio Dreamweavwer tiene la posibilidad de hacer conexin con el host remoto y
transferir los archivos. Sin embargo, puede ser necesario tener instalado en nuestro
ordenador un programa de FTP (file transfer protocol).
Transferencia desde Dreamweaver
Para transferir los ficheros desde el programa, en primer lugar hay que configurar los
datos del sitio. Para ello, le damos a Sitio > Editar sitios...

Se nos abrir la siguiente ventana:

130

Pulsamos el botn
(Nota: Pincha la pestaa

y pasaremos a:
en el caso de que no se abra por defecto)

131

Esta ventana define los Datos locales que ya estn bien. No hay que aadir nada.
Pulsamos Datos remotos y la ventana cambiar a:

Del men desplegable Acceso elegimos FTP:

Y rellenamos las cajas de texto con los datos adecuados. En el caso que hemos puesto
de ejemplo, la ventana quedara as:

132

Los datos no marcados se dejan como estn.

El Directorio del Servidor, o sea, la carpeta del servidor en la que se colocan los
archivos, vara de un servidor a otro, pudiendo ocurrir que no haya que poner nada al no
ser necesario que los archivos se coloquen dentro de ninguna carpeta.
Le damos a Aceptar y aparecer la ventana ya conocida de Definir sitios. En este
momento, como ya hemos definido nuestro sitio

133

Le damos a

y ya est.

Ahora procedemos a conectar telefnicamente con el servidor. Para ello pinchamos en

el botn

que cambiar a

y aparecern esta ventana:

Cuando ya haya conectado aparecer lo siguiente:

Observa que la vista ha cambiado a remota.

Cambiamos a Vista local en el men de opcin:

134

Seleccionamos el archivo que queremos transferir (en este caso el index.htm) y

. Aparecer el siguiente mensaje:
pulsamos la flecha

Los archivos dependientes son las imgenes incrustadas en una determinada pgina. En
nuestro caso, como no tenemos ninguna, le podemos decir que No pero es aconsejable
darle al S cuando tengamos imgenes (aunque siempre se pueden transferir por
separado).
Aparecer el mensaje:

Y, si todo va bien, en unos momentos nuestra pgina estar en el servidor.

Dreamweaver seala que la transferencia ha acabado seleccionando los archivos que se
transferan:

135

Puedes comprobarlo, de todas formas, yendo a Vista remota:

Y, mejor an, saliendo del programa y yendo a internet para comprobar que la pgina se
visualiza correctamente:

136