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

17.12
2007

Рубрики: Верстка |

Это заключительный урок из серии “Блочная верстка веб-сайта”. Нам осталось только оформить “подвал” (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.html">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:piggs@pig.ru">piggs@pig.ru</a></p>
</div>

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

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

..........
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%. Как я и сказал, футер — важная часть, но не на столько, чтобы бросаться в глаза.

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

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

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

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

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

border : 1px solid #999;

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

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

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

Кстати, в следующем уроке я расскажу как сделать такое симпатичное меню, как сейчас на Парасенгах.

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

Удачи! :)

Вебсовет

1 2 3 4 5 6 7 8 9

Digg it Bookmark it Stumble it add to technorati

Комментарии (3) на запись “Блочная верстка | Урок 9”

  1. Виталий 17.08.2008 22:36

    Здравствуйте Игорь!
    Обращаюсь к Вам за советом на Вебсовет, помогите пожалуйста.
    А дело вот в чем. По Вашей книге я написал код сайта, все получилось хорошо,
    спасибо Вам. Но сайт мой состоит из 12 страниц. Я рассчитывал, что в тот же самый
    #container будет загружаться контент других страниц и слава Богу. Но не тут то было:
    почему то двухколоночные блоки всех страниц ( кроме главной) прижимаются к
    левому краю и что тут делать у меня знаний не хватает. Как писать код для других страниц; для каждой новый #container??? Я попробовал некоторые варианты, но увы…
    Вразумите, пожалуйста
    C уважением Виталий Горьков.

  2. Игорь Квентор 18.08.2008 08:21

    Здравствуйте, Виталий!
    Рад бы помочь, но не видя кода ничего подсказать не могу :) Пришлите мне на мыло ваши файлы, я посмотрю.

  3. Наталия 03.10.2008 23:15

    Статья просто восхитительная! Огромное СПАСИБО!

Трэкбеки

Оставить комментарий




Поиск

Рубрики

Пузомерки


PageRank





Blog Catalog

DMOZ

Каталог дизайнерских блогов