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

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

Adobe Dreamweaver CC 2014.1.1 (февраль 2015 г.)

Новый экран приветствия

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

В последнем обновлении для выпуска Dreamweaver CC 2014 была добавлена возможность быстрого доступа к видео (включая новые возможности), практическим руководствам, советам и приемам и многим другим материалам на экране приветствия.

Экран приветствия
Экран приветствия

Примечание.

Новый экран приветствия доступен только на английском языке. Для других языков отображаются экран приветствия и руководство по новым возможностям в Dreamweaver CC 2014.1.

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

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

Панель Extract
Панель Extract

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

Элементы для перетаскивания

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

Выделение области

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

Примечание.

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

Улучшения отображения элементов

В представлении отображения элементов теперь показывается текст подсказки «Класс/ID», что четко указывает на то, что можно задать класс или идентификатор.

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

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

В представления кода добавлено 10 новых цветовых тем:

  • RecognEyes
  • Havenjark
  • Solarized Dark
  • Solarized Light
  • Wombat
  • Monaki
  • Schuss
  • Tango
  • Cool Light
  • Roboticket

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

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

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

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

Ниже перечислены изменения в пользовательском интерфейсе.

  • Панель конструктора CSS прокручивается при добавлении свойства: при нажатии кнопки «+» в разделе «Свойства» панель прокручивается, чтобы строка «Добавить свойство» была расположена почти в центре панели «Свойства». Если раздел «Свойства» слишком мал, панель прокручивается, чтобы строка «Добавить свойство» была показана в нижней части раздела.
  • Выделение фона: когда фокус установлен на текстовом поле «Добавить новое свойство», фон строки выделяется серым цветом. 
  • Положение кнопок «+» и «-»: положения кнопок «+» и «-», отображаемых в каждом разделе на панели конструктора CSS («Источник», «Селекторы», «Мультимедийный запрос» и «Свойства»), теперь перемещены влево из правого края, чтобы сделать их более видимыми.
  • Теперь категория «Пользовательские» называется «Дополнительно».

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

Теперь можно выполнять удаленную отладку документов Dreamweaver, открытых в режиме интерактивного просмотра, с помощью Google Chrome DevTools. В Google Chrome можно использовать порт 5471, который можно активировать, выполнив следующие действия.

  1. Запустите Dreamweaver, выполнив следующую команду.

    • Windows: <installation_path> -enableRemoteDebugging
    • Mac: open <installation_path> --args -enableRemoteDebugging

    Примечание. Нужно ввести два дефиса перед args.

  2. Появится диалоговое окно, сообщающее, что порт 5471 был активирован для отладки. Нажмите кнопку «ОК».

    Будет запущен Dreamweaver.

    Нажмите кнопку «ОК» в диалоговом окне, чтобы запустить Dreamweaver
    Нажмите кнопку «ОК» в диалоговом окне, чтобы запустить Dreamweaver

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

  4. Чтобы начать отладку, откройте Google Chrome и перейдите на localhost:5471. Будет отображен список ссылок на все открытые документы в Dreamweaver. 

    Примечание. Поскольку в новом экране «Приветствие» и панели Extract используется инфраструктура CEF (Chromium Embedded Framework), также будут отображены записи, относящиеся к этим функциям.

    Теперь можно использовать Google Chrome DevTools для отладки необходимых документов.

  5. Чтобы остановить отладку и открыть Dreamweaver в обычном режиме, выйдите из Dreamweaver и запустите его снова.

Другие усовершенствования

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

Теперь при сбросе параметров с помощью сочетаний клавиш Dreamweaver создает резервную копию настроек в папке Adobe Dreamweaver CC 2014.1 Backups. Она автоматически создается в той же папке, что и исходная папка настроек Dreamweaver на Windows и Mac.

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

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

Изменения в режиме просмотра динамических документов

По умолчанию динамические документы, такие как PHP, CFM и ASP, больше не открываются в представлении кода. Они открываются в том же режиме («Код»/«Интерактивный»/«Разделение»), что и последний закрытый документ или последний документ, который был в фокусе.

Adobe Dreamweaver CC 2014.1 (октябрь 2014 г.)

Extract в Dreamweaver

Интеграция Extract в Dreamweaver позволяет веб-дизайнерам и разработчикам применять информацию о дизайне и извлекать оптимизированные для Интернета ресурсы непосредственно в среду написания кода. Extract предоставляет комплексное и автономное решение для извлечения информации о стилях и ресурсах из файлов PSD, что снижает необходимость постоянного переключения между Photoshop и Dreamweaver.

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

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

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

Рабочая среда по умолчанию панели Extract
Панель Extract

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

64-разрядная архитектура

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

Операционная система Место установки по умолчанию Папка с настройками приложения
32-разрядная версия Windows C:\Program Files\Adobe\Adobe Dreamweaver CC 2014.1 %appdata%/Adobe/Adobe Dreamweaver CC 2014.1
64-разрядная версия Windows C:\Program Files\Adobe\Adobe Dreamweaver CC 2014.1 %appdata%/Adobe/Adobe Dreamweaver CC 2014.1
64-разрядная версия Mac /Applications/Adobe Dreamweaver CC 2014.1 ~/Library/Application Support/Adobe/Adobe Dreamweaver CC 2014.1

Часто задаваемые вопросы

  • Запустится ли 64-разрядная версия приложения в 32-разрядной версии Windows? Нет.
  • Можно ли установить одновременно 32- и 64-разрядную версии приложения на компьютере с ОС Windows? Нет.
  • Как можно проверить, работает ли моя система с 32- или 64-разрядной версией Dreamweaver?
    • Windows: запустите Dreamweaver. Откройте диспетчер задач и найдите процесс Dreamweaver. Если запущена 64-разрядная сборка Dreamweaver, имя процесса будет отображаться как «Dreamweaver.exe». Если запущена 32-разрядная сборка, имя процесса будет отображаться как Dreamweaver.exe *32.
    • Mac: откройте монитор активности, перейдите в меню View > Columns > Kind. Найдите Dreamweaver в мониторе активности и просмотрите столбец Kind. Для 64-разрядной версии Dreamweaver в столбце Kind будет указано «64 bit».

Установка 64-разрядной версии Dreamweaver

  1. Убедитесь, что на вашем компьютере работает 64-разрядная операционная система.

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

  2. Загрузите 64-разрядную версию Dreamweaver из Creative Cloud и установите сборку.

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

Интерактивные направляющие

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

  • При перетаскивании из панели «Вставка».
  • При перетаскивании из панели «Ресурсы».
  • При перетаскивании (перемещении) элементов в пределах интерактивного просмотра.

Примечание.

Интерактивные направляющие не поддерживаются в документах с «резиновым» макетом.

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

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

  • Надпись «Слева и справа» появляется при наведении курсора на фрагмент со встроенными тегами (например, <a>, <span>) или тегами, для которых установлено свойство плавающего объекта.
Интерактивные направляющие справа и слева выделенного элемента
Интерактивные направляющие справа и слева выделенного элемента

Точная вставка структурного элемента

Можно использовать «Быстрый просмотр элемента» вместе с интерактивными направляющими для более точной вставки элемента HTML в структуру документа.  

При задержке курсора на некоторое время перед окончательным перемещением элемента появится значок «Быстрый просмотр элемента» (</>). Если навести курсор на этот значок, откроется панель быстрого просмотра элемента, после чего можно переместить элемент внутри быстрого просмотра элемента.

Значок «Быстрый просмотр элемента»
Значок «Быстрый просмотр элемента» помогает точно вставлять элементы

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

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

Примечание.

В представлении «Интерактивный просмотр» также можно использовать сочетания клавиш (например, Ctrl+X, Ctrl+C, Ctrl+V Ctrl+D и Delete в Windows).

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

Изменения в отображении элемента

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

Команды «Источник CSS» и «Медиазапрос» в представлении «Отображение элемента»
Команды «Источник CSS» и «Медиазапрос» в представлении «Отображение элемента»

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

Также можно щелкнуть селектор правой кнопкой мыши, чтобы перейти к необходимому участку кода (команда «Перейти к коду») или вставить все скопированные стили (команда «Вставить стили»).

Команды «Перейти к коду» и «Вставить стили» в представлении «Отображение элемента»
Команды «Перейти к коду» и «Вставить стили» в представлении «Отображение элемента»

Примечание.

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

Перемещение элементов в представлении «Интерактивный просмотр»

Dreamweaver теперь поддерживает перемещение элементов (на уровне тега) в интерактивном просмотре. Можно выбрать элемент в интерактивном просмотре и перетащить его в любое другое положение.

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

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

Примечание.

В режиме интерактивного просмотра можно перемещать только статические элементы. Теги динамического содержимого (например, PHP) нельзя перемещать.

При задержке курсора на некоторое время перед окончательным перемещением элемента появится значок «Быстрый просмотр элемента» (</>). Если навести курсор на этот значок, откроется панель быстрого просмотра элемента, после чего можно переместить элемент внутри быстрого просмотра элемента. 

Использование клавиатуры в интерактивном просмотре

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

  • Клавиши со стрелками вверх и вниз для перемещения по элементам страницы. Навигация с помощью клавиатуры в режиме интерактивного просмотра облегчает доступ к вложенным и внешним элементам.
  • Клавишу Tab для перемещения по селекторам в режиме отображения элемента.

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

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

Теперь при нажатии сочетания клавиш CTRL+T (Windows) или CMD+T (Mac) в интерактивном просмотре появляется быстрый редактор тегов для выделенного элемента. Быстрый редактор тегов имеет три состояния: изменение тега, заключение в тег и вставка HTML-кода. Можно переключаться между этими состояниями с помощью сочетания клавиш Ctrl/Cmd + T.

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

Изменения в рабочей среде Dreamweaver

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

Панель инструментов «Документ» изменена и упрощена.

  • Команды в представлениях «Дизайн» и «Интерактивный просмотр» теперь объединены в одно (раскрывающееся) меню.
Переключение между представлениями «Дизайн» и «Интерактивный просмотр» в Dreamweaver CC (октябрь 2014 г.)
Переключение между представлениями «Дизайн» и «Интерактивный просмотр» в последнем обновлении Dreamweaver CC (октябрь 2014 г.)

Кнопки «Дизайн» и «Интерактивный просмотр» на панели инструментов в предыдущих версиях
Кнопки «Дизайн» и «Интерактивный просмотр» на панели инструментов в предыдущих версиях

  • Поле с названием документа теперь перемещено в инспектор свойств.
Панель инструментов «Документ» в Dreamweaver CC (октябрь 2014 г.)
Панель инструментов «Документ» в последнем обновлении Dreamweaver CC (октябрь 2014 г.)

Заголовок на панели инструментов «Документ» в Dreamweaver CC перемещен в инспектор свойств (октябрь 2014 г.)
Поле с названием документа перемещено в инспектор свойств в последнем обновлении Dreamweaver CC (октябрь 2014 г.)

Поле с названием на панели инструментов «Документ» в предыдущих версиях
Поле с названием на панели инструментов «Документ» в предыдущих версиях

  • Кнопки «Проверка» и «Интерактивный код» заменены на значки.
Значки «Интерактивный код» и «Проверка» в Dreamweaver CC (октябрь 2014 г.)
Значки «Интерактивный код» и «Проверка» в последнем обновлении Dreamweaver CC (октябрь 2014 г.)

Кнопки «Интерактивный код» и «Проверка» в предыдущих версиях
Кнопки «Интерактивный код» и «Проверка» в предыдущих версиях

  • Команды «Назад», «Вперед» и «Обновить» объединены с адресной строкой и располагаются в центре панели инструментов «Документ».
Адресная строка с командами «Назад», «Вперед» и «Обновить» в Dreamweaver CC (октябрь 2014 г.)
Адресная строка с командами «Назад», «Вперед» и «Обновить» в последнем обновлении Dreamweaver CC (октябрь 2014 г.)

Адресная строка с командами «Назад», «Вперед» и «Обновить» в предыдущих версиях
Адресная строка с командами «Назад», «Вперед» и «Обновить» в предыдущих версиях

  • Значки «Просмотр/отладка в браузере», «Параметры интерактивного просмотра» и «Управление файлами» объединены и выровнены по правой стороне панели инструментов «Документ».
Значки «Просмотр/Отладка в браузере», «Параметры интерактивного просмотра» и «Управление файлами» в Dreamweaver CC (октябрь 2014 г.)
Значки «Просмотр/отладка в браузере», «Параметры интерактивного просмотра» и «Управление файлами» в последнем обновлении Dreamweaver CC (октябрь 2014 г.)

Значки «Просмотр/Отладка в браузере», «Параметры интерактивного просмотра» и «Управление файлами» в предыдущих версиях
Значки «Просмотр/Отладка в браузере», «Параметры интерактивного просмотра» и «Управление файлами» в предыдущих версиях

Изменения в рабочей среде по умолчанию

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

  • Код
  • Дизайн
  • Extract
Рабочие среды
Рабочие среды

Рабочей средой по умолчанию теперь является Extract. Эта рабочая среда отображает панель Extract в левой части и веб-страницу — в правой. При первом запуске Dreamweaver на панели Extract отобразится простое руководство, чтобы помочь вам освоиться в работе с Extract. Нажмите «Приступить к работе», чтобы начать использовать Extract.

Рабочая среда Extract
Рабочая среда Extract

Представление по умолчанию для документов HTML теперь разделено по горизонтали на представления «Интерактивный просмотр» и «Код». Динамические файлы (например, перечисленные ниже) открываются в полном представлении кода по умолчанию. При разделенном просмотре эти документы отображаются в представлениях «Дизайн» и «Код».

  • PHP
  • Шаблон PHP (Example.dwt.php)
  • ASP
  • Шаблон ASP (Example.dwt.asp)
  • JSP
  • Шаблон JSP (Example.dwt.jsp)
  • CFM
  • Шаблон CFM (Example.dwt.cfm)
Представление по умолчанию для документов HTML отображает представления «Интерактивный просмотр» и «Код».
Представление по умолчанию для документов HTML отображает представления «Интерактивный просмотр» и «Код»

Представление по умолчанию для динамических документов отображает полное представление кода
Представление по умолчанию для динамических документов отображает полное представление кода

Совет. Чтобы переключиться в представление «Дизайн», щелкните раскрывающийся список рядом с параметром «Интерактивный просмотр» и выберите пункт «Дизайн». Чтобы изменить горизонтальное разделение на вертикальное, установите флажок «Просмотр» > «Разделить по вертикали». Представление «Интерактивный просмотр/дизайн» теперь отображается слева. Чтобы отобразить представление «Интерактивный просмотр/дизайн» справа, снимите флажок «Вид» > «Интерактивный просмотр слева» или «Дизайн слева».

Теперь Dreamweaver запоминает тип представления «Интерактивный просмотр», выбранный для документа HTML, а затем применяет его ко всем документам HTML, открытым позднее. Например, сначала вы открыли документ HTML1. Документ отображается разделенным на представления «Код» и «Интерактивный просмотр». Предположим, что вы изменяете отображение этого документа на полный интерактивный просмотр. После этого следующий документ, который вы откроете (например, HTML2), отобразится в полном интерактивном просмотре.  

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

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

Новые возможности редактирования в интерактивном просмотре впервые появились в предыдущей версии Dreamweaver CC. В этом выпуске все эти функции редактирования в интерактивном просмотре теперь доступны и для документов с «резиновым» макетом. Редактирование в интерактивном просмотре ускоряет разработку адаптивных веб-страниц, поскольку пользователь может просматривать изменения непосредственно во время редактирования.

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

Теперь также можно визуализировать структуру HTML DOM документа с «резиновым» макетом в представлении Быстрый просмотр элемента

Примечание. Представление «Быстрый просмотр элементов» в «резиновых» макетах не позволяет копировать, вставлять, дублировать или изменять порядок элементов HTML.

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

Команды для «резинового» макета в предыдущих версиях
Команды для «резинового» макета в предыдущих версиях

Параметры плавающих границ сетки вместе с меню «Отображение элемента» в Dreamweaver CC (октябрь 2014 г.)
Команды для «резинового» макета вместе с представлением «Отображение элемента» в последнем обновлении Dreamweaver CC (октябрь 2014 г.)


Кроме того, документы с «резиновым» макетом теперь открываются непосредственно в интерактивном просмотре. Больше нельзя просматривать или редактировать документы с «резиновым» макетом в представлении «Дизайн».

Панель инструментов «Документ» в Dreamweaver CC (октябрь 2014 г.)
Панель инструментов «Документ» в последнем обновлении Dreamweaver CC (октябрь 2014 г.)

Панель инструментов «Документ» с «резиновым» макетом в предыдущих версиях
Панель инструментов «Документ» с «резиновым» макетом в предыдущих версиях

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

Изменения в использовании вставки

Диалоговое окно «Вставка» для документов с «резиновым» макетом теперь содержит «Мастер положения». «Мастер положения» позволяет расположить вставляемый элемент перед, после или вложить его внутри элемента, который находится в фокусе (в интерактивном просмотре). Дополнительные сведения о вставке элементов с «резиновым» макетом см. в разделе Вставка элементов «резинового» макета.

Изменение параметров управления скрытыми элементами

Команда «Управление скрытыми элементами» (значок с изображением глаза на панели инструментов «Документ») перемещена в контекстное меню документа с «резиновым» макетом.


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

Параметр «Управление скрытыми элементами» в контекстном меню в Dreamweaver CC (октябрь 2014 г.)
Команда «Управление скрытыми элементами» в контекстном меню в последнем обновлении Dreamweaver CC (октябрь 2014 г.)

Значок с изображением глаза для управления скрытыми элементами в предыдущих версиях
Значок с изображением глаза для управления скрытыми элементами в предыдущих версиях

Стандартные цветовые темы для представления «Код»

Теперь можно легко выбирать одну из доступных цветовых тем для представления «Код»:

  • Классическая тема (по умолчанию; как и в предыдущей версии Dreamweaver)
  • Ворон
  • Шифер
  • Бланш
  • Женева
Темы: Классическая, Ворон, Шифер, Бланш и Женева
Темы: Классическая, Ворон, Шифер, Бланш и Женева

Использование настроек цветов кода позволяет определить тему для представления «Код». Настроить тему можно путем выбора различных цветовых схем для заднего и переднего фона, а также скрытых символов.

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

Все пользовательские настройки в теме сохраняются при нажатии кнопки «Применить». Персонализированная тема доступна для использования в пределах Dreamweaver.

Примечание.

Чтобы сохранить индивидуально настроенные темы для кодов, синхронизируйте их между несколькими экземплярами Dreamweaver с помощью пункта «Синхронизировать настройки» в меню «Настройки». Дополнительную информацию см. в разделе Синхронизация настроек Dreamweaver с Creative Cloud.

Подробные сведения см. в разделе Установка цветовой темы для представления «Код».

Синхронизация интерактивного просмотра и представления «Код»

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

Просмотреть синхронизированное представление «Код» в интерактивном просмотре в действии можно для следующих ситуаций (когда фокус находится в представлении «Код»).

  • Операции с текстом: вырезание, копирование и вставка, удаление, отмена и повтор операции.
  • Перемещение элементов в быстром просмотре элемента, когда фокус находится в представлении «Код».
  • Печать в представлении кода.
  • Операции удаления, дублирования, копирования и вставки в режиме быстрого просмотра элемента (команды контекстного меню).
  • Операции в инспекторе свойств: изменение стиля текста (жирный или курсив), класса, идентификатора, формата, свойств страницы, а также применение шрифтов.
  • Добавление и удаление классов или идентификаторов с помощью подсказок по коду в представлении «Код».
  • Вставка элементов (тегов div, изображений, гиперссылок и структурных элементов) из панели «Вставка» в представлении «Код».
  • Добавление и редактирование стилей CSS в теге <style>. 
  • Редактирование кода в файлах CSS.

Примечание.

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

Интерактивный просмотр панели «Ресурсы»

Панель «Ресурсы» (Окна > Ресурсы) теперь доступна в интерактивном просмотре. С помощью панели «Ресурсы» можно легко управлять следующими задачами.

  • Перетаскивание и вставка ресурсов (изображений, URL-адресов, цветов или мультимедийных данных) из области просмотра или в представлении «Список» на панели «Ресурсы».

Примечание. Ресурсы можно перетащить из области просмотра только на компьютере Mac.

  • Копирование цветового значения и вставка его в любое текстовое поле в Dreamweaver (в свойства конструктора CSS, в представление «Код», палитру цветов или даже другое приложение, например Блокнот).

Примечание.

 

  • Категории «Сценарии», «Шаблоны» и «Библиотека» будут скрыты на панели «Ресурсы» в интерактивном просмотре, так как они больше соответствуют представлению «Код».
  • В этом выпуске Dreamweaver CC категории «Flash» и «Фильмы» объединены в одну категорию «Мультимедиа».
         

Панель ресурсов в режиме интерактивного просмотра
Панель ресурсов в режиме интерактивного просмотра

Панель «Ресурсы» в представлениях «Дизайн» и «Код»
Панель «Ресурсы» в представлениях «Дизайн» и «Код»


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

Новые начальные шаблоны

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

  • Страница со сведениями об авторе
  • Публикация блога
  • Электронная коммерция
  • Адрес электронной почты
  • Портфолио
Новые адаптированные начальные шаблоны
Новые адаптированные начальные шаблоны

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

Сброс настроек при запуске

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

Сброс настроек
Сброс настроек

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

  • (Win) Windows + Ctrl + Shift
  • (Mac) Cmd + Option + Shift

Примечание.

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

В Mac удерживайте клавиши Cmd + Option + Shift при запуске Dreamweaver (щелкните значок Dreamweaver на панели Dock).

В Windows выполните следующие шаги.

  1. Перейдите в папку установки, найдите файл Dreamweaver.exe и щелкните его.

  2. Удерживая нажатыми клавиши Windows + Ctrl + Shift, дважды щелкните файл Dreamweaver.exe.

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

Другие усовершенствования

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

Используя диалоговое окно «Настройки», теперь вы можете импортировать параметры вашей предыдущей версии Dreamweaver, которые были сохранены в Creative Cloud. Все локальные настройки заменяются настройками, импортированными из облака, и применяются во время следующего запуска Dreamweaver.

Импорт настроек из предыдущих версий Dreamweaver
Импорт настроек из предыдущих версий Dreamweaver

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

Изменения в конструкторе CSS

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

Изменения внешнего вида экрана приветствия

Параметр «Шаблоны сайта» на экране приветствия заменен на базовые шаблоны. Получить доступ к шаблонам сайта можно в диалоговом окне «Создать документ» (Файл > Создать).

Обновления версий jQuery

Dreamweaver теперь включает в себя следующие обновления библиотеки jQuery:

  • с jQuery 1.8.3 до jQuery 1.11.1
  • с jQuery UI 1.9.2 до jQuery UI 1.10.4

Начальные страницы jQuery были удалены. 

Обновление PhoneGap

Прямая интеграция Dreamweaver с PhoneGap Build для упаковки приложений не поддерживается в последнем обновлении к Dreamweaver CC 2014 (октябрь 2014 г.) или к более поздним выпускам.

Тем не менее можно получить прямой доступ к веб-службе PhoneGap Build и воспользоваться новейшими обновлениями функций для упаковки веб-приложений как встроенных мобильных приложений. Дополнительные сведения см. в разделе Использование PhoneGap Build с последним обновлением до выпуска Dreamweaver CC 2014.

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

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