Incorporacin de Dreamweaver

Despus de instalar Dreamweaver, la primera vez que inicie la aplicacin, aparecer un men de inicio rpido en la pantalla con tres preguntas para que pueda personalizar su
espacio de trabajo de Dreamweaver segn sus necesidades.

Segn sus respuestas a estas preguntas, Dreamweaver se abre en un espacio de trabajo de desarrollador (de aspecto minimalista centrado en el cdigo) o un espacio de trabajo
estndar (pantalla dividida con herramientas visuales y una previsualizacin que va mostrando el cdigo dentro de la aplicacin mientras se escribe).

Al seleccionar un espacio de trabajo, debe elegir un tema de color con el que se sienta cmodo. Despus ya podr comenzar.

Nota:

Podr cambiar las preferencias del espacio de trabajo en cualquier otro momento con el cuadro de dilogo Editar > Preferencias.

El inicio
La pantalla de inicio de Dreamweaver le proporciona acceso rpido a sus archivos recientes, archivos de las bibliotecas CC y plantillas de inicio.

Segn el estado de la suscripcin, este espacio de trabajo tambin puede mostrar contenido adaptado a sus necesidades.

Dreamweaver muestra la pantalla de inicio cuando se inicia la aplicacin o si no hay ningn documento abierto.

Espacio de trabajo de inicio en Dreamweaver

Opciones de inicio en Dreamweaver

Archivos recientes
Abrir un archivo abierto recientemente que est en la lista de archivos
recientes.
Archivos de CC

Abrir archivos recientes guardados en las bibliotecas CC en la nube.

Inicio rpido

Empiece por crear documentos en Dreamweaver; para ello, haga clic en los
tipos de archivo que se muestran.

Plantillas de inicio

Abra una de las plantillas de inicio que incluye Dreamweaver.

Nota:

Esta pantalla de inicio est activada y se abre de forma predeterminada.

Si no necesita esta pantalla de inicio, desactive Mostrar pantalla de inicio en el cuadro de dilogo Preferencias > General.

Para obtener ms informacin sobre Creacin y apertura de documentos en Dreamweaver, consulte Creacin y apertura de archivos.

Informacin general sobre el espacio de trabajo

El espacio de trabajo de Dreamweaver permite ver las propiedades de los documentos y los objetos. Adems, coloca muchas de las operaciones ms frecuentes en barras de
herramientas para que pueda realizar cambios en los documentos rpidamente.
Espacio de trabajo de Dreamweaver

A. Barra de aplicaciones B. Barra de herramientas Documento C. Ventana Documento D. Conmutador de espacios de trabajo E. Paneles F. Vista de cdigo G. Barra de
estado H. Selector de etiquetas I. Vista en vivo J. Barra de herramientas

Descripcin general de los elementos del espacio de trabajo

El espacio de trabajo incluye los siguientes elementos:

Barra de la aplicacin

Se encuentra a lo largo de la parte superior de la ventana de la aplicacin y contiene un conmutador de espacios de trabajo, mens (solo Windows) y otros controles de la
aplicacin.

Barra de herramientas Documento

Contiene botones con opciones para las diferentes vistas de la ventana Documento(como la vista Diseo, la vista en vivo y la vista Cdigo).
Barra de herramientas Estndar
Para mostrar la barra de herramientas Estndar, seleccione Ventana > Barras de herramientas > Estndar. La barra de herramientas contiene botones para realizar las
operaciones ms habituales de los mens Archivo y Edicin: Nuevo, Abrir, Guardar, Guardar todo, Imprimir cdigo, Cortar, Copiar, Pegar, Deshacer yRehacer.
Barra de herramientas

Se encuentra en la parte izquierda de la ventana de la aplicacin y contiene botones especficos para cada vista.

Ventana 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 varias propiedades.

Selector de etiquetas
Situado en la barra de estado de la parte inferior de la ventana Documento. Muestra la jerarqua de etiquetas que rodea a la seleccin actual. Haga clic en cualquier etiqueta de
la jerarqua para seleccionar la etiqueta y todo su contenido.
Paneles
Le ayudan a supervisar y modificar el trabajo realizado. Son ejemplos de paneles el panel Insertar, el panelDiseador de CSS y el panel Archivos. Para ampliar un panel, haga
doble clic en su ficha.
El panel Extract

Permite cargar y ver sus archivos PSD en Creative Cloud. Con este panel, puede extraer CSS, texto, imgenes, fuentes, colores, degradados y medidas de las composiciones PSD
en su documento.

Panel Insertar
Contiene botones para la insercin de diversos tipos de objeto, como imgenes, tablas y elementos multimedia, en un documento. Cada objeto es un fragmento de cdigo HTML
que le permite establecer diversos atributos al insertarlo. Por ejemplo, puede insertar una tabla haciendo clic en el botn 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 tambin
permite acceder a todos los archivos almacenados en el disco local. Para obtener ms informacin, consulte Administracin de archivos y carpetas.
Panel Fragmentos
Permite guardar y reutilizar los fragmentos de cdigo en distintos sitios web, sitios e instalaciones de Dreamweaver (con la configuracin de sincronizacin). Para obtener ms
informacin, consulte Reutilizacin de cdigo con fragmentos.
Panel Diseador de CSS

es un inspector de propiedades de CSS que permite crear visualmente estilos CSS y archivos, as como definir propiedades y consultas de medios.
 Nota:

Dreamweaver ofrece otros muchos paneles, inspectores y ventanas. Para abrir los paneles, inspectores y ventanas, utilice el men Ventana.

Introduccin a la ventana Documento

La ventana Documento muestra el documento actual. Para cambiar de una vista del documento a otro, srvase de las opciones de visualizacin de la barra de herramientas
Documento.

Tambin puede cambiar de vista con las opciones del men Ver.

Vista en vivo
muestra una representacin realista del aspecto que tendr el documento en un navegador, y le permite interactuar con el documento de la misma forma que lo hara en un
navegador. Puede editar elementos HTML directamente en la vista en vivo y obtener de inmediato una vista previa de los cambios en la misma vista. Para obtener ms
informacin sobre la edicin en la Vista en vivo, consulte Edicin de elementos HTML en la Vista en vivo.
Vista de Diseo

