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

Поддержка анализа 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», в области кода и щелкните значок свертывания, чтобы свернуть соответствующий блок.