Создание шапки для сайта

Рассмотрим процесс создания собственной шапки для сайта. Возьмем для примера обычный сайт, сделай на популярной CMS (joomla). К созданию шапки сайта можно приступать уже после установки шаблона. На этой стадии вы уже визуально видите общий облик сайта, можете прикинуть, что нужно изменить, какая именно по цвету и размеру шапка больше подойдет.

Естественно, стандартную шапку придется убрать (ту, которая идет вместе с шаблоном). Но перед этим найдите данный графический файл в папке с сайтом \templates\название_шаблона\images. Этот файл, скорее всего большой по размеру и его сразу визуально будет заметно. Вам будут нужны его размеры – запомните их, а лучше – запишите куда-нибудь.

Далее – создаем новый графический файл шапки в фотошопе. Размеры указываем те же самые, что и у шапки-оригинала, которую мы хотим заменить. Затем все будет зависеть лишь от вашей фантазии, тематики сайта, и от изначальной дизайнерской задумки. Но есть ряд общих советов – шапка должна гармонировать с фоном и контентной областью сайта, она не должна представлять собой яркое нелепое пятно, не связанное ни с одним другим элементом. Общая структура шапки часто следующая – есть фон, есть тематический рисунок и есть название сайта. Можно также добавить какой-нибудь слоган (если сайт является корпоративным), контактные телефоны. Как правило, данная информация пишется относительно мелким шрифтом (по сравнению с названием сайта). Что насчет рисунка, то, к примеру, если сайт посвящен ремонтной тематике, вы можете использовать изображение каких-то строительных инструментов в шапке. Это создаст читателям нужный настрой для изучения материалов сайта.

После того, как сохраните уже готовое изображение для шапки, нужно найти строки в коде, отвечающие за вставку графического файла шапки. Чаще всего картинка вставляется посредством CSS-правил. Нам нужно узнать, как точно называется элемент, в состав которого входит шапка с картинкой. Используем плагин Firebug для Mozilla Firefox. Наведем стрелочку плагина на элемент с картинкой и увидим справа все CSS-правила для него, а также полное название файла CSS и номер строки с данными правилами внутри него.

Удаляем старую шапку из папки images, а вместо нее закидываем новую. С помощью Notepad++ открываем CSS-файл, находим нужные строки. К примеру, background: transparent url("../images/header.jpg") no-repeat. Вместо header.jpg вписываем название новой шапки. Хотя можно новую назвать также и вообще не копаться в CSS, так даже будет проще. В конце обновляем страницу и наслаждаемся результатом.
tel-icq