Обзор новых возможностей

В выпуске Dreamweaver CC 2015 мы в первую очередь уделили внимание повышению удобства работы, возможностям редактирования кода, предварительному просмотру веб-страниц на устройствах и функциям пакетного извлечения оптимизированных для веб-сайтов изображений из файлов Photoshop в различных разрешениях. Интеграция с платформой Bootstrap помогает создавать динамичные веб-сайты, оптимизированные для мобильных устройств. Кроме того, для эффективной разработки веб-сайтов можно использовать визуальные медиазапросы, позволяющие визуализировать и редактировать дизайн сайта в различных ключевых точках. 

Этот выпуск также содержит ряд улучшений для функций редактирования в режиме интерактивного просмотра и конструктора CSS. В данной статье приведено описание этих новых функций и улучшений, а также предоставлены ссылки на ресурсы, которые содержат дополнительную справку и обучающие материалы.

Теперь Dreamweaver позволяет тестировать готовые веб-страницы одновременно на нескольких устройствах. Вы можете увидеть, как веб-страница выглядит в различных форм-факторах, и проверить работу интерактивных функций. Для этого не требуется устанавливать какие-либо мобильные приложения или физически подключать устройства к настольному ПК. Просто отсканируйте своим устройством автоматически созданный QR-код, и на нем появится ваша страница!

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

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

Визуальные медиазапросы

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

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

•  Зеленый: медиазапросы с условиями максимальной ширины.
•  Синий: медиазапросы с условиями максимальной и минимальной ширины.
•  Сиреневый: медиазапросы с условиями минимальной ширины.

Дополнительные сведения см. в разделе Визуальные медиазапросы.

Поддержка linting-анализа кода

В новой версии Dreamweaver можно выполнять отладку кода для поиска распространенных ошибок с помощью так называемого linting-анализа. Linting-анализ — это процесс анализа кода для выявления возможных ошибок или подозрительного использования кода. Dreamweaver может анализировать файлы HTML, CSS и JavaScript при загрузке, сохранении или редактировании. Ошибки и предупреждения отображаются на новой панели вывода.

Дополнительные сведения см. в разделе Linting-анализ кода.

Поддержка Emmet

Вы заядлый разработчик, который вводит строки кода в Dreamweaver? Сэкономьте свое время, воспользовавшись сокращениями Emmet. Эти сокращения легко вводятся и запоминаются, а затем достаточно нажать клавишу TAB в представлении кода, и они превращаются в полноценный программный код.

Подробные сведения см. в разделе Вставка кода с помощью Emmet.

Просмотр в представлении кода

Если вы работаете в представлении «Разделение», вы сразу же увидите изменения изображений или цветов в представлении «Интерактивный просмотр» или «Дизайн». Но если вы предпочитаете работать только в представлении кода, то изображения будут представлять собой просто имена файлов, что часто неудобно. Цвета (кроме предварительно заданных) также будут всего лишь запутанным набором цифр. В этой версии Dreamweaver вы можете быстро просматривать изображения и цвета в представлении кода. Это поможет визуально связать имена файлов и форматы цветов с изображениями и цветами, которые они представляют. В результате вы сможете быстрее принимать решения и значительно ускорить разработку.

Подробные сведения см. в разделе Предварительный просмотр изображений и цветов в представлении кода.

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

Примечание. Отображается только первая ошибка в строке. Если строка содержит только предупреждение, то отображается описание предупреждения. Если строка содержит предупреждение и ошибку, будет отображено только описание ошибки.

Новые фрагменты кода

Фрагменты — это части кода, которые можно использовать повторно в ваших проектах. В этом выпуске Dreamweaver представлены новые и обновленные фрагменты кода:

• Фрагменты кода Boostrap
• Анимация и переходы CSS
• Эффекты CSS
• Фрагменты кода CSS
• Фрагменты кода HTML
• Фрагменты кода JavaScript (обновленные)
• Фрагменты кода PHP
• Фрагменты кода препроцессоров
• Фрагменты кода с адаптивным дизайном

Сведения об использовании фрагментов кода см. в разделе Работа с фрагментами кода.

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

Интеграция Bootstrap

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

Dreamweaver позволяет создавать документы Bootstrap и редактировать существующие веб-страницы, созданные с помощью Bootstrap. Вы можете приступить к созданию веб-сайта, воспользовавшись одним из начальных шаблонов Bootstrap, которые можно выбрать в диалоговом окне «Создать документ» (Начальные шаблоны > Шаблоны Bootstrap). 

• Bootstrap — агентство
  
• Bootstrap — электронная коммерция
• Bootstrap — портфолио
• Bootstrap — продукт
• Bootstrap — недвижимость
• Bootstrap — резюме
  

