Unidad 9. Ejercicio paso a paso: Insertar elementos de formulario

Objetivo

Practicar las operaciones necesarias para insertar y configurar algunos elementos de formulario.

Ejercicio

  1. Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.
  2. Si no aparece el panel Archivos, ábrelo a través del menú Ventana, opción Archivos.
  3. Selecciona el sitio Cocina en el panel Archivos.
  4. Haz doble clic sobre el documento tureceta.htm, que aparece en el panel Archivos.

    Se abrirá el documento en Dreamweaver.
  5. Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades.
  6. Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botón para desplegar sus propiedades más avanzadas.
  7. 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 cualqueir otro elemento.
  8. Abre el panel Insertar. Si no lo encuentras, puedes acceder a él desde el menú Ventanas.
  9. Elige la opción Formularios. Conviene que tengas el panel siempre visible, ya que insertaremos varios elementos.
  10. Pulsa sobre Campo de texto el panel Insertar.
  11. 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).
  12. Haz clic sobre el campo de texto para seleccionarlo.
  13. En Campo de texto, del inspector de propiedades, veras el nombre. Si lo habías introducido antes, puedes hacerlo.
  14. En Cars máx escribe 50 para limitar el número máximo de caracteres.
  15. En Tipo estará seleccionado Una línea.
  16. Sitúa el cursor dentro de la última celda de la segunda fila de la primera tabla.
  17. Repite los pasos del 10 al 15, pero con las siguientes diferencias:
  18. En Campo de texto escribe email.
  19. En Cars máx escribe 40.
  20. Sitúa el cursor dentro de la segunda celda de la primera fila de la segunda tabla.
  21. Repite los pasos del 9 al 15, pero con las siguientes diferencias:
  22. En Campo de texto escribe receta.
  23. En Cars máx escribe 25.
  24. Sitúa el cursor dentro de la segunda celda de la segunda fila de la segunda tabla.
  25. Elige la opción Lista/menú en el panel Insertar.
  26. En el cuadro de diálogo, introduce receta en el campo ID.
  27. Haz clic sobre el objeto de lista/menú para seleccionarlo.
  28. En Tipo selecciona Menú.
  29. Haz clic sobre el botón Valores de lista.
  30. Escribe Plato en Etiqueta de elemento .
  31. Pulsa sobre el botón para insertar nuevos elementos en la lista. Añade la etiqueta Postre.
  32. Haz clic sobre el botón Aceptar.
  33. Selecciona Plato en Seleccionado inicialmente.
  34. Sitúa el cursor dentro de la primera celda de la cuarta fila de la segunda tabla.
  35. Pulsa en la opción Área de texto en el panel Insertar.
  36. Se abrirá un cuadro de diálogo. Escribe como ID ingredientes y pulsa Aceptar.
  37. Haz clic sobre el área de texto para seleccionarlo.
  38. En Tipo selecciona Varías líneas.
  39. En Ancho car escribe 30.
  40. En Líneas núm escribe 5.
  41. Sitúa el cursor en la celda que hay debajo de la que pone Preparación:.
  42. Repite los pasos del 35 al 40, pero con las siguientes diferencias:
  43. En ID escribe preparacion.
  44. En Ancho car escribe 20.
  45. En Líneas núm escribe 8.
  46. Sitúa el cursor en la última celda de la segunda tabla.
  47. Elige la opción Botón en el panel Insertar.
  48. En el diálogo, deja los campos en blanco y pulsa Aceptar. No es necesario establecer el nombre porque los botones no contienen datos.
  49. Sitúa el cursor a la derecha del botón.
  50. Repite los pasos 47 y 48 para insertar otro botón.
  51. Selecciona el nuevo botón.
  52. En Acción selecciona Restablecer formulario.
  53. En Valor, escribe Borrar.
  54. Con la tecla Ctrl selecciona la celda que contiene los botones, y en desplegable Horiz. elige Centro.
  55. 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
  56. En el campo Destino elige _blank para que se abra en una ventana nueva.
  57. Haz clic sobre el botón Guardar de la barra de herramientas.
  58. 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, no pasará nada porque hemos indicado nada en la Acción del formulario.

   Inicio    





Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.