Guía del usuario Cancelar

Entorno de programación en Dreamweaver

  1. Guía del usuario de Dreamweaver
  2. Introducción
    1. Conceptos básicos sobre diseño web adaptable
    2. Novedades de Dreamweaver
    3. Desarrollo web con Dreamweaver: información general
    4. Dreamweaver / Preguntas frecuentes
    5. Métodos abreviados de teclado
    6. Requisitos del sistema para Dreamweaver
    7. Resumen de funciones
  3. Dreamweaver y Creative Cloud
    1. Sincronizar la configuración de Dreamweaver con Creative Cloud
    2. Bibliotecas Creative Cloud en Dreamweaver
    3. Uso de archivos de Photoshop en Dreamweaver
    4. Trabajar con Adobe Animate y Dreamweaver
    5. Extraer archivos SVG optimizados para la Web desde bibliotecas
  4. Espacios de trabajo y vistas de Dreamweaver
    1. El espacio de trabajo de Dreamweaver
    2. Optimización del espacio de trabajo de Dreamweaver para la implementación visual
    3. Buscar archivos por nombre de archivo o contenido | Mac OS
  5. Configuración de sitios
    1. Acerca de los sitios de Dreamweaver
    2. Configuración de una versión local del sitio
    3. Conectar con servidores de publicación
    4. Configuración de un servidor de prueba
    5. Importación y exportación de la configuración de un sitio de Dreamweaver
    6. Traer sitios web existentes desde un servidor remoto a la raíz del sitio local
    7. Funciones de accesibilidad en Dreamweaver
    8. Ajustes avanzados
    9. Configuración de las preferencias de sitio para transferir archivos
    10. Especificación de la configuración del servidor proxy en Dreamweaver
    11. Sincronizar la configuración de Dreamweaver con Creative Cloud
    12. Uso de Git en Dreamweaver
  6. Administrar archivos
    1. Creación y apertura de documentos
    2. Administración de archivos y carpetas
    3. Carga de archivos al servidor y descarga desde el mismo
    4. Desprotección y protección de archivos
    5. Sincronizar archivos
    6. Comparación de archivos para detectar diferencias
    7. Ocultación de archivos y carpetas en el sitio de Dreamweaver
    8. Activación de Design Notes para sitios de Dreamweaver
    9. Prevención de la posible actuación repentina de Gatekeeper
  7. Maquetación y diseño
    1. Usar ayudas visuales al diseñar
    2. Información sobre el uso de CSS para diseñar la página
    3. Diseño de sitios web interactivos con Bootstrap
    4. Creación y uso de consultas de medios en Dreamweaver
    5. Presentación de contenido en tablas
    6. Colores
    7. Diseño interactivo mediante diseños de cuadrícula fluida
    8. Extract en Dreamweaver
  8. CSS
    1. Aspectos básicos de las hojas de estilos en cascada
    2. Diseño de páginas con el Diseñador de CSS
    3. Uso de preprocesadores de CSS en Dreamweaver
    4. Configuración de las preferencias de estilos CSS en Dreamweaver
    5. Mover reglas CSS en Dreamweaver
    6. Conversión de CSS en línea en una regla CSS en Dreamweaver
    7. Uso de etiquetas div
    8. Aplicación de degradados al fondo
    9. Creación y edición de efectos de transición de CSS3 en Dreamweaver
    10. Formatear código
  9. Contenido de página y activos
    1. Definición de las propiedades de la página
    2. Configuración de propiedades de encabezado CSS y propiedades de vínculo CSS
    3. Uso de texto
    4. Buscar y reemplazar texto, etiquetas y atributos
    5. Panel DOM
    6. Editar en la Vista en vivo
    7. Codificación de documentos en Dreamweaver
    8. Selección y visualización de elementos de la ventana de documento
    9. Configuración de las propiedades de texto en el inspector de propiedades
    10. Revisión ortográfica de una página web
    11. Uso de las reglas horizontales en Dreamweaver
    12. Añadir y modificar combinaciones de fuentes en Dreamweaver.
    13. Trabajo con activos
    14. Inserción y actualización de fechas en Dreamweaver
    15. Creación y gestión de activos favoritos en Dreamweaver
    16. Insertar y editar imágenes en Dreamweaver
    17. Adición de objetos multimedia
    18. Adición de vídeos en Dreamweaver
    19. Insertar vídeo HTML5
    20. Insertar archivos SWF
    21. Adición de efectos de sonido
    22. Insertar audio HTML5 en Dreamweaver
    23. Trabajar con elementos de bibliotecas
    24. Uso de texto árabe y hebreo en Dreamweaver
  10. Establecimiento de vínculos y navegación
    1. Acerca del establecimiento de vínculos y la navegación
    2. Vinculación
    3. Mapas de imágenes
    4. Vínculos de solución de problemas
  11. Widgets y efectos de jQuery
    1. Uso de interfaz de usuario y widgets móviles de jQuery en Dreamweaver
    2. Uso de efectos jQuery en Dreamweaver
  12. Programación de sitios web
    1. Acerca de la programación en Dreamweaver
    2. Entorno de programación en Dreamweaver
    3. Configuración de las preferencias de programación
    4. Personalización de los colores del código
    5. Escritura y edición de código
    6. Sugerencias de código y completado de código
    7. Contraer y expandir código
    8. Reutilizar código con fragmentos
    9. Depuración de código mediante linting
    10. Optimización del código
    11. Edición de código en Vista de diseño
    12. Trabajo con el contenido de Head para páginas
    13. Inserción del lado del servidor incluida en Dreamweaver
    14. Uso de bibliotecas de etiquetas en Dreamweaver
    15. Importación de etiquetas personalizadas a Dreamweaver
    16. Uso de comportamientos de JavaScript (instrucciones generales)
    17. Aplicación de comportamientos JavaScript incorporados
    18. Acerca de XML y XSLT
    19. Realización de transformaciones XSL del lado del servidor en Dreamweaver
    20. Realización de transformaciones XSL en el lado del cliente en Dreamweaver
    21. Adición de entidades de caracteres para XSLT en Dreamweaver
    22. Formatear código
  13. Flujos de trabajo de varios productos
    1. Instalación y uso de extensiones para Dreamweaver
    2. Actualizaciones integradas en Dreamweaver
    3. Insertar documentos de Microsoft Office en Dreamweaver (solo Windows)
    4. Trabajo con Fireworks y Dreamweaver
    5. Edición de contenido en sitios de Dreamweaver con Contribute
    6. Integración de Dreamweaver Business Catalyst
    7. Crear campañas de correo electrónico personalizado
  14. Plantillas
    1. Acerca de las plantillas de Dreamweaver
    2. Reconocimiento de plantillas y documentos basados en plantillas
    3. Crear una plantilla de Dreamweaver
    4. Crear regiones editables en plantillas
    5. Creación de tablas y regiones repetidas en Dreamweaver
    6. Usar regiones opcionales en plantillas
    7. Definición de atributos de etiqueta editables en Dreamweaver
    8. Creación de plantillas anidadas en Dreamweaver
    9. Edición, actualización y eliminación de plantillas
    10. Exportar e importar contenido xml en Dreamweaver
    11. Aplicación o eliminación de una plantilla de un documento existente
    12. Edición de contenido en plantillas de Dreamweaver
    13. Reglas de sintaxis de etiquetas de plantilla en Dreamweaver
    14. Configuración de preferencias de resaltado en regiones de plantillas
    15. Ventajas de usar plantillas en Dreamweaver
  15. Móvil y multipantalla
    1. Creación de consultas de medios
    2. Cambio de la orientación de página para dispositivos móviles
    3. Creación de aplicaciones web para dispositivos móviles con Dreamweaver
  16. Sitios, páginas y formularios web dinámicos
    1. Aspectos básicos de las aplicaciones web
    2. Configuración del ordenador para desarrollo de aplicaciones
    3. Solución de problemas de conexiones a bases de datos
    4. Eliminación de secuencias de comandos de conexión en Dreamweaver
    5. Diseñar páginas dinámicas
    6. Introducción a las fuentes de contenido dinámico
    7. Definir fuentes de contenido dinámico
    8. Añadir contenido dinámico a las páginas
    9. Cambio de contenido dinámico en Dreamweaver
    10. Visualización de registros de bases de datos
    11. Proporcionar datos en vivo y solucionar sus problemas en Dreamweaver
    12. Añadir comportamientos de servidor personalizados en Dreamweaver
    13. Crear formularios con Dreamweaver
    14. Uso de formularios para recopilar información de los usuarios
    15. Crear y activar formularios de ColdFusion en Dreamweaver
    16. Crear formularios web
    17. Compatibilidad mejorada con HTML5 para elementos de formulario
    18. Desarrollar un formulario con Dreamweaver
  17. Creación visual de aplicaciones
    1. Creación de las páginas maestra y de detalles en Dreamweaver
    2. Crear páginas de búsqueda y resultados
    3. Crear una página de inserción de registros
    4. Crear una página de actualización de registros en Dreamweaver
    5. Creación de páginas de eliminación de registros en Dreamweaver
    6. Usar comandos ASP para modificar una base de datos en Dreamweaver
    7. Crear una página de registro
    8. Crear una página de inicio de sesión
    9. Creación de una página para acceso exclusivo de usuarios autorizados
    10. Protección de carpetas en ColdFusion con Dreamweaver
    11. Uso de componentes de ColdFusion en Dreamweaver
  18. Prueba, vista previa y publicación de sitios web
    1. Vista previa de páginas
    2. Vista previa de páginas web de Dreamweaver en varios dispositivos
    3. Comprobación del sitio de Dreamweaver

 

