1

Curso de Dreamweaver MX 2004

1. Conceptos bsicos de Dreamweaver MX 2004
2. El entorno de trabajo
3. Configuracin de un sitio local
4. El texto
5. Hiperenlaces

6. Imgenes
7. Tablas
8. Marcos
9. Formularios
10. Multimedia

11. Las plantillas

12. Capas
13. Comportamientos
14. Otros elementos
15. HTML desde Dreamweaver

Unidad 1. Conceptos bsicos de Dreamweaver MX 2004 (I)

Qu es Dreamweaver MX 2004
Dreamweaver MX 2004 es un software fcil de usar que permite crear
pginas web profesionales.
Las funciones de edicin visual de Dreamweaver MX 2004 permiten agregar
rpidamente diseo y funcionalidad a las pginas, sin la necesidad de
programar manualmente el cdigo HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar
comportamientos JavaScript, etc., de una forma muy sencilla y visual.
Adems incluye un software de cliente FTP completo, permitiendo entre
otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio
web en el servidor sin salir del programa.
Te puedes descargar gratuitamente la ltima versin de Dreamweaver
desde la pgina de Macromedia, la versin caduca al cabo de 30 das, pero
seguro que te animas a comprar la versin de pago de este estupendo
programa.

Editar pginas web

Cualquier editor de texto permite crear

pginas web. Para ello slo es necesario
crear los documentos con la extensin
HTML o HTM, e incluir como contenido
del documento el cdigo HTML deseado.
Puede utilizarse incluso el Bloc de notas
para hacerlo.
Pero crear pginas web mediante el
cdigo HTML es ms costoso que hacerlo
utilizando un editor grfico. Al no utilizar
un editor grfico cuesta mucho ms
insertar cada uno de los elementos de la pgina, al mismo tiempo que es ms
complicado crear una apariencia profesional para la pgina.
Hoy en da existe una amplia gama de editores de pginas web. Uno de los
ms utilizados, y que destaca por su sencillez y por las numerosas funciones
que incluye, es Macromedia Dreamweaver.
Adems de Dreamweaver, existen otra serie de buenos editores de pginas
web, como pueden ser Microsoft Frontpage, Adobe Pagemill, Adobe GoLive,
NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y
Arachnophilia, algunos de los cuales tienen la ventaja de ser gratuitos.

Cmo tener una pgina en Internet

Para poder poner una pgina web en Internet, es necesario contratar a
alguna empresa con servidores que pueda alojarla y hacerla accesible desde
Internet las 24 horas del da. El precio por disponer de espacio propio en el
servidor depender de la empresa, del espacio en disco, volumen de
transferencia y otras opciones que podamos contratar.
Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas
limitaciones: poco espacio de disco, lentitud y nombre de nuestra pgina
precedido por el de la suya. Hay que tener tambin en cuenta que estas
empresas deben generar ingresos de alguna forma, por lo que se dedican a
vender espacios publicitarios dentro de nuestras pginas, publicidad que no
podremos negarnos a incluir en ellas.
Por estos motivos, no se recomienda utilizar hospedaje gratuito para la
pgina de una empresa, aunque s es aceptable para una pgina personal.

Cuando se va a contratar un servicio de hospedaje es necesario contratar

tambin un dominio, tarea de la que se suele encargar la propia empresa de
hospedaje. Registrar un dominio consiste en registrar un nombre para nuestra
pgina. Este nombre no puede estar repetido en Internet, ha de ser nico, al
igual que ocurre con los nombres de las empresas. Es posible registrar un
mismo nombre con distintas terminaciones, como por ejemplo, .net, .org, .es
o .com.
En el caso de los hospedajes gratuitos no es necesario registrar ningn
dominio, ya que nuestra pgina no ser ms que un archivo dentro de la de la
empresa contratada.
A la hora de contratar un servicio de hospedaje tambin hay que tener en
cuenta el nmero de cuentas de correo electrnico propias que pueden
habilitarse y si disponemos 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.
Si piensas contratar un servicio de hospedaje te recomendamos
Alojalia.com

Unidad 1. Conceptos bsicos de Dreamweaver MX 2004 (II)

Arrancar y cerrar Dreamweaver MX 2004
Veamos las dos formas bsicas de arrancar Dreamweaver MX 2004.
Desde el botn Inicio
situado, normalmente, en la esquina
inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botn
Inicio, se despliega un men; al colocar el cursor sobre Programas aparece
otra lista con los programas que hay instalados en tu ordenador, buscar
Macromedia, seguidamente Macromedia Dreamweaver MX 2004 , hacer clic
sobre l, y se arrancar el programa.
Desde el icono de Dreamweaver MX 2004 del escritorio

Puedes arrancar Dreamweaver MX 2004 ahora para ir probando todo lo que

te explicamos. Cuando realices los ejercicios tambin puedes compaginar dos
sesiones de la forma que te explicamos aqu.

Para cerrar Dreamweaver MX 2004, puedes utilizar cualquiera de las

siguientes operaciones:
Hacer clic en el botn cerrar
Pulsar la combinacin de teclas ALT+F4.
Hacer clic sobre el men Archivo y elegir la opcin Salir.
Si existe algn documento modificado que no ha sido guardado antes de
cerrar Dreamweaver, se te pedir confirmacin para guardar o no cada uno de
ellos.

Abrir y guardar documentos

Para abrir un documento, puedes utilizar cualquiera de las siguientes
operaciones.
Hacer clic en el botn abrir

de la barra de herramientas estndar.

Pulsar la combinacin de teclas Ctrl+O.

Hacer clic sobre el men Archivo y elegir la opcin Abrir.
Hacer doble clic sobre el archivo en la ventana del sitio.

Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes

operaciones.
Hacer clic en el botn abrir

de la barra de herramientas estndar.

Pulsar la combinacin de teclas Ctrl+N.

Hacer clic sobre el men Archivo y elegir la opcin Nuevo.
Hacer doble clic sobre el archivo en la ventana del sitio.
Despus de esto aparecer una nueva ventana, en la que debers elegir la
Categora Pgina bsica, HTML.

Para guardar un documento, puedes utilizar cualquiera de las siguientes

operaciones.
Hacer clic en el botn guardar

de la barra de herramientas estndar.

Pulsar la combinacin de teclas Ctrl+S.

Hacer clic sobre el men Archivo y elegir la opcin Guardar.
Dreamweaver incluye la posibilidad de, en el caso de estar trabajando
simultneamente con varios documentos, poder guardar todos de golpe, sin la
necesidad de hacerlo uno por uno. Para guardar todo puedes realizar
cualquiera de las siguientes operaciones.
Hacer clic en el botn guardar todo
estndar.

de la barra de herramientas

Hacer clic sobre el men Archivo y elegir la opcin Guardar todo.

Al tener varios documentos abiertos es fcil olvidarse de todos las
modificaciones hechas en cada uno de ellos. Debes tener mucho cuidado al
utilizar la opcin guardar todo, ya que en ocasiones es posible no desear
guardar los cambios en todos los documentos modificados. Por ello es
conveniente que al principio no utilices esta opcin, al menos hasta que te
hayas habituado a manejar el programa.

Unidad 1.Conceptos bsicos de Dreamweaver MX 2004 (III)

Para que te vayas haciendo una idea de cmo funciona Dreamweaver,
vamos a crear una pgina web sencilla, con varios estilos de texto, una
imagen y un enlace a otra pgina. Crear esta pgina solo te llevar unos
pocos minutos, y sabrs cmo trabajar con los elementos bsicos con los que
estn hechas la mayora de las pginas web. Si nunca has hecho una pgina
web, este es el momento para descubrir lo fcil que es.

Mi primera pgina

Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la

pgina anterior como puede hacerse. Abres un documento nuevo y
seleccionas la Categora Pgina bsica, HTML.
Seguidamente introduce, en el documento en blanco, el texto que aparece
en la imagen siguiente.

Una vez introducido el texto, vas a modificar el ttulo y el color de fondo del
documento.
Para ello debes hacer clic sobre el men Modificar y elegir la opcin
Propiedades de la pgina.
Entonces se abrir una ventana como la que aparece ms abajo.

Cambia el Ttulo por "Mi primera pgina".

En Color de Fondo escribe "#CCCCFF", de este modo el fondo del
documento pasar a ser de color azul.
Seguidamente pulsa sobre el botn Aceptar.
Ahora vas a insertar una imagen. Para insertar la imagen, ha de estar
accesible para nosotros. Para ello debe encontrarse en nuestro disco duro, en
un cd-rom o en un disquete, pero preferiblemente en el disco duro.
Muchas de las imgenes que vemos en Internet se pueden copiar al disco
duro. Al hacer clic con el botn derecho del ratn sobre la imagen que
queremos traer de Internet, se abre una ventana con una opcin similar a
Guardar imagen como... (dependiendo del navegador que utilices) que
permite grabar dicha imagen en un fichero de nuestro disco duro.
En los navegadores ms modernos al colocar el cursor sobre una imagen
aparecen estos iconos
en una esquina de la imagen, si haces clic
en el icono del disquete aparecer el mismo men Guardar imagen como... a
que hacamos referencia anteriormente.
Copia la imagen que aparece a continuacin, para luego poder insertarla en
la pgina web que estamos creando. Puedes guardarla, por ejemplo, en la
carpeta Mis Documentos.

Ahora tienes que insertar la imagen debajo de

la segunda lnea de texto. En primer lugar debes
situar el cursor al final de la segunda lnea y
pulsar un intro (enter) para ir a una nueva lnea.
Despus debes dirigirte al men Insertar, a la
opcin Imagen.
En la nueva ventana que aparece, debers
buscar la imagen en la carpeta en la que la
habas guardado, y despus seleccionarla.

Unidad 1. Conceptos bsicos de Dreamweaver MX 2004 (IV)

Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas
visualizar el inspector de propiedades que se encuentra normalmente en la
parte inferior de la ventana, y que tiene el siguiente aspecto:

Si no te aparece, puedes mostrarlo a

travs del men Ventana, con la opcin
Propiedades.
Si lo que te ocurre es que nicamente te aparece el ttulo del panel, es
porque est contraido. Para que te aparezca desplegado debes pulsar sobre
el botn , que aparece junto al nombre.
Selecciona la primera lnea de texto y cambia el Formato por "Encabezado
1" y el color por "#000066", tal y como se muestra en la siguiente imagen.

Despus de esto, la apariencia de la primera lnea habr cambiado.

Selecciona la imagen y las dos timas lneas de texto. Pulsa sobre el botn
para centrarlos.

Una vez hayas centrado 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", pulsa una vez sobre el botn y pulsa tres
veces sobre el botn .

Selecciona de nuevo la ltima lnea, y en Vnculo introduce

"http://www.elpais.es", para crear un enlace a esa otra pgina:

Despus de todos estos pasos, puedes ver

como ha quedado el documento pulsando la
tecla F12.
Por ltimo guarda el documento. Ya sabes
que puedes hacerlo a travs del men
Archivo, desde la opcin Guardar.
Puedes llamar al documento como lo
desees, pero siempre teniendo en cuenta que
la extensin ha de ser htm o html.
Por ejemplo, puedes llamarlo "prueba1.htm".

Si pulsas aqu podrs ver cmo debera haber quedado la pgina despus
de haber seguido todos los pasos anteriores. Compara esta pgina con la
tuya, para ver si lo has hecho todo bien.

Unidad 2. El entorno de trabajo (I)

10

Vamos a ver cules son los elementos bsicos de Dreamweaver MX

2004, la pantalla, las barras, los paneles, etc, para saber diferenciar entre
cada uno de ellos. Aprenderemos cmo se llaman, dnde estn y para qu
sirven. Tambin veremos cmo obtener ayuda, por si en algn momento no
sabemos cmo seguir trabajando. Cuando conozcamos todo esto estaremos
en disposicin de empezar a crear pginas web.

La pantalla inicial
Al arrancar Dreamweaver aparece una pantalla inicial como sta, vamos a
ver sus componentes fundamentales. As conoceremos los nombres de los
diferentes elementos y ser ms fcil entender el resto del curso. La pantalla
que se muestra a continuacin (y en general todas las de este curso) puede
no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario
puede decidir qu elementos quiere que se vean en cada momento, como
veremos ms adelante.

11

Las barras
La barra de ttulo

La barra de ttulo contiene el nombre del programa (Macromedia

Dreamweaver MX 2004) y seguidamente el nombre del documento que
aparecer en el explorador y 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.
La barra de mens

La barra de mens contiene las operaciones de Dreamweaver, agrupadas

en mens desplegables. Al hacer clic en Insertar, por ejemplo, veremos las
operaciones relacionadas con los diferentes elementos que se pueden insertar
en Dreamweaver.
Muchas de las operaciones se pueden hacer a partir de estos mens, pero
para algunas es preferible o indispensable hacerlas desde los paneles.
La barra de herramientas estndar

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

La barra de herramientas de documento contiene iconos para ejecutar de

forma inmediata algunas otras operaciones habituales que no incluye la barra
de herramientas estndar. Estas operaciones son las de cambio de vista del
documento, vista previa, etc.

12

Los paneles e inspectores

Dreamweaver utiliza ventanas flotantes similares a las barras de
herramientas, que se conocen como paneles o inspectores. La diferencia
entre panel e inspector es que, en general, la apariencia y opciones de un
inspector cambian dependiendo del objeto seleccionado.
A travs de la opcin Ventana, de la barra de mens, es posible mostrar u
ocultar cada uno de los paneles o inspectores. Vamos a ver los ms
importantes.
El inspector de Propiedades

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 seleccionado sea texto mostrar el tipo de
fuente, la alineacin, si est en negrita o cursiva, etc.
Pulsando sobre el botn se despliega para mostrar ms opciones. Este
botn se encuentra en la esquina inferior-derecha.
Seguramente ser la herramienta de Dreamweaver que ms vayas a
utilizar.
La barra de herramientas Insertar o panel de objetos

13

La barra de herramientas Insertar o panel de objetos permite insertar

elementos en un documento sin la necesidad de recurrir al men insertar. Los
elementos estn clasificados segn su categora: tablas, texto, objetos de
formulario, etc.
Es posible configurar este panel para que en los botones se muestren los
iconos de los objetos (como ocurre en la imagen anterior), para que se
muestren los nombres de los objetos, o para que se muestren ambos a la vez.

Unidad 2. El entorno de trabajo (II)

Vistas de un documento
Puedes cambiar la vista del documento a travs de la barra de
herramientas de documento.

La vista Diseo
La vista Diseo permite trabajar con el editor visual. Es la vista
predeterminada de Dreamweaver y la que se suele utilizar habitualmente.

14

La vista Cdigo
La vista Cdigo se utiliza para poder trabajar en un entorno totalmente de
programacin, de cdigo fuente. No permite tener directamente una referencia
visual de cmo va quedando el documento segn se va modificando el cdigo.

15

La vista Cdigo y Diseo

La vista Cdigo y Diseo permite dividir la ventana en dos zonas. La zona
superior muestra el cdigo fuente, y la inferior el editor visual. Cuando se
realiza un cambio en alguna de las zonas, este cambio se aplica directamente
sobre la otra.

16

La ayuda
A travs del men Ayuda puedes:
Acceder al cuadro de dilogo de ayuda
muy similar al de Windows donde puedes
buscar por temas, por ndice o por
contenido, si seleccionas la opcin
Utilizacin de Dreamweaver o
simplemente pulsando F1.
Acceder a tutoriales (opcin Primeros pasos y tutoriales).
Abrir el panel Referencia en el que encontrars la sintaxis y descripcin
de las etiquetas HTML.
Acceder al Centro de servicio tcnico de Dreamweaver en la web de
Macromedia.
Acceder al Foros en lnea de Macromedia.

Unidad 3. Configuracin de un sitio local (I)

17

En este tema vamos a ver qu es un sitio web, cmo crearlos y

gestionarlos, y cmo modificar las propiedades de los documentos, como
puede ser el color de fondo.

Introduccin
Un sitio web es un conjunto de archivos y carpetas, relacionados entre s,
con un diseo similar o un objetivo comn. Es necesario disear y planificar el
sitio web antes de crear las pginas que va a contener.
La forma habitual de crear un sitio consiste en crear una carpeta en el
disco local. Los documentos HTML normalmente se crean dentro de dicha
carpeta, mientras que para contener las imgenes, las animaciones, las hojas
de estilo, etc., se deben crear nuevas carpetas dentro de sta, con el objetivo
de tener una mejor organizacin de los archivos a la hora de trabajar. Esto es
lo que se conoce como sitio local.
Despus se podrn copiar los archivos en un servidor web, en el
denominado sitio remoto, lo que equivale a publicar el sitio, de modo que la
gente podr verlo en Internet.
La organizacin de los archivos en un sitio permite administrar y compartir
archivos, mantener los vnculos de forma automtica, utilizar FTP para cargar
el sitio local en el servidor, etc.
Es conveniente que la pgina inicial del sitio tenga el nombre index.htm o
index.html, ya que los navegadores buscan una pgina con ese nombre
cuando se intenta acceder a una URL genrica.
Por ejemplo, si escribiramos la direccin genrica
http://www.aulaclic.com en el navegador, ste intentara cargar la pgina
http://www.aulaclic.com/index.htm, por lo que se producira un error en el
caso de que no existiera ninguna pgina con el nombre index.htm.

Crear o editar un sitio web sin conexin a Internet

18

Una vez creadas las carpetas que

formarn un sitio local, ya es posible
definir el sitio en Dreamweaver.
Para ello hay que dirigirse al men
Sitio, a la opcin Administrar sitios....
Recuerda que a travs del panel
Archivos, pestaa Archivos, se puede
acceder a cada uno de los sitios creados
y a la opcin Administrar sitio.

En el caso de haber seleccionado

la opcin Administrar sitios,
aparece una ventana que contiene
la lista de sitios locales definidos con
anterioridad.
Por supuesto, pueden existir
varios sitios locales en un mismo
ordenador.
Tanto si se elige la opcin Nuevo,
como si se elige la opcin Editar, se
mostrar la misma ventana en la
que definir las caractersticas del
sitio.

19

Las caractersticas del sitio se agrupan en diferentes categoras que

aparecen en la parte izquierda.
Para visualizar las caractersticas de una Categora basta con seleccionarla
de la lista haciendo clic en ella.
Vamos a ver los datos que hay que editar para la categora Datos locales.
Debe definirse el Nombre del sitio y la Carpeta raz local, que es en la que
se encuentra el sitio dentro del disco duro local.
Despus, si se desea, a travs de la categora Mapa de diseo del sitio
puede definirse la pgina principal del sitio, de la que colgarn el resto de
documentos HTML dentro del sitio, si en la carpeta raz del sitio existe una
pgina con el nombre index.htm, Dreamweaver la coger por defecto.
Estas tres caractersticas son las imprescindibles para definir un sitio local.
Las dems opciones en este momento no nos interesan, ya que estamos
definiendo el sitio local, y no es necesario establecer los datos del servidor en
el que estar el sitio remoto.
Despus de rellenar los datos pulsamos el botn Aceptar y abrimos el sitio.

20

Si preferimos utilizar un asistente para crear el sitio web slo tenemos

que seleccionar la pestaa Bsicas, en vez de la pestaa Avanzadas.

Abrir un sitio
Para abrir un sitio ya definido hay que dirigirse al men
Sitio, a la opcin Administrar sitios.... seleccionar el sitio
de la lista de sitios y pulsar sobre el botn Listo.
Tambin podemos utilizar el panel Archivos, buscar y
seleccionar el sitio a abrir en el men desplegable de la pestaa Archivos.
Si lo deseas, puedes ver un ejemplo de cmo configurar el sitio remoto,
consltalo aqu
.

Unidad 3. Configuracin de un sitio local (II)

Vistas del sitio
Es posible visualizar un sitio en el panel Archivos o en una ventana.
El panel Archivos se puede abrir a travs del men Ventana, opcin
Archivos. Tambin pulsando F8.
Para cambiar de una vista a otra hay que pulsar sobre el botn
aparece en la parte superior del panel y de la ventana.

que

Al mismo tiempo, es posible visualizar el sitio local, el sitio remoto, el

servidor remoto de prueba o el mapa del sitio.
En esta imagen se visualizan el mapa del sitio y el sitio local.
En este caso los documentos prueba1.htm y prueba2.htm cuelgan del
documento indice.htm, ya que ste ha sido definido como pgina principal del
sitio y contiene vnculos hacia los otros dos.

21

Si los archivos se mueven de una carpeta a otra, o se cambian de nombre,

desde fuera de Dreamweaver, las pginas no se mostrarn correctamente: no
aparecern imgenes, no funcionarn enlaces, etc.
En cambio, si estas
modificaciones se hacen
desde dentro de
Dreamweaver, a travs del
sitio, es posible actualizar
automticamente las pginas
para que si hacen referencia
a un objeto que ha cambiado,
despus no se produzcan
problemas al visualizarlas.
Al modificar algn objeto
que es referenciado por algn
otro documento, se muestra
una ventana similar a esta,
que indica los documentos
que hacen referencia a dicho
objeto, y que pueden ser
actualizados para que no se
produzcan los problemas
antes mencionados.
Simplemente hay que

22

pulsar sobre el botn

Actualizar.

Propiedades del documento

Es conveniente definir sitios homogneos, que todas las pginas de un sitio
sigan un mismo formato, es decir, que tengan el mismo color de fondo, de
fuente, etc.
Puede definirse el formato de cada una de las pginas a travs de
Propiedades de la pgina.
Se puede abrir esta ventana de tres modos diferentes:
Pulsar la combinacin de teclas Ctrl+J.
Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la
pgina.
Hacer clic con el botn derecho del ratn sobre el fondo de la pgina.
Aparecer al final del men contextual la opcin Propiedades de la pgina.
Se abrir el cuadro de dilogo siguiente:

23

Las propiedades estn organizadas en categoras, en la categora

Ttulo/Codificacin encontramos la propiedad:
Ttulo: es el ttulo del documento, que aparecer en la barra de ttulo del
navegador y de la ventana de documento de Dreamweaver.
En la categora Aspecto, como ves en la imagen anterior, encontramos las
propiedades:
Imagen de fondo: permite especificar una imagen de fondo para el
documento. Dicha imagen se muestra en mosaico. Es importante al elegir una
imagen de fondo tener en cuenta que segn los colores de la imagen ser
necesario establecer unos u otros colores para el texto, as como que no es
conveniente tener un gif animado como fondo.
Color de fondo: permite especificar un color de fondo para el documento,
pero dicho color solo se mostrar en el caso de no haber establecido ninguna
imagen de fondo.
Tamao: permite definir el tamao de la letra.
Color del texto: es el color de la fuente.
Mrgenes: permiten establecer mrgenes en el documento. Los
mrgenes izquierdo y superior solo funcionan en Microsoft Internet Explorer,
mientras que el ancho y el alto de mrgen solo funcionan para Netscape
Navigator. Ninguno de estos mrgenes aparece en la ventana de documento
de Dreamweaver, solo se mostrarn en los navegadores.
En la categora Vnculos encontramos las propiedades:

Color de vnculo: es el color de los vnculos, que ayuda al usuario a

distinguir entre el texto normal y los vnculos que sirven de enlace a otras

24

pginas.
Vnculos visitados: es el color de los vnculos visitados, que permite
distinguir al usuario si unos vnculos ya han sido visitados o no.
Vnculos activos: es el color de los vnculos activos.
Estilo subrayado: por defecto, cuando tenemos un texto con un vnculo
asociado, el texto aparece subrayado, con esta opcin podemos elegir otro
tipo de estilo por ejemplo para que no aparezca subrayado.
En la categora Imagen de rastreo encontramos las propiedades:
Imagen de rastreo: permite establecer una imagen como fondo del
documento, pero que slo se mostrar en la ventana de documento de
Dreamweaver, y nunca en un navegador. Dicha imagen se utiliza como
plantilla grfica sobre la que crear el documento.
Transparencia: permite establecer la opacidad de la imagen de rastreo.

Los colores
Para asignar colores es posible desplegar una
paleta de colores como sta. Al seleccionar un
color de estas paletas, se muestra el valor
hexadecimal del color en la parte superior.
Las paletas de colores de Dreamweaver utilizan la
paleta de 216 colores seguros para web. stos son
los colores que se muestran de la misma forma en
Microsoft Internet Explorer y en Netscape Navigator,
tanto en Windows como en Macintosh.
Tambin es posible personalizar los colores a
travs del botn de la parte superior de la paleta.
Los colores pueden asignarse a travs de los botones:

Estos botones suelen aparecer en el inspector de propiedades de muchos

objetos, y tambin en algunas ventanas que permiten especificar propiedades

25

(sobre todo propiedades de texto, fondo, o tablas), como es el caso de la

ventana de Propiedades de la pgina, que tienes ms arriba.
El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el
recuadro gris , lo que hace que se despliegue la paleta de colores. El otro
modo es introduciendo directamente el nmero hexadecimal del color en el
recuadro blanco.
Por ejemplo, si en la paleta de colores que aparece ms arriba se
seleccionara el color azul con valor #3399FF, el botn quedara del siguiente
modo:
.

Para practicar puedes realizar el Ejercicio paso a paso Crear nuevo

documento y modificar sus propiedades.
Hay que tener cuidado de no crear pginas que tarden mucho tiempo en
cargarse en el navegador. Para ver cmo comprobar el tamao de los
documentos, pulsa aqu
.

Unidad 4. El texto (I)

A lo largo de este tema vamos a aprender a cambiar las propiedades del
texto y a crear estilos CSS, que permiten asignar al texto estilos creados por
nosotros mismos, no predefinidos.

Caractersticas del texto

26

Las caractersticas del texto seleccionado pueden ser definidas a travs

del men Texto, y a travs del inspector de propiedades. Vamos a ver las
posibilidades que se nos ofrecen a travs del inspector de propiedades,
aunque sean menos que las que se nos ofrecen a travs del men Texto.

Formato:
Permite seleccionar un formato de prrafo ya definido para HTML, que
puede ser encabezado, prrafo o preformateado. Los encabezados se utilizan
para establecer ttulos dentro de un documento. El formato preformateado
sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre
dos palabras se introducen varios espacios solo se considera uno, pero al
establecer el formato preformateado se respetar que hayan varios espacios
en lugar de solo uno.
Fuente: Permite seleccionar un conjunto de
fuentes. Aparecen conjuntos de fuentes en
lugar de una sola, ya que es posible que al
establecer una nica fuente el usuario no la
tenga en su ordenador. El seleccionar un
conjunto de fuentes posibilita que en el caso
de que el usuario no tenga una fuente se
aplique otra del conjunto. Por ejemplo, si seleccionamos Arial, Helvetia,Sansserif, el texto se ver con la fuente Arial, pero si esta no existe se ver en
Helvetia.
Tamao:
Permite cambiar el tamao del texto. El tamao lo podemos indicar en
diversas unidades, en pxeles, centmetros, etc...
Color:
Permite seleccionar el color de la fuente, ignorando el color que se haya
definido en las propiedades de la pgina. Si no se ha establecido ningn color
en las propiedades de la pgina ni aqu, el color del texto por defecto ser el
negro.

27

Estilo:
Estos botones permiten establecer si el texto aparecer en negrita o en
cursiva. A travs del men Texto tambin se puede, entre otras cosas,
subrayar el texto. Esta opcin no aparece en el panel de Propiedades ya que
de normal no suele utilizarse, debido a que los vnculos aparecen subrayados
y el subrayar texto normal podra hacer que el usuario pensara que se trata de
un vnculo.
Alinear:
A travs de estos botones es posible establecer la alineacin del texto de
una de estas cuatro formas distintas: izquierda, centrada, derecha y
justificada.
Lista:
Estos botones permiten crear listas con vietas o listas numeradas.
Sangria:
Estos dos botones permiten sangrar el texto y anular la sangra. La sangra
es una especie de mrgen que se establece a ambos lados del texto. En este
caso caso los botones se refieren a sangra a la izquierda del texto.

