Junio 2014

Es posible que algunos vnculos redirijan a contenido en ingls.

Ayuda de Adobe Dreamweaver CC

Novedades

1

Resumen de las nuevas funcionesVersin 2014 de Dreamweaver CC

Ir al principio

La nueva versin 2014 de Dreamweaver CC incluye varias mejoras en la Vista en vivo y el Diseador de CSS para ayudarle a crear y actualizarcontenido mvil y Web de forma sencilla. La nueva funcin Vista rpida de elementos le ayuda a ver, desplazar y editar rpidamente el formatoHTML.

Este artculo presenta las siguientes nuevas funciones y otras mejoras, y proporciona vnculos a recursos para obtener ms ayuda y cursos deaprendizaje.

Novedades y cambiosVista rpida de elementosNuevas funciones de edicin de la Vista en vivoInsercin en la Vista en vivoMejoras en el Diseador de CSSCompatibilidad con conexiones SFTP utilizando el archivo de identidadMejoras en Deshacer/RehacerCambios en los flujos de trabajo de Business Catalyst y PhoneGap BuildCambios en el acceso a extensiones para DreamweaverCambios en la sincronizacin de configuracinEnvo de errores o solicitudes de funciones directamente desde DreamweaverCentro de AyudaCambios en el men Ayuda

Vista rpida de elementosRevise el formato del documento con la nueva Vista rpida de elementos, que genera un rbol HTML interactivo para el contenido esttico ydinmico. Modifique la estructura esttica de contenido en el propio rbol HTML.

Vista rpida de elementos

2

Ir al principio

Se ha incluido la Vista rpida de elementos (Ver > Vista rpida de elementos) para ayudarle a agilizar el proceso de desarrollo. En versionesanteriores de Dreamweaver, haba que resaltar los elementos HTML en la Vista en vivo, cambiar a la vista Cdigo y editar los elementos.Despus de editarlos, haba que volver a la Vista en vivo para previsualizar los cambios. Ahora, con la Vista rpida de elementos, puede vertodos los elementos de la pgina en una sola y prctica vista, y editar el contenido esttico.

Para obtener ms informacin, consulte Vista rpida de elementos.

Nuevas funciones de edicin de la Vista en vivoInspeccione y modifique las propiedades de los elementos HTML desde la propia Vista en vivo y compruebe el resultado sin necesidad deactualizar la pgina.

Inspector de propiedades de visualizacin rpidaVisualizacin de elementosEdicin dinmica de textoInspector de propiedades de la Vista en vivo

Inspector de propiedades de visualizacin rpidaLa Vista en vivo muestra ahora el Inspector de propiedades de visualizacin rpida para los elementos HTML de las pginas. Dependiendo delelemento HTML que seleccione, el Inspector de propiedades de visualizacin rpida permite editar atributos o texto directamente en la Vista envivo.

Inspector de propiedades de visualizacin rpida para editar atributos de imagen

Inspector de propiedades de visualizacin rpida para dar formato al texto

Para obtener ms informacin, consulte el Inspector de propiedades de visualizacin rpida.

Visualizacin de elementosCon la nueva Visualizacin de elementos, ahora puede asociar elementos HTML con clases e ID directamente en la Vista en vivo. LaVisualizacin de elementos muestra las clases y los ID disponibles para ayudarle a visualizar y a elegir la opcin necesaria.

3

Ir al principio

Visualizacin de elementos para editar clases e ID

Para obtener ms informacin, consulte Asociacin de elementos HTML con clases e ID.

Edicin dinmica de textoAhora puede editar el texto directamente en la Vista en vivo y previsualizar los cambios sin tener que cambiar entre diferentes vistas.

Haga doble clic en el elemento de texto en la Vista en vivo para pasar al modo de edicin. Para obtener ms informacin, consulte Edicin detexto directamente en la Vista en vivo.

Edicin de texto directamente en la Vista en vivo

Inspector de propiedades de la Vista en vivoEl Inspector de propiedades ahora est disponible en la Vista en vivo para poder editar rpidamente la pgina sin cambiar a la vista Diseo o lavista Cdigo.

Para obtener ms informacin, consulte el Inspector de propiedades de la Vista en vivo.

Inspector de propiedades de la Vista en vivo

Insercin en la Vista en vivoEn esta versin, puede insertar elementos HTML directamente en la Vista en vivo mediante el panel Insertar. Los elementos se insertan en tiempo

4

Ir al principio

real sin necesidad de cambiar los modos. Tambin puede obtener una vista previa de los cambios de inmediato.

Para obtener ms informacin, consulte Insercin de elementos directamente en la Vista en vivo.

Arrastrar y soltar en la Vista en vivo desde el panel Insertar

Mejoras en el Diseador de CSS

Interfaz de usuario mejorada para el control de bordesUn control con fichas que ayuda a definir todas las propiedades de los cuatro bordes de forma fcil e intuitiva.

Control con fichas para no ver todos los valores a la vez y reducir la confusin.Iconos intuitivos y prcticos para todo tipo de usuarios.Dos conjuntos de iconos para indicar los estados de no definido/eliminado y desactivado.Una ficha unificada "Todos los lados" para definir todas las propiedades de los bordes a la vez.La fila calculada ahora dirige a la ficha ms adecuada mientras se inspeccionan elementos.

Propiedades de Control de bordes antes de Dreamweaver CC 2014

5

Propiedades de Control de bordes de Dreamweaver CC 2014

Para obtener ms informacin, consulte Definir las propiedades de los bordes.

Copia y pegado de estilosAhora puede copiar estilos de un selector y pegarlos en otro. Puede copiar todos los estilos o copiar solamente categoras especficas deestilos, como diseos, textos y bordes.

Haga clic con el botn derecho en un selector y elija entre las opciones disponibles:

Copia de estilos con el Diseador de CSS

Si un selector no tiene ningn estilo, se desactivan las opciones Copiar y Copiar todos los estilos.Pegar estilos se desactiva para los sitios remotos que no se puedan editar. Sin embargo, las opciones Copiar y Copiar todos los estilosestn disponibles.Es posible pegar estilos que ya existen parcialmente en un selector (superposicin). Se pega la unin de todos los selectores.La copia y el pegado de estilos tambin funcionan para diferentes vnculos de archivos CSS: estilos importados, vinculados y en lnea.

Cuadros de texto de edicin rpidaDreamweaver incluye ahora cuadros de texto de edicin rpida en los que puede especificar el cdigo de la forma abreviada de las propiedadescomo margen, relleno, borde y radio del borde. Este cambio se ha realizado para los usuarios que prefieren especificar un cdigo a utilizar elratn o el teclado para especificar propiedades.

6

Mejoras en el flujo de trabajo de las propiedades personalizadasAnteriormente, haba que hacer clic en + en el panel Propiedades del Diseador de CSS para aadir "Otras" propiedades (o propiedadespersonalizadas). Ahora, el usuario dispone de un conjunto de cuadros de texto (nombre y valor de la propiedad) al final de la lista Propiedades.Estos cuadros de texto permiten introducir directamente el nombre de la propiedad y su valor sin tener que hacer clic en +.

Para aadir filas adicionales de propiedades personalizadas, pulse Tabulador.

El nombre del grupo de propiedades "Otras" se ha cambiado cambia a "Personalizadas".

7

Mtodos abreviados de tecladoAhora puede aadir o eliminar selectores y propiedades de CSS mediante mtodos abreviados de teclado. Tambin puede desplazarse entre losgrupos de propiedades en el panel Propiedades.

Selectores ms especficos/menos especficosCon esta versin, Dreamweaver ofrece un mximo de tres (o menos) sugerencias de reglas mientras aade un selector. Puede hacer que seams o menos especfico con la tecla de flecha arriba o flecha abajo.

Selectores Ms especfico/Menos especfico

Desplazarse a la categoraAnteriormente, al hacer clic en las categoras Fondo u Otro en la parte superior del panel Propiedades del Diseador de CSS, estas categoras sehacan "visibles" en el panel. En realidad las categoras no se mostraban en la parte superior del panel.

Ahora, las categoras Fondo y Otro (cuyo nombre ha cambiado a Personalizado) se muestran en la parte superior del panel cuando se hace clicen ellas.

Mtodo abreviado Flujo de trabajo

CTRL + Alt +[Mays =] Aade un selector (si el control est en la seccin del selector).

CTRL + Alt+ S Aade un selector (si el control est en cualquier lugar de laaplicacin).

CTRL + Alt +[Mays =] Aade una propiedad (si el control est en la seccin de lapropiedad).

CTRL + Alt+ P Aade una propiedad (si el control est en cualquier lugar de laaplicacin).

Seleccionar + Supr Elimina el selector si est seleccionado.

CTRL + Alt + (RePg/AvPg) Cambia de seccin en el subpanel de propiedades.

8

Ir al principio

Nota:

Ir al principio

Nota:

Ir al principio

Compatibilidad con conexiones SFTP utilizando el archivo de identidadAhora puede autenticar conexiones en un servidor SFTP con una "clave de identidad" (con o sin una frase de contrasea).

Dreamweaver solo admite archivos de clave OpenSSH.

Para obtener ms informacin, consulte Conexiones SFTP.

Mejoras en Deshacer/RehacerHasta ahora, para deshacer/rehacer una operacin realizada en el panel Diseador de CSS, haba que hacer clic en el archivo CSS (en archivosrelacionados) y, a continuacin, deshacer/rehacer la operacin.

