0.- Declaracin de intenciones.

Esto quiere ser un curso sobre Dreamweaver eminentemente

prctico.

No pretende ser exhaustivo, ni completo, ni perfecto. Quiere ser una simple ayuda para aquellas personas que se enfrentan por vez primera a esta herramienta y no tienen mucha idea de pginas web, ni de lenguaje html, y quieran encontrarse, rpidamente, cmodos trabajando con el programa y satisfechos porque son capaces de una manera, relativamente sencilla, de realizar sus pginas web, de publicarlas y de ir actualizndolas despus. Puedes ver los contenidos del curso pulsando aqu y seguir el mismo a travs de los enlaces a las respectivas secciones y apartados. O continuar leyendo...

1.- Instalar el programa.

El primer paso es conseguir el programa Dreamweaver en su versin 4 e instalarlo en el ordenador. Hay versiones educativas cuyo precio es algo inferior al de venta al pblico normal. Hay versiones gratuitas de uso limitado a 30 das, en la red. El problema es que estn en... ingls, francs, alemn o japons (no espaol).
(Nota: Desde hace ya un tiempo, en la direccin de Macromedia slo est disponible la nueva versin del programa: . En esta ocasin, la demo s est en versin en espaol. Estoy preparando una adaptacin de este mismo curso para el Dreamweaver MX).

Al instalar el programa es aconsejable aceptar todo lo que la instalacin elija por defecto para no interferir en las presentaciones y en los sitios de ubicacin de los archivos y documentos.

2.- Abrir el programa.

Una vez instalado, el programa lo encontraremos en la ruta

Inicio

>

Programas > Macromedia Dreamweaver 4 Dreamweaver 4.

>

Cuando el programa est abierto presenta una pantalla similar a sta:

Observa que se abren varias ventanas. Una de ellas, que se abrir, de forma automtica slo esta primera vez, es la de ayuda (Bienvenido). Podemos cerrarla sin ningn problema.

3.- 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 (o de otro fraccionamiento del disco duro si se dispone de l). As que pinchamos en Sitio, en la Barra de Mens de arriba, y se desplegar el siguiente men:

Elegimos

Sitio nuevo...

y se abre esta otra ventana:

Hacemos doble clic en el icono de la Carpeta raz local. Se desplegar la ventana de bsqueda de directorios. Elegimos C y le damos al icono 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 . Volveremos a la ventana de Definicin del Sitio pero ahora ya con la carpeta creada.

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

sitio.

Lo dems

Aparecer la siguiente ventana, advirtindonos de que va a crear la cach del sitio. le damos a Aceptar.

Volveremos a la ventana del Sitio ya con el nombre que acabamos de ponerle. En el lado derecho de esta doble ventana aparece la carpeta raz, abierta y sin nada.

4.- Crear el primer documento.

Para crear mi primer documento, le damos a Archivo. Se desplegar el siguiente men. Soltamos en Nuevo archivo

Aparecer el primer documento, de nombre de nuestra carpeta raz.

untitled.htm

que cuelga

Este documento ser nuestro primer archivo, por eso, le vamos a dar un nombre especial: index.htm

Si tenemos problemas para cambiar el nombre, nos situamos con el cursor encima del icono, pulsamos el botn derecho del ratn y elegimos Renombrar del men contextual.

Para abrir nuestro primer documento, hacemos doble clic sobre su icono.

5.- A poner algo en el documento. (La primera pgina).

Aparecer una ventana, ms o menos, como sta:

(Nota: Puede ocurrir que la cuadrcula del fondo que aparece en esta imagen no aparezca as como los paneles flotantes. Lo importante es que aparezca la misma barra de ttulo: )

Tras los paneles flotantes que se hayan abierto (que podemos cerrar sin problemas) se queda la ventana principal del programa (Ventana Documento)que es el documento en el que vamos a ir escribiendo y colocando los elementos que se van a visualizar en la pgina web. Podemos empezar a escribir un mensaje de bienvenida:

Para modificar el tamao, el color, la disposicin de estas dos lneas de texto, le damos a Ventana > Propiedades. Este panel que se abre indica las caractersticas del elemento que se selecciona o en el que est el cursor. As, como nosotros slo tenemos texto, las Propiedades hacen referencia a ese texto.

