guia3de dreamweaver

Escuela en Ingeniería en Computación

Diseño Web Multimedia I

Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez

Marcos y Formularios

Marcos. 1. Ingrese a Dreamweaver MX.

2. Crearemos un nuevo sitio web en Dreamweaver llamado Mis_películas (En la

guía 1, aprendimos como crear un sitio web, utilice una estructura similar).

3. Haga clic en el menú Archivo||Nuevo.

4. Elegimos Conjunto de marcos y el último modelo que es el que vamos a hacer:

5. Aparecerá creado en el espacio principal de la interfaz. Observa el nombre que

le ha puesto DW UntitledFrameset (conjunto de marcos sin título)

6. Hemos creado 4 documentos HTML, ahora modificaremos algunos de ellos.

7. Ahora le damos a Archivo > Guardar todo




8. Ahora guardaremos cada uno de los documentos

9. Observe que hay una línea que indica lo que estamos guardando en este

momento. Le podemos poner como nombre index.htm (si fuese lo primero que

tuviese que abrirse en un sitio web, le llamaríamos index.htm).

10. Guarde los demás documentos según lo mostrado en la imagen inferior.

11. Inserte en

Encabezado.htm la película Flash que se incluye en la carpeta practica3.




12. En Menu.htm, cree un lista de sus películas favoritas (recuerde los valores del

ITCA, no incluya alguna que pueda ser ofensiva). Si lo desea, haga algo similar

a lo siguiente:

The Other Side of Heaven

La Vida es bella

Wall-e

El Señor de los Anillos

En busca de la felicidad.

13. Incluya en su menú una última opción: Opinar sobre la página.

14. Agregue a cada elemento del menú, exceptuando el último, el vínculo de un sitio

web relacionado con el mismo. Puede buscar las direcciones a través de

Google.com u otro buscador. Si siguió la sugerencia anterior, estas son los

vínculos a agregar:

http://en.wikipedia.org/wiki/The_Other_Side_of_Heaven

http://vidaesbenigni.es.tl/

http://www.disney.es/FilmesDisney/Wall-E/

http://www.lordoftherings.net

http://es.wikipedia.org/wiki/En_busca_de_la_felicidad

15. Es importante que cada vez que agregue un vínculo, establezca el destino en

donde cargará la página, en este caso, escogeremos mainFrame (Véase la

imagen inferior).

16. Cree uno o dos documentos donde hable de sus películas favoritas, incluya las

opciones en el menú, y haga que aparezcan en el mainFrame.

Formularios

1. Cree un nuevo archivo HTML

2. Haga clic en el menú Insertar||Formulario||Formulario




3. Dentro del área del formulario (limitado por una línea roja) insertaremos una

tabla al 80% de ancho que tendrá dos columnas y 8 filas

4. En el Propiedades, con la tabla seleccionada, cambiamos Alinear a Centro.

5. En la columna de la derecha, escriba lo siguiente en las

celdas (Ver imagen lateral):

6. Dejamos la última fila en blanco.

7. Ahora insertaremos algunos elementos de formulario en la

columna derecha.

8. Primero, insertaremos un cuadro de texto, haga clic en la

primera celda de la segunda columna, y luego haga clic en

Insertar||Formulario||Campo de texto. 9. En Propiedades, cambie el nombre del campo de Textfield

a N_Completo.

10. En la siguiente celda, haga clic en

Insertar||Formulario||Botón de opción. 11. A la par de dicho botón, escriba Masculino (Ver imagen

inferior). Cambie el nombre del Botón a Sexo, inserte ahora

uno para Femenino, pero asegúrese de nombrar el botón

también como Sexo.

12. En la siguiente celda, inserte un

campo de texto, con el nombre de Email

13. En la siguiente celda, haga clic en




Insertar||Formulario||Casillas de verificación. Nombre a la casilla como

Estreno, y escriba Estrenos a la par de la casilla. Inserte dos casillas más como

se muestra en la imagen inferior. Nombre la segunda como Descuentos y la

siguiente como Taquillas.

14. En la siguiente celda, haga clic en Insertar||Formulario||Lista/Menú.

15. Cambie el nombre del objeto a Ocupación.

16. En propiedades, asegúrese que se encuentra seleccionada la opción Menú, y

haga clic en Valores de lista. Haga una lista de ocupaciones, agregando

adicionales con el botón +. En Etiqueta de elemento, escriba el nombre de

varias profesiones u ocupaciones, en Valor escriba una abreviatura de esa

profesión.

17. En la siguiente celda, inserte otro Menú, hágalo con sus propias opciones (por

ejemplo, puede ponerle los valores: Siempre, Muy a menudo, A menudo,

Ocasionalmente, Casi nunca, Mi esposo no me saca, etc.)

18. En la siguiente celda, inserte un Lista/Menú, pero en las propiedades, elija

Lista. Marque la casilla de verificación Permitir múltiples, y en Valores de

lista, agregue los siguientes valores:

19. En la última fila,




insertaremos dos botones. En la celda derecha, haga clic en

Insertar||Formulario||Botón. Por defecto, se inserta el botón Enviar.

20. Haga lo mismo en la celda izquierda, pero esta vez cambiaremos lo siguiente en

las propiedades:

21. Ahora, nos moveremos a las propiedades del formulario, para ello, sobre el

Panel Propiedades, haremos clic en <form#form1>. En Acción, escriba su

correo electrónico después de la palabra mailto

22. Cambie a su gusto las propiedades del formulario y sus elementos (color,

bordes, etc.).

23. Véalo en Vista Previa, hágale los cambios que crea necesarios.

24. En el menú que creamos para el marco, recuerde que dejamos una opción sin

vincular. Vincule la opción Opinión sobre la página con este formulario.

ACTIVIDAD

Investigue como trabajar con Plantillas, traiga un ejemplo la próxima

clase.

Cree un formulario donde incluya dos elementos más no vistos en esta

guía.

guia3de dreamweaver

Education