Área de trabajo en DreamWeaver

dreamweaver
Validar nuestro código en DreamWeaver
25 diciembre, 2014
dreamweaver
Estilos y Comportamientos en DreamWeaver
25 diciembre, 2014

Área de trabajo en DreamWeaver

dreamweaver

Pantalla inicial de Dreamweaver

El área de trabajo de Dreamweaver puede adaptarse a distintas formas de trabajar y a diversos niveles de experiencia. Cuando inicie Dreamweaver, se abrirán los siguientes elementos del área de trabajo:

pantalla inicial
    La ventana de documento muestra el documento actual mientras lo está creando y editando.

  • El panel Objetos contiene iconos en los que puede hacer clic para insertar objetos en el documento y para cambiar su forma de trabajar en el documento.
  • Dreamweaver proporciona numerosos paneles flotantes, como el panel Estilos HTML y el inspector de código, que le permiten trabajar con otros elementos de Dreamweaver.
  • La barra del lanzador contiene botones para abrir y cerrar los inspectores y los paneles utilizados con mayor frecuencia.
  • El inspector de propiedades muestra propiedades del objeto o texto seleccionado y permite modificar dichas propiedades. (Las propiedades que aparecen en el inspector dependen del objeto o texto seleccionado activamente en el documento.)

Para abrir ventanas, inspectores y paneles de Dreamweaver, utilice el menú Ventana y elija la opción deseada.

Diferentes vistas de Dreamweaver

Vista de Código
vista de código

Conforme cree y trabaje con los documentos, Dreamweaver generará automáticamente el código HTML subyacente. Para examinar o editar este código, utilice uno de los editores de código de Dreamweaver: la vista de Código de la ventana de documento o el inspector de código.

Vista de Diseño
vista de diseño

La vista de Diseño muestra una representación visual del documento tal y como la verá en la pantalla del navegador. Cuando trabaje en la vista de Diseño, podrá optar entre dos vistas para realizar el diseño: vista de Disposición (puede diseñar una disposición de página e insertar gráficos, texto y otros elementos multimedia) o vista Estándar (permite insertar capas, crear documentos de marcos, crear tablas o utilizar otras funciones no disponibles en la vista de Disposición y se activa haciendo clic en el icono Vista estándar del panel Objetos).

Vista Combinada
vista combinada

Como se señaló, es una combinación de las dos anteriores.

La ventana de documento

En la vista de Diseño, la ventana de documento muestra el documento actual aproximadamente igual a como aparecerá en un navegador Web. La barra de título de la ventana de documento muestra el título de la página y, entre paréntesis, el nombre de la carpeta raíz, el nombre del archivo y un asterisco si el archivo contiene cambios no guardados.
La barra de Estado, situada en la parte inferior de la ventana de documento, proporciona información adicional sobre el documento que está creando.

barra de estado

El selector de etiquetas muestra las etiquetas HTML padre que controlan el texto o los objetos seleccionados. Haga clic en una de estas etiquetas para resaltar su contenido en la ventana de documento. Haga clic en <body>para seleccionar todo el cuerpo del documento.

Haciendo un clic sobre Tamaño de ventana, se despliega un menú que permite cambiar el tamaño de la ventana de documento para que adopte dimensiones predeterminadas o personalizadas. A la derecha de este, aparece la estimación del tamaño del documento y del tiempo de descarga de la página, incluidos todos los archivos dependientes, como imágenes y otros archivos multimedia.

La barra del lanzador aparece a lo largo de la parte inferior de la ventana de documento. De forma predeterminada, los botones de la barra del lanzador abren la ventana Sitio, el panel Activos, el panel Estilos HTML, el panel Estilos CSS, el panel Comportamientos, el panel Historial y el inspector de código. Para especificar qué botones deben aparecer en la barra del lanzador (y en el lanzador flotante).

Utilizar la barra del lanzador La barra del lanzador contiene botones que permiten abrir y cerrar diversos inspectores, paneles y ventanas. También puede ver el lanzador, un panel flotante con idénticos botones.

barra del lanzador

Para mostrar u ocultar el lanzador:

Abra el menú Ventana y elija Lanzador.

Si la barra del lanzador no aparece en la parte inferior de la ventana de documento, active Mostrar Lanzador en barra de estado en las preferencias de Barra de estado.

Para especificar qué botones deben aparecer en la barra del lanzador y en el lanzador:

  1. Abra el menú Edición y elija Preferencias. A continuación, seleccione Paneles de la lista de categorías.
    Los elementos seleccionados para mostrar en el lanzador y en la barra del lanzador aparecerán en el cuadro Mostrar en Lanzador.
  2. Para añadir un elemento al lanzador y a la barra del lanzador, haga clic en el botón con el signo más (+).
  3. Para quitar un elemento del lanzador y de la barra del lanzador, resalte el elemento y haga clic en el botón con el signo menos (-).
  4. Para cambiar el orden de los elementos del lanzador o la barra del lanzador, seleccione un elemento en la lista y haga clic en un botón de flecha.
  5. Haga clic en Aceptar.

El lanzador y la barra del lanzador cambiarán para mostrar los elementos que haya

especificado.

Utilizar el panel Objetos

