» Редактируем шапку сайта: заголовок, слайдер, меню

Редактируем шапку сайта: заголовок, слайдер, меню

Определим шапку сайта состоящей из заголовка, логотипа, меню и слайдера.

1. Заголовок и логотип
Заголовок выделен в коде страниц тегами H1. Его содержание очень важно для поисковых систем и должно вкратце отображать суть статьи. Поисковые роботы обращают на него особое внимание. Он должен содержать наиболее часто встречающиеся в тексте слова.
Логотип находиться перед заголовком, представляет из себя картинку 100х300px. Размер логотипа можно делать разным по высоте и ширине. Лишняя высота уйдет под слайдер. Лишняя ширина уменьшит размер заголовка. Комбинируйте сами.
В комплекте с шаблоном есть PSD исходник логотипа с открытыми слоями. При наведении на логотип изменяется его вид, код этого эффекта прокомментирован в файле css/style.css

2. Меню сайта.
При добавлении (переименовании) новых страниц не забывайте добавлять их в меню.
Размеры и отображение меню меняется в файле css/style.css - смотрите комментарии в коде файла.
Соблюдайте длину текста меню. Используйте мелкое описание под заголовками меню. Если число пунктов меню превысит шесть, то меню автоматически и аккуратно будет формироваться во второй ряд. В этом случае лучше сделать 12 пунктов для эстетичности.
Для дополнительной навигации можно использовать место справа от слайдера.

Файл с содержимым меню (menu.php) вынесен в папку inc. Вместо него на страницах включен код <? include "inc/menu.php"; ?> 
Это дает возможность вносить изменения в пункты меню один раз, не затрагивая все страницы сайта.

3. Слайдер
Для замены картинок слайдера достаточно заменить изображения в папке images с префиксом (индекс перед названием) home_ на свои. Размеры 500х250px желательно оставить прежними.

Блок слайдера выделен в файл slider.php и лежит в папке inc.
В коде этого файла можно добавить дополнительные картинки в слайдер.
Скопируйте код строки 7 и вставьте его ниже. Есть комментарий в теге alt. Это можно проделать любое количество раз.
Текст заключенный в теги alt, является всплывающим текстом под картинкой слайдера.
Ниже находиться код правой части слайдера. Эту часть шапки сайта можно использовать как дополнительное меню и вставки изображений.
Есть возможно менять скорость смены картинок слайдера в файле js/image_slide.js - смотрите комментарий вверху кода.

Фон шапки сайта меняется подбором градиентов двух цветов в файле css/style.css (См. комментарий в файле). В коде меняете два цвета и наблюдаете плавный переход от одного к другому. Не поддерживается браузером Internet Explorer.

скачать софт