1

Qu es DREAMWEAVER ?
Adobe Dreamweaver es una aplicacin en forma de estudio (basada en la forma de estudio de Adobe Flash) enfocada a
la construccin y edicin de sitios y aplicaciones Web basados en estndares. Creado inicialmente por Macromedia
(actualmente producido por Adobe Systems).
Es el programa de este tipo ms utilizado en el sector del diseo y la programacin web, por sus funcionalidades, su
integracin con otras herramientas como Adobe Flash y, recientemente, por su soporte de los estndares del World Wide
Web Consortium.
Su principal competidor es Microsoft Expression Web y tiene soporte tanto para edicin de imgenes como para
animacin a travs de su integracin con otras. Hasta la versin MX, fue duramente criticado por su escaso soporte de
los estndares de la web, ya que el cdigo que generaba era con frecuencia slo vlido para Internet Explorer, y no
validaba como HTML estndar. Esto se ha ido corrigiendo en las versiones recientes.
Adobe Dreamweaver permite crear sitios de forma totalmente grfica, y dispone de funciones para acceder al cdigo
HTML generado. Permite la conexin a un servidor, a base de datos, soporte para programacin en ASP, PHP,
Javascript, cliente FTP integrado, etc.
Adobe Dreamweaver es la principal competencia de Microsoft FrontPage.




Proveedor
Versin
mayor
Versin menor/nombre
alternativo
Fecha de
publicacin
Notas
1.0 Diciembre de 1997
Primer lanzamiento, slo para
Mac OS.
1.0
1.2 Marzo de 1998 Primera versin para Windows.
2.0 2.0 Diciembre de 1998
4.2 Diciembre de 1999
3.0
UltraDev 1.0 Junio de 1999
4.0 Diciembre de 2000
4.0
UltraDev 4.0 Diciembre de 2000
6.0 MX 29 de mayo de 2002
7.0 MX 2004
10 de septiembre de
2003

Macromedia
8.0 8.0
13 de septiembre de
2005

2
9.0 CS3 16 de abril de 2007
Sustituye a Adobe GoLive en la
serie Creative Suite.
10.0 CS4
23 de septiembre de
2008

11.0 CS5 12 de Abril de 2010
11.5 CS5.5 12 de Abril de 2011
12.0 CS6 21 de Abril de 2012
Adobe
13.0 CC Abril de 2013 Creative Cloud.

Color Proveedor Significado
Rojo
Macromedia ( 1.0 - 8.0 )
Versin antigua.
Amarillo
Adobe ( 9.0 - 11.5 )
Versin antigua; soportada an.
Verde
Adobe ( 12.0 - 13.0 )
Versin actual.
Dreamweaver es la herramienta de diseo de pginas web ms avanzada, tal como se ha afirmado en muchos
medios. Aunque sea un experto programador de HTML el usuario que lo maneje, siempre se encontrarn en este
programa razones para utilizarlo, sobretodo en lo que a productividad se refiere.
Cumple perfectamente el objetivo de disear pginas con aspecto profesional, y soporta gran cantidad de tecnologas,
adems muy fciles de usar:
- Hojas de estilo y capas
- Javascript para crear efectos e interactividades
- Insercin de archivos multimedia...
Adems es un programa que se puede actualizar con componentes, que fabrica tanto Macromedia como otras
compaias, para realizar otras acciones ms avanzadas.
En resumen, el programa es realmente satisfatorio, incluso el cdigo generado es de buena calidad. La unica pega
consiste en que al ser tan avanzado, puede resultar un poco difcil su manejo para personas menos experimentadas en el
diseo de webs.
Dreamweaver ha evolucionado mucho en su versin 4, que incluye soporte para la creacin de pginas dinmicas de
servidor en ASP, con acceso a bases de datos (versin Ultradev) y una mayor integracin con otras herramientas de
Macromedia como Fireworks.
Dreamweaver CS6 es un software fcil de usar que permite crear pginas web profesionales.
3
Las funciones de edicin visual de Dreamweaver CS6 permiten agregar rpidamente diseo y funcionalidad a las
pginas, sin la necesidad de programar manualmente el cdigo HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc.., de una forma muy
sencilla y visual.
Adems incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los
sitios web, actualizando el sitio web en el servidor sin salir del programa.



Caractersticas ventajas y usos del programa
( DREAMWEAVER CS6 )


Fluid grid layout (Diseo de grilla fluida): Espectacular! Ahora
podemos crear diseos web compatibles con diferentes plataformas y
navegadores con el eficaz sistema de diseo de Fluid grid layout
(Diseo de grilla fluida) basado en CSS3 que permite lograr webs multi
screen.
Con Dreamweaver CS6 podemos tener un diseo que se adapte a los
diferentes dispositivos, llmese smartphone, tablet o computadora.




Transiciones CSS3: Podemos animar los cambios de propiedades CSS como
transiciones para que los diseos web cobren vida con llamativos efectos y todo
sto sin tener que escribir el cdigo.
Panel dedicado para poder configurar transiciones con puro CSS.




Integracin de Adobe Business Catalyst: Utilice el panel integrado de Business
Catalyst en Dreamweaver para conectar y editar los sitios que cree con Adobe
Business Catalyst (disponible por separado). Cree sitios de comercio electrnico
con la solucin alojada.




4

Compatibilidad mejorada con jQuery Mobile: Disee aplicaciones nativas para
plataformas iOS y Android gracias a la compatibilidad actualizada para el
framework jQuery Mobile. Cree apps para llegar al pblico de dispositivos mviles
al tiempo que simplifica su flujo de trabajo de desarrollo mvil.




Compatibilidad con PhoneGap actualizada: La compatibilidad actualizada con
Adobe PhoneGap simplifica la creacin y la agrupacin de apps nativas para
Android e iOS. Cree apps para dispositivos mviles mediante la reorganizacin
del cdigo HTML. Utilice emuladores de PhoneGap para comprobar sus diseos.



Una de las nuevas caractersticas de Adobe Dreamweaver CS6 son las posibilidades que ofrece para crear una
composicin lquida. Esto es adaptar tu diseo a los distintos formatos de los dispositivos existentes: mvil, tablet y
computadora.
Incluye soporte con jQuery y tambin con jQuery Mobile. jQuery Mobile nos permite hacer un sitio web muy al estilo de la
interfaz del iPhone, pero con la facilidad de que escribimos html como normalmente lo hacemos y el framework lo
transforma.
Podemos hacer uso de PhoneGap para exportar nuestros sitios o aplicaciones en HTML a aplicaciones nativas para
Android, iPhone e incluso Windows Phone.
El problema principal de Dw es que la visualizacin preliminar de tu sitio nunca se vea a cmo en realidad era en el
navegador, y gran parte de la culpa era la resolucin de nuestra pantalla, o la pantalla del editor. Ahora podremos probar
nuestro sitio desde diferentes resoluciones y asegurando an ms que nuestro contenido se vea como en realidad se
debera ver en un navegador, aunque tambin sabemos que no es 100% lo que vemos lo que obtenemos.



Definir el entorno de ( DREAMWEAVER CS6 )
Pantalla de inicio, las Barras, los Paneles e Inspectores, y poder diferenciar
entre cada uno de ellos. Nombre de cada uno de ellos y para que nos
sirven. Uso de las vistas Diseo y Cdigo.
5

La pantalla inicial
Al arrancar Dreamweaver aparece una pantalla inicial como sta, vamos a ver sus componentes fundamentales.


1.- Las barras.
2.- Las pestaas de documentos.
3.- La barra de estado.
4.- El panel de propiedades.
5.- Area de paneles.
6.- Paneles y ventanas.
7.- Linea inferior de pestaas.
8.- Vista diseo del documento.
9.- Vista cdigo del documento.
1.- Las barras
La barra de la aplicacin.

6
La barra la aplicacin se incorpor en la versin anterior de Dreamweaver. Si tenemos la ventana maximizada veremos
todos los elementos de la barra ocupando una sola lnea, si no, ocuparn dos lneas, como en la imagen superior.
Esta barra contiene los siguientes elementos: los mens (en la imagen, en la parte inferior), varios botones propios de
la aplicacin, el conmutador de espacio de trabajo y una caja de bsquedas para obtener ayuda on line.

Los botones propios de la aplicacin, que aparecen junto al icono, nos permiten (de derecha a izquierda) cambiar entre la
vista de diseo o cdigo, acceder a las extensiones que se pueden aadir, o al administrador de sitios.

Ms hacia la derecha observamos el conmutador del espacio de trabajo, como un desplegable. Un espacio de trabajo es
la configuracin del entorno (paneles visibles y su disposicin) que podemos guardar y cargar.
Los mens, estn agrupados en categoras.

Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden
insertar en Dreamweaver. Todas las opciones de Dreamweaver son accesibles a travs de los mens, aunque en
ocasiones nos enven a los paneles.
2.- Las pestaas de documento.

Cada archivo que tengamos abierto, mostrar una pestaa con su nombre, lo que nos permitir cambiar de uno a otro
fcilmente. Si junto al nombre aparece un *, indica que ese archivo tiene cambios sin guardar. Podemos cerrar cada
documento clicando en el aspa de la derecha, o acceder a otras acciones haciendo clic con el botn derecho, como
Cerrar otros archivos.
Debajo de las pestaas encontramos los archivos a que utiliza nuestra pgina, como la hoja de estilos, archivos
JavaScript, etc... pudiendo acceder a ellos con un clic. Esto nos ahorrar bastante tiempo.
3.- La barra de estado.
7

Esta barra la encontramos debajo de la ventana de documento, y nos da informacin sobre el mismo.
A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas completas. Siguiendo hacia la
derecha tenemos las herramientas de Seleccin, Mano (para desplazarse) y Zoom. Ms a la derecha encontramos tres
iconos para ver la pgina en tres tamaos de pantalla: mvil, tableta y PC escritorio.Y al final hay otros datos como el
tamao de la ventana, el tamao de la pgina o su codificacin.
Estas son las barras que siempre veremos en la aplicacin. A parte, existen otras que podemos ver u ocultar desde el
men Ver Barras de herramientas.





La barra de herramientas estndar.

La barra de herramientas estndar contiene iconos para realizar las acciones ms habituales del men Archivo y
Edicin. De izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe Bridge, Guardar, Guardar todo, Imprimir
el cdigo fuente, Cortar, Copiar, Pegar, Deshacer y Rehacer. Esta barra puede ser muy til, pero en realidad casi
todo el mundo usa esos comandos directamente con el teclado (Ctrl + G para guardar, Ctrl + C para copiar, etc.)
8
La barra de herramientas de documento.

La barra contiene iconos que nos permiten cambiar entre las distintas vistas de edicin y la vista en vivo, vistas
previa en multipantalla, acceder cmodamente al ttulo de la pgina, o realizar las distintas opciones de validacin
que nos ofrece el programa.
La barra de representacin de estilos.

Esta barra, menos utilizada, nos permite ver la apariencia de nuestra web en distintos dispositivos, si estamos
utilizando hojas distintas que dependan del eso. Hay varias opciones, como las de ver los estilos que dependen de
pseudo clases activas, como cuando el cursor est sobre un elemento.
La barra de navegacin con navegador.

Esta barra nos permite usar Dreamweaver como un navegador web y navegar por las pginas de nuestro sitio,
aunque slo tiene sentido con la Vista en vivo.

Algunos paneles, como Insertar nos permiten colocarlo como otra barra de herramientas.



4.- El panel de propiedades (inspectores y paneles )
Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles (ventanas)
o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian
dependiendo del objeto seleccionado, mientras que el panel nos da acceso a opciones generales fijas.
A travs de la opcin Ventana, de la barra de mens, es posible mostrar u ocultar cada uno de los paneles o inspectores.
A continuacin vamos a ver el inspector de Propiedades y ms adelante veremos el panel Insertar.
El inspector de Propiedades
9

El inspector de Propiedades muestra las opciones propias del objeto o texto seleccionado, permitindonos editarlas, por
lo que se convierte en uno de los elementos ms utilizados en Dreamweaver. Por ejemplo, cuando el elemento
seleccionado sea una imagen, como sucede en la imagen que puedes ver, mostrar su ubicacin, dimensiones, peso,
clase, etc...
En otros elementos, como prrafos y estilos, este panel puede mostrar dos tipos de propiedades, HTML y CSS, que
podemos aplicar a los diferentes elementos de la pgina Web que estemos diseando.

5.- rea de paneles.
En la parte derecha de la pantalla tenemos el rea o pila de paneles.

Inicialmente, el rea de paneles contiene unos determinados elementos, pero podemos quitar y poner los elementos
que queramos. Para quitar un elemento del rea de paneles basta hacer clic con el botn derecho sobre su nombre para
que aparezca un men con la opcin Cerrar. Para aadir un elemento al rea de paneles hay que ir al men Ventana y
hacer clic en el elemento que queramos aadir, si el elemento se abre en una ventana flotante, bastar arrastrarlo al rea
de paneles.

10
6.- Paneles y Ventanas.
Una vez tenemos el ea de paneles con los elementos que ms nos interesen, podemos abrirlos o desplegarlos de tres
formas.
Abrir el panel dentro del rea de paneles. Para ello primero hay que expandir el rea de paneles pulsando el botn de
la parte superior derecha , a continuacin, basta hacer clic en cada panel para que se abra dentro del rea de
paneles. Para cerrar el panel hacer doble clic.
Por ejemplo, en la siguiente imagen vemos el panel Archivos abierto dentro del rea de paneles. Se pueden abrir
varios paneles a la vez y ajustar sus tamaos colocando el cursor en el borde inferior y arrastrndolo.

Abrir el panel al lado del rea de paneles. Para ello hay que partir del rea de paneles sin expandir, y al pulsar en un
panel, este se abrir pegado al lado, como vemos en la siguiente figura.
11

Abrir como panel flotante. Para ello hay que pinchar en el ttulo del panel y arrastar el panel fuera del rea de paneles,
el panel se puede colocar en cualquier zona de la pantalla, incluso fuera de la pantalla de Dreamweaver. Al hacer doble
clic en el ttulo del panel, este se contrae pero sigue flotando en la misma posicin. Para expandirlo, volver a hacer doble
clic. En al siguiente imagen vemos el panel Archivos flotando y epandido.
12

Hemos visto un inspector y ahora vamos a ver un panel, el panel Insertar.
El panel Insertar.
En el panel Insertar, encontramos todos los elementos que podemos encontrar en el men Insertar, clasificados en
categoras. Podemos emplearlo para insertar imgenes, enlaces, multimedia, tablas, formularios... cualquier
elemento que nuestra web necesite.

Como vemos en las imgenes, es posible configurar este panel para verlo como men (imagen anterior), como panel
flotante o como una barra de herramientas integrada en la ventana de trabajo (imagen siguiente)
13
.


Abrir y cerrar paneles
Todos los paneles son accesibles a travs del men Ventanas.
Para cerrar un panel, basta con hacer clic derecho sobre su pestaa y elegir Cerrar del men.

Un comando que puede resultarnos til es la tecla F4. Al pulsarla, todos los paneles se ocultan. Para mostrarlos, la
volvemos a pulsar.
Acoplar y desacoplar paneles
A la derecha (por defecto) encontramos la rea o pila de paneles.
Algunos paneles aparecen acoplados. Eso quiere decir que se muestran como pestaas, pudiendo ver el que queramos
haciendo clic, pero sin poder ver dos a la vez.
Para desacoplarlos, basta con hacer clic sobre la pestaa y arrastrar.
14



Al mover el panel sobre distintos elementos, veremos que lo podemos acoplar en otros lugares (zonas de colocacin),
que aparecern resaltados en azul. Esto nos permite intercambiar paneles entre grupos acoplados o dejarlos como
flotantes si los sacamos fuera.
Incluso algunos paneles, como el panel Insertar, nos permiten acoplarlos en la barra de herramientas.
Cambiar el aspecto del panel insertar
Es posible cambiar el aspecto del panel, podemos arrastrarlo hasta la barra de mens para que tome un aspecto de
fichas, como se aprecia en la siguiente imagen:

Pero tambin puede tener este otro aspecto, en men:


Para alternar estos aspectos, hacemos clic derecho sobre el nombre en el men y
seleccionamos la opcin Mostrar como Fichas o Mostrar como men, segn el caso.




15
7.- Lnea inferior de pestaas.
En al parte inferior de la pantalla tenemos una lnea que contiene varias pestaas (Buscar, Validacin , ... )

Para abrir una pestaa basta hacer clic sobre ella, para cerrarla hacer doble clic en su ttulo.
Estas pestaas se pueden configurar de forma similar a como acabamos de ver con el rea de paneles. Es decir, se
pueden aadir y quitar, convertir en flotantes, etc.
8.- Vista diseo del documento.
Podemos editar el documento con distintas vistas, que puedes cambiar travs de la barra de documento:

La vista Diseo
La vista Diseo permite trabajar con el editor visual.

Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable.
16
9.- Vista cdigo del documento.

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


El cdigo que vemos es el que genera Dreamweaver al editar el contenido en la vista Diseo.
La vista Dividir
La vista Dividir permite dividir la ventana en dos zonas: Cdigo y Diseo. La zona izquierda muestra el cdigo fuente, y la
derecha el editor visual. Cuando se realiza un cambio en alguna de las zonas, este cambio se aplica directamente sobre
la otra.
17


La Vista en vivo
La vista en Vivo es una mejora reciente de Dreamweaver. Nos ofrece una vista del resultado final no editable. A
diferencia de la vista Diseo, que nos permite editar los elementos, esta vista nos permite interactuar con ellos, tal como
lo haramos con el navegador.
La funcin de esta vista es la de ahorrarnos tiempo, al no tener que comprobar que pequeos cambios se previsualizan
correctamente en el navegador.
No obstante, siempre hay que comprobar la pgina con los principales navegadores del mercado que sern los que
emplearn nuestros visitantes. algunos elementos se ven de forma muy distinta si los vemos en la vista de diseo, en la
vista en vivo o en el navegador. Tambin es conveniente comprobar la pgina con los distintos tamaos de pantalla,
telfono mvil, tablet y PC.