Con las mejoras introducidas en la funcin de deshacer/rehacer, puede deshacer/rehacer una operacin directamente en la Vista en vivo de undocumento o en el panel Diseador de CSS. Estos cambios se reflejarn automticamente en el archivo CSS asociado. Para indicar que elarchivo relacionado ha cambiado, la ficha del archivo correspondiente se resalta aproximadamente 8 segundos.

Al deshacer/rehacer una accin en el panel Diseador de CSS, la Vista en vivo se actualiza automticamente.Cuando se edita el documento utilizando el cdigo fuente y se deshacen los cambios en la Vista en vivo, la visualizacin cambia a la Vistadividida y se presenta el cdigo fuente relacionado.

Todas las acciones de deshacer o rehacer se registran a nivel de archivo HTML. Esto significa que los cambios manuales realizados en unarchivo CSS se pueden deshacer desde cualquier archivo relacionado. Por ejemplo, supongamos que style1.css y style2.css estn relacionadoscon index.html. Si aade estilos a .h1 en style1.css y realiza una accin de deshacer en style2.css, el estilo de .h1 se elimina de style1.css.

para deshacer/rehacer los cambios en los archivos JavaScript, deber cambiar al archivo JS correspondiente y, a continuacin, realizar laaccin deshacer/rehacer.

Cambios en los flujos de trabajo de Business Catalyst y PhoneGap BuildBusiness Catalyst y PhoneGap Build se encuentran disponibles como complementos de Dreamweaver. En primer lugar, debe instalar BusinessCatalyst y PhoneGap Build como extensiones y, a continuacin, seguir utilizando estos servicios como antes.

Para instalar las extensiones de Business Catalyst y PhoneGap Build, vaya a Administrar > Examinar opciones adicionales, busque las

9

Ir al principio

extensiones e instlelas.

Consulte tambin:Flujo de trabajo de Dreamweaver-Business Catalyst

Empaquetado de aplicaciones para dispositivos mviles

Cambios en el acceso a extensiones para DreamweaverAhora puede ver e instalar extensiones de Dreamweaver con Adobe Creative Cloud. Las extensiones ahora se denominan "complementos".

Si desea examinar Adobe Creative Cloud para buscar complementos, haga clic en Ventana > Examinar opciones adicionales en Dreamweaver.Aparece la pgina de complementos de Adobe Creative Cloud.

Ventana > Extensiones en Dreamweaver CC 13.0

Ventana > Examinar opciones adicionales en Dreamweaver CC 2014

10

Ir al principio

Ir al principio

Ir al principio

Para obtener ms informacin sobre la instalacin de complementos, consulte Complementos.

Cambios en la sincronizacin de configuracinLa funcin de sincronizacin de configuracin en Dreamweaver le permite mantener sus configuraciones sincronizadas con las instancias deDreamweaver de sus equipos y Creative Cloud. Dreamweaver CC 2014 detecta automticamente si se activ la sincronizacin de configuracinen la versin anterior de Dreamweaver y le permite importar dichos ajustes desde Creative Cloud.

Al iniciar Dreamweaver CC 2014 por primera vez tras la instalacin, aparece el siguiente cuadro de dilogo.

Importar configuracin de sincronizacin

Para importar configuraciones almacenadas en Creative Cloud, haga clic en Importar configuracin de sincronizacin.

Nota: esta opcin deja de estar disponible posteriormente.

Para sincronizar la configuracin en la instancia de Dreamweaver actual con Creative Cloud, haga clic en Sincronizacin local.Para sincronizar la configuracin automticamente en el futuro, seleccione Sincronizar configuracin siempre automticamente.Para ver las opciones avanzadas de la sincronizacin de configuracin, haga clic en Avanzadas.

Artculo asociado:Sincronizacin de la configuracin de Dreamweaver con Creative Cloud

Envo de errores o solicitudes de funciones directamente desde DreamweaverAhora puede acceder directamente a los formularios de deseos y de comunicacin de errores desde Dreamweaver: Ayuda > Enviar error/solicitudde funciones.

Enviar errores/solicitudes de funciones en el men Ayuda

Centro de AyudaEl nuevo Centro de Ayuda de Dreamweaver muestra cmo se utilizan las nuevas funciones y cmo se realizan las tareas habituales.

A diferencia de las versiones anteriores, ahora puede descubrir fcilmente nuevas funciones y flujos de trabajo eficaces al iniciar Dreamweaverpor primera vez. En cualquier momento puede omitir la presentacin de las nuevas funciones o desactivar los mensajes de ayuda internos de laaplicacin. Si es necesario, tambin puede restablecerlos.

Descripcin de las nuevas funcionesMensajes internos de la aplicacinMensajes internos del productoDesactivacin o restablecimiento de los mensajes internos de la aplicacin y del producto

11

Descripcin de las nuevas funcionesAhora Dreamweaver incluye breve presentacin de las nuevas funciones que ofrece la ltima versin.En la presentacin se muestran las nuevas funciones y se incluye una galera de vdeosdonde se pueden ver las nuevas funciones en accin.

la descripcin de las nuevas funciones o la opcin de una breve presentacin aparece aliniciar Dreamweaver. Tambin se ofrece la opcin de omitir la presentacin e ir a la pantallaBienvenido para seguir trabajando.

Nota: la descripcin de las nuevas funciones aparece al instalar o actualizarDreamweaver o al eliminar preferencias y reiniciar Dreamweaver.

Presentacin de las nuevas funciones

Este es un resumen de lo que se muestra en la descripcin de las nuevas funciones:

Mensaje de bienvenida. Tambin se le pedir que especifique si ha utilizado Dreamweaver CC anteriormente para poder personalizar laexperiencia en consecuencia.Presentacin y breve descripcin de cada una de las funciones (con una opcin para omitir la presentacin).Galera de vdeos relacionados con las nuevas funciones.

Galera de vdeosAl final de la descripcin de las nuevas funciones, aparece la galera de vdeos con vdeosrelacionados con las nuevas funciones. Al pasar el ratn sobre las miniaturas, se muestra una breve descripcin del vdeo.

12

Nota:

Galera de vdeos

Puede acceder a la descripcin de las nuevas funciones y a la galera de vdeos en cualquier momento mientras utiliza Dreamweaver.Para ello, vaya al men Ayuda o a la pantalla Bienvenido y haga clic en la opcin correspondiente.

Mensajes internos de la aplicacinAhora Dreamweaver muestra sugerencias para mejorar la productividad mientras trabajaen sus proyectos. Con estos sugerencias se pretende ayudar a realizar la tarea en cuestin de forma ms eficaz.

Los mensajes aparecen en funcin de determinados "desencadenantes". Por ejemplo, al hacer clic en los selectores de etiqueta en cualquier vistao al hacer clic con el botn derecho en un elemento para inspeccionarlo, aparece el mensaje de la Vista rpida de elementos.

La Vista rpida de elementos es una funcin totalmente nueva que ayuda a ver y editar el formato HTML ms fcilmente que los dems mtodosprobados (desencadenantes).

Una vez que haya realizado una accin de acuerdo con las sugerencias recibidas, estas no vuelven a aparecer para el mismo desencadenante.Sin embargo, el mensaje aparece de nuevo con los dems desencadenantes identificados.

Puede desactivar los mensajes internos de la aplicacin en las Preferencias. Para obtener ms informacin, consulte Desactivar o restablecer losmensajes internos de la aplicacin y del producto.

Ejemplos de mensajes internos de la aplicacin:

Vista rpida de elementosDesencadenantes:

Se hace clic en los selectores de etiqueta (todas las vistas).En vivo + Inspeccionar o clic con el botn derecho + Inspeccionar en un elemento.

Mensaje:

13

Nota:

Inspector de propiedades de la Vista en vivo para clases e ID Desencadenantes:

Se edita el ID mediante el Inspector de propiedades en la vista Diseo.

Mensaje:

Mensajes internos del productoDreamweaver se integra perfectamente con muchas otras aplicaciones de CreativeCloud y los mensajes internos del producto presentan estos flujos de trabajo de integracin. Mediante estos flujos de trabajo, puede sacar mayorpartido a Adobe Creative Cloud y a toda su funcionalidad.

Los mensajes internos del producto aparecen en funcin de determinados "desencadenantes". Por ejemplo, cuando intente utilizar Transicionesde CSS, se propone el flujo de trabajo "Edge Animate" a travs del mensaje interno del producto.

Los mensajes internos del producto contienen una breve descripcin del flujo de trabajo alternativo (o mejor) que se puede usar en una situacindeterminada.Tambin incluye una miniatura de vdeo en la que se puede hacer clic para ver un vdeo que explica el flujo de trabajo.El botn Ms informacin enlaza con un artculo o un blog que proporciona ms informacin.

Los mensajes internos del producto se muestran una sola vez cuando se produce el desencadenante identificado.

para ver los mensajes de nuevo, puede restablecer la opcin de ayuda interna de la aplicacin en Preferencias.Para obtener ms informacin, consulte Desactivacin o restablecimiento de los mensajes internos de la aplicacin y del producto.

Ejemplos de mensajes internos del producto:

Edge AnimateDesencadenante:

Hacer clic en una transicin de CSS y, a continuacin, hacer clic en +

Mensaje:

ParfaitDesencadenante:

Insertar imagen > Editar configuracin de imagen

Mensaje:

14

Ir al principio

Desactivar o restablecer los mensajes internos de la aplicacin y del productoVaya al cuadro de dilogo Preferencias > Accesibilidad y siga estos pasos:

Para desactivar los mensajes, quite la marca de la casilla Mostrar ayuda integrada.

Si restablece los mensajes, no aparecern los mensajes que ya se hayan mostrado.Solo se muestran los mensajes que no han aparecido anteriormente.

Para ver los mensajes que ya se han mostrado, haga clic en Restablecer.

Preferencias para desactivar o restablecer la ayuda interna de la aplicacin

Cambios en el men AyudaSe ha reorganizado el men Ayuda para que pueda acceder rpidamente a la descripcin de las nuevas funciones, la galera de vdeo, la ayuda ylos recursos de aprendizaje, as como enviar formularios de errores/solicitudes de funciones.

15

Los trminos de Creative Commons no cubren las publicaciones en Twitter y Facebook.

Avisos legales | Poltica de privacidad en lnea

Men Ayuda antes de Dreamweaver CC 2014

Men Ayuda de Dreamweaver CC 2014

16

Espacio de trabajo y flujo de trabajo

17

Flujo de trabajo y espacio de trabajo de Dreamweaver

Ir al principio

Introduccin al flujo de trabajo de DreamweaverIntroduccin al diseo del espacio de trabajoDescripcin general de los elementos del espacio de trabajoIntroduccin a la ventana DocumentoIntroduccin a la barra de herramientas DocumentoIntroduccin a la barra de herramientas EstndarIntroduccin a la barra de herramientas Navegacin con navegadorIntroduccin a la barra de herramientas ProgramacinIntroduccin a la barra de estadoDescripcin general del inspector de propiedadesInformacin general sobre el panel InsertarDescripcin general del panel ArchivosDiseador de CSSIntroduccin a las guas visuales

Introduccin al flujo de trabajo de DreamweaverPuede utilizar varios mtodos para crear un sitio Web; este es uno de ellos:

Planificacin y configuracin del sitio

Determine la ubicacin de los archivos y examine las necesidades del sitio, el perfil de la audiencia y sus objetivos. Adems, tenga en cuentarequisitos tcnicos como el acceso de los usuarios, las limitaciones del navegador, los plug-ins o la descarga de archivos. Una vez que hayaorganizado la informacin y determinado una estructura, podr comenzar a crear el sitio. Consulte Sitios de Dreamweaver.

Organizacin y administracin de los archivos del sitio

En el panel Archivos puede aadir, eliminar y cambiar el nombre de los archivos y carpetas fcilmente con el fin de modificar la organizacinsegn resulte necesario. En el panel Archivos tambin encontrar numerosas herramientas para administrar el sitio, transferir archivos desde yhacia un servidor remoto, configurar un proceso de Desproteccin/Proteccin que evite que se sobrescriban archivos y sincronizar los archivos delos sitios local y remoto. El panel Activos permite organizar fcilmente los activos de un sitio, que se pueden arrastrar directamente desde el panelActivos hasta un documento de Dreamweaver. Puede utilizar Dreamweaver para administrar diversos aspectos de sus sitios deAdobe Contribute . Consulte Administracin de archivos y carpetas y Administracin de activos y bibliotecas.

Diseo de las pginas Web

Elija el diseo ms apropiado, o combine las opciones de diseo de Dreamweaver para definir el aspecto de su sitio. Para empezar, puede utilizardiseos de cuadrcula fluida o las plantillas predeterminadas de Dreamweaver. Puede crear pginas nuevas a partir de una plantilla deDreamweaver y actualizar su diseo de forma automtica cuando cambie la plantilla. Para mostrar varios elementos de forma simultnea en unnavegador, puede utilizar marcos para disponer los documentos como desee. Consulte Creacin de pginas con CSS y Diseo de pginas conHTML.

Adicin de contenido a las pginas

Aada activos y elementos de diseo, como texto, imgenes, imgenes de sustitucin, mapas de imgenes, colores, pelculas, sonido, vnculosHTML, mens de salto y mucho ms. Puede utilizar funciones de creacin de pginas incrustadas para dichos elementos, como ttulos y fondos,escribir directamente en la pgina o importar contenido desde otros documentos. Dreamweaver tambin incluye herramientas para maximizar elrendimiento del sitio Web y para comprobar que las pginas sean compatibles con distintos navegadores Web. Consulte Adicin de contenido alas pginas.

Creacin de pginas mediante la introduccin manual de cdigo

La programacin manual de pginas Web es otro enfoque de la creacin de pginas. Dreamweaver ofrece sencillas herramientas de edicinvisual, pero tambin incluye un entorno de programacin ms sofisticado. Puede utilizar el mtodo que prefiera, o una combinacin de ambos,para crear y editar sus pginas. Consulte Trabajo con el cdigo de las pginas.

Configuracin de una aplicacin Web para contenido dinmico

Muchos sitios Web contienen pginas dinmicas que permiten a los visitantes ver informacin almacenada en bases de datos y que suelenpermitirles aadir y editar informacin. Para crear esas pginas, debe configurar primero un servidor y una aplicacin Web, crear o modificar unsitio de Dreamweaver y conectarse a una base de datos. Consulte Preparacin para crear sitios dinmicos.

Creacin de pginas dinmicas

18

Ir al principio

Ir al principio

Nota:

Ventana de bienvenida

Barra de la aplicacin

Barra de herramientas Documento

Barra de herramientas Estndar

En Dreamweaver se pueden definir diversas fuentes de contenido dinmico, incluidos juegos de registros extrados de bases de datos,parmetros de formularios y componentes JavaBeans. Para aadir el contenido dinmico a una pgina, basta con arrastrarlo a ella.

Puede establecer que los registros de la pgina aparezcan de uno en uno o en grupos, mostrar varias pginas de registros, aadir vnculosespeciales para pasar de una pgina de registros a la siguiente (o a la anterior) y crear contadores para que los usuarios puedan llevar un controlde los registros. Consulte Creacin de pginas dinmicas.

Comprobacin y publicacin

La comprobacin de las paginas es un proceso continuo que se lleva a cabo durante todo el ciclo de desarrollo. Al final del ciclo, publicar el sitioen un servidor. Muchos desarrolladores tambin programan operaciones de mantenimiento peridico para asegurarse de que el sitio se mantieneactualizado y operativo. Consulte Obtencin y colocacin de archivos en el servidor.

Introduccin al diseo del espacio de trabajoEl espacio de trabajo de Dreamweaver permite ver las propiedades de los documentos y los objetos. Adems, coloca muchas de las operacionesms frecuentes en barras de herramientas para que pueda realizar cambios en los documentos rpidamente.

Espacio de trabajo de Dreamweaver A. Barra de herramientas Documento B. Barra de la aplicacin C. Ventana Documento D. Conmutador de espacios de trabajo E. Grupos depaneles F. Panel Archivos G. Inspector de propiedades H. Selector de etiquetas

Descripcin general de los elementos del espacio de trabajoEl espacio de trabajo incluye los siguientes elementos:

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

Le permite abrir un documento reciente o crear un documento nuevo. Desde la pantalla de bienvenida, tambin puedeprofundizar sus conocimientos sobre Dreamweaver mediante una visita guiada del producto o el contenido de ayuda y aprendizaje.

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

Contiene botones que proporcionan opciones para diferentes vistas de la ventana Documento (como la vistaDiseo y la vista Cdigo), diversas opciones de visualizacin y algunas operaciones comunes como la obtencin de una vista previa en unnavegador.

Para mostrar la barra de herramientas Estndar, seleccione Ver > Barras de herramientas > Estndar. Labarra de herramientas contiene botones para las operaciones ms habituales de los mens Archivo y Edicin: Nuevo, Abrir, Examinar en Brigde,

19

Barra de herramientas Programacin

Ventana Documento

Inspector de propiedades

Selector de etiquetas

Paneles

Panel Insertar

Panel Archivos

Ir al principio

Vista Diseo

Vista Cdigo

Vista Cdigo dividida

Vistas Cdigo y Diseo

Vista en vivo

vista Cdigo en vivo

Ir al principio

Guardar, Guardar todo, Imprimir cdigo, Cortar, Copiar, Pegar, Deshacer y Rehacer.

Solo se muestra en la vista Cdigo. Contiene botones que le permiten realizar numerosas operacionesde programacin estndar.

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

Situado en la barra de estado de la parte inferior de la ventana Documento. Muestra la jerarqua de etiquetas que rodea ala seleccin actual. Haga clic en cualquier etiqueta de la jerarqua para seleccionar la etiqueta y todo su contenido.

Le ayudan a supervisar y modificar el trabajo realizado. Son ejemplos de paneles el panel Insertar, el panel Diseador de CSS y el panelArchivos. Para ampliar un panel, haga doble clic en su ficha.

Contiene botones para la insercin de diversos tipos de objeto, como imgenes, tablas y elementos multimedia, en undocumento. Cada objeto es un fragmento de cdigo HTML que le permite establecer diversos atributos al insertarlo. Por ejemplo, puede insertaruna tabla haciendo clic en el botn Tabla del panel Insertar. Si lo prefiere, puede insertar objetos utilizando el men Insertar en lugar del panelInsertar.

Le permite administrar los archivos y las carpetas, tanto si forman parte de un sitio de Dreamweaver como si se encuentran enun servidor remoto. El panel Archivos tambin permite acceder a todos los archivos del disco local.

Introduccin a la ventana DocumentoLa ventana Documento muestra el documento actual. Para cambiar a un documento, haga clic en su ficha.

Puede elegir entre las vistas siguientes:

(Ver > Diseo) Un entorno para el diseo visual de la pgina, la edicin visual y el desarrollo rpido de aplicaciones. En esta vista,Dreamweaver muestra una representacin visual del documento completamente editable, similar a la que aparecera en un navegador.

(Ver > Cdigo) Un entorno de programacin manual para escribir y editar cdigo HTML, JavaScript y de cualquier otro tipo.

(Ver > Dividir cdigo) Una versin dividida de la vista Cdigo que le permite desplazarse por el trabajo realizado endiferentes secciones del documento a la vez.

(Ver > Cdigo y Diseo) Le permite ver las vistas Cdigo y Diseo para el mismo documento en una sola ventana.

(Ver > Vista en vivo) La Vista en vivo, que es similar a la vista Diseo, muestra una representacin ms realista de la aparienciaque tendr el documento en un navegador y le permite interactuar con el documento de la misma forma que lo hara en un navegador. Puedeeditar elementos HTML directamente en la Vista en vivo y obtener de inmediato una vista previa de los cambios en la misma vista. Para obtenerms informacin sobre la edicin en la Vista en vivo, consulte Edicin de elementos HTML en la Vista en vivo.

(Ver > Cdigo en vivo) Solo est disponible al visualizar un documento en la Vista en vivo. La vista Cdigo en vivomuestra el cdigo que un navegador utiliza para ejecutar la pgina y cambia dinmicamente conforme se interacta con la pgina en la Vista envivo. La vista Cdigo en vivo no es editable.

Cuando una ventana Documento est maximizada (configuracin predeterminada), aparecen fichas en la parte superior de la misma con losnombres de archivo de todos los documentos abiertos. Dreamweaver muestra un asterisco despus del nombre del archivo si ha realizadocambios 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 ttulodel documento, si est viendo documentos en ventanas independientes). Los documentos relacionados son documentos asociados al documentoactual, como archivos CSS o archivos JavaScript. Para abrir uno de los archivos relacionados en la ventana Documento, haga clic en su nombrede archivo en la barra de herramientas Archivos relacionados.

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

Barra de herramientas Documento A. Mostrar la vista Cdigo B. Mostrar las vistas Cdigo y Diseo C. Mostrar la vista Diseo D. Vista en vivo E. Vista previa/Depurar ennavegador F. Ttulo del documento G. Administracin de archivos

20

Mostrar la vista Cdigo

Mostrar las vistas Cdigo y Diseo

Mostrar la vista Diseo

Vista en vivo

Vista previa/Depurar en navegador

Administracin de archivos

Ttulo del documento

Ir al principio

Ir al principio

Ir al principio

Barra de herramientas Documento para documentos con diseo de cuadrcula fluida A. Mostrar la vista Cdigo B. Mostrar las vistas Cdigo y Diseo C. Mostrar la vista Diseo D. Vista en vivo E. Vista previa/Depurar ennavegador F. Ttulo del documento G. Administracin de archivos H. Mostrar/ocultar cuadrculas fluidas

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

Solo muestra la vista Cdigo en la ventana Documento.

Divide la ventana Documento entre las vistas Cdigo y Diseo. Cuando seleccione esta vista combinada,se encontrar disponible la opcin Vista Diseo encima del men Opciones de visualizacin.

Solo muestra la vista Diseo en la ventana Documento.Nota: Si trabaja con XML, JavaScript, CSS u otros tipos de archivos basados en cdigo, no podr ver los archivos en la vista Diseo y losbotones Diseo y Dividir aparecern atenuados.

Muestra una vista del documento interactiva y basada en navegador. Tambin puede editar elementos HTML en la Vista en vivo.

Le permite obtener una vista previa o depurar el documento en un navegador. Seleccione un navegador enel men emergente.

Muestra el men emergente Administracin de archivos.

Permite introducir un ttulo para el documento, que aparecer en la barra de ttulo del navegador. Si el documento yatiene ttulo, este aparecer en dicho campo.

Introduccin a la barra de herramientas EstndarLa barra de herramientas Estndar contiene botones para las operaciones ms habituales de los mens Archivo y Edicin: Nuevo, Abrir, Examinaren Brigde, Guardar, Guardar todo, Imprimir cdigo, Cortar, Copiar, Pegar, Deshacer y Rehacer. Estos botones se utilizan del mismo modo que loscomandos de men equivalentes.

Introduccin a la barra de herramientas Navegacin con navegadorLa barra de herramientas Navegacin con navegador se activa en la Vista en vivo y muestra la direccin de la pgina que est viendo en laventana 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 C. Opciones de Vista en vivo

De manera predeterminada, los vnculos no estn activos en la Vista en vivo. Que los vnculos no estn activos le permite seleccionar o hacer clicen 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 elclic nico o el clic continuo seleccionando Seguir vnculos o Seguir vnculos continuamente del men Opciones de visualizacin situado a laderecha del cuadro de direccin.

Introduccin a la barra de herramientas ProgramacinLa barra de herramientas Programacin contiene botones que le permiten realizar numerosas operaciones de programacin estndar, comoampliar y contraer las selecciones de cdigo, resaltar cdigo no vlido, insertar o eliminar comentarios, aplicar sangra al cdigo e insertarfragmentos de cdigo utilizados recientemente. La barra de herramientas Programacin aparece verticalmente en la parte izquierda de la ventanaDocumento y solo est visible cuando se muestra la vista Cdigo.

21

Ir al principio

Barra de herramientas Programacin (CC)

No puede desacoplar ni mover la barra de herramientas Programacin, pero s puede ocultarla (Ver > Barras de herramientas > Programacin).

Tambin puede modificar la barra de herramientas Programacin para que muestre ms botones (como Ajustar texto, Mostrar caracteres ocultos ySangra automtica) u ocultar botones que no desea utilizar. Para ello, no obstante, deber editar el archivo XML que genera la barra deherramientas. Para ms informacin, consulte Ampliacin de Dreamweaver.

Introduccin a la barra de estadoLa barra de estado, situada en la parte inferior de la ventana Documento, proporciona informacin adicional sobre el documento que estcreando.

Barra de estado A. Selector de etiquetas B. Tamao mvil C. Tamao tablet D. Tamao de escritorio E. Tamao de ventana

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 ytodo su contenido. Haga clic en para seleccionar todo el cuerpo del documento. Para definir los atributos class o ID para una etiquetaen el selector de etiquetas, haga clic con el botn de derecho del ratn (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh)en la etiqueta y elija una clase o una ID del men contextual.

Tamao de mvil

Muestra una vista previa del documento en el tamao de mvil: 480 x 800 de forma predeterminada. Para cambiar el valor predeterminado, hagaclic en el men emergente Tamao de ventana > Editar tamaos.

Tamao de tableta

Muestra una vista previa del documento en el tamao de tableta: 768 x 1024 de forma predeterminada. Para cambiar el valor predeterminado,haga clic en el men emergente Tamao de ventana > Editar tamaos.

Tamao de escritorio

Muestra una vista previa del documento en el tamao de escritorio: ancho de 1.000 pxeles de forma predeterminada. Para cambiar el valorpredeterminado, haga clic en el men emergente Tamao de ventana > Editar tamaos.

Men emergente Tamao de ventana

No disponible en la vista Cdigo. Permite cambiar el tamao de la ventana Documento a dimensiones predeterminadas o personalizadas. Cuandose cambia el tamao de vista de una pgina en la vista Diseo o la Vista en vivo, solo cambian las dimensiones de la vista. El tamao del

22

Ir al principio

Ir al principio

Comn

Estructura

Medios

Formulario

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 depgina cambia en funcin de cmo se sujete el dispositivo.

Descripcin general del inspector de propiedadesEl inspector de propiedades permite examinar y editar las propiedades ms comunes del elemento de pgina seleccionado actualmente, comotexto o un objeto insertado. El contenido del inspector de propiedades es distinto en funcin del elemento seleccionado. Por ejemplo, si seleccionauna imagen de la pgina, el inspector de propiedades cambiar para mostrar las propiedades de la imagen (por ejemplo, la ruta de archivo de laimagen, 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 yconvertirlo en un panel flotante en el espacio de trabajo.

Informacin general sobre el panel InsertarEl panel Insertar contiene botones para crear e insertar objetos como tablas, imgenes y vnculos. Los botones estn ordenados en variascategoras, 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 laaccin predeterminada del botn. Por ejemplo, si selecciona Marcador de posicin de imagen en el men emergente del botn Imagen, lasiguiente vez que haga clic en el botn Imagen, Dreamweaver insertar un marcador de posicin de imagen. Siempre que seleccione una nuevaopcin del men emergente cambiar la accin predeterminada del botn.

El panel Insertar est organizado en las categoras siguientes:

Permite crear e insertar los elementos ms utilizados, como etiquetas div, y objetos, como imgenes y tablas.

Permite insertar elementos estructurales, como etiquetas div, encabezados, listas, prrafos, cabeceras y pies de pgina.

Permite insertar elementos multimedia como composiciones de Edge Animate, audio y vdeo HTML5, y audio y vdeo Flash.

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

23

jQuery Mobile

IU de jQuery

Plantillas

Favoritos

Ir al principio

Contiene botones para crear sitios que usan jQuery Mobile.

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

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

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

Descripcin general del panel ArchivosUtilice 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 tamao del rea de visualizacin y expandir o contraer el panelArchivos. Cuando el panel Archivos se contrae, muestra el contenido del sitio local, el sitio remoto, el servidor de prueba o el depsito SVN comouna lista de archivos. Cuando est ampliado, adems del sitio local, muestra el sitio remoto o el servidor de prueba o el depsito SVN.

Para sitios de Dreamweaver, tambin puede personalizar el panel Archivos cambiando la vista (sitio local o sitio remoto) que aparece de formapredeterminada en el panel contrado.

Las carpetas del panel Archivos se muestran en distintos colores segn la vista: local, remota o prueba.

Vista local

Windows

Mac

Vista de servidor remoto

24

Ir al principio

Windows

Mac

Vista de servidor de pruebas

Windows

Mac

Vista de repositorio

Windows

Mac

El panel Archivos interacta con el servidor a intervalos regulares para actualizar su contenido. Aparece un mensaje de error si intenta realizaruna accin en el panel Archivos mientras est ejecutando estas actualizaciones automticas. Para desactivar las actualizaciones automticas,abra el men de opciones del panel Archivos y anule la seleccin de Actualizacin automtica en el men Ver.

Para actualizar el contenido del panel manualmente, utilice el botn Actualizar en el panel. El estado de proteccin actual de los archivos, sinembargo, solo se actualiza cuando estn activadas las actualizaciones automticas.

Diseador de CSSEl panel Diseador de CSS (Ventanas > Diseador de CSS) es un inspector de propiedades de CSS que permite crear "visualmente" archivos yestilos CSS, as como definir propiedades y consultas de medios.

25

Fuentes

@Medios

Selectores

Propiedades

Ir al principio

Panel Diseador de CSS

El panel Diseador de CSS consta de los siguientes subpaneles:

Muestra todas las hojas de estilo CSS asociadas al documento. Este panel le permite crear una CSS y adjuntarla al documento, o biendefinir estilos dentro del documento.

Muestra una lista de todas las consultas de medios en el panel Fuentes. Si no selecciona una CSS especfica, este panel muestratodas las consultas de medios asociadas al documento.

Muestra una lista de todos los selectores en el panel Fuentes. Si tambin selecciona una consulta de medios, este panel limita la listade selectores de dicha consulta de medios. Si no hay seleccionada ninguna CSS ni ninguna consulta de medios, este panel muestra todos losselectores del documento.Cuando se selecciona Global en el panel @Medios, se muestran todos los selectores que no se incluyen en la consulta de medios del origenseleccionado.

Muestra las propiedades que puede definir para el selector especificado. Para obtener ms informacin, consulte Definicin depropiedades.

El Diseador de CSS es sensible al contexto. Esto significa que puede ver los selectores y propiedades asociados a un determinado contexto oelemento de pgina. Asimismo, cuando seleccione un selector en Diseador de CSS, el origen y las consultas de medios asociados se resaltarnen los paneles correspondientes.

Para obtener ms informacin, consulte el panel Diseador de CSS.

Introduccin a las guas visualesDreamweaver proporciona varios tipos de guas visuales para ayudarle a disear documentos y predecir de forma aproximada cul ser suapariencia en los navegadores. Puede seguir uno de estos procedimientos:

Ajustar instantneamente el tamao deseado para una ventana Documento y comprobar si caben los elementos en la pgina.

Utilizar una imagen de rastreo como fondo de la pgina para ayudarle a copiar un diseo creado en una aplicacin de edicin deilustraciones o imgenes como Adobe Photoshop o Adobe Fireworks.

26

Los trminos de Creative Commons no cubren las publicaciones en Twitter y Facebook.

Avisos legales | Poltica de privacidad en lnea

Utilizar las reglas y guas para proporcionar una pista visual que permita colocar y cambiar el tamao de los elementos de pgina conprecisin.

Utilizar la cuadrcula para lograr una mayor precisin en la colocacin y ajuste del tamao de elementos con posicin absoluta (elementosPA).

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

Uso de la ventana Documento

Acerca de la Vista en vivo

Informacin general sobre la programacin en Dreamweaver

Vista previa de pginas en la Vista en vivo

Configuracin de las preferencias de programacin

Visualizacin y edicin del contenido de Head

Uso de ayudas visuales al disear

Vista previa de pginas en Dreamweaver

Insercin de cdigo con la barra de herramientas Programacin

Definicin del tamao de ventana y la velocidad de conexin

Utilizacin de Acercar y Alejar

Cambio del tamao de la ventana Documento

Configuracin de las preferencias de tiempo de descarga y tamao

Administracin de ventanas y paneles

Uso del inspector de propiedades

Uso del panel Insertar

Trabajo con archivos del panel Archivos

Uso de ayudas visuales al disear

27

Personalizacin del espacio de trabajo de Dreamweaver

Volver al principio

Gestin de ventanas y panelesGuardado de espacios de trabajo y paso de uno a otroVisualizacin de documentos en fichas (Dreamweaver Macintosh)Activacin de iconos en colorOcultacin y visualizacin de la pantalla de bienvenida de DreamweaverPersonalizacin de Dreamweaver en sistemas multiusuarioConfiguracin de preferencias generales para DreamweaverConfiguracin de las preferencias de fuentes para documentos de DreamweaverPersonalizacin de colores de resaltado de DreamweaverRestauracin de las preferencias predeterminadas

Gestin de ventanas y panelesPuede crear un espacio de trabajo personalizado moviendo y manipulando los paneles y las ventanas Documento. Tambin puede guardarespacios de trabajo y pasar de uno a otro. Para Fireworks, dar un nuevo nombre personalizado a los espacios de trabajo puede generar uncomportamiento inesperado.

Nota: Photoshop es la aplicacin utilizada en los siguientes ejemplos. No obstante, el espacio de trabajo se comporta igual en todos losproductos.

Reorganizar, acoplar o flotar ventanas de documentosSi abre ms de un archivo, aparecen ventanas Documento en forma de fichas.

Si desea cambiar el orden de las fichas de ventanas Documento, arrastre la ficha correspondiente a otra ubicacin dentro del grupo.

Si desea desacoplar (flotar o separar) una ventana Documento de un grupo de ventanas, arrastre la ficha correspondiente fuera del grupo.

Nota: en Photoshop puede tambin elegir Ventana > Organizar > Hacer flotante la ventana para hacer flotante una nica ventana dedocumento, o Ventana > Organizar > Hacer flotante todo en ventanas para hacer flotantes todas las ventanas de documentos a la vez. Sidesea obtener ms informacin, consulte la hoja tcnica kb405298 (en ingls).Nota: Dreamweaver no permite acoplar ni desacoplar ventanas Documento. Utilice el botn Minimizar de la ventana Documento para crearventanas flotantes (Windows) o elija Ventana > Mosaico vertical para crear ventanas Documento una junto a la otra. Si desea obtener msinformacin sobre este tema, busque Mosaico vertical en la ayuda de Dreamweaver. El flujo de trabajo de Macintosh es algo diferente.

Si desea acoplar una ventana Documento a otro grupo de ventanas Documento, arrastre la ventana hasta dicho grupo.

Para crear grupos de documentos apilados o en mosaico, arrastre la ventana a una de las zonas de colocacin de los bordes superior,inferior o laterales de otra ventana. Tambin puede seleccionar una composicin para el grupo con el botn pertinente de la barra de laaplicacin.

Nota: algunos productos no admiten esta funcin. Sin embargo, suelen disponer de comandos Mosaico y Cascada en el men Ventanapara ordenar los documentos.

Para cambiar a otro documento del grupo ordenado en fichas al arrastrar una seleccin, arrastre esta por encima de su pestaa duranteunos instantes.

Nota: algunos productos no admiten esta funcin.

Acoplamiento y desacoplamiento de panelesUn conjunto acoplado es un conjunto de paneles o grupos de paneles que se muestran juntos, generalmente en una orientacin vertical. Lospaneles se acoplan y desacoplan movindolos dentro y fuera de un conjunto acoplado.

Para acoplar un panel, arrstrelo por su ficha al conjunto apilado, a la parte superior, a la 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 conjuntoacoplado.

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

Movimiento de panelesConforme mueve paneles, ver zonas de colocacin resaltadas en azul, reas en las que puede mover el panel. Por ejemplo, puede mover un

28

panel hacia arriba o hacia abajo en un conjunto acoplado arrastrndolo a la zona de colocacin azul estrecha encima o debajo de otro panel. Siarrastra a un rea que no es una zona de colocacin, el panel flota con libertad en el espacio de trabajo.Nota: la posicin del ratn (ms que la posicin del panel) activa la zona de colocacin, por lo que si no ve la zona de colocacin, pruebe aarrastrar el ratn al lugar en el que debera estar esta zona.

Para mover un panel, arrstrelo por su ficha.Para mover un grupo de paneles, arrastre su barra de ttulo.

La zona de colocacin azul estrecha indica que el panel Color se acoplar por s mismo encima del grupo de paneles Capas.A. Barra de ttulo B. Ficha C. Zona de colocacin

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

Adicin y eliminacin de panelesSi quita todos los paneles de un conjunto acoplado, este desaparece. Para crear un conjunto acoplado, mueva paneles hacia el borde derecho delespacio 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 biendeseleccinelo 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 ficha del panel a la zona de colocacin resaltada en el grupo.

Adicin de un panel a un grupo de paneles

Para reorganizar los paneles de un grupo, arrastre la ficha de un panel a una nueva ubicacin 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 su barra de ttulo (encima de las fichas).

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

Paneles apilados flotantes de libre movimiento

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

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

Nota: asegrese de soltar la ficha encima de la zona de colocacin estrecha entre los paneles, en lugar de en la zona de colocacin ancha

29

Volver al principio

en una barra de ttulo.

Para quitar un panel o un grupo de paneles de la pila, de manera que flote por s mismo, arrstrelo fuera de su ficha o 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 dobleclic 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. A algunos paneles, como el panel de color en Photoshop, no se lespuede cambiar el tamao arrastrndolos.

Contraccin y expansin de iconos de panelesPuede contraer los paneles a iconos para reducir la acumulacin de elementos en el espacio de trabajo. En algunos casos, los paneles secontraen a iconos en el espacio de trabajo por defecto.

Paneles contrados en iconos

Paneles expandidos desde iconos

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

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 acopladohasta 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.

En algunos productos, si selecciona la contraccin automtica de iconos de paneles en las preferencias de interfaz o de opciones deinterfaz de usuario, el icono de panel expandido se contrae automticamente cuando haga clic lejos de l.

Para aadir un panel o un grupo de paneles flotantes a un conjunto acoplado de iconos, arrstrelo por su ficha o barra de ttulo. (Lospaneles se contraen automticamente en iconos cuando se aaden a un conjunto acoplado de iconos).

Para mover un icono de panel (o un grupo de iconos de paneles), basta con arrastrarlo. Puede arrastrar los iconos de panel hacia arriba yhacia abajo en el conjunto acoplado, hacia otros conjuntos acoplados (donde aparecen en el estilo de panel de dicho conjunto acoplado) ohacia afuera del conjunto acoplado (donde aparecen como iconos flotantes).

Guardado de espacios de trabajo y paso de uno a otroAl guardar la posicin y el tamao actuales de los paneles como un espacio de trabajo con nombre, puede restaurar dicho espacio de trabajoincluso aunque mueva o cierre un panel. Los nombres de los espacios de trabajo guardados aparecen en el conmutador de espacios de trabajode la barra de la aplicacin.

30

Volver al principio

Guardado de un espacio de trabajo personalizado

1. Con el espacio de trabajo en la configuracin que desea guardar, siga uno de estos procedimientos:

(Illustrator) Elija Ventana > Espacio de trabajo > Guardar espacio de trabajo.

(Photoshop, InDesign e InCopy) Elija Ventana > Espacio de trabajo > Nuevo espacio de trabajo.

(Dreamweaver) Elija Ventana > Diseo del espacio de trabajo > Nuevo espacio de trabajo.

(Flash) Elija Nuevo espacio de trabajo en el conmutador de espacios de trabajo de la barra de la aplicacin.

(Fireworks) Elija Guardar actual en el conmutador de espacios de trabajo de la barra de la aplicacin.

2. Escriba un nombre para el espacio de trabajo.

3. (Photoshop, InDesign) En Capturar, seleccione una o varias de las siguientes opciones:

Ubicaciones de panel Guarda las ubicaciones de los paneles actuales (solo InDesign).

Mtodos abreviados de teclado Guarda el conjunto actual de mtodos abreviados de teclado (solo Photoshop).

Mens o Personalizacin de mens Guarda el conjunto actual de mens.

Visualizacin de espacios de trabajo y paso de uno a otro Seleccione un espacio de trabajo en el conmutador de espacios de trabajo de la barra de la aplicacin.

En Photoshop, puede asignar mtodos abreviados de teclado a cada espacio de trabajo para navegar rpidamente por ellos.

Eliminacin de un espacio de trabajo personalizado

Seleccione Administrar espacios de trabajo en el conmutador de espacios de trabajo de la barra de la aplicacin, seleccione el espacio detrabajo y, a continuacin, haga clic en Eliminar. (La opcin no est disponible en Fireworks).

(Photoshop, InDesign, InCopy) Seleccione Eliminar espacio de trabajo en el conmutador de espacios de trabajo.

(Illustrator) Elija Ventana > Espacio de trabajo > Gestionar espacios de trabajo, seleccione el espacio de trabajo y, a continuacin, haga clicen el icono Eliminar.

(Photoshop e InDesign) Elija Ventana > Espacio de trabajo > Eliminar espacio de trabajo, seleccione el espacio de trabajo y, a continuacin,haga clic en Eliminar.

Restauracin del espacio de trabajo por defecto

1. Seleccione Aspectos esenciales o el espacio de trabajo predeterminado del conmutador de espacios de trabajo de la barra de la aplicacin.Para Fireworks, lea el artculo http://www.adobe.com/devnet/fireworks/articles/workspace_manager_panel.html.

Nota: En Dreamweaver, Designer es el espacio de trabajo predeterminado.2. Para Fireworks (Windows), elimine estas carpetas:

Windows Vista \\Usuarios\\Datos de programa\Roaming\Adobe\Fireworks CS4\

Windows XP \\Documents and Settings\\Datos de programa\Adobe\Fireworks CS4

3. (Photoshop, InDesign e InCopy) Elija Ventana > Espacio de trabajo > Restaurar [nombre de espacio de trabajo].

(Photoshop) Restauracin de una disposicin de espacio de trabajoEn Photoshop, los espacios de trabajo aparecern automticamente con la ltima disposicin, pero podr restaurar la disposicin guardadaoriginal de los paneles.

Para restaurar un espacio de trabajo individual, elija Ventana > Espacio de trabajo > Restaurar Nombre de espacio de trabajo.

Para restaurar todos los espacios de trabajo instalados con Photoshop, haga clic en Restaurar espacios de trabajo predeterminados en laspreferencias de interfaz.

Para reorganizar los espacios de trabajo en la barra de aplicaciones, arrstrelos.

Visualizacin de documentos en fichas (Dreamweaver Macintosh)Puede ver varios documentos en una sola ventana de documento mediante las fichas que identifican a cada uno de ellos. Tambin puedemostrarlos 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 presiona la tecla Control y seleccione Mover a nueva ventana en el men contextual.

31

Volver al principio

Volver al principio

Volver al principio

Volver al principio

Combinacin de documentos independientes en ventanas con fichas Seleccione Ventana > Combinar como fichas.

Cambio de la configuracin predeterminada de documento en ficha1. Seleccione Dreamweaver > Preferencias y, posteriormente, seleccione la categora General.2. Seleccione o anule la seleccin de Abrir documentos en fichas y haga clic en Aceptar.

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

Activacin de iconos en colorDe manera predeterminada, Dreamweaver CS4 y versiones posteriores utilizan iconos en blanco y negro que adquieren color al pasar el ratn porencima de ellos. Puede hacer que los iconos se muestren en color permanentemente, de manera que no sea necesario pasar el ratn por encimade ellos.

Siga uno de estos procedimientos:

Elija Ver > Iconos de colores.

Cambie al espacio de trabajo Clsico o de Programador.

Para volver a desactivar los iconos de colores, seleccione Iconos de colores en el men Ver o cambie a otro espacio de trabajo.

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

Ocultacin de la ventana de bienvenida Seleccione en la pgina de inicio la opcin No volver a mostrar en la pantalla de bienvenida.

Visualizacin de la ventana de bienvenida1. Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh).2. En la categora General, seleccione la opcin Mostrar pantalla de bienvenida.

