Site Designer

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


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

Site Designer

На рисунке - Site Designer v 3.5 (2019 г)  Интерфейс на англ. языке. Вес 265 Мб. Цена 99 долл.
Автор: CoffeeCup.

Последняя версия Site Designer v 4.0 (2019 г, июль). Новый интерфейс. Опытным пользователям понравится возможность экспортировать разметку элемента в CodePen. Таким образом, вы можете использовать его с CMS или другим местом без необходимости полного экспорта.

Назначение Site Designer - создание сайтов для экранов разных размеров.
Site Designer основан на сетке, фреймворках Foundation, Bootstrap, Materialize, Vanilla CSS.

Site Designer имеет много общего (как в интерфейсе, так и в методах работы) с такими программами CoffeeCup, как Responsive Layout Maker, Responsive Site Designer, Responsive Foundation Framer, По сути, Site Designer является развитием этих программ.

Работа в Site Designer ведется в визуальном режиме. Вместе с тем от пользователя потребуются некоторые знания о кодировании HTML и CSS, хотя бы на базовом уровне.

Основные элементы интерфейса Site Designer :
Холст  -  это рабочая область. То, что вы создаете, будет выглядеть так же, как и после  публикации в Интернете. Холст в основном используется для просмотра создаваемого дизайна, выбора или изменения порядка элементов и редактирования текста.
Панели управления (Control Panes). Справа расположены 4 панели, каждая из которых играет определенную роль для визуального управления содержимым, макетом, стилями, HTML, CSS и Javascript, а также свойствами страницы.
Самая левая панель - это панель контента. Страница содержимого состоит из трех разделов: элементы, компоненты и символы.
Панель содержания (Content pane) содержит такие элементы страницы, как заголовки, абзацы, кнопки, изображения и видео (и целый ряд других), могут быть вставлены на холст или вложены в контейнер.
Имеется доступ ко всем готовым компонентам, таким как навигация, карты и модалы, которые включены в проект.
Раздел «Символы» (Symbols) включает такие элементы, как логотип, верхний колонтитул страницы или общие элементы, такие как нижний колонтитул, которые необходимо синхронизировать во всех местах и ​​страницах проекта.
Панели управления служат для управления и стилизации вашего проекта.
Панель «Стили» (Styles pane)  состоит из двух основных частей. Верхний раздел используется для настройки HTML / контентной части элемента. Вторая часть панели «Стили» состоит из трех разделов: макет, дизайн, эффекты. Эти разделы содержат все входные данные, инструменты и элементы управления для управления макетом дизайна, элементами стиля, типографикой, размерами и так далее. Здесь также можно найти элементы управления макетом, такие как Flexbox и CSS Grid.
Третья панель - это панель Элементов (Element pane). В верхней части этой панели представлен просмотр инспектора страниц в виде дерева, обзор всех элементов на странице. Он предлагает быстрый способ выбора и изменения порядка элементов и др. Нижняя часть предлагает предварительный просмотр добавленных правил CSS. И поля свойств для специальных элементов, которые требуют связи с ресурсом (например, файл изображения, ссылка на видео или пользовательский HTML).
Панель настроек (Settings pane). Здесь вы можете установить метаданные для поисковой оптимизации. Введите заголовок страницы, описание, ключевые слова или вставьте содержимое в разделы верхнего и нижнего колонтитула.
Менеджер точек останова (Breakpoint Manager) - выше холста. Эта панель содержит ряд инструментов для управления дизайном при любой ширине экрана устройства.
Панель инструментов (Toolbar) - выше холста. Предоставляет доступ к часто используемым функциям, таким как менеджер страниц, ресурсы проекта, просмотр библиотеки компонентов, запуск предварительного просмотра в определенном браузере, переключение точек останова и даже для публикации ролекта.

При создании нового проекта первоначально выбирается фреймворк, на котором вы хотите построить свой проект. Все используемые фреймворки отлично подходят для создания профессиональных сайтов, все зависит от  вашего предпочтения.
Bootstrap долгое время был королем фреймворков, способен создавать высоко стилизованные классы элементов. Это позволяет быстро создавать дизайн с неизменным внешним видом. Bootstrap также имеет более широкий набор точек останова по умолчанию для большего изменения размера экрана.
Foundation предлагает минимальные предустановленные стили для элементов с 3 точками останова по умолчанию (размеры макета). С меньшим количеством предустановленных стилей для управления проще применить ваши настройки.
Materialise (основанный на Material Design от Google) определяет, как должны вести себя элементы макета (элементы UX). Большие возможности интерактивных компонентов.
Vanilla - javascript-фреймворк.

Фреймворк, который вы выберете для своего проекта, будет отражен в верхнем левом углу программы.

Выберите тему оформления (шаблон) - Выбор тем

Вы можете использовать заранее разработанные элементы, которые идут с программой. Используя CSS-элементы без необходимости кодирования, вы можете целиком сосредоточиться на дизайне. Программа создаст код за вас (будет создана реальная таблица стилей).
Теги можно изменять по щелчку мыши, чтобы использовать элементы HTML5 (такие как <nav> и <header>), что приводит к хорошо размеченным страницам и передаче значения для поисковых систем.

Опытные пользователи могут экспортировать разметку элемента в CodePen. Таким образом, вы можете использовать его с CMS без необходимости полного экспорта.
CodePen - онлайн-редактор кода JavaScript, CSS и HTML.

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

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

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

Выбор позиционирования элементов - абсолютное, статическое или фиксированное.

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

Текстовые элементы можно редактировать прямо на экране, когда текстовый редактор активен. Его можно активировать несколькими способами. Введите, вставьте или отредактируйте текст прямо на холсте, используя текстовый редактор. Щелчок правой кнопкой мыши по текстовому элементу откроет контекстное меню с опцией Text Edit. Вы также можете дважды щелкнуть текст на экране, чтобы начать вводить свои слова. Вы можете выделить слова в абзаце, вставить ссылку, изменить цвет или шрифт и многое другое.
Для опытных пользователей есть возможность вставить HTML-сценарии с использованием элемента HTML.

Создайте взаимодействия -  дизайн для взаимодействия с элементами управления при наведении курсора, активном и нажатом состоянии.
Создавайте мощные 3D-эффекты.

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

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

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

Программа имеет интегрированного веб-инспектора с планировщиком интервалов, деревом DOM и предварительным просмотром CSS.

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

Применение эффектов к изображениям (корректировка цвета, осветление, затемнение и пр.)..

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

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


Авторская справка в Интернете (англ. язык)

Скачать  



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