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

Objetivo.

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

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.

8 Haz clic sobre el menú Insertar.

9 Elige la opción Formulario.

10 Elige la opción Campo de texto.

Se abrirá un cuadro de diálogo para incluir una etiqueta de texto al lado del campo, déjalo todo en blanco y pulsa Cancelar pues ya tenemos la etiqueta escrita.

11 Haz clic sobre el campo de texto para seleccionarlo.

12 En Campo de texto, del inspector de propiedades, escribe nombre.

13 En Cars máx escribe 50.

14 En Tipo selecciona Una línea.

15 Sitúa el cursor dentro de la última celda de la segunda fila de la primera tabla.

16 Repite los pasos del 8 al 14, pero con las siguientes diferencias:

En Campo de texto escribe email.

En Cars máx escribe 40.

17 Sitúa el cursor dentro de la segunda celda de la primera fila de la segunda tabla.

18 Repite los pasos del 8 al 14, pero con las siguientes diferencias:

En Campo de texto escribe receta.

En Cars máx escribe 25.

19 Sitúa el cursor dentro de la segunda celda de la segunda fila de la segunda tabla.

20 Haz clic sobre el menú Insertar.

21 Elige la opción Formulario.

22 Elige la opción Lista/menú.

Se abrirá un cuadro de diálogo para incluir una etiqueta de texto al lado de la lista/menú, déjalo todo en blanco y pulsa Cancelar pues ya tenemos la etiqueta escrita.

23 Haz clic sobre el objeto de lista/menú para seleccionarlo.

24 En Lista/menú, del inspector de propiedades, escribe tipo.

25 En Tipo selecciona Menú.

26 Haz clic sobre el botón Valores de lista.

27 Escribe Plato en Etiqueta de elemento .

28 Pulsa sobre el botón para insertar nuevos elementos en la lista. Añade la etiqueta Postre.

29 Haz clic sobre el botón Aceptar.

30 Selecciona Plato en Seleccionado inicialmente.

31 Sitúa el cursor dentro de la primera celda de la cuarta fila de la segunda tabla.

32 Haz clic sobre el menú Insertar.

33 Elige la opción Formulario.

34 Elige la opción Área de texto.

Se abrirá un cuadro de diálogo para incluir una etiqueta de texto al lado del área de texto, déjalo todo en blanco y pulsa Cancelar pues ya tenemos la etiqueta escrita.

35 Haz clic sobre el área de texto para seleccionarlo.

36 En Campo de texto, del inspector de propiedades, escribe Ingedientes.

37 En Tipo selecciona Varías líneas.

38 En Ancho car escribe 40.

39 En Líneas núm escribe 5.

40 Sitúa el cursor en la celda que hay debajo de la que pone Preparación:.

41 Repite los pasos del 35 al 39, pero con las siguientes diferencias:

En Campo de texto escribe preparacion.

En Ancho car escribe 25.

En Líneas núm escribe 8.

42 Sitúa el cursor en la última celda de la segunda tabla.

43 Haz clic sobre el menú Insertar.

44 Elige la opción Formulario.

45 Elige la opción Botón.

46 Haz clic sobre el botón para seleccionarlo.

47 En Etiqueta, del inspector de propiedades, escribe Restablecer.

48 En Acción selecciona Restablecer formulario.

49 Sitúa el cursor a la derecha del botón.

50 Repite los pasos del 43 al 48, pero con las siguientes diferencias:

En Etiqueta escribe Enviar.

En Acción selecciona Enviar formulario.

51 Haz clic sobre el botón Guardar de la barra de herramientas.

52 Ahora puedes probar el funcionamiento de los elementos del formulario, abre el documento en tu navegador y rellena los campos. Si pulsas en Enviar, no pasará nada porque no tenemos asociado ningún código al botón Enviar.