Guía del usuario Cancelar

Sugerencias de código y completado de código

 

 

Utilice las funciones de sugerencias y completado de código de Dreamweaver para minimizar el tiempo de programación.

Las funciones inteligentes de sugerencias o de completado de código de Dreamweaver le permiten insertar y editar código rápidamente al reducir los errores tipográficos y otros errores comunes.

También puede utilizar esta función para ver:

  • Atributos disponibles para una etiqueta
  • Parámetros disponibles para una función
  • Métodos disponibles para un objeto

Lenguajes y tecnologías admitidos

Dreamweaver admite sugerencias para código de los siguientes lenguajes y tecnologías:

Siga leyendo para aprender cómo funcionan para estos lenguajes las sugerencias de código y el completado de código.

Activar sugerencias de código

Para habilitar las sugerencias de código, haga clic en Editar > Preferencias > Sugerencias de código y seleccione Habilitar sugerencias de código. Para deshabilitar las sugerencias de código, anule la selección de Habilitar sugerencias de código.

Preferencias de sugerencias de código
Preferencias de sugerencias de código

Para habilitar la inserción automática de llaves y comillas, seleccione Insertar llaves automáticamente e Insertar comillas automáticamente, respectivamente.

Para habilitar las descripciones en las sugerencias de código, seleccione Habilitar sugerencias de herramientas de descripción. Podrá ver entonces las descripciones junto con las sugerencias de código.

Sugerencias de código HTML

Los siguientes tipos de sugerencias para el código están disponibles para HTML:

  • Sugerencias de etiquetas
  • Sugerencias de nombre de atributo
  • Sugerencias de valores de atributo

Sugerencias de etiquetas

Pulse la tecla < en el teclado para empezar a escribir el código. A medida que escribe, Dreamweaver muestra las etiquetas HTML válidas. Si la cadena que está escribiendo aparece en el menú, desplácese hasta ella y pulse Intro o Retorno para completar la entrada.

Por ejemplo, al escribir <, un menú emergente muestra una lista de nombres de etiqueta. En lugar de escribir el resto del nombre de la etiqueta, puede seleccionar la etiqueta del menú para incluirla en el texto.

Sugerencias básicas para el código HTML
Sugerencias básicas para el código HTML

Estas sugerencias para etiquetas HTML también incluyen una breve descripción de la etiqueta según corresponda.

Sugerencias de nombre de atributo

Dreamweaver muestra los atributos adecuados para las etiquetas durante la codificación en Dreamweaver. Escriba un nombre de etiqueta y pulse la barra espaciadora para que se muestren los nombres de atributo válidos que puede utilizar.

Sugerencias para el código de nombre de atributo
Sugerencias para el código de nombre de atributo

Sugerencias de valores de atributo

El texto de la sugerencia del valor de atributo puede ser estático o dinámico (ya que en las sugerencias para el código se muestran valores basados en lo que está presente en archivos relacionados). 

La mayoría de las sugerencias de valor de atributo son estáticas. Tome por ejemplo el valor del atributo de destino, que en sí mismo es estático por naturaleza, por lo que las sugerencias son estáticas también. 

Ejemplo de sugerencias de valor de atributos estáticos
Ejemplo de sugerencias de valor de atributos estáticos

Dreamweaver muestra sugerencias dinámicas para el código para los valores de atributo que lo requieren, como id, target, src, href y class.

Estos son algunos ejemplos de sugerencias para el código mostradas dinámicamente. 

Sugerencias de código dinámicas para src

En este ejemplo, cuando se escribe el src, se presentan valores de atributo válidos y cuando se seleccionan imágenes, Dreamweaver muestra las imágenes válidas reales que están presentes en la carpeta de imágenes. Después es posible desplazarse y elegir la que se desea.

Sugerencias de código dinámicas para src
Sugerencias de código dinámicas para src

Si se tienen activos en las Bibliotecas CC, estos activos también aparecen cuando se escribe el src. Estos activos de Bibliotecas CC se indican con un icono de nube.

Cuando se elige un activo de una Biblioteca CC, aparece un menú emergente que permite que se vuelva a muestrear el tamaño de la imagen y cambiar el formato de imagen.

Inclusión de un activo de biblioteca CC en el código
Inclusión de un activo de biblioteca CC en el código

Nota:

Solo se pueden mostrar 50 activos de bibliotecas CC en las sugerencias para el código. Estas sugerencias aparecen en orden alfabético.

Nota:

No es posible incluir activos de bibliotecas CC remotas en el código de Dreamweaver.

Sugerencias de código dinámicas para href

Cuando se escribe href, Dreamweaver muestra una lista de archivos en la carpeta, a la vez que da la opción de examinar y seleccionar el archivo al que se quiere vincular.

Sugerencias de código dinámicas para href
Sugerencias de código dinámicas para href

Sugerencias de código dinámicas para la identificación y el estilo

Si se han definido ids en los archivos CSS, cuando se escribe id en los archivos HTML, Dreamweaver muestra todos los ids disponibles.

Sugerencias de código dinámicas para id
Sugerencias de código dinámicas para id

De igual manera, si se han definido estilos CSS, cuando se escribe style en los archivos HTML, Dreamweaver muestra todos los estilos disponibles.

Sugerencias de código dinámicas para style
Sugerencias de código dinámicas para style

Sugerencias de código CSS

Las sugerencias de código están disponibles para los diferentes tipos de CSS siguientes:

  • @rules
  • Propiedades
  • Pseudoselectores y pseudoelementos
  • Método abreviado

Además de sugerencias de código, también hay sugerencias para las propiedades CSS.

Sugerencias de código para CSS @rules

Dreamweaver muestra sugerencias para el código para todas las @rules junto con una descripción de la regla CSS, como se muestra aquí.

Sugerencias para el código @rule de CSS
Sugerencias para el código @rule de CSS

Sugerencias de propiedades CSS

Cuando se escribe en las propiedades de CSS, al escribir dos puntos, aparecen sugerencias para elegir un valor válido.

En el ejemplo siguiente, cuando se escribe font-family: aparecen los conjuntos de fuentes válidos.

Se puede seleccionar uno de los conjuntos de fuentes, también se puede abrir el cuadro de diálogoAdministrar fuentes dentro de estas sugerencias y definir las fuentes que se deseen. 

Sugerencias para el código y ayuda para las propiedades CSS
Sugerencias para el código y ayuda para las propiedades CSS

Otro ejemplo de sugerencias para el código útiles cuando se trabaja con color en CSS. Cuando se escribe en cualquier propiedad relacionada con el color (por ejemplo, color de borde o color de fondo), al pulsar dos puntos, las sugerencias para el código muestran una lista de colores. Se puede seleccionar un color de la lista, o bien abrir el Selector de color en las propias sugerencias para el código y configurar el color que se desee.

Sugerencias para el código relacionadas con el color de CSS
Sugerencias para el código relacionadas con el color de CSS

Si se tienen muestras de color en las bibliotecas CC, las sugerencias para el código también las muestran.

Las muestras de color de las bibliotecas CC se indican con el icono de nube
Las muestras de color de las bibliotecas CC se indican con el icono de nube

Nota:

Solo se pueden mostrar 50 activos de bibliotecas CC en las sugerencias para el código. Estas sugerencias aparecen en orden alfabético.

Sugerencias de pseudoselectores y pseudoelementos

Puede añadir un pseudoselector CSS a un selector, para definir un estado particular del elemento. Por ejemplo, al utilizar :hover, el estilo se aplica cuando el usuario pasa el cursor por encima del elemento especificado por el selector.

Al teclear “:”, Dreamweaver muestra una lista de pseudoselectores válidos si el cursor está en el contexto adecuado.

Sugerencias de código de pseudoselectores
Sugerencias de código de pseudoselectores

Al teclear “:”, Dreamweaver muestra una lista de pseudoelementos válidos (utilizados para diseñar partes específicas del documento) si el cursor está en el contexto adecuado.

Sugerencias de código de pseudoelementos
Sugerencias de código de pseudoelementos

Sugerencias de métodos abreviados CSS

Las propiedades de métodos abreviados son propiedades que le permiten establecer simultáneamente los valores de varias propiedades CSS diferentes. Como ejemplos de propiedades de métodos abreviados CSS pueden citarse las propiedades background (fondo) y font (fuente).

Como se podrá ver en el ejemplo que aparece a continuación, si se teclea una propiedad de método abreviado CSS (como, por ejemplo, background (fondo)), tras teclear un espacio, Dreamweaver muestra lo siguiente:

  • Valores de propiedades adecuados en orden de relevancia
  • Valores obligatorios que deben utilizarse (por ejemplo, si se utiliza font (fuente), en ese caso resultan obligatorios font-size (tamaño de fuente) y font-family (familia de fuentes))
  • Expansión del navegador para esa propiedad
Sugerencias de código para la propiedad CSS background (fondo)
Sugerencias de código para la propiedad CSS background (fondo)

Cuando se rellenan las propiedades de métodos abreviados de CSS, las sugerencias de código visualizan también los valores de propiedades que haya tecleado.

Sugerencias de código CSS

Para algunas propiedades CSS (como box-shadow o text-shadow), Dreamweaver muestra sugerencias que indican qué valores deberían ir a continuación y también indica qué valores son los obligatorios utilizando un asterisco. 

También puede ver cómo el navegador interpreta el CSS.

Sugerencias que aparecen para propiedades CSS
Sugerencias que aparecen para propiedades CSS

Sugerencias para el código JavaScript

En los archivos JavaScript, Dreamweaver proporciona sugerencias para los parámetros de función y variables. 

En el siguiente ejemplo, el fragmento de código indica el tipo.

Sugerencias para el código JavaScript
Sugerencias para el código JavaScript

Dreamweaver actualiza automáticamente la lista de sugerencias para el código disponibles mientras se trabaja con archivos JavaScript. Por ejemplo, si se está trabajando en un archivo HTML principal y se cambia a un archivo JavaScript para realizar un cambio. El cambio que se hace en el archivo JavaScript se refleja en la lista de sugerencias para el código al regresar al archivo HTML principal. 

Nota:

Esta actualización automática solo funciona si los archivos JavaScript se editan en Dreamweaver.

Inspección de objetos en vivo

Dreamweaver también actualiza automáticamente las sugerencias de código de tipo JavaScript.

Por ejemplo, si ha definido una variable como un número, Dreamweaver retiene esa información. Al hacer referencia posteriormente a esa variable en el código, se indicará su tipo.

Si se cambia el tipo de variable (por ejemplo, a una cadena), en ese caso las sugerencias de código de Dreamweaver indicarán automáticamente que la variable es una cadena.

Sugerencia de código que indica el tipo de variable
Sugerencia de código que indica el tipo de variable

Inclusión de documentación dinámica

Si ha añadido comentarios para una función en particular, en ese caso, cuando se sugiere esa función, Dreamweaver visualiza también la documentación de dicha función. 

Sugerencias de código PHP

Dreamweaver admite sugerencias para el código para las versiones PHP 5.6 y 7.1. Estas sugerencias para el código PHP son específicas del sitio y cubren todas las funciones, clases y constantes clave.

Para obtener más información sobre 5.6 y 7.1 de PHP, consulte el Manual de PHP.

Para obtener más información sobre sugerencias para el código específicas del sitio, consulte Sugerencias de código específicas del sitio.

Una función útil de las sugerencias para el código PHP es el completado automático de variables.

Cuando se escribe un signo de dólar ($), aparece una lista de todas las variables existentes en el script actual. Se selecciona el que se desee y se pulsa Intro o Retorno. Las variables de los archivos relacionados también aparecen, eliminando el riesgo de reutilizar la misma variable para otro propósito.

Cuando PHP 7.1 se establece como predeterminado, Dreamweaver muestra las sugerencias de código específicas de PHP 7.1.

Sugerencias de código PHP 7
Sugerencias de código PHP 7

Ejemplo de sugerencias de código objeto de PHP
Ejemplo de sugerencias de código objeto de PHP

Editar la configuración de retardo de sugerencias de código PHP

Para mejorar el rendimiento de la escritura del código en archivos.php, Dreamweaver 2017.5 y las versiones posteriores disponen de un retardo añadido de las sugerencias de código PHP. Al escribir código PHP, Dreamweaver muestra las sugerencias con un retardo de 400 ms. Si desea modificar los ajustes de retardo para el código PHP, siga este procedimiento: 

  1. Salga de Dreamweaver.

  2. Abra brackets.json desde la ubicación siguiente, utilizando un editor de texto:

    • Win%appdata%\Adobe\Dreamweaver CC 2017\<locale>\Configuration\Brackets\
    • macOS~/Library/Application Support/Adobe/Dreamweaver CC 2017/<locale>/Configuration/Brackets/
  3. Haga clic en el botón Guardar estructura de la esquina superior derecha del cuadro de diálogo.

    En el archivo JSON, añada una coma después del par apellido/valor.

    Agregue la siguiente línea con su tiempo de retardo preferido en milisegundos: “delayInPHPHint”: <tiempo en milisegundos>. Por ejemplo, “delayInPHPHint”: 200.

  4. Guarde el archivo e inicie Dreamweaver.

Sugerencias de código específicas del sitio

Dreamweaver permite a los desarrolladores que trabajan con Joomla, Drupal, Wordpress u otros frameworks ver sugerencias de código PHP conforme escriben en la Vista de código. Para mostrar estas sugerencias para el código, deberá crear en primer lugar un archivo de configuración empleando el cuadro de diálogo Sugerencias de código específicas del sitio. La configuración indica a Dreamweaver el lugar en el que debe buscar las sugerencias para el código específicas para el sitio.

Para ver un tutorial en vídeo sobre el uso de sugerencias para el código específicas del sitio, consulte www.adobe.com/go/learn_dw_comm13_es.

Crearl archivo de configuración

Utilice el cuadro de diálogo Sugerencias de código específicas del sitio con el fin de crear el archivo de configuración necesario para mostrar sugerencias para el código en Dreamweaver.

De manera predeterminada, Dreamweaver almacena el archivo de configuración en el directorio Adobe Dreamweaver CS5\configuration\Shared\Dinamico\Presets.

Nota:

Las sugerencias para el código que cree serán específicamente para el sitio seleccionado en el panel Archivos de Dreamweaver. Para que se muestren las sugerencias para el código, la página en la que está trabajando debe residir en el sitio seleccionado actualmente.

  1. Seleccione Sitio > Opciones de sitio > Sugerencias de código específicas para el sitio.

    De manera predeterminada, la función Sugerencias de código específicas del sitio examina el sitio para determinar el framework CMS (Content Management System: sistema de administración de contenidos) que está usando. Dreamweaver admite de forma predeterminada tres frameworks: Drupal, Joomla y Wordpress.

    Los cuatro botones situados a la derecha del menú emergente Estructura le permiten importar, guardar, cambiar el nombre o eliminar estructuras de frameworks.

    Nota:

    No puede eliminar ni cambiar el nombre de las estructuras de frameworks predeterminadas.

  2. En el cuadro de texto Raíz secundaria, especifique la carpeta de la raíz secundaria en la que almacena los archivos del framework. Puede hacer clic en el icono de carpeta situado junto al cuadro de texto para ir a la ubicación de los archivos del framework.

    Dreamweaver muestra una estructura de árbol de las carpetas que contienen los archivos del framework. Si se muestran todas las carpetas y los archivos que desea examinar, haga clic en OK para ejecutar la exploración. Si desea personalizar la exploración, continúe con los siguientes pasos.

  3. Haga clic en el botón de signo más (+) situado encima de la ventana Archivos para seleccionar un archivo o una carpeta que desee añadir a la exploración. En el cuadro de diálogo Añadir archivo o carpeta, puede especificar las extensiones de nombre de archivo concretas que desee incluir.

    Nota:

    Especifique las extensiones de nombre de archivo concretas para acelerar el proceso de exploración.

  4. Para quitar archivos de la exploración, seleccione los archivos que no desee explorar y luego haga clic en el botón del signo menos (-) situado encima de la ventana Archivos.

    Nota:

    Si el framework seleccionado es Drupal o Joomla, el cuadro de diálogo Sugerencias de código específicas del sitio muestra una ruta de acceso adicional a un archivo situado en la carpeta de configuración de Dreamweaver.

    No la elimine, ya que es necesaria cuando se utilizan estos frameworks.

  5. Para personalizar la forma en que la función Sugerencias de código específicas del sitio trata un determinado archivo o carpeta, selecciónelo de la lista y proceda de una de las siguientes formas:

    • Seleccione Explorar esta carpeta para incluir la carpeta seleccionada en la exploración.
    • Seleccione Recursiva para incluir todos los archivos y carpetas situados dentro de un directorio seleccionado.
    • Haga clic en el botón Extensiones para abrir el cuadro de diálogo Buscar extensiones, en el que podrá especificar las extensiones de nombre de archivo que desea incluir en la exploración para un determinado archivo o carpeta.

