Руководство пользователя Отмена

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

  1. Руководство пользователя Dreamweaver
  2. Введение
    1. Основы гибкого веб-дизайна
    2. Новые возможности Dreamweaver
    3. Веб-разработка с помощью Dreamweaver: обзор
    4. Dreamweaver / распространенные вопросы
    5. Сочетания клавиш
    6. Системные требования Dreamweaver
    7. Обзор новых возможностей
  3. Dreamweaver и Creative Cloud
    1. Синхронизация настроек Dreamweaver с Creative Cloud
    2. Библиотеки Creative Cloud Libraries в Dreamweaver
    3. Использование файлов Photoshop в Dreamweaver
    4. Работа с Adobe Animate и Dreamweaver
    5. Извлечение файлов SVG, оптимизированных для Интернета, из библиотек
  4. Рабочие среды и представления Dreamweaver
    1. Рабочая среда Dreamweaver
    2. Оптимизация рабочей среды Dreamweaver для визуальной разработки
    3. Поиск файлов по названию или содержимому | Mac OS
  5. Настройка сайтов
    1. О сайтах Dreamweaver
    2. Настройка локальной версии сайта
    3. Подключение к серверу публикации
    4. Настройка тестового сервера
    5. Импорт и экспорт параметров сайта Dreamweaver
    6. Перенос существующих веб-сайтов с удаленного сервера в корневой каталог локального сайта
    7. Специальные возможности в Dreamweaver
    8. Дополнительные настройки
    9. Настройка установок сайта для передачи файлов
    10. Задание параметров прокси-сервера в Dreamweaver
    11. Синхронизация настроек Dreamweaver с Creative Cloud
    12. Использование Git в Dreamweaver
  6. Управление файлами
    1. Создание и открытие файлов
    2. Управление файлами и папками
    3. Получение файлов с сервера и размещение их на нем
    4. Возврат и извлечение файлов
    5. Синхронизация файлов
    6. Сравнение файлов
    7. Скрытие файлов и папок на сайте Dreamweaver
    8. Включение заметок разработчика для сайтов Dreamweaver
    9. Предотвращение использования уязвимости Gatekeeper
  7. Макет и оформление
    1. Использование средств визуализации для создания макета
    2. Об использовании CSS для создания макета страницы
    3. Создание динамичных веб-сайтов с помощью Bootstrap
    4. Создание и использование медиазапросов в Dreamweaver
    5. Представление содержимого в таблицах
    6. Цвета
    7. Гибкий дизайн с использованием «резиновых» макетов
    8. Extract в Dreamweaver
  8. CSS
    1. Общие сведения о каскадных таблицах стилей
    2. Создание макетов страниц с помощью конструктора CSS
    3. Использование препроцессоров CSS в Dreamweaver
    4. Установка настроек стиля CSS в Dreamweaver
    5. Перемещение правил CSS в Dreamweaver
    6. Преобразование встроенного CSS в правило CSS в Dreamweaver
    7. Работа с тегами div
    8. Применение градиентов к фону
    9. Создание и редактирование эффектов перехода CSS3 в Dreamweaver
    10. Форматирование кода
  9. Содержимое страницы и ресурсы
    1. Задание свойств страницы
    2. Задание свойств заголовка CSS и свойств ссылки CSS
    3. Работа с текстом
    4. Поиск и замена текста, тегов и атрибутов
    5. Панель DOM
    6. Редактирование в режиме интерактивного просмотра
    7. Кодировка документов в Dreamweaver
    8. Выбор и просмотр элементов в окне документа
    9. Задание свойств текста в инспекторе свойств
    10. Проверка орфографии на веб-странице
    11. Использование горизонтальных линеек в Dreamweaver
    12. Добавление и изменение сочетаний шрифтов в Adobe Dreamweaver
    13. Работа с ресурсами
    14. Вставка и обновление даты в Dreamweaver
    15. Создание и управление избранными ресурсами в Dreamweaver
    16. Вставка и редактирование изображений в Dreamweaver
    17. Добавление мультимедийных объектов
    18. Добавление видео Dreamweaver
    19. Добавление видео HTML5
    20. Вставка файлов SWF
    21. Добавление звуковых эффектов
    22. Добавление аудио HTML5 в Dreamweaver
    23. Работа с элементами библиотеки
    24. Использование текста на арабском языке и иврите в Dreamweaver
  10. Создание ссылок и навигация
    1. О создании ссылок и навигации
    2. Создание ссылок
    3. Карты ссылок
    4. Устранение неполадок со ссылками
  11. Графические элементы и эффекты jQuery
    1. Использование пользовательского интерфейса и графических элементов jQuery для мобильных устройств в Dreamweaver
    2. Использование эффектов jQuery в Dreamweaver
  12. Написание кода веб-сайтов
    1. О программировании в Dreamweaver
    2. Среда написания кода в Dreamweaver
    3. Настройка параметров написания кода
    4. Настройка цветового оформления кода
    5. Написание и редактирование кода
    6. Подсказки по коду и автозавершение кода
    7. Свертывание и развертывание кода
    8. Повторное использование фрагментов кода
    9. Анализ Linting для проверки кода
    10. Оптимизация кода
    11. Редактирование кода в представлении «Дизайн»
    12. Работа с содержимым заголовков для страниц
    13. Вставка серверных включений в Dreamweaver
    14. Использование библиотек тегов в Dreamweaver
    15. Импорт пользовательских тегов в Dreamweaver
    16. Использование вариантов поведения JavaScript (общие инструкции)
    17. Применение встроенных вариантов поведения JavaScript
    18. Сведения об XML и XSLT
    19. Выполнение XSL-преобразования на стороне сервера в Dreamweaver
    20. Выполнение XSL-преобразования на стороне клиента в Dreamweaver
    21. Добавление символьных сущностей для XSLT в Dreamweaver
    22. Форматирование кода
  13. Процессы взаимодействия продуктов
    1. Установка и использование расширений в Dreamweaver
    2. Обновления в Dreamweaver, устанавливаемые через приложение
    3. Вставить документы Microsoft Office в Dreamweaver (только для Windows)
    4. Работа с Fireworks и Dreamweaver
    5. Редактирование содержимого на сайтах Dreamweaver с помощью Contribute
    6. Интеграция Dreamweaver с Business Catalyst
    7. Создание персонализированных кампаний почтовой рассылки
  14. Шаблоны
    1. О шаблонах Dreamweaver
    2. Распознавание шаблонов и документов на их основе
    3. Создание шаблона Dreamweaver
    4. Создание редактируемых областей в шаблонах
    5. Создание повторяющихся областей и таблиц в Dreamweaver
    6. Использование дополнительных областей в шаблонах
    7. Определение редактируемых атрибутов тега в Dreamweaver
    8. Создание вложенных шаблонов в Dreamweaver
    9. Редактирование, обновление и удаление шаблонов
    10. Экспорт и импорт XML-содержимого в Dreamweaver
    11. Применение или удаление шаблона из существующего документа
    12. Редактирование содержимого в шаблонах Dreamweaver
    13. Правила синтаксиса для тегов шаблона в Dreamweaver
    14. Настройка предпочтений выделения для областей шаблона
    15. Преимущества использования шаблонов в Dreamweaver
  15. Мобильные и многоэкранные устройства
    1. Создание медиазапросов
    2. Изменение ориентации страницы для мобильных устройств
    3. Создание веб-приложений для мобильных устройств с помощью Dreamweaver
  16. Динамические сайты, страницы и веб-формы
    1. Общие сведения о веб-приложениях
    2. Настройка компьютера для разработки приложений
    3. Устранение неполадок подключений к базам данных
    4. Удаление сценариев подключения в Dreamweaver
    5. Дизайн динамических страниц
    6. Обзор динамических источников содержимого
    7. Определение источников динамического содержимого
    8. Добавление динамического содержимого на страницы
    9. Изменение динамического содержимого в Dreamweaver
    10. Отображение записей баз данных
    11. Введение интерактивных данных и устранение неполадок с ними в Dreamweaver
    12. Добавление заказных вариантов поведения сервера в Dreamweaver
    13. Создание форм с помощью Dreamweaver
    14. Использование форм для сбора информации от пользователей
    15. Создание и включение форм ColdFusion в Dreamweaver
    16. Создание веб-форм
    17. Расширенная поддержка HTML5 для компонентов формы
    18. Разработка формы с помощью Dreamweaver
  17. Визуальное построение приложений
    1. Создание главной страницы и страницы сведений в Dreamweaver
    2. Создание страниц поиска и результатов поиска
    3. Создание страницы для вставки записи
    4. Создание страницы обновления записи в Dreamweaver
    5. Создание страниц удаления записей в Dreamweaver
    6. Применение ASP-команд для изменения базы данных в Dreamweaver
    7. Создание страницы регистрации
    8. Создание страницы входа
    9. Создание страницы с доступом только для авторизованных пользователей
    10. Защита папок в ColdFusion с помощью Dreamweaver
    11. Использование компонентов ColdFusion в Dreamweaver
  18. Тестирование, просмотр и публикация веб-сайтов
    1. Предварительный просмотр страниц
    2. Предварительный просмотр веб-страниц Dreamweaver на нескольких устройствах
    3. Тестирование сайта Dreamweaver
  19. Устранение неполадок
    1. Исправленные ошибки
    2. Выявленные неполадки

 

 

Узнайте, как создавать фрагменты, используя панель «Фрагменты кода» в Dreamweaver, и повторно использовать полученный код на различных сайтах Dreamweaver.

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

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

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

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

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

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

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

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

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

Панель фрагментов в Dreamweaver
Панель фрагментов в Dreamweaver

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавление/редактирование триггер-ключей

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

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

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

  1. Поместите курсор в то место, куда вы хотите вставить фрагмент кода.

  2. Перейдите в панель «Фрагменты кода» (Окно > Фрагменты кода) и дважды щелкните требуемый фрагмент или же щелкните значок «Вставка» в нижней части панели.

    Кроме того, можно щелкнуть фрагмент правой кнопкой мыши (Windows) или щелкнуть его, удерживая клавишу Control (Macintosh), и затем во всплывающем меню выбрать пункт «Вставка».

Примечание.

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

Примечание.

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

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

  1. На панели «Фрагменты кода» щелкните значок «Создать фрагмент», расположенный в нижней части панели.

  2. Введите имя фрагмента.

    Примечание.

    Имена фрагментов не могут содержать символы, которые являются недопустимыми в именах файлов, например косые черты (/ или \), специальные символы или двойные кавычки (").

  3. Введите текстовое описание фрагмента (необязательно).

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

    Фрагменты кода с достаточно подробным описанием можно легко идентифицировать для повторного использования
    Фрагменты кода с достаточно подробным описанием можно легко идентифицировать для повторного использования

    Примечание.

    Добавлять фрагменты в код можно также при помощи специально созданных триггер-ключей. Дополнительные сведения см. в разделе Добавление триггер-ключей и вставка фрагментов кода с помощью триггер- ключей.

  4. Нажмите кнопку «ОК».

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

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

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

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

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

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

  1. На панели «Фрагменты кода» нажмите кнопку «Создать папку для фрагментов», расположенную в нижней части панели.

  2. Перетащите фрагменты в новую папку или в другие папки.

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

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

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

  1. На панели «Фрагменты кода» щелкните правой кнопкой мыши (Windows) или щелкните, удерживая клавишу Control (Macintosh), затем в раскрывающемся меню выберите пункт «Добавить триггер-ключ».

    Выберите «Добавить ключ-триггер» на панели фрагментов
    Выберите «Добавить ключ-триггер» на панели фрагментов

  2. Введите требуемый текст в поле триггер-ключа.

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

    Введите текст в поле «Ключ-триггер».
    Введите текст в поле «Ключ-триггер».

    Примечание.

    Триггер-ключ не может содержать специальные символы (кроме подчеркивания). Кроме того, нельзя использовать один и тот же триггер-ключ для двух различных фрагментов кода.

  3. Чтобы добавить фрагмент кода с использованием триггер-ключа, введите текст триггера (в представлении кода) и нажмите Tab, вставив тем самым фрагмент в свой код.

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

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

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

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

  1. Щелкните «Правка» > «Настройки».

  2. Нажмите кнопку «Синхронизировать настройки сейчас» в диалоговом окне «Настройки синхронизации».

    Настройки будут сохранены в облако. Эти настройки будут импортированы при следующем запуске Dreamweaver. Локальные настройки заменяются настройками, импортированными из облака.

    Ваши фрагменты кода и все прочие настройки синхронизируются.

    Дополнительную информацию о синхронизации настроек см. в разделе Синхронизация настроек Dreamweaver с Creative Cloud.

Примечание.

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

 Adobe

Получайте помощь быстрее и проще

Новый пользователь?