Как работать с Стиль Полос

Лучшая практика > Этап 4 - Страницы >

Как работать с Стиль Полос

Previous pageReturn to chapter overviewNext page
Verborgen tekst tonen/verbergen

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

Кликните, чтобы развернуть/уменьшитьКак: Как объединить строки, чтобы придать им одинаковый вид

Строка – это горизонтальная полоса внутри страницы. Ширина этой полосы может быть равной ширине страницы (ширина которой, в свою очередь, обусловлена используемым шаблоном) или ширине окна браузера. А высота полосы обусловлена положением самого высокого объекта, содержащегося в одной из ячеек этой строки.

Если объединить строки, то стиль одной строки может автоматически применяться также и к одной или нескольким следующим строкам:

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

Состояние до объединения

Переместите мышь в центр линии, которая наилучшим образом объединяет точки двух строк, которые вы намерены объединить: появится пиктограмма в виде замка.
Мышь на уровне линии

Мышь на уровне линии

Щелкните по пиктограмме в виде замка: две строки объединятся и пиктограмма замка изменится.
Щелчок по пиктограмме в виде замка для объединения строк

Щелчок по пиктограмме в виде замка для объединения строк

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

Состояние после объединения строк

Повторите процедуру, если вы хотите объединить все нужные вам строки.
Кликните, чтобы развернуть/уменьшитьКак: Как разделить объединенные строки

Таким же образом, как вы объединили две или более строки, чтобы применить к ним одинаковый стиль, вы можете разделить их и сделать индивидуальными:

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

Если, например, вы объединили строки 1 и 2 и для обеих задали особый стиль, после разделения строка 2 примет свой первоначальный вид.

Если вы объединили между собой более двух строк, разделение произойдет в точке, где расположена пиктограмма в виде замка. Например, если строки 1, 2, 3 и 4 объединены между собой, и вы щелкните мышью по пиктограмме в виде замке, находящейся между строкой 2 и строкой 3, в результате вы получите объединение строки 1 со строкой 2 и строки 3 – со строкой 4.

Кликните, чтобы развернуть/уменьшитьКак: Когда нельзя разделить несколько объединенных между собой строк

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

Случай 1. Разметка

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

Пример


Объект в столбце 1 занимает строки 4, 5 и 6: они будут объединены автоматически и не смогут быть разделены

Объект в столбце 1 занимает строки 4, 5 и 6: они будут объединены автоматически и не смогут быть разделены

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

Случай 2. Адаптивный сайт

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

Шаг 1


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

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

Шаг 2


В итоге: в связи с заданным порядком, строки 1 и 2 объединятся и примут одинаковый вид

В итоге: в связи с заданным порядком, строки 1 и 2 объединятся и примут одинаковый вид

Кликните, чтобы развернуть/уменьшитьКак: Настроить стиль строки

Настроить стиль строки очень просто. Для этого нужно:

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

При определении стиля строки следует учесть, что:

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

Для создания цветной полосы, ширина которой не только достигает ширины страницы, а всего окна браузера, следует выполнить следующее:

Открыть окно Стиль Полос и выбрать желаемую строку или группу строк.
Выбрать Цветной в качестве типа Фон и использовать имеющиеся параметры для настройки цвета и прозрачности.
Активировать опцию Увеличить ширину окна Браузера и открыть режим предпросмотра на локальном компьютере для проверки графического эффекта созданной полосы.

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

 

Кликните, чтобы развернуть/уменьшитьКак: Как создать сайт с эффектом параллакса

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

Для настройки эффекта параллакса на странице следует:

Открыть окно Стиль Полос и выбрать желаемую строку или группу строк.
Выбрать Изображение в качестве типа Фон и использовать имеющиеся параметры для импорта нужного вам графического файла, и задать такие параметры, как расположение и выравнивание.
Активировать опцию Эффект и выбрать тип параллакса, который вы хотите применить. Bключить режим предпросмотра на локальном компьютере для проверки графического эффекта созданной полосы.
Чтобы еще больше усилить эффект параллакса, рекомендуется также активировать опцию Увеличить ширину окна Браузера, чтобы созданная полоса достигла ширины всего окна браузера.

Если вы хотите активировать эффект параллакса, можно использовать в качестве Фон строки градиент, изображение, слайд-шоу, видео или карту, а не один сплошной цвет.

 


Более подробная информация:

-

Блочная модель в WebSite X5