Узнайте, как среда написания кода в Dreamweaver ускоряет процесс написания кода.

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

Если вам нужна дополнительная функциональность, нажмите кнопку «Окно» и выберите необходимые панели.

Примечание.

Если ни одна из стандартных рабочих сред в точности не соответствует вашим потребностям, то существует возможность создать собственный макет рабочей среды. Для этого откройте необходимые панели и расположите их в удобном месте, после чего сохраните полученную среду как пользовательскую. Дополнительные сведения см. в разделе Создание пользовательских рабочих сред.

Работа с кодом в Dreamweaver

Работать в Dreamweaver с кодом можно несколькими способами. Можно использовать следующее.

Переключение между различными представлениями осуществляется при помощи кнопок «Код», «Разделение» и «Дизайн/интерактив» в верхней части рабочей среды.

Можно также воспользоваться функцией «Инспектор кода» для отображения HTML во всплывающем окне. Инспектор кода позволит вам одновременно видеть код и дизайн веб-сайта без необходимости разделять свой экран. Дополнительные сведения см. в разделе Просмотр кода в отдельном окне с помощью инспектора кода.

Просмотр кода в окне «Документ» — представление кода

Выберите «Вид» > «Код».

Одновременный ввод кода и редактирование страницы в окне «Документ» — представление «Разделение»

  1. Выберите «Просмотр» > «Код и дизайн».

    Код будет отображаться на верхней панели, а страница — на нижней панели.

  2. Чтобы страница отображалась наверху, в меню «Параметры просмотра» панели инструментов «Документ» нужно выбрать пункт «Представление "Дизайн" наверху».
  3. Настройте размер панелей окна «Документ» с помощью панели разделителя. Панель разделителя расположена между двумя панелями.

    Представление кода обновляется автоматически при внесении изменений в представление «Дизайн». После внесения изменений в представлении «Код» обновите вручную документ в представлении «Дизайн», для чего щелкните мышью по представлению «Дизайн» или нажмите клавишу F5.

Просмотр кода в отдельном окне с помощью инспектора кода

Инспектор кода дает пользователю возможность работать в отдельном окне написания кода так же, как он работает в представлении «Код».

  1. В меню «Окно» выберите пункт «Инспектор кода». Панель инструментов имеет следующие параметры.

    Управление файлами.

    Помещает или открывает файл.

    Просмотр/Отладка в браузере.

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

    Обновление представления «Дизайн».

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

    Навигация по коду.

    Дает возможность быстро перемещаться по коду. См. раздел переход к функции JavaScript или VBScript.

    Параметры просмотра.

    Позволяет определять способ отображения кода. См. раздел Настройка внешнего вида кода.

Быстрое написание кода в Dreamweaver

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

Вот некоторые возможности, предлагаемые Dreamweaver.

Подсказки по коду и автозавершение кода

Функция подсказок по коду (или автозавершения кода) в Dreamweaver позволяет выбирать теги, атрибуты и стили CSS из всплывающего меню по мере ввода текста. Эта функция автоматического завершения кода позволяет писать код быстрее и с меньшим количеством ошибок.

Ниже приведен пример, показывающий, как это работает в HTML. 

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

Поддержка подсказок по коду также доступна для CSS, JavaScript и PHP (PHP версий 5.6 и 7.1). 

Дополнительные сведения см. в разделе Подсказки по коду и автозавершение кода.

Поддержка для версий PHP 5.6 и 7.1

Dreamweaver поддерживает PHP версий 5.6 и 7.1. 

Скомпилировать файлы PHP для сайта можно в среде PHP версии 5.6 или 7.1 с помощью диалогового окна «Настройка сайта» (отдельно для каждого сайта) или параметров приложения (для всех файлов PHP, сохраненных за пределами сайтов Dreamweaver). Затем Dreamweaver настраивает подсказки по коду и проверки с linting-анализом кода для выбранной версии языка PHP.

Для новых сайтов в Dreamweaver версия компилятора PHP по умолчанию устанавливается в соответствии с параметром, заданным в Правка > Настройки > PHP.

Дополнительные сведения о поддержке PHP в Dreamweaver см. в следующем разделе:

Общие сведения о PHP версий 5.6 и 7.1 доступны на следующих ресурсах.

Подсказки по коду для объектов JavaScript

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

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

Дополнительные сведения см. в разделе Подсказки по коду и автозавершение кода.

Реструктуризация кода JavaScript

Dreamweaver поддерживает реструктуризацию кода. Реструктуризация кода — это процедура перестройки существующего компьютерного кода без изменения его внешнего поведения. Код становится более понятным и доступным для чтения. Отладка кода экономит время за счет небольших функций и правильной замены. С реструктуризацией JavaScript вы можете переименовывать функции и переменные с учетом особенностей области.

Дополнительные сведения см. в разделе Написание и редактирование кода

Цветовое оформление кода для различных типов файлов

Dreamweaver поддерживает цветовое оформление кода для 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 и YAML.

Дополнительные курсоры для повторяющихся задач

Вводите несколько строк кода за один раз для быстрого выполнения таких операций, как создание маркированного списка, обновление набора строк, а также вносите одновременно сразу несколько изменений.

Эта функция позволяет значительно повысить вашу производительность, поскольку вам не придется по несколько раз писать одну и ту же строчку кода. Функция поддержки нескольких курсоров позволяет написать все одинаковые строчки одновременно.

При редактировании кода можно делать следующее.

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

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

Быстрое редактирование связанных файлов кода

Для быстрого внесения правок в свой код поместите курсор на нужный фрагмент кода и используйте контекстное меню или нажмите Ctrl-E (в Windows) или Cmd-E (в Mac OS) для перехода в режим быстрого редактирования.

Dreamweaver предоставляет подходящие для данного контекста параметры кода и инструменты.

Возможный сценарий использования

Рассмотрим следующий пример.

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

Вместо того чтобы переключаться между вкладками, щелкните правой кнопкой мыши нужную часть кода и выберите пункт «Быстрое редактирование» или же воспользуйтесь соответствующим сочетанием клавиш, после чего Dreamweaver откроет соответствующую часть кода в связанном файле CSS, не закрывая при этом HTML-файл.

После этого можно будет редактировать CSS-код без переключения между вкладками. Все изменения будут автоматически внесены в CSS-файл.

Дополнительные сведения см. в разделе Быстрое редактирование.

Контекстная документация CSS

Функция «Быстрые документы» позволяет документировать свойства CSS, не выходя из представления «Код».

Теперь не придется переходить из Dreamweaver на веб-страницу для просмотра свойств CSS. Нажмите Ctrl+K (в Windows) или Cmd+K (в Mac OS), чтобы активировать функцию «Быстрые документы».

Дополнительные сведения см. в разделе Получение справки по CSS в Dreamweaver с помощью функции «Быстрые документы».

Интегрированная поддержка сокращений Emmet

Emmet — это подключаемый модуль, позволяющий ускорить разработку и создание кода HTML и CSS.

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

Используйте сокращения Emmet в Dreamweaver в представлении кода или в инспекторе кода. Нажав клавишу Tab, можно расширить эту функцию на разметку HTML или CSS.

Сокращения HTML разворачиваются на страницах HTML и PHP.

Сокращения CSS разворачиваются на страницах CSS, LESS, Sass, SCSS или внутри тега style на HTML-странице.

Дополнительные сведения об использовании Emmet см. в разделе Использование набора инструментов Emmet с Dreamweaver.

Свертывание кода

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

Можно сворачивать код на основе тегов или скобок, а также на основе выбранного фрагмента. 

Дополнительные сведения см. в разделе Свертывание и развертывание кода.

Проверка кода

Dreamweaver предоставляет мощные функции linting-анализа для устранения ошибок в коде. 

Эти функции позволяют анализировать код для выявления возможных ошибок или случаев подозрительного использования кода. Linting-анализ в Dreamweaver позволяет выявить проблемы с синтаксисом HTML и парсингом CSS, предупреждения в файлах JavaScript и другие ошибки.

Дополнительные сведения о linting-анализе кода в Dreamweaver см. в разделе Linting-анализ кода.

Если при работе с PHP в вашем документе обнаруживается недопустимый код, Dreamweaver отображает этот код в представлении дизайна (если открыто) и выделяет его в представлении кода (в зависимости от заданных вами настроек).

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

Примечание.

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

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

Дополнительные сведения о задании настроек написания кода см. в разделе Настройка параметров написания кода.

Поддержка препроцессоров CSS

Теперь Dreamweaver поддерживает наиболее распространенные препроцессоры CSS (например, SASS, Less и SCSS) с полной поддержкой функций цветового оформления кода, подсказок по коду и компиляции. 

Поддержка препроцессора CSS позволяет намного быстрее работать с большими сайтами со сложными таблицами стилей.

Дополнительные сведения о поддержке препроцессоров CSS в Dreamweaver см. в разделе Использование препроцессоров CSS в Dreamweaver.

Сохранение и повторное использование фрагментов кода

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

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

Фрагменты можно также использовать на разных устройствах и в разных версиях Dreamweaver с помощью функции синхронизации параметров.

Дополнительные сведения см. в разделе Повторное использование фрагментов кода.

Просмотр в реальном времени в браузере

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

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

Настройка сочетаний клавиш

В Dreamweaver можно использовать привычные сочетания клавиш. Если вы привыкли работать с определенными сочетаниями клавиш, например использовать Shift+Enter для добавления разрыва строки или Ctrl+G для перехода в определенное место кода, эти сочетания можно добавить в Dreamweaver с помощью редактора сочетаний клавиш.

Инструкции см. в разделе Настройка сочетаний клавиш.

Открытие файлов в представлении «Код» по умолчанию

При открытии файла такого типа, который не должен содержать код HTML (например, файла JavaScript) этот файл открывается не в представлении «Дизайн», а в представлении «Код» (или в окне инспектора кода). Пользователь может указать типы файлов, которые следует открывать в представлении «Код».

  1. Выберите меню «Правка» > «Настройки» (Windows) или «Dreamweaver» > «Настройки» (Macintosh).
  2. В списке категорий слева выберите пункт «Типы файлов и редакторы».
  3. В поле «Открыть в представлении кода» добавьте расширение имени файла для типа файлов, которые будут автоматически открываться в представлении «Код».

    Между расширениями имен файлов вводите символ пробела. Допускается добавление любого числа расширений.

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

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