TUTORIAL DE MACROMEDIA DREAMWEAVER

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

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

Hacemos doble clic en el icono

de la Carpeta raz local. Se desplegar la ventana de para crear una nueva

bsqueda de directorios. Elegimos C y le damos al icono 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 habrs vuelto a la ventana de Definicin del sitio:

Le das al icono

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

, aparecer esta ventana:

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

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

Volveremos a la ventana mltiple del Sitio:

Observa el lateral inferior derecho:

Aparece abierto el sitio que acabamos de crear: carpeta denominada mi_primer_sitio que C:

est

que est alojado en una en el disco duro

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

Aparecer la ventana Guardar como:

Le ponemos el nombre index:

Y le damos a Guardar.

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

Y, en la pestaa inferior del documento ya aparece el nuevo nombre (index)que le hemos dado al archivo: .

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

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

Para dar formato al texto, disponemos de las herramientas que se desplegan en el denominado Inspector de Propiedades:

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

Por ejemplo a la primera lnea le hemos aplicado un tamao de Encabezado 1. No hemos modificado el tipo de fuente, ni el tamao (de forma explcita). Le hemos puesto de color rojo y lo hemos centrado en la lnea.

Ahora hacemos cambios en la segunda lnea:

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

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

10

El asterisco habr desaparecido:

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

Aparecer la siguiente ventana:

11

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

Elegimos el que nos parezca y vemos su efecto en Aplicar. Cuando estemos convencidos, le damos a Aceptar. Nuestra pgina tiene, ahora este aspecto:

12

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

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

13

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

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

Y buscamos en el disco duro la carpeta mi_sitio_web

14

Le damos a Abrir

Haciendo doble clic sobre el icono para abrirla: Aparecer esta ventana.Le damos a Abrir estando seleccionado Navigator.

La pgina se ve as con el Netscape:

15

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

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

16

Insertar una tabla. Desde Insertar de la barra de Mens, elegimos Tabla.

Aparecer una ventana similar a sta:

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

17

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

Desde ese panel podramos cambiar las propiedades de la celda en cuestin. Si, desde la Barra de Estado pulsamos la etiqueta <table>, se seleccionar toda la tabla.

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

Podemos modificar el nmero de Filas en Filas, el nmero de columnas en Cols, la anchura en An, la altura en Al, el espacio entre los bordes y el contenido en Rell.celda, el espacio entre las celdas en Esp.celda, la alineacin en Alinear, el grosor del borde en

18

Borde. De momento, ignoraremos los seis iconos siguientes: . Podemos establecer un color de fondo en Col.Fondo, un color de borde en Col.borde o una imagen en Im. Vamos a realizar algn cambio en la tabla:

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

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

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

19

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

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

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

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

20

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

El resultado es:

21

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

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

Por ejemplo, podemos llamarla imag:

22

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

Aparecer la ventana Seleccionar origen de imagen:

Pinchamos en Escritorio y seleccionamos la imagen: obras

23

Aparecer el mensaje de advertencia dicindonos que la imagen no est en la carpeta raz del sitio:

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

24

Hacemos doble clic sobre la carpeta imag para abrirla

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

25

Una imagen puede colocarse tambin como fondo de una pgina, o de una tabla, o de una celda. Por ejemplo, en la tabla que hemos creado en el apartado anterior Lunes Maana Tarde Noche Aula 1 Aula 1 Martes Aula 2 Aula 3 Mircoles Aula 1 Aula 1 Jueves Aula 2 Aula 3 Viernes Aula 1 Aula 1 Fiesta final

Tiempo libre

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

26

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

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

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

27

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

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

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

28

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

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

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

Pinchamos en el icono abrir:

de

y se

29

Seleccionamos el archivo correspondiente, en este caso es seis y le damos a Aceptar. El enlace habr quedado marcado de otro color y subrayado aunque esto se puede modificar:

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

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

30

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

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

31

Ponemos 1 y le damos a Aceptar:

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

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

32

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

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

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

33

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

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

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

34

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

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

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

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

35

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

36

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

El cine La lectura Los paseos por el campo

Para acabar la enumeracin, vuelvo a pulsar el mismo botn: Veamos el cdigo que se ha generado:

Se introduce la lista con la etiqueta <ul> unordered list y despus cada uno de los objetos de la lista con las etiquetas <li> list item de apertura y su correspondiente de cierre. Si, en cambio, queremos que nuestra lista sea numerada, pulsamos el botn Estas son mis aficiones por orden de preferencia: 1. El deporte de aventura. 2. La msica rock 3. Salir de juerga con mis amigos Veamos el cdigo que se ha generado: :

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

37

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

Ahora el margen se guarda. Pulso intro: Para volver al margen inicial pulsar la tecla Pulso 4 veces la tecla Pulso intro

. Esta lnea ha vuelto al margen inicial.

Veamos el cdigo generado:

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

38

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

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

39

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

En este caso la pantalla se divide en tres partes:

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

Para crear una pgina con marcos, debemos saber que:

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

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

Empiezo creando un nuevo archivo: Archivo > Nuevo archivo

Aparecer el nuevo archivo al que Dreamweaver llamar untitled.htm

Hago doble clic sobre l para abrirlo:

41

Pulsamos

para que se despliegue:

Pinchamos en la pestaa

para que aparezcan los patrones de marcos:

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

42

En este momento, Dreamweaver ya ha creado 4 diferentes documentos: El primero que es el que contiene la estructura de los tres marcos (frameset) y uno por cada marco (el superior, el izquierdo y el principal) los frames. Podemos, ahora, escribir algo en cada una de las tres partes para identificarlas posteriormente: Por ejemplo:

Escribimos: Frame del ttulo. Frame del ndice. Frame principal.

Algo as:

43

Procedemos a Guardar: Archivo > Guardar todo:

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

44

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

45

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

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

Le damos a Guardar y aparecer la ltima ventana:

46

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

Le damos a Guardar y ya no aparecen ms ventanas. Nos falta, sin embargo, un frame por guardar el frame principal: ste es el documento que Dreamweaver ha guardado con el nombre untitled que veamos en la carpeta marcos. Veamos los archivos que tenemos:

47

Observamos que aparecen los cuatro documentos:

index.htm con la estructura de todos los marcos. indice.htm el marco izquierdo. titulo.htm el marco superior. untitled.htm que es el marco principal.

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

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

48

Vamos a intentar entender un poco la estructura de este complejo sistema. Abrimos nuestro index.htm haciendo doble clic sobre l.

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

49

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

50

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

51

Seleccionamos el 1 y pinchamos en la carpeta

del panel de propiedades:

52

Nos aparecer la ventana de seleccin de archivos.

53

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

54

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

55

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

si no est ya desplegado, y elegimos la pestaa

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

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

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

Vamos a emplear, la columna de la izquierda para realizar la pregunta correspondiente (justificado a la derecha) y la columna de la derecha para colocar los objetos de formulario (justificado a la izquierda).

56

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

Y,debajo, aparecer la ventana de propiedades

del campo de texto:

All podemos elegir la anchura del campo, el nmero de caracteres mximo, si queremos que conste de una o varias lneas, si queremos que se oculte al ser escrito (tipo contrasea), si queremos que aparezca un texto inicialmente y, lo que es ms importante, el nombre que le queremos dar: Quitamos textfield y ponemos: nombre

Botn de opcin. Vamos ahora a preguntar la opinin sobre la pgina. En la segunda celda de la columna de la derecha, insertamos un botn de opcin Nuestro formulario tendr este aspecto: .

57

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

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

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

58

Ponemos un tercer botn con la opcin de que la pgina es Mala.Bastante mala: Ya sabes el mismo nombre: opinion y como valor activado: mala.

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

59

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

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

60

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

Le damos un nombre a la Lista/men, por ejemplo, edad y pulsamos Aparecer la siguiente ventana:

61

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

Cuando lo tengamos todos le damos a Aceptar.

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

Podemos incluir una campo de texto para comentarios. Lo podemos hacer con el botn de Campo de texto definiendo (rea de texto): en las propiedades, o bien, dando directamente al botn: Lo introducimos:

62

Podemos introducir ahora (campo de texto) la direccin de correo electrnico del visitante. En este caso, podemos poner un Valor inicial:

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

Nosotros modificamos de la siguiente forma:

63

A continuacin, nos colocamos en la celda de la derecha, alineamos a la izquierda, pulsamos el icono Aparecer, de nuevo la ventana anterior que modificamos, esta vez ligeramente:

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

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

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

Incluimos lo acordado:

Vemos, de nuevo, las propiedades del formulario:

64

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

Y en la ventana de propiedades de la fila

Elegimos un color de fondo:

Elegimos otro color para la segunda fila y vamos alternando.

65

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

En la columna de la derecha se abrir:

Ahora pincharemos en el icono

de

y aparecer la siguiente ventana:

66

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

Le damos un nombre a nuestro estilo, por ejemplo, palabrasclave Ser un estilo personal. En una hoja externa.

