Высота документа

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

Рис. 2.8. Отображение документа в окне браузера по высоте

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

Также следует учесть, что объем статей на сайте может достаточно сильно различаться между собой. При этом будет меняться и высота страницы, поэтому следует заранее побеспокоиться о том, чтобы макет отображался без ошибок, несмотря на различное значение высоты.

Объекты веб-страницы прямоугольны

Все объекты на веб-странице имеют прямоугольную форму. Этот простой постулат не всегда согласуется с тем, что мы видим в действительности, поэтому следует сделать пояснения. В отличие от традиционной верстки (речь идет о полиграфических материалах), где в документ можно вставлять любые объекты, в том числе и векторные фигуры произвольной формы, верстка веб-страниц имеет ряд ограничений. К числу ограничений относится и то, что добавляемые объекты прямоугольны. Причем это относится к их форме, но не к содержимому, благодаря чему требуемый нам дизайн можно конструировать с помощью набора изображений. На рис. 2.6 показана картинка весьма неправильной формы. Но из-за того, что фон у этого рисунка совпадает с фоном веб-страницы, исходная прямоугольность изображения не видна.

Рис. 2.6. Изображение на рисунке может иметь произвольную форму

Однако стоит добавить вокруг рисунка рамку, как становится понятно, что изображение все-таки прямоугольно (рис. 2.7). Например, если включить обтекание картинки текстом, то он будет обходить ее именно по границе рамки.

Рис. 2.7. Но сам рисунок остается прямоугольным

Данная особенность породила некоторые техники связанные с версткой, которые перечислены далее.

Активное использование рисунков

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

Разрезание изображения на фрагменты

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