Dreamweaver es un editor web desarrollado originalmente por Macromedia y ahora propiedad de Adobe. Permite diseñar y editar páginas web de forma WYSIWYG u mediante código. Dreamweaver ha tenido mucho éxito desde finales de los 90 y actualmente mantiene el 90% del mercado de editores HTML. Ofrece funcionalidades como previsualización en navegadores, compatibilidad con CSS y JavaScript, y extensiones que permiten ampliar sus capacidades.

2.  Adobe Dreamweaver es una aplicación en programa de estudio (basada en la
forma de estudio de Adobe Flash) que está destinada a la construcción, diseño y
edición de sitios, vídeos y aplicaciones Web basados en estándares. Creado
inicialmente por Macromedia (actualmente producido por Adobe Systems) es uno
de los programas más utilizados en el sector del diseño y la programación web por
sus funcionalidades, su integración con otras herramientas como Adobe Flash y,
recientemente, por su soporte de los estándares del World Wide Web Consortium.

3.  Sus principales competidores son Microsoft Expression Web y BlueGriffon (que es
de código abierto) y tiene soporte tanto para edición de imágenes como para
animación a través de su integración con otras. Hasta la versión MX, fue
duramente criticado por su escaso soporte de los estándares de la web, ya que
el código que generaba era con frecuencia sólo válido para Internet Explorer y
no validaba como HTML estándar. Esto se ha ido corrigiendo en las versiones
recientes.

4.  Se vende como parte de la suite Adobe Creative Suite. A partir de la compra de
Macromedia por parte de Adobe. Las letras CS significan Creative Suite

5.  La gran ventaja de este editor sobre otros es su gran poder de ampliación y
personalización, puesto que en este programa sus rutinas (como la de insertar un
hipervínculo, una imagen o añadir un comportamiento) están hechas en Javascript-
C, lo que le ofrece una gran flexibilidad en estas materias. Esto hace que los archivos
del programa no sean instrucciones de C++ sino rutinas de Javascript que hace que
sea un programa muy fluido y todo ello permite que programadores y editores web
hagan extensiones para su programa y lo pongan a su gusto.

6.  Las versiones originales de la aplicación se utilizaban como simples
editores WYSIWYG. Sin embargo, versiones más recientes soportan otras
tecnologías web como CSS, JavaScript y algunos frameworks del lado servidor.

7.  Dreamweaver ha tenido un gran éxito desde finales de los años 1990 y
actualmente mantiene el 90% del mercado de editores HTML. Esta aplicación está
disponible tanto para la plataforma MAC como para Windows, aunque también se
puede ejecutar en plataformas basadas en UNIX utilizando programas que
implementan las API's de Windows, tipo Wine.

8.  Como editor WYSIWYG que es, Dreamweaver permite ocultar el código HTML de
cara al usuario, haciendo posible que alguien no entendido pueda crear páginas y
sitios web fácilmente sin necesidad de escribir código.
 Algunos desarrolladores web criticaban esta propuesta ya que crean páginas HTML
más largas de lo que solían ser al incluir mucho código inútil, lo cual va en
detrimento de la ejecución de las páginas en el navegador web. Esto puede ser
especialmente cierto ya que la aplicación facilita en exceso el diseño de las
páginas mediante tablas. Además, algunos desarrolladores web han criticado
Dreamweaver en el pasado porque creaba código que no cumplía con los
estándares del consorcio Web (W3C).
 No obstante, Adobe ha aumentado el soporte CSS y otras maneras de diseñar
páginas sin tablas en versiones posteriores de la aplicación, haciendo que se
reduzca el exceso de código.

9.  Dreamweaver permite al usuario utilizar la mayoría de los navegadores Web
instalados en su ordenador para previsualizar las páginas web. También dispone de
herramientas de administración de sitios dirigidas a principiantes como, por
ejemplo, la habilidad de encontrar y reemplazar líneas de texto y código por
cualquier tipo de parámetro especificado, hasta el sitio web completo. El panel de
comportamientos también permite crear JavaScript básico sin conocimientos de
código.

10.  Con la llegada de la versión MX, Macromedia incorporó herramientas de
creación de contenido dinámico en Dreamweaver. En lo fundamental de las
herramientas HTML WYSIWYG, también permite la conexión a Bases de Datos
como MySQL y Microsoft Access, para filtrar y mostrar el contenido utilizando
tecnología de script como, por
ejemplo, ASP, ASP.NET, ColdFusion, JSP (JavaServer Pages) y PHP sin necesidad
de tener experiencia previa en programación.

11.  Un aspecto de alta consideración de Dreamweaver es su funcionalidad
con extensiones. Es decir, permite el uso de "Extensiones". Las
extensiones, tal y como se conocen, son pequeños programas, que
cualquier desarrollador web puede escribir (normalmente en HTML y
Javascript) y que cualquiera puede descargar e instalar, ofreciendo así
funcionalidades añadidas a la aplicación. Dreamweaver goza del
apoyo de una gran comunidad de desarrolladores de extensiones que
hacen posible la disponibilidad de extensiones gratuitas y de pago para
la mayoría de las tareas de desarrollo web, que van desde simple
efectos rollover hasta completas cartas de compra.

12.  También podría decirse que, para un diseño más rápido y a la
vez fácil, podría complementarse con Fireworks en donde se
podría diseñar un menú u otras creaciones de imágenes (gif
web, gif websnap, gif adaptable, jpeg calidad superior, jpeg
archivo más pequeño, gif animado websnap) para un sitio web
y después exportar la imagen creada y así utilizarla como una
sola en donde ya llevará los vínculos para dicho sitio.

14.  El entorno de Dreamweaver
 Vamos a ver cuáles son los elementos básicos de Dreamweaver , la pantalla, las
barras, los paneles, etc..., para saber diferenciar entre cada uno de ellos.
Aprenderemos cómo se llaman, dónde están y para qué sirven. También
veremos cómo obtener ayuda, por si en algún momento no sabemos cómo
seguir trabajando. Cuando conozcamos todo esto estaremos en disposición de
empezar a crear páginas web.

 Ruta :
 Clic en Inicio
 Clic en todos los programa
 Clic en Macromedia
 Clic en Macromedia Dreamweaver.

15.  La pantalla inicial
 Al arrancar Dreamweaver aparece una pantalla inicial como ésta, vamos a ver sus
componentes fundamentales. Así conoceremos los nombres de los diferentes
elementos y será más fácil entender el resto del curso. La pantalla que se muestra
a continuación (y en general todas las de este curso) puede no coincidir
exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir
qué elementos quiere que se vean en cada momento y dónde, como veremos
más adelante.

16.  Las barras
 La barra la aplicación es una novedad en Dreamweaver CS4. Si tenemos la ventana maximizada veremos todos los
elementos de la barra ocupando una sola línea, si no, ocuparán dos líneas, como en la imagen superior.
 Esta barra contiene los siguientes elementos: los menús (en la imagen, en la parte inferior), varios botones propios de la
aplicación, el conmutador de espacio de trabajo y una caja de búsquedas para obtener ayuda on line.

17.  Los botones propios de la aplicación, que aparecen junto al icono, nos permiten
(de derecha a izquierda) cambiar entre la vista de diseño o código, acceder a
las extensiones que se pueden añadir, o al administrador de sitios, que ya
veremos.

18.  Más hacia la derecha observamos el conmutador del espacio
de trabajo, como un desplegable. Un espacio de trabajo es la
configuración del entorno (paneles visibles y su disposición) que
podemos guardar y cargar. Lo veremos más adelante.
 Los menús, están agrupados en categorías.

19.  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 través de los menús, aunque en ocasiones nos
envíen a los paneles.

20.  Cada archivo que tengamos abierto, mostrará una pestaña con
su nombre, lo que nos permitirá cambiar de uno a otro
fácilmente. Si junto al nombre aparece un *, indica que ese
archivo tiene cambios sin guardar. Podemos cerrar cada
documento clicando en el aspa, o acceder a otras acciones
haciendo clic con el botón derecho, como Cerrar otros archivos.
 Dreamweaver CS4 añade una novedad. Debajo de las pestañas
encontramos los archivos a que utiliza nuestra página, como la
hoja de estilos, archivos JavaScript, etc... pudiendo acceder a
ellos con un clic. Esto nos ahorrará bastante tiempo.

21.  Esta barra la encontramos debajo de la ventana de documento,
y nos da información sobre el mismo.
 A la izquierda, encontramos el selector de etiquetas. Nos sirve
para seleccionar etiquetas completas. Siguiendo hacia la
derecha encontramos las herramientas de Selección, Mano
(para desplazarse) y Zoom. Y otros datos como el tamaño de la
ventana, el tamaño de la página o su codificación.

22.  La barra de herramientas estándar contiene iconos para realizar
las acciones más habituales del menú Archivo y Edición. De
izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe
Bridge, Guardar, Guardar todo, Imprimir el código fuente, Cortar,
Copiar, Pegar, Deshacer y Rehacer.
 • La barra de herramientas de documento.

23.  La barra de herramientas de documento contiene iconos que
nos permiten cambiar entre las distintas vistas de edición y la
vista en vivo, acceder cómodamente al título de la página, o
realizar las distintas opciones de validación que nos ofrece el
programa.


24.  Configurar un sitio local
 En este tema vamos a ver qué es un sitio web, cómo crearlos y gestionarlos, y cómo modificar las
propiedades de los documentos, como puede ser el color de fondo.
 Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo
común. Es necesario diseñar y planificar el sitio web antes de crear las páginas 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 imágenes, las
animaciones, archivos de tipos específico, etc., se deben crear nuevas carpetas dentro de ésta, con el
objetivo de tener una mejor organización de los archivos a la hora de trabajar. Esto es lo que se conoce
como sitio local.
 Después se podrán 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 organización de los archivos en un sitio permite administrar y compartir archivos, mantener los vínculos de
forma automática, utilizar FTP para cargar el sitio local en el servidor, etc.
 La página inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya que cuando se intenta
acceder a una URL genérica, el servidor devuelve la página con ese nombre.

26.  Una vez creadas las carpetas que formarán la estructura del sitio
local, o por lo menos la carpeta raíz, ya es posible definir el
nuevo sitio.
 Para ello hay que dirigirse al menú Sitio, a la opción Administrar
sitios... o directamente a Nuevo sitio.
 Recuerda que a través del panel Archivos, se puede cambiar a
cada uno de los sitios definidos.
 También podemos acceder desde el icono de acceso rápido
de la barra de la aplicación a la opción Administrar sitios oNuevo
sitio...

27.  Tanto si se elige la opción Nuevo..., como si se elige la
opción Editar..., se mostrará la misma ventana en la que definir o
modificar las características del sitio.

28.  Las opciones del sitio se agrupan en diferentes categorías que aparecen en la parte izquierda.
 Para visualizar las características de una categoría basta con seleccionarla de la lista haciendo
clic en ella.
 Vamos a ver los datos que hay que editar para la categoría Datos locales, que será lo único
que empleemos de momento.
 Debe definirse el Nombre del sitio, que únicamente nos servirá para identificarlo en la lista de
sitios.
 La Carpeta raíz 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 características son las imprescindibles para definir un sitio local. El resto son opcionales,
y de momento no nos interesan.
 Las demás 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.
 Aunque sí destacaremos la opción Usar vínculos de distinción entre mayúsculas y minúsculas. Ya
comentamos, que aunque en nuestro equipo no por trabajar en Windows, muchos servidores
distinguen entre mayúsculas y minúsculas. Así Dreamweaver también lo hará.
 Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio.
 Si preferimos utilizar un asistente para crear el sitio web sólo tenemos que seleccionar la
pestaña Básicas, en vez de la pestaña Avanzadas.

29.  Abrir un sitio
 Para abrir un sitio ya definido hay que dirigirse al menú Sitio, a la
opción Administrar sitios.... seleccionar el sitio de la lista de sitios y
pulsar sobre el botón Listo.

30.  Ver el sitio
 El panel Archivos (menú Ventana → Archivos o tecla F8) es uno
de los paneles más importantes de Dreamweaver, ya que nos
da acceso a los archivo del sito.

31. Gracias
Johan Rojas Núñez 4”J”