Новый выпуск Dreamweaver CC 2014 содержит несколько улучшений режима интерактивного просмотра и конструктора CSS, которые облегчают создание и обновление веб- и мобильного содержимого. Новая возможность «Быстрый просмотр элемента» позволяет быстро просматривать, редактировать и переключать элементы разметки HTML.

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

Быстрый просмотр элемента

Просмотрите разметку в документе с помощью новой функции «Быстрый просмотр элемента», которая представляет интерактивные дерево HTML для статического и динамического содержимого. Измените структуру статического содержимого непосредственно в дереве HTML. 

Быстрый просмотр элемента
Быстрый просмотр элемента

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

Дополнительные сведения см. в разделе Быстрый просмотр элемента.

Новые возможности редактирования в интерактивном просмотре

Проверяйте и изменяйте свойства элементов HTML непосредственно в режиме интерактивного просмотра и смотрите, как они отображаются, ничего не обновляя.  

Быстрый инспектор свойств

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

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

Инспектор свойств интерактивного просмотра для форматирования текста
Быстрый инспектор свойств для форматирования текста


Дополнительные сведения см. в статье Быстрый инспектор свойств интерактивного просмотра.

Отображение элемента

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

Отображение элемента для редактирования классов и идентификаторов
Отображение элемента для редактирования классов и идентификаторов

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

Интерактивное редактирование текста

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

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

Редактирование текста непосредственно в режиме интерактивного просмотра. Интерактивное редактирование текста.
Редактирование текста непосредственно в режиме интерактивного просмотра

Инспектор свойств интерактивного просмотра

Инспектор свойств теперь доступен в интерактивном просмотре, позволяя быстро вносить изменения на странице без переключения в представление конструктора или представление кода.

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

Инспектор свойств интерактивного просмотра
Инспектор свойств интерактивного просмотра

Интерактивная вставка

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

Перетаскивание в интерактивный просмотр с панели «Вставка»
Перетаскивание в интерактивный просмотр с панели «Вставка»

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

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

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

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

Свойства элемента управления рамками в выпуске Dreamweaver CC 2014
Свойства элемента управления рамками в выпуске Dreamweaver CC 2014


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

Копирование и вставка стилей

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

Щелкните селектор правой кнопкой мыши и выберите один из доступных параметров.  

Копирование стилей с помощью конструктора CSS
Копирование стилей с помощью конструктора CSS

  • Если в селекторе отсутствуют стили, элементы «Копировать стили» и «Копировать все стили» будут неактивны.
  • Элемент «Вставить стили» неактивен при работе с удаленными сайтами, которые нельзя редактировать. Однако функции «Копировать стили» и «Копировать все стили» будут доступны.
  • Вставка стилей, которые частично существуют в селекторе (наложение), возможна. В таком случае вставляется объединение всех селекторов.
  • Копирование и вставка стилей также возможны для различных связок файлов CSS: импортированных, связанных, встроенных стилей.

Текстовые поля быстрого редактирования

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

Текстовые поля быстрого редактирования
Текстовые поля быстрого редактирования

Задание свойств
Задание свойств


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

В более ранних версиях вы нажимали «+» на панели конструктора CSS «Свойства» для добавления «других» (или пользовательских) свойств. Теперь ряд текстовых полей — имя и значение свойства — доступны в конце списка «Свойства». Эти текстовые поля позволяют непосредственно вводить имя свойства и его значение без нажатия «+».

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

Имя «другой» группы свойств изменяется на «Пользовательские».

Текстовые поля для добавления имени свойства и значения
Текстовые поля для добавления имени свойства и значения

Сочетания клавиш

Теперь можно добавлять или удалять селекторы CSS и свойства с помощью комбинаций клавиш. Можно также переключаться между группами свойств на панели «Свойства».  

Сочетание клавиш Рабочий процесс
CTRL + Alt +[Shift =] Добавляет селектор (если элемент управления находится в области селектора)
CTRL + Alt+ S Добавляет селектор (если элемент управления находится в приложении)
CTRL + Alt +[Shift =] Добавляет свойство (если элемент управления находится в области свойства)
CTRL + Alt+ P Добавляет свойство (если элемент управления находится в приложении)
Select + Delete Удаляет селектор, если селектор выбран
CTRL + Alt + (PgUp/PgDn) Выполняет переход между разделами во вложенной панели свойств 

Более точные / менее точные селекторы

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

Более точные/менее точные селекторы
Более точные/менее точные селекторы

Прокрутка к категории

Ранее при нажатии категорий «Фон» или «Другие» в верхней части панели конструктора CSS «Свойства» эти категории становились «видимыми» на панели. Категории на самом деле не были отображены в верхней части панели.

Теперь при нажатии категорий «Фон» и «Другие» (переименованы в «Пользовательские») они отображаются вверху панели.

Прокрутка к категории
Прокрутка к категории

Поддержка подключения SFTP с помощью файла идентичности

Выпуск Dreamweaver CC 2014 позволяет подключаться к серверам для публикации по протоколу SFTP с помощью пар открытых и закрытых ключей, а также ключей идентификации (с парольной фразой или без нее). Данное усовершенствование Dreamweaver расширяет выбор поставщиков услуг веб-хостинга, позволяя пользоваться услугами любого поставщика, требующего использования пар открытых и закрытых ключей для аутентификации.

Примечание.

Dreamweaver поддерживает только файлы закрытого ключа OpenSSH.

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

Улучшения действий «Отменить» и «Повторить»

Раньше, чтобы отменить/повторить операцию, выполненную на панели конструктора CSS, необходимо было щелкнуть файл CSS (в связанных файлах), а затем отменить/повторить операцию. 

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

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

Все действия отмены и повтора записываются на уровне файла HTML. Это означает, что любые ручные изменения в файле CSS можно отменить из ЛЮБОГО связанного файла. Например, представьте, что style1.css и style2.css связаны с index.html. Если добавить стили для .h1 в style1.css, а затем выполнить отмену из style2.css, стиль .h1 будет удален из style1.css.  

Примечание.

Чтобы отменить/повторить изменения в файлах JavaScript, переключитесь на соответствующий файл JS, а затем выполните отмену/повтор. 

Изменения в процессах Business Catalyst и PhoneGap Build

Business Catalyst и PhoneGap Build теперь предоставляются в виде подключаемых модулей для Dreamweaver. Теперь установите Business Catalyst и PhoneGap Build как расширения, после чего этими службами можно пользоваться таким же образом, как это было раньше.

Для установки расширений Business Catalyst и PhoneGap Build перейдите в меню «Управление» > «Обзор подключаемых модулей», после чего найдите и установите эти расширения.

Изменения в доступе к расширениям для Dreamweaver

Теперь расширения Dreamweaver можно просматривать и устанавливать с помощью Adobe Creative Cloud. Расширения теперь называются «подключаемыми модулями».

Для поиска подключаемых модулей в Adobe Creative Cloud щелкните «Окно» > «Обзор подключаемых модулей» в Dreamweaver. Появится страница подключаемых модулей Adobe Creative Cloud. 

«Окно» > «Расширения» в Dreamweaver CC 13.0
«Окно» > «Расширения» в Dreamweaver CC 13.0

«Окно» > «Обзор подключаемых модулей» в Dreamweaver CC 2014
«Окно» > «Обзор подключаемых модулей» в выпуске Dreamweaver CC 2014 г


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

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

Функция синхронизации настроек в Dreamweaver позволяет синхронизировать настройки в экземплярах Dreamweaver на ваших компьютерах и в Creative Cloud. Dreamweaver CC 2014 автоматически определяет, была ли синхронизация настроек включена в предыдущей версии Dreamweaver, и позволяет импортировать эти настройки из Creative Cloud.

При первом запуске выпуска Dreamweaver CC 2014 после установки появляется следующее диалоговое окно. 

Импорт параметров синхронизации
Импорт параметров синхронизации

  • Для импорта настроек, которые хранятся в Creative Cloud, нажмите кнопку Импорт параметров синхронизации

Примечание. Впоследствии этот параметр становится недоступным. 

  • Для синхронизации настроек в текущем экземпляре Dreamweaver с Creative Cloud нажмите кнопку Синхр. локальные.
  • Для автоматической синхронизации настроек установите флажок Всегда синхронизировать настройки автоматически.
  • Для просмотра дополнительных параметров синхронизации нажмите кнопку Дополнительно.

Отправка запроса о проблеме/функции непосредственно из Dreamweaver

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

Отправка запроса о проблеме/функции в меню «Справка»
Отправка запроса о проблеме/функции в меню «Справка»

Help Center

Узнайте, как использовать новые возможности и как решать общие задачи в Dreamweaver в новом справочном центре Help Center

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

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

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

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

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

Тур по новым возможностям
Тур по новым возможностям

В обзоре новых возможностей отображается следующее.

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

Видеогалерея

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

Видеогалерея
Видеогалерея

Примечание.

Открыть обзор новых возможностей и видеогалерею можно в любое время при работе с Dreamweaver.
Для этого перейдите в меню «Справка» или на экран приветствия и щелкните необходимый параметр.

Сообщения внутри приложения

Теперь Dreamweaver предлагает вам полезные подсказки, когда вы работаете
над проектами. Эти подсказки помогут вам выполнить текущее задание
более эффективным способом.

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

«Быстрый просмотр элемента» — это абсолютно новая функция, которая позволяет просматривать и редактировать разметку HTML намного проще, чем другие использованные методы (триггеры).

Если вы последовали предложенному совету, подсказка внутри приложения для такого же триггера больше не появится.
Но подсказка будет отображаться для других определенных триггеров.

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

Примеры сообщений внутри приложения: 

Быстрый просмотр элемента

Триггеры:

  • Открытие селекторов тегов (все представления)
  • «Интеракт.» + «Проверка» или щелчок правой кнопкой мыши + «Проверка» на элементе

Сообщение:

Сообщение «Быстрый просмотр элемента»
Сообщение «Быстрый просмотр элемента»

Инспектор свойств интерактивного просмотра для классов и идентификаторов 

Триггеры:

  • Редактирование идентификаторов с помощью инспектора свойств в представлении «Дизайн»

Сообщение:

Сообщение в режиме интерактивного просмотра
Сообщение в режиме интерактивного просмотра

Сообщения в продукте

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

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

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


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

Примечание.

Для повторного просмотра сообщений можно сбросить параметр справки внутри приложения в настройках.
Дополнительные сведения см. в статье Отключение или восстановление сообщений внутри приложения и в продукте

Примеры сообщений в продукте: 

Edge Animate

Триггер:

  • Щелкните переход CSS, а затем щелкните «+»

Сообщение:

Сообщение Edge Animate
Сообщение Edge Animate

Парфе

Триггер:

  • Вставка изображения > Изменить параметры изображения

Сообщение:

Изменить параметры изображения
Изменить параметры изображения

Отключение или восстановление сообщений внутри приложения и в продукте

Перейдите к диалоговому окну «Настройки» > «Специальные возможности» и выполните следующие действия.

  • Чтобы отключить сообщения, снимите флажок «Показать справку внутри приложения».

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

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

Изменения в меню «Справка»

Меню «Справка» реорганизовано для предоставления быстрого доступа к обзору новых возможностей, видеогалерее, справочным и обучающим ресурсам и форме отправки запроса о проблеме/функции.

Меню «Справка» до Dreamweaver CC 2014
Меню «Справка» до выпуска Dreamweaver CC 2014

Меню «Справка» в Dreamweaver CC 2014
Меню «Справка» в выпуске Dreamweaver CC 2014


Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет