Среда написания кода в Dreamweaver

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

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

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

• Представление кода. Минималистичная раскладка, дающая возможность работать исключительно с кодом, не отвлекаясь на лишние панели или окна. Дополнительные сведения см. в разделе Просмотр кода в окне «Документ».
• Представление «Разделение». В данном представлении совмещены представления «Код» и «Дизайн» (или режим интерактивного просмотра), что позволяет отслеживать вносимые вами изменения по мере написания кода. Дополнительные сведения см. в разделе Представление «Разделение» — одновременный ввод кода и редактирование страницы в окне «Документ».

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

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

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

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

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

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

Быстрое написание кода в 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
• Подсказки по коду PHP

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

• Миграция с PHP 5.6.x на PHP 7.0.x: http://php.net/manual/en/migration70.php
• Миграция с PHP 7.0.x на PHP 7.1: http://php.net/manual/en/migration71.php
• Дополнительные сведения о PHP 7.1: http://php.net/releases/7_1_0.php

Подсказки по коду для объектов 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) этот файл открывается не в представлении «Дизайн», а в представлении «Код» (или в окне инспектора кода). Пользователь может указать типы файлов, которые следует открывать в представлении «Код».