Curso de Dreamweaver

Curso
Crea tu propia web

Siempre has querido que la gente pudiera ver tus textos, fotos o vdeos en Internet? Deseas montar un
sitio de juegos, cine o msica? Quieres crear foros o comunidades? Sea cual sea tu eleccin, en este curso
te vamos a ensear a disear y administrar tu propia pgina web.
Gua del curso

1. Conocer el entorno
Qu es Dreamweaver? HTML bsico. Crea tu primera pgina web. Conoce el entorno del
editor. Qu hay que hacer para tener una pgina web en Internet?
PC Today n 122
2. Los primeros pasos
Configuracin de un sitio local. Crea y edita un sitio web sin conexin a Internet. Personaliza tu
pgina. El texto en una web, sus caractersticas y estilos.
PC Today n 123
3. Aade color a tu web
Hiperenlaces. Conoce todos sus formatos, propiedades y cmo crearlos. Inserta y edita imgenes dentro de una pgina web. Crea botones y texto en flash.
PC Today n 124
4. Las tablas, los marcos y los formularios
Aprende a crear, insertar y rellenar tablas. Configura marcos y formularios con todos sus elementos. Conoce para qu sirven en un entorno web.
PC Today n 125
5. Las plantillas
Crea tus propias plantillas para realizar modelos. Establece regiones editables. Utiliza capas
para enriquecer tus pginas. Aprende a insertar multimedia.
PC Today n 126
6. Conocimientos avanzados
Comportamiento de una pgina web. JavaScripts. Edita HTML. Problemas de cdigo en la

pgina. Configura elementos adicionales para una pgina profesional.
PC Today n 127
48
122_48_55_Curso.indd 14
n la actualidad, la clebre
mxima si no ests en Internet, no existes se ha hecho
ms verdadera que nunca.
Cada da que pasa un mayor nmero de personas estn conectadas a
la Red, donde se encuentran todas
y cada una de las pginas web.
Por lo tanto, casi todo lo que existe
en el mundo real se plasma en Internet: noticias, juegos, bancos, tiendas,
hoteles, colegios... y es imposible no
hallar lo que se est buscando o, en
su defecto, algo relacionado con ello.
Hace algunos aos crear una pgina web era una tarea slo apta para
profesionales. Se trataba de un trabajo laborioso en el que se utilizaba
cdigo HTML al desnudo y se
necesitaban unos conocimientos muy
especficos. Hoy en da, salvo en el
caso de empresas que requieran de
un diseo o de funciones exclusivas

(como las transacciones electrnicas), cualquiera que tenga un PC
puede crearse una pgina web
profesional. De hecho, las ventajas de
contar con una web propia son muchas: desde crear una comunidad en
Internet donde charlar con tus amigos, intercambiar las fotos o vdeos
que elijas, hasta exponer tu trabajo
para realizar una actividad profesional si posees una empresa o quieres
tenerla en el futuro. Hay un sinfn
de posibilidades esperndote. Precisamente, en este curso aprenders a
disear y administrar tus sitios
web. Eso s, lo nico que debes tener
para comenzar tu nueva aventura en
Internet es un PC, un editor de HTML
como Dreamweaver MX 2004 (incluido en el CD que encontrars junto
a la revista) y un poco de tiempo.
www.pctoday.es
16/6/05 12:46:13
Diseo web con Dreamweaver. 1 Parte

Qu es HTML?
Trminos
Antes de continuar, conviene aclarar

qu es eso de HTML que hemos mencionado un poco antes. Las pginas que vemos en Internet estn escritas utilizando
el lenguaje HTML (Hyper Text Markup
Language). Este cdigo est basado en
etiquetas que marcan el inicio y fin de
cada elemento de la web, las cuales a su
vez disponen de atributos que permiten
definir caractersticas del elemento sobre el que actan. Las etiquetas que se
introducen en un documento HTML no
son visibles cuando ste se muestra en
un navegador (Explorer, Netscape, Mozilla, etc.); es decir, cuando un usuario
desde Internet solicita ver una pgina, el
servidor web la enva a esta aplicacin y
sta interpreta las etiquetas para dar el
FTP (File Transfer Protocol).

Protocolo de transferencia de archivos.
Por medio de l se pueden subir y
bajar archivos entre el cliente y el Host.
JavaScript. Al igual que Java o VRLM,
es una de las mltiples maneras que
han surgido para extender las capacidades del lenguaje HTML. JavaScript
no es un lenguaje de programacin
propiamente dicho, sino uno de tipo
script u orientado a documento, como
pueden ser los de macros que tienen
muchos procesadores de texto. Por lo
tanto, nunca podrs hacer un programa con JavaScript, tan slo podrs
mejorar tu pgina web con algunas
cosas sencillas (revisin de formu-
larios, efectos en la barra de estado,

etc.) y no tan fciles como animaciones con HTML dinmico, por ejemplo.
Internet. Sistema que aglutina las
redes de datos de todo mundo,
uniendo miles de ellas mediante el
protocolo TCP/IP. Es el mayor conjunto
que existe de informacin, personas,
ordenadores y software funcionando
de forma cooperativa. La i mayscula la diferencia de una internet
convencional, que simplemente une
varias redes. Al ser nica, se la conoce
tambin simplemente por la Red.
Sitio web. Conjunto de pginas web
que comparten un mismo tema e
intencin y que generalmente se
encuentran en un solo servidor. Punto

de la red con una direccin nica y al
que pueden acceder los usuarios para
obtener informacin.
URL. Acrnimo de Uniform Resource
Locater (Localizador uniforme de
recurso). Es la direccin de un recurso
de Internet. Se utiliza para indicar el
camino que permite una conexin va
HTTP, FTP, etc.
CSS. Viene de Cascade Style Sheets
y se trata de una forma generalmente
aceptada de aadir estilos como color,
fuente o escala a los documentos de
una web. Muchas aplicaciones utilizan
este estndar y gracias a l se acelera
enormemente el trabajo con texto.
Consejo
Para no volverte loco cuando tu sitio web
comience a llenarse de contenidos (con
documentos HTML, imgenes y dems
archivos), te aconsejamos que desde el
principio seas ordenado y crees varias
carpetas en las que quede bien claro
qu van a contener para evitar prdidas
de archivos y de tiempo ms adelante.
formato requerido. De esto, por supuesto, no te tienes que preocupar si utilizas

Dreamweaver, puesto que este programa
inserta automticamente las etiquetas
necesarias para construir la pgina con
la apariencia y contenido definidos en
el editor grfico. Por lo tanto, es mucho
ms visual y podrs ir viendo en todo
momento cmo te va quedando la pgina
web que ests diseando. Es una de las
ventajas que ofrece este tipo de software.
Dreamweaver MX 2004
Pero, probablemente, ahora te estars

haciendo esta pregunta: Por qu elegir
Dreamweaver MX 2004 con la enorme
variedad de aplicaciones que hay en el
mercado y que permiten crear tu propia
pgina web con un aspecto visual atractivo y sin necesidad de utilizar cdigo
HTML?. De hecho, algunas, incluso, son
gratuitas; es decir, si entras en cualquier
sitio de descarga de software y tecleas
diseo de pginas web, seguro que
te aparecen nombres como Nvu, Tren-
permite agregar
rpidamente diseos y funcionalidades a las pginas, sin la necesidad de programar
manualmente el
cdigo y sin tener
conocimientos
avanzados de ste. As, es posible
insertar de una
forma muy senciEl esquema del lenguaje HTML, en la ventana de la derecha, lla y visual tablas,
aadir imgenes,
siempre se repite con mayor o menor complejidad.
editar marcos, indyFlash o AceHTML, entre otros muchos, sertar textos, trabajar con capas, incluir
con los que podrs poner en marcha un comportamientos JavaScript, plantillas,
proyecto de estas caractersticas. Hay etc. Adems, cuenta con un software de
otras, en cambio, que son ms profesio- cliente FTP completo, que permite,
nales, como FrontPage 2003, que encon- entre otras cosas, trabajar con mapas
trars bien por separado o incluido en visuales de los sitios web y actualizarlos
el paquete Office Professional; y Adobe en el servidor sin salir del programa, toGoLive, ambas, potentes aplicaciones de da una ventaja de la que carecen otros
diseo de sitios en Internet.
programas similares.
Sin embargo, nos hemos decantado
Otra utilidad bastante interesante es la
por Dreamweaver MX 2004 porque aho- incorporacin de una nueva validacin
ra mismo es la reina de las solucio- dinmica en distintos navegadores;
nes web. Efectivamente, se trata de una es decir, que las etiquetas HTML y las reaplicacin que combina un entorno de glas CSS siempre estarn legibles, siendo
trabajo muy visual y sencillo de manejar compatibles con cualquier navegador
con todas las capacidades profesionales del mercado. Incluso, el soporte para
para crear una web totalmente perso- CSS es ms amplio y la edicin grfica,
nalizada. Para ello, cuenta con multitud como por ejemplo rotar, recortar o rede funciones. Por ejemplo, este software dimensionar, viene dentro de la interfaz
Consigue
Dreamweaver MX
de Macromedia, no slo de esta aplicacin sino tambin de otras muchas
como Flash, Studio o ColdFusion.
Estas ediciones te ofrecen la oportunidad de probar el aspecto que tiene
y las mejoras que presenta respecto a
aplicaciones anteriores. La forma de
N 122
122_48_55_Curso.indd 15
Dreamweaver MX 2004 es la reina

de las aplicaciones para la edicin y
gestin de pginas web.
Por supuesto, tambin es posible codificar completamente las transferencias

de archivos y evitar el acceso a los datos
y ficheros. Resumiendo, es uno de los
programas ms completos que hay para
dar ese toque profesional a tu web.
ce el registro gratuito, es la de acceder a cientos de extensiones creadas
exclusivamente para los productos y
a reas especiales de la comunidad,
as como la opcin de ver y administrar tu actividad en la tienda mundial
de Macromedia.
A continuacin est detallado el
proceso que debes seguir para registrarte como usuario w y conseguir tu
copia de prueba de Macromedia
Dreamweaver MX 2004.
Antes de comenzar el curso propiamente dicho y una vez que conoces

la aplicacin que vas a utilizar para
crear tu propia pgina web, Dreamweaver MX 2004, es conveniente
que sepas cmo acceder a las versiones de prueba de los productos
limitar su utilizacin es a travs del

tiempo; es decir, tendrs acceso a todas las funciones que en estos programas se incluyen por una duracin
de 30 das, pasado ese lapso tienes la
oportunidad de adquirir el software
a travs de la tienda que Macromedia tiene en la Red. Claro que, si decides no comprarlo, la aplicacin ya
no te servir de nada, porque dejar
de funcionar y debers desinstalarla.
Otra de las posibilidades que te ofre-
de Dreamweaver, sin que tengas que salir del programa.

Aparte, tambin ofrece una integracin
ms estrecha con otras herramientas de
Macromedia, como puede ser Flash MX
Professional 2004, para desarrollar experiencias dinmicas e interactivas en la
pginas, FreeHand MX 2004, para crear
ilustraciones, o Fireworks MX 2004, para integrar grficos en el sitio.
49
16/6/05 12:46:18
Curso
Teclea en tu navegador www.

macromedia.com/es, la pgina
web en espaol del fabricante. En
cuanto entres, dirgete al enlace Descargas y pulsa sobre l. Vers que aparece
una relacin de todos los productos de
la compaa a los que puedes acceder. Ve
al que pone Dreamweaver MX 2004 y

presiona sobre Probar. Eso te llevar a
otra pgina llamada Descargas de la
versin de prueba de Macromedia,
que te pide que te inscribas o que inicies
una nueva sesin.
Una vez que lo hayas rellenado,

puedes continuar con los dos
siguientes epgrafes: Encuesta de Macromedia y Preferencias
de comunicacin. En el primero, al
menos, debers escoger una respuesta a la pregunta obligatoria: Cul
de los siguientes
describe mejor
el tipo de organizacin o asociacin que usted
tiene?. El resto te
los puedes saltar si
quieres. Respecto a
la segunda, habilita
la opcin Updates
de Macromedia si
quieres que te enven noticias acerca
de tutoriales de productos de del fabricante, descuentos y
eventos especiales;
y Macromedia Edge, para suscribirte
a su boletn de noticias en formato HTML o Slo texto.
Una vez hecho esto, haz click sobre
Continuar y, en breves instantes, recibirs un correo electrnico que te
agradecer tu registro en la comunidad de Macromedia.
te bajars. Pero es preciso decir que,

antes de que te eches las manos a la
cabeza, si cuentas con una conexin
de banda ancha de, por ejemplo, 512
Kb/s, esto no te llevar mucho ms de
nueve o diez minutos. As que ten un
poco de paciencia y espera que acabe la descarga. Mientras tanto, puedes seguir navegando por la web de
Macromedia o ver y descargarte alguna de las dems aplicaciones que el
fabricante te propone en su listado,
como Contribute 3, ColdFusion MX
o FireWorks MX.
serie de datos. El correo electrnico

ya te aparece escrito. A continuacin,
y como campos obligatorios, tienes
la contrasea dos veces, tu nombre
y apellidos, la ciudad, el pas y el
cdigo postal. Opcionales son el
puesto, la empresa, la direccin, el
telfono completo y el nombre de
pantalla, que te identificar dentro
de www.macromedia.com.
50
122_48_55_Curso.indd 16
Esto te conducir a un archivo Leme que te servir de apoyo para empezar a comprender cmo funciona
Dreamweaver. De hecho, all se
describen sus caractersticas bsicas, qu necesitas para empezar,
recursos de inters adicionales
sobre productos y servicios que complementan la aplicacin y soporte tcnico,
entre otras cuestiones interesantes.
Ahora que tienes el archivo en tu escritorio, es el

momento de instalarlo al
disco duro. Observa, en primer
lugar, que el fichero viene comprimido. Por lo tanto, brelo con
WinZip o cualquier otro programa (si tienes Windows XP, slo
tienes que hacer doble click y se
abrir) y vers que contiene cuatro archivos. El que te interesa
es el que dice Instalador de
Dreamweaver MX 2004.exe,
as que pulsa dos veces sobre l
para que se inicie el proceso.
Lo primero que te encontrars
a continuacin es la pantalla de
Bienvenida de Macromedia.
Despus, pulsa sobre Siguiente
Ahora escribe tu direccin de

email en el apartado Correo
electrnico y marca, dentro
de la pregunta Tiene una contrasea para Macromedia?, la opcin
No, crear una ahora y pulsa sobre
Continuar. Eso te llevar a otra pgina donde tendrs que rellenar una
De esta forma llegars a la pantalla de descarga de la aplicacin. Eso s, antes de seguir, te

conviene echar un vistazo al enlace
llamado Requisitos del sistema,
para saber en todo momento cul es
el ordenador ideal sobre el que se
debe instalar este software. Con un
procesador Pentium III de 600 MHz,
Windows XP, 256 MB de RAM y 275
MB de espacio disponible en el disco duro tendrs ms que suficiente.
Ahora despliega el men Seleccionar
y elige la opcin Espaol / Windows
/ 88,63 Mb. Efectivamente, esta ltima cifra es el tamao del archivo que
y S. Ahora elige la carpeta de destino en

la que quieres que se almacene
la aplicacin y haz click sobre
Siguiente tres veces para que comience la carga de archivos. Esto
te llevar varios minutos, dependiendo de la velocidad de proceso de tu ordenador. Cuando acabe, se mostrar la ltima pantalla,
as pues slo te queda presionar
sobre Finalizar.
Resumiendo...
1 Teclear www.macromedia.com/es 3 Entrar en Descargas 3 Hacer click
sobre Probar
2 Crear una nueva cuenta 3 Escribir direccin de correo 3 Completar el

formulario de datos personales
3 Rellenar Encuesta de Macromedia y preferencias de comunicacin

4 Descargar aplicacin 3 Elegir la opcin Espaol / Windows / 88,63 Mb
5 Descomprimir archivo descargado 3 Ejecutar la instalacin
6 Leer el fichero de informacin de Dreamweaver
www.pctoday.es
16/6/05 12:46:26
Curso
El entorno de trabajo
Ahora que ya tienes Dreamweaver
perfectamente instalado en tu PC es
el momento de echar una ojeada, por
encima, a las herramientas que esta
aplicacin pone a tu disposicin para
hacerte el trabajo ms sencillo y cmodo. El objetivo es tomar un primer
contacto y que todos los elementos te
resulten lo ms familiares posible.
Lo primero que debes saber es que,
en Windows, Dreamweaver MX 2004
proporciona un espacio de trabajo
integrado en una sola interfaz. En
ste, todos los paneles estn incorporados en una nica ventana de la aplicacin de mayor tamao. Por lo tanto,
a continuacin se detallarn cada uno
de los elementos fundamentales de
Dreamweaver MX 2004 por orden de
importancia. Empezars por la pantalla inicial, luego vers una descripcin
de las barras de herramientas y, finalmente, la descripcin de los paneles o
inspectores. De esta forma, sabrs diferenciar entre cada una de las opcio-
nes que aparezcan en el curso y no te

perders cuando se nombre una cualidad u otra necesarias para realizar una
determinada accin.
En la pantalla inicial, la primera vez que inicies Dreamweaver aparecer un cuadro de dilogo que te permitir elegir un diseo
para el espacio de trabajo. Si cambias
de idea posteriormente, podrs trasladarte a otro distinto a travs del cuadro de dilogo Preferencias. Tienes
a tu disposicin dos espacios de trabajo. El primero es el del diseador,
que se caracteriza por utilizar MDI
(Multiple Document Interface o Interfaz para Mltiples Documentos), en el
que todas las ventanas de documentos
y los paneles estn integrados en una
ventana de aplicacin de mayor tamao, con los grupos de paneles acoplados a la derecha. Es el recomendado
para la mayora de usuarios.
Los mens
Archivo. Contienen los elementos

estndar como Nuevo, Abrir, Guardar
y Guardar todo, y otros comandos
para la visualizacin o manipulacin
del documento actual, como Vista previa en el navegador e Imprimir cdigo.
de pgina seleccionado. Adems,

a travs de l, es posible editar los
atributos de etiquetas, cambiar las
tablas y elementos de tablas y realizar
diversas operaciones relacionadas con
elementos de biblioteca y plantillas.
Edicin. Aqu estn los comandos

de seleccin y de bsqueda, como
Seleccionar etiqueta padre y Buscar y
reemplazar, adems de los de Cortar,
Copiar, Pegar, Deshacer y Rehacer.
Texto. Aqu tienes la mejor forma de

aplicar cambios al texto rpidamente.
Para ello, tienes a tu disposicin varias
opciones como el formato de prrafo,
fuente, estilo de letra, tamao, color,
alineacin y revisin de la ortografa.
Ver. Te permite obtener diversas

vistas del documento para que se
muestren u oculten diversos tipos de
elementos. Las tres vistas principales
son: Diseo, que permite trabajar con
el editor visual; Cdigo, que se utiliza
para trabajar en un entorno totalmente de programacin y no permite tener
directamente una referencia visual
de cmo queda el documento segn
se va modifica; y Cdigo y diseo,
que permite dividir la ventana en dos
zonas, la superior con el cdigo fuente
y la inferior, con el editor visual.
Comandos. Proporciona acceso a

diversos comandos, entre otros, para
dar formato al cdigo en funcin de
las preferencias, para crear un lbum
de fotos y para optimizar una imagen
empleando Macromedia Fireworks.
Sitio. Ofrece elementos del men
dedicado a administrar sitios y cargar
y descargar archivos. Algunas de
las funciones incluidas en el men
Sitio en versiones anteriores de
Dreamweaver se encuentran ahora en
el men Opciones del panel Archivos.
Insertar. Ofrece una alternativa a

la barra Insertar para la inclusin
de objetos en el documento. Desde
aqu podrs aadir imgenes, tablas,
diseos, formularios, objetos de
plantilla, hipervnculos, etiquetas y
cualquier otra funcin adicional.
Ventana. Proporciona acceso a todos

los paneles, inspectores y ventanas de
Dreamweaver. Es una forma rpida de
abrir y cerrar ventanas y de organizar
tu escritorio para que te resulte lo
ms limpio posible y no te estorben a
la hora de disear tu web.
Modificar. Con este men podrs

cambiar las propiedades del elemento
Ayuda. Para acceder a la documentacin de Dreamweaver.
52
122_48_55_Curso.indd 18
El segundo es el del codificador, que

es el mismo espacio de trabajo integrado, pero con los grupos de paneles
acoplados a la izquierda. Es un diseo
similar al que utilizan Macromedia
HomeSite y Macromedia ColdFusion
Studio, en el que las ventanas de
documentos muestran de forma predeterminada la vista de cdigo. Esta
disposicin es la recomendada para
los usuarios que escriban cdigo manualmente y que deseen contar con
una disposicin del espacio de trabajo que les resulte familiar.
Una vez seleccionado el estilo de la
interfaz te recomendamos que optes
por el primero aparecer una pantalla inicial como la de la imagen. En
ella se encuentran todos y cada uno
de los diferentes elementos que vas a
necesitar para realizar distintas tareas
a la hora de crear la pgina.
Las barras de herramientas

que utiliza Dreamweaver sirven
para aglutinar todos los comandos necesarios que te ayudarn a
disear una pgina web con el menor
esfuerzo. A continuacin, encontrars
una pequea descripcin de cada una
de ellas.
La barra de ttulo contiene el nombre del programa (Macromedia Dreamweaver MX 2004) y seguidamente
el del documento que aparecer en
el explorador. Entre parntesis, su
ubicacin y el nombre del archivo en
formato HTML. En el extremo de la
derecha estn los botones para minimizar, maximizar, restaurar y cerrar.
En la barra de mens se encuentran las operaciones de Dreamweaver, agrupadas en mens desplegables. Al hacer click en Insertar, por
ejemplo, vers las operaciones relacionadas con los diferentes elementos que se pueden aadir en Dreamweaver. Muchas de ellas se pueden
hacer a partir de estos mens, pero
para algunas es preferible o indispensable hacerlas desde los paneles.
La barra de herramientas estndar contiene iconos para ejecutar de forma inmediata algunas
de las operaciones ms habituales,
como Abrir, Guardar, etc.
La barra de herramientas de
documento posee la peculiaridad
de incluir los iconos para ejecutar
de forma inmediata algunas otras
operaciones habituales que no estn disponibles en la barra de he-
rramientas estndar. stas corresponden a las de cambio de vista del

documento, vista previa, etc.
Los paneles e inspectores

que utiliza Dreamweaver, son
ventanas flotantes similares a
las barras de herramientas. La diferencia entre panel e inspector es que,
en general, la apariencia y opciones
de un inspector cambian dependiendo
del objeto que tengas seleccionado en
cada momento. A travs de la opcin
Ventana, de la barra de mens, es posible mostrar u ocultar cada uno de los
paneles o inspectores, con lo que no
sern ninguna molestia para tu trabajo.
stos son los ms importantes:
www.pctoday.es
16/6/05 12:46:30

El inspector de Propiedades. Muestra y permite modificar las propiedades del elemento seleccionado que son
usadas de forma ms frecuente. Por
ejemplo, cuando el elemento elegido
sea texto mostrar el tipo de fuente, la
alineacin, si est en negrita o cursiva,
etc. Cuando pulsas sobre el botn de
flecha (situado en la esquina inferior
derecha) se despliega para mostrar
ms opciones. Ser la herramienta de
Dreamweaver que ms vayas a utilizar.
La barra de herramientas Insertar o panel de objetos te permite

incorporar nuevos elementos en un
documento sin la necesidad de recurrir al men Insertar. Los elementos
estn clasificados por categoras:
tablas, texto, elementos Flash, objetos de formulario, etc. Es posible
configurar este panel para que en los
botones se muestren los iconos de
los objetos, los nombres de stos o
ambos a la vez.
Resumiendo...
1 Pantalla inicial 3 Preferencias del programa 3 Espacio de trabajo 3
Diseador o Codificador
2 Las barras 3 Ttulo, Mens, Herramientas estndar y Documento

3 Los paneles 3 De propiedades y Panel de objetos
Los paneles
En el paso anterior se ha descrito lo
que eran. Ahora podrs comprobar
las principales opciones que ponen
a tu disposicin los paneles, divididas en cuatro apartados: Utilizacin,
Visualizacin, Acomplamiento y Desacoplamiento y Cambio de tamao y
del nombre.
Utilizacin. En Dreamweaver,
los paneles se organizan en
grupos. As, el panel seleccionado en un grupo de paneles aparece
como una ficha. Cada grupo puede
ampliarse o contraerse y acoplarse o
desacoplarse con otros. Incluso, los
grupos tambin se pueden acoplar a

la ventana de la aplicacin, lo que facilita su acceso sin saturar el espacio
de trabajo.
Visualizacin. Si lo deseas,
puedes mostrar u ocultar paneles y grupos en el espacio
de trabajo. As pues, para ampliar o
contraer un grupo, debes hacer click
en la flecha de ampliacin, situada en
el lado izquierdo de la barra de ttulo
del grupo. Mediante este proceso, se
expande todo el contenido del panel.
Tambin puedes presionar en el ttulo
del grupo de paneles. Ahora bien, si
lo que quieres es cerrar un grupo de
paneles con el fin de que no aparezca en la pantalla selecciona, dirgete
a Cerrar grupo de paneles en el
men Opciones de la barra de ttulo.
De esta forma, hars que desaparezca
de la pantalla.
Hay otra posibilidad, que es abrir

un grupo de paneles o un panel que
no se ven en la pantalla. Selecciona
el men Ventana y, a continuacin,
elige un nombre de panel en el men.
Una marca de verificacin al lado de
un elemento indica que ste se encuentra abierto, aunque puede estar
oculto detrs de otras ventanas. Por
tanto, te sugerimos que si no encuentras un panel, un inspector o una ventana que hayas marcado como abierto, selecciones Ventana, Organizar
paneles para disponer ordenadamente todos los que estn abiertos.
Acoplamiento y desacoplamiento. Puedes mover paneles

y grupos como desees y organizarlos para que floten en el espacio
de trabajo o se acoplen en l. La mayora de ellos slo pueden acoplarse
a la derecha o a la izquierda del rea
de la ventana de documento del espacio de trabajo integrado, mientras
que otros (como el Inspector de
propiedades y la barra Insertar)
slo pueden acoplarse a la parte superior o inferior de la ventana integrada. Para desacoplar un grupo de
N 122
122_48_55_Curso.indd 19
Opciones de la barra de ttulo del

grupo de paneles. Vers que el nombre del comando Agrupar con cam-
paneles, arrstralo por

los puntos de sujecin
(situados en el borde
izquierdo de la barra
de ttulo del grupo de
paneles) hasta que el
contorno indique que
ya no est acoplado. En
cambio, para hacerlo a
otro grupo o a la ventana integrada, arrstralo
por los puntos hasta
que su contorno indique que est acoplado.
Ahora bien, si lo que
quieres es desacoplar un panel de
un grupo, selecciona Agrupar con,
Nuevo grupo de paneles en el men
Estar en Internet
Todava ests al principio del curso, otro lado, hay que tener en cuenta
pero cuando tengas tu pgina terque estas empresas deben generar
minada, querrs subirla a Internet.
ingresos de alguna forma, por lo
Para colgar un sitio en la Red es
que se dedican a vender espacios
necesario contratar el servicio a
publicitarios dentro de las pginas,
alguna empresa con servidores que publicidad que no podrs negarte a
pueda alojarla y hacerla accesible
incluir en ellas. Por este motivo, no
las 24 horas del da. El precio por
se recomienda utilizar hospedaje
disponer de espacio propio en el
gratuito para la pgina de una
servidor depender de la empresa,
empresa, aunque s es aceptable
de lo que ocupe tu pgina en el
para una personal.
disco, del volumen
de transferencia y de
otras opciones que
quieras contratar.
Hay compaas que
ofrecen este servicio
gratuitamente, pero
con ciertas limitaciones. Poco espacio
de disco, lentitud y
el nombre de tu web
precedido por el de la
suya son algunos de
los inconvenientes,
aunque para la mayor
parte de las pginas
La mayora de empresas especializadas
personales es ms
ofrecen rendimientos mayores que las que
que suficiente. Por
hospedan de forma gratuita.
53
16/6/05 12:46:38
Curso
bia en funcin del nombre del panel
activo y el panel aparece en un nuevo
grupo de paneles propio.
Si que quieres ampliar un grupo de paneles, selecciona Maximizar grupo de

paneles en el men Opciones de la barra de ttulo del grupo de paneles. Despus, haz doble click en cualquier lugar
de la barra de ttulo del grupo y ste crecer hasta ocupar el espacio disponible.
Cambio de tamao y nombre.

Por supuesto, es posible cambiar
el tamao y el nombre de los grupos de paneles en funcin de tus necesidades. Para cambiar el primer concepto,
puedes hacer lo siguiente. En el caso de
los paneles flotantes, arrastra el conjunto
de grupos para ajustar su tamao de la
misma manera que lo hara con una ventana del sistema operativo. Por ejemplo,
arrastra el rea de ajuste de tamao de la
esquina inferior derecha del conjunto de
grupos de paneles. En el de los paneles
acoplados, arrastra la barra de separacin que hay entre los paneles y la ventana del documento.
Resumiendo...
1 Utilizacin 3 Ampliarse o contraerse 3 Acoplarse o desacoplarse
2 Visualizacin 3 Opciones 3 Cerrar grupo de paneles
3 Acoplamiento y desacoplamiento
3 Opciones 3 Agrupar con 3 Nuevo grupo de paneles
4 Maximizar paneles Opciones 3 Maximizar grupo de paneles
Tu primera pgina con HTML

Ahora que ya conoces las funciones
bsicas de Dreamweaver MX 2004,
puedes crear una pgina web sencilla, con varios estilos de texto, alguna imagen que la ilustre y un enlace
a otra pgina o sitio web. De hecho,
desarrollar sto slo te llevar unos
pocos minutos, y aprenders cmo
trabajar con los elementos bsicos de
los que estn hechas la mayora de las
Para empezar, abre la aplicacin Dreamweaver y selecciona

la opcin Abrir, Documento
Nuevo. Una vez en el men, selecciona la categora Pgina bsica, HT-
na seguido de la terminacin .net,

.org, .es o .com, y adems
su coste no es excesivamente caro,
dependiendo la opcin de hospedaje
que elijas. Y es que, a la hora de pactar un servicio de este tipo tambin
hay que tener en cuenta el nmero de
cuentas de correo electrnico propias
que pueden habilitarse y si dispones
de una base de datos para poder
acceder a ella a travs de programacin va web, aunque esto ltimo ser
til slo para usuarios
avanzados.
Por ltimo, algunas
de las empresas ms
conocidas dentro del
mundo del hospedaje
son www.arsys.es,
www.amen.es y www.
acens.com. Por lo que
respecta al gratuito,
muchas son las compaas que lo ofrecen,
desde los mismos
proveedores de Internet
hasta compaas que
albergan comunidades
enteras, como www.
En funcin del contrato que se defina el renwebdominio.com.
dimiento de las pginas ser mayor o menor.
54
122_48_55_Curso.indd 20
Lo siguiente es insertar una imagen.

Para hacerlo, ha de
estar accesible. Para ello,
debe encontrarse en el
disco duro, en un CD o en
un disquete. Muchas de
las imgenes que vers en
Internet se pueden copiar
al disco duro. Al hacer
click con el botn derecho del ratn sobre el archivo con la imagen que
quieres traer de Internet,
pginas web. Si nunca has hecho una,

ste es el momento para descubrir lo
fcil que es.
Escoger el dominio
Una vez que hayas finalizado este
curso y que tengas totalmente acabada tu pgina web, debers contar con
un dominio para que los internautas
puedan visitarla. Como te comentbamos ms atrs, en este sentido,
puedes elegir entre los servicios de
hospedaje que te ofrece cualquier
empresa dedicada a esto u optar por
los gratuitos. Ni que decir tiene que la
primera opcin es la mejor, porque te
permitir tener el nombre de tu pgi-
Por ltimo, para cambiar el nombre

de un grupo de paneles selecciona
Cambiar nombre de grupo de paneles en el men Opciones de la barra de ttulo del grupo. Slo debers
introducir un nuevo nombre y hacer
click en Aceptar.
ML. Seguidamente
introduce un texto
estndar que te sirva como ejercicio.
Ahora puedes
modificar el ttulo y el color
de fondo. Para ello,
haz click en e l men
Modificar y elige la
opcin Propiedades
de la pgina. En la ventana que se abra,
escribe el ttulo Mi primera pgina. En
Color de fondo pulsa sobre la pestaa
y elige el que ms te guste. Luego presiona sobre el botn Aceptar.
se abre una ventana con una opcin

similar a Guardar imagen como...
(dependiendo siempre del navegador
que utilices), que permite grabar sta
en un fichero del disco duro. Copia la
imagen que ms te
guste, de Internet o
la tuya propia y gurdala en la carpeta de
imgenes.
Ahora tienes
que insertarla
debajo de la
segunda lnea de texto. En primer lugar,
debes situar el cursor
al final de la segunda
lnea y pulsar un re-
www.pctoday.es
16/6/05 12:46:48

torno (Enter) para ir a una nueva lnea.
Despus debes dirigirte al men Insertar, a la opcin Imagen. En la nueva
ventana que aparece debers buscarla
en la carpeta en la que la habas guardado, y despus seleccionarla.
Glosario
ActiveX. Controles que se pueden
implementar en diferentes lenguajes de
programacin e insertarlos en una web
para proporcionar una funcionalidad,
como secuencias de animacin, que no
est directamente disponible en HTML.
.org (organizacin sin nimo de lucro),

.net (operacin de la red), .gov
(Gobierno de Estados Unidos) y .mil
(ejrcito de Estados Unidos). Adems, la
mayora de los pases tienen uno propio.
Dominio. Sistema de denominacin de
Hosts en Internet el cual est formado
por un conjunto de caracteres que identifican un sitio de la Red accesible por
un usuario. Los dominios van separados
por un punto y jerrquicamente estn
organizados de derecha a izquierda.
stos se establecen de acuerdo al uso
que se le da al ordenador y al lugar
donde se encuentre.
ASP (Active Server Pages). Tecnologa

desarrollada por Microsoft para sus servidores de sitios web. Una pgina ASP
es una HTML que incluye uno o ms
scripts (pequeos programas).
DNS (Domain Name System). Sistema
de Nombres de Dominio. El DNS es un
servicio de bsqueda de datos de uso
general, distribuido y multiplicado. Su
utilidad principal es la de encontrar
direcciones IP de sistemas centrales
(hosts), basndose en los nombres
de stos. El estilo de los nombres
de hosts utilizado actualmente en
Internet es llamado nombre de dominio. Algunos de los ms importantes
son: .com (comercial y empresas),
.edu (educacin y centros docentes),
Ha llegado el momento de editar el texto que previamente

has introducido. Ahora vas a
pasar a cambiar un poco su formato. Para ello,
necesitas visualizar el
Inspector de propiedades que se encuentra
normalmente en la parte
inferior de la ventana.
Selecciona la primera
lnea de texto y cambia
el formato por Encabezado 1 y el color
por el que ms te guste,
tal y como se muestra en
la siguiente imagen. Esta
lista te ahorra tiempo a
Hipervnculo. Enlace existente en un

documento hipertexto que te conduce a
otro que puede ser o no de hipertexto.
Hospedaje. El hospedaje o Hosting se
refiere al ordenador, comnmente denominado servidor, donde los usuarios se
conectan para acceder a diversos servicios, tales como el correo electrnico y
los sitios web, por ejemplo. La rapidez y
o html. Por ejemplo, puedes denominarlo pctoday1.htm o, simplemente, pctoday1, ya que el programa se
encargar de aadir la extensin apropiada de forma automtica. Sin embargo,
Despus de este paso, la apariencia de la primera lnea habr

cambiado. Selecciona la imagen
y las dos ltimas lneas de texto y pulsa
sobre el botn de centrado. Una vez hayas puesto en el centro la imagen y las
otras dos lneas siguientes, selecciona
la segunda lnea de texto, que an no
ha sido modificada. Cambia el Formato
por Encabezado 3. Selecciona de
nuevo la ltima lnea, y en Vnculo introduce http://www.as.com, para crear
un enlace a esa otra pgina.
la hora de asignar varias caractersticas a un carcter o un prrafo completo. Puedes probar con varios de
ellos para ver el resultado que proporciona cada uno.
Host. Usado a veces como sinnimo

de mainframe, en realidad identifica al
ordenador central en un sistema informtico complejo.
ISS (Internet Information Server). Se
trata de uno de los servicios incorporado en las ltimas versiones de Microsoft
Windows, que convierte al ordenador
en un servidor de Internet o Intranet; es
decir, que puede publicar pginas web
tanto local como remotamente a travs
de un servidor web.
PHP (Pre-procesador Hipertexto).
Es un lenguaje de programacin
implantado en HTML. La mayora de
su sintaxis est prestada de los lenguajes C, Java y Perl, con la inclusin
de algunos rasgos nicos de PHP. Su
funcin es permitir a los desarrolladores de sitios web escribir rpidamente
pginas generadas dinmicamente.
comviene que especifiques la extensin

como "htm", para que la reconozca cualquier aplicacin un poco antigua.
Como habrs comprobado, crear una
pgina web simple no puede ser ms
sencillo. Ahora bien,
con este curso, podrs
profundizar un poco
ms y darle un toque
realmente profesional
a tus diseos. Y eso
es precisamente lo
que aprenders en las
prximas entregas. Claro que, antes de nada,
conviene conocer bien
el entorno de trabajo
en el que te vas a tener
que mover.
Resumiendo...
1 Abrir 3 Documento nuevo 3 Pgina bsica 3 HTML 3 Introducir texto
estndar
2 Modificar 3 Propiedades de la pgina 3 Cambiar ttulo 3 Color de

fondo 3 Aceptar
Despus de todos estos pasos,

puedes ver cmo ha quedado el
documento pulsando la tecla F12
de la zona superior del teclado. Por ltimo, guarda el documento. Ya sabes que
puedes hacerlo a travs del men Archivo, desde la opcin Guardar. Por supuesto, puedes llamar al documento como lo desees, pero siempre teniendo en
cuenta que la extensin ha de ser htm
3 Insertar imagen 3 Elegir una de Internet 3 Guardar como 3 Carpeta

de imgenes
4 Insertar 3 Imagen
5 Editar texto 3 Cambiar formato
6 Centrar lneas 3 Formato 3 Vnculo 3 Enlace a otra pgina
7 Tecla F12 3 Archivo 3 Guardar con extensin htm
N 122
122_48_55_Curso.indd 21
el funcionamiento de ste dependen del

servidor, el sistema operativo utilizado y
el ancho de banda, entre otras cosas.
55
16/6/05 12:46:55
Curso
Los primeros pasos

Ahora que ya conoces el entorno de trabajo de Dreamweaver MX 2004, y has hecho tus pinitos
en el mundo del diseo con un ejemplo bsico de creacin de una pgina web en HTML, llega el momento
de configurar tu sitio y comenzar a darle forma a tu proyecto desde los cimientos.
Gua del curso

Qu es Dreamweaver? HTML bsico. Crea tu primera pgina web. Conoce el entorno
del editor. Qu hay que hacer para tener una pgina web en Internet?
PC Today n 122
Configuracin de un sitio local. Crea y edita un sitio web sin conexin a Internet.
Personaliza tu pgina. El texto en una web, sus caractersticas y estilos. PC Today n 123
Hiperenlaces. Conoce todos sus formatos, propiedades y cmo crearlos. Inserta y edita
imgenes dentro de una pgina web. Crea botones y texto en flash.
PC Today n 124
Aprende a crear, insertar y rellenar tablas. Configura marcos y formularios con todos
sus elementos. Conoce para qu sirven en un entorno web.
PC Today n 125
5. Las plantillas
Crea tus propias plantillas para realizar modelos. Establece regiones editables.
Utiliza capas para enriquecer tus pginas. Aprende a insertar multimedia. PC Today n 126

PC Today n 127
48
123_48_54_Curso.indd 14
ntes de comenzar a trabajar

de forma directa en tu pgina
web, debes configurar un sitio en Dreamweaver MX 2004
para disponer de un espacio donde se
ubicar tu pgina web con todos sus
contenidos. En esta aplicacin de Macromedia, un sitio consta normalmente
de dos partes. En primer lugar, contiene un conjunto de archivos situados en
un equipo local (denominado el sitio
local), que en tu caso ser el disco duro de tu ordenador; y, en segundo trmino, se encuentra una ubicacin en
un servidor web remoto donde se debern cargar los archivos cuando estn
preparados para ponerlos a disposicin pblica (llamado el sitio remoto).
El mtodo ms comn para crear
un sitio web utilizando este programa
consiste en desarrollar y editar pginas en el disco local y, a continuacin,
cargar las copias de esas pginas en

un servidor web remoto para ponerlas
a disposicin de todos los internautas
en la Red. Evidentemente, tambin se
puede utilizar Dreamweaver de otras
formas. Por ejemplo, ejecutando un
servidor web en el sistema local, cargando los ficheros en un servidor para la realizacin de pruebas, editando
los archivos sin definir un sitio o bien
utilizando un disco montado como si
se tratara del disco local. Sin embargo, lo ms sencillo para comenzar, y
por lo que nos hemos decantado a
la hora de guiarte a lo largo de este
curso, es trabajar en modo local
y, posteriormente, realizar la carga de
los archivos en un servidor remoto.
Ya vers cmo, cuando lo pongas en
marcha unas cuantas veces, te va resultar un proceso muy sencillo y que
no te llevar demasiado tiempo.
www.pctoday.es
1/7/05 14:22:01

Consejo
En Dreamweaver, el trmino "sitio" se
emplea para referirse a cualquiera de
los siguientes conceptos:
Sitio web: serie de pginas en un
servidor que el visitante ve utilizando
un navegador.
Sitio remoto: archivos del servidor
que componen un sitio web desde
el punto de vista del autor, no del
visitante.
Sitio local: archivos del disco local
que corresponden a los archivos del
sitio remoto. En el flujo de trabajo de
Dreamweaver ms habitual, los archivos se editan en el disco local y
despus se cargan en el sitio remoto.
Definir un sitio
de Dreamweaver
Antes de pasar a la descripcin detallada de cmo hacer lo anteriormente

citado y de crear las pginas que va a
contener, es preciso disear y planificar cmo ser el sitio web. Como bien
sabes, por este concepto se entiende
el conjunto de archivos y carpetas, relacionados entre s, con un diseo u
objetivo comn.
La creacin de un sitio web suele comenzar con la planificacin. Debes decidir cuntas pginas desarrollars,
qu contenido aparecer en cada una,
el diseo que tendrn stas y cmo se
conectarn y vincularn entre s.
La forma habitual de trabajar es crear
una carpeta en tu disco duro. Los documentos HTML normalmente se guardan
dentro de dicha carpeta, mientras que
para las imgenes, las hojas de estilo y
todos los extras que quieras aadir, debes establecer otras carpetas dentro de
la principal. El objetivo es disponer de
una organizacin perfecta de los archivos, para no liarte, encontrar lo que
buscas ms rpidamente y que todo se
halle perfectamente ordenado. Esto es
lo que se conoce como sitio local.
Una vez que tengas creadas todas
las pginas, llegar el momento de
subir esos archivos a un servidor
web, en el denominado sitio remoto,
lo que equivale a publicar el sitio, de
modo est disponible en la Red y los
internautas puedan consultarlo all
siempre que quieran.
La organizacin de los archivos en un
sitio permite administrarlos, compartirlos, mantener los vnculos automaticamente, utilizar un software FTP para
cargarlo local en el servidor, etc.
En el equipo remoto...
Servidor. Genricamente, es el dispositivo de un sistema que resuelve
las peticiones de otros elementos,
denominados clientes. Entrando ms
en detalle, se trata del ordenador,
conectado a una red, que pone sus
recursos a disposicin del resto
de los integrantes de sta. Suele
utilizarse para mantener datos centralizados o para gestionar recursos
compartidos. Internet es, en ltimo
trmino, un conjunto de servidores
que proporcionan servicios de transferencia de ficheros, correo electrnico o pginas web, entre otros.
Sitio web (local y remoto). Es un
conjunto de archivos electrnicos y
pginas web referentes a un tema
en particular, que incluye una pgina
inicial de bienvenida, generalmente
denominada home page, con un
nombre de dominio y direccin en
Internet especficos. Estos sitios
son empleados por las instituciones
pblicas y privadas, organizaciones
e individuos para comunicarse
con el mundo entero. En el caso
particular de las empresas, este
Configura un sitio local (I)
Para copiar los archivos de

muestra, debes establecer una
nueva carpeta y asignarle el
nombre Sites-Local en la carpeta de usuario de tu disco duro. Por
Ahora localiza la carpeta GettingStarted en el

lugar donde hayas instalado Dreamweaver en el disco
duro. Si Dreamweaver est en
su ubicacin predeterminada,
la ruta de la carpeta ser sta:
C:\Program Files\Macromedia\
Dreamweaver MX2004\
Samples\GettingStarted\
Applications/Macromedia
Dreamweaver MX 2004/
Samples/GettingStarted
ejemplo, crea una de las carpetas siguientes, segn el sistema operativo

que utilices:
El siguiente paso es copiar la

carpeta GettingStarted dentro
de la ubicacin Sites-Local que
acabas de crear. Una vez que hayas realizado este proceso, es recomendable
que definas la carpeta como carpeta

local de Macromedia Dreamweaver.
De esta forma, conseguirs que en ese
lugar donde vas a guardar todos los
documentos de tu pgina web la aplicacin tenga a mano todos los activos.
C:\Documents and Settings\

tu_nombre_de_usuario\
Consejo
Si utilizas un sistema Macintosh, debes
tener en cuenta que en tu carpeta de
usuario encontrars ya creada una carpeta llamada Sites. No la utilices como
carpeta local, ya que te servir para colocar tus pginas con el fin de hacerlas
accesibles al pblico cuando utilices
Macintosh como servidor web.
Resumiendo...
1 Archivos de muestra 3 Copiar los archivos en una carpeta del disco duro
2 Localizar la carpeta GettingStarted 3 Disponible tanto en
Windows como Macintosh
3 Carpeta local 3 Definir una carpeta concreta como raz
N 123
123_48_54_Curso.indd 15
Nombres de archivo. Es recomendable que el archivo correspondiente a la pgina inicial del sitio
web se llame index.htm o index.
html, ya que los navegadores buscan ese nombre cuando se intenta
acceder a una URL genrica. La
diferencia entre una extensin y
otra ya no tiene demasiada importancia, ya que los navegadores
modernos identifican ambas.
A la hora de crear un tu sistema de

archivos local, puedes colocar los activos existentes (imgenes u otro tipo
de contenido) en una carpeta dentro
de la carpeta raz del sitio local. Posteriormente, cuando
ests listo para aadir contenido a las
pginas, tendrs los
activos listos para
utilizar.
Los archivos de
muestra incluidos
con Dreamweaver
contienen activos
para el sitio que crears en esta entrega. Como has visto anteriormente,
el primer paso en la creacin del sitio es copiar los archivos de muestra
de la carpeta de aplicacin de Dreamweaver en la carpeta adecuada del
disco duro.
En este curso, hemos elegido la estructura y ubicaciones recomendadas
de las carpetas del sitio local, para que
resulte ms sencillo seguir los pasos.
Sin embargo, si los archivos de muestra estn en la ubicacin recomendada, no podrs utilizar los vnculos
relativos a la raz del sitio en el sitio
de muestra. Por lo tanto, en este curso
vas a utilizar nicamente vnculos relativos al documento.
Mis documentos\Sites-Local
/Users/tu_nombre_de_usua
rio/Documents/Sites-Local
mensaje tiene que ver con la oferta

de sus bienes y servicios a travs
de Internet, y en general para hacer
ms eficaces sus herramientas de
marketing. Los documentos que
integran el sitio web pueden ubicarse en un equipo en otra localidad,
o inclusive en otro pas. Ahora bien,
el nico requisito es que el equipo
en el que residan los documentos
est conectado a la red mundial de
Internet. Este equipo de cmputo o
servidor web, como se le denomina
tcnicamente, puede contener ms
de un sitio web y atender concurrentemente a los visitantes de cada
uno de los diferentes sitios.
49
1/7/05 14:22:09
Curso
Configura un sitio local (II)

Es el momento de crear una definicin
del sitio y establecer una carpeta local
mediante el cuadro de dilogo Definicin del sitio. Puedes utilizarlo tanto
en la vista Bsica como en la Avanzada. La diferencia
entre una y otra
es que la primera
te orientar paso
a paso a lo largo
del proceso de
configuracin del
sitio. Claro que, si
prefieres editar la
informacin del
sitio sin esta orientacin, puedes hacer click en la ficha
Avanzadas en cualquier momento.
Al principio, el mtodo guiado resulta muy explicativo, pero como suele
suceder con todos los programas que
ofrecen esta opcin, pronto abandorans esta opcin y utilizars la forma
ms "profesional".
Precisamente, el siguiente procedimiento describe cmo configurar
las opciones de la versin Bsica del
cuadro de dilogo, que tambin se denomina asistente para la Definicin
del sitio.
sitio. Si ya lo has utilizado antes, ste

mostrar la ficha Avanzadas, presiona sobre la opcin Bsicas. Si ya lo
tienes delante, observars la primera
pantalla del asistente para la defini-
cin del sitio. En ella te solicitar que

introduzcas un nombre que identifique tu sitio local. Ten en cuenta que
pronto tendrs una coleccin de pginas web que debers tener controladas por medio de nombres que las
diferencien bien.
As pues, para poner nombre al

sitio, en el cuadro de texto, introduce un nombre que identifique el sitio en Dreamweaver. Puedes
elegir el que desees. Por ejemplo, el
tuyo, el de la pgina que vayas a crear...
Para definir un sitio Web, en

primer lugar, selecciona Administrar sitios dentro del
men Sitio. En ese momento, aparecer el cuadro de dilogo Administrar sitios. Una vez en l, haz click
en la opcin Nuevo y selecciona Sitio en el men siguiente. Aparecer
el cuadro de dilogo Definicin del
La idea es sentirte identificado con la

denominacin que le vas a dar, aunque siempre puedes darle un nombre
genrico.
Ha llegado el momento de editar

localmente el sitio. Haz click en
el icono de carpeta situado junto
al cuadro de texto, que permitir especificar la carpeta del disco local en la
Tras dar
nombre
a tu sitio
local, pulsa en
Siguiente para continuar.
Aparecer la
prxima pantalla del asistente y en ella te preguntar si deseas trabajar con una
tecnologa de servidor. Selecciona la
opcin No para indicar que el sitio es
esttico, por el momento, sin pginas
dinmicas. Al pulsar en Siguiente
para continuar aparecer la pantalla
del asistente que te dir cmo deseas

trabajar con los archivos. En este momento, elige la opcin con la etiqueta
Editar localmente y luego cargar
al servidor de prueba remoto.
Por supuesto, puedes trabajar con los archivos de
varias formas durante el
desarrollo del sitio, con la
prctica averiguars cul
es ms apropiada en cada
caso, pero a los efectos de
este curso, selecciona esta
opcin y contina con el siguiente paso.
que Dreamweaver debe almacenar la

versin local de los archivos del sitio.
Sin embargo, es ms sencillo detallar
un nombre de carpeta exacto utilizando Examinar, en lugar de escribir la
ruta. Aparecer el cuadro de dilogo
Elegir la carpeta raz local para el
sitio. Sitate en
la carpeta SitesLocal del disco
local, que es la
carpeta en la
que has copiado
los archivos de
muestra. Selecciona la carpeta
GettingStarted dentro de Sites-Local. brela y presiona Seleccionar.
El siguiente paso que debes dar

es conectarte con un servidor
remoto. El asistente te preguntar cmo deseas que se conecte al
servidor remoto. Por ahora, selecciona Ninguno en el men emergente,
ya que, por el momento, lo nico
que necesitas para comenzar a crear
una pgina es la informacin del sitio local. Pulsa en Siguiente para
continuar. De esa forma, llegars a la
Instalar un servidor web

Un servidor web es un software que
suministra pginas web en respuesta
a las peticiones de los navegadores. En ocasiones, tambin se hace
referencia a un servidor web como
servidor HTTP. Supn que utilizas IIS
para desarrollar aplicaciones web. El
nombre predeterminado del servidor
web es el nombre del equipo. Puedes
cambiar ste, modificando el nombre
del equipo. Si tu PC no tiene ningn
nombre asignado, el servidor utilizar
como nombre la palabra localhost. El
nombre del servidor corresponde a la
carpeta raz del servidor (en un equipo
Windows), que es muy probable que
sea C:\Inetpub\wwwroot.
Si eres usuario de Windows, puedes
instalar y ejecutar los siguientes servidores web en tu equipo: Microsoft
Personal Web Server (PWS) o Internet
50
123_48_54_Curso.indd 16
Information Server (IIS), una versin de

PWS con todas las funciones. Tambin
puedes cargar el servidor web en un
equipo Windows conectado en red para
que otros desarrolladores de tu equipo
puedan utilizarlo. Puede que PWS o
IIS ya estn instalados en tu equipo.
Comprueba la estructura de carpetas

para averiguar si tienes una carpeta
denominada C:\Inetpub o D:\Inetpub.
PWS y IIS crean estas localizaciones
durante su instalacin. Si no existen,
sigue uno de estos procedimientos:
para Windows 98, copia el archivo de
configuracin PWS del CD de Windows

98 en tu disco duro. El archivo se
encuentra en la carpeta Add-Ons/PWS.
A continuacin, instala el servidor
Web. En el caso de que cuentes con
Windows 2000 o XP Professional,
instala IIS. Si por el contrario utilizas
Windows XP, carga IIS.
Para instalar PWS haz doble click en
el archivo de instalacin PWS del CD
de Windows 98. Sigue las instrucciones del asistente hasta que pida que
especifiques el directorio principal
de publicacin web. Acepta la opcin
predeterminada: C:\Inetpub\wwwroot.
Por ltimo, para instalar IIS en Windows
2000 y XP sigue estos pasos: selecciona Inicio / Configuracin / Panel de control / Agregar o quitar programas o bien
puedes ir a Inicio / Internet Information
Services (IIS) / Siguiente.
www.pctoday.es
1/7/05 14:22:17

siguiente pantalla del asistente, que
te mostrar un resumen de la configuracin, con los datos locales que
has sealado y con la informacin del
sitio remoto y el servidor de prueba
que, en este caso, te pondr que lo
fijars ms adelante. A continuacin,
presiona en el botn Completado
para terminar. De nuevo, tendrs en
pantalla el cuadro de dilogo Admi-
nistrar sitios, en el que se muestra

el nuevo sitio. Haz click en la opcin
Listo para cerrarlo.
En este momento, el panel Archivos
mostrar la nueva carpeta raz local
correspondiente al sitio actual. Por
cierto, ten en cuenta que la lista de
ficheros del panel Archivos acta como si de un administrador de ficheros
se tratara, puesto que permite copiar,
pegar, eliminar,
mover y abrir documentos como si
se fuera el escritorio del ordenador.
As pues, cualquier
cambio de directorios que realices a
travs de esta ventana afectar a la
disposicin y situacin de los archivos cuando cierres
la aplicacin.
Resumiendo...
1 Definir un sitio Web 3 Men Sitio 3 Administrar sitios 3 Nuevo 3
Sitio 3 Definicin del sitio 3 Bsicas 3 Definicin del sitio
2 Poner nombre al sitio 3 En el cuadro de texto, introducir un nombre

que identifique el sitio en Dreamweaver
3 Servidor 3 Asistente tecnologa de servidor 3 Editar localmente

y luego cargar al servidor de prueba remoto
4 Editar localmente 3 En el cuadro de dilogo elegir la carpeta raz

local para el sitio 3 Carpeta Sites-Local del disco local, que es la
carpeta en la que has copiado los archivos de muestra 3 Seleccionar
la carpeta GettingStarted
5 Trabajar en local 3 Rechazar la opcin Trabajar en remoto 3

Resumen de la configuracin 3 El panel Archivos mostrar ahora
la nueva carpeta raz local correspondiente al sitio actual
Definir una carpeta remota

Despus de crear un sitio web, el paso siguiente es publicarlo cargando los
archivos en un servidor web remoto.
Antes de continuar, debers disponer
de acceso a un
servidor web remoto (como, por
ejemplo, el servidor de tu proveedor de Internet,
una intranet dentro de la empresa, etc.). Por supuesto, tambin
puedes ejecutar
un servidor web
en tu equipo local, aunque esto
te lo explicaremos ms adelante.
El procedimiento funciona ms correctamente si la carpeta raz remota est
vaca. Si el sitio remoto ya contiene
archivos, crea una carpeta vaca en el
sitio remoto (en el servidor) y utilzala
como raz remota. Una vez realizada esta operacin, asigna a esta carpeta vaca
el mismo nombre que el de la carpeta
raz local. Por ejemplo, en el caso del
sitio con el que estamos trabajando en
este curso, puedes asignarle el nombre
GettingStarted para que coincida con
el nombre de la carpeta raz local.
correspondientes. Si el servidor admite

SFTP, selecciona la opcin Utilizar FTP
seguro (SFTP). Presiona en la opcin
de Conexin de prueba.
vidor en Internet son FTP y SFTP. El ms

utilizado para conectarse a un servidor
de la intranet o al equipo local si lo utilizas como servidor web es Local/red.
As pues, lo ms normal es que

te conectes por FTP, por lo que
debers seguir estos pasos. Introduce el nombre del host del servidor
(como ftp.macromedia.com). En el cuadro de texto donde
se te pregunta qu
carpeta contiene los
archivos, introduce
la ruta del servidor
desde la carpeta raz
FTP hasta la del sitio
remoto. A continuacin, introduce tu
nombre de usuario
y contrasea en los
cuadros de texto
A continuacin, presiona en el
icono de carpeta situado junto
al cuadro de texto y accede a
la carpeta raz del sitio remoto. Si lo
prefieres, puedes desactivar la opcin
Actualizar lista de archivos remotos automticamente para aumentar
la velocidad. Una vez introducida la
informacin adecuada, haz click en Siguiente. No actives la proteccin y la
desproteccin de archivos para el sitio.
Presiona Siguiente y luego Listo.
N 123
123_48_54_Curso.indd 17
na. Como vers, la forma de identificarla es mediante el smbolo de una

carpeta de color verde al lado de su
nombre. A continuacin, fjate en la
barra de herramientas del panel Archivos. All vers un icono de flecha
azul que apunta hacia arriba y que se
denomina Colocar archivos. Pulsa
sobre l para que Dreamweaver copie
los ficheros a la carpeta remota definida. Esta operacin puede ocupar
cierto tiempo, ya que la aplicacin
debe cargar todos los archivos en el
sitio, incluidas las diferentes versiones
de algunos ficheros, para utilizarlos
con distintos tutoriales. Por ltimo,
abre el sitio remoto en un navegador
web para comprobar que todo se ha
realizado correctamente.
Para administrar sitios, selecciona

el que has creado anteriormente
y haz click en Editar / Bsicas /
Siguiente (varias veces hasta que se resalte el paso Compartiendo archivos
en la parte superior del asistente). En el
men emergente Cmo conecta con
su servidor remoto?, elige un mtodo para conectar con el sitio remoto. En

este punto debes saber que los mtodos
ms habituales para conectarse a un ser-
Despus de configurar las carpetas local y remota, puedes

cargar los archivos de la carpeta local al servidor web que acabas de
establecer. Y es que, con el fin de que
las pginas sean accesibles para todos los internautas a travs de la Red,
debers cargarlas, incluso aunque el
servidor web se ejecute en el equipo
local. Para hacer esto en un sitio remoto debes seleccionar en el panel
Archivos la carpeta raz local del
sitio, que es la que creaste anteriormente y que ser la nica posibilidad
de eleccin que tendrs en esa venta-
51
1/7/05 14:22:26
Curso
Resumiendo...
1 Seleccionar el modo de conexin servidor en Internet 3 FTP / SFTP
2 Nombre del host del servidor 3 Nombre de usuario y contrasea en 3
Conexin de prueba
teccin de archivos para el sitio
Doble click en Colocar archivos de la barra de herramientas del

panel Archivos
Inserta y edita textos
Para aadir texto a un documento de Dreamweaver, puedes

escribir texto directamente en la
ventana del documento, cortar y pegar
texto e, incluso, importarlo de otros
vos de la carpeta local al servidor web 3 Seleccionar Panel de archivos

3 Archivos 3 Seleccionar la carpeta raz local del sitio 3
3 Carpeta raz del sitio remoto 3 No actives la proteccin y la despro-
Una vez que conoces todo lo referido al

