- Прямой доступ к вашим собственным файлам PSD в Creative Cloud и файлам PSD, которым предоставлен общий доступ в совместной папке.
- Контекстные подсказки по коду, чтобы легко задавать шрифты, цвета и градиенты в CSS.
- Помощь при перетаскивании для создания тегов изображений из слоев PSD.
- Вставка стилей напрямую в поле интерактивного просмотра (например, в конструктор CSS и отображение элемента).
- Руководство пользователя 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
- Тестирование, просмотр и публикация веб-сайтов
- Устранение неполадок
Узнайте, как быстро преобразовать файлы PSD в веб-дизайн на основе HTML для мобильных устройств и настольных компьютеров. Извлекайте CSS, изображения, измерения, шрифты, цвета, градиенты и прочее из Photoshop напрямую в Dreamweaver.
С 1 июля 2022 года функции панели Extract в Dreamweaver 21.2 и более ранних версиях будет прекращена. Вы можете использовать Adobe Photoshop для извлечения информации о стилях, ресурсов из компонентов PSD и повторно использовать их в Dreamweaver
.
Интеграция Extract в Dreamweaver позволяет веб-дизайнерам и разработчикам применять информацию о дизайне и извлекать оптимизированные для Интернета ресурсы непосредственно в среду написания кода. Extract предоставляет комплексное и автономное решение для извлечения информации о стилях и ресурсах из файлов PSD, что снижает необходимость постоянного переключения между Photoshop и Dreamweaver.
С помощью панели Extract в Dreamweaver можно извлекать свойства CSS, изображения, шрифты, цвета, градиенты и измерения непосредственно на веб-страницу. Помимо основных функций Extract, Dreamweaver также предоставляет уникальные функции, описанные ниже.
Начало работы с Extract
Extract в Dreamweaver позволяет получать доступ к файлам PSD непосредственно из панели Extract в Dreamweaver. Ознакомьтесь со следующими разделами, чтобы узнать больше о панели и рабочей среде Extract, а также о загрузке файлов PSD на панели Extract:
Панель и рабочая среда Extract
Рабочая среда Extract предназначена для того, чтобы помочь вам более эффективно использовать Extract с Dreamweaver. В рабочей среде панель Extract отображается слева, а веб-страница — справа на разделенном экране (представления «Интерактивный просмотр» и «Код»). Рабочую среду можно настроить путем перетаскивания, закрепления, сворачивания или развертывания панели в зависимости от ситуации. Кроме того, настроенную рабочую среду можно сохранить для дальнейшего использования.
Если вы случайно закрыли панель Extract, используйте сочетание клавиш Ctrl + K (для Windows), Cmd + K (для Mac) или выберите «Окно» > Extract, чтобы снова открыть панель.
При первом запуске Dreamweaver на панели Extract отображаются интерактивные уроки, которые помогут приступить к работе. Для переключения между разными уроками используйте раскрывающийся список в верхней части панели.
После прохождения уроков нажмите «Приступить к работе», чтобы начать использовать Extract в Dreamweaver. На панели Extract в виде миниатюр отображаются папки и файлы PSD в вашей учетной записи Creative Cloud. Это те файлы, которые были загружены или синхронизированы с настольного компьютера, или те, которым предоставлен общий доступ в совместной папке в Creative Cloud.
Чтобы перезапустить урок, щелкните всплывающее меню в правом верхнем углу панели и выберите «Начать урок».
Отправка файлов PSD в Creative Cloud
Чтобы загрузить файл PSD в Creative Cloud, выберите Окно > Извлечь и нажмите Загрузите PSD. Если файлы PSD разработаны другим пользователем или командой, вы можете сделать их доступными для совместного использования в Creative Cloud. Затем можно загрузить файлы и отправить их в учетную запись непосредственно на сайте Creative Cloud или через панель Extract в Dreamweaver.
Если вы используете Dreamweaver 21.2 или более позднюю версию на устройстве MacOS, включите тип файлов PSD в окне Finder и загрузите свой файл.
- На панели Extract щелкните Загрузить PSD.
- В окне Finder щелкните Параметры и выберите *.psd из появившегося раскрывающегося списка.
- Выберите файл PSD и щелкните Открыть, чтобы отправить его.
Открытие файлов PSD на панели Extract
Щелкните миниатюру необходимого файла PSD на панели Extract. Если обновленная версия файла PSD станет доступна в Creative Cloud после его открытия, перезагрузите файл PSD на панели Extract. Для этого щелкните имя файла PSD или нажмите кнопку «Перезагрузить PSD» во всплывающем меню в верхнем правом углу. Чтобы вернуться к просмотру в виде миниатюр и выбрать другой файл, щелкните значок Creative Cloud в левом верхнем углу панели.
Чтобы увеличить изображение и рассмотреть дизайн, измените масштаб в верхней части панели Extract или используйте Alt +/-. Используйте вкладку «Слои» или раскрывающийся список «Композиция слоев», чтобы показать или скрыть элементы в файле PSD.
Теперь вы полностью готовы к переносу данных из PSD на веб-сайт.
Настройка Extract
Настройки Extract позволяют указать стандартный формат файла, в котором должны извлекаться изображения, а также стандартную единицу размера шрифтов, которая будет отображаться на панели Extract.
-
Выберите «Правка» > «Настройки» (Windows) или Dreamweaver > «Настройки» (Mac).
-
Выберите Extract в списке категорий.
-
(Необязательно) Измените стандартный формат, в котором должны извлекаться изображения.
-
(Необязательно) В разделе «Extract для устройств» выберите необходимые разрешения. Эти настройки будут использованы при выборе сохранения изображения в нескольких версиях с разными разрешениями.
- Чтобы сохранять версии с суффиксами, щелкните по соответствующей строке в столбце «Суффикс» и введите текст.
- Чтобы версии с разными разрешениями сохранялись в отдельных папках, щелкните по соответствующей строке в столбце «Папка» и введите относительный путь.
-
(Необязательно) Нажмите кнопку «Очистить кэш», чтобы удалить кэшированные данные, связанные с использованием Extract.
-
Нажмите кнопку «Применить», а затем закройте диалоговое окно «Настройки».
-
Чтобы просмотреть изменения на панели Extract, перезагрузите PSD (всплывающее меню > «Перезагрузить PSD»).
Извлечение CSS из файлов PSD
Можно копировать все или определенные CSS-свойства элементов в файлы PSD и вставлять стили непосредственно в конструктор CSS, в отображение элемента (в режиме интерактивного просмотра) или в код (источник CSS или HTML-документ).
Кроме того, подсказки по коду автоматически заполняются свойствами CSS элемента, выбранного в файле PSD. Если вы предпочитаете писать код, используйте эти подсказки по коду для извлечения свойств CSS в код.
-
На панели Extract («Окно» > Extract) щелкните необходимый файл PSD. Файл PSD развернется в виде миниатюр, что позволит ясно увидеть его структуру.
-
В файле PSD щелкните необходимый элемент или ресурс. Появится всплывающее окно со списком свойств CSS элемента, и вы сможете выбрать и скопировать их. Можно просмотреть высоту и ширину выбранного элемента в пикселах или процентах.
Примечание. Если выбраны проценты, то единицы измерения также будут отображаться в процентах.
Чтобы скопировать CSS, выберите свойства, которые необходимо скопировать, после этого нажмите кнопку «Копировать CSS».
-
Вставьте CSS в документ одним из способов, описанных ниже.
- Чтобы вставить CSS в конструктор CSS, щелкните необходимый селектор правой кнопкой мыши, а затем выберите команду «Вставить стили».
- Чтобы вставить CSS с помощью отображения элемента, щелкните селектор правой кнопкой мыши, а затем выберите команду «Вставить стили».
- Чтобы вставить CSS в код, поместите курсор вставки в нужное место, щелкните правой кнопкой мыши и выберите «Вставить».
Чтобы использовать подсказки по коду для извлечения CSS, выполните действия, описанные ниже.
-
Откройте источник CSS, прикрепленный к документу, или переключитесь в представление кода HTML-документа.
-
На панели Extract щелкните необходимый файл PSD, а затем нужный элемент в композиции.
-
В документе поместите курсор вставки в нужное место кода.
-
Начните вводить название свойства CSS, чтобы увидеть подсказки по коду, содержащие свойства CSS выбранного элемента в файле PSD. Щелкните необходимое свойство CSS, чтобы вставить его в код.
-
Для извлечения нескольких свойств CSS выберите требуемые свойства во всплывающем окне панели Extract. После этого (в подсказках по коду) выберите команду вставки выбранного.
Копирование текста из файлов PSD
Текст или содержимое файлов PSD можно вставить на веб-страницу одним щелчком мыши. Чтобы скопировать текст из файла PSD на панель Extract, выберите текстовый элемент и щелкните команду «Копировать текст». Текст скопируется в буфер обмена. После этого можно вставить текст там, где это требуется.
После извлечения текста вы можете извлечь свойства (шрифты и цвета), которые связаны с текстом. Дополнительные сведения см. в разделе Извлечение шрифтов, цветов и градиентов из файлов PSD.
Извлечение изображений из файлов PSD
Можно просто перетащить любой слой PSD на панели Extract в точное место интерактивного просмотра веб-страницы. Такие визуальные подсказки интерактивного просмотра, как интерактивные направляющие и значок DOM, помогут перетащить и разместить элемент. При задержке указателя мыши на некоторое время перед окончательным перемещением элемента появится значок DOM (</>). Структура DOM отображается при наведении курсора мыши на значок </>, что дает возможность отпустить элемент внутри структуры. Если вы предпочитаете писать код, используйте контекстные подсказки по коду и извлекайте изображения. Подсказки для кода позволяют извлекать цвета и градиенты как изображения.
Если файл PSD содержит несколько монтажных областей, то каждая монтажная область отображается в виде папки на панели слоев. Можно развернуть или свернуть папку, чтобы отобразить или скрыть ее содержимое. Чтобы увеличить масштаб в определенной монтажной области, просто щелкните мышью по ее названию. Чтобы уменьшить масштаб, щелкните по любому месту за пределами монтажной области и нажмите «Уместить».
Перед вставкой извлеченного изображения Dreamweaver отображает название изображения, которое можно редактировать. По умолчанию изображение сохраняется в корневой папке сайта. Чтобы сохранить изображение в другом месте, укажите вместе с названием файла полный путь к каталогу.
Примечание. При извлечении изображения в документ, который не относится к определенному сайту, изображение извлекается в папку, где находится документ. В случае несохраненных документов вам будет предложено сначала сохранить документ.
Можно также сохранить изображение на локальном диске и загрузить его на веб-страницу позднее. Кроме того, если вы разрабатываете интерактивный веб-сайт, можно одним щелчком сохранить версии изображения в нескольких разрешениях для разных устройств.
-
На панели Extract выберите файл PSD, из которого нужно загрузить изображения.
-
Щелкните необходимое изображение в файле PSD.
Примечание.Используйте вкладку «Слои» или раскрывающийся список «Композиция слоев» на панели Extract, чтобы показать или скрыть изображения в файле PSD. Если изображение состоит из нескольких слоев, можно выбрать один из слоев изображения для извлечения.
В правой части рабочей среды будут отображаться всплывающие подсказки по коду (в представлении «Код»).
-
Чтобы импортировать несколько изображений, выберите их, удерживая нажатой клавишу Shift или Command. Выбранные изображения извлекаются как единое изображение.
-
Выполните одно из действий, описанных ниже.
- Во всплывающем окне, которое появится при нажатии на изображение, щелкните . Укажите путь, название файла, формат файла и коэффициент масштабирования (если необходимо). Затем выполните действия, описанные ниже.
- Нажмите «Сохранить», чтобы сохранить изображение в полном разрешении. Чтобы масштабировать изображение, выберите «Масштаб» и укажите коэффициент масштабирования.
- Нажмите «Сохранить несколько», чтобы сохранить несколько версий изображения с разными разрешениями. Файл PSD не обязательно должен содержать все версии. Dreamweaver может сохранить изображение в нескольких разрешениях во время извлечения.
Можно указать необходимые разрешения и соответствующую папку для вывода в настройках.
- Перетяните изображение на панель интерактивного просмотра документа. Интерактивные направляющие, которые появляются в представлении интерактивного просмотра, помогают позиционировать изображение.
При перетаскивании изображения Dreamweaver отображает название изображения. Можно редактировать не только название изображения, но и расширение. Чтобы сохранить изображение, нажмите клавишу Enter. Изображение сохраняется в корневой папке сайта по умолчанию. Чтобы сохранить изображение в другом месте, введите путь вместе с названием файла.
- При нажатии на изображение в Dreamweaver заполняются контекстные подсказки по коду. В представлении кода HTML-документа или в документе CSS установите курсор в место вставки. После ввода названия свойства фонового изображения или тега <img> название выбранного изображения появляется в подсказках по коду. Выберите изображение, при необходимости измените название и расширение и нажмите клавишу Enter.
По умолчанию изображение сохраняется в корневой папке сайта. Чтобы сохранить изображение в другом месте, введите путь к пользовательскому файлу вместе с назанием файла.
- Во всплывающем окне, которое появится при нажатии на изображение, щелкните . Укажите путь, название файла, формат файла и коэффициент масштабирования (если необходимо). Затем выполните действия, описанные ниже.
Извлечение измерений из файлов PSD
С помощью панели Extract можно легко просмотреть и извлечь значение измерения между двумя элементами в файле PSD.
-
В файле PSD на панели Extract щелкните необходимые элементы, удерживая клавишу Shift или Command.
На панели Extract отображается горизонтальное и вертикальное расстояние между двумя элементами.
Примечание.Чтобы увидеть значения в процентах, щелкните по любому элементу и выберите проценты.
-
Щелкните необходимое значение, чтобы скопировать его в буфер обмена.
-
Вставьте значение там, где это требуется, например в свойствах CSS конструктора CSS или в коде.
Извлечение шрифтов, цветов и градиентов из файлов PSD
С помощью панели Extract можно извлекать свойства CSS шрифтов, цветов или градиентов, которые используются в файле PSD.
-
На панели Extract щелкните «Стили».
-
Чтобы извлечь шрифты, выполните действия в разделе «Шрифты», описанные ниже.
-
Разверните требуемый тип шрифта.
Чтобы узнать больше о шрифте, щелкните значок Adobe Fonts ().
-
Выберите формат и размер, которые нужно скопировать, и во всплывающем окне, которое появится, нажмите кнопку «Копировать CSS». Извлеките теги текстовых элементов, в которых используются выбранные вами шрифт, формат и размер.
Примечание.В настройках Extract («Настройки» > Extract) можно изменить единицу шрифта на «em» или «rem». Чтобы просмотреть изменения, щелкните «Перезагрузить PSD» во всплывающем меню в правом верхнем углу панели Extract.
-
Вставьте CSS там, где это требуется, например в коде или конструкторе CSS.
Чтобы извлечь цвета, выполните действия в разделе «Цвета», описанные ниже.
-
Щелкните необходимый образец цвета. Извлеките теги элементов, в которых используется выбранный цвет.
Примечание. С помощью палитры цветов также можно выбрать другой цвет из файла PSD.
-
Во всплывающем окне, которое появится при нажатии на образец цвета, выберите необходимую модель цвета (RGB, шестнадцатеричная или HSL), а затем скопируйте (Ctrl + c; Cmd + c) значение цвета.
-
Вставьте значение цвета там, где это требуется, например в коде или конструкторе CSS.
-
-
Чтобы извлечь градиенты, щелкните образец градиента в разделе «Градиенты». Во всплывающем окне, которое появится, нажмите кнопку «Копировать CSS». Вставьте CSS там, где это требуется, например в коде или конструкторе CSS.
Вместе с градиентами вставляются префиксы браузера, выбранные в настройках («Настройки» > «Стили CSS»). При извлечении радиального градиента соответствующий CSS добавляется без префикса браузера, поскольку радиальные градиенты не поддерживаются.