Создание HTML-сайта

Создать подвал сайта (footer)

Как я и обещал на прошлом занятии, сегодня мы займемся подвалом нашего сайта. Вообще-то, «footer» в переводе с англ. означает «нижний колонтитул» (ну и словечко придумали, не к ночи будет упомянуто), но наши переводят его как «подвал». И я с ними полностью согласен! Вспомните, что находится в подвале современного дома? Правильно! Всякое разное служебное оборудование. В подвале сайта мы тоже можем поместить разную служебную информацию, которая не всем может быть интересна, но нам нужна. В подвале можно установить счетчики и информационные кнопки; ссылки, места под которые вы продали на биржах ссылок; информацию об условиях копирования вашего контента; ссылки на ресурс авторов дизайна; свой e-mail; дату создания сайта и другие данные.

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

После того, как вы создали таблицу в footer-Е, передвиньте границы столбцов влево и вправо так, чтобы крайние столбцы стали по 25% от ширины таблицы, а центральный соответственно в 50%. В «Коде» это будет выглядеть примерно так:

Теперь в левом столбце поместите выражение «© Copyright 2011», а в правом свой e-mail. В центральном столбце мы установим счетчики тогда, когда наш сайт будет опубликован в Интернете. А пока у вас должно получиться примерно следующее:

По аналогии с шапкой сайта создадим стили для подвала. Пусть наш текст в footer-Е будет размером в 12 пикселей, обычным, выполненным шрифтом verdana белого цвета.

Не забываем прописать в коде файла index.html «class=" footer _p"» в теге абзаца (тег Р) и выровнять текст по центру. В результате в коде страницы у нас должно получиться:

Теперь, если все сохранить и посмотреть в браузере, то можно увидеть примерно следующее:

Сравните свои таблицы стилей и индексные файлы с моими. Так они выглядят на сегодняшний день. Специально публикую их в форме удобной для копирования (тонкий намек для тех, у кого ничего не получилось, но очень хочется).

Файл index.html

Файл style.ccs