Responsive Site Designer

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


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



На рисунке - Responsive Site Designer beta (RSD) v 1.5 (2015 г). Интерфейс и справка на англ. языке. Вес 150 Мб. Цена 189 долл.
Работает в Windows, Mac.
Автор: CoffeeCup
Последняя версия - Responsive Site Designer v 2 (2017 г).

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

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

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

При создании так называемого "отзычивого дизайна" ("Responsive design") используется настраиваемая сетка.
В ячейках сетки могут располагаться объекты страницы.

Интерфейс

Центральное место в окне программы занимает окно редактирования (оно также - окно предварительного просмотра).
Responsive Site Designer имеет встроенный браузер.

Панели инструментов - справа в окне программы.
Имеется 5 панелей:
- панель расположения - добавление строк и стобцов к сетке, определение промежутка между столбцами и формирование сетки. Панель расположения работает аналогично панели Responsive Layout Maker
- панель элементов. (см. Объекты страницы)
- панель проекта, работа с CSS3
- панель параметров настройки страницы. Здесь Вы можете добавить название страницы, определить ключевые слова метаданных, связи и пр.
- панель инспектора (inspector pane). Верхняя часть панели показывает дерево DOM; список элементов страницы и их вложения. Элементы могут также быть отобраны и перемещены в другие положения.

Эти панели дают  детальный контроль над расположением, содержанием и стилями страниц.

Шкала расстановки контрольных точек - выше окна редактирования.
Контрольные точки (Breakpoints), представленные небольшими белыми точками выше ползунка, могут быть добавлены при необъодимости. Просто щелкните кнопку плюс слева, чтобы добавить контрольную точку в текущем положении ползунка. В этом пункте главные изменения могут быть сделаны. Небольшие изменения, такие как изменение размера шрифта для заголовков, могут быть сделаны также.

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

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

Панель инструментов (toolbar)
Панель инструментов - самая верхняя панель и содержит кнопки для открытия нужных страниц, для предварительного просмотра во встроенном браузере или во внешнем браузере, кнопки сохранения проекта, публикации, есть кнопки вызова менеджера страницы (page manager) и управления ресурсами проекта.

Объекты страницы

Объекты (элементы) страницы  - все то, что может располагаться на страницах сайта - заголовки (H1-H6), текст (параграфы), списки (с маркерами или номерами), изображения (picture element). кнопки, веб-формы, ссылки текстовые и с использованием изображений, разделительные линии, элементы расположения или контейнеры (Layout elements) и другое. Кроме этого, есть возможность добавить свой код HTML (например, можно вставить код навигационного меню, код от YouTube, код веб-формы, созданный в Web Form Builder). Элемент подсетки (subgrid element - группа контейнеров, где Вы можете добавить строки и колонки в пределах существующей колонки.

Объекты страницы располагаются на панели элементов. Для вставки объекта его достаточно перетащить с панели элементов в окно редактирования.
Responsive Site Designer идет более чем с 1600 изображениями.
Picture element служит контейнером для одного или нескольких изображений.
Temp images служит как "хранитель места" (placeholders) для изображений.
На любом изображении можно создать ссылку.
Уникальная для RSD способность установить фокус на изображении, чтобы изменить масштаб изображения.
Для работы с текстом имеется редактор текста (Text Editor).


Настройки элементов

Каждый помещенный на страницу элемент имеет большой набор своих индивидуальных настроек.
Ниже - панель настройки текста (панель развернута по горизонтали)




Новое в Responsive Site Designer v 2

Расширенная библиотека компонентов
Синхронизация элементов (таких как навигационные меню или нижние колонтитулы) по всему проекту. При обновлении элемента изменения будут отображаться везде.
Интернет-торговля - оплата через PayPal, чтобы принимать платежи и пожертвования на ваших сайтах. Настраиваемые кнопки визуально, так что они будут соответствовать индивидуальности вашей страницы.
Фильтры и режимы наложения, смешивания цветов, применение Instagram-подобных эффектов, настройки яркости, контрастности, оттенка, поворот и многое другое.
Анимации - забавные эффекты и переходы, которые активируются, когда они попадают в поле зрения на своей странице.
Создание дизайна веб-сайтов с помощью популярного Foundation 6 или Bootstrap 3 & 4(Альфа)..
И другое.


Похожие программы:
Responsive Layout Maker
Responsive Email Designer 
Responsive Bootstrap Builder

ОБУЧЕНИЕ:

Обзор программы (англ. язык)
Авторская справка в Интернете
Обучение  + видео (англ. язык)

Сайты для разных экранов

Скачать Responsive Site Designer


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