Guia3de Dreamweaver

Escuela en Ingeniería en Computación
Diseño Web Multimedia I

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

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


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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (18)

En vedette

En vedette (20)

Similaire à Guia3de Dreamweaver

Similaire à Guia3de Dreamweaver (20)

Dernier

Dernier (20)

Guia3de Dreamweaver