18
La vista Cdigo en vivo
Esta vista se emplea conjuntamente con la Vista en vivo. Divide la pantalla como la vista Dividir, pero sin que podamos
editar el cdigo. Lo que hace es que al seleccionar partes de la web en la Vista en vivo, se seleccione su correspondiente
cdigo fuente y refleja los cambios dinmicamente al interactuar con la pgina. Si adems pulsamos el botn
podremos ver los estilos asociados a cada elemento. Por ejemplo, al colocar el cursor sobre un prrafo
podemos ver sus mrgenes, como se aprecia en la siguiente imagen.













19
La ayuda


A travs del men Ayuda puedes ir a varias
opciones, veamos algunas de ellas:
Si seleccionas la opcin Ayuda de
Dreamweaver o simplemente pulsando F1 se
accede a la ayuda en lnea de Adobe
Community Help donde puedes buscar por
temas o por bsqueda de palabras clave, .
Ayuda de Business Catalyst que es un
sistema de alojamiento de pginas web con
funciones adicionales. Es de Adobe y hay
diferentes opciones de pago al mes.
Ayuda de Spry Framework. Veremos Spry
Framework a partir de la unidad 14.
Referencia abre un panel en el que
encontrars la sintaxis y descripcin de las
etiquetas HTML.
Acceder al Centro de soporte de
Dreamweaver en la web.
Dreamweaver Exchange es un sistema para
compartir extensiones.
Acceder al Foros en lnea de Adobe.
Adems, en la barra de aplicacin encontramos
una caja de bsqueda. Al introducir los
trminos de la bsqueda y buscar, iremos a la
ayuda online de Adobe.









20
Forma de crear y editar un Sitio Local sin conexin
a Internet.
El desarrollo de un proyecto de pginas web comienza mucho antes de montar unas pginas y/o editarlas con un editor
como dreamweaver. Este trabajo previo es definitivo para que haya un buen diseo tanto de navegacin como de
grficos y textos, as como rapidez y versatilidad en el acceso. Los elementos previos a la creacin de las pginas son:

Mapa de navegacin:
cmo va a estar distribuida la informacin dentro de las pginas y dnde va a estarlo. Tener definida la navegacin y el
lugar donde va a estar es importante porque el editor tendr esta informacin de la misma forma y con ella se podr
hacer la edicin y actualizacin de las pginas y los enlaces de forma automtica. Adems, todos los elementos
utilizados tanto las pginas, como los grficos, sonidos, etc., para ser localizados dentro de la web tienen una direccin y
esta direccin depende de la estructura de navegacin y del lugar donde se guarde, por tanto, si la direccin esta errada
no se podr encontrar el elemento que se busca.
Diseo grfico:
el diseo previo de las pginas, no obligatorio pero si muy recomendable, (no de todas, usualmente se hace de la pgina
principal y de alguna otra) usualmente con un programa grfico como el photoshop o el illustrator, brinda la oportunidad
de experimentacin y creatividad que el editor no permite,
pruebas de color, fondos, botones de navegacin, fuentes, diagramacin, etc. Otra razn importante para este diseo
previo es la distribucin del espacio de la pgina en el editor, la forma y el lugar como se ver la informacin a medida
21
que se vaya navegando: la utilizacin y el nmero de frames y/o capas, la apertura de nuevas ventanas, las partes de la
pantalla que sern estticas y las que no, etc. Adems,
de este boceto se podrn sacar los elementos necesarios para utilizarlos en la creacin de las pginas como los
botones, rollovers, logos, etc.
Cuando estos elementos estn definidos se puede pasar al editor.

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

Crear o editar un sitio web sin conexin a Internet

Una vez creadas las carpetas que formarn la estructura del sitio local, o por lo menos la carpeta raz, ya es posible
definir el nuevo sitio.
Para ello hay que dirigirse al men Sitio, a la opcin Administrar sitios... o directamente a Nuevo sitio.

A travs del panel Archivos, se puede cambiar a cada uno de los sitios definidos.
Tambin podemos acceder desde el icono de acceso rpido de la barra de la aplicacin a la opcin Administrar sitios
o Nuevo sitio...


23
En el caso de haber seleccionado la opcin Administrar sitios, aparece una ventana que contiene la lista de sitios
locales definidos

Pueden existir varios sitios locales en una misma computadora, como podemos ver en la imagen.
Desde esta ventana podemos realizar varias acciones. Debajo de la lista de sitios tenemos cuatro botones
que nos permiten borrar un sitio, editarlo, duplicarlo y exportarlo.
A continuacin tenemos otros cuatro botones:
- Importar sitio. Si previamente lo hemos exportado, normalmente, desde otro ordenador.
- Importar sitio de Business Catlyst. Catalyst es un sitstema de hospedaje de pago de Adobe.
- Nuevo sitio. A continuacin explicaremos esta opcin.
- Nuevo sitio de Business Catlyst.
En la parte inferior derecha tenemos el botn Listo que nos abrir el sitio seleccionado.
24
Configurar un sitio local
Tanto si se pulsa el botn Nuevo sitio, como si se elige el botn Editar, se mostrar la misma ventana en la que definir o
modificar las caractersticas del sitio.

Las opciones del sitio se agrupan en diferentes categoras que aparecen en la parte izquierda. Para visualizar las
caractersticas de una categora basta con seleccionarla de la lista haciendo clic en ella.
Las dos nicas opciones imprescindibles son las que encontramos en la categora Sitio, y son las nicas que
cambiaremos: Vamos a ver los datos que hay que editar para la categora Datos locales.
Debe definirse el Nombre del sitio, que nicamente nos servir para identificarlo en la lista de sitios. La Carpeta del sitio
local, que es en la que se encuentra el sitio dentro del disco duro local. La carpeta puede contener ya archivos o no.
Estas dos caractersticas son las imprescindibles para definir un sitio local. El resto son opcionales. Las dems opciones
en este momento no nos interesan, ya que estamos definiendo el sitio local, y no es necesario establecer los datos del
servidor en el que estar el sitio remoto.
Despus de rellenar los datos pulsamos el botn Aceptar y abrimos el sitio.

25
Abrir un sitio
Para abrir un sitio ya definido hay que dirigirse al men Sitio, a la opcin Administrar sitios.... seleccionar el sitio de la lista
de sitios y pulsar sobre el botn Listo.
Tambin podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el men desplegable Archivos.


Ver el sitio
El panel Archivos (men Ventana Archivos o tecla F8) es uno de los paneles ms importantes de Dreamweaver, ya
que nos da acceso a los archivos del sitio.

En este caso vemos todos los documentos creados en nuestro sitio buscar.htm, paraplantilla.htm, platossemana.htm,
postresemana.htm y las carpetas imagenes y varios.
Es posible visualizar un sitio en el panel Archivos o en una ventana. Para cambiar de una vista a otra hay que pulsar
sobre el botn Expandir que aparece en la parte superior del panel y de la ventana.
Esto nos sirve para ver a la vez el sitio local (el de nuestro equipo) y el sitio remoto (el del servidor), y poder, por ejemplo,
sincronizar los archivos, o compararlos. Tambin el servidor de pruebas o las bases de datos.
26
En esta imagen, se visualiza el remoto (a la izquierda) todava vaco, y el sitio local (a la derecha) con nuestros archivos.

Dreamweaver guarda la cach de nuestro sitio, cmo se organizan los archivos y se relacionan entre ellos. Por eso, si
cambiamos el nombre de un archivo o su carpeta desde Dreamweaver, automticamente actualizar todas las
referencias a ese archivo (enlaces desde otras pginas, origen de la imagen, etc).
En cambio, si realizamos estos cambios desde fuera de Dreamweaver, las pginas no se mostrarn correctamente: no
aparecern imgenes, no funcionarn enlaces, etc, ya que Dreamweaver simplemente no encontrar la pgina.
Al modificar algn objeto que es referenciado por algn otro documento, se muestra una ventana similar a sta, que
indica los documentos que hacen referencia a dicho objeto, y que pueden ser actualizados para que no se produzcan los
problemas antes mencionados.


27
Simplemente hay que pulsar sobre el botn Actualizar, aunque esto depender de si tenemos configurada la opcin
Mensaje al actualizar vnculos si movemos archivos. Lo cual podemos establecer desde el men Edicin, opcin
Preferencias, categora General.

Subir archivos al servidor
Cuando quieras visualizar el sitio en Internet (al terminar el curso o para hacer pruebas) debers subir los archivos al sitio
que hayas contratado o conseguido gratuitamente.
Algunos sitios gratuitos slo permiten que subas archivos va web, por lo que debers ir subiendo uno a uno cada
archivo y creando las carpetas t mismo. Este proceso puede hacerse muy largo y debes tener mucho cuidado en
mantener la estructura tal y como se encuentra en tu carpeta del disco duro. Si no los enlaces no funcionarn
correctamente, y es posible que algunas imgenes no se muestren.
Para subir los archivos va web debers seguir las instrucciones que te proporcionar tu servidor.
La alternativa es un servidor FTP, que se utiliza en todos los sitios de pago y en algunos gratuitos. Esta forma es, de
lejos, mucho mejor que la anterior.
Va FTP puedes ver el contenido de tu sitio como una carpeta ms (igual que en el Explorador de Windows) y,
obviamente, nos es mucho ms til para subir los archivos.
Uno de los programas gratuitos ms utilizados es FileZilla, desde su pgina web podrs descargarte el programa.
Una vez instalado, abre el programa y haz clic en Archivo Gestor de sitios y luego en Nuevo sitio para configurar un
nuevo sitio FTP.

28

Aqu debers introducir los datos que te facilit el servidor donde vas a alojar tus pginas: Servidor, Usuario y
Contrasea.
Rellena los campos y haz clic en Conectar. Se conectar automticamente y podrs ver una carpeta donde podrs
copiar los archivos que hayas creado.
La parte central de la pantalla estar dividida en dos columnas. A la izquierda, la marcada como Sitio local, nos permite
explorar la estructura de archivos y carpetas de nuestro sitio. A la derecha encontramos Sitio remoto, con los archivos
ubicados en el servidor FTP.
29

Ahora no tenemos ms que arrastrar los archivos del sitio local al remoto para subirlos, o del remoto al local, para
descargarlos al equipo. Vers como el programa empieza a copiar la informacin de tu disco a Internet. Cuando haya
finalizado, slo tendrs que introducir tu direccin de Internet en la barra de direcciones de tu navegador (Firefox, Internet
Explorer...) y vers el sitio en Internet!
Los servidores de pago, normalmente suelen mostrar varias carpetas al conectar con el servidor. Busca la carpeta html,
public_html o httpdocs y sube tus archivos all.
Propiedades del documento
Es conveniente definir sitios homogneos, que todas las pginas de un sitio sigan un mismo formato, es decir, que
tengan el mismo color de fondo, de fuente, etc. Puede definirse el formato de cada una de las pginas a travs del cuadro
de dilogo Propiedades de la pgina.
Este cuadro se puede abrir de tres modos diferentes:
Pulsar la combinacin de teclas Ctrl + J.
30
Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina.
Hacer clic con el botn derecho del ratn sobre el fondo de la pgina. Aparecer al final del men contextual la opcin
Propiedades de la pgina.
Se abrir el cuadro de dilogo siguiente:

Las propiedades estn organizadas en categoras.
En la categora Apariencia (CSS), como ves en la imagen anterior, encontramos las propiedades:
Fuente de pgina: es el tipo de letra que le aplicaremos al texto.
Tamao: es el tamao de la fuente que aplicaremos al texto.
Color del texto: es el color de la fuente.
Color del fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrar en el caso
de no haber establecido ninguna imagen de fondo.
31
Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico.
Es importante al elegir una imagen de fondo tener en cuenta que segn los colores de la imagen ser necesario
establecer unos u otros colores para el texto, as como que no es conveniente tener un gif animado como fondo.
Repetir: permite especificar si queremos que la imagen de fondo se repita o no. Si no queremos que se repita,
seleccionamos la opcin no-repeat. Si queremos que se repita o dejamos la opcin en blanco o seleccionamos la opcin
repeat. Si queremos que se repita solo en horizontal seleccionamos la opcin repeat-x y si queremos que se repita en
vertical, entonces seleccionamos repeat-y.
Mrgenes: permiten establecer mrgenes en el documento, es decir, la distancia entre donde empieza el contenido de la
pgina y la ventana del navegador.
En la categora Apariencia (HTML), como vemos en la imagen siguiente, encontramos las propiedades:

Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico.
Es importante al elegir una imagen de fondo tener en cuenta que segn los colores de la imagen ser necesario
establecer unos u otros colores para el texto, as como que no es conveniente tener un gif animado como fondo.
Fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrar en el caso de no
haber establecido ninguna imagen de fondo.
Texto: es el color de la fuente.
32
Vnculos: es el color que mostrar el texto de los vnculos.
Vnculos visitados: es el color que mostrar el texto de los vnculos visitados.
Vnculos activos: es el color que mostrar el vnculo cuando el cursor del ratn hace clic sobre el mismo.
Mrgenes: permiten establecer mrgenes en el documento, es decir, la distancia entre donde empieza el contenido de la
pgina y la ventana del navegador.
Podemos observar que muchas propiedades HTML y CSS son similares. La diferencia es que CSS aplica nuestra
configuracin utilizando reglas de estilo, mientras que HTML lo hace con atributos HTML. Estos ltimos estn cayendo en
desuso, ya que se tiende a limitar el HTML al contenido, y no al diseo. Por eso, te desaconsejamos su uso.
- En la categora Vnculos (CSS) encontramos las propiedades:

Fuente de vnculo: es el tipo de letra que mostrar el texto del vnculo.
Tamao: es el tamao del texto de los vnculos.
Color de vnculo: es el color de los vnculos, que ayuda al usuario a distinguir entre el texto normal y los vnculos que
sirven de enlace a otras pginas.
Vnculos visitados: es el color de los vnculos visitados, que permite distinguir al usuario si unos vnculos ya han sido
visitados o no.
33
Vnculos de sustitucin: es el color del texto del vnculo cuando situamos el ratn encima del vnculo.
Vnculos activos: es el color de los vnculos activos.
Estilo subrayado: por defecto, cuando tenemos un texto con un vnculo asociado, el texto aparece subrayado, con esta
opcin podemos elegir otro tipo de estilo por ejemplo para que no aparezca subrayado.
En la categora Encabezados (CSS) encontramos la propiedad:

Fuente de encabezado: permite establece el tipo de fuente de los encabezados.
El resto propiedades hacen referencia al estilo cursiva o negrita, as como al tamao y color que queremos aplicar a cada
tipo de encabezado.
En la categora Ttulo/Codificacin encontramos la propiedad:
Ttulo: es el ttulo del documento, que aparecer en la barra de ttulo del navegador y de la ventana de documento de
Dreamweaver
En la categora Imagen de rastreo encontramos las propiedades:
34
Imagen de rastreo: permite establecer una imagen como fondo del documento, pero que slo se mostrar en la ventana
de documento de Dreamweaver, y nunca en un navegador. Dicha imagen se utiliza como plantilla grfica sobre la que
crear el documento.
Transparencia: permite establecer la opacidad de la imagen de rastreo.
Hay que tener cuidado de no crear pginas que tarden mucho tiempo en cargarse en el navegador.
Comprobar tamao para optimizar la carga
Si las pginas tienen muchos elementos (imgenes, tablas, etc.) y son muy grandes, posiblemente tarden mucho tiempo
en mostrarse totalmente en el navegador. Esto no es nada recomendable, ya que los usuarios pueden perder la
paciencia, y no visitar ms nuestra pgina.
Siempre hay que intentar que el tiempo de descarga en el navegador no sea muy elevado.
Dreamweaver permite calcular automticamente el tiempo de descarga de las pginas. Para ello hay que dirigirse al
men Edicin, a la opcin Preferencias.

En esta nueva ventana lo primero que hay que hacer es seleccionar una Categora. En este caso nos interesa la de
Tamaos de vantanas.
35
En ella habr que establecer una Velocidad de conexin.
La velocidad por defecto, la velocidad es de 56,0 kbps que es la velocidad a la que se conectaban lo mdems telefnicos.
Actualmente, las conexiones de ADSL y cable llegan a cifras mucho mayores, de varios MB/s. No obstante, ha que
establecer el valor al de la conexin media de la regin de los usuarios a los que va destinada la web.
Una vez establecida una velocidad de conexin, y aceptados los cambios, Dreamweaver calcular el tamao y el tiempo
de descarga de la pginas a partir de esa velocidad de conexin.
Hay que tener en cuenta que el tamao de descarga de una pgina no solo se calcula a partir del tamao de esa pgina
en disco, sino que hay que considerar tambin el tamao de las imgenes que aparecen en ella, y del resto de
elementos.
Cuando en la ventana de documento de Dreamweaver est abierta alguna pgina, se mostrarn su tamao y su tiempo
de descarga en la barra de estado.
Por ejemplo, esta pgina que ests viendo tiene un tamao de descarga de 39K, y se presupone un tiempo de descarga
de 1 segundos (para una conexin ADSL), ya que en la barra de estado de la ventana de documento aparecen estos
datos entre el tamao de la ventana de documento y el panel de propiedades, representados por 70K/10 s.

Los colores
Para asignar colores es posible desplegar una paleta de colores como sta. Al seleccionar un color de estas paletas, se
muestra el valor hexadecimal del color en la parte superior. Las paletas de colores de Dreamweaver utilizan la paleta de
216 colores seguros para web. stos son los colores que se muestran de la misma forma en cualquier navegador bajo
cualquier sistema operativo.

36
Esto no quiere decir que slo podamos utilizar estos colores. Podemos personalizarlos a travs del botn de la parte
superior de la paleta.
Los colores pueden asignarse a travs de los botones:
Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y tambin en algunas ventanas que
permiten especificar propiedades (sobre todo propiedades de texto, fondo, o tablas), como es el caso de la ventana de
Propiedades de la pgina.
El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro gris , lo que hace que se
despliegue la paleta de colores. El otro modo es introduciendo directamente el nmero hexadecimal del color en el
recuadro blanco.
Por ejemplo, si en la paleta de colores que aparece ms arriba se seleccionara el color azul con valor #39F, el botn
quedara del siguiente modo:
En la web, los colores se representan por la cantidad que contienen de los colores primarios aditivos (Rojo, Verde y
Azul). Para indicar la cantidad de cada uno, se utilizan nmeros hexadecimales, que van del 0 a la F (A=10, B=11, ...,
F=16).
El valor mnimo (00) indica la ausencia total de ese color, y el mximo (FF) su intensidad total.
Para indicar que nos referimos a un color, utilizamos el smbolo # la principio del cdigo.
Por tanto, podemos definir un color como #F7F0E2 donde el primer par corresponde al rojo, el segundo al azul y el ltimo
al verde.
En Dreamweaver observars muchas veces que se emplean slo tres valores. En este caso, se interpreta que los valores
de los pares estn repetidos. Es decir, los colores #FF22AA y #F2A son el mismo.




37
Forma de crear Hipervnculos e insertar Imgenes.
Hiperenlaces Hipervnculo vnculo es lo mismo que un enlace.
Vamos a ver qu son los hiperenlaces, para qu sirven y cmo crearlos, ya que son un elemento esencial para cualquier
pgina web.
Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado lleva de una pgina o archivo a otra
pgina o archivo. Es posible asignar un vnculo a un texto, a una imagen, o a parte de una imagen.
Cuando creemos un enlace, lo que realmente haremos ser crear una etiqueta <a></a> que es la que en HTML se
encarga de definir los enlaces. Esto podrs observarlo en la barra de estado:

Tipos de referencia
Existen diferentes clases de rutas de acceso a la hora de definir los vnculos. Estas referencias no se limitan a los
enlaces, se comportarn igual cuando indiquemos la ubicacin de una imagen, de un archivo Flash, de la hoja de estilo,
etc.
Referencia absoluta:
Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo, incluyendo el protocolo
http://.
Por ejemplo, http://www.aulaclic.com, o http://www.misitio.com/seccion2/pagina1.html.
La referencia absoluta es independiente de la ubicacin de la pgina que contiene el enlace, y ser vlida siempre que no
cambie la ubicacin del archivo enlazado. Es la opcin obligatoria si pretendemos enlazar a archivos fuera de nuestro
sitio (enlaces externos).


