martes, 23 de abril de 2013

Práctica 13 - Ventana principal de Adobe DreamWeaver CS5



Introducción al diseño del espacio de trabajo
El espacio de trabajo de Dreamweaver permite ver las propiedades de los documentos y los objetos. Además, coloca muchas de las operaciones más frecuentes en barras de herramientas para que pueda realizar cambios en los documentos rápidamente.


A. Barra de herramientas Documento B. Barra de la aplicación C. Ventana de documento D. Conmutador de espacios de trabajo E. Grupos de paneles F. Selector de etiquetas G. Inspector de propiedades H. Panel Archivos
Para ver un tutorial sobre el uso de otros espacios de trabajo de Dreamweaver, consulte
Descripción general de los elementos del espacio de trabajo
El espacio de trabajo incluye los siguientes elementos.
Dreamweaver ofrece otros muchos paneles, inspectores y ventanas. Para abrir los paneles, inspectores y ventanas, utilice el menú Ventana.
Ventana de bienvenida
Le permite abrir un documento reciente o crear un documento nuevo. Desde la pantalla de bienvenida, también puede profundizar sus conocimientos sobre Dreamweaver mediante una visita guiada o un tutorial del producto.
Barra de la aplicación
A lo largo de su parte superior, la ventana de la aplicación contiene un conmutador de espacios de trabajo, menús (sólo Windows) y otros controles de aplicación.
Barra de herramientas Documento
Contiene botones que proporcionan opciones para diferentes vistas de la ventana de documento (como la vista Diseño y la vista Código), diversas opciones de visualización y algunas operaciones comunes como la obtención de una vista previa en un navegador.
Barra de herramientas Estándar
Para mostrar la barra de herramientas Estándar, seleccione Ver > Barras de herramientas > Estándar. La barra de herramientas contiene botones para las operaciones más habituales de los menús Archivo y Edición: Nuevo, Abrir, Examinar en Brigde, Guardar, Guardar todo, Imprimir código, Cortar, Copiar, Pegar, Deshacer y Rehacer.
Barra de herramientas Codificación
(Sólo se muestra en la vista Código.) Contiene botones que le permiten realizar numerosas operaciones de codificación estándar.
Barra de herramientas Representación de estilos
Para mostrar la barra de herramientas Estándar, seleccione Ver > Barras de herramientas > Representación de estilos. La barra de herramientas contiene botones que le permiten ver cómo aparecería el diseño en distintos tipos de medios si utilizase hojas de estilos dependientes de los medios. También contiene un botón que le permite activar o desactivar estilos de hojas de estilos en cascada (CSS).
Ventana de documento
Muestra el documento actual mientras lo está creando y editando.
Inspector de propiedades
Le permite ver y cambiar diversas propiedades del objeto o texto seleccionado. Cada objeto tiene propiedades distintas. El inspector de propiedades no está ampliado de forma predeterminada en el diseño del espacio de trabajo de Programador.
Selector de etiquetas
Situado en la barra de estado de la parte inferior de la ventana de documento. Muestra la jerarquía de etiquetas que rodea a la selección actual. Haga clic en cualquier etiqueta de la jerarquía para seleccionar la etiqueta y todo su contenido.
Paneles
Le ayudan a supervisar y modificar el trabajo realizado. Ejemplos de paneles son el panel Insertar, el panel Estilos CSS y el panel Archivos. Para ampliar un panel, haga doble clic en su ficha.
Panel Insertar
Contiene botones para la inserción de diversos tipos de objeto, como imágenes, tablas y elementos multimedia, en un documento. Cada objeto es un fragmento de código HTML que le permite establecer diversos atributos al insertarlo. Por ejemplo, puede insertar una tabla haciendo clic en el botón Tabla del panel Insertar. Si lo prefiere, puede insertar objetos utilizando el menú Insertar en lugar del panel Insertar.
Panel Archivos
Le permite administrar los archivos y las carpetas, tanto si forman parte de un sitio de Dreamweaver como si se encuentran en un servidor remoto. El panel Archivos también permite acceder a todos los archivos del disco local.
Introducción a la ventana de documento
La ventana de documento muestra el documento actual. Para cambiar a un documento, haga clic en su ficha.
Puede elegir entre las vistas siguientes.
Vista Diseño
Un entorno para el diseño visual de la página, la edición visual y el desarrollo rápido de aplicaciones. En esta vista, Dreamweaver muestra una representación visual del documento completamente editable, similar a la que aparecería en un navegador.
Vista de código
Un entorno de codificación manual para escribir y editar código HTML, Java Script, código de lenguaje de servidor, como por ejemplo PHP o ColdFusion Markup Language (CFML), y otros tipos de código.
Vista de código dividida
Versión dividida de la vista Código que le permite desplazarse por el trabajo realizado en diferentes secciones del documento a la vez.
Vistas Código y Diseño
Le permite ver las dos vistas, Código y Diseño, para el mismo documento en una sola ventana.
La Vista en vivo, que es similar a la vista Diseño, muestra una representación más realista de la apariencia que tendrá el documento en un navegador y le permite interactuar con el documento de la misma forma que lo haría en un navegador. La Vista en vivo no es editable. No obstante, puede realizar modificaciones en la vista Código y actualizar la Vista en vivo para ver los cambios.
Vista Código en vivo
Sólo está disponible al visualizar un documento en la Vista en vivo. La vista Código en vivo muestra el código que un navegador utiliza para ejecutar la página y cambia dinámicamente conforme se interactúa con la página en la Vista en vivo. La vista Código en vivo no es editable.
Cuando una ventana de documento está maximizada (configuración predeterminada), aparecen fichas en la parte superior de la misma con los nombres de archivo de todos los documentos abiertos. Dreamweaver muestra un asterisco después del nombre del archivo si ha realizado cambios que no ha guardado todavía.
Dreamweaver también muestra la barra de herramientas Archivos relacionados debajo de la ficha del documento (o debajo de la barra de título del documento si está viendo documentos en ventanas independientes). Los documentos relacionados son documentos asociados al documento actual, como archivos CSS o archivos Java Script. Para abrir uno de los archivos relacionados en la ventana de documento, haga clic en su nombre de archivo en la barra de herramientas Archivos relacionados.

Introducción a la barra de herramientas Documento
La barra de herramientas Documento contiene botones que le permiten cambiar rápidamente entre diferentes vistas del documento. La barra de herramientas contiene también algunos comandos y opciones relativos a la visualización del documento y a su transferencia entre los sitios local y remoto. La siguiente ilustración muestra la barra de herramientas de documento ampliada.


A. Mostrar vista de código B. Mostrar vistas de código y diseño C. Mostrar vista de diseño D. Vista en vivo E. Multipantalla F. Vista previa/Depurar en navegador G. Administración de archivos H. Validación W3C I. Comprobar compatibilidad con navegadores J. Ayudas visuales K. Actualizar vista de diseño L. Título de documento
En la barra de herramientas Documento, aparecen las siguientes opciones:
Mostrar vista de código
Sólo muestra la vista Código en la ventana de documento.
Mostrar vistas de código y diseño
Divide la ventana de documento entre las vistas Código y Diseño. Cuando seleccione esta vista combinada, se encontrará disponible la opción Vista de diseño encima del menú Opciones de visualización.
Mostrar vista de diseño
Sólo muestra la vista Diseño en la ventana de documento.
Vista en vivo
Muestra una vista del documento no editable, interactiva y basada en navegador.
Multipantalla
Muestra la página tal y como aparecería en pantallas de diferentes tamaños.
Vista previa/Depurar en navegador
Le permite obtener una vista previa o depurar el documento en un navegador. Seleccione un navegador en el menú emergente.
Administración de archivos
Muestra el menú emergente Administración de archivos.
Validación W3C
Permite validar el documento actual o una etiqueta seleccionada.
Comprobar compatibilidad con navegadores
Le permite comprobar si el CSS es compatible con diferentes navegadores.
Ayudas visuales
Permite utilizar distintas ayudas visuales para el diseño de las páginas.
Actualizar vista de diseño
Actualiza la vista Diseño tras realizar cambios en la vista Código. Los cambios realizados en la vista Código no aparecerán de forma automática en la vista Diseño hasta que se efectúen determinadas acciones, como guardar el archivo o hacer clic en este botón.
Título del documento
Permite introducir un título para el documento, que aparecerá en la barra de título del navegador. Si el documento ya tiene título, éste aparecerá en dicho campo.
Introducción a la barra de herramientas Estándar
La barra de herramientas Estándar contiene botones para las operaciones más habituales de los menús Archivo y Edición: Nuevo, Abrir, Examinar en Brigde, Guardar, Guardar todo, Imprimir código, Cortar, Copiar, Pegar, Deshacer y Rehacer. Estos botones se utilizan del mismo modo que los comandos de menú equivalentes.
Introducción a la barra de herramientas Representación de estilos
La barra de herramientas Representación de estilos (oculta de manera predeterminada) contiene botones que le permiten ver cómo aparecería el diseño en distintos tipos de medios si utilizase hojas de estilos dependientes de los medios. También contiene un botón con el que es posible activar o desactivar los estilos CSS. Para mostrar la barra de herramientas, seleccione Ver > Barras de herramientas > Representación de estilos.