El panel Objetos contiene botones para la creación e inserción de diversos tipos de objetos, como imágenes, tablas, capas . Para mostrar u ocultar el panel Objetos, elija Ventana y seleccione Objetos.

Para insertar un objeto:

  • Haga clic en el correspondiente botón del panel Objetos o arrastre el icono del botón hasta la ventana de documento. Dependiendo del objeto, aparecerá el cuadro de diálogo de inserción de objeto en el que se le pedirá que seleccione o inserte el archivo u objeto deseado.

El panel Objetos contiene siete categorías de forma predeterminada: Caracteres, Común, Formularios, Marcos, Head, Invisibles y Especial. También contiene botones que cambian de vista: Estándar y Disposición.

panel de objetos
  • El panel Caracteres contiene caracteres especiales, como los símbolos de copyright, de comillas curvas y de marca registrada. Tenga en cuenta que estos símbolos no se muestran correctamente en las versiones anteriores a la 3.0 de los navegadores (Netscape e IE).
  • La categoría Común contiene botones para la creación e inserción de los objetos más utilizados, como imágenes, tablas y capas.
  • La categoría Formularios contiene botones que permiten crear formularios e insertar elementos de formulario.
  • La categoría Marcos contiene estructuras comunes de conjuntos de marcos.

  • La categoría Head contiene botones que permiten añadir diversos elementos de la sección head, como etiquetas meta, keywords y base.
  • La categoría Invisibles contiene botones que permiten crear objetos no visibles en la ventana del navegador, como los puntos de fijación con nombre.
  • La categoría Especial contiene botones que permiten insertar elementos especiales, como applets Java, plug-ins y objetos ActiveX.
  • La sección Ver del panel Objetos permite elegir entre vista Estándar (predeterminada) o de Disposición. Si está seleccionada la vista de Disposición, también podrá seleccionar las herramientas de Disposición: Dibujar celda de disposición y Dibujar tabla de disposición.
  • Cuando inserte objetos tales como imágenes, tablas, secuencias de comandos y elementos head , aparecerá un cuadro de diálogo en el que se le solicitará información adicional. Puede suprimir estos cuadros de diálogo desactivando la opción Mostrar diálogo al insertar objetos o manteniendo presionada la tecla Control mientras crea el objeto. Cuando se inserta un objeto con esta opción desactivada, el objeto recibe valores de atributo predeterminados. Después de insertar el objeto, utilice el inspector de propiedades para cambiar sus propiedades.
  • Las preferencias del panel Objetos permiten visualizar el contenido del panel Objetos como texto solamente, iconos solamente o texto e iconos.

Utilizar el inspector de propiedades

El inspector de propiedades permite examinar y editar las propiedades del elemento de página seleccionado actualmente. (Un elemento de página es un objeto o texto.) Puede seleccionar elementos de página en la ventana de documento o en el inspector de código.

Para mostrar u ocultar el inspector de propiedades, elija Ventana y luego la opción Propiedades.

barra de propiedades

La mayoría de los cambios realizados en las propiedades se aplicarán de inmediato en la ventana de documento . (Para algunas propiedades, los cambios no se aplican hasta que se hace clic fuera de los campos de texto de edición de la propiedad, se presiona ENTER o se presiona TAB para cambiar a otra propiedad.)
El contenido del inspector de propiedades varía en función del elemento seleccionado. El inspector de propiedades muestra inicialmente las propiedades del elemento seleccionado que se utilizan con mayor frecuencia. Haga clic en la flecha de ampliación, situada en la esquina inferior derecha del inspector de propiedades, para ver más propiedades del elemento.

Trabajar con colores

En Dreamweaver, muchos de los cuadros de diálogo, así como el inspector de propiedades de muchos elementos de página, contienen un cuadro de color que abre un selector de color.Utilice el selector de color para elegir el color de un elemento de la página.

Para elegir un color en Dreamweaver:

  1. Elija un cuadro de color en cualquier cuadro de diálogo o en el inspector de propiedades.
  2. Aparecerá el selector de color.
selector de colores
  1. Lleve a cabo una de estas operaciones:
    • Use el cuentagotas para seleccionar un color de la paleta. Todos los colores de las paletas Cubos de colores (predeterminado) y Tono continuo son seguros para la Web; los de otras paletas no lo son.
    • Utilice el cuentagotas para seleccionar un color de cualquier punto de la pantalla, incluso fuera de las ventanas de Dreamweaver. (Si hace clic en el escritorio u otra aplicación, Dreamweaver recogerá el color donde haya hecho clic, pero es posible que se active la otra aplicación. En tal caso, haga clic en una ventana de Dreamweaver para seguir trabajando con este programa, o mantenga presionado el botón del ratón al moverlo de Dreamweaver al escritorio para evitar cambiar a otra aplicación.)

    • Para ampliar la selección de color, utilice el menú emergente situado en la esquina superior derecha del selector de color. Puede seleccionar Cubos de colores, Tono continuo, SO Windows, SO Mac, Escala de grises y Ajustar a valores seguros para la Web.
    • Para quitar el color actual sin elegir ningún otro color, haga clic en el botón Tachar.
    • Para abrir el selector de color del sistema, haga clic en el botón Rueda de color

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *