Aprenda a configurar las preferencias de programación, los temas del código, los formatos y las preferencias de reescritura del código en Dreamweaver.

Puede configurar las preferencias de programación, como el formato y el color del código, entre otras, para adaptarlas a sus necesidades específicas.

Nota:

Para establecer preferencias avanzadas, utilice el Editor de la biblioteca de etiquetas (consulte Administración de bibliotecas de etiquetas).

Configuración del aspecto del código

Puede configurar el ajuste de texto, mostrar los números de línea de código, configurar el coloreado de la sintaxis de los elementos de código, configurar las sangrías y mostrar caracteres ocultos en el menú Ver > Opciones de Vista de código.

  1. Visualizar un documento en Vista de código o en el inspector de código.
  2. Seleccione Ver > Opciones de Vista de código.

  3. Seleccione o anule la selección de cualquiera de las opciones siguientes:

    Ajustar texto

    Ajusta el código para que pueda verlo sin necesidad de desplazarse horizontalmente. Esta opción no inserta saltos de línea, pero facilita la lectura del código.

    Números de línea

    Muestra números de línea al lado del código.

    Caracteres ocultos

    Muestra caracteres especiales en lugar de espacios en blanco. Por ejemplo, un punto sustituye a cada espacio, dos paréntesis angulares sustituyen a cada tabulador y un marcador de párrafo sustituye a cada salto de línea.

    Nota:

    Los saltos de línea automáticos que Dreamweaver utiliza para ajustar el texto no aparecen con un marcador de párrafo.

    Aplicar colores a sintaxis

    Activa o desactiva los colores del código. Para información sobre cómo cambiar la combinación de colores, consulte Definición de los colores del código.

    Sangría automática

    Aplica automáticamente sangría al código cuando pulsa Intro mientras escribe el código. La nueva línea de código aplica sangría al mismo nivel que la línea anterior. Para información sobre cómo cambiar el espaciado de la sangría, consulte la opción Tamaño de tabulación en Cambio del formato del código.

Cambio del formato del código

Puede cambiar la apariencia del código especificando preferencias de formato como la sangría, la longitud de línea y el uso de mayúsculas y minúsculas en nombres de etiquetas y atributos.

Todas las opciones de formato de código, salvo la opción Pasar por alto mayúsculas/minúsculas, se aplican automáticamente solo a los documentos nuevos o a las adiciones realizadas en los documentos que cree posteriormente.

