Как происходит процедура упорядочивания Объектов

Лучшая практика > Этап 2 - Шаблон > Как создать дружественный для мобильных устройств веб-сайт > Как создать Адаптивный веб-сайт >

Как происходит процедура упорядочивания Объектов

Previous pageReturn to chapter overviewNext page

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

ВWebSite X5 определение того, как каждая Страница должна измениться в зависимости от заданных точек останова, выполняется в окне Легко адаптируемые настройки.

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

Определить упорядочивание Объектов означает установить в каком порядке эти объекты должны располагаться когда ширина окна браузера больше не достаточна для их отображения в режиме рабочего стола.

В Сетке каждый вставленный Объект имеет пиктограмму, ассоциируемую с типом контента (Текст, изображение и т. д.), и номер, указывающий на занимаемое положение в порядке.

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

Для активации режима упорядочивания Объектов необходимо выбрать Отображение Рабочий стол e щелкнуть по кнопке Заказать: вставленные Объекты становятся полу-прозрачными и некоторые обрамлены красной рамкой для указания того, что они выбраны.

Цель процесса упорядочивания — расположить присутствующие Объекты на одной Странице таким образом, чтобы они были линеаризованы в правильном порядке. Программа оценивает все возможности упорядочивания и, каждый раз, выделяет красным цветом только те Объекты, которые могут быть выбраны, не вызывая прерывание в процессе упорядочивания, которое повлияло бы на правильную линеаризацию всех Объектов.

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

В зависимости от того, по какому из Объектов было щелкнуто и от того, как все Объекты вставлены в Модульную Сетку, каждый раз меняются Объекты в рамке, среди которых можно выбрать тот, который должен быть следующим по порядку.

Для лучшего понимания этой процедуры, рассмотрим на примере:

Изображение 1. Первоначальная структура

Изображение 1. Первоначальная структура

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

При щелчке по Объекту 1 ситуация в Сетке меняется таким образом:

Изображение 2. Щелчок по 1: выбор среди 2, 3 и 4

Изображение 2. Щелчок по 1: выбор среди 2, 3 и 4

Как видно, щелчок по Объекту 1 подтверждает его положение и программа запрашивает второй из Объектов 2, 3 и 4.

Описанный порядок — один из возможных: в зависимости от контента может быть более правильно установить в качестве первого Объекта упорядочивания любой другой Объект, присутствующий в первой строке Сетки.

Продолжая пример, можно предположить, что положение Объектов 1, 2 и 3 подтверждена. В этот момент программа предлагает возможность выбора — щелкнуть по Объекту 4 или Объекту 5.

Изображение 3. Выбор среди 4 и 5

Изображение 3. Выбор среди 4 и 5

Выбор щелчка по Объекту 4 или Объекту 5 влияет на последующий выбор. В первом случае, определяется структура Страницы из двух строк, во втором — структура из двух столбцов.

Изображение 4. Щелчок по 4: структура со строками

Изображение 4. Щелчок по 4: структура со строками

 

Изображение 5. Щелчок по 5: структура со стролбцами

Изображение 5. Щелчок по 5: структура со стролбцами

В ходе процедуры упорядочивания можно выполнить конфигурацию структуры в которой создаются Блоки Объектов: в изображении 5, например, Объекты 1, 2, 3 и 4 образуют один Блок также как Объекты 5 и 6 образуют другой. Блок Объектов ведет себя также как единственный Объект и, для большей ясности, отображается на Сетке сразу же после его создания.

Изображение 6.

Изображение 6.

 

Изображение 7.

Изображение 7.

Изображения 6 и 7 показывают как разный выбор упорядочивания создает разные Блоки Объектов, которые, в свою очередь, определяют разные структуры Страницы.

В общем, это не означает, что Блок Объектов остается таким же во всех Отображениях.

Изображение 8. блок Объектов в отображении Рабочий стол

Изображение 8. блок Объектов в отображении Рабочий стол

 

Изображение 9. Если сделать Объект 4 невидимым, в следующем отображении Блок не будет создан

Изображение 9. Если сделать Объект 4 невидимым, в следующем отображении Блок не будет создан

На изображении 8, например, объекты 1, 2 и 3 формируют блок, так как они расположены рядом с объектом 4, находящемся на обеих строках. Если же, как видно на изображении 9, вставить разрыв строки между блоком и объектом 4 (это возможно в версии Pro) или сделать невидимым объект 4, в последующем отображении объекты 1, 2 и 3 больше не будут располагаться рядом с другими объектами и не создадут какого-либо блока.

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

Изображение 10. Пример Неделимого Блока

Изображение 10. Пример Неделимого Блока

На изображении 10 показан пример неделимого блока. Как видно, «цветочное» расположение объектов не позволяет идентифицировать структуру со строками или со столбцами: это существенно снижает возможности упорядочивания, не позволяет вставлять разрыв строки между желаемыми объектами (функция доступна в версии Pro) и не позволяет сделать невидимым один из объектов, не делая автоматически невидимыми также и все другие объекты блока. Итак, несмотря на возможность их управления, при наличии неделимых блоков, рекомендуется пересмотреть и попытаться упростить расположение объектов, чтобы получить большую свободу действий.

В заключение, не представляется возможным сделать общее утверждение, что одно упорядочивание более правильно или лучше другого: все зависит от имеющегося контента и от желаемых результатов. Когда задано упорядочивание, следует проверить в местном браузере как отображается Страница при разных заданных точках останова. Если контент отображается правильно, значит упорядочивание тоже настроено правильно и его можно оставить.

 


Лучшая практика:

-

Как создать Адаптивный веб-сайт

-

Как и зачем настраивать Разрыв строки