Kitabı oku: «Manual de Dreamweaver CS5», sayfa 2

Yazı tipi:

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 Los grupos de paneles pueden contraerse de forma individual de manera que sólo muestren sus pestañas. Para contraer los paneles Estilos CSS y Elementos PA, haga doble clic sobre la pestaña del primero. (6)

El panel Elementos PA comparte espacio con el panel Estilos CSS.

Si desea cerrar un grupo de paneles, puede utilizar la opción Cerrar grupo de fichas del menú de opciones del grupo en cuestión.

9 Para volver a expandir un panel contraído, puede hacer doble clic de nuevo sobre su pestaña o bien utilizar el comando Expandir panel de su menú contextual. Para ello, haga clic con el botón derecho del ratón sobre la pestaña del panel Estilos CSS y, en el menú contextual que se despliega, pulse sobre el comando Expandir panel.

10 La barra de herramientas Estándar (que no aparece en el diseño de espacio de trabajo predeterminado) contiene botones para las operaciones más habituales de los menús Archivo y Edición, y queda situada bajo las barras de herramientas Documento, la cual contiene comandos y opciones relativos a la visualización del documento y a su transferencia entre los sitios local y remoto. Para visualizar esta barra de herramientas, despliegue el menú Ver, pulse sobre el comando Barras de herramientas y elija la opción Estándar. (7)

Según las dimensiones y la resolución de su pantalla, el menú Ver no podrá mostrarse por completo a simple vista; puede desplazarse por él mediante las puntas de flecha situadas en la parte superior e inferior del mismo.

11 Como puede comprobar, la barra de herramientas Estándar contiene los comandos Nuevo, Abrir, Examinar en Brigde, Guardar, Guardar todo, Imprimir código, Cortar, Copiar, Pegar, Deshacer y Rehacer. (8) Ya conocemos el modo de visualizar y ocultar las diferentes barras de herramientas. En la parte final de esta práctica nos centraremos en el panel Insertar, que colocaremos a modo de barra de herramientas sobre la ficha del documento abierto. Haga clic sobre el botón contraído del panel Insertar (9) y, sin soltar el botón del ratón, arrástrelo hasta situarlo encima de la pestaña del documento. (10)

Una línea de color azul le indicará el punto en que puede soltar el botón del ratón para que el panel quede perfectamente encajado a modo de barra de herramientas.

12 Desde la barra Insertar es posible añadir a un documento diferentes tipos de elementos, que se distribuyen en fichas. La primera de ellas, Común, facilita la inserción de los objetos más habituales en la composición de las páginas Web. (11) El resto de categorías, predefinidas por el programa, agrupan objetos relacionados con su epígrafe, excepto la última de ellas, Favoritos, personalizable por el usuario. En este caso, le mostraremos como ejemplo cómo funciona la categoría Favoritos. Seleccione con un clic dicha categoría. (12)

13 Haga clic con el botón derecho del ratón en la barra de herramientas Insertar y, en el menú contextual que se despliega, seleccione la opción Personalizar favoritos. (13)

14 El comando Personalizar favoritos da acceso al cuadro de diálogo Personalizar objetos favoritos que presenta dos apartados. (14) El situado a la izquierda, Objetos disponibles, va encabezado por un cuadro desplegable mediante el cual es posible discriminar el tipo de objetos que van a ser incluidos en esta categoría. Pulse en el botón de flecha del desplegable del apartado Objetos disponibles, que presenta seleccionada por defecto la opción Todo, y tras comprobar las opciones que contiene, pulse nuevamente sobre el botón de flecha para cerrar el cuadro sin modificar la opción preseleccionada.

15 Bajo el desplegable se listan los objetos que es posible incorporar a la categoría. Al haber dejado seleccionada la opción Todo, se muestran la totalidad de objetos disponibles. Para incluir un objeto en la categoría Favoritos deberemos seleccionarlo en la lista Objetos disponibles y pulsar el botón situado entre este listado y el apartado Objetos favoritos. Seleccione con un clic la opción Hipervínculo y haga clic en este, el que presenta una doble punta de flecha apuntando a la derecha. (15)

16 Inmediatamente, el objeto Hipervínculo se incorpora a la lista Objetos favoritos. Para incorporar un segundo objeto utilizaremos otro método. Haga doble clic en el objeto Imagen del panel Objetos disponibles. (16)

La doble pulsación sobre un objeto disponible lo incorpora automáticamente a la lista de favoritos, justo por debajo del que se encontraba seleccionado.

17 La doble pulsación sobre un objeto disponible lo incorpora automáticamente a la lista de favoritos, justo por debajo del que se encontraba seleccionado, Hipervínculo, añadido anteriormente. El apartado Objetos favoritos presenta una serie de botones. El situado en la parte inferior, Añadir separador, posibilita la diferenciación de grupos de objetos dentro de la categoría Favoritos. Pulse dicho botón.

18 El separador queda situado por debajo del objeto favorito que se encontraba seleccionado en el momento de su inclusión. (17) El orden del listado determina la aparición de los diferentes botones, representativos de los objetos, en la barra Insertar. Pero éste puede ser alterado mediante los botones de flecha situados en la parte superior del apartado Objetos disponibles. Con el separador seleccionado en el listado, haga clic en el botón de flecha que apunta hacia arriba. (18)

La inclusión de separadores en la barra de herramientas Insertar permite organizar con claridad el contenido de la misma.

19 El separador sube una posición dentro del listado, quedando situado bajo el objeto añadido en primer lugar, Hipervínculo. Incluiremos un tercer objeto. Para que quede situado en la última posición de la lista Objetos favoritos, deberemos seleccionar el objeto que la ocupa actualmente. Haga clic sobre el objeto Imagen y haga doble clic sobre el objeto Imagen de sustitución en el otro panel. (19)

20 Por último, el apartado Objetos favoritos cuenta con un botón que permite la supresión de los objetos sobrantes. Pulse el botón Eliminar objeto favorito seleccionado, representado por el icono de un cubo de basura.

21 La pulsación del botón conlleva la eliminación del objeto favorito que se encontraba seleccionado. Haga clic en el botón Aceptar.

22 Tras la aceptación de la configuración, en la barra de herramientas Insertar se sitúan los botones correspondientes a los objetos favoritos seleccionados, con el separador entre ellos tal y como establecimos en el cuadro de diálogo. (20) Haga clic sobre la palabra Común en la barra de herramientas Insertar para acceder a esta categoría y finalizar de este modo la presente práctica.

RECUERDE

La categoría Spry incluida en la barra de herramientas Insertar consiste en una biblioteca JavaScript y CSS que permite crear páginas Web más completas. Puede utilizar este framework para visualizar datos XML y crear elementos de página interactivos que muestren datos dinámicos sin necesidad de actualizar la página entera.

Lección 3. Gestionar los conjuntos de paneles

Los paneles, accesibles desde el menú Ventana, contienen las opciones y los comandos que permiten modificar el comportamiento de los documentos y de los elementos que los componen. Adobe, en su suite de programas, ha desarrollado una interfaz común para todos sus productos, cambiando el sistema de mostrar los diferentes paneles, reduciéndolos al mínimo y agrupándolos en conjuntos. En Dreamweaver, los paneles se organizan en grupos. El panel seleccionado en un grupo de paneles aparece como una ficha. El programa, además, permite disponer de ellos de la manera que el usuario desee. Mediante la técnica de arrastre se pueden situar los diferentes grupos en el lugar elegido de la pantalla, bloqueándolos en alguno de los laterales (bien acoplándolos en algún grupo existente, bien conformando uno nuevo) o ubicándolos como flotantes. Los paneles incluyen un menú emergente con opciones adicionales al que se accede mediante el icono que aparece en su esquina superior derecha.

1 El panel Propiedades, conocido más usualmente como Inspector de propiedades, es uno de los principales de la aplicación y, por defecto, se encuentra acoplado en la parte inferior de la pantalla. Cada panel presenta en su parte superior una pestaña con su título seguida de una barra con el botón de opciones. Como ya vimos en la lección anterior, para contraer un panel es posible hacer doble clic sobre su pestaña, aunque también puede utilizar el menú contextual de la misma. En este caso y a modo de ejemplo, haga clic con el botón derecho del ratón sobre la pestaña del panel Propiedades y, en el menú contextual que se despliega, pulse sobre el comando Minimizar. (1)

En versiones anteriores del programa, era posible contraer un panel con un único clic en su cabecera.

2 Efectivamente, de este modo el panel queda contraído en este caso en la parte inferior de la pantalla, mostrando sólo la pestaña que lo encabeza. (2) Para mostrarlo nuevamente expandido, haga doble clic sobre dicha pestaña.

3 Dada la complejidad de sus funciones, Dreamweaver cuenta con un gran número de paneles. La mayoría de ellos se encuentran apilados en el lateral derecho de la pantalla en el espacio de trabajo predeterminado Diseñador. Algunos de estos paneles se presentan de forma independiente, aunque la mayoría se ven agrupados con paneles relacionados, como el panel Archivos y el panel Activos. Esto no significa que no puedan gestionarse por separado. Abra el menú Ventana y seleccione la opción Activos.

4 La ficha Activos pasa a primer plano dentro del grupo llamado Archivos. No es necesario utilizar el menú Ventana cada vez que se quiera alternar la ficha del grupo de paneles activa. Como ya sabe, para acceder a un panel activo basta con pulsar sobre su pestaña. Haga clic en la pestaña Archivos para visualizar de nuevo su contenido.

