Урок 9

   Это последний урок. В нем нам только предстоит оформить нижнюю часть странички, подправить несколько моментов и работу можно считать законченной. "Подвал" (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> </div>

Добавим нужный код в правила:

#footer { background: #0066CC; 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;) определяет, что обе стороны подвала должны быть пустыми. Исходя из этого понятно, что "подвал" будет занимать всю ширину контейнера, которая расположена в нижней части. Мы изменили и цвет ссылок, они желтые в неактивном состоянии, если навести курсор - становятся красными. Текст несколько мельче, через то, что нижняя часть, хоть и весома, не должна бросаться в глаза сразу.

   Теперь можно снова сохраниться. При просмотре уже прослеживается четкость и завершенность. Но вид немного подпорчен полностью белым фоном. Для решения проблемы этого однообразия стоит добавить серую рамочку. Это просто. Следует найти вот такой участок кода:

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

   Необходимо просто добавить такую строку:

border: 1px solid #999;

   И мы увидим:

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

   Это все, что Вам необходимо знать на начальном этапе, если Вы решили заняться блочной версткой. Успехов Вам!