Web Creation - еженедельный сетевой журнал для вебмастеров

   
Я люблю фреймы. Использование прокрутки как элемента оформления.

Автор: Руслан Кашапов
Сайт: http://www.roolic.com.ua

Глава 2
ИСПОЛЬЗОВАНИЕ ПРОКРУТКИ
КАК ЭЛЕМЕНТА ОФОРМЛЕНИЯ

Классическим способом обернуть появление прокрутки в свою пользу, о котором и пойдет речь в этой главе, является использование такого типа оформления, как "окно в окне".

Данное решение было найдено автором статьи вследствие незначительного напряжения мышц головного мозга. Не исключаю, впрочем, вероятности, что кто-нибудь другой параллельно пришел к аналогичному результату, ведь решение НАСТОЛЬКО простое и нехитрое, что об этом даже неловко писать. Итак...


Пример 3

Разобьем экран на фреймы так, как показано на рисунке 1. Значения X(left) и X(right) одинаковы (хотя в жизни это может быть и по-другому), они изменяются в зависимости от разрешения экрана пользователя. Таким образом, наша композиция логично размещается в центре экрана. Значения X(center), а также Y(top) и Y(buttom) - фиксированы и остаются неизменными при любом разрешении экрана. Получаем рабочее окно в центре экрана фиксированной ширины и переменной высоты.


рис.1.

Если текст (в общем, информация) не помещается в центральном рабочем фрейме (назовем его Body), у правого края последнего появляется нелюбимая всеми прокрутка. На возникший вопрос "Как вписать прокрутку в оформление сайта?" мы и постараемся теперь ответить.

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

В нашем случае необходимо заполнить фоном фреймы (Top и Buttom), имеющие уникальную особенность - фиксированный размер (в пикселях)! Не об этом ли мечтает каждый веб-дизайнер - теперь картинка будет выглядеть абсолютно одинаково во ВСЕХ броузерах при ЛЮБЫХ разрешениях! Мы может вписать элемент оформления с точность до пикселя, и, что самое интересное, этим элементом теперь послужит background, воспроизведя себя внутри фрейма один единственный раз (фреймы Top и Buttom).

Фоновые картинки в каждом фрейме собирают в единое целое некое подобие окна внутри экрана - "Окно в окне". Выбор фоновой картинки для каждого фрейма иллюстрирует рисунок 2.


Рис. 2.

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

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

Что получается в результате - Вы уже можете наблюдать на примере моего сайта. Рабочую версию этого примера можно увидеть здесь (открывается в новом окне). Для ознакомления с исходниками - пример упакован в архив (zip 34.1 K)

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


Пример 4

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

Отличием данного примера от предыдущего есть только дизайн, описывать который особого смысла не имеет. Принцип же построения остается аналогичным. Поэтому Вы можете сразу посмотреть результат (открывается в новом окне), либо скачать оригинальные файлы для ознакомления здесь (zip 30.4 K).

Автор: Руслан Кашапов
Сайт: http://www.roolic.com.ua

 

© журнал принадлежит Web Creation
по всем вопросам обращаться А. Кузьмин