Используйте функции подсказок по коду и автозавершения кода в Dreamweaver для ускорения написания кода.

Функции интеллектуального завершения кода или подсказок по коду в Dreamweaver позволяют быстро вставлять и редактировать код за счет снижения количества опечаток и других распространенных ошибок.

Эту функцию также можно использовать для просмотра:

  • доступных атрибутов тега,
  • параметров функции или
  • методов объекта.

Поддерживаемые языки и технологии

Dreamweaver поддерживает подсказки по коду для следующих языков и технологий:

Далее вы узнаете, как функция завершения кода и подсказки по коду работают для этих языков.

Включение подсказок по коду

Чтобы включить подсказки по коду, щелкните «Правка» > «Настройки» > «Подсказки по коду» и выберите «Включить подсказки по коду». Чтобы отключить подсказки по коду, снимите флажок «Включить подсказки по коду».

Чтобы включить описания в подсказки по коду, выберите «Включить подсказки с описанием». После этого в подсказках по коду появятся описания.

Подсказки по коду HTML

Для HTML доступны следующие типы подсказок по коду:

  • Подсказки по тегам
  • Подсказки по имени атрибута
  • Подсказки по значению атрибута

Подсказки по тегам

Нажмите клавишу «<» на клавиатуре, чтобы начать ввод кода. По мере ввода Dreamweaver отображает допустимые HTML-теги. Если вводимая строка появляется в меню, прокрутите к ней курсор и нажмите клавишу Enter или Return, чтобы дополнить вводимый текст.

Например, при вводе «<» во всплывающем меню отображается список имен тегов. Вместо ввода полного имени тега можно выбрать этот тег в меню, чтобы вставить его в свой текст.

Основные подсказки по коду для HTML
Основные подсказки по коду для HTML

Подсказки по HTML-тегам также содержат краткое описание тега (если применимо).

Подсказки по имени атрибута

Во время написания кода в Dreamweaver отображаются соответствующие атрибуты для тегов. Введите имя тега и нажмите пробел, чтобы отобразить допустимые для использования имена атрибутов.

Подсказки по коду для имени атрибута
Подсказки по коду для имени атрибута

Подсказки по значению атрибута

Текст подсказки по значению атрибута может быть статическим или динамическим (как в подсказках по коду значения отображается на основе того, что содержится в связанных файлах). 

Большинство подсказок по значению атрибута статические. Например, значение целевого атрибута, как правило, статическое, и поэтому подсказки для него будут также статическими. 

Пример статических подсказок по значению атрибута
Пример статических подсказок по значению атрибута

Dreamweaver отображает динамические подсказки по коду для таких значений атрибута, которым это необходимо (например, «id», «target», «src», «href» и «class»).

Вот несколько примеров динамического отображения подсказок по коду. 

Динамические подсказки по коду для «src»

В данном примере при вводе кода «src» вам будет представлен список допустимых значений атрибутов, а если вы выберете изображения, Dreamweaver отобразит изображения, которые находятся в вашей папке с изображениями. После этого можно прокрутить вниз и выбрать необходимый вариант.

Динамические подсказки по коду для «src»
Динамические подсказки по коду для «src»

Если у вас есть ресурсы в библиотеках CC, эти ресурсы также отображаются при вводе «src». Эти ресурсы библиотеки CC отображаются со значком в виде облака.

При выборе ресурса библиотеки CC появляется всплывающее меню, в котором можно интерполировать размер изображения, а также изменить его формат.

Включение в код ресурса библиотеки CC
Включение в код ресурса библиотеки CC

Примечание.

В подсказках по коду могут отображаться максимум 50 ресурсов библиотек CC. Подсказки отображаются в алфавитном порядке.

Примечание.

В коде Dreamweaver не поддерживается включение удаленных ресурсов библиотеки CC.

Динамические подсказки по коду для «href»

При вводе атрибута «href» в Dreamweaver отображается список файлов в папке, где вы также можете выбрать файл, на который хотите создать ссылку.

Динамические подсказки по коду для «href»
Динамические подсказки по коду для «href»

Динамические подсказки по коду для «id» и «style»

Если было задано значение для идентификаторов в файлах CSS, то при вводе атрибута «id» в файлах HTML, Dreamweaver отображает все доступные варианты для «id».

Динамические подсказки по коду для «id»
Динамические подсказки по коду для «id»

Аналогичным образом, если было задано значение для стилей в файлах CSS, то при вводе тега «style» в файлах HTML, Dreamweaver отображает все доступные варианты для «style».

Динамические подсказки по коду для «style»
Динамические подсказки по коду для «style»

Подсказки по коду CSS

Подсказки по коду доступны для следующих типов CSS:

  • @rules
  • Свойства
  • Псевдоселекторы и псевдоэлементы
  • Сокращение

Помимо подсказок по коду для свойств CSS также доступны советы.

Подсказки по коду для правил @rules в CSS

Dreamweaver отображает подсказки по коду для всех правил @rules вместе с описанием определенного правила CSS, как показано ниже.

Подсказки по коду для правил @rules CSS
Подсказки по коду для правил @rules CSS

Подсказки для свойств CSS

При вводе текста в свойствах CSS (например, двоеточия) появляется подсказка по коду, которая поможет выбрать одно из допустимых значений.

В следующем примере кода при вводе font-family: отобразятся допустимые наборы шрифтов для «font».

Можно выбрать один из наборов шрифтов или открыть диалоговое окно «Управление шрифтами» в подсказках и самостоятельно задать предпочтительные шрифты. 

Подсказки и справка по коду для свойств CSS
Подсказки и справка по коду для свойств CSS

Также подсказки по коду полезны при работе с «color» в CSS. При вводе каких-либо свойств, связанных с «color» (например, цвет границы «border color» или цвет фона «background color»), и нажатии клавиши «двоеточие» в подсказках по коду отображается список цветов. Можно выбрать цвет из списка или же открыть палитру цветов непосредственно из подсказок по коду для выбора предпочтительного цвета.

Подсказки по коду CSS для «color»
Подсказки по коду CSS для «color»

Если в библиотеке CC есть цветовые образцы, то в подсказках по коду будут также отображаться и эти образцы.

Цветовые образцы из библиотек CC отображаются со значком в виде облака.
Цветовые образцы из библиотек CC отображаются со значком в виде облака.

Примечание.

В подсказках по коду могут отображаться максимум 50 ресурсов библиотек CC. Подсказки отображаются в алфавитном порядке.

Подсказки для псевдоселекторов и псевдоэлементов

Можно добавить к селектору псевдоселектор CSS, чтобы определить конкретное состояние элемента. Например, при использовании селектора :hover стиль применяется в том случае, когда пользователь проводит указателем мыши над элементом, указываемым селектором.

При вводе двоеточия (:) Dreamweaver отображает список допустимых псевдоселекторов при нахождении курсора в соответствующем контексте.

Подсказки по коду для псевдоселекторов
Подсказки по коду для псевдоселекторов

При вводе двойного двоеточия (::) Dreamweaver отображает список допустимых псевдоэлементов (используемых для задания стиля указанных частей элемента) при нахождении курсора в соответствующем контексте.

Подсказки по коду для псевдоэлементов
Подсказки по коду для псевдоэлементов

Подсказки для сокращенного CSS

Сокращенные свойства CSS — это свойства, которые позволяют одновременно задавать значения для нескольких других свойств CSS. В качестве примера сокращенных свойств CSS можно привести background и font.

Как показано в примере ниже, при вводе сокращенного свойства CSS (например, background) после ввода пробела Dreamweaver отображает:

  • соответствующие значения свойств в порядке релевантности;
  • обязательные значения, которые должны использоваться (например, если используется свойство font, то значения font-size и font-family обязательны);
  • расширение браузера для этого свойства.
Подсказки по коду для свойства CSS background
Подсказки по коду для свойства CSS background

При заполнении сокращенных свойств CSS подсказки по коду также отображают введенные значения свойств.

Советы по коду CSS

Для некоторых свойств CSS (например, box-shadow или text-shadow) Dreamweaver отображает советы, которые указывают, какие значения должны следовать далее, а также указывает с помощью звездочки на обязательные значения. 

Вы также можете просмотреть, как браузер интерпретирует CSS.

Советы, отображаемые для свойств CSS
Советы, отображаемые для свойств CSS

Подсказки по коду для JavaScript

Dreamweaver дает подсказки по коду для переменных и параметров функции в файлах JavaScript. 

В приведенном ниже примере фрагмент кода указывает на его тип.

Подсказки по коду для JavaScript
Подсказки по коду для JavaScript

Dreamweaver автоматически обновляет список доступных подсказок по коду при работе с файлами JavaScript. Например, во время работы с основным файлом HTML пользователь переключается на файл JavaScript, чтобы внести в него изменения. Изменения, внесенные в файл JavaScript, будут отражены в списке подсказок по коду после возвращения к основному файлу HTML. 

Примечание.

Автоматическое обновление работает лишь в том случае, если файлы JavaScript редактируются в Dreamweaver.