Esta barra de herramientas sólo funciona si los documentos utilizan hojas de estilos dependientes de los medios. Por ejemplo, su hoja de estilos puede especificar una regla para imprimir y otra regla distinta para los dispositivos de mano. Para obtener más información acerca de la creación de hojas de estilos dependientes de los medios, consulte el sitio Web de World Wide Web Consortium en
De manera predeterminada, Dreamweaver muestra el diseño para una pantalla (que muestra cómo se representa una página en la pantalla del equipo). Puede ver las representaciones para los diferentes soportes haciendo clic en los correspondientes botones de la barra de herramientas Representación de estilos.
Representar tipo de medio Screen
Muestra cómo aparece la página en la pantalla de un equipo.
Representar tipo de medio Print
Muestra cómo aparece la página en una hoja de papel impresa.
Representar tipo de medio Handheld
Muestra cómo aparece la página en un dispositivo de mano, como un teléfono móvil o un dispositivo BlackBerry.
Representar tipo de medio Projection
Muestra cómo aparece la página en un dispositivo de proyección.
Representar tipo de medio TTY
Muestra cómo aparece la página en un teletipo.
Representar tipo de medio TV
Muestra cómo aparece la página en la pantalla de televisión.
Alternar visualización de estilos CSS
Le permite activar o desactivar estilos CSS. Este botón funciona de manera independiente a los demás botones de medios.
Hojas de estilos de tiempo de diseño
Le permite especificar una hoja de estilos de tiempo de diseño.
Para ver un tutorial sobre el diseño de hojas de estilos para impresión y dispositivos móviles, consulte

Introducción a la barra de herramientas Navegación con navegador
La barra de herramientas Navegación con navegador se activa en la Vista en vivo y muestra la dirección de la página que está viendo en la ventana de documento. La Vista en vivo actúa como un navegador normal, de manera que aunque navegue a un sitio situado fuera del sitio local (por ejemplo, http://www.adobe.com), Dreamweaver cargará la página en la ventana de documento.


A. Controles de navegador B. Cuadro Dirección C. Opciones de Vista en vivo
De manera predeterminada, los vínculos no están activos en la Vista en vivo. Que los vínculos no estén activos le permite seleccionar o hacer clic en el texto de un vínculo en la ventana de documento sin navegar a otra página. Para comprobar los vínculos en la Vista en vivo, puede activar el clic único o el clic continuo seleccionando Seguir vínculos o Seguir vínculos continuamente del menú Opciones de visualización situado a la derecha del cuadro de dirección.
Introducción a la barra de herramientas Codificación
La barra de herramientas Codificación contiene botones que le permiten realizar numerosas operaciones de codificación estándar, como ampliar y contraer las selecciones de código, resaltar código no válido, insertar o eliminar comentarios, aplicar sangría al código e insertar fragmentos de código utilizados recientemente. La barra de herramientas Codificación aparece verticalmente en la parte izquierda de la ventana de documento y sólo está visible cuando se muestra la vista Código.


No puede desacoplar ni mover la barra de herramientas Codificación, pero sí puede ocultarla (Ver > Barras de herramientas > Codificación).
También puede modificar la barra de herramientas Codificación para que muestre más botones (como Ajustar texto, Mostrar caracteres ocultos y Sangría automática) u ocultar botones que no desea utilizar. Para ello, no obstante, deberá editar el archivo XML que genera la barra de herramientas. Para más información, consulte Ampliación de Dreamweaver.
Introducción a la barra de estado
La barra de estado, situada en la parte inferior de la ventana de documento, proporciona información adicional sobre el documento que está creando.



Selector de etiquetas
Muestra la jerarquía de etiquetas que rodea a la selección actual. Haga clic en cualquier etiqueta de la jerarquía para seleccionar la etiqueta y todo su contenido. Haga clic en <body> para seleccionar todo el cuerpo del documento. Para definir los atributos class o ID para una etiqueta en el selector de etiquetas, haga clic con el botón de derecho del ratón (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en la etiqueta y elija una clase o una ID del menú contextual.
Herramienta Seleccionar
Activa y desactiva la herramienta Mano.
Herramienta Mano
Permite hacer clic en el documento y arrastrarlo por la ventana de documento.
Herramienta Zoom y menú emergente Establecer nivel de aumento
Permiten establecer un nivel de aumento para el documento.
Menú emergente Tamaño de ventana
(No disponible en la vista Código.) Permite cambiar el tamaño de la ventana de documento a dimensiones predeterminadas o personalizadas. Cuando se cambia el tamaño de vista de una página en la vista Diseño o la Vista en vivo, sólo cambian las dimensiones de la vista. El tamaño del documento no se modifica.
Además de tamaños predeterminados y personalizados, Dreamweaver también muestra los tamaños especificados en una consulta de medios. Cuando se selecciona un tamaño correspondiente a una consulta de medios, Dreamweaver usa la consulta de medios para mostrar la página. También puede cambiar la orientación de la página para obtener la vista previa de la página para dispositivos móviles en los que el diseño de página cambia en función de cómo se sujete el dispositivo.
Tamaño del documento y tiempo de descarga
Muestra 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.
Indicador de codificación
Muestra la codificación del texto del documento actual.
Descripción general del inspector de propiedades
El inspector de propiedades permite examinar y editar las propiedades más comunes del elemento de página seleccionado actualmente, como texto o un objeto insertado. El contenido del inspector de propiedades es distinto en función del elemento seleccionado. Por ejemplo, si selecciona una imagen de la página, el inspector de propiedades cambiará para mostrar las propiedades de la imagen (por ejemplo, la ruta de archivo de la imagen, el ancho y el alto de la imagen, el borde que rodea la imagen en caso de que lo haya, etc.).


El inspector de propiedades se encuentra, de manera predeterminada, en el borde inferior del espacio de trabajo, aunque puede desacoplarlo y convertirlo en un panel flotante en el espacio de trabajo.
Información general sobre el panel Insertar
El panel Insertar contiene botones para crear e insertar objetos como tablas, imágenes y vínculos. Los botones están ordenados en diferentes categorías, entre las que puede cambiar seleccionando la categoría deseada del menú desplegable Categoría. Si el documento actual contiene código de servidor, como los documentos ASP o CFML, aparecen también otras categorías.


Algunas categorías tienen botones con menús emergentes. Al seleccionar una opción de un menú emergente, dicha opción se convierte en la acción predeterminada del botón. Por ejemplo, si selecciona Marcador de posición de imagen en el menú emergente del botón Imagen, la siguiente vez que haga clic en el botón Imagen, Dreamweaver insertará un marcador de posición de imagen. Siempre que seleccione una nueva opción del menú emergente cambiará la acción predeterminada del botón.
El panel Insertar está organizado en las categorías siguientes:
Categoría Común
Permite crear e insertar los objetos que se utilizan con más frecuencia, como las imágenes y las tablas.
Categoría Diseño
Permite insertar tablas, elementos de tabla, etiquetas div, marcos y widgets de Spry. También puede elegir dos vistas para tablas: Estándar (valor predeterminado) y Tablas expandidas.
Categoría Formularios
Contiene botones que permiten crear formularios e insertar elementos de formulario, incluidos widgets de validación de Spry.
Categoría Datos
Permite insertar objetos de datos de Spry y otros elementos dinámicos, como juegos de registros, regiones repetidas y grabar formularios de inserción y actualización.
Categoría Spry
Contiene botones para crear páginas de Spry, incluidos objetos de datos y widgets de Spry.
Categoría jQuery Mobile
Contiene botones para crear sitios que usan jQuery Mobile.
Categoría InContext Editing
Contiene botones para la creación de páginas de InContext Editing, incluidos botones para Regiones editables, Regiones repetidas y la administración de clases CSS.
Categoría Texto
Permite insertar diversas etiquetas de formato de texto y listas, como b, em, p, h1 y ul.
Categoría Favoritos
Permite agrupar y organizar los botones del panel Insertar que utiliza con más frecuencia en un lugar común.
Categorías de código de servidor
Sólo están disponibles para las páginas que emplean un lenguaje de servidor determinado, como ASP, CFML Basic, CFML Flow, CFML Advanced, y PHP. Cada una de estas categorías contiene objetos de código de servidor que pueden insertarse en la vista Código.
A diferencia de otros paneles de Dreamweaver, el panel Insertar se puede arrastrar fuera de su posición de acoplamiento predeterminada y colocarse en una posición horizontal en la parte superior de la ventana de documento. Al hacerlo, cambia de panel a barra de herramientas (aunque no puede ocultarla y mostrarla como el resto de barras de herramientas).
Descripción general del panel Archivos
Utilice el panel Archivos para ver y administrar los archivos del sitio de Dreamweaver.


Al visualizar sitios, archivos o carpetas en el panel Archivos, puede cambiar el tamaño del área de visualización y expandir o contraer el panel Archivos. Cuando el panel Archivos se contrae, muestra el contenido del sitio local, el sitio remoto, el servidor de prueba o el depósito SVN como una lista de archivos. Cuando está ampliado, además del sitio local, muestra el sitio remoto o el servidor de prueba o el depósito SVN.
Para sitios de Dreamweaver, también puede personalizar el panel Archivos cambiando la vista (sitio local o sitio remoto) que aparece de forma predeterminada en el panel contraído.
(CS 5.5) El panel Archivos interactúa con el servidor a intervalos regulares para actualizar su contenido. Aparece un mensaje de error si intenta realizar una acción en el panel Archivos mientras está ejecutando estas actualizaciones automáticas. Para desactivar las actualizaciones automáticas, abra el menú de opciones del panel Archivos y anule la selección de Actualización automática en el menú Ver.
Para actualizar el contenido del panel manualmente, utilice el botón Actualizar en el panel. El estado de protección actual de los archivos, sin embargo, sólo se actualiza cuando están activadas las actualizaciones automáticas.
Introducción al panel Estilos CSS
El panel Estilos CSS le permite supervisar las reglas y propiedades CSS que afectan a un elemento de página actualmente seleccionado (modo Actual) o las reglas y propiedades que afectan a todo un documento (modo Todo). Un botón situado en la parte superior del panel Estilos CSS le permite cambiar entre estos dos modos. El panel Estilos CSS también le permite modificar propiedades CSS tanto en modo Todo como en modo Actual.


Puede cambiar el tamaño de cualquiera de los paneles arrastrando los bordes que los separan.
En modo Actual, el panel Estilos CSS muestra tres secciones: un resumen del panel Selección que muestra las propiedades de CSS de la selección actual del documento, un panel Reglas que muestra la ubicación de las propiedades seleccionadas (o una cascada de reglas para la etiqueta seleccionada, en función de la selección) y un panel Propiedades que le permite editar las propiedades CSS de la regla que define la selección.
En modo Todo, el panel Estilos CSS muestra tres secciones: un panel Todas las reglas arriba y un panel Propiedades abajo. El panel Todas las reglas muestra una lista de reglas definidas en el documento actual, así como las reglas definidas en las hojas de estilo adjuntas al documento actual. El panel Propiedades le permite editar propiedades CSS para cualquier regla seleccionada en el panel Todas las reglas.
Todos los cambios que realice en el panel Propiedades se aplican de forma inmediata; de este modo, puede pre visualizar el trabajo a medida que lo vaya llevando a cabo.

No hay comentarios:

Publicar un comentario