Dreamweaver CS5 es un software para crear páginas web de forma sencilla y visual. Ofrece funciones como crear tablas, editar marcos, trabajar con capas e insertar comportamientos JavaScript. Incluye compatibilidad integrada con sistemas de gestión de contenido y la capacidad de comparar el diseño de páginas web en diferentes navegadores a través de Adobe Browserlab. Proporciona un entorno gráfico con barras de menús, herramientas y vistas que permiten editar el código HTML y el diseño visual de manera

1. Dreamweaver CS5
Diego Mariano Espinosa Casso

2. ¿Qué es?
Dreamweaver CS5 es un
software fácil de usar que
permite crear páginas web
profesionales. Se puede crear
tablas, editar marcos, trabajar
con capas, insertar
comportamientos JavaScript,
etc.., de una forma muy sencilla
y visual.

3. Novedades
Compatibilidad con CMS integrada. Es una interfaz o programa
que nos permite gestionar el contenido de un sitio web.
Integración Adobe Browserlab, es un servicio en línea de
Adobe, que nos permite comparar cómo se ve una misma página
web en las distintas versiones de Internet Explorer, Firefox y
Safari, bajo los sistemas operativos de Windows o Mac OS.

4. Funciones
Editar páginas web
Crear páginas web mediante el código HTML es más costoso que
hacerlo utilizando un editor gráfico. Hoy en día existe una amplia
gama de editores de páginas web, como pueden ser Microsoft
Expresion Web, Amaya, Bluefish, NVU, KompoZer o Quanta Plus.
Para poder poner una página web en Internet, es necesario contratar
a alguna empresa con servidores que pueda alojarla y hacerla
accesible desde Internet las 24 horas del día.
No se recomienda utilizar hospedaje gratuito para la página de una
empresa, aunque sí es aceptable para una página personal, sobre todo
al comienzo.

5. Entorno gráfico
Pantalla inicial
Al arrancar Dreamweaver aparece una pantalla inicial como ésta, la
pantalla que se muestra a continuación 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.

6. Barras
Barra de la aplicación
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.
Botones
Menús
Conmutador
Caja de búsquedas

7. Pestañas de documento
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.
Barra de estado
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.

8. Barra de herramientas estándar
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.
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.

9. Barra de representación de estilos
Esta barra, menos utilizada, nos permite ver la apariencia de
nuestra web en distintos dispositivos, si estamos utilizando hojas
distintas que dependan de eso. En esta nueva versión se han
añadido más opciones, como las de ver los estilos que dependen
de pseudo clases activas, como cuando el cursor está sobre un
elemento.
Barra de navegación con navegador
Esta barra nos permite usar Dreamweaver como un navegador web
y navegar por las páginas de nuestro sitio, aunque sólo tiene
sentido con la Vista en vivo.

10. Vistas de un documento
Vista de diseño
La vista Diseño permite trabajar con el editor visual. Nos ofrece un
aspecto muy similar al resultado final, pero totalmente editable.

11. Vista Código
La vista Código se utiliza para poder trabajar en un entorno
totalmente de programación, de código fuente. No permite tener
directamente una referencia visual de cómo va quedando el
documento según se va modificando el código.

12. Vista Dividir
La vista Dividir permite dividir la ventana en dos zonas: Código y
Diseño. La zona izquierda muestra el código 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.