CSS Grid Builder

Визуальные редакторы


Содержание сайта
Визуальные редакторы
Обзор программ л.12
CSS Grid Builder

CSS Grid Builder

На рисунке - CSS Grid Builder v 2.5 (2018 г, март). Интерфейс и справка на англ. языке. Вес 270 Мб  Цена 129 долл.
Работает в Windows : 10, 8, 8 (32-bit), 7, (32-bit).
Автор: CoffeeCup Inc.

Назначение CSS Grid Builder - создание сайтов для экранов разных размеров.

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

Создание макета страницы с использованием технологии CSS Grid (сетки CSS) был назван самой большой новой технологией, которая появилась в интернете за последнее десятилетие. Зачем возиться в графическом редакторе только для того, чтобы воссоздать его для браузера? CSS Grid Builder использует холст на основе браузера и пишет чистый CSS и доступную разметку.


Настройка CSS производится в визульном режиме, т.е. без написания кода. Тем не менее, пользователь должен иметь хотя бы общее представление о применении CSS при создании веб-страниц.

За последнее время создатели браузеров работали над поддержкой браузерами этой технологии. В числе первых был Firefox. На данный момент все распространенные браузеры поддерживают сетку CSS Grid. за исключением  Microsoft Edge.(более новые версии  Microsoft Edge будут поддерживать тенологию  CSS Grid).

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

Как интерфейс, так и принципы работы в  CSS Grid Builder очень похожи на работу в другой программе для создания "адаптивного" дизайна - Responsive Site Designer.

Окно программы имеет 4 основные области -  Холст, Панель содержимого, Шкала настройки ширины экрана и Панель инструментов.

Content Pane  (Панель содержимого) служит 3-м целям.
Вкладка Elements (Вкладка по умолчанию) служит для добавления  элементов html - текста, изображений, контейнеров и т. д. на холст. Эти элементы можно сгруппировать в Components -  компоненты и повторно использовать на других страницах или в других проектах. Symbols  (Символы) похожи на компоненты, но при обновлении одного экземпляра все они обновляются независимо от того, где они находятся.

На страницу можно вставить текст (заголовки и параграфы), списки. изображения (в том числе изображения-ссылки), цитаты (Blackquote), тестовые ссылки, значки, видео, гориз. линии, html-элементы, конпки (в т.ч. со ссылками), кнопки PayPal, веб-формы контактов (также все элементы веб-форм), кнопки соц. сетей и др.

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

Вкладка  Element pane  (Панель элементов) позволяет перемещаться по элементам и изменять их порядок. Здесь также можно ввести данные, относящиеся к элементу, такие как ссылки на изображения и атрибуты данных.

Вкладка Settings pane  (Панель настроек) предназначена для добавления заголовка страницы, ключевых слов или вставки кода в облаь <head> или нижнего колонтитула.
 
В настоящее время Grid Builder использует только мобильный рабочий процесс. Это означает, что процесс проектирования изначально фокусируется на небольших (мобильных) устройствах с шириной левее первой синей точки (точки останова).
Все стили по умолчанию должны быть применены в первую очередь для веб-страниц для небольших экранов, а корректировки могут быть сделаны для больших экранов.

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


Видео-обзор    https://cssgrid.cc/video-tutorials/
Авторская справка в Интернете (англ. язык)
Авторская справка в интернете (англ. язык)
Страница программы

Скачать
Купить

См. также  CoffeeCup - программы.


Вернуться к обзору
Последнее обновление: апрель 2018 г.