Статьи
Особенности верстки веб-страниц
Хотя прародителем верстки веб-страниц является верстка полиграфических материалов, между ними есть одно важное различие. Любая полиграфия вроде буклета, листовки или брошюры печатается на листах установленного размера и в пределах одного тиража имеет лишь незначительные или даже незаметные глазу различия. Веб-страница же запускается на компьютере под управлением клиентской программы называемой браузером. Понятно, что операционная система, ее настройки и собственно сам браузер отличается от компьютера к компьютеру. Из чего напрашивается банальный вывод, что один и тот же документ сайта по-разному отображается у каждого пользователя.
Напрашивается вопрос, можно ли сделать так, чтобы веб-страница отображалась одинаково? Учитывая, сколько придется принять во внимание разных неоднозначных факторов, следует сказать, что нет, нельзя. Поэтому задача верстки веб-страниц формулируется так: сформировать документ, который бы корректно отображался с небольшими различиями на основных платформах и в браузерах. Корректно означает, что соблюден исходный замысел автора, воплощен требуемый дизайн документа, и он показывается в браузере без ошибок.
Чтобы реализовать указанную задачу надо понимать, как вообще происходит верстка веб-страниц и соизмерять свои идеи с их исполнением. Далее описаны некоторые особенности, которые имеют большое значение при верстке документов сайта.
Ширина документа
Изначально разработчику сайта ширина окна браузера пользователя неизвестна, поскольку она может меняться в самых широких пределах. Ширина зависит от разрешения монитора, длины его диагонали, размера окна и еще некоторых варьируемых данных. Иными словами предугадать ее заранее простыми средствами не представляется возможным. С учетом этой особенности утвердилось два способа верстки: фиксированный и «резиновый».
Фиксированный макет
В данном случае действуем от обратного и устанавливаем общую ширину макета жестко заданной и равной определенной величине. Если взять некоторую обобщенную статистику посетителей сайтов и посмотреть, какое разрешение монитора они преимущественно используют, то узнаем, что это 800 х 600 и 1024 х 768 пикселов. Получается, что ширина монитора пользователей в основном 800 и 1024 пиксела. Возьмем за ориентир 800 пикселов, тогда общая ширина макета за вычетом вертикальной полосы прокрутки и рамки браузера окажется 770–790 пикселов. На этот размер ориентируемся и устанавливаем ширину макета, например 770 пикселов.
Преимущество такой схемы следующее. Раз общая ширина макета точно известна, то мы можем легко подгонять под нее дизайн и делать изображения уже известной ширины. В целом подобная верстка приближается к верстке печатного буклета, и в том и другом случае ширина носителя информации строго задана, за счет чего верстка хоть частично, но упрощается.
Недостаток, который инкриминируют этому виду верстки фактически один — недостаточно эффективное использование свободной площади. Действительно, для монитора с большо-о-о-й диагональю или высоким разрешением экрана документ будет смотреться по-другому, чем на предполагаемых 800 пикселах. На рис. 1 показано, как выглядит макет в таком случае.
Рис. 1. Макет фиксированной ширины с размещением по левому краю
Справа появляется широкая пустая полоса, размер которой зависит от разрешения экрана пользователя и диагонали его монитора. Чтобы хоть как-то уменьшить пустое пространство, макет обычно помещают по центру окна браузера (рис. 2).
Рис. 2. Макет фиксированной ширины с размещением по центру
«Резиновый» макет
Этот вид макета основывается на том, что в качестве одной из единиц измерения выступают проценты. Общая рабочая ширина окна браузера — 100%, и колонки макета в сумме не должны ее превышать, поэтому для удобства, как правило, везде применяют процентную запись. При изменении размеров окна происходит переформатирование данных страницы, чтобы они вписались в новую ширину (рис. 3).
Рис. 3. Веб-страница занимает всю отведенную ширину
Этот вид верстки набирает все большую популярность и практически все известные сайты выбрали именно его в силу того, что эффективно задействуется вся площадь веб-страницы. Но следует сразу отметить некоторые особенности и недостатки присущие «резиновой» верстке.
- Хотя веб-страница и подстраивается под ширину окна браузера, при достижении некоторой величины читать текст становится неудобно — строки слишком длинные и глаза устают по ним бегать. Впрочем, браузер можно свернуть в окно, подобрав его комфортный размер.
- Верстать «резиновый» макет сложнее, чем аналогичный, но фиксированной ширины. Это связано с тем, что приходится учитывать множество дополнительных факторов и знать некоторые приемы верстки. К тому же, популярные браузеры неоднозначно трактуют некоторые параметры и в них «резиновый» макет может отображаться по-разному. Говоря проще, знать о правилах верстки надо больше.
- Любой макет имеет некоторую минимальную ширину, при достижении которой веб-страница «рассыпается» или появляется горизонтальная полоса прокрутки. Например, если в документ вставлен рисунок шириной 600 пикселов, то при уменьшении окна до этой величины браузер начнет отображать полосу прокрутки.
- «Резиновый» дизайн характеризуется активным использованием фоновых изображений, которые по горизонтали собираются без швов встык. Действительно, изменить без потери качества ширину рисунков не получится, а вот «подложить» под них фон — всегда пожалуйста.
Высота документа
Исторически сложилось, что пролистывание большого документа на компьютере происходит сверху вниз. Для удобства листания предназначены вертикальные полосы прокрутки, клавиатурные комбинации, колесо прокрутки мыши. А вот перемещение по горизонтали происходит не так удобно, поэтому горизонтальной полосы прокрутки быть не должно. Из чего следует, что веб-страница должна вписываться в окно браузера по ширине, но никак не по высоте, которая может изменяться в очень широком диапазоне. На рис. 4 видно, что реальная высота документа не ограничена рамками браузера, но в окне показывается лишь часть страницы.
Рис. 4. Отображение документа в окне браузера по высоте
В принципе, чем больше на странице информации, и, следовательно, больше высота документа, тем сложнее находить нужные данные. Поэтому текст структурируют, разбивают на блоки и каждому из них дают свой заголовок, чтобы взгляду читателя было за что зацепиться.
Также следует учесть, что объем статей на сайте может достаточно сильно различаться между собой. При этом будет меняться и высота страницы, поэтому следует заранее побеспокоиться о том, чтобы макет отображался без ошибок, несмотря на различное значение высоты.
Объекты веб-страницы прямоугольны
Все объекты на веб-странице имеют прямоугольную форму. Этот простой постулат не всегда согласуется с тем, что мы видим в действительности, поэтому следует сделать пояснения. В отличие от традиционной верстки (речь идет о полиграфических материалах), где в документ можно вставлять любые объекты, в том числе и векторные фигуры произвольной формы, верстка веб-страниц имеет ряд ограничений. К числу ограничений относится и то, что добавляемые объекты прямоугольны. Причем это относится к их форме, но не к содержимому, благодаря чему требуемый нам дизайн можно конструировать с помощью набора изображений. На рис. 5 показана картинка весьма неправильной формы. Но из-за того, что фон у этого рисунка совпадает с фоном веб-страницы, исходная прямоугольность изображения не видна.
Рис. 5. Изображение на рисунке может иметь произвольную форму
Однако стоит добавить вокруг рисунка рамку, как становится понятно, что изображение
все-таки прямоугольно (рис. 6). Например, если включить обтекание картинки
текстом, то он будет обходить ее именно по границе рамки.
Рис. 6. Но сам рисунок остается прямоугольным
Данная особенность породила некоторые техники связанные с версткой, которые перечислены далее.
Активное использование рисунков
Рисунки не только применяются для иллюстрации текста, но и выполняют на сайте много различных ролей, например, используются для создания привлекательного дизайна, служат распоркой между ячейками таблицы, создают градиентные заливки, фоновые изображения и т.д.
Разрезание изображения на фрагменты
Один рисунок может занимать слишком большую исходную площадь. Разрезав его на прямоугольники, получим замечательный конструктор, в котором одни фрагменты изображения допускается заменять текстом, другие анимацией, а третьи модифицировать «на лету». Таким образом, имеем в своем распоряжении средство для обхода прямоугольной природы изображений, ведь в «склеенном» рисунке может недоставать некоторых фрагментов, уголков, например.
Применение фонового рисунка
Фоновый рисунок удобен тем, что он может заполнять всю отведенную ширину или высоту под блоком. Это позволяет создавать линии или другие декоративные элементы, которые привязываются к ширине или высоте текста и не зависят от размеров окна. К тому же поверх фона можно накладывать текст, что также расширяет возможности по дизайну веб-страниц.
Картинки вместо текста
Если средства верстки имеют определенные ограничения, то почему бы не создать текст в графическом редакторе и не вставить его в качестве картинки или Flash? Это гарантирует, что текст сохранит свой вид и начертание несмотря ни на какие внешние условия. Однако здесь имеется и оборотная сторона — рисунки занимают больший объем, чем рядовой текст, их сложнее править, они не индексируются поисковыми машинами, их показ пользователи могут отключить. В общем, недостатков масса, поэтому изображения на сайте хотя и применяют вместо текста, но достаточно ограниченно. Например, для заголовка сайта.