Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Tutorial de Dreamweaver Full
Tutorial de Dreamweaver Full
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:
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
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
est
Y le damos a Guardar.
Observa como en el lateral inferior derecho aparece el archivo dentro de la carpeta del
sitio:
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:
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
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:
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:
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...:
14
Le damos a Abrir
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:
16
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:
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.
18
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:
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:
22
23
24
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
27
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.
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
Pinchamos en el icono
abrir:
de
y se
29
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
31
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
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 í) 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:
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
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
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:
Pulso intro
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 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:
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:
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
41
Pulsamos
Pinchamos en la pestaa
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
Algo as:
43
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
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.
47
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
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
51
52
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
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:
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:
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
57
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
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
.
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.
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
en las
(rea de texto):
Lo introducimos:
62
63
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:
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:
64
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
de
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:
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
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
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:
71
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:
72
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
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:
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:
Volvemos a Aceptar
Ahora pinchamos en el icono
75
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
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
78
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.
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
Las mezclas y combinaciones de cantidad van dando origen a los diferentes colores.
ffffff
0000ff ffff00
cccccc ff00ff
82
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:
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...
86
87
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:
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
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
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
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
95
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:
97
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
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:
101
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
Le cambiamos el nombre:
103
Y le damos a Aceptar.
Repetimos el proceso para todos los dems elementos editables. ste es el resultado
final:
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
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...:
107
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:
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
. Se abrir la ventana:
111
Podemos emplear esta herramienta cuntas veces haga falta para las primeras meta tags:
Title, Author, Subject :
112
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
. 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.
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
La primera herramienta
La segunda herramienta
La tercera herramienta
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
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
118
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
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
122
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:
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.
125
Vuelvo a abrir el documento y, pinchando en cualquier punto del mismo, con el botn
derecho del ratn accedo a su cdigo fuente:
126
Bien, con el explorador de Windows, metemos en nuestra carpeta raz del sitio, este
documento:
127
128
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...
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:
Y rellenamos las cajas de texto con los datos adecuados. En el caso que hemos puesto
de ejemplo, la ventana quedara as:
132
133
Le damos a
y ya est.
que cambiar a
134
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:
135
Y, mejor an, saliendo del programa y yendo a internet para comprobar que la pgina se
visualiza correctamente:
136