Dreamweaver CS5

Página 1

Copyright INEDETEC

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.

Entrar en Adobe Dreamweaver:

1. En primer lugar, despliegue el menú Inicio de la Barra de tareas de Windows.

2. A continuación, seleccione la opción Programas o Todos los 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 Adobe Master Collection CS5, y pulse en el

nuevo submenú sobre el icono de Adobe Dreamweaver CS5. Esta acción ejecutará

de forma inmediata la aplicación.

4. Al iniciarse la aplicación, Dreamweaver muestra una ventana en la que se proponen

varias opciones para abrir un elemento reciente, crear un nuevo archivo, crear

documentos a partir de muestras, etc.

5. Centre su atención en el área Crear nuevo y presione sobre la orden HTML.

Dreamweaver CS5

Página 2

Copyright INEDETEC

Aplicar medidas a la ventana de documento:

1. En primer lugar, presione el comando Maximizar/Restaurar de la ventana de

documento. Recuerde que será imposible modificar el tamaño de la ventana de

documento si ésta está maximizada.

2. Diríjase con el ratón hacia el área Tamaño de descarga/Tiempo de descarga

situada en el centro de la Barra de estado de la ventana de documento.

3. Despliéguela presionando en la flecha desplegable y elija Editar tamaños en el

menú emergente que aparece. Se abre el cuadro de diálogo Preferencias.

4. 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.

5. Introduzca valores en los campos Ancho y Alto. La Web que vamos a realizar está

pensada para ser visualizada a una resolución de 800x600. Nos bastará con trabajar

en un área de 725 píxeles de ancho por 540 de alto.

6. 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.

7. Deje el resto de opciones sin modificar y haga clic en Aceptar para guardar los

cambios.

8. Para aplicar el nuevo tamaño configurado, diríjase nuevamente al área Tamaño de

descarga/Tiempo de descarga situada en el centro de la Barra de estado de la

ventana de documento.

9. Pulse con el botón principal del ratón sobre la flecha desplegable y elija el tamaño

725x540 Web Spider-Man.

Dreamweaver CS5

Página 3

Copyright INEDETEC

Crear un método abreviado de teclado:

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

el cuadro de diálogo con el mismo nombre.

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

seleccionada la opción Dreamweaver Standard.

3. A continuación, pulse el botón Juego repetido 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 desplegable 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 Ayuda 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.

Dreamweaver CS5

Página 4

Copyright INEDETEC

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 Elementos PA 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.

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

14. Seleccione la combinación de teclas asignada en el área Métodos abreviados.

15. Coloque el cursor de edición del ratón en el campo de texto Presionar tecla y a

continuación, presione F1.

16. Haga clic en el botón Cambiar para asignar la nueva combinación de teclas al

comando.

17. En la categoría Ventana, localice el comando Propiedades.

18. Seleccione la combinación de teclas asignada en el área Métodos abreviados.

19. Coloque el cursor de edición del ratón en el campo de texto Presionar tecla y a

continuación, presione F2.

20. En esta ocasión, aparece un mensaje de advertencia informándole de que la tecla

ya está asignada a otro comando.

21. Haga clic en el botón Cambiar y responda presionando en Aceptar a la pregunta

sobre reasignar el comando que Dreamweaver le propone.

22. Para finalizar, cierre el cuadro de diálogo Métodos abreviados de teclado pulsando el

botón Aceptar.

Dreamweaver CS5

Página 5

Copyright INEDETEC

23. Si vamos al menú Ventana, podremos observar, en su lista de opciones, que ya

aparecen reflejados los cambios que hemos realizado. Compruébelo usted mismo

pulsando las teclas F1 y F2 consecutivamente para abrir y cerrar los paneles

correspondientes.

Salir de Dreamweaver:

1. 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.

2. Despliegue el menú Archivo de la Barra de menús, y seleccione la opción Salir.

También puede pulsar la combinación de teclas rápidas CTRL+Q.

3. En nuestro ejercicio, como no hemos realizado ninguna modificación en el

documento, se cerrará automáticamente la aplicación sin darnos la posibilidad de

guardar los cambios.