Поместите курсор в пределах кода.
Последнее обновление
27 апр. 2021 г.
Узнайте, как работать в представлении кода, и извлеките максимум из возможностей кодирования в Dreamweaver.
Существует несколько способов работы с кодом в Dreamweaver.
Откройте новый файл кода с помощью диалогового окна «Новый документ» и начните вводить код.
По мере ввода появляются подсказки по коду, позволяющие выбирать код из нескольких вариантов и избегать опечаток. Получите помощь по CSS, когда она вам нужна, используя полезную функцию Dreamweaver Quick Docs.
Вы также можете вставлять код с помощью панели «Вставка» или использовать сочетания клавиш для кодирования, например сокращения Emmet.
Если вы копируете и вставляете один и тот же фрагмент кода несколько раз, попробуйте эти функции для экономии времени:
- Панель «Фрагменты» незаменима для быстрого создания и вставки предварительно отформатированных фрагментов кода.
- Несколько курсоров позволяют создавать и редактировать несколько строк кода одновременно.
Dreamweaver также предоставляет мощный набор инструментов редактирования, которые делают навигацию и внесение изменений в код плавным процессом.
- Используйте функцию поиска и замены Dreamweaver для поиска тегов, атрибутов или текста в коде.
- Используйте Навигатор по коду для навигации по связанному коду как внутри, так и вне текущего файла. Еще лучше использовать функцию Quick Edit для редактирования кода в связанных файлах без открытия файла в новой вкладке.
- Щелкните правой кнопкой мыши по коду, чтобы открыть простое соответствующее контекстное меню, которое позволяет редактировать код напрямую.
- Используйте Wrap Tag для заключения текста в теги.
Читайте дальше, чтобы получить дополнительную информацию обо всех этих возможностях кода.
Вставка кода из панели «Вставка»
На панели «Вставка» выберите соответствующую категорию.
Нажмите кнопку на панели «Вставка» или выберите элемент
из всплывающего меню на панели «Вставка».
При нажатии на значок код немедленно появляется на странице или открывается диалоговое окно с запросом дополнительной информации для завершения кода.
Число и тип кнопок, доступных на панели «Вставка», зависят от типа текущего документа. Кроме того, эти параметры зависят от используемого представления («Код» или «Дизайн»).
Используйте набор инструментов Emmet с Dreamweaver
Emmet — это подключаемый модуль, позволяющий ускорить разработку и создание кода HTML и CSS.
Используйте сокращения Emmet в Dreamweaver в представлении кода или в инспекторе кода. Нажав клавишу Tab, можно расширить эту функцию на разметку HTML или CSS.
Сокращения HTML разворачиваются на страницах HTML и PHP. Сокращения CSS разворачиваются на страницах CSS, LESS, SASS, SCSS или внутри тега style на HTML-странице.
Вот несколько примеров, демонстрирующих использование сокращений Emmet в представлении кода. Подробную информацию и справочные материалы см. в документации Emmet.
Примечание
Dreamweaver в настоящее время поддерживает сокращения Emmet 1.2.2.
Пример 1. Вставка HTML-кода с помощью Emmet
Чтобы быстро добавить HTML-код для неупорядоченного списка с тремя элементами, откройте HTML-файл и введите следующее сокращение Emmet в режиме кода внутри <body></body>:
div>(ul>li*3>{Lorem Ipsum})+p*4>lorem
Теперь убедитесь, что курсор размещен непосредственно после сокращения Emmet, и нажмите клавишу Tab, чтобы развернуть сокращение. Или выберите все сокращение и нажмите Enter.
Сокращение разворачивается в следующий код:
<div>
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora temporibus vel.</p>
<p>Ipsa, distinctio, eveniet ad numquam libero quam doloremque culpa illo ex possimus eligendi amet nesciunt provident inventore rerum facere ea veritatis itaque? Suscipit rem asperiores excepturi sapiente enim architecto esse.</p>
<p>Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.</p>
<p>Dignissimos, molestiae, quis ducimus ratione temporibus sed accusamus libero consequuntur ex velit maiores illum repudiandae cum! Dolorum, dolore, pariatur, incidunt in saepe laudantium consequatur provident totam vero velit nobis accusantium!</p>
</div>
Пример 2: вставка CSS-кода с помощью Emmet
Чтобы вставить CSS-код для создания радиуса границы с префиксами поставщиков, откройте ваш CSS-файл и введите следующее сокращение Emmet внутри класса:
-bdrs
При нажатии TAB сокращение развернется в следующий код:
-webkit-border-radius: ;
-moz-border-radius: ;
border-radius: ;
Работа с комментариями кода
Комментарий — это текст описания, вставляемый пользователем в код HTML для разъяснения кода или содержащий другие сведения. Текст комментария виден только в представлении «Код» и не отображается в браузере.
Добавление комментариев к коду
Чтобы добавить комментарий, сначала введите его текст. Затем поместите курсор в точку вставки и нажмите значок «Вставить» на панели инструментов, чтобы открыть подменю «Применить комментарий».
Можно также выделить текст и преобразовать его в комментарий. Выделенный текст обернется в блок комментария.
Добавлять комментарии можно с различными параметрами синтаксиса. Выберите соответствующий синтаксис, и Dreamweaver выполнит вставку тегов. Вам нужно только ввести текст комментария.
Также можно использовать сочетания клавиш CTRL+/ (в Windows) или CMD+/ (на Mac) для добавления комментариев.
Если при использовании сочетания клавиш выделенный текст отсутствует, то комментарием становится текущая строка. Если выделить текст и использовать сочетание клавиш, комментарий применится к выделенному тексту.
Удаление комментариев из кода
Для удаления комментариев кода выделите код и щелкните по значку «Удалить комментарий» на панели инструментов. Также можно использовать сочетания клавиш CTRL-/ (в Windows) или CMD-/ (на Mac) для удаления комментариев.
Показать/скрыть комментарии кода
Чтобы переключиться между отображением и скрытием комментариев в режиме просмотра кода, просто нажмите CTRL+/ в Windows или CMD+/ на Mac для выделенного комментария или строки.
Использование дополнительных курсоров для добавления или изменения текста в нескольких местах
Добавляйте курсоры в различные места или выделите несколько разделов кода и редактируйте их одновременно с помощью функции дополнительных курсоров Dreamweaver.
Примечание
Операции копирования и вставки, а также поиска и замены не работают с несколькими курсорами или несколькими выделенными областями.
Добавление дополнительных курсоров или выделение нескольких элементов
Можно добавлять несколько курсоров различными способами в зависимости от ваших требований.
Если нужно добавить одинаковый текст в нескольких местах без замены существующего текста, добавьте несколько курсоров.
Если нужно заменить существующий текст, следует выделить несколько элементов. Можно выделять непрерывные строки текста или прерывистые строки текста, или и то, и другое, а затем добавлять к ним курсоры.
Чтобы добавить несколько курсоров или несколько выделенных областей в одном столбце в непрерывных строках:
Удерживая нажатой клавишу Alt, щелкните мышью по строкам и перетаскивайте их в вертикальном направлении. При вертикальном перетаскивании курсоры добавляются к каждой строке, через которую вы проводите.
Для выделения непрерывных строк текста нажмите клавишу Alt и перетаскивайте курсор по диагонали. При диагональном перетаскивании Dreamweaver выделяет прямоугольный блок текста в пределах этого выделения.
Примечание
Чтобы быстро добавить курсоры или включить несколько строк в выделение, используйте сочетание клавиш SHIFT+ALT+СТРЕЛКА ВВЕРХ или СТРЕЛКА ВНИЗ.
После того как вы добавили курсоры (или выделили текст) в нескольких местах, начинайте печатать.
Если у вас несколько курсоров, новый текст добавляется.
Если вы выделили контент в нескольких строках текста, выделенный текст заменяется новым текстом, который вы вводите.
Чтобы добавить несколько курсоров в разных столбцах между строками:
Чтобы добавить курсоры к прерывистым строкам текста, просто нажмите клавишу Ctrl и щелкните разные строки, куда хотите поместить Курсор.
Чтобы выбрать прерывистые строки текста, выделите некоторый текст, затем нажмите клавишу Ctrl (Windows) или клавишу Cmd (Mac) и продолжайте делать дополнительные выделения.
Чтобы добавить курсоры в начало/конец каждой строки:
Выделите несколько строк текста и нажмите клавиши со стрелками влево или вправо.
Чтобы добавить курсоры в предыдущие или следующие строки для выделения:
Нажмите Shift+Alt+Вверх/Вниз, а затем нажмите клавишу со стрелкой вправо.
Чтобы выбрать непрерывные и прерывистые строки текста:
Можно комбинировать эти методы для выделения как непрерывных, так и отдельных строк текста в рамках одного выделения.
Сначала выделите прерывистые строки текста, затем нажмите Ctrl+Alt (в Windows) или Cmd+Alt (на Mac) и перетащите, чтобы добавить набор строк к существующим множественным выделениям.
Получение справки по CSS в Dreamweaver с помощью функции «Быстрые документы»
При работе с файлами CSS, LESS или SCSS в Dreamweaver можно быстро получить дополнительную информацию о свойствах или значениях CSS.
Поместите курсор в свойство или значение и нажмите Ctrl+K — Dreamweaver откроет документацию из проекта Web Platform Docs.
Вы можете одновременно открыть несколько встроенных редакторов и средств просмотра документов.
Чтобы закрыть один встроенный редактор или средство просмотра документов, нажмите «X» в левом верхнем углу или нажмите Escape, когда Quick Docs находится в фокусе.
Чтобы закрыть все встроенные редакторы и документы, поместите курсор обратно в основной редактор кода и нажмите Escape.
Анализировать код
Dreamweaver поддерживает линтинг (анализ кода на предмет потенциальных ошибок) для HTML, CSS и JavaScript.
На панели вывода перечисляются ошибки и предупреждения, обнаруженные в хода анализа linting. Дополнительные сведения см. в разделе Анализ Linting кода.
Также Dreamweaver отображает панель быстрого просмотра ошибок в столбце номеров строк для строки с ошибкой. Номер строки отображается красным цветом, указывая на наличие ошибок, а при наведении курсора отображается краткое описание ошибки.
Примечание. Отображается только первая ошибка в строке. Если строка содержит только предупреждение, то отображается описание предупреждения. Если строка содержит предупреждение и ошибку, то будет отображено только описание ошибки.
Заключение текста в коде в тег с помощью команды «Заключить в тег»
Используйте команду «Заключить в тег» в представлении кода для заключения определенных строк текста в тег. В режиме «Дизайн» или «Интерактивный просмотр» можно использовать эту функцию для заключения объектов в тег.
Выберите текст в режиме Code view или объект в режиме Design view и нажмите Ctrl+T на клавиатуре.
Появится всплывающее окно, позволяющее выбрать из множества HTML-тегов.
Выберите тег из меню.
Если вы работаете в представлении кода, то выделенный текст будет заключен в тег. Если вы работаете в режиме Design или Live view, выбранный объект будет обернут тегом.
Редактирование кода с помощью контекстного меню Coding
Используйте контекстное меню Dreamweaver для быстрого редактирования кода.
Чтобы открыть контекстное меню, щелкните правой кнопкой мыши (в Windows) или щелкните мышью, удерживая нажатой клавишу Command (на Mac). Для использования доступны следующие опции:
Быстрое редактирование
Выберите этот параметр для входа в режим быстрого редактирования. В этом режиме Dreamweaver делает встроенными код и инструменты, зависящие от контекста, что позволяет быстро перейти к нужному разделу кода. Дополнительные сведения см. в разделе Быстрое редактирование.
Вырезание, копирование, вставка
Нажмите эти опции для быстрого вырезания, копирования и вставки текста без обращения к меню «Правка».
Поиск и замена, найти следующий, найти предыдущий
Нажмите эти опции для быстрого поиска и замены текста без обращения к меню «Поиск».
Создание нового фрагмента кода
Этот параметр служит для создания фрагментов кода, которые можно сохранить для повторного использования в дальнейшем. Выделите часть кода и нажмите кнопку «Создать новый фрагмент кода», чтобы создать новый фрагмент на основе выделенного кода. Дополнительные сведения см. в разделе Работа с фрагментами кода.
Открыть связанный файл
Щелкните правой кнопкой мыши по ссылке/тегу script и нажмите «Открыть связанный файл», чтобы открыть файл.
Присоединить таблицу стилей
Прикрепите существующую таблицу стилей CSS к вашей странице.
Развернуть выбранные элементы
Подменю «Выделение» включает различные опции редактирования кода, которые можно использовать для выбранного фрагмента кода, такие как переключение комментариев строк и блоков, разобрать и свернуть выделение, преобразование встроенного CSS в правила, перемещение правил CSS и печать кода.
Навигатор по коду
Выберите этот параметр для навигации по связанным исходным файлам, например по внешним и внутренним правилам CSS, серверным включениям, внешним файлам JavaScript, родительским файлам шаблонов, библиотечным файлам и исходным файлам фреймов iframe. Дополнительные сведения см. в разделе Переход к связанному коду.
Инструменты подсказок по коду
Подменю «Инструменты подсказки по коду» предоставляет палитру цветов, браузер URL и список шрифтов под рукой.
Отступ в блоках кода
При написании и редактировании кода в режиме Code view или инспекторе кода вы можете изменить уровень отступа выбранного блока или строки кода, сдвигая его вправо или влево на один tab.
Оформление отступа выделенного блока кода
- Нажмите Tab, или
- Нажмите Ctrl+], или
- В меню «Правка» выберите пункт «Код отступа ».
Уменьшить отступ выбранного блока кода
- Нажмите Shift+Tab или
- Нажмите Ctrl+[ или
- В меню «Правка» выберите пункт «Код выступа».
Переход к связанному коду
Навигатор по коду содержит список исходных файлов, связанных с выделенной областью на странице. Он предназначен для навигации по связанным исходным файлам, например по внешним и внутренним правилам CSS, серверному коду, внешним файлам JavaScript, родительским файлам шаблонов, библиотечным файлам и исходным файлам фреймов iframe. При переходе по ссылке из навигатора по кодуСистемные требования | Dreamweaver открывает файл, содержащий связанный фрагмент кода. Файл отображается в области связанных файлов, если она включена. Если область связанных файлов отключена, то Dreamweaver открывает выбранный файл как отдельный документ в окне документа.
Если в навигаторе по коду щелкнуть правило CSS, то Dreamweaver переходит непосредственно к этому правилу. Если правило является для файла внутренним, тоСистемные требования | Dreamweaver отображает правило в представлении с разделением. Если правило находится во внешнем файле CSS, то Dreamweaver откроет этот файл и отобразит правило в области связанных файлов над главным документом.
Доступ к навигатору кода можно получить из режимов «Дизайн», «Код» и «Разделение», а также из инспектора кода.
Обзорное видео от команды разработчиков Dreamweaver о работе с навигатором кода см. в www.adobe.com/go/dw10codenav.
Учебное пособие по работе с режимом Live View, связанными файлами и навигатором кода см. в www.adobe.com/go/lrvid4044_dw.
Открытие навигатора по коду
Alt+щелчок (Windows) или Command+Option+щелчок (Macintosh) в любом месте страницы. Навигатор кода отображает ссылки на код, влияющий на область, по которой вы щелкнули.
Чтобы закрыть навигатор по коду, щелкните за его пределами.
Примечание
Также можно открыть навигатор кода, нажав индикатор навигатора кода 
. Этот
индикатор появляется рядом с точкой вставки на странице, когда мышь
остается неподвижной в течение 2 секунд.
Переход к коду с помощью навигатора кода
Откройте навигатор кода из области страницы, которая вас интересует.
Щелкните фрагмент кода, к которому нужно перейти.
Навигатор по коду группирует связанные источники кода по файлам и выводит файлы в алфавитном порядке. Допустим, к выделенной области открытого документа относятся правила CSS, находящиеся в трех внешних файлах. В этом случае навигатор по коду отобразит эти три файла, а также правила CSS, относящиеся к выделенной области. Для кода CSS, связанного с выделенной областью, навигатор по коду работает точно таким же образом, как и панель «Стили CSS» в режиме «Текущий».
Примечание
При помещении курсора мыши над ссылками на правила CSS навигатор по коду отображает подсказки, связанные со свойствами правила. Эти подсказки полезны, когда нужно различать множество правил с одинаковыми именами.
Отключение индикатора навигатора по коду
Откройте навигатор по коду.
Включите параметр «Отключить индикатор» в правом нижнем углу.
Чтобы закрыть навигатор по коду, щелкните за его пределами.
Чтобы повторно включить индикатор Code Navigator, нажмите Alt+Click (Windows) или Command+Option+Click (Macintosh), чтобы открыть Code Navigator и снимите флажок с параметра Disable Indicator.
Перейдите к функции JavaScript или VBScript
В представлении «Код» и в Code Inspector можно просмотреть список всех функций JavaScript или VBScript в коде и перейти к любой из них.
Просмотрите документ в представлении «Код» (Просмотр > Код) или в инспекторе кода (Окно > Инспектор кода).
Выполните одно из действий, описанных ниже.
В представлении «Код» щелкните правой кнопкой мыши (Windows) или щелкните, удерживая клавишу «Control» (Macintosh), внутри окна с кодом и выберите в контекстном меню подменю «Функции».
Примечание
Подменю «Функции» не отображается в представлении «Дизайн».
В этом подменю отображаются все функции JavaScript и VBScript.
Примечание
Для просмотра представленных в алфавитном порядке функций щелкните правой кнопкой мыши (Windows) или щелкните, удерживая клавиши «Option» и «Control» (Macintosh) в окне отображения кода, затем выберите подменю «Функции».
- В Code Inspector нажмите кнопку Code Navigation ({ }) на панели инструментов.
Выберите имя функции, чтобы перейти к этой функции в коде.
Извлечение JavaScript
Средство извлечения JavaScript (JSE) удаляет весь или большую часть JavaScript из документа Dreamweaver, экспортирует его во внешний файл и связывает внешний файл с документом. JSE может также удалить из кода обработчики событий, такие как onclick или onmouseover, после чего автоматически прикрепить связанный с ними код JavaScript к документу.
Учтите следующие ограничения JavaScript Extractor перед его использованием:
JSE не извлекает теги сценариев из тела документа (кроме случая с мини-приложениями Spry). Выведение таких сценариев за пределы документа с некоторой вероятностью может привести к неожиданным результатам. По умолчанию вСистемные требования | Dreamweaver эти сценарии доступны в диалоговом окне «Извлечение JavaScript», но не выбраны для извлечения. (При желании их можно выбрать вручную.)
JSE не извлекает JavaScript из редактируемых областей файлов DWT (шаблонов Dreamweaver), нередактируемых областей экземпляров шаблонов, а также из элементов библиотеки Dreamweaver.
После извлечения JavaScript с установленным флажком «Извлечь и неявно прикрепить JavaScript» редактирование поведений Dreamweaver на панели «Поведения» становится невозможным. Dreamweaver не может инспектировать прикрепленные таким образом поведения и заполнять данными панель «Поведения».
После закрытия страницы отменить изменения невозможно. Однако можно отменить изменения, пока не завершен текущий сеанс редактирования. Для отмены выберите «Правка» > «Отменить извлечение JavaScript».
Некоторые сложные страницы могут работать непредвиденным образом. Следует соблюдать осторожность, извлекая JavaScript из страниц с функцией document.write() в теле документа и глобальными переменными.
См. обзорное видео от команды разработчиков Dreamweaver о поддержке JavaScript в Dreamweaver www.adobe.com/go/dw10javascript.
Использование средства извлечения JavaScript
Откройте страницу, содержащую JavaScript.
Нажмите Tools > Externalize JavaScript.
В диалоговом окне "Externalize JavaScript" при необходимости измените выбранные по умолчанию параметры.
Выберите «Только внешний JavaScript», если вы хотите, чтобы Dreamweaver переместил любой JavaScript во внешний файл и добавил ссылку на этот файл в текущий документ. Этот параметр оставляет обработчики событий, такие как onclick и onload, в документе и оставляет поведения видимыми на панели «Поведения».
Выберите «Внешний JavaScript и присоединить ненавязчиво», если вы хотите, чтобы Dreamweaver 1) переместил JavaScript во внешний файл и добавил ссылку на него в текущий документ, и 2) удалил обработчики событий из HTML и вставил их во время выполнения с помощью JavaScript. При выборе этого параметра вы больше не сможете редактировать поведения на панели «Поведения».
В столбце «Редактировать» отмените выбор изменений, которые не нужно вносить, или выберите изменения, которые Dreamweaver не выбрал по умолчанию.
По умолчанию Dreamweaver перечисляет, но не выбирает следующие изменения:
Блоки script в заголовке документа, которые содержат вызовы document.write() или document.writeln().
Блоки Script в заголовке документа, которые содержат сигнатуры функций, связанные с кодом обработки EOLAS, который, как известно, использует document.write().
Блоки Script в теле документа, за исключением блоков, которые содержат только конструкторы виджетов Spry или наборов данных Spry.
Dreamweaver автоматически назначает идентификаторы элементам, которые еще не имеют идентификаторов. Если вам не нравятся эти идентификаторы, вы можете изменить их, редактируя текстовые поля ID.
Нажмите кнопку «ОК».
Диалоговое окно сводки предоставляет сводку извлечений. Пересмотрите их и нажмите кнопку «ОК».
Сохраните страницу.
Dreamweaver создает файл SpryDOMUtils.js, а также еще один файл, содержащий извлеченный JavaScript. Dreamweaver сохраняет файл SpryDOMUtils.js в папке SpryAssets разрабатываемого сайта, а другой файл сохраняет на том же уровне, что и страница, из которой был извлечен JavaScript. Не забудьте загрузить оба этих взаимозависимых файла на веб-сервер во время следующей загрузки на сервер основной страницы.
Быстрое редактирование
Вместо загромождения среды разработки множеством панелей и значков режим «Быстрое редактирование» в Dreamweaver размещает контекстно-зависимый код и инструменты в строке, позволяя быстро перейти к нужному разделу кода.
Вы можете войти в режим «Быстрое редактирование»:
- Щелкните правой кнопкой мыши фрагмент кода и выберите «Быстрое редактирование» из появившегося контекстного меню
- Нажмите Ctrl+E (в Windows) или Cmd+E (на Mac)
Использование режима быстрого редактирования с файлами HTML
В файле HTML поместите курсор внутрь атрибута class или id (имя или значение) или внутрь имени тега. В режиме «Быстрое редактирование» показываются все соответствующие правила CSS, SCSS и LESS в проекте. Вы можете редактировать эти правила напрямую в строке, не покидая контекст HTML-файла.
Когда соответствует несколько правил, переходите между ними с помощью списка справа (или используйте Alt+стрелка вверх/вниз).
Чтобы создать правило CSS напрямую из встроенного редактора, нажмите New Rule или нажмите Ctrl+Alt+N (в Windows) или Cmd+Opt+N (на Mac).
Использование режима быстрого редактирования с файлами JavaScript
В файле JavaScript поместите курсор на имени функции. Быстрое редактирование показывает тело функции (даже если оно находится в других файлах, на которые ссылается оператор require()).
Использование режима «Быстрое редактирование» с CSS-, SCSS- или LESS-файлами
Когда вы вызываете быстрое редактирование с курсором в значении цвета, вы можете получить доступ к палитре цветов и быстро изменить цвета, используемые в коде CSS.
В CSS-, LESS- или SCSS-файле поместите курсор на функцию времени перехода cubic-bezier() или steps(), и функция «Быстрое редактирование» отобразит графический редактор кривой перехода.
Предопределенные функции синхронизации ease, ease-in, ease-out, ease-in-out, step-start и step-end также являются допустимыми отправными точками.
Реструктуризация кода
Реструктуризация кода — это процедура перестройки существующего компьютерного кода без изменения его внешнего поведения. Это требуется для того, чтобы код стал более удобным для чтения, поддержки приложения, а также более понятным и отлаживаемым. Она используется, когда в коде есть дублирующий код, длинные методы или крупные классы. Отладка кода экономит время за счет небольших функций и правильной замены.
С рефакторингом JavaScript вы можете переименовывать функции и устанавливать область действия переменной, чтобы ее можно было вызвать из блока кода, в котором она определена.
Примечание
Рефакторинг кода теперь доступен только в JS-файлах.
Реструктуризация JavaScript
Вы можете перестраивать код в документах типа html, php и javascript. При нажатии правой кнопкой мыши на области кода в Dreamweaver в выпадающем меню появляется опция Refactor.Refactor включает следующие опции:
- Переименовать
- Извлечь в переменную
- Извлечь в функцию
- Перенести в Try Catch
- Перенести в Condition
- Преобразовать в функцию стрелки
- Создать методы-получатели/методы-установщики
Чтобы понять функциональность каждой опции рефакторинга, обратитесь к следующим разделам:
Переименовать
Переименование используется для изменения всех вхождений имени переменной или имени функции в коде JavaScript. Выделение переменной нажатием и перетаскиванием не требуется для рефакторинга.
Выполните следующие шаги для переименования в JavaScript:
Выделите или поместите текстовый курсор в код, который требует изменения.
Щелкните правой кнопкой мыши по выбранному тексту и затем выберите Refactor > Rename. Вы также можете использовать сочетание клавиш Ctrl+Alt+R в Windows или Command+option+R в macOS для переименования.
На экране появляется многокурсорный обзор, позволяющий изменить все экземпляры переменной. Многокурсорное усовершенствование выделяет следующий экземпляр в текущем выделенном фрагменте. Введите уникальное имя переменной или функции для замены текущего имени.
Извлечь в переменную
Используйте функцию Извлечь в переменную для замены выражения переменной, локальной переменной или константы в JavaScript, выбрав выражение и щелкнув его правой кнопкой мыши. Затем выберите Refactor > Извлечь в переменную. Вы также можете использовать Ctrl+Alt+V в Windows и Cmd+Alt+V в macOS.
Извлечь в функцию
Используйте функцию Извлечь в функцию для замены выражения в вызовах функции внутри параметра. Значение по умолчанию нового параметра может быть инициализировано внутри тела функции или передано через вызовы функций.
Выполните следующие шаги для рефакторинга с помощью Extract to Function:
Выберите любое выражение или набор выражений в JavaScript.
Щелкните правой кнопкой мыши и выберите Refactor > Extract to Function. Вы также можете использовать Ctrl+Alt+M в Windows или Cmd+Alt+M в Mac OS.
Выберите область назначения для извлечения функции из всплывающего меню, которое отображается на экране.
Выход зависит от выбранной области назначения. Например, областью назначения может быть конструктор, выбранный класс или глобальная функция.
Характеристики функции Extract to function:
- Определяет параметры для передачи на основе идентификаторов, доступных в выделении или в извлекаемой области.
- Определяет возвращаемые параметры для возврата из функции на основе идентификаторов, значения которых изменяются в выделении.
- Также создает функцию с уникальным именем.
Следующие снимки экрана показывают результат в зависимости от выбранной области назначения.
Перенести в Try Catch
Используйте функцию Перенести в Try Catch для исключения (в блоке кода), которое отображается как ошибка после компиляции программы. Эта функция переносит блок кода в блок Try Catch. Этот блок кода помечается как исключение при выполнении программы.
Выберите или поместите курсор в код, щелкните правой кнопкой мыши и выберите Refactor > Wrap in Try Catch. Если поместить курсор в определенную позицию, то будут найдены окружающие операторы, иначе проверяется, состоит ли код из операторов или нет. Если есть операторы, то код заключается в блок Try Catch.
Перенести в Condition
Используйте Wrap in Condition для выражения в коде, чтобы компилировать только для определенного условия.
Выберите выражение в коде, щелкните правой кнопкой мыши и выберите Refactor > Wrap in Condition.
Преобразовать в функцию стрелки
Стрелочная функция — это выражение, которое не имеет собственных выражений функций, таких как this, arguments, super или new.target. Эти выражения функций предназначены для выражений, не являющихся методами, и они не могут использоваться как конструктор.
Поместите курсор в функцию, щелкните правой кнопкой мыши и выберите Refactor > Convert to Arrow Function.
Примечание
- Если выбранный оператор имеет один параметр, то структура параметра выглядит как param => {statements}.
- Если выбранный оператор имеет ноль или более одного параметра, например param (param1, param2), то структура параметра выглядит как param (param1, param2) => {statements}.
Создать методы-получатели/методы-установщики
В JavaScript метод-установщик может использоваться для выполнения функции, когда указанное свойство требует изменения. Методы-установщики чаще всего используются вместе с методами-получателями для создания типа псевдо-свойства. Нельзя создать сеттер для свойства, которое имеет фактическое значение.
Поместите курсор на член выражения объекта, щелкните правой кнопкой мыши и выберите Refactor > Create Getters/Setters.
Советы по устранению нарушений в работе
В следующей таблице представлены советы по устранению неполадок для соответствующих сообщений об ошибках, которые отображаются на экране из-за неправильного выбора кода:
|
Имя функции |
Сообщение об ошибке |
Совет по устранению неполадок |
|---|---|---|
|
Переименовать |
Нет выражения в данной позиции |
Наведите курсор на имя или перед именем переменной или функции. |
|
Извлечь в переменную |
Отбор не образует выражения |
Выберите выражение в коде перед реструктуризацией кода. |
|
Извлечь в функцию |
Выбранный блок должен представлять собой набор операторов или выражение |
Выберите блок с набором инструкций или выражением. |
|
Перенести в Try Catch |
Выберите допустимый код для переноса в блок Try-catch |
Выберите какой-либо код перед тем, как применить параметр реструктуризации Try Catch. |
|
Перенести в Condition |
Выберите допустимый код для переноса в блок Condition |
Выберите выражение перед применением параметра реструктуризации Перенести в Codition. |
|
Преобразовать в функцию стрелки |
Поместите курсор внутри выражения функции |
Поместите курсор внутри выражения функции перед применением опции реструктуризации. |
|
Создать методы-получатели/методы-установщики |
Поместите курсор в элемент member выражения объекта |
Установите курсор на подписчика выражения объекта, прежде чем применять параметр реструктуризации «Создать методы-получатели/методы-установщики». |
Поиск и замена текста
Вы можете использовать функции поиска и замены Dreamweaver для поиска любого текста, кода или пробелов на вашем сайте или в папке.
Вы можете искать по всей разметке, или можете ограничить поле поиска только отображаемым текстом (в представлении «Дизайн») или же только кодом.
Также можно использовать мощные алгоритмы поиска шаблонов (регулярных выражений) для сложных операций по поиску и замене.
После того как вы нашли текст, его можно заменить необходимым текстом, кодом или пустым пространством.
Более подробную информацию см. в разделе Поиск и замена текста.
Предварительный просмотр изображений и цветов в режиме кода
После вставки соответствующего кода для изображений и цветов вы можете просматривать их прямо в режиме кода.
Просмотр изображения
Наведите указатель мыши на URL-адрес любого изображения, и вы увидите его в представлении кода. Вы можете просматривать изображения, на которые ссылаются любым из следующих способов:
- url();
- data-uri()
- Значение атрибута src тега img
Dreamweaver может выполнять предварительный просмотр изображений, размещенных удаленно.
Если Dreamweaver не может отобразить предварительный просмотр для удаленных путей, отображается сообщение «Unable to load image».
Вы можете просматривать следующие типы изображений:
- JPEG
- JPG
- PNG
- GIF
- SVG
Предварительный просмотр цвета
Наведите указатель мыши на цветовые значения, и они будут отображены в представлении кода. Поддерживаемые форматы:
- 3- и 6-значные шестнадцатеричные значения цветов: #ff0000;
- RGB: rgb(0, 0, 0);
- RGBA: rgba(0, 255, 228,0.5);
- HSL: hsl(120, 100%, 50%);
- HSLA: hsla(120, 60%, 70%, 0.3);
- Предопределенные названия цветов, например, Olive, Teal, red.
Предварительный просмотр цветов доступен во всех типах документов для указанных выше форматов цветов.
Щелкните правой кнопкой мыши по значению и выберите Quick Edit, чтобы открыть палитру цветов и выбрать другой цвет.
Примечание
Чтобы отключить предварительный просмотр для изображений и цветов, снимите флажок с параметра View > Code View Options > Asset Preview.
Печать кода
Вы можете распечатать код для редактирования в автономном режиме, архивирования или распространения.
Откройте страницу в представлении «Код».
В меню «Файл» выберите пункт «Печать кода».
Укажите параметры печати и нажмите OK (Windows)
или Print (Macintosh).
Создание красивых веб-сайтов в Dreamweaver
Создавайте дизайн, пишите код и управляйте динамическими веб-сайтами с помощью многофункционального инструмента.
