PDF de programación - Ayuda de Adobe Dreamweaver CC

Ayuda de Adobe® Dreamweaver® CC

Es posible que algunos vínculos redirijan a contenido en inglés.

Junio 2014

Novedades

1 Resumen de las nuevas funciones
Versión 2014 de Dreamweaver CC

La nueva versión 2014 de Dreamweaver CC incluye varias mejoras en la Vista en vivo y el Diseñador de CSS para ayudarle a crear y actualizar
contenido móvil y Web de forma sencilla. La nueva función Vista rápida de elementos le ayuda a ver, desplazar y editar rápidamente el formato
HTML.

Este artículo presenta las siguientes nuevas funciones y otras mejoras, y proporciona vínculos a recursos para obtener más ayuda y cursos de
aprendizaje.

Novedades y cambios
Vista rápida de elementos
Nuevas funciones de edición de la Vista en vivo
Inserción en la Vista en vivo
Mejoras en el Diseñador de CSS
Compatibilidad con conexiones SFTP utilizando el archivo de identidad
Mejoras en Deshacer/Rehacer
Cambios en los flujos de trabajo de Business Catalyst y PhoneGap Build
Cambios en el acceso a extensiones para Dreamweaver
Cambios en la sincronización de configuración
Envío de errores o solicitudes de funciones directamente desde Dreamweaver
Centro de Ayuda
Cambios en el menú Ayuda

Vista rápida de elementos
Revise el formato del documento con la nueva Vista rápida de elementos, que genera un árbol HTML interactivo para el contenido estático y
dinámico. Modifique la estructura estática de contenido en el propio árbol HTML.

Ir al principio

Vista rápida de elementos



2 Se ha incluido la Vista rápida de elementos (Ver > Vista rápida de elementos) para ayudarle a agilizar el proceso de desarrollo. En versiones
anteriores de Dreamweaver, había que resaltar los elementos HTML en la Vista en vivo, cambiar a la vista Código y editar los elementos.
Después de editarlos, había que volver a la Vista en vivo para previsualizar los cambios. Ahora, con la Vista rápida de elementos, puede ver
todos los elementos de la página en una sola y práctica vista, y editar el contenido estático.

Para obtener más información, consulte Vista rápida de elementos.

Nuevas funciones de edición de la Vista en vivo
Inspeccione y modifique las propiedades de los elementos HTML desde la propia Vista en vivo y compruebe el resultado sin necesidad de
actualizar la página.

Ir al principio

Inspector de propiedades de visualización rápida
Visualización de elementos
Edición dinámica de texto
Inspector de propiedades de la Vista en vivo

Inspector de propiedades de visualización rápida
La Vista en vivo muestra ahora el Inspector de propiedades de visualización rápida para los elementos HTML de las páginas. Dependiendo del
elemento HTML que seleccione, el Inspector de propiedades de visualización rápida permite editar atributos o texto directamente en la Vista en
vivo.

Inspector de propiedades de visualización rápida para editar atributos de imagen



Inspector de propiedades de visualización rápida para dar formato al texto



Para obtener más información, consulte el Inspector de propiedades de visualización rápida.

Visualización de elementos
Con la nueva Visualización de elementos, ahora puede asociar elementos HTML con clases e ID directamente en la Vista en vivo. La
Visualización de elementos muestra las clases y los ID disponibles para ayudarle a visualizar y a elegir la opción necesaria.

3 Visualización de elementos para editar clases e ID



Para obtener más información, consulte Asociación de elementos HTML con clases e ID.

Edición dinámica de texto
Ahora 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 edición. Para obtener más información, consulte Edición de
texto directamente en la Vista en vivo.

Edición de texto directamente en la Vista en vivo



Inspector de propiedades de la Vista en vivo
El Inspector de propiedades ahora está disponible en la Vista en vivo para poder editar rápidamente la página sin cambiar a la vista Diseño o la
vista Código.

Para obtener más información, consulte el Inspector de propiedades de la Vista en vivo.

Inspector de propiedades de la Vista en vivo



Inserción en la Vista en vivo
En esta versión, puede insertar elementos HTML directamente en la Vista en vivo mediante el panel Insertar. Los elementos se insertan en tiempo

Ir al principio

4 real sin necesidad de cambiar los modos. También puede obtener una vista previa de los cambios de inmediato.

Para obtener más información, consulte Inserción de elementos directamente en la Vista en vivo.

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



Mejoras en el Diseñador de CSS

Ir al principio

