DREAMWEAVER CS5.

Tema 1: Conocimiento 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. Introducción a Adobe Dreamweaver.

Adobe Dreamweaver es un editor de código HTML profesional para el desarrrollo 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, aditar 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 ditio en el
servidor sin salir del programa al mismo tiempo que vamos realizando los cambios.

2. Novedades de Dreamweaver CS5.

Un puno 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.
 Desde el lanzamiento de Adobe Creative Suite CS5, se habla mucho sobre los muevos 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 se 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 equiparse 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.

3. Requerimientos técnicos.
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 1GB).
• 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 basado en flash).
• Resolución de 1024 x768 (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.
 4. Editar páginas Web.
Cualquier editor de texto permite 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 notar 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 coda 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.

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: poca
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.

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

6. Ejecución de Adobe Dreamweaver.

Una vez instalado Adobe Dreamweaver CS5, iniciar el programa será tan fácil como
ejecutar cualquier otro programa de Windows.

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 e
trabajar dependiendo de la configuración que establezcamos antes de salir del programa.

1. La barra de la 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.

2. 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.
 3. 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.

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

5. Grupo de 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.

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

7. 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.
 8. Ventana documento.
Es el área principal de trabajo. Muestra el documento actual mientras lo está creando y
editando.

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 deforma
predeterminada: Común, Diseño, Formularios, Datos, Spry, InContext Editing, Texto y Favoritos.

Como vemos en la 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.
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 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.

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.

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á uss dimensiones

actuales (en píxeles). Si hace clic en al flecha desplegable Tamaño de escarga, 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 el programa.

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.

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

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.

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.

Añadir un método abreviado a un comando. VIDEO.

Redefinir un método abreviado existente. VIDEO.
Eliminar un método abreviado de un comando. VIDEO.
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 esternos 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.
• Script: son archivos JavaScript o VBScript. Las secuencias de comandos dearchivos
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.

14. Panel historial.

El panel Historial nos muestra una lista con todos los pasos que hemos realizado en el
documento activo de Dreamweaver dese 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.

15. Práctica – 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.

16. Práctica – Diseño Web parte I.

Para comenzar a trabajar con Dreamweaver, sólo necesitaremos abrir un documento HTML
existente o crear uno nuevo. Sin embargo, para sacar el máximo provecho a Dreamweaver, en esta
primera práctica vamos a comenzar configurando algunas de las preferencias del programa para
lograr que se nos facilite la forma de trabajar.
 Tema 2: Creación de sitios 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 previsulizaremos 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á unospocos 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 ha
hecho una página web, este es el momento para descubrir lo fácil que es.

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 no 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éndose
incluso su combinación:
Estructura lineal.
Antes del nacimiento de la World Wide Web, la mayoría de los formatos visuales eran
lineales, es decir, una página seguía a otra a lo largo de una secuencia inalterable. Este modelo, hoy
en día, todavía es muy usado para crear aplicaciones de enseñanza, donde podremos controlar el
orden de visualización de los temas, mostrando una página tras otra como si de un libro multimedia
se tratase.

Estructura jerárquica.
En este modelo, tomamos como punto de partida una página de inicio, desde la cual
podremos acceder al resto de páginas del sitio. Los sitios con estructura jerárquica ayudan a
proporcionar un mejor sentido sobre la orientación de nuestro sitio Web.

Estructura centralizada.
Este tipo de navegación está basado en una página central de inicio a la que le vincularemos
el reto 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.

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

3. Editar un sitio Web existente.

En este nuevo apartado, veremos cómo modificar un sitio Web que ya tengamos
configurado.

Editar un sitio Web existente. VIDEO.

Eliminar un sitio Web existente. VIDEO.

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.

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 par 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.
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 par 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 reestablecer las listas de los directorios local y remoto.

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 muestrala 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 Subversión (SVN).
11. La opción Obtener archivos(s) transfiere una copia de los archivos seleccionados del

sitio remoto al sitio local.

12. La opción Colocar archivos(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.

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

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.

Crear un nuevo documento HTML en blanco. VIDEO.

Abrir un archivo HTML existente. VIDEO.
Guardar un documento pro primera vez. VIDEO.

NOTA: Cuando guarde un documento, evite utilizar espacios y caracteres especiales en los
nombres de archivos y carpetas.
 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 dela página, las imágenes y colores del fondo, del texto y de los vínculos.

Configurar las propiedades del documento. VIDEO.

NOTA: ¡Recuerde! Un asterisco indica que el documento contiene cambios que no se han
guardado aún.

9. Guías visuales.
Dreamweaver nos proporciona varios tipos de guías visuales que no 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 reglas. VIDEO.

Configuración de cuadrícula. VIDEO.

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 necesario 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.
3. Para finalizar, pulse el botón Aceptar.

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, convien
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.
3. Para finalizar, pulse el botón Aceptar.

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.

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.
• En el menú Archivo, seleccione la opción Vista previa en el navegador y en el submenú
que aparece, seleccione Editar lista de navegadores. Se abre el cuadro de diálogo
Preferencias con la categoría Vista previa en el navegador seleccionado.

• Para añadir un nuevo navegador a la lista predeterminada, en el área Navegadores pulse

el botón con forma de signo más (+). Se abre el cuadro de diálogo Añadir navegador.
 • En el campo de edición Nombre, escriba el nombre con el que aparecerá el explorador
en la lista.
• 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 deses, puede introducir
directamente la ruta utilizando el campo de edición.
• Active, si lo desea, una de las casillas correspondientes al tipo de navegador Navegador
principal o Navegador secundario.
• Haga clic en Aceptar para añadir así el navegador configurado a la lista.
• 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(-).
• 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.

12. Práctica – Diseño Wev 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.
 Tema 3: Trabajo de 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. Tambien, a organizar los
bloques de textos en nuestra página, así como, a crear estilos tato HTML como CSS para aplicar un
formato de texto.

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.

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

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.

3. Asignar fuentes a un texto.

Un diseñador gráfico, normalmente, puede utilizar tantas fuente 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 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.

4. Editar la lista de fuentes de Dreamweaver.

Veremos los pasos que debemos seguir para editar la lista de fuentes de las que dispone
Dreamweaver. VIDEO.

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.

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

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

7. Sangrías.
En el lenguaje HTML, debemos insertar la etiqueta <bolckquote> 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 Bloskquote 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.

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. La
lista de definición no emplean caracteres iniciales como puntos, guiones o números y suelen
utilizarse en glosarios o descripciones.
 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:

1. Coloque el cursor de texto donde desee comenzar la lista ordenada.
2. Haga clic en el botón Lista sin ordenar del panel Propiedades. Observe que aparece una

marcador en el sitio donde colocamos el cursor.

3. Escriba el primer elemento de nuestra lista.
4. Pulse INTRO. Se muestra otro marcador en la siguiente línea.
5. Repita los pasos anteriores para completar la lista.
6. 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.

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: unos estándar para el
idioma seleccionado y otro personalizado, al que podremos ir añadiendo las palabras que creamos
oportunas.
Realizar la corrección de un documento de Dremweaver:
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 Sugerencia, 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 y Omitir todas
para continuar la búsqueda.
10. Al finalizar la búsqueda, aparecerá un mensaje indicándonos que la correción ha
terminado.

11. Pulse OK para concluir.

NOTA: Si no comenzó una correció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.

10. Insertar fechas en un documento.

Dreamweaver nos proporciona un objeto Fecah 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.
VIDEO.

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.

NOTA: También podremos insertar caracteres especiales desde la categoría Texto del panel
Insertar.
 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 lic sobre el botón Regla

horizontal.

NOTA: También es posible colocar reglar 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 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).

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 contien 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 y en la orden de submenú Estilos
CSS del menú Texto.

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. En 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.
 Tema 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.

1. Hojas de estilos en cascada.

Las hojas de estilos en cascadas 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 al 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.

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 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 Helvetica y el estilo negrita.
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
una regla de 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 contiene un atributo id específico.

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 conjunto 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 incrustaas): Son un conjuntos 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 y otros navegadores,
mientras que otros no son compatibles actualmente con ningún navegador.

4. Definir un estilo CSS.

Una vez creado un estilo, podremos definir las propiedades de reglas CSS, como la fuente el
texto, la imagen y el color de fondo, las propiedades de espaciado y diseño y el aspecto de los
elementos de las listas.

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

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 abrí de una forma rápida pulsando la
combinación de teclas MAYÚS+F11.

2. En la parte superior del panel asegurece 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.

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 etilos 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 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
 Tema 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 modio 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.

1. Formatos de gráficos Web.

Lo primero y más importante que necesitamos saber a la hora de trabajar con formatos de
imágenes para la Web es que, sin la ayuda de plug-ins, ésta sólo soporta tres tipos de imágenes: el
formato JPEG, el formato GIF y el formato PNG. Los dos primeros son reconocidos por la
totalidad de exploradores y el tercero cada vez se encuentra más integrado en Internet.

GIF(Graphics Interchange Format):

Fue desarrollado originalmente por CompuServe a finales de los años 80 para solucionar el
problema de incompatibilidad entre plataformas. Los archivos GIF son imágenes de mapa de bits
que utiliza una paleta de 256 colores como máximo, por eso, este formato suele ser usado para
imágenes simples con colores planos (dibujos y logotipos) y son generalmente de un tamaño
reducido.

JPEG (Joint Photographic Experts Group):

Fue desarrollado con el fin de manejar imágenes fotográficas. La fuerza principal de este
tipo de imágenes es que pueden trabajar con millones de colores. Para hacer que este formato sea
manejable se ha de comprimir tal información redundante. Cuanto mayor sea la compresión del
archivo, menor será su resolución.

PNG (Portable Network Graphic):

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.

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.

NOTA: También es posible insertar una imagen en la ventana de documento de

Dreamweaver ejecutando la orden Imagen del menú Insertar.

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.

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.

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.

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.

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.

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.

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 redondeando un gráfico. La anchura de este
borde e 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.

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

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.

9. Práctica – Diseño Web parte III.

A lo largo de la siguiente práctica, vamos a comenzar a trabajar con imágenes y texto para
completar la página de inicio de nuestra Web. Aprenderemos a colocar imágenes y a editarlas
directamente con el programa que configuremos en Dreamweaver; añadiremos un borde a la
imagen y utilizaremos la etiqueta para proporcionar información adicional sobre la Web.

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

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.

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 qu deben aplicarse correctamente para que funcionen. En la siguiente
aplicación, se explicarán con detalle los métodos que nos ofrecen Dreamweaver para dividir nuestra
página Web en marcos y hacer así que nuestro propio conjunto de marcos no falle.
NOTA: Podremos cambiar fácilmente la posición de cualquier borde del conjunto de marcos
haciendo clic y arrastrando por la ventana de documento.

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.

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 borde de marcos deben estar visibles 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. 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.

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 actual.
 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 el 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.

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

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 el maroc
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.
• _new: Es similar al anterior y hace que el vínculo se abra en una nueva ventana de
explorador manteniendo la ventana de explorador manteniendo la ventana actual
disponible. Si aun no has abierto ninguno de los enlaces que hayas creado con esta
sintaxis, al hacerlo se va a abrir en una ventana nueva la cual, por así decirlo, va a tener
el nombre de NEW, y a partir de esa ventana los demás enlaces que abras y que tengan el
“new” se van a 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.

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

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 utilizando el panel Propiedades. Posteriormente, utilizaremos uno de los conjuntos de
marcos predefinidos por Dreamweaver para crear el documento “Mnu.htm”.
 Tema 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.

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

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

