Фиксированная полоса

Этап 2 - Шаблон >

Фиксированная полоса

Previous pageReturn to chapter overviewNext page
Verborgen tekst tonen/verbergen

При прокрутке странице вниз, начиная с какого-то момента и далее, «шапка» становится невидимой. Как правило, в «шапке» размещаются такие важные элементы, как логотип, заголовок сайта и, особенно, главное меню навигации. Чтобы улучшить ориентацию посетителей на сайте, можно поместить эти элементы на панель, которая при прокрутке страницы, всегда будет расположена на переднем плане, в верхней части окна браузера. В этой панели, которая называется Sticky Bar, можно настроить как содержимое, так и стиль, с помощью специальных опций в разделах:

Общие
Контент

Если вы работаете над Адаптивным Сайтом, можно настроить Sticky Bar для отображения, соответствующего различным заданным точкам останова. В этих случаях в окне будет показана Адаптивная Панель, воспроизводящая ту, которая находится в окне Разрешения и Адаптивный Дизайн. Адаптивная Панель воспроизводит все заданные точки останова, и, в зависимости от них, определяет интервалы: достаточно нажать на интервал, чтобы выделить его и приступить к настройке стиля или содержимого Sticky Bar.

Для создания адаптивного сайта необходимо выбрать опцию Адаптивный Сайт в окне Разрешения и Адаптивный Дизайн.

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

Чтобы всегда иметь иметь в поле зрения верхнюю строку, даже когда «шапка» невидима, достаточно активировать опцию Показать верхнюю полосу.

После активации, можно настроить Sticky Bar с помощью следующих опций из раздела Стиль:

Цвет Фона— указывает цвет для заливки фона.
Файл изображения— указывает на файл изображения (в форматах .JPG, .GIF или .PNG), используемого в качестве фона. Изображение можно взять в онлайн-библиотеке, открываемой кнопкой , или в локальных папках кнопкой Выбор файла .
Положение— указывает, должно ли повторяться изображение, используемое в качестве фона. Изображение может повторяться в только горизонтальном направлении, только в вертикальном или в двух направлениях таким образом, чтобы занимать полностью все имеющееся пространство. Более того, можно адаптировать или изменить размеры изображения, чтобы занять весь фон: в этом случае оригинальные пропорции могут не не сохраниться.
Выравнивание— определяет как должно выравниваться добавленное изображение относительно Sticky Bar.
Высота— указывает значение высоты (в пикселах) Sticky Bar.
Непрозрачность— настраивает степень матовости цвета фона Sticky Bar. Для значений, близких к 0, уменьшается матовость и фильтр становится более прозрачным, позволяя видеть содержание страницы.
Увеличьте ширину окна Браузера— если активна, Sticky Bar расширяется на всю ширину окна браузера, а не только на ширину контента страницы.
Кликните, чтобы развернуть/уменьшитьСправка: Команды раздела Контент

После того, как задан стиль, следует заняться содержимым Sticky Bar.

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

Сразу же под загруженным изображением располагается строка состояния, в которой указано:

положение: отображает координаты по оси x и y положения верхнего правого угла выделенного объекта относительно области, занятой Sticky Bar.
размер: указывает ширину и высоту (в пикселах) выделенного объекта.

И, наконец, под строкой состояния приводится список всех объектов, которые можно использовать для создания Sticky Bar.

Это те же объекты, что и те, которые используются для создания страниц (см. Этап 4 - Страницы): для облегчения их идентификации, они организованы по категориям, и для каждого из них доступен предпросмотр.

В Sticky Bar удобно поместить главные элементы «шапки», прежде всего, логотип компании, заголовок сайта и главное меню навигации.

 


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

-

Как работать с шаблонами

-

Где найти новые шаблоны для WebSite X5