38
Referencia relativa al documento (por defecto):
La ubicacin del archivo enlazado se toma en relacin con la ubicacin del la pgina. Es decir, partimos de la carpeta en
la que se encuentra el documento. Si queremos enlazar con una pgina o archivo dentro de la misma carpeta, no
tenemos ms que utilizar su nombre. Por ejemplo, pagina2.htm.
Si est en una subcarpeta de la pgina actual, no tenemos ms que indicar el nombre de la carpeta antes del archivo, y
separarlos por una barra (/). Por ejemplo imagenes/miimagen.gif.
Si queremos referirnos a carpetas que estn por encima del nivel donde nos encontramos deberemos utilizar ../
Por ejemplo, imagina que estamos en la siguiente direccin http://www.misitio.com/pagina/informacion/index.html.
En esta pgina queremos mostrar una imagen que se encuentra en la carpeta
http://www.misitio.com/pagina/secciones/seccion1.html, cmo podemos hacerlo? Fcil. Deberemos llamarla
haciendo referencia al nivel superior (http://www.misito.com/pagina/) para poder ir luego a la carpeta secciones.
El resultado de la ruta sera el siguiente: ../secciones/seccion1.html.
De esta forma, mientras nos encontramos en la carpeta informacion, subimos un nivel y luego nos movemos dentro de la
carpeta secciones para mostrar el archivo seccion1.html.
Esta opcin depende de la ubicacin del archivo, y pueden no funcionar correctamente si alteramos la estructura de
carpetas. Esta es la opcin por defecto de Dreamweaver, y es la forma ms habitual para enlazar archivos dentro del
sitio.

Referencia relativa al sitio:
Conduce a un documento situado dentro del mismo sitio que el documento actual. Tomando como origen la carpeta raz
del sitio. Para indicar la ruta relativa al sitio, precedemos la ruta de enlace por la barra /.
En el ejemplo anterior si tuvisemos definido como sitio la carpeta http://www.misitio.com/, un enlace en cualquier
pgina del sitio a http://www.misitio.com/pagina/secciones/seccion1.html se creara como
/pagina/secciones/seccion1.html.

39
Por tanto, podramos poner ese vnculo en cualquier pgina del sitio y funcionara independientemente de su ubicacin.
Estos enlaces no funcionarn en el sitio local, a no ser que configuremos un servidor de pruebas como veremos ms
adelante, ya que Windows interpretar como raz la raz del disco duro.
Marcadores o Puntos de fijacin:
Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello, indicamos el nombre
del punto de fijacin a continuacin de la ruta del archivo (relativa o absoluta) separados por una almohadilla (#).
El formato sera nombre_de_documento.extension#nombre_de_punto.
Si el punto de fijacin est en la propia pgina, basta con indicar nicamente el punto en el enlace, por ejemplo
#apartado2
Podemos definir el punto dentro de un documento a travs del men Insertar, opcin Anclaje con nombre. O podemos
utilizar el atributo ID de cualquier elemento (se puede establecer desde el Inspector de Propiedades HTML). En
cualquier caso, los nombres no deben de estar repetidos en la pgina.
Debers tener siempre en cuenta que los nombres de las rutas se correspondan perfectamente a los nombres de
los archivos y carpetas en el servidor (local o remoto).
Por ello, es muy recomendable que utilices siempre minsculas para evitar fallos en los enlaces.
Tambin debers evitar utilizar caracteres especiales como acentos o espacios, as no tendrs problemas a la hora
de referenciar tus objetos.

Crear enlaces
La forma ms sencilla de crear un enlace es a travs del inspector de propiedades. Para ello es necesario seleccionar
el texto o el objeto que va a servir de enlace, y seguidamente establecer el Vnculo en el inspector HTML.
Por ejemplo, en la siguiente imagen hay un enlace a www.aulaclic.es, que al ser un archivo externo es de referencia
absoluta, por eso contiene http://
40

Es posible crear tambin vnculos vacos, que pueden ser tiles cuando se utilizan comportamientos, etc. Para ello es
necesario escribir en Vnculo nicamente una almohadilla #. Veremos su utilidad ms adelante.
Otra forma de crear un enlace es a travs del men Insertar, opcin Hipervnculo.

Crear vnculos de esta forma es muy sencillo, slo debers rellenar los campos que explicaremos a continuacin y el
enlace se colocar en el lugar en el que estaba situado el cursor.
Texto: es el texto que mostrar el enlace. Si tenamos un texto seleccionado, aparecer ah.
Vnculo: es la pgina a la que ir redirigida el enlace, si se trata de un enlace externo debers escribirla empezando
siempre por http://. Haz clic sobre el icono de carpeta para buscar los archivos que existan dentro del sitio. Por defecto
Dreamweaver te crear un enlace relativo al documento.


Crear vnculos relativos automticamente
Haciendo clic en el men Sitio y seleccionando la opcin Administrar sitios... podemos editar la configuracin del sitio.
Bastar con seleccionar el sitio y hacer doble clic en el cuadro de dilogo, o seleccionar el sitio y pulsar en el icono
Editar.
41
Se abrir la ventana de Configuracin del Sitio. All selecciona la categora Informacin local dentro del grupo
Configuracin avanzada, y podrs ver las siguientes opciones:

Estas opciones te ayudarn a crear los enlaces de forma relativa. Selecciona Documento o Raz del sitio en Vnculos
relativos a: para que se creen los enlaces relativos al documento donde se halla situado el enlace o desde la raz del
sitio.
Si seleccionas la opcin Raz del sitio, los enlaces se establecern respecto a la carpeta seleccionada en el campo
Carpeta raz local:. Pero recuerda que en nuestro sitio local no funcionarn a no ser que instalemos un servidor de
pruebas.
Seleccionar estas opciones no cambiar los enlaces existentes, sino que aplicar esta configuracin a los vnculos que
se creen a partir de ese momento.
Destino: la ventana donde se abrir la pgina, este campo se explica en el siguiente apartado.
Ttulo: se trata de la ayuda contextual del vnculo, que aparecer al mantener un instante el cursor sobre el enlace.
Tecla de acceso: atributo que facilita la accesibilidad a las pginas, habilita el acceso al enlace mediante la pulsacin
de la tecla Alt ms la tecla de acceso indicada.
42
ndice de tabulador: Como habrs podido observar puedes saltar a travs de los enlaces pulsando la tecla Tabulador.
En este campo podrs establecer un ndice indicando la prioridad del enlace y as configurar el modo en el que actuar el
Tabulador es sus diferentes saltos. Por defecto, se tabularn por orden de aparicin.


Destino del enlace
El destino del enlace determina en qu ventana va a ser abierta la pgina vinculada, puede variar dependiendo de si el
documento est basado en marcos. Puede especificarse en el inspector de propiedades HTML a travs de Destino, o
en la ventana que aparece a travs del men Insertar, opcin Hipervnculo.

_blank:
Abre el documento vinculado en una nueva ventana o pestaa del navegador.
_parent:
Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de marcos padre.
Tiene sentido si se emplean marcos.
_self:
Es la opcin predeterminada, y la que se produce si no indicamos otra cosa. Abre el documento vinculado en el
mismo marco o ventana que el vnculo.
_top:
Abre el documento vinculado en la ventana completa del navegador. Tiene sentido si se emplean marcos.
Si la pgina no usa marcos (lo habitual hoy en da) simplemente no especificaremos nada para abrirlo en la misma
ventana, y emplearemos _blank para abrir ventanas nuevas.
Lo habitual es abrir las los enlaces a pginas del sitio en la misma ventana, y los enlaces externos en ventanas nuevas.
Otra tendencia dice que una pgina nunca debera de abrir nuevas ventanas, y que debe de ser el usuario el que decida
qu enlaces quiere abrir en ventanas nuevas. En la mayora de navegadores, para abrir un enlace un una ventana nueva,
basta con hacer clic con la ruedecilla del ratn.




43
Formato del enlace
En general, un texto que tiene asociado un vnculo suele aparecer subrayado. Al mismo tiempo, puede adquirir cuatro
colores diferentes que pueden especificarse a travs de las propiedades de la pgina. Estos cuatro colores diferentes
corresponden a los tres estados del vnculo: vnculo normal, vnculo activo (el ltimo pulsado), vnculo visitado o vnculo
de sustitucin (cuando el cursor est sobre el vnculo).
Aqu tienes dos vnculos de ejemplo:
www.aulaclic.es www.elpais.com
Si has visitado alguno, vers que sale en un tono morado, si no sale en azul.
Recuerda que como todo en nuestra pgina, los vnculos tienen un formato por defecto, pero es totalmente
personalizable por CSS. Para ello, basta con crear una Regla de estilo para la etiqueta a.
Si queremos distinguir entre los tres estados del enlace, emplearemos los siguientes selectores:
a:link para los enlaces normales.
a:visited para los enlaces visitados.
a:active para los enlaces activos.
a:hover para los enlaces con el cursor encima.
Aunque recuerda que en las propiedades del documento tenamos la categora Vnculos CSS que nos permite
establecer estos valores.
Cuando el vnculo est definido sobre una imagen, en el borde aparecen una serie de puntitos al pulsar sobre ella.
Cuando el vnculo est definido sobre una zona de una imagen (un mapa), aparece el contorno de esa zona.
Aqu tenemos dos vnculos en una imagen:

Como puedes ver, la primera imagen que hace de vnculo contiene un recuadro alrededor. Este es el formato por defecto,
pero no suele quedar bien, sobre todo en imgenes con el fondo transparente.
44
Las ltimas versiones de los navegadores Chrome (v.24) y Firefox (v.18) ya no dibujan el contorno de la imagen, IE 9 si lo
dibuja.
Veamos como quitarlo utilizando CSS.
En el Inspector de propiedades CSS seleccionamos Nueva regla CSS en Regla de destino, y pulsamos Editar regla.

En Tipo de selector, elegimos Compuesto, y en Nombre de selector escribimos a img, es decir, imgenes que estn
dentro de una etiqueta a (de enlace).
Se abrir la ventana Definicin de regla para a img:

En ella, seleccionamos la categora Borde, y en Style seleccionamos none. Pulsamos Aceptar. Esta regla har que las
imgenes con enlace se muestren sin borde.

45
Tanto si el vnculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse encima del vnculo.
Suele adquirir la apariencia de una mano sealando.

Enlace a correo electrnico
Es posible especificar vnculos a direcciones de correo electrnico. Esto resulta til cuando se desea que los visitantes de
la web puedan contactar con nosotros.
La sintaxis del vnculo en este caso es mailto:direccindecorreo.
Puede definirse el vnculo a travs de Vnculo, del inspector de propiedades, seleccionando previamente el texto o la
imagen deseados.
Tambin es posible a travs del men Insertar, opcin Vnculo de correo electrnico.
En este caso no es posible asignar el vnculo a una imagen, solo permite introducir el texto que contendr el vnculo de
correo.

Lo que hace esta opcin depende del navegador que estemos utilizando, tericamente, el navegador debera abrir el
cliente de correo predeterminado del usuario (Outlook, Firebird...). Pero en la prctica cada navegador se comporta de
una forma distinta, sobre todo si no tenemos instalado un cliente de correo electrnco y vemos el correo con webmail
(Gmail, Hotmail, ...)
Por ejemplo, con las versiones disponbles a la hora de escribir esto, IE9 da un mensage de error diciendo que no hay
ningn cliente de correo instalado, Firefox saca una ventana ofreciendo abrir un correo webmail y Chrome no hace nada.
Por lo tanto usar mailto es una opcin que puede no ser prctica si el usuario no tiene instalado un cliente de correo
(Outlook, Firebird...), tamoco si se conecta en un ordenador pblico, o si utiliza un telfono mvil o una tableta.
46
Siempre que se pueda, es mejor crear un formulario de contacto, aunque esto requerir una pgina dinmica como
veremos a lo largo del curso. Otra opcin sera mostrar nuestra direccin de correo, para que el usuario pueda enviarnos
el correo como quiera. Si publicamos nuestra direccin en la web es mejor hacerlo como una imagen, o escribindola de
forma que la pueda entender un humano (por ejemplo micorreo(arr)sitio.com) para evitar que sea reconocida por robots
que la emplearn para el envo de correo no deseado.

En ocasiones es posible que existan en nuestro sitio lo que se conoce como Vnculos rotos.
Comprobacin de vnculos rotos
Los Vnculos rotos son vnculos que no siguen una ruta vlida, o que enlazan a archivo que no existe.
La existencia de estos vnculos en nuestras pginas es un error, ya que no permite navegar correctamente a los usuarios
por nuestro sitio, adems del efecto negativo que causa.
Los servidores de tipo UNIX/Linux distinguen entre maysculas y minsculas. As, por ejemplo, si enlazas a un archivo
Perros.htm puede que el servidor no lo encuentre porque en realidad lo hayas llamado perros.htm (en minsculas).
Trabajando con Windows este tipo de errores no se presentan porque no hace esta distincin. En el ejemplo anterior
Dreamweaver considerara el enlace Perros.htm correcto aunque no lo fuese.
Para evitar esto puedes activar la opcin Comprobacin de vnculos con distincion entre maysculas y minsculas
que se encuentra en la ventana de Configuracin del Sitio, dentro de Configuracin avanzada en la categora
Informacin local.
Configuracin del Sitio. All selecciona la categora Informacin local dentro del grupo Configuracin avanzada
Para comprobar si nuestro sitio tiene Vnculos rotos hay que abrir el Verificador de vnculos.
Accedemos a l desde el men Sitio Comprobar vnculos en todo el sitio o con las teclas Ctrl + F8.
47

Entonces se muestra un nuevo panel, en el que ya es posible comprobar si existen vnculos rotos.

En la imagen vemos que no se ha encontrado un archivo enlazado, posiblemente porque el nombre est mal escrito, y
una imagen.
Lo primero que hay que hacer es pulsar sobre el botn , a travs del cual se ofrece la posibilidad de elegir dnde se
comprobarn los vnculos rotos. Puede ser en el documento actual, en todo el sitio, o en los archivos o carpetas del
sitio seleccionados previamente.
A travs de Mostrar hay que especificar si han de mostrarse los Vnculos rotos, los Vnculos externos o Archivos
hurfanos.
Los Vnculos rotos son los vnculos que no siguen una ruta vlida, o que enlazan a archivo que no existe.
Los Vnculos externos son los vnculos a documentos que se encuentran fuera del sitio, pero que no
necesariamente son vnculos errneos. No comprueba si estos vnculos son correctos o no, simplemente los
enumera.
A travs de Vnculos hurfanos se muestran todos aquellos archivos del sitio que no estn siendo vinculados
por otros, a la vez que tampoco contienen vnculos a otros documentos. Estos documentos, en ocasiones,
pueden no estar siendo utilizados para nada, por lo que simplemente estn ocupando espacio en disco
innecesariamente. Pero en otras ocasiones, tal vez si que los empleamos, slo que en vez de enlazarlos,
accedemos a ellos por javascript u otros medios. En este caso s son necesarios, aunque se marquen como
hurfanos.
De estos tres tipos de vnculos, el que ms nos interesa ahora es el de los Vnculos rotos. En el panel se mostrarn
todos los documentos que tienen un vnculo roto, y el documento al que cada uno de esos vnculos hace referencia.
48
Reparacin de vnculos rotos
Podemos reparar los vnculos rotos de dos formas:

Una de ellas es pulsando dos veces sobre el nombre del documento que aparece en la lista de archivos del panel. De
este modo, dicho documento se abre. Entonces es posible buscar dentro del documento el vnculo errneo y modificarlo
a travs del Inspector de propiedades.
La otra forma es pulsando sobre el vnculo roto, en lugar de sobre el nombre del archivo. En este caso es posible
modificar directamente el nombre del documento en el panel, o buscarlo a travs del icono con forma de carpeta que
aparecer a su derecha.




Insertar IMAGENES
Las imgenes son un aspecto muy importante de la web. Ya sea como complementos a la informacin o parte del diseo,
la hacen mucho ms atractiva a ojos del visitante. No obstante, no conviene abusar, ya que aumentarn mucho el
tamao final de la web.
Existen una serie de formatos de imagen ms recomendables que otros para ser introducidos en una pgina web.
Formatos de imagen
Las imgenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, png, tiff, etc. Pero no todos estos formatos son
adecuados para una web, debido a que pueden ocupar mucha memoria o a que no son compatibles con algunos
navegadores.
49
Los formatos ms utilizados para web son el GIF, el PNG y el JPG, que a pesar de ser imgenes de menor calidad que
las imgenes BMP, son ms recomendables debido a que ocupan menos memoria. Vamos a ver un poco ms sobre
estos formatos:
Formato GIF:
Utilizan un mximo de 256 colores, y son recomendables para dibujos con grandes reas de un mismo color o de
tonos no continuos. Tambin si se muestra texto.
Suelen utilizarse con gran frecuencia, ya que permiten contener transparencias y animaciones.
En cambio, no estn recomendados para fotografas, ya que se perderan colores, y al no tener reas de color
continuo, el archivo final sera mayor que por ejemplo un JPG.

Formato JPG:
Estas imgenes pueden contener millones de colores, en un archivo comprimido de tamao razonable. Por
ejemplo, las imgenes que obtenemos de una cmara digital suelen estar en este formato.
Por tanto, son especialmente indicadas para fotografas, o grficos complejos, obteniendo mejores resultados
que el GIF.
En cambio, en grficos con pocos colores y continuos, generar un archivo mayor que el GIF, y podremos
apreciar prdida de calidad.

Formato PNG.
Se trata de un formato de compresin sin perdida. Tiene varias versiones:
PNG 8 es un formato de 256 colores muy similar al GIF, que en teora obtiene archivos algo menores. Tambin
admite transparencias.
PNG 24 y PNG 36. Es un formato de color verdadero (34 o 36 bits), lo que hace que sea un archivo de tamao
algo mayor. Admite canal de transparencia alfa, lo que quiere decir que puede obtener distintos niveles de
transparencia, a diferencia de PNG 8 o GIF que pueden ser totalmente transparentes o no. El resultado es el de
mayor calidad, pero tambin de mayor tamao. Este formato es el ms adecuado cuando necesitamos distintos
niveles de transparencia, o requerimos que una imagen muestre correctamente todos sus colores y detalles,
evitando la prdida de calidad que puede producir JPG. Tambin resulta especialmente indicado para imgenes
con degradados de color.
Lo habitual es utilizar GIF o PNG para pequeos grficos, normalmente elementos del diseo o imgenes simples, y JPG
para fotografas, sean del tamao que sean.
Nos limitaremos al uso de estos formatos. Ya que aunque algunos navegadores soportan otros, no lo hacen todos. Y
hemos de asegurarnos de que cualquier visitante de nuestra pgina pueda ver las imgenes.
Si introduces una imagen no soportada en Dreamweaver, te aparecer un cuadrado gris en su lugar.
Puedes cambiar el formato de las imgenes mediante la utilizacin de algn programa de tratamiento de imgenes, como
pueden ser Fireworks, Photoshop, Corel Draw, o incluso desde el propio Dreamweaver. Dependiendo del programa
utilizado existir una mayor o menor cantidad de opciones a la hora de modificar las imgenes. Para realizar
modificaciones sencillas, como la de recortar las imgenes y cambiar los colores, puedes utilizar incluso el programa
Paint de Windows.
50

Insertar una imagen

Para insertar una imagen hay que dirigirse al men Insertar, a la opcin Imagen. Despus de esto, ya es posible
seleccionar una imagen a travs de la nueva ventana. Cuando te acostumbres, te ser ms cmodo acceder con la
combinacin de teclas Ctrl + Alt + I.

En Relativa a es posible especificar si la imagen ser relativa al documento o a la carpeta raz del sitio. Es preferible que
sea relativa al Documento, ya que si cambiamos la pgina de carpeta, lo habitual es cambiar tambin sus imgenes.
Lo mismo ocurre cuando se selecciona un documento para crear un vnculo.
La ruta en la que se encuentra la imagen aparecer representada de una u otra forma en el campo URL de la ventana y
en el campo Origen del inspector de propiedades, dependiendo de si ha sido insertada como relativa a la carpeta raz
del sitio o relativa al documento.
51
Por ejemplo, imagina que dentro de la carpeta raz del sitio (la carpeta del sitio) se encuentran la carpeta imagenes y el
documento en el que deseamos insertar la imagen. Dicha imagen, llamada aulaclic.jpg, se encuentra dentro de la
carpeta imagenes.
En el caso de insertar la imagen como relativa al Documento la ruta sera:
imagenes/aulaclic.jpg
Mientras que en el caso de ser insertada como relativa a la Raz del sitio la ruta sera:
/imagenes/aulaclic.jpg
Ocurre lo mismo que cuando se crea un hipervnculo a un documento relativo al documento o a la carpeta raz del sitio.
Otra forma de insertar una imagen, es arrastrarla directamente desde el panel Archivos sobre el documento.
Si insertamos una imagen y luego la borramos, la movemos, o escribimos mal su nombre, en Dreamweaver aparecer
as indicando que el enlace al archivo est roto. En ese caso, la imagen que aparecer en el navegador ser
similar a sta: .
Aparece un recuadro blanco con una X roja, junto con el nombre de la imagen o el contenido del campo Alt del inspector
de propiedades .

Propiedades de una imagen
Cuando seleccionamos una imagen el Inspector de propiedades muestra esta apariencia:

Desde aqu podremos establecer distintos atributos a la imagen:
Como pasaba con el texto, podemos crear un hiperenlace en la imagen escribiendo la direccin en el campo
Vnculo, y decidir en qu ventana se abre con el campo Destino. Origen contiene el path (cmino) de la imagen.
52
En el campo Alt escribimos el texto que remplazar a la imagen si sta no puede mostrarse. Es un atributo
muy importante que deberamos incluir siempre para hacer pginas accesibles. Por ejemplo, el texto que se
escribe ser ledo por los programas lectores para invidentes. Si lo que queremos es mostrar un ayuda contextual
cuando el usuario tenga el cursor sobre la imagen, debemos de empelar el atributo title. No podemos insertarlo
desde el panel, tenemos que hacerlo desde el cdigo fuente con el formato title="Texto a mostrar". Internet
Explorer en versiones anteriores a la versin 9, mostraba Alt como ayuda contextual cuando la imagen no lleva
title, pero el resto de navegadores no lo harn, respetando el estndar.
An. y Al. son las dimensiones de la imagen, ancho y alto. Dreamweaver las pondr directamente.
En Clase podrs asignarle un estilo que hayas creado anteriormente, as podrs darle alineacin, bordes e
incluso tamao con slo un clic.
El ID es un identificador opcional para usarlo con CSS o Javascript.
Podemos hacer que cada zona de la imagen tenga un vnculo distinto, creando un Mapa de imagen.

Mapas de imagen
Los mapas de imagen son partes de una imagen que pueden ser utilizadas para asignarle algn tipo de comportamiento.
Para crear un mapa de imagen es necesario seleccionar previamente la imagen en la que se desea crear el mapa, y abrir
el inspector de propiedades de dicha imagen.

Estando seleccionada la imagen, ya es posible crear un mapa a travs de los botones del inspector de propiedades que
tienen el siguiente aspecto: . Si no te aparecen despliega el panel Propiedades para verlo completo.
Los tres ltimos botones son los que se utilizan para crear los mapas. Dichos mapas pueden tener forma rectangular,
circular, o libre, dependiendo del botn pulsado.

Al pulsar alguno de estos tres botones, cambia la apariencia del puntero al situarlo sobre la imagen. Entonces ya es
posible dibujar el mapa sobre la imagen, pulsando sobre los lugares donde se desea que comience y finalice el mapa, as
como sobre el resto de lugares (en orden) que se desea que recorra el mapa en el caso de forma libre.
Al estar seleccionado un mapa el inspector de propiedades cambia. Permite asignar un vnculo y un texto alternativo a
ese mapa como puedes ver a continuacin:

53
El primero de los botones, el de la flecha, debe pulsarse al finalizar la creacin de un mapa, para que el puntero recupere
su forma original al situarse sobre una imagen. De este modo, es posible mover los puntos del mapa, en el caso de que
no hayan sido creados en los sitios deseados, para ajustarlos mejor a la imagen.
Al situar el puntero sobre la cabeza del perro, aparece una mano indica que es la nica parte de la imagen que contiene
un enlace.

El botn nos permite optimizar la imagen desde Dreamweaver, cambiando el formato o creando transparencias
Cambiar formato y crear transparencias
Dreamweaver nos permite optimizar una imagen, simplemente pulsando el botn del Inspector de propiedades de la
imagen.
Al pulsarlo, accedemos a la ventana Optimizacin de imgenes, similar a la que vemos a continuacin:

En el desplegable Preestablecido podemos elegir entre varias opciones:
PNG 24 para fotos (detalles ntidos).
JPEG para fotos (tonos contnuos)
PNG 8 para logotipos y texto.
JPEG alto para obtener la mxima compatibilidad..
GIF para imgenes de fondo (patrones).
PNG 32 para imgenes de fondo (degradados).
Para cada una de las anteriores opciones encontraremos unas posibilidades de optimizacin. Por ejemplo, segn se
muestra en la imagen, para GIF podemos elegir Color de 256, 128, 64, ... segn queramos obtener ms o menos calidad
de imagen. Tambin podemos decidir que cantidad de Perdida deseamos, a ms perdida memos calidad y menos
tamao de la imagen.
54
Si partimos de una imagen de calidad alta, por ejemplo, PNG 32, podemos convertirla en una imagen GIF de baja calidad
y poco peso en Kb. En este caso nos pedir que guardemos la imagen con la nueva extensin .gif.
Esto tiene sentido si tenemos una imagen que son, por ejemplo, unas letras con un fondo homogneo y que no necesita
mucha resolucin para verse bien. Si por el contrario, tenemos una imagen de un paisaje con bastantes detalles y colores
degradados en el cielo, al subir mucho el parmetro de Perdida la imagen quedar bastante mal.
Lo que se pretende es bajar la calidad para lograr un buen equilibrio o entre tamao y calidad, ajustndolo a las
necesidades concretas de la imagen.
el icono nos permite editar la imagen con un programa externo, como Photoshop o Paint.

Elegir un programa de edicin
Dreamweaver nos permite abrir un programa para editar la imagen, simplemente pulsando el botn .
Lo primero que tenemos que hacer, es elegir un programa como predeterminado para cada formato de imagen. Para ello,
accedemos al men Edicin Preferencias.... En la ventana de Preferencias, seleccionamos la categora Tipos de
archivo/editores.

55
Para la extensin seleccionada en la lista Extensiones, encontramos los editores asociados en la lista de Editores.
Por tanto, vamos seleccionando las extensiones que emplearemos (PNG, JPG y GIF). Para cada una, elegiremos uno o
varios editores de la lista. Podemos aadir ms editores pulsando en el icono + sobre la lista de editores. Al hacerlo, se
abrir el dilogo del sistema operativo, en el que tenemos que elegir el archivo ejecutable (acabado en .exe) de la
aplicacin.
La lista de editores asociados nos aparecer al hacer clic derecho sobre la imagen, en el submen Editar con.
Es convinente establecer un editor como principal pulsando en Convertir en principal. Una vez establecido un editor
principal para un tipo de archivo, el icono ser sustituido por el icono de dicho programa, por ejemplo, para Photoshop
.
Al pulsar sobre dicho icono se abrir el programa correspondiente que hemos establecido como principal.


Cambiar el tamao de una imagen
Dentro de Dreamweaver puede modificarse el tamao de las imgenes.
Por un lado, podemos cambiar el tamao con el que se ve una imagen, pero dicho cambio de tamao no se aplica
directamente sobre el archivo de imagen, que conservar el tamao original.
Es muy probable que la imagen resultante no sea de buena calidad, en comparacin de cmo podra quedar
modificndola desde un editor externo, como Fireworks, Photoshop, etc..
Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa el icono de Dreamweaver y
modificamos su tamao de varias formas diferentes:
Tamao original
Con tamao modificado
56
El resultado puede ser ms o menos satisfactorio, dependiendo del navegador que es el que aplica realmente el
reescalado, pero en ocasiones puede resultar til modificar el tamao de algunas imgenes aunque esto implique perder
calidad.
Existen dos formas de modificar el tamao.
Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de los recuadros negros que
aparecen alrededor de la imagen.

La otra es a travs de inspector de propiedades, cambiando los campos Ancho o Alto. Estos campos aparecern en el
inspector cuando est seleccionada alguna imagen.
Si estos campos no contienen el tamao original de la imagen, el valor aparecer resaltado en negrita y aparecer a la
derecha una flecha circular que permite volver al tamao original haciendo clic sobre ella.
Como hemos comentado, este cambio de tamao se produce alterando los atributos de anchura y altura, pero no
cambiando el tamao real del archivo, por lo que el usuario deber descargarse el archivo completo con su tamao
original.
Por ejemplo, si tenemos una fotografa de nuestra cmara de fotos, de un tamao grande (por ejemplo 2592x1944px), y
queremos mostrar una miniatura (por ejemplo, de 200x150px) esta sera una mala solucin, porque el usuario se estara
descargando el archivo completo, y no una miniatura real que ocupara mucho menos tamao.

Dreamweaver tambin nos permite cambiar el tamao real del archivo de imagen abriendo un editor de imagen.
Para hacerlo, seleccionamos la imagen, y pulsamos en el icono del Inspector de propiedades. Se abrir la ventana
del editor de imagen que hayamos definido como predeterminado (como vimos en el tema avanzado Cambiar el
programa de edicin), si no lo hemos hecho nos preguntar que programa de edicin queremos utilizar.

57
Imagen de sustitucin. Rollover
Un rollover es una imagen que cambia por otra cuando el puntero se sita sobre ella. Este tipo de imagen suele
utilizarse en los mens o en los botones para desplazarnos a travs de distintas pginas.
Veamos un ejemplo de rollover. Partiendo de las siguientes imgenes

Hemos creado el siguiente rollover. Sita el cursor sobre l para ver qu es lo que ocurre.

Para insertar un rollover hay que dirigirse al men Insertar, Objetos de Imagen, a la opcin Imagen de sustitucin. En
la nueva ventana hay que especificar la imagen original y la de sustitucin.

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

58
Existe una forma parecida de crear estos efectos utilizando CSS, y de hecho son ms utilizados. Bsicamente consiste
en cambiar la imagen de fondo de un elemento.
Objetos inteligentes
Los objetos inteligentes son imgenes que obtenemos directamente desde un archivo de Photoshop (.psd).
Al insertarlo, lo hacemos igual que con cualquier imagen, eligiendo el archivo de Photoshop.

Pero una archivo .psd no es un archivo que podamos mostrar en una pgina web. Por eso, lo que har Dreamweaver es
convertirlo a un formato estndar. Por eso, tras abrirlo, Dreamweaver nos pedir que elijamos uno de los formatos gif,
png o jpg y lo guardemos, con las mismas opciones que encontrbamos al pulsar el botn del Inspector de
propiedades.
Qu ventajas obtenemos con todo esto? Si observas la esquina superior izquierda del objeto inteligente encontrars un
icono como ste . Las dos flechas verdes indican que el archivo est sincronizado, es decir, la imagen est
generada a partir del ltimo archivo de Photoshop.
Pero puede que en cualquier momento queramos modificar la imagen. Podemos hacerlo abriendo el archivo .psd, o
pulsando el icono del Inspector de propiedades, que abrir el archivo fuente de Photoshop.
Tras guardar los cambios, vemos que el icono de la imagen en Dreamweaver ha cambiado, mostrando ahora una flecha
roja: . Esto indica que la imagen que estamos viendo en Dreamweaver (jpg, psd, png) no es la misma que el original
(psd) ya que se ha modificado. Podemos volverla a generar pulsando el icono Actualizar desde
origen.
Por lo tanto, los objetos inteligentes son tiles para imgenes que tengamos que editar frecuentemente.
59
http://www.desarrolloweb.com/articulos/332.php

http://tv.adobe.com/es/watch/diseno-web-para-desarrolladores/dreamweaver-cs6-diseno-liquido/

http://new.aulafacil.com/curso-gratis-de-macromedia-dreamweaver,panel-propiedades-de-imagen,30,216

http://www.aulaclic.es/dreamweaver-cs6/index.htm