- Руководство пользователя Dreamweaver
- Введение
- Dreamweaver и Creative Cloud
- Рабочие среды и представления Dreamweaver
- Настройка сайтов
- О сайтах Dreamweaver
- Настройка локальной версии сайта
- Подключение к серверу публикации
- Настройка тестового сервера
- Импорт и экспорт параметров сайта Dreamweaver
- Перенос существующих веб-сайтов с удаленного сервера в корневой каталог локального сайта
- Специальные возможности в Dreamweaver
- Дополнительные настройки
- Настройка установок сайта для передачи файлов
- Задание параметров прокси-сервера в Dreamweaver
- Синхронизация настроек Dreamweaver с Creative Cloud
- Использование Git в Dreamweaver
- Управление файлами
- Создание и открытие файлов
- Управление файлами и папками
- Получение файлов с сервера и размещение их на нем
- Возврат и извлечение файлов
- Синхронизация файлов
- Сравнение файлов
- Скрытие файлов и папок на сайте Dreamweaver
- Включение заметок разработчика для сайтов Dreamweaver
- Предотвращение использования уязвимости Gatekeeper
- Макет и оформление
- Использование средств визуализации для создания макета
- Об использовании CSS для создания макета страницы
- Создание динамичных веб-сайтов с помощью Bootstrap
- Создание и использование медиазапросов в Dreamweaver
- Представление содержимого в таблицах
- Цвета
- Гибкий дизайн с использованием «резиновых» макетов
- Extract в Dreamweaver
- CSS
- Общие сведения о каскадных таблицах стилей
- Создание макетов страниц с помощью конструктора CSS
- Использование препроцессоров CSS в Dreamweaver
- Установка настроек стиля CSS в Dreamweaver
- Перемещение правил CSS в Dreamweaver
- Преобразование встроенного CSS в правило CSS в Dreamweaver
- Работа с тегами div
- Применение градиентов к фону
- Создание и редактирование эффектов перехода CSS3 в Dreamweaver
- Форматирование кода
- Содержимое страницы и ресурсы
- Задание свойств страницы
- Задание свойств заголовка CSS и свойств ссылки CSS
- Работа с текстом
- Поиск и замена текста, тегов и атрибутов
- Панель DOM
- Редактирование в режиме интерактивного просмотра
- Кодировка документов в Dreamweaver
- Выбор и просмотр элементов в окне документа
- Задание свойств текста в инспекторе свойств
- Проверка орфографии на веб-странице
- Использование горизонтальных линеек в Dreamweaver
- Добавление и изменение сочетаний шрифтов в Adobe Dreamweaver
- Работа с ресурсами
- Вставка и обновление даты в Dreamweaver
- Создание и управление избранными ресурсами в Dreamweaver
- Вставка и редактирование изображений в Dreamweaver
- Добавление мультимедийных объектов
- Добавление видео Dreamweaver
- Добавление видео HTML5
- Вставка файлов SWF
- Добавление звуковых эффектов
- Добавление аудио HTML5 в Dreamweaver
- Работа с элементами библиотеки
- Использование текста на арабском языке и иврите в Dreamweaver
- Создание ссылок и навигация
- Графические элементы и эффекты jQuery
- Написание кода веб-сайтов
- О программировании в Dreamweaver
- Среда написания кода в Dreamweaver
- Настройка параметров написания кода
- Настройка цветового оформления кода
- Написание и редактирование кода
- Подсказки по коду и автозавершение кода
- Свертывание и развертывание кода
- Повторное использование фрагментов кода
- Анализ Linting для проверки кода
- Оптимизация кода
- Редактирование кода в представлении «Дизайн»
- Работа с содержимым заголовков для страниц
- Вставка серверных включений в Dreamweaver
- Использование библиотек тегов в Dreamweaver
- Импорт пользовательских тегов в Dreamweaver
- Использование вариантов поведения JavaScript (общие инструкции)
- Применение встроенных вариантов поведения JavaScript
- Сведения об XML и XSLT
- Выполнение XSL-преобразования на стороне сервера в Dreamweaver
- Выполнение XSL-преобразования на стороне клиента в Dreamweaver
- Добавление символьных сущностей для XSLT в Dreamweaver
- Форматирование кода
- Процессы взаимодействия продуктов
- Установка и использование расширений в Dreamweaver
- Обновления в Dreamweaver, устанавливаемые через приложение
- Вставить документы Microsoft Office в Dreamweaver (только для Windows)
- Работа с Fireworks и Dreamweaver
- Редактирование содержимого на сайтах Dreamweaver с помощью Contribute
- Интеграция Dreamweaver с Business Catalyst
- Создание персонализированных кампаний почтовой рассылки
- Шаблоны
- О шаблонах Dreamweaver
- Распознавание шаблонов и документов на их основе
- Создание шаблона Dreamweaver
- Создание редактируемых областей в шаблонах
- Создание повторяющихся областей и таблиц в Dreamweaver
- Использование дополнительных областей в шаблонах
- Определение редактируемых атрибутов тега в Dreamweaver
- Создание вложенных шаблонов в Dreamweaver
- Редактирование, обновление и удаление шаблонов
- Экспорт и импорт XML-содержимого в Dreamweaver
- Применение или удаление шаблона из существующего документа
- Редактирование содержимого в шаблонах Dreamweaver
- Правила синтаксиса для тегов шаблона в Dreamweaver
- Настройка предпочтений выделения для областей шаблона
- Преимущества использования шаблонов в Dreamweaver
- Мобильные и многоэкранные устройства
- Динамические сайты, страницы и веб-формы
- Общие сведения о веб-приложениях
- Настройка компьютера для разработки приложений
- Устранение неполадок подключений к базам данных
- Удаление сценариев подключения в Dreamweaver
- Дизайн динамических страниц
- Обзор динамических источников содержимого
- Определение источников динамического содержимого
- Добавление динамического содержимого на страницы
- Изменение динамического содержимого в Dreamweaver
- Отображение записей баз данных
- Введение интерактивных данных и устранение неполадок с ними в Dreamweaver
- Добавление заказных вариантов поведения сервера в Dreamweaver
- Создание форм с помощью Dreamweaver
- Использование форм для сбора информации от пользователей
- Создание и включение форм ColdFusion в Dreamweaver
- Создание веб-форм
- Расширенная поддержка HTML5 для компонентов формы
- Разработка формы с помощью Dreamweaver
- Визуальное построение приложений
- Создание главной страницы и страницы сведений в Dreamweaver
- Создание страниц поиска и результатов поиска
- Создание страницы для вставки записи
- Создание страницы обновления записи в Dreamweaver
- Создание страниц удаления записей в Dreamweaver
- Применение ASP-команд для изменения базы данных в Dreamweaver
- Создание страницы регистрации
- Создание страницы входа
- Создание страницы с доступом только для авторизованных пользователей
- Защита папок в ColdFusion с помощью Dreamweaver
- Использование компонентов ColdFusion в Dreamweaver
- Тестирование, просмотр и публикация веб-сайтов
- Устранение неполадок
Для работы с ресурсами на текущем сайте предназначена панель «Ресурсы» в Dreamweaver.
Adobe Dreamweaver можно использовать для хранения и просмотра ресурсов, имеющихся на сайте, например изображений, фильмов, цветов, сценариев и ссылок. Кроме того, необходимый ресурс можно переместить и вставить прямо в страницу активного документа.
Ресурсы могут быть получены из разных источников. Например, ресурсы можно подготовить с помощью Adobe Photoshop, Adobe Animate CC или другого приложения, получить от коллеги, скопировать с компакт-диска или загрузить с веб-сайта.
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. Дополнительные сведения о повторном использовании ресурсов в библиотеках CC Libraries см. в статье Библиотеки Creative Cloud Libraries в Dreamweaver.
Просмотр ресурса в области просмотра
-
Выберите ресурс на панели «Ресурсы».
Отображение ресурсов в категории
-
Щелкните значок категории, расположенный слева на панели «Ресурсы».
Сортировка ресурсов
-
Щелкните заголовок столбца.
Например, чтобы отсортировать список изображений по типу (то есть сгруппировать все изображения формата GIF, все изображения формата JPEG и пр.), щелкните заголовок столбца «Тип».
Изменение размера столбца
-
Переместите границу, разделяющую заголовки двух смежных столбцов.
Изменение размеров области просмотра
-
Переместите разделитель (между областью просмотра и списком ресурсов) вверх или вниз.
Обновление содержимого панели «Ресурсы»
Создание списка сайтов может занять несколько секунд, поскольку программе Dreamweaver необходимо вначале получить данные из кэша сайта.
Некоторые изменения могут отображаться на панели «Ресурсы» с задержкой. Например, при добавлении на сайт или удалении с сайта ресурса изменения не будут отражены на панели «Ресурсы» до тех пор, пока не будет выполнено обновление списка «Сайт» с помощью кнопки «Обновить список сайтов». Например, если добавление или удаление ресурса выполняется вне программы Dreamweaver (с помощью Windows Explorer или Finder), то для обновления панели «Ресурсы» следует перестроить кэш сайта.
Когда вы удаляете лишь один определенный цвет или URL-адрес со своего сайта, либо сохраняете новый файл, содержащий цвет или URL-адрес, которые еще не использованы на сайте, изменения не отобразятся на панели «Ресурсы» до тех пор, пока не будет обновлен список сайтов.
- Чтобы вручную обновить список сайтов, нажмите кнопку «Обновить список сайтов» . При необходимости Dreamweaver создает кэш сайта или обновляет его.
- Чтобы обновить список сайтов и вручную перестроить кэш сайта, щелкните список «Ресурсы» правой кнопкой мыши (в Windows) или щелкните его при нажатой клавише Cmd (в Macintosh) и выберите команду «Обновить список сайтов».
Добавление ресурса в документ
Большинство ресурсов можно вставить в документ, перетащив их в представление «Интерактивный просмотр», «Код» или «Дизайн» в окне «Документ», либо нажав на панели кнопку «Вставить». Ресурсы можно перетащить из списка или из панели предварительного просмотра на панели «Ресурсы».
Примечание. Перетаскивание элементов из панели предварительного просмотра поддерживается только на компьютерах Mac.
В представлении «Дизайн» или «Интерактивный просмотр» можно вставлять цвета и URL-адреса. В представлении «Дизайн» можно применять цвета и URL-адреса к выбранным элементам.
-
Поместите в документе указатель вставки туда, где нужно разместить необходимый ресурс.
-
Выберите категорию ресурсов на панели «Ресурсы» слева.Примечание.
Выберите любую категорию, за исключением «Шаблоны». Шаблон используется для всего документа и, следовательно, не может быть вставлен в документ.
-
Выберите переключатель «Сайт» или «Избранное» вверху панели, а затем выберите ресурс.
Если вставляется элемент библиотеки, пропустите данный шаг, поскольку для элементов библиотеки списки «Сайт» и «Избранное» не используются.
-
Выполните одно из следующих действий.
Переместите ресурс с панели в документ. Его можно перетащить из списка или с панели предварительного просмотра.
Примечание. В ОС Windows ресурсы нельзя перетащить из панели предварительного просмотра.
Сценарии можно перемещать в содержимое заголовка в окне «Документ». Для отображения этой области выберите «Просмотр > Содержимое заголовка».
Выберите ресурс на панели и нажмите кнопку «Вставить».
Если выполняется вставка цвета, то этот цвет будет применен к тексту, расположенному после точки вставки.
Применение цвета к тексту с помощью панели «Ресурсы»
На панели «Ресурсы» отображаются цвета, которые уже применены к различным элементам, например к тексту, рамкам вокруг таблиц, фонам и т.д.
-
В представлении «Дизайн» выполните следующие действия.
-
Выделите текст в документе.
-
На панели «Ресурсы» выберите категорию «Цвета».
-
Выберите нужный цвет и нажмите кнопку «Применить».
-
-
В представлении «Интерактивный просмотр» выполните следующие действия.
-
На панели «Ресурсы» выберите категорию «Цвета».
-
Выполните одно из следующих действий.
- На панели «Ресурсы» щелкните цвет правой кнопкой мыши и выберите команду «Копировать значение цвета». Цветовое значение будет скопировано в буфер обмена. Теперь его можно вставить (Ctrl+v, Cmd+v) в CSS Designer.
- Перетащите цвет с панели предварительного просмотра и наведите курсор на элементы в представлении «Интерактивный просмотр». После перетаскивания цвета откроется диалоговое окно «Создание правила CSS». После нажатия кнопки OK цвет будет применен к выбранному элементу.
- На панели «Ресурсы» нажмите кнопку «Применить». Откроется диалоговое окно «Создание правила CSS». После нажатия кнопки OK цвет будет применен к выбранному элементу.
-
Назначение URL-адресов изображениям или тексту
-
В представлении «Дизайн» выполните следующие действия.
-
Выделите текст или изображение.
-
На панели «Ресурсы» выберите категорию «URL-адреса» в представлении «Сайты» или «Избранное», в зависимости от того, где сохранен URL-адрес.
Примечание.URL-адреса файлов сайта сохраняются по умолчанию в представлении «Сайты». Представление «Избранное» содержит URL-адреса, добавляемые пользователем.
-
Выберите URL-адрес.
-
Выполните одно из следующих действий.
Перетащите URL-адрес с панели на выделенный объект в представлении «Дизайн».
Выделите URL-адрес и нажмите кнопку «Вставить».
-
-
В представлении «Интерактивный просмотр» выполните следующие действия.
-
На панели «Ресурсы» выберите категорию «URL-адреса» в представлении «Сайты» или «Избранное», в зависимости от того, где сохранен URL-адрес.
-
Выполните одно из следующих действий.
- Перетащите URL-адрес из панели предварительного просмотра или из списка. Наведите курсор на элементы в представлении «Интерактивный просмотр». После перетаскивания URL-адреса элемент, выделенный в представлении «Интерактивный просмотр», будет заключен в тег <a>.
- Щелкните необходимый элемент в представлении «Интерактивный просмотр». Выберите URL-адрес на панели «Ресурсы» и нажмите кнопку «Применить». Выбранный элемент будет заключен в тег <a>.
-
Выбор и редактирование ресурсов
На панели «Ресурсы» можно выбрать несколько ресурсов одновременно. Это позволяет ускорить процесс их редактирования.
Выбор нескольких ресурсов
-
Выберите ресурс на панели «Ресурсы».
-
Выберите остальные требуемые ресурсы одним из следующих способов.
Для выбора нескольких расположенных подряд ресурсов щелкните первый и последний ресурсы, удерживая клавишу Shift.
Для добавления отдельного ресурса к уже выделенным (независимо от его положения в списке ресурсов) щелкните ресурс, удерживая клавишу Ctrl (в Windows) или Cmd (в Macintosh). Для отмены выделения ресурса щелкните его, удерживая клавишу Ctrl или Cmd.
Редактирование ресурса
При редактировании ресурса на панели «Ресурсы» варианты поведения зависят от его типа. Для некоторых ресурсов, например изображений, будет использоваться внешний редактор, открывающийся автоматически в случае, если для данного типа ресурсов было задано такое поведение. Редактировать цвета и URL-адреса можно только в списке «Избранное». При редактировании элементов шаблонов и библиотек изменения вносятся в пределах программы Dreamweaver.
-
На панели «Ресурсы» выполните одно из следующих действий.
Дважды щелкните ресурс.
Выберите ресурс и нажмите кнопку «Изменить».
Примечание.Если для редактирования ресурса должен применяться внешний редактор, но он автоматически не открывается, выберите «Правка» > «Настройки» (в Windows) либо «Dreamweaver» > «Настройки» (в Macintosh), затем выберите категорию «Типы файлов и редакторы» и определите редактор для данного типа ресурсов.
-
Внесите требуемые изменения.
-
По окончании выполните одно из следующих действий.
Если ресурс является файловым (любой ресурс, за исключением цвета или URL-адреса), сохраните (в используемом редакторе) и закройте его.
Если ресурс является URL-адресом, нажмите кнопку «ОК» в диалоговом окне «Изменение URL-адреса».
Примечание.Если ресурс представляет собой цвет, палитра цветов автоматически закроется после его выбора. Чтобы закрыть палитру цветов без выбора цвета, нажмите клавишу Esc.
Повторное использование ресурсов на другом сайте
На панели «Ресурсы» отображаются все ресурсы (только заданных типов) текущего сайта. Чтобы использовать какой-либо ресурс для другого сайта, необходимо скопировать его на другой сайт. Можно скопировать отдельный ресурс, набор отдельных ресурсов либо сразу всю папку «Избранное».
Перед перемещением ресурса с сайта на сайт может потребоваться найти файл на панели «Файлы», который соответствует ресурсу на панели «Ресурсы».
Содержимое панели «Файлы» может отличаться от содержимого панели «Ресурсы». Это объясняется тем, что панель «Ресурсы» отображает ресурсы активного документа.
Поиск файла ресурса на панели «Файлы»
-
На панели «Ресурсы» выберите категорию требуемого ресурса.
-
Щелкните правой кнопкой мыши (в Windows) или кнопкой «Ctrl» (в Macintosh) имя ресурса или значок на панели «Ресурсы», затем из контекстного меню выберите команду «Найти на сайте».Примечание.
Команда «Найти на сайте» недоступна для цветов и URL-адресов, поскольку они не являются файлами.
Откроется панель «Файлы» с выделенным файлом ресурса. С помощью команды «Найти на сайте» можно найти файл, соответствующий самому ресурсу, но не файлы, в которых данный ресурс используется.
Копирование ресурсов из панели «Ресурсы» на другой сайт
-
На панели «Ресурсы» выберите категорию ресурса, который необходимо скопировать.
-
Щелкните правой кнопкой мыши (в Windows) или щелкните с нажатой клавишей Cmd (в Macintosh) один или несколько ресурсов либо в списке «Сайт», либо в списке «Избранное», выберите команду «Копировать на веб-сайт» и из подменю со списком всех ранее определенных сайтов выберите целевой сайт, на который будет выполняться копирование.Примечание.
Из списка «Избранное» можно выполнить копирование всей папки «Избранное» либо отдельных ресурсов.
Ресурсы будут скопированы в соответствующие расположения выбранного целевого сайта. Dreamweaver создает новые папки на целевом сайте в соответствии с его иерархической структурой. Кроме того, ресурсы добавляются в список «Избранное» целевого сайта.
Примечание.Если копируемый ресурс представляет собой цвет или URL-адрес, то он отображается только в списке «Избранное» целевого сайта. Поскольку цвета и URL-адреса не соответствуют никаким файлам, то никакого копирования файлов на сайт назначения не происходит.