Dreamweaver PDF

TEMA 4.
MACROMEDIA
DREAMWEAVER 8
José M. Castillo Castillo.
16
MACROMEDIA DREAMWEAVER 8
INDICE DE CONTENIDO TEMA 4. MACROMEDIA DREAMWEAVER 8
1. CONOCIENDO MACROMEDIA DREAMWEAVER 8
1.1 Introducción a Macromedia Dreamweaver 8

1.2 Requisitos mínimos necesarios
1.3 Entrar en Macromedia Dreamweaver 8
1.4 Entorno de trabajo
1.5 Barra de herramientas insertar
1.6 Ventana de documento
1.7 Barra de herramientas documento
1.8 Panel propiedades
1.9 Edición de métodos abreviados de teclado
1.10 Panel Activos
1.11 Trabajar con el Panel Activos
1.12 Panel historial
1.13 Práctica simulada - entrar en Macromedia dreamweaver
1.14 Práctica simulada - localizar áreas del entorno de trabajo
1.15 Práctica simulada - configurar la ventana de documento
1.16 Práctica - diseño web parte I
2. CREACIÓN DE SITIOS Y PÁGINAS WEB

2.1 Planificación de un sitio web
2.2 Configurar un sitio web
2.3 Editar un sitio web existente
2.4 Sistema de protección
2.5 Panel archivos
2.6 Configurar las preferencias del panel archivos
2.7 Mapa del sitio
2.8 Mapa de diseño del sitio
2.9 Crear, abrir y guardar documentos
2.10 Configurar las propiedades del documento
2.11 Guías visuales
2.12 Insertar palabras clave y descripciones
2.13 Previsualizar un documento
2.14 Práctica simulada - nuevo sitio
2.15 Práctica simulada - cambiar la página principal
2.16 Práctica simulada - configurar el fondo
2.17 Práctica - diseño web parte II
1
3. TRABAJO CON TEXTO

3.2 Encabezados y párrafos
3.3 Asignar fuentes a un texto
3.4 Editar la lista de fuentes de dreamweaver
3.5 Cambiar el color del texto
3.6 Alineación del texto
3.7 Sangrías
3.8 Crear listas
3.9 Corrección ortográfica
3.10 Insertar fechas en un documento de dreamweaver
3.11 Insertar caracteres especiales
3.12 Insertar reglas horizontales
3.13 Crear un texto flash
3.14 Creación de estilos css
3.15 Buscar y reemplazar texto
3.16 Práctica simulada - aplicar fuentes
3.17 Práctica simulada - corrección ortográfica
4. IMÁGENES
4.1 Formatos de gráficos web
4.2 Colocación de imágenes
4.3 Editar imágenes
4.4 Cambiar el tamaño de las imágenes
4.5 Uso de la etiqueta alt
4.6 Justificar imágenes
4.7 Alineación de imágenes con texto
4.8 Insertar bordes
4.9 Insertar imágenes de sustitución
4.10 Práctica simulada - insertar imagen
4.11 Práctica simulada - modificar una imagen
4.12 Práctica - diseño web parte III
5. CREACIÓN DE MARCOS
5.2 Creación de marcos y conjuntos de marcos
5.3 Crear un conjunto de marcos anidado
5.4 Modificar el tamaño de los marcos
5.5 Modificar los bordes de un conjunto de marcos
5.6 Utilización del panel marcos
5.7 Abrir una página web en un marco
5.8 Añadir barras de desplazamiento
5.9 Destinar la información de un vínculo
5.10 Guardar archivos de marcos y conjuntos de marcos
5.11 Práctica simulada - marcos anidados
5.12 Práctica - diseño web parte IV
2
6. CREACIÓN DE TABLAS
6.2 Creación de tablas en la ventana de documento
6.3 Modificación de tablas
6.4 Selección de elementos de una tabla
6.5 Alineación del contenido de una celda
6.6 Dividir y combinar celdas
6.7 Anidar tablas
6.8 Trabajar con formatos de tabla
6.9 Ordenar tablas
6.10 Práctica simulada - trabajar con una tabla
6.11 Práctica - diseño web parte V
7. TRABAJAR CON CAPAS

7.2 Creación de capas
7.3 Configurar las características por defecto de una capa
7.4 Panel capas
7.5 Modificación de capas
7.6 Ajustar la alineación de las capas
7.7 Creación de una capa de carga
7.8 Trabajar con líneas de tiempo en dreamweaver
7.9 Panel líneas de tiempo
7.10 Añadir capas al panel líneas de tiempo
7.11 Modificar la línea de tiempo
7.12 Controles de la línea de tiempo
7.13 Añadir cuadros clave
7.14 Práctica simulada - configuración de una capa
8. VÍNCULOS WEB
8.2 Crear vínculos
8.3 Crear vínculos desde el panel propiedades
8.4 Navegar usando anclajes
8.5 Selección del destino de los vínculos
8.6 Crear un vínculo de correo electrónico
8.7 Creación de mapas de imagen
8.8 Creación de menús de salto
8.9 Creación de barras de navegación
8.10 Práctica simulada - creación de vínculos
8.11 Práctica - diseño web parte VI
9. FORMULARIOS INTERACTIVOS
9.2 Objetos de formulario
9.3 Insertar un formulario en dreamweaver
9.4 Creación de campos de texto
9.5 Creación de campos de texto ocultos
9.6 Insertar casillas de verificación
9.7 Insertar botones de opción
9.8 Creación de menús desplegables
9.9 Creación de listas
9.10 Creación de botones para activar el formulario
9.11 Insertar campo de archivo
9.12 Práctica - diseño web parte VII
3
10. BIBLIOTECA
10.2 La paleta activos
10.3 Visualizar los elementos de un documento
10.4 Insertar un elemento de biblioteca
10.5 Modificar elementos de biblioteca
10.6 Práctica simulada - trabajar con la biblioteca
11. PLANTILLAS
11.1 Creación de plantillas con dreamweaver
11.2 Configurar las propiedades de una plantilla
11.3 Definición de regiones editables en una plantilla
11.4 Bloquear una región editable
11.5 Creación de documentos basados en plantillas
11.6 Práctica simulada - trabajar con las plantillas de dreamweaver
11.7 Práctica - diseño web parte VIII
12. VÍDEOS
12.2 Vincular vídeos en dreamweaver
12.3 Reproducción de vídeos on-line
12.4 Atributos de quicktime
12.5 Insertar real video en un documento html
12.6 Práctica simulada - visualización de vídeos en un documento html
12.7 Práctica - diseño web parte IX
13. COMPORTAMIENTOS
13.1 Panel comportamientos
13.2 Añadir un comportamiento
13.3 Llamar javascript
13.4 Cambiar propiedad
13.5 Comprobar navegador
13.6 Comprobar plug-in
13.7 Controlar shockwave o flash
13.8 Controlar sonido
13.9 Mensaje emergente
13.10 Arrastrar capa
13.11 Ir a url
13.12 Abrir ventana del navegador
13.13 Carga previa de imágenes
13.14 Establecer imagen de barra de navegación
13.15 Mostrar-ocultar capas
13.16 Intercambiar imagen
13.17 Validar formulario
13.18 Práctica - diseño web parte X
14. COMANDOS DE TECLADO

14.1 Teclas de función de dreamweaver
4
1. CONOCIENDO MACROMEDIA DREAMWEAVER 8
Antes de comenzar a utilizar Dreamweaver y para sacar el máximo rendimiento al programa,

veremos una pequeña introducción que nos informará de los requisitos del sistema necesarios para
su instalación y correcto funcionamiento. Además, exploraremos la interfaz del programa,
aprenderemos a utilizar sus herramientas, y a definir las preferencias que mejor se adapten a nuestra
forma de trabajar.
1.1. Introducción a Macromedia Dreamweaver 8
Macromedia Dreamweaver es un editor de etiquetas o código HTML profesional para el desarrollo

de páginas Web. Tanto si estamos habituados a trabajar directamente con el código HTML, como si
prefiere un entorno de edición visual fácil de manejar (Microsoft FrontPage), Dreamweaver es,
realmente, la herramienta que nos permitirá trabajar del mismo modo que lo hacen los diseñadores
Web profesionales.
A lo largo de este curso, aprenderá a manejar y crear sitios Web, utilizando las características
novedosas que ofrece un programa amplio en opciones de diseño, que serán indispensables para los
diseñadores expertos y principiantes de Internet.
Dreamweaver nos permite crear sitios Web en forma visual, utilizando la interfaz gráfica de fácil
manejo del programa, y nos da la posibilidad de visualizar los cambios que vayamos introduciendo, al
mismo tiempo que los realizamos.
5
1.2. Requisitos mínimos necesarios
Para la instalación de este programa y su correcto funcionamiento, se requieren una serie de

condiciones y requisitos mínimos para el PC en el que vayamos a trabajar:
 Procesador Intel Pentium III o compatible con un mínimo de 800 MHz.

 256 Mb de memoria RAM.
 1’8 Gb de espacio libre en el disco duro.
 Ratón compatible con Windows.
 Pantalla de 16 bits de 1024 x 768 (se recomienda de 32 bits).
 CD-ROM.
 Sistema Operativo Windows 2000 o Windows XP.
1.3. Entrar en Macromedia Dreamweaver 8
Una vez instalado Macromedia Dreamweaver, iniciarlo será tan fácil como ejecutar cualquier otro
programa de Windows.
Posee varias formas para acceder al programa:
1. Desde el menú de inicio “Todos los programas” entrar en el directorio Macromedia y

pulsar “Dreamweaver”.
2. Desde el escritorio del PC y con acceso directo pulsar dos veces con el ratón sobre el
icono “Dreamweaver”.
3. Desde el menú de tareas anclado en la parte inferior pulsar una sola vez con el ratón
sobre el icono “Dreamweaver”.
Enlace vídeo:
6
1.4. Entorno de trabajo
Una vez abrimos Dreamweaver por primera vez, nos encontraremos con el entorno de trabajo del
programa (observe la siguiente imagen). Este entorno puede adaptarse a distintas formas de trabajar
dependiendo de la configuración que establezcamos antes de salir del programa.
Enlace vídeo:
1.5. Barra de herramientas Insertar
La Barra de herramientas Insertar contiene los elementos más utilizados

para el diseño de páginas Web. En ella, seleccionaremos desde imágenes a
plug-ins Actives e incluso comentarios HTML. Además, personalizaremos
esta barra añadiendo nuestros propios elementos y organizándolos a
nuestro gusto.
Dentro de la Barra de herramientas Insertar, veremos ocho categorías de

forma predeterminada: Común, Diseño, Formularios, Texto, HTML,
Aplicación, Elementos Flash y Favoritos.
7
Podrá acceder a estas opciones como barras totalmente independientes, o bien como pestañas,
seleccionando la orden Mostrar como Fichas del menú con forma de flecha desplegable.
Para volver a mostrar como opciones independientes cada categoría, presione sobre una de las
pestañas con el botón secundario del ratón y marque la orden Mostrar como menú.
 Común: Al seleccionar esta categoría, tendrá acceso a las opciones y elementos HTML más
utilizados como: imágenes, tablas, capas, etc.
 Diseño: En ella, verá opciones para insertar tablas, etiquetas, marcos o bien elegir entre las
tres vistas de tablas: Estándar, Ampliada y Diseño.
 Formularios: Ofrece comandos con los que crearemos formularios e insertaremos los
elementos que los componen.
 Texto: Contiene caracteres especiales como los símbolos de copyright, comillas curvas,
marca registrada, etc.
8
 HTML: Contiene botones que permiten que los diseñadores Web incluyan etiquetas <meta>
con palabras claves para los motores de búsqueda, especificar el calendario de actualización
y otras muchas tareas que producen un gran impacto en el rendimiento general de un sitio
Web.
 Aplicación: Esta categoría permite insertar elementos dinámicos como juegos de registros,
regiones repetidas y grabar formularios de inserción y actualización.
 Elementos Flash: Permite insertar elementos de Macromedia Flash.
 Favoritos: Utilice esta categoría para agrupar y organizar los botones de la Barra de
herramientas Insertar que utiliza con más frecuencia.
1.6. Ventana de documento
La ventana de documento nos presenta el documento actual con una apariencia muy aproximada a la
que mostrará en un explorador Web. Es el lugar donde creará sus páginas Web escribiendo
encabezados y párrafos, insertando imágenes y enlaces, creando tablas y demás elementos HTML.
En la parte superior de la ventana de documento

verá una etiqueta que le muestra el nombre de la
página. Éste se acompañará de un asterisco (*) si el
documento contiene cambios no guardados.
Dreamweaver le permite trabajar en su documento

de diferentes formas, utilizando la vista Diseño, la
vista Código o empleando una vista combinada que
enseñe el diseño y el código del documento (Dividir). Puede cambiar de una vista a otra usando los
comandos Código, Dividir y Diseño de la Barra de herramientas Documento.
9
Si presta atención a la zona inferior de la ventana de documento verá sus dimensiones actuales (en
píxeles). Si hace clic en la flecha desplegable Tamaño de ventana, Dreamweaver mostrará otros
tamaños que le permitirán adaptar las dimensiones de la ventana a los tamaños de monitor
estándar. Este tamaño cambia si reduce manualmente el tamaño de la ventana del programa.
Enlace vídeo:
NOTA: El tamaño de la ventana indicado corresponde a las dimensiones internas de la ventana del
navegador sin bordes. El tamaño del monitor figura entre paréntesis.
Tenga en cuenta que si la ventana de documento está maximizada, no podrá modificar sus medidas.
1.7. Barra de herramientas Documento
Esta Barra de herramientas contiene botones que nos permitirán alternar entre las diferentes
vistas del documento. Además, dicha Barra contiene algunos comandos comunes relacionados
con la selección de vistas y el estado del documento. A continuación, vamos a ver con más
detenimiento las posibilidades que nos ofrece:
 Mostrar vista de Código: Nos permite examinar o editar el código HTML en la ventana de
documento.
 Mostrar vistas de Código y Diseño: Nos muestra, en la ventana de documento una

combinación de la vista Código y la vista Diseño.
 Mostrar vista de Diseño: Es la vista en la que se muestra por defecto la ventana de

documento; nos muestra una representación visual del documento, en lugar del código
subyacente.
10
 Título de documento: Nos permite introducir un título para el documento de una forma
rápida. Si el documento ya dispone de uno, aparecerá en este campo.
 No hay errores de comprobación de navegador: Comprueba la compatibilidad con

diferentes navegadores.
 Validar formato: Valida el documento actual o una etiqueta seleccionada.
 Administración de archivos: Abre el menú emergente con el mismo nombre, el cual contiene
la información del estado del documento en el que estamos trabajando.
 Vista previa/Depurar en explorador: Este menú emergente nos permitirá previsualizar el

documento actual en la ventana del navegador. Para agregar o cambiar los navegadores
enumerados en el menú, utilizaremos la opción Editar lista de navegadores y actuaremos
desde el cuadro de diálogo Preferencias.
 Actualizar vista de diseño: Utilice este botón para actualizar la vista Diseño después de
realizar cualquier cambio en el código de nuestro documento.
 Ver opciones: Este menú nos dejará configurar una serie de opciones que nos ayudarán a la
hora de trabajar con el documento de Dreamweaver.
 Ayudas visuales: Nos proponen ciertas opciones que nos ayudarán en el diseño de nuestras
páginas.
11
1.8. Panel Propiedades
El panel Propiedades de Macromedia Dreamweaver es probablemente la herramienta usada con más

frecuencia en el programa. Esencialmente, este panel nos permitirá examinar y editar las
propiedades del elemento seleccionado en el documento actual, ya sea una tabla, una imagen o una
línea de texto.
La forma de acceder a estas opciones es presionando la orden Propiedades del menú Ventana.
El contenido del panel Propiedades varía de forma dinámica en función del elemento seleccionado.
Por ejemplo, si seleccionamos una línea de texto, podremos cambiar su fuente, color y tamaño;
cuando seleccionamos una tabla, podremos cambiar el número de columnas y filas, las dimensiones
relativas, grosor de bordes y color, y alineación del contenido en las celdas.
Podrá acceder a atributos menos comunes de un objeto haciendo clic en la flecha de ampliación,
situada en la esquina inferior derecha del panel.
12
1.9. Edición de métodos abreviados de teclado
Los métodos abreviados de teclado son un rápido y fácil camino para acceder a las distintas
funciones de un programa.
La mayoría de los programas ofrecen al usuario unos métodos abreviados de teclado

predeterminados, pero Dreamweaver pone a nuestra disposición un editor que nos permitirá crear
nuestra propia configuración, editando los métodos abreviados existentes o utilizando otros
previamente predefinidos.
 Añadir un método abreviado a un comando: Enlace vídeo:
 Redefinir un método abreviado existente: Enlace vídeo:
 Eliminar un método abreviado de un comando: Enlace vídeo:
Acceda al menú principal Edición y seleccione Métodos abreviados de teclado. Muchos de los
comandos que aparecen ya poseen un juego de teclas para su activación. Estos pueden ser añadidos
o modificados por otro grupo de teclas que mejor nos convenga.
1.10. Panel Activos
El panel Activos es una de las herramientas de Dreamweaver a la que dedicaremos una atención
especial. Como los sitios Web han crecido en complejidad, manejar los activos puede convertirse en
una tarea muy difícil.
Algunos sitios Web pueden tener cientos de imágenes, archivos de audio y archivos multimedia. El
panel Activos nos permitirá administrar de forma fácil y rápida todos los activos de nuestro sitio
Web. Podremos controlar todos los colores, imágenes, URL externos y secuencias de comandos, así
como elementos Flash, Shockwave, QuickTime, plantillas y bibliotecas desde un lugar central.
13
Este panel ofrece dos formas de ver los activos; la opción Sitio, que muestra todos los activos del
sitio (que reconoce el panel), y la opción Favoritos, que sólo muestra los activos seleccionados de
manera explícita.
Para mostrar el panel Activos, despliegue el menú Ventana y seguidamente, presione la orden
Activos.
Observe en él que podemos trabajar con las siguientes categorías:
 Imágenes: Son archivos de imagen en formato .gif, .jpeg o .png. 

 Colores: Son los colores utilizados en documentos y hojas de estilos del sitio, incluidos los
colores del texto, el fondo y los vínculos
 URL: Muestra los URL externos a los que están vinculados los documentos del sitio. Esta
categoría incluye los siguientes tipos de vínculos: FTP, gopher, HTTP, HTTPS, JavaScript,
correo electrónico (mailto) y archivo local (file://).
 Flash: Son archivos de cualquier versión del formato Flash de Macromedia. El panel Activos
muestra los archivos .swf (Flash comprimidos), pero no los .fla (Flash de origen).
 Shockwave: Son archivos de cualquier versión del formato Shockwave de Macromedia.
 Películas: Son archivos de películas en el formato QuickTime o .mpeg.
 Scripts: Son archivos JavaScript o VBScript. Las secuencias de comandos de archivos HTML no
aparecen en el panel Activos, a diferencia de las incluidas en archivos JavaScript o VBScript
independientes.
 Plantillas: Permiten utilizar la misma disposición en múltiples páginas, así como modificar
fácilmente el diseño de todas las páginas a la vez.
 Biblioteca: Son elementos que se utilizan en múltiples páginas. Cuando se modifica un
elemento de biblioteca, se actualizan todas las páginas que contienen ese elemento.
1.11. Trabajar con el panel Activos
En la barra de menú seleccionamos Archivo  Abrir y cargamos un fichero HTML.
Posteriormente seleccionamos en la barra de menú Ventana y el panel Activos. Y actualizamos la

lista del sitio favorito obteniendo los ficheros de imágenes, URL, películas, etc., que podremos utilizar
en nuestro fichero HTML.
Nota: Para poder trabajar con el panel de Activos hay que dar de alta primeramente el Sitio donde
está todos los ficheros de imágenes, películas, etc.
Enlace vídeo:
14
1.12. Panel Historial
El panel Historial nos muestra una lista con todos los pasos que hemos realizado en el documento
activo de Dreamweaver desde que éste se creó o abrió. Este panel resultará muy útil para deshacer
uno o varios pasos o para repetirlos, así como, para crear nuevos comandos que automaticen tareas
que se repiten.
Para acceder al panel Historial ir a Ventana de la barra de menú y seleccionar Historial. En esta
ventana de Historial se va observando los cambios realizados.
Enlace vídeo:
1.13. Práctica simulada: Entrar en Macromedia Dreamweaver
Inicie una nueva sesión de trabajo con Macromedia Dreamweaver, utilizando el menú de inicio de
Windows o el acceso directo que se encuentra en el escritorio.
1.14. Práctica simulada: Localizar áreas del entorno de trabajo
Una vez dentro de la aplicación trate de localizar las diferentes áreas de su entorno.
Barra de Herramienta. Documento.
 Multipantalla.
 Vista previa/Depurar en navegadores.
 Administración de archivos.
 Validación W3C.
 Configurar compatibilidad con navegadores.
 Ayudas visuales.
 Título.
15
1.15. Práctica simulada: Configurar la ventana de documento
Configure un nuevo valor personalizado para establecer las dimensiones de la ventana de

documento. Introduzca los valores Ancho= 700 y Alto= 500.
1.16. 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.
- Entre en la aplicación y cree un nuevo documento HTML.

- Establezca como tamaño para la ventana de documento 725x540 y añádale la descripción
Web Spider-Man.
- Desde el cuadro de diálogo Métodos abreviados de teclado, duplique el conjunto
Macromedia Standard y asigne a la copia el nombre de Spider-Man.
- Elimine el método abreviado de teclado del comando Utilización de Dreamweaver
perteneciente a la categoría Ayuda.
- Realice el mismo proceso para eliminar el método abreviado de teclado del comando Capas
perteneciente a la categoría Ventana.
- Asigne el método abreviado de teclado F1 al comando Insertar de la categoría Ventana.
- Repita el proceso para asignar el método abreviado de teclado F2 al comando Propiedades
de la categoría Ventana.
- Salga de la aplicación.
16
Recuerda…
Las siguientes opciones están disponibles en la Barra de herramientas Documento:
- Actualizar vista de diseño.
- Mostrar vista de Código.
- Mostrar vista de Diseño.
La opción Tamaño de ventana la utilizaremos para aplicar un tamaño estándar a la ventana de

documento.
La memoria RAM que se recomienda para la correcta instalación de Dreamweaver es de 256 MB.
La localización de la Barra de título en el entorno de trabajo de Dreamweaver nos situaremos en la

parte superior de la pantalla mostrando el nombre del documento abierto.
El espacio que deberemos disponer para instalar el programa en el disco duro de un PC es de 1,8 GB.
La categoría capas no está disponible en la Barra de herramientas Insertar de forma predeterminada.
En la zona Barra de estado de Dreamweaver podremos informarnos sobre las dimensiones actuales
de la ventana de documento.
La función principal del Panel Activos sirve para administrar de forma rápida todos los archivos de
nuestro sitio Web.
Una vez instalado Dreamweaver se ejecutará utilizando un acceso directo que creemos en el
Escritorio de Windows.
La función principal del panel Propiedades nos permitirá examinar y editar las propiedades del
elemento seleccionado en el documento actual.
17
2. CREACIÓN DE SITIOS Y PÁGINAS WEB
Macromedia Dreamweaver es una herramienta de creación y administración de sitios, por lo que

puede utilizarla para crear sitios Web completos, además de documentos individuales. Para obtener
resultados óptimos, necesitaremos diseñar y planificar el sitio Web antes de crear las páginas que va
a contener. A lo largo del próximo tema, aprenderemos a organizar los archivos de los sitios local y
remoto. Luego, una vez creado el sitio local, colocaremos en él los documentos nuevos que
realicemos. Para finalizar, configuraremos las propiedades de los documentos de Dreamweaver y los
previsualizaremos en un navegador.
2.1. Planificación de un sitio Web
Antes de comenzar a realizar ningún tipo de desarrollo, es necesario hacer una planificación de
nuestro sitio. Dicha planificación, no sólo reducirá considerablemente el tiempo empleado en la
creación, sino que nos ayudará a que todas las páginas presenten un aspecto uniforme, además de
hacer más sencillo su uso. La forma más cómoda de trabajar, cuando la labor que desarrollamos se
vaya a publicar en un servidor FTP en Internet, es crear una carpeta local de almacenamiento en la
cual situaremos todo nuestro trabajo. De esta forma, podremos comprobarlo todo antes de subirlo al
servidor, minimizando así la aparición de posibles errores en el sitio Web una vez abierto al público.
Existen diferentes métodos básicos de distribución de las páginas con los que cualquier diseñador
deberá estar familiarizado, pues cada uno sirve para un propósito diferente, permitiéndonos incluso
su combinación:
 Estructura lineal: Antes del nacimiento de la World Wide Web, la mayoría de los formatos
visuales eran lineales, es decir, una página seguía a otra a lo largo de una secuencia
inalterable. Este modelo, hoy en día, todavía es muy usado para crear aplicaciones de
enseñanza, donde podremos controlar el orden de visualización de los temas, mostrando
una página tras otra como si de un libro multimedia se tratase.
 Estructura jerárquica: En este modelo, tomamos como punto de partida una página de
inicio, desde la cual podremos acceder al resto de páginas del sitio. Los sitios con estructura
jerárquica ayudan a proporcionar un mejor sentido sobre la orientación de nuestro sitio
Web.
18
 Estructura centralizada: Este tipo de navegación está basado en una página central de inicio
a la que le vincularemos el resto de páginas principales del sitio. El principal inconveniente de
este modelo es tener que pasar constantemente por la página principal para ir a otra zona.
 Estructura libre: Esta última estructura nos permite aprovechar al máximo la funcionalidad
de los hipervínculos, permitiéndonos que prácticamente cualquier página pueda conectarse
a cualquier otra de nuestro sitio. Como principal inconveniente del uso de este método es la
pérdida del internauta durante la navegación.
19
2.2. Configurar un sitio Web
Una vez establecida la planificación del sitio, decidido el diseño y su estructura, estamos preparados
para configurar uno nuevo usando Dreamweaver. Aunque siempre es posible definir la ubicación, lo
más adecuado es configurar el sitio local en Dreamweaver antes de comenzar a crear las distintas
páginas que compongan el proyecto.
Para establecer nuestro sitio web tenemos que acceder a la barra de menú Sitio y pulsar Nuevo Sitio.
Donde se muestra una ventana de configuración básica y avanzada para definir nuestro sitio. En la
pestaña avanzada se divide en categoría y datos locales, en la categoría de datos locales habrá que
introducir:
1. Nombre del sitio

2. Carpeta raíz local (Activar: la actualización de la lista de archivos locales automáticamente)
3. Carpeta predetermina de imágenes.
4. Vínculos relativos al sitio (Activar: Documentos o raíz del sitio)
5. Dirección HTTP ( Introducir la dirección del vínculo relativo al sitio)
6. Caché (Activar la caché).
Enlace vídeo:
20
2.3. Editar un sitio Web existente
Esta opción nos permite editar, duplicar, quitar, importar, etc., los sitios web que tengamos dados
de alta para una determinada página web. Cuando pulsamos en la barra de menú la pestaña Sitio a
continuación seleccionamos la opción Administrar Sitio donde nos muestra los sitios que tenemos
dados de alta en nuestro sistema local. Con ello, podemos editar uno de ellos y continuar trabajando
con él pulsando el botón LISTO. Lo mismo se puede eliminar un sitio con el botón de QUITAR.
Enlace vídeo:
2.4. Sistema de protección
Dreamweaver nos permite activar un sistema de protección de páginas que resulta de gran utilidad
cuando un equipo de diseñadores y programadores se encargan de desarrollar y mantener un sitio
Web. De esta manera, si por ejemplo, uno de los diseñadores está realizando alguna modificación,
Dreamweaver insertará, en el panel Archivos, una marca junto al archivo que estuviera editándose,
para que el resto de diseñadores se den cuenta de que ese fichero se está modificando
Ir a la barra de menú Sitio y editar nuestro sitio. En la categoría de datos remotos activar la opción
de Permitir desproteger y proteger archivo, para ello, habrá que introducir el nombre de protección
y la dirección de correo electrónico.
21
Enlace vídeo:
2.5. Panel Archivos
El panel Archivos es el lugar donde podremos realizar el mantenimiento de nuestro sitio Web. A
través de sus opciones, podremos crear nuevos documentos HTML, abrir y mover archivos, crear
carpetas, y borrar elementos. También podremos utilizarlo para transferir archivos de la carpeta en
desarrollo, de su disco duro a su servidor Web.
El panel Archivos presenta una Barra de herramientas que podremos utilizar para establecer qué
debe mostrarse en dicha ventana y para transferir archivos entre los sitios local y remoto.
En la barra de menú Ventanas seleccionar la opción Archivos. Nos muestra todos los archivos y
carpetas de nuestro sitio. En la barra de herramientas seleccionar “Conectar al servidor remoto”
esto nos permitirá establecer conexión con el sitio remoto donde están todas las carpetas y archivos
que se van actualizando automáticamente. Para ello, anteriormente debemos de configurar los datos
del servidor.
La barra de herramienta posee los siguientes botones de control:
 Cuadro de lista
 Conectar al servidor remoto.
 Actualizar la lista
 Archivos de sitios remotos y locales.
 Servidor de pruebas
 Mapa de sitios.
 Obtener archivos.
Nota: El tiempo máximo, por defecto, que permite tener Dreamweaver la conexión establecida es de
30 minutos, con posibilidad de modificarla.
22
Enlace vídeo:
2.6. Configurar las preferencias del panel Archivos
En este caso describimos cómo configurar el panel Archivos para que se cubran todas nuestras
necesidades. Para ello, iremos a la barra de menú Edición y seleccionamos Preferencia. En la lista de
categoría seleccionar Sitio.
Enlace vídeo:
23
2.7. Mapa del sitio
A continuación, explicaremos cómo utilizar el comando Mapa del sitio del panel Archivos, con el que
podremos ver un sitio local en forma de plano visual de iconos vinculados. Con este mapa, el
diseñador Web puede ver cómo está estructurado todo el sitio Web.
En la barra de menú Ventana seleccionar Archivos nos muestra todos los archivos y carpetas de
nuestro sitio tanto locales y remotos a en el panel derecho. Pulsar el botón de expandir archivos
locales y remotos.
Pulsar en la barra de herramientas el botón de Mapas de Sitio y se muestra la estructura de todos los
archivos locales. Con el signo (+) se podrá ampliar más la estructura.
Enlace vídeo:
2.8. Mapa de diseño del sitio
Existen ocasiones en las que no pueda visualizar el mapa de su sito, y posiblemente la causa se deba
a que no se ha especificado ninguna página principal y Dreamweaver no logra localizar ningún
archivo denominado index.html o index.htm en la raíz. En estos casos, Dreamweaver le mostrará un
mensaje de advertencia pidiéndole que seleccione una página principal.
Para evitar problemas de este tipo, asegúrese de que la disposición del Mapa del sitio sea la correcta.
En la barra de menú Sitio seleccionar Administrar sitio y elegir de la lista de sitios el que
corresponda. En la lista de categoría elegir Mapa de diseño del sitio. Introduzca los datos
correspondientes a:
 Página principal
 Número de columnas
 Ancho de las columnas
 Etiquetas de icono
24
Enlace vídeo:
2.9. Crear, abrir y guardar documentos
Una vez que hemos aprendido a crear el sitio local, debemos comenzar a desarrollar los documentos
que colocaremos en él.
CREAR UN NUEVO DOCUMENTO EN BLANCO.
Macromedia Dreamweaver ofrece diversas formas para crear un documento. Podemos crear
documento HTML nuevo (en blanco), abrir documento HTML existente, crear un nuevo documento
basado en una plantilla.
1. Ir a Archivo de la barra de menú y seleccionar Nuevo.
25
2. Se abre el cuadro de diálogo Nuevo Documento.

3. Pulse sobre la pestaña General y observe la gran cantidad de categorías entre las que puede
elegir.
4. Para abrir un documento HTML en blanco seleccione la categoría Página básica y dentro del
área Página básica la opción HTML.
5. Presione crear para finalizar el proceso.
6. Aparece una ventana nueva (sin título) para comenzar a introducir datos.
7. Si deseamos abrir un archivo existente, tenemos que acceder a la barra de menú Archivo y
seleccionar la opción abrir para buscar y cargar el archivo existente en nuestra ventana.
8. Para guardar un documento por primera vez, desplegamos el menú Archivo y Guardar como,
elegimos tipos de archivos HTML y la ruta que queremos darle.
26
Enlace vídeo:
2.10. Configurar las propiedades del documento
Antes de comenzar a añadir contenido a un documento, podremos necesitar configurar sus

propiedades principales. Con el cuadro de diálogo Propiedades de la página, podremos configurar el
título de la página, las imágenes y colores del fondo, del texto y de los vínculos.
Para configurar las propiedades del documento vamos a la barra de menú Modificar y seleccionamos
Propiedades de la página. Aquí se puede añadir o modificar las características de la página.
En el área de categoría tenemos el Aspecto, Vínculos, Titulo/Codificación e Imagen de rastreo. En

Título/Codificación podremos añadir o modificar el título de la página, tipo del documento,
codificación, etc.
Enlace vídeo:
27
2.11. Guías visuales
Dreamweaver nos proporciona varios tipos de guías visuales que nos ayudarán a la hora de diseñar y
previsualizar cuál será la apariencia de nuestro diseño en un navegador. Aprenderemos a activar la
visualización de las reglas y a utilizar la cuadrícula para lograr una mayor precisión en la colocación y
ajuste del tamaño de las capas.
Accedemos a la barra de menú Ver y seleccionamos Reglas y el submenú Mostrar.
Se puede elegir una de las siguientes medidas:
 Pixeles
 Pulgadas
 Centímetros.
Si deseamos restablecer la regla a como estaba al principio, accedemos al menú Ver, seleccionamos
Regla y Restablecer origen.
Para obtener la cuadricula, accedemos al menú Ver y seleccionamos Cuadricula y seleccionar del
submenú:
 Mostrar cuadricula
 Ajustar cuadricula
 Configurar cuadrícula.
28
En el submenú de Cuadricula seleccionamos Configurar cuadricula e introducimos valores para:
 Color de la cuadricula
 Mostrar cuadricula (SI/NO)
 Ajustar cuadricula (SI/NO)
 Espaciado entre cuadriculas en pixeles
 Mostrar líneas o puntos.
Enlace vídeo:
29
2.12. Insertar palabras clave y descripciones
Si desea dar a conocer una página Web, podremos usar una serie de elementos encargados de
contener la información necesaria para que los motores de búsqueda puedan dar a conocer el
contenido y tipo de la página Web. En Dreamweaver, estos elementos están representados por los
objetos Palabras clave y Descripción.
En el menú Insertar seleccione la opción HTML.
Seguidamente se coloca sobre la opción Etiquetas Head y en el submenú que aparece seleccione
Palabra Clave. En este cuadro de dialogo introducir todas las palabras claves separadas de una coma.
Enlace vídeo:
30
2.13. Previsualizar un documento
A la hora de usar un programa como Dreamweaver, o cualquier otro programa de creación de

páginas Web, es importante el poder previsualizar el resultado de nuestro trabajo con cierta
frecuencia en uno o varios exploradores. A pesar de que en la ventana de trabajo del programa, se
tiene una visión muy similar a la de un explorador, debido al gran número de navegadores existentes
y a sus diferencias, se hace necesario poder visualizar nuestra página en ellos.
En el menú Archivo, seleccione la opción Vista previa en el navegador y en el submenú que aparece
seleccione Editar lista de navegadores.
Se abre el cuadro de diálogo Preferencias con la categoría Vista previa en el navegador seleccionado.
Para añadir un nuevo navegador a la lista predeterminada, en el área Navegadores pulse el botón en
forma de signo (+). Se abre el cuadro de diálogo Añadir navegador.
En esta ventana nos pide que introduzcamos el nombre del navegador y la ruta donde está instalada
la aplicación, para ello, le damos Examinar y buscamos un archivo ejecutable con formato .exe que
contenga la aplicación del navegador. Seleccionar si el navegador se quiere que sea principal o
secundario.
NOTA: Una vez haya añadido uno o varios navegadores a la lista, podrá previsualizar las páginas Web
en dichos navegadores. Para ello, seleccione de la lista que aparece al escoger la opción Vista previa
en el navegador del menú Archivo.
Enlace vídeo:
31
2.14. Práctica simulada: Nuevo sitio
En esta práctica simulada, deberá crear un nuevo sitio en Dreamweaver y establecer la ruta de sus
archivos y carpetas. Crea un nuevo sitio local dándole un Nombre. Configure el sitio, utilizando los
archivos y carpetas creados con anterioridad.
2.15. Práctica simulada: Cambiar la página principal
Seguidamente, deberá mostrar el mapa del sitio que ha creado y modificar la página principal que
muestra por defecto. Utilice el menú Ventana para abrir el sitio creado.
2.16. Práctica simulada: Configurar el fondo
En esta práctica simulada, deberá modificar algunas de las propiedades de la página que se muestra,
tales como su título, imagen de fondo, color, etc.
Utilice el cuadro de diálogo de Propiedades de la página para configurar algunas de las propiedades
de la página.
2.17. Práctica: Diseño Web parte II
Una vez configuradas las preferencias de Dreamweaver que vimos en el ejercicio anterior, llega el
momento de configurar la estructura del sitio que vamos a crear. Un sitio es un lugar de
almacenamiento para todos los documentos y archivos necesarios para crear una página Web. Al
definir el sitio local, lo que haremos será establecer el lugar en el que pensamos almacenar todos los
archivos del sitio dentro del disco duro de nuestro PC. Es recomendable crear un sitio local por cada
sitio Web que creemos.
- Cree un sitio Web denominado Spider-Man en una carpeta raíz del disco duro de su PC.
- Marque las opciones correspondientes para que la lista de archivos locales se actualice
automáticamente y active la caché.
- Cree la página principal del sitio con el nombre Index.html.
- Asígnele el título de página ::: Spider-Man: La película :::.
- Muestre el panel Archivos de forma expandida y vea el mapa del sitio.
- Configure las propiedades de la página de forma que muestre el color de fondo de color
negro.
- Muestre los colores de los vínculos con los siguientes valores:
• Color del vínculo: #0000FF.
• Vínculos visitados: #FF0000.
• Vínculos activos: #FFFF00.
- Introduzca a su página las palabras clave: spider-man, raimi, marvel, maguire, dafoe, dunst,
columbia, superhéroes, cómics, araña.
- Introduzca a su página el siguiente texto descriptivo: Página dedicada a la película Spider-
Man dirigida por Sam Raimi. Entra y descubre todos los datos de una de las películas más
esperadas de los últimos años.
- Vea cómo Dreamweaver añade al código de su documento las palabras clave y la descripción
de la página.
32
Recuerda…
El significado de las siglas FTP es Protocolo de Transferencia de Archivos.
La opción que deberemos activar para poder previsualizar un documento HTML en el navegador
que tengamos configurado como predeterminado es la opción Vista previa en el navegador del
menú Archivo.
La opción que deberemos marcar para activar el sistema de protección de páginas de

Dreamweaver es Permitir desproteger y proteger archivo.
El tiempo que debe permanecer inactiva la conexión con un servidor remoto para que
Dreamweaver lo desconecte son de 30 minutos.
El significado del pequeño asterisco que aparece junto al nombre de la página en la Barra de
título del documento contiene cambios que no han sido guardados.
El cuadro de diálogo Propiedades de la página nos permitirá configurar una imagen como fondo.
Si en la categoría Datos locales del cuadro de diálogo Definición de sitio, activa la opción Cache,
mejoraremos la velocidad de las tareas de administración de vínculos y sitios.
33
3. TRABAJO CON TEXTO
A pesar del hecho incuestionable de que hoy en día Internet se ha convertido en un medio visual, la
mayoría de la información que nos ofrece es aún textual. En este capítulo, vamos a aprender la forma
más rápida de añadir y editar texto con Dreamweaver. También, a organizar los bloques de texto en
nuestra página, así como, a crear estilos tanto HTML como CSS para aplicar un formato de texto.
3.1. Encabezados y párrafos
Todo texto HTML está compuesto principalmente por encabezados y párrafos. Del mismo modo en
que se muestran en un periódico los titulares para anunciar una historia o los subtítulos para
resumirla, los encabezados en Dreamweaver serán utilizados para separar las distintas secciones
principales de un documento HTML. Dreamweaver nos presenta seis niveles de encabezados cuya
etiqueta en HTML es <hn>, donde n es un número del 1 al 6. El encabezado de mayor tamaño es
<h1> y el de menor <h6>.
Los encabezados HTML, a diferencia de cualquier procesador de textos, no están vinculados a ningún
tamaño específico en puntos, tienen un tamaño determinado y proporcional dependiendo en última
instancia del explorador que estemos usando.
La mayor parte de páginas Web están compuestas generalmente por párrafos. Éstos, en HTML, se
distinguen por el uso de la etiqueta <p>. En Dreamweaver se inicia uno nuevo cada vez que se pulsa
la tecla INTRO en la ventana de documento.
34
Vaya a la barra de menú y pulse Texto a continuación seleccione Formato de párrafo y escoja uno de
los seis niveles de encabezados que Dreamweaver le proporciona. Recuerde que el encabezado de
mayor tamaño en HTML se etiqueta como <h1> y el de menor tamaño como <h6>.
Nota: También podrá aplicar etiquetas de párrafo o encabezado a un texto utilizando el cuadro de
lista Formato del panel Propiedades.
Enlace video:
3.2. Asignar fuentes a un texto
Un diseñador gráfico, normalmente, puede utilizar tantas fuentes como tenga configuradas en su
sistema. Los diseñadores de páginas Web, por el contrario, se encuentran con la limitación de que los
navegadores sólo pueden mostrar fuentes que estén instaladas en el sistema del usuario, de no ser
así, el navegador la reemplazará por una fuente que sí esté instalada.
En todas las partes del mundo, cada ordenador personal que fue fabricado en los últimos años
incluye lo que se denomina Fuentes del sistema. Éstas son: Times New Roman, Courier New y Arial
(para PC), y Times New Roman, Courier New y Helvetica (para MAC). Con el uso de estas fuentes, no
tendremos que temer por su sustitución.
35
Nota: También es posible cambiar la fuente de texto usando la opción Fuente del menú Texto y
seleccionando la serie de fuentes que desee en el menú desplegable que aparece.
Enlace video:
3.3. Editar la lista de fuentes de Dreamweaver
A continuación, veremos los pasos que debemos seguir para editar la lista de fuentes de las que
dispone Dreamweaver.
En el menú Texto seleccionamos Fuente y en el submenú que aparece, escoger Editar lista de
Fuentes. Se abre el cuadro de diálogo con el mismo nombre.
36
En este cuadro de diálogo se podrá añadir o quitar fuentes en la lista de fuentes. De las fuentes
disponibles se elegirán las que deseemos seleccionándola y pasándola a las fuentes elegidas con el
botón (<<) y posteriormente con el botón más (+) se añadirá a la lista de fuentes. Para quitar una
fuente procederemos en sentido contrario, seleccionamos la fuente pulsamos el botón de menos (-)
y le damos al botón (>>).
Enlace video:
3.4. Cambiar el color del texto
El color de texto de un documento, por defecto, será el predeterminado por el navegador del
usuario, normalmente el negro. Sin embargo, con Dreamweaver podremos cambiarlo de modo que
el nuevo color prevalezca sobre el establecido en el cuadro de diálogo Propiedades de la página.
Los colores se expresan en HTML como valores hexadecimales o usando sus nombres. El valor
hexadecimal se basa en el valor de la mezcla de los colores rojo, verde y azul y se representa por el
símbolo almohadilla (#) seguido de 6 caracteres. Así por ejemplo, #FFFFFF es el valor hexadecimal
correspondiente al color blanco.
37
En el panel Propiedades realice una de las siguientes acciones:
1. Escriba el valor hexadecimal en el cuadro de edición Color del texto.

2. Seleccione de la paleta de colores el color deseado.
Según vamos desplazando el cursor por la paleta de colores, se va visualizando una muestra del color
en la esquina superior izquierda junto al valor hexadecimal del mismo.
Enlace vídeo:
3.5. Alineación del texto
Dreamweaver es un programa que nos permite alinear fácilmente el texto. HTML soporta la
alineación del texto respecto al margen izquierdo, derecho, justificado y al centro de la ventana del
navegador.
38
Para realizar esta operación debe de estar el texto seleccionado e ir al panel Propiedades y, hacer
clic en uno de los cuatro botones de alineación del texto:
 Alinear a la izquierda
 Alinear al centro
 Alinear a la derecha
 Justificar
Nota: También se puede alinear un texto eligiendo Texto de la barra de menú y seleccionar Alinear.
Enlace vídeo:
3.6. Sangrías
En el lenguaje HTML, debemos insertar la etiqueta <blockquote> cuando queramos aplicar un

sangrado a un párrafo. Dreamweaver inserta, de forma automática, esta etiqueta al hacer clic sobre
el icono Sangría de texto del panel Propiedades.
Coloque el curso del texto en el párrafo que desea sangrar y haga clic en el botón sangría de texto
del panel propiedades.
39
NOTA: También es posible utilizar las opciones Sangría y Anular sangría del menú Texto para aplicar
sangrías a los párrafos.
Enlace vídeo:
40
3.7. Crear listas
Con Dreamweaver, creamos fácilmente listas numeradas, listas con viñetas y listas de definición a
partir de texto existente o de texto nuevo que escriba en la ventana de documento. Las listas de
definición no emplean caracteres iniciales como puntos, guiones o números y suelen utilizarse en
glosarios o descripciones.
Si el panel de Propiedades no se encuentra activo, vaya al menú Ventana y pulse propiedades, se

abrirá el panel de propiedades en la parte inferior.
Ponga el cursor donde vaya a comenzar el primer elemento de una lista y en el panel de propiedades
elija lista simbólica o numérica, en este caso elegir numérica.
Para una lista ordenada, seleccione Texto de la barra menú y a continuación la opción Lista donde
aparece un submenú para lista ordenada, lista sin ordenar o lista de definición.
Enlace video:
41
3.8. Corrección ortográfica
Cometer errores ortográficos en el texto de nuestra página Web puede dar una mala impresión a los
visitantes. Dreamweaver, al igual que cualquier procesador de texto, incluye un corrector ortográfico
fácil de manejar, y que nos ahorrará esos desagradables momentos. Es una buena costumbre realizar
una comprobación ortográfica de nuestra página Web antes de publicarla.
La corrección que realiza Dreamweaver no tiene en cuenta las etiquetas HTML ni los valores de
atributo, sólo corrige el texto escrito en la ventana del documento abierto. Dreamweaver comprueba
el texto de la página Web usando dos diccionarios diferentes: uno estándar para el idioma
seleccionado y otro personalizado, al que podremos ir añadiendo las palabras que creamos
oportunas.
Primeramente hay que situar el cursor al principio del texto, de otra forma la opción de ortografía no
haría su cometido. Seguidamente en el menú Texto elija Ortografía o pulse las letras combinadas
Mayus+F7.
En el cuadro de diálogo Ortografía van apareciendo palabras que el sistema nos surgiere que
cambiemos.
Enlace vídeo:
42
3.9. Insertar fechas en un documento de Dreamweaver
Dreamweaver nos proporciona un objeto Fecha que permite insertar la fecha actual con el formato
que prefiera (con o sin la hora) y ofrece la posibilidad de actualizarla cada vez que guarde el archivo.
Para insertar la fecha, coloque el cursor del ratón donde desea que aparezca la fecha, seguidamente
vaya al menú Insertar y pulse Fecha. Aparecerá un cuadro de diálogo Insertar Fecha.
En el cuadro de diálogo Insertar fecha se podrá configurar con tres formatos:
1. Formato de día.
2. Formato de fecha.
3. Formato de hora.
Enlace vídeo:
43
3.10. Insertar caracteres especiales
A la hora de trabajar con un editor de páginas Web, cualquier usuario se limita a introducir el texto
directamente con el teclado, consiguiendo una letra, número u otro carácter por cada tecla pulsada.
¿Qué ocurriría si necesitamos insertar un carácter que no aparece en el teclado? Gracias a
Dreamweaver, podremos añadir caracteres especiales con un simple clic del ratón.
Para acceder a insertar caracteres vaya al menú Ver y seleccione la opción Barra de herramientas y
en el submenú seleccione Insertar.
En la lista que se muestra, haga clic en el carácter especial que desea insertar en el documento, o
bien seleccione la orden Otros caracteres y acceda al cuadro de diálogo Insertar otro carácter.
Enlace vídeo:
44
3.11. Insertar reglas horizontales
Las reglas horizontales (líneas) resultan de gran utilidad a la hora de separar bloques de texto y
organizar mejor la información en un documento de Dreamweaver. Esencialmente, una regla
horizontal es una línea recta que se extenderá a lo largo de toda la ventana de documento.
Enlace vídeo:
3.12. Crear un texto Flash
La tecnología Flash de Macromedia es la principal solución para la creación y reproducción de

gráficos y animaciones vectoriales. Dreamweaver nos permite crear texto vectorial editable, que
podemos colocar en un documento HTML. Usando texto Flash, evitaremos las limitaciones de fuente
y tamaño que hemos visto al comienzo del tema.
Nota: Es importante hacer saber al usuario que necesitará tener instalado en su PC el plug-in de
Flash, para poder ver este tipo de texto insertado en un documento HTML.
En el menú de herramientas abrimos las opciones de Flash y seleccionamos Texto Flash.
45
En el cuadro de diálogo Insertar texto flash, podrá configurar las características del texto: Fuente,
tamaño, color, color de sustitución, insertar texto, vinculo, destino, color de fondo.
Enlace vídeo:
3.13. Creación de estilos CSS
Un estilo es un grupo de atributos de formato que controla la apariencia de un rango de texto en un

documento. Una hoja de estilos CSS es un archivo de texto externo, que contiene estilos y
especificaciones de formato, que se puede emplear para controlar muchos documentos al mismo
tiempo. La ventaja de utilizar una hoja de estilos CSS sobre un estilo HTML reside en que, además de
estar vinculada a múltiples documentos cuando se actualiza o cambia un estilo CSS, se actualiza
automáticamente el formato de todos los documentos que utilicen esa hoja de estilos.
Las hojas de estilos CSS residen en el área <head> del documento funcionando en navegadores 4.0 y
superiores.
Enlace vídeo:
3.14. Buscar y reemplazar texto
Macromedia Dreamweaver nos permite buscar texto dentro de un documento HTML pudiéndolo
reemplazar rápidamente por el texto que queramos. En la siguiente explicación, veremos de forma
detallada la totalidad del proceso a seguir para realizar esta operación.
Enlace vídeo:
46
3.15. Práctica simulada: Aplicar fuentes
Mediante esta práctica simulada, deberá crear un conjunto de fuentes que posteriormente, aplicará
al texto que se muestra seleccionado.
Enlace prácticas simuladas:
3.16. Práctica simulada: Corrección ortográfica
Deberá realizar una corrección ortográfica del texto que se muestra subrayado en la práctica
simulada corrigiendo los errores y omitiendo los nombres propios.
Enlace prácticas simuladas:
Recuerda…
Las maneras que podremos aplicar etiquetas de párrafo o encabezado a un texto es seleccionando la
opción Formato de párrafo del menú Texto.
Si queremos insertar un carácter que no aparece en el teclado lo hacemos mediante el grupo Texto
de la Barra de herramientas Insertar.
El conjunto de fuentes que Dreamweaver aplica a los textos de forma predeterminada se denomina
Fuentes del sistema.
La combinación de teclas MAYÚS+F7 abre el cuadro de diálogo que nos permitirá corregir un texto
en Dreamweaver.
Es posible localizar un texto determinado en un documento de Dreamweaver y reemplazarlo por

otro mediante la opción Buscar y reemplazar.
La herramienta Reglas horizontales podemos utilizar para organizar mejor la información en un

documento de Dreamweaver.
47
4. IMÁGENES
En un principio, Internet nació como un medio de difusión de texto entre científicos y militares
estadounidenses. En la actualidad, Internet se ha convertido en un medio visual enfocado a todo tipo
de usuarios. A lo largo de este capítulo, veremos que la potencia de Dreamweaver es incluso mayor a
la hora de usar su entorno visual para introducir imágenes. Conocerá los formatos gráficos más
comunes de la red, aprenderemos a insertar imágenes y a editarlas usando los distintos métodos que
nos proporciona el programa.
4.1. Formatos de gráficos Web
Lo primero y más importante que necesitamos saber a la hora de trabajar con formatos de imágenes
para la Web es que, sin la ayuda de plug-ins, ésta sólo soporta tres tipos de imágenes: el formato
JPEG, el formato GIF y el formato PNG. Los dos primeros son reconocidos por la totalidad de
exploradores y el tercero cada vez se encuentra más integrado en Internet.
 GIF (Graphics Interchange Format): Fue desarrollado originalmente por CompuServe a finales
de los años 80 para solucionar el problema de incompatibilidad entre plataformas. Los
archivos GIF son imágenes de mapa de bits que utiliza una paleta de 256 colores como
máximo, por eso, este formato suele ser usado para imágenes simples con colores planos
(dibujos y logotipos) y son generalmente de un tamaño reducido.
 JPEG (Joint Photographic Experts Group): Fue desarrollado con el fin de manejar imágenes
fotográficas. La fuerza principal de este tipo de imágenes es que pueden trabajar con
millones de colores. Para hacer que este formato sea manejable se ha de comprimir tal
cantidad de colores, eliminando lo que los algoritmos consideren información redundante.
Cuanto mayor sea la compresión del archivo, menor será su resolución.
 PNG (Portable Network Graphic): Fue desarrollado por Macromedia y combina la compresión
de los archivos GIF con los millones de colores de las imágenes JPEG, por lo tanto, soporta
color indexado (256 colores), escala de grises, imágenes de color verdadero (millones de
colores) y transparencias. El problema del uso de este formato es que, hasta hace poco, los
navegadores sólo lo reconocían mediante la utilización de plug-ins. Dreamweaver es de los
primeros programas que permite trabajar con archivos PNG de un modo natural,
visualizándose en la ventana de documento del programa, igual que un archivo GIF o JPEG
48
4.2. Colocación de imágenes
Dreamweaver nos permite abrir cualquier tipo de archivo guardado en formato GIF, JPEG o PNG para
colocarlo en la ventana de documento.
Primeramente tendremos que tener en la barra de herramienta la opción imágenes, para activarla
abra el menú principal Ver y seleccione la barra de herramientas e Insertar y en la pestaña de
común activar imágenes.
Enlace vídeo:
4.3. Editar imágenes
Dreamweaver es una completísima herramienta de creación de páginas Web, y no un programa de

edición de gráficos. Pero en muchas ocasiones, al colocar una imagen en un documento nos daremos
cuenta de que ésta debe ser modificada. Dreamweaver nos permitirá especificar el editor de gráficos
que desee utilizar.
Enlace vídeo:
49
4.4. Cambiar el tamaño de las imágenes
La anchura y altura de una imagen son dos atributos importantes, ya que los navegadores
reconstruyen las páginas más rápido si conocen estos atributos. Estos valores, expresados en píxeles,
son incluidos en el código HTML de un documento al insertar una imagen.
Redimensionar una imagen desde Dreamweaver es realmente fácil. Los campos de edición An
(Anchura) y Al (Altura) del panel Propiedades muestran el ancho y alto actual de una imagen.
Cambiando el tamaño se restablecen los atributos width y height en el código, pero no afectaremos
al tamaño del archivo que no se verá influenciado por el cambio efectuado.
Enlace vídeo:
4.5. Uso de la etiqueta <alt>
La etiqueta <alt> es probablemente uno de los mayores rasgos distintivos que podremos usar con las
imágenes que colocamos en Dreamweaver. Esencialmente, la etiqueta <alt> nos permite
proporcionar información extra sobre una imagen. Esta información de texto sustituirá a la imagen
en los navegadores que sólo admiten texto o en aquéllos configurados para descargar las imágenes
manualmente. En algunos navegadores, este texto también será visible al colocar el cursor del ratón
sobre la imagen que tenga asociada esta etiqueta.
Enlace vídeo:
50
4.6. Justificar imágenes
Lo más básico que podemos hacer con una imagen después de colocarla en la ventana de documento
de Dreamweaver, es justificarla dentro de la página. Por regla general, una imagen no se puede
mover dentro de un documento, sí lo permiten, sin embargo, otros programas de edición como
Fireworks o Photoshop, donde la alineación se convierte en una parte importante del diseño final.
Enlace vídeo:
4.7. Alineación de imágenes con texto
Ahora que ya sabe cómo justificar imágenes en un documento, veremos la forma de alinear
imágenes con texto en Dreamweaver. A diferencia de otras aplicaciones, fundamentalmente editores
de texto, HTML no ofrece ningún método para ajustar texto alrededor del contorno de una imagen.
Lo que sí podremos hacer con Dreamweaver será alinear una imagen con texto, con otra imagen o
con otros elementos de la misma línea.
Enlace vídeo:
4.8. Insertar bordes
Durante el proceso creativo, suele ser necesario añadir un borde sólido alrededor de una imagen
para poder distinguirla de otras colocadas en el mismo documento. El atributo borde nos permite
situar un borde rectangular de un solo color rodeando un gráfico. La anchura de este borde se mide
en píxeles y el color de éste es el mismo que el del texto predeterminado del documento.
Enlace vídeo:
4.9. Insertar imágenes de sustitución
Las imágenes de sustitución son uno de los efectos más populares en la realización de páginas Web.
Una imagen de sustitución no es más que una imagen que cambia cuando sitúa el puntero del cursor
sobre ella. En verdad trabajamos con dos imágenes: la imagen principal, que es la que aparece al
cargarse inicialmente la página y la imagen que la sustituye, que aparece al colocar el puntero del
ratón sobre la primera.
Enlace vídeo:
51
NOTA: Ambas imágenes deben de ser del mismo tamaño. Si son distintos, Dreamweaver cambia
automáticamente el de la segunda para ajustarlo a las dimensiones de la primera.
4.10. Práctica simulada: Insertar imagen
Inserte la imagen “007.jpg” en la ventana de documento siguiendo los pasos que ha estudiado.
Enlace práctica simuladas:
4.11. Práctica simulada: Modificar una imagen
En esta práctica simulada, deberá modificar el tamaño de la imagen que se muestra en la ventana de
documento, establecer un borde y alinearla.
Enlace práctica simuladas:
4.12. Práctica: Diseño Web parte III
A lo largo de la siguiente práctica, vamos a comenzar a trabajar con imágenes y texto para completar
la página de inicio de nuestra Web. Aprenderemos a colocar imágenes y a editarlas directamente con
el programa que configuremos en Dreamweaver; añadiremos un borde a la imagen y utilizaremos la
etiqueta <alt> para proporcionar información adicional sobre la Web.
 Dentro del sitio Spider-Man, cree una carpeta para guardar nuestras imágenes con el nombre
IMAGES.
 Dentro del documento “Index.html” inserte la imagen “spider-index01.jpg” que se adjunta
con la práctica y cree una copia de ella para guardarla dentro de la carpeta IMAGES.
 Desde el panel Propiedades, alinee la imagen que ha insertado al centro y presione INTRO
para que se ubique en la zona central de la página.
 Añada un borde a la imagen con el valor 3.
 Especifique un editor de gráficos externo para tratar las imágenes con formato .jpg.
 Edite la imagen en el editor de gráficos que acaba de configurar, de forma que, bajo el texto
“THE MOVIE”, se muestre los textos INTRO y MENÚ.
 Utilice la etiqueta <alt> para proporcionar a la imagen información extra referente a su
tamaño. Ejemplo: Imagen (127 Kb).
 Inserte el texto Para ver la INTRO, instale Flash Web Player, debajo de la imagen. Cambie el
color de su fuente para que se muestre Blanco.
 Mediante el editor de fuentes, cree un conjunto nuevo con las fuentes: 1979, Verdana y Arial
Narrow que se adjuntan con la práctica.
 Asigne el conjunto de fuentes anterior, al texto “Para ver la INTRO, instale Flash Web Player”
que insertó antes.
 Guarde los cambios
52
Recuerda…
El color que representan los bordes en Dreamweaver por defecto es el color de texto
predeterminado.
La etiqueta que nos permitirá proporcionar información extra sobre una imagen, y sustituirá a la
imagen en los navegadores que sólo admiten texto es la etiqueta “alt “.
El panel que utilizaremos para editar una imagen con Dreamweaver es el panel de Propiedades.
La tecla que debemos mantener pulsada para que al redimensionar una imagen usando los
manejadores ésta mantenga sus proporciones de anchura y altura es la tecla MAYÚS.
El formato de imagen que fue desarrollado por Macromedia combinando la compresión de los
archivos GIF con los millones de colores de las imágenes JPEG fue el PNG.
Los siguientes formatos de imágenes que son soportados por Dreamweaver son GIF, JPEG y PNG.
53
5. CREACIÓN DE MARCOS
Los marcos constituyen una de las herramientas de diseño de páginas Web más potente. Un
conjunto de marcos es una página Web que está dividida en páginas de HTML estáticas y cambiantes.
El uso de marcos y conjuntos de marcos se ha extendido enormemente y su tecnología es admitida
por los navegadores de principal uso en Internet. Hoy en día, cualquier diseñador de páginas Web
que pretenda ser competitivo necesita tener un cierto conocimiento acerca de los marcos.
5.1. Creación de marcos y conjuntos de marcos
Los marcos pueden ser una excelente herramienta para los diseñadores de páginas Web, pero hemos
de tener en cuenta que deben aplicarse correctamente para que funcionen. En la siguiente
aplicación, se explicarán con detalle los métodos que nos ofrece Dreamweaver para dividir nuestra
página Web en marcos y hacer así que nuestro propio conjunto de marcos no falle.
Enlace vídeo:
5.2. Crear un conjunto de marcos anidado
Un conjunto de marcos que está dentro de otro recibe el nombre de conjunto de marcos anidado.
Cada nuevo conjunto de marcos creado incluye su propio documento HTML de conjunto de marcos y
sus documentos de marcos. La mayoría de páginas Web con marcos utilizan, en realidad, marcos
anidados; al igual que varios de los conjuntos de marcos predefinidos en Dreamweaver.
Enlace vídeo:
54
5.3. Modificar el tamaño de los marcos
Dreamweaver nos proporciona dos métodos para modificar las dimensiones de los marcos: uno, lo
vimos anteriormente y consiste en arrastrar los bordes con el ratón directamente por la ventana de
documento y dos, que será más preciso y consistirá en introducir los valores utilizando el panel
Propiedades.
Para establecer los tamaños de los marcos, haga clic en el borde de un marco para seleccionar el
conjunto de marcos que desea modificar. Recuerde que los bordes de marcos deben estar visibles en
la ventana de documento.
Si no se encuentra visible el panel de propiedades, vaya a Ventana del menú principal y pulse
Propiedades.
55
Para especificar como debe asignarse el espacio cuando se cambia el tamaño de la ventana del
navegador, introduzca un número en el campo de edición Valor y elija una unidad.
Enlace vídeo:
5.4. Modificar los bordes de un conjunto de marcos
De forma predeterminada, Dreamweaver ajusta sus conjuntos de marcos para que todos tengan
bordes de 6 píxeles de grosor y un color gris. En la siguiente explicación, veremos cómo podremos
alterar el color, cambiar el grosor, o eliminar los bordes de un conjunto de marcos.
Enlace vídeo:
5.5. Utilización del panel Marcos
El panel Marcos nos proporcionará una representación visual precisa de todos los marcos de un
documento. Dentro de él, podrá ver como en cada marco se muestra su nombre de forma individual.
Los conjuntos de marcos introducidos dentro de otro conjunto de marcos se representan mediante
un borde más intenso.
Enlace vídeo:
5.6. Abrir una página Web en un marco
Para utilizar vínculos en marcos, deberá establecer un destino para el vínculo. El destino será el
marco en el que se abrirá el contenido vinculado. No tendremos que crear todas las páginas en los
marcos partiendo de cero. Si tenemos seleccionado un marco y tenemos abierto el panel
Propiedades, simplemente escribiremos el vínculo en el cuadro de texto Origen o pulsaremos sobre
el icono de la carpeta para buscar un archivo.
56
5.7. Añadir barras de desplazamiento
Una de las cualidades que han dado mayor aceptación a los marcos es la posibilidad de introducir
barras de desplazamiento para cada marco. Estas barras de desplazamiento se usan cuando la
ventana de navegador es demasiado pequeña para mostrar toda la información contenida en un
marco del documento. Hay cuatro opciones seleccionables en la lista desplegable Desplazamiento
dentro del panel Propiedades:
 Predeterminado: Deja el uso de barras de desplazamiento en manos del explorador.

 Sí: Fuerza la aparición de barras de desplazamiento sin importar la cantidad de información
de un marco.
 No: Inhabilita las barras de desplazamiento.
 Automático: Activa las barras de desplazamiento si el contenido del marco se extiende
horizontal o verticalmente más allá de lo que la ventana del explorador puede mostrar.
5.8. Destinar la información de un vínculo
Uno de los principales usos de los marcos es el de controlar la navegación de una página Web. Un
marco puede actuar como centro de la navegación de nuestra página, ofreciendo vínculos a otras
páginas de nuestro sitio. Cuando el usuario selecciona uno de los vínculos, la página solicitada
aparece en otro marco de la página, el cual podrá manejarse independientemente del marco de
navegación.
Anteriormente, estuvimos viendo que había ciertos nombres de marcos que no se podían utilizar
porque se encontraban reservados. Son los cuatro nombres reservados para las partes de un
conjunto de marcos que se usan como destino: _blank, _parent, _self, y _top. Con ellos, puede hacer
que el contenido de un vínculo se superponga al marco actual o aparezca en una ventana de
explorador nueva.
 _blank: Abre el vínculo en una nueva ventana de explorador y mantiene la ventana actual
disponible.
 _parent: Abre el vínculo en el conjunto de marcos padre del marco actual.
 _self: Abre el vínculo en el marco actual, sustituyendo su contenido por completo. Es la
opción predeterminada por el programa.
 _top: Abre el vínculo en el conjunto de marcos más exterior de la página Web actual,
sustituyendo todos los marcos.
57
5.9. Guardar archivos de marcos y conjuntos de marcos
Como ya hemos visto a lo largo de este tema, cuando trabajamos con marcos, estamos trabajando
con múltiples archivos HTML a la vez. Por lo tanto, deberemos tener cuidado de guardar no sólo los
marcos individuales que componen la página Web, sino también el propio conjunto de marcos.
En la siguiente explicación, veremos los distintos comandos que nos proporciona Dreamweaver para
guardar un conjunto de marcos con sus marcos individuales de una forma rápida y sencilla.
Enlace vídeo:
5.10. Práctica simulada: Marcos anidados
Cree un conjunto de marcos en la ventana de documento, y establezca las propiedades que a

continuación se indican.
Enlace práctica simulada:
5.11. Práctica: Diseño Web parte IV
En esta nueva práctica, vamos a crear dos de los documentos principales para nuestra Web. En
primer lugar, vamos a crear la página “Intro.htm”; se trata de un documento sencillo donde
insertaremos una película de Macromedia Flash que configuraremos utilizando el panel Propiedades.
Posteriormente, utilizaremos uno de los conjuntos de marcos predefinidos por Dreamweaver para
crear el documento “Menu.htm”.
- Cree un nuevo documento en la carpeta raíz del sitio Spider-Man, con el nombre Intro.htm.
- Configure las propiedades del archivo “Intro.htm” asignándole el título ::: Spider-Movie: La
película :::.
- Como color de fondo, seleccione Negro y como valor para los márgenes izquierdo, superior,
derecho e inferior, 0.
- Inserte en el documento la película de Flash “spider-man.swf” que se adjunta con esta
práctica.
- Aplique sobre la película insertada en la ventana de documento, la justificación Alinear al
centro.
- Seleccione la película insertada y configure sus medidas introduciendo el valor 700 de ancho
por 510 de alto. Visualice la película.
- Guarde los cambios del documento “Intro.htm” y ciérrela.
- Cree un nuevo documento en la carpeta raíz del sitio Spider-Man, con el nombre Cast.htm.
- Inserte en el documento “Cast.htm” marco izquierdo y superior anidado.
- Guarde el conjunto de marcos principal con el nombre Menu.htm.
58
- Guarde el marco situado en el lateral izquierdo de la ventana de documento con el nombre

Nav-Menu.htm.
- Guarde el marco situado en la parte superior de la ventana de documento con el nombre
Top-Menu.htm.
- Visualice los bordes de marcos del documento “Menu.htm”.
- Seleccione el conjunto de marcos principal.
- Acceda al cuadro Propiedades de la página y teclee como título ::: Spider-Movie: La película
:::.
- Establezca como color de fondo del documento el color Negro.
- Guarde el conjunto de marcos del documento “Menu.htm”.
- Habilite el panel Marcos.
- Seleccione el marco “Nav-Menu.htm” pulsando con el ratón directamente sobre la
representación del marco que hay dentro del panel Marcos. Desde el panel Propiedades,
asígnele el nombre Navegación y seleccione No en su área Desplazamiento.
- Seleccione el marco “Top-Menu.htm” pulsando con el ratón directamente sobre la
representación del marco que hay dentro del panel Marcos. Desde el panel Propiedades,
asígnele el nombre Navegación2 y seleccione No en su área Desplazamiento.
- Seleccione el marco “Cast.htm” pulsando con el ratón directamente sobre la representación
del marco que hay dentro del panel Marcos. Desde el panel Propiedades, asígnele el nombre
Casting y seleccione Automático en su área Desplazamiento.
- Guarde los cambios realizados y cierre Dreamweaver.
Recuerda…
Las restricciones que presentan los nombres de marcos son:
- Hay que utilizar palabras sin espacios.
- El guión bajo está permitido por norma general exceptuando el uso de ciertos nombres reservados.
- No usar en ellos caracteres especiales como comillas, signos de interrogación, etc.
La opción _top la utilizaremos si queremos abrir un vínculo en el conjunto de marcos más exterior de
la página Web actual sustituyendo todos los marcos.
La opción Bordes de marco situado en la categoría Ayudas visuales del menú Ver deberemos activar
para poder visualizar los marcos de la ventana de documento de Dreamweaver.
Al conjunto de marcos anidado se denomina un conjunto de marcos que está dentro de otro.
El grosor de 6 pixeles tendrán los bordes de los marcos por defecto en Dreamweaver.
El panel Propiedades lo utilizaremos para modificar el tamaño de los marcos.
La categoría Diseño de la Barra de herramientas Insertar nos permitirá crear conjuntos de marcos
predefinidos.
La tecla ALT deberemos mantener pulsada para dividir nuestra página Web en marcos.
59
6. CREACIÓN DE TABLAS
La colocación de imágenes, texto y otros elementos en un documento contribuyen a la presentación

de nuestras páginas. Hasta ahora, no tenemos mucho control sobre los elementos que introducimos
en una página Web, ya que nos vemos restringidos por las limitaciones del HTML. A lo largo del
siguiente tema, veremos cómo las tablas nos ayudarán a la hora de estructurar una página Web. Una
tabla de HTML ordena el contenido de una página que, de otro modo, estaría suelto. Si, en un
principio, las tablas se utilizaban para mostrar la información en un formato más claro, hoy día,
gracias a las mejoras introducidas por Dreamweaver, podemos decir que las tablas se han convertido
en la herramienta más útil a la hora de controlar la información de nuestras páginas Web.
6.1. Creación de tablas en la ventana de documento
En la siguiente explicación, aprenderemos a utilizar las herramientas que nos presenta Dreamweaver
para crear una tabla que nos permita organizar, de manera rápida, los textos y gráficos dentro de la
ventana de documento.
Enlace vídeo:
6.2. Modificación de tablas
La mayoría de las modificaciones que podremos hacer en una tabla las realizaremos utilizando el
panel Propiedades de Dreamweaver. Gracias a este panel, controlaremos fácilmente el número de
filas y columnas de éstas, así como los parámetros básicos (anchura, borde y alineación).
Enlace vídeo:
6.3. Selección de elementos de una tabla
Del mismo modo que ocurre en Dreamweaver con las imágenes y el texto que tenemos en la ventana
de documento, el primer paso que tenemos que dar para aplicar cambios a una tabla o a cualquiera
de sus elementos es seleccionarla. En la siguiente explicación, veremos cómo, con un solo
movimiento de ratón, podemos seleccionar toda una tabla, una fila, una columna o un rango
contiguo de celdas dentro de la tabla.
Enlace vídeo:
60
6.4. Alineación del contenido de una celda
Además de los controles generales para modificar una tabla que hemos estado viendo a lo largo del
tema, Dreamweaver nos ofrece otras propiedades para trabajar con las celdas de una tabla de forma
individual. En la siguiente explicación, utilizaremos el panel Propiedades para ajustar la alineación
horizontal o vertical del contenido (texto o imágenes) de una celda.
Enlace vídeo:
6.5. Dividir y combinar celdas
Gracias al panel Propiedades, podremos combinar varias celdas adyacentes para obtener una sola
celda que se extienda por varias columnas o filas. También podremos dividir una celda en varias filas
o columnas, independientemente de que hayan sido combinadas con anterioridad.
Enlace vídeo:
6.6. Anidar tablas
Una tabla anidada es una tabla que colocamos dentro de otra. Podremos configurar una tabla
anidada fácilmente, del mismo modo que cualquier otra tabla; de todas formas, hemos de tener en
cuenta que su ancho vendrá limitado por el ancho de la celda en la que aparece.
Enlace vídeo:
6.7. Trabajar con formatos de tabla
Las tablas contienen información organizada y generalmente permiten consultar esa información de
forma rápida. Sin embargo, las tablas grandes con muchas filas tienden a complicarse y a hacer su
lectura compleja y tediosa. Una manera de evitar esto es alternar filas de distintos colores.
Formatear una tabla es un trabajo que puede llevar mucho tiempo. Por ello, Dreamweaver nos
proporciona el comando Formatear tabla para aplicar rápidamente un diseño predefinido a la tabla.
Enlace vídeo:
61
6.8. Ordenar tablas
Con el comando Ordenar tabla de Dreamweaver, podremos ordenar una tabla de una manera
sencilla de acuerdo con el contenido de una columna. Además, podremos realizar una operación más
compleja ordenándola de acuerdo al contenido de dos columnas. Es importante resaltar que no se
pueden ordenar tablas que contengan celdas combinadas.
Enlace vídeo:
6.9. Práctica simulada: Trabajar con una tabla
En esta práctica simulada, deberá insertar una tabla, insertar en ella una imagen y subdividir sus
celdas para insertar texto. Proceda según las indicaciones.
6.10. Práctica: Diseño Web parte V
En esta nueva práctica, vamos a terminar por completo el documento “Menu.htm” que creamos
durante la práctica anterior. Para empezar, configuraremos los marcos de navegación y
completaremos el diseño colocando imágenes como fondo de tablas. Para terminar, maquetaremos
por completo el documento “Cast.htm” que se encuentra abierto en la página principal del conjunto
de marcos configurado en “Menu.htm”.
Configuración y diseño:
- Abra el documento “Menu.htm” del sitio Spider-Man y active la visualización de los bordes
de los marcos.
- Coloque el cursor del ratón en el interior del marco “Nav-Menu.htm” para convertirlo en el
marco activo.
- Acceda al cuadro Propiedades de la página y añádale el título Navegación izquierda.
- Elija Negro, como color de fondo y añada la imagen de fondo “fondo-menu.jpg” que se
adjunta con la práctica; guárdela en la carpeta IMAGES.
- Configure los campos de edición, Margen izquierdo, Margen derecho, Margen superior y
Margen inferior, con el valor 0.
- Asegúrese de que el cursor del ratón sigue en el interior del marco “Nav-Menu.htm”.
- Inserte en él una tabla con 1 fila y 1 columna. El ancho de la tabla será 25 y el grosor del
borde 0.
- Desde el panel Propiedades, modifique las dimensiones de la tabla con las medidas 198 de
ancho por 510 de alto. En los campos Relleno celda y Espacio celda introduzca el valor 0.
- Ensanche el marco para poder visualizar la tabla por completo.
62
- Añada la imagen “spider-fondo_01.jpg” que se adjunta con la práctica como fondo de la

tabla. Guárdela en la carpeta IMAGES.
- Coloque el cursor del ratón en el interior del marco “Top-menu.htm” para convertirlo en el
marco activo.
- Acceda al cuadro Propiedades de la página y añádale el título Navegación Superior.
- Elija Negro, como color de fondo y añada la imagen de fondo “fondo-titulo.jpg” que se
adjunta con la práctica; guárdela en la carpeta IMAGES.
- Configure los campos de edición, Margen izquierdo, Margen derecho, Margen superior y
Margen inferior, con el valor 0.
- Asegúrese de que el cursor del ratón esté colocado en el interior del marco “Top-menu.htm”.
- Inserte en él una tabla con 1 fila y 1 columna. El ancho de la tabla será 25 y el grosor del
borde 0.
- Desde el panel Propiedades, modifique las dimensiones de la tabla con las medidas 502 de
ancho por 102 de alto. En los campos Relleno celda y Espacio celda introduzca el valor 0.
- Ensanche el marco para poder visualizar la tabla por completo.
- Añada la imagen “spider-fondo_02.jpg” que se adjunta con la práctica como fondo de la
tabla. Guárdela en la carpeta IMAGES.
- Coloque el cursor del ratón en el interior del marco “Cast.htm” para convertirlo en el marco
activo.
- Acceda al cuadro Propiedades de la página y añádale el título Casting & Crew.
- Elija Negro, como color de fondo.
- Defina los colores predeterminados para el texto normal (#FFFFFF), los vínculos (#0000FF),
los vínculos visitados (#FF0000) y los vínculos activos (#FFFF00).
- Configure los campos de edición, Margen izquierdo, Margen derecho y Margen superior con
el valor 0.
- Configure el campo, Margen inferior con el valor 10.
- Asegúrese de que “Cast.htm” es el marco activo y aplique sobre él una alineación al centro.
- Inserte una tabla en su interior formada por 1 fila y 1 columna, el ancho de la tabla será 50 y
el grosor del borde, 0.
- Modifique las dimensiones de la tabla con las medidas 450 x 375 píxeles. En los campos de
edición Relleno celda y Espacio celda, introduzca 0 para especificar que no desea relleno ni
espaciado.
- Divida la tabla en dos filas y, en la superior, inserte la imagen “cast&crew.jpg” que se adjunta
con esta práctica. Guárdela dentro de la carpeta IMAGES.
- A continuación, acerque el cursor del ratón a la línea que divide las dos celdas. Cuando el
cursor del ratón cambie a una doble flecha, arrástrela hacia arriba hasta que ésta se ajuste
con la dimensión de la imagen.
- Divida la celda inferior en 8 filas y alinéelas al centro, seleccionando Centro y Medio en los
campos Horizontal y Vertical, respectivamente.
- A partir de la tercera celda de la tabla inserte las imágenes, “casting.gif”, “director.gif”,
“producción.gif”, “música.gif”, “efectos.gif” y “compañía.gif” en las celdas creadas. Guarde
todas las imágenes en la carpeta IMAGES.
- Casting de la película
- Coloque el cursor de texto del ratón justo en el lado derecho de la tabla y pulse la tecla
INTRO dos veces para dejar un espacio de separación con la tabla anterior.
63
- Inserte una nueva tabla formada por 1 fila y 1 columna, con un ancho de 50 y un grosor del
borde de 0.
- Modifique sus dimensiones con las medidas 450 x 375 píxeles, y un relleno y espacio de celda
de 0.
- Divida la tabla en dos filas e inserte en la superior la imagen “casting-logo.jpg” que se adjunta
con esta práctica. Guárdela en la carpeta IMAGES.
- Acerque el cursor del ratón a la línea que divide las 2 celdas. Cuando el cursor del ratón
cambie a una doble flecha, arrástrela hacia arriba hasta que se ajuste con la dimensión de la
imagen.
- Divida la celda inferior en 11 nuevas filas.
- Colóquese en la fila 3 de la tabla y divídala en dos columnas. Repita el mismo proceso con las
filas 5, 7, 9 y 11.
- Coloque el cursor en la celda izquierda de la fila 3 e inserte en ella la imagen
“tobey_maguire.jpg” que se adjunta con la práctica. Guárdela en la carpeta IMAGES.
- Realice el mismo proceso en las siguientes filas:
• En la misma fila a la derecha, colocaremos la imagen “kirsten_dunst.jpg”.
• En la fila 5, celda izquierda, colocaremos la imagen “willem_dafoe.jpg”.
• En la fila 5, celda derecha, colocaremos la imagen “james_franco.jpg”.
• En la fila 7, celda izquierda, colocaremos la imagen “cliff_robertson.jpg”.
• En la fila 7, celda derecha, colocaremos la imagen “rosemary_harris.jpg”.
• En la fila 9, celda izquierda, colocaremos la imagen “j.k._simmons.jpg”.
• En la fila 9, celda derecha, colocaremos la imagen “bill_nunn.jpg”.
• En la fila 11, celda izquierda, colocaremos la imagen “joe_manganiello.jpg”.
• En la fila 11, celda derecha, colocaremos la imagen “bruce_campbell.jpg”.
Director de la película
- Coloque el cursor de texto del ratón justo en el lado derecho de la última tabla que creamos
y pulse la tecla INTRO dos veces para dejar un espacio de separación con la tabla anterior.
borde de 0.
de 0.
- Divida la tabla en dos filas e inserte en la superior la imagen “director-logo.jpg” que se
adjunta con esta práctica. Guárdela en la carpeta IMAGES.
- Acerque el cursor del ratón a la línea que divide las dos celdas. Cuando el cursor del ratón
imagen.
- Centra la alineación de la tercera fila de la tabla y posteriormente, inserte en ella la imagen
“sam_raimi.jpg” que se adjunta con la práctica. Guárdela en la carpeta IMAGES.
- Sitúese en la celda cinco de la tabla e inserte en ella el texto “sam_raimi.txt” que se adjunta
con esta práctica.
- Aplíquele el formato Arial, el tamaño pequeña y alineación Justificar.
- Productores de la película
64
borde de 0.
de 0.
- Divida la tabla en dos filas e inserte en la superior la imagen “producción-logo.jpg” que se
imagen.
- Divida las celdas impares de la tabla en dos columnas de igual tamaño.
- Coloque el cursor en la celda izquierda de la fila 3 e inserte en ella la imagen
“laura_ziskin.jpg” que se adjunta con la práctica. Guárdela en la carpeta IMAGES.
- Coloque el cursor del ratón en la celda de la derecha de la misma fila y en el panel
Propiedades, pulse el botón de alineación de texto Justificar.
- A continuación, introduzca algunas de las películas en las que ha intervenido como
productora Laura Ziskin (use el mismo formato y tamaño de texto utilizado anteriormente y
emplee el comando Lista sin ordenar):
• Mejor imposible (1997)
• Todo por un sueño (1995)
• Pretty Woman (1990)
- Realice el mismo proceso en las siguientes filas:
- En la fila 5, celda izquierda, colocaremos la imagen “ian_bryce.jpg”.
- En la fila 5, celda derecha, colocaremos el texto:
• Casi famosos (1997)
• Salvar al soldado Ryan (1995)
• Hard Rain (1998)
• Twister (1996)
• Speed (1994)
- En la fila 7, celda izquierda, colocaremos la imagen “avi_ara.jpg”.
- En la fila 7, celda derecha, colocaremos el texto:
• X-Men (2000)
• Blade (1998)
- Guarde los cambios y presione F12.
Banda sonora de la película

borde de 0.
de 0.
- Divida la tabla en dos filas e inserte en la superior la imagen “música-logo.jpg” que se adjunta
con esta práctica. Guárdela en la carpeta IMAGES.
65
imagen.
- Alinee la tercera fila al centro y al medio para insertar la imagen “danny_elfman.jpg” que se
adjunta con la práctica.
- En la quinta celda, inserte el texto que se facilita en el archivo “danny_elfman1.txt”.
- Aplíquele como formato Arial, como tamaño pequeña y como alineación Justificar.
- En la séptima celda, inserte el texto que se facilita en el archivo “danny_elfman2.txt”.
- Aplíquele como formato Arial, como tamaño pequeña y como alineación A la izquierda.
- Cambie el color del texto PELÍCULAS a azul y los nombres de los directores, situados entre
corchetes, a rojo.
Efectos especiales
borde de 0.
de 0.
- Divida la tabla en dos filas e inserte en la superior la imagen “efectos-logo.jpg” que se
imagen.
- Colóquese en la tercera fila y alinéela al centro para insertar la imagen “imageworks.jpg” que
se adjunta con la práctica. Guárdela en la carpeta IMAGES.
- En la quinta fila, inserte el texto “imageworks.txt” que se adjunta con esta práctica. Aplíquele
Arial como formato, pequeña como tamaño y Justificar como alineación.
- Realización
borde de 0.
de 0.
- Divida la tabla en dos filas e inserte en la superior la imagen “compañía-logo.jpg” que se
imagen.
- Colóquese en la tercera fila y alinéela al centro para insertar la imagen “columbia.jpg” que se
adjunta con la práctica. Guárdela en la carpeta IMAGES.
66
- En la quinta fila, inserte el texto “columbia.txt” que se adjunta con esta práctica. Aplíquele
Arial como formato, pequeña como tamaño y Justificar como alineación.
- Guarde los cambios y presione F12.
Recuerda:
Con la categoría Común de la Barra de herramientas Insertar nos permitirá crear una tabla.
Cuando pulsamos la tecla TAB en la última celda de una tabla se añadirá una nueva fila.
Con la tecla TAB mantenida pulsada se pasará a la celda siguiente de una tabla.
Para colocar una imagen como fondo de una tabla utilizaremos el cuadro de diálogo Propiedades de
la página.
Para aplicar un diseño predefinido a una tabla de forma rápida utilizaremos la opción Formatear
tabla del menú de comandos.
No se puede combinar celdas que no se encuentren contiguas, sólo se puede hacer de forma
adyacentes.
Cuando eliminamos una columna de una tabla el tamaño de ésta no se ve afectado, el resto de
columnas se dimensionan para adaptarse al tamaño de la misma.
67
7. TRABAJAR CON CAPAS
A lo largo del siguiente capítulo, veremos que el uso de capas en nuestros documentos
proporcionará un mayor control y flexibilidad para hacer las páginas más dinámicas. Podremos apilar
las capas unas encima de otras, ocultar unas y mostrar otras, o moverlas por la pantalla con una línea
de tiempo. Quizás el único inconveniente del uso de las capas esté en que no se ven en todos los
navegadores, y en los que sí se muestran, no siempre lo hacen correctamente.
7.1. Creación de capas
Gracias a Dreamweaver, podremos crear capas de una forma creativa y precisa, ya sea dibujándola
directamente en la página o insertándola por medio del menú. Al insertar una capa en la ventana de
documento, Dreamweaver coloca por defecto la etiqueta <div> en código HTML. Sin embargo, se
pueden establecer hasta cuatro etiquetas distintas: <div>, <span>, <layer> e <ilayer>. Las dos
primeras son las más comunes, aunque es recomendable usar la etiqueta <div> cuando la
compatibilidad entre navegadores resulte un factor importante. Observe, en el ejemplo, la apariencia
del código HTML al crear una capa en Dreamweaver:
<div id=”Layer1” style=”position: absolute; width: 200px; height:260px; z-index:1”> </div>
Con Dreamweaver, podrá mover una capa, colocándola y dimensionándola de la forma que prefiera,
ya sea con el ratón o introduciendo valores numéricos en el panel Propiedades. Combinando ambos
métodos, podremos esbozar rápidamente el diseño de la capa y alinear después los bordes con
exactitud.
Enlace vídeo:
7.2. Configurar las características por defecto de una capa
En la siguiente explicación, veremos cómo utilizar el cuadro de diálogo Preferencias de

Dreamweaver, para modificar el tamaño por defecto, así como otras características de la capa
creada.
1. En el menú Edición, escoja la opción Preferencias. Se abre el cuadro de

diálogo con el mismo nombre.
2. En la lista Categoría, seleccione la opción Elementos PA.
68
3. Determine el estado inicial de visibilidad de la capa utilizando la lista

desplegable del área Visibilidad.
NOTA: Si no selecciona en esta lista la opción visible, no podrá ver ninguna

capa en su documento de Dreamweaver.
4. Introduzca unos nuevos valores de anchura y altura en los campos de edición

Ancho y Alto del cuadro de diálogo. Recuerde que las dimensiones se
representan en píxeles.
5. En el área Color de fondo, haga clic en la flecha situada junto a la muestra de
color y seleccione un color de la paleta o escriba un número hexadecimal en el
cuadro de edición.
6. Para configurar una imagen de fondo, haga clic en el botón Examinar del
apartado Imagen de fondo. Aparece el cuadro de diálogo Seleccionar origen
de imagen.
7. Utilice el cuadro de diálogo para localizar la imagen que desee y pulse el
botón Aceptar. Como alternativa a esto, podremos introducir directamente la
ruta utilizando su campo de edición.
8. Para finalizar, pulse el botón Aceptar. Los cambios se guardan y se actualizan
en el documento HTML abierto.
Enlace vídeo:
69
7.3. Panel Capas
El panel Capas de Dreamweaver nos proporciona un medio para manejar las capas del documento.
Éstas se muestran en el panel en forma de lista apilada de nombres donde la primera capa que se
creó estará situada al final en el orden de apilado, mientras que la última que se creó aparecerá en la
primera posición en el orden de apilado. Las capas anidadas se muestran en el panel como nombres
relacionados con las capas padres.
Enlace vídeo:
7.4. Modificación de capas
Dreamweaver nos permitirá cambiar con precisión las capas, una vez que las hemos creado.
Utilizando el panel Propiedades, podremos especificar el nombre y la ubicación de una capa, así
como establecer otras opciones de las mismas que a continuación pasamos a explicar.
Modificar una capa usando el panel Propiedades:
1. En la ventana de documento, seleccione la capa que desee modificar.

2. Si el panel Propiedades no se encontrara abierto, diríjase al menú Ventana y
escoja la opción Propiedades
3. Haga clic con el ratón sobre la flecha de ampliación situada en la esquina
inferior derecha del panel Propiedades. De este modo, veremos más
propiedades de la capa seleccionada.
4. En el cuadro de Elemento CSS-P, escriba un nombre que identifique la capa

dentro del panel y en la secuencia de comandos.
70
5. Utilice los campos Izq. y Sup. (Izquierda y Superior) para especificar la posición
de una capa respecto al ángulo superior izquierdo del documento o de la capa
padre, si ésta estuviera anidada.
6. Utilice los campos An. y Al. (Anchura y Altura) para especificar la anchura y
altura de una capa.
7. Para añadir una imagen de fondo a la capa, en el campo Im. fondo, escriba la
ruta y el nombre del archivo de imagen, o haga clic en el icono de carpeta
situado a la derecha de dicho campo para localizar y seleccionar un archivo.
8. Utilice la lista desplegable Vis. (Visibilidad) para determinar el estado inicial de
visualización de la capa.
9. Para cambiar el color de fondo de la capa, pulse directamente en la muestra
de color del área Col. Fondo y, en la paleta que aparece, escoja el color que
desee. Recuerde que puede utilizar el campo de edición situado junto a esta
muestra para introducir el valor hexadecimal del color.
10. Para finalizar, utilice el cuadro de lista Desb. (Desbordamiento) para
determinar lo que ocurre si el contenido de la capa excede el tamaño de ésta.
Enlace vídeo:
7.5. Ajustar la alineación de las capas
La capacidad de poder colocar las capas libremente en cualquier lugar de un documento, conlleva
exigencias adicionales y posibles problemas. Dreamweaver incluye dos herramientas para simplificar
el diseño de capas en la ventana de documento: las reglas y la cuadrícula.
Se puede decir que estas dos herramientas son comunes en la mayoría de programas de diseño
gráfico. Las reglas de Dreamweaver se sitúan a lo largo de los bordes exteriores (superior e izquierdo)
de la ventana de documento y pueden mostrar los ejes X e Y en píxeles, pulgadas o centímetros. La
cuadrícula entrecruza la página con líneas que nos servirán de guías cuando vayamos a colocar
objetos.
Enlace vídeo:
71
7.6. Creación de una capa de carga
A medida que aumenta la complejidad de las creaciones Web, la mayoría de diseñadores desea que
las capas se desplacen por la pantalla o aparezcan rápidamente. Una capa puede actuar solamente
cuando se ha finalizado la descarga de su contenido (texto e imágenes). En la siguiente explicación,
aprenderemos a crear una capa de carga que será la que visualicemos mientras que el resto de
contenido es transferido y está listo para funciona.
Enlace vídeo:
7.7. Trabajar con líneas de tiempo en Dreamweaver
Hasta hace poco, los diseñadores de páginas Web habían tenido un escaso control sobre la cuarta
dimensión y sus propias páginas. Sólo los archivos GIF animados, Java o de programas de animación,
como Macromedia Flash, eran capaces de crear la ilusión de procesos en movimiento.
Desgraciadamente, todos ellos poseen alguna limitación. Gracias a las animaciones creadas con
HTML dinámico y con las líneas de tiempo de Dreamweaver, no se produce un aumento significativo
del tamaño de las páginas Web y además son completamente interactivas.
Las líneas de tiempo de Dreamweaver forman parte del código HTML. Para el movimiento de una
capa a través de una página Web, Dreamweaver genera alrededor de 70 líneas de código dedicado a
iniciar y a poner ésta en funcionamiento. Las líneas de tiempo crean la animación al cambiar la
posición, el tamaño, la visibilidad y el orden de apilamiento de una capa a lo largo de un tiempo. Las
líneas de tiempo también sirven para realizar otras acciones después de que termine de cargarse la
página.
7.8. Panel Líneas de tiempo
Dreamweaver pone a nuestra disposición el panel Líneas de tiempo, el cual es una excelente
herramienta para representar las propiedades de las capas e imágenes a lo largo del tiempo. Este
panel presenta controles de estilo VCR combinados con un cabezal de reproducción que es una
representación visual del cuadro actual.
72
 Cabezal de reproducción: Muestra el fotograma de la línea de tiempo que se está

visualizando en la página.
 Cuadro de lista Línea de tiempo: Específica qué líneas de tiempo del documento se están
mostrando en el panel Líneas de tiempo.
 Canales de animación: Muestran barras para animar capas e imágenes.
 Barras de animación: Muestran la duración de la animación de cada objeto. Una sola de
estas filas puede incluir múltiples barras de representación de otros tantos objetos, pero
nunca barras diferentes podrán controlar un mismo objeto en el mismo fotograma.
 Cuadros clave: Son fotogramas de una barra de animación en los que se han especificado
propiedades del objeto. Estos cuadros se representan mediante pequeños círculos blancos.
 Canal Behaviors: Es el canal de los comportamientos que deben ejecutarse en un fotograma
determinado de la línea de tiempo.
 Número de fotogramas: Indica la numeración secuencial de los fotogramas de la línea de
tiempo. La duración de la animación se controla estableciendo el número total de
fotogramas por segundo (fps).
7.9. Añadir capas al panel Líneas de tiempo
Como en la mayoría de funciones de Dreamweaver, podremos añadir una capa o una imagen al
panel Líneas de tiempo utilizando varios caminos diferentes que veremos en la siguiente aplicación.
Por defecto, la línea de tiempo de Dreamweaver tiene fijada una relación de 15 fotogramas por
segundo. Cuando añadimos un objeto a una línea de tiempo, Dreamweaver introduce una barra de
animación de 15 cuadros de longitud etiquetada con el nombre del objeto.
Enlace vídeo:
7.10. Modificar la línea de tiempo
Al añadir un objeto a una línea de tiempo, ya sea una capa o una imagen, nos daremos cuenta de
inmediato que la barra de animación que aparece presenta unos círculos de color blanco en los
extremos. Estos círculos marcan los cuadros clave. Cuando se introduce una capa, los dos cuadros
claves generados tienen las mismas propiedades; tanto la posición como el tamaño o la visibilidad
permanecen inalterados. Para que la animación se produzca, es necesario modificar alguna de las
propiedades de la capa en uno de los cuadros clave.
Enlace vídeo:
73
7.11. Controles de la línea de tiempo
Como hemos visto en la aplicación anterior, no hemos tenido que emplear el navegador para poder
ver una representación previa de una animación, sino que hemos utilizado el Cabezal de
reproducción. Además, podremos utilizar los controles del panel Líneas de tiempo que nos
permitirán mejorar nuestras animaciones antes de verlas a través del navegador.
 Rebobinar: Mueve el cabezal de reproducción hasta el primer cuadro de la línea de tiempo

actual.
 Atrás: Desplaza el cabezal de reproducción hasta el cuadro anterior. Manténgalo presionado
para reproducir la línea de tiempo continuamente.
 Reproducir: Mueve la línea de tiempo hacia adelante cuadro a cuadro. Manténgalo
presionado para reproducir la línea de tiempo continuamente.
 Reproducción automática: Activando este cuadro, cuando la página actual se carga en un
navegador, se adjunta un comportamiento en la etiqueta <body> que ejecuta la acción
Reproducir línea de tiempo cuando se carga la página.
 Bucle: Active este cuadro si desea que la animación se repita indefinidamente, una vez que
ésta haya alcanzado el cuadro final.
7.12. Añadir cuadros clave
Animar una capa puede ir más allá de mover una capa de un punto A a un punto B. Tanto las capas,
como su contenido, pueden hundirse, girar y, en general, moverse de cualquier manera; todo ello
gracias a los cuadros clave que podemos modificar a nuestra voluntad.
Cada línea de tiempo presenta dos cuadros clave, el inicial y el final; es necesario añadir otros
cuadros clave antes de introducir los cambios deseados. En la siguiente explicación, veremos las dos
maneras que proporciona Dreamweaver para añadir un cuadro clave.
Enlace vídeo:
7.13. Práctica simulada: Configuración de una capa
En esta práctica simulada, deberá configurar las características de las capas, de forma que inserte
una con la imagen “Frodo.jpg”.
74
Recuerda…
Si observamos el panel capas, nos aparece un pequeño icono en forma de ojo cerrado que nos indica
que una capa está oculta.
La opción Bucle del panel Líneas de tiempo deberemos activarla si queremos que una animación se
repita indefinidamente una vez que ésta haya alcanzado el cuadro final.
La tecla CTRL deberemos mantenerla pulsada para añadir un cuadro clave en el panel Líneas de
tiempo.
La categoría Diseño de la Barra de herramientas Insertar nos permitirá crear una capa.
Si al colocar una capa, no queremos que aparezca una marca en la ventana de documento debemos
desactivar la opción Elementos invisibles de la categoría Ayudas visuales en el menú Ver.
Una vez creada una capa es posible cambiarle la etiqueta en Dreamweaver utilizando el panel
Propiedades.
La tecla F2 deberemos utilizar para abrir el panel Capas.
75
8. VÍNCULOS WEB
Después de configurar un sitio local en nuestro disco duro y de crear los documentos del sitio,
necesitaremos establecer conexiones entre los distintos documentos HTML o tipos de archivos. De
ello se encargan los vínculos, que nos aportan gran movilidad independientemente de encontrarse o
no en el mismo servidor. Dreamweaver nos permitirá crear vínculos entre documentos HTML,
imágenes, archivos multimedia o software transferible. A lo largo de este capítulo, aprenderemos a
añadir vínculos a imágenes y a texto que tengamos en un documento, veremos cómo ajustar anclajes
para conseguir una navegación más sencilla, y para finalizar, aprenderemos a crear de forma rápida
menús de salto y Barras de navegación.
8.1. Crear vínculos
Es algo muy común asignar vínculos a palabras o frases de su página, a imágenes como botones de
navegación o a una porción determinada de un mapa de imagen. La etiqueta HTML que establece un
vínculo de hipertexto se denomina etiqueta de punto de fijación o etiqueta <a>. Dreamweaver crea
una etiqueta de punto de fijación para los objetos, texto o imágenes desde los que se generan
vínculos. Puede crear vínculos con otros documentos y archivos, así como vínculos con lugares
específicos de un documento utilizando la etiqueta <a href>.
Por ejemplo, si en la ventana de documento selecciona la frase Volver a la página Principal y, a

continuación, crea un vínculo con un archivo llamado “index.htm”, el código HTML del vínculo será el
siguiente:
<a href=”index.htm”>Volver a la página Principal</a>
Cuando se vincula un enlace a una imagen, como por ejemplo “logo.gif”, el código será:
<a href=”home.htm”><img scr=”imágenes/logo.gif”></a>
8.2. Crear vínculos desde el panel Propiedades
En la siguiente explicación, aprenderemos a utilizar el panel Propiedades de Dreamweaver para

originar vínculos desde una imagen, objeto o texto, hasta otro documento o archivo.
Enlace vídeo:
76
8.3. Navegar usando anclajes
Siempre que utilice un vínculo a una página Web, ya sea usando direcciones relativas o absolutas, los
navegadores mostrarán la página en cuestión empezando por la parte superior de la misma; el
visitante deberá deslizarse hacia la parte inferior para obtener la información que desee. Gracias a la
técnica de anclajes de Dreamweaver, podremos desplazarnos de un modo automático a un punto
concreto dentro de un documento.
El uso de anclajes es un proceso compuesto por dos pasos. En primer lugar, deberá situar en la
página el anclaje en sí, el cual se incluirá en el código HTML de la página como una etiqueta de
vínculo con el atributo <name>. El segundo paso consistirá en insertar un vínculo enlazado a dicho
anclaje.
Enlace vídeo:
8.4. Selección del destino de los vínculos
Hasta este momento, todo lo que hemos visto se limita a abrir distintos documentos o secciones en
la ventana del navegador; pero con Dreamweaver, también podremos abrir una nueva ventana y
cargar en ella una página vinculada.
Los vínculos con destino se usan con frecuencia en páginas que contengan marcos, permitiéndonos,
de ese modo, insertar un vínculo en un marco que abra un documento en otro destino. Esta parte la
veremos cuando tratemos la creación de marcos con Dreamweaver, ahora nos centraremos en
aprender a abrir un vínculo en una página completamente nueva.
Enlace vídeo:
8.5. Crear un vínculo de correo electrónico
Un vínculo de correo electrónico abre una ventana de mensaje en blanco utilizando el programa de
correo asociado al navegador del usuario. Cuando la ventana de mensaje de correo electrónico
aparece, el campo Para se rellena automáticamente con la dirección especificada en el vínculo.
Enlace vídeo:
77
8.6. Creación de mapas de imagen
Un mapa de imagen es una imagen dividida en distintas regiones o zonas interactivas. Hasta ahora,
hemos visto que al añadir un vínculo a una imagen, ésta se convierte en un vínculo. Con un mapa de
imagen, podremos diseñar múltiples zonas interactivas en una imagen utilizando el panel
Propiedades y vincular cada una de ellas a una página diferente.
Enlace vídeo:
8.7. Creación de menús de salto
Un menú de salto es un menú de lista emergente que muestra opciones con vínculos a documentos o
archivos. Podremos crear vínculos con documentos del sitio Web, documentos de otros sitios, correo
electrónico, gráficos o cualquier tipo de archivo que se pueda abrir en un navegador.
Enlace vídeo:
8.8. Creación de Barras de navegación
Una Barra de navegación se compone de un conjunto de imágenes cuya visualización cambia según
las acciones que realice el usuario. Las Barras de navegación nos permitirán desplazarnos fácilmente
por las páginas y archivos de un sitio.
Antes de usar el comando Imágenes: Barra de navegación, deberemos crear el conjunto de imágenes
para los distintos estados que se mostrarán con cada elemento de navegación que configuremos. Un
elemento de Barra de navegación puede presentar cuatro estados:
 Imagen arriba: Es la imagen que aparece en el documento cuando se carga la página en el

navegador del internauta.
 Sobre imagen: Es la imagen que aparece cuando situamos el puntero del ratón sobre la
imagen. Como norma general, se suele cambiar la apariencia del elemento, ya sea
modificando su forma o añadiendo algún tipo de efecto para resaltar la imagen.
 Imagen abajo: Es la imagen que aparece después de hacer clic en el elemento. En este caso,
el elemento seleccionado se muestra oscurecido indicando que ha sido elegido.
 Sobre mientras imagen abajo: Es la imagen que aparece cuando el puntero del ratón pasa
sobre la Imagen abajo después de haber hecho clic en el elemento. Utilice este estado para
indicar, visualmente a los usuarios, que no pueden volver a hacer clic en el elemento
mientras se encuentre en esta parte del sitio
Nota: No es necesario incluir imágenes en la Barra de navegación para los cuatro estados. Es posible
que para la navegación que quiera crear le baste con los dos primeros estados descritos.
Enlace vídeo:
78
8.9. Práctica simulada: Creación de vínculos
Vincule la imagen que aparece en la ventana de documento e inserte, bajo ella, un vínculo de correo
electrónico.
8.10. Práctica: Diseño Web parte VI
En esta sexta práctica, vamos a tratar dos de los aspectos fundamentales en toda página Web: los
vínculos y las capas. Vamos a aprender a establecer distintos tipos de conexiones entre documentos
HTML. Empezaremos creando vínculos de texto utilizando el panel Propiedades, crearemos vínculos
de correo electrónico y un mapa de imagen elaborando dos zonas interactivas en la imagen principal
del documento “Index.html”. A continuación, utilizaremos los vínculos de anclaje para crear la
navegación interna del documento “Cast.htm” y terminaremos creando una capa que almacene la
Barra de navegación principal de la página “Menu.htm”.
 Abra Macromedia Dreamweaver y muestre el panel Archivos.

 Visualice el sitio Spider-Man y abra el archivo “Index.html”.
 Cree una nueva carpeta denominada DOWNLOADS dentro del sitio Spider-Man.
 Seleccione el texto “Flash Web Player” del archivo “Index.html” que se muestra bajo la
imagen y vincúlelo al archivo “InstallAXFlash5.exe” que se adjunta con la práctica.
 Guárdelo en la carpeta DOWNLOADS.
 Seleccione el texto “Flash Web Player” que se muestra como vínculo y quítele el subrayado
que muestra por defecto. Para ello, deberá proceder desde el Inspector de código y asignar
el atributo style=“text-decoration:none”.
 Seleccione la imagen “spider-index01.jpg” y, desde el panel Propiedades, escriba SpiderMap
en el campo de edición Mapa.
 Use la Herramienta Zona interactiva rectangular para crear un área activa sobre el texto
INTRO y otra sobre el texto MENÚ.
 Coloque el puntero del ratón después del vínculo del texto “Flash Web Player” y, presione la
tecla INTRO.
 Inserte la imagen “mail.gif” que se adjunta con la práctica y guárdela en la carpeta IMAGES.
 Desde el panel Propiedades, asígnele un vínculo a la dirección de correo electrónica que
desee.
 Guarde los cambios y cierre el documento.
 Abra el archivo “Cast.htm” y seleccione la imagen de la primera tabla.
 Pulse la tecla Flecha izquierda para pasar el cursor de edición del ratón al lado
correspondiente de la imagen, e inserte en ese lugar un anclaje con el nombre opciones.
 Colóquese junto a la imagen “casting-logo.jpg” de la segunda tabla e inserte junto a ella un
anclaje con el nombre casting.
 Colóquese junto a la imagen “director-logo.jpg” de la tercera tabla e inserte junto a ella un
anclaje con el nombre director.
79
 Colóquese junto a la imagen “producción-logo.jpg” de la cuarta tabla e inserte junto a ella un

anclaje con el nombre produccion.
 Colóquese junto a la imagen “música-logo.jpg” de la quinta tabla e inserte junto a ella un
anclaje con el nombre musica.
 Colóquese junto a la imagen “efectos-logo.jpg” de la sexta tabla e inserte junto a ella un
anclaje con el nombre efectos.
 Colóquese junto a la imagen “compañía-logo.jpg” de la séptima tabla e inserte junto a ella un
anclaje con el nombre compañia.
 Seleccione la imagen “casting.gif” de la primera tabla y vincúlela al punto de anclaje casting
creado anteriormente.
 Coloque el cursor de edición del ratón en la segunda celda de la tabla Casting, alinéela al
centro y teclee en ella el texto [volver]. Vincule este texto con el punto de anclaje opciones.
 Realice el resto de vínculos del documento. Enlace cada imagen de la tabla principal con el
anclaje que le corresponde e inserte el enlace [volver] en cada uno de ellos.
 Guarde los cambios y cierre el documento.
 Abra el documento “Menu.htm”.
 Cree una capa en la parte inferior del marco “Nav-menu.htm” de forma rectangular.
 Dentro del panel Propiedades, localice el campo ID de capa y teclee en su interior Menu.
 Las dimensiones de la capa serán Iz: 58 píxeles; Sup: 302 píxeles; An: 100 píxeles y Al: 200
píxeles.
 En la vista Diseño de la ventana de documento, sitúe el cursor del ratón en el interior de la
capa creada a lo largo del paso anterior.
 Inserte una Barra de navegación con los siguientes nombres de elementos e imágenes.
(Todas las imágenes se adjuntarán con la práctica y deberá guardarlas en la carpeta IMAGES).
- Nombre de elemento
- Imagen arriba
- Sobre imagen
- Imagen abajo
- Sobre mientras imagen abajo
- SamRaimi
- Spider-Raimi01.gif
- Actores
- Spider-Actores01.gif
- Trailers
- Spider-Trailers01.gif
80
- Downloads
- Spider-Downloads01.gif
- Info
- Spider-Info01.gif
- Spider-Info02.gif
- Spider-Info03.gif
- Spider-Info03.gif
- Intro
- Spider-Intro01.gif
 Permita la carga previa de imágenes, active la casilla Utilizar tablas y seleccione la opción
Verticalmente.
 Modifique las medidas de la tabla de la Barra de navegación para que se muestre con un
ancho de 100 píxeles y un alto de 200 píxeles.
 Guarde todos los cambios.
Recuerda…
Para eliminar una región interactiva colocada en un mapa de imágenes deberemos pulsar la tecla
SUPR.
El símbolo almohadilla (#) deberemos utilizarlo para crear un vínculo con un anclaje.
Un menú de salto es un menú de lista emergente que muestra opciones con vínculos a documentos o
archivos.
Con Vínculos absolutos y vínculos relativos son los tipos de vínculos que podremos trabajar en
Dreamweaver.
Con la categoría Común de la Barra de herramientas Insertar nos permitirá crear un anclaje o punto
de fijación con nombre.
Con la categoría Común de la Barra de herramientas Insertar nos permitirá crear un vínculo de
correo electrónico.
Los anclajes son los vínculos que nos permitirán desplazarnos de un modo automático a un punto
concreto dentro de un documento.
Un mapa de imágenes es una imagen dividida en distintas regiones o zonas interactivas.
81
9. FORMULARIOS INTERACTIVOS
Los formularios son de las herramientas más útiles de una página Web ya que nos permiten
interactuar con los visitantes del sitio o recopilar información de ellos. A lo largo de este capítulo,
veremos la potente maquinaria que presenta Dreamweaver para estructurar y crear formularios
HTML. Cada objeto de formulario será estudiado detalladamente: campos de texto, botones de
opciones, casillas de verificación, campos ocultos, etc.
9.1. Objetos de formulario
En Dreamweaver, los tipos de entrada de los formularios se denominan objetos de formulario.

Podremos insertar objetos de formulario utilizando la categoría Formularios de la Barra de
herramientas Insertar.
• Formulario: Inserta un formulario en el documento. Dreamweaver inserta etiquetas <form> de

apertura y cierre de formulario en el código HTML.
• Campo de texto: Inserta un campo de texto en un formulario. Éstos admiten todo tipo de texto,
tanto alfabético como numérico.
• Campo oculto: Inserta un campo que permite almacenar datos introducidos por el usuario
como un nombre, una dirección de correo electrónico o una preferencia de compra para
utilizarlos la próxima vez que el usuario visite el sitio.
• Área de texto: Al igual que el Campo de texto, inserta un cuadro de edición en el formulario,
con la diferencia de que se incluyen flechas que actúan como barra de desplazamiento vertical.
Esta opción es más adecuada si su intención es introducir largas cadenas de texto.
82
• Casilla de verificación: Inserta una casilla de verificación en un formulario. Estas casillas

admiten múltiples respuestas en un solo grupo de opciones y permiten que los usuarios
seleccionen tantas opciones como sean necesarias.
• Botón de opción: Inserta un botón de opción en un formulario. Los botones de opción

representan opciones exclusivas de selección. Cuando se activa un botón en un grupo, se anula
la selección de los demás botones del grupo.
• Grupo de opción: Inserta varios botones de opción en un formulario.
• Lista/menú: Permite crear opciones para el usuario en una lista de desplazamiento.
• Menú de salto: Inserta una lista de navegación en la que cada opción estará vinculada a un
documento o archivo.
• Campo de imagen: Permite insertar una imagen en un formulario.
• Campo de archivo: Inserta un cuadro de texto vacío y un botón Examinar que permitirá al
usuario explorar los archivos de su disco duro y cargarlos como datos de formulario.
• Botón: Inserta un botón de texto en un formulario. Los botones actúan cuando se hace clic
sobre ellos.
83
9.2. Insertar un formulario en Dreamweaver
Un formulario contiene propiedades invisibles para el usuario. Estas propiedades especifican cómo se
procesará la información que introduzcamos en él. Un formulario presenta tres partes básicas:
1. Etiquetas <form>, que incluyen el URL de la secuencia de comandos CGI que procesará el
formulario y el método que se utilizará para enviar los datos a un servidor.
2. Los campos de formulario, campos de texto, menús, casillas de verificación o botones de
opción.
3. El botón Enviar, que manda los datos a la secuencia de comandos CGI del servidor.
Para añadir un formulario a un documento:
a. Sitúe el cursor del ratón donde quiera que comience el formulario.
b. Si la Barra de herramientas Insertar no se encontrara abierta, diríjase al menú Ver y escoja la

opción Barras de herramientas/Insertar.
c. Haga clic en la flecha que apunta hacia abajo situada en la esquina superior derecha del
panel y seleccione Formularios en el menú desplegable que aparece.
d. A continuación, pulse el botón Formulario. Aparece un contorno de línea de puntos de color

rojo en la ventana de documento.
Si el contorno no se encuentra visible, diríjase al menú Ver y seleccione el comando Ayudas visuales.
En el submenú que aparece, asegúrese que la opción Elementos invisibles esté activada.
e. Si tenemos el panel Propiedades abierto, éste se transforma en uno específico para

formularios.
f. En el campo de edición el Nombre del formulario, escriba un nombre exclusivo para el

formulario.
g. En el campo Acción, puede introducir directamente la URL en la que reside la secuencia de

comandos o una dirección de correo electrónico para enviar los datos.
h. En el área Método, la opción predeterminada es POST. También podremos escoger entre

una de las opciones de la lista desplegable:
 POST: Envía los valores del formulario en el cuerpo de un mensaje.
 GET: Adjunta los valores del formulario a la URL y envía la información al servidor.
 Predet.: Envía los datos del formulario con la opción predeterminada del navegador del
usuario.
84
9.3. Creación de campos de texto
Un campo de texto es un objeto de formulario que podremos crear con Dreamweaver para que los
visitantes de nuestra página escriban una respuesta. Existen tres tipos de campos de texto:
 Campos de texto de una línea: Se utilizan para proporcionar respuestas compuestas por una
sola palabra o una frase corta como, por ejemplo, un nombre o una dirección.
 Campos de contraseña: Son campos de texto en los que, cuando el usuario escribe, aparecen
asteriscos quedando oculto el texto.
 Campos de texto de varias líneas: Ofrecen mayor espacio al visitante para escribir la
respuesta. Podremos delimitar fácilmente el número de caracteres o el número de líneas que
puede introducir el visitante.
Enlace vídeo:
9.4. Creación de campos de texto ocultos
Los campos ocultos son elementos invisibles que se colocan en un documento para recopilar o enviar
información. La información de estos campos se transfiere al servidor cuando se envía el formulario.
Utilizaremos un nombre y un valor que definiremos al configurar el campo oculto.
Enlace vídeo:
9.5. Insertar casillas de verificación
Las casillas de verificación se utilizan a menudo cuando se quiere que el usuario pueda escoger
tantas opciones como desee, de forma que, podemos decir, que cada casilla de verificación es
independiente al resto.
Enlace vídeo:
9.6. Insertar botones de opción
A diferencia de las casillas de verificación vistas anteriormente, los botones de opciones funcionan
como un grupo donde sólo es posible escoger una única opción de las disponibles. De este modo, si
después de haber hecho una primera elección, cambiamos de parecer seleccionando otra opción, se
anulará la anterior.
Enlace vídeo:
85
9.7. Creación de menús desplegables
Los menús emergentes se muestran como cuadros de texto de una única línea con un botón flecha
en su parte derecha; cuando pulsamos ese botón, las otras opciones aparecen en forma de lista o
menú. Al seleccionar una de las opciones, la lista se cerrará y el valor seleccionado será el que se
muestre en el cuadro de texto.
Enlace vídeo:
9.8. Creación de listas
Las listas desplazables nos permitirán configurar varias opciones en un espacio limitado. A diferencia
de los menús desplegables, estas listas presentan dos flechas: una apuntando hacia arriba y otra
hacia abajo. Podremos controlar la altura permitiéndonos mostrar una o más opciones
simultáneamente; y nos permitirán seleccionar más de una opción a la vez.
Enlace vídeo:
9.9. Creación de botones para activar el formulario
Los botones son esenciales para los formularios ya que nos permitirán controlar las operaciones que
éstos realicen. Podremos utilizarlos para enviar al servidor los datos introducidos por el usuario o
para restablecer un formulario de forma que los usuarios puedan corregir la información antes de
enviarla.
Enlace vídeo:
9.10. Insertar campo de archivo
Los campos de archivo son los elementos menos utilizados en los formularios. Su función principal
consiste en permitir que cualquier archivo sea adjuntado al formulario y enviado a un servidor con el
resto de datos. Hoy día ha sido suplantado por los métodos modernos de correo electrónico, que
también permiten adjuntar archivos a cualquier mensaje.
Enlace vídeo:
86
9.11. Práctica: Diseño Web parte VII
En esta nueva práctica, vamos a empezar creando un nuevo documento denominado “Info.htm”. En
esta página, crearemos un formulario donde el navegante pueda enviar cualquier comentario o
información sobre la película Spider-Man. A lo largo de la práctica, aprenderá a crear campos de
textos simples y de varias líneas, menús desplegables, botones de opciones, casillas de verificación y
botones para enviar el formulario a una dirección de correo electrónico. Para finalizar, vincularemos
la página creada para que esté accesible desde la página “Menu.htm”.
- Entre en Dreamweaver de una de las formas que conoce y active el panel Archivos.
- Asegúrese de que se muestra activo el sitio Spider-Man y, dentro de él, cree una nueva
carpeta denominada INFO.
- Con la nueva carpeta INFO seleccionada, cree un nuevo archivo al que deberá llamar
Info.htm.
- Abra el archivo “Info.htm” y acceda a las propiedades de su página.
- Teclee como título Formulario de información.
- El color de fondo que debe indicar es #000000 y el del texto #FFFFFF.
- Añada el valor 0 para los márgenes izquierdo, derecho e inferior; y el valor 10 para el margen
superior.
- El color del vínculo será #0000FF, el de los vínculos visitados #FF0000, y el de los vínculos
activos #FFFF00.
- Con el cursor del ratón ubicado en la ventana de documento, aplique una alineación
centrada.
- Inserte una tabla formada por una fila y una columna. Especifique un ancho de tabla de 50
píxeles y un grosor de borde de 0.
- Una vez insertada la tabla modifique sus dimensiones con los valores 450 de An por 375 de
Al.
- En los campos Relleno celda y Espacio celda introduzca 0.
- Divida la tabla en dos filas y, en la superior, inserte la imagen “info.titulo.jpg” que se adjunta
con la práctica. Guárdela en la carpeta IMAGES.
cambie a una doble flecha, arrástrela hacia arriba hasta que ésta se ajuste con la dimensión
de la imagen.
- Centre la alineación de la tercera columna y teclee en ella el texto: Envía tus opiniones y
noticias de la película.
- Aplíquele la fuente Arial, el color Rojo y el atributo de Negrita.
- Sitúese en la quinta celda y aplique una alineación justificada.
- Teclee el texto: Si tiene alguna noticia, rumor o primicia sobre la película Spider-Man, puede
contactar conmigo enviando un mensaje a fatima@hotmail.com o rellenando el formulario
que aparece debajo.
- Aplíquele el tamaño intermedio y la fuente Arial.
- Seleccione la dirección de correo electrónico en el texto que acabamos de teclear e inserte
un vínculo mediante el comando Vínculo de correo electrónico.
- Quite el subrayado al vínculo de correo electrónico.
87
- Inserte un formulario en la celda siete de la tabla y configure la alineación horizontal como

Predeterminado y la vertical como Superior.
- En el interior del formulario, aplique una alineación izquierda y teclee NOMBRE:.
- Aplíquele el formato Arial, pequeña y Negrita.
- Junto al texto, inserte un Campo de texto, al que deberá definir como Nombre en el campo
de edición del panel Propiedades.
- Introduzca el valor de 20 en los campos de edición Ancho car (Ancho en caracteres) y Car.
máx (Caracteres máximos).
- Presione INTRO y teclee el texto APELLIDOS:.
- Junto al texto, inserte un Campo de texto, al que deberá definir como Apellidos en el campo
- Presione INTRO y teclee el texto DIRECCIÓN:.
- Junto al texto, inserte un Campo de texto, al que deberá definir como Dirección en el campo
- Coloque el cursor del ratón justo detrás del último campo de texto y pulse la tecla INTRO
para pasar a la siguiente línea.
- Teclee FECHA DE NACIMIENTO y presione INTRO.
- Teclee Día e inserte a continuación un menú desplegable. Defínalo como Día en el cuadro
campo de edición Lista/menú del panel Propiedades e indique como Tipo, Menú.
- Inserte como valores de lista los días de un mes del 01 al 31.
- A continuación del campo anterior, teclee Mes e inserte un menú desplegable. Defínalo
como Mes en el cuadro de edición Lista/menú del panel Propiedades e indique como Tipo,
Menú.
- Inserte como valores los meses de un año de Enero a Diciembre.
- A continuación del campo anterior, teclee Año e inserte un campo de texto. Defínalo como
Año en el cuadro campo de edición Campo de texto del panel Propiedades e indique el valor
4 en los campos Ancho car y Car. máx.
- Coloque el cursor del ratón justo detrás del campo de texto y pulse la tecla INTRO para pasar
a la siguiente línea.
- Escriba el texto CORREO ACTUAL: y pulse la tecla INTRO nuevamente para pasar a la
siguiente línea.
- Inserte un botón de opción. Defínalo como E-mail en el panel Propiedades y como Valor
activado, escriba No.
- Como estado inicial, elija Desactivado.
- Junto a él teclee el texto No tengo cuenta de correos. Aplíquele el formato Arial y el tamaño
pequeño.
- Presione INTRO e inserte un nuevo botón de opción.
- Defínalo como E-mail en el panel Propiedades y como Valor activado, escriba Sí.
- Como estado inicial, elija Activado.
- Junto a él teclee el texto Sí tengo. Aplíquele el formato Arial y el tamaño pequeña.
- A continuación inserte un campo de texto. Defínalo como Correo e inserte el valor 30 en los
campos de edición Ancho car y Car. máx.
88
- Coloque el cursor del ratón justo detrás del último campo de texto y pulse la tecla INTRO
para pasar a la siguiente línea.
- Escriba el texto COMENTARIOS: y asígnele el formato Arial y el tamaño pequeña.
- Pulse la tecla INTRO nuevamente para pasar a la siguiente línea.
- Inserte un Área de texto. Defínalo como Comentario e indique el valor 50 en el campo de
edición Ancho Car y el valor 8 en el campo Líneas núm.
- Presione INTRO para continuar en una línea nueva.
- Inserte una casilla de verificación. Defínala como Información, determine Sí como valor
activado y configure su estado actual como Activado.
- Teclee al lado de la casilla Sí, deseo recibir información sobre actualizaciones de la Web.
- Aplique el formato Arial y el tamaño pequeña.
- Asegúrese de que el cursor del ratón se encuentra colocado al final de la línea de texto
introducida para la casilla de verificación y pulse la tecla INTRO para pasar al siguiente
renglón.
- Inserte un botón alineado al centro.
- El texto que deberá mostrar el botón será Limpiar. En el área Acción establezca Restablecer
formulario.
- Junto a él inserte un nuevo botón y no modifique las propiedades que aparecen por defecto.
- Configure el botón Enviar que acaba de crear para que mande los datos del formulario a la
dirección de correo electrónico que desee. Actúe desde el Inspector de código.
- Vincule el documento “Info.htm” al botón Info del documento “Menu.htm”
Recuerda…
Los campos de texto que inserta Dreamweaver tendrán aproximadamente 20 caracteres.
No se pueden utilizar los campos de texto ocultos para introducir datos, son campos invisibles que
se colocan en un documento para recopilar o enviar una información.
Si al insertar un formulario, el contorno no se encuentra visible en la ventana de documento, se debe

activar la opción Elementos invisibles de la categoría Ayudas visuales en el menú Ver.
La categoría Formularios de la Barra de herramientas Insertar nos permitirá crear las distintas
entradas de un formulario.
Son 3 los tipos de campos de texto que se pueden crear con Dreamweaver para que el usuario
escriba una respuesta.
Utilizaremos las casillas de verificación en un formulario, cuando queramos que el usuario pueda
escoger tantas opciones como desee.
89
10. BIBLIOTECA
A lo largo del siguiente capítulo, veremos cómo las bibliotecas de Dreamweaver pueden ayudarnos a
crear páginas Web además de facilitarnos su mantenimiento, ya que nos permitirán modificar
cientos de páginas en cuestión de segundos. La biblioteca de un sitio almacena los elementos que
queramos, permitiéndonos ver y organizar estos archivos al mismo tiempo que estamos creando un
documento HTML.
10.1. La paleta Activos
La paleta Activos será la encargada de administrar los elementos repetidos de Dreamweaver, es

decir, de albergar la biblioteca. Gracias a esta paleta, podremos ahorrarnos muchas horas de trabajo
durante el proceso de creación y mantenimiento del diseño de una página.
La paleta Activos se muestra como una ventana dividida horizontalmente en dos paneles que
podremos arrastrar y cambiar de tamaño. La parte inferior muestra la lista de los elementos de la
biblioteca del sitio actual. Al seleccionar uno de estos elementos, la parte superior de la paleta
muestra una imagen del elemento. Podremos cambiar el tamaño de los paneles situando el cursor
del ratón sobre uno de los bordes de separación y haciendo clic sobre él para arrastrarlo hasta la
nueva posición.
10.2. Visualizar los elementos de un documento
En la siguiente explicación, veremos cómo a medida que trabajamos con un documento se van
creando los elementos de su biblioteca partiendo de cualquier componente que tengamos, ya sea un
texto, una tabla, un formulario, applets de Java, plug-ins, elementos Actives, barras de navegación e
imágenes.
Enlace vídeo:
90
10.3. Insertar un elemento de biblioteca
En la siguiente explicación, veremos lo fácil que resulta añadir un elemento de biblioteca en la

ventana de documento de Dreamweaver. Al colocar un elemento en una página Web, se inserta una
copia en el documento y, además, se añade en el código HTML un comentario que hace referencia al
elemento original.
Enlace vídeo:
10.4. Modificar elementos de biblioteca
Cuando realizamos una modificación de un elemento, podemos actualizar todos los documentos que
lo utilicen. Si decidimos no actualizar las distintas instancias, los documentos permanecerán
asociados con el elemento de biblioteca para actualizarlos posteriormente.
También podremos cambiar el nombre de los elementos de biblioteca para romper su conexión con
documentos o plantillas; eliminar un elemento de la biblioteca; y volver a crear un elemento de
biblioteca perdido.
Enlace vídeo:
10.5. Práctica simulada: Trabajar con la biblioteca
Mediante esta práctica simulada, trabajará con la biblioteca de forma que agregue una imagen a ella
e inserte otra desde la misma.
Recuerda…
Es posible insertar en un documento un elemento incluido en la biblioteca, arrastrándolo hasta la
ventana de documento.
La paleta Activos será la encargada de albergar la biblioteca.
La función de la biblioteca es almacenar aquellos elementos de una página que solemos reutilizar o
actualizar con más frecuencia en un sitio Web.
Se debe de actuar si realizamos una modificación a un elemento incluido en la biblioteca

actualizando los documentos que usan ese elemento.
91
11. PLANTILLAS
Una plantilla es un documento que utilizaremos para crear múltiples páginas con un mismo diseño. A
lo largo del siguiente capítulo, veremos cómo, al crear una plantilla, podremos indicar qué elementos
de la página deberán permanecer constantes (bloqueados) en los documentos que creemos basados
en esa plantilla, y cuáles podrán modificarse. Éstas resultarán especialmente útiles cuando
trabajemos en colaboración con otros diseñadores, de esta forma, puede haber un diseñador que
controle los diseños de la página mientras que otros pueden añadir el contenido, pero sin tener
autorización para modificar el diseño.
11.1. Creación de plantillas con Dreamweaver
A lo largo de la siguiente explicación, veremos las dos formas que nos ofrece Dreamweaver para
crear plantillas. Podremos crearlas a partir de un documento HTML existente, que después
modificaremos para que se ajuste a nuestras necesidades, o bien, podremos crear una plantilla
partiendo de un documento HTML en blanco.
Las plantillas se guardan con la extensión .dwt en la carpeta TEMPLATES de nuestro sitio Web. Si no
existiera esa carpeta, Dreamweaver la crearía de forma automática.
Enlace vídeo:
11.2. Configurar las propiedades de una plantilla
Los documentos creados a partir de una plantilla heredarán las propiedades de ésta, exceptuando el
título de la página. En un documento basado en una plantilla, podremos cambiar el título del
documento, pero se ignorarán los cambios que se realicen en las demás propiedades de página. Si se
aplica una plantilla a un documento y luego es necesario cambiar las propiedades de la página del
mismo, deberemos modificar las propiedades de la plantilla y luego actualizar las páginas que utilizan
dicha plantilla.
Enlace vídeo:
92
11.3. Definición de regiones editables en una plantilla
En una plantilla, las regiones editables son las partes de la página que se pueden cambiar en los
archivos basados en esa plantilla. Las regiones bloqueadas (no editables) son las partes del diseño de
la página que permanecerán constantes de una página a otra.
Al crear una plantilla nueva, todas sus regiones aparecen bloqueadas; por ello, para que una plantilla
sea realmente útil, es preciso hacer editables algunas regiones de la misma.
Enlace vídeo:
11.4. Bloquear una región editable
Si hemos definido una región editable dentro de una plantilla y después deseamos bloquearla de
nuevo, Dreamweaver nos proporciona el comando Quitar formato de plantilla para facilitarnos esta
operación.
NOTA: No podremos bloquear una región editable en un documento basado en una plantilla;
solamente podremos bloquear una región en una plantilla.
Enlace vídeo:
11.5. Creación de documentos basados en plantillas
Para finalizar este capítulo, vamos a aprender a usar una plantilla como punto de partida para la
creación de un nuevo documento, o a aplicarla a un documento existente.
Enlace vídeo:
11.6. Práctica simulada: Trabajar con las plantillas de Dreamweaver
Para realizar esta práctica simulada, deberá guardar un documento como plantilla para,
posteriormente, aplicarlo a otro documento.
93
11.7. Práctica: Diseño Web parte VIII
Esta práctica la vamos a dedicar principalmente a conocer más en profundidad al director de la

película Spider-Man. Para ello, empezaremos creando el documento “Raimi.htm” que vincularemos
al menú de la página principal. En este documento, colocaremos información y algunas imágenes del
director. A continuación, crearemos una plantilla para crear las fichas de las películas más
interesantes dirigidas por Sam Raimi. Para finalizar, crearemos zonas editables dentro de la plantilla y
la aplicaremos a documentos nuevos para facilitar el trabajo de creación de todas las fichas.
- Acceda a Macromedia Dreamweaver y active el panel Archivos.

- Seleccione el sitio Spider-Man y cree en su interior una nueva carpeta con el nombre RAIMI.
- Dentro de la carpeta RAIMI, cree un nuevo documento con el nombre Raimi.htm.
- Configure las propiedades del documento “Raimi.htm” con el título Sam Raimi.
- Establezca como Color de fondo el valor #000000 y como Color del texto #FFFFFF.
- Asigne el valor 0 a los márgenes izquierdo, derecho e inferior.
- Al margen superior, asigne el valor 10.
- Teclee los siguientes valores para establecer los colores de los vínculos: Color del vínculo
(#0000FF), Vínculos visitados (#FF0000) y Vínculos activos (#FFFF00).
- En la ventana de documento, inserte una tabla formada por 1 fila y 1 columna y con un
grosor del borde de 0.
- Modifique las dimensiones de la tabla mediante el panel Propiedades para indicar el valor
450 en el campo An y el valor 375 en el campo Al.
- Especifique un relleno de celda y un espacio de celda de 0.
- Divida la tabla en 2 filas e inserte en la fila superior la imagen “raimi-titulo.jpg” que se
adjunta con esta práctica. Guárdela en la carpeta IMAGES del sitio Spider-Man.
- Acerque el cursor del ratón a la línea que divide las dos celdas. Cuando éste cambie a una
doble flecha, arrástrela hacia arriba, hasta que se ajuste con la dimensión de la imagen.
- Divida la fila inferior en 20 nuevas filas.
- En la tercera celda de la tabla, inserte el texto identificado como “TEXTO CELDA NÚMERO 3”
del documento “bio-raimi.txt” que se adjunta con la práctica.
- Aplíquele el formato Arial, tamaño pequeña y una alineación justificada.
- Divida la celda quinta de la tabla en 2 columnas.
- En la columna de la izquierda, inserte la imagen “sam01.jpg” que se adjunta con la práctica y
guárdela en la carpeta IMAGES.
- En la columna de la derecha, inserte la imagen “sam02.jpg” que se adjunta con la práctica y
guárdela en la carpeta IMAGES.
- En la octava celda de la tabla, inserte el texto identificado como “TEXTO CELDA NÚMERO 8”
- En la fila décima de la tabla inserte la imagen “sam-ethan.jpg” que se adjunta con la práctica
y guárdela en la carpeta IMAGES.
- En la celda trece de la tabla, inserte el texto identificado como “TEXTO CELDA NÚMERO 13”
- En la fila quince de la tabla, inserte la imagen “evil-behind.jpg” que se adjunta con la práctica
y guárdela en la carpeta IMAGES.
94
- En la celda dieciocho de la tabla, inserte el texto identificado como “TEXTO CELDA NÚMERO
18” del documento “bio-raimi.txt” que se adjunta con la práctica.
- En la celda veinte de la tabla, inserte el texto del documento “film-raimi.txt” que se adjunta
con esta práctica.
- Aplíquele el formato Arial, tamaño pequeña y una alineación a la izquierda.
- Seleccione sólo el título FILMOGRAFÍA y aplíquele Negrita y un color Rojo.
- Coloque el cursor del ratón en la celda seis de nuestra tabla y escriba el siguiente texto: Sam
Raimi comenzó a dirigir cortos a los 15 años.
- Asigne el formato Arial, el tamaño más pequeña, el color Amarillo y una alineación centrada.
- Coloque el cursor del ratón en la celda once de nuestra tabla y escriba el siguiente texto: Sam
Raimi y Ethan Coen durante la premier de Evil Dead.
- Coloque el cursor del ratón en la celda dieciséis de nuestra tabla y escriba el siguiente texto:
Sam Raimi y Bruce Campbell durante el rodaje de Evil Dead 2.
- Guarde los cambios.
- Vincule el documento “Raimi.htm” al botón Sam Raimi del archivo “Menu.htm”.
- Cierre el documento.
- Dentro de la carpeta RAIMI, cree una nueva carpeta con el nombre FICHAS.
- En el interior de la carpeta FICHAS, cree un nuevo archivo con el nombre Evil.htm.
- Configure las propiedades del documento “Evil.htm” con el título Fichas de películas dirigidas
por Sam Raimi.
- Establezca como Color de fondo, el valor #000000 y, como Color del texto #FFFFFF.
- Asigne el valor 0 a los márgenes izquierdo, derecho, inferior y superior.
- Desde la ventana de documento, indique una alineación al centro.
- Inserte una tabla formada por 1 fila y 1 columna y con un grosor del borde de 0.
- Modifique las dimensiones de la tabla mediante el panel Propiedades para indicar el valor
525 en el campo An y el valor 400 en el campo Al.
- Especifique un relleno de celda y un espacio de celda de 0.
- Divida la tabla en 2 filas.
- Divida la fila superior en 2 columnas.
- En la primera celda de la izquierda, inserte la imagen “evil-dead-esp.jpg” que se adjunta con
la práctica. Guárdela en la carpeta IMAGES.
- En la celda de la derecha, inserte la imagen “evil-info.jpg” que se adjunta con la práctica.
Guárdela en la carpeta IMAGES.
- En la celda inferior, inserte la imagen “cerrar.jpg” que se adjunta con la práctica. Guárdela en
la carpeta IMAGES.
- Cree una zona activa alrededor del texto CERRAR y desígnela como Cerrar en el cuadro Mapa
del panel Propiedades.
- Asígnele la acción correspondiente para conseguir que al pulsar Cerrar la ventana se cierra.
- Guarde el documento “Evil.htm” como plantilla, con el nombre “Ficha.dwt”.
- Convierta la imagen “evil-dead-esp.jpg” en región editable con el nombre Cartel.
- Convierta la imagen “evil-info.jpg” en región editable con el nombre Información.
95
- Guarde los cambios y cierre la plantilla.

- Cree un nuevo documento basado en la plantilla “Ficha.dwt”.
- Haga doble clic sobre la imagen “evil-dead-esp.jpg” del área editable Cartel y ponga en su
lugar la imagen “evil-dead-2-esp.jpg” que se adjunta con la práctica. Guárdela en la carpeta
IMAGES.
- Haga doble clic sobre la imagen “evil-info.jpg” del área editable Información y ponga en su
lugar la imagen “evil2-info.jpg” que se adjunta con la práctica. Guárdela en la carpeta
IMAGES.
- Guarde el nuevo documento en la carpeta RAIMI/FICHAS con el nombre Evil2.htm.
- Cree un nuevo archivo dentro de la carpeta FICHAS con el nombre Evil3.htm y aplique al
nuevo documento la plantilla Ficha.
- Haga doble clic sobre la imagen “evil-dead-esp.jpg” del área editable Cartel y ponga en su
lugar la imagen “army-of-darkness-esp.jpg” que se adjunta con la práctica. Guárdela en la
carpeta IMAGES.
- Haga doble clic sobre la imagen “evil-info.jpg” del área editable Información y ponga en su
lugar la imagen “evil3-info.jpg” que se adjunta con la práctica. Guárdela en la carpeta
IMAGES.
Recuerda…
Para proceder a aplicar una plantilla a un documento existente de Dreamweaver se utiliza la opción
Aplicar plantilla a página en el submenú Plantillas del menú Modificar.
El panel Activos lo utilizaremos para cambiar el nombre de una plantilla.
Para cambiar el color de resalte de las regiones editables de una plantilla utilizaremos la categoría
Resaltando del cuadro de diálogo Preferencias.
Dreamweaver almacena los elementos de biblioteca en la carpeta LIBRARY que se crea en el raíz del
sitio Web.
Para crear una región editable en una plantilla se utiliza la opción Nueva región editable en el
submenú Plantillas del menú contextual.
96
12. VÍDEOS
Aunque hoy en día todavía no hay un estándar de vídeo que se haya impuesto a los demás, podemos
decir, sin miedo a equivocarnos, que los formatos de vídeo más populares en la Web son QuickTime
y RealVideo. A lo largo del siguiente capítulo, veremos que el usuario podrá descargar un vídeo y
reproducirlo a continuación mediante algún programa auxiliar como el Reproductor multimedia de
Windows. También aprenderemos a colocar vídeos de QuickTime directamente en un documento
HTML y por último, le mostraremos cómo reproducir vídeos con RealPlayer, que es un sistema de
flujo de vídeo continuo que nos permitirá reproducir una película a medida que la estamos
descargando.
12.1. Vídeo en la red
A cualquier persona que no esté un poco familiarizada con los PC e Internet, le resultará difícil
entender que con la tecnología que se ha desarrollado para la Web, no pueda incorporarse algo tan
elemental como un vídeo. Las complicaciones se deben fundamentalmente a que la conversión
digital de cualquier archivo de vídeo analógico supone un volumen de datos enorme.
Para solucionar este problema, se han desarrollado varias estrategias que nos permitirán la creación,
almacenamiento y reproducción de vídeos digitales. Estas estrategias consisten en la utilización de
diferentes formatos de archivos, lo cual implica que el usuario debe de disponer de un sistema de
reproducción adecuado al tipo de archivo que desee ver.
A continuación, pasaremos a explicar brevemente los distintos formatos de vídeo más utilizados en la
red:
 MPEG: Desarrollado por Motion Picture Experts Group, este formato es a las imágenes en
movimiento, lo que el formato JPEG a las imágenes fijas. Las extensiones utilizadas para este
tipo de archivos son .mpg y .mpeg.
 QuickTime: Desarrollado originalmente por Apple como una solución multiplataforma, es
uno de los más populares en la red. Además del QuickTime normal, Apple ha desarrollado el
QuickTime VR, que proporciona una visión panorámica interactiva. Las extensiones utilizadas
para este tipo de archivos son .qt y .mov.
 RealVideo: Desarrollado por RealNetworks, permite la reproducción continua tanto de audio
como de vídeo. Las extensiones utilizadas para este tipo de archivos son .ra, .rpm y .ram.
 Video for Windows: Desarrollado por Microsoft para ser utilizado con los reproductores
instalados en los sistemas operativos Windows, tiene la finalidad de reproducir cualquier
archivo .avi.
12.2. Vincular vídeos en Dreamweaver
Una vez que tenemos digitalizado el vídeo, la forma más sencilla de que esté disponible en nuestra
Web es tratarlo como un enlace cualquiera. De este modo, cuando alguien seleccione el enlace,
podrá descargar el vídeo en su PC.
Enlace vídeo:
97
12.3. Reproducción de vídeos on-line
El navegador Internet Explorer de Microsoft soporta el atributo dynsrc que es capaz de reproducir un
vídeo on-line. Los vídeos se verán dentro de la misma página Web junto con el resto de elementos
del documento como texto e imágenes. El atributo se insertará en la etiqueta <IMG> de la siguiente
manera:
<img src=”images/foto.gif” dynsrc=”videos/movie.mpg”>
Con esta sintaxis, en un navegador que no soporte el atributo dynsrc, se representará la imagen
referenciada, mientras que, en el navegador Internet Explorer, se reproducirá automáticamente el
vídeo.
Enlace vídeo:
12.4. Atributos de QuickTime
Para poder visualizar una película de QuickTime en una página Web, los visitantes necesitan tener
instalado un plug-in de QuickTime. Las instrucciones necesarias para insertar cualquier contenido
que requiera un plug-in se almacenarán en la etiqueta <EMBED>.
Enlace vídeo:
12.5. Insertar RealVideo en un documento HTML
El primer sistema de flujo de vídeo lo desarrolló RealNetworks. Esta empresa ofrece un reproductor
multimedia gratuito llamado RealPlayer para poder ver o escuchar el contenido de estos sistemas.
RealVideo utiliza su propio software de servidor (RealServer) para transmitir archivos de vídeo
codificados. En vez de llamar al archivo de vídeo directamente, RealVideo utiliza un sistema de meta
archivos para enlazar con el servidor y el archivo de vídeo. Un meta archivo no es más que un archivo
de texto donde se especifica el URL que apunta al servidor y al archivo de vídeo. A continuación,
puede ver las distintas extensiones que utiliza este sistema:
 .rm: Archivo de RealVideo.

 .ra: Archivo de RealAudio.
 .ram: Meta archivo que ejecuta una sesión independiente de RealPlayer.
 .rpm: Meta archivo que carga el plug-in de RealPlayer.
Enlace vídeo:
98
12.6. Práctica simulada: Visualización de vídeos en un documento HTML
En esta práctica simulada, deberá insertar un vídeo y configurar el plug-in de Quicktime para que
éste pueda visualizarse correctamente en Dreamweaver.
12.7. Práctica: Diseño Web parte IX
A lo largo de esta nueva práctica, aprenderemos a vincular y a visualizar vídeos en documentos

HTML. Para ello, empezaremos diseñando el documento “Trailers.htm” que vincularemos al menú de
la página principal. A continuación, aprenderemos a colocar vídeos en un documento utilizando el
atributo dynsrc. Utilizaremos los plug-ins de Dreamweaver para reproducir vídeos QuickTime
directamente en un documento HTML y, para finalizar, veremos la forma de vincular un vídeo de
RealPlayer de forma directa o utilizando un meta archivo que llame a un vídeo que se encuentre en
un servidor.
- Abra Dreamweaver de una de las formas que conoce.

- Active el panel Archivos y seleccione el sitio Spider-Man.
- Cree una nueva carpeta con el nombre TRAILERS y, en su interior, un nuevo documento con
el nombre Trailers.htm.
- Configure las propiedades del documento “Trailers.htm” con el título Trailers.
- Asigne el valor 0 a los márgenes izquierdo, derecho e inferior y el valor 10 al margen
superior.
- Inserte el cursor del ratón en la ventana de documento, e indique una alineación al centro.
- Cree una tabla formada por una fila y una columna con un ancho de tabla de 50 y un grosor
del borde de 0.
- Mediante el panel Propiedades, especifique las dimensiones 450 en el cuadro An y 375 en el
cuadro Al.
- En los campos de edición Rell. celda y Esp. celda, introduzca 0 para especificar que no desea
relleno ni espaciado.
- Divida la tabla en 2 nuevas filas.
- En la celda superior inserte la imagen “trailers-titulo.jpg” que se adjunta con esta práctica.
cursor del ratón cambie a una doble flecha, arrástrela hacia arriba hasta que se ajuste con la
dimensión de la imagen.
- En la segunda fila de la tabla, inserte la imagen “logo-trailer.gif” que se adjunta con esta
práctica. Guárdela en la carpeta IMAGES.
99
- Inserte en la cuarta celda, de una forma centrada, la imagen “trailer-mpeg.jpg” que se

- Inserte en la sexta celda, de una forma centrada, la imagen “trailer-quicktime.jpg” que se
- Inserte en la octava celda, de una forma centrada, la imagen “trailer-real.jpg” que se adjunta
con la práctica. Guárdela en la carpeta IMAGES.
- Cierre el documento y guarde los cambios.
- Vincule el documento “Trailers.htm” al botón Trailers de la Barra de navegación del
documento “Menu.htm”.
- Dentro de la carpeta Trailers, cree un nuevo documento con el nombre Mpeg.htm.
- Configure las propiedades del documento “Mpeg.htm” con el título Trailer On-Line ::: Spider-
Man :::.
- Asigne el valor 0 a los márgenes izquierdo, derecho, superior e inferior.
- Inserte el cursor del ratón en la ventana de documento, e indique una alineación al centro.
- Cree una tabla formada por una fila y una columna con un ancho de tabla de 50 y un grosor
del borde de 0.
- Mediante el panel Propiedades, especifique las dimensiones 500 en el cuadro An y 300 en el
cuadro Al.
- En los campos de edición Rell. celda y Esp. celda, introduzca 0 para especificar que no desea
relleno ni espaciado.
- Divida la tabla en 3 nuevas filas.
- En la celda superior inserte la imagen “logo-trailers.jpg” que se guardó en la carpeta IMAGES.
- En la segunda celda inserte la imagen “spider-mpeg.jpg” que se adjunta con la práctica.
- Coloque el cursor en la tercera y última celda de la tabla y pulse el botón Alinear al centro
situado en la parte superior derecha del panel Propiedades.
- Escriba Cerrar.
- Seleccione el texto y cámbiele el formato a Arial utilizando el panel Propiedades.
- A continuación, cámbiele el tamaño a pequeña y resalte el texto pulsando el botón Negrita.
- Inserte un vínculo al texto de forma que, al pulsar sobre el texto Cerrar la ventana se cierre.
- Añada el atributo necesario para quitar el subrayado del vínculo.
- Dentro de la carpeta TRAILERS, cree una nueva carpeta a la que llamará VIDEOS.
- Copie dentro de la carpeta los vídeos “spider-man.mpg”, “spider-man.mov” y “spider-
man.ram” que se adjuntan con la práctica.
- Seleccione la imagen “spider-mpeg.jpg” del archivo “Mpeg.htm” e insértele un vínculo al
vídeo “spider-man.mpg”.
- Guarde el documento “Mpeg.htm” como plantilla con el nombre Video.dwt.
- Seleccione la imagen “spider-mpeg.jpg” y defínala como región editable con el nombre
Video.
- Dentro de la carpeta TRAILERS, cree un nuevo documento con el nombre QuickTime.htm.
- Aplique la plantilla Vídeo al documento “QuickTime.htm”.
- Elimine la imagen “spider-mpeg.jpg” e inserte en su lugar el pug-in “spider-man.mov”.
100
- En el panel Propiedades, indique una anchura de 480 y una altura de 275.

- Especifique en el campo URL plg la dirección de Internet a la que desea que se dirijan los
visitantes que no tengan instalado el plug-in requerido.
- Cierre el documento y abra el archivo “Trailers.htm”.
- Seleccione la imagen “trailer-real.jpg” situada en la parte inferior de la tabla.
- Asígnele el vínculo “spider-man.ram”.
- Guarde los cambios y compruebe el resultado.
Recuerda…
La extensión .ram lo utilizan los metas archivos para permitir visualizar un vídeo de RealPlayer.
Los siguientes formatos de vídeos son soportados por Dreamweaver:
- QuickTime.
- Video for Windows.
- MPEG.
El parámetro Autoplay de QuickTime permitirá comenzar la reproducción de una película en cuanto

se haya descargado suficientemente.
101
13. COMPORTAMIENTOS
Los comportamientos son las herramientas más poderosas que nos proporciona Dreamweaver para
interactuar con la página Web, con el fin de llevar a cabo diversas modificaciones o de provocar la
realización de determinadas tareas. A lo largo del siguiente tema, aprenderá a hacer que las capas
aparezcan y desaparezcan cuando quiera, cómo abrir la ventana de un navegador, reproducir un
sonido o detener una película Shockwave; todo ello, sin ni siquiera tener idea de JavaScript.
13.1. Panel Comportamientos
Utilizando el panel Comportamientos de Dreamweaver, podremos añadir comportamientos a los

elementos de una página y modificar los parámetros adjuntados con anterioridad a las etiquetas.
La etiqueta seleccionada en la ventana de documento aparece en la Barra de título del panel

Comportamientos. Los comportamientos que se hayan añadido a un elemento de página aparecerán
en la lista de comportamientos ordenados alfabéticamente.
A continuación, pasaremos a describir los distintos eventos que pueden asociarse como acciones,
utilizando el menú emergente del panel Comportamientos.
onAbort Se genera cuando el visitante detiene el navegador antes de que se

cargue completamente una imagen.
onAfterUpdate Se genera cuando un elemento de datos vinculados de la página

termina de actualizar el origen de los datos.
onBeforeUpdate Se genera cuando un elemento de datos vinculados de la página ha

cambiado y va a actualizar el origen de los datos.
onBlur Se genera cuando un elemento especificado deja de ser el foco de

interacción del visitante.
onBounce Se genera cuando el contenido de un elemento de marquesina ha

alcanzado el límite de la misma.
onChange Se genera cuando el visitante cambia un valor de la página. Por

ejemplo, cuando elige un elemento de un menú o cambia el valor de
un campo de texto.
102
onClick Se genera cuando el visitante hace clic en un elemento especificado,

como un vínculo, un botón o un mapa de imagen.
onDblClick Se genera cuando el visitante hace doble clic en un elemento

especificado, como un vínculo, un botón o un mapa de imagen.
onError Se genera cuando se produce un error en el navegador al cargar una

página o una imagen.
onFinish Se genera cuando el contenido de un elemento de marquesina

completa un bucle.
onFocus Se genera cuando el elemento especificado se convierte en el foco de

interacción del visitante.
onHelp Se genera cuando el visitante hace clic en el botón Ayuda o

elige Ayuda del menú de un navegador.
onKeyDown Se genera en el momento en que el visitante presiona cualquier tecla.

No es necesario que el visitante suelte la tecla para que se genere el
evento.
onKeyPress Se genera cuando el visitante presiona y suelta cualquier tecla.
onKeyUp Se genera en el momento en que el visitante suelta una tecla después

de pulsarla.
onLoad Se genera cuando termina de cargarse una imagen o una página.
onMouseDown Se genera cuando el visitante pulsa el botón del ratón. No es

necesario que suelte el botón del ratón para que se realice el evento.
onMouseMove Se genera cuando el visitante mueve el ratón sobre el elemento

especificado.
onMouseOut Se genera cuando el visitante mueve el ratón afuera del elemento

especificado.
onMouseOver Se genera cuando el ratón se mueve por primera vez para señalar el
elemento especificado.
onMouseUp Se genera cuando se suelta un botón del ratón que se encuentra

presionado.
onMove Se genera cuando se mueve una ventana o un marco.
onReadyStateChange Se genera cuando cambia el estado del elemento especificado.
onReset Se genera cuando se restauran los valores predeterminados de un

formulario.
onResize Se genera cuando el visitante cambia el tamaño de la ventana del

navegador o de un marco.
onRowEnter Se genera cuando ha cambiado el puntero de registro actual del

origen de datos vinculados.
onScroll Se genera cuando el visitante desplaza la página hacia arriba o hacia

abajo utilizando el scroll del documento.
103
onSelect Se genera cuando el visitante selecciona texto en un campo de texto.
onStart Se genera cuando el contenido de un elemento de marquesina inicia

un bucle.
onSubmit Se genera cuando el visitante envía un formulario.
onUnload Se genera cuando el visitante abandona la página.
13.2. Añadir un comportamiento
En la siguiente explicación, veremos de forma detenida el procedimiento que tendremos que seguir
para añadir un comportamiento usando el panel visto en el apartado anterior. Como pudimos ver,
dependiendo de la etiqueta, podemos asignar un evento u otro.
Enlace vídeo:
13.3. Llamar JavaScript
La acción Llamar JavaScript nos permitirá usar el panel Comportamientos para ejecutar cualquier
función personalizada o línea de código JavaScript cuando se produzca un evento determinado.
Enlace vídeo:
13.4. Cambiar propiedad
Con la acción Cambiar propiedad podremos cambiar dinámicamente las propiedades de las
siguientes etiquetas:
<LAYER> <SELECT>
<DIV> <CHECKBOX>
<SPAN> <RADIO>
<IMG> <TEXT>
<FORM> <PASSWORD>
<TEXTAREA>
Enlace video:
104
13.5. Comprobar navegador
Cada vez es más probable encontrar sitios Web que están integrados para poder ser explorados sin
problemas con distintos navegadores. Con la acción Comprobar navegador, podremos redireccionar
a los visitantes a distintas páginas, dependiendo de las marcas y versiones de sus navegadores.
En general, la acción Comprobar navegador se asigna a la etiqueta <body> y utiliza el evento onLoad.
Adjuntar este comportamiento de este modo hace que una página sea compatible prácticamente
con cualquier navegador, incluso con aquellos que no tienen activado JavaScript.
Enlace vídeo:
13.6. Comprobar plug-in
Cuando alguna página de nuestro sitio Web requiere el uso de uno o más plug-ins, podemos utilizar
la acción Comprobar plug-in para detectar si un usuario tiene instalados los plug-ins necesarios para
visualizar la totalidad del contenido de nuestra página. Una vez realizada esta comprobación,
podremos redirigir a los navegantes que tengan el plug-in apropiado a un URL, y a aquellos que no lo
tengan, a otra dirección distinta.
Enlace vídeo:
13.7. Controlar Shockwave o Flash
A lo largo de la siguiente explicación, aprenderemos a utilizar la acción Controlar Shockwave o

Flash, que nos permitirá reproducir, detener, rebobinar o ir a un fotograma de una película de
Shockwave o Flash que tengamos colocada dentro de un documento HTML de Dreamweaver.
Enlace vídeo:
13.8. Controlar sonido
La acción Controlar sonido la podremos utilizar para reproducir un archivo de sonido que
vincularemos en un documento HTML de Dreamweaver. Por ejemplo, podremos hacer que se
reproduzca un efecto sonoro al pasar el cursor del ratón sobre un vínculo, o que se reproduzca un
archivo de sonido al cargarse una página.
Enlace vídeo:
105
13.9. Mensaje emergente
Utilice la acción Mensaje emergente para mostrar un mensaje de alerta de JavaScript con el texto
que desee. Las alertas de JavaScript sólo tienen un botón Aceptar y suelen utilizarse para
proporcionar algún tipo de información al visitante.
Enlace vídeo:
13.10. Arrastrar capa
Utilice la acción Arrastrar capa para permitir a los visitantes de una página Web que desplacen por la
pantalla las capas y todo lo que éstas contengan. Dreamweaver nos permitirá, entre otras cosas:
 Especificar la dirección en la que el visitante puede arrastrar la capa (horizontalmente,

verticalmente o en cualquier dirección).
 Elegir el destino hasta el que el visitante puede desplazar la capa.
 Determinar si la capa debe ajustarse al destino cuando aquélla se encuentre a un cierto
número de píxeles del destino.
 Proporcionar un método alternativo de recorte, dejando que sólo se pueda arrastrar una
parte de la capa.
 Permitir un orden distinto de almacenamiento de capas mientras se arrastran o al liberar el
botón del ratón.
 Programar un comando de JavaScript que se ejecute cuando se alcanza el área de destino o
cada vez que se libere la capa.
NOTA: Para que sea posible ejecutar la acción Arrastrar capa, antes tendremos que insertar las capas
en la ventana de documento. Además, deberemos asociar la acción a la etiqueta <body>
Enlace vídeo:
13.11. Ir a URL
Utilizando la acción Ir a URL, Dreamweaver nos permitirá abrir un documento HTML en la ventana
actual o en un marco que especifiquemos. Esta acción resulta de gran utilidad para cambiar el
contenido de dos o más marcos con un solo clic del ratón. También puede utilizarse para saltar a una
nueva página después de un intervalo de tiempo especificado.
Enlace vídeo:
106
13.12. Abrir ventana del navegador
Con la acción Abrir ventana del navegador, podremos abrir un documento HTML en una nueva
ventana. El cuadro de diálogo que corresponde a esta acción, nos permitirá configurar las
propiedades de la nueva ventana, incluidos su tamaño, sus atributos principales y su nombre.
Enlace vídeo:
13.13. Carga previa de imágenes
Con la acción Carga previa de imágenes, podremos indicar las imágenes que deseamos cargar en la
memoria caché del navegador para su uso posterior. Esto contribuirá a evitar los retrasos debidos a
la descarga cuando llegue el momento en que tengan que aparecer dichas imágenes.
Enlace vídeo:
13.14. Establecer imagen de barra de navegación
Con la acción Establecer imagen de barra de navegación, podremos convertir una imagen colocada
en la ventana de documento de Dreamweaver en una imagen de Barra de navegación. Además,
también nos permitirá modificar la visualización y las acciones de imágenes de una Barra de
navegación.
Enlace vídeo:
13.15. Mostrar-Ocultar capas
La acción Mostrar-Ocultar capas proporciona un fácil control sobre los atributos de visibilidad para
todas las capas de un documento HTML. Esta acción resulta de gran utilidad para mostrar
información a medida que el usuario va interactuando por una página Web.
Enlace vídeo:
107
13.16. Intercambiar imagen
La acción Intercambiar imagen nos permitirá sustituir una imagen por otra cambiando el atributo src
de la etiqueta <IMG>. Use esta opción para crear sustituciones de botones y otros efectos de imagen.
Enlace vídeo:
13.17. Validar formulario
La acción Validar formulario nos permitirá comprobar el contenido de los campos de texto
especificados en un formulario de Dreamweaver para asegurarnos de que el usuario ha introducido
los datos correctamente.
Enlace vídeo:
13.18. Práctica: Diseño Web parte X
Esta práctica quizás sea la más importante, ya que nos permitirá controlar el funcionamiento de
todos los archivos que hemos ido diseñando a lo largo de las prácticas anteriores. Además,
completaremos el diseño de la misma creando los documentos que nos faltan. Cuando termine la
práctica, habrá aprendido a crear mensajes de advertencia, a abrir ventanas de navegador con un
tamaño predeterminado, a utilizar llamadas de JavaScript para cerrar ventanas, a utilizar acciones
para detectar si el usuario tiene instalado el plug-in necesario para ver el contenido de un
documento y a hacer que las capas aparezcan y desaparezcan cuando nosotros queramos.
- Abra Macromedia Dreamweaver de una de las formas que conoce y muestre el panel
Archivos.
- Asegúrese de que se muestra activo el sitio Spider-Man y abra el archivo “Index.html”.
- Seleccione la etiqueta <body> y agregue el comportamiento de mensaje entrante con el
texto: Bienvenido a la Web dedicada a la película Spider-Man. Esta Web ha sido diseñada
para ser visualizada bajo una resolución de 800 x 600. Para su correcto visionado, requiere
Internet Explorer 6 o superior.
- Utilice el comportamiento Abrir ventana de navegador para crear los vínculos del documento
“Index.html” (textos MENÚ e INTRO) a las páginas “Menu.htm” e “Intro.htm”.
- Establezca para ambos comportamientos un ancho de ventana de 700 y un alto de ventana
de 510.
- Sustituya el evento onMouseOver que Dreamweaver asigna por defecto a ambos
comportamientos por onClick.
- Utilice la acción Llamar JavaScript para ejecutar una línea de JavaScript que nos permita
cerrar la ventana “Index.html” al pulsar sobre una de las áreas interactivas del mapa de
imagen (MENÚ e INTRO).
108
- Sustituya el evento onMouseOver que Dreamweaver asigna por defecto a ambos

comportamientos por onClick.
- Cambie la posición de los eventos de forma que el evento Llamar JavaScript pase a ejecutarse
antes que el evento Abrir ventana del navegador.
- Repita este mismo procedimiento con el área interactiva colocada sobre el texto MENÚ.
- Cierre el archivo “Index.html” y abra el documento “Intro.htm”.
- Seleccione la etiqueta <body> y añádale el comportamiento Comprobar plug-in.
- Escoja el plug-in de Flash y, en el campo De lo contrario, ir a URL, redirecciónelo a la página
“Menu.htm”.
- Cierre el archivo “Intro.htm” y abra el documento “Menu.htm”.
- Seleccione el botón INTRO situado en el marco “Nav-menu.htm”.
- Haga doble clic sobre uno de los comportamientos que ya aparecen incluidos y en el cuadro
de diálogo Establecer imagen de barra de navegación indique el archivo “Intro.htm” que
deberá cargarse al hacer clic sobre el botón INTRO.
- En el panel Propiedades, escoja como Destino _top.
- Cierre el archivo “Menu.htm” y abra el documento “Raimi.htm”.
- Centre su atención en el apartado filmografía y vincule las películas “Posesión infernal”,
“Terroríficamente muertos”, “Darkman”, “El ejército de las tinieblas”, “Rápida y mortal”, “Un
plan sencillo” y “Premonición” a las fichas que creamos y guardamos dentro de la carpeta
FICHAS.
- Use para ello el comportamiento Abrir ventana del navegador y establezca un ancho de
ventana de 525 y un alto de ventana de 400.
- Dentro de la carpeta raíz Spider-Man, cree una nueva carpeta con el nombre ACTORES y, en
su interior, cree un nuevo documento con el nombre Actores.htm.
- Modifique las propiedades del archivo “Actores.htm” de forma que muestre el título Actores.
- Cambie su color de fondo para que se muestre negro (#000000) y el color del texto indíquelo
blanco (#FFFFFF).
- Configure los campos de edición Margen derecho y Margen inferior con el valor 0.
- Asigne un valor de 18 en el campo de edición Margen izquierdo y un valor de 10, en el campo
de edición Margen superior.
- Inserte una tabla formada por 1 columna y 1 fila con un ancho de tabla de 50 y un grosor del
borde de 0.
- Mediante el panel Propiedades, modifique sus dimensiones indicando un ancho de 450 y un
alto de 375.
- En los campos de edición Relleno celda y Espacio celda, introduzca 0.
- Divida la tabla en dos filas y, en la celda superior, inserte la imagen “actores-titulo.jpg” que
se adjunta con la práctica. Guárdela en la carpeta IMAGES.
imagen.
- En la celda inferior, inserte la imagen “actores.jpg” que se adjunta en la práctica. Guárdela en
la carpeta IMAGES.
- Con la imagen “actores.jpg” seleccionada, cree un mapa de imagen con el nombre Fotos.
Deberá crear seis zonas interactivas alrededor de cada uno de los actores.
- Cree una capa de forma rectangular dentro de la imagen “actores.jpg”.
109
- Modifique las dimensiones de la capa indicando 240 de ancho y 250 de alto. Como ID de
capa, especifique Actores.
- Inserte en el interior de la capa una tabla con 6 filas con un grosor del borde de 0.
- Modifique sus dimensiones indicando 240 de ancho y 250 de alto. En los campos Relleno
celda y Espacio celda, marque 0.
- En la primera celda, teclee el texto TOBEY MAGUIRE y cambie el formato de fuente por el
conjunto de fuentes que creamos durante la práctica tercera: 1979, Verdana, Arial Narrow.
- En la segunda celda, aplique una alineación a la derecha y teclee KIRSTEN DUNST. Cámbiele
el formato por el conjunto de fuentes: 1979, Verdana, Arial Narrow.
- En la tercera celda, teclee WILLEM DAFOE. Cámbiele el formato por el conjunto de fuentes:
1979, Verdana, Arial Narrow.
- En la cuarta celda, aplique una alineación a la derecha y teclee JAMES FRANCO. Cámbiele el
formato por el conjunto de fuentes: 1979, Verdana, Arial Narrow.
- En la quinta celda, teclee ROSEMARY HARRIS. Cámbiele el formato por el conjunto de
fuentes: 1979, Verdana, Arial Narrow.
- En la sexta celda, aplique una alineación a la derecha y teclee CLIFF ROBERTSON. Cámbiele el
formato por el conjunto de fuentes: 1979, Verdana, Arial Narrow.
- A continuación cree una nueva capa en la misma posición que la capa Actores. Nómbrela
como Tobey.
- Inserte en el interior de la capa una tabla formada por 1 columna y 1 fila. Las dimensiones de
la misma serán 240 de ancho y 250 de alto. Indique 0 en los campos Relleno celda y Espacio
celda.
- Divida la tabla en 2 nuevas filas y, en la fila superior teclee PETER PARKER/SPIDERMAN.
Asígnele como formato Arial, tamaño pequeña y el atributo de Negrita.
cursor del ratón cambie a una doble flecha, arrástrela hacia arriba hasta que ésta se ajuste en
la parte superior de la tabla.
- En la segunda celda inserte el texto “tobey.txt” que se adjunta con la práctica. Asígnele como
formato Arial, tamaño pequeña y Justificado.
- Siguiendo este mismo proceso, cree las cinco capas restantes teniendo en cuenta los datos
de la tabla:
 CAPA
 PAPEL
 TEXTO
 Kirsten
 MARY JANE WATSON
 “kirsten.txt”
 Dafoe
 EL DUENDE VERDE
 “dafoe.txt”
 Franco
 HARRY OSBORN
 “franco.txt”
 Rosemary
 AUNT MAY
 “rosemary.txt”
110
 Cliff
 BEN PARKER
 “cliff.txt”
NOTA: Los archivos de texto con la información de cada actor se adjuntan con esta práctica.
- Seleccione la capa Actores, y asígnele el comportamiento Mostrar-Ocultar capas para

conseguir que cuando se cargue la página la capa que se muestre sea Actores.
- Seleccione el área interactiva de cada actor y asigne dos comportamientos a cada una de
ellas, de forma que, al situar el ratón sobre la zona interactiva, se muestre la información del
actor en la zona central y al alejarlo de la zona interactiva se oculte.
- Los atributos que deberá asignar son OnMouseOver y OutMouseOver.
- Vincule el documento “Actores.htm” al botón Actores del documento “Menu.htm”.
- Abra el documento “Trailers.htm”, seleccione la imagen “trailer-mpeg.jpg” y añádale el
comportamiento Abrir ventana del navegador, de forma que al hacer clic sobre la imagen se
abra el trailer “Mpeg.htm”.
- Las dimensiones de la ventana en la que debe reproducirse el trailer debe tener un ancho de
500 y un alto de 285.
- Seguidamente, seleccione la imagen “trailer-quicktime.jpg” y añádale el comportamiento
Abrir ventana del navegador, de forma que al hacer clic sobre la imagen se abra el trailer
“QuickTime.htm”.
- Las dimensiones de la ventana en la que debe reproducirse el trailer debe tener un ancho de
500 y un alto de 340.
- Dentro de la carpeta DOWNLOADS, cree un archivo con el nombre Downloads.htm.
- Modifique las propiedades de la página asignándole el título Downloads.
- Establezca el negro (#000000) como color de fondo.
- Indique el valor 0 para los campos Margen izquierdo, Margen derecho y Margen inferior y el
valor 10 para el Margen superior.
- Inserte en la ventana de documento una tabla formada por 1 fila y 1 columna con un ancho
de tabla de 50 y un grosor del borde de 0.
- Modifique las dimensiones de la tabla desde el panel Propiedades indicando 450 en el campo
An y 375 en el campo Al.
- En los campos de edición Relleno celda y Espacio celda, introduzca 0 para especificar que no
desea relleno ni espaciado.
- Divida la tabla insertada en 2 filas y, en la celda superior, inserte la imagen “downloads-
titulo.jpg” que se adjunta con esta práctica. Guárdela en la carpeta IMAGES.
- En la celda inferior inserte la imagen “downloads.jpg” que se adjunta con la práctica.
- Seleccione la imagen “downloads.jpg” y cree un mapa de imagen con el nombre Downloads.
- Dibuje cuatro zonas interactivas alrededor de cada uno de los textos de la imagen.
- Cree los vínculos de las distintas áreas interactivas utilizando los archivos que se adjuntan
con la práctica: “fuente-spiderman.zip”, “salvapantallas.exe”, “wallpapers.zip” y “fotos.zip”.
- Vincule del documento “Downloads.htm” al botón Downloads del documento “Menu.htm”.
Establezca como destino Casting.
111
- Abra el documento “Info.htm”.
- Añada a la etiqueta <form> el comportamiento Validar formulario.
- Convierta en campos obligatorios Nombre, Apellidos y Dirección.
- Active Número para el campo Año y Dirección de correo electrónico para el campo Correo.
- Acepte y guarde todos los cambios.
Recuerda…
Llamar JavaScript es un comportamiento de Dreamweaver que nos permitirá ejecutar una función
personalizada o línea de código de JavaScript.
La combinación de teclas MAYÚS+F4 nos abrirá el panel Comportamientos de Dreamweaver.
Mensaje emergente es un comportamiento que utilizaremos para mostrar un mensaje de alerta de

JavaScript.
Comprobar navegador es un comportamiento que podremos utilizar en Dreamweaver para

redireccionar a los visitantes a distintas páginas dependiendo de las marcas y versiones de sus
navegadores.
Arrastrar capa es un comportamiento que permitirá a los visitantes de una página Web que
desplacen por la pantalla las capas y todo lo que éstas contengan.
Validar formulario es un comportamiento que nos permitirá comprobar el contenido de los campos
de texto de un formulario para asegurarnos de que se han introducido los datos correctamente.
112
14. COMANDOS DE TECLADO
En este tema, se incluyen unas tablas en las que se exponen las combinaciones de teclas
correspondientes a comandos y herramientas de Macromedia Dreamweaver. El uso del teclado
puede resultar un modo rápido de acceder a cualquier opción disponible en el programa.
14.1. Teclas de función de Dreamweaver
MENÚ ARCHIVO COMBINACIÓN DE TECLAS
Archivo > Nuevo CTRL+N
Archivo > Abrir CTRL+O
Archivo > Abrir en marco CTRL+MAYÚS+O
Archivo > Cerrar CTRL+W
Archivo > Cerrar todos CTRL+MAYÚS+W
Archivo > Guardar CTRL+S
Archivo > Guardar como CTRL+MAYÚS+S
Archivo > Imprimir código CTRL+P
Archivo > Vista previa en el navegador F12
Archivo > Comprobar página > Comprobar vínculos MAYÚS+F8
Archivo > Comprobar página > Validar formato MAYÚS+F6
Archivo > Salir CTRL+Q
MENÚ EDICIÓN COMBINACIÓN DE TECLAS
Edición > Deshacer CTRL+Z
Edición > Rehacer CTRL+Y
Edición > Cortar CTRL+X
Edición > Copiar CTRL+C
Edición > Pegar CTRL+V
Edición > Copiar HTML CTRL+MAYÚS+C
Edición > Pegar con formato CTRL+MAYÚS+V
Edición > Seleccionar todo CTRL+A
Edición > Seleccionar etiqueta padre CTRL+8
Edición > Seleccionar hijo CTRL+9
Edición > Buscar y reemplazar CTRL+F
113
Edición > Buscar siguiente F3
Edición > Ir a línea CTRL+G
Edición > Mostrar sugerencias para el código CTRL+ESPACIO
Edición > Sangrar código CTRL+MAYÚS+7
Edición > Anular sangría de código CTRL+MAYÚS+6
Edición > Equilibrar llaves CTRL+,
Edición > Preferencias CTRL+U
MENÚ VER COMBINACIÓN DE TECLAS
Ver > Alternar vistas CTRL+-
Ver > Actualizar vista de diseño F5
Ver > Contenido de Head CTRL+MAYÚS+H
Ver > Modo de tabla > Modo de tablas expandidas F6
Ver > Modo de tabla > Modo diseño CTRL+F6
Ver > Ayudas visuales > Ocultar todo CTRL+MAYÚS+I
Ver > Reglas > Mostrar CTRL+ALT+R
Ver > Cuadrícula > Mostrar cuadrícula CTRL+ALT+G
Ver > Cuadrícula > Ajustar a cuadrícula CTRL+ALT+MAYÚS+G
Ver > Plug-ins > Reproducir todo CTRL+ALT+MAYÚS+P
Ver > Plug-ins > Detener todo CTRL+ALT+MAYÚS+X
Ver > Ocultar paneles F4
MENÚ INSERTAR COMBINACIÓN DE TECLAS
Insertar > Etiqueta CTRL+E
Insertar > Imagen CTRL+ALT+I
Insertar > Media > Flash CTRL+ALT+F
Insertar > Media > Shockwave CTRL+ALT+D
Insertar > Tabla CTRL+ALT+T
Insertar > Anclaje con nombre CTRL+ALT+A
Insertar > HTML > Caracteres especiales > Salto de línea MAYÚS+RETORNO
Insertar > HTML > Caracteres especiales > Espacio CTRL+MAYÚS+ESPACIO

indivisible
Insertar > Objetos de plantilla > Región editable CTRL+ALT+V
114
MENÚ MODIFICAR COMBINACIÓN DE TECLAS
Modificar > Propiedades de la página CTRL+J
Modificar > Quick Tag Editor CTRL+T
Modificar > Crear vínculo CTRL+L
Modificar > Quitar vínculo CTRL+MAYÚS+L
Modificar > Tabla > Seleccionar tabla CTRL+A
Modificar > Tabla > Combinar celdas CTRL+ALT+M
Modificar > Tabla > Dividir celda CTRL+ALT+S
Modificar > Tabla > Insertar fila CTRL+M
Modificar > Tabla > Insertar columna CTRL+MAYÚS+A
Modificar > Tabla > Eliminar fila CTRL+MAYÚS+M
Modificar > Tabla > Eliminar columna CTRL+MAYÚS+5
Modificar > Tabla > Aumentar el tamaño de columna CTRL+ MAYÚS+9
Modificar > Tabla > Reducir el tamaño de columna CTRL+MAYÚS+8
Modificar > Alinear > Izquierda CTRL+MAYÚS+1
Modificar > Alinear > Derecha CTRL+MAYÚS+3
Modificar > Alinear > Superior CTRL+MAYÚS+4
Modificar > Alinear > Inferior CTRL+MAYÚS+6
Modificar > Alinear > Asignar mismo ancho CTRL+MAYÚS+7
Modificar > Alinear > Asignar mismo alto CTRL+MAYÚS+9
MENÚ TEXTO COMBINACIÓN DE TECLAS
Texto > Sangría CTRL+ALT+9
Texto > Anular sangría CTRL+ALT+8
Texto > Formato de párrafo > Ninguno CTRL+0
Texto > Formato de párrafo > Párrafo CTRL+MAYÚS+P
Texto > Formato de párrafo > Encabezado 1 CTRL+1
Texto > Alinear > Izquierda CTRL+ALT+MAYÚS+L
115
Texto > Alinear > Centro CTRL+ALT+MAYÚS+C
Texto > Alinear > Derecha CTRL+ALT+MAYÚS+R
Texto > Alinear > Justificar CTRL+ALT+MAYÚS+J
Texto > Estilo > Negrita CTRL+B
Texto > Estilo > Cursiva CTRL+I
Texto > Ortografía MAYÚS+F7
MENÚ COMANDOS COMBINACIÓN DE TECLAS
Comandos > Iniciar grabación CTRL+MAYÚS+X
MENÚ SITIO COMBINACIÓN DE TECLAS
Sitio > Obtener CTRL+MAYÚS+D
Sitio > Proteger CTRL+ALT+MAYÚS+D
Sitio > Colocar CTRL+MAYÚS+U
Sitio > Desproteger CTRL+ALT+MAYÚS+U
Sitio > Comprobar vínculos en todo el sitio CTRL+F8
MENÚ VENTANA COMBINACIÓN DE TECLAS
Ventana > Insertar CTRL+F2
Ventana > Propiedades CTRL+F3
Ventana > Estilos CSS MAYÚS+F11
Ventana > Capas F2
Ventana > Comportamientos MAYÚS+F3
Ventana > Fragmentos MAYÚS+F9
Ventana > Referencias MAYÚS+F1
Ventana > Bases de datos CTRL+MAYÚS+F10
Ventana > Vinculaciones CTRL+F10
Ventana > Comportamientos del servidor CTRL+F9
Ventana > Componentes CTRL+F7
Ventana > Archivos F8
Ventana > Activos F11
Ventana > Inspector de etiquetas F9
Ventana > Resultados F7
116
Ventana > Historial MAYÚS+F10
Ventana > Marcos MAYÚS+F2
Ventana > Inspector de código F10
Ventana > Ocultar paneles F4
MENÚ AYUDA COMBINACIÓN DE TECLAS
Ayuda > Utilización de Dreamweaver F1
Ayuda > Utilización de ColdFusión CTRL+F1
Ayuda > Referencia MAYÚS+F1
Resumen General de la Unidad
En Dreamweaver si queremos insertar un carácter que no aparece en el teclado lo hacemos

mediante el grupo Texto de la Barra de herramientas Insertar.
Cuando queramos que el usuario pueda escoger tantas opciones como desee utilizaremos las casillas
de verificación en un formulario.
La opción Bordes de marco situado en la categoría Ayudas visuales del menú Ver deberemos activar
para poder visualizar los marcos de la ventana de documento de Dreamweaver.
La función de la Biblioteca es almacenar aquellos elementos de una página que solemos reutilizar o
actualizar con más frecuencia en un sitio Web.
No se pueden combinar celdas adyacentes que no se encuentran contiguas.
Para crear una región editable en una plantilla se utiliza la opción Nueva región editable en el
submenú Plantillas del menú contextual.
Si al colocar una capa, no queremos que aparezca una marca en la ventana de documento, se
desactiva la opción Elementos invisibles de la categoría Ayudas visuales en el menú Ver.
El formato de vídeo Divx no es soportado por Dreamweaver.
La opción Permitir desproteger y proteger archivo deberemos marcar para activar el sistema de
protección de páginas de Dreamweaver.
La Categoría Común de la Barra de herramientas Insertar nos permitirá crear un vínculo de correo
electrónico.
117

Dreamweaver PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Dreamweaver PDF

Cargado por

Copyright:

Formatos disponibles

TEMA 4.

INDICE DE CONTENIDO TEMA 4. MACROMEDIA DREAMWEAVER 8

1. CONOCIENDO MACROMEDIA DREAMWEAVER 8

1.1 Introducción a Macromedia Dreamweaver 8

2. CREACIÓN DE SITIOS Y PÁGINAS WEB

3. TRABAJO CON TEXTO

7. TRABAJAR CON CAPAS

14. COMANDOS DE TECLADO

1. CONOCIENDO MACROMEDIA DREAMWEAVER 8

Antes de comenzar a utilizar Dreamweaver y para sacar el máximo rendimiento al programa,

1.1. Introducción a Macromedia Dreamweaver 8

Macromedia Dreamweaver es un editor de etiquetas o código HTML profesional para el desarrollo

1.2. Requisitos mínimos necesarios

Para la instalación de este programa y su correcto funcionamiento, se requieren una serie de

 Procesador Intel Pentium III o compatible con un mínimo de 800 MHz.

1.3. Entrar en Macromedia Dreamweaver 8

Posee varias formas para acceder al programa:

1. Desde el menú de inicio “Todos los programas” entrar en el directorio Macromedia y

1.4. Entorno de trabajo

1.5. Barra de herramientas Insertar

La Barra de herramientas Insertar contiene los elementos más utilizados

Dentro de la Barra de herramientas Insertar, veremos ocho categorías de

 Elementos Flash: Permite insertar elementos de Macromedia Flash.

1.6. Ventana de documento

En la parte superior de la ventana de documento

Dreamweaver le permite trabajar en su documento

1.7. Barra de herramientas Documento

 Mostrar vistas de Código y Diseño: Nos muestra, en la ventana de documento una

 Mostrar vista de Diseño: Es la vista en la que se muestra por defecto la ventana de

 No hay errores de comprobación de navegador: Comprueba la compatibilidad con

 Validar formato: Valida el documento actual o una etiqueta seleccionada.

 Vista previa/Depurar en explorador: Este menú emergente nos permitirá previsualizar el

1.8. Panel Propiedades

El panel Propiedades de Macromedia Dreamweaver es probablemente la herramienta usada con más

1.9. Edición de métodos abreviados de teclado

La mayoría de los programas ofrecen al usuario unos métodos abreviados de teclado

 Añadir un método abreviado a un comando: Enlace vídeo:

 Redefinir un método abreviado existente: Enlace vídeo:

 Eliminar un método abreviado de un comando: Enlace vídeo:

1.10. Panel Activos

Observe en él que podemos trabajar con las siguientes categorías:

 Imágenes: Son archivos de imagen en formato .gif, .jpeg o .png. 

1.11. Trabajar con el panel Activos

En la barra de menú seleccionamos Archivo  Abrir y cargamos un fichero HTML.

Posteriormente seleccionamos en la barra de menú Ventana y el panel Activos. Y actualizamos la

1.12. Panel Historial

1.13. Práctica simulada: Entrar en Macromedia Dreamweaver

1.14. Práctica simulada: Localizar áreas del entorno de trabajo

Barra de Herramienta. Documento.

1.15. Práctica simulada: Configurar la ventana de documento

Configure un nuevo valor personalizado para establecer las dimensiones de la ventana de

1.16. Práctica: Diseño Web parte I

- Entre en la aplicación y cree un nuevo documento HTML.

- Actualizar vista de diseño.

- Mostrar vista de Código.

- Mostrar vista de Diseño.

La opción Tamaño de ventana la utilizaremos para aplicar un tamaño estándar a la ventana de

La localización de la Barra de título en el entorno de trabajo de Dreamweaver nos situaremos en la

La categoría capas no está disponible en la Barra de herramientas Insertar de forma predeterminada.

2. CREACIÓN DE SITIOS Y PÁGINAS WEB

Macromedia Dreamweaver es una herramienta de creación y administración de sitios, por lo que

2.1. Planificación de un sitio Web

2.2. Configurar un sitio Web