Listas
Es posible insertar texto a modo de lista. A su vez, la lista puede ser
numerada o con vietas.
Para que un texto que ya ha sido introducido en el documento se convierta
en una lista, simplemente hay que seleccionarlo y pulsar sobre la opcin de
lista correspondiente, ya sea a travs del inspector de propiedades, o a
travs del men Texto.
La lista con vietas (desordenada) se selecciona a travs del botn ,
mientras que la lista numerada (ordenada) se selecciona a travs del botn

28

Ejemplo de lista con numerada

(ordenada):
1. Preparar la mochila
1. Sacar los libros de ese da
2. Introducir los libros del da
siguiente
2. Ponerme el pijama
3. Lavarme los dientes
4. Poner el despertador

Ejemplo de lista con vietas

(desordenada):

Perro
Gato
Aves
o
o

Canario
Loro

Hamster

Para establecer listas anidadas dentro de otras como en los ejemplos

anteriores, es necesario aadir una sangra en los elementos de la lista que se
desee que pasen a formar parte de la lista anidada.
A travs del men Texto, opcin Lista, es posible acceder a las
propiedades de la lista seleccionada.Se debe seleccionar el texto de la lista
previamente o tener el cursor en algn lugar de la lista para que se active este
submen.
En la ventana Propiedades de lista se puede especificar el tipo de lista
(con nmeros o con vietas), el tipo de nmeros o vietas que se utilizarn (en
la propiedad Estilo:), y en el caso de las listas ordenadas, el nmero por el
que comenzar el recuento.

Unidad 4. El texto (II)

Estilos CSS (I)
En el men Texto, opcin Estilo, aparecen una serie de estilos predefinidos

29

que pueden aplicarse al texto seleccionado.

Es posible definir otra serie de estilos, aplicables a prrafos o a palabras
seleccionados. Estos nuevos estilos, llamados Estilos CSS (tambin
denominadas Hojas de Estilo en Cascada), se utilizan para combinar una serie
de atributos del texto, como pueden ser el color o el tamao, de modo que no
sea necesario asignar estos atributos uno a uno cada vez que se desee repetir
la asignacin de esos mismos valores a otras partes del texto. Tambin
algunas de sus opciones pueden utilizarse para definir atributos de imgenes y
otras caractersticas que no permiten definir los estilos HTML, como el color de
fondo para el texto, etc
Incluso permiten aplicar un estilo sobre todas las etiquetas HTML de un
mismo tipo, como puede ser la etiqueta A HREF, que corresponde a los
hiperenlaces. De este modo, todos los hiperenlaces de la pgina adquiriran la
apariencia definida en ese estilo.
Un estilo CSS no es ms que un conjunto de reglas de formato que
controlan el aspecto del contenido de una pgina Web. Los estilos CSS
aportan gran flexibilidad y control al aspecto exacto que se busca en una
pgina, desde la posicin precisa de elementos hasta el diseo de fuentes y
estilos concretos.
Una de las grandes ventajas de los estilos CSS reside en que cuentan con
una capacidad simple de actualizacin; cuando actualiza un estilo CSS, el
formato de todos los documentos que usan ese estilo se actualiza
automticamente.
El inconveniente que tiene trabajar con hojas de estilos es que algunos
navegadores no las soportan y las ignoran, aunque estos navegadores suelen
ser versiones antiguas, por lo que ocurrir en pocos casos.
Con Dreamweaver MX 2004, la novedad es que las caractersticas que
aplicamos a un texto crean automticamente estilos CSS que se incrustan en
el encabezado del documento actual.
Vemoslo:
Para crear un Estilo CSS personalizado:
1. En el documento, se selecciona el texto al que se desea aplicar
caractersticas concretas.
2. En el inspector de propiedades se modifican todas las propiedades de
formato de texto, se establecen los atributos de la fuente y del prrafo que

30

queramos.
Automticamente Dreamweaver crear un nuevo estilo con el nombre
Estilo1 o Estilo2 o Estilo3,... segn los nombres de los estilos ya creados.
Aparecer el nombre Estilo1 en el cuadro Estilo del panel Propiedades.

Tambin se puede cambiar el nombre

del estilo, es mejor que el estilo tenga
un nombre que indique a qu tipo de
texto se va a aplicar. Para ello
desplegamos la lista de estilos y
seleccionamos la opcin Cambiar
nombre... Aparecer un cuadro de
dilogo para que introduzcamos el nuevo
nombre como la imagen inferior.

Seguidamente se coloca el nuevo nombre sin espacios en blanco. En este

caso: miestilo.
Al aceptar, aparecer un panel con el nombre Resultados. Cerrar esta
ventana.
De esta manera se puede crear un estilo para aadirlo a un documento.
Cada nuevo estilo que se crea, se aade a la lista de estilos, y los podemos
acceder tambin de una manera rpida a travs del men Texto, opcin
Estilos CSS.
En el Panel de Diseo se puede verificar que se ha aadido
automticamente el nuevo estilo.

31

A continuacin tienes un prrafo al que se le ha aplicado el estilo CSS

anterior:

Texto con estilo de clase

En el cdigo HTML de la pgina, el texto aparece de la siguiente forma:
<head>
<style type="text/css">
<!-.miestilo {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: italic;
font-weight: bold;
color: #FF0000;
}
-->
</style>
</head>
<body>
<p class="miestilo">Texto con estilo de clase </p>

32

Para aplicar un Estilo CSS personalizado:

En el documento, seleccione el texto al que desea aplicar el estilo CSS, o
site el punto de insercin del mouse en un prrafo para aplicar el estilo a todo
el prrafo. Si selecciona un rango de texto dentro de un prrafo, el Estilo CSS
slo afectar al rango seleccionado.
En el inspector de Propiedades se selecciona el estilo creado por nosotros
de la lista que aparece al desplegar el cuadro Estilo.

Unidad 4. El texto (III)

Estilos CSS (II)
Hemos visto cmo Dreamweaver nos permite crear estilos de una forma
muy rpida y sencilla, los estilos creados de esta manera se agrupan en una
hoja de estilos que se encuentra incrustada en nuestro documento, pero
tambin podemos utilizar estilos que se encuentren en hojas externas al
documento. Este particularidad es muy til cuando diseamos un sitio web con
varias pginas ya que permite definir una sla hoja de estilos que utilizarn
todas las pginas del sitio y as facilitar el diseo.
Vamos a ver cmo funcionan las hojas de estilo a travs del panel Diseo
pestaa Estilos CSS, que puede abrirse a travs del men Ventana, opcin
Estilos CSS. Tambin pulsando Mays+F11.
Para simplificar las explicaciones llamaremos panel Estilos CSS a la
pestaa Estilos CSS del panel Diseo.

33

En este panel aparecen las hojas de estilos

asociadas al documento, los estilos contenidos en
cada hoja de estilos y unos botones en la parte
inferior
que nos permiten realizar cambios
en los estilos.

Para poder utilizar los estilos de una hoja de estilos, es necesario asociar
una hoja de estilos al documento. Para ello hay que pulsar sobre el botn
.
Aparece la siguiente ventana:

En Arch./URL debe especificarse la ruta y el nombre de la hoja de estilos.

Elegimos si queremos Vincular o importar la hoja de estilos.
Si elegimos Vincular la hoja no se incrusta en la pgina sino que se aade
a la pgina una referencia a la hoja, esto permite que cualquier cambio
realizado en la hoja quede reflejado de manera automtica en todas las
pginas que utilizan la hoja.
Si elegimos Importar la hoja se incrusta en la pgina.
Despus de Aceptar, la hoja con sus estilos aparecer en el panel Estilos
CSS.

34

Para crear un nuevo estilo dentro de una hoja, seleccionamos la hoja en

el panel Estilos CSS y pulsamos el botn que sirve para crear un nuevo
estilo en la hoja de estilos seleccionada o en otra nueva.
A continuacin aparece una ventana como sta:

En ella puede especificarse el Nombre del estilo, (sin espacios y

comenzando con un punto).
En Clase es posible especificar si el estilo va a ser uno personal creado
desde cero. En Etiqueta puede modificar los atributos de una etiqueta ya
existente y en Nombre aparece la lista de etiquetas HTML que pueden ser
redefinidas, como pueden ser BODY, A, FORM, TABLE, etc. En Avanzadas
permite redefinir el formato de una combinacin de etiquetas.
En Definir en: se determina si el estilo se aade a la hoja de estilo propia
del documento (Slo este documento), si se aade a una nueva hoja de
estilos ((Nuevo archivo de hojas de estilo)), o si se aade a la hoja de
estilos seleccionada.
Despus de pulsar sobre el botn Aceptar aparecer una ventana como la
que aparece a continuacin y en la que definiremos el estilo:

35

Eligiendo una u otra categora es posible especificar diferentes propiedades,

muchas de las cuales no se podan aplicar mediante el panel de Propiedades.
Por ejemplo, a travs de la categora Fondo es posible especificar el color de
fondo para un bloque de texto o para la pgina entera.
Para modificar un estilo ya existente, seleccionamos el estilo a modificar
en la lista de estilos del panel y hacemos clic en el botn , se abrir la
ventana descrita anteriormente donde se puede definir las caractersticas del
estilo.
Tambin podemos abrir esta ventana pulsando con el botn derecho sobre
el estilo en el panel Estilos CCS, y seleccionar del men desplegable la
opcin Editar.
Para borrar un estilo de una hoja de estilos, seleccionamos el estilo en la
lista de estilos del panel y hacemos clic en el botn .
Como puedes ver, es bastante sencillo trabajar con estilos CSS.
El cdigo HTML que indicara que una hoja de estilos ha sido importada o
vinculada al documento, sera similar a este:
<style type="text/css">

36

<!-@import
url("file:///C|//aulaclic/prueba.css");
-->
</style>
o este:
<link href="pru.css" rel="stylesheet" type="text/css">
Y el cdigo que indicara que a un objeto se le ha aplicado un estilo
personal (una clase) sera similar a este:
<p class="miestiloparrafo">Bienvenidos a mi pagina</p>

Unidad 5. Hiperenlaces (I)

Vamos a ver qu son los hiperenlaces, para qu sirven y cmo crearlos, ya
que son un elemento esencial para cualquier pgina web.

Introduccin
Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser
pulsado lleva de una pgina o archivo a otra pgina o archivo.
Es posible asignar un vnculo a un texto, a una imagen, o a parte de una
imagen.

Tipos de enlaces
Existen diferentes clases de rutas de acceso a la hora de definir los
vnculos.
Referencia absoluta:

37

Conduce a una ubicacin externa al sitio en el que se encuentra el

documento. La ubicacin es en Internet, por ejemplo,
"http://www.aulaclic.com".
Referencia relativa al sitio:
Conduce a un documento situado dentro del mismo sitio que el documento
actual.
Referencia relativa al documento:
Conduce a un documento situado dentro del mismo sitio que el documento
actual, pero partiendo del directorio en el que se encuentra el documento
actual.
Puntos de fijacin:
Conduce a un punto dentro de un documento, ya sea dentro del actual o de
otro diferente. Para ello el vnvulo debe ser
"nombre_de_documento#nombre_de_punto". El punto se define dentro de
un documento a travs del men Insertar, opcin Anclaje con nombre.

Crear enlaces
La forma ms sencilla de crear un enlace es a travs del inspector de
propiedades. Para ello es necesario seleccionar el texto o el objeto que va a
servir de enlace, y seguidamente establecer el Vnculo en el inspector.
Por ejemplo, aqu hay un enlace a www.elpais.es, que es de referencia
absoluta, por eso contiene HTTP://

Otra forma de crear un enlace es a travs del men Insertar, opcin

Hipervnculo.
Es posible crear tambin vnculos vacos, que pueden ser tiles cuando se
utilizan comportamientos, etc. Para ello es necesario escribir en Vnculo
nicamente una almohadilla '#'.

38

Destino del
enlace
El destino del enlace determina en qu ventana va a ser abierta la pgina
vinculada, puede variar dependiendo de los marcos de que disponga el
documento actual.
Puede especificarse en el inspector de propiedades a travs de Dest, o
en la ventana que aparece a travs del men Insertar, opcin Hipervnculo.
_blank:
Abre el documento vinculado en una ventana nueva del navegador.
_parent:
Abre el documento vinculado en la ventana del marco que contiene el
vnculo o en el conjunto de marcos padre.
_self:
Es la opcin predeterminada. Abre el documento vinculado en el mismo
marco o ventana que el vnculo.
_top:
Abre el documento vinculado en la ventana completa del navegador.
No te preocupes si no te queda del todo claro para qu sirve cada una de
estas opciones de destino, ya que se volvern a ver en el tema de Marcos.

Unidad 5. Hiperenlaces (II)

Formato del enlace

39

En general, un texto que tiene asociado un vnculo suele aparecer

subrayado. Al mismo tiempo, puede adquirir tres colores diferentes que
pueden especificarse a travs de las propiedades de la pgina. Estos tres
colores diferentes son los que se asignan como color de vnculo, de vnculo
activo, y de vnculo visitado.
Aqu tienes un vnculo de ejemplo:
www.aulaclic.com
Cuando el vnculo est definido sobre una imagen, en el borde aparecen
una serie de puntitos al pulsar sobre ella. Cuando el vnculo est definido
sobre una zona de una imagen (un mapa), aparece el contorno de esa zona.
Aqu tienes dos vnculos similares de ejemplo:

Como puedes ver, la segunda imagen que hace de vnculo contiene un

