Термин «фиксированный дизайн» используется для обозначения макета страницы, который создается на основе слоев заданной ширины. Выбор ширины зависит от ориентации на определенное разрешение монитора пользователей. Так, для разрешения 640х480 пикселей размер таблицы следует брать не более 619 пикселей. Для всех пользователей, сайт, построенный на таком макете, будет отображаться корректно, но при больших разрешениях оказывается слишком много пустого места. Поскольку наиболее популярным среди пользователей Интернета является разрешение 800x600, разработчики сайтов ориентируются именно на него и используют общую ширину слоев 700-770 пикселей. И хотя тенденция идет в сторону увеличения разрешения, появление наладонных компьютеров, у которых количество пикселей как раз составляет 640х480, говорит о возврате на тот же этап.
При фиксированном дизайне блок с материалом размещается обычно у левого края или по центру экрана. Последний вариант предпочтительней, тогда не так заметны широкие поля вокруг при больших разрешениях монитора (рис. 1).
|
||||||
Числовые обозначения, используемые в рисунке: 1 — заголовок сайта; 2 — левый слой, обычно содержит элементы навигации; 3 — правый слой, содержит информационное наполнение страницы; 4 — <подвал>, самый низ веб-страницы, в нем, как правило, размещают контактную информацию.
Для создания макета подобного рис. 1, следует продумать некоторые предварительные моменты — какова будет общая ширина всех элементов; где будет размещаться макет — по центру страницы или у левого края; какие цвета и шрифты будут использоваться и т.д. Шаги, которые предстоит сделать перед написанием кода, описаны ниже.
Итак, вся ширина известна, теперь надо поделить ее на две части. Слой, обозначенный цифрой 2 (рис. 1), отводится под меню, ширина его должна быть минимальна, но достаточна для комфортного чтения текста. Сделаем ее круглым числом, например, 200 пикселов. Все остальное будет занимать контент.
Аналогично, высоту слоя можно менять и отступами, изменяя значение padding-top и padding-bottom (пример 2).
Пример 2. Задание высоты слоя с помощью отступовВ этом случае высота слоя складывается из верхнего и нижнего отступов и высоты содержимого, которое будет располагаться по центру вертикали.
Параметры margin-right и margin-left со значением auto задают выравнивание по центру веб-страницы для браузеров Opera, Netscape, Mozilla. В этом же селекторе указываем и общую ширину всех слоев.
Таким образом, универсальный стиль для всех браузеров, определяющий центрирование по горизонтали, будет следующий (пример 3).
Пример 3. Выравнивание по центруВыравнивание макета веб-страницы по правому края, как правило, никогда не делается — используется выравнивание либо по центру, либо по левому краю.
Отступы задаются параметрами CSS margin и padding для селектора BODY. Наличия двух атрибутов вместо одного, опять же требуют интересы разных браузеров, margin — IE, а padding — Opera и Netscape. Совмещение разных параметров гарантирует, что показываться веб-страница в разных браузерах будет одинаково.
Управлять отдельными отступами от разных краев экрана можно с помощью параметров margin-top, margin-bottom, margin-right и margin-left, которые соответственно изменяют расстояние от верхнего, нижнего, правого и левого краев окна браузера. Прежде чем их использовать, следует задать нулевое значение для параметров margin и padding (пример 4).
Пример 4. Изменение верхнего отступа от края браузераЗадать поля для всех сторон одновременно можно параметром padding (пример 5).
Пример 5. Поля для слоя menuВеличину отдельных полей можно варьировать параметрами padding-left, padding-right, padding-top и padding-bottom, которые соответственно изменяют поля слева, справа, сверху и снизу слоя.
Цвет фона для слоя menu в примере указан темно-зеленым, а текста — белым.