Seleccione la tabla para ver la Visualización de elementos con el icono de sándwich.
Versiones de 2015 de Dreamweaver CC
Las versiones de Dreamweaver CC 2015.1, 2015.2, y 2015.3 ofrecen una experiencia innovadora en todo lo relacionado con el diseño y la creación de sitios web en Dreamweaver. Ahora, se puede acceder a las Bibliotecas Creative Cloud y a Adobe Stock desde el mismo Dreamweaver a fin de integrar los elementos de diseño y los estilos de las aplicaciones de escritorio y móviles de Adobe, así como imágenes y vídeos de gran calidad. Las funciones de colaboración de Creative Cloud proporcionan un flujo de trabajo sencillo entre diseñadores y desarrolladores.
Además, esta versión incluye varias mejoras realizadas en el panel DOM, el diseño web interactivo, Extract, las funciones de edición de la Vista en vivo y en diferentes áreas solicitadas por otros usuarios como usted. En este artículo se presentan estas nuevas funciones y mejoras, y se proporcionan vínculos a recursos para obtener más ayuda y formación.
Esta versión de Dreamweaver incluye una corrección del problema que aparecía con los equipos de Windows, que provocaba que el equipo no pudiera entrar en suspensión en el caso de que Dreamweaver se estuviera ejecutando (problema del temporizador de reactivación).
Para obtener más información, consulte El equipo no puede entrar en suspensión si se está ejecutando Dreamweaver | Windows.
Novedades
Gracias a la compatibilidad con selecciones múltiples, la edición de etiquetas, las clases y los ID, así como con la inserción de nuevos elementos, ahora podrá diseñar la mayor parte de las páginas web utilizando solo el panel DOM.
A continuación se proporciona más información sobre estas mejoras realizadas en el panel DOM:
Ahora puede seleccionar varias etiquetas en el panel DOM de un documento para editar o realizar otras operaciones en varias etiquetas de forma simultánea.
Al seleccionar varios elementos en el panel DOM:
Ahora puede editar etiquetas, clases e ID haciendo doble clic sobre estos elementos en el panel DOM. También puede añadir clases o ID adicionales separándolos con un espacio. Para las etiquetas no asociadas a ninguna clase o ID, puede escribir el nombre de la clase o del ID tras hacer doble clic en la etiqueta.
Las sugerencias de código aparecen cuando comienza a escribir la etiqueta, la clase o el ID. Para limitar las sugerencias a las clases, comience a escribir con un punto. Para ver solo los ID en las sugerencias, comience a escribir con una almohadilla (#).
Para quitar una etiqueta, haga clic con el botón derecho del ratón en el panel DOM y seleccione Quitar etiqueta.
Ahora puede insertar elementos nuevos en su página web mediante el panel DOM, de una de las siguientes maneras:
Al insertar etiquetas utilizando el panel DOM, también se inserta el texto predeterminado (marcador de posición) y los atributos necesarios para las etiquetas:
Cuando se selecciona un nodo en el panel DOM, sus nodos secundarios se muestran en color azul claro.
Si se seleccionan explícitamente nodos secundarios, no se mostrará el resaltado de color azul claro.
Gatekeeper es una función de detección de software malicioso integrada en los Mac OS X 10.7 y posteriores. Esta función comprueba si existen firmas válidas de ID de desarrollador en las aplicaciones antes de que se instalen en el sistema Mac. Sin embargo, Gatekeeper no detecta ni bloquea aplicaciones que se cargan dinámicamente desde las aplicaciones y que tienen firmas válidas. Si compra Dreamweaver a través de fuentes no autorizadas, este defecto de Gatekeeper puede utilizarse para introducir plugins malintencionados en el paquete de instalación de Dreamweaver.
Para evitar las potenciales actuaciones repentinas, Dreamweaver ahora le pedirá que confirme si desea cargar plugins de terceros si está instalado en una ubicación distinta de /Applications.
Para más información, consulte Cómo evitar la actuación inesperada de Gatekeeper.
Dreamweaver ahora está integrado con CEF3 2357. La Vista en vivo puede ahora procesar transiciones,
animaciones y transformaciones 3D de CSS3.
Para más información, consulte /es/Integración con CEF.
Ahora podrá seleccionar una unidad px, em o rem al añadir consultas de medios de comunicación mediante la barra de consultas de medios visuales. Cuando se especifica un valor en una unidad y, posteriormente, se cambia la unidad, el valor se convierte automáticamente a la unidad recién seleccionada.
Para obtener más información, puede ver Consultas de medios visuales.
La etiqueta de la interfaz de usuario "Redimensionar a" del cuadro de diálogo de optimización de imagen se ha cambiado a "Remuestrear a".
Además, cuando se realiza el muestreo de una imagen desde el panel Bibliotecas CC, aparece un control de giro sobre la imagen hasta que esta quede completamente muestreada.
Para obtener más información, consulte Bibliotecas Creative Cloud en Dreamweaver.
Si ha guardado imágenes con licencia, es decir, imágenes de Adobe Stock en las bibliotecas de Creative Cloud, podrá extraerlas como archivos SVG optimizados para la Web en las páginas web de Dreamweaver. Al arrastrar las imágenes desde el panel de bibliotecas de CC a las páginas web, estas se insertan como archivos SVG de manera predeterminada.
Si desea personalizar las propiedades de los archivos SVG, puede editar las preferencias en el archivo options.json.
Para obtener más información, consulte Extracción de ficheros SVG optimizados para la web desde bibliotecas CC.
Se han añadido tres nuevas plantillas de correo electrónico en esta compilación: correo electrónico fluido, correo electrónico híbrido y correo electrónico interactivo.
Para acceder a las plantillas, diríjase a Archivo > Nuevo > Plantillas de inicio > Plantillas de correo electrónico.
A continuación se describen las opciones de edición disponibles actualmente para las tablas en la Vista en vivo:
Para ver estas opciones, active el modo de formato de tabla. Para ello, seleccione la tabla y haga clic en el icono de sandwich en Visualización de elementos. A continuación, seleccione las celdas deseadas y haga clic sobre ellas con el botón derecho.
Ahora puede navegar entre las celdas de una tabla en la Vista en vivo mediante las teclas de flecha izquierda y derecha. Haga clic en una celda de la tabla y pulse la tecla flecha izquierda para ir a la celda anterior o la tecla de flecha derecha para ir a la siguiente celda de la tabla.
La pantalla de bienvenida ha cambiado en esta versión de Dreamweaver:
Novedades
Con la nueva compatibilidad para Bibliotecas Creative Cloud, puede colaborar y compartir los vectores y los temas de color creados con otras herramientas de diseño, como Photoshop, Illustrator u otras aplicaciones móviles. Puede examinar, gestionar y acceder a los activos creativos en cualquier momento, donde los necesite y en los distintos proyectos de Dreamweaver.
Al insertar activos desde Bibliotecas Creative Cloud, puede elegir mantener el vínculo entre el activo y la fuente para que los activos estén actualizados en todo momento.
El nuevo panel Bibliotecas CC de Dreamweaver le ayuda a ver los activos en sus bibliotecas Creative Cloud y a insertarlos en sus páginas web. Puede insertar los activos en la Vista en vivo o en la Vista de código mediante sugerencias para el código.
Para obtener información más detallada, consulte Bibliotecas Creative Cloud en Dreamweaver.
La integración con Adobe Stock le permite descargar imágenes, gráficos vectoriales y vídeos libres de derechos directamente en las Bibliotecas Creative Cloud, así como administrar y reutilizar su contenido de Adobe Stock desde Dreamweaver.
Encuentre las imágenes, vectores y vídeos de Adobe Stock que necesita para darle un matiz visual atractivo a su página web mientras trabaja en Dreamweaver.
La versión de Bootstrap utilizada en Dreamweaver se ha actualizado a la versión 3.3.5. Como resultado, los componentes, fragmentos y plantillas de inicio de Bootstrap son los de la versión 3.3.5.
La versión de jQuery también se ha actualizado a la versión 1.11.3.
Además de las funciones Añadir columna/Añadir fila disponibles para los documentos de Bootstrap en la Vista en vivo, ahora Dreamweaver también le permite duplicar filas y columnas.
Para duplicar una fila o una columna seleccionada, haga clic en el icono Duplicar () que aparece en la esquina inferior derecha. La fila o la columna entera se duplicará, junto con todo su contenido.
la opción Añadir fila o Añadir columna duplica la fila o la columna con las clases, pero sin el contenido.
Tanto si crea un documento de Bootstrap desde el cuadro de diálogo Nuevo documento como si lo hace a partir de una plantilla de inicio, el flujo de trabajo es fluido e impecable. Los cuadros de diálogo “Copiar archivos dependientes” y “Sobrescribir archivos existentes” ya no se muestran, a diferencia de las versiones anteriores de Dreamweaver.
Al crear y guardar un documento de Bootstrap en una ubicación específica, los archivos dependientes también se guardan automáticamente en la misma ubicación.
Ahora, Dreamweaver resalta las consultas de medios asociadas al tamaño de las ventanas gráficas que se estén usando, de modo que pueda identificarlas rápidamente. El resaltado se indica con unas flechas más oscuras y un fondo oscuro que señalan los valores de los puntos de corte de las consultas de medios.
Ahora, al hacer clic en + en la barra de consulta de medios visuales, Dreamweaver no le indicará que haga clic en las opciones de max-width o min-width, sino que mostrará inmediatamente una ventana emergente para añadir una consulta de medios.
Además, la opción de max-width ya está seleccionada de forma predeterminada en la ventana emergente. Se ha introducido una lista desplegable que permite cambiar la opción a min-width o min-max.
Ahora, puede editar los valores de las consultas de medios haciendo doble clic en los valores de los puntos de corte que aparecen en la barra de consulta de medios visuales. Al hacer doble clic en el valor de un punto de corte, se muestra un borde naranja, y el punto de inserción aparece dentro del borde.
Tras introducir los nuevos valores (en píxeles), pulse Intro o Retorno para confirmar los cambios, o bien pulse Escape para descartarlos.
La opción Ir a código del menú contextual de la consulta de medios visuales ahora muestra el número de la línea de código, para facilitarle su relación con el código correspondiente.
Ahora, puede abrir archivos PSD con varias mesas de trabajo en el panel Extract de Dreamweaver para extraer los activos. Cada mesa de trabajo se muestra en el panel Capas en forma de carpeta. Para ver u ocultar el contenido, solo tiene que expandir o contraer la carpeta.
Para aumentar una mesa de trabajo específica, simplemente haga clic en el nombre de la misma.
Haga doble clic en “AJUSTAR”, que aparece en el encabezado del panel, para reducir la mesa de trabajo y ajustar el archivo PSD a la vista actual.
Ahora, al extraer CSS de un archivo PSD que tenga la propiedad Sombra paralela, la propiedad se extrae como box-shadow en CSS.
Hay muchas situaciones en las que se crean varios estilos de capa dentro de un archivo PSD que sí funcionan de forma individual, pero no en conjunto. Extract se encarga de comprobar tales casos y le proporciona sugerencias para trabajar con los estilos de capas que no sean compatibles.
Extract detecta los siguientes casos:
Cuando Extract detecta estos casos, muestra un icono de advertencia en la miniatura de la capa incluida en el panel Extract. También muestra el siguiente mensaje en la ventana emergente de la miniatura de la capa y en el CSS de la capa:
“La capa contiene varios estilos de capa que no se pueden representar en CSS”. Utilice el selector de color o extraiga la capa como una imagen”.
Asimismo, en los casos en los que un color de fondo semitransparente se superponga a otro color de fondo (situaciones 2 y 3 mencionadas anteriormente), los valores de todos los colores de fondo se muestran en el archivo CSS. Seguidamente, podrá extraer el valor que necesite.
Selección de filas o columnas con un solo clic
Ahora es posible seleccionar filas y columnas de una tabla en la Vista en vivo con un solo clic. Se ha introducido un nuevo icono de flecha (similar al de la Vista de diseño) sobre el cual es posible hacer clic para seleccionar una fila o una columna.
Seleccione la tabla para ver la Visualización de elementos con el icono de sándwich.
Haga clic en el icono de sándwich para entrar en el modo de formato de tabla.
Pase el ratón sobre la fila o columna que desea seleccionar. Coloque el ratón sobre el borde de la fila o columna para mostrar una flecha que le indicará que puede hacer clic para realizar la selección.
Haga clic para seleccionar la fila o la columna.
Continúe con la edición de la fila o la columna según sea necesario mediante el menú contextual.
Selección de varias celdas mediante arrastre
Ahora puede seleccionar varias celdas, filas o columnas mediante arrastre. Haga clic en una celda y arrástrela a lo largo de varias celdas, filas o columnas para seleccionarlas.
Seleccione la tabla para ver la Visualización de elementos con el icono de sándwich.
Haga clic en el icono de sándwich para entrar en el modo de formato de tabla.
Arrastre y seleccione las filas y columnas necesarias.
Continúe con la edición de la fila o la columna según sea necesario mediante el menú contextual.
Eliminación de filas o columnas mediante la tecla Eliminar
Ahora puede eliminar filas o columnas seleccionándolas y pulsando la tecla Eliminar/Retroceso.
Ahora puede utilizar el Inspector rápido de propiedades para texto en la Vista en vivo para dar formato y añadir sangrías e hipervínculos a su texto rápidamente. El Inspector rápido de propiedades de texto se muestra al hacer clic en el icono de sándwich de los elementos de texto: h1-h6, pre y p.
En los documentos de Bootstrap, el Inspector rápido de propiedades para texto también le permite alinear y transformar los elementos de texto.
El Inspector rápido de propiedades para imágenes ahora incluye diferentes opciones para personalizar las imágenes de los documentos de Bootstrap.
Adobe proporciona actualizaciones constantemente para conseguir que Dreamweaver evolucione al ritmo del creciente desarrollo tecnológico. Ejemplos de estas actualizaciones son las bibliotecas de Bootstrap o las plantillas de inicio.
Puede descargar e instalar las actualizaciones integradas de forma automática o manual. También puede desactivar las actualizaciones integradas, o desinstalarlas y hacer que Dreamweaver se restituya a su último estado de instalación o actualización mediante la aplicación de escritorio Adobe Creative Cloud. El cuadro de diálogo de preferencias de Dreamweaver le permite especificar el modo de actualizar, desactivar o restituir las actualizaciones integradas.
Para obtener más información sobre las actualizaciones de la aplicación, consulte Actualizaciones integradas.
En la versión anterior (Dreamweaver CC 2015), se incorporó la inclusión automática de los archivos en el servidor de prueba para mejorar la experiencia de edición de los documentos dinámicos en la Vista en vivo. Por demanda popular, ahora se ha introducido una nueva preferencia en el cuadro de diálogo Configuración del sitio que permite a los usuarios desactivar esta función.
Para obtener información detallada, consulte Desactivar la inclusión automática de los archivos dinámicos.
Se ha vuelto a incorporar la contracción de los bloques de código seleccionados. Ahora, tendrá las siguientes opciones a su alcance:
Haga clic en “-” para contraer el código. Para ampliar la sección de código contraída, haga clic en “+”.
Para obtener más información sobre cómo contraer código, consulte Contraer código.
Ahora, puede reorganizar los selectores del panel Selectores arrastrándolos a la ubicación deseada dentro del propio panel.
Al contraer o ampliar los paneles del Diseñador de CSS, los tamaños de los mismos se conservan durante el resto de una misma sesión. Los paneles Fuentes y Medios se mantienen en los tamaños personalizados hasta que los vuelva a modificar.
El panel Propiedades del Diseñador de CSS se ha desactivado para los archivos de Bootstrap en los que los estilos se hayan definido en archivos CSS de Bootstrap y sean de solo lectura.
si desea modificar los estilos del documento de Bootstrap, cree otro archivo CSS que sobrescriba los estilos existentes y adjúntelo al documento.
Ahora, las acciones de deshacer y rehacer se pueden limitar solo a los documentos activos.
Las acciones de deshacer y rehacer afectan de forma predeterminada al documento activo y todos los archivos relacionados, como los archivos CSS asociados. Al limitar las acciones de deshacer al documento activo, tanto las acciones de deshacer como de rehacer se aplicarán exclusivamente a los cambios realizados en el archivo seleccionado. Por ejemplo, si está trabajando en un archivo HTML, las acciones de deshacer y rehacer solo afectarán a los cambios que realice en ese archivo HTML, y no en los archivos CSS relacionados. Para deshacer o rehacer los cambios que haya implementado en un archivo CSS relacionado, tendrá que cambiar al archivo CSS antes de deshacer o rehacer.
Si está trabajando en la Vista en vivo o en la Vista de diseño, las acciones de deshacer o rehacer se aplicarán solo a los cambios que afecten al código HTML. Digamos que está editando una página de Bootstrap en la Vista en vivo. A continuación, edita texto y cambia el tamaño de una consulta de medios en la barra de consulta de medios visuales. En este caso, solo podrá deshacer la edición del texto, pero no los cambios realizados en la consulta de medios, ya que dichos cambios se ubican en un archivo relacionado, y no en el archivo HTML. Para deshacer los cambios, tendrá que cambiar al archivo CSS relacionado.
Para limitar las acciones de deshacer y rehacer al documento en uso, siga estos pasos:
Haga clic en Edición > Preferencias (Windows) o Dreamweaver > Preferencias (Mac).
En la categoría General, vaya a la sección Opciones de edición y seleccione Limitar las acciones de deshacer al documento actual.
Haga clic en Aplicar y, luego, en Cerrar para cerrar el cuadro de diálogo Preferencias.
Reinicie Dreamweaver para que los cambios surtan efecto.
Ahora, puede copiar una etiqueta del panel DOM de un documento y pegarla en el panel DOM de otro documento a través del menú contextual del panel.
solo las etiquetas que se copien del panel DOM se pueden pegar en otro panel DOM. Si copia una etiqueta de la Vista en vivo, solo la podrá pegar en la Vista en vivo, y no en el panel DOM.
Guías de nuevas funciones: las novedades flotantes y las sugerencias contextuales de funciones aparecen automáticamente la primera vez que se inicia Dreamweaver después de haberlo actualizado. Las novedades flotantes le ayudan a descubrir las nuevas funciones incluidas en la versión más reciente de la aplicación, mientras que las sugerencias contextuales de funciones le muestran los nuevos flujos de trabajo y las mejoras de las funciones.
Las veces siguientes que inicie Dreamweaver, se omitirán las guías de las nuevas funciones y no se mostrarán de forma predeterminada. No obstante, si quiere volver a verlas, puede dirigirse a las preferencias de Dreamweaver y usar la opción Restablecer.
Vaya a Ayuda > Restablecer guías de las nuevas funciones. Aparecerá el cuadro de diálogo Preferencias.
Restablezca las novedades flotantes o las sugerencias contextuales de funciones según necesite.
Cierre las Preferencias y salga de Dreamweaver.
Reinicie Dreamweaver. Ahora, las guías de las nuevas funciones volverán a mostrarse.
Ahora, Dreamweaver se ha actualizado para utilizar el nuevo servicio de validación para HTML5 de W3C: https://validator.w3.org/nu/ El servicio de validación anterior, validator.w3.org, ha quedado obsoleto.
El nuevo servicio de validación solo admite los siguientes analizadores sintácticos:
Valor |
Descripción |
ninguno |
La elección del analizador sintáctico de HTML o XML se basa en el tipo de contenido. |
xml |
Analizador sintáctico de XML: no cargará entidades externas. |
xmldtd |
Analizador sintáctico de XML: cargará entidades externas. |
html |
Analizador sintáctico de HTML: la configuración se basa en el tipo de documento (doctype). |
html5 |
Analizador sintáctico de HTML en modo HTML5. |
html4 |
Analizador sintáctico de HTML en modo HTML4 estricto. |
html4tr |
Analizador sintáctico de HTML en modo HTML4 de transición. |
Al igual que en las versiones anteriores de Dreamweaver, aún se puede especificar el analizador sintáctico alternativo que Dreamweaver puede elegir si no es capaz de identificar el analizador sintáctico según el tipo de contenido del documento o DTD. Con el nuevo validador, solo ha cambiado la lista de analizadores sintácticos disponibles.
Para obtener más información, consulte Validar documentos con el validador de W3C.
El panel Activos muestra todos los activos de SVG del sitio de Dreamweaver asociado al documento actualmente activo. Al igual que cualquier otro activo del panel Activos, puede realizar distintas acciones en los activos SVG como, por ejemplo, editar, asignar direcciones URL o volver a utilizar activos en documentos y sitios.
El aumento/reducción de tamaño en la Vista de diseño mediante las acciones siguientes ya no está disponible en Dreamweaver:
Windows:
Mac:
No se han producido cambios en el resto de métodos de aumento/reducción del tamaño de un documento: Cmd/Ctrl++ o Cmd/Ctrl+-, y aplicar zoom desde el menú Ver > Nivel de aumento.
La opción Código y En vivo/Código y Diseño ha pasado a denominarse 'Dividir' en el menú Ver y tiene el mismo comportamiento que en la barra de herramientas Documento.
Gracias a las múltiples mejoras de rendimiento en la función de sincronización de configuración, ahora puede sincronizar las configuraciones entre las instancias de Dreamweaver y Creative Cloud con mayor rapidez que nunca.
El antiguo panel Estilos CSS se ha eliminado de Dreamweaver y, como resultado, las API asociadas al mismo también se han eliminado.
Las siguientes API básicas siguen estando disponibles:
De ahora en adelante, las siguientes API no serán compatibles:
Inicia sesión en tu cuenta