DREAMWEAVER Manual de Usuario

MANUA DEL PARTICIPANTE
DREAMWEAVER BÁSICO
Instructora:
Lic. Norma Fernández Osorio

CNAD – Mecatrónica
CONTENIDO
OBJETIVO GENERAL ........................................................................................................... 4
INTRODUCCIÓN ................................................................................................................... 5
UNIDAD I. GENERALIDADES DE DREAMWEAVER .................................................. 7
1.1 Conocimientos básicos .............................................................................................................. 7
1.1.1 ¿Qué es Dreamweaver? ............................................................................................................ 8
1.1.2 Requerimientos de Dreamweaver ............................................................................................. 8
1.1.3 Iniciar Dreamweaver ................................................................................................................. 9
1.2‐ Entorno de trabajo ................................................................................................................. 11
1.2.1 Pantalla inicial .......................................................................................................................... 11
1.2.2 Barras de herramientas ........................................................................................................... 12
1.2.3 Los paneles e inspectores ........................................................................................................ 13
1.3. Configuración de un Sitio ....................................................................................................... 17
1.3.1 Definición del sitio ................................................................................................................... 18
1.3.2 Panel del Sitio .......................................................................................................................... 22
1.4 Texto ...................................................................................................................................... 26
1.4.1 Añadir Texto ............................................................................................................................ 26
1.4.2 Formato de texto ..................................................................................................................... 28
1.4.3 Insertar fechas ......................................................................................................................... 31
1.4.4 Insertar caracteres especiales ................................................................................................. 33
1.4.5 Insertar líneas horizontales ..................................................................................................... 34
1.4.6 Revisar ortografía .................................................................................................................... 36
1.4.7 Estilos CSS ................................................................................................................................ 38
UNIDAD II. ENLAZAR E ILUSTRAR UNA PÁGINA WEB. ........................................ 43
2.1 Hipervínculos .......................................................................................................................... 43
2.1.1 Tipos de enlaces ...................................................................................................................... 43
2.1.2 Crear enlaces ........................................................................................................................... 45
2.1.3 Destino del enlace ................................................................................................................... 46
2.1.4 Formato del enlace .................................................................................................................. 47
2.1.5 Enlace a correo electrónico ..................................................................................................... 48
2.2 Imágenes ................................................................................................................................ 49
2.2.1 Tipos de archivos gráficos. ...................................................................................................... 49
2.2.2 Insertar una imagen ................................................................................................................ 49
2.2.3 Propiedades de las imágenes .................................................................................................. 52
2.2.4 Cambiar el tamaño de una imagen ......................................................................................... 54
2.2.5 Mapas de imagen .................................................................................................................... 55
2.2.6 Imagen de sustitución ............................................................................................................. 56
2.2.7 Insertar Botones de Flash ........................................................................................................ 57
2.2.8 Insertar texto de Flash ............................................................................................................. 59
Curso: Dreamweaver
Instructora: Lic. Norma Fernández Osorio
2
UNIDAD III. FORMAS DE ORDENAR LA INFORMACIÓN. ..................................... 63
3.1 Tablas ..................................................................................................................................... 63
3.1.1 Insertar una tabla .................................................................................................................... 64
3.1.2 Rellenar las celdas ................................................................................................................... 65
3.1.3 Seleccionar elementos de una tabla ....................................................................................... 65
3.1.4 Formato de tabla ..................................................................................................................... 68
3.1.5 Cambiar tamaño de tabla ........................................................................................................ 69
3.1.6 Añadir y eliminar filas y columnas. .......................................................................................... 69
3.1.7 Anidar, dividir y combinar celdas ............................................................................................ 71
3.2. Marcos................................................................................................................................... 73
3.2.1 Crear marcos ........................................................................................................................... 74
3.2.2 Seleccionar marcos .................................................................................................................. 76
3.2.3 Guardar marcos ....................................................................................................................... 77
3.2.4 Configurar marcos ................................................................................................................... 78
3.2.5 Contenido del marco ............................................................................................................... 79
UNIDAD IV. CREACIÓN DE FORMULARIOS Y PLANTILLAS ................................ 81
4.1 Formularios ............................................................................................................................ 81
4.1.1 Añadir un formulario ............................................................................................................... 82
4.1.2 Propiedades de un formulario ................................................................................................. 83
4.1.3 Añadir campos a un formulario. .............................................................................................. 83
4.2 Plantillas ................................................................................................................................. 97
4.2.1 Crear plantillas ......................................................................................................................... 98
4.2.2 Establecer regiones editables en una plantilla ........................................................................ 99
4.2.3 Basar páginas en una plantilla ............................................................................................... 100
UNIDAD V. ANIMACIONES EN UNA PÁGINA WEB. ............................................... 104
5.1 Capas .................................................................................................................................... 104
5.1.1 Insertar una capa ................................................................................................................... 105
5.1.2 Formato de una capa ............................................................................................................. 105
5.2. Multimedia .......................................................................................................................... 107
5.2.1 Películas de Flash ................................................................................................................... 110
5.2.2 Sonido .................................................................................................................................... 111
5.2.3 Videos .................................................................................................................................... 112
GLOSARIO ......................................................................................................................... 114
CONCLUSIONES ............................................................................................................... 116
BIBLIOGRAFÍA ................................................................................................................ 117
ÍNDICE DE ILUSTRACIONES ........................................................................................ 117
Curso: Dreamweaver
3
OBJETIVO GENERAL
El participante utilizará las

herramientas de Dreamweaver
para elaborar páginas Web
estáticas.
Curso: Dreamweaver
4
INTRODUCCIÓN
El programa DreamWeaver es una herramienta de desarrollo profesional de sitios
web, cuenta con características novedosas y ofrece un panorama amplio de
opciones de diseño que son indispensables para los diseñadores expertos y
principiantes de web.
Podemos emplear DreamWeaver para crear sitios de web en forma visual, con
una interfaz gráfica de fácil manejo que nos permite visualizar los cambios que
efectuamos al mismo tiempo que los realizamos.
Con Dreamweaver podemos crear páginas HTML sin tener que preocuparnos por
el código HTML, recordar todos los "tags" necesarios para componer nuestra
página o tener que pre-visualizar en nuestra cabeza cual será el resultado
compositivo del documento final. De esta manera, crear un documento HTML se
convierte en una tarea menos parecida a programar y más parecida a maquetar,
tal y como se haría en un programa de maquetación tradicional como puede ser
QuarkExpress o Pagemaker. En resumen, podríamos decir que Dreamweaver es
un programa de "maquetación" de páginas web, salvando las lógicas distancias
que lo separan de un programa de maquetación normal.
Con el fin de facilitar aun más el proceso de creación de una página web,
Dreamweaver añade junto a las opciones que permiten formatear un documento
HTML otras opciones que pueden ser de gran utilidad, como funciones javascripts
predefinidas (behaviors), opciones de HTML dinámico. Así mismo, añade otras
herramientas que potencian la productividad, como son la creación de plantillas o
"templates" que permiten mantener y modificar la apariencia completa de un sitio
modificando un solo documento, la posibilidad de convertir en símbolos elementos
que se repiten en muchas páginas del sitio de manera que cualquier cambio en
este símbolo actualice dicho elemento en todas las páginas del sitio. Por otro lado,
alrededor de estas herramientas de diseño y composición se han ido añadiendo
otras opciones que permiten gestionar sitios completos, como puede ser el cliente
FTP incluido en Dreamweaver.
Como verá, un editor de páginas web como Dreamweaver ha dejado de ser una
herramienta de composición para convertirse en una herramienta completa para la
gestión y desarrollo de sitios web completos.
Los temas de Dreamweaver que se verán en este manual, son los siguientes:
Unidad I.- Generalidades de Dreamweaver. En esta unidad los participantes

conocerán que es Dreamweaver y cuáles son los requerimientos para instalar el
programa, así cómo las herramientas básicas de dicho software.
Curso: Dreamweaver
5
Unidad II.- Enlazar e ilustrar una página. El participante conocerá y creará

varios tipos de enlaces con diferentes destinos y formatos, así como insertará
imágenes con la finalidad de ilustrar una página web.
Unidad III.- Formas de ordenar la información. El participante insertará tablas y

marcos con la finalidad de ordenar la información dentro de una página web.
Unidad IV.- Creación de Formularios y Plantillas. Aquí se aprenderá a insertar

los elementos básicos de un formulario, así como la utilidad de las plantillas para
la creación de páginas web.
Unidad V.- Animaciones en una página web. Este tema tiene la finalidad de que
el participante inserte capas y objetos multimedia para generar animaciones en
una página web.
Curso: Dreamweaver
6
Unidad I.- Generalidades de Dreamweaver
Objetivo particular:
El participante conocerá las generalidades de Dreamweaver para la elaboración

de páginas web.
Introducción
Dreamweaver 8 forma parte de la suite de herramientas para la creación de

contenido Web integradas en Studio MX de Macromedia (Dreamweaver MX, Flsh
MX, Fireworks MX y Freehand MX). Es una herramienta que cubre todos los
aspectos del diseño web: ofrece soporte para la programación visual de HTML y
se complementa incorporando un sistema de funciones JavaScript predefinidas
(DHTML, rollovers, etc.) y el desarrollo de aplicaciones Web profesionales.
Esta aplicación cubre todos los aspectos del diseño Web y el desarrollo de
aplicaciones Web profesional, tanto para usuarios que están comenzando a
diseñar como para los expertos.
1.1 Conocimientos básicos
Las herramientas básicas de dreamweaver, son el grupo de barras y paneles que

tenemos a la vista para poder manipular nuestra página web, y estas son:
El Área de Trabajo
La distribución del espacio de trabajo. Modificar el espacio de trabajo. Los grupos

de paneles. Trabajar con los grupos de paneles. Renombrar los grupos de
paneles. Agrupar paneles. Convertir un panel en un grupo de paneles. Cerrar un
grupo de paneles. Ocultar el área de pantalla utilizada por los grupos de paneles.
Herramientas y el Panel de Propiedades
Los paneles. Barra de herramientas básicas. Barra de herramientas de diseño.

Barra de herramientas de formularios. La Barra de Menús El Inspector de Código.
La barra de menús. El menú Archivo. El menú Edición. El menú Ver. El menú
Insertar. El menú Modificar. El menú Texto. El menú Comandos. El menú Sitio. El
menú Ventana. El menú Ayuda.
Panel de Propiedades (cont).
El panel Insertar. Barra de herramientas de datos. Barra de herramientas Spry.
Curso: Dreamweaver
7
Panel de Propiedades (cont).
Barra de herramientas Spry. Barra de herramientas de texto. El panel de

propiedades. Control y optimización de imágenes
1.1.1 ¿Qué es Dreamweaver?
Dreamweaver 8 es un software fácil de usar que permite crear páginas web

profesionales.
Las funciones de edición visual de Dreamweaver 8 permiten agregar

rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar
manualmente el código HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar

comportamientos JavaScript, etc., de una forma muy sencilla y visual.
Además incluye un software de cliente FTP completo, permitiendo entre otras

cosas trabajar con mapas visuales de los sitios Web, actualizando el sitio Web
en el servidor sin salir del programa.
1.1.2 Requerimientos de Dreamweaver
Para poder instalar y ejecutar Dreamweaver, es preciso disponer de unos

requisitos mínimos en el sistema.
Para Microsoft Windows:
• Procesador Pentium II a 300 Mhz o superior.
• Windows 98, Windows 2000, Windows NT (con service Pack 3 o posterior),

Windows ME o Windows XP.
• Netscape Navigator o Micrsoft Internet Explorer v.4 o superior.
• 96 Mb de memoria RAM (se recomienda disponer de 128 Mb).
• 275 Mb de espacio disponible en disco.
• Una unidad de CD-ROM.
Curso: Dreamweaver
8
1.1.3 Iniciar Dreamweaver
Para iniciar una sesión de Dreamweaver, deberá iniciar la aplicación de la

siguiente manera:
En la barra de tareas de un clic en el botón de Inicio. Elija la carpeta Todos los

Programas, y después la opción Macromedia. De clic en el programa Macromedia
Dreamweaver 8, y aparecerán las siguientes ventanas:
Ilustración 1. Ruta de acceso a Dreamweaver 8.
Curso: Dreamweaver
9
Ilustración 2. Ventana principal de Dreamweaver.
Curso: Dreamweaver
10
1.2- Entorno de trabajo
En Windows, Dreamweaver proporciona un diseño integrado en una única

ventana. En el espacio de trabajo, todas las ventanas y paneles están integrados
en una única ventana de la aplicación de mayor tamaño.
Ilustración 3. Entorno de trabajo.
Nota: El espacio de trabajo de Windows también dispone de la opción

Codificador, que acopla los grupos de paneles en la parte izquierda y
muestra la ventana de documento en la vista Código de forma
predeterminada.
1.2.1 Pantalla inicial
Al arrancar Dreamweaver aparece una pantalla inicial como la siguiente, vamos a

ver sus componentes fundamentales. Así conoceremos los nombres de los
Curso: Dreamweaver
11
diferentes elementos y será más fácil entender el resto del curso. La pantalla que
se muestra a continuación (y en general todas las de este curso) puede no
coincidir exactamente con la que verá en su ordenador, ya que cada usuario
puede decidir qué elementos quiere que se vean en cada momento, como
veremos más adelante.
Ilustración 4. Pantalla inicial.
1.2.2 Barras de herramientas
La barra de título. Contiene el nombre del programa (Marcromedia Dreamweaver

8) y en seguida el nombre del documento que aparecerá en el explorador y entre
paréntesis, su ubicación y el nombre del archivo en formato HTML. En el extremo
de la derecha están los botones para minimizar, maximizar/restaurar y cerrar.
Ilustración 5. Barra de título.
La barra de menús. Contiene las operaciones de Dreamweaver, agrupadas en

menús desplegables. Al hacer clic en Insertar, por ejemplo, veremos las
Curso: Dreamweaver
12
C
CNAD – Mecatrón
nica
opera
aciones rela
acionadas con los differentes ele
ementos qu den insertar
ue se pued
en Drreamweaveer.
Muchhas de las operaciones

o s se puede
en hacer a partir de esstos menúss, pero para
a
algun
nas es prefe
erible o indiispensable hacerlas desde los paaneles.
Ilustración
n 6. Barra de menús.
m
La ba
arra de he
erramientas estándar. Contiene
e iconos pa
ara ejecuta
ar de forma
a
inmed
diata algunas de las operaciones
o s más habittuales, com
mo Abrir , Guardarr
, etc.
Ilustrración 7. Barrra de herramieentas estándarr.
La baarra de heerramientas s de docu

umento. Co ontiene icoonos para ejecutar
e de
e
forma
a inmediata algunas ottras operacciones habittuales que no incluye la barra de
e
herram
mientas es stándar. Estas opera aciones soon las de cambio de e vista de el
docummento, vista
a previa, etc.
Ilustración 8. Barra de
d herramienttas de documeento.
La ba
arra de esstado. Nos indica en cada momento en qu
ué etiqueta HTML noss
encon
ntramos (e en la imag
gen al encontrarnos en un documento en blanco o
estam
mos directamente sobrre la etique
eta <body>).
Tamb bién nos es s posible alternar

a entre los mo
odos de se elección, mano
m (para
a
arrastrar la página), o zoom. En cuallquier mommento puede e seleccion
nar el zoomm
preferido desde el despleg gable zoomm y ajustarr la vista al
a porcentajje preferido
o
(por defecto
d siem
mpre viene al 100%).
Ilustración
n 9. Barra de estado.
e
1.2.3 Los paneles

p e inspectore
es
Dream
mweaver uttiliza venta
anas flotanttes similare
es a las ba
arras de herramientas,
que se
s conocen como pa aneles o inspectore es. La dife
erencia enttre panel e
Curso: Dreamwea
C aver
I
Instructora: Lic. Norma
N Fernándezz Osorio
13
C
CNAD – Mecatrón
nica
inspe
ector es que
e, en general, la aparriencia y op
pciones de un inspecttor cambian
n
depenndiendo de
el objeto selleccionado.
A través de la opción Ventana, de la barra de d menús, es posible

e mostrar u
oculta
ar cada uno
o de los pa
aneles o insspectores.
El ins
spector de e Propiedades. Muestra y permiite modifica ar las propiedades de
el
elemeento selecccionado que son usad das de form ma más fre
ecuente. Poor ejemplo,
cuanddo el elem mento seleccionado sea s texto mostrará el tipo de fuente, laa
alinea
ación, si es
stá en negrita o cursiva
a, etc.
ando sobre el botón

Pulsa , se desspliega para mostrarr más opciones. Este
e
botón
n se encuen
ntra en la esquina infe
erior-derech
ha.
Segurramente se
erá la herram
mienta de Dreamweav
D ver que má
ás vaya a uttilizar.
Ilu
ustración 10. Inspector
I de Propiedades.
P
La barra
b de herramient
h tas Insertaar o pane el de objetos. Permite insertarr
elemeentos en un documen nto sin la necesidad de
d recurrir al
a menú Insertar. Loss
elemeentos está án clasifica
ados según n su categgoría: tabla
as, texto, objetos de
e
formu
ulario, etc.
Ilustrración 11. Barra de herramiientas insertarr.
Es po
osible configurar este panel para que en loss botones se muestrenn los iconoss
de los objetos (como
( ocurrre en la im
magen anteerior), para que se muestren loss
nombbres de los objetos, o para
p que see muestren
n ambos a la a vez.
Curso: Dreamwea
C aver
I
14
Vista de un documento. Se puede cambiar la vista del documento a través de la

barra de herramientas de documento.
Ilustración 12. Barra de herramientas de un documento.
La vista Diseño. Permite trabajar con el editor visual. Es la vista

predeterminada de Dreamweaver y la que se suele utilizar habitualmente.
Ilustración 13. Vista diseño.
La vista Código. Se utiliza para poder trabajar en un entorno totalmente de

programación, de código fuente. No permite tener directamente una referencia
visual de cómo va quedando el documento según se va modificando el código.
Curso: Dreamweaver
15
Ilustración 14. Vista código.
La vista Código y Diseño. Permite dividir la ventana en dos zonas. La zona

superior muestra el código fuente, y la inferior el editor visual. Cuando se realiza
un cambio en alguna de las zonas, este cambio se aplica directamente sobre la
otra.
Ilustración 15. Vista código y diseño.
Curso: Dreamweaver
16
1.3. Configuración de un Sitio
En Dreamweaver, un sitio es un conjunto de archivos y carpetas, relacionados

entre sí, con un diseño similar o un objetivo común, que corresponden a un sitio
web de un servidor en Internet.
Antes de crear un sitio web, hay que planearlo y definir con claridad los puntos
siguientes:
1. Objetivo del sitio. Lo que se pretende ofrecer y lo que se espera conseguir

(informar, vender, entretener, etc.) para diseñar el sitio web adaptado a
determinadas necesidades.
2. Audiencia destino. Quién desea que visite el sitio y sus condicionantes

(navegadores, velocidad de acceso, recursos multimedia de sus equipos,
plataforma, sistemas operativos, etc.).
3. Compatibilidad de navegadores. Debe diseñar el sitio para ofrecer la

máxima compatibilidad con los navegadores más utilizados, Microsoft
Explorer y Netscape Navigator. Cuanto más sofisticado se diseñe el sitio, en
cuanto a disposición, animación, contenido multimedia e interacción, será
necesario crear versiones de sitios compatibles con distintos navegadores, o
al menos las páginas más importantes, como la página principal del sitio.
4. Estructura del sitio. Para evitar terminar con una carpeta llena de archivos o
con archivos relacionados repartidos por numerosas carpetas que dificultan
su administración, seguir estos consejos:
• Crear una carpeta para cada grupo de páginas relacionadas que serán la
carpeta raíz (noticias, comunicados de prensa, organización, ofertas,
productos, etc.), y si es necesario utilizar subcarpetas para facilitar el
mantenimiento y la navegación por el sitio.
Ilustración 16. Ejemplo de organización de carpetas.
Nota: Organizar en carpetas las páginas y archivos que forman una

unidad de contenido es básico para facilitar el mantenimiento de un sitio
web.
Curso: Dreamweaver
17
• Decidir donde incluir los elementos multimedia, como imágenes y archivos

de sonido, con el fin de facilitar su localización a la hora de insertarlas en
una página. Estos elementos pueden almacenarse en una carpeta
llamada Activos, que contenga otras, como Imágenes, Animaciones y
sonidos (dejar una carpeta sólo para imágenes).
• Utilizar la misma estructura para el sitio local y el remoto para asegurar

que Dreamweaver duplique con precisión la estructura local en el entorno
remoto.
5. Diseño del sitio. Se planea el diseño y la disposición antes de comenzar a

trabajar con Dreamweaver, aunque sea un sencillo boceto en papel. Poner
especial atención al Esquema de navegación e imagínar los desplazamientos
de un visitante por las áreas y secciones de su sitio:
• Crear indicadores que informen dónde está y permitan volver a la página

de inicio (home).
• Incorporar elementos de búsqueda, mapas que faciliten la localización de

la información que se está buscando.
• Mantener el mismo sistema de navegación en todo el sitio.
6. Planeación y recopilación de los activos. Los archivos son elementos

como imágenes, elementos multimedia (Flash, Shockwave, Fireworks, etc.),
que se necesitarán para integrarlos a las páginas del sitio. Si no se preparan
antes, se tendrá que detener continuamente para encontrar una imagen o
para crear un botón. Si muchas de las páginas van a utilizar la misma
disposición, será conveniente utilizar plantillas. Si se sabe que determinada
imagen u otro contenido va a aparecer en varias páginas del sitio, se
diseñará el contenido con antelación y se convertirá en un elemento de
biblioteca.
1.3.1 Definición del sitio
Una vez creadas las carpetas que formarán un sitio local, ya es posible definir el
sitio en Dreamweaver.
Para ello hay que dirigirse al menú Sitio, a la opción Administrar sitios....
Curso: Dreamweaver
18
Ilustración 17. Menú Sitio.
En el caso de haber seleccionado la opción Administrar sitios, aparece una

ventana que contiene la lista de sitios locales definidos con anterioridad.
Por supuesto, pueden existir varios sitios locales en un mismo ordenador.
Tanto si se elige la opción Nuevo, como si se elige la opción Editar, se

mostrará la misma ventana en la que definirá las características del sitio.
Ilustración 18. Administrar Sitios.
Curso: Dreamweaver
19
Ilustración 19. Definición del sitio.
Las características del sitio se agrupan en diferentes categorías que aparecen

en la parte izquierda.
Para visualizar las características de una categoría basta con seleccionarla

de la lista haciendo clic en ella.
Vea los datos que hay que editar para la categoría Datos locales.
Debe definirse el Nombre del sitio y la Carpeta raíz local, que es en la que se
encuentra el sitio dentro del disco duro local.
Después, si se desea, a través de la categoría Mapa de diseño del sitio puede

definirse la página principal del sitio, de la que colgarán el resto de documentos
HTML dentro del sitio, si en la carpeta raíz del sitio existe una página con el
nombre index.htm, Dreamweaver la seleccionará por defecto.
Estas tres características son las imprescindibles para definir un sitio local.
Las demás opciones en este momento no son tan importantes, ya que se está
definiendo el sitio local, y no es necesario establecer los datos del servidor en el
que estará el sitio remoto.
Curso: Dreamweaver
20
C
CNAD – Mecatrón
nica
Despu
ués de relle
enar los dattos pulsar el
e botón Ac
ceptar y se abrirá el sitio.
Si se prefiere utilizar un as
sistente para crear el sitio web sólo se ten
ndrá que
selecccionar la pe
estaña Bás sicas, en ve
ez de la pestaña Avannzadas.
Ilustraación 20. Asisstente para creear sitios web..
Para abrir un sitio

s ya deefinido hay que dirigirse al men nú Sitio, a la opciónn
Administrar sittios. Selecccionar el sitio
s de la lista de sittios y pulsa
ar sobre el
e
n Listo.
botón
Tambbién se pod
drá utilizar el
e panel Arcchivos, busscar y selecccionar el sitio
s a abrir
en el menú desp
plegable de e la pestaña
a Archivos
s.
I
Ilustración 21. Panel de Arcchivos.
Curso: Dreamwea
C aver
I
21
C
CNAD – Mecatrón
nica
1.3.2 Pane
el del Sitio
Es po
osible visualizar un sitio
o en el pan
nel Archivo
os o en una
a ventana.
El pan
nel Archivo
os se pued
de abrir a trravés del menú
m Venta
ana, opción
n Archivos.
Tambbién pulsand
do F8.
Para cambiar de e una vista a otra hayy que pulsaar sobre el botón que aparece
e
en la parte superrior del pan
nel y de la ventana.
v
Al missmo tiempoo, es posib

ble visualizaar el sitio local,
l el sittio remoto, el servidor
remotto de prueb
ba o el mapa del sitio.
En essta imagen se visualiza

an el mapa del sitio y el sitio loca
al.
Ilu
ustración 22. Mapa
M del sitio y sitio local.
En este
e caso los docum mentos prrueba1.htm m y prueb ba2.htm cuelgan de el
docum mento indicce.htm, yaa que éste ha sido deefinido como página principal
p de
el
sitio y contiene vínculos
v haccia los otros dos.
Si loss archivos se mueven de una carpeta a otra, o se cambian de d nombre,

desde e fuera de Dreamwea áginas no se mostrarrán correcta
aver, las pá amente: no
o
apareecerán imággenes, no funcionarán
f n enlaces, etc.
e
En ca ambio, si estas modifiicaciones se

s hacen deesde Dreammweaver, a través deel
sitio, es posiblee actualiza
ar automátiicamente las páginass para que e si hacen
n
refereencia a un objeto
o que ha cambia ado, despué
és no se produzcan prroblemas al
a
visualizarlas.
Curso: Dreamwea
C aver
I
22
Al modificar algún objeto que es referenciado por algún otro documento, se

muestra una ventana similar a ésta, que indica los documentos que hacen
referencia a dicho objeto, y que pueden ser actualizados para que no se
produzcan los problemas antes mencionados.
Simplemente hay que pulsar sobre el botón Actualizar.
Ilustración 23. Actualizar archivos.
Desde el panel de sitio se controla y administra todo el sitio, las carpetas locales,
las remotas y las de servidor de prueba asociadas.
Desde ahí se podrá realizar las operaciones estándar de mantenimiento de

archivos como por ejemplo, crear documentos HTML nuevos, ver, abrir y
trasladar archivos, crear carpetas, eliminar elementos, transferir archivos entre
sitios locales, sitios remotos y servidores de prueba, etc.
Ilustración 24. Opción para dar mantenimiento al sitio.
Curso: Dreamweaver
23
El panel Sitio puede estar contraído o ampliado. Para cambiar de un
estado a otro, haga clic en el botón Ampliar/Contraer
Ilustración 25. Panel del sitio contraído.
Ilustración 26. Panel del sito ampliado.
Gestión de archivos en el panel Sitio
Desde el panel Sitio, puede ver los sitios como listas de archivos, abrir archivos,
cambiar el nombre de los archivos, añadir nuevas carpetas o archivos a un sitio
o actualizar la vista de un sitio después de realizar cambios.
Abrir un archivo
Para abrir un archivo desde el panel Sitio, realizar una de estas acciones:
• Doble clic en el ícono del archivo.

• Clic con el botón derecho en el ícono del archivo y elija el comando Abrir
del menú contextual.
Curso: Dreamweaver
24
Ilustración 27. Menú contextual.
Para añadir un nuevo archivo o carpeta a un sitio, realizar estos pasos:
• Seleccionar un archivo o carpeta en el panel Sitio. Dreamweaver creará el

archivo o carpeta dentro de la carpeta seleccionada, o en la misma
carpeta del archivo seleccionado.
• Para crear una nueva carpeta, clic en el comando Nueva Carpeta del
menú contextual.
• Para crear un nuevo archivo, clic en el comando nuevo Archivo del menú
contextual.
• Introducir un nombre para el nuevo archivo o carpeta en el cuadro de texto

que se muestra en la siguiente figura.
Curso: Dreamweaver
25
Ilustración 28. Creación de un nuevo archivo.
1.4 Texto
A lo largo de este tema se aprenderá a cambiar las propiedades del texto y a

crear estilos CSS, que permiten asignar al texto estilos creados por nosotros
mismos, no predefinidos.
1.4.1 Añadir Texto
El texto es el elemento base de la mayoría de las páginas de un sitio web. En este

capítulo aprenderá a insertar texto y a establecer la fuente, el tamaño, el color y
los atributos de alineación.
Las opciones de dar formato al texto resultarán familiares ya que son equivalentes
a las de los programas estándar de tratamiento de texto. Se deberá aplicar con
atención ya que afectarán a la estructura de la página y determinarán su
legibilidad.
Se puede utilizar dos maneras de añadir texto a un documento de Dreamweaver:
• Escribiendo directamente en una ventana del documento de Dreamweaver.
• Cortándolo, pegándolo o importándolo de textos existentes en otros

documentos.
Copiar texto de otra aplicación. Cuando se copia texto de otra aplicación,

Dreamweaver no mantiene el formato que tenía aplicado aunque si conserva los
saltos de línea:
• Seleccione, en la aplicación origen, el texto que se desea copiar en el

documento Dreamweaver.
Curso: Dreamweaver
26
• Clic en el comando copiar del menú edición de dicha aplicación.

• Cambie al documento de Dreamweaver y, en la vista Diseño, coloque el
punto donde desea insertar el texto.
• Elija el comando Pegar del menú edición.
Importar texto de Microsoft Word. Si el texto que se desea importar se tiene

en un archivo de Microsoft Word, es conveniente importarlo, ya que
Dreamweaver permitirá limpiar las etiquetas de formato sobrantes que Word
inserta.
Para importar un archivo de Microsoft Word, se realizarán los siguientes pasos:
• Seleccionar el comando Importar del menú archivo.
Ilustración 29. Opción para importar texto de Word.
• A continuación, clic en el comando Documentos de Word. Se abre el cuadro

de diálogo: Seleccionar archivo de Word a importar.
Curso: Dreamweaver
27
Ilustración 30. Importar documento de Word.
• Localizar y seleccionar el documento que se desee abrir y dar clic en el

botón Abrir. Dreamweaver abre el documento.
1.4.2 Formato de texto
Las características del texto seleccionado pueden ser definidas a través del
menú Texto, y a través del inspector de propiedades. Ver las posibilidades que
se ofrecen a través del inspector de propiedades, aunque sean menos que las
que se ofrecen a través del menú Texto.
Ilustración 31. Panel de propiedades.
Formato
Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser
encabezado, párrafo o preformateado. Los encabezados se utilizan para
establecer títulos dentro de un documento. El formato preformateado sirve para
que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se
introducen varios espacios solo se considera uno, pero al establecer el formato
preformateado se respetará que hayan varios espacios en lugar de solo uno.
Curso: Dreamweaver
28
Fuente
Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en

lugar de una sola, ya que es posible que al establecer una única fuente el usuario
no la tenga en su ordenador. El seleccionar un conjunto de fuentes posibilita que
en el caso de que el usuario no tenga una fuente se aplique otra del conjunto. Por
ejemplo, si selecciona Arial, Helvética, Sans-serif, el texto se verá con la fuente
Arial, pero si ésta no existe se verá en Helvética.
Tamaño
Permite cambiar el tamaño del texto. El tamaño se puede indicar en diversas

unidades, en píxeles, centímetros, etc...
Color
Permite seleccionar el color de la fuente, ignorando el color que se haya definido

en las propiedades de la página. Si no se ha establecido ningún color en las
propiedades de la página ni aquí, el color del texto por defecto será el negro.
Estilo
Estos botones permiten establecer si el texto aparecerá en negrita o en cursiva.

A través del menú Texto también se puede, entre otras cosas, subrayar el texto.
Esta opción no aparece en el panel de Propiedades ya que por lo regular no
suele utilizarse, debido a que los vínculos aparecen subrayados y el subrayar
texto normal podría hacer que el usuario pensara que se trata de un vínculo.
Alinear
A través de estos botones es posible establecer la alineación del texto de una de

estas cuatro formas distintas: izquierda, centrada, derecha y justificada.
Curso: Dreamweaver
29
C
CNAD – Mecatrón
nica
Listas
s
Estoss botones permiten cre

ear listas co
on viñetas o listas num
meradas
Es po
osible inserttar texto a modo
m de lissta. A su ve
ez, la lista puede
p ser numerada
n o
con viñetas.
Para que un tex xto que ya ha sido inttroducido en

e el docum
mento se convierta en n
una liista, simple
emente hayy que selecccionarlo y pulsar sobre la opción de lista
a
corresspondiente, ya sea a través del inspector de propie edades, o a través deel
menú Texto.
La listta con viñetas (desord

denada) se seleccionaa a través del
d botón , mientrass
que laa lista numeerada (orde
enada) se selecciona
s a través del botón .
Ejemplo de lista
a numerad
da (ordenad
da):
1. Preparar laa mochila

2. Sacar los libros
l de ese
e día
3. l libros del día siguien
Introducir los nte
4. Ponerme el e pijama
5. Lavarme lo os dientes
6. Poner el despertador
Ejemplo de lista
a con viñettas (desorrdenada):
• Perro
• Gato
• Aves
o Canario
o
o Loro
• Hamsteer
Para establecer listas anida
adas dentro o de otras como
c en los ejemplos anteriores,
es ne
ecesario añadir una sa angría en loos elementtos de la lissta que se desee que
e
pasen
n a formar parte
p de la lista anidad
da.
A travvés del men nú Texto, opción

o Listta, es posib
ble accederr a las prop piedades dee
la lista
a seleccion
nada. Se deebe seleccio onar el textto de la lista previame
ente o tenerr
el currsor en algú
ún lugar de la lista paraa que se acctive este submenú.
s
En la ventana Propiedade es de lista se

s puede especificar el e tipo de lissta (con
númeeros o con viñetas),
v el tipo de núm
meros o viñ ñetas que se
s utilizarán
n (en la
propiedad Estilo
o:), y en el caso de lass listas orde
enadas, el número po or el que
comeenzará el re
ecuento.
Curso: Dreamwea
C aver
I
30
Ilustración 32. Propiedades de lista.
Sangrías
Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una
especie de margen que se establece a ambos lados del texto. En este caso los
botones se refieren a sangría a la izquierda del texto.
1.4.3 Insertar fechas
Se puede insertar la fecha actual en un documento, con el formato que se prefiera

(con o sin la hora) y se actualiza cada vez que se guarde el archivo. Para ello se
proporciona el objeto Fecha.
Para insertar la fecha actual en un documento, realizar las siguientes

instrucciones:
• Situar el punto de inserción en el lugar del documento donde se desee

insertar la fecha.
• Seleccionar el comando Fecha del menú Insertar.
Curso: Dreamweaver
31
Ilustración 33. Menú Insertar, comando fecha.
Aparecerá el cuadro de diálogo Insertar fecha.
Ilustración 34. Cuadro de diálogo insertar fecha.
• Seleccionar el formato de día, de fecha y de hora que se desea.

• Para que la fecha insertada se actualice cada vez que guarde el
documento, marcar la casilla Actualizar automáticamente al guardar.
• Hacer clic en el botón Aceptar para insertar la fecha.
Curso: Dreamweaver
32
1.4.4 Insertar caracteres especiales
A veces se necesitará introducir caracteres especiales en las páginas. Debido al

modo editor de Diseño de Dreamweaver esta tarea es muy sencilla utilizando el
teclado, podrá incluir caracteres como á, ê, ì, ö, ç.. de forma rápida por si quiere
poner dos espacios en blanco y los introduce por teclado, Dreamweaver no los
creará, deberá introducirlo dos veces utilizando la opción que se verá a
continuación.
Ilustración 35. Barra insertar.
Se insertarán varios caracteres especiales (con forma de entidades HTML) desde

la categoría Texto, el botón Caracteres de la barra Insertar.
• Hacer clic en el menú Insertar y seleccionar la opción HTML
• Colocar el puntero del ratón sobre Caracteres especiales y observar una

lista rápida de los caracteres más utilizados que no pueden ser
introducidos mediante teclado.
• Para introducir alguno de estos caracteres en sus textos sólo selecciónelo

en la lista y aparecerá en la vista de Diseño.
Ilustración 36. Caracteres especiales.
Curso: Dreamweaver
33
• Si el carácter que se busca no se encontrase allí, hacer clic en Otro... y

se abrirá una ventana desde donde se puede seleccionar caracteres entre
una lista bastante más amplia:
Ilustración 37. Otros caracteres especiales.
1.4.5 Insertar líneas horizontales
Las líneas horizontales ayudan a organizar visualmente la información.
Al insertar líneas horizontales en un documento ayuda a organizar la información,

separando visualmente el texto y los objetos de una página con una o más líneas.
Para insertar una línea horizontal en un documento, realice las siguientes

acciones:
• Situar el punto de inserción en el lugar del documento donde desea insertar

una línea horizontal
• Dar clic en comando Regla horizontal de la opción HTML del menú

Insertar.
Curso: Dreamweaver
34
Ilustración 38. Regla horizontal.
Para modificar las propiedades de una línea horizontal:
• Seleccionar la línea horizontal.

• Dar clic en el comando Propiedades del menú Ventana para abrir el
Inspector de propiedades y modificar las propiedades que se necesiten.
Ilustración 39. Propiedades de la línea.
• An y Al. Indican el ancho y el alto de la línea en pixeles o como porcentaje

del tamaño de la página.
• Alinear. Especifica la alineación de la regla (Predet, Izquierda, Centro o

Derecha), si el ancho de la línea es inferior al ancho de la ventana del
navegador.
• Sombreado. Indica si la línea debe trazarse con sombreado o con un color.
Curso: Dreamweaver
35
1.4.6 Revisar ortografía
Como en todas las aplicaciones, Dreamweaver proporciona una utilidad para

revisar la Ortografía de los documentos. El comando Ortografía no revisa las
etiquetas HTML ni los valores de atributo.
De forma predeterminada el corrector ortográfico utiliza el diccionario de inglés de

Estaos Unidos. Para cambiar la configuración al diccionario Español u otro
necesario:
• Dar clic en el comando Preferencias del menú Edición y, a continuación la

categoría General.
• Seleccionar, en el menú emergente, Diccionario ortográfico, el diccionario

que desee utilizar.
Ilustración 40. Ventana de preferencias.
Para comprobar y corregir la ortografía, realizar los siguientes pasos:
Curso: Dreamweaver
36
• De clic en el comando Ortografía del menú Texto o pulse la combinación de

teclas <Mayús+F7>
•
Ilustración 41. Menú para revisar la ortografía de un documento.
Cuando Dreamweaver encuentra una palabra que no reconoce, aparece el cuadro

de diálogo Ortografía.
Ilustración 42. Cuadro de diálogo Ortografía.
• Seleccionar la opción adecuada en cada una de las propuestas de error

ortográfico:
o Añadir a personal. Incorpora la palabra no reconocida al diccionario

personal.
o Omitir. Ignora esta aparición de la palabra no reconocida.
Curso: Dreamweaver
37
o Omitir todas. Ignora todas las apariciones dela palabra no

reconocida.
o Cambiar. Sustituye esta aparición de la palabra no reconocida por el
texto que escriba en el cuadro Cambiar por o por la palabra
seleccionada de la lista Sugerencias.
o Cambiar todas. Reemplaza todas las apariciones de la palabra no
reconocida.
1.4.7 Estilos CSS
En el menú Texto, opción Estilo, aparecen una serie de estilos predefinidos que
pueden aplicarse al texto seleccionado.
Los estilos CSS están en hojas de estilo de actualización automática

(también denominadas Hojas de Estilo en Cascada) 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
algunas de sus opciones pueden utilizarse para definir atributos de imágenes y
otras características que no permitían definir los estilos HTML en versiones
anteriores, como el color de fondo para el texto, etc.
Incluso permiten aplicar un estilo sobre todas las etiquetas HTML de un mismo
tipo, como puede ser la etiqueta A HREF, que corresponde a los hiperenlaces.
De este modo, todos los hiperenlaces de la página adquirirían la apariencia
definida en ese estilo.
Un estilo CSS no es más que un conjunto de reglas de formato que controlan el

aspecto del contenido de una página Web. Los estilos CSS aportan gran
flexibilidad y control al aspecto exacto que se busca en una página, desde la
posición precisa de elementos hasta el diseño de fuentes y estilos concretos.
Una de las grandes ventajas de los estilos CSS reside en que cuentan con una
capacidad simple de actualización; cuando actualiza un estilo CSS, el formato de
todos los documentos que usan ese estilo se actualiza automáticamente.
Con Dreamweaver 8, las características que se aplicará a un texto crearán

automáticamente estilos CSS que se incrustarán en el documento actual y se
aplicarán únicamente sobre él.
Para crear un Estilo CSS personalizado:
1. En el documento, se selecciona el texto al que se desea aplicar

características concretas.
Curso: Dreamweaver
38
2. En el inspector de propiedades se modifican todas las propiedades de

formato de texto, se establecen los atributos de la fuente y del párrafo que
se desee.
Automáticamente Dreamweaver creará un nuevo estilo con el nombre Estilo1 o

Estilo2 o Estilo3,... según los nombres de los estilos ya creados.
Aparecerá el nombre Estilo1 en el cuadro Estilo del panel Propiedades.
Ilustración 43. Panel de propiedades.
También se puede cambiar el nombre del estilo, es mejor que el estilo tenga
un nombre que indique a qué tipo de texto se va a aplicar. Para ello se
desplegará la lista de estilos y se seleccionará la opción Cambiar nombre...
Aparecerá un cuadro de diálogo para que se introduzca el nuevo nombre como
la imagen inferior.
Ilustración 44. Cambiar nombre a un estilo.
Ilustración 45. Nombre del estilo.
En seguida se coloca el nuevo nombre sin espacios en blanco. En este caso:

miestilo.
Al aceptar, aparecerá un panel con el nombre Resultados. Cerrar esta ventana.
Curso: Dreamweaver
39
C
CNAD – Mecatrón
nica
De essta manera se puede crear

c un esstilo para añ
ñadirlo a un
n documentto.
Cada nuevo esttilo que se crea, se añade

a a la lista de estilos, y los podemoss
acced
der también
n de una manera rápidda a través del menú Texto, opcción Estiloss
CSS.
En ell Panel CS
SS se puede verificar que se ha
h añadido
o automáticcamente el
e
nuevo
o estilo.
Ilustración 46.
4 Panel Estillos CSS.
Aplicar un Estillo
Para aplicar
a un Estilo
E CSS
S personalizzado:
En el documento, seleccio onar el texto

o al que se
e desea applicar el esstilo CSS, o
sitúa el
e punto de e inserción del
d mouse en un párra afo para ap
plicar el estiilo a todo el
e
párraffo. Si selec
cciona un ra
ango de texxto dentro de
d un párraafo, el Estiloo CSS sólo o
afecta
ará al rangoo seleccionado.
En el inspector de Propie edades se selecciona el estilo crreado por nosotros

n de
e
a que apare
la lista ece al desp
plegar el cuadro Estilo
o.
Hojas
s de Estilos
s
Se pu
ueden expoortar estilo
os que se encuentren
e n incrustado
os en la páágina HTML
L
a una
a nueva hooja de estilos haciendo clic derrecho sobre
e el estilo en
e el Panel
CSS y seleccion
nando Expo ortar.
Se abrirá el cuuadro de diálogo

d Exxportar esstilos como archivoo CSS que
e
permitirán guard
dar todos los estilos inccrustados en
e un nuevvo archivo CSS.
Curso: Dreamwea
C aver
I
40
Esta opción es muy útil si se tienen los estilos incrustados en una página y se
quieren utilizar en otras también. Simplemente se pasan los estilos incrustados a
una hoja de estilos y luego se adjuntan en cualquier página que se quiera
utilizar.
Para asignar una hoja de estilos a una página despliega el cuadro Estilo que se
encuentra en el Inspector de Propiedades y selecciona Adjuntar hoja de
estilos...
Ilustración 47. Localiza o escribe la ruta de la hoja de estilo CSS a vincular.
En Arch./URL debe especificarse la ruta y el nombre de la hoja de estilos.
Elegir si se quiere Vincular o importar la hoja de estilos.
Se elige Vincular la hoja no se incrusta en la página sino que se añade a la

página una referencia a la hoja, esto permite que cualquier cambio realizado en
la hoja quede reflejado de manera automática en todas las páginas que utilizan
la hoja. Esta es la opción más aconsejable si se utiliza el estilo en más de una
página, de esta forma sólo será necesario vincular cada uno de los archivos que
se quieran ver afectados a la hoja de estilos que se haya creado.
Si se elige Importar la hoja se incrusta en la página.
La opción Media permitirá seleccionar el tipo de medio al que se asociará la hoja

de estilos, por ejemplo, screen (pantalla), print (impresora) o tv (webtv). Estas
opciones permitirán crear hojas de estilos para soportes diferentes. Se puede
crear una hoja para screen, que será la que se muestre cuando se navegue por
Internet, y otra para print que será la que se utilice cuando se imprima el
contenido del archivo.
Después de Aceptar, la hoja con sus estilos aparecerá en el panel CSS.
Curso: Dreamweaver
41
Conclusiones generales de la unidad:
En esta unidad el participante aprendió las generalidades de Dreamweaver,

empezando por el conocimiento de lo que es el software, cuáles son sus
requerimientos, cómo se inicia este paquete y las herramientas básicas con que
se trabajará.
Curso: Dreamweaver
42
Unidad II. Enlazar e ilustrar una página web.
El participante insertará imágenes e hipervínculos en una página, con la finalidad

de ilustrar y enlazar varios sitios web.
Introducción:
Con las imágenes el participante podrá ilustrar y decorar su página web con la
finalidad de que ésta resulte atractiva visualmente.
Los hipervínculos permitirán al participante enriquecer el sitio, aumentando la

información sin saturar en primera instancia la primera página
2.1 Hipervínculos
Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser

pulsado lleva de una página o archivo a otra página o archivo.
Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.
2.1.1 Tipos de enlaces
Existen diferentes clases de rutas de acceso a la hora de definir los vínculos.
• Referencia absoluta:
Conduce al sitio en el que se encuentra el documento utilizando la ruta

completa del archivo.
La ubicación es en Internet, por ejemplo, http://www.yahoo.com.mx, o

http://www.misitio.com/pagina/pagina1.html.
• Referencia relativa al documento:
Conduce a un documento situado dentro del mismo sitio que el

documento actual, pero partiendo del directorio en el que se encuentra
dicho documento.
Si se quiere referir a carpetas que están por encima del nivel donde nos
encontramos se deberá utilizar ../
Por ejemplo, si se está en la siguiente dirección

http://www.misitio.com/pagina/informacion/index.html. En esta página se
Curso: Dreamweaver
43
quiere mostrar una imagen que se encuentra en la carpeta

http://www.misitio.com/pagina/secciones/seccion1.html, ¿cómo se puede
hacer? Fácil. Se deberá llamar haciendo referencia al nivel superior
(http://www.misito.com/pagina/) para poder ir luego a la carpeta secciones.
El resultado de la ruta sería el siguiente: ../secciones/seccion1.html.
De esta forma, mientras nos encontramos en la carpeta información, se

sube un nivel y luego se mueve dentro de la carpeta secciones para
mostrar el archivo seccion1.html.
Referencia relativa al sitio:
Conduce a un documento situado dentro del mismo sitio que el

documento actual.
En este método los enlaces se crean indicando la ruta a partir de la raíz

del sitio.
En el ejemplo anterior si se hubiera definido como sitio la carpeta

http://www.misitio.com/, un enlace en cualquier página del sitio a
http://www.misitio.com/pagina/secciones/seccion1.html se crearía como
/pagina/secciones/seccion1.html.
Como puede verse ahora el vínculo a un archivo en todas las páginas es

igual porque se define dependiendo del sitio raíz y no de la ubicación
donde se encuentra.
• Puntos de fijación:
Conduce a un punto dentro de un documento, ya sea dentro del actual o

de otro diferente. Para ello el vínculo debe ser
nombre_de_documento.extension#nombre_de_punto.
El punto se define dentro de un documento a través del menú Insertar,

opción Anclaje con nombre.
Podríamos referenciar de este modo a un anclaje llamado parte2 de la

siguiente forma: ../secciones/seccion1.html#parte2
Estos tipos de enlace se han visto son válidos tanto para referenciar páginas
(para crear hiperenlaces) o incluso imágenes u otro tipo de objetos.
Deberá tener siempre en cuenta que los nombres de las rutas correspondan
perfectamente a los nombres de los archivos y carpetas en el servidor (local
o remoto).
Curso: Dreamweaver
44
Por ello, es muy recomendable que se utilice siempre minúsculas para evitar
fallos en los enlaces.
También se deberá evitar utilizar caracteres especiales como acentos o

espacios, así no tendrán problemas a la hora de referenciar los objetos.
2.1.2 Crear enlaces
La forma más sencilla de crear un enlace es a través del inspector de

propiedades. Para ello es necesario seleccionar el texto o el objeto que va a servir
de enlace, y en seguida establecer el Vínculo en el inspector.
Por ejemplo, aquí hay un enlace a www.elpais.es, que es de referencia absoluta,

por eso contiene HTTP://
Es posible crear también vínculos vacíos, que pueden ser útiles cuando se
utilizan comportamientos, etc. Para ello es necesario escribir en Vínculo
únicamente una almohadilla #.
Otra forma de crear un enlace es a través del menú Insertar, opción

Hipervínculo.
Ilustración 48. Hipervínculo.
Crear vínculos de esta forma es muy sencillo, sólo se rellenarán los campos que
se explica a continuación y el enlace se colocará en el lugar en el que estaba
situado el cursor.
Texto: Es el texto que mostrará el enlace.

Vínculo: Es la página a la que irá redirigido el enlace, si se trata de un enlace
externo se deberá escribirla empezando siempre por HTTP://. Clic sobre el icono
Curso: Dreamweaver
45
de carpeta para buscar los archivos que existan dentro del sitio. Por defecto
dramweaver te creará un enlace relativo al documento.
Destino: La página donde se abrirá la página.
Título: Se trata de la ayuda contextual del vínculo, es equivalente al atributo ALT

de las imágenes.
Tecla de acceso: Atributo que facilita la accesibilidad a las páginas, habilita el

acceso al enlace mediante la pulsación de la tecla Alt más la tecla de acceso
indicada.
Índice de tabulador: Como habrás podido observar puedes saltar a través de

los enlaces pulsando la tecla Tabulador. En este campo podrás establecer un
índice indicando la prioridad del enlace y así configurar el modo en el que
actuará el Tabulador es sus diferentes saltos.
2.1.3 Destino del enlace
El destino del enlace determina en qué ventana va a ser abierta la página

vinculada, puede variar dependiendo de los marcos de que disponga el
documento actual.
Puede especificarse en el inspector de propiedades a través de Dest, o en la

ventana que aparece a través del menú Insertar, opción Hipervínculo.
• blank: Abre el documento vinculado en una ventana nueva del

navegador.
• parent: Abre el documento vinculado en la ventana del marco que

contiene el vínculo o en el conjunto de marcos padre.
• self: Es la opción predeterminada. Abre el documento vinculado en el

mismo marco o ventana que el vínculo.
• _top: Abre el documento vinculado en la ventana completa del

navegador.
No se preocupe si no le queda del todo claro para qué sirven cada una de estas
opciones de destino, ya que se volverán a ver en el tema de Marcos.
Curso: Dreamweaver
46
2.1.4 Formato del enlace
En general, un texto que tiene asociado un vínculo suele aparecer subrayado. Al

mismo tiempo, puede adquirir tres colores diferentes que pueden especificarse a
través de las propiedades de la página. Estos tres colores diferentes son los que
se asignan como color de vínculo, de vínculo activo, y de vínculo visitado.
Aquí tiene un vínculo de ejemplo:
www.yahoo.com.mx
Cuando el vínculo está definido sobre una imagen, en el borde aparecen una
serie de puntitos al pulsar sobre ella. Cuando el vínculo está definido sobre una
zona de una imagen (un mapa), aparece el contorno de esa zona.
Aquí están dos vínculos similares de ejemplo:
Ilustración 49. Ejemplo de imagen con vínculo.

Como se puede ver, la segunda imagen que hace de vínculo contiene un
recuadro alrededor. Esto ocurre debido a que el campo Borde del inspector de
propiedades de la imagen vale uno (1), mientras que para la primera imagen
vale cero (0).
El campo Borde sirve para ponerle un borde a la imagen, independientemente

de si ésta va a contener un vínculo o no.
Si se pone a cero (0), no aparece ningún borde, ya que esto indica que el
tamaño de las líneas que forman el recuadro es cero (0). Puede hacerse un
recuadro más grueso incrementando el valor del campo Borde.
Curso: Dreamweaver
47
Ilustración 50. Propiedades de imagen.
Tanto si el vínculo se asigna a un texto como a una imagen, el cursor cambia de

forma al situarse encima del vínculo. Suele adquirir la apariencia de una mano
señalando.
2.1.5 Enlace a correo electrónico
Es posible especificar vínculos a direcciones de correo electrónico. Esto resulta

útil cuando se desea que los visitantes de la web puedan contactar con nosotros.
La sintaxis del vínculo en este caso es mailto:direccióndecorreo.
Puede definirse el vínculo a través de Vínculo, del inspector de propiedades,

seleccionando previamente el texto o la imagen deseados.
También es posible a través del menú Insertar, opción Vínculo de correo

electrónico.
En este caso no es posible asignar el vínculo a una imagen, solo permite introducir
el texto que contendrá el vínculo de correo.
Ilustración 51. Vínculo para correo electrónico.
Curso: Dreamweaver
48
2.2 Imágenes
En el diseño web los usos más frecuentes de las imágenes son la creación de
interfaces gráficas (botones de navegación), añadir atractivo visual (fotografías) o
incorporar elementos de diseño interactivo (imágenes de sustitución o mapa de
imagen).
Para facilitar el trabajo con imágenes, mientras se trabaja en Dreamweaver, se

selecciona el editor de imágenes habitual e iniciar automáticamente para editar las
imágenes.
2.2.1 Tipos de archivos gráficos.
Aunque existen muchos formatos de archivo gráfico, para el diseño de páginas

web se utilizan generalmente tres formatos: GIF, JPEG y PNG. GIF y JPEG son
los formatos de archivo con mayor compatibilidad y que pueden verse con la
mayoría de los navegadores.
Los archivos GIF (Graphic Interchange Format), utilizan un máximo de 256 colores
y son ideales para imágenes con tonos no continuos o imágenes con grandes
áreas de color homogéneo: barras de navegación, botones, íconos, logotipos, etc.
El formato de archivo JPEG (Joint Photographic Experts Group), puede contener

millones de colores, lo que hace ideal para imágenes fotográficas o de tonos
continuos. Si la calidad de un archivo JPEG es alta, lo será también su tamaño y
su tiempo de descarga, por lo que es necesario lograr un equilibrio entre la calidad
de la imagen y el tamaño del archivo JPEG.
El formato de archivo PNG (Portable Network Group), es compatible con imágenes

con color indexado, escala de grises y color verdadero, además de admitir
transparencias. El formato PNG conserva toda la información original de capas,
vectores, colores, efectos y permite editar todos los elementos en cualquier
momento. Es el formato de archivo nativo de Macromedia Fireworks.
2.2.2 Insertar una imagen
Cuando se inserta una imagen en un documento de Dreamweaver, se genera

automáticamente una referencia al archivo de imagen en el código HTML. Para
garantizar que la referencia es correcta, el archivo de imagen deberá estar en el
sitio actual. Si no lo está, dreamweaver preguntará si se desea copiar el archivo al
sitio.
Para insertar una imagen, se realizan las siguientes acciones:
Curso: Dreamweaver
49
Colocar el punto de inserción en el área del documento donde se desea que

aparezca la imagen y se utiliza uno de los siguientes procedimientos:
• Clic en el ícono de la barra Insertar, en la categoría Común. O

arrástrelo a la ventana de documento.
• Arrastrar una imagen desde el panel Activos hasta la posición deseada de

la ventana de documento.
Ilustración 52. Panel Activos.
• Arrastrar una imagen desde el panel Sitio hasta la posición deseada de la

ventana de documento
Ilustración 53. Panel Sitio.
Curso: Dreamweaver
50
Seleccionar el comando Imagen del menú Insertar
• En el cuadro de diálogo Seleccionar origen de imagen, marcar una de las

siguientes opciones:
Ilustración 54. Cuadro de diálogo Seleccionar origen de imagen.
o Sistema de archivos para elegir un archivo gráfico.

o Fuentes de datos para elegir una fuente de imagen dinámica.
Dreamweaver genera automáticamente una referencia al archivo de imagen en el

código HTML, tal como se muestra a continuación.
Curso: Dreamweaver
51
Ilustración 55. Ejemplo de código HTML al insertar una imagen.
2.2.3 Propiedades de las imágenes
A través del Inspector de propiedades se configuran las propiedades de una

imagen
Ilustración 56. Inspector de propiedades de una imagen.
Se pueden configurar las siguientes opciones para una imagen:
• Nombre. Escribe, en el campo de texto situado bajo la imagen en

miniatura, el nombre que la identificará al utilizar un comportamiento o un
lenguaje scripts.}
• An y Al. Indican el ancho y el alto de la imagen en pixeles.
• Origen. Especifica el archivo de origen de la imagen. Si desea modificar la

imagen haga clic en el ícono para localizar el nuevo archivo de origen o
escriba la ruta correspondiente.
• Vínculo. Indica un hipervínculo para la imagen.
• Alinear. Cuadro de lista con las opciones de alineación de una imagen con
el texto, con otra imagen, con un plug-in o con otros elementos de la misma
Curso: Dreamweaver
52
línea. También utilizar los botones de alineamiento (izquierda, derecha y

centro) para establecer el alineamiento horizontal de una imagen.
Ilustración 57. Alineación.
• Predeterminado. Valor predeterminado de alineación con la línea de base

que puede variar en función del navegador del visitante del sitio.
• Línea de base e inferior. Alinean la línea de base (del texto u otro

elemento
• Superior. Alinea la parte superior de una imagen con la parte superior del
elemento más alto (imagen o texto) de la línea actual.
• Medio. Alinea la parte central de la imagen con la línea de base de la línea

actual.
o Texto superior. Alinea la parte superior de la imagen con la parte

superior del carácter más alto de la línea de texto.
o Medio absoluta. Alinea la parte central de la imagen con la parte central
del texto de la línea actual.
o Inferior absoluta. Alinea la parte inferior de la imagen con la parte
inferior de la línea de texto (incluidos los trazos descendentes, como en
el caso de la letra p).
o Izquierda. Sitúa la imagen seleccionada en el margen izquierdo,
ajustando a la derecha el texto que la rodea. Si hay texto alineado a la
izquierda delante del objeto, los objetos alineados a la izquierda suelen
pasar a una nueva línea.
o Derecha. Sitúa la imagen en el margen derecho, ajustando a la
izquierda el texto que la rodea. Si hay texto alineado a la derecha
delante del objeto, los objetos alineados a la derecha suelen pasar a
una nueva línea.
• Alt (alternativo). Escribe el texto alternativo que aparecerá en lugar de la

imagen con los navegadores que sólo admiten texto o en aquellos que
están configurados para descargar las imágenes manualmente. En algunos
navegadores, este texto también aparece al situar el puntero sobre la
imagen.
• Espacio V y Espacio H. Añaden espacio, en pixeles, en la parte superior e

inferior de una imagen (V) o a la izquierda y la derecha de una imagen (H).
• Origen base (Origen base). Hace referencia a una versión (generalmente

de 2 bits) de la imagen principal. Se carga antes que la imagen principal y
anticipa a los visitantes lo que van a ver.
Curso: Dreamweaver
53
C
CNAD – Mecatrón
nica
• Borde. Establece
E el ancho en pixeless del bord
de de la imagen. La
L
configurac
ción predetterminada es
e sin borde
e.
• Editar. In
nicia el edittor de imág eccionando en las pre
genes sele eferencias de
d
editores externos
e y abre
a en él la
a imagen seleccionad
s da.
• Restab. tamaño
t (Restablecerr tamaño). Restaura los valoress de AN y AL
A
para restittuir el tama
año original de la imag
gen.
• Mapa, Zo onas interaactivas y Destino.

D Son opcione
es de imág
genes que se
estudiaran
n posteriorm
mente.
2
2.2.4 Camb maño de una imagen
biar el tam
Se puuede cambiiar el tamaño de la immagen manualmente en e la vista Diseño

D de la
ventana de docu umento de Dreamwea aver o a tra
avés de loss campos An
A (Ancho)) y
Alto) del Ins
Alt (A spector de propiedade
p s. Los elem
mentos de mapas
m de bits,
b como las
imágeenes GIF, JPEG y PNG, P puede
en distorsionarse al aumentar o reducir su
tamañño.
Dentrro de Dreammweaver puede

p modificarse el tamaño de e las imáge enes. Dicho
o
cambio de tama año no se aplica
a direcctamente sobre
s el arcchivo de im
magen, sino
o
que lo
o que varía es la visua
alización dee la imagen dentro de la página.
Es muy
m probab
ble que la imagen resultante
r no sea dee buena calidad,
c en
n
comparación dee cómo podría queda
ar modificáándola desd
de un edittor externo,
como Fireworks..
Por ejjemplo, verr lo que ocurre si se inserta una imagen quue represen nta el icono
o
de Drreamweave er y se modifica su tammaño de varrias formass diferentes:
Imagen orriginal Imagen con

c tamaño
o modificado
Puedee apreciars
se claramennte que los resultados no son mu uy satisfacto
orios, pero
en ocasiones puuede resulta
ar útil modifficar el tama
año de algu
unas imáge enes
aunquue esto imp
plique perde
er calidad.
Curso: Dreamwea
C aver
I
54
C
CNAD – Mecatrón
nica
Existe
en dos form
mas de mod
dificar el tam
maño.
Una de
d ellas es s, una vezz seleccion
nada la imagen, arra
astrar con el puntero
o
alguno de los recuadros negros que aparecen alrededor
a d la imagen.
de
La otra es a traavés de inspector dee propieda

ades, cambiando los campos An A
(anchura) o Al (altura). Esstos campo
os aparece
erán en el inspector cuando essté
selecccionada alg
guna image
en.
Si esstos campo os no con ntienen el tamaño original

o de la imagen
n, el valorr
apare grita y aparrecerá a la derecha una
ecerá resalttado en neg u flecha circular
c que
e
permite volver all tamaño orriginal hacie

endo clic so
obre ella.
Puedeen crearse vínculos y comportam

mientos sob
bre partes de una ima
agen, sin la
a
necessidad de que sea sobre toda ella.
e A estoo se le connoce comoo mapa de e
imageen.
2
2.2.5 Mapa
as de imag
gen
Los mapas
m de im
magen son partes de una imagen
n que pued
den ser utilizadas para
a
asigna
arle algún tipo
t de com
mportamientto.
Para crear un mapa

m de imaagen es neecesario seleccionar previamente
p e la imagen
n
en la que se des
sea crear el mapa, y abrir
a el insp
pector de propiedade
p es de dicha
a
imageen.
Ilu
ustración 58. Inspector
I de propiedades.
p
Estan
ndo seleccio
onada la im
magen, ya es posible
e crear un mapa a tra avés de loss
botones del insp
pector de propiedade
p es que tiene
en el siguie
ente aspectto:
. Si
S no aparrece despliegue el panel
p Prop
piedades para verlo
o
completo.
Curso: Dreamwea
C aver
I
55
Los tres últimos botones son los que se utilizan para crear los mapas. Dichos
mapas pueden tener forma rectangular, circular, o libre, dependiendo del botón
pulsado.
Al pulsar alguno de estos tres botones, cambia la apariencia del puntero al

situarlo sobre la imagen. Entonces ya es posible dibujar el mapa sobre la
imagen, pulsando sobre los lugares donde se desea que comience y finalice el
mapa, así como sobre el resto de lugares (en orden) que se desea que recorra el
mapa en el caso de forma libre.
Ilustración 59. Ejemplo de mapa de imagen.
Al estar seleccionado un mapa el inspector de propiedades cambia. Permite

asignar un vínculo y un texto alternativo a ese mapa como puedes ver a
continuación:
Ilustración 60. Propiedades de mapa de imagen.
El primero de los botones, el de la flecha, debe pulsarse al finalizar la creación de

un mapa, para que el puntero recupere su forma original al situarse sobre una
imagen. De este modo, es posible mover los puntos del mapa, en el caso de que
no hayan sido creados en los sitios deseados, para ajustarlos mejor a la imagen.
2.2.6 Imagen de sustitución
Un rollover es una imagen que cambia por otra cuando el puntero se sitúa sobre
ella. Este tipo de imagen suele utilizarse en los menús o en los botones para
desplazarnos a través de distintas páginas.
Curso: Dreamweaver
56
Para insertar un rollover hay que dirigirse al menú Insertar, Objetos de Imagen,
a la opción Imagen de sustitución. En la nueva ventana hay que especificar la
imagen original y la de sustitución.
Ilustración 61. Insertar imagen de sustitución.
Es preferible que la opción Carga previa de imagen de sustitución esté activa.

Si se activa, la imagen de sustitución se carga cuando se carga la página, de
este modo se evitan las demoras debidas a la descarga de la imagen cuando
llega el momento de que aparezca.
El Texto alternativo es el texto que aparece al situar el puntero sobre una

imagen, o el que aparecerá en lugar de la imagen en el caso de que por algún
motivo ésta no pueda ser mostrada en el navegador.
El texto alternativo puede asignarse a todas las imágenes, no sólo a los

rollovers. Puede hacerse a través del campo Alt del inspector de propiedades
de la imagen seleccionada.
2.2.7 Insertar Botones de Flash
Existen otra serie de imágenes especiales, similares a los rollovers, que suelen
utilizarse para crear menús, como pueden ser los botones Flash.
Para insertar un botón Flash hay que dirigirse al menú Insertar, Media, a la
opción Botón Flash, aparecerá el siguiente cuadro de diálogo:
Curso: Dreamweaver
57
Ilustración 62. Insertar botón de Flash.
A través de Estilo: puede seleccionarse uno de los distintos formatos de botón

que se ofrecen.
En esta misma ventana hay que especificar también el Texto que mostrará el
botón (Texto del botón:), así como el nombre con el que será guardado
(Guardar como:) y el vínculo asociado (Vinculo: y Destino:).
Es preferible guardar los botones Flash en el mismo directorio que los

documentos HTML, en lugar de la carpeta destinada a almacenar imágenes, ya
que de no ser así es posible que al intentar asignar un vínculo dentro del propio
sitio, Dreamweaver no permita guardar el botón con ese vínculo en una
ubicación diferente de la de dicho documento.
Recordar que los botones deben guardarse con la extensión SWF.
A través del inspector de propiedades del botón Flash es posible editar de nuevo
sus atributos:
Curso: Dreamweaver
58
C
CNAD – Mecatrón
nica
Ilustración
n 63. Panel dee propiedades del botón de Flash.
F
Puedee volver a abrirse el cuadro de e diálogo anterior

a pulssando sobre el botón
n
Editar, y a travé
és del botón
n Reproduucir es posiible probar el funciona
amiento de
el
botón Flash des sde Dreamw weaver, sin
n la necesid
dad de tener que abrir la página
a
con algún naveg gador.
Despu
ués de habber probado
o el funcion
namiento de
el botón Fla
ash, debe pulsarse
p de
e
nuevo
o sobre el botón Repproducir (que habrá cambiado
c p el botón Detener))
por
.
2
2.2.8 Inserrtar texto de
d Flash
El texxto Flash es similar a un rollove

er, pero en lugar de in
ntercambiar imágeness
intercambia el coolor del textto.
exto Flash hay que dirrigirse al menú Insertar, Media, a la opción

Para insertar te n
o Flash.
Texto
En la nueva venntana, ademmás del texxto, el vínculo y el nombre con el e que será
á
guard
dado el texto, hay que especificarr el color orriginal y el de
d sustitución.
Curso: Dreamwea
C aver
I
59
Ilustración 64. Insertar texto de Flash.
El inspector de propiedades del texto Flash es igual que el de un botón Flash.
Una barra de navegación es un conjunto de imágenes que se utilizan como

opciones de menú para navegar dentro de una web. Una página web solo puede
contener una única barra de navegación.
Para insertar una barra de navegación hay que dirigirse al menú Insertar,
Objetos de imagen, a la opción Barra de navegación.
En la nueva ventana pueden especificarse cuatro imágenes diferentes para cada

uno de los botones, el vínculo para cada uno de ellos, etc.
Curso: Dreamweaver
60
Ilustración 65. Insertar barra de navegación.
A través de los botones superiores de la ventana es posible crear y eliminar

botones de la barra de navegación, así como reordenarlos. Con se crea un
botón nuevo, con se elimina el botón seleccionado, y con se puede
modificar la posición del botón seleccionado.
En Imagen Arriba se pone la imagen que se quiere mostrar inicialmente

