Guía didáctica de Dreamweaver

1. REPUBLICA BOLIVARIANA DE VENEZUELA
MINISTERIO DEL PODER POPULAR PARA LA EDUCACIÓN SUPERIOR
UNIVERSIDAD NACIONAL EXPERIMENTAL POLITECNICA DE LA FUERZA ARMADA
UNEFA
DREAMWEAVER
CREAR UN PROTOTIPO
1. Cree una carpeta con el nombre: proyecto_sistemas.
2. Dentro de esa carpeta agregue cuatro carpetas adicionales:
 La primera tendrá como nombre: modelo (Aquí guardaremos los archivos de acceso a una Base
de Datos)
 La segunda se llamará: vistas (En esta se guardaran las interfaces de nuestro Sistema)
 La tercera se llamará: controlador (Aquí almacenaremos el Archivo para conectarse a la Base de
Datos)
 En una cuarta carpeta, llamada: img (Colocaremos las imágenes a utilizar en nuestro proyecto)
3. Iniciamos Dreamweaver y deberá mostrarse la siguiente interfaz:
 En el Panel: CREAR NUEVO, seleccionamos HTML

2. 4. Veremos la siguiente interfaz:
5. Hacemos clic en el menú superior, en la opción Modificar, y luego en Propiedades de la Página,
tal como se muestra a continuación:

3. 6. Luego veremos lo siguiente:
 En el panel Categoría: Seleccionamos la opción Aspecto y aparecerán las propiedades de la
misma; allí podremos seleccionar el color de texto, tamaño y del fondo (seleccionar colores a su
preferencia, sin violar las normas de diseño de Interfaz) si es de su agrado puede utilizar una
imagen como fondo, para ello deberá buscarla haciendo clic en Examinar.
7. Luego, dentro de las propiedades de la página seleccionamos la opción Titulo/Codificación, en el
campo Título colocaremos el título que le daremos a nuestro proyecto, en este caso
trabajaremos con UNEFA, como título. De la siguiente manera:
 Presione Aplicar y luego Aceptar.

4. 8. En este caso quedará algo como esto:
9. Posteriormente insertaremos una tabla para dar forma a nuestra plantilla, para ello hacemos clic
en el menú superior en la opción Insertar  Tabla, tal y como se muestra en la figura:

5. 10. Se mostrará lo siguiente:
 En Filas, colocamos 3.
 En Columnas 2, luego Aceptamos.
11. Veremos el panel de trabajo de esta manera:

6. 12. Al hacer clic en la tabla que se acaba de insertar, se muestran en la parte inferior las propiedades
de la misma. Seleccionamos las dos Columnas de la primera fila, y en las propiedades hacemos
clic sobre el ícono Combinar Celdas. Así:
Propiedades de la tabla
Combinar Celdas
13. Notaremos que la fila que estaba dividida, será transformada en una sola fila, de esta manera:

7. 14. En esa fila, colocamos el cursor para insertar nuestro Banner, para ello en el menú superior
hacemos clic en Insertar  Imagen, así:
15. En la interfaz que se muestra, ubicamos la imagen a insertar; tal como se muestra a
continuación:
 Presionamos Aceptar.

8. 16. Obtendremos como resultado algo como esto:
17. Combinamos las columnas de la segunda fila repitiendo el paso 18. Se mostrará así:
18. En la celda que combinamos insertamos las imagen Registros: (Para esta operación deberá
repetir los pasos 9 y 10)

9. 19. Hacemos clic en el menú superior Ventana  Inspector de Etiquetas (Al hacer clic sobre esta
opción se habilitará un panel del lado derecho), otra forma de activar el panel es presionando la
tecla F9.
20. Seleccionamos la imagen Registros y en el panel de Etiquetas, seleccionamos la pestaña
Comportamiento; en el ícono + hacemos clic y se desplegará el siguiente menú:
21. Seleccionamos la opción Mostrar Menú Emergente, y se mostrará la siguiente interfaz:

10.  Para lograr visualizar esta interfaz debe haber guardado el documento (Recuerde guardar en la
Carpeta vistas)
 Luego presionamos el Botón continuar.
22. Se mostrará algo así:
 En la Pestaña Contenido, configuramos las opciones que queremos se desplieguen al hacer
clic sobre Registros, podremos agregar o quitar opciones utilizando el símbolo de + y -.
 En el Campo Texto, iremos colocando las opciones y notaremos que se irán agregando en el
menú que se muestra en el panel.
23. Agregaremos para este ejemplo tres opciones, por ejemplo: Estado, Municipio, Parroquia:
 Presionamos Aceptar una vez completadas las opciones de nuestro menú desplegable.

11. 24. Seleccionamos la pestaña Aspecto y configuramos el menú con los colores de nuestra
preferencia:
25. En la Pestaña Posición seleccionamos la opción Por debajo y en el Borde Izquierdo:
 Una vez configurado el menú, presionamos el botón Aceptar.
 Guardamos los cambios efectuados.

12. 26. En el menú seleccionamos el ícono de vista previa:
27. Seleccionamos uno de los navegadores que tengamos en nuestro equipo y veremos la corrida de
nuestro ejemplo, se deberá mostrar algo como esto:
28. Insertamos las Imágenes: Movimientos, Reportes y Ayuda una al lado de la otra respectivamente,
deberá quedar de esta forma (Siguiendo el procedimiento 9 y 10. Deberá mostrarse así:
 Agregamos opciones a cada una de las imágenes que se insertaron repitiendo los
procedimientos del 20-27.

13. 29. En la tercera fila, en la primera columna podemos colocar otro menú de opciones al cual podrá
acceder cualquier usuario que utilice el sistema. Para ello Insertamos una tabla de Cuatro filas y
una columna. Así:
30. En Cada Fila, podremos colocar opciones como: Misión, Visión, Contáctanos, Califica nuestra
Página, etc. Algo así:

14. 31. Para lograr una mejor visualización de nuestro menú emergente en este ejemplo es alineado a la
derecha en las propiedades de esta celda, además en el nuevo menú que agregamos elementos
como campos de opciones y un botón, para ello debemos hacer clic sobre la opción Insertar 
Formulario  Botón de Opción
32. En la Interfaz que aparece colocamos: Bueno
 Repetimos el paso 32 para las opciones Malo y Muy Bueno.
33. Para agregar el Botón Enviar, hacemos clic en Insertar  Formulario  Botón, se mostrará así:

15. 34. Alineamos los elementos insertados y quedará de esta forma:
35. Para crear los enlaces a otras páginas debemos crear al menos dos más, en una colocaremos la
Misión y en la otra la interfaz de Estado. (cree las interfaces solicitadas para continuar con la
práctica, recuerde guardarlas en la carpeta vistas. Aplique para ello lo que aprendió en esta fase).
36. Una vez creadas dos Interfaces adicionales, en la principal (la primera que creamos)
seleccionamos el texto Misión, y hacemos clic en Insertar  Hipervínculo, de esta forma:
37.En la ventana que aparece, debemos localizar la página que creamos para mostrar la Misión de
nuestro sistema.
Clic aquí

16. 38.En la siguiente ventana seleccionamos la pagina de la Misión, y luego aceptamos:
39. Notaremos que el texto cambiará a color azul, y además aparecerá subrayado, indicando que allí
encontraremos un enlace.
40. Ahora llamaremos desde nuestro menú emergente la interfaz Estado, para ello seleccionamos la
imagen y en el panel del lado derecho aparecerán las propiedades de la imagen, entre ellas
deberá mostrarse la opción Mostrar menú emergente, y hacemos doble clic sobre esta opción,
se mostrará lo siguiente:

17. 41. Seleccionamos Estado y en el campo Vínculo colocamos el nombre de la página Estado, o
simplemente hacemos clic en el ícono de examinar y la localizamos, así:
 Presionamos Aceptar.
 Guardamos los cambios efectuados.
 Corremos la aplicación y al hacer clic sobre la opción Misión deberá mostrarse la
correspondiente a la Misión y al hacer clic en nuestro menú emergente sobre la opción
Estado también se mostrará su interfaz.