A5.ru: конструктор сайтов

A5.ru: создать собственный сайт без лишних затрат и усилий!

Здравствуйте! Продолжаем уроки на тему – Как создать простой сайт. Итогом нашей работы прошлых уроков стало создание шапки сайта и создание блока с контентом.

Нижний колонтитул сайта – Футер сайта

Для того, чтобы завершить работу над страницей нашего сайта, нам осталось добавить на страницу – «Нижний колонтитул сайта», который очень часто называют – «Футер сайта», или «Подвал сайта».

Все выше перечисленные названия равноценны и суть их заключается в том, что нам надо оформить нижнюю часть сайта.

Как правило, Футер сайта, при переходе от одной страницы к другой не меняется. Чаще всего, Футер сайта содержит следующие элементы – год создания сайта, значок копирайтинга, название сайта, имя автора, и так далее.

В нашем случае, точно так же, как и шапка сайта, Футер будет представлять собой таблицу с одной ячейкой. Чтобы гарантировать отступ между таблицей для контента и таблицей футера, сначала на сайт, мы добавим разделительную таблицу.


 

Разделительная таблица

Разделительную таблицу мы уже использовали, когда делали отступ между шапкой сайта и таблицей с контентом.

Откройте страницу сайта визуальным редактором, и добавьте еще одну разделительную таблицу, точно так же как мы это делали в 5 Уроке.

На этот раз, разделительная таблица добавляется ниже таблицы с контентом.

Таблица для футера сайта

Как мы уже отмечали выше, для футера сайта, мы будем использовать таблицу с одной ячейкой. Процедура добавления таблицы для футера, точно такая же как и процедура добавления разделительной таблицы.

А именно, в визуальном html редакторе кликаем инструмент «Таблица», выбираем одну ячейку и задаем параметры.

Что касается ширины таблицы, то ее следует выбрать такой же, как и ширина остальных таблиц. В нашем случае, это 770 пикселов.

Высоту таблицы футера делаем такой, чтобы визуально футер органично вписывался в дизайн сайта.

Если Вы посмотрите видео на этой странице, то увидите, что сначала я задал высоту таблицы для футера равной 15 пикселов. Но затем в процессе подбора, я остановился на высоте таблицы для футера, равной 50 пикселов.

Текст футера сайта

В начале данной статьи я уже писал, что футер сайта, как правило, содержит год создания сайта, знак копирайтинга, название сайта и тому подобную информацию.

Ну что же, я добавляю в футер сайта, следующую стоку: "2012 © Милованов Виктор «Мой первый сайт в Интернет»”.

С добавлением текста в редакторе, я думаю, у Вас проблем не будет. Единственное что я бы здесь показал, так это как добавить знак копирайтинга в текст. Сделаем мы это с помощью визуального редактора NVU.

Кликаем в меню редактора NVU - «Вставка», затем «Буквы и символы», откроется окно вставки символа, в котором нам остается выбрать нужный символ, в данном случае, знак копирайтинга - ©.

 

Футер простого сайта - Урок 8

Добавляем в футер сайта значок копирайта


После выбора символа копирайтинга, кликаем кнопку – «Вставить».


Итак, текс в футер мы добавили. Здесь стоит отметить, что мы создаем простой сайт, поэтому ограничимся в футере сайта строкой текста, который я привел выше.

Как правило, размер шрифта футера сайта выбирается чуть меньше, чем размер шрифта основного контента. Поэтому выделим текст футера и уменьшим его размер.

Сохраним страницу в HTML редакторе NVU. Чтобы оценить, как страница нашего сайта открывается в разных браузерах, последовательно откроем ее в Internet Explorer, Google Chrome, Mozilla Firefox, Opera.

Если страница смотрится нормально, то мы можем считать работу над главной страницей нашего сайта законченной.

Итак, мы с Вами создали простой сайт, состоящий из одной страницы. Но наш сайт работает локально, только на нашем компьютере.

Для того, чтобы наш сайт был доступен через сеть Интернет, его нужно опубликовать. Как это сделать, будет рассмотрено в следующих уроках.

Перейти к Уроку 9: Бесплатный хостинг, обзор

Перейти к Уроку 7: Как добавить картинку на сайт

Автор: Виктор Милованов
 

Как создать сайт без знания HTML

Как создать сайт без знания HTML

Как создать сайт на WordPress

Как создать сайт на WordPress

CSS для начинающих

CSS для начинающих

Скачать без регистрации