Библиотека программиста

Все, что необходимо начинающему и опытному программисту

Урок 25. Работаем с шириной сайта

Ширина сайта

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

Первый случай остался как наследие времен маленьких мониторов (разрешением 640 на 480 и 800 на 600 пикселов), хотя многие делают такие сайты и до сих пор из соображений совместимости с теми же старыми мониторами. В этом случае достаточно учесть, что у полосы прокрутки и границ браузера есть своя ширина, и сделать сайт шириной 750 пикселов или около того (про разрешение 640 на 480 можно забыть).

Только не все (www.saratov.ru) почему-то понимают, что красивее сайт не станет, если колонка 500-пиксельной ширины будет ютиться слева в верхнем углу на мониторе 1200-пиксельной ширины. С другой стороны, это всегда можно выдать за дизайнерский изыск. Компромиссное решение найти легко: либо располагать колонку с содержимым по центру (на маленьких экранах она просто займет почти весь экран), либо сбоку, но тогда тщательно сопоставить ее с рисунком фона. Фон в любом случае нужно продумать досконально. Особо же узкая колонка будет дизайнерским изыском без иронии.

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

Флэш-ролики являются образцом векторной графики на вебстраницах. Однако их чаще всего помещают как графические вставки фиксированной ширины, например, по центру страницы. Намного реже используются «тянущиеся» флэш-вставки, меняющие размер вслед за размером окна. Тянуться может не весь ролик, а только его часть, например, фон — растягиваться на ширину окна браузера (или на заданное число процентов), а объекты на этом фоне остаются на своем месте и не меняют размер. Приемы подобной работы описаны, например, в статье флэш-технолога Nox Noctis «Создание резиновых (эластичных) флэш-роликов» (http://flash-mx.ru/url_elastic).

С процентными величинами все просто. Достаточно сделать таблицу шириной 100%, в ширины ее ячеек тоже задать в процентах. А для того, чтобы элементы, располагающиеся в этих ячейках, при больших разрешениях экрана не смотрелись разбросанными по экрану, следует хорошо продумать выравнивание элементов и объединяющие компоненты страницы (линии, цвет, фоновые элементы и прочее). Напротив, следует следить, чтобы совокупная ширина элементов одного ряда не превышала, например, 750 пикселов, чтобы на низких разрешениях не возникало горизонтальной прокрутки. По такому принципу, например, построена верстка десятой версии моего сайта.

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

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

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

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

<< Назад         В начало         Далее >>

Библиотека программиста. 2009.
Администратор: admin@programmer-lib.ru