Введение

Добро пожаловать в документацию по Macaw. Разработка в процессе, и Macaw будет постоянно обновляться. Обратная связь приветствуется, так что, если вы хотели бы внести свой вклад, пожалуйста, найдите меня на GitHub.

Что такое Macaw

Macaw является профессиональным веб-дизайнерским инструментом, созданным для дизайнеров и разработчиков. Он был построен с целью изменить подход в веб-дизайне для Интернета. Нам больше не нужны статические результаты и написание кода с нуля, чтобы воплотить ожидания в жизнь. С Macaw, вы можете создать отзывчивый веб-дизайн, используя веб среду. Интерфейс похож на программное обеспечение для редактирования изображений, работает настолько же просто. Он также может похвастаться одним из самых умных движков для дизайна кода, когда-либо построенных, который анализирует ваш дизайн, делая его умным, сокращая код нажатием кнопки.

Чем Macaw не является

Macaw это не CMS. Он также не обрабатывает серверные технологии. Он был разработан для создания шаблонов, прототипирования и макетирования, и обеспечивает статичный HTML, CSS и JavaScript, необходимые для быстрого размещения ваших проектов в веб.

Рисование

Основной способ создания элементов в Macaw это рисование. Macaw позволяет рисовать многочисленные типы элементов, просто выбрав их и перетащив на холст.

Единицы измерения

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

Привязка

Вы можете включить или выключить привязку, выбрав  вид > вкл/выкл привязку

 (View > Toogle Snap)  или нажать Cmd+U (mac) или Ctrl+U (win). Когда включена привязка, ваш курсор будет привязываться к сетке, границам холста и другим элементам.

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

Когда перетаскиваете элемент, удерживайте Option (mac) или Alt (win) и переместите элемент на новое место.

Инструмент «Элемент (R)»

Элемент – это самый примитивный инструмент для рисования. Он создает пустые элементы без содержимого. Может быть полезен для быстрого прототипирования или начального моделирования. Тем не менее, рекомендуется, чтобы такие элементы в конечном итоге были преобразованы в контенеры. Вы можете преобразовать один пустой элемент в контейнер непосредственно с помощью Cmd+G (mac) или Ctrl+G (win) (такая же команда используется, чтобы сгруппировать несколько элементов).

Инструмент «Текст (T)»

Холст Macaw на самом деле является веб-браузером, и отображает текст так, как он будет выглядеть в интернете. Так же можно привязать популярные сервисы шрифтов, такие как Typekit.

Параграф и отдельный текст

Существует 2 вида текстовых элементов в Macaw: отдельный текст и параграф с текстом. Просто кликните по холсту с помощью инструмента «Текст», создав поле для отдельного текста, которое примет автоматическую ширину и будет вести себя как сточный (инлайновый) элемент. Параграф с текстом (абзац с текстом), для которого заданы размеры, ведет себя как блочный элемент, и может быть создан нажатием и перетаскиванием на холст инструмента «Текст».

Вы можете переключаться между двумя типами текстовых блоков, выбрав элемент с суффиксом в палитре размеров. Выбрав «Авто» будет установлен отдельный текстовый блок, выбрав «px» или «%», будет установлен параграф с текстом.

Размеры

При выборе текстового элемента, метки изменения размеров могут помочь вам определить его тип и свойства. Если боковые метки присутствуют, они указывают, что ширина установлена в «px» или «%». Отсутствие меток говорит о том, что ширина и высота заданы автоматически.

Вставка Lorem Ipsum

Macaw поддерживает генерацию Lorem Ipsum для быстрого заполнения текстовых элементов. Просто напишите loremXY и нажмите TAB . В этой команде, вместо Y должно быть написана буква «w» для слов, «S» для предложений, или «p» для параграфов. Вместо X должно быть целое число, указывающее количество вставленных Y. Например, lorem3p вставит 3 параграфа, lorem2s вставит 2 предложения.

Инструмент «Поле ввода (N)»

Текс, email, пароль, номер, поиск и URL, являющиеся полями ввода, могут быть вставлены инструментом «Поле ввода (N)». По умолчанию Macaw будет рисовать стандартное поле ввода. Чтобы изменить тип поля ввода, кликните и удерживайте значок «Поле ввода», чтобы появилось подменю. Вы можете изменить существующий тип поля ввода в выпадающем списке в инспекторе. Примечание: изменение типа поля ввода не сразу заметно в Macaw. Тем не менее, атрибуты выбранного типа будут уставлены в момент публикации.

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

Инструмент «Кнопка (B)»

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

Примечание: если вы используете кнопку для простой ссылки, вы можете преобразовать кнопку в тег «a» (якорь). Это можно сделать путем переименования элемента, клавиши Cmd+R (mac) или Ctrl+R (win), задав «a.button-name». Это может вызвать некоторые нежелательные изменения в стилях, но создаст более стандартную ссылку.

Инструмент «Многострочное поле ввода (Shift+N)»

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

Инструмент «Выпадающий список (Shift+N)»

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

Инструмент «Чекбокс» и «Радиокнопка» (Shift+N)

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

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

Инструмент «Вставка кода» (M)

Инструмент «Вставка кода» позволяет вставлять чистый HTML, плавающий фрейм (iFrame), Google карты, YouTube и Vimeo в ваши проекты. Вставленные элементы можно использовать, как и другие элементы. После того, как элемент выбран (или вы дважды кликнули на встраиваемый элемент), опции инструмента «Вставка кода» будут отображаться и позволят вам вставлять различные типы контента.

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

Позиционирование

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

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

Статическое

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

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

Статически расположенные элементы имеют синий контур.

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

Абсолютное

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

Элементы с абсолютным позиционированием выделены оранжевым контуром.

Фиксированное

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

Элементы с фиксированным позиционированием имеют зеленый контур.

Начало отсчета

Начало отсчета определяет направление, в котором располагается элемент. Опции переводят различные базовые свойства на основе режим позиционирования.

Для элементов со статическим позиционированием можно изменить начало отсчета по оси Х на начало отсчета слева, справа или по центру. Начало отсчета слава будет использовать внешний отступ слева для позиционирования элемента. Начало отсчета справа будет использовать внешний отступ справа для позиционирования элементов. Для начала отсчета по центру будет использовано значение «Auto» для внешнего отступа слева (margin-left) и внешнего отступа справа (margin-right).

Для элементов с абсолютным и фиксированным позиционированием есть точки отсчета для начала отсчета по оси Х и по оси Y. Начало отсчета слева и справа по оси Х будет опубликовано как свойство Left и Right. Начало отсчета по центру будет опубликовано как Left: 0; Right: 0; Margin-left: auto; Margin-right: auto; Начало отсчета по оси Y будет использовать свойства Top и Bottom, и при публикации будут заданы значения Top: 0; Bottom: 0; Margin-top: auto; Margin-bottom: auto;

Внешние отступы

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

Примечание: Верхнее позиционирование/внешние отступы могут быть установлены только в пикселях.

Внутренние отступы

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

Внутренние отступы устанавливаются внутри секции «Размеры» панели инспектора, и обозначаются интерактивными элементами, задающими отступы (все внутренние отступы, внутренние отступы сверху, внутренние отступы слева, внутренние отступы снизу, внутренние отступы справа). Значение поля рядом, показывает значение для выбранного отступа.

Чтобы изменить несколько внутренних отступов сразу, зажмите Shift и кликните по нужным отступам в панели инспектора.

Стили/Свойства

Macaw позволяет применять различные стили для ваших элементов, используя панель инспектора. Для установки стилей элемента, выберите его и выберите нужные стили в инспекторе. Некоторые стили могут применяться к нескольким элементам сразу. Удерживайте клавишу Shift для выбора нескольких элементов.

К некоторым элементам стили применяются по умолчанию.

• Элемент – элементы имеют серый цвет фона: rgb(222, 222, 222)

• Текст – шрифт установлен черным цветом, 16 px, Helvetica, 1.38 интерлиньяж, и вес шрифта 400. Интерфал между абзацами 1em.

