Practicar
las operaciones necesarias para insertar y configurar
algunos elementos de formulario.
Ejercicio
Si no tienes abierto
Dreamweaver, ábrelo para realizar el ejercicio.
Si no aparece el panel Archivos,
ábrelo a través del menú Ventana,
opción Archivos.
Selecciona el sitio Cocina en el panel Archivos.
Haz doble clic sobre el documento
tureceta.htm, que aparece en el panel Archivos.
Se abrirá el documento en Dreamweaver.
Si no aparece el inspector
de propiedades, ábrelo a través del menú
Ventana, opción Propiedades.
Si el inspector
de propiedades no se muestra en su totalidad, pulsa sobre el
botón
para desplegar sus propiedades más avanzadas.
No es necesario insertar el formulario,
ya está creado. Dentro de él hay dos tablas. Sitúa
el cursor dentro de la última celda de la primera fila de la primera tabla. Observa que le hemos definido un estilo, como a cualquier otro elemento.
Abre el panel Insertar. Si no lo encuentras, puedes acceder a él desde el menú Ventanas.
Elige la opción
Formularios. Conviene que tengas el panel siempre visible, ya que insertaremos varios elementos.
Pulsa sobre
Campo de texto en el panel Insertar.
Se abrirá un cuadro de diálogo. En ID introduce el nombre que le daremos, en este caso nombre. En Etiqueta marca No hay etiqueta de rótulo, pues ya tenemos los textos insertados. Pulsa Aceptar. (Si no te ha aparecido este diálogo, introduce el nombre desde el inspector de propiedades).
Haz clic sobre el campo de texto
para seleccionarlo.
En Campo
de texto, del inspector de propiedades,
veras el nombre. Si lo habías introducido antes, puedes hacerlo.
En Cars
máx escribe 50 para limitar el número máximo de caracteres.
En Tipo
estará seleccionado Una línea.
Sitúa el cursor dentro
de la última celda de la segunda fila de la primera tabla.
Repite los pasos del 10 al 15,
pero con las siguientes diferencias:
En Campo de texto
escribe email.
En Cars máx
escribe 40.
Sitúa el cursor dentro
de la segunda celda de la primera fila de la segunda tabla.
Repite los pasos del 9 al 15,
pero con las siguientes diferencias:
En Campo de texto escribe receta.
En Cars máx escribe 25.
Sitúa el cursor dentro
de la segunda celda de la segunda fila de la segunda tabla.
Elige la opción
Seleccionar (Lista/menú) en el panel Insertar.
En el cuadro de diálogo, introduce tipo en el campo ID.
Haz clic sobre el objeto de lista/menú
para seleccionarlo.
En Tipo
selecciona Menú.
Haz clic sobre el botón
Valores de lista.
Escribe Plato en Etiqueta de elemento.
Pulsa sobre el botón
para insertar nuevos elementos en la lista. Añade la etiqueta
Postre.
Haz clic sobre el botón
Aceptar.
Selecciona Plato en Seleccionado inicialmente.
Sitúa el cursor dentro
de la primera celda de la cuarta fila de la segunda tabla.
Pulsa en la opción
Área de texto en el panel Insertar.
Se abrirá un cuadro de diálogo. Escribe como ID ingredientes y pulsa Aceptar.
Haz clic sobre el área
de texto para seleccionarlo.
En Tipo
selecciona Varías líneas.
En Ancho
car escribe 30.
En Líneas
núm escribe 5.
Sitúa el cursor en la celda que hay debajo de la que pone Preparación:.
Repite los pasos del 35 al 40,
pero con las siguientes diferencias:
En ID escribe preparacion.
En Ancho
car escribe 20.
En Líneas
núm escribe 8.
Sitúa el cursor en la última celda de la segunda tabla.
Elige la opción
Botón en el panel Insertar.
En el diálogo, deja los campos en blanco y pulsa Aceptar. No es necesario establecer el nombre porque los botones no contienen datos.
Sitúa el cursor a la derecha
del botón.
Repite los pasos 47 y 48 para insertar otro botón.
Selecciona el nuevo botón.
En Acción
selecciona Restablecer formulario.
En Valor, escribe Borrar.
Con la tecla Ctrl selecciona la celda que contiene los botones, y en desplegable Horiz. elige Centro.
Para que el formulario tenga sentido, hemos de enviar los datos a una página capaz de tratarlos. Selecciona todo el formulario, y en el campo Acción copia la siguiente dirección: http://www.aulaclic.es/dreamweaver-cs4/ejemplos/sitios/cocina/recibirreceta.php
En el campo Destino elige _blank para que se abra en una ventana nueva.
Haz clic sobre el botón Guardar
de la barra de herramientas.
Ahora puedes probar el funcionamiento de los elementos del formulario, abre el documento en tu navegador o en la Vista en vivo y rellena los campos. Si pulsas en Enviar, se enviarán los datos a la página indicada en el campo acción.