Añadir texto a una tabla. VIDEO.
Añadir una imagen a una tabla. VIDEO.

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
opción Propiedades.
3. Haga clic con el ratón sobre la flecha de ampliación situada en la esquina inferior
derecha del panel Propiedades. De este modo, veremos más propiedades de la 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.

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.

4. Selección de elementos de una tabla.

Del mismo modo que ocurre en Dreamweaver con la 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.

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. Mueve 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.
2. Si el panel Propiedades no se encontrara abierto, diríjase al menú ventana y escoja la
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.

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.

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 tabal
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 el
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 curso 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.

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

3. Se abre el cuadro de diálogo Dividir celda.

4. En el área Dividir celda, alija 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. Para 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. 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 comadno

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.
 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 acuerno al contenido de dos columnas. Es importante resaltar que no
se pueden ordenar tablas que contengan celdas combinadas.

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, configuremos 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 de lconjunto
de marcos configurado en “Menu.htm”.
 Tema 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 los navegadores, y en los que sí se muestran, no siempre lo hacen correctamente.

1. Aparición de las capas.

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 e
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ían 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.

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.

Insertar una capa utilizando la Barra de herramientas Insertar. VIDEO.

Insertar una capa utilizando el menú de Dreamweaver. VIDEO.

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 e
edición.
8. Para finalizar, pulse el botón Aceptar. Los cambios se guardan y se actualizan en el
documento HTML abierto.

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.
 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.
2. Si el panel Propiedades no se encontrara abierto, diríjase al menú Ventana y escoja la
opción Propiedades.
3. Haga clic con el ratón sobre la flecha de ampliación situada en la esquina inferior
derecha del panel Propiedades. De este modo, veremos más propiedades de la capa
seleccionada.

4. En el cuadro de Elemento CSS-P, escriba un nombre que identifique la capa dentro del
panel y en la secuencia de comandos.
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.

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

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

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

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í comoví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á:

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. VIDEO.
Crear vínculos utilizando el icono de señalización de archivo. VIDEO.
 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. VIDEO.

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.

Crear un vínculo con un anclaje. VIDEO.

NOTA: Los nombres de punto de fijación tienen en cuenta el uso de mayúsculas y
minúsculas.

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. Esta parte la veremos cuando tratemos la creación de marcos con Dreamweaver, ahora nos
centraremos en aprender a abrir un vínculo en una página completamente nueva.

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áginaque
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 un 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.

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

7. Creación de mapas de imagen.

Una mapa de imagen es una imagen dividida es 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.
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.

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.

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

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 el 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 el 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.
 10. Práctica – Diseño Web 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”.
 Tema 10: Formulario interactivos.
Los formularios son de las herramientas más útiles de una página Web ya que nos permitan
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.

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.

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: Insertar un campo de texto en un formulario. Éstos admiten todo tipo

de texto, tanto alfabético como numérico.

• Campo oculto: Insertar 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.

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

• Grupos 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.

3. Insertar una 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.

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.

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

• Campos de contraseña: Son campos de texto en los que, cuando el usuario escribe,
aparecen asteriscos quedando oculto el texto.
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. Dreamweaver crea un campo de texto en el documento.
 3. En el campo de edición Campo de texto, escriba un nombre exclusivo para el campo.
No utilice espacios para separar las palabras.
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.

• 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.
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. Dremweaver crea un campo de texto en el documento.
3. En el campo de edición Campo de texto, escriba un nombre exclusivo para el campo.
No utilice espacios para separar las palabras.
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 qu 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.

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:

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

3. Dreamweaver añade un marcador al documento y, en el panel Propiedades, se muestra

los atributos que pueden modificarse.
 4. En el campo de edición Campo oculto, escriba un nombre exclusivo para el campo. No
utilice espacios para separar las palabras.
5. Para finalizar, en el área Valor, escriba el texto que desea asignar al campo.

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.

Insertar casillas de verificación:

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

7. Grupo de casillas de verificación.

Los Grupos 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:

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

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:

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

9. Creación e 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.

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 Seleccionar
(Lista/Menú).
3. El panel Propiedades cambia mostrando los atributos que pueden modificarse.

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.
 7. Coloque el cursor el 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. Creación de listas.

Las listas desplazables nos permitirán configurar varias opciones en un espacio limitado. A
diferencia de los menús desplegables, estas listas presentan dos flechas: una apuntando hacia arriba
y otra 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:

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

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
(+) 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.
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:

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 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 qu 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:

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
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.
4. El panel Propiedades cambia mostrando los atributos que pueden modificarse.

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 qu aparezca en lugar de la imagen en los
navegadores que sólo admiten texto.

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 aun
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:

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
archivo.
3. El panel Propiedades cambia mostrando los atributos que pueden modificarse.
 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).

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”.
 Tema 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.

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

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.

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 qu tengamos, ya que
sea un texto, una tabla, un formulario, applets de Java, plug-ins, elementos Actives, barras de
navegación e imágenes.

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

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

1. Creación de plantillas.
A lo largo de la siguiente explicación, veremos las dos formas que nos ofrece Dreamweaver
para crear plantillas. Podemos 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 *.dtw en la carpeta TEMPLATES de nuestro sitio
Web. Si no existiera esa carpeta, Dreamweaver la crearía de forma automática.
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.

2. Configurar la 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.
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 al 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.

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

Crear regiones editables en una plantilla. VIDEO.

Crear una región editable vacía. VIDEO.

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

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.

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

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, 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 zonar editables
dentro de la plantilla y la aplicaremos a documentos nuevos para facilitar el trabajo de creación de
todas las fichas.
 Tema 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 el 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 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.

1. Vídeo en al 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ídeo 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 Pinture 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.

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

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:
<img src=”images/foto.gif” dynsrc=“videos/movie.mpg”>
Con esta sintaxis, en un navegador que no soporte el atributo dynsrc, se representará la
imagen referenciada, mientras que, en el navegador Internet Explorer, se reproducirá
automáticamente el vídeo.
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.

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

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 Madia.
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 archiv
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 qu podremos utilizar:

5. Insertar Realvideo en un documento HTML.

El primer sistema de flujo de vídeo lo desarrolló RealNetworks. Esta empresa ofrece un
reproductor multimedia gratuito llamado RealPlayer para poder ver o escuchar el contenido de estos
sistemas.
RealVideo utiliza su propio software de servidor (RealServer) para transmitir archivos de
vídeo codificados. En vez de llamar al archivo de vídeo directamente, RealVideo utiliza un sistema
de meta archivos para enlazar con el servidor y el archivo de vídeo. Un meta archivo no es más que
un archivo de texto donde se especifica el URL que apunta al servidor y al archivo de vídeo. A
continuación, puede ver las distintas extensiones que utiliza este sistema:
• *.rm: Archivo de RealVideo.
• *.ra: Archivo de Real Audio.
• *.ram: Meta archivo que ejecuta una sesión independiente de RealPlayer.
• *.rpm: Meta archivo que carga el plug-in
 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.
2. Si el panel Propiedades no se encontrara abierto, diríjase al menú Ventana y escoja la
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.

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

7. Películas flash.
Las películas Flash son animaciones, cuyos archivos tiene las extensiones SWF. Es
frecuente verlas en la 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 Plaer.
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 siguiete
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ó.
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,

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.
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 conido
en la página, pero que no se muestren los controles e 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 crea los
controles de una forma personalizada.

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 “Traileres.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 Dreamweave 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.
 Tema 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 llevara 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.

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

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.

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.

 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:

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 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 el objeto de la página que desee
modificar.
4. En la lista desplegable ID de elemento, alija 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.

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 el 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:

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

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:

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 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.
4. Para finalizar, haga clic en el botón Aceptar.

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

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
combinación de teclas MAYÚS+F4.
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.
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.
17. Para finalizar, haga clic en el botón Aceptar.

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 despúes de un intervalo de tiempo especificado.

Usar la acción Ir al URL:

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 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 detodas 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.
5. Para finalizar, haga clic en el botón Aceptar.
 9. Abrir ventana el 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:

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 Abrir ventana del navegador en el menú
emergente que aparece. Se abre el panel Abrir ventana del navegador.

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 e 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.
7. Para finalizar,haga clic en el botón Aceptar.

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 qu aparecer dichas
imágenes.

Utilizar la acción Carga previa de imágenes:

 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 Carga previa de imágenes en el menú
emergente que aparece.

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 al
lista y haga clic cobre el botón de signo menos (-).
6. Para finalizar, haga clic en Aceptar.

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 resula e gran utilidad para
mostrar información a medida que el usuario va interactuando por una página Web.

Utilizar Mostrar-Ocultar capas:

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 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.
7. Para finalizar, haga clic en el botón Aceptar.

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:
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 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 al 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.
7. Para finalizar, haga clic en el botón Aceptar.

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
combinación de teclas MAYÚS+F4.
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 cumplimiento 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 de un formulario que
desee validar.
8. Para finalizar, haga clic en el botón Aceptar

14. Práctica – Diseño Web 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.
 Tema 15: Diseño Web con Spry.
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.

1. Los widgets de Spry.

Un widget se Spry es un elemento de página que permite la interacción de 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 conjuntos 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 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 el
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.

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:

1. En el menú Insertar seleccione la opción Spry y en el nuevo submenú que aparece 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 el panel diríjase a la vista Diseño y edítelo. Recuerde que puede
utilizar el panel Propiedades para cambiar las características del texto.

5. Para abrir 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:

1. De forma predeterminada, el widget de acordeón se amplía para lenar el espacio
disponible. No obstante, puede limitar el ancho de un widget de acordeón estableciendo

una propiedad e ancho para el contenedor del acordeón.

2. Abra el archivo que contiene el acordeón que desea limita 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: 300px.

3. Widget de barra de menús.

Un widget de barra de menús es un conjunto de botones 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 apare escoja
Barra de menus de Spry. Aparece el cuadro de diálogo Bara de menus de Spry.
2. Seleccione Horizontal o Vertical y haga clic en Aceptar. Automáticamente, el widget
aparece en el documento.

3. Seleccione el widget de acordeón en la ventana de documento y observe el 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.
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 qu 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.
 4. Widget de paneles que pueden contraerse.
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 y ocultar el
contenido almacenado en el panel de forma rápida.

Inserción y edición de un widget que puede contraerse:

1. En el menú Insertar seleccione la opción Spry y en el nuevo submenú que apare escoja
Panel que puede contraerse de Spry. Automáticamente el widget aparece en el
documento.

2. Seleccione el widget de acordeón en al ventana de documento y observe el 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.

5. Widget de paneles en fichas.

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 a 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:
1. En el menú seleccione la opción Spry y en el nuevo submenú que aparece escoja Panel
en fichas 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 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 de panel Propiedades.

6. Widget de grupo de opciones.

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:

1. En el menú Insertar seleccione la opción Spry y en el nuevo submenú que aparece 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 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:

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

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:

1. En el menú Insertar seleccione la opción Spry y en el nuevo submenú que aparece escoja
Campo de texto de validació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. Seleccione un tipo de validación en el menú Tipo.

• Ninguno: No requiere un tipo particular de formato.
• 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 manú emergente
Formato del panel Propiedades.
• 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ú
emergente Formato del panel Propiedades.
• 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úmero de la Seguridad
Social con el formato 00-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.
4. 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.
5. Activando la opción onBlur (Desenfocar) se realizará la validación cuando el usuario
hace clic fuera del grupo de opciones.
6. Activando la opción onChange (Cambiar) se realizará la validación cuando el usuario
realiza selecciones.
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.

8. Widget de área de texto.

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, wl 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:

