www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > Верстка с помощью слоев > Фиксированный дизайн. Основы

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

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

Термин «фиксированный дизайн» используется для обозначения макета страницы, который создается на основе слоев заданной ширины. Выбор ширины зависит от ориентации на определенное разрешение монитора пользователей. Так, для разрешения 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. Задание высоты слоя

<style type="text/CSS (ЦСС)">
#top {
 text-align: left; /* Выравнивание по левоой стороне */
 width: 750px; /* Ширина слоя */
 background: #800000; /* Цвет фона */
 height: 50px; /* Высота слоя */
}
</style>

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

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

<style type="text/CSS (ЦСС)">
#top {
 padding-top: 15px; /* Отступ сверху */
 padding-bottom: 15px; /* Отступ снизу */
}
</style>

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

Замечание

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

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

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

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

<style type="text/CSS (ЦСС)">
#container {
 width: 750px; /* Ширина слоя */
 margin-right: auto; /* Отступ справа */
 margin-left: auto; /* Отступ слева */
}
</style>

Параметры 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. Изменение верхнего отступа от края браузера

<style type="text/CSS (ЦСС)">
BODY {
 margin: 0; /* Убираем отступы */
 margin-top: 10px /* Устанавливаем отступ сверху */
}
</style>

Цвета

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

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

<style type="text/CSS (ЦСС)">
#menu {
 color: white; /* Цвет контента */
 background: #008080 /* Цвет фона */
}
</style>

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

Статья опубликована: 27.03.2009 Последнее обновление: 01.05.2009
Поиск по сайту
Верстка с помощью слоев
Разделы
Теги по теме

DIV
Элемент DIV является блочным элементом и предназначен для выделения фрагмента объекта с целью изменения вида содержимого.

STYLE
Тег STYLE применяется для определения стилей элементов web-страницы.

CSS (ЦСС) по теме

background
Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту.

color
Определяет цвет контента элемента.

height
Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег IMG. Высота не включает толщину границ вокруг элемента, значение отступов и полей.

margin
Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента.

margin-left
Устанавливает величину отступа от левого края элемента.

margin-right
Задает величину отступа от правого края элемента.

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

padding-bottom
Устанавливает значение поля от нижнего края содержимого элемента.

padding-top
Задает величину поля от верхнего края содержимого элемента.

text-align
Определяет горизонтальное выравнивание контента в пределах элемента.

width
Устанавливает ширину блочных или заменяемых элементов. Ширина не включает толщину границ вокруг элемента, значение отступов и полей.

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект