dreamwever

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

Guía práctica de Dreamweaver 1
Dreamweaver es uno de los programas más utilizados en la creación de páginas web. La
versión MX es la que utilizaremos durante estas prácticas; sin embargo, existe una
versión más reciente: Dreamweaver CS4

IDENTIFICANDO EL ENTORNO DE MACROMEDIA DREAMWEAVER
1. Ingresamos a Dreamweaver MX 2004,haciendo clic el Botón Inicio, luego en
Todos los programas, a continuación en Macromedia, y finalmente hacemos
clic en Macromedia Dreamweaver MX 2004.
2. Seleccione el diseño del espacio de trabajo que se llama Diseñador.
3. Ahora comenzaremos por realizar una página web muy sencilla.
4. En la pantalla de inicio, en la columna Crear nuevo, haremos clic sobre HTML (véase
imagen inferior)

5.Dreamweaver nos permite trabajar en tres vistas: Código, Dividir y Diseño (Ver imagen
inferior).

Vamos a practicar un poco en las tres vistas. Primero trabajaremos en la vista Diseño.
6. En la página, escribiremos:
Esta es posiblemente mi primera página utilizando Dreamweaver MX

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

Escuela en Ingeniería enComputación
Diseño Web Multimedia I
7. Seleccionaremos el texto en la página (1), y en Propiedades(2), haremos clic sobre los
comandos Negrita (3) y Alinear al centro (4) (ver imagen inferior)

8. También cambiaremos el color del texto, en Propiedades, haremos clic sobre el
comando Color del texto (Puede ubicarlo en la parte inferior del comando Negrita, tal
como se ve en la imageninferior)

9. Todos los cambios que acabamos de hacer al texto, Dreamweaver los ha asociado en
un estilo llamado Estilo 1.
10. Escriba el siguiente texto a partir de la línea siguiente de la página que estamos
creando:
Encabezado 1
Encabezado 2
Encabezado 3
11. Cambie la alineación de este bloque de texto a Alinear a la izquierda, y cambie el color
por uno diferente al seleccionadoanteriormente. Estos cambios en conjunto
conforman Estilo 2.
12. Seleccione la el texto “Encabezado 1”, y en el comando Formato, seleccione
Encabezado 1 (Vea la imagen inferior):
Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez

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

13. Con el mismo proceso aplique el formato Encabezado 2 y Encabezado 3, a lasfrases
correspondientes. El resultado deberá ser similar a la imagen inferior.

14. Compruebe por usted mismo el uso de otros comando del Panel Propiedades, tal
como Fuente, Tamaño, Lista sin ordenar, Lista ordenada, etc.
15. Haga clic en el comando Propiedades de la página que se encuentra en Propiedades.
(Ver imagen inferior)

16. Modifique el color del fondo por uno de su preferencia.17. Haga clic en la opción Título/Codificación (1), y escriba como título (2) del documento
“Mi primera página DW” (Vea la imagen inferior)

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

Escuela en Ingeniería en Computación
Diseño Web Multimedia I
18. Ahora nos desplazaremos a la vista Código. Tendremos visible el código de la página
diseñada.
19.Notará que el código se han generado etiquetas que usted conoce, y posiblemente
otras que no ha utilizado antes, así como bloques donde se definen estilos.
Agregaremos algunos detalles a nuestro sitio Web desde esta vista.
20. Antes de la etiqueta de cierre , agregue el siguiente bloque (Observe que
ahora es más fácil crear el código, trate de explorar dichas facilidades)

21. Ya trabajamos en lavista Diseño y la vista Código, ahora visualice la página desde la
vista Dividir. Desde esta vista podemos modificar nuestra página Web desde las dos
vistas que conocimos en los pasos anteriores.
22. Guarde la página con el nombre La primera en DW.html haciendo clic en el menú
Archivo||Guardar, o presionando la combinación Ctrl+S.
23. Haga clic en el menú Archivo||Salir.

Creando un...