Обзор функций | Dreamweaver CC | Выпуски 2015

Выпуски Adobe Dreamweaver CC 2015.1, 2015.2 и 2015.3 реализуют революционные возможности для проектирования и создания веб-сайтов. Обращаться к Creative Cloud Libraries и Adobe Stock теперь можно непосредственно из Dreamweaver, включая в проекты элементы и стили оформления из настольных и мобильных приложений Adobe, а также высококачественные изображения и видеоматериалы. Возможности совместной работы в Creative Cloud обеспечивают плавность взаимодействия между дизайнером и разработчиком в рамках технологического процесса.

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

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

Дополнительные сведения см. в разделе Компьютер не переходит в спящий режим при работающем Dreamweaver | Windows.

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

В следующих разделах можно больше узнать об усовершенствованиях панели DOM:

• Поддержка выбора нескольких элементов
• Редактирование тегов, классов и идентификаторов на панели DOM
• Вставка элементов на панели DOM
• Визуальная обратная связь для дочерних узлов

Теперь на панели DOM документа можно выбирать или редактировать одновременно несколько тегов (а также выполнять другие операции над ними).

• Чтобы выбрать теги, следующие подряд друг за другом, щелкните первый и последний из них на панели DOM, удерживая нажатой клавишу Shift.
• Чтобы выбрать несмежные теги, щелкните их на панели DOM, удерживая нажатой клавишу Ctrl.

При выборе нескольких элементов на панели DOM происходит следующее.

• Инспектор свойств и Конструктор CSS отключаются.
• Иерархия тегов в нижней части страницы очищается.
• Точка вставки в представление кода становится неактивной.

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

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

Чтобы удалить тег, щелкните правой кнопкой мыши тег на панели DOM и выберите «Удалить тег».

Теперь новые элементы можно вставлять на веб-страницу, используя панель DOM одним из следующих способов:

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

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

При вставке тегов с помощью панели DOM также вставляется текст по умолчанию (заполнитель) и необходимые атрибуты тегов.

• При вставке любого из следующих тегов и отправке изменений в представлениях «Дизайн», «Код» и «Интерактивный просмотр» вставляется текст по умолчанию:
  div, header, nav, aside, article, section, footer, h1-h6 и hgroup.
• При вставке тега table и отправке изменений вставляется таблица 3 х 3.
• При вставке тега embed или img и отправке изменений появляется диалоговое окно «Выбор файла» с предложением выбрать соответствующий файл.
• При вставке метатега и отправке изменений в представлении кода добавляется следующий код: <meta name="" content="">.
• При вставке тега figure и отправке изменений вставляется тег figure с вложенным тегом figcaption.
• При вставке тега ul или ol и отправке изменений вставляется тег ol/ul с вложенным тегом li.

При выборе узла на панели DOM его дочерние узлы отображаются светло-голубым цветом.

К выбранным дочерним узлам светло-голубое выделение не применяется.

Gatekeeper — это встроенная функция обнаружения вредоносного ПО в ОС Mac OS X 10.7 и более поздних версий. Эта функция проверяет наличие действительной цифровой подписи с идентификатором разработчика, прежде чем установить приложение на Mac. Однако Gatekeeper не обнаруживает и не блокирует приложения, которые загружаются динамически из других приложений, имеющих действительную подпись. У пользователей, получивших Dreamweaver из неавторизованных источников, этот недостаток Gatekeeper позволяет злоумышленникам загружать вредоносные подключаемые модули в установочном пакете Dreamweaver. 

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

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

Теперь в Dreamweaver поддерживается интеграция с CEF3 2357. Теперь интерактивный просмотр позволяет отображать переходы,
анимации и преобразования CSS3 3D.

Дополнительные сведения см. в разделе Интеграция с CEF.

При добавлении медиазапросов с помощью панели визуального медиазапроса стало можно выбрать единицу измерения (px, em и rem). Если указать значение в одних единицах, а затем изменить их, то значение будет автоматически пересчитано в выбранные единицы.

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

Диалоговые окна метки пользовательского интерфейса, оптимизации изображения и «Изм. размер на» теперь объединены в окно «Ресампл. на».

Кроме этого, при семплировании изображения с панели CC Libraries теперь будет отображаться значок-индикатор выполнения, пока изображение не будет полностью отсемплировано.

Дополнительные сведения см. в разделе Библиотеки Creative Cloud Libraries в Dreamweaver.

Если вы сохранили лицензированные изображения из Adobe Stock в своих библиотеках Creative Cloud Libraries, их можно извлечь на своих веб-страницах как файлы SVG, оптимизированные для Интернета. При перетаскивании изображений с панели CC Libraries на веб-страницу они будут вставляться как файлы SVG по умолчанию.

Если необходимо настроить свойства файлов SVG, сделать это можно, отредактировав файл options.json.

Дополнительные сведения см. в разделе Извлечение файлов SVG, оптимизированных для Интернета, из библиотек CC Libraries.

В этой сборке добавлены три новых шаблона электронных писем: «Почта — "резиновая"», «Почта — гибридная» и «Почта — адаптивная».

Для доступа к шаблонам перейдите в меню «Файл» > «Новый» > «Шаблоны для начинающих» > «Шаблоны писем».

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

• Удаление с помощью клавиш Delete и Backspace.
• Вырезание с помощью контекстного меню, меню «Правка» и сочетания клавиш.
• Копирование с помощью контекстного меню, меню «Правка» и сочетания клавиш.
• Вставка с помощью контекстного меню, меню «Правка» и сочетания клавиш.
• Копирование и замена других строк и столбцов с помощью функции контекстного меню «Заменить выделенные ячейки».

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

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

В этой версии Dreamweaver изменился экран приветствия.

Благодаря обновленной поддержке Creative Cloud Libraries вы сможете совместно работать с графическими объектами и цветовыми темами, созданными с помощью других инструментов дизайна, таких как Photoshop, Illustrator, или других мобильных приложений. Просматривайте, упорядочивайте и получайте доступ к творческим ресурсам, где бы и когда бы они вам ни понадобились. Теперь они доступны в проектах Dreamweaver. 

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

Новая панель CC Libraries в Dreamweaver позволяет просматривать ресурсы в библиотеках Creative Cloud и вставлять их на веб-страницы. Можно вставлять ресурсы в представлении интерактивного просмотра или в представлении кода с помощью подсказок кода.

Дополнительные сведения см. в разделе Библиотеки Creative Cloud Libraries в Dreamweaver.

Интеграция с Adobe Stock позволяет загружать бесплатные изображения, векторные графические объекты и видео напрямую в Creative Cloud Libraries, а также с легкостью управлять и повторно использовать ваше содержимое Adobe Stock непосредственно из Dreamweaver.

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

• Улучшения в Bootstrap
• Улучшения визуальных медиазапросов

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

Версия jQuery также была обновлена до 1.11.3.

Кроме функций «Добавить столбец/Добавить строку» для документов Bootstrap в режиме интерактивного просмотра Dreamweaver теперь позволяет дублировать строки и столбцы.

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

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

При создании и сохранении документа Bootstrap в определенном месте зависимые файлы также автоматически сохраняются в том же местоположении.

• Выделение значений текущей точки останова
• Улучшения технологического процесса добавления медиазапросов
• Улучшения в редактировании точек останова

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

При нажатии «+» на панели визуального медиазапроса Dreamweaver не предлагает выбрать значения max-width или min-width. Вместо этого сразу появляется всплывающее окно для добавления медиазапроса. 

Кроме этого, во всплывающем окне по умолчанию выбрано значения max-width. Появился раскрывающийся список, где можно выбрать значения min-width или min-max. 

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

После ввода новых значений (в пикселах) нажмите клавишу Enter/Return, чтобы принять изменения, либо клавишу Esc, чтобы отменить их.

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

• Поддержка нескольких монтажных областей
• Поддержка извлечения тени
• Советы по работе с неподдерживаемыми стилями слоев

Теперь в Dreamweaver можно открыть PSD с несколькими монтажными областями на панели Extract для извлечения ресурсов. Каждая монтажная область отображается в виде папки на панели слоев. Можно развернуть или свернуть папку, чтобы отобразить или скрыть ее содержимое.

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

Дважды щелкните «Подогнать» в заголовке панели, чтобы сделать масштаб монтажной области меньше и уместить PSD в текущем представлении.

При извлечении CSS из файла PSD, который имеет свойство тени, это свойство теперь извлекается как box-shadow в CSS.

В большинстве случаев при создании нескольких стилей слоев в файле PSD, которые работают независимо, они не могут работать совместно. При извлечении такие случаи проверяются и даются рекомендации по обработке таких стилей слоев.

Extract определяет следующие случаи:

• Случай 1. Несколько экземпляров любых свойств при преобразовании в цвета фона. Например, два наложения цвета или два наложения градиента, определенные в файле PSD.
• Случай 2. Наложение цвета с непрозрачностью менее 100 % помещается поверх наложения градиента, или же слою назначается цвет фона. В таком случае сложно определить цвет, получившийся в результате смешивания.
  
• Случай 3. Наложение градиента имеет непрозрачность менее 100 %, а слою был присвоен цвет фона. В таком случае также будет сложно определить цвет, получившийся в результате смешивания.
  

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

«Слой содержит несколько стилей слоев, которые не могут быть представлены в CSS. Используйте палитру цветов или извлеките слой как изображение».

Кроме этого, в тех случаях, когда полупрозрачный цвета фона накладывается на другой цвет фона (см. случаи 2 и 3 выше), значения для всех цветов фона отображаются в CSS. После этого можно извлечь необходимое значение.

• Улучшения в редактировании таблиц
• Быстрый инспектор свойств для текста
• Изменения в быстром инспекторе свойств изображений

Выделение строк или столбцов одним щелчком мыши

Теперь можно выделять строки и столбцы таблицы в режиме интерактивного просмотра одним щелчком мыши. Был добавлен новый значок со стрелкой (аналогичный уже существующему в представлении «Дизайн»). Щелкните его, чтобы выделить строку или столбец.

Выделение нескольких ячеек с помощью перетаскивания

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

Удаление строк или столбцов с помощью клавиши Delete

Теперь можно удалять строки или столбцы, выделив их и нажав клавишу Delete/Backspace.

Теперь можно использовать быстрый инспектор свойств для текста в режиме интерактивного просмотра. Это позволяет быстро отформатировать текст, а также создать для него отступы и гиперссылки. Быстрый инспектор свойств для текста отображается при щелчке по значку с тремя полосками для следующих текстовых элементов: h1–h6, pre и p.

• Параметр форматирования позволяет быстро заменить текущий тег элемента на один из следующих: h1-h6, p и pre. 
• Параметр «Ссылка» позволяет вставить гиперссылку в текстовый элемент. 
• Значки для полужирного и курсивного начертания позволяют добавить теги <strong> и <em> в текстовый элемент.
• Значки blockquote позволяют добавлять или удалять отступы для текста. При этом тег добавляется в код или удаляется из него, соответственно.
  

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

• Выравнивание. Выравнивает текстовые элементы Bootstrap по левому или правому краю, по центру или по ширине, применяя соответствующие классы.
• Преобразование. Изменяет регистр текста в элементе, применяя классы строчного регистра, прописного регистра или регистра предложения.

Быстрый инспектор свойств для изображений теперь содержит параметры для настройки изображений в документах Bootstrap.

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

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

Обновления, устанавливаемые через приложение, можно загрузить и установить автоматически или вручную. Можно также отключить обновления, устанавливаемые через приложение, а также удалить их и вернуть Dreamweaver в состояние, в котором он находился в последний раз после установки или обновления с помощью приложения Adobe Creative Cloud для ПК. В диалоговом окне настроек Dreamweaver можно указать режим обновления, отключить или отменить обновления, устанавливаемые через приложение.

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

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

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

Свертывание кода для выделенного блока кода теперь доступно снова. Теперь вы можете:

• свертывать код на уровне тегов, как в предыдущем выпуске Dreamweaver, и/или
• свертывать фрагмент кода, выделяя его.

Чтобы свернуть код, щелкните «-». Чтобы развернуть свернутый фрагмент кода, нажмите кнопку «+».

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

• Переупорядочение селекторов
  
• Панели в конструкторе CSS сохраняют пользовательские размеры
• Панель свойств недоступна для файлов Bootstrap
• Устаревшие API

Теперь можно переупорядочить селекторы на панели селекторов, перетаскивая их в нужное место на панели.

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

В файлах Bootstrap, где стили определяются в файлах Bootstrap CSS и доступны только для чтения, панель свойств в конструкторе CSS будет недоступна.

Отмена и повторное выполнение действий теперь могут быть ограничены только активными документами.

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

Если фокус находится в режиме интерактивного просмотра или в представлении «Дизайн», то отмена и повторное выполнение действий будут применены только для тех изменений, которые затронули код HTML. Предположим, вы редактируете страницу Bootstrap в режиме интерактивного просмотра. Вы изменяете некоторый текст, после чего меняете размер мультимедийного запроса на панели визуального медиазапроса. В этом случае можно отменить только изменение текста, а не изменение мультимедийного запроса, так как эти изменения были внесены в связанный файл, а не в HTML-файл. При этом можно перейти к связанному файлу CSS и отменить эти изменения.

Чтобы ограничить отмену и повторное выполнение действий текущим документом, выполните следующие действия:

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

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

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

В последнюю версию Dreamweaver были внесены изменения для использования новой службы проверки для HTML5 от WC: https://validator.w3.org/nu/. Прежняя служба проверки, доступная по адресу validator.w3.org, устарела.

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

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

Дополнительную информацию см. в разделе Проверка документов с помощью средства проверки.

На панели «Ресурсы» теперь перечислены все ресурсы SVG на сайте Dreamweaver, связанном с текущим активным документом. Как и с любыми другими ресурсами на панели «Ресурсы», с ресурсами SVG можно выполнять различные действия, например редактировать, назначать URL-адреса, а также повторно использовать в различных документах и сайтах.

Увеличение или уменьшение масштаба в режиме интерактивного просмотра и в представлении «Дизайн» с помощью следующих действий больше недоступно в Dreamweaver.

Windows:

• Удерживая нажатой клавишу Ctrl, используйте колесико мыши.
• Удерживая нажатой клавишу Ctrl, используйте прокрутку на трекпаде.

Mac:

• Удерживая нажатой клавишу Cmd, используйте колесико мыши.
• Удерживая нажатой клавишу Cmd, используйте прокрутку на трекпаде.

Другие способы увеличения или уменьшения масштаба документа не изменились: Cmd/Ctrl++ или Cmd/Ctrl+-, а также изменение масштаба через пункт меню «Просмотр» > «Масштаб».

Параметр «Код и интерактивный просмотр/код и представление дизайна» в меню «Просмотр» переименован в «Разделить» и работает так же, как и на панели инструментов «Документ».

Благодаря нескольким улучшениям производительности в функции синхронизации настроек теперь можно синхронизировать настройки между экземплярами Dreamweaver и Creative Cloud быстрее, чем когда-либо ранее.  

Старая панель «Стили CSS» удалена из Dreamweaver. В результате этого связанные с ней API также были удалены.

По-прежнему доступны следующие базовые API:

• dreamweaver.cssRuleTracker.newRule()

• dreamweaver.cssStylePalette.getStyles()

• dreamweaver.cssStylePalette.editStyleSheet()

• dreamweaver.cssStylePalette.attachStyleSheet()

• dreamweaver.cssStylePalette.getMediaType()

• dreamweaver.cssStylePalette.setMediaType()

• dreamweaver.cssStylePalette.getDisplayStyles()

• dreamweaver.cssStylePalette.setDisplayStyles()

• dreamweaver.cssStylePalette.newStyle()

Следующие API больше не поддерживаются:

• dreamweaver.cssRuleTracker.editSelectedRule()

• dreamweaver.cssRuleTracker.canEditSelectedRule()

• dreamweaver.cssStylePalette.getSelectedStyle()

• dreamweaver.cssStylePalette.editSelectedStyle()

• dreamweaver.cssStylePalette.editSelectedStyleInCodeview()

• dreamweaver.cssStylePalette.renameSelectedStyle()

• dreamweaver.cssStylePalette.applySelectedStyle()

• dreamweaver.cssStylePalette.duplicateSelectedStyle()

• dreamweaver.cssStylePalette.deleteSelectedStyle()

• dreamweaver.cssStylePalette.canEditSelectedStyle()

• dreamweaver.cssStylePalette.canEditSelectedStyleInCodeview()

• dreamweaver.cssStylePalette.canRenameSelectedStyle()

• dreamweaver.cssStylePalette.canDuplicateSelectedStyle()

• dreamweaver.cssStylePalette.canDeleteSelectedStyle()

• dreamweaver.cssStylePalette.canApplySelectedStyle()

• dreamweaver.canDisableSelectedStyle()

• dreamweaver.canEnableAllDisabled()

• dreamweaver.canDeleteAllDisabled()

• dreamweaver.getSelectedStyleIsDisabled()

• dreamweaver.setSelectedStyleIsDisabled()

• dreamweaver.enableAllDisabled()

• dreamweaver.deleteAllDisabled()