Sepa cómo puede usar el entorno de programación en Dreamweaver para escribir código con más rapidez.

Si quiere trabajar con código en Dreamweaver, puede elegir utilizar el espacio de trabajo de desarrollador. Este espacio de trabajo muestra la Vista de código de forma predeterminada, y tiene solo los archivos y los paneles de fragmentos acoplados a la izquierda de la pantalla.

Si necesita más funcionalidades, haga clic en Ventana y, a continuación, elija el panel en cuestión.

Nota:

Si los espacios de trabajo prediseñados no ofrecen exactamente lo que necesita, puede personalizar su diseño. Abra paneles, acóplelos donde desee y, a continuación, guarde el espacio de trabajo como un espacio de trabajo personalizado. Para obtener más información, consulte Creación de espacios de trabajo personalizados.

Trabajo con código en Dreamweaver

En Dreamweaver, puede trabajar con código de varias maneras. Puede utilizar:

Puede moverse entre diferentes vistas haciendo clic en los botones de alternancia entre Código, Dividida y Diseño/En vivo, en la parte superior del espacio de trabajo.

También puede utilizar el inspector de código para mostrar el HTML en una ventana flotante. El inspector de código permite ver el diseño de la página web y el código de forma simultánea, sin tener que dividir la vista por la mitad. Para obtener más información, consulte Visualización de código en una ventana independiente con el inspector de código.