Seleccionamos la primera palabra Bienvenid@, elegimos un color en el panel, pinchando en , centramos el texto pinchando en seleccionamos el tamao: 7 y

Nuestro Bienvenid@ habr pasado a tomar este aspecto:

Podemos incrementar el grosor de las letras, seleccionando la palabra y pinchando en (bold, en ingls, negrita). Hacemos esto. Despus seleccionamos la segunda lnea. Elegimos el tamao inmediatamente inferior, lo centramos, pinchamos tambin en y cambiamos el tipo de fuente a Arial, Helvtica, sans-serif

Nuestra pgina, tiene ahora, este aspecto:

Vamos, ahora, a poner un color de fondo a la pgina: Pinchamos en cualquier punto de la pgina en el que no haya nada, con el botn derecho del ratn y elegimos Propiedades de la pgina... en el men contextual:

Aparecer la siguiente ventana:

Elegimos un color ventana, damos un Inicial. Lo dems Nuestra pgina se

para el Fondo y, ya que estamos en esta ttulo a nuestro documento. Por ejemplo: Pgina lo dejamos como est y le damos a Aceptar. visualiza, ahora, as:

Observamos, ahora, la barra de ttulo: Aparece el nombre del documento: Pgina Inicial, el nombre de la carpeta raz mi_sitio_web y el nombre del archivo que contiene a la pgina: index. A continuacin aparece un asterisco *. Este asterisco indica que el documento no lo hemos guardado todava. En el momento que lo guardemos, el asterisco desaparecer, volviendo a aparecer

en el momento que hagamos cualquier modificacin y hasta que lo volvamos a guardar.

Conviene, de vez en cuando, ir guardando los cambios que vayamos realizando. Para ello le damos a Archivo > Guardar.

6.- 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. Aqu hacemos una simulacin: F12.

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

En C vemos la carpeta ella:

mi_sitio_web.

Hacemos doble clic sobre

Observa que aparece otra carpeta que nosotros no hemos creado: _notes. Es una carpeta creada automticamente por Dreamweaver y a la que no le vamos a prestar atencin, de momento. 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. Si el otro navegador es el Netscape (el segundo ms conocido), lo 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

archivo...

Abrir pgina.

Le damos a

Elegir

Y buscamos en el disco duro la carpeta

mi_sitio_web

Ya hemos encontrado la carpeta. Le damos a

Abrir

Haciendo doble clic sobre el icono para abrirla:

Aparecer esta ventana.Le damos a Navigator.

Abrir

estando seleccionado

La pgina se ve as con el Netscape:

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:

Los dos primeros botones de Dreamweaver (el sitio y la pgina). El siguiente botn del Explorer y el ltimo del Netscape.

7.- Salir y volver a entrar.

Cuando queramos salir del programa, guardaremos el documento abierto y cerraremos el archivo y el correspondiente sitio haciendo clic en el boton Cerrar (entre otras posibilidades). Si lo hacemos de esta manera, al cerrar el sitio nos aparecer la siguiente ventana de advertencia:

Le damos a

y tendremos cerrado el programa.

Cuando queramos volver a entrar. Le damos a

Macromedia Dreamweaver

> ocurrir, que se nos abra la doble ventana de nuestro sitio (en cuyo caso no tendremos ms que hacer doble clic sobre el documento correspondiente o crear uno nuevo) o bien, que se nos abra un documento nuevo untitled que no es de ningn sitio concreto. En ese caso, le damos a Sitio > Abrir Sitio > Mi primer sitio

Inicio > Programas Dreamweaver 4 y, puede

>

para acceder a la doble ventana de nuestro

Sitio:

Ahora, si queremos abrir el documento index.htm hacemos doble clic sobre l. Si queremos abrir un nuevo documento le damos a Archivo > Nuevo archivo

8.- 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, por 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.

8.1.- 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. Uno de ellos es terra.(Primero tienes que solicitar una cuenta de correo, despus activar el espacio para la pgina). Otro de ellos es YAHOO a travs de GeoCities. Tambin primero debes crearte una cuenta de correo con YAHOO y, despus, puedes acceder al sitio para tu pgina.

8.2.- Cul es la direccin URL?

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.

8.3.- Un programa de transferencia de ficheros . Un programa de FTP.

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). Uno de ellos, que funciona bien, es bastante intuitivo y se puede conseguir de forma gratuita es el WS_FTP. (Haz clic en el enlace para descargar el programa).

Como probablemente muchos de los posibles interesados en este tutorial tengan una cuenta de correo con el CNICE del Ministerio de Educacin Cultura y Deporte de Espaa, vamos a dedicarle una atencin especial a este servidor. Supongamos que la persona interesada se llama Basilio Terradas Jurez. Probablemente su direccin de correo electrnico tendr este aspecto: btej0001@aliso.pntic.mec.es y su contrasea ser algo as como juarez34.
(Nota: Fruto del cambio de nombre del PNTIC por CNICE las direcciones de correo han cambiado tambin. En el caso anterior cambiara pntic por cnice y mec por mecd. El resto permanece igual. De todas formas, ambas direcciones, la versin anterior y la nueva son igualmente vlidas para todos los efectos).

btej0001 es el nombre de usuario (b de Basilio, te de Terradas, j de Jurez y cuatro cifras). Si no tiene este esquema el nombre de usuario es, en todo caso, todo lo que hay delante de la arroba. aliso.pntic.mec.es es el servidor. En todo caso, todo lo que hay detrs de la arroba. Con estos datos la URL o direccin de internet en la que encontrarn las pginas ser:

http://aliso.pntic.mec.es/~btej0001 El sigo ~ se consigue teniendo pulsada la tecla Alt y escribiendo 126 con el teclado numrico. Bien, otro aspecto importante que debes conocer, es que la pgina web se debe alojar en una carpeta, dentro de tu propio espacio, que se denomina public_html. Esta carpeta puede estar creada. En ese caso no necesitamos el programa de transferencia de ficheros WS_FTP. En caso de no estar creada, que es lo que viene siendo habitual ltimamente, hay que crearla con este programa de transferencia FTP.

8.4.- Abrir el programa WS_FTP

Al abrir el programa nos encontraremos con una ventana similar a sta:

En la caja de texto En la caja de texto servidor. En la caja En la caja En la caja

Profile Name:

Seleccionamos el vaco. Ponemos el nombre del

Host Name/Address:

Host Type: Used ID:

Seleccionamos Automatic detect.

Ponemos el nombre de usuario. Ponemos la contrasea.

Password.

Las dems casillas las podemos dejar como estn.

En el supuesto anterior, la ventana quedara as:

Le damos a

Aceptar.

Se nos abre una doble ventana similar a sta:

El lado izquierdo de la ventana representa el ordenador local (desde el que se est trabajando). El lado derecho es el espacio reservado para ese usuario en el servidor.

Comprobamos que en el lado del servidor hay una serie de carpetas (que no nos interesan para nada) pero no est la que es necesaria para alojar nuestra pgina. Es la carpeta public_html. Procedemos a crearla: Pulsamos el botn siguiente ventana: (del lado derecho) (del ingls Make directory). Nos aparecer la

En la caja de texto escribimos el nombre de la carpeta: public_html y le damos a OK.

Volver a aparecer la doble ventana anterior. Esta vez con la carpeta que nos interesa:

A partir de este momento la trasferencia ya se puede hacer directamente con Dreamweaver. De todas formas, ya que estamos aqu, vamos a acabar el proceso con este programa de FTP. Hacemos doble clic sobre la carpeta abra:

public_html

para que se

Ahora tenemos que trasferir nuestros archivos. Primero seleccionamos la parte de nuestro ordenador donde hemos guardado nuestra pgina: disco duro C en una carpeta que se llama

mi_primer_sitio.

Pulsamos el botn (del ings Change Directory)

del lado izquierdo

Escribimos en la caja de texto la ruta de nuestra carpeta: C:\mi_sitio_web y le damos al OK

Se abrir la carpeta con su contenido en el lado izquierdo de la doble ventana:

Ahora slo nos resta seleccionar los archivos que nos interesa: De momento slo el index.htm. La carpeta _notes no es necesaria.

y pulsar el botn .Nos aparecer este mensaje de alerta para que confirmemos que efectivamente queremos transferir esos archivos.

Le decimos que S. El archivo se transferir. Cuando veamos el lado derecho con los contenidos, la transferencia habr acabado:

Ahora podemos salirnos del programa, meternos en internet y teclear nuestra direccin para comprobar que la pgina se visualiza correctamente:

8.5.- Transferencia desde Dreamweaver