sitio local y remoto, es el momento de
dar otro paso: la insercin y la edicin
de textos en tu pgina web. En este sentido, debes saber que Dreamweaver MX
2004 ofrece varias formas de aadir
texto y aplicarle formato en un documento. Puedes insertar texto, establecer
la fuente, el tamao, el color y los atributos de alineacin. Asimismo, puedes
crear y aplicar tus propios estilos personalizados mediante el uso de las CSS
(hoja de estilos en cascada).
Dreamweaver permite aadir texto a
pginas web escribiendo el texto directamente en una pgina, copiando
y pegando texto de otro documento o
arrastrndolo de otra aplicacin. Entre
los tipos de documentos que los profesionales de Internet reciben con contenido de texto que debe incorporarse en
las pginas web se incluyen los archivos
de texto ASCII, los archivos en formato
de texto enriquecido y los documentos
de MS Office. Dreamweaver permite extraer texto de cualquiera de estos tipos
de documentos e incorporarlo a una
pgina web.
4 Despus de configurar las carpetas local y remota 3 Cargar los archi-
documentos. Dreamweaver no mantiene el formato de texto que tena en

la otra aplicacin, pero conserva los
saltos de lnea.
Ahora vas a aplicar formato a los

prrafos. Para ello, utiliza el men Formato del Inspector de
propiedades o el submen Texto y all
elige Formato de prrafo para aplicar
las etiquetas estndar de prrafo y el encabezado. Sita el punto de insercin en
el prrafo o selecciona parte del texto
del prrafo. Despus, escoge Inspector

de propiedades y elige un formato de
prrafo (por ejemplo, Encabezado 1,
Encabezado 2, Texto con formato
predeterminado, etc.). La etiqueta HTML asociada con el estilo seleccionado
(por ejemplo, h1 para Encabezado 1,
h2 para Encabezado 2, pre para Formato predeterminado, etc.) se aplicar a todo el prrafo. Selecciona Ninguno para quitar un formato de prrafo.
Puedes alinear texto en la pgina

utilizando el inspector de propiedades o el submen Texto y
seleccionar Alinear. Asimismo, podrs
centrar cualquier elemento en una pgina usando el comando Texto / Alinear
/ Centro. Para alinear texto seleccinalo o simplemente inserta el puntero al
principio del texto. Despus, escoge Izquierda, Derecha o Centro en el Inspector de propiedades, o selecciona
Texto / Alinear y elige un comando.
en el Inspector
de propiedades.
Puedes aplicar varias a un prrafo.
Cada vez que selecciones este comando, la sangra
del texto aumenta
en los dos lados
del documento.
La forma de centrar los elementos

tambin es muy sencilla. Ten en
cuenta que puedes centrar cualquier tipo de elemento de que dispongas, no slo texto, tambin imgenes, ta-
Adicin de espaciado de prrafo.

Dreamweaver funciona de forma
similar a muchas aplicaciones
de tratamiento de textos: presiona Intro para crear un nuevo prrafo. Los
blas u otro objeto de la pgina. Para ello,

dirgete a Texto / Alinear / Centro. Por
cierto, puedes alinear y centrar bloques
completos de texto, pero no partes de un
encabezado o de un prrafo.
navegadores web insertan automticamente una lnea en blanco de espacio

entre los prrafos. Puedes aadir una
nica lnea de espacio entre los prrafos mediante la insercin de un salto
de lnea con Mays+Intro.
En cuanto al comando
Sangra, debes saber
que aplica la etiqueta
HTML blockquote al prrafo de
texto y utiliza sangra a ambos
lados de la pgina. Para aplicar y quitar sangra al texto,
sita el punto de insercin en
el prrafo al que desea aplicar
sangra, despus presiona sobre Sangra o Anular sangra
52
123_48_54_Curso.indd 18
www.pctoday.es
1/7/05 14:22:36
Las reglas horizontales (lneas)

son tiles para organizar la informacin. Separan visualmente el texto y los objetos de una pgina
con una o ms reglas. En la ventana de
documento, sita el punto de insercin
en el lugar donde quieres insertar una
regla horizontal, presiona Insertar /
HTML / Regla horizontal o en la categora HTML de la barra Insertar /
Regla horizontal.
Ahora bien, si lo que quieres es modificar una regla horizontal, sitate en la
ventana de documento / Regla horizontal / Ventana / Propiedades.
De este modo se abre el inspector de
propiedades y se pueden modificar to-
das las que se requieran. An y Al especifican el ancho y el alto de la regla en

pxeles o como porcentaje del tamao
de la pgina.
A continuacin, puedes utilizar

las opciones del inspector de
propiedades o el men Texto
para establecer o cambiar las caractersticas de fuente del texto seleccionado. Puedes establecer el tipo, el estilo
(negrita, cursiva o normal) y el tamao
de la fuente. Selecciona el texto. Si no lo
haces, el cambio se aplicar al texto que
escriba a continuacin. Para cambiar la
mao del texto seleccionado, escoge un

tamao relativo (desde +1 -1 hasta
+4 o 3) en el Inspector de propiedades o en el men Texto / Cambio
de tamao.
Estos nmeros indican una diferencia
relativa respecto al tamao de la fuente
base. El valor predeterminado de base
es 3. Por tanto, un valor de +4 produce
un tamao de fuente de 3 + 4, es decir,
7. El valor mximo del tamao de fuente es 7. Si intentas definir uno ms alto
se mostrar como 7. Dreamweaver no
muestra la etiqueta basefont (que se
encuentra en la seccin head), aunque el tamao de fuente se mostrar
correctamente en un navegador. Para
comprobarlo, compara el texto definido en 3 con el texto definido en +3.
Consejo
Los usuarios establecen el tamao de
puntos de la fuente predeterminada para sus navegadores. ste ser el tamao de fuente que vern cuando elijan
Predeterminada o 3 en el inspector de
propiedades o el submen Texto / Tamao. Los tamaos 1 y 2 aparecern
ms pequeos que el de fuente predeterminada, mientras que los tamaos 4
a 7 aparecern ms grandes. Asimismo,
las fuentes suelen aparecer con unas
dimensiones mayores en Windows que
en Macintosh, si bien Macintosh Internet Explorer 5 utiliza el mismo tamao
predeterminado que Windows.
10
Tambin se puede cambiar

el color del texto seleccionado, de modo que el nuevo
color prevalezca sobre el establecido en
Propiedades de la pgina. Si no se
ha establecido ningn color de texto all,
la aplicacin utiliza el negro como color
predeterminado. Para cambiar el tono
del texto selecciona el espacio a editar.
Despus elige un color en la paleta de
colores haciendo click en el selector
de color del inspector Propiedades o
accede a Texto / Color. Aparecer el

cuadro de dilogo del selector de color
del sistema. A continuacin, escoge un
color y haz click en Aceptar.
Existen ms modos de cambiar el color.
Uno de ellas es escribir el nombre de
ste o un nmero hexadecimal directamente en el campo del inspector de propiedades, en Modificar / Propiedades
de la pgina. Para restablecer el color
predeterminado del texto slo hay que
abrir el inspector de propiedades, hacer
click en el cuadro de color para abrir la
Consejo
paleta de colores seguros para la web y
pulsar el botn Tachado (justo el icono
cuadrado blanco y atravesado por una
lnea roja que se encuentra en la esquina superior derecha).
11
Otra de las opciones interesantes de Dreamweaver

en este punto es el objeto
Fecha, con el cual se puede insertar la
fecha actual con el formato que prefieras
(con o sin la hora) y ofrece la posibilidad
de actualizarla cada vez que se guarde el
archivo. Para insertar la fecha actual en
Si quieres que la fecha insertada se actualice cada vez que guardes el documento, selecciona Actualizar automticamente al guardar. Si deseas que la fecha se convierta en texto normal cuando
se inserte y no se actualice automticamente, desactiva esa opcin haciendo
click en Aceptar para insertar la fecha.
Por cierto, si has seleccionado Actualizar automticamente al guardar tambin puedes editar el formato de fecha
despus de insertarlo en el documento
haciendo click en el texto formateado y
seleccionando Editar formato de fecha
en el inspector de propiedades.
13
un documento, sita el punto de insercin de la ventana del documento en el

lugar donde deseas insertar la fecha, selecciona Insertar / Fecha o Comn de
la barra Insertar / Fecha. En
el cuadro de dilogo que aparece, elige el formato de da
de la semana, fecha y hora.
12
Algunos caracteres especiales se

representan en
HTML mediante un nombre o un nmero denominado entidad. HTML incluye nombres de entidad para caracteres como el smbolo de copyright
(©) el signo & (&)
y el smbolo de marca comercial re-
N 123
123_48_54_Curso.indd 19
gistrada (®).
Cada entidad tiene un nombre (como —) y un equivalente
numrico (como ). Para
insertar un carcter especial en un
documento, sita el punto de insercin de la ventana en el lugar donde quieres incluir un carcter especial.
Puedes hacerlo de dos modos: yendo a
submen Insertar / HTML / Caracteres especiales o en la categora Texto
de la barra Insertar / Caracteres.
HTML slo permite un espacio entre caracteres. Para

aadir espacio adicional en
un documento, debes insertar un espacio indivisible. Puedes establecer una
preferencia para que se aadan espacios
indivisibles en un documento de forma
automtica. Para insertar un espacio indivisible puede optar entre tres variantes:
En primer lugar, en la categora HTML
de la barra Insertar, presiona el botn
Caracteres y selecciona Insertar espacio indivisible. En segundo lugar,

mediante el men Insertar / HTML /
Caracteres especiales / Espacio indivisible. Finalmente, a travs de Control + Mays + Espacio.
fuente, selecciona una combinacin de

fuentes en el inspector de propiedades
o en el submen Texto / Fuente / Predeterminada para quitar los tipos de
fuente aplicados anteriormente y aplicar la fuente predeterminada al texto
seleccionado. Por ltimo, para cambiar
el estilo de fuente, haz click en Negrita
o Cursiva en el inspector de propiedades o elige un estilo de fuente (Negrita,
Cursiva, Subrayado, etc.) en el submen
Texto / Estilo.
Si quieres cambiar son las dimensiones de la fuente, elige un tamao (de 1 a 7) en el Inspector de
propiedades o en el submen Texto
/ Tamao. Por cierto, en lenguaje HTML
todos ellos son tamaos relativos, no de
puntos. Para aumentar o reducir el ta-
53
1/7/05 14:22:43
Curso
Resumiendo...
1 Aadir texto a un documento 3 Escribir texto, cortar y pegar texto e,
8 Configuracin y cambio de fuentes y estilos 3 Inspector de propiedades

9 Cambiar el tamao de la fuente 3 Elegir un tamao (de 1 a 7) en el ins-
incluso, importar texto de otros documentos
2 Aplicacin de formato a prrafos 3 Inspector de propiedades 3 Formato
pector de propiedades
10 Cambio del color del texto 3 Paleta de colores haciendo click en el selec-
de prrafo
3 Alineacin de texto 3 Izquierda, Derecha o Centro en el Inspector de
tor de color del Inspector de propiedades
11 Insercin de fechas 3 Fecha o Comn de la barra Insertar
propiedades
4 Centrar elementos 3 Escoge elemento 3 Texto 3 Alinear 3 Centro

5 Sangrar texto 3 Sangra o Anular sangra en el inspector de propiedades
6 Adicin de espaciado de prrafo 3 Intro para crear un nuevo prrafo
7 Utilizacin de reglas horizontales 3 Insertar 3 HTML 3 Regla horizontal
12 Insercin de caracteres especiales 3 Submen Insertar 3 HTML 3

Caracteres especiales
13 Adicin de espacio entre caracteres 3 Categora HTML de la barra

Insertar 3 Caracteres 3 Insertar espacio indivisible.
Uso de hojas de estilos

en cascada CSS
De forma predeterminada, Dreamweaver utiliza hojas de estilos en cascada
(CSS) para aplicar formato al texto.
Los estilos que aplique al texto mediante el inspector de propiedades o
los comandos de men crean reglas
CSS que se incrustan en el encabezado
del documento actual. Los estilos CSS
aportan gran flexibilidad y control al
aspecto de la pgina, desde la posicin
precisa de elementos hasta el diseo
de fuentes y estilos de texto concretos.
Adems de los estilos y de las hojas de
estilos que crea, puedes usar hojas de
estilos suministradas con Dreamweaver para aplicarlas a los documentos.
Por ltimo, el panel Estilos CSS te permite crear, editar y quitar estilos CSS,
adems de adjuntar hojas de estilos
externas a los documentos.
Puedes acceder a este panel de

dos modos: a travs del men Ventana / Estilos CSS o
Mays+F11. El panel Estilos CSS
permite visualizar la definicin de los
estilos asociados al documento actual,
adems de mostrar la jerarqua de los
estilos. Asimismo, muestra la definicin
de los estilos CSS personalizados (de
clase), las etiquetas HTML redefinidas
Atajos de teclado
Como en cualquier otra aplicacin,
Dreamweaver 2004 MX tiene la ventaja de
que, una vez que conoces el aspecto visual
del programa, puedes avanzar mucho ms
el documento y sigue uno de estos procedimientos para abrir el cuadro de dilogo Nuevo estilo CSS: en el Panel Estilos CSS selecciona Nuevo estilo CSS
(+) situado en la parte inferior derecha
del panel o Inspector de propiedades
de texto / Administrar estilos en el
men emergente Estilo / Nuevo.
rpido en la realizacin de tareas si empiezas a utilizar una serie de atajos de teclado.

A fuerza de utilizarlos, vers cmo te ahorrarn una buena cantidad de tiempo.
3
y los estilos CSS del selector. Al crear o
adjuntar hojas de estilos CSS, el nombre
y los atributos del estilo aparecern en
el panel Estilos CSS. En l aparece una
lista de todos los selectores definidos
en todas las etiquetas y hojas de estilo
importadas o vinculadas externamente.
Define el tipo de estilo CSS que

desees. Para crear un estilo personalizado que se pueda aplicar como atributo class a un rango o
un bloque de texto, selecciona Clase
Es posible crear un estilo CSS

para automatizar la aplicacin
de formato a etiquetas HTML o a
rangos de texto identificados mediante
un atributo class. Para crear un estilo
CSS nuevo Sita el punto de insercin en
(puede aplicarse a cualquier etiqueta) y

escribe el nombre del estilo en
el cuadro de texto Nombre.
Para redefinir el formato predeterminado de una etiqueta HTML especfica, elige la
opcin Redefinir etiqueta
HTML / Etiqueta.
Atajo
Funcin
Ctrl + N
Abre un documento nuevo
Ctrl + W
Cierra un documento abierto
Ctrl + S
Guarda un documento
Ctrl + Mays + S
Guardar como
Ctrl + A
Seleccionar todo
Ctrl + Alt + I
Insertar imagen
Ctrl + L
Crear vnculo
Ctrl + Alt + 9
Sangra en el texto
1 Panel Estilos CSS 3 Ventana 3 Estilos CSS o Mays+F11
Ctrl + Mays + P
Formato de prrafo
2 Creacin de un nuevo estilo CSS 3 Panel Estilos CSS 3 Nuevo estilo
Ctrl + J
Modificar propiedades de la pgina
F5
Actualizar vista de Diseo
F12
Vista previa en el navegador
F4
Ocultar paneles
54
123_48_54_Curso.indd 20
Resumiendo...
CSS (+)
3 Definir el tipo de estilo CSS 3 Clase (puede aplicarse a cualquier

etiqueta) 3 Escribir el nombre del estilo en el cuadro de texto Nombre
www.pctoday.es
1/7/05 14:22:50
Curso
Aade color a tu web

Llegamos a la tercera parte de este curso con la intencin de darle vida a tu pgina. La forma de
conseguirlo es aadir imgenes, tanto fijas como en movimiento, para que tenga un aspecto ms atractivo
y se haga ms amena de leer. Asimismo, tambin te mostraremos cmo establecer hipervnculos.
Gua del curso

Qu es Dreamweaver? HTML bsico. Crea tu primera pgina web. Conoce el entorno del
editor. Qu hay que hacer para tener una pgina web en Internet?
PC Today n 122
Configuracin de un sitio local. Crea y edita un sitio web sin conexin a Internet. Personaliza tu
pgina. El texto en una web, sus caractersticas y estilos.
PC Today n 123
Hiperenlaces. Conoce todos sus formatos, propiedades y cmo crearlos. Inserta y edita imgenes dentro de una pgina web. Crea botones y texto en flash.
PC Today n 124
Aprende a crear, insertar y rellenar tablas. Configura marcos y formularios con todos sus elementos. Conoce para qu sirven en un entorno web.
PC Today n 125
5. Las plantillas
Crea tus propias plantillas para realizar modelos. Establece regiones editables. Utiliza capas
para enriquecer tus pginas. Aprende a insertar multimedia.
PC Today n 126

PC Today n 127
52
124_52_59_Curso.indd 14
unque en el mercado puedes encontrar muchos y muy

diversos formatos de archivo
grfico, los ms utilizados para pginas web son tres: JPEG, GIF y PNG.
Entre ellos, destacan los dos primeros,
por ofrecer una mayor compatibilidad
y permitir su visualizacin en la mayora
de los navegadores. Sin embargo, cada
uno posee sus ventajas. Por ejemplo, los
PNG son los ms adecuados para casi
cualquier tipo de grfico web, debido a
su flexibilidad y su reducido tamao de
archivo. El nico inconveniente es que
su visualizacin de imgenes slo es parcialmente compatible con los navegadores Microsoft Internet Explorer (4.0 y
posteriores) y Netscape Navigator (4.04
y posteriores). Este formato de archivo
es un sustituto de GIF, con posibilidad de
color indexado, escala de grises y color
verdadero, adems de ser compatible
con un canal alfa para transparencias.

Los archivos PNG ofrecen la posibilidad
de conservar la informacin original de
capas, vectores, color y efectos (como
por ejemplo las sombras), as como poder editar elementos cuando se desee.
Por otra parte, los archivos GIF utilizan
un mximo de 256 colores y son idneos para visualizar imgenes con tonos
no continuos o con grandes reas de color homogneo, como barras de navegacin, botones, iconos, logotipos u otras
con colores y tonos uniformes.
El formato JPEG, por su parte, es el
mejor para imgenes fotogrficas, ya
que puede contener millones de colores.
A medida que la calidad de un archivo
JPEG aumenta, tambin lo hace su tamao y, por tanto, el tiempo que tarda en
descargarse. Aunque es posible conseguir un equilibrio entre la calidad y tamao comprimiendo el archivo.
www.pctoday.es
14/7/05 19:05:46
Aadir una imagen

Cuando insertas una imagen en un
documento de Dreamweaver, el programa genera automticamente una
referencia al origen de la imagen en
el cdigo HTML. Para asegurarte de
que es correcta, el archivo correspondiente deber estar en el sitio actual. En el caso de que no lo est, la
aplicacin te preguntar si deseas copiarlo en l. Adems, podrs insertar
imgenes dinmicas o que cambian
con frecuencia. Un ejemplo de esto
son los sistemas de rotacin de los
rtulos publicitarios.
Conceptos bsicos
Anclajes con nombre. Establecen
marcadores en un documento, que a
menudo se suelen colocar en un tema
especfico o en la parte superior de
una pgina, para posteriormente crear
vnculos a la posicin especificada.
Muestreo. Se trata de la posibilidad de aadir o quitar pxeles en
archivos de imagen JPEG y GIF.
Asimismo, podrs cambiar su tamao para que se parezcan lo mximo
posible a la imagen original y de
mejorar el rendimiento de descarga.
chero de imagen y convierte sta en una

ruta relativa al documento.
Recorte. Te permitir editar imgenes mediante la reduccin de

su rea. Esta herramienta suele
utilizarse para poner ms nfasis
Una vez hecho todo esto, haz click

en Aceptar. Entonces aparecer
el cuadro Atributos de accesibilidad de la etiqueta de imagen, si se
ha activado el cuadro de dilogo en Pre-
sertar/Imagen. En ese momento, se

mostrar un cuadro de dilogo donde,
en su parte superior, podrs elegir entre dos opciones: seleccionar Sistema
de archivos, para elegir un fichero
grfico, o Fuente de datos, para escoger un origen de la imagen dinmica. Escoge el primero.
ferencias.
Ahora debers introducir
los valores en
los cuadros
de texto en la opcin Texto alternativo
y Descripcin larga. Luego haz click
en Aceptar y establece las propiedades
de la imagen.
sta en la ventana de documento y luego edita los atributos de imagen apropiados en la vista Cdigo, y seleccionando Editar cdigo de etiqueta, o
Editar, en el inspector de propiedades, el valor de Alt.
Ahora tienes que buscar y seleccionar el origen de la imagen o

del contenido que desees insertar.
Si ests trabajando en un documento que
no est guardado, Dreamweaver genera
una referencia de archivo:// para el fi-
A continuacin, podrs realizar

la edicin de los atributos de
accesibilidad de una imagen,
que tendrs la opcin de editar en cdigo HTML. Para empezar, selecciona
Brillo y Contraste. Estos parmetros modifican los pxeles de la

imagen; es decir, todo lo que afecta
a los resaltados, las sombras y los
medios tonos de sta.
Perfilado. Es una herramienta
que te servir para ajustar el
enfoque de una imagen mediante
el aumento del contraste de los
bordes que haya dentro de ella.
Esta funcin resulta muy til para
mostrar los detalles en los archivos
grficos con el fin de que aparezca
ms definida.
icono Marcador. Aparecer un cuadro

de dilogo. Selecciona las opciones para el marcador y una etiqueta de texto.
Cuando hayas terminado, pulsa Aceptar.
Lo primero de todo es colocar

el punto de insercin en el lugar
de la ventana de documento en
el que deseas que aparezca la imagen.
Despus presiona sobre el men In-
en un tema principal y eliminar

aspectos no deseados alrededor
del centro de inters de la imagen.
La Insercin de imagen tambin te permite incluir en tu pgina un marcador. Despus de

colocar el punto de insercin en el lugar
Comn de la barra Insertar, pulsa el
La barra de Propiedades
2
28
10
25
26
27
24
11 12 23
13
1 Permite crear un mapa de imagen

2 Vista en miniatura de la imagen
3 Tamao
4 Anchura y altura de la imagen
5 Carpeta de origen de la imagen
6 Texto alternativo
7 Optimizar con el programa Fireworks
8 Opcin para cambiar el nombre de los
estilos CSS o Administrar estilos
14
9 Ventana de opciones
10 Puntero
11 Crear rectngulo
12 Crear crculo
13 Espacio horizontal y vertical del margen
del documento
14 Especifica la imagen que debe cargarse
antes que la principal
15 Tamao del borde que rodea la imagen
15 16
18
16 Alinear la imagen
17 Recortar
18 Justificar a la derecha, izquierda
o centrado
19 Volver a muestrear
20 Brillo y contraste
21 Perfilar
22 Acceso al editor rpido de etiquetas
en HTML
N 124
124_52_59_Curso.indd 15
17
19
20
21
22
23 Crear polgono
24 Vincular la imagen con otra pgina o con
otro lugar dentro de la misma
25 Especifica el marco o la ventana donde
se cargar la pgina vinculada
26 Editar la imagen
27 Ayuda
28 Nombre de la imagen
53
14/7/05 19:05:53
Curso
En el caso de que desees sustituir un marcador de posicin

de la imagen, antes de publicar el sitio, debes reemplazar todos
los marcadores que hayas aadido
Para actualizar el origen de la

imagen, colcate en la ventana de documento. Luego pulsa
sobre el marcador de posicin de
imagen para seleccionarlo y, a continuacin, en el inspector de propiedades. Luego presiona el icono de
carpeta situado junto al campo Origen, con el que se abrir el cuadro de
bilidad de alinear horizontalmente una

imagen. Para empezar, seleccinala en
la vista de diseo. Luego establece los
atributos en el inspector de propiedades. Con l podrs determinar la alineacin con relacin a otros elementos del
mismo prrafo o de la misma lnea. El
resultado es inmediato y puedes modificarlo hasta dar con lo que buscas.
Resumiendo...
por los correspondientes archivos
grficos aptos para la web. Si dispones de la aplicacin Fireworks, tambin de Macromedia, puedes crear
un nuevo grfico desde el marcador
de posicin de Dreamweaver, pero
recuerda que la nueva imagen deber tener el mismo tamao que la del
marcador de posicin que has definido. Una vez hecho todo esto, puedes
editar la imagen y reemplazarla una
vez en Dreamweaver.
dilogo. Posteriormente, desplzate

hasta la imagen con la que deseas reemplazar el marcador y haz click en
Aceptar para que la imagen seleccionada aparezca en el documento.
1 Establecer punto de insercin 3 Elegir Sistema de archivos
5 Aadir marcador 3 Comn 3 Insertar 3 Marcador
Con la herramienta de alineacin

de una imagen podrs alinear sta con el texto que se encuentre
cerca, con otra imagen, con un plug-in o
con otros elementos que puedas incluir
en tu pgina. Adems, te ofrece la posi-
2 Escoger imagen
3 Atributos de accesibilidad
4 Edicin del cdigo HTML de la imagen
6 Sustituir marcador
7 Actualizar imagen 3 Origen 3 Selecciona imagen 3 Aceptar
8 Alinear imagen 3 Seleccionar la imagen y establecer los atributos
Recorte de una imagen

Dreamweaver permite recortar imgenes de archivos de mapa de bits.
Cuando se hace esto, se cambia el archivo de imagen de origen en el disco. Por esa razn, es recomendable
que conserves una copia de seguridad
del original en caso de que necesites
volver a ste.
Para recortar un archivo de imagen, lo primero que tienes que

hacer es abrir la pgina que contiene la imagen que deseas recortar y
seleccionarla. Luego, pulsa en el icono
Recorte del inspector de propieda-
des de imagen, con el que aparecern

los manejadores de recorte alrededor
de la imagen seleccionada. Una vez elegida el rea, ajusta los manejadores de
recorte, de modo que el recuadro de
lmite rodee lo que quieres mantener.
seleccinalo en Modificar/Imagen/
Optimizar imagen en Fireworks.
Por supuesto, para ello debers tener
instalado Fireworks en tu disco duro.
Puedes conseguir una versin de evaluacin en el sitio web de Macromedia
(www.macromedia.com). A continuacin, te aparecer un cuadro de dilogo. Pulsa click en Aceptar.
Despus, pulsa dos veces en el

recuadro de lmite o presiona
Enter para recortar la seleccin. En ese momento, aparecer un
cuadro de dilogo que te informar de
que el archivo de imagen que est cor-
tando cambiar en el disco. Haz click

en Aceptar. Al pulsar, los pxeles que
se encuentren fuera del recuadro de
lmite, se eliminarn, permaneciendo
el resto de objetos.
Si quieres ver el resultado, selecciona la opcin de vista previa

para comprobar que la imagen
ha quedado como esperabas. En el caso
de que quieras deshacer los efectos del
comando de recorte, selecciona Edicin, Deshacer Recortar para volver
a la imagen original.
Una vez que hayas terminado

todos estos pasos, otra de las
opciones que puedes realizar es
optimizar las imgenes. Para ello, abre
la pgina que contiene dicha imagen,
seleccinala y pulsa con el botn derecho del ratn en el men emergente
Optimizar en Fireworks o bien en el
inspector de propiedades de imagen, o
Resumiendo...
1 Abrir la pgina con el elemento 3 Ajustar manejadores de recorte
2 Recortar la seleccin 3 Doble click o Enter
3 Vista previa 3 Comprobar resultado
4 Optimizar las imgenes 3 Optimizar imagen en Fireworks
Muestreo de una imagen

Si deseas reducir el tiempo de descarga y conseguir que todas las instancias
de una imagen tengan el mismo tamao, utiliza una aplicacin de edicin de
imgenes. El cambio de tamao visual
de una imagen en Dreamweaver te permitir ver cmo afecta sta al diseo
en diferentes dimensiones.
54
124_52_59_Curso.indd 18
El primer paso que debers

realizar es seleccionar una
imagen en la ventana de documento. Entonces, aparecern manejadores de cambio de tamao en los
lados inferior y derecho del elemento
y en la esquina inferior derecha. En
el caso de que no aparezcan, pulsa
en cualquier punto de fuera del elemento que deseas modificar y vuelve

a seleccionarlo.
Despus de esto, puedes cambiar el tamao del elemento.

Para ello, ajusta el ancho y el
alto del mismo, arrastrando el manejador de seleccin hacia un lado.
Para conservar las proporciones del
objeto (su relacin entre ancho y alto) al ajustar sus dimensiones, arrastra el manejador de seleccin de la
esquina mientras presiona la tecla
Maysculas. Esta opcin te permiti-
www.pctoday.es
14/7/05 19:06:00
Prctico
r cambiar visualmente el tamao de
los elementos hasta un mnimo de 8
por 8 pxeles.
En el caso de que desees ajustar el ancho y el alto de un

elemento a un tamao menor
del original, utiliza el inspector de
propiedades y podrs introducir un
valor numrico, una operacin ms
precisa que la visual. Para restaurar
las dimensiones originales de un elemento, elimina los valores de los cua-
dros de texto Ancho y Alto, o bien

pulsa el botn Restablecer tamao
en el inspector de propiedades.
Si, al contrario, lo que quieres

es volver a muestrear una imagen cuyo tamao se ha cambiado, lo primero que tendrs que hacer
es cambiar el tamao de la misma. Una
vez hecho esto, pulsa el botn Volver
a muestrear del inspector de propie-
dades de imagen. No olvides que no es

posible volver a muestrear elementos o
marcadores de posicin de imagen que
no sean imgenes de mapa de bits.
De todos modos, la previsin es el
mejor consejo y debes intentar planificar el diseo de tu web de la forma ms
cercana a como quedar al final, ya que
as podrs definir el mejor tamao para
cada imagen desde el principio.
Resumiendo...
1 Seleccionar imagen 3 Utilizar manejadores
2 Cambiar tamao 3 Arrastrar manejadores
3 Ajustar imagen 3 Introducir valor numrico
4 Volver a muestrear una imagen
El brillo, el contraste
y el perlado
La funcin de brillo y contraste te permite modificar estos parmetros de una
imagen. Aunque normalmente esta herramienta se utiliza para corregir imgenes
que son demasiado oscuras o demasiado
claras, tambin te ofrece la posibilidad
de resaltar las sombras y medios tonos
de la imagen. Por su parte, el perfilado
aumenta el contraste de los pxeles situados alrededor de los bordes de los objetos para aumentar la definicin o nitidez
de la imagen. Vamos a explicar ms en
detalles cada uno de ellos.
Para cambiar los parmetros de

brillo y contraste, selecciona la
imagen y pulsa en el botn Brillo/Contraste en el inspector de propiedades de imagen o bien en el men
Modificar/Imagen/Brillo y Contraste. A continuacin, cuando aparezca
el cuadro de dilogo de esta funcin,
arrastra los controles deslizantes de
Brillo y Contraste para ajustar los

valores. Debes tener en cuenta que el
rango de valores posibles es de -100
a 100. Una vez finalizadas todas estas
operaciones pulsa Aceptar.
Ahora te ocupars del perfilado

de una imagen. Para ello, seleccinala, pulsa el botn Perfilar
del inspector de propiedades o elige
en el men Modificar/Imagen/Per-
56
124_52_59_Curso.indd 14
Tipos de rutas de navegacin

Al hablar de rutas de archivos se
pueden establecer tres tipos:
filar. Despus de esto, te aparecer

un cuadro de dilogo en el que podrs
especificar el grado de perfilado. Slo
tendrs que arrastrar el control desli-
zante o bien introducir un valor entre

0 y 10 en el cuadro de texto. A su vez,
tambin puedes ajustar la nitidez de la
imagen mediante el cuadro Nitidez,
y obtener una vista previa del cambio
en la imagen. Al finalizar, pulsa Aceptar. Ahora bien, si lo que deseas es
deshacer los efectos del comando de
perfilado, selecciona Edicin/Deshacer Perfilar para volver a la imagen
original. Eso s, debes tener en cuenta
que slo puede deshacerse el efecto antes de guardar la pgina que contiene la
imagen. Una vez almacenada, los cambios realizados quedarn en la imagen
de forma permanente.
Por supuesto, tambin puedes

crear e insertar imgenes de
sustitucin en tu pgina. Esto es
aquella imagen que cambia cuando el
puntero pasa sobre ella.
Localiza un par de imgenes del
mismo tamao. Ten en cuenta que
Dreamweaver ajusta automticamente
el tamao de la segunda imagen al de
la primera. Despus, sita el punto de
insercin en el lugar de la ventana del
documento donde deseas que aparezca
la imagen de sustitucin e introdcela
Las rutas absolutas. Proporcionan

el URL completo del documento vinculado, incluido el protocolo que se
debe usar (generalmente, http://
para pginas web). Siempre que vincules un documento situado en otro
servidor, es preciso que emplees una
ruta de este tipo, aunque tambin
puedes utilizarlas para vnculos locales, porque ofrece una mayor flexibilidad si necesitas mover archivos
dentro del sitio.
Las rutas relativas. Son las
ms adecuadas para utilizar con
vnculos locales en la mayora de
los sitios web. Resultan particularmente tiles cuando el documento
actual y el aqul con el que se
establece el vnculo se encuentran
mediante la barra Insertar, selecciona

Comn y luego haz click en el icono
Imagen de sustitucin o bien elige en el men Insertar/Objetos de
imagen e Imagen de sustitucin.
en la misma carpeta y es probable

que vayan a permanecer juntos.
Tambin puedes utilizarlas para
establecer un vnculo con un documento de otra carpeta. En una ruta
relativa al documento se omite la
parte del URL absoluto que coincide en los documentos actual y
vinculado y se indica nicamente la
parte que difiere.
Rutas relativas a la raz del sitio.
Indican la ruta desde la carpeta
raz del sitio hasta un documento.
Puedes utilizarlas si trabajas con
un sitio web grande que usa varios
servidores o un servidor que alberga
varios sitios distintos. Una ruta relativa a la raz del sitio comienza por
una barra diagonal, que representa
la carpeta raz del sitio. Por ejemplo,
/support/tips.html.
Automticamente,
se abrir un cuadro.
Compltalo y haz click
en Aceptar. Seguidamente, elige Archivo/
Vista previa en el navegador. Recuerda que
en este caso, no se pude ver el efecto
que causa en la vista de diseo, por lo
que para observarlo debers desplazar
el cursor sobre la imagen original para
que aparezca la de sustitucin.
Resumiendo...
1 Modificar 3 Imagen 3 Brillo y contraste
2 Modificar 3 Imagen 3 Perfilar 3 Ajustar la barra deslizante
3 Insertar 3 Objetos de imagen 3 Imagen de sustitucin
www.pctoday.es
14/7/05 19:06:05
Creacin de vnculos
Es el momento de crear los hiperenlaces. Eso s, antes de nada, debes tener en cuenta todas las posibilidades
que tienes. Los ms frecuentes son: un
vnculo con otro documento o archivo
(como un archivo grfico, de pelcula, PDF o de sonido), de anclaje con
nombre, de correo electrnico o vnculos nulos y de script. Asimismo, ten
en cuenta que antes de crear vnculos,
debers saber cmo funcionan las rutas relativas al documento, las rutas
relativas a la raz del sitio y las rutas
absolutas. Por otra parte, para crear
vnculos desde una imagen, un objeto
o texto hasta otro documento o archivo, tienes que utilizar el inspector de
propiedades y el icono de sealizacin
de ficheros. Asimismo, para usar rutas
relativas a la raz del sitio, primero tendrs que definir una carpeta local en
Dreamweaver, eligiendo una que servir como el equivalente de la raz del
documento en un servidor.
En primer lugar, vas a vincular

documentos mediante el inspector de propiedades. Primero
selecciona el objeto. Luego abre el
inspector de propiedades y haz click
en el icono de carpeta situado a la
otro documento abierto para que se

muestre el vnculo y libera el botn
del ratn.
derecha del cuadro de texto. Seguidamente, aparecer la ruta del documento vinculado en el cuadro de texto URL. Utiliza el men para indicar si
la ruta es relativa al documento o a la
raz del sitio y selecciona una ubicacin para abrir el documento.
Si lo que quieres es vincular

documentos mediante el icono
de sealizacin de archivos,
selecciona el elemento y arrastra el
icono de sealizacin de archivos situado a la derecha del cuadro del inspector de propiedades. Luego marca
Aplicacin de comportamientos
Con Dreamweaver
puedes aplicar cualquier comportamiento
disponible a una imagen o zona interactiva
de sta. Al hacerlo,
la aplicacin inserta
el cdigo HTML en
la etiqueta rea. Hay
tres comportamientos que se aplican
especficamente a
Con Dreamweaver puedes hacer que una
este tipo de archivos
imagen se sustituya por otra al pasar el
grficos: Carga previa, cursor por encima de ella.
Intercambiar y Restaurar
de imgenes (incluido el intercambio
imagen intercambiada. La primera
de varias imgenes a la vez). Por
de ellas carga en la memoria cach
ltimo, si lo que quieres es restaurar
del navegador aquellas imgenes
una imagen intercambiada, puedes
que no aparecen en la pgina de
restaurar los archivos de origen del
inmediato (como las que se interltimo conjunto de imgenes intercambiarn por comportamientos,
cambiadas. Esta accin se aade
capas o scripts de JavaScript). Esto
contribuye a evitar las demoras en la automticamente siempre que
se adjunta la accin Intercambiar
descarga cuando llega el momento
imagen a un objeto de forma predede que aparezcan las imgenes en
terminada. No suele ser necesario
pantalla. En cuanto a la segunda, se
seleccionarla manualmente. Tambin
trata de intercambiar una imagen
puedes utilizar comportamientos
por otra sustituyendo el atributo
para crear sistemas de navegacin
SRC de la etiqueta img. En este
caso, utiliza esta accin para realizar ms sofisticados, como una barra de
cambios de botones y otros efectos
navegacin o un men de salto.
Para establecer vnculos con documentos, utilizando el mapa del

sitio, expande el panel Archivos
y, a continuacin, muestra las vistas Archivos del
sitio y Mapa del sitio, mientras
presionas el
icono del mapa del sitio y
seleccionas
Mapa y archivos. Seguidamente,
escoge un archivo HTML en el mapa del
sitio y arrastra el icono y seala otro archivo del mapa del sitio o un fichero local en la vista Archivos del sitio. Por
ltimo, libera el botn del ratn.
Otra posibilidad de establecer

vnculos es mediante el comando
Hipervnculo. Sita el punto de
insercin en el documento donde deseas
que aparezca ste. Despus, selecciona

en el men Insertar la opcin Hipervnculo o en la categora Comn de la
barra Insertar, pulsa el botn Hiper-
cho, selecciona en el men Insertar,

Vnculo de correo electrnico o
en la categora Comn de la barra
Insertar y haz click en el botn Insertar vnculo de correo electrnico. Cuando aparezca el cuadro de
dilogo, completarlo aadiendo el
nombre y la direccin de correo electrnico en cuestin y pulsa Aceptar.
Si lo que quieres es crear vnculos nulos, selecciona el elemento. Una vez hecho esto, en
el inspector de propiedades, escribe
javascript:; (la palabra javascript,
seguida de dos puntos y luego de un
punto y coma) en el cuadro de texto

Vnculo. De esta manera, conseguirs, por ejemplo, establecer una imagen de sustitucin sin hipervnculo. Y
es que, Dreamweaver no te permite
hacer esto a no ser que hayas establecido un enlace nulo.
vnculo. De esta forma te aparecer un

cuadro de dilogo que debers completar. Cuando lo hagas pulsa en Aceptar.
Si quieres evitar que se rompan

los enlaces en el sitio, puedes
activar la administracin de
vnculos de manera que Dreamweaver los actualice de forma automtica
siempre que se realice algn cambio.
Para establecer vnculos con

una parte especfica de un documento, muy til en guas y
cursos, coloca el cursor en el lugar
donde deseas insertar el anclaje con
nombre. Acto seguido, puedes seleccionar Insertar y Anclaje con
nombre, presionar Control+Alt+A
o pulsar el botn de Anclaje con
nombre de la barra Insertar. Cuando aparezca el cuadro de texto, escribe un nombre y presiona Aceptar.
Si quieres activarla, selecciona la opcin Edicin, Preferencias de la

barra superior de herramientas. En el
cuadro de texto marca la opcin General y en la seccin Opciones de
documento, selecciona Siempre o
Mensaje en el men emergente Actualizar vnculos al mover archivos y pulsa Aceptar.
N 124
124_52_59_Curso.indd 15
Tambin puedes crear un vnculo de correo electrnico.

En la ventana de documento,
coloca el punto de insercin donde
deseas que aparezca ste. Una vez he-
57
14/7/05 19:06:12
Curso
Ahora vas a modificar vnculos

en el mapa del sitio. En este
sentido, hay dos posibilidades:
hacerlo de forma individualizada o en
todo el sitio de forma simultnea. En
el primer caso, selecciona la pgina de
destino del vnculo que deseas cambiar y, a continuacin, haz click con el
botn derecho del ratn y selecciona
Cambiar vnculo en el men con-
textual. Una vez hecho sto, accede al

archivo del vnculo o introduce una
direccin apropiarda. Por ltimo, haz
click en Aceptar. En el segundo, dirgete al men Sitio. All vers la opcin
Cambiar vnculo en todo el sitio.
Presiona en ella para que se abra un
cuadro de dilogo, compltalo y pulsa
en Aceptar. Esto te servir para ahorrar mucho tiempo.
Resumiendo...
1 Vincular documentos 3 Indicar ruta 3 Seleccionar ubicacin documento
7 Vnculos nulos 3 Escribir javascript:; en el cuadro de texto Vnculo
2 Sealizacin archivos 3 Arrastrar icono 3 Liberar botn del ratn
8 Administrar vnculos automticamente 3 Edicin 3 Preferencias 3
3 Establecer vnculos 3 Archivos 3 Mapas y archivos
General 3 Opciones de documento 3 Actualizar vnculos al mover
4 Insertar 3 Hipervnculo
archivos 3 Siempre o Mensaje 3 Aceptar
5 Insertar 3 Anclaje con nombre 3 Aceptar
9 Cambiar vnculo 3 Individual (botn derecho del ratn 3 Cambiar vnculo)
6 Insertar 3 Vnculos por correo electrnico 3 Aceptar
o sitio (Sitio 3 Cambiar vnculo en todo el sitio)
Administracin
y comprobacin de vnculos
men emergente Ver para visualizar

otro informe. Cuando hayas acabado la
comprobacin, pulsa el icono del disco
para guardar el informe.
Una vez que hayas insertado imgenes a una pgina

y escrito el texto correspondiente, es el momento
de establecer conexiones
entre los distintos documentos que conforman tu
sitio. Con Dreamweaver
podrs establecer vnculos
con un texto o imagen de cualquier
lugar del documento, incluidos los situados en un encabezado, lista, tabla,
capa o marco. Adems, tendrs la posibilidad de crearlos y administrarlos
de varias formas: creando vnculos
con pginas o archivos que todava no
existen cuando ests trabajando, diseando todos los archivos y las pginas
y aadiendo los vnculos ms tarde, o
con pginas marcadoras de posicin
que representan el archivo final y
permiten aadir vnculos rpidamente. Durante el proceso de realizacin
de una pgina web es posible que tengas que eliminar, cambiar o modificar
vnculos a diversos documentos y pginas web. Por este motivo, conviene
conocer una serie de opciones que te
ofrece Dreamweaver para que esto no
te resulte muy complicado.
Imagnate que te encuentras un

vnculo roto y deseas corregirlo.
Primero, selalo y aparecer un
icono de carpeta junto l. Haz click en
l para localizar el archivo con el que
Lo primero que puedes

hacer es comprobar si
existen vnculos rotos,
externos y hurfanos. As pues,
guarda el archivo en una ubicacin dentro del sitio local de
Dreamweaver. Luego, selecciona
en el men Archivo, Compro-
58
124_52_59_Curso.indd 20
deseas establecer el vnculo o escribe su

ruta y nombre. Luego presiona la tecla
Tab o Enter. Si hay otras referencias rotas a ese mismo archivo, aparecer un
Editor de imgenes externo

bar pgina y Comprobar vnculos.
Seguidamente, en el panel Verificador de vnculos, selecciona Vnculos externos en el men emergente Ver para visualizar otro informe.
Una vez hecho, pulsa en en el botn
Guardar informe del panel Verificador de vnculos.
Tambin es posible comprobar

los vnculos de una parte de un
sitio local. Para ello, en el mismo panel de Verificacin de vnculos que desplegaste anteriormente, en
su parte izquierda vers un icono con
una flecha verde. Si presionas sobre
l, te aparecer un men emergente.
All puedes seleccionar Comprobar
vnculos de todo el sitio. Al igual
que antes, en el panel Verificador
de vnculos, selecciona Vnculos
externos o Archivos hurfanos del
Como te hemos comentado en

alguna ocasin a lo largo del texto,
no es imprescindible que utilices
el editor predeterminado que
trae Dreamweaver para realizar
modificaciones en las imgenes
que desees incluir en tu pgina.
Cualquiera puede servir: Paint Shop
Pro, Photoshop, CorelDraw y, por
supuesto, Fireworks de Macromedia.
Vamos a conseguir una copia de
evaluacin de este ltimo. Dirgete a
www.macromedia.com/downloads/.
All, busca Fireworks MX 2004 y
presiona el enlace Try. Como ya
estars registrado de cuando descargaste Dreamweaver, slo debers
introducir tu correo electrnico y tu
contrasea. Una vez que tengas en
tu disco duro el archivo, instlalo.
Ahora dirgete a Dreamweaver de
nuevo y, all, selecciona en el men
Edicin / Editar con editor externo.
Eso har que se muestre un nuevo
cuadro de dilogo, donde podrs
elegir la ubicacin de ste. Busca
dnde tienes guardado Firework
(probablemente en Archivos de
programa\Macromedia\Fireworks) y
escoge el archivo fireworks.exe.
De esta forma, cada vez que desees
Fireworks es un potente editor

de imgenes que se integra perfectamente con Dreamweaver.
editar una imagen de Dreamweaver

lo asociar a esa aplicacin y la
abrir automticamente. De hecho,
si vuelves a entrar en el men
Edicin, ahora aparecer la opcin
Editar con Fireworks.
Finalmente, y una vez que hayas
hecho los retoques pertinentes a tu
imagen, podrs trasladarla al documento de Dreamweaver mediante
el botn naranja de la parte superior
derecha de la ventana en Fireworks.
All debers elegir Dreamweaver/
Actualizar HTML y guardar la nueva
imagen en su ubicacin adecuada.
www.pctoday.es
14/7/05 19:06:18

cuadro de dilogo pidiendo que repares
las referencias en los otros ficheros. Haz
click en S para actualizar todos los documentos de la lista que hacen referencia
al archivo. Pulsa No, si deseas actualizar
nicamente la referencia actual.
Resumiendo...
1 Archivo 3 Comprobar pgina 3 Comprobar vnculos
2 Panel Verificacin de vnculo 3 Icono verde 3 Comprobar vnculos de
todo el sitio
Para reparar vnculos en el inspector de propiedades, sitate en

el panel Verificador de vnculos y pulsa dos veces en una entrada de
la columna Archivo. Dreamweaver abrir el documento, seleccionar la imagen
o el vnculo problemticos y resaltar la
ruta y el nombre de archivo en el inspector de propiedades. Si deseas establecer

una ruta y un nombre de archivo nuevos
en el inspector de propiedades, haz click
en el icono de carpeta para localizar el
archivo correspondiente o sobrescribe
el texto resaltado y guarda el archivo.
3 Reparar vnculo roto 3 Carpeta 3 Establecer nueva ruta y nombre

para el archivo
4 Verificador de vnculos 3 Archivo 3 Definir nueva ruta 3 Asignar

nombre de archivo
El botn Flash
En Dreamweaver hay otra forma de
establecer hipervnculos: mediante botones Flash en los documentos. En su
interior pueden tener una descripcin
del contenido al que acceders cuando presiones sobre l. Por supuesto, es
posible establecer un tipo de fuente, un
color de fondo y un tamao ajustado a
tus gustos o necesidades.
Para crear un botn Flash,

dirgete a la ventana de documento y coloca el punto de insercin adecuado. Ahora selecciona
en el men Insertar/Media/Botn
Flash. Finalmente, escoge las opciones deseadas del cuadro de dilogo

Insertar botn Flash y pulsa Aplicar o Aceptar para insertarlo en la
ventana del documento.
Si una vez situado en la pgina,

deseas realizar alguna modificacin sobre l, slo tendrs
que presionar dos veces con el ratn
para que se abra el cuadro de dilogo
de edicin y puedas cambiar los pa-
rmetros que no te convenzan, como

por ejemplo el color del fondo, el tamao o el estilo de la fuente.
En la vista Diseo, puedes

cambiar el tamao del objeto
fcilmente. Para ello, tends
que utilizar los manejadores destinados a cambiar las dimensiones, con
los que puedes restaurar el tamao
del objeto original que hayas seleccio-
Conceptos bsicos
Barra de navegacin. Se compone
de una o un conjunto de imgenes
cuya visualizacin cambia segn
las acciones que realice el usuario.
stas proporcionan una forma fcil
de desplazarse por las pginas y los
archivos de un sitio.
Mapas de imgenes. Es una capa
que define cierta interactividad
para asignar a una zona de la
pantalla. Hay dos tipos: del lado del
cliente y del lado del servidor. Los
primeros almacenan la informacin
acerca de los vnculos de hipertex-
nado en Restablecer tamao de la

ventana correspondiente al inspector
de propiedades.
Tambin es posible reproducir

un botn Flash en el documento, como si se tratara de
la vista final del mismo y as
tener una idea muy aproximada de cmo ser en el navegador que utilice
quien visite tu
web. Para ello,
en la vista Diseo, selecciona el botn y,
en el inspector de propiedades, haz click en Reproducir.
Por ltimo, seala Detener
para poner fin a la vista previa. Eso s,
ten en cuenta que no podrs editar el
objeto de botn Flash mientras se est
reproduciendo. Por lo tanto, conviene
obtener siempre una vista previa del

documento, pero teniendo en cuenta
que puede haber variaciones, segn el
software que se utilice al final.
to en el documento HTML, en lugar

de hacerlo por separado en un
archivo de mapa como hacen en la
otra modalidad.
Rutas de archivos. Se refiere a la
ruta existente entre el documento
desde el que se establece el vnculo
y el fichero con el que lo establece.
Ese camino tambin puede ser a
una pgina web, cada una de las
cuales tiene una direccin exclusiva, denominada URL (Uniform
Resource Locator o Localizador
Uniforme de Recursos).
puedes seguir el mismo procedimiento utilizado para el botn.

En la web de Macromedia puedes
encontrar ms botones y objetos en
este formato, que contribuirn a que

tus pginas web sean ms dinmicas
con un esfuerzo muy bajo, en comparacin con el resultado obtenido.
Resumiendo...
1 Insertar 3 Media 3 Botn Flash
2 Modificar botn Flash 3 Presionar dos veces sobre l
3 Modificar tamao 3 Utilizar manejadores
4 Reproducir botn Flash 3 Reproducir 3 Detener
5 Introducir Texto Flash 3 Insertar 3 Media 3 Texto Flash
N 124
124_52_59_Curso.indd 21
Por supuesto, al
igual que sucede con
el botn, tambin se
puede insertar un objeto de
texto Flash. Sita el punto
de insercin en el lugar deseado y ve al men Insertar y all selecciona Media/Texto Flash. Con el
cuadro abierto, escoge las opciones
que deseas y pulsa Aplicar para que
aparezca en la ventana del documento. Recuerda que si quieres modificar
o reproducir el objeto de texto Flash,
59
14/7/05 19:06:24
Curso
Estructura tu web
Abordamos la cuarta entrega del curso de creacin de pginas web con el desarrollo de tablas, marcos y
formularios. Tres herramientas muy importantes, no slo para ordenar los elementos de tu sitio, sino para dar
coherencia a todo el conjunto de componentes HTML y recibir informacin de los visitantes de tus pginas.
Gua del curso

PC Today n 122
PC Today n 124
PC Today n 125
5. Las plantillas

PC Today n 127
52
125_52_59_Curso.indd 14
as tablas constituyen una herramienta muy eficaz para

presentar datos y establecer
el diseo de texto y grficos en
una pgina HTML. Como seguramente
ya sabrs, una tabla consta de una o
varias filas, cada una de las cuales tiene, a su vez, una o ms celdas. Aunque
las columnas no suelen especificarse explcitamente en el cdigo HTML,
Dreamweaver permite manipular esos
tres parmetros. Para que nunca te
pierdas, la aplicacin muestra el ancho
de la tabla y de cada columna cuando
la seleccionas o en el momento en que
el punto de insercin est en ella. Junto a los anchos se encuentran flechas
para el encabezado de la tabla y de las
columnas. Ah podrs utilizar los mens para acceder rpidamente a los
comandos relacionados con stas. Eso
s, en todo momento ser posible acti-
var o desactivar los anchos y los mens

(ya te indicaremos cmo). Por cierto,
tambin debes tener presente que si no
aparece el ancho de la tabla o de una
columna es porque stas no tienen uno
especificado en el cdigo HTML. Tambin puede ocurrir que aparezcan dos
nmeros. Eso es porque el ancho visual
que se muestra en la vista de diseo no
corresponde con el detallado en HTML.
Esto puede pasar al cambiar el tamao de una tabla arrastrando la esquina
inferior derecha o al aadir contenido
a la celda cuyo ancho es superior al
establecido. Por ejemplo, si configuras
un ancho de columna en 200 pxeles y
aades contenido que se ajusta al ancho
de 250 pxeles, se mostrarn dos nmeros para dicha columna: 200 (ancho
especificado en el cdigo) y 250 entre
parntesis (ancho visual de la columna
tal como aparece en la pantalla).
www.pctoday.es
28/7/05 10:50:35
Insertar una tabla
borde, Relleno de celda y Espacio

entre celdas. Tienes la posibilidad de
definirlo en puntos o porcentajes, gracias al men desplegable de la derecha.
Despus, marca si quieres que no tenga
encabezado o, en caso contrario, dnde
deseas situarlo. Por ltimo, en el apartado Accesibilidad, puedes aadir a la
tabla, en el comando Texto, un nombre
para que te resulte ms fcil identificarla, as como alinear sus contenidos, as
como escribir unas lneas en el apartado
Resumen para describir los datos que
tenga en su interior o cualquier indicacin que consideres til.
Para comenzar este recorrido, vas a

aadir una tabla a un documento en
blanco para que te sea ms sencillo
distinguir todas las propiedades que
le podrs ir aadiendo y modificando a sta. Por supuesto, una vez diseada, aadir texto e imgenes en su
interior ser tan sencillo como si lo
hicieras desde fuera de cada celda, en
una pgina independiente.
Para insertar una tabla, en la

vista Diseo de la ventana de
documento, sita el cursor en
la zona de la pantalla donde desees
que aparezca. Por supuesto, si el documento est en blanco, la nica ubicacin posible ser el principio del
mismo, algo similar a lo que sucede
en editores de texto como Microsoft
Word, al menos en ediciones antiguas
de ste. A continuacin, selecciona
Tabla en el men Insertar, o bien,
en la categora Comn de la barra

Insertar, haz click en el botn Tabla. En ese momento, se mostrar el
cuadro de dilogo Insertar tabla.
1 Insertar 3 Tabla
Establece los parmetros que

consideres oportunos en el apartado Tamao de la tabla. ste
se refiere a los campos Filas, Columnas, Ancho de tabla, Grosor del
Seleccionar elementos
Antes de empezar a introducir datos en
la tabla, es conveniente que tengas claro
cmo puedes seleccionar las distintas filas, columnas y celdas, o la tabla entera.
Ten en cuenta que cuando se desplaza el
puntero sobre cualquiera de estos elementos, Dreamweaver resalta todas las
celdas de esa seleccin para que sepas
exactamente cules se seleccionarn si
haces click en ellas. Esto puede resultar
til si utilizas tablas sin bordes, celdas
que ocupan varias columnas o filas, o
bien tablas anidadas.
activar el resaltado de los elementos de

la tabla, habilita o deshabilita la casilla
de verificacin Mostrar correspondiente a Ratn por encima. Por cierto, si
colocas el puntero sobre el borde de una
tabla, mantn presionada la tecla Control y toda la estructura de sta quedar
resaltada. Eso puede resultar til si utilizas tablas anidadas y deseas ver las tablas
en su totalidad.
Ahora aprenders cmo seleccionar toda una tabla. En este caso,

hay varios modos de hacerlo. En
primer lugar, puedes hacer click en la
esquina superior izquierda de la tabla,
en cualquier punto del borde derecho
2 Rellenar los campos Filas, Columnas, Ancho de tabla, Grosor del

borde, Relleno de Celda y Espacio entre celdas 3 Seleccionar encabezado 3 Incluir Texto
men Modificar / Tabla / Seleccionar

Tabla; o, finalmente, haz click en una
celda de la tabla, despus en el men del
encabezado de tabla y, a continuacin,
eligiendo Seleccionar tabla. En cualquiera de los casos, aparecern manejadores de seleccin en los bordes inferior
y derecho de ella.
La forma de seleccionar filas y columnas tambin resulta muy sencilla. Sita el puntero en el borde
izquierdo de una fila o en el borde superior de una columna. En el momento
en el que el puntero se convierta en una
flecha de seleccin, puedes hacer click

para seleccionar una fila o columna o
arrastrarlo para seleccionar stas.
o inferior de sta o en el extremo de una fila o de una
columna. Ten presente que
cuando puedas seleccionar la
tabla, el puntero se convertir en el icono de cuadrcula.
Otra forma es situar el cursor
en una celda y elegir la etiqueta Tabla en el selector de
etiquetas situado en la esquina
inferior izquierda de la ventana de documento. Adems, es
posible hacerlo mediante el
td en el selector de etiquetas, o bien

presiona la tecla Control y haz click en
la celda. En el segundo y tercero, pulsa en un celda y arrastra hasta la que
quieres marcar, o presiona Control, a
continuacin Mays y haz click en otra
celda. En el ltimo caso, pulsa Control
mientras haces click en las celdas, filas
o columnas que deseas seleccionar. As,
los elementos que no estn todava elegidos, se aadirn a la seleccin y los
que ya lo estn, se eliminarn de sta.
Resumiendo...
1 Cambiar resaltado celdas 3 Edicin 3 Preferencias 3 Resaltado 3
Ratn por encima 3 Seleccionar tono
2 Modificar 3 Tabla 3 Seleccionar tabla

3 Seleccionar filas o columnas 3 Situar puntero al comienzo de la fila o
columna 3 Hacer click
4 Seleccionar celdas 3 Control 3 Click en las celdas
N 125
125_52_59_Curso.indd 15
Por ltimo, vers cmo seleccionar celdas. En este sentido, es

posible elegirlas individualmente,
por lneas, en bloque o no contiguas. En
el primer caso, haz click en la celda y,
a continuacin, selecciona la etiqueta
En cualquier momento, puedes

cambiar el color de resaltado de
las celdas. Para ello, ve al men
Edicin y elige Preferencias. En el
cuadro de dilogo que te aparezca, escoge Resaltando y, all, en Ratn por
encima, selecciona el tono que desees
que se muestre cuando pases el cursor
por encima de las celdas para seleccionarlas. Por supuesto, para activar o des-
Resumiendo...
53
28/7/05 10:50:47
Curso
Aplicar el formato
En todo momento, se puede cambiar el
aspecto de una tabla configurando las
propiedades de sta y de sus celdas o
aplicndole un diseo predefinido. A
continuacin, vas a comprobar los diversos atributos que puedes modificar
para que el diseo de tu tabla se ajuste
a lo que tenas en mente.
Una vez que tienes esto claro,

puedes aadir texto e imgenes a la tabla, segn tus gustos o necesidades, teniendo siempre
en cuenta que puedes modificar los
parmetros de los elementos que in-
En primer lugar, para visualizar

y configurar las propiedades de
una tabla o de un elemento de
ella, tienes que seleccionarlo. Despus, en el Inspector de propiedades, al que llegars a travs del men
Ventana / Propiedades o con un
click en la flecha de ampliacin situada en la esquina inferior derecha, podrs modificar varios parmetros de
sta. Por ejemplo, el nmero de filas
y columnas, la alineacin en la pgina, el color de fondo y el del borde e,
incluso, seleccionar una imagen para
incluirla en una celda.
cluyas dentro o aplicarles formato,

sealndolos y utilizando el inspector
de propiedades de la parte inferior de
la ventana.
El ltimo
punto relacionado con
la aplicacin de
formato a una tabla es la utilizacin
de un esquema de
diseo, mediante
el comando Formatear tabla para
aplicar fcilmente
un diseo predefinido a una tabla. Y
podrs seleccionar
opciones para personalizar ms el diseo. Para hacerlo,
dirgete al men Comandos y escoge
Formatear tabla. All vers un buen
nmero de formatos predefinidos para
elegir. Slo debes encontrar la que mejor se adapte a tus necesidades o preferencias para tu proyecto actual. Claro
que si no hay ninguno que te guste,
siempre puedes elegir tus propios parmetros. Para ello, practica con las opciones Colores de las filas, Primera
fila, Columna izquierda y Tabla, que
te ofrecen todas las posibilidades que
permite el cdigo HTML estndar y son
suficientes para prcticamente cualquier proyecto.
Resumiendo...
1 Visualizar o configurar propiedades 3 Ventana 3 Propiedades
2 Aadir textos e imgenes 3 Modificar atributos en el Inspector de
Propiedades
3 Esquema de diseo 3 Comandos 3 Formatear tabla
Ms filas y columnas
Una vez con el proyecto acabado, podrs comprobar que las dimensiones
de una tabla pocas veces coinciden
con las que introdujiste en un principio. Es posible que tengas que cambiar el tamao de stas para ajustarlo
a los elementos del interior de cada
celda. En cualquier caso, te conviene
tener siempre delante las dimensiones de las columnas y las tablas. Para
conseguirlo, seala la tabla como ya

sabes, haz click con el botn derecho
del ratn y, en el apartado Tabla, seala Anchos de tabla. De esta forma,
aparecern unas guas que se modifican en tiempo real y que te muestran
los datos exactos con los que trabajas,
los cuales te sern de gran utilidad
siempre que quieras crear un grfico
en otra aplicacin y no quieras dar
muchas vueltas para

averiguar qu tamao debe tener.
La forma de
cambiar el tamao de una
tabla es muy sencilla. Simplemente
seleccionndola y arrastrando uno de
sus manejadores de seleccin, puedes
agrandarla o reducirla. Al hacerlo, el
Tablas expandidas
En Dreamweaver, existe un modo,
denominado "de tablas expandidas",
que aade temporalmente relleno y
espaciado de celda a las tablas de
un documento y aumenta los bordes
de las tablas para facilitar la edicin.
Adems, permite seleccionar elemen-
54
125_52_59_Curso.indd 16
tos de las tablas o colocar el punto

de insercin de forma precisa. Por
ejemplo, puedes ampliar una tabla
para colocar el punto de insercin en
la parte izquierda o derecha de una
imagen, sin seleccionar por error la
imagen o la celda de tabla.
Para pasar al modo de tablas
expandidas, lo nico que tienes
que hacer es, desde la vista
Cdigo, dirgete al men Ver
/ Modo de tabla / Modo de
tablas expandidas. Si, por el
contrario, ests trabajando en la
categora Diseo, ve a la barra
Insertar y haz click en el botn
Modo de tablas expandidas.
En ese momento, aparecer una barra

etiquetada Modo de tablas expandidas en la parte superior de la ventana.
Por ltimo, y para salir de este modo,
presiona sobre Salir en la barra denominada Modo de tablas expandidas
de la parte superior de la ventana, o
bien puedes dirigirte al men Ver /
Modo de tabla / Modo estndar en
la vista Cdigo o en la barra Insertar,
hacer click en el botn Modo estndar en la categora Diseo. Gracias al
modo de tablas expandidas, aadirs
temporalmente relleno y espaciado de
celda a las tablas de un documento y
aumentars sus bordes para facilitar
la edicin de ste.
tamao de todas las celdas que la componen se ajustarn automticamente a

sus nuevas dimensiones.
Es el momento de modificar el
tamao de las columnas y las
filas. En este caso, tienes dos
opciones: hacerlo en el Inspector de
propiedades con el alto y el ancho
que quieras que tengan, mediante un
valor en el campo An (Ancho) o Al
(Alto). Ambos se pueden especificar en
pxeles o porcentajes. La otra posibili-
Consejo
Ten en cuenta que al establecer el
valor de una propiedad (por ejemplo,
el color de fondo o la alineacin) para
toda la tabla y otro para celdas individuales, el formato de celda tiene prioridad sobre el de fila, y a su vez ste
sobre el de la tabla.
www.pctoday.es
28/7/05 10:50:54
Lo siguiente que
debes aprender
es cmo igualar
los anchos de columna del cdigo con los
llamados visuales. Como ya se coment ms
atrs, si existen dos
nmeros para el ancho
de una columna, es
porque uno y otro no
tienen por qu coincidir en todo momento.
Es posible igualarlos
mediante un click en
una celda "afectada",
a continuacin debes
presionar en el men del encabezado de
tabla. Para finalizar,
debes seleccionar la
opcin Igualar todos
los anchos.
dad es situar el cursor entre dos filas o

columnas y arrastrarlo hasta que consigas el tamao deseado. Como vers, de
esta forma las dimensiones generales
de la tabla no variarn, pero s las de
las columnas afectadas.
Otra opcin es cambiar el ancho

de una columna y mantener el tamao de las dems. Debes hacerlo manteniendo pulsada la tecla Mays
mientras arrastras el borde de la columna. Recuerda que en todo momento las
ayudas visuales te mostrarn cmo se
ajustan las columnas. Vers que el ancho
total de la tabla vara para dar cabida a la
columna que ha cambiado de tamao.
la tabla, te ahorres todo lo anterior

simplemente presionando la tecla
Tab en la ltima celda.
Modificar / Tabla. All tendrs que escoger Insertar Filas, Insertar Columnas o Insertar Filas o Columnas...
Si seleccionas esto ltimo te aparecer
una ventana donde podrs teclear el nmero exacto. Por cierto, conviene que si
quieres poner una nueva fila al final de
Si quieres eliminar una fila

o una columna, tienes varias
opciones. Haz click en una
celda dentro de la fila o de la columna
que deseas eliminar y selecciona Modificar / Tabla / Eliminar fila o Eliminar
columna. La otra opcin es seleccionar
una fila o columna completa (ya sabes
cmo hacerlo) y escoger Edicin / Borrar o directamente presionar Supr.
Resumiendo...
Una vez que has establecido el

tamao que deseas, puedes agregar nuevas filas o columnas, designando en primer lugar con el cursor
el punto exacto donde quieres que se
aada y dirigindote despus al men
1 Cambiar tamao de tabla 3 Seleccionar 3 Ajustar manejadores

2 Modificar tamao de columnas y filas 3 Introducir valores en An
(Ancho) y Al (Alto)
3 Cambiar tamao de columna y mantener las dems 3 Utilizar

manejadores con la tecla Mays
4 Igualar anchos de columna de cdigo a los visuales 3 Hacer click

en la celda 3 Presionar en el men de encabezado de pgina 3
Seleccionar Igualar todos los anchos
5 Agregar filas y columnas 3 Modificar 3 Tabla 3 Insertar fila, Insertar

columna o Insertar filas o columnas...
6 Eliminar filas o columnas 3 Modificar 3 Tabla 3 Eliminar fila
Trabajar con celdas
Antes de nada debes tener en

cuenta que,
para combinar dos o ms celdas
en una tabla, debes
seleccionarlas en
una lnea contigua
o en forma de un
rectngulo. En caso
de que no se cumpla ninguna de las
dos alternativas no
podrs combinar las
celdas. En cuanto lo
El paso contrario es dividir

una celda. Es posible hacerlo
sealndola y yendo a Modificar / Tabla / Dividir celda o en el
inspector de propiedades, hacer click
en el botn Dividir celda. En ese
momento, aparecer una ventana en
N 125
125_52_59_Curso.indd 17
la que tendrs que especificar cmo

deseas dividirla: en filas o columnas
y, en cada caso, en cuntas.
Si lo que quieres es aumentar o

disminuir el nmero de filas o
columnas que ocupa una celda,
debes seguir la siguiente combinacin
de opciones, siempre situando el cursor en el lugar que deseas modificar:
elige en el men Modificar / Tabla /
Uno de los apartados ms importantes que debes conocer a la hora de

sacarle partido a una tabla son las
diversas opciones que puedes llevar
a cabo con las celdas. Las ms importantes son la divisin, es decir, cmo
partir una celda en varias para aadir
informacin dentro de ellas. La combinacin es justo el paso contrario
que el anterior. La tercera es la opcin de copiar, pegar o eliminar. stas te permiten acceder a un sistema
de "ensayo y error" que facilita bastante tu tarea. Presta atencin...
tengas, selecciona Modificar / Tabla

/ Combinar celdas, o bien en el inspector de propiedades, haz click en el
botn Combinar celdas. De esa forma,
el contenido de los espacios individuales se sita en la celda combinada resultante y las propiedades de la primera se
aplicarn al producto de ambas.
55
28/7/05 10:51:02
Curso
Aumentar
tamao de
fila, o bien
Aumentar
tamao de
columna. En
caso contrario, selecciona Modificar
/ Tabla / Reducir tamao de fila o
Reducir tamao de columna.
Importar y exportar datos

Los datos de tabla creados con otra
aplicacin (por ejemplo, en Excel) y
guardados en un formato de texto
delimitado (con elementos separados
por tabuladores, comas, dos puntos,
puntos y comas u otros delimitadores)
se pueden importar a Dreamweaver y
aplicarles formato de tabla. Tambin
puedes exportar los datos de tabla
desde Dreamweaver a un archivo
de texto, con el contenido de las
celdas contiguas separado por un
delimitador. Eso s, de ninguna forma
se pueden exportar partes de una
tabla. Ahora bien, en caso de que te
interesen algunos de los datos de una
Como comentbamos anteriormente, otra de las opciones que

puedes realizar con las celdas
es cortarlas, copiarlas y pegarlas.
Eso s, se pueden
pegar en el punto
de insercin o en
el lugar de una seleccin en una tabla existente. Para
cortar o copiar, selecciona las celdas
que quieras, siempre y cuando estn
alineadas o formen
Consejo
Siempre que quieras, puedes ordenar
las filas de una tabla en funcin del
contenido de una sola columna. Tambin es posible realizar una operacin
ms compleja, ordenndola en funcin
del contenido de dos columnas. Eso
s, en ningn caso se pueden ordenar
tablas con celdas combinadas. Para hacerlo, slo tendrs que seleccionar la
tabla o hacer click en cualquiera de las
celdas y escoger Ordenar tabla dentro
del men Comandos.
un rectngulo. A continuacin, elige

en el men Edicin la opcin Cortar o Copiar.
Si lo que quieres es pegarlas,

tendrs que escoger primero un
punto de la tabla donde se fijen.
En este caso, tienes varias opciones.
En primer lugar, elegir una celda o
grupo de celdas similar en tamao al
que has cortado o copiado y, despus,
elegir en el men Edicin / Pegar.
Tambin es posible pegar toda una fila
tabla, es recomendable que

copies las celdas que contienen stos y las pegues fuera
de la tabla para crear una
nueva tabla y, a continuacin,
exportes la nueva tabla.
Una prueba de la versatilidad de DreaEn cualquier caso, para impor- mweaver es la posibilidad de importar y
tar datos de una tabla tienes
exportar datos de una tabla.
que seleccionar Importar /
Datos de tabla en el men Archivo.
celda de la tabla, selecciona Exportar
A continuacin, introduce la infor/ Tabla en el men Archivo. En la
macin del archivo que contiene los
ventana que te aparezca debers
datos y haz click en Aceptar.
especificar las opciones para la
En caso contrario, es decir, cuando
exportacin de la tabla, presionar en
quieras exportar una tabla, sitate
Exportar, poner un nombre para el
en el punto de insercin en cualquier
archivo y hacer click en Guardar.
pero aqu debers colocar el cursor

en cualquier otra parte de tu pgina
web que no sea dentro de la tabla.
Por ltimo, es posible eliminar

el contenido y dejar las celdas
intactas, escogiendo en el men
Edicin / Borrar o presionando Supr,
una vez seleccionado el contenido de la
Resumiendo...
1 Combinar celdas 3 Modificar 3 Tabla 3 Combinar celdas
2 Dividir celdas 3 Modificar 3 Tabla 3 Dividir celdas
3 Aumentar o disminuir tamao de filas o columnas 3 Modificar 3
Tabla 3 Aumentar tamao de fila o Aumentar tamao de columna
4 Cortar o copiar celdas 3 Seleccionar celda o grupo 3 Edicin 3

o columna de celdas encima de una
celda concreta, haciendo click en ella.
La ltima posibilidad es crear una
nueva tabla con las celdas pegadas,
Cortar o Copiar
5 Pegar celdas 3 Elegir lugar 3 Edicin 3 Pegar

6 Eliminar contenido de las celdas 3 Edicin 3 Borrar
Crear y modificar marcos

Una vez que sabes manejarte con las
tablas, es el momento de abordar los
marcos (o frames), es decir, la forma en que podrs dividir la ventana
de un navegador en varias regiones,
cada una de las cuales puede mostrar un documento HTML diferente.
Por lo general, un marco muestra un
documento que tiene controles de navegacin, mientras que otro presenta
un documento con contenido. Mira
a continuacin, por tanto, los mtodos ms sencillos con los que cuenta
Dreamweaver para realizar marcos.
Hay dos formas de crear un conjunto de marcos en Dreamweaver:
seleccionarlos entre varios conjuntos
predefinidos o disear uno propio. Al
56
125_52_59_Curso.indd 18
celda. Ahora bien, en caso de que desees

suprimir filas o columnas que contienen
celdas combinadas, entra en el men
Modificar / Tabla / Eliminar fila o
Eliminar columna.
elegir la primera opcin, se configuran

automticamente todos los marcos y
conjuntos de marcos necesarios para
crear el diseo. Adems, es la forma
ms sencilla de crear rpidamente un
diseo basado en marcos. Eso s, slo
se puede insertar un conjunto de marcos predefinido en la vista Diseo de
la ventana de documento.
Para crear un conjunto de marcos predefinido, vaco, tienes

que seleccionar Nuevo en el
men Archivo. As te aparecer el
cuadro de dilogo Nuevo documento, donde podrs escoger la categora
Conjunto de marcos. A continua-
cin, se mostrar una ventana como

la de la imagen, donde podrs elegir
el diseo que tendr el conjunto de
marcos. En cuanto lo hagas, presiona
sobre Crear. Y vers cmo aparece
el documento en blanco con la estructura del marco elegida.
Aparte de esto,
tambin es posible disear un
conjunto de marcos
propios, aadiendo
barras divisorias a la
ventana. Debers seleccionar Modificar /
Conjunto de marcos
y, all, escoger entre
Dividir marco a la
izquierda, Dividir
marco a la derecha,
Dividir marco hacia
arriba y Dividir marco hacia abajo.
Una vez que te aparezca en pantalla, es
posible darle la anchura deseada situando el cursor en la lnea divisoria.
Por supuesto, sobre cada uno de ellos
tambin puedes insertar otros marcos
siguiendo el mismo procedimiento.
www.pctoday.es
28/7/05 10:51:08

conjunto de marcos arrastrando los
bordes. Para ello, cierra la ventana de
documento que lo muestra. Si se ha
guardado el archivo de conjunto de
marcos, elimina el archivo.
pecificar las dimensiones exactas y el

espacio que el navegador debe asignar
a una fila o columna de marcos cuan-
do el tamao de la ventana del navegador no permita mostrar todo el marco

con el inspector de propiedades.
Resumiendo...
1 Crear marcos predefinidos 3 Archivo 3 Nuevo 3 Conjunto de marcos 3
Crear
Si lo que quieres es eliminar

un marco, arrastra el borde de
este marco fuera de la pgina o
hasta el borde del marco padre. Por
cierto, cuando un documento de un
marco que se va a eliminar incluye
contenido no guardado, la aplicacin te pedir que almacenes el documento. Por ltimo, recuerda que
no se puede eliminar totalmente un
2 Disear marcos propios 3 Modificar 3 Conjunto de marcos 3 Dividir

marco
3 Eliminar marco 3 Arrastrar su borde fuera de la pgina o del marco
Si quieres, tambin puedes cambiar el tamao de un marco.

Slo tendrs arrastrar los bordes del marco en la vista Diseo de la
ventana de documento, o tambin es-
padre
4 Tamao de un marco 3 Arrastrar sus bordes hasta ajustar las

dimensiones deseadas
Seleccionar marcos
Para mostrar el panel

Marcos,
debes seleccionar
la opcin Marcos
en el men Ventana. Vers cmo
en la columna de
la izquierda te
aparece resaltada
esta funcin con
la divisin de tu
documento en los
distintos marcos
que la componen. Presiona sobre cada
uno de ellos y se seleccionarn en la
ventana del documento.
Tambin es posible marcar un

marco en la ventana de documento. Para lograrlo, en la vista
Diseo, haz click dentro de un marco mientras mantiene presionada la
tecla Alt. De esta forma, aparecer un
contorno de seleccin alrededor de

ste. Ahora bien, si lo que quieres es
marcar un conjunto de marcos, presiona en uno de los bordes del marco
interior del conjunto de marcos en la
vista Diseo.
Para seleccionar otro marco o

conjunto de marcos, puedes
seguir uno de estos pasos: escoge el marco o conjunto de marcos
siguiente o anterior en el mismo nivel
jerrquico que la seleccin actual,
presiona Alt + flecha izquierda o
Alt + flecha derecha. El uso de estas
teclas te permitir pasar por los distintos marcos y conjuntos de marcos en
el orden en que estn definidos en el
archivo de conjunto de marcos. Otra
posibilidad es elegir el conjunto de

marcos padre (el que contiene la seleccin actual), presionando Alt
+ flecha arriba. Finalmente, es
posible escoger el primer marco
o conjunto de marcos hijo del
conjunto de marcos seleccionado actualmente (es decir, el primero en el orden en que estn
definidos en el archivo de conjunto de marcos), presionando
Alt + flecha abajo.
Resumiendo...
1 Mostrar el panel Marcos 3 Ventana 3 Marcos
2 Seleccionar marcos en la ventana del documento 3 hacer click y presionar la tecla Alt
3 Elegir ms marcos 3 Presionar Alt + Flecha izquierda, derecha, arriba

o abajo
4 Incluir documento existente en un marco 3 Archivo 3 Abrir en marco
N 125
125_52_59_Curso.indd 19
Siempre que quieras realizar cambios

en las propiedades de un marco o
conjunto de marcos, tienes que comenzar por seleccionarlos. La forma
de hacerlo es en el panel Marcos,
que proporciona una representacin
grfica de un conjunto de marcos y
muestra la jerarqua de la estructura
del conjunto de marcos de una forma
que, quiz, sea difcil de percibir en
la ventana de documento. En dicho
panel, puedes observar que mientras
los conjuntos de marcos estn rodeados por un borde grueso, los marcos
lo estn por una lnea delgada gris y
aparecen identificados por sus nombres correspondientes.
Una vez que ya sabes cmo

seleccionar los marcos, ahora
puedes especificar el contenido inicial de uno insertando contenido nuevo en un documento vaco
o abriendo un fichero existente. Para
hacer esto ltimo, simplemente tendrs que situar el punto de insercin
en el lugar adecuado del marco, elegir
en el men Archivo la opcin Abrir
en marco, seleccionar el documento
deseado y hacer click en Aceptar.
3 Seleccionar archivo deseado 3 Aceptar
57
28/7/05 10:51:15
Curso
Almacenar archivos de marcos

y conjuntos de marcos
Si quieres obtener una vista previa de
un conjunto de marcos en un navegador, debers guardar antes el archivo
del conjunto de marcos y todos los documentos que se mostrarn en ellos. En
este sentido, hay dos posibilidades: guardar cada archivo de conjunto de marcos
y documento con marcos individualmente, o hacerlo al mismo tiempo el archivo
de conjunto de marcos y todos los documentos que aparecen en los marcos.
Ten en cuenta que Dreamweaver asigna
un nombre de archivo predeterminado
a cada nuevo documento que aparece
en un marco. Por ejemplo, el primer fichero del conjunto de marcos se llamar
UntitledFrameset-1, mientras que el
primer documento en un marco se denominar UntitledFrame-1.
Para guardar un archivo de

conjunto de marcos, debes seleccionar el conjunto de marcos en el panel Marcos o en la ventana de documento. A continuacin,
dirgete al men Archivo y all elige
Guardar conjunto de marcos o

Guardar conjunto de marcos como si lo que quieres es almacenarlos
Por ltimo, conviene saber que

para guardar todos los archivos asociados a un conjunto
de marcos, puedes abrir el men Archivo y all escoger Guardar todo.
De esta forma, se almacenarn todos
los documentos abiertos en el conjunto de marcos, incluidos el archivo de
conjunto de marcos y todos los documentos con marco. Ahora bien, si el fichero de conjunto de marcos no se ha
guardado todava, en la vista Diseo
aparecer un borde grueso alrededor
del conjunto de marcos y un cuadro
de dilogo que te permitir seleccio-
1 Almacenar archivo de conjunto de marcos 3 Archivo 3 Guardar

en un nuevo archivo. Por cierto, si el
archivo de conjunto de marcos no se
ha guardado anteriormente, estos dos
comandos sern iguales. Tambin es
posible almacenar un documento que
conjunto de marcos
2 Almacenar todos los archivos asociados a un conjunto de marcos 3

Archivo 3 Guardar todo
cho y selecciona Editar etiqueta,

donde te aparecer una ventana en
la que podrs realizar todos los cambios que consideres oportunos.
etiqueta. Te aparecer una nueva ventana en la que podrs elegir entre varias opciones en la lista de categoras
de la izquierda. Una de ellas es Hoja
de estilos/Accesibilidad. Mrcala,
introduce los valores que consideres
oportunos y haz click en Aceptar.
Desde el inspector de propiedades, tambin es posible establecer las barras de desplazamiento en el documento que se encuentra
dentro del marco en caso de que su
58
125_52_59_Curso.indd 20
contenido no se pueda visualizar en

una nica pgina. Para ello, selecciona el marco en cuestin, en el inspector de propiedades localiza la funcin
Desplaz. y elige S o Automtico si
quieres despreocuparte de ella.
Cundo utilizar marcos
En todo momento tambin

puedes editar los valores de
accesibilidad de un marco.
Abre la vista Cdigo o bien Cdigo y
Diseo del documento en el caso de
En primer lugar, debes establecer los valores de accesibilidad

de un marco. Sita el cursor
dentro del marco y selecciona en el
men Modificar la opcin Editar
nar un nombre de archivo. Esto suceder tambin alrededor de cada marco

que no se haya guardado.
Resumiendo...
Visualizar y configurar
las propiedades
Al igual que en otros componentes ya
mencionados anteriormente, como las
imgenes o las tablas, cuando seleccionas un marco, y siempre que tengas el
inspector de propiedades desplegado, te
aparecern en l todas las opciones que
tienes disponibles. Incluso, si lo deseas,
tambin puedes definir algunos atributos
de marco, como el de ttulo para mejorar la accesibilidad, activar la opcin de
accesibilidad de los marcos para definir
los atributos cuando se crean los marcos, o bien definir los atributos despus
de insertar un marco.
aparezca dentro de un marco, simplemente haciendo click en el marco

y seleccionando Archivo / Guardar
marco o Guardar marco como.
que actualmente ests en

modo Diseo. Selecciona un marco colocando
el punto de insercin
d e n t r o . Ve r s c m o
Dreamweaver resalta la
etiqueta de marco en el
cdigo. Haz click sobre
ella con el botn dere-
Aqu, como pasa con todo, cada

diseador tiene su propia receta.
Hay quien prefiere no aadir marcos a su sitio, puesto que puede
resultar complicado y, en ocasiones, las pginas que no los incluyen logran prcticamente los mismos objetivos. Incluso, hay muchos
internautas a los que no les gustan
encontrarse con ellos. Esto suele
deberse a que en su navegacin
han dado con sitios que utilizaban
los marcos incorrecta o innecesariamente (por ejemplo, un conjunto
de marcos que vuelve a cargar su
contenido cada vez que se hace
click en un botn de navegacin).
Sin embargo, cuando se utilizan
bien pueden resultar muy tiles.
Ahora slo depende de ti consi-
derar si los incluyes o no. Para

ponrtelo fcil, enumeramos sus
ventajas e inconvenientes:
Ventajas
El navegador de un visitante no
tendr que volver a cargar los
grficos para cada pgina.
Cada marco dispone de su barra
de desplazamiento para desplazarse por ellos independientemente.
Inconvenientes
Lograr una alineacin grfica precisa de los elementos en distintos
marcos puede resultar difcil.
Comprobar las opciones de navegacin puede llevar mucho tiempo.
Los URL de los marcos no aparece en el navegador y se complica
marcar una pgina concreta.
www.pctoday.es
28/7/05 10:51:23
Ahora puedes cambiar el color

de fondo de un documento en
un marco. Selecciona el punto
de insercin en l, abre el men Modificar y elige Propiedades de la
pgina. En la nueva ventana que te
aparecer tienes una opcin llamada
Color de fondo. As pues, selecciona el que ms te ajuste a tus preferencias y pulsa en Aceptar.
Resumiendo...
1 Modificar etiqueta 3 Hoja de estilos/accesibilidad 3 Aceptar
2 Seleccionar marco 3 Botn derecho en etiqueta 3 Editar etiqueta
3 Seleccionar marco 3 Desplazamiento 3 Elegir S o automtico
4 Modificar 3 Propiedades de la pgina 3 Aceptar
Crear y validar formularios

Para concluir esta cuarta entrega del
curso, resta abordar un apartado
interesante: los formularios. Esta herramienta es muy til cuando quieres
recoger datos de los usuarios que visiten tu sitio. Por ejemplo, pueden servir
para realizar un pedido en una tienda
virtual, crear una encuesta, conocer las
opiniones de los internautas, recibir
preguntas, hacer suscripciones a un
boletn o revista que edites, etc.
En cuanto el visitante rellene los datos
y pulsa el botn para enviar, el formulario arrancar un programa que recibir los datos y har el tratamiento
correspondiente. De modo que ahora
vers cmo crear el formulario bsico,
la forma de insertar campos y botones
y cmo validarlos.
Siempre que quieras, puedes crear un
formulario a travs del men Insertar, opcin Formulario. Eso s, una
vez diseado, ten en cuenta que ste
aparecer en la ventana del documento como un recuadro formado por
lneas rojas discontinuas. Dentro de
dicho espacio podrs agregar los elementos que quieras. Ahora bien, para
facilitarte las cosas y no complicarte
la vida, es recomendable que utilices
tablas para organizar los elementos
que incorpores en su interior. De esta forma, se consigue una mejor distribucin de stos, lo que facilita su
comprensin y mejora su apariencia.
Para que entiendas este proceso,

aqu tienes un ejemplo de cmo
insertar un objeto de formulario. En primer lugar, establece con el
cursor el punto de insercin dentro
del documento que tengas abierto.
Control de marcos con vnculos
Ahora dirgete al men Insertar y escoge la opcin Formulario. All elige

el comando Formulario.
El atributo target
de un vnculo,
especifica el marco
o ventana en la que
se abrir el contenido vinculado. Por Con Dreamweaver es posible incluir un vnculo en
ejemplo, si la barra un marco que abra un documento en otro.
de navegacin est
en el marco de la izquierda y deseas
aparecer el documento vinculado.
que el material vinculado aparezca en Aqu vers cuatro opciones:
el de contenido principal de la dere "_blank, abre el documento
cha, debers especificar su nombre
vinculado en una nueva ventana
como destino de todos los vnculos de
del navegador.
la barra de navegacin. Para estable _parent, en el conjunto de
cer un marco como destino debers
marcos padre del que contiene
seleccionar el texto en la vista Diseo
el vnculo.
o el objeto en cuestin. En el campo
_self, abre el vnculo en el marco
Vnculo del inspector de propiedades,
actual y sustituye su contenido.
haz click en el icono de carpeta y
_top, abre el nuevo documenescoge el archivo con el que debe
to en la ventana actual del naveestablecerse el vnculo. Claro que
gador, eliminando de esta forma
tambin puedes arrastrar el icono
todos los marcos.
Sealar archivo al panel Archivos
Para establecer un vnculo con una
para seleccionar el fichero con el que
pgina que no se encuentra en tu
se realizar el vnculo. A continuacin, sitio web, es recomendable utilizar
en el men emergente Dest. del
siempre target = _top o target
inspector de propiedades, selecciona
= _blank, para que la pgina no
el marco o ventana donde tiene que
parezca formar parte del mismo.
A continuacin, vers cmo

aparece un recuadro rojo en tu
documento. Ahora tendrs que
poner el enunciado para que el visitante sepa qu tiene que hacer. Una
vez que ya tienes el enunciado, elige
el tipo de objeto
de formulario
que quieres insertar. Ve al men Insertar / Formulario y escoge
uno. En ese momento, comprobars
cmo aparece un nuevo recuadro
rojo con un pequeo crculo en su
interior para que escribas una de las
opciones. Hazlo y repite el proceso
tantas veces como opciones quieras
que tenga. Finalmente, puedes comprobar el resultado final en Archivo
y eligiendo Vista previa en el navegador / iexplore.
Lo ltimo que debes saber respecto a los formularios es el

concepto de validacin. Este
trmino sirve para hacer que el cdigo Javascript valide el formulario
antes de que se enve. Es decir, pa-
ra el caso en que haya campos que

sean obligatorios, stos tengan que
rellenarse antes de poder mandarse;
o bien fijar una serie de parmetros
bsicos que debe tener. Para hacerlo,
abre el panel de Comportamientos
con la opcin del men Ventana.
En cuanto lo tengas delante, despliega el smbolo + y, en Mostrar

eventos para elige una versin
de las actuales de entre la lista de navegadores. Por ejemplo, escoge IE 6.0
(Internet Explorer). Despus de esto,
tendrs que volver a desplegar el botn
y pulsar sobre la opcin Validar formulario. Entonces, se mostrar una
nueva ventana, donde aparecern todos

los elementos del
formulario. As pues,
marca en Valor la
opcin Obligatorio,
si quieres que lo que
tenga que contestar el visitante de tu web
sea una opcin ineludible. Finalmente,
seala en Aceptar el tipo de texto que
Resumiendo...
1 Insertar objeto de formulario 3 Fijar cursor 3 Insertar 3 Formulario
3 Formulario
2 Escribir enunciado 3 Insertar 3 Formulario 3 Botn de Accin 3

Repetir el proceso con todas las opciones 3 Archivo 3 Vista previa
en el navegador 3 Iexplore
3 Validar formulario 3 Panel de Comportamientos

4 Desplegar smbolo + 3 Mostrar eventos para 3 IE 6.0 3 Desplegar
N 125
125_52_59_Curso.indd 21
quieres que contenga: Cualquier cosa,

Direccin de correo electrnico,
Nmero y Nmero del... al....
smbolo + 3 Validar formulario 3 Sealar las opciones deseadas
59
28/7/05 10:51:30
Curso
Las plantillas
Esta quinta entrega te va a hacer el trabajo mucho ms ameno. Aprenders a crear una plantilla para que,
partiendo de un diseo preestablecido, puedas incluir fcilmente el resto de pginas que compondrn tu
sitio. Adems, conocers qu son las capas y cmo aadir elementos multimedia a tu web.
Gua del curso

PC Today n 122
PC Today n 124
PC Today n 125
5. Las plantillas

PC Today n 127
50
126_50_57_Curso.indd 14
omo podrs ver a lo largo

de estas pginas, crear una
plantilla en Dreamweaver MX
2004 te llevar algo de tiempo
(tampoco mucho); pero, a cambio, te
ahorrars bastantes horas de trabajo.
Sin embargo, antes de empezar, conviene que tengas una idea clara de qu
puedes conseguir con ellas. En primer
lugar, debes saber que ste es un tipo
especial de documento que sirve para
crear un diseo de pgina fijo,
con el fin de que te sirva de gua para
realizar el resto de tu web con menos
esfuerzo y el mismo patrn. Para ello,
se parte de una serie de regiones que
se pueden establecer como editables
o no; y, adems, tiene la peculiaridad
de que permite actualizar mltiples
pginas de una vez, puesto que un
documento que se crea a partir de una
plantilla permanece conectado a ella.
A la hora de trabajar con plantillas, podrs hacerlo tanto en la vista Cdigo como en la de Diseo. Como viene siendo
habitual en este curso, la segunda ser
la que cobre protagonismo, puesto que
resulta ms fcil y no tendrs que programar ni una sola lnea. En esta vista,
la plantilla aparece rodeada por contornos rectangulares del color de resaltado
predefinido. Asimismo, en la esquina
superior izquierda de cada regin aparecer una pequea ficha, en la que se
muestra el nombre de sta. Aparte, toda
la pgina aparece rodeada por un contorno de otro color, con una ficha en la
parte superior derecha, en la que figura el nombre de la plantilla en la que se
basa el documento. Finalmente, podrs
identificar un archivo de plantilla observando la barra de ttulo de la ventana de
documento o bien mirando la extensin
del fichero, que siempre ser .dwt.
www.pctoday.es
11/8/05 14:46:43
Creacin de una plantilla
Por supuesto, tambin es posible utilizar el panel Activos, al

que llegars a travs del men
Ventana, para crear una plantilla nueva. Una vez que te aparezca la ventana,
selecciona la categora Plantillas en
la parte izquierda del panel y haz click
en el botn Editar plantilla, que se
encuentra en la parte inferior del panel
Activos. As, se aadir una nueva sin
ttulo a la lista del panel Activos. Con
la plantilla an seleccionada, escribe
un nombre y presiona Intro.
En todo momento puedes crear una

plantilla a partir de un documento
existente o de uno nuevo y en blanco.
Una vez hecho esto, es posible insertar posteriormente regiones configuradas como editables o no, segn
tus necesidades. Adems, se pueden
modificar las preferencias de la plantilla en lo que respecta a los colores
Consejo
Es posible almacenar informacin
adicional sobre una plantilla (como el
nombre de su autor, la fecha en que
se modific por ltima vez o la explicacin de algunas decisiones sobre
su diseo) en un archivo Design. Para
ello, tienes que dirigirte a Archivo /
Desing Notes y, all, rellenar los datos
que te pide el programa.
del cdigo y al tono de resaltado en

cada regin de sta. Pero lo mejor es
ir por partes. Lo primero que vas a
hacer es definir una.
Para crearla, abre el documento que deseas guardar como

plantilla. Si lo quieres disear
desde cero, entra en Archivo / Nuevo.
En el cuadro de dilogo que aparece,
selecciona Pgina bsica / HTML y
haz click en Crear. En cuanto se abra
el documento, puedes seleccionar en
el men Archivo la opcin Guardar
como plantilla, o bien en la categora
Comn de la barra Insertar, presiona
en la flecha del botn Plantillas y, a
continuacin, elige Crear plantilla.
De esta forma, se abrir el

cuadro de dilogo Guardar
como plantilla. Selecciona
un lugar de tu disco donde lo quieras almacenar y, a continuacin, introduce el nombre de la plantilla en
el cuadro de texto Guardar como.
Finalmente, haz click en Guardar.
As, Dreamweaver guarda el archivo
en la carpeta Templates del sitio en
Una vez que ya tienes creada la

plantilla, es posible utilizar las
preferencias de Dreamweaver
para personalizar el color de resaltado
del contorno de las regiones editables
y bloqueadas de una plantilla en vista
Resumiendo...
la raz local, con la extensin .dwt.
Si no existe sta, el programa la crear automticamente. Por cierto, has
de saber que no es conveniente que
saques las plantillas de esta ubicacin
ni guardes en ella archivos que no
sean plantillas. Tampoco debes sacar
la carpeta de su lugar de destino en
la raz local, puesto que si lo haces,
se producirn errores en las rutas.
1 Archivo 3 Nuevo 3 Pgina bsica 3 HTML 3 Crear 3 Archivo 3

Guardar como plantilla
2 Escribir el nombre de la plantilla en Guardar como 3 Guardar

3 Ventana 3 Activos 3 Plantillas 3 Editar plantillas 3 Intro
4 Cambiar colores de regiones 3 Edicin 3 Preferencias 3 Resaltar 3
Mostrar 3 Aceptar
Regiones editables
Tipos de regiones de plantillas
al convertir el contenido de una capa

en editable slo puede cambiarse el
contenido de la capa, no su posicin.
Una plantilla puede contiener cuatro

tipos de regiones diferentes:
Editables. Es una regin no
bloqueada. Se puede especificar
cualquier rea de la plantilla como
editable. De hecho, para que
una plantilla sea efectiva, deber
contener al menos una de estas
regiones. En caso contrario, las
pginas basadas en la plantilla no
se podrn editar.
Para insertar una regin de

plantilla editable, selecciona el
texto o el contenido que deseas
definir como regin editable. A continuacin, sita el punto de insercin
en la posicin adecuada. Despus,
escoge Insertar / Objetos de plantilla / Regin editable. En el cuadro
de texto Nombre de la ventana que
te aparezca, introduce uno exclusivo
para la regin y presiona Aceptar. La
regin editable aparecer limitada por
Cuando un documento se guarda como plantilla, Dreamweaver bloquea

automticamente la mayora de las
regiones de ste. Por lo tanto, debers especificar cules sern editables,
de tal forma que el usuario de la
plantilla slo podr realizar cambios
en sas, y no en las bloqueadas. En
principio, puedes colocar una regin
editable en cualquier lugar de la pgina, pero ten en cuenta que si vas a
hacer que una tabla o una capa sea
editable, puedes sealar una tabla
entera o una celda individual como
editable, pero no varias celdas de una
tabla como una sola regin editable.
En cuanto a las capas y su contenido
has de tener claro que son
elementos distintos. Al convertir una en editable es posible cambiar su posicin y
su contenido, mientras que
Repetidas. Seccin del diseo

del documento que se define para
que se repita. Por ejemplo, puedes
establecer que una fila de una
tabla se repita. Normalmente, este
tipo de regiones son editables para
que el usuario pueda cambiar el
contenido del elemento repetido.
Opcionales. Se trata de una seccin
de la plantilla que se especifica
N 126
126_50_57_Curso.indd 15
Diseo. Para ello, selecciona Edicin

/ Preferencias y, en el cuadro de dilogo que te aparezca, escoge Resaltando. A continuacin, haz
click en el cuadro de color de
Regiones editables, Regiones
anidadas o Regiones bloqueadas y selecciona el color que
consideres oportuno. Despus,
puedes repetir el proceso con los
otros tipos de regin de plantilla.
Finalmente, presiona en Mostrar para
activar o desactivar la visualizacin de
colores en la ventana de documento.
Para ver los colores seleccionados, elige Ver / Ayudas visuales / Elementos
invisibles. Si no, no te habr servido
de nada lo que habas hecho antes.
Se pued
de regio
como opcional para contenido como

un texto o una imagen, que pueden
aparecer o no en un documento
basado en la plantilla.
Atributos de etiqueta editables.
Permite desbloquear un atributo
de etiqueta de una plantilla de
modo que ste se pueda editar en
una pgina basada en plantilla.
Por ejemplo, puedes bloquear
qu imagen aparece en el documento, pero dejar que el usuario
de la plantilla establezca la
alineacin que desee: izquierda,
derecha o central.
51
11/8/05 14:46:46
Curso
elegir Modificar / Plantillas / Quitar
formato de plantilla. La ltima posibilidad que tienes con respecto a las
regiones editables es la de cambiar
su nombre. Para hacerlo, pulsa en la
un contorno rectangular resaltado en

la plantilla con el
color que definiste
previamente.
A continuacin, puedes hacer

varias cosas. La primera es seleccionar una regin editable.
Para ello, haz click en la ficha situada en
la esquina superior izquierda de sta, o
bien selecciona Modificar / Plantillas
y elige el nombre en la lista que aparece

al final de ese submen. Tambin debes
saber que si ms adelante deseas bloquear esa regin y que no sea editable,
slo debers presionar en la ficha situada en la esquina superior izquierda de
la regin editable para seleccionarla, y
Resumiendo...
1 Insertar 3 Objetos de plantilla 3 Regin editable 3 Aceptar
2 Modificar 3 Plantillas 3 Quitar formato de plantilla
Regiones repetidas
Una regin repetida es una seleccin de
una plantilla que puedes duplicar cuando
quieras en una pgina basada en plantilla. Este tipo de opciones suelen utilizarse
con tablas. Sin embargo, tambin es posible definir una para otros elementos de
la pgina. Permiten controlar el diseo
de sta mediante la repeticin de determinados elementos, como uno de catlogo, un diseo de descripcin, o una fila
de datos. Ahora bien, ten en cuenta que
una regin repetida no es editable. Para
ello debers insertar una regin editable
dentro de otra repetida.
Para incluir una regin repetida

en una plantilla, selecciona el texto
o el contenido que deseas definir
como regin repetida. A continuacin,
sita el punto de insercin donde desees
y elige Insertar / Objetos de plantilla
Tipos de regiones de plantillas

Cuando se crea un archivo de plantilla a partir de una pgina existente
y luego se guarda sta como una
plantilla, Dreamweaver actualiza los
vnculos existentes de modo que
sealen a los mismos archivos que
anteriormente. Dado que las plantillas
se guardan en la carpeta Templates,
la ruta de un vnculo relativo al docu-
res especiales al asignar un nombre a una

regin. Finalmente, haz click en Aceptar
para que se aada en la plantilla.
Lo siguiente que puedes hacer

es utilizar una tabla repetida para crear una regin editable (en
formato de tabla) con filas repetidas.
Por ejemplo, es posible definir los atributos de tabla y establecer qu celdas
de la tabla son editables. Para hacerlo,
sita el punto de insercin en el documento donde deseas incluir la tabla de
repeticin, selecciona Insertar / Objetos de plantilla / Tabla repetida. De
introducir una ruta equivocada. La

direccin correcta es la que va desde
la carpeta Templates hasta el documento vinculado, no desde la carpeta
del documento basado en plantilla
hasta el documento vinculado.
Por otra parte, y si lo que quieres es
introducir un vnculo una vez que ya
tienes guardado el documento como
En este cuadro de dilogo podrs seleccionar el archivo que deseas

vincular en la plantilla que ests creando.
mento cambia cuando la pgina se

guarda como plantilla. No obstante,
Dreamweaver automticamente
actualiza todos los vnculos relativos
al documento para que continen
sealando los archivos correctos. Sin
embargo, si se aade un nuevo vnculo relativo al documento a un archivo
de plantilla y se escribe la ruta en
el cuadro de texto del vnculo en el
inspector de propiedades, es fcil
/ Regin repetida; o bien, con el botn

derecho del ratn, escoge Plantillas /
Nueva regin repetida.
En ese momento, te aparecer un
cuadro de dilogo para introducir
el nombre que quieres darle a la
nueva regin repetida, siempre teniendo
en cuenta que no debes utilizar caracte-
ficha situada en la esquina superior

izquierda de la regin editable para
seleccionarla y, en el inspector de
propiedades, escribe un nuevo nombre y presiona Intro.
plantilla, la forma de hacerlo es muy

sencilla. Simplemente, tendrs que
utilizar el icono de la carpeta o el de
sealizacin de archivo que aparece
al final del cuadro de texto llamado
Vnculo en el inspector de propiedades. Ahora bien, recuerda que no
debes escribir el nombre del archivo
con el que deseas establecer el vnculo, porque si lo haces, es posible
que ste no funcione.
Resumiendo...
esta forma, se abrir una nueva ventana
en la que debers elegir los parmetros
referidos a la tabla como las filas, las
columnas, el ancho, el borde o el nombre de la regin repetida. Finalmente,
presiona Aceptar.
1 Insertar 3 Objetos de plantilla 3 Regin repetida

2 Introducir nombre 3 Aceptar
3 Insertar 3 Objetos de plantilla 3 Tabla repetida 3 Configurar
parmetros 3 Aceptar
Regiones opcionales
Una regin opcional es aquella en la
que los usuarios pueden definir como visible u oculta en un documento basado en plantilla. Por ejemplo,
te puede resultar til cuando desees
establecer condiciones para mostrar
contenido en un documento. Cuando
se inserta una regin opcional, puedes definir valores especficos para
un parmetro de plantilla o establecer
declaraciones condicionales en sta.
52
126_50_57_Curso.indd 16
Posteriormente, se puede modificar

la plantilla si es necesario.
Para insertar una regin opcional, en la ventana de documento tienes que seleccionar el
elemento que deseas definir con estas
caractersticas. A continuacin, escoge Insertar / Objetos de plantilla
/ Regin opcional. De esta forma,
aparecer el cuadro de dilogo en

cuestin, dividido en dos pestaas:
Bsica y Avanzada. En la primera basta con introducir el nombre
del parmetro en el cuadro de texto
Nombre y con activar la casilla de
verificacin Mostrar de forma predeterminada, para definir la regin

seleccionada que desea mostrar en
el documento. Desactvala si lo que
quieres es establecer el valor predeterminado como falso.
www.pctoday.es
11/8/05 14:46:50
La otra posibilidad es sealar la

pestaa Avanzado. Ah tienes dos
posibilidades para determinar si
la regin es visible: Utilizar parmetro
e Introduzca la expresin. Marca la
A continuacin, puedes insertar una regin opcional como

editable. En la ventana de documento, coloca el punto de insercin en el lugar de la pgina donde
Atributos de etiqueta editables

de dilogo que debers completar con
cada atributo que
desees convertir en
editable. Finalmente,
haz click en Aceptar.
Al crear un atributo
de etiqueta editable,
se inserta un parmetro de plantilla
en el cdigo. As se
Dreamweaver permite modificar determinados
establece un valor
atributos de etiqueta en un documento creado
inicial
para el atributo
a partir de una plantilla.
en el documento de
En Dreamweaver puedes modificar
plantilla. Cuando se crea el documento
determinados atributos de etiqueta en
basado en la plantilla hereda ese
un documento creado a partir de una
parmetro, por lo que un usuario de
plantilla. Por ejemplo, puedes definir
ella podr editar el parmetro en el
un color de fondo en el documento
documento basado en la plantilla.
de plantilla y, sin embargo, permitir
Evidentemente, una etiqueta marcada
que los usuarios de la plantilla definan antes como editable tambin se puede
colores de fondo distintos para las
sealar como no editable. Para restapginas que ellos creen. Eso s, stos
blecer el atributo de etiqueta editable,
solamente pueden actualizar los atripresiona en el elemento asociado,
butos que especifiques como editaelige Modificar / Plantillas / Hacer
bles. Para ello, selecciona un elemento editable el atributo. En el men
para el que desees definir un atributo
emergente Atributos, selecciona el
de etiqueta editable. Despus, escoge
que deseas modificar, desactiva la
Modificar / Plantillas / Hacer editacasilla de verificacin Hacer editable
ble el atributo. Se abrir un cuadro
el atributo y haz click en Aceptar.
primera si quieres vincular parmetros

de regin opcional. Haz lo mismo con la
segunda en caso de que querer escribir
una expresin de plantilla para controlar
la visualizacin de una regin opcional.
desees que aparezca. Elige Insertar /
Objetos de plantilla / Regin opcional editable. As te aparecer el
cuadro de dilogo Regin opcional.
Introduce un nombre para sta y haz
click en la ficha Avanzado, si deseas
definir otras opciones. Finalmente
presiona Aceptar.
Resumiendo...
1 Insertar 3 Objetos de plantilla 3 Regin opcional 3 Escribir nombre
3 Marcar Mostrar de forma predeterminada
2 Avanzado 3 Seleccionar entre Utilizar parmetro e Introduzca la

expresin 3 Aceptar
3 Insertar 3 Objetos de plantilla 3 Regin opcional editable 3

Avanzado 3 Aceptar
Edicin y actualizacin
de plantillas
Al realizar cambios en una plantilla y guardarlos, Dreamweaver
actualiza automticamente todos
los documentos adjuntos a ella.
No obstante, tambin es posible
actualizar manualmente los basados en una plantilla, si es necesario. Adems, la aplicacin comprueba por s sola la sintaxis cuando
guarda la plantilla, parmetro que
tambin se puede revisar al editarla.
En definitiva, lo que vas a aprender en
los siguientes pasos son todas las opciones que puedes llevar a cabo con
las plantillas.
modificar el contenido que consideres

oportuno. Cuando acabes, gurdala y
Dreamweaver te pedir que actualices
las pginas basadas en la plantilla.
As que haz click en Actualizar para
actualizar todos los documentos basados en la plantilla modificada o No
actualizar, si no deseas hacerlo.
La siguiente opcin es abrir y

modificar la plantilla adjunta al
documento actual. Abre el documento basado en la plantilla en la
ventana de documento, selecciona Modificar / Plantillas / Abrir plantilla
Cuando realizas un cambio en

una plantilla, Dreamweaver solicita que actualices los documentos basados en ella, pero tambin
puedes hacerlo de forma manual, lo que
es igual que volver a aplicar la plantilla.
Para aplicar al documento los cambios
realizados en el documento basado en
la plantilla actual, abre el documento,
selecciona Modificar / Plantillas / Ac-
tualizar pgina actual y la aplicacin

actualiza el documento con todos los
cambios de la plantilla. Ahora bien, si
lo que quieres es actualizar el sitio completo, elige Modificar / Plantillas
/ Actualizar pginas. A continua-
N 126
126_50_57_Curso.indd 17
cin, debers completar el cuadro de

dilogo que te aparece y hacer click en
Iniciar. Por ltimo, presiona Cerrar.
No est de ms que compruebes

la sintaxis de la plantilla. Para
verificar este parmetro debers
abrir el documento que desea comprobar en la ventana de documento, elegir
Modificar / Plantillas / Comprobar
sintaxis de plantilla.
Si sta es incorrecta, te
aparecer un mensaje
de error, que te especificar de qu se trata y en
la lnea de cdigo donde
se encuentra.
Es el momento de administrar
las plantillas. Por ejemplo, es
posible cambiar el nombre de
cada una de ellas desde el panel Activos simplemente presionando una
vez en la plantilla para seleccionarla
Lo primero, por tanto, es abrir

y editar un archivo de plantilla.
Despliega el men Ventana, selecciona Activos y, all, la categora
Plantillas situada en la parte izquierda del panel. Ah se enumeran todas
las plantillas disponibles y se muestra una vista previa de la seleccionada. Elige la plantilla en cuestin con
un doble click y sta se abrir en la
ventana del documento. Ahora puedes
adjunta. As ya puedes cambiar lo que

consideres oportuno. Posteriormente,
guarda los cambios y, como en el paso
anterior, el programa te pedir que actualices las pginas basadas en la plantilla mediante el mismo sistema.
53
11/8/05 14:46:53
Curso
Plantillas anidadas
y otra para hacer que el nombre sea
editable. A continuacin, slo tendrs que introducir la nueva denominacin. Por supuesto, eliminar un
archivo de plantilla tambin resulta
muy sencillo. De nuevo, en el panel
Activos, marca el elemento en cuestin y haz click en el botn Eliminar,
situado en la parte inferior del panel,
y confirma que
deseas borrar la
plantilla correspondiente. Debes
tener en cuenta
que una vez que
hayas eliminado
los datos, no podrs recuperarlos. Eso s, los
documentos que
se basan en una
plantilla que se ha eliminado no se
separan de ella, sino que conservan
la estructura y las regiones editables
que tena el archivo de plantilla antes
de ser eliminado.
supone que si creas

una regin editable
en una plantilla
base y, a continuacin, una plantilla
anidada, la regin
editable aparecer
en los documentos basados en la
plantilla anidada.
Por cierto, stas
muestran un borde
de color azul.
La virtud de las plantillas anidadas es que permiPara crear una, tieten crear variaciones de una plantilla base.
nes que disear un
documento a partir de la plantilla en
Las plantillas anidadas permiten
la que desea que se base la plancrear variaciones de una plantilla
tilla anidada. As pues, selecciona
base. Por ejemplo, es posible desaArchivo / Nuevo, presiona en la
rrollar una anidada guardando un
ficha Plantillas y elige el sitio que
documento basado en plantilla y,
contiene la plantilla que desea utilia continuacin, almacenando se
zar. En la lista de documentos, haz
como una plantilla nueva. Incluso,
doble click en la plantilla para crear
puedes anidar mltiples plantillas
un documento. A continuacin, para
para definir un diseo cada vez
guardarla como plantilla anidada
ms especfico. De forma predeterminada, todas las regiones de plan- puedes escoger Archivo / Guardar
tilla editables de la plantilla base se como plantilla y, all, escribe un
nombre y, a continuacin, haz click
transfieren desde la anidada hasta
en Aceptar.
el documento basado en sta. Eso
En cualquier momento, puedes

aplicar una plantilla a un documento existente. Simplemente
tendrs que abrir ste y, en la categora
Plantillas del panel Activos, arrastrar
la plantilla en cuestin a la ventana de
documento. Ahora bien, ten cuidado
porque si hay contenido en el documento que no se puede asignar automtica-
mente a una regin de plantilla, aparecer el cuadro de dilogo denominado

Nombres de regiones no coincidentes. Por lo tanto, tendrs que arreglar
antes el contenido no resuelto.
Resumiendo...
1 Ventana 3 Activos 3 Plantilla 3 Modificar parmetros 3 Guardar 3
Actualizar
cambios 3 Guardar
2 Modificar 3 Plantillas 3 Abrir plantilla adjunta 3 Modificar 3 Guardar

3 Modificar 3 Plantillas 3 Actualizar pgina actual 3 Realizar cambios
Insertar capas
Para insertar una capa, puedes

hacerlo con un documento en
blanco, por ejemplo. Slo debers situar el cursor en el punto de
insercin deseado, desplegar el men
54
126_50_57_Curso.indd 18
5 Panel Activos 3 Plantillas 3 Seleccionar 3 Cambiar nombre o eliminar

3 Guardar
6 Panel Activos 3 Plantillas 3 Arrastrar la plantilla al documento
3 Guardar
Ahora que conoces todos los detalles de

las plantillas, es el momento de abordar
las capas. Por este trmino se entienden
los elementos HTML que se pueden colocar en cualquier lugar de un documento
y que pueden incluir texto, imgenes u
otros contenidos. Con Dreamweaver,
puedes emplear capas para disear la
pgina, colocar unas delante de otras,
ocultar algunas mientras se muestran
otras y moverlas por la pantalla. Es posible tambin situar una imagen de fondo
en una capa y, a continuacin, insertar
una segunda con texto y un fondo transparente, delante de la primera.
4 Modificar 3 Plantillas 3 Comprobar sintaxis de plantilla 3 Realizar
Insertar, seleccionar la opcin Objetos de diseo y, en ella, Capa. En ese

momento, se resaltarn los bordes de
la capa y aparecer el manejador de
seleccin. Por supuesto, para mostrar
u ocultar marcas de cdigo de capa,
tendrs que tener marcada la opcin
Bordes de capa en Elementos invisibles del apartado Ayudas visuales
en el men Ver.
Al igual que suceda

con las plantillas, aqu
tambin es posible
anidar capas. Este trmino
se usa a menudo para agrupar capas. Eso s, hay que tener en cuenta que una capa
anidada se mueve junto con
su capa padre y puede configurarse para que herede
la visibilidad de sta. Por lo
tanto, para insertar una capa
anidada, coloca el punto de
insercin en el interior
de una capa existente en la vista
de diseo de la ventana de documento y selecciona Insertar
/ Objetos de diseo / Capa.
Para anidar una capa existente
dentro de otra utilizando el panel Capas, selecciona Ventana
/ Capas para abrir el panel Capas. Elige all una y, a continuacin, mientras presionas la tecla
Control, arrstrala con el ratn
hasta la capa de destino del panel Capas. Por ltimo, suelta el botn del ratn cuando se resalte el nombre de la
capa de destino.
En todo momento es posible

configurar las propiedades de la
capa. Para establecer las preferencias que desees, tienes que dirigirte
a la categora Capas del cuadro de di-
www.pctoday.es
11/8/05 14:46:57

Consejo
Las capas anidadas pueden ofrecer un
aspecto diferente segn el navegador
que se utilice. Por eso, es recomendable que, al crear capas anidadas,
compruebes con frecuencia su aspecto en distintos navegadores durante el
proceso de diseo.
logo Preferencias situado en el men

Edicin. All podrs seleccionar la visibilidad que tendr a travs de cuatro
parmetros: default (predeterminada),

inherit (heredada), visible (visible) y
hidden (oculta). Adems, podrs establecer el ancho y alto de las capas, el
color o una imagen de fondo predeterminados, anidar una capa y mantener la
compatibilidad con Netscape 4 mediante
la agregacin de reparacin de cambio
de tamao al insertar capa. Una vez fijados estos parmetros, pulsa Aceptar.
jo del icono de ojo abierto. Si presionas

ah vers que aparece un ojo cerrado y,
consecuentemente, la capa en cuestin
desaparece del documento. Si vuelves a
pulsar, el ojo se abrir y la capa apare-
capas a la vez. La forma de hacerlo es

elegir el men Modificar / Alinear /
Asignar mismo ancho o Modificar
/ Alinear / Asignar mismo alto.
cambio de tamao, que se puede hacer

con una de forma individual o con mltiples, simultneamente, para asignarles la
misma anchura y altura. La manera ms
rpida y efectiva de hacerlo es mediante
los manejadores. Una vez que tengas seleccionada la capa, slo tendrs que estirar los puntos remarcados hasta dar con
el tamao que te resulte ms adecuado.
Para hacerlo con varias capas a la vez,
debers seguir el mismo procedimiento,
siempre habindolas seleccionado antes
como ya sabes.
cer. Un nuevo toque dejar las cosas

como estaban al principio. Asimismo,
para mostrar u ocultar capas anidadas,
tendrs que hacer
click en los botones
de signo ms (+) o
menos () que se
encuentran junto al
nombre de la capa.
Finalmente, ten en
cuenta que las capas anidadas aparecen como nombres
relacionados con
las capas padres.
La otra opcin es cambiar los

valores de anchura (An) y altura (Al) a mano en el inspector de propiedades. Lo mismo sucede
para cambiar el tamao de mltiples
Si lo que quieres es seleccionar

una capa, puedes hacerlo mediante el panel Capas, eligiendo la que deseas y marcndola con un
click. Aparte, tambin te puedes ayudar de los manejadores de seleccin,
Al, Vis, Etiq, Im. Fondo y Col. Fondo,

todos ellos explicados en el recuadro de
Inspector de propiedades.
Aparte de todo lo explicado en el

texto, tambin se pueden ver y
administrar diversos atributos de
una o ms capas en el inspector
de propiedades. De hecho, tienes
a tu alcance un buen nmero de
parmetros modificables. El primero
es ID de capa, que permite teclear
un nombre para identificar sta. En
Iz y Sup (izquierda y superior) se
especifica la posicin de la esquina
superior izquierda de la capa con
respecto a la superior izquierda
de la pgina o de la capa padre, si
es anidada; mientras que en An y
Al se detalla su ancho y su alto. A
continuacin, vers ndice Z, que
simplemente presiona sobre el interior

de la capa, aparecer un pequeo recuadro en la parte superior derecha de
sta. Presionando
sobre l se escoger entera. Eso s,
ten en cuenta que si
tienes ms seleccionadas, esta opcin
desactivar las anteriores y remarcar
slo la elegida. Por otra parte, para seleccionar mltiples capas, tendrs que
dejar presionada la tecla Mays mientras con el ratn haces click en el resto
de capas que quieres elegir.
Otras de las opciones interesantes es la manipulacin de capas.

Cuando trabajes en el diseo de
una pgina, puedes cambiar el tamao,
mover, alinear y organizar capas. Eso s,
antes de nada, debers seleccionar una
para que sea posible efectuar todas estas funciones. La primera de ellas es el
N 126
126_50_57_Curso.indd 19
la capa, que puedes dejar en blanco

si quieres que sea transparente; y
Clase, que indica la etiqueta HTML
utilizada para definir la capa.
Finalmente, en la parte inferior del
inspector de propiedades, tienes
Desbordamiento, que controla
cmo aparecen las capas en un
navegador cuando el contenido
excede el tamao especificado de
la capa, con cuatro opciones de
eleccin: Visible indica que los datos
adicionales aparecen en la capa,
Oculto especifica que el contenido
adicional no se mostrar en el navegador, Desplazamiento seala que
el navegador deber aadir barras de
Desde el inspector de propiedades es posible configurar algunos

parmetros de las capas.
Adems de administrar los valores indicados, tambin se pueden

seleccionar capas para trabajar con ellas mediante el panel Capas.
Desde all es posible cambiar el orden
de apilamiento y la visibilidad de stas.
Para hacer lo primero, simplemente hay
que seleccionar la que se quiera y, con
el ratn, arrastrarla a su nueva posicin.
En cuanto a la segunda, debers situarte
en la columna imaginaria que hay deba-
Al igual que sucede con otros

muchos objetos en distintas
aplicaciones grficas, la forma
de mover las capas es muy sencilla.
Slo debers sealar la capa en cuestin, observar el pequeo recuadro
que aparece en la parte superior iz-
El inspector de propiedades
Si sealas mltiples capas, es posible modificar todas ellas de una

vez. De hecho, cuando lo haces,
el inspector de propiedades cambia,
como puedes ver en la imagen. Para seleccionarlas, en el panel Capas, seala
la primera y, a continuacin, con la tecla
Mays presionada, haz click con el ratn sobre el resto de capas que quieras
seleccionar. As, conjuntamente, podrs
modificar parmetros como Iz, An, Sup,
Las primeras capas seleccionadas se

ajustarn a la anchura o la altura de
la ltima, resaltada en negro.
determina el orden de apilamiento

de la capa; y Vis, que especifica si
sta es visible inicialmente o no. Ah
puedes elegir entre default, inherit,
visible y hidden. Los siguientes
parmetros son Im. Fondo, que se
refiere a la posibilidad de insertar
una imagen de fondo para la capa,
haciendo click en el icono de carpeta para localizar y seleccionar un
archivo de imagen; Col. Fondo, para
seleccionar un color de fondo para
desplazamiento a la capa tanto si se

necesitan como si no y Automtico
hace que el navegador muestre
barras de desplazamiento para la
capa cuando sean necesarias.
A continuacin, la opcin Iz
(Izquierda), Dc (Derecha) y Sup
(Superior) e Inf (Inferior) definen
un rectngulo en el espacio de
coordenadas de la capa, contando
desde la esquina superior izquierda
de sta.
55
11/8/05 14:47:00
Curso
quierda de la capa y sealarlo, lo que
har que se seleccione toda. Una vez
hecho, slo debers arrastrarla con
el ratn hacia el punto deseado de la
pgina. Si quieres hacerlo de una forma ms precisa; es decir, pxel a pxel,
10
En cuanto a la alineacin
de capas, este comando lo
que hace es ajustar una o
varias capas con el borde de la ltima
seleccionada. Cuando se produce esta
accin, las capas hijas que no estn seleccionadas pueden moverse, siempre
y cuando se seleccione y se mueva su
capa padre. Si quieres evitarlo, no utilices capas anidadas. En cualquier caso,
para alinear dos o ms, selecciona la
capa en la vista de diseo, elige Modificar / Alinear y escoge una opcin de
puedes hacerlo, una vez seleccionada,

mediante los cursores de direccin del
teclado. Incluso, es posible mantener
presionada la tecla Mays mientras
pulsas una de las flechas para mover
la capa en el incremento actual de
ajuste a la cuadrcula.
alineacin. Por ejemplo, si eliges Superior, se movern todas las capas de

modo que sus bordes superiores queden en la misma posicin vertical que
el borde superior de la ltima capa
seleccionada, resaltada en negro.
bien a la hora de poner un texto sobre una imagen. El efecto contrario

es el que encontrars si presionas en
Enviar al fondo. Por ltimo, con el
comando Evitar solapamiento de
capas, conseguirs que una capa no
11
Las ltimas operaciones

que puedes realizar con
las capas son las de organizarlas. Para ello, tendrs que
dirigirte al men Modificar / Organizar. All vers dos
parmetros superiores y
uno inferior. Con Traer
al frente conseguirs
que una capa que haba
quedado tapada por la insercin posterior de otra,
salga a la superficie para
que se vea por encima
del resto de elementos.
Por ejemplo, esto te viene
pueda incluirse dentro de otra. Por

lo tanto, viene a constituirse como la
opcin antagnica de las otras dos.
De hecho, si seleccionas esta ltima,
no podrs, evidentemente, escoger
ninguna de las otras.
Resumiendo...
1 Insertar 3 Objetos de diseo 3 Capa
6 Seleccionar capas 3 Panel capas o manejadores de seleccin
2 Capas anidadas 3 Insertar 3 Objetos de diseo 3 Capa 3 Panel Capas
7 Cambiar tamao 3 Seleccionar manejadores 3 Tirar de ellos

8 Cambiar tamao 3 Modificar 3 Alinear 3 Asignar mismo ancho o alto a
3 Presionar Control 3 Arrastrar hasta el nombre de la capa
3 Edicin 3 Preferencias 3 Capas
cada una
4 Modificar mltiples capas 3 Seleccionarlas con Mays 3 Cambiar
10 Modificar 3 Alinear
parmetros en el inspector de propiedades
5 Trabajar con capas 3 Panel capas 3 Fijar orden de apilamiento y

visibilidad
Para incluir un objeto multimedia, debes situar el punto de

insercin en la ventana de documento en la que deseas aadir el objeto. A continuacin, puedes seleccionar
56
126_50_57_Curso.indd 20
11 Modificar 3 Organizar 3 Traer al frente 3 Enviar al fondo 3 Evitar

solapamiento de capas
Los archivos multimedia

Es hora de dar un paso ms en este curso,
y en el diseo en general de las pginas web,
mediante la insercin
de objetos multimedia al proyecto. Esto
permitir hacer que
sean mucho ms atractivas. Eso s, debes
tener en cuenta que este tipo de objetos
ocupar ms espacio en tu disco y en el
servidor donde vayas a alojar tu web. Por
lo dems, constituyen un buen reclamo
para atraer nuevas visitas en Internet.
Con Dreamweaver pueden aadirse los
siguientes archivos multimedia: pelculas Flash y Shockwave, QuickTime, AVI,
applets Java, controles Active X y archivos de audio de diversos formatos.
9 Mover capas 3 Seleccionar 3 Arrastrar por el documento
o atributos de accesibilidad. Por tanto,

puedes utilizar el inspector de propiedades para especificar un archivo de origen
o para establecer las dimensiones y otros
parmetros y atributos de cada objeto.
lo hagas, en
la ventana de
documento
aparecer
un marcador
de posicin
Flash. Ahora
puedes obtener una vista previa de la pelcula
Flash en la ventana de documento.
Para ello, haz click en el marcador
de posicin Flash para seleccionar
la pelcula de la que deseas obtener
una vista previa. En el inspector de
propiedades, haz click en el botn
Reproducir o presiona en Detener
para poner fin a la vista previa. Tambin puedes obtener una vista previa
de la pelcula Flash en un navegador
presionando F12.
Consejo
Para evitar que aparezcan los cuadros
de dilogo, puedes seleccionar en el
men Edicin el apartado Preferencias
y, dentro de l, General. Una vez all,
desactiva la opcin Mostrar dilogo al
insertar objetos.
en el men Insertar la opcin Media

y, all, el comando deseado. Cuando escojas el archivo, pulsa Aceptar.
Despus aparecer el cuadro de

dilogo Atributos de accesibilidad de la etiqueta de objeto,
si has activado el cuadro de dilogo
correspondiente en Edicin / Preferencias / Accesibilidad / Media. All
podrs anotar el ttulo, la clave de acceso y el ndice de fichas. Una vez hecho
esto, el objeto multimedia aparecer en
el documento. Por cierto, debes saber
que si presionas Cancelar, se mostrar
un marcador de posicin de objeto multimedia, pero no le asociar etiquetas
Es el momento de insertar contenido en formato Flash; es decir, archivos con la extensin

.swf. As que selecciona este parmetro en el men Insertar / Media.
En el cuadro de dilogo que aparece,
escoge el fichero en cuestin. Cuando
Aparte de pelculas, tambin es

posible incluir elementos Flash,
que permiten crear rpida y
fcilmente aplicaciones de Internet
completas utilizando elementos ya
creados. Para ello, en la ventana de
documento, coloca el punto de inser-
www.pctoday.es
11/8/05 14:47:04
cin en el lugar en el que deseas aadirlo. A continuacin, selecciona Insertar / Elemento Flash / Nombre
del elemento Flash. De esa forma,
aparecer el cuadro de dilogo llamado Guardar elemento Flash. Introduce un nombre de archivo, gurdalo
en la ubicacin adecuada y haz click
en Aceptar. As, aparecer el marcador de posicin del elemento Flash
en el documento y podrs modificar
sus propiedades mediante el inspector de etiquetas y de propiedades. Por
ltimo, es posible obtener una vista
previa, seleccionando Archivo / Vista
previa en el navegador.
Conversin de capas en tablas

En vez de utilizar
tablas o el modo
de diseo para
crear una pgina,
con Dreamweaver
puedes trabajar con
capas. Un detalle
importante es pensar en el diseo, ya
que las tablas no
se pueden solapar
y tendrs que
Dreamweaver permite la conversin de capas en
evitar las capas
tablas y viceversa.
solapadas. Por lo
tanto, te conviene marcar la opcin
vacas, Usar GIFs transparentes
Evitar solapamiento de capas en
y Centrar en pgina. Ms abajo,
el apartado Organizar del men
encontrars otras cuatro herraModificar.
mientas: Evitar superposicin de
Una vez que ests seguro de que
capas, Mostrar panel de capas,
esto es as, puedes iniciar la conMostar cuadrcula y Ajustar a
versin. Para ello, simplemente
Cuadrcula. Elige segn tu convetendrs que ir al men Modificar,
niencia y presiona Aceptar.
elegir Convertir y, all, seleccionar
Si quieres realizar el proceso inverCapas a tabla. En ese instante, se
so, debes seguir los mismos pasos:
mostrar el cuadro de dilogo en
Selecciona Modificar / Convertir
cuestin, en el que tienes varias
/ Tablas en capas y, all, se mosopciones para seleccionar. La pritrarn slo las cuatro herramientas
mera es Diseo de la tabla, donde
comentadas, que podrs habilitar
podrs escoger que sea Ms preo deshabilitar, segn prefieras.
ciso, Mnimo, para contraer celdas
Finalmente, pulsa Aceptar.
Resumiendo...
1 Insertar 3 Media 3 Elegir el archivo multimedia deseado
2 Atributos de accesibilidad 3 Activar en Edicin 3 Preferencias 3
Accesibilidad 3 Media 3 Ttulo, clave de acceso e ndice de fichas
3 Insertar 3 Media 3 Flash 3 Seleccionar pelcula 3 Reproducir

4 Insertar 3 Elemento flash 3 Nombre del elemento Flash
Insercin de pelculas Shockwave

Tambin puedes utilizar Dreamweaver
para insertar pelculas Shockwave en
los documentos. Shockwave es el estndar de Macromedia para multimedia interactivo en la Web. Se trata de
un formato comprimido que permite la
descarga rpida de los archivos multimedia creados con otra aplicacin de
Macromedia, Director, que proporciona una interactividad muy elevada.
Para insertar una

pelcula Shockwave,
en la ventana de
documento, sita el punto de insercin en el lugar deseado y selecciona Insertar /
Media / Shockwave. En el cuadro
de dilogo que aparece, escoge un
Por otro lado, tambin puedes

aadir vdeo a la pgina web de
distintas formas y empleando
diferentes formatos. ste tiene la peculiaridad de que lo puede descargar el
usuario o reproducirse en flujo (streaming) mientras se descarga. Para incluir en la pgina un videoclip corto que
los usuarios puedan descargar, sita el
archivo, en formato AVI o MPEG-2, en
la carpeta del sitio. Establece un vnculo
con el videoclip, por ejemplo, con un
texto que diga Descargar videoclip.

Despus, elige el texto y haz click en el
icono de carpeta del inspector de propiedades. Localiza la ubicacin del archivo de vdeo y seleccinalo.
archivo de pelcula. A continuacin,

en el inspector de propiedades,
introduce el ancho y el alto de la pelcula en los cuadros An y Al.
Ahora es el momento de aadir

sonido a la pgina web. Para
agregar uno, en la vista Diseo,
sita el punto de insercin en el lugar
deseado, dirgete al men Insertar /
Media / Plug-in. All, en el inspector
de propiedades, haz click en el icono
de carpeta para acceder al archivo de
audio o escribe la ruta y el nombre del
de un mayor nmero de usuarios. Para

establecer un vnculo con un archivo
de audio, selecciona el texto o la imagen que deseas usar y, en el inspector
de propiedades, haz click en el icono
de carpeta para acceder al archivo de
archivo en el cuadro de texto Vnculo.
Por ltimo, especifica el ancho y el alto
introduciendo los valores en los cuadros
de texto correspondientes o cambiando
el tamao del marcador de posicin del
plug-in en la ventana de documento. Estos valores determinan con qu tamao
se muestran los controles de audio en el
navegador web.
Finalmente, es posible establecer un vnculo con archivos de

audio como una forma sencilla
y eficaz de aadir sonido a una pgina web. Este mtodo permite a los visitantes decidir si quieren escuchar el
fichero o no y ponerlo a disposicin
Resumiendo...
1 Insertar 3 Media 3 Shockwave
2 Aadir videoclip 3 Copiar a la carpeta de la web 3 Establecer vnculo
3 Insertar 3 Media 3 Plug-in
4 Establecer vnculos con archivos de audio 3 Seleccionar 3 Inspector
N 126
126_50_57_Curso.indd 21
audio o escribe la ruta y el nombre del

archivo en el cuadro de texto Vnculo.
Al incrustar audio, se incorpora el sonido directamente en la pgina, pero
ste slo se reproduce si los visitantes
del sitio disponen del plug-in adecuado
para el archivo de sonido elegido. Puedes incrustar archivos si deseas utilizar
msica de fondo o si quieres controlar
el volumen, el aspecto del reproductor en la pgina o los fragmentos de
inicio y final del archivo de sonido.
de propiedades 3 Vnculo
57
11/8/05 14:47:07
Curso
Conocimientos avanzados
La ltima entrega de este curso pondr a tu alcance algunas nociones avanzadas de la utilizacin de
Dreamweaver. As, por ejemplo, conocers qu son los comportamientos Javascript, aprenders a editar
cdigo HTML y comprobars que todo funciona correctamente en tu pgina web antes de subirla a Internet.
Gua del curso

PC Today n 122
PC Today n 124
PC Today n 125
5. Las plantillas

PC Today n 127
50
127_50_57_Curso.indd 14
o primero que vas a aprender en

esta ltima parte del curso es la
inclusin de comportamientos
a tu sitio web. Bsicamente,
este concepto designa la combinacin de
un evento (mensaje generado por un navegador para indicar que un visitante ha
hecho algo) con la accin que desencadena dicho evento. Por ejemplo, cuando
un internauta mueve el cursor por encima de un texto o imagen con hipervnculo, el navegador genera un evento para
ese enlace y luego comprueba si hay una
accin a la que deba llamar cuando se
establece dicho evento. Las acciones suelen tener cdigo JavaScript ya definido
que realiza una tarea especfica, como
abrir la ventana de un navegador, mostrar u ocultar una capa, reproducir un
sonido, detener una pelcula Shockwave,
hacer que aparezca un texto descriptivo
de una accin, etc.
A continuacin, encontrars algunas

nociones fundamentales de cdigo HTML
para que, al menos, no te pierdas si decides alternar la vista Diseo con la de
Cdigo dentro de la aplicacin. Incluso,
a veces te resultar ms til y acertado
tratar directamente con este lenguaje
de Internet que con la propia vista de la
pgina en modo Diseo. De hecho, este programa incorpora la herramienta,
Quick Tag Editor, que te ayudar a inspeccionar y editar rpidamente el cdigo
HTML de una etiqueta en la ventana de
documento, sin necesidad de cambiar a
la vista de Cdigo y volver a la ventana
de documento ms tarde. Finalmente,
el ltimo paso que te quedar, antes de
colgar tu pgina web en Internet es
comprobar que todo funciona correctamente, que los vnculos no se han roto
y que todas las pginas estn en su sitio,
para lo cual podrs generar informes.
www.pctoday.es
26/8/05 18:00:33
Adjuntar un comportamiento
La primera accin con la que debes proceder es abrir el panel Comportamientos, desplegando el men Ventana y seleccionando Comportamientos. En ese
momento, vers que aparece el men
correspondiente en la parte derecha de
la pantalla. All se irn situando todos los
eventos con sus acciones asociadas que
vayas definiendo. Por supuesto, se pueden adjuntar comportamientos al documento completo o a vnculos, imgenes,
elementos de formulario o a cualquier
otro comando HTML. A continuacin,
descubrirs lo que tienes que hacer para
crear uno de forma bsica, mientras que
en el siguiente epgrafe encontrars una
explicacin detallada de todos los comportamientos que Dreamweaver pone a
tu disposicin.
Para adjuntar un comportamiento debes seleccionar un elemento de la pgina, por ejemplo una
imagen o un vnculo. Ahora bien, si lo
que quieres es incluir uno que afecte
a la pgina completa, debers hacer

click en la etiqueta <body> en el
selector de etiquetas, situado en la
parte inferior izquierda de la ventana
del documento.
click en Aceptar, teniendo en cuenta

que todas las acciones proporcionadas
con Dreamweaver funcionan con los
navegadores de la versin 4.0 y posteriores. As, comprobars que en el panel
Comportamientos se muestra el evento seleccionado con la accin asociada
en dos columnas. En cualquier momento
puedes cambiar el primero pulsando sobre l y eligiendo la opcin deseada en
el men desplegable que aparecer.
Ahora sitate en el panel Comportamientos y presiona en

el botn de signo ms (+) para
que se despliegue el men emergente
con todas las opciones que te ofrece
Despus de adjuntar un comportamiento, se pueden aadir,

modificar o eliminar acciones
asociadas a los eventos. Simplemente, debers seleccionarlas en el panel
Dreamweaver. Elige la opcin que ms

se ajuste a tus necesidades teniendo en
cuenta que no podrs escoger ninguna
que aparezca atenuada en el men. Esto
es as porque no habr un objeto necesario en el documento actual. Por ejemplo, la accin Controlar Shockwave
o Flash aparecer atenuada si el documento no contiene pelculas de este tipo.
Resumiendo...
1 Seleccionar elemento 3 <body> para toda la pgina
2 Panel de Comportamientos 3 Signo + 3 Elegir opcin resaltada
3 Introducir los parmetros de la accin 3 Aceptar 3 Lista de eventos
en panel de Comportamientos
Cuando escojas la accin adecuada, se mostrar un cuadro

de dilogo en el que aparecern
los parmetros e instrucciones de la
accin. Debers introducirlos y hacer
4 Doble click 3 Modificar comportamiento 3 Signo 3 Eliminar

comportamiento 3 Barras de direccin 3 Cambiar orden del
comportamiento
Acciones de comportamientos
Comportamientos en los textos
La primera opcin es Abrir ventana del navegador, que debers usar para que se muestre una
pgina web en una nueva ventana. Una
vez que te aparezcan las propiedades de
esta funcin, debers establecer la URL
y configurar las opciones inferiores,

que son el ancho y el alto de la ventana, su nombre y los atributos. Dentro
de estos ltimos, tienes seis parmetros
para marcar si quieres que se muestren
o no: Barra de herramientas de navegacin (la fila de botones que incluye
Atrs, Adelante, Inicio y Actualizar),
Barra de herramientas de ubicacin
Dreamweaver cuenta con una serie de

comportamientos predefinidos que se
pueden seleccionar. A lo largo de los
prximos puntos vas a conocer todos
ellos para que sepas cmo y en qu
situaciones debers utilizarlos. Eso s,
ten en cuenta que
la mayora han sido
desarrollados para
que funcionen con
todos los navegadores ms actuales
del mercado, pero
puede suceder que
algunos comportamientos no funcionen en navegadores muy antiguos, o
que los internautas tengan desactivada
la opcin de JavaScript. En cualquier
caso, en el men desplegable de comportamientos tienes una opcin llamada Mostrar eventos para a travs
de la cual, poder elegir la versin de
navegador destino en que quieres reproducir el comportamiento.
N 127
127_50_57_Curso.indd 15
Comportamientos y hacer
doble click sobre ellas para
definir de nuevo sus propiedades en la ventana emergente, presionar en el botn
Supr del teclado o elegir el
botn para eliminarla, o
cambiar el orden en que se
producirn con las flechas de direccin
situadas justo encima de ellas. Tanto la
disponibilidad como la variedad de
posibles efectos viene explicada en el
manual del programa. Adems de en
la referencia que aparece al pulsar las
teclas Mayus y F1.
Sobre los comportamientos, debes

saber que no es posible adjuntarlos
a textos normales. Sin embargo, hay
un pequeo truco para poder hacerlo.
Sabiendo que s se pueden aadir a
vnculos, lo que puedes hacer es crear
un vnculo nulo; es decir, uno que no
seala a nada. Eso s, ten en cuenta
que, al realizarlo, el texto tendr apariencia de vnculo, por lo que puedes
cambiar su color y el subrayado para
que no parezca un enlace. Ahora bien,
de esa forma, los internautas no se
darn cuenta de que hay una razn
para hacer click en ese texto.
En cualquier caso, para adjuntar un comportamiento al texto
seleccionado puedes seguir los
siguientes pasos: En el inspector de propiedades, introduce
javascript:; en el campo Vnculo
(con los dos puntos y el punto y
coma). A continuacin, y con el
texto todava seleccionado, abre
el panel Comportamientos, elige
Puedes aadir un comportamiento a un texto, siempre y cuando

antes establezcas un vnculo nulo.
una accin en el men emergente

Acciones, introduce los parmetros
de la accin y selecciona un evento
que desencadenar la accin. Por
ltimo, slo queda cambiar la apariencia del texto vinculado. Para ello,
abre el inspector de cdigos. Ahora
busca el vnculo y en la etiqueta
a href del vnculo, inserta este
atributo: style=textdecoration:
none; color:black. Al incluirlo, se
desactiva el subrayado y el color
del texto se establece en negro.
Por supuesto, si el texto contiguo
es de un color distinto, usa el tono
en cuestin expresado en ingls en
lugar del negro.
51
26/8/05 18:00:39
n de una
o quieras
Este tipo
Curso
(la fila de opciones que
incorpora el campo de
ubicacin), Barra de
estado (zona situada
en la parte inferior de
la ventana del navegador en la que aparecen mensajes), Barra
de mens (rea en
la que aparecen mens como Archivo,
Edicin, Ver, Ir a y Ayuda), Barras
de desplazamiento (si el contenido
se extiende ms all de la zona visible)
y Selectores de cambio de tamao
(que especifica que el usuario tenga la
posibilidad de cambiar el tamao de la
ventana, bien arrastrando el ngulo inferior derecho de ella, o haciendo click en
el botn maximizar).
La accin Arrastrar capa permite crear puzzles, controles

deslizantes y otros elementos
mviles de interfaz. Cuando te salga la
ventana emergente, vers que tienes
dos pestaas: Bsico y Avanzado.
En la primera tendrs que seleccionar la capa que deseas hacer desplazable del men emergente Capa.
A continuacin, en Movimiento, escoge Restringido para los controles
deslizantes y los escenarios mviles,
como cajones de archivos, cortinas y

minipersianas; o No restringido para puzzles y otros juegos de arrastrar
y soltar. El Destino es la zona hasta
la que deseas que el visitante arrastre
la capa. Se considera que una capa ha
alcanzado el destino cuando sus coordenadas izquierda y superior coinciden
con los valores introducidos en los
campos Izquierdo y Superior. Asimismo, introduce un valor (en pxeles)
en el campo Ajustar si a menos de
para determinar lo cerca del destino
que el visitante tiene que soltar la capa para que sta se ajuste al destino.
Por ltimo, para definir el manejador
de arrastre de una capa, controlar
el movimiento de sta mientras est
siendo arrastrada y desencadenar una
accin al soltar la capa, haz click en
la pestaa Avanzado y configura cada uno de los parmetros.
La accin Cambiar propiedad

permite modificar el valor de
una de las propiedades de objeto
(por ejemplo, el color de fondo de una
capa o la accin de un formulario), pero slo debes utilizarla si cuentas con
conocimientos suficientes de HTML o
52
127_50_57_Curso.indd 16
la URL Alternativa a la que quieres redirigir a los visitantes, siempre aadiendo el

encabezado http://www.
6
JavaScript, necesarios para elegir las
opciones en los mens emergentes Tipo de objeto, Objeto con nombre y
Propiedad.
La accin Comprobar plug-in

es similar a la anterior, puesto
que puedes remitir a los visitantes a distintas pginas, dependiendo de
si tienen instalado el plug-in en cuestin.
De esta forma, debers determinar el
Si eliges la accin Carga previa

de imgenes evitars retrasos
producidos por la descarga de
imgenes, puesto que stas se cargarn
previamente en la memoria cach del
navegador. Para hacerlo, slo tendrs
que hacer click en el botn Examinar
de la ventana emergente que te aparezca al seleccionar esta categora, escoger el archivo de imagen objeto de la
carga previa o introducir la ruta y presionar en el botn ms (+), situado en
la parte superior del cuadro de dilogo, para aadir la imagen deseada a la
lista Carga previa de imgenes.
La accin Comprobar navegador permite enviar a los visitantes

a distintas pginas, dependiendo
de las marcas y versiones de sus navegadores. Por ejemplo, puede resultar
conveniente que vayan a una pgina si su
navegador es Netscape Navigator, que
vayan a otra pgina si tienen Microsoft
Internet Explorer o que permanezcan en
la pgina actual si usan un navegador de
algn otro tipo. Resulta til adjuntar este
comportamiento a la etiqueta <body>

de una pgina. Slo tendrs que determinar el criterio de separacin que deseas
aplicar a los visitantes: Por tipo de navegador, Por versin o Por ambas,
eligiendo Ir a URL, Ir a Alt URL y Permanecer en esta pgina. Por tanto, es
importante que al final escribas la URL y
plug-in adecuado y la direccin web a

la que quieres redirigir a los internautas,
tanto si lo tienes instalado como si no.
Ahora puedes utilizar la accin

Controlar Shockwave o Flash
para reproducir, detener, rebobinar o ir a un fotograma de una pelcula
Macromedia Shockwave o Macromedia Flash. Para ello, inserta un vdeo
como se explica en la anterior entrega.
A continuacin, elige Ventana / Propiedades e introduce un nombre para
la pelcula en el campo situado en el
extremo superior izquierdo del panel
Propiedades. Una vez hecho esto, ve

al panel Comportamientos y, en el botn con el signo +, elige Controlar
Shockwave o Flash. All debers seleccionar la pelcula en cuestin y marcar la opcin deseada: Reproducir,
Detener, Rebobinar o Ir a marco.
Con Controlar sonido podrs

reproducir audio y hacer, por
ejemplo, que se escuche un efecto
sonoro cuando el puntero del ratn pase
por encima de un vnculo, o que se re-
produzca msica al cargarse la pgina.

nicamente tendrs que seleccionar el
archivo que quieres que se reproduzca
en la ventana de la opcin y Aceptar.
En Definir texto encontrars

cuatro opciones, que son: Definir texto de campo de texto,
Definir texto de capa, Definir texto
de marco y Establecer texto de barra de estado. En las
tres primeras podrs
sustituir el contenido y
el formato de un campo
de texto de un formulario, de una capa y de
un marco, respectivamente. Para ello, por
supuesto, previamente debers haber
incluido una etiqueta de formulario, una
capa y un marco, como has aprendido a
lo largo de este curso. Despus, simplemente pulsando sobre cada una de las
opciones en la pgina y seleccionando la

apropiada en el panel Comportamientos, conseguirs cambiar su contenido.
La ltima opcin facilita la inclusin de
un mensaje en la barra de estado, situada
en la parte inferior izquierda de la ventana del navegador. Eso s, ten en cuenta
que debers escribir un mensaje corto,
porque de otra forma no cabr en ella.
10
La siguiente opcin que

vers es la de Establecer
imagen de barra de navegacin, cuya finalidad es convertir
una imagen cualquiera en
una de barra de navegacin.
Para lograrlo, tienes a tu
disposicin dos pestaas:
Bsico y Avanzado. Gracias a la primera, podrs
crear o actualizar una imagen o grupo de imgenes de
barra de navegacin, cambiar el URL
que debe mostrarse al hacer click en
un botn de una barra de navegacin

y seleccionar una ventana distinta en
la que mostrar un URL. En cambio, en
la ficha Avanzado
es posible cambiar
la apariencia de las
imgenes de un documento en funcin
www.pctoday.es
26/8/05 18:00:47

del estado del botn actual. Recuerda
que un elemento de la barra de navegacin puede tener cuatro estados:
Arriba, que aparece cuando el usuario
an no ha hecho click en l; Sobre,
que se muestra cuando el puntero pasa
sobre la imagen Arriba; Abajo, que
aparece despus de
hacer click en el
elemento; y Sobre
mientras abajo, que se muestra
cuando el puntero
pasa sobre la imagen Abajo despus
de hacer click en el elemento.
11
La accin Intercambiar
imagen sustituye sta por
otra cambiando el atributo
src de la etiqueta img, lo que resulta idneo para crear sustituciones
de botones y otros efectos de imgenes.
Eso s, ten presente que, debido a que
slo el atributo src se ve afectado
por esta accin, el intercambio debe
hacerse con imgenes que tengan las

mismas dimensiones (altura y anchura) que la original. En caso contrario,
la imagen que se intercambia aparecer reducida o ampliada para adaptarse
a las dimensiones de la original. Slo
tendrs que seleccionar la imagen cuyo origen deseas cambiar y hacer click
en Examinar para seleccionar el archivo de la nueva imagen en el campo
Definir origen como.
12
Con la opcin Ir a URL

conseguirs abrir una nueva pgina en la ventana actual o en el marco especificado. Esta
accin resulta especialmente til para
cambiar el contenido de dos o ms

marcos con un solo click. Para usarla, debers elegir un destino para la
direccin de la URL en la lista Abrir
en, que automticamente muestra
los nombres de todos los marcos del
conjunto actual, as como los correspondientes a la ventana principal. Por
supuesto, si no has utilizado marcos
en tu diseo, visualizar la ventana
principal ser la nica opcin que te
deje seleccionar.
13
A continuacin, encontrars la accin Llamar

JavaScript, que permite usar el panel Comportamientos
para especificar que debe ejecutarse
una funcin personalizada cuando se
produzca un evento determinado. Por
tanto, si tienes conocimientos, puedes

escribir el cdigo JavaScript por ti
mismo o copiar alguno que te interese de las diversas bibliotecas de acceso gratuito que hay en Internet. Por
ejemplo, si quieres crear un botn
Atrs, deberas escribir if (history.length > 0){history.back()}.
14
en el que los internautas pueden escoger una serie de opciones vinculadas