Almacenamiento de las estructuras de sitios

Puede guardar la estructura del sitio personalizada que ha creado en el cuadro de diálogo Sugerencias de código específicas del sitio.

  1. Salga de Dreamweaver.

  2. Texto del paso
  3. Cree la estructura de archivos y carpetas que desee mediante la adición y eliminación de los archivos y las carpetas que sean necesarias.

  4. Especifique un nombre para la estructura del sitio y haga clic en Guardar.

Nota:

Si el nombre especificado ya se ha usado, Dreamweaver le pedirá que introduzca otro nombre o que confirme que desea sobrescribir la estructura del mismo nombre. No podrá sobrescribir ninguna de las estructuras de frameworks predeterminadas.

Cambiar el nombre de las estructuras de sitios

Al cambiar el nombre de la estructura del sitio, recuerde que no puede utilizar los nombres de las tres estructuras de frameworks predeterminadas ni la palabra “custom”.

  1. Muestre la estructura cuyo nombre desea cambiar.

  2. Haga clic en el botón de icono Cambiar nombre de estructura, situado en la esquina superior derecha del cuadro de diálogo.

  3. Especifique un nuevo nombre para la estructura y haga clic en Cambiar nombre.

Nota:

Si el nombre especificado ya se ha usado, Dreamweaver le pedirá que introduzca otro nombre o que confirme que desea sobrescribir la estructura del mismo nombre. No podrá sobrescribir ninguna de las estructuras de frameworks predeterminadas.

Añadir archivos o carpetas a la estructura de un sitio

Puede añadir archivos o carpetas asociados a su framework. Después de agregar archivos o carpetas, puede especificar las extensiones de nombre de archivo de los archivos que desea explorar. 

  1. Haga clic en el botón de signo más (+), situado encima de la ventana Archivos, para abrir el cuadro de diálogo Añadir archivo o carpeta.

  2. En el cuadro de texto Añadir archivo o carpeta, introduzca la ruta de acceso al archivo o la carpeta que desea añadir. También puede hacer clic en el icono de carpeta situado junto al cuadro de texto para ir hasta el archivo o la carpeta.

  3. Haga clic en el botón del signo más (+), situado encima de la ventana Extensiones, para especificar las extensiones de nombre de archivo de los archivos que desea explorar.

    Nota:

    Especifique las extensiones de nombre de archivo concretas para acelerar el proceso de exploración.

  4. Haga clic en Añadir.

Búsqueda de extensiones de nombre de archivo en un sitio

Utilice el cuadro de diálogo Buscar extensiones para ver y editar las extensiones de nombre de archivo incluidas en la estructura del sitio.

  1. En el cuadro de diálogo Sugerencias de código específicas del sitio, haga clic en el botón Extensiones.

    El cuadro de diálogo Buscar extensiones enumera las extensiones que pueden explorarse actualmente.

  2. Para añadir otra extensión a la lista, haga clic en el botón de signo más (+) situado encima de la ventana Extensiones.

  3. Para eliminar una extensión de la lista, haga clic en el botón de signo menos (-).

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?