Personalizacin de Dreamweaver en sistemas multiusuarioPuede personalizar Dreamweaver para que se ajuste a sus necesidades, incluso en un sistema operativo multiusuario como Windows XP o MacOS X.

Dreamweaver impide que la configuracin personalizada de un usuario afecte a la configuracin personalizada de otro usuario. Para lograr esteobjetivo, la primera vez que ejecute Dreamweaver en uno de los sistemas operativos multiusuario que reconoce, la aplicacin crear copias dediversos archivos de configuracin. Estos archivos de configuracin se almacenan en una carpeta de su propiedad.

Por ejemplo, en Windows XP, se almacenan en la carpeta C:\Documents and Settings\nombre del usuario\ApplicationData\Adobe\Dreamweaver\es_ES\Configuration, que est oculta de manera predeterminada. Para mostrar archivos y carpetas ocultos, seleccioneHerramientas > Opciones de carpeta en el Explorador de Windows, haga clic en la ficha Ver y seleccione la opcin Mostrar todos los archivos ycarpetas ocultos.

En Windows Vista, se almacenan en la carpeta C:\Usuarios\nombre del usuario\AppData\Roaming\Adobe\Dreamweaver \es_es\Configuration, queest oculta de manera predeterminada. Para mostrar archivos y carpetas ocultos, seleccione Herramientas > Opciones de carpeta en elExplorador de Windows, haga clic en la ficha Ver y seleccione la opcin Mostrar todos los archivos y carpetas ocultos.

En Mac OS X, se almacenan en la carpeta inicial del usuario; concretamente en Users/nombre del usuario/Library/ApplicationSupport/Adobe/Dreamweaver/Configuration.

Si reinstala o actualiza Dreamweaver, Dreamweaver crear automticamente copias de seguridad de los archivos de configuracin de usuarioexistentes para que, en el caso de que haya personalizado dichos archivos manualmente, contine teniendo acceso a los cambios realizados.

Configuracin de preferencias generales para Dreamweaver1. Seleccione Edicin > 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 que le permiten cambiar de un documento a otro(slo Macintosh).

32

Volver al principio

Mostrar pantalla de bienvenida Muestra la pantalla de bienvenida de Dreamweaver cuando se inicia Dreamweaver o cuando no se tieneabierto ningn documento.

Volver a abrir documentos al iniciar Abre todos los documentos que estaban abiertos en el momento en que se cerr Dreamweaver. Siesta opcin no est seleccionada, Dreamweaver muestra la pantalla de bienvenida o una pantalla en blanco al iniciarse (en funcin delvalor de Mostrar pantalla de bienvenida).