Para transferir los ficheros desde el programa, en primer lugar hay que configurar los datos del sitio. Para ello, desde la doble ventana del Sitio, le damos a Sitio > Definir sitios...

Se nos abrir la siguiente ventana:

Pulsamos el botn

y pasaremos a:

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

Cambiamos el

Acceso

y elegimos

FTP

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

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.Aparte del servidor del MECD explico, a continuacin, el caso de estos otros dos servidores bastante utilizados: Si tu servidor es Si tu servidor es

Terra. GeoCities.

Le damos a Aceptar y aparecer la ventana ya conocida de Definir sitios. En este momento, como ya hemos definido nuestro sitio

Le damos a

y volveremos a la doble ventana del sitio:

Ahora procedemos a conectar telefnicamente con el servidor. Para ello pinchamos en el botn que cambiar a sucesivamente estas dos ventanas: y aparecern

Volviendo a la doble ventana del sitio. Observa como en el Sitio remoto se ha colocado la carpeta que hemos configurado como contenedor de los archivos del sitio.

(Nota: Estamos haciendo la transferencia del archivo index.htm como si no lo hubisemos hecho anteriormente con el programa

WS_FTP).
Ahora slo tenemos que seleccionar todos los archivos que queramos transferir (en este caso slo el archivo index.htm ) y pinchar en la flecha azul de

Colocar archivo(s).

Probablemente nos aparezca este mensaje:

Los archivos dependientes son (entre otros) las imgenes que estn en un determinado documento. Lgicamente para que el documento se vea bien, hay que colocar en el servidor, el documento por un lado y las imgenes por otro. Pues bien, Dremweaver permite hacer la transferencia del documento y que todos sus archivos dependientes se coloquen de manera automtica. En este caso no hace falta porque no tenemos imgenes en nuestro documento. De todas formas podemos pulsar S

Cuando aparezcan en la ventana izquierda los mismos archivos y directorios que en la carpeta local, quiere decir que la transferencia se ha realizado. Slo queda ir a Internet y comprobar que nuestra pgina se encuentra en la direccin correspondiente.

9.- 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 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

10.- Modificar la tabla.

Si ponemos el cursor en cualquier punto de la tabla, en la 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. Observar que la ltima etiqueta est en negrita. Eso quiere decir que es la celda la que est seleccionada. Si ahora abrimos el panel barra de mens

barra

Propiedades.

Desde

Ventana

de la

nos aparecer el panel Propiedades que hace referencia a esa celda:

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

<table>,

se

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 Borde. De momento, ignoraremos los cuatro 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 afectar a la fila seleccionada:

Propiedades

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 estar en negrita. El resultado ser:

el texto escrito pasar a

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:

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

El resultado es:

11.- 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 y sin letras no disponibles en el idioma ingls como la ) 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 el botn derecho del ratn sobre cualquier punto vaco de la ventana derecha de las dos del sitio y elegimos Nueva carpeta del men contextual:

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:

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 obras03. Pinchamos en

Insertar

de la barra de mens y soltamos en

Imagen:

Aparecer la ventana

Seleccionar origen de la imagen:

Pinchamos en

Escritorio

y seleccionamos la imagen:

obras03

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

Le decimos que

y se abrir la ventana

Copiar archivo como

Hacemos doble clic sobre la carpeta

imag

para abrirla

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

imag

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

Martes

Mircoles

Jueves

Viernes

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

Aparecer la ventana

Le damos a Seleccionar y la imagen se colocar como fondo de la celda seleccionada.

Lunes

Martes

Mircoles

Jueves

Viernes

Maana Tarde Noche

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. Para ver el tamao de la imagen, vamos a la doble ventana del sitio y all obtenemos informacin sobre su tamao:

As vemos que la imagen obras03 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. El tamao indicado por Dreamweaver es una aproximacin por exceso al nmero entero ms prximo. El tamao exacto se consigue con el Explorador de Windows: Botn derecho del ratn sobre el archivo y Propiedades. En los casos anteriores el tamao exacto es de 2,79 y 23,8 KB respectivamente:

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 8,88 KB y, siempre sin hacer un uso abusivo, estos gifs animados puedan alegrar nuestra pginas. Este gif se ha sacado de la siguiente direccin: http://ausmall.com.au/freegraf/freegrfa.htm Aunque hay muchos otros sitios web que proporcionan gifs animados y sin animar de forma gratuita.

