1. Curso de
Diseño de
Páginas Web
Cuaderno de prácticas
Dreamweaver CS5

2. Quedan rigurosamente prohibidas, sin la autorización escrita
de los titulares de «Copyright», bajo las sanciones establecidas
en las leyes, la reproducción total o parcial de esta obra por
cualquier medio o procedimiento, comprendidos la reprografía y
el tratamiento informático, y la distribución de ejemplares de ella
mediante alquiler o préstamo públicos.
INICIATIVA Y COORDINACIÓN
DEUSTO FORMACIÓN
Colaborador:
Interficie Proyectos Interactivos, S.L.
www.interficie.com
© Planeta DeAgostini Formación, S.L.U.
Barcelona (España), 2011
Primera edición: enero de 2011
ISBN: 978-84-394-7322-0 (Obra completa)
ISBN: 978-84-394-7333-6 (Cuaderno de prácticas Dreamweaver CS5)
Depósito Legal: B-45.650-2010
Impreso por:
STUDIUM TALLERES GRÁFICOS
Gorcs Lladó, 99-107
Naves 9 y 10
08210 Barberà del Vallés
Printed in Spain
Impreso en España

3. Diseño de Páginas Web
ÍNDICE
DESCRIPCIÓN DE LA INTERFAZ.................................................................. 4
Contenidos.................................................................................... 4
Mis marcadores.................................................................................... 7
Ayuda................................................................................................ 8
EJERCICIOS PRÁCTICOS............................................................................ 9
Ejercicio 1............................................................................................ 9
Ejercicio 2............................................................................................ 9
Ejercicio 3............................................................................................ 9
Ejercicio 4............................................................................................ 9
Ejercicio 5............................................................................................ 10
Ejercicio 6............................................................................................ 10
SOLUCIONES A LOS EJERCICIOS PRÁCTICOS.............................................. 10
Ejercicio 1............................................................................................ 10
Ejercicio 2............................................................................................ 13
Ejercicio 3............................................................................................ 15
Ejercicio 4............................................................................................ 18
Ejercicio 5............................................................................................ 19
Ejercicio 6............................................................................................ 22
3

4. Cuaderno de prácticas Dreamweaver CS5
DESCRIPCIÓN DE LA INTERFAZ
El DVD Videotutorial de Adobe Dreamweaver CS5 que se incluye en el curso consta de tres
secciones claramente diferenciadas: Contenidos, Marcadores y Ayuda.
Contenidos
En este apartado podrás encontrar tres subapartados: Bienvenid@, Ver todos los vídeos y
Tabla de contenidos.
En el apartado Bienvenid@, a modo de resumen, se realiza una presentación del curso de Ado-
be Dreamweaver CS5 y sus objetivos mediante un escueto vídeo (Figura 1.1).
También podemos ver cuál ha sido el último vídeo que se ha reproducido.
Figura 1.1
Aspecto general
de la interfaz de
la aplicación en
el subapartado
Bienvenid@.
En el apartado Ver todos los vídeos, como su propio nombre indica, podemos visionar
todos los vídeos que componen el videotutorial y examinar el tiempo que dura cada uno de
ellos (Figura 1.2).
4

5. Diseño de Páginas Web
Figura 1.2
A la derecha
de la interfaz
se muestra el
listado de videos
y su duración.
El último apartado perteneciente a esta sección de Contenidos es el subapartado Tabla de
contenidos. En él se muestran los capítulos, subcapítulos y vídeos que conforman el curso.
Además del nombre del videotutorial y su duración, aparecen señalados los vídeos que ya hemos
visualizado y el botón de reproducción (Figuras 1.3 y 1.4).
Figura 1.3
La tabla de
contenidos
muestra el
conjunto de
vídeos y la
categoría a la
que pertenecen.
5

6. Cuaderno de prácticas Dreamweaver CS5
Figura 1.4
Al acceder al
capítulo, podemos
ver los vídeos
que contiene.
En la parte inferior del vídeo podemos detener la reproducción o avanzar hacia adelante o hacia
atrás. También regular el volumen, colocar marcadores y alterar el tamaño de la pantalla. En la
imagen de la figura 1.5 resaltamos en color naranja los elementos mencionados.
Figura 1.5
Mediante el
cuadro naranja en
la parte inferior
de la interfaz,
hemos destacado
los elementos
de control para
la reproducción
del vídeo.
6

7. Diseño de Páginas Web
En la visión reducida, aparecen dos pestañas para pasar al vídeo siguiente o al anterior.
La barra de información del área derecha nos proporciona datos acerca del vídeo en concreto
que estemos viendo o sobre los vídeos que integran el capítulo seleccionado.
También facilita información sobre los marcadores de vídeo que hemos creado.
Si queremos ir al vídeo siguiente, simplemente tendremos que utilizar los botones superiores,
etiquetados como Vídeo siguiente y Vídeo anterior.
Mediante la barra superior podemos navegar por los capítulos, subcapítulos y vídeos. En ella
podemos ver las partes que componen los vídeos.
Mis marcadores
Mediante la opción Mis marcadores podrás seleccionar partes concretas de un vídeo. De
ese modo, podrás acceder directamente a la parte del vídeo que hayas marcado previamente
(Figura 1.6).
Figura 1.6
Muestra de
un ejemplo de
marcador.
7

8. Cuaderno de prácticas Dreamweaver CS5
Ayuda
En el apartado Ayuda encontraremos soluciones para las dudas más comunes.
Además, se muestra una serie de atajos de teclado que nos permiten navegar más fácilmente
por el curso (Figura 1.7).
Figura 1.7
Pantalla de ayuda
del videotutorial.
8

9. Diseño de Páginas Web
EJERCICIOS PRÁCTICOS
A continuación, vamos a plantearte una serie de ejercicios que te ayudarán a complementar y
poner en práctica algunos de los conocimientos que se imparten a lo largo del curso.
Ejercicio 1
En este primer ejercicio te planteamos la creación del sitio web que utilizarás para guardar los
documentos HTML que crees en cada uno de los ejercicios. También tendrás que configurar un
estándar de documento HTML.
Para la creación del sitio web, es recomendable que generes una carpeta en el Escritorio y le
asignes un nombre similar a “ejercicios_Dreamweaver”. Dentro de esta carpeta deberás crear
otra que se llamará “img”. Guarda en ella las imágenes que desees insertar en el HTML.
En cuanto a la configuración del documento HTML estándar, deberás tener en cuenta aspectos
como la versión de HTML, el Doctype, la codificación de los caracteres, etc.
Ejercicio 2
El segundo ejercicio está orientado al manejo de las herramientas que nos permiten previsualizar
el código HTML que estamos creando. Para completarlo, deberás configurar varios navegadores
en Dreamweaver de modo que puedas previsualizar el resultado de la página de forma ágil. Los
navegadores que deberás configurar son: Internet Explorer, Firefox y Chrome.
Ejercicio 3
En este ejercicio te planteamos jugar con texto. Deberás añadir varios párrafos y cada uno de
ellos deberá tener su propio color, tamaño, alineación y estilo.
Ejercicio 4
En este apartado vamos a trabajar con listas. Deberás crear una lista ordenada, otra desordenada
y una de definición. Finalmente, crearás una lista anidada a partir de la unión de una lista orde-
nada y una desordenada. Cada una de las listas deberá tener un mínimo de cinco elementos.
9

10. Cuaderno de prácticas Dreamweaver CS5
Ejercicio 5
En este ejercicio vas a trabajar con imágenes. Para ello, importarás una imagen a Dreamweaver
y la trabajarás como un mapa de imágenes. Luego, crearás cinco zonas activas dentro de dicho
mapa y cada uno de los enlaces conducirá a una página diferente que se abrirá en una nueva
ventana del navegador.
Ejercicio 6
Como ejercicio final, deberás crear un formulario. Aunque actualmente no dispongas de ningún
servidor donde alojarlo y conseguir así que pueda enviar los mensajes electrónicos correctamen-
te, el objetivo del ejercicio es que te familiarices con los formularios. Para ello, crearás uno que
disponga de los siguientes campos:
• Nombre
• Apellidos
• Teléfono
• Hombre o Mujer
• Ocupación (desplegable con las opciones: Estudiante, Trabajador/a, Desempleado/a,
Jubilado/a).
En el siguiente apartado podrás ver la solución de cada uno de los seis ejercicios que se han
planteado. Recuerda que puedes consultar a tu profesor mediante el buzón de consultas
del Campus Online.
SOLUCIONES A LOS EJERCICIOS PRÁCTICOS
Ejercicio 1
El primer paso a realizar es, tal y como se indica en el enunciado, crear una carpeta en el Escrito-
rio. Una vez hayas creado la carpeta “ejercicios_Dreamweaver” y su correspondiente subcarpeta
para imágenes, deberás definir el sitio web mediante Dreamweaver, tal y como puedes ver en
las figuras 1.1 y 1.2.
Cuando hayas indicando las carpetas que actuarán como sitio local, define las características del
archivo HTML (Figura 1.3).
Finalmente, deberás guardar el documento HTML. Debes hacerlo en la carpeta definida como
sitio local (Figura 1.4).
10

11. Diseño de Páginas Web
Figura 1.1
Vista general de
la ventana de
configuración
del sitio web.
Figura 1.2
Configuración
de la carpeta
que actuará
como sitio web.
11

12. Cuaderno de prácticas Dreamweaver CS5
Figura 1.3
Ventana de
configuración
del nuevo
documento que
vamos a crear.
Figura 1.4
Guardaremos el
documento HTML
en la carpeta
definida como
el sitio web.
12

13. Diseño de Páginas Web
Ejercicio 2
Para configurar los navegadores que utilizarás para visualizar el HTML, en primer lugar ase-
gúrate de que dispones de los más utilizados. Si no es así, previamente debes descargarlos e
instalarlos.
Una vez dispongas de todos los navegadores, configura la vista previa en el navegador. Para
ello, accede al menú Edición - Preferencias. Allí, selecciona el apartado Vista previa en el na-
vegador (Figura 2.1).
Figura 2.1
Seleccionaremos
Chrome como
tercer navegador
para previsualizar
los contenidos
creados.
Configura tantos navegadores como desees. Dos de ellos puedes seleccionarlos para que se
ejecuten al presionar la tecla F12 o bien el atajo de teclado Ctrl + F12 (Figura 2.2).
Para poder seleccionar la visualización del HTML en cualquier navegador de los que has
configurado, deberás desplegar el menú Archivo y seleccionar Vista previa en el navegador
(Figura 2.3).
13

14. Cuaderno de prácticas Dreamweaver CS5
Figura 2.2
Dos de los
navegadores
disponen de atajo
de teclado para
ser ejecutados.
Figura 2.3
Podemos lanzar
la previsualización
en cualquier
navegador
mediante el
menú Archivo -
Vista previa en
el navegador.
14

15. Diseño de Páginas Web
Ejercicio 3
En primer lugar, deberás introducir una etiqueta párrafo mediante la opción de menú Insertar -
HTML - Objetos de texto - Párrafo (Figura 3.1).
Figura 3.1
Ejemplo de cómo
se inserta la
etiqueta párrafo
a partir del
menú Insertar.
Una vez hayas creado la etiqueta párrafo, rellénala con un texto simulado, en este caso “Lo-
rem ipsum”. El objetivo es que compruebes el efecto que provocará el estilo que vas a crear
a continuación. Selecciona la opción Nueva regla CSS y define un estilo. Llámalo “parrafo_1”
(Figura 3.2).
Al estilo que has denominado “parrafo_1” le aplicarás una serie de características de familia de
fuente, tamaño de fuente y color (Figura 3.3).
Tras definir el estilo “parrafo_1”, selecciona la etiqueta “P” mediante el selector de etiquetas y
aplícale el estilo previamente definido, tal y como se muestra en la figura 3.4.
Procede de igual forma con las demás etiquetas de párrafo que has creado. Puedes apreciar
los diferentes estilos aplicados a cada párrafo en la figura 3.5.
15

16. Cuaderno de prácticas Dreamweaver CS5
Figura 3.2
Nombramos el
estilo CSS como
“párrafo_1”.
Figura 3.3
Definimos las
propiedades que
tendrá el estilo
que estamos
creando.
16

17. Diseño de Páginas Web
Figura 3.4
El selector
nos permite
seleccionar la
etiqueta a la
que aplicaremos
el estilo CSS.
Figura 3.5
Finalmente,
observamos
el resultado
de crear tres
párrafos con
tres estilos CSS
asociados.
17

18. Cuaderno de prácticas Dreamweaver CS5
Ejercicio 4
Para trabajar con los diferentes tipos de listas, utilizaremos la siguiente opción de menú Insertar:
HTML - Objetos de texto - Lista sin ordenar (Figura 4.1).
Figura 4.1
Ejemplo de
cómo se inserta
la etiqueta UL
a partir del
menú Insertar.
Procederemos de la misma forma para la lista ordenada y la lista de definición (Figura 4.2).
Figura 4.2
Ejemplo de
cómo se inserta
la etiqueta OL
a partir del
menú Insertar.
18

19. Diseño de Páginas Web
Para finalizar el ejercicio, deberemos editar el código HTML (Vista código). Allí generaremos una
lista anidada a partir de la inclusión de una lista desordenada dentro de cada elemento de la lista
ordenada (Figura 4.3).
Figura 4.3
Aspecto de la
vista diseño
y código
interpretando
la lista anidada
que acabamos
de crear.
Ejercicio 5
Para la realización de este ejercicio insertaremos una imagen que previamente habremos guar-
dado en la carpeta “img” del sitio local (Figura 5.1).
Mediante la paleta flotante Propiedades, crearemos un mapa de imagen para cada uno de los
continentes (Figuras 5.2 y 5.3).
Finalmente, asignaremos un enlace a cada uno de los mapas de imagen creados. Además,
indicaremos que el enlace se muestre en una nueva ventana mediante el atributo Destino -
“_blank” (Figura 5.4).
19

20. Cuaderno de prácticas Dreamweaver CS5
Figura 5.1
La imagen
mapamundi.
gif insertada en
Dreamweaver.
Figura 5.2
Crearemos una
zona activa para
cada uno de los
continentes.
20

21. Diseño de Páginas Web
Figura 5.3
Aspecto de
la imagen
mapamundi
convertida en un
mapa de imagen.
Figura 5.4
En la paleta
Propiedades
podemos
observar el
destino en el
que se cargarán
cada uno de los
enlaces del mapa
de imagen.
21

22. Cuaderno de prácticas Dreamweaver CS5
Ejercicio 6
Para la realización de este ejercicio crearemos un nuevo documento HTML. Tras guardarlo en la
carpeta ya definida como sitio local, usaremos la pestaña Formularios del panel de Herramientas
haciendo clic en el botón Campo de texto. Posteriormente, en la ventana emergente, definire-
mos el identificador y el texto de la etiqueta que precederá al campo (Figura 6.1).
Figura 6.1
Definiremos los
atributos de
accesibilidad del
formulario.
Dreamweaver nos preguntará si queremos introducir la etiqueta <form>. Como no la hemos
introducido anteriormente, responderemos de manera afirmativa (Figura 6.2).
De esta manera, tal y como puedes observar, Dreamweaver habrá insertado las etiquetas ne-
cesarias para crear un campo de texto y la etiqueta que indica el tipo de dato al que pertenece
(Figura 6.3).
A continuación, repetiremos el proceso para insertar los otros dos campos del mismo tipo, pero
variando el identificador y el nombre.
22

23. Diseño de Páginas Web
Figura 6.2
Mensaje de alerta
de Dreamweaver
indicando si
se desea crear
la etiqueta de
formulario.
Figura 6.3
Tanto en la vista
código como
en el diseño
podemos ver el
aspecto inicial
del formulario.
23

24. Cuaderno de prácticas Dreamweaver CS5
Es aconsejable insertar un salto de línea después de cada campo para poder distribuirlos mejor
en la página. El resultado será similar a lo que se observa en la figura 6.4.
Figura 6.4
Poco a poco, el
formulario va
tomando forma.
A continuación, insertaremos un campo que permita al usuario escoger su sexo. Para ello, usa-
remos la opción Grupo de opción de la pestaña Formularios del panel Herramientas. Luego,
configuraremos en la ventana emergente las dos posibles opciones (Figura 6.5).
Seguidamente, haremos clic en la opción Seleccionar (Lista /Menú) para insertar un desplegable
con el empleo del usuario. Tras hacer clic, definiremos el identificador y el nombre en la ventana
emergente. Aceptaremos y seleccionaremos el desplegable. Empleando el panel Propiedades,
usaremos la opción Valores de lista para definir las diferentes opciones que el usuario podrá
elegir (Figura 6.6).
Finalmente, a través de la opción Botón de la pestaña Formularios, introduciremos dos botones:
uno para enviar los datos y otro para borrarlos.
24

25. Diseño de Páginas Web
Figura 6.5
Asistente para
crear el elemento
de formulario
“Grupo de
opción”.
Figura 6.6
En la lista
de valores,
definiremos
todos los
elementos que
se mostrarán.
25

26. Cuaderno de prácticas Dreamweaver CS5
El procedimiento será el mismo para ambos. Solamente deberemos variar características como el
nombre y la acción mediante el panel Propiedades, tal y como se detalla en la figura 6.7.
Figura 6.7
El valor de los
botones enviar
y borrar lo
definiremos
en la paleta
Propiedades.
En el caso de que tengas alguna duda con los ejercicios, recuerda que puedes consultar con tu
profesor mediante el buzón de consultas del Campus Online.
26