• Кнопка – шрифт установлен черным цветом, 16 px, Helvetica, 1.38 интерлиньяж, и вес шрифта 400. Цвет фона задан: rgb(222, 222, 222), с радиусом скругления углов 3px.

• Поле ввода – шрифт задан: черный, 13px, Helvetica, 1.38 интерлиньяж, и вес шрифта 400. Фон светло серый: rgb(242, 242, 242), левый и правый внутренние отступы установлены в 10px.

• Многострочное поле ввода - шрифт задан: черный, 13px, Helvetica, 1.38 интерлиньяж, и вес шрифта 400. Фон светло серый: rgb(242, 242, 242), все внутренние отступы 5px, и граница 1px серого цвета: rgb(119, 119, 119).

• Выпадающий список - шрифт задан: черный, 13px, Helvetica, 1.38 интерлиньяж, и вес шрифта 400. Фон светло серый: rgb(242, 242, 242), левый внутренний отступ задан в 10px, граница 1px серого цвета: rgb(119, 119, 119). с радиусом скругления углов 3px. Кроме того, этот элемент имеет SVG фон (select-arrow.svg).

• Чекбокс и радиокнопка - шрифт задан: черный, 13px, Helvetica, 1.38 интерлиньяж, и вес шрифта 400.

Рамки и радиус скругления углов

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

Добавление/редактирование рамок (границ)

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

Пример элемента с границами со всех сторон.

Пример элемента с заданным стилем границ только для верхней и левой границы.

Пример элемента с различным стилем границ для верхней и левой границы.

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

Регулировка радиуса скругления углов

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

Задний фон

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

Фоновый цвет

Фоновый цвет может ыть установлен через поле «Цвет фона». Поддерживаются цвета в HEX, RGB, HSL. Вы также можете использовать ключевое слово «transparent» (прозрачный), которое будет задавать RGBA(0, 0, 0, 0), (тоже самое произойдет, если удалить значения). Macaw также поддерживает полупрозрачный цвет фона, который может быть задан через RGBA или HSLA.

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

Фоновые изображения и градиенты

Добавление

Чтобы добавить фон, нажмите «+» в палитре Фона и выберите тип фона, который вы хотите добавить.

Удаление

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

Порядок

Фоновая палитра позволяет установить порядок перетаскиванием, в этом порядке они будут появляться в своем элементе.

Редактирование

Чтобы отредактировать фон, дважды кликните на фоне, и укажите, что вы хотите отредактировать в инспекторе, или кликните правой кнопкой мыши и выберите «Изменить».

Переключение видимости

У фона может быть включена или отключена видимость, нажатием значка глаза. Если фоновое изображение выключено, оно не будет добавлено к элементу в Macaw и при публикации. Видимость может быть установлена снова.

Выбор фонового изображения

В диалоговом окне фонового изображения вы можете выбрать новое изображение для вставки. Используйте свое изображение или импортируйте его из библиотеки. Фоновое изображение можно масштабировать для Retina дисплеев с помощью кнопки «@2х».

Тени

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

Добавление

Чтобы добавит тень, нажмите кнопку «+» в палитре теней и выберите тень для добавления.

Удаление

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

Порядок

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

Редактирование

Для редактирования тени, дважды кликните на тень в инспекторе или кликните на тень правой кнопкой мыши и выберите «Изменить»

Переключение видимости

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

Ссылки

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

Рекомендуется, чтобы ссылки добавлялись только к тегу «а» с соответствующим атрибутом «HREF» при публикации. Тем не менее вы можете добавить ссылки для любого элемента. Macaw будет применять JavaScriptи событие onClick для обработки этих ссылок.

Ссылки на страницы

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

Ссылка на внешние страницы

Вы можете добавлять внешнюю ссылку к любому элементу, введя URL для связывания.

Отображение

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

Отображение может быть установлено с помощью кнопки переключения отображения в инспекторе или через слои в Плане. Есть три состояния видимости для всех элементов. Эти состояния:

Состояния отображения

Инспектор

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

План

Переключатель отображения в плане находится слева от слоя элемента и обозначается значком глаза или значком точки, если он не отображается. При нажатии на значок глаза, будет переключена видимость элемента между видимым и невидимым состоянием ("visible" and "invisible"). Cmd+Click (mac) или Ctrl+Click (win) переключит видимость между видимым состоянием и отсутствием состояния ("visible" and "none").

Состояния (псевдоклассы)

Macaw позволяет установить: активное (:active), при наведении (:hober), и фокусе (:focus) состояния для ваших элементов. Для всех визуальных стилей может быть установлено состояние, за исключением размеров и положения. Состояния могут быть установлены для контрольных точек.

Кнопки состояния

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

Доступные состояния (псевдоклассы)

Default – Состояние по умолчанию определяет, что элемент будет задан в стилях стандартным образом. Состояние по умолчанию приведет к отсутствию псевдокласса в опубликованном CSS.

Hover – Состояние при наведении определяет, как будет выглядеть элемент при наведении на него курсора мыши, когда курсор находится над элементом. Состояние при наведении добавит псевдокласс Hover в опубликованный CSS.

Active – Активное состояние определяет, как элемент будет выглядеть, когда его активировал пользователь. Например, когда пользователь нажмет на кнопку. Активное состояние добавит псевдокласс Active в опубликованный CSS.

Focus – Состояние фокуса определяет, как элемент будет выглядеть, когда получает фокус. Состояние фокуса добавит псевдокласс Focus в опубликованный CSS.

Состояния (продолжение)

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

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

Установка состояний для стилей

Чтобы установить специальные состояния для стилей в элементах, сделайте следующее:

1. Выберите элемент, который вы хотите изменить

2. Выберите нужное состояние (по умолчанию, при наведении, активное, в фокусе).

3. Стилизуйте его

Примечание: когда элемент выбран, Macaw будет оставаться в выбранном состоянии. Как только с элементы будет снят выбор, он переключится в состояние по умолчанию.

Очистка состояний стилей

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

Текст

Стили текста

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

Статистика

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

Редактирование расширенного текста

Macaw позволяет добавлять встроенные стили к тексту внутри текстовых элементов. Это делается путем применения стилей к тегу или узлу в вашем тексте. Каждый текстовый элемент может содержать собственные стили для каждого узла, которые будут глобально применяться ко всем узлам в пределах каждого текстового элемента. Расширенные текстовые стили также гибки и могут применяться для каждого состояния.

Примечание: В настоящее время Macaw позволяет создавать узлы только первого уровня.

Доступные метки/узлы

Macaw позволяет добавлять к тегам «span», «em» и «strong». Все теги были лишены стилей по умолчанию для обеспечения большей гибкости настройки.

Создание расширенных текстовых узлов

Вы можете сделать это, выполнив следующие действия:

1. Начните с перехода в режим редактирования вашего текста

2. Выделите текст, который вы хотите стилизовать

3. Используйте панель инспектора, выбрав справа тег, в который вы хотите обернуть ваше выделение.

4. Стилизуйте новый узел с помощью палитры справа.

Выбор узлов

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

Стилизация текстовых узлов

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

Общие стили

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

Пример

Установка стилей для тегов "Span" с текстом.

После изменения цвета и оформления для одного тега «span», все другие участки были обновлены.

Копирование расширенных стилей

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

Изменение узлов тегов

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

Удаление узла

Узлы могут быть удалены. Выберите сначала тег и нажмите «Нет тега (No tags)», расположенного в испекторе.

Шрифты

Macaw предоставляет список браузерных шрифтов и шрифты Google Web Fonts. Тем не менее вы можете добавить Typekit шрифты и даже добавить системные шрифты.

Каждый доступный шрифт в семействе шрифтов в раскрывающемся списке помечен соответствующей пиктограммой, отображающей тип шрифта. Типы шрифтов изображены на картинке ниже: Typekit, Google Fonts, системные и универсальные шрифты.

Typekit шрифты

Macaw позволяет добавлять Typekit шрифты в ваш проект. В настоящее время только один набор Typekit шрифтов может быть добавлен в проект одновременно.

Добавление Typekit шрифтов

Typekit шрифты могут быть добавлены. Для этого сделайте следующее:

1. Выберите комплект Typekit шрифтов, которые вы хотите добавить. Это делается на сайте Typekit.

2. В настройках набора для Typekit шрифтов выберите «локальный» для разрешенных доменов вашего компонента.

3. В Macaw откройте семейство шрифтов. Текстовый элемент нужно будет выбрать, чтобы сделать его видимым.

4. Нажмите кнопку «Добавить шрифты» в верхнем левом раскрывающемся списке.

5. В диалоговом окне введите новый ID для комплекта Typekit шрифтов.

6. Macaw даст зеленый знак, если шрифты были импортированы правильно, или красный «Х», если не удастся импортировать.

7. В случае успеха, Typekit шрифты будут перечислены в списке шрифтов.

Важно: Иногда это может занять некоторое время, чтобы Typekit шрифты добавились и синхронизировались с локальными в вашем комплекте. Если ваш комплект не может быть импортирован в Macaw, подождите несколько минут и попробуйте снова.

Публикация Typekit шрифтов

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

Системные шрифты

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

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

Изображения

Добавление изображений

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

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

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

Масштабирование изображений

Изображения по умолчанию всегда будет иметь высоту "Авто" и будут сохранять свои пропорции при преобразовании или изменении ширины. Чтобы изменить ширину и высоту изображений независимо см. "обрезка изображений" ниже.

Retina изображения

Macaw позволяет переключать изображения в разрешение для Ritina дисплеев с помощью нажатия одной кнопки. Любое изображение можно переключать с помощью кнопки «@2x» в палитре изображений.

Примечание: на Retina устройствах, изображения, используемые для фона, будут импортированы с «@2x» по умолчанию.

Создание оптимизированных изображений

Macaw дает доступной возможность создавать оптимизированные изображения. При публикации проекта, Macaw будет анализировать все изображения в вашем проекте и генерировать новые образы, основанные на их размерах. Он также будет генерировать «@2x» изображения для Retina устройств. Преимущество в том, что ваш готовый проект не будет содержать чрезмерно больших изображений. Вместо этого он будет создавать изображения ровно такие, какие нужно, чтобы ваш сайт загружался быстрее.

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

файл > параметры публикации (File > Publish Settings) или используйте сочетание клавиш Cmd+Shift+P (mac) или Ctrl+Shift+P (win).

Обрезка изображений

Macaw позволяет обрезать отдельные части изображений. Это позволяет динамически генерировать по-разному пропорции изображений из одного изображения внутри вашего проекта. Также изображения могут быть обрезаны для каждой контрольной точки.

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

Выполнение обрезки (кадрирования)

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

Примечание: изображения не могут быть изменены / масштабируемы, в меньшую сторону, чем есть. Для масштабирования изображения в режиме обрезки, вы должны сначала обрезать изображение.

Процесс обрезки

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

Отмена обрезки

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

Пример:

Изображение до обрезки

Включен режим обрезки

Изображение отмасштабировано и отрегулировано положение.

Обрезка изображения завершена

Восстановление изображения

Любые изображение, которые были масштабированы, переключены в Retina режим, или обрезаны, можно восстановить к первоначальному состоянию, с помощью кнопки «Сброс» (Reset) в палитре изображения. Этот сброс затронет только настройки изображения для текущей контрольной точки.

Отзывчивые изображения

По умолчанию изображения можно масштабировать и переключать в Retina режим на контрольных точках. Когда включена опция «Создавать оптимизированные изображения», изображение может быть обрезано для каждой контрольной точки. Все это обсуждалось в предыдущих разделах. Когда опция «Создавать оптимизированные изображения» включена, Macaw будет подключать файл "rimages.js" при публикации проекта и помещать его в папку JS. Эта библиотека обрабатывает изображения для Retina дисплеев и контрольных точек. Все настройки изображения применяются к тегу изображения с помощью атрибутов.

Холст

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

Прокрутка

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

Инструмент «Рука (H)»

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

Добавление контрольных точек

Вы можете нажать и перетащите маркер изменения размера на правой стороне холста, чтобы посмотреть ваши элементы при разных разрешения экрана. При перетаскивании всплывающая подсказка будет появляться над маркером, чтобы указать текущую ширину холста. Нажатие Cmd (mac) или Ctrl (win) при перетаскивании, позволит вставить контрольную точку на текущей ширине. Контрольные точки также могут быть добавлены с помощью кнопки "+" в палитре контрольных точек.

Изменение контрольных точек

Вы можете быстро перейти к размерам экрана, заданным контрольными точками, нажав соответствующую ссылку в палитре контрольных точек. Так же есть некоторые полезные сочетания клавиш: Cmd+[ (mac) или Ctrl+[ (win) для перемещения вниз по контрольным точкам. Cmd+] (mac) или Ctrl+] (win) для перемещения вверх по контрольным точкам. И Cmd+\ (mac) или Ctrl+\ (win) для переключения между текущей контрольной точкой и контрольной точкой по умолчанию.

Сетка

Сетка является неотъемлемой часть рабочего пространства и процесса создания дизайна в Macaw. Она помогает размещать элемента равномерно на странице и служит в качестве руководства на протяжении всего процесса проектирования. Палитра сетки позволяет установить сетку в соответствии с вашими предпочтениями. Примечание: Настройки сетки могут быть изменены в контрольных точках.

Ширина сетки

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

Колонки

Это общее количество столбцов в сетке. Ширина столбцов рассчитывается автоматически.

Расстояние между колонками сетки

Это пространство между колонками сетки. Оно всегда устанавливается в процентах.

Компоненты

Компоненты могут быть структурированы в группы элементов, которые потом могут быть повторно использованы на протяжении всего проекта. Они располагаются в библиотеке вашего проекта и могут быть вставлены на любую страницу сайта.

Создание компонентов

Чтобы создать компонент, выберите элементы, которые будут составлять компонент и использовать команду Элемент > Создать компонент (Element > Create Component) или Cmd+K (mac) или Ctrl+K (win). Вам будет предложено назвать новый компонент, после чего компонент будет доступен в вашей библиотеке. Вы можете создать новый экземпляр компонента, перетащив его из библиотеки на холст.

Примечание: введенное имя компонента используется только для справки в библиотеке. Оно не влияет на разметку в любом случае.

План (O)

Панель «План» очень похожа на панель «Слои» других инструментов. Она показывает все элементы на текущей странице, как эти элементы структурированы, и отображает Z-Index элемента в вашем документе. Элементы, которые отображаются выше в плане, будут располагаться поверх элементов, которые расположены ниже. План – это не просто визуальный инструмент. Он может использоваться для быстрого структурирования документа, выбора элементов, установки меток элементов/классов (переименования) и т.д.

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

Перемещение элементов

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

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

Развертывание/сворачивание контейнеров

Слои для элементов-контейнеров могут быть открыты/закрыты, чтобы отобразить/скрыть дочерние элементы для облегчения навигации. Щелкните значок со стрелкой, чтобы развернуть/свернуть слой.

Переключение Видимости Слоев

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

Блокировка слоев

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

Слои могут быть заблокированы/разблокированы, нажатием значка справа от значка видимость. Когда слои заблокированы будет отображен значок в виде замка. Когда слои будут разблокированы, икона будет в виде точки.

Переименование слоев

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

План – советы

Вот несколько клавиш/функций для использования плана.

Переименования Вкладок

При переименовании элементов вы можете быстро перемещаться и переименовать следующий элемент, используя клавишу Tab. Вы можете перейти к предыдущему элементу с помощью Shift+Tab. Это позволит вам быстро переименовать несколько элементов только при помощи клавиатуры.

Быстро Переместить Элементы Вперед/Назад

Вы можете быстро переместить элементы вперед и назад в плане используя меню

Правка > Переместить назад (Edit > Move Backwards), Cmd+[ (mac) или Ctrl+[ (win). При перемещении элемента, он будет перемещен в контейнеры. Любой неверный слой будет пропущен.

Вы также можете перемещать элементы на передний или задний план, используя команду меню Правка > Переместить назад  (Edit > Send to Back), Shift+cmd+[ (mac) или  Shift+Ctrl+[ (win) или Правка > Переместить вперед (Edit > Send to Front), Shift+Cmd+] (mac) или Shift+Ctrl+] (win).

Быстро прокрутка холста до элемента

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

Глобальные Стили

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

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

Когда проект имеет глобальные стили, все доступные стили будут перечислены в экспресс-стилях инструмента. Любые примененные стилей (предполагается, что элементы выбраны) будут в верхней части на темно-сером фоне. Все остальные стили будут перечислены ниже.

Создание глобального стиля

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

Создание глобального стиля из элемента

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

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

Удаление глобального стиля

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

Применение стилей к элементам

Чтобы добавить стиль к элементу, выберите элементы, для которых нужно добавить стиль и щелкните значок "+" слева от названия стиля в быстрых стилях.

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

Удаление стилей из элементов

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

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

Изменение Стилей

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

Все изменения стиля отразятся на всех элементах.

Синхронизация стилей с элементами

Иногда глобальный стиль и элемент может рассинхронизироваться. Это происходит, когда свойства стиля не соответствуют свойствам элемента "один к одному". Рассинхронизация стилей отображается в быстрых стилях словом "модифицированно" (modified), рядом с ними, когда у вас есть выбранные элементы.

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

Библиотека

В библиотеке содержатся все активы и компоненты Macaw проекта. Библиотеку можно открыть, нажав кнопку Библиотека (Library) в верхней правой части приложения.

Интерфейс библиотеки имеет область предварительного просмотра, которая будет отображать текущий выбранный элемент, кнопку импорта для импорта изображений (см. "образы" - раздел выше), панель поиска для быстрого нахождения элементов в вашем проекте и элементы списка. Список элементов разделяется на две группы. "Компоненты" и "проект". В "компонентах" папка содержит все компоненты, созданные в рамках проекта. "Проект" содержит все изображения, которые были импортированы в ваш проект.

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

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

Размещение элементов библиотеки на холсте

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

Удаление Элементов

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

Страницы

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

Меню страницы

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

Навигация по страницам

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

Добавление страниц

Чтобы добавить страницу, откройте меню страницы и нажмите на кнопку «новая страница». Вы можете также создать новую страницу, в меню Файл > новая страница (File > New Page) или вы можете использовать сочетание клавиш Cmd+N (mac) или Ctrl+N (win). приложение попросит вас ввести название новой страницы. Если название новой страницы имя не конфликтует с существующими названиями в вашем проекте, Macaw будет создаст новую страницу.

Настройка свойств страницы

Вы можете установить Заголовок страницы, используя "Заголовок страницы" (Page Title ) в палитре, которая видна, когда ни один элемент не выбран. Этот Заголовок будет вставлен в HTML при пуликации. Если нет заголовка страницы в этой палитре, то текущее название страницы будет использоваться при публикации.

Переименование страниц

Вы можете установить Заголовок страницы, используя "Заголовок страницы" (Page Title ) в палитре, которая видна, когда ни один элемент не выбран. Этот Заголовок будет вставлен в HTML при пуликации. Если нет заголовка страницы в этой палитре, то текущее название страницы будет использоваться при публикации.

Дублирование страниц

Любые страницы в вашем проекте могут быть продублированы, открыв меню страницы и выбрав значок дублирования, который виден при наведении курсора на страницу в списке страниц. Это позволит создать точную копию исходной страницы и всех ее данных. Имя дублируемой страницы будет как у исходной, нов конце будет дописано «copy».

Удаление страниц

Вы можете удалить страницу из проекта, открыв "меню страницы" и нажав на значок корзины, который виден при наведении курсора на страницу в списке страниц. При удалении страницы Macaw попросит вас подтвердить то, что вы хотите удалить выбранную страницу. Важно: это действие не может быть отменено.

Удаление страниц

Вы можете удалить страницу из проекта, открыв "меню страницы" и нажав на значок корзины, который виден при наведении курсора на страницу в списке страниц. При удалении страницы Macaw попросит вас подтвердить то, что вы хотите удалить выбранную страницу. Важно: это действие не может быть отменено.

Публикация

Вы можете опубликовать свой проект в Macaw в любое время, используя команду меню файл > опубликовать (File > Publish) или сочетание клавиш Cmd+P (mac) или Ctrl+P (win). При публикации Macaw сгенерирует необходимый HTML-код, CSS, изображения и файлы JavaScript для вашего проекта. Все это будет размещено в файлах в каталоге рядом с вашим .mcw файлом. Файлы, которые генерирует Macaw зависят от того, какие параметры публикации включены.

Важно: Macaw создаст новую папку с таким же именем, как ваш .mcw файл при публикации. Он поместит все опубликованные файлы в этот каталог. При каждой публикации все файлы перезаписываются, поэтому не размещайте важные файлы в этом каталоге.

Настройки публикации

Вы можете контролировать все параметры публикации, используя диалоговое окно "параметры публикации". Это диалоговое окно можно открыть, перейдя в меню файл > параметры публикации (File > Publish Settings) или с помощью сочетания клавиш Shift+Cmd+P (mac) или Shift+Ctrl+P (win).

Страницы

Раздел "страницы" диалогового окна "параметры публикации" позволяет Вам контролировать то, как Macaw обрабатывает различные страницы вашего проекта.

•  Список страниц позволяет установить, какие страницы в вашем проекте будут опубликованы.

• Объединение страниц определяет, будет ли Macaw публиковать CSS-файл для каждой страницы или, он будет объединять все стили в один CSS файл.

Head и Body

Раздел Head и Body диалогового окно "параметры публикации" позволяет добавить код в теге < Head > или пред закрывающим тегом </Body>. Любой код, который вы добавляете, будет добавляться ко всем страницам. Это место, где вы можете добавить код для таких вещей, как Google аналитика.

Стили

Раздел «Стили», определяет, как Macaw должен экспортировать в CSS.

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

• Краткие свойства - позволяет сокращать свойства, чтобы сократить их размер. Например, border-width: 10px; border-style: solid; border-color: #000; могут быть сокращены до: border: 10px solid #000;.

• Селекторы тегов – Macaw позволяет использовать теги в качестве селекторов, а не просто имена классов. Это может помочь писать более чистые стили, но также может привести переписыванию селекторов.

• Дополнительные Селекторы - включает :first и :last селекторы. Это экспериментальная функция, которая может вызвать нежелательные побочные эффекты.

• Удаление пробелов – удаляет символы пробела из CSS-файлов, которые могут быть нежелательным, если скорость загрузки является проблемой.

• Добавление браузерных префиксов - добавляет браузерные префиксы конкретным свойствам, таких как линейный градиент.

Единицы

Поле "единицы" позволяет Macaw конвертировать единицы измерения перед публикацией. Это позволяет проектировать с более удобными единицами и потом Macaw обрабатывает все преобразования.

• Размер шрифта определяет, в какие единицы Macaw будет конвертировать все размеры шрифтов при публикации.

• Геометрия определяет, в какие единицы Macaw будет конвертировать все пикселя на основе значений геометрии (ширина, высота, и т. д.) при публикации.

Сетка

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

Изображения

Раздел «Изображения» позволяет вам определить, должен ли Macaw генерировать оптимизированные изображения при публикации. Это необходимо для того, чтобы опубликовать обрезанные Retina изображения.

Окно Предварительного Просмотра

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

Интерфейс кнопок слева направо:

• Кнопки Назад/вперед позволяют перемещаться вперед или назад на разные страницы, которые выпросмотрели.

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

• Кнопка «Вид отображаемой страницы» переключает вид отображения текущей страницы, как страница будет отображена в браузере (этот режим установлен по умолчанию).

• Кнопка просмотра HTML переключает вид отображения текущей страницы и генерируемый HTML-код.

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

• Кнопка просмотра JavaScript переключает вид отображения текущей страницы и JavaScript.

• Кнопка поиска открывает текущий проект в вашей родной ОС, открывая файловое окно проводника.

• Кнопка просмотра в браузере открывает текущую страницу в браузере по умолчанию.

Удаленный Просмотр

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

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

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