Создание сайта. Блочная верстка сайта | Урок 9
Сегодня заключительный урок из серии «Блочная верстка сайта». В самом низу мы добавим подвал, он же футер (footer). Я расскажу, для чего он нужен и почему его не стоит игнорировать. А потом нам останется только кой-чего подправить и приукрасить на нашем замечательном веб-сайте.
Подвал или футер (footer) сайта
Подвал, он же «футер» — это весьма важная часть сайта, хотя и мало кто туда добирается, особенно при очень длинных страницах. Там обычно дублируются ссылки на разделы сайта, пишутся копирайты и контактная информация.
Очень часто можно наблюдать такую картину: верхнее горизонтальное меню под «шапкой» практически без изменений дублируется в левой колонке. Выглядит это, по меньшей мере, бестолково. Уж лучше продублировать основные разделы сайта в подвале. Пользы будет несомненно больше.
Футер не должен доминировать над шапкой, но и не должен теряться, делая страницу неуравновешенной. Мы сделаем его немного контрастным по цвету, но небольшой высоты.
Запишем в коде страницы сразу после этого места:
.................
...намечаются до самого утра. При наличии на небе луны — будет весело.
</ul>
</div>
<div class="clearfloat"></div>
Следующий код:
<div id="footer">
<p>Главная | <a href="#">О нас</a> | <a href="#">О летучести</a> | <a href="#">О везучести</a> | <a href="#">Свинки-герои</a> | <a href="#">Подружиццо</a></p>
<p>© PIG.RU, 2007 | All right reserved. | <a href="http://validator.w3.org/check?uri=http://www.pig.ru/">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.pig.ru/style.css">CSS</a> | e-mail: <a href="mailto:piggs@pig.ru" mce_href="mailto:piggs@pig.ru">piggs@pig.ru</a></p>
</div>
Здесь у нас слово Главная не является ссылкой (об этом мы уже говорили), а следом идут обычные ссылки на другие разделы сайта.
Всего в футере два абзаца. В первом ссылки на разделы, а во втором как раз и есть всякие копирайты, ссылка на E-mail и ещё две интересные ссылочки. Вот они уже как раз для форсу бандитского!
Это ссылки на валидаторы — онлайн сервисы, которые проверяют вашу страницу на соответствие стандартам. Ссылки устроены так, что нажимая на них, вы сразу даёте команду этим самым валидаторам проверить ваши странички. И тут же получаете ответ. Это придаёт вашим страничкам солидность и всеобщее наше верстальщицкое одобрямс.
Вот практически и вся страница. Проверьте только чтобы в конце кода у вас было два </div> подряд. Вот так:
..........
href="mailto:piggs@pig.ru" mce_href="mailto:piggs@pig.ru">piggs@pig.ru</a></p>
</div>
</div>
</body>
</html>
Второй </div> — это закрытие области контейнера.
Теперь допишем в листе стилей оставшийся код:
#footer {
background : #665;
color : #fff;
font-size : 70%;
padding : 5px;
clear : both;
}
#footer a {
color : #ff0;
}
#footer a:hover {
color : #f00;
}
#footer p {
padding : 2px;
text-align : center;
}
.clearfloat {
clear : both;
}
Здесь мы задали фон серо-зелёного цвета, цвет текста — белый. А вот нижняя строчка в первом правиле (clear : both;) означает, что с обоих сторон подвала не должно быть ничего. То есть он у нас занимает всю ширину нижней части контейнера.
Ссылки у нас здесь ярко-жёлтые, а в активном состоянии — красные. Для текста мы выбрали размер мельче всех на странице — 70%. Как я и сказал, футер — важная часть, но не на столько, чтобы бросаться в глаза.
Выравнивание для текста мы задали по центру — text-align : center;.
Самое последнее правило как раз служит для блока очистки, заданного атрибутом clearfloat, о котором мы говорили, верстая блок новостей.
Сохраняемся и смотрим. Всё вроде бы хорошо, но как-то неуютно (особенно на белом фоне экрана). Добавим-ка мы всей странице тонкую светло-серую рамку! Откроем лист стилей, найдем вот это место:
#container {
width : 760px;
margin : 0 auto;
}
И добавим следующую строчку:
border : 1px solid #999;
Должно получиться следующее:
#container {
width : 760px;
margin : 0 auto;
border : 1px solid #999;
}
Вот, собственно, и всё!
Заключение
Напоминаю, что наша верстка сайта является «плавающей«. Грубо говоря — элементы на странице располагаются как бы в потоке, занимая свободные места. Поэтому мы и ограничили часть пространства контейнером как коробкой, в которую уложили поочередно все элементы.
Кроме плавающей, конечно же, есть и жесткая привязка элементов к странице. В самом общем случае для этого каждому элементу строго задается местоположение. Например, расстоянием в пикселях от верхней и левой стороны экрана. Но это уже совсем другая история.
Если все же что-то не понятно, задавайте ваши вопросы в комментариях.
Удачи! :)
Блочная верстка сайта | Урок 1
Блочная верстка сайта | Урок 2
Блочная верстка сайта | Урок 3
Блочная верстка сайта | Урок 4
Блочная верстка сайта | Урок 5
Блочная верстка сайта | Урок 6
Блочная верстка сайта | Урок 7
Блочная верстка сайта | Урок 8
Блочная верстка сайта | Урок 9
