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

Пример 1: что видно на экране сразу после загрузки страницы при типичной блоговой верстке. Текст не виден вообще. Фото не помещается полностью.

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

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

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

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

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

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

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

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

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

Давайте посмотрим, как будет выглядеть один и тот же текст, сверстанный в одну и в две колонки.

Нажмите на эту ссылку.