Работа с ресурсами

Последнее обновление 25 апр. 2024 г.

Для работы с ресурсами на текущем сайте предназначена панель «Ресурсы» в Dreamweaver.

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

Ресурсы могут быть получены из разных источников. Например, вы можете создавать ресурсы в таком приложении, как Adobe Photoshop или Adobe Animate, либо получать их от коллеги, либо копировать с диска с клипартом или с веб-сайта графики.

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

Для работы с ресурсами на текущем сайте предназначена панель «Ресурсы» (меню «Окно» > «Ресурсы»). На панели «Активы» перечислены ресурсы, которые используются на сайте, документ которого отображается в окне документа.

Примечание

Прежде чем будет доступен просмотр ресурсов на панели «Активы», необходимо указать локальный сайт.

Панель ресурсов в режиме интерактивного просмотра
Панель ресурсов в режиме интерактивного просмотра

Панель «Ресурсы» в представлениях «Дизайн» и «Код»

Панель «Ресурсы» предоставляет различные способы просмотра ресурсов:

Список сайтов

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

Список избранного

В этом списке отображаются только явно выбранные ресурсы.

Для переключения между этими двумя представлениями выберите переключатель «Сайт» или «Избранное» над областью предварительного просмотра. (Эти два представления недоступны для категорий «Шаблоны» и «Библиотека».)

Примечание

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

В обоих списках ресурсы относятся к одной из описанных далее категорий:

Изображения

Файлы изображений в форматах GIF, JPEG или PNG.

Цвета

Цвета, используемые в документах и таблицах стилей, включая цвета текста, фона и ссылок.

URL-адреса