recuadro alrededor. Esto ocurre debido a que que el campo Borde del
inspector de propiedades de la imagen vale uno (1), mientras que para la
primera imagen vale cero (0).
El campo Borde sirve para ponerle un borde a la imagen,
independientemente de si sta va a contener un vnculo o no.
Si se pone a cero (0), no aparece ningn borde, ya que esto indica que el
tamao de las lneas que forman el recuadro es cero (0). Puede hacerse un
recuadro ms gordo incrementando el valor del campo Borde.
Tanto si el vnculo se asigna a un texto como a una imagen, el cursor
cambia de forma al situarse encima del vnculo. Suele adquirir la apariencia de
una mano sealando.

Enlace a correo electrnico

Es posible especificar vnculos a direcciones de correo electrnico. Esto
resulta til cuando se desea que los visitantes de la web puedan contactar con
nosotros.

40

La sintaxis del vnculo en este caso es mailto:direccindecorreo.

Puede definirse el vnculo a travs de Vnculo, del inspector de
propiedades, seleccionando previamente el texto o la imagen deseados.
Tambin es posible a
travs del men Insertar,
opcin Vnculo de correo
electrnico.
En este caso no es
posible asignar el vnculo a
una imagen, solo permite
introducir el texto que
contendr el vnculo de
correo.
Para practicar puedes realizar el Ejercicio paso a paso Crear vnculo de
correo electrnico

Unidad 6. Imgenes (I)

En este tema vamos a ver cmo insertar imgenes en un documento.
Tambin veremos cmo crear algunas imgenes especiales, como es el caso
de los Rollovers y los botones flash, que ayudan a mejorar la apariencia de
nuestras pginas.

Introduccin
Todas las pginas web acostumbran a tener un cierto nmero de imgenes,
que permiten mejorar su apariencia, o dotarla de una mayor informacin
visual.
Existen una serie de formatos de imagen ms recomendables que otros
para ser introducidos en una pgina web. Esta informacin puedes consultarla
aqu
.

41

Insertar una imagen

Para insertar una imagen hay que dirigirse al men Insertar, a la opcin
Imagen. Despus de esto, ya es posible seleccionar una imagen a travs de
la nueva ventana.

Si por algn motivo se desea insertar un BMP, este no aparecer a no ser

que en Tipo se seleccione Todos los archivos.
En Relativa a es posible especificar si la imagen ser relativa al documento
o a la carpeta raz del sitio. Es preferible que sea relativa al Documento, ya
que si se mueve todo el sitio a una ubicacin diferente, la imagen puede no
verse al estar siendo buscada en la ubicacin anterior.
Lo mismo ocurre cuando se selecciona un documento para crear un vnculo.
La ruta en la que se encuentra la imagen aparecer representada de una u
otra forma en el campo URL de la ventana y en el campo Origen del
inspector de propiedades, dependiendo de si ha sido insertada como relativa
a la carpeta raz del sitio o relativa al documento.
Por ejemplo, imagina que dentro de la carpeta raz del sitio (la carpeta del
sitio) se encuentran la carpeta imagenes y el documento en el que deseamos

42

insertar la imagen. Dicha imagen, llamada aulaclic.jpg, se encuentra dentro

de la carpeta imagenes.
En el caso de insertar la imagen como relativa al Documento la ruta sera:
imagenes/aulaclic.jpg
Mientras que en el caso de ser insertada como relativa a la Raz del sitio la
ruta sera:
/imagenes/aulaclic.jpg
Ocurre lo mismo que cuando se crea un hipervnculo a un documento
relativo al documento o a la carpeta raz del sitio.
Si se inserta un BMP en un documento, este no aparece correctamente en
Dreamweaver, aunque s en el navegador. En Dreamweaver aparecer de la
siguiente forma:
Esa misma imagen es la que aparece en Dreamweaver cuando no se
encuentra una imagen que haba sido insertada. Esto puede ocurrir si se ha
modificado el nombre de la imagen, o si se ha movido de directorio, desde
fuera de Dreamweaver. En ese caso, la imagen que aparecer en el
navegador ser similar a esta:
Aparece un recuadro blanco con una X roja, junto con el nombre de la
imagen o el contenido del campo Alt del inspector de propiedades.

Para practicar puedes realizar el Ejercicio paso a paso Insertar una imagen.

Cambiar el tamao de una

imagen

43

Dentro de Dreamweaver puede modificarse el tamao de las imgenes.

Dicho cambio de tamao no se aplica directamente sobre el archivo de
imagen, sino que lo que vara es la visualizacin de la imagen dentro de la
pgina.
Es muy probable que la imagen resultante no sea de buena calidad, en
comparacin de cmo podra quedar modificndola desde un editor externo,
como Fireworks.
Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que
representa el icono de Dreamweaver y modificamos su tamao de varias
formas diferentes:
Imagen original

Imagen con tamao modificado

Puede apreciarse claramente que los resultados no son muy satisfactorios,

pero en ocasiones puede resultar til modificar el tamao de algunas
imgenes aunque esto implique perder calidad.
Existen dos formas de modificar el tamao.
Una de ellas es, una vez seleccionada la imagen, arrastrar con el
puntero alguno de los recuadros negros que aparecen alrededor de
la imagen.
La otra es a travs de inspector de propiedades, cambiando
los campos An (anchura) o Al (altura). Estos campos aparecern
en el inspector cuando este seleccionada alguna imagen.
Hay que tener en cuenta que para cambiar la alineacin de la
imagen hay que hacerlo a travs del campo Alinear del inspector
de propiedades. La alineacin de las imgenes ofrece ms
posibilidades que la del texto: superior, medio, medio absoluta,
lnea de base, etc.

Unidad 6. Imgenes (II)

Imagen de sustitucin. Rollover

44

Un rollover es una imagen que cambia por otra cuando el puntero se sita
sobre ella. Este tipo de imagen suele utilizarse en los mens o en los botones
para desplazarnos a travs de distintas pginas.
Aqu tienes un ejemplo de rollover. Sita el puntero sobre l para ver qu es
lo que ocurre.

Para insertar un rollover hay que dirigirse al men Insertar, Objetos de

Imagen, a la opcin Imagen de sustitucin. En la nueva ventana hay que
especificar la imagen original y la de sustitucin.

Es preferible que la opcin Carga previa de imagen de sustitucin est

activa. Si se activa, la imagen de sustitucin se carga cuando se carga la
pgina, de este modo se evitan las demoras debidas a la descarga de la
imagen cuando llega el momento de que aparezca.
El Texto alternativo es el texto que aparece al situar el puntero sobre una
imagen, o el que aparecer en lugar de la imagen en el caso de que por algn
motivo sta no pueda ser mostrada en el navegador.
El texto alternativo puede asignarse a todas las imgenes, no slo a los
rollovers. Puede hacerse a travs del campo Alt del inspector de
propiedades de la imagen seleccionada.

Botones Flash

45

Existen otra serie de imgenes especiales, similares a los rollovers, que suelen utilizarse
para crear mens, como pueden ser los botones Flash.
Aqu tienes un ejemplo de botn Flash. Sita el puntero sobre l para ver qu es lo que
ocurre.

Para insertar un botn Flash hay que dirigirse al men Insertar, Media, a la opcin
Botn Flash, aparecer el siguiente cuadro de dilogo:

A travs de Estilo puede seleccionarse uno de los distintos formatos de botn que se ofrecen.

En esta misma ventana hay que especificar tambin el Texto que mostrar el botn (Texto del b
con el que ser guardado (Guardar como:) y el vnculo asociado (Vinculo: y Destino:).
Es preferible guardar los botones Flash en el mismo directorio que los documentos HTML,
en lugar de la carpeta destinada a almacenar imgenes, ya que de no ser as es posible
que al intentar asignar un vnculo dentro del propio sitio, Dreamweaver no permita guardar
el botn con ese vnculo en una ubicacin diferente de la de dicho documento.

46

Recuerda que los botones deben guardarse con la extensin SWF.

A travs del inspector de propiedades del botn Flash es posible editar de nuevo sus
atributos:

Puede volver a abrirse el cuadro de dilogo anterior pulsando sobre el botn Editar, y a
travs del botn Reproducir es posible probar el funcionamiento del botn Flash desde
Dreamweaver, sin la necesidad de tener que abrir la pgina con algn navegador.
Despus de haber probado el funcionamiento del botn Flash, debe pulsarse de nuevo
sobre el botn Reproducir (que habr cambiado por el botn Detener)

Unidad 6. Imgenes (III)

Texto Flash

47

El texto Flash es similar a un rollover, pero en lugar de intercambiar

imgenes intercambia el color del texto.
Para insertar texto Flash hay que dirigirse al men Insertar, Media, a la
opcin Texto Flash.
En la nueva ventana, adems del texto, el vnculo y el nombre con el que
ser guardado el texto, hay que especificar el color original y el de sustitucin.
Aqu tienes un ejemplo de texto Flash. Sita el puntero sobre l para ver
qu es lo que ocurre.

El inspector de propiedades del texto Flash es igual que el de un botn

Flash.

Barra de navegacin

48

Una barra de navegacin es un conjunto de imgenes que se utilizan

como opciones de men para navegar dentro de una web. La barra de
navegacin te permite definir unos botones para ir a diferentes pginas pero
de forma que cambie el aspecto del botn segn muevas el ratn sobre l y
segn sea el ltimo botn pulsado.
Un pgina web solo puede contener una nica barra de navegacin.
Para insertar una barra de navegacin hay que dirigirse al men Insertar,
Objetos de imagen , a la opcin Barra de navegacin.
En la nueva ventana pueden especificarse cuatro imgenes diferentes
para cada uno de los botones, el vnculo para cada uno de ellos, etc.

A travs de los botones superiores de la ventana es posible crear y

eliminar botones de la barra de navegacin, as como reordenarlos. Con
se crea un botn nuevo, con se elimina el botn seleccionado, y con
se puede modificar la posicin del botn seleccionado.
En Imagen Arriba pones la imagen que quieres mostrar inicialmente
(cuando todava no se ha hecho clic).

49

Unidad 6. Imgenes (III)

Texto Flash
El texto Flash es similar a un rollover, pero en lugar de intercambiar
imgenes intercambia el color del texto.
Para insertar texto Flash hay que dirigirse al men Insertar, Media, a la
opcin Texto Flash.
En la nueva ventana, adems del texto, el vnculo y el nombre con el que
ser guardado el texto, hay que especificar el color original y el de sustitucin.
Aqu tienes un ejemplo de texto Flash. Sita el puntero sobre l para ver
qu es lo que ocurre.

El inspector de propiedades del texto Flash es igual que el de un botn

Flash.

Barra de navegacin

50

Una barra de navegacin es un conjunto de imgenes que se utilizan como opciones d

navegar dentro de una web. La barra de navegacin te permite definir unos botones para
pginas pero de forma que cambie el aspecto del botn segn muevas el ratn sobre l y
ltimo botn pulsado.
Un pgina web solo puede contener una nica barra de navegacin.

Para insertar una barra de navegacin hay que dirigirse al men Insertar, Objetos de i
opcin Barra de navegacin.

En la nueva ventana pueden especificarse cuatro imgenes diferentes para cada uno d
el vnculo para cada uno de ellos, etc.

A travs de los botones superiores de la ventana es posible crear y eliminar botones de

navegacin, as como reordenarlos. Con se crea un botn nuevo, con se elimina el bo
seleccionado, y con
se puede modificar la posicin del botn seleccionado.
En Imagen Arriba pones la imagen que quieres mostrar inicialmente
(cuando todava no se ha hecho clic).

51

En Sobre imagen, pones la imagen que quieres mostrar cuando el

usuario mueva el puntero sobre el botn y ste estaba mostrando la
imagen asignada en Imagen Arriba.
En Imagen abajo, pones la imagen que quieres mostrar despus de que
el usuario haya hecho clic en la imagen.
En Sobre mientras imagen abajo, pones la imagen que quieres mostrar
cuando el usuario mueva el puntero sobre sobre el botn y ste estaba
mostrando la imagen asignada en Imagen Abajo.
De esta forma, si asignas imgenes distintas puedes saber cul es el
ltimo botn que ha sido pulsado (el que tiene Imagen Abajo).

Aqu tienes un ejemplo de barra de navegacin. Para su creacin se han utilizado las m
imgenes para todos los botones, pero como puedes ver, en el botn del medio aparece in
imagen diferente de la de los otros dos. Esto se debe a que la opcin Mostrar "Imagen a
inicialmente estaba activa para este botn. Sita el puntero sobre los distintos botones, y
alguno, para ver qu es lo que ocurre.

El que existan cuatro imgenes diferentes sirve para identificar cual de los vnculos est
que con un simple rollover no puede hacerse.

A travs de la opcin Insertar es posible especificar si los botones de la barra de naveg

aparecer de forma horizontal o vertical dentro de la pgina.

Unidad 7. Tablas (I)

En este tema vamos a ver cmo trabajar con tablas. Podremos, entre otras
cosas, insertar tablas, combinar celdas, insertar filas o columnas y cambiar el
tamao del borde.

52

Introduccin
Todos los objetos se alinean por defecto a la izquierda de las pginas web,
pero gracias a las tablas es posible distribuir el texto en columnas, colocar
imgenes al lado de un bloque de texto, y otra serie de cosas que sin las
tablas seran imposibles de realizar.
Hoy en da, la mayora de las pginas web se basan en tablas, ya que
resultan de gran utilidad al mejorar notablemente las opciones de diseo.
Las tablas estn formadas por un conjunto de celdas, distribuidas en filas y
columnas. A continuacin tienes un ejemplo de tabla.

Insertar una tabla

Para insertar una tabla hay que dirigirse al men Insertar, a la opcin
Tabla.

53

En la nueva ventana
habr que especificar el
nmero de Filas y
Columnas que tendr la
tabla, as como el Ancho.
El Ancho puede ser
definido como Pxeles o
como Porcentaje. La
diferencia de uno y otro es
que el ancho en Pxeles es
siempre el mismo,
independientemente del
tamao de la ventana del
navegador en la que se
visualice la pgina, en
cambio, el ancho en
Porcentaje indica el
porcentaje que va a ocupar
la tabla dentro de la pgina
y se ajustar al tamao de la ventana del navegador, esto permite que los
usuarios que tengan pantallas grandes, aprovechen todo el ancho de pantalla.
Grosor del Borde indica el grosor del borde de la tabla en pxeles, por
defecto se le asigna uno (1).
Relleno de celda indica la distancia entre el contenido de las celdas y los
bordes de stas.
Espacio entre celdas indica la distancia entre las celdas de la tabla.
Tambin se puede establecer si se quiere un encabezado para la tabla es
recomendable utilizar encabezados en el caso de que los usuarios utilicen
lectores de pantalla. Los lectores de pantalla leen los encabezados de tabla y
ayudan a los usuarios de los mismos a mantener un seguimiento de la
informacin de la tabla.
Si queremos incluir un ttulo, lo indicamos en Texto, el ttulo aparecer
fuera de la tabla.
En alinear texto indicamos dnde queremos alinear el ttulo con respecto a
la tabla.
En Resumen: indicamos una descripcin de la tabla, los lectores de

54

pantalla leen el texto del resumen pero dicho texto no aparece en el

navegador del usuario.

Rellenar las celdas

Las celdas son cada uno de los recuadros que forman una tabla, resultan de
la interseccin entre una fila y una columna.

imagen y
texto
Texto
dentro de
una celda

COLUM
NA

CELDA
FILA

Para poder insertar algn elemento en una celda, ya sea texto o imgenes,
simplemente hay que situar el cursor previamente dentro de la celda deseada.

Unidad 7. Tablas (II)

Seleccionar elementos de una tabla

55

Existen varias formas de seleccionar una tabla. Una de ellas es a travs

del men Modificar estando el cursor en la tabla, o desplegando el men
contextual de la tabla al pulsar con el botn derecho sobre ella. En ambos
casos aparece la opcin Tabla, a travs de la cual se puede elegir la opcin
Seleccionar tabla.

Tambin es posible seleccionar una tabla pulsando con el ratn sobre el

borde que la rodea, o pulsando sobre la etiqueta <table> que aparece en la
barra de estado de la ventana de documento.

Como novedad muy til a la hora de trabajar con tablas, Dreamweaver MX

2004 incorpora la opcin Anchos de tabla. Cuando se selecciona una tabla o
cuando se coloca el cursor sobre cualquier parte de la tabla, Dreamweaver
muestra en una zona verde el ancho de la tabla y de cada columna. Junto a
los anchos se encuentran unos men desplegables (men de encabezado de
la tabla y men de encabezado de la columna). Estos mens permiten
acceder rpidamente a determinados comandos relacionados con la tabla.

56

Si tienes el cursor en la tabla y no te aparece esa zona verde puedes activar

su visualizacin seleccionando la opcin Anchos de tablas del men Tabla o
tambin desplegando de la barra de mens, el men Ver, Ayudas visuales,
Anchos de tabla. De la misma forma se desactiva su visualizacin.
Si no aparece el ancho de la tabla o de una columna, la tabla o la columna
no tiene un ancho especificado, si aparecen dos nmeros, el primer nmero
corresponde al ancho especificado en las propiedades de la tabla o columna y
el segundo nmero es el ancho el ancho visual que aparece en la vista de
diseo, por ejemplo en la tabla anterior la primera columna tiene 139 (142), en
las propiedades de la celda tenemos el ancho 139 pxeles pero al contener
una imagen que necesita ms espacio, la columna ocupar realmente 142
pxeles (ancho visual de la columna tal como aparece en la pantalla).
Cuando ocurren estas diferencias podemos hacer que en el cdigo
(propiedades) se cambie el ancho por el real, para ello slo tenemos que
seleccionar la opcin Igualar todos los anchos del men desplegable de
encabezado de tabla.
En este men vemos que tambin tenemos la opcin Seleccionar tabla.

No siempre se desea seleccionar toda una tabla, en ocasiones se desea

seleccionar filas, columnas o celdas.
Puede seleccionarse una fila o columna de varias formas, lo mejor es que
pruebes las distintas formas y elijas la que ms te gusta. Estas son las formas
de seleccin:

57

Puedes utilizar la opcin Seleccionar columna del men de encabezado

de columna (zona verde de anchos) esto slo es vlido para seleccionar una
columna.
Manteniendo pulsado y arrastrando el ratn hasta seleccionar la
columna/s o fila/s completamente.
Tambin puede hacerse situando el cursor junto al borde superior o
izquierdo de la columna o fila respectivamente, de modo que el cursor cambia
a la forma de una flecha negra. Al hacer clic se selecciona la columna o fila a
la que apunta dicha flecha.
Para seleccionar una fila posicionar el cursor en cualquier sitio de la fila y
sobre la etiqueta <tr> de la barra de estado o sobre la etiqueta <td> para
seleccionar la columna.
Para seleccionar varias celdas contiguas, basta con mantener pulsado el
ratn mientras se arrastra sobre las celdas deseadas.
Para seleccionar una sola celda o varias celdas no contiguas, hay que
mantener pulsada la tecla Control mientras se hace clic sobre las celdas.

Formato de tabla

58

Las propiedades de la tabla se especifican a travs de su inspector de

propiedades.

A travs del inspector de propiedades se pueden modificar los valores que

se especificaron al insertar la tabla. Al mismo tiempo, pueden indicarse otros
como pueden ser el valor Alinear (que permite alinear la tabla a la izquierda,
al centro o a la derecha), el color de fondo o de borde de la tabla, o la imagen
de fondo.
Si lo que se selecciona es una celda, o un conjunto de celdas, el inspector
de propiedades cambia, para permitir especificar otros valores.
La parte superior del inspector de propiedades en este caso sirve para
especificar las propiedades del texto que se insertar dentro de la celda (o
celdas) seleccionada.
La parte inferior sirve para especificar valores propios de la celda, como
puede ser el color o imagen de fondo (diferentes de los especificados para la
tabla global), el color del borde de la celda, etc.
Dos opciones que posiblemente necesites utilizar con frecuencia sern
Horiz y Vert, que definen la alineacin del contenido de la celda de forma
horizontal y vertical respectivamente.

Cambiar tamao de tabla y celdas

59

Como ya sabes, el Ancho de una tabla puede ser definido como Pxeles o como Porcentaje. E
la tabla a travs del inspector de propiedades estar especificado por los valores de An (anchur
(altura). Normalmente solo se especifica la anchura, no la altura.

Los valores An y Al de una celda siempre estn en Pxeles. No es necesario especificar ningun
dos valores para las celdas, a no ser que se desee que se mantenga obligatoriamente ese tamao
ajusten al contenido o al tamao de la ventana.

No solo puede establecerse el tamao de las tablas y de las celdas a travs del inspector de p
Tambin es posible hacerlo manteniendo pulsado el ratn sobre alguno de los bordes, arrastrndo
posicin deseada.

Unidad 7. Tablas (III)

Aadir y eliminar filas y columnas
Existen varias formas de aadir y eliminar filas y columnas a una tabla.
Lo primero que hay que hacer es, estando el cursor en una celda o
seleccionando varias, desplegar el men contextual de la tabla al pulsar con
el botn derecho sobre ella, o bien abrir el men Modificar. En ambos casos
aparece la opcin Tabla.
Segn las celdas seleccionadas, algunas de las opciones de Tabla se
podrn utilizar mientras que otras no.
Para insertar una fila o una columna, hay que pulsar sobre las opciones
Insertar fila o Insertar columna. La fila se inserta sobre la celda o el conjunto
de celdas seleccionadas, mientras que la columna se inserta a su izquierda.

60

Tambin tenemos una opcin ms completa, la opcin Insertar filas o

columnas. Al seleccionarla aparece una nueva ventana, donde es posible
determinar si lo que se insertarn sern filas o columnas, el nmero de ellas
que se insertar, y la posicin donde se insertarn.

Para eliminar una fila o una columna, hay que posicionar el cursor en la fila
o columna a eliminar y elegir la opcin Eliminar fila o Eliminar columna del
men Tabla.

61

Tambin se puede seleccionar la fila o columna a borrar y pulsar la tecla de

borrado (Del o Supr)
Para practicar puedes realizar el Ejercicio paso a paso Aadir y eliminar filas.

Anidar, dividir y combinar celdas

Es posible insertar tablas dentro de las celdas de otras tablas. A esto se le
llama anidar tablas.
A continuacin tienes un ejemplo de anidamiento. Como puedes ver, en la
primera celda de una tabla se ha insertado otra tabla.

Para anidar tablas slo tienes que posicionar el cursor en la celda donde
quieres insertar la nueva tabla e insertarla como ya hemos visto.
Combinar celdas consiste en convertir 2 o ms celdas en una sola por
lo que dejar de haber borde de separacin entre una celda y otra ya que
sern una sola. Esto nos puede servir por ejemplo para utilizar la primera fila
para escribir el ttulo de la tabla. En este caso habra que combinar todas las
celdas de la primera fila en una sola
Mientras que dividir celdas consiste en partir en dos una celda.
Una de las formas de dividir y combinar celdas es a travs del inspector
de propiedades.

Si se seleccionan varias celdas pueden combinarse pulsando sobre el

botn del inspector de propiedades (lo encontrars en la parte inferior
izquierda del panel Propiedades, o pulsando sobre la opcin Combinar
celdas de la opcin Tabla, que como ya has visto puedes dirigirte a ella a

62

travs del men contextual de la tabla y a travs del men Modificar.

Tienes que tener en cuenta que slo es posible combinar celdas contiguas,
cuya combinacin pueda dar como resultado otra celda, es decir, que su
combinacin d como resultado un recuadro. Por ejemplo, en la siguiente
tabla no podran combinarse las celdas 1 y 4, ni las celdas 1, 2 y 3, porque
dichas combinaciones no dan como resultado una celda.
1

Para dividir una celda hay que pulsar

sobre el botn del inspector de
propiedades, o sobre la opcin Dividir
celda de la opcin Tabla.
En ambos casos, aparece una ventana
como sta, en la que hay que especificar si
la celda se va a dividir en filas o columnas, y
el nmero de stas.
Para practicar puedes realizar el Ejercicio paso a paso Combinar celdas.

Modos de tabla
A la hora de trabajar con tablas Dreamweaver nos proporciona distintos
modos de visualizacin. Nosotros hemos trabajado en todo el tema con el
modo estndar, y vamos a seguir trabajando con el, pero se puede pasar a los
otros modos a travs del men Ver opcin Modo de tabla. Dentro de esta
opcin podemos elegir entre Modo estndar, Modo de tablas expandidas, o
modo de diseo.

63

El Modo de diseo se utiliza para dibujar pginas con un diseo

determinado, basndose en tablas. Utilizando esta vista, las tablas no han de
insertarse obligatoriamente en lneas de texto, como hemos hecho hasta el
momento, sino que es posible insertarlas en cualquier punto de la pgina, y
Dreamweaver se encargar de rellenar el espacio vaco, para que sea posible
que la tabla aparezca en esa posicin.
El Modo de tablas expandidas aade temporalmente relleno y espaciado
de celda a las tablas de un documento y aumenta los bordes de las tablas
para facilitar la edicin. Este modo se puede utilizar para seleccionar
elementos de las tablas o colocar el punto de insercin de forma precisa pero
en este modo no vemos la pgina como quedar exactamente.
En este curso nos limitaremos al modo estndar.

Unidad 8. Marcos (I)

Vamos a ver qu son los marcos y para qu se utilizan. Tambin veremos
cmo insertar un marco sencillo en una pgina, y cmo trabajar con l.

Introduccin

64

Los marcos o frames sirven

para distribuir mejor los datos de
las pginas, ya que permiten
mantener fijas algunas partes,
como pueden ser el logotipo y la
barra de navegacin, mientras
que otras s pueden cambiar.
Adems de mejorar la
funcionalidad, pueden mejorar
tambin la apariencia.
Cada uno de los marcos de
una pgina, contiene un
documento HTML individual. Por
ejemplo, en la imagen de la
derecha puedes ver una pgina
con dos marcos. El marco
izquierdo contiene el documento
menu.htm y el derecho el
documento perros.htm. Para
poder visualizar la pgina de este
modo, hemos tenido que abrir en
el navegador el documento
marcos.htm, que es a pgina
que contiene los marcos
agrupados.
Es posible editar los documentos contenidos en los marcos desde la pgina
que contiene el grupo de marcos. Esto facilita el trabajo, ya que es ms fcil
hacerse una idea de cmo quedar la pgina al final, cosa que no es posible si
se editan individualmente cada uno de los documentos que contiene el marco.
El trabajar con marcos puede resultar una tarea algo complicada, sobretodo
al principio, por lo que no vamos a profundizar mucho en el tema, y veremos
solamente algunos conceptos bsicos y ejemplos sencillos.

Crear marcos

65

Existen varias formas de crear un

marco. Nosotros vamos a ver
solamente una de ellas.
Para crear un marco, primero hay
que abrir algn documento. Puede ser
uno nuevo o uno ya existente.
Despus, dirigirse al men Insertar,
HTML, Marcos. A travs de esta opcin
puede elegirse el tipo de marco que va
a crearse.
Vamos a ver el marco a la Izquierda.
Si pulsamos sobre Izquierda se
crear un nuevo marco a la izquierda
del documento actual.

Como puedes ver en la imagen,

aparece una lnea que divide el
documento en dos. El documento de
partida era uno nuevo.
En este caso tendremos tres
documentos: el de la izquierda, el de la
derecha, y el que contiene el grupo de
marcos. El de la derecha es el
documento que tenamos inicialmente,
que est en el marco conocido como
marco padre (MainFrame).
Para seleccionar el documento que
contiene el grupo de marcos hay que
pulsar sobre la lnea que separa los
marcos. Esto solo es posible mientras
dicho documento no se haya guardado.

66

Si en lugar de insertar un marco a

la izquierda lo insertamos a la
Derecha, el marco vaco aparecer
a la derecha del documento original.
En esta imagen puedes ver un
ejemplo de marco a la derecha.
Sobre un documento ya existente,
menu.htm, se ha insertado un
marco a la derecha.
Al igual que en el caso anterior,
tenemos tres documentos: el de la
izquierda, el de la derecha, y el que
contiene el grupo de marcos. En este
caso, el documento que tenamos
inicialmente es el de la izquierda,
mientras que antes era el de la
derecha. Por ello, en este caso el
marco padre ser el de la izquierda.
El marco padre siempre es el
marco en el que se encuentra el
documento inicial, sobre el que se
han insertado el resto de marcos.

Unidad 8. Marcos (II)

Seleccionar marcos

67

Para seleccionar los marcos del documento es

necesario dirigirse al panel Marcos, que puede
abrirse a travs del men Ventana. Si la opcin
Marcos no te aparece directamente en este men,
posiblemente est dentro de la opcin Otros.
Tambin puedes abrir el panel Marcos pulsando la
combinacin de teclas Mays+F2.
En el panel Marcos aparecen los marcos que
contiene el documento de marcos, y se puede pasar
de uno a otro pulsando sobre ellos en el panel.
Tambin puede seleccionarse la pgina de marcos
pulsando sobre el borde que rodea a los marcos (el
que aparece ms grueso y en relieve en la imagen).
No es necesario seleccionar los marcos para
editar los documentos que stos contengan.
Si es necesario seleccionar los marcos para
especificar las propiedades especficas de cada uno
de ellos.

Guardar
Todos los documentos que contienen marcos tienen que tener una pgina
en cada uno de ellos. Es por esto que al crear algn marco, se cargan pginas
nuevas por defecto en cada uno de ellos, a excepcin del marco que contiene
la pgina original.
Estas pginas nuevas pueden ser posteriormente sustituidas por otras ya
existentes, como ya veremos ms adelante.
Es necesario guardar la pgina que contiene el grupo de marcos, as como
cada una de las pginas que estn incluidas en sus marcos.
No es conveniente guardar la primera vez los marcos con la opcin guardar
todo
, ya que podemos equivocarnos al dar los nombres a los nuevos
documentos.
Es preferible guardar cada documento uno por uno, a no ser que todos los
marcos contengan alguna pgina ya existente, ya que en ese caso el nico
documento al que habr que dar nombre ser al que contiene el grupo de
marcos.
Para guardar el documento que contiene el grupo de marcos, hay que

68

seleccionarlo previamente.
Para guardar cada uno de los otros documentos, simplemente hay que
situar el cursor en ellos antes de pulsar sobre guardar

Configurar marcos
Una vez seleccionado un marco a travs del panel Marcos, pueden
establecerse sus propiedades a travs del inspector de propiedades.

Cada marco tiene asignado un nombre, que puede cambiarse a travs de

Nombre del marco. El nombre no puede contener espacios en blanco.
En Origen aparece el nombre del documento HTML que est contenido en
el marco.
En Bordes puede elegirse si aparecer o no una lnea separando el marco
del resto de marcos. En el caso de que se muestre el borde, se puede
especificar un color para ste a travs de Color borde. Tambin es posible
establecer un grosor para el borde a travs de Ancho.
Desplaz. indica si aparecern o no las barras de desplazamiento cuando el
documento del marco no pueda visualizarse completamente.
Si la opcin Mismo tamao est activa, indica que los usuarios no podrn
variar las medidas del marco desde el navegador.
El Ancho del margen y el Alto del margen indican la separacin que
habr entre el contenido del marco y sus bordes izquierdo-derecho y superiorinferior.
Si lo seleccionado es todo el conjunto de marcos (la pgina de marcos), el
inspector de propiedades es algo diferente.

69

En Bordes puede elegirse si aparecer o no una lnea separando los

marcos entre s y puede especificarse un color para este a travs de Color
borde. Tambin es posible establecer un grosor para el borde a travs de
Ancho.
El campo Columna (o Fila dependiendo del marco elegido en Seleccin
Fila Col.) sirve para especificar el tamao del marco, que puede ser en
Pxeles, Porcentaje (de la ventana) o Relativo (proporcional al resto de
marcos).
Normalmente utilizars dos marcos, uno de ellos con tamao en Pxeles,
que ser el que contenga la barra de navegacin, y el otro marco con tamao
Relativo, para que se ajuste a la ventana del navegante.

Contenido del marco

70

Como ya has visto, el contenido de un marco puede establecerse a travs

del campo Origen del inspector de propiedades.

Cuando trabajamos con marcos, queremos poder cargar diferentes

documentos en cada uno de ellos. El contenido de alguno de los marcos ha de
ser fijo, mientras que el de otros ha de poder variar.
A travs del campo Origen del inspector de propiedades, slo es posible
especificar el documento que se cargar inicialmente en el marco, pero hemos
de poder cambiar este documento por otro a travs de vnculos.
Como recordars, en el tema de hipervnculos vimos los posibles destinos
de los enlaces. Estos destinos podan ser _blank, _parent, _self, y _top.
Vamos a recordar para que serva cada uno de ellos, ya que ahora que ya
sabes trabajar con marcos te sern ms fciles de entender.
_blank:
Abre el documento vinculado en una ventana nueva del navegador.
_parent:
Abre el documento vinculado en la ventana del marco que contiene el
vnculo o en el conjunto de marcos padre. Como ya sabes, el marco padre es
el marco en el que se encuentra el documento inicial, sobre el que se han
insertado el resto de marcos.
_self:
Es la opcin predeterminada. Abre el documento vinculado en el mismo
marco o ventana que el vnculo.
_top:
Abre el documento vinculado en la ventana completa del navegador, lo cual
quiere decir que los marcos de la ventana desaparecern al abrir el vnculo en
ella.

71

Adems de estos destinos

para los enlaces, tambin
aparecern los nombres de los
distintos marcos de la pgina.
Podemos aadir todos estos
destinos a cualquier elemento de
la pgina que contenga algn
enlace, ya sea texto, una imagen,
un mapa de imagen, un elemento
Flash, etc.
Gracias a todo esto podremos
hacer que las barras de
navegacin y el resto de enlaces
funcionen a nuestro antojo,
cargando unas u otras pginas
en alguno de los marcos, en una
ventana nueva, en toda la
ventana, etc.
Esta tarea puede resultar algo
pesada, y al principio complicada,
pero da muy buenos resultados
finales.
Los cursos de aulaClic que
puedes ver en Internet suelen
utilizar un marco superior
horizontal para contener los
mens desplegables.
Para practicar puedes realizar el Ejercicio paso a paso Crear y configurar
marcos.

Unidad 9. Formularios (I)

Vamos a ver qu es un formulario, para qu se utiliza, cmo insertar uno,
qu elementos puede contener y cmo pueden validarse los datos
introducidos en l.

72

Introduccin
Los formularios se utilizan para
recoger datos de los usuarios, nos
pueden servir para realizar un pedido
en una tienda virtual, crear una
encuesta, conocer las opiniones de los
usuarios, recibir preguntas, etc.
Una vez el usuario rellena los datos y
pulsa el botn para enviar el formulario
se arrancar un programa que recibir
los datos y har el tratamiento
correspondiente.
Aqu vamos a ver cmo crear el
formulario, (insertar campos y botones
en el formulario y validarlos), pero no la
parte de tratamiento de los datos, ya
que para ello se necesitan nociones de
programacin, ya sea en VBScript, en
JavaScript o en otro lenguaje de
programacin, y esto no entra en los
objetivos del curso.
A la derecha tienes un ejemplo de
formulario.
Un formulario est formado, entre
otras cosas, por etiquetas, campos de
texto, mens desplegables, y botones.

Elementos de formulario

73

Los elementos de formulario pueden insertarse en una pgina a travs del

men Insertar, opcin Formulario.
A travs de esta opcin se puede acceder a la lista de todos los objetos de
formulario que pueden ser insertados en la pgina.
Vamos a ver uno por uno algunos de los distintos elementos que pueden
formar parte de un formulario, as como algunas de sus propiedades.
Campo de texto y rea de texto:
Permiten aadir un cuadro de texto. El Campo de texto solo permite al usuario
escribir una lnea, mientras que el rea de texto permite escribir varias.
Se puede pasar de Campo de texto a rea de texto a travs del inspector de
propiedades.
Tambin es posible definirlo como Contrasea es como el campo de texto pero
las letras que va tecleando el usuario se sustituyen por un carcter como podrs
ver en la imagen siguiente.
A continuacin tienes un ejemplo de cada uno de estos tres tipos. Puedes escribir
en ellos para ver su funcionamiento.
Campo de te

A travs del inspector de propiedades es posible asignar tambin el ancho del

cuadro de texto, el nmero mximo de lneas o caracteres, y el valor inicial del
cuadro.
Botn:
Es el botn tradicional de Windows. El botn puede tener asignadas tres opciones:
Enviar formulario, Restablecer formulario (borrar todos los campos del
formulario), o Ninguna (para poder asignarle un comportamiento diferente de los
dos anteriores).

74

Unidad 12. Capas

Vamos a ver algunas de las caractersticas bsicas sobre las capas, para
luego poder trabajar con ellas y aplicarles algn comportamiento.

Introduccin
Las capas no son ms que unos recuadros, que pueden situarse en
cualquier parte de la pgina, en los que podemos insertar contenido HTML.
Dichas capas pueden ocultarse y solaparse entre s, lo que proporciona
grandes posibilidades de diseo.
Las capas pueden moverse de una posicin a otra
de la ventana pulsando sobre el recuadro blanco, y sin
soltar el ratn, arrastrndola hacia la nueva posicin.
Tambin pueden ser redimensionadas pulsando
sobre los recuadros negros, y arrastrndolos hasta
conseguir el tamao deseado.
Dentro del recuadro de la capa es posible insertar texto, tablas, imgenes,
animaciones flash, y todos los elementos que puede contener un documento
HTML.
La capa no solo aparece representada por el recuadro anterior, sino que
tambin aparece la imagen en el documento, cuando est abierto en
Dreamweaver.
Este icono sirve para seleccionar la capa al pulsar sobre l, y al eliminarlo
se elimina tambin la capa.

Insertar una capa

Las capas pueden insertarse en una pgina a travs del men Insertar,
opcin Objeto de diseo, Capa.
Una vez se ha insertado la capa, pueden editarse sus atributos, pero para
ello hay que seleccionarla primero.
Una capa puede seleccionarse de varias maneras. Una de ellas es
pulsando sobre el icono correspondiente, pero esto no resulta til cuando
existen muchas capas en un mismo documento, ya que todas las capas tienen

75

asociada una imagen igual a esta, y no es fcil seleccionar la deseada a la

primera.

Cuando existen varias capas en un mismo

documento, es preferible seleccionarlas a travs de
la pestaa Capas del panel Diseo, que puede
abrirse a travs del men Ventana opcin Capas.
Si la opcin Capas no te aparece directamente en
este men, posiblemente est dentro de la opcin
Otros. Tambin puedes abrir el panel pulsando F2.
En dicho panel aparecen los nombres de todas
las capas que existen en el documento actual, y
para seleccionar una de ellas simplemente hay que
pulsar sobre el nombre en el panel.

Formato de una capa

Las propiedades de la capa se especifican a travs de su inspector de propiedades.

ID de capa es el nombre de la capa. Tambin puede ser cambiado a travs del panel
Capas, haciendo doble clic sobre l.
Iz y Sup indican la distancia en pixels que hay entre los lmites izquierdo y superior del
documento y la capa.
An y Al indican la anchura y la altura de la capa.
ndice Z es el nmero de orden de colocacin de las capas. Este valor tambin puede
cambiarse a travs del panel Capas. Una capa ser solapada por aquellas capas cuyo
ndice Z sea mayor que el suyo.
Vis indica la visibilidad inicial de la capa. La visibilidad puede ser de cuatro tipos:
Default (visibilidad segn el navegador),
Inherit (se muestra la capa mientras la pgina a la que pertenece tambin

76

se est mostrando),
Visible (muestra la capa, aunque la pgina no se est viendo) y
Hidden (la capa est oculta).
La visibilidad tambin puede cambiarse a travs del panel Capas, pulsando sobre la
imagen del ojo. El ojo abierto indica Visible, y el ojo cerrado indica Hidden.
A travs de Im. fondo y Col puede indicarse una imagen o un color de fondo para la
capa.
Desb. (Desbordamiento) controla cmo aparecen las capas en un navegador cuando
el contenido excede el tamao especificado de la capa.
Visible indica que el contenido adicional aparece en la capa. La capa se
ampla para darle cabida.
Hidden (oculto) especifica que el contenido adicional no se mostrar en el
navegador.
Scroll (desplazamiento) especifica que el navegador deber aadir barras
de desplazamiento a la capa tanto si se necesitan como si no.
Auto (automtico) hace que el navegador muestre barras de
desplazamiento para la capa cuando sean necesarias (es decir, cuando el
contenido de la capa supere sus lmites).

Unidad 13. Comportamientos (I)

En este tema vamos a ver las caractersticas bsicas de los
comportamientos, as como un par de ejemplos de entre sus posibles
aplicaciones.

Introduccin
Los comportamientos son acciones que suceden cuando los usuarios
realizan algn evento sobre un objeto, como puede ser mover el ratn sobre
una imagen, pulsar sobre un texto, hacer doble clic sobre un mapa de imagen,
etc.
Los comportamientos no existen como cdigo HTML, se programan en

77

JavaScript. Dreamweaver permite insertarlos a travs del panel

Comportamientos, por lo que no es necesario escribir ninguna lnea de
cdigo JavaScript para programarlos.
La imagen que aparece a continuacin tiene asociado un comportamiento.
Sita el puntero sobre ella para ver qu es lo que ocurre.

Ests visualizando una capa que estaba oculta.

Si dejas de situar el puntero sobre la imagen, la capa volver a ocultarse.

La imagen tiene asociados dos comportamientos para mostrar y ocultar la

capa. Este tipo de comportamiento lo veremos ms adelante.
Otros comportamientos que ya has visto son los que se aplican sobre las
imgenes de sustitucin y las barras de navegacin, que ya estn
predefinidos, por lo que no es necesario introducir este conjunto de
comportamientos a travs del panel Comportamientos.
Para validar formularios ya viste algunas caractersticas del panel
Comportamientos. Vamos a recordar las que necesitamos para poder
insertar comportamientos ms tarde.
El panel Comportamientos se puede abrir a travs del men Ventana,
opcin Comportamientos. Tambin pulsando Mays+F3.

78

En este panel hay que desplegar el botn

pulsando sobre l, y en Mostrar eventos para
elegir una versin de la lista de navegadores.
Algunos comportamientos no funcionan para
algunos navegadores, por lo que dependiendo del
navegador elegido aparecern unos u otros
comportamientos posibles.
Existen comportamientos que funcionan en
Internet Explorer pero no en Netscape. Debido a
que la mayora de usuarios utiliza Internet Explorer,
vamos a seleccionar este navegador. Puedes
seleccionar alguna de sus ltimas versiones: IE 5.5
o IE 6.0.
Una vez elegido un navegador ya no es necesario
volver a elegirlo las siguientes veces que se desee
insertar algn comportamiento.

Insertar un comportamiento
Cuando ya hay establecido algn navegador, ya
se pueden insertar comportamientos.
Lo primero que hay que hacer es seleccionar el
objeto sobre el que se ha de aplicar el
comportamiento, como puede ser una imagen, un
fragmento de texto, etc.
Al desplegar el botn del panel
Comportamientos aparece la opcin Mostrar
eventos para, a travs de la cual se haba elegido
el navegador. Tambin aparece la lista de todas
las acciones posibles para el navegador elegido
previamente, de entre las que se puede
seleccionar una.
Segn el elemento sobre el que se desee
aplicar el comportamiento, se podrn elegir unas
acciones, mientras que otras no.

79

En este caso la accin Validar formulario no

puede seleccionarse porque no existe ningn
formulario en la pgina.
Despus de elegir alguna accin, el
comportamiento correspondiente aparece en el panel
Comportamientos. En este caso se han insertado
dos comportamientos.
Como puedes ver, cada comportamiento tiene
asociada una accin y un evento.
Las acciones son las que se han elegido en la lista
anterior y el evento indica cundo se debe de
realizar la accin.
Para eliminar un comportamiento, hay que seleccionarlo en el panel
Comportamientos y pulsar sobre el botn . Tambin es posible cambiar el
orden de los comportamientos aplicados a un objeto, seleccionndolos y
ordenndolos mediante los botones
.

Unidad 13. Comportamientos (II)

Mostrar-Ocultar
capas
Uno de los comportamientos ms habitual e interesante es el de MostrarOcultar capas. Resulta obvio que para poder aplicar este comportamiento
han de existir capas en el documento.
En la pgina anterior tenas un ejemplo de este
tipo. Vamos a ver qu eventos y acciones hay que
establecer para que se produzca dicho
comportamiento.
Despus de seleccionar la imagen hay que
seleccionar una accin de la lista, pulsando sobre el
botn . En este caso la accin tiene que ser la de
Mostrar-Ocultar capas.
Tras elegir la accin, hay que especificar qu
capas han de mostrarse u ocultarse para el evento.

80

Para ello hay que pulsar dos veces sobre la accin,

en el panel Comportamientos.
Entonces aparece una nueva ventana, con la lista
de todas las capas que hay en la pgina, en la que
puede indicarse la variacin que se va a producir
sobre la visibilidad de cada una de las capas.
Puede indicarse si se
van a Mostrar, si se
van a Ocultar, o si van
a adquirir la visibilidad
inicial
(Predeterminada).
Para determinar la
visibilidad de cada una
de las capas es
necesario
seleccionarlas una por
una, indicando su
visibilidad a travs de
los botones inferiores
de la ventana.
No es necesario aplicar una visibilidad diferente a todas las capas de la
pgina, solamente a las que se desea que cambien al producirse el evento.
Por ejemplo, en este caso a la capa "gatomes" no se le ha aplicado ninguna
visibilidad diferente, ya que no se desea que vare al producirse el evento.
Si se desea eliminar una visibilidad establecida para alguna de las capas,
simplemente hay que volver a pulsar sobre el botn correspondiente a la
visibilidad que ya tiene aplicada. Por ejemplo, para eliminar la visibilidad
aplicada a la capa "gatosemana" habra que volver a pulsar sobre el botn
Mostrar.
Hay que tener en cuenta en este caso que lo que se desea es que al situar
el puntero sobre la imagen, se muestre la capa, y que cuando el puntero deje
de estar sobre la imagen, la capa se vuelva a ocultar. Para ello es necesario
insertar dos comportamientos con la accin Mostrar-Ocultar capas. Uno de
ellos mostrar la capa para el evento onMouseOver (cuando el ratn est
sobre), mientras que el otro la ocultar para el evento onMouseOut (cuando

81

el ratn est fuera).

Llamar JavaScript
Otro de los comportamientos que puede aplicarse sobre algn objeto es el
de Llamar Javascript. Este comportamiento permite insertar cdigo
JavaScript dentro del cdigo del documento.
Por ejemplo, es posible hacer que se cierre la ventana del navegador al
pulsar sobre un objeto. Para ello hay que insertar la lnea JavaScript
"window.close();".
Al igual que para el ejemplo de las capas, lo primero que hay que hacer es
seleccionar el objeto sobre el que se desea aplicar el comportamiento.
Seguidamente hay que seleccionar la accin Llamar Javascript a travs del
botn .
Entonces aparece una nueva ventana en la que hay que introducir la lnea
JavaScript.

Una vez insertado el comportamiento, en el

panel Comportamientos hay que establecer el
evento onclick (al hacer clic) para que la
llamada a JavaScript se produzca al pulsar una
vez sobre el objeto.
Pulsando dos veces sobre la accin vuelve a
abrirse la ventana anterior, y es posible
modificar la lnea de cdigo.

Unidad 14. Otros elementos (I)

82

Vamos a ver una serie de elementos que suelen aparecer en las pginas
web, como pueden ser las marquesinas, los contadores y la fecha.

Marquesinas
Las marquesinas son texto, imgenes, o una mezcla entre texto e
imgenes, que pueden desplazarse de un lado a otro de la ventana en forma
de lnea. A continuacin tienes un ejemplo de marquesina.

Las marquesinas no se pueden insertar a travs del editor grfico de

Dreamweaver, es necesario hacerlo a travs del cdigo.
Para crear una marquesina hay que insertar las etiquetas <MARQUEE> y
</MARQUEE>. Entre dichas etiquetas han de introducirse los elementos que
se desea que aparezcan en la marquesina.
Tambin es posible especificar algunas caractersticas de la marquesina. La
marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente,
pero si lo deseas puedes hacer que estas propiedades varen. Por ejemplo, si
pones <marquee behavior="slide">, la marquesina har el desplazamiento
una sola vez y se detendr.
Si pones <marquee behavior="alternate">, en lugar de desplazarse
continuamente de derecha a izquierda, la marquesina se desplazar de lado a
lado de la ventana, como si rebotara en los extremos, tal y como ocurre en el
ejemplo anterior, cuyo cdigo puedes ver a continuacin:
<marquee behavior="alternate">
Bienvenid@s a PerrosGatos
<img src="imagenes/logo_animales.gif">
</marquee>

83

Unidad 14. Otros elementos (II)

Fecha
Dreamweaver permite insertar fcilmente la fecha de ltima modificacin
de las pginas.
Cuando se modifica una pgina en la que se ha insertado este tipo de
fecha, se actualizar automticamente con la fecha del sistema.
Conviene insertar la fecha de modificacin cuando la pgina ha de contener
informacin actualizada cada poco tiempo, para que los usuarios puedan
saber cuando fue la ltima vez que se actualizaron los datos. Pero en el caso
de que la pgina no se actualice hasta que pase cierto tiempo, es preferible no
incluir la fecha de modificacin.
Para insertar la fecha hay que dirigirse al men Insertar, a la opcin Fecha.
En la nueva ventana ya es posible establecer el formato de la fecha, y si se
desea que se actualice o no automticamente al modificar y guardar la pgina
de nuevo.

Regla horizontal

84

El elemento que suele utilizarse para separar secciones dentro de una misma pgina
es la regla horizontal. Una regla horizontal no es ms que una lnea horizontal.
Para insertar una regla hay que dirigirse al men Insertar, opcin HTML, luego la
opcin Regla horizontal.
El inspector de propiedades para las reglas es el siguiente.

A travs de sus campos es posible modificar en cierta medida la apariencia de las

reglas. A continuacin tienes cuatro ejemplos de reglas horizontales.

Estas reglas slo se diferencian en los campos Al (altura) y Sombreado. Las dos
primeras, por ejemplo, no tienen activado el campo Sombreado, mientras que las otras
dos s.

Unidad 14. Otros elementos (III)

Cdigo de otras pginas
En ocasiones nos gustara incluir en nuestras pginas cosas que hemos visto en
otras pginas que estn publicadas en Internet.
Puedes visualizar el cdigo fuente de dichas pginas a travs del men Ver del
navegador Internet Explorer, opcin Cdigo fuente, o bien mostrar el men contextual
de la pgina pulsando con el botn derecho sobre ella, y pulsando despus sobre la
opcin Ver cdigo fuente. De este modo puedes consultar el cdigo que se ha
utilizado para realizar la pgina, y utilizar dicho cdigo en las tuyas.
Visualizar el cdigo fuente resulta til para ver cmo se ha estructurado la pgina, el
uso de los comportamientos (que aparecen programados en cdigo JavaScript), y otra
serie de rutinas JavaScript.
Por ejemplo, pulsa aqu para abrir una pgina en la que aparece un efecto en la
barra de estado del navegador, que muestra una marquesina, cuyo texto es CODIGO

85

JAVASCRIPT - CURSO Dreamweaver MX 2004 - AULACLIC.

Si miras el cdigo fuente de esa pgina podrs ver el cdigo javascript que utiliza
para conseguir ese efecto en la barra de estado. El cdigo es el siguiente:
<SCRIPT language=JavaScript>
<!-strcnt=0;
mensaje=" CODIGO JAVASCRIPT - CURSO Dreamweaver MX 2004 - AULACLIC ";
function scroller()
{
window.status=mensaje.substring(strcnt++,mensaje.length+1);
if(strcnt>mensaje.length)
strcnt=0;
setTimeout("scroller()",200);
}
//-->
</SCRIPT>
Dicho cdigo tiene que ir entre las etiquetas <HEAD> y </HEAD>, y aadir
onload="scroller()" dentro de la etiqueta <BODY>, de modo que sta queda del
siguiente modo:
<BODY onload="scroller()">
Este cdigo no es demasiado complicado, y podras casi sin problemas aadirlo a
tus pginas, para que mostrasen los mensajes que quisieras.
Pero en muchas ocasiones puede costar entender el cdigo, sobretodo si no se
tienen nociones de ningn lenguaje de programacin. Si no entiendes el cdigo,
puedes cometer el error de copiar cdigo JavaScript errneo, copiarlo de forma
incompleta, insertarlo en una zona incorrecta del cdigo html, etc.
Lo importante que tienes que saber en este momento sobre las funciones JavaScript
es que aparecen entre las lneas
<HEAD> ... <SCRIPT language=JavaScript> <!-y
//--> </SCRIPT> ... </HEAD>

Unidad 14. Otros elementos (IV)

86

Adaptar webs a distintas resoluciones

Siempre que se crea una pgina web hay que tener en cuenta que va a ser visitada
por usuarios con monitores de distintos tamaos y con distintas resoluciones.
Es imposible hacer que una pgina se vea exactamente igual en todos los monitores
de los usuarios que la visitan, pero hay que intentar que su visualizacin sea lo ms
parecida posible.
La resolucin usada de forma ms frecuente es la de 800x600, por lo que
inicialmente habra que disear la pgina para dicha resolucin. Es decir, habra que
crear la pgina en un monitor con dicha resolucin, para poder visualizar claramente
cmo queda en el navegador, y distribuir el contenido de la pgina de la forma ms
adecuada.
Normalmente se utilizan tablas, ya que resultan muy tiles para distribuir el contenido
de la pgina.
Como recordars, el tamao de las tablas puede ser definido en pxeles o en
porcentaje. Cuando el tamao de la tabla sea definido en pxeles, la tabla se ver del
mismo modo independientemente del tamao de la ventana del navegador. En cambio,
cuando el tamao de la tabla sea definido en porcentaje, la tabla se ajustar al tamao
de la ventana del navegador, lo cual implica que el contenido de la tabla se
descuadrar.
Pulsa aqu para ver una pgina con tablas de tamao fijo, en pxeles. Imagina que la
pgina ha sido diseada para visualizarse correctamente en un monitor pequeo de
baja resolucin, cuyo tamao equivale al de la ventana del navegador que se ha
abierto.
Si modificas el tamao de la ventana, vers que las tablas son siempre del mismo
tamao. Esto tiene un gran inconveniente, ya que si maximizas la ventana del
navegador (lo que equivaldra a visualizar la pgina en un monitor grande con alta
resolucin), a la derecha de las tablas aparecer un gran hueco vaco.
Pulsa aqu para ver una pgina con tablas de tamao variable, en porcentaje.
Si modificas el tamao de la ventana, vers que las tablas se ajustan a ella. Usar
tablas con tamao variable tiene tambin un gran inconveniente, ya que si maximizas la
ventana del navegador apreciars claramente cmo el contenido de las tablas se
descuadra.
En un principio puede parecer ms conveniente utilizar tablas con tamao fijo,
aunque esto implique que aparezca el hueco vaco a la derecha, en el caso de los
monitores con alta resolucin. Pero con un poco de prctica a la hora de manejar las

87

tablas, puedes salvar el inconveniente del descuadre de la pgina y as definir pginas

con tamao en porcentaje que aprovechen el ancho cuando el monitor de ms grande.
No solo puede establecerse el tamao de la tabla, tambin es posible establecer el
tamao de las celdas. Al igual que en el caso de las tablas, el tamao de las celdas
puede definirse en en pxeles o en porcentaje.

El tamao de la celda a travs del inspector de propiedades estar especificado

por los valores de An (anchura) y Al (altura). Normalmente solo se especifica la
anchura, no la altura.
Los valores An y Al de una celda siempre estn en Pxeles. En la imagen anterior, la
celda tiene una anchura de 208 pxeles. Para que, por ejemplo, la anchura fuera del 25
por ciento de la tabla, en An habra que escribir 25%.
Jugando con las medidas de las celdas de la tabla, y teniendo en cuenta qu
contiene cada una de ellas (imgenes, texto alineado a la derecha, texto alineado a la
izquierda, texto de gran tamao, etc.), puede conseguirse que al visualizar la pgina en
monitores de distintos tamaos y con distintas resoluciones, la apariencia sea bastante
similar, o al menos que la distribucin del contenido de la pgina no se vea muy
afectado por el cambio de tamao de la ventana del navegador.

Unidad 15. HTML desde Dreamweaver (I)

En este tema vamos a ver algunas de las facilidades que proporciona
Dreamweaver para trabajar sobre el propio cdigo HTML, y no nicamente
sobre el editor grfico de la vista diseo.
En este tema no se pretende ensearos el lenguaje HTML sino cmo poder
realizar algunos reajustes directamente en el cdigo estando dentro de
Dreamweaver.

88

Etiquetas
Ya sabes que el lenguaje HTML est basado en etiquetas que marcan el
inicio y fin de cada elemento de la pgina Web.
En el primer tema vimos como ejemplo las etiquetas que hay que incluir en
el cdigo HTML de una pgina para darle un ttulo. Consista simplemente en
escribir el ttulo deseado entre las etiquetas <TITLE> y </TITLE>.
Las etiquetas consisten en poner un mismo comando entre los smbolos "<"
y ">". La primera etiqueta indica inicio, y la segunda, que incluye el smbolo
"/", indica final se suele denominar etiqueta de cierre.
Las etiquetas disponen de atributos que permiten definir caractersticas del
elemento sobre el que actan, incluyendo cierto cdigo dentro de la etiqueta.
Por ejemplo, un prrafo se inserta entre las etiquetas <P> y </P>, pero es
posible cambiar sus caractersticas predeterminadas, como puede ser
alinearlo a la derecha. Para ello, en lugar de introducir el texto del prrafo
entre las etiquetas anteriores, ha de insertarse entre las etiquetas <P
align="right"> y </P>.
Tambin hay elementos que no precisan insertar etiqueta de cierre. Por
ejemplo, un May+INTRO dentro del cdigo HTML equivale a la etiqueta <BR>.
Dreamweaver inserta automticamente las etiquetas necesarias para
construir la pgina con la apariencia y contenido definidos en el editor grfico,
pero tambin ofrece otras posibilidades para trabajar directamente sobre el
cdigo.

El inspector de cdigo
Recordars que Dreamweaver ofrece la posibilidad de trabajar con
tres vistas: vista Diseo, vista Cdigo y vista Dividir (Cdigo y
Diseo).
Todas estas vistas se aplican directamente sobre la ventana del
documento.

89

Pero existe un panel que permite visualizar el cdigo

independientemente de la vista aplicada en el documento. Este panel
es el llamado Inspector de cdigo y puede abrirse a travs del men
Ventana. Si la opcin Inspector de cdigo no te aparece directamente
en este men, posiblemente est dentro de la opcin Otros. Tambin
puedes abrir el Inspector de cdigo pulsando F10.

El Inspector de cdigo muestra el cdigo HTML de la misma forma

que lo hacen la vista Cdigo y la vista Dividir (Cdigo y Diseo),
pero puede resultar ms cmodo trabajar con el panel, ya que puede

90

situarse en cualquier parte de la pantalla, y no se limita slo al espacio

del documento.

Unidad 15. HTML desde Dreamweaver (II)

Completar las etiquetas
Una de las posibilidades que ofrece Dreamweaver a la hora de trabajar
directamente sobre el cdigo HTML es la de completar las etiquetas mientras
se van introduciendo. Esto se produce tanto en el Inspector de cdigo como
en las vistas de cdigo.
Imaginemos que deseamos introducir en nuestra pgina un enlace a la
pgina de aulaclic, que ha de abrirse en una ventana nueva. En este caso
deberamos introducir la etiqueta <a href="http://www.aulaclic.es">pulsa
aqu para visitar aulaclic</a>, con lo que obtendramos el siguiente enlace:
pulsa aqu para visitar aulaclic
Vamos a ver cmo funciona el mecanismo de completar etiquetas a travs
de este ejemplo.
Las etiquetas se completan siempre de izquierda a derecha,
por lo que lo primero que debemos insertar es el smbolo < .
Despus de escribir nosotros este smbolo, Dreamweaver
mostrar una lista con todos los comandos que pueden aparecer
despus l. Para elegir uno de ellos hay que pulsar dos veces
sobre l con el puntero del ratn, o bien, estando seleccionado,
pulsar INTRO.
En este caso tenemos que elegir a, despus de lo cual
desaparecer la lista. En el cdigo tendremos .
Despus de <a hay que introducir un espacio en blanco.
Nada ms teclear el espacio en blanco aparecer otra lista de
elementos, que son los que pueden escribirse despus de la a,
los atributos de la etiqueta.
Tenemos que elegir href.

91

Una vez seleccionado, el cdigo quedar como

Entonces el cursor aparecer entre las comillas dobles, y se

mostrar una nueva lista en la que es posible elegir el tipo de
vnculo a insertar.
En este caso el vnculo ha de ser de tipo HTTP, aunque
tambin sera posible insertar un vnculo a un archivo (FILE), un
vnculo de correo electrnico (MAILTO), o un vnculo de
cualquiera de los tipos que aparecen en la lista. Nosotros
tenemos que seleccionar http://.
En lugar de cerrar ya la etiqueta con el smbolo >, queremos
primero indicar que el vnculo ha de abrirse en una ventana
nueva. Para ello tenemos que introducir un nuevo espacio, para
que se nos muestre otra lista.
En ella hay que elegir target. El cdigo quedar como
.
Entonces el cursor aparecer entre las nuevas comillas dobles,
y se mostrar una lista en la que es posible elegir el destino del
enlace.
Como queremos que el enlace se abra en una ventana nueva,
hay que seleccionar _blank.
Despus de introducir el smbolo > para cerrar la etiqueta, se insertar
automticamente la de final del enlace, es decir, se insertar </a>, y
tendremos
.
Ahora podemos completar la etiqueta con la direccin del enlace y el texto
que servir como enlace, para que quede del siguiente modo:
<a href="http://www.aulaclic.com">pulsa aqu para visitar aulaclic</a>

Errores en el cdigo

92

A travs del editor grfico es

posible ver si hay algunos
errores en el cdigo HTML,
como puede ser una etiqueta
incompleta.
En el caso de haber un error
de este tipo, el fragmento de
cdigo que contiene el error se
mostrar resaltado en amarillo
en la ventana de diseo de la
pgina.
Esto nos permite darnos
cuenta de la lnea concreta en
la que se encuentra el error.
Si en el ejemplo de
completar las etiquetas
hubiramos dejado sin
terminar la lnea de cdigo,
habiendo escrito nicamente
<a href="", aparecera
reflejado en el editor grfico tal
y como muestra la imagen de
la derecha.
Otra forma de detectar errores en nuestra pgina es a travs del men
Comprobar navegadores de destino en la barra de herramientas Documento.
Si nuestra pgina no contiene errores, el icono de este men tiene esta
apariencia

, mientras que si tenemos errores adoptar esta apariencia

Para ver los errores que tiene nuestra pgina,

desplegamos el men y elegimos la opcin Mostrar
todos los errores.
A continuacin se abrir el panel Resultados con las
lista de los errores encontrados.

93

A continuacin se abrir el panel Resultados con las lista de los errores

encontrados.
En esta lista aparece el grado de importancia del error representado mediante un
icono, el globo de palabras indica un mensaje informativo (seala cdigo que no
es compatible con un navegador pero que no tiene ningn efecto visible), el icono
de signo de exclamacin con fondo rojo indica error (indica cdigo que puede
causar un problema visible grave en un navegador concreto, como hacer
desaparecer partes de una pgina) y el icono de signo de exclamacin con fondo
amarillo indica advertencia (seala una parte de cdigo que no se visualizar
correctamente en un navegador concreto, pero eso no causar ningn problema
grave de visualizacin).
A continuacin tenemos la pgina y nmero de lnea donde est el error y una
descripcin del mismo.
A veces la descripcin es un texto largo que no se puede visualizar
completamente para ello puedes utilizar el botn Ms info .
Como ya sabrs los distintos navegadores y sus distintas versiones hacen que
un error lo sea o no, debemos realizar la comprobacin eligiendo las versiones de
los navegadores que consideremos sean las ms utilizadas entre nuestros
navegantes.
Para seleccionar los navegadores para que Dreamweaver los compruebe
debemos desplegar el men Comprobar navegadores de destino y seleccionar
la opcin Configuracin... Aparecer el cuadro de dilogo Comprobar
navegadores de destino donde seleccionamos los navegadores que queramos
comprobar y la versin mnima de la lista desplegable a la derecha del nombre del
navegador.

Unidad 15. HTML desde Dreamweaver (III)

Buscar y

94

reemplazar
En ocasiones es posible querer buscar dentro de un sitio web todas
aquellas pginas que contengan un texto en concreto, una etiqueta en
concreto, o parte de estos elementos. Tal vez los queramos buscar porque
deseemos trabajar sobre esas pginas y no recordbamos cual de ellas era, o
tal vez porque queramos cambiar ese texto o etiqueta por otros.
Imaginemos que una persona ha creado un sitio web, en el que la mayora
de las pginas tiene al comienzo un texto que hace referencia al nombre del
sitio, por ejemplo, todas esas pginas comienzan con PerrosGatos, y tiene la
seguridad de que no existe ese texto en ninguna parte de las pginas que no
sea al comienzo. Ahora imaginemos que esta persona ha creado una imagen
de un perro y un gato, y que quiere cambiar en todas las pginas que
contienen el texto PerrosGatos dicho texto por la imagen.
En este caso no es necesario que abra una por una todas las pginas que
contienen dicho texto, ni tampoco que modifique una por una dichas pginas
para cambiar el texto por la imagen. Para realizar esta tarea resulta ms
sencillo utilizar la herramienta de Buscar y reemplazar.
Puedes abrirla a travs del men Edicin, opcin Buscar y reemplazar, o
pulsando Ctrl+F.

Mediante Buscar en puede especificarse si se va a buscar en el documento

actual, en todo el sitio, o en los archivos seleccionados del sitio (habiendo
seleccionado dichos archivos previamente).
A travs de Buscar se especifica si hay que buscarlo en el texto (en la
ventana diseo), o en el cdigo HTML (cdigo fuente).

95

Junto a la lista de opciones de Buscar, aparece un cuadro de texto en el

que hay que indicar el texto o el cdigo que se desea buscar.
En Reemplazar con hay que especificar el texto o el cdigo por el que se
desea cambiar el texto o cdigo buscado.
El reemplazo puede hacerse de varias formas, siempre a travs de los
botones de la derecha de la ventana. Una de ellas es buscar uno por uno cada
uno de los documentos que contengan el cdigo o texto a buscar, y reemplazar
cuando se desee. Para ello se utilizan los botones Buscar sig. y Reemplazar.
Si se desean buscar todos los documentos que contengan dicho texto o
cdigo, y reemplazar en todos ellos, se utilizan los botones Buscar todos y
Reemp. todos.
Cuando se utiliza la opcin Buscar sig., se abre la pgina en la que se
encuentra el texto coincidente, resaltando en el cdigo fuente la lnea en la que
este se encuentra. De este modo podemos decidir uno por uno los cambios a
realizar. Cuando estemos seguros de querer reemplazar pulsaremos sobre
Reemplazar, y cuando no deseemos reemplazar volveremos a pulsar sobre
Buscar sig..
Cuando se utiliza la opcin Buscar
todos se cierra la ventana de Buscar y
reemplazar y se abre un nuevo panel
como el de la derecha, en el que
aparecen todos los documentos en el
que coincide el texto o el cdigo
buscado.
Pulsando sobre el botn vuelve a
abrirse la ventana de Buscar y
reemplazar. Desde dicha ventana
podemos reemplazar en los
documentos encontrados, uno por uno,
con el botn Reemplazar, o bien
reemplazar directamente en todos los
documento encontrados, pulsando
sobre el botn Reemp. todos.
En el panel, cuando se haya
reemplazado en algn documento, ste

96

volver a aparecer en la lista junto con

un crculo verde, que indica que ya ha
sufrido reemplazo.
En ocasiones podemos equivocarnos, al buscar y reemplazar texto o cdigo
errneos. Hay que tener mucho cuidado al utilizar esta herramienta, ya que no
es posible deshacer los cambios en los documentos que estn cerrados
durante la bsqueda y el reemplazo.
En el ejemplo anterior, la persona quera buscar el texto PerrosGatos, y
reemplazarlo por una imagen. En este caso concreto, lo que se desea sustituir
es texto por una imagen, por lo que en Buscar no podramos elegir la opcin
Texto, habra que elegir la opcin Cdigo fuente.
En Reemplazar con, habra que especificar la etiqueta HTML completa
para insertar la imagen. En este caso la etiqueta sera <img
scr="imagenes/logo_animales.gif">, teniendo en cuenta que la imagen se
llama logo_animales.gif y que se encuentra dentro del sitio en la carpeta
imagenes.