намечаются до самого утра. При наличии на небе луны — будет весело.
</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