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.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea