Está en la página 1de 389

1

Dreamweaver CS4. Captulo 1. Aspectos bsicos



2












Captulo 1

Aspectos Bsicos











Dreamweaver CS4. Captulo 1. Aspectos bsicos

3

Captulo 1. ASPECTOS BSICOS
1.1. Presentacin
Este curso est pensado para todos los usuarios que desean crear contenidos para Internet
diseando su propia pgina Web. Principalmente est dirigido a aquellas personas que desean
dar sus primeros pasos en el uso de Dreamweaver CS4.
No es necesario haber tenido contacto previo con el programa ni haber realizado una pgina
Web. A travs de los captulos de este manual podremos aprender de forma sencilla, pero
prctica y profunda, como disear nuestra pgina Web y como hacerla visible en Internet. El
desarrollo de los contenidos es secuencial, reforzado con unos ejercicios prcticos para la
consecucin de los objetivos.
No hay que olvidar que es necesario tener conocimientos de Informtica a nivel de usuario.
Tambin es recomendable tener conocimientos bsicos de HTML, aunque esto no es necesario
para realizar el curso con posibilidades de xito.
Este curso, como todos los correspondientes al Proyecto Mentor, disponen de una soporte
telemtico, la mesa de trabajo, que facilita el acceso a los materiales, a las evaluaciones y a
ms ejercicios prcticos. Este entorno de trabajo complementa y actualiza los contenidos del
curso, adems de contar con el seguimiento de un tutor en el proceso de aprendizaje del
alumno.
1.2. Objetivos
Al finalizar este curso, podremos ser capaces de:
Crear, editar y mantener sitios Web de una forma sencilla y eficaz.
Conocer las herramientas de Dreamweaver CS4 para la maquetacin y diseo de
pginas Web.
Alojar nuestro sitio Web en un servidor remoto para que pueda ser visto en Internet.
1.3. Introduccin
El nacimiento de Internet se debe a la necesidad de comunicacin de la comunidad cientfica
para, de forma rpida y efectiva, compartir informacin y conocimientos. Bajo esta demanda
nace ARPAnet, una red del Departamento de Defensa de los Estados Unidos con objetivos
estrictamente militares. Esta red puso a disposicin de la comunidad cientfica una red
anloga, NSFnet, que desarroll un sistema de comunicacin en el que los datos eran
transmitidos en diferentes paquetes, cada uno de ellos con informacin suficiente como para
rehacerse completamente al llegar a su destino. A partir de esto, en la dcada de los 70,
aparece el protocolo de transmisin TCP/IP que controla y lleva a cabo la transferencia de
datos y en l se basan los servicios de Internet y mensajera de correo electrnico. Como
consecuencia de la normalizacin de este protocolo, el nmero de usuarios crece
notablemente y se hacen los primeros planteamientos de conectar todas las redes existentes
en el mundo. El problema radicaba en la necesidad de crear una forma estndar de almacenar
datos que pudiera ser visualizada desde cualquier plataforma informtica. A finales de los 80
se presenta un lenguaje basado en etiquetas que permita visualizar cualquier informacin,
Dreamweaver CS4. Captulo 1. Aspectos bsicos

4

adems de poder insertar imgenes, vdeos. El uso de hipervnculos permita acceder de forma
sencilla a documentos del ordenador local y de ordenadores remotos. Naci el lenguaje de
etiquetas de Hipertexto, conocido por HTML.
Desde entonces el crecimiento de Internet ha sido imparable, entre otras razones, debido a la
aparicin de los mdems de alta velocidad (a ms de 14.400 bps) que facilitaban el acceso y la
interconexin entre ordenadores a travs de la lnea telefnica y al crecimiento de uno de sus
servicios ms populares: la World Wide Web.
1.4. World Wide Web
Una red es un conjunto de dispositivos, principalmente ordenadores, interconectados entre s
para cumplir con una tarea especfica de manera coordinada. Una de las principales
caractersticas de la red es la de compartir e intercambiar informacin entre sus dispositivos.
Internet, considerada como la red de redes, posibilita la comunicacin y el intercambio de
informacin entre ordenadores gracias a la interconexin de redes distribuidas por todo el
mundo. Su trabajo se basa en el sistema cliente-servidor, donde el ordenador local (cliente)
solicita la informacin al ordenador remoto (servidor).
Para que la comunicacin entre los ordenadores sea correcta existen unas determinadas
reglas, llamadas protocolos, que son unos estndares que controlan el trfico de la
informacin a travs de la red, garantizando el intercambio de datos entre los ordenadores.
La World Wide Web, ms conocida como Web, est formada por un conjunto de documentos
interconectados, que se encuentran almacenados en ordenadores dispersos en todo el mundo
y es la encargada de localizar y difundir esta informacin. Ha pasado a ser el medio de
comunicacin mayor y ms libre que existe, abierto a todas las ideas y criterios, es una
autntica fuente de creatividad humana.
Para acceder a la informacin que hay en la red es necesario ejecutar un programa navegador,
tambin conocido como explorador (Internet Explorer, Netscape, Firefox, etc. son algunos
ejemplos de navegadores). El navegador es un programa que interpreta las pginas Web y las
presenta al usuario. Su denominacin de navegador o explorador se debe a que facilita la
localizacin de la informacin navegando o explorando Internet de forma fcil e intuitiva.
Cuando el navegador encuentra una pgina Web, la puede mostrar al usuario porque ha sido
escrita en cdigo HTML (HyperText Markup Lenguaje).
El lenguaje HTML es un lenguaje de marcas de hipertexto que describe la estructura y
contenidos de las pginas Web. Los navegadores interpretan este cdigo y acceden a estos
contenidos en hipertexto utilizando el protocolo http (HyperText Transfer Protocol) o
protocolo de transferencia de hipertexto.
Adems, los navegadores, te permiten acceder a otros tipos de servidores, dependiendo del
protocolo utilizado. Por ejemplo, el protocolo FTP (File Transfer Protocol) que permite la
transferencia de archivos entre ordenadores.
Vamos a aclarar algunos conceptos que se usan en Internet.
Dreamweaver CS4. Captulo 1. Aspectos bsicos

5

TCP/IP
Es un protocolo que realmente est formado por dos protocolos de comunicacin distintos. El
protocolo IP (Internet Protocol) se ocupa de la transmisin unidireccional de paquetes de
datos entre dos dispositivos con direcciones adecuadas al protocolo (llamadas direcciones IP).
El protocolo TCP (Transmission Control Protocol) se ocupa de ordenar estos paquetes de datos
para que lleguen a su destino libres de errores. En otras palabras, cuando un ordenador local
(cliente) solicita una informacin, en el ordenador remoto (servidor) hay un programa TCP que
recibe la informacin antes de enviarla, la divide en paquetes y los enva a la direccin IP del
cliente, siguiendo el protocolo IP. Otro programa TCP en el ordenador cliente recibe los
paquetes de datos, verifica que estn libres de errores y que no falte ninguno. Este proceso se
repite hasta que todos los datos hayan llegado correctamente.
Direcciones IP
Las direcciones IP es la identificacin que se asigna a todo dispositivo conectado a Internet.
Esta identificacin en Internet es nica y tiene una secuencia de cuatro nmeros entre 0 y 255
separados por puntos, por ejemplo, una direccin IP puede ser 62.81.0.1. Al conectarse un
ordenador a Internet est identificado por su IP. Actualmente, para el usuario domstico la IP
no es fija, por lo que al conectarse a Internet, el protocolo de comunicacin le asigna una
direccin IP dinmica, es decir una identificacin de nmeros que permanece mientras dura la
conexin, pero que puede ser distinta con la prxima vez que se conecta a Internet.
DNS
Los DNS (Domain Name Servers) o Servidores de Nombre de dominios son ordenadores que
contienen la base de datos de identificacin de los ordenadores que se conectan a Internet y
asocian la direccin IP a un nombre. Este sistema est basado en la dificultad de asociar una
direccin IP numrica a un servidor de informacin, por lo que se asigna un nombre nico a
cada direccin IP.
Adems, los nombres de dominio pueden ofrecer informacin del ordenador que ofrece la
informacin por la letras que se encuentran al final. Por ejemplo, .es indica que el dominio
pertenece a Espaa, .it a italia, .com a entidades comerciales, .edu a educacin, etc.
Un nombre de dominio lo podemos obtener fcilmente desde un proveedor de Internet. Este
proveedor comprueba si el nombre que deseamos utilizar no est asignado con anterioridad.
Una vez que localizamos un nombre de dominio que est libre, nos podemos registrar y
mientras paguemos una cuota, nuestro nombre de dominio permanecer registrado en la base
de datos de nombres de dominios y reservado de forma preferencial, de tal forma que ningn
otro usuario de Internet podr utilizarlo.
La ventaja principal de obtener y mantener un nombre de dominio es que si decidimos
cambiar de servidor y alojamos nuestro sitio Web en otro, nos podr cambiar la direccin IP
asignada a nuestro nombre de dominio, pero el nombre se mantiene, consiguiendo una
identidad en Internet.
Dreamweaver CS4. Captulo 1. Aspectos bsicos

6

URL
Los URL (Uniform Resource Locators) o Localizadores de Recursos son direcciones nicas que
sirven para localizar un sitio de Internet.
El funcionamiento es sencillo. Estas direcciones (URL) las escribimos en la barra de direcciones
del navegador. El navegador enva la solicitud por Internet.
En la red, unos servidores (root servers) se encargan de direccionar estas peticiones, los
servidores DNS establecen la correspondencia entre los nombres y las direcciones IP. Una vez
llega la peticin al ordenador remoto (servidor), localiza en su directorio la informacin
solicitada y la devuelve al ordenador local (cliente).
La Web utiliza los URL para especificar las direcciones de diversos servidores en Internet y los
documentos ubicados en cada uno de ellos. Por ejemplo, el URL del Aula Mentor es
http://www.mentor.mec.es. Veamos que significa:
http: es el protocolo utilizado para el intercambio de informacin.
www: es el acrnimo de World Wide Web.
mentor. mec. es: se corresponde con el dominio donde se encuentran los datos
solicitados.
o es: nos indica que este dominio es de Espaa.
o mec: pertenece al Mec (Ministerio de Educacin).
o mentor: pertenece al servidor del Aula Mentor.
A veces el URL puede indicar una ruta ms detallada, dependiendo de donde se encuentre la
informacin que solicitemos. Por ejemplo, la direccin URL
https://centrovirtual.educacion.es/mentor/cursos/curso_iniciacion_proces_text.html nos
indica que dentro del servidor del Aula Mentor, en la direccin /cursos, podemos localizar el
documento curso_iniciacion_proces_text.html.
1.5. HTML
El elemento bsico de la Web es la pgina Web. La pgina Web no es ms que un archivo de
texto en lenguaje HTML. La caracterstica ms importante es que la informacin desarrollada
en HTML puede verse desde cualquier navegador y desde cualquier plataforma, adems, de
que la elaboracin de un documento HTML se puede hacer desde un sencillo editor de textos.
La principal dificultad a la hora de elaborar un documento HTML ser conocer la estructura
que deben tener las pginas Web as como las etiquetas que definen el diseo de la pgina,
adems, cada vez que incorporemos un elemento a nuestra pgina, deberemos comprobar los
resultados en un navegador para encontrar posibles errores y depurar el diseo.
A pesar de las ventajas descritas anteriormente, HTML tiene sus limitaciones, la estructuracin
de los documentos, la insercin de imgenes y la interactividad estn limitadas.
Las pginas Web tenan un aspecto muy esttico, slo las imgenes con formato GIF animado
daban algo de dinamismo, pero con el inconveniente de su gran tamao, lo que limitaba su
utilizacin para no demorar en exceso el tiempo de descarga de las pginas. Para resolver este
Dreamweaver CS4. Captulo 1. Aspectos bsicos

7

problema, aparecen nuevos recursos que proporcionan otras posibilidades de diseo
desconocidas hasta entonces.
CSS (Cascading Style Sheets) u hojas de estilo en cascada es un lenguaje que nos permite
definir estilos de formato a los elementos de un documento, como por ejemplo tipografas,
mrgenes, espacios, etc. Se utiliza en las ltimas versiones de los navegadores de Netscape y
Microsoft.
JavaScript es un lenguaje orientado a mejorar pginas Web creando acciones como la
revisin de formularios, efectos en la barra de estado, efectos de men, etc. JavaScript es un
lenguaje de comandos para mltiples navegadores y plataformas que es interpretado en el
ordenador local (cliente). Desarrollado por Netscape, el cdigo de JavaScript se inserta
directamente en una pgina HTML.
En captulos posteriores profundizamos en estos lenguajes. La combinacin de HTML con CSS y
JavaScript da origen a DHTML (Dynamic HTML).
1.6. Dreamweaver
Para crear pginas Web de forma cmoda y sencilla existen unos programas de edicin visual
que, en un entorno grfico, muy intuitivo, nos permiten disearla fcilmente, con la posibilidad
de poder editar el cdigo HTML que se est generando.
Dreamweaver es un programa para la edicin de HTML de tipo WYSIWYG (What You See Is
What You Get). Esto significa que si cambiamos algo en pantalla dentro de Dreamweaver, los
resultados se muestran de inmediato. Si lo hiciramos manualmente con el cdigo HTML,
tendramos que lanzar el navegador para ver los resultados. No obstante Dreamweaver nos
permite controlar manualmente el cdigo HTML mediante la vista cdigo del documento que
estemos elaborando.
Dreamweaver es una herramienta excelente para el desarrollo de aplicaciones para la Web y la
creacin rpida de formularios, marcos, tablas y otros objetos, pero donde realmente destaca
es en el HTML Dinmico (DHTML).
Dreamweaver CS4, en el momento de elaborar este curso, es la ltima versin del programa
cuyas novedades principales son:
Vista en vivo: Dreamweaver CS4 permite disear pginas Web en condiciones reales
de navegador con la nueva Vista en vivo, al tiempo que mantiene el acceso directo al
cdigo. Los cambios realizados en el cdigo se reflejan de inmediato en la pantalla
mostrada.
Sugerencias para el cdigo de los frameworks Ajax y JavaScript: Ahora podemos
escribir cdigo JavaScript con mayor rapidez y precisin y con compatibilidad mejorada
para objetos centrales y tipos de datos simples de JavaScript. Tambin cuenta con una
funcionalidad ampliada de mediante la incorporacin de frameworks JavaScript muy
utilizados, como jQuery, Prototype y Adobe Spry.
Archivos relacionados y navegador de cdigo: permite administrar de manera eficiente
los distintos archivos que conforman las pginas Web de hoy en da. Se puede pulsar
Dreamweaver CS4. Captulo 1. Aspectos bsicos

8

sobre cualquier archivo relacionado para ver su cdigo fuente en la vista Cdigo y la
pgina padre en la vista Diseo. La nueva funcin de Navegador de cdigo muestra
todas las fuentes de cdigo que afectan a la seleccin, como reglas CSS (hojas de
estilos en cascada), server-side includes, funciones JavaScript externas, plantillas de
Dreamweaver, archivos de origen de iFrame, etc.
Edicin en Contexto: se puede permitir a los usuarios finales realizar modificaciones
sencillas en nuestras pginas Web sin necesidad de recurrir al webmaster ni utilizar
software adicional. El diseador puede limitar los cambios a pginas especficas,
regiones determinadas e incluso opciones de formato personalizadas de manera
rpida y sencilla.
Prcticas recomendadas en relacin con CSS: El inspector de propiedades CS4 permite
crear nuevas reglas CSS y ofrece explicaciones claras y sencillas del lugar que ocupa
cada propiedad en la cascada de estilos.
Conjuntos de datos HTML: se puede incorporar la potencia de los datos dinmicos a las
pginas Web sin necesidad de invertir tiempo en el aprendizaje de bases de datos o de
la codificacin XML (Extensible Markup Language: lenguaje de marcado extensible).
Los conjuntos de datos de Spry reconocen el contenido de una tabla HTML sencilla
como una fuente de datos interactiva.
Nueva interfaz de usuario: podemos usar los diferentes componentes de Adobe
Creative Suite 4 de forma ms rpida y racional con un diseo comn de interfaz de
usuario y cambiar rpidamente entre entornos de trabajo con el conmutador de
espacios de trabajo.
Esta nueva versin CS4, adems de incorporar las novedades citadas anteriormente, ha dejado
de usar funciones que s existan en versiones ms antiguas, concretamente las que se citan a
continuacin:
Lneas de tiempo
Servicios Web
Modo de diseo
Vista Mapa del sitio
Compatibilidad con Java Bean
Elementos de Adobe Flash (Visor de imgenes)
Texto de Adobe Flash y botones de Adobe Flash
Comportamientos de servidor y juegos de registros ASP.NET y JSP
Requisitos del sistema
Hay una versin de Dreamweaver CS4 2004 para Windows y otra para Macintosh. Las
caractersticas son:
Para Windows
o Procesador a 1 GHz o ms rpido
o Microsoft Windows XP con Service Pack 2 (se recomienda Service Pack 3) o
Windows Vista Home Premium, Business, Ultimate o Enterprise con Service
Pack 1 (certificado para ediciones de Windows XP y Windows Vista de 32 bits)
Dreamweaver CS4. Captulo 1. Aspectos bsicos

9

o 512 MB de RAM
o 1 GB de espacio disponible en el disco duro para la instalacin; se necesita
espacio libre adicional durante la instalacin (no se puede instalar en
dispositivos de almacenamiento basados en Flash)
o Pantalla de 1.280 x 800 con tarjeta de vdeo de 16 bits
o Unidad de DVD-ROM
o Conexin a Internet de banda ancha necesaria para los servicios en lnea
Para Mac OS
o Procesador PowerPC G5 o Intel multincleo
o Mac OS X v10.4.1110.5.4
o 512 MB de RAM
o 1,8 GB de espacio disponible en el disco duro para la instalacin; se necesita
espacio libre adicional durante la instalacin (no se puede instalar en un
volumen que utilice un sistema de distincin entre maysculas y minsculas en
archivos o en dispositivos de almacenamiento basados en Flash)
o Pantalla de 1.280 x 800 con tarjeta de vdeo de 16 bits
o Unidad de DVD-ROM
o Conexin a Internet de banda ancha necesaria para los servicios en lnea
Instalacin
Este programa lo podemos conseguir desde la propia pgina de Adobe,
http://www.adobe.com/es/products/dreamweaver/?promoid=BPBIO, bien comprando el
paquete o descargando una versin de prueba.
La instalacin de este programa es muy sencilla, en el caso de que contemos con un CD fsico,
pues la mayora de los sistemas detectan el CD ROM de forma automtica y se lanza el
instalador de la aplicacin.
Si tenemos desactivada esta opcin, hacemos doble clic en Mi PC (icono que se suele
encontrar en el escritorio de nuestro sistema).

Figura 1.1. Icono de Mi PC en el escritorio
Si no tuviramos el icono de Mi PC en el escritorio, tambin lo podemos localizar desde el
men Inicio. Una vez abierta la ventana localizamos la unidad lectora de CD/DVD, hacemos
doble clic para abrirla y seguidamente localizamos y ejecutamos con doble clic el fichero
Instalador de Dreamweaver CS4.

Figura 1.2 Seleccionando el instalador de Dreamweaver CS4.
Dreamweaver CS4. Captulo 1. Aspectos bsicos

10

Tambin lo podemos realizar desde la opcin Ejecutar, del men Inicio de Windows. Con el
botn Examinar localizamos el fichero Instalador de Dreamweaver CS4, lo seleccionamos y
hacemos clic en Aceptar para que comience el proceso de instalacin.
Si nos descargamos la versin de prueba de la web de Adobe, una vez que accedemos a
Descargas e iniciamos sesin como usuarios registrados en la misma, simplemente
desplegamos Seleccionar para elegir idioma y Sistema Operativo y despus pulsamos en
Descargar y seguimos los pasos que van apareciendo en pantalla referentes al proceso de
descarga, seleccionando la ubicacin en nuestro equipo donde deseamos guardar los archivos
de dicha descarga. A modo de ejemplo, en nuestro curso hemos seleccionado el Escritorio.

Figura 1.3. Descarga de la versin de prueba de la web de Adobe
En cualquier caso, cuando lanzamos el instalador de Dreamweaver, el programa extrae los
archivos que contiene y aparece la pantalla de bienvenida del instalador.

Figura 1.4. Bienvenida a la instalacin de CS4.
Dreamweaver CS4. Captulo 1. Aspectos bsicos

11


Si tenemos un nmero de serie porque hemos comprado el producto podemos introducirlo en
los campos pertinentes y una vez tecleado, automticamente aparecer el icono que
indica que el nmero es vlido. En caso contrario, activaremos la casilla Deseo Instalar y usar
Adobe Dreamweaver CS4 en evaluacin.
Al hacer clic en el botn Siguiente, nos aparece el Contrato de licencia, que nos pide leer
cuidadosamente y si estamos de acuerdo en sus trminos, hacemos clic en el botn Aceptar,
para continuar el proceso de instalacin. Lgicamente si no estamos de acuerdo con el
Contrato de licencia, el proceso de instalacin se detiene y se cierra el programa.

Figura 1.5. Trminos del contrato de licencia.
Siguiendo con el proceso de instalacin, la siguiente ventana nos muestra las opciones de
instalacin, la ubicacin donde se alojar la aplicacin y los idiomas de instalacin disponibles.
Si queremos cambiar el destino de la ubicacin de instalacin, desde el botn Cambiar
podemos modificar su ubicacin.
Dreamweaver CS4. Captulo 1. Aspectos bsicos

12


Figura 1.6. Eligiendo las opciones de instalacin.
Si estamos conformes con el destino que nos propone la instalacin del programa o si hemos
modificado la ubicacin, con el idioma de la instalacin, as como con todas las opciones de
instalacin marcadas, slo nos quedar pulsar en el botn Instalar y comenzar el progreso de
instalacin, que podemos observar en pantalla.
Dreamweaver CS4. Captulo 1. Aspectos bsicos

13

Figura 1.7. Progreso de instalacin.
Cuando haya finalizado este proceso de instalacin, nos aparece una ltima ventana indicando
que dicho proceso ha finalizado. Hacemos clic en Finalizar.

Figura 1.8. Finalizacin de la instalacin de Dreamweaver.

Dreamweaver CS4. Captulo 1. Aspectos bsicos

14

1.7. Consideraciones previas
Una vez instalado Dreamweaver y antes de comenzar a trabajar vamos a reflexionar sobre
unas recomendaciones previas. Puede que algunas de las siguientes consideraciones y
reflexiones parezcan extraas, conforme vayamos avanzando en el curso iremos descubriendo
el autntico sentido y la razn de ellas.
La finalidad principal al disear una pgina Web es hacer que nuestra informacin llegue al
usuario final. La forma como queremos presentar nuestra informacin es el principal objetivo
del diseo.
Una vez que tenemos clara la idea que deseamos hacer una pgina Web, lo primero que
deberemos realizar es un boceto sobre el trabajo que vayamos a desarrollar. En el boceto
debemos contemplar aspectos como el contenido, la distribucin, colores, etc. Seguidamente
veremos unas recomendaciones para desarrollar este contenido con mayores garantas de
xito.
Adems del boceto, tambin deberemos crear en nuestro ordenador una carpeta donde ir
almacenando todos los ficheros que se generen, con las carpetas y subcarpetas necesarias
para los distintos tipos de ficheros que componen la Web: imgenes, sonidos, textos, etc.
La creacin de esta carpeta no significa que todo lo que almacenemos en ella, necesariamente
lo debamos alojar en Internet. Los contenidos definitivos que alojaremos en Internet y que se
podrn ver con un navegador desde cualquier lugar del mundo sern los que constituyan
nuestro Sitio local. La creacin del Sitio local la veremos en un captulo posterior.
Una vez que tenemos clara estas ideas principales, debemos tener presente algunas
consideraciones:
Los contenidos
Es la parte ms importante de la Web. Debemos tener presente el tipo de contenidos que
vamos a presentar y a quien va dirigido. No es lo mismo presentar contenidos para publicitar
una empresa de venta de productos para la oficina o similar que presentar contenidos para un
estudiante de una carrera universitaria.
Estructurar la informacin
Teniendo en cuenta el punto anterior, debemos recordar que para realizar la pgina Web
utilizamos hipertexto y esto nos va a permitir desplazarnos con un simple clic del ratn.
Necesitaremos tener una estructura de nuestra Web de forma que el usuario est
perfectamente orientado en todo momento y encuentre una relacin lgica entre el conjunto
de pginas de nuestro sitio con la que se encuentra visitando. La inclusin de ndices y la
creacin de botones de navegacin facilitarn esta tarea.
Configuracin del documento
El documento que hemos generado, se ver por el usuario en la pantalla de su ordenador,
pero no todos los monitores soportan la misma resolucin. Deberemos tener la precaucin de
Dreamweaver CS4. Captulo 1. Aspectos bsicos

15

comprobar nuestro documento en distintas pantallas, con distintas resoluciones, pues no es lo
mismo una pantalla de un monitor de 14 con una resolucin 800 x 600 pxeles que un
monitor de 19 y resolucin 1280 x 1024 pxeles. Deberemos conseguir encontrar el equilibrio
para que la informacin ms relevante aparezca nada ms acceder a nuestra Web.
Longitud de las pginas
Las pginas deben ser lo ms claras y cortas posibles. Deberemos tener la precaucin de no
sobrepasar la longitud de una pgina ms all de 4 pantallas, pues corremos el riesgo de que el
usuario se canse y llegue a aburrirse de ver pasar mucha informacin delante de sus ojos. Para
conseguir esto, podemos dividir su contenido en varias pginas, adems de ayudarnos de un
ndice de contenidos al principio del documento con enlaces a cada una de sus partes.
Los enlaces
Los enlaces que vamos a insertar en nuestra Web deben tener un nombre significativo y a ser
posible con la misma informacin que el ttulo del documento al que accede. Debemos
considerar que a veces una sola palabra enlazada puede perder significado, lo mismo puede
ocurrir si creamos un enlace de una frase completa. Los enlaces externos a nuestra Web,
deberemos revisarlos peridicamente por si cambian de direccin URL y pierden su
operatividad. Es muy recomendable no cambiar los colores estndar de los enlaces, as como
evitar el uso de estos colores en partes del texto que no estn enlazadas. Evitaremos confusin
entre los visitantes a nuestra Web.
La tipografa
No debemos perder la idea que al escribir nuestro documento, ste ser visualizado en la
pantalla de un ordenador, para ello el tipo de letra no deber ser muy grande para evitar que
las pginas sean excesivamente largas, pero a la vez que no sea muy pequea que genere
problemas de lectura.
Podemos facilitar la lectura de nuestro documento con una buena estructuracin del mismo,
utilizando ttulos en cada seccin, creando pequeos prrafos con lneas no muy extensas y
procurando que las fuentes sean soportadas por los distintos navegadores y plataformas
existentes. Si queremos insertar alguna fuente especial para algn logotipo o similar,
deberemos convertirlo en imagen para asegurar su correcta visualizacin.
Adems de lo anterior, tambin deberemos cuidar no usar excesivamente las maysculas, las
negritas, cursivas, ni mucho menos el subrayado, pues este elemento es utilizado para indicar
un enlace.
Para resaltar alguna parte del texto, podemos cambiar el color de la fuente o bien realizar un
sangrado sobre el prrafo que deseamos destacar, adems de poder utilizar un color de fondo
de prrafo.
El uso de efectos especiales en los prrafos, como puede ser el texto parpadeante, no es
aconsejable utilizarlo pues puede llegar a ser molesto, adems que no facilita su lectura.
Dreamweaver CS4. Captulo 1. Aspectos bsicos

16

Si es interesante combinar el texto con imgenes para hacer ms amena su lectura, pero
teniendo la precaucin que las imgenes sean pequeas y acordes al texto.
Las imgenes
Al crear nuestra Web deberemos valorar la insercin de imgenes en nuestra pgina, pues
pueden llegar a tardar bastante tiempo en cargarse en un navegador, sobre todo dependiendo
del tipo de conexin utilizado por el usuario.
Para que la pgina se considere rpida en su carga, no debemos sobrepasar un tamao
superior a los 50 Kb. Teniendo en cuenta esto y sabiendo que cuanto mayor calidad tiene una
imagen, mayor tamao ocupa, deberemos encontrar un equilibrio entre la calidad y el tamao.
Para modificar el tamao de una imagen, deberemos hacerlo desde un programa especfico y
lo conseguiremos cambiando el tamao de la misma o bien reduciendo su calidad. Un
procedimiento muy utilizado, cuando es importante la calidad de la imagen, es utilizar una
pequea imagen, tipo icono, informando de las caractersticas de la imagen real y con un
enlace a la misma, de forma que el usuario que est interesado en verla con detalles, puedan
acceder voluntariamente a ello.
Los colores
Debemos procurar utilizar con armona los colores de nuestra pgina, de tal forma que sobre
un fondo claro pongamos texto oscuro, que sera la opcin ms recomendada. Tambin se
debe utilizar sobre fondos oscuros el texto de color claro, pero esto no es muy recomendable
para aquellas pginas que el texto sea dominante.
Si debemos procurar no utilizar colores estridentes ni combinaciones que dificulten la
legibilidad del texto. Si utilizamos una imagen como fondo de nuestra pgina Web, deberemos
tener los mismos criterios anteriores.
Los marcos
La divisin de la pgina en marcos, nos ayuda a distribuir mejor los contenidos de la misma,
pero debemos utilizarlos con cautela ya que no todos los navegadores soportan marcos,
adems reducen considerablemente el espacio til de visualizacin de la informacin. De
todas formas, si decidimos su uso, deberemos tener la precaucin de evitar la rigidez de los
marcos, as como el abuso de los mismos. Si hacemos algn enlace externo a nuestra Web,
deberemos procurar que se carguen en una pgina nueva, de esta forma se respeta su estilo
as como aspectos ms negativos si adems la pgina enlazada tiene a su vez otros marcos.
Los navegadores
Es importante saber que en el mercado existen diferentes navegadores con diferencias
notables entre ellos. Aunque bsicamente los estndares del formato HTML son respetados
por todos, la inclusin de nuevos elementos puede que sean soportados por unos y no por
otros. Por esto, cuanto ms simple sea nuestra pgina, ms posibilidades tendremos que sea
visualizada por mayor nmero de navegadores.

Dreamweaver CS4. Captulo 1. Aspectos bsicos

17

Los nombres
Deberemos tener especial cuidado a la hora de poner nombre a nuestros ficheros. Existen en
el mercado distintos sistemas operativos que distinguen las maysculas y las minsculas, as
como las extensiones de los ficheros. Puede que, si estamos trabajando en Windows, no
tengamos mucha dificultad en ver las pginas y acceder a los enlaces de la misma, pero para
otros sistemas operativos no es lo mismo los siguientes nombres: fichero, Fichero, FICHERO.
Tampoco es lo mismo si ponemos la extensin htm que html. Deberemos evitar poner en los
nombres de los ficheros caracteres especiales como , , /, , etc., tampoco dejaremos
espacios en blanco y no utilizaremos las tildes. Como norma general sera poner el nombre en
minsculas y seguir un criterio uniforme para la extensin de los ficheros, por ejemplo
foto0001.jpg, inicio.html, pagina_primera.html.
Otros ficheros
A veces tenemos la necesidad de alojar en nuestro servidor ficheros distintos a los utilizados
de forma genrica en el diseo Web, como por ejemplo ficheros doc, pdf, zip, etc. En este
caso, los enlaces funcionan exactamente igual, lanzando la aplicacin asociada a cada tipo de
archivo. No obstante, tambin puede dar la opcin de poder guardar este fichero en modo
local en nuestro ordenador. Este tipo de ficheros es interesante utilizarlos siempre que
tengamos la certeza que nuestros usuarios disponen de forma genrica el programa asociado a
los mismos, en caso contrario, lo mejor sera transformarlos a formato HTML y alojarlos como
una pgina ms de la Web.
La difusin
Poner nuestra Web en un servidor no significa que llegue a todos los usuarios potenciales.
Necesitamos difundir nuestra pgina de forma que los usuarios al utilizar los motores de
bsqueda, la encuentren fcilmente. Para ello deberemos poner claramente el ttulo del
documento, introducir algunas palabras claves en la etiqueta <meta>, describir lo ms
significativamente el contenido de la Web en las primeras lneas de la pgina y darnos de alta
en los motores de bsqueda que podamos.
La actualizacin
Una de las principales caractersticas de las Web es la posibilidad de actualizar la informacin
en un instante. Generalmente un pgina web tiene un trabajo de actualizacin que no termina
nunca, se debe evitar a toda costa que la informacin caduque y de esta forma nuestra pgina
pierda inters por obsoleta. Es muy recomendable indicar en la pgina la fecha de la ltima
modificacin para que el usuario est informado de la puesta al da de la misma.
Los accesos
Por ltimo, no debemos olvidar nunca que nuestra pgina Web va a llegar al usuario a travs
de una red de comunicaciones, que no siempre es tan rpida como deseramos. Debemos
cuidar que el tamao de las pginas no sea excesivamente grande (50 Kb) as como facilitar el
acceso a la informacin, para que no se convierta en un tarea llena de esperas a que se cargue
una pgina tras otra hasta llegar donde realmente queremos.


18












Captulo 2

Entorno de Trabajo

Dreamweaver CS4. Captulo 2. Entorno de Trabajo

19

Captulo 2. ENTORNO DE TRABAJO
2.1. Inicio
Al iniciar Dreamweaver aparece la siguiente ventana:

Figura 2.1. Pgina de inicio al abrir Dreamweaver.
En ella puedes llevar a cabo varias acciones.
Abrir un elemento reciente que hayas guardado en tu equipo previamente
Crear nuevos documentos de diversos tipos: html, ColdFusion, PHP, ASP VbScript, XSLT, CSS,
JavaScript, XML
Crear un sitio web nuevo
Obtener ms tipos de documentos a crear si pulsas en el icono Ms para abrir el
siguiente cuadro de dilogo:
Dreamweaver CS4. Captulo 2. Entorno de trabajo

20


Figura 2.2. Cuadro de dilogo Nuevo Documento
o Navegar por Elementos Destacados, que te llevarn a vdeos explicativos en ingls disponibles
desde la web de Adobe TV.
o Visitar vnculos en los que se explica cmo empezar a trabajar, las novedades y recursos de la
versin as como acceder al Exchange de Dreamweaver en el que se pueden intercambiar diversos
extras para el programa
o Desactivar la pgina de inicio para que no vuelva a aparecer cuando abramos el programa de
nuevo. Si ms adelante deseas que se vuelva a mostrar debes hacer lo siguiente:
o En el men Edicin, ejecuta el comando Preferencias. Tambin lo puedes hacer con
Ctrl+U.
Dreamweaver CS4. Captulo 2. Entorno de trabajo

21


Figura 2.3. Seleccionando preferencias.
o Selecciona General en el cuadro Categora.
o Activa la casilla Mostrar pantalla de bienvenida.
o Haz clic en Aceptar.

Dreamweaver CS4. Captulo 2. Entorno de trabajo

22


Figura 2.4. Activando mostrar pantalla de bienvenida.
2.2. Espacio de trabajo
El espacio de trabajo en Dreamweaver CS4 es un espacio integrado en una nica ventana.

Figura 2.5. Espacio de trabajo.
Todos los elementos se pueden cerrar, abrir y cambiar de posicin para facilitar el trabajo.
Veamos la utilidad de los mismos.
Dreamweaver CS4. Captulo 2. Entorno de trabajo

23

Ventana de Documento
Muestra el documento actual mientras se est creando y editando.
2.3. Barras
Barra de Aplicacin
A lo largo de su parte superior, la ventana de la aplicacin contiene un conmutador de espacios de trabajo,
mens (slo Windows) y otros controles de aplicacin

Figura 2.6. Barra de aplicacin.
Barra de Mens
Nos permiten acceder a todos los comandos que se utilizan en la aplicacin, agrupados en mens
desplegables. Algunas de las operaciones que podemos hacer desde estos mens es preferible hacerlas
desde los paneles.

Figura 2.7. Mens
El men Archivo contiene comandos para abrir, cerrar, guardar, importar y exportar archivos,
compartir la pantalla, imprimir cdigo, entre otros. Tambin contiene otros comandos para la
visualizacin, comprobacin o manipulacin del documento actual.
El men Edicin incluye los comandos Deshacer, Rehacer, Cortar, Copiar, Pegar, Seleccionar, Buscar,
Reemplazar, comandos de manipulacin del Cdigo, Editar con un editor externo, Bibliotecas de etiquetas,
adems del comando Preferencias.
El men Ver selecciona las vistas de trabajo del documento (vistas diseo y/o cdigo). Muestra y oculta
diversos tipos de elementos de pgina y herramientas de Dreamweaver.
El men Insertar se corresponde con la Barra Insertar. Desde este men tambin puedes insertar objetos
en el documento.
El men Modificar te permite cambiar las propiedades de los objetos seleccionados. Puedes editar los
atributos de etiquetas, cambiar las tablas y realizar diversas operaciones relacionadas con elementos de
bibliotecas y plantillas.
El men Formato da acceso a las propiedades del tratamiento de texto. Tambin se puede acceder a
ellas a travs del Inspector de Propiedades de un texto previamente seleccionado.
El men Comandos te ofrece tiles comandos, como limpiar cdigos HTML y XHTML, ordenar una tabla,
extraer javascript, crear un albm de fotos web, etc.
Dreamweaver CS4. Captulo 2. Entorno de trabajo

24

El men Sitio ofrece elementos para administrar un sitio Web, colocar, localizar, proteger y desproteger
archivos.
El men Ventana proporciona acceso a todos los paneles, inspectores y ventanas de Dreamweaver.
El men Ayuda contiene accesos a la documentacin, foros y asistencia en lnea de Dreamweaver as
como la posibilidad de registrar el software, acceder al Exchange, administrar extensiones, etc.
Adems de los mens, Dreamweaver proporciona mens contextuales, de acceso sencillo a tiles
comandos relacionados con la seleccin o el rea que se est trabajando. A medida que avancemos en el
aprendizaje de Dreamweaver, iremos explicando cmo utilizarlos.
Barra Insertar
Esta barra contiene botones para la insercin de diversos tipos de elementos comunes de pginas Web.
Como esta Barra contiene numerosos elementos se ha dividido en varias categoras. Por defecto se
visualizan como fichas

Figura 2.8. Barra Insertar en modo fichas. Categora Comn.
y la primera pertenece a la categora Comn; si deseamos ver las categoras como un men, simplemente
tendramos que seleccionar una ficha, y con el botn derecho del ratn, pulsar en Mostrar como men
para cambiar el modo de vista.

Figura 2.9. Barra Insertar en modo men. Categora Comn.
Las categoras que te puedes encontrar en la Barra Insertar son:
La categora Comn permite crear e insertar los objetos que se utilizan con ms frecuencia, como
vnculos, vnculo a correo electrnico, anclajes, regla horizontal, tablas, imgenes y diversos medios,
plantillas, etiquetas, scripts.
o La categora Diseo permite insertar tablas, etiquetas div, Div Pas (capas) y marcos. Tambin puede
elegir entre dos vistas de las tablas: Estndar (valor predeterminado), y Ampliada.

Figura 2.10. Barra Insertar en modo men. Categora Diseo.
Dreamweaver CS4. Captulo 2. Entorno de trabajo

25

o La categora Formularios contiene botones que permiten crear formularios e insertar elementos de
formulario.

Figura 2.11. Barra Insertar en modo men. Categora Formularios.
o La categora Datos permite importar datos de tabla, insertar y manipular registros, y la autenticacin de
usuarios entre otras funciones.

Figura 2.12. Barra Insertar en modo men. Categora Datos.
o La categora Spry permite insertar y manipular datos de Spry. Spry es un nuevo framework de Ajax,
unas libreras Javascript para diseadores, que no requiere ms que conocimientos bsicos de HTML,
CSS y Javascript.



Figura 2.13. Barra Insertar en modo men. Categora Spry.

o La categora InContext Editing permite la edicin en contexto, por ejemplo administrando clases CSS.

Figura 2.14. Barra Insertar en modo men. Categora InContext Editing.

o La categora Texto permite insertar diversas etiquetas de formato de texto.

Figura 2.15. Barra Insertar en modo men. Categora Texto.
o La categora Favoritos permite agrupar y organizar los botones de la Barra Insertar que utilizamos con
ms frecuencia en un lugar comn.

Figura 2.16. Barra Insertar en modo men. Categora Favoritos.
Sobre esta barra podemos hacer clic con el botn derecho y nos aparece un cuadro de dilogo
.
Dreamweaver CS4. Captulo 2. Entorno de trabajo

26

Al seleccionar Personalizar favoritos.., nos aparece un nuevo cuadro de dilogo con todas las categoras y
objetos disponibles de la Barra Insertar.
Desde aqu podemos aadir aquellos objetos que ms utilicemos al disear nuestra Web y as crear nuestra
barra personalizada.

Figura 2.17. Personalizar objetos favoritos.
o La categora Iconos de Colores nos permite ver los iconos en color
si est actividad, o en blanco y negro si la desactivamos.

o La categora Mostrar como fichas nos presentar todas las categoras de la Barra Insertar como fichas,
tal y como veamos en la Figura 2.8.

Para insertar cualquiera de los objetos de las categoras de la Barra Insertar podemos hacerlo de varias
formas:

Arrastrando directamente el objeto desde la categora correspondiente de la Barra Insertar hasta la
ventana del documento.

Haciendo clic sobre el botn del objeto y ste se insertar en el lugar donde se encuentre el cursor.

Desde el men Insertar.

Barra de Herramientas Documento

Contiene botones que proporcionan opciones para diferentes vistas de la ventana de documento (como la
vista Diseo y la vista Cdigo), diversas opciones de visualizacin y algunas operaciones comunes como la
obtencin de una vista previa en un navegador.
Dreamweaver CS4. Captulo 2. Entorno de trabajo

27



Figura 2.18. Barra de herramientas Documento.

Nombre del fichero: ttulo del fichero con que hemos guardado nuestro documento en el disco duro.

Mostrar vista de cdigo: presenta nuestro documento en cdigo fuente de HTML.

Mostrar vistas de cdigo y diseo: divide la ventana del documento presentando el cdigo fuente en la
parte superior y el diseo en la parte inferior.

Mostrar vista de diseo: presenta el documento con los objetos en modo grfico, tal como lo vamos
diseando.

Cambiar de la vista de diseo a la vista en vivo: La vista en vivo, similar a la vista diseo, muestra una
representacin ms realista de la apariencia que tendr el documento en un navegador y permite
interactuar con el documento de la misma forma que lo haramos en un navegador. La vista en vivo no
es editable. No obstante, se pueden realizar modificaciones en la vista cdigo y actualizar la vista en
vivo para ver los cambios.

Cdigo en vivo: Slo est disponible al visualizar un documento en la vista en vivo. La vista cdigo en
vivo muestra el cdigo que un navegador utiliza para ejecutar la pgina y cambia dinmicamente
conforme se interacta con la pgina en la vista en vivo. La vista cdigo en vivo no es editable.

Ttulo de la pgina: ttulo que le hemos puesto a nuestro documento y est contenido dentro del cdigo
HTML de la misma.

Administracin de archivos: a travs de diversos comandos podremos obtener, proteger, colocar, etc. el
archivo activo en la ventana.

Vista previa: podemos visualizar el documento en diversos navegadores.

Actualizar vista diseo: actualiza el documento en vista diseo despus de haber efectuado cambios en
la vista de cdigos.

Ver opciones: podemos definir las opciones de las vistas de cdigo y diseo. Estas opciones estn en
funcin de la vista activa.

Ayudas visuales: permite utilizar distintas ayudas visuales para el diseo de las pginas.

Validar formato: permite validar el documento actual o una etiqueta seleccionada.

Dreamweaver CS4. Captulo 2. Entorno de trabajo

28

Comprobar compatibilidad con navegadores: permite comprobar si el CSS es compatible con diferentes
navegadores.

Barra de Herramientas Estndar

(No se muestra en el diseo de espacio de trabajo predeterminado.) Contiene botones para las operaciones
ms habituales de los mens Archivo y Edicin: Nuevo, Abrir, Examinar en Brigde, Guardar, Guardar todo,
Imprimir cdigo, Cortar, Copiar, Pegar, Deshacer y Rehacer. Para mostrar la barra de herramientas
Estndar, seleccionamos Ver > Barras de herramientas > Estndar.


Figura 2.19. Seleccionar barra de herramientas Estndar desde men Ver.

Una vez seleccionada, sta nos aparece debajo de la Barra de herramientas Documento con sus
correspondientes botones, que se utilizan igual que los comandos de men equivalentes.


Figura 2.20. Barra de Herramientas Estndar.


Barra de Estado
La barra de estado, situada en la parte inferior de la ventana del documento, proporciona informacin
adicional sobre el documento que est creando.



Figura 2.21. Barra de Estado.

o El selector de etiquetas permite un fcil acceso a las etiquetas HTML de cualquier objeto del
Documento.

o La herramienta seleccionar activa y desactiva la herramienta Mano.

Dreamweaver CS4. Captulo 2. Entorno de trabajo

29


o La herramienta mano permite hacer clic en el documento y arrastrarlo por la ventana de documento.

o La herramienta zoom y el men emergente establecer nivel de aumento permiten establecer un nivel
de aumento para el documento.


El men emergente tamao de ventana (no disponible en la vista cdigo) permite cambiar el tamao de
la ventana de documento a dimensiones predeterminadas o personalizadas.



Figura 2.22. Men emergente Tamao de ventana.

Una vez que editemos los tamaos, se nos abrir el cuadro de dilogo Preferencias con la Categora Barra
de estado seleccionada, con los distintos Tamaos de ventana y la posibilidad de modificar la velocidad de
conexin.


Figura 2.23. Preferencias Barra de estado.
Dreamweaver CS4. Captulo 2. Entorno de trabajo

30


Los tamaos disponibles en el men, indican la dimensin estndar de los navegadores ms conocidos y su
resolucin entre parntesis.

Tamao del documento y tiempo de descarga: muestra la estimacin del tamao del documento y del
tiempo de descarga de la pgina, incluidos todos los archivos dependientes, como imgenes y otros
archivos multimedia. Depende de la velocidad de conexin que hayamos configurado en la ventana
anterior.

El indicador de codificacin muestra la codificacin del texto del documento actual.
Barra de Herramientas Codificacin
La barra de herramientas Codificacin contiene botones que permiten realizar numerosas operaciones de
codificacin estndar, como ampliar y contraer las selecciones de cdigo, resaltar cdigo no vlido, insertar
o eliminar comentarios, aplicar sangra al cdigo e insertar fragmentos de cdigo utilizados recientemente.
La barra de herramientas Codificacin aparece verticalmente en la parte izquierda de la ventana de
documento y slo est visible cuando se muestra la vista Cdigo.


Figura 2.24. Barra de herramientas Codificacin.
Dreamweaver CS4. Captulo 2. Entorno de trabajo

31

No se puede mover la barra de herramientas Codificacin, pero s se puede ocultar desde el men Ver >
Barras de herramientas > Programacin.

Figura 2.25. Ocultar o mostrar barra de herramientas Codificacin desde el men Ver.
Tambin se puede modificar la barra de herramientas Codificacin para que muestre ms botones, como
Ajustar texto, Caracteres ocultos y Sangra automtica, u ocultar botones que no deseamos utilizar. Para
ello, no obstante, deberemos editar el archivo XML que genera la barra de herramientas.
Barra de Herramientas Representacin de Estilos
La barra de herramientas Representacin de estilos (oculta de manera predeterminada) contiene botones
que permiten ver cmo aparecera el diseo en distintos tipos de medios si se utilizasen hojas de estilos
dependientes de los medios. Tambin contiene un botn con el que es posible activar o desactivar los
estilos CSS. Para mostrar esta barra de herramientas, seleccionamos Ver > Barras de herramientas >
Representacin de estilos.

Figura 2.26. Seleccionar barra de herramientas Representacin de estilos desde el men Ver.

Figura 2.27. Barra de herramientas Representacin de estilos.
Esta barra de herramientas slo funciona si los documentos utilizan hojas de estilos dependientes de los
medios. Por ejemplo, una hoja de estilos puede especificar una regla para imprimir y otra regla distinta
para los dispositivos de mano. De manera predeterminada, Dreamweaver muestra el diseo para una
pantalla (que muestra cmo se representa una pgina en la pantalla del equipo). Podemos ver las
representaciones para los diferentes soportes haciendo clic en los correspondientes botones de la barra de
herramientas Representacin de estilos.
Representar tipo de medio Screen muestra cmo aparece la pgina en la pantalla de un equipo.

Representar tipo de medio Print muestra cmo aparece la pgina en una hoja de papel impresa.
Dreamweaver CS4. Captulo 2. Entorno de trabajo

32



Representar tipo de medio Handheld muestra cmo aparece la pgina en un dispositivo de mano,
como un telfono mvil o un dispositivo BlackBerry.

Representar tipo de medio Projection muestra cmo aparece la pgina en un dispositivo de
proyeccin.


Representar tipo de medio TTY muestra cmo aparece la pgina en un teletipo.

Representar tipo de medio TV muestra cmo aparece la pgina en la pantalla de televisin.


Alternar visualizacin de estilos CSS permite activar o desactivar estilos CSS. Este botn funciona de
manera independiente a los dems botones de medios.

Hojas de estilos de tiempo de diseo permite especificar una hoja de estilos de tiempo de diseo.

2.4. El inspector de propiedades
El inspector de propiedades nos permite examinar y editar las propiedades ms comunes del elemento de
pgina seleccionado, como texto o un objeto insertado. El contenido del inspector de propiedades es
distinto en funcin del elemento seleccionado. Por ejemplo, si selecciona una imagen de la pgina, el
inspector de propiedades cambiar para mostrar las propiedades de la imagen como por ejemplo, la ruta
de archivo de la imagen, las dimensiones de la imagen, o el borde que rodea la imagen en caso de que lo
haya.
El inspector de propiedades se encuentra, de manera predeterminada, en el borde inferior del espacio de
trabajo, aunque se puede desacoplar y convertir en un panel flotante en el espacio de trabajo.



Figura 2.28. Inspector de propiedades.

2.5. Paneles
Grupos de Paneles

Los Paneles son ventanas flotantes parecidas a las Barras de Herramientas. Los Grupos de Paneles son
conjuntos de paneles relacionados, apilados bajo un encabezado comn.
Dreamweaver CS4. Captulo 2. Entorno de trabajo

33



Figura 2.29. Ejemplo de Grupo de Paneles expandido.

Estos grupos se pueden expandir en paneles o contraer en iconos haciendo clic en el Botn Expandir en
paneles/Contraer en iconos . Cuando un Grupo de Paneles est expandido, los Paneles que lo
componen aparecen en forma de ficha con su nombre indicado en la solapa, tal y como vemos en la Figura
2.29. Si los contraemos en iconos, su aspecto ser similar al ejemplo de la Figura 2.30.

Dreamweaver CS4. Captulo 2. Entorno de trabajo

34



Figura 2.30. Ejemplo de Grupo de Paneles contrado.

Desde el Botn Opciones o haciendo clic con el botn derecho sobre la ficha de un panel, podemos
cerrarlo, cerrar el grupo al que pertenece, contraerlo, mostrar las preferencias de paneles, y llevar a cabo
otras acciones relacionadas especficamente con cada panel.
Los Paneles, generalmente se presentan acoplados en Grupos, pero se pueden desacoplar e incluso
convertirlos en paneles flotantes, simplemente pulsando sobre la ficha del panel y arrastrndolo hasta la
posicin en la que deseemos tenerlo, ya sea en la ventana de documento o en un grupo de paneles distinto
al que pertenezca por defecto, o dentro de su grupo pero en un orden diferente.
Los Grupos de Paneles se pueden cerrar desde Opciones seleccionando Cerrar grupo de fichas. Para
volver a abrirlos hay que hacerlo desde el men Ventana.
Si queremos ocultar todos los Grupos de Paneles basta con pulsar la tecla F4. Para volver a mostrar todos
los paneles pulsamos de nuevo la tecla F4.
Panel Archivos
Nos detenemos en este panel, ya que es el que permite ver y administrar los archivos de un sitio web en
Dreamweaver, tema del que nos ocuparemos en el prximo captulo.
Dreamweaver CS4. Captulo 2. Entorno de trabajo

35


Figura 2.31. Panel Archivos contrado.
Al visualizar sitios, archivos o carpetas en el panel Archivos, se puede cambiar el tamao del rea de
visualizacin y expandir o contraer el panel Archivos. Cuando el panel Archivos se contrae, muestra el
contenido del sitio local, el sitio remoto, el servidor de prueba o el depsito SVN como una lista de
archivos. Cuando est ampliado, adems del sitio local, muestra el sitio remoto o el servidor de prueba o el
depsito SVN.
Dreamweaver CS4. Captulo 2. Entorno de trabajo

36


Figura 2.32. Panel Archivos ampliado.
Para sitios de Dreamweaver, tambin puede personalizar el panel Archivos cambiando la vista (sitio local o
sitio remoto) que aparece de forma predeterminada en el panel contrado.
Panel Estilos CSS
El panel Estilos CSS permite supervisar las reglas y propiedades CSS que afectan a un elemento de pgina
actualmente seleccionado (modo Actual) o las reglas y propiedades que afectan a todo un documento
(modo Todo). Un botn situado en la parte superior del panel Estilos CSS permite cambiar entre estos dos
modos. El panel Estilos CSS tambin permite modificar propiedades CSS tanto en modo Todo como en
modo Actual.
Dreamweaver CS4. Captulo 2. Entorno de trabajo

37


Figura 2.33. Panel Estilos CSS.
Podemos cambiar el tamao de cualquiera de los paneles arrastrando los bordes que los separan.
En modo Actual, el panel Estilos CSS muestra tres secciones: un resumen del panel Seleccin que muestra
las propiedades de CSS de la seleccin actual del documento, un panel Reglas que muestra la ubicacin de
Dreamweaver CS4. Captulo 2. Entorno de trabajo

38

las propiedades seleccionadas (o una cascada de reglas para la etiqueta seleccionada, en funcin de la
seleccin) y un panel Propiedades que permite editar las propiedades CSS al definir reglas para la seleccin.
En modo Todo, el panel Estilos CSS muestra tres secciones: un panel Todas las reglas arriba y un panel
Propiedades abajo. El panel Todas las reglas muestra una lista de reglas definidas en el documento actual,
as como las reglas definidas en las hojas de estilo adjuntas al documento actual. El panel Propiedades
permite editar propiedades CSS para cualquier regla seleccionada en el panel Todas las reglas.
Todos los cambios que realicemos en el panel Propiedades se aplican de forma inmediata; de este modo,
se puede previsualizar el trabajo a medida que lo vayamos llevando a cabo.
2.6. Vistas
Para un mismo documento, Dreamweaver presenta cuatro vistas distintas. Podemos pasar de una vista a
otra utilizando los botones de la barra de herramientas
o utilizando el comando correspondiente del men
Ver.
Vista Diseo
Esta vista permite trabajar con el documento de forma grfica, similar a la que aparece en el navegador.


Figura 2.34. Trabajar en vista diseo.
Dreamweaver CS4. Captulo 2. Entorno de trabajo

39

Como ayuda visual para dibujar, ubicar o cambiar el tamao de los elementos en la vista de diseo de la
ventana de documento podemos utilizar las ayudas visuales, reglas, guas y cuadrculas que nos ofrece
Dreamweaver desde el men Ver.
En el caso de las reglas, para activarlas y desactivarlas seleccionamos Ver > Reglas > Mostrar. Tambin
podemos activar o desactivar las reglas con Ctrl+Alt+R.

Figura 2.35. Mostrar reglas desde el men Ver.
En este men tambin podemos cambiar la unidad de medida de las reglas: en Pxeles, Pulgadas o
Centmetros, seleccionando la opcin que nos interese.
Si nos interesa podemos cambiar el origen de la regla arrastrando a cualquier parte de la ventana de
Documento el icono de origen de la regla. Para restablecer su origen seleccionamos Ver > Reglas >
Restablecer origen.

Figura 2.36. Cambiar origen de la regla.
En lo referente a la cuadrcula, para activarla y desactivarla seleccionamos Ver > Cuadrcula > Mostrar
cuadrcula. Tambin la podemos activar o desactivar con Ctrl+Alt+G.

Dreamweaver CS4. Captulo 2. Entorno de trabajo

40


Figura 2.37. Seleccionar mostrar cuadrcula desde el men Ver.
Si queremos activar o desactivar que los elementos de la pgina se ajusten automticamente a la cuadrcula
cuando se muevan, seleccionamos Ver > Cuadrcula > Ajustar a cuadrcula. Tambin podemos activar o
desactivar el ajuste automtico a la cuadrcula con Ctrl+Alt+Mays+G. El ajuste funciona
independientemente de si la cuadrcula se encuentra o no visible.
Para cambiar la configuracin de la cuadrcula deberemos seleccionar Ver > Cuadrcula > Configuracin de
cuadrcula.

Figura 2.38. Configuracin de la cuadrcula.
En la Configuracin de la cuadrcula podemos seleccionar, adems de Mostrar cuadrcula o Ajustar a
cuadrcula, el Color que deseamos que tenga, as como el Espaciado y si se muestra como Lneas o Puntos.
Vista Cdigo
Esta vista presenta el documento con el cdigo HTML y se utiliza para trabajar en un entorno de
programacin. No permite tener una referencia de cmo va quedando el Documento segn se va
modificando.
Dreamweaver CS4. Captulo 2. Entorno de trabajo

41


Figura 2.39. Vista Cdigo.
Dividir Vista Cdigo y Diseo
Es una vista donde la pantalla aparece dividida. En la parte superior de la ventana del documento presenta
el cdigo HTML y en la inferior presenta el modo grfico.
En la ventana del Documento del modo grfico se puede mostrar las Reglas y Cuadrculas al igual que en
la Vista Diseo.
Dreamweaver CS4. Captulo 2. Entorno de trabajo

42


Figura 2.40. Vista dividida de Cdigo y Diseo.
Vista en vivo
Nos muestra una presentacin preliminar del aspecto que tendra la pgina en la que estamos trabajando
en un navegador.

Figura 2.41. Vista en vivo.
Dreamweaver CS4. Captulo 2. Entorno de trabajo

43

Vista Cdigo en vivo
Slo est disponible con la vista en vivo activada. Muestra en la parte superior de la pantalla el origen de la
vista en vivo en la vista cdigo, y en la parte inferior, la propia vista en vivo.

Figura 2.42. Vista cdigo en vivo.
2.7. Gestionar el espacio de trabajo
Puedes crear un espacio de trabajo personalizado moviendo y manipulando paneles y ventanas
Documento. Tambin puedes guardar espacios de trabajo y pasar de uno a otro.
Desde la barra de aplicaciones, podemos desplegar las diferentes vistas del espacio de trabajo y
seleccionar la que ms nos convenga, dependiendo de si tenemos un papel de diseador, programador,
etc., o de si queremos administrar nuestro propio espacio y personalizarlo.

Figura 2.43. Desplegando tipos de espacio de trabajo.
Dreamweaver CS4. Captulo 2. Entorno de trabajo

44

El espacio de trabajo de Diseador es un espacio de trabajo en el que todas las ventanas de documentos y
todos los paneles estn integrados en una ventana de aplicacin de mayor tamao. Este diseo es el
recomendado para la mayora de usuarios y el que vamos a utilizar en este curso.

45













Captulo 3.
Definicin de un sitio web


Dreamweaver CS4. Captulo 3. Definicin de un sitio web

46

Captulo 3. DEFINICIN DE UN SITIO WEB
3.1. Conceptos
Las pginas Web estn formadas por elementos como imgenes, sonidos, animaciones, etc. La
organizacin de estas pginas con sus elementos, en conjunto, forman un Sitio Web.
Un sitio local es un sitio Web creado en nuestro ordenador. Generalmente, el sitio local est
formado por una carpeta con distintas subcarpetas que contienen los elementos de las pginas
Web. As tendramos una carpeta para las imgenes, otra para los sonidos, otra para las
animaciones, etc., creando tantas carpetas como sean necesarias con el fin de organizar lo
mejor posible los archivos.

RECOMENDACIN. Cuando crees tu sitio Web, puedes crear tantas carpetas y subcarpetas
como consideres oportuno para tener los archivos perfectamente clasificados.


Este sitio local sirve como lugar de trabajo, de prueba, hasta lograr que las pginas muestren lo
que deseamos, antes de colocarlas en el sitio remoto.
Un sitio remoto es un sitio en el servidor Web y tiene la misma estructura que el sitio local.
La forma ms sencilla de trabajar consiste en elaborar las pginas Web en el sitio local y
despus alojarlas en el sitio remoto. A este alojo se le denomina publicar el sitio y con esto
conseguimos que pueda ser visto desde Internet.
Una vez publicado un sitio podemos hacer actualizaciones de forma automtica con
Dreamweaver.
3.2. Definir un sitio Web
Definir un sitio
En Dreamweaver podemos crear y definir un sitio local de varias formas.
Desde el men Sitio, podemos seleccionar la opcin Nuevo sitio para crear uno nuevo, o
Administrar sitios para manipular alguno ya creado previamente.

Figura 3.1. Men Sitio.
Dreamweaver CS4. Captulo 3. Definicin de un sitio web

47

o Desde la pgina de inicio, seleccionando Crear nuevo> Sitio de Dreamweaver.


Figura 3.2. Crear nuevo Sitio de Dreamweaver desde pgina de inicio.

o Desde la barra de aplicacin, desplegando el icono Sitio.


Figura 3.3. Crear o administrar sitio desde la barra de aplicacin.
o Desde el panel Archivos, en la pestaa Archivos, seleccionamos Administrar sitios.

Dreamweaver CS4. Captulo 3. Definicin de un sitio web

48



Figura 3.4. Administrar sitios desde el panel Archivos.

Al pulsar en esta ltima opcin, se abre el cuadro de dilogo Administrar sitios, desde donde
podemos crear, editar, duplicar, quitar, exportar e importar sitios en Dreamweaver.


Figura 3.5. Cuadro de dilogo Administrar sitios


El asistente para la definicin del sitio
Para trabajar en nuestro proyecto es necesaria la creacin de un sitio Web local donde
definiremos la ubicacin de los elementos que lo van a formar. En primer lugar definiremos el
nombre que vamos a utilizar para nuestro sitio Web. El nombre puede ser cualquiera que nos
ayude a identificarlo y diferenciarlo del resto. Por ejemplo, los nombres de mis sitios: Mentor,
Atenea, Aficiones, etc. hacen referencia a distintos proyectos Web, cada uno con su estructura
de carpetas y subcarpetas, pero independientes entre s.
Veamos un ejercicio prctico, donde vamos a crear un sitio al que vamos a poner por nombre
MiWeb. Puedes utilizar otro nombre para tu sitio, dependiendo de tu gusto y siguiendo los
pasos que se detallan. ste ser el sitio local que utilizaremos para realizar los ejercicios.

RECOMENDACIN. Al crear tu sitio Web es interesante poner un nombre significativo que lo
identifique y a la vez lo diferencie de otros sitios.

Dreamweaver CS4. Captulo 3. Definicin de un sitio web

49



EJERCICIO
El objetivo en este ejercicio ser crear un sitio Web en nuestro ordenador, es decir el sitio local,
utilizando el asistente. Vamos a crear un nuevo sitio al que llamaremos MiWeb:
1. Desde una de las opciones anteriores seleccionamos Nuevo sitio.



Figura 3.6. Seleccionar Nuevo sitio desde la barra de aplicaciones.

2. En el cuadro de dilogo Definicin del Sitio, en la pestaa Bsicas, tecleamos MiWeb en el
campo Qu nombre desea asignar al sitio? y en el campo Cul es la direccin HTTP (URL) de
su sitio? tecleamos la nuestra propia, que ser similar a la de este ejemplo:
http://fresno.pntic.mec.es/mgas0012, que como ves, es muy parecida a la cuenta de correo
Mentor que te han proporcionado al matricularte en el curso, de forma que cambiars
fresno.pntic.mec.es por lo que va detrs de la @ en tu propia cuenta y mgas0012, por lo que
va justo antes de la @ en dicha cuenta de correo. Despus, hacemos clic en Siguiente.



Figura 3.7. Definicin del sitio. Pestaa Bsicas.

3. En la siguiente ventana seleccionamos la opcin No para indicar que no deseamos trabajar con
una tecnologa de servidor y hacemos clic en Siguiente.
Dreamweaver CS4. Captulo 3. Definicin de un sitio web

50




Figura 3.8. Definicin del sitio. Pestaa Bsicas.

4. A continuacin, a la pregunta Cmo desea trabajar con los archivos durante la etapa de
desarrollo?, dejamos activada la respuesta que viene recomendada por defecto: Editar copias
locales en mi equipo y luego cargarlas al servidor cuando estn listas. En cuanto a la pregunta
En qu lugar del equipo desea almacenar los archivos?, nos propone por defecto una carpeta
donde el programa guardar los archivos del sitio local.

Dreamweaver CS4. Captulo 3. Definicin de un sitio web

51



Figura 3.9. Definicin del sitio. Pestaa Bsicas.

Si no queremos crear el sitio donde nos propone el programa, haciendo clic en el icono situado a la
derecha del cuadro de texto , activamos el cuadro de dilogo Elegir la carpeta raz local para el
sitio. Buscamos la ubicacin de nuestro equipo donde queramos guardar el sitio local, es decir,
localizamos la ruta, y creamos la carpeta MiWeb desde el icono Crear nueva carpeta
, que contendr dicho sitio. Una vez creada la carpeta, la abrimos y
comprobamos que estamos en ella. Hacemos clic en Seleccionar.

Dreamweaver CS4. Captulo 3. Definicin de un sitio web

52



Figura 3.10. Seleccionar la carpeta MiWeb.

Nos aparece la nueva ruta en la ventana del asistente de creacin del sitio y tecleamos Siguiente.


Dreamweaver CS4. Captulo 3. Definicin de un sitio web

53

Figura 3.11. Almacenar los archivos en nuestro equipo.

5. En la nueva ventana, a la pregunta Cmo conecta con su servidor remoto?, desplegamos las
posibles respuestas y elegimos Ninguno. Hacemos clic en Siguiente.
Ms adelante configuraremos la conexin con el Servidor remoto.



Figura 3.12. Definicin del sitio. Compartiendo archivos.

6. Por ltimo, aparece una pantalla del asistente mostrando un resumen con las opciones que
hemos configurado. Hacemos clic en Completado para finalizar.

Dreamweaver CS4. Captulo 3. Definicin de un sitio web

54



Figura 3.13. Definicin del sitio. Resumen.

7. Si observas ahora el panel Archivos, vers la nueva carpeta raz local correspondiente al sitio
actual, MiWeb.



Figura 3.14. Panel Archivos de MiWeb.










Dreamweaver CS4. Captulo 3. Definicin de un sitio web

55

3.3. Ms sobre el panel archivos

Desde el panel Archivos podemos acceder a todos los sitios que tengamos definidos as como a
todos los archivos.

Al expandir el panel de archivos, con ayuda del botn Expandir/Contraer de la barra de
herramientas del propio panel, se muestra una ventana dividida en dos partes. En la parte de
la derecha, aparecen los archivos del sitio local, mientras que la parte izquierda, inicialmente,
contiene los archivos del sitio remoto, que al no tener definido an, obviamente estar vaca;
Dreamweaver presenta en esta parte un mensaje indicando que debemos definir un sitio
remoto.



Figura 3.15. Panel Archivos expandido.

El panel posee una barra de mens y una barra de herramientas con los comandos ms
usados del men.

Figura 3.16. Barra de herramientas Panel Archivos.

Las funciones de cada botn son:

Mostrar: es un men que facilita el acceso a los discos de nuestro ordenador, a los sitios
definidos y al administrador de sitios.

Conectar al servidor remoto: conecta al sitio remoto y permite la actualizacin de archivos.

Actualizar: actualiza los cambios del sitio.

o Registro ftp del sitio: contrae el panel y abre el registro del protocolo de transferencia de
archivos del sitio remoto, , como en esta imagen de ejemplo:

Dreamweaver CS4. Captulo 3. Definicin de un sitio web

56


Figura 3.17. Registro FTP del sitio remoto.


Archivos del sitio: muestra las carpetas y archivos del sitio local y remoto.

Servidor de prueba: presenta una lista del servidor de prueba, si se ha definido, en la parte
izquierda de la ventana.

Archivos de base de datos: muestra una base de datos SVN si hemos definido una
configuracin de control de versin en la pestaa Avanzadas de la definicin del sitio. Si se
utiliza un servidor de control de versiones, se desactiva la informacin de
desproteccin/proteccin especificada en Datos remotos.

Obtener archivo(s): descarga desde el sitio remoto los archivos seleccionados.

Colocar archivo(s): coloca los archivos seleccionados de nuestro sitio local en el sitio
remoto.

Proteger archivo(s): descarga los archivos seleccionados desde el sitio remoto, pero los
marca como protegidos para evitar modificaciones.

Desproteger: sube una copia de un archivo del sitio local al sitio remoto y convierte el
archivo local en archivo de solo lectura.

o Sincronizar: sincroniza los archivos de ambos sitios, local y remoto.

Expandir/Contraer: expande o contrae el panel de archivos.

Crear archivos y carpetas

El panel Archivos de Dreamweaver tiene un funcionamiento similar al Explorador de
Windows. Permite copiar, mover, eliminar, renombrar, etc. los archivos del sitio y fuera de l.
Podemos crear tantas carpetas como necesitemos para construir la estructura de nuestro sitio.
Todo esto lo podemos realizar de varias formas, que veremos a continuacin.





Dreamweaver CS4. Captulo 3. Definicin de un sitio web

57


Ejercicio
El objetivo en este ejercicio ser la creacin de carpetas y archivos en nuestro sitio local.

Para crear una carpeta:

o Seleccionamos el sitio MiWeb en el panel Archivos y lo expandimos desde el botn
Expandir/Contraer .
o En Archivos locales, seleccionamos el sitio MiWeb y luego desplegamos Archivo>Nueva Carpeta; por
defecto tendr el nombre untitled, as que lo cambiamos a Elementos.



Figura 3.18. Crear y cambiar el nombre a una carpeta nueva.

o Ahora seleccionamos la carpeta Elementos y con el botn derecho del ratn, seleccionamos otra vez
Nueva carpeta para crear una carpeta nueva a la que llamaremos imagenes (sin tilde) dentro de
Elementos (comprueba que esta carpeta imagenes queda dentro de la carpeta Elementos).


Figura 3.19. Crear nueva carpeta desde el men contextual.

Para crear archivos:

o En Archivos locales, seleccionamos el sitio MiWeb y con el botn derecho del ratn seleccionamos
Nuevo Archivo
Dreamweaver CS4. Captulo 3. Definicin de un sitio web

58



Figura 3.20. Crear nuevo archivo desde el men contextual.
o y lo nombramos index.htm


Figura 3.21. Renombrar archivo.
o Seguimos los mismos pasos para crear un nuevo archivo llamado ahora monumentos.htm y un tercer
archivo nuevo al que llamaremos rutas.htm. Comprueba que estos tres archivos dependen
directamente de la carpeta raz del sitio MiWeb y observa la diferencia entre carpetas y archivos.



Figura 3.22. Archivos y carpetas del sitio MiWeb.


Dreamweaver CS4. Captulo 3. Definicin de un sitio web

59


RECOMENDACIN. Procuraremos no utilizar tildes ni caracteres especiales en los nombres de
ficheros y carpetas para que pueda ser correctamente ledo por todas las plataformas y
navegadores. Tampoco dejaremos espacios en blanco.


3.4. Vnculos de un sitio

Aunque estos conceptos se estudiarn en otro captulo con ms profundidad, podemos distinguir
bsicamente tres tipos de rutas que vinculan las pginas de un sitio.

Rutas absolutas: se utilizan principalmente para vincular con un archivo situado en sitio distinto al
nuestro y deben indicar el protocolo que deben usar as como el URL (Localizador Uniforme de
Recursos) completo, por ejemplo http://www.mentor.mec.es.

Rutas relativas al sitio: se utilizan en sitios Web muy extensos e indican la ruta desde la raz del sitio
hasta un archivo concreto.

Rutas relativas al archivo: son las ms utilizadas, se omite la parte de la ruta que es comn a los
archivos vinculados.



60














Captulo 4.
Documentos



Dreamweaver CS4. Captulo 4. Documentos
61

Captulo 4. DOCUMENTOS

La unidad bsica de cualquier sitio Web es la pgina Web, y a la primera pgina de cualquier sitio web,
solemos llamarla index. En el captulo anterior hemos creado varias pginas Web en blanco, ahora
vamos a conocer cmo crear, abrir, guardar estos documentos. Tambin aprenderemos a configurar
las propiedades ms importantes y a insertar texto.

4.1. Estructura de una pgina Web

Antes de comenzar a crear nuestros primeros documentos vamos a conocer la estructura de una
pgina Web y a identificar cada una de sus partes. Como ya sabemos, los documentos HTML son
documentos de texto con unas palabras claves, denominadas etiquetas, que sirven al navegador para
interpretar sus instrucciones y poder representar en la pantalla los elementos que contenga el
documento.

Las etiquetas HTML se escriben entre ngulos, <nombre de la etiqueta> y generalmente se utilizan
una etiqueta de inicio y otra de final para indicar que ha terminado la instruccin correspondiente. La
diferencia entre ambas etiquetas es que la de cierre lleva una barra inclinada / antes del nombre de
la etiqueta. Tambin existen etiquetas slo de inicio.

Por ejemplo, para poner Dreamweaver CS4 en negrita, deberamos escribir en la vista Cdigo del
programa, en el cuerpo del documento, <b>Dreamweaver CS4</b> y el resultado sera Dreamweaver
CS4 en la vista Diseo.


Figura 4.1. Etiqueta html negrita vista cdigo.

Figura 4.2. Resultado texto negrita vista
diseo.


La estructura de una pgina Web, consta bsicamente de las siguientes etiquetas:

<html> (Etiqueta de inicio de un documento HTML)

<head> (Etiqueta de inicio de la cabecera)
...
<title> (Etiqueta de inicio del ttulo del documento)
...
</title> (Etiqueta de fin del ttulo del documento)

</head> (Etiqueta de fin de la cabecera)

<body> (Etiqueta de inicio del cuerpo del documento)
...
Dreamweaver CS4. Captulo 4. Documentos

62

</body> (Etiqueta de fin del cuerpo del documento)

</html> (Etiqueta de fin de un documento HTML)

Toda la informacin de la pgina Web se encuentra entre las etiquetas <html> y </html> y sirve para
identificar el documento como HTML (Hyper Text Mark-up Language)

Entre las etiquetas de la cabecera <head> y </head> se aade la informacin del autor, palabras
claves, etc. En esta parte de la cabecera entre las etiquetas <title> y </title> se encuentra el ttulo del
documento y es la nica informacin de toda la existente en la cabecera que se presenta en la barra de
ttulo del navegador.

El contenido de la pgina se coloca en el cuerpo del documento, entre las etiquetas <body> y </body>
y esta parte ser visible en la ventana del navegador. El contenido que insertamos en el documento
(texto, tablas, imgenes, etc.) tambin lleva asociadas etiquetas con las instrucciones correspondientes
a los efectos que deseamos conseguir.


RECOMENDACIN. Como existen multitud de etiquetas, es conveniente que pases de vez en
cuando a la vista Dividir para que te muestre simultneamente las vistas cdigo y diseo del
documento que ests elaborando y puedas identificar cada una de sus partes as como las
etiquetas asociadas a cada instruccin.


4.2. Operaciones bsicas con documentos

Crear, guardar, abrir y cerrar documentos

Desde el comando Nuevo del men Archivo podemos crear nuevos documentos en Dreamweaver.
Este comando nos abre el cuadro de dilogo Nuevo documento que nos va a permitir el acceso a
distintos tipos de pgina y diseos en cada una de sus Categoras, adems de poder crear diseos y
plantillas por nosotros mismos.

Si hacemos clic en cualquier Categora, podemos, en el cuadro de dilogo, ver los distintos tipos de
pgina, su diseo y su vista previa, si la posee, as como una descripcin del tipo de documento.

Desde este mismo men Archivo, podremos tambin Guardar, Abrir y Cerrar un documento creado en
Dreamweaver.

Dreamweaver CS4. Captulo 4. Documentos

63



Figura 4.3. Cuadro de dilogo Nuevo documento.

























Dreamweaver CS4. Captulo 4. Documentos

64


Ejercicio

El objetivo de este ejercicio ser crear y guardar un nuevo documento en blanco, as como cerrar y
abrir documentos existentes.
Para crear un documento nuevo, seguiremos los siguientes pasos:

o Despliega el men Archivo y selecciona Nuevo.


Figura 4.4. Archivo>Nuevo.


o Se abre el cuadro de dilogo Nuevo documento; seleccionamos la categora Pgina en blanco,
HTML en Tipo de Pgina, y dejamos <ninguno> en Diseo, tal y como viene por defecto. A
continuacin hacemos clic en Crear. Dreamweaver crear en la vista diseo un nuevo
documento en blanco, listo para insertar contenido. Si quieres ver la estructura de la pgina
puedes pulsar en el icono Dividir para observar cada una de sus partes. Cuando
termines, vuelve a la Vista Diseo.
Dreamweaver CS4. Captulo 4. Documentos

65




Figura 4.5. Crear un nuevo documento HTML.



Figura 4.6. Vista Dividir de un nuevo documento en blanco.

o Una vez creado el documento nuevo, es necesario guardar esta pgina web para no perder
nuestro trabajo. Al guardar el documento, deberemos nombrar el archivo que lo contiene,
recordando, que como norma general, en el nombre de dicho fichero no deberemos utilizar
espacios en blanco, ni caracteres especiales como tildes, , maysculas, etc.; tampoco debers
usar signos de puntuacin como puntos, comas o barras inclinadas, aunque s podemos utilizar
guiones bajos si el nombre del fichero tuviese dos palabras, por ejemplo.
Estas normas bsicas tambin son vlidas para las carpetas que vayamos a alojar en el sitio
Dreamweaver CS4. Captulo 4. Documentos

66

remoto, pues muchos servidores cambian estos caracteres durante la carga de la pgina y esto
provoca que se rompan los vnculos existentes entre los archivos.

Para guardar el documento nuevo que acabamos de crear en nuestro sitio local seguiremos los
siguientes pasos:
o Desplegamos el men Archivo y seleccionamos Guardar.


Figura 4.7. Guardar documento desde el men Archivo.

o Se abre el cuadro de dilogo Guardar como. Por defecto, Dreamweaver muestra el sitio local
en el que estamos trabajando para guardar el documento. En el campo Nombre, aparecer
Untitled-1.htm, nombre por defecto que Dreamweaver da a los ficheros sin ttulo; vamos a
eliminarlo y en su lugar, teclearemos enlaces. En el campo Tipo, deberemos comprobar que
est seleccionado Todos los documentos (*.htm;*.html;*.shtm;*.shtml;*.hta;*). Por ltimo,
hacemos clic en Guardar.

Dreamweaver CS4. Captulo 4. Documentos

67



Figura 4.8. Guardar un documento .htm.

Lgicamente, si en la estructura de nuestro sitio local hemos creado distintas carpetas, desde este
cuadro de dilogo Guardar como, deberemos localizar y abrir la carpeta correcta para guardar
nuestro documento en el lugar adecuado.
Es interesante saber que la mayora de los documentos web contienen cdigo HTML (HyperText
Markup Language), por lo que son vlidas las extensiones .htm o .html.

Cuando guardamos un documento, almacenamos los ltimos cambios realizados, pero permanece
abierto para seguir trabajando con l. Si deseamos cerrarlo, entonces podemos hacerlo de varias
formas:
o desde el men Archivo, seleccionando Cerrar, o con la combinacin de teclas Ctrl+W.

Dreamweaver CS4. Captulo 4. Documentos

68



Figura 4.9. Cerrar un documento desde el men Archivo.

o Desde la ventana del documento, haciendo clic en el icono de la pestaa del propio
documento abierto, o simplemente haciendo clic en el botn Cerrar , que adems
cerrar Dreamweaver.

Cierra el documento enlaces.htm de cualquiera de estas formas. Si no habas guardado los cambios
como te proponamos anteriormente en este ejercicio, entonces al intentar cerrarlo, te aparecer
un cuadro de dilogo preguntando si quieres guardar los cambios en el documento que estamos
intentando cerrar.



Figura 4.10. Cuadro de dilogo Guardar cambios.

Si contestamos afirmativamente, entonces se guardarn todas las modificaciones realizadas; si
Dreamweaver CS4. Captulo 4. Documentos

69

contestamos que no, guardar el documento con las modificaciones que habamos guardado antes.
Si el documento no ha sido guardado ninguna vez y pulsamos No, entonces perderemos todos los
cambios que hayamos efectuado en el mismo.
Si tenemos ms de un documento abierto en una sesin, Dreamweaver tambin nos permite cerrar
de una sola vez todos los documentos abiertos, pulsando en Cerrar todos, desde el men Archivo.


Figura 4.11. Cerrar todos desde el men Archivo.

Si deseamos abrir documentos en Dreamweaver, ya sean existentes o no creados en
Dreamweaver, que luego podamos editar en las vistas Diseo y Cdigo, podemos hacerlo de varias
formas:

o Para abrir un documento existente podemos desplegar el men Archivo y seleccionar Abrir.

Dreamweaver CS4. Captulo 4. Documentos

70


Figura 4.12. Abrir un documento desde el men Archivo.

o Se abre el cuadro de dilogo Abrir, que por defecto abre el sitio local en el que hemos estado
trabajando, en nuestro caso MiWeb. Localizamos el archivo rutas.htm, lo seleccionamos y
hacemos clic en Abrir.
Dreamweaver CS4. Captulo 4. Documentos

71



Figura 4.13. Cuadro de dilogo Abrir.

o Desde el panel Archivos, localiza el archivo monumentos.htm en la Vista local del sitio MiWeb
y haciendo clic con el botn derecho del ratn, selecciona Abrir, en el men contextual que
aparece. Tambin lo puedes abrir haciendo doble clic en el icono del archivo.

Dreamweaver CS4. Captulo 4. Documentos

72


Figura 4.14. Abrir un documento desde el panel Archivos.

o Si has estado trabajando recientemente con uno o varios archivos, tambin tienes la
posibilidad de abrirlos desplegando el men Archivo y seleccionando Abrir reciente, que
desplegar una lista de los documentos ms recientes con los que hayas estado trabajando.



Figura 4.15. Abrir archivos recientes desde el men Archivo.

o Al abrir Dreamweaver, desde la pgina de inicio, puedes tambin seleccionar un documento
con el que hayas estado trabajando recientemente, en la seccin Abrir un elemento reciente,
por ejemplo MiWeb/enlaces.html.

Dreamweaver CS4. Captulo 4. Documentos

73



Figura 4.16. Abrir un elemento reciente desde la pgina de inicio.















Dreamweaver CS4. Captulo 4. Documentos

74

4.3. Propiedades del documento

Cuando estamos definiendo nuestro sitio, es conveniente mantener una identidad, es decir que las pginas
que lo forman tengan un mismo formato, procurando que el fondo, las fuentes, etc. guarden una
uniformidad.

La configuracin del formato de las pginas se establece en las Propiedades de la pgina. Para abrir el
cuadro de dilogo Propiedades de la pgina lo podemos hacer de tres modos diferentes.

Ejecutando la opcin Propiedades de la pgina desde el men Modificar.

Figura 4.17. Propiedades de la pgina desde el men Modificar.

Haciendo clic con el botn derecho del ratn sobre el fondo de la pgina y seleccionando la opcin
Propiedades de la pgina desde el men contextual que nos aparece.

Dreamweaver CS4. Captulo 4. Documentos

75


Figura 4.18. Men contextual Propiedades de la pgina.
Pulsando las teclas Ctrl+J.

Con cualquiera de las tres formas descritas anteriormente, se nos abrir el cuadro de dilogo de las
Propiedades de la pgina, organizadas en Categoras.

En la categora Apariencia (CSS), podemos especificar varias opciones bsicas de diseo de pgina:

Figura 4.19. Categora Apariencia de las Propiedades de la pgina.
Dreamweaver CS4. Captulo 4. Documentos

76

Fuente de pgina: nos permite seleccionar una combinacin o familia de fuentes. Las combinaciones de
fuentes determinan cmo se muestra el texto de la pgina Web en un navegador. El navegador utiliza la
primera de las fuentes de la combinacin, si no est instalada, utilizar la siguiente fuente de la
combinacin y si no est instalada ninguna de las fuentes de la combinacin, el navegador mostrar el
texto de acuerdo a sus preferencias.

Si desplegamos este cuadro de seleccin, y seleccionamos Editar lista de fuentes, podemos agregar,
quitar o modificar las combinaciones de fuentes. Se abrir el cuadro de dilogo Editar lista de fuentes y
podremos llevar a cabo las siguientes acciones:


Figura 4.20. Desplegar Fuente de pgina y editar
lista de fuentes.


Figura 4.21. Cuadro de dilogo Editar lista de fuentes.

o Aadir o quitar fuentes de una combinacin: debemos seleccionar previamente, en la
parte superior, del cuadro de texto Lista de fuentes, la combinacin de fuentes que vamos
a modificar. Las fuentes que forman esta combinacin aparecen en el cuadro de texto
Fuentes elegidas.
Si queremos quitar una fuente de la combinacin, seleccionamos la fuente del cuadro de
texto Fuentes elegidas y hacemos clic en el botn de flecha . Si queremos aadir una
fuente a la combinacin, seleccionamos la fuente del cuadro de texto Fuentes disponibles
y hacemos clic en el botn de flecha .

Figura 4.22. Agregar o quitar fuentes.
Dreamweaver CS4. Captulo 4. Documentos

77

o Aadir o quitar una combinacin de fuentes: para aadir una combinacin de fuentes,
hacemos clic en el botn o seleccionamos una familia de fuentes concreta, como por
ejemplo, , seleccionamos la fuente que
vayamos a aadir a nuestra combinacin desde el cuadro de texto Fuentes disponibles y
hacemos clic en el botn de flecha . Este procedimiento lo emplearemos para aadir
todas las fuentes que deseemos a nuestra combinacin, pero debemos tener presente que
no estaremos seguros de la forma que se visualizarn nuevas fuentes en otros sistemas.
Para evitar esto, en la medida de lo posible, sera interesante aadir combinaciones
genricas de fuentes desde el men Fuentes disponibles a nuestra combinacin de fuentes
especficas.

Las familias genricas de fuentes son: cursiva, fantasa, monoespacio, san-serif y serif. Si
ninguna de las fuentes de la lista Fuentes elegidas est disponible en el sistema del
usuario, el texto aparecer en la fuente predeterminada asociada con la familia genrica
de fuentes.

Para quitar una familia de fuentes, seleccionamos la combinacin de fuentes del cuadro de
texto Lista de fuentes y hacemos clic en el botn .

Desde esta categora Apariencia, tambin podemos seleccionar el formato Negrita , Cursiva , o
ambos.
Tamao: nos permite definir el tamao de la fuente. Si seleccionamos un valor numrico, tambin nos
permite elegir la unidad de medida.

Figura 4.23. Tamao de la fuente desde la categora Apariencia.
Dreamweaver CS4. Captulo 4. Documentos

78

Color del texto: nos permite definir el color de texto. De forma predeterminada, el color de texto de los
documentos es el negro.

Figura 4.24. Color del texto.

Color de fondo: nos permite definir un color de fondo para el documento. Por defecto, el color de fondo
de los documentos es el blanco. El color de fondo se mostrar siempre que no seleccionemos ninguna
imagen de fondo.

Figura 4.25. Color de fondo.
Imagen de fondo: nos permite definir una imagen de fondo para el documento. La imagen se muestra
en mosaico ocupando todo el fondo del documento. Para insertar una imagen de fondo deberemos pulsar
en Examinar, que abrir el cuadro de dilogo Seleccionar origen de imagen y que nos permitir localizar
una imagen en nuestro equipo; una vez localizada la imagen que queremos como fondo, la seleccionamos
y pulsamos Aceptar.
Dreamweaver CS4. Captulo 4. Documentos

79


Figura 4.25. Seleccionar imagen de fondo.

Si la imagen que vamos a establecer como fondo estaba ubicada fuera de la carpeta raz del sitio local con
el que estamos trabajando, en nuestro ejemplo MiWeb, Dreamweaver nos dar la posibilidad de copiarla
al mismo en ese momento, evitando as problemas de rutas posteriores. Slo tenemos que contestar
afirmativamente a la pregunta de si deseamos copiar el archivo de imagen a la raz del sitio en ese
momento.

Figura 4.26. Copiar imagen de fondo a la raz del sitio local.

Entonces se abrir el cuadro de dilogo Copiar archivo como y localizaremos la ubicacin dentro de
MiWeb donde queremos copiar el fichero de imagen, que en nuestro ejemplo ser al interior de la
subcarpeta imagenes que habamos creado dentro de la carpeta Elementos cuando creamos nuestro sitio
web. Cuando nos encontremos en el interior de dicha carpeta, slo nos quedar pulsar el botn Guardar.

Dreamweaver CS4. Captulo 4. Documentos

80


Figura 4.27. Guardar fichero de imagen en la raz de nuestro sitio MiWeb.

Adems, podemos decidir cmo va a aparecer en nuestro documento la imagen de fondo insertada, si se
repite y de qu forma lo hace. As, si desplegamos Repetir, podemos seleccionar:
o No-repeat muestra la imagen de fondo una sola vez.
o Repeat forma un mosaico con la imagen en sentido horizontal y vertical.
o Repeat-x y repeat-y muestran, respectivamente, una banda horizontal y vertical de
imgenes. Las imgenes se recortan para que quepan dentro de los lmites.


Figura 4.28. Repetir.

RECOMENDACIN. Es importante hacer una buena combinacin de colores entre la fuente y
los colores de fondo del documento.

Margen izquierdo, derecho, superior e inferior: nos permite establecer los mrgenes en el documento y
su unidad de medida. Dreamweaver no muestra los mrgenes de pgina en la ventana del Documento,
deberemos ver su efecto desde los navegadores correspondientes.

La configuracin de propiedades en la categora Apariencia (HTML), del cuadro de dilogo Propiedades de
la pgina da como resultado una pgina con formato HTML en lugar de CSS.
Dreamweaver CS4. Captulo 4. Documentos

81


Figura 4.29. Categora Apariencia (HTML).
Desde esta categora podemos tambin establecer una imagen de fondo del mismo modo en el que
hemos aprendido para la categora Apariencia (CSS), un color de fondo y un color del texto del
documento, as como establecer los mrgenes izquierdo y superior con su ancho y alto respectivamente.
Pero esta categora, adems, nos permite establecer un color para los vnculos del documento, as como
para los vnculos visitados y activos del mismo.

En la categora Vnculos (CSS) podemos definir la fuente predeterminada del vnculo, el tamao de la
fuente del vnculo, as como los colores de los vnculos visitados, activos y de sustitucin; por ltimo,
tambin podemos seleccionar el estilo subrayado del vnculo desplegando Estilo subrayado.

Dreamweaver CS4. Captulo 4. Documentos

82


Figura 4.30. Categora Vnculos (CSS).

Fuente de vnculo: nos permite especificar el tipo de fuente que se debe utilizar para el texto de un
vnculo. Dreamweaver utiliza, de forma predeterminada, la misma combinacin de fuentes especificada
para todo el documento, a menos que aqu especifiquemos otra fuente.

Tamao: nos permite definir el tamao de la fuente. Si seleccionamos un valor numrico, tambin nos
permite elegir la unidad de medida.

Color de vnculo: nos permite especificar el color de los vnculos. Este color ayuda al usuario a distinguir
entre el texto normal y los vnculos que sirven de enlace a otras pginas.

Vnculos de sustitucin: nos permite especificar el color que tendr el vnculo cuando se coloque encima
el ratn.

Vnculos visitados: nos permite especificar el color de los vnculos visitados y ayuda al usuario a
distinguirlos de los que an no han sido visitados.

Vnculos activos: nos permite especificar el color de un vnculo al hacer clic con el ratn.

Estilo subrayado: nos permite definir el estilo subrayado que se debe aplicar a los vnculos. Por defecto,
cuando tenemos un texto con un vnculo asociado, el texto aparece subrayado.

Los vnculos los estudiaremos ms detenidamente en un tema especfico.


RECOMENDACIN. No es conveniente modificar los colores estndar de los enlaces as como
tampoco es recomendable utilizar estos colores para el resto del texto del documento pues
Dreamweaver CS4. Captulo 4. Documentos

83

podemos confundir a los usuarios y pueden no llegar a localizar nuestros vnculos.


La categora Encabezados (CSS), nos permite especificar la combinacin y tamao de las fuentes para los
encabezados de las pginas:

Fuente de encabezado: nos permite especificar la familia de fuentes predeterminada que se va a utilizar
en las pginas Web. Dreamweaver utilizar las fuentes que especifiquemos, a menos que definamos de
forma concreta otro tipo de fuente para un elemento de texto. Tambin podemos seleccionar el formato
Negrita , Cursiva , o ambos.

Encabezado 1 a encabezado 6: nos permite especificar el color y tamao de la fuente que se debe
utilizar, hasta un mximo de 6 niveles de etiquetas de encabezado. Si seleccionamos un valor numrico,
tambin nos permite elegir la unidad de medida.


Figura 4.31. Categora Encabezado (CSS).

La categora Ttulo/Codificacin, permite especificar el tipo de codificacin del documento especfico para
el idioma utilizado al crear las pginas Web, as como especificar el Formulario de normas Unicode que
debe utilizarse con dicho tipo de codificacin:

Ttulo: nos permite especificar el ttulo de la pgina. Este ttulo aparecer en la barra de ttulo de la
ventana de documento y la ventana de la mayora de los navegadores.

Tipo de Documento (DTD): Especifica la definicin de un tipo de documento. Por ejemplo, puede hacer
que un documento HTML sea compatible con XHTML seleccionando XHTML 1.0 de transicin o XHTML 1.0
estricto del men emergente.
Dreamweaver CS4. Captulo 4. Documentos

84


Codificacin: nos permite especificar la codificacin empleada para los caracteres del documento. Para
nuestro caso, espaol y otros idiomas de Europa Occidental, seleccionaremos Europeo occidental. Existen
otras opciones que podemos apreciar desplegando la lista. Si la pgina que vamos a crear utiliza otro
alfabeto, deberemos configurar este atributo. Si seleccionamos Unicode (UTF-8) como codificacin del
documento, no ser necesaria la codificacin de entidades, ya que la codificacin UTF-8 puede representar
todos los caracteres.

Volver a cargar permite convertir el documento existente o volver a abrirlo con la nueva codificacin.

Formulario de normas Unicode: slo est activado si seleccionamos UTF-8 como codificacin del
documento. Existen cuatro formularios de normas Unicode. El ms importante es el formulario de
normalizacin C porque es el formulario ms utilizado en el modelo de caracteres para la Web.

Incluir firma Unicode (BOM): permite incluir en el documento una marca de orden de bytes (BOM, en
sus siglas en ingls). Una BOM est formada por entre 2 y 4 bytes situados al comienzo de un archivo de
texto que identifican a un archivo como Unicode y, en este caso, el orden de los bytes siguientes. Dado
que UTF-8 carece de orden de bytes, la adicin de una BOM UTF-8 es opcional. Es obligatoria en el caso de
UTF-16 y UTF-32.



Figura 4.32. Categora Ttulo/Codificacin.

La categora Imagen de rastreo, nos permite insertar un archivo de imagen para utilizarlo como gua al
disear la pgina Web:

Imagen de rastreo: especifica una imagen que se va a emplear como gua para copiar un diseo. Esta
imagen slo sirve como referencia, ya que no aparece cuando el documento se muestra en un navegador.
Dreamweaver CS4. Captulo 4. Documentos

85


Transparencia: nos permite determinar la opacidad de la imagen de rastreo, desde completamente
transparente hasta completamente opaca.



Figura 4.33. Categora Imagen de rastreo.

4.4. Vista previa en el navegador

Cuando trabajamos en un documento, lo que estamos elaborando en la vista Diseo, es muy parecido a lo
que realmente aparecer en el navegador. No obstante es conveniente ir visualizando frecuentemente las
pginas, obteniendo una vista previa en navegadores para detectar los errores y evitar repetirlos. Tambin
podemos utilizar la Vista en vivo que nos ofrece Dreamweaver.

Para visualizar la pgina Web en un navegador, lo primero que debemos hacer es aadir dicho navegador a
la lista de navegadores. Esto lo realizaremos desde el cuadro de dilogo Preferencias, y tenemos dos
formas diferentes de hacerlo:

1. Ejecutando el comando Preferencias desde el men Edicin, o usando la combinacin de teclas Ctrl+U
Dreamweaver CS4. Captulo 4. Documentos

86


Figura 4.34. Comando Preferencias del men Edicin.
2. Activando el cuadro de dilogo Preferencias desde Archivo>Vista previa en el navegador>Editar lista
de navegadores.


Figura 4.35. Comando Editar lista de navegadores.

En el cuadro de dilogo Preferencias que nos aparece, en la seccin de la izquierda seleccionamos la
Categora Vista previa en el navegador.
Dreamweaver CS4. Captulo 4. Documentos

87


Figura 4.36. Vista previa en el navegador del cuadro Preferencias.
Si queremos aadir un navegador a la lista, hacemos clic en el botn y se abre un nuevo cuadro de
dilogo, Aadir navegador.

Figura 4.37. Cuadro de dilogo Aadir navegador.

Para indicar en el cuadro de texto Aplicacin, la ruta donde se encuentra el navegador en el disco duro,
hacemos clic en Examinar y localizamos su ubicacin. Una vez localizado en el cuadro de dilogo
Seleccionar Navegador, pulsamos Abrir.
Dreamweaver CS4. Captulo 4. Documentos

88


Figura 4.38. Seleccionar navegador.

Dreamweaver escribir el nombre del navegador en el cuadro de texto Nombre del cuadro de dilogo
Aadir navegador.


Figura 4.39. Aadir navegador.

Activamos la casilla Navegador principal o Navegador secundario para establecer la categora del
navegador. Esta opcin tambin la podremos modificar, si as lo queremos, desde el cuadro de dilogo
Preferencias. Podemos aadir tantos navegadores como creamos necesario.
Para eliminar un navegador de la lista, lo seleccionamos y hacemos clic en el botn . El nombre del
navegador desaparecer de la lista.

Dreamweaver CS4. Captulo 4. Documentos

89

Desde el cuadro de dilogo Aadir navegador, tambin se nos permite activar la opcin Vista previa
utilizando el archivo temporal, para crear una copia temporal del documento para su vista previa y su
depuracin del servidor o bien, si no activamos la opcin, podemos actualizar el documento directamente.

Una vez configurados todos los parmetros que consideremos oportunos, hacemos clic en Aceptar para
validar los cambios. Ahora, podemos obtener una vista previa del documento en el que estamos
trabajando pulsando F12 para abrir el navegador principal y Ctrl+F12 para abrir el navegador secundario.

Tambin podemos hacer clic en el botn Vista previa de la barra de herramientas del documento y
a continuacin seleccionar el navegador que deseamos abrir.


Figura 4.40. Desplegar Vista previa/Depurar en el explorador.

4.5. Paletas de colores

Antes de decidir los colores que vamos a usar en nuestra Web debemos tener presente que una misma
pgina se ver diferente dependiendo del monitor, del navegador y del sistema operativo.

Actualmente existen en el mercado multitud de monitores que soportan distintas configuraciones de color.
Esto es fcil comprobarlo si accedemos a las propiedades de la pantalla de nuestro ordenador y vemos las
posibilidades de Resolucin de pantalla y Calidad del color que nos ofrece la ficha Configuracin.

Figura 4.41. Configuracin de pantalla.

Dreamweaver CS4. Captulo 4. Documentos

90

Asimismo, los navegadores y los sistemas operativos difieren en los colores que utilizan cada uno. Estos
colores, consta generalmente de una gama de 256 colores, que se denomina paleta de color.

En los navegadores ms utilizados, la paleta est formada por 216 colores comunes y 40 adicionales, que
de alguna forma garantizan la velocidad de descarga de las pginas Web. De todas formas, si el navegador
que visualiza nuestra pgina Web no dispone de nuestros colores, har una conversin de los colores de
nuestra imagen a sus colores por defecto.

El modelo de color de un monitor se corresponde con el modelo RGB. Si asignamos a cada una de las luces
8 de los 24 bits disponibles, podemos obtener 28 = 256 intensidades diferentes de rojos, 28
= 256 intensidades diferentes de verdes y otras 28 = 256 intensidades diferentes de azules, que puede
crear 16.777.216 colores distintos.

En los sistemas de Windows y Macintosh la paleta de color est formada por 256 colores, elegidos entre
los 16.777.216 posibles. El problema es que difieren en la eleccin de los 256 colores para la formacin de
sus paletas de color, por defecto.

En Dreamweaver la paleta de colores est formada por 216 colores seguros para la Web, es decir, que se
muestran de la misma forma en los dos sistemas, adems de estar orientada a dispositivos Web
alternativos como las PDA y las pantallas de telfonos mviles. Esta paleta se nos presenta en Cubos de
color, de forma predeterminada, y en Tono continuo.



Figura 4.42. Cubo de color.


Figura 4.43. Tono continuo.

En Dreamweaver, en el Inspector de Propiedades o en los cuadros de dilogo de los elementos que
forman la pgina, existe un cuadro de color que, si lo pulsamos, nos abre el Selector de color.
Dreamweaver CS4. Captulo 4. Documentos

91


Figura 4.44. Selector de color.
Desde el selector de color podemos:

Utilizar el cuentagotas para seleccionar un color de la paleta activa. El cuentagotas tambin nos permite
seleccionar un color incluso fuera de las ventanas de Dreamweaver. Basta con hacer clic en el color que
deseemos.

Quitar el color actual y establecer el color predeterminado del navegador. Hacemos clic en el botn
Color predeterminado.

Abrir el selector de colores del sistema, para seleccionar uno de los colores bsicos del sistema
operativo. Hacemos clic en el botn Colores del Sistema y se abre la ventana Color.

Figura 4.45. Ventana Color.
Dreamweaver CS4. Captulo 4. Documentos

92

Desde este cuadro de dilogo podemos seleccionar uno de los Colores bsicos. Tambin podemos
seleccionar un color del espectro de colores o bien definir su valor en los cuadros de texto
correspondientes. Una vez seleccionado lo podemos Agregar a los colores personalizados y aceptamos los
cambios para utilizar el color seleccionado.

Cambiar de paleta de colores. Las paletas de colores Sistema Windows, Sistema Mac y Escala de grises
no son seguras para la Web. Si utilizamos una de estas paletas y a continuacin elegimos Ajustar a Web
Safe, Dreamweaver sustituir el color seleccionado por el color seguro para la Web que ms se le parezca.

En HTML, los colores se expresan en forma de valor hexadecimal. El sistema hexadecimal es un sistema de
numeracin de base 16, es decir, utiliza 16 dgitos en su numeracin (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E,
F).

El valor hexadecimal que representa al color est formado por el smbolo # y seis dgitos (hexadecimales),
de los cuales, los dos primeros corresponden al color rojo, los dos siguientes al color verde y los dos
ltimos al color azul. Con estos dos dgitos podemos obtener las 256 intensidades diferentes de cada color.

Por ejemplo, el color amarillo tiene valor hexadecimal #FFFF00, es decir el valor del color Rojo es FF, el del
color Verde es FF y el del color Azul es 00, (que se corresponden con el valor en decimal Rojo:255,
Verde:255, Azul:0).

4.6. Texto en un documento Web

Para insertar texto en nuestra pgina, lo haremos desde la vista diseo. Aunque es posible hacerlo
directamente en cdigo HTML, desde la vista Cdigo, podremos comprobar que Dreamweaver genera
automticamente dicho cdigo sobre el texto y formato introducido desde la vista diseo.

Tambin podemos utilizar el texto creado con otras aplicaciones. Abrimos el fichero con el texto, lo
seleccionamos y lo copiamos con el comando Edicin>Copiar o Ctrl+C.

Abrimos nuestro documento en la vista Diseo, colocamos el cursor donde vayamos a insertar el texto y lo
pegamos con el comando Edicin>Pegar o Ctrl+V.

Dreamweaver conserva el formato de texto original. Este formato lo podremos modificar si lo
seleccionamos previamente.

Propiedades del texto

Como hemos visto, al crear un nuevo documento, podemos definir las caractersticas que tendr en lo
referente a formato del texto, es decir, el tipo de fuente, el tamao, el color, etc.

No obstante, todos estos atributos los podemos modificar de forma puntual para el texto que estamos
editando en ese momento. Las modificaciones las podemos realizar desde el men Formato. Sin embargo,
desde el Inspector de Propiedades tenemos tambin la posibilidad de aplicar el formato HTML o de Hojas
de estilos en cascada (CSS). Al aplicar formato HTML, Dreamweaver aade propiedades al cdigo HTML
Dreamweaver CS4. Captulo 4. Documentos

93

en el cuerpo de la pgina. Al aplicar formato CSS, Dreamweaver escribe propiedades en la seccin head del
documento o en una hoja de estilos independiente.
Aunque veremos CSS ms adelante, vamos a observar ahora el aspecto del inspector de propiedades con
el botn CSS pulsado:



Figura 4.46. Inspector de propiedades. Formato de texto. Botn CSS pulsado.

o Regla de destino: es la regla que est editando en el inspector de propiedades de CSS. Si hay una
regla ya existente aplicada al texto, se mostrar el formato de la regla que afecta al texto al hacer
clic en el texto de la pgina. Tambin se puede utilizar el men emergente Regla de destino para
crear nuevas reglas CSS y nuevos estilos en lnea o aplicar clases existentes al texto seleccionado. Si
deseas crear una regla nueva, debers rellenar el cuadro de dilogo Nueva regla CSS.

o Editar regla: abre el cuadro de dilogo Definicin de regla CSS para la regla de destino. Si
seleccionas Nueva regla CSS del men emergente Regla de destino y haces clic en el botn Editar
regla, Dreamweaver abrir el cuadro de dilogo de definicin de nueva regla CSS.

o Panel CSS: abre el panel Estilos CSS y muestra propiedades para la regla de destino en la vista
actual.

o Fuente: cambia la fuente de la regla de destino.

o Tamao: establece el tamao de la fuente para la regla de destino.

o Color del texto: establece el color seleccionado como color de fuente en la regla de destino.

o Negrita: aade la propiedad de negrita a la regla de destino.

o Cursiva: aade la propiedad de cursiva a la regla de destino.

o Alinear a la izquierda, al centro o a la derecha y justificar: aade las correspondientes propiedades
de alineacin a la regla de destino.

Es importante observar que las propiedades de Fuente, Tamao, Color del texto, Negrita, Cursiva y
Alineamiento siempre muestran las propiedades correspondientes a la regla que afecta a la seleccin
actual de la ventana de documento. Al cambiar alguna de estas propiedades, los cambios que realice
afectarn a la regla de destino.

Vamos a ver ahora el inspector de propiedades con el botn HTML pulsado :
Dreamweaver CS4. Captulo 4. Documentos

94



Figura 4.47. Inspector de propiedades. Formato de texto. Botn HTML pulsado.

De todas las opciones que podemos modificar desde el Inspector de Propiedades cuando pulsamos el
botn HTML, las correspondientes al formato de un texto seleccionado son:

Formato: establece el estilo de prrafo del texto seleccionado. Prrafo aplica el formato
predeterminado para una etiqueta <p>, Encabezado 1 aade una etiqueta H1, etc.

ID: asigna una ID a la seleccin. El men desplegable ID (en caso de ser aplicable) enumera
todos los ID declarados pero no utilizados en el documento.

Clase: muestra el estilo de clase que se aplica actualmente al texto seleccionado. Si no se
ha aplicado ningn estilo a la seleccin, el men emergente muestra Sin estilo CSS. Si se
han aplicado varios estilos a la seleccin, el men aparece en blanco.
Puedes utilizar el men Estilo para seguir uno de estos procedimientos:
o Seleccione el estilo que desea aplicar a la seleccin.
o Seleccione Ninguno para quitar el estilo seleccionado actualmente.
o Seleccione Cambiar nombre para cambiar el nombre del estilo.
o Seleccione Adjuntar hoja de estilos para abrir un cuadro de dilogo en el que
poder adjuntar una hoja de estilos externa a la pgina.
Negrita: aplica <b> o <strong> al texto seleccionado, en funcin de la preferencia de estilo
definida en la categora General del cuadro de dilogo Preferencias.

Cursiva: aplica <i> o <em> al texto seleccionado, en funcin de la preferencia de estilo
definida en la categora General del cuadro de dilogo Preferencias.

Lista sin ordenar: crea una lista con vietas del texto seleccionado. Si no hay texto
seleccionado, comienza una nueva lista con vietas.

Lista ordenada: crea una lista numerada del texto seleccionado. Si no hay texto
seleccionado, comienza una nueva lista numerada.

Sangra y Anular sangra: inserta y anula sangra en el texto seleccionado aplicando o
quitando la etiqueta
blockquote. En una lista, la aplicacin de sangra crea una lista anidada y su anulacin
elimina la anidacin de la lista.

Vnculo: crea un vnculo de hipertexto del texto seleccionado. Haz clic en el icono de
carpeta para localizar un archivo del sitio, escribe el URL, arrastra el icono de sealizacin
Dreamweaver CS4. Captulo 4. Documentos

95

hasta un archivo del panel Archivos o arrastra un archivo desde el panel Archivos hasta el
cuadro.

Ttulo: especifica el texto de informacin sobre una herramienta para un vnculo de
hipertexto.
Destino: permite especificar el marco o la ventana donde se cargar el documento
vinculado.
o _blank carga el archivo vinculado en una nueva ventana sin nombre del
navegador.
o _parent carga el archivo vinculado en el conjunto de marcos padre o en la
ventana del marco que contiene el vnculo. Si el marco que contiene el vnculo
no est anidado, el archivo vinculado se cargar en la ventana completa del
navegador.
o _self carga el archivo vinculado en el mismo marco o ventana que el vnculo.
Este destino est implcito, por lo que normalmente no es preciso
especificarlo.
o _top carga el archivo vinculado en la ventana completa del navegador,
quitando as todos los marcos.

Ms adelante, en el captulo dedicado a vnculos, veremos los destinos con detenimiento.


RECOMENDACIN. Selecciona tipos de letras que sean universales para que se puedan leer
perfectamente desde cualquier plataforma y navegador. Cuida que el tamao no sea muy grande que
alargue innecesariamente la pgina, pero tampoco demasiado pequeo que dificulte su lectura.



Es importante observar que, aunque CSS es el mtodo preferido para aplicar formato al texto,
Dreamweaver todava permite aplicar formato al texto con HTML.

Propiedades del prrafo

Podemos modificar el formato de un prrafo ejecutando el comando Formato de prrafo desde el men
Formato.


Figura 4.48. Comando Formato de prrafo. Men Formato.
Dreamweaver CS4. Captulo 4. Documentos

96

Al igual que podemos modificar de forma concreta un texto, desde el Inspector de propiedades HTML
tambin podemos modificar prrafos enteros.
Para dar formato a un prrafo, no hace falta seleccionarlo previamente, basta con colocar el cursor en el
prrafo y hacer clic sobre el botn correspondiente para aplicar los cambios.

En el inspector de propiedades HTML, despliega Formato y selecciona un formato de prrafo (por
ejemplo, Encabezado 1, Encabezado 2, Texto con formato predeterminado, etc.)


Figura 4.49. Seleccionar formato de prrafo.

La etiqueta HTML asociada con el estilo seleccionado (por ejemplo, h1 para Encabezado 1, h2 para
Encabezado 2, pre para Formato predeterminado, etc.) se aplicar a todo el prrafo. La etiqueta HTML
asociada es <p>, etiqueta de inicio de prrafo y </p>, etiqueta de fin de prrafo. La etiqueta HTML
asociada a cada uno de los encabezados es <h1> y </h1> para indicar el inicio y el final del Encabezado 1,
<h2> y </h2> para el Encabezado 2, <h3> y </h3> para el Encabezado 3 y as sucesivamente. El formato
predeterminado utiliza la fuente Courier y asocia las etiquetas <pre> y </pre> para indicar el inicio y el
final.

Para quitar un formato de prrafo, selecciona Ninguno.

Cuando aplicas una etiqueta de encabezado a un prrafo, Dreamweaver aade automticamente la
siguiente lnea de texto como un prrafo sencillo. Para cambiar esta configuracin, selecciona Edicin >
Preferencias, y a continuacin, en la categora General, en la seccin Opciones de edicin, comprueba que
la casilla Cambiar a prrafo sencillo tras el encabezado no est activada.

Dreamweaver CS4. Captulo 4. Documentos

97


Figura 4.50. Cambiar a prrafo sencillo tras el encabezado.

Otras opciones del formato de prrafo que podemos modificar desde el Inspector de propiedades HTML
son:
Lista sin ordenar: nos permite crear una lista con vietas de los prrafos seleccionados. Si no
hay texto seleccionado, aplica el formato lista sin ordenar al prrafo donde se encuentre el
cursor y comienza una nueva lista con vietas. Las etiquetas HTML asociadas a las listas sin
ordenar son:
<ul>
<li>elemento 1</li>
<li>elemento 2</li>
<li>elemento 3</li>
</ul>
Lista ordenada: nos permite crear una lista numerada de los prrafos seleccionados. Si no
hay texto seleccionado, aplica el formato lista ordenada al prrafo donde se encuentre el
cursor y comienza una nueva lista numerada. Las etiquetas HTML asociadas a las listas
ordenada son:
<ol>
<li>elemento 1</li>
<li>elemento 2</li>
<li>elemento 3</li>
Dreamweaver CS4. Captulo 4. Documentos

98

</ol>
Desde el cuadro de dilogo Propiedades de lista podemos configurar el aspecto de toda una
lista o de sus elementos por separado. Desde aqu podemos establecer el estilo de nmero,
restablecer el recuento o configurar las opciones de las vietas de los distintos elementos o de
toda la lista.
Si queremos establecer las propiedades de toda una lista debemos crear, en la ventana de
documento, al menos un elemento de la lista.
Colocamos el cursor sobre el texto del elemento de lista y seleccionamos Formato > Lista >
Propiedades para abrir el cuadro de dilogo Propiedades de lista.

Figura 4.51. Men Formato. Comando Lista. Propiedades de la lista.
En el cuadro de dilogo que aparece, podemos definir las opciones para la lista.

Figura 4.52. Cuadro de dilogo Propiedades de lista.
Tipo de lista: especifica las propiedades de la lista. Desde el men emergente podemos
seleccionar Lista con vietas, Lista con nmeros, Lista de directorio o Lista de men.
Dreamweaver CS4. Captulo 4. Documentos

99


Figura 4.53. Tipo de lista.
Estilo: determina el estilo de las vietas o los nmeros empleados para una lista con vietas
o numerada. Todos los elementos de la lista tendrn este estilo a menos que especifiquemos
un estilo nuevo para determinados elementos.

Figura 4.54. Estilo lista con nmeros.
Iniciar recuento: nos permite establecer el valor del primer elemento en una lista
numerada.
Si queremos aplicar un estilo concreto a un elemento de la lista, entonces colocaremos el
cursor sobre el texto del elemento de la lista modificar, accedemos al cuadro de dilogo
Propiedades de lista del modo que ya hemos descrito, desplegamos Nuevo estilo en la seccin
Elemento de lista y seleccionamos un estilo nuevo. El campo Rest. Recuento a:, permite
establecer un nmero concreto desde el que comienza la numeracin de los elementos de
lista.

Figura 4.55. Aplicar formato a un elemento de una lista.

Dreamweaver CS4. Captulo 4. Documentos

100

Hacemos clic en Aceptar para guardar la configuracin y cerrar el cuadro de dilogo. De esta
forma el nuevo estilo se aplicar automticamente a todos los elementos que vayamos
aadiendo a la lista y/o al elemento concreto de la lista.
Las propiedades de un Elemento de la lista, tambin podemos establecerlas desde el botn
en el Panel del Inspector de Propiedades.
Sangra y Anular sangra: inserta y anula sangra en el texto seleccionado. Las etiquetas
HTML asociadas a la sangra son: <blockquote> para iniciar la sangra y </blockquote> para
cerrar la sangra. Si aplicamos sangra en una lista, nos creara una lista anidada.
Si seleccionamos Anular sangra, quitara la sangra del prrafo seleccionado o la anidacin de
la lista. Esta accin eliminara el cdigo HTML asociado.
4.7. Estilos CSS
Como ya hemos mencionado, el panel del Inspector de Propiedades cuenta con un botn
. Al aplicar formato CSS, Dreamweaver escribe propiedades en la seccin head del
documento o en una hoja de estilos independiente. No se debe olvidar que al crear estilos en
lnea CSS, Dreamweaver aade cdigo de atributos de estilo directamente al cuerpo de la
pgina.
Podemos tambin acceder a los distintos estilos CSS que podemos crear y aplicar a nuestro
documento desde el men Formato > Estilo CSS.

Figura 4.56. Comando Estilos CSS. Men Formato.
Los estilos CSS (Cascading Style Sheets), llamadas tambin Hojas de Estilo en Cascada, son un
conjunto de reglas que nos permiten configurar el aspecto de las pginas de nuestro Sitio.
La utilizacin de estilos CSS para aplicar formato a una pgina permite separar el contenido de
la presentacin. El contenido de la pgina (el cdigo HTML) reside en el archivo HTML,
mientras que las reglas CSS que definen la presentacin del cdigo residen en otro archivo
(una hoja de estilos externa) o en otra parte del documento HTML (normalmente, en la
Dreamweaver CS4. Captulo 4. Documentos

101

seccin head). La separacin del contenido y la presentacin hace que resulte mucho ms fcil
mantener el aspecto del sitio desde una ubicacin central, ya que no es necesario actualizar las
propiedades de las distintas pginas cuando se desea realizar algn cambio. La separacin del
contenido y la presentacin tambin depura y simplifica el cdigo HTML, lo que disminuye el
tiempo de carga en los navegadores y agiliza la navegacin para personas con problemas de
accesibilidad.
Con CSS, se pueden controlar numerosas propiedades del texto, entre ellas las fuentes y los
tamaos de fuente especficos; negrita, cursiva, subrayado y sombras de texto; color de texto y
de fondo; color y subrayado de vnculos; etc. Si utilizas CSS para controlar las fuentes, tambin
el diseo y el aspecto de la pgina sern ms coherentes en mltiples navegadores.
Adems de para dar formato al texto, se puede utilizar CSS para definir el formato y la posicin
de elementos de nivel de bloque (block-level) de una pgina Web. Un elemento de nivel de
bloque es un elemento de contenido independiente que normalmente est separado por una
nueva lnea en el cdigo HTML y que tiene visualmente el formato de un bloque. Por ejemplo,
las etiquetas h1, p y div generan elementos de nivel de bloque en una pgina Web. Puedes
ajustar mrgenes y bordes para elementos de nivel de bloque, situarlos en una ubicacin
concreta, aadirles color de fondo, colocar texto flotante alrededor de ellos, etc. La
manipulacin de elementos de nivel de bloque es la forma en que se establece el diseo de las
pginas con CSS.
Crear un estilo CSS
Para crear un estilo CSS, seleccionamos el texto cuyas propiedades vamos a modificar.

Ejercicio
El objetivo en este ejercicio ser crear un nuevo estilo CSS a partir de un texto previamente
escrito.

Crea un nuevo documento HTML segn hemos visto anteriormente: Archivo>Nuevo...
Pgina en blanco>HTML>Crear.

En vista Diseo, escribe en la ventana del Documento el texto: Creacin de un nuevo estilo
CSS.


Figura 4.57. Escribir texto en la ventana del documento.

Selecciona la palabra nuevo haciendo doble clic sobre ella con el ratn.

En el Inspector de Propiedades CSS elige:
o Regla de destino <Nueva regla CSS> y pulsa cualquier opcin del inspector de
propiedades, por ejemplo el botn negrita .

Dreamweaver CS4. Captulo 4. Documentos

102

o En el cuadro de dilogo Nueva reglas CSS despliega Tipo de Selector y
selecciona Clase (puede ser aplicado a cualquier elemento HTML). En Nombre
del selector introduce un nombre que sea identificativo del nuevo estilo CSS,
por ejemplo .normal (Los nombres de clase deben comenzar por un punto y
pueden contener cualquier combinacin alfanumrica. Si te olvidas de poner el
punto inicial, Dreamweaver lo har automticamente). Despliega Definicin
de regla y selecciona (Slo este documento) para que el nuevo estilo CSS
quede incrustado en el documento actual. Despus pulsa Aceptar.


Figura 4.58. Nueva regla CSS.

o A continuacin pulsa el botn del inspector de propiedades CSS.
Se abre el cuadro de dilogo Definicin de regla para .normal, ya que .normal es el
nombre del selector que habamos escogido en el cuadro de dilogo anterior. En
este cuadro, categora Tipo, introducimos las siguientes propiedades: Fuente
familia Verdana, Geneva, sans-serif; Tamao 14 pxeles, Color azul #0000FF, Estilo
cursiva (italic). Luego pulsa en Aplicar para ver los cambios en pantalla y por
ltimo, pulsa Aceptar.

Dreamweaver CS4. Captulo 4. Documentos

103



Figura 4.59. Definicin de regla.

De forma automtica, Dreamweaver le ha aplicado a nuestro texto seleccionado los
atributos del nuevo estilo CSS.



Figura 4.60. Nuevo estilo CSS.

Si en algn momento deseas cambiarle el nombre a una regla CSS, puedes hacerlo
fcilmente desde el panel Estilos CSS, ficha Todo, haciendo un solo clic sobre la regla cuyo
nombre deseas modificar; automticamente el nombre de la regla se convierte en editable, y
podrs ponerle el nombre que desees, aunque nosotros no vamos a hacerlo en este ejercicio.

Dreamweaver CS4. Captulo 4. Documentos

104



Figura 4.61. Cambiar nombre a una regla CSS.

Para editar la regla, puedes hacer doble clic sobre ella en este mismo panel, pulsar en el
icono Editar estilo de la barra de herramientas del panel, o simplemente desplegar la
propiedad a modificar desde Propiedades de .normal, donde tambin puedes aadirle
nuevas propiedades.
Si deseas eliminarla, puedes seleccionarla en el panel y pulsar Eliminar regla CSS en la
barra de herramientas de este panel Estilos CSS.

Guarda el documento (Archivo>Guardar como) con el nombre estilos.

Una vez creada la regla CSS, para aplicarla sobre un elemento del documento en el que
estamos trabajando, basta con seleccionar dicho elemento y elegir, en el Inspector de
Propiedades CSS, la regla de destino que deseamos aplicar desplegando el men disponible en
el cuadro Regla de destino.


4.8. Tipos de estilos CSS
Crear nuevos estilos CSS
Hemos comprobado como Dreamweaver nos permite crear estilos de forma rpida y sencilla.
Los estilos creados de esta manera, se agrupan en una hoja de estilos que se encuentra
incrustada en el cdigo de nuestro documento Web.
Para crear un nuevo estilo, podemos hacerlo de varias formas:
Haciendo clic en el botn Nueva regla CSS del Panel Estilos CSS, que abre el cuadro de
dilogo Nueva regla CSS.
Desde el men Formato>Estilos CSS>Nuevo.
Dreamweaver CS4. Captulo 4. Documentos

105



Figura 4.62. Comando Nueva regla CSS desde el men Formato.
Una tercera forma de abrir este cuadro de dilogo es desde el Inspector de Propiedades
CSS, seleccionando <Nueva regla CSS> en Regla de destino
y haciendo clic en .
Segn el Tipo de selector que seleccionemos en el cuadro de dilogo Nueva regla CSS,
podemos hablar de:
Estilos de Clase
Son los nicos estilos que se pueden aplicar a cualquier texto del documento como atributo
class.
Ejercicio

El objetivo en este ejercicio ser crear y definir un estilo CSS de clase.

Abre el documento estilos.html, si no lo tienes abierto.

Para crear un estilo de clase, abre el cuadro de dilogo Nueva regla CSS con cualquiera de
los procedimientos descritos anteriormente.

En Tipo de selector, activa la opcin Clase (puede ser aplicable a cualquier elemento HTML).

Escribe el nombre .titulo2 para el nuevo estilo en el cuadro de texto Nombre del selector.
Los nombres de los estilos de clase, como mencionbamos en el ejercicio anterior, deben
comenzar con un punto y pueden contener valores alfanumricos. Si no pones el punto,
Dreamweaver lo har de forma automtica.

En el apartado Definicin de regla, selecciona (Nuevo archivo de hoja de estilos) para crear
Dreamweaver CS4. Captulo 4. Documentos

106

una hoja de estilo externa.



Figura 4.63. Crear un nuevo archivo de hoja de estilos.

Haz clic en Aceptar; se abrir el cuadro de dilogo Guardar archivo de hoja de estilos como.
Localiza la carpeta donde vayas a guardar la hoja de estilos en el cuadro. Escribe el nombre
hoja1 para la nueva hoja de estilos. La extensin .css se pone de forma automtica. Haz clic en
el botn Guardar.

Dreamweaver CS4. Captulo 4. Documentos

107



Figura 4.64. Guardar archivo como hoja de estilos css.

Al hacer clic en Aceptar, automticamente se abre el cuadro de dilogo Definicin de regla
para .titulo2 en hoja1.css.

Dreamweaver CS4. Captulo 4. Documentos

108



Figura 4.65. Definicin de regla para .titulo2 en hoja1.css

En este cuadro de dilogo podemos configurar diferentes atributos para definir el estilo desde
las distintas categoras:

Tipo: desde esta categora podemos definir los atributos de texto, como el tipo de fuente, el
tamao, color, etc.
Fondo: podemos definir los atributos del fondo, imagen de fondo, decidir si esta imagen se
repite o no, si est fija a su posicin original, etc.
Bloque: nos permite definir la configuracin del espaciado y de la alineacin de las etiquetas
y propiedades.
Cuadro: desde aqu podemos definir la configuracin de las etiquetas y propiedades que
controlan la ubicacin de los elementos en la pgina.
Borde: define la configuracin de los bordes que rodean a los elementos (Ancho, Color o
Estilo).
Lista: nos permite definir la configuracin de la lista para las etiquetas de lista (por ejemplo
el tamao y el tipo de vietas).
Posicin: sus propiedades determinan cmo debe colocarse el contenido relacionado con el
estilo CSS en la pgina.
Extensiones: podemos definir los atributos de los filtros, saltos de pgina y opciones de
puntero.

Vamos ahora a modificar las siguientes propiedades de la Categora Tipo del estilo .titulo2,
creado anteriormente:

o Fuente: Georgia, Times New Roman, Times, Serif.
o Tamao: 24 pxeles.
o Estilo: oblicua.
o Alto de lnea: normal.
o Grosor: negrita.
Dreamweaver CS4. Captulo 4. Documentos

109

o Variante: versales.
o Color: azul oscuro (#000099).



Figura 4.66. Modificar definicin de regla.

Haz clic en los botones Aplicar y Aceptar, respectivamente, para guardar los cambios en
estilos.html.


Ahora, si quisiramos agregar una nueva regla CSS a la hoja de estilos recin creada, veramos
si desplegsemos el cuadro de dilogo Nueva regla CSS como ya hemos aprendido, la
hoja1.css en el desplegable Definicin de regla.

Dreamweaver CS4. Captulo 4. Documentos

110


Figura 4.67. Crear una nueva regla CSS en una hoja ya existente.
Estilos de Etiqueta.
Son los estilos que se utilizan para redefinir el formato predeterminado de una etiqueta HTML
especfica.
Por ejemplo, si aplicamos el formato Encabezado 1 a un texto, Dreamweaver aplicar de forma
automtica las etiquetas <h1> de inicio y </h1> de cierre al texto seleccionado. Si redefinimos
la etiqueta <h1>, todo el texto al que se le haya aplicado cambiar al nuevo formato.
Para crear este nuevo estilo podemos hacer clic en el botn Nueva regla CSS en el panel
Estilos CSS y se abre el cuadro de dilogo Nueva regla CSS.
Al seleccionar Etiqueta desde Tipo de selector, podemos seleccionar la etiqueta que vayamos
a modificar desde la lista que se despliega en el cuadro Nombre del selector. En nuestro
ejemplo vamos a seleccionar h1 (encabezado 1) y vamos a definir la regla en la hoja1.css que
habamos creado antes.
Dreamweaver CS4. Captulo 4. Documentos

111


Figura 4.68. Crear nueva regla CSS de etiqueta.

Al hacer clic en Aceptar, se activa el cuadro de dilogo Definicin de regla para h1 en
hoja1.css, en el cual podemos modificar como hemos aprendido anteriormente, las
propiedades que deseemos y aceptar los cambios, como por ejemplo en la Figura 4.69. de
abajo.
Dreamweaver CS4. Captulo 4. Documentos

112


Figura 4.69. Definicin de regla para h1.
Automticamente, si vamos cambiamos al inspector de propiedades HTML, desplegamos
Formato y seleccionamos Encabezado1, el texto que
tecleemos en la ventana del documento, tendr las propiedades de la regla CSS que hemos
creado para la etiqueta h1.
Hojas de estilo Avanzadas.
Son los estilos, tambin llamados compuestos, que se utilizan para redefinir el formato
predeterminado de una combinacin concreta de etiquetas que contengan un cdigo
especfico de atributo Id.
Por ejemplo, si queremos modificar un encabezado h2 introducido en la celda de una tabla,
podemos modificar las etiquetas <td> y <h2> respectivamente.
Para crear este nuevo estilo debemos hacer clic en el botn Nueva regla CSS y nos
aparece el cuadro de dilogo Nueva regla CSS.
Seleccionamos la opcin Compuesto (basado en la seleccin) desde Tipo de selector y en el
Nombre del selector podemos escribir las etiquetas que vayamos a modificar, en nuestro
Dreamweaver CS4. Captulo 4. Documentos

113

ejemplo td h2. En Definicin de la regla, podemos decidir si agregar esta nueva regla a
hoja1.css o aplicarla slo a este documento.

Figura 4.70. Crear una regla CSS compuesta.

Al hacer clic en Aceptar, se activa el cuadro de dilogo Definicin de regla para la td h2 y
desde aqu podemos modificar las propiedades que deseemos; al aceptar los cambios, de
forma automtica se aplicar el nuevo formato a todo el texto que tenga Formato Encabezado
2 y est dentro de la celda de una tabla que hayamos insertado en el documento.
4.9. Operaciones con estilos CSS
Editar un estilo CSS
Para modificar un estilo existente, podemos editarlo, como ya hemos mencionado antes,
desde el botn Editar estilo de la barra de herramientas del panel Estilos CSS, o
seleccionar la opcin Edicin que nos aparece en el men contextual, al pulsar con el botn
derecho del ratn sobre el estilo correspondiente.
Dreamweaver CS4. Captulo 4. Documentos

114


Figura 4.71. Editar regla CSS desde el men contextual Edicin.
En cualquier caso, se abrir el cuadro de dilogo Definicin de regla desde el que podremos
modificar las propiedades de la regla CSS.
Borrar un estilo CSS
Para eliminar una regla CSS de una hoja de estilos, basta con seleccionarla desde el panel
Estilos CSS y hacer clic en el botn Eliminar regla CSS .

Mover estilos CSS
Dreamweaver nos permite convertir reglas CSS en externas, cambiarlas de ubicacin y
reorganizarlas segn nuestras necesidades.
Simplemente, en el panel Estilos CSS tendremos que seleccionar una regla CSS que hayamos
creado, por ejemplo en nuestro documento estilos.html y arrastrarla con el ratn, bien al
interior de hoja1.css, o bien una regla de hoja1.css al exterior de la hoja.
Si queremos integrar una regla en una hoja de estilos externa con la que contemos de
antemano, tambin podemos seleccionar la regla y con el botn del ratn, seleccionar Mover
reglas CSS desde el men contextual que se abre:
Dreamweaver CS4. Captulo 4. Documentos

115


Figura 4.72. Mover regla CSS desde men contextual.
Automticamente, se abre el cuadro de dilogo Mover a hoja de estilos externa, desde el que
podemos seleccionar la hoja1.css que habamos creado antes, o localizar otra hoja de estilos
que tengamos en nuestro equipo pulsando el botn Examinar; tambin podemos moverla a
una nueva hoja de estilos.

Figura 4.73. Mover a hoja de estilos externa.
Aplicar Hojas de Estilo Externas
Ejercicio

El objetivo en este ejercicio ser aplicar una hoja de estilo externa a un nuevo documento,
para lo cual vamos a utilizar una de las hojas de estilos de muestra que nos ofrece
Dreamweaver.
Con esto podemos utilizar estilos que se encuentren en un archivo externo a cualquier
documento HTML. Esta posibilidad es muy til cuando nuestro Sitio Web tiene varias pginas y
con definir una sola hoja de estilos, podremos utilizarlos en todas las pginas del sitio.

Crea un nuevo documento HTML segn hemos visto anteriormente. (Archivo>Nuevo...
Pgina en blanco>HTML>Crear).

Para asociar una hoja de estilos al nuevo documento, haz clic en el botn Adjuntar hoja de
Dreamweaver CS4. Captulo 4. Documentos

116

estilos del panel Estilos CSS.

Se abre el cuadro de dilogo Vincular hoja de estilos externa.



Figura 4.74. Cuadro de dilogo Vincular hoja de estilos externa.

En Aadir como, puedes seleccionar una de las siguientes opciones:

o Vincular: para crear un vnculo entre el documento actual y la hoja de estilos
externa. De esta forma se crea una etiqueta de vnculo href en el cdigo HTML y
conduce al URL al lugar en el que se encuentra la hoja de estilos publicada. Haz clic
en esta opcin; de esta forma conseguimos que con una sola hoja de estilos
podamos tener vinculadas varias pginas.

o Importar: para anidar la hoja de estilos en nuestra pgina.

o En el botn Vista previa, podemos verificar que la hoja de estilos aplica los estilos
que deseamos en la pgina actual. Si estos estilos no cumplen con lo que
esperamos, podemos hacer clic en Cancelar y la pgina recupera su aspecto
anterior.


Ahora pulsa en hojas de estilos de muestra para abrir el cuadro de dilogo del mismo
nombre. Selecciona Diseo completo: Accesible y despus pulsa el botn Examinar del
cuadro Guardar en para localizar la carpeta del sitio MiWeb dentro de la cual debers
guardar la nueva hoja que por defecto se llama Accessible_Design.css. Por ltimo, pulsa en
Aceptar.

Dreamweaver CS4. Captulo 4. Documentos

117



Figura 4.75. Hojas de estilos de muestra.

Como el documento nuevo nunca ha sido guardado antes, Dreamweaver te lo recordar con el
siguiente mensaje, que debers leer y aceptar.



Figura 4.76. Mensaje de alerta del programa.

El nombre de la hoja de estilos CSS externa aparece en el panel Estilos CSS.

Dreamweaver CS4. Captulo 4. Documentos

118



Figura 4.77. Hoja de estilos externa.

En vista Diseo, escribe en la ventana del Documento el texto: Utilizacin de un estilo CSS
externo y observa sus propiedades.



Figura 4.78. Estilo CSS externo.

Guarda el documento (Archivo>Guardar como) con el nombre estilos2.


119















Captulo 5.
Imgenes


Dreamweaver CS4. Captulo 5. Imgenes
120

Captulo 5. IMGENES
Las imgenes de un sitio Web atraen la atencin de los visitantes y transmiten informacin
inmediata sobre el tema que trata el sitio.
La imagen para la Web es distinta a la imagen para imprimir. En la Web se sigue trabajando
para que las imgenes sigan teniendo el tamao ptimo ms pequeo posible.
Cuando estamos construyendo nuestra Web, el principal problema que nos podemos
encontrar es el tiempo de descarga de nuestra pgina. La insercin de imgenes puede hacer
pesada nuestra pgina y hacer que el usuario desespere en el tiempo de acceso a la misma.
Una forma de optimizar el tiempo de descarga de nuestra Web es disminuir el tamao de un
fichero de imagen. Esto podemos hacerlo disminuyendo las dimensiones de la imagen o su
resolucin.
Las imgenes generalmente se miden en pxeles y para disminuir sus dimensiones deberemos
utilizar programas de edicin de imgenes.

RECOMENDACIN. Si reducimos el tamao de una imagen con Dreamweaver, nos puede dar
la falsa impresin de que la imagen es ms pequea, pero realmente lo nico que hemos
hecho es reducir la forma en que la vemos, el tamao sigue siendo el mismo.


Otra forma de disminuir el tamao del fichero es comprimir las imgenes, pero manteniendo
un equilibrio con su calidad. Debemos tener presente que la informacin que se pierde en la
compresin de una imagen es irrecuperable.

RECOMENDACIN. Deberemos tener la imagen original con la mxima resolucin y trabajar
con una copia de la misma, pues si en algn momento necesitamos editarla nuevamente no
habremos perdido informacin alguna.


5.1. Formatos de archivos de imgenes
Los formatos de imgenes se dividen principalmente en dos categoras: mapa de bits y
vectoriales.
Mapa de bits
El formato de mapa de bits est basado en la informacin contenida en cada pxel de la
imagen. Esta informacin consta principalmente del color y de la posicin de cada pxel
expresada en coordenadas.
Cuanta mayor informacin tengamos de la imagen, es decir cuanto mayor sea el nmero de
pxeles, mayor ser el tamao del fichero que la contiene. Este formato puede representar
imgenes de fotografas, dibujos, ilustraciones, etc.
Dreamweaver CS4. Captulo 5. Imgenes

121

En este tipo de formato debemos tener en cuenta los cambios de tamao, pues suele haber
prdida de calidad en la imagen, especialmente cuando aumentamos sus dimensiones, pues el
nmero de pxeles es invariable.
Veamos un ejemplo de una imagen realizada con un formato de mapa de bits.

Figura 5.1. Imagen de mapa de bits.

Figura 5.2. Imagen de mapa de bits ampliada.

En los ejemplos anteriores se aprecia una prdida de calidad en la imagen de la figura 5.2 al
aumentar su tamao con respecto a la imagen original, figura 5.1.
Aunque existen formatos muy conocidos de mapa de bits, como por ejemplo BMP, TIFF, etc.
stos no se suelen utilizar para insertar en las pginas Web porque su tamao es
excesivamente grande y retrasara mucho la carga de la pgina.
Los formatos que generalmente se utilizan para las pginas Web son GIF, JPEG y PNG por ser
comprimidos y por tanto ocupar menor tamao. Los formatos GIF y JPEG son los ms
compatibles y pueden verse en la mayora de los navegadores, mientras que PNG es
compatible a partir de las versiones de Internet Explorer 4.0 y Netscape Navigator 4.04.
El formato GIF (Graphic Interchange Format), como su nombre indica, es un formato de
intercambio de grficos y es idneo para visualizar imgenes con grandes reas de color
homogneo, como logotipos, iconos, botones y otras imgenes con colores y tonos uniformes.
El mtodo de compresin est basado en una paleta de 256 colores como mximo, de tal
forma que si pudiramos observar la cadena de nmeros entre 0 y 255 que describen los
colores, podramos comprobar que existen muchos nmero iguales consecutivos,
correspondientes a las zonas ms o menos extensas del mismo color. As, por ejemplo, en vez
de almacenar 300 veces seguidas el color 132, es ms sencillo decir que los siguientes 30o
nmeros son iguales al 132 y para esto se necesitan muy pocos bytes de memoria.
Dreamweaver CS4. Captulo 5. Imgenes

122

El formato JPEG (Joint Photographic Experts Group) es el mejor para fotografas, texturas o
imgenes con ms de 256 colores. Este formato posibilita un equilibrio adecuado entre la
calidad de la imagen y el tamao de archivo.
El formato de archivo PNG (Portable Network Group) soporta bien tanto las imgenes de
pocos colores como las multicolores. Es compatible con el canal alfa para transparencias. PNG
es el formato de archivo nativo de Fireworks y dichos archivos se deben guardar con la
extensin .png para que Dreamweaver pueda reconocerlos como tales.
Para encontrar el formato ms idneo de la imagen, existen varios programas de edicin de
imgenes como Paint Shop Pro, Adobe Photoshop, Fireworks, el gratuito GIMP, etc. Pero si no
tenemos ninguno de estos programas y tenemos dudas sobre qu tipo de formato utilizar en
nuestra imagen, debemos tener presente que JPEG va bien con todo tipo de imgenes y tiene
un buen nivel de compresin. La desventaja de este formato con respecto a los otros es que no
admite transparencias.

RECOMENDACIN. Haz siempre una copia de la imagen original, pues es imposible recuperar
informacin de una imagen comprimida.


Vectoriales
El formato vectorial est basado en la informacin mediante vectores calculados
matemticamente. El procedimiento que trata la informacin es indicar el punto inicial, el
punto final y el color que hay entre ambos puntos. Este procedimiento es idneo para dibujos
pues la calidad no la pierde ya que si modificamos el tamao, el programa slo tiene que
volver a calcular a partir de los nuevos datos, adems el tamao del fichero ser mucho menor
por tener que guardar menos informacin.
Veamos un ejemplo de imagen realizada en formato vectorial.
Dreamweaver CS4. Captulo 5. Imgenes

123


Figura 5.3. Imagen vectorial.

Figura 5.4. Imagen vectorial ampliada.
En el ejemplo de la figura anterior no se aprecia prdida de calidad en el aumento de tamao
de la imagen de la figura 5.4 con respecto a la original de la imagen de la figura 5.3.
Dreamweaver CS4. Captulo 5. Imgenes

124

Este tipo de formato no es aconsejable para fotografas y similares, porque entonces debera
almacenar mucha informacin debido al constante cambio de color en este tipo de ficheros.
Los archivos de formato vectorial no suelen ser aceptados por los navegadores a excepcin de
los realizados en Flash que, gracias a un programa vinculado al navegador (Plug-in), nos
perrmite cargar y visualizar este tipo de ficheros.
5.2. Insertar una imagen
Para insertar una imagen en nuestro documento lo podemos hacer desde el men Insertar >
Imagen,

Figura 5.5. Insertar imagen desde el men Insertar.
desde el panel Insertar, haciendo clic en el botn Imgenes: Imagen, de la ficha Comn,
pulsando en el icono o arrastrando dicho icono desde la ficha Comn directamente al
escenario..
Dreamweaver CS4. Captulo 5. Imgenes

125


Figura 5.6. Insertar imagen desde el panel Insertar.
Al hacer esto se abre el cuadro de dilogo Seleccionar origen de imagen desde donde
podemos buscar y seleccionar una imagen.

Figura 5.7. Cuadro de dilogo Seleccionar origen de imagen.
En esta ventana nos aparecen por defecto los ficheros con extensiones gif, jpg, jpeg, png y
.psd. Si queremos seleccionar un fichero de imagen con otra extensin, por ejemplo tif, bmp,
etc, deberemos seleccionar en Tipo la opcin Todos los archivos (*.*).
URL nos indica la ruta donde se encuentra la imagen. Esta ruta es relativa a lo que indiquemos
en el cuadro Relativa a:. En este cuadro podemos definir si la imagen es relativa al Documento
o a la Raz del Sitio. Es recomendable que activemos la opcin Documento para no perder el
vnculo en el caso de mover todo el sitio a una ubicacin diferente. Los vnculos y rutas los
trataremos ms detalladamente en el tema siguiente.
Dreamweaver CS4. Captulo 5. Imgenes

126

Si activamos la opcin Vista previa de imagen, nos aparece la imagen en miniatura as como
sus dimensiones, formato, tamao y tiempo aproximado de descarga.
Al hacer clic en Aceptar, automticamente se abre la ventana Atributos de accesibilidad de la
etiqueta de imagen, si previamente hemos activado dicho cuadro en Preferencias; en esta
ventana podemos teclear un texto alternativo para que los usuarios lo lean cuando pasan el
cursor por encima de la imagen, en el navegador. Deber ser un texto descriptivo de la imagen
y su longitud deber limitarse a 50 caracteres. Tambin podemos rellenar el campo
Descripcin larga, tecleando una ubicacin de un archivo que aparezca cuando el usuario haga
clic en la imagen o en el icono de carpeta para desplazarse hasta el archivo. Este cuadro de
texto proporciona un vnculo a un archivo con el que est relacionado u ofrece ms
informacin acerca de la imagen.

Figura 5.8. Atributos de accesibilidad de la etiqueta de imagen.
Si hacemos clic en Aceptar, la imagen se inserta en nuestro documento. Si hacemos clic en
Cancelar, la imagen se inserta en nuestro documento, pero Dreamweaver no le asocia
atributos o etiquetas de accesibilidad.
Al insertar una imagen en el documento, Dreamweaver genera de forma automtica una
referencia al archivo imagen en el cdigo HTML como en el del siguiente ejemplo:
<img src="Elementos/Im&#225;genes/teatro.jpg" width="1024" height="768">
Para asegurar que la referencia es correcta, el archivo de imagen deberemos tenerlo en el sitio
actual. Si no estuviera, Dreamweaver nos preguntar si deseamos copiar el archivo en el sitio.
Una vez insertada la imagen, al seleccionarla, en el Inspector de Propiedades nos muestra el
archivo de origen de la imagen y sus dimensiones en pxeles. Adems, desde este inspector,
podemos tambin establecer propiedades de la imagen.

Dreamweaver CS4. Captulo 5. Imgenes

127

Figura 5.9. Inspector de propiedades de imagen.
A veces puede ocurrir, mientras diseamos nuestra pgina, que no tengamos todas las
imgenes que necesitamos. Dreamweaver nos permite insertar un Marcador de posicin de
imagen en el lugar destinado a la imagen que vayamos a colocar posteriormente.
Para insertar un Marcador de posicin de imagen desplegamos el men Insertar > Objetos
de imagen > Marcador de posicin de imagen.

Figura 5.10. Insertar marcador de posicin de imagen.
Se abre el cuadro de dilogo Marcador de posicin de imagen.

Figura 5.11. Cuadro de dilogo Marcador de posicin de imagen.
Dreamweaver CS4. Captulo 5. Imgenes

128

En este cuadro podemos poner el nombre del marcador, establecer el ancho y la altura que
tendr nuestra imagen, el color que vamos a poner al marcador para hacerlo ms visible y un
texto alternativo para completar la informacin.
Para sustituir el marcador de posicin por la imagen basta con hacer doble clic sobre l y se
abrir el cuadro de dilogo Seleccionar origen de imagen (Figura 5.7).


Ejercicio

El objetivo en este ejercicio ser insertar un marcador de posicin de imagen.

Crea un nuevo documento en blanco (Archivo > Nuevo).

Inserta un Marcador de posicin de imagen (Insertar > Objetos de imagen > Marcador
de posicin de imagen).

En el cuadro de dilogo Marcador de posicin de imagen, indica las siguientes
caractersticas:

o Nombre: templo.
o Ancho: 300 pxeles.
o Altura: 200 pxeles.
o Color: #FFFF99.
o Texto alternativo: Templo Diana.



Figura 5.12. Propiedades del marcador de posicin de imagen.

Haz clic en Aceptar. El marcador de posicin de imagen quedar como muestra el
siguiente ejemplo:
Dreamweaver CS4. Captulo 5. Imgenes

129


Figura 5. 13. Marcador de posicin de imagen desde vista diseo.

Guarda el documento como imagen1.


5.3. Propiedades de la imagen
Cuando insertamos una imagen y la seleccionamos, el Inspector de Propiedades nos permite
ver y modificar sus propiedades. Si es necesario, para que podamos ver todas las propiedades
de la imagen, debemos hacer clic en la flecha de ampliacin situada en la esquina inferior
derecha.

Figura 5.14. Inspector de propiedades de una imagen seleccionada.
En el cuadro de texto situado bajo la imagen en miniatura podemos establecer un nombre de
modo que pueda hacer referencia a la imagen cuando utilicemos un comportamiento de
Dreamweaver (como Intercambiar imagen) o cuando utilicemos un lenguaje de creacin de
Scripts como JavaScript o VBScript.
Origen: en este cuadro de texto especificamos el archivo de origen para la imagen. En el
icono de la carpeta podemos localizar la ruta del archivo de origen.
Vnculo: en este cuadro de texto podemos indicar un hipervnculo para la imagen. En el
siguiente captulo trataremos como crear vnculos.
Alt: en este cuadro de texto pondremos el texto alternativo que aparecer en lugar de la
imagen. Esto es muy vlido para los navegadores que slo admiten texto o en aqullos
configurados para descargar las imgenes manualmente. En algunos navegadores, este texto
tambin aparece al situar el puntero sobre la imagen.
Dreamweaver CS4. Captulo 5. Imgenes

130

Tamao de la imagen
Dreamweaver nos permite modificar el tamao de las imgenes. Esta modificacin no se
efecta sobre la imagen sino sobre la visualizacin de la misma, por lo tanto slo
modificaremos las proporciones de la imagen en la pantalla, pero no su tamao real. Para
modificar el tamao real de una imagen necesitaremos un editor de imgenes externo.
Podemos modificar el tamao de la imagen de dos formas:
Arrastrando los manejadores de cambio de tamao que aparecen alrededor de la imagen al
seleccionarla, o

Figura 5.15. Manejadores de cambio de tamao de imagen.
Desde el Inspector de Propiedades, modificando los valores An (Ancho) y Al (Alto) de la
imagen seleccionada. An (Ancho) y Al (Alto) especifican el ancho y el alto de la imagen en
pxeles.
Con los manejadores de tamao, al cambiar la imagen, varan automticamente las
dimensiones de la misma en el Inspector de Propiedades. Para mantener las proporciones de
la imagen, basta con mantener pulsada la tecla Mays mientras manipulamos los
manejadores.
Para recuperar el ancho y el alto originales de una imagen redimensionada, podemos hacer clic
en el botn Restablecer tamao que aparece a la derecha, entre los cuadros An y Al cuando se
han modificado los valores de la imagen seleccionada . Tambin lo
podemos hacer seleccionando Restablecer tamao en el men contextual que aparece al
hacer clic con el botn derecho sobre la imagen.

RECOMENDACIN. Comprueba en el panel del Inspector de Propiedades, que aunque
modifiques desde l las dimensiones de la imagen, el tamao del fichero no vara.


Dreamweaver CS4. Captulo 5. Imgenes

131

Edicin de imgenes
Dreamweaver nos va a permitir utilizar diferentes programas para editar y modificar las
imgenes.
Para configurar un editor de imgenes externo desplegamos el men Edicin y seleccionamos
Preferencias. Se abre el cuadro de dilogo Preferencias y seleccionamos la Categora Tipos de
archivos / editores.

Figura 5. 16. Preferencias de archivos y editores.
Desde este cuadro podemos seleccionar el editor de imagen con el que deseamos abrir y
editar los archivos grficos. Tambin podemos configurar los tipos de archivo que abre un
editor determinado, seleccionar varios editores de imagen y asignar un editor distinto
dependiendo del tipo de archivo que se trate y seleccionar el origen de Fireoworks, que es el
editor de imagen que se complementa mejor con Dreamweaver, ya que ambos son de la
misma familia de productos.
Por ejemplo, si tenemos como editores Fireworks y Photoshop, podemos indicar a
Dreamweaver que inicie Fireworks cuando deseemos editar un archivo GIF y que inicie
Photoshop cuando sea un archivo JPG o JPEG.
Si deseamos configurar un editor de imgenes externo para un tipo de archivo existente,
llevaremos a cabo las siguientes acciones:
Abrimos el cuadro de dilogo Edicin > Preferencias... y en Categora, seleccionamos
Tipos de archivos/editores.

Dreamweaver CS4. Captulo 5. Imgenes

132

En el apartado Extensiones, seleccionamos la extensin del archivo para la que deseamos
configurar un editor externo, por ejemplo .png.

Figura 5.17. Seleccionar extensin.

Hacemos clic en el botn Aadir situado encima del apartado Editores. Se abrir el
cuadro de dilogo Seleccionar editor externo.
En este cuadro de dilogo, localizamos la aplicacin que deseamos que se inicie como
editor para este tipo de archivo, por ejemplo Fireworks, si lo tenemos ya instalado en
nuestro equipo pero no configurado como editor principal. Puedes bajarte una versin de
prueba del programa Fireworks de la web oficial de Adobe, e instalarlo en tu equipo para
despus localizar su ejecutable en la ubicacin donde lo hayas instalado, desde este
cuadro de dilogo Seleccionar editor externo.
Hacemos clic en Abrir y volvemos al cuadro de dilogo Preferencias con el nuevo editor
aadido para este tipo de fichero. Si deseamos que sea el editor principal hacemos clic en
Convertir en principal .
Con el mismo procedimiento podemos configurar otros editores adicionales para este tipo de
archivo as como aadir nuevos editores a otros tipos de archivos.
Para aadir un nuevo tipo de archivo a la lista Extensiones, realizaremos los siguientes pasos:
Volvemos a abrir el cuadro de dilogo Preferencias (Edicin > Preferencias...) y en
Categora seleccionamos Tipos de archivo/editores.
Hacemos clic en el botn Aadir situado encima de la lista Extensiones.
Aparecer un cuadro de texto al final de la lista Extensiones en el que escribimos la
extensin del nuevo tipo de archivo, por ejemplo .bmp, (debes colocar el punto delante
para indicar que es una extensin de archivo) y pulsamos la tecla Intro o hacemos clic en
cualquier sitio para quedar escrita la extensin.
Seguimos los pasos descritos anteriormente para seleccionar un editor externo con el que
deseamos iniciar este tipo de archivos.
Dreamweaver CS4. Captulo 5. Imgenes

133


Figura 5. 18. Aadir nueva extensin de archivo a Preferencias.

Si deseamos cambiar la configuracin del editor, deberemos llevar a cabo las siguientes
acciones:
Abrimos el cuadro de dilogo Edicin > Preferencias... y en Categora seleccionamos Tipos
de archivos/editores.
Seleccionamos el tipo de archivo en la lista Extensiones para ver los editores existentes
para las diversas extensiones, por ejemplo seleccionamos .gif.
En la lista de Editores, seleccionamos el editor deseado y hacemos clic en el botn
Eliminar situado sobre esta lista para eliminarlo o bien hacemos clic en el botn
Aadir para aadir un nuevo editor.
Tambin podemos hacer clic en el botn para cambiar el editor que
debe iniciarse de manera predeterminada.
Desde el Inspector de Propiedades, Dreamweaver introduce unas sencillas herramientas que
nos van a permitir editar o modificar las imgenes :
Editar: desde este botn podemos iniciar el editor de imgenes que hayamos
especificado en las preferencias de editores externos. El editor de imgenes especificado abre
la imagen seleccionada.
Dreamweaver CS4. Captulo 5. Imgenes

134

Editar configuracin de la imagen: pulsando este botn , abrimos el cuadro de dilogo
Vista previa de la imagen y nos permite optimizar la imagen.
Actualizar desde original: al pulsar el botn podemos actualizar la imagen
seleccionada basndonos en el original de la misma.
Si pulsamos los iconos agrupados en esta barra del mismo inspector de propiedades de la
imagen, podremos llevar a cabo:
Recortar: desde el botn Recorte podemos recortar el tamao de una imagen y
eliminar las reas no deseadas de la imagen seleccionada. Tambin nos permite salvar la
imagen recortada.
Volver a muestrear: este botn nos permite mejorar la calidad de una imagen cuyo
tamao se ha cambiado, aadiendo o quitando pxeles.
Brillo y contraste: con este botn podemos ajustar los valores de brillo y de contraste
de una imagen para corregir su iluminacin.
Perfilar: este botn nos permite ajustar la nitidez de una imagen borrosa.

RECOMENDACIN. Es aconsejable utilizar programas de edicin para las modificaciones que
vayamos a efectuar en las imgenes.


5.4. Imgenes interactivas
Mapa de imagen
Un mapa de imagen es una imagen que se ha dividido en regiones o zonas interactivas.
Cuando el usuario hace clic en una zona interactiva, se realiza una accin, por ejemplo, se abre
un archivo nuevo.
Cuando insertamos un mapa de imagen del lado del cliente, debemos crear una zona
interactiva y, a continuacin, definir un vnculo que se abra cuando el usuario haga clic en esta
zona. En un mapa podemos crear mltiples zonas interactivas, pero formarn parte del mismo
mapa de imagen.
Para crear un mapa de imagen del lado del cliente, seleccionamos la imagen en la ventana de
documento.
Dreamweaver CS4. Captulo 5. Imgenes

135

En el Inspector de Propiedades tenemos herramientas para crear el mapa de la imagen
seleccionada as como las zonas interactivas de la misma .
En el cuadro de texto Mapa, escribimos un nombre para el mapa de imagen. Si vamos a
utilizar varios mapas de imagen para un mismo documento, deberemos asignar un nombre
distinto a cada uno.
Para definir las zonas interactivas de mapas de imagen podemos seleccionar la herramienta
Zona interactiva rectangular , la herramienta Zona interactiva oval o la herramienta
Zona interactiva poligonal , dependiendo del tipo de zona interactiva que vayamos a
crear. Una vez elegida la herramienta que vamos a utilizar, dibujamos sobre la imagen
seleccionada, con el puntero del ratn la zona interactiva que vamos a insertar. Al hacerlo,
Dreamweaver nos mostrar el siguiente aviso referente a la accesibilidad de las webs para
personas con problemas de visin:

Figura 5.19. Aviso Dreamweaver accesibilidad mapas de imgenes.
Si pulsamos Aceptar, podemos ver el Inspector de Propiedades de la zona interactiva que
hayamos creado.

Figura 5.20. Inspector de propiedades de zona interactiva.
Desde este Inspector de Propiedades podemos seleccionar las opciones de Vnculo, Destino y
Texto alternativo (campo Alt), para la zona interactiva seleccionada. Estas caractersticas las
iremos viendo con ms detalle en los siguientes captulos, a lo largo del curso.
Una vez terminado de definir el mapa de imagen, basta con hacer clic en cualquier parte del
documento para cambiar el Inspector de Propiedades.
Dreamweaver CS4. Captulo 5. Imgenes

136

Con la herramienta Puntero de zona interactiva podemos seleccionar y mover las zonas
interactivas.
Otras opciones de la imagen disponibles en el inspector de propiedades si tenemos una
imagen seleccionada son:
Espacio V (vertical) y Espacio H (horizontal): son cuadros que nos permiten aadir espacios
a los lados de la imagen. Los valores que pongamos en el cuadro de Espacio V ser el espacio
en pxeles que aadiremos en la parte superior e inferior de la imagen, mientras que en el
cuadro Espacio H, los valores que pongamos, crearan los espacios en pxeles a la izquierda y a
la derecha de la imagen.
Destino: este men desplegable slo est disponible cuando la imagen est vinculada a otro
archivo. En este men figuran los nombres de todos los marcos de un conjunto de marcos
actual y podemos seleccionar el marco o la ventana donde se cargar la pgina vinculada.
Adems podemos seleccionar destinos reservados:
- _blank carga el archivo vinculado en una ventana de navegador nueva y sin nombre.
- _parent carga el archivo vinculado en un conjunto de marcos padre o en la ventana del
marco que contiene el vnculo. Si el marco que contiene el vnculo no est anidado, el archivo
vinculado se cargar en la ventana completa del navegador. La creacin de Marcos la veremos
en un captulo posterior.
- _self carga el archivo vinculado en el mismo marco o ventana que el vnculo. Este destino es
el predeterminado, por lo que normalmente no es preciso especificarlo.
- _top carga el archivo vinculado en la ventana completa del navegador, quitando as todos los
marcos.
Desde el campo Original podemos insertar directamente una imagen original creada con
Fireworks (extensin .png) o con Photoshop (extensin .psd) simplemente pulsando el icono
Sealar archivo y arrastrndolo hasta el archivo correspondiente en el panel de Archivos;
automticamente Dreamweaver la guardar en el formato de imagen ms conveniente y la
insertar en nuestro documento. Si no tenemos el archivo en el panel tambin podremos
localizarlo en nuestro sitio web abriendo el icono Buscar archivo que abrir el cuadro
de dilogo Seleccionar archivo original.
Borde: en este cuadro podemos crear un borde a la imagen. El valor del cuadro se
corresponder con el ancho del borde en pxeles. El color del borde ser el mismo que
tengamos definido para el texto y si la imagen tiene asignado un hipervnculo, entonces el
color ser el mismo que tengan definidos los hipervnculos. Por defecto, las imgenes no
presentan borde.
Alinear: Desplegado, este men nos permite alinear una imagen con el texto, con otra
imagen, con un plug-in o con otros elementos de la misma lnea.
Dreamweaver CS4. Captulo 5. Imgenes

137

Desde el men desplegable podemos modificar la alineacin de una imagen con respecto a
otros objetos adyacentes. Basta con seleccionar la opcin que deseemos del men.

Figura 5.21. Men desplegable Alinear.
Las opciones son:
Predeterminado suele especificar una alineacin con la lnea de base. (El valor
predeterminado puede variar en funcin del navegador del visitante del sitio.)
Lnea de base e Inferior alinean la lnea de base del texto (u otro elemento del mismo
prrafo) con la parte inferior del objeto seleccionado.
Superior alinea la parte superior de una imagen con la parte superior del elemento ms alto
(imagen o texto) de la lnea actual.
Medio alinea la parte central de la imagen con la lnea de base de la lnea actual.
Texto superior alinea la parte superior de la imagen con la parte superior del carcter ms
alto de la lnea de texto.
Medio absoluta alinea la parte central de la imagen con la parte central del texto de la lnea
actual.
Inferior absoluta alinea la parte inferior de la imagen con la parte inferior de la lnea de
texto (incluidos los trazos descendentes, como en el caso de la letra g).
Izquierda sita la imagen seleccionada en el margen izquierdo, ajustando a la derecha el
texto que la rodea. Si hay texto alineado a la izquierda delante del objeto, los objetos
alineados a la izquierda suelen pasar a una nueva lnea.
Derecha sita la imagen en el margen derecho, ajustando a la izquierda el texto que la
rodea. Si hay texto alineado a la derecha delante del objeto, los objetos alineados a la derecha
suelen pasar a una nueva lnea.
Imgenes de sustitucin
Una imagen de sustitucin o Rollover es una imagen que al pasar el puntero del ratn sobre
ella se transforma en otra imagen.
Dreamweaver CS4. Captulo 5. Imgenes

138

El Rollover es muy utilizado en los botones o mens que nos llevan a distintas pginas.

Ejercicio

El objetivo en este ejercicio ser la creacin de un Rollover o imagen de sustitucin. Para
realizarlo, vamos a crear previamente dos sencillas imgenes con el Paint.

Desde el men Inicio de Windows, lanza la aplicacin Paint, suele estar en Accesorios. Si no
localizas este programa, ejecuta el comando Inicio > Ejecutar y en el cuadro de dilogo que te
aparece escribe mspaint. Aceptar.
Dibuja un rectngulo de color rojo y sobre l inserta el texto: Imagen de sustitucin, de color
amarillo, tal como se muestra en la figura siguiente:



Figura 5.22. Crear una imagen con Paint.

Guarda la imagen en MiWeb>Elementos>imgenes, como img1.png (Archivo > Guardar
como).
Crea una nueva imagen con el Paint, idntica a la anterior, pero el fondo de color amarillo y
el texto de color rojo.
Guarda la nueva imagen como img2.png. Debes tener dos imgenes parecidas a las
siguientes:



Figura 5.23. img1.png


Figura 5.24. img2.png
Dreamweaver CS4. Captulo 5. Imgenes

139


NOTA: Si tienes dificultades para crear estas imgenes, te las podrs descargar desde la Mesa
de trabajo del curso. Estn dentro de Materiales de Apoyo>Material necesario para
ejercicios>Ejercicios del Captulo5, y continuar el ejercicio desde aqu.

Crea en Dreamweaver un nuevo documento en blanco (Archivo > Nuevo).

Coloca el cursor donde vayas a insertar el Rollover y selecciona Insertar > Objetos de imagen
> Imagen de sustitucin.
Tambin puedes hacerlo seleccionando Imagen de sustitucin, desde el botn Imagen en la
ficha Comn de la barra Insertar.



Figura 5.25. Seleccionar imagen de sustitucin desde Ficha Insertar.

Se abre el cuadro de dilogo Insertar imagen de sustitucin.

En el cuadro de texto Nombre de la imagen: escribe rollover como nombre de la imagen.
En el cuadro de texto Imagen original: utiliza el botn Examinar... para localizar el fichero
img1.png en la carpeta donde lo guardaste.

En el cuadro de texto Imagen de sustitucin: utiliza el botn Examinar... para localizar el
fichero img2.png en la carpeta donde lo guardaste.

Activa la opcin Carga previa de imagen de sustitucin para que se cargue a la vez que la
pgina y as evitar retrasos por la descarga de la imagen cuando llega el momento de aparecer.

En el cuadro Texto alternativo: si quieres, puedes poner el texto que aparecer al poner el
puntero del ratn sobre la imagen o el que aparecer en lugar de la imagen en el caso que esta
no se pudiera mostrar en el navegador.

En el cuadro de texto Al hacerse clic, ir al URL: puedes crear un hipervnculo a la imagen de
sustitucin, pero por ahora lo dejamos en blanco.
Dreamweaver CS4. Captulo 5. Imgenes

140




Figura 5.26. Cuadro de dilogo Insertar imagen de sustitucin.

Guarda el documento como imagen2 (Archivo>Guardar como).

Pulsa la tecla F12 para ver el documento en el navegador. Comprueba el efecto al pasar el
cursor sobre la imagen.



Barra de navegacin
Una barra de navegacin es una imagen o un conjunto de imgenes cuya visualizacin cambia
segn las acciones que realice el usuario y se utilizan generalmente como men para navegar
por las pginas y los archivos de un sitio.
Para insertar una barra de navegacin, podemos hacerlo desde el men Insertar>Objetos de
imagen>Barra de navegacin, o seleccionando Barra de navegacin, desde el icono Imgenes
en la ficha Comn de la barra Insertar.
Dreamweaver CS4. Captulo 5. Imgenes

141


Figura 5.27. Insertar Barra de navegacin.
Se abre el cuadro de dilogo Insertar barra de navegacin.

Figura 5.28. Cuadro de dilogo Insertar barra de navegacin.
Dreamweaver CS4. Captulo 5. Imgenes

142

En el nuevo cuadro nos aparece de forma predeterminada el elemento sinnombre1. Este
elemento se corresponde con un botn, sinnombre1, al cual debemos adjudicar un nombre
desde el cuadro de texto Nombre de elemento: para nuestra barra de navegacin. Si no
escribimos ningn nombre, Dreamweaver utilizar el nombre de la imagen que le insertemos.
Para cada elemento (botn) que insertemos en nuestra barra de navegacin podemos
especificar cuatro imgenes diferentes, correspondientes a cada uno de los estados del botn:
Imagen arriba: la imagen que aparece en el botn antes de usarse.
Sobre imagen: la imagen que aparece al pasar el puntero sobre el botn.
Imagen abajo: la imagen que aparece al hacer clic sobre el botn.
Sobre mientras imagen abajo: la imagen que aparece al pasar el puntero sobre el botn
despus de haber hecho clic en l.
Podemos utilizar el botn Examinar... para localizar las imgenes que vayamos a utilizar en
cada uno de los estados del botn de la barra de navegacin, aunque no es necesario incluir
imgenes en todos ellos.
En el cuadro Texto alternativo pondremos el texto que aparecer en lugar de la imagen del
botn en el caso que esta no se pudiera mostrar en el navegador.
En el cuadro de texto Al hacerse clic, ir al URL, podemos crear un hipervnculo desde el
botn a un URL. A la derecha de este cuadro de texto, aparece un cuadro desplegable donde
podremos seleccionar en qu ventana se mostrar el documento vinculado.
Podemos activar la opcin Carga previa de imgenes si queremos que las imgenes se
carguen automticamente.
Si queremos que se muestre la imagen del botn pulsado, deberemos activar la opcin
Mostrar Imagen abajo inicialmente.
Podemos insertar ms elementos (botones) a nuestra barra de navegacin haciendo clic en el
botn . Si queremos eliminar algn elemento existente, lo seleccionamos y hacemos clic
en el botn .
Una vez creado los elementos de nuestra barra de navegacin, si queremos cambiar el orden,
podemos utilizar los botones y sobre el elemento seleccionado.
Por ltimo, podemos indicar si queremos que la barra de navegacin se muestre horizontal o
verticalmente desde el desplegable Insertar y si queremos o no Utilizar tablas activando o
desactivando dicha opcin en el cuadro de dilogo.

143















Captulo 6.
Vnculos


Dreamweaver CS4. Captulo 6. Vnculos
144

Captulo 6. VNCULOS
Un vnculo, hipervnculo, enlace, hiperenlace, etc. es la misma forma de denominar a un
elemento que al ser pulsado te lleva de una pgina o archivo a otra pgina o archivo.
Podremos asignar vnculos a una imagen, un botn, un texto, etc. La etiqueta HTML asociada a
los vnculos es:
<a href="archivoenlazado">elementodeenlace</a>
6.1. Rutas de vnculos
Cuando vayamos a crear un vnculo, es fundamental conocer la ruta entre el elemento que
establece el vnculo y el archivo vinculado.
Para explicar las rutas de los vnculos vamos a partir de un ejemplo que nos puede ayudar a
tener ms claras las ideas.
Supongamos que trabajo en un edificio de oficinas de varias plantas. Mi direccin completa de
trabajo sera el pas, la provincia, la ciudad, la calle, el nmero, el piso y la letra. Esta direccin
podramos considerarla como una ruta de acceso absoluta.
Mi oficina de trabajo est en la planta 5 y me encuentro en un momento determinado en la
planta 3. Si alguien me pregunta por mi direccin de trabajo, podra indicarle la ruta absoluta
que hemos visto anteriormente, pero no es lgico repetir el pas, la provincia, la ciudad, la calle
y el nmero. Bastara con indicar que trabajo 2 plantas arriba. En este caso le indicara una ruta
de acceso relativa al lugar donde me encuentro actualmente. Pero tambin le podra haber
indicado que trabajo en la planta 5 con lo que le estoy indicando una ruta de acceso relativa a
la ubicacin del edificio.
Visto esto, podemos decir que existen varios tipos de rutas de acceso al definir los vnculos:
Rutas absolutas: son las rutas que nos llevan a un documento externo al sitio y suelen
indicar la direccin completa, es decir, el URL.
Por ejemplo, https://centrovirtual.educacion.es/mentor/inicio.html. El URL (Uniform Resource
Locator) son direcciones nicas que sirven para localizar una pgina Web en Internet.
La ruta absoluta se suele utilizar para vincular documentos situados en otro servidor, sera
como la direccin completa de mi lugar de trabajo del ejemplo anterior.
Aunque tambin se podra utilizar para vnculos del sitio local, no es prctico. Adems, el
problema est en que si cambiamos el sitio de dominio, se romperan todos los vnculos de las
rutas absolutas locales.
Rutas relativas al documento: son las rutas que nos llevan a otro documento de nuestro
sitio, pero partiendo del directorio en el que se encuentra el documento actual. En este tipo de
ruta se omite la parte del URL que es comn a ambos documentos.

Dreamweaver CS4. Captulo 6. Vnculos

145

En nuestro ejemplo de la oficina, sera indicar que trabajo dos plantas ms arriba, es decir,
sera la ruta relativa al lugar donde me encuentro en ese momento (planta 3). Aqu no hace
falta que indiquemos la direccin completa de mi lugar de trabajo, slo lo que difiere con
respecto a mi localizacin actual.
Qu ocurre si me preguntan por mi lugar de trabajo cuando estoy en la planta 1?
Lgicamente la ruta que indiqu en la planta 3 ya no es vlida, pues mi lugar de trabajo no
est dos plantas arriba. Es decir, al modificar mi localizacin, mi ruta relativa tambin ha sido
modificada.
Igualmente, cuando se mueve un archivo que tengamos vinculado, necesitaremos actualizar
las rutas de sus vnculos. Dreamweaver actualiza los vnculos de forma automtica si tenemos
activada esta opcin en la categora General de Edicin>Preferencias; podemos decidir si
queremos que actualice los vnculos siempre, nunca, o que nos muestre un mensaje.

Figura 6.1. Preferencias de actualizacin de vnculos.
Si nos hemos decidido esta ltima posibilidad, entonces nos preguntar si queremos aceptar
los cambios.
Rutas relativas a la raz del sitio: son las rutas que nos llevan a otro documento de nuestro
sitio desde la carpeta raz. Una ruta relativa a la raz de un sitio comienza por una barra
diagonal (/) que representa la carpeta raz del sitio.
Dreamweaver CS4. Captulo 6. Vnculos

146


Figura 6.2. Actualizar vnculos.
Siguiendo con nuestro ejemplo, nos basta con indicar que nuestro lugar de trabajo es la planta
5 y esta ruta permanece invariable respecto al edificio, es decir, no importa en la planta que
nos encontremos. Aqu tampoco hace falta indicar la direccin completa.
NOTA. Dreamweaver crea de forma automtica una ruta absoluta mientras no tengamos
guardado el documento en el que estamos trabajando. En cuanto lo guardemos cambia el tipo
de ruta asociado al vnculo.
Para que podamos entender esto y veamos las diferencias entra las rutas relativas al
documento y a la raz del sitio (MiWeb), pongamos un ejemplo prctico.

Figura 6.3. Carpetas y archivos del Sitio local.
En el documento monumentos.htm escribimos las palabras FOTO e INICIO. Desde la palabra
FOTO vamos a crear un vnculo al fichero templo_diana.png y desde la palabra INICIO creamos
otro vnculo al fichero index.htm.
Dreamweaver CS4. Captulo 6. Vnculos

147

Adems, en el documento index.htm escribimos la palabra MONUMENTOS para crear un
vnculo al fichero monumentos.htm. Con esto podemos comprobar las diferencias de rutas
dependiendo del origen del vnculo y el objeto vinculado
Si los vnculos los creamos relativos al documento, las rutas que debemos indicar para cada
uno de los enlaces ser:
o Desde la palabra FOTO, en monumentos.htm, la ruta ser:
Elementos/imagenes/templo_diana.png. Observa que la ruta desde la palabra foto
indica todo el camino hasta el nombre del fichero vinculado (templo_diana.png) ya
que se encuentra dentro de la carpeta imgenes del directorio Elementos, un
directorio distinto al de monumentos.htm, por lo cual indica la carpeta (imgenes) que
contiene el fichero vinculado (templo_diana.png) y que adems est dentro de otra
carpeta distinta (Elementos).
El cdigo HTML asociado a este tipo de vnculo es <a
href="Elementos/imagenes/templo_diana.png">FOTO</a>.
o Desde la palabra INICIO, en monumentos.htm, la ruta ser: index.html. Simplemente
el nombre del documento hacia el cual se dirige el vnculo, ya que index.htm y
monumentos.htm se encuentran en el mismo nivel.
El cdigo HTML asociado a este vnculo ser <a href="index.html">INICIO</a>.
o Si el fichero vinculado estuviese en un directorio distinto del fichero en el que
realizamos el enlace y la ruta necesaria para localizarlo debiera subir un nivel en la
jerarqua de carpetas, entonces la ruta comenzara por ../ y el cdigo HTML asociado a
ese tipo de vnculo sera: <a href="../index.html">INICIO</a>

o Desde la palabra MONUMENTOS, en index, la ruta ser: monumentos.htm. Observa
que la ruta desde la palabra monumentos es idntica al ejemplo anterior, ya que el
fichero vinculado (monumentos.htm) se encuentra en un directorio idntico al fichero
index.htm.
El cdigo HTML asociado es <a href="monumentos.htm">MONUMENTOS</a>.
Si los vnculos los creamos relativos a la raz del sitio, las rutas de cada uno de los enlaces
ser:
Desde la palabra FOTO, en monumentos.htm, la ruta ser:
/mgas0012/Elementos/imagenes/templo_diana.png. (mgas0012 es el usuario de
ejemplo que tenemos en el sitio MiWeb, el tuyo variar segn el que tengas asignado
por Mentor).
El cdigo HTML asociado a este vnculo es <a
href="/mgas0012/Elementos/imagenes/templo_diana.png">FOTO</a>
Desde la palabra INICIO, en monumentos.htm, la ruta ser: /mgas0012/index.html.
(mgas0012 es el usuario de ejemplo que tenemos en el sitio MiWeb, el tuyo variar
Dreamweaver CS4. Captulo 6. Vnculos

148

segn el que tengas asignado por Mentor). En este caso, observa que en el vnculo
desde la palabra INICIO slo aparece la barra inclinada (/) para indicar que este fichero
(index.htm) se encuentra en la raz del sitio (ejemplo: mgas0012).
El cdigo HTML asociado a este vnculo es <a href="/mgas0012/index.html">INICIO</a>
Desde la palabra MONUMENTOS, en index, la ruta ser idntica en forma a la
anterior: /mgas0012/monumentos.htm. (mgas0012 es el usuario de ejemplo que
tenemos en el sitio MiWeb, el tuyo variar segn el que tengas asignado por Mentor).
El cdigo HTML asociado a este vnculo es <a
href="/mgas0012/monumentos.htm">MONUMENTOS</a>
Como norma general, para vincular documentos de la misma carpeta deberemos utilizar las
rutas de acceso relativas al documento, mientras que si trabajamos con sitios muy grandes,
que contienen muchas carpetas y subcarpetas, es mejor utilizar las rutas relativas a la raz del
sitio.
Las caractersticas de las rutas absolutas y relativas explicadas anteriormente son vlidas para
todos los elementos que componen una pgina Web, aunque para las imgenes y otros tipos
de archivos multimedia es aconsejable utilizar la rutas relativas al sitio.

RECOMENDACIN. Pasa de vez en cuando a la vista Dividir para que te muestre
simultneamente las vistas cdigo y diseo del documento que ests elaborando y puedas
identificar las etiquetas asociadas a los vnculos y sus rutas.


6.2. Creacin y eliminacin de vnculos
Crear vnculos
La forma ms sencilla que tenemos de crear un vnculo es a travs del Inspector de
Propiedades HTML. Seleccionamos el elemento que vamos a vincular, ya sea una o varias
letras, palabras, prrafos, imgenes, tablas, capas, etc., y despus, en el cuadro de texto
Vnculo del Inspector de Propiedades HTML indicamos cual es el archivo vinculado.
Si el documento es externo a nuestro sitio, escribiremos en el cuadro de texto Vnculo el URL
completo, con indicacin del protocolo utilizado. Por ejemplo http://www.mentor.mec.es.

Ejercicio

El objetivo en este ejercicio ser la creacin de un vnculo externo.

Abre el documento enlaces.html (Doble clic sobre el nombre del fichero en el sitio local
en la panel Archivos).

Si no lo tienes creado, debers crearlo y guardarlo con el nombre enlaces.htm. en tu sitio
Dreamweaver CS4. Captulo 6. Vnculos

149

MiWeb.

Escribe en maysculas la palabra ISFTIC. Selecciona la fuente Arial, tamao 36 pxeles,
color #000, negrita.

Selecciona la palabra completa (doble clic con el cursor del ratn sobre ella).

Localiza en el Inspector de Propiedades HTML el cuadro de texto Vnculo y escribe en
l la ruta absoluta a http://www.isftic.mepsyd.es/.



Figura 6.4. Crear un hipervnculo externo.

Guarda los cambios del documento enlaces.html y pulsa F12 para visualizar la pgina
en el navegador.

Comprueba en el navegador que ocurre al hacer clic sobre la palabra vinculada
(ISFTIC).


Si cuando vamos a establecer un vnculo, el documento vinculado pertenece a nuestro propio
sitio, podemos hacerlo directamente a travs del botn Sealar archivo . Para ello, basta
con hacer clic en este botn y sin soltar, llevarlo hasta el fichero que deseamos vincular.
Dreamweaver CS4. Captulo 6. Vnculos

150


Figura 6. 5. Vincular con el botn Sealar archivo.
Tambin podemos utilizar el botn Buscar el archivo para localizar el fichero que
vayamos a vincular y de esta forma asegurarnos de que la ruta est correctamente
introducida.
Al hacer clic en este botn se nos abre el cuadro de dilogo Seleccionar archivo.

Figura 6.6. Cuadro de dilogo Seleccionar archivo.
Dreamweaver CS4. Captulo 6. Vnculos

151

En este cuadro elegiremos el fichero que vayamos a vincular. Para ello localizamos la carpeta
que lo contiene en el cuadro Buscar en: y en el cuadro de texto inferior Nombre:,
seleccionamos el fichero correspondiente. De forma automtica se nos escribe la ruta del
enlace en el cuadro de texto URL:.
En el cuadro de seleccin Relativa a: indicamos si la ruta ser relativa al Documento o a la
Raz del sitio. Dependiendo de nuestra eleccin, en el cuadro de texto URL aparecer una ruta
u otra.
Tambin podemos establecer un vnculo seleccionando el texto o la imagen que vamos a
vincular y haciendo clic en el comando Insertar>Hipervnculo. Se abrir el cuadro de dilogo
Hipervnculo.

Figura 6.7. Cuadro de dilogo Hipervnculo.
En el cuadro Texto, escribimos el texto que deseamos que aparezca como hipervnculo en el
documento.
En el cuadro Vnculo, escribimos el nombre del archivo de destino del vnculo. Tambin lo
podemos seleccionar a travs del icono de la carpeta Examinar que nos ayudar a
localizar el archivo de destino en nuestro directorio.
En el cuadro Destino, seleccionamos la ventana en la que deber abrirse el archivo. En la lista
emergente figuran los nombres de todos los marcos que hayamos creado en el documento
actual, si se tratase de un conjunto de marcos. Tambin podemos seleccionar los nombres de
destino reservados.
En el cuadro de texto Ttulo, escribimos un ttulo para el hipervnculo el cual aparece al colocar
el cursor sobre el mismo.
En el cuadro de texto Clave de acceso, introducimos un equivalente de teclado (una letra) para
seleccionar el hipervnculo en el navegador.
Dreamweaver CS4. Captulo 6. Vnculos

152

Por ejemplo, si escribimos la letra a como clave de acceso, al navegar, si pulsamos Alt + a se
nos cargar el archivo vinculado.
En el cuadro de texto ndice de fichas, introduciremos un nmero para el orden de fichas. Es
decir, si en una pgina tengo creados varios vnculos, puedo establecer el orden al que se
pueden acceder, con el tabulador, a estos vnculos, indicando el nmero en este cuadro. Este
atributo es muy vlido para los formularios en Internet.
Tambin podemos acceder al cuadro de dilogo Hipervnculo haciendo clic en el botn
Hipervnculo de la barra Insertar, categora Comn.
Por ejemplo, si creamos un vnculo con los siguientes datos:

Figura 6. 8. Insertar hipervnculo.
El cdigo HTML que le corresponde es:
<a href="index.html" tabindex="2" title="Volver al inicio" accesskey="a"
target="_self">vnculo</a>
Tambin podemos crear vnculos a ficheros del sitio simplemente situndonos sobre el
elemento a partir del cual vamos a crear el enlace y seleccionando, con el botn derecho del
ratn, Crear vnculo. Se abrir el cuadro de dilogo Seleccionar archivo y podremos proseguir
como ya hemos aprendido.
Dreamweaver CS4. Captulo 6. Vnculos

153


Figura 6.9. Crear vnculo.

Ejercicio

El objetivo en este ejercicio ser la creacin de varios vnculos pertenecientes a nuestro sitio.

Crea, si hay alguno que an no tengas creado, los siguientes documentos en la raz del
sitio MiWeb: index, rutas, monumentos y fiestas. Guarda los cambios.

Abre el documento index (Archivo > Abrir).

Crea una lista sin ordenar, para ello despliega el men Formato, y selecciona
Lista>Lista sin ordenar.

Dreamweaver CS4. Captulo 6. Vnculos

154



Figura 6.10. Insertar lista sin ordenar

Escribe las siguientes palabras en maysculas: RUTAS, MONUMENTOS, FIESTAS,
ENLACES.



Figura 6. 11. Lista sin ordenar.

Selecciona la palabra RUTAS y desde el Inspector de Propiedades HTML, con el
botn Sealar archivo , a la derecha del cuadro de texto Vnculo, crea un
vnculo al documento rutas.htm.

Dreamweaver CS4. Captulo 6. Vnculos

155



Figura 6. 12. Seleccionar vnculo con el Sealador.

Selecciona la palabra MONUMENTOS y desde el Inspector de Propiedades HTML,
con el botn Examinar , a la derecha del cuadro de texto Vnculo, localiza el
documento monumentos.htm y seleccinalo para crear un vnculo al mismo. En el
cuadro de texto Relativa a:, selecciona Documento, para crear una ruta relativa al
documento.

Dreamweaver CS4. Captulo 6. Vnculos

156



Figura 6. 13. Seleccionar vnculo relativo a documento.

Ahora selecciona la palabra FIESTAS y desde el Inspector de Propiedades HTML,
con el botn Examinar , a la derecha del cuadro de texto Vnculo, localiza el
documento fiestas.htm y seleccinalo para crear un vnculo al mismo. En el cuadro
de texto Relativa a:, selecciona Raz del sitio, para crear una ruta relativa a la raz
del sitio.

Dreamweaver CS4. Captulo 6. Vnculos

157



Figura 6. 14. Seleccionar vnculo relativo a la raz del sitio.

Por ltimo, selecciona la palabra ENLACES y desde el comando
Insertar>Hipervnculo, lanza el cuadro de dilogo Hipervnculo. Observa que
aparece escrita la palabra ENLACES en el cuadro Texto. A la derecha del cuadro de
texto Vnculo, con el botn Examinar , localiza el documento enlaces.htm y
seleccinalo para crear un vnculo al mismo. En el cuadro de texto Relativa a:,
selecciona Documento, para crear una ruta relativa al documento.



Figura 6. 15. Crear vnculo desde el cuadro Hipervnculo.
Dreamweaver CS4. Captulo 6. Vnculos

158


Guarda los cambios en el documento index.htm y pulsa F12 para visualizar la
pgina en el navegador.

Comprueba en el navegador que ocurre al hacer clic sobre las palabras vinculadas.



RECOMENDACIN. Pasa a la vista Dividir para que te muestre simultneamente las vistas
cdigo y diseo del documento que ests elaborando y comprueba las diferencias de cdigo
HTML que se han generado en los distintos vnculos.


Eliminar vnculos
Para eliminar un vnculo creado en nuestro documento, sin eliminar el elemento que lo
contiene, podemos hacerlo seleccionando previamente este elemento, texto o imagen, y, con
el botn derecho del ratn, ejecutando Quitar vnculo, o borrando directamente el enlace
escrito en el cuadro Vnculo del Inspector de Propiedades HTML.
6.3. Destinos de los vnculos
El destino de los vnculos indica en qu ventana va a ser abierto el documento vinculado y
depender de los marcos, si procede, que hayamos establecido en nuestro documento.
El destino de los vnculos lo podemos establecer desde el cuadro Destino del Inspector de
Propiedades HTML o desde el cuadro de dilogo Hipervnculo que se abre si seleccionamos el
men Insertar>Hipervnculo.
Adems de los nombres de los marcos creados en nuestro documento, en el caso de que
hayamos creado un conjunto de marcos, podemos seleccionar los nombres de destino
reservados:
_blank, carga el archivo vinculado en una ventana de navagador nueva y sin nombre.
_parent, carga el archivo vinculado en el conjunto de marcos padre o en la ventana del
marco que contiene el vnculo. Si el marco que contiene el vnculo no est anidado, el archivo
vinculado se cargar en la ventana completa del navegador. La creacin de Marcos la veremos
en un captulo posterior.
_self, carga el archivo vinculado en el mismo marco o ventana que el vnculo. Este destino es
el predeterminado, por lo que normalmente no es preciso especificarlo.
_top, carga el archivo vinculado en la ventana completa del navegador, quitando as todos
los marcos.
6.4. Otros vnculos
Vnculos a un anclaje con nombre
Dreamweaver CS4. Captulo 6. Vnculos

159

Cuando estamos trabajando con un documento muy extenso y queremos facilitar el acceso a
varias partes del mismo, podemos establecer vnculos a estas partes. El sistema sera similar al
ndice de un libro. Cuando tenemos un libro y efectuamos una consulta a su ndice buscando
un elemento del mismo, ste nos indica en qu pgina se encuentra dicho elemento. Despus
basta con acceder a esta pgina y localizamos el elemento buscado. Pues el sistema de
vnculos a un anclaje con nombre acta de tal forma que, una vez localizado el elemento que
deseamos en el ndice del documento, al hacer clic con el ratn sobre l, accedemos de
forma automtica a esa parte.
Al igual que en el libro tenemos numeradas las pginas que facilitan nuestra bsqueda, en
estos documentos debemos establecer un anclaje que ser el elemento que nos facilite la
tarea.
Para crear este anclaje, colocamos el cursor en el lugar donde deseamos poner el punto de
fijacin. Hacemos clic en el comando Insertar>Anclaje con nombre o tambin haciendo clic en
el botn Anclaje con nombre de la barra Insertar, categora
Comn. En ambos casos se nos abrir el cuadro de dilogo Anclaje con nombre.

Figura 6. 16. Cuadro de dilogo Anclaje con nombre.
En el cuadro de texto Nombre de anclaje, escribimos un nombre para el anclaje procurando no
dejar ningn espacio en blanco. Hacemos clic en Aceptar para insertarlo en el lugar donde
habamos colocado el cursor. Dreamweaver inserta un icono en el lugar donde hemos
colocado el anclaje y en el cdigo HTML se nos ha creado una etiqueta como por ejemplo sta:
<a name="rutas" id="rutas"></a> . Si no aparece el icono en la pantalla de diseo, deberemos
activar Elementos invisibles en el comando Ver>Ayudas visuales.
Si seleccionamos nuestro haciendo doble clic sobre l en la ventana del documento,
tambin podremos ver sus propiedades y modificarlas en el inspector, como en nuestro
ejemplo.

Figura 6. 17. Propiedades de Anclaje con nombre.
Dreamweaver CS4. Captulo 6. Vnculos

160

Ahora slo nos queda crear el vnculo al anclaje de nombre creado. Lo primero que debemos
hacer es seleccionar el elemento, texto o imagen, que vamos a vincular. Desde el Inspector de
Propiedades HTML, en el cuadro de texto Vnculo, ponemos el signo # y el nombre del
anclaje. En nuestro ejemplo pondramos #rutas. Debemos tener cuidado al escribir el nombre
del anclaje, pues distingue entre maysculas y minsculas.
Tambin podemos establecer un vnculo con un anclaje con nombre utilizando el botn
Sealar archivo . Basta con seleccionar el elemento que vamos a vincular y desde el botn
Sealar archivo hacemos clic y arrastramos hasta el anclaje con nombre que deseemos.
De forma automtica Dreamweaver pondr en el cuadro de texto Vnculo del Inspector de
Propiedades HTML el signo # y el nombre del anclaje.

Figura 6. 18. Crear un vnculo a un anclaje con nombre desde el Sealador.
Si queremos establecer un vnculo con un anclaje con nombre de un documento distinto, pero
en la misma carpeta que el actual, deberemos poner en el cuadro de texto
nombrearchivo.html#anclaje. Por ejemplo, si hemos creado un anclaje llamado ndice en el
documento rutas.htm y queremos vincularlo desde el documento monumentos.htm, haremos
Dreamweaver CS4. Captulo 6. Vnculos

161

los siguiente: abrimos el archivo monumentos.htm, seleccionamos el elemento que vamos a
vincular y en el campo Vnculo del Inspector de Propiedades HTML de este elemento,
escribimos rutas.htm#indice.

Ejercicio

El objetivo en este ejercicio ser la creacin de vnculos a anclajes de nombre.

Accede desde tu navegador a la direccin:
https://centrovirtual.educacion.es/mentor/informacion_cursos/informacion.htm?dreamw
eaver_cve.

Selecciona con el ratn toda la informacin del curso. Para ello debes colocar el puntero
del ratn al inicio del documento, hacer clic y arrastrar sin soltar hasta el final del
documento. Suelta el ratn, haz clic con el botn derecho sobre el texto seleccionado y en
el men contextual elige Copiar.

Crea un nuevo documento en Dreamweaver.

Desde la ventana de diseo, haz clic en Edicin > Pegar (o bien pulsa Ctrl+V).

Comprueba que el texto anterior se ha pegado en tu nuevo documento. Selecciona todo el
documento (Edicin > Seleccionar todo o Ctrl+A) y cambia la fuente a Arial desde el
Inspector de Propiedades CSS. Te quedar un documento similar al que muestra la
siguiente figura:

Dreamweaver CS4. Captulo 6. Vnculos

162



Figura 6.19. Aspecto del documento.

Observa que hay palabras en azul y subrayadas, es debido a que conservan el vnculo que
tenan en el documento original. Deja estos vnculos como estn en tu documento.

Ahora vas a insertar un anclaje con nombre en cada uno de los siguientes apartados:
CONTENIDOS DEL CURSO, MATERIALES, MTODO DE TRABAJO, CERTIFICACIN FINAL.

o CONTENIDOS DEL CURSO: Sita el cursor justo a la izquierda de la palabra
CONTENIDOS. Haz clic sobre el botn Anclaje con nombre
de la barra Insertar, categora Comn. Teclea la
palabra CONTENIDOS en el cuadro de dilogo. Pulsa Aceptar para insertar el
Anclaje con nombre.

Dreamweaver CS4. Captulo 6. Vnculos

163



Figura 6. 20. Crear un anclaje con nombre.

Observa que Dreamweaver ha insertado el icono del anclaje justo delante de la
palabra CONTENIDOS.

o MATERIALES: Sita el cursor justo a la izquierda de la palabra MATERIALES. Haz
clic sobre el botn Anclaje con nombre de la
barra Insertar, categora Comn. Teclea la palabra MATERIALES en el cuadro de
dilogo. Pulsa Aceptar para insertar el Anclaje con nombre.

o MTODO DE TRABAJO: Sita el cursor justo a la izquierda de la palabra MTODO.
Haz clic sobre el botn Anclaje con nombre de la
barra Insertar, categora Comn. Teclea la palabra METODO (sin tilde para evitar
conflictos de caracteres) en el cuadro de dilogo. Pulsa Aceptar para insertar el
Anclaje con nombre.

o CERTIFICACIN FINAL: Sita el cursor justo a la izquierda de la palabra
CERTIFICACIN. Haz clic sobre el botn Anclaje con nombre
de la barra Insertar, categora Comn. Teclea la
palabra CERTIFICACION (sin tilde para evitar conflictos de caracteres) en el cuadro
de dilogo. Pulsa Aceptar para insertar el Anclaje con nombre.

Coloca el cursor al principio del documento (lo puedes hacer tambin pulsando a la vez
Ctrl + Inicio. Teclea dos veces la tecla Intro para crear unos espacios delante del texto del
documento.

Vuelve a colocarte al principio del documento, escribe NDICE en maysculas y negrita.
Pulsa la tecla Intro para escribir debajo.

Crea una lista sin numerar ejecutando Formato>Lista>Lista sin ordenar con los ttulos de
cada uno de los apartados en maysculas y negrita: CONTENIDOS DEL CURSO,
MATERIALES, MTODO DE TRABAJO, CERTIFICACIN FINAL.

Dreamweaver CS4. Captulo 6. Vnculos

164



Figura 6. 21. Crear un ndice en el documento.

Crea un vnculo a cada anclaje. Para ello, realizaremos lo siguiente:

o Selecciona CONTENIDOS DEL CURSO que acabas de escribir en el ndice. Pulsa
sobre el botn de la barra Insertar, categora Comn. En el
cuadro de dilogo Hipervnculo que se abre, despliega la lista Vnculo, selecciona
#CONTENIDOS y pulsa Aceptar para crear el vnculo al anclaje.



Figura 6. 22. Crear vnculo a un anclaje con nombre.

o Repite la misma operacin con las palabras del resto de la lista sin ordenar del
Dreamweaver CS4. Captulo 6. Vnculos

165

ndice, para hacer vnculos desde MATERIALES DEL CURSO al anclaje con nombre
#MATERIALES, desde MTODO DE TRABAJO al anclaje con nombre #METODO, y
desde CERTIFICACIN FINAL al anclaje con nombre #CERTIFICACION.

Guarda el documento como anclajes y comprueba pulsando F12 en el navegador lo que
ocurre al hacer clic sobre las palabras que has vinculado en el listado del ndice.



Ejercicio

El objetivo de este ejercicio ser la creacin de un vnculo a anclaje con nombre desde otro
documento.

Crea un nuevo HTML en Dreamweaver (Archivo>Nuevo).

Escribe la palabra Certificacin y haz doble clic sobre ella para seleccionarla.

En el cuadro de texto Vnculo del Inspector de Propiedades HTML, escribe
anclajes.html#CERTIFICACION.

Observa que anclajes.html es el documento que contiene el anclaje con nombre al que
vas a vincular. Y #CERTIFICACION es el anclaje al que vas a vincular y que has creado en el
ejercicio anterior.

Guarda el documento como anclajes2 y pulsa F12 para comprobar en el navegador lo que
ocurre al hacer clic sobre la palabra que has vinculado.


Vnculos a un correo electrnico
Al igual que especificamos vnculos a otros documentos, podemos hacerlo tambin a
direcciones de correo electrnico. Esto es muy til cuando deseamos que los visitantes de
nuestra Web se pongan en contacto con nosotros.
Para indicar que es un enlace a un correo electrnico deberemos escribir el comando mailto
delante de la direccin electrnica a la que deseamos nos escriban, procurando no dejar
espacios en blanco entre los dos puntos y la direccin de correo. Por ejemplo,
mailto:mgas0012@fresno.pntic.mec.es, donde mgas0012 ser mi login o nombre de usuario.
La etiqueta del cdigo HTML que vincula los correos electrnicos sera, en el caso de que
hubisemos tecleado en un documento la palabra Correo y hubisemos creado un vnculo a
nuestro correo electrnico de muestra, la siguiente:
<a href="mailto:mgas0012@fresno.pntic.mec.es">Correo</a>.
Con esta instruccin estamos indicando al navegador que abra el programa que gestiona el
correo electrnico para crear un mensaje que ir dirigido a la direccin electrnica indicada en
el vnculo.
Dreamweaver CS4. Captulo 6. Vnculos

166

Como hemos visto anteriormente, al crear un vnculo de correo electrnico desde un texto o
una imagen, basta con escribir el comando mailto delante de la direccin electrnica en el
cuadro de texto Vnculo, del Inspector de Propiedades HTML.

Figura 6. 23. Crear un Vnculo a un correo electrnico.

El vnculo de correo tambin lo podemos crear desde Insertar>Vnculo de correo electrnico
o haciendo clic en el botn Vnculo de correo electrnico de la
barra Insertar, categora Comn. En ambos casos se nos abrir el cuadro de dilogo Vnculo
de correo electrnico.

Figura 6.24. Cuadro de dilogo Vnculo de correo electrnico.

En el cuadro Texto escribimos el texto que vamos a vincular y en el cuadro Correo electrnico
escribimos la direccin electrnica. Observa que en este cuadro no ponemos mailto, ya que al
Aceptar, nos crea automticamente la etiqueta HTML correspondiente.
Con este procedimiento no nos ser posible asignar vnculos de correo electrnico a una
imagen, slo podremos introducir el texto que contendr el vnculo y la direccin electrnica.

Ejercicio

El objetivo de este ejercicio ser la creacin de un vnculo a un correo electrnico desde una
imagen.

Abre en tu navegador la siguiente direccin:
https://centrovirtual.educacion.es/mentor/inicio.html

En la pgina que se abre, localiza la imagen Correo web . Sitate sobre esta
Dreamweaver CS4. Captulo 6. Vnculos

167

imagen y haz clic con el botn derecho del ratn sobre ella, selecciona Guardar imagen
como y gurdala en la carpeta imagenes de tu sitio MiWeb. Se trata de un fichero de
imagen llamado correo_click.gif.
Si tienes dificultades haciendo esto, tambin puedes descargarte la imagen
correo_click.gif desde Materiales de Apoyo, Material necesario para ejercicios, Ejercicios
del Captulo6.

Localiza en tu sitio el documento index y brelo.

Coloca el cursor debajo de los vnculos que tenas creados en este documento y cntralo
en la pgina.

Desde el comando Insertar>Imagen o desde el botn de la
barra Insertar, categora Comn, accede al cuadro de dilogo Seleccionar origen de
imagen para localizar la imagen que acabas de guardar (correo_click.gif).



Figura 6.25. Insertar una imagen en documento.

Pulsa Aceptar para insertar la imagen en el documento index. Automticamente se abrir
el cuadro de Atributos de accesibilidad de la etiqueta de imagen donde vamos a teclear
Correo web en el campo Texto alternativo y luego pulsaremos Aceptar.

Selecciona la imagen o comprueba que est seleccionada (es suficiente con hacer clic
sobre ella). En el Inspector de Propiedades de la imagen escribe en el cuadro de texto
Vnculo tu direccin de correo electrnico, pero teniendo la precaucin de anteponer
Dreamweaver CS4. Captulo 6. Vnculos

168

mailto. Por ejemplo, si tu correo es mgas002@fresno.pntic.mec.es, en el cuadro de texto
Vnculo, debers teclear sin espacios: mailto:mgas0012@fresno.pntic.mec.es



Figura 6.26. Crear un vnculo a un correo electrnico desde una imagen.

Guarda los cambios del documento y pulsa la tecla F12. Comprueba en el navegador lo que
ocurre al hacer clic sobre la imagen del correo.



NOTA. Para que el enlace a un correo electrnico funcione correctamente, es necesario que
en el ordenador desde el que accedemos a la pgina Web que contiene este tipo de vnculo,
est configurado correctamente el programa gestor del correo electrnico.



Dreamweaver CS4. Captulo 6. Vnculos

169

6.5. Formato de los vnculos:
Generalmente, cuando un texto contiene un vnculo, el texto suele aparecer subrayado y
adems suele tener asociados tres colores distintos.
- uno para indicar el vnculo, que suele ser por defecto el color azul, e indica que el vnculo no
se ha visitado an
- otro para indicar el vnculo activo, que suele ser por defecto de color rojo e indica que hemos
hecho clic sobre l, y
- un tercero para indicar el vnculo visitado, por defecto de color violeta.

RECOMENDACIN. No es aconsejable modificar esta identificacin de los vnculos, pues
aunque no es necesario mantenerla, el usuario de nuestra Web puede estar habituado a ello.


Si de todas formas decidimos modificar estas caractersticas del vnculo, podremos hacerlo
accediendo a las Propiedades de la pgina desde el men Modificar, desde el Inspector de
Propiedades CSS del documento activo, o haciendo clic con el botn derecho del ratn sobre
cualquier parte en blanco del documento y seleccionando Propiedades de la pgina, para
despus seleccionar Vnculos (CSS).

Figura 6.27. Cuadro Propiedades de la pgina. Categora Vnculos (CSS).
En la categora Vnculos (CSS) podemos configurar:
Dreamweaver CS4. Captulo 6. Vnculos

170

Fuente de vnculo: nos permite especificar el tipo de fuente que se debe utilizar para el
texto de un vnculo. Dreamweaver utiliza, de forma predeterminada, la misma combinacin de
fuentes especificada para todo el documento, a menos que aqu especifiquemos otra fuente.

Figura 6.28. Lista de seleccin de Fuente de vnculo.
Tamao: nos permite definir el tamao de la fuente.

Figura 6.29. Lista de seleccin de Tamao de fuente.
Si seleccionamos un valor numrico, tambin nos permite elegir la unidad de medida.
Dreamweaver CS4. Captulo 6. Vnculos

171


Figura 6.30. Lista de seleccin de unidad de medida.
Color de vnculo: nos permite especificar el color de los vnculos. Este color ayuda al usuario
a distinguir entre el texto normal y los vnculos que sirven de enlace a otras pginas.
Vnculos de sustitucin: nos permite especificar el color que tendr el vnculo cuando se
coloque encima el ratn.
Vnculos visitados: nos permite especificar el color de los vnculos visitados y ayuda al
usuario a distinguirlos de los que an no han sido visitados.
Vnculos activos: nos permite especificar el color de un vnculo al hacer clic sobre l con el
ratn.

Figura 6.31. Especificar color de vnculos.
Para modificar los colores del texto de los distintos estados del vnculo, debemos hacer clic en
el botn Selector de color y seleccionarlo de la paleta de colores o poner su valor
hexadecimal en cada cuadro de texto.
Estilo subrayado: nos permite definir el estilo subrayado que se debe aplicar a los vnculos.
Por defecto, cuando tenemos un texto con un vnculo asociado, el texto aparece subrayado.

Figura 6.32. Lista de seleccin de estilos de subrayado.

172















Captulo 7.
Tablas


Dreamweaver CS4. Captulo 7. Tablas
173

Captulo 7. TABLAS
Las tablas son una de la herramientas ms eficaces para la presentacin de textos, imgenes,
objetos, etc. en una pgina Web, pues nos ayudan a mejorar las posibilidades de diseo al
poder distribuir su contenido por toda la pantalla.
Podemos definir una tabla como un conjunto de filas y columnas, cuya interseccin se
denomina celda.
Figura 7.1. Esquema de una tabla.
Aunque Dreamweaver nos va a permitir manipular de forma sencilla la tabla y todos sus
elementos: filas, columnas y celdas, en HTML no se especifican las columnas explcitamente,
por lo que podramos decir que una tabla sera una o varias filas, donde cada una de ellas
constara de una o varias celdas.
Las etiquetas HTML ms bsicas que definen una tabla son:
<table> .... </table> estas etiquetas nos indican el principio y el final de una tabla y entre
ellas se debe desarrollar su contenido.
<tr> .... </tr> estas etiquetas definen el comienzo y el final de cada fila de la tabla.
<td> .... </td> estas etiquetas identifican a cada una de las celdas de cada fila. Entre estas
etiquetas se insertar el contenido de cada celda.
<th> ... </th> son etiquetas de celda que se utilizan para los encabezados. Se pueden definir
los mismos atributos que al resto de celdas, pero hace que el texto aparezca centrado y en
negrita.
Teniendo en cuenta lo anterior, para definir en cdigo HTML la tabla de la figura 7.1.,
deberamos escribir:
<table> (etiqueta que indica el principio de la tabla)
<tr> (etiqueta que indica el principio de la fila 1)
Dreamweaver CS4. Captulo 7. Tablas

174

<td> </td> (etiquetas de la celda 1,1)
<td> </td> (etiquetas de la celda 1,2)
<td> </td> (etiquetas de la celda 1,3)
</tr> (etiqueta que indica el final de la fila 1)
<tr> (etiqueta que indica el principio de la fila 2)
<td> </td> (etiquetas de la celda 2,1)
<td> </td> (etiquetas de la celda 2,2)
<td> </td> (etiquetas de la celda 2,3)
</tr> (etiqueta que indica el final de la fila 2)
</table> (etiqueta que indica el final de la tabla)
7.1. Insertar una tabla
Para insertar una tabla en nuestro documento, colocamos el cursor en el lugar deseado y
elegimos cualquiera de las dos opciones:
A travs del men Insertar>Tabla.
Con el botn Tabla en la categora Comn de la barra Insertar.
En ambos casos se nos abrir el cuadro de dilogo Tabla.
Dreamweaver CS4. Captulo 7. Tablas

175


Figura 7.2. Cuadro de dilogo Tabla.
Desde este cuadro de dilogo podemos especificar los atributos de la tabla antes de insertarla:
1. En la seccin Tamao de tabla, especificaremos las opciones siguientes:
Filas: en el cuadro especificaremos el nmero de filas de la tabla.
Columnas: en el cuadro especificaremos el nmero de columnas de la tabla.
Ancho de tabla: desde aqu podemos especificar el ancho de la tabla en pxeles o como
porcentaje del ancho de la ventana del navegador o del elemento que la contiene: tabla, capa,
etc. La diferencia principal es que el ancho en pxeles permanece inalterable y caso que no se
viera todo el contenido desde la pantalla del navegador, deberamos utilizar las barras de
desplazamiento, en cambio, el ancho en Porcentaje indica el porcentaje que ocupar de la
ventana del navegador o del elemento que la contiene y por lo tanto se adaptar a su tamao.
Cuando indicamos un ancho de tabla, en el cdigo HTML se crea una de las siguientes
etiquetas:
<table width="100"> para indicar que la tabla tiene un ancho de 100 pxeles,
independientemente de la ventana del navegador o del elemento que la contenga.
<table width="100%"> para indicar que la tabla tiene un ancho del 100% de la ventana del
navegador o del elemento que la contenga.
Dreamweaver CS4. Captulo 7. Tablas

176

Grosor del borde: escribiremos el ancho en pxeles de los bordes de la tabla. Para disear la
tabla sin borde, deberemos escribir el valor 0; en el caso de no escribir nada, la mayora de los
navegadores mostrarn la tabla como si tuviera el valor 1. Dreamweaver mostrar los bordes
de la tabla con puntos cuando el grosor del borde es 0. Si no lo podemos ver, deberemos
activar Bordes de tabla desde Ver > Ayudas visuales.
Cuando indicamos un borde de tabla, por ejemplo de 1 pxel, en el cdigo HTML se crea la
siguiente etiqueta: <table border="1">
Relleno de celda: especificaremos la distancia en pxeles entre el borde de las celdas y sus
contenidos. Si no escribimos ningn valor, por defecto, los navegadores mostrarn como valor
de relleno de celda el 1.
Cuando indicamos un relleno de celda, por ejemplo de 2 pxeles, en el cdigo HTML se crea la
siguiente etiqueta:
<table cellpadding="2">
Espacio entre celdas: indicaremos la distancia de separacin en pxeles entre las celdas de la
tabla. Si no escribimos ningn valor, por defecto, los navegadores mostrarn el espaciado de
celda como si fuera 2.
Cuando indicamos un espacio entre celdas, por ejemplo de 2 pxeles, en el cdigo HTML se
crea la siguiente etiqueta: <table cellspacing="2">
Lgicamente estas etiquetas pueden ir combinadas, indicando las propiedades que va a tener
la tabla que estamos construyendo. Por ejemplo la etiqueta:
<table width="100" border="1" cellspacing="2" cellpadding="2"> nos define una tabla con 100
pxeles de ancho, 1 pxel de borde, 2 pxeles de relleno de celda y 2 pxeles de espacio entre
celdas.
2. En el caso que los usuarios utilicen lectores de pantalla, es recomendable la utilizacin de
un encabezado para la tabla. 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. En la
seccin Encabezado, seleccionaremos una de las siguientes opciones:
Ninguno: con esta opcin no utilizamos encabezados para la tabla.
Izquierda: con esta opcin introducimos un encabezado para cada fila de la tabla,
convirtiendo la primera columna de la tabla en una columna de encabezados.
Superior: con esta opcin introducimos un encabezado para cada columna de la tabla,
convirtiendo la primera fila de la tabla en una fila de encabezados.
Ambos: con esta opcin podemos introducir encabezados de columna y de fila en la tabla.
3. En la seccin Accesibilidad, podemos especificar las siguientes opciones:
Texto: si queremos poner un ttulo a la tabla que aparecer fuera de la misma.
Dreamweaver CS4. Captulo 7. Tablas

177

Resumen: podemos escribir una descripcin de la tabla. Los lectores de pantalla leen el
texto del resumen pero dicho texto no aparece en el navegador del usuario.

Ejercicio

El objetivo de este ejercicio ser la creacin de dos tablas para apreciar sus diferencias.

Crea un nuevo documento HTML (Archivo>Nuevo...).

Inserta una tabla (Insertar>Tabla) con las siguientes caractersticas:

o 2 Filas y 3 Columnas.
o Ancho de tabla 100 Pxeles
o Borde de 5 pxeles
o Espacio entre celdas 3 pxeles
o Texto: Tabla con borde.



Figura 7.3. Insertar tabla con borde.

Crea otra tabla (Insertar>Tabla), debajo de la anterior, (pulsa dos veces Intro en la
ventana del documento despus de la tabla creada anteriormente) con las siguientes
caractersticas:

o 2 Filas y 3 Columnas.
o Ancho de tabla 100 Porcentaje
o Borde de 0 pxeles
Dreamweaver CS4. Captulo 7. Tablas

178

o Espacio entre celdas 10 pxeles
o Texto: Tabla sin borde.



Figura 7.4. Insertar tabla sin borde.

Guarda el ejercicio (Archivo > Guardar) como tabla1.html.

Las tablas debern quedar similares a como se aprecia en la siguiente figura:



Figura 7.5. Vista diseo de tablas en ventana del documento.



RECOMENDACIN. Pasa de vez en cuando a la vista Dividir para que te muestre
simultneamente las vistas de cdigo y diseo del documento que ests elaborando y puedas
identificar las etiquetas asociadas a las tablas que has creado.

Dreamweaver CS4. Captulo 7. Tablas

179

7.2. Propiedades de tabla
Propiedades de las tablas
Las propiedades de la tabla se especifican en el Inspector de Propiedades.

Figura 7.6. Inspector de propiedades de tabla.
A travs del Inspector de Propiedades podemos modificar los valores que habamos
especificado al insertar la tabla.
El cuadro desplegable situado justo debajo de Tabla en el inspector es el
identificador de la tabla, en el cual se especifica un nombre o identificador para la tabla.
Filas: indicamos el nmero de filas de la tabla
Cols: indicamos el nmero de columnas que tendr la tabla.
An: indicamos el ancho de la tabla en pxeles o como porcentaje del ancho de la ventana del
navegador.
Rell. celda: indicamos el nmero de pxeles entre el contenido de una celda y su borde.
Esp. celda: indicamos el nmero de pxeles entre celdas contiguas de una tabla.
Alinear: podemos determinar, desplegndolo , dnde aparecer la tabla
en relacin con otros elementos del mismo prrafo, como por ejemplo texto o imgenes.
Las opciones son:
o Izquierda: alinea la tabla a la izquierda, por lo que el texto del mismo prrafo se ajusta
alrededor de la tabla a la derecha.
o Derecha: alinea la tabla a la derecha, por lo que el texto del mismo prrafo se ajusta
alrededor de la tabla a la izquierda.
o Centro: centra la tabla, con el texto encima y/o debajo de la tabla.
o Predeterminado: indica que el navegador debe utilizar su alineacin predeterminada. En
este caso, otro contenido no se mostrar junto a la tabla. Para mostrar una tabla junto a otro
contenido, debemos utilizar la alineacin Izquierda o Derecha.
Borde: especificamos el ancho en pxeles de los bordes de la tabla.
Dreamweaver CS4. Captulo 7. Tablas

180

Clase: especificamos la hoja de estilos que deseemos aplicar a la tabla.
La botonera del inspector nos permite:
o Convertir anchos de tabla a porcentaje : establece el ancho de toda la tabla en su
ancho actual como porcentaje del ancho de la ventana de documento.
o Convertir anchos de tabla a pxeles : establece el ancho de toda la tabla en su ancho
actual en pxeles.
o Borrar ancho de columna : elimina todos los valores especificados para el ancho de la
tabla.
o Borrar alto de fila : elimina todos los valores especificados para el alto de fila de la
tabla.
Cuando hayamos introducido un valor en un cuadro de texto del Inspector de Propiedades,
deberemos pulsar el tabulador o la tecla Intro para aplicar el cambio.
Si pulsamos sobre el men del encabezado de la tabla , desplegaremos una lista de
comandos que nos permitirn tambin modificar la tabla:

Figura 7.7. Modificar tabla.
Propiedades de las celdas, filas o columnas
Si seleccionamos una o varias celdas, filas o columnas, el Inspector de Propiedades HTML
cambia con respecto al de la tabla para poder modificar otras opciones, aunque es el mismo
para las celdas, filas y columnas.

Figura 7.8. Inspector de propiedades HTML de celda.

Dreamweaver CS4. Captulo 7. Tablas

181

La parte superior del Inspector de Propiedades sirve para configurar las propiedades del texto
que se insertar en la celda, que ya describimos en el captulo del texto, por lo que vamos a
centrarnos en las opciones especficas de los elementos de la tabla.
Horiz: especificaremos la alineacin horizontal del contenido a la izquierda, a la derecha o al
centro. La alineacin predeterminada toma la configuracin del navegador que generalmente
es a la izquierda para celdas normales y al centro para celdas de encabezado.
Vert: especificaremos la alineacin vertical del contenido con la parte superior, media,
inferior o con la lnea de base de la celda. La alineacin predeterminada del navegador
generalmente es al medio.
An y Al: podemos indicar el ancho y el alto de las celdas seleccionadas en pxeles o como
porcentaje del ancho o alto total de la tabla. Para especificar un porcentaje, introduciremos el
smbolo de porcentaje (%) tras el valor. Para que el navegador determine el ancho o alto
apropiado en funcin del contenido de la celda, y el ancho y alto del resto de las columnas y
filas, dejemos dejar el campo en blanco.
No aj.: activando esta opcin impedimos el ajuste de lnea, manteniendo todo el texto de
una celda en una sola lnea. En este caso las celdas se adaptarn para incluir todos los datos a
medida que se introducen o pegan en una celda. Habitualmente, las celdas se expanden
horizontalmente para incluir la palabra ms larga o la imagen ms grande y, a continuacin, se
expanden verticalmente cuando es necesario adaptarse a otros contenidos.
Enc.: aplica a la celda seleccionada el formato de celdas de encabezado de tabla. De forma
predeterminada, el contenido de las celdas de encabezado de la tabla aparecer en negrita y
centrado. La etiqueta HTML para este tipo de celdas es <th> en lugar de <td> como es habitual
para el resto de las celdas.
Fondo: podemos indicar el color de fondo de una celda, columna o fila seleccionndolo con
el selector de color o indicando su valor hexadecimal.
El botn Combinar celdas combina, usando extensores, las celdas, filas o columnas
seleccionadas para crear una sola celda.
El botn Dividir celda divide una celda para crear dos o ms celdas. Slo puede
dividirse una celda cada vez, por lo que este botn estar desactivado al seleccionar ms de
una celda.
Cuando hayamos introducido un valor en un cuadro de texto del Inspector de Propiedades,
deberemos pulsar el tabulador o la tecla Intro para aplicar el cambio.
Al establecer las propiedades de una columna, Dreamweaver modifica los atributos de la
etiqueta <td> correspondientes a cada celda de la columna. Sin embargo, cuando se trata de
una fila, Dreamweaver modifica los atributos de la etiqueta <tr> de la fila en lugar de los
atributos de cada etiqueta <td> de las celdas. Con esto conseguimos un cdigo HTML ms
claro y conciso.
Dreamweaver CS4. Captulo 7. Tablas

182

Hemos de tener en cuenta que al aplicar formato a una tabla en vista Diseo, hay un orden de
prioridad de tal forma que el formato de celda tiene prioridad sobre el formato de fila y ste
sobre el de la tabla.
7.3. Operaciones con tablas: Seleccionar
Una vez que hemos insertado la tabla, podemos introducir las modificaciones que deseemos.
Para ello necesitaremos seleccionar el elemento o elementos de la tabla que vayamos a
modificar.
Seleccionar la tabla
Podemos seleccionar una tabla de diversas formas:
Llevamos el puntero del ratn hacia la esquina superior izquierda de la tabla, o a cualquier
punto del borde derecho o inferior de la tabla o al borde de una fila o columna. Cuando el
puntero cambia de forma y se convierte en el icono de cuadrcula de tabla , podemos
seleccionar la tabla con un simple clic.
Hacemos clic en el interior de la tabla, en cualquier celda y, seguidamente seleccionamos la
etiqueta <table> del selector de etiquetas situado en la parte inferior izquierda de la ventana
del documento .
Colocamos el cursor en cualquier celda de la tabla, hacemos clic con el botn derecho del
ratn y seleccionamos Tabla>Seleccionar tabla.

Figura 7.9. Seleccionar tabla desde el men contextual.

Dreamweaver CS4. Captulo 7. Tablas

183

Colocamos el cursor en cualquier celda de la tabla y a continuacin seleccionamos
Modificar>Tabla>Seleccionar tabla.

Figura 7.10. Seleccionar tabla desde el men Modificar.
Hacemos clic en el interior de la tabla, en cualquier celda y, seguidamente hacemos clic en
el indicador de ancho de la tabla. Nos aparece un men contextual, del que elegiremos
Seleccionar tabla.

Figura 7.11. Seleccionar tabla desde el indicador de ancho.
Cuando hayamos ejecutado cualquiera de las opciones anteriores para seleccionar la tabla,
nos aparecern los manejadores de seleccin en los bordes inferior y derecho de la tabla.
Desde estos manejadores podremos modificar el ancho y el alto de la tabla.
Dreamweaver CS4. Captulo 7. Tablas

184


Figura 7.12. Tabla seleccionada y puntos de control.
Dreamweaver nos muestra el ancho de la tabla y de cada columna cuando est seleccionada o
cuando tenemos colocado el cursor en cualquiera de sus celdas.

Figura 7.13. Visualizacin de anchos de tabla y columna.
Podemos activar o desactivar la visualizacin de los anchos y mens de dos formas:
A travs del men Ver>Ayudas visuales>Anchos de tabla.
Haciendo clic con el botn derecho del ratn sobre cualquier parte de la tabla y
seleccionando Tabla>Anchos de tabla, desde el men contextual.
Si no apareciera el ancho de la tabla o de la columna, significa que la tabla o la columna no
tienen el ancho especificado. En la figura anterior slo aparece el ancho de la tabla porque
est especificado, sin embargo no aparece el de las columnas porque no hemos indicado
ningn valor.
Junto a estos anchos se encuentran unas flechas de men desplegables que nos permiten
acceder de forma inmediata a algunos comandos de las tablas.

Figura 7.14. Men de tabla.
A veces nos aparecen dos nmeros en la tabla y puede deberse a dos causas:
Que al insertar la tabla, hayamos definido el ancho como Porcentaje. En este caso nos
aparecer el valor en tanto por ciento aplicado y entre parntesis el valor en pxeles
.
Que el ancho visual que aparece en la vista diseo no se corresponda con el ancho que
hayamos especificado. Esto nos puede ocurrir si insertamos un contenido en la tabla, como por
Dreamweaver CS4. Captulo 7. Tablas

185

ejemplo una imagen, con dimensiones superiores a las especificadas. En este caso nos
aparecer el valor del ancho especificado y entre parntesis el valor del ancho tal como
aparece en la vista diseo.

Figura 7.15. Diferencia entre ancho definido y visualizado.

Cuando nos ocurra este caso, podemos modificar el tamao del contenido de la tabla o hacer
que se cambie el ancho especificado por el real (el que estamos utilizando en la vista diseo);
para ello debemos seleccionar la opcin Igualar todos los anchos del men desplegable.
Seleccionar filas
Podemos seleccionar una fila de diversas formas:
Colocar el puntero del ratn en la primera celda de la fila que vayamos a seleccionar, pulsar
el ratn y mantenindolo pulsado, arrastrarlo hasta la ltima celda de la fila.

Figura 7.16. Seleccionar fila con el ratn.
Situar el puntero del ratn en el borde izquierdo de la fila que vayamos a seleccionar,
cuando cambie de forma y se convierta en una flecha de seleccin, hacemos clic para
seleccionarla.

Figura 7.17. Seleccionar fila con flecha de seleccin.
Colocamos el cursor en cualquier celda de la fila que vayamos a seleccionar y, seguidamente
seleccionamos la etiqueta <tr> del selector de etiquetas situado en la parte inferior izquierda
de la ventana del documento .



Dreamweaver CS4. Captulo 7. Tablas

186

Seleccionar columnas
Podemos seleccionar una columna de diversas formas:
Colocar el puntero del ratn en la primera celda de la columna que vayamos a seleccionar,
pulsar el ratn y mantenindolo pulsado, arrastrarlo hasta la ltima celda de la columna.

Figura 7.18. Seleccionar columna con el ratn.
Situando el puntero del ratn en el borde superior de la columna que vayamos a seleccionar,
cuando cambie de forma y se convierta en una flecha de seleccin, hacemos clic para
seleccionarla.

Figura 7.19. Seleccionar columna con flecha de seleccin.
Desde el men desplegable de los anchos de columnas, podemos elegir la opcin Seleccionar
columna.

Figura 7.20. Seleccionar columna desde el men de anchos.

Seleccionar celdas
Para seleccionar una celda, tambin lo podemos hacer de diversas formas:
Presionando la tecla Control (Ctrl), mientras hacemos clic en la celda que vamos a
seleccionar.
Colocando el cursor en la celda que deseamos seleccionar y, a continuacin, ejecutamos el
comando Edicin>Seleccionar todo. Si volvemos a ejecutar Seleccionar todo, estando la celda
ya seleccionada, seleccionaramos toda la tabla.

Dreamweaver CS4. Captulo 7. Tablas

187

Colocamos el cursor en la celda que vayamos a seleccionar y, seguidamente seleccionamos
la etiqueta <td> del selector de etiquetas situado en la parte inferior izquierda de la ventana
del documento .
Para seleccionar varias celdas contiguas, el procedimiento ms sencillo es mantener pulsado
el ratn mientras lo arrastramos sobre las celdas que deseamos seleccionar.

Figura 7. 21. Seleccionar celdas contiguas.
Si queremos seleccionar varias celdas no contiguas, deberemos mantener la tecla Control
(Ctrl) pulsada mientras hacemos clic sobre las celdas que deseamos seleccionar.

Figura 7.22. Seleccionar celdas no contiguas.

7.4. Operaciones con tablas: Aadir, Eliminar
Aadir filas o columnas
Para aadir filas o columnas a una tabla, podemos hacerlo de varias formas:
Ejecutando el comando Modificar>Tabla>Insertar fila; se insertar una fila encima de la fila
donde hayamos colocado el cursor. Si ejecutamos el comando Modificar>Tabla>Insertar
columna se insertar una columna a la izquierda de la columna donde hayamos colocado el
cursor.
Si ejecutamos el comando Modificar>Tabla>Insertar filas o columnas se activar el cuadro
de dilogo Insertar filas o columnas.
Dreamweaver CS4. Captulo 7. Tablas

188


Figura 7.23. Cuadro de dilogo Insertar filas o columnas.
Este cuadro de dilogo nos va a permitir insertar una o varias filas o columnas en una tabla. En
Insertar indicamos si queremos insertar Filas o Columnas. En Nmero de filas o Nmero de
columnas, escribimos el nmero de filas o columnas que deseamos insertar. En Dnde,
especificamos si las nuevas filas o columnas deben aparecer Sobre la seleccin o Bajo la
seleccin, en el caso de las filas, o Antes de la columna o Despus de la columna, en el caso
de las columnas, con respecto a la celda seleccionada.
Desde el men contextual podemos acceder a las dos opciones anteriores seleccionando
Tabla>Insertar fila, Tabla>Insertar columna o Tabla>Insertar filas o columnas. Este men
contextual nos aparece al hacer clic con el botn derecho del ratn sobre la posicin donde
deseamos insertar la fila o la columna.
Cuando seleccionamos la tabla completa, desde el Inspector de Propiedades HTML
podemos aumentar el valor de Filas para aadir filas o aumentar el valor de Cols para aadir
columnas. Dreamweaver aade las filas al final de la tabla y las columnas a la derecha de la
tabla.

Figura 7.24. Aadir filas o columnas desde el Inspector de Propiedades.
Para insertar una columna, tambin lo podemos hacer desde el men desplegable de ancho
de columna, seleccionando la opcin Insertar columna izquierda o Insertar columna derecha,
con respecto a la columna seleccionada.

Figura 7.25. Insertar columna desde men de anchos.
Dreamweaver CS4. Captulo 7. Tablas

189

Eliminar filas o columnas
Para eliminar filas o columnas podemos utilizar varios procedimientos:
Colocamos el cursor en la fila o columna que deseamos eliminar y ejecutamos
Modificar>Tablas>Eliminar fila o Modificar>Tabla>Eliminar columna, segn corresponda.
Tambin lo podemos hacer desde el men contextual, colocando el cursor en el lugar
indicado y haciendo clic con el botn derecho del ratn. Ejecutamos Tabla>Eliminar fila o
Tabla>Eliminar columna, segn el caso.
Seleccionando la fila o la columna completa que deseamos eliminar y, a continuacin,
ejecutamos Edicin>Borrar o pulsamos la tecla Supr.
Seleccionando toda la tabla, desde el Inspector de Propiedades, podemos eliminar filas o
columnas disminuyendo el valor de Filas o de Cols, respectivamente. Dreamweaver eliminar
las filas del final de la tabla y las columnas de la derecha de la tabla.
7.5. Operaciones con tablas: Modificar tamao
Modificar el tamao de la tabla
Lo primero que debemos hacer es seleccionar la tabla completa para que nos aparezca el
Inspector de Propiedades de la tabla.

Figura 7.26. Inspector de propiedades Tabla.
Generalmente se especifica el ancho, An, mientras que el Alto, Al, no contiene valor y, por
tanto, no aparece en el inspector. En el cuadro An podemos especificar los nuevos valores para
el ancho de la tabla, indicando si el nuevo tamao ser en pxeles (px.) o en porcentaje (%).
Al cambiar el tamao de toda la tabla, Dreamweaver modifica el tamao de las celdas
proporcionalmente, excepto de aquellas que tengan un tamao especificado anteriormente. Si
todas las celdas de la tabla tuvieran un tamao definido, al cambiar el tamao de la tabla
tambin lo hara el tamao visual de las celdas en la ventana del documento, aunque no vare
el valor especificado.
Desde el Inspector de Propiedades podemos hacer modificaciones de forma rpida para el
conjunto de elementos de la tabla a travs de los siguientes botones:
Este botn convierte el ancho de la tabla en porcentaje del ancho total de la ventana
del documento, as como el ancho de todas las columnas de la tabla como porcentaje del
ancho de la tabla.
Dreamweaver CS4. Captulo 7. Tablas

190

Este botn convierte el ancho de la tabla en su ancho actual en pxeles, as como el
ancho de todas las columnas de la tabla.
Este botn elimina todos los valores especificados para el ancho de la tabla, as como
de las columnas.
Este botn elimina todos los valores especificados para el alto de la tabla, as como de
las filas.
Otro procedimiento para modificar el tamao de la tabla consiste en utilizar los manejadores
de seleccin que aparecen al seleccionarla completamente. Para modificar el ancho de la
tabla, basta con arrastrar el manejador de seleccin de la derecha, para modificar el alto de la
tabla, arrastraremos el manejador de seleccin de la parte inferior y para modificar ambos a la
vez, arrastraremos el manejador de seleccin de la esquina inferior derecha.
Modificar el tamao de una fila
Para cambiar el alto de una fila lo podemos hacer:
Desde el Inspector de Propiedades, seleccionando previamente la fila que vamos a
modificar, ponemos el nuevo valor en el cuadro Al. y pulsamos la tecla Intro.
Tambin podemos modificar el tamao, arrastrando el borde inferior de la fila.
Al arrastrar el borde inferior de una fila, las filas que se encuentran por debajo de ella, son
desplazadas hacia abajo, respetando sus alturas, pero modificando la altura general de la
tabla.
Modificar el tamao de una columna
Para cambiar el ancho de una columna lo podemos hacer de varias formas:
Desde el Inspector de Propiedades, seleccionando previamente la columna que vamos a
modificar, ponemos el nuevo valor en el cuadro An. y pulsamos la tecla Intro.
Tambin podemos modificar el ancho de la columna arrastrando su borde derecho.
Con este procedimiento tambin modificamos el ancho de la columna contigua, por lo que
modificamos los dos anchos, pero el ancho general de la tabla no vara.
Para cambiar el ancho de la columna, sin modificar el ancho de la columna contigua
deberemos mantener la tecla Mays pulsada mientras arrastramos su borde derecho.
7.6. Operaciones con tablas: Dividir, Combinar, Anidar
En ocasiones nos encontramos con la necesidad de incluir dos o ms celdas en una misma fila
o columna o por el contrario, que una celda ocupe el alto de dos o ms filas o el ancho de dos
o ms columnas.
Dreamweaver CS4. Captulo 7. Tablas

191

Para conseguir dividir o combinar las celdas de una tabla podemos hacerlo de varias formas.
Divisin de celdas
Para dividir una celda deberemos colocar el cursor en la celda que vamos a modificar y seguir
uno de estos procedimientos:
Ejecutando el comando Modificar>Tabla>Dividir celda.
Desde el Inspector de Propiedades, haciendo clic en el botn Dividir celda . Si no se
muestra el botn, deberemos ampliar el panel del Inspector de Propiedades desde el botn
Expandir .
En ambos casos nos aparece el cuadro de dilogo Dividir celda:

Figura 7.27. Cuadro de dilogo Dividir celda.
En este cuadro de dilogo podemos especificar si la celda debe dividirse en Filas o Columnas,
seleccionando lo que corresponda desde la opcin Dividir celda. Tambin podemos indicar el
Nmero de filas o Nmero de columnas en que debe dividirse la celda, segn el caso.

Figura 7.28. Ejemplo de tabla con celdas divididas en filas y columnas.

Combinacin de celdas
Para combinar las celdas, debemos tener presente que slo podemos hacerlo con aquellas
celdas contiguas formando lnea o rectngulo. Una vez conocido esto, lo primero que debemos
Dreamweaver CS4. Captulo 7. Tablas

192

hacer es seleccionar las celdas que vamos a combinar y despus seguir uno de estos
procedimientos:
Ejecutando el comando Modificar>Tabla>Combinar celdas.
Desde el Inspector de Propiedades, haciendo clic en el botn Combinar celda . Si no se
muestra el botn, deberemos ampliar el panel del Inspector de Propiedades desde el botn
Expandir .
Desde Dreamweaver podemos aumentar o disminuir el nmero de filas o columnas que ocupa
una celda de forma ms sencilla, pero con ciertas limitaciones.
Para aumentar el nmero de filas o columnas basta con colocar el cursor en la celda y
seleccionar Modificar>Tabla>Aumentar tamao de fila o Modificar>Tabla>Aumentar tamao
de columna, segn corresponda.
Con este procedimiento combinamos la celda seleccionada con la que tiene debajo en el caso
de Aumentar el tamao de fila o con la celda de su derecha en el caso de Aumentar el tamao
de la columna. Por esta razn, la opcin Aumentar tamao de columna no es vlido para las
celdas que se encuentren en la columna derecha de la tabla y Aumentar tamao de fila no es
vlida para las celdas que se encuentren en la fila inferior de la tabla.
Para disminuir el nmero de filas o columnas basta con colocar el cursor en la celda combinada
y seleccionar Modificar>Tabla>Reducir tamao de fila o Modificar>Tabla>Reducir tamao de
columna, segn corresponda.
Esto slo es vlido para las celdas combinadas.

Figura 7.29. Ejemplo de tabla con distintas combinaciones de celdas.
Cuando combinamos dos o ms celdas, en HTML se crean unas etiquetas para indicar el
nmero de columnas y/o filas que ocupa la celda.
Colspan: indica el nmero de columnas que ocupa la celda. Por ejemplo, la etiqueta <td
colspan="2"> ... </td> indica que la celda ocupa dos columnas.
Dreamweaver CS4. Captulo 7. Tablas

193

Rowspan: indica el nmero de filas que ocupa la celda. Por ejemplo, la etiqueta <td
rowspan="2"> ... </td> indica que la celda ocupa dos filas.
A veces podemos combinar varias celdas, cuyo cdigo HTML sera por ejemplo, <td
colspan="2" rowspan="2"> ... </td>. En este caso indicamos que la celda ocupa dos columnas y
dos filas.

Ejercicio

El objetivo en este ejercicio ser la personalizacin de una tabla mediante la modificacin de
sus filas y columnas.

Crea un nuevo documento HTML e inserta una tabla (Insertar>Tabla) de 4 filas y 5
columnas, con 400 pxeles de ancho y 1 pxel de grosor del borde.



Figura 7.30. Insertar tabla.

Para facilitar la localizacin de las celdas, voy a numerar las celdas de la tabla que has
insertado. Lgicamente esto no es necesario que lo hagas, basta con que te sirva de referencia
para identificar la ubicacin de las celdas que vamos a combinar.

Dreamweaver CS4. Captulo 7. Tablas

194



Figura 7.31. Identificacin de celdas en tabla.

Selecciona las celdas (1,1), (2,1) y (3,1). Para ello, haz clic en una de ellas (1,1) y arrastra el
ratn sin soltar hasta la ltima (3,1).



Figura 7.32. Seleccionar celdas.

Haz clic con el botn derecho del ratn sobre las celdas seleccionadas y en el men
contextual que te aparece selecciona Tabla > Combinar celdas.



Figura 7.33. Combinar celdas.

Dreamweaver CS4. Captulo 7. Tablas

195

Selecciona las celdas 3,2 y 4,2. Para ello haz clic en una de ellas (3,2) y arrastra el ratn sin
soltar hasta la siguiente (4,2). Desde el Inspector de propiedades haz clic en el botn
Combinar celdas . Si es necesario expande el panel para que te aparezca el botn.

Selecciona las celdas 1,3 y 1,4. Para ello haz clic en una de ellas (1,3) y arrastra el ratn sin
soltar hasta la siguiente (1,4). A continuacin combina las celdas desde
Modificar>Tabla>Combinar celdas.

Por ltimo, selecciona las celdas 3,4, 3,5, 4,4 y 4,5. Para ello haz clic en una de ellas (3,4) y
arrastra el ratn sin soltar hasta la ltima (4,5). Observa que se han seleccionado las
cuatro celdas. Desde el Inspector de propiedades haz clic en el botn Combinar celdas
. Si es necesario expande el panel para que te aparezca el botn.

Al final te deber quedar una tabla parecida a la siguiente:



Figura 7.34. Aspecto final de la tabla.

Guarda el documento como tabla2.


Anidar tablas
Anidar tablas es insertar una tabla dentro de una celda de otra tabla. El procedimiento es
bastante sencillo, basta con colocar el cursor en la celda elegida e insertamos la tabla como
hemos visto anteriormente en este captulo.

Figura 7.35. Ejemplo de tabla anidada.
Ordenar tablas
Las filas de una tabla pueden ordenarse en funcin del contenido de una sola columna, e
incluso en funcin del contenido de dos columnas. Las tablas que no se pueden ordenar son
aquellas con atributos colspan o rowspan, es decir, tablas con celdas combinadas.
Dreamweaver CS4. Captulo 7. Tablas

196

Para ordenar una tabla, deberemos seleccionarla o hacer clic en cualquiera de sus celdas, y
despus seleccionar Comandos>Ordenar tabla. Se abre el cuadro de dilogo Ordenar tabla.

Figura 7.36. Cuadro de dilogo Ordenar tabla.
Seleccionando en los diferentes desplegables del cuadro podemos establecer lo siguiente:
Ordenar por determina los valores de la columna que se utilizarn para ordenar las filas
de la tabla.
Orden determina si la columna debe ordenarse alfabtica o numricamente, y si el orden
ser ascendente (de la A a la Z, de los nmeros ms bajos a los ms altos) o descendente.
Si la columna contiene nmeros, selecciona Numricamente. Una clasificacin alfabtica
aplicada a una lista de nmeros de uno y dos dgitos ordenar los nmeros como si fueran
palabras (como 1, 10, 2, 20, 3, 30) en lugar de ordenarlos como si fueran nmeros (como 1, 2,
3, 10, 20, 30).
Despus por / Orden establece el orden de una clasificacin secundaria en otra columna.
Especificaremos la columna de clasificacin secundaria en el men emergente Despus
por y el orden de clasificacin secundaria en los mens emergentes de Orden.
El apartado Opciones permite activar:
El orden incluye la primera fila especifica que la primera fila de la tabla debe incluirse en
la clasificacin. Si la primera fila contiene un encabezado que no se debe mover, no
seleccionaremos esta opcin.
Ordenar filas de encabezado especifica que se ordenen todas las filas de la seccin thead
de la tabla (si las hay) siguiendo los mismos criterios que para las filas del cuerpo.
(Observamos que las filas thead permanecern en la seccin thead y seguirn apareciendo
en la parte superior de la tabla, incluso despus de ordenarlas.)
Ordenar filas de pie especifica que se ordenen todas las filas de la seccin tfoot de la tabla
(si las hay) siguiendo los mismos criterios que para las filas del cuerpo. (Observamos que
Dreamweaver CS4. Captulo 7. Tablas

197

las filas tfoot permanecern en la seccin tfoot y seguirn apareciendo en la parte superior
de la tabla, incluso despus de ordenarlas.)
No modificar los colores de fila hasta que haya finalizado la operacin de orden
especifica que los atributos de fila de la tabla (como por ejemplo, el color) deben
permanecer asociados al mismo contenido despus de que la tabla sea ordenada. Si el
formato de las filas de la tabla alterna dos colores, no se debe seleccionar esta opcin para
garantizar que la tabla ordenada incluya filas con colores alternos. Si los atributos de fila
son especficos del contenido de cada fila, se debe seleccionar esta opcin para garantizar
que los atributos permanezcan asociados a las filas apropiadas de la tabla ordenada.
7.7. Modos de tablas
Cuando estamos trabajando con tablas, Dreamweaver nos facilita el trabajo con distintos
modos de visualizacin. Generalmente se trabaja como lo hemos hecho hasta ahora, es decir,
en Modo estndar, pero tambin podemos trabajar en Modo de tablas expandidas.
Modo de tablas expandidas
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 facilitarnos la edicin. Este modo se
utiliza principalmente porque permite seleccionar elementos de las tablas o colocar el punto
de insercin de forma precisa, pero no nos presenta la pgina como quedar exactamente.
Cuando hayamos realizado la seleccin o hayamos colocado el punto de insercin, deberemos
volver al modo estndar para realizar las modificaciones de la pgina.
Para pasar al modo de tablas expandidas desde la vista diseo, pues no lo podemos hacer
desde la vista cdigo, seguiremos uno de los siguientes procedimientos:
Ejecutando Ver > Modo de tabla > Modo de tablas expandidas.
Haciendo clic en el en el botn Ampliada, en la categora Diseo de la barra Insertar, para
activar el modo de tablas expandidas, o pulsando F6.

Figura 7.37. Botn Ampliada de la categora Diseo de la barra Insertar.
Dreamweaver aade relleno y espaciado de celdas a todas las tablas de la pgina y aumenta
sus bordes. En la ventana del Documento, en la parte superior, aparecer una barra
etiquetada Modo de tablas expandidas y a su derecha un vnculo para Salir de este modo.

Figura 7.38. Modo de tablas expandidas de la ventana del documento.
Dreamweaver CS4. Captulo 7. Tablas

198

Tambin podemos salir de este modo ejecutando Ver > Modo de tabla > Modo estndar o
bien haciendo clic en el botn Estndar, en la categora Diseo de la barra Insertar.
Dreamweaver regresa al modo estndar.
7.8. Importar y exportar datos de tablas
Puedes importar datos de tabla creados con otra aplicacin y guardados en un formato
de texto delimitado (con elementos separados por tabuladores, comas, dos puntos o puntos y
comas) a Dreamweaver y aplicarles formato de tabla.
Tambin puedes exportar los datos de tabla desde Dreamweaver a un archivo de texto, con el
contenido de las celdas contiguas separado por un delimitador. Se pueden utilizar comas, dos
puntos, puntos y comas o espacios como delimitadores. No se pueden exportar partes de una
tabla, por lo que es necesario exportar la tabla entera en todos los casos.
Importar datos de tabla
Podemos importar datos de tabla de diversas formas:
Ejecutando Archivo>Importar>Datos de tabla.


Figura 7.39. Importar datos de tabla.

Dreamweaver CS4. Captulo 7. Tablas

199

Pulsando el icono Importar datos de tabla de la categora
Datos de la barra Insertar.

Desplegando el men Insertar y seleccionando Objetos de tabla>Importar datos de tabla.


Figura 7.40. Importar datos de tabla desde Insertar.

En cualquier caso, se abrir el cuadro de dilogo Importar datos de tabla:

Dreamweaver CS4. Captulo 7. Tablas

200



Figura 7.41. Cuadro de dilogo Importar datos de tabla.

En el campo Archivo de datos podremos especificar el nombre del archivo de datos
que deseamos importar; si pulsamos en Examinar, podremos localizarlo en nuestro
equipo.
Si desplegamos Delimitador , podemos seleccionar el
delimitador utilizado en el archivo que estamos importando; deber usarse el mismo
delimitador que se us cuando se guard en nuestro equipo el fichero de datos. En
caso de seleccionar Otro, aparecer un cuadro de texto a la derecha del men
emergente.

En Ancho de tabla , podemos
activar Ajustar a los datos, si deseamos que todas las columnas tengan el ancho
suficiente para contener la cadena de texto ms larga en la columna; o activar
Establecer en, introduciendo un valor de ancho fijo de la tabla en pxeles o como
porcentaje del ancho de la ventana del navegador.


En el campo Relleno de celda podemos especificar el nmero de pxeles entre el
contenido de una celda y los lmites de la misma. En el campo Espacio entre celdas,
determinaremos el nmero de pxeles entre celdas de tablas contiguas, y en el campo
Borde, podemos teclear el ancho en pxeles de los bordes de la tabla.

Dreamweaver CS4. Captulo 7. Tablas

201

Si desplegamos Formatear primera fila , podemos
determinar el formato aplicado a la primera fila de la tabla de entre las cuatro
opciones de formatos posibles.
Exportar datos de tabla
Situando el cursor dentro de cualquier celda de una tabla, podemos seleccionar
Archivo>Exportar>Tabla. Se abre el cuadro de dilogo Exportar tabla.

Figura 7.42. Cuadro de dilogo Exportar tabla.
En este cuadro podemos establecer el Delimitador a usar para separar los elementos en el
archivo a exportar y seleccionar en Saltos de lnea, el sistema operativo en el que va a abrirse
el archivo exportado.



202















Captulo 8.
Marcos

Dreamweaver CS4. Captulo 8. Marcos
203

Captulo 8. MARCOS
Cuando diseamos un sitio Web, podemos pensar en distribuir la informacin de una cierta
forma. Por ejemplo podemos tener una zona superior de la pgina en la que se muestre por
ejemplo un logotipo, otra zona lateral en la que se incluya un men que enlaza con las
diferentes secciones del sitio Web.
Queremos que estas dos zonas se mantengan fijas en todo el sitio. Adems queremos que el
resto de las pginas del sitio se muestren en la parte central.
Ser solamente esta parte la que cambie segn navegamos por las pginas de nuestro sitio
Web.
Para disear un sitio web, siguiendo modelos similares a estos, podemos utilizar marcos. Por
tanto podemos considerar un marco como una zona de la pgina que puede mantenerse fija
en todo el sitio o bien albergar distintas pginas Web.
La utilizacin de marcos en HTML nos permite al disear una pgina Web dividir el contenido
de la misma en diferentes partes, facilitando su visin ya que, es posible mantener fijas alguna
de estas regiones mientras que otras pueden variar. Por tanto, adems de la funcionalidad de
nuestro sitio Web tambin mejoran su apariencia.
Cada uno de estos marcos individuales va a contener a su vez una pgina HTML, pudiendo
editarse todos los marcos a la vez desde la pgina que los contiene de forma que es posible
contemplar de un solo vistazo el aspecto final que tendr nuestra pgina Web. A modo de
resumen se podra decir que los marcos no son ms que pginas Web contenidas en el interior
de otra pgina Web que las engloba.
8.1. Ventajas y desventajas de los marcos
Entre las principales ventajas del uso de marcos en el diseo de pginas Web podramos
destacar las siguientes:
Cada marco puede disponer, si as lo especificamos al disear nuestra pgina Web, de su
propia barra de desplazamiento, para mostrar su contenido en el caso de que no pueda
visualizarse en su totalidad en la ventana del navegador.
Si en uno de los marcos mostramos imgenes que sirven de vnculo al contenido del marco
central de nuestra pgina Web, dichas imgenes no se cargarn nada ms que la primera vez
que se acceda a la Web, con lo que la velocidad a la hora de visualizarla aumentar.
Como principales desventajas se pueden indicar:
Algunos buscadores no tienen configurados sus motores de bsqueda para que funcionen
correctamente en pginas con marcos, aunque los ms conocidos y utilizados s que tienen
resuelto este problema.
La alineacin de objetos situados en distintos marcos puede llegar a ser complicado en
ocasiones.
Dreamweaver CS4. Captulo 8. Marcos

204

Comprobar las opciones de navegacin puede llevar mucho tiempo.
No todos los navegadores son compatibles con el uso de marcos, por lo que algunos
visitantes con discapacidades pueden experimentar dificultades para navegar. Si utilizas
marcos, incluye siempre una seccin noframes (sin marcos) en tu conjunto de marcos para los
visitantes que no pueden verlos. Tambin se puede incluir un vnculo explcito con una versin
sin marcos del sitio.
Al disear la pgina Web en funcin de nuestras necesidades y a la vista de esta lista de
ventajas y desventajas podemos optar por disearla con o sin marcos a nuestro gusto.
8.2. Operaciones con marcos
Crear marcos y conjuntos de marcos
Un marco es una regin de una ventana del navegador Web que puede mostrar un documento
HTML independientemente de lo que se muestre en el resto de dicha ventana.
Un conjunto de marcos es un archivo HTML que va a indicar el nmero de marcos que van a
componer la pgina Web, su ubicacin dentro de la misma e incluso la direccin Web a travs
de la cual se acceder a esa misma pgina.
La forma general de trabajar con marcos se podra resumir en la creacin de una pgina
principal HTML que va a englobar a todos los marcos (a la que podemos denominar conjunto
de marcos), a continuacin la creacin de los marcos que deseemos dentro de esta pgina
principal y por ltimo el alojamiento a su vez de cada uno de ellos en una pgina HTML. Se
debe tener claro que tanto la pgina principal, como cada una de las pginas HTML que se
alojen en los distintos marcos son pginas independientes y como tales deben ser tratadas y
almacenadas. Por ejemplo, si disponemos de una pgina principal con tres marcos: uno
superior, uno lateral y uno central, estaremos trabajando con cuatro pginas HTML
independientes.
Para crear un marco en Dreamweaver basta con abrir un documento ya existente o crear uno
nuevo, a continuacin hacemos clic en la opcin Insertar>HTML>Marcos y dentro de ella
indicamos la posicin donde deseamos aadir el marco dentro de la pgina: izquierda,
derecha, superior, inferior,...:
Dreamweaver CS4. Captulo 8. Marcos

205


Figura 8.1. Crear un marco.
Tambin es posible aadir un marco haciendo clic en el icono Marcos dentro del panel
Insertar, categora Diseo, pestaa Estndar, eligiendo el conjunto de marcos que mejor se
adapte a nuestras necesidades:

Figura 8.2. Insertar marcos.
Dreamweaver CS4. Captulo 8. Marcos

206

Si ejecutamos Archivo>Nuevo, tambin podemos crear directamente un conjunto de marcos
de entre los diversos de muestra que nos ofrece Dreamweaver, si en el cuadro de dilogo
Nuevo Documento, pulsamos la seccin Pgina de muestra, seleccionamos Conjunto de
marcos en Carpeta de muestra y elegimos el conjunto de que ms se ajuste a nuestras
necesidades.

Figura 8.3. Crear un nuevo conjunto de marcos.
Si decidimos crear un conjunto de marcos utilizando los iconos del panel Insertar y hacemos
clic en una de las opciones que se nos muestran en la categora Diseo, icono , por
ejemplo en la opcin Marco superior , en la pgina Web que estamos
creando aparece una lnea horizontal, indicndonos que se ha creado un marco superior;
adems se abre el cuadro de dilogo Atributos de accesibilidad de la etiqueta marco, en el
que podremos darle un ttulo al marco principal (mainframe) y al marco superior (topFrame)
que acabamos de crear en nuestro nuevo conjunto de marcos.
Dreamweaver CS4. Captulo 8. Marcos

207


Figura 8.4. Pgina web con marco superior
En este caso estamos creando un conjunto de marcos sobre el documento actual, es decir uno
de los marcos creados denominado marco principal va a contener dicho documento.
Podemos crear un conjunto de marcos en Dreamweaver con todos los marcos en blanco,
desde el cuadro Nuevo documento, como hemos mencionado antes, es decir, un nuevo
documento totalmente vaco, que es a la vez un conjunto.
Si nos decidimos por esta ltima opcin, Seleccionamos Pgina de muestra, carpeta Conjunto
de marcos en Carpetas de muestra y, a continuacin, seleccionamos uno de los conjuntos que
se nos muestran en la columna Pgina de muestra, de los cuales podemos ver una
previsualizacin a la derecha, tal y como muestra la Figura 8.3.

RECOMENDACIN. Debemos tener claro que antes de poder ver en un navegador nuestra
pgina compuesta por diferentes marcos, hay que guardarlos uno a uno, as como guardar el
conjunto de marcos que los engloba.


Para llevar a cabo esta tarea tenemos que seleccionar cada uno de ellos de forma individual
como veremos en el apartado siguiente y seleccionar la opcin Archivo>Guardar marco. Una
vez realizado esto, aparecer un cuadro de dilogo indicndonos dnde deseamos almacenar
dicho marco en nuestro disco duro y con qu nombre:
Dreamweaver CS4. Captulo 8. Marcos

208


Figura 8.5. Cuadro de dilogo Guardar como para un marco.
De la misma forma debemos almacenar tambin el conjunto de marcos, seleccionndolo
como veremos a continuacin en el siguiente apartado, y haciendo clic en la opcin
Archivo>Guardar conjunto de marcos.
Seleccionar marcos
Para seleccionar marcos individuales podemos hacer clic dentro del documento actual en el
marco que se desea modificar o bien pulsar sobre un marco concreto en el Panel Marcos
de Dreamweaver:

Figura 8.6. Panel Marcos.
Dreamweaver CS4. Captulo 8. Marcos

209

En este panel es posible:
Seleccionar el conjunto de marcos haciendo clic en la lnea que rodea a todos los marcos
(indicado por una lnea gruesa de color oscuro).

Figura 8.7. Seleccionar conjunto de marcos.
Seleccionar marcos individuales haciendo clic en cada una de las regiones delimitadas por
lneas de color ms claro.

Figura 8.8. Seleccionar un marco individual.
Para poder seleccionar un marco o un conjunto de marcos desde la ventana principal del
documento, en la vista Diseo, haciendo clic en cada uno de ellos es necesario que estn
activas las lneas que los delimitan. En el caso de que no estn activas, podemos activarlas
haciendo clic en Ver>Ayudas visuales>Bordes de marco.
Dreamweaver CS4. Captulo 8. Marcos

210


Figura 8.9. Ver bordes de marco.
Tambin es posible modificar marcos que hayamos creado previamente, realizando dentro de
los mismos divisiones a travs del men Modificar>Conjunto de marcos eligiendo
posteriormente cualquiera de las divisiones que se nos muestran.

Figura 8.10. Modificar conjunto de marcos.

Dreamweaver CS4. Captulo 8. Marcos

211

Cdigo alternativo para pginas con marcos
A la hora de disear una pgina Web con marcos debemos tener en cuenta que no todos los
navegadores los aceptan o bien que puede que no estn configurados correctamente para
ello, con lo cual no se vern las pginas correctamente. Para solucionar este problema, existe
una etiqueta en HTML denominada noframes que nos va a permitir especificar un cdigo
alternativo para dichos navegadores.
Dicho cdigo alternativo, debera tener el mismo contenido (o al menos lo ms parecido
posible) que nuestra pgina Web con marcos y no debe limitarse simplemente a los mensajes
tipo Su navegador no acepta marcos.
En Dreamweaver hay otra forma de especificar este cdigo alternativo a travs de la opcin
Modificar>Conjunto de marcos>Editar contenido sin marcos.

Figura 8.11. Editar contenido sin marcos.
Una vez hecho esto la ventana que mostraba el documento ahora nos muestra otra ventana
bajo el ttulo Contenido sin marcos en la cual se podr especificar dicho contenido de forma
similar a como haramos con otra pgina HTML:
Dreamweaver CS4. Captulo 8. Marcos

212


Figura 8.12. Contenido sin marcos.
En el caso de querer indicar ese contenido a travs de la vista cdigo se especificara entre las
etiquetas de inicio y de fin noframes de la siguiente forma:
<noframes>
.... cdigo HTML alternativo....
</noframes>
8.3. Propiedades de los marcos
Para modificar las propiedades de un marco o conjunto de marcos es necesario seleccionarlo
previamente.
Una vez llevado a cabo este paso previo, podemos modificar las caractersticas del marco o
conjunto de marcos desde el Inspector de Propiedades.
Si este Inspector de propiedades no est visible podemos hacer que sea as desde
Ventana>Propiedades.
Dreamweaver CS4. Captulo 8. Marcos

213


Figura 8.13. Propiedades de un conjunto de marcos.
Desde este inspector es posible especificar si deseamos que los marcos aparezcan separados
por una lnea o no, cambiando el valor del campo Bordes ; podemos
indicar adems el color del borde si hemos activado S, en el campo Color del borde
(seleccionndolo desde el selector de colores o indicndolo mediante
un valor hexadecimal) e, incluso el grosor del mismo en el campo Ancho .
En el campo Fila (o Columna segn el marco que hayamos elegido en el campo Seleccin Fila
Col.), podemos indicar:
El tamao deseado para el marco indicando un valor en el campo Valor.
La unidad de medida a la que se aplicar dicho valor. Dicha unidad de medida se especifica
en el campo Unidades y podr ser Pxeles, Porcentaje o Relativo .
Lo normal es especificar un tamao concreto en pxeles a uno de los marcos y al otro asignarle
un valor relativo (indicando un 1 en el campo Valor, lo que equivale a no introducir ningn
valor), para que se ajuste al tamao de la ventana del navegador.
Si lo que se desea modificar son las propiedades de un marco concreto basta con seleccionarlo
tal y como vimos en el apartado anterior e indicar los datos concretos a modificar en el
Inspector de Propiedades:

Figura 8.14. Propiedades de un marco.
En este inspector se van a poder especificar las siguientes propiedades:
Dreamweaver CS4. Captulo 8. Marcos

214

Nombre de marco: en l se especificar el nombre que deseamos dar a este marco, con una
particularidad, dicho nombre no podr contener espacios en blanco.
Origen: en este campo indicaremos la pgina HTML que se alojar en este marco. Si hacemos
clic en el icono de la carpeta aparecer el cuadro de dilogo Seleccionar archivo HTML
para buscar el fichero deseado en nuestro equipo.
Bordes: si se desea que entre los marcos aparezcan lneas de separacin se elegir el valor S.
Color borde: si en la propiedad anterior se ha indicado que se desea que las lneas de
separacin sean visibles, aqu podremos especificar el color de dichas lneas. Es posible utilizar
para ello el selector de colores, o bien, indicar un valor hexadecimal.
Desplaz.: en funcin del valor elegido , en la ventana del navegador Web
aparecern barras de desplazamiento, siempre que el documento contenido en el marco
pueda mostrarse completamente o no.
Mismo tamao: si seleccionamos este campo, el usuario no podr modificar el tamao de
los distintos marcos desde el navegador.
Ancho y Alto del margen: indican respectivamente la distancia entre el contenido del marco
y sus bordes izquierdo o derecho en el caso de la propiedad Ancho y superior e inferior en el
caso del Alto del margen.
8.4. Vnculos entre marcos
En el apartado anterior en el que veamos como modificar las propiedades de un marco,
indicbamos que en el campo Origen era posible indicar la pgina que inicialmente contendr
el marco.
Sin embargo, como se ha mencionado a lo largo de este captulo el uso ms habitual de los
marcos es situar una serie de vnculos en uno de estos marcos de manera que al hacer clic en
alguno de ellos, el contenido del marco principal vare.
Para llevar a cabo esta tarea, es necesario indicar, al crear un vnculo, cul ser su destino y en
qu marco se debe mostrar esa pgina de destino. Utilizamos para ellos los campos Vnculo y
Destino del Inspector de propiedades del vnculo.
En el campo Vnculo se indica cul es la pgina que se desea mostrar.
Dreamweaver CS4. Captulo 8. Marcos

215

En el campo Destino es posible especificar si queremos mostrar la pgina indicada en el
campo Vnculo, dentro de uno de los marcos definidos en la propia pgina Web o no
. (En la imagen hay dos marcos especificados, mainframe y topFrame)
Adems de los posibles destinos predeterminados de todo hipervnculo podemos seleccionar
tambin:
_blank: muestra el documento vinculado en nueva ventana del navegador,
_parent: muestra el contenido del documento indicado en el conjunto de marcos padre,
_self: es la opcin predeterminada del sistema y abre el contenido del documento vinculado
en el propio marco donde se encuentre el vnculo y
_top: muestra el documento vinculado en la ventana actual del navegador, con lo que
desaparecern todos los marcos.
Aparecen tambin, como hemos visto en la imagen, los nombres de los marcos existentes en
la pgina Web que estamos creando.
El equivalente en cdigo HTML al campo Destino en el cual indicar en qu marco mostrar el
documento vinculado es el parmetro target, dentro de la etiqueta correspondiente al vnculo,
por ejemplo.
<a href="http://www.mipagina.com" target="_blank"> Enlace</a>

Ejercicio

El objetivo de este ejercicio ser la creacin de una pgina Web que contenga tres marcos:
uno en la parte superior de la pgina donde incluiremos un logotipo y el ttulo de nuestra Web,
otro en el lateral izquierdo de la pgina donde incluiremos enlaces a diferentes pginas web y
el tercer marco lo situaremos en el centro de la pgina que contendr el contenido principal
de nuestra Web.

Crea una pgina bsica de HTML (Archivo>Nuevo).

Crea los marcos de los que se va a componer la pgina desde la barra de mens de la
aplicacin Insertar>HTML>Marcos. A continuacin selecciona los distintos marcos a
aadir: superior, izquierda, O bien, cralos usando la barra Insertar, categora Diseo,
Marcos, seleccionando los marcos a aadir. Esta ltima opcin es la ms rpida y cmoda,
ya que te va a permitir crear los tres marcos de una sola vez si haces clic en el icono Marco
superior e izquierdo anidado.

Dreamweaver CS4. Captulo 8. Marcos

216



Figura 8.15. Insertar conjunto de marcos.

En el marco lateral se incluirn varios enlaces cuyo contenido se deber mostrar en el
marco central de la pgina. Para llevar a cabo esta tarea selecciona el marco izquierdo a
travs del panel Marcos situado en la parte derecha del documento actual haciendo clic
en el recuadro correspondiente a dicho marco (si no est activo dicho panel, lo puedes
activar a travs del men Ventana>Marcos).



Figura 8.16. Seleccionar marco izquierdo desde el panel Marcos.

Dreamweaver CS4. Captulo 8. Marcos

217

Inserta en el marco izquierdo el texto ENLACES OFICIALES, a modo de ttulo.

Crea los siguientes enlaces mediante el men Insertar > Hipervnculo:

o Enlace a la web del ISFTIC con el Texto ISFTIC; como Vnculo escribe
http://www.isftic.mepsyd.es/, como Destino selecciona el marco central o
mainFrame, y como Ttulo, indica Web del ISFTIC.



Figura 8.17. Configurar hipervnculo.

o Enlace al Aula MENTOR, con el Texto Aula Mentor; como Vnculo escribe
https://centrovirtual.educacion.es/Visitas/inicio.html, Destino mainFrame o
marco central; Ttulo, Web del Aula Mentor.
o Enlace a la web del Ministerio de Educacin, con el Texto Ministerio de Educacin;
como Vnculo escribe http://www.mepsyd.es/portada.html, Destino mainFrame o
marco central; Ttulo, Web del Ministerio de Educacin.

En el marco superior inserta una tabla de 616 pxeles de Ancho con Borde 0, con dos
columnas y una sola fila, tal y como hemos visto en el captulo anterior.

En la primera columna inserta la imagen (Insertar > Imagen) correspondiente al logotipo del
Ministerio de Educacin. Para obtener esta imagen debes acceder con tu navegador a
http://www.mepsyd.es/portada.html, localizar la imagen que vers en la esquina superior
izquierda de la web, hacer clic sobre ella con el botn derecho del ratn y seleccionar Guardar
imagen como. Gurdala dentro de la carpeta imagenes de MiWeb; se llama escudo-
ministerio.gif. Desde ah, puedes insertarla en la tabla.
Si tienes dificultades localizando la imagen, tambin la tienes disponible para descargar desde
Materiales de Apoyo, Material necesario para ejercicios, Ejercicios del Captulo 8.

En la segunda columna aades un texto, como por ejemplo: Pgina web creada con marcos.

Guarda todo lo creado hasta ahora (Archivo>Guardar todo). Observa que el primer nombre
que pide es el de la pgina que contiene los marcos, el conjunto de marcos, es decir la pgina
que contiene el resto de marcos. Despus ir pidiendo el nombre de las dems pginas, cada
una correspondiente a un marco. Para identificar la pgina que vas a guardar en cada
momento observa en la vista diseo de Dreamweaver que aparece seleccionada.
Dreamweaver CS4. Captulo 8. Marcos

218


Estos son los nombres que vas a dar a las pginas:
o Al conjunto de marcos: marcos.html
o Al marco central: principal.html
o Al marco izquierdo: menu.html (sin tilde)
o Al marco superior: superior.html

Recuerda que no es recomendable usar tildes ni caracteres especiales en los nombres de
ficheros y carpetas para que se puedan leer correctamente en todas las plataformas y
navegadores, as como dejar espacios en blanco en dichos nombres.

El aspecto que presentar tu pgina hasta ahora deber ser similar a ste:



Figura 8.18. Aspecto de la pgina web creada con marcos.

Ahora, para distinguir los marcos superior e izquierdo, les vamos a asignar un color de fondo
distinto al del marco principal.

Si habas cerrado tu trabajo, abre las pginas alojadas en el marco superior e izquierdo, es
decir, superior.html y menu.html respectivamente, desde el panel Archivos.

En el Inspector de Propiedades haz clic en el botn Propiedades de la pgina
. Se abre el cuadro de dilogo Propiedades de la pgina con la
categora Apariencia (CSS) seleccionada. En el campo Color de fondo teclea el color #006699 a
las dos pginas; pulsa Aplicar y luego Aceptar.

Dreamweaver CS4. Captulo 8. Marcos

219



Figura 8.19. Color de fondo de pgina.

Si al pulsar Aceptar no ves el color de fondo aplicado en la vista Diseo, no te preocupes, pulsa
Vista en vivo para ver como quedara tu pgina en un navegador, y en esta
vista s vers el nuevo color de fondo.

Realiza los cambios que ms te gusten para el formato de los textos, pero que se puedan ver
correctamente en la pgina. Por ejemplo te puede quedar como muestra la siguiente figura:



Figura 8.20. Aspecto final de la pgina creada con marcos.

Guarda los cambios y pulsa F12 para ver la pgina en tu navegador. Prueba los enlaces que
Dreamweaver CS4. Captulo 8. Marcos

220

has creado en el marco izquierdo.



221

















Captulo 9.
Formularios


Dreamweaver CS4. Captulo 9. Formularios
222

Captulo 9. FORMULARIOS
Los formularios en HTML permiten a los visitantes de una pgina web una cierta interaccin,
permitindoles enviar o recibir informacin segn el tipo de formulario.
Esto se consigue gracias a la adicin de campos de entrada/salida a la pgina Web
denominados campos de formulario. Los hay de muy diferentes tipos: campos de texto,
botones, casillas de verificacin, botones de opcin, etc. stos permitirn al usuario de la web,
rellenar dichos campos o seleccionar entre las diferentes opciones disponibles y pasar toda
esta informacin al servidor.
Todos estos campos se deben incluir entre las etiquetas <form> y </form> de inicio y fin de
formulario respectivamente (Dreamweaver se encargar de crearlas cuando le digamos que
queremos insertar un formulario en nuestra pgina HTML).
Cuando el usuario, despus de hacer clic en el botn del formulario, enva la informacin al
servidor, en l se procesan los datos, y si debe haber una respuesta, se genera una nueva
pgina HTML con los datos correspondientes que se devuelve de nuevo al navegador desde el
que se origin la peticin. Este procesamiento de datos en el servidor no se realiza con HTML
sino con otro tipo de lenguajes denominados lenguajes de servidor como pueden ser: PHP,
ASP, CGI,
9.1. Crear formularios
Para crear un formulario en Dreamweaver slo tenemos que crear un nuevo HTML como ya
hemos aprendido en captulos anteriores. Despus, situamos el cursor en el punto del
documento donde queramos insertar el formulario, desplegamos el men Insertar>Formulario
y seleccionamos Formulario.

Figura 9.1. Insertar Formulario.
Dreamweaver CS4. Captulo 9. Formularios

223

Dicho formulario se identifica en la vista Diseo de la pgina web, mediante un cuadro de
trazos discontinuos de color rojo.

Figura 9.2. Formulario en la vista diseo de un documento.

RECOMENDACIN. Si no observas el cuadro que identifica el formulario puedes activarlo
desde el comando Ver > Ayudas visuales > Elementos invisibles.


Para modificar las propiedades del formulario que acabamos de crear, slo hay que
seleccionarlo, bien haciendo clic en el contorno de trazos antes mencionado, o haciendo clic
en la etiqueta form en el selector de etiquetas situado en la parte inferior de la ventana y
especificar los datos concretos relativos al formulario en el Inspector de Propiedades.

Figura 9.3. Propiedades de un formulario.
Las propiedades que podemos modificar son:
Nombre del formulario: aqu debemos escribir un nombre significativo para identificar al
formulario dentro del cdigo HTML.
Accin: indicamos qu programa o pgina HTML debe ejecutar el formulario al interactuar
con el servidor, por ejemplo al pulsar un botn de envo de datos de formulario.
Por ejemplo, si indicamos como destino una pgina HTML hay que especificar la ruta completa
de la forma: http://www.mipagina.com/index.html
Si por el contrario deseamos ejecutar un programa escrito con cualquier lenguaje de
programacin web, por ejemplo PHP, deberemos especificar el nombre de dicho programa y
en el caso de ser necesaria la ruta completa donde se encuentra dicho programa alojado, de la
siguiente forma: /php/recoger_datos.php
Mtodo: aqu seleccionamos cmo se pasarn los datos del formulario al servidor. En este
caso podemos especificar dos posibles valores :
Dreamweaver CS4. Captulo 9. Formularios

224

GET: este mtodo lo utilizaremos para pasar los datos del formulario al servidor utilizando el
URL de la barra de navegacin segn el formato:
http://www.nombre_pagina.es?nombre_campo1=valor_campo1&nombre_campo2=valor_ca
mpo2&...... es decir, en primer lugar la direccin completa de la pgina HTML donde est
alojado nuestro formulario, a continuacin el smbolo ?, y por ltimo parejas de nombres de
campos con sus valores correspondientes separados por el smbolo &.
Supongamos que nuestro formulario alojado en http://www.miweb.com, tiene dos campos,
uno llamado nombre y otro apellidos, cuando el usuario rellene los campos y haga clic en
enviar los datos mediante el botn dentro de ese formulario, este mtodo aadira los valores
introducidos al URL de la siguiente forma:
http://www.miweb.com?nombre=Antonio&apellidos=Lpez
A la hora de seleccionar este mtodo se deben tener en cuenta dos puntos importantes:
- El primero y ms importante es que al mostrar todos los datos del formulario a travs de la
URL, dichos datos son totalmente visibles por lo que si no queremos que sea as (supongamos
un formulario donde se introduzcan contraseas, datos bancarios,...) ste mtodo no ser el
ms adecuado.
- Otro aspecto a tener en cuenta es que los URL admiten como mximo 8.192 caracteres, con
lo cual si nuestro formulario contiene muchos campos, o bien si los datos introducidos en cada
uno de estos campos tienen una longitud muy grande, es posible que se sobrepase este lmite
y por tanto los datos no se enven completamente, pudiendo quedar algunos de ellos
cortados.
POST: al contrario que el mtodo citado anteriormente, POST no utiliza el URL para enviar los
datos del formulario, sino que los incluye en la peticin HTTP del formulario de forma
transparente al usuario. Este mtodo soluciona los dos problemas antes mencionados con el
mtodo GET, ya que, los datos enviados no son visibles en ningn momento para el usuario y
adems en este caso no existen limitaciones de tamao de ningn tipo.
La eleccin del mtodo de envo de datos queda a nuestra eleccin en funcin de nuestras
necesidades y preferencias al disear el formulario.
Dest: en el campo Destino, podemos especificar dnde queremos que se ejecute los datos
mostrados por el archivo indicado en el campo Accin, en una ventana nueva sin nombre
(opcin _blank), en la ventana padre de la que est mostrando el documento actual (_parent),
en la misma ventana que contiene el formulario que ha realizado el envo del formulario
(opcin _self) o en la ventana actual pero cubrindola por completo (eligiendo la opcin _top).
Tipo de codificacin: este campo nos sirve para especificar el formato de los datos que se
van a mostrar en la pgina (MIME). El explorador utiliza este atributo para codificar de forma
correcta la informacin que se muestra en el servidor. En funcin del valor que se asigne a
este atributo la informacin se mostrar de una forma u otra, por ejemplo si el valor es
text/plain la informacin se enviar como texto plano, legible y sin codificar.
Dreamweaver CS4. Captulo 9. Formularios

225

El valor predeterminado en los formularios de tipo POST es application/x-www-form-
urlencode.
Para aquellos formularios que contengan campos de tipo fichero es necesario utilizar el
mtodo POST, seleccionando el valor multipart/form-data para subir los ficheros desde el
navegador al servidor.

Figura 9.4. Desplegable Tipo de codificacin de propiedades de formulario.
Una vez realizado el envo de la informacin lo ms usual es que algn programa escrito en un
lenguaje del lado del servidor tipo PHP, ASP, recoja dicha informacin, realice algunas
operaciones con ella y la presente en pantalla con algn formato concreto; tambin es posible
que dichos lenguajes de programacin interacten con bases de datos, sin embargo este tipo
de programacin va un paso ms all de lo que estamos viendo en este curso y, por tanto, no
procede en estos momentos entrar en detalle con dichos lenguajes.
Sin embargo se menciona porque en la mayor parte de los casos en los que se trabaje con
formularios se trabajar tambin con este tipo de lenguajes de programacin.
Podemos establecer la diferencia entre las dos partes que entran a formar parte de un
formulario: lenguaje HTML y lenguajes del lado del servidor. El lenguaje HTML lo utilizaremos
para disear el aspecto visual del formulario, es decir, lo que el usuario ve cuando accede a
una pgina Web que contiene un formulario y forma parte del contenido de este curso. Los
lenguajes del lado del servidor se utilizan para el procesamiento y posterior tratamiento de la
informacin que es enviada desde estos formularios. Estos lenguajes se estudian en otros
cursos del Aula Mentor (por ejemplo el curso de PHP).
Para ilustrar la diferencia existente entre utilizar el mtodo GET o el mtodo POST a la hora de
enviar informacin a travs de un formulario vamos a ver el siguiente ejemplo.
Partimos de un formulario con tres campos de texto de distinto tipo y que se van a llamar
respectivamente campo1, campo2 y campo3 y que van a contener los valores contenido1,
contenido2 y contenido3. Dicho formulario es el que se muestra en la siguiente figura:
Dreamweaver CS4. Captulo 9. Formularios

226


Figura 9.5. Ejemplo de un formulario.

Suponiendo que la pgina destino de nuestro formulario es la pgina del Ministerio de
Educacin (http://www.mepsyd.es), si utilizamos el mtodo POST para el envo de datos a
travs de este formulario, el contenido de la barra de navegacin sera:
http://www.mepsyd.es.
Mientras que si utilizsemos el mtodo GET el contenido sera:
http://www.mepsyd.es/?texto1=contenido1&texto2=contenido2&texto3=contenido3&Submit
=Enviar
Como se observa claramente con el mtodo GET la informacin enviada est expuesta a la
vista de cualquier usuario, con lo cual, si dicha informacin fuese confidencial este mtodo no
podra ser utilizado.
Cuando insertamos un formulario en la vista diseo de Dreamweaver, el cdigo HTML que se
genera sera el siguiente:
<form action="" method="" name="" target="" id=" ">

</form>
Este cdigo est situado en el cuerpo de la pgina HTML, es decir, entre las etiquetas <body> y
</body>. Adems, todos los elementos que se quieran insertar en el formulario deben ir
lgicamente entre las etiquetas de inicio y fin del formulario: <form> y </form>.
Dreamweaver CS4. Captulo 9. Formularios

227

En el interior de la etiqueta de inicio de formulario es donde se deben indicar todos los
parmetros que se quieran especificar para el formulario (parmetros que hemos visto con
anterioridad) y que iran entre las comillas. Ms adelante veremos algunos cdigos ms
concretos.

RECOMENDACIN. Pasa de vez en cuando a la vista Dividir para que te muestre
simultneamente las vistas cdigo y diseo del documento y puedas identificar las etiquetas
asociadas a los formularios.



Ejercicio

El objetivo de este ejercicio ser la creacin de un sencillo formulario.

Crea un nuevo HTML desde Archivo>Nuevo.

Desde el panel Insertar, categora Formularios, inserta un formulario en tu nuevo
documento.



Figura 9.6. Insertar Formulario desde panel Insertar.

Selecciona el formulario que acabas de crear haciendo clic en el recuadro que lo
representa para poder modificar sus propiedades desde el Inspector de Propiedades con
los siguientes datos:
o Nombre del formulario: formulario1
o Accin: http://www.mepsyd.es
o Mtodo: POST
o Dest: _blank (para que la pgina destino se abra en una ventana nueva).

Dreamweaver CS4. Captulo 9. Formularios

228



Figura 9.7. Propiedades de formulario1.

Guarda la pgina HTML que contiene el formulario (Archivo>Guardar como...) en MiWeb
con el nombre formulario1.html.

El aspecto final del formulario que hemos creado debe ser el siguiente:



Figura 9.8. Aspecto final de formulario1.html



El cdigo HTML que ha generado este formulario es:
<form action="http://www.mepsyd.es" method="post" name="formulario1" target="_blank"
id="formulario1">
</form>
Un detalle a tener en cuenta tambin en los formularios es el del envo de correos electrnicos
a travs de formularios, pues su inclusin no garantiza la recepcin de los mismos.
Navegando por Internet encontraremos pginas con formularios, que despus de rellenar una
serie de datos, debemos hacer clic sobre un enlace que nos permitir enviar un correo
electrnico (normalmente se utiliza para enviar consultas, quejas, al creador de la pgina, o
al propietario de la misma). Al hacer esto se abrir el gestor de correo electrnico
predeterminado que tengamos instalado en nuestro ordenador para que escribamos el texto y
enviemos el correo. Sin embargo, si no hay configurada previamente una cuenta de correo
electrnico en este equipo, el correo nunca llegar a su destino, puesto que no sabr qu
camino seguir (en trminos tcnicos no sabe cul es el servidor POP a utilizar para realizar el
envo).
Para solucionar este problema existe otro camino, y es utilizar lenguajes de programacin
como PHP que gestionen el envo de manera transparente al usuario, de forma que ste, al
hacer clic en un botn que se presente en la pgina, automticamente enviar el correo
electrnico a su destinatario. Pero, como hemos dicho anteriormente, no es un tema a tratar
en este curso.

Dreamweaver CS4. Captulo 9. Formularios

229

9.2. Objetos de formulario
Una vez que hemos detallado las propiedades que debe tener nuestro formulario, el siguiente
paso es darle contenido incluyendo los campos que van a componerlo.
Veremos a continuacin las posibilidades de las que disponemos a la hora de aadir campos al
formulario, as como sus distintas propiedades.
Para aadir objetos dentro de un formulario existen dos mtodos, podemos hacerlo a travs
de los mens Insertar>Formulario>... donde en el men desplegable mostrado podemos
elegir cualquier objeto de entre todos los que tenemos disponibles: campos de texto,
botones,...

Figura 9.9. Insertar objetos de formulario.
El otro mtodo disponible para aadir objetos de formulario es a travs del panel Insertar
eligiendo la categora Formulario, y a travs de los botones correspondientes, aadir un objeto
u otro.
Dreamweaver CS4. Captulo 9. Formularios

230


Figura 9.10. Panel Insertar, Categora Formularios
Objetos de Campo de texto
Un campo de texto es un objeto de formulario que podemos utilizar para recoger informacin
que previamente se desconoce, como por ejemplo el nombre, apellidos, direccin, etc. en el
cual el usuario puede introducir caracteres de todo tipo. Existen tres tipos de campos de texto
disponibles:
Campos de texto de una sola lnea: para textos cortos y sencillos: datos personales, datos
postales,...
Campos de texto de varias lneas: para textos ms amplios y de mayor contenido:
observaciones respecto a un tema, comentarios,...
Campos de tipo contrasea: para aquellos textos que no deseamos que se muestren por
pantalla; al escribir cualquier texto, aparecer un asterisco por cada carcter alfanumrico
tecleado para que quede oculto.
Para insertar un campo de texto dentro del formulario tenemos dos caminos:
A travs del men Insertar>Formulario>Campo de texto.
Con el botn Campo de texto en la categora Formularios de la barra Insertar.
De cualquier forma, se abrir el cuadro de dilogo Atributos de accesibilidad de la etiqueta de
entrada que nos permitir crear un identificador y darle un nombre al campo de texto y decidir
el estilo y la posicin del campo. Tambin podremos aadir en el campo Etiqueta, un texto que
ir al lado del campo, para indicar cul es el contenido que se solicita en el campo, como por
ejemplo, si se debe rellenar con el nombre, los apellidos, etc.
Dreamweaver CS4. Captulo 9. Formularios

231


Figura 9.11. Cuadro de dilogo Atributos de accesibilidad de la etiqueta de entrada.
Si no queremos rellenar estos datos ahora, podemos simplemente pulsar Cancelar y hacerlo
ms adelante.
Una vez que hayamos aadido el campo de texto, si no habas tecleado antes una Etiqueta
para el mismo en el cuadro de dilogo Atributos de accesibilidad de la etiqueta de entrada, lo
normal ser hacerlo ahora, aadiendo por tanto un texto al lado del campo para indicar cul
ser el contenido que se solicita en el campo: si se debe rellenar con un nombre, con
apellidos,... Para ello slo hay que hacer clic en el lado del campo donde queramos incluir
dicho texto (dentro de la vista Diseo) y escribirlo.

Figura 9.12. Nombre indicativo de un campo de texto.
Podemos elegir un tipo de campo de texto u otro en el Inspector de Propiedades del campo
de texto insertado, as como indicar otros detalles referentes a estos campos.

Dreamweaver CS4. Captulo 9. Formularios

232


Figura 9.13. Propiedades de un campo de texto.
Para los campos de texto de una lnea y para los de tipo contrasea, el aspecto del
Inspector de Propiedades es el que se muestra en la figura anterior (difiere un poco, como
veremos a continuacin, del relativo a los campos de texto de varias lneas). En este tipo de
campos podemos especificar las propiedades siguientes:
o Campo de texto: nombre identificativo del campo de texto (es recomendable
darle un nombre que identifique claramente el contenido que tendr el campo, ya
que dicho nombre ser el utilizado por el formulario para su procesamiento). Este
nombre no puede contener espacios ni caracteres especiales.
o Ancho car: en este campo debemos establecer el ancho del campo de texto
indicado por el nmero de caracteres que debe mostrar inicialmente.
o Car. mx.: este campo va a indicar el nmero mximo de caracteres que el usuario
podr introducir en el campo de texto.
o Si el valor especificado en el campo anterior Ancho car es inferior al introducido
en este campo, esto provocar que a primera vista no se vea todo el texto
introducido en el campo, sin embargo el formulario s lo considerar en su
totalidad a la hora de ser enviado al servidor.
o Val. inicial: en este campo pondremos un valor inicial para mostrarlo al usuario. A
veces utilizamos el valor inicial como ejemplo de lo que puede escribir en el
cuadro, pero ocurre que a veces, los usuarios no introducen nada en estos campos
con valores iniciales. Lo ms recomendable es utilizar el ejemplo fuera del cuadro.

Figura 9.14. Valor inicial de ejemplo.

o Clase: si hemos definido una hoja de estilo para nuestra pgina, en este campo se
la podremos asociar al campo que estamos creando.
o Desactivado: desactiva el rea de texto del campo.
o Slo lectura: convierte el rea de texto del campo en un rea de slo lectura.
Los campos de texto de mltiples lneas, tendran el aspecto siguiente:
Dreamweaver CS4. Captulo 9. Formularios

233


Figura 9.15. Campo de texto multilena.
Para los campos de texto que pueden contener mltiples lneas, las propiedades varan un
poco con respecto a los otros campos de texto.

Figura 9.16. Propiedades de un campo de texto con mltiples lneas.
En este caso adems de las propiedades antes mencionadas para los otros campos de texto,
podemos establecer:
o Lneas nm: nos permite indicar el mximo nmero de lneas de este campo.


Ejercicio

El objetivo de este ejercicio ser la creacin de tres campos de texto con diferentes
propiedades.

Abre el formulario que creaste en el ejercicio anterior con el nombre formulario1.html, al
que vamos a aadir ahora tres campos de texto. Sita el cursor dentro del formulario que
habas insertado, justo al final del objeto de formulario que habas creado en el ejercicio
previo y pulsa dos veces la tecla Intro.

Ahora, aadimos un campo de texto de una sola lnea, llamado texto con una etiqueta
denominada Campo 1. Para ello, pulsa sobre el icono de la categora Formularios
del panel Insertar y en el cuadro de dilogo Atributos de accesibilidad de la etiqueta de
entrada, teclea en el cuadro ID, texto; y en el cuadro Etiqueta, Campo 1. Deja activado
Ajustar con etiqueta de Rtulo en Estilo, y en Posicin, activa Antes del elemento del
formulario. Despus, pulsa Aceptar.

Dreamweaver CS4. Captulo 9. Formularios

234



Figura 9.17. Atributos de accesibilidad de campo de texto 1.

Selecciona el campo y desde el Inspector de propiedades, modifica lo siguiente:
o Ancho car: 50
o Car. mx.: 100
o Val inicial: sin ningn valor
o Clase: Ninguna



Figura 9.18. Propiedades del campo de texto 1.

A continuacin, crea un segundo campo de texto de tipo contrasea. En el cuadro de
dilogo Atributos de accesibilidad de la etiqueta de entrada, teclea textocontrasea en ID,
y Campo 2 en Etiqueta, dejando el resto de valores tal y como los tenas en el primer campo
que insertaste.
Dreamweaver CS4. Captulo 9. Formularios

235



Figura 9.19. Atributos de accesibilidad de campo de texto 2.

Ahora selecciona este campo y en el Inspector de Propiedades realiza lo siguiente:

o En Tipo, activa Contrasea
o Ancho car: 10
o Car. Max: 10
o Val inicial: sin ningn valor.
o Clase: Ninguna.



Figura 9.20. Propiedades del campo de texto 2.

Por ltimo aade al formulario un campo de texto de varias lneas de la forma en la que lo
hemos hecho hasta ahora. En el cuadro Atributos de Accesibilidad de la etiqueta de
entrada, en ID teclea areatexto y en Etiqueta Campo 3.

Dreamweaver CS4. Captulo 9. Formularios

236



Figura 9.21. Atributos de accesibilidad de campo de texto 3.


A continuacin selecciona el campo y en el Inspector de Propiedades modifica lo siguiente:

o Activa Varias lneas en el apartado Tipo.
o Ancho car: 80.
o Lneas nm: 10
o Val inicial: sin ningn valor
o Clase: Ninguna

Guarda la pgina (Archivo > Guardar). Pulsa F12 para ver como se muestra en el navegador.

Dreamweaver CS4. Captulo 9. Formularios

237



Figura 9.22. Aspecto final del formulario.

El cdigo HTML generado en el formulario para cada uno de los distintos campos de texto que
acabamos de insertar en este ejercicio es el siguiente:
<form name="form1" method="post" action="">
<p>Campo1
<input name="texto" type="text" id="texto" size="50"
maxlength="100">
</p>
<p>Campo2
<input name="textocontrase&ntilde;a" type="password" id="textocontrase&ntilde;a"
size="10" maxlength="10">
</p>
<p>Campo3
<textarea name="areatexto" cols="80" rows="10" wrap="PHYSICAL"
id="areatexto"></textarea>
Dreamweaver CS4. Captulo 9. Formularios

238

</p>
</form>
OBSERVACIN. Como puedes observar, en el cdigo HTML el carcter no existe como tal,
por lo que Dreamweaver lo traduce como &ntilde;. De igual forma puedes identificar desde
la vista Cdigo las palabras acentuadas y otros caracteres especiales.
La prctica totalidad de los campos de entrada de un formulario se caracterizan porque las
etiquetas HTML que los identifican comienzan por la palabra reservada input.
Los campos de texto de mltiples lneas son una excepcin, pues comienzan con la palabra
reservada textarea. Adems, en este tipo de campos su contenido no se muestra con el
parmetro value (como en la gran mayora de los campos de entrada de un formulario), sino
encerrado entre las etiquetas de comienzo y de fin del campo, es decir entre las etiquetas
<textarea> y </textarea>.
Campos ocultos
Los campos ocultos son utilizados habitualmente para enviar informacin al servidor, al
procesar el formulario, que no deseamos que sea visible para el visitante de nuestra pgina.
Normalmente se trata de informacin relativa al usuario que deseamos enviar al servidor.
Para insertar un campo oculto en nuestro formulario existen dos caminos:
A travs del comando: Insertar>Formulario>Campo oculto.
Haciendo clic en el botn Campo oculto en la categora Formularios del panel Insertar.
Una vez insertado el campo oculto en el formulario, Dreamweaver inserta un marcador de
campo oculto en la ventana del documento actual para indicar el lugar que ocupa.
El siguiente paso despus de insertar el campo oculto es asignarle las propiedades desde el
Inspector.
Campo oculto: este campo se utiliza para dar un nombre al campo oculto creado.
Valor: para asignarle un valor concreto a dicho campo oculto, que se transfiere al servidor
cuando se enva el formulario.

Figura 9. 23. Propiedades de un campo oculto.

Dreamweaver CS4. Captulo 9. Formularios

239

El cdigo HTML generado en el formulario para un campo oculto sera similar al siguiente:
<form name="form1" method="post" action="">
<input name="nombreoculto" type="hidden" id="nombreoculto" value="valoroculto">
</form>
Como podemos comprobar, en este caso, lo nico que diferencia a este tipo de campos de los
campos de entrada de texto, que vimos anteriormente, es el atributo type, que en este caso
indica que estamos tratando con un campo oculto (hidden).
Campos de carga de archivos
Este tipo de campos se utiliza para permitir al usuario subir ficheros desde su disco duro al
servidor donde est alojada la pgina Web como dato del formulario.
El aspecto de estos campos es similar al de los campos de texto normales, pero con la salvedad
de que en el lateral aparece un botn Examinar donde, al hacer clic, se permite al usuario
seleccionar desde su sistema de ficheros local el archivo a cargar en el servidor a travs del
formulario.

Figura 9.24. Campo de carga de archivo.
Como ya se explic con anterioridad al hablar de los mtodos de envo de datos de formularios
para poder utilizar de forma correcta este tipo de campos de archivos, al crear un nuevo
formulario es necesario que le asignemos a la propiedad Mtodo el valor POST y a la
propiedad Tipo de codificacin, el valor multipart/form-data.
Para insertar un campo de archivo podemos:
Ejecutar el comando: Insertar>Formulario>Campo de archivo.
Haciendo clic en el botn Campo de archivo en la categora Formularios de la barra
Insertar.
Una vez insertado el campo, podemos seleccionarlo y modificar sus propiedades desde el
Inspector de Propiedades. Los posibles valores a modificar son los siguientes:
Campo archivo: para indicar un nombre al campo que estamos creando.
Ancho car: de la misma forma que suceda con los campos de texto normales, indicamos el
ancho del campo en nmero de caracteres.
Car. mx: mximo nmero de caracteres que se podr incluir en este campo. Si el fichero es
seleccionado a travs del cuadro de dilogo que aparece al hacer clic en el botn Examinar,
Dreamweaver CS4. Captulo 9. Formularios

240

dicho lmite no ser tenido en cuenta, sin embargo si es el usuario el que introduce
manualmente el nombre del fichero, no se le permitir superar el nmero mximo de
caracteres aqu introducido.
Clase: si existe alguna hoja de estilo creada es posible asignrsela a este campo para adaptar
su formato.

Figura 9.25. Propiedades de un campo de archivo.
Para representar un formulario con un campo de seleccin de archivos en cdigo HTML
utilizaramos un cdigo como ste:
<form action="" method="post" enctype="multipart/form-data" name="form1">
Foto
<input name="fotograf&iacute;a" type="file" id="fotograf&iacute;a" size="30"
maxlength="50">
</form>
Observa que en la etiqueta de inicio de formulario necesitamos especificar que se va a trabajar
subiendo ficheros al servidor y por ello hay que especificarlo con la propiedad enctype y el
valor multipart/form-data.
Casilla de verificacin
Las casillas de verificacin son utilizadas habitualmente para permitir la eleccin entre una
serie de opciones disponibles en el formulario. Estos campos se diferencian de los llamados
botones de opcin en que permiten seleccionar varias opciones de entre todas las disponibles,
mientras que stos ltimos slo permiten seleccionar una opcin de entre todas las
proporcionadas.
Para insertar una casilla de verificacin lo podemos hacer desde:
El comando: Insertar>Formulario>Casilla de verificacin.
Haciendo clic en el botn Casilla de verificacin en la categora Formularios de la
barra Insertar.
En las casillas de verificacin tambin debemos poner un texto que facilite la seleccin de las
opciones que se pueden presentar.
Dreamweaver CS4. Captulo 9. Formularios

241


Figura 9.26. Aspecto de casillas de verificacin en un formulario.
En estos campos podemos modificar las siguientes propiedades desde el Inspector de
Propiedades:
Nombre de casilla: nombre exclusivo e indicativo que deseamos dar a la casilla de
verificacin.
Valor activado: pondremos el valor inicial que ser el que se enve al servidor cuando se
active esta casilla de verificacin (habitualmente se suelen asignar valores numricos; por
ejemplo si disponemos de cuatro casillas de verificacin en este campo asignaramos valores
consecutivos del 1 al 4).
Estado inicial: en funcin de si deseamos que la casilla de verificacin est inicialmente
activada o no, elegiremos una de entre las dos opciones disponibles.
Clase: para aplicarle al campo un formato basado en una hoja de estilo previamente creada
y que podemos seleccionar de la lista desplegable.

Figura 9.28. Propiedades de casilla de verificacin (correspondiente a Opcin 1).
El cdigo HTML del formulario para dos casillas de verificacin llamadas opcion1 y opcion2
cuyos valores respectivos son 1 y 2 sera el que se muestra a continuacin:
<form name="form1" method="post" action="">
<p>Opci&oacute;n 1
<input name="opcion1" type="checkbox" id="opcion1" value="1" checked>
</p>
<p>Opci&oacute;n 2
<input name="opcion2" type="checkbox" id="opcion2" value="2">
</p>
</form>
Dreamweaver CS4. Captulo 9. Formularios

242

En la primera casilla de verificacin comprobamos que al final de la etiqueta aparece la palabra
reservada checked. Esto nos indica que la primera casilla de verificacin aparecer activada de
forma predeterminada al ser mostrada por primera vez al usuario que visite nuestra pgina.
Se pueden crear tambin grupos de casillas de verificacin, mediante el botn Grupos de
casillas de verificacin , cuyo funcionamiento ser similar a los grupos de opcin que
vamos a ver en el apartado que viene a continuacin.
Botn de opcin
Otra de las opciones disponibles para permitir a los usuarios elegir una de entre varias
opciones disponibles son los botones de opcin. Como hemos dicho anteriormente estos
botones tienen la particularidad de que su eleccin es individual y excluyente, es decir, slo se
permite elegir uno de ellos a la vez.
Aunque Dreamweaver nos permite insertar botones de opcin aislados, tanto a travs de
mens (Insertar>Formulario>Botn de opcin) como mediante un clic de ratn en el Botn
de opcin del panel Formularios, de la barra Insertar, el uso ms habitual de este tipo de
botones es que se encuentren integrados dentro de un grupo (parece que no tiene mucho
sentido agregar un solo botn de este tipo cuando su funcionalidad es permitir una nica
opcin de entre varias disponibles).
Por este motivo en este apartado vamos a tratar el tema de los grupos de botones de opcin.
Dichos grupos pueden incluirse en el formulario:
Mediante el comando Insertar>Formulario>Grupo de opciones.
Haciendo clic en el botn Grupo de opcin en la categora Formularios de la barra
Insertar.
Tras realizar este paso nos aparece el cuadro de dilogo Grupo de opcin.

Figura 9.29. Cuadro de dilogo Grupo de opcin.
Dreamweaver CS4. Captulo 9. Formularios

243

Dentro de este cuadro es posible configurar el grupo de opciones que estamos creando:
En el cuadro de texto Nombre asignamos un nombre al grupo de opciones.
Podemos aadir opciones haciendo clic en el botn . Si por el contrario queremos
eliminar alguna, debemos seleccionarla y hacer clic en el botn .
Cuando insertemos un botn de opcin, podemos asignarle el nombre de la opcin (Label)
y el valor (Value), dentro del recuadro de texto situado en la parte central de dicha ventana. El
texto que se escriba bajo el ttulo Label (Etiqueta), ser el que aparezca en nuestro formulario,
mientras que el valor que escribamos en el campo Value ser el que se tenga en cuenta
cuando se procese la informacin del formulario y se enve al servidor.
Los botones ) y nos permitirn subir o bajar la opcin en la lista o men para
cambiar el orden.
Por ltimo, es posible elegir si deseamos que nuestro grupo de opciones se muestre con
saltos de lnea de HTML o en el interior de una tabla, segn lo que escojamos en la ltima
opcin, Disponer utilizando. Haciendo clic en el botn Aceptar se crear nuestro grupo de
opciones. En el botn Ayuda encontramos comentarios acerca de cmo completar la
informacin en esta ventana.
Supongamos un formulario con un grupo de opciones compuesto por dos de estos botones
cuyos valores respectivos son 1 y 2. El cdigo HTML equivalente sera el que se muestra a
continuacin:
<form name="form1" method="post" action="">
<p>
<label>
Opcin 1
<input type="radio" name="GrupoOpciones1" value="1">
</label>
<br>
<label>
Opcin 2
<input type="radio" name="GrupoOpciones1" value="2">
</label>
<br>
Dreamweaver CS4. Captulo 9. Formularios

244

</p>
</form>
Para especificar que deseamos que uno de los botones est activado de forma
predeterminada al mostrarse la pgina por primera vez se utiliza, al igual que ocurra con las
casillas de verificacin, la palabra reservada checked.
Para este caso particular de los botones de opcin, observamos que en el parmetro name
ambos tienen el mismo valor; esto se utiliza para decir que los dos botones de opcin
pertenecen al mismo grupo, es decir que son excluyentes entre s y si uno de ellos est
seleccionado, el otro no podr ser seleccionado al mismo tiempo.
Tambin podemos observar en este cdigo HTML que la etiqueta del botn va situada detrs
del mismo. Para colocarla delante slo deberemos poner Opcin 1 y Opcin 2 delante de la
etiqueta input. Esto queda siempre a gusto del diseador de la pgina.
Listas y mens
Las listas y los mens son utilizados en un formulario para presentar a los usuarios diferentes
opciones de entre las cuales pueden escoger varias (si se trata de una lista de desplazamiento)
o una sola (si estamos trabajando con un men).
Aunque ambos elementos de formulario compartan una misma forma de ser aadidos a
nuestra pgina HTML, como veremos a continuacin, cada uno de ellos tiene unas opciones
particulares para ser detalladas en las propiedades como ahora veremos.
Para aadir una lista o un men, podemos hacerlo a travs de las opciones de mens
correspondientes Insertar>Formulario>Lista/men, o bien, haciendo clic en el botn
Lista/men en la categora Formularios de la barra Insertar.
Una vez aadido este elemento en el interior del formulario, nos aparece un cuadro de
seleccin sin contenido .
En este punto, y en funcin de nuestras necesidades deberemos optar por configurar, bien una
lista de desplazamiento, o bien un men indicando las propiedades precisas para un elemento
u otro en el Inspector de Propiedades.
Si la opcin elegida es un Men, el Inspector de Propiedades presentar un aspecto similar a
ste:
Dreamweaver CS4. Captulo 9. Formularios

245


Figura 9.30. Propiedades de un men.
En este Inspector de propiedades es posible configurar las siguientes opciones:
Lista/men: bajo este ttulo debemos escribir el nombre que se quiera para el men (o la
lista de desplazamiento).
Tipo: en esta opcin escogemos si el elemento que queremos aadir es un Men o una Lista
de desplazamiento.
Valores de lista: al hacer clic en este botn se nos muestra una nueva ventana en la que
podemos configurar las opciones que aparecern en la lista.

Figura 9.31. Cuadro Listar valores.
Bajo el ttulo Etiqueta de elemento escribiremos una etiqueta para cada elemento del men o
lista y bajo el ttulo Valor escribiremos el texto que ser enviado al servidor cuando el
formulario sea procesado.
Para aadir ms elementos hacemos clic en el botn y para eliminar alguno, basta con
seleccionarlo y hacer clic en el botn .
Los botones y nos permitirn cambiar el orden de la opcin en la lista o men.
Tras hacer clic en el botn Aceptar las opciones sern aadidas al men (o a la lista segn el
elemento que estemos configurando).
Dicha ventana dispone adems de un botn de ayuda con informacin precisa acerca de cmo
completar los datos correctamente.
Dreamweaver CS4. Captulo 9. Formularios

246

Clase: si deseamos dar formato a la lista mediante una hoja de estilo, ste es lugar para
hacerlo.
Seleccionado inicialmente: si queremos que aparezca nuestro men en el formulario con
una de las opciones sealada de forma predeterminada, bastar con indicarlo en este campo
haciendo clic sobre la opcin elegida.
Si por el contrario, el elemento que queremos aadir al formulario es una Lista de
desplazamiento adems de las propiedades comentadas para los mens dispondremos de las
siguientes:

Figura 9.32. Propiedades de una lista.

Alto: en este campo es posible especificar cuntas opciones deben mostrarse de la lista.
Selecciones Permitir mltiples: si queremos permitir al usuario poder seleccionar ms de
una opcin simultneamente. Si se selecciona esta opcin, en la lista Seleccionado
inicialmente podremos indicar las opciones sealadas de forma predeterminada.
Al crear un formulario con un men y una lista desplegable en formato HTML , con cuatro
opciones posibles, deberamos escribir un cdigo HTML similar al siguiente:
<form name="form1" method="post" action="">
<p>
Men&uacute;
<select name="select">
<option value="1" selected>opcion menu 1</option>
<option value="2">opcion menu 2</option>
<option value="3">opcion menu 3</option>
<option value="4">opcion menu 4</option>
</select>
</p>
<p>
Dreamweaver CS4. Captulo 9. Formularios

247

Lista desplegable
<select name="select" size="3" multiple>
<option value="1" selected>opcion lista 1</option>
<option value="2">opcion lista 2</option>
<option value="3">opcion lista 3</option>
<option value="4">opcion lista 4</option>
</select>
</p>
</form>
Si analizamos este trozo de cdigo mostrado, comprobamos que:
Las etiquetas que marcan el principio y el final del men y de la lista desplegable son
<select> y </select> y entre ambas se deben indicar todas las opciones.
Cada una de las opciones que se muestran comienzan y finalizan con las etiquetas <option>
y </option> respectivamente. Para indicar que una de ellas est seleccionada por defecto se
utiliza la palabra reservada selected.
El texto que aparecer en la lista se escribe entre las etiquetas <option> y </option>,
mientras que el valor asociado a esa opcin se debe escribir en el parmetro value.
Las diferencias de cdigo existentes entre el men y la lista que acabamos de ver es que se
pueden especificar dentro de la etiqueta de inicio de la lista (<select>) dos nuevos parmetros:
multiple: para indicar que se puede seleccionar ms de una opcin al mismo tiempo.
size=n: para detallar cuntas opciones son visibles, donde n indica dicha cantidad.
En este caso, la diferencia entre ambos componentes de formulario en un navegador quedara
de la siguiente forma:

Figura 9.33. Aspecto de una lista y de un men en una web.


Dreamweaver CS4. Captulo 9. Formularios

248

Botones de formulario
Los botones de formulario son los que nos permiten enviar informacin al servidor, o por el
contrario borrar toda la informacin contenida en los campos del formulario, restablecindolo
a su estado inicial. Tambin nos permiten otra serie de funciones personalizables mediante la
asignacin de scripts, como veremos en este apartado.
Para insertar un botn estndar de formulario, a travs de los mens de la aplicacin debemos
hacer clic en la opcin Insertar>Formulario>Botn. Si esta insercin la hacemos a travs de la
categora Formularios de la barra Insertar, slo hay que hacer clic en el botn .
Automticamente se abre el cuadro Atributos de accesibilidad de la etiqueta de entrada,
donde podremos darle una id y una etiqueta al botn, como ya hemos aprendido. No se
recomienda teclear la etiqueta que va a aparecer antes del botn en este caso, ya que cuando
el botn se inserte en la ventana del documento, lo har por defecto con el valor Enviar, que
podremos cambiar en el Inspector de Propiedades si fuese necesario.
Desde el Inspector de Propiedades podemos indicar las propiedades que deseamos que tenga
nuestro botn.
Nombre del botn: para indicar un nombre para el botn que se est creando y que ser
utilizado en el procesamiento de la informacin enviada por el formulario.
Valor: en este campo podemos indicar el texto que aparecer en el interior del botn.
Accin: deberemos elegir, una de entre las tres posibilidades que se nos ofrecen:
Enviar formulario: para procesar el formulario enviando la informacin al servidor una
vez que se haga clic en l.
Ninguno: si se elige esta opcin deberemos indicar la accin que se activar al hacer
clic en el botn. Por ejemplo, podemos aadir un comportamiento JavaScript que
presente un mensaje o abra otra pgina al hacer clic en el botn.
Restablecer formulario: para devolver los campos del formulario a su estado inicial,
bien vacindolos de contenido o bien seleccionando de nuevo la opcin predefinida
para aquellos campos que as la tuvieran asignada.
Clase: para asignarle una hoja de estilo y darle as al botn un formato determinado.

Figura 9.34. Propiedades de un botn.
Cuando utilicemos un botn estndar de envo de formulario, es aconsejable poner otro que
restablezca el contenido del mismo.
Dreamweaver CS4. Captulo 9. Formularios

249

Adems de los botones estndar aqu mencionados, podemos aadir a nuestro formulario otro
tipo de botones personalizados utilizando imgenes para ello.
sto es lo que vamos a ver en el siguiente apartado.
El cdigo HTML asociado a un formulario con un botn de sera el siguiente:
<form name="form1" method="post" action="">
<input type="submit" name="Submit" value="Enviar">
</form>
Imgenes
Otro de los elementos que es posible aadir a un formulario son las imgenes.
Adems de servir de adorno en las pginas HTML, en los formulario pueden tener otras
utilidades como servir de vnculos a otras pginas, como botones de formularios,... todo esto
lo trataremos en este apartado.
El primer paso es aadir la imagen en el formulario; como siempre disponemos de dos
caminos:
A travs de los mens de la aplicacin: Insertar > Formulario > Campo de imagen.
Haciendo clic en el botn Campo de imagen en la categora Formularios de la barra
Insertar.
Al llevar a cabo este primer paso aparecer el cuadro de dilogo Seleccionar origen de imagen,
desde el que podemos seleccionar la imagen que vayamos a utilizar como botn. Por defecto
nos aparecen los ficheros con extensiones gif, jpg, jpeg, png y .psd.
Si queremos seleccionar un fichero de imagen con otra extensin, por ejemplo tif, bmp, etc,
deberemos seleccionar en Tipo la opcin Todos los archivos (*.*).
En URL: indicaremos, o aparecer automticamente la ruta donde se encuentra la imagen, una
vez seleccionada la misma.
En el cuadro Relativa a: podemos definir si la imagen es relativa al Documento o a la Raz del
Sitio.
En la columna de la derecha de este cuadro es posible ver una vista previa de la imagen antes
de insertarla en el formulario.
Una vez pulsamos Aceptar, se abre el cuadro Atributos de accesibilidad de etiqueta de
entrada, que ya sabemos manejar.
Para que la imagen funcione como un botn Enviar debemos seguir los siguientes pasos:
1. Insertar la imagen tal y como se acaba de detallar.
Dreamweaver CS4. Captulo 9. Formularios

250

2. En el campo Campo Imagen del Inspector de Propiedades escribir el texto Enviar.
3. En el campo Alt, escribir un texto corto (dos o tres palabras como mximo), acerca de la
funcionalidad del botn que estamos creando.
Dicho texto ser el que aparezca al situarnos encima de la imagen con el ratn, texto
alternativo.

Figura 9.35. Propiedades de un campo de imagen.
En este caso el cdigo HTML que genera el formulario con la imagen sera el siguiente:
<form name="form1" method="post" action="">
<input name="Enviar" type="image" id="Enviar" src="file:///C|/
MiWeb/Elementos/imagenes/correo_click.gif" alt="Enviar datos" width="96" height="40"
border="0">
</form>
En este caso el parmetro src indica la ruta hacia la imagen que hemos insertado en el
formulario. En el ejemplo que acabamos de ver, y tal y como se ve en el cdigo generado, para
especificar dnde se encuentra la imagen utilizada para crear el hipervnculo hemos utilizado
la ruta absoluta hacia la misma.
Este tipo de ruta absoluta lo crea Dreamweaver de forma automtica mientras no tengamos
puesto nombre al documento en el que estamos trabajando. En cuanto guardemos el
documento cambia la ruta a relativa.

RECOMENDACIN. Es aconsejable utilizar rutas relativas al sitio para las imgenes y otros
tipos de archivos multimedia.


Las imgenes que hemos tratado en este apartado no dejan de ser imgenes normales de las
que utilizamos para dar vistosidad a nuestra pgina web, con la salvedad de que en este caso
se les dota de una nueva funcionalidad, como es el hecho de servir de hipervnculo o enlace a
una pgina web, como botn de formulario, etc.



Dreamweaver CS4. Captulo 9. Formularios

251

9.3. Validacin de formularios
Un aspecto que debemos tener en cuenta cuando estamos hablando de formularios es la
validacin de los mismos, es decir, comprobar que los datos introducidos por el usuario son
correctos, as como otro tipo de comprobaciones.
Para aadir esta validacin lo primero que necesitamos es que la ventana Comportamientos
est visible; para hacer que esto sea as debemos hacer clic en los mens
Ventana>Comportamientos, o bien utilizar la combinacin de teclas Mays+F4. Tras hacer esto
en la columna de Paneles, a la derecha de la ventana principal, aparecer el panel Inspector
de Etiquetas con la solapa de la ventana Comportamientos.

Figura 9.36. Ventana Comportamientos.
A continuacin, y despus de hacer clic en el botn Aadir Comportamiento , debemos
escoger la opcin Validar formulario.
Dreamweaver CS4. Captulo 9. Formularios

252


Figura 9.37. Aadir comportamiento Validar formulario.
Tras hacer esto aparecer nuevo cuadro:

Figura 9.38. Cuadro Validar formulario.

Dreamweaver CS4. Captulo 9. Formularios

253

Dentro de este cuadro y en el recuadro situado al lado del texto Campos aparecern todos
aquellos campos de texto que se encuentren dentro del formulario. Para asignarle unos
criterios de validacin concretos a cada uno de ellos, es necesario seleccionarlos de forma
individual haciendo clic sobre la lnea que indica su nombre y a continuacin modificar las
propiedades siguientes:
Valor: si seleccionamos en este campo el valor Obligatorio, ser necesario que el usuario
siempre rellene este campo antes de enviar la informacin del formulario al servidor.
Aceptar: dentro de este grupo de botones de opcin, podremos elegir una de entre las
cuatro posibilidades que se nos presentan:
Cualquier cosa: se permite introducir cualquier combinacin de caracteres en el
campo.
Nmero: para permitir que los nicos valores admisibles en el campo sean los
numricos.
Direccin de correo electrnico: slo se permitir que el texto introducido en el
campo sea una direccin de correo electrnico y adems que el formato en el que se
haya introducido sea el correcto.
Nmero del... al...: slo se permiten valores numricos y adems entre los lmites
inferior y superior especificados en los campos situados al lado de este botn de
opcin.
Una vez configurada la validacin segn nuestras necesidades y tras hacer clic en el botn
Aceptar de forma automtica se crea un cdigo JavaScript (visible en la vista Cdigo) con las
especificaciones que hayamos creado en el cuadro anterior.

9.4. Datos de Spry
Los conjuntos de datos de Spry son objetos JavaScript que alojan la recopilacin de datos
especificados.
Dreamweaver permite crear rpidamente el objeto y cargar datos de una fuente de datos
(como un archivo XML o un archivo HTML) en el mismo. El conjunto de datos se convierte en
una matriz de datos con forma de tabla estndar con filas y columnas.
Un conjunto de datos se puede visualizar como un contenedor virtual con una estructura de
filas y columnas. Existe como objeto JavaScript y la informacin slo se puede visualizar
cuando se especifica un diseo para pginas Web.
Podemos visualizar todos los datos del contenedor o slo los datos seleccionados.



Dreamweaver CS4. Captulo 9. Formularios

254

Crear un conjunto de datos HTML de Spry
Si slo deseamos crear un conjunto de datos, no es necesario preocuparnos de donde, en el
documento, vamos a insertarlo. Si lo que deseamos es crear el conjunto e insertar un diseo,
entonces deberemos situar el cursor exactamente en el punto del documento donde
deseemos insertar el diseo de la pgina.
Podemos ejecutar Insertar>Spry>Conjunto de datos de Spry.

Figura 9.39. Insertar conjunto de datos de Spry.
Tambin podemos pulsar en el botn Conjunto de datos de Spry disponible en la categora
Spry de la barra Insertar.
Dreamweaver CS4. Captulo 9. Formularios

255


Figura 9.40. Insertar conjunto de datos de Spry desde la barra Insertar.
En cualquier caso, si estamos realizando esta accin en un documento activo nuevo que nunca
hayamos guardado antes, Dreamweaver nos avisar de que es necesario guardar el
documento antes de utilizar esta funcin, as que en primer lugar guardaremos nuestro
documento para que a continuacin se abra el cuadro Conjunto de datos de Spry.

Figura 9.41. Conjunto de datos de Spry.
Dreamweaver CS4. Captulo 9. Formularios

256

En la pantalla Especificar fuente de datos, en el men emergente Seleccionar tipo de datos,
seleccionamos HTML, que normalmente es el primer tipo que viene por defecto.
En Nombre del conjunto de datos especificaremos un nombre para dicho conjunto. Por
defecto, la primera vez que se crea un conjunto de datos, el nombre que aparece tecleado en
este campo es ds1. El nombre del conjunto de datos puede contener letras, nmeros y guiones
bajos, pero no puede empezar por un nmero.
En el desplegable Detectar , seleccionaremos la fuente de datos que
queremos que Dreamweaver detecte. Por defecto, Tablas es la fuente seleccionada, aunque
tambin, por ejemplo, si hemos organizado muestros datos dentro de una etiqueta div y
deseamos que Dreamweaver detecte las etiquetas div en lugar de las tablas, podremos
seleccionar Divs en el men emergente Detectar.
En Especificar archivo de datos,
podemos teclear la ruta al HTML en el que tenemos almacenados los datos, o pulsar Examinar
para localizarlo directamente en nuestro equipo.
Imaginemos por ejemplo, que tenemos un documento html que contiene una tabla en la que
tenemos los prefijos telefnicos de diversos pases y queremos crear un conjunto de datos
Spry con ellos. Una vez localizado el documento desde el cuadro Seleccionar Origen de
Archivo, Dreamweaver representa la fuente de datos HTML en la ventana Seleccin de datos,
Dreamweaver CS4. Captulo 9. Formularios

257


Figura 9.42. Seleccin de datos.
y muestra marcadores visuales, representados por una flecha amarilla de los elementos
que se pueden seleccionar como contenedores para el conjunto de datos. El elemento que
elijas utilizar debe tener un ID exclusivo asignado, es decir, cuando se insert ese elemento en
su documento HTML hubo que darle una identidad, un nombre concreto; por ejemplo, en
nuestro ejemplo, la tabla que contiene los nombres de pases y prefijos telefnicos cuenta con
un ID concreto en el Inspector de Propiedades de su documento. Si no tiene ID exclusivo,
Dreamweaver mostrar un mensaje de error y debers volver al archivo de fuente de datos
para asignarle un ID exclusivo.
Para seleccionar el contenedor de datos de la ventana, tendremos que pulsar sobre el
marcador amarillo , o desplegar el men Contenedores de datos para seleccionar el
contenedor adecuado. Una vez hecho esto, observamos que los datos de nuestro contenedor
(la tabla en nuestro ejemplo) quedan seleccionados, el marcador ha cambiado de forma y color
y tenemos una vista previa de los datos en la parte inferior de la pantalla.
Dreamweaver CS4. Captulo 9. Formularios

258


Figura 9.43. Datos seleccionados.
Si pulsamos en Siguiente, pasaremos a la pantalla Establecer opciones de datos, en la que
podemos hacer lo siguiente:
Para configurar los tipos de columna de conjunto de datos, selecciona una columna y
despliega el tipo de columna en el men emergente Tipo. Por ejemplo, si una de las
columnas del conjunto de datos contiene nmeros, seleccione la columna y nmero en el
men Tipo. Esta slo es importante si deseamos que el usuario pueda ordenar los datos
por los datos de esta columna.

Para seleccionar una columna de conjunto de datos, hacemos clic en el encabezado, la
elegimos en el men Nombre de columna o, mediante las flechas izquierda y derecha
situadas en la esquina superior izquierda de la pantalla.
Para especificar cmo deseamos ordenar los datos, seleccionamos la columna segn la cual
se ordenarn los datos en el men Columna de ordenacin. Despus de seleccionar la
columna, especificamos si el orden debe ser ascendente o descendente.
Slo en el caso de tablas, anularemos la seleccin de Usar primera fila como encabezado si
deseamos utilizar nombres de columna genricos (es decir, columna 0, columna 1, columna 2,
etc.) en lugar de los nombres de columna especificados en la fuente de datos HTML.
Dreamweaver CS4. Captulo 9. Formularios

259

En el caso de las tablas, podemos seleccionar Usar columnas como filas para invertir la
orientacin horizontal y vertical de los datos del conjunto de datos. Si seleccionamos esta
opcin, las columnas se utilizarn como filas.
Podemos seleccionar Filtrar filas duplicadas para excluir las filas duplicadas de datos del
conjunto de datos.
Al seleccionar Desactivar cach de datos tendremos acceso siempre a los datos ms
recientes en el conjunto de datos. Si deseamos que los datos se actualicen automticamente,
entonces habr que seleccionar Actualizar datos automticamente y especificar un tiempo de
actualizacin en milisegundos.

Figura 9.44. Establecer opciones de datos.
Una vez terminadas de configurar todas las opciones en la pantalla Establecer opciones de
datos, haremos clic en Siguiente para pasar a la pantalla Elegir opciones de insercin.
Dreamweaver CS4. Captulo 9. Formularios

260


Figura 9.45. Elegir opciones de insercin.
En esta pantalla, podemos realizar una de las acciones siguientes:
Seleccionar un diseo para el conjunto nuevo y especificar las opciones de configuracin
adecuadas.
Seleccionar No insertar HTML. Si seleccionamos esta opcin, Dreamweaver crea al conjunto
de datos pero no aade HTML a la pgina. El conjunto de datos est disponible en el panel
Vinculaciones (Ventana > Vinculaciones) y puedes arrastrar los datos manualmente desde el
conjunto de datos a la pgina.
Por ltimo, hacemos clic en Listo y Dreamweaver crea el conjunto de datos y, si se ha
seleccionado una opcin de diseo, muestra el diseo y los marcadores de posicin de datos
de la pgina. Si accedemos a la vista Cdigo, podremos comprobar que Dreamweaver ha
aadido en el encabezado referencias al archivo SpryData.js y al archivo SpryHTMLDataSet.js.
Estos archivos son activos importantes de Spry que funcionan con la pgina. Este cdigo no
puede eliminarse de la pgina; de lo contrario, el conjunto de datos no funcionar. Cuando se
carga la pgina en el servidor, tambin se debern cargar estos archivos como archivos
dependientes.
El aspecto final del conjunto de datos en la ventana del documento en Vista Diseo sera
similar a ste:
Dreamweaver CS4. Captulo 9. Formularios

261


Figura 9.46. Aspecto final del conjunto de datos de Spry en Vista Diseo.
Y as se vera en la Vista en vivo:

Figura 9.47. Aspecto final del conjunto de datos de Spry en Vista en vivo.



262















Captulo 10.
Capas


Dreamweaver CS4. Captulo 10. Capas
263

Captulo 10. CAPAS
Una capa en Dreamweaver no es ms que un elemento HTML que puede colocarse en
cualquier parte del documento que estemos creando. En dichas capas se puede colocar texto,
imgenes,... y , en general, cualquier contenido HTML. En Dreamweaver CS4 se llaman
Elementos PA, es decir, Elementos de Posicin Absoluta.
Es posible realizar operaciones muy variadas con los elementos PA adems de insertar
contenido dentro de ellos: podemos superponer varios PA, hacer que algunos aparezcan o
desaparezcan, moverlos desde una parte de la pgina a otra, redimensionarlos,... con lo cual
disponemos de una gran cantidad de opciones de diseo.
Los navegadores ms antiguos (anteriores a Microsoft Internet Explorer 4.0 y Netscape
Navigator 4.0) no son compatibles con el uso de PAs en HTML, no los visualizan correctamente
o, en ocasiones, directamente no los muestran. Por este motivo si pensamos que los usuarios
de nuestra pgina dispondrn de dichos navegadores deberemos especificar un contenido
alternativo para que la visualicen correctamente, si por el contrario pensamos que este caso
no se va a dar podemos trabajar tranquilamente con capas en nuestra pgina web.
10.1. Crear elementos PA
Opciones predeterminadas de elementos PA
Dentro de las preferencias establecidas en Dreamweaver existe un apartado dedicado a
elementos PA, en el cual podemos especificar las opciones predeterminadas que tendrn
dichos elementos en el momento que los creemos. Para llegar a estas preferencias hacemos
clic en el men Edicin>Preferencias y seleccionamos la categora Elementos PA.

Figura 10.1. Opciones predeterminadas de los elementos PA.
Dreamweaver CS4. Captulo 10. Capas

264

Una vez que hemos seleccionado la categora Elementos PA disponemos de varios valores para
configurarlos:
Visibilidad: indicamos cul ser la visibilidad predeterminada de los elementos PA:
o Default: (predeterminada) la visibilidad depende del navegador que est accediendo a la
pgina.
o Inherit: (heredada) para que el elemento PA que se cree herede la visibilidad del elemento
padre.
o Visible: (visible) para que el PA se muestre en cualquier caso.
o Hidden: (oculta) para que el PA se oculte en cualquier caso.
Ancho: especificamos el ancho por defecto del PA en pxeles.
Alto: especificamos la altura predeterminada del PA en pxeles.
Color de fondo: podemos escoger el color de fondo que tendr el PA mediante el selector
de colores o indicando en este campo su valor hexadecimal.
Imagen de fondo: desde aqu podemos indicar el nombre del archivo de la imagen de fondo
en todos los elementos PA que creemos.
Anidar: permitimos el anidamiento de un elemento PA en otro al crearlo en un punto
interior del elemento PA padre.
Insertar elementos PA
En Dreamweaver podemos aadir PAs a travs de los mens de la aplicacin siguiendo la ruta
Insertar>Objetos de diseo>Div PA.
Dreamweaver CS4. Captulo 10. Capas

265


Figura 10.2. Insertar un elemento PA.
O haciendo clic en el botn Dibujar Div PA de la pestaa
Estndar en la categora Diseo de la barra Insertar.
A medida que vamos aadiendo elementos PA a nuestro documento HTML, se hace ms difcil
poder seleccionar cada una de ellas individualmente, aunque siempre las podemos seleccionar
desde el panel Elementos PA. Este panel puede activarse desde Ventana>Elementos PA, o
pulsando F2.
Dreamweaver CS4. Captulo 10. Capas

266


Figura 10.3. Panel Elementos PA.
Tambin podemos seleccionar un elemento PA desde el manejador de seleccin que se hace
visible sobre el mismo cuando colocamos el cursor en su interior.

Figura 10.4. Elemento PA seleccionado con manejador de seleccin visible.
Una vez activado el panel Elementos PA, aparecer en l un listado con el nombre de todos los
PA que forman parte de nuestro documento, pudiendo seleccionar individualmente cada uno
de ellos. El primer PA que hayamos creado ser el que aparezca el ltimo en esta lista.

Figura 10.5. Panel de Elementos PA.
Dreamweaver CS4. Captulo 10. Capas

267

Adems, en este panel podemos indicar si queremos que un elemento PA est visible o no
haciendo clic al lado de cada PA: el icono indica que dicho elemento est visible, por el
contrario el icono nos indica que dicho elemento no es visible.
Los elementos PA anidados se mostrarn de forma que aqul que se encuentre en el interior
de otro, se situar inmediatamente debajo de ste y adems con una lnea vertical indicando
de qu elemento PA depende.
Tambin es posible Evitar solapamiento si activamos la casilla de verificacin con ese ttulo
que se encuentra en el mismo panel.


RECOMENDACIN. Si queremos seleccionar varios elementos PA, deberemos mantener
presionada la tecla Maysculas mientras hacemos clic en el borde o dentro de los PA que
vayamos a seleccionar. Tambin podemos seleccionar varios PA desde el panel Elementos PA,
manteniendo presionada la tecla Maysculas mientras hacemos clic en los nombres de los
elementos.


10.2. Propiedades de los Elementos PA
Para modificar las propiedades de un elemento PA, debemos tenerlo seleccionado
previamente. Las caractersticas del elemento seleccionado se especifican en el Inspector de
Propiedades.

Figura 10.6. Inspector de propiedades de un elemento PA.
Elemento CSS-P: asignamos un nombre al elemento que estamos creando. Tambin es
posible modificar el nombre de dicho elemento haciendo doble clic sobre l mismo en el panel
Elementos PA.
Izq: (izquierda) indicamos la distancia en pxeles entre el lmite izquierdo del documento y el
PA.
Sup: (superior) indicamos la distancia en pxeles entre el borde superior del documento y el
PA que se est modificando.
An.: (anchura) especificamos la anchura del elemento PA medido en pxeles.
Al.: (altura) especificamos la altura del elemento PA en pxeles.
Dreamweaver CS4. Captulo 10. Capas

268

ndice Z: es el identificador nico para cada PA que indica el orden en el que se visualizar
cada elemento (orden de apilamiento). Los elementos PA con un ndice Z mayor se
superponen a aquellos con un ndice menor y viceversa. Este valor lo podemos modificar
tambin en el panel Elementos PA.
Vis: (visibilidad) de la misma forma que podemos hacer en el panel Elementos PA, tambin
es posible desde aqu modificar la visibilidad de los PA, segn los siguientes valores:
o Default: (predeterminado) la visibilidad depende del navegador que est accediendo a la
pgina. La mayora de los navegadores utilizan la propiedad Heredada como predeterminada.
o Inherit: (heredado) el PA se muestra o no segn el valor que se hay especificado para el PA
padre.
o Visible: (visible) hace visible el elemento PA independientemente del valor que tenga
asignado el PA padre.
o Hidden: (oculto) el elemento PA se oculta y no se mostrar.
Im. fondo: (imagen de fondo) situamos una imagen de fondo en el elemento PA si as lo
deseamos. Slo tenemos que hacer clic en el icono que representa una carpeta y
seleccionar la imagen en nuestro equipo.
Col. fondo: (color de fondo) si en lugar de una imagen lo que queremos situar como fondo
de un PA es un color, podremos seleccionarlo desde aqu, bien escribiendo su valor
hexadecimal, o bien seleccionndolo desde la paleta de colores.
Clase: nos permite dar un formato determinado al elemento PA al seleccionar una hoja de
estilo de esta lista desplegable.
Desb.: (desbordamiento) controlamos cmo van a aparecer los elementos PA en el
navegador cuando el contenido en su interior supera los lmites especificados para ellos.
Existen cuatro posibles valores para controlar el desbordamiento:
o Visible: (visible) se ampla el tamao del PA para hacer visible todo el contenido.
o Hidden: (oculto) el contenido adicional no se va a mostrar en el elemento PA.
o Desplaz: (desplazamiento) el navegador mostrar barras de desplazamiento en el elemento
PA tanto si son necesarias como si no.
o Automtico: las barras de desplazamiento aparecern slo cuando sean necesarias en el
elemento PA.
Rec: (recorte) con esta propiedad podemos especificar qu parte de todo el elemento PA
queremos que sea visible. Con las coordenadas que se muestran a continuacin es posible
representar un rectngulo que ser la seccin que ser visible de todo el PA (comenzando
desde la esquina superior izquierda de la pgina).
Dreamweaver CS4. Captulo 10. Capas

269

o Iz: (izquierda) coordenada izquierda.
o Sup: (superior) coordenada superior.
o Der: (derecha) coordenada derecha.
o Inf: (inferior) coordenada inferior.

Ejercicio

El objetivo de este ejercicio ser la creacin de dos elementos PA con distintas propiedades.

Crea una pgina bsica de HTML (Archivo>Nuevo).

Para trabajar con elementos PA en Dreamweaver ser necesario activar el panel lateral
Elementos PA. Para hacerlo selecciona la opcin del men Ventana > Elementos PA o pulsa la
tecla F2.


Figura 10.7. Panel Elementos PA.

Aade un elemento PA a travs de la barra Insertar en la categora Diseo, haciendo clic en
el botn Dibujar Div PA . Dibuja el elemento PA haciendo clic con el botn izquierdo del
ratn y arrastrando el ratn, en la ventana del documento, hasta que tenga el tamao
deseado.

Selecciona el elemento PA haciendo clic con el botn izquierdo del ratn sobre el recuadro
situado en la parte superior izquierda del PA .

En el Inspector de Propiedades del elemento PA estable los siguientes valores:
o Nombre: inferior
o Ancho y Alto: 300 pxeles.
o Distancia a los bordes superior e izquierdo: 50 pxeles.
o Visibilidad: default.
o Color de fondo: #00FF33.
o Desbordamiento: automtico.

Dreamweaver CS4. Captulo 10. Capas

270



Figura 10.8. Inspector de propiedades del elemento PA llamado inferior.

Por ltimo aade el texto Capa inferior dentro del elemento PA, centrndolo dentro de l
y ponindolo en negrita.

El elemento PA final debera quedar as:



Figura 10.9. Elemento PA inferior finalizado.

A continuacin crea un segundo elemento PA de la misma forma que has hecho antes, pero
ahora con las siguientes propiedades:

o Nombre: superior.
o Anchura y Altura: 350 pxeles y 190 pxeles respectivamente.
o Distancia a los bordes superior e izquierdo: 130 pxeles y 180 pxeles respectivamente.
o Visibilidad: default.
o Color de fondo: #FFFF00.
o Desbordamiento: visible.
Dreamweaver CS4. Captulo 10. Capas

271




Figura 10.10. Inspector de propiedades del elemento PA llamado superior.

Aade el texto Capa superior dentro del elemento PA, centrndolo dentro de l y
ponindolo en negrita.

Guarda la pgina con el nombre capas1 (Archivo>Guardar).

La pgina HTML final quedara aproximadamente de la siguiente forma:



Figura 10.11. Aspecto final del documento con dos elementos PA insertados.

Pulsa la tecla F12 para ver cmo queda la pgina en el navegador, o utiliza la Vista en vivo.

Aproximadamente el aspecto de nuestra pgina sera el que se muestra en la figura siguiente:

Dreamweaver CS4. Captulo 10. Capas

272



Figura 10.12. Aspecto de los elementos PA en la Vista en vivo.


10.3. Operaciones con elementos PA
Anidar elementos PA
Podramos definir un elemento PA anidado como un PA que se encuentra dentro de otro PA.
Normalmente los elementos PA anidados se utilizan para mover ambos elementos de una sola
vez, quedando agrupados cuando se anidan.
Para dibujar un elemento PA anidado disponemos de varios procedimientos:
Sobre un PA ya creado, hacemos clic en el interior del mismo e insertamos un nuevo PA a
travs de los mens Insertar>Objetos de diseo>Div PA.
Haciendo clic en el interior de un elemento PA ya creado y, a continuacin, hacemos clic en
el botn correspondiente de la barra Insertar . Si la opcin Anidar est desactivada en las
Preferencias de los Elementos PA, debemos mantener pulsada la tecla Alt mientras
arrastramos el ratn al anidar un PA dentro de otro existente.
El aspecto que mostraran dos elementos PA anidados en el documento actual sera el que se
muestra a continuacin:
Dreamweaver CS4. Captulo 10. Capas

273


Figura 10.13. Elementos PA anidados en un documento activo.
En el panel Elementos PA tambin se aprecia la anidacin de los elementos:

Figura 10.14. Elementos PA anidados.
Es posible anidar elementos PA existentes. Para anidar un elemento PA ya existente dentro de
otro, slo hay que seleccionarlo en el panel Elementos PA con el botn izquierdo del ratn y
arrastrarlo, manteniendo pulsada la tecla Ctrl, hasta el PA que queremos que lo contenga.
Redimensionar capas
Si la operacin que queremos realizar es cambiar el tamao de un elemento PA, tenemos
varias vas para hacerlo:
Asignando los valores oportunos en los campos referidos a la anchura y a la altura dentro del
Inspector de Propiedades.
Dreamweaver CS4. Captulo 10. Capas

274

Seleccionando el PA (mediante cualquiera de los mtodos antes mencionados) y arrastrar
con el ratn cualquiera de los manejadores de tamao que aparecen en el contorno del PA
cuando est seleccionado, hasta conseguir el tamao deseado.
Manteniendo pulsada la tecla Ctrl y pulsando las teclas de flecha tantas veces como sea
necesario, podemos cambiar el tamao del PA pxel a pxel.
Para modificar el tamao de varios elementos PA simultneamente, deben seleccionarse todos
a la vez y, a continuacin, hacer clic en la opcin Modificar>Alinear>Asignar mismo ancho o
Modificar>Alinear>Asignar mismo alto, en funcin de que queramos que todos los PA
seleccionados sean iguales en anchura o en altura.
Tambin podemos modificar el tamao de varios PA, una vez seleccionados todos, desde el
Inspector de Propiedades de varios elementos, introduciendo los valores de ancho y alto que
deseemos.
Mover elementos PA
La forma de mover un elemento PA dentro del documento HTML que estamos creando, es
muy sencilla. El primer paso es seleccionar el PA a mover, para ello basta con hacer clic en el
contorno de dicho elemento dentro de la ventana principal, o bien seleccionarlo en el panel
Elementos PA.
Una vez seleccionado el PA es posible moverlo:
Pxel a pxel utilizando las teclas de direccin del teclado.
El espacio deseado, haciendo clic en el manejador de seleccin que aparece en la esquina
superior izquierda del PA y arrastrndolo con el ratn a la posicin que deseemos.
Cambiar orden de apilamiento de los Elementos PA
En ocasiones necesitaremos cambiar el orden en el que se encuentran apilados los elementos
PA para hacer que unos aparezcan por delante de las otros.
Para llevar a cabo esta tarea es necesario modificar el valor del campo ndice Z.
Esto lo podemos realizar desde el Inspector de Propiedades, o bien desde el panel Elementos
PA:
Una vez seleccionado un PA, desde el Inspector de Propiedades es posible modificar el
valor del campo ndice Z, asignando valores altos para los PA que deseamos que aparezcan en
los niveles superiores y valores ms bajos para los que queramos que aparezcan en niveles
inferiores.
Desde el panel Elementos PA tambin es posible modificar este valor. Se puede seleccionar
un elemento PA haciendo clic con el ratn sobre su nombre y arrastrndolo arriba o abajo de
la lista en funcin de la posicin donde lo queramos colocar. Tambin haciendo clic en la
columna situada bajo el ttulo Z en el elemento del cual queramos modificar dicho ndice.
Dreamweaver CS4. Captulo 10. Capas

275

Propiedades de mltiples Elementos PA
En un apartado anterior vimos cmo modificar las propiedades de un elemento PA utilizando
el Inspector de Propiedades. Hay que apuntar que tambin es posible modificar las
propiedades de varios elementos de forma simultnea.
Seleccionamos aquellos elementos de los cuales queramos modificar dichos valores y, a
continuacin, modificamos los valores deseados en el Inspector de Propiedades. El aspecto
de ste ahora, es diferente al que apareca cuando modificbamos un solo elemento.

Figura 10.15. Inspector de propiedades HTML de varios elementos PA.

Figura 10.16. Inspector de propiedades CSS de varios elementos PA.
En este nuevo Inspector de Propiedades como vemos aparecen nuevas propiedades,
principalmente referidas al formato de fuentes de texto, al estilo, a la justificacin del texto
dentro del PA, todo esto lo podemos ver en la parte superior de este panel.
En la parte inferior del mismo aparece nicamente una nueva propiedad Etiq. (Etiqueta), para
que indiquemos la etiqueta HTML utilizada para definir los elementos PA. El resto de
propiedades son las mismas que tratamos en el apartado dedicado a las propiedades de un PA,
pero lgicamente con la particularidad de que los cambios que apliquemos a cada una de las
propiedades que aqu aparecen afectarn a todos y cada uno de los PA seleccionados.
Convertir elementos PA en tablas
Es posible que una vez que hemos diseado nuestra pgina web utilizando elementos PA,
comprobemos para decepcin nuestra que los navegadores antiguos (anteriores a Microsoft
Internet Explorer 4.0 y a Netscape Navigator 4.0) no muestran los PA de forma correcta.
Si estamos seguros de que los usuarios de nuestra pgina estn a la ltima y no se van a
encontrar este problema, no hay necesidad de llevar a cabo la tarea que vamos a ver a
continuacin, pero en el caso de que esto no sea as deberemos llevar a cabo una conversin
de elementos PA en tablas como veremos ahora.
Dreamweaver CS4. Captulo 10. Capas

276


En Dreamweaver existe una herramienta denominada Convertir Divs PA en tabla que nos va a
permitir realizar esta operacin de forma sencilla e intuitiva. Nosotros disearemos nuestra
pgina web utilizando elementos PA, tal y como hemos visto en este captulo y para asegurar
la compatibilidad con los navegadores ms antiguos utilizaremos esta herramienta para
transformar estos elementos en tablas.
Esta herramienta la encontramos en el men Modificar>Convertir> Divs PA en tabla.

Figur 10.17. Convertir Divs PA en tabla.
Al elegir esta opcin del men se abrir el cuadro de dilogo Convertir Divs PA en tabla, con
las diferentes opciones para configurar esta conversin.

Figura 10.18. Cuadro de dilogo Convertir divs PA en tabla.
Dreamweaver CS4. Captulo 10. Capas

277

Las distintas opciones de las que disponemos a la hora de convertir los PA de nuestra pgina
en tablas son las siguientes:
Ms preciso: va a crear para cada una de los PA existentes una celda, adems de insertar
celdas intermedias para conservar el espacio entre PAs.
Mnimo (contraer celdas vacas): indica que para aquellos elementos que estn situados a
menor distancia de la especificada en el campo Menor que... pxeles los bordes se van a
alinear (es posible que el resultado final no coincida con el diseo original).
Usar GIF transparentes: Dreamweaver utiliza esta opcin para rellenar la ltima fila de la
tabla con imgenes GIF transparentes con el fin de asegurar que las tablas aparezcan con la
misma anchura en cualquier navegador.
Centrar en pgina: muestra la tabla resultante centrada en la pgina.
Herramientas de Diseo: con esta opcin podremos indicar otra serie de operaciones
relativas a la conversin que se est realizando como Evitar solapamientos, Mostrar el panel
de elementos PA o la cuadrcula o Ajustar la tabla resultante a la cuadrcula.

NOTA. Si hay ms de un elemento PA en el documento y stos se encuentran anidados o
superpuestos, esta conversin no se permitir.



Ejercicio

El objetivo de este ejercicio ser la creacin de elementos PA anidados.

Crea una pgina bsica de HTML (Archivo>Nuevo).

Aade un elemento PA a travs de la barra Insertar en la categora Diseo, haciendo clic en
el botn Dibujar Div PA .

Dibuja el elemento haciendo clic con el botn izquierdo del ratn y arrastrando el ratn, en
la ventana del documento, hasta que tenga el tamao deseado.

Selecciona el elemento PA haciendo clic con el botn izquierdo del ratn sobre el recuadro
situado en la parte superior izquierda del elemento .

En el Inspector de Propiedades del elemento PA establece los siguientes valores:

o Nombre: primera.
o Anchura y Altura: 300 pxeles y 250 pxeles respectivamente.
o Distancia a los bordes superior e izquierdo: 40 pxeles y 225 pxeles respectivamente.
o Visibilidad: visible.
o Imagen de fondo: la imagen gente.jpg procedente del aula Mentor. Para hacerte con
esta imagen, puedes ir a http://www.mentor.mec.es/administracion.html; est justo
Dreamweaver CS4. Captulo 10. Capas

278

debajo de la palabra EDUCACIN, slo tienes que hacer clic con el botn derecho del
ratn sobre la imagen, seleccionar Guardar imagen como y guardar gente.jpg en la
carpeta imagenes de tu sitio MiWeb.
Si tienes problemas para localizar esta imagen, puedes descargarla tambin desde
Materiales de apoyo, Material necesario para ejercicio, Ejercicios del Captulo 10.
o Desb.: visible.



Figura 10. 19. Inspector de Propiedades del PA llamado primera.

El aspecto del elemento PA dentro del documento HTML debe ser el siguiente:



Figura 10.20. Aspecto del elemento PA insertado en el documento.

Inserta un elemento PA anidado dentro de este primero. Para ello coloca el cursor dentro
del PA que acabas de dibujar y ejecuta Insertar>Objetos de Diseo>Div PA.

Selecciona este nuevo PA y establece sus propiedades en el Inspector:

o Nombre: segunda.
o Anchura y Altura: 215 pxeles y 165 pxeles respectivamente.
o Distancia a los bordes superior e izquierdo: 75 pxeles y 75 pxeles respectivamente.
o Visibilidad: visible.
Dreamweaver CS4. Captulo 10. Capas

279

o Color de fondo: #FF3300.
o Desbordamiento: visible.


Figura 10.21. Propiedades del elemento PA anidado.

Teclea dentro de este PA anidado el texto Capa anidada, centrado en negrita.

El nuevo elemento PA creado tendra el siguiente aspecto:



Figura 10.22. Aspecto del elemento PA anidado.

El Panel Elementos PA debe ser el siguiente mostrando los elementos PA anidados:

Dreamweaver CS4. Captulo 10. Capas

280



Figura 10.23. Panel Elementos PA con los dos elementos anidados.

Guarda la pgina HTML creada con el nombre capas2 y pulsa la tecla F12 para ver el
resultado obtenido en un navegador o pulsa Vista en vivo.







281















Captulo 11.
Multimedia


Dreamweaver CS4. Captulo 11. Multimedia
282

Captulo 11. MULTIMEDIA
Los elementos multimedia, considerando como tal los archivos de vdeo, los sonidos, las
animaciones Flash,... nos permiten dotar a nuestra pgina Web de un estilo ms ameno, a la
vez que amplan las opciones de diseo disponibles.
11.1. Trabajando con Flash
Insertar un archivo SWF
Uno de los objetos ms comunes para ser aadidos a una pgina Web son los archivos con
formato Flash: pequeas animaciones con movimiento y, en ocasiones, con sonido.
Flash se puede considerar como el estndar de animacin para la Web. Los archivos Flash
ofrecen multitud de posibilidades relativas a sonido, movimiento, imgenes,... adems, al ser
de tamao reducido son relativamente rpidos de descargar. Estos ficheros tendrn la
extensin SWF.

RECOMENDACIN. Para que este tipo de archivos sea visible desde los distintos navegadores
es necesario tener instalado en ellos una pequea aplicacin denominada plug-in. Esta
aplicacin reconocer que en el interior de la pgina Web a la que se est accediendo hay un
fichero de tipo Flash y lo mostrar. El plug-in para mostrar estos elementos se puede
descargar desde la pgina oficial de Adobe (propietarios de Flash) en la direccin:
http://www.adobe.com/es/products/flashplayer/ (es rpido de descargar e instalar).


Para insertar un archivo SWF en una pgina Web, slo hay que colocar el cursor con el puntero
del ratn el lugar en el que queremos insertar el elemento dentro del documento, desplegar
Media y hacer clic en el botn correspondiente a SWF dentro de
la categora Comn en la barra Insertar.
Dreamweaver CS4. Captulo 11. Multimedia

283

Al hacer esto, si no hemos guardado nunca el documento, Dreamweaver nos pedir que lo
hagamos antes de proceder a insertar el SWF, y una vez guardado el documento, entonces se
abre el cuadro de dilogo Seleccionar archivo, en el cual localizaremos el archivo SWF que
deseemos insertar (.swf) para despus pulsar Aceptar.
Existe otra forma de aadir un objeto Flash a nuestra pgina, utilizando los mens de la
aplicacin. Slo hay que seguir la ruta Insertar>Media>SWF o bien, utilizar la combinacin de
teclas Ctrl+Alt+F.


Figura 11.1. Ejecutar Insertar>Media>SWF.
Al hacer esto, se aadir el fichero SWF a la pgina HTML que estamos creando en el punto
donde le hayamos indicado, mostrando el documento el siguiente aspecto:
Dreamweaver CS4. Captulo 11. Multimedia

284


Figura 11.2. Archivo .swf de Flash insertado en un documento HTML.

Podemos cambiar las propiedades del archivo .swf, desde el Inspector de Propiedades.

Figura 11.3. Inspector de propiedades de un archivo SWF.
Para ello slo hay que seleccionar el objeto y especificar los datos deseados para los siguientes
campos:
SWF: para indicar un nombre identificador que represente el objeto Flash dentro de la
pgina Web.
An. y Alt.: anchura y altura en pxeles respectivamente con la que deseamos que aparezca el
objeto Flash en el documento.
Archivo: ruta en la que se encuentra ubicado el archivo SWF que estamos modificando
dentro de nuestro equipo. Si hacemos clic sobre el botn Examinar podremos buscar
dicho archivo navegando a travs del sistema de directorios de nuestro disco duro, o bien
indicar manualmente la ruta.
Origen: indica la ruta al archivo origen con la extensin .fla del objeto Flash introducido. Este
fichero con la extensin .fla se utiliza para poder modificar, desde Flash CS4, el objeto
Dreamweaver CS4. Captulo 11. Multimedia

285

insertado con la extensin .swf por lo que se necesita tener instalados en el sistema tanto
Dreamweaver CS4 como Flash CS4.
Aunque no tengamos instalado en nuestro sistema la aplicacin Flash, podemos insertar un
objeto Flash en nuestra pgina Web, pero no podremos modificarlo. Este campo no aparecer
y, el botn Editar aparecer desactivado ya que no tendr asociada la aplicacin.
Editar: abre directamente Flash para modificar el archivo origen. Si no est instalado en el
sistema Flash este botn est desactivado.
Clase: para aplicar un formato a la visualizacin del objeto Flash en funcin de una hoja de
estilo predefinida.
Bucle: si esta opcin est activada, el objeto Flash que hemos insertado se reproducir
continuamente; si no lo est el objeto se reproducir una vez y se parar.
Rep. Autom.: (reproduccin automtica) si activamos esta opcin, en el momento de que se
cargue la pgina en el navegador se reproducir automticamente el objeto Flash insertado.
Espacio V: (espacio vertical) nmero de pxeles de espacio en blanco que habr por encima y
por debajo del objeto Flash.
Espacio H: (espacio horizontal) nmero de pxeles de espacio a la derecha y a la izquierda
del objeto Flash insertado.
Calidad: de entre los valores de calidad podemos escoger uno:
1. Alta: este valor antepone el aspecto del objeto Flash a la velocidad a la hora de mostrarlo.
2. Alta automtica: intenta encontrar el equilibrio entre ambas cualidades, pero antepone, si
es necesario, el aspecto a la velocidad.
3. Baja: se prioriza la velocidad frente al aspecto.
4. Baja automtica: da prioridad a la velocidad del objeto Flash, pero atendiendo tambin, en
la medida de lo posible, al aspecto.
Escala: escala en achura y altura a la que se debe mostrar el objeto Flash. Es posible escoger
entre los valores siguientes:
1. Predeterminada (mostrar todo): muestra toda la pelcula a su tamao original.
2. Sin borde: ajusta el tamao original de la pelcula de forma que no aparezcan bordes y se
mantenga adems la relacin de aspecto.
3. Ajuste exacto: establece el tamao del objeto Flash a las dimensiones indicadas sin
preocuparse de la relacin de aspecto.
Alinear: esta opcin la utilizamos para alinear el objeto Flash dentro de la pgina que
estamos creando. Las opciones de alineacin disponibles se corresponden con las de esta
figura, idnticas a las que vimos para las imgenes en el captulo 5
Dreamweaver CS4. Captulo 11. Multimedia

286

.
Wmode: Establece el parmetro Wmode para el archivo SWF con el fin de evitar conflictos
con elementos DHTML, como los widgets de Spry. El valor predeterminado es Opaco, que
permite a los elementos DHTML aparecer sobre los archivos SWF en un navegador. Si el
archivo SWF incluye transparencias y deseas que los elementos DHTML aparezcan detrs de
ellas, selecciona la opcin Transparente. Selecciona la opcin Ventana para eliminar el
parmetro Wmode del cdigo y permitir que el archivo SWF aparezca sobre otros elementos
DHTML.
Reproducir: reproduce la pelcula en la ventana del documento.
Fondo: para indicar un color de fondo para la zona donde est ubicado el objeto Flash que
hemos insertado.
Parmetros: esta opcin muestra un cuadro de dilogo Parmetros, en el cual se podrn
indicar parmetros para pasar al objeto Flash en el caso de que ste los necesite. Haciendo clic
en el botn aadimos parmetros y, haciendo clic en los borramos. Adems para
cada parmetro se debe especificar un nombre y un valor.

Figura 11.4. Cuadro de dilogo Parmetros.


Ejercicio

El objetivo de este ejercicio ser insertar un SWF en la pgina Web.


Dreamweaver CS4. Captulo 11. Multimedia

287

Para hacer el ejercicio descarga previamente de Materiales de apoyo, Material necesario
para ejercicios, Ejercicios del Captulo 11, que tienes en el aula virtual, el fichero
multimedia1.swf y gurdalo en tu carpeta imagenes del sitio MiWeb.

Crea una nueva pgina bsica HTML (Archivo>Nuevo).

A continuacin selecciona SWF desde el men desplegable del icono Media en la ficha
Comn de la barra Insertar.

Figura 11.5. Insertar SWF.

Al hacer esto aparecer el cuadro de dilogo Seleccionar archivo, desde el cual podrs
seleccionar el archivo Flash a insertar: multimedia1.swf.

Si se abren los Atributos de accesibilidad de la etiqueta de objeto donde podemos darle
datos identificativos a nuestro swf si as lo deseamos, aunque tambin podemos Cancelar y
hacerlo ms adelante, que es lo que vamos a hacer en este ejercicio.


Figura 11.6. Atributos de accesibilidad de la etiqueta de objeto.
Dreamweaver CS4. Captulo 11. Multimedia

288


Una vez insertado el objeto Flash en la pgina, lo seleccionas y, desde el Inspector de
Propiedades, indicas los siguientes datos:

o Anchura: 250 pxeles.
o Altura: 250 pxeles.
o Bucle: activa esta opcin para que el archivo se reproduzca continuamente en la
pgina HTML.
o Espacio V y Espacio H: 150 pxeles y 200 pxeles respectivamente.



Figura 11.7. Inspector de propiedades del SWF insertado.


Guarda (Archivo>Guardar) la pgina creada con el objeto Flash insertado y le asignas el
nombre multimedia1.



RECOMENDACIN. Slo debemos publicar trabajos originales o de libre uso. En caso
contrario deberemos pedir permiso por escrito al autor. El material publicado en Internet est
protegido por la legislacin sobre Propiedad Intelectual.


Insertar un archivo FLV
De la misma manera que hemos aprendido a insertar objetos de Flash, tambin podemos
insertar vdeos de flash, son los archivos FLV. Para insertar un vdeo FLV podemos ir al panel
Insertar, categora Comn, desplegar Media y seleccionar FLV , o ejecutar
Insertar>Media>FLV.
Dreamweaver CS4. Captulo 11. Multimedia

289


Figura 11.8. Insertar FLV.
En cualquier caso, se abre el cuadro de dilogo Insertar FLV,
Dreamweaver CS4. Captulo 11. Multimedia

290


Figura 11.9. Cuadro de dilogo Insertar FLV. Tipo Descarga progresiva de vdeo.
en el cual podemos configurar las siguientes opciones:
Tipo de vdeo: si lo desplegamos podemos seleccionar Descarga progresiva de vdeo o
Flujo de vdeo.
o Si seleccionamos Descarga progresiva de vdeo, descarga el archivo FLV en el disco
duro del visitante del sitio y lo reproduce. Sin embargo, a diferencia de los
mtodos tradicionales de entrega de vdeo de tipo descarga y reproduccin, la
descarga progresiva permite iniciar la reproduccin del archivo de vdeo antes de
que haya finalizado la descarga.
o Si seleccionamos Flujo de vdeo, transfiere el contenido de vdeo y lo reproduce en
una pgina Web transcurrido un breve periodo debfer que garantice una
reproduccin fluida. Para activar el flujo de vdeo en las pginas Web, se debe
tener acceso a Adobe Flash Media Server.

En el caso de seleccionar Descarga progresiva de vdeo, las opciones configurables en el
cuadro de dilogo Insertar FLV son:

URL especifica una ruta de acceso relativa o absoluta al archivo FLV. Para especificar una
ruta de acceso relativa, haremos clic en el botn Examinar , localizaremos el archivo
FLV en nuestro equipo y lo seleccionaremos. Para especificar una ruta de acceso absoluta,
Dreamweaver CS4. Captulo 11. Multimedia

291

escribiremos el URL (por ejemplo, http://fresno.pntic.mec.es/mgas0012/mivideo.flv) del
archivo FLV.
Aspecto especifica el aspecto del componente de vdeo. Si lo desplegamos, podemos
escoger entre diversos tipos de interfaces para nuestro componente
. Se muestra una presentacin
preliminar del aspecto seleccionado bajo el men emergente Aspecto.

Ancho especifica el ancho del archivo FLV en pxeles. Para que Dreamweaver calcule el
ancho exacto del archivo FLV, haremos clic en el botn Detectar tamao. Si Dreamweaver
no puede calcular el ancho, deberemos introducir un valor de anchura.

Altura especifica el alto del archivo FLV en pxeles. Para que Dreamweaver calcule el alto
exacto del archivo FLV, haremos clic en el botn Detectar tamao. Si Dreamweaver no
puede calcular el alto, deberemos introducir un valor de altura.

Total con aspecto es el valor del ancho y alto del archivo FLV ms el ancho y alto del
aspecto seleccionado.

Restringir mantiene la misma relacin de aspecto entre el ancho y el alto del componente
de vdeo. Esta opcin est activada de forma predeterminada.

Reproduccin automtica especifica si el archivo se va a reproducir al abrir la pgina Web.

Rebobinado automtico especifica si el control de reproduccin vuelve al punto de inicio
cuando finalice la reproduccin.

Una vez configuradas todas las opciones, hacemos clic en Aceptar y el FLV quedar insertado
en nuestro documento.
El comando Insertar FLV crea un archivo SWF de reproductor de vdeo y un archivo SWF de
aspecto que se utilizan para mostrar el contenido de vdeo en una pgina Web. (Quizs tengas
que hacer clic en el botn Actualizar del panel Archivos para ver los nuevos archivos.) Estos
archivos se almacenan en el mismo directorio que el archivo HTML al que estamos aadiendo
Dreamweaver CS4. Captulo 11. Multimedia

292

contenido de vdeo. Cuando carguemos la pgina HTML que incluye el archivo FLV,
Dreamweaver cargar estos archivos como archivos dependientes (siempre y cuando haymos
pulsado en S en el cuadro de dilogo Colocar archivos dependientes).

En el caso de seleccionar Flujo de vdeo, las opciones configurables en el cuadro de dilogo
Insertar FLV son un poco diferentes a las anteriores:



Figura 11.10. Cuadro de dilogo Insertar FLV. Tipo Flujo de vdeo.

URL de servidor especifica el nombre de servidor, nombre de la aplicacin y nombre de
instancia con el formato rtmp://www.ejemplo.com/app_name/instance_name.

Nombre de flujo especifica el nombre del archivo FLV que deseamos reproducir (por
ejemplo, mivideo.flv). La extensin .flv es opcional.

Aspecto especifica el aspecto del componente de vdeo, de idntico modo a como vimos
para la Descarga progresiva de vdeo.

Entrada de vdeo en vivo especifica si el contenido de vdeo es contenido en vivo. Si se
selecciona Entrada de vdeo en vivo, el reproductor de Flash reproducir una entrada de
vdeo en vivo transmitida en flujo desde Flash Media Server. El nombre de la entrada de
vdeo en vivo es el nombre especificado en el cuadro de texto Nombre de flujo.
Dreamweaver CS4. Captulo 11. Multimedia

293


Si activamos la opcin Entrada de vdeo en vivo, slo aparecer el control de volumen en
el aspecto del componente, porque no es posible manipular el vdeo en vivo. Tampoco
tendrn ningn efecto las opciones Reproduccin automtica y Rebobinado automtico.

Reproduccin automtica especifica si el archivo se va a reproducir al abrir la pgina Web.

Rebobinado automtico especifica si el control de reproduccin vuelve al punto de inicio
cuando finalice la reproduccin.

Tiempo de bfer especifica los segundos necesarios para almacenar en bfer el vdeo
antes de iniciar su reproduccin. El tiempo de bfer predeterminado es 0, de forma que el
vdeo comienza a reproducirse inmediatamente despus de pulsar el botn Reproducir. (Si
se activa la opcin Reproduccin automtica, el vdeo comenzar a reproducirse en
cuanto se establezca una conexin con el servidor.) Si lo desearamos, tambin podemos
establecer un tiempo de bfer, por ejemplo, si deseamos publicar contenido de vdeo con
una velocidad de bits superior a la velocidad de conexin del usuario o cuando el trfico de
Internet pueda provocar cuellos de botella en el ancho de banda o problemas de
conectividad. Por ejemplo, si deseamos enviar 15 segundos de vdeo a la pgina Web antes
de que sta comience a reproducirlo, estableceremos un tiempo de bfer de 15.

Una vez configuradas estas opciones, hacemos clic en Aceptar para insertar el FLV en el
documento. Como en el caso anterior, en este tipo Flujo de vdeo, crea un archivo SWF de
reproductor de vdeo y un archivo SWF de aspecto que se utilizan para mostrar el vdeo en una
pgina Web. El comando tambin crea un archivo main.asc que debe cargarse en Flash Media
Server. (Quizs tengas que hacer clic en el botn Actualizar del panel Archivos para ver los
nuevos archivos.) Estos archivos se almacenan en el mismo directorio que el archivo HTML al
que ests aadiendo contenido de vdeo. Cuando cargues la pgina HTML que incluye el
archivo FLV, no olvides cargar los archivos SWF en el servidor Web y el archivo main.asc en
Flash Media Server.

Si deseamos cambiar la configuracin del FLV insertado, entonces podremos hacerlo,
seleccionndolo previamente en el documento activo, desde el Inspector
de Propiedades; las opciones configurables en el inspector son las mismas que habamos visto
referidas al cuadro de dilogo Insertar FLV. Lo nico que no puede cambiarse en el inspector
son los tipos de vdeo. La nica manera de cambiar el tipo de vdeo es eliminar el componente
e insertarlo de nuevo.

Dreamweaver CS4. Captulo 11. Multimedia

294



Figura 11.11. Inspector de propiedades de un vdeo FLV insertado en un documento.

Al insertar un archivo FLV en una pgina, Dreamweaver inserta cdigo que detecta si el usuario
dispone de la versin correcta del reproductor Flash Player. Si no dispone de ella, la pgina
mostrar un contenido alternativo predeterminado que solicita al usuario que descargue la
versin ms reciente. Se puede cambiar este contenido alternativo en cualquier momento.
Este procedimiento tambin es aplicable a archivos SWF.



Figura 11.12. Contenido alternativo sobre versin del Flash Player en vista Diseo.


Podemos editar la informacin de descarga del reproductor Flash Player de la siguiente
manera:

En la vista Diseo de la ventana de documento, selecciona el archivo SWF o el archivo FLV.

Haz clic en el icono del ojo de la ficha del archivo SWF o el archivo FLV.

Edita el contenido del mismo modo que cualquier otro contenido de Dreamweaver.

Haz clic en el icono de nuevo para regresar a la vista de archivo SWF o FLV.


Este sera el mensaje que nos mostrara Dreamweaver en la Vista en vivo:
Dreamweaver CS4. Captulo 11. Multimedia

295


Figura 11.13. Vista en vivo del mensaje alternativo.

Insertar Flash Paper
Del mismo modo que hemos insertado archivos SWF o FLV, podemos insertar documentos
Flash Paper en nuestras pginas web. Cuando se abra una pgina que contenga un documento
FlashPaper en un navegador, el usuario puede navegar por todas las pginas del documento
FlashPaper sin necesidad de cargar pginas Web nuevas. El usuario tambin puede realizar
bsquedas en el documento, imprimirlo y utilizar la herramienta Zoom para acercarse o
alejarse.
Para insertar este tipo de documento en nuestra pgina, bien seleccionamos el icono Media
de la categora Comn del panel Insertar,

Figura 11.14. Insertar Flash Paper desde Categora Comn.
bien, ejecutamos Insertar>Media>Flash Paper.
Dreamweaver CS4. Captulo 11. Multimedia

296


Figura 11.15. Ejecutar FlashPaper.
Una vez llevado a cabo cualquiera de estos dos procedimientos, se abre el cuadro Insertar
FlashPaper, en el que podemos insertar la ruta al documento Flash Paper, bien teclendola , o
bien pulsando Examinar hasta localizar dicho documento en nuestro equipo, as como
especificar las dimensiones del objeto Flash Paper en la pgina Web. Para ello, introducimos el
ancho y el alto en pxeles. Flash Paper vara la escala del documento para ajustar el ancho.

Figura 11.16. Cuadro de dilogo Insertar FlashPaper.
Dreamweaver CS4. Captulo 11. Multimedia

297

Una vez hagamos clic en Aceptar el documento de Flash Paper queda insertado en nuestra
pgina y podemos configurar tambin los atributos de accesibilidad si tenemos configurado el
programa para que se abran para este tipo de objetos, o ir directamente al inspector de
propiedades del Flash Paper por si queremos editar este objeto. Las propiedades
configurables para este tipo de objetos son similares a las que ya hemos visto para los objetos
SWF, ya que ambos objetos comparten inspector.
Dado que un documento Flash Paper es un archivo SWF, en la pgina aparece un marcador de
posicin de archivo SWF. Para obtener la vista previa del documento Flash Paper, pulsamos en
el marcador de posicin y pulsamos el botn Reproducir del inspector de propiedades.
Pulsaremos en Detener para poner fin a la vista previa. Tambin podemos obtener una vista
previa del documento en un navegador presionando F12. La barra de herramientas de Flash
Paper se muestra al completo en el navegador.
11.2. Archivos de sonido
A la hora de insertar sonido a una pgina Web es necesario conocer cules son los previsibles
gustos de los usuarios potenciales de nuestra pgina, el tema al que est dedicado la pgina
Web, la calidad del sonido, el tamao del archivo, cmo se reproduce un mismo archivo de
audio en los diferentes navegadores, ...
Todas estas cuestiones habr que tenerlas en cuenta a la hora de decidirnos a insertar un
archivo de audio en nuestra pgina, sobre todo cuando muchos usuarios mientras navegan por
Internet estn escuchando su propia msica en el ordenador y el hecho de que en una pgina
aparezca un sonido que se entremezcle quiz no sea del todo de su agrado.

RECOMENDACIN. Deberemos incluir un sonido en una pgina Web SLO Y
EXCLUSIVAMENTE CUANDO SEA NECESARIO y no como norma general. Aparte de aumentar
el tamao de la pgina, un sonido reiterativo puede resultar exasperante.


De entre los distintos formatos de audio existentes, los ms comunes a la hora de trabajar en
una pgina Web son:
Formato .midi o .mid: formato de msica instrumental, generalmente de pequeo tamao y
calidad aceptable (vara en funcin de la tarjeta de sonido del usuario). Se suele utilizar como
msica de fondo en algunos sitios.
Formato .mp3: formato de audio comprimido, de calidad muy alta comparable con la de un
CD. El tamao de estos archivos es relativamente grande y puede ser lento de descargar para
conexiones telefnicas. Adems los navegadores necesitarn tener instalado un plug-in para
reproducirlo correctamente.
Formato .wav: este formato de sonido tiene una buena calidad, es compatible con la
mayora de los navegadores y adems no necesitan ningn plug-in para reproducirlo. El nico
Dreamweaver CS4. Captulo 11. Multimedia

298

problema que presentan estos archivos es el gran tamao de los mismos, en ocasiones
inaceptable a la hora de navegar por internet.
Formato .aif: igual que los arhivos WAV, tienen una calidad de sonido aceptable, son
compatibles con la mayora de los navegadores y no es necesario un plugin para reproducirlos.
Adems presentan un problema similar, el tamao excesivo de los mismos.
Formato RealAudio: los archivos con este formato tendrn extensin .ra, .ram o .rpm. Son
archivos de sonido comprimidos, con un tamao algo menor a los archivos de formato mp3, y
de calidad aceptable. Para reproducirlos hace falta un plug-in denominado RealPlayer.
Formato .qt, .qtm, .mov o QuickTime: es un formato de audio y de vdeo desarrollado por
Apple Computer. QuickTime est incluido con los sistemas operativos Apple Macintosh, y lo
utilizan la mayora de las aplicaciones de Macintosh que emplean audio, vdeo o animacin.
Los PC tambin pueden reproducir archivos en formato QuickTime, pero requieren un
controlador de QuickTime especial. QuickTime admite la mayora de los formatos de
codificacin, como Cinepak, JPEG y MPEG.
Insertar archivos de sonido mediante un vnculo
La forma ms sencilla de aadir sonido a nuestra pgina Web es mediante un vnculo. Esto
permite que aquellos usuarios que deseen escuchar el sonido vinculado a la pgina hagan clic
en este vnculo y lo escuchen y, aquellos usuarios cuyo navegador no les permita escuchar
sonido o, simplemente, no lo quieran escuchar puedan navegar tranquilamente por la pgina
sin problemas ni molestia alguna.
Para insertar un archivo de sonido de esta forma creamos un hipervnculo usando texto o
imagen como vnculo al archivo de sonido, (como hemos visto en el captulo dedicado a
Vnculos) y en el campo Vnculo indicamos la ruta donde se encuentra el archivo de sonido que
deseamos vincular.


Figura 11.17. Cuadro de dilogo Hipervnculo com ruta a un archivo de udio.
Dreamweaver CS4. Captulo 11. Multimedia

299


Para probar el hipervnculo que acabamos de crear, abrimos el navegador pulsando la tecla
F12.
Al hacer clic en dicho hipervnculo, se abrir el reproductor de sonido que tenga asociado el
navegador para este tipo de archivos. Por ejemplo, si es un archivo de tipo Windows Media
(con extensin WMA), se abrir el Windows Media Player para reproducirlo (en cada
navegador es posible configurar que reproductor se utilizar para abrir cada archivo de
sonido).

Figura 11.18. Inspector de propiedades HTML de un hipervnculo a un sonido.
Por ltimo, comentar que es recomendable guardar los archivos de sonido que vincularemos
en nuestra pgina en el interior de la carpeta Activos dentro de la raz de nuestro sitio y,
posteriormente crear los enlaces oportunos a cada uno de estos sonidos.
Incrustar archivos de sonido
Adems del mtodo explicado en el apartado anterior existe otra forma de aadir sonido a
nuestra pgina Web: incrustarlo en la propia pgina.
De esta forma el sonido se reproducir siempre que se muestre la pgina, con el condicionante
de que un usuario lo escuchar correctamente slo si tiene instalado el plug-in adecuado para
ello.
Al insertar sonido de esta forma en la pgina, podremos especificar ms en detalle las
propiedades que debe tener en cuanto a duracin del sonido, puntos de inicio y fin del mismo,
el volumen al que se debe escuchar,
Para insertar un sonido de esta forma elegimos el lugar de la pgina donde lo queremos
insertar y hacemos clic en la barra Insertar, dentro de la categora Comn y dentro de ella en
el botn Media. Se despliega un listado en el que elegimos la opcin Plugin . Tambin es
posible insertar un sonido utilizando los mens de la aplicacin Insertar>Media>Plug-in.
Dreamweaver CS4. Captulo 11. Multimedia

300


Figura 11.19. Ejecutar Insertar Plug-in.
En el cuadro de dilogo Seleccionar archivo que se abre, seleccionamos el fichero de audio
que queremos incrustar y pulsamos Aceptar.
Una vez llevada a cabo esta operacin, el sonido incrustado en la pgina mostrar el siguiente
aspecto en la ventana del documento:

Figura 11.20. Aspecto del archivo de sonido incrustado en la ventana del documento.

Dreamweaver CS4. Captulo 11. Multimedia

301

Para seleccionar y editar el archivo de sonido podemos seleccionarlo y recurrir al Inspector de
Propiedades.

Figura 11.21. Inspector de Propiedades de un audio incrustado.
En este Inspector de Propiedades es posible modificar los siguientes datos:
Plug-in: nombre que se le asignar al archivo de sonido que acabamos de insertar dentro de
la pgina Web.
An y Al: anchura y altura respectivamente de los controles de audio que se mostrarn en el
navegador a la hora de reproducirse el sonido.
Origen: en este campo deberemos seleccionar el archivo de audio que insertaremos en la
pgina. Haciendo clic en el botn aparecer el cuadro de dilogo para seleccionar el
archivo correspondiente de entre los que se encuentren en nuestro disco duro. Tambin es
posible rellenar y modificar este campo manualmente, slo se debe indicar la ruta completa al
archivo que queramos incrustar.
URL plg: este campo se utiliza para especificar la ruta completa desde donde se puede
descargar el plug-in adecuado para escuchar el sonido vinculado correctamente.
Alinear: especifica cul va a ser la alineacin del objeto en la pgina (tal y como se especific
en el captulo dedicado a las imgenes).
Clase: si deseamos aplicar algn formato de presentacin basado en una hoja de estilo, ste
es el campo indicado para ello.
Reproducir: si hacemos clic en este botn podremos probar el sonido que acabamos de
insertar.
Espacio V: (espacio vertical) nmero de pxeles de espacio en blanco que habr por encima y
por debajo del plug-in.
Espacio H: (espacio horizontal) nmero de pxeles de espacio a la derecha y a la izquierda del
plug-in.
Borde: se utiliza para indicar el ancho del borde alrededor del plug-in.
Parmetros: esta opcin muestra un cuadro de dilogo en el cual podremos indicar los
parmetros para pasar al plug-in. Haciendo clic en el botn aadimos parmetros y,
haciendo clic en los borramos. Adems para cada parmetro se debe especificar un
Dreamweaver CS4. Captulo 11. Multimedia

302

nombre y un valor. Los parmetros se pueden considerar atributos que definirn el
comportamiento de la reproduccin del archivo de sonido.

Figura 11.22. Parmetros de un archivo de sonido incrustado.

Ejercicio

El objetivo de este ejercicio ser incrustar un archivo de sonido de fondo en nuestra pgina
Web, de forma que cuando el usuario visite nuestra pgina comenzar a escuchar la msica
que nosotros hayamos insertado.

Antes de comenzar, debers ir a la carpeta Ejercicios del Captulo 11 del Material
necesario para ejercicios de Materiales de apoyo que est en el aula virtual del curso y
copiar a la carpeta Elementos de tu sitio MiWeb un archivo de sonido .midi llamado
primaver.

Ahora abre el documento html que habas creado en el ejercicio anterior y guardado con el
nombre multimedia1.

Sita el cursor debajo del objeto SWF que habas insertado antes, y a continuacin
selecciona la opcin Plug-in desde la categora Comn del panel Insertar.

En el cuadro de dilogo Seleccionar archivo que se abre, localiza y selecciona el archivo de
sonido midi llamado primaver que habas guardado en tu equipo, y por ltimo pulsa
Aceptar.

Dreamweaver CS4. Captulo 11. Multimedia

303



Figura 11.23. Cuadro de dilogo Seleccionar Archivo.

Una vez seleccionado dicho archivo, el aspecto que mostrar la pgina en Dreamweaver ser la
siguiente:



Figura 11.24. Archivo de sonido incrustado en nuestra pgina multimedia1.


Desde el Inspector de Propiedades, asigna las siguiente opciones:
Dreamweaver CS4. Captulo 11. Multimedia

304

o Plugin: (nombre del objeto insertado) sonido.
o An y Al (anchura y altura): 350 y 50 pxeles respectivamente.
o Espacio V y Espacio H: 10 pxeles en ambo casos.
o Origen: aqu deber aparecer indicada la ruta hacia el archivo de sonido que acabamos
de incrustar, que en nuestro ejercicio, si lo hemos hecho todo siguiendo las
indicaciones propuestas ser Elementos/primaver.MID.
o Borde: 1 pxel

El resto de parmetros los dejamos sin modificar.



Figura 11.25. Inspector de propiedades del archivo de sonido incrustado en nuestro ejercicio.

Guarda los cambios (Archivo>Guardar) y comprueba el funcionamiento de la pgina Web
en diferentes navegadores.


11.3. Archivos de vdeo
Al insertar un archivo de vdeo debemos tener en cuenta dos premisas fundamentales: el
vdeo debe tener una calidad aceptable y, adems, su tamao no debe ser excesivamente
grande.
Adems de los FLV que hemos visto anteriormente como objetos de vdeo Flash, de entre los
formatos de vdeo ms conocidos y utilizados destacan los siguientes:
Archivos con extensin AVI: es el formato habitual de los archivos de vdeo en Windows, de
ah que sean muy conocidos.
Archivos con formato MPEG: archivos con formato comprimido de tamao reducido.
Archivos RealVideo: archivos que permiten ser reproducidos en tiempo real a la vez que son
descargados. Para su correcta reproduccin es necesario tener instalado el programa
RealPlayer.
Archivos MOV: otro formato de vdeo que necesita el programa QuickTime para
reproducirse.
Insertar un vdeo
Para insertar un vdeo vamos a la barra Insertar y dentro de la categora Comn desplegamos
la opcin Media. Al hacer esto se despliega un listado en el que elegimos la opcin Plug-in ,
tal y como hemos visto para los archivos de sonido.
Dreamweaver CS4. Captulo 11. Multimedia

305

Tambin podemos ejecutar Insertar>Media>Plug-in. En cualquier caso el aspecto del
documento activo en el que estamos trabajando es el mismo que para la adicin de sonido.
El aspecto del Inspector de Propiedades y, por tanto, las propiedades a especificar son las
mismas que para los archivos de sonido, con dos particularidades:
Lgicamente, en este caso en el campo Origen debemos especificar un archivo de vdeo y no
uno de audio. El proceso para seleccionarlo es igual al mencionado para los archivos de audio.
A la hora de especificar la anchura y la altura (en los campos An y Al) con la que se mostrar
el vdeo, sera bueno conocer a priori el formato original en el que se encuentra dicho fichero
(en cuanto a tamao nos referimos), de forma que a la hora de mostrarlo no aparezca
distorsionado.
Podemos comprobar cmo se visualiza un vdeo que hayamos insertado pulsando la tecla F12.
Al hacer esto se abrir el navegador predeterminado y podremos comprobar el resultado de
nuestra operacin.
11.4. Otros objetos multimedia
Adems de todos los objetos que hemos visto en el captulo, Dreamweaver permite tambin
insertar objetos de Shockwave, applets de Java y controles Activex. El proceso para insertar
cualquiera de estos objetos es idntico a los vistos para el resto; podemos ejecutar
Insertar>Media y seleccionar el tipo de objeto a insertar en nuestra pgina,

Figura 11.26. Insertar diferentes objetos multimedia.
O pulsar en el icono correspondiente al medio a insertar desde la categora Comn del panel
Insertar, desplegando Media:
Dreamweaver CS4. Captulo 11. Multimedia

306


Figura 11.27. Insertar Media desde la categora Comn de la barra Insertar.
Se abrir el cuadro Seleccionar archivo que nos permitir localizar el objeto a insertar en
nuestro equipo, y una vez pulsemos Aceptar podremos tambin configurar los atributos de
accesibilidad del objeto multimedia.
Una vez insertado el objeto, al igual que en el caso de los vistos anteriormente, podremos
seleccionarlo y modificar sus propiedades desde el inspector, como por ejemplo el archivo de
origen, las dimensiones y otros parmetros y atributos de cada objeto.



307















Captulo 12.
Plantillas y Biblioteca



Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca

308

Captulo 12. PLANTILLAS Y BIBLIOTECA
12.1. Plantillas
Cuando comenzamos a disear un sitio web compuesto por mltiples pginas, normalmente
diseamos la primera y, a continuacin, hacemos una copia de sta para que nos sirva como
base para disear el resto, simplemente modificando lo que difieren unas de otras pero
manteniendo el aspecto general del sitio.
Bsicamente sta va a ser la idea de las plantillas. Una plantilla de Dreamweaver es un tipo de
documento especial en el cual vamos a poder basar todas las pginas HTML que van a
componer nuestro sitio web.
A la hora de crear una plantilla disearemos la disposicin de la pgina y dentro de ella
incluiremos regiones editables para los documentos que, posteriormente, basaremos en esta
plantilla. Nosotros mismos controlaremos las regiones que sern editables y las que no.
Una de las ventajas fundamentales de la utilizacin de plantillas es la posibilidad que tenemos
de actualizar todo el sitio basado en plantillas de una sola vez. Si modificamos un aspecto de
diseo de una plantilla automticamente podemos actualizar todos los documentos que estn
basados en ella.

OBSERVACIN. Las plantillas tienen la extensin .dwt y se almacenan en el directorio
Templates dentro de la carpeta raz local del sitio.


Crear una plantilla
Podemos crear una plantilla desde cero o bien utilizando un documento ya existente como
base para crearla.
Para crear una plantilla desde el inicio podemos hacerlo utilizando el panel Activos
. Para activar dicho panel hay que hacer clic en la opcin del men
Ventana>Activos.
Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca

309


Figura 12.1. Ventana>Activos.
Hay que tener en cuenta que para poder utilizar este panel deberemos haber creado
previamente un sitio (tal y como hemos visto en el captulo 3), para posteriormente definir
plantillas dentro de dicho sitio.
Una vez que se nos muestra este panel, hacemos clic en el botn Plantillas para mostrar
el apartado dedicado a las pmismas. El aspecto que tendra este panel sera:

Figura 12.2. Seccin Plantillas del panel Activos.
Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca

310

En la parte inferior del panel Activos aparecen varios botones que nos van a
permitir:
Dar de alta una nueva plantilla .
Editar una plantilla ya existente .
Borrar una plantilla creada .
Actualizar la lista de plantillas del sitio .
Aplicar todos los cambios realizados .
Si al comenzar a definir plantillas para nuestro sitio, el botn de alta de una nueva plantilla no
est activo, la podemos crear haciendo clic con el botn derecho del ratn sobre el panel
Activos y eligiendo la opcin Nueva Plantilla en el men contextual que aparece.

Figura 12.3. Crear una plantilla nueva.
Una vez creada la nueva plantilla se nos pedir que introduzcamos un nombre para la misma.
Tras hacer esto, se almacenar en la carpeta Templates, dentro de la raz de nuestro sitio con
dicho nombre y la extensin .dwt (Dreamweaver crear automticamente esta carpeta la
primera vez que se almacene un archivo con extensin de plantillas).
Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca

311


Figura 12.4. Nombre de nueva plantilla.
El siguiente paso, tal y como se indica en el panel Activos ser editar la plantilla, aadirle
contenido y marcar algunas regiones como editables mediante el men Modificar.
Tambin podemos crear una plantilla sin utilizar el panel Activos. En este caso dispondramos
de dos caminos para llevar a cabo esta tarea:
Si deseamos utilizar un archivo ya existente como plantilla, simplemente lo abrimos a travs
del men Archivo>Abrir, seleccionndolo desde nuestro sistema local de archivos.
Si queremos crear una plantilla a partir de un documento nuevo, elegimos la opcin
Archivo>Nuevo y elegimos Plantilla en blanco en el cuadro de dilogo Nuevo Documento que
aparece; en la columna Tipo de plantilla, Plantilla HTML.
Una vez que ya tenemos el documento que nos servir como plantilla procedemos a guardarlo
como tal, mediante el men Archivo>Guardar como plantilla.
Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca

312


Figura 12.5. Guardar como plantilla.
Al hacer esto nos aparecer un cuadro de dilogo en el cual podremos especificar los
siguientes datos:
Sitio: lista desplegable en la que podemos seleccionar el sitio donde almacenaremos la
plantilla.
Plantillas existentes: plantillas existentes en el sitio seleccionado en la lista anterior.
Descripcin: para insertar un breve apunte sobre la plantilla.
Guardar como: nombre asignado a la plantilla que vamos a guardar.

Figura 12.6. Cuadro de dilogo Guardar como plantilla.
Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca

313

Una vez rellenados los campos y tras pulsar el botn Guardar nuestra plantilla quedar
almacenada en la carpeta Templates en la raz del sitio que hayamos escogido y con la
extensin .dwt.
12.2. Regiones editables en plantillas
Aadir una regin editable
De forma predeterminada todos los elementos de una plantilla se encuentran bloqueados, es
decir, no se pueden modificar. Mediante la creacin de regiones editables es posible
especificar elementos que s pueden ser modificados en aquellas pginas que se basen en esta
plantilla.
Podemos crear una regin editable en una plantilla existente de dos formas distintas:
Haciendo clic con el botn derecho del ratn en el interior de la plantilla que estamos
creando y eligiendo la opcin correspondiente en el men contextual que aparece.

Figura 12.7. Crear nueva regin editable en una plantilla.
Eligiendo la opcin correspondiente dentro del men Insertar>Objetos de plantilla>Regin
editable o bien utilizando la combinacin de teclas Ctrl+Alt+V.
Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca

314


Figura 12.8. Crear nueva regin editable desde el men Insertar.
Una vez elegida esta opcin aparecer el cuadro Nueva regin editable, en el cual podremos
indicar el nombre que le queramos dar a la regin editable que estamos creando:

Figura 12.9. Cuadro Nueva regin editable.
Tras darle un nombre a la regin editable que acabamos de crear, el aspecto que presenta
dicha regin dentro de la plantilla es el siguiente (suponiendo que el nombre que le hemos
dado a la regin editable es FormularioEnvio):
Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca

315


Figura 12.10. Aspecto y nombre de regin editable.
Como se observa, el nombre de la regin editable aparece enmarcado en un recuadro de color
turquesa (aunque este color es configurable en las preferencias). Debajo de dicho recuadro
aparece otro en el cual podremos aadir todos los objetos que queramos, siendo dichos
objetos modificables en las pginas que utilicen esta plantilla. Los objetos que se encuentren
fuera de esta regin editable tambin aparecern en dichas pginas pero no podrn ser
modificados.
El nombre asignado podemos modificarlo dentro del Inspector de Propiedades
correspondiente a la regin editable.

Figura 12.11. Inspector de Propiedades de regin editable.

Eliminar una regin editable
Si deseamos que una regin editable deje de serlo y queremos bloquearla para que no pueda
modificarse en las pginas que utilizan la plantilla, debemos seguir los siguientes pasos:
Seleccionamos la regin editable que deseamos modificar, haciendo clic en el recuadro que
la identifica.
A continuacin seleccionamos la opcin del men Modificar>Plantillas>Quitar formato de
plantilla.
Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca

316


Figura 12.12. Modificar>Plantillas>Quitar formato de plantilla.
12.3. Trabajar con plantillas
Aplicar plantillas a un documento nuevo
Para aplicar una plantilla a un documento nuevo, slo tenemos que crear el documento nuevo
(por ejemplo una pgina bsica HTML, como ya hemos visto en otros apartados) y, a
continuacin, hacer clic en la opcin del men Modificar>Plantillas>Aplicar plantilla a pgina.

Figura 12.13. Aplicar plantilla a un documento HTML.
Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca

317

Despus de haber seleccionado esta opcin aparecer el cuadro Seleccionar plantilla, que nos
muestra un listado de todos los sitios disponibles y de las plantillas de las que se compone
cada uno de estos sitios. Para elegir una plantilla basta con hacer clic con el ratn sobre el
nombre de la misma.
En este mismo cuadro si seleccionamos la opcin Actualizar pgina cuando cambie la plantilla,
en el momento en que la plantilla se modifique, se actualizar automticamente la pgina.

Figura 12. 14. Cuadro Seleccionar plantilla.
Una vez elegida la plantilla en la que se va a basar nuestra pgina, hacemos clic en el botn
Seleccionar y automticamente la plantilla queda aplicada. En dicha pgina podremos
modificar nicamente aquellos elementos situados dentro de la regin editable de la plantilla.

Figura 12.15. Documento HTML basado en una plantilla.

OBSERVACIN. Una nota situada a la derecha del documento actual nos mostrar en todo
momento el nombre de la plantilla que se est utilizando para construir la pgina.


Tambin existe la posibilidad de crear un documento nuevo desde una plantilla ya existente;
para ello ejecutamos la opcin de men Archivo>Nuevo, seleccionamos Pgina de Plantilla y
Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca

318

la plantilla del sitio a utilizar, para despus pulsar Crear. Se genera un nuevo documento
basado en esa plantilla.

Figura 12.16. Crear nuevo documento basado en una plantilla.

Aplicar plantillas a un documento existente
De forma similar a lo que hacamos con un documento nuevo a la hora de aplicarle una
plantilla, tambin es posible llevar a cabo esta operacin en un documento ya existente.
En este caso y una vez abierto el documento los pasos a seguir son los mismos que en el caso
anterior, hacemos clic en el men Modificar > Plantillas > Aplicar plantilla a pgina y en la
ventana que se abre, seleccionamos la plantilla a aplicar.
Es posible que en el documento exista algn contenido que no pueda ser aplicado
directamente a alguna regin editable de la plantilla. En ese caso aparecer un cuadro con el
ttulo Nombres de regiones no coincidentes para que asignemos manualmente dicho
contenido a las regiones editables existentes en la plantilla.
Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca

319


Figura 12.17. Cuadro Nombres de regiones no coincidentes.
En este cuadro nos encontraremos lo siguiente:
Una ventana central con un listado de todos los elementos que no pueden asignarse
automticamente a una regin editable.
Una lista desplegable con todas las regiones editables pertenecientes a la plantilla actual. En
esta lista aparecen las siguientes opciones :
No resuelto: opcin predeterminada que indica que se est a la espera de resolver el
problema.
Ningn lugar: elimina el contenido del documento actual.
Doctitle: coloca el elemento en la regin de ttulo del documento actual.
Head: para colocar el elemento en la seccin de cabecera del documento.
Regiones editables: las regiones editables pertenecientes a la plantilla tambin
aparecen en este listado para poder asignar elementos a dichas regiones.
Para asignar un elemento a una regin editable, hacemos clic en el elemento dentro de la
ventana central y seleccionamos la regin donde lo queremos alojar.
Si despus de seleccionar una regin editable hacemos clic en el botn Utilizar para todo,
dicha regin ser asignada automticamente a todos los elementos que estn causando
conflictos.
Por ltimo hacemos clic en el botn Aceptar para aplicar los cambios.
Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca

320

Separar un documento de una plantilla
Si en un momento dado deseamos eliminar la correspondencia entre una pgina HTML y la
plantilla en la que se basa, simplemente debemos elegir la opcin de men
Modificar>Plantillas>Separar de plantilla y automticamente la pgina dejar de estar
asociada a la plantilla.

Figura 12.18. Separar documento HTML de la plantilla en la que est basado.
12.4. Otras operaciones con plantillas
Editar plantillas
Una vez generada una plantilla es posible que necesitemos modificarla para adecuarla a
nuestras necesidades cambiantes al disear un sitio web. Para realizarlo desde el panel Activos
hacemos clic en el botn Plantillas .
Aparecern todas las plantillas, seleccionamos aquella que queremos modificar haciendo clic
en el nombre de la misma y, a continuacin, hacemos clic en el botn Editar .
El siguiente paso es llevar a cabo los cambios deseados en la plantilla y como ltimo paso
acceder a la opcin del men Archivo>Guardar como plantilla... y desde el cuadro Guardar
como plantilla que aparece escribir el nombre indicado para la plantilla y hacer clic en el
botn Guardar.

Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca

321

Borrar plantillas
Una vez que dejamos de necesitar ciertas plantillas es conveniente eliminarlas para no ocupar
espacio innecesario en memoria.
Desde el panel Activos hacemos clic en el botn Plantillas , seleccionamos la plantilla que
deseamos borrar haciendo clic sobre el nombre de la misma y, por ltimo, hacemos clic en el
botn Borrar . Al hacer esto ltimo aparecer un cuadro de dilogo pidindonos que
confirmemos el borrado. Si hacemos clic en el botn S la plantilla se borrar.

Figura 12.19. Confirmar borrado de plantilla.
Actualizacin de plantillas
Una vez que se ha asignado una plantilla a un documento, si realizamos algn cambio en la
plantilla original, al guardar estos cambios aparecer el cuadro Actualizar archivos de
plantilla, indicndonos si deseamos actualizar las plantillas de esos documentos.

Figura 12.20. Cuadro Actualizar archivos de plantilla.
Si hacemos clic en la opcin Actualizar aparecer un nuevo cuadro llamado Actualizar pginas.
Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca

322


Figura 12.21. Cuadro Actualizar pginas.
Dentro de este cuadro podemos modificar:
En la opcin Buscar en es posible escoger una de entre tres opciones
disponibles:
Arch. que usan: al elegir esta opcin aparece un men emergente para que
seleccionemos una plantilla. Con esto haremos que todas las pginas que utilicen dicha
plantilla se actualicen.
Arch. Seleccionados: al elegir esta opcin aparecen al lado los archivos seleccionados
que pueden actualizarse.
Todo el sitio: si seleccionamos esta opcin aparecer otra lista desplegable al lado con
todos los sitios disponibles. Al elegir uno de los sitios y hacer clic en el botn Iniciar,
se actualizarn todas las pginas de ese sitio con los cambios sufridos en sus plantillas
correspondientes.
Actualizar: en este apartado es posible indicar si al realizarse la actualizacin deseamos que
se actualicen tanto los elementos de biblioteca como las plantillas.
Mostrar registro: si queremos ver los resultados paso a paso de las actualizaciones de las
pginas necesitamos tener activada esta opcin.
Tambin es posible actualizar las pginas que dependen de una plantilla modificada a travs de
los mens de la aplicacin:
Si elegimos la opcin Modificar>Plantillas>Actualizar pgina actual se actualizar
nicamente la pgina HTML en la que nos encontramos.
Si por el contrario escogemos la opcin Modificar>Plantillas>Actualizar pginas... aparecer
el cuadro anterior donde podremos escoger entre las diferentes opciones disponibles de
actualizacin.


Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca

323


Ejercicio

El objetivo de este ejercicio ser crear una primera plantilla que nos servir como base para
utilizarla aplicndola a diferentes pginas HTML.

En primer lugar activa el Panel Activos (Ventana>Activos) para poder trabajar ms
cmodamente con las plantillas.

A continuacin, en la pestaa Activos del panel, selecciona Plantillas pulsando en el botn
situado a la izquierda del mismo. Despus pulsa el botn para crear una nueva
plantilla y dale el nombre de principal.



Figura 12.22. Crear plantilla nueva llamada principal.

Haz doble clic sobre el nombre de la plantilla (principal.dwt) para poder editarla, o pulsa el
botn Editar del panel Activos.

Inserta en ella una imagen cualquiera en la parte superior, por ejemplo la imagen gente.jpg
que utilizaste en un ejercicio anterior, a travs del men Insertar>Imagen.

Debajo de la imagen inserta el texto: Mi primera plantilla para el Aula Mentor, con un
tamao cualquiera y con el color #00CC00. Adems alinea dicho texto en el centro de la pgina
HTML.
Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca

324


Debajo de dicho texto y dejando un espacio entre ambos inserta otro texto: Final de la
plantilla, con las mismas caractersticas en cuanto a formato que hayas utilizado en el anterior.

Por ltimo, entre ambos textos vas a aadir una regin editable (Insertar > Objetos de
plantilla > Regin editable) a la que llamars region1, la cual debe quedar centrada en la
pgina.

Guarda los cambios efectuados a la plantilla principal.dwt. Observa que obtienes un
resultado parecido al siguiente en la ventana del documento en Dreamweaver.



Figura 12.23. Aspecto de la plantilla principal.dwt modificada.

Ahora crea un nuevo documento HTML desde Archivo>Nuevo y aplcale la plantilla
principal.dwt ejecutando el men Modificar> Plantillas > Aplicar plantilla a pgina.

En el cuadro que aparece seleccionas la plantilla principal. Haz clic en el botn Seleccionar
para aplicar la plantilla a la pgina HTML.



Figura 12.24. Seleccionar plantilla principal.

En la regin editable inserta una tabla de tres filas y dos columnas (Insertar > Tabla). En el
Inspector de Propiedades de la tabla le indicas adems en el campo Alinear el valor Centro
para que la tabla quede centrada en la pgina web.


RECOMENDACIN. Para insertar un elemento en una regin editable basta con hacer clic en
su interior e insertar dicho elemento.

Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca

325


En la primera columna de la tabla inserta los siguientes valores para cada una de las tres filas:
Alumno, Profesor y Curso, dejando todos los parmetros de estos textos a sus valores
predeterminados, con lo que no tienes que modificar nada.

En la segunda columna y para cada una de las tres filas inserta un campo de texto de
formulario, haciendo clic en el botn , dentro de la barra Insertar, en su categora
Formularios. En la ID de cada campo, asigna los nombres campo1, campo2 y campo3
respectivamente.



Figura 12.25. Regin editable modificada en documento activo.

Una vez finalizada esta operacin guarda los cambios efectuados con el nombre
plantilla1.html.


12.5. Biblioteca
Se denominan activos a los diferentes elementos que pueden almacenarse en un sitio, como
por ejemplo archivos de imagen, vdeos,...
Una biblioteca no es ms que un conjunto de estos activos que pueden ser utilizados en las
distintas web que creemos. Por ejemplo, si un trozo de cdigo de una pgina HTML (una tabla,
una imagen, un pie de pgina,...) se va a repetir en todos los documentos de nuestro sitio web,
puede ser interesante almacenarlo en la biblioteca, de forma que pueda volver a utilizarse.
Estos elementos pueden aadirse a las pginas web de un sitio desde el panel de bibliotecas
mediante la sencilla accin de arrastrarlos y soltarlos en ellas.
Una de las ventajas del uso de activos almacenados en una biblioteca es que, al modificar
dicho activo todas aquellas pginas que lo contienen pueden actualizarse.
Al insertar un elemento de biblioteca en una pgina, realmente no se inserta dicho elemento
en s, sino que lo que se inserta es un vnculo o una instancia de ese elemento, de forma que si
dicho elemento sufre algn tipo de modificacin dicha instancia se actualiza tambin de forma
inmediata.
Dreamweaver almacena los elementos de biblioteca en la carpeta Library dentro de la raz del
sitio con la extensin .lbi.
La utilizacin de elementos de biblioteca se ve mejor en el siguiente ejemplo:
Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca

326

Supongamos que en todas las pginas de un sitio web debe aparecer siempre un logotipo
corporativo, sin embargo ste an no ha sido finalizado por el diseador en cuestin,
podemos crear un elemento de biblioteca con esta imagen y aadirlo en todas las pginas.
Cuando el logotipo est finalizado se actualizar el objeto y por tanto, se actualizarn todas las
pginas del sitio en las que lo hayamos incluido (sin necesidad de ir una por una actualizando
el logotipo).

RECOMENDACIN. Para aadir un elemento de biblioteca no hace falta ningn plug-in
especial, simplemente stos harn falta cuando por su propia naturaleza el objeto lo requiera:
archivos de sonido, vdeo,


Crear un elemento de biblioteca
Como hemos dicho los elementos de biblioteca no son ms que trozos de cdigo de HTML de
una pgina que deseamos almacenar de forma que puedan ser reutilizados en otras pginas
del mismo sitio.
Para manejar los elementos de biblioteca en el entorno de Dreamweaver necesitamos tener
activada la opcin Biblioteca. Activamos la pestaa Biblioteca en el panel Activos, haciendo
clic en el botn correspondiente .
Para almacenar un trozo de cdigo HTML como elemento de biblioteca, slo hay que realizar
una de estas acciones:
Seleccionamos el trozo de cdigo a aadir y hacemos clic en el botn de Nuevo elemento
de biblioteca situado en la parte inferior de la pestaa actual.

Figura 12.26. Panel Biblioteca.
Seleccionamos el elemento a aadir y hacemos clic en la opcin de men
Modificar>Biblioteca>Aadir objeto a Biblioteca. Hasta que no seleccionemos el objeto a
aadir esta opcin no estar disponible.
Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca

327


Figura 12.27. Agregar objeto a biblioteca.
En cualquier caso, ser necesario darle un nombre al nuevo elemento, que podremos asignarle
en el propio panel de Biblioteca, pulsando Intro una vez que tecleemos dicho nombre. En ese
mismo panel tambin podemos observar la ruta en la que nuestro elemento de biblioteca se
guarda dentro de nuestro sitio.

Figura 12.28. Nuevo elemento de biblioteca en panel.

Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca

328

Si cambiamos cualquier elemento de biblioteca, Dreamweaver nos avisar si deseamos hacer
los pertinentes cambios en aquellos documentos que usen esos elementos, mediante el
siguiente mensaje:

Figura 12.29. Aviso de actualizacin de documentos.
Editar un elemento de biblioteca
Si una vez creado un elemento de biblioteca necesitamos posteriormente editarlo y modificar
alguna de sus caractersticas, podemos seguir los siguientes pasos:
Seleccionamos el elemento haciendo clic en su nombre dentro de la pestaa Biblioteca en
el panel Activos.
A continuacin podemos modificarlo haciendo doble clic con el ratn en el nombre del
elemento o bien, haciendo clic en el botn Editar .
Una vez realizados los cambios oportunos los grabamos mediante el men Archivo>Guardar.
A continuacin es posible a travs de los mens:
Actualizar en el documento actual en el que nos encontramos los cambios originados en el
objeto de biblioteca mediante Modificar>Biblioteca>Actualizar pgina actual.
Actualizar todas las pginas del sitio en las que se incluye este objeto:
Modificar>Biblioteca>Actualizar pginas... Al hacer esto aparecer un cuadro de dilogo con
el ttulo Actualizar pginas que, de forma similar a como ocurra con las plantillas, nos permite
actualizar todas las pginas del sitio.
Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca

329


Figura 12.30. Actualizar elementos de biblioteca.
12.6. Otras operaciones con elementos de biblioteca
Cambiar el nombre a un elemento de biblioteca
Para cambiarle el nombre slo hay que seleccionar el elemento en la pestaa Biblioteca del
panel Activos y despus hacer clic con el ratn sobre el nombre del elemento para editarlo. En
ese momento podemos introducir el nuevo nombre deseado para el elemento de biblioteca.
Borrar un elemento de biblioteca
Para borrar un elemento de biblioteca lo seleccionamos como siempre en la pestaa
Biblioteca del panel Activos y, a continuacin, hacemos clic en el botn Borrar o bien
pulsamos la tecla Supr. Dreamweaver nos pedir confirmacin acerca del elemento a borrar. Si
confirmamos, el elemento de biblioteca ser suprimido.
Copiar un elemento de biblioteca
Por ltimo y tambin como una operacin relativa a los elementos de biblioteca cabe destacar
la posibilidad que se nos ofrece de copiar elementos de un sitio web a otro.
Para ello, slo hay que seleccionar el elemento como ya hemos visto en apartados anteriores y
haciendo clic con el botn derecho del ratn aparecer un men contextual en el cual
Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca

330

mediante Copiar en el sitio podremos copiar el
elemento en cuestin en cualquier otro sitio web que tengamos definido (el sitio web actual
de forma predeterminada aparece desactivado).
Aadir un elemento de biblioteca a una pgina
Como hemos mencionado con anterioridad al insertar un elemento de biblioteca en un
documento no se inserta el elemento en s: se inserta su contenido y una referencia al propio
elemento.
Para aadir un elemento de biblioteca, basta con que sigamos uno de estos caminos:
Desde la pestaa Biblioteca dentro del panel de Activos, seleccionamos el elemento a
aadir y lo arrastramos con el botn izquierdo del ratn hacia el punto exacto del documento
donde lo queramos insertar.
Tambin es posible insertarlo, seleccionando el elemento y haciendo clic en el botn
Insertar situado en la parte inferior de la pestaa Biblioteca.

Figura 12.31. Propiedades de un elemento de biblioteca insertado en un documento activo.
A la hora de aadir un elemento de biblioteca a un documento an tenemos una posibilidad
ms y es aadir el contenido pero no el vnculo a dicho elemento (de esta forma es posible
modificar este contenido en la propia pgina, pero si actualizamos ese elemento de biblioteca
el contenido dentro de esta pgina no se actualizar al no poseer el vnculo).
Dreamweaver CS4. Captulo 12. Plantillas y Biblioteca

331

Para realizar esta tarea, con la tecla Ctrl presionada arrastramos el elemento de biblioteca al
punto del documento donde lo queramos insertar.

Ejercicio

El objetivo de este ejercicio ser crear desde una nueva pgina un elemento de biblioteca y
posteriormente editarlo para modificar sus propiedades. A continuacin aadiremos ese
elemento de la biblioteca a otra nueva pgina.

Para empezar, crea una pgina bsica de HTML (Archivo>Nuevo).
Activa el apartado Biblioteca haciendo clic en el botn , dentro del panel Activos.

Inserta en el documento la imagen escudo-ministerio.gif que ya has usado en un ejercicio
anterior, y a su derecha el texto Ejercicio de bibliotecas para el Aula Mentor.

Selecciona ambos elementos y haciendo clic con el botn izquierdo del ratn sobre ellos y
mantenindolo pulsado arrastra ambos elementos hacia el panel lateral Activos dentro de
su seccin Biblioteca. Se pedir un nombre al elemento de biblioteca que ests creando,
indica el nombre: titulo_mentor.

Guarda la pgina con el nombre biblioteca1 (Archivo>Guardar como...). Comprueba el
resultado en el navegador.

A continuacin haz doble clic sobre el elemento de biblioteca titulo_mentor en el panel
Activos. Se abrir un cuadro con su contenido para poder modificarlo. Selecciona el texto
y cambia sus propiedades a Tamao 24 pxeles, Estilo negrita y color #FF6600. Guarda los
cambios al elemento de biblioteca titulo_mentor.


RECOMENDACIN. Al modificar un elemento de la Biblioteca, Dreamweaver pedir
confirmacin para actualizar este elemento en las pginas donde se haya insertado.
Con hacer clic en Actualizar se harn efectivos todos los cambios.


Crea otra pgina bsica HTML e inserta el elemento de biblioteca modificado
anteriormente (titulo_mentor). Para ello slo tienes que arrastrarlo con el botn
izquierdo del ratn desde el panel Activos, seccin Biblioteca, hasta la posicin donde lo
quieras colocar dentro de la pgina web.

Guarda la nueva pgina con el nombre biblioteca2 (Archivo>Guardar como...).
Comprueba el resultado en el navegador.




332















Captulo 13.
Comportamientos


Dreamweaver CS4. Captulo 13. Comportamientos
333

Captulo 13. COMPORTAMIENTOS
Los comportamientos son acciones que ocurren como respuesta a eventos producidos sobre
algunos elementos por parte de los usuarios, como por ejemplo: validar un formulario cuando
el usuario hace clic sobre un determinado botn, resaltar un texto o el color de fondo de un
botn cuando el usuario pasa el ratn sobre ellos, hacer clic en un mapa de imgenes,...
Los eventos son procedimientos asociados a un elemento que genera algn tipo de suceso
provocando la ejecucin de una accin. La recarga de la pgina, cada cierto tiempo, que est
visitando un usuario la pgina, pasar el ratn por un objeto de la pgina, son ejemplos de
eventos.
En Dreamweaver los comportamientos aaden cdigo escrito en un lenguaje de programacin
denominado Javascript a la pgina HTML, que es el que permitir que los visitantes de una
pgina Web interacten con ella.
13.1. Insertar comportamientos
Es posible vincular un comportamiento a un documento HTML completo, o bien, a un
elemento particular como por ejemplo un vnculo, una imagen, un mapa de imgenes, un
elemento de formulario,
Para cada uno de los comportamientos resultante de un evento es posible especificar ms de
una accin.
Para aplicar un comportamiento, independientemente del elemento al cual lo queramos
vincular, debemos seguir una serie de pasos:
Seleccionar el elemento HTML al cual aplicaremos el comportamiento. Si queremos aplicar
un comportamiento a todo un documento HTML debemos indicarlo haciendo clic con el ratn
en la etiqueta <body> del selector de etiquetas situado en la parte inferior de la ventana del
documento.
A continuacin activamos el Panel Comportamientos si no est ya activado, mediante el
men Ventana>Comportamientos. Tambin es posible activar dicho panel mediante la
combinacin de teclas Mays+F4.

Figura 13.1. Panel Comportamientos.
Dreamweaver CS4. Captulo 13. Comportamientos

334


Figura 13.2. Men Ventana>Comportamientos.

A continuacin hacemos clic en el botn Aadir comportamiento del
Panel Comportamientos. Al hacerlo aparecer un men emergente con diferentes acciones,
de entre las cuales deberemos elegir una.
Algunas de estas acciones aparecern en un tono ms claro que el resto; esto se debe a que en
este momento no existen los elementos adecuados en la pgina que estamos diseando para
aplicar dichas acciones y, por tanto, no estn activas.

Figura 13.3. Men de acciones.
Dreamweaver CS4. Captulo 13. Comportamientos

335

En este men aparecen adems de las acciones dos entradas de men que merecen ser
detalladas:
Mostrar eventos para: esta opcin nos permitir especificar los eventos que queremos
mostrar, en funcin del navegador que elijamos de la lista desplegable que aparece al
seleccionarla. Esto es debido a que algunos eventos no son compatibles con todos los
navegadores por lo que habr que especificar para qu navegador queremos mostrar la
lista de eventos.



Figura 13.4. Navegadores para seleccionar eventos.

o Obtener ms comportamientos: al seleccionar esta opcin Dreamweaver se conectar a la
pgina Web oficial de Adobe con el objetivo de poder descargar alguna actualizacin que
contenga ms comportamientos.
Una vez seleccionada la accin deseada aparecer un cuadro de dilogo en el cual podremos
especificar los parmetros concretos para esa accin.
Dichos parmetros variarn en funcin de la accin escogida. Una vez indicados dichos
parmetros y tras hacer clic en el botn Aceptar la accin aparecer en el Panel
Comportamientos.

Figura 13.5. Cuadro de dilogo de la accin Ir a URL.
Dreamweaver CS4. Captulo 13. Comportamientos

336

Una vez aadida la accin podemos modificar el evento que la desencadena. De forma
predeterminada aparece uno de ellos seleccionado en la lista desplegable de eventos; lo
podremos cambiar a nuestro gusto escogiendo el evento adecuado.

Figura 13.6. Eventos desencadenadores de acciones.

RECOMENDACIN. Si insertamos varios comportamientos para un mismo elemento stos se
ejecutarn en orden correlativo comenzando por el primero de ellos, aunque este orden se
puede cambiar desde el propio Panel Comportamientos.


13.2. Modificar comportamientos
Para modificar un comportamiento que hayamos aplicado previamente a algn objeto, el
proceso a llevar a cabo es similar a la operacin de alta:
Simplemente debemos seleccionar el objeto del que queremos modificar dicho
comportamiento.
A continuacin nos dirigimos al Panel Comportamientos y seleccionamos el
comportamiento, haciendo clic con el botn izquierdo del ratn sobre el nombre del evento.
Llegados a este punto tenemos varias posibilidades:
o Para modificar el evento que desencadena el comportamiento, seleccionamos dicho evento
y elegimos el valor que queramos de entre los disponibles en la lista desplegable que aparece.
Dreamweaver CS4. Captulo 13. Comportamientos

337

o Para modificar el orden en el que se ejecutarn los eventos, en el caso de que haya varios
asociados al comportamiento, seleccionamos aqul del que vamos a cambiar el orden y
hacemos clic en los botones segn corresponda.
o Para editar los parmetros asociados al comportamiento, hacemos doble clic con el ratn
en el nombre del comportamiento, modificamos los parmetros en el cuadro de dilogo
mostrado y hacemos clic en el botn Aceptar para aplicar los cambios.
o Para eliminar un comportamiento lo seleccionamos con el ratn y hacemos clic en el botn
Quitar evento o bien presionamos la tecla Supr.
13.3. Acciones de comportamiento
Vamos a ver en este apartado las acciones asociadas a los comportamientos ms usuales a la
hora de disear un sitio Web. Para ms informacin sobre el resto de acciones, podemos
consultar la ayuda incluida dentro del propio Dreamweaver.
Las acciones incluidas en Dreamweaver se han diseado para que sean compatibles con la
mayora de los navegadores modernos. Sin embargo, algunos navegadores no son
compatibles con JavaScript y, adems, muchos usuarios navegan con JavaScript desactivado en
sus navegadores. Para obtener la mejor compatibilidad en distintas plataformas, se
recomienda incorporar interfaces alternativas incluidas en etiquetas <noscript> para que las
personas sin JavaScript puedan usarel sitio.
Abrir ventana del navegador
Este comportamiento nos permite mostrar una URL en una nueva ventana de un navegador.
Para esta nueva ventana podemos especificar parmetros tales como: tamao de la ventana,
ttulo de la ventana, atributos (que aparezcan barras de desplazamiento o no, que se permita
modificar el tamao de la ventana,...).

RECOMENDACIN. Si no se especifica ningn valor para estos atributos, la ventana se
mostrar con las mismas caractersticas que la ventana desde la cual se lanza.


El aspecto del cuadro de dilogo de parmetros para esta accin sera el siguiente:

Figura 13.7. Cuadro de dilogo Abrir ventana del navegador.
Dreamweaver CS4. Captulo 13. Comportamientos

338

Los parmetros que podemos especificar son los siguientes:
Mostrar URL: en este cuadro de texto indicamos el archivo o direccin de la pgina Web que
se debe mostrar en la ventana que se debe abrir. Podemos utilizar el botn Examinar para
localizar el archivo en nuestro sitio local.
Ancho y alto de la ventana: indicando estos valores podemos establecer la anchura y altura
de la ventana a abrir en pxeles.
Atributos:
o Barra de herramientas de navegacin: indicamos que se presente aquella barra en la que se
muestran los botones del navegador atrs, adelante, inicio y actualizar.
o Barra de mens: para mostrar o no, la barra que incluye los mens tpicos de cualquier
navegador: archivo, edicin, ver, ir y ayuda.
o Barra de herramientas de ubicacin: para mostrar u ocultar la barra que incluye el campo
de texto en el cual indicar la URL a la que nos queremos desplazar.
o Barra de despl. si necesarias: para mostrar las barras de desplazamiento siempre que estas
sean necesarias porque el contenido exceda de la zona visible.
o Barra de estado: para mostrar u ocultar la barra situada en la parte inferior de la ventana en
la cual el navegador muestra distintos mensajes.
o Selectores de cambio de tamao: para permitir al usuario modificar el tamao de la
ventana, bien arrastrando la esquina inferior izquierda, o bien, haciendo clic en el botn
Maximizar situado en la esquina superior derecha del navegador.
o Nombre de la ventana: nombre descriptivo para la nueva ventana que se crear.
Una vez que hayamos establecido los valores para los distintos parmetros, hacemos clic en el
botn Aceptar y la accin ser aplicada al comportamiento que estamos manejando.

Ejercicio

El objetivo de este ejercicio ser insertar un hipervnculo al cual le aadiremos un
comportamiento de forma que, al hacer clic sobre el mismo, se abrir una nueva ventana del
navegador mostrando el contenido de una pgina web alojada en Internet.

Crea una nueva pgina bsica HTML.

Escribe Ministerio de Educacin y dale estilo subrayado desde el men Formato. Con el
texto seleccionado, activa el Panel Comportamientos si no est ya activado, mediante el
men Ventana>Comportamientos.

Haz clic en el botn para crear un comportamiento sobre dicho texto.
Dreamweaver CS4. Captulo 13. Comportamientos

339

Selecciona Abrir ventana del navegador y especifica las siguientes caractersticas:

o Mostrar URL: http://www.mepsyd.es/portada.html
o Ancho de la ventana: 600 pxeles.
o Alto de la ventana: 400 pxeles.
De entre todas las barras disponibles para una ventana de navegador, activaremos:
o Barra de herramientas de navegacin,
o Barra de estado,
o Barras de desplazamiento, siempre que sean necesarias.



Figura 13.8. Cuadro de dilogo Abrir ventana del navegador.

El evento, si no sale por defecto seleccionado, deber ser onClick.

Guarda el documento con el nombre comportamientos1 y comprueba que funciona
correctamente en diversos navegadores.

Cambiar propiedad
Esta accin se utiliza para cambiar la propiedad de un objeto como respuesta a un evento
provocado por el usuario. Podemos cambiar propiedades como el color de fondo de un
formulario, el tamao de una capa, las propiedades de los campos de un formulario,
En funcin del navegador utilizado ser posible modificar unas propiedades u otras.

Figura 13.9. Cambiar propiedad.
Dreamweaver CS4. Captulo 13. Comportamientos

340

En este caso podremos especificar los siguientes valores para esta accin:
Tipo de elemento: podemos escoger el tipo de elemento del cual queremos modificar una
propiedad: una capa, un formulario, una imagen, un campo de texto,

Figura 13.10. Tipo de elemento desplegado.
ID de elemento: al elegir un tipo de elemento, automticamente aparecen en esta lista
todos los objetos contenidos en la pgina HTML de ese tipo. Entre todos ellos deberemos
escoger uno.
Propiedad:
Seleccionar: seleccionamos la propiedad a modificar de entre las que aparecen en la
lista desplegable en funcin del navegador Web elegido de entre los que aparecen en
la segunda lista.

Figura 13.11. Seleccionar propiedad desplegado.
O Introducir: si en lugar de seleccionar una propiedad deseamos introducirla
manualmente, este es el campo adecuado para ello que deberemos activar.
Nuevo valor: este campo se utiliza para que introduzcamos el nuevo valor que debe tener la
propiedad que debe ser modificada.
Comprobar navegador
Este comportamiento no se utiliza a partir de Dreamweaver 9. Para obtener acceso a l,
deberemos seleccionar el elemento de men ~Ya no se utiliza en el men Aadir
comportamiento del panel Comportamientos.
Dreamweaver CS4. Captulo 13. Comportamientos

341


Figura 13.12. ~ Ya no se utiliza.
Se usa el comportamiento Comprobar navegador para enviar a los visitantes a distintas
pginas, dependiendo de las marcas y versiones de sus navegadores. Por ejemplo, puede
resultar conveniente que los visitantes que utilicen Netscape Navigator 4.0 vayan a una pgina
diferente a aquella a la que van los que utilizan Internet Explorer 4.0.
Resulta til adjuntar este comportamiento a la etiqueta <body> de una pgina que sea
compatible prcticamente con cualquier navegador (y que no use ninguna otra secuencia
JavaScript). De esta manera, los visitantes que visiten la pgina con JavaScript desactivado
podrn ver parte del contenido.
Otra posibilidad consiste en adjuntar este comportamiento a un vnculo nulo (como <a
href="javascript:;">) y que la accin determine el destino del vnculo en funcin de la marca y
la versin del navegador del visitante.
Los pasos para aadir este comportamiento sern los siguientes:
Seleccionamos un objeto y elecutamos ~Ya no se utiliza > Comprobar navegador en el
men Aadir comportamiento del panel Comportamientos.
Se abre el cuadro de dilogo Comprobar navegador en el cual determinamos el criterio
de separacin que deseamos aplicar a los visitantes: por tipo de navegador, por
versin de navegador o por ambas.
Dreamweaver CS4. Captulo 13. Comportamientos

342


Figura 13.13. Comprobar navegador.
Especificamos una versin de Netscape Navigator.
En los mens emergentes que aparecen al lado, seleccionamos las opciones de destino
(Ir a URL, Ir a Alt URL y Permanecer en esta pgina). Aqu deberemos especificar
cmo proceder si el navegador corresponde a la versin de Netscape Navigator
especificada o una versin posterior y cmo proceder en caso contrario.
Especificamos una versin de Internet Explorer y seleccionamos opciones de destino
de la misma forma que en el paso anterior.
Seleccionamos una opcin en el men Otros navegadores para especificar cmo se
debe proceder si el navegador no es Netscape Navigator ni Internet Explorer.
Permanecer en esta pgina es la mejor opcin para los navegadores distintos de Netscape
Navigator e Internet Explorer, ya que la mayora de ellos no son compatibles con JavaScript y,
si no pueden leer este comportamiento, permanecern en la misma pgina de todos modos.
Introducimos las rutas y los nombres de archivo del URL y el URL alternativo en los
cuadros situados en la parte inferior del cuadro de dilogo. Si introducimos un URL
remoto, deberemos introducir el prefijo http:// adems de la direccin www.
Hacemos clic en Aceptar y comprobamos que el evento predeterminado es el
correcto. Si no lo es, seleccionaremos otro evento o cambiaremos el navegador de
destino en el submen Mostrar eventos para
Comprobar plug-in
Usamos el comportamiento Comprobar plug-in para remitir a los visitantes a distintas pginas
dependiendo de si tienen instalado el plug-in en cuestin. Por ejemplo, puede resultar
conveniente que los visitantes vayan a una pgina si tienen Shockwave y a otra distinta si no lo
tienen.
No es posible detectar plug-ins especficos en Internet Explorer con JavaScript. No obstante, la
seleccin de Flash o Director har que se aada el cdigo VBScript adecuado a la pgina para
Dreamweaver CS4. Captulo 13. Comportamientos

343

detectar los plug-ins en Internet Explorer en Windows. La deteccin de plug-ins es imposible
con Internet Explorer en Mac OS.
El procedimiento para aplicar este comportamiento es el siguiente:
Seleccionamos un objeto y a continuacin seleccionamos Comprobar plug-in en el men
Aadir comportamiento del panel Comportamientos.

Figura 13.14. Comprobar plug-in.
Se abre el cuadro de dilogo Comprobar plug-in y seleccionamos un plug-in en el men
Plug-in o activamos Introducir y escribimos el nombre exacto del plug-in en el cuadro de
texto contiguo. Deberemos utilizar el nombre exacto del plug-in.
En el cuadro de texto Si se encuentra, ir a URL, especificaremos un URL para los visitantes
que dispongan del plug-in. Si especificamos un URL remoto, deberemos incluir el prefijo
http:// en la direccin. Si dejamos en blanco este campo, los visitantes permanecern en la
misma pgina.
En el cuadro De lo contrario, Ir a URL, especificaremos una URL alternativa para los
visitantes que no dispongan del plug-in. Si dejamos en blanco este campo, los visitantes
permanecern en la misma pgina.
Debemos especificar qu debe hacerse si la deteccin de plug-ins no es posible. De forma
predeterminada, cuando la deteccin resulta imposible, se enva al visitante al URL
indicado en el cuadro De lo contrario. Para enviar al visitante a la primera URL (si se
encuentra), seleccionamos la opcin Ir siempre al primer URL si no es posible detectar.
Cuando est seleccionada, esta opcin hace que se d por hecho que el visitante dispone
del plug-in, a no ser que el navegador indique explcitamente que el plug-in no est
presente. En general, seleccionaremos esta opcin si el contenido del plug-in es parte
integrante de la pgina; si no lo es, desactivaremos esta opcin.
Dreamweaver CS4. Captulo 13. Comportamientos

344


Figura 13.15. Cuadro de dilogo Comprobar Plug-in.
Esta opcin afecta slo a Internet Explorer; Netscape Navigator siempre detecta los plug-
ins.
Pulsamos Aceptar y comprobamos que el evento predeterminado es el correcto. Si no lo
es, seleccionaremos otro evento o cambiaremos el navegador de destino en el submen
Mostrar eventos para.

Controlar Shockwave o SWF
Este comportamiento no se utiliza a partir de Dreamweaver 9. Para obtener acceso a l,
deberemos seleccionar el elemento de men ~Ya no se utiliza en el men Aadir
comportamiento del panel Comportamientos.

Figura 13.16. Men Controlar Shockwave o SWF.
Se usa el comportamiento Controlar Shockwave o SWF para reproducir, detener, rebobinar o
ir a un fotograma de un archivo Shockwave o SWF.
Dreamweaver CS4. Captulo 13. Comportamientos

345

Este comportamiento slo afecta a animaciones situadas en la lnea de tiempo principal. No
controla las animaciones que tienen lugar dentro de clips de pelcula. Para que aparezca activo
en el men Aadir Comportamiento deberemos tener insertado y seleccionado en nuestro
documento HTML un archivo Shockwave o SWF. Entonces, una vez seleccionado el
comportamiento Controlar Shockwave o SWF se abre el cuadro de dilogo correspondiente y
en el mismo seleccionamos una pelcula del men Pelcula; Dreamweaver presenta
automticamente una lista con los nombres de todos los archivos SWF o Shockwave que hay
actualmente en el documento. (En concreto, Dreamweaver presenta una lista con todos los
nombres de los archivos con las extensiones .dcr, .dir, .swf o .spl que estn en las etiquetas
<object> o <embed>.). Especificaremos en este cuadro si deseamos reproducir, detener,
rebobinar o ir a un fotograma de la pelcula. La opcin Reproducir reproduce la pelcula
empezando en el fotograma en que se produce el comportamiento.


Figura 13.17. Cuadro de dilogo Controlar Shockwave o SWF.
Por ltimo, aceptamos y comprobamos que el evento predeterminado es el correcto.
Arrastrar elemento PA
El comportamiento Arrastrar elemento PA permite al visitante arrastrar un elemento con
posicin absoluta (PA). Usaremos este comportamiento para crear puzzles, controles
deslizantes y otros elementos mviles de interfaz.
Se puede especificar la direccin en la que el visitante puede arrastrar el elemento PA (en
horizontal, vertical o en cualquier direccin), un destino hasta el que el visitante debe arrastrar
el elemento PA, si el elemento PA debe ajustarse al destino cuando el elemento PA se
encuentra a un cierto nmero de pxeles del destino y qu suceder cuando el elemento PA
llegue al destino, entre otras opciones.
Dado que la llamada al comportamiento Arrastrar elemento PA debe producirse antes de que
el visitante pueda arrastrar el elemento PA, deberemos asociar Arrastrar elemento PA al
objeto body (con el evento onLoad).
Para poder aplicar este comportamiento podemos seguir estos pasos:
Seleccionamos Insertar > Objetos de diseo > Div PA o hacemos clic en el botn Dibujar
Div PA del panel Insertar y dibujamos una Div PA en la vista Diseo de la ventana del
documento.
Dreamweaver CS4. Captulo 13. Comportamientos

346

Hacemos clic en <body> en el selector de etiquetas, situado en la esquina inferior
izquierda de la ventana de documento .
Seleccionamos Arrastrar elemento PA en el men Aadir comportamiento del panel
Comportamientos.

Figura 13.18. Men Arrastrar elemento PA.
Si Arrastrar elemento PA no est disponible, es probable que no tengas un elemento PA
seleccionado.
Se abre el cuadro de dilogo Arrastrar elemento PA, que tiene dos fichas Bsico y
Avanzado.

Figura 13.19. Cuadro Arrastrar elemento PA (Bsico).
Veamos la ficha Bsico:
Dreamweaver CS4. Captulo 13. Comportamientos

347

En el men emergente Elemento PA, selecciona el elemento PA al cual vamos a aplicarle
el comportamiento.
En Movimiento, seleccionamos Restringido o Sin restric.. El movimiento no restringido es
adecuado para puzzles y otros juegos de arrastrar y soltar.
Si hemos seleccionado movimiento restringido, el cuadro de dilogo variar para
permitirnos introducir valores (en pxeles) en los cuadros Arriba, Abajo, Izda. y Dcha.

Figura 13.20. Cuadro Arrastrar elemento PA (Bsico) con Movimiento restringido.
Los valores son relativos a la posicin inicial del elemento PA. Para restringir el movimiento a
una regin rectangular, introduciremos valores positivos en los cuatro cuadros. Para permitir
solamente el movimiento vertical, introduciremos valores positivos para Arriba y Abajo, y 0
para Izquierda y Derecha. Para permitir slo el movimiento horizontal, introduciremosvalores
positivos para Izquierda y Derecha, y 0 para Arriba y Abajo.
A continuacin introduciremos valores (en pxeles) en los cuadros Izda y Arriba para definir
el Destino de la capa. El destino es el punto hasta el que el visitante debe arrastrar el
elemento PA. Se considera que un elemento PA ha alcanzado el destino cuando sus
coordenadas izquierda y superior coinciden con los valores introducidos en los cuadros
Izda y Arriba. Los valores son relativos a la esquina superior izquierda de la ventana del
navegador. Si hacemos clic en la opcin Obtener posicin actual el programa rellenar
automticamente los campos con la posicin actual del elemento PA.
En el campo Ajustar si a menos de se teclear el nmero de pxeles para determinar a qu
distancia del destino el visitante debe soltar el elemento PA para que ste se ajuste al
destino. Los valores altos facilitan al visitante la localizacin el destino para soltar la capa.
La ficha Avanzado permite definir el manejador de arrastre del elemento PA, controlar su
movimiento mientras se arrastra y desencadenar una accin al soltar dicho elemento.
Dreamweaver CS4. Captulo 13. Comportamientos

348


Ficha 13.21. Cuadro Arrastrar elemento PA (Avanzado).
Si desplegamos Arrastrar selector, para definir una zona determinada del elemento PA en
la que el visitante debe hacer clic para arrastrarlo, seleccionaremos rea dentro del
elemento; luego introduciremos las coordenadas izquierda y superior, as como los valores
de ancho y alto del selector de arrastre. Esta opcin resulta til cuando la imagen
contenida en el elemento PA incluye un elemento que sugiere la posibilidad de arrastrarla,
como una barra de ttulo, por ejemplo. No se recomienda determinar esta opcin si lo que
deseamos es que el visitante pueda pulsar en cualquier lugar del elemento PA para
arrastrarlo.

Ficha 13.22. Arrastrar selector rea dentro del elemento (Avanzado).
Seleccionaremos las opciones Al arrastrar que deseemos utilizar:

Selecciona Traer el elemento al frente si el elemento PA debe desplazarse a la
primera posicin en el orden de apilamiento mientras se est arrastrando. Si
seleccionamos esta opcin, utilizaremos el men emergente para determinar si
deseamos dejar el elemento PA en la primera posicin o devolverlo a su posicin
original en el orden de apilamiento.
En el cuadro Llamar JavaScript, introduciremos cdigo JavaScript o un nombre de
funcin para ejecutar repetidamente el cdigo o funcin mientras se est
arrastrando el elemento PA. Por ejemplo, se podra escribir una funcin que
controle las coordenadas del elemento PA y muestre mensajes y consejos como
se est acercando o an est lejsimos para poder soltar la capa en un cuadro
de texto.
Dreamweaver CS4. Captulo 13. Comportamientos

349

En Al soltar, teclearemos cdigo JavaScript o un nombre de funcin en el segundo cuadro de
texto Llamar JavaScript para ejecutar el cdigo o la funcin cuando se suelte el elemento PA.
Seleccionaremos la opcin Slo si se ajusta cuando el cdigo JavaScript deba ejecutarse
solamente si el elemento PA ha alcanzado su destino.
Por ltimo pulsamos Aceptar y comprobamos que el evento predeterminado es el correcto.
Ir a URL
El comportamiento Ir a URL abre una nueva pgina en la ventana actual o en el marco
especificado. Este comportamiento resulta til para cambiar el contenido de dos o ms
marcos con un solo clic.
Para aplicarlo seguiremos estos pasos:
Seleccionamos un objeto y luego Ir a URL en el men Aadir comportamiento del panel
Comportamientos.

Figura 13.23. Ir a URL.
Se abre el cuadro de dilogo Ir a URL, en el cual podemos elegir un destino para el URL en
la lista Abrir en. La lista Abrir en muestra automticamente los nombres de todos los
marcos del conjunto de marcos actual y de la ventana principal. Si no hay marcos, la
ventana principal es la nica opcin posible.

OBSERVACIN. Este comportamiento puede dar lugar a resultados inesperados si hay algn
marco que se llame top, blank, self o parent. Los navegadores a veces confunden estos
nombres con nombres de destino reservados.

Dreamweaver CS4. Captulo 13. Comportamientos

350

A continuacin hacemos clic en Examinar para seleccionar el documento que deseamos
abrir o tecleamos la ruta y el nombre de archivo del documento en el cuadro de texto URL.
Repetiremos el paso segundo y tercero para abrir ms documentos en otros marcos, si
procede.
Por ltimo, hacemos clic en Aceptar y comprobamos que el evento predeterminado es el
correcto.

Figura 13.24. Cuadro de dilogo Ir a URL.
Men de salto
Al crear un men de salto mediante Insertar > Formulario > Men de salto, Dreamweaver crea
un objeto de men y le adjunta el comportamiento del Men de salto. Normalmente no es
preciso adjuntar manualmente el comportamiento Men de salto a un objeto.
Un men de salto existente se puede editar de dos formas:
Se pueden editar y reorganizar los elementos del men, cambiar los archivos a los que se
salta y cambiar la ventana en la que esos archivos se abren haciendo doble clic en el
comportamiento de Men de salto existente en el panel Comportamientos. Para ello
deberemos tener seleccionado un objeto de formulario Men de salto previamente insertado
en nuestro documento.
Los elementos de este men se editan igual que los de cualquier men, es decir,
seleccionando el men y usando el botn Valores de lista del inspector de propiedades.
Si nos decidimos por la primera opcin entonces se abrir el cuadro de dilogo Men de salto
en el cual podremos llevar a cabo los cambios pertinentes y luego hacer clic en Aceptar.
Dreamweaver CS4. Captulo 13. Comportamientos

351


Figura 13.25. Cuadro de dilogo Men de salto.
Men de salto Ir
El comportamiento Men de salto Ir est estrechamente relacionado con el comportamiento
anterior. Men de salto Ir permite asociar un botn Ir con un men de salto. (Para utilizar
este comportamiento debe existir ya un men de salto en el documento.) Al hacer clic en el
botn Ir, se abre el vnculo seleccionado en el men de salto. Los mens de salto
generalmente no necesitan un botn Ir; al seleccionar un elemento de un men de salto,
normalmente se carga un URL sin necesidad de que el visitante lleve a cabo ninguna otra
accin. No obstante, si el visitante selecciona el mismo elemento que se encuentra ya
seleccionado en el men de salto, el salto no se producir. En general, eso no importa, pero si
aparece el men de salto en un marco y los elementos del men de salto contienen vnculos
con pginas de otros marcos, suele ser til disponer de un botn Ir para permitir a los
visitantes volver a elegir un elemento que ya est seleccionado en el men de salto.
Para aplicar este comportamiento, debemos seleccionar un objeto para utilizarlo como botn
Ir (generalmente una imagen de un botn) y seleccionar Men de salto Ir en el men Aadir
comportamiento del panel Comportamientos. En el men Elegir men de salto, selecciona un
men para que se active el botn Ir y haz clic en Aceptar.
Reproducir sonido
Este comportamiento no se utiliza a partir de Dreamweaver CS4. Para obtener acceso a l,
debes seleccionar el elemento de men ~Ya no se utiliza en el men Aadir comportamiento
del panel Comportamientos.
Puedes utilizar el comportamiento Reproducir sonido para reproducir un efecto sonoro
cuando el puntero pase por encima de un vnculo, para que se reproduzca msica al cargarse
la pgina, etc.
Dreamweaver CS4. Captulo 13. Comportamientos

352

Es posible que los navegadores precisen compatibilidad adicional con audio (como un plug-in
de audio, por ejemplo) para reproducir sonidos. Dado que cada navegador utiliza un plug-in
diferente, es difcil predecir exactamente cmo sonarn estos efectos.
Para aplicar este comportamiento a un objeto seleccionado en un documento activo
deberemos seguir estos pasos:
Selecciona un objeto y ejecuta Controlar sonido en el men Aadir comportamiento del
panel Comportamientos.

Figura 13.26. Controlar sonido.
Hacemos clic en Examinar en el cuadro de dilogo Controlar sonido que se abre, para
seleccionar un archivo de sonido o introducimos la ruta y el nombre del archivo en el
cuadro Reproducir sonido. Pulsamos Aceptar y comprobamos que el evento
predeterminado es el correcto.

Figura 13.27. Cuadro de dilogo Controlar sonido.


Dreamweaver CS4. Captulo 13. Comportamientos

353

Mensaje emergente
El comportamiento Mensaje emergente muestra una alerta de JavaScript con el mensaje que
especifiquemos. Dado que las alertas de JavaScript slo tienen un botn (Aceptar),
utilizaremos este comportamiento para proporcionar informacin al usuario y no para
proponer una eleccin.
Puedes incrustar en el texto cualquier llamada, propiedad, variable global u otra expresin de
funcin JavaScript vlida. Para incrustar una expresin JavaScript, la encerraremos entre llaves
({}). Para que aparezca una llave, tendremos que anteponerle una barra invertida (\{). Observa
la siguiente llamada a modo de ejemplo:
El URL de esta pgina es {window.location}, y hoy es {new Date()}.

OBSERVACIN. El navegador controla el aspecto de la alerta. Si deseas tener un mayor
control sobre el aspecto, puedes usar el comportamiento Abrir ventana del navegador.


Para aplicar este comportamiento, podemos seguir los siguientes pasos:
Selecciona un objeto y luego selecciona Mensaje emergente en el men Aadir
comportamiento del panel Comportamientos.

Figura 13.28. Mensaje emergente.
En el cuadro de dilogo Mensaje emergente que se abre, tecleamos el mensaje en el
cuadro Mensaje y hacemos clic en Aceptar. Despus guardamos los cambios a nuestro
Dreamweaver CS4. Captulo 13. Comportamientos

354

documento activo y comprobamos el funcionamiento del comportamiento en los
navegadores.

Figura 13. 29. Ejemplo de cuadro para Mensaje emergente.
Carga previa de imgenes
El comportamiento Carga previa de imgenes reduce el tiempo de visualizacin mediante la
creacin de un cach para las imgenes que no se muestran cuando aparece la pgina
inicialmente (por ejemplo, las imgenes que se intercambiarn por comportamientos o
scripts).

OBSERVACIN. El comportamiento Intercambiar imagen carga automticamente todas las
imgenes resaltadas cuando se selecciona la opcin Carga previa de imgenes en el cuadro
de dilogo Intercambiar imagen, por lo que no es necesario aadir manualmente la accin
Carga previa de imgenes al usar Intercambiar imagen.


Para aplicar este comportamiento seguiremos estos pasos:
Seleccionamos un objeto y luego ejecutamos Carga previa de imgenes en el men Aadir
comportamiento del panel Comportamientos.
Dreamweaver CS4. Captulo 13. Comportamientos

355


Figura 13.30. Carga previa de imgenes.
En el cuadro de dilogo Carga previa de imgenes, hacemos clic en Examinar para
seleccionar el archivo de imagen o tecleamos la ruta y el nombre de archivo de una imagen
en el cuadro Archivo de origen de imagen.

Figura 13.31. Cuadro de dilogo Carga previa de imgenes.
Utilizaremos el botn para aadir imgenes a la lista Carga previa de imgenes y el
botn para quitar imgenes de la lista. Cuando hayamos terminado, slo tenemos
que Aceptar y comprobar si el evento predeterminado es correcto y luego comprobarlo
todo en el navegador.
Definir texto de marco
Utilizaremos esta accin para reemplazar el texto contenido en un marco por el que le
especifiquemos en la ventana de dilogo asociada a esta accin, dentro del campo Nuevo
HTML.
Para aplicar este comportamiento en una pgina de marcos ejecutaremos desde el panel
Comportamientos, Aadir comportamiento, Establecer texto>Definir texto de marco.
Dreamweaver CS4. Captulo 13. Comportamientos

356


Figura 13.32. Definir texto de marco.
Esta accin, adems del contenido del marco, va a permitir cambiar el formato del mismo de
forma dinmica, slo tenemos que indicar el cdigo HTML apropiado para ello (este cdigo
HTML puede incluir incluso cdigo Javascript).

Figura 13.33. Cuadro de dilogo Definir texto de marco.
En este caso los parmetros a especificar son:
Marco: en esta lista desplegable deberemos elegir, de entre todos los marcos de los que
disponga nuestra pgina, aquel en el que queramos llevar a cabo las modificaciones oportunas.
Nuevo HTML: campo en el cual incluir el nuevo cdigo HTML que queremos insertar en el
marco.
Dreamweaver CS4. Captulo 13. Comportamientos

357

Conservar color de fondo: este campo se utiliza para conservar el color, tanto del fondo del
marco como del texto del mismo. Esto es til para casos en los que modifiquemos el formato
del marco pero queramos conservar estas propiedades.
Si hacemos clic en el botn Obtener HTML actual se copia en el campo Nuevo HTML, todo el
cdigo incluido en la seccin body del marco para que sea ms sencilla su modificacin.
Definir texto de contenedor
El comportamiento Definir texto de contenedor reemplaza el contenido y el formato de un
contenedor existente (es decir, cualquier elemento que pueda contener texto u otros
elementos, como por ejemplo una capa (PA)) en una pgina con el contenido que
especifiquemos. Dicho contenido puede incluir cualquier cdigo HTML vlido.
Podemos incrustar en el texto cualquier llamada, propiedad, variable global u otra expresin
de funcin JavaScript vlida. Para incrustar una expresin JavaScript, la encerramos, como
hemos visto anteriormente, entre llaves ({}). Para que aparezca una llave, tendremos que
anteponer una barra invertida (\{). Por ejemplo, podramos incrustar esta expresin:
El URL de esta pgina es {window.location}, y hoy es {new Date()}.
Seguiremos los siguientes pasos para aplicar este comportamiento:
Seleccionamos un objeto y luego ejecutamos Establecer texto>Definir texto de
contenedor en el men Aadir comportamiento del panel Comportamientos.

Figura 13.34. Definir texto de contenedor.
En el cuadro de dilogo Definir texto de contenedor, desplegamos el men Contenedor
para elegir el elemento de destino y escribimos el nuevo texto o HTML en el cuadro Nuevo
HTML. Hacemos clic en Aceptar y comprobamos que el evento predeterminado es el
correcto.
Dreamweaver CS4. Captulo 13. Comportamientos

358


Figura 13.35. Cuadro de dilogo Definir texto de contenedor.
Mostrar-Ocultar Elementos

Ejercicio

El objetivo de este ejercicio ser crear comportamientos a elementos PA, de forma que se
muestren o se oculten en funcin de la interaccin del usuario con la pgina web.

Abre comportamientos1.html e inserta la imagen abu_simbel.jpg. Se encuentra en el aula
virtual dentro de la carpeta Ejercicios del Captulo 13 del Material necesario para
ejercicios de los Materiales de Apoyo necesario para ejercicios para que puedas
descargarla desde ah y guardarla en la carpeta imagenes de tu sitio MiWeb.

A continuacin dibuja una Div PA a la derecha de la imagen que has insertado desde el
panel Insertar, categora Diseo, Dibujar Div PA.

Sita el cursor dentro de la Div PA y teclea en su interior el siguiente texto: Abu Simbel.
Monumento que fue mandado construir por el faran Ramss II y que fue rescatado de las
aguas del Nilo en el presente siglo.

El aspecto del ejercicio hasta ahora debera ser aproximadamente el siguiente:

Dreamweaver CS4. Captulo 13. Comportamientos

359


Figura 13.36. Vista actual del ejercicio.

Selecciona el elemento PA que contiene el texto. En el Inspector de propiedades asgnale el
nombre capatexto y el valor hidden a la propiedad Vis (visibilidad), para ocultarla. Comprueba
que se oculta la capa al quitar la seleccin de la misma haciendo clic en cualquier parte de la
pgina.

Ahora crea un comportamiento asociado a la imagen de forma que cuando el usuario pase
el ratn por encima de la misma, el texto situado en el elemento PA de al lado se muestre en
la pgina web. Para realizar esto necesitars crear dos comportamientos: uno que muestre el
texto al pasar con el ratn por encima de la imagen y otro que lo oculte cuando el ratn salga
de la zona marcada por dicha imagen.

Selecciona la imagen haciendo clic sobre ella y activa el Panel Comportamientos si no est
ya activado, mediante el men Ventana>Comportamientos.

Con la imagen seccionada haz clic en el botn para agregar un comportamiento;
selecciona Mostrar Ocultar elementos.

En el cuadro de dilogo Mostrar-Ocultar elementos que te aparece, selecciona el
elemento PA llamado capatexto y haz clic en el botn Mostrar (recuerda que inicialmente
la has ocultado). Por ltimo aplica los cambios haciendo clic en el botn Aceptar.

Dreamweaver CS4. Captulo 13. Comportamientos

360


Figura 13.37. Mostrar el elemento PA llamado capatexto.

Para hacer que dicho texto se muestre al pasar el puntero del ratn por encima de la
imagen, desde el Panel Comportamientos selecciona el evento onMouseOver como
accin asociada al comportamiento indicado en el punto anterior:



Panel 13.38. Seleccionar el evento onMouseover.

A continuacin debemos conseguir que el texto se oculte cuando el ratn salga de la zona
delimitada por la imagen. Para ello seleccionaremos la imagen y aadiremos un nuevo
comportamiento haciendo clic en el botn y seleccionando otra vez Mostrar-Ocultar
elementos.

En el cuadro de dilogo Mostrar-Ocultar elementos que te aparece, selecciona capatexto
y haz clic en el botn Ocultar. Aplica los cambios haciendo clic en el botn Aceptar.
Dreamweaver CS4. Captulo 13. Comportamientos

361



Figura 13.39. Ocultar el elemento llamado capatexto.

Para hacer que el elemento PA se oculte al salir el cursor del ratn de la zona delimitada
por la imagen, selecciona la opcin onMouseOut, desde el Panel Comportamientos.


Figura 13.40. Seleccionar el evento onMouseOut.

Una vez aplicados los dos comportamientos a la imagen seleccionada, el panel
Comportamientos deber mostrar ambos.


Figura 13.41. Panel Comportamientos con dos comportamientos agregados.
Dreamweaver CS4. Captulo 13. Comportamientos

362


Guarda los cambios a comportamientos1.html y comprueba su funcionamiento en los
navegadores.

Establecer texto de la barra de estado
Esta accin se utiliza para mostrar un texto en la barra de estado del navegador (situada en la
parte inferior del mismo), por ejemplo para indicar una determinada informacin al pasar con
el ratn por encima de un vnculo o de una imagen, ...
Se debe tener en cuenta que no todos los navegadores aceptan este texto en la barra de
estado, adems de que mucha gente no presta atencin a la informacin que se muestra en
dicha barra.
Para agregar este comportamiento deberemos ejecutar desde el botn del panel
Comportamientos, Establecer texto>Establecer texto de la barra de estado. Se abre el cuadro
de dilogo correspondiente y el nico parmetro que hay que indicar en este caso es el texto
que se desea mostrar, en el campo Mensaje.

Figura 13.42. Cuadro establecer texto de la barra de estado.
Establecer imagen de barra de navegacin
Usaremos el comportamiento Establecer imagen de barra de navegacin para convertir una
imagen en una imagen de barra de navegacin o para cambiar la visualizacin y las acciones de
imgenes en una barra de navegacin.
Una vez ejecutado el comportamiento Establecer imagen de barra de navegacin y abierto el
cuadro de dilogo correspondiente, utilizaremos la ficha Bsico del mismo para crear o
actualizar una imagen de barra de navegacin, cambiar el URL que debe mostrarse cuando el
usuario hace clic en un botn de la barra de navegacin y seleccionar una ventana distinta
para mostrar un URL.
Dreamweaver CS4. Captulo 13. Comportamientos

363


Figura 13.43. Ficha Bsico del cuadro Establecer imagen de barra de navegacin.
Utilizaremos la ficha Avanzado del cuadro de dilogo Establecer imagen de barra de
navegacin para cambiar el estado de las imgenes de un documento en funcin del estado
del botn actual. De forma predeterminada, al hacer clic en un elemento de una barra de
navegacin, todos los dems elementos recuperan su estado Arriba. La ficha Avanzado nos
permite establecer un estado diferente para una imagen cuando la imagen seleccionada se
encuentre su estado Abajo o Sobre.

Figura 13.44. Ficha Avanzado del cuadro Establecer imagen de barra de navegacin.
Dreamweaver CS4. Captulo 13. Comportamientos

364

Definir texto de campo de texto
En este caso esta accin nos permitir sustituir el texto contenido en un campo de texto de
formulario, por el que especifiquemos en el cuadro de dilogo asociado a esta accin.
Seleccionamos el campo de texto al que vamos a aplicarle el comportamiento y desde el panel
Comportamientos, pulsamos el botn Aadir comportamiento y ejecutamos Establecer
texto>Definir texto de campo de texto.

Figura 13.45. Definir texto de campo de texto.
Se abre el cuadro de dilogo correspondiente:

Figura 13.46. Cuadro Definir texto de campo de texto.

Dreamweaver CS4. Captulo 13. Comportamientos

365

En dicho cuadro deberemos especificar:
Campo de texto: lista desplegable en la cual deberemos especificar aquel campo de texto
(de entre los disponibles en nuestro formulario) en el que queremos realizar la sustitucin del
texto.
Nuevo texto: texto a incluir en el campo especificado en la lista desplegable anterior.
Intercambiar imagen
El comportamiento Intercambiar imagen intercambia una imagen por otra cambiando el
atributo src de la etiqueta <img>. Utilizamos este comportamiento para crear sustituciones de
botones y otros efectos de imgenes (incluido el intercambio de varias imgenes a la vez). Al
insertar una imagen dinmica se aade automticamente un comportamiento Intercambiar
imagen a la pgina.

OBSERVACIN. Dado que slo el atributo src se ve afectado por este comportamiento, el
intercambio debe hacerse con imgenes que tengan las mismas dimensiones (altura y
anchura) que la imagen original. En caso contrario, la imagen que se intercambia se reducir
o ampliar para adaptarse a las dimensiones de la imagen original.
Tambin existe un comportamiento denominado Restaurar imagen intercambiada que
restaura el ltimo conjunto de imgenes intercambiadas a sus archivos de origen anteriores y
que veremos a continuacin. Este comportamiento se aade automticamente siempre que
se adjunta el comportamiento Intercambiar imagen a un objeto; si hemos dejamos
seleccionada la opcin Restaurar al adjuntar Intercambiar imagen, no tendremos que
seleccionar manualmente el comportamiento Restaurar imagen intercambiada.


Los pasos para aplicar este comportamiento son los siguientes, sobre una imagen previamente
insertada y seleccionada en un documento activo:
Con la imagen que vamos a intercambiar seleccionada, elegiremos Intercambiar imagen
del men Aadir comportamiento del panel Comportamientos.

Se abre el cuadro de dilogo correspondiente, en el cual seleccionaremos en la lista
Imgenes la imagen cuyo origen deseamos cambiar.

Dreamweaver CS4. Captulo 13. Comportamientos

366


Figura 13.47. Cuadro de dilogo Intercambiar imagen.

Pulsaremos en Examinar para seleccionar el archivo de la nueva imagen o introduciremos
la ruta y el nombre de archivo de la nueva imagen en el cuadro Definir origen como.

Si tenemos ms imgenes para cambiar, repetiremos los dos pasos anteriores con ellas.
Puedes usar la misma accin Intercambiar imagen para todas las imgenes que desees
cambiar a la vez; en caso contrario, la accin correspondiente Restaurar imagen
intercambiada no las restaurar todas.
Para crear un cach para las nuevas imgenes cuando se cargue la pgina, deberemos
seleccionar la opcin Carga previa de imgenes. Esto contribuye a evitar las demoras en la
descarga cuando llega el momento de que aparezcan las imgenes.
Por ltimo pulsamos Aceptar y comprobamos que el evento predeterminado es el
correcto. Si no lo es, seleccionaremos otro evento o cambiaremos el navegador de destino
en el submen Mostrar eventos para.
Restaurar imagen intercambiada
Esta accin va aparejada con la que acabamos de ver, denominada Intercambiar imagen. Es
posible utilizarla, tal y como muestra el mensaje, nicamente despus de haber aplicado el
comportamiento antes mencionado.
Su misin es restaurar las imgenes intercambiadas a sus archivos de origen iniciales.

Figura 13.48. Cuadro de dilogo Restaurar imagen intercambiada.
Dreamweaver CS4. Captulo 13. Comportamientos

367

Validar formulario
Esta accin se utiliza en aquellos formularios en los que deseemos comprobar que la
informacin que ha introducido el usuario en los distintos campos de texto es la correcta.
Para ello podremos ir seleccionando los distintos campos de texto que componen nuestro
formulario y estableciendo las reglas que deben cumplir cada uno de ellos para que sean
rellenados correctamente, as que seleccionamos un campo de texto y desde el panel
Comportamientos, pulsamos el botn y seleccionamos Validar
formulario. Se abre el cuadro de dilogo correspondiente:

Figura 13.49. Parmetros de validacin de un formulario.
Los parmetros asociados a esta opcin son los siguientes:
Campos: en esta lista desplegable deberemos ir eligiendo los distintos campos de texto para
los cuales deseamos establecer algn tipo de restriccin.
Valor Obligatorio: si seleccionamos esta casilla de verificacin ser imprescindible para el
usuario introducir algn valor en el campo de texto que se ha indicado en la lista anterior.
Aceptar:
o Cualquier cosa: el usuario podr introducir en el campo de texto cualquier carcter.
o Nmero: en el campo de texto correspondiente slo se podrn introducir valores
numricos.
o Direccin de correo electrnico: el usuario deber indicar en el campo una direccin de
correo electrnico vlida.
Dreamweaver CS4. Captulo 13. Comportamientos

368

o Nmero del.. al..: el campo slo aceptar aquellos valores numricos comprendidos entre
los lmites establecidos en estos dos campos.
13.4. Eventos
Los eventos son los procedimientos que van a desencadenar el comportamiento asociado a un
elemento. Van a depender de los navegadores, es decir, en funcin del navegador elegido
dispondremos de unos eventos u otros.
Tal y como vimos en el apartado anterior, podremos seleccionar para qu navegador
queremos mostrar los eventos y, por tanto, con cules de estos eventos trabajaremos.
Recordemos que es necesario ejecutar Mostrar eventos para desde el panel
Comportamientos.

Figura 13.50. Ejemplo de Mostrar eventos para IE 6.0
Hay eventos de todo tipo, veamos algunos de ellos:
onAbort se genera cuando el usuario detiene el explorador antes de que se cargue
completamente una imagen.
onAfterUpdate se genera cuando un elemento de datos vinculados de la pgina termina de
actualizar el origen de los datos.
onBeforeUpdate se genera cuando un elemento de datos vinculados de la pgina ha
cambiado y va a perder foco (y, por consiguiente, va a actualizar el origen de los datos).
Dreamweaver CS4. Captulo 13. Comportamientos

369

onBlur es lo contrario a onFocus. El evento onBlur se genera cuando el elemento
especificado deja de ser el foco de interaccin del usuario. Por ejemplo, cuando un usuario
hace clic fuera de un campo de texto despus de haber hecho clic en l, el explorador genera
un evento onBlur para el campo de texto.
onBounce se genera cuando el contenido de un elemento de marquesina ha alcanzado el
lmite de la marquesina.
onChange se genera cuando el usuario cambia un valor de la pgina, como, por ejemplo,
cuando el usuario elige un elemento de un men o cambia el valor de un campo de texto y,
seguidamente, hace clic en algn otro lugar de la pgina.
onClick se genera cuando el usuario hace clic (pulsar y soltar) en el elemento especificado,
como, por ejemplo, un vnculo, un botn o un mapa de imagen.
onDblClick se genera cuando el usuario hace doble clic (pulsar y soltar rpidamente dos
veces) en el elemento especificado.
onError se genera cuando se produce un error en el explorador al cargar una pgina o una
imagen.
onFinish se genera cuando el contenido de un elemento de marquesina completa un bucle.
onFocus se genera cuando el elemento especificado se convierte en el foco de interaccin
del usuario. Por ejemplo, al hacer clic en un campo de texto de un formulario, se genera un
evento onFocus.
onHelp se genera cuando el usuario hace clic en el botn de Ayuda o elige Ayuda del men
de un explorador.
onKeyDown se genera en el momento en que el usuario pulsa cualquier tecla.
onKeyPress se genera cuando el usuario pulsa y suelta cualquier tecla; este evento es una
combinacin de los eventos onKeyDown y onKeyUp.
onKeyUp se genera cuando el usuario suelta una tecla despus de pulsarla.
onLoad se genera cuando termina de cargarse una imagen o una pgina.
onMouseDown se genera cuando el usuario pulsa el botn del ratn.
onMouseMove se genera cuando el usuario mueve el ratn dentro de los lmites del
elemento especificado mientras lo seala.
onMouseOut se genera cuando el cursor abandona el elemento especificado.
onMouseOver genera cuando el ratn comienza a moverse desde una posicin que no
seala al elemento especificado hasta una posicin que s lo seala. El elemento especificado
para este evento es generalmente un vnculo.
onMouseUp se genera cuando se suelta un botn del ratn que se encuentra pulsado.
Dreamweaver CS4. Captulo 13. Comportamientos

370

onMove se genera cuando se mueve una ventana o un marco.
onReadyStateChange se genera cuando cambia el estado del elemento especificado. Entre
los estados posibles del elemento figuran uninitialized (sin inicializar), loading (cargando) y
complete (terminado).
onReset se genera cuando se restauran los valores predeterminados de un formulario.
onResize se genera cuando el usuario cambia el tamao de la ventana del explorador o de
un marco.
onRowEnter se genera cuando ha cambiado el cursor de registro actual del origen de datos
vinculados.
onRowExit se genera cuando va a cambiar el cursor de registro actual del origen de datos
vinculados.
onScroll se genera cuando el usuario desplaza la pgina hacia arriba o hacia abajo.
onSelect se genera cuando el usuario selecciona texto en un campo de texto.
onStart se genera cuando el contenido de un elemento de marquesina inicia un bucle.
onSubmit se genera cuando el usuario enva un formulario.
onUnload se genera cuando el usuario abandona la pgina.

RECOMENDACIN. Si necesitas informacin adicional sobre alguno de estos eventos es
posible consultarla en la pgina oficial de Adobe, en la siguiente ruta:
http://www.adobe.com/es/support/dreamweaver/




371















Captulo 14.
Publicacin del sitio





Dreamweaver CS4. Captulo 14. Publicacin del Sitio
372

Captulo 14. PUBLICACIN DEL SITIO
14.1. Algunas comprobaciones
Comprobacin del sitio
Antes de colocar nuestro sitio en Internet al alcance de cualquier usuario, es conveniente
realizar una comprobacin previa en nuestro ordenador de que todas las pginas funcionan
correctamente y se muestran tal y como las diseamos en un navegador web.
Esta comprobacin previa se debe hacer desde tres perspectivas distintas:
Comprobacin de que las pginas se muestran correctamente en los diferentes navegadores
existentes: que tanto los colores, como el tipo y el tamao de las fuentes,... se mantienen y se
muestran correctamente tal y como lo especificbamos al disearlas. Esto se puede hacer
obteniendo una vista previa de las pginas en los navegadores de destino.
Comprobacin de que no existen enlaces rotos que no llevan a ningn destino, dando
sensacin de mal funcionamiento global del sitio.
Comprobacin del correcto funcionamiento de la pgina en diferentes navegadores.
Adems de estas comprobaciones previas es bueno tener presente estos otros puntos:
Las pginas no deben tardar un tiempo excesivo en mostrar su contenido, ni en descargarse
en el navegador del usuario, esto puede provocar desnimo y que el usuario cambie de pgina
sin llegar a ver la nuestra.
El diseo debe ser atractivo y agradable para el usuario, pero no es conveniente recargar la
pgina con mucho recurso multimedia, pues podra producir el efecto contrario, que provoque
rechazo debido a la sobrecarga.
Igual de importante que el hecho de dotar de buenos contenidos a la pgina, es el hecho de
mantener este contenido es decir, aadir noticias nuevas, secciones, ... con el fin de mantener
al usuario atento a las novedades y no provocar en l desinters por nuestra pgina.
Comprobacin en distintos navegadores
Es conveniente realizar pruebas con distintos navegadores a medida que desarrollamos un
sitio web, para no encontrarnos con la desagradable sorpresa de que una vez terminado el
trabajo resulta que determinadas pginas no se ven correctamente con algn navegador.
Las pruebas mnimas deberan corresponder a probar la compatibilidad de nuestras pginas
con los navegadores ms utilizados por los usuarios en Internet: Internet Explorer, Netscape
Navigator y Mozilla Firefox.
Para realizar esta comprobacin elegimos la opcin de men Archivo>Comprobar
pgina>Compatibilidad con navegadores.
Dreamweaver CS4. Captulo 14. Publicacin del Sitio

373


Figura 14.1. Comprobar compatibilidad de pgina con navegadores.
Una vez realizada esta operacin se abre el panel Resultados situado en la parte inferior de la
ventana que nos permite observar las distintas advertencias que nos muestra Dreamweaver
acerca del diseo de nuestra pgina en relacin con los distintos navegadores configurados.

Figura 14.2. Compatibilidad con navegadores.
Dentro de esta misma pestaa y haciendo clic en el botn podremos seleccionar alguna
de las siguientes opciones:

Figura 14.3. Opciones de compatibilidad con navegadores.
Comprobar compatibilidad con navegadores: realiza la comprobacin de compatibilidad con
navegadores para la pgina actual.
Dreamweaver CS4. Captulo 14. Publicacin del Sitio

374

Editar lista de problemas ignorados: para mostrar u omitir la lista de errores de
modificacin en un documento independiente con extensin XML.
Configuracin: al seleccionar esta opcin aparecer un cuadro de dilogo en el que
podremos elegir para qu navegadores deseamos realizar la comprobacin (seleccionando la
casilla de verificacin al lado de su nombre) y a partir de qu versin (seleccionndola de entre
la lista desplegable que aparece al lado de cada uno de ellos), en funcin de los navegadores
que estimemos van a utilizar los usuarios de nuestra Web.

Figura 14.4. Opciones de configuracin de navegadores de destino.
En este mismo panel Resultados abierto en la parte inferior de la ventana del documento
tenemos disponibles otras opciones:
Validacin: consiste en validar el cdigo para localizar errores en las etiquetas o en la
sintaxis del mismo.

Figura 14.5. Ejemplo de validacin finalizada de un sitio web.
Verificador de vnculos: muestra vnculos rotos, externos, y archivos hurfanos en el sitio
para su posterior reparacin.


Figura 14.6. Verificador de vnculos.
Dreamweaver CS4. Captulo 14. Publicacin del Sitio

375

Informes de sitios: si pulsamos sobre en esta pestaa, automticamente se abre el
cuadro de dilogo Informes que nos permite generar un informe sobre el documento
actual, el sitio al completo, etc., dependiendo de lo que seleccionemos en el desplegable
Informe y adems seleccionar qu informe queremos generar, activando en el rbol
Seleccionar informes, lo que nos resulte pertinente. Una vez activado, se activa tambin el
botn Configuracin de informe ; si lo pulsamos se abre el cuadro Modificado
recientemente, que nos permite avanzar an ms en el informe.


Figura 14.7. Cuadro de dilogo Informes.

Dreamweaver CS4. Captulo 14. Publicacin del Sitio

376


Figura 14.8. Cuadro de dilogo Modificado recientemente.

Una vez pulsamos Aceptar en el cuadro de la Figura 14.8. y Ejecutar en el cuadro de la Figura
14.7., el panel Resultados muestra que el informe est en progreso mediante la activacin del
botn . Cuando ha terminado de ejecutarse, el panel Resultados muestra el informe en
pantalla, como en el ejemplo de esta figura:



Figura 14.9. Informe finalizado.

La botonera de la parte izquierda de Resultados nos ofrece algunas opciones ms:
Ms info.: esta opcin muestra un cuadro de dilogo con ms informacin acerca de
cada una de las advertencias mostradas, dependiendo de la ficha que tengamos activada en el
panel Resultados.
Dreamweaver CS4. Captulo 14. Publicacin del Sitio

377


Figura 14.10. Ejemplo de cuadro emergente al pulsar Ms info.
Guardar informe: si deseamos guardar el informe en un archivo debemos elegir esta
opcin (hay que recordar que el informe se genera en un archivo temporal y que, si no lo
guardamos, se borrar).
Examinar informe: muestra el informe en formato de pgina Web en un navegador, con
ms detalle, informando de los errores o avisos generados para cada uno de los navegadores
en sus distintas versiones, y siempre referidos a la pestaa que tengamos activada en
Resultados.
Vista previa en navegadores
Otra opcin de la que disponemos para comprobar el correcto funcionamiento de nuestro sitio
web en distintos navegadores es utilizar otra herramienta disponible en Dreamweaver
denominada Vista previa en el navegador. Esta herramienta est disponible a travs de los
mens de la aplicacin en la ruta Archivo>Vista previa en el navegador y, a continuacin
seleccionamos el navegador en el que queremos previsualizar nuestra pgina.

Figura 14.11. Archivo>Vista previa en el navegador.
Esta herramienta nos va a permitir comprobar de forma rpida y a medida que desarrollamos
nuestro sitio web el aspecto de las pginas en los distintos navegadores que seleccionemos.
Dreamweaver CS4. Captulo 14. Publicacin del Sitio

378

Esto es conveniente porque nos permite detectar errores que podremos evitar al seguir
desarrollando el sitio.
Como se observa en la figura anterior, aparecen varios navegadores configurados, eligiendo
cualquiera de ellos se generar una vista previa para dicho navegador. Tambin aparece otra
opcin denominada Editar lista de navegadores, que nos va a permitir aadir navegadores
para los cuales obtener esta vista previa. Si hacemos clic en esta opcin, aparecer el cuadro
de dilogo Preferencias en el cual, y dentro de la seccin Vista previa en el navegador,
podremos aadir y eliminar navegadores.

Figura 14.12. Cuadro Preferencias. Vista previa en el navegador.
Lgicamente para poder realizar estas operaciones los navegadores deben haber sido
instalados previamente en nuestro equipo.

RECOMENDACIN. Para comprobar la correcta visualizacin de nuestra pgina Web,
deberemos tener instalado en nuestro ordenador varios navegadores. Entre los ms utilizados
estn Internet Explorer, Netscape Navigator y Mozilla Firefox.


Para aadir un navegador slo tenemos que hacer clic en el botn y para eliminarlo
seleccionar uno de ellos y hacer clic en el botn . De la misma forma si queremos
modificar alguno de los ya configurados, slo tenemos que seleccionarlo y hacer clic en el
botn Editar .
Dreamweaver CS4. Captulo 14. Publicacin del Sitio

379

Si damos de alta un navegador nuevo nos aparecer un cuadro de dilogo con el ttulo Aadir
navegador , y si
modificamos uno ya existente aparecer otro cuadro de dilogo bajo el ttulo Editar navegador
. Tanto en un caso como
en el otro, los cuadros son similares. Nos permiten indicar:
Nombre: nombre identificativo del navegador que estamos configurando.
Aplicacin: en este campo debemos indicar la ruta donde se encuentra instalado el
navegador que estamos configurando, bien escribindola manualmente o seleccionando el
archivo ejecutable correspondiente al navegador haciendo clic en el botn Examinar y
navegando por las distintas carpetas de nuestro disco duro.
Predeterminado: para especificar de forma predeterminada en Dreamweaver si queremos
que este navegador sea el navegador principal o el navegador secundario.
Una vez indicados los datos necesarios, hacemos clic en el botn Aceptar para que los cambios
sean aplicados.
14.2. Publicacin del sitio
Una vez que tenemos nuestro sitio web completamente diseado en nuestro sistema de
ficheros local y que, adems, hemos solucionado todos los errores encontrados en l,
mediante las distintas herramientas antes comentadas ha llegado la hora de hacer accesible a
todos los usuarios nuestro sitio web.
Para ello es necesario alojar todas y cada una de las pginas que componen nuestro sitio en
algn espacio en Internet. Algunos proveedores de servicios en Internet ofrecen alojamientos
gratuitos, normalmente con poco espacio disponible (entre 5 y 10 Mb suele ser lo habitual) y
Dreamweaver CS4. Captulo 14. Publicacin del Sitio

380

con gran cantidad de publicidad que estar presente siempre que se visite una de nuestras
pginas.
Con lo cual si nuestra necesidad de espacio es mayor o, si no deseamos que la publicidad
interfiera y moleste a los visitantes de nuestro sitio ser conveniente contratar un espacio web
con algn proveedor, lgicamente previo pago por los servicios.
Antes de contratar un espacio web, debemos tener claro varios puntos:
No siempre el ms caro es el mejor proveedor de servicios, es mejor comparar precios y
ofertas de entre las muchas disponibles en Internet.
La cantidad de espacio web necesario para alojar nuestro sitio depender de la cantidad de
recursos y del tamao de los mismos que forman parte del sitio web, adems de las
previsiones de crecimiento que tengamos para dicho sitio.
Es bueno conocer de antemano la rapidez de acceso a las pginas alojadas por el proveedor
de servicios que vayamos a contratar.
Otro detalle importante es la posibilidad de disponer de estadsticas de nuestro sitio:
nmero de accesos a nuestro sitio web, nmero de pginas visitadas, preferencias de los
usuarios,...
Si queremos que los usuarios accedan a nuestra pgina, no a travs del nombre del servidor
que hemos contratado para alojar nuestro sitio Web, sino a travs de un nombre propio, es
decir de un dominio, deberemos contratar dicho dominio virtual y asociarlo al servidor donde
estn alojadas nuestras pginas.
La mayora de los proveedores de servicios se encargan de gestionar la compra del dominio
para nuestra pgina.

RECOMENDACIN. Es conveniente organizar nuestro sitio web separando los distintos
contenidos que lo componen en diferentes carpetas dndoles nombres descriptivos a dichas
carpetas, de forma que a simple vista podamos saber exactamente cul es la estructura de
nuestro sitio.


14.3. Configuracin del acceso remoto al servidor
Configuracin de la conexin remota con Dreamweaver
Una vez que poseemos un espacio web en Internet para alojar nuestro sitio web, el siguiente
paso a realizar es transferir todas las pginas que componen el sitio almacenadas en nuestro
disco duro (sitio local) al espacio disponible en Internet (tambin denominado sitio remoto).
Dreamweaver CS4. Captulo 14. Publicacin del Sitio

381

Para realizar esto, Dreamweaver dispone de una herramienta dentro de la seccin
Sitio>Administrar sitios o pulsando .
Al seleccionar esta opcin aparecer un cuadro de dilogo en el cual veremos todos los sitios
actualmente definidos en Dreamweaver y adems podremos crear un sitio nuevo o bien,
modificar uno ya existente.

Figura 14.13. Cuadro de dilogo Administrar sitios.
Tanto si decidimos crear un sitio nuevo pulsando Nuevo, como modificar uno ya existente
seleccionndolo en ese cuadro de dilogo y pulsando Editar, accedemos a la configuracin de
un sitio web mediante el cuadro Definicin del sitio para MiWeb (MiWeb es el sitio con el que
hemos trabajado durante todo el curso; dependiendo del sitio web seleccionado podr
aparecer otro nombre). En este caso accedemos a la pestaa Avanzadas, categora Datos
remotos, ya que en ella es donde podremos configurar la herramienta para transferir nuestro
sitio local al espacio disponible en Internet: sitio remoto y las opciones de transferencia
remota.
Dreamweaver CS4. Captulo 14. Publicacin del Sitio

382


Figura 14.14. Configuracin avanzada de datos remotos de un sitio web.
Como vemos en la lista desplegable Acceso existen muchas opciones disponibles. Para realizar
esta transferencia nosotros utilizaremos la opcin FTP por ser el protocolo ms habitual para
este tipo de operaciones.
El protocolo FTP se basa en una arquitectura cliente / servidor, donde nuestro ordenador es el
cliente y el remoto es el servidor.
Con los datos que nos habr facilitado nuestro proveedor de servicios de Internet, en nuestro
caso Mentor para el presente curso, y una vez elegida esta opcin deberemos completar los
siguientes parmetros:
Servidor FTP: nombre del servidor en el cual vamos a alojar nuestro sitio Web. En algunas
ocasiones deberemos indicar en este campo un nombre completo del tipo ftp.miservidor.com.
En este campo no se pueden introducir barras, ni carpetas, ni nombres de dominio. En el caso
de Mentor, el nombre del servidor ftp ser todo aquello que vaya detrs de la @ en la cuenta
de correo que nos proporcionaron en el aula Mentor cuando nos matriculamos en el curso; es
decir, si tenemos un email de Mentor como por ejemplo mgas0012@fresno.pntic.mec.es,
entonces nuestro servidor FTP se llamar fresno.pntic.mec.es.
Directorio del servidor: esta opcin no siempre es necesario utilizarla, pero en el caso de
que debamos colocar nuestros archivos en una carpeta especfica dentro del servidor y no en
el directorio raz del sitio, ser ste el campo donde deberemos indicarlo. En el caso de
Mentor, S es necesario indicar el nombre del directorio inicial remoto, que adems en
nuestro caso se llamar public_html.
Dreamweaver CS4. Captulo 14. Publicacin del Sitio

383

Usuario: nombre del usuario con el que nos identificaremos en el servidor remoto. En el
caso de Mentor, nuestro nombre de usuario ser todo aquello que vaya delante de la @ en la
cuenta de correo que nos proporcionaron en el aula Mentor cuando nos matriculamos en el
curso; es decir, si tenemos un email de Mentor como por ejemplo
mgas0012@fresno.pntic.mec.es, entonces nuestro nombre de usuario ser mgas0012.
Contrasea: palabra clave que junto con el nombre de usuario nos va a permitir conectarnos
al servidor remoto donde alojaremos nuestro sitio Web. Si no deseamos tener que introducir
la contrasea cada vez que nos conectemos al servidor remoto, slo tenemos que activar la
casilla de verificacin Guardar situada al lado de este campo. En el caso de Mentor, nuestra
contrasea ftp ser la misma que nos proporcionaron al matricularnos en el curso para la
cuenta de correo.
Usar FTP pasivo: si la configuracin de la transferencia requiere de este tipo de conexin
deberemos activar esta casilla.
Utilizar cortafuegos: si el ordenador desde el cual se va a conectar al servidor para realizar la
transferencia de archivos dispone de un cortafuegos o pertenece a una red que lo tiene,
deberemos activar esta casilla y haciendo clic en el botn Configuracin de cortafuegos,
indicar en la ventana que aparece el nombre del servidor que hace de cortafuegos, as como el
puerto de dicho cortafuegos.
Utilizar FTP seguro (SFTP): si el servidor remoto reconoce este tipo de protocolo de
transferencia de ficheros es recomendable activarlo, puesto que proporcionar ms seguridad
contra ataques de intrusos en las conexiones, que el protocolo FTP.
Mantener informacin de sincronizacin: activar si queremos tener activada la funcin de
Sincronizacin del sitio.
Cargar archivos en el servidor automticamente al guardar: deberemos activar esta casilla
si queremos que Dreamweaver al guardar los archivos despus de alguna modificacin los
cargue automticamente en el sitio remoto.
Permitir desproteger y proteger archivo: en el caso de que estemos diseando un sitio Web
entre un grupo de colaboradores, esta casilla nos permitir proteger los archivos remotos para
que no sufran alteraciones imprevistas. Si activamos esta casilla deberemos indicar tambin un
nombre para indicar la persona que requiere la proteccin, as como una direccin de correo
electrnico que permita a alguien que quiera modificar los archivos ponerse en contacto con
nosotros.

Ejercicio

El objetivo de este ejercicio es definir el acceso remoto a un sitio web, configurando el
espacio web que nos proporciona el Aula Mentor.

Accedemos a nuestro sitio Web. Desde el men Sitio >Administrar sitio y en el cuadro
que aparece, seleccionamos el sitio con el que estamos trabajando en el curso (por
ejemplo MiWeb). Hacemos clic en Editar y en el nuevo cuadro seleccionamos la ficha
Dreamweaver CS4. Captulo 14. Publicacin del Sitio

384

Avanzadas y la Categora Datos remotos.

Sigue el resto de los pasos que hemos detallado en 14.3. Configuracin del acceso
remoto al servidor. Configuracin de la conexin remota con Dreamweaver utilizando
tus propios datos.

Configura el servidor ftp, el directorio del servidor, el usuario y la contrasea con los datos
que te han proporcionado en tu Aula Mentor al matricularte en este curso.

El resto de valores los configuramos en funcin de nuestras necesidades atendiendo a las
explicaciones que hemos visto en este captulo y dependiendo de las caractersticas de la
conexin. Si tienes problemas en la conexin prueba a activar la opcin Utilizar FTP
pasivo.

Al hacer clic en el botn Aceptar nuestro sitio remoto queda configurado y a la espera de
que le sean transferidas las distintas pginas que conforman nuestro sitio web.

Si vas ahora al panel Archivos, seleccionas Vista Remota y pulsas en el botn Conectar al
servidor remoto, podrs conectarte a tu sitio remoto que estar listo para comenzar a
transferir archivos.

14.4. Transferencia del sitio al servidor remoto
Transferencia del sitio Web
Una vez configurado la conexin remota al servidor donde alojaremos nuestro sitio Web,
vamos a realizar la transferencia de archivos, desde nuestro ordenador hasta el servidor
remoto.
El primer paso a realizar es expandir el panel Archivos si est ya activo. Caso que no est en el
grupo de paneles, lo podemos activar mediante el men Ventana>Archivos o bien pulsando la
tecla F8.

Figura 14.15. Panel Archivos. Vista local.
Dreamweaver CS4. Captulo 14. Publicacin del Sitio

385

Desde este panel y haciendo clic en el botn Expandir/contraer , expandimos el panel de
archivos y aparece una ventana dividida en dos partes.
En la parte de la derecha aparecen los archivos de nuestro sitio local, mientras que en la parte
de la izquierda nos mostrar los archivos del servidor remoto cuando establezcamos la
conexin.

Figura 14.16. Panel Archivos expandido.

RECOMENDACIN. A pesar de que Dreamweaver nos ofrece la posibilidad de trabajar en el
sitio remoto directamente, lo recomendable es trabajar siempre en modo local y cuando
tengamos terminado y probado el sitio web a nuestro gusto, entonces transferirlo al servidor
remoto.

Desde este panel, podremos realizar las siguientes acciones, haciendo clic en los diferentes
botones que contiene:
Conectar al servidor remoto: se utiliza para conectarse al servidor remoto
(lgicamente antes de poder utilizar esta funcionalidad debemos haber definido un sitio
remoto, tal y como hemos visto en este captulo). En el caso de que la conexin no se produzca
con xito, se mostrar un mensaje de error; si por el contrario la conexin se lleva a cabo en la
parte izquierda de la ventana aparecern listados los archivos alojados en el servidor remoto.
Dreamweaver CS4. Captulo 14. Publicacin del Sitio

386


Figura 14.17. Archivos colocados en sitio remoto.
Actualizar: nos permite actualizar los archivos colocados en el sitio remoto.
La forma ms lgica de actualizar un sitio web, una vez que ya se ha alojado en el servidor
remoto, es transferir slo aquellas pginas y/o elementos que hayan sufrido alguna
modificacin y no transferir siempre el sitio web completo, para ello Dreamweaver dispone de
una herramienta denominada Sincronizacin que resolver esta tarea por nosotros.
Esta herramienta va a comparar los archivos de nuestro sistema de ficheros local, con los
archivos alojados en el servidor remoto as como la fecha de la ltima vez que fueron
modificados. Aquellos archivos que hayan sido modificados desde la ltima transferencia o los
archivos nuevos son subidos al servidor remoto.
Para activar esta herramienta elegimos la opcin Sitio>Sincronizar dentro del panel del sitio
expandido y se abre el cuadro de dilogo Sincronizar
archivos, que cuenta con varias opciones:
Dreamweaver CS4. Captulo 14. Publicacin del Sitio

387


Figura 14.18. Cuadro de dilogo Sincronizar archivos.
Sincronizar: nos va a permitir especificar sobre qu archivos queremos realizar la
operacin de sincronizacin.
o Todo el sitio: realizar la sincronizacin sobre todos los archivos del sitio
Web.
O Archivos remotos seleccionados solamente: nicamente realizar la
sincronizacin sobre los archivos seleccionados previamente.
Direccin: en este campo podremos indicar en qu sentido queremos que se haga la
transferencia de archivos:
O Colocar archivos ms nuevos en remoto: todos los archivos locales ms
actuales que los remotos son transferidos al servidor remoto.
o Obtener archivos ms nuevos de remoto: los archivos remotos ms actuales
que los locales son transferidos a nuestro sistema de ficheros local.
o Obtener y colocar archivos ms nuevos: transfiere los archivos ms nuevos
tanto en el sistema de ficheros local como en el remoto.
Eliminar archivos remotos no existentes en la unidad local: si activamos esta casilla,
aquellos ficheros del sistema de ficheros destino que no existan en el sistema de
ficheros origen sern eliminados al realizar la transferencia.
Vista previa...: antes de realizar la transferencia de archivos, si lo pulsamos, abrir el
cuadro de dilogo Sincroniza, que nos mostrar cules sern las operaciones que se
realizarn en cada uno de los sistemas de ficheros tanto el local como el remoto; nos
permite seleccionar cualquier archivo de los que van a sufrir la sincronizacin y
eliminarlo, omitirlo, marcarlo como sincronizado o comparar las versiones local y
remota del mismo, utilizando la botonera en la parte inferior del cuadro.
Dreamweaver CS4. Captulo 14. Publicacin del Sitio

388


Figura 14.19. Cuadro de dilogo Sincroniza.
Registro FTP del sitio: si durante la transferencia de archivos se produce algn tipo de
error, Dreamweaver lo registra en un archivo especial que ser visible dentro del panel
Resultados. Al pulsar el botn Registro FTP del sitio, este panel se activa en pantalla y
podremos ver las incidencias ocurridas en la pestaa Registro FTP del Panel.
Obtener archivo(s): este botn nos va a permitir transferir los archivos o carpetas que
hayamos seleccionado en el sitio remoto hasta nuestro sistema de ficheros local.
Colocar archivo(s): haciendo clic en este botn realizaremos la operacin inversa a la
anterior, es decir nos permitir subir archivos desde nuestro equipo hasta el servidor remoto
donde alojaremos nuestro sitio web.
Proteger archivo(s): nos va a permitir proteger archivos para que no sean modificados
sin nuestro consentimiento.
Desproteger: permitir desproteger archivos que hayamos protegido con anterioridad.
Estas dos ltimas opciones sern muy tiles sobre todo si trabajamos en grupo a la hora de
disear nuestro sitio web.
14.5. Visualizar el sitio Web en Internet
Independientemente de que hayamos transferido el sitio web utilizando Dreamweaver o un
programa gestor de FTP independiente de los que se pueden encontrar en la red de forma
gratuita o de pago, el acceso a la web utilizando un navegador es idntico.
Centrndonos en el sitio remoto que hemos configurado en el servidor de Mentor, y al que
tendremos que transferir nuestro ejercicio global siguiendo los pasos del apartado 14.4., para
Dreamweaver CS4. Captulo 14. Publicacin del Sitio

389

acceder a la pgina web de nuestro usuario, debemos teclear en la barra de navegacin de un
navegador web algo similar a: http://fresno.pntic.mec.es/~mgas0012.
En el caso del ejemplo, la pgina principal de nuestro sitio Web se debe denominar
index.html, pues si adjudicamos otro nombre, entonces deberemos escribirlo en la barra de
direccin del navegador. Por ejemplo, si nuestra pgina inicial se llama inicio.html,
deberamos escribir en el navegador: http://fresno.pntic.mec.es/~mgas0012/inicio.html.
Por otro lado, y siguiendo con nuestro ejemplo, los archivos locales se habrn transferido tal
cual los vemos en local al servidor remoto, y no dentro de una carpeta, porque si hubiera
estado incluidos en el interior de una carpeta llamada por ejemplo ejercicio_global, entonces
tendramos que indicarlo en la barra de direccin del navegador tecleando:
http://fresno.pntic.mec.es/~mgas0012/ejercicio_global.

RECOMENDACIN. El carcter ~ se obtiene con la combinacin Alt-126 (del teclado
nmerico).

También podría gustarte