 На рисунке - Responsive Bootstrap Builder v 2 (2017 г). Интерфейс на англ. языке. Вес 167 Мб. Цена 79 долл. (цена в 2019 г. - 29 долл.). Работает в Windows, Mac. Автор: CoffeeCup Software, Inc. Назначение Responsive Bootstrap Builder - создание сайтов для экранов разных размеров. Создание адаптивных сайтов вручную сложно, а простых и хороших программ для создания таких сайтов мало. Поэтому на новые программы, способные создавать сайты для разных экранов, нужно обращать особое внимание. Группа CoffeeCup ранее уже выпустила несколько программ, использующих адаптивный дизайн - см. Responsive Site Designer, Responsive Layout Maker, Foundation Frames. Краткий обзор Responsive Bootstrap Builder Макет страницы Основой макета в Responsive Bootstrap Builder (как и в большинстве программ подобного рода) является сетка. По внешнему виду она похожа на таблицу - имеет набор строк и столбцов. Ячейки сетки используются для размещения вставляемых объектов. Для создания макета используется панель Layout . При изменении ширины экрана все содержание сетки перегруппировывается и изменяется - ячейки могут сливаться, добавляться (или удаляться), размеры объектов соответственно увеличиваются или уменьшаются, приспосабливаясь к разному размеру экрана. Сетка bootstrap использует систему из 12 колонок. Это означает, что каждая строка может вместить до 12 столбцов. Учитывая возможность объединения ячеек, кажый столбец может занимать как 1/12 ширины страницы, так и всю ширину (например, на всю ширину страницы можно поместить верхний колонтитул). Таким образом можно создать сложный макет страницы. Создание макета страницы с помощью сетки схоже с табличной версткой страницы - также есть гарантия, что при трансформации страницы по ширине все объекты остаются "запертыми" в своих ячейках и не могут накладываться друг на друга. Трансформация страницы (или перегруппировка ячеек - перегруппировка объектов) производится в контрольных точках. Обычно достаточно 3-х контрольных точек, но Вы можете создать их сколько угодно. Можно установить ширину страницы (т.е макета) на всю ширину экрана или ограничить максимальную ширину страницы (например, в 1200 пикселей). Чтобы наглядно показать строки, столбцы и ячейки сетки, используйте инструмент Show Guides на верхней панели инструментов. Интерфейс Основное место окна программы занимает окно редактирования (или Холст). То, что создается на холсте, будет выглядеть точно так же, как в браузере.
Символы Символы позволяют Вам делать глобальные обновления содержания.Это идеально подходит для хранения общих элементов страниц, таких как навигационные меню, логотипы, заголовки, нижние сноски, верхний или нижний баннеры и др. При обновлении символа обновляются все его вхождения на страницах сайта. Страницы Для работы со страницами используется инструмент Pages на верхней панели инструментов. В частности, можно добавть бланк страницы, дублировать страницу, переходить по страницам и пр. Верхнюю половину панели Inspector занимает список элементов страницы и их вложенности. При наведении мыши на элемент выделяет элемент и показывает его селектор и размер на холсте. CSS Bootstrap Builder - это также отличный инструмент для тех, кто заинтересован в изучении CSS. Визуальный дизайн в сочетании с просмотром в реальном времени обеспечивают отличный механизм обратной связи, который помогает понять последствия добавления или изменения кода CSS. Сайты, созданные методом адаптивного дизайна, как правило, страдают от ‘одинаковости’, сайтам не хватает индивидуальности. С Bootstrap Builder вы можете изменить все. Все свойства стиля CSS доступны, используя панель Design - панель дизайна. Возможность добавить селекторы CSS — классов и ID элемента является важной частью этого раздела. Селектор "связывает" элемент или группу элементов для разработки правил, определенных в разделе "Style" во второй половине области дизайна. Bootstrap Builder может автоматически создавать селекторы. Однако, чтобы получить максимальную отдачу от программы, чтобы ускорить рабочий процесс и создавать любые проекты, необходимо знать правила CSS, в частности применение селекторов и предопределенных классов. К примеру, разнообразные по оформлению кнопки в Bootstrap Builder создаются с применением классов. Определения стиля связаны с селекторами. Классы могут быть добавлены для создания вариаций дизайна. Например, определенным объектам, которые выполняют различную роль, можно придать различный шрифт, размер и/или цвет с помощью селектора класса. В программе имеется просмотр кода CSS для выбранного элемента. В дальнейшем планируется возможность редактирования кода. Контрольные точки (Breakpoint) Создав макет страницы с использованием панели Layout и поместив в созданные ячейки таблицы различные объекты, Вы уже создали страницу, которая будет приспосабливаться к размеру экрана (к примеру, будет перетекать текст, изменяться размеры изображений и др.). Обо все этом позаботится сама программа. Но в итоге окажется, что такое преобразование даст не совсем хорошие результаты (к примеру, при уменьшении ширины экрана ранее помещенные в ячейки изображения уменьшаться практически до нуля). Чтобы этого не произошло, используются контрольные точки, в которых происходит перегруппировка ячеек, изменение размеров объектов (и их оформление). При открытии программы контрольные точки установлены на ширину экрана мобильных телефонов (положение по умолчанию). Ширина экрана устанавливается Регулятором ширины - на шкале выше окна редактирования. Возможность сделать планировку и конструктивные изменения, где это необходимо, является главным в любом отзывчивом дизайне. Возможно, придется объединять ячейки. Размеры шрифтов потребуется увеличить и небольшие изображения заменяются на более крупные. Регулятор ширины можно использовать для просмотра сайта в любой возможной ширине. Просто переместите ползунок влево или вправо и посмотрите изменения на холсте. Вы также можете перемещать движок влево или вправо, пиксель за пикселем, с помощью клавиш со стрелками на клавиатуре Фиолетовые точки - это точки по умолчанию с рамках bootstrap. Белые точки - это пользовательские контрольные точки Точка активна, когда она загорается — когда есть маленький темный круг на точке. Точка становится активной, когда ползунок находится справа от нее и до следующей точки останова. Пользовательские точки можно добавить, щелкнув на строке точек или с помощью значка плюс слева. Для удаления - нажать значок минус. При выборе точек также можно перемещать их влево и вправо с помощью клавиш со стрелками. Работа с объектами Точное расположение объектов на основе адаптируемых блоков. Объекты могут быть выделены, дублированы, скопированы, перемещены в другие ячейки таблицы (перетаскиванием). Элементы в группе, как правило, выполняют действия после взаимодействия с посетителем или пользователем. При нажатии на кнопку можно открыть меню, выявить скрытые элементы или показать диалоговое окно. Интерактивные элементы также могут направлять пользователей в другое расположение, на страницу сайта или на совершенно другой сайт. Текст Есть 6 различных текстовых элементов - заголовки, параграфы, текстовые ссылки и пр. Тройной щелчок в текстовом элементе запустит текстовый редактор. В качестве альтернативы вы можете использовать кнопку Edit Text (ниже поля для ввода ID - идентификатора в области дизайна) на панели дизайн или использовать контекстное меню. Текстовый редактор может также использоваться, чтобы добавить встроенные ссылки и форматирование. Изображения Для вставки изображений используется местозаполнитель (Placeholder Picture). Затем это место заполняется реальным изображением (выбор из файла на вашем компьютере или из Сети). Вновь добавленное изображение размером не более 200 пикселей. Это может быть изменено на панели дизайна. Редактирование изображений - установка яркости, контраста, насыщенности, сепии, оттенка, применение вращения и др. HTML-элемент HTML-элемент может быть использован, чтобы добавить пользовательские фрагменты кода или экспорт из других приложений. Это может быть программа для создания Web-приложений, такая как Web Form Builder, Responsive Content Slider и др. Работа с цветом Редактор имеет свою палитру цветов. Захватите цвет из любой точки на экране, организуйте цвета в собственную палитру цветов. Фон Фон страницы может быть цветом, градиентом цветов (линейным, радиальным) или изображением. Градиент может состоять из 4-х цветов. Фоновое изображения можно масштабировать. Значение по умолчанию - Auto, которое говорит браузеру, чтобы вычислить размер на основе фактического размера изображения и его пропорции. Границы Границы могут быть добавлены к вставленным элементам. К нескольким границам могут быть применены стили оформления одновременно. Авторская справка в Интернете (Примечание: страницы справки созданы по методу "отзывчивого дизайна", т.е. могут приспосабливаться к разным размерам экрана - измените ширину окна браузера для проверки) Скачать Похожие программы: См. также CoffeeCup - программы.
Вернуться к обзору Последнее обновление: июль
2019
г.
|
