Совет 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-разработчиков

Совет 3: Как изменить полосу прокрутки

Сейчас иметь свой сайт уже не роскошь, а скорее необходимость. Это одно из самых эффективных, а главное доступных средств рекламы. Даже новичку под силу сделать простой сайт. Что касается порталов более профессионального уровня с интерактивными элементами, расширяющими их возможности, например, такими как полоса прокрутки, то требуется чуть больше знаний, чтобы создать что-то подобное.
Инструкция
1
Принимайте правильное решение. Полоса прокрутки должна появиться на вашем сайте только в том случае, если это продиктовано необходимостью создать пользователю дополнительное удобство, а не исключительно вашими желаниями. Создайте макет страницы, на которой вы собираетесь разместить полосу прокрутки. Выберите для нее подходящее место.
2
Сделайте жесткую привязку скролла (так еще могут называть полосу прокрутки) к какому-то конкретному элементу страницы. Это может быть текстовое поле, представляющее собой ниспадающий список. Рассчитайте место «парковки» полосы в пиксельном и процентном соотношении. Это вовсе не будет трудно, если страница четко структурирована.
3
Добавьте стандартный код полосы прокрутки между тегами body. Если вы не знаете о чем идет речь, скачайте любой учебник по html верстке. Там будет четко описано, как написать такой код. Лучше всего для таких случаев иметь под рукой готовые шаблоны аналогичных сайтов, чтобы можно было взять оттуда какие-то отдельные элементы программного кода, что значительно упрощает жизнь. Итак, вы нашли код. Расположите его либо непосредственно в самом коде страницы либо приложите его в таблицу css, что значительно проще, но в том случае, если вы меняете не одну, а все страницы сайта.
4
Задайте цветовые параметры полосе, иначе она будет стандартного серого цвета, который, скорее всего, не впишется в дизайн сайта. Эти параметры задаются в такой же очередности, как и для любого другого графического элемента страницы. Протестируйте скролл в нескольких браузерах, например, Мозиле, Опере и Эксплорере. Если в каком-то из них он не работает, исправьте ошибки программного кода.
5
Задайте параметр высоты сайта равным 75%, тогда программный код для скролла будет внесен автоматически. Но вам все равно нужно изменить полосу прокрутки, а конкретно - ее графические параметры. Это описано в предыдущих пунктах.
Источники:
  • как изменить scroll

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

Многие пользователи программы Adobe Photoshop пользуются возможностью без швов заполнить рисунком выделенную область. Для этого применяется Текстура (Patterns). В программе есть стандартные набор текстур, но при желании можно установить и другие узоры.
Инструкция
1
Для начала вам необходимо скачать понравившиеся текстуры из интернета. Существует множество сайтов, на которых вы сможете это сделать совершенно бесплатно. Скачанные файлы имеют расширение *.pat. Сохранять их лучше в специально созданную папку, чтобы потом было удобнее устанавливать.
2
Теперь откройте программу Adobe Photoshop, выберите инструмент «Заливка» (Paint Bucket Tool). Затем в строке атрибутов, в окне «Заливка» (Fill) выберите пункт «Узор» (Pattern).
3
Откройте панель со стандартными текстурами и нажмите справа на кнопку со стрелочкой. Откроется меню, внизу которого имеется список загруженных узорами. Попробуйте нажать на понравившееся название, согласитесь с заменой и посмотрите какие текстуры загрузятся.
4
Чтобы загрузить скачанные вами текстуры, нажмите на кнопку «Загрузить узоры…» и укажите путь к нужной папке. Выберите файл и нажмите «Загрузить».
5
Опустив полосу прокрутки вниз, вы увидите загруженные узоры. Выбирайте нужный и за работу!
Видео по теме
Полезный совет
Нажимая на кнопку «Загрузить узоры…», вы добавляете текстуры к уже имеющимся, а кнопкой «Заменить узоры…» - меняете их на выбранные.

Для того чтобы восстановить первоначальную картину, следует нажать кнопку «Восстановить узоры…».
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500
к
Honor 6X Premium
новая премиальная версия
узнать больше