Responsive Content Slider

Фотоальбомы, слайды


Содержание сайта
Разное
Фотоальбомы
Обзор программ  л. 5 /
Список программ

Responsive Content Slider

На рисунке - Responsive Content Slider v 1.2. Интерфейс на англ. языке. Вес 109 Мб. Цена 39 долл.
Работает в  Windows и OSX.
Автор: CoffeeCup Inc.

Назначение Responsive Content Slider - создание слайдов для экранов разных размеров.

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


В Responsive Content Slider применяется адаптивный дизайн, каждый элемент (включая любые добавленные изображения) можно детально контролировать для любого размера экрана. Есть и другие преимущества.

Контент теперь доступен для чтения с экрана и индексируется поисковыми системами. Кроме того, вы можете использовать интерактивные эффекты CSS, такие как анимация при наведении курсора.
Также в Responsive Content Slider можно создавать простые слайд-шоу на основе фотографий.

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

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

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


Использование эффектов перехода («затухание», «шаг» и  «слайд»).
Добавление к слайдам элементов управления проигрывателя (такие как «play», «next» и т. д.),
Благодаря детальному контролю над дизайном каждого элемента контента и слайд-шоу можно создавать действительно уникальные слайды.

В Responsive Content Slider можно начать работу с выбора шаблона или создать проект "с нуля".
Применение шаблона целесообразно, если у вас ограниченный опыт работы с CSS.
С программой идет два стартовых шаблона с минимальным содержанием и дизайном. Вы просто можете заменить существующие изображения и отредактировать другие элементы.
С помощью шаблонов сначала создается дизайн для больших экранов. Затем вносятся коррективы в макет и дизайн, чтобы дизайн «уместился» и на экранах меньшего размера.

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

Интерфейс (UI) можно разделить на несколько основных разделов:

1. Область предварительного просмотра в реальном времени, любые изменения в содержании или дизайне отражаются немедленно.

2. Панель управления (control panes). Большинство возможностей дизайна и создания Responsive Content Slider можно найти под одной из этих панелей. Панель дизайна (обозначена значком карандаша наиболее часто используется. Панель подразделяется на несколько разделов, каждый из которых содержит множество элементов управления дизайном для стилизации элемента. Благодаря возможности использовать селекторы и элементы управления для типографики, размеров и фона эта панель очень похожа на панель дизайна программы  Responsive Site Designer.
Панель слайдов (Slide Pane) предназначена для управления слайдами и их вращением.
Панель элементов содержит блоки контента, которые можно добавить в слайды.
Панель анимации (Animations Pane)
Панель инспектора (Inspector Pane). Используется для выбора элементов, их перемещения и просмотра примененных стилей (в различных точках останова).

3. Ползунок области просмотра. Позволяет посмотреть, как выглядят слайды при разной ширине экрана. Дизайн должен хорошо выглядеть на любой ширине,от огромного до очень маленького. Точки останова используются для внесения необходимых корректировок.

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

Работа со стартовыми (по умолчанию) шаблонами
Использование содержимого изображений с элементом изображения в теме изображения

Текст можно редактировать, а выделенные фрагменты можно форматировать в режиме редактирования текста. Тройной щелчок по текстовому элементу запускает режим редактирования.

Чтобы расширить слайд-шоу, просто выберите слайд и нажмите кнопку «Дублировать слайд».

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

Положения элементов можно контролировать с помощью управления размерами и положением. Можно группировать элементы в контейнерах и размещать контейнеры рядом друг с другом, используя float, уменьшая их ширину. Если общая ширина меньше 100%, элементы появятся рядом друг с другом.


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

Скачать



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