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

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

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

Dreamweaver содержит обширный набор готовых фрагментов кода. Но вы также можете создавать и сохранять собственные фрагменты кода.

Как использовать фрагменты кода с наибольшей отдачей?

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

• Если вы работаете в организации, которая следует определенным стандартам дизайна, или же являетесь фрилансером, работающим сразу над несколькими проектами, то использование фрагментов кода позволит вам добиться единообразия дизайна — просто сохраняйте часто встречающиеся отрывки кода в качестве фрагментов и потом вставляйте их, куда необходимо.
• Если от вас требуется определять, поддерживать и проводить в жизнь некоторые стандарты кодирования, то фрагменты кода также могут быть вам полезны.
• Кодирование интерактивных элементов на веб-странице вручную может занять много времени. Используйте фрагменты кода из разделов Bootstrap или Responsive_Design_Snippets на панели «Фрагменты кода» (например, фрагмент кода интерактивной страницы). Одним щелчком мыши вы вставили почти 20 строк кода для адаптивной таблицы.
  Отредактируйте таблицу по мере необходимости. Вы можете объединять и добавлять новые столбцы и строки, менять их стиль по своему усмотрению, а затем выделить получившийся код и сохранить его как новый фрагмент для повторного использования при создании новых страниц. Дополнительные сведения о создании фрагментов кода см. в разделе Создание фрагментов кода.
• Варианты поведения JavaScript, эффекты CSS и стили CSS — также отличные примеры кода, который можно использовать многократно.

Панель «Фрагменты кода»

Управление фрагментами кода в Dreamweaver осуществляется посредством панели «Фрагменты кода» (Окно > Фрагменты кода).

Панель «Фрагменты кода» представляет собой коллекцию отрывков кода.

Что можно делать с помощью панели «Фрагменты кода»

Панель «Фрагменты кода» позволяет выполнять следующие задачи.

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

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

Используйте предустановленные фрагменты кода и редактируйте их, создавая тем самым свои собственные фрагменты кода. Можно также создавать собственные фрагменты кода с нуля и сохранять их на панели «Фрагменты кода» для дальнейшего использования. Дополнительные сведения см. в разделе Создание фрагментов кода.

Для редактирования текущего фрагмента выделите фрагмент и нажмите значок «Правка». Дополнительные сведения см. в разделе Редактирование фрагментов кода.

Удаление фрагментов кода, которые больше не нужны. Для удаления фрагмента кода выделите его и щелкните значок «Удалить».

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

Функция триггер-ключей позволяет создавать короткие интуитивно понятные коды, которые можно вводить с клавиатуры вместо того, чтобы искать нужный фрагмент кода в панели «Фрагменты кода». Если у вас уже есть заданные триггер-ключи, просто поместите курсор в нужную часть кода. Затем введите с клавиатуры текст триггер-ключа и нажмите Tab. Нужный фрагмент кода будет вставлен в ваш код. Дополнительные сведения см. в разделе Добавление триггер-ключей и вставка фрагментов кода с помощью триггер- ключей.

Вставка фрагментов кода

Фрагменты кода можно вставлять в код в том месте, где находится ваш курсор.

Если у вас уже есть заданные триггер-ключи, просто поместите курсор в нужную часть кода. Затем введите с клавиатуры текст триггер-ключа и нажмите Tab. Нужный фрагмент кода будет вставлен в ваш код. Дополнительные сведения см. в разделе Добавление триггер-ключей и вставка фрагментов кода с помощью триггер- ключей.

Чтобы просмотреть фрагмент кода, вставьте его в представлении «Дизайн».

Создание фрагментов кода

Редактирование фрагментов кода

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

• Щелкните фрагмент правой кнопкой мыши, чтобы открыть диалоговое окно «Редактирование фрагментов».
• Выделите фрагмент и щелкните значок «Редактировать фрагмент» в нижней части панели.

При редактировании фрагмента уже существующие повторения данного фрагмента в документе не обновляются.

Можно редактировать все поля в диалоговом окне «Фрагменты кода»: «Название», «Описание», «Триггер-ключ» и «Код».

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

Добавление триггер-ключей и вставка фрагментов кода с помощью триггер-ключей

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

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

Как распространить фрагменты кода на несколько устройств

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

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

Для настройки синхронизации:

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