Para cambiar el formato de documentos HTML existentes, abra el documento y seleccione Edición > Código > Aplicar formato de origen.

  1. Seleccione Edición > Preferencias.
  2. Seleccione Formato de código en la lista Categoría de la izquierda.
  3. Defina cualquiera de las opciones siguientes:

    Sangría

    Indica si debe o no aplicarse sangría en el código generado por Dreamweaver (según las reglas de sangría especificadas en estas preferencias).

    Nota:

    La mayoría de las opciones de sangría de este cuadro de diálogo solo se aplican al código generado por Dreamweaver, no al código que escriba. Para aplicar sangría a cada nueva línea de código que escriba, con el fin de colocarla al mismo nivel que la línea anterior, seleccione la opción Ver > Opciones de Vista de código > Sangría automática. Para más información, consulte Definición del aspecto del código.

    Con

    (Cuadro de texto y menú emergente) Especifica cuántos espacios o tabulaciones debe utilizar Dreamweaver para aplicar sangría al código que genera. Por ejemplo, si escribe 3 en el cuadro y selecciona Tabulaciones en el menú emergente, se aplicará sangría al código generado por Dreamweaver utilizando tres caracteres de tabulación para cada nivel de sangrado.

    Tamaño de tabulación

    Determina el ancho, en caracteres, de cada espacio de tabulación en la Vista de código. Por ejemplo, si el Tamaño de tabulación se define en 4, cada tabulación aparecerá en la Vista de código como un espacio en blanco correspondiente al ancho de cuatro caracteres. Si, además, el valor de Tamaño de tabulación se define en 3, en el código generado por Dreamweaver se aplicará una sangría utilizando tres caracteres de tabulación para cada nivel de sangría, que aparecerá en Vista de código como un espacio en blanco correspondiente al ancho de doce caracteres.

    Nota:

    Dreamweaver aplica sangría mediante espacios o tabulaciones; no convierte una serie de espacios en tabulación al insertar código.

    Emmet

    Seleccione esta opción si va a utilizar abreviaturas de Emmet al programar. Al seleccionar esta opción se garantiza que, al pulsar el tabulador, Dreamweaver convertirá la abreviatura de Emmet en código completo HTML o CSS. Para obtener más información sobre cómo usar Emmet, consulte Uso del kit de herramientas de Emmet con Dreamweaver.

    Tipo de salto de línea

    Especifica el tipo de servidor remoto (Windows, Macintosh o UNIX) que aloja el sitio remoto. La elección del tipo adecuado de caracteres para salto de línea garantiza que el código fuente HTML aparezca de forma correcta en el servidor remoto. Esta opción también resulta útil si trabaja con un editor de texto externo que solo reconoce determinados tipos de saltos de línea. Por ejemplo, utilice CR LF (Windows) si su editor externo es el Bloc de notas y CR (Macintosh) si su editor externo es SimpleText.

    Nota:

    Para los servidores a los que se conecte mediante FTP, esta opción solo afecta al modo de transferencia binaria; el modo de transferencia ASCII de Dreamweaver omite esta opción. Si descarga archivos mediante el modo ASCII, Dreamweaver establecerá los saltos de línea basándose en el sistema operativo del equipo; si carga archivos con el modo ASCII, todos los saltos de línea se configurarán como CR LF.

    Etiqueta TD: No incluir salto en etiqueta TD

    Resuelve un problema de visualización que se produce en algunos navegadores antiguos cuando hay espacio en blanco o saltos de línea después de una etiqueta <td> o justo delante de una etiqueta </td>. Al seleccionar esta opción, Dreamweaver no escribe saltos de línea después de una etiqueta <td> ni delante de una etiqueta </td> aunque el formato de la Biblioteca de etiquetas indique que el salto de línea debe ir en dicho lugar.

    Formato avanzado

    Le permite establecer opciones de formato para etiquetas y atributos individuales en el editor de la biblioteca de etiquetas.

    Carácter de espacio en blanco

    (Solo en la versión en japonés) Permite seleccionar “&nbsp;” o Zenkaku para el código HTML. El espacio en blanco seleccionado en esta opción se utiliza para las etiquetas vacías al crear una tabla y cuando la opción “Permitir múltiples espacios consecutivos” está activada en las páginas con codificación japonesa.

    Tamaño mínimo de plegado de código

    El tamaño de plegado predeterminado es de dos líneas. Con este ajuste predeterminado, podrán contraerse todos los fragmentos de código que tengan al menos dos líneas de código. Los fragmentos de código que tengan menos de dos líneas se pueden contraer únicamente seleccionando el código. Para obtener más información sobre el plegado de código, consulte Contracción y expansión del código.

Configuración de las preferencias de reescritura del código

Utilice las preferencias de reescritura del código para especificar si Dreamweaver debe modificar el código, y de qué manera debe hacerlo, al abrir documentos, al copiar y pegar elementos de formulario y al introducir valores de atributo y URL mediante herramientas como, por ejemplo, el Inspector de propiedades. Estas preferencias no tienen ningún efecto cuando se edita código HTML o scripts en Vista de código.

