Выберите меню «Правка» > «Настройки» (Windows) или «Dreamweaver» > «Настройки» (Macintosh).
- Руководство пользователя Dreamweaver
- Введение
- Dreamweaver и Creative Cloud
- Рабочие среды и представления Dreamweaver
- Настройка сайтов
- О сайтах Dreamweaver
- Настройка локальной версии сайта
- Подключение к серверу публикации
- Настройка тестового сервера
- Импорт и экспорт параметров сайта Dreamweaver
- Перенос существующих веб-сайтов с удаленного сервера в корневой каталог локального сайта
- Специальные возможности в Dreamweaver
- Дополнительные настройки
- Настройка установок сайта для передачи файлов
- Задание параметров прокси-сервера в Dreamweaver
- Синхронизация настроек Dreamweaver с Creative Cloud
- Использование Git в Dreamweaver
- Управление файлами
- Создание и открытие файлов
- Управление файлами и папками
- Получение файлов с сервера и размещение их на нем
- Возврат и извлечение файлов
- Синхронизация файлов
- Сравнение файлов
- Скрытие файлов и папок на сайте Dreamweaver
- Включение заметок разработчика для сайтов Dreamweaver
- Предотвращение использования уязвимости Gatekeeper
- Макет и оформление
- Использование средств визуализации для создания макета
- Об использовании CSS для создания макета страницы
- Создание динамичных веб-сайтов с помощью Bootstrap
- Создание и использование медиазапросов в Dreamweaver
- Представление содержимого в таблицах
- Цвета
- Гибкий дизайн с использованием «резиновых» макетов
- Extract в Dreamweaver
- CSS
- Общие сведения о каскадных таблицах стилей
- Создание макетов страниц с помощью конструктора CSS
- Использование препроцессоров CSS в Dreamweaver
- Установка настроек стиля CSS в Dreamweaver
- Перемещение правил CSS в Dreamweaver
- Преобразование встроенного CSS в правило CSS в Dreamweaver
- Работа с тегами div
- Применение градиентов к фону
- Создание и редактирование эффектов перехода CSS3 в Dreamweaver
- Форматирование кода
- Содержимое страницы и ресурсы
- Задание свойств страницы
- Задание свойств заголовка CSS и свойств ссылки CSS
- Работа с текстом
- Поиск и замена текста, тегов и атрибутов
- Панель DOM
- Редактирование в режиме интерактивного просмотра
- Кодировка документов в Dreamweaver
- Выбор и просмотр элементов в окне документа
- Задание свойств текста в инспекторе свойств
- Проверка орфографии на веб-странице
- Использование горизонтальных линеек в Dreamweaver
- Добавление и изменение сочетаний шрифтов в Adobe Dreamweaver
- Работа с ресурсами
- Вставка и обновление даты в Dreamweaver
- Создание и управление избранными ресурсами в Dreamweaver
- Вставка и редактирование изображений в Dreamweaver
- Добавление мультимедийных объектов
- Добавление видео Dreamweaver
- Добавление видео HTML5
- Вставка файлов SWF
- Добавление звуковых эффектов
- Добавление аудио HTML5 в Dreamweaver
- Работа с элементами библиотеки
- Использование текста на арабском языке и иврите в Dreamweaver
- Создание ссылок и навигация
- Графические элементы и эффекты jQuery
- Написание кода веб-сайтов
- О программировании в Dreamweaver
- Среда написания кода в Dreamweaver
- Настройка параметров написания кода
- Настройка цветового оформления кода
- Написание и редактирование кода
- Подсказки по коду и автозавершение кода
- Свертывание и развертывание кода
- Повторное использование фрагментов кода
- Анализ Linting для проверки кода
- Оптимизация кода
- Редактирование кода в представлении «Дизайн»
- Работа с содержимым заголовков для страниц
- Вставка серверных включений в Dreamweaver
- Использование библиотек тегов в Dreamweaver
- Импорт пользовательских тегов в Dreamweaver
- Использование вариантов поведения JavaScript (общие инструкции)
- Применение встроенных вариантов поведения JavaScript
- Сведения об XML и XSLT
- Выполнение XSL-преобразования на стороне сервера в Dreamweaver
- Выполнение XSL-преобразования на стороне клиента в Dreamweaver
- Добавление символьных сущностей для XSLT в Dreamweaver
- Форматирование кода
- Процессы взаимодействия продуктов
- Установка и использование расширений в Dreamweaver
- Обновления в Dreamweaver, устанавливаемые через приложение
- Вставить документы Microsoft Office в Dreamweaver (только для Windows)
- Работа с Fireworks и Dreamweaver
- Редактирование содержимого на сайтах Dreamweaver с помощью Contribute
- Интеграция Dreamweaver с Business Catalyst
- Создание персонализированных кампаний почтовой рассылки
- Шаблоны
- О шаблонах Dreamweaver
- Распознавание шаблонов и документов на их основе
- Создание шаблона Dreamweaver
- Создание редактируемых областей в шаблонах
- Создание повторяющихся областей и таблиц в Dreamweaver
- Использование дополнительных областей в шаблонах
- Определение редактируемых атрибутов тега в Dreamweaver
- Создание вложенных шаблонов в Dreamweaver
- Редактирование, обновление и удаление шаблонов
- Экспорт и импорт XML-содержимого в Dreamweaver
- Применение или удаление шаблона из существующего документа
- Редактирование содержимого в шаблонах Dreamweaver
- Правила синтаксиса для тегов шаблона в Dreamweaver
- Настройка предпочтений выделения для областей шаблона
- Преимущества использования шаблонов в Dreamweaver
- Мобильные и многоэкранные устройства
- Динамические сайты, страницы и веб-формы
- Общие сведения о веб-приложениях
- Настройка компьютера для разработки приложений
- Устранение неполадок подключений к базам данных
- Удаление сценариев подключения в Dreamweaver
- Дизайн динамических страниц
- Обзор динамических источников содержимого
- Определение источников динамического содержимого
- Добавление динамического содержимого на страницы
- Изменение динамического содержимого в Dreamweaver
- Отображение записей баз данных
- Введение интерактивных данных и устранение неполадок с ними в Dreamweaver
- Добавление заказных вариантов поведения сервера в Dreamweaver
- Создание форм с помощью Dreamweaver
- Использование форм для сбора информации от пользователей
- Создание и включение форм ColdFusion в Dreamweaver
- Создание веб-форм
- Расширенная поддержка HTML5 для компонентов формы
- Разработка формы с помощью Dreamweaver
- Визуальное построение приложений
- Создание главной страницы и страницы сведений в Dreamweaver
- Создание страниц поиска и результатов поиска
- Создание страницы для вставки записи
- Создание страницы обновления записи в Dreamweaver
- Создание страниц удаления записей в Dreamweaver
- Применение ASP-команд для изменения базы данных в Dreamweaver
- Создание страницы регистрации
- Создание страницы входа
- Создание страницы с доступом только для авторизованных пользователей
- Защита папок в ColdFusion с помощью Dreamweaver
- Использование компонентов ColdFusion в Dreamweaver
- Тестирование, просмотр и публикация веб-сайтов
- Устранение неполадок
Узнайте, как настроить цвета элементов кода (цветовое оформление кода, например комментарии кода) в Dreamweaver.
Чтобы изменить параметры цветового оформления интерфейса в Dreamweaver, выберите «Правка» > «Установки» > «Интерфейс».
Можно выбрать одну из четырех цветовых тем, а также светлую или темную тему кода.
После установки цветовой темы и темы кода можно дальше персонализировать цвета кода в Dreamweaver, редактируя селекторы во встроенном файле main.less.
Установка цветовых тем и тем кода
Можно выбрать цветовую тему в соответствии с настроенными параметрами при запуске Dreamweaver. Можно также изменить эту настройку в любое время.
-
-
В списке категорий слева выберите «Интерфейс».
-
Выберите тему из списка цветовых тем.
-
После настройки темы интерфейса задайте тему кода.
Можно выбрать светлую или темную тему кода. Затем можно сохранить эту тему с новым именем и настроить ее дальше.
-
Нажмите кнопку «Применить», чтобы сохранить изменения.
Настройка тем кода
После выбора темы кода настройте цвета кода, сохранив тему кода с новым именем и отредактировав ее.
-
Выберите меню «Правка» > «Настройки» (Windows) или «Dreamweaver» > «Настройки» (Macintosh).
-
Выберите темную или светлую тему кода, а затем щелкните значок «плюс» и сохраните тему с новым именем.
Примечание.Стандартные светлую и темную темы кода нельзя редактировать, поэтому необходимо внести изменения в копию этой темы. Новые создаваемые темы можно свободно редактировать.
-
Сохраните стандартную тему кода с новым именем.
-
Выберите новую созданную тему кода и щелкните значок «Правка».
Файл main.less откроется в Dreamweaver, и можно будет отредактировать селекторы в теме, чтобы настроить цвета кода.
Новые цвета установятся в представлении кода при сохранении файла main.less.
Редактирование селекторов в файле main.less
Прежде чем начать редактирование селекторов в файле main.less file, посвятите несколько минут ознакомлению с комментариями и инструкциями в файле темы. Если вы не знаете точно, какой селектор нужно отредактировать, ознакомьтесь со следующими ресурсами:
- Общие сведения о селекторах — справочные таблицы, содержащие информацию об элементах кода, затрагиваемых определенным селектором.
- Использование Token Inspector — Token Inspector служит для проверки отдельного файла и выделения элементов кода, затрагиваемых определенным селектором.
- Если нужно изменить цветовое оформление кода для комментариев или настроить цвет выделения для парных тегов, см. примеры кода, представленные в разделе Примеры настройки кода.
Теперь, когда известно, какие селекторы нужно отредактировать, внесите изменения в файл main.less.
-
Переходите в конец файла, пока не появится следующий комментарий:
/* Custom code colors or overrides should start after this line */
-
Введите селекторы для элементов кода, цвета которых нужно изменить. Используйте синтаксис, который выглядит примерно так:
.cm-tag {color: #00D0D0; }
Примечание.Если внутри одного файла находятся несколько языков программирования и вы хотите иметь возможность
задать для каждого языка его собственное цветовое оформление, см. раздел Настройка цветового оформления кода для смешанных файлов. -
Сгруппируйте несколько селекторов, если нужно назначить один цвет для нескольких элементов. В следующем примере нескольким селекторам, разделенным запятыми, назначается один цвет.
.cm-atom, .cm-string, .cm-string-2, .cm-hr {color: #cf681d;}
-
Чтобы настроить цветовое оформление кода под конкретный тип файлов, заключите селекторы элемента кода в селектор типа файлов, как показано в следующем примере:
.HTML{ .cm-tag{ color: #00D0D0;} }
-
После внесения изменений сохраните файл.
Dreamweaver обновит представление кода во всех открытых документах, установив новые цвета.
При обнаружении в изменениях синтаксических ошибок или неопределенных переменных Dreamweaver не загружает внесенные пользовательские изменения кода, а переходит к стандартной темной теме кода.
Настройка цветового оформления кода для смешанных файлов кода
Если вы работаете с файлами в смешанном режиме (в одном файле содержатся различные языки программирования), например HTML/CSS, HTML/PHP или HTML/JavaScript, то вы можете настроить цветовое оформление кода следующим образом.
-
Создайте пользовательскую тему кода, следуя инструкциям в разделе Настройка тем кода. Выберите новую тему и примените ее.
-
Закройте Dreamweaver.
-
Откройте файл package.json в текстовом редакторе.
В Windows: %appdata%\Adobe\Dreamweaver CC 2017\ru_RU\Configuration\Brackets\extensions\user\\
В Mac: ~/Library/Application Support/Adobe/Dreamweaver CC 2017/ru_RU/Configuration/Brackets/extensions/user//
Добавьте следующую строку в тему:
"addModeClass": true
-
Откройте Dreamweaver, выберите меню «Редактирование > Настройки > Интерфейс», выберите новую тему и щелкните значок «Редактировать».
-
Добавьте специфические для режима стили в конец файла main.less.
Используйте селекторы, перечисленные в следующей таблице, чтобы отредактировать цветовое оформление кода для соответствующего типа файлов.
Селектор
Тип файла с кодом
.cm-m-clike
PHP
.cm-m-css
CSS, Less
.cm-m-javascript
JavaScript
.cm-m-xml
HTML, XML
Например, для настройки цветов кода для имен тегов в CSS и тегов стиля внутри HTML или PHP используйте следующий синтаксис:
.cm-tag {color: #BD46BD;} .cm-m-css.cm-tag {color: #38D08B;}
-
Сохраните файл main.less.
Теперь изменения в цветовом оформлении кода отражены в ваших файлах.
Примеры настройки кода
Просмотрите следующие примеры, чтобы узнать, как можно настроить цветовое оформление кода для различных сценариев.
Настройка цвета для подсветки парных тегов
В файле main.less выполните поиск следующего фрагмента кода и задайте требуемый цвет.
.CodeMirror-matchingbracket, .CodeMirror-matchingtag { /* Ensure visibility against gray inline editor background */ background-color: #B53A3A; color: #fff!important;
Данный фрагмент кода зависит от темы. В некоторых темах он может отсутствовать.
Настройка цвета для комментариев кода
В файле main.less выполните поиск следующего фрагмента кода и задайте требуемый цвет.
.cm-comment {color: #717171; font-style: italic;}
Общие сведения о селекторах
Чтобы изменить цвета в элементах кода, отредактируйте свойства селекторов в файле main.less.
Однако прежде чем приступить к изменению селекторов в файле main.less, важно знать, что означают разные селекторы и на какие элементы кода они влияют. Просмотрите следующую таблицу, чтобы понять, на какие элементы кода в файлах HTML, CSS, JavaScript и PHP влияют эти селекторы.
Можно также использовать Token Inspector для получения информации об элементах кода, затрагиваемых определенным селектором.
Селекторы | HTML | CSS | JavaScript | PHP |
---|---|---|---|---|
.cm-atom | Имена сущностей, например | Цвет в формате Hex, RGB или HSL, предустановленные значения атрибутов, например strong, none, auto, inherit и т. д. | true, false, null, undefined, NaN, Infinity | «True», «False», «Null» и магические константы, например «__LINE__», «__DIR__» и т. д. |
.cm-attribute | Имя атрибута | Типы носителей, например «все», «шрифт Брайля», «печать», «экран» и т. д. | ||
.cm-bracket | Скобки, например <, >, /> и </ | |||
.cm-builtin | Селектор идентификатора | Встроенные функции, например «htmlspecialchars», «trim», «substr» и т. д. | ||
.cm-comment | Комментарий | Комментарий | Комментарий | Комментарии |
.cm-def | «@ правило» | переменная, определение функции и параметр функции | Имя функции в определении функции | |
.cm-error | Закрывающие теги без открывающего тега Отсутствуют кавычки для значения атрибута |
Ошибка из-за отсутствия скобок { }, из-за отсутствия кавычек для значения свойства либо из-за нераспознанного свойства | ||
.cm-keyword | Названия цветов, !important, ключевые слова в @media, например «and», «only» и т. д. | Ключевые слова для управляющих структур (if, else и т. д.): in, of, from, default, public, private и т. д. | Ключевые слова, например function, if, else, new, echo, isset и т. д. | |
.cm-meta | Объявление <!DOCTYPE> | Префиксы для конкретных браузеров, например -webkit-, -o- и т. д. | Многоточие в синтаксисе расширения. Пример: myFunction(...iterableObj); | Объявление <!DOCTYPE>, а также открывающие и закрывающие теги PHP: <?php, ?> |
.cm-number | Любое число с единицей измерения и без нее | Любое число, например 12, 2,1, 123e-5, 0x11, 0b11, 0o11 и т. д. | Любое число, например 12, 2,1, 0x11, 0b11, 0123, 5,0E+19 и т. д. | |
.cm-operator | Операторы: +, -, *, +=, !==, &&, >>> и т. д. | Такие операторы, как ===, &&, !, =>, +, - и т. д. | ||
.cm-property | Имя свойства | Свойство или метод объекта | ||
.cm-qualifier | Селектор классов | |||
.cm-string | Значение атрибута | Обычная строка, например строка, передаваемая для вызова url(), имя шрифта в кавычках и т. д. | Литеральная строка | Литеральная строка |
.cm-string-2 | Нестандартные свойства, например «scrollbar-arrow-color», «scrollbar-base-color» и т. д. | Регулярные выражения | ||
.cm-tag | Имя тега | Селектор тегов | ||
.cm-variable | Имена шрифтов без кавычек | Глобальные переменные/функции, ссылки на классы | Определяемые пользователем имена функций, ссылки на интерфейсы/классы, свойства классов, приведения типов | |
.cm-variable-2 | Пользовательские свойства, например «main-bg-color» | Ссылки на переменные/функции с заданной областью | Определяемые пользователем и предопределенные переменные, параметры или атрибуты | |
.cm-variable-3 | Псевдоклассы, например :hover, :focus и т. д., и псевдоэлементы, например ::first-letter, ::selection и т. д. |
В следующей таблице представлены шаблоны и библиотеки Dreamweaver, на которые влияют селекторы в файле main.less.
Селектор |
Шаблоны (DWT) |
Библиотека (LBI) |
---|---|---|
.cm-templateComment |
Комментарии к шаблону |
|
.cm-templateAttrVal |
Значения атрибутов в комментариях к шаблону |
|
.cm-instanceParam |
Комментарий и атрибут InstanceParam |
|
.cm-instanceParamAttrVal |
Значения атрибутов InstanceParam |
|
.cm-libraryItem |
|
Вставленные библиотеки в документе. Пример: .cm-libraryItem { color: #3A3A3A; background-color: #A4A4A4; } |
В следующей таблице представлены селекторы, используемые для настройки цветового оформления кода в тех случаях, когда внутри одного файла находятся несколько языков программирования.
Селектор |
Тип файла с кодом |
---|---|
.cm-m-clike |
PHP |
.cm-m-css |
CSS, Less |
.cm-m-javascript |
JavaScript |
.cm-m-xml |
HTML, XML |
Использование Token Inspector
Чтобы узнать, как селекторы в файле темы main.less влияют на элементы кода в файлах кода (кроме HTML, CSS, JavaScript и PHP), используйте программу Token Inspector.
-
Откройте Token Inspector с помощью Google Chrome.
Программа TokenInspector включает следующие разделы:
- редактор кода,
- команда изменения режимов и
- список селекторов справа.
A. Редактор кода B. Команда изменения режима C. Список селекторов
-
Скопируйте и вставьте содержимое файла в редактор кода.
-
Чтобы изменить режим файла, введите расширение файла и нажмите кнопку Change mode (Изменить режим).
Например, если это HTML-файл, измените расширение имени файла на html. Страница обновится, чтобы отразить изменение режима, и текущий режим установится в верхней части страницы.
-
Выберите элемент кода, внешний вид которого нужно изменить.
После этого Token Inspector выделит селектор.
-
Кроме того, можно выбрать отдельный селектор, чтобы увидеть, на какие элементы кода в файле кода он влияет (необязательно).
-
Запишите селекторы, которые нужно отредактировать и обновить, и закройте Token Inspector.