Наполняем сайт. Секции страницы. - Наполняем сайт. Секции страницы.

На этом уроке мы будем наполнять область содержания сайта (content panel) специальными секциями: таблицами, текстовыми блоками с вертикально расположенными кнопками переключения (action group).

Так же мы научимся создавать вложенные секции различного типа: таблицы вложенные в Action group и наоборот.

И, заодно, раз уж у нас зашла речь о таблицах, мы бегло ознакомимся с другими способами их создания:

  1. Мы можем собрать таблицу из строк и ячеек, как из деталей конструктора. К таким таблицам могут применяться различные Bootstrap классы, позволяющие быстро менять оформление и поведение таблиц.

  2. Можем создать классическую HTML-таблицу, используя встроенный в Vinci редактор HTML.

  3. Также, можно сохранить таблицу, созданную в каком-либо внешнем табличном редакторе, в формате HTML. А затем встроить эту таблицу в область содержания сайта.

Кроме того, мы научимся встраивать изображения с использованием HTML синтаксиса не только внутрь секции, но и в ее заголовок.

У нас должны получиться примерно вот такие таблицы и контент-блоки, переключающиеся по нажатию вертикально расположенных кнопок.

Таблица

Это форма представления информации, облегчающая её визуальное восприятие. Состоит из строк, столбцов и ячеек.

Способы создания таблиц

Nasdanika Vinci позволяет пользователю создавать таблицы несколькими способами.

  1. Двухколоночные таблицы создаются путем присвоения элементам модели роли Section и стиля Table
  2. Таблицы с произвольным количеством колонок создаются как контент-элемент Table
  3. Либо как контент-элемент HTML, с помощью HTML редактора.
Содержимое ячеек таблицы

Это Bootstrap таблица внутри ячейки родительской Action-таблицы

1

2

3

4

5

6

7

8

9

10

11

12

13

14

один

два

три

четыре

пять

шесть

семь

восемь

девять

десять

одиннадцать

двенадцать

тринадцать

четырнадцать

пятнадцать

шестнадцать

Action groupe - это группа блоков текста или иного вида контента. Переключение между блоками текста происходит по нажатию вертикально сгруппированных кнопок.

По принципу представления стиль секций Action groupe очень похож на стиль секций Pill. Только кнопки переключения между блоками расположены не горизонтально, а вертикально.

Мы можем вставлять любой вид контента в секцию со стилем Action Group.

Так же мы можем создавать под этой секцией дочерние Action

Вот, например, HTML таблица

1 2 3 4 5
один два три четыре пять
шесть семь восемь девять десять

Мы можем использовать иконки или произвольные изображения для формирования кнопок переключения между блоками Action Group.

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