es un entorno de diseo para disear y editar el aspecto que tendr la pgina y desarrollar rpidamente aplicaciones. En esta vista, Dreamweaver muestra una representacin
visual del documento completamente editable, similar a la que aparecera en un navegador.

Vista de cdigo

es un entorno de programacin manual para escribir y editar cdigo HTML, JavaScript y de cualquier otro tipo.

Cdigo: Cdigo
es una versin dividida de la vista Cdigo que le permite desplazarse por el trabajo realizado en diferentes secciones del documento a la vez.
Cdigo: en vivo

le permite ver las dos vistas del mismo documento, vista de cdigo y vista en vivo, en una sola ventana.

Cdigo: Diseo
le permite ver las dos vistas del mismo documento, Cdigo y Diseo, en una sola ventana.
Cdigo en vivo
muestra el cdigo que un navegador utiliza para ejecutar la pgina y puede cambiar dinmicamente conforme se interacta con la pgina en la vista En vivo.
Cuando una ventana Documento est maximizada (configuracin predeterminada), aparecen fichas en la parte superior de la misma con los nombres de archivo de todos los
documentos abiertos. Dreamweaver muestra un asterisco despus del nombre del archivo si ha realizado cambios que an no ha guardado.
Dreamweaver tambin muestra la barra de herramientas Archivos relacionados debajo de la ficha del documento (o debajo de la barra de ttulo del documento, si est viendo
documentos en ventanas independientes). Los documentos relacionados son documentos asociados al documento actual, como archivos CSS o archivos JavaScript. Para abrir
uno de los archivos relacionados en la ventana Documento, haga clic en su nombre de archivo en la barra de herramientas Archivos relacionados.

Cambio de una vista a otra

Utilice la barra de herramientas Documento para cambiar de una vista a otra rpidamente. Para obtener ms informacin, consulte Introduccin a la barra de herramientas
Documento.

Tambin puede cambiar de una vista a otra con las siguientes opciones del men Ver:

Solo Vista de cdigo: seleccione Cdigo.

Vista dividida: seleccione Dividir y seleccione alguna de las opciones de vista dividida.

Modo de vista: alterne entre la vista en vivo y la vista de diseo.

Cambiar vistas: para cambiar de una vista a otra.

Cambio de vistas con las opciones del men Ver

Reorganizacin o colocacin de
las ventanas del documento en
cascada o en mosaico
Si tiene varios documentos abiertos a la vez, puede
organizarlos en cascada o en mosaico.

Para colocar en cascada ventanas de documentos: seleccione

Ventana > Organizar > Cascada.

Para colocar ventanas de documentos en mosaico:

(Windows) Seleccione Ventana > Organizar > Mosaico

horizontal o Mosaico vertical.

(Macintosh) Seleccione Ventana > Organizar > Mosaico.

Si abre ms de un archivo, las ventanas de los documentos

aparecen en fichas. Para reorganizar las fichas de las ventanas de los documentos, arrastre la pestaa de una de las ventanas a otra ubicacin dentro del grupo.
 Cambio del tamao de la ventana de documento
La barra de estado muestra las dimensiones actuales de la ventana de documento (en pxeles). Para disear una pgina cuyo mejor aspecto se logra con un tamao especfico,
puede ajustar la ventana de documento con cualquiera de los tamaos predeterminados, editar dichos tamaos o crear otros nuevos.

Cuando se cambia el tamao de vista de una pgina en la vista de Diseo o la Vista en vivo, solo cambian las dimensiones de la vista. El tamao del documento no se modifica.

Adems de tamaos predeterminados y personalizados, Dreamweaver tambin muestra los tamaos especificados en una consulta de medios. Cuando se selecciona un tamao
correspondiente a una consulta de medios, Dreamweaver usa la consulta de medios para mostrar la pgina. Tambin puede cambiar la orientacin de la pgina para obtener la
vista previa de la pgina para dispositivos mviles en los que el diseo de pgina cambia en funcin de cmo se sujete el dispositivo.

Para cambiar el tamao de la ventana de documento, seleccione uno de los tamaos del men emergente Tamao de ventana, situado en la parte inferior de la ventana de
documento.

Opciones de cambio de tamao del documento

El tamao de la ventana indicado corresponde a las dimensiones internas de la ventana del

navegador, sin bordes. El tamao del monitor o del dispositivo mvil se indica a la derecha.

Nota:

Si no desea asignar un tamao tan preciso, utilice los mtodos estndar de su sistema operativo,
como arrastrar la esquina inferior derecha de una ventana.

Nota:

(Solo Windows) Los documentos contenidos en la ventana de documento se maximizan de

manera predeterminada y no es posible cambiar el tamao de un documento maximizado. Para
que el documento deje de aparecer maximizado, haga clic en el botn para anular la visualizacin
maximizada, en la esquina superior derecha del documento.

Modificacin de los valores que aparecen en el

men emergente Tamao de ventana
1. Elija Editar tamaos en el men emergente Tamao de ventana.

2. Haga clic en cualquiera de los valores de anchura o altura de la lista Tamaos de ventana y
escriba un valor nuevo. Para hacer que la ventana de documento se ajuste solo a una anchura
especfica (sin modificar la altura), seleccione un valor de altura y elimnelo.

3. Haga clic en el cuadro Descripcin para introducir un texto descriptivo sobre un tamao
especfico.

Adicin de un valor al men emergente Tamao

de ventana
1. Elija Editar tamaos en el men emergente Tamao de ventana.

Adicin de tamaos de ventana al men emergente Tamao de ventana

2. Haga clic en el espacio en blanco situado debajo del ltimo valor de

la columna Anchura.

3. Introduzca valores en Anchura y Altura.

Para establecer solo el Ancho o la Altura, sencillamente deje un

campo vaco.

4. Haga clic en el campo Descripcin para introducir el texto

descriptivo sobre el tamao aadido.

Por ejemplo, puede escribir SVGA o PC estndar junto a la entrada

correspondiente a un monitor de 800 x 600 pxeles, y Mac 17 pulg.
junto a la entrada correspondiente a un monitor de 832 x 624 pxeles.
La mayora de los monitores se pueden ajustar a varias dimensiones
de pxeles.

5. Haga clic en Aplicar y cierre el cuadro de dilogo.

El nuevo tamao de ventana ya est disponible para utilizarse en el

men emergente Tamao de ventana.

Introduccin a la barra de herramientas Documento

La barra de herramientas Documento contiene botones que le permiten cambiar rpidamente entre diferentes vistas del documento. La barra de herramientas contiene
tambin algunos comandos y opciones habituales relativos a la visualizacin del documento y a su transferencia entre los sitios local y remoto.

Barra de herramientas Documento

En la barra de herramientas Documento, aparecen las siguientes opciones:

Vista de cdigo
Solo muestra la Vista de cdigo en la ventana Documento.
Vista dividida
Divide la ventana Documento entre la Vista de cdigo y la Vista de diseo/en vivo. La opcin Vista de diseo no est disponible para los documentos de cuadrcula fluida.
Vista en vivo

Es una previsualizacin interactiva que representa con precisin los proyectos de HTML5 y se actualiza en tiempo real para ver los cambios conforme se realizan. Tambin
puede editar elementos HTML en la vista en vivo. La lista desplegable adyacente a las opciones de Vista en vivo le permite cambiar entre la Vista en vivo y la Vista de diseo.
Esta lista desplegable no est disponible en documentos de cuadrcula fluida.

Vista de diseo

Muestra una representacin del documento tal y como el usuario lo ver en un navegador web.

Introduccin a la barra de herramientas Estndar

Barra de herramientas Estndar
Para mostrar la barra de herramientas Estndar, seleccione Ventana > Barras de herramientas > Estndar. La barra de herramientas contiene botones para realizar las
operaciones ms habituales de los mens Archivo y Edicin: Nuevo, Abrir, Guardar, Guardar todo, Imprimir cdigo, Cortar, Copiar, Pegar, Deshacer yRehacer.

Introduccin a la barra de herramientas Navegacin con navegador

La barra de herramientas Navegacin con navegador se activa en la Vista en vivo y muestra la direccin de la pgina que est viendo en la ventana Documento. La Vista en
vivo acta como un navegador normal, de manera que aunque navegue a un sitio situado fuera del sitio local (por ejemplo, http://www.adobe.com/es), Dreamweaver cargar
la pgina en la ventana Documento.

Barra de herramientas de navegacin con navegador

A. Controles de navegador B. Cuadro de direccin

De manera predeterminada, los vnculos no estn activos en la Vista en vivo. Que los vnculos no estn activos le permite seleccionar o hacer clic en el texto de un vnculo en la
ventana Documento sin navegar a otra pgina. Para comprobar los vnculos en la vista En vivo, puede activar el clic nico o el clic continuo seleccionando Ver > Opciones de
Vista en vivo > Seguir vnculos (Ctrl + clic en vnculo) o Seguir vnculos continuamente.

Introduccin a la barra de herramientas

 La barra de herramientas aparece en vertical en la parte izquierda de la ventana Documento y est visible en todas las vistas: Cdigo, En vivo y Diseo. Los botones de la barra
de herramientas son especficos de cada vista y solo aparecen si son relevantes segn la vista en la que se est trabajando. Por ejemplo, si est trabajando en la vista en vivo, las
opciones especficas de la vista de cdigo, como Formatear cdigo fuente, no aparecern visibles.

Personalizacin de la barra de herramientas

Puede optar por personalizar esta barra de herramientas segn necesite agregando opciones de men o eliminando opciones de men de la barra de herramientas.

Para personalizar la barra de herramientas, haga lo siguiente:

1. Haga clic en en la barra de herramientas para abrir el cuadro de dilogo Personalizar barra de herramientas.

Personalizacin de barras de herramientas

2. Seleccione las opciones del men que desee tener disponibles en la barra de herramientas, o
anule su seleccin; haga clic en Listo para guardar la barra de herramientas.

Para restaurar los botones predeterminados de la barra de herramientas, haga clic en Restaurar
valores predeterminados en el cuadro de dilogo Personalizar barra de herramientas.

Introduccin a la barra de estado

La barra de estado, situada en la parte inferior de la ventana Documento, proporciona
informacin adicional sobre el documento que est creando.

Barra de estado

A. Selector de etiquetas B. Panel de salida C. Color del cdigo D. Cambio entre Insertar y Sobrescribir E. Nmero de lnea y de columna
Selector de etiquetas
Muestra la jerarqua de etiquetas que rodea a la seleccin actual. Haga clic en cualquier etiqueta de la jerarqua 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 botn de
derecho del ratn (Windows) o mantenga pulsada la tecla Control y haga clic (Macintosh) en la etiqueta y elija una clase o una ID del men contextual.
Panel de salida

Haga clic en este icono para ver el panel de salida con los errores de codificacin del documento.

Color del cdigo

(Solo disponible en la vista de cdigo).

Seleccione los lenguajes de codificacin en este men emergente para cambiar el color del cdigo que mostrar segn el lenguaje de programacin.

Cambio entre Insertar y Sobrescribir

(Solo disponible en la vista de cdigo).

Permite alternar entre los modos Insertar y Sobrescribir mientras se trabaja en la vista de cdigo.

Nmero de lnea y de columna

(Solo disponible en la vista Cdigo).

Muestra el nmero de lnea y el nmero de columna donde se encuentra el cursor.

Descripcin general del inspector de propiedades

El inspector de propiedades (Ventana > Propiedades) le permite examinar y editar las propiedades ms comunes del elemento de pgina seleccionado, como texto o un
objeto insertado.
El contenido del inspector de propiedades es distinto en funcin del elemento seleccionado. Por ejemplo, si selecciona una imagen de la pgina, 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.).
 Inspector de propiedades

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.

Nota:

Utilice el inspector de etiquetas para ver y editar todos los atributos asociados con una propiedad de etiqueta determinada.

Para acceder a la ayuda de un inspector de propiedades determinado, haga clic en el botn Ayuda en la esquina superior derecha del inspector de propiedades, o seleccione
Ayuda en el men Opciones de un inspector de propiedades.

Visualizacin y cambio de propiedades de un elemento de pgina

1. Seleccione el elemento de pgina en la ventana de documento.

Es posible que tenga que ampliar el inspector de propiedades para ver todas las propiedades del elemento seleccionado.

2. Cambie las propiedades en cuestin en el inspector de propiedades.

Nota:

Para obtener informacin sobre propiedades especficas, seleccione un elemento en la ventana de documento y, a continuacin, haga clic en el icono de ayuda, situado en la
esquina superior derecha del inspector de propiedades.

3. Si los cambios realizados no se aplican inmediatamente en la ventana de documento, aplquelos mediante uno de estos procedimientos:

Haga clic fuera de los campos de texto de edicin de propiedades.

Presione Intro (Windows) o Retorno (Macintosh).

Presione el tabulador para cambiar a otra propiedad.

Mens contextuales
Los mens contextuales proporcionan acceso rpido a los comandos y las propiedades ms tiles relacionados con la ventana o el objeto con el que est trabajando. En los
mens contextuales solo aparecen los comandos pertinentes segn la seleccin realizada.

Para abrir un men contextual, haga clic con el botn derecho del ratn (Windows) o presione Ctrl y haga clic (Mac) en una seccin de cdigo en la vista de cdigo o en un
objeto en la vista en vivo o la vista de diseo.

Reorganizacin de paneles en Dreamweaver

Puede personalizar la colocacin y el aspecto de todos los paneles de Dreamweaver en funcin de sus necesidades.

Acoplado y desacoplado de paneles

Para acoplar un panel, arrstrelo por su pestaa al conjunto acoplado, a su parte superior, a su parte inferior o entre otros paneles.

Para acoplar un grupo de paneles, arrstrelo por su barra de ttulo (la barra vaca slida que se encuentra encima de las fichas) al conjunto acoplado.

Para quitar un panel o grupo de paneles, arrstrelo fuera del conjunto acoplado por su ficha o barra de ttulo. Puede arrastrarlo a otro conjunto acoplado o hacer que flote con
libertad.
Desplazamiento de paneles

Conforme mueva paneles, ver zonas de colocacin resaltadas en azul, donde podr mover el panel. Por ejemplo, puede mover un panel hacia arriba o hacia abajo en un
conjunto acoplado arrastrndolo a la zona de colocacin azul estrecha encima o debajo de otro panel. Si arrastra a un rea que no es una zona de colocacin, el panel flota con
libertad en el espacio de trabajo.

Para mover un panel, arrstrelo por su ficha.

Para mover un grupo de paneles, arrastre la barra de ttulo.

Nota:

Pulse Ctrl (Windows) o Comando (Mac OS) mientras mueve un panel para evitar que se acople. Pulse Esc mientras mueve el panel para cancelar la operacin.

Adicin y eliminacin de paneles

 Si quita todos los paneles de un conjunto acoplado, este desaparece. Para crear un conjunto acoplado, mueva paneles hacia el borde derecho del espacio de trabajo hasta que
aparezca una zona donde soltarlos.

Para quitar un panel, haga clic con el botn derecho (Windows) o pulse Control y haga clic (Mac OS) en su ficha y elija Cerrar o bien anule su seleccin en el men Ventana.

Para aadir un panel, seleccinelo en el men Ventana y acplelo donde desee.

Manipulacin de grupos de paneles

Para mover un panel a un grupo, arrastre la pestaa del panel a la zona de colocacin resaltada dentro del grupo.

Para reorganizar los paneles de un grupo, arrastre la pestaa de un panel a una nueva ubicacin dentro del grupo.

Para quitar un panel de un grupo de manera que flote con libertad, arrastre el panel por su ficha fuera del grupo.

Para mover un grupo, arrastre la barra de ttulo (el rea encima de las fichas).
Apilado de paneles flotantes

Cuando arrastra un panel fuera de su conjunto apilado, pero no a una zona de colocacin, el panel flota con libertad. Los paneles flotantes se pueden situar en cualquier lugar
del espacio de trabajo. Puede apilar paneles flotantes o grupos de paneles de manera que se muevan como una unidad cuando arrastra la barra de ttulo que se encuentra ms
arriba.

Para apilar paneles flotantes, arrastre un panel por su pestaa a la zona de colocacin en la parte inferior de otro panel.

Para cambiar el orden de apilado, arrastre un panel hacia arriba o hacia abajo por su pestaa.

Para quitar un panel o un grupo de paneles de la pila, de manera que flote solo, arrstrelo fuera por la pestaa o por la barra de ttulo.
Cambio del tamao de los paneles

Para minimizar o maximizar un panel, un grupo de paneles o una pila de paneles, haga doble clic en una ficha. Tambin puede hacer doble clic en el rea de las fichas (el
espacio vaco que hay junto a ellas).

Para cambiar el tamao de un panel, arrastre cualquiera de sus lados.

Contraccin y expansin de iconos de paneles

Puede contraer los paneles a iconos para reducir la acumulacin de elementos en el espacio de trabajo. En algunos casos, los paneles se contraen a iconos en el espacio de
trabajo por defecto.

Para contraer o expandir todos los iconos de paneles en una columna, haga clic en la doble flecha de la parte superior del conjunto acoplado.

Para expandir un icono de panel nico, haga clic en l.

Para cambiar el tamao de los iconos de paneles a fin de ver solo los iconos (pero no las etiquetas), ajuste el ancho del conjunto acoplado hasta que desaparezca el texto. Para
volver a ver el texto de los iconos, aumente el ancho del conjunto acoplado.

Para contraer un panel de vuelta a su icono, haga clic en su ficha, en su icono o en la doble flecha de la barra de ttulo del panel.

Creacin de espacios de trabajo personalizados

Puede personalizar el espacio de trabajo aadiendo o eliminando paneles segn sea oportuno. Despus podr almacenar los cambios en el espacio de trabajo y acceder a ellos
ms adelante desde el conmutador de espacios de trabajo de la barra de herramientas Documento.

Si guarda la posicin y el tamao actuales de los paneles como un espacio de trabajo con nombre, podr restaurar dicho espacio de trabajo incluso aunque mueva o cierre un
panel.

Para guardar un espacio de trabajo personalizado:

1. Elija Ventana > Diseo del espacio de trabajo > Nuevo espacio de trabajo.
2. Escriba un nombre para el espacio de trabajo.

El espacio de trabajo se guarda y aparece visible en el conmutador de espacios de trabajo de la barra de herramientas Documento.

Para eliminar un espacio de trabajo personalizado:

Seleccione Administrar espacios de trabajo en el conmutador de espacios de trabajo de la barra de la aplicacin para abrir el cuadro de dilogo Administrar espacios de trabajo.
Seleccione el espacio de trabajo y, a continuacin, haga clic en Eliminar.

Visualizacin de espacios de trabajo y cambio de uno a otro

Seleccione un espacio de trabajo en el conmutador de espacios de trabajo de la barra de herramientas Documento.

Personalizacin de Dreamweaver en sistemas multiusuario

Puede personalizar Dreamweaver para que se ajuste a sus necesidades, incluso en un sistema operativo multiusuario como Windows XP o Mac OS X.

Dreamweaver impide que la configuracin personalizada de un usuario afecte a la configuracin personalizada de otro usuario. Para lograr este objetivo, la primera vez que
ejecute Dreamweaver en uno de los sistemas operativos multiusuario que reconoce la aplicacin, crear copias de diversos archivos de configuracin. Estos archivos de
configuracin se almacenan en una carpeta de su propiedad.
 Si reinstala o actualiza Dreamweaver, este crear automticamente copias de seguridad de los archivos de configuracin de
usuario existentes para que, en el caso de que haya personalizado dichos archivos manualmente, contine teniendo acceso a los
cambios realizados.

Visualizacin de documentos en fichas (solo en Mac)

Puede ver varios documentos en una sola ventana de documento mediante las fichas que identifican a cada uno de ellos. Tambin
puede mostrarlos como parte de un espacio de trabajo flotante en el que cada documento aparece en su propia ventana.

Apertura de un documento que se encuentra en una ficha en una ventana independiente

Haga clic en la ficha mientras pulsa la tecla Control y seleccione Mover a nueva ventana en el men contextual.

Cambio de la configuracin predeterminada de documento en ficha

1. Seleccione Dreamweaver > Preferencias y, posteriormente, seleccione la categora General.
2. Seleccione o anule la seleccin de Abrir documentos en fichas y haga clic en OK.

Dreamweaver no modifica la visualizacin de documentos abiertos al cambiar las preferencias. No obstante, los documentos que
se abran despus de seleccionar una nueva preferencia se mostrarn conforme a la preferencia seleccionada.

La pantalla de bienvenida aparece al iniciar Dreamweaver y siempre que no se tiene abierto ningn documento. Puede optar por
ocultar la pantalla de bienvenida y volver a mostrarla posteriormente. Cuando la pantalla de bienvenida est oculta y no hay
documentos abiertos, la ventana de documento est en blanco.

Paneles de Dreamweaver ms habituales

En Dreamweaver se trabaja con varios paneles. Aqu se describen algunos de los paneles que se usan con ms frecuencia.

Informacin general sobre el panel Insertar

El panel Insertar (Ventana > Insertar) incluye botones para crear e insertar objetos como tablas, imgenes y vnculos. Los
botones estn ordenados en varias categoras, entre las que puede cambiar seleccionando la categora deseada en la lista
desplegable de la parte superior.

Panel Insertar

Algunas categoras tienen botones con mens emergentes. Al seleccionar una opcin de un men emergente, dicha opcin se
convierte en la accin predeterminada del botn. Por ejemplo, si selecciona Salto de lnea en el men emergente del
botn Carcter, la siguiente vez que haga clic en el botn Carcter, Dreamweaver insertar un salto de lnea. Siempre que
seleccione una nueva opcin del men emergente cambiar la accin predeterminada del botn.
El panel Insertar est organizado en las categoras siguientes:
HTML
Permite crear e insertar los elementos HTML ms utilizados, como etiquetas div, y objetos, como imgenes y tablas.
Formulario

Contiene botones para crear formularios e insertar elementos en ellos, como la bsqueda, el mes y la contrasea.

Plantillas

Permite guardar el documento como plantilla y marcar reas especficas como editables, opcionales, repetidas o reas opcionales editables.

Componentes de Bootstrap

Contiene componentes de Bootstrap para facilitar, entre otras muchas cosas, funciones de navegacin, contenedores y mens desplegables para usarlos en proyectos
interactivos.

jQuery Mobile
Contiene botones para crear sitios que usan jQuery Mobile.
IU de jQuery

Permite insertar elementos de la IU de jQuery, como el acorden, reguladores y botones.

Favoritos
Permite agrupar y organizar los botones del panel Insertar que utiliza con ms frecuencia en un mismo lugar.

Nota:

Si utiliza determinados tipos de archivos, como XML, JavaScript, Java y CSS, el panel Insertar y la opcin de vista de Diseo estn atenuadas, ya que no pueden insertarse
elementos en esos archivos de cdigo.

Insertar objeto

Para insertar un objeto mediante el panel Insertar:

1. Seleccione la categora en cuestin en el men emergente Categora del panel Insertar.

 2. Siga uno de estos procedimientos:

Haga clic en un botn de objeto o arrastre el icono correspondiente a la ventana Documento

(en Vista de diseo, Vista en vivo o Vista de cdigo).

Haga clic en la flecha de un botn y seleccione una opcin del men.

Dependiendo del objeto de que se trate, aparecer un cuadro de dilogo de insercin de objeto, que
solicitar que se busque un archivo o se especifiquen los parmetros del objeto. Otra posibilidad es
que Dreamweaver inserte cdigo en el documento o abra un panel o un editor de etiquetas para
especificar informacin antes de insertar el cdigo.

Para algunos objetos, no aparece ningn cuadro de dilogo si se inserta el objeto en la Vista de
diseo, pero aparece un editor de etiquetas si se utiliza la Vista de cdigo. Con algunos objetos, al
insertar el objeto en la Vista de diseo, Dreamweaver cambia a la Vista de cdigo antes de insertar el
objeto.

Edicin de las preferencias del panel Insertar

1. Seleccione Editar > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh).

2. En la categora General del cuadro de dilogo Preferencias, desactive Mostrar dilogo al

insertar objetos para suprimir cuadros de dilogo al insertar objetos como imgenes, tablas, scripts
y elementos de encabezado, o mantenga presionada la tecla Control (Windows) o la tecla Opcin
(Macintosh) mientras est creando el objeto.

Nota:

Cuando se inserta un objeto con esta opcin desactivada, el objeto recibe valores de atributo
predeterminados. Despus de insertar el objeto, utilice el inspector de propiedades para cambiar sus propiedades.

Adicin, eliminacin o administracin de archivos en la categora Favoritos del panel Insertar

1. Seleccione una categora en el panel Insertar.

2. Haga clic con el botn derecho del ratn (Windows) o presione Control y haga clic (Macintosh) en el rea en la que aparecen los botones y, seguidamente, seleccione
Personalizar favoritos.

3. En el cuadro de dilogo Personalizar objetos favoritos, realice los cambios que sean necesarios y haga clic en Aceptar.

Para aadir un objeto, seleccinelo en el panel Objetos disponibles de la izquierda y, a continuacin, haga clic en la flecha situada entre los dos paneles o haga doble clic en el
objeto en el panel Objetos disponibles.

Personalizacin de favoritos en el panel Insertar

Nota:

Los objetos se aaden de uno en uno. No se puede

seleccionar un nombre de categora, como por ejemplo
Comn, para aadir una categora completa a la lista de
favoritos.

Para suprimir un objeto o separador, seleccione el

objeto que desee en el panel Objetos favoritos, situado a la
derecha y, a continuacin, haga clic en el botn Quite el
objeto seleccionado de la lista de objetos favoritos que est
encima del panel.

Para mover un objeto, seleccione el objeto que desee en

el panel Objetos favoritos, situado a la derecha, y, a
continuacin, haga clic en el botn de flecha arriba o abajo que est encima del panel.

Para aadir un separador debajo de un objeto, seleccione el objeto que desee en el panel Objetos favoritos, situado a la derecha y, a continuacin, haga clic en el botn
Aadir separador que est debajo del panel.
4. Si no est en la categora Favoritos del panel Insertar, seleccinela para ver los cambios que haya realizado.

Descripcin general del panel Archivos

Utilice el panel Archivos para ver y administrar los archivos del sitio de Dreamweaver.

El panel Archivos se emplea para ver archivos y carpetas, comprobar si estn asociados o no a un sitio de Dreamweaver y realizar operaciones estndar de mantenimiento de
archivos, como abrirlos y moverlos.

El panel Archivos tambin permite administrar y transferir archivos a y desde un servidor remoto.

Panel Archivos

Para obtener ms informacin sobre lo que puede hacer con el panel Archivos, consulte Administracin de archivos y carpetas.
 Diseador de CSS
El panel Diseador de CSS (Ventanas > Diseador de CSS) es un inspector de propiedades de CSS que permite crear "visualmente" archivos y estilos CSS, as como definir
propiedades y consultas de medios.

Puede utilizar Ctrl/Cmd + Z para deshacer o Ctrl/Cmd + Y para rehacer todas las acciones realizadas en el Diseador de CSS. Los cambios se reflejarn automticamente en la
Vista en vivo y se actualizar el archivo CSS pertinente. Para indicar que el archivo relacionado ha cambiado, la ficha del archivo correspondiente se resalta aproximadamente 8
segundos.

Panel Diseador de CSS

El panel Diseador de CSS incluye los siguientes subpaneles y

opciones:

Todo Muestra todo el cdigo CSS, las consultas de medios y

los selectores asociados al documento actual. Puede filtrar
por las reglas CSS necesarias y modificar las propiedades.
Tambin puede usar este modo para crear sus selectores o
consultas de medios.

Este modo no reconoce la seleccin realizada, es decir, que al

seleccionar un elemento en la pgina, el selector, la consulta
de medios o el CSS asociados no se resalta en el panel
Diseador de CSS.

Actual Muestra los estilos calculados para cualquier

elemento seleccionado en la vista en vivo o la vista de diseo
del documento actual. Al utilizar este modo para un archivo
CSS en la vista de cdigo, se muestran todas las propiedades
del selector seleccionado.

Este modo es sensible al contexto. Utilice esta opcin si

quiere editar las propiedades de los selectores asociados a los
elementos seleccionados en el documento.

Fuentes Muestra todas las hojas de estilo CSS asociadas al

documento. Este panel le permite crear un CSS y adjuntarlo al
documento, o bien definir estilos dentro del documento.
@Medios Muestra una lista de todas las consultas de medios
en la fuente seleccionada en el panel Fuentes. Si no selecciona
un CSS especfico, este panel muestra todas las consultas de
medios asociadas al documento.
Selectores Muestra una lista de todos los selectores en la
fuente seleccionada en el panel Fuentes. Si tambin
selecciona una consulta de medios, este panel limita la lista
de selectores de dicha consulta de medios. Si no hay
seleccionado ningn CSS ni ninguna consulta de medios, este
panel muestra todos los selectores del documento.

Cuando se selecciona Global en el panel @Medios, se

muestran todos los selectores no incluidos en la consulta de
medios de la fuente seleccionada.

Propiedades Muestra las propiedades que se pueden definir

para el selector especificado. Para obtener ms informacin,
consulte Configurar propiedades.

Al contraer o ampliar los paneles del Diseador de CSS, los

tamaos de los mismos se conservan durante el resto de una
misma sesin. Los paneles Fuentes y Medios se mantienen en
los tamaos personalizados hasta que los vuelva a modificar.

Nota: Cuando seleccione un elemento de pgina, se elegir el selector ms especfico en el panel Selectores. Para consultar las propiedades de un selector especfico, haga clic
en el nombre del selector en cuestin en el panel.

Para ver todos los selectores, puede elegir Todas las fuentes en el panel Fuentes. Para ver los selectores que no pertenecen a ninguna consulta de medios en la fuente
seleccionada, haga clic en Global en el panel @Medios.

Introduccin a las guas visuales

Dreamweaver proporciona varios tipos de guas visuales para ayudarle a disear documentos y predecir de forma aproximada cul ser su apariencia en los navegadores.
Puede seguir uno de estos procedimientos:

Ajuste instantneamente el tamao deseado de la ventana Documento y compruebe si caben los elementos en la pgina.

Use una imagen de rastreo como fondo de la pgina para ayudarle a copiar un diseo creado en una aplicacin de edicin de ilustraciones o imgenes como, por ejemplo,
Adobe Photoshop o Adobe Fireworks.

Use reglas y guas para proporcionar una pista visual que permita colocar y cambiar el tamao de los elementos de pgina con precisin.
 Utilizar la cuadrcula para lograr una mayor precisin en la colocacin y ajuste del tamao de elementos con posicin absoluta (elementos PA).

Las marcas de cuadrcula de la pgina le ayudan a alinear los elementos PA y, cuando est activada la funcin de ajuste, permiten ajustar automticamente los elementos PA
con el punto ms prximo de la cuadrcula al moverlas o ajustar su tamao. Los dems objetos, como las imgenes y los prrafos, no se ajustan a la cuadrcula. El ajuste
funciona independientemente de que la cuadrcula est visible.

Aumento y reduccin de una pgina

Dreamweaver le permite aumentar la ventana de documento para que pueda comprobar la precisin de los pxeles de los grficos, seleccionar elementos pequeos con mayor
facilidad, disear pginas con texto pequeo, disear pginas grandes, etc.

Para aumentar o reducir una pgina, seleccione Ver > Opciones de vista de diseo > Nivel de aumento y, a continuacin, seleccione cualquiera de las opciones de ampliacin
disponibles.

Puede elegir entre distintas opciones de ampliacin. Tambin puede elegir:

Ajustar seleccin: seleccione un objeto o un texto y, a continuacin, elija esta opcin para llenar la ventana de documento con la seleccin.

Ajustar todo: llenar la ventana de documento con una pgina completa.

Encajar: llenar la ventana de documento con toda la anchura de una pgina.

Nota:

Tambin puede aumentar y reducir la vista sin necesidad de recurrir a la herramienta Zoom: presione Control+= (Windows) o Comando+= (Macintosh). Tambin puede
reducir la vista sin necesidad de recurrir a la herramienta Zoom: presione Control+- (Windows) o Comando+- (Macintosh).

Configuracin de preferencias generales para Dreamweaver

1. Seleccione Editar > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh).

2. Defina cualquiera de las opciones siguientes:

Abrir documentos en fichas Abre todos los documentos en una sola ventana, con fichas para poder pasar de un documento a otro (solo en Mac).
Mostrar pantalla de inicio Muestra la pantalla de bienvenida de Dreamweaver cuando inicia la aplicacin o cuando no hay ningn documento abierto.
Volver a abrir documentos al iniciar Abre todos los documentos que estaban abiertos cuando se cerr Dreamweaver. Si esta opcin no est seleccionada, Dreamweaver
muestra la pantalla de bienvenida o una pantalla en blanco al iniciarse (en funcin del valor de Mostrar pantalla de bienvenida).
Advertir al abrir archivos de solo lectura Avisa cuando se abre un archivo de solo lectura (bloqueado). Elija entre desbloquear/proteger el archivo, ver el archivo o cancelar.
Activar archivos relacionados Le permite ver los archivos que estn conectados al documento actual (por ejemplo, archivos CSS o JavaScript). Dreamweaver muestra un
botn por cada archivo relacionado en la parte superior del documento y abre el archivo cuando se hace clic en el botn.
Detectar archivos relacionados dinmicamente Le permite seleccionar si Archivos relacionados dinmicamente debe aparecer en la barra de herramientas Archivos
relacionados de forma automtica o tras una interaccin manual. Tambin puede optar por deshabilitar la deteccin de Archivos relacionados dinmicamente.
Actualizar vnculos al mover archivos Determina qu sucede al mover, cambiar el nombre o eliminar un documento del sitio. Establezca esta preferencia para actualizar
siempre los vnculos de manera automtica, para no actualizarlos nunca o para que se muestre un mensaje que pregunte si desea actualizarlos. (Consulte Actualizar vnculos
automticamente).
Mostrar dilogo al insertar objetos Determina si Dreamweaver solicita especificar informacin adicional cuando se insertan imgenes, tablas, pelculas de Shockwave y otros
objetos, con el panel Insertar o el men Insertar. Si esta opcin est desactivada, no aparecer el cuadro de dilogo y deber emplear el inspector de propiedades para
especificar el archivo de origen para imgenes, el nmero de filas de una tabla, etc. Para imgenes de sustitucin y HTML de Fireworks, siempre aparece un cuadro de dilogo
cuando inserta el objeto, independientemente de la configuracin de esta opcin. (Para anular temporalmente esta configuracin, haga clic mientras pulsa la tecla Control
(Windows) o mientras pulsa la tecla Comando (Macintosh) durante la creacin e insercin de objetos).
Permitir entrada en lnea de doble byte Permite introducir texto de doble byte directamente en la ventana de documento si utiliza un kit de lenguaje o entorno de desarrollo
que facilite texto de doble byte (como los caracteres japoneses). Cuando esta opcin est desactivada, aparece una ventana para introducir y convertir texto de doble byte. El
texto aparecer en la ventana de documento cuando sea aceptado.
Cambiar a prrafo sencillo tras el encabezado Especifica que al pulsar Intro (Windows) o Retorno (Macintosh) al final de un prrafo de encabezado en la vista de diseo o
en vivo, se cree un nuevo prrafo con la etiqueta p. (El prrafo de encabezado es el que lleva una etiqueta de encabezado, como h1 o h2). Si se desactiva esta opcin, al pulsar
Intro o Retorno al final de un prrafo de encabezado, se crea un nuevo prrafo con la misma etiqueta de encabezado (lo que permite escribir varios encabezados seguidos y
luego volver para especificar los detalles).
Permitir mltiples espacios consecutivos Especifica que al introducir uno o varios espacios en la vista de diseo o en vivo, se creen espacios indivisibles que aparecern en
un navegador como varios espacios mltiples. (Por ejemplo, puede introducir dos espacios entre frases, tal y como lo hara con una mquina de escribir). Esta opcin est
diseada principalmente para gente que est acostumbrada a teclear en un procesador de textos. Si est desactivada, varios espacios se consideran un espacio nico (puesto
que as lo hacen los navegadores).
Usar <strong> y <em> en lugar de <b> e <i> Especifica que Dreamweaver debe aplicar la etiqueta strong cuando realice una accin que aplicara normalmente a la etiqueta
b, y que debe aplicar la etiqueta em cuando realice una accin que aplicara normalmente la etiqueta i. Estas acciones incluyen hacer clic en los botones Negrita o Cursiva en el
inspector de propiedades de texto en modo HTML y elegir Formato > Estilo > Negrita o Formato > Estilo > Cursiva. Para utilizar las etiquetas b e i en sus documentos, desactive
esta opcin.
Nota: El World Wide Web Consortium desaconseja el uso de las etiquetas b e i; las etiquetas strong y em proporcionan ms informacin semntica que las etiquetas b e i.

