Читать книгу Manual de Dreamweaver CS5 - MEDIAactive - Страница 11

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.