a otros documentos o archivos.
16
La accin Men de salto

ir est estrechamente relacionada con la anterior,
puesto que permite asociar un botn
Ir con un men de salto. Por lo tanto,
para utilizar esta accin, debe existir ya
un men de salto en el documento. As,
al hacer click en el botn Ir, se abrir
el vnculo seleccionado. Generalmente,
los mens de salto no necesitan este
tipo de botones, pues al elegir un ele-
La siguiente accin te resultar til. Se trata de Mensaje emergente y facilita

la creacin de una alerta de JavaScript
con el mensaje que desees. Dado que
este tipo de alertas slo tienen un bo-
mento, se carga sin necesidad de que

el visitante lleve a cabo ninguna otra
operacin. No obstante, si ste elige el
mismo elemento que se encuentra ya
seleccionado en el men de salto, el
enlace no se producir. Por lo tanto,
tn (Aceptar), la accin resulta adecuada para proporcionar informacin

y no para proponer una eleccin. Lo
nico que tendrs que hacer es introducir el texto en el campo Mensaje y
hacer click en Aceptar.
se puede decir que es una opcin secundaria, pero que no est mal tenerla
en cuenta.
15
Normalmente, la opcin
que viene a continuacin,
Men de salto, la encontrars apagada, puesto que para que
est resaltada debers haber creado
uno a travs del men Insertar /
Objetos de formulario / Men de
salto. Dreamweaver automticamente
establece un objeto de men y le adjunta el comportamiento del Men de
salto. As que no tendrs
que hacer nada ms. Por
supuesto, los elementos de
ste se editan igual que los
de cualquier men; es decir,
seleccionndolo y usando el
botn Valores de lista del
Inspector de propiedades. Por si
no te acordabas, un men de salto es
un men emergente de un documento
17
El comportamiento Mostrar men emergente

sirve para crear o editar un
men emergente de Dreamweaver o para abrir y modificar un men emergente
de Fireworks insertado en un documento de Dreamweaver. As, en el cuadro

de dilogo que aparezca te encontrars
con cuatro pestaas: Contenido, que
permite establecer el nombre, la estructura, el URL y el destino de elementos de
men individuales; Aspecto, para fijar
la apariencia del Estado Arriba y del
Estado Sobre del men y definir la seleccin
de fuentes para el texto
del elemento del men;
Avanzada, que define
las propiedades de las
celdas del men (el
alto, el ancho, el color,
la sangra del texto y la
N 127
127_50_57_Curso.indd 17
duracin del perodo que debe transcurrir antes de que el men aparezca
cuando el usuario mueve el puntero
sobre el desencadenante); y Posicin,
que establece dnde se sita el men en
relacin con la imagen o el vnculo desencadenante.
18
La accin Mostrar-Ocultar capas te puede resultar muy til para mostrar

informacin a medida que el visitante
vaya interactuando con la pgina, mostrando u ocultando capas. Por ejemplo,
cuando el internauta pasa el cursor por
encima de la imagen de un animal, se

puede mostrar una capa que le ofrezca
informacin sobre la regin en la que
vive, otra sobre su nombre cientfico,
otra sobre su alimentacin, etc. Incluso, esta accin tambin puede resultar
provechosa para desarrollar una capa
de carga previa; es decir, una mayor
que en un principio oculte el contenido
de la pgina y luego desaparezca cuando todos los componentes de la web se
han acabado de cargar. Slo tendrs
que seleccionar la capa cuya visibilidad
desea cambiar en la lista
Capas con nombre y
hacer click en Mostrar,
para que aparezca la capa; en Ocultar, para que
se esconda; o en Predeterminada, para restaurar la visibilidad predeterminada de la capa.
19
La accin Restaurar imagen intercambiada repone el ltimo conjunto de

imgenes intercambiadas a sus archivos de origen anteriores. Esta opcin
se aade automticamente siempre
que se adjunta la accin Intercambiar
imagen a un objeto. As pues, si dejaste
53
26/8/05 18:00:55
Curso
seleccionado el comando Restaurar
al adjuntar Intercambiar imagen, no
tendrs que elegir manualmente Restaurar imagen intercambiada.
20
El ltimo comportamiento
que te ofrece Dreamweaver es Validar formulario, cuya funcin es comprobar el
contenido de los campos de texto especificados para asegurarse de que el
usuario ha introducido el tipo correcto
de datos. Lo normal es adjuntar esta
accin a campos de texto individuales
con el evento onBlur, para validar
los campos conforme el usuario vaya

rellenando el formulario; o adjuntarla
con el evento onSubmit para evaluar varios campos de texto cuando el
usuario haga click en el botn Enviar.
Al adjuntar esta accin a un formu-
lario, se evita que ste sea enviado al

servidor si alguno de los campos especificados contiene datos no vlidos.
Estos parmetros se fijan en la columna de eventos (la de la izquierda) en el
panel Comportamientos.
Para validar campos conforme el usuario

los rellena en el formulario, selecciona
el campo en cuestin en el cuadro de
dilogo Validar formulario y elige la
opcin Obligatorio si ste debe contener algn dato. Marca los parmetros
Cualquier cosa si el campo es obligatorio pero no tiene que contener ningn
tipo de dato determinado, Direccin de
correo electrnico para comprobar
si el campo contiene un smbolo "@",
Nmero para comprobar que el campo
tiene solamente caracteres numricos y
Nmero del al para asegurarte
de que el campo slo incluye numricos
dentro de un rango determinado.
Resumiendo...
1 Abrir ventana del navegador 3 Establecer URL 3 Establecer alto y
11 Intercambiar imagen 3 Cambia el atributo src de la etiqueta img
ancho de la ventana, nombre y atributos
2 Arrastrar capa 3 Bsico 3 Seleccionar la capa desplazable 3 Avanzado

3 Cambiar propiedad 3 Tipo de objeto, Objeto con nombre y Propiedad
4 Carga previa de imgenes 3 Examinar 3 Seleccionar imagen
14 Mensaje emergente 3 Creacin de alertas 3 Slo botn Aceptar

15 Insertar 3 Objetos de formulario 3 Men de salto
Etiqueta <body>
6 Comprobar plug-in 3 Remitir a los visitantes a distintas pginas depen-
16 Men de salto ir 3 Asociar botn Ir con un men de salto

17 Mostrar men emergente 3 Contenido 3 Aspecto 3 Avanzada 3
diendo de si tienen instalado el plug-in en cuestin
7 Controlar Shockwave o Flash 3 Reproducir, detener, rebobinar o ir a un
Ajustar posicin
18 Mostrar-Ocultar capas 3 Seleccionar la capa 3 Escoger Mostrar,
fotograma de una pelcula
8 Controlar sonido 3 Hacer que se escuche efecto sonoro con determina-
Ocultar o Predeterminada
19 Restaurar imagen intercambiada 3 Reponer el ltimo conjunto de
das acciones
9 Definir texto 3 Definir texto de campo de texto 3 Definir texto de capa

3 Definir texto de marco 3 Establecer texto de barra de estado
10 Establecer imagen de barra de navegacin 3 Bsico 3 Crear o actuali-
Trabajar con cdigo HTML
127_50_57_Curso.indd 18
13 Llamar JavaScript 3 Especificar una funcin personalizada con un

evento determinado
5 Comprobar navegador 3 Enviar a los visitantes a distintas pginas 3
54
12 Ir a URL 3 Abrir una nueva pgina en la ventana actual o en el marco

especificado
3 Desencadenar accin al soltar la capa
A lo largo de estas pginas has aprendido a desarrollar diversos aspectos

de tu pgina web de una forma visual e
intuitiva a travs del panel de Diseo
de Dreamweaver, por lo que en ningn momento has tenido que utilizar
cdigo HTML. Sin embargo, no est de
ms tener ciertas nociones bsicas de
ste para obtener un mayor control de
tu sitio y solucionar los posibles problemas que te pudieran surgir. sta es
una pequea gua que te orientar,
pero en ningn caso debes entenderla como la panacea que te ayudar a
leer cdigo HTML. Aparte de todo
esto, Dreamweaver te ser de gran
ayuda para entender este lenguaje si
trabajas con la opcin Dividir activada, cuya funcin es mostrarte en la
zar una imagen 3 Avanzado 3 Cambiar la apariencia de las imgenes
parte superior de la pantalla el cdigo

de programacin y en la inferior su
representacin visual.
Lo primero que vas a hacer es

aprender a aplicar sangra a una
lnea o seccin de cdigo especfica en la pgina que ya tienes creada,
pues esto te ayudar a separar ese cdigo del resto, facilitando su localizacin.
imgenes intercambiadas
20 Validar formulario 3 Obligatorio 3 Escoger entre Cualquier cosa,

Direccin de correo electrnico, Nmero y Nmero del al
Adems, as comprobars si todas las

etiquetas estn equilibradas; es decir,
las de apertura tienen sus correspondientes de cierre y a la inversa, algo
especialmente til cuando se utilizan
mltiples niveles de anidacin. Lo que
debes hacer es seleccionar la lnea o
lneas a las que deseas aplicar sangra,
desplegar el men Edicin y pulsar
Aplicar sangra al cdigo. Si deseas
realizar el paso inverso, escoge Anular sangra en el cdigo. Por ltimo,
para comprobar si las etiquetas estn
equilibradas, sita el punto de insercin
en el cdigo anidado
que deseas comprobar,
pulsa en el men Edicin / Seleccionar
etiqueta padre. As se
resaltarn las etiquetas
de apertura y cierre en
el cdigo.
El siguiente paso es incluir una

nueva etiqueta en la vista Cdigo. Para ello, debers utilizar
el Selector de etiquetas. En primer
lugar, sitate en el punto de la vista
Cdigo en el que quieras insertar
la etiqueta. Presiona sobre ese punto con el botn derecho del ratn.
Cuando te aparezca el men emergente escoge Insertar etiqueta, lo
Consejo
El panel Referencia constituye una herramienta de consulta rpida de etiquetas HTML. Proporciona informacin sobre
etiquetas, objetos o estilos especficos
con los que se est trabajando en la vista
de Cdigo. Para abrirlo, sitate en la vista Cdigo, selecciona el elemento sobre
el que desea informacin y, en el men
Ventana, escoge Referencia.
www.pctoday.es
26/8/05 18:01:00

zar situado en el Inspector de propiedades para que la vista Diseo
se muestre con los nuevos cambios
que has introducido.
que necesites y hacer doble click sobre

ella para que aparezca en su lugar.
Otra posibilidad que te puede surgir es la de tener que editar una

etiqueta ya creada. En ese caso,
en el panel izquierdo de la pantalla, selecciona el Inspector de etiquetas y,
all, escoge la ficha Atributos. En ese
momento vers los atributos de la etiqueta seleccionada en la ventana de documento. Para tenerlos todos en orden
alfabtico, haz click en el botn Mostrar
Dreamweaver incorpora una til

funcin que te permitir insertar
etiquetas segn escribas el cdigo. Por ejemplo, dirgete al final del
documento y, all, entre dos marcas de
que har que se abra el Selector de

etiquetas. Como vers, en l tienes
una columna izquierda con las distintas etiquetas en los distintos lenguajes
de formato. El que te interesa es HTML. En cuanto lo selecciones, te aparecern en el apartado derecho todas
las que hay disponibles. Para que te
orientes sobre la funcin de cada una
de ellas, pulsa en el botn Datos de
etiqueta, lo que abrir una pequea
ventana inferior con una descripcin
en ingls de cada opcin. Selecciona
la que quieras y presiona Insertar.
Una vez que finalices el proceso no
olvides presionar el botn Actuali-
Resumiendo...
1 Sangra 3 Edicin 3 Aplicar sangra al cdigo 3 Etiquetas equilibradas
3 Edicin 3 Seleccionar etiqueta padre
2 Vista Cdigo 3 Botn derecho del ratn 3 Insertar Etiqueta 3 HTML

3 Escoger una 3 Insertar
3 Insertar etiquetas 3 Escribir < 3 Seleccionar una de la ventana
prrafo ( y ), escribe <. En

ese momento vers cmo aparece una
ventana emergente con todas las opciones de etiquetas que puedes aadir
al texto. Slo tendrs que seleccionar la
emergente
4 Editar etiquetas 3 Inspector de etiquetas 3 Atributos
Quick Tag Editor

Dreamweaver incluye una herramienta denominada Quick Tag Editor
que te servir para inspeccionar y editar cdigo HTML de una etiqueta en
la ventana de Diseo, de forma muy
rpida. Una de sus ventajas es que no
hace necesario que cambies a la vis-
ta de Cdigo y luego volver a ella al

terminar. Para acceder a esta seccin
tienes que pulsar las teclas Control y
T de forma simultnea.
Lo primero que debes saber de

esta funcin es que cuenta con
tres modos de funcionamiento:
Insertar HTML, Editar etiqueta y
Ajustar etiqueta. La seleccin actual
Las etiquetas estndar

de la vista de Diseo determina el
modo en el que se abre esta seccin
del progrma. No obstante, el funcionamiento bsico es el mismo en los
tres: se abre el editor, se introducen
o se editan las etiquetas o atributos y
se cierra.
HTML es un lenguaje de formato

de texto, lo que significa que los
documentos HTML son documentos de texto sencillo que tienen
etiquetas de formato que indican al
navegador cmo debe mostrar el
texto. Obligatoriamente, todos los
documentos HTML deben contener
etiquetas estndar, denominadas
head y body, y todas ellas estn
compuestas por etiquetas de apertura (representadas as: <head>) y de
cierre (con esta estructura </head>).
Etiquetas head. La seccin del
encabezado (situada entre de etiquetas "head") slo contiene el ttulo
de la pgina (situado entre etiquetas
"title") y secuencias de comandos
de programacin, como cdigo
JavaScript que implementa una
imagen de sustitucin en la pgina.
El texto introducido entre <title>
y </title> aparecer en la barra
superior de ttulo de la ventana del
navegador, no en la pgina.
Etiquetas body. Todo el texto, las

imgenes, las tablas y dems contenido debern situarse entre las
etiquetas <body> y </body>. Dentro
de stas encontrars:
La forma de introducir cada

uno de estos tres valores vara
segn la funcin que permiten
ejecutar. En el primer caso, Insertar
HTML, debers escribir directamente
la etiqueta HTML que quieres insertar; en el segundo, Editar etiqueta,
antes debers seleccionar la etiqueta
que deseas editar. Una vez hecho, se
mostrar su cdigo en el editor, donde podrs modificar lo que consideres oportuno. En el tercero, Ajustar
etiqueta, tendrs que seleccionar
antes un texto o un objeto que incluya
una etiqueta HTML de apertura o cierre, teclear la de apertura y presionar
Intro. sta se insertar al principio
de la seleccin actual, junto con la
correspondiente de cierre al final.
Para alternar entre estos tres modos,
slo debers pulsar repetidamente la
combinacin de teclas Control+T.
N 127
127_50_57_Curso.indd 19
vista de lista; es decir, el icono con las

letras A y Z que aparecen junto con
una flecha. All mismo podrs modificar
lo que consideres oportuno.
Las de encabezado, es decir,

las etiquetas de h1 a h6.
Suelen mostrarse con texto en
negrita o ms grande que el
normal. h1 es el ms grande y
h6, el ms pequeo.
Las etiquetas de prrafo (p)

separan el contenido de texto en
prrafos. Dado que los navegadores
web ajustan lneas y no tienen en
cuenta los saltos de lnea, debers
utilizar etiquetas p para evitar que
los navegadores coloquen todo el
contenido del texto junto.
Todos los documentos HTML

deben contener unas etiquetas
estndar head y body.
Las etiquetas de salto de lnea

(br) imponen saltos de lnea en la
pgina en lugar de aadir espacio
en blanco adicional como la anterior.
Dado que la etiqueta br inserta un
solo salto de lnea, no es necesario
incluir una etiqueta de cierre.
Las etiquetas de imagen insertan
imgenes. Siguen el formato <img s
rc=nombrearchivoimagen>. Estas
etiquetas tambin pueden incluir
atributos width y height (para el
tamao de la imagen), border (para
el ancho del borde) y align y valign
(para fijar la alineacin horizontal y
vertical, respectivamente).
55
26/8/05 18:01:05
Curso
Un pequeo truco para aplicar

los cambios inmediatamente,
sin tener que cerrar Quick
Tag Editor, es presionar la tecla Tab
cuando hayas escrito o modificado la
Limpiar cdigo HTML
de la etiqueta que
ests editando o insertando. Por cierto, si Dreamweaver
no reconociera la
etiqueta que edites,
el men de sugerencias contendr
todos los atributos
reconocibles por la
aplicacin, gracias
a la completa librera que posee.
Con la opcin Limpiar HTML podrs mejorar el aspecto del cdigo

HTML que est desordenado o resulte ilegible.
Dreamweaver incorpora una funcin

interesante llamada Limpiar HTML
que permite eliminar etiquetas
vacas, combinar etiquetas anidadas
y, en general, mejorar cdigos HTML
desordenados o ilegibles. La encontrars en el men Comandos y en
el cuadro de dilogo que te aparecer tienes varias opciones:
Etiquetas contenedoras vacas
elimina las etiquetas que carecen de
contenido. Por ejemplo, 
se consideran etiquetas vacas, algo
que ya no sera as si apareciera un
texto entre medias de ambas.
Etiquetas anidadas repetidas
borra todas las repeticiones de
una etiqueta. Por ejemplo, en
el cdigo Esto es lo que
realmente quera decir, las etiquetas b que rodean a
la palabra realmente estn repetidas y se eliminaran.
Comentarios HTML ajenos a
Dreamweaver elimina todos los
comentarios que no hayan sido
insertados por Dreamweaver.
Formato especial de Dreamweaver

borra los comentarios que
Dreamweaver aade al cdigo para
permitir que los documentos se
actualicen automticamente cuando
lo hagan las plantillas y los elementos de biblioteca.
Etiqueta(s) especfica(s) suprime
las etiquetas especificadas en el
campo de texto contiguo.
Combinar etiquetas de 
anidadas, cuando sea posible
consolida dos o ms etiquetas font
cuando stas controlan el mismo
rango de texto. Por ejemplo,
big

red.
Mostrar registro al terminar
muestra un cuadro de alerta con
detalles acerca de los cambios
realizados en el documento inmediatamente despus de concluir la
limpieza del cdigo.
56
127_50_57_Curso.indd 20
Un comentario es un texto descriptivo

que se inserta en el cdigo HTML para
explicar algo. ste slo aparece en la
vista de Cdigo y no se muestra en
la pgina web. Para insertar uno, sita el punto de insercin en el lugar
deseado y pulsa Insertar / Etiquetas
invisibles / Comentario. Su creacin
genera el cdigo HTML: <!Texto
del comentario-->.
1 Quick Tag Editor 3 Insertar HTML 3 Editar etiqueta 3 3 Ajustar

la etiqueta
2 Control+T 3 Alternar entre los distintos modos

3 Tecla Tab 3 Aplicar los cambios inmediatamente
4 Quick Tag Editor 3 Men de sugerencias 3 Esperar unos segundos
dilogo Verificador de vnculos, que

te mostrar los vnculos rotos, los vnculos externos y los archivos hurfanos.
Para alternar entre una opcin u otra,
utiliza el men Ver. Ahora podrs cotejar los externos, eliminar los hurfanos
marcando cada uno de ellos y luego
presionando sobre Supr y Reparar
los vnculos rotos.
Consejo
Resumiendo...
Hablando de stos, debers elegir

la opcin Vnculos rotos en el
men desplegable Ver. Comprueba cmo, al sealar sobre l, aparece un
icono de carpeta junto al vnculo roto.
Haz click en l para localizar el archivo
Antes de cargar el sitio en un servidor

y dejarlo listo para que los internautas
lo visiten, conviene comprobarlo localmente. Es necesario asegurarse de
que las pginas tienen la apariencia y
el funcionamiento esperado en los navegadores de destino, que no hay vnculos rotos y que las pginas no tardan
demasiado en cargarse.
Mientras tienes activa la ventana Quick Tag Editor, puedes acceder, simplemente esperando unos segundos, al men de
Sugerencias sobre atributos que
muestra todos los atributos vlidos
big red se cambiara a
Comprobar la pgina
Lo primero que debers verificar

es si todos los vnculos funcionan
correctamente, teniendo en cuenta que Dreamweaver comprueba slo
los establecidos con documentos del
sitio, no con los externos, aunque s recopila una lista de ellos. As pues, para
identificar todos los vnculos del sitio,
despliega el men Sitio y elige Comprobar vnculos en todo el sitio. En
ese momento aparecer el cuadro de
etiqueta correspondiente. Vers cmo

al instante se materializan los resultados en la ventana del documento,
igual que si cambias la ventana activa
con una pulsacin de ratn.
actualizar nicamente la referencia actual. A medida que los vnculos se van

reparando, sus entradas desaparecen de
la lista Vnculos rotos.
Una vez que tienes abierta la

ventana de resultados y revisada la pestaa Verificador
de vnculos, puedes continuar comprobando el sitio web pulsando en el
resto de pestaas. La primera es Buscar, mediante la cual y, a travs del
cuadro de dilogo que te aparecer
si presionas la flecha verde de la izquierda, podrs encontrar y reempla-
con el que deseas establecer el vnculo y

pulsa Intro. Por cierto, si hubiera otras
referencias rotas a este mismo archivo,
aparecera un cuadro de dilogo que te
pedira que las repararas. Finalmente,
presiona S para actualizar todos los
documentos de la lista que hacen referencia a este archivo o No, si deseas
www.pctoday.es
26/8/05 18:01:12

zar un texto concreto del documento.
Funciona como un comando de Word,
por lo que slo tendrs que decirle el
tipo de documento que quieres que
busque, por qu texto quieres sustituirlo y sealar algunas opciones de
bsqueda como Coincidir maysculas y minsculas, Palabra completa, Omitir espacio en blanco y
Utilizar expresin regular.
La siguiente pestaa es Validacin y su objetivo es mostrarte

si el cdigo HTML incluido contiene errores de etiquetas o de sintaxis.
En ese sentido, Dreamweaver puede validar documentos en varios lenguajes,
entre ellos HTML, XHTML, ColdFusion
Markup Language (CFML), JavaServer

Pages (JSP), Wireless Markup Language (WML) y XML. De nuevo, tendrs
que pulsar en la flecha verde y elegir
si quieres validar el documento o todo
Consejo
En la parte inferior de la ventana de documento figuran el tamao y el tiempo
estimado de descarga de la pgina actual calculado por Dreamweaver. En estos casos, se aplica la regla de los ocho
segundos, que dice que un internauta
no espera ms de ese tiempo a que la
pgina se descargue por completo. Para establecer las preferencias de tiempo y tamao de descarga, ve a Edicin
/ Preferencias y, en Barra de estado,
elige una velocidad de conexin para
calcular el tiempo de descarga.
el sitio. En ambos casos te aparecer

el mensaje No se han encontrado
errores ni advertencias, si est todo
correcto, o una lista de los fallos de
sintaxis hallados.
Siguiendo con la opcin de validacin, el programa te ofrece

la posibilidad de establecer sus
preferencias. En ese caso, tendrs
que seleccionar Configuracin en el
men desplegable que aparece al pre-
sionar en la flecha verde. Esto har

que se abra el cuadro de dilogo de
Preferencias, donde podrs marcar los idiomas que deben utilizarse
para realizar la validacin, teniendo
en cuenta que no podrs seleccionar
varias versiones del mismo.
Por ejemplo, si eliges HTML
4.0, no podrs escoger tambin HTML 3.2 o HTML 2.0.
As pues, selecciona la versin ms antigua con la que
desees realizar la validacin.
A continuacin, haz click en
Opciones y seala los parmetros de visualizacin que
deseas que se incluyan en el
informe y que son: Errores, Advertencias, Mensajes personalizados
y Errores de anidacin. Finalmente,
marca Comillas en el texto, si quieres que Dreamweaver te avise cada vez
que se utilicen comillas en el texto del
documento; o Entidades en el texto,
para que la aplicacin te recomiende el
cambio de varios caracteres por otros
HTML equivalentes.
valores que el navegador de destino no

acepta. Este parmetro ofrece informacin sobre tres niveles de problemas
potenciales: Errores (indica cdigo
que puede causar un problema visible
grave en un navegador concreto, como
hacer desaparecer partes de una pgina), Advertencias (seala una parte
de cdigo que no se visualizar correctamente en un navegador concreto,
pero eso no causar ningn problema
de visualizacin grave) y Mensajes informativos (seala cdigo que no es
compatible con un navegador determinado, pero que no tiene ningn efecto visible). Los distinguirs porque el
primero aparece junto a un icono rojo;
el segundo, amarillo; y el tercero, con
forma de bocadillo de cmic.
Al igual que pasaba en la pestaa

anterior, en sta tambin puedes
configurar sus propiedades. Dirgete a la flecha verde y seleccionar
Configuracin. As se abrir un nuevo
La siguiente pestaa es Revisin del navegador de destino, cuya funcin es probar el

cdigo de los documentos para ver si
hay etiquetas, atributos, propiedades o
cuadro de dilogo que te ofrece la posibilidad de elegir entre varios navegadores, as como las versiones de cada
uno de ellos.
La siguiente pestaa, Informes,

merece un tratamiento aparte,
que lo encontrars si continas
leyendo. Mientras tanto, puedes detenerte en las opciones Registro FTP y
Depuracin del servidor. El primer
Consejo
Comprueba que las pginas funcionan
de la forma prevista en los navegadores
de destino. stas debern ser legibles y
funcionales en aqullos que no admiten
estilos, capas, plug-ins ni JavaScript.
Con las pginas que funcionen muy
mal en navegadores antiguos puedes
utilizar el comportamiento Comprobar
navegador del que hemos hablado
ms atrs.
comando sirve para registrar toda la

actividad de transferencia de archivos
mediante FTP. As, si se produce un
error mientras envas o recibes un fichero con FTP, este apartado te ayudar
a determinar el problema. El segundo,
en cambio, permite ver informacin y
reparar la pgina que
hayas creado si has
utilizado como servidor de prueba de
Dreamweaver la aplicacin ColdFusion,
programa de Macromedia que sirve para
desarrollar aplicaciones web dinmicas.
Resumiendo...
1 Sitio 3 Comprobar vnculos en todo el sitio 3 Vnculos rotos, Vnculos
5 Establecer preferencias de validacin 3 Flecha verde 3 Configuracin
externos y Archivos hurfanos 3 Cotejar resultados 3 Eliminar con

tecla Sup
3 Elegir lenguaje 3 Seleccionar opciones
6 Revisin del navegador de destino 3 Errores, Advertencias y Mensajes
2 Vnculos rotos 3 Sealar vnculo 3 Pulsar en la carpeta 3 Corregir

vnculo 3 Intro
informativos
7 Propiedades de Revisin del navegador de destino 3 Flecha verde 3
3 Buscar 3 Flecha verde 3 Encontrar y reemplazar textos

4 Validacin 3 Flecha verde 3 Elegir entre Validar el documento
Configuracin 3 Elegir navegadores y versiones
8 Registro FTP 3 Determinar problemas en la transferencia de archivos
o Validar el sitio
FTP 3 Depuracin de servidor 3 Uso de ColdFusion
N 127
127_50_57_Curso.indd 21
57
26/8/05 18:01:18

Curso de Dreamweaver

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Curso de Dreamweaver

Enviado por

Direitos autorais:

Formatos disponíveis

Curso

Crea tu propia web

Gua del curso

2. Los primeros pasos

3. Aade color a tu web

4. Las tablas, los marcos y los formularios

Comportamiento de una pgina web. JavaScripts. Edita HTML. Problemas de cdigo en la

un diseo o de funciones exclusivas

Diseo web con Dreamweaver. 1 Parte

Antes de continuar, conviene aclarar

FTP (File Transfer Protocol).

larios, efectos en la barra de estado,

encuentran en un solo servidor. Punto

formato requerido. De esto, por supuesto, no te tienes que preocupar si utilizas

Pero, probablemente, ahora te estars

Dreamweaver MX 2004 es la reina

Por supuesto, tambin es posible codificar completamente las transferencias

Antes de comenzar el curso propiamente dicho y una vez que conoces

limitar su utilizacin es a travs del

de Dreamweaver, sin que tengas que salir del programa.

Teclea en tu navegador www.

al que pone Dreamweaver MX 2004 y

Una vez que lo hayas rellenado,

te bajars. Pero es preciso decir que,

serie de datos. El correo electrnico

Ahora que tienes el archivo en tu escritorio, es el

Ahora escribe tu direccin de

De esta forma llegars a la pantalla de descarga de la aplicacin. Eso s, antes de seguir, te

y S. Ahora elige la carpeta de destino en

2 Crear una nueva cuenta 3 Escribir direccin de correo 3 Completar el

3 Rellenar Encuesta de Macromedia y preferencias de comunicacin

nes que aparezcan en el curso y no te

Archivo. Contienen los elementos

de pgina seleccionado. Adems,

Edicin. Aqu estn los comandos

Texto. Aqu tienes la mejor forma de

Ver. Te permite obtener diversas

Comandos. Proporciona acceso a

Insertar. Ofrece una alternativa a

Ventana. Proporciona acceso a todos

Modificar. Con este men podrs

Ayuda. Para acceder a la documentacin de Dreamweaver.

El segundo es el del codificador, que

Las barras de herramientas

rramientas estndar. stas corresponden a las de cambio de vista del

Los paneles e inspectores

Diseo web con Dreamweaver. 1 Parte

La barra de herramientas Insertar o panel de objetos te permite

2 Las barras 3 Ttulo, Mens, Herramientas estndar y Documento

grupos tambin se pueden acoplar a

Hay otra posibilidad, que es abrir

Acoplamiento y desacoplamiento. Puedes mover paneles

Opciones de la barra de ttulo del

paneles, arrstralo por

Si que quieres ampliar un grupo de paneles, selecciona Maximizar grupo de

Cambio de tamao y nombre.

4 Maximizar paneles Opciones 3 Maximizar grupo de paneles

Tu primera pgina con HTML

Para empezar, abre la aplicacin Dreamweaver y selecciona

na seguido de la terminacin .net,

Lo siguiente es insertar una imagen.

pginas web. Si nunca has hecho una,

Por ltimo, para cambiar el nombre

se abre una ventana con una opcin