dis_web_dw2.pdf

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


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


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


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


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


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


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 y el final ser y todos los elementos que pertenezcan al formulario debern aparecer entre estas dos etiquetas. La etiqueta 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.

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

8


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.

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.

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

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


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

Alicante

Alicante Barcelona Madrid Sevilla

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


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

desplegando 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


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


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 (). Por ejemplo, si en el formulario que estamos diseando (que se llama "formu1") queremos enviar los datos a una direccin de correo concreta ("[email protected]"): 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


14

Para que los datos vayan en el cuerpo del mensaje deberemos introducir dentro de la etiqueta 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: 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.

Documents

dis_web_dw2.pdf