В сайтостроении используется такой термин, как резиновая верстка. Попробуем разобраться, что он означает.

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

Для решения этих задач веб-дизайнер еще на этапе проектирования должен выбрать тип верстки сайта. Какой же она может быть для данного ?

Виды верстки сайта можно классифицировать по способу реализации и способу отображения. По способу реализации верстка может быть:

• Табличная;
• Блочная;
• Комбинированная.

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

А вот способ отображения важен для посетителя сайта. По этому признаку верстка бывает:

• Фиксированная (статическая);
• Резиновая (тянущаяся);
• Гибридная;
• Респонсивная (адаптивная).

В этой статье подробнее остановимся на резиновой верстке сайта, ее достоинствах и недостатках.

При резиновой верстке сайт масштабируется в зависимости от ширины окна браузера. Такой способ верстки появился в связи с ростом размеров мониторов и их разрешения. Первые массовые мониторы имели разрешение 640*480, потом активно начали внедряться мониторы с разрешением 800*600 и 1024*768. Возникла необходимость делать сайты, ширина которых менялась с изменением ширины окна браузера, так как сайты с фиксированной шириной не всегда адекватно отображались на различных мониторах. С одной стороны, разработчик сайта стремится использовать всю площадь больших экранов для размещения информации, с другой стороны, ему нужно учесть возможности тех пользователей, которые имеют старые мониторы с небольшим разрешением. В настоящее время размеры мониторов выросли еще больше, и никого не удивишь разрешением 2048*1152.

Технически выполнить резиновую верстку можно как с помощью таблиц, так и используя блочную структуру. Используется она и на сайтах, работающих на движках WordPress, который применяется для создания , и других. Как это сделать, в одной статье не объяснить, для этого существуют различные курсы .

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

Но зато пользователь может сам решать, в каком виде просматривать сайт. С помощью браузера он может настраивать нужную ему ширину.

Web-страница состоит из элементов различных типов, которые масштабируются по-разному. Например, текстовые блоки можно легко растягивать по горизонтали. Именно в них содержится обычно большая часть информации, а, значит, при резиновой верстке экран будет максимально информативен. Но растягивать бесконечно страницу нельзя, ее будет трудно читать. Считается, что оптимальная ширина текста должна составлять около 45 символов. Глаз должен охватывать всю строку целиком, тогда при чтении утомляемость будет минимальной. Если же текст на странице резинового сайта растянуть на всю ширину монитора размером, например, 27”, то при чтении придется даже поворачивать голову. В этом случае текст можно располагать колонками, но такое решение возможно, если контент состоит из отдельных не связанных друг с другом коротких блоков. Если же расположить колонками большой непрерывный текст, его придется прокручивать сначала вниз, а потом – вверх, на начало следующей колонки, что неудобно для пользователя.

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

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

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

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

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

Эти противоречия можно решить, используя так называемую «полурезиновость», когда растяжение происходит до определенных пределов.

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

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

Для освоения возможностей резиновой верстки сайта рекомендую единственный в своем роде курс «5 техник резиновой верстки».

Если вас заинтересовала статья, или вам есть, что добавить, оставьте комментарий.

Физика Падения

Любите ли вы физику? В Физике Падения вам нужно будет проделать серию успешных физических экспериментов. Вам нужно будет расположить имеющиеся детали так, чтобы шарик попал в вентилятор. Чем быстрее вы все организуете, тем больше очков получите. Ну что же, желаем удачи!

Влад Мержевич

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

Рис. 5.17. Трёхколоночные макеты

Здесь символ процентов (%) означает, что ширина колонки задана в процентах от ширины макета, px - ширина колонки указана в пикселах, а знак бесконечности (∞), что колонка занимает оставшееся пространство. Несмотря на обилие разных макетов, принципы их построения остаются одинаковыми и включают два основных способа: позиционирование и плавающие элементы. Также можно воспользоваться таблицами для создания колонок одинаковой высоты.

Использование позиционирования

Для управления положением слоёв относительно родительского элемента необходимо для родителя установить свойство position со значением relative , а дочерним элементам, которые формируют колонки, значение absolute . Структура кода для первых четырёх макетов будет одинаковой и представлена в примере 5.13.

Пример 5.13. Две колонки в пикселах или три в процентах

Здесь колонки пронумерованы по порядку, т.е. колонка 1 располагается слева, колонка 2 по центру, а колонка 3 справа.

У позиционирования есть определённый недостаток, который ограничивает применение этого метода - при добавлении подвала он будет скрыт под колонками. Это связано с тем, что у слоя layout нет высоты как таковой, поэтому он не «толкает» слой с подвалом вниз. Если подвал непременно требуется на странице, следует воспользоваться методом построения колонок, основанным на плавающих элементах. Ещё этот метод не работает в IE6 из-за наличия в нём ошибок.

Для макета № 1, в котором ширина первой колонки резиновая, а остальных фиксирована, стиль будет следующим (пример 5.14).

Пример 5.14. Макет № 1

Header { background: #D5BAE4; } .layout { position: relative; /* Относительное позиционирование */ } .layout DIV { position: absolute; /* Абсолютное позиционирование */ } .col1 { background: #C7E3E4; /* Цвет фона */ left: 0; /* Положение левого края */ right: 300px; /* Положение правого края */ } .col2 { background: #E0D2C7; width: 200px; /* Ширина колонки */ right: 100px; /* Сдвигаем влево на ширину колонки 3 */ } .col3 { background: #ECD5DE; width: 100px; right: 0; }

У колонок с заданной шириной стоит свойство width , а их положение слева или справа задаётся соответственно свойством left или right . Резиновая ширина оставшейся колонки строится после одновременного добавления left и right , значения которых совпадают с шириной фиксированных колонок.

Макеты № 2 (пример 5.15) и № 3 (пример 5.16) построены на том же принципе.

Пример 5.15. Макет № 2

Header { background: #D5BAE4; } .layout { position: relative; } .layout DIV { position: absolute; } .col1 { background: #C7E3E4; width: 100px; } .col2 { background: #E0D2C7; left: 100px; right: 200px;} .col3 { background: #ECD5DE; width: 200px; right: 0; }

Пример 5.16. Макет № 3

Header { background: #D5BAE4; } .layout { position: relative;} .layout DIV { position: absolute; } .col1 { background: #C7E3E4; width: 100px; } .col2 { background: #E0D2C7; width: 200px; left: 100px; } .col3 { background: #ECD5DE; left: 300px; right: 0; }

Макет № 4, в котором ширина всех колонок задана в процентах имеет некоторые нюансы. Если требуется одинаковая ширина всех колонок, её можно задать дробно (33.33%), но браузер Opera не умеет работать с дробными значениями процентов, поэтому в нём между колонками появятся «дыры» (рис. 5.18).

Рис. 5.18. Ширина колонок, заданная в дробных процентах

В подобных ситуациях следует перейти на неравные доли, к примеру, 33%, 34%, 33%, как показано в примере 5.17.

Пример 5.17. Макет № 4

Header { background: #D5BAE4; } .layout { position: relative;} .layout DIV { position: absolute; } .col1 { background: #C7E3E4; width: 33%; } .col2 { background: #E0D2C7; left: 33%; width: 34%; } .col3 { background: #ECD5DE; right: 0; width: 33%; }

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

Оставшиеся макеты, в которых две колонки из трёх резиновые, представляют особую группу, потому что их можно трактовать по-разному. Так, ширина одной колонки указывается в пикселах, другой в процентах от ширины макета, а ширина оставшейся вычисляется автоматически. На рис. 5.19 показаны разные подходы к вычислению ширины колонок на примере макета № 5.

Рис. 5.19. Ширина двух резиновых колонок

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

Первый и второй вариант легко реализуется аналогично коду с двумя колонками в пикселах. Только вместо ширины в px указываем %. В примере 5.18 приведён стиль макета № 5 с первой колонкой заданной в процентах.

Пример 5.18. Макет № 5. Ширина второй колонки вычисляемая

Header { background: #D5BAE4; } .layout { position: relative;} .layout DIV { position: absolute; } .col1 { background: #C7E3E4; width: 50%; } .col2 { background: #E0D2C7; left: 50%; right: 200px; } .col3 { background: #ECD5DE; right: 0; width: 200px; }

Стиль макета № 5 с вычисляемой первой колонкой показан в примере 5.19.

Пример 5.19. Макет № 5. Ширина первой колонки вычисляемая

Header { background: #D5BAE4; } .layout { position: relative;} .layout DIV { position: absolute; } .col1 { background: #C7E3E4; left: 0; right: 200px; margin-right: 50%; } .col2 { background: #E0D2C7; width: 50%; right: 200px; } .col3 { background: #ECD5DE; width: 200px; right: 0; }

Первой колонке нельзя задать ограничение справа через свойство right , поскольку значение будет равно 50%+200px, в CSS2 таких вычисляемых значений нет. Поэтому применим фокус - ограничим первый слой справа шириной 200px через right и сдвинем его влево на ширину второй колонки 50% с помощью margin-right . Слой у нас абсолютно позиционированный, поэтому такие махинации никак на ширине не скажутся.

Третий вариант с двумя резиновыми колонками требует наличия дополнительного слоя, назовём его rubber , относительно которого будет задаваться ширина колонок (пример 5.20).

Пример 5.20. Макет № 5. Ширина двух колонок в процентах

Построение макета № 6 аналогично макету № 5, поэтому останавливаться на нём не будем. Что касается макета № 7, то для него существует вариант, который может вызвать трудность. Это касается того случая, когда требуется сделать ширину левой и правой колонки вычисляемыми и равными между собой. Для этого ширину первой и третьей колонки следует сделать равной 50% (рис. 5.20).

Рис. 5.20. Макет № 7 с равными по ширине колонками

Чтобы осталось место под вторую колонку, воспользуемся свойством margin-right для первой колонки и margin-left для третьей. Значением этих свойств будет половина ширины второй колонки. Так, если она равна 200px, то получится margin-right : 100px (пример 5.21).

Пример 5.21. Макет № 7. Ширина резиновых колонок одинакова

Header { background: #D5BAE4; } .layout { position: relative;} .layout DIV { position: absolute; } .col1 { background: #C7E3E4; left: 0; right: 50%; margin-right: 100px; } .col2 { background: #E0D2C7; width: 200px; left: 50%; margin-left: -100px; } .col3 { background: #ECD5DE; left: 50%; right: 0; margin-left: 100px; }

Напрямую свойством width пользоваться нельзя, поскольку добавление margin только увеличит ширину, а не уменьшит, как нам требуется. Поэтому ширина формируется одновременно заданными свойствами left и right . С позиционированием второй колонки возникают сложности в указании значения left или right , поскольку оно будет равно 50%-200px. Так что устанавливаем положение левого края на 50% (left : 50% ), а затем колонку целиком сдвигаем влево на половину её ширины через свойство margin-left (margin-left : -100px ).

Поскольку ширина некоторых колонок вычисляется автоматически, рекомендуется сделать ограничение по минимальной ширине макета, добавив свойство min-width для селектора BODY . Тогда ширина колонок не станет уменьшаться при достижении заданного предела.

BODY { min-width: 800px; /* Минимальная ширина макета */ }

Значение min-width зависит от макета и содержимого страницы и обычно подбирается опытным путём.

Использование плавающих элементов

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

Построение колонок происходит с помощью свойства float в сочетании со свойствами margin и width . В зависимости от выбранного макета меняется и порядок колонок в коде, вначале всегда следуют слои, к которым добавляется float .

Макет № 1. Резиновая первая колонка

Ширина второй и третьей колонки указывается в пикселах, а их положение через свойство float со значением right . Для первой колонки также требуется задать свойство margin-right со значением равным суммарной ширине остальных колонок (пример 5.22).

Пример 5.22. Макет № 1

Макет № 2. Резиновая средняя колонка

Ширина первой и третьей колонки задана в пикселах, а их положение - через свойство float со значением left для первой колонки и right для третьей. Средняя колонка, чтобы она сохраняла свой вид, содержит универсальное свойство margin , задающее отступ слева и справа (пример 5.23).

Пример 5.23. Макет № 2

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Макет № 3. Резиновая третья колонка

Положение первой и второй колонки указывается через свойство float со значением left , для третьей колонки нужно установить отступ слева (margin-left ) на суммарную ширину остальных колонок (пример 5.24).

Пример 5.24. Макет № 3

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Макет № 4. Ширина всех колонок задана в процентах

Для построения этого макета подойдёт множество вариантов, основанных на предыдущих макетах, только вместо пикселов следует указать проценты. Ещё один способ показан в примере 5.25, где используется только свойство float и width .

Пример 5.25. Макет № 4

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Макет № 5. Ширина двух колонок резиновая

На рис. 5.19 было продемонстрировано, что макет № 5, у которого две резиновые колонки, можно трактовать по-разному.

1. Ширина первой колонки указана в процентах от ширины макета, третьей колонки в пикселах, а средняя колонка занимает оставшееся место.
2. Ширина второй колонки указана в процентах от ширины макета, третьей колонки в пикселах, а первая колонка занимает оставшееся место.
3. Суммарная ширина двух резиновых колонок принимается за 100%, и ширина колонок указывается в процентах от этой величины.

Ширина средней колонки вычисляемая

Здесь ширина первой колонки указывается в процентах, а её положение через свойство float со значением left , для третьей колонки ширина задана в пикселах, а значение свойства float как right . Для средней колонки остаётся только установить отступы слева и справа на ширину колонок (пример 5.26).

Пример 5.26. Макет 5.1

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Ширина первой колонки вычисляемая

Это наиболее хитрый макет, поскольку для первой колонки её ширина напрямую не указывается. Но чтобы ограничить контент необходимо для свойства margin-right указать значение совмещающее проценты и пикселы. В CSS2, как уже говорилось, подобное задать нельзя, поэтому добавим внутрь слоя col1 ещё один слой с именем wrap и добавим отступ каждому из этих слоёв. Одному в процентах, другому в пикселах (пример 5.27).

Пример 5.27. Макет 5.2

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Ширина двух колонок в процентах

В этом макете общая ширина резиновых колонок принимается за 100%, поэтому нам потребуется дополнительный слой, относительно которого будет отсчитываться ширина внутренних колонок. Этот слой с именем rubber совместно со слоем col3 работает как двухколоночный макет, а внутренние слои col1 и col2 выстраиваются по горизонтали за счёт применения свойства float (пример 5.28).

Пример 5.28. Макет 5.3

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Макеты 6, 7 и их разновидности строятся по тому же принципу, что и макет № 5, за исключением макета № 7, в котором ширина левой и правой колонки резиновая и равна между собой.

Вначале готовим основу, указываем порядок слоёв в HTML-коде.

Col1 { width: 50%; float: left; } .col2 { width: 200px; float: left; } .col3 { width: 50%; float: right; }

Это ещё не всё, слои пока никаких колонок не формируют и выстраиваются совершенно не подходящим для нас способом. Требуется сместить вторую колонку влево на половину её ширины (margin-left : -100px ) и заставить третью колонку встать на своё место. Для этого надо увеличить её ширину так, чтобы она была равна или больше, чем 50%+100px (половина второй колонки). Лучше всего подойдёт свойство margin-left с отрицательным значением, после этого колонки будут созданы. Есть ещё некоторые нюансы. Крайние колонки состыкованы между собой, что хорошо заметно, когда их высота превышает высоту средней колонки (рис. 5.21).

Рис. 5.21. Состыкованные колонки

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

Пример 5.29. Макет № 7

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Поля и границы в трёхколоночном макете

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

Div { /* padding влияет на ширину */ width: 200px; padding: 10px; } div { /* padding не влияет на ширину */ position: absolute; left: 20px; right: 20px; padding: 10px; } div { /* padding влияет на ширину */ float: left; width: 50%; padding: 10px; } div { /* padding не влияет на ширину */ margin-right: 50%; padding: 10px; }

В тех колонках, где padding или border требуется, но их добавление приведёт к «ломке» макета, можно воспользоваться вложенным слоем и установить необходимые свойства для него.

В этом примере ширина слоя заданная как 200 пикселов меняться не будет, но поля и рамка будут добавлены.

Таблица в качестве колонок

Таблицу удобно использовать для простого и быстрого создания колонок одинаковой высоты. Такая быстрота достигается несколькими вещами. Во-первых, структура кода для любого макета остаётся одинаковой, колонки в коде, как в случае с float , свой порядок никогда не меняют. Во-вторых, ширина ячеек вычисляется автоматически исходя из их содержимого, поэтому достаточно указать ширину нужных колонок, а оставшиеся подстроятся под общую ширину таблицы. В примере 5.30 показан макет № 1 сделанный на таблице.

Пример 5.30. Макет № 1

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Колонка 1

Колонка 2

Колонка 3

Добавление свойства padding к селектору TD отменяет действие атрибута cellpadding тега

и добавляет поля к содержимому ячеек. При этом сама ширина колонок никак не изменится.

Макет № 2

Header, .footer { background: #D5BAE4; } .layout { width: 100%;} .layout TD { padding: 5px; vertical-align: top; } .col1 { background: #C7E3E4; width: 100px; } .col2 { background: #E0D2C7; } .col3 { background: #ECD5DE; width: 200px; }

Макет № 3

Header, .footer { background: #D5BAE4; } .layout { width: 100%;} .layout TD { padding: 5px; vertical-align: top; } .col1 { background: #C7E3E4; width: 100px; } .col2 { background: #E0D2C7; width: 200px; } .col3 { background: #ECD5DE; }

Макет № 4

Header, .footer { background: #D5BAE4; } .layout { width: 100%;} .layout TD { padding: 5px; vertical-align: top; } .col1 { background: #C7E3E4; width: 33%; } .col2 { background: #E0D2C7; width: 34%; } .col3 { background: #ECD5DE; width: 33%; }

В макете 6.1 ширина первой колонки установлена в пикселах, третьей в процентах, а средняя колонка занимает оставшееся место.

Макет № 6.1

Header, .footer { background: #D5BAE4; } .layout { width: 100%;} .layout TD { padding: 5px; vertical-align: top; } .col1 { background: #C7E3E4; width: 200px; } .col2 { background: #E0D2C7; } .col3 { background: #ECD5DE; width: 40%; }

Остальные макеты с помощью таблицы строятся аналогично, меняется только значение свойства width . Для макета № 7, в котором ширина крайних колонок резиновая и равна между собой имеются некоторые хитрости, так что на нём остановимся подробнее.

Ширина для крайних колонок устанавливается равной 50%, а для средней колонки она задаётся в пикселах. Чтобы все размеры соблюдались к таблице необходимо добавить свойство table-layout со значением fixed .

Layout { width: 100%; table-layout: fixed; } .col1 { width: 50%; } .col2 { width: 200px; } .col3 { width: 50%; }

Хотя суммарная ширина ячеек превышает ширину таблицы, никакого расширения и смещения таблицы не произойдет, как это случилось бы с блочными элементами. Как в таких случаях говорится, это не баг, это фича!

В примере 5.31 приведён полный код макета № 7.

Пример 5.31. Макет № 7

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Он встал под дерево и ждет, И вдруг граахнул гром. Летит ужасный бармаглот, И пылкает огнем. Раз-два, раз-два! Горит трава, Взы-взы - стрижает меч, Ува! Ува! И голова Барабардает с плеч. Льюис Кэрролл, перевод Дины Орловой, рисунки Джона Тенниела

Результат примера показан на рис. 5.22.

Рис. 5.22. Колонка по центру макета

При создании сайта в нашей студии, большое внимание уделяется качественной верстке веб-страниц. Больше информации о верстке сайта в нашей студии я писал в другой статье. Сегодня же я хотел бы рассказать о видах верстки - резиновой и фиксированной. Каждый день мы пользуемся разработками зарубежных интернет-гигантов, таких, как Google, Microsoft и Facebook. Мы сидим за АйМаками и АйБиЭм-совместимыми ПК и используем компьютерные стандарты, созданные американскими учеными. Тем не менее, именно благодаря нам появилось сделанное почти «на коленке», с огромным недостатком финансов, практически на голом энтузиазме, весьма заметное в мировом масштабе сообщество www-ресурсов, именуемое чаще всего Рунетом (РУсский интерНЕТ). Хотя никакой четкой границы между «нашими» и «ненашими» реально не существует, так как Сеть интернациональна по определению, отечественным сайтам свойственен ряд характерных особенностей, выделяющих их на общемировом фоне.

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

Один из аспектов, который неизбежно упоминается в связи с отечественным веб-дизайном – это «резиновая» верстка (разметка). В Рунете стандартом считается верстка, при которой дизайн занимает 100% экрана, независимо от разрешения, в то время как западные сайты чаще всего сделаны по жесткой сетке и зафиксированы по ширине.

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

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

Оба подхода имеют свои индивидуальные особенности, плюсы и минусы. В данной статье я попробую на примерах объяснить мотивы выбора разработчиками верстки того, либо иного типа.

Фиксированная верстка

Сайт с фиксированной версткой имеет неизменяющуюся ширину независимо от разрешения экрана пользователя. Наиболее часто используемая ширина составляет 960, либо 1000 пикселей – размер, который гарантирует пользователям с разрешением экрана 1024?768 px (наиболее распространенный случай) и выше возможность нормального просмотра сайта без раздражающей горизонтальной прокрутки.

Статистика использования экранных разрешений в 2011 году:

1280×1024 – 14,8%
1280×800 – 14,4%
1024×768 – 13,8%
1366×768 – 10,1%
1440×900 – 9,9%
1680×1050 – 9,2%
1920×1080 – 6,2%
1920×1200 – 4,5%
1600×900 – 2,5%
1152×864 – 1,5%
1360×768 – 1,3%
800×600 – 0,6%

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

1. Ширина фиксируется для всех браузеров, так что возникает меньше проблем с картинками, формами, видео и другим контентом, имеющим фиксированную ширину;
2. Фиксированная верстка препятствует излишнему растяжению текстовых строк сайта по ширине;
3. Фиксированные макеты верстаются быстрее и легче, что очень важно на срочных проектах;
4. Верстку с фиксированной шириной часто проще стилизовать, в зависимости от применяемых эффектов.

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

• Вид страницы может значительно ухудшиться, если пользователи будут вручную увеличивать размер шрифта в браузере (как правило, этой функцией пользуются слабовидящие). Ввиду того, что ширина текстового блока зафиксирована и не изменяется пропорционально размеру шрифта, в дизайне страницы возникают искажения.
• При разрешениях, меньших, чем тот, на который рассчитан макет, в браузере появится горизонтальная прокрутка. Хотя разрешения меньше 1024×768 px на персональных компьютерах – уже большая редкость, для распространенных сегодня смартфонов и нетбуков это обычное дело.
• Фиксированный макет будет оставлять много пустого пространства у пользователей с большим разрешением экрана;
• Относительно небольшая ширина сайта с фиксированной версткой часто ограничивает в возможностях размещения публикуемых материалов.

Хорошим примером фиксированной верстки является недавно законченный нами сайт по аренде недвижимости

Резиновая верстка

Резиновая верстка создается без определенного размера оболочки, но с использованием процентных свойств. Другими словами, 100% ширина сайта займет все свободное пространство экрана монитора.

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

• Качественная верстка может адаптироваться практически к любому разрешению экрана, что делает её универсальной;
• Хорошо спроектированные резиновые макеты могут исключать появление горизонтальной прокрутки на меньших разрешениях;
• Сайт с резиновой версткой может максимально полно использовать пространство монитора.

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

• Избыточность элементов сайта, вмещающихся на больших мониторах, может запутать пользователей и сделать сайт слишком перегруженным;
• Если не используются ограничения для ширины текстовых блоков сайта, то их становится проблематично читать;
• Разработчик должен иметь возможность провести тестирование правильного отображения сайта на всех возможных размерах экранов;
• Дизайнеру в некоторых случаях приходится рисовать несколько вариантов макета для разных разрешений;
• Так как резиновая верстка более сложная, она требует более тщательной адаптации под различные браузеры.

Наиболее популярные веб-браузеры, под которые, прежде всего, проводится тестирование:

Примером резиновой вестки является наш сайт Transit production

Также, к резиновым относятся гибридная и эластичная верстки. Гибридная – это наиболее распространенный вид верстки, который включает в себя как фиксированные, так и относительные размеры элементов – некий компромисс между фиксированной и резиновой html-версткой. Большинство веб-мастеров используют именно этот вид верстки при разработке сайта.

При использовании эластичной верстки размер основного контейнера и других (важных) элементов задается в специальных единицах – em. Em прямо пропорциональны размеру текста или шрифта. Следовательно, при увеличении размера текста на странице, размеры разделов, заданные в em, увеличатся пропорционально.

Все типы резиновой верстки более требовательны к времени и навыкам разработчиков, но практически всегда позволяют максимально эффективно использовать пространство монитора и предоставлять пользователю удобный и универсальный интерфейс. Тем не менее, перед началом проектирования сайта нужно определиться – оправданы ли усилия для «резины», и действительно ли подача информации в таком виде для данного случая будет наиболее эффективна?

• Тема: HTML&CSS
• Время ролика: 00:22:38
• Cложность: средняя
• Прикладные программы: Dreamweaver CS4

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

Техника 2. Создание резинового меню, используя списки

• Тема: HTML&CSS
• Время ролика: 00:16:13
• Cложность: средняя
• Прикладные программы: Dreamweaver CS4

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

Техника 3. Выстраиваем элементы позиционированием

• Тема: HTML&CSS
• Время ролика: 00:23:39
• Cложность: средняя
• Прикладные программы: Dreamweaver CS4

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

Техника 4. Центрирование элемента переменной ширины

• Тема: HTML&CSS
• Время ролика: 00:11:45
• Cложность: средняя
• Прикладные программы: Dreamweaver CS4

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

Техника 5. Выравнивание блоков по ширине резинового блока

• Тема: HTML&CSS
• Время ролика: 00:16:00
• Cложность: средняя
• Прикладные программы: Dreamweaver CS4

Иногда возникает задача, когда нужно расположить несколько блоков по всей ширине родительского блока. То есть первый блок должен быть у самого левого края, последний блок должен быть у правого края. А расстояния между остальными элементами чтобы было одинаковым. Такого несложно добиться при верстке макета фиксированной ширины. Но мы усложним задачу и решим ее в уроке для резинового блока.

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

Ранее рассмотренная нами фиксированная модель превращается в резиновую всего-на-всего заменой пикселной ширины блока