Интерактивная проверка объекта

Dreamweaver также автоматически обновляет подсказки по коду для JavaScript.

Например, если вы определили переменную как числовую, то Dreamweaver сохранит эту информацию. При последующей ссылке на эту переменную в коде будет указан ее тип.

Если изменить тип переменной (например, на строковый), то подсказки по коду Dreamweaver автоматически изменятся, указывая на то, что переменная является строкой.

Подсказка по коду указывает тип переменной
Подсказка по коду указывает тип переменной

Динамическое включение документации

Если вы добавили комментарии для определенной функции, то при отображении подсказки для нее Dreamweaver также включит документацию по этой функции. 

Подсказки по коду PHP

Dreamweaver поддерживает предоставление подсказок по коду для версий PHP 5.6 и 7.1. Такие подсказки по коду для PHP привязаны к конкретному веб-сайту и содержат все основные функции, классы и константы.

Дополнительные сведения о PHP версий 5.6 и 7.1 см. в руководстве по PHP.

Дополнительные сведения о подсказках по коду для конкретного веб-сайта см. в разделе Подсказки по коду для конкретного сайта.

Одной из полезных подсказок по коду PHP является автозавершение переменных.

При вводе символа доллара ($) отображается список всех переменных в текущем сценарии. Выберите необходимую переменную и нажмите клавишу Enter/Return. В списке также содержатся переменные из связанных файлов для исключения риска использования одной и той же переменной для разных целей.

Когда по умолчанию установлена версия PHP 7.1, в Dreamweaver отображаются специфические для PHP 7.1 подсказки по коду.

Подсказки по коду PHP 7
Подсказки по коду PHP 7

Пример подсказок по коду для объекта PHP
Пример подсказок по коду для объекта PHP

Изменение настроек задержки для подсказок по коду PHP

Для повышения удобства при наборе кода в PHP-файлах в приложении Dreamweaver 2017.5 и более поздних версий добавлена задержка для подсказок по коду PHP. При вводе кода PHP подсказки в Dreamweaver отображаются после задержки 400 мс. Если необходимо изменить настройки задержки для кода PHP, выполните следующие действия. 

  1. Закройте Dreamweaver.

  2. С помощью текстового редактора откройте файл brackets.json, находящийся в следующей папке:

    • Win%appdata%\Adobe\Dreamweaver CC 2017\<locale>\Configuration\Brackets\
    • macOS~/Library/Application Support/Adobe/Dreamweaver CC 2017/<locale>/Configuration/Brackets/
  3. Нажмите кнопку «Сохранить структуру» в правом верхнем углу диалогового окна.

    В файле JSON добавьте запятую после последней пары имя/значение.

    Добавьте следующую строку с требуемым временем задержки в миллисекундах: "delayInPHPHint": <время в миллисекундах>. Например, "delayInPHPHint": 200.

  4. Сохраните файл и запустите Dreamweaver.

Подсказки по коду для конкретного сайта

Dreamweaver позволяет разработчикам работать с Joomla, Drupal, Wordpress и другими платформами для просмотра подсказок по коду PHP при работе в представлении кода. Для отображения подсказок по коду необходимо создать файл конфигурации при помощи диалогового окна «Подсказки по коду для конкретного сайта». Конфигурация указывает Dreamweaver место для поиска подсказок по коду для конкретного веб-сайта.

Учебное видеоруководство по работе с подсказками по коду для конкретного веб-сайта см. по адресу www.adobe.com/go/learn_dw_comm13_ru.

Создание файла конфигурации

Воспользуйтесь диалоговым окном «Подсказки по коду для конкретного сайта», чтобы создать файл конфигурации для отображения подсказок по коду в Dreamweaver.

По умолчанию Dreamweaver сохраняет файл конфигурации в каталоге Adobe Dreamweaver CS5\configuration\Shared\Dinamico\Presets.

Примечание.