В диалоговом окне «Создать документ» (Создать документ > Bootstrap) можно также создать документ Bootstrap с вашим собственным дизайном. А затем вы сможете построить веб-сайт из отдельных элементов при помощи компонентов Bootstrap, например каруселей или аккордеонов, с помощью панели «Вставка» в Dreamweaver. Если же у вас есть файлы Photoshop, используйте Extract, чтобы добавить в документ Bootstrap изображения, шрифты, стили, текст и многое другое.

Вы можете открывать в Dreamweaver как готовый файл Bootstrap, так и незаконченный проект, а затем редактировать их не только путем изменения кода, но и с использованием визуальных возможностей, например интерактивного просмотра, визуального конструктора CSS, визуальных медиазапросов и инструмента Extract. 

Подробные сведения см. в разделе Работа с файлами Bootstrap.

Поддержка редактирования таблиц в режиме интерактивного просмотра

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

Дополнительные сведения см. в разделах Изменение размера таблиц и Форматирование таблиц и ячеек.

Новые меню в режиме интерактивного просмотра

Благодаря следующим меню в режиме интерактивного просмотра теперь доступны новые возможности редактирования.

• Изменить
• Формат
• Команды
• Веб-сайт
• Параметр «Специальная вставка» в меню «Правка» и контекстном меню

Поддержка элементов пользовательского интерфейса jQuery в режиме интерактивного просмотра

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

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

• Значок DOM. Этот значок появляется в том случае, если на короткое время задержаться при появлении интерактивных направляющих. Щелкните этот значок для просмотра структуры DOM во всплывающем окне и перетащите элемент в нужное место в структуре документа.

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

Дополнительные сведения см. в разделе Вставка элементов непосредственно в режиме интерактивного просмотра.

Панель DOM

Теперь панель быстрого просмотра элемента заменена на панель DOM (Окна > DOM). Панель DOM поддерживает все функции панели быстрого просмотра элемента и многое другое. Эта панель доступна во всех рабочих средах и сохраняет свое состояние, то есть можно открыть два документа, а затем использовать их панели DOM одновременно.

С помощью панели DOM вы можете:

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

Дополнительные сведения об использовании панели DOM и редактировании структуры HTML с ее помощью см. в разделе Панель DOM.

Подсказки по коду SVG в HTML-документах

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

Обзорные версии технологии

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

Обзорная функция в этом выпуске — выделение кода. Она выделяет все вхождения любого выделенного текста в представлении кода.

Чтобы использовать эту функцию, выполните следующие действия.

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

• Выбрать следующее вхождение: F3 (Win); Cmd + G (Mac)
• Выбрать предыдущее вхождение: Shift + F3 (Win); Cmd + Shift + G (Mac)

Настраиваемый режим предварительного просмотра в представлении кода с помощью API-интерфейса ShowPreview

В этой версии Dreamweaver можно создать настраиваемое всплывающее меню просмотра, которое будет отображаться при наведении курсора на код в представлении кода. Для реализации настраиваемого предварительного просмотра, помимо существующего API-интерфейса mm:browsercontrol, можно пользоваться новым API-интерфейсом. Например, эти API-интерфейсы позволяют отображать предварительный просмотр всех параметров функции JavaScript при наведении курсора на ее имя.

Дополнительные сведения см. в разделе Справочник по API Dreamweaver: функции представления кода.

Свертывание кода

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

Свертывание кода доступно для файлов HTML, CSS, LESS, Sass, SCSS, JS, PHP, XML, SVG и основано на блоках тегов.

Операции копирования, вырезания, вставки и перетаскивания сохраняют состояние кода (свернуто/развернуто). Например, если скопировать и вставить свернутый блок кода, скопированный текст будет вставлен тоже в виде свернутого блока.

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

Подробные сведения см. в разделе Свертывание кода.

Усовершенствования панели Extract

• Extract для устройств
• Поддержка процентных значений

Extract для устройств

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

Extract в Dreamweaver в значительной степени упрощает эту задачу. При извлечении изображения из файла Photoshop в выпуске Dreamweaver 2015 можно выбрать для него различные разрешения. Изображение в Photoshop автоматически масштабируется в заданное разрешение во время извлечения.

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

Дополнительные сведения см. в разделе Извлечение изображений из файлов PSD.

Поддержка процентных значений

На панели Extract теперь можно просматривать ширину и высоту изображений не только в пикселах, но и в процентах. Также в процентах можно просматривать размеры.

Если щелкнуть ресурс на панели Extract, появится всплывающее окно, где можно переключиться между пикселами и «%». Выбранные в этом окне единицы сохраняются при просмотре размеров различных ресурсов.

Улучшенные возможности редактирования в режиме интерактивного просмотра

Вложенная вставка в режиме интерактивного просмотра

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

• Направляющие «до/после». Появляются при наведении указателя на верхние или нижние 30 % поверхности элемента.
• Визуальная обратная связь вложенных элементов. Появляется при наведении указателя на средние 40 % поверхности элемента.

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

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

Изменения панели инструментов «Создание кода»

На панели инструментов «Создание кода» были удалены следующие параметры, связанные со свертыванием кода.

• Свернуть тег полностью
• Свернуть выделенный код

Примечание. Эти параметры удалены из контекстного меню и меню «Редактирование».   Теперь можно свернуть код, наведя указатель мыши на номер строки и щелкнув появившийся треугольник.   Кроме того, для файлов HTML, CSS и JS теперь недоступны следующие параметры.

• Выделение ошибок кода.
• Сообщения о синтаксических ошибках на информационной панели.

Теперь можно использовать linting-анализ для поиска ошибок в коде, при этом результаты анализа отображаются на панели вывода.

Улучшения в конструкторе CSS

• Режимы «Все» и «Текущий»
• Подсказки для значений свойств
• Цветовое кодирование для медиазапросов
• Другие изменения

Режимы «Все» и «Текущий»

Конструктор CSS теперь поддерживает два режима для просмотра и редактирования свойств CSS.

• Все. В этом режиме отображаются все таблицы CSS, медиазапросы и селекторы текущего документа. Этот режим не реагирует на выделение в представлении «Дизайн» или режиме интерактивного просмотра.

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

• Текущий. В этом режиме отображается результат применения всех стилей к элементу, выбранному в представлении «Дизайн» или режиме интерактивного просмотра. Если фокус в CSS-файле находится на селекторе, в этом режиме отображаются свойства этого селектора.

Подсказки для значений свойств

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

Цветовое кодирование для медиазапросов

Медиазапросы на панели конструктора CSS теперь имеют такую же цветовую кодировку, как и визуальные медиазапросы.

•  Зеленый: медиазапросы с условиями максимальной ширины.
•  Синий: медиазапросы с условиями максимальной и минимальной ширины.
•  Сиреневый: медиазапросы с условиями минимальной ширины.

Другие изменения

• Параметр «Показывать заданные». При первом запуске Dreamweaver флажок «Показывать заданные» теперь установлен по умолчанию. Любое изменение этого параметра (установка и отключение) сохраняется во всех последующих сеансах Dreamweaver.

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

• Выделение фона при добавлении свойства. Когда фокус установлен на текстовом поле «Добавить новое свойство», фон строки выделяется серым цветом.

• Изменение положения кнопок «+» и «-». Кнопки «+» и «-», отображаемые в каждом разделе на панели конструктора CSS, теперь перемещены из крайней правой в крайнюю левую часть, чтобы сделать их более видимыми.

• Категория «Пользовательские» переименована. Имя категории «Пользовательские» изменено на «Дополнительно».

Изменения технологического процесса тестового сервера

Улучшения технологического процесса сервера тестирования в этом выпуске направлены на упрощение редактирования документов с серверным кодом в режиме интерактивного просмотра.

Изменения в настройках сервера

В отличие от предыдущих версий Dreamweaver, теперь вы можете назначить конкретный сервер либо тестовым сервером, либо удаленным сервером. Оба варианта одновременно невозможны. Чтобы точнее задавать характеристики серверов, флажки в интерфейсе настройки сервера заменены переключателями.

Если открыть сайт или параметры импорта для сайта, созданного в предыдущих версиях Dreamweaver, для которого один сервер задан одновременно как сервер тестирования и удаленный сервер, создается дубликат сервера. Затем один из них отмечается как удаленный сервер (добавляется суффикс _remote), а другой — как тестовый сервер (добавляется суффикс _testing).

Автоматическая передача динамических файлов

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

Дополнительные сведения см. в разделе Автоматическая передача динамических файлов.

Изменения в технологическом процессе Business Catalyst

Поддержка расширения Business Catalyst прекращена. Оно не будет включено в версии Dreamweaver CC 2015 и более поздних. Dreamweaver CC 2014.1.1 — последняя версия, совместимая с расширением Business Catalyst.

Для использования Business Catalyst в версии Dreamweaver CC 2015 и более поздней пользуйтесь возможностью подключения SFTP в Dreamweaver. Дополнительные сведения см. в разделе Документация по Business Catalyst.

Официальное объявление об этом находится на сайте Business Catalyst. 

Другие изменения

• Панель вставки переупорядочена, все параметры из категорий «Общие», «Макет» и «Мультимедиа» перенесены в более понятную категорию — HTML.

• Небольшие обучающие видеоролики и ссылка для их запуска удалены из меню «Справка». Эта возможность недоступна также и для языков, отличных от английского.

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