12.- 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.

12.1.- 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 de la seccin Vnculo dentro del panel de Propiedades. Por ejemplo. Vamos a hacer que la frase ir a la pgina anterior sea un vnculo con la pgina anterior de este curso de Dreamweaver. Seleccionamos la frase

abrimos el panel Propiedades, si no est abierto, pinchamos en se abre la siguiente ventana:

que es la ventana de Seleccionar archivo. Se ha abierto en la carpeta en la que estoy trabajando ahora que es la carpeta raz del sitio. El documento al que se quiere enlazar se ha guardado con el nombre seis. Pues bien, se selecciona el documento

se pulsa el botn y ya est. 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. Comprobar que la frase ha cambiado de color y se ha quedado subrayada.

12.2.- 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:

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

12.3.- 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, al apartado 1, al apartado 2 y al apartado 3. 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 >

Insertar con nombre

de mens

>

Etiquetas invisibles

Punto de fijacin

Aparecer una ventana para que introduzcamos el nombre que le queremos dar. pongamos 1.

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 , y 4. 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)
Seleccionamos las frases y en la caja de texto del vnculo escribimos #1 , #2 , ... segn vaya correspondiendo

12.4.- 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 la pgina inicial al comienzo 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

12.5.- 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 utilizando la herramienta del panel de objetos. Abrimos el Panel: Ventana > Objetos

Aparecer el Panel de Objetos: Apenas lo hemos empleado de momento, pero desde este panel se pueden realizar muchas funciones. Una de ellas es sta:

Pinchamos en el sobre y se nos abre la siguiente ventana:

En el Texto: escribimos la palabra o palabras que queramos sean el enlace al correo (puede ser el nombre y apellido de la persona a cuyo correo enlazamos) y en el segundo cuadro de texto, eliminamos la direccin de correo que haya, y escribimos la que nos interese.

Dara como 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: .

La selecciono y me voy a ver el cdigo fuente pinchando en Ver lo siguiente:

Que me est diciendo que la imagen (img) se encuentra (src source en ingls) en la carpeta imag y se llama correo_sonrisa. Despus viene su medida en pxeles en anchura y altura. Pues bien, puedo colocar las etiquetas de enlace de correo anteriores: <a href="mailto:apuente@roble.pntic.mec.es"> delante y </a> detrs:

Dndole a

Archivo

>

Guardar

cuando hayas acabado, o bien, a

del siguiente panel que suele aparecer cuando se modifica directamente el cdigo:

Vuelvo 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.

14.- 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 intro