5 Los grupos pueden ser desacoplados mediante la técnica de arrastre y situados como flotantes en el lugar elegido del área de trabajo. Además de esta reubicación, los paneles pueden ser expandidos de manera que ocupen toda la pantalla, opción muy útil en aquellos casos en que la estructura del sitio Web creado sea muy amplia. Haga clic sobre el botón de opciones del panel Archivos y, del menú que se despliega, pulse sobre el comando Expandir panel de archivos. (3)

6 El panel Archivos adquiere el aspecto de ventana independiente. (4) Para contraer de nuevo el panel, pulse sobre el primer icono empezando por la derecha de la barra de herramientas de esta ventana.

Una vez contraído un panel, puede volver a expandirlo desplegando el menú contextual del panel contraído y pulsando sobre el comando Expandir panel.

Algunos paneles pueden mostrarse y ocultarse mediante la pulsación de una tecla o una combinación de teclas; en el caso del panel Archivos, esta tecla es la de función F8.

7 Despliegue de nuevo el menú Ventana y haga clic sobre el nombre del panel Inspector de etiquetas.

8 Se abre el panel Inspector de etiquetas compartiendo espacio con el conjunto de paneles Estilos CSS y Elementos PA. (5) El inspector de etiquetas permite ver y editar cada atributo asociado a una determinada etiqueta. Este panel contiene los subpaneles Atributos y Comportamientos. Despliegue el menú de opciones del panel.

9 El menú de opciones, pese a contener comandos diferenciados en su parte superior referidos a las funciones específicas del panel, presenta en la inferior una serie de opciones comunes. La primera abre la ayuda del programa en el punto en que ofrece información relativa al funcionamiento del panel. Las últimas opciones del menú posibilitan el cierre del panel o del grupo entero. En el menú emergente, pulse sobre la opción Cerrar grupo de fichas. (6)

El panel Inspector de etiquetas puede mostrarse y ocultarse mediante la pulsación de la tecla de función F9.

El comando Cerrar del menú de opciones de un conjunto de paneles permite ocultar sólo el panel activo.

10 El conjunto de paneles se oculta. No todos los paneles se presentan por defecto integrados El panel o ventana Inspector en la ventana de la aplicación. Despliegue de nuevo el menú Ventana y seleccione la opción Ins-de código^{puede mostrarse}

El panel o ventana Inspector de código puede mostrarse pulsando la tecla de función F10.

11 El panel Inspector de código se dispone de manera independiente en forma de ventana flotante. (8) La disposición de grupos y paneles inicial viene configurada por la elección del espacio de trabajo. Sabemos que podemos resituar los paneles mediante la técnica de arrastre. Para añadir un panel a un grupo, basta con arrastrarlo hasta situarlo dentro del grupo deseado. Haga clic en la cabecera del panel Inspector de código y arrástrelo hasta situarlo dentro del grupo de paneles Archivos y Activos. (9)

Al situar el elemento arrastrado sobre la ubicación de destino, aparece un marco azul que indica si se encuentra dentro o fuera del grupo y, por tanto, el momento idóneo para soltar el botón del ratón.

12 De este modo, el panel Inspector de código pasa a formar parte del conjunto encabezado por el panel Archivos. (10) El programa permite contraer en iconos todos los conjuntos de paneles a la vez, liberando el espacio de trabajo. Para ello, pulse sobre la doble punta de flecha situada en la parte superior derecha del espacio de paneles. (11)

Encontrará el comando Contraer en iconos también en el menú contextual de la cabecera de los conjuntos de paneles.

13 De esta forma los paneles se muestran en forma de iconos (12) Como novedad en la versión CS5 de Dreamweaver, entre los paneles predeterminados se incluyen los denominados Adobe BrowserLab y Business Catalyst. El programa se integra con Adobe BrowserLab, uno de los nuevos servicios en línea de CS Live, que proporciona una solución rápida y precisa para realizar pruebas de compatibilidad con múltiples navegadores. Por su parte, Business Catalyst es una aplicación alojada que sustituye las herramientas de escritorio tradicionales por una plataforma central para diseñadores web. Además de efectuar la contracción de los paneles, también puede ocultarlos por completo para conseguir así todavía más espacio en el área de trabajo. Para ello, despliegue el menú Ventana y haga clic sobre el comando Mostrar paneles. (13)

14 Efectivamente, los conjuntos de paneles han desaparecido y ahora dispone de toda la ventana central del programa para trabajar. (14) Para dar por acabado este ejercicio, despliegue de nuevo el menú Ventana y pulse sobre el comando Mostrar paneles.