Interfaz de usuario mejorada para el control de bordes
Un control con fichas que ayuda a definir todas las propiedades de los cuatro bordes de forma fácil e intuitiva.

Control con fichas para no ver todos los valores a la vez y reducir la confusión.
Iconos intuitivos y prácticos 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 más 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 más información, consulte Definir las propiedades de los bordes.

Copia y pegado de estilos
Ahora puede copiar estilos de un selector y pegarlos en otro. Puede copiar todos los estilos o copiar solamente categorías específicas de
estilos, como diseños, textos y bordes.

Haga clic con el botón derecho en un selector y elija entre las opciones disponibles:

Copia de estilos con el Diseñador de CSS



Si un selector no tiene ningún 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 estilos
están disponibles.
Es posible pegar estilos que ya existen parcialmente en un selector (superposición). Se pega la unión de todos los selectores.
La copia y el pegado de estilos también funcionan para diferentes vínculos de archivos CSS: estilos importados, vinculados y en línea
.

Cuadros de texto de edición rápida
Dreamweaver incluye ahora cuadros de texto de edición rápida en los que puede especificar el código de la forma abreviada de las propiedades
como margen, relleno, borde y radio del borde. Este cambio se ha realizado para los usuarios que prefieren especificar un código a utilizar el
ratón o el teclado para especificar propiedades.

6



Mejoras en el flujo de trabajo de las propiedades personalizadas
Anteriormente, había que hacer clic en + en el panel Propiedades del Diseñador de CSS para añadir "Otras" propiedades (o propiedades
personalizadas). 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 añadir filas adicionales de propiedades personalizadas, pulse Tabulador.
El nombre del grupo de propiedades "Otras" se ha cambiado cambia a "Personalizadas".



7 Métodos abreviados de teclado
Ahora puede añadir o eliminar selectores y propiedades de CSS mediante métodos abreviados de teclado. También puede desplazarse entre los
grupos de propiedades en el panel Propiedades.

Método abreviado

Flujo de trabajo

CTRL + Alt +[Mayús =]

CTRL + Alt+ S

CTRL + Alt +[Mayús =]

CTRL + Alt+ P

Seleccionar + Supr
CTRL + Alt + (RePág/AvPág)

Añade un selector (si el control está en la sección del selector).
Añade un selector (si el control está en cualquier lugar de la
aplicación).
Añade una propiedad (si el control está en la sección de la
propiedad).
Añade una propiedad (si el control está en cualquier lugar de la
aplicación).
Elimina el selector si está seleccionado.
Cambia de sección en el subpanel de propiedades.

Selectores más específicos/menos específicos
Con esta versión, Dreamweaver ofrece un máximo de tres (o menos) sugerencias de reglas mientras añade un selector. Puede hacer que sea
más o menos específico con la tecla de flecha arriba o flecha abajo.

Selectores Más específico/Menos específico



Desplazarse a la categoría
Anteriormente, al hacer clic en las categorías Fondo u Otro en la parte superior del panel Propiedades del Diseñador de CSS, estas categorías se
hacían "visibles" en el panel. En realidad las categorías no se mostraban en la parte superior del panel.
Ahora, las categorías Fondo y Otro (cuyo nombre ha cambiado a Personalizado) se muestran en la parte superior del panel cuando se hace clic
en ellas.

8

Compatibilidad con conexiones SFTP utilizando el archivo de identidad
Ahora puede autenticar conexiones en un servidor SFTP con una "clave de identidad" (con o sin una frase de contraseña).
Nota:

Dreamweaver solo admite archivos de clave OpenSSH.

Ir al principio

Para obtener más información, consulte Conexiones SFTP.

Mejoras en Deshacer/Rehacer
Hasta ahora, para deshacer/rehacer una operación realizada en el panel Diseñador de CSS, había que hacer clic en el archivo CSS (en archivos
relacionados) y, a continuación, deshacer/rehacer la operación.

Ir al principio

Con las mejoras introducidas en la función de deshacer/rehacer, puede deshacer/rehacer una operación directamente en la Vista en vivo de un
documento o en el panel Diseñador de CSS. Estos cambios se reflejarán automáticamente en el archivo CSS asociado. Para indicar que el
archivo relacionado ha cambiado, la ficha del archivo correspondiente se resalta aproximadamente 8 segundos.

Al deshacer/rehacer una acción en el panel Diseñador de CSS, la Vista en vivo se actualiza automáticamente.
Cuando se edita el documento utilizando el código fuente y se deshace