[Урок 19] Первый сайт на Zero Block (1 часть - обзор интерфейса и настроек)
Привет, бандиты! Наконец-то мы приступаем к вёрстке на Zero Block. Именно благодаря нулевому блоку мы сможем делать сайты с индивидуальным дизайном и крутыми анимациями.
Сегодня мы познакомимся с Zero Block'ом, рассмотрим его интерфейс, познакомимся с горящими клавишами и кое-чем другим. Изучайте, всем успехов!)
Создаём новую чистую страницу
Создаём чистую страницу и идём не во "Все блоки", как мы привыкли делать это ранее, а клацаем на кнопку "Zero".
У вас появился первый Zero Block. Его настройки мы не трогаем. Сразу переходим к редактированию, соответственно нажав на кнопку "Редактировать блок".
Выделяем и удаляем все объекты на странице. У нас остаётся чистое поле для работы.
Пройдёмся по кнопочкам
Панель добавления объектов
Для начала рассмотрим кнопку добавления объектов на страницу (этот крестик на рыжем фоне). К сожалению, Zero Block на английском языке, поэтому я сразу переведу все обозначения.
Add Text - добавляет текстовый блок на страницу
Add Image - добавляет блок изображения на страничку
Add Shape - добавляет фигуру на страницу (квадрат по умолчанию)
Add Button - добавляет кнопку на страницу
Add Video - добавляет видео
Add Tooltip - добавляет блок с пояснением (по умолчанию кружок, при наведении на который всплывает подсказка)
Add html - вставка стороннего HTML кода
Add form - вставляет форму обратной связи
Add Gallery - добавляет блок галереи
Как то так. Со всем этим мы будем работать далее. Можете сохранить переводы, тем кому это нужно.
Адаптация экранов
Панель, где мы можем выбрать разрешение сайта. Тут мы будем адаптировать блок. Внимание! Zero Block не адаптируется автоматически, всё нужно делать вручную.
Другие кнопки
Сохранить - на оранжевом фоне
Закрыть - на белом фоне
- другое (там указаны горячие клавиши и так далее)
Настройки главного экрана
В нижнем правом углу мы можем увидеть кнопку "Settings" - это настройки самого экрана (белой чистой области). Жмём на неё.
GRID CONTAINER HEIGHT - высота рабочей области (в пикселях).
WINDOW CONTAINER HEIGHT - высота отображения всего блока. Например если поставим значение 100, то первый блок будет отображаться во весь экран пользователя. Если оставим пустым, то будет по высоте параметров GRID CONTAINER HEIGHT.
GRID CONTAINER ALIGN IN WINDOW - выравнивание рабочей области во всём окне. Выравнивать можно по центру, по верху, по низу и пропорционально.
BG COLOR - цвет всего фона
BACKGROUND IMAGE - заливка всего фона одним изображением
Behavior - scroll: фон листается вместе со всем блоком / fix : фон стоит на месте, а контент скроллится
Position - расположение самого фона, аналогично центровка фонового изображения, выравнивание его по центру, по низу и так далее.
Filter start/end - затемнение изображения (мы такое уже видели). Можем наложить любой цвет и изменить его прозрачность сверху или снизу.
OVERFLOW - наложение контента блока на другой последующий блок (hidden - отключено, visible - включен, auto - включается автоматически)
Горячие клавиши
Горячие кнопки - это всегда удобно. Здесь они тоже есть.
Отмена действия: cmd или ctrl + Z
Скрыть/показать модульную сетку: G
Скрыть/показать настройки блока: TAB
Скрыть/убрать все поля, кроме самого окна: F
Показать/скрыть слои: cmd или ctrl + L
Приблизить/отдалить рабочую область: ctrl/cmd +/-
Добавить дополнительную горизонтальную линию: cmd/ctrl + H
Добавить дополнительную вертикальную линию: shift + cmd/ctrl + H
На этом всё. Мы рассмотрели интерфейс зеро блока. В следующих уроках мы начнём делать наш первый сайт. Всем мир!