(cuando todavía no se ha hecho clic).
En Sobre imagen, se pone la imagen que se quiere mostrar, cuando el usuario

mueva el puntero sobre el botón y éste estaba mostrando la imagen asignada en
Imagen Arriba.
En Imagen abajo, se pone la imagen que se quiere mostrar después de que el

usuario haya hecho clic en la imagen.
En Sobre mientras imagen abajo, se pone la imagen que se quiere mostrar,

cuando el usuario mueva el puntero sobre el botón y éste estaba
mostrando la imagen asignada en Imagen Abajo.
Curso: Dreamweaver
61
De esta forma, si se asignan imágenes distintas se puede saber cuál es el último

botón que ha sido pulsado (el que tiene Imagen Abajo).
El que existan cuatro imágenes diferentes sirve para identificar cual de los
vínculos está activo, cosa que con un simple rollover no puede hacerse.
A través de la opción Insertar es posible especificar si los botones de la barra de

navegación van a aparecer de forma horizontal o vertical dentro de la página.
En esta unidad el participante aprendió qué es un vínculo, su empleo y la creación

de estos utilizando textos, imágenes y partes de una imagen (mapa de imágenes);
así como crear algunas imágenes especiales, como es el caso de los rollovers, los
botones flash y la barra de navegación, las cuales ayudan a mejorar la apariencia
de las páginas.
Curso: Dreamweaver
62
Unidad III. Formas de ordenar la información.
El participante insertará tablas y marcos, utilizando las herramientas de

Dreamweaver, con la finalidad de ordenar la información en una página web.
Introducción:
El manejo de estas dos herramientas como son las tablas y los marcos, son
fundamentales para la elaboración de una página web, ya que es de suma
importancia la forma de publicar la información, y ésta deberá de estar en forma
ordenada para que el panorama de los visitantes sea ágil, claro y sencillo.
3.1 Tablas
Las tablas son uno de los elementos más utilizados al desarrollar una página web,
ya que permiten realizar un mejor ordenamiento del contenido de nuestro sitio.
Una tabla permite colocar los datos de forma sencilla e intuitiva, es decir,
organizados en filas y columnas. Estas filas y columnas crean recuadros
denominados celdas. Cada celda de una tabla es un contenedor de contenidos:
imágenes, texto, vínculos, formularios, es decir, cualquier elemento que pueda
encontrarse en una página web.
Ilustración 66. Ejemplo de tabla.
Una vez insertada una tabla en una página se pueden modificar muchas de sus
propiedades utilizando el Inspector de propiedades: el ancho de las columnas,
añadir más filas y columnas o borrarlas, moverlas, añadir los bordes de las celdas,
añadir sombreados, modificar el tamaño, etcétera.
Podrá, entre otras cosas, insertar tablas, combinar celdas, insertar filas o
columnas y cambiar el tamaño del borde.
Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero
gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al
lado de un bloque de texto, y otra serie de cosas que sin las tablas sería imposible
realizar.
Hoy en día, la mayoría de las páginas web se basan en tablas, ya que resultan de
gran utilidad al mejorar notablemente las opciones de diseño.
Curso: Dreamweaver
63
Las tablas están formadas por un conjunto de celdas, distribuidas en filas y

columnas.
3.1.1 Insertar una tabla
Para insertar una tabla se selecciona el menú Insertar, la opción Tabla.
Ilustración 67. Menú para insertar una tabla.
En la nueva ventana habrá que especificar el número de Filas y Columnas que

tendrá la tabla, así como el Ancho.
Ilustración 68. Ventana para indicar las características de la tabla.
• El Ancho puede ser definido como Pixeles o como Porcentaje. La

diferencia de uno y otro es que el ancho en Pixeles es siempre el mismo,
independientemente del tamaño de la ventana del navegador en la que se
visualice la página, en cambio, el ancho en Porcentaje indica el porcentaje
que va a ocupar la tabla dentro de la página y se ajustará al tamaño de la
Curso: Dreamweaver
64
ventana del navegador, esto permite que los usuarios que tengan pantallas
grandes, aprovechen todo el ancho de pantalla.
• Grosor del borde indica el grosor del borde de la tabla en pixeles, por
defecto se le asigna 1.
• Relleno de celda indica la distancia entre el contenido de las celdas y los

bordes de éstas.
• Espacio entre celdas indica la distancia entre las celdas de la tabla.
También se puede establecer un encabezado para la tabla. Es recomendable

utilizar encabezados en el caso de que los usuarios utilicen lectores de pantalla.
Los lectores de pantalla leen los encabezados de tabla y ayudan a los usuarios de
los mismos a mantener un seguimiento de la información de la tabla.
Si se quieres incluir un título, se indica en Texto: el título aparecerá fuera de la

tabla.
En Alinear texto: indica dónde quiere alinear el título con respecto a la tabla.
3.1.2 Rellenar las celdas
Las celdas son cada uno de los recuadros que forman una tabla, resultan de la
intersección entre una fila y una columna.
Ilustración 69. Tabla con contenido y formato.
Para poder insertar algún elemento en una celda, ya sea texto o imágenes
simplemente hay que situar el cursor en la celda deseada.
3.1.3 Seleccionar elementos de una tabla
Existen varias formas de seleccionar una tabla. Una es con el menú Modificar
estando en el cursor en la tabla. O desplegando el menú contextual de la tabla al
pulsar el botón derecho sobre ella. En ambos casos, aparece la opción Tabla, en
la cual puede elegir la opción Seleccionar tabla.
Curso: Dreamweaver
65
Ilustración 70. Opción que permite seleccionar una tabla.
También es posible seleccionar una tabla pulsando con el ratón sobre el borde
que la rodea, o pulsando sobre la etiqueta <table> que aparece en la barra de
estado de la ventana de documento.
Ilustración 71. Etiqueta de una tabla.
Como novedad muy útil para trabajar con tablas, Dreamweaver 8, incorpora la
opción Anchos de tabla. Cuando se selecciona una tabla o cuando se coloca el
cursor sobre cualquier parte de la tabla. Dreamweaver muestra en una zona verde
el ancho de la tabla y de cada columna. Junto a los anchos se encuentran el menú
de encabezado de la tabla y el de encabezado de la columna. Estos menús
permiten acceder rápidamente a determinados comandos relacionados con la
tabla.
Curso: Dreamweaver
66
Ilustración 72. Menús que permiten acceder rápidamente a la tabla.
Si tiene el cursor en la tabla y no aparece esa zona verde, se puede activar su

visualización seleccionando la opción Anchos de tablas del menú Tablas o
también desplegando de la barra de menús, el menú Ver, Ayudas visuales,
Anchos de tabla. De la misma forma se desactiva su visualización.
Si no aparece el ancho de la tabla o de una columna, la tabla o la columna no

tiene un ancho especificado, si aparecen dos números, el primero corresponde al
ancho especificado en las propiedades de la tabla o columna y el segundo es el
ancho visual que aparece en la vista de diseño.
Cuando ocurren diferencias se puede hacer que el código (propiedades) se

cambie el ancho por el real, para ello sólo se tiene que seleccionar la opción
Igualar todos los anchos del menú desplegable encabezado de tabla.
En este menú se ve que también existe la opción Seleccionar tabla.
No siempre se desea seleccionar toda una tabla, en ocasiones se desea

seleccionar filas, columnas o celdas.
Pueden seleccionarse una fila o columna de varias formas, lo mejor es que se

prueben las distintas formas y elegir la que más guste. Éstas son las formas de
selección:
• Utilizar la opción Seleccionar columna del menú Encabezados de columna

(zona verde de anchos), esto sólo es válido para seleccionar una columna.
• Manteniendo pulsado y arrastrando el ratón hasta seleccionar las columnas

o filas completamente.
Curso: Dreamweaver
67
• También puede hacerse situando el cursor junto al borde superior o

izquierdo de la columna o fila respectivamente, de modo que el cursor
cambia a la forma de una flecha negra. Al hacer clic se selecciona la
columna o fila a la que apunta la flecha.
• Para seleccionar una fila, se posiciona el cursor en cualquier sitio de la fila y

sobre la etiqueta <tr> de la barra de estado o sobre la etiqueta <td> para
seleccionar la columna.
• Para seleccionar varias celdas contiguas, basta con mantener pulsado el

ratón mientras arrastra sobre las celdas deseadas.
• Para seleccionar una sola celda o varias celdas no contiguas, se mantiene

pulsada la tecla <Ctrl> mientras se hace clic sobre las celdas.
3.1.4 Formato de tabla
Las propiedades de la tabla se especifican a través de su Inspector de

propiedades.
Ilustración 73. Ventana del Inspector de propiedades.
A través del Inspector de propiedades se pueden modificar los valores que se

especificaron al insertar la tabla. Al mismo tiempo, pueden indicarse otros como el
valor Alinear (que permite alinear la tabla a la izquierda, al centro o a la derecha),
el Color de fondo o de borde de la tabla, o la imagen de fondo.
Si lo que se selecciona es una celda, o un conjunto de celdas, el Inspector de

propiedades cambia, para permitir especificar otros valores.
Ilustración 74. Ventana del Inspector de propiedades de una celda.
La parte superior del Inspector de propiedades en este caso sirve para especificar
las propiedades del texto que se insertará dentro de las celdas seleccionadas.
Curso: Dreamweaver
68
La parte inferior sirve para especificar valores propios de la celda, como puede ser
el Color o imagen de fondo (diferentes de los especificados para la tabla global), el
color del borde de la celda, etc.
Dos opciones que posiblemente necesiten utilizarce con frecuencia serán Horiz y
Vert, que definen la alineación del contenido de la celda de forma horizontal
vertical respectivamente.
3.1.5 Cambiar tamaño de tabla
El tamaño de la tabla a través del Inspector de propiedades estará especificado

por los valores de An (anchura) y Al (Altura). Normalmente sólo se especifica la
anchura, no la altura.
Ilustración 75. Ventana de propiedades que permite cambiar el ancho.
Los valores An y Al de una celda siempre están en Pixeles. No es necesario

especificar ninguno de estos dos valores para las celdas, a no ser que se desee
que se mantenga obligatoriamente ese tamaño, y no que se ajusten al contenido o
al tamaño, de la ventana.
No sólo puede establecerse el tamaño de las tablas y de las celdas a través del
Inspector de propiedades. También es posible hacerlo manteniendo pulsado el
ratón sobre alguno de los bordes, arrastrándolo hacia la posición deseada.
3.1.6 Añadir y eliminar filas y columnas.
Existen varias formas de añadir filas y columnas a una tabla.
Lo primero que se debe hacer es, estando el cursor en una celda o seleccionando
varias, desplegar el menú contextual de la tabla al pulsar con el botón derecho
sobre ella, o bien abrir el menú Modificar. En ambos casos aparece la opción
tabla.
Según las celdas seleccionadas, algunas de las opciones de Tabla se podrán

utilizar mientras que otras no.
Para insertar una fila o una columna, hay que pulsar sobre las opciones Insertar
fila o insertar columna. La fila se inserta sobre la celda o el conjunto de celdas
seleccionadas, mientras que la columna se inserta a su izquierda.
Curso: Dreamweaver
69
Ilustración 76. Menú para insertar una fila o columna.
Existe una opción más completa, la opción Insertar filas o columnas. Al