Advertir al colocar regiones editables entre etiquetas <p> o <h1> - <h6> Especifica si debe mostrarse un mensaje de advertencia al guardar una plantilla de Dreamweaver
que tiene una regin editable dentro de una etiqueta de prrafo o encabezado. El mensaje indica que los usuarios no podrn crear ms prrafos en la regin. Est activada de
manera predeterminada.
Limitar las veces que se puede deshacer en el documento activo Limita el nmero mximo de operaciones de deshacer.
Nmero mximo de pasos de Historial Determina el nmero de pasos que guarda y muestra el panel Historial. (El valor predeterminado suele ser vlido para la mayora de
los usuarios). Si supera el nmero mximo de pasos definido para el panel Historial, se eliminarn los pasos ms antiguos.
Diccionario ortogrfico Muestra los diccionarios ortogrficos disponibles. Si un diccionario contiene mltiples variantes o convenciones ortogrficas (por ejemplo, espaol de
Mxico o espaol de Colombia), dichas variantes se enumerarn por separado en el men emergente Diccionario ortogrfico.
 Configuracin de las preferencias de fuentes para documentos de Dreamweaver
La codificacin de un documento determina el aspecto que tendr en un navegador. Las preferencias de fuentes de Dreamweaver le permiten ver una codificacin determinada
con la fuente y en el tamao que prefiera. No obstante, las fuentes que seleccione en la categora Fuentes del cuadro de dilogo Preferencias solo afectarn a la forma en que
aparecen las fuentes en Dreamweaver, no a la forma en que se muestra el documento en el navegador de un visitante. Para cambiar la forma en que se muestran las fuentes en
un navegador, deber cambiar el texto mediante el inspector de propiedades o aplicando una regla CSS.

Para obtener ms informacin sobre cmo establecer una codificacin predeterminada para los documentos nuevos, consulte Creacin y apertura de documentos.
1. Seleccione Editar > Preferencias (Windows) o Dreamweaver > Preferencias (Mac).

2. Seleccione Fuentes en la lista Categora de la izquierda.

3. Seleccione un tipo de codificacin (por ejemplo, Europeo occidental o Japons) en la lista de configuracin de fuentes.

Nota:

Para mostrar un idioma asitico, deber utilizar un sistema operativo que admita fuentes de doble byte.

4. Seleccione una fuente y un tamao para cada categora de la codificacin seleccionada.

Nota:

Para que una fuente aparezca en los mens emergentes de fuentes, esta deber estar instalada en el equipo. Por ejemplo, para ver texto en japons deber contar con una
fuente japonesa instalada.

Fuente proporcional

La fuente que utiliza Dreamweaver para mostrar texto normal (por ejemplo, texto en prrafos, encabezados y tablas). El valor predeterminado depende de las fuentes que
estn instaladas en el sistema. Para la mayora de los sistemas de Estados Unidos, el valor predeterminado es Times New Roman 12 pt. (medio) en Windows y Times 12 pt. en
Mac OS.

Fuente fija

La fuente que utiliza Dreamweaver para mostrar texto en etiquetas pre, code y tt. El valor predeterminado depende de las fuentes que estn instaladas en el sistema. Para la
mayora de los sistemas de Estados Unidos, el valor predeterminado es Courier New 10 pt. (pequeo) en Windows y Monaco 12 pt. en Mac OS.

Vista de cdigo

La fuente utilizada para todo el texto que aparece en la Vista de cdigo del inspector de cdigo. El valor predeterminado depende de las fuentes que estn instaladas en el
sistema.

Personalizacin de colores de resaltado de Dreamweaver

Utilice las preferencias Resaltando para personalizar los colores que identifican regiones de plantillas, elementos de biblioteca, etiquetas de terceros, elementos de diseo y
cdigo en Dreamweaver.

1. Seleccione Editar > Preferencias y seleccione la categora Resaltando.

2. Haga clic en el cuadro de color situado junto al objeto cuyo color de resaltado desea cambiar y, a continuacin, utilice el selector de color para seleccionar un nuevo color, o
especifique un valor hexadecimal.

3. Para activar o desactivar el resaltado para una opcin concreta, seleccione la opcin Mostrar, o anule su seleccin.