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.