Резиновый дизайн. Основы


«Резиновым дизайном» будем называть структуру веб-страницы, которая автоматически приспосабливается под определенный размер окна браузера пользователя. Такой макет имеет несколько преимуществ:

Среди недочетов можно отметить придирчивость разных браузеров к <резиновому> макету и большая вероятность появления ошибок. В связи с чем повышается сложность верстки веб-страниц.

Перед созданием макета следует продумать следующие моменты: количество колонок (две, три или более), ширина отдельных блоков, будут ли некоторые колонки фиксированной ширины и т.д. Типичные шаги описаны ниже.

Количество колонок

Наиболее распространенным вариантом является наличие на веб-странице двух колонок — одна из них содержит навигацию, а во второй, более широкой, размещается контент. Впрочем, хоть такая схема и представляет собой устоявшуюся традицию, это не значит, что следует придерживаться обязательно ее. Использование всей ширины окна позволяет более эффективно применять площади веб-страницы. Так что можно добавить три, и даже четыре колонки. Это зависит исключительно от имеющегося объема контента. Учтите и обратный эффект — чем больше информации, тем больше рассеивается внимание посетителя, и ему сложнее становится ориентироваться на сайте.

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

 
 

 

 

 
 
 
 

 

 

 

  
 
 
 

 

 

 

    
 
а. две колонки б. три колонки в. четыре колонки

Рис. 1. Варианты размещения колонок

Ширина слоев

Ширина слоев устанавливается в процентном отношении от ширины родительского элемента. Если поместить слой сразу на веб-страницу, то его родителем будет выступать окно браузера (пример 1).

Пример 1. Слой, занимающий всю ширину окна браузера
<html>
<body>

<div style="width: 100%; background: #fc6; border: 1px solid black">
И мышка рассказала следующее. Давным-давно, людям, чтобы достать яркие пригожие яблоки с высоких деревьев, требовалась особая ловкость и умение. Не всякий умел быстро забраться на яблоню (а эти деревья были тогда высокие-превысокие) и суметь полакомиться вкусными плодами. И вот однажды пришел добрый волшебник по имени Нортон, посмотрел он на страдания людей, покачал головой и сделал специальную колотушку, с помощью которой любой человек мог получить плоды с самого возвышенного дерева. Надо было только встать под него, ударить посильней и ловить яблоки в корзину. Колотушка получилась очень красивая - ручка золоченая, а сам набалдашник синий, одно удовольствие пользоваться.
</div>

</body>
</html>


100 процентов означает, что слой займет всю доступную ширину окна. Однако здесь проявляется небольшое различие между браузерами, что же такое <доступная ширина>. Internet Explorer и Netscape используют всю ширину окна, исключая отступы на веб-странице, а Opera учитывает еще вертикальную полосу прокрутки, независимо от того, видна она или нет. В браузере Opera отступ у правого края получается больше, чем тот же отступ слева.

Если один слой находится внутри другого, то родителем для внутреннего слоя выступает внешний, и ширина будет отсчитываться от него. За 100 процентов в этом случае берется ширина контейнера, внешнего слоя (пример 2).

Пример 2. Слой, занимающий всю ширину контейнера
<html>
<body>

<div style="width: 50%; background: #fc3; border: 1px solid black">
<div style="width: 100%">Колотушка получилась очень красивая - ручка золоченая, а сам набалдашник синий, одно удовольствие пользоваться.</div>
</div>

</body>
</html>

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

Отступы на веб-странице

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

Отступы задаются параметрами CSS margin и padding для селектора BODY. Наличия двух атрибутов вместо одного, опять же требуют интересы разных браузеров, margin — IE, а padding — Opera и Netscape. Совмещение разных параметров гарантирует, что показываться веб-страница в разных браузерах будет одинаково.

Управлять отдельными отступами от разных краев экрана можно с помощью параметров margin-top, margin-bottom, margin-right и margin-left, которые соответственно изменяют расстояние от верхнего, нижнего, правого и левого краев окна браузера. Прежде чем их использовать, следует задать нулевое значение для параметров margin и padding (пример 3).

Пример 3. Изменение верхнего отступа от края браузера
BODY {
   margin: 0px;
   padding: 0px;
   margin-top: 10px;
}

Поля

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

Задать поля для всех сторон одновременно можно параметром padding (пример 4).

Пример 4. Установка полей
<div style="width: 100%; background: #fc3; border: 1px solid black; padding: 10px"> ... </div>

Браузеры по разному интерпретируют данный код. Internet Explorer не изменяет общую ширину слоя, а браузеры Netscape и Opera добавляют значение полей к ширине самого слоя, увеличивая тем самым его величину. При ширине слоя 100 процентов это может оказаться критичным, так как приведет к появлению горизонтальной полосы прокрутки и тому, что часть данных не поместится целиком на веб-страницу. Одним из вариантов решения проблемы является использование полей для вложенных в слой элементов, например, параграфа (пример 5).

Пример 5. Установка полей для параграфа
<html>
<head>
<style>
DIV P { padding: 10px; }
</style>
</head>
<body>

<div style="width: 100%; background: #fc3; border: 1px solid black">
<p>Колотушка получилась очень красивая - ручка золоченая, а сам набалдашник синий, одно удовольствие пользоваться.</p>
</div>

</body>
</html>

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


Предыдущая статья     Следующая статья     Список статей