1. TUTORIAL DE MACROMEDIA DREAMWEAVER
Crear el sitio.
Lo primero que tenemos que hacer es crear una carpeta que será el sitio donde residan
nuestras páginas y todos los archivos que vayamos añadiendo. Es recomendable que
esta carpeta "cuelgue" directamente del disco duro C. Así que pinchamos en Sitio, en la
Barra de Menús de arriba, y se desplegará el siguiente menú:
Elegimos Nuevo sitio... y se abre esta otra ventana:
1
2. Hacemos doble clic en el icono de la Carpeta raíz local. Se desplegará la ventana de
búsqueda de directorios. Elegimos C y le damos al icono para crear una nueva
carpeta.
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 habrás
vuelto a la ventana de Definición del sitio:
2
3. Le das al icono y, ahora sí, seleccionas la carpeta que acabas de crear, le das a
, aparecerá esta ventana:
Le das a y volverás a la ventana de Definición del Sitio pero ahora ya con la
carpeta creada y seleccionada como Carpeta raíz local:
Ponemos el nombre al sitio. Por ejemplo Mi primer sitio. Lo demás lo dejamos como
está y le damos a Aceptar.
3
5. Observa el lateral inferior derecho:
Aparece abierto el sitio que acabamos de crear: que está alojado en una
carpeta denominada mi_primer_sitio que está en el disco duro
C:
5
6. Crear el primer documento.
En la ventana múltiple ya se ha creado un primer archivo al que Dreamweaver llama
Untitled-1: Observa la pestaña inferior izquierda del espacio mayor vacío:
Por otro lado, el documento (no el archivo) lo que será la página, tampoco tiene
título: . 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 añadirá la extensión .htm de página web.
Le damos a Archivo > Guardar
Aparecerá la ventana Guardar como:
Le ponemos el nombre index:
6
7. Y le damos a Guardar.
Observa como en el lateral inferior derecho aparece el archivo dentro de la carpeta del
sitio:
7
8. Y, en la pestaña inferior del documento ya aparece el nuevo nombre (index)que le
hemos dado al archivo: .
Falta poner el título al documento. Lo vamos a hacer en el próximo apartado.
8
9. La primera página
Simplemente empezamos a escribir en el espacio vacío.
Podemos empezar dando la bienvenida a nuestros visitantes. Escribimos pulsando Enter
para saltar a la siguiente línea:
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 triángulo
en flecha está señalando hacia la derecha. Simplemente haciendo clic en él, pasa a la
posición anterior.
Para efectuar los cambios que deseemos, previamente seleccionaremos el texto al que
queramos hacer referencia:
9
10. Por ejemplo a la primera línea le hemos aplicado un tamaño de Encabezado 1. No
hemos modificado el tipo de fuente, ni el tamaño (de forma explícita). Le hemos puesto
de color rojo y lo hemos centrado en la línea.
Ahora hacemos cambios en la segunda línea:
Ahora hemos cambiado el tipo de fuente, el tamaño, el color. Lo hemos puesto en
negrita y centrado.
Para finalizar, vamos a poner un título al documento, por ejemplo, Página de saludo. Lo
escribimos directamente en la ventana Título:
.Observa cómo ha cambiado la barra de título:
En primer lugar aparece el nombre del documento: Página de saludo. En segundo lugar
la carpeta raíz: mi_sitio_web y finalmente, el nombre del archivo: index. El asterisco
que viene a continuación nos recuerda que el documento no ha sido guardado después
de los cambios efectuados. Así que es lo que podemos hacer ahora: Archivo > Guardar:
10
11. El asterisco habrá desaparecido:
Ahora vamos a poner un color de fondo a la página. Para ello pinchamos en cualquier
punto vacío de la página con el botón derecho del ratón y elegimos Propiedades de la
página... del menú contextual:
Aparecerá la siguiente ventana:
11
12. 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 página tiene, ahora este aspecto:
12
13. 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 página 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 página.
Otra forma conveniente es ver nuestra página 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 página: index.htm
Hacemos doble clic sobre el archivo y visualizaremos nuestra página con el navegador
que tengamos predeterminado. En este caso, como vemos por el icono, es el Explorer.
Conviene comprobar la página, también, con algún otro navegador, para
asegurarnos de que no hay problemas de visualización: A veces hemos cometido un
fallo que un navegador detecta y otro no...Algunas de las funciones un poco más
sofisticadas, no son igualmente soportadas por todos los navegadores (hojas de estilo,
comportamientos,...). Si el otro navegador es el Netscape (el segundo más conocido), lo
13
14. buscamos y abrimos.Probablemente nos pedirá que iniciemos la conexión telefónica.
Le decimos que no y, cuando esté ya la primera página del navegador abierta sin
mensajes, le damos a Archivo > Abrir página...:
Nos aparecerá la ventana Abrir página. Le damos a Elegir archivo...
Y buscamos en el disco duro la carpeta mi_sitio_web
14
15. Le damos a Abrir
Haciendo doble clic sobre el icono para abrirla:
Aparecerá esta ventana.Le damos a Abrir estando seleccionado Navigator.
La página se ve así con el Netscape:
15
16. A partir de este momento conviene minimizar (no cerrar) el Netscape, para tener a mano
la comprobación de los cambios que vayamos realizando también con este navegador.
La Barra de Tareas debería tener un aspecto similar a éste:
El botón de Dreamweaver ,el botón del Explorer y el del Netscape.
16
17. Insertar una tabla.
Desde Insertar de la barra de Menús, elegimos Tabla.
Aparecerá una ventana similar a ésta:
Podemos determinar el número de Filas, el número de Columnas, el Ancho de la tabla
en píxeles 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 píxeles y se pueden quedar vacíos en el caso de que queramos que tanto el
relleno de celda como el espacio de celda sea el mínimo 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 píxeles y un relleno de celda de 5 píxeles:
Lunes Martes Miércoles Jueves Viernes
Mañana
Tarde
17
18. Modificar la tabla.
Si ponemos el cursor en cualquier punto de la tabla, en la barra de estado,
encontraremos una información similar a ésta:
Son las etiquetas del lenguaje HTML que veremos más 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 harán referencia a la celda en la que, en ese momento, esté el cursor:
Desde ese panel podríamos cambiar las propiedades de la celda en cuestión.
Si, desde la Barra de Estado pulsamos la etiqueta <table>, se seleccionará toda la tabla.
Si ahora vemos las propiedades, éstas serán las propiedades de la tabla y, desde allí,
podremos cambiar las propiedades de la tabla y su configuración.
Podemos modificar el número de Filas en Filas, el número 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 alineación en Alinear, el grosor del borde en
18
19. 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 algún cambio en la tabla:
Hemos añadido una fila, alineado al centro, incrementado el grosor del borde a 5
píxeles, establecido un color de fondo y otro diferente para el borde. El resultado es
éste:
Lunes Martes Miércoles Jueves Viernes
Mañana
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
20. Si pulsamos, por ejemplo, el botón el texto que esté escrito en las celdas de esa fila se
colocará centrado en cada una de las celdas. Pulsando, por ejemplo, el botón 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 ratón 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 agruparán en una sóla:
Podemos añadir texto o variar las propiedades de las celdas por los procedimientos
descritos:
20
21. Hemos seleccionado por el método de arrastrar el cursor las celdas anteriores para
cambiar el color de fondo:
El resultado es:
21
22. Imágenes
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 imágenes pueden estar sueltas en la carpeta raíz 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, están nuestras imágenes.
Para crear una carpeta dentro de la carpeta raíz del sitio, pulsamos la pestaña 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 imágenes:
Por ejemplo, podemos llamarla imag:
22
23. Podemos llevar las imágenes a la carpeta por cualquiera de los procedimientos
habituales en Windows. Si por ejemplo, tal como indicábamos 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 menús y soltamos en Imagen:
Aparecerá la ventana Seleccionar origen de imagen:
Pinchamos en Escritorio y seleccionamos la imagen: obras
23
24. Aparecerá el mensaje de advertencia diciéndonos que la imagen no está en la carpeta
raíz del sitio:
Le decimos que Sí y se abrirá la ventana Copiar archivo como
24
25. 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
26. Una imagen puede colocarse también como fondo de una página, o de una tabla, o de
una celda. Por ejemplo, en la tabla que hemos creado en el apartado anterior
Lunes Martes Miércoles Jueves Viernes
Mañana 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. 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 propósito de las imágenes, es muy importante que controlemos el tamaño de las
mismas para que no tarden mucho tiempo en su descarga cuando alguien visite nuestra
página. Cuando insertamos una imagen aparece, en el cuadro de diálogo, una
información sobre el tamaño y el tiempo de descarga aproximado. Otra forma de ver
estos tamaños es pulsando el icono (Ampliar/contraer)de la franja lateral derecha. La
ventana se ampliará proporcionando información sobre los tamaños de los archivos:
27
28. Así vemos que la imagen obras ocupa 3 KB lo cual es un tamaño aceptable. En cambio
el fondo1 ocupa mucho espacio: 24 KB. Esta imagen sería adecuado sustituirla por otra
que fuese bastante más ligera.
Observa que los dos formatos de imagen que más abundan (precisamente porque no
ocupan demasiado) en Internet, son los formatos gif y los jpg. Los gif se emplean para
imágenes con pocos colores y los jpg para imágenes, como fotografías, que requieren
más 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 imágenes 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 páginas.
(Nota: Dreamweaver hace un cálculo del tamaño por aproximación redondeando al
valor en KB más próximo por arriba -17,2 KB se convierte en 18 KB por ejemplo-. Si
deseas ver el tamaño exacto lo puedes hacer desde el explorador de Windows: te situas
con el botón derecho del ratón encima de la imagen y le das a Propiedades)
Este gif se ha sacado de la siguiente dirección:
http://ausmall.com.au/freegraf/freegrfa.htm
Aunque hay muchos otros sitios web que proporcionan gifs animados y sin animar de
forma gratuita.
28
29. Vínculos
Los vínculos, hipervínculos, enlaces, hiperenlaces (todas estas palabras designan el
mismo concepto) es uno de los elementos más importantes del lenguaje HTML con el
que se construyen las páginas web.
Vínculos a otro documento del mismo sitio
Es, quizá, el vínculo más 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 de la sección Vínculo dentro del panel de
Propiedades.
Por ejemplo. Vamos a hacer que la frase ir a la página anterior sea un vínculo con la
página anterior de este curso de Dreamweaver. Seleccionamos la frase
abrimos el panel Propiedades, si no está abierto, pinchamos en :
Pinchamos en el icono de y se
abrirá:
29
30. 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: Imágenes. El documento se abrirá en su comienzo.
Vínculos a documentos externos
Es cuando el vínculo nos lleva a una página de internet ajena a nuestro sitio. Hay que
hacer lo mismo: Seleccionar el elemento que va a ser el activador del vínculo y, ahora,
escribir en la caja de texto la dirección completa del sitio.
Supongamos que queremos hacer que esta imagen
sea un vínculo a la página del CNICE. Pues bien, la seleccionamos y escribimos la URL
de la página http://www.cnice.mecd.es en la caja de texto:
30
31. Como en el caso anterior, comprobaremos que funciona dándole a la tecla F12 y
comprobando con el navegador
Vínculos a otras partes del mismo documento
Es cuando queremos que al pinchar en el activador se nos coloque al principio de la
página, 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 vínculo.
Por ejemplo: Vamos a hacer vínculos 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 fijación con nombre.
Lo hacemos con el comienzo: Situamos el cursor delante del título del documento
(delante de Vínculos) y pinchamos en la barra de menús Insertar > Punto de fijación con
nombre
Aparecerá un cuadro de diálogo para que introduzcamos el nombre que le queremos
dar:
31
32. Ponemos 1 y le damos a Aceptar:
Aparecerá este icono justo en el sitio donde habíamos colocado el cursor y que es el
punto al cual se irá cuando activemos el enlace. Este icono no se visulizará cuando
veamos la página 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 vínculos con otros documentos del mismo sitio (2)
Ir a vínculos externos (3)
Ir a vínculos con otras partes del mismo documento (4)
Ir a vínculos a puntos concretos de otros documentos del sitio (5)
Seleccionamos las frases y en la caja de texto del vínculo escribimos #1 , #2 , ... según
vaya correspondiendo
32
33. Vínculos a puntos concretos de otros documentos del mismo sitio
Los dos tipos de vínculos 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
fijación con nombre en el documento correspondiente, se establece el enlace escribiendo
el nombre de la página con su extensión .htm seguido de almohadilla y el nombre del
punto de fijación.
Ir a Declaración de Intenciones
Ir a Instalar el Programa
Ir a Abrir el Programa
Ir a Crear el Sitio
Ir a Crear el primer documento
Vínculos de correo electrónico.
Se puede establecer también vínculos de correo electrónico 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 expresión o frase cualquiera)
con su dirección de correo electrónico. Una forma de hacerlo es:
Colocar el cursor en el punto en el que queramos que esté el enlace y darle a Insertar >
Vínculo de correo electrónico:
Aparecerá el cuadro de diálogo en el que pondremos el texto que queramos que sirva
como enlace y la dirección de correo electrónico:
33
34. Éste es el resultado:
Escríbeme
Cuando un visitante de nuestra página pinche sobre este vínculo se abrirá su programa
de correo y podrá enviar un mensaje a la persona a cuya dirección hemos vinculado el
enlace.
13.- Una vista al código fuente
Podemos aprovechar este tema para echar un vistazo al código que Dreamweaver va
generando automáticamente.
Si no tienes mucha idea de a qué nos estamos refiriendo pincha aquí:
código html. Si ya sabes, aunque sólo sea un poco, de lenguaje html, continúa leyendo.
Vamos a ver cómo ha quedado el código para ese enlace de correo electrónico:
Selecciono la palabra Escríbeme y, una vez seleccionada, pincho en el botón de la barra
de herramientas: . Veremos el código fuente de nuestra página. Entre el resto del
código aparecerá:
Vemos la palabra seleccionada Escríbeme (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 código. Primero coloco la imagen: . La selecciono y me voy a ver el
código fuente pinchando en . Veré lo siguiente:
Que me está diciendo que la imagen (img) se encuentra (src source en inglés) en la
carpeta ima , se llama correo_sonrisa y tiene formato gif. Después viene su medida en
píxeles en anchura y altura.
34
35. Pues bien, puedo colocar las etiquetas de enlace de correo anteriores: <a
href="mailto:apuente@roble.cnice.mecd.es"> delante y </a> detrás:
Dándole a Archivo > Guardar cuando hayas acabado y volviendo a la vista normal
(Vista diseño) pinchando en
De esta manera he conseguido que la imagen anterior se convierta en un enlace al
correo electrónico. Comprueba que funciona dándole a la tecla f12.
(Nota: Al ir escribiendo directamente el código, Dreamweaver MX nos va ayudando a
partir de las primeras letras que vayamos introduciendo, proporcionándonos los posibles
fragmentos de código que pudiéramos ir necesitando. Simplemente haciendo doble clic
sobre el correcto, éste se incorpora al código)
Salto de línea.
Probablemente a estas alturas del curso ya te habrás encontrado con la necesidad de
separar dos líneas 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 línea
Vamos a observar el código que se genera cuando pulsamos el intro (lo pulso):
Observa que ha colocado el párrafo anterior entre la etiqueta <p> con los atributos de
estilo "texto"(esto lo veremos más adelante) y alineación izquierda y la etiqueta de cierre (no
imprescindible) </p>
Vamos ahora a insertar un salto de línea. (Lo inserto)
Observamos el código que se ha escrito:
35
36. En el momento que hemos insertado el salto de línea se ha escrito la etiqueta <br> del
inglés break, romper.
Este salto de línea es una utilidad que, siendo muy usada, parece que está un poco
escondida en este editor.
36
37. Listas de cosas.
Cuando queremos realizar una enumeración 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 enumeración, vuelvo a pulsar el mismo botón:
Veamos el código que se ha generado:
Se introduce la lista con la etiqueta <ul> unordered list y después 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 botón :
Estas son mis aficiones por orden de preferencia:
1. El deporte de aventura.
2. La música rock
3. Salir de juerga con mis amigos
Veamos el código 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
38. Sangrar el texto.
Si deseo que una determinada línea comience algo más allá del margen, no lo
conseguiré dándole al espaciador. Tendré que pulsar la tecla que permitirá que el
texto se sitúe sangrado desde el margen izquierdo. Puedo pulsarlo varias veces.
Hacemos una prueba pulsándolo cuatro veces:
He pulsado 4 veces este botón . Y pulso intro:
Ahora el margen se guarda. Pulso intro:
Para volver al margen inicial pulsaré la tecla Pulso intro
Pulso 4 veces la tecla . Esta línea ha vuelto al margen inicial.
Veamos el código generado:
Cada vez que pulso el botón se ha generado la etiqueta <blockquote> que quedaba sin
cerrar. El botón se encargaba de ir cerrando cada una de las etiquetas anteriormente
abiertas.
Otra forma de hacer esto de manera más manual (y más precisa o exacta) es
introduciendo desde el código un carácter especial de avance de un espacio. Es el
carácter no break space. Podemos poner tantos como haga falta para conseguir
nuestros objetivos:
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
aaaa
38
39. aaaa
aaaa
Este es el código que, esta vez, hemos escrito directamente:
No olvidarse de guardar los cambios dando a Archivo > Guardar )
39
40. Marcos
Se denomina Marcos o Frames a una forma de organizar los diferentes documentos de
nuestro sitio web.
Una o más partes de la pantalla permanecen con contenidos fijos y otra parte va
cambiando en función 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 título del sitio.
• La parte de la izquierda que contiene los enlaces de los diferentes documentos
que forman nuestro sitio web.
• La parte más amplia donde se van a cargar los enlaces que pulsemos.
Para crear una página con marcos, debemos saber que:
• La estructura de la página 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
raíz marcos que creo en el disco duro C.
40
41. 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
42. Pulsamos para que se despliegue:
Pinchamos en la pestaña 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 página. Si no
estamos de acuerdo con la anchura de los marcos podemos modificarlo simplemente
situándonos con el cursor en el borde y arrastrando.
42
43. 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 título.
• Frame del índice.
• Frame principal.
Algo así:
43
44. 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
45. Observa que a la carpeta raíz 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, también, que aparece, aparte de la carpeta _notes, un documento denominado
untitled (más 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 página que se va a abrir al principio con todos los marcos cargados.
Observa el cordón que recorre todo el espacio, eso nos indica que es el conjunto
de marcos lo que estamos guardando.
45
46. Una vez cambiado el nombre y guardado, aparecerá la siguiente ventana:
Observa que ahora el cordón está rodeando el frame de la izquierda, el frame de
los enlaces. Además, 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
47. Ahora el cordón está rodeando al marco superior. De nuevo observamos el
nombre de Dreamweaver: UntitledFrame... Estamos guardando el marco del título.
Podemos llamarlo titulo.
Le damos a Guardar y ya no aparecen más 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 veíamos en la carpeta marcos.
Veamos los archivos que tenemos:
47
48. 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. Botón derecho del ratón: Renombrar
Al haberle cambiado el nombre, aparecerá la siguiente ventana de actualización de los
vínculos:
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 están dentro de
la carpeta del sitio:
48
49. 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 ratón en cualquiera de
los bordes internos de separación 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 código fuente generado:
49
50. Nos fijamos en la etiqueta <frameset rows"80,*" . Esto nos está diciendo que la primera
estructura de marcos es una división del espacio en una fila de 80 píxeles y "lo que
quede" (eso indica el asterisco). El resto de esa línea lo dejamos de momento.
La siguiente línea <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 sólo hubiese esa división en dos filas, ahora vendría 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 línea:
<franeset cols="80,*: Dos columnas, la primera de 80 píxeles 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 línea cuando se visite el sitio. Esto se puede modificar con el panel
de propiedades del conjunto de marcos:
50
51. 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
52. Seleccionamos el 1 y pinchamos en la carpeta del panel de propiedades:
52
54. Elegimos uno (que tenemos que tener preparado de antemano, lógicamente) y le damos
a Aceptar.
A continuación tenemos que elegir el marco de destino en Dest:
54
55. Elegimos mainFrame
Hacemos lo mismo para el enlace del 2: Lo seleccionamos le damos a la carpeta del
vínculo. 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
56. Formularios
Vamos con una de las herramientas más útiles en toda página web. Es aquella que
recoge información del visitante y, o bien se almacena en el servidor, o bien se nos
envía a través de una dirección de correo electrónico.
Son los formularios.
Para insertar un formulario: Pinchamos en para que se desplegue el panel:
si no está ya desplegado, y elegimos la pestaña
Colocamos el cursor en el sitio donde queramos que se coloque el formulario y
pinchamos en el icono .
Aparecerán los límites del formulario representados por un rectángulo cuyos lados son
una línea discontinua de color rojo:
Ahora, por motivos estéticos, vamos a colocar una tabla dentro del formulario con dos
columnas y varias filas: Situamos el cursor dentro del rectángulo de líneas 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
57. Campo de texto.
Vamos a hacer, como ejemplo, un formulario que recoja la opinión sobre esta página
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 número de caracteres máximo, si
queremos que conste de una o varias líneas, si queremos que se oculte al ser escrito
(tipo contraseña), si queremos que aparezca un texto inicialmente y, lo que es más
importante, el nombre que le queremos dar: Quitamos textfield y ponemos: nombre
Botón de opción.
Vamos ahora a preguntar la opinión sobre la página. En la segunda celda de la columna
de la derecha, insertamos un botón de opción .
Nuestro formulario tendrá este aspecto:
57
58. Y, debajo, aparecerá el panel de propiedades del botón:
En la primera casilla de la izquierda borramos radiobutton y escribimos el nombre de la
opción global: opinion En la segunda casilla al lado de Valor activado, escribimos lo
que corresponda con esta primera opción que puede ser: muy buena. Podemos elegir
que esta opción esté activada o desactivada de entrada. Tenemos que escribir a la
derecha del botón el texto que verá el visitante: Muy buena, excelente. El formulario irá
quedando así:
Tenemos que seguir insertando los demás botones de opción correspondientes a esta
misma cuestión. Por lo tanto los siguientes botones se deberán seguir llamando opinion
y en cada caso habrá que escribir lo que corresponde con esa opción.
Para que el segundo botón no quede muy separado del primero le damos un salto de
línea ¿recuerdas? Insertar > Caracteres especiales > Salto de línea
El segundo botón, por ejemplo, debería quedar así:
58
59. Ponemos un tercer botón con la opción de que la página es Mala.Bastante mala: Ya
sabes el mismo nombre: opinion y como valor activado: mala.
Si queremos colocar otra pregunta de opción deberemos llamarla de otra manera para
que no se excluyan las selecciones. Por ejemplo podemos preguntarle al visitante sobre
sus conocimientos de informática. El nombre de la opción podría ser conoc_infor (por
ejemplo)
El formulario va teniendo este aspecto:
59
60. Casillas de verificación.
Vamos a insertar ahora casillas de verificación (permiten elegir varias opciones). En
nuestro caso, podríamos hacerlo con las cosas que le han gustado o llamado la atención
de este curso de Dreamweaver.
Introducimos la pregunta en la siguiente celda de la izquierda ¿Qué es lo que más te ha
gustado del curso?. En la celda de la derecha introducimos la primera casilla de
verificación 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 más construida para el formulario visible.
Damos un salto de línea e introducimos nuevas casillas, siempre con el mismo nombre,
gustado, y una frase nueva como Valor activado que debe ser una expresión corta de lo
que escribamos en el formulario. Esta parte del formulario podría quedar así:
60
61. Listas y menús.
A continuación, 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
62. 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, sólo lo harán al lanzar la página con el navegador:
Podemos incluir una campo de texto para comentarios. Lo podemos hacer con el botón
de Campo de texto definiendo en las
propiedades, o bien, dando directamente al botón: (Área de texto):
Lo introducimos:
62
63. Podemos introducir ahora (campo de texto) la dirección de correo electrónico del
visitante. En este caso, podemos poner un Valor inicial:
Botones (Borrar y Enviar).
Finalmente, tenemos que insertar un botón para enviar el formulario y, si lo deseamos,
un botón para borrar todo lo que haya podido escribir el visitante. Empezamos por el de
borrar:
Vamos a colocar el botón 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 botón de Enviar.
Nosotros modificamos de la siguiente forma:
63
64. A continuación, 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 acción que
queremos que haga una vez relleno. Para usuarios personales, la opción más habitual es
el envío por correo electrónico de los datos obtenidos. Esto se hace colocando el cursor
en cualquier punto del formulario y eligiendo <form> desde la barra de estado:
. Aparecerán las propiedades del formulario:
En Acción escribimos mailto:direcciondecorreo. Por ejemplo en mi caso, escribiría
mailto:apuente@roble.pntic.mec.es
De todas formas, para que el envío del formulario pueda leerse como un mensaje de
correo ordinario, hay que escribir en la etiqueta del formulario del código fuente el
atributo enctype="text/plain".
Podemos intentar seleccionarlo del menú: Si no está
allí tenemos que escribirlo directamente en el código. Seleccionamos el formulario
colocando el cursor y pulsando <form> de la barra de estado. Pulsamos el botón
para acceder al código:
Incluimos lo acordado:
Vemos, de nuevo, las propiedades del formulario:
64
65. 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 electrónico.
Antes de dar por concluido el formulario podemos hacer alguna modificación en la
tabla, añadiendo algún 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
66. Estilos CSS
Los Estilos en cascada, estilos css, nos permiten controlar los parámetros 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 más rentable de trabajar esta
herramienta. Por ejemplo el Tutorial Dreamweaver MX de iniciación al editor, estaba
controlado por una hoja de estilos que definía una serie de valores de color, forma,
tamaño, para unas cuantas de las palabras y textos empleados en el sitio. Definir así los
estilos de un sitio le da una coherencia y sensación de unidad que, de otro modo, es
difícil 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 estén 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
67. 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. (Más adelante explicaremos la tercera opción: 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 están 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 más, le damos a Aceptar. Aparecerá la
siguiente ventana:
En esta ventana nos aparece la carpeta raíz 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
68. Se abrirá la siguiente ventana para que definamos el estilo:
Por ejemplo:
68
69. Y le damos a Aceptar
Podemos observar la inclusión del estilo que acabamos de definir:
Y, por otro lado, vemos la hoja de estilos dentro de los archivos del sitio:
69
70. Si hacemos doble clic sobre el icono veremos los estilos definidos en
nuestra hoja:
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 parámetros definidos.
Si una vez definido el estilo, no nos gusta, podemos modificarlo haciendo doble clic en
el estilo correspondiente .
Para definir otro estilo, dentro de la ventana le damos al icono y se abrirá
la ventana Nuevo estilo. Le ponemos un nombre, por ejemplo, .texto1 y lo definimos
Esta es la definición que he hecho:
70
71. Este estilo lo quiero aplicar a todos los párrafos que escriba en los documentos. Para
hacerlo bastará colocar el cursor en el inicio del párrafo y hacer clic sobre el estilo
. Observa que, si dentro del párrafo, 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 títulos 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 desplegándose
71
72. 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 ningún otro sitio. Le damos a Examinar... y se abre:
Seleccionamos nuestra hoja1 y le damos a Aceptar:
72
73. Volverá a salir la ventana anterior con la hoja ya seleccionada:
Le damos a Aceptar.
En el desplegable Diseño se habrán colocado todos los estilos definidos en la hoja1 que
acabamos de vincular:
Y podremos aplicar los estilos creados a las palabras o párrafos que nos interese.
Observad que el estilo texto1 se aplica automáticamente conforme pulsamos la tecla
Enter y creamos un nuevo párrafo.
73
74. Un vistazo al código fuente generado
Pinchamos en el icono para ver el código 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
Más 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 párrafo o al texto seleccionado:
Los estilos que hemos definido han sido de la categoría tipo:
Como se puede ver hay un montón más de categorías que se pueden definir.
Nosotros, de momento, vamos a pasar a ver los estilos que redefinen una etiqueta
HTML.
74
75. 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
76. 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, desconocerán algunas o
muchas de las etiquetas que aparecen en este listado. No es obligatorio conocerlas y,
además, Dreamweaver las escribe por nosotros. Nosotros, sólo a modo de ejemplo,
vamos a redefinir la etiqueta <a> que es la etiqueta de los enlaces. Bien; la
seleccionamos:
76
77. y le damos a Aceptar. Aparecerá la ventana de Definir el estilo:
Definimos el estilo y elegimos Decoración: ninguna:
77
78. Le damos a Aceptar.
¿Qué hemos hecho? Hemos indicado al programa que, aparte del tipo de fuente, del
tamaño y del grosor, cuando haya un enlace, el vínculo 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, también en los creados
anteriormente.
Ahora vamos a añadir un efecto a este estilo: Queremos que cuando pase el puntero del
ratón por el vínculo, éste se subraye.
Para ello volvemos a pinchar en el icono y ahora marcamos Usar selector CSS
En Selector: elegimos a:hover
78
79. Le damos a Aceptar y aparecerá la ventana de Definición 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 características
de estilo definidas. Sin embargo, si pinchamos en Editar estilos, sí aparece la
redifinición de la etiqueta <a> :
79
80. Haciendo doble clic sobre este estilo, o sobre cualquier otro, podremos modificar las
características del mismo.
Como se ha podido intuir, las hojas de estilo tienen una gran potencialidad y sus
posibilidades son muchas. Nosotros sólo nos hemos asomado a unas pocas de las
utilidades que tiene esta herramienta. Se deja para el lector la experimentación y
profundización a partir de las pistas dadas.
80
81. 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 podemos crear nuestros propios
colores:
Códigos de color.
Supongamos que quiero cambiar el color de esta palabra. La selecciono y la pongo de
color más o menos azul.
Ahora voy a ver qué ha pasado en el código fuente:
El código del color está formado por 6 símbolos alfa-numéricos precedidos del símbolo
#.
81
82. Los símbolos alfa-numéricos son las diez cifras numéricas y las seis primeras letras del
alfabeto ordenadas de la siguiente forma:
0 1 2 3 4 5 6 7 8 9 a b c d e f
Siendo 0 el valor mínimo y f el valor máximo.
A su vez los seis símbolos se dividen en tres grupos de dos símbolos:
• El primero de dos símbolos indica la cantidad de rojo (00 es el mínimo y ff el
máximo)
• El segundo de dos símbolos indica la cantidad de verde (00 es el mínimo y ff el
máximo)
• El tercero de dos símbolos indica la cantidad de azul (00 es el mínimo y ff el
máximo)
Las mezclas y combinaciones de cantidad van dando origen a los diferentes colores.
ffffff 000000 ff0000 00ff00 0000ff ffff00 cccccc ff00ff
Es el denominado código hexadecimal.
Este código también 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 código hexadecimal #ffebcd y es el siguiente color
Observa que he rellenado la celda con el color escribiendo en el inspector de
propiedades el código nombre del color:
82
83. Imagen de sustitución (roll-over).
Es una imagen, vínculo a otro documento, que cambia de aspecto al pasar el puntero del
ratón por encima de ella.
Primeramente deberemos tener, lógicamente, preparadas las dos imágenes y guardadas
en cualquier parte del ordenador.
Le damos a Insertar > Imágenes interactivas > Imagen de sustitución
Aparecerá la siguiente ventana:
En el Nombre de la imagen podemos dejar la que aparece por defecto.
En la Imagen original e Imagen de sustitución le damos a Examinar para buscar las
imágenes que tenemos guardadas en el ordenador.
El programa nos avisará que las imágenes no están guardadas dentro de la carpeta raíz
del sitio y que debemos guardarlas dentro de esa carpeta:
83
84. Le decimos que Sí y guardamos las imágenes dentro de nuestro sitio en la carpeta que
hayamos creado para dejar las imágenes (o sueltas dentro de la carpeta raíz del sitio).
Después escribimos la URL completa de la página a la cual queremos enlazar la imagen
en el caso de que el enlace sea a un documento externo. O bien le damos al botón
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 Enseñanza Telemática del MECD. Para
ver el efecto pulsamos la tecla F12 y lo probamos con el navegador.
84
85. Álbum de fotos.
Una opción muy interesante es la creación de un álbum de fotos.
Para hacerlo es necesario tener instalado en el ordenador una versión de Fireworks la
herramienta gráfica 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 fotografías guardadas. En el caso que vamos a poner de
ejemplo, las fotos están guardadas en una carpeta en D con el nombre fotos_ayerbe. Son
fotografías del entorno de Ayerbe (Huesca) el sitio donde nací hace ya unos cuántos
años...
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 página de Macromedia para descargar una demo del programa.
Aparecerá la siguiente ventana:
85
86. Ponemos un Título a nuestro álbum y una información de subencabezado, si se desea.
Examinamos la carpeta origen de las imágenes (en este caso en D: fotos_ayerbe):
Le damos a Abrir y aparecerá la carpeta:
86
87. Aunque aparezca vacía, la carpeta contiene las imágenes previamente guardadas. Le
damos a Seleccionar.
A continuación pinchamos en Examinar... de la Carpeta de destino. Se abrirá la carpeta
raíz del sitio y allí deberemos crear una nueva carpeta con el nombre que queramos, por
ejemplo, album1
87
88. Para crear la carpeta, pinchamos en el icono . Inmediatamente aparecerá la nueva
carpeta a la que cambiaremos el nombre tal como hemos quedado por
album1.
El tamaño de la miniatura puede estar bien (lo podemos modificar si queremos).
Desactivamos la casilla de mostrar nombre de archivos.
Elegimos el número de columnas que deseemos tenga la página inicial.
Ésta ha sido mi ventana completada:
Le damos a Aceptar y saltará el Fireworks procesando la información de cada imagen.
Al final aparecerá el mensaje:
Y se presentará en pantalla la primera página 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 página.
88
89. 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 imágenes del álbum)
• pages (que contiene las paginas que soportan cada una de las imágenes)
• thumbnails (que contiene las miniaturas)
Y el archivo es el index.htm. Es la primera página que contiene las miniaturas de todo el
álbum.
Si abrimos el index.htm (de la carpeta album1) veremos algo así:
89
90. 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 página web.
Una vez arreglada la primera página, abrimos cada una del las pages y vemos cómo se
han creado:
90
91. Evidentemente el nombre del archivo (Aguero_40.jpg.jpg en este caso) sobra. Así que
lo eliminamos.
La imagen, por otro lado, debería estar centrada. Una forma buena de hacerlo es
seleccionar todo: Pinchamos en cualquier parte dentro de la tabla y, después en .
Se seleccionará toda la tabla que contiene el título, los enlaces para navegar y la imagen.
Después desde el inspector de propiedades de la tabla le decimos Alinear: Centro.
91
92. Botones Flash.
Los botones flash son elementos animados que sirven como enlaces.
Para ver las posibles opciones de botones pincha aquí.
Para insertar un botón le damos a Insertar > Imágenes interactivas > Botón Flash
Aparecerá la siguiente ventana:
En Estilo eliges el botón que quieras. En Muestra verás el botón elegido.
En Texto del botón escribes lo que quieres que aparezca en el botón.
Puedes elegir el tipo de fuente y el tamaño.
92
93. En Vínculo escribe la dirección URL completa si es un vínculo externo, o dale a
Examinar y elige el archivo en caso de ser un vínculo 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 botón ( a veces, según el botón, 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 botón se habrá colocado en el sitio elegido.
Vamos a colocar un botón a continuación de esta línea con enlace a otra página de este
sitio:
Esto ha sido lo que he escrito:
Si una vez hecho el botón, quieres modificar alguna de las propiedades del mismo basta
con hacer doble clic sobre el botón para volver a la ventana anterior y poder hacer los
cambios oportunos.
93
94. Si, en cambio, haces un único clic se obtiene la ventana:
94
95. Texto Flash.
Otra forma muy sencilla de crear botones con animación para los vínculos es, con el
denominado, texto flash.
Le damos a Insertar > Imágenes interactivas > Texto Flash
Nos aparecerá la siguiente ventana:
Aquí podemos elegir el tipo de fuente, el tamaño, negrita, cursiva, el tipo de
justificación dentro del botón, 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
96. Haciendo doble clic sobre el botón se vuelve a la ventana anterior.
También haciendo un solo clic se abre esta ventana:
En ella se pueden hacer algunos cambios, ver el comportamiento y, en todo
caso, volver a la pantalla de Insertar texto Flash dándole a
96
97. Barra de navegación
Si has llegado hasta aquí es gracias a la Barra de Navegación que tienes encima de estas
líneas.
Es una herramienta de Dreamweaver que permite la navegación por el sitio de manera
similar a los botones flash. La ventaja de la Barra es que nos indica el botón 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
imágenes.
Para hacer las imágenes yo empleo PhotoShop. Esta es una buena dirección en la que
puedes aprender sobre este programa gráfico:
Para cada botón de la barra tenemos que tener preparadas un máximo de cuatro
imágenes. No es necesario llegar hasta el máximo. En realidad, la última imagen no es
necesaria en absoluto. La Barra de Navegación de este Tutorial sólo tiene 3 imágenes.
Voy a poner un ejemplo de barra de navegación con tres botones. Estas son las
imágenes que he preparado para cada botón:
Para insertar la Barra: Insertar > Imágenes interactivas > Barra de navegación:
Aparecerá la siguiente ventana:
97
98. Empezamos con Nombre de elemento: Escribimos el nombre y vamos seleccionando las
imágenes que hemos ido guardando en una carpeta (mejor dentro de la carpeta raíz 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 dirección
entera. La siguiente casilla indica donde se va a cargar. Yo lo voy a hacer dentro de un
marco, por eso estará la opción: main-frame (marco principal). Las demás opciones las
dejamos como están.
Por último podemos apilar los botones Horizontalmente o Verticalmente o bien usando
tablas para que queden sujetos a la distribución que queramos. Posteriormente cada
botón se puede colocar en una celda distinta de la tabla.
98
99. 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 fuésemos 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
101. 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
presentación de determinados contenidos con una unidad de estilo.
Vamos a poner como ejemplo la realización de la siguiente plantilla:
Empezamos abriendo desde Archivo de la barra superior
Elegimos la pestaña General y seleccionamos Página de plantilla y, dentro de ella,
Plantilla HTML :
101
102. 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
103. 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 número
del tema) y abrimos Insertar > Objetos de plantilla > Región editable
Se abrirá la siguiente ventana:
Le cambiamos el nombre:
103
104. Y le damos a Aceptar.
Repetimos el proceso para todos los demás elementos editables. Éste es el resultado
final:
Lógicamente el nombre de los elementos editables solamente se ve dentro de
Dreamweaver. Cuando se visite la página con el navegador, no se notarán las
diferencias entre las regiones editables y no editables, nada señalará 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
105. 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. 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
107. Notas.
Es una herramienta de Dreamweaver muy útil cuando el sitio se construye entre varias
personas o cuando queremos realizar alguna anotación que nos sirva para el futuro.
Las Notas se pueden adjuntar a cualquier archivo, documento, imagen,... Lógicamente
estas notas son para uso de los diseñadores del sitio y no las verán los visitantes de la
página.
Para adjuntar un archivo de notas una de las formas de hacerlo es:
Desde la vista pinchamos con el botón derecho del ratón en el archivo
al que le queremos adjuntar las notas y en el menú contextual elegimos Design Notes...:
Aparecerá la siguiente ventana:
107
108. Escribimos lo que nos parezca oportuno en el cuadro de texto principal:
En Estado: puedo elegir entre unas cuántas opciones y abajo puedo elegir que las notas
se abran al abrir el archivo (lo que es bastante recomendable).
108
109. 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 volverán a abrir y podremos
modificarlas.
Lo mismo que hemos hecho con un archivo .htm podemos hacerlo con una imagen, una
carpeta,... Botón derecho del ratón > Menú contextual > Design Notes.
109
110. 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 información 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 título 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 búsqueda que emplean los
buscadores de la red.
Vamos a comenzar colocando las etiquetas e información que yo he puesto en este sitio:
<html>: Comienza el documento.
<head>: Comienza la cabecera del mismo.
<title>: El título que hemos puesto al documento
<meta http-equiv... : Es una etiqueta generada automáticamente por Dreamweaver.
110
111. <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 título del documento o del sitio (mejor el del sitio pues es lo que queremos
que se encuentre). Como esta información es para los robots y motores de búsqueda yo
no pondría acentos ninguno.
<meta name="Author" : El nombre del autor del sitio.
<meta name="Subject" : El tema del sitio.
<meta name="Description" : La descripción 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 más
palabras también, pero no hay que hacer frases...
<meta name="Generator" : El nombre del editor con el que has hecho la página.
<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 mías (Con el navegador Explorer: Botón derecho > Menú
contextual > Ver código 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 código fuente. Allí pegamos nuestras
etiquetas entre </title> y </head>.
Otra forma de hacerlo:
En pinchamos en la pestaña . Aparecerán, debajo, los iconos:
Ahora pinchamos en . Se abrirá la ventana:
111
112. Podemos emplear esta herramienta cuántas 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 descripción:
112
113. Le damos a Aceptar. Pulsamos para escribir las palabras claves separadas por
comas:
Y así sucesivamente con las demás etiquetas, dándole al icono que es el genérico.
113
114. Refresh.
Con esta palabra indicamos que la página que estamos visualizando en un momento
determinado se va a cambiar por otra elegida por el diseñador de la web. El visitante no
va a poder hacer nada más que esperar esa actualización.
En este sitio web hay un "refresh" en la primera página. Al cabo de un cierto tiempo se
cambia por otra.
Para insertar una actualización automática de este tipo:
Abrimos si es que no está abierto y pinchamos en la pestaña .
Nos aparecerán 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 página antes de
cambiar y elegir el documento al cual queremos que salte, dándole 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 código, dentro de la cabecera (entre <head> y </head>),se habrá generado una
línea como ésta:
114
115. Que indica que va a tardar 15 segundos en cambiarse la página a otra que se ha llamado
con el nombre de tuto_dreamweaverMX.
115
116. Mapas de imágenes para enlaces.
Con Dreamweaver es muy fácil "mapear" una imagen para hacer que cada una de las
zonas elegidas de la imagen sea un vínculo con un documento diferente.
Una vez insertada en el documento la imagen:
Y, con ella seleccionada, elegimos una de estas tres herramientas del panel del
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.
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 vértices de este
polígono:
116
117. Observa que la zona seleccionada se queda sombreada de color azul.
En el panel que aparece seleccionamos el Vínculo y el Destino y escribimos el texto Alt
que aparecerá al situarse el puntero del ratón sobre el enlace:
117
118. Capas
Es difícil definir qué es una capa.
Una de las formas consistiría en imaginar que es una página web dentro de otra página
web. En realidad varias páginas web dentro de una página porque capas puede haber
todas las que queramos.
Dentro de cada una de las capas se puede insertar texto, imágenes,... (en realidad hemos
quedado que la imaginamos como una página web dentro de otra). La característica más
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 difícil de conseguir
por otros medios...
A las capas también se les puede adjuntar "comportamientos" que son fragmentos de
javascript que permiten al visitante interactividad con la página.
Para insertar una capa: Insertar > Capa
Aparecerá la capa:
El icono nos va a indicar cada una de las capas que incorporemos a la página.
Pinchando en él se selecciona la capa. También podemos seleccionar la capa pinchando
en el cuadrado . Cuando la capa está seleccionada tiene este aspecto:
118
119. El cuadrado sirve, además de para seleccionar la capa, para arrastrarla hasta el
punto exacto que deseemos. Con los cuadrados rellenos: podemos estirar o encoger
la capa adaptando su tamaño a las necesidades.
Cuando la capa está seleccionada y teniendo abierto el panel de propiedades, aparece la
información sobre las propiedades de esa capa:
La ha llamado Capa 1 (Layer 1), viene la anchura y la altura y nada más, porque no
hemos puesto nada en la capa. (En realidad, de momento, no he puesto en la página
ninguna capa, esto era una prueba para capturar las imágenes 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 mágico". Consiste
en colocar determinados números en un cuadrado con un número 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 mágico 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
120. Lo que primero hay que hacer es diseñar, con un programa gráfico, las 9 cifras:
Es importante realizar cada imagen con un tamaño "redondo". En el ejemplo miden 100
x 100 píxeles.
A continuación 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
121. Es conveniente cambiar el tamaño de la capa para adaptarla al contenido. Observa en el
panel de Propiedades que la capa tiene el mismo tamaño 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 número.
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 número 2 cerca de la anterior para separarla del
icono que la representa.
Cuando hayamos acabado tendremos en la parte superior izquierda de la página los
nueve iconos que representan las nueve capas que hemos introducido.
121
122. Observa cómo, 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 números. Ten abierto el
Panel de Propiedades y comprueba, una vez más, el nombre de la capa.
A continuación vamos a colocar los números tal y como como van a estar en la solución
final. Empezamos por la casilla superior izquierda que, en esta solución, va a ser el 4.
Lo llevamos más o menos al centro de la pantalla y le damos a Ventana >
Comportamientos
Se abrirá la siguiente ventana:
122
123. Ahora pincharemos en el icono y se desplegará el siguiente catálogo de
comportamientos:
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 vuélvelo 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 posición actual para que se rellenen los números del
Destino de forma automática.
• Ajustamos a 20 píxeles del destino. Esto quiere decir que, cuando el visitante
suelte el objeto a menos de 20 puntos de la solución, el objeto se colocará solo
de manera exacta en el sitio que acaba de ser obtenido al pinchar en Obtener
123
124. posición actual. Lo que proporcionará belleza en la solución final y sensación de
seguridad al saber que es esa la posición a la que había que llevar el objeto (en
este caso el número).
Le damos a Aceptar y comprobamos nuestra capa en el panel de propiedades antes de
pasar al siguiente número:
Si seleccionamos la capa comprobaremos su situación:
Vamos colocando cada uno de los números procurando que estén perfectamente
alineados con sus vecinos. Podemos ajustar y modificar la posición escribiendo
directamente en el panel de Propiedades la posición Iz y Sup:
Si el primer número 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 número deberá quedar a 350 puntos de la izquierda y a 100
puntos de arriba, el tercer número a 450 puntos y a 100 puntos respectivamente. El siguiente
número 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 número 4 de añadir comportamiento "arrastrar
capa" para cada uno de los números según se vayan quedando colocados en su posición
124
125. "de solución".Al número que vamos a colocar en el centro (el 5) no le adjuntamos el
comportamiento de "arrastrar capa". Su posición será inamovible: El visitante de la
página no lo podrá mover de su posición central.
Cuando lo hayamos acabado y, para que pueda ser un pasatiempo para el visitante,
tendremos que desordenar los números: Cambiar los números que nos parezca excepto
el del centro que no lo tocaremos. El visitante de la página recibirá el cuadro tal como lo
hayamos guardado esta última vez, pero, al ser manipulado por él, el programa
"recordará" la posición que tenía cuando el cuadro estaba bien resuelto y cada imagen se
dejará llevar automáticamente a su posición correcta cuando el número se acerque
menos de 20 puntos y el jugador suelte el ratón.
125
126. Limpiar el código generado por Word.
El procesador de texto Word permite la creación de una página web a partir,
simplemente, de guardar el documento como página web.
El problema es que Word genera una tremenda cantidad de código que no es, en
absoluto, necesario.
Veamos un ejemplo:
Escribo con Word 2000 el siguiente texto:
Que guardo como página web:
Vuelvo a abrir el documento y, pinchando en cualquier punto del mismo, con el botón
derecho del ratón accedo a su código fuente:
126
127. Esto es un retazo de la tremenda cantidad de código generado:
Bien, con el explorador de Windows, metemos en nuestra carpeta raíz del sitio, este
documento:
127
128. 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
129. 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 código:
Aún podríamos meternos en el código y cambiar el título por una expresión menos
larga.
129
130. Publicar el sitio
Puede parecer un poco prematuro empezar ya a pensar en la publicación de nuestra
página.
Tal como la tenemos apenas tiene un saludo de bienvenida... Carece de contenido y, pòr
tanto, de interés. Pero este curso quiere hacer hincapié en enseñar al interesado de
manera minuciosa los pasos que, por experiencia, están 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 más ayuda. Así que
vamos a proceder a desarrollar los pasos necesarios para conseguir publicar nuestra
página.
Conseguir un servidor que nos la aloje.
Es la primera condición: 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 carácter personal o sin intereses económicos.
Este ordenador servidor nos tiene que proporcionar unas claves para la transferencia de
los ficheros y la dirección en la cual se encontrará nuestra página inicial.
El propio Dreamweavwer tiene la posibilidad de hacer conexión 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
131. Pulsamos el botón y pasaremos a:
(Nota: Pincha la pestaña en el caso de que no se abra por defecto)
131
132. Esta ventana define los Datos locales que ya están bien. No hay que añadir 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 quedaría así:
132
133. Los datos no marcados se dejan como están.
El Directorio del Servidor, o sea, la carpeta del servidor en la que se colocan los
archivos, varía 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
134. Le damos a y ya está.
Ahora procedemos a conectar telefónicamente con el servidor. Para ello pinchamos en
el botón que cambiará a y aparecerán 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 opción:
134
135. Seleccionamos el archivo que queremos transferir (en este caso el index.htm) y
pulsamos la flecha . Aparecerá el siguiente mensaje:
Los archivos dependientes son las imágenes incrustadas en una determinada página. En
nuestro caso, como no tenemos ninguna, le podemos decir que No pero es aconsejable
darle al Sí cuando tengamos imágenes (aunque siempre se pueden transferir por
separado).
Aparecerá el mensaje:
Y, si todo va bien, en unos momentos nuestra página estará en el servidor.
Dreamweaver señala que la transferencia ha acabado seleccionando los archivos que se
transferían:
135
136. Puedes comprobarlo, de todas formas, yendo a Vista remota:
Y, mejor aún, saliendo del programa y yendo a internet para comprobar que la página se
visualiza correctamente:
136