Виды верстки web-страниц

В языке HTML существуют два способа задавать размеры элементов страницы: в относительных величинах, например, в процентах от предоставленного элементу пространства, и в абсолютных, например, в пикселях.

Примечание: На самом деле пиксель — величина тоже в некоторой степени относительная. Текст, написанный шрифтом 12 п, будет разной величины при различных разрешениях монитора.

Если размер (ширина/длина) элемента задается в процентах, например, 100 %, то такой элемент занимает всю предоставленную ему площадь и будет расширяться или сужаться до тех пор, пока позволяет обрамляющий элемент. Такую верстку (или дизайн) называют «резиновой».

Если размер элемента задается в абсолютных величинах (в пикселях), то в большинстве случаев его изменить нельзя. Такую верстку называют жесткой, или фиксированной. Основное среднестатистическое
разрешение монитора у пользователей интернета на 2010 год считается равным 1024x768, поэтому размеры элементов определяют исходя из этого разрешения. В действительности их размер чуть меньше, т.к. учитывается ширина полосы прокрутки и элементов окна браузера.
Смешанный способ, верстки позволяет содержимому растягиваться на всю длину и ширину окна браузера, но конечный размер должен быть не меньше определенного предела (800x600).
Иногда в одну из ячеек таблицы с основным содержимым помещают изображение шириной около 800 пикселей, чтобы меньше этого размера сайт «не скручивался».

Теперь подробнее о плюсах и минусах этих способов с точки зрения пользователя.

Плюсы фиксированной верстки: +

• если композиция сайта проработана очень тонко и малейшее нарушение положения элементов может ее разрушить, то при жесткой верстке этого не произойдет;

• страница одинаково приемлемо выглядит при всех разрешениях монитора;

• содержимое страницы ведет себя гораздо более предсказуемо.

Минусы фиксированной верстки: -

• при разрешениях, меньших, чем то, под которое адаптирована верстка, необходимо горизонтальное прокручивание страницы. При больших разрешениях возникают неэстетичные пустоты;

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

Плюсы «резиновой» верстки: +

• страницы гибко подстраиваются практически под любое разрешение монитора;

• пустого места не остается, следовательно, поместится больше информации, не будет лишних пустот;

• всегда возможно использование элементов с абсолютным позиционированием (при условии, что они будут выровнены влево).

Минусы «резиновой» верстки: -

• поведение содержимого в принципе непредсказуемо, текст и картинки переносятся как получится и где получится, подстраиваясь под размеры окна;

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