Блочная верстка | Урок 9

html2Это заключительный урок из серии “Блочная верстка веб-сайта”. Нам осталось только оформить “подвал” (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.dizweb.ru/pig/index.htm l">XHTML</a> | <a href="http://jigsaw.w3.org/css- validator/validator?uri=http://www.dizweb.ru/pig/style.css">CSS</a> | e- mail: <a href="mailto: Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра. "> Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра. </a></p>

</div>

 

Здесь у нас слово «Главная» не является ссылкой (об этом мы уже говорили), а следом идут обычные ссылки на другие разделы сайта. Всего в футере два абзаца. В первом ссылки на разделы, а во втором как раз и есть всякие копирайты, ссылка на “мыло” и ещё две интересные ссылочки. Вот они уже как раз для форсу бандитского! Это ссылки на валидаторы — конторы, которые проверяют вашу страницу на соответствие стандартам. Ссылки устроены так, что нажимая на них, вы сразу даёте команду этим самым валидаторам проверить ваши странички (которые уже лежат в сети конечно же). И тут же получаете ответ. Сие придаёт вашим страничкам солидность и всеобщее наше верстальское одобрение.

Вот практически и вся страница. Проверьте только чтобы в конце кода у вас было два /div подряд. Вот так:

………. href="mailto: Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра. "> Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра. </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;}

35

.clearfloat {clear : both;}

Здесь мы задали фон серо-зелёного цвета, цвет текста — белый. А вот нижняя строчка в первом правиле (clear: both;) означает, что с обоих сторон подвала не должно быть ничего. То есть он у нас занимает всю ширину нижней части контейнера.

Ссылки у нас здесь ярко-жёлтые, а в активном состоянии — красные. Для текста мы выбрали размер мельче всех на странице — 70%. Как я и сказал, футер — важная часть, но не настолько, чтобы бросаться в глаза.

Выравнивание для текста мы задали по центру.

Самое последнее правило как раз служит для блока очистки, заданного атрибутом clearfloat, о котором мы говорили, верстая блок новостей.

Сохраняемся, смотрим. Всё вроде бы хорошо, но как-то неуютно (особенно на белом фоне экрана). Добавим-ка мы всей странице тонкую светло-серую рамку! Откроем лист стилей, найдем вот это место:

#container { width : 760px; margin : 0 auto;}

И добавим следующую строчку:

border : 1px solid #999;

Должно получиться следующее:

#container { width : 760px; margin : 0 auto;border : 1px solid #999;}

 

Вот, собственно, и всё! Результат можно посмотреть здесь: Рэзультат.

Реальный сайт о парасенгах можно посмотреть здесь — Pigfly.ru. От первоначального макета мало что осталось. Ну, главное идея, а править сайт можно бесконечно. Хотя идея тоже изменилась, и теперь Летающие Парасенги — это сайт О Счастье, Удаче и Богатстве и даже чуточку о Дзэн.

Напоминаю, что наша верстка является “плавающей“. Грубо говоря — элементы на странице располагаются как бы в потоке, занимая свободные места. Поэтому мы и ограничили часть пространства контейнером как коробкой, в которую уложили поочередно все элементы. Кроме плавающей, конечно же, есть и жесткая привязка элементов к странице. В самом общем случае для этого каждому элементу строго задается местоположение, например — расстоянием в пикселах от верхней и левой стороны экрана. Но это уже совсем другая история.

Добавить комментарий


Защитный код
Обновить

Комментарии

Реклама