Visualización de código en la ventana de documento: vista de código

Seleccione Ver > Código.

Codificación y edición simultánea de una página en la ventana de documento : vista dividida

  1. Seleccione Ver > Código y diseño.

    El código aparecerá en el panel superior y la página en el inferior.

  2. Para mostrar la página en la parte superior, elija Vista de diseño encima de las opciones de visualización de la barra de herramientas Documento.
  3. Para ajustar el tamaño de los paneles en la ventana de documento, arrastre la barra de separación hasta la posición deseada. La barra de separación se encuentra entre los dos paneles.

    La vista de Código se actualiza automáticamente al realizar cambios en la vista de Diseño. Después de realizar cambios en la vista de código, deberá actualizar manualmente el documento en la vista de diseño; para ello, haga clic en Vista de Diseño o presione F5.

Visualización de código en una ventana independiente con el inspector de código

El Inspector de código le permite trabajar en una ventana de programación independiente, como si trabajara en la vista de Código.

  1. Seleccione Ventana > Inspector de código. La barra de herramientas incluye las siguientes opciones:

    Administración de archivos

    Coloca u obtiene el archivo.

    Vista previa/Depurar en navegador

    Proporciona una vista previa o depura el documento en un navegador.

    Actualizar Vista de diseño

    Actualiza el documento en la vista de Diseño de tal modo que refleje cualquier cambio realizado en el código. Los cambios realizados en el código no aparecerán de forma automática en la vista de Diseño hasta que se efectúen determinadas acciones, como guardar el archivo o hacer clic en este botón.

    Navegación por el código

    Le permite desplazarse rápidamente por el código. Consulte Desplazamiento a una función de JavaScript o VBScript.

    Ver opciones

    Le permite determinar cómo debe mostrarse el código. Consulte Definición del aspecto del código.

Escribir código más rápidamente en Dreamweaver

Vista de código en Dreamweaver ofrece funciones de utilidad para la programación, que ayudan a los diseñadores en la transición al desarrollo en Vista de código, y los programadores experimentados pueden beneficiarse de ayudas visuales, como la sangría automática, el coloreado de código y las fuentes redimensionables, para reducir errores y mejorar la legibilidad.

Estas son algunas de las funciones que ofrece Dreamweaver.

Sugerencias de código y completado de código

La función de sugerencias de código (o completado de código) de Dreamweaver le permite seleccionar etiquetas, atributos y estilos CSS de un menú emergente a medida que escribe. Esta función de completado automático del código le permite codificar con mayor rapidez y con menos errores.

Este es un ejemplo que muestra cómo funciona en HTML. 

Cuanto empiece a escribir “<”, Dreamweaver abrirá un menú emergente con todas las etiquetas HTML disponibles. Conforme siga escribiendo la etiqueta, Dreamweaver actualizará automáticamente las opciones disponibles de código HTML y le permitirá seleccionar una etiqueta aplicable. Cuando pulse Intro, Dreamweaver le insertará automáticamente la etiqueta. A continuación, aparecerá un segundo menú emergente con todas las propiedades disponibles de esa etiqueta.

La ayuda de sugerencias de código también está disponible para CSS, JavaScript y PHP (versiones 5.6 and 7.1 de PHP). 

Para obtener más información, consulte Sugerencias de código y completado de código.

Compatibilidad con las versiones 5.6 y 7.1 de PHP

Dreamweaver admite las versiones 5.6 y 7.1 de PHP. 

Puede elegir compilar los archivos PHP de su sitio con la versión 5.6 o 7.1 de PHP, usando el cuadro de diálogo Configuración del sitio (por separado para cada sitio), o las preferencias de la aplicación (para todos los archivos PHP guardados fuera de los sitios de Dreamweaver). A continuación, Dreamweaver configura las sugerencias de código y comprobaciones de linting (análisis de errores potenciales) para la versión seleccionada de PHP.

Para los nuevos sitios de Dreamweaver, el compilador de PHP predeterminado está establecido en la versión especificada en Editar > Preferencias > PHP.

Para obtener más información sobre la compatibilidad con PHP en Dreamweaver, consulte:

Para obtener información general sobre las versiones 5.6 y 7.1 de PHP, consulte los siguientes recursos:

Sugerencias de código de objeto JavaScript

Dreamweaver admite sugerencias de código de objeto en JavaScript. Dreamweaver proporciona sugerencias de código para objetos básicos de JavaScript, como conjuntos, fechas, números y cadenas. 

Además, Dreamweaver sigue las funciones de JavaScript que se creen y proporciona sugerencias de código utilizando sus propios nombres de función.

Para obtener más información, consulte Sugerencias de código y completado de código.

Refactorización de código JavaScript

Dreamweaver incorpora refactorización de código. La refactorización de código es el proceso de reestructurar código informático existente sin cambiar su comportamiento externo. El código resulta más legible y fácil de entender. La depuración de código permite ahorrar tiempo gracias a una serie de pequeñas funciones y a una sustitución adecuada. Con la refactorización de JavaScript, puede cambiar nombres de funciones y variables siendo consciente del ámbito de actuación.

