Este documento describe las principales características y componentes de la interfaz de usuario de Dreamweaver CS5. Dreamweaver CS5 es un software de diseño web que permite crear páginas web profesionales de forma visual sin necesidad de codificar manualmente. La interfaz incluye barras de menús, herramientas, pestañas de documentos, inspectores y paneles para propiedades, inserción de elementos y navegación.

1. Ventana de
Dreamweaver
Melitza C. Duarte
11°C

2. Qué es Dreamweaver CS5?
Dreamweaver CS5 es un software fácil de usar que
permite crear páginas web profesionales.
Las funciones de edición visual de Dreamweaver CS5
permiten agregar rápidamente diseño y funcionalidad
a las páginas, sin la necesidad de programar
manualmente el código HTML.
Se puede crear tablas, editar marcos, trabajar con
capas, insertar comportamientos JavaScript, etc.., de
una forma muy sencilla y visual.
Además 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.

4. Pantalla inicial
Al arrancar Dreamweaver aparece una pantalla
inicial como ésta, con sus componentes
fundamentales. 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, como
veremos más adelante.

5. 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.
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.
Los menús, están agrupados en categorías.

6. Barras.
Barra de aplicación
La barra la aplicación se incorporó en la versión
anterior de Dreamweaver. 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.

7. Las 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.
Podemos cerrar cada documento clicando en el aspa
de la derecha, o acceder a otras acciones haciendo
clic con el botón derecho, como Cerrar otros archivos.
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.

8. La 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.

9. La 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. 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.)

10. La barra de herramientas de
documento.
La 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.

11. La 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 del
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.

12. La 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,
como ya veremos.
Como también veremos al personalizar el entorno,
algunos paneles, como Insertar nos permiten colocarlo
como otra barra de herramientas.

13. Inspectores y paneles.
Dreamweaver utiliza ventanas flotantes similares a las
barras de herramientas, que se conocen
como paneles o inspectores. La diferencia entre panel
e inspector es que, en general, la apariencia y
opciones de un inspector cambian dependiendo del
objeto seleccionado, mientras que el panel nos da
acceso a opciones generales.
A través de la opción Ventana, de la barra de
menús, es posible mostrar u ocultar cada uno de los
paneles o inspectores.

14. Inspector de propiedades.
El inspector de Propiedades muestra las opciones
propias del objeto o texto
seleccionado, permitiéndonos editarlas, por lo que se
convierte en uno de los elementos más utilizados en
Dreamweaver. Por ejemplo, cuando el elemento
seleccionado sea una imagen, mostrará su
ubicación, dimensiones, peso, clase, etc...
Este panel puede mostrar dos tipos de
propiedades, HTML y CSS, que podemos aplicar a los
diferentes elementos de la página Web que estemos
diseñando.

15. El panel Insertar.
En el panel Insertar, encontramos todos los elementos
que podemos encontrar en el
menú Insertar, clasificados en categorías. Podemos
emplearlo para insertar
imágenes, enlaces, multimedia, tablas, formularios...
cualquier elemento que nuestra web necesite.
Como vemos en las imágenes, es posible configurar
este panel para verlo como menú, como panel
flotante o como una barra de herramientas integrada
en la ventana de trabajo.