создание и продвижение сайтов

О проекте

Мы рады приветствовать на нашем портале pastukhova.com! Наша компания предлагает комплексные услуги по созданию интернет-сайтов с уникальным дизайном и интерфейсом. Удобные и изящные сайты-визитки и мощный многофункциональные порталы – мы можем всё! На нашем сайте представлены бесплатные готовые шаблоны сайтов, полезные статьи и советы из области сайтостроения, а также последние новости IT-индустрии и интернет-технологий. Веб-дизайн – это целое искусство, в котором есть своим мастера, ценители и бездарности. Последних лучше обходить стороной.

Реклама



webmarket / 

Урок 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;
}

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


Урок 1 | Урок 2 | Урок 3 | Урок 4 | Урок 5 | Урок 6 | Урок 7 | Урок 8 | Урок 9 

email: info@pastukhova.com
copyright © 2003-2007 www.pastukhova.com
Rambler's Top100