Ejercicios de Dreamweaver 4

PRÁCTICA: Diseño Web parte I

Para comenzar a trabajar con Dreamweaver, sólo necesitaremos abrir un documento
HTML existente o crear uno nuevo. Sin embargo, para sacar el máximo provecho a
Dreamweaver, en esta primera práctica vamos a comenzar configurando algunas de las
preferencias del programa para lograr que se nos facilite la forma de trabajar.

Ejecución de Macromedia Dreamweaver 4

1. En primer lugar, pulse el botón Inicio de la Barra de tareas de Windows.

2. A continuación, seleccione la opción Programas del menú desplegable. Se abrirá
un submenú desde donde podrá acceder a los programas instalados.
3. Sitúe el puntero del ratón en la carpeta Macromedia Dreamweaver 4, y pulse
en el nuevo submenú sobre el icono de Dreamweaver 4. Esta acción ejecutará
de forma inmediata la aplicación.

Nota: al iniciarse la aplicación, Dreamweaver abrirá un nuevo documento

en blanco con el nombre Untitled-1 en la Barra de título situada en la
parte superior de la pantalla.

Aplicación de un tamaño a la Ventana documento

1. Diríjase con el ratón hacia el área Tamaño de

ventana situada en el centro de la Barra de
estado de la Ventana documento.
2. Pulse con el botón principal del ratón sobre
el área y elija Editar tamaños en el menú
emergente que aparece. Se abre el cuadro de
diálogo Preferencias.

1
 Ejercicios de Dreamweaver 4

3. Observe el cuadro de diálogo, puede ver que en la lista de la izquierda, la opción

resaltada es Barra de estado. A la derecha, se muestran las configuraciones
estándar que Dreamweaver presenta.

4. Introduzca valores en los campos Ancho y Alto. La Web que vamos a realizar está
pensada para ser visualizada a una resolución de 800 x 600. Nos bastará con
trabajar en un área de 725 píxeles de ancho y 540 de alto.
5. Haga clic en el campo Descripción e introduzca el comentario relativo al nuevo
tamaño añadido a la lista. Escribiremos (Web Spider-Man).
6. Deje el resto de opciones sin modificar y haga clic en Aceptar para guardar
los cambios.
7. Para aplicar el nuevo tamaño configurado, diríjase nuevamente al área
Tamaño de ventana situada en el centro de la Barra de estado de la Ventana
documento.
8. Pulse con el botón principal del ratón sobre el área y elija el tamaño 725 x
540 (Web Spider-Man).
A continuación, vamos a personalizar el Lanzador para que éste muestre los
paneles que usaremos más frecuentemente durante la realización de la Web.

Para personalizar el Lanzador

1. En el menú Edición, escoja la opción Preferencias. Se abre el cuadro de

diálogo Preferencias.

2
 Ejercicios de Dreamweaver 4

2. En la lista Categoría, seleccione la opción Paneles. Los elementos seleccionados

para mostrarse en los lanzadores, aparecerán en el área Mostrar en Lanzador.

3. En la lista Mostrar en Lanzador, se muestran los paneles que por defecto nos
permiten abrir el Lanzador de Dreamweaver.
4. En primer lugar, vamos a eliminar los paneles que nos interese tener en el
Lanzador. Seleccione Estilos HTML en la lista y haga clic en el botón con
signo menos (-).
5. Repite la operación anterior para eliminar el panel Estilos CSS.
6. A continuación, vamos añadir nuevos paneles a los lanzadores, para ello, haga
clic en el botón con signo más (+) y en el menú que se despliega, seleccione
Marcos. Automáticamente el panel seleccionado se añade a la lista.
7. Para finalizar, añada los paneles Capas y Líneas de tiempo y pulse el botón
Aceptar para cerrar el cuadro de diálogo y guardar los cambios establecidos. El
Lanzador situado en la parte inferior derecha de la Ventana documento muestra
ahora los cambios realizados.

Nota: recuerde que podrá modificar el orden de los elementos eligiéndolos

en la lista Mostrar en Lanzador del cuadro de diálogo Preferencias y
utilizando los botones de flecha situados en la parte superior derecha
de ésta.

A parte de los paneles que acabamos de configurar en el Lanzador, por norma

general, es conveniente tener siempre abiertos el Inspector de propiedades y el
Panel Objetos, ya que los usaremos con mucha frecuencia.
A continuación, vamos a crear un juego de comandos de teclado basado en
el estándar de Macromedia Dreamweaver que utilizaremos solamente para este
proyecto. Dentro del juego que creemos, vamos a redefinir los métodos abreviados
de teclado predefinidos por Dreamweaver para el Inspector de propiedades
y el Panel Objetos.

Para crear un método abreviado de teclado

1. En el menú Edición, seleccione la opción Métodos abreviados de teclado.

3
 Ejercicios de Dreamweaver 4

Al cabo de unos segundos, se abre el editor de métodos abreviados de teclado

de Dreamweaver 4.

2. En la lista desplegable del área Conjunto actual, asegúrese de que esté

seleccionada la opción Macromedia Standard.
3. A continuación, pulse el botón Duplicar juego situado en la botonera
de la derecha.
4. En el cuadro de diálogo Juego repetido, asígnele el nombre Spider-Man al
nuevo conjunto duplicado.

5. Pulse el botón Aceptar. De vuelta al cuadro de diálogo Métodos abreviados

de teclado, el juego creado se muestra activo en la lista deplegable del área
Conjunto actual.
6. En el área Comandos, asegúrese de que Comandos de menú se encuentra
seleccionado en la lista desplegable.
7. Haga clic con el ratón en el signo más (+) para mostrar el contenido de la
categoría Ayuda.
8. Localice el comando Uso de Dreamweaver y selecciónelo en la lista.
9. En el área Métodos abreviados, presione el botón de signo menos (-) para
eliminar el método de teclado asignado al comando.
10. Haga clic con el ratón en el signo más (+) para mostrar el contenido de la
categoría Ventana.
11. Localice el comando Capas y selecciónelo en la lista.
12. En el área Métodos abreviados, presione el botón de signo menos (-) para
eliminar el método de teclado asignado al comando.

4
 Ejercicios de Dreamweaver 4

Nota: hasta ahora, lo que hemos hecho es eliminar la asignación de las

teclas F1 y F2 a comandos de menú de Dreamweaver. F1 nos abría la ayuda
del programa y F2 el panel Capas cuya función queda suficientemente
sustituida al añadir su acceso rápido en el Lanzador.

13. En la categoría Ventana, localice el comando Objetos.

14. Coloque el cursor de edición del ratón en el campo de texto Pulse tecla y
a continuación, presione F1.
15. Haga clic en el botón Cambiar para asignar la nueva combinación de teclas
al comando.
16. En la categoría Ventana, localice el comando Propiedades.
17. Coloque el cursor de edición del ratón en el campo de texto Pulse tecla y
a continuación, presione F2.
18. Haga clic en el botón Cambiar para asignar la nueva combinación de teclas al
comando. En esta ocasión, aparece el siguiente mensaje de advertencia:

19. Ignórelo pulsando en el botón Aceptar. Este mensaje sólo nos informa de que la
tecla F2 también está asignada al comando Renombrar del menú Archivo del
área Comandos del menú Sitio.
20. Para finalizar, cierre el cuadro de diálogo Métodos abreviados de teclado
pulsando el botón Aceptar.
21. Si vamos al menú Ventana, podremos observar que ya aparecen reflejados los
cambios que hemos realizado. Compruébelo por usted mismo pulsando las teclas
F1 y F2 consecutivamente para abrir y cerrar los paneles correspondientes.
Para finalizar, vamos a salir del programa. No se preocupe por todos los cambios
efectuados en este primer ejercicio, sólo afectan a la configuración del programa y
estarán activos la próxima vez que entremos en Dreamweaver.

Para salir de Dreamweaver

1. En el menú Archivo, seleccione la opción Salir o pulse la combinación de

teclas rápidas CTRL+Q.
2. En nuestro ejercicio, como no hemos realizado ninguna modificación en el
documento, se cerrará automáticamente la aplicación.

Nota: si tratamos de cerrar la aplicación pulsando con el ratón sobre

el botón de control Cerrar, aparecerá un cuadro de advertencia como el
que se muestra en la imagen. Si respondemos Sí, la aplicación se cerrará
automáticamente. Si respondemos No, Dreamweaver cerrará el documento
actual y abrirá uno nuevo con la misma configuración establecida a lo
largo del ejercicio.

5
Ejercicios de Dreamweaver 4