Cambiamos el .unnamed1 por .palabrasclave (si no ponemos el punto al comienzo, Dreamweaver lo har por nosotros) y, sin ms, le damos a Aceptar. Aparecer la siguiente ventana:

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

67

Se abrir la siguiente ventana para que definamos el estilo:

Por ejemplo:

68

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

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

69

Si hacemos doble clic sobre el icono nuestra hoja:

veremos los estilos definidos en

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

El texto seleccionado pasar a estar escrito con los parmetros definidos. Si una vez definido el estilo, no nos gusta, podemos modificarlo haciendo doble clic en el estilo correspondiente . le damos al icono y se abrir Para definir otro estilo, dentro de la ventana la ventana Nuevo estilo. Le ponemos un nombre, por ejemplo, .texto1 y lo definimos

Esta es la definicin que he hecho:

70

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

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

71

Ahora pinchamos en el icono

de

y se abrir:

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

Seleccionamos nuestra hoja1 y le damos a Aceptar:

72

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

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

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

73

Un vistazo al cdigo fuente generado Pinchamos en el icono para ver el cdigo fuente.

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

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

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

Como se puede ver hay un montn ms de categoras que se pueden definir. Nosotros, de momento, vamos a pasar a ver los estilos que redefinen una etiqueta HTML.

74

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

Le damos a Examinar:

Seleccionamos la hoja1 y le damos a Aceptar

Volvemos a Aceptar Ahora pinchamos en el icono para crear nuevo estilo. Se abrir:

75

Pero ahora seleccionamos Redefinir etiqueta HTML.

Ahora si pinchamos en la flechita de Etiqueta se desplegar:

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

76

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

Definimos el estilo y elegimos Decoracin: ninguna:

77

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

En Selector: elegimos a:hover

78

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

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

De hecho, siempre que establezcamos un enlace se van a implementer las caractersticas de estilo definidas. Sin embargo, si pinchamos en Editar estilos, s aparece la redifinicin de la etiqueta <a> :

79

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

80

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

Si ninguno de estos colores nos gusta, pulsando en colores:

podemos crear nuestros propios

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

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

81

Los smbolos alfa-numricos son las diez cifras numricas y las seis primeras letras del alfabeto ordenadas de la siguiente forma: 0 1 2 3 4 5 6 7 8 9 a b c d e f

Siendo 0 el valor mnimo y f el valor mximo. A su vez los seis smbolos se dividen en tres grupos de dos smbolos:

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

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

ffffff

000000 ff0000 00ff00

0000ff ffff00

cccccc ff00ff

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

Observa que he rellenado la celda con el color escribiendo en el inspector de propiedades el cdigo nombre del color:

82

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

Aparecer la siguiente ventana:

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

83

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

En el ejemplo, hemos puesto una imagen con un enlace a un documento externo: El curso de Turismo Rural del Proyecto Mentor de Enseanza Telemtica del MECD. Para ver el efecto pulsamos la tecla F12 y lo probamos con el navegador.

84

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

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

Y se podr ir a la pgina de Macromedia para descargar una demo del programa. Aparecer la siguiente ventana: 85

Ponemos un Ttulo a nuestro lbum y una informacin de subencabezado, si se desea. Examinamos la carpeta origen de las imgenes (en este caso en D: fotos_ayerbe):

Le damos a Abrir y aparecer la carpeta:

86

Aunque aparezca vaca, la carpeta contiene las imgenes previamente guardadas. Le damos a Seleccionar. A continuacin pinchamos en Examinar... de la Carpeta de destino. Se abrir la carpeta raz del sitio y all deberemos crear una nueva carpeta con el nombre que queramos, por ejemplo, album1

87

Para crear la carpeta, pinchamos en el icono carpeta album1.

. Inmediatamente aparecer la nueva

a la que cambiaremos el nombre tal como hemos quedado por

El tamao de la miniatura puede estar bien (lo podemos modificar si queremos). Desactivamos la casilla de mostrar nombre de archivos. Elegimos el nmero de columnas que deseemos tenga la pgina inicial. sta ha sido mi ventana completada:

Le damos a Aceptar y saltar el Fireworks procesando la informacin de cada imagen. Al final aparecer el mensaje:

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

88

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

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

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

Y el archivo es el index.htm. Es la primera pgina que contiene las miniaturas de todo el lbum. Si abrimos el index.htm (de la carpeta album1) veremos algo as:

89

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

90

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

91

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

Aparecer la siguiente ventana:

En Estilo eliges el botn que quieras. En Muestra vers el botn elegido. En Texto del botn escribes lo que quieres que aparezca en el botn. Puedes elegir el tipo de fuente y el tamao. 92

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

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

