1.

1 Introducción a Adobe Dreamweaver CS4

Adobe Dreamweaver CS4 es un editor de código HTML profesional para el desarrollo de páginas Web. Tanto si
estamos habituados a trabajar directamente con el código HTML, como si prefiere un entorno de edición visual fácil de
manejar (Microsoft FrontPage), Dreamweaver es, realmente, la herramienta que nos permitirá trabajar del mismo modo
que lo hacen los diseñadores Web profesionales.
A lo largo de este curso, aprenderá a manejar y crear sitios Web, utilizando las características novedosas que ofrece un
programa amplio en opciones de diseño, que serán indispensables para los diseñadores expertos y principiantes de
Internet.

Dreamweaver nos permite crear sitios Web en forma visual, utilizando la interfaz gráfica de fácil manejo del programa, y
nos da la posibilidad de visualizar los cambios que vayamos introduciendo, al mismo tiempo que los realizamos.
1.2 Requisitos mínimos necesarios
Para la instalación de este programa y su correcto funcionamiento, se requieren una serie de condiciones y requisitos
mínimos para el PC en el que vayamos a trabajar:
Procesador a 1 GHz o más rápido
Microsoft® Windows® XP con Service Pack 2 (se recomienda Service Pack 3) o Windows Vista® Home Premium,
Business, Ultimate o Enterprise con Service Pack 1 (certificado para ediciones de Windows XP y Windows Vista de
32 bits)
512 MB de RAM
1 GB de espacio disponible en el disco duro para la instalación; se necesita espacio libre adicional durante la
instalación (no se puede instalar en dispositivos de almacenamiento basados en Flash)
Pantalla de 1.280 x 800 con tarjeta de vídeo de 16 bits
Unidad de DVD-ROM
Conexión a Internet de banda ancha necesaria para los servicios en línea**

1.5 Panel de herramientas Insertar

El Panel de herramientas Insertar contiene los elementos más utilizados para el diseño de páginas Web. En ella,
seleccionaremos desde imágenes a plug-ins Actives e incluso comentarios HTML. Además, personalizaremos esta
barra añadiendo nuestros propios elementos y organizándolos a nuestro gusto.
Dentro de la Barra de herramientas Insertar, veremos ocho categorías de forma predeterminada: Común, Diseño,
Formularios, Datos, Spry, InContext Editing, Texto y Favoritos.

Podrá acceder a estas opciones como paneles totalmente independientes, o bien como pestañas, para este caso
deberá elegir el Espacio de Trabajo Clásico, haciendo clic en la correspondiente opción ubicada en la parte superior
derecha de Dreamweaver

En este caso el panel se mostrará como una barra donde podrá seleccionar Mostrar como Fichas del menú con forma
de flecha desplegable.

Para volver a mostrar como opciones independientes cada categoría, presione sobre una de las pestañas con el botón
secundario del ratón y marque la orden Mostrar como menú.
A continuación, para la descripción de cada categoría emplearemos el Espacio de Trabajo Clásico.

Común: Al seleccionar esta categoría, tendrá acceso a las opciones y elementos HTML más utilizados como:
imágenes, tablas, hipervínculos, etc.
Contiene, además, botones que permiten que los diseñadores Web incluyan etiquetas <meta> con palabras claves para
los motores de búsqueda, especificar el calendario de actualización y otras muchas tareas que producen un gran
impacto en el rendimiento general de un sitio Web

Diseño: En ella, verá opciones para insertar tablas, etiquetas <div>, iframes, marcos, o elementos Spry que agregan
efectos y opciones especiales para mostrar información en la página, son scripts javascript proporcionados por
Dreamweaver.
A sí mismo podrá elegir entre las vistas de tablas: Estándar y Ampliada.

Formularios: Ofrece comandos con los que crearemos formularios e insertaremos los elementos que los componen.

Texto: Contiene caracteres especiales como los símbolos de copyright, comillas curvas, marca registrada, etc.

Datos: Esta categoría permite insertar elementos dinámicos como juegos de registros, regiones repetidas y grabar
formulario de inserción y actualización, entre otros.

Favoritos: En esta categoría podrá agrupar y organizar los botones de la Barra de herramientas Insertar que utiliza
con más frecuencia.

1.7 Barra de herramientas Documento

Esta Barra de herramientas contiene botones que nos permitirán alternar entre las diferentes vistas del documento.
Además, dicha Barra contiene algunos comandos comunes relacionados con la selección de vistas y el estado del
documento.
A continuación, vamos a ver con más detenimiento las posibilidades que nos ofrece:

Mostrar vista de Código: Nos permite examinar o editar el código HTML en la ventana de documento.

Mostrar vistas de Código y Diseño: Nos muestra, en la ventana de documento una combinación de la vista Código y
la vista Diseño.

Mostrar vista de Diseño: Es la vista en la que se muestra por defecto la ventana de documento; nos muestra una
representación visual del documento, en lugar del código subyacente.

Título de documento: Nos permite introducir un título para el documento de una forma rápida. Si el documento ya
dispone de uno, aparecerá en este campo.

No hay errores de comprobación de navegador: Comprueba la compatibilidad con diferentes navegadores.

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

Administración de archivos: Abre un menú con diferentes opciones para el archivo actual.
Vista previa/Depurar en explorador: Este menú emergente nos permitirá previsualizar el documento actual en la
ventana del navegador. Para agregar o cambiar los navegadores enumerados en el menú, utilizaremos la opción Editar
lista de navegadores y actuaremos desde el cuadro de diálogo Preferencias.

Actualizar vista de diseño: Utilice este botón para actualizar la vista Diseño después de realizar cualquier cambio en
el código de nuestro documento.

Ver opciones: Este menú nos dejará configurar una serie de opciones que nos ayudarán a la hora de trabajar con el
documento de Dreamweaver.

Ayudas visuales: Nos proponen ciertas opciones que nos ayudarán en el diseño de nuestras páginas.

1.8 Panel Propiedades

El panel Propiedades de Macromedia Dreamweaver es probablemente la herramienta usada con más frecuencia en el
programa. Esencialmente, este panel nos permitirá examinar y editar las propiedades del elemento seleccionado en el
documento actual, ya sea una tabla, una imagen o una línea de texto.
La forma de acceder a estas opciones es presionando la orden Propiedades del menú Ventana.

El contenido del panel Propiedades varía de forma dinámica en función del elemento seleccionado. Por ejemplo, si
seleccionamos una línea de texto, podremos cambiar su fuente, color y tamaño; cuando seleccionamos una tabla,
podremos cambiar el número de columnas y filas, las dimensiones relativas, grosor de bordes y color, y alineación del
contenido en las celdas.
Podrá acceder a atributos menos comunes de un objeto haciendo clic en la flecha de ampliación, situada en la esquina
inferior derecha del panel.

1.12 Panel Activos

El panel Activos es una de las herramientas de Dreamweaver a la que dedicaremos una atención especial. Como los
sitios Web han crecido en complejidad, manejar los activos puede convertirse en una tarea muy difícil.
Algunos sitios Web pueden tener cientos de imágenes, archivos de audio y archivos multimedia. El panel Activos nos
permitirá administrar de forma fácil y rápida todos los activos de nuestro sitio Web. Podremos controlar todos los
colores, imágenes, URL externos y secuencias de comandos, así como elementos Flash, Shockwave, QuickTime,
plantillas y bibliotecas desde un lugar central.

Este panel ofrece dos formas de ver los activos; la opción Sitio, que muestra todos los activos del sitio (que reconoce el
panel), y la opción Favoritos, que sólo muestra los activos seleccionados de manera explícita.
Para mostrar el panel Activos, despliegue el menú Ventana y seguidamente, presione la orden Activos.

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

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

Colores: Son los colores utilizados en documentos y hojas de estilos del sitio, incluidos los colores del texto, el fondo y
los vínculos.

URL: Muestra los URL externos a los que están vinculados los documentos del sitio. Esta categoría incluye los
siguientes tipos de vínculos: FTP, gopher, HTTP, HTTPS, JavaScript, correo electrónico (mailto) y archivo local (file://).

Flash: Son archivos de cualquier versión del formato Flash de Macromedia. El panel Activos muestra los archivos .swf
(Flash comprimidos), pero no los .fla (Flash de origen).
Shockwave: Son archivos de cualquier versión del formato Shockwave de Macromedia.

Películas: Son archivos de películas en el formato QuickTime o .mpeg.

Scripts: Son archivos JavaScript o VBScript. Las secuencias de comandos de archivos HTML no aparecen en el panel
Activos, a diferencia de las incluidas en archivos JavaScript o VBScript independientes.

Plantillas: Permiten utilizar la misma disposición en múltiples páginas, así como modificar fácilmente el diseño de todas
las páginas a la vez.

Biblioteca: Son elementos que se utilizan en múltiples páginas. Cuando se modifica un elemento de biblioteca, se
actualizan todas las páginas que contienen ese elemento.

2.1 Planificación de un sitio Web

Antes de comenzar a realizar ningún tipo de desarrollo, es necesario hacer una planificación de nuestro sitio. Dicha
planificación, no sólo reducirá considerablemente el tiempo empleado en la creación, sino que nos ayudará a que todas
las páginas presenten un aspecto uniforme, además de hacer más sencillo su uso. La forma más cómoda de trabajar,
cuando la labor que desarrollamos se vaya a publicar en un servidor FTP en Internet, es crear una carpeta local de
almacenamiento en la cual situaremos todo nuestro trabajo. De esta forma, podremos comprobarlo todo antes de
subirlo al servidor, minimizando así la aparición de posibles errores en el sito Web una vez abierto al público.
Existen diferentes métodos básicos de distribución de las páginas con los que cualquier diseñador deberá estar
familiarizado, pues cada uno sirve para un propósito diferente, permitiéndonos incluso su combinación:
Estructura lineal: Antes del nacimiento de la World Wide Web, la mayoría de los formatos visuales eran lineales, es
decir, una página seguía a otra a lo largo de una secuencia inalterable. Este modelo, hoy en día, todavía es muy usado
para crear aplicaciones de enseñanza, donde podremos controlar el orden de visualización de los temas, mostrando
una página tras otra como si de un libro multimedia se tratase.
Estructura jerárquica: En este modelo, tomamos como punto de partida una página de inicio, desde la cual podremos
acceder al resto de páginas del sitio. Los sitios con estructura jerárquica ayudan a proporcionar un mejor sentido sobre
la orientación de nuestro sitio Web.

Estructura centralizada: Este tipo de navegación está basado en una página central de inicio a la que le vincularemos
el resto de páginas principales del sitio. El principal inconveniente de este modelo es tener que pasar constantemente
por la página principal para ir a otra zona.

Estructura libre: Esta última estructura nos permite aprovechar al máximo la funcionalidad de los hipervínculos,
permitiéndonos que prácticamente cualquier página pueda conectarse a cualquier otra de nuestro sitio. Como principal
inconveniente del uso de este método es la pérdida del internauta durante la navegación.
2.2 Configurar un sitio Web
Una vez establecida la planificación del sitio, decidido el diseño y su estructura, estamos preparados para configurar
uno nuevo usando Dreamweaver. Aunque siempre es posible definir la ubicación, lo más adecuado es configurar el sitio
local en Dreamweaver antes de comenzar a crear las distintas páginas que compongan el proyecto.
A lo largo de la siguiente explicación, aprenderemos a establecer este sitio local en Dreamweaver, lo que significa que
podremos utilizar Dreamweaver con FTP para gestionar meticulosamente, tanto su copia local (PC) como la remota
(Servidor), reduciendo al máximo su mantenimiento.

2.3 Editar un sitio Web existente

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

2.4 Sistema de protección

Dreamweaver nos permite activar un sistema de protección de páginas que resulta de gran utilidad cuando un equipo
de diseñadores y programadores se encargan de desarrollar y mantener un sitio Web. De esta manera, si por ejemplo,
uno de los diseñadores está realizando alguna modificación, Dreamweaver insertará, en el panel Archivos, una marca
junto al archivo que estuviera editándose, para que el resto de diseñadores se den cuenta de que ese fichero se está
modificando.

2.5 Panel Archivos

El panel Archivos es el lugar donde podremos realizar el mantenimiento de nuestro sitio Web. A través de sus opciones,
podremos crear nuevos documentos HTML, abrir y mover archivos, crear carpetas, y borrar elementos. También
podremos utilizarlo para transferir archivos de la carpeta en desarrollo, de su disco duro a su servidor Web.
El panel Archivos presenta una Barra de herramientas que podremos utilizar para establecer qué debe mostrarse en
dicha ventana y para transferir archivos entre los sitios local y remoto

2.6 Configurar las preferencias del panel Archivos

Mediante esta explicación veremos cómo configurar el panel Archivos para que se cubran todas nuestras necesidades.

2.7 Mapa del sitio

A continuación, explicaremos cómo utilizar el comando Mapa del sitio del panel Archivos, con el que podremos ver un
sitio local en forma de plano visual de iconos vinculados. Con este mapa, el diseñador Web puede ver cómo está
estructurado todo el sitio Web.

2.8 Mapa de diseño del sitio

Existen ocasiones en las que no pueda visualizar el mapa de su sito, y posiblemente la causa se deba a que no se ha
especificado ninguna página principal y Dreamweaver no logra localizar ningún archivo denominado index.html o
index.htm en la raíz. En estos casos, Dreamweaver le mostrará un mensaje de advertencia pidiéndole que seleccione
una página principal.
Para evitar problemas de este tipo, asegúrese de que la disposición del Mapa del sitio sea la correcta.

2.9 Crear, abrir y guardar documentos

Una vez que hemos aprendido a crear el sitio local, debemos comenzar a desarrollar los documentos que colocaremos
en él.

2.10 Configurar las propiedades del documento

Antes de comenzar a añadir contenido a un documento, podremos necesitar configurar sus propiedades principales.
Con el cuadro de diálogo Propiedades de la página, podremos configurar el título de la página, las imágenes y colores
del fondo, del texto y de los vínculos.

2.11 Guías visuales

Dreamweaver nos proporciona varios tipos de guías visuales que nos ayudarán a la hora de diseñar y previsualizar cuál
será la apariencia de nuestro diseño en un navegador. Aprenderemos a activar la visualización de las reglas y a utilizar
la cuadrícula para lograr una mayor precisión en la colocación y ajuste del tamaño de las capas.
2.12 Insertar palabras clave y descripciones
Si desea dar a conocer una página Web, podremos usar una serie de elementos encargados de contener la información
necesaria para que los motores de búsqueda puedan dar a conocer el contenido y tipo de la página Web. En
Dreamweaver, estos elementos están representados por los objetos Palabras clave y Descripción

2.13 Previsualizar un documento

A la hora de usar un programa como Dreamweaver, o cualquier otro programa de creación de páginas Web, es
importante el poder previsualizar el resultado de nuestro trabajo con cierta frecuencia en uno o varios exploradores. A
pesar de que en la ventana de trabajo del programa, se tiene una visión muy similar a la de un explorador, debido al
gran número de navegadores existentes y a sus diferencias, se hace necesario poder visualizar nuestra página en ellos.

3.1 Vídeo real: Creación y colocación de textos

Crear y colocar texto en un documento de Dreamweaver es un acto muy sencillo consiste en ubicar el cursor sobre la
ventana del 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 venta de documento por defecto este adopta el formato
establecido en la aplicación. Dreamweaver nos proporcionara una gran variedad de herramientas para modificar dicho
formato permitiéndonos cambiar el tamaño, fuentes y color adaptándolo al diseño de nuestra página.

3.2 Encabezados y párrafos

Todo texto HTML está compuesto principalmente por encabezados y párrafos. Del mismo modo en que se muestran en
un periódico los titulares para anunciar una historia o los subtítulos para resumirla, los encabezados en Dreamweaver
serán utilizados para separar las distintas secciones principales de un documento HTML. Dreamweaver nos presenta
seis niveles de encabezados cuya etiqueta en HTML es <hn>, donde n es un número del 1 al 6. El encabezado de
mayor tamaño es <h1> y el de menor <h6>.
Los encabezados HTML, a diferencia de cualquier procesador de textos, no están vinculados a ningún tamaño
específico en puntos, tienen un tamaño determinado y proporcional dependiendo en última instancia del explorador que
estemos usando.
La mayor parte de páginas Web están compuestas generalmente por párrafos. Éstos, en HTML, se distinguen por el
uso de la etiqueta <p>. En Dreamweaver se inicia uno nuevo cada vez que se pulsa la tecla INTRO en la ventana de
documento

3.3 Asignar fuentes a un texto

Un diseñador gráfico, normalmente, puede utilizar tantas fuentes como tenga configuradas en su sistema. Los
diseñadores de páginas Web, por el contrario, se encuentran con la limitación de que los navegadores sólo pueden
mostrar fuentes que estén instaladas en el sistema del usuario, de no ser así, el navegador la reemplazará por una
fuente que sí esté instalada.
En todas las partes del mundo, cada ordenador personal que fue fabricado en los últimos años incluye lo que se
denomina Fuentes del sistema. Éstas son: Times New Roman, Courier New y Arial (para PC), y Times New Roman,
Courier New y Helvetica (para MAC). Con el uso de estas fuentes, no tendremos que temer por su sustitución.

3.4 Editar la lista de fuentes de Dreamweaver

A continuación, veremos los pasos que debemos seguir para editar la lista de fuentes de las que dispone Dreamweaver.

3.5 Cambiar el color del texto

El color de texto de un documento, por defecto, será el predeterminado por el navegador del usuario, normalmente el
negro. Sin embargo, con Dreamweaver podremos cambiarlo de modo que el nuevo color prevalezca sobre el
establecido en el cuadro de diálogo Propiedades de la página.
Los colores se expresan en HTML como valores hexadecimales o usando sus nombres. El valor hexadecimal se basa
en el valor de la mezcla de los colores rojo, verde y azul y se representa por el símbolo almohadilla (#) seguido de 6
caracteres. Así por ejemplo, #FFFFFF es el valor hexadecimal correspondiente al color blanco.

3.6 Alineación del texto

Dreamweaver es un programa que nos permite alinear fácilmente el texto. HTML soporta la alineación del texto
respecto al margen izquierdo, derecho, justificado y al centro de la ventana del navegador.

3.7 Sangrías
En el lenguaje HTML, debemos insertar la etiqueta <blockquote> cuando queramos aplicar un sangrado a un párrafo.
Dreamweaver inserta, de forma automática, esta etiqueta al hacer clic sobre el icono Sangría de texto del panel
Propiedades.

3.8 Crear listas

Con Dreamweaver, creamos fácilmente listas numeradas, listas con viñetas y listas de definición a partir de texto
existente o de texto nuevo que escriba en la ventana de documento. Las listas de definición no emplean caracteres
iniciales como puntos, guiones o números y suelen utilizarse en glosarios o descripciones.

3.9 Corrección ortográfica

Cometer errores ortográficos en el texto de nuestra página Web puede dar una mala impresión a los visitantes.
Dreamweaver, al igual que cualquier procesador de texto, incluye un corrector ortográfico fácil de manejar, y que nos
ahorrará esos desagradables momentos. Es una buena costumbre realizar una comprobación ortográfica de nuestra
página Web antes de publicarla.
La corrección que realiza Dreamweaver no tiene en cuenta las etiquetas HTML ni los valores de atributo, sólo corrige el
texto escrito en la ventana del documento abierto. Dreamweaver comprueba el texto de la página Web usando dos
diccionarios diferentes: uno estándar para el idioma seleccionado y otro personalizado, al que podremos ir añadiendo
las palabras que creamos oportunas.

3.10 Insertar fechas en un documento de Dreamweaver

Dreamweaver nos proporciona un objeto Fecha que permite insertar la fecha actual con el formato que prefiera (con o
sin la hora) y ofrece la posibilidad de actualizarla cada vez que guarde el archivo.

3.11 Insertar caracteres especiales

A la hora de trabajar con un editor de páginas Web, cualquier usuario se limita a introducir el texto directamente con el
teclado, consiguiendo una letra, número u otro carácter por cada tecla pulsada. ¿Qué ocurriría si necesitamos insertar
un carácter que no aparece en el teclado? Gracias a Dreamweaver, podremos añadir caracteres especiales con un
simple clic del ratón.

3.12 Insertar reglas horizontales

Las reglas horizontales (líneas) resultan de gran utilidad a la hora de separar bloques de texto y organizar mejor la
información en un documento de Dreamweaver. Esencialmente, una regla horizontal es una línea recta que se
extenderá a lo largo de toda la ventana de documento.

3.13 Crear un texto Flash

Nota: Es importante hacer saber al usuario que necesitará tener instalado en su PC el plug-in de Flash,
para poder ver este tipo de texto insertado en un documento HTML.

La tecnología Flash es la principal solución para la creación y reproducción de gráficos y animaciones vectoriales.
Dreamweaver nos permite crear texto vectorial editable, que podemos colocar en un documento HTML. Usando texto
Flash, evitaremos las limitaciones de fuente y tamaño que hemos visto al comienzo del tema.

3.14 Creación de estilos CSS

Un estilo es un grupo de atributos de formato que controla la apariencia de un rango de texto en un documento. Una
hoja de estilos CSS es un archivo de texto externo, que contiene estilos y especificaciones de formato, que se puede
emplear para controlar muchos documentos al mismo tiempo. La ventaja de utilizar una hoja de estilos CSS sobre un
estilo HTML reside en que, además de estar vinculada a múltiples documentos cuando se actualiza o cambia un estilo
CSS, se actualiza automáticamente el formato de todos los documentos que utilicen esa hoja de estilos.
Las hojas de estilos CSS residen en el área <head> del documento.

3.15 Buscar y reemplazar texto

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.

4.1 Formatos de gráficos Web

Lo primero y más importante que necesitamos saber a la hora de trabajar con formatos de imágenes para la Web es
que, sin la ayuda de plug-ins, ésta sólo soporta tres tipos de imágenes: el formato JPEG, el formato GIF y el formato
PNG. Los dos primeros son reconocidos por la totalidad de exploradores y el tercero cada vez se encuentra más
integrado en Internet.
GIF (Graphics Interchange Format): Fue desarrollado originalmente por CompuServe a finales de los años 80 para
solucionar el problema de incompatibilidad entre plataformas. Los archivos GIF son imágenes de mapa de bits que
utiliza una paleta de 256 colores como máximo, por eso, este formato suele ser usado para imágenes simples con
colores planos (dibujos y logotipos) y son generalmente de un tamaño reducido.
JPEG (Joint Photographic Experts Group): Fue desarrollado con el fin de manejar imágenes fotográficas. La fuerza
principal de este tipo de imágenes es que pueden trabajar con millones de colores. Para hacer que este formato sea
manejable se ha de comprimir tal cantidad de colores, eliminando lo que los algoritmos consideren información
redundante. Cuanto mayor sea la compresión del archivo, menor será su resolución.
PNG (Portable Network Graphic): Fue desarrollado por Macromedia y combina la compresión de los archivos GIF con
los millones de colores de las imágenes JPEG, por lo tanto, soporta color indexado (256 colores), escala de grises,
imágenes de color verdadero (millones de colores) y transparencias. El problema del uso de este formato es que, hasta
hace poco, los navegadores sólo lo reconocían mediante la utilización de plug-ins. Dreamweaver es de los primeros
programas que permite trabajar con archivos PNG de un modo natural, visualizándose en la ventana de documento del
programa, igual que un archivo GIF o JPEG.

4.2 Colocación de imágenes

Dreamweaver nos permite abrir cualquier tipo de archivo guardado en formato GIF, JPEG o PNG para colocarlo en la
ventana de documento.

4.3 Editar imágenes

Dreamweaver es una completísima herramienta de creación de páginas Web, y no un programa de edición de gráficos.
Pero en muchas ocasiones, al colocar una imagen en un documento nos daremos cuenta de que ésta debe ser
modificada. Dreamweaver nos permitirá especificar el editor de gráficos que desee utilizar.

4.4 Cambiar el tamaño de las imágenes

La anchura y altura de una imagen son dos atributos importantes, ya que los navegadores reconstruyen las páginas
más rápido si conocen estos atributos. Estos valores, expresados en píxeles, son incluidos en el código HTML de un
documento al insertar una imagen.
Redimensionar una imagen desde Dreamweaver es realmente fácil. Los campos de edición 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.

4.5 Uso de la etiqueta <alt>

La etiqueta <alt> es probablemente uno de los mayores rasgos distintivos que podremos usar con las imágenes que
colocamos en Dreamweaver. Esencialmente, la etiqueta <alt> nos permite proporcionar información extra sobre una
imagen. Esta información de texto sustituirá a la imagen en los navegadores que sólo admiten texto o en aquéllos
configurados para descargar las imágenes manualmente. En algunos navegadores, este texto también será visible al
colocar el cursor del ratón sobre la imagen que tenga asociada esta etiqueta.

4.6 Justificar imágenes

Lo más básico que podemos hacer con una imagen después de colocarla en la ventana de documento de
Dreamweaver, es justificarla dentro de la página. Por regla general, una imagen no se puede mover dentro de un
documento, sí lo permiten, sin embargo, otros programas de edición como Fireworks o Photoshop, donde la alineación
se convierte en una parte importante del diseño final.

4.7 Alineación de imágenes con texto

Ahora que ya sabe cómo justificar imágenes en un documento, veremos la forma de alinear imágenes con texto en
Dreamweaver. A diferencia de otras aplicaciones, fundamentalmente editores de texto, HTML no ofrece ningún método
para ajustar texto alrededor del contorno de una imagen. Lo que sí podremos hacer con Dreamweaver será alinear una
imagen con texto, con otra imagen o con otros elementos de la misma línea.

4.8 Insertar bordes

Durante el proceso creativo, suele ser necesario añadir un borde sólido alrededor de una imagen para poder distinguirla
de otras colocadas en el mismo documento. El atributo borde nos permite situar un borde rectangular de un solo color
rodeando un gráfico. La anchura de este borde se mide en píxeles y el color de éste es el mismo que el del texto
predeterminado del documento.

4.9 Insertar imágenes de sustitución

Las imágenes de sustitución son uno de los efectos más populares en la realización de páginas Web. Una imagen de
sustitución no es más que una imagen que cambia cuando sitúa el puntero del cursor sobre ella. En verdad trabajamos
con dos imágenes: la imagen principal, que es la que aparece al cargarse inicialmente la página y la imagen que la
sustituye, que aparece al colocar el puntero del ratón sobre la primera.
 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.

5.1 Vídeo real: Utilización de marcos

Los marcos se usan en DW para mejorar la navegación por una web. La mayoría de las páginas que se pueden visitar
en internet suele 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 en el menú el vínculo apare 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 en el sitio

5.2 Creación de marcos y conjuntos de marcos

Los marcos pueden ser una excelente herramienta para los diseñadores de páginas Web, pero hemos de tener en
cuenta que deben aplicarse correctamente para que funcionen. En la siguiente aplicación, se explicarán con detalle los
métodos que nos ofrece Dreamweaver para dividir nuestra página Web en marcos y hacer así que nuestro propio
conjunto de marcos no falle.

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

5.3 Modificar el tamaño de los marcos

Dreamweaver nos proporciona dos métodos para modificar las dimensiones de los marcos: uno, lo vimos anteriormente
y consiste en arrastrar los bordes con el ratón directamente por la ventana de documento y dos, que será más preciso y
consistirá en introducir los valores utilizando el panel Propiedades.

5.4 Modificar los bordes de un conjunto de marcos

De forma predeterminada, Dreamweaver ajusta sus conjuntos de marcos todos sin bordes. En la siguiente explicación,
veremos cómo podremos alterar el color y cambiar el grosor.

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

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

5.8 Añadir barras de desplazamiento

Una de las cualidades que han dado mayor aceptación a los marcos es la posibilidad de introducir barras de
desplazamiento para cada marco. Estas barras de desplazamiento se usan cuando la ventana de navegador es
demasiado pequeña para mostrar toda la información contenida en un marco del documento. Hay cuatro opciones
seleccionables en la lista desplegable Desplazamiento dentro del panel Propiedades:

Predeterminado: Deja el uso de barras de desplazamiento en manos del explorador.

Sí: Fuerza la aparición de barras de desplazamiento sin importar la cantidad de información de un marco.
No: Inhabilita las barras de desplazamiento.
Automático: Activa las barras de desplazamiento si el contenido del marco se extiende horizontal o verticalmente más
allá de lo que la ventana del explorador puede mostrar.

5.9 Destinar la información de un vínculo

Uno de los principales usos de los marcos es el de controlar la navegación de una página Web. Un marco puede actuar
como centro de la navegación de nuestra página, ofreciendo vínculos a otras páginas de nuestro sitio. Cuando el
usuario selecciona uno de los vínculos, la página solicitada aparece en otro marco de la página, el cual podrá
manejarse independientemente del marco de navegación.
Anteriormente, estuvimos viendo que había ciertos nombres de marcos que no se podían utilizar porque se
encontraban reservados. Son los cuatro nombres reservados para las partes de un conjunto de marcos que se usan
como destino: _blank, _parent, _self, y _top. Con ellos, puede hacer que el contenido de un vínculo se superponga al
marco actual o aparezca en una ventana de explorador nueva.

_blank: Abre el vínculo en una nueva ventana de explorador y mantiene la ventana actual disponible.
_parent: Abre el vínculo en el conjunto de marcos padre del marco actual.
_self: Abre el vínculo en el marco actual, sustituyendo su contenido por completo. Es la opción predeterminada por el
programa.
_top: Abre el vínculo en el conjunto de marcos más exterior de la página Web actual, sustituyendo todos los marcos.

6.1 Vídeo real: Utilización de tablas

Las tablas son unas de las utilidades más potente para presentar datos e imágenes en un documento HTML las tablas
se componen de tres elementos básicos columnas, filas y celdas, las filas van de izquierda a derecha de la tabla y las
columnas de arriba abajo, las celdas 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 incluya en la etiqueta “Table”
esta etiqueta puede tener numerosos atributos que afectaran a la altura y anchura de la tabla al borde y alineación y
color de fondo también podemos controlar el tamaño del espacio entre celdas y el relleno de las mismas

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

6.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).
6.4 Selección de elementos de una tabla
Del mismo modo que ocurre en Dreamweaver con las imágenes y el texto que tenemos en la ventana de documento, el
primer paso que tenemos que dar para aplicar cambios a una tabla o a cualquiera de sus elementos es seleccionarla.
En la siguiente explicación, veremos cómo, con un solo movimiento de ratón, podemos seleccionar toda una tabla, una
fila, una columna o un rango contiguo de celdas dentro de la tabla.

6.5 Alineación del contenido de una celda

Además de los controles generales para modificar una tabla que hemos estado viendo a lo largo del tema,
Dreamweaver nos ofrece otras propiedades para trabajar con las celdas de una tabla de forma individual. En la
siguiente explicación, utilizaremos el panel Propiedades para ajustar la alineación horizontal o vertical del contenido
(texto o imágenes) de una celda.

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

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

6.8 Ordenar tablas

Con el comando Ordenar tabla de Dreamweaver, podremos ordenar una tabla de una manera sencilla de acuerdo con
el contenido de una columna. Además, podremos realizar una operación más compleja ordenándola de acuerdo al
contenido de dos columnas. Es importante resaltar que no se pueden ordenar tablas que contengan celdas
combinadas.

7.1 Vídeo real: Aparición de las capas. Mejoras en el diseño

Cuando la Word 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 algo especial, el énfasis recaía sobre los contenidos y la innovadora
capacidad del hipertexto que permitía saltar de una página a otra. Después de que apareciera el primer navegador con
soporte gráfico, quedó claro que las imágenes y el diseño podía mejorar la accesibilidad y la comercialización de los
sitios web el primer intento en diseño de páginas web fue el mapa gestionado por el servidor este elemento era una
imagen de gran tamaño con ventanas activas pero que normalmente resultaba demasiado grande para ser descargado
con comodidad. La amplia aceptación que tuvo la aparición de la tabla provoco un cambio radical en el control del
diseño, se consiguió alinear objetos y textos 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 agregadas e imágenes lip de un pixel 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
especialización de las hojas de estilo 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 bloque de texto en cualquier parte de una página
7.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:
<div id=”Layer1” style=”position:absolute; width:200px; height:260px; z-index:1”></div>
Con Dreamweaver, podrá mover una capa, colocándola y dimensionándola de la forma que prefiera, ya sea con el ratón
o introduciendo valores numéricos en el panel Propiedades. Combinando ambos métodos, podremos esbozar
rápidamente el diseño de la capa y alinear después los bordes con exactitud.
7.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.

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

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

7.6 Ajustar la alineación de las capas

La capacidad de poder colocar las capas libremente en cualquier lugar de un documento, conlleva exigencias
adicionales y posibles problemas. Dreamweaver incluye dos herramientas para simplificar el diseño de capas en la
ventana de documento: las reglas y la cuadrícula.
Se puede decir que estas dos herramientas son comunes en la mayoría de programas de diseño gráfico. Las reglas de
Dreamweaver se sitúan a lo largo de los bordes exteriores (superior e izquierdo) de la ventana de documento y pueden
mostrar los ejes X e Y en píxeles, pulgadas o centímetros. La cuadrícula entrecruza la página con líneas que nos
servirán de guías cuando vayamos a colocar objetos.

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

8.1 Vídeo real: 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 dirección exclusiva llamada URL. Dreamweaver nos ofrece la posibilidad de trabar con dos tipo
de vínculos: relativos y absolutos.
Vínculos absolutos: nos proporcionan URL completa del documento vinculado incluido el protocolo por ejemplo la
siguiente dirección http://www.macromedia.com/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 vinculo
relativo no necesariamente debe tener la misma estructura y protocolo que uno absoluto, en estos se omite la parte de
la URL absoluta que coincide entre el documento actual y el vinculado indicando únicamente la parte de la ruta
diferente.

8.2 Crear vínculos

Es algo muy común asignar vínculos a palabras o frases de su página, a imágenes como botones de navegación o a
una porción determinada de un mapa de imagen. La etiqueta HTML que establece un vínculo de hipertexto se
denomina etiqueta de punto de fijación o etiqueta <a>. Dreamweaver crea una etiqueta de punto de fijación para los
objetos, texto o imágenes desde los que se generan vínculos. Puede crear vínculos con otros documentos y archivos,
así como vínculos con lugares específicos de un documento utilizando la etiqueta <a href>.
Por ejemplo, si en la ventana de documento selecciona la frase Volver a la página Principal y, a continuación, crea un
vínculo con un archivo llamado “index.htm”, el código HTML del vínculo será el siguiente:
<a href=”index.htm”>Volver a la página Principal</a>
Cuando se vincula un enlace a una imagen, como por ejemplo “logo.gif”, el código será:
<a href=”home.htm”><img scr=”imagenes/logo.gif”></a>

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

8.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 <name>. El segundo
paso consistirá en insertar un vínculo enlazado a dicho anclaje.

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

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

8.7 Creación de mapas de imagen

Un mapa de imagen es una imagen dividida en distintas regiones o zonas interactivas. Hasta ahora, hemos visto que al
añadir un vínculo a una imagen, ésta se convierte en un vínculo. Con un mapa de imagen, podremos diseñar múltiples
zonas interactivas en una imagen utilizando el panel Propiedades y vincular cada una de ellas a una página diferente.

8.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
8.9 Creación de Barras de navegación
Una Barra de navegación se compone de un conjunto de imágenes cuya visualización cambia según las acciones que
realice el usuario. Las Barras de navegación nos permitirán desplazarnos fácilmente por las páginas y archivos de un
sitio.
Antes de usar el comando Imágenes: Barra de navegación, deberemos crear el conjunto de imágenes para los distintos
estados que se mostrarán con cada elemento de navegación que configuremos. Un elemento de Barra de navegación
puede presentar cuatro estados:
Imagen arriba: Es la imagen que aparece en el documento cuando se carga la página en el navegador del internauta.
Sobre imagen: Es la imagen que aparece cuando situamos el puntero del ratón sobre la imagen. Como norma general,
se suele cambiar la apariencia del elemento, ya sea modificando su forma o añadiendo algún tipo de efecto para
resaltar la imagen.
Imagen abajo: Es la imagen que aparece después de hacer clic en el elemento. En este caso, el elemento seleccionado
se muestra oscurecido indicando que ha sido elegido.
Sobre mientras imagen abajo: Es la imagen que aparece cuando el puntero del ratón pasa sobre la Imagen abajo
después de haber hecho clic en el elemento. Utilice este estado para indicar, visualmente a los usuarios, que no pueden
volver a hacer clic en el elemento mientras se encuentre en esta parte del sitio.

Nota: No es necesario incluir imágenes en la Barra de navegación para los cuatro estados. Es posible que
para la navegación que quiera crear le baste con los dos primeros estados descritos.

9.1 Vídeo real: Funcionamiento de los formularios

Los formularios permitirán al usuario pasar información a los creadores o administradores de una página web hoy dia
los formularios se emplean en la red para realizar encuestas comercio electrónico, libros de visita, votaciones, etc. Para
que ellos funciones correctamente los cuestionarios necesiten algún tipo de conexión a un servidor que como forma
general toma la forma de un guion CGI aunque también se puede usar Java y Java Script los formularios al igual que
ocurría con las tablas se pueden concebir como unidades independientes contenidas en una pagina web todos los
elementos de un formulario se almacenan dentro de la etiqueta “form” a diferencia de las tablas no podremos introducir
formularios dentro de otros aunque nada nos impedirá que creemos varios formularios en un mismo documento.

9.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 de la Barra de herramientas Insertar.

Formulario: Inserta un formulario en el documento. Dreamweaver inserta etiquetas <form> de apertura y cierre de
formulario en el código HTML.

Campo de texto: Inserta un campo de texto en un formulario. Éstos admiten todo tipo de texto, tanto alfabético como
numérico.

Campo oculto: Inserta un campo que permite almacenar datos introducidos por el usuario como un nombre, una
dirección de correo electrónico o una preferencia de compra para utilizarlos la próxima vez que el usuario visite el sitio.
Área de texto: Al igual que el Campo de texto, inserta un cuadro de edición en el formulario, con la diferencia de que se
incluyen flechas que actúan como barra de desplazamiento vertical. Esta opción es más adecuada si su intención es
introducir largas cadenas de texto.

Casilla de verificación: Inserta una casilla de verificación en un formulario. Estas casillas admiten múltiples respuestas
en un solo grupo de opciones y permiten que los usuarios seleccionen tantas opciones como sean necesarias.

Botón de opción: Inserta un botón de opción en un formulario. Los botones de opción representan opciones exclusivas
de selección. Cuando se activa un botón en un grupo, se anula la selección de los demás botones del grupo.

Grupo de opción: Inserta varios botones de opción en un formulario.

Lista/menú: Permite crear opciones para el usuario en una lista de desplazamiento.

Menú de salto: Inserta una lista de navegación en la que cada opción estará vinculada a un documento o archivo.

Campo de imagen: Permite insertar una imagen en un formulario.

Campo de archivo: Inserta un cuadro de texto vacío y un botón Examinar que permitirá al usuario explorar los archivos
de su disco duro y cargarlos como datos de formulario.

Botón: Inserta un botón de texto en un formulario. Los botones actúan cuando se hace clic sobre ellos.

Etiqueta: Inserta el tag <label>

Juego de campos: Inserta un recuadro con titulo para crear una región delimitada de objetos de formulario dentro del
documento
Campos con validación: Permite la inserción de campos que poseen algún tipo de validación, como por ejemplo un
campo de texto para un e-mail que no puede dejarse vacío. Estas validaciones son configuradas al momento de
insertar el objeto, y son aditamentos javascript proporcionados por Dreamweaver. Es importante tener en cuenta que
para usar estos elementos es necesario guardar una serie de archivos adicionales que Dreamweaver creará y notificará
oportunamente, alertándole de la ubicación que deben tener los mismo en el árbol de directorios del sitio.

9.3 Insertar un formulario en Dreamweaver

Un formulario contiene propiedades invisibles para el usuario. Estas propiedades especifican cómo se procesará la
información que introduzcamos en él. Un formulario presenta tres partes básicas:
Etiquetas <form>, que incluyen el URL de la secuencia de comandos CGI que procesará el formulario y el método que
se utilizará para enviar los datos a un servidor.
Los campos de formulario, campos de texto, menús, casillas de verificación o botones de opción.
El botón Enviar, que manda los datos a la secuencia de comandos CGI del servidor.

9.4 Creación de campos de texto

Un campo de texto es un objeto de formulario que podremos crear con Dreamweaver para que los visitantes de nuestra
página escriban una respuesta. Existen tres tipos de campos de texto:
Campos de texto de una línea: Se utilizan para proporcionar respuestas compuestas por una sola palabra o una frase
corta como, por ejemplo, un nombre o una dirección.
Campos de contraseña: Son campos de texto en los que, cuando el usuario escribe, aparecen asteriscos quedando
oculto el texto.
Campos de texto de varias líneas: Ofrecen mayor espacio al visitante para escribir la respuesta. Podremos delimitar
fácilmente el número de caracteres o el número de líneas que puede introducir el visitante

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

9.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 del resto.

9.7 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

9.8 Creación de menús desplegables

Los menús emergentes se muestran como cuadros de texto de una única línea con un botón flecha en su parte
derecha; cuando pulsamos ese botón, las otras opciones aparecen en forma de lista o menú. Al seleccionar una de las
opciones, la lista se cerrará y el valor seleccionado será el que se muestre en el cuadro de texto.

9.9 Creación de listas

Las listas desplazables nos permitirán configurar varias opciones en un espacio limitado. A diferencia de los menús
deplegables, estas listas presentan dos flechas: una apuntando hacia arriba y otra hacia abajo. Podremos controlar la
altura permitiéndonos mostrar una o más opciones simultáneamente; y nos permitirán seleccionar más de una opción a
la vez.

9.10 Creación de botones para activar el formulario

Los botones son esenciales para los formularios ya que nos permitirán controlar las operaciones que éstos realicen.
Podremos utilizarlos para enviar al servidor los datos introducidos por el usuario o para restablecer un formulario de
forma que los usuarios puedan corregir la información antes de enviarla.

9.11 Insertar campo de archivo

Los campos de archivo son los elementos menos utilizados en los formularios. Su función principal consiste en permitir
que cualquier archivo sea adjuntado al formulario y enviado a un servidor con el resto de datos.

10.1 Vídeo real: Almacenamiento de elementos en Dreamweaver

Las bibliotecas nos dividen un medio de almacenaje para todos aquellos elementos de una página: imágenes, textos y
otros objetos, que solemos reutilizar o actualizar con frecuencia en un sitio web.
Cuando colocamos en un documento un elemento almacenado en la biblioteca de Dreamweaver en realidad estamos
insertando una copia del código HTML de ese elemento en el documento y además añadir un comentario que hace
referencia al elemento original. Dreamweaver almacena los elementos de biblioteca en una carpeta llamada “libreria”
dentro de la carpeta raíz local del sitio donde estemos trabajando cada sitio tendrá su propia biblioteca.

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

Imagen del elemento seleccionado

Elementos en la Biblioteca

10.3 Visualizar los elementos de un documento

En la siguiente explicación, veremos cómo a medida que trabajamos con un documento se van creando los elementos
de su biblioteca partiendo de cualquier componente que tengamos, ya sea un texto, una tabla, un formulario, applets de
Java, plug-ins, elementos Actives, barras de navegación e imágenes.

10.4 Insertar un elemento de biblioteca

En la siguiente explicación, veremos lo fácil que resulta añadir un elemento de biblioteca en la ventana de documento
de Dreamweaver. Al colocar un elemento en una página Web, se inserta una copia en el documento y, además, se
añade en el código HTML un comentario que hace referencia al elemento original.

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

11.1 Creación de plantillas con Dreamweaver

A lo largo de la siguiente explicación, veremos las dos formas que nos ofrece Dreamweaver para crear plantillas.
Podremos crearlas a partir de un documento HTML existente, que después modificaremos para que se ajuste a
nuestras necesidades, o bien, podremos crear una plantilla partiendo de un documento HTML en blanco.
Las plantillas se guardan con la extensión .dwt en la carpeta TEMPLATES de nuestro sitio Web. Si no existiera esa
carpeta, Dreamweaver la crearía de forma automática

11.2 Configurar las propiedades de una plantilla

Los documentos creados a partir de una plantilla heredarán las propiedades de ésta, exceptuando el título de la página.
En un documento basado en una plantilla, podremos cambiar el título del documento, pero se ignorarán los cambios
que se realicen en las demás propiedades de página. Si se aplica una plantilla a un documento y luego es necesario
cambiar las propiedades de la página del mismo, deberemos modificar las propiedades de la plantilla y luego actualizar
las páginas que utilizan dicha plantilla.

11.3 Definición de regiones editables en una plantilla

En una plantilla, las regiones editables son las partes de la página que se pueden cambiar en los archivos basados en
esa plantilla. Las regiones bloqueadas (no editables) son las partes del diseño de la página que permanecerán
constantes de una página a otra.
Al crear una plantilla nueva, todas sus regiones aparecen bloqueadas; por ello, para que una plantilla sea realmente
útil, es preciso hacer editables algunas regiones de la misma.

11.4 Bloquear una región editable

Si hemos definido una región editable dentro de una plantilla y después deseamos bloquearla de nuevo, Dreamweaver
nos proporciona el comando Quitar formato de plantilla para facilitarnos esta operación.

Nota: No podremos bloquear una región editable en un documento basado en una plantilla; solamente
podremos bloquear una región en una plantilla.

11.5 Creación de documentos basados en plantillas

Para finalizar este capítulo, vamos a aprender a usar una plantilla como punto de partida para la creación de un nuevo
documento, o a aplicarla a un documento existente.

12.1 Vídeo en la red

A cualquier persona que no esté un poco familiarizada con los PC e Internet, le resultará difícil entender que con la
tecnología que se ha desarrollado para la Web, no pueda incorporarse algo tan elemental como un vídeo. Las
complicaciones se deben fundamentalmente a que la conversión digital de cualquier archivo de vídeo analógico supone
un volumen de datos enorme.
Para solucionar este problema, se han desarrollado varias estrategias que nos permitirán la creación, almacenamiento
y reproducción de vídeos digitales. Estas estrategias consisten en la utilización de diferentes formatos de archivos, lo
cual implica que el usuario debe de disponer de un sistema de reproducción adecuado al tipo de archivo que desee ver.
A continuación, pasaremos a explicar brevemente los distintos formatos de vídeo más utilizados en la red:
MPEG: Desarrollado por Motion Picture Experts Group, este formato es a las imágenes en movimiento, lo que el
formato JPEG a las imágenes fijas. Las extensiones utilizadas para este tipo de archivos son .mpg y .mpeg.
QuickTime: Desarrollado originalmente por Apple como una solución multiplataforma, es uno de los más populares en la
red. Además del QuickTime normal, Apple ha desarrollado el QuickTime VR, que proporciona una visión panorámica
interactiva. Las extensiones utilizadas para este tipo de archivos son .qt y .mov.
RealVideo: Desarrollado por RealNetworks, permite la reproducción continua tanto de audio como de vídeo. Las
extensiones utilizadas para este tipo de archivos son .ra, .rpm y .ram.
Video for Windows: Desarrollado por Microsoft para ser utilizado con los reproductores instalados en los sistemas
operativos Windows, tiene la finalidad de reproducir cualquier archivo .avi.

12.2 Vincular vídeos en Dreamweaver

Una vez que tenemos digitalizado el vídeo, la forma más sencilla de que esté disponible en nuestra Web es tratarlo
como un enlace cualquiera. De este modo, cuando alguien seleccione el enlace, podrá descargar el vídeo en su PC.

12.3 Reproducción de vídeos on-line

El navegador Internet Explorer de Microsoft soporta el atributo dynsrc que es capaz de reproducir un vídeo on-line. Los
vídeos se verán dentro de la misma página Web junto con el resto de elementos del documento como texto e
imágenes. El atributo se insertará en la etiqueta <IMG> de la siguiente manera
<img src=”images/foto.gif” dynsrc=”videos/movie.mpg”>
Con esta sintaxis, en un navegador que no soporte el atributo dynsrc, se representará la imagen referenciada, mientras
que, en el navegador Internet Explorer, se reproducirá automáticamente el vídeo.

12.4 Atributos de QuickTime

Para poder visualizar una película de QuickTime en una página Web, los visitantes necesitan tener instalado un plug-in
de QuickTime. Las instrucciones necesarias para insertar cualquier contenido que requiera un plug-in se almacenarán
en la etiqueta <EMBED>.

12.5 Insertar RealVideo en un documento HTML

El primer sistema de flujo de vídeo lo desarrolló RealNetworks. Esta empresa ofrece un reproductor multimedia gratuito
llamado RealPlayer para poder ver o escuchar el contenido de estos sistemas.
RealVideo utiliza su propio software de servidor (RealServer) para transmitir archivos de vídeo codificados. En vez de
llamar al archivo de vídeo directamente, RealVideo utiliza un sistema de meta archivos para enlazar con el servidor y el
archivo de vídeo. Un meta archivo no es más que un archivo de texto donde se especifica el URL que apunta al
servidor y al archivo de vídeo. A continuación, puede ver las distintas extensiones que utiliza este sistema:
.rm: Archivo de RealVideo.
.ra: Archivo de RealAudio.
.ram: Meta archivo que ejecuta una sesión independiente de RealPlayer.
.rpm: Meta archivo que carga el plug-in de RealPlayer.

13.1 Panel Comportamientos

Utilizando el panel Comportamientos de Dreamweaver, podremos añadir comportamientos a los elementos de una
página y modificar los parámetros adjuntados con anterioridad a las etiquetas.
La etiqueta seleccionada en la ventana de documento aparece en la Barra de título del panel Comportamientos. Los
comportamientos que se hayan añadido a un elemento de página aparecerán en la lista de comportamientos ordenados
alfabéticamente.
A continuación, pasaremos a describir los distintos eventos que pueden asociarse como acciones, utilizando el menú
emergente del panel Comportamientos.
onAbort Se genera cuando el visitante detiene el navegador antes de que se cargue
completamente una imagen.

onAfterUpdate Se genera cuando un elemento de datos vinculados de la página termina de

actualizar el origen de los datos.

onBeforeUpdate Se genera cuando un elemento de datos vinculados de la página ha cambiado y va

a actualizar el origen de los datos.

onBlur Se genera cuando un elemento especificado deja de ser el foco de interacción del
visitante.

onBounce Se genera cuando el contenido de un elemento de marquesina ha alcanzado el

límite de la misma.

onChange Se genera cuando el visitante cambia un valor de la página. Por ejemplo, cuando
elige un elemento de un menú o cambia el valor de un campo de texto.

onClick Se genera cuando el visitante hace clic en un elemento especificado, como un

vínculo, un botón o un mapa de imagen.

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

onError Se genera cuando se produce un error en el navegador al cargar una página o una
imagen.

onFinish Se genera cuando el contenido de un elemento de marquesina completa un bucle.

onFocus Se genera cuando el elemento especificado se convierte en el foco de interacción

del visitante.

onHelp Se genera cuando el visitante hace clic en el botón Ayuda o elige Ayuda del menú
de un navegador.

onKeyDown Se genera en el momento en que el visitante presiona cualquier tecla. No es

necesario que el visitante suelte la tecla para que se genere el evento.

onKeyPress Se genera cuando el visitante presiona y suelta cualquier tecla.

onKeyUp Se genera en el momento en que el visitante suelta una tecla después de pulsarla.

onLoad Se genera cuando termina de cargarse una imagen o una página.

onMouseDown Se genera cuando el visitante pulsa el botón del ratón. No es necesario que suelte
el botón del ratón para que se realice el evento.

onMouseMove Se genera cuando el visitante mueve el ratón sobre el elemento especificado.

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

onMouseOver Se genera cuando el ratón se mueve por primera vez para señalar el elemento
especificado.

onMouseUp Se genera cuando se suelta un botón del ratón que se encuentra presionado.

onMove Se genera cuando se mueve una ventana o un marco.

onReadyStateChange Se genera cuando cambia el estado del elemento especificado.

onReset Se genera cuando se restauran los valores predeterminados de un formulario.

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

un marco.

onRowEnter Se genera cuando ha cambiado el puntero de registro actual del origen de datos
vinculados.

onScroll Se genera cuando el visitante desplaza la página hacia arriba o hacia abajo
utilizando el scroll del documento.

onSelect Se genera cuando el visitante selecciona texto en un campo de texto.

onStart Se genera cuando el contenido de un elemento de marquesina inicia un bucle.

onSubmit Se genera cuando el visitante envía un formulario.

onUnload Se genera cuando el visitante abandona la página.

13.2 Añadir un comportamiento

En la siguiente explicación, veremos de forma detenida el procedimiento que tendremos que seguir para añadir un
comportamiento usando el panel visto en el apartado anterior. Como pudimos ver, dependiendo de la etiqueta, podemos
asignar un evento u otro.

13.3 Llamar JavaScript

La acción Llamar JavaScript nos permitirá usar el panel Comportamientos para ejecutar cualquier función personalizada
o línea de código JavaScript cuando se produzca un evento determinado.

13.4 Cambiar atributos

Con la acción Cambiar propiedad podremos cambiar dinámicamente las propiedades de las siguientes etiquetas:
<LAYER>
<DIV>
<SPAN>
<IMG>
<FORM>
<TEXTAREA>
<SELECT>
<CHECKBOX>
<RADIO>
<TEXT>
<PASSWORD>

13.5 Comprobar navegador

Cada vez es más probable encontrar sitios Web que están integrados para poder ser explorados sin problemas con
distintos navegadores. Con la acción Comprobar navegador, podremos redireccionar a los visitantes a distintas páginas,
dependiendo de las marcas y versiones de sus navegadores.
En general, la acción Comprobar navegador se asigna a la etiqueta <body> y utiliza el evento onLoad. Es importante
tener en cuenta que esta característica se utiliza con menos frecuencia, debido a que los navegadores están siendo
estandarizados, y nos será de utilidad en casos muy específicos.

13.6 Comprobar plug-in

Cuando alguna página de nuestro sitio Web requiere el uso de uno o más plug-ins, podemos utilizar la acción
Comprobar plug-in para detectar si un usuario tiene instalados los plug-ins necesarios para visualizar la totalidad del
contenido de nuestra página. Una vez realizada esta comprobación, podremos redirigir a los navegantes que tengan el
plug-in apropiado a un URL, y a aquellos que no lo tengan, a otra dirección distinta

13.7 Controlar Shockwave o Flash

A lo largo de la siguiente explicación, aprenderemos a utilizar la acción Controlar Shockwave o Flash, que nos permitirá
reproducir, detener, rebobinar o ir a un fotograma de una película de Shockwave o Flash que tengamos colocada dentro
de un documento HTML de Dreamweaver. Esta es otra característica que se encuentra en desuso.

13.8 Controlar sonido

La acción Controlar sonido la podremos utilizar para reproducir un archivo de sonido que vincularemos en un
documento HTML de Dreamweaver. Por ejemplo, podremos hacer que se reproduzca un efecto sonoro al pasar el
cursor del ratón sobre un vínculo, o que se reproduzca un archivo de sonido al cargarse una página. Al igual que las
anteriores características, lentamente se está prescindiendo de la misma.

13.9 Mensaje emergente

Utilice la acción Mensaje emergente para mostrar un mensaje de alerta de JavaScript con el texto que desee. Las
alertas de JavaScript sólo tienen un botón Aceptar y suelen utilizarse para proporcionar algún tipo de información al
visitante.

13.10 Arrastrar elemento PA

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:
Especificar la dirección en la que el visitante puede arrastrar la capa (horizontalmente, verticalmente o en cualquier
dirección).
Elegir el destino hasta el que el visitante puede desplazar la capa.
Determinar si la capa debe ajustarse al destino cuando aquélla se encuentre a un cierto número de píxeles del destino.
Proporcionar un método alternativo de recorte, dejando que sólo se pueda arrastrar una parte de la capa.
Permitir un orden distinto de almacenamiento de capas mientras se arrastran o al liberar el botón del ratón.
Programar un comando de JavaScript que se ejecute cuando se alcanza el área de destino o cada vez que se libere la
capa.

Nota: Para que sea posible ejecutar la acción Arrastrar capa, antes tendremos que insertar las capas
en la ventana de documento. Además, deberemos asociar la acción a la etiqueta <body>.

13.11 Ir a URL
Utilizando la acción Ir a URL, Dreamweaver nos permitirá abrir un documento HTML en la ventana actual o en un marco
que especifiquemos. Esta acción resulta de gran utilidad para cambiar el contenido de dos o más marcos con un solo
clic del ratón. También puede utilizarse para saltar a una nueva página después de un intervalo de tiempo especificado.

13.12 Abrir ventana del navegador

Con la acción Abrir ventana del navegador, podremos abrir un documento HTML en una nueva ventana. El cuadro de
diálogo que corresponde a esta acción, nos permitirá configurar las propiedades de la nueva ventana, incluidos su
tamaño, sus atributos principales y su nombre.

13.13 Carga previa de imágenes

Con la acción Carga previa de imágenes, podremos indicar las imágenes que deseamos cargar en la memoria caché
del navegador para su uso posterior. Esto contribuirá a evitar los retrasos debidos a la descarga cuando llegue el
momento en que tengan que aparecer dichas imágenes.

13.14 Establecer imagen de barra de navegación

Con la acción Establecer imagen de barra de navegación, podremos convertir una imagen colocada en la ventana de
documento de Dreamweaver en una imagen de Barra de navegación. Además, también nos permitirá modificar la
visualización y las acciones de imágenes de una Barra de navegación.

13.15 Mostrar-Ocultar elementos

La acción Mostrar-Ocultar elementos proporciona un fácil control sobre los atributos de visibilidad para todas las capas
de un documento HTML. Esta acción resulta de gran utilidad para mostrar información a medida que el usuario va
interactuando por una página Web.

13.16 Intercambiar imagen

La acción Intercambiar imagen nos permitirá sustituir una imagen por otra cambiando el atributo src de la etiqueta
<IMG>. Use esta opción para crear sustituciones de botones y otros efectos de imagen.

13.17 Validar formulario

La acción Validar formulario nos permitirá comprobar el contenido de los campos de texto especificados en un
formulario de Dreamweaver para asegurarnos de que el usuario ha introducido los datos correctamente.

14.1 Teclas de función de Dreamweaver

MENÚ ARCHIVO COMBINACIÓN DE TECLAS

Archivo > Nuevo CTRL+N

Archivo > Abrir CTRL+O

Archivo > Abrir en marco CTRL+MAYÚS+O

Archivo > Cerrar CTRL+W

Archivo > Cerrar todos CTRL+MAYÚS+W

Archivo > Guardar CTRL+S

Archivo > Guardar como CTRL+MAYÚS+S

Archivo > Imprimir código CTRL+P

Archivo > Vista previa en el navegador F12

Archivo > Comprobar página > Vínculos MAYÚS+F8

Archivo > Validar > Formato MAYÚS+F6

Archivo > Salir CTRL+Q

MENÚ EDICIÓN COMBINACIÓN DE TECLAS

Edición > Deshacer CTRL+Z

Edición > Rehacer CTRL+Y

Edición > Cortar CTRL+X

Edición > Copiar CTRL+C

Edición > Pegar CTRL+V

Edición > Pegado especial… CTRL+MAYÚS+V

Edición > Seleccionar todo CTRL+A

Edición > Seleccionar etiqueta padre CTRL+ñ

Edición > Buscar y reemplazar CTRL+F

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 > Aplicar sangría al código CTRL+MAYÚS+>

Edición > Anular sangría de código CTRL+,

Edición > Equilibrar llaves CTRL+’

Edición > Preferencias CTRL+U

MENÚ VER COMBINACIÓN DE TECLAS

Ver > Alternar vistas CTRL+¡

Ver > Actualizar vista de diseño F5

Ver > Contenido de Head CTRL+MAYÚS+H

Ver > Modo de tabla > Modo de tablas expandidas 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 > Plug-ins > Reproducir todo CTRL+ALT+MAYÚS+P

Ver > Plug-ins > Detener todo CTRL+ALT+MAYÚS+X

Ver > Ocultar paneles F4

MENÚ INSERTAR COMBINACIÓN DE TECLAS

Insertar > Etiqueta CTRL+E

Insertar > Imagen CTRL+ALT+I

Insertar > Media > SWF 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+INTRO
Insertar > Objetos de plantilla > Región editable CTRL+ALT+V

MENÚ MODIFICAR COMBINACIÓN DE TECLAS

Modificar > Propiedades de la página CTRL+J

Modificar > 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 > Reducir el tamaño de columna CTRL+MAYÚS+ñ

Modificar > Organizar > Alinear a la 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 MAYUS+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 > Fragmentos MAYÚS+F9

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 > Inspector de etiquetas F9

Ventana > Resultados > Buscar F7

Ventana > Historial MAYÚS+F10

Ventana > Marcos MAYÚS+F2

Ventana > Inspector de código F10

Ventana > Ocultar paneles F4

MENÚ AYUDA COMBINACIÓN DE TECLAS

Ayuda > Ayuda de Dreamweaver F1

Ayuda > Ayuda de ColdFusión CTRL+F1

Ayuda > Referencia MAYÚS+F1