Dreamweaver (II)

por David Berruezo

rea de Formacin del Profesorado
Centro Regional de Innovacin y Formacin Las Acacias
Departamento de Tecnologas de la Informacin y la Comunicacin
C/ General Ricardos n 179
Tfno: 91 525 18 93 ext. 47 y 48
Fax: 91 525 58 88

http://www.madrid.org/sfp/acacias/tic



Comunidad de Madrid
CONSEJERA DE EDUCACIN
Direccin General de Ordenacin Acadmica
Diseo de pginas web Curso 2003/04


Tablas 3
Seleccionar elementos 4
Formularios 8
Elementos de un formulario 8
Formularios en Dreamweaver 10
2
Diseo de pginas web Curso 2003/04


Tablas
Las tablas son un elemento muy importante en el diseo de pginas web. No
solo permiten la presentacin ordenada de imgenes y datos sino que tambin
permiten dar un formato vertical y horizontal al diseo de la pgina, controlando
la alineacin de todos los elementos y evitando que estos se descoloquen si
cambiamos de navegador o resolucin.
Las tablas estn compuestas por tres elementos:
Filas: que son los espacios horizontales
Columnas: que son los espacios verticales
Celdas: es lo que se origina en el cruce de filas y columnas
Para insertar una tabla hay que seguir los siguientes pasos:

1. Situar el cursor donde queramos insertar la tabla
2. Desplegar el men "Insertar" y seleccionar la opcin "Tabla". A
continuacin se abrir el cuadro de dilogo que aparece en la
imagen, en el que podemos encontrar lo siguiente:
Filas: para indicar el nmero de filas.
Columnas: para indicar el nmero de columnas.
Relleno de celda: por el indicamos el nmero de pxeles que habr entre
el contenido de la
celda y el lmite de
esta.
Espacio celda: es el
espacio entre celdas.
Ancho: expresa el
ancho de la tabla.
Puede indicarse en
porcentaje o en
nmero de pxeles.
Borde: indica el ancho del borde de la tabla en nmero de pxeles. Si
utilizamos la tabla slo para ordenar los elementos en la pgina
pondremos cero en el tamao del borde.
A partir de aqu ya podemos insertar lo que queramos en cualquier celda de la
tabla, con solo seleccionarla previamente. No hay ninguna diferencia entre una
celda de una tabla y una pgina en blanco a la hora de insertar texto, imgenes
y otros elementos, la forma de operar es la misma.
Como cualquier elemento de los que hemos venido mostrando, la tabla tiene
una serie de caractersticas configurables a las que podemos acceder a travs
de la pantalla de Propiedades ("Control + F3"). Dicha ventana tiene el aspecto
que parece en la imagen y contiene los siguientes elementos:
3
Diseo de pginas web Curso 2003/04


En la parte superior aparecen las caractersticas principales como el
nmero de filas y columnas, el tamao de la tabla en porcentaje o
pxeles, el relleno y espaciado de celdas, as como la alineacin de la
tabla en relacin a la hoja del documento y el tamao del borde de la
misma.
En la parte inferior podemos indicar el color de fondo de la tabla, el color
del borde de la tabla o bien podemos seleccionar la imagen que servir
de fondo para nuestra tabla (Im.).
Como ya hemos dicho, los elementos que componen una tabla son las filas y
columnas, y los cruces que se producen entre ellas reciben el nombre de
celdas. Las celdas, como elemento ms pequeo de la tabla, tambin tienen
una ventana de propiedades que pasamos a detallar:

La parte superior de la ventana corresponde con las caractersticas del texto
que ya explicamos en su momento, y en la parte inferior aparecen las
caractersticas especficas de la celda que pasamos a explicar a continuacin:
A la derecha encontramos la palabra "Celda" y debajo dos botones; el de
la derecha para dividir celdas y el de la izquierda para combinarlas.
A la derecha encontramos dos mini - ventanas Horiz y Vert con las que
podemos controlar la alineacin, tanto horizontal como vertical, de los
elementos dentro de la celda o celdas seleccionadas.
A continuacin aparecen An y Al donde podremos decidir el tamao de la
celda (ancho y alto) en nmero de pxeles.
No aj. es la opcin de no ajuste, para evitar que se ajuste el texto al
tamao de la celda.
Enc. se utiliza para aplicar el formato de encabezado de la tabla a las
celdas.
Despus aparece Fnd (fondo) que es la opcin para el fondo de pgina.
Podemos poner como fondo una imagen, que seleccionaremos en el
cuadro de texto de arriba (Fnd). O bien podemos poner un color de fondo
(Fnd).
Con la opcin Borde podremos elegir un color para los bordes de tabla.
Seleccionar elementos
Una de las operaciones principales es la de Seleccionar Tabla. Para ello
debemos situar el ratn sobre la tabla que queremos seleccionar y pinchar el
4
Diseo de pginas web Curso 2003/04

botn derecho del ratn. A continuacin se desplegar un men, en el que al
situar el cursor sobre la opcin "Tabla", se
abrir un submen. Al pinchar sobre
"Seleccionar tabla" la tabla quedar
seleccionada y podremos hacer
modificaciones que afectarn a su totalidad.
Seleccionar celda
Otra operacin es seleccionar una celda para
poder transformarla u operar con
independencia del resto de las celdas de su
misma tabla. Para ello debemos situar el
cursor sobre la celda que queremos
seleccionar y manteniendo pulsada la tecla
Control, debemos hacer clic sobre dicha
celda. Si hemos dado los pasos
correctamente, la celda aparecer marcada
con un trazo ms grueso.
Si queremos seleccionar ms celdas de la
tabla, operaremos de la misma forma, es
decir, cada vez que queramos hacer una
nueva seleccin, haremos clic sobre la celda con la tecla Control pulsada.

Grupo de celdas contiguas
En el punto anterior hemos visto como seleccionar una celda individualmente o
un grupo de celdas no contiguas. Para seleccionar un grupo de celdas
contiguas debemos pinchar sobre una de ellas y arrastrar el puntero por todas
aquellas que deseemos seleccionar. Segn vayamos arrastrando el ratn ir
apareciendo la marca de seleccin en las celdas.



Dividir y combinar celdas
Estas operaciones permiten unir o dividir cualquier celda de la tabla que
previamente hayamos seleccionado.
Para realizar la operacin de dividir una celda debemos seguir los siguientes
pasos:
5
Diseo de pginas web Curso 2003/04

1. Seleccionar la celda que queremos dividir.
2. Desplegar el men
"Modificar".
3. Seleccionar "Tabla" y
desplegar el submen.
4. Marcar la opcin "Dividir
celdas".
5. A continuacin aparecer
un pequeo cuadro de
dilogo donde podemos
decidir si queremos que la
divisin se haga en filas o columnas, y el nmero de estas en que
queremos que se divida. (Nota: permitir divisin solo en filas o solo en
columnas, pero no combinada).
Para combinar celdas, el procedimiento de operacin es similar. Los pasos a
seguir son los siguientes:
1. Seleccionar las celdas que queremos combinar. Tener en cuenta que
solo se podrn combinar celdas que sean contiguas.
2. Desplegar el men "Modificar".
3. Seleccionar "Tabla" y desplegar el submen.
4. Marcar la opcin "Combinar celdas", y automticamente las celdas
quedarn unidas en una sola.
Insertar filas y columnas
En numerosas ocasiones se puede dar la situacin que una vez construida una
tabla, necesitemos ampliarla tanto horizontalmente (aadir columnas) como
verticalmente (aadir filas) para introducir mas datos. Con estas operaciones
podremos cubrir esas necesidades de forma muy sencilla.
Para aadir una fila tendremos que seguir los siguientes pasos:
1. Seleccionar una fila de la tabla. Esto nos servir de referencia. Hay que
tener en cuenta que la nueva fila aparecer por encima de la fila
seleccionada previamente.
2. Desplegar el men "Modificar".
3. Seleccionar "Tabla" y desplegar el submen.
4. Marcar la opcin "Insertar fila". Como hemos indicado arriba, la nueva
fila aparecer por encima de la fila seleccionada.

