23 Como puede comprobar, se trata del mismo espacio de trabajo integrado que el de Diseñador, pero con los grupos de paneles apilados a la izquierda. Despliegue ahora el menú Ventana, haga clic sobre el comando Diseño del espacio de trabajo y pulse esta vez sobre el espacio Pantalla doble. (12)
24 La pantalla doble permite organizar un diseño si dispone de un segundo monitor. (13) Este diseño coloca todos los paneles en el monitor secundario y mantiene la ventana de documento y el inspector de código en el principal. Cierre la ventana Inspector de código pulsando sobre el botón de aspa de su cabecera.
25 Terminaremos esta lección volviendo al espacio de trabajo predeterminado, saliendo del programa y volviendo a acceder a él para comprobar así que la Ventana de bienvenida no aparece, tal y como hemos marcado en el cuadro de preferencias. Pulse el conmutador de espacio de trabajo de la Barra superior de la aplicación y elija el espacio Diseñador.
26 Seguidamente, pulse el botón de aspa situado en el extremo derecho de la ventana del programa para cerrar Dreamweaver.
27 Por último, y como hemos indicado, accederemos de nuevo a Dreamweaver y comprobaremos que la Ventana de bienvenida ya no aparece. Despliegue el menú de Inicio, haga clic sobre el directorio Todos los programas, abra con un clic la carpeta Adobe Master Collection CS5 y pulse sobre el acceso Adobe Dreamweaver CS5. (14)
En versiones anteriores del programa, el espacio de trabajo Programador se denominaba Código.
En versiones anteriores de Dreamweaver el espacio de trabajo podía cambiarse desde el cuadro de preferencias o bien desde el menú Ventana.
Lección 2. Conocer la interfaz de usuario del programa
El diseño de la interfaz de los diferentes componentes de Adobe Creative Suite CS5, entre los que se encuentra Dreamweaver, es cómodo e intuitivo y permite trabajar de forma rápida y racional. El espacio de trabajo predeterminado de Dreamweaver, denominado Diseñador, permite ver en todo momento las propiedades de los documentos y de los objetos y muestra todas las ventanas y los paneles integrados en una única ventana. Además, los documentos abiertos aparecen distribuidos en fichas independientes por las que se puede navegar fácilmente. La Barra de aplicación, situada en la parte superior de la ventana de Dreamweaver, ha sido levemente retocada; en ella, se ubican los comandos que permiten cambiar el espacio de trabajo de Dreamweaver, un cuadro de búsqueda y un acceso a CS Live. Cuando se dispone de un documento abierto, aparece la barra de herramientas Documento, situada bajo la pestaña del documento, que presenta opciones relativas a su visualización y a la transferencia entre los sitios.
RECUERDE
Cabe destacar que según las dimensiones y la resolución de la pantalla con que se esté trabajando, la Barra de menús puede integrarse en la Barra de la aplicación, a continuación del icono del programa, o bien por debajo de la misma.
1 En esta lección, realizaremos una aproximación a la interfaz de usuario de Dreamweaver, en su espacio de trabajo predeterminado, el denominado Diseñador. Para ello, y para poder comprobar todos los elementos del área de trabajo, empezaremos creando un nuevo documento. Aunque trabajaremos la creación de sitios web más adelante, debe saber que el menú Sitio dispone del comando Nuevo sitio, que le permitirá crear un nuevo sitio de forma rápida y sencilla. Despliegue el menú Archivo y haga clic sobre el comando Nuevo.
2 Crearemos en este caso un documento HTML sencillo. En el cuadro de diálogo Nuevo documento, mantenga el tipo de página, el diseño y el tipo de documento que aparecen seleccionados por defecto y pulse el botón Crear.
3 Se abre el nuevo documento, denominado por defecto Untitled-1, como puede comprobar en la pestaña del documento. Debajo de la pestaña del documento se ubica la Barra de herramientas Documento, que contiene los botones adecuados para cambiar las vistas de la ventana y las opciones de visualización, para obtener vistas previas y para dar nombre al documento, entre otras acciones habituales. (1) Haga clic en el botón Código de esta barra y, tras comprobar cómo cambia el aspecto de la ventana, (2) acceda a la vista Diseño pulsando en ese botón.
La vista Código dividida, incluida en el botón Dividir de la barra de herramientas Documento, proporciona una versión dividida de la vista Código que permite desplazarse por el trabajo realizado en diferentes secciones del documento a la vez.
La disposición de los documentos en pestañas facilita la navegación por los mismos.
4 Ocupando la mayor parte del espacio de la interfaz se encuentra la Ventana del documento, donde se muestra el documento actual mientras lo está creando y editando. En la parte inferior de esta ventana se ubica la Barra de estado, que incluye un selector de etiquetas, botones para cambiar la visualización e información acerca del documento. Debajo de la Ventana del documento hallamos el Inspector de propiedades, un utilísimo panel que nos permite ver y modificar en cualquier momento las propiedades de la página, del objeto o del texto seleccionados. Pulse el botón Propiedades de la página del inspector. (3)
El Inspector de propiedades no se muestra expandido de forma predeterminada en el diseño del espacio de trabajo Programador.
Otra forma de acceder al cuadro de diálogo Propiedades de la página desde el menú Modificar o mediante la combinación de teclas Ctrl + J.
5 Desde el cuadro Propiedades de la página es posible modificar las características de la página. En lecciones posteriores, durante el desarrollo de nuestro sitio web, accederemos de nuevo a este cuadro y completaremos algunos de sus campos. Por el momento, ciérrelo pulsando el botón Cancelar. (4)
6 Por último, a la derecha de la interfaz se encuentran los paneles, que le ayudarán a supervisar y cambiar el trabajo realizado. Puede reducir y ampliar los paneles haciendo doble clic en sus pestañas, y pasar de uno a otro pulsando sobre ellas. Haga clic sobre la pestaña Elementos PA. (5)
7 Nos ocuparemos de los elementos PA en la parte de conceptos avanzados de este curso. También puede activar los paneles desde el menú Ventana. Para mostrar de nuevo en primer plano el panel Estilos CSS, pulse sobre su pestaña.
8