Advertir al abrir archivos de slo lectura Avisa cuando se abre un archivo de slo lectura (bloqueado). Elija entre desbloquear/proteger elarchivo, ver el archivo o cancelar.

Activar archivos relacionados Le permite ver los archivos que estn conectados al documento actual (por ejemplo, archivos CSS oJavaScript). Dreamweaver muestra un botn por cada archivo relacionado en la parte superior del documento y abre el archivo cuando sehace clic en el botn.

Detectar archivos relacionados dinmicamente Le permite seleccionar si Archivos relacionados dinmicamente debe aparecer en labarra de herramientas Archivos relacionados de forma automtica o tras una interaccin manual. Tambin puede optar por deshabilitar ladeteccin de Archivos relacionados dinmicamente.

Actualizar vnculos al mover archivos Determina qu sucede al mover, cambiar el nombre o eliminar un documento del sitio. Establezcaesta preferencia para actualizar siempre los vnculos de manera automtica, para no actualizarlos nunca o para que se muestre un mensajeque pregunte si desea actualizarlos. (Consulte Actualizacin automtica de vnculos.)

Mostrar dilogo al insertar objetos Determina si Dreamweaver solicita la introduccin de informacin adicional al insertar imgenes,tablas, pelculas de Shockwave y otros objetos utilizando el panel Insertar o el men Insertar. Si esta opcin est desactivada, no aparecerel cuadro de dilogo y deber emplear el inspector de propiedades para especificar el archivo de origen para imgenes, el nmero de filasde 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 presiona la teclaControl (Windows) o mientras presiona 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 delenguaje 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 prrafo sencillo tras el encabezado Especifica que al presionar Intro (Windows) o Retorno (Macintosh) al final de un prrafo deencabezado en la vista Diseo, se cree un nuevo prrafo con la etiqueta p. (Un prrafo de encabezado es el que cuenta con una etiquetade encabezado, como h1 o h2.) Si se desactiva esta opcin, al presionar Intro o Retorno al final de un prrafo de encabezado, se crea unnuevo prrafo con la misma etiqueta de encabezado (lo que permite escribir varios encabezados seguidos y luego volver para especificarlos detalles).

Permitir mltiples espacios consecutivos Especifica que al introducir uno o varios espacios en modo Diseo, se creen espaciosindivisibles que aparecen en un navegador como espacios mltiples. (Por ejemplo, puede introducir dos espacios entre frases, tal y como lohara con una mquina de escribir.) Esta opcin est diseada principalmente para gente que est acostumbrada a teclear en unprocesador de textos. Si est desactivada, varios espacios se consideran un espacio nico (puesto que as lo hacen los navegadores).

Utilizar y en lugar de y Especifica que Dreamweaver debe aplicar la etiqueta strong cuando realice una accinque aplicara normalmente la etiqueta b, y que debe aplicar la etiqueta em cuando realiza una accin que aplicara normalmente la etiquetai. Estas acciones incluyen hacer clic en los botones Negrita o Cursiva en el inspector de propiedades de texto en modo HTML y elegirFormato > Estilo > Negrita o Formato > Estilo > Cursiva. Para utilizar las etiquetas b y 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 informacinsemntica que las etiquetas b e i.

Advertir al colocar regiones editables entre etiquetas o - Especifica si debe mostrarse un mensaje de advertencia alguardar una plantilla de Dreamweaver que tiene una regin editable dentro de una etiqueta de prrafo o encabezado. El mensaje indica quelos usuarios no podrn crear ms prrafos en la regin. Est activada de manera predeterminada.

Centrar Especifica si los elementos deben centrarse con divalign="center" o la etiqueta center al hacer clic en el botn Alinear al centro delinspector de propiedades.Nota: Oficialmente, a partir de la especificacin HTML 4.01 ya no se utiliza ninguno de estos mtodos para centrar; para poder centrartexto, deber utilizar los estilos CSS. A partir de la especificacin XHTML 1.0 de transicin, ambos mtodos son todava vlidostcnicamente, pero ya no lo son en la especificacin XHTML 1.0 estricta.

Nmero mximo de pasos de Historial Determina el nmero de pasos que el panel Historial mantiene y muestra. (El valorpredeterminado suele ser vlido para la mayora de los usuarios.) Si supera el nmero mximo de pasos definido para el panel Historial, seeliminarn los pasos ms antiguos.

Para ms informacin, consulte Automatizacin de tareas.

Diccionario ortogrfico Muestra los diccionarios ortogrficos disponibles. Si un diccionario contiene mltiples variantes o convencionesortogrficas (por ejemplo, espaol de Mxico o espaol de Colombia), dichas variantes se enumerarn por separado en el men emergenteDiccionario ortogrfico.

Configuracin de las preferencias de fuentes para documentos de Dreamweaver

33

Volver al principio

Volver al principio

La codificacin de un documento determina el aspecto que tendr en un navegador. Las preferencias de fuentes de Dreamweaver le permiten veruna codificacin determinada con la fuente y en el tamao que prefiera. No obstante, las fuentes que seleccione en la categora Fuentes delcuadro de dilogo Preferencias slo afectarn a la forma en que aparecen las fuentes en Dreamweaver, no a la forma en que se muestra eldocumento en el navegador de un visitante. Para cambiar la forma en que se muestran las fuentes en un navegador, deber cambiar el textomediante el inspector de propiedades o aplicando una regla CSS.

Para obtener ms informacin sobre cmo establecer una codificacin predeterminada para los nuevos documentos, consulte Cmo crear y abrirdocumentos.

1. Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh).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, sta deber estar instalada en el equipo. Por ejemplo, para vertexto en japons deber contar con una fuente japonesa instalada.Fuente proporcional La fuente que Dreamweaver utiliza 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, elvalor 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 lasfuentes que estn instaladas en el sistema. Para la mayora de los sistemas de Estados Unidos, el valor predeterminado es Courier New 10pt. (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 Cdigo del inspector de cdigo. El valor predeterminadodepende de las fuentes que estn instaladas en el sistema.

Personalizacin de colores de resaltado de DreamweaverUtilice las preferencias Resaltando para personalizar los colores que identifican regiones de plantillas, elementos de biblioteca, etiquetas deterceros, elementos de diseo y cdigo en Dreamweaver.

Cambio del color de resaltado1. Seleccione Edicin > Preferencias y seleccione la categora Resaltando.2. Haga clic en el cuadro de color situado junto al objeto al que desea cambiar de color y, a continuacin, utilice el selector de color para

seleccionar un nuevo color, o especifique un valor hexadecimal.

Activacin o desactivacin del resaltado de un objeto1. Seleccione Edicin > Preferencias y seleccione la categora Resaltando.2. Active o desactive la opcin Mostrar situada junto al objeto para el que desea activar o desactivar el color de resaltado.

Restauracin de las preferencias predeterminadasPara conocer los procedimientos de restauracin de las preferencias predeterminadas de Dreamweaver, consulte la Nota tcnica 83912.

Ms temas de ayudaIntroduccin al diseo del espacio de trabajo

Avisos legales | Poltica de privacidad en lnea

34

Uso de la ventana de documento

Volver al principio

Cambio de vista en la ventana de documentoVentanas de documento en cascada o en mosaicoCambio del tamao de la ventana de documentoDefinicin del tamao de ventana y la velocidad de conexinInformes en Dreamweaver

Cambio de vista en la ventana de documentoLa ventana de documento permite visualizar documentos en la vista Cdigo, la vista Cdigo dividida, la vista Diseo, las vistas Cdigo y Diseo(vista Dividida) o en la Vista en vivo. Tambin puede optar por visualizar la vista de cdigo dividida o las vistas Cdigo y Diseo horizontal overticalmente. (La visualizacin predeterminada es la horizontal.)

Cambio a la vista Cdigo Siga uno de estos procedimientos:

Seleccione Ver > Cdigo.

En la barra de herramientas Documento, haga clic en el botn Mostrar vista de Cdigo.

Cambio a la vista de cdigo divididaLa vista de cdigo dividida divide el documento en dos para que pueda trabajar en dos secciones del cdigo a la vez.

Seleccione Ver > Dividir cdigo.

Cambio a la vista Diseo Siga uno de estos procedimientos:

Seleccione Ver > Diseo.

En la barra de herramientas Documento, haga clic en el botn Mostrar vista de Diseo.

Visualizacin de las vistas Cdigo y Diseo Siga uno de estos procedimientos:

Seleccione Ver > Cdigo y diseo.

En la barra de herramientas Documento, haga clic en el botn Mostrar vistas de Cdigo y Diseo.

De manera predeterminada, las vista Cdigo aparece en la parte superior de la ventana de documento y la vista Diseo, en la parte inferior. Paramostrar la vista Diseo en la parte superior, seleccione Ver > Vista de diseo encima.

Cambio de la vista Cdigo a la vista Diseo y viceversa Presione Control+comilla invertida (`).

Si aparecen ambas vistas en la ventana de documento, este mtodo abreviado de teclado permite pasar de una vista a otra.

Divisin vertical de las vistasEsta opcin slo est disponible para la vista de cdigo dividida y para las vistas Cdigo y Diseo (vista dividida). Est desactivada para la vistaCdigo y para la vista Diseo.

1. Asegrese de que se encuentra en la vista de cdigo dividida (Ver > Dividir cdigo) o en las vistas Cdigo y Diseo (Ver > Cdigo yDiseo).

2. Seleccione Ver > Dividir verticalmente.

35

Volver al principio

Volver al principio

Si se encuentra en las vistas Cdigo y Diseo, podr optar por visualizar la vista Diseo a la izquierda (Ver > Vista Diseo a la izquierda).

Ventanas de documento en cascada o en mosaicoSi tiene varios documentos abiertos a la vez, puede organizarlos en cascada o en mosaico.

Ventanas de documento en cascada Seleccione Ventana > Cascada.

Ventanas de documento en mosaico(Windows) Seleccione Ventana > Mosaico horizontal o Ventana > Mosaico vertical.(Macintosh) Seleccione Ventana > Mosaico.

Cambio del tamao de la ventana de documentoLa barra de estado muestra las dimensiones actuales de la ventana de documento (en pxeles). Para disear una pgina cuyo mejor aspecto selogra con un tamao especfico, puede ajustar la ventana de documento con cualquiera de los tamaos predeterminados, editar dichos tamaos ocrear otros nuevos.

Cuando se cambia el tamao de vista de una pgina en la vista Diseo o la Vista en vivo, slo cambian las dimensiones de la vista. El tamao deldocumento 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 depgina cambia en funcin de cmo se sujete el dispositivo.

Establecimiento de un tamao predeterminado para la ventana de documento Elija uno de los tamaos del men emergente Tamao de ventana situado en la parte inferior de la ventana de documento. Dreamweaver

CS5.5 y posterior ofrece una lista ampliada de opciones, incluidas opciones para dispositivos mviles comunes (como se muestra a continuacin).

El tamao de la ventana indicado corresponde a las dimensiones internas de la ventana del navegador, sin bordes. El tamao del monitor o deldispositivo mvil se indica a la derecha.

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

Nota: (Slo Windows) Los documentos contenidos en la ventana de documento se maximizan de manera predeterminada y no es posiblecambiar el tamao de un documento maximizado. Para que el documento no est maximizado, haga clic en el botn de anulacin de lamaximizacin , situado en la esquina superior derecha del documento.

Modificacin de los valores que aparecen en el men emergente Tamao de ventana1. Elija Editar tamaos en el men emergente Tamao de ventana.2. Haga clic en cualquiera de los valores de ancho o altura de la lista de tamaos de ventana y escriba un valor nuevo.

Para hacer que la ventana de documento se ajuste slo a un ancho especfico (sin modificar la altura), seleccione un valor de altura yelimnelo.

36

Volver al principio

Volver al principio

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

Adicin de un valor al men emergente Tamao de ventana1. Elija Editar tamaos en el men emergente Tamao de ventana.2. Haga clic en el espacio en blanco situado debajo del ltimo valor de la columna Ancho.3. Introduzca valores en Ancho y Altura.

Para establecer slo 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. juntoa la entrada correspondiente a un monitor de 832 x 624 pxeles. La mayora de los monitores se pueden ajustar a varias dimensiones depxeles.

Definicin del tamao de ventana y la velocidad de conexin1. Seleccione Edicin > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh).2. Seleccione Barra de estado (CS5) o Tamaos de ventana (CS5.5 y posterior) en la lista de categoras de la izquierda.3. Defina cualquiera de las opciones siguientes:

Tamaos de ventana Permite personalizar los tamaos de las ventanas que aparecen en el men emergente de la barra de estado.

Velocidad de conexin Determina la velocidad de conexin (en kilobits por segundo) empleada para calcular el tamao de descarga. Eltamao de descarga de la pgina se muestra en la barra de estado. Cuando hay una imagen seleccionada en la ventana de documento,aparece su tamao de descarga en el inspector de propiedades.Nota: La Velocidad de conexin se ha eliminado en Dreamweaver CC y versiones posteriores.

Informes en DreamweaverDreamweaver permite ejecutar informes para buscar contenido, solucionar problemas o probar el contenido. Puede generar los siguientes tipos deinformes:

Buscar Permite buscar etiquetas, atributos y texto especfico en las etiquetas.Referencia Le permite buscar informacin de referencia que puede resultar til.Validacin Permite comprobar si existen errores de cdigo o de sintaxis.Compatibilidad con navegadores Permite probar el cdigo HTML en los documentos para comprobar si hay alguna etiqueta o atributo que seanincompatibles con los navegadores de destino.Verificador de vnculos Permite encontrar y arreglar vnculos rotos, externos y hurfanos.Informes de sitios Permite mejorar el flujo de trabajo y probar los atributos HTML del sitio. Los informes de flujo de trabajo incluyen informacinsobre proteccin, sobre documentos modificados recientemente y sobre Design Notes; los informes HTML incluyen etiquetas de fuentes anidadascombinables, la opcin de accesibilidad, texto alternativo que falta, etiquetas anidadas repetidas, etiquetas vacas eliminables y documentos sinttulo.Registro FTP Permite ver toda la actividad de transferencia de archivos mediante FTP.Depuracin del servidor Le permite ver informacin para depurar una aplicacin de Adobe ColdFusion.Nota: La compatibilidad con ColdFusion se ha eliminado en Dreamweaver CC y versiones posteriores.Ms temas de ayudaIntroduccin a la ventana de documento

Avisos legales | Poltica de privacidad en lnea

37

Uso de barras de herramientas, inspectores y mens contextuales

Volver al principio

Volver al principio

Volver al principio

Visualizacin de barras de herramientasUso del inspector de propiedadesUtilizacin de mens contextuales

Visualizacin de barras de herramientasUtilice las barras de herramientas Documento y Estndar para realizar operaciones relacionadas con documentos y de edicin estndar, la barrade herramientas Programacin para insertar cdigo rpidamente y la barra de herramientas Representacin de estilos para mostrar la pgina tal ycomo aparecera en diferentes tipos de soportes. Si lo desea, puede seleccionar la opcin de mostrar u ocultar las barras de herramientas.

Seleccione Ver > Barras de herramientas y, despus, seleccione la barra de herramientas que desee.Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en cualquiera de lasbarras de herramientas en el men contextual.Nota: Para mostrar u ocultar la barra de herramientas Programacin en el inspector de cdigo (Ventana > Inspector de cdigo), debeseleccionar la barra de herramientas Programacin del men emergente Ver opciones situado en la parte superior del inspector.

Uso del inspector de propiedadesEl inspector de propiedades permite examinar y editar las propiedades ms comunes del elemento de pgina seleccionado, como texto o unobjeto insertado. El contenido del inspector de propiedades es distinto en funcin del elemento o elementos seleccionados.

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

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

Visualizacin y ocultacin del inspector de propiedades Seleccione Ventana > Propiedades.

Ampliacin o contraccin del inspector de propiedades Haga clic en la flecha de ampliacin, situada en la esquina inferior derecha del inspector de propiedades.

Visualizacin y cambio de las propiedades de un elemento de pgina1. 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 que desee en el inspector de propiedades.Nota: Para informacin sobre propiedades especficas, seleccione un elemento en la ventana de documento y, a continuacin, haga clic enel 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.

Utilizacin de mens contextualesLos mens contextuales proporcionan acceso rpido a los comandos y las propiedades ms tiles relacionados con la ventana o el objeto con elque est trabajando. En los mens contextuales slo aparecen los comandos pertinentes para la seleccin actual.

1. Haga clic con el botn derecho del ratn (Windows) o haga clic mientras presiona la tecla Control (Macintosh) en el objeto o ventana.2. Seleccione un comando en el men contextual.

38

Ms temas de ayudaIntroduccin a la barra de herramientas Documento

Configuracin de las propiedades de texto en el inspector de propiedades

Avisos legales | Poltica de privacidad en lnea

39

Uso del panel Insertar

Nota:

Ir al principio

Nota:

Ir al principio

Ir al principio

El panel Insertar contiene botones para crear e insertar objetos como tablas e imgenes. Los botones estn organizados en categoras.

Visualizacin u ocultacin del panel InsertarVisualizacin de los botones de una categora determinadaVisualizacin del men emergente de un botnInsercin de un objetoOmisin del cuadro de dilogo de insercin de objetos e insercin de un objeto marcador de posicin vacoModificacin de las preferencias del panel InsertarAdicin, eliminacin o administracin de archivos en la categora Favoritos del panel InsertarInsercin de objetos mediante los botones de la categora FavoritosVisualizacin del panel Insertar como barra Insertar horizontalConversin de la barra Insertar horizontal en un grupo de panelesVisualizacin de las categoras de la barra Insertar horizontal en forma de fichasVisualizacin de las categoras de la barra Insertar horizontal en forma de men

La interfaz de usuario se ha simplificado en Dreamweaver CC y versiones posteriores. Como resultado, es posible que no encuentrealgunas de las opciones que se describen en este artculo en Dreamweaver CC y versiones posteriores. Para obtener ms informacin, consulteeste artculo.

Visualizacin u ocultacin del panel InsertarSeleccione Ventana > Insertar.

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

Visualizacin de los botones de una categora determinadaSeleccione el nombre de la categora del men emergente Categora. Por ejemplo, para mostrar los botones para la categora Diseo,seleccione Diseo.

Visualizacin del men emergente de un botnHaga clic en la flecha abajo, situada junto al icono del botn.

40

Ir al principio

Nota:

Ir al principio

Nota:

Ir al principio

Ir al principio

Panel Insertar en Dreamweaver CC

Insercin de un objeto1. Seleccione la categora adecuada del 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 Vistade 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 unarchivo o se especifiquen los parmetros del objeto. Otra posibilidad es que Dreamweaver inserte cdigo en el documento o abra unpanel 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,