El proceso para aadir una columna es casi idntico al de aadir una fila. Los
pasos a seguir son:
1. Seleccionar una columna de la tabla. Esto nos servir de referencia. Hay
que tener en cuenta que la nueva columna aparecer a la izquierda de la
columna seleccionada previamente.
2. Desplegar el men "Modificar".
3. Seleccionar "Tabla" y desplegar el submen.
6
Diseo de pginas web Curso 2003/04

4. Marcar la opcin "Insertar columna". Como hemos indicado arriba, la
nueva fila aparecer por encima de la fila seleccionada.
Borrar filas o columnas
Para borrar filas o columnas de una tabla se proceder de la misma forma que
en los dos apartados anteriores solo que en vez de seleccionar las opciones
"Insertar fila" e "Insertar columna" se escogern las opciones "Borrar fila" y
Borrar columna" segn corresponda a filas o columnas.

Las opciones anteriores solamente nos permiten insertar las filas o las
columnas de una en una. Si queremos aadir varias filas o columnas de una
vez tendremos dar los siguientes pasos:
1. Seleccionar una fila o una columna de la tabla.
2. Desplegar el men
"Modificar".
3. Seleccionar "Tabla" y
desplegar el submen.
4. Marcar la opcin "Insertar filas
o columnas". A continuacin
aparecer un cuadro de
dilogo con las opciones de
aadir filas o columnas.
Adems nos ofrece la
posibilidad de decidir si queremos que aparezcan antes (a la izquierda) o
despus (a la derecha) de la celda seleccionada en el caso de las
columnas, o bien por encima o por debajo de la seleccin en el caso de las
filas.
7
Diseo de pginas web Curso 2003/04

Formularios
Un formulario es un elemento que nos permite interactuar con el usuario y
obtener informacin de l. La informacin que obtenemos a travs del cdigo
HTML, podemos pasarla a otro programa para que la procese (CGI),
transformarla para ofrecer un resultado al usuario que nos la proporcion
(Javascript), o bien enviarla a travs del correo electrnico a la direccin que
queramos.
La etiqueta que define el inicio de un formulario es <FORM> y el final ser
</FORM> y todos los elementos que pertenezcan al formulario debern
aparecer entre estas dos etiquetas. La etiqueta <FORM> tiene una serie de
atributos:

name: Es el nombre del formulario.
method: Es una cadena que tiene el nombre del mtodo con el que se va a
recibir/procesar la informacin del formulario (GET/POST).
action: Determina la accin que debe realizar el formulario. Por ejemplo,
enviar el contenido del formulario a una direccin de correo.
enctype: Es una cadena que tiene la codificacin mime empleada para
enviar el contenido del formulario a travs de la red.

<form name="formu1" method="post" action="mailto: direccion1@madrid.org"
enctype="text/plain">
Elementos de un formulario
Son las distintas herramientas que nos ayudarn a interrogar al usuario para
extraer la informacin que requerimos. A continuacin los enumeraremos
explicando como se aaden y que caractersticas tienen:
Campo de texto: es el elemento del formulario que permite que el usuario
escriba libremente texto. Los hay de una lnea para respuestas cortas, de
varias lneas para respuestas mas largas y con contrasea, que son aquellos
que lo que escribe el usuario queda oculto, y solo aparecen asteriscos o
vietas.
La palabra "input" va a ser comn en la mayora de los elementos y significa
entrada. Despus tenemos el modificador "type" que va a indicar que el tipo de
elementos que vamos a utilizar. Para el campo de texto se utiliza "text" como
podis observar en la etiqueta. Despus tenemos el modificador "value", que
es el que nos va a permitir referirnos al contenido del elemento, en este caso el
campo de texto. Para referirnos a l, lo haremos de la siguiente forma:
name.value, es decir, primero lo identificaremos por su nombre, y luego
indicaremos que nos vamos a referir a su valor o contenido. Como el campo de
texto que tenemos en el ejemplo no est relleno, el modificador value no
aparece en la etiqueta, pero en cuanto el usuario comenzase a rellenarlo, ste
aparecera..

<input type="text" name="textfield">
8
Diseo de pginas web Curso 2003/04

Botn: los botones realizan tareas cuando se hace clic en ellos como puede ser
Enviar o Restablecer. Podemos personalizar las etiquetas de cada botn.
De la misma manera que arriba, la etiqueta comienza por la palabra "input".
Despus el tipo de elemento, que recibe el nombre de "button". Despus
tenemos el modificador name que indicar la accin que va a llevarse a cabo
cuando se pulse el botn: Sumit enviar el formulario a la direccin indicada en
el formulario y Reset limpiar todas las opciones y campos rellenados del
formulario dejndolo como cuando cargamos la pgina. Y por ltimo el valor
(value) que es la leyenda visible que aparecer sobre el botn. Este elemento,
como hemos explicado arriba, no recogera informacin de una forma digamos,
"convencional", pero si recoge informacin en cuanto al deseo por parte del
usuario de realizar la accin que tenga asociada el botn.
<input type="button" name="Submit" value="Texto">
Casilla de verificacin: sirve para que el usuario seleccione opciones de forma
independiente, es decir, puede seleccionar tantas opciones como desee.
Adems los botones son independientes entre s.
La etiqueta es prcticamente igual a la del campo de texto, con la nica
diferencia en el tipo del elemento, que para la casilla de verificacin es
"checkbox". Hay que tener en cuenta que el valor que recoge este elemento
ser un valor booleano.

<input type="checkbox" name="checkbox" value="checkbox">
Botn de opcin: se diferencia de la casilla de verificacin en que aqu solo se
puede seleccionar una opcin, es decir, son excluyentes, siempre que estn
agrupados bajo el mismo nombre.
La etiqueta, igual que en el caso anterior, solo vara el tipo de elemento,
"radio". Como hemos dicho, si queremos que las opciones que muestran varios
botones de opcin sean excluyentes, tienen que tener el mismo "name".

<input type="radio" name="radiobutton" value="radiobutton">
Lista / Men: la lista o men nos permite ofrecer al usuario una serie de
opciones entre las que pueda elegir. Suele utilizarse cuando el espacio es
reducido.
El caso de la Lista / Men puede parecer diferente, pero en el fondo no es as.
En principio no utiliza la etiqueta "input", sino la etiqueta "select", aunque sea
un elemento de entrada de datos como los anteriores. No tiene modificador
"type", y el valor ("value") lo toma de la opcin que seleccionemos aunque no
aparezca en la etiqueta. Cada opcin viene delimitada por las etiquetas
9
Diseo de pginas web Curso 2003/04

<option> y </option>. Observar que nos da la posibilidad de tener una opcin
seleccionada por defecto. Esto lo indicamos con la etiqueta "option selected".
Alicante

<select name="select" size="1">
<option selected>Alicante</option>
<option>Barcelona</option>
<option>Madrid</option>
<option>Sevilla</option>
</select>
Formularios en Dreamweaver
En Dreamweaver no es necesario crear el formulario antes de poder insertar
ningn elemento, pero Dreamweaver genera un mensaje diciendo que el
formulario no ha sido creado y nos preguntar si queremos que lo cree en ese
instante. Podramos insertar elementos del formulario sin necesidad de crearlo,
pero su uso sera distinto al que pretendemos darle en esta unidad.
Para crear un formulario, Dreamweaver tan solo escribe las etiquetas form
entre las que aparecern todos los elementos del formulario para que la
informacin que se obtiene a travs de ellos se procesada.
Para crear un formulario hay que hacer lo siguiente:
Desplegar men "Insertar" y seleccionar la opcin "Formulario". A
continuacin aparecer un rectngulo de rayas rojas discontinuas que
marcar los lmites del cuestionario.
10
Diseo de pginas web Curso 2003/04

Una vez creado el formulario, podremos insertar los elementos que queramos.
Para ello podemos seleccionar la opcin "Objetos de formulario" del men
"Insertar".


O bien
desplega
ndo el men
aparecer una ventana vertical a la derecha de la pantalla. En
esta ventana aparecern grficamente, los elementos que
queramos manejar en cada momento. En este caso habr que
seleccionar la opcin "Formularios" para que aparezcan los
elementos especficos de los cuestionarios.
"Ventana", seleccionando la opcin "Insertar"
Para insertarlos en el cuestionario, simplemente habr que situar
Los elementos que pueden aparecer en un formulario son los
el cursor donde queramos que aparezcan y seleccionarlos de
cualquiera de los dos mens anteriormente sealados (Texto o
Grfico).
siguientes:
11
Diseo de pginas web Curso 2003/04

Campo de texto: es el elemento del formulario que permite que el
usuario escriba una respuesta. Los hay de una lnea para respuestas
cortas, de varias lneas para respuestas mas largas y con contrasea,
que son aquellos que lo que escribe el usuario queda oculto, y solo
aparecen asteriscos o vietas.
Botn: los botones realizan tareas cuando se hace clic en ellos como
puede ser Enviar o Restablecer. Podemos personalizar las etiquetas de
cada botn.
Casilla de verificacin: sirve para que el usuario seleccione opciones de
forma independiente, es decir, puede seleccionar tantas opciones como
desee. Adems los botones son independientes entre si.
Botn de opcin: se diferencia de la casilla de verificacin en que aqu
solo se puede seleccionar una opcin, es decir, son excluyentes, siempre
que se ponga el mismo nombre en todos ellos.
Listas/Mens: la lista o men nos permite ofrecer al usuario una serie de
opciones entre las que pueda elegir. Suele utilizarse cuando el espacio es
reducido.
Campo de archivo: se utiliza para cuando el usuario desea enviar un
archivo. Crea un botn de examinar para buscar el archivo en el
ordenador. Este campo solo puede ser utilizado si el formulario se define
como POST.
Campo oculto: se utilizan para almacenar informacin introducida por el
usuario sin que sea visible en la pantalla.
Campo de imagen: nos permite insertar una imagen en un formulario.
Funciona de la misma forma que la operacin de insertar una imagen.
Men de Salto: inserta una lista de navegacin. Muestra distintas
opciones a donde se permite saltar. El procedimiento para su
construccin es distinto al resto. Al seleccionar el men "Insertar", el
submen "Objetos de formulario" y la opcin "Men de salto" aparecer
una ventana para configurar las caractersticas:

12
Diseo de pginas web Curso 2003/04


Elementos del men: donde introduciremos todas las opciones que
queramos que ofrezca nuestro men de salto.
Texto: el nombre de cada una de estas opciones. Hay que procurar que
sea significativo para orientar al usuario.
Al seleccionarse, ir a URL: fichero o direccin URL a donde se producir
el salto cuando seleccionemos la opcin.
Abrir URL en: para indicar como queremos que habr la nueva
ubicacin. Tendremos tantas opciones como marcos (frames) tenga
nuestra pgina.
Nombre del men: el nombre del men.
Opciones: insertar un botn de Ir detrs del men, y que quede
seleccionado el primer elemento despus de cualquier salto.
Enviar informacin de un formulario
Cuando diseamos un formulario con Dreamweaver, los datos obtenidos del
cuestionario generalmente se envan a una direccin de correo.
Para indicar la direccin de correo a la que se envan los datos obtenidos del
formulario, hay que especificar que la accin del formulario ser enviar un
correo electrnico a esa direccin. Estos datos se incluyen dentro de la etiqueta
del formulario (<form>). Por ejemplo, si en el formulario que estamos diseando
(que se llama "formu1") queremos enviar los datos a una direccin de correo
concreta ("direccion1@madrid.org"):

<form name="formu1" method="post" action="mailto:direccion1@madrid.org">

Desde la ventana de propiedades de Dreamweaver, tambin podemos incluir la
accin a realizar con los datos del formulario. Deberemos indicar en el campo
"Accin" de la ventana de propiedades de formulario, la direccin de correo
electrnico a la que se envan estos datos, introduciendo el nombre de accin
"mailto:". Vemos en la siguiente figura un ejemplo:
13
Diseo de pginas web Curso 2003/04

14



Para que los datos vayan en el cuerpo del mensaje deberemos introducir
dentro de la etiqueta <form> el modificador "enctype" con el valor "text/plain". Si
no incluimos este modificador, los datos se enviarn como un archivo adjunto al
mensaje de correo. En el ejemplo anterior, sera:

<form name="formu1" method="post" action="mailto: direccion1@madrid.org"
enctype="text/plain">

Los datos llegan en un mensaje de texto con el nombre del campo seguido del
valor rellenado por el usuario que ha enviado el formulario.