</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;
}
КРИТЕРІЇ ОЦІНЮВАННЯ
Роботи оцінюються:
8 бали – при повному виконанні завдання згідно вимог та методичних вказівок з недопущенням помилок;
6 бали – якщо у роботі допущено незначні помилки;
3 бал – при частковому виконанні або допущенні значних помилок у ви-конанні завдання;
0 балів – при неповному виконанні, допущенні значних помилок і невід-повідності методичним вказівкам (більше 50%).
ПЕРЕЛІК РЕКОМЕНДОВАНОЇ ЛІТЕРАТУРИ
1. Антоненко В.М., Терейковський І.А., Терейковська Л.О. «Сучасні In-ternet технології. Курс лекцій та лабораторний практикум. Частина I. Основи Web – дизайну». – Ірпінь: Академія ДПС України, 2005. – 231 с.
2. Пасiчнік О.Г., Пасiчнік О.В., Стеценко I.В. Основи веб-дизайну – Вид. група BHV, 2009 – 336 с.
3. Дунаев В.. HTML, скрипты и стили. СПб: БХВ-Петербург, 2011- 816с.
4. Браун М.Р., Хоникарт Д. Использование HTML 4.0 – С-Пб: Вильямс, 1999.
5. Глинський Я.М, Ряжська В.А. Інтернет: Сервіси, HTML; Web-дизайн: Навч.посіб. – Л: Деол, 2003.
6. Паттерсон Л. и др. Использование HTML 4.0. - К.-М.-СПб.: Издат. Дом “Вильямс”. – 1998 – 384c.
7. Спейнаур С., Куэрсиа В. Справочник Web-мастера – К.: BHV, 1997
