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

Работа с элементами библиотеки

  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

 

Изучите этот раздел, чтобы узнать, как создавать элементы библиотеки в Dreamweaver, а также как вставлять и редактировать их в документах.

Библиотека представляет собой специальный файл Dreamweaver, в котором содержится набор отдельных ресурсов или копий ресурсов, используемых для создания веб-страниц. Ресурсы, содержащиеся в библиотеке, называются элементами библиотеки. В библиотеке сохраняют следующие элементы: изображения, таблицы, звуки и файлы, созданные при помощи Adobe Flash. При изменении какого-либо элемента библиотеки можно автоматически обновить все страницы, в которых используется такой элемент.

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

Dreamweaver содержит элементы библиотеки в папке «Библиотека» в локальной корневой папке сайта. Каждый сайт имеет свою собственную библиотеку.

Элемент библиотеки можно создать из любого другого элемента, содержащегося в разделе body документа, включая текст, таблицы, формы, Java-апплеты, внешние модули, элементы ActiveX, панели навигации и изображения.

Для связанных элементов, например изображений, в библиотеке хранится только ссылка на такой элемент. Для правильной работы элемента библиотеки не следует менять расположение исходного файла.

Однако хранение изображения в качестве элемента библиотеки может оказаться иногда полезным. Например, можно сохранить полный тег img в качестве элемента библиотеки, что позволит в дальнейшем для всего сайта легко изменить для изображения текст alt или атрибут src. (Не используйте данный прием для изменения атрибутов width и height изображения, за исключением случаев, когда для изменения реальных размеров изображения применяется графический редактор.)

Примечание.

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

При использовании элемента библиотеки Dreamweaver создает и помещает на веб-страницу только ссылку, но не сам элемент. То есть Dreamweaver вставляет в документ копию исходного HTML-кода для соответствующего элемента и добавляет HTML-комментарий, в котором содержится ссылка на внешний исходный элемент. Именно с помощью этой внешней ссылки и происходит автоматическое обновление.

При создании элемента библиотеки, в котором присутствует элемент, обладающий вариантом поведения Dreamweaver, Dreamweaver копирует в файл элемента библиотеки сам элемент и соответствующий обработчик событий (атрибут, который указывает событие, запускающее действие, например onClick, onLoad или onMouseOver, и соответствующее действие при возникновении такого события). Dreamweaver не копирует связанные функции JavaScript в элемент библиотеки. Напротив, при вставке элемента библиотеки в документ Dreamweaver автоматически вставляет соответствующие функции JavaScript в раздел head документа (если они там отсутствуют).

Примечание.

Если ввод кода JavaScript выполняется вручную (то есть не используются варианты поведения Dreamweaver), то написанный код можно внести в элемент библиотеки в случае, если для выполнения кода применяется вариант поведения «Call JavaScript». Если для выполнения кода не используется вариант поведения Dreamweaver, в элементе библиотеки код не сохраняется.

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

Создание элемента библиотеки из выделенного фрагмента

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

  2. Выберите «Инструменты» > «Библиотека» > «Добавить объект в библиотеку».

  3. Введите имя нового элемента библиотеки и нажмите клавишу Enter (в Windows) или Return (в Macintosh).

    Dreamweaver сохраняет каждый элемент библиотеки в отдельном файле (с расширением lbi) в папке «Библиотека», расположенной в локальной корневой папке сайта.

Создание пустого элемента библиотеки

  1. Убедитесь, что в окне документа нет выделенных объектов.

    (Все выделенные объекты будут помещены в новый элемент библиотеки.)

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

  3. Нажмите кнопку «Создать элемент библиотеки» в нижней части панели.

  4. Введите имя для выделенного элемента и нажмите клавишу Enter (в Windows) или Return (в Macintosh).

Вставка элемента библиотеки в документ

При добавлении элемента библиотеки на страницу вместе с фактическим содержимым в документ помещается ссылка на элемент библиотеки.

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

  3. Выполните одно из следующих действий.
    • Переместите элемент библиотеки с панели «Ресурсы» в окно документа.
    Примечание.

    Чтобы вставить в документ содержимое элемента библиотеки без ссылки на этот элемент, во время перемещения элемента из панели «Ресурсы» удерживайте клавишу Control (в Windows) либо Option (в Macintosh). Если элемент был вставлен таким способом, его можно будет редактировать в документе, однако данный документ не будет обновляться при обновлении страниц, в которых используется этот элемент библиотеки.

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

Редактирование элементов библиотеки и обновление документов

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

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

Редактирование элемента библиотеки

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

  2. Выберите элемент библиотеки.
  3. Нажмите кнопку «Изменить» или дважды щелкните элемент библиотеки.

    Dreamweaver открывает для редактирования элемента библиотеки новое окно, аналогичное окну документа. Серый фон указывает на то, что редактируется элемент библиотеки, а не документ.

  4. Внесите и сохраните необходимые изменения.
  5. Укажите, должны ли обновляться документы, размещенные на локальном сайте, в которых используется данный элемент библиотеки. Выберите «Обновить» для немедленного обновления. Если выбрать «Не обновлять», документы можно будет обновить позже с помощью команд «Инструменты» > «Библиотека» > «Обновить текущую страницу» или «Обновить страницы».

Обновление текущего документа и получение текущих версий всех элементов библиотеки

  1. Выберите «Инструменты» > «Библиотека» > «Обновить текущую страницу».

Обновление всего сайта либо всех документов, в которых используется определенный элемент библиотеки

  1. Выберите «Инструменты» > «Библиотека» > «Обновить страницы».

  2. Во всплывающем меню «Область поиска» укажите, что следует обновлять.
    • Чтобы обновить все страницы выбранного сайта текущими версиями всех элементов библиотеки, сначала выберите «Весь веб-сайт», а затем сайт из всплывающего меню.

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

  3. Убедитесь, что в группе «Обновить» выбран параметр «Элементы библиотеки».
    Примечание.

    Чтобы обновить шаблоны, выберите также параметр «Шаблоны».

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

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

Переименование элемента библиотеки

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

  2. Щелкните элемент библиотеки, затем после паузы щелкните его еще раз. (Не выполняйте обычный двойной щелчок, поскольку в результате этого элемент будет открыт для редактирования.)
  3. Введите новое имя.
  4. Щелкните в любом месте либо нажмите клавишу Enter (в Windows) или Return (в Macintosh).
  5. Укажите, должны ли обновляться документы, в которых используется этот элемент, выбрав «Обновить» либо «Не обновлять».

Удаление элемента из библиотеки

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

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

  2. Выберите элемент библиотеки.
  3. Нажмите кнопку «Удалить» или клавишу Delete, а затем подтвердите удаление элемента.
    Примечание.

    После удаления восстановить элемент библиотеки с помощью команды «Отменить» нельзя. Но его можно создать заново.

Повторное создание отсутствующего или удаленного элемента библиотеки

  1. Выберите в каком-либо документе экземпляр требуемого элемента.
  2. Нажмите кнопку «Создать заново» в инспекторе свойств («Окно» > «Свойства»).

Настройка выделения цветом элементов библиотеки

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

Изменение цвета выделения элементов библиотеки

  1. Выберите меню «Правка» > «Настройки» (Windows) или «Dreamweaver» > «Настройки» (Macintosh).
  2. Выберите категорию «Выделение цветом» из списка слева от диалогового окна «Настройки».
  3. Щелкните поле цвета «Элементы библиотеки», затем выберите цвет выделения с помощью палитры цветов (либо введите в текстовое поле шестнадцатеричное значение цвета).
  4. Установите флажок «Показать», чтобы выделение цветом отображалось в окне документа.
  5. Нажмите кнопку «ОК».

Отображение или скрытие выделения цветом в окне документа

  1. Чтобы отобразить выделение цветом, выберите «Вид» > «Параметры представления "Дизайн"» > «Невидимые элементы». Чтобы скрыть выделение цветом, отключите «Невидимые элементы».

Редактирование свойств элемента библиотеки

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

  1. Выделите элемент библиотеки в документе.
  2. Выберите один из следующих параметров в инспекторе свойств («Окно» > «Свойства»).

    Src

    Служит для отображения имени и расположения исходного файла элемента библиотеки. Эта информация не редактируется.

    Открыть

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

    Отсоединить от оригинала

    Служит для разрыва связи между выбранным элементом библиотеки и его исходным файлом. Отсоединенный элемент можно редактировать в документе, но он более не является элементом библиотеки и не обновляется при изменении оригинала.

    Создать заново

    Служит для замены исходного элемента библиотеки выделенным элементом. Данная команда используется для повторного создания элемента библиотеки, если исходный элемент отсутствует или был случайно удален.

Включение возможности редактирования элементов библиотеки в документе

Если после добавления элемента библиотеки в документ возникает потребность в редактировании данного экземпляра элемента, необходимо разорвать связь между элементом, находящимся в документе, и соответствующим элементом библиотеки. После того как для экземпляра элемента библиотеки установлена возможность редактирования, обновление такого экземпляра при изменении элемента библиотеки выполняться не будет.

  1. Выберите элемент библиотеки в текущем документе.
  2. Нажмите кнопку «Отсоединить от оригинала» в инспекторе свойств («Окно» > «Свойства»).

Редактирование варианта поведения, содержащегося в элементе библиотеки

Чтобы отредактировать вариант поведения элемента библиотеки, вначале следует вставить элемент в документ, а затем сделать этот элемент редактируемым в документе. После внесения изменений в элемент документа можно повторно создать элемент библиотеки путем его замены элементом документа.

  1. Откройте документ, в котором содержится элемент библиотеки.

    Запишите имя элемента библиотеки и все его теги. Эта информация понадобится позже.

  2. Выделите элемент библиотеки и нажмите кнопку «Отсоединить от оригинала» в инспекторе свойств («Окно» > «Свойства»).
  3. Выделите элемент, которому назначен вариант поведения.
  4. На панели «Поведение» («Окно» > «Поведение») дважды щелкните действие, которое необходимо изменить.
  5. Внесите изменения в появившемся диалоговом окне и нажмите кнопку «ОК».
  6. На панели «Ресурсы» выберите категорию «Библиотека».

  7. Запишите точное имя с учетом регистра исходного элемента библиотеки, выделите его и нажмите кнопку «Удалить».
  8. В окне документа выберите все элементы, которые входят в элемент библиотеки.

    Убедитесь, что выбраны точно такие же элементы, которые содержались в исходном элементе библиотеки.

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

  10. Чтобы обновить элемент библиотеки, используемый в других документах сайта, выберите команды «Инструменты» > «Библиотека» > «Обновить страницы».

  11. Во всплывающем меню «Область поиска» выберите «Файлы, использующие».
  12. Из соседнего всплывающего меню выберите только что созданный элемент библиотеки.
  13. Убедитесь, что в группе «Обновить» выбран параметр «Элементы библиотеки», и нажмите кнопку «Начать».
  14. По завершении обновлений нажмите кнопку «Закрыть».
Логотип Adobe

Вход в учетную запись