Новые возможности

  • Просмотр на устройстве
  • Визуальные медиазапросы
  • Поддержка анализа linting
  • Поддержка Emmet
  • Препроцессоры CSS
  • Просмотр в представлении кода
  • Новые фрагменты кода
  • Интеграция Bootstrap
  • Начальные шаблоны Bootstrap
  • Новые меню в режиме интерактивного просмотра
  • Поддержка таблиц в режиме интерактивного просмотра
  • Специальная вставка в режиме интерактивного просмотра
  • Поддержка элементов пользовательского интерфейса jQuery в режиме интерактивного просмотра
  • Новая панель «Навигатор»
  • Подсказки для кода SVG в HTML-документах

Изменения

  • Свертывание кода
  • Улучшения в конструкторе CSS
  • Тестовый сервер — улучшения технологического процесса
  • Панель «Поведение» в режиме интерактивного просмотра
  • Реорганизация меню «Вставка»

Просмотр на устройстве

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

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

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

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

Поддержка Emmet

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

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

Препроцессоры CSS

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

Просмотр изображений

Dreamweaver теперь позволяет просматривать изображения в представлении кода. Для этого достаточно навести указатель мыши на URL-адрес изображения.

Просматривать можно и удаленные пути изображений типа <img src = "https://a2.behance.net/img/profile/no-image-138.jpg?cb=1816124956" />.

Если Dreamweaver не может отобразить удаленное изображение, появится сообщение «Не удается загрузить изображение».

Предварительный просмотр доступен для следующих типов изображений:

JPEG
JPG
PNG
GIF
BMP
SVG

Изображения показываются при наведении указателя мыши на URL-адреса в следующих случаях.

 

  • url();
  • data-uri()
  • Значение атрибута SRC тега IMG

Предварительный просмотр цветов

Усовершенствованы возможности предварительного просмотра ресурсов в представлении кода. Dreamweaver теперь позволяет просматривать цвета в представлении кода. Для этого достаточно навести указатель мыши на значения цветов. Ниже приведены поддерживаемые форматы.

3- и 6-значные шестнадцатеричные значения цветов: #ff0000;
RGB: rgb(0, 0, 0);
RGBA: rgba(0, 255, 228, 0.5);
HSL: hsl(120, 100%, 50%);
HSLA: hsla(120, 60%, 70%, 0.3);
предварительно заданные названия цветов: Olive, Teal, Red и т. п.

Примечание.

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

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

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

  • Boostrap_Snippets
  • CSS_Animation_And_Transitions
  • CSS_Effects
  • CSS_Snippets
  • HTML_Snippets
  • Фрагменты кода JavaScript (обновлено)
  • PHP_Snippets
  • Preprocessor_Snippets
  • Responsive_Design_Snippets

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

Интеграция Bootstrap

Теперь вы можете открывать в Dreamweaver веб-сайты, созданные с помощью платформы Bootstrap (версии 3 и выше), и редактировать страницы, используя код или визуальные возможности разработки. Dreamweaver распознает связанные CSS-файлы, если их имена содержат слово «bootstrap». 

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

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

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

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

  • Bootstrap-eCommerce
  • Bootstrap-One PageBootstrap-Portfolio
  • Bootstrap-The Agency
  • Bootstrap-The Grid

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

В файлах HTML, CSS, LESS, SASS, SCSS, JS, PHP, XML и SVG теперь поддерживается свертывание кода на основе блоков тегов. При наведении указателя мыши на столбец номеров строк в представлении кода рядом с номерами строк появляется маленький треугольник. Щелкнув на него, вы можете сворачивать и разворачивать блоки кода. Эта новая функция заменяет существующую функцию, основанную на выборе.

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

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

Свертывание кода в HTML-файлах

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

Количество символов, отображаемых в свернутом блоке, увеличилось. Это позволяет просматривать в свернутом блоке тегов исходные атрибуты (при наличии). Например, если у свернутого тега Div есть атрибуты id и class, свернутый блок будет выглядеть следующим образом.

Чтобы просмотреть код в свернутом блоке в Windows, достаточно навести на него указатель мыши. Свернутый блок автоматически расширяется, когда на него переводится фокус через селектор тегов, а также через функции «Найти и заменить», «Перейти к строке», «Быстрый просмотр элемента», «Интерактивный просмотр» или «Отменить»/«Вернуть». Когда фокус перемещается за пределы блока кода, он автоматически сворачивается.

Свертывание кода в файлах CSS, LESS, SASS, SCSS и JS

Теперь в файлах CSS, Less, Sass, SCSS и JS можно свернуть блоки кода, заключенные в фигурные скобки.

Наведите указатель мыши на любую строку в области кода, которая содержит открывающие фигурные скобки «{».

Если щелкнуть значок свертывания, содержимое между соответствующей парой фигурных будет свернуто и показано как «{...}».

Свертывание кода в файлах PHP

Помимо блоков кода PHP, в PHP-файлах можно свернуть HTML-элементы и блоки кода CSS и JS.

Можно свернуть любой блок PHP, начинающийся с «<?php» и заканчивающийся знаками «?>».

Наведите указатель мыши на любую строку, содержащую «<?php», в области кода и щелкните значок свертывания, чтобы свернуть соответствующий блок.

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

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