Внешние ссылки в документах текущего сайта, включая FTP, gopher, HTTP, HTTPS, JavaScript, электронную почту (mailto) и локальные файлы (file://).

Мультимедиа

Мультимедийные файлы, такие как файлы Adobe Flash (только SWF), файлы Adobe Shockwave, QuickTime или MPEG.

Сценарии

Файлы сценариев на языке JavaScript или VBScript. Сценарии в файлах HTML (за исключением самостоятельных файлов JavaScript или VBScript) не отображаются на панели «Ресурсы». Эта категория доступна только в режиме просмотра «Код» и «Дизайн».

Шаблоны

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

Элементы библиотеки

Элементы дизайна, используемые на нескольких страницах; при изменении элемента библиотеки обновятся все страницы, содержащие этот элемент. Эта категория доступна только в режиме просмотра «Код» и «Дизайн».

Примечание

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

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

Значок Creative Cloud в столбце «Тип» указывает на то, что соответствующие ресурсы импортируются из библиотек Creative Cloud Libraries. Чтобы повторно семплировать соответствующие ресурсы, дважды щелкните значок Creative Cloud. Дополнительные сведения о повторном использовании ресурсов в Creative Cloud Libraries см. в разделе Creative Cloud Libraries в Dreamweaver.

Просмотр ресурса в области просмотра

Выберите ресурс на панели «Ресурсы».

Отображение ресурсов в категории

Нажмите значок категории в левой части панели «Ресурсы».

Сортировка ресурсов

Щелкните заголовок столбца.

Например, чтобы отсортировать список изображений по типу (так, чтобы все изображения GIF были вместе, все изображения JPEG были вместе и так далее), нажмите заголовок столбца «Тип».

Изменение размера столбца

Перетащите линию, разделяющую два заголовка столбцов.

Изменение размеров области просмотра

Перетащите разделитель (между областью предварительного просмотра и списком ресурсов) вверх или вниз.

Обновление содержимого панели «Ресурсы»

Создание списка сайта может занять несколько секунд, поскольку Dreamweaver должен сначала прочитать кэш сайта.

Некоторые изменения могут отображаться на панели «Ресурсы» с задержкой. Например, при добавлении на сайт или удалении с сайта ресурса изменения не будут отражены на панели «Ресурсы» до тех пор, пока не будет выполнено обновление списка «Сайт» с помощью кнопки «Обновить список сайтов». Если вы добавляете или удаляете ресурс вне Dreamweaver — используя Проводник Windows или Finder, например — вы должны перестроить кэш сайта для обновления панели «Ресурсы».

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

  • Чтобы обновить список сайта вручную, нажмите кнопку «Обновить список сайта» . Dreamweaver создает кэш сайта или обновляет его при необходимости.
  • Чтобы обновить список сайта и вручную перестроить кэш сайта, щелкните правой кнопкой мыши (Windows) или щелкните с клавишей COMMAND (Macintosh) в списке ресурсов, затем выберите «Обновить список сайта».

Добавление ресурса в документ

Большинство ресурсов можно вставить в документ, перетащив их в представление «Интерактивный просмотр», «Код» или «Дизайн» в окне «Документ», либо нажав на панели кнопку «Вставить». Вы можете перетаскивать ресурсы как из представления списка, так и из области предварительного просмотра панели Assets.

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

В представлении «Дизайн» или «Интерактивный просмотр» можно вставлять цвета и URL-адреса. В режиме «Дизайн» вы можете применять цвета и URL к выбранным элементам.

 

В документе поместите курсор в то место, где должен появиться ресурс.

На панели «Ресурсы» выберите одну из кнопок категории ресурсов слева.
Примечание

Выберите любую категорию, за исключением «Шаблоны». Шаблон применяется ко всему документу; его нельзя вставить в документ.

Выберите «Сайт» или «Избранное» в верхней части панели, затем выберите ресурс.

Для элементов библиотеки нет списков «Сайт» или «Избранное»; пропустите этот шаг, если вставляете элемент библиотеки.

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

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

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

  • Выберите ресурс на панели и нажмите кнопку «Вставить».

    Если выполняется вставка цвета, то этот цвет будет применен к тексту, расположенному после курсора вставки.

Применяйте цвет к тексту с помощью панели Assets

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

В режиме конструктора выполните следующие действия:

Выделите текст в документе.

В панели «Ресурсы» выберите категорию «Цвета».

Выберите нужный цвет и нажмите «Применить».

В режиме Live View выполните следующие действия:

В панели «Ресурсы» выберите категорию «Цвета».

Выполните одно из действий, описанных ниже.

  • На панели «Ресурсы» щелкните цвет правой кнопкой мыши и выберите команду «Копировать значение цвета». Цветовое значение будет скопировано в буфер обмена. Теперь можно вставить значение цвета (Ctrl+V, Cmd+V) в CSS Designer.
  • Перетащите цвет с панели предварительного просмотра и наведите курсор на элементы в представлении «Интерактивный просмотр».При перетаскивании цвета появляется диалоговое окно «Новое правило CSS», и после нажатия «ОК» цвет применяется к выбранному элементу.
  • На панели «Ресурсы» нажмите кнопку «Применить». Появляется диалоговое окно «Новое правило CSS», и когда вы нажимаете «ОК», цвет применяется к выбранному элементу.

Назначение URL-адресов изображениям или тексту

В режиме конструктора выполните следующие действия:

Выберите текст или изображение.

В панели «Ресурсы» выберите категорию URL в представлении «Сайты» или «Избранное», в зависимости от того, где хранится URL.

Примечание

URL-адреса файлов вашего сайта по умолчанию хранятся в представлении «Сайты». В представлении «Избранное» хранятся URL-адреса, которые вы добавили самостоятельно.

Выберите URL-адрес.
Выполните одно из следующих действий.
  • Перетащите URL из панели к выделенному фрагменту в режиме «Дизайн».

  • Выделите URL-адрес и нажмите кнопку «Вставить».

В режиме Live View выполните следующие действия:

На панели «Ресурсы» выберите категорию URL в представлении «Сайты» или «Избранное», в зависимости от того, где хранится URL.

Выполните одно из действий, описанных ниже.

  • Перетащите URL-адрес из панели предварительного просмотра или из списка. Наведите курсор на элементы в представлении «Интерактивный просмотр». При перетаскивании URL тег <a> оборачивает элемент, выделенный в режиме Live View.
  • Щелкните необходимый элемент в представлении «Интерактивный просмотр». Выберите URL-адрес на панели «Ресурсы» и нажмите кнопку «Применить». Выбранный элемент оборачивается тегом <a>.

Выбор и редактирование ресурсов

Панель «Ресурсы» позволяет выбрать несколько ресурсов одновременно. Это позволяет ускорить процесс их редактирования.

Выбор нескольких ресурсов

Выберите ресурс на панели «Ресурсы».
Выберите остальные требуемые ресурсы одним из следующих способов.
  • Щелкайте с нажатой клавишей SHIFT для выбора последовательной серии ресурсов.

  • Щелкните с нажатой клавишей CTRL (Windows) или COMMAND (Macintosh), чтобы добавить отдельный ресурс к выделению (независимо от того, прилегает ли он к существующему выделению).Щелкните с нажатой клавишей CTRL или COMMAND выбранный ресурс, чтобы отменить его выбор.

Редактирование ресурса

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

В панели «Ресурсы» выполните одно из следующих действий:
  • Дважды щелкните ресурс.

  • Выберите ресурс, затем нажмите кнопку «Редактировать».

Примечание

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

Внесите требуемые изменения.
По окончании выполните одно из следующих действий.
  • Если ресурс является файловым (любой ресурс, за исключением цвета или URL-адреса), сохраните (в используемом редакторе) и закройте его.

  • Если ресурс является URL-адресом, нажмите кнопку «ОК» в диалоговом окне «Редактирование URL-адреса».

Примечание

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

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

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

Может потребоваться найти файл в панели «Файлы», который соответствует ресурсу в панели «Ресурсы», прежде чем передавать ресурс на удаленный сайт или с него.

Примечание

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

Поиск файла ресурса в панели «Файлы»

В панели «Ресурсы» выберите категорию ресурса, который нужно найти.
Щелкните правой кнопкой мыши (Windows) или щелкните с нажатой клавишей Control (Macintosh) имя или значок ресурса на панели «Ресурсы», затем выберите «Найти на сайте» в контекстном меню.
Примечание

Команда «Найти на сайте» недоступна для цветов и URL, которые не соответствуют файлам на сайте.

Открывается панель «Файлы» с выделенным файлом ресурса. Команда «Найти на сайте» находит файл, соответствующий самому ресурсу; она не находит файлы, которые используют этот ресурс.

Копирование ресурсов с панели «Ресурсы» на другой сайт

На панели «Ресурсы» выберите категорию ресурса, который хотите скопировать.
Щелкните правой кнопкой мыши (Windows) или Control+щелчок (Macintosh) один или несколько ресурсов в списке «Сайт» или «Избранное», выберите «Скопировать на сайт» и выберите имя целевого сайта из подменю со списком всех определенных вами сайтов.
Примечание

В списке «Избранное» можно скопировать папку «Избранное», а также отдельные ресурсы.

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

Примечание

Если скопированный ресурс является цветом или URL, он появляется только в списке «Избранное» целевого сайта. Поскольку цвета и URL не соответствуют файлам, нет файла для копирования на другой сайт.