Завершаем создание сайта с нуля

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

Ищем в файле index.html блок » footer». И вставляем внутри блока абзац:

<p>Copyright © 2011.
<a href=»http://motherwolf.ru/» title=»MotherWolf.ru»>Создание, оптимизация и продвижение сайтов</a><br />
<a href=»#»>Главная</a> | <a href=»#»>О сайте</a> | <a href=»#»>Контакты</a></p>

Первая строка будет содержать копирайт и ссылку для перехода на основной сайт  (можно написать имя автора со ссылкой на адрес электронной почты) . Вторая строка будет дублировать навигацию горизонтального меню из шапки сайта.

Форматирование как всегда будем задавать в файле style.css. Чтобы выровнять текст по центру, добавим свойство text-align в инструкцию #footer.

Для абзаца зададим цвет текста и отступ сверху

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

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

В заключение еще небольшое замечание. Чтобы стиль шрифта на странице не отличался при просмотре в различных браузерах (особенно этим страдает IE), его стоит определить для каждого блока <div>, который будет содержать текст. В нашем случае это #topNav, #content , #footer и #sideRight. Можно это сделать внутри инструкций, описывающих каждый из блоков, но я предлагаю сделать это для всех блоков в одной инструкции. Для этого находим инструкцию body и вырезаем из нее строку, задающую шрифт

Эту строку вставляем в инструкцию, общую для всех блоков, содержащих текст.

На мой взгляд, этот прием достаточно удобен при использовании шрифта, заданного для всей страницы (для body), чтобы не дублировать описание в каждом блоке. А в случае добавления нового блока, его имя тоже легко вставить в общую инструкцию.

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

Если вы собираетесь продолжать работу над вашим сайтом, потребуется «оживить» ссылки. Это, в свою очередь, потребует создания страниц, на которые будет осуществляться переход по ссылкам. Любую внутреннюю страницу можно создать все тем же методом div-верстки. Однако особенностью внутренних страниц является их многочисленность и схожесть оформления (часто они отличаются только контентом) и здесь на помощь приходит PHP. Но об этом будет разговор в другом курсе…

Опубликовал 12th Март 2011.
Размещено в Сайт с нуля.
Метки: , , , ,

К записи 5 комментариев

вы забыли напомнить, что Главная | О сайте | Контакты вот эти ссылки поменять нужно на свои

Пожалуй, хотя мне казалось, что это очевидно 🙂

Спасибо за статью

Статья грамотная, только зачем так все подробно расписывать, если можно открыть исходный код любого сайта и скопировать))

Я конечно, мало, что смыслю в посте, но постараюсь осилить.

Нужна помощь?