Manejo de tablas en DreamWeaver
Las tablas sirven para organizar datos e imágenes en un archivo HTML.
Consisten de tres elementos básicos: filas, columnas y celdas (que surgen de la intersección de una fila con columna). Para crear una tabla debemos hacer clic sobre el botón Insertar tabla (Insert Table) de la paleta de Objetos.
Se abrirá un cuadro de diálogo que nos preguntará cuántas filas y cuantas columnas tendrá nuestra tabla, qué ancho tendrá y si tendrá borde.
El Cellpading: especifica la cantidad de pixels entre la celda y el borde de la celda.
El Cellspacing: especifica la cantidad de pixels entre celda y celda.
Las tablas se hacen en principio con las medidas en porcentaje pero si luego queremos que el usuario al achicar su navegador, éste no intente redimensionar la tabla al nuevo tamaño, lo que debemos hacer es convertir las medidas de porcentaje a pixels. Esto se hace con la tabla seleccionada desde el inspector de propiedades. Hay un icono con la sigla Px que permite convertir las medidas de tabla a
pixels.
Podemos importar en Dreamweaver como una tabla, datos creados y con otra aplicación como Microsoft Excel. Para ello debemos hacer click sobre el botón Insertar datos tabulados (Insert tabular data) de la paleta de objetos. Se abrirá un cuadro de diálogo que nos pedirá que le indiquemos la ubicación del archivo. En el campo Delimitador debemos indicarle el tipo de delimitador con que fue guardado el archivo que estamos importando (coma, punto y coma, etc.). Luego debemos ingresar un ancho de tabla :
Ajustar a los datos (Fit to data): Para que adopte el ancho de acuerdo al valor mas largo de nuestro archivo.
Fijar (Set) : Para fijar el ancho de la tabla en porcentaje con respecto
a la ventana del navegador o en pixels.
Luego seleccionamos las opciones de formato de la tabla (borde,itálica, negrita, espaciado de celdas) y oprimimos OK para importar.
Lo bueno que tiene el dreamweaver 4 es que ahora podemos diseñar las celdas directamente desde la tabla, solo tenemos que hacer click en la barra de propiedades, layout (debajo de todo) en la parte de common y vean el siguiente gráfico:
Manejo de Formularios en
DreamWeaver.
Esta lección nos
enseñará qué es un formulario, para qué se utiliza, cómo insertar uno, qué elementos
puede contener y cómo pueden validarse los datos introducidos en él.
Los formularios se
utilizan para recoger datos de los usuarios, nos pueden servir para realizar un
pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios,
recibir preguntas, hacer suscripciones a un boletín o revista que editemos,
etc.
Una vez el usuario
rellena los datos y pulsa el botón para enviar el formulario se arrancará un
programa que recibirá los datos y hará el tratamiento correspondiente (una base
de datos por ejemplo).
Aquí vamos a ver cómo
crear el formulario básico, (insertar campos y botones en el formulario y
validarlos) , pero no la parte de tratamiento de los datos, ya que para ello se
necesitan nociones de programación, ya sea en SQL, en JavaScript o en otro
lenguaje de programación, y esto no entra en los objetivos de esta lección.
Un formulario está
formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables,
y botones.
Elementos de
formulario
Los elementos de
formulario pueden insertarse en una página a través del menú Insertar, opción
Objetos de formulario. A través de esta opción se puede acceder a la lista de
todos los objetos de formulario que pueden ser insertados en la página. Vamos a
ver uno por uno algunos de los distintos elementos que pueden formar parte de
un formulario, así como algunas de sus propiedades.
Campo de texto y Área de
texto: Permiten añadir un cuadro de texto. El Campo de texto solo permite
escribir una línea al usuario, mientras que el Área de texto permite escribir
varias. Se puede pasar de Campo de texto a Área de texto a través del inspector
de propiedades. También es posible definirlo como Contraseña. A continuación
tienes un ejemplo de cada uno de estos tres tipos.
A través del inspector
de propiedades es posible asignar también el ancho del cuadro de texto, el
número máximo de líneas o caracteres, y el valor inicial del cuadro.
Botón: Es el botón
tradicional. El botón puede tener asignadas tres opciones: Enviar formulario,
Restablecer formulario (borrar todos los campos del formulario), o Ninguna
(para poder asignarle un comportamiento diferente de los dos anteriores).
También es posible
cambiar el texto del botón, a través del campo Etiqueta del inspector de
propiedades.
Casilla de
verificación: Es un cuadrito que se puede activar o desactivar. Puede
asignársele el estado inicial como Activado o como Desactivado.
Botón de opción: Es un pequeño botón redondo que puede activarse o desactivarse. Si hay varios del mismo formulario, solo puede haber uno activado. Cuando se activa uno, automáticamente se desactivan los demás.
Lista/Menú: Una lista
o menú es un elemento de formulario que lleva asociada una lista de opciones.
Los elementos se añaden a través de botón Valores de lista del inspector de
propiedades. Cuando se trata de un menú, solo es posible elegir uno de los
elementos, pero si se trata de una lista, a través de Selecciones puede
permitirse que se seleccionen varios simultaneamente.
Etiqueta: Se utiliza
para ponerle nombres al resto de elementos de formulario, para que el usuario
pueda saber qué datos ha de introducir en cada uno de ellos.
Crear formularios
Puedes crear
formularios a través del menú Insertar, opción Formulario. Una vez creado un
formulario, este aparecerá en la ventana de Dreamweaver como un recuadro
formado por líneas rojas discontinuas, similar al de la imagen de siguiente.
Dentro de dicho
formulario se podrán insertar los elementos de formulario, que como ya sabes
puedes insertarlos a través del menú Insertar, opción Objetos de formulario.
Es muy recomendable
utilizar tablas para organizar los elementos de los formularios. Utilizando
tablas se consigue una mejor distribución de los elementos del formulario, lo
que facilita su comprensión y mejora su apariencia.
Validar formularios
La validación de formularios
sirve para hacer que Javascript valide el formulario antes de que se envie el
formulario, para que en el caso de que hayan campos del formulario que sean
obligatorios, tengan que rellenarse antes de poder enviarse.
Para validar un
formulario hay que abrir el panel de Comportamientos. Este panel se puede abrir
a través del menú Ventana, opción Comportamientos, o pulsando Mayús+F3.
En el este panel hay que desplegar el botón pulsando sobre él, y en Mostrar eventos para elegir una versión de las actuales de entre la lista de navegadores. Por ejemplo, puedes elegir el navegador IE 6.0. Después de esto, hay que volver a desplegar el botón , y pulsar sobre la opción Validar formulario.
Entonces se mostrará
una ventana como la siguiente, donde aparecen todos los elementos del
formulario.
Puede seleccionarse
uno por uno cada elemento del formulario, pudiendo especificar los requisitos
que ha de cumplir. Puede establecerse como campo a rellenar obligatoriamente, y
si su contenido ha de ser numérico, una dirección de correo electrónico, etc.
No hay comentarios:
Publicar un comentario