Фиксированный дизайн. Основы

Термин «фиксированный дизайн» используется для обозначения макета страницы, который создается на основе слоев заданной ширины. Выбор ширины зависит от ориентации на определенное разрешение монитора пользователей. Так, для разрешения 640х480 пикселей размер таблицы следует брать не более 619 пикселей. Такая ширина получается за счет вычитания из значения 640 ширины вертикальной полосы прокрутки и границ окна браузера. Для всех пользователей, сайт, построенный на таком макете, будет отображаться корректно, но при больших разрешениях оказывается слишком много пустого места. Поскольку наиболее популярным среди пользователей Internetа является разрешение 800x600, разработчики сайтов ориентируются именно на него и используют общую ширину слоев 700-770 пикселей. И хотя тенденция идет в сторону увеличения разрешения, появление наладонных компьютеров, у которых количество пикселей как раз составляет 640х480, говорит о возврате на тот же этап.

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

Рис. 1

Рис. 1. Типичная модульная сетка при фиксированном дизайне

Числовые обозначения, используемые в данном рисунке: 1 — заголовок с нашего сайта; 2 — левый слой, обычно содержит элементы навигации; 3 — правый слой, содержит информационное наполнение страницы; 4 — «подвал», самый низ web-страницы, в нем, как правило, размещают контактную информацию и различные кнопки.

Для разработки макета показанного на рис. 1, следует продумать некоторые предварительные моменты — какова будет общая ширина всех элементов; где будет размещаться макет — по центру страницы или у левого края; какие цвета и шрифты будут использоваться и т.д. Шаги, которые предстоит сделать перед написанием тегов, описаны далее.

Ширина слоев

Вначале следует определить общую ширину изобразительных элементов web-страницы. Как упоминалось выше, этот параметр определяет сам дизайнер, на основе предварительного сбора данных о будущих пользователях с нашего сайта. Хотя большинство дизайнеров устанавливают ширину, что имеется ввиду «от фонаря», исходя из собственного удобства. Вот и в примере 1, используя этот же принцип, ширина всех слоев выбрана 750 пикселов.

Итак, вся ширина известна, теперь надо поделить ее на две части. Слой, обозначенный цифрой 2 (рис. 1), отводится под меню, ширина его должна быть минимальна, но достаточна для комфортного чтения контента. Сделаем ее круглым числом, например, 200 пикселов. Все остальное будет занимать контент.

Высота слоев

Высота слоя меняется динамически в зависимости от его содержимого. Если хочется установить высоту слоя самостоятельно, можно применить параметром height и задать высоту в пикселах, процентах или других единицах CSS (ЦСС). Учтите, что при таком подходе выравнивание содержимого слоя происходит всегда по его верхнему краю, поэтому слишком большую высоту задавать не стоит (пример 1).

Пример 1. Задание высоты слоя

Аналогично, высоту слоя можно менять и отступами, изменяя значение padding-top и padding-bottom (пример 2). Но этот способ менее универсальный.

Пример 2. Задание высоты слоя с помощью отступов

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

Замечание

Если высота содержимого слоя превышает его высоту, заданную с помощью параметра height, то браузер Файер фох оставляет размеры слоя неизменными, а содержимое накладывает поверх него.

Выравнивание по центру

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

Пример 3. Выравнивание по центру в Файер фох

Параметры margin-right и margin-left со значением auto задают выравнивание слоя по центру web-страницы. В этом же селекторе указываем и общую ширину всех слоев.

Выравнивание макета web-страницы по правому края, как правило, никогда не делается — используется выравнивание либо по центру, либо по левоой стороне.

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

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

Отступы задаются параметрами CSS (ЦСС) margin и padding для селектора BODY. Наличия двух атрибутов вместо одного, опять же требуют интересы разных браузеров, margin — Internet Эксплорер, а padding — Опера и Файер фох. Совмещение разных параметров гарантирует, что показываться web-страница в разных браузерах будет одинаково.

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

Пример 4. Изменение верхнего отступа от края браузера

Цвета

CSS (ЦСС) имеет несколько опций для определения цвета контента и фона слоя. Параметр color указывает цвет контента в слое, а background — цвет фона (пример 5).

Пример 5. Изменение цвета

Цвет фона для слоя menu в примере указан темно-зеленым, а контента — белым.

Статья опубликована: 27.03.2009

Последнее обновление: 01.05.2009