93

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

94

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

Nos aparecer la siguiente ventana:

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

95

Haciendo doble clic sobre el botn se vuelve a la ventana anterior. Tambin haciendo un solo clic se abre esta ventana:

En ella se pueden hacer algunos cambios, ver el comportamiento caso, volver a la pantalla de Insertar texto Flash dndole a

y, en todo

96

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

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

Aparecer la siguiente ventana:

97

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

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

98

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

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

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

99

100

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

Empezamos abriendo desde Archivo de la barra superior

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

101

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

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

102

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

Se abrir la siguiente ventana:

Le cambiamos el nombre:

103

Y le damos a Aceptar.

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

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

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

104

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

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

105

Se abrir la plantilla y podremos modificar, o no, los elementos editables. Bastar guardar como un documento nuevo cada una de las modificaciones para hacer funcionar la plantilla.

106

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

Aparecer la siguiente ventana:

107

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

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

108

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

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

109

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

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

110

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

Ahora pinchamos en

. Se abrir la ventana:

111

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

Le damos a Aceptar y volvemos a pulsar

Hacemos lo mismo para la siguiente meta tag : Subject. Ahora pulsamos para escribir la descripcin:

112

Le damos a Aceptar. Pulsamos comas:

para escribir las palabras claves separadas por

Y as sucesivamente con las dems etiquetas, dndole al icono

que es el genrico.

113

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

Nos aparecern los siguientes iconos:

algunos de los cuales ya son conocidos. Pinchamos en

. Se abrir:

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

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

114

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

115

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

Y, con ella seleccionada, elegimos una de estas tres herramientas Inspector de propiedades:

del panel del

La primera herramienta La segunda herramienta La tercera herramienta

se usa para hacer zonas rectangulares. se usa para hacer zonas circulares. 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 vrtices de este polgono:

116

Observa que la zona seleccionada se queda sombreada de color azul. En el panel que aparece seleccionamos el Vnculo y el Destino y escribimos el texto Alt que aparecer al situarse el puntero del ratn sobre el enlace:

117

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

Aparecer la capa:

El icono

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

Pinchando en l se selecciona la capa. Tambin podemos seleccionar la capa pinchando en el cuadrado . Cuando la capa est seleccionada tiene este aspecto:

118

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

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

119

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

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

120

Es conveniente cambiar el tamao de la capa para adaptarla al contenido. Observa en el panel de Propiedades que la capa tiene el mismo tamao que la imagen (100 x 100).

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

121

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

Se abrir la siguiente ventana:

122

Ahora pincharemos en el icono comportamientos:

y se desplegar el siguiente catlogo de

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

Tenemos que:

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

posicin actual. Lo que proporcionar belleza en la solucin final y sensacin de seguridad al saber que es esa la posicin a la que haba que llevar el objeto (en este caso el nmero).

Le damos a Aceptar y comprobamos nuestra capa en el panel de propiedades antes de pasar al siguiente nmero:

Si seleccionamos la capa comprobaremos su situacin:

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

Repetimos el proceso indicado para el nmero 4 de aadir comportamiento "arrastrar capa" para cada uno de los nmeros segn se vayan quedando colocados en su posicin 124

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

125

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

Que guardo como pgina web:

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

126

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

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

y lo abrimos desde el Dreamweaver. Una vez abierto le damos a Comandos > Limpiar HTML de Word...

Aparecer la siguiente ventana:

Le damos a Aceptar y aparece este mensaje de aviso:

128

Volvemos a darle a Aceptar. El documento ha quedado como estaba desde el punto de vista de su aspecto desde el navegador, pero, ahora, contiene exactamente este cdigo:

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

129

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

Se nos abrir la siguiente ventana:

130

Pulsamos el botn (Nota: Pincha la pestaa

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

131

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

Del men desplegable Acceso elegimos FTP:

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

132

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

133

Le damos a

y ya est.

Ahora procedemos a conectar telefnicamente con el servidor. Para ello pinchamos en el botn que cambiar a y aparecern esta ventana:

Cuando ya haya conectado aparecer lo siguiente:

Observa que la vista ha cambiado a remota. Cambiamos a Vista local en el men de opcin:

134

Seleccionamos el archivo que queremos transferir (en este caso el index.htm) y . Aparecer el siguiente mensaje: pulsamos la flecha

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

Y, si todo va bien, en unos momentos nuestra pgina estar en el servidor. Dreamweaver seala que la transferencia ha acabado seleccionando los archivos que se transferan:

135

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

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

136