Совет 1: Как добавить полосу прокрутки

Полосы прокрутки (Scroll bars) - это вертикальная и горизонтальная полоски, размещаемые вдоль правого (при письме слева на право) и нижнего краев окна или отдельной области внутри окна, предназначенные для перемещения содержимого в вертикальном или горизонтальном направлениях. Для управления их внешним видом и поведением в веб-страницах используются элементы языка описания стилей CSS (Cascading Style Sheets - «Каскадные таблицы стилей»), встроенные в язык HTML.
Инструкция
1
Используйте тег div, если нужно сделать полосу прокрутки не для всей страницы, а только для ограниченной ее области. В языке HTML (HyperText Markup Language - «язык разметки гипертекста») «тегами» называют отдельные команды браузеру отобразить тот или иной элемент страницы. В самом простом виде тег div (его часто называют «слоем») пишется так:
<div>Это текст внутри слоя</div>
Здесь <div> - открывающий тег, а </div> - закрывающий. Все, что размещено между открывающим и закрывающим тегами, находится в слое как в контейнере и этому контейнеру можно задавать размеры - ширину и высоту. Это делается с помощью дополнительного параметра («атрибута») style, который следует добавить в открывающий тег:
<div style="width:300px; height:300px;">

Это текст внутри слоя

</div>
2
Указывайте в атрибуте style тега div и правила для полос прокрутки слоя тоже:
<div style="width:400px; height:200px; overflow:auto;">

Это текст внутри слоя

</div>
Здесь overflow:auto означает, что полосы прокрутки будут появляться автоматически, то есть когда содержимое слоя не будет умещаться в заданные размеры. Если auto заменить на scroll, то эти полосы будут присутствовать всегда, независимо от того нужны они или нет. А значение hidden окажет противоположное действие - прокрутка никогда не будет появляться, даже если содержимого этого контейнера не будет видно за его краями.
3
Применяйте аналогичный способ и для добавления полос прокрутки к странице в целом. По умолчанию они появляются по мере необходимости, но если по какой-либо причине возникнет необходимость в их постоянном присутствии на странице, то в исходный html-код следует добавить соответствующее правило стиля. Найдите в коде страницы закрывающий тег заголовочной части документа </head> и перед ним впишите эти стилевые инструкции:
<style type="text/css">body {overflow:scroll;}</style>

Совет 2: Как сделать полосу прокрутки

В наше время иметь собственный сайт – не роскошь, а скорее необходимость. Его создание требует определенных навыков и знания html. Создать простой сайт довольно просто. Однако его украшение и создание интерактивных элементов, обеспечивающих дополнительную функциональность сайта, вызовет у новичка трудности. Один из таких интерактивных элементов, повышающих удобство посетителей сайта – полоса прокрутки. Она особенно пригодится в полях сайта, обеспечивающих его связь со скриптами (взаимодействие сайта с пользователями).
Вам понадобится
  • Интернет или любой учебник по html
Инструкция
1
Самое главное на любом сайте - удобство пользователя. Сама идея применения полосы прокрутки на вашем сайте будет уместна только в том случае, если ее появление продиктовано не вашим желанием, а ее необходимостью. Сделайте макет страницы, на которую вы хотите поместить полосу прокрутки. Выберете место для скролла (так еще называют полосы прокрутки).
2
Выберите место для полосы прокрутки на интересующей вас странице сайта. Она должна быть жестко связана с каким-либо элементом (например, текстовым полем или ниспадающим списком). Это место вы должны рассчитать в пикселях или в процентах. Сделать это нетрудно, особенно если макет сайта имеет ясную структуру.
3
Между тегами BODY вы должны добавить стандартный код для скролла. Найти его можно в любом учебнике по html. Есть два варианта - либо добавить этот фрагмент напрямую в html код страницы, либо приложить в таблице стилей css. Второй способ удобнее, если вы меняете не одну страничку, а весь сайт сразу. Затем нужно ввести цветовые параметры полосы прокрутки, иначе она будет серой и неинтересной. На рисунке показаны и подписаны элементы скролла. Параметры нужно вводить так же, как показано на рисунке, через точку с запятой.
Параметры полосы <strong>прокрутки</strong>
4
Теперь вы обязательно должны протестировать свои доработки. Чтобы полоса прокрутки одинаково смотрелась во всех браузерах, проверьте ее на основных - Internet Explorer, Mozilla Firefox и Opera. Если она не работает на одном из них, вернитесь к первому этапу и исправьте ошибки.
Совет полезен?
Есть простой способ создания полосы прокрутки для web-страницы. Задайте параметр высоты для вашего сайта 75%, тогда скролл появится сам. Правда, его цветовые схемы все равно стоит настроить.
Источники:
  • Сайт для начинающих web-разработчиков
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500