 |
|
Верстка в три колонки
Лабораторная работа № 8
Позиционирование и свободное перемещение в CSS
Цель: изучение форматирования Web-страниц с примененим возможностей позиционирования и свободного перемещения в CSS
Задание:
1. Создайте Web-страницу по образцу. Следуйте рекомендациям, изложенным ниже (п. 1-10). Необходимые элементы (изображения, банеры и т.д.) найти самостоятельно в Internet.
2. Создайте Web-страницу, с похожим форматированием, но со своим контентом на русском языке. Можно использовать имеющийся, но выполнить перевод с помощью on-line переводчиков (например, translate.google.com). Очень приветствуется применение Ваших приемов форматирвания.
3. Обе страницы представить на защиту.
Постановка задачи
Если не принимать в расчет верхний навигационный блок, рекламный блок и "Совет дня", то мы имеем дело с версткой в три колонки. Так как центральная колонка будет содержать контент, то от ее высоты будет зависеть высота всего документа. Понятно, что высота всех трех колонок должна быть одинакова. Обратите также внимание на отступы шириной 9px слева и справа от центральной колонки.
Верстка в три колонки
Создадим простую трехколоночную верстку с промежутками между колонками, где высоту всего документа будет задавать центральная колонка. Начнем с четырех слоев и соответствующих им стилевых таблиц.
1. Сперва зададим нужные поля и отступы для тела документа. Обратите внимание, что задаем для него нулевой отступ, потому что в Opera он по умолчанию не равен нулю. Также задаем #FFF в качестве цвета фона.
body { margin:9px 9px 0 9px; padding:0; background:#FFF;}
2. Теперь мы определим наш первый div (назовем его "level0"). Для него мы только лишь укажем цвет фона – это будет цвет нашей левой колонки.
#level0 { background:#FC0;}
3. Вложим второй слой внутрь нашего level0 и назовем его "level1".
#level1 { margin-left:143px; padding-left:9px; background:#FFF;}
В этом новом слое указали место для левой колонки и отступ от нее. Цвет отступа задается цветом фона для слоя.
Вложим в "level1" слой под названием "level2"
#level2 { background:#FFF3AC;}
С помощью этого слоя мы задаем цвет фона для правой колонки. Теперь левая колонка и отступ отчетливо видны.
Для правой колонки мы по уже описанной методике добавляем в слой "level2" слой "level3".
#level3 { margin-right:143px; padding-right:9px; background:#FFF;}#main { background:#CCC;}
Слой "main" добавили исключительно для того, чтобы сделать цвет фона для центральной колонки отличным от цвета других блоков и отступов между ними.