Your SlideShare is downloading. ×
Escuela en Ingeniería en Computación
                                                           Diseño Web Multimedia I


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


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


...
Escuela en Ingeniería en Computación
                                                           Diseño Web Multimedia I
  ...
Escuela en Ingeniería en Computación
                                                           Diseño Web Multimedia I
  ...
Upcoming SlideShare
Loading in...5
×

Guia3de Dreamweaver

1,481

Published on

Visitanos en http://www.josuefortis.info para mayor informacion del diseño web y multimedia. Esta guia 3 de dreamweaver trata hacerca del uso de Marcos, Formularios y plantillas.

Published in: Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,481
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
168
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Guia3de Dreamweaver"

  1. 1. 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
  2. 2. Escuela en Ingeniería en Computación Diseño Web Multimedia I 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. Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez
  3. 3. Escuela en Ingeniería en Computación Diseño Web Multimedia I 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 Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez
  4. 4. Escuela en Ingeniería en Computación Diseño Web Multimedia I 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 Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez
  5. 5. Escuela en Ingeniería en Computación Diseño Web Multimedia I 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, Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez
  6. 6. Escuela en Ingeniería en Computación Diseño Web Multimedia I 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. Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez

×