Para obtener más información, consulte Escribir y editar código.

Coloreado de código para los diferentes tipos de archivos

Dreamweaver permite usar colores en código HTML, JS, CSS, PHP, XML, LESS, Sass, SCSS, SVG, Bash, C, C#, C++, clojure, CoffeeScript, Dart, Diff, EJS, Embedded Ruby, Groovy, Handlebars, Haskell, Haxe, Java, JSON, Lua, Markdown, Markdown (GitHub), Perl, Properties, Python, RDF Turtle, Ruby, Scala, SQL, Stylus, Text, VB, VBScript, XML y YAML.

Varios cursores para las tareas repetitivas

Escriba más de una línea de código a la vez para hacer rápidamente cosas, como crear una lista con viñetas, actualizar una serie de cadenas y hacer varias modificaciones a la vez.

Esta función es una enorme impulsora de la productividad, debido a que no es necesario escribir varias veces la misma línea de código. Los cursores múltiples lo hacen todo de una vez.

Al editar código, puede hacer lo siguiente:

  • Añadir cursores múltiples para añadir nuevo contenido en varios lugares
  • Seleccionar texto en varios lugares, para aplicar la misma edición a diferentes partes del documento

Para obtener más información, consulte Añadir cursores múltiples o selecciones múltiples.

Edición rápida de archivos de código relacionados

Para realizar cambios rápidos en el código, sitúe el cursor en los fragmentos de código específicos y utilice el menú contextual, o presione Ctrl-E (en Windows) o Cmd-E (en Mac), para acceder a la función Edición rápida.

Dreamweaver le mostrará opciones de código específicas pare el contexto y herramientas en la misma pantalla.

Caso de uso del escenario

Suponga el siguiente ejemplo:

Está editando un archivo HTML y observa algo que parece incorrecto en Vista en vivo. A continuación, cambia a Vista de código y observa que tiene que editar otro archivo relacionado (pongamos por caso un archivo CSS) para solucionar el problema. 

En lugar de cambiar de pestaña, haga clic con el botón derecho en el código correspondiente y haga clic en Edición rápida, o utilice un método abreviado de teclado y Dreamweaver abrirá la sección correspondiente del código en el archivo CSS relacionado, dentro del propio archivo HTML.

A continuación, puede editar el código CSS sin tener que ir a otro lugar ni cambiar de pestaña. Los cambios se actualizan automáticamente en el archivo CSS.

Para más información, consulte Edición rápida.

Documentación de CSS contextual

Documentos rápidos proporciona documentación para las propiedades CSS dentro de la propia vista de código.

Ya no es preciso ir a una página web fuera de Dreamweaver para obtener información sobre las propiedades CSS. Para activar Documentos rápidos, presione Ctrl + K (en Windows) o Cmd + K (en Mac).

Para obtener más información, consulte Obtención de ayuda con CSS desde Dreamweaver con Documentos rápidos.

Soporte inicial de Emmet

Emmet es un complemento que permite programar y generar código HTML y CSS a gran velocidad.

El complemento Emmet viene con Dreamweaver, lo que le permite utilizar abreviaturas de Emmet sin tener que molestarse en instalar el complemento.

Utilice abreviaturas de Emmet en la vista de código o en el inspector de código de Dreamweaver y presione la tecla Tabulador para expandir estas abreviaturas a formato HTML o CSS.

Las abreviaturas de HTML se expanden en páginas HTML y PHP.

Las abreviaturas de CSS se expanden en páginas CSS, LESS, Sass y SCSS o en la etiqueta style de las páginas HTML.

Para obtener más información sobre cómo usar Emmet, consulte Uso del kit de herramientas de Emmet con Dreamweaver.

Contracción del código

Dreamweaver le permite contraer secciones de código de modo que pueda centrarse fácilmente en las secciones que esté editando de forma activa. 

Puede contraer el código según etiquetas o paréntesis, o puede contraer el código según su selección. 

