Dreamweaver CS5

16
TEMA 5. ADOBE
DREAMWEAVER CS5
José M. Castillo Castillo.

ADOBE DREAMWEAVER CS5
1
INDICE CONTENIDO TEMA 5. ADOBE DREAMWEAVER CS5
1. CONOCIENDO ADOBE DREAMWEAVER CS5
1.1 Introducción a adobe dreamweaver
1.2 Novedades de dreamweaver cs5
1.3 Requerimientos técnicos
1.4 Editar páginas web
1.5 Cómo tener una página en internet
1.6 Ejecución de adobe dreamweaver
1.7 Entorno de trabajo
1.8 El panel insertar
1.9 Ventana de documento
1.10 Barra de herramientas documento
1.11 Panel propiedades
1.12 Edición de métodos abreviados de teclado
1.13 Panel activo
1.14 Panel historial
1.15 Práctica - mi primera página
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 Crear abrir y guardar documentos
2.8 Configurar las propiedades del documento
2.9 Guías visuales
2.10 Insertar palabras clave y descripciones
2.11 Previsualizar un documento
2.12 Práctica - diseño web parte ii
3. TRABAJO CON TEXTO
3.1 Creación y colocación de textos
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
3.11 Insertar caracteres especiales
3.12 Insertar reglas horizontales
3.13 Creación de estilos css
3.14 Buscar y reemplazar texto

2
4. ESTILOS CSS
4.1 Hojas de estilos en cascada
4.2 Estilos css
4.3 Crear un estilo personalizado
4.4 Definir un estilo css
4.5 Aplicar un estilo
4.6 Exportar estilos
4.7 Vincular una hoja de estilos
5. IMÁGENES
5.1 Formatos de gráficos web
5.2 Colocación de imágenes
5.3 Editar imágenes
5.4 Cambiar el tamaño de las imágenes
5.5 Uso de la etiqueta alt
5.6 Alineación de imágenes con texto
5.7 Insertar bordes
5.8 Insertar imágenes de sustitución
5.9 Práctica - diseño web parte iii
6. CREACIÓN DE MARCOS
6.1 Utilización de marcos
6.2 Creación de marcos y conjuntos de marcos
6.3 Crear un conjunto de marcos anidado
6.4 Modificar el tamaño de los marcos
6.5 Modificar los bordes de un conjunto de marcos
6.6 Utilización del panel marcos
6.7 Abrir una página web en un marco
6.8 Añadir barras de desplazamiento
6.9 Destinar la información de un vínculo
6.10 Guardar archivos de marcos y conjuntos de marcos
6.11 Práctica - diseño web parte iv
7. CREACIÓN DE TABLAS
7.1 Utilización de tablas
7.2 Creación de tablas en la ventana de documento
7.3 Modificación de tablas
7.4 Selección de elementos de una tabla
7.5 Alineación del contenido de una celda
7.6 Dividir y combinar celdas
7.7 Anidar tablas
7.8 Ordenar tablas
7.9 Práctica - diseño web parte v

3
8. TRABAJAR CON CAPAS
8.1 Aparición de las capas
8.2 Creación de capas
8.3 Configurar las características por defecto de una capa
8.4 Panel elementos pa
8.5 Modificación de capas
8.6 Ajustar la alineación de las capas
8.7 Creación de una capa de carga
9. VÍNCULOS WEB
9.1 Localización y rutas de documentos
9.2 Crear vínculos
9.3 Crear vínculos desde el panel propiedades
9.4 Navegar usando anclajes
9.5 Selección del destino de los vínculos
9.6 Crear un vínculo de correo electrónico
9.7 Creación de mapas de imagen
9.8 Creación de menús de salto
9.9 Comprobación de vínculos rotos
9.10 Práctica - diseño web parte vi
10. FORMULARIOS INTERACTIVOS
10.1 Funcionamiento de los formularios
10.2 Objetos de formulario
10.3 Insertar un formulario en dreamweaver
10.4 Creación de campos de texto
10.5 Creación de campos de texto ocultos
10.6 Insertar casillas de verificación
10.7 Grupo de casillas de verificación
10.8 Insertar botones de opción
10.9 Creación de menús desplegables
10.10 Creación de listas
10.11 Creación de botones para activar el formulario
10.12 Insertar campo de archivo
10.13 Práctica - diseño web parte vii
11. BIBLIOTECA
11.1 Almacenamiento de elementos en dreamweaver
11.2 La paleta activos
11.3 Visualizar los elementos de un documento
11.4 Insertar un elemento de biblioteca
11.5 Modificar elementos de biblioteca
12. PLANTILLAS
12.1 Creación de plantillas
12.2 Configurar las propiedades de una plantilla
12.3 Definición de regiones editables en una plantilla
12.4 Bloquear una región editable
12.5 Creación de documentos basados en plantillas
12.6 Práctica - diseño web parte viii

4
13. ELEMENTOS MULTIMEDIA
13.1 Vídeo en la red
13.2 Vincular vídeos en dreamweaver
13.3 Reproducción de vídeos on line
13.4 Atributos de quicktime
13.5 Insertar real vídeo en un documento html
13.6 Inserción de archivos flv
13.7 Películas flash
13.8 Sonido
13.9 Práctica - diseño web parte ix
14. COMPORTAMIENTOS
14.1 Panel comportamientos
14.2 Añadir un comportamiento
14.3 Llamar javascript
14.4 Cambiar propiedad
14.5 Comprobar plug-in
14.6 Mensaje emergente
14.7 Arrastrar capa
14.8 Ir a url
14.9 Abrir ventana del navegador
14.10 Carga previa de imágenes
14.11 Mostrar ocultar elementos
14.12 Intercambiar imagen
14.13 Validar formulario
14.14 Práctica - diseño web parte x
15. DISEÑO WEB CON SPRY
15.1 Los widgets de spry
15.2 Widget de acordeón
15.3 Widget de barra de menús
15.4 Widget de paneles que pueden contraerse
15.5 Widget de paneles en fichas
15.6 Widget de grupo de opciones
15.7 Widget de campo de texto
15.8 Widget de área de texto
15.9 Widget de selección
15.10 Widget de contraseña de validación
15.11 Efectos de spry
16. COMANDO DE TECLADO
16.1 Teclas de función de dreamweaver
16.2 Cuestionario: cuestionario final

5
1. CONOCIENDO ADOBE DREAMWEAVER CS5
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 Adobe Dreamweaver CS5
Adobe Dreamweaver es un editor de 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 (como era en su día 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. Aprenderemos a crear tablas, editar marcos,
trabajar con capas, insertar comportamientos de JavaScript, etc.., de una forma muy sencilla y visual.
Dreamweaver nos permitirá crear sitios Web de una forma visual, utilizando la interfaz gráfica de
fácil manejo del programa, que además incluye un software de cliente FTP completo, que permite
entre otras cosas trabajar con mapas visuales de los sitios Web, actualizando el sitio en el servidor sin
salir del programa al mismo tiempo que vamos realizando los cambios.
1.2. Novedades de Dreamweaver CS5
Un punto fuerte de Dreamweaver es que va dirigida a gente sin conocimientos de programación y
que solo a través de sus herramientas, una persona sea capaz de crear sitios potentes, con muchos
efectos y funcionalidades, solo usando productos de Adobe. Entre nuevas funcionalidades cabe
destacar las nuevas sugerencias de código personalizada o la integración de CMS (Wordpress, Drupal,
Joomla...) en el programa, puedes visualizar y editar al mismo tiempo estos CMS sin necesidad de
instalar Apache.

6
Desde el lanzamiento de Adobe Creative Suite CS5, se habla mucho sobre los nuevos Live CS
(servicios en línea de Adobe), uno de los programas que más se va a beneficiar de esto es
precisamente Dreamweaver CS5.
Uno de estos servicios es el ADOBE BROWSERLAB que permite realizar pruebas de compatibilidad
con visión múltiple, una funcionalidad que nos permite comparar cómo se ve una misma página web
en las distintas versiones de navegadores, bajo los sistemas operativos de Windows o Mac OS, se
colocan una sobre la otra, como si se tratase de papel cebolla, fácilmente podrás ver los cambios que
se producen al paso de un navegador a otro.
También Adobe quiere acercar este producto a las empresas, de tal forma que puedan montar sus
negocios a través de Internet de forma rápida, profesional, eficiente y ajustada a sus necesidades, es
por eso que montaron otro Live CS llamado Adobe Business Catalyst (disponible por separado y solo
en inglés), una extensión que permite crear una plataforma de trabajo que sin necesidad de
programación y en poco tiempo se puede crear un verdadero sitio.
Desde mi punto de vista, este enfoque de Adobe es novedoso y puede resultar muy efectivo para
crear portales sencillos, pero para trabajos más complejos, necesitas contratar a profesionales, la
tecnología de Adobe no puede equipararse al trabajo de un programador, maquetador, diseñador, y
desarrollador Web. Aun así, creo que satisfarán las necesidades de los profesionales y permitirá que
gente novata, pueda crear su propia web moviendo su ratón.
1.3. Requerimientos técnicos para Adobe Dreamweaver CS5
Para la instalación de este programa y su correcto funcionamiento, harán falta una serie de
condiciones y requerimientos mínimos para el PC en el que vayamos a trabajar:
 Procesador Intel® Pentium® 4 o AMD Athlon® de 64 bits.
 Microsoft® Windows® XP con Service Pack 2 (aunque se recomienda Service Pack 3),
Windows Vista® con Service Pack 1 o Windows 7.
 512 MB de memoria RAM (se recomienda 1 GB).
 1 GB de espacio disponible en el disco duro para la instalación; se necesita espacio libre
adicional durante el proceso de instalación (no se puede instalar en dispositivos de
almacenamiento extraíbles basados en flash).
 Resolución de 1024 x 768 (se recomienda 1280 x 800) con tarjeta de vídeo de 16 bits.
 Ratón compatible con Windows.
 Unidad de DVD-ROM (sólo necesaria para la instalación del programa).
 Se requiere conexión a Internet de banda ancha para los servicios en línea y para validar la
suscripción a la edición (si corresponde) de manera continuada.

7
1.4. Editar páginas Web
Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear los
documentos con la extensión HTML o HTM, e incluir como contenido del documento el código HTML
deseado. Puede utilizarse incluso el Bloc de notas de Windows para hacerlo.
Pero crear páginas web mediante el código HTML es más costoso que hacerlo utilizando un editor
gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno de los elementos de la
página, al mismo tiempo que es más complicado crear una apariencia profesional para la página,
sobre todo si no estamos demasiado familiarizados con el HTML. Aunque también es cierto que
escribir el código nos da más control sobre él, y sobre todo al principio, nos ayudará a aprenderlo
rápidamente.
Hoy en día existe una amplia gama de editores de páginas Web. Uno de los más utilizados, y que
destaca por su sencillez y por las numerosas funciones que incluye, es Adobe Dreamweaver.
Además de Dreamweaver, existen otra serie de buenos editores de páginas Web, como pueden ser
Microsoft Expresion Web, Amaya, Bluefish, NVU, KompoZer o Quanta Plus. Algunos de los cuales
tienen la ventaja de ser gratuitos.
1.5. Cómo tener una página en Internet
Para poder poner una página Web en Internet, es necesario contratar a alguna empresa con
servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del día. El precio por
disponer de espacio propio en el servidor dependerá de la empresa, del espacio en disco, volumen
de transferencia y otras opciones que podamos contratar.
Hay empresas que ofrecen este servicio gratuitamente,
pero con ciertas limitaciones: poco espacio de disco,
lentitud y nombre de nuestra página precedido por el de la
suya. Hay que tener también en cuenta que estas empresas
deben generar ingresos de alguna forma, por lo que se
dedican a vender espacios publicitarios dentro de nuestras
páginas, publicidad que no podremos negarnos a incluir en
ellas. Por estos motivos, no se recomienda utilizar
hospedaje gratuito para la página de una empresa, aunque
sí es aceptable para una página personal, sobre todo al
comienzo.

8
Cuando se va a contratar un servicio de almacenamiento es necesario contratar también un dominio,
tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un dominio consiste en
registrar un nombre para nuestra página. Este nombre no puede estar repetido en Internet, ha de ser
único, al igual que ocurre con los nombres de las empresas. Es posible registrar un mismo nombre
con distintas terminaciones, como por ejemplo, “.net”, “.org”, “.es” o “.com”.
Es importante que para trabajar con los archivos de Dreamweaver no utilice caracteres especiales
como acentos o eñes, ni espacios en blanco en los nombres de archivos o carpetas. De esta forma te
asegurarás de que el servidor puede reconocer sin ningún tipo de problemas los nombres de los
archivos que alojes en él.
Para evitar errores de enlaces rotos o imágenes que no se muestran intenta escribir, también, los
nombres en minúscula. Algunos servidores (los que utilizan Linux) distinguen entre mayúsculas y
minúsculas. Evitarás horas perdidas buscando fallos.
1.6. Ejecución de Adobe Dreamweaver CS5
Una vez instalado Adobe Dreamweaver CS5, iniciar el programa será tan fácil como ejecutar
cualquier otro programa de Windows.
Para iniciar Adobe Dreamweaver CS5 en Windows 7 existen las siguientes formas de ejecutarlo:
 Acceder desde el botón inicio de Windows  Todos los Programas y acceder a la
carpeta Adobe Master Colletion CS5 y pulsar DreamweaverCS5.
 Otra forma de acceder al programa Adobe Dreamweaver CS5 es mediante un acceso
directo creado en el escritorio de nuestro PC.
 O bien, mediante la ejecución un fichero creado en Adobe Dreamweaver CS5 con
formato Dreamweaver.
Enlace vídeo: Ejecución de Adobe Dreamweaver CS5.

9
1.7. Entorno de trabajo
Una vez abrimos Dreamweaver por primera vez, nos encontraremos con el entorno de trabajo del
programa (observe la imagen). Este entorno puede adaptarse a distintas formas de trabajar
dependiendo de la configuración que establezcamos antes de salir del programa.
La barra de aplicación
Esta barra se incorporó en la versión anterior de Dreamweaver. Si tenemos la ventana maximizada
veremos todos los elementos de la barra ocupando una sola línea, si no, ocuparán dos líneas, como
en la imagen inferior. Esta barra contiene los siguientes elementos: los menús (en la imagen, en la
parte inferior), varios botones propios de la aplicación, el conmutador de espacio de trabajo y una
caja de búsquedas para obtener ayuda On line.
La pestaña de documento
Cada archivo que tengamos abierto, mostrará una pestaña con su nombre, lo que nos permitirá
cambiar de uno a otro fácilmente. Si junto al nombre aparece un *, indica que ese archivo tiene
cambios sin guardar. Podemos cerrar cada documento haciendo clic directamente sobre el aspa de la
derecha, o acceder a otras acciones haciendo clic con el botón derecho.

10
La barra de herramientas de documento
Esta barra contiene iconos que nos permiten cambiar entre las distintas vistas de edición y la vista en
vivo, acceder cómodamente al título de la página, o realizar las distintas opciones de validación que
nos ofrece el programa.
La barra de navegación con navegador
Esta barra nos permite usar Dreamweaver como un navegador web y navegar por las páginas de
nuestro sitio, aunque sólo tiene sentido con la Vista en vivo, como ya veremos. Como también
veremos al personalizar el entorno, algunos paneles, como Insertar nos permiten colocarlo como
otra barra de herramientas.
Grupo paneles
Se agrupan en el margen derecho del programa y, si pulsa sobre el nombre de uno de ellos, se
desplegará mostrándose como el panel activo.
La barra de estado
Esta barra la encontramos debajo de la ventana de documento, y nos da información sobre el mismo.
A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas completas.
Siguiendo hacia la derecha encontramos las herramientas de Selección, Mano (para desplazarse) y
Zoom. Y otros datos como el tamaño de la ventana, el tamaño de la página o su codificación.

11
El inspector de propiedades
Muestra las opciones propias del objeto o texto seleccionado, permitiéndonos editarlas, por lo que
se convierte en uno de los elementos más utilizados en Dreamweaver. Este panel puede mostrar dos
tipos de propiedades, HTML y CSS, que podemos aplicar a los diferentes elementos de la página Web
que estemos diseñando.
Ventana documento
Es el área principal de trabajo. Muestra el documento actual mientras lo está creando y editando.
1.8. El panel Insertar
El panel Insertar contiene los elementos más utilizados para el diseño de páginas Web. En ella,
seleccionaremos desde imágenes a plugins Actives e incluso comentarios HTML. Además,
personalizaremos este panel 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, Datos, Spry, InContext Editing, Texto y Favoritos.
Como vemos en las imágenes, es posible configurar este panel para verlo como menú, como panel
flotante o como una barra de herramientas integrada en la ventana de trabajo.

12
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 dos vistas de
tablas: Estándar o Ampliada.
Formularios
Ofrece comandos con los que crearemos formularios e insertaremos los elementos que los
componen.
Datos
Permite insertar objetos de datos de Spry y otros elementos dinámicos, como juegos de registros,
regiones repetidas y grabar formularios de inserción y actualización.

13
Spry
Contiene botones para crear páginas de Spry, incluidos objetos de datos y widgets de Spry.
InContext Editing
Contiene botones para la creación de páginas de InContext Editing, incluidos botones para Regiones
editables, Regiones repetidas y la administración de clases CSS.
Texto
Contiene caracteres especiales como los símbolos de copyright, comillas curvas, marca registrada,
etc.
Favoritos
Utilice esta categoría para agrupar y organizar los botones de la Barra de herramientas Insertar que
utiliza con más frecuencia.

14
1.9. 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.
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 descarga, 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: Ventana de documento.
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.
Para disponer de otro tipo de tamaño o dimensionamiento de la ventana del documento pulse la
opción Editar tamaños e introduzca un nuevo tamaño, alto y ancho, y a continuación clic en aceptar
y aparecerá la nueva dimensión en la ventana del programa Tamaño ventana.

15
1.10. 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: os 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.
 Código en vivo: La Vista en vivo se diferencia de la vista de diseño tradicional de
Dreamweaver en que ofrece una representación no editable más realista de la
apariencia que tendrá la página en un navegador.
 Comprobar compatibilidad con navegador: Comprueba la compatibilidad con
diferentes navegadores.
 Vista previa/Depurar en navegador: 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.
 Ayudas visuales: Nos proponen ciertas opciones que nos ayudarán en el diseño de
nuestras páginas.
 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.
 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.
 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.

16
1.11. Panel Propiedades
El panel Propiedades de Adobe 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 o en
su defecto la combinación de teclas CTRL+F3.
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á contraer el panel ocultando los atributos menos comunes de un objeto haciendo un doble clic
en cualquier área vacía del panel.

17
1.12. 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.
Para ello, vaya al menú principal a Edición y seguidamente pulse Métodos abreviados de teclado,
entrará en un cuadro de diálogo que permitirá añadir, redefinir y eliminar un método abreviado que
hayamos definidos.
Para añadir una nueva combinación de teclas, habrá que duplicar una existente del conjunto actual y
cambiarle el nombre. Seleccione el comando que desea se le aplique una teclas abreviadas y pulse el
botón de (+) para añadir nuevo método abreviado, seguidamente introduzca, por ejemplo, las teclas
combinadas Ctrol+8, y si no se encuentra repetida Dreamweaver la acepta y se queda activada para
ese conjunto actual creado. Para eliminar un método abreviado utilice el botón (-) sobre el método
de teclas seleccionado y se eliminará del conjunto actual.
Enlace vídeo: 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.

18
1.13. Panel Activos
El panel Activos es una de las herramientas de Adobe 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.
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 Adobe.
 Películas: Son archivos de películas en el formato QuickTime o MPEG.

19
 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.
 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.
 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.
NOTA: Al arrastrar la imagen puede que el programa le pregunte si desea añadir una etiqueta a la
imagen que va a colocar. Cancele esta opción en cada imagen presionando el botón Cancelar, o
bien elimínela siempre que inserte una imagen pulsando el enlace cambie las preferencias de
Accesibilidad que le muestra el cuadro y desactivando la casilla de verificación Imágenes del
cuadro Preferencias. A lo largo de esta explicación, hemos visto una forma rápida de administrar
el contenido de un sitio. Para previsualizar el resultado de los cambios realizados, guarde los
cambios mediante la opción Guardar del menú Archivo y pulse la tecla F12
Para acceder al Panel activos, tiene que existir una carpeta de sitio local para establecer el
nuevo sitio. En el menú principal Sitio pulsamos en Administrar Sitios y un nuevo cuadro de
diálogo nos muestra los nombres de los sitios que tenemos configurados en Dreamweaver. En
este caso, solamente con seleccionar uno de ellos y pulsar LISTO se activa ese panel.
Para añadir un nuevo sitio tenemos que pulsar el botón Nuevo Sitio, por lo que nos aparece un
cuadro de diálogo que nos permite añadir el nombre del nuevo sitio y la carpeta del sitio local
donde se encuentran los archivos y carpetas. Una vez que hayamos introducido estos datos
pulsamos en Guardar y aparecerá nuestro nuevo sitio en el Administrador sitios, lo
seleccionamos y pulsamos LISTO.

20
Posteriormente, aparecerá una ventana con todas las carpetas y archivos que pertenecen a ese
sitio activo.
Enlace vídeo: Trabajar con el Panel Activos.

21
1.14. 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.
Enlace vídeo: Utilizar el panel Historial.
Acceda al menú principal Ventana y pulse Historial o Mayus+F10 y nos muestra una ventana con
todos los pasos guardados que hemos dado durante el diseño de la página.
Enlace vídeo: Configurar el panel Historial.

22
1.15. Practica: Mi primera página
Para que te vayas haciendo una idea de cómo funciona Dreamweaver, vamos a crear una página web
sencilla, con varios estilos de texto, una imagen y un enlace a otra página. Crear esta página solo te
llevará unos pocos minutos, y sabrás cómo trabajar con los elementos básicos con los que están
hechas la mayoría de las páginas web. Si nunca has hecho una página web, este es el momento para
descubrir lo fácil que es.
1.16. Practica: 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.
Recuerda…
La Barra de Estado nos permite informarnos sobre las dimensiones actuales de la ventana de
documento.
La función principal del Panel propiedades nos permitirá examinar y editar las propiedades del
elemento seleccionado en el documento actual.
La opción Tamaño de Ventana la utilizaremos para aplicar un tamaño estándar a la ventana de
documento.
Para localizar la Barra de título en el entorno de trabajo de Dreamweaver nos vamos a la parte
superior de la pantalla mostrando el nombre del documento abierto.
Insertar presenta 8 categorías de forma predetermina estas son: Diseño, Formularios, Común, Texto,
HTML,
La función principal de Panel Activos es administrar de forma rápida todos los archivos de nuestro
sitio web.
La memoria RAM necesaria para la correcta instalación de Dreamweaver es de 512 MB,
recomendada de 1 GB.
El espacio que debemos disponer para instalar la aplicación en el disco duro del PC es de 1 GB.
Las operaciones que están dispuestas en la Barra de Herramientas Documento son: actividades vista
de diseño, mostrar vista de código y mostrar vista de Diseño.
Utilizando el acceso directo creado en el escritorio de nuestro PC, se podrá ejecutar el programa
Dreamweaver.

23
2. CREACIÓN DE SITIOS Y PÁGINAS WEB
Adobe 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.
Para que te vayas haciendo una idea de cómo funciona Dreamweaver, vamos a crear una página web
sencilla, con varios estilos de texto, una imagen y un enlace a otra página. Crear esta página solo te
llevará unos pocos minutos, y sabrás cómo trabajar con los elementos básicos con los que están
hechas la mayoría de las páginas web. Si nunca has hecho una página web, este es el momento para
descubrir lo fácil que es.
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.

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

25
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.
A lo largo de la siguiente explicación, aprenderemos a establecer este sitio local en Dreamweaver, lo
que significa que podremos utilizar Dreamweaver con FTP para gestionar meticulosamente, tanto su
copia local (PC) como la remota (Servidor), reduciendo al máximo su mantenimiento.
Para configurar un sitio web lo primero que debemos hacer en Dreamweaver es crear nuestro sitio,
para ello, seleccionamos en el menú principal la opción Sitio y pulsamos Nuevo Sitio. Con esta
opción nos aparece un cuadro de diálogo para introducir la información correspondiente al nombre
del sitio y la carpeta donde se ubica los archivos y carpetas de nuestra página web.
Si pulsamos en la configuración avanzada que se encuentra en la barra de opciones de la izquierda,
nos permite introducir la carpeta predeterminada de imágenes, archivos de consulta de medios para
todo el sitio y la URL o dirección de la web donde está ubicada nuestra página. En este caso se puede
omitir. Recomendable que este la opción de Caché activada para agilizar el proceso de trabajo de la
página web.
Enlace vídeo: Configurar un sitio Web.

26
2.3. Editar un sitio Web existente
En este nuevo apartado, veremos cómo modificar un sitio Web que ya tengamos configurado.
En esta ocasión seleccionamos en el menú principal la opción Sitio y pulsamos Administrar Sitios, en
el cuadro de dialogo que aparece seleccionamos el sitio y pulsamos Listo.
Enlace vídeo: Editar un sitio Web existente.
Seguidamente nos aparece en una ventana con los archivos locales del sitio en concreto. En el caso
de querer eliminar un sitio seleccionamos el sitio y pulsamos el botón (-) situado a la izquierda de la
ventana de Administrar sitios. Dreamweaver solicitará la confirmación de la eliminación pues
desaparecerá definitivamente del programa.
Enlace vídeo: Eliminar un sitio Web existente.

27
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.
1. Despliegue el menú Sitio y seleccione la opción Administrar sitios.
2. Seleccione un sitio existente en la lista del cuadro con el mismo nombre y haga clic en
el botón Editar. Se abre el cuadro de diálogo Configuración del sitio.
3. Seleccione la categoría Servidores en el cuadro de diálogo.
4. Seleccione un servidor existente y haga clic en el botón Editar servidor existente.
5. Haga clic en el botón Avanzadas en la parte superior.
6. Active la casilla Activar protección del sitio. Al activar esta opción, de forma
automática, aparece la casilla Proteger archivos al abrir activada justo debajo.
7. Introduzca un nombre de protección en el campo de edición correspondiente.
8. A continuación, introduzca una dirección de correo electrónico.
9. Para finalizar, pulse el botón Aceptar.
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.

28
Para mostrar el panel Archivos y explicar sus comandos más usados:
1. En primer lugar, despliegue el menú Ventana de la Barra de menús y seleccione la
orden Archivos de su lista de opciones.
2. El panel se mostrará en el margen derecho del programa, junto al resto de paneles ya
visibles.
3. Localice en su Barra de herramientas Expandir para mostrar sitios locales y remotos y
presiónelo para ver todas sus opciones.
4. El panel se mostrará ocupando toda la pantalla y si centra su atención en los
comandos que muestra, verá el botón Contraer para mostrar sólo el sitio local o
remoto que le devolverá a la visión anterior.
5. El cuadro de lista Mostrar nos permite seleccionar otro sitio en la lista emergente que
aparece al pulsar con el ratón sobre él. Además nos permitirá añadir un sitio o editar
la información de uno ya existente mediante la orden Administrar sitios.
6. La opción Conectar al servidor remoto nos permitirá conectarnos con el servidor
remoto de nuestro sitio Web. De forma predeterminada, Dreamweaver desconectará
del sitio remoto si permanece inactivo durante más de 30 minutos.
7. La opción Actualizar nos permite restablecer las listas de los directorios local y
remoto.

29
8. La opción Archivos del sitio nos muestra la estructura de archivos de los sitios remoto
y local. De forma predeterminada, el sitio remoto aparece en el panel izquierdo,
mientras que los archivos locales se muestran en el derecho.
9. La opción Servidor de prueba nos muestra la estructura de archivos de un servidor de
prueba siempre que esté configurado. Al igual que el comando anterior, el servidor
aparece en el panel izquierdo, mientras que los archivos locales se muestran en el
derecho
10. La opción Archivos de bases de datos muestra la base de datos de Subversion
(SVN).
11. La opción Obtener archivo(s) transfiere una copia de los archivos seleccionados del
sitio remoto al sitio local.
12. La opción Colocar archivo(s) transfiere una copia de los archivos seleccionados desde
el sitio local hasta el sitio remoto.
13. La opción Proteger archivo(s) transfiere una copia del archivo desde el servidor
remoto hasta el sitio local y marca el archivo como protegido en el servidor.
14. La opción Desproteger transfiere una copia de un archivo local al servidor remoto
permitiendo que otros usuarios puedan editarlo.
15. Para finalizar vemos la opción Sincronizar que regulariza los archivos existentes en los
sitios local y remoto.

30
2.6. Configurar las preferencias del panel Archivos
Mediante esta explicación veremos cómo configurar el panel Archivos para que se cubran todas
nuestras necesidades.
1. En el menú Edición seleccione la opción Preferencias. Se abrirá el cuadro de diálogo con el
mismo nombre.
2. En la lista Categoría, seleccione la opción Sitio.
3. Utilice el cuadro de lista Mostrar siempre para especificar qué archivos (locales o remotos)
se mostrarán por defecto y en qué lado (izquierdo o derecho) aparecerán.
4. En el área Archivos dependientes, las opciones Mensaje al obtener/proteger y Mensaje al
colocar/desproteger aparecen activadas de forma predeterminada.
5. En el área Conexión FTP, podremos determinar si se interrumpirá la conexión con el sitio
remoto cuando transcurra el número de minutos que especifiquemos en el campo de
edición.
6. En el área de edición Tiempo de espera FTP, especifique el número de segundos durante los
que Dreamweaver intentará establecer una conexión con el servidor remoto.
7. En el campo editable Host proxy, especifique la dirección del servidor proxy con el que
establecerá la conexión con servidores externos si se encuentra al otro lado de un
cortafuegos.
8. En el área Puerto proxy, especifique el puerto del cortafuego por el cual se establece la
conexión con el servidor remoto.
9. Active Guardar archivos antes de colocar para que los archivos se guarden de forma
automática antes de colocarlos en el sitio remoto.
10. El botón Administrar sitios nos abrirá el cuadro de diálogo con el mismo nombre, en el que
podremos editar un sitio existente o crear uno nuevo.
11. Para finalizar, guarde los cambios realizados pulsando el botón Aceptar.

31
2.7. 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. Adobe Dreamweaver ofrece diversas formas para crear un documento.
Podremos crear documentos HTML nuevos (en blanco); abrir documentos HTML existentes, crear un
nuevo documento basado en una plantilla, etc.
NOTA: Cuando guarde un documento, evite utilizar espacios y caracteres especiales en los nombres
de archivos y carpetas.
Para crea un nuevo documento HTML en blanco nos vamos al menú principal Archivos y pulsamos
Nuevo, con lo que nos aparece una ventana para seleccionar las características de nuestro nuevo
documento, que puede ser:
 Página en blanco
 Plantilla en blanco
 Diseño de cuadricula fluido.
 Página de plantilla
 Página de muestra.
 Otro…
Donde nos permite seleccionar el tipo de página y el diseño.
En nuestro caso seleccionamos Página en blanco HTML y ningún diseño. En tipo de documento
seleccionamos el que está por defecto. En la opción adjuntar archivo CSS, no poner nada, puesto
que sería en el caso de tener un archivo de hoja de estilo ya creado para esta página, entonces sí
habría que adjuntarlo. Seguidamente pulsamos Crear.
Enlace vídeo: Crear un nuevo documento HTML en blanco.

32
Para abrir un archivo HTML existente, vamos al menú principal Archivo y pulsamos Abrir o pulsamos
las teclas Ctrol+O. Nos aparece una ventana de búsqueda que nos permite buscar la dirección local
donde se encuentra nuestro archivo HTML existente.
Enlace vídeo: Abrir un archivo HTML existente.
Para guardar un documento por primera vez tenemos que ir a Archivo y pulsar Guardar o pulsando
las teclas Ctrol+S. Nos aparece una ventana que nos pregunta en que directorio guardarlo y el
nombre y tipo del documento a guardar. Por ejemplo, introducimos el directorio local WEB_1 e
introducimos el nombre Index y el tipo html y pulsamos Guardar.
Enlace vídeo: Guardar un documento por primera vez.

33
2.8. 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.
¡Recuerde! Un asterisco indica que el documento contiene cambios que no se han guardado aún.
Para configurar las propiedades del documento nos vamos al menú principal Modificar y pulsamos la
opción Propiedades de la página, donde aparecen las siguientes categorías:
 Apariencia (CSS)
 Apariencia (HTML)
 Vínculos (CSS)
 Encabezado (CSS)
 Titulo/Codificación
 Imagen de rastreo.
Conforme vamos seleccionando las diferentes categorías va apareciendo a la derecha del cuadro de
diálogo las características a añadir y valores por defecto para cada una de las categorías de la página.
Para introducir el título nos ponemos en la categoría Titulo/Codificación e introducimos el título de
la página. Tipo de documento, codificación o formulario de normas Unicode.
Enlace vídeo: Configuración de propiedades del documento.

34
2.9. 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.
Configuración de Regla
Para visualizar la regla seleccionamos en el menú principal Ver y pulsamos Reglas, en el siguiente
submenú seleccionamos Mostrar. Aparece la regla vertical y horizontal en la venta de trabajo de
Dreamweaver.
Siga los mismos pasos para Restablecer Origen y volver a la posición inicial o si desea cambiar la
unidad de medida en pixel, pulgadas o centímetros.
Enlace vídeo: Configuración de reglas.
Configuración cuadricula
Para configura la cuadricula nos vamos hacia el menú Ver y pulsamos Cuadricula donde aparece un
submenú con tres opciones:
 Mostrar cuadricula
 Ajustar a cuadricula
 Configuración de cuadricula…
Si pulsamos Mostrar cuadricula aparece en la ventana de la página con el fondo cuadriculado, para
cambiar y dimensionar los cuadrados se utiliza la opción Configuración de la cuadricula que nos
permite cambiar el color, espaciado, mostrar el trazado como líneas o puntos.
Enlace vídeo: Configuración de cuadrícula.

35
2.10. 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.
Palabras clave
1. En el menú Insertar, seleccione la opción HTML. Seguidamente, colóquese sobre la opción
Etiquetas Head y, en el submenú que aparece, seleccione la opción Palabras clave. Se abre el
cuadro de diálogo con el mismo nombre.
2. Introduzca las palabras clave, separadas por comas, en el cuadro de edición Palabras
clave.
NOTA: Dado que algunos motores de búsqueda limitan el número de palabras clave o caracteres
que indexan, o bien prescinden de todas las palabras clave si se supera el límite, conviene utilizar
sólo unas pocas palabras clave bien elegidas.
Descripción
1. En el menú Insertar, seleccione la opción HTML. Seguidamente, colóquese sobre la
opción Etiquetas Head y en el submenú que aparece seleccione Descripción. Se abre el
cuadro de diálogo con el mismo nombre.
2. Introduzca el texto descriptivo sobre la Web en el cuadro de edición Descripción.
NOTA: Al igual que ocurría con las palabras clave, algunos motores de búsqueda limitan el número
de caracteres que indexan, por lo que conviene restringir la descripción al menor número de palabras
posible.

36
2.11. 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.
1. 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.
2. Para añadir un nuevo navegador a la lista predeterminada, en el área Navegadores pulse
el botón con forma de signo más (+). Se abre el cuadro de diálogo Añadir navegador.
3. En el campo de edición Nombre, escriba el nombre con el que aparecerá el explorador en
la lista.
4. En el área Aplicación, utilice el botón Examinar para localizar la ruta de acceso al
ejecutable del navegador que desea configurar. Si lo desea, puede introducir
directamente la ruta utilizando el campo de edición.
5. Active, si lo desea, una de las casillas correspondientes al tipo de navegador Navegador
principal o Navegador secundario.
6. Haga clic en Aceptar para añadir así el navegador configurado a la lista.
7. Una vez añadido un navegador a la lista, podrá editarlo o borrarlo con gran facilidad. Para
editarlo lo seleccionamos en la lista y pulsamos el botón Editar. Para borrarlo,
selecciónelo en la lista y pulse el botón con forma de signo menos (-).
8. Haga clic sobre el botón Aceptar cuando haya terminado de realizar las modificaciones
que crea oportunas.
NOTA: Una vez haya añadido uno o varios navegadores a la lista, podrá previsualizar las páginas Web
en dichos navegadores. Para ello, selecciónelo de la lista que aparece al escoger la opción Vista
previa en el navegador del menú Archivo.

37
2.12. 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.
Recuerda…
El cuadro de diálogo Propiedades de la página del menú Modificar nos permitirá configurar una
imagen como fondo.
Deberemos marcar la opción Permitir desproteger y proteger activo para activar el sistema de
protección de páginas de Dreamweaver.
Las siglas FTP significa Protocolo de Transferencia de Archivos.
Cuando aparece un pequeños asterisco (*) junto al nombre de la página en la Barra del título
significa que el documento contiene cambios que no han sido guardados.
Si activamos la categoría Datos locales del cuadro de diálogo Definición del sitio se activa la Caché
mejoraremos la velocidad de las tareas de administración de vínculos y sitios.
Los métodos básicos de distribución de las páginas son:
-Estructura Libre
-Estructura centralizada
-Estructura jerárquica
Para previsualizar un documento HTML en el navegador que tenemos configurado como
predeterminado pulsamos la opción Vista previa en el navegador del menú Archivo.
El tiempo máximo que debe estar desactiva la conexión con el servidor para que Dreamweaver lo
desconecte es de 30 minutos.

38
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. Creación y colocación de textos
Crear y colocar textos en un documento de Dreamweaver es un acto muy sencillo, consiste en ubicar
el cursor sobre la ventana de documento e introducir el texto por medio del teclado, o bien, copiar el
texto desde otra aplicación y pegarlo en el documento de Dreamweaver.
Al colocar el texto en la ventana de documento, por defecto, éste adopta el formato establecido en
la aplicación. Dreamweaver nos proporcionará una gran variedad de herramientas para modificar
dicho formato, permitiéndonos cambiar el tamaño, fuente y color adaptándolo al diseño de nuestra
página.
3.2. 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, 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.

39
Aplicar una etiqueta de encabezado o párrafo a un texto
1. Sitúe el puntero del ratón en el párrafo o seleccione (resaltando) la parte del
texto que desee modificar.
2. En el menú Formato, seleccione la opción Formato de párrafo y en el
submenú que aparece, elija una opción.
3. 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>.
4. Elija Párrafo para aplicar este formato a un bloque de texto. Recuerde que en HTML
se etiqueta como <p>.
5. Seleccione Ninguno para quitar un formato de párrafo.
NOTA: También podrá aplicar etiquetas de párrafo o encabezado a un texto utilizando el cuadro de
lista Formato del panel Propiedades.

40
3.3. 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.
NOTA: También es posible cambiar la fuente de texto usando la opción Fuente del menú Formato y
seleccionando la serie de fuentes que desee en el menú desplegable que aparece.
Primeramente seleccionamos el texto que deseamos modificar, de nuestra página web. Abrimos el
Panel de Propiedades y pulsamos CSS para mostrar los diferentes formatos de textos para aplicar:
Fuentes, Tamaños, Negrita, Cursiva, alineaciones, etc.
Seleccionamos la Fuente que mejor nos convenga aplicar en nuestro documento y seguidamente se
cambiará la fuente del texto.
Enlace vídeo: Asignar fuentes a un texto.

41
3.4. 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.
Primeramente nos vamos al menú Formato y pulsamos Fuente nos aparecerá un submenú y de ello
seleccionamos Editar lista de fuentes. Seguidamente nos aparece una ventana de cuadro de diálogo
para añadir o quitar los formatos de fuentes que viene predeterminado por Dreamweaver.
Con el botón de signo (+) se va añadiendo a la lista de fuentes las Fuentes elegidas provenientes de
las Fuentes disponibles. Con el botón (-) se elimina la fuente seleccionada de las lista de fuentes.
Enlace vídeo: Editar la lista de fuentes de Dreamweaver.
3.5. 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.
Cambiar el color de un rango de texto en Dreamweaver:
1. Seleccione el texto al que desee modificar el color o sitúe el cursor donde quiera que
comience a aplicarse el cambio.
2. En el panel Propiedades realice una de las siguientes acciones:
 Escriba el valor hexadecimal en el cuadro de edición Color del
texto.
 Escriba un nombre de color (en inglés) en el cuadro de edición Color del
texto.

42
 Haga clic en la flecha desplegable de la muestra de color. Según vamos
desplazando el cursor por la paleta de colores, se va visualizando una
muestra del color en la esquina de la paleta junto al valor hexadecimal del
mismo. Realice su elección haciendo clic sobre el color que desee.
Cambiar el color de un rango de texto utilizando el selector de colores de Dreamweaver
1. Seleccione el texto al que desee modificar el color o sitúe el cursor donde quiera que
comience a aplicarse el cambio.
2. En el menú Formato, seleccione la opción Color. Se abre el cuadro de diálogo con el
mismo nombre.
3. Elija uno de los 48 colores estándar usando las muestras de color situadas a la izquierda
del cuadro de diálogo o utilice uno de los siguientes métodos:
 Indique un color moviendo el selector de Matiz/Saturación y el
de Luminosidad.
 Introduzca valores decimales en los campos de edición Rojo, Verde
y Azul o en los cuadros Matiz, Saturación y Luminosidad.
4. Si ha creado un color personalizado, podrá añadirlo a la paleta de colores actual haciendo
clic con el ratón sobre el botón Agregar a los colores personalizados. De este modo,
podremos añadir hasta 16 colores personalizados.
5. Haga clic sobre el botón Aceptar cuando haya finalizado.

43
3.6. 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.
Alinear un párrafo de texto en Dreamweaver
1. Coloque el cursor del ratón en el párrafo que desee alinear.
2. Diríjase al panel Propiedades.
3. Ahora haga clic con el ratón en uno de los cuatro botones de alineación: Alinear a la
izquierda, Alinear al centro, Alinear a la derecha y Justificar.
4. Compruebe los resultados con cada uno de ellos.
NOTA: También es posible alinear un párrafo de texto usando el comando Alinear del menú
Formato, y seleccionando la opción que desee en el menú desplegable que aparece. Los cambios
ofrecidos por la orden Justificar sólo serán apreciables en los párrafos.

44
3.7. 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 Blockquote del panel Propiedades.
Sangrar un párrafo
1. Coloque el cursor de texto en el párrafo que desee sangrar.
2. Haga clic en el botón Blockquote del panel Propiedades.
3. Si observamos el código de la página, podemos observar que se aplica la etiqueta
<blockquote>.
4. Para quitar un sangrado de texto, haga clic en el botón Quitar Blockquote de texto
del panel Propiedades. La etiqueta <blockquote> desaparece.
NOTA: También es posible utilizar las opciones Sangría y Anular sangría del menú Formato para
aplicar sangrías a los párrafos.
3.8. 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.

45
Crear una lista de texto ordenada
1. Coloque el cursor de texto donde desee comenzar la lista ordenada.
2. Si el panel Propiedades no se encontrara abierto, diríjase al menú Ventana y escoja la opción
Propiedades.
3. Haga clic en el botón Lista ordenada del panel. Observe que, se muestra un número 1. en el
sitio donde colocamos el cursor.
4. Escriba el primer elemento de nuestra lista.
5. Pulse INTRO. Ahora, el siguiente número de la lista se sitúa en la siguiente línea junto al
número 2.
6. Repita los pasos anteriores para completar la lista.
7. Para finalizar la lista, pulse la tecla INTRO dos veces.
NOTA: Insertar una lista ordenada desde el menú Formato es muy fácil. Para ello, usaremos el
comando Lista del menú Formato y seleccionaremos Lista ordenada en el menú desplegable que
aparece.
Crear una lista de texto sin ordenar
 Coloque el cursor de texto donde desee comenzar la lista ordenada.
 Haga clic en el botón Lista sin ordenar del panel Propiedades. Observe que aparece un
marcador en el sitio donde colocamos el cursor.
 Escriba el primer elemento de nuestra lista.
 Pulse INTRO. Se muestra otro marcador en la siguiente línea.
 Repita los pasos anteriores para completar la lista.
 Para finalizar la lista, pulse la tecla INTRO dos veces.
NOTA: Insertar una lista con marcadores desde el menú Formato es muy fácil. Para ello, usaremos el
comando Lista del menú Formato y seleccionaremos Lista sin ordenar en el menú desplegable que
aparece.
3.9. 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.

46
Realizar la corrección de un documento de Dreamweaver
1. Como norma general, sitúe el cursor del ratón al principio del documento antes de
ejecutar el corrector. De no hacerlo de este modo, puede que el corrector no
compruebe la totalidad del texto del documento.
2. En el menú Comandos, seleccione la opción Ortografía o si lo prefiere pulse la
combinación de teclas MAYÚS+F7.
3. Al abrirse el cuadro de diálogo con el mismo nombre, Dreamweaver ya ha localizado
el primer error reconocido por el corrector que pueda haber en el texto. Esta palabra
se seleccionará en la ventana de documento y aparecerá en el cuadro de
texto Palabra no encontrada en el diccionario.
4. Si observa con atención, una lista de sugerencias aparecerá en el cuadro con la
primera de ellas marcada e incluida a su vez en el cuadro de edición Cambiar por. Si
Dreamweaver no encontrase ninguna sugerencia, este cuadro permanecería en
blanco.
5. Si hallase la palabra correcta en la lista Sugerencias, selecciónela y haga clic sobre el
botón Cambiar.
6. En caso contrario, escríbala en el campo de edición Cambiar por y pulse el
botón Cambiar.
7. Automáticamente, Dreamweaver nos muestra el siguiente error, para que
continuemos con la corrección.
8. Si un error se repite numerosas veces, podremos realizar todas las correcciones de la
palabra sustituyendo ésta por la que seleccionemos en el
cuadro Sugerencias pulsando el botón Cambiar todas.
9. Si desea ignorar una palabra encontrada por Dreamweaver, pulse Omitir u Omitir
todas para continuar la búsqueda.
10. Al finalizar la búsqueda, aparecerá un mensaje indicándonos que la corrección ha
terminado.
11. Pulse OK para concluir.

47
NOTA: Si no comenzó una corrección ortográfica desde el principio del documento, al llegar al final,
Dreamweaver le preguntará si desea continuar comprobando el resto del documento no corregido.
3.10. 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 introducir la fecha actual en un documento HTML se procede de la siguiente forma:
1. Coloque el cursor en el lugar donde se desea incluir la fecha.
2. Vaya al menú Insertar y pulse Fecha.
3. Seguidamente nos aparece un cuadro de diálogo para cumplimentar el formato de la fecha:
a. Formato de día.
b. Formato de fecha.
c. Formato de hora.
4. Una vez que hayamos dados los parámetros que nos interesa a la fecha pulsamos el botón
Aceptar y nos aparece en el lugar elegido del documento la fecha.
Enlace vídeo: Insertar la fecha actual en un documento.

48
3.11. 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.
Añadir caracteres especiales en un documento de Dreamweaver
1. Coloque el cursor de texto en el lugar donde quiera insertar el carácter especial.
2. Haz clic sobre el menú Insertar y seleccione la opción HTML. En el submenú que aparece
escoja la opción Caracteres especiales para ver el desplegable de la imagen inferior.
3. En la lista que se muestra, haga clic en el carácter especial que desee insertar en el
documento, o bien seleccione la orden Otro… y para acceder al cuadro de diálogo Insertar
otro carácter.
4. Presione sobre el que desee y haga clic en Aceptar.

49
NOTA: También podremos insertar caracteres especiales desde la categoría Texto del panel Insertar.
3.12. 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.
Colocar una regla horizontal
1. Coloque el cursor del ratón en el lugar donde vaya a situar la regla horizontal.
2. Centre su atención en el panel Insertar.
3. Asegúrese de que la categoría Común esté activa y haga clic sobre el botón Regla
horizontal.
NOTA: También es posible colocar reglas horizontales dirigiéndonos al menú Insertar, escogiendo la
opción HTML y en el submenú que aparece pulsando sobre Regla horizontal.
Cambiar las dimensiones y la alineación de una regla horizontal
1. Seleccione la regla horizontal en la ventana de documento de Dreamweaver presionando
sobre ella.
2. Centre su atención en el panel Propiedades.
3. Escriba valores dentro de los campos de edición An y Al para modificar las dimensiones
de la regla horizontal.
4. Para cambiar la alineación de una regla horizontal diríjase al desplegable Alinear y escoja
Izquierda, Centro o Derecha (por defecto la opción activa es Predeterminada).

50
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.
NOTA: Cuando se crea un estilo clase, aparece en el panel CSS y en la orden de submenú Estilos CSS
del menú Texto.
Crear una hoja de estilo CSS personalizada
Para crear una hoja de estilo CSS personalizada accederemos al menú Ventana y pulsamos Estilo CSS
o las teclas combinadas Mayus+F11. Seguidamente nos aparece un cuadro de diálogo para definir y
crear una nueva regla de estilo CSS:
Dentro de los tipos de selector contextual para la regla CSS tenemos:
 Clase (puede ser aplicable a cualquier elemento HTML).
 ID (solo es aplicable a un elemento HTML)
 Etiqueta (redefine un elemento HTML)
 Compuesto (basado en la selección)
En el Nombre del selector introduciremos un nombre para la regla definida con un punto por
delante.
En el punto Definición de regla elegiremos donde se va a definir la regla:
 Sólo en este documento (Se define en el encabezamiento del documento el estilo CSS).
 En un documento aparte. (Se crea una hoja de estilo externa con formato *.css)

51
Cuando pulsamos Aceptar aparece una nueva ventana de diálogo, Definición de regla CSS, que nos
permite establecer y configurar los parámetros de las diferentes categorías: Tipo, Fondo, Bloque,
Cuadro, Borde, Lista, Posición, Extensiones y Transición.
Cada una de las diferentes categorías posee un cuadro de diálogo que permite configurar los
parámetros relacionados con esa categoría. Cuando pulsamos Aceptar se nos guarda, toda la
configuración, en el archivo de hoja de estilo que hayamos creado previamente en el Nombre del
selector. Si pulsamos Aplicar se aplicará directamente sobre la página que estamos trabajando.
Enlace vídeo: Crear una hoja de estilos CSS personalizada.
Aplicar un estilo CSS personalizado
Se puede aplicar directamente desde el cuadro de diálogo de Definición de regla CSS para…,
pulsando el botón Aplicar.
Desde el panel Propiedades, para ello, abrimos el panel de Propiedades ( Ventana  Propiedades) y
pulsamos el botón CSS y seleccionamos en la Regla de destino el estilo que hemos definido
previamente, una vez aplicado, se observará el cambio que se produce en nuestra página conforme a
las fuentes de letra, tamaños, colores, etc., que hayamos configurado.
Enlace vídeo: Aplicar un estilo CSS personalizado.

52
3.14. Buscar y reemplazar texto
Adobe 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.
Buscar y reemplazar un texto dentro de un documento de Dreamweaver
1. En el menú Edición, seleccione la opción Buscar y reemplazar o pulse la combinación de
teclas CTRL+F. Se abre el cuadro de diálogo con el mismo nombre.
2. Pulse el menú desplegable Buscar en para especificar los archivos en los que desea buscar:
 Documento actual: Limita la búsqueda al documento activo.
 Texto seleccionado: Limita la búsqueda al texto que está seleccionado en el
documento activo.
 Documentos abiertos: Busca en todos los documentos que están abiertos.
 Carpeta: Limita la búsqueda a una carpeta específica. Después de seleccionar
Carpeta, haga clic en el icono de carpeta para localizar y seleccionar la carpeta
que desea buscar.
 Archivos seleccionados en el sitio: Limita la búsqueda a los archivos y las
carpetas seleccionadas en el panel Archivos.
 Sitio local actual completo: Amplía la búsqueda a todos los documentos HTML
almacenados en el sitio activo.
3. En el cuadro de edición Buscar, escriba el texto que desee localizar.
4. Active Coincidir mayúsculas y minúsculas para limitar la búsqueda al texto que coincida
exactamente con el uso de mayúsculas y minúsculas del texto buscado.
5. Active Utilizar expresión regular si quiere considerar en la búsqueda algunos caracteres y
cadenas cortas de búsqueda como operadores de expresiones regulares.
6. Pulse el botón Buscar siguiente para localizar la primera cadena de texto coincidente con la
búsqueda establecida. En la ventana de documento se resalta el resultado de la búsqueda.
7. Si desea localizar todas las cadenas de texto coincidentes con la búsqueda establecida, pulse
el botón Buscar todos. El cuadro de diálogo se amplía mostrándonos una lista con todas las
coincidencias localizadas.
8. En el cuadro de edición Reemplazar, escriba el texto por el que desee sustituir la búsqueda
realizada.
9. Para finalizar, pulse el botón Reemplazar o Reemplazar todos dependiendo de si pretende
cambiar todas las palabras encontradas o sólo la búsqueda seleccionada.

53
Recuerda…
Seleccionando la opción Formato de párrafo del menú Texto podremos aplicar etiquetas de párrafo
o encabezado a un texto.
La combinación de teclas MAYÚS+F7 se abre el cuadro de diálogo que nos permitirá corregir un texto
en Dreamweaver.
La herramienta Reglas horizontales podemos utilizar para organizar mejor la información en un
documento de Dreamweaver.
Fuentes del sistema se le denomina al conjunto de fuentes que Dreamweaver aplica a los textos de
forma predeterminada.
Mediante la opción Buscar y reemplazar es posible localizar un texto determinado en un documento
de Dreamweaver y reemplazarlo por otro.
Mediante el grupo Texto de la Barra de herramientas Insertar, actuamos en Dreamweaver si
queremos insertar un carácter que no aparece en el teclado.

54
4. ESTILOS CSS
Los estilos CSS se utilizan para combinar una serie de atributos del texto, como pueden ser el color o
el tamaño, de modo que no sea necesario asignar estos atributos uno a uno cada vez que se desee
repetir la asignación de esos mismos valores a otras partes del texto. También permiten, como
veremos a lo largo del tema, definir prácticamente cualquier propiedad de los elementos que
contendrán nuestra web.
Podemos definir los estilos para determinadas etiquetas, como encabezados, párrafos, enlaces, etc...
lo que formateará todas las apariciones de esta etiqueta en el ámbito del estilo. También podemos
crear clases. Algo así como definir un estilo y darle un alias. El estilo afectará a todos los elementos a
los que apliquemos esa clase.
4.1. Hojas de estilos en cascada
Las hojas de estilos en cascada CSS son un conjunto de reglas de formato que determinan el aspecto
del contenido de una página Web. La utilización de estilos CSS para aplicar formato a una página
permite separar el contenido de la presentación. El contenido de la página reside en el archivo HTML,
mientras que las reglas CSS que definen la presentación del código residen en otro archivo o en otra
parte del documento HTML. La separación del contenido y la presentación hace que resulte mucho
más fácil mantener el aspecto del sitio desde una ubicación central, ya que no es necesario actualizar
las propiedades de las distintas páginas cuando se desea realizar algún cambio.
El lenguaje CSS ofrece gran flexibilidad y control para lograr el aspecto exacto que desea para la
página. Con los estilos CSS, puede controlar numerosas propiedades del texto, entre ellas las fuentes
y los tamaños de fuente específicos; negrita, cursiva, subrayado y sombras de texto; color de texto y
de fondo; color y subrayado de vínculos; etc. Si utiliza estilos CSS para controlar las fuentes, también
conseguirá un tratamiento más coherente del diseño y el aspecto de la página en múltiples
navegadores.
4.2. Estilos CSS
Una regla de formato CSS consta de dos partes: el selector y la declaración. El selector es un término
que identifica el elemento con formato; el bloque de declaraciones define cuáles son las propiedades
de estilo. En el siguiente ejemplo, h1 es el selector y el código comprendido entre las llaves ({}) es el
bloque de declaraciones:
Cada declaración consta de dos partes: la propiedad y el valor. En el ejemplo anterior podemos ver la
propiedad font-family y el valor Helvetica. En la regla CSS anterior, se ha creado un estilo concreto
para las etiquetas h1: el texto de todas las etiquetas h1 vinculadas a este estilo tendrá un tamaño de
16 píxeles, la fuente Helvética y el estilo negrita.

55
El estilo reside en un lugar independiente del texto al que aplica formato. Por consiguiente, una regla
para las etiquetas h1 puede aplicarse a muchas etiquetas a la vez. De este modo, los estilos CSS
proporcionan una capacidad de actualización extremadamente sencilla. Al actualizar de una regla CSS
en un lugar, el formato de todos los elementos que usan ese estilo definido se actualiza
automáticamente con el nuevo estilo.
En Dreamweaver, pueden definirse los siguientes tipos de estilos:
 Los estilos de clase: permiten aplicar propiedades a cualquier elemento o elementos
de la página.
 Los estilos de etiquetas HTML: redefinen el formato de una determinada etiqueta,
como por ejemplo h1. Cuando se crea o cambia un estilo CSS para la etiqueta h1,
todo el texto formateado con la etiqueta h1 se actualiza inmediatamente.
 Los estilos avanzados: redefinen el formato de una determinada combinación de
elementos o de otros selectores permitidos por el CSS. Los estilos avanzados
también redefinen el formato de las etiquetas que contienen un atributo id
específico.
4.3. Crear un estilo personalizado
Con Adobe Dreamweaver, las características que apliquemos a un texto a través del panel de
propiedades CSS crearán automáticamente estilos CSS aunque deberemos especificar a qué
elementos afectará. Los estilos CSS pueden residir en las ubicaciones siguientes:
 Hojas de estilos CSS externas: Son un conjuntos de reglas CSS almacenados en un archivo
*.css independiente externo. Este archivo se asocia a una o varias páginas de un sitio Web
mediante un vínculo o una regla situada en la etiqueta <HEAD> de un documento.
 Hojas de estilos CSS internas (o incrustadas): Son un conjunto de reglas CSS incluidos en una
etiqueta <STYLE> de la sección <HEAD> de un documento HTML.
 Estilos en línea: Se definen dentro de instancias específicas de etiquetas en un documento
HTML. No se recomienda el uso de estilos en línea salvo si pretendemos crear un estilo que
afecte a un único elemento.
NOTA: Dreamweaver reconoce los estilos definidos en documentos existentes siempre que se
ajusten a las directrices de los estilos CSS. Dreamweaver también representa la mayoría de los estilos
aplicados directamente en la vista Diseño. Algunos estilos CSS se representan de forma distinta en
Microsoft Internet Explorer, Netscape, Opera y Apple Safari u otros navegadores, mientras que otros
no son compatibles actualmente con ningún navegador.

56
Crear un estilo en línea
Accedemos al panel Propiedades y pulsamos el botón CSS, nos situamos en la casilla Regla de
destino y seleccionamos Nuevo estilo en línea, seguidamente pulsamos el botón Editar regla y nos
aparece un cuadro de diálogo de Definición de regla CSS para…
Enlace vídeo: Crear un estilo en línea.
Crear una regla de estilo
Para crear una regla de estilo accederemos al panel de Propiedades y pulsamos el botón de Estilo
CSS o las teclas combinadas Mayus+F11. Seguidamente seleccionamos en Regla de destino la opción
Nueva regla CSS y pulsamos el botón Editar regla nos aparece un cuadro de diálogo para definir y
crear una nueva regla de estilo CSS:

57
Dentro de los tipos de selector contextual para la regla CSS tenemos:
 Clase (puede ser aplicable a cualquier elemento HTML).
 ID (solo es aplicable a un elemento HTML)
 Etiqueta (redefine un elemento HTML)
 Compuesto (basado en la selección)
En el Nombre del selector introduciremos un nombre para la regla definida con un punto por
delante.
En el punto Definición de regla elegiremos donde se va a definir la regla:
 Sólo en este documento (Se define en el encabezamiento del documento el estilo CSS).
 En un documento aparte. (Se crea una hoja de estilo externa con formato *.css)
Cuando pulsamos Aceptar aparece una nueva ventana de diálogo, Definición de regla CSS, que nos
permite establecer y configurar los parámetros de las diferentes categorías: Tipo, Fondo, Bloque,
Cuadro, Borde, Lista, Posición, Extensiones y Transición.
Cada una de las diferentes categorías posee un cuadro de diálogo que permite configurar los
parámetros relacionados con esa categoría. Cuando pulsamos Aceptar se nos guarda, toda la
configuración, en el archivo de hoja de estilo que hayamos creado previamente en el Nombre del
selector. Si pulsamos Aplicar se aplicará directamente sobre la página que estamos trabajando.
Enlace vídeo: Crear una regla de estilo

58
4.4. Definir un estilo CSS
Una vez creado un estilo, podremos definir las propiedades de reglas CSS, como la fuente del texto,
la imagen y el color de fondo, las propiedades de espaciado y diseño y el aspecto de los elementos de
las listas.
Editar un estilo CSS
Para editar un estilo CSS, nos vamos al menú principal Ventana y pulsamos Estilos CSS. Nos
aparecerá un menú de Estilo CSS con las características actuales que posee: Familia de letras,
Tamaño en pixel, texto decorado, color, etc. Nos permite ir directamente al código, dividiendo la
página, donde se encuentra todas las etiquetas con los valores establecidos en dicha página web.
En la parte inferior se muestra las propiedades del estilo seleccionado. Se podrá añadir o modificar
los valores que vienen asignados, apareciendo, a la vez, los cambios en los códigos de estilo.
Enlace vídeo: Editar un estilo CSS

59
4.5. Aplicar un estilo
En el caso de haber creado una regla para una etiqueta, no será necesario aplicarla, ya que
directamente afecta a todas las etiquetas de ese tipo. Por tanto lo que tendremos que aplicar serán
los estilos que definamos como clases.
Aplicar un estilo CSS
1. En el documento, selecciona el texto al que deseas aplicar el estilo CSS. Si situamos el
punto de inserción, pero sin seleccionar, el estilo se aplicará a la primera etiqueta que
contenga el texto (por ejemplo el párrafo).
2. En el panel Propiedades seleccionamos la opción CSS y seleccionamos el estilo creado por
nosotros de la lista que aparece al desplegar el cuadro Regla de Destino. Desde las
propiedades HTML también podemos hacerlo, utilizando el desplegable Clase.
3. Si queremos aplicar la clase a una etiqueta, podemos hacer clic derecho sobre ella en la
barra de estado, y seleccionar la clase deseada del menú Establecer clase.
4. Todas las reglas disponibles aparecen al desplegar el submenú Estilos CSS del
menú Formato.
NOTA: La barra de estado nos ayudará a saber qué clase tiene aplicada un elemento. La clase
aparecerá junto al nombre de la etiqueta, separada por un punto.
4.6. Exportar estilos
Es frecuente que comencemos creando los estilos en la propia página, y después al ver que los
necesitaremos en otras páginas del sitio, los pasemos a una hoja de estilo. Dreamweaver nos permite
exportar estos estilos de una forma rápida.
Exportar un estilo CSS
1. Utilizamos el panel Estilos CSS el cual podremos abrir de una forma rápida pulsando la

60
2. En la parte superior del panel asegúrese que este activada la vista Todo.
3. En la parte central aparecen agrupados en <style> los estilos creados en la página.
4. Seleccionamos las reglas que queramos exportar, y en las propiedades del panel (el icono
de la esquina superior derecha) seleccionamos Mover Reglas CSS.
5. En el cuadro de diálogo Mover a hoja de estilos externa encontramos dos opciones para
ubicar los estilos:
 Hoja de estilos: nos permite seleccionar una hoja ya existente. Las reglas
se añadirán a ella.
 Una nueva hoja de estilos...: creará una hoja nueva para las reglas
exportadas. Deberemos de indicar dónde queremos guardar el archivo,
normalmente en la misma carpeta que las páginas.
6. Para finalizar pulse el botón Aceptar para guardar la hoja de estilos.
4.7. Vincular una hoja de estilos
Si queremos utilizar una hoja de estilos ya existente en nuestra página Web, debemos vincularla.
Vincular una hoja de estilo CSS
1. Nos dirigimos al menú Formato y seleccionamos la opción Estilos CSS y en el nuevo
submenú que aparece escogemos la opción Adjuntar hoja de estilos.
2. Utilice el botón Examinar para localizar el archivo *.css que desee vincular o escriba la
ruta de la hoja de estilos en el cuadro Archivo/URL.
3. En Añadir como, seleccione una de las siguientes opciones:
 Para crear un vínculo entre el documento actual y la hoja de estilos
externa, active la opción Vincular.
 Si lo que desea es anidar la hoja de estilo, active la opción Importar.
4. En el menú emergente Media, especifique el medio de destino de la hoja de estilos.
5. Haga clic en el botón Vista previa para verificar que la hoja de estilos aplica los estilos
que desea en la página actual.
6. Si los estilos aplicados no tienen el efecto que esperaba, haga clic en Cancelar para
eliminar la hoja de estilos. La página recuperará su aspecto anterior.
7. Para finalizar haga clic en Aceptar.

61
5. 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.
5.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.
JPG (Joint Photo Graphic 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 plugins. 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.
Lo habitual es utilizar los formatos GIF o PNG para pequeños gráficos, normalmente elementos del
diseño o imágenes simples, y el formato JPG para fotografías, sean del tamaño que sean. Nos
limitaremos al uso de estos formatos. Ya que aunque algunos navegadores soportan otros, no lo
hacen todos. Y hemos de asegurarnos de que cualquier visitante de nuestra página pueda ver las
imágenes.

62
5.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.
Insertar una imagen en la ventana de documento de Dreamweaver
Para insertar una imagen nos vamos al menú principal Insertar y pulsamos Imagen o Ctrol+Alt+I se
abre una ventana para seleccionar una imagen en nuestro disco local. Seleccionamos la imagen y le
damos Aceptar, se incluirá en el lugar donde está situado el cursor del ratón.
Otra opción es ir al menú de Herramientas con la categoría Común habilitada y pulsar directamente
en el icono de Imagen. Para ello, debe de estar activada esta opción común.
Enlace vídeo: Insertar una imagen en la ventana de documento de Dreamweaver.
NOTA: Aparece una ventana para seleccionar el origen de la imagen para insertarla en el documento
Dreamweaver.

63
5.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.
Especificar un editor de gráficos externos desde Dreamweaver
Para ello accederemos al menú principal Edición y pulsamos la opción Editar con Editor Externo. Nos
aparece un cuadro de diálogo de preferencias, elegimos dentro de la categoría Tipos de
archivo/Editores y los archivos y editores de código externo.
Seleccionamos la extensión para el editor externo, por ejemplo .jpg, y pulsamos el botón de (+) en
Editores y nos aparece una ventana para seleccionar el editor externo para abrir archivos con esa
extensión. Seleccionamos el editor externo y pulsamos Abrir, se nos añade directamente en el
cuadro Editores y pulsamos Convertir en principal y este editor estará predeterminado para abrir
archivos jpg.
Enlace vídeo: Especificar un editor de gráficos externo desde Dreamweaver.

64
Editar una imagen usando un editor externo
Una vez que hemos seleccionado y establecido el editor de grafico externo en la opción Preferencias,
del menú Edición y, seleccionamos una imagen de nuestro documento Dreamweaver, nos vamos al
panel de Propiedades y pulsamos el icono Editar, seguidamente se abre el programa editor de
gráficos y nos permitirá modificar la imagen. Una vez modificada se aceptará guardar los cambios y
al visualizarla en Dreamweaver se apreciará los cambios realizados en la imagen.
Enlace vídeo: Editar una imagen usando un editor externo.
5.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 Ancho y
Alto 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.

65
Redimensionar una imagen utilizando el panel Propiedades
1. Seleccione la imagen que quiera redimensionar haciendo clic sobre ella con el
puntero del ratón.
2. Introduzca unos nuevos valores de anchura y altura en los campos de
edición Ancho y Alto del panel Propiedades. Recuerde que las dimensiones se
representan en píxeles.
3. Las dimensiones de la imagen se modificarán automáticamente cuando pulsemos la
tecla INTRO o movamos el cursor fuera del campo editado.
Redimensionar una imagen usando los manejadores
1. Seleccione la imagen que quiera redimensionar haciendo clic sobre ella con el
puntero del ratón.
2. Haga clic y arrastre uno de los manejadores para redimensionar la imagen. Si al
mismo tiempo, mantiene pulsada la tecla MAYÚS, mantendremos las proporciones
de anchura y altura de la imagen.
3. Para finalizar, suelte el ratón cuando crea que las dimensiones son las deseadas.
Puede ayudarse observando los campos de edición Ancho y Alto del panel
Propiedades.

66
5.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.
Añadir una etiqueta <alt> a una imagen
1. Seleccione la imagen a la que quiera añadir la etiqueta <alt>.
2. Centre su atención en el panel Propiedades.
3. Escriba el texto que desee en el campo de edición Alt situado en la parte superior
derecha del panel Propiedades.
5.6. 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.

67
Alinear una imagen dentro de un documento HTML
1. Presione sobre la imagen para seleccionarla.
2. Centre su atención en el panel Propiedades y despliegue el cuadro de lista
desplegable Alinear. Encontrará opciones como:
 Predeterminado: Suele especificar una alineación con la línea de base. El valor
predeterminado puede variar en función del navegador del visitante del sitio.
 Línea de base: Alinea la línea de base del texto (u otro elemento) con la parte
inferior del objeto seleccionado.
 Superior: Alinea una imagen con la parte superior del elemento más alto
(imagen o texto) de la línea actual.
 Medio: Alinea la línea de base del texto con el punto medio del objeto
seleccionado.
 Inferior: Alinea una imagen con la parte inferior del elemento más alto
(imagen o texto) de la línea actual.
 Texto superior: Alinea el objeto seleccionado con la parte superior del
carácter más alto de la línea de texto.
 Medio absoluta: Alinea en relación con el punto medio absoluto de la línea
actual.
 Inferior absoluta: Alinea en relación con el punto inferior absoluto de la línea
actual.
 Izquierda: Sitúa el objeto seleccionado en el margen izquierdo, ajustando a la
derecha el texto que está a su alrededor.
 Derecha: Sitúa el objeto en el margen derecho, ajustando a la izquierda el
texto que está a su alrededor.

68
5.7. 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.
Añadir un borde a una imagen en Dreamweaver
1. Seleccione la imagen a la que quiera añadir un borde.
2. Centre su atención en el campo Borde del panel Propiedades.
3. Para finalizar, introduzca un valor en píxeles en el campo de edición y
presione INTRO para aplicar los cambios.
Por defecto, el color del borde que aparece es el mismo que el color de texto
predeterminado. Si va al cuadro de diálogo Propiedades de la página y cambia el color de
texto, cambiaremos de forma automática el color del borde añadido a la imagen
seleccionada.
5.8. 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.
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.

69
Añadir una imagen de sustitución
Si el panel de herramientas no se encuentra activo, diríjase al menú principal Ventana y pulse
Insertar, se abrirá el panel de herramientas y activamos la opción Común. Dentro de esta opción
común hay un icono imagen con la opción Imagen de sustitución clic aquí.
Nos aparece una ventana de diálogo para establecer la imagen original y la imagen de sustitución.
Para ello, tenemos que incluir la dirección local donde se encuentran ambas imágenes y la dirección
URL (opcional) para que cuando pinchemos sobre la imagen accedamos a esa dirección web. Una
vez configurado pulsamos Aceptar y comprobar en un navegador como cambian las imágenes
cuando pasamos el cursor del ratón sobre ella.
Enlace vídeo: Añadir una imagen de sustitución.
5.9. Practica: 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 para proporcionar
información adicional sobre la Web.

70
Recuerda…
Los siguientes formatos de imágenes son soportados por Dreamweaver:
- PNG.
- JPEG.
- GIF.
La tecla MAYÚS deberemos mantenerla pulsada para que al redimensionar una imagen usando los
manejadores ésta mantenga sus proporciones de anchura y altura.
El formato de imagen PNG fue desarrollado por Macromedia combinando la compresión de los
archivos GIF con los millones de colores de las imágenes JPEG.
El panel Propiedades lo utilizaremos para editar una imagen con Dreamweaver.
La etiqueta alt nos permitirá proporcionar información extra sobre una imagen, y sustituirá a la
imagen en los navegadores que sólo admiten texto.
Con el color de texto predeterminado se representan los bordes en Dreamweaver por defecto.

71
6. 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.
6.1. Utilización de marcos
Los marcos se usan en Dreamweaver para mejorar la navegación por una página Web. La mayoría de
las páginas que se pueden visitar en Internet, suelen utilizar un marco para albergar el menú de
navegación y otro para el contenido de la página. Cuando el visitante de la página hace clic en un
elemento del menú, el vínculo aparece en el marco destinado a mostrar el contenido sin que el menú
de navegación se vea afectado. De este modo, el visitante podrá orientarse fácilmente en el sitio.
Cada uno de los marcos de una página, contiene un documento HTML individual. Es posible editar los
documentos contenidos en los marcos desde la página que contiene el grupo de marcos. Esto facilita
el trabajo, ya que es más fácil hacerse una idea de cómo quedará la página al final, cosa que no es
posible si se editan individualmente cada uno de los documentos que contiene el marco.
Actualmente los marcos están cayendo en desuso ya que aunque son realmente prácticos, crean
problemas a la hora de ser indexados por los buscadores. Y estar correctamente indexado y
posicionado es crucial para una web.
6.2. 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.
NOTA: Podemos cambiar fácilmente la posición de cualquier borde del conjunto de marcos haciendo
clic y arrastrando por la ventana de documento.
Crear un conjunto de marcos por medio del ratón
Seleccionamos en el menú principal la opción Ver, seguidamente hacemos clic en Ayuda Visuales y
nos sale un submenú con varias opciones, seleccionamos y pulsamos Borde de marco.

72
Los bordes se encuentran en los lados laterales verticales y horizontales sin verse en el documento.
Para ello, nos situamos en uno de los bordes derechos o izquierdos, superior o inferior y con el cursor
del ratón y pulsando a la misma vez la tecla <Alt> vamos desplazando el marco hacia el centro del
documento
En el panel de Propiedades se muestran el conjunto de marcos, filas y columnas, el tamaño de los
bordes, ancho, color, etc.
Enlace vídeo: Crear un conjunto de marcos por medio del ratón.
6.3. 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.
Crear un conjunto de marcos anidado
En el menú de herramientas y en la opción Diseño seleccionamos Marcos anidados.
Enlace vídeo: Crear un conjunto de marcos anidado.

73
6.4. 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.
Establecer los tamaños de los marcos usando el panel Propiedades
1. Haga clic en el borde de un marco para seleccionar el conjunto de marcos que desee
modificar. Recuerde que los bordes de marcos deben estar visibles en la ventana de
documento.
2. Si el panel Propiedades no se encontrara abierto, diríjase al menú Ventanay 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 del
conjunto de marcos seleccionado.
4. En el cuadro Selección Fila Col., haga clic en la fila o columna que desee modificar.
5. Para especificar cómo 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 entre las siguientes opciones:
 Píxeles: Establece el tamaño de la columna o fila seleccionada en un
valor absoluto.
 Porcentaje: Indica que el marco actual debe representar un porcentaje
especificado del conjunto de marcos al que pertenece.
 Relativo: Indica que, al marco actual, se le dará un espacio
proporcional al asignado a otros marcos.

74
6.5. 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.
Definir los bordes de un conjunto de marcos:
1. Seleccione el conjunto de marcos haciendo clic en el borde de un marco en la ventana
de documento.
2. Si el panel Propiedades no se encontrara abierto, diríjase al menú Ventana y escoja la
opción Propiedades.
3. Utilice el cuadro de lista desplegable Bordes para controlar los bordes de los marcos
contenidos en el conjunto de marcos seleccionado:
 Elija Sí para mostrar los bordes en color tridimensional.
 Elija No para mostrar los bordes planos y en color gris.
 Elija Predeterminado para que el navegador determine cómo se
mostrarán los bordes.
4. Utilice el campo de edición Ancho para especificar el ancho de los bordes en el
conjunto de marcos actual. Introduzca el valor 0 para especificar que no desea
bordes.
5. Para finalizar, emplee el área Color del borde para establecer un color para todos los
bordes en el conjunto de marcos actúa.

75
6.6. 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.
Trabajar con el panel Marcos
1. Abra el panel Marcos dirigiéndose al menú Ventana y seleccionando la
opción Marcos.
2. Para trabajar con un marco, pulse directamente sobre la representación del marco
que desee seleccionar dentro del panel. Si el panel Propiedades está abierto, reflejará
las propiedades del marco elegido.
3. Para nombrar un marco, introduzca el nombre que desee en el cuadro de edición que
se encuentra en el área Nombre de marco del panel Propiedades.
Recuerde que los nombres de marco presentan las siguientes restricciones:
 Use palabras sin espacios.
 No use caracteres especiales como comillas, signos de interrogación,
etc.
 El guión bajo sí está permitido, exceptuando ciertos nombres
reservados.
6.7. 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.

76
6.8. 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.
6.9. 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, _new,_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. Si creamos varios enlaces con esta opción y comenzamos a abrirlos,
estos se abrirán en ventanas independientes las unas de las otras.

77
 _new: Es similar al anterior y hace que el vínculo se abra en una nueva ventana de
explorador manteniendo la ventana actual disponible. Si aún no has abierto ninguno
de los enlaces que hayas creado con esta sintaxis, al hacerlo se va abrir en una
ventana nueva la cual, por así decirlo, va tener el nombre de NEW, y a partir de esa
ventana los demas enlaces que abras y que tengan el “_new” se van cargar en esta
única ventana.
 _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.
6.10. 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.
Guardar un conjunto de marcos
1. Seleccione el conjunto de marcos utilizando el panel Marcos o, directamente, en la ventana
de documento de Dreamweaver.
2. Para guardar el archivo de conjunto de marcos, diríjase al menú Archivo y seleccione la
opción Guardar conjunto de marcos.
3. Para guardar el archivo de conjunto de marcos como un archivo nuevo, diríjase al menú
Archivo y elija la opción Guardar conjunto de marcos como.
4. Dentro del cuadro de diálogo Guardar como, especifique un nombre en el cuadro Nombre y
una ruta mediante el cuadro de lista Guardar en o la Barra de sitios.
Guardar un documento que está dentro de un marco
1. Haga clic en el marco para seleccionarlo y, a continuación, diríjase al menú Archivo y
seleccione la opción Guardar marco como.
2. Al igual que en el caso anterior, se abre el cuadro de diálogo Guardar como. Especifique un
nombre en el cuadro Nombre y una ruta mediante el cuadro de lista Guardar en o la Barra de
sitios.
NOTA: Para guardar todos los archivos de un conjunto de marcos de forma rápida, seleccione la
opción Guardar todo en el menú Archivo. De este modo se guardarán todos los documentos abiertos,
incluidos los documentos individuales, los documentos de marcos y los documentos de conjunto de
marcos.

78
6.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”.
Recuerda…
Se denomina conjunto de marcos anidado a un conjunto de marcos que está dentro de otro.
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 tecla ALT deberemos mantenerla pulsada para dividir nuestra página Web en marcos.
Las restricciones que presentan los nombres de marcos son:
- El guión bajo está permitido por norma general exceptuando el uso de ciertos nombres reservados.
- Hay que utilizar palabras sin espacios.
- No usar en ellos caracteres especiales como comillas, signos de interrogación, etc.
El panel Propiedades lo utilizaremos para modificar el tamaño de los marcos.
6 pixeles es el grosor que tendrán los bordes de los marcos por defecto en Dreamweaver.
La categoría Diseño de la Barra de herramientas Insertar nos permitirá crear conjuntos de marcos
predefinidos.
La opción Bordes de marco situada en la categoría Ayudas visuales del menú Ver deberemos activarla
para poder visualizar los marcos de la ventana de documento de Dreamweaver.

79
7. 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.
7.1. Utilización de tablas
Las tablas son una de las utilidades más potentes para presentar datos e imágenes en un documento
HTML. Las tablas se componen de tres elementos básicos: columnas, filas y celdas. Las filas van de
izquierda a derecha de la tabla y las columnas de arriba a abajo. Una celda es la casilla que se forma
por la intersección de una fila y una columna; es donde se introduce la información.
En HTML, toda la estructura e información de una tabla se incluye en la etiqueta <table>. Esta
etiqueta puede tener numerosos atributos que afectarán a la altura y anchura de la tabla, al borde,
alineación y color de fondo. También podremos controlar el tamaño del espaciado entre celdas y el
relleno de las mismas.
Hasta hace poco, y todavía hoy es fácil encontrar diseños Web basados en tablas. Esto es debido a la
facilidad que nos ofrecen estos elementos para organizar contenidos y repartir el espacio. No
obstante, esta no es una práctica recomendable, ya que las tablas no fueron pensadas para ello, y si
no están bien anidadas pueden ocasionar problemas al analizar nuestra Web con herramientas
automáticas, como los bots que indexan el contenido para los buscadores. Para maquetar nuestras
páginas, lo recomendado es emplear capas (div) y CSS.

80
7.2. 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.
Insertar una tabla en la ventana de documento de Dreamweaver
Si no tiene la barra de herramientas activada vaya al menú Ventana y pulse Insertar. Compruebe que
tiene activado la opción Común y pulse el icono de Tabla.
Nos aparece una ventana de diálogo para introducir los valores y las características de la Tabla: filas,
columnas, ancho de tabla, grosor del borde, relleno, espacio entre celdas, etc.
Una vez hayamos introducidos los valores de la tabla, pulsamos Aceptar, aparecerá la tabla en el
documento de Dreamweaver. Podemos variar el dimensionamiento de la tabla, filas y columnas,
seleccionando un borde de la celda de la tabla y desplazándose con el ratón pulsado, con el botón
izquierdo, por el documento. En el panel Propiedades aparecen todas las características y datos de la
tabla, que podemos modificar directamente.
Enlace vídeo: Insertar una tabla en la ventana de documento de Dreamweaver.

81
Añadir texto a una tabla
Para añadir texto en una tabla nos ponemos primeramente con el cursor del ratón en la celda de la
tabla que queremos introducir texto, y escribimos el texto. En el panel de Propiedades se abre las
características de esa celda con respecto al formato de texto: posición horizontal y vertical, fuente,
tamaño, anchura, altura, fondo, alineación, etc., pues cada celda podrá tener un formato diferente.
Enlace vídeo: Añadir texto a una tabla.
Añadir una imagen a una tabla
Para añadir una imagen en una tabla seleccionamos primeramente la celda con el cursor del ratón
donde va a ir la imagen. Si no tenemos activado la barra de herramientas ir al menú principal y pulsar
Ventana y a continuación Insertar. Activar la barra de herramienta opción Común y pulsar el icono
imagen. Aparece un cuadro de diálogo para introducir la dirección local donde se encuentra la
imagen que queremos insertar en la tabla.

82
Una vez añadida la imagen en la celda, en el panel Propiedades se abre las características de la
imagen: dimensionado, ancho y alto, origen, ID, edición, etc., que podremos modificar directamente
y apreciándose los cambios en la ventana del documento.
Enlace vídeo: Añadir una imagen a una tabla.
7.3. 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).
Modificar una tabla utilizando el panel Propiedades
1. En la ventana de documento, seleccione la tabla que desee modificar.
2. Si el panel Propiedades no se encontrara abierto diríjase al menú Ventana y escoja la
derecha del panel Propiedades. De este modo, veremos más propiedades de la tabla.
4. Para alinear la tabla dentro de la ventana de documento, seleccione la tabla y
presione sobre una de las opciones disponibles en la lista desplegable Alinear.

83
5. Para cambiar el color de fondo de una celda, seleccione las celdas que quiera y haga
clic directamente en la muestra de color del área Color 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.
7.4. 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.
Seleccionar filas en una tabla
1. Posicione el cursor del ratón en el lado izquierdo de la fila que quiera seleccionar.
Asegúrese de desplazar el puntero totalmente fuera de la tabla.
2. Mueva el cursor lentamente hacia la tabla hasta que observe que éste se convierte en
una flecha negra que apunta hacia la derecha.
3. A continuación, haga clic con el ratón. Todas las celdas de la fila seleccionada serán
rodeadas por un borde de color negro.

84
Seleccionar columnas en una tabla
1. Posicione el cursor del ratón en la parte superior de la columna que quiera
seleccionar. Asegúrese de desplazar el puntero totalmente fuera de la tabla.
2. Mueva el cursor lentamente hacia la tabla hasta que observe que éste se convierte en
una flecha negra que apunta hacia abajo.
3. Haga clic con el ratón y observe cómo todas las celdas de la columna seleccionada
aparecen rodeadas por un borde de color negro.
Añadir filas y columnas a una tabla
1. En la ventana de documento, seleccione la tabla que desee modificar.
opción Propiedades
3. Para añadir filas, coloque el cursor del ratón en el campo de edición Filas y escriba el
número total de filas que desee que su tabla tenga. Por ejemplo, si tenía 3 filas y
quiere añadir 3 más, deberá escribir 6 en el campo de edición.
4. Para añadir columnas, coloque el cursor del ratón en el campo de edición Columnas y
escriba el número total de ellas que desee que tenga su tabla. Por ejemplo, si tenía 3
columnas y quiere añadir 3 más, deberá escribir 6 en el campo de edición.
5. Para aplicar los cambios efectuados, pulse la tecla INTRO o haga clic con el ratón en algún
lugar de la ventana de documento.

85
Borrar filas o columnas de una tabla
1. Coloque el cursor en una celda de la fila o columna que desee eliminar.
2. En el menú Modificar seleccione la opción Tabla y, en el submenú que aparece, escoja la
opción Eliminar fila o Eliminar columna, dependiendo de la operación que quiera
realizar.
3. La fila o columna desaparece automáticamente de la tabla.
NOTA: Al eliminar una columna de la tabla, el tamaño de ésta no se verá afectado. De forma
inmediata, el resto de columnas se dimensionan para adaptarse al tamaño de la misma. Esto no
ocurre con las filas que, al eliminarlas, desaparecen y el resto de filas de la tabla permanecen sin
alterarse.
7.5. 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.
Alinear el contenido de una celda usando el panel Propiedades
1. Asegúrese de que el panel Propiedades se muestra activo. En caso contrario,
muéstrelo desde la opción Propiedades del menú Ventana.
2. Para alinear el contenido de una celda de forma horizontal, coloque el cursor de texto
del ratón en la celda que desee modificar y seleccione una de las opciones utilizando
el menú desplegable Horizontal.
3. Para alinear el contenido de una celda de forma vertical, coloque el cursor de texto
del ratón en la celda que desee y seleccione una de las opciones utilizando el menú
desplegable Vertical.
4. De forma automática, el contenido de la celda se alinea según las opciones
seleccionadas.

86
7.6. 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.
Combinar dos o más celdas
1. Coloque el cursor de texto del ratón sobre la primera celda que desee incluir en la
múltiple selección.
2. A continuación, arrastre el ratón para seleccionar las celdas a combinar. Recuerde
que las celdas seleccionadas deberán ser continuas y tener forma rectangular.
3. Si el panel Propiedades no se encontrara abierto diríjase al menú Ventana y escoja la
4. Haga clic en el botón Combina las celdas seleccionadas usando extensores situado
en la parte inferior izquierda del panel Propiedades.
5. Las celdas seleccionadas se combinan automáticamente en una sola.
Dividir una celda combinada
1. Seleccione la celda que desee dividir dentro de la tabla.
2. Haga clic en el botón Divide la celda en filas o columnas situado en la parte inferior
izquierda del panel Propiedades.

87
3. Se abre el cuadro de diálogo Dividir celda.
4. En el área Dividir celda, elija si desea dividir la celda en Filas o en Columnas y, a
continuación, introduzca el número que desee en el campo de edición situado debajo.
5. ara finalizar, pulse el botón Aceptar. La celda seleccionada, se divide
automáticamente en el número establecido en el cuadro de diálogo Dividir celda.
7.7. 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.
Anidar una tabla en una celda de otra tabla
1. Si panel Insertar no se encontrara abierta, diríjase al menú Ventana y escoja la
opción Insertar.
2. Asegúrese que la categoría Común del panel Insertar esté activa y presione el
comando Tabla.
3. Aparece el cuadro de diálogo con el mismo nombre. Este cuadro, por defecto,
mantiene los valores de la configuración más reciente aplicada a una tabla.
4. Para finalizar, especifique las propiedades de la tabla utilizando las opciones del
cuadro de diálogo y pulse el botón Aceptar.

88
7.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.
Ordenar una tabla según su contenido
Para ordenador una tabla según su contenido, primeramente habrá que seleccionar la tabla con el
cursor del ratón. Seguidamente en el menú Comando seleccionamos Ordenar Tabla.
Nos aparece un cuadro de diálogo que nos permite introducir los valores a la tabla para ordenarla.
En Ordenar por tenemos que seleccionar la columna: Columna 1, Columna 2… y con el criterio en
orden: Alfabético o numérico, ascendiente o descendente. En la opción Después por se selecciona
la siguiente columna que vaya después y según el criterio que pongamos de orden: alfabético o
numérico y ascendiente o descendente. Por último, se puede seleccionar algunas opciones como
ordenar filas de encabezado, filas de pié, o la opción no modificar colores de fila hasta finalizado la
operación de orden.
Enlace vídeo: Ordenar una tabla según su contenido.

89
7.9. 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”.
Recuerda…
No se pueden combinar celdas que no se encuentran contiguas, sólo se pueden combinar celdas
adyacentes.
La tecla TAB deberemos mantenerla pulsada para pasar a la celda siguiente de una tabla.
La categoría Común de la Barra de herramientas Insertar nos permitirá crear una tabla.
Si eliminamos una columna de una tabla el tamaño de ésta no se verá afectado; el resto de columnas
se dimensionan para adaptarse al tamaño de la misma.
Para colocar una imagen como fondo de una tabla utilizaremos el cuadro de diálogo Propiedades de
la página.
Si se pulsa la tecla TAB en la última celda de una tabla se añadirá una nueva fila.

90
8. 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 lo
navegadores, y en los que sí se muestran, no siempre lo hacen correctamente.
8.1. Aparición de las capas: Mejoras en el diseño
Cuando la World Wide Web apareció hacia el año 1992, muy pocas personas estaban interesadas en
la apariencia estética de las páginas Web. De hecho, el diseño era menospreciado. El énfasis recaía
sobre los contenidos y la innovadora capacidad del hipertexto, que permitía saltar de una página a
otra. Después de que apareciera el primer navegador con soporte gráfico, quedó claro que las
imágenes y el diseño podía mejorar la accesibilidad y la comercialización de los sitios Web.
El primer intento de diseño en páginas Web fue el mapa gestionado por el servidor. Este elemento
era una imagen de gran tamaño con zonas activas, pero que normalmente resultaba demasiado
grande para ser descargada con comodidad.
La amplia aceptación que tuvo la aparición de las tablas provocó un cambio radical en el control del
diseño. Se consiguió alinear objetos y texto, pero gran parte del interés visual aún recaía sobre las
imágenes estratégicamente colocadas dentro de las tablas. Cuanta mayor precisión se pretendía
alcanzar, más necesidad había de recurrir a artimañas como el uso de tablas anidadas e imágenes GIF
de un píxel de ancho como espaciadores. Para resolver las quejas de los diseñadores, que cada vez
exigían más, se incluyó una característica dentro de la especificación de las hojas de estilo en
cascada, que permitía el posicionamiento absoluto de un elemento en una página. Este método
facilitaba la ubicación de una imagen o un bloque de texto en cualquier parte de una página.
8.2. 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:
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.

91
Insertar una capa utilizando la barra de herramientas Insertar
Primeramente y si no tenemos activada la barra de herramientas vamos al menú Ventana y
pulsamos Insertar. Seguidamente seleccionamos la pestaña Diseño Estándar de la barra de
herramientas y pulsamos el icono de Dibujar Div PA. Se nos cambia el cursor del ratón y aparece de
forma de cruz, en estos momentos nos situamos en el lugar del documento que deseamos incluir una
capa y con el ratón procedemos a realizar un rectángulo del tamaño que necesitemos para nuestra
capa. Apareciendo en el panel de Propiedades las características de la capa creada.
Enlace vídeo: Insertar una capa utilizando la Barra de herramientas Insertar.
Insertar una capa utilizando el menú de Dreamweaver
Para este proceso nos vamos al menú principal Insertar y pulsamos en Objetos de diseño, nos
aparece un submenú y seleccionamos la opción Div PA. Seguidamente nos aparece en la ventana de
nuestro documento la capa, un rectángulo con los bordes de color azul, que podemos mover o
modificar las dimensiones a nuestro gusto con el ratón.
Enlace vídeo: Insertar una capa utilizando el menú de Dreamweaver.

92
8.3. 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.
Configurar las características de una capa
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.
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.

93
8.4. Panel Elementos PA
El panel Elementos PA 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.
Trabajar con el panel Elemento PA de Dreamweaver
Para acceder a trabajar con el panel Elementos PA seleccionamos del menú principal Ventana y
pulsamos Elementos PA o directamente con la tecla F2, nos aparece una ventana con todas las capas
creadas en nuestro documento HTML de Dreamweaver.
Cuando seleccionamos una capa de nuestro Elementos PA, ésta se activa, marcando sus bordes con
un color amarillo. Si pulsamos la opción del ojo, podemos visualizar u ocultar las capas.
Enlace vídeo: Trabajar con el panel Elemento PA de Dreamweaver.

94
8.5. 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.
opción Propiedades
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.
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.

95
8.6. 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.
Ajustar una capa usando la cuadrícula de Dreamweaver
1. En primer lugar, debemos mostrar la cuadrícula en la ventana de documento, para ello,
nos dirigimos al menú Ver y seleccionamos la opción Cuadrícula. En el menú desplegable
que aparece, escogemos la opción Mostrar cuadrícula.
2. Para activar la opción de ajuste de la cuadrícula, diríjase de nuevo al menú Ver y
seleccione la opción Cuadrícula. En el menú desplegable que aparece, escoja la
opción Ajustar a cuadrícula.
3. Para finalizar, seleccione una capa y arrástrela hacia otra posición dentro de la ventana de
documento. La capa saltará a la posición de ajuste más próxima.
8.7. 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 funcionar.
Crear una capa de carga en Dreamweaver
Para ello, hay que ir a la barra de herramientas en la categoría Diseño y pulsar el icono Div PA. Nos
ponemos sobre el documento HTML y trazamos un rectángulo con las dimensiones que nos interese
y escribimos dentro un texto cualquiera.
La capa aparece activada con el borde amarillo y superpuesto a los demás elementos que contiene el
documento HTML. Vamos al menú Ventana y pulsamos Elementos PA o la tecla rápida F2. Nos
aparece el panel de capas con todas las capas que contiene el documento. Cambiamos el nombre de
la capa y seguidamente abrimos la Ventana del menú principal y pulsamos Comportamientos y
abrimos el menú y hacemos clic en el botón con el signo (+) y seleccionamos Mostrar/Ocultar
elementos. Aparece una lista y buscamos en ella el nombre de la capa que hemos definido
anteriormente. La seleccionamos y le damos al botón Ocultar a continuación selecciona una a una las
demás capas y pulse el botón Mostrar y le damos al botón Aceptar. En el inspector de etiquetas
aparece el nuevo comportamiento creado.

96
Enlace vídeo: Crear una capa de carga en Dreamweaver.
Recuerda…
En el panel de capas, un pequeño icono con los ojos cerrados nos indica que una capa está oculta.
La opción que debemos activar si queremos que una animación se repita indefinidamente una vez
que ésta haya alcanzado el cuadro final es el bucle del panel líneas de tiempo.
Con la tecla CTRL mantenida pulsada permite añadir un cuadro clave en el panel líneas de tiempo.
La categoría Diseño de la Barra de Herramientas nos permitirá crear una capa.
Si al colocar una capa no queremos que aparezca una marca en la ventana de documento tenemos
que desactivar la opción Elementos visibles de la categoría Ayudas visuales en el menú Ver.
Para cambiar la etiqueta a una capa en Dreamweaver se utiliza el panel Propiedades.
La tecla rápida F2 nos permitirá abrir el panel de Capas.

97
9. 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 a reparar los vínculos rotos.
9.1. Localización y rutas de documentos
A la hora de crear vínculos, resulta fundamental conocer la ruta de archivo entre el documento de
origen y el de destino. Cada página Web tiene una dirección exclusiva denominada URL (Uniform
Resourse Locator). Dreamweaver nos ofrece la posibilidad de trabajar con dos tipos de vínculos:
relativos y absolutos.
 Vínculos absolutos: Nos proporcionan la URL completa del documento vinculado,
incluido el protocolo. Por ejemplo, la siguiente dirección
http://www.adobe.com/products/dreamweaver es una URL absoluta. Es importante
incluir el protocolo http:// al comienzo de la dirección. Por lo general, este tipo de
vínculos son empleados para vincular un documento situado en otro servidor.
 Vínculos relativos: Son un poco menos directos que los absolutos. Resultan
especialmente útiles cuando el documento actual y el vinculado se encuentran en la
misma carpeta y es probable que vayan a permanecer juntos. Un vínculo relativo no
necesita tener la misma estructura y protocolo que uno absoluto. En éstos se omite la
parte de la URL absoluta que coincide en los documentos actual y vinculado, indicando
únicamente la parte de la ruta diferente.
9.2. 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:
Cuando se vincula un enlace a una imagen, como por ejemplo “logo.gif”, el código será:

98
9.3. 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.
Crear vínculos utilizando el icono con forma de carpeta o el cuadro de edición de texto Vínculo
Seleccione en el documento HTML un texto o una imagen que desee vincular. En el panel
Propiedades nos vamos a la opción Vinculo e introducimos la dirección donde se encuentra el
archivo o pulse el icono de carpeta, donde aparece un cuadro de diálogo de búsqueda de archivo,
pulsa Aceptar. Cuando pulsemos sobre la imagen o texto abrirá el documento vinculado.
Enlace vídeo: Crear vínculos utilizando el icono con forma de carpeta.
Crear vínculos utilizando el icono de señalización de archivo
Seleccione en el documento HTML una imagen o texto que dese vincular. Vaya al panel de Archivos
locales y seleccione el archivo que desea vincular. Con el ratón pulsado en el archivo seleccionado
desplácese hasta la casilla de Vínculo en el panel Propiedades y déjelo caer, se insertará en la casilla.
Enlace vídeo: Crear vínculos utilizando el icono de señalización de archivo.

99
9.4. 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. El segundo paso consistirá en insertar un vínculo enlazado a dicho anclaje.
Insertar un anclaje en Dreamweaver
Seleccione un texto o imagen del documento HTML. Si la barra de herramientas no se encuentra
activada, vaya al menú Ventana y pulse Insertar. Seleccione la categoría Común de la barra de
herramientas y pulse el icono Anclaje con nombre, aparecerá un cuadro de diálogo para introducir el
nombre de anclaje. Recuerda que no se puede dar espacio en blanco ni tampoco esté en una capa.
También se puede realizar desde el panel principal Insertar y pulsando Anclaje con Nombre.
Dreamweaver coloca un punto de anclaje en el lugar que hemos definido en el anclaje con su
nombre.
Enlace vídeo: Insertar un anclaje en Dreamweaver.
NOTA: Si este marcador no se mostrase, en el menú Ver seleccione la opción Ayudas visuales y en el
submenú que se abre escoja Elementos invisibles.

100
Crear un vínculo con un anclaje
En la vista diseño del documento HTML seleccione una imagen o texto para vincular un anclaje. Para
ello en el panel Propiedades en la casilla Vinculo introduzca almohadilla y el nombre del anclaje
*an01
NOTA: Los nombres de punto de fijación tienen en cuenta el uso de mayúsculas y minúsculas.
Enlace vídeo: Crear un vínculo con un anclaje.
9.5. 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. En este tema
nos centraremos en aprender a abrir un vínculo en una página completamente nueva.
Abrir un vínculo en una página nueva
1. Seleccione el texto o la imagen a la que desee asociar el vínculo
2. En el campo Vínculo del panel Propiedades, escriba la dirección URL de la página que
desea vincular. Una vez introducida la dirección se activará el cuadro de lista Destino.
3. Haga clic sobre el botón del cuadro de lista desplegable Destino y seleccione _blank.
Como alternativa, también podrá escribirlo directamente en el campo de edición.
4. Para finalizar, realice una previsualización del documento para ver los resultados. Al
pulsar sobre el vínculo, el navegador abrirá una nueva ventana en la que mostrará la
página asociada, ofreciéndole al visitante dos ventanas disponibles a la vez.
9.6. 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.
Crear un vínculo de correo electrónico
Esto nos permitirá poner un vínculo a nuestro correo electrónico a través de Dreamweaver.
Seleccionamos el texto que identifique el correo, ejemplo, Enviar a mi correo, y seleccionamos en la
barra de herramientas y en la categoría Común el icono Vínculo de correo electrónico.

101
Seguidamente nos aparece un cuadro de diálogo para definir el texto de presentación y el correo
electrónico. Pulsamos Aceptar y vinculamos el texto seleccionado con el correo electrónico. Esta
opción también se puede realizar desde el menú Insertar y la opción Vinculo de correo electrónico.
NOTA: También podremos crear vínculos de correo electrónico escribiendo mailto: seguido de una
dirección de correo electrónico en el campo Vínculo del panel Propiedades.
Enlace vídeo: Crear un vínculo de correo electrónico.
9.7. 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.
Crear un mapa de imagen
Sitúese en la imagen del documento HTML. Active el panel Propiedades en el menú principal
Ventana. En la zona inferior izquierda de propiedades, aparece la casilla Mapa con varios elementos
de utilización: Circular, rectángulo, libre. Estos elementos se aplican a la zona interactiva de la
imagen para obtener varios puntos de acceso, vinculado a otra página, imagen, archivo o URL.
NOTA: Cada elemento que vayamos aplicando a la zona interactiva de la imagen hay que darle un
Mapa (Nombre) diferente y un vínculo para ese Mapa, así como también seleccionar el tipo de
destino.

102
NOTA: Dreamweaver nos permitirá modificar los mapas de imágenes que hemos creado de una
forma rápida. Podremos mover cualquier área previamente definida seleccionándola y arrastrándola
a una nueva posición, cambiar el tamaño de las zonas interactivas y borrar cualquier área existente
simplemente seleccionándola y pulsando la tecla SUPR.
Enlace vídeo: Crear un mapa de imagen.
9.8. 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.
Insertar un menú de salto
1. Coloque el cursor de texto en el lugar donde desee colocar el menú de salto.
2. En el menú Insertar, seleccione el comando Formulario y en el submenú que aparece,
escoja la opción Menú de salto. Se abre el cuadro de diálogo Insertar menú de salto.

103
3. Por defecto, aparece un primer elemento denominado “elemento1”. Si desea
cambiar el mensaje de selección que se mostrará en la lista de menú, escriba uno en
el campo de edición Texto.
4. Introduzca la URL para este elemento en el campo de texto Al seleccionarse, ir a URL,
o haga clic sobre el botón Examinar para buscar el archivo que vaya a vincular.
5. En el menú emergente Abrir URL en, seleccione la ubicación donde se abrirá el
archivo.
6. A continuación, haga clic en el botón con forma de signo más (+) para añadir un
nuevo elemento de menú.
7. Repita los pasos anteriores para definir otros elementos que se incluirán al menú de
salto.
8. Para añadir un botón Ir, en Opciones, active la opción Insertar botón Ir tras el menú.
9. Para finalizar, haga clic en el botón Aceptar. El menú de salto se añade en la ventana
de documento.
NOTA: Podremos realizar cambios en los elementos del menú de salto, utilizando el panel
Propiedades o el panel Comportamientos; modificar el orden de la lista o el archivo con el que se
vincula un elemento; y añadir, eliminar o renombrar un elemento.
9.9. Comprobación de vínculos rotos
Los Vínculos rotos son vínculos que no siguen una ruta válida, o que enlazan a archivo que no existe.
La existencia de estos vínculos en nuestras páginas es un error, ya que no permite navegar
correctamente a los usuarios por nuestro sitio, además del efecto negativo que causa.
Los servidores de tipo UNIX/Linux distinguen entre mayúsculas y minúsculas. Así, por ejemplo, si
enlazas a un archivo Peliculas.htm puede que el servidor no lo encuentre porque en realidad lo
hayas llamado peliculas.htm (en minúsculas). Trabajando con Windows este tipo de errores no se
presentan porque no hace esta distinción. En el ejemplo anterior Dreamweaver consideraría el
enlace Peliculas.htm como correcto aunque no lo fuese.
Para evitar esto puedes activar la opción Comprobación de vínculos con distinción entre mayúsculas
y minúsculas que se encuentra en la ventana de Configuración del Sitio, dentro de Configuración
avanzada en la categoría Información local.

104
Comprobar si nuestro sitio tiene vínculos rotos
1. En el menú Sitio seleccionamos la opción Comprobar vínculos en todo el sitio o
pulsamos la combinación de teclas CTRL+F8. Aparece el panel Verificador de vínculos.
2. En la imagen vemos que no se ha encontrado dos archivos enlazados, posiblemente
porque el nombre esté mal escrito.
3. Lo primero que hay que hacer es pulsar sobre el botón Comprobar vínculos, a través
del cual se ofrece la posibilidad de elegir dónde se comprobarán los vínculos rotos.
Puede ser en el documento actual, en todo el sitio, o en los archivos o carpetas del
sitio seleccionados previamente.
4. A través del desplegable Mostrar hay que especificar si han de mostrarse los Vínculos
rotos, los Vínculos externos o Archivos huérfanos.
 Vínculos rotos son los vínculos que no siguen una ruta válida, o que
enlazan a archivo que no existe.
 Vínculos externos son los vínculos a documentos que se encuentran
fuera del sitio, pero que no necesariamente son vínculos erróneos. No
comprueba si estos vínculos son correctos o no, simplemente los
enumera.
 A través de Vínculos huérfanos se muestran todos aquellos archivos
del sitio que no están siendo vinculados por otros, a la vez que
tampoco contienen vínculos a otros documentos. Estos documentos,
en ocasiones, pueden no estar siendo utilizados para nada, por lo que
simplemente están ocupando espacio en disco innecesariamente.
5. Podemos reparar los vínculos rotos pulsando sobre el vínculo roto y modificando
directamente el nombre del documento en el panel, o nos permite buscarlo a través
del icono con forma de carpeta que aparecerá a su derecha.

105
9.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”.
Recuerda…
El símbolo de almohadilla (#) se utiliza para crear un vínculo con un anclaje. Se pone delante del
nombre del anclaje, por ejemplo, #anc01.
Con la tecla SUPR eliminamos una región interactiva colocada en un mapa de imágenes.
El menú salto es un menú de lista emergente que muestra opciones con vínculos a documentos o
archivos.
Para trabajar con vínculos utilizamos uno de estos tipos: absolutos y relativos.
La categoría Común de la Barra de herramientas Insertar nos permite crear un anclaje o punto de
fijación con nombre.
Los anclajes son vínculos que nos permitirán desplazarnos de un modo automático a un punto
concreto de un documento.
La categoría Común de la Barra de herramientas Insertar nos permite crear un vínculo de correo
electrónico.
El mapa de imágenes es una imagen dividida en distintas regiones o zonas interactivas.

106
10. 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.
10.1. Funcionamiento de los formularios
Los formularios permitirán al usuario pasar información a los creadores o administradores de una
página Web. Hoy día, los formularios se emplean en la red para realizar encuestas, comercio
electrónico, libros de visitas, votaciones, etc. Para que estos funcionen correctamente, los
cuestionarios necesitan algún tipo de conexión a un servidor que, como norma general, toma la
forma de un guión CGI (Common Gateway Interface), aunque también se puede usar Java y
JavaScript.
Los formularios, al igual que ocurría con las tablas, se pueden concebir como unidades
independientes contenidas en una página Web. Todos los elementos de un formulario se almacenan
dentro de la etiqueta
A diferencia de las tablas, no podremos introducir formularios dentro de otros, aunque nada nos
impedirá que creemos varios formularios en un mismo documento.
10.2. 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 del panel 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.

107
 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.
 Grupo de casillas de verificación: Admiten múltiples respuestas en un solo grupo de
opciones. Un usuario puede seleccionar tantas acciones 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.
 Seleccionar (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.
 Etiqueta: Se utiliza para ponerle nombres al resto de elementos de formulario, para
que el usuario pueda saber qué datos ha de introducir en cada uno de ellos. Además,
al estar asociadas al control nos permite activarlo al pulsar sobre el texto. Esto es muy
práctico en casillas de verificación y botones de opción.
 Juego de campos: Permite agrupar en pantalla varios componentes de los vistos hasta
ahora.
10.3. 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:
 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.
 Los campos de formulario, campos de texto, menús, casillas de verificación o botones
de opción.
 El botón Enviar, que manda los datos a la secuencia de comandos CGI del servidor.

108
Añadir un formulario a un documento
1. Sitúe el cursor del ratón donde quiera que comience el formulario.
2. Si el panel Insertar no se encontrara abierta, diríjase al menú Ventana y escoja la
opción Insertar.
3. 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.
4. A continuación, pulse el botón Formulario. Aparece un contorno de línea de puntos
de color rojo en la ventana de documento.
NOTA: 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.
5. Si tenemos el panel Propiedades abierto, éste se transforma en uno específico para
formularios.
6. En el campo de edición ID de formulario, escriba un nombre exclusivo para el
formulario.
7. 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.
8. 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.

109
10.4. 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.
Crear un campo de texto de una línea
1. Coloque el cursor del ratón en el interior del formulario.
2. En la categoría Formularios del panel Insertar, haga clic sobre el botón Campo de
texto.
3. Dreamweaver crea un campo de texto en el documento y, en el panel Propiedades,
se muestran los atributos que pueden modificarse.
4. En el campo de edición Campo de texto, escriba un nombre exclusivo para el campo.
No utilice espacios para separar las palabras.
5. Podremos cambiar la longitud de un campo de texto insertando un nuevo valor en el
cuadro de texto Ancho car (Ancho en caracteres). Por defecto, Dreamweaver inserta
un campo de texto de aproximadamente 20 caracteres.
6. También podremos limitar el número de caracteres introduciendo un valor en el
cuadro de edición Car. máx. (Caracteres máximos).
7. En el área Tipo, deje activa Una línea que aparece por defecto. Esta opción nos
permitirá que el campo de texto sea de una línea.
8. Para finalizar, si lo desea, podrá introducir una cadena de texto por defecto,
escribiendo directamente en el campo de edición Val. Inicial (Valor inicial).
9. El valor establecido aparecerá en el campo de texto cuando se cargue el formulario
en el navegador.

110
Crear campos de contraseña
texto. Dreamweaver crea un campo de texto en el documento.
4. En el área Tipo, active la opción Contraseña. Esta opción hará que el texto que
introduzcamos en ese campo se muestre con asteriscos.
Crear un campo de texto de varias líneas
texto. Dreamweaver crea un campo de texto en el documento.
4. En el área Tipo, active la opción Varias líneas. Esta opción ofrece mayor espacio al
visitante para escribir la respuesta; será igual que si utilizase el comando Área de
texto. El panel Propiedades cambia mostrando los atributos que pueden modificarse.
5. Podremos cambiar la longitud de un campo de texto insertando un nuevo valor en el
cuadro de texto Ancho car (Ancho en caracteres).
6. También podremos limitar el número de líneas de un campo introduciendo un valor
en el cuadro de edición Líneas núm (Número de líneas). En este caso, no se puede
restringir el número de caracteres que puede introducir el usuario.
7. Para finalizar, si lo desea, podrá introducir una cadena de texto por defecto,
escribiendo directamente en el campo de edición Val. inicial(Valor inicial). El valor
establecido aparecerá en el campo de texto cuando se cargue el formulario en el
navegador.

111
10.5. 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.
Crear un campo de texto oculto
2. En la categoría Formularios del panel Insertar, haga clic sobre el botón Campo
oculto.
3. Dreamweaver añade un marcador al documento y, en el panel Propiedades, se
muestran los atributos que pueden modificarse.
4. En el campo de edición Campo oculto, escriba un nombre exclusivo para el campo.
5. Para finalizar, en el área Valor, escriba el texto que desea asignar al campo.
10.6. 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.

112
Insertar casillas de verificación
2. En la categoría Formularios del panel Insertar, haga clic sobre el botón Casilla de
verificación.
3. El panel Propiedades cambia mostrando los atributos que pueden modificarse.
4. En el campo de edición Nombre de casilla, escriba un nombre descriptivo para la
casilla de verificación. No utilice espacios para separar las palabras.
5. En el cuadro de edición Valor activado, introduzca la información que desea que pase
a un programa cuando el usuario marque la casilla de verificación.
6. Por defecto, la casilla de verificación aparecerá sin marcar, pero podremos cambiar
esto modificando la opción Estado inicial de Desactivado a Activado.
10.7. Grupo de casillas de verificación
Los Grupo de casillas de verificación de un formulario HTML nos permite crear de una forma más
rápida y efectiva un conjunto de casillas de verificación para poder asignar los estados válido o no
válido cuando el usuario selecciona una casilla o cuando no la selecciona.
Crear un grupo de casillas de verificación
2. En la categoría Formularios del panel Insertar, haga clic sobre el botón Grupo de
casillas de verificación.
3. Se abre el cuadro de diálogo Grupo de casillas de verificación. Por defecto el
programa genera dos etiquetas.
4. En el campo de edición Nombre, escriba un nombre descriptivo para el grupo de
casillas de verificación. No utilice espacios para separar las palabras.

113
5. En el área Label cambie los nombres por defecto por los que desee o elimínelos
pulsando el botón con un signo (-) en el área Casillas de verificación.
6. Para añadir nuevas casillas pulse sobre el botón con un signo (+) en el área Casillas de
verificación.
7. Utilice las flechas Arriba y Abajo para posicionar las casillas en el orden que desee.
8. En el área Disponer utilizando active Saltos de línea (etiquetas <br>) o
Tabla dependiendo de cómo desee colocar las casillas de verificación.
9. Pulse el botón Aceptar. Dreamweaver genera el grupo de casillas de verificación.
10. Para finalizar, podremos utilizar el panel Propiedades para activar y desactivar las
casillas que desee.
10.8. 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.
Insertar botones de opciones
2. En la categoría Formularios del panel Insertar, haga clic sobre el comando Botón de
opción, o bien sobre Grupo de opción si necesita más de un botón.
3. En este último caso, se abre el cuadro de diálogo Grupo de opción mostrando por
defecto dos botones.
4. En el campo de edición Nombre, escriba un nombre descriptivo para el grupo de
botones de opciones. No utilice espacios para separar las palabras.
5. En el área Label cambie los nombres por defecto por los que desee o elimínelos
pulsando el botón con un signo (-) en el área Botones de opción.

114
6. Para añadir nuevas casillas pulse sobre el botón con un signo (+) en el área Botones
de opción.
7. Utilice las flechas Arriba y Abajo para posicionar las casillas en el orden que desee.
8. En el área Disponer utilizando active Saltos de línea (etiquetas <br>) o
Tabla dependiendo de cómo desee colocar las casillas de verificación.
9. Pulse el botón Aceptar. Dreamweaver genera el grupo de botones de opciones.
10. Para finalizar, podremos utilizar el panel Propiedades para activar y desactivar las
casillas que desee las haya creado de forma individual o en grupo.
10.9. 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.
Crear un menú desplegable
2. En la categoría Formularios del panel Insertar, haga clic sobre el botón Seleccionar
(Lista/Menú).
4. En el campo de edición Seleccionar, escriba un nombre exclusivo para el menú. No
utilice espacios para separar las palabras.
5. En el área Tipo, deje activa la opción Menú.
6. Haga clic con el ratón en el botón Valores de lista para añadir las distintas opciones
del menú emergente. Se abre el cuadro de diálogo Listar valores.

115
7. Coloque el cursor del ratón en el campo Etiqueta de elemento y escriba el texto que
aparecerá en el menú.
8. En el campo Valor, escriba el texto o los datos que desee que sean enviados al
servidor cuando el usuario seleccione esta opción.
9. Para añadir otro elemento al menú, haga clic con el ratón en el botón con forma de
signo más (+) y repita los pasos anteriores.
10. Una vez añadidos todos los elementos del menú, haga clic en Aceptar para cerrar el
cuadro de diálogo.
11. Utilizando la parte ampliada del panel Propiedades, podremos seleccionar qué
elemento se mostrará, por defecto, cuando el menú se muestre en un navegador.
10.10. Creación de listas
Las listas desplazables nos permitirán configurar varias opciones en un espacio limitado. A diferencia
de los menús delegables, 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.
Crear una lista de desplazamiento
2. En la categoría Formularios del panel Insertar, haga clic sobre el botón Seleccionar
(Lista/Menú).
3. En el área Tipo del panel Propiedades, active la opción Lista. Se muestran los
atributos que pueden modificarse.
4. En el campo de edición Seleccionar, escriba un nombre exclusivo para la lista. No
utilice espacios para separar las palabras.
5. En el campo de edición Alto, escriba el número de líneas que se mostrarán en la lista.
6. Si desea permitir que los usuarios seleccionen más de una opción de la lista, active la
casilla Permitir múltiples situada en el área Selecciones.
7. Haga clic con el ratón en el botón Valores de lista para añadir las distintas opciones
de la lista. Se abre el cuadro de diálogo Listar valores.

116
8. Coloque el cursor del ratón en el campo Etiqueta de elemento y escriba el texto que
aparecerá en la lista.
9. En el campo Valor, escriba el texto o los datos que desea enviar al servidor cuando el
usuario seleccione esta opción.
10. Para añadir otro elemento a la lista, haga clic con el ratón en el botón con forma de
signo más (+) y repita los pasos anteriores.
11. Una vez añadido todos los elementos de la lista, haga clic en Aceptar para cerrar el
cuadro de diálogo.
12. Utilizando la parte ampliada del panel Propiedades, podremos establecer qué
elemento se mostrará, por defecto, cuando la lista se muestre en un navegador.
10.11. 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.
Crear un botón de texto
2. En la categoría Formularios del panel Insertar, haga clic sobre el Botón.
3. El panel Propiedades cambia, mostrando los atributos que pueden modificarse.
4. En el campo de edición Nombre del botón, escriba un nombre para éste. No utilice
espacios para separar las palabras.
5. En el campo Valor, escriba el texto que desea que se muestre en el botón.
6. Para finalizar, en el área Acción, active el tipo de botón que desea crear:
 Enviar formulario: Es la opción activa por defecto y permite enviar el
formulario para su procesamiento.
 Restablecer formulario: Permite restablecer un formulario de forma
que los usuarios puedan corregir la información antes de enviarla.
 Ninguno: Permite llevar a cabo otro tipo de procesos previamente
definidos mediante una secuencia de comandos.
Crear un botón gráfico
imagen.
3. En el cuadro de diálogo Seleccionar origen de imagen, localice la imagen que quiera
utilizar y pulse en el botón Aceptar.
5. En el campo de edición Campo imagen, escriba un nombre para el botón. No utilice
espacios para separar las palabras.
6. En el campo Alt, escriba el texto que desea que aparezca en lugar de la imagen en los
navegadores que sólo admiten texto.

117
10.12. 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.
Insertar un campo de archivo
archivo.
4. En el campo de edición Campo archivo, escriba un nombre. No utilice espacios para
separar las palabras.
5. Podremos cambiar la longitud del campo de texto, insertando un nuevo valor en el
cuadro de texto Ancho car (Ancho en caracteres).
6. Para finalizar, también podremos limitar el número de caracteres, introduciendo un
valor en el cuadro de edición Car máx (Caracteres máximos).
10.13. 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”.

118
Recuerda…
Para poder insertar un formulario en el contorno que no se encuentra visible en la ventana de
documento hay que activar la opción Elementos invisibles de la categoría Ayudas visuales en el
menú Ver.
El número de caracteres que permite los campos de texto para insertar Dreamweaver son de 20
caracteres.
No se puede utilizar los campos de textos ocultos para introducir datos, son campos invisibles que se
colocan en un documento para recopilar o enviar una información.
En un documento Dreamweaver existen 3 campos de textos para que el usuario escriba unas
respuestas, estos son:
 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.
Para crear las distintas entradas de un formulario, nos vamos a la Barra de herramientas Insertar y
escogemos la pestaña de Categoría Formularios.

119
11. 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.
11.1. Almacenamiento de elementos en Dreamweaver
Las bibliotecas constituyen un medio de almacenaje para todos aquellos elementos de una página
(imágenes, texto y otros objetos) que solemos reutilizar o actualizar con frecuencia en un sitio Web.
Cuando colocamos en un documento un elemento almacenado en la biblioteca de Dreamweaver, en
realidad, estamos insertando una copia del código HTML de ese elemento en el documento y,
además, se añade un comentario que hace referencia al elemento original. Dreamweaver almacena
los elementos de biblioteca en una carpeta llamada LIBRARY dentro de la carpeta raíz local del sitio
en el que estemos trabajando. Cada sitio tendrá su propia biblioteca.
11.2. 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.

120
11.3. 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.
Acceder a la paleta Activos
En el menú Ventana pulsamos la opción Activo o la tecla rápida F11. Se nos aparece una ventana con
los archivos, donde podremos trabajar con diferentes elementos, como son imágenes, textos,
colores, vínculos, plantillas, películas, biblioteca, etc.
Enlace vídeo: Acceder a la paleta Activos.
11.4. 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.
Insertar un elemento de biblioteca en un documento
Para ello, situar el cursor del ratón sobre la ventana del documento donde se quiere insertar la
imagen. En el panel Activos seleccione la categoría imágenes y escoja la imagen que desee insertar
en el documento, con el ratón arrastrera a la zona donde desea insertarla.

121
De igual modo se puede hacer también seleccionando la imagen y pulsando el botón Insertar que se
encuentra debajo del panel Activos.
Enlace vídeo: Insertar un elemento de biblioteca en un documento.
11.5. 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.
Actualizar los documentos que usan un elemento de biblioteca
1. En el menú Modificar, seleccione el comando Biblioteca y, en el submenú que
aparece, escoja la opción Actualizar páginas. Se abre el cuadro de diálogo con el
mismo nombre.
2. En el menú emergente Buscar en escoja una de las siguientes opciones:
 Todo el sitio: Se actualizan todas las páginas del sitio seleccionado en
la lista desplegable de la derecha.
 Archivos que usan: Se actualizan todas las páginas del sitio que usan el
elemento de biblioteca seleccionado en la lista desplegable de la
derecha.
3. A continuación, asegúrese de que Elementos de biblioteca esté activado en el
área Actualizar.

122
4. Si desea actualizar también las plantillas, asegúrese de que también esté activada la
opción Plantillas situada justo debajo.
5. Para finalizar, haga clic en el botón Iniciar. Si se activó la opción Mostrar registro,
Dreamweaver nos proporciona información sobre los archivos que intenta actualizar,
indicando si han sido actualizados correctamente.
Recuerda…
Si realizamos una modificación a un elemento incluido en la biblioteca debemos actualizar los
documentos que usan ese elemento.
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.
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.

123
12. 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.
12.1. Creación de plantillas
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.
Crear una plantilla nueva desde el panel Activos
En el menú Ventana seleccionamos la opción Activos o pulsando la tecla rápida F11 se nos abre el
panel Activos. En la categoría de la izquierda pulsamos el icono Plantillas, en la parte inferior
pulsamos Nueva plantilla e introducimos el nombre.
Enlace vídeo: Crear una plantilla nueva desde el panel Activos.

124
NOTA: Para cambiar el nombre a una plantilla desde la paleta Activos, procederemos del mismo
modo que cuando renombramos archivos en Windows. Haga un primer clic para seleccionar la
plantilla que desea renombrar y, tras una breve pausa, realice otro segundo para editar el nombre.
No haga un doble clic en el nombre, ya que abrirá la plantilla.
Guardar un documento existente como plantilla
Nos vamos al menú principal Archivos y pulsamos Abrir, en el buscamos el archivo HTML que
deseamos nos sirva como plantilla. Seguidamente volvemos abrir el menú Archivo y pulsamos la
opción Guardar como plantilla nos aparece una ventana para guardar nuestra plantilla.
Hay que seleccionar el sitio o carpeta local donde guardar nuestra plantilla. Se le puede dar una
breve descripción de nuestra plantilla y por último introducir un nombre. Aplicamos el nombre a la
plantilla y pulsamos Guardar. Seguidamente Dreamweaver nos solicita si queremos actualizar los
vínculos y pulsamos SI. Aparece en el panel Activos la plantilla creada con extensión .dwt y sus
vínculos.
Enlace vídeo: Guardar un documento existente como plantilla.
12.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.
Modificar las propiedades de una plantilla
1. Abra el archivo de plantilla que desee y, en el menú Modificar, seleccione la
opción Propiedades de la página.

125
2. Utilice el cuadro de diálogo Propiedades de la página para especificar las opciones que
desee modificar y haga clic en el botón Aceptar para guardar los cambios efectuados en
la plantilla.
3. Para actualizar el documento abierto con la versión modificada de la plantilla, en el
menú Modificar, seleccione Plantillas y, en el submenú que aparece, escoja la
opción Actualizar página actual.
4. Si desea actualizar un sitio completo con la plantilla modificada, en primer lugar,
seleccione Plantillas en el menú Modificar y, en el submenú que aparece, escoja la
opción Actualizar páginas. Se abre el cuadro de dialogo con el mismo nombre.
5. En el menú emergente Buscar en, escoja una de las siguientes opciones:
 Todo el sitio: Se actualizan todas las páginas del sitio seleccionado en la
lista desplegable de la derecha.
 Archivos que usan: Se actualizan todas las páginas del sitio que usan la
plantilla seleccionada en la lista desplegable de la derecha.
6. A continuación, asegúrese de que la casilla de verificación Plantillas esté activada en el
área Actualizar.
7. Para finalizar, haga clic en el botón Iniciar. Si se activó la opción Mostrar registro,
Dreamweaver nos proporciona información sobre los archivos que intenta actualizar,
indicando si han sido actualizados correctamente.

126
12.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.
Crear regiones editables en una plantilla
Seleccione el texto o el contenido de un documento o una plantilla abierta que desea convertir
editable dentro de la plantilla.
Clic con el botón derecho del ratón aparece un menú contextual, pulse Plantilla y seguidamente en el
submenú pulse Nueva región editable. Introduzca el nombre y pulse Aceptar, en el documento
HTML aparecerá la región editable. Se puede hacer tantas como se desee.
Enlace vídeo: Crear regiones editables en una plantilla.
Crear una región editable vacía
Para crear una región editable vacía coloque el cursor del ratón en cualquier parte del documento
HTML, donde desee crearla y a continuación pulse el botón derecho del ratón y en el menú
contextual seleccione Plantilla y en el submenú pulse la opción Nueva región editable. Aparece una
ventana para introducir el nombre de la nueva región editable que vamos a crear, pulsamos Aceptar,
y seguidamente nos aparece la región editable vacía, en el lugar que habíamos posicionado el cursor
del ratón.
NOTA: Podremos marcar una tabla entera o una celda individual de una tabla como región editable
de una plantilla. Las capas y el contenido de las mismas se comportarán como elementos distintos; al
hacer editable una capa, podremos cambiar de posición tanto la capa como su contenido, mientras
que, al hacer editable el contenido de una capa, sólo podremos cambiar el contenido de la misma y
no su posición.
Enlace vídeo: Crear una región editable vacía.

127
12.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.
Bloquear una región de una plantilla
1. Seleccione el texto o la región que desee bloquear en la plantilla.
2. Presione sobre él con el botón secundario del ratón y se desplegará un menú contextual.
3. Desplácese hasta la opción Plantillas y, seguidamente hasta la orden Quitar formato de
plantilla.
4. La región quedará bloqueada y el marco resaltado que delimitaba el área desaparecerá.
12.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.
Crear un nuevo documento basado en una plantilla
1. En el menú Archivo, seleccione la opción Nuevo. Se abre el cuadro de diálogo Nuevo
documento.
2. Seleccione la opción Plantilla en blanco.
3. Dentro de la lista Tipo de plantilla, localice el sitio de donde desee seleccionar la
plantilla.
4. En la lista de la derecha se mostrarán las plantillas pertenecientes al sitio
seleccionado y si presiona sobre cualquiera de ellas, podrá ver una vista previa.
5. Para finalizar, haga clic en el botón Crear.

128
Aplicar una plantilla a un documento existente de Dreamweaver
1. Haga clic con el cursor del ratón en la vista de diseño de la ventana de documento.
2. En el menú Modificar, seleccione Plantillas y, en el submenú que aparece, escoja la
opción Aplicar plantilla a página. Se abre el cuadro de diálogo Seleccionar plantilla.
3. En la lista desplegable Sitio, localice el sitio de donde desee seleccionar la plantilla.
4. A continuación, seleccione una plantilla de la lista Plantillas y haga clic en el
botón Seleccionar.
12.6. 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.
Recuerda…
El panel Activos lo utilizaremos para cambiar el nombre de una plantilla.
Para crear una región editable en una plantilla utilizaremos la opción Nueva región editable en el
submenú Plantillas del menú contextual.
Para cambiar el color de resalte de las regiones editables de una plantilla utilizaremos la categoría
Resaltando del cuadro de diálogo Preferencias.
En la carpeta LIBRARY que se crea en el raíz del sitio Web es donde almacena Dreamweaver los
elementos de biblioteca.
Para proceder a aplicar una plantilla a un documento existente de Dreamweaver utilizaremos la
opción Aplicar plantilla a página en el submenú Plantillas del menú Modificar.

129
13. ELEMENTOS MULTIMEDIA
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. Para
finalizar, vamos a ver cómo insertar elementos multimedia cómo animaciones Flash o un sonido.
13.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.
 Flash Video (FLV): Es el formato de vídeo utilizado para transmitir video por Internet
usando Adobe Flash Player. Utiliza la extensión de archivo *.flv o pueden ser
incrustados dentro de archivos *.swf. Entre los sitios más notables que utilizan el
formato FLV se encuentran YouTube, Google Video, Reuters.com, Yahoo! Video y
MySpace.

130
13.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.
Incorporar un archivo de vídeo en un documento de Dreamweaver
Para comenzar seleccione el texto o imagen que desea vincular a un archivo de vídeo. Abra el panel
de Propiedades, seleccionando el menú Ventana y pulsando Propiedades. Diríjase al panel de
Propiedades y en la casilla vínculo inserte la dirección donde se encuentra el archivo de video.
En la casilla ALT podrá especificar el tamaño del video u otra información relevante, que aparecerá
cuando seleccionamos la imagen con el ratón.
Enlace vídeo: Incorporar un archivo de vídeo en un documento de Dreamweaver.
13.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 de la siguiente
manera:
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.

131
Visualizar un vídeo directamente desde la Web
1. Coloque el cursor del ratón en el lugar de la ventana de documento en el que quiera
insertar la imagen.
2. Si la paleta Insertar no se encontrara abierta, diríjase al menú Ventana y escoja la
opción Insertar.
3. Asegúrese de que la categoría Común esté activa en el panel y haga clic en el
botón Imágenes: Imagen.
4. Cuando se abra el cuadro de diálogo Seleccionar origen de imagen, localice y cargue
la imagen que quiera insertar.
5. En la parte superior de la ventana de documento, pulse el botón Código.
6. Localice la etiqueta <img> y añada el código del atributo dynsrc. Recuerde que en
este atributo debe especificar la ruta del archivo de vídeo.
7. Si su navegador no soporta el atributo dynsrc al visualizar la página, se representará
la imagen que insertó anteriormente.
13.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>.

132
Añadir una película QuickTime a un documento de Dreamweaver
1. Sitúe el cursor del ratón donde quiera insertar el vídeo de QuickTime.
2. Despliegue el menú Insertar de la barra de menús y seleccione la opción Media.
3. En el submenú que se muestra, presione sobre la orden Plug-in. Se abre el cuadro de
diálogo Seleccionar archivo.
4. En el campo de edición Nombre, escriba el nombre y la ruta de acceso del archivo
QuickTime que desea abrir.
5. Para terminar, pulse Aceptar.
6. En el panel Propiedades, introduzca la anchura y la altura en los campos de
edición An y Al.
7. En el campo de edición URL plg, escriba la dirección de Internet a la que desee que se
dirijan los visitantes que no tengan instalado el plug-in requerido. Para las películas de
QuickTime, la dirección es http://www.apple.com/quicktime/download/.
8. Para finalizar, si lo desea y para comprobar que todo es correcto, pulse el botón
Reproducir para previsualizar la película del mismo modo que ocurriría si estuviera en
la red.
9. Si lo deseamos, podremos pulsar el botón Parámetros para configurar los
parámetros de QuickTime. Observe la tabla que aparece a continuación; en ella, se
explicarán los parámetros que podremos utilizar:

133
13.5. Insertar RealVídeo 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.
Crear un meta archivo de RealVideo
1. Abra un editor de texto y escriba las líneas necesarias para apuntar al servidor y al vídeo
que desea visualizar.
2. RealVideo direcciona usando el protocolo rtsp:// (Real Time Streaming Protocol). El
archivo de texto contendrá líneas de la siguiente forma
genérica: rtsp://servidor/ruta/archivo
3. Así, por ejemplo, si queremos reproducir un vídeo concreto, el meta archivo indicará la
ruta donde se encuentra el vídeo a visualizar.
Insertar RealVideo usando un enlace
1. Seleccione el texto o la imagen que desee utilizar como enlace al archivo de vídeo.
opción Propiedades
3. En el campo de edición Vínculo, escriba la ruta y el nombre de archivo de vídeo o haga
clic en el icono de carpeta, situado a la derecha de dicho campo, para localizar y
seleccionar un archivo.
13.6. Inserción de archivos FLV
Con Dreamweaver podremos añadir fácilmente vídeos FLV a las páginas Web sin necesidad de utilizar
la herramienta de creación de Flash. Para poder empezar, debe disponer de un archivo FLV
codificado.
El programa se encargara de insertar un componente SWF que muestra el archivo FLV; cuando se
visualiza en un navegador, este componente muestra el archivo FLV seleccionado, así como un
conjunto de controles de reproducción.

134
Dreamweaver ofrece las opciones siguientes para mostrar vídeo FLV a los visitantes de su sitio:
 Descarga progresiva de vídeo: Descarga el archivo FLV en el disco duro del visitante del
sitio y lo reproduce. Sin embargo, a diferencia de los métodos tradicionales de entrega de
vídeo de tipo “descarga y reproducción”, la descarga progresiva permite iniciar la
reproducción del archivo de vídeo antes de que haya finalizado la descarga.
 Flujo de vídeo: Transfiere el contenido de vídeo y lo reproduce en una página Web
transcurrido un breve periodo de búfer que garantice una reproducción fluida. Para
activar el flujo de vídeo en las páginas Web, debe tener acceso a Adobe® Flash® Media
Server. Debe contar con un archivo FLV codificado para poder utilizarlo en Dreamweaver.
NOTA: Al igual que sucede con los archivos SWF, al insertar un archivo FLV, Dreamweaver inserta
código que detecta si el usuario dispone de la versión correcta de Flash Player para ver el vídeo. Si el
usuario carece de la versión correcta, la página muestra contenido alternativo que solicita al usuario
que descargue la versión más reciente de Flash Player.
Inserción y configuración de un archivo FLV
Para insertar y configurar un archivo FLV en nuestro documentó HTML diríjase al menú Insertar y
pulse la opción Media, en el submenú seleccione FLV. A continuación nos aparecerá un cuadro de
diálogo que nos permite configurar el tipo de video, la ruta del archivo FLV, aspecto, ancho y alto,
reproducción y rebobinado automático, etc.
En el tipo de vídeo seleccionamos Descarga progresiva del vídeo. En la URL introducimos la ruta
relativa donde se encuentra el archivo FLV, que puede ser tanto un archivo ubicado en nuestra
carpeta local como en internet. En la opción aspecto elegimos el que más nos convenga para nuestro
diseño y presentación. Introducimos el tamaño, si sabemos el ancho y alto de nuestro video o de lo
contrario pulsamos el botón Detectar tamaño. Activamos Reproducción automática, para cuando se
accede a nuestra página automáticamente se ejecuta el vídeo y el rebobinado automático, nos
permite continuar con la reproducción hasta que el usuario lo interrumpa o lo detenga.
Enlace vídeo: Inserción y configuración de un archivo FLV.

135
13.7. Películas Flash (SWF)
Las películas Flash son animaciones, cuyos archivos tienen las extensiones SWF. Es frecuente verlas
en las páginas iniciales de los sitios web, a modo de presentación hacia los usuarios, así como en
banners publicitarios o en botones. Flash es el elemento multimedia más empleado en las páginas
web que se desarrollan hoy día.
Estas películas pueden crearse mediante el programa Adobe Flash. Para poder ser visualizadas por el
navegador es necesario que el usuario tenga instalado el plug-in de Flash Player. Su instalación es
muy sencilla y normalmente ya viene con el navegador o puede hacerlo directamente desde
Internet.
Insertar una película de Flash en un documento de Dreamweaver
1. En el menú Insertar seleccione la opción Media y a continuación en el nuevo
submenú que aparece escoja la opción SWF o pulse la combinación de teclas
pulsando CTRL+ALT+F.
2. En el cuadro de diálogo Seleccionar SWF localice el archivo de Flash que desee
insertar en nuestro documento y pulse sobre el botón Aceptar.
3. Al insertarse la película, veremos la ubicación en la vista de diseño con el siguiente
aspecto:
4. Veamos las opciones más importantes que nos ofrece el panel Propiedades cuando
tenemos seleccionado el archivo Flash que acabamos de abrir.
5. Si disponemos de Flash instalado en el equipo, y vamos a ir haciendo cambios sobre el
archivo original (.fla), nos resultará muy útil indicar su ubicación en Origen. Así, para
editarlo, bastará con pulsar el botón Editar.
6. La opción Bucle indica que al finalizar la película, ésta volverá a comenzar desde el
principio.
7. La otra es la opción Reproducción automática, que al estar activada por defecto y
que indica que nada más cargarse la página comenzará a reproducirse la película
Flash dentro de la página. Si esta opción no estuviera activada, se mostraría
únicamente el primer fotograma de la película hasta que el usuario la activase. Por
tanto interesa desactivar esta opción cuando se desea que la reproducción sea
activada por algún comportamiento.
8. El desplegable Calidad nos permite configurar la calidad de visualización del archivo
SWF, cuanto más baja sea la calidad, antes se cargará el archivo pero peor se verá.
Conviene dejarla en Alta para verlo tal cuál se creó.

136
9. Con el desplegable Escala podremos elegir cuanto se verá del archivo. Las películas
Flash no siempre son del tamaño exacto del contenido, pueden tener un escenario de
fondo alrededor del objeto, aunque no se muestre. Si dejamos Predeterminada, se
verá toda la película. En cambio, si elegimos Ajuste exacto, se verán sólo los objetos,
omitiendo el escenario de fondo.
10. El desplegable Alinear funciona como con las imágenes, y nos permite alinear la
película en relación con el texto. Si queremos centrarla horizontalmente, podemos
optar por centrar el contenido del elemento que contiene el Flash (normalmente un
párrafo) empleando CSS.
11. Wmode es el modo de ventana. Si es opaco, otros elementos pueden aparecer sobre
el Flash. En cambio, si es transparente, el fondo se verá transparente (a no ser que se
haya especificado un color de fondo en el Flash).
12. El botón Reproducir nos permite ver la película.
NOTA: Al insertarse animaciones Flash, es frecuente que Dreamweaver añada algunos archivos que
nos permitirán reproducir los elementos, normalmente creando la carpeta Scripts. Es importante
incluir esta carpeta cuando publiquemos nuestro sitio, si no los archivos no se verán. De todas
formas, Dreamweaver nos avisará cuando incluya archivos.
13.8. Sonido
Hoy día no es muy usual incluir sonidos en una página Web, ya que algunos usuarios suelen estar
escuchando su propia música cuando navegan en Internet, por lo que el escuchar también sonido en
cada página que se visita puede resultar algo molesto.
A pesar de ello, el incluir un sonido agradable, apropiado al contenido de la página, puede hacerla
más atractiva. Las páginas que contienen sonido suelen ofrecer la posibilidad de activarlo o
desactivarlo, para que aquellos usuarios que no deseen escuchar el sonido de la página puedan
anularlo. Siempre es mejor poder hacer eso que el usuario abandone la página amargado por dicha
música que no siempre tiene porque ser de su gusto.
Los formatos de sonido más habituales en Internet son, fundamentalmente, el MP3, el WAV y en
algunas ocasiones el MIDI, aunque existen otros formatos diferentes que también pueden utilizarse.
Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala
calidad.
Insertar un archivo de sonido en un documento de Dreamweaver
Para ello, nos vamos al menú Insertar, seleccionamos la opción Media y en el submenú pulsamos
Plug-in. Nos aparece una ventana de diálogo para seleccionar el archivo de sonido: nombre, ruta y
tipo.

137
Una vez introducido los datos del archivo de sonido pulsamos Aceptar. Es importante destacar que
los archivos de sonido solamente se reproducen una sola vez. Si queremos cambiar alguno de estos
parámetros debemos ampliar el panel de Propiedades y pulsar el botón Parámetros que aparece en
la parte baja del panel apareciendo la siguiente ventana:
NOTA: En el caso de no especificar ningún tamaño, se mostrará el tamaño por defecto de los
controles, como ocurre en el ejemplo de arriba. Si lo que se desea es que se escuche el sonido en la
página, pero que no se muestren los controles de audio, los campos Al y An deben valer cero.
Lo más habitual en la Web es insertar el sonido empleando archivos de Flash. Esto hace que no se
necesiten plugins, sólo poder reproducir archivos SWF. Además, nos permite crear los controles de
una forma personalizada.
Enlace vídeo: Insertar un archivo de sonido en un documento de Dreamweaver.
13.9. 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

138
Recuerda…
Los siguientes formatos de vídeos son soportados por Dreamweaver:
- Video for Windows.
- MPEG.
- QuickTime.
El parámetro AutoPlay de QuickTime permitirá comenzar la reproducción de una película en cuanto
se haya descargado suficientemente.
La línea de código loop="true" hace que la reproducción se repita.
Todos los objetos insertados a través de la opción Plug-in precisan que el usuario tenga instalado un
reproductor o un plug-in apropiado para reproducirlos.
La categoría Común de la Barra de herramientas Insertar utilizaremos para insertar un objeto plug-in.
El parámetro autostart="false" hace que un archivo de vídeo y audio no se reproduzca
automáticamente.
La extensión *.ram utilizan los meta archivos que permiten visualizar un vídeo de RealPlayer.

139
14. 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.
14.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.
 onBlur: Se genera cuando un elemento especificado deja de ser el foco de interacción
del visitante.
 onClick: Se genera cuando el visitante hace clic en un elemento especificado, como un
vínculo, un botón o un mapa de imagen.

140
 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.
 onFocus: Se genera cuando el elemento especificado se convierte en el foco de
interacción del visitante.
 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.
 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.

141
14.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.
Añadir un comportamiento a su página Web
1. Seleccione un objeto en la ventana de documento de Dreamweaver.
2. En el menú Ventana, seleccione la opción Comportamientos para abrir el panel del
mismo nombre.
3. Haga clic con el ratón sobre el botón (+) para mostrar las opciones disponibles para la
etiqueta del objeto seleccionado.
4. A continuación, elija una opción del menú desplegable. A cada acción le corresponde
un cuadro de diálogo con opciones específicas que podremos configurar. A lo largo de
este capítulo, veremos las más interesantes.

142
14.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.
Utilizar el comportamiento Llamar JavaScript
1. Seleccione el objeto que iniciará la acción y abra el panel Comportamientos.
2. Haga clic sobre el botón de signo más (+) y elija Llamar JavaScript en el menú
emergente que aparece.
3. Introduzca el código JavaScript exacto que ejecuta una función en el cuadro de
edición del cuadro de diálogo Llamar JavaScript.
4. Para finalizar, haga clic sobre el botón Aceptar.
14.4. Cambiar propiedad
Con la acción Cambiar propiedad podremos cambiar dinámicamente las propiedades de las
siguientes etiquetas:
Utilizar la acción Cambiar propiedad
2. Haga clic sobre el botón de signo más (+) y elija Cambiar propiedad en el menú
emergente que aparece. Se abre el cuadro de diálogo Cambiar propiedad.
3. En el menú de lista desplegable Tipo de elemento, elija la etiqueta cuya propiedad
desee cambiar.

143
4. En la lista desplegable ID de elemento, elija el objeto de la página que desee
modificar.
5. En el área Propiedad, asegúrese de que la opción Seleccionar esté activa.
6. En la lista desplegable situada justo al lado derecho, seleccione la propiedad a
modificar.
7. A continuación, elija el navegador de destino en la pequeña lista desplegable situada
junto a la anterior.
8. Para finalizar, en el cuadro de texto Nuevo valor, escriba los nuevos valores de la
propiedad y haga clic en el botón Aceptar.
14.5. 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.
Usar la acción Comprobar Plug-in
2. Haga clic sobre el botón de signo más (+) y elija Comprobar plug-in en el menú
emergente que aparece. Se abre el cuadro de diálogo Comprobar Plug-in.
3. En el área Plug-in, asegúrese de que Seleccionar esté activado y escoja el plug-in que
desee en el menú situado a la derecha. Por defecto, Dreamweaver nos ofrece los
cinco plug-ins que es capaz de detectar: Flash, Shockwave, LiveAudio, QuickTime y
Windows Media Player.
4. Si desea detectar otro plug-in distinto a los predeterminados, active la opción
Introducir y escriba el nombre exacto del plug-in en el campo de edición de la
derecha.
5. En el campo de edición Si se encuentra, ir a URL, especifique una dirección para los
navegantes que tengan instalado el plug-in. Para hacer que los visitantes que
dispongan del plug-in permanezcan en la misma página, deje vacío este campo.
6. En el campo de edición De lo contrario, ir a URL, indique la dirección alternativa a la
que redireccionará a los usuarios que no dispongan de dicho plug-in.
NOTA: Internet Explorer no permite detectar la mayoría de los plug-ins. De forma
predeterminada, cuando esta detección resulta imposible, se redirecciona al
navegante al URL indicado en el campo De lo contrario, ir a URL.

144
7. Active la opción Ir siempre al primer URL si no es posible detectar para hacer que, de
forma predeterminada, Dreamweaver dé por hecho que el visitante dispone del plug-
in.
8. Para finalizar, haga clic en el botón Aceptar.
14.6. 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.
Crear un mensaje emergente de JavaScript
2. Haga clic sobre el botón de signo más (+) y elija Mensaje emergente en el menú que
aparece. Se abre el cuadro de diálogo Mensaje emergente.
3. En el campo de edición Mensaje, escriba el mensaje de alerta que desea que
aparezca.
14.7. Arrastrar capa
Utilice la acción Arrastrar elemento PA 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:
1. Especificar la dirección en la que el visitante puede arrastrar la capa
(horizontalmente, verticalmente o en cualquier dirección).
2. Elegir el destino hasta el que el visitante puede desplazar la capa.
3. Determinar si la capa debe ajustarse al destino cuando aquélla se encuentre a un
cierto número de píxeles del destino.
4. Proporcionar un método alternativo de recorte, dejando que sólo se pueda arrastrar
una parte de la capa.
5. Permitir un orden distinto de almacenamiento de capas mientras se arrastran o al
liberar el botón del ratón.
6. 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 elemento PA, antes tendremos que insertar
las capas en la ventana de documento. Además, deberemos asociar la acción a la etiqueta <body>.

145
Utilizar la acción Arrastrar elemento PA
1. Si no tiene una capa creada en la ventana de documento de Dreamweaver, créela en
este momento utilizando cualquiera de los métodos vistos con anterioridad.
2. Seleccione la etiqueta <body> en el selector de etiquetas que se encuentra en la
parte inferior izquierda de la ventana de documento
3. En el menú Ventana, seleccione la opción Comportamientos o, si lo prefiere, pulse la
4. En el panel Comportamientos, haga clic sobre el botón de signo más (+) y
elija Arrastrar elemento PA en el menú emergente que aparece.
5. En el área Elemento PA, utilice el menú desplegable para seleccionar la capa que
desea hacer desplazable.
6. Para limitar el movimiento de la capa, cambie la opción de la lista desplegable
Movimiento de Sin restricciones a Restringido.
7. De forma automática, aparecerán los cuadros de edición Arriba, Abajo,
Izquierda y Derecha. Introduzca los valores en píxeles en los cuadros adecuados para
delimitar el área de movimiento.
8. Para establecer un punto de destino para la capa arrastrada, introduzca sus
coordenadas en los cuadros de edición Izquierda y Arriba del área Destino.
9. Haga clic sobre el botón Obtener posición actual para rellenar estos cuadros de
edición con las coordenadas de la posición actual de la capa.
10. Introduzca un valor en píxeles en el cuadro de edición Ajustar si a menos de, para
determinar lo cerca del destino que el visitante tiene que soltar la capa para que ésta
se ajuste automáticamente.

146
11. Para especificar opciones adicionales, pulse con el ratón sobre la pestaña Avanzado.
12. En el área Arrastrar selector, seleccione en la lista desplegable la opción Área dentro
del elemento para limitar el área a utilizar como control de arrastre.
13. De forma automática, aparecerán los cuadros de edición Izquierda,
Superior, Ancho y Alto. Introduzca los valores en píxeles en los cuadros adecuados
para delimitar el manejador de arrastre.
14. Para controlar la posición de la capa arrastrada, determine las opciones Al
arrastrar que desee utilizar:
 Para mantener la capa en la profundidad actual y no traerla al frente
cuando se arrastre, desactive la casilla de verificación Traer la capa al
frente, luego.
 Para cambiar el orden de apilamiento de la capa cuando ésta sea
liberada, seleccione en la lista desplegable la opción Mantener arriba o
Restaurar índice z.
15. Para ejecutar un comando de JavaScript mientras se arrastra la capa, introduzca el
código en el cuadro de edición Llamar JavaScript situado en el área Al arrastrar.
16. En el área Al soltar, podremos configurar un comando de JavaScript que se ejecutará
cuando la capa se suelte sobre el lugar de destino. Para ello, deje activada la opción
Sólo si se ajusta e introduzca el código en el cuadro de edición Llamar JavaScript.

147
14.8. 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.
Usar la acción Ir a URL
2. Haga clic sobre el botón de signo más (+) y elija Ir a URL en el menú emergente que
aparece. Se abre el cuadro de diálogo Ir a URL.
3. En el área Abrir en, elija el destino de su enlace utilizando la lista que se muestra en el
cuadro de la derecha. Esta lista muestra los nombres de todas las anclas o marcos
existentes en un documento de forma automática.
4. En el campo de edición URL, introduzca la ruta y el nombre del archivo a abrir o pulse
con el ratón sobre el botón Examinar para localizar el archivo.
14.9. 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.
Utilizar la acción Abrir ventana del navegador
2. Haga clic sobre el botón de signo más (+) y elija Abrir ventana del navegador en el
menú emergente que aparece. Se abre el panel Abrir ventana del navegador.

148
3. En el cuadro de edición Mostrar URL, introduzca la ruta y el nombre del archivo a
abrir o haga clic con el ratón sobre el botón Examinar para localizar el archivo.
4. Para especificar la forma y el tamaño de la ventana, introduzca los valores de alto y
ancho en los cuadros de edición correspondientes.
5. En el área Atributos, marque las casillas de activación de las propiedades que desee
que tenga la nueva ventana:
 Barra de herramientas de navegación: Es la fila de botones del
navegador que, entre otras opciones, incluye Atrás, Adelante, Inicio y
Actualizar.
 Barra de menús: Es la zona de la ventana del navegador en la que
aparecen menús tales como Archivo, Edición, Ver, Favoritos y Ayuda.
 Barra de herramientas de ubicación: Es la fila de opciones del
navegador que incluye el campo de ubicación.
 Barras de desplazamiento si necesarias: Especifica que deben
aparecer las barras de desplazamiento sólo cuando el contenido de la
página se extienda más allá de la zona visible.
 Barra de estado: Es la zona situada en la parte inferior de la ventana
del navegador en la que suele aparecer información como el tiempo
de carga restante de una página y las direcciones asociadas a los
vínculos.
 Selectores de cambio de tamaño: Permite que el navegante pueda
cambiar el tamaño de la ventana, ya sea arrastrando los bordes o bien
por medio del botón Maximizar situado en la esquina superior
derecha de la ventana.
6. Si va a utilizar JavaScript para controlar la ventana, escriba un nombre en el cuadro de
edición Nombre de la ventana. Este nombre, no puede incluir espacios o caracteres
especiales.
14.10. 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.
Utilizar la acción Carga previa de imágenes
2. Haga clic sobre el botón de signo más (+) y elija Carga previa de imágenes en el menú
emergente que aparece.

149
3. En el área Archivo de origen de imagen, haga clic en el botón Examinar para localizar
el archivo de imagen objeto de la carga previa o introduzca la ruta y el nombre en el
cuadro de edición.
4. Para añadir una nueva imagen a la lista Carga previa de imágenes, haga clic con el
ratón en el botón más (+) situado en la parte superior del cuadro de diálogo y repita
el paso anterior.
5. Para eliminar un archivo de la lista Carga previa de imágenes, seleccione la imagen en
la lista y haga clic sobre el botón de signo menos (-).
6. Para finalizar, haga clic en Aceptar.
14.11. Mostrar ocultar elementos
La acción Mostrar-Ocultar elementos 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.
Utilizar Mostrar-Ocultar capas
2. Haga clic sobre el botón de signo más (+) y elija Mostrar-Ocultar elementos en el
menú emergente que aparece. Se abre el cuadro de dialogo Mostrar-Ocultar
elementos.
3. En la lista Elementos, se muestran todas las capas disponibles en el documento HTML
abierto.
4. Para ocultar una capa visible, seleccione su nombre en la lista y haga clic sobre el
botón Ocultar.
5. Para mostrar una capa oculta, seleccione su nombre en la lista y haga clic sobre el
botón Mostrar.
6. Para restablecer la visibilidad predeterminada de una capa, selecciónela en la lista y
haga clic sobre el botón Predeterminada.

150
14.12. 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.
Utilizar la acción Intercambiar imagen
2. Haga clic sobre el botón de signo más (+) y elija Intercambiar imagen en el menú
emergente que aparece. Se abre el cuadro de diálogo Intercambiar imagen.
3. En el área Imágenes, elija un gráfico disponible de la lista.
4. En el cuadro de edición, introduzca la ruta hasta la imagen que va a utilizar para el
cambio. También puede usar el botón Examinar para localizar el archivo.
5. Repita los pasos anteriores con todas las imágenes que desee cambiar.
6. Deje activada la opción Carga previa de imágenes para precargar todas las imágenes
en la memoria caché del navegador al cargar la página.
14.13. 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.
Utilizar la acción Validar formulario
1. Seleccione el objeto que iniciará la acción, por ejemplo, el botón Enviar o un campo
de texto cualquiera del formulario.
2. En el menú Ventana, seleccione la opción Comportamientos o, si lo prefiere, pulse la

151
3. Haga clic sobre el botón de signo más (+) y elija Validar formulario en el menú
emergente que aparece. Se abre el cuadro de diálogo Validar formulario.
4. En la lista Campos, seleccione el campo de texto que desee validar.
5. En el área Valor, active la casilla de verificación Obligatorio para hacer que el campo
seleccionado sea de cumplimentación obligatoria.
6. En el área Aceptar, active una de las opciones disponibles:
 Cualquier cosa: Acepta cualquier tipo de entrada.
 Número: Permite cualquier tipo de entrada numérica.
 Dirección de correo electrónico: Requiere una dirección de e-mail con
el carácter @.
 Número del: Nos permite comprobar que el campo contiene
solamente caracteres numéricos comprendidos dentro de un rango
determinado.
7. Repita este proceso con todos los campos de un formulario que desee validar.
14.14. 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.

152
Recuerda…
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.
La combinación de teclas MAYÚS+F4 nos abrirá el panel Comportamientos de Dreamweaver.
Un mensaje emergente es un comportamiento que utilizaremos para mostrar un mensaje de alerta
de JavaScript.
Comprobar navegador es un comportamiento que podemos utilizar para redireccionar a los
visitantes a distintas páginas dependiendo de las marcas y versiones de sus navegadores.
Llamar JavaScript es un comportamiento de Dreamweaver que nos permitirá ejecutar una función
personalizada o línea de código de JavaScript.
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 correctamente.
15. DISEÑO WEB CON SPRY

153
En este último tema, vamos a trabajar con el framework de Spry que es una biblioteca JavaScript que
proporciona a los diseñadores Web la capacidad de crear páginas que ofrezcan una experiencia más
completa a los visitantes.
Con Spry, puede utilizar HTML, CSS y una cantidad mínima de código JavaScript para incorporar datos
XML a los documentos HTML, crear widgets, como acordeones y barras de menú, y añadir tipos
distintos de efectos para varios elementos de la página.
15.1. Los widgets de Spry
Un widget de Spry es un elemento de página que permite la interacción del usuario y, por tanto,
ofrece una experiencia más completa. Un widget de Spry consta de las siguientes partes:
 Estructura de widget: Bloque de código HTML que define la composición estructural
del widget.
 Comportamiento del widget: JavaScript que controla la respuesta del widget a los
eventos iniciados por el usuario.
 Estilo del widget: CSS que especifica el aspecto del widget.
El framework de Spry admite un conjunto de widgets reutilizables escritos en código HTML, CSS y
JavaScript estándar. Puede insertar fácilmente estos widgets y, a continuación, aplicar el estilo al
widget. Los comportamientos del framework incluyen funciones que permiten a los usuarios mostrar
u ocultar contenido de la página, cambiar el aspecto de la página, interactuar con los elementos de
menú y mucho más.
Cada widget del framework de Spry está asociado a archivos CSS y JavaScript exclusivos. El archivo
CSS contiene todo lo necesario para aplicar estilos al widget y el JavaScript dota al widget de su
funcionalidad. Cuando se inserta un widget a través de la interfaz de Dreamweaver, Dreamweaver
vincula automáticamente esos archivos a la página, para que el widget tenga funcionalidad y estilo.
15.2. Widget de acordeón
Un widget de acordeón es un conjunto de paneles que pueden contraerse y que tienen capacidad
para almacenar una gran cantidad de contenido en un espacio reducido. Los visitantes pueden hacer
clic en la ficha del panel para mostrar u ocultar el contenido almacenado en el acordeón. Los paneles
del acordeón se amplían o contraen en función de las fichas que elijan los visitantes. Solamente
puede haber un panel de contenido abierto y visible en un acordeón en cada momento.
Inserción y edición de un widget en acordeón

154
1. En el menú Insertar seleccione la opción Spry y en el nuevo submenú que apare
escoja Acordeón de Spry. Automáticamente el widget aparece en el documento.
2. Seleccione el widget de acordeón en la ventana de documento y observe el
panel Propiedades.
3. En el panel Propiedades, haga clic en el botón Más (+) del área Paneles para añadir una
nueva etiqueta.
4. Para modificar el texto del panel diríjase a la vista Diseño y edítelo. Recuerde que puede
utilizar el panel Propiedades para cambiar las características principales del texto.
5. Para abrir un panel un panel para editar su contenido, coloque el puntero del ratón sobre
la ficha del panel que desea abrir en la vista Diseño y, a continuación, haga clic en el icono
de ojo que aparece a la derecha de la ficha.
6. Para cambiar el orden de los paneles, seleccione un widget de acordeón en la ventana del
documento y en el panel Propiedades, seleccione el nombre del panel Acordeón que
desea mover y haga clic en las flechas arriba o abajo para mover el panel en la dirección
deseada.
Limitación del ancho de un acordeón

155
1. De forma predeterminada, el widget de acordeón se amplía para llenar el espacio
disponible. No obstante, puede limitar el ancho de un widget de acordeón
estableciendo una propiedad de ancho para el contenedor del acordeón.
2. Abra el archivo que contiene el acordeón que desea limitar y localice la regla
.Accordion en el panel Estilos CSS. Esta regla define las propiedades del elemento de
contenedor principal del widget de acordeón.
3. Añada una propiedad y un valor de ancho a la regla, por ejemplo Width: 400px.
15.3. Widget de barra de menús

156
Un widget de barra de menús es un conjunto de botones de menú de navegación que muestran
submenús cuando el visitante de un sitio sitúa el puntero del ratón sobre uno de ellos. Las barras de
menús permiten visualizar una gran cantidad de información de navegación en un espacio reducido,
y ofrecen a los visitantes una idea de lo que está disponible en el sitio sin necesidad de realizar una
navegación exhaustiva. Dreamweaver permite insertar dos tipos de widgets de barra de menús:
verticales y horizontales.
Inserción y edición de un widget de barra de menús
1. En el menú Insertar seleccione la opción Spry y en el nuevo submenú que aparece
escoja Barra de menús de Spry. Aparece el cuadro de dialogo Barra de menús de
Spry.
2. Seleccione Horizontal o Vertical y haga clic en Aceptar. Automáticamente, el widget
aparece en el documento.
panel Propiedades.
4. En el campo de edición Barra de menús cambie el nombre asignado al widget por
defecto.
5. Para añadir un elemento de menú principal, haga clic en el botón más (+) situado
sobre la primera columna.

157
6. Para cambiar el nombre del nuevo elemento de menú, modifique el texto
predeterminado en la ventana de documento o en el cuadro Texto del
panel Propiedades.
7. Para añadir un elemento de submenú principal, haga clic en el botón más (+) situado
sobre la segunda columna.
8. Para crear un vínculo escriba el link correspondiente en el cuadro de texto Vínculo o
haga clic en el icono de carpeta para buscar un archivo.
9. Introduzca uno de los cuatro atributos en el cuadro Destino:
 _blank: Abre la página vinculada en una nueva ventana del navegador.
 _self: Carga la página vinculada en la misma ventana del navegador.
Ésta es la opción predeterminada.
 _parent: Carga el documento vinculado en el conjunto de marcos
padre inmediato del documento.
 _top: Carga la página vinculada en la ventana superior de un conjunto
de marcos.
Cambio de la orientación de un widget de barra de menús
1. En Dreamweaver, abra la página que contiene un widget de barra de menús
horizontal.
2. Inserte un widget de barra de menús vertical y guarde los cambios en la página. Este
paso garantiza que se incluya en el sitio el archivo CSS correcto para una barra de
menús vertical.
3. Elimine la barra de menús vertical.
4. En vista Código, localice la clase MenuBarHorizontal y cámbiela por
MenuBarVertical.
5. Para finalizar guarde la página y haga una prueba para comprobar los resultados.
15.4. Widget de paneles que pueden contraerse

158
Un widget de panel que puede contraerse es un panel que puede almacenar contenido en un espacio
reducido. Los usuarios pueden hacer clic en la ficha del widget para mostrar u ocultar el contenido
almacenado en el panel de forma rápida.
Inserción y edición de un widget que puede contraerse
escoja Panel que puede contraerse de Spry. Automáticamente el widget aparece en el
documento.
panel Propiedades.
3. Para abrir o cerrar el panel en la vista Diseño, pase el puntero del ratón por la ficha
del panel en la vista Diseño y, a continuación, haga clic en el icono de ojo que aparece
a la derecha de la ficha.
4. Puede definir el estado predeterminado del widget desde el desplegable Estado
predeterminado. Seleccione Abierto o Cerrado.
5. De forma predeterminada, la casilla Activar animación aparece marcada de tal forma,
que el panel se abre y se cierra de forma gradual y suave cuando el visitante del sitio
hace clic en la ficha del panel. Si desactiva esta opción, el panel se abre y se cierra
bruscamente.
15.5. Widget de paneles en fichas

159
Un widget de paneles en fichas es un conjunto de paneles que pueden almacenar contenido en un
espacio reducido. Los visitantes pueden hacer clic en la ficha del panel para mostrar u ocultar el
contenido almacenado en los paneles en fichas a los que desean acceder. Los paneles del widget se
amplían o contraen en función de las fichas que elijan los visitantes. Solamente puede haber un
panel de contenido abierto en un widget de paneles de fichas en cada momento.
Inserción y edición de paneles en fichas
escoja Panel en fichas de Spry. Automáticamente el widget aparece en el documento.
panel Propiedades.
3. En el panel Propiedades, haga clic en el botón más (+) del área Paneles para añadir
una nueva ficha.
4. Para modificar el texto del panel diríjase a la vista Diseño y edítelo. Recuerde que
puede utilizar el panel Propiedades para cambiar las características principales del
texto.
5. Para cambiar el orden de los paneles en el panel Propiedades, seleccione el nombre
del panel que desea mover y haga clic en las flechas arriba o abajo para mover el
panel en la dirección deseada.
6. Puede definir el panel del widget de paneles en fichas que se abrirá de forma
predeterminada al abrir la página en un navegador, utilice el desplegable Estado
predeterminado del panel Propiedades.
15.6. Widget de grupo de opciones

160
El widget de grupo de opciones de validación es un grupo de botones que nos permiten la validación
de una selección. El widget nos fuerza a seleccionar una opción dentro de un grupo de opciones de
validación.
Insertar y editar un widget de grupo de opciones de validación
escoja Grupo de opciones de validación de Spry. Se abre el cuadro de diálogo Grupo
de opciones de validación de Spry.
2. En el cuadro de texto Nombre, introduzca un nombre para el grupo de opciones.
3. Añada o quite botones de opciones del grupo haciendo clic en los botones de signo
más (+) o menos (-).
4. En la columna Label, haga clic en el nombre de cada botón de opción para que el
campo sea editable y asigne un nombre exclusivo a cada botón de opción.
5. En la columna Value, haga clic en cada valor para que el campo sea editable y asigne
un valor exclusivo a cada botón de opción.
6. Seleccione un tipo de disposición para el grupo de opciones:
 Saltos de línea: Sitúa cada botón de opción en una línea independiente
empleando saltos de línea (etiquetas br).
 Tabla: Sitúa cada botón de opción en una línea independiente
empleando filas de tabla individuales (etiquetas tr).
7. Haga clic en Aceptar. El grupo de opciones aparece en el documento.
Especificar el momento en que debe producirse la validación

161
1. Seleccione un widget de grupo de opciones de validación en la ventana de
documento haciendo clic en su ficha azul.
2. En el panel Propiedades, seleccione la opción que indica cuándo desea que se
produzca la validación. Por defecto la opción onSubmit (Enviar) para que la validación
del formulario se produzca cuando el usuario envíe el formulario.
3. Activando la opción onBlur (Desenfocar) se realizará la validación cuando el usuario
hace clic fuera del grupo de opciones.
4. Activando la opción onChange (Cambiar) se realizará la validación cuando el usuario
realiza selecciones.
15.7. Widget de campo de texto
Un widget de campo de texto de validación es un campo de texto que muestra los estados válidos o
no válidos cuando el visitante introduce texto. Por ejemplo, puede añadir un widget de campo de
texto de validación a un formulario en el que el visitante introduce su dirección de correo
electrónico. Si no introducen el símbolo “@” y un punto en la dirección de correo electrónico, el
widget devuelve un mensaje indicando que la información introducida por el usuario no es válida.
Insertar y editar un widget de campo de texto de validación
escoja Campo de texto de validación de Spry. Automáticamente el widget aparece en
el documento.
panel Propiedades.
3. Seleccione un tipo de validación en el menú Tipo:
 Ninguno: No requiere un tipo particular de formato.

162
 Entero: El campo de texto sólo acepta números.
 Dirección de correo electrónico: El campo de texto acepta direcciones de
correo electrónico que contienen @ y un punto (.) precedido y seguido de al
menos una letra.
 Fecha: Los formatos varían. Deberemos elegir una opción en el menú
emergente Formato del panel Propiedades.
 Hora: Los formatos varían. Deberemos elegir una opción en el menú
 Tarjeta de crédito: Los formatos varían. Deberemos elegir una opción en el
menú emergente Formato del panel Propiedades. Puede elegir aceptar todas
las tarjetas de crédito o especificar un determinado tipo de tarjeta
(MasterCard, Visa, etc.). El campo de texto no acepta espacios en los números
de tarjetas de crédito.
 Código postal: Los formatos varían. Deberemos elegir una opción en el menú
 Número telefónico: El campo de texto acepta números de teléfono con el
formato utilizado en EE.UU. y Canadá (000) 000-0000 o formatos
personalizados. Si seleccionamos como opción un formato personalizado,
deberemos introducir el formato deseado en el cuadro de texto Patrón.
 Número de Seguridad Social: El cuadro de texto acepta números de la
Seguridad Social con el formato 000-00-0000. Si desea utilizar un formato
distinto, seleccione Personalizado como tipo de validación y especifique un
patrón. El mecanismo de validación del patrón sólo acepta caracteres ASCII.
 Moneda: El campo de texto acepta moneda con el formato 1.000.000,00 o
1,000,000.00.
 Número real-Notación científica: Valida varios tipos de números: enteros (por
ejemplo, 1); valores flotantes (por ejemplo, 12, 123); y valores flotantes en
notación científica (por ejemplo, 1,212e+12, 1,221e-12, donde e se utiliza
como potencia de 10).
 Dirección IP: Los formatos varían. Elija una opción en el menú emergente
Formato del inspector de propiedades.
 URL: El campo de texto acepta URL con el formato http://xxx.xxx.xxx o
ftp://xxx.xxx.xxx.
 Personalizado: Permite especificar un tipo y formato de validación
personalizado. Introduzca el patrón de formato (y sugerencia, si lo desea) en
el inspector de propiedades. El mecanismo de validación del patrón sólo
acepta caracteres ASCII.
7. En el área Estados de vista previa del panel Propiedades, seleccione el estado de
visualización del widget en la vista Diseño. Por ejemplo, si desea ver el widget en su
estado válido, seleccione Válido.
8. Para finalizar, podremos impedir que los usuarios introduzcan caracteres no válidos
en un widget de campo de texto de validación activando la opción Aplicar patrón
dentro del panel Propiedades.
15.8. Widget de área de texto

163
Un widget de área de texto de validación es un área de texto que muestra los estados válidos o no
válidos cuando el visitante introduce frases de texto. Si el área de texto la configuramos como
obligatorio y el usuario no introduce texto, el widget devolverá un mensaje de error indicando que
tenemos que introducir un valor en el área.
Insertar y editar un widget de área de texto de validación
escoja Área de texto de validación de Spry. Automáticamente el widget aparece en el
documento.
panel Propiedades.
6. Especifique del número máximo y mínimo de caracteres introduciendo un número en
el cuadro de texto Car. mín. o Car. máx. Por ejemplo, si introduce el número 10 en el
cuadro Car. mín., el widget sólo valida el campo si el usuario introduce 10 caracteres
o más en el área de texto.
7. Para finalizar, puede impedir que los usuarios introduzcan más caracteres de los
permitidos en un widget de área de texto de validación activando la opción Bloquear
caracteres extra dentro del panel Propiedades.
15.9. Widget de selección

164
Un widget de selección de validación es un menú desplegable que muestra los estados válido y no
válido cuando el usuario realiza una selección. Por ejemplo, puede insertar un widget de selección de
validación que contenga una lista de estados, agrupados en diferentes secciones y divididos por
líneas horizontales. Si el usuario selecciona de forma accidental una de las líneas de división en lugar
de uno de los estados, el widget de selección de validación devuelve un mensaje al usuario indicando
que la selección no es válida.
Insertar un widget de selección de validación
escoja Selección de validación de Spry. Automáticamente el widget aparece en el
documento.
panel Propiedades.
3. Seleccione el campo de selección. Ahora el panel Propiedades cambia para
mostrarnos las propiedades del campo que nos permite añadir las etiquetas.
4. Pulse el botón Valores de lista. Se abre el cuadro de diálogo Lista valores.

165
5. Añada tantas etiquetas como desee pulsando el botón de signo más (+) y ordénelas
utilizando las flechas.
6. Para terminar de definir la lista pulse el botón Aceptar.
15.10. Widget de contraseña de validación
Un widget de contraseña de validación de Spry es un campo de texto de contraseña que puede
utilizarse para aplicar reglas de contraseña (por ejemplo, el número y tipo de caracteres). El widget
proporciona mensajes de advertencia o error en función de lo que haya introducido el usuario.
Insertar y editar un widget de contraseña de validación
escoja Contraseña de validación de Spry. Automáticamente el widget aparece en el
documento.
panel Propiedades.
3. De forma predeterminada, todos los widgets de contraseña de validación que
insertemos con Dreamweaver requieren la introducción de texto por parte del
usuario una vez publicados en la Web. Sin embargo, puede hacer opcional la

166
obligación de introducir texto de contraseña en los campos por parte del usuario
desactivando la opción Obligatorio del panel Propiedades.
7. Los números que introduzca en los campos de opciones de la parte baja del
panel Propiedades serán los números exigidos en la validación del widget. Por
ejemplo, si introduce 8 en el cuadro Mín. car., el widget no realizará la validación a no
ser que el usuario haya introducido al menos ocho caracteres en el campo de texto de
contraseña. Podremos configurar las siguientes opciones:
 Mín./Máx. car.: Especifica el número mínimo y máximo de caracteres
exigido para que la contraseña sea válida.
 Mín./Máx. letras: Especifica el número mínimo y máximo de letras (a, b,
c...) exigido para que la contraseña sea válida.
 Mín./Máx. números: Especifica el número mínimo y máximo de números
(1, 2, 3...) exigido para que la contraseña sea válida.
 Mín./Máx. mayúsculas: Especifica el número mínimo y máximo de letras
mayúsculas (A, B, C...) exigido para que la contraseña sea válida.
 Mín./Máx. car. especiales: Especifica el número mínimo y máximo de
caracteres especiales (!, @, #, etc.) exigido para que la contraseña sea
válida.
8. Si alguna de las opciones anteriores se deja en blanco, el widget no puede validarse
frente a ese criterio. Por ejemplo, si deja las opciones Mín./Máx. números en blanco,
el widget no buscará números en la cadena de contraseña.
15.11. Efectos de Spry
Los efectos de Spry son mejoras visuales que se pueden aplicar a casi cualquier elemento de una
página HTML mediante JavaScript. Los efectos se utilizan con frecuencia para resaltar información,
crear transiciones animadas o modificar una página visualmente durante algún tiempo. Puede aplicar
efectos a elementos HTML sin tener que utilizar otras etiquetas personalizadas. Dreamweaver
incluye los siguientes efectos de Spry:
 Aparecer/Desvanecer: Este efecto hace que aparezca o desaparezca el elemento.
 Resaltado: Cambia el color de fondo de un elemento.
 Persiana: Nos permite simular la persiana de una ventana que sube o baja para ocultar o
mostrar el elemento.
 Deslizar: Mueve el elemento hacia arriba o hacia abajo.
 Aumentar/Reducir: Aumenta o reduce el tamaño del elemento.
 Agitar: Simula la agitación del elemento de izquierda a derecha.
 Arrinconar: Hace que desaparezca el elemento por la esquina superior izquierda de la
página.
Aplicación de un efecto Aparecer/Desvanecer

167
1. Seleccione el elemento de contenido o de diseño al que desea aplicar el efecto.
2. En el panel Comportamientos, haga clic en el icono de signo más (+) y seleccione la
opción Efectos y en el nuevo submenú la opción Aparecer/Desvanecer.
3. Seleccione el ID del elemento en el menú desplegable Elemento de destino. Si ya ha
seleccionado un elemento, elija <Selección actual>.
4. En el cuadro Duración del efecto, defina el tiempo, en milisegundos, que desea que
dure el efecto.
5. Seleccione el efecto que desea aplicar utilizando el desplegable Efecto:
Desvanecer o Aparecer.
6. En el cuadro Desvanecer desde, defina el porcentaje de opacidad que desea que
tenga el efecto cuando aparezca.
7. En el cuadro Desvanecer hasta, defina el porcentaje de opacidad que desea que
tenga el efecto cuando desaparezca.
8. Active Alternar efecto si desea que el efecto sea reversible, es decir, que desaparezca
y aparezca (y viceversa) con clics sucesivos.
Aplicación del efecto Persiana
opción Efectos y en el nuevo submenú la opción Persiana.

168
dure el efecto.
5. Seleccione el efecto que desea aplicar utilizando el desplegable Efecto: Subir
persiana o Bajar persiana.
6. En el cuadro Subir desde/Bajar desde, defina el punto de inicial de desplazamiento
de la persiana como porcentaje o como número de píxeles. Estos valores se calculan
desde la parte superior del elemento.
7. En el cuadro Subir hasta/Bajar hasta, defina el punto de final de desplazamiento de la
persiana como porcentaje o como número de píxeles. Estos valores se calculan desde
la parte superior del elemento.
8. Seleccione Alternar efecto si desea que el efecto sea reversible, es decir, que la
persiana suba y baje con clics sucesivos.
Aplicación de un efecto Aumentar/Reducir
opción Efectos y en el nuevo submenú la opción Aumentar/Reducir.
3. Seleccione el ID del elemento en el menú emergente Elemento de destino. Si ya ha
dure el efecto.
5. Seleccione el efecto que desea aplicar utilizando el desplegable Efecto:
Aumentar o Reducir.
6. En el cuadro Aumentar desde/Reducir desde, defina el tamaño del elemento cuando
se inicie el efecto. Puede elegir un porcentaje o un valor en píxeles.
7. En el cuadro Aumentar hasta/Reducir hasta, defina el tamaño del elemento cuando
finalice el efecto. Puede elegir un porcentaje o un valor en píxeles.
8. Seleccione si desea que el elemento aumente o disminuya de tamaño en la esquina
superior izquierda de la página o en el centro de la misma.
9. Active Alternar efecto si desea que el efecto sea reversible, es decir, que el elemento
aumente o disminuya de tamaño con clics sucesivos.
Aplicación del efecto Resaltado

169
opción Efectos y en el nuevo submenú la opción Resaltado.
dure el efecto.
5. Seleccione el color con el que desea que se inicie el resaltado en el área Color inicial.
6. Seleccione el color con el que desea que se finalice el resaltado en el área Color final.
Este color se mantiene solamente el tiempo definido en Duración del efecto.
7. En el área Color tras el efecto, seleccione el color del elemento una vez finalizado el
resaltado.
8. Active Alternar efecto si desea que el efecto sea reversible, es decir, que vaya de un
color a otro del resaltado con clics sucesivos.
Aplicación del efecto Agitar
opción Efectos y en el nuevo submenú la opción Agitar.
Aplicación del efecto Deslizar

170
opción Efectos y en el nuevo submenú la opción Deslizar.
3. Seleccione el ID de la etiqueta contenedora en el menú Elemento de destino. Si el
contenedor ya está seleccionado, elija <Selección actual>.
dure el efecto.
5. Seleccione el efecto que desea aplicar utilizando el desplegable Efecto: Deslizar
arriba o Deslizar abajo.
6. En el cuadro Deslizar arriba desde, defina el punto de inicial de deslizamiento como
porcentaje o como número de píxeles.
7. En el cuadro Deslizar arriba hasta, defina el punto de final de deslizamiento como
porcentaje o como número positivo de píxeles.
8. Active Alternar efecto si desea que el efecto sea reversible, es decir, que el elemento
se deslice hacia arriba y hacia abajo con clics sucesivos.
Aplicación del efecto Arrinconar
opción Efectos y en el nuevo submenú la opción Arrinconar.
Recuerda…

171
Los mensajes de error son configurables.
Las casillas de verificación de Spry pueden mostrarse en grupo.
Los estados de validación muestran mensajes de error si la evaluación del campo introducido es
negativa.
La caja de texto de Spry admite la validación de correos electrónicos, fechas y números de teléfonos
y otros elementos.
Los controles de validación de Spry no se insertan por fuerza dentro de un formulario.
Si no seleccionamos ninguna validación, por defecto el campo se evaluará al enviar el formulario.
Podemos obligar al usuario a escoger un valor determinado en un desplegable de Spry.
Para el patrón 0000, la respuesta es 1234.
16. COMANDO DE TECLADO

172
En este tema, se incluyen unas tablas en las que se exponen las combinaciones de teclas
correspondientes a comandos y herramientas de Adobe Dreamweaver. El uso del teclado puede
resultar un modo rápido de acceder a cualquier opción disponible en el programa.
16.1. Teclas de función de Dreamweaver
MENÚ ARCHIVO COMBINACIÓN DE TECLAS
Archivo > Nuevo CTRL+N
Archivo > Abrir CTRL+O
Archivo > Examinar en Bridge CTRL+ALT+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 > Vista previa en el navegador > Device Central CTRL+ALT+F12
Archivo > Vista previa en el navegador > Adobe BrowserLab CTRL+MAYÚS+F12
Archivo > Comprobar página > Comprobar vínculos MAYÚS+F8
Archivo > Salir CTRL+Q

173
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 > Pegado especial CTRL+MAYÚS+V
Edición > Seleccionar todo CTRL+A
Edición > Seleccionar etiqueta padre CTRL+Ñ
Edición > Seleccionar hijo CTRL+Ç
Edición > Buscar y reemplazar CTRL+F
Edición > Buscar selección MAYÚS+F3
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 > Actualizar sugerencias para el código CTRL+.

174
MENÚ EDICIÓN COMBINACIÓN DE TECLAS
Edición > Aplicar sangría al código CTRL+MAYÚS+>
Edición > Anular sangría de código CTRL+,
Edición > Equilibrar llaves CTRL+’
Edición > Contraer código > Contraer selección CTRL+MAYÚS+C
Edición > Contraer código > Contraer fuera de la selección CTRL+ALT+C
Edición > Contraer código > Expandir selección CTRL+MAYÚS+E
Edición > Contraer código > Contraer etiqueta completa CTRL+MAYÚS+J
Edición > Contraer código > Contraer fuera de etiqueta completa CTRL+ALT+J
Edición > Contraer código > Expandir todo CTRL+ALT+MAYÚS+E
Edición > Preferencias CTRL+U
MENÚ VER COMBINACIÓN DE TECLAS
Ver > Acercar CTRL++
Ver > Alejar CTRL+-
Ver > Aumentar y reducir > 50% CTRL+ALT+MAYÚS+5

175
Ver > Ajustar selección CTRL+ALT+0
Ver > Ajustar todo CTRL+ MAYÚS+0
Ver > Ajustar ancho CTRL+ALT+MAYÚS+0
Ver > Alternar vistas CTRL+;
Ver > Actualizar vista de diseño F5
Ver > Vista en vivo ALT+F11
Ver > Opciones de Vista en vivo > Congelar JavaScript F6
Ver > Inspeccionar ALT+MAYÚS+F11
Ver > Contenido de Head CTRL+MAYÚS+H
Ver > Modo de tabla > Modo de tablas expandidas ALT+ F6
Ver > Ayudas visuales > Ocultar todo CTRL+MAYÚS+I

176
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 > Guías > Mostrar guías CTRL+MAYÚS+,
Ver > Guías > Bloquear guías CTRL+ALT+,
Ver > Guías > Ajustar a guías CTRL+MAYÚS+.
Ver > Guías > Ajustar guías a elementos CTRL+ALT+.
Ver > Plug-ins > Reproducir CTRL+ALT+P
Ver > Plug-ins > Detener CTRL+ALT+X
Ver > Plug-ins > Reproducir todo CTRL+ALT+MAYÚS+P
Ver > Plug-ins > Detener todo CTRL+ALT+MAYÚS+X
Ver > Ocultar paneles F4
Ver > Navegador de código CTRL+ALT+N
MENÚ INSERTAR COMBINACIÓN DE TECLAS
Insertar > Etiqueta CTRL+E

177
MENÚ INSERTAR COMBINACIÓN DE TECLAS
Insertar > Imagen CTRL+ALT+I
Insertar > Media > Flash CTRL+ALT+F
Insertar > Tabla CTRL+ALT+T
Insertar > Anclaje con nombre CTRL+ALT+A
Insertar > HTML > Caracteres especiales > Salto de línea MAYÚS+INTRO
Insertar > HTML > Caracteres especiales > Espacio indivisible CTRL+MAYÚS+ESPACIO
Insertar > Objetos de plantilla > Región editable CTRL+ALT+V
MENÚ MODIFICAR COMBINACIÓN DE TECLAS
Modificar > Propiedades de la página CTRL+J
Modificar > Estilos CSS MAYÚS+F11
Modificar > Quick Tag Editor CTRL+T
Modificar > Crear vínculo CTRL+L
Modificar > Quitar vínculo CTRL+MAYÚS+L
Modificar > Tabla > Combinar celdas CTRL+ALT+M
Modificar > Tabla > Dividir celda CTRL+ALT+S

178
MENÚ MODIFICAR COMBINACIÓN DE TECLAS
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+-
Modificar > Tabla > Aumentar tamaño de columna CTRL+MAYÚS+Ç
Modificar > Tabla > Reducir tamaño de columna CTRL+MAYÚS+Ñ
Modificar > Organizar > Alinear a izquierda CTRL+MAYÚS+1
Modificar > Organizar > Alinear a la derecha CTRL+MAYÚS+3
Modificar > Organizar > Alinear con el borde superior CTRL+MAYÚS+4
Modificar > Organizar > Alinear con el borde inferior CTRL+MAYÚS+6
Modificar > Organizar > Asignar mismo ancho CTRL+MAYÚS+7
Modificar > Organizar > Asignar mismo alto CTRL+MAYÚS+9
MENÚ FORMATO COMBINACIÓN DE TECLAS
Formato > Sangría CTRL+ALT+-
Formato > Anular sangría CTRL+ALT+Ñ

179
MENÚ FORMATO COMBINACIÓN DE TECLAS
Formato > Formato de párrafo > Ninguno CTRL+0
Formato > Formato de párrafo > Párrafo CTRL+MAYÚS+P
Formato > Formato de párrafo > Encabezado 1 CTRL+1
Formato > Alinear > Izquierda CTRL+ALT+MAYÚS+L
Formato > Alinear > Centro CTRL+ALT+MAYÚS+C
Formato > Alinear > Derecha CTRL+ALT+MAYÚS+R
Formato > Alinear > Justificar CTRL+ALT+MAYÚS+J
Formato > Estilo > Negrita CTRL+B
Formato > Estilo > Cursiva CTRL+I
MENÚ COMANDOS COMBINACIÓN DE TECLAS

180
MENÚ COMANDOS COMBINACIÓN DE TECLAS
Comandos > Iniciar grabación CTRL+MAYÚS+X
Comandos > Ortografía MAYÚS+F7
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 > Elementos PA F2
Ventana > Business Catalyst CTRL+MAYÚS+B

181
MENÚ VENTANA COMBINACIÓN DE TECLAS
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 > Fragmentos MAYÚS+F9
Ventana > Inspector de etiquetas F9
Ventana > Comportamientos MAYÚS+F4
Ventana > Historial MAYÚS+F10
Ventana > Marcos MAYÚS+F2
Ventana > Inspector de código F10
Ventana > Resultados > Buscar F7
Ventana > Inspector de código F4
MENÚ AYUDA COMBINACIÓN DE TECLAS
Ayuda > Ayuda de Dreamweaver F1

182
MENÚ AYUDA COMBINACIÓN DE TECLAS
Ayuda > Ayuda de ColdFusión CTRL+F1
Ayuda > Referencia MAYÚS+F1

183
Resumen General de la Unidad
Utilizaremos las casillas de verificación en un formulario cuando queramos que el usuario pueda
escoger tantas opciones como desee.
Los siguientes formatos de imágenes son soportados por Dreamweaver:
- JPEG.
- PNG.
- GIF.
La opción Bucle del panel Líneas de tiempo deberemos activar si queremos que una animación se
repita indefinidamente una vez que ésta haya alcanzado el cuadro final.
Se denomina conjunto de marcos anidado a un conjunto de marcos que está dentro de otro.
Es posible localizar un texto determinado en un documento de Dreamweaver y reemplazarlo por
otro, mediante la opción Buscar y reemplazar.
La tecla TAB deberemos mantenerla pulsada para pasar a la celda siguiente de una tabla.
El parámetro AutoPlay de QuickTime permitirá comenzar la reproducción de una película en cuanto
se haya descargado suficientemente.
Comprobar navegador es un comportamiento que podemos utilizar para redireccionar a los
visitantes a distintas páginas dependiendo de las marcas y versiones de sus navegadores.
Podremos cambiar el color de resalte de las regiones editables de una plantilla utilizando la categoría
Resaltando del cuadro de diálogo Preferencias.
La herramienta que podemos utilizar para organizar mejor la información en un documento de
Dreamweaver es la Reglas Horizontales.
Si se activa la opción caché en la categoría Datos locales del cuadro de diálogo Definición de sitio,
mejoraremos la velocidad de las tareas de administración de vínculos y sitios.
Un menú de salto es un menú de lista emergente que muestra opciones con vínculos a documentos
o archivos.
Si realizamos una modificación a un elemento incluido en la biblioteca debemos actuar en la
actualización de los documentos que usan ese elemento.
Podemos obligar al usuario a escoger un valor determinado en un desplegable de Spry.
La función principal del Panel Activos es administrar de forma rápida todos los archivos de nuestro
sitio Web.

Dreamweaver CS5

Más contenido relacionado

La actualidad más candente (20)

Destacado (20)

Similar a Dreamweaver CS5 (20)

Más de Jomicast (20)

Último (20)

Dreamweaver CS5