Extract в 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 также предоставляет уникальные функции, описанные ниже.
- Прямой доступ к вашим собственным файлам PSD в Creative Cloud и файлам PSD, которым предоставлен общий доступ в совместной папке.
- Контекстные подсказки по коду, чтобы легко задавать шрифты, цвета и градиенты в CSS.
- Помощь при перетаскивании для создания тегов изображений из слоев PSD.
- Вставка стилей напрямую в поле интерактивного просмотра (например, в конструктор CSS и отображение элемента).
Начало работы с 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.
- Чтобы сохранять версии с суффиксами, щелкните по соответствующей строке в столбце «Суффикс» и введите текст.
- Чтобы версии с разными разрешениями сохранялись в отдельных папках, щелкните по соответствующей строке в столбце «Папка» и введите относительный путь.
(Необязательно) Нажмите кнопку «Очистить кэш», чтобы удалить кэшированные данные, связанные с использованием 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, прикрепленный к документу, или переключитесь в представление кода HTML-документа.
Начните вводить название свойства CSS, чтобы увидеть подсказки по коду, содержащие свойства CSS выбранного элемента в файле PSD. Щелкните необходимое свойство CSS, чтобы вставить его в код.
Для извлечения нескольких свойств CSS выберите требуемые свойства во всплывающем окне панели Extract. После этого (в подсказках по коду) выберите команду вставки выбранного.
Копирование текста из файлов PSD
Текст или содержимое файлов PSD можно вставить на веб-страницу одним щелчком мыши. Чтобы скопировать текст из файла PSD на панель Extract, выберите текстовый элемент и щелкните команду «Копировать текст». Текст скопируется в буфер обмена. После этого можно вставить текст там, где это требуется.
После извлечения текста вы можете извлечь свойства (шрифты и цвета), которые связаны с текстом. Дополнительные сведения см. в разделе Извлечение шрифтов, цветов и градиентов из файлов PSD.
Извлечение изображений из файлов PSD
Можно просто перетащить любой слой PSD на панели Extract в точное место интерактивного просмотра веб-страницы. Такие визуальные подсказки интерактивного просмотра, как интерактивные направляющие и значок DOM, помогут перетащить и разместить элемент. При задержке указателя мыши на некоторое время перед окончательным перемещением элемента появится значок DOM (). Структура DOM отображается при наведении курсора мыши на значок , что дает возможность отпустить элемент внутри структуры. Если вы предпочитаете писать код, используйте контекстные подсказки по коду и извлекайте изображения. Подсказки для кода позволяют извлекать цвета и градиенты как изображения.
Если файл PSD содержит несколько монтажных областей, то каждая монтажная область отображается в виде папки на панели слоев. Можно развернуть или свернуть папку, чтобы отобразить или скрыть ее содержимое. Чтобы увеличить масштаб в определенной монтажной области, просто щелкните мышью по ее названию. Чтобы уменьшить масштаб, щелкните по любому месту за пределами монтажной области и нажмите «Уместить».
Перед вставкой извлеченного изображения Dreamweaver отображает название изображения, которое можно редактировать. По умолчанию изображение сохраняется в корневой папке сайта. Чтобы сохранить изображение в другом месте, укажите вместе с названием файла полный путь к каталогу.
Примечание. При извлечении изображения в документ, который не относится к определенному сайту, изображение извлекается в папку, где находится документ. В случае несохраненных документов вам будет предложено сначала сохранить документ.
Можно также сохранить изображение на локальном диске и загрузить его на веб-страницу позднее. Кроме того, если вы разрабатываете интерактивный веб-сайт, можно одним щелчком сохранить версии изображения в нескольких разрешениях для разных устройств.
Используйте вкладку «Слои» или раскрывающийся список «Композиция слоев» на панели Extract, чтобы показать или скрыть изображения в файле PSD. Если изображение состоит из нескольких слоев, можно выбрать один из слоев изображения для извлечения.
В правой части рабочей среды будут отображаться всплывающие подсказки по коду (в представлении «Код»).
Чтобы импортировать несколько изображений, выберите их, удерживая нажатой клавишу Shift или Command. Выбранные изображения извлекаются как единое изображение.
- Во всплывающем окне, которое появится при нажатии на изображение, щелкните . Укажите путь, название файла, формат файла и коэффициент масштабирования (если необходимо). Затем выполните действия, описанные ниже.
- Нажмите «Сохранить», чтобы сохранить изображение в полном разрешении. Чтобы масштабировать изображение, выберите «Масштаб» и укажите коэффициент масштабирования.
- Нажмите «Сохранить несколько», чтобы сохранить несколько версий изображения с разными разрешениями. Файл PSD не обязательно должен содержать все версии. Dreamweaver может сохранить изображение в нескольких разрешениях во время извлечения.
Можно указать необходимые разрешения и соответствующую папку для вывода в настройках.
- Перетяните изображение на панель интерактивного просмотра документа. Интерактивные направляющие, которые появляются в представлении интерактивного просмотра, помогают позиционировать изображение.
При перетаскивании изображения Dreamweaver отображает название изображения. Можно редактировать не только название изображения, но и расширение. Чтобы сохранить изображение, нажмите клавишу Enter. Изображение сохраняется в корневой папке сайта по умолчанию. Чтобы сохранить изображение в другом месте, введите путь вместе с названием файла.
- При нажатии на изображение в Dreamweaver заполняются контекстные подсказки по коду. В представлении кода HTML-документа или в документе CSS установите курсор в место вставки. После ввода названия свойства фонового изображения или тега
название выбранного изображения появляется в подсказках по коду. Выберите изображение, при необходимости измените название и расширение и нажмите клавишу Enter.
По умолчанию изображение сохраняется в корневой папке сайта. Чтобы сохранить изображение в другом месте, введите путь к пользовательскому файлу вместе с назанием файла.