Dreamweaver 8

16
TEMA 4. MACROMEDIA
DREAMWEAVER 8
José M. Castillo Castillo.

MACROMEDIA DREAMWEAVER 8
1
INDICE DE CONTENIDO TEMA 4. MACROMEDIA DREAMWEAVER 8
1. CONOCIENDO MACROMEDIA DREAMWEAVER 8
1.1 Introducción a Macromedia Dreamweaver 8
1.2 Requisitos mínimos necesarios
1.3 Entrar en Macromedia Dreamweaver 8
1.4 Entorno de trabajo
1.5 Barra de herramientas insertar
1.6 Ventana de documento
1.7 Barra de herramientas documento
1.8 Panel propiedades
1.9 Edición de métodos abreviados de teclado
1.10 Panel Activos
1.11 Trabajar con el Panel Activos
1.12 Panel historial
1.13 Práctica simulada - entrar en Macromedia dreamweaver
1.14 Práctica simulada - localizar áreas del entorno de trabajo
1.15 Práctica simulada - configurar la ventana de documento
1.16 Práctica - diseño web parte I
2. CREACIÓN DE SITIOS Y PÁGINAS WEB
2.1 Planificación de un sitio web
2.2 Configurar un sitio web
2.3 Editar un sitio web existente
2.4 Sistema de protección
2.5 Panel archivos
2.6 Configurar las preferencias del panel archivos
2.7 Mapa del sitio
2.8 Mapa de diseño del sitio
2.9 Crear, abrir y guardar documentos
2.10 Configurar las propiedades del documento
2.11 Guías visuales
2.12 Insertar palabras clave y descripciones
2.13 Previsualizar un documento
2.14 Práctica simulada - nuevo sitio
2.15 Práctica simulada - cambiar la página principal
2.16 Práctica simulada - configurar el fondo
2.17 Práctica - diseño web parte II

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

3
6. CREACIÓN DE TABLAS
6.2 Creación de tablas en la ventana de documento
6.3 Modificación de tablas
6.4 Selección de elementos de una tabla
6.5 Alineación del contenido de una celda
6.6 Dividir y combinar celdas
6.7 Anidar tablas
6.8 Trabajar con formatos de tabla
6.9 Ordenar tablas
6.10 Práctica simulada - trabajar con una tabla
6.11 Práctica - diseño web parte V
7. TRABAJAR CON CAPAS
7.2 Creación de capas
7.3 Configurar las características por defecto de una capa
7.4 Panel capas
7.5 Modificación de capas
7.6 Ajustar la alineación de las capas
7.7 Creación de una capa de carga
7.8 Trabajar con líneas de tiempo en dreamweaver
7.9 Panel líneas de tiempo
7.10 Añadir capas al panel líneas de tiempo
7.11 Modificar la línea de tiempo
7.12 Controles de la línea de tiempo
7.13 Añadir cuadros clave
7.14 Práctica simulada - configuración de una capa
8. VÍNCULOS WEB
8.2 Crear vínculos
8.3 Crear vínculos desde el panel propiedades
8.4 Navegar usando anclajes
8.5 Selección del destino de los vínculos
8.6 Crear un vínculo de correo electrónico
8.7 Creación de mapas de imagen
8.8 Creación de menús de salto
8.9 Creación de barras de navegación
8.10 Práctica simulada - creación de vínculos
8.11 Práctica - diseño web parte VI
9. FORMULARIOS INTERACTIVOS
9.2 Objetos de formulario
9.3 Insertar un formulario en dreamweaver
9.4 Creación de campos de texto
9.5 Creación de campos de texto ocultos
9.6 Insertar casillas de verificación
9.7 Insertar botones de opción
9.8 Creación de menús desplegables
9.9 Creación de listas
9.10 Creación de botones para activar el formulario
9.11 Insertar campo de archivo
9.12 Práctica - diseño web parte VII

4
10. BIBLIOTECA
10.2 La paleta activos
10.3 Visualizar los elementos de un documento
10.4 Insertar un elemento de biblioteca
10.5 Modificar elementos de biblioteca
10.6 Práctica simulada - trabajar con la biblioteca
11. PLANTILLAS
11.1 Creación de plantillas con dreamweaver
11.2 Configurar las propiedades de una plantilla
11.3 Definición de regiones editables en una plantilla
11.4 Bloquear una región editable
11.5 Creación de documentos basados en plantillas
11.6 Práctica simulada - trabajar con las plantillas de dreamweaver
11.7 Práctica - diseño web parte VIII
12. VÍDEOS
12.2 Vincular vídeos en dreamweaver
12.3 Reproducción de vídeos on-line
12.4 Atributos de quicktime
12.5 Insertar real video en un documento html
12.6 Práctica simulada - visualización de vídeos en un documento html
12.7 Práctica - diseño web parte IX
13. COMPORTAMIENTOS
13.1 Panel comportamientos
13.2 Añadir un comportamiento
13.3 Llamar javascript
13.4 Cambiar propiedad
13.5 Comprobar navegador
13.6 Comprobar plug-in
13.7 Controlar shockwave o flash
13.8 Controlar sonido
13.9 Mensaje emergente
13.10 Arrastrar capa
13.11 Ir a url
13.12 Abrir ventana del navegador
13.13 Carga previa de imágenes
13.14 Establecer imagen de barra de navegación
13.15 Mostrar-ocultar capas
13.16 Intercambiar imagen
13.17 Validar formulario
13.18 Práctica - diseño web parte X
14. COMANDOS DE TECLADO
14.1 Teclas de función de dreamweaver

5
1. CONOCIENDO MACROMEDIA DREAMWEAVER 8
Antes de comenzar a utilizar Dreamweaver y para sacar el máximo rendimiento al programa,
veremos una pequeña introducción que nos informará de los requisitos del sistema necesarios para
su instalación y correcto funcionamiento. Además, exploraremos la interfaz del programa,
aprenderemos a utilizar sus herramientas, y a definir las preferencias que mejor se adapten a nuestra
forma de trabajar.
1.1. Introducción a Macromedia Dreamweaver 8
Macromedia Dreamweaver es un editor de etiquetas o código HTML profesional para el desarrollo
de páginas Web. Tanto si estamos habituados a trabajar directamente con el código HTML, como si
prefiere un entorno de edición visual fácil de manejar (Microsoft FrontPage), Dreamweaver es,
realmente, la herramienta que nos permitirá trabajar del mismo modo que lo hacen los diseñadores
Web profesionales.
A lo largo de este curso, aprenderá a manejar y crear sitios Web, utilizando las características
novedosas que ofrece un programa amplio en opciones de diseño, que serán indispensables para los
diseñadores expertos y principiantes de Internet.
Dreamweaver nos permite crear sitios Web en forma visual, utilizando la interfaz gráfica de fácil
manejo del programa, y nos da la posibilidad de visualizar los cambios que vayamos introduciendo, al
mismo tiempo que los realizamos.

6
1.2. Requisitos mínimos necesarios
Para la instalación de este programa y su correcto funcionamiento, se requieren una serie de
condiciones y requisitos mínimos para el PC en el que vayamos a trabajar:
 Procesador Intel Pentium III o compatible con un mínimo de 800 MHz.
 256 Mb de memoria RAM.
 1’8 Gb de espacio libre en el disco duro.
 Ratón compatible con Windows.
 Pantalla de 16 bits de 1024 x 768 (se recomienda de 32 bits).
 CD-ROM.
 Sistema Operativo Windows 2000 o Windows XP.
1.3. Entrar en Macromedia Dreamweaver 8
Una vez instalado Macromedia Dreamweaver, iniciarlo será tan fácil como ejecutar cualquier otro
programa de Windows.
Posee varias formas para acceder al programa:
1. Desde el menú de inicio “Todos los programas” entrar en el directorio Macromedia y
pulsar “Dreamweaver”.
2. Desde el escritorio del PC y con acceso directo pulsar dos veces con el ratón sobre el
icono “Dreamweaver”.
3. Desde el menú de tareas anclado en la parte inferior pulsar una sola vez con el ratón
sobre el icono “Dreamweaver”.
Enlace vídeo:

7
1.4. Entorno de trabajo
Una vez abrimos Dreamweaver por primera vez, nos encontraremos con el entorno de trabajo del
programa (observe la siguiente imagen). Este entorno puede adaptarse a distintas formas de trabajar
dependiendo de la configuración que establezcamos antes de salir del programa.
Enlace vídeo:
1.5. Barra de herramientas Insertar
La Barra de herramientas Insertar contiene los elementos más utilizados
para el diseño de páginas Web. En ella, seleccionaremos desde imágenes a
plug-ins Actives e incluso comentarios HTML. Además, personalizaremos
esta barra añadiendo nuestros propios elementos y organizándolos a
nuestro gusto.
Dentro de la Barra de herramientas Insertar, veremos ocho categorías de
forma predeterminada: Común, Diseño, Formularios, Texto, HTML,
Aplicación, Elementos Flash y Favoritos.

8
Podrá acceder a estas opciones como barras totalmente independientes, o bien como pestañas,
seleccionando la orden Mostrar como Fichas del menú con forma de flecha desplegable.
Para volver a mostrar como opciones independientes cada categoría, presione sobre una de las
pestañas con el botón secundario del ratón y marque la orden Mostrar como menú.
 Común: Al seleccionar esta categoría, tendrá acceso a las opciones y elementos HTML más
utilizados como: imágenes, tablas, capas, etc.
 Diseño: En ella, verá opciones para insertar tablas, etiquetas, marcos o bien elegir entre las
tres vistas de tablas: Estándar, Ampliada y Diseño.
 Formularios: Ofrece comandos con los que crearemos formularios e insertaremos los
elementos que los componen.
 Texto: Contiene caracteres especiales como los símbolos de copyright, comillas curvas,
marca registrada, etc.

9
 HTML: Contiene botones que permiten que los diseñadores Web incluyan etiquetas <meta>
con palabras claves para los motores de búsqueda, especificar el calendario de actualización
y otras muchas tareas que producen un gran impacto en el rendimiento general de un sitio
Web.
 Aplicación: Esta categoría permite insertar elementos dinámicos como juegos de registros,
regiones repetidas y grabar formularios de inserción y actualización.
 Elementos Flash: Permite insertar elementos de Macromedia Flash.
 Favoritos: Utilice esta categoría para agrupar y organizar los botones de la Barra de
herramientas Insertar que utiliza con más frecuencia.
1.6. Ventana de documento
La ventana de documento nos presenta el documento actual con una apariencia muy aproximada a la
que mostrará en un explorador Web. Es el lugar donde creará sus páginas Web escribiendo
encabezados y párrafos, insertando imágenes y enlaces, creando tablas y demás elementos HTML.
En la parte superior de la ventana de documento
verá una etiqueta que le muestra el nombre de la
página. Éste se acompañará de un asterisco (*) si el
documento contiene cambios no guardados.
Dreamweaver le permite trabajar en su documento
de diferentes formas, utilizando la vista Diseño, la
vista Código o empleando una vista combinada que
enseñe el diseño y el código del documento (Dividir). Puede cambiar de una vista a otra usando los
comandos Código, Dividir y Diseño de la Barra de herramientas Documento.

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

11
 Título de documento: Nos permite introducir un título para el documento de una forma
rápida. Si el documento ya dispone de uno, aparecerá en este campo.
 No hay errores de comprobación de navegador: Comprueba la compatibilidad con
diferentes navegadores.
 Validar formato: Valida el documento actual o una etiqueta seleccionada.
 Administración de archivos: Abre el menú emergente con el mismo nombre, el cual contiene
la información del estado del documento en el que estamos trabajando.
 Vista previa/Depurar en explorador: Este menú emergente nos permitirá previsualizar el
documento actual en la ventana del navegador. Para agregar o cambiar los navegadores
enumerados en el menú, utilizaremos la opción Editar lista de navegadores y actuaremos
desde el cuadro de diálogo Preferencias.
 Actualizar vista de diseño: Utilice este botón para actualizar la vista Diseño después de
realizar cualquier cambio en el código de nuestro documento.
 Ver opciones: Este menú nos dejará configurar una serie de opciones que nos ayudarán a la
hora de trabajar con el documento de Dreamweaver.
 Ayudas visuales: Nos proponen ciertas opciones que nos ayudarán en el diseño de nuestras
páginas.

12
1.8. Panel Propiedades
El panel Propiedades de Macromedia Dreamweaver es probablemente la herramienta usada con más
frecuencia en el programa. Esencialmente, este panel nos permitirá examinar y editar las
propiedades del elemento seleccionado en el documento actual, ya sea una tabla, una imagen o una
línea de texto.
La forma de acceder a estas opciones es presionando la orden Propiedades del menú Ventana.
El contenido del panel Propiedades varía de forma dinámica en función del elemento seleccionado.
Por ejemplo, si seleccionamos una línea de texto, podremos cambiar su fuente, color y tamaño;
cuando seleccionamos una tabla, podremos cambiar el número de columnas y filas, las dimensiones
relativas, grosor de bordes y color, y alineación del contenido en las celdas.
Podrá acceder a atributos menos comunes de un objeto haciendo clic en la flecha de ampliación,
situada en la esquina inferior derecha del panel.

13
1.9. Edición de métodos abreviados de teclado
Los métodos abreviados de teclado son un rápido y fácil camino para acceder a las distintas
funciones de un programa.
La mayoría de los programas ofrecen al usuario unos métodos abreviados de teclado
predeterminados, pero Dreamweaver pone a nuestra disposición un editor que nos permitirá crear
nuestra propia configuración, editando los métodos abreviados existentes o utilizando otros
previamente predefinidos.
 Añadir un método abreviado a un comando: Enlace vídeo:
 Redefinir un método abreviado existente: Enlace vídeo:
 Eliminar un método abreviado de un comando: Enlace vídeo:
Acceda al menú principal Edición y seleccione Métodos abreviados de teclado. Muchos de los
comandos que aparecen ya poseen un juego de teclas para su activación. Estos pueden ser añadidos
o modificados por otro grupo de teclas que mejor nos convenga.
1.10. Panel Activos
El panel Activos es una de las herramientas de Dreamweaver a la que dedicaremos una atención
especial. Como los sitios Web han crecido en complejidad, manejar los activos puede convertirse en
una tarea muy difícil.
Algunos sitios Web pueden tener cientos de imágenes, archivos de audio y archivos multimedia. El
panel Activos nos permitirá administrar de forma fácil y rápida todos los activos de nuestro sitio
Web. Podremos controlar todos los colores, imágenes, URL externos y secuencias de comandos, así
como elementos Flash, Shockwave, QuickTime, plantillas y bibliotecas desde un lugar central.

14
Este panel ofrece dos formas de ver los activos; la opción Sitio, que muestra todos los activos del
sitio (que reconoce el panel), y la opción Favoritos, que sólo muestra los activos seleccionados de
manera explícita.
Para mostrar el panel Activos, despliegue el menú Ventana y seguidamente, presione la orden
Activos.
Observe en él que podemos trabajar con las siguientes categorías:
 Imágenes: Son archivos de imagen en formato .gif, .jpeg o .png. 
 Colores: Son los colores utilizados en documentos y hojas de estilos del sitio, incluidos los
colores del texto, el fondo y los vínculos
 URL: Muestra los URL externos a los que están vinculados los documentos del sitio. Esta
categoría incluye los siguientes tipos de vínculos: FTP, gopher, HTTP, HTTPS, JavaScript,
correo electrónico (mailto) y archivo local (file://).
 Flash: Son archivos de cualquier versión del formato Flash de Macromedia. El panel Activos
muestra los archivos .swf (Flash comprimidos), pero no los .fla (Flash de origen).
 Shockwave: Son archivos de cualquier versión del formato Shockwave de Macromedia.
 Películas: Son archivos de películas en el formato QuickTime o .mpeg.
 Scripts: Son archivos JavaScript o VBScript. Las secuencias de comandos de archivos HTML no
aparecen en el panel Activos, a diferencia de las incluidas en archivos JavaScript o VBScript
independientes.
 Plantillas: Permiten utilizar la misma disposición en múltiples páginas, así como modificar
fácilmente el diseño de todas las páginas a la vez.
 Biblioteca: Son elementos que se utilizan en múltiples páginas. Cuando se modifica un
elemento de biblioteca, se actualizan todas las páginas que contienen ese elemento.
1.11. Trabajar con el panel Activos
En la barra de menú seleccionamos Archivo  Abrir y cargamos un fichero HTML.
Posteriormente seleccionamos en la barra de menú Ventana y el panel Activos. Y actualizamos la
lista del sitio favorito obteniendo los ficheros de imágenes, URL, películas, etc., que podremos utilizar
en nuestro fichero HTML.
Nota: Para poder trabajar con el panel de Activos hay que dar de alta primeramente el Sitio donde
está todos los ficheros de imágenes, películas, etc.
Enlace vídeo:

15
1.12. Panel Historial
El panel Historial nos muestra una lista con todos los pasos que hemos realizado en el documento
activo de Dreamweaver desde que éste se creó o abrió. Este panel resultará muy útil para deshacer
uno o varios pasos o para repetirlos, así como, para crear nuevos comandos que automaticen tareas
que se repiten.
Para acceder al panel Historial ir a Ventana de la barra de menú y seleccionar Historial. En esta
ventana de Historial se va observando los cambios realizados.
Enlace vídeo:
1.13. Práctica simulada: Entrar en Macromedia Dreamweaver
Inicie una nueva sesión de trabajo con Macromedia Dreamweaver, utilizando el menú de inicio de
Windows o el acceso directo que se encuentra en el escritorio.
1.14. Práctica simulada: Localizar áreas del entorno de trabajo
Una vez dentro de la aplicación trate de localizar las diferentes áreas de su entorno.
Barra de Herramienta. Documento.
 Multipantalla.
 Vista previa/Depurar en navegadores.
 Administración de archivos.
 Validación W3C.
 Configurar compatibilidad con navegadores.
 Ayudas visuales.
 Título.

16
1.15. Práctica simulada: Configurar la ventana de documento
Configure un nuevo valor personalizado para establecer las dimensiones de la ventana de
documento. Introduzca los valores Ancho= 700 y Alto= 500.
1.16. Práctica: Diseño Web parte I
Para comenzar a trabajar con Dreamweaver, sólo necesitaremos abrir un documento HTML existente
o crear uno nuevo. Sin embargo, para sacar el máximo provecho a Dreamweaver, en esta primera
práctica vamos a comenzar configurando algunas de las preferencias del programa para lograr que se
nos facilite la forma de trabajar.
- Entre en la aplicación y cree un nuevo documento HTML.
- Establezca como tamaño para la ventana de documento 725x540 y añádale la descripción
Web Spider-Man.
- Desde el cuadro de diálogo Métodos abreviados de teclado, duplique el conjunto
Macromedia Standard y asigne a la copia el nombre de Spider-Man.
- Elimine el método abreviado de teclado del comando Utilización de Dreamweaver
perteneciente a la categoría Ayuda.
- Realice el mismo proceso para eliminar el método abreviado de teclado del comando Capas
perteneciente a la categoría Ventana.
- Asigne el método abreviado de teclado F1 al comando Insertar de la categoría Ventana.
- Repita el proceso para asignar el método abreviado de teclado F2 al comando Propiedades
de la categoría Ventana.
- Salga de la aplicación.

17
Recuerda…
Las siguientes opciones están disponibles en la Barra de herramientas Documento:
- Actualizar vista de diseño.
- Mostrar vista de Código.
- Mostrar vista de Diseño.
La opción Tamaño de ventana la utilizaremos para aplicar un tamaño estándar a la ventana de
documento.
La memoria RAM que se recomienda para la correcta instalación de Dreamweaver es de 256 MB.
La localización de la Barra de título en el entorno de trabajo de Dreamweaver nos situaremos en la
parte superior de la pantalla mostrando el nombre del documento abierto.
El espacio que deberemos disponer para instalar el programa en el disco duro de un PC es de 1,8 GB.
La categoría capas no está disponible en la Barra de herramientas Insertar de forma predeterminada.
En la zona Barra de estado de Dreamweaver podremos informarnos sobre las dimensiones actuales
de la ventana de documento.
La función principal del Panel Activos sirve para administrar de forma rápida todos los archivos de
nuestro sitio Web.
Una vez instalado Dreamweaver se ejecutará utilizando un acceso directo que creemos en el
Escritorio de Windows.
La función principal del panel Propiedades nos permitirá examinar y editar las propiedades del
elemento seleccionado en el documento actual.

18
2. CREACIÓN DE SITIOS Y PÁGINAS WEB
Macromedia Dreamweaver es una herramienta de creación y administración de sitios, por lo que
puede utilizarla para crear sitios Web completos, además de documentos individuales. Para obtener
resultados óptimos, necesitaremos diseñar y planificar el sitio Web antes de crear las páginas que va
a contener. A lo largo del próximo tema, aprenderemos a organizar los archivos de los sitios local y
remoto. Luego, una vez creado el sitio local, colocaremos en él los documentos nuevos que
realicemos. Para finalizar, configuraremos las propiedades de los documentos de Dreamweaver y los
previsualizaremos en un navegador.
2.1. Planificación de un sitio Web
Antes de comenzar a realizar ningún tipo de desarrollo, es necesario hacer una planificación de
nuestro sitio. Dicha planificación, no sólo reducirá considerablemente el tiempo empleado en la
creación, sino que nos ayudará a que todas las páginas presenten un aspecto uniforme, además de
hacer más sencillo su uso. La forma más cómoda de trabajar, cuando la labor que desarrollamos se
vaya a publicar en un servidor FTP en Internet, es crear una carpeta local de almacenamiento en la
cual situaremos todo nuestro trabajo. De esta forma, podremos comprobarlo todo antes de subirlo al
servidor, minimizando así la aparición de posibles errores en el sitio Web una vez abierto al público.
Existen diferentes métodos básicos de distribución de las páginas con los que cualquier diseñador
deberá estar familiarizado, pues cada uno sirve para un propósito diferente, permitiéndonos incluso
su combinación:
 Estructura lineal: Antes del nacimiento de la World Wide Web, la mayoría de los formatos
visuales eran lineales, es decir, una página seguía a otra a lo largo de una secuencia
inalterable. Este modelo, hoy en día, todavía es muy usado para crear aplicaciones de
enseñanza, donde podremos controlar el orden de visualización de los temas, mostrando
una página tras otra como si de un libro multimedia se tratase.
 Estructura jerárquica: En este modelo, tomamos como punto de partida una página de
inicio, desde la cual podremos acceder al resto de páginas del sitio. Los sitios con estructura
jerárquica ayudan a proporcionar un mejor sentido sobre la orientación de nuestro sitio
Web.

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

20
2.2. Configurar un sitio Web
Una vez establecida la planificación del sitio, decidido el diseño y su estructura, estamos preparados
para configurar uno nuevo usando Dreamweaver. Aunque siempre es posible definir la ubicación, lo
más adecuado es configurar el sitio local en Dreamweaver antes de comenzar a crear las distintas
páginas que compongan el proyecto.
Para establecer nuestro sitio web tenemos que acceder a la barra de menú Sitio y pulsar Nuevo Sitio.
Donde se muestra una ventana de configuración básica y avanzada para definir nuestro sitio. En la
pestaña avanzada se divide en categoría y datos locales, en la categoría de datos locales habrá que
introducir:
1. Nombre del sitio
2. Carpeta raíz local (Activar: la actualización de la lista de archivos locales automáticamente)
3. Carpeta predetermina de imágenes.
4. Vínculos relativos al sitio (Activar: Documentos o raíz del sitio)
5. Dirección HTTP ( Introducir la dirección del vínculo relativo al sitio)
6. Caché (Activar la caché).
Enlace vídeo:

21
2.3. Editar un sitio Web existente
Esta opción nos permite editar, duplicar, quitar, importar, etc., los sitios web que tengamos dados
de alta para una determinada página web. Cuando pulsamos en la barra de menú la pestaña Sitio a
continuación seleccionamos la opción Administrar Sitio donde nos muestra los sitios que tenemos
dados de alta en nuestro sistema local. Con ello, podemos editar uno de ellos y continuar trabajando
con él pulsando el botón LISTO. Lo mismo se puede eliminar un sitio con el botón de QUITAR.
Enlace vídeo:
2.4. Sistema de protección
Dreamweaver nos permite activar un sistema de protección de páginas que resulta de gran utilidad
cuando un equipo de diseñadores y programadores se encargan de desarrollar y mantener un sitio
Web. De esta manera, si por ejemplo, uno de los diseñadores está realizando alguna modificación,
Dreamweaver insertará, en el panel Archivos, una marca junto al archivo que estuviera editándose,
para que el resto de diseñadores se den cuenta de que ese fichero se está modificando
Ir a la barra de menú Sitio y editar nuestro sitio. En la categoría de datos remotos activar la opción
de Permitir desproteger y proteger archivo, para ello, habrá que introducir el nombre de protección
y la dirección de correo electrónico.

22
Enlace vídeo:
2.5. Panel Archivos
El panel Archivos es el lugar donde podremos realizar el mantenimiento de nuestro sitio Web. A
través de sus opciones, podremos crear nuevos documentos HTML, abrir y mover archivos, crear
carpetas, y borrar elementos. También podremos utilizarlo para transferir archivos de la carpeta en
desarrollo, de su disco duro a su servidor Web.
El panel Archivos presenta una Barra de herramientas que podremos utilizar para establecer qué
debe mostrarse en dicha ventana y para transferir archivos entre los sitios local y remoto.
En la barra de menú Ventanas seleccionar la opción Archivos. Nos muestra todos los archivos y
carpetas de nuestro sitio. En la barra de herramientas seleccionar “Conectar al servidor remoto”
esto nos permitirá establecer conexión con el sitio remoto donde están todas las carpetas y archivos
que se van actualizando automáticamente. Para ello, anteriormente debemos de configurar los datos
del servidor.
La barra de herramienta posee los siguientes botones de control:
 Cuadro de lista
 Conectar al servidor remoto.
 Actualizar la lista
 Archivos de sitios remotos y locales.
 Servidor de pruebas
 Mapa de sitios.
 Obtener archivos.
Nota: El tiempo máximo, por defecto, que permite tener Dreamweaver la conexión establecida es de
30 minutos, con posibilidad de modificarla.

23
Enlace vídeo:
2.6. Configurar las preferencias del panel Archivos
En este caso describimos cómo configurar el panel Archivos para que se cubran todas nuestras
necesidades. Para ello, iremos a la barra de menú Edición y seleccionamos Preferencia. En la lista de
categoría seleccionar Sitio.
Enlace vídeo:

24
2.7. Mapa del sitio
A continuación, explicaremos cómo utilizar el comando Mapa del sitio del panel Archivos, con el que
podremos ver un sitio local en forma de plano visual de iconos vinculados. Con este mapa, el
diseñador Web puede ver cómo está estructurado todo el sitio Web.
En la barra de menú Ventana seleccionar Archivos nos muestra todos los archivos y carpetas de
nuestro sitio tanto locales y remotos a en el panel derecho. Pulsar el botón de expandir archivos
locales y remotos.
Pulsar en la barra de herramientas el botón de Mapas de Sitio y se muestra la estructura de todos los
archivos locales. Con el signo (+) se podrá ampliar más la estructura.
Enlace vídeo:
2.8. Mapa de diseño del sitio
Existen ocasiones en las que no pueda visualizar el mapa de su sito, y posiblemente la causa se deba
a que no se ha especificado ninguna página principal y Dreamweaver no logra localizar ningún
archivo denominado index.html o index.htm en la raíz. En estos casos, Dreamweaver le mostrará un
mensaje de advertencia pidiéndole que seleccione una página principal.
Para evitar problemas de este tipo, asegúrese de que la disposición del Mapa del sitio sea la correcta.
En la barra de menú Sitio seleccionar Administrar sitio y elegir de la lista de sitios el que
corresponda. En la lista de categoría elegir Mapa de diseño del sitio. Introduzca los datos
correspondientes a:
 Página principal
 Número de columnas
 Ancho de las columnas
 Etiquetas de icono

25
Enlace vídeo:
2.9. Crear, abrir y guardar documentos
Una vez que hemos aprendido a crear el sitio local, debemos comenzar a desarrollar los documentos
que colocaremos en él.
CREAR UN NUEVO DOCUMENTO EN BLANCO.
Macromedia Dreamweaver ofrece diversas formas para crear un documento. Podemos crear
documento HTML nuevo (en blanco), abrir documento HTML existente, crear un nuevo documento
basado en una plantilla.
1. Ir a Archivo de la barra de menú y seleccionar Nuevo.

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

27
Enlace vídeo:
2.10. Configurar las propiedades del documento
Antes de comenzar a añadir contenido a un documento, podremos necesitar configurar sus
propiedades principales. Con el cuadro de diálogo Propiedades de la página, podremos configurar el
título de la página, las imágenes y colores del fondo, del texto y de los vínculos.
Para configurar las propiedades del documento vamos a la barra de menú Modificar y seleccionamos
Propiedades de la página. Aquí se puede añadir o modificar las características de la página.
En el área de categoría tenemos el Aspecto, Vínculos, Titulo/Codificación e Imagen de rastreo. En
Título/Codificación podremos añadir o modificar el título de la página, tipo del documento,
codificación, etc.
Enlace vídeo:

28
2.11. Guías visuales
Dreamweaver nos proporciona varios tipos de guías visuales que nos ayudarán a la hora de diseñar y
previsualizar cuál será la apariencia de nuestro diseño en un navegador. Aprenderemos a activar la
visualización de las reglas y a utilizar la cuadrícula para lograr una mayor precisión en la colocación y
ajuste del tamaño de las capas.
Accedemos a la barra de menú Ver y seleccionamos Reglas y el submenú Mostrar.
Se puede elegir una de las siguientes medidas:
 Pixeles
 Pulgadas
 Centímetros.
Si deseamos restablecer la regla a como estaba al principio, accedemos al menú Ver, seleccionamos
Regla y Restablecer origen.
Para obtener la cuadricula, accedemos al menú Ver y seleccionamos Cuadricula y seleccionar del
submenú:
 Mostrar cuadricula
 Ajustar cuadricula
 Configurar cuadrícula.

29
En el submenú de Cuadricula seleccionamos Configurar cuadricula e introducimos valores para:
 Color de la cuadricula
 Mostrar cuadricula (SI/NO)
 Ajustar cuadricula (SI/NO)
 Espaciado entre cuadriculas en pixeles
 Mostrar líneas o puntos.
Enlace vídeo:

30
2.12. Insertar palabras clave y descripciones
Si desea dar a conocer una página Web, podremos usar una serie de elementos encargados de
contener la información necesaria para que los motores de búsqueda puedan dar a conocer el
contenido y tipo de la página Web. En Dreamweaver, estos elementos están representados por los
objetos Palabras clave y Descripción.
En el menú Insertar seleccione la opción HTML.
Seguidamente se coloca sobre la opción Etiquetas Head y en el submenú que aparece seleccione
Palabra Clave. En este cuadro de dialogo introducir todas las palabras claves separadas de una coma.
Enlace vídeo:

31
2.13. Previsualizar un documento
A la hora de usar un programa como Dreamweaver, o cualquier otro programa de creación de
páginas Web, es importante el poder previsualizar el resultado de nuestro trabajo con cierta
frecuencia en uno o varios exploradores. A pesar de que en la ventana de trabajo del programa, se
tiene una visión muy similar a la de un explorador, debido al gran número de navegadores existentes
y a sus diferencias, se hace necesario poder visualizar nuestra página en ellos.
En el menú Archivo, seleccione la opción Vista previa en el navegador y en el submenú que aparece
seleccione Editar lista de navegadores.
Se abre el cuadro de diálogo Preferencias con la categoría Vista previa en el navegador seleccionado.
Para añadir un nuevo navegador a la lista predeterminada, en el área Navegadores pulse el botón en
forma de signo (+). Se abre el cuadro de diálogo Añadir navegador.
En esta ventana nos pide que introduzcamos el nombre del navegador y la ruta donde está instalada
la aplicación, para ello, le damos Examinar y buscamos un archivo ejecutable con formato .exe que
contenga la aplicación del navegador. Seleccionar si el navegador se quiere que sea principal o
secundario.
NOTA: Una vez haya añadido uno o varios navegadores a la lista, podrá previsualizar las páginas Web
en dichos navegadores. Para ello, seleccione de la lista que aparece al escoger la opción Vista previa
en el navegador del menú Archivo.
Enlace vídeo:

32
2.14. Práctica simulada: Nuevo sitio
En esta práctica simulada, deberá crear un nuevo sitio en Dreamweaver y establecer la ruta de sus
archivos y carpetas. Crea un nuevo sitio local dándole un Nombre. Configure el sitio, utilizando los
archivos y carpetas creados con anterioridad.
2.15. Práctica simulada: Cambiar la página principal
Seguidamente, deberá mostrar el mapa del sitio que ha creado y modificar la página principal que
muestra por defecto. Utilice el menú Ventana para abrir el sitio creado.
2.16. Práctica simulada: Configurar el fondo
En esta práctica simulada, deberá modificar algunas de las propiedades de la página que se muestra,
tales como su título, imagen de fondo, color, etc.
Utilice el cuadro de diálogo de Propiedades de la página para configurar algunas de las propiedades
de la página.
2.17. Práctica: Diseño Web parte II
Una vez configuradas las preferencias de Dreamweaver que vimos en el ejercicio anterior, llega el
momento de configurar la estructura del sitio que vamos a crear. Un sitio es un lugar de
almacenamiento para todos los documentos y archivos necesarios para crear una página Web. Al
definir el sitio local, lo que haremos será establecer el lugar en el que pensamos almacenar todos los
archivos del sitio dentro del disco duro de nuestro PC. Es recomendable crear un sitio local por cada
sitio Web que creemos.
- Cree un sitio Web denominado Spider-Man en una carpeta raíz del disco duro de su PC.
- Marque las opciones correspondientes para que la lista de archivos locales se actualice
automáticamente y active la caché.
- Cree la página principal del sitio con el nombre Index.html.
- Asígnele el título de página ::: Spider-Man: La película :::.
- Muestre el panel Archivos de forma expandida y vea el mapa del sitio.
- Configure las propiedades de la página de forma que muestre el color de fondo de color
negro.
- Muestre los colores de los vínculos con los siguientes valores:
• Color del vínculo: #0000FF.
• Vínculos visitados: #FF0000.
• Vínculos activos: #FFFF00.
- Introduzca a su página las palabras clave: spider-man, raimi, marvel, maguire, dafoe, dunst,
columbia, superhéroes, cómics, araña.
- Introduzca a su página el siguiente texto descriptivo: Página dedicada a la película Spider-
Man dirigida por Sam Raimi. Entra y descubre todos los datos de una de las películas más
esperadas de los últimos años.
- Vea cómo Dreamweaver añade al código de su documento las palabras clave y la descripción
de la página.

33
Recuerda…
El significado de las siglas FTP es Protocolo de Transferencia de Archivos.
La opción que deberemos activar para poder previsualizar un documento HTML en el navegador
que tengamos configurado como predeterminado es la opción Vista previa en el navegador del
menú Archivo.
La opción que deberemos marcar para activar el sistema de protección de páginas de
Dreamweaver es Permitir desproteger y proteger archivo.
El tiempo que debe permanecer inactiva la conexión con un servidor remoto para que
Dreamweaver lo desconecte son de 30 minutos.
El significado del pequeño asterisco que aparece junto al nombre de la página en la Barra de
título del documento contiene cambios que no han sido guardados.
El cuadro de diálogo Propiedades de la página nos permitirá configurar una imagen como fondo.
Si en la categoría Datos locales del cuadro de diálogo Definición de sitio, activa la opción Cache,
mejoraremos la velocidad de las tareas de administración de vínculos y sitios.

34
3. TRABAJO CON TEXTO
A pesar del hecho incuestionable de que hoy en día Internet se ha convertido en un medio visual, la
mayoría de la información que nos ofrece es aún textual. En este capítulo, vamos a aprender la forma
más rápida de añadir y editar texto con Dreamweaver. También, a organizar los bloques de texto en
nuestra página, así como, a crear estilos tanto HTML como CSS para aplicar un formato de texto.
3.1. Encabezados y párrafos
Todo texto HTML está compuesto principalmente por encabezados y párrafos. Del mismo modo en
que se muestran en un periódico los titulares para anunciar una historia o los subtítulos para
resumirla, los encabezados en Dreamweaver serán utilizados para separar las distintas secciones
principales de un documento HTML. Dreamweaver nos presenta seis niveles de encabezados cuya
etiqueta en HTML es <hn>, donde n es un número del 1 al 6. El encabezado de mayor tamaño es
<h1> y el de menor <h6>.
Los encabezados HTML, a diferencia de cualquier procesador de textos, no están vinculados a ningún
tamaño específico en puntos, tienen un tamaño determinado y proporcional dependiendo en última
instancia del explorador que estemos usando.
La mayor parte de páginas Web están compuestas generalmente por párrafos. Éstos, en HTML, se
distinguen por el uso de la etiqueta <p>. En Dreamweaver se inicia uno nuevo cada vez que se pulsa
la tecla INTRO en la ventana de documento.

35
Vaya a la barra de menú y pulse Texto a continuación seleccione Formato de párrafo y escoja uno de
los seis niveles de encabezados que Dreamweaver le proporciona. Recuerde que el encabezado de
mayor tamaño en HTML se etiqueta como <h1> y el de menor tamaño como <h6>.
Nota: También podrá aplicar etiquetas de párrafo o encabezado a un texto utilizando el cuadro de
lista Formato del panel Propiedades.
Enlace video:
3.2. Asignar fuentes a un texto
Un diseñador gráfico, normalmente, puede utilizar tantas fuentes como tenga configuradas en su
sistema. Los diseñadores de páginas Web, por el contrario, se encuentran con la limitación de que los
navegadores sólo pueden mostrar fuentes que estén instaladas en el sistema del usuario, de no ser
así, el navegador la reemplazará por una fuente que sí esté instalada.
En todas las partes del mundo, cada ordenador personal que fue fabricado en los últimos años
incluye lo que se denomina Fuentes del sistema. Éstas son: Times New Roman, Courier New y Arial
(para PC), y Times New Roman, Courier New y Helvetica (para MAC). Con el uso de estas fuentes, no
tendremos que temer por su sustitución.

36
Nota: También es posible cambiar la fuente de texto usando la opción Fuente del menú Texto y
seleccionando la serie de fuentes que desee en el menú desplegable que aparece.
Enlace video:
3.3. Editar la lista de fuentes de Dreamweaver
A continuación, veremos los pasos que debemos seguir para editar la lista de fuentes de las que
dispone Dreamweaver.
En el menú Texto seleccionamos Fuente y en el submenú que aparece, escoger Editar lista de
Fuentes. Se abre el cuadro de diálogo con el mismo nombre.

37
En este cuadro de diálogo se podrá añadir o quitar fuentes en la lista de fuentes. De las fuentes
disponibles se elegirán las que deseemos seleccionándola y pasándola a las fuentes elegidas con el
botón (<<) y posteriormente con el botón más (+) se añadirá a la lista de fuentes. Para quitar una
fuente procederemos en sentido contrario, seleccionamos la fuente pulsamos el botón de menos (-)
y le damos al botón (>>).
Enlace video:
3.4. Cambiar el color del texto
El color de texto de un documento, por defecto, será el predeterminado por el navegador del
usuario, normalmente el negro. Sin embargo, con Dreamweaver podremos cambiarlo de modo que
el nuevo color prevalezca sobre el establecido en el cuadro de diálogo Propiedades de la página.
Los colores se expresan en HTML como valores hexadecimales o usando sus nombres. El valor
hexadecimal se basa en el valor de la mezcla de los colores rojo, verde y azul y se representa por el
símbolo almohadilla (#) seguido de 6 caracteres. Así por ejemplo, #FFFFFF es el valor hexadecimal
correspondiente al color blanco.

38
En el panel Propiedades realice una de las siguientes acciones:
1. Escriba el valor hexadecimal en el cuadro de edición Color del texto.
2. Seleccione de la paleta de colores el color deseado.
Según vamos desplazando el cursor por la paleta de colores, se va visualizando una muestra del color
en la esquina superior izquierda junto al valor hexadecimal del mismo.
Enlace vídeo:
3.5. Alineación del texto
Dreamweaver es un programa que nos permite alinear fácilmente el texto. HTML soporta la
alineación del texto respecto al margen izquierdo, derecho, justificado y al centro de la ventana del
navegador.
.

39
Para realizar esta operación debe de estar el texto seleccionado e ir al panel Propiedades y, hacer
clic en uno de los cuatro botones de alineación del texto:
 Alinear a la izquierda
 Alinear al centro
 Alinear a la derecha
 Justificar
Nota: También se puede alinear un texto eligiendo Texto de la barra de menú y seleccionar Alinear.
Enlace vídeo:
3.6. Sangrías
En el lenguaje HTML, debemos insertar la etiqueta <blockquote> cuando queramos aplicar un
sangrado a un párrafo. Dreamweaver inserta, de forma automática, esta etiqueta al hacer clic sobre
el icono Sangría de texto del panel Propiedades.
Coloque el curso del texto en el párrafo que desea sangrar y haga clic en el botón sangría de texto
del panel propiedades.

40
NOTA: También es posible utilizar las opciones Sangría y Anular sangría del menú Texto para aplicar
sangrías a los párrafos.
Enlace vídeo:

41
3.7. Crear listas
Con Dreamweaver, creamos fácilmente listas numeradas, listas con viñetas y listas de definición a
partir de texto existente o de texto nuevo que escriba en la ventana de documento. Las listas de
definición no emplean caracteres iniciales como puntos, guiones o números y suelen utilizarse en
glosarios o descripciones.
Si el panel de Propiedades no se encuentra activo, vaya al menú Ventana y pulse propiedades, se
abrirá el panel de propiedades en la parte inferior.
Ponga el cursor donde vaya a comenzar el primer elemento de una lista y en el panel de propiedades
elija lista simbólica o numérica, en este caso elegir numérica.
Para una lista ordenada, seleccione Texto de la barra menú y a continuación la opción Lista donde
aparece un submenú para lista ordenada, lista sin ordenar o lista de definición.
Enlace video:

42
3.8. Corrección ortográfica
Cometer errores ortográficos en el texto de nuestra página Web puede dar una mala impresión a los
visitantes. Dreamweaver, al igual que cualquier procesador de texto, incluye un corrector ortográfico
fácil de manejar, y que nos ahorrará esos desagradables momentos. Es una buena costumbre realizar
una comprobación ortográfica de nuestra página Web antes de publicarla.
La corrección que realiza Dreamweaver no tiene en cuenta las etiquetas HTML ni los valores de
atributo, sólo corrige el texto escrito en la ventana del documento abierto. Dreamweaver comprueba
el texto de la página Web usando dos diccionarios diferentes: uno estándar para el idioma
seleccionado y otro personalizado, al que podremos ir añadiendo las palabras que creamos
oportunas.
Primeramente hay que situar el cursor al principio del texto, de otra forma la opción de ortografía no
haría su cometido. Seguidamente en el menú Texto elija Ortografía o pulse las letras combinadas
Mayus+F7.
En el cuadro de diálogo Ortografía van apareciendo palabras que el sistema nos surgiere que
cambiemos.
Enlace vídeo:

43
3.9.Insertar fechas en un documento de Dreamweaver
Dreamweaver nos proporciona un objeto Fecha que permite insertar la fecha actual con el formato
que prefiera (con o sin la hora) y ofrece la posibilidad de actualizarla cada vez que guarde el archivo.
Para insertar la fecha, coloque el cursor del ratón donde desea que aparezca la fecha, seguidamente
vaya al menú Insertar y pulse Fecha. Aparecerá un cuadro de diálogo Insertar Fecha.
En el cuadro de diálogo Insertar fecha se podrá configurar con tres formatos:
1. Formato de día.
2. Formato de fecha.
3. Formato de hora.
Enlace vídeo:

44
3.10. Insertar caracteres especiales
A la hora de trabajar con un editor de páginas Web, cualquier usuario se limita a introducir el texto
directamente con el teclado, consiguiendo una letra, número u otro carácter por cada tecla pulsada.
¿Qué ocurriría si necesitamos insertar un carácter que no aparece en el teclado? Gracias a
Dreamweaver, podremos añadir caracteres especiales con un simple clic del ratón.
Para acceder a insertar caracteres vaya al menú Ver y seleccione la opción Barra de herramientas y
en el submenú seleccione Insertar.
En la lista que se muestra, haga clic en el carácter especial que desea insertar en el documento, o
bien seleccione la orden Otros caracteres y acceda al cuadro de diálogo Insertar otro carácter.
Enlace vídeo:

45
3.11. Insertar reglas horizontales
Las reglas horizontales (líneas) resultan de gran utilidad a la hora de separar bloques de texto y
organizar mejor la información en un documento de Dreamweaver. Esencialmente, una regla
horizontal es una línea recta que se extenderá a lo largo de toda la ventana de documento.
Enlace vídeo:
3.12. Crear un texto Flash
La tecnología Flash de Macromedia es la principal solución para la creación y reproducción de
gráficos y animaciones vectoriales. Dreamweaver nos permite crear texto vectorial editable, que
podemos colocar en un documento HTML. Usando texto Flash, evitaremos las limitaciones de fuente
y tamaño que hemos visto al comienzo del tema.
Nota: Es importante hacer saber al usuario que necesitará tener instalado en su PC el plug-in de
Flash, para poder ver este tipo de texto insertado en un documento HTML.
En el menú de herramientas abrimos las opciones de Flash y seleccionamos Texto Flash.

46
En el cuadro de diálogo Insertar texto flash, podrá configurar las características del texto: Fuente,
tamaño, color, color de sustitución, insertar texto, vinculo, destino, color de fondo.
Enlace vídeo:
3.13. Creación de estilos CSS
Un estilo es un grupo de atributos de formato que controla la apariencia de un rango de texto en un
documento. Una hoja de estilos CSS es un archivo de texto externo, que contiene estilos y
especificaciones de formato, que se puede emplear para controlar muchos documentos al mismo
tiempo. La ventaja de utilizar una hoja de estilos CSS sobre un estilo HTML reside en que, además de
estar vinculada a múltiples documentos cuando se actualiza o cambia un estilo CSS, se actualiza
automáticamente el formato de todos los documentos que utilicen esa hoja de estilos.
Las hojas de estilos CSS residen en el área <head> del documento funcionando en navegadores 4.0 y
superiores.
Enlace vídeo:
3.14. Buscar y reemplazar texto
Macromedia Dreamweaver nos permite buscar texto dentro de un documento HTML pudiéndolo
reemplazar rápidamente por el texto que queramos. En la siguiente explicación, veremos de forma
detallada la totalidad del proceso a seguir para realizar esta operación.
Enlace vídeo:

47
3.15. Práctica simulada: Aplicar fuentes
Mediante esta práctica simulada, deberá crear un conjunto de fuentes que posteriormente, aplicará
al texto que se muestra seleccionado.
Enlace prácticas simuladas:
3.16. Práctica simulada: Corrección ortográfica
Deberá realizar una corrección ortográfica del texto que se muestra subrayado en la práctica
simulada corrigiendo los errores y omitiendo los nombres propios.
Enlace prácticas simuladas:
Recuerda…
Las maneras que podremos aplicar etiquetas de párrafo o encabezado a un texto es seleccionando la
opción Formato de párrafo del menú Texto.
Si queremos insertar un carácter que no aparece en el teclado lo hacemos mediante el grupo Texto
de la Barra de herramientas Insertar.
El conjunto de fuentes que Dreamweaver aplica a los textos de forma predeterminada se denomina
Fuentes del sistema.
La combinación de teclas MAYÚS+F7 abre el cuadro de diálogo que nos permitirá corregir un texto
en Dreamweaver.
Es posible localizar un texto determinado en un documento de Dreamweaver y reemplazarlo por
otro mediante la opción Buscar y reemplazar.
La herramienta Reglas horizontales podemos utilizar para organizar mejor la información en un
documento de Dreamweaver.

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

49
4.2. Colocación de imágenes
Dreamweaver nos permite abrir cualquier tipo de archivo guardado en formato GIF, JPEG o PNG para
colocarlo en la ventana de documento.
Primeramente tendremos que tener en la barra de herramienta la opción imágenes, para activarla
abra el menú principal Ver y seleccione la barra de herramientas e Insertar y en la pestaña de
común activar imágenes.
Enlace vídeo:
4.3. Editar imágenes
Dreamweaver es una completísima herramienta de creación de páginas Web, y no un programa de
edición de gráficos. Pero en muchas ocasiones, al colocar una imagen en un documento nos daremos
cuenta de que ésta debe ser modificada. Dreamweaver nos permitirá especificar el editor de gráficos
que desee utilizar.
Enlace vídeo:

50
4.4. Cambiar el tamaño de las imágenes
La anchura y altura de una imagen son dos atributos importantes, ya que los navegadores
reconstruyen las páginas más rápido si conocen estos atributos. Estos valores, expresados en píxeles,
son incluidos en el código HTML de un documento al insertar una imagen.
Redimensionar una imagen desde Dreamweaver es realmente fácil. Los campos de edición An
(Anchura) y Al (Altura) del panel Propiedades muestran el ancho y alto actual de una imagen.
Cambiando el tamaño se restablecen los atributos width y height en el código, pero no afectaremos
al tamaño del archivo que no se verá influenciado por el cambio efectuado.
Enlace vídeo:
4.5. Uso de la etiqueta <alt>
La etiqueta <alt> es probablemente uno de los mayores rasgos distintivos que podremos usar con las
imágenes que colocamos en Dreamweaver. Esencialmente, la etiqueta <alt> nos permite
proporcionar información extra sobre una imagen. Esta información de texto sustituirá a la imagen
en los navegadores que sólo admiten texto o en aquéllos configurados para descargar las imágenes
manualmente. En algunos navegadores, este texto también será visible al colocar el cursor del ratón
sobre la imagen que tenga asociada esta etiqueta.
Enlace vídeo:

51
4.6. Justificar imágenes
Lo más básico que podemos hacer con una imagen después de colocarla en la ventana de documento
de Dreamweaver, es justificarla dentro de la página. Por regla general, una imagen no se puede
mover dentro de un documento, sí lo permiten, sin embargo, otros programas de edición como
Fireworks o Photoshop, donde la alineación se convierte en una parte importante del diseño final.
Enlace vídeo:
4.7. Alineación de imágenes con texto
Ahora que ya sabe cómo justificar imágenes en un documento, veremos la forma de alinear
imágenes con texto en Dreamweaver. A diferencia de otras aplicaciones, fundamentalmente editores
de texto, HTML no ofrece ningún método para ajustar texto alrededor del contorno de una imagen.
Lo que sí podremos hacer con Dreamweaver será alinear una imagen con texto, con otra imagen o
con otros elementos de la misma línea.
Enlace vídeo:
4.8. Insertar bordes
Durante el proceso creativo, suele ser necesario añadir un borde sólido alrededor de una imagen
para poder distinguirla de otras colocadas en el mismo documento. El atributo borde nos permite
situar un borde rectangular de un solo color rodeando un gráfico. La anchura de este borde se mide
en píxeles y el color de éste es el mismo que el del texto predeterminado del documento.
Enlace vídeo:
4.9. Insertar imágenes de sustitución
Las imágenes de sustitución son uno de los efectos más populares en la realización de páginas Web.
Una imagen de sustitución no es más que una imagen que cambia cuando sitúa el puntero del cursor
sobre ella. En verdad trabajamos con dos imágenes: la imagen principal, que es la que aparece al
cargarse inicialmente la página y la imagen que la sustituye, que aparece al colocar el puntero del
ratón sobre la primera.
Enlace vídeo:

52
NOTA: Ambas imágenes deben de ser del mismo tamaño. Si son distintos, Dreamweaver cambia
automáticamente el de la segunda para ajustarlo a las dimensiones de la primera.
4.10. Práctica simulada: Insertar imagen
Inserte la imagen “007.jpg” en la ventana de documento siguiendo los pasos que ha estudiado.
Enlace práctica simuladas:
4.11. Práctica simulada: Modificar una imagen
En esta práctica simulada, deberá modificar el tamaño de la imagen que se muestra en la ventana de
documento, establecer un borde y alinearla.
Enlace práctica simuladas:
4.12. Práctica: Diseño Web parte III
A lo largo de la siguiente práctica, vamos a comenzar a trabajar con imágenes y texto para completar
la página de inicio de nuestra Web. Aprenderemos a colocar imágenes y a editarlas directamente con
el programa que configuremos en Dreamweaver; añadiremos un borde a la imagen y utilizaremos la
etiqueta <alt> para proporcionar información adicional sobre la Web.
 Dentro del sitio Spider-Man, cree una carpeta para guardar nuestras imágenes con el nombre
IMAGES.
 Dentro del documento “Index.html” inserte la imagen “spider-index01.jpg” que se adjunta
con la práctica y cree una copia de ella para guardarla dentro de la carpeta IMAGES.
 Desde el panel Propiedades, alinee la imagen que ha insertado al centro y presione INTRO
para que se ubique en la zona central de la página.
 Añada un borde a la imagen con el valor 3.
 Especifique un editor de gráficos externo para tratar las imágenes con formato .jpg.
 Edite la imagen en el editor de gráficos que acaba de configurar, de forma que, bajo el texto
“THE MOVIE”, se muestre los textos INTRO y MENÚ.
 Utilice la etiqueta <alt> para proporcionar a la imagen información extra referente a su
tamaño. Ejemplo: Imagen (127 Kb).
 Inserte el texto Para ver la INTRO, instale Flash Web Player, debajo de la imagen. Cambie el
color de su fuente para que se muestre Blanco.
 Mediante el editor de fuentes, cree un conjunto nuevo con las fuentes: 1979, Verdana y Arial
Narrow que se adjuntan con la práctica.
 Asigne el conjunto de fuentes anterior, al texto “Para ver la INTRO, instale Flash Web Player”
que insertó antes.
 Guarde los cambios

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

54
5. CREACIÓN DE MARCOS
Los marcos constituyen una de las herramientas de diseño de páginas Web más potente. Un
conjunto de marcos es una página Web que está dividida en páginas de HTML estáticas y cambiantes.
El uso de marcos y conjuntos de marcos se ha extendido enormemente y su tecnología es admitida
por los navegadores de principal uso en Internet. Hoy en día, cualquier diseñador de páginas Web
que pretenda ser competitivo necesita tener un cierto conocimiento acerca de los marcos.
5.1. Creación de marcos y conjuntos de marcos
Los marcos pueden ser una excelente herramienta para los diseñadores de páginas Web, pero hemos
de tener en cuenta que deben aplicarse correctamente para que funcionen. En la siguiente
aplicación, se explicarán con detalle los métodos que nos ofrece Dreamweaver para dividir nuestra
página Web en marcos y hacer así que nuestro propio conjunto de marcos no falle.
Enlace vídeo:
5.2. Crear un conjunto de marcos anidado
Un conjunto de marcos que está dentro de otro recibe el nombre de conjunto de marcos anidado.
Cada nuevo conjunto de marcos creado incluye su propio documento HTML de conjunto de marcos y
sus documentos de marcos. La mayoría de páginas Web con marcos utilizan, en realidad, marcos
anidados; al igual que varios de los conjuntos de marcos predefinidos en Dreamweaver.
Enlace vídeo:

55
5.3. Modificar el tamaño de los marcos
Dreamweaver nos proporciona dos métodos para modificar las dimensiones de los marcos: uno, lo
vimos anteriormente y consiste en arrastrar los bordes con el ratón directamente por la ventana de
documento y dos, que será más preciso y consistirá en introducir los valores utilizando el panel
Propiedades.
Para establecer los tamaños de los marcos, haga clic en el borde de un marco para seleccionar el
conjunto de marcos que desea modificar. Recuerde que los bordes de marcos deben estar visibles en
la ventana de documento.
Si no se encuentra visible el panel de propiedades, vaya a Ventana del menú principal y pulse
Propiedades.

56
Para especificar como debe asignarse el espacio cuando se cambia el tamaño de la ventana del
navegador, introduzca un número en el campo de edición Valor y elija una unidad.
Enlace vídeo:
5.4. Modificar los bordes de un conjunto de marcos
De forma predeterminada, Dreamweaver ajusta sus conjuntos de marcos para que todos tengan
bordes de 6 píxeles de grosor y un color gris. En la siguiente explicación, veremos cómo podremos
alterar el color, cambiar el grosor, o eliminar los bordes de un conjunto de marcos.
Enlace vídeo:
5.5. Utilización del panel Marcos
El panel Marcos nos proporcionará una representación visual precisa de todos los marcos de un
documento. Dentro de él, podrá ver como en cada marco se muestra su nombre de forma individual.
Los conjuntos de marcos introducidos dentro de otro conjunto de marcos se representan mediante
un borde más intenso.
Enlace vídeo:
5.6. Abrir una página Web en un marco
Para utilizar vínculos en marcos, deberá establecer un destino para el vínculo. El destino será el
marco en el que se abrirá el contenido vinculado. No tendremos que crear todas las páginas en los
marcos partiendo de cero. Si tenemos seleccionado un marco y tenemos abierto el panel
Propiedades, simplemente escribiremos el vínculo en el cuadro de texto Origen o pulsaremos sobre
el icono de la carpeta para buscar un archivo.

57
5.7. Añadir barras de desplazamiento
Una de las cualidades que han dado mayor aceptación a los marcos es la posibilidad de introducir
barras de desplazamiento para cada marco. Estas barras de desplazamiento se usan cuando la
ventana de navegador es demasiado pequeña para mostrar toda la información contenida en un
marco del documento. Hay cuatro opciones seleccionables en la lista desplegable Desplazamiento
dentro del panel Propiedades:
 Predeterminado: Deja el uso de barras de desplazamiento en manos del explorador.
 Sí: Fuerza la aparición de barras de desplazamiento sin importar la cantidad de información
de un marco.
 No: Inhabilita las barras de desplazamiento.
 Automático: Activa las barras de desplazamiento si el contenido del marco se extiende
horizontal o verticalmente más allá de lo que la ventana del explorador puede mostrar.
5.8. Destinar la información de un vínculo
Uno de los principales usos de los marcos es el de controlar la navegación de una página Web. Un
marco puede actuar como centro de la navegación de nuestra página, ofreciendo vínculos a otras
páginas de nuestro sitio. Cuando el usuario selecciona uno de los vínculos, la página solicitada
aparece en otro marco de la página, el cual podrá manejarse independientemente del marco de
navegación.
Anteriormente, estuvimos viendo que había ciertos nombres de marcos que no se podían utilizar
porque se encontraban reservados. Son los cuatro nombres reservados para las partes de un
conjunto de marcos que se usan como destino: _blank, _parent, _self, y _top. Con ellos, puede hacer
que el contenido de un vínculo se superponga al marco actual o aparezca en una ventana de
explorador nueva.
 _blank: Abre el vínculo en una nueva ventana de explorador y mantiene la ventana actual
disponible.
 _parent: Abre el vínculo en el conjunto de marcos padre del marco actual.
 _self: Abre el vínculo en el marco actual, sustituyendo su contenido por completo. Es la
opción predeterminada por el programa.
 _top: Abre el vínculo en el conjunto de marcos más exterior de la página Web actual,
sustituyendo todos los marcos.

58
5.9. Guardar archivos de marcos y conjuntos de marcos
Como ya hemos visto a lo largo de este tema, cuando trabajamos con marcos, estamos trabajando
con múltiples archivos HTML a la vez. Por lo tanto, deberemos tener cuidado de guardar no sólo los
marcos individuales que componen la página Web, sino también el propio conjunto de marcos.
En la siguiente explicación, veremos los distintos comandos que nos proporciona Dreamweaver para
guardar un conjunto de marcos con sus marcos individuales de una forma rápida y sencilla.
Enlace vídeo:
5.10. Práctica simulada: Marcos anidados
Cree un conjunto de marcos en la ventana de documento, y establezca las propiedades que a
continuación se indican.
Enlace práctica simulada:
5.11. Práctica: Diseño Web parte IV
En esta nueva práctica, vamos a crear dos de los documentos principales para nuestra Web. En
primer lugar, vamos a crear la página “Intro.htm”; se trata de un documento sencillo donde
insertaremos una película de Macromedia Flash que configuraremos utilizando el panel Propiedades.
Posteriormente, utilizaremos uno de los conjuntos de marcos predefinidos por Dreamweaver para
crear el documento “Menu.htm”.
- Cree un nuevo documento en la carpeta raíz del sitio Spider-Man, con el nombre Intro.htm.
- Configure las propiedades del archivo “Intro.htm” asignándole el título ::: Spider-Movie: La
película :::.
- Como color de fondo, seleccione Negro y como valor para los márgenes izquierdo, superior,
derecho e inferior, 0.
- Inserte en el documento la película de Flash “spider-man.swf” que se adjunta con esta
práctica.
- Aplique sobre la película insertada en la ventana de documento, la justificación Alinear al
centro.
- Seleccione la película insertada y configure sus medidas introduciendo el valor 700 de ancho
por 510 de alto. Visualice la película.
- Guarde los cambios del documento “Intro.htm” y ciérrela.
- Cree un nuevo documento en la carpeta raíz del sitio Spider-Man, con el nombre Cast.htm.
- Inserte en el documento “Cast.htm” marco izquierdo y superior anidado.
- Guarde el conjunto de marcos principal con el nombre Menu.htm.

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

60
6. CREACIÓN DE TABLAS
La colocación de imágenes, texto y otros elementos en un documento contribuyen a la presentación
de nuestras páginas. Hasta ahora, no tenemos mucho control sobre los elementos que introducimos
en una página Web, ya que nos vemos restringidos por las limitaciones del HTML. A lo largo del
siguiente tema, veremos cómo las tablas nos ayudarán a la hora de estructurar una página Web. Una
tabla de HTML ordena el contenido de una página que, de otro modo, estaría suelto. Si, en un
principio, las tablas se utilizaban para mostrar la información en un formato más claro, hoy día,
gracias a las mejoras introducidas por Dreamweaver, podemos decir que las tablas se han convertido
en la herramienta más útil a la hora de controlar la información de nuestras páginas Web.
6.1. Creación de tablas en la ventana de documento
En la siguiente explicación, aprenderemos a utilizar las herramientas que nos presenta Dreamweaver
para crear una tabla que nos permita organizar, de manera rápida, los textos y gráficos dentro de la
ventana de documento.
Enlace vídeo:
6.2. Modificación de tablas
La mayoría de las modificaciones que podremos hacer en una tabla las realizaremos utilizando el
panel Propiedades de Dreamweaver. Gracias a este panel, controlaremos fácilmente el número de
filas y columnas de éstas, así como los parámetros básicos (anchura, borde y alineación).
Enlace vídeo:
6.3. Selección de elementos de una tabla
Del mismo modo que ocurre en Dreamweaver con las imágenes y el texto que tenemos en la ventana
de documento, el primer paso que tenemos que dar para aplicar cambios a una tabla o a cualquiera
de sus elementos es seleccionarla. En la siguiente explicación, veremos cómo, con un solo
movimiento de ratón, podemos seleccionar toda una tabla, una fila, una columna o un rango
contiguo de celdas dentro de la tabla.
Enlace vídeo:

61
6.4. Alineación del contenido de una celda
Además de los controles generales para modificar una tabla que hemos estado viendo a lo largo del
tema, Dreamweaver nos ofrece otras propiedades para trabajar con las celdas de una tabla de forma
individual. En la siguiente explicación, utilizaremos el panel Propiedades para ajustar la alineación
horizontal o vertical del contenido (texto o imágenes) de una celda.
Enlace vídeo:
6.5. Dividir y combinar celdas
Gracias al panel Propiedades, podremos combinar varias celdas adyacentes para obtener una sola
celda que se extienda por varias columnas o filas. También podremos dividir una celda en varias filas
o columnas, independientemente de que hayan sido combinadas con anterioridad.
Enlace vídeo:
6.6. Anidar tablas
Una tabla anidada es una tabla que colocamos dentro de otra. Podremos configurar una tabla
anidada fácilmente, del mismo modo que cualquier otra tabla; de todas formas, hemos de tener en
cuenta que su ancho vendrá limitado por el ancho de la celda en la que aparece.
Enlace vídeo:
6.7. Trabajar con formatos de tabla
Las tablas contienen información organizada y generalmente permiten consultar esa información de
forma rápida. Sin embargo, las tablas grandes con muchas filas tienden a complicarse y a hacer su
lectura compleja y tediosa. Una manera de evitar esto es alternar filas de distintos colores.
Formatear una tabla es un trabajo que puede llevar mucho tiempo. Por ello, Dreamweaver nos
proporciona el comando Formatear tabla para aplicar rápidamente un diseño predefinido a la tabla.
Enlace vídeo:

62
6.8. Ordenar tablas
Con el comando Ordenar tabla de Dreamweaver, podremos ordenar una tabla de una manera
sencilla de acuerdo con el contenido de una columna. Además, podremos realizar una operación más
compleja ordenándola de acuerdo al contenido de dos columnas. Es importante resaltar que no se
pueden ordenar tablas que contengan celdas combinadas.
Enlace vídeo:
6.9. Práctica simulada: Trabajar con una tabla
En esta práctica simulada, deberá insertar una tabla, insertar en ella una imagen y subdividir sus
celdas para insertar texto. Proceda según las indicaciones.
Enlace práctica simulada:
6.10. Práctica: Diseño Web parte V
En esta nueva práctica, vamos a terminar por completo el documento “Menu.htm” que creamos
durante la práctica anterior. Para empezar, configuraremos los marcos de navegación y
completaremos el diseño colocando imágenes como fondo de tablas. Para terminar, maquetaremos
por completo el documento “Cast.htm” que se encuentra abierto en la página principal del conjunto
de marcos configurado en “Menu.htm”.
Configuración y diseño:
- Abra el documento “Menu.htm” del sitio Spider-Man y active la visualización de los bordes
de los marcos.
- Coloque el cursor del ratón en el interior del marco “Nav-Menu.htm” para convertirlo en el
marco activo.
- Acceda al cuadro Propiedades de la página y añádale el título Navegación izquierda.
- Elija Negro, como color de fondo y añada la imagen de fondo “fondo-menu.jpg” que se
adjunta con la práctica; guárdela en la carpeta IMAGES.
- Configure los campos de edición, Margen izquierdo, Margen derecho, Margen superior y
Margen inferior, con el valor 0.
- Asegúrese de que el cursor del ratón sigue en el interior del marco “Nav-Menu.htm”.
- Inserte en él una tabla con 1 fila y 1 columna. El ancho de la tabla será 25 y el grosor del
borde 0.
- Desde el panel Propiedades, modifique las dimensiones de la tabla con las medidas 198 de
ancho por 510 de alto. En los campos Relleno celda y Espacio celda introduzca el valor 0.
- Ensanche el marco para poder visualizar la tabla por completo.

63
- Añada la imagen “spider-fondo_01.jpg” que se adjunta con la práctica como fondo de la
tabla. Guárdela en la carpeta IMAGES.
- Coloque el cursor del ratón en el interior del marco “Top-menu.htm” para convertirlo en el
marco activo.
- Acceda al cuadro Propiedades de la página y añádale el título Navegación Superior.
- Elija Negro, como color de fondo y añada la imagen de fondo “fondo-titulo.jpg” que se
adjunta con la práctica; guárdela en la carpeta IMAGES.
- Configure los campos de edición, Margen izquierdo, Margen derecho, Margen superior y
Margen inferior, con el valor 0.
- Asegúrese de que el cursor del ratón esté colocado en el interior del marco “Top-menu.htm”.
- Inserte en él una tabla con 1 fila y 1 columna. El ancho de la tabla será 25 y el grosor del
borde 0.
- Desde el panel Propiedades, modifique las dimensiones de la tabla con las medidas 502 de
ancho por 102 de alto. En los campos Relleno celda y Espacio celda introduzca el valor 0.
- Ensanche el marco para poder visualizar la tabla por completo.
- Añada la imagen “spider-fondo_02.jpg” que se adjunta con la práctica como fondo de la
tabla. Guárdela en la carpeta IMAGES.
- Coloque el cursor del ratón en el interior del marco “Cast.htm” para convertirlo en el marco
activo.
- Acceda al cuadro Propiedades de la página y añádale el título Casting & Crew.
- Elija Negro, como color de fondo.
- Defina los colores predeterminados para el texto normal (#FFFFFF), los vínculos (#0000FF),
los vínculos visitados (#FF0000) y los vínculos activos (#FFFF00).
- Configure los campos de edición, Margen izquierdo, Margen derecho y Margen superior con
el valor 0.
- Configure el campo, Margen inferior con el valor 10.
- Asegúrese de que “Cast.htm” es el marco activo y aplique sobre él una alineación al centro.
- Inserte una tabla en su interior formada por 1 fila y 1 columna, el ancho de la tabla será 50 y
el grosor del borde, 0.
- Modifique las dimensiones de la tabla con las medidas 450 x 375 píxeles. En los campos de
edición Relleno celda y Espacio celda, introduzca 0 para especificar que no desea relleno ni
espaciado.
- Divida la tabla en dos filas y, en la superior, inserte la imagen “cast&crew.jpg” que se adjunta
con esta práctica. Guárdela dentro de la carpeta IMAGES.
- A continuación, acerque el cursor del ratón a la línea que divide las dos celdas. Cuando el
cursor del ratón cambie a una doble flecha, arrástrela hacia arriba hasta que ésta se ajuste
con la dimensión de la imagen.
- Divida la celda inferior en 8 filas y alinéelas al centro, seleccionando Centro y Medio en los
campos Horizontal y Vertical, respectivamente.
- A partir de la tercera celda de la tabla inserte las imágenes, “casting.gif”, “director.gif”,
“producción.gif”, “música.gif”, “efectos.gif” y “compañía.gif” en las celdas creadas. Guarde
todas las imágenes en la carpeta IMAGES.
- Casting de la película
- Coloque el cursor de texto del ratón justo en el lado derecho de la tabla y pulse la tecla
INTRO dos veces para dejar un espacio de separación con la tabla anterior.

64
- Inserte una nueva tabla formada por 1 fila y 1 columna, con un ancho de 50 y un grosor del
borde de 0.
- Modifique sus dimensiones con las medidas 450 x 375 píxeles, y un relleno y espacio de celda
de 0.
- Divida la tabla en dos filas e inserte en la superior la imagen “casting-logo.jpg” que se adjunta
con esta práctica. Guárdela en la carpeta IMAGES.
- Acerque el cursor del ratón a la línea que divide las 2 celdas. Cuando el cursor del ratón
cambie a una doble flecha, arrástrela hacia arriba hasta que se ajuste con la dimensión de la
imagen.
- Divida la celda inferior en 11 nuevas filas.
- Colóquese en la fila 3 de la tabla y divídala en dos columnas. Repita el mismo proceso con las
filas 5, 7, 9 y 11.
- Coloque el cursor en la celda izquierda de la fila 3 e inserte en ella la imagen
“tobey_maguire.jpg” que se adjunta con la práctica. Guárdela en la carpeta IMAGES.
- Realice el mismo proceso en las siguientes filas:
• En la misma fila a la derecha, colocaremos la imagen “kirsten_dunst.jpg”.
• En la fila 5, celda izquierda, colocaremos la imagen “willem_dafoe.jpg”.
• En la fila 5, celda derecha, colocaremos la imagen “james_franco.jpg”.
• En la fila 7, celda izquierda, colocaremos la imagen “cliff_robertson.jpg”.
• En la fila 7, celda derecha, colocaremos la imagen “rosemary_harris.jpg”.
• En la fila 9, celda izquierda, colocaremos la imagen “j.k._simmons.jpg”.
• En la fila 9, celda derecha, colocaremos la imagen “bill_nunn.jpg”.
• En la fila 11, celda izquierda, colocaremos la imagen “joe_manganiello.jpg”.
• En la fila 11, celda derecha, colocaremos la imagen “bruce_campbell.jpg”.
Director de la película
- Coloque el cursor de texto del ratón justo en el lado derecho de la última tabla que creamos
y pulse la tecla INTRO dos veces para dejar un espacio de separación con la tabla anterior.
borde de 0.
de 0.
- Divida la tabla en dos filas e inserte en la superior la imagen “director-logo.jpg” que se
adjunta con esta práctica. Guárdela en la carpeta IMAGES.
- Acerque el cursor del ratón a la línea que divide las dos celdas. Cuando el cursor del ratón
imagen.
- Centra la alineación de la tercera fila de la tabla y posteriormente, inserte en ella la imagen
“sam_raimi.jpg” que se adjunta con la práctica. Guárdela en la carpeta IMAGES.
- Sitúese en la celda cinco de la tabla e inserte en ella el texto “sam_raimi.txt” que se adjunta
con esta práctica.
- Aplíquele el formato Arial, el tamaño pequeña y alineación Justificar.
- Productores de la película

65
borde de 0.
de 0.
- Divida la tabla en dos filas e inserte en la superior la imagen “producción-logo.jpg” que se
imagen.
- Divida las celdas impares de la tabla en dos columnas de igual tamaño.
- Coloque el cursor en la celda izquierda de la fila 3 e inserte en ella la imagen
“laura_ziskin.jpg” que se adjunta con la práctica. Guárdela en la carpeta IMAGES.
- Coloque el cursor del ratón en la celda de la derecha de la misma fila y en el panel
Propiedades, pulse el botón de alineación de texto Justificar.
- A continuación, introduzca algunas de las películas en las que ha intervenido como
productora Laura Ziskin (use el mismo formato y tamaño de texto utilizado anteriormente y
emplee el comando Lista sin ordenar):
• Mejor imposible (1997)
• Todo por un sueño (1995)
• Pretty Woman (1990)
- Realice el mismo proceso en las siguientes filas:
- En la fila 5, celda izquierda, colocaremos la imagen “ian_bryce.jpg”.
- En la fila 5, celda derecha, colocaremos el texto:
• Casi famosos (1997)
• Salvar al soldado Ryan (1995)
• Hard Rain (1998)
• Twister (1996)
• Speed (1994)
- En la fila 7, celda izquierda, colocaremos la imagen “avi_ara.jpg”.
- En la fila 7, celda derecha, colocaremos el texto:
• X-Men (2000)
• Blade (1998)
- Guarde los cambios y presione F12.
Banda sonora de la película
borde de 0.
de 0.
- Divida la tabla en dos filas e inserte en la superior la imagen “música-logo.jpg” que se adjunta
con esta práctica. Guárdela en la carpeta IMAGES.

66
imagen.
- Alinee la tercera fila al centro y al medio para insertar la imagen “danny_elfman.jpg” que se
adjunta con la práctica.
- En la quinta celda, inserte el texto que se facilita en el archivo “danny_elfman1.txt”.
- Aplíquele como formato Arial, como tamaño pequeña y como alineación Justificar.
- En la séptima celda, inserte el texto que se facilita en el archivo “danny_elfman2.txt”.
- Aplíquele como formato Arial, como tamaño pequeña y como alineación A la izquierda.
- Cambie el color del texto PELÍCULAS a azul y los nombres de los directores, situados entre
corchetes, a rojo.
Efectos especiales
borde de 0.
de 0.
- Divida la tabla en dos filas e inserte en la superior la imagen “efectos-logo.jpg” que se
imagen.
- Colóquese en la tercera fila y alinéela al centro para insertar la imagen “imageworks.jpg” que
se adjunta con la práctica. Guárdela en la carpeta IMAGES.
- En la quinta fila, inserte el texto “imageworks.txt” que se adjunta con esta práctica. Aplíquele
Arial como formato, pequeña como tamaño y Justificar como alineación.
- Realización
borde de 0.
de 0.
- Divida la tabla en dos filas e inserte en la superior la imagen “compañía-logo.jpg” que se
imagen.
- Colóquese en la tercera fila y alinéela al centro para insertar la imagen “columbia.jpg” que se
adjunta con la práctica. Guárdela en la carpeta IMAGES.

67
- En la quinta fila, inserte el texto “columbia.txt” que se adjunta con esta práctica. Aplíquele
Arial como formato, pequeña como tamaño y Justificar como alineación.
- Guarde los cambios y presione F12.
Recuerda:
Con la categoría Común de la Barra de herramientas Insertar nos permitirá crear una tabla.
Cuando pulsamos la tecla TAB en la última celda de una tabla se añadirá una nueva fila.
Con la tecla TAB mantenida pulsada se pasará a la celda siguiente de una tabla.
Para colocar una imagen como fondo de una tabla utilizaremos el cuadro de diálogo Propiedades de
la página.
Para aplicar un diseño predefinido a una tabla de forma rápida utilizaremos la opción Formatear
tabla del menú de comandos.
No se puede combinar celdas que no se encuentren contiguas, sólo se puede hacer de forma
adyacentes.
Cuando eliminamos una columna de una tabla el tamaño de ésta no se ve afectado, el resto de
columnas se dimensionan para adaptarse al tamaño de la misma.

68
7. TRABAJAR CON CAPAS
A lo largo del siguiente capítulo, veremos que el uso de capas en nuestros documentos
proporcionará un mayor control y flexibilidad para hacer las páginas más dinámicas. Podremos apilar
las capas unas encima de otras, ocultar unas y mostrar otras, o moverlas por la pantalla con una línea
de tiempo. Quizás el único inconveniente del uso de las capas esté en que no se ven en todos los
navegadores, y en los que sí se muestran, no siempre lo hacen correctamente.
7.1. Creación de capas
Gracias a Dreamweaver, podremos crear capas de una forma creativa y precisa, ya sea dibujándola
directamente en la página o insertándola por medio del menú. Al insertar una capa en la ventana de
documento, Dreamweaver coloca por defecto la etiqueta <div> en código HTML. Sin embargo, se
pueden establecer hasta cuatro etiquetas distintas: <div>, <span>, <layer> e <ilayer>. Las dos
primeras son las más comunes, aunque es recomendable usar la etiqueta <div> cuando la
compatibilidad entre navegadores resulte un factor importante. Observe, en el ejemplo, la apariencia
del código HTML al crear una capa en Dreamweaver:
<div id=”Layer1” style=”position: absolute; width: 200px; height:260px; z-index:1”> </div>
Con Dreamweaver, podrá mover una capa, colocándola y dimensionándola de la forma que prefiera,
ya sea con el ratón o introduciendo valores numéricos en el panel Propiedades. Combinando ambos
métodos, podremos esbozar rápidamente el diseño de la capa y alinear después los bordes con
exactitud.
Enlace vídeo:
7.2. Configurar las características por defecto de una capa
En la siguiente explicación, veremos cómo utilizar el cuadro de diálogo Preferencias de
Dreamweaver, para modificar el tamaño por defecto, así como otras características de la capa
creada.
1. En el menú Edición, escoja la opción Preferencias. Se abre el cuadro de
diálogo con el mismo nombre.
2. En la lista Categoría, seleccione la opción Elementos PA.

69
3. Determine el estado inicial de visibilidad de la capa utilizando la lista
desplegable del área Visibilidad.
NOTA: Si no selecciona en esta lista la opción visible, no podrá ver ninguna
capa en su documento de Dreamweaver.
4. Introduzca unos nuevos valores de anchura y altura en los campos de edición
Ancho y Alto del cuadro de diálogo. Recuerde que las dimensiones se
representan en píxeles.
5. En el área Color de fondo, haga clic en la flecha situada junto a la muestra de
color y seleccione un color de la paleta o escriba un número hexadecimal en el
cuadro de edición.
6. Para configurar una imagen de fondo, haga clic en el botón Examinar del
apartado Imagen de fondo. Aparece el cuadro de diálogo Seleccionar origen
de imagen.
7. Utilice el cuadro de diálogo para localizar la imagen que desee y pulse el
botón Aceptar. Como alternativa a esto, podremos introducir directamente la
ruta utilizando su campo de edición.
8. Para finalizar, pulse el botón Aceptar. Los cambios se guardan y se actualizan
en el documento HTML abierto.
Enlace vídeo:

70
7.3. Panel Capas
El panel Capas de Dreamweaver nos proporciona un medio para manejar las capas del documento.
Éstas se muestran en el panel en forma de lista apilada de nombres donde la primera capa que se
creó estará situada al final en el orden de apilado, mientras que la última que se creó aparecerá en la
primera posición en el orden de apilado. Las capas anidadas se muestran en el panel como nombres
relacionados con las capas padres.
Enlace vídeo:
7.4. Modificación de capas
Dreamweaver nos permitirá cambiar con precisión las capas, una vez que las hemos creado.
Utilizando el panel Propiedades, podremos especificar el nombre y la ubicación de una capa, así
como establecer otras opciones de las mismas que a continuación pasamos a explicar.
Modificar una capa usando el panel Propiedades:
1. En la ventana de documento, seleccione la capa que desee modificar.
2. Si el panel Propiedades no se encontrara abierto, diríjase al menú Ventana y
escoja la opción Propiedades
3. Haga clic con el ratón sobre la flecha de ampliación situada en la esquina
inferior derecha del panel Propiedades. De este modo, veremos más
propiedades de la capa seleccionada.
4. En el cuadro de Elemento CSS-P, escriba un nombre que identifique la capa
dentro del panel y en la secuencia de comandos.

71
5. Utilice los campos Izq. y Sup. (Izquierda y Superior) para especificar la posición
de una capa respecto al ángulo superior izquierdo del documento o de la capa
padre, si ésta estuviera anidada.
6. Utilice los campos An. y Al. (Anchura y Altura) para especificar la anchura y
altura de una capa.
7. Para añadir una imagen de fondo a la capa, en el campo Im. fondo, escriba la
ruta y el nombre del archivo de imagen, o haga clic en el icono de carpeta
situado a la derecha de dicho campo para localizar y seleccionar un archivo.
8. Utilice la lista desplegable Vis. (Visibilidad) para determinar el estado inicial de
visualización de la capa.
9. Para cambiar el color de fondo de la capa, pulse directamente en la muestra
de color del área Col. Fondo y, en la paleta que aparece, escoja el color que
desee. Recuerde que puede utilizar el campo de edición situado junto a esta
muestra para introducir el valor hexadecimal del color.
10. Para finalizar, utilice el cuadro de lista Desb. (Desbordamiento) para
determinar lo que ocurre si el contenido de la capa excede el tamaño de ésta.
Enlace vídeo:
7.5. Ajustar la alineación de las capas
La capacidad de poder colocar las capas libremente en cualquier lugar de un documento, conlleva
exigencias adicionales y posibles problemas. Dreamweaver incluye dos herramientas para simplificar
el diseño de capas en la ventana de documento: las reglas y la cuadrícula.
Se puede decir que estas dos herramientas son comunes en la mayoría de programas de diseño
gráfico. Las reglas de Dreamweaver se sitúan a lo largo de los bordes exteriores (superior e izquierdo)
de la ventana de documento y pueden mostrar los ejes X e Y en píxeles, pulgadas o centímetros. La
cuadrícula entrecruza la página con líneas que nos servirán de guías cuando vayamos a colocar
objetos.
Enlace vídeo:

Dreamweaver 8

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Dreamweaver 8

Semelhante a Dreamweaver 8 (20)

Mais de Jomicast

Mais de Jomicast (20)

Último

Último (20)

Dreamweaver 8