Para obtener más información, consulte Contracción y expansión del código.

Validación de código

Dreamweaver ofrece una potente funcionalidad de inspección de código (linting) para ayudarle a depurar errores del código. 

Analiza el código para señalar potenciales errores o usos sospechosos del código. En Dreamweaver, la inspección (linting) puede detectar y marcar errores en la sintaxis de HTML, errores de análisis de CSS o advertencias en los archivos de JavaScript.

Para obtener más información acerca de la inspección del código en Dreamweaver, consulte Inspeccionar código.

Si trabaja con PHP y el documento contiene código no válido, Dreamweaver mostrará ese código en Vista de diseño (si está abierto) y lo resaltará en Vista de código (según las preferencias que haya establecido).

Si selecciona el código en alguna de las vistas, el inspector de propiedades mostrará información sobre por qué el código no es válido y cómo se puede reparar.

Nota:

La opción para resaltar código no válido en la vista de Código está desactivada de manera predeterminada. Para activarla, cambie a la vista de Código (Ver > Código) y luego seleccione Ver > Opciones de vista de Código > Resaltar código no válido.

También puede especificar las preferencias para la reescritura automática de diversos tipos de código no válido al abrir un documento.

Para obtener más información sobre cómo configurar las preferencias de codificación, consulte Configuración de las preferencias de programación.

Compatibilidad con preprocesadores CSS

Dreamweaver es compatible ahora con preprocesadores CSS, como SASS, Less y SCSS, con un completo coloreado del código, ocultación de código y compilación. 

La compatibilidad con preprocesadores CSS le permite ahorrar tiempo al trabajar con sitios grandes con hojas de estilo complicadas.

Para obtener información sobre la compatibilidad de preprocesadores de CSS en Dreamweaver, consulte Uso de preprocesadores de CSS en Dreamweaver.

Almacenamiento y reutilización de fragmentos de código

Guarde los bloques de código utilizados con más frecuencia como fragmentos de código dentro del panel Fragmentos. Después podrá insertar estos bloques de código en varias páginas.

Los fragmentos de código almacenados en el panel Fragmentos no son específicos del sitio, por lo que se pueden reutilizar en otros sitios.

También puede utilizar fragmentos de código en diferentes dispositivos, así como en diferentes versiones de Dreamweaver, mediante la configuración de sincronización.

Para obtener más información, consulte Reutilización de código con fragmentos.

Vista previa en tiempo real en el navegador

Obtenga rápidamente una vista previa de los cambios en el navegador, en tiempo real, sin necesidad de actualizar manualmente la página del navegador. Dreamweaver se conecta ahora con el navegador, por lo que los cambios aparecerán en el navegador al instante, sin tener que volver a cargar la página.

Para obtener más información, consulte Vista previa en tiempo real en el navegador.

Personalización de los métodos abreviados de teclado

En Dreamweaver puede usar los métodos abreviados de teclado que desee. Si está acostumbrado a usar métodos abreviados del teclado específicos, como, por ejemplo, Mayús+Intro para añadir un salto de línea, o Control+G para ir a una posición concreta del código, puede añadirlos a Dreamweaver mediante el editor de métodos abreviados del teclado.

Para obtener instrucciones, consulte Personalización de los métodos abreviados de teclado.

Apertura de archivos en Vista de código de forma predeterminada

Cuando abre un tipo de archivo que no suele contener HTML (por ejemplo, un archivo JavaScript), éste se abre en la vista de Código (o en el Inspector de código) en lugar de en la vista de Diseño. Puede especificar qué tipos de archivo desea abrir en la vista de código.

  1. Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh).
  2. Seleccione Tipos de archivo/editores en la lista Categoría de la izquierda.
  3. En el cuadro Abrir en vista de código, añada la extensión de nombre de archivo del tipo de archivo que desea abrir automáticamente en la vista de código.

    Deje un espacio entre las extensiones de nombre de archivo. Puede añadir tantas extensiones como desee.

Logotipo de Adobe

Inicia sesión en tu cuenta