Dreamweaver CS5

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

ADOBE DREAMWEAVER CS5
1
INDICE CONTENIDO TEMA 5. ADOBE DREAMWEAVER CS5
1. CONOCIENDO ADOBE DREAMWEAVER CS5
1.1 Introducción a adobe dreamweaver
1.2 Novedades de dreamweaver cs5
1.3 Requerimientos técnicos
1.4 Editar páginas web
1.5 Cómo tener una página en internet
1.6 Ejecución de adobe dreamweaver
1.7 Entorno de trabajo
1.8 El panel insertar
1.9 Ventana de documento
1.10 Barra de herramientas documento
1.11 Panel propiedades
1.12 Edición de métodos abreviados de teclado
1.13 Panel activo
1.14 Panel historial
1.15 Práctica - mi primera página
1.16 Práctica - diseño web parte i
2. CREACIÓN DE SITIOS Y PÁGINAS WEB
2.1 Planificación de un sitio web
2.2 Configurar un sitio web
2.3 Editar un sitio web existente
2.4 Sistema de protección
2.5 Panel archivos
2.6 Configurar las preferencias del panel archivos
2.7 Crear abrir y guardar documentos
2.8 Configurar las propiedades del documento
2.9 Guías visuales
2.10 Insertar palabras clave y descripciones
2.11 Previsualizar un documento
2.12 Práctica - diseño web parte ii
3. TRABAJO CON TEXTO
3.1 Creación y colocación de textos
3.2 Encabezados y párrafos
3.3 Asignar fuentes a un texto
3.4 Editar la lista de fuentes de dreamweaver
3.5 Cambiar el color del texto
3.6 Alineación del texto
3.7 Sangrías
3.8 Crear listas
3.9 Corrección ortográfica
3.10 Insertar fechas en un documento
3.11 Insertar caracteres especiales
3.12 Insertar reglas horizontales
3.13 Creación de estilos css
3.14 Buscar y reemplazar texto

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

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

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

5
1. CONOCIENDO ADOBE DREAMWEAVER CS5
Antes de comenzar a utilizar Dreamweaver y para sacar el máximo rendimiento al programa,
veremos una pequeña introducción que nos informará de los requisitos del sistema necesarios para
su instalación y correcto funcionamiento. Además, exploraremos la interfaz del programa,
aprenderemos a utilizar sus herramientas, y a definir las preferencias que mejor se adapten a nuestra
forma de trabajar.
1.1. Introducción a Adobe Dreamweaver CS5
Adobe Dreamweaver es un editor de código HTML profesional para el desarrollo de páginas Web.
Tanto si estamos habituados a trabajar directamente con el código HTML, como si prefiere un
entorno de edición visual fácil de manejar (como era en su día Microsoft FrontPage), Dreamweaver
es, realmente, la herramienta que nos permitirá trabajar del mismo modo que lo hacen los
diseñadores Web profesionales.
A lo largo de este curso, aprenderá a manejar y crear sitios Web, utilizando las características
novedosas que ofrece un programa amplio en opciones de diseño, que serán indispensables para los
diseñadores expertos y principiantes de Internet. Aprenderemos a crear tablas, editar marcos,
trabajar con capas, insertar comportamientos de JavaScript, etc.., de una forma muy sencilla y visual.
Dreamweaver nos permitirá crear sitios Web de una forma visual, utilizando la interfaz gráfica de
fácil manejo del programa, que además incluye un software de cliente FTP completo, que permite
entre otras cosas trabajar con mapas visuales de los sitios Web, actualizando el sitio en el servidor sin
salir del programa al mismo tiempo que vamos realizando los cambios.
1.2. Novedades de Dreamweaver CS5
Un punto fuerte de Dreamweaver es que va dirigida a gente sin conocimientos de programación y
que solo a través de sus herramientas, una persona sea capaz de crear sitios potentes, con muchos
efectos y funcionalidades, solo usando productos de Adobe. Entre nuevas funcionalidades cabe
destacar las nuevas sugerencias de código personalizada o la integración de CMS (Wordpress, Drupal,
Joomla...) en el programa, puedes visualizar y editar al mismo tiempo estos CMS sin necesidad de
instalar Apache.

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

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

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

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

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

11
El inspector de propiedades
Muestra las opciones propias del objeto o texto seleccionado, permitiéndonos editarlas, por lo que
se convierte en uno de los elementos más utilizados en Dreamweaver. Este panel puede mostrar dos
tipos de propiedades, HTML y CSS, que podemos aplicar a los diferentes elementos de la página Web
que estemos diseñando.
Ventana documento
Es el área principal de trabajo. Muestra el documento actual mientras lo está creando y editando.
1.8. El panel Insertar
El panel Insertar contiene los elementos más utilizados para el diseño de páginas Web. En ella,
seleccionaremos desde imágenes a plugins Actives e incluso comentarios HTML. Además,
personalizaremos este panel añadiendo nuestros propios elementos y organizándolos a nuestro
gusto.
Dentro de la Barra de herramientas Insertar, veremos ocho categorías de forma predeterminada:
Común, Diseño, Formularios, Datos, Spry, InContext Editing, Texto y Favoritos.
Como vemos en las imágenes, es posible configurar este panel para verlo como menú, como panel
flotante o como una barra de herramientas integrada en la ventana de trabajo.

12
Para volver a mostrar como opciones independientes cada categoría, presione sobre una de las
pestañas con el botón secundario del ratón y marque la orden Mostrar como menú.
Común
Al seleccionar esta categoría, tendrá acceso a las opciones y elementos HTML más utilizados como:
imágenes, tablas, capas, etc.
Diseño
En ella, verá opciones para insertar tablas, etiquetas, marcos o bien elegir entre las dos vistas de
tablas: Estándar o Ampliada.
Formularios
Ofrece comandos con los que crearemos formularios e insertaremos los elementos que los
componen.
Datos
Permite insertar objetos de datos de Spry y otros elementos dinámicos, como juegos de registros,
regiones repetidas y grabar formularios de inserción y actualización.

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

14
1.9. Ventana de documento
La ventana de documento nos presenta el documento actual con una apariencia muy aproximada a la
que mostrará en un explorador Web. Es el lugar donde creará sus páginas Web escribiendo
encabezados y párrafos, insertando imágenes y enlaces, creando tablas y demás elementos HTML. En
la parte superior de la ventana de documento verá una etiqueta que le muestra el nombre de la
página. Éste se acompañará de un asterisco (*) si el documento contiene cambios no guardados.
Dreamweaver le permite trabajar en su documento de diferentes formas, utilizando la vista Diseño,
la vista Código o empleando una vista combinada que enseñe el diseño y el código del documento
(Dividir). Puede cambiar de una vista a otra usando los comandos Código, Dividir y Diseño de la Barra
de herramientas Documento.
Si presta atención a la zona inferior de la ventana de documento verá sus dimensiones actuales (en
píxeles). Si hace clic en la flecha desplegable Tamaño de descarga, Dreamweaver mostrará otros
tamaños que le permitirán adaptar las dimensiones de la ventana a los tamaños de monitor
estándar. Este tamaño cambia si reduce manualmente el tamaño de la ventana del programa.
Enlace vídeo: Ventana de documento.
NOTA: El tamaño de la ventana indicado corresponde a las dimensiones internas de la ventana del
navegador sin bordes. El tamaño del monitor figura entre paréntesis. Tenga en cuenta que si la
ventana de documento está maximizada, no podrá modificar sus medidas.
Para disponer de otro tipo de tamaño o dimensionamiento de la ventana del documento pulse la
opción Editar tamaños e introduzca un nuevo tamaño, alto y ancho, y a continuación clic en aceptar
y aparecerá la nueva dimensión en la ventana del programa Tamaño ventana.

15
1.10. Barra de herramientas Documento
Esta Barra de herramientas contiene botones que nos permitirán alternar entre las diferentes vistas
del documento. Además, dicha Barra contiene algunos comandos comunes relacionados con la
selección de vistas y el estado del documento. A continuación, vamos a ver con más detenimiento las
posibilidades que nos ofrece:
 Mostrar vista de Código: Nos permite examinar o editar el código HTML en la ventana
de documento.
 Mostrar vistas de Código y Diseño: os muestra, en la ventana de documento una
combinación de la vista Código y la vista Diseño.
 Mostrar vista de Diseño: Es la vista en la que se muestra por defecto la ventana de
documento; nos muestra una representación visual del documento, en lugar del
código subyacente.
 Código en vivo: La Vista en vivo se diferencia de la vista de diseño tradicional de
Dreamweaver en que ofrece una representación no editable más realista de la
apariencia que tendrá la página en un navegador.
 Comprobar compatibilidad con navegador: Comprueba la compatibilidad con
diferentes navegadores.
 Vista previa/Depurar en navegador: Este menú emergente nos permitirá previsualizar
el documento actual en la ventana del navegador. Para agregar o cambiar los
navegadores enumerados en el menú, utilizaremos la opción Editar lista de
navegadores y actuaremos desde el cuadro de diálogo Preferencias.
 Ayudas visuales: Nos proponen ciertas opciones que nos ayudarán en el diseño de
nuestras páginas.
 Actualizar vista de diseño: Utilice este botón para actualizar la vista Diseño después
de realizar cualquier cambio en el código de nuestro documento.
 Título de documento: Nos permite introducir un título para el documento de una
forma rápida. Si el documento ya dispone de uno, aparecerá en este
campo.
 Administración de archivos: Abre el menú emergente con el mismo nombre, el cual
contiene la información del estado del documento en el que estamos
trabajando.

16
1.11. Panel Propiedades
El panel Propiedades de Adobe Dreamweaver es probablemente la herramienta usada con más
frecuencia en el programa. Esencialmente, este panel nos permitirá examinar y editar las
propiedades del elemento seleccionado en el documento actual, ya sea una tabla, una imagen o una
línea de texto.
La forma de acceder a estas opciones es presionando la orden Propiedades del menú Ventana o en
su defecto la combinación de teclas CTRL+F3.
El contenido del panel Propiedades varía de forma dinámica en función del elemento seleccionado.
Por ejemplo, si seleccionamos una línea de texto, podremos cambiar su fuente, color y tamaño;
cuando seleccionamos una tabla, podremos cambiar el número de columnas y filas, las dimensiones
relativas, grosor de bordes y color, y alineación del contenido en las celdas.
Podrá contraer el panel ocultando los atributos menos comunes de un objeto haciendo un doble clic
en cualquier área vacía del panel.

17
1.12. Edición de métodos abreviados de teclado
Los métodos abreviados de teclado son un rápido y fácil camino para acceder a las distintas
funciones de un programa.
La mayoría de los programas ofrecen al usuario unos métodos abreviados de teclado
predeterminados, pero Dreamweaver pone a nuestra disposición un editor que nos permitirá crear
nuestra propia configuración, editando los métodos abreviados existentes o utilizando otros
previamente predefinidos.
Para ello, vaya al menú principal a Edición y seguidamente pulse Métodos abreviados de teclado,
entrará en un cuadro de diálogo que permitirá añadir, redefinir y eliminar un método abreviado que
hayamos definidos.
Para añadir una nueva combinación de teclas, habrá que duplicar una existente del conjunto actual y
cambiarle el nombre. Seleccione el comando que desea se le aplique una teclas abreviadas y pulse el
botón de (+) para añadir nuevo método abreviado, seguidamente introduzca, por ejemplo, las teclas
combinadas Ctrol+8, y si no se encuentra repetida Dreamweaver la acepta y se queda activada para
ese conjunto actual creado. Para eliminar un método abreviado utilice el botón (-) sobre el método
de teclas seleccionado y se eliminará del conjunto actual.
Enlace vídeo: Añadir un método abreviado a un comando.
Enlace vídeo: Redefinir un método abreviado existente.
Enlace vídeo: Eliminar un método abreviado de un comando.

18
1.13. Panel Activos
El panel Activos es una de las herramientas de Adobe Dreamweaver a la que dedicaremos una
atención especial. Como los sitios Web han crecido en complejidad, manejar los activos puede
convertirse en una tarea muy difícil.
Algunos sitios Web pueden tener cientos de imágenes, archivos de audio y archivos multimedia. El
panel Activos nos permitirá administrar de forma fácil y rápida todos los activos de nuestro sitio
Web. Podremos controlar todos los colores, imágenes, URL externos y secuencias de comandos, así
como elementos Flash, Shockwave, QuickTime, plantillas y bibliotecas desde un lugar central.
Este panel ofrece dos formas de ver los activos; la opción Sitio, que muestra todos los activos del sitio
(que reconoce el panel), y la opción Favoritos, que sólo muestra los activos seleccionados de manera
explícita.
Para mostrar el panel Activos, despliegue el menú Ventana y seguidamente, presione la
orden Activos.
Observe en él que podemos trabajar con las siguientes categorías:
 Imágenes: Son archivos de imagen en formato .gif, .jpeg o .png.
 Colores: Son los colores utilizados en documentos y hojas de estilos del sitio, incluidos los
colores del texto, el fondo y los vínculos.
 URL: Muestra los URL externos a los que están vinculados los documentos del sitio. Esta
categoría incluye los siguientes tipos de vínculos: FTP, gopher, HTTP, HTTPS, JavaScript,
correo electrónico (mailto) y archivo local (file://).
 Flash: Son archivos de cualquier versión del formato Flash de Macromedia. El panel
Activos muestra los archivos “.swf” (Flash comprimidos), pero no los “.fla” (Flash de
origen).
 Shockwave: Son archivos de cualquier versión del formato Shockwave de Adobe.
 Películas: Son archivos de películas en el formato QuickTime o MPEG.

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

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

21
1.14. Panel Historial
El panel Historial nos muestra una lista con todos los pasos que hemos realizado en el documento
activo de Dreamweaver desde que éste se creó o abrió. Este panel resultará muy útil para deshacer
uno o varios pasos o para repetirlos, así como, para crear nuevos comandos que automaticen tareas
que se repiten.
Enlace vídeo: Utilizar el panel Historial.
Acceda al menú principal Ventana y pulse Historial o Mayus+F10 y nos muestra una ventana con
todos los pasos guardados que hemos dado durante el diseño de la página.
Enlace vídeo: Configurar el panel Historial.

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

23
2. CREACIÓN DE SITIOS Y PÁGINAS WEB
Adobe Dreamweaver es una herramienta de creación y administración de sitios, por lo que puede
utilizarla para crear sitios Web completos, además de documentos individuales. Para obtener
resultados óptimos, necesitaremos diseñar y planificar el sitio Web antes de crear las páginas que va
a contener. A lo largo del próximo tema, aprenderemos a organizar los archivos de los sitios local y
remoto.
Luego, una vez creado el sitio local, colocaremos en él los documentos nuevos que realicemos. Para
finalizar, configuraremos las propiedades de los documentos de Dreamweaver y los
previsualizaremos en un navegador.
Para que te vayas haciendo una idea de cómo funciona Dreamweaver, vamos a crear una página web
sencilla, con varios estilos de texto, una imagen y un enlace a otra página. Crear esta página solo te
llevará unos pocos minutos, y sabrás cómo trabajar con los elementos básicos con los que están
hechas la mayoría de las páginas web. Si nunca has hecho una página web, este es el momento para
descubrir lo fácil que es.
2.1. Planificación de un sitio Web
Antes de comenzar a realizar ningún tipo de desarrollo, es necesario hacer una planificación de
nuestro sitio. Dicha planificación, no sólo reducirá considerablemente el tiempo empleado en la
creación, sino que nos ayudará a que todas las páginas presenten un aspecto uniforme, además de
hacer más sencillo su uso. La forma más cómoda de trabajar, cuando la labor que desarrollamos se
vaya a publicar en un servidor FTP en Internet, es crear una carpeta local de almacenamiento en la
cual situaremos todo nuestro trabajo. De esta forma, podremos comprobarlo todo antes de subirlo al
servidor, minimizando así la aparición de posibles errores en el sitio Web una vez abierto al público.
Existen diferentes métodos básicos de distribución de las páginas con los que cualquier diseñador
deberá estar familiarizado, pues cada uno sirve para un propósito diferente, permitiéndonos incluso
su combinación:
Estructura lineal
Antes del nacimiento de la World Wide Web, la mayoría de los formatos visuales eran lineales, es
decir, una página seguía a otra a lo largo de una secuencia inalterable. Este modelo, hoy en día,
todavía es muy usado para crear aplicaciones de enseñanza, donde podremos controlar el orden de
visualización de los temas, mostrando una página tras otra como si de un libro multimedia se tratase.

24
Estructura jerárquica
En este modelo, tomamos como punto de partida una página de inicio, desde la cual podremos
acceder al resto de páginas del sitio. Los sitios con estructura jerárquica ayudan a proporcionar un
mejor sentido sobre la orientación de nuestro sitio Web.
Estructura centralizada
Este tipo de navegación está basado en una página central de inicio a la que le vincularemos el resto
de páginas principales del sitio. El principal inconveniente de este modelo es tener que pasar
constantemente por la página principal para ir a otra zona.
Estructura libre
Esta última estructura nos permite aprovechar al máximo la funcionalidad de los hipervínculos,
permitiéndonos que prácticamente cualquier página pueda conectarse a cualquier otra de nuestro
sitio. Como principal inconveniente del uso de este método es la pérdida del internauta durante la
navegación.

25
2.2. Configurar un sitio Web
Una vez establecida la planificación del sitio, decidido el diseño y su estructura, estamos preparados
para configurar uno nuevo usando Dreamweaver. Aunque siempre es posible definir la ubicación, lo
más adecuado es configurar el sitio local en Dreamweaver antes de comenzar a crear las distintas
páginas que compongan el proyecto.
A lo largo de la siguiente explicación, aprenderemos a establecer este sitio local en Dreamweaver, lo
que significa que podremos utilizar Dreamweaver con FTP para gestionar meticulosamente, tanto su
copia local (PC) como la remota (Servidor), reduciendo al máximo su mantenimiento.
Para configurar un sitio web lo primero que debemos hacer en Dreamweaver es crear nuestro sitio,
para ello, seleccionamos en el menú principal la opción Sitio y pulsamos Nuevo Sitio. Con esta
opción nos aparece un cuadro de diálogo para introducir la información correspondiente al nombre
del sitio y la carpeta donde se ubica los archivos y carpetas de nuestra página web.
Si pulsamos en la configuración avanzada que se encuentra en la barra de opciones de la izquierda,
nos permite introducir la carpeta predeterminada de imágenes, archivos de consulta de medios para
todo el sitio y la URL o dirección de la web donde está ubicada nuestra página. En este caso se puede
omitir. Recomendable que este la opción de Caché activada para agilizar el proceso de trabajo de la
página web.
Enlace vídeo: Configurar un sitio Web.

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

27
2.4. Sistema de protección
Dreamweaver nos permite activar un sistema de protección de páginas que resulta de gran utilidad
cuando un equipo de diseñadores y programadores se encargan de desarrollar y mantener un sitio
Web. De esta manera, si por ejemplo, uno de los diseñadores está realizando alguna modificación,
Dreamweaver insertará, en el panel Archivos, una marca junto al archivo que estuviera editándose,
para que el resto de diseñadores se den cuenta de que ese fichero se está modificando.
1. Despliegue el menú Sitio y seleccione la opción Administrar sitios.
2. Seleccione un sitio existente en la lista del cuadro con el mismo nombre y haga clic en
el botón Editar. Se abre el cuadro de diálogo Configuración del sitio.
3. Seleccione la categoría Servidores en el cuadro de diálogo.
4. Seleccione un servidor existente y haga clic en el botón Editar servidor existente.
5. Haga clic en el botón Avanzadas en la parte superior.
6. Active la casilla Activar protección del sitio. Al activar esta opción, de forma
automática, aparece la casilla Proteger archivos al abrir activada justo debajo.
7. Introduzca un nombre de protección en el campo de edición correspondiente.
8. A continuación, introduzca una dirección de correo electrónico.
9. Para finalizar, pulse el botón Aceptar.
2.5. Panel Archivos
El panel Archivos es el lugar donde podremos realizar el mantenimiento de nuestro sitio Web. A
través de sus opciones, podremos crear nuevos documentos HTML, abrir y mover archivos, crear
carpetas, y borrar elementos. También podremos utilizarlo para transferir archivos de la carpeta en
desarrollo, de su disco duro a su servidor Web.
El panel Archivos presenta una Barra de herramientas que podremos utilizar para establecer qué
debe mostrarse en dicha ventana y para transferir archivos entre los sitios local y remoto.

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

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

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

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

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

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

34
2.9. Guías visuales
Dreamweaver nos proporciona varios tipos de guías visuales que nos ayudarán a la hora de diseñar y
previsualizar cuál será la apariencia de nuestro diseño en un navegador. Aprenderemos a activar la
visualización de las reglas y a utilizar la cuadrícula para lograr una mayor precisión en la colocación y
ajuste del tamaño de las capas.
Configuración de Regla
Para visualizar la regla seleccionamos en el menú principal Ver y pulsamos Reglas, en el siguiente
submenú seleccionamos Mostrar. Aparece la regla vertical y horizontal en la venta de trabajo de
Dreamweaver.
Siga los mismos pasos para Restablecer Origen y volver a la posición inicial o si desea cambiar la
unidad de medida en pixel, pulgadas o centímetros.
Enlace vídeo: Configuración de reglas.
Configuración cuadricula
Para configura la cuadricula nos vamos hacia el menú Ver y pulsamos Cuadricula donde aparece un
submenú con tres opciones:
 Mostrar cuadricula
 Ajustar a cuadricula
 Configuración de cuadricula…
Si pulsamos Mostrar cuadricula aparece en la ventana de la página con el fondo cuadriculado, para
cambiar y dimensionar los cuadrados se utiliza la opción Configuración de la cuadricula que nos
permite cambiar el color, espaciado, mostrar el trazado como líneas o puntos.
Enlace vídeo: Configuración de cuadrícula.

35
2.10. Insertar palabras clave y descripciones
Si desea dar a conocer una página Web, podremos usar una serie de elementos encargados de
contener la información necesaria para que los motores de búsqueda puedan dar a conocer el
contenido y tipo de la página Web. En Dreamweaver, estos elementos están representados por los
objetos Palabras clave y Descripción.
Palabras clave
1. En el menú Insertar, seleccione la opción HTML. Seguidamente, colóquese sobre la opción
Etiquetas Head y, en el submenú que aparece, seleccione la opción Palabras clave. Se abre el
cuadro de diálogo con el mismo nombre.
2. Introduzca las palabras clave, separadas por comas, en el cuadro de edición Palabras
clave.
NOTA: Dado que algunos motores de búsqueda limitan el número de palabras clave o caracteres
que indexan, o bien prescinden de todas las palabras clave si se supera el límite, conviene utilizar
sólo unas pocas palabras clave bien elegidas.
Descripción
1. En el menú Insertar, seleccione la opción HTML. Seguidamente, colóquese sobre la
opción Etiquetas Head y en el submenú que aparece seleccione Descripción. Se abre el
cuadro de diálogo con el mismo nombre.
2. Introduzca el texto descriptivo sobre la Web en el cuadro de edición Descripción.
NOTA: Al igual que ocurría con las palabras clave, algunos motores de búsqueda limitan el número
de caracteres que indexan, por lo que conviene restringir la descripción al menor número de palabras
posible.

36
2.11. Previsualizar un documento
A la hora de usar un programa como Dreamweaver, o cualquier otro programa de creación de
páginas Web, es importante el poder previsualizar el resultado de nuestro trabajo con cierta
frecuencia en uno o varios exploradores. A pesar de que en la ventana de trabajo del programa, se
tiene una visión muy similar a la de un explorador, debido al gran número de navegadores existentes
y a sus diferencias, se hace necesario poder visualizar nuestra página en ellos.
1. En el menú Archivo, seleccione la opción Vista previa en el navegador y en el submenú
que aparece, seleccione Editar lista de navegadores. Se abre el cuadro de
diálogo Preferencias con la categoría Vista previa en el navegador seleccionado.
2. Para añadir un nuevo navegador a la lista predeterminada, en el área Navegadores pulse
el botón con forma de signo más (+). Se abre el cuadro de diálogo Añadir navegador.
3. En el campo de edición Nombre, escriba el nombre con el que aparecerá el explorador en
la lista.
4. En el área Aplicación, utilice el botón Examinar para localizar la ruta de acceso al
ejecutable del navegador que desea configurar. Si lo desea, puede introducir
directamente la ruta utilizando el campo de edición.
5. Active, si lo desea, una de las casillas correspondientes al tipo de navegador Navegador
principal o Navegador secundario.
6. Haga clic en Aceptar para añadir así el navegador configurado a la lista.
7. Una vez añadido un navegador a la lista, podrá editarlo o borrarlo con gran facilidad. Para
editarlo lo seleccionamos en la lista y pulsamos el botón Editar. Para borrarlo,
selecciónelo en la lista y pulse el botón con forma de signo menos (-).
8. Haga clic sobre el botón Aceptar cuando haya terminado de realizar las modificaciones
que crea oportunas.
NOTA: Una vez haya añadido uno o varios navegadores a la lista, podrá previsualizar las páginas Web
en dichos navegadores. Para ello, selecciónelo de la lista que aparece al escoger la opción Vista
previa en el navegador del menú Archivo.

37
2.12. Práctica: Diseño Web parte II
Una vez configuradas las preferencias de Dreamweaver que vimos en el ejercicio anterior, llega el
momento de configurar la estructura del sitio que vamos a crear. Un sitio es un lugar de
almacenamiento para todos los documentos y archivos necesarios para crear una página Web. Al
definir el sitio local, lo que haremos será establecer el lugar en el que pensamos almacenar todos los
archivos del sitio dentro del disco duro de nuestro PC. Es recomendable crear un sitio local por cada
sitio Web que creemos.
Recuerda…
El cuadro de diálogo Propiedades de la página del menú Modificar nos permitirá configurar una
imagen como fondo.
Deberemos marcar la opción Permitir desproteger y proteger activo para activar el sistema de
protección de páginas de Dreamweaver.
Las siglas FTP significa Protocolo de Transferencia de Archivos.
Cuando aparece un pequeños asterisco (*) junto al nombre de la página en la Barra del título
significa que el documento contiene cambios que no han sido guardados.
Si activamos la categoría Datos locales del cuadro de diálogo Definición del sitio se activa la Caché
mejoraremos la velocidad de las tareas de administración de vínculos y sitios.
Los métodos básicos de distribución de las páginas son:
-Estructura Libre
-Estructura centralizada
-Estructura jerárquica
Para previsualizar un documento HTML en el navegador que tenemos configurado como
predeterminado pulsamos la opción Vista previa en el navegador del menú Archivo.
El tiempo máximo que debe estar desactiva la conexión con el servidor para que Dreamweaver lo
desconecte es de 30 minutos.

38
3. TRABAJO CON TEXTO
A pesar del hecho incuestionable de que hoy en día Internet se ha convertido en un medio visual, la
mayoría de la información que nos ofrece es aún textual. En este capítulo, vamos a aprender la forma
más rápida de añadir y editar texto con Dreamweaver. También, a organizar los bloques de texto en
nuestra página, así como, a crear estilos tanto HTML como CSS para aplicar un formato de texto.
3.1. Creación y colocación de textos
Crear y colocar textos en un documento de Dreamweaver es un acto muy sencillo, consiste en ubicar
el cursor sobre la ventana de documento e introducir el texto por medio del teclado, o bien, copiar el
texto desde otra aplicación y pegarlo en el documento de Dreamweaver.
Al colocar el texto en la ventana de documento, por defecto, éste adopta el formato establecido en
la aplicación. Dreamweaver nos proporcionará una gran variedad de herramientas para modificar
dicho formato, permitiéndonos cambiar el tamaño, fuente y color adaptándolo al diseño de nuestra
página.
3.2. Encabezados y párrafos
Todo texto HTML está compuesto principalmente por encabezados y párrafos. Del mismo modo en
que se muestran en un periódico los titulares para anunciar una historia o los subtítulos para
resumirla, los encabezados en Dreamweaver serán utilizados para separar las distintas secciones
principales de un documento HTML. Dreamweaver nos presenta seis niveles de encabezados cuya
etiqueta en HTML es, donde n es un número del 1 al 6. El encabezado de mayor tamaño es <h1> y el
de menor <h6>.
Los encabezados HTML, a diferencia de cualquier procesador de textos, no están vinculados a ningún
tamaño específico en puntos, tienen un tamaño determinado y proporcional dependiendo en última
instancia del explorador que estemos usando.
La mayor parte de páginas Web están compuestas generalmente por párrafos. Éstos, en HTML, se
distinguen por el uso de la etiqueta <p>. En Dreamweaver se inicia uno nuevo cada vez que se pulsa
la tecla INTRO en la ventana de documento.

39
Aplicar una etiqueta de encabezado o párrafo a un texto
1. Sitúe el puntero del ratón en el párrafo o seleccione (resaltando) la parte del
texto que desee modificar.
2. En el menú Formato, seleccione la opción Formato de párrafo y en el
submenú que aparece, elija una opción.
3. Escoja uno de los seis niveles de encabezados que Dreamweaver le proporciona.
Recuerde que el encabezado de mayor tamaño en HTML se etiqueta como <h1> y el
de menor tamaño como <h6>.
4. Elija Párrafo para aplicar este formato a un bloque de texto. Recuerde que en HTML
se etiqueta como <p>.
5. Seleccione Ninguno para quitar un formato de párrafo.
NOTA: También podrá aplicar etiquetas de párrafo o encabezado a un texto utilizando el cuadro de
lista Formato del panel Propiedades.

40
3.3. Asignar fuentes a un texto
Un diseñador gráfico, normalmente, puede utilizar tantas fuentes como tenga configuradas en su
sistema. Los diseñadores de páginas Web, por el contrario, se encuentran con la limitación de que los
navegadores sólo pueden mostrar fuentes que estén instaladas en el sistema del usuario, de no ser
así, el navegador la reemplazará por una fuente que sí esté instalada.
En todas las partes del mundo, cada ordenador personal que fue fabricado en los últimos años
incluye lo que se denomina Fuentes del sistema. Éstas son: Times New Roman, Courier New y Arial
(para PC), y Times New Roman, Courier New y Helvetica (para MAC). Con el uso de estas fuentes, no
tendremos.
NOTA: También es posible cambiar la fuente de texto usando la opción Fuente del menú Formato y
seleccionando la serie de fuentes que desee en el menú desplegable que aparece.
Primeramente seleccionamos el texto que deseamos modificar, de nuestra página web. Abrimos el
Panel de Propiedades y pulsamos CSS para mostrar los diferentes formatos de textos para aplicar:
Fuentes, Tamaños, Negrita, Cursiva, alineaciones, etc.
Seleccionamos la Fuente que mejor nos convenga aplicar en nuestro documento y seguidamente se
cambiará la fuente del texto.
Enlace vídeo: Asignar fuentes a un texto.

41
3.4. Editar la lista de fuentes de Dreamweaver
A continuación, veremos los pasos que debemos seguir para editar la lista de fuentes de las que
dispone Dreamweaver.
Primeramente nos vamos al menú Formato y pulsamos Fuente nos aparecerá un submenú y de ello
seleccionamos Editar lista de fuentes. Seguidamente nos aparece una ventana de cuadro de diálogo
para añadir o quitar los formatos de fuentes que viene predeterminado por Dreamweaver.
Con el botón de signo (+) se va añadiendo a la lista de fuentes las Fuentes elegidas provenientes de
las Fuentes disponibles. Con el botón (-) se elimina la fuente seleccionada de las lista de fuentes.
Enlace vídeo: Editar la lista de fuentes de Dreamweaver.
3.5. Cambiar el color del texto
El color de texto de un documento, por defecto, será el predeterminado por el navegador del
usuario, normalmente el negro. Sin embargo, con Dreamweaver podremos cambiarlo de modo que
el nuevo color prevalezca sobre el establecido en el cuadro de diálogo Propiedades de la página.
Los colores se expresan en HTML como valores hexadecimales o usando sus nombres. El valor
hexadecimal se basa en el valor de la mezcla de los colores rojo, verde y azul y se representa por el
símbolo almohadilla (#) seguido de 6 caracteres. Así por ejemplo, #FFFFFF es el valor hexadecimal
correspondiente al color blanco.
Cambiar el color de un rango de texto en Dreamweaver:
1. Seleccione el texto al que desee modificar el color o sitúe el cursor donde quiera que
comience a aplicarse el cambio.
2. En el panel Propiedades realice una de las siguientes acciones:
 Escriba el valor hexadecimal en el cuadro de edición Color del
texto.
 Escriba un nombre de color (en inglés) en el cuadro de edición Color del
texto.

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

43
3.6. Alineación del texto
Dreamweaver es un programa que nos permite alinear fácilmente el texto. HTML soporta la
alineación del texto respecto al margen izquierdo, derecho, justificado y al centro de la ventana del
navegador.
Alinear un párrafo de texto en Dreamweaver
1. Coloque el cursor del ratón en el párrafo que desee alinear.
2. Diríjase al panel Propiedades.
3. Ahora haga clic con el ratón en uno de los cuatro botones de alineación: Alinear a la
izquierda, Alinear al centro, Alinear a la derecha y Justificar.
4. Compruebe los resultados con cada uno de ellos.
NOTA: También es posible alinear un párrafo de texto usando el comando Alinear del menú
Formato, y seleccionando la opción que desee en el menú desplegable que aparece. Los cambios
ofrecidos por la orden Justificar sólo serán apreciables en los párrafos.

44
3.7. Sangrías
En el lenguaje HTML, debemos insertar la etiqueta <blockquote> cuando queramos aplicar un
sangrado a un párrafo. Dreamweaver inserta, de forma automática, esta etiqueta al hacer clic sobre
el icono Blockquote del panel Propiedades.
Sangrar un párrafo
1. Coloque el cursor de texto en el párrafo que desee sangrar.
2. Haga clic en el botón Blockquote del panel Propiedades.
3. Si observamos el código de la página, podemos observar que se aplica la etiqueta
<blockquote>.
4. Para quitar un sangrado de texto, haga clic en el botón Quitar Blockquote de texto
del panel Propiedades. La etiqueta <blockquote> desaparece.
NOTA: También es posible utilizar las opciones Sangría y Anular sangría del menú Formato para
aplicar sangrías a los párrafos.
3.8. Crear listas
Con Dreamweaver, creamos fácilmente listas numeradas, listas con viñetas y listas de definición a
partir de texto existente o de texto nuevo que escriba en la ventana de documento. Las listas de
definición no emplean caracteres iniciales como puntos, guiones o números y suelen utilizarse en
glosarios o descripciones.

45
Crear una lista de texto ordenada
1. Coloque el cursor de texto donde desee comenzar la lista ordenada.
2. Si el panel Propiedades no se encontrara abierto, diríjase al menú Ventana y escoja la opción
Propiedades.
3. Haga clic en el botón Lista ordenada del panel. Observe que, se muestra un número 1. en el
sitio donde colocamos el cursor.
4. Escriba el primer elemento de nuestra lista.
5. Pulse INTRO. Ahora, el siguiente número de la lista se sitúa en la siguiente línea junto al
número 2.
6. Repita los pasos anteriores para completar la lista.
7. Para finalizar la lista, pulse la tecla INTRO dos veces.
NOTA: Insertar una lista ordenada desde el menú Formato es muy fácil. Para ello, usaremos el
comando Lista del menú Formato y seleccionaremos Lista ordenada en el menú desplegable que
aparece.
Crear una lista de texto sin ordenar
 Coloque el cursor de texto donde desee comenzar la lista ordenada.
 Haga clic en el botón Lista sin ordenar del panel Propiedades. Observe que aparece un
marcador en el sitio donde colocamos el cursor.
 Escriba el primer elemento de nuestra lista.
 Pulse INTRO. Se muestra otro marcador en la siguiente línea.
 Repita los pasos anteriores para completar la lista.
 Para finalizar la lista, pulse la tecla INTRO dos veces.
NOTA: Insertar una lista con marcadores desde el menú Formato es muy fácil. Para ello, usaremos el
comando Lista del menú Formato y seleccionaremos Lista sin ordenar en el menú desplegable que
aparece.
3.9. Corrección ortográfica
Cometer errores ortográficos en el texto de nuestra página Web puede dar una mala impresión a los
visitantes. Dreamweaver, al igual que cualquier procesador de texto, incluye un corrector ortográfico
fácil de manejar, y que nos ahorrará esos desagradables momentos. Es una buena costumbre realizar
una comprobación ortográfica de nuestra página Web antes de publicarla.
La corrección que realiza Dreamweaver no tiene en cuenta las etiquetas HTML ni los valores de
atributo, sólo corrige el texto escrito en la ventana del documento abierto. Dreamweaver comprueba
el texto de la página Web usando dos diccionarios diferentes: uno estándar para el idioma
seleccionado y otro personalizado, al que podremos ir añadiendo las palabras que creamos
oportunas.

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

47
NOTA: Si no comenzó una corrección ortográfica desde el principio del documento, al llegar al final,
Dreamweaver le preguntará si desea continuar comprobando el resto del documento no corregido.
3.10. Insertar fechas en un documento de Dreamweaver
Dreamweaver nos proporciona un objeto Fecha que permite insertar la fecha actual con el formato
que prefiera (con o sin la hora) y ofrece la posibilidad de actualizarla cada vez que guarde el archivo.
Para introducir la fecha actual en un documento HTML se procede de la siguiente forma:
1. Coloque el cursor en el lugar donde se desea incluir la fecha.
2. Vaya al menú Insertar y pulse Fecha.
3. Seguidamente nos aparece un cuadro de diálogo para cumplimentar el formato de la fecha:
a. Formato de día.
b. Formato de fecha.
c. Formato de hora.
4. Una vez que hayamos dados los parámetros que nos interesa a la fecha pulsamos el botón
Aceptar y nos aparece en el lugar elegido del documento la fecha.
Enlace vídeo: Insertar la fecha actual en un documento.

48
3.11. Insertar caracteres especiales
A la hora de trabajar con un editor de páginas Web, cualquier usuario se limita a introducir el texto
directamente con el teclado, consiguiendo una letra, número u otro carácter por cada tecla pulsada.
¿Qué ocurriría si necesitamos insertar un carácter que no aparece en el teclado? Gracias a
Dreamweaver, podremos añadir caracteres especiales con un simple clic del ratón.
Añadir caracteres especiales en un documento de Dreamweaver
1. Coloque el cursor de texto en el lugar donde quiera insertar el carácter especial.
2. Haz clic sobre el menú Insertar y seleccione la opción HTML. En el submenú que aparece
escoja la opción Caracteres especiales para ver el desplegable de la imagen inferior.
3. En la lista que se muestra, haga clic en el carácter especial que desee insertar en el
documento, o bien seleccione la orden Otro… y para acceder al cuadro de diálogo Insertar
otro carácter.
4. Presione sobre el que desee y haga clic en Aceptar.

49
NOTA: También podremos insertar caracteres especiales desde la categoría Texto del panel Insertar.
3.12. Insertar reglas horizontales
Las reglas horizontales (líneas) resultan de gran utilidad a la hora de separar bloques de texto y
organizar mejor la información en un documento de Dreamweaver. Esencialmente, una regla
horizontal es una línea recta que se extenderá a lo largo de toda la ventana de documento.
Colocar una regla horizontal
1. Coloque el cursor del ratón en el lugar donde vaya a situar la regla horizontal.
2. Centre su atención en el panel Insertar.
3. Asegúrese de que la categoría Común esté activa y haga clic sobre el botón Regla
horizontal.
NOTA: También es posible colocar reglas horizontales dirigiéndonos al menú Insertar, escogiendo la
opción HTML y en el submenú que aparece pulsando sobre Regla horizontal.
Cambiar las dimensiones y la alineación de una regla horizontal
1. Seleccione la regla horizontal en la ventana de documento de Dreamweaver presionando
sobre ella.
2. Centre su atención en el panel Propiedades.
3. Escriba valores dentro de los campos de edición An y Al para modificar las dimensiones
de la regla horizontal.
4. Para cambiar la alineación de una regla horizontal diríjase al desplegable Alinear y escoja
Izquierda, Centro o Derecha (por defecto la opción activa es Predeterminada).

50
3.13. Creación de estilos CSS
Un estilo es un grupo de atributos de formato que controla la apariencia de un rango de texto en un
documento. Una hoja de estilos CSS es un archivo de texto externo, que contiene estilos y
especificaciones de formato, que se puede emplear para controlar muchos documentos al mismo
tiempo. La ventaja de utilizar una hoja de estilos CSS sobre un estilo HTML reside en que, además de
estar vinculada a múltiples documentos cuando se actualiza o cambia un estilo CSS, se actualiza
automáticamente el formato de todos los documentos que utilicen esa hoja de estilos.
NOTA: Cuando se crea un estilo clase, aparece en el panel CSS y en la orden de submenú Estilos CSS
del menú Texto.
Crear una hoja de estilo CSS personalizada
Para crear una hoja de estilo CSS personalizada accederemos al menú Ventana y pulsamos Estilo CSS
o las teclas combinadas Mayus+F11. Seguidamente nos aparece un cuadro de diálogo para definir y
crear una nueva regla de estilo CSS:
Dentro de los tipos de selector contextual para la regla CSS tenemos:
 Clase (puede ser aplicable a cualquier elemento HTML).
 ID (solo es aplicable a un elemento HTML)
 Etiqueta (redefine un elemento HTML)
 Compuesto (basado en la selección)
En el Nombre del selector introduciremos un nombre para la regla definida con un punto por
delante.
En el punto Definición de regla elegiremos donde se va a definir la regla:
 Sólo en este documento (Se define en el encabezamiento del documento el estilo CSS).
 En un documento aparte. (Se crea una hoja de estilo externa con formato *.css)

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

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

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

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

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

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

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

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

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

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

61
5. IMÁGENES
En un principio, Internet nació como un medio de difusión de texto entre científicos y militares
estadounidenses. En la actualidad, Internet se ha convertido en un medio visual enfocado a todo tipo
de usuarios. A lo largo de este capítulo, veremos que la potencia de Dreamweaver es incluso mayor a
la hora de usar su entorno visual para introducir imágenes. Conocerá los formatos gráficos más
comunes de la red, aprenderemos a insertar imágenes y a editarlas usando los distintos métodos que
nos proporciona el programa.
5.1. Formatos de gráficos Web
Lo primero y más importante que necesitamos saber a la hora de trabajar con formatos de imágenes
para la Web es que, sin la ayuda de plug-ins, ésta sólo soporta tres tipos de imágenes: el formato
JPEG, el formato GIF y el formato PNG. Los dos primeros son reconocidos por la totalidad de
exploradores y el tercero cada vez se encuentra más integrado en Internet.
GIF (Graphics Interchange Format)
Fue desarrollado originalmente por CompuServe a finales de los años 80 para solucionar el problema
de incompatibilidad entre plataformas.
Los archivos GIF son imágenes de mapa de bits que utiliza una paleta de 256 colores como máximo,
por eso, este formato suele ser usado para imágenes simples con colores planos (dibujos y logotipos)
y son generalmente de un tamaño reducido.
JPG (Joint Photo Graphic Experts Group)
Fue desarrollado con el fin de manejar imágenes fotográficas. La fuerza principal de este tipo de
imágenes es que pueden trabajar con millones de colores.
Para hacer que este formato sea manejable se ha de comprimir tal cantidad de colores, eliminando lo
que los algoritmos consideren información redundante. Cuanto mayor sea la compresión del archivo,
menor será su resolución.
PNG (Portable Network Graphic)
Fue desarrollado por Macromedia y combina la compresión de los archivos GIF con los millones de
colores de las imágenes JPEG, por lo tanto, soporta color indexado (256 colores), escala de grises,
imágenes de color verdadero (millones de colores) y transparencias.
El problema del uso de este formato es que, hasta hace poco, los navegadores sólo lo reconocían
mediante la utilización de plugins. Dreamweaver es de los primeros programas que permite trabajar
con archivos PNG de un modo natural, visualizándose en la ventana de documento del programa,
igual que un archivo GIF o JPEG.
Lo habitual es utilizar los formatos GIF o PNG para pequeños gráficos, normalmente elementos del
diseño o imágenes simples, y el formato JPG para fotografías, sean del tamaño que sean. Nos
limitaremos al uso de estos formatos. Ya que aunque algunos navegadores soportan otros, no lo
hacen todos. Y hemos de asegurarnos de que cualquier visitante de nuestra página pueda ver las
imágenes.

62
5.2. Colocación de imágenes
Dreamweaver nos permite abrir cualquier tipo de archivo guardado en formato GIF, JPEG o PNG para
colocarlo en la ventana de documento.
Insertar una imagen en la ventana de documento de Dreamweaver
Para insertar una imagen nos vamos al menú principal Insertar y pulsamos Imagen o Ctrol+Alt+I se
abre una ventana para seleccionar una imagen en nuestro disco local. Seleccionamos la imagen y le
damos Aceptar, se incluirá en el lugar donde está situado el cursor del ratón.
Otra opción es ir al menú de Herramientas con la categoría Común habilitada y pulsar directamente
en el icono de Imagen. Para ello, debe de estar activada esta opción común.
Enlace vídeo: Insertar una imagen en la ventana de documento de Dreamweaver.
NOTA: Aparece una ventana para seleccionar el origen de la imagen para insertarla en el documento
Dreamweaver.

63
5.3. Editar imágenes
Dreamweaver es una completísima herramienta de creación de páginas Web, y no un programa de
edición de gráficos. Pero en muchas ocasiones, al colocar una imagen en un documento nos daremos
cuenta de que ésta debe ser modificada. Dreamweaver nos permitirá especificar el editor de gráficos
que desee utilizar.
Especificar un editor de gráficos externos desde Dreamweaver
Para ello accederemos al menú principal Edición y pulsamos la opción Editar con Editor Externo. Nos
aparece un cuadro de diálogo de preferencias, elegimos dentro de la categoría Tipos de
archivo/Editores y los archivos y editores de código externo.
Seleccionamos la extensión para el editor externo, por ejemplo .jpg, y pulsamos el botón de (+) en
Editores y nos aparece una ventana para seleccionar el editor externo para abrir archivos con esa
extensión. Seleccionamos el editor externo y pulsamos Abrir, se nos añade directamente en el
cuadro Editores y pulsamos Convertir en principal y este editor estará predeterminado para abrir
archivos jpg.
Enlace vídeo: Especificar un editor de gráficos externo desde Dreamweaver.

64
Editar una imagen usando un editor externo
Una vez que hemos seleccionado y establecido el editor de grafico externo en la opción Preferencias,
del menú Edición y, seleccionamos una imagen de nuestro documento Dreamweaver, nos vamos al
panel de Propiedades y pulsamos el icono Editar, seguidamente se abre el programa editor de
gráficos y nos permitirá modificar la imagen. Una vez modificada se aceptará guardar los cambios y
al visualizarla en Dreamweaver se apreciará los cambios realizados en la imagen.
Enlace vídeo: Editar una imagen usando un editor externo.
5.4. Cambiar el tamaño de las imágenes
La anchura y altura de una imagen son dos atributos importantes, ya que los navegadores
reconstruyen las páginas más rápido si conocen estos atributos. Estos valores, expresados en píxeles,
son incluidos en el código HTML de un documento al insertar una imagen.
Redimensionar una imagen desde Dreamweaver es realmente fácil. Los campos de edición Ancho y
Alto del panel Propiedades muestran el ancho y alto actual de una imagen. Cambiando el tamaño se
restablecen los atributos width y height en el código, pero no afectaremos al tamaño del archivo que
no se verá influenciado por el cambio efectuado.

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

66
5.5. Uso de la etiqueta ALT
La etiqueta <alt> es probablemente uno de los mayores rasgos distintivos que podremos usar con las
imágenes que colocamos en Dreamweaver. Esencialmente, la etiqueta <alt> nos permite
proporcionar información extra sobre una imagen. Esta información de texto sustituirá a la imagen
en los navegadores que sólo admiten texto o en aquéllos configurados para descargar las imágenes
manualmente. En algunos navegadores, este texto también será visible al colocar el cursor del ratón
sobre la imagen que tenga asociada esta etiqueta.
Añadir una etiqueta <alt> a una imagen
1. Seleccione la imagen a la que quiera añadir la etiqueta <alt>.
2. Centre su atención en el panel Propiedades.
3. Escriba el texto que desee en el campo de edición Alt situado en la parte superior
derecha del panel Propiedades.
5.6. Alineación de imágenes con texto
Ahora que ya sabe cómo justificar imágenes en un documento, veremos la forma de alinear
imágenes con texto en Dreamweaver. A diferencia de otras aplicaciones, fundamentalmente editores
de texto, HTML no ofrece ningún método para ajustar texto alrededor del contorno de una imagen.
Lo que sí podremos hacer con Dreamweaver será alinear una imagen con texto, con otra imagen o
con otros elementos de la misma línea.

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

Dreamweaver CS5

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Dreamweaver CS5

Similar a Dreamweaver CS5 (20)

Más de Jomicast

Más de Jomicast (20)

Último

Último (20)

Dreamweaver CS5