Si desactiva las opciones de reescritura, se mostrarán elementos de formato no válidos en la ventana de documento para el código HTML que se haya reescrito.

  1. Seleccione Editar > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh).
  2. Seleccione Reescritura de código en la lista Categoría de la izquierda.
  3. Defina cualquiera de las opciones siguientes:

    Reparar etiquetas mal anidadas y no cerradas

    Reescribe las etiquetas solapadas. Por ejemplo, <b><i>texto</b></i> se reescribe como <b><i>texto</i></b>. Esta opción también inserta comillas y paréntesis angulares de cierre en el caso de que no estén presentes.

    Cambiar nombre de elementos de formulario al pegar

    Comprueba que no hay nombres repetidos en los objetos de formulario. Esta opción se activa de forma predeterminada.

    Nota:

    A diferencia de las otras opciones de este cuadro de diálogo de preferencias, esta opción no se aplica al abrir un documento, solo al copiar y pegar un elemento de formulario.

    Quitar etiquetas de cierre adicionales

    Elimina las etiquetas de cierre para las que no existe la correspondiente etiqueta de apertura.

    Advertir al solucionar/eliminar etiquetas

    Muestra un resumen del código HTML técnicamente no válido que Dreamweaver ha intentado corregir. En dicho resumen se indica la ubicación del problema (a través de números de línea y de columna) para que pueda localizar la corrección y asegurarse de que el resultado es el que desea.

    Nunca reescribir código: En archivos con extensiones

    Permite impedir que Dreamweaver reescriba código en archivos con las extensiones de nombre de archivo especificadas. Esta opción resulta especialmente útil para archivos que contengan otro tipo de etiquetas.

    Codificar <, >, & y &#34; en valores de atributo usando &

    Garantiza que los valores de atributo que especifique o edite mediante las herramientas de Dreamweaver, como por ejemplo el Inspector de propiedades, contengan solo caracteres admitidos. Esta opción se activa de forma predeterminada.

    Nota:

    Esta opción, así como las opciones siguientes, no se aplican a los URL escritos en la Vista de código. Además, no modifican el código existente en un archivo.

    No codificar caracteres especiales

    Impide que Dreamweaver modifique los URL con el fin de que solo utilice caracteres admitidos. Esta opción se activa de forma predeterminada.

    Codificar caracteres especiales de los URL utilizando &#

    Garantiza que, al introducir o editar URL empleando las herramientas de Dreamweaver como, por ejemplo, el Inspector de propiedades, dichos URL contengan solo caracteres admitidos.

    Codificar caracteres especiales de los URL utilizando %

    Funciona de la misma manera que la opción anterior, pero utiliza un método distinto para codificar los caracteres especiales. Este método de codificación (con el signo de porcentaje) puede proporcionar mayor compatibilidad con navegadores anteriores, pero no funciona tan bien con los caracteres de algunos idiomas.

Configuración de las preferencias de sugerencias para el código

Utilice las preferencias de las sugerencias de código para configurar la forma personalizada en que desea que funcionen las sugerencias de código.

  1. Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh).

  2. Seleccione Sugerencias de código en la categoría de la izquierda.

  3. Defina cualquiera de las opciones siguientes:

    Etiquetas de cierre

    Especificar cómo desea que Dreamweaver cierre las etiquetas.

    • Tras escribir “</” -
    • Tras escribir la etiqueta de apertura “>” - Seleccione esta opción si desea que Dreamweaver añada automáticamente una etiqueta de cierre después de cerrar la etiqueta de apertura.
    • Nunca- Establezca esta opción si no desea que Dreamweaver añada automáticamente etiquetas de cierre.

    Activar sugerencias de código

    Seleccione esta opción para activar o desactivar las sugerencias de código y el completado de código en Dreamweaver. Para obtener más información sobre las sugerencias de código de Dreamweaver y las funciones de completado de código, consulte Sugerencias de código y completado de código.

    Activar sugerencias de herramientas

    Seleccione esta opción para permitir que aparezcan las descripciones con las sugerencias de código. Estas descripciones proporcionan información adicional sobre el código que escribe.

Establecer la preferencia de completado automático de códigos

Puede activar y desactivar el cierre automático de llaves y comillas llevando a cabo los pasos siguientes:

  1. Abra el archivo brackets.json desde la ubicación siguiente:

    • Windows: %appdata%\Adobe\Dreamweaver CC 2018\en_US\Configuration\Brackets\
    • Mac: ~/Library/Application Support/Adobe/Dreamweaver CC 2018/en_US/Configuration/Brackets/
       
  2. Para deshabilitar el cierre automático de corchetes y paréntesis, establezca autoCloseBraces en False (Falso).

  3. Para deshabilitar la inserción automática de comillas apareadas, establezca autoCloseQuotes en False (Falso).

    Si quiere volver a activar el cierre automática de llaves y comillas apareadas, establezca los valores antes indicados en true (cierto).

    Establecer la preferencia de completado automático de código en Dreamweaver
    Establecer la preferencia de completado automático de código en Dreamweaver
  4. Guarde el archivo .json e inicie Dreamweaver.

Configurar las preferencias de PHP

Puede definir el entorno de desarrollo de programación PHP en el que desea trabajar. Puede hacerlo de manera específica para cada sitio individual en el que trabaje o de manera general para todos los archivos PHP guardados fuera de los sitios de Dreamweaver.

Dreamweaver configura las sugerencias de código y las comprobaciones de linting (análisis de errores potenciales) para la versión seleccionada de PHP.

Para definir las preferencias de la versión de código PHP para archivos no específicos del sitio, lleve a cabo los pasos siguientes:

  1. Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh).

  2. Seleccione PHP en la lista de categorías de la izquierda.

  3. Seleccione una versión de PHP en la en la lista desplegable de versiones de PHP y haga clic en Aplicar.

Para definir la versión de PHP para un sitio específico, lleve a cabo los pasos siguientes:

  1. En el cuadro de diálogo Configuración del sitio, en Configuración avanzada, seleccione PHP.

  2. Seleccione una versión de PHP en la lista desplegable de versiones de PHP y haga clic en Guardar.

    Establecer las preferencias de PHP para cada sitio específico
    Establecer las preferencias de PHP para cada sitio específico

Configurar temas de colores y código

Puede elegir un tema de color de acuerdo con sus preferencias al iniciar Dreamweaver. También puede cambiar esta preferencia en cualquier momento.

  1. Seleccione Editar > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh).
  2. Seleccione Interfaz en la lista Categoría de la izquierda.

  3. Elija un tema en la lista Temas de color.

  4. Después de definir el tema de la interfaz, establezca el tema del código.

    Puede elegir entre un tema de código claro y otro oscuro.

  5. Haga clic en Aplicar para guardar los cambios.

    Puede optar por personalizar aun más el color de código en función de sus necesidades. Para obtener más información, consulte Personalización de los colores del código.

Uso de un editor externo

Puede especificar un editor externo para editar los archivos con determinados nombres y extensiones. Por ejemplo, puede iniciar un editor de texto como BBEdit, el Bloc de notas o TextEdit desde Dreamweaver para modificar archivos JavaScript (JS).

Puede asignar distintos editores externos para extensiones de nombres de archivo diferentes.

Definición de un editor externo para un tipo de archivo

  1. Seleccione Edición > Preferencias.
  2. Seleccione Tipos de archivo/editores en la lista Categoría de la izquierda, establezca las opciones y haga clic en OK.

    Abrir en Vista de código

    Especifica las extensiones de nombre de archivo que deben abrirse automáticamente en la Vista de código en Dreamweaver.

    Volver a cargar archivos modificados

    Especifica el comportamiento cuando Dreamweaver detecte cambios realizados externamente en un documento abierto en Dreamweaver.

    Guardar al iniciar

    Especifica si Dreamweaver debe guardar siempre el documento actual antes de iniciar el editor, no guardarlo nunca o solicitar confirmación antes de guardarlo cada vez que se inicie el editor externo.

    Fireworks

    Puede conectar Fireworks con Dreamweaver, indicando aquí la ruta de la aplicación.

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