de lnea
Vamos a observar el cdigo que se genera cuando pulsamos el (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 salto de lnea. (Lo inserto) Observamos el cdigo que se ha escrito:

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.

15.- 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.

16.- 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 aaaa aaaa Este es el cdigo que, sta vez, hemos escrito directamente:

No olvidarse de pulsar el botn cuando hacemos cambios directamente en el cdigo (Tambien se puede guardar dando a Archivo > Guardar )

17.- Marcos ( I )
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 ver el funcionamiento de este marco pulsa aqu. 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.

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:

Pulsamos

Ventana

>

Objetos

Aparecer el panel objetos. Pinchamos en la flechita y elegimos Marcos

Aparecer el panel de Marcos

Colocando el cursor sobre cada uno de los iconos nos muestra los diferentes conjuntos de marcos que podemos insertar. El ltimo icono: sirve para dividir el marco principal en cuatro partes iguales. Una vez decidido qu conjunto de marcos vamos a utilizar 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. 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:

Procedemos a Guardar. Elegimos

Guardar todos los marcos:

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

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.htm (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-9. Nosotros le podemos llamar conjunto o bien index porque es la pgina que se va a abrir al principio con todos los marcos cargados. Observa el cordn que recorre todo el espacio, eso nos indica que es el conjunto de marcos lo que estamos guardando.

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

Fjate que aparece el documento index que acabamos de llamar y guardar y que ser el conjunto de los tres marcos o frames.

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. Le ponemos el nombre que nos parezca, por ejemplo, indice. Le damos a

Guardar

y aparecer la ltima ventana:

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.htm que veamos en la carpeta marcos. Volvemos a nuestra ventana documento:

Ahora podemos cerrar la ventana documento para ver el sitio:

Observamos que aparecen los cuatro documentos:

index.htm con la estructura de todos los marcos. indice.html 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:

Renombrar

Y le cambiamos el nombre:

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.

18.- Marcos ( II )
Vamos a intentar entender un poco la estructura de este complejo sistema. Abrimos nuestro

index.htm

haciendo doble clic sobre l.

Queremos ver el cdigo fuente del documento que contiene la estructura de los marcos. Para ello, debemos abrir Ventana > Marcos Aparecer este panel:

En l, aparece un mapa de los marcos con su nombre: topFrame para el ttulo, leftFrame para el de la izquierda y mainFrame

para el principal. Si pulsamos encima de los bordes barra de estado aparecer la etiqueta referencia al conjunto de marcos

, en la

<frameset>

que hace

En este momento podemos pulsar el botn fuente de esa estructura de marcos:

para ver el cdigo

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:

18.1.- 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:

Seleccionamos el propiedades:

y pinchamos en la carpeta

del

panel de

Nos aparecer la ventana de

seleccin de archivos.

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

Dest:

Elegimos

mainFrame F12

Guardamos todos los marcos.

Le damos a funciona:

para comprobar con el navegador que nuestro enlace

19.- 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. Insertar
>

Para insertar un formulario lo hacemos desde

Formulario

Aparecer en nuestra ventana documento un rectngulo cuyos lados son una lnea discontinua de color rojo:

Nos situamos en el interior del rectngulo con el cursor y le damos a Insertar > Objetos de formulario Aparecer la siguiente relacin de objetos que podemos insertar

Lo mismo lo podemos encontrar de una manera grfica, y por tanto, ms intuitiva, desde Ventana > Objetos > Formulario

Antes de continuar con la insercin de los diferentes objetos del formulario, vamos a insertar, dentro del formulario, una tabla para que los objetos se queden ordenados de manera ms presentable. As nos situamos dentro del rectngulo rojo e Insertar > Tabla Aparecer la ventana de configuracin de nuestra tabla. Escribimos 6 filas (ya veremos cuntas necesitamos ms adelante, y dos columnas, un ancho inferior al 100% de nuestro documento y, mejor, sin borde:

Le damos a Aceptar y, despus centramos la tabla seleccionndola y eligiendo

Alinear Centro

del panel de

Propiedades de la tabla.

El aspecto inicial de nuestra tabla y formulario ser algo as:

En la columna de la izquierda, y alineado a la derecha , escribiremos el texto de lo que queramos preguntar o conocer y en la columna de la derecha, y alineado a la izquierda , insertaremos el objeto de formulario correspondiente.

19.1.- Campo de texto.

Supongamos que queremos hacer un formulario que recoja la opinin del visitante sobre nuestra pagina web. 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 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

19.2.- 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

Aparecer la ventana 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:

Y nuestro formulario va teniendo este aspecto:

Ponemos un tercer botn con la opcin de que la pgina es 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:

19.3.- Casillas de verificacin.

Vamos a insertar ahora

casillas de verificacin

(permiten elegir varias opciones). En 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 . Aparecer la ventana de propiedades de esa casilla

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:

19.4.- 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 ventana: . Aparecer la siguiente

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

Vamos escribiendo en

Etiqueta del elemento.

En

Valor

los elementos del men, 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 navedador:

Podemos incluir una lo podemos definir:

campo de texto para comentarios.

El campo

Lo introducimos:

Se nos han acabado las celdas. Introducimos un par ms de filas en la tabla: Modificar > Tabla > Insertar filas o columnas:

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

Tendr este aspecto:

19.5.- 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 primer botn 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:

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:

La ltima fila del formulario tiene este aspecto:

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 ventana: . Aparecer la siguiente

En Accin escribimos mailto:direcciondecorreo. Por ejemplo en mi caso, escribira mailto:apuente@roble.cnice.mecd.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". Esto lo vamos a escribir 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:

Nuestro formulario ya tiene que funcionar. 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. Pues bien, este curso de acabado.

iniciacin a Dreamweaver 4

se da por

Si lo deseas puedes contestar al cuestionario que acabamos de hacer pinchando aqu

Pulsa aqu...

ngel R. Puente Prez

Ya puedes visitar la continuacin de este curso de iniciacin: http://www.terra.es/personal8/angelpere/