1. En el menú Insertar seleccione la opción Spry y en el nuevo submenú que aparece escoja
Área de texto de validació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, 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.
4. Activando la opción onBlur (Desenfocar) se realizará la validación cuando el usuario
hace clic fuera del grupo de opciones.
5. Activando la opción onChange (Cambiar) se realizará la validación cuando el usuario
realiza selecciones.
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 delos
permitidos en un widget de área de texto de validación activando la opción Bloquear
caracteres extra dentro del panel Propiedades.

9. Widget de selección.
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:

1. En el menú Insertar seleccione la opción Spry y en el nuevo submenú que aparece escoja
Selección de validació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. 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.

 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.

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:

1. En el menú Insertar seleccione la opción Spry y en el nuevo submenú que aparece escoja
Contraseña de validació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. 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 obligación de introducir
texto de contraseña en los campos por parte del usuario desactivando la opción
Obligatorio del panel Propiedades.
4. 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.
5. Activando la opción onBlur (Desenfocar) se realizará la validación cuando el usuario
hace clic fuera del grupo de opciones.
 6. Activando la opción onChange (Cambiar) se realizará la validación cuando el usuario
realiza selecciones.
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 quela 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úscula: Especifica el número mínimo y máximo de letras
mayúscilas (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.

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 efecto a elementos HTML sin tener que utilizar otras etiquetas personalizadas.
Dreamweaver incluye los siguientes efectos de Spry:
• Aparecer/Desaparecer: 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 arriva 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:

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: Desvanecerse o
Aparecer.
6. En el cuadro Desvanecer desde, define el porcentaje de opacidad que desea que tenga el
efecto cuando desaparezca.
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.
9. Para finalizar, pulse el botón Aceptar.

Aplicación del efecto Persiana:

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

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: 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.
9. Para finalizar, pulse el botón Aceptar.

Aplicación de un efecto Aumentar/Reducir:

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 Aumentar/Reducir.
3. Seleccione el ID del elemento en el menú emergente 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: 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 procentaje 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.
10. Para finalizar, pulse el botón Aceptar.

Aplicación del efecto Resaltado:

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

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 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.
9. Para finalizar, pulse el botón Aceptar.

Aplicación del efecto Agitar:

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 Agitar.
3. Seleccione el ID del elemento en el menú desplegable Elemento de destino. Si ya ha
seleccionado un elemento, elija <Selección actual>.
4. Para finalizar, pulse el botón Aceptar.

Aplicación del efecto Deslizar:

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 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>.
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: 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.
9. Para finalizar, pulse el botón Aceptar.

Aplicación del efecto Arrinconar:

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

3. Seleccione el ID del elemento en el menú desplegable Elemento de destino. Si ya ha

seleccionado un elemento, elija <Selección actual>.
4. Para finalizar, pulse el botón Aceptar.
 Tema 16: Comando teclado.
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.

1. Teclas defunció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

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+.
Edición > Aplicar sangría de 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
Ver > Aumentar y reducir > 100% CTRL+ALT+MAYÚS+1
Ver > Aumentar y reducir > 200% CTRL+ALT+MAYÚS+2
Ver > Aumentar y reducir > 300% CTRL+ALT+MAYÚS+3
Ver > Aumentar y reducir > 400% CTRL+ALT+MAYÚS+4
Ver > Aumentar y reducir > 800% CTRL+ALT+MAYÚS+8
Ver > Aumentar y reducir > 1600% CTRL+ALT+MAYÚS+6
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
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
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 Combinaciones 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
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+Ñ
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 > Formato de párrafo > Encabezado 2 CTRL+2
Formato > Formato de párrafo > Encabezado 3 CTRL+3
Formato > Formato de párrafo > Encabezado 4 CTRL+4
Formato > Formato de párrafo > Encabezado 5 CTRL+5
Formato > Formato de párrafo > Encabezado 6 CTRL+6
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

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 > Bussiness Catalyst CTRL+MAYÚS+B
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
Ayuda > Ayuda de ColdFusión CTRL+F1
Ayuda > Referencia MAYÚS+F1