comparte el articulo 

Dreamweaver CS4: Barras de herramientas

Actualizado el 15/03/2010 < > 1 Comentario

Resumen: Breve descripción de las barras de herramientas de Dreamweaver CS4.

El espacio de trabajo de Adobe Dreamweaver CS4 puede parecer muy complejo a primera vista. Sin embargo, se trata de una colección de sencillas e intuitivas herramientas que permiten crear y editar páginas web en forma muy simple.

Las barras de herramientas son cuatro:

  • Barra de herramientas Documento
  • Barra de herramientas Estándar
  • Barra de herramientas Codificación
  • Barra de herramientas Representación de Estilos

Si se desea, a los efectos de aumentar el espacio visible en el área de trabajo, pueden cerrarse temporalmente las barras de herramientas, o abrirse en caso de necesitarlas. Para realizar estas acciones, hay dos métodos: el primero es hacer click con el botón derecho del ratón sobre alguna de las barras, apareciendo un menú que contiene los nombres de las barras de herramientas y una casilla de activación, o se puede hacer la misma acción a través del menú “Ver / Barras de herramientas”.

A continuación, mostraremos una breve descripción de las diferentes barras de herramientas y su utilidad, que podrá servir como introducción para la posterior descripción detallada de cada una de las funciones de este excelente programa de creación de páginas web.

Descripción de las barras de herramientas

Barra de herramientas Documento

La barra de herramientas Documento es la que contiene los botones que permiten alternar entre los distintos modos de visualización que Dreamweaver ofrece, además de opciones de transferencia entre el modo local y modo remoto. A continuación mostramos una imagen de la barra de herramientas, que mostramos dividida en dos.

Barra de herramientas documentos

El primer botón que aparece en la barra es la de Vista de Código, que hace que en la ventana del documento solo se visualice el código.

A continuación se encuentra el botón “Dividir”, que divide la ventana y muestra el código y la vista de diseño.

Luego se encuentra el botón “Diseño” que abre la vista de diseño en la ventana del documento.

El siguiente botón, es el “Vista en Vivo”, que tiene una vista de navegador, que a diferencia de la vista de diseño, no es editable, aún cuando es posible que, cuando la vista está dividida, ver que parte del código se está visualizando, además de poder editar en la vista de código y ver los cambios “en vivo” en esta vista.

El botón de “Código en Vivo”, muestra el código tal como puede visualizarse un código cuando se accede al código desde un navegador, es decir, el código “visible”. En los documentos HTML y XHTML, el código mostrado en esta vista y en la Vista de Código es la misma. Es muy útil en casos de diseños en PHP o ASP, en los cuales aparece el código tal como es subido al servidor en la vista de código, mientras que en la de código en vivo aparece el código que el servidor envía al navegador. Para la visualización de estos documentos, es necesario tener un servidor de pruebas, instalado u online.

Título del documento, es un campo que aparece en la barra de herramientas, que permite poner el título o modificarlo en caso de que ya lo tenga. Este título será insertado entre las etiquetas <title> y </title> y se muestra en la etiqueta del documento.

El botón Administración de Archivos, muestra un menú emergente con las opciones de dicho menú. El botón que aparece a continuación es el de Vista Previa, que abre un menú emergente que contiene una lista editable de navegadores (los cuales deben estar instalados en el ordenador), incluyendo la opción de visualizar la página en un simulador de móvil con varios formatos y resoluciones.

De inmediato aparece un botón de actualización de la vista, seguido de un botón de opciones, que permite modificar la forma en que se muestran los documentos. Luego, el botón de Ayudas Visuales muestra las distintas ayudas visuales para el diseño de las páginas. En seguida, el botón Validar Formato, permite la validación del código completo de una página o una sección del mismo. Por último, veremos un botón de Comprobar Página, que permite comprobar la compatibilidad con navegadores, dando los problemas de compatibilidad del código en una ventana.

Barra de herramientas estándar

Barra estándar y represemtaión de estilos

La barra de herramientas estándar es similar a las barras de herramientas estándar de casi todos los programas. En esta barra se puede abrir documentos, crear nuevos, guardar, imprimir, cortar, copiar, pegar, etc. Su utilización es similar a los de cualquier otro software.

Barra de estado

Esta barra se encuentra ubicada al pie, y contiene la información adicional del documento, entre las que se encuentran algunas ayudas, como el selector de etiquetas, que muestra las etiquetas seleccionadas en cualquiera de las vistas, precedidas de las etiquetas de superior jerarquía.

En esta barra también pueden seleccionarse y deseleccionarse las herramientas de mano, se puede seleccionar el zoom empleado y el tamaño de la ventana, que permite optar por tamaños estándar o personalizados. A continuación aparece un campo en el que se muestra el tamaño de la página y el tiempo de descarga, información que incluye los archivos dependientes (CSS, JS, etc.), imágenes y videos. Por último, la barra muestra la codificación del documento.

Barra de codificación (o de programación)

Barra de herramientas codificación

Esta barra de herramientas se encuentra dispuesta en forma vertical, y solo es visible cuando se encuentra la vista de código (su uso es exclusivo en el código). Esta barra de herramientas puede ocultarse o personalizarse, mostrando los botones que son útiles y cancelando la visualización de aquellos que no presentan utilidad.

Barra de Representación de Estilos

Esta barra, que aparece oculta por defecto, contiene los comandos que permiten la visualización de documentos de acuerdo al medio para el cual ha sido programado (si se han hecho vistas para diferentes medios) y alternar entre distintas hojas de estilo. Puede verse la página en modo “Screen” (pantalla, muestra el documento como aparecerá en un ordenador), en modo de impresión, móvil y proyección.

Publicado el 15/03/2010, última actualización 15/03/2010.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Andrés Fernández

URL: LaWebera.es :: Diseño Web

Añadir Comentario (Subir al texto)

1 Comentario

  1. Menús Archivo y Edición de Dreamweaver

    [...] barra de herramientas estándar de Adobe Dreamweaver tiene muchas funciones que pueden catalogarse como normales (Guardar, guardar como, copiar, pegar, [...]

    Viernes, 26 de marzo 2010

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras