Самым первым и самым естественным желанием создателя сайта, после установки какого-нибудь готового шаблона дизайна, является замена шапки сайта. И это понятно, так как изначальная шапка зачастую не отражает сути сайта, а надпись в шапке так и вообще убога. Однозначно, будем ставить свою.
Замена шапки показана на примере стандартного дизайна №819.
Заходим в Панель Управления сайтом, далее в «Управление дизайном» и открываем «Таблицу стилей (CSS)».
В самых верхних строчках открывшейся таблицы ищем строку, начинающуюся со слова «header». Эта строка как раз и отвечает за шапку сайта. Ищем слово «background» и ссылку на картинку шапки. В моём случае это «/.s/t/802/2.png».
Копируем эту ссылку, добавляем к основному адресу своего сайта и открываем в браузере. В окне видна нужная нам картинка.
Копируем эту картинку и открываем в фотошопе. Далее, сохраняя исходные размеры картинки, можно добавить свою красочную надпись, поменять изначальный фон на другой. Главное, не менять размеры картинки, и тогда при последующей её установке на сайт вас не подстерегут неприятные сюрпризы наподобие искажения картинки.
Отмечу, что в моём случае верхние углы шапки на сайте округлые (они отмечены на рисунке выше), при открытии в фотошопе они сравнялись с общим фоном, так что потребовалось ещё подчистить углы ластиком, чтобы они снова стали округлыми.
Короче, сделали свою шапку в фотошопе, поменяли и добавили всё, что нужно, и сохранили в тот же формат. Я назвал картинку «shapka».
Загружаем эту картинку в Файловый менеджер сайта.
Снова открываем Таблицу стилей (CSS), и находим ту самую строку со ссылкой на шапку сайта. Эту самую ссылку подменяем на свою.
Сохраняем изменения в Таблице стилей, открываем свой сайт.
Почти всё готово, но мешает убогая надпись в шапке «Мой сайт». Убираем её. Для этого снова в Панели Управления открываем «Управление дизайном», затем «Редактирование шаблонов». В открывшемся списке «Глобальных блоков» выбираем «Верхнюю часть сайта».
В открывшейся таблице ищем слова «Мой сайт» и стираем их.
Как должно стать, видно на картинке ниже.
Сохраняем изменения, и снова открываем свой сайт. Если он уже открыт, перезагружаем страницу.
С чувством глубокого удовлетворения взираем на свой шедевр ;-) Шапка готова!
Дополнение от 5.11.2013:
Не так давно uCoz провёл отличное обновление в отношении шапки сайта, внедрив «Конструктор шапки» и увеличив размеры этой самой шапки, благодаря чему стало намного легче подыскивать фоны для шапки и делать её намного красивее.
Нюанс был в том, что обновление касается сайтов с обновлённым дизайном, так как в них переписан код. На сайтах, созданных изначально со старым дизайном, с прежним кодом, обновление не работает. Ниже я подробно расскажу и покажу, как изменить прежний код дизайна своего сайта на новый, и как в новом коде меняется шапка.
Можно, конечно, просто в Панели управления своего сайта поменять дизайн на новый, но тогда пропадут все прописанные в прежнем коде скрипты кнопок «Наверх», Яндекс-Метрики, рекламных блоков, кнопок «Спасибо», и прочих полезностей и украшений. Искать заново эти скрипты, вспоминать, где их нужно вставлять — никуда не годится.
Я поступил так — создал в uCoz ещё один тестовый сайт с нужным мне дизайном, зашёл в Панели управления своего основного сайта и тестового, открыв их на соседних вкладках одного браузера, и начал по очереди, проходя все шаблоны дизайна, копировать коды скриптов из прежнего кода в новый код на соответствующие места.
Затем, после вставки всех нужных кодов во все шаблоны нового кода, я копирую в тестовом сайте все коды по очереди и вставляю их в основной сайт вместо прежнего кода. Сохраняю изменения, и любуюсь на обновлённый сайт ;-) Такая процедура занимает намного меньше времени по сравнению с вставкой кодов с нуля.
Теперь о том, как вставить свою шапку сайта.
Изменить шапку можно в новом юкозовском «Конструкторе шапки». Для этого в админ-баре жмём на «Конструктор», и затем на «Включить конструктор». Откроется такое вот окошко с менюшками на шапке сайта.
Расписывать тут я ничего не буду, так как здесь всё организовано очень просто и понятно, при наведении курсора на значки действий появляются подсказки. Таким образом можно поменять шапку буквально за пять минут. Для начинающих сайтосоздателей — идеальный вариант!
Меня же лично он не удовлетворил: никак не оформляется текст, из-за чего он выглядит убого; под новой шапкой сохраняется первая стандартная, которая иногда мелькает при перезагрузке страниц сайта; нет возможности менять здесь же вставляемый фон, растягивая его либо уменьшая. И это всё понятно — «Конструктор шапки» создан для простейшей замены картинки, а не как полноценный аналог фотошопа ;-)
Поэтому я предпочитаю создавать свою картинку шапки в фотошопе и вставлять её напрямую в код дизайна сайта.
О создании картинки в фотошопе подробно описано выше, единственное, замечу, что теперь это делать намного легче и красивее — не надо тратить время на закругление углов шапки.
А вот о вставке своей шапки через код я расскажу вам поподробнее.
Для начала в той же Панели управления идём в Дизайн сайта, затем кликаем в шаблонах сайта на «Верхнюю часть сайта». Затем можно найти ссылку на картинку шапки самому, а можно воспользоваться Поиском, что намного быстрее. Для этого жмём на значок Бинокля, в открывшемся окошке вставляем в строку «Найти» слово «uCozHeader» (так названа стандартная юкозовская шапка), затем жмём «Найти» первый раз (поиск покажет название блока шапки «uCozHeaderMain», но понятно, что мы ищем не это), и второй раз.
Вот здесь уже Поиск выделяет то, что нужно: «background: url('/uCozHeader.png')». Проверяем на всякий случай по этой ссылке картинку (как, я описывал выше), и меняем ссылку на свою, вставляя ссылку загруженной заранее в Файловый менеджер картинки шапки. Сохраняем изменения.
Дальше идём в «Таблицу стилей (CSS)».
Здесь также либо вручную, либо с помощью поиска-бинокля ищем по слову «uCozHeader» нужные ссылки. Поиск выведет нас на блок того самого «Конструктора шапки». Меняем ссылки картинки шапки на свои и здесь, и также сохраняем изменения.
Как примерно должно стать, видно на картинке выше. Теперь стандартная картинка шапки не будет мелькать при перезагрузке страниц сайта.
Всё, творите, создавайте красивые шапки, вставляйте их на свой сайт и радуйте своих посетителей! ;-)
Источник: http://drevodelatel.ru/publ/sozdanie_sajta_na_ucoz/kak_sdelat_svoju_shapku_sajta_na_ucoz/20-1-0-48 | 
-->
