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.
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.
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).
Muestra el
documento actual mientras lo está creando y editando.
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.
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.
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.
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.
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.
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.
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.
Versión
dividida de la vista Código que le permite desplazarse por el trabajo realizado
en diferentes secciones del documento a la vez.
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.
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:
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.
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.
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.
Permite
validar el documento actual o una etiqueta seleccionada.
Comprobar compatibilidad con
navegadores
Le permite
comprobar si el CSS es compatible con diferentes navegadores.
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.
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.
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:
Permite
crear e insertar los objetos que se utilizan con más frecuencia, como las
imágenes y las tablas.
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.
Contiene
botones que permiten crear formularios e insertar elementos de formulario,
incluidos widgets de validación de Spry.
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.
Contiene
botones para crear páginas de Spry, incluidos objetos de datos y widgets de
Spry.
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.
Permite
insertar diversas etiquetas de formato de texto y listas, como b, em, p, h1 y ul.
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.
En la nueva
ventana habrá que especificar el número de Filas y Columnas que tendrá
la tabla, así como el Ancho de la tabla .
Campo de texto y Área de texto
Flash que aparece en la pestaña 
Una vez abierto el panel hay que seleccionar
el botón 
,
para poder trabajar con las plantillas. 
(Si este botón no está activado, pulsa con el botón
derecho del ratón y elige 
.
.