seleccionarla aparece una nueva ventana, donde es posible determinar si lo que
se insertarán serán filas o columnas, el número de ellas que se insertarán y la
posición donde se insertarán.
Ilustración 77. Ventana para insertar filas.
Ilustración 78. Ventana para insertar columnas.
Curso: Dreamweaver
70
Para eliminar una fila o una columna, hay que posicionar el cursor en la fila o
columna a eliminar y elegir la opción Eliminar fila o Eliminar columna del menú
Tabla.
Ilustración 79. Menú que permite eliminar una fila o una columna.
También se puede seleccionar la fila o columna a borrar y pulsar la tecla de

borrado <Supr>.
3.1.7 Anidar, dividir y combinar celdas
Es posible insertar tablas dentro de las celdas de otras tablas. A esto se le llama
anidar tablas.
Ilustración 80. Tabla anidada.
Para anidar tablas sólo tiene que posicionar el cursor en la celda donde quiera
insertar la nueva tabla e insertarla como ya se ha visto.
Combinar celdas consiste en convertir 2 o más celdas en una sola por lo que
dejará de haber borde de separación entre una celda y otra ya que serán una sola.
Esto puede servir por ejemplo para utilizar la primera fila al escribir el título de la
tabla. En este caso habría que combinar todas las celdas de la primera fila en una
sola.
Mientras que dividir celdas consiste en partir en dos una celda.
Una de las formas de dividir y combinar celdas es a través del Inspector de

propiedades.
Ilustración 81. Ventana para seleccionar los botones de dividir y combinar celdas.
Curso: Dreamweaver
71
Si se seleccionan varias celdas pueden combinarse pulsando el botón del

Inspector de propiedades, o pulsando sobre la opción Combinar celdas de la
opción Tabla, que como se ha visto puede dirigirse a ella a través del menú
contextual de la tabla y a través del menú Modificar.
Se debe tener en cuenta que sólo es posible combinar celdas contiguas, lo que
puede dar como resultado otra celda, es decir, que su combinación dé como
resultado un recuadro.
Para dividir una celda hay que pulsar sobre el botón del Inspector de propiedades,
o sobre la opción Dividir celda de la opción tabla.
En ambos casos aparece una ventana como la siguiente, en la que hay que
especificar si la celda se va a dividir en filas o columnas, y el número de éstas.
Ilustración 82. Ventana para dividir filas o columnas.
Modos de tabla.
A la hora de trabajar con tablas, Dreamweaver nos proporciona distintos modos de

visualización. Hasta ahora se ha trabajado a lo largo de tema con el modo
estándar, pero se puede pasar a los otros modos a través del menú Ver opción
Modo de tabla. Dentro de esta opción se puede elegir entre Modo estándar, Modo
de tablas expandidas o Modo de diseño.
Curso: Dreamweaver
72
Ilustración 83. Menú que permite cambiar el modo de tabla.
El Modo de diseño. Se utiliza para dibujar páginas con un diseño determinado,

basándose en tablas. Utilizando esta vista, las tablas no han de insertarse
obligatoriamente en líneas de texto, como se ha hecho hasta el momento, sino
que es posible insertarlas en cualquier punto de la página, y Dreamweaver se
encargará de rellenar el espacio vacío, para que sea posible que la tabla aparezca
en esa posición.
El Modo de tablas expandidas añade temporalmente relleno y espaciado de celda

a las tablas de un documento y aumenta los bordes de las tablas para facilitar la
edición. Este modo se puede utilizar para seleccionar elementos de las tablas o
colocar el punto de inserción de forma precisa pero en este modo se ve la página
como quedará exactamente.
3.2. Marcos
Los marcos (en inglés frames), son estructuras dinámicas que permiten la
organización de la información de una página web. Muestran, en una misma
ventana, varias páginas web. Así cada página se dividirá en la práctica en varias
páginas independientes o áreas que reciben el nombre de marcos. Por ejemplo
una página puede mostrar información cambiante, y otra información estática
para servir de índice y facilitar la navegación del usuario dentro de un sitio web.
Curso: Dreamweaver
73
Ilustración 84. Estructura de los marcos.
Los marcos sirven para distribuir mejor los datos de las páginas, ya que permiten
mantener fijas algunas partes, como pueden ser el logotipo y la barra de
navegación, mientras que otras sí pueden cambiar. Además de mejorar la
funcionalidad, pueden mejorar también la apariencia.
Cada uno de los marcos de una página, contiene un documento HTML

individual. Por ejemplo, en la imagen superior puede ver una página con tres
marcos. El marco izquierdo contiene el documento menu.html y el derecho el
documento contenido.html, y el marco Top.html, que sería donde se pondría el
título. Para poder visualizar la página de este modo, se ha tenido que abrir en el
navegador el documento marcos.html, que es la página que contiene los
marcos agrupados.
Es posible editar los documentos contenidos en los marcos desde la página que
contiene el grupo de marcos. Esto facilita el trabajo, ya que es más fácil hacerse
una idea de cómo quedará la página al final, cosa que no es posible si se editan
individualmente cada uno de los documentos que contiene el marco.
El trabajar con marcos puede resultar una tarea algo complicada, sobre todo al
principio, por lo que no se profundizará mucho en el tema, y se verá solamente
algunos conceptos básicos y ejemplos sencillos.
3.2.1 Crear marcos
Existen varias formas de crear un marco. Nosotros vamos a ver solamente una
de ellas.
Para crear un marco, primero hay que abrir algún documento. Puede ser uno
nuevo o uno ya existente.
Curso: Dreamweaver
74
C
CNAD – Mecatrón
nica
Despu
ués, dirigirs
se al menúú Insertar, HTML, Marcos. A través
t de esta
e opción
n
puede e tipo de marco que va
e elegirse el a ha crearsse.
Ilusttración 85. Menú para creaar marcos.
Marco
o a la Izquierda.
Si se
e pulsa sobre Izquie
erda se cre
eará un nuevo marcco a la izq
quierda de
el
docum
mento actua
al.
I
Ilustración 866. Marco a la izquierda.
i
Como o se puede ver en la im

magen, apaarece una línea que divide el doccumento en
n
dos. El
E documen nto de partid
da era uno nuevo.
En esste caso tenndrán tres documento os: el de la izquierda, el de la de

erecha, y el
e
que contiene
c el grupo
g de marcos.
m El de
d la derech ha es el do
ocumento que se tenía a
inicialmente, que
e está en ell marco con
nocido com mo marco padre
p (MainnFrame).
Curso: Dreamwea
C aver
I
75
Para seleccionar el documento que contiene el grupo de marcos hay que pulsar
sobre la línea que separa los marcos. Esto solo es posible mientras dicho
documento no se haya guardado.
Si en lugar de insertar un marco a la izquierda se inserta a la Derecha, el marco

vacío aparecerá a la derecha del documento original.
En la imagen siguiente se puede ver un ejemplo de marco a la derecha.
Ilustración 87. Marco a la derecha.
Sobre un documento ya existente, menu.html, se ha insertado un marco a la

derecha.
Al igual que en el caso anterior, se tienen tres documentos: el de la izquierda, el

de la derecha, y el que contiene el grupo de marcos. En este caso, el documento
que se tenía inicialmente es el de la izquierda, mientras que antes era el de la
derecha. Por ello, en este caso el marco padre será el de la izquierda.
El marco padre siempre es el marco en el que se encuentra el documento inicial,

sobre el que se han insertado el resto de marcos.
3.2.2 Seleccionar marcos
Para seleccionar los marcos del documento es necesario dirigirse al panel Marcos,
que puede abrirse a través del menú Ventana. Si la opción Marcos no aparece
directamente en este menú, posiblemente esté dentro de la opción Otros. También
se puede abrir el panel Marcos pulsando la combinación de teclas Mayús+F2.
En el panel Marcos aparecen los marcos que contiene el documento de marcos,

y se puede pasar de uno a otro pulsando sobre ellos en el panel. También puede
seleccionarse la página de marcos pulsando sobre el borde que rodea a los
marcos (el que aparece más grueso y en relieve en la imagen).
Curso: Dreamweaver
76
No es necesario seleccionar los marcos para editar los documentos que éstos
contengan.
Sí es necesario seleccionar los marcos para especificar las propiedades

específicas de cada uno de ellos.
Ilustración 88. Ejemplos del inspector de marcos.
3.2.3 Guardar marcos
Todos los documentos que contienen marcos tienen que tener una página en
cada uno de ellos. Es por esto que al crear algún marco, se cargan páginas
nuevas por defecto en cada uno de ellos, a excepción del marco que contiene la
página original.
Estas páginas nuevas pueden ser posteriormente sustituidas por otras ya

existentes, como se verá más adelante.
Es necesario guardar la página que contiene el grupo de marcos, así como cada
una de las páginas que están incluidas en sus marcos.
Curso: Dreamweaver
77
No es conveniente guardar la primera vez los marcos con la opción Guardar

todo, ya que existe la posibilidades equivocarse al dar los nombres a los nuevos
documentos.
Es preferible guardar cada documento uno por uno, a no ser que todos los
marcos contengan alguna página ya existente, ya que en ese caso el único
documento al que habrá que dar nombre será al que contiene el grupo de
marcos.
Para guardar el documento que contiene el grupo de marcos, hay que

seleccionarlo previamente.
Para guardar cada uno de los otros documentos, simplemente hay que situar el
cursor en ellos antes de pulsar sobre Guardar.
3.2.4 Configurar marcos
Una vez seleccionado un marco a través del panel Marcos, pueden establecerse
sus propiedades a través del inspector de propiedades.
Ilustración 89. Inspector de propiedades de un marco.
Cada marco tiene asignado un nombre, que puede cambiarse a través de

Nombre de marco. El nombre no puede contener espacios en blanco.
En Origen aparece el nombre del documento HTML que está contenido en el

marco.
En Bordes puede elegirse si aparecerá o no una línea separando el marco del

resto de marcos. En el caso de que se muestre el borde, se puede especificar un
color para éste a través de Color borde.
Desplaz. Indica si aparecerán o no las barras de desplazamiento cuando el

documento del marco no pueda visualizarse completamente.
Si la opción Mismo tamaño está activa, indica que los usuarios no podrán variar
las medidas del marco desde el navegador.
El Ancho del margen y el Alto del margen indican la separación que habrá
entre el contenido del marco y sus bordes izquierdo-derecho y superior-inferior.
Curso: Dreamweaver
78
Si lo seleccionado es todo el conjunto de marcos (la página de marcos), el

inspector de propiedades es algo diferente.
Ilustración 90. Bordes de un marco desde el Inspector de propiedades.
En Bordes puede elegirse si aparecerá o no una línea separando los marcos

entre sí y puede especificarse un color para éste a través de Color del borde.
También es posible establecer un grosor para el borde a través de Ancho.
El campo Columna (o Fila dependiendo del marco elegido en Selección Fila

Col.) sirve para especificar el tamaño del marco, que puede ser en Píxeles,
Porcentaje (de la ventana) o Relativo (proporcional al resto de marcos).
Normalmente se utilizarán dos marcos, uno de ellos con tamaño en Píxeles, que
será el que contenga la barra de navegación, y el otro marco con tamaño
Relativo, para que se ajuste a la ventana del navegante.
3.2.5 Contenido del marco
Como se ha visto, el contenido de un marco puede establecerse a través del

campo Origen del inspector de propiedades.
Ilustración 91. Inspector de propiedades de un marco.
Cuando se trabaja con marcos, se pueden cargar diferentes documentos en

cada uno de ellos. El contenido de alguno de los marcos ha de ser fijo, mientras
que el de otros ha de poder variar.
A través del campo Origen del inspector de propiedades, sólo es posible

especificar el documento que se cargará inicialmente en el marco, pero se puede
cambiar este documento por otro a través de vínculos.
Como se recordará, en el tema de hipervínculos se vieron los posibles destinos

de los enlaces. Estos destinos podían ser _blank, _parent, _self, y _top. Se
recordará para que serviría cada uno de ellos, ya que ahora que ya se sabe
trabajar con marcos será más fáciles de entender.
Curso: Dreamweaver
79
• Blank: Abre el documento vinculado en una ventana nueva del

navegador.
• Parent: Abre el documento vinculado en la ventana del marco que

contiene el vínculo o en el conjunto de marcos padre. Como ya se sabe,
el marco padre es el marco en el que se encuentra el documento inicial,
sobre el que se han insertado el resto de marcos.
• Self: Es la opción predeterminada. Abre el documento vinculado en el

mismo marco o ventana que el vínculo.
• Top: Abre el documento vinculado en la ventana completa del navegador,

lo cual quiere decir que los marcos de la ventana desaparecerán al abrir el
vínculo en ella.
Además de estos destinos para los enlaces, también aparecerán los nombres de
los distintos marcos de la página.
Se pueden añadir todos estos destinos a cualquier elemento de la página que

contenga algún enlace, ya sea texto, una imagen, un mapa de imagen, un
elemento Flash, etc.
Gracias a todo esto se podrá hacer que las barras de navegación y el resto de
enlaces funcionen a nuestro antojo, cargando unas u otras páginas en alguno de
los marcos, en una ventana nueva, en toda la ventana, etc.
Esta tarea puede resultar algo pesada, y al principio complicada, pero da muy
buenos resultados finales.

En esta unidad el participante aprendió a crear tablas, dividiendo, combinando o
anidando celdas con la finalidad de agrupar la información. Así como la creación
de marcos con el objeto de integrar distintas páginas en un sola, utilizando el
conjunto de marcos predefinidos.
Curso: Dreamweaver
80
Unidad IV. Creación de formularios y Plantillas
Los participantes crearán formularios y plantillas con la finalidad de manipular la

información en una página web.
Introducción:
En este capítulo los participantes tendrán la oportunidad de generar los campos

primordiales de un formulario con la finalidad de que sea el principio de la
manipulación del manejo de bases de datos.
Respecto al tema de las plantillas es necesario saber trabajar con ellas para
minimizar tiempos y generar una uniformidad en el formato de nuestro trabajo.
4.1 Formularios
Una de las características más importantes de la web es la posibilidad de recibir

información proporcionada por los usuarios, es decir, dotar de interactividad a las
páginas. Utilizando formularios se pueden pedir ciertos datos a los usuarios y, en
función de lo que respondan, efectuar determinadas acciones.
Ilustración 92. Ejemplo de un formulario.
Un formulario puede estar compuesto por los campos o controles principales

utilizados en Windows: campos de texto, campos de contraseña, campos de texto
multilínea, menús emergentes, listas desplegables, botones de radio, casillas de
verificación y botones, así como de las etiquetas necesarias para estructuras el
formulario y controlar su presentación. También será necesario programar
(utilizando un lenguaje de programación, JavaScript, VBScript, etc.) la tarea que
debe ejecutar.
En esta unidad sólo aprenderemos a diseñar formularios y adjuntar aquellas

acciones, comportamientos de Dreamweaver, que introducen en los documentos
Curso: Dreamweaver
81
el código JavaScript que permite a los visitantes interactuar con la página web sin
tener conocimientos de programación, pues exceden la finalidad de esta antología.
4.1.1 Añadir un formulario
Para añadir un formulario a una página web, realizar los pasos siguientes:
• Situar el punto de inserción en la posición donde se desea insertar el formulario.
• Hacer clic en el botón Formulario del panel Formularios de la barra Insertar o

elegir el comando Formulario del menú Insertar.
Ilustración 93. Opción para crear un formulario
• En la ventana de Diseño, se distingue el área del formulario por una línea

delimitadora de guiones rojos.
Ilustración 94. Muestra de la línea punteada indicando que es un formulario.
Curso: Dreamweaver
82
4.1.2 Propiedades de un formulario
Una vez insertada la estructura básica para el formulario, se puede configurar sus
propiedades utilizando el Inspector de propiedades.
Ilustración 95. Inspector de propiedades de un formulario.
• Nombre del formulario. Escribe el nombre del formulario en el cuadro de

texto. No es significativo a no ser que se deba hacer referencia a él en la
programación de un script.
• Acción. El valor de esta propiedad suele ser la dirección (URL) de un programa

que procese los datos que el usuario haya escrito en el formulario. Escribir la
dirección o hacer clic en el botón de carpeta para seleccionarlo. Por ejemplo:
para llamar a un JavaScript: javascript:nombre_funcion() o para enviar los
datos por correo electrónico: mailto:dirección de correo electrónico.
• Método. Indica la manera en que los datos se transfieren al servicio web. Elige
el método POST o el método GET. El método POST envía los datos en el
cuerpo del mensaje y el método GET concatena los datos del formulario a la
URL donde deben enviarse.
No se deberá utilizar el método GET con formularios con contenidos largos. Los
URL están limitados a 8.192 caracteres. Si los datos enviados superan dicha
longitud, la información se trunca dando lugar a resultados imprevistos. Tampoco
se debe utilizar GET con números de tarjeta de crédito u otra información
confidencial, ya que este método de transferencia de información no es seguro.
4.1.3 Añadir campos a un formulario.
Una vez que se ha insertado un formulario en la página, se añadirán los campos

que permitan al usuario introducir los datos. En los siguientes apartados se
describen las operaciones básicas en el diseño de los componentes de un
formulario.
Curso: Dreamweaver
83
Campos de texto
Permiten al usuario dar una respuesta escribiendo texto. Dreamweaver ofrece tres
tipos de campos de texto:
Ilustración 96. Inspector de propiedades de un Campo de texto.
• Texto de una línea. Sólo permiten escribir en una línea

• Texto de varias líneas. Proporcionan mayor espacio al visitante para escribir
la respuesta solicitada.
• Contraseña. Es un tipo especial de campos de texto que al escribir texto se
sustituye por asteriscos o viñetas para que quede oculto y evitar así que otra
persona pueda ver la información.
• Tipo. Esta propiedad de un campo de texto determina si el usuario podrá
escribir Una línea, Varias líneas (se activará automáticamente si insertas un
campo Área de texto) o una contraseña.
• Campo de texto. Asigna un nombre al campo. Todos los campos de texto
deben tener un nombre exclusivo que es obligatorio asignar, y permite referirse
o identificar cada dato que el usuario teclea en un cuadro de texto.
• Ancho car. Establece el número máximo de caracteres que se pueden mostrar
en el campo. Este número puede ser menor que Car máx, que especifica el
número máximo de caracteres que se pueden escribir en el campo.
• Car máx/Líneas núm. Permite indicar el número máximo de caracteres que se
puede introducir en campos de texto de una línea y establece la altura de
campos de texto de múltiples líneas. Por ejemplo, utilizar esta propiedad para
limitar los códigos postales a 5 dígitos, las contraseñas a 10 caracteres, etc.
• Val inicial. Permite indicar el valor que se mostrará en el campo de texto,
cuando el usuario solicite la página desde su navegador.
• Contraseña. Activar esta opción si se desea que se muestre un asterisco por
cada carácter que el usuario teclee en el campo de texto.
• Ajuste. Esta propiedad de un campo de texto de varias líneas, define cómo se
comportará el campo cuando las líneas escritas superen el ancho de ésta.
Desactivado añade barra de desplazamiento horizontal. Virtual crea nuevas
líneas con texto que sobrepasa el ancho horizontal y Físico divide en nuevas
líneas aquellas que superan el ancho; la diferencia con la opción virtual es que
este ajuste envía la información introducida igual que la muestra el área de
texto.
Para insertar campos de texto, realizar las siguientes acciones:
Curso: Dreamweaver
84
• Situar el punto de inserción, dentro del recuadro de guiones rojos, en la

posición en que se desee añadir el campo de texto. Normalmente se añade un
rótulo que indica la información que se solicita al usuario.
• Dar clic en el botón Campo de texto o en Área de Texto del panel Formulario
en la barra Insertar.
• Establecer las propiedades en el Inspector de propiedades
Insertar casillas de verificación
Estas casillas indican el estado de una opción, activada (muestra una marca) o
desactivada (la casilla se encuentra vacía).
Un posible uso de este control consiste en establecer varios criterios que no son
excluyentes.
Ilustración 97. Ejemplo del uso de las casillas de verificación.
• Nombre de casilla. Escribir un nombre descriptivo para la casilla de

verificación. Cada una de las casillas de verificación de un formulario debe
tener un nombre único si deseas conocer la respuesta del usuario a cada una
de las cuestiones planteadas.
• Valor activado. Escribir el valor que se desea que vuelva la casilla, al

programa o correo electrónico, si es activada por el usuario. Por ejemplo, en
una encuesta, se podría establecer:
Valor Para la casilla

1 “Natación”
2 “Ciclismo”
3 “Motociclismo”
4 “Futbol”
• Estado inicial. Elige Activado si se desea que la opción aparezca marcada

cuando el formulario se cargue inicialmente en el navegador.
Curso: Dreamweaver
85
Botones de opción
Al igual que las casillas de verificación, los botones de opción o botones de radio
pueden estar seleccionados (presentan un punto en su interior) o no
seleccionados (se encuentran vacíos). Los botones de opción si aparecen en
grupo representan los posibles valores que puede tomar una opción, el usuario
podrá elegir sólo uno; por tanto son excluyentes, es decir, sólo un botón del grupo
podrá estar seleccionado. Al seleccionar un botón, los restantes botones del grupo
dejarán de estarlo.
Las propiedades de este objeto son las mismas que las descritas para la casilla de
verificación.
Ilustración 98. Ejemplo del uso de botones de opción.
Utilizar los botones de opción cuando el usuario sólo deba seleccionar una de las
opciones de un grupo de opciones. Generalmente, los botones de opción se
utilizan en grupos. Todos los botones de opción de un grupo deben tener el mismo
nombre y contener distintos valores de campo. Se pueden insertar de uno en uno
(Botón de opción) o como un grupo (Grupo de opción)
Para ello ejecutar las siguientes instrucciones:
• Situar el punto de inserción en el interior del contorno del formulario.
• Hacer clic en el botón Grupo de opción del panel Formulario de la barra

Insertar.
Curso: Dreamweaver
86
Ilustración 99. Grupo de opción.
• Aparece el cuadro de diálogo Grupo de opción.
Ilustración 100. Menú para establecer las propiedades de un grupo de opciones.
• En el cuadro de texto Nombre, se introduce un nombre para el grupo de

opciones. Es importante ya que identificará la opción seleccionada con el grupo
de opciones a la que pertenece.
• Hacer clic en el botón Más (+) para agregar un botón de opción al grupo. Si se
desea, se puede introducir una etiqueta (propiedad Nombre Botón) y la
propiedad Valor activado en la columna Valor.
• Hacer clic en los botones de flechas hacia arriba o hacia abajo para cambiar el
orden del botón seleccionado.
• Seleccionar cómo Dreamweaver debe disponer los botones. Elegir Saltos de

línea (etiqueta <br>) o Tabla. Si se selecciona la opción de tabla, Dreamweaver
crea una tabla de una columna y sitúa los botones de opción a la izquierda y
las etiquetas a la derecha.
Dreamweaver inserta el grupo de botones de opción en un formulario. Si aún no

has insertado un formulario en la página, dreamweaver lo insertará
automáticamente.
Menú lista
Un menú lista en dreamweaver o lista desplegable en Windows y una lista o

cuadro de lista en Windows presenta distintas opciones al usuario en un espacio
delimitado. Las listas y los menús de formulario en dreamweaver se crean con el
Curso: Dreamweaver
87
mismo control Lista/menú, pero proporcionan distinta funcionalidad al usuario. Un

menú es un campo desplegable y una lista no.
• Es aconsejable utilizar una lista cuando el número de opciones que se debe

mostrar es pequeño. Establece el alto en líneas de la lista; cuando el número
de opciones de la lista supere su alto en líneas, aparecerá una barra de
desplazamiento con la que el usuario podrá ver todas las opciones.
• Se debe utilizar un menú cuando el espacio disponible sea muy reducido o el

número de opciones sea mayor. Un menú muestra una sola línea e incluye una
flecha abajo en la que el usuario hace clic para ver las opciones restantes del
menú. El usuario sólo puede seleccionar un elemento de menú a la vez.
Una vez insertado un campo Lista/menú, en un formulario, se podrá establecer los

valores de las siguientes propiedades en el Inspector de propiedades:
Ilustración 101. Ejemplo de una Lista/menú
• Lista/menú. Permite asignar un nombre exclusivo para la lista.
• Tipo. Seleccionar el botón de opción Lista para mostrar las opciones en un

cuadro de lista desplegado o Menú para mostrar las opciones en una lista
desplegable.
• Alto. Si en la propiedad tipo se ha seleccionado la opción Lista, indica el

número de líneas que se mostrarán en la lista. El número predeterminado de
líneas es 4. si el número especificado es inferior al número de opciones que
mostrará la lista, automáticamente aparecerán barras de desplazamiento
cuando se cargue la página en un navegador.
• Permitir múltiples. Activar esta casilla de verificación (sólo está disponible si

se elige la opción Lista) para permitir a los usuarios seleccionar más de una
opción de la lista al mismo tiempo.
• Valores de lista. Hacer clic en este botón para añadir los distintos elementos
de la lista. Aparecerá el cuadro de diálogo Valores de lista.
Curso: Dreamweaver
88
Ilustración 102. Menú para añadir valores a un menú desplegable.
En la columna Etiqueta de elemento escribir el texto que debe aparecer en la lista

y en la columna Valor (si se desea que al elegir una opción de la lista se muestre
en el navegador otra página, se escribirá la ruta y el nombre de la página en esta
columna), el valor que se envía a la aplicación del servidor si el elemento está
seleccionado. Si no se especifica ningún valor, se enviará la etiqueta.
Los botones permiten añadir y quitar elementos de la lista. Los elementos se

mostrarán en el mismo orden que en el cuadro de diálogo Valores de lista. El
primer elemento de la lista es el elemento que aparece seleccionado cuando la
página se carga en un navegador. Con los botones de flecha arriba y abajo se
podrá reorganizar los elementos de la lista.
Seleccionando inicialmente. Elegir el elemento de la lista que se desee que

aparezca seleccionado cuando la lista se muestre inicialmente en el navegador, si
no es el primero de la lista.
Campo de archivo
Un campo de archivo es un cuadro de texto con un botón Examinar (ya

programado para que cuando el usuario lo pulse aparezca un cuadro de diálogo
que le permita buscar el archivo en el sistema).
Su función es permitir al usuario escribir o seleccionar un archivo de su

computadora y enviarlo al servidor, como un archivo gráfico o algún otro
documento. Seleccionar el campo de archivo, en el formulario y, después se
establecen sus propiedades en el Inspector de propiedades.
Ilustración 103. Inspector de propiedades de un campo de archivo.

Curso: Dreamweaver
89
• Campo archivo. Permite asignar un nombre al cuadro de texto del objeto.
• Ancho Car. Escribir un número para especificar el número máximo de

caracteres que se puede escribir en el cuadro de texto.
• Car Máx. Teclear un número para especificar el número máximo de caracteres

que se pueden escribir en el cuadro de texto.
Botón
Un botón es un objeto que, al ser pulsado, inicia una acción: enviar un formulario,
restablecer los valores iníciales del formulario o una acción predefinida (se deberá
asignar un comportamiento JavaScript al botón para definir su propia acción.
Las propiedades a configurar en el Inspector de propiedades son las siguientes
Ilustración 104. Propiedades de un botón.
• Nombre del botón. Asigna un nombre al botón.
• Enviar formulario. Al hacer clic en el botón se enviarán automáticamente al

servidor todos los datos del formulario que el usuario haya escrito o
seleccionado.
• Restablecer formulario. Se borrarán todos los datos que el usuario haya

escrito o seleccionado en los elementos que compongan el formulario en el
que está ubicado el botón.
• Ninguno. No realiza ninguna tarea automática.
• Etiqueta. Indica el texto que aparecerá en el interior del botón.
Campo de imagen
Se puede insertar un campo de imagen en un formulario para, por ejemplo, crear

un botón Enviar más atractivo.
El inspector de propiedades muestra las mismas propiedades de una imagen.
Curso: Dreamweaver
90
Campo oculto
Los campos ocultos, como su nombre lo indica, no aparecen en la ventana del

navegador. Ya que el usuario no puede modificar su valor, se utilizarán cuando se
desee enviar un valor en el formulario, que tenga el mismo valor cada vez que se
solicite.
Su única propiedad es Valor para especificar el valor del campo. Si se tiene

conocimiento de programación se podrá manejar este dato cuando se desee.
Menú de salto
Este elemento de formulario presenta una lista de opciones que representan

enlaces a otras páginas web o archivos.
Al hacer clic en el botón Menú de salto en la paleta de Formulario aparecerá el

cuadro de diálogo Insertar menú de salto.
Ilustración 105. Configura las opciones de un menú de salto.
• En el cuadro de texto, se escribirá el texto que en la lista de menú describirá el

contenido de la página Web a la que nos llevará.
• En el cuadro de texto al seleccionarse, ir a URL, se elige el archivo que se

desea abrir, se dará clic en el botón Examinar y, a continuación, se
seleccionará el archivo que se desea abrir o se escribe la ruta del archivo en el
cuadro de texto.
Curso: Dreamweaver
91
• En el cuadro de lista desplegable Abrir URL en, se selecciona la ubicación

donde se desea abrir el archivo: Ventana principal para abrir el archivo en la
misma ventana que contiene el menú de salto o un marco (si se ha
estructurado la página actual con marcos, sus nombres aparecerán en la lista).
• Para añadir un botón IR al lado del menú en lugar de un mensaje de selección

de menú, se activa la casilla Insertar botón Ir tras el menú.
• Activar la casilla Seleccionar primer elemento tras el cambio URL para mostrar
un mensaje (por ejemplo, Elija una opción) una vez que se vuelve a la página,
después de haber accedido a una de las que lleva el menú. Si no se activa
esta casilla, la opción que mostrará el menú es la que haya seleccionado el
usuario.
• Para añadir otras opciones de menú adicionales, hacer clic en el botón Más y
se repiten los primeros 4 pasos. Si se desea eliminar una opción, dar clic en el
botón Menos. Los botones de flecha permiten cambiar el orden de las opciones
de la lista.
• Para cerrar el cuadro de diálogo dar clic en el botón Aceptar.
Comportamientos de formulario
Se puede adjuntar comportamientos (una acción, mostrar un mensaje, más un

evento, al hacer clic) a formularios y objetos de formulario utilizando cualquiera de
los comportamientos que proporciona dreamweaver en el panel Comportamientos.
Los comportamientos Validar formulario y Establecer texto de campo de texto sólo
están disponibles si se ha insertado un campo de texto en el documento. Cuando
se aplica el comportamiento Validar formulario a un objeto de formulario, se
deberá especificar qué campo de texto se debe validar. Por ejemplo, si se
adjuntan el comportamiento Validar formulario al botón Enviar, se podrá
especificar que se compruebe, en el campo de texto “Nombre”, si el usuario ha
introducido texto y si no es así mostrarle un mensaje.
Al trabajar con comportamientos, se deberá comprobar que todos los objetos del
formulario que hay en el documento (y todos los demás objetos) tienen nombres
únicos. Si se utiliza el mismo nombre para dos objetos distintos, es posible que los
comportamientos no funcionen correctamente, a pesar de que los objetos se
encuentren en formularios distintos.
• Validar formulario. Este comportamiento comprueba que el usuario ha

introducido los datos en un formulario. Para que sea efectivo debe de aplicarse
a cada elemento del formulario que se desee validar.
Para validar campos individuales conforme el usuario va llenándolos en el

formulario:
Curso: Dreamweaver
92
• Seleccionar un elemento del formulario o el formulario. Para validar múltiples

campos cuando el usuario envía el formulario. Hacer clic en la etiqueta <form>
en el selector de etiquetas, situado en el ángulo inferior izquierdo de la ventana
de documento.
Ilustración 106. Barra donde se selecciona el formulario.
• Elegir el comando Comportamiento del menú Ventana
Ilustración 107. Menú para indicar el comportamiento.
• Aparecerá el panel de Comportamientos.

Curso: Dreamweaver
93
Ilustración 108. Panel de comportamientos.
• Seleccionar comportamiento Validar formulario en el menú emergente que

aparecerá al hacer clic en el botón Más (+)
Ilustración 109. Menú de acciones del panel Comportamientos.

Curso: Dreamweaver
94
• Aparecerá el cuadro de diálogo Validar formulario o ejecuta una de las

siguientes acciones:
Ilustración 110. Validar datos de los elementos de un formulario.
Para validar los campos individuales, seleccionar el elemento del

formulario que se desee validar en la lista Campos con nombre. Si se está
validando múltiples campos, seleccionar un campo de texto en la lista de
Campos con nombre.
Activar la casilla de verificación Obligatorio si se desea que el usuario no
pueda dejar vacío ese campo.
Elegir una de las opciones del recuadro Aceptar:
Cualquier cosa. Si el campo es obligatorio, pero no tiene que contener
ningún tipo de dato determinado. Si no se ha seleccionado la casilla
Obligatorio, esta opción carece de sentido, es lo mismo que se la acción
Validar formulario no se hubiera adjuntado al campo.
Dirección de correo electrónico. Es para comprobar que el usuario ha
tecleado una dirección de correo electrónico, es decir, si el campo contiene
un símbolo arroba “@”.
Número. Si se desea comprobar que en el campo se han escrito solamente
caracteres numéricos dentro del rango especificado.
Número del …al para verificar que el campo contiene solamente
caracteres numéricos dentro del rango especificado.
• Si se desea validar múltiples campos, repetir los primeros 4 pasos para cada
uno de los campos que se desee validar.
• Hacer clic en el botón aceptar.
Curso: Dreamweaver
95
Si se ha configurado la validación para múltiples campos cuando el usuario envía

el formulario, en la columna Eventos de la ventana Comportamientos aparecerá
seleccionado automáticamente el evento onSubmit, es decir, la validación tendrá
lugar antes de enviarse el formulario. Si se está validando un campo individual,
comprobar que el evento predeterminado sea onBlur u onChange. Cualquiera de
estos eventos desencadena la acción Validar formulario cuando el usuario
abandona el campo. La diferencia entre ellos estriba en que el evento onBlur tiene
lugar independientemente de que el usuario haya escrito algo en el campo,
mientras que onChange tiene lugar sólo si el usuario ha cambiado el contenido del
campo. El evento onBlur es aconsejable si se ha configurado el campo como
obligatorio.
Cuando el usuario haga clic en el botón Enviar, si no se ha elegido o escrito los

datos de forma correcta, el navegador le mostrará un mensaje similar a la figura
siguiente:
Ilustración 111. Mensaje de aviso del navegador, cuando se ha tecleado un valor incorrecto.
Texto de campo de texto. Permite mostrar un mensaje, en un campo de texto,

cuando el usuario realice una determinada acción. Por ejemplo, si escribe mal una
dirección de correo electrónico al abandonar el campo, el texto escrito se sustituirá
por el mensaje “un e-mail requiere un formato como: pepe@servidor.co.
• Seleccionar un campo de texto del formulario y abrir el panel

Comportamientos.
• Hacer clic en el botón Más (+) y, después elegir el comando Definir texto de
campo de texto del menú Definir texto en el menú emergente Acciones.
• En el cuadro de dialogo Definir texto de campo de texto. Elegir el campo de

texto de destino en el menú emergente Campo de texto.
Curso: Dreamweaver
96
Ilustración 112. Definir mensaje para el usuario
• Escribir el mensaje en el campo Nuevo texto y luego hacer clic en el botón

Aceptar.
Comprobar que el evento predeterminado es el que se desea. Si no lo es,

seleccionar otro evento en el menú emergente.
4.2 Plantillas
Cada vez que se desea crear un sitio web, se debe tener muy en cuenta que las
páginas deben seguir un formato uniforme.
La mayoría suelen hacer copias de los documentos ya creados, y trabajar sobre

estas copias, modificando simplemente su contenido. Esta es la forma más
sencilla de tener páginas con una estructura basada en la de otras ya creadas
previamente.
Las plantillas son una especie de copia de la página en las que van a estar
basadas el resto de páginas del sitio web, pero que incluyen la posibilidad de
establecer unas zonas editables y otras zonas que serán fijas, que no podrán
ser modificadas.
No es posible modificar las propiedades de una página que está basada en una
plantilla, a excepción del título. Cuando se desea que existan páginas con, por
ejemplo, diferente color de fondo, es necesario crear plantillas diferentes con los
distintos colores, y basar las páginas en una u otra plantilla, según el color de
fondo que se desee para cada una.
Cuando se modifica el diseño de una plantilla, se pueden actualizar todas las

páginas basadas en ella.
Las plantillas son archivos con la extensión DWT que se guardan en el sitio web,
dentro de una carpeta llamada Templates.
Curso: Dreamweaver
97
4.2.1 Crear plantillas
Las plantillas pueden crearse desde cero, o a partir de una página ya existente.
Una forma de crear una plantilla desde cero es a través del panel Archivos,
pestaña Activos.
Ilustración 113. Panel de Activos.
La pestaña Activos se puede abrir a través del menú Ventana, opción Activos.
También pulsando F11.
Una vez abierto el panel hay que seleccionar el botón , para poder trabajar
con las plantillas.
Los botones inferiores del panel Activos son similares a los del panel Estilos
CSS.
El único botón diferente es el primero, que en este caso sirve para actualizar la
lista, el resto permiten crear una nueva plantilla, editar una plantilla
seleccionada en la lista, o eliminarla.
Para crear una nueva plantilla se pulsa sobre el botón (Si este botón no está
activado, pulsa con el botón derecho del ratón y elige Nueva Plantilla).
Cuando se pulsa ese botón aparece un nuevo documento en la lista de plantillas,

al que es posible cambiarle el Nombre pulsando previamente sobre él.
Para modificar una plantilla se selecciona de la lista y se pulsa el botón .
Para eliminar una plantilla se selecciona de la lista y se pulsa el botón .
Curso: Dreamweaver
98
Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates,

que se crea automáticamente.
Para crear una plantilla a partir de un archivo existente es necesario abrir dicho
archivo, y después guardarlo como plantilla a través del menú Archivo, opción
Guardar como plantilla.
Cuando se pulsa dicha opción, aparece una ventana como la de la derecha. En

ella es necesario especificar el nombre con el que va a ser guardada la plantilla,
a través del campo Guardar como, y elegir, de entre la lista de sitios, el Sitio:
en el que se va a guardar.
Ilustración 114. Guardar cómo plantilla.
4.2.2 Establecer regiones editables en una plantilla
Todos los elementos de una plantilla están bloqueados por defecto, no se pueden
modificar.
Es necesario establecer las zonas que sí podrán ser editadas en las páginas que
se basen en dicha plantilla.
Para editar una plantilla hay que abrirla en Dreamweaver. Una forma de abrirla
es a través del panel Activos, pulsando dos veces sobre ella, o estando
seleccionada pulsando sobre el botón como ya se ha visto.
Una vez abierta la plantilla es posible establecer sus propiedades a través de la

ventana Propiedades de la página.
Como se recordará, para abrir esta ventana:
• Pulsar la combinación de teclas Ctrl+J.
Curso: Dreamweaver
99
• Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la

página.
• Pulsar con el botón derecho sobre el documento abierto en Dreamweaver,
y en el menú contextual que aparece seleccionar la opción Propiedades
de la página.
Para insertar una región editable hay que situar el puntero en el lugar en el que
se desea insertar, y después dirigirse al menú Insertar, Objetos de plantilla,
opción Región editable, o pulsar la combinación de teclas Ctrl+Alt+V.
En la nueva ventana hay que establecer un Nombre para la región editable.
Dentro de la plantilla no pueden existir dos regiones editables con el mismo

nombre.
Posteriormente puede modificarse el nombre a través del inspector de

propiedades de la región editable.
Ilustración 115. Región editable.
Las zonas editables aparecen representadas en Dreamweaver como un recuadro

con una etiqueta de color turquesa. En la etiqueta aparece el nombre de la zona
editable.
Dentro del recuadro es posible insertar objetos, que aparecerán por defecto en
aquellos documentos que se basen en la plantilla. Estos objetos, al estar dentro
de la zona editable, podrán ser modificados en las páginas.
Todos los objetos que se encuentren fuera de estas zonas editables aparecerán
también en las páginas, pero no podrán ser modificados.
4.2.3 Basar páginas en una plantilla
El uso de las plantillas puede resultar un poco complicado al principio. Vamos a

ver cómo basar una página vacía en una plantilla, ya que por el hecho de estar
vacía resulta más sencillo.
Curso: Dreamweaver
100
Una vez abierto el documento, hay que dirigirse al menú Modificar, Plantillas,
opción Aplicar plantilla a página.
Es preferible que antes de hacer esto asegurarse de que el sitio que se

encuentra abierto en Dreamweaver es el mismo en el que se guardará el
documento, y el mismo en el que se encuentra la plantilla en la que se basará.
Después de pulsar sobre la opción Aplicar plantilla a página aparece una

ventana como la siguiente, en la que hay que seleccionar una de las plantillas de
la lista Plantillas: del sitio.
Ilustración 116. Seleccionar plantilla.
Es recomendable activar la casilla Actualizar página cuando cambie la plantilla,

para que la página se actualice automáticamente en el caso de modificar la
plantilla en la que se basa.
Curso: Dreamweaver
101
A pesar de estar trabajando sobre un documento vacío, es posible que al aplicar la

plantilla aparezcan nombres de regiones no coincidentes entre el documento en
blanco y la plantilla. En ese caso se muestra una ventana como la siguiente.
Ilustración 117. Regiones no coincidentes.
En ella hay que establecer una correspondencia entre el nombre de la región del
documento vacío con el nombre de alguna región de la plantilla.
En este ejemplo, la región del documento vacío que no coincidía con el nombre
de ninguna región de la plantilla era la región Document head.
A través de Mover contenido a la nueva región: se ha seleccionado la región

head de la plantilla, para establecer así la correspondencia que se necesitaba.
Después de establecer las correspondencias necesarias, se carga la plantilla en
el documento vacío.En este caso no es posible cambiar el color de fondo, que
está definido en la plantilla, pero sí es posible cambiar todos los elementos de la
tabla y el formulario, ya que se encuentran dentro de una zona definida en la
plantilla como editable.
En este caso se podría cambiar el estilo del texto, el color de las celdas,
combinarlas, etc.
Para que una página deje de estar basada en una plantilla hay que dirigirse al
menú Modificar, Plantillas, opción Separar de plantilla.
Curso: Dreamweaver
102
Cuando se separa una página de una plantilla, el contenido de la página sigue

siendo el mismo que el que tenía cuando aún estaba basada en la plantilla, pero
sin las restricciones establecidas por la plantilla.
En esta unidad el participante aprendió a crear formularios y plantillas en

Dreamweaver, primeramente colocando los elementos necesarios en un
formulario a partir de la necesidad que se tiene de obtener información de un
usuario web, así como conseguir que el formulario valide que se envíe la
información solicitada. Posteriormente definió la forma en que las páginas pueden
tener un formato uniforme.
Curso: Dreamweaver
103
Unidad V. Animaciones en una página web.
El participante creará capas e insertará objetos de multimedia con la finalidad de

generar animaciones en una página web.
Introducción:
En esta unidad se conocerá la forma de insertar animación a través de una capa y

los elementos multimedia y efectos que se pueden incluir en una página web.
Macromedia Dreamweaver permite añadir sonido y películas que proporcionarán

que la página sea más atractiva y complementaran la información. Se puede
incorporar y editar archivos y objetos multimedia, como películas de Macromedia
Flash y Shockwave, appets de Java, QuickTime, ActiveX y archivos de audio.
5.1 Capas
Las capas no son más que unos recuadros, que pueden situarse en cualquier
parte de la página, en los que se puede insertar contenido HTML. Dichas capas
pueden ocultarse y solaparse entre sí, lo que proporciona grandes posibilidades
de diseño.
Las capas pueden moverse de una posición a otra de la ventana pulsando

sobre el recuadro blanco, y sin soltar el ratón, arrastrándola hacia la nueva
posición.
También pueden ser redimensionadas pulsando sobre los recuadros negros, y

arrastrándolos hasta conseguir el tamaño deseado.
Ilustración 118. Ejemplo de recuadros negros.
Dentro del recuadro de la capa es posible insertar texto, tablas, imágenes,

animaciones flash, y todos los elementos que puede contener un documento
HTML.
Este icono sirve para seleccionar la capa al pulsar sobre él, y al eliminarlo se
elimina también la capa.
Curso: Dreamweaver
104
5.1.1 Insertar una capa
Las capas pueden insertarse en una página a través del menú Insertar, opción
Objeto de diseño, Capa.
Una vez insertada la capa, pueden editarse sus atributos, pero para ello hay que
seleccionarla primero.
Una capa puede seleccionarse de varias maneras. Una de ellas es pulsando

sobre el icono correspondiente, pero esto no resulta útil cuando existen muchas
capas en un mismo documento, ya que todas las capas tienen asociada una
imagen igual a ésta, y no es fácil seleccionar la deseada a la primera.
Cuando existen varias capas en un mismo documento, es preferible

seleccionarlas a través de la pestaña Capas del panel Diseño, que puede
abrirse a través del menú Ventana opción Capas. Si la opción Capas no te
aparece directamente en este menú, posiblemente esté dentro de la opción
Otros. También se puede abrir el panel pulsando F2.
En dicho panel aparecen los nombres de todas las capas que existen en el
documento actual, y para seleccionar una de ellas simplemente hay que pulsar
sobre el nombre en el panel.
Ilustración 119. Panel de capas.
5.1.2 Formato de una capa
Las propiedades de la capa se especifican a través de su inspector de

propiedades.
Ilustración 120. Inspector de propiedades de capas.
• ID de capa es el nombre de la capa. También puede ser cambiado a

través del panel Capas, haciendo doble clic sobre él.
• Iz y Sup indican la distancia en píxeles que hay entre los límites izquierdo
y superior del documento y la capa.
Curso: Dreamweaver
105
• An y Al indican la anchura y la altura de la capa.
• Índice Z es el número de orden de colocación de las capas. Este valor

también puede cambiarse a través del panel Capas. Una capa será
solapada por aquellas capas cuyo índice Z sea mayor que el suyo.
• Vis indica la visibilidad inicial de la capa. La visibilidad puede ser de

cuatro tipos:
• Default (visibilidad según el navegador),
• Inherit (se muestra la capa mientras la página a la que pertenece también

se esté mostrando),
• Visible (muestra la capa, aunque la página no se esté viendo) y
• Hidden (la capa está oculta).
La visibilidad también puede cambiarse a través del panel Capas, pulsando

sobre la imagen del ojo. El ojo abierto indica Visible, y el ojo cerrado indica
Hidden.
A través de Im. fondo y Col puede indicarse una imagen o un color de fondo
para la capa.
Desb. (Desbordamiento) controla cómo aparecen las capas en un navegador

cuando el contenido excede el tamaño especificado de la capa.
Visible indica que el contenido adicional aparece en la capa. La capa se amplía

para darle cabida.
Hidden (oculto) especifica que el contenido adicional no se mostrará en el

navegador.
Scroll (desplazamiento) especifica que el navegador deberá añadir barras de

desplazamiento a la capa tanto si se necesitan como si no.
Auto (automático) hace que el navegador muestre barras de desplazamiento para

la capa cuando sean necesarias (es decir, cuando el contenido de la capa supere
sus límites).
Curso: Dreamweaver
106
5.2. Multimedia
Crear animaciones
Otra herramienta que incorpora Dreamweaver, además de los Comportamientos,

para crear animaciones usando HTML dinámico (DHTML) es el editor de líneas de
tiempo. Utilízalo para mover capas o imágenes por la página.
Antes de crear una animación usando Líneas de tiempo se debe tener en cuenta
que:
• La animación se crea al cambiar la posición, el tamaño, la visibilidad y el

orden de apilamiento de las capas.
• Las líneas de tiempo también pueden cambiar los archivos de origen de

las imágenes.
• Las líneas de tiempo solamente pueden mover capas. Para hacer que
se muevan imágenes o texto, debes crear una capa y después insertar
la imagen, el texto o cualquier otro tipo de contenido a la capa
Generar una animación
Así es como se puede crear una animación con Dreamweaver:
Crear una capa e insertar el texto o la imagen que se desee mover.
Abrir el editor de líneas de tiempo, el comando Líneas de tiempo del menú

Ventana.
Curso: Dreamweaver
107
Ilustración 121. Menú para agregar líneas de tiempo.
• Arrastra la capa por el manejador de selección ()hasta un canal de

animación, si no has creado antes otras animaciones, colócala en el
primer canal
Ilustración 122. Panel línea del tiempo.

• Asignar un nombre significativo a la línea de tiempo en la lista
desplegable. Si se trabaja con más de una línea de tiempo en la misma
página, esto permitirá identificarlas.
• Por omisión, Dreamweaver asigna una velocidad de 15 fotogramas por

segundo o frames per secons. Teclear un nuevo valor, si se desea
modificarlo, en el campo de texto Fps.
• Asignar la duración de la animación utilizando los fotogramas clave, que

son puntos redondos que marcan el final y el principio de la línea de
tiempo:
o Para establecer el punto inicial, hacer clic en el fotograma clave

situado a la izquierda y arrastrar hacia la derecha para retrasarlo, o
hacia la izquierda para adelantar el comienzo de la animación. Si
también se ha seleccionado la capa, en el Inspector de propiedades
Curso: Dreamweaver
108
se puede definir la posición inicial de dicha capa en los cuadros de

texto IZ y Sup.
o Definir el punto final, hacer clic en el fotograma clave situado a la

derecha de la línea de tiempo y arrastrarlo hacia la derecha o hacia la
izquierda para ampliar o reducir su duración. Si también se ha
seleccionado la capa, en el inspector de propiedades se puede definir
la posición inicial de dicha capa en los cuadros de texto IZ y Sup.
• Si se desea que el desplazamiento trace una línea recta, asignar el mismo

valor a las propiedades IZ y Sup del fotograma clave de inicio y fin. Para
lograr un movimiento suave, la animación deberá definirse con un número
elevado de fotogramas por segundo y una duración larga.
• Si se desea que la capa oculte un número de fotogramas, hacer clic en los

fotogramas que se desea hacer desaparecer y aparecer la capa y, en el
Inspector de propiedades, elegir la opción Hidden (oculta) y Visible
respectivamente en la lista desplegable Vis. Utilizar los botones Rebobinar
para ir al primer fotograma, Atrás para ir al anterior y Reproducir para ir al
siguiente
• Activar la casilla Reprod. Automáticamente para que se inicie la animación

al cargarse la página en el navegador. Si se desactiva esta casilla se debe
programar un comportamiento para que el usuario pueda iniciarlo, por
ejemplo, haciendo clic sobre una imagen.
• Activar la casilla Bucle si se desea que el efecto de la línea de tiempo

seleccionada se repita indefinidamente mientras la página esté abierta en
un navegador o desactivarla para que el movimiento se ejecute una sola
vez.
• Al activar la casilla Bucle se inserta el comportamiento Ir a fotograma en

línea de tiempo en el Canal Behaviors después del último fotograma de la
animación. Haz doble clic sobre él para activar el panel Comportamientos
del grupo de paneles Diseño y, a continuación, hacer clic en el
comportamiento Ir a un fotograma en la línea de tiempo para editar los
parámetros de dicho comportamiento. Si se deja en blanco el cuadro de
texto Bucle el efecto se repetirá indefinidamente.
Ilustración 123. Ir a un fotograma en la línea de tiempo.
Curso: Dreamweaver
109
Ilustración 124. Define las veces que se ejecutará la animación.
Si se desea crear una trayectoria curva. Insertar un nuevo fotograma clave

haciendo clic en un punto intermedio de la línea de tiempo manteniendo pulsada la
tecla <Ctrl>. Una vez que se ha añadido el nuevo fotograma, curva la línea
arrastrando la capa con el objeto.
5.2.1 Películas de Flash
Las películas Flash son animaciones, que al igual que los botones y el texto
Flash, tienen la extensión SWF. Es frecuente verlas en las páginas iníciales de
los sitios web, a modo de presentación hacia los usuarios, aunque se pueden
utilizar para realizar cualquier tipo de animación.
Estas películas pueden crearse mediante el programa Flash de Macromedía, y

necesitan que el usuario tenga instalado el plug-in para poder ser visualizadas.
Las películas Flash pueden insertarse en una página a través del menú
Insertar, Media, opción Flash, o pulsando Ctrl+Alt+F.
También pueden insertarse pulsando sobre la opción Flash que aparece en la

pestaña Común del panel Insertar, botón Media.
Ilustración 125. Insertar botón de Flash.
El inspector de propiedades de las películas Flash es prácticamente igual que

el de los botones y el texto Flash, pero existen dos opciones nuevas que hacen
referencia a la visualización de la película.
La opción Bucle indica que al finalizar la película, ésta volverá a comenzar

desde el principio.
Curso: Dreamweaver
110
La otra es la opción Rep. autom. (Reproducción automática), que al estar

marcada indica que nada más cargarse la página comenzará a reproducirse la
película Flash.
Si esta opción no estuviera marcada, se mostraría únicamente el primer

fotograma de la película.
Interesa desmarcar esta opción cuando se desea que la reproducción sea

activada por algún comportamiento.
5.2.2 Sonido
No es muy habitual incluir sonido en una página web, ya que algunos usuarios
suelen estar escuchando su propia música cuando navegan en Internet, por lo
que el escuchar también sonido en cada página que se visita puede resultar algo
molesto.
A pesar de ello, el incluir un sonido agradable, apropiado al contenido de la

página, puede hacerla más atractiva. Muchas de las páginas que contienen
sonido suelen ofrecer la posibilidad de activarlo o desactivarlo, para que aquellos
usuarios que no deseen escuchar el sonido de la página puedan desactivarlo.
Los formatos de sonido más habituales en Internet son, fundamentalmente, el

MP3, el WAV y en algunas ocasiones el MIDI, aunque existen otros formatos
diferentes que también pueden utilizarse. Lo ideal es incluir algún archivo de
audio que no ocupe mucho espacio, y que no por ello sea de mala calidad.
Para insertar un archivo de audio en un documento en el menú Insertar, Medía,

opción Plug-in.
En Dreamweaver no se mostrarán los controles de audio. Todos los archivos

que son insertados como plug-in aparecen representadas dentro de
Dreamweaver por una imagen siguiente.
En el inspector de propiedades pueden establecerse la altura y la anchura con la

que se mostrarán los controles de audio, mediante Al y An.
En el caso de no especificar ningún tamaño, se mostrará el tamaño por defecto

de los controles, como ocurre en el ejemplo de arriba. Si lo que se desea es que
se escuche el sonido en la página, pero que no se muestren los controles de
audio, los campos Al y An deben valer cero.
Los sonidos se reproducen automáticamente al cargarse la página, y se

reproducen solamente una vez. Estos valores no pueden definirse a través del
Curso: Dreamweaver
111
inspector de propiedades, pero sí a través del código. Una vez definidos se

pueden cambiar desde el inspector de propiedades con el botón Parámetros...
Por ejemplo, el archivo anterior aparecía en el código como <embed

src="varios/audio.mid"></embed>. Pero para que no se reproduzca
automáticamente se ha añadido autostart="false", y para que se reproduzca
continuamente se ha añadido loop="true".
La línea de código del archivo de audio ha quedado del siguiente modo:
<embed src="varios/audio.mid" autostart="false" loop="true"></embed>
En el Inspector de propiedades del sonido, el botón Parámetros... abre un

cuadro de diálogo donde es posible cambiar esos valores una vez introducidos.
Para poder hacer que el audio pueda activarse y desactivarse cuando no se

muestran los controles, es necesario insertar una serie de comportamientos que
se encarguen de esa tarea.
Para poner música de fondo en una página web, sin que aparezcan los controles
de audio, puedes escribir este código directamente en la vista Código.
<bgsound src="cancion1.wav" loop="-1">
Se inserta después de la etiqueta </title> Con el parámetro loop y se puede

decidir cuántas veces se reproducirá, 1, 2, 3 ... (con -1 se reproduce de modo
continuo).
5.2.3 Videos
En ocasiones puede interesar incluir algún vídeo en una página web, pero hay
que tener en cuenta que los vídeos suelen ocupar mucho espacio en disco, y por
lo tanto, precisan de mucho tiempo para descargarse.
Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el
MOV.
Para insertar un archivo de vídeo en un documento se abre el menú Insertar,

Medía, opción Plug-in.
La ilustración 106 es un ejemplo de un archivo de vídeo, para el que se muestran

los controles de vídeo. Este se reproduce pulsando sobre los controles.
Curso: Dreamweaver
112
El inspector de propiedades para los archivos de vídeo insertados de esta forma

es el mismo que el de los archivos de audio, ya que ambos se insertan como
Plug-in.
Los vídeos también se reproducen automáticamente al cargarse la página, y se

reproducen solamente una vez. Estos valores pueden cambiarse a través del
código, del mismo modo que en el caso de los archivos de audio, añadiendo
autostart="false" y loop="true".
Todos los objetos insertados a través de la opción Plug-in precisan que el

usuario tenga instalado un reproductor o un plug-in apropiado para reproducirlos.
En el campo Origen del inspector de propiedades se establece el archivo
vinculado (el archivo de audio o de vídeo) que ha de reproducirse.
En el caso de que el usuario no tenga instalado ningún plug-in adecuado, puede

establecerse en el campo URL plg una página en la que pueda encontrarlo.
En esta unidad el participante aprendió a insertar texto y botones de de flash, a

crear capas e insertar objetos multimedia, con la finalidad de crear animaciones en
una página web, complementando la información.
Curso: Dreamweaver
113
Glosario
FTP. Es un protocolo de comunicación gracias al cual se intercambian archivos
dentro de una red.
Hipertexto. Texto dotado de una presentación amena que puede incluir gráficos,
videos, sonido y otros elementos multimedia. Está ligado a una página.
HTML (Hiper Text Markup Language). Es un lenguaje que se emplea para

presentar la información en una página web.
Java. Lenguaje de programación desarrollado por Sun para la elaboración de

pequeñas aplicaciones exportables a la red (applets)
JavaScript. Lenguaje desarrollado por Netscape.
Link. Enlace, liga o vínculo apuntador de hipertexto que sirve para saltar de una
información a otra.
Marcador. Punto que se toma como referencia dentro de un archivo para utilizarlo
como destino de un hipervínculo.
Multimedia. Información digitalizada que combina texto, gráficos, imágenes,

animación, sonido y video.
Navegador. Aplicación para visualizar todo tipo de información.
On-Line. Que está conectado en línea.
Página web. Documento de texto escrito en un lenguaje HTML.
URL. Siglas de Uniform Resource Locutor, es un sistema uniforme de

identificación de los recursos de una red.
Rollovers. Es un botón dinámico, capaz de cambiar su apariencia en función de

determinados comportamientos del ratón (encima, clic, doble clic…)
RSS. Es un formato para la sindicación de contenidos de páginas web. Sus siglas

responden a Really Simple Syndication. To syndicate literalmente significa sindicar
(formar parte de un sindicato. En inglés tiene otro significado: "publicar artículos
simultáneamente en diferentes medios a través de una fuente a la que pertenece".
XML. Sigla en inglés de eXtensible Markup Language («lenguaje de marcas

extensible»), es un metalenguaje extensible de etiquetas desarrollado por el World
Wide Web Consortium (W3C). Es una simplificación y adaptación del SGML y
permite definir la gramática de lenguajes específicos (de la misma manera que
Curso: Dreamweaver
114
HTML es a su vez un lenguaje definido por SGML). Por lo tanto XML no es

realmente un lenguaje en particular, sino una manera de definir lenguajes para
diferentes necesidades. Algunos de estos lenguajes que usan XML para su
definición son XHTML, SVG, MathML.
CSS. Siglas en inglés (Content Scrambling System), es un código de cifrado

utilizado en los DVD (Digital Versatile Disc) comerciales, con el fin de cifrar la
información multimedia que se codifica en formato MPEG-2. Fue creado con el fin
de salvaguardar la duplicación ilegal de discos mediante el cifrado de archivos y la
introducción de las claves de cifrado en el hardware reproductor.
WebTV. Es un dispositivo que permite navegar por Internet mediante un receptor

de televisión y una línea telefónica. Además, WebTV, es una empresa de
Microsoft, adquirida en 1997.
PDAs. En inglés (Personal Digital Assistant), (Ayudante personal digital) es un

computador de mano originalmente diseñado como agenda electrónica
(calendario, lista de contactos, bloc de notas y recordatorios) con un sistema de
reconocimiento de escritura. Hoy día se puede usar como una computadora
doméstica (ver películas, crear documentos, juegos, correo electrónico, navegar
por Internet, escuchar música, etc.).
PHP. Es un lenguaje de programación usado frecuentemente para la creación de

contenido para sitios web con los cuales se puede programar las páginas HTML y
los códigos de fuente. PHP es un acrónimo recursivo que significa "PHP Hypertext
Pre-processor" (inicialmente PHP Tools, o, Personal Home Page Tools), y se trata
de un lenguaje interpretado usado para la creación de aplicaciones para
servidores, o creación de contenido dinámico para sitios web. Últimamente
también para la creación de otro tipo de programas incluyendo aplicaciones con
interfaz gráfica usando las librerías Qt o GTK+.
ColdfusiónMx7. ColdFusion es un lenguaje de programación, puede crear y

modificar variables igual que en otros lenguajes de programación que nos son
familiares. Posee control de flujo de programas, como IF, Case, ciclo, etc. Tiene
muchas funciones built-in para realizar tareas más complicadas, por ejemplo: para
averiguar en qué día caerá el 3 de Agosto del 2007
Curso: Dreamweaver
115
Conclusiones
Dreamweaver 8 puede integrar entradas RSS provenientes de otras páginas
con sólo introducir la fuente y arrastrar y colocar los campos. De esta forma
podrá introducir datos en formato XML fácil y cómodamente.
Esta última versión ha mejorado mucho respecto a la compatibilidad y

manejo de estilos de cascada. De esta forma se ha mejorado el panel de
estilos CSS, donde ahora podrá acceder a la configuración de cada uno de
los estilos desde una lista mucho mejor dotado de una cuadrícula editable
desde donde se modificarán sus propiedades. Además, Dreamweaver 8,
añade una nueva barra de herramientas que proporciona la reproducción
inmediata de los estilos para diferentes medios (pantalla, impresora, webTV,
PDAs...).
Su sincronización ha mejorado notablemente siendo posible una mejor

gestión de cambios, además de permitir en uso de bolqueo/desbloqueo de
archivos para que estos no se sobreescriban.
Los usuarios con problemas visuales podrán acceder a una opción de

Aumento de la pantalla en vista de diseño para analizar o trabajar con
difíciles anidamientos de tablas. Además de la inclusión de información visual
gracias a las guías que permitirán la medición píxel a píxel de todos los
elementos.
Se ha añadido una barra de herramientas a Dreamweaver 8, podrá

encontrarla en la parte lateral izquierda del modo de Código, esta barra hace
mucho más accesible el código al permitir la navegación por etiquetas y su
contracción. Una de las nuevas novedades es la posibilidad de añadir
comentarios con un sólo clic.
Concluiremos, además, la compatibilidad añadida en esta versión con PHP5,

Coldfusion MX 7 y Video Flash.
Curso: Dreamweaver
116
Bibliografía
GASPAR GONZÁLEZ MANGAS y ANTONIA GONZÁLEZ MANGAS. “Negocios
Virtuales”. Ed. MC Graw Hill. Primera edición
http://macromedia.com
http://aulaclic.com
http://www.ua.es/ugt/cursos/curso_diseno_web/ejercicios1_8.pdf
http://www.adrformacion.com/cursos/dream/dream.html
http://www.arp.jazztel.es/dreamweaver.htm
http://www.arp.jazztel.es/dreamweaver.htm
Índice de Ilustraciones
ILUSTRACIÓN 1. RUTA DE ACCESO A DREAMWEAVER 8. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 9
ILUSTRACIÓN 2. VENTANA PRINCIPAL DE DREAMWEAVER. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 10
ILUSTRACIÓN 3. ENTORNO DE TRABAJO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 11
ILUSTRACIÓN 4. PANTALLA INICIAL. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 12
ILUSTRACIÓN 5. BARRA DE TÍTULO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 12
ILUSTRACIÓN 6. BARRA DE MENÚS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 13
ILUSTRACIÓN 7. BARRA DE HERRAMIENTAS ESTÁNDAR. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 13
ILUSTRACIÓN 8. BARRA DE HERRAMIENTAS DE DOCUMENTO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 13
ILUSTRACIÓN 9. BARRA DE ESTADO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 13
ILUSTRACIÓN 10. INSPECTOR DE PROPIEDADES. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 14
ILUSTRACIÓN 11. BARRA DE HERRAMIENTAS INSERTAR. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 14
ILUSTRACIÓN 12. BARRA DE HERRAMIENTAS DE UN DOCUMENTO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 15
ILUSTRACIÓN 13. VISTA DISEÑO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 15
ILUSTRACIÓN 14. VISTA CÓDIGO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 16
ILUSTRACIÓN 15. VISTA CÓDIGO Y DISEÑO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 16
ILUSTRACIÓN 16. EJEMPLO DE ORGANIZACIÓN DE CARPETAS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 17
ILUSTRACIÓN 17. MENÚ SITIO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 19
ILUSTRACIÓN 18. ADMINISTRAR SITIOS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 19
ILUSTRACIÓN 19. DEFINICIÓN DEL SITIO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 20
ILUSTRACIÓN 20. ASISTENTE PARA CREAR SITIOS WEB. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 21
ILUSTRACIÓN 21. PANEL DE ARCHIVOS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 21
ILUSTRACIÓN 22. MAPA DEL SITIO Y SITIO LOCAL. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 22
ILUSTRACIÓN 23. ACTUALIZAR ARCHIVOS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 23
ILUSTRACIÓN 24. OPCIÓN PARA DAR MANTENIMIENTO AL SITIO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 23
ILUSTRACIÓN 25. PANEL DEL SITIO CONTRAÍDO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 24
ILUSTRACIÓN 26. PANEL DEL SITO AMPLIADO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 24
ILUSTRACIÓN 27. MENÚ CONTEXTUAL. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 25
ILUSTRACIÓN 28. CREACIÓN DE UN NUEVO ARCHIVO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 26
ILUSTRACIÓN 29. OPCIÓN PARA IMPORTAR TEXTO DE WORD. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 27
ILUSTRACIÓN 30. IMPORTAR DOCUMENTO DE WORD. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 28
ILUSTRACIÓN 31. PANEL DE PROPIEDADES. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 28
ILUSTRACIÓN 32. PROPIEDADES DE LISTA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 31
Curso: Dreamweaver
117
ILUSTRACIÓN 33. MENÚ INSERTAR, COMANDO FECHA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 32
ILUSTRACIÓN 34. CUADRO DE DIÁLOGO INSERTAR FECHA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 32
ILUSTRACIÓN 35. BARRA INSERTAR. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 33
ILUSTRACIÓN 36. CARACTERES ESPECIALES. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 33
ILUSTRACIÓN 37. OTROS CARACTERES ESPECIALES. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 34
ILUSTRACIÓN 38. REGLA HORIZONTAL. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 35
ILUSTRACIÓN 39. PROPIEDADES DE LA LÍNEA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 35
ILUSTRACIÓN 40. VENTANA DE PREFERENCIAS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 36
ILUSTRACIÓN 41. MENÚ PARA REVISAR LA ORTOGRAFÍA DE UN DOCUMENTO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 37
ILUSTRACIÓN 42. CUADRO DE DIÁLOGO ORTOGRAFÍA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 37
ILUSTRACIÓN 43. PANEL DE PROPIEDADES. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 39
ILUSTRACIÓN 45. NOMBRE DEL ESTILO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 39
ILUSTRACIÓN 44. CAMBIAR NOMBRE A UN ESTILO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 39
ILUSTRACIÓN 46. PANEL ESTILOS CSS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 40
ILUSTRACIÓN 47. LOCALIZA O ESCRIBE LA RUTA DE LA HOJA DE ESTILO CSS A VINCULAR. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 41
ILUSTRACIÓN 48. HIPERVÍNCULO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 45
ILUSTRACIÓN 49. EJEMPLO DE IMAGEN CON VÍNCULO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 47
ILUSTRACIÓN 50. PROPIEDADES DE IMAGEN. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 48
ILUSTRACIÓN 51. VÍNCULO PARA CORREO ELECTRÓNICO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 48
ILUSTRACIÓN 52. PANEL ACTIVOS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 50
ILUSTRACIÓN 53. PANEL SITIO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 50
ILUSTRACIÓN 54. CUADRO DE DIÁLOGO SELECCIONAR ORIGEN DE IMAGEN. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 51
ILUSTRACIÓN 55. EJEMPLO DE CÓDIGO HTML AL INSERTAR UNA IMAGEN. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 52
ILUSTRACIÓN 56. INSPECTOR DE PROPIEDADES DE UNA IMAGEN. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 52
ILUSTRACIÓN 57. ALINEACIÓN. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 53
ILUSTRACIÓN 58. INSPECTOR DE PROPIEDADES. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 55
ILUSTRACIÓN 59. EJEMPLO DE MAPA DE IMAGEN. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 56
ILUSTRACIÓN 60. PROPIEDADES DE MAPA DE IMAGEN. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 56
ILUSTRACIÓN 61. INSERTAR IMAGEN DE SUSTITUCIÓN. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 57
ILUSTRACIÓN 62. INSERTAR BOTÓN DE FLASH. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 58
ILUSTRACIÓN 63. PANEL DE PROPIEDADES DEL BOTÓN DE FLASH. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 59
ILUSTRACIÓN 64. INSERTAR TEXTO DE FLASH. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 60
ILUSTRACIÓN 65. INSERTAR BARRA DE NAVEGACIÓN. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 61
ILUSTRACIÓN 66. EJEMPLO DE TABLA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 63
ILUSTRACIÓN 67. MENÚ PARA INSERTAR UNA TABLA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 64
ILUSTRACIÓN 68. VENTANA PARA INDICAR LAS CARACTERÍSTICAS DE LA TABLA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 64
ILUSTRACIÓN 69. TABLA CON CONTENIDO Y FORMATO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 65
ILUSTRACIÓN 70. OPCIÓN QUE PERMITE SELECCIONAR UNA TABLA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 66
ILUSTRACIÓN 71. ETIQUETA DE UNA TABLA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 66
ILUSTRACIÓN 72. MENÚS QUE PERMITEN ACCEDER RÁPIDAMENTE A LA TABLA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 67
ILUSTRACIÓN 73. VENTANA DEL INSPECTOR DE PROPIEDADES. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 68
ILUSTRACIÓN 74. VENTANA DEL INSPECTOR DE PROPIEDADES DE UNA CELDA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 68
ILUSTRACIÓN 75. VENTANA DE PROPIEDADES QUE PERMITE CAMBIAR EL ANCHO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 69
ILUSTRACIÓN 76. MENÚ PARA INSERTAR UNA FILA O COLUMNA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 70
ILUSTRACIÓN 77. VENTANA PARA INSERTAR FILAS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 70
ILUSTRACIÓN 78. VENTANA PARA INSERTAR COLUMNAS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 70
ILUSTRACIÓN 79. MENÚ QUE PERMITE ELIMINAR UNA FILA O UNA COLUMNA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 71
ILUSTRACIÓN 80. TABLA ANIDADA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 71
ILUSTRACIÓN 81. VENTANA PARA SELECCIONAR LOS BOTONES DE DIVIDIR Y COMBINAR CELDAS. ‐‐‐‐‐‐‐‐‐ 71
ILUSTRACIÓN 82. VENTANA PARA DIVIDIR FILAS O COLUMNAS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 72
ILUSTRACIÓN 83. MENÚ QUE PERMITE CAMBIAR EL MODO DE TABLA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 73
ILUSTRACIÓN 84. ESTRUCTURA DE LOS MARCOS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 74
Curso: Dreamweaver
118
ILUSTRACIÓN 86. MARCO A LA IZQUIERDA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 75
ILUSTRACIÓN 85. MENÚ PARA CREAR MARCOS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 75
ILUSTRACIÓN 87. MARCO A LA DERECHA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 76
ILUSTRACIÓN 88. EJEMPLOS DEL INSPECTOR DE MARCOS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 77
ILUSTRACIÓN 89. INSPECTOR DE PROPIEDADES DE UN MARCO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 78
ILUSTRACIÓN 90. BORDES DE UN MARCO DESDE EL INSPECTOR DE PROPIEDADES. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 79
ILUSTRACIÓN 91. INSPECTOR DE PROPIEDADES DE UN MARCO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 79
ILUSTRACIÓN 92. EJEMPLO DE UN FORMULARIO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 81
ILUSTRACIÓN 93. OPCIÓN PARA CREAR UN FORMULARIO ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 82
ILUSTRACIÓN 94. MUESTRA DE LA LÍNEA PUNTEADA INDICANDO QUE ES UN FORMULARIO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 82
ILUSTRACIÓN 95. INSPECTOR DE PROPIEDADES DE UN FORMULARIO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 83
ILUSTRACIÓN 96. INSPECTOR DE PROPIEDADES DE UN CAMPO DE TEXTO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 84
ILUSTRACIÓN 97. EJEMPLO DEL USO DE LAS CASILLAS DE VERIFICACIÓN. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 85
ILUSTRACIÓN 98. EJEMPLO DEL USO DE BOTONES DE OPCIÓN. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 86
ILUSTRACIÓN 99. GRUPO DE OPCIÓN. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 87
ILUSTRACIÓN 100. MENÚ PARA ESTABLECER LAS PROPIEDADES DE UN GRUPO DE OPCIONES. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 87
ILUSTRACIÓN 101. EJEMPLO DE UNA LISTA/MENÚ ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 88
ILUSTRACIÓN 102. MENÚ PARA AÑADIR VALORES A UN MENÚ DESPLEGABLE. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 89
ILUSTRACIÓN 103. INSPECTOR DE PROPIEDADES DE UN CAMPO DE ARCHIVO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 89
ILUSTRACIÓN 104. PROPIEDADES DE UN BOTÓN. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 90
ILUSTRACIÓN 105. CONFIGURA LAS OPCIONES DE UN MENÚ DE SALTO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 91
ILUSTRACIÓN 106. BARRA DONDE SE SELECCIONA EL FORM. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 93
ILUSTRACIÓN 107. MENÚ PARA INDICAR EL COMPORTAMIENTO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 93
ILUSTRACIÓN 108. PANEL DE COMPORTAMIENTOS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 94
ILUSTRACIÓN 109. MENÚ DE ACCIONES DEL PANEL COMPORTAMIENTOS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 94
ILUSTRACIÓN 110. VALIDAR DATOS DE LOS ELEMENTOS DE UN FORMULARIO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 95
ILUSTRACIÓN 111. MENSAJE DE AVISO DEL NAVEGADOR, CUANDO SE HA TECLEADO UN VALOR
INCORRECTO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 96
ILUSTRACIÓN 112. DEFINIR MENSAJE PARA EL USUARIO ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 97
ILUSTRACIÓN 113. PANEL DE ACTIVOS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 98
ILUSTRACIÓN 114. GUARDAR CÓMO PLANTILLA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 99
ILUSTRACIÓN 115. REGIÓN EDITABLE. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 100
ILUSTRACIÓN 116. SELECCIONAR PLANTILLA. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 101
ILUSTRACIÓN 117. REGIONES NO COINCIDENTES. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 102
ILUSTRACIÓN 118. EJEMPLO DE RECUADROS NEGROS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 104
ILUSTRACIÓN 119. PANEL DE CAPAS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 105
ILUSTRACIÓN 120. INSPECTOR DE PROPIEDADES DE CAPAS. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 105
ILUSTRACIÓN 121. MENÚ PARA AGREGAR LÍNEAS DE TIEMPO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 108
ILUSTRACIÓN 122. PANEL LÍNEA DEL TIEMPO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 108
ILUSTRACIÓN 123. IR A UN FOTOGRAMA EN LA LÍNEA DE TIEMPO. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 109
ILUSTRACIÓN 124. DEFINE LAS VECES QUE SE EJECUTARÁ LA ANIMACIÓN. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 110
ILUSTRACIÓN 125. INSERTAR BOTÓN DE FLASH. ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 110
Curso: Dreamweaver
119

DREAMWEAVER Manual de Usuario

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

DREAMWEAVER Manual de Usuario

Cargado por

Copyright:

Formatos disponibles

MANUA DEL PARTICIPANTE

Lic. Norma Fernández Osorio

El participante utilizará las

Unidad I.- Generalidades de Dreamweaver. En esta unidad los participantes

Unidad II.- Enlazar e ilustrar una página. El participante conocerá y creará

Unidad III.- Formas de ordenar la información. El participante insertará tablas y

Unidad IV.- Creación de Formularios y Plantillas. Aquí se aprenderá a insertar

Unidad I.- Generalidades de Dreamweaver

El participante conocerá las generalidades de Dreamweaver para la elaboración

Dreamweaver 8 forma parte de la suite de herramientas para la creación de

1.1 Conocimientos básicos

Las herramientas básicas de dreamweaver, son el grupo de barras y paneles que

La distribución del espacio de trabajo. Modificar el espacio de trabajo. Los grupos

Herramientas y el Panel de Propiedades

Los paneles. Barra de herramientas básicas. Barra de herramientas de diseño.

Panel de Propiedades (cont).

El panel Insertar. Barra de herramientas de datos. Barra de herramientas Spry.

Panel de Propiedades (cont).

Barra de herramientas Spry. Barra de herramientas de texto. El panel de

1.1.1 ¿Qué es Dreamweaver?

Dreamweaver 8 es un software fácil de usar que permite crear páginas web

Las funciones de edición visual de Dreamweaver 8 permiten agregar

Se puede crear tablas, editar marcos, trabajar con capas, insertar

Además incluye un software de cliente FTP completo, permitiendo entre otras

1.1.2 Requerimientos de Dreamweaver

Para poder instalar y ejecutar Dreamweaver, es preciso disponer de unos

Para Microsoft Windows:

• Procesador Pentium II a 300 Mhz o superior.

• Windows 98, Windows 2000, Windows NT (con service Pack 3 o posterior),

• Netscape Navigator o Micrsoft Internet Explorer v.4 o superior.

• 96 Mb de memoria RAM (se recomienda disponer de 128 Mb).

• 275 Mb de espacio disponible en disco.

• Una unidad de CD-ROM.

1.1.3 Iniciar Dreamweaver

Para iniciar una sesión de Dreamweaver, deberá iniciar la aplicación de la

En la barra de tareas de un clic en el botón de Inicio. Elija la carpeta Todos los

Ilustración 1. Ruta de acceso a Dreamweaver 8.

Ilustración 2. Ventana principal de Dreamweaver.

1.2- Entorno de trabajo

En Windows, Dreamweaver proporciona un diseño integrado en una única

Ilustración 3. Entorno de trabajo.

Nota: El espacio de trabajo de Windows también dispone de la opción

1.2.1 Pantalla inicial

Al arrancar Dreamweaver aparece una pantalla inicial como la siguiente, vamos a

Ilustración 4. Pantalla inicial.

1.2.2 Barras de herramientas

La barra de título. Contiene el nombre del programa (Marcromedia Dreamweaver

Ilustración 5. Barra de título.

La barra de menús. Contiene las operaciones de Dreamweaver, agrupadas en

Muchhas de las operaciones

Ilustrración 7. Barrra de herramieentas estándarr.

La baarra de heerramientas s de docu

Tamb bién nos es s posible alternar

1.2.3 Los paneles

A través de la opción Ventana, de la barra de d menús, es posible

ando sobre el botón

Ilustrración 11. Barra de herramiientas insertarr.

Vista de un documento. Se puede cambiar la vista del documento a través de la

Ilustración 12. Barra de herramientas de un documento.

La vista Diseño. Permite trabajar con el editor visual. Es la vista

Ilustración 13. Vista diseño.

La vista Código. Se utiliza para poder trabajar en un entorno totalmente de

Ilustración 14. Vista código.