Создаваемые подсказки по коду относятся конкретно к веб-сайту, выбранному в Dreamweaver на панели «Файлы». Чтобы отображались подсказки по коду, страница, над которой ведется работа, должна находиться на выбранном в настоящий момент сайте.

  1. Выберите Веб-сайт > Параметры веб-сайта > Подсказки по коду для конкретного сайта.

    По умолчанию функция «Подсказки по коду для конкретного сайта» просматривает сайт, чтобы определить используемую платформу системы управления содержимым (CMS). По умолчанию Dreamweaver поддерживает три платформы: Drupal, Joomla и Wordpress.

    При помощи четырех кнопок справа от всплывающего меню «Структура» можно импортировать, сохранять, переименовывать и удалять структуры платформы.

    Примечание.

    Нельзя удалить или переименовать существующие структуры платформ, используемые по умолчанию.

  2. В текстовом поле укажите папку из корневого каталога для хранения файлов платформы. Можно щелкнуть значок папки рядом с текстовым полем для перехода в каталог файлов платформы.

    Dreamweaver отобразит древовидную структуру папок, содержащих файлы платформы. Если отображены все нужные папки и файлы, нажмите кнопку «ОК», чтобы выполнить просмотр. Если нужно настроить просмотр, перейдите к следующим шагам.

  3. Нажмите кнопку со знаком «плюс» (+) над окном «Файлы», чтобы выбрать файл или папку, которую нужно добавить к просмотру. В диалоговом окне «Добавление файлов и папок» можно указать расширения тех файлов, которые необходимо добавить.

    Примечание.

    Указав расширение файла, можно ускорить процесс просмотра.

  4. Для удаления файлов из просмотра выберите файлы, которые не нужно просматривать, и нажмите кнопку со знаком «минус» (–) над окном «Файлы».

    Примечание.

    Если выбрана платформа Drupal или Joomla, то диалоговое окно «Подсказки по коду для конкретного сайта» отображает дополнительный путь к файлу внутри папки конфигурации Dreamweaver.

    Не удаляйте его — он требуется для этих платформ.

  5. Чтобы настроить, как функция «Подсказки по коду для конкретного сайта» будет работать с определенным файлом или папкой, выберите файл или папку из списка и выполните одно из следующих действий:

    • Выберите «Сканировать эту папку», чтобы включить выбранную папку в просмотр.
    • Выберите «Рекурсивно», чтобы включить все файлы и папки в выбранном каталоге.
    • Нажмите кнопку «Расширения», чтобы открыть диалоговое окно «Поиск расширений», в котором можно указать расширения имен файлов, которые будут включены в просмотр для определенного файла или папки.

Сохранение структуры сайта

Можно сохранить настроенную структуру сайта, созданную в диалоговом окне «Подсказки по коду для конкретного сайта».

  1. Закройте Dreamweaver.

  2. Создайте нужную структуру файлов и папок, добавляя и удаляя их по своему усмотрению.

  3. Укажите имя для структуры веб-сайта и нажмите кнопку «Сохранить».

Примечание.

Если указанное имя уже используется, Dreamweaver предложит ввести другое имя либо подтвердить замену структуры с таким же именем. Структуры платформ, используемые по умолчанию, заменить нельзя.

Переименование структур веб-сайта

При переименовании структуры сайта помните, что нельзя использовать имена трех структур платформ, используемых по умолчанию для веб-сайта, а также слово «custom».

  1. Отобразите структуру для переименования.

  2. Щелкните значок «Переименовать структуру» в правом верхнем углу диалогового окна.

  3. Укажите новое имя для структуры и выберите «Переименовать».

Примечание.

Если указанное имя уже используется, Dreamweaver предложит ввести другое имя либо подтвердить замену структуры с таким же именем. Структуры платформ, используемые по умолчанию, заменить нельзя.

Добавление файлов или папок к структуре сайта

Можно добавить любые файлы и папки, связанные с платформой. После добавления файлов или папок можно указать расширения тех файлов, которые нужно просмотреть. 

  1. Нажмите кнопку со знаком «плюс» (+) над окном «Файлы», чтобы открыть диалоговое окно «Добавление файла или папки».

  2. В текстовом поле «Добавление файла или папки» введите путь к добавляемому файлу или папке. Также можно щелкнуть значок папки рядом с текстовым полем, чтобы перейти в каталог файла или папки.

  3. Нажмите кнопку со знаком «плюс» (+) над окном «Расширения», чтобы указать расширения тех файлов, которые нужно просмотреть.

    Примечание.

    Указав расширение файла, можно ускорить процесс просмотра.

  4. Нажмите кнопку «Добавить».

Просмотр сайта на предмет расширений файлов

Используйте диалоговое окно «Поиск расширений» для просмотра и изменения расширений файлов, включенных в структуру сайта.

  1. В диалоговом окне «Подсказки по коду для конкретного сайта» нажмите кнопку «Расширения».

    В диалоговом окне «Поиск расширений» будут выведены текущие расширения, доступные для просмотра.

  2. Чтобы добавить в этот список новое расширение, нажмите кнопку со знаком «плюс» (+) над окном «Расширения».

  3. Для удаления расширения из списка нажмите кнопку со знаком «минус» (–).

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет