Прежде чем приступить к изменению шапки сайта, сделанного на okis.ru, скачайте файлы для дальнейшей работы.
Итак, как поменять шапку сайта на okis.ru? Для начала разархивируйте файл, который Вы скачали и найдите там шапку сайта, которая имеет название shapka.png. Нам нужно её загрузить на наш сайт. Как это сделать? Зайдите в пункт «Загрузка фото» в панели управления сайта.
Здесь Вы можете загружать изображения на сайт.
Прежде чем загружать шапку нашего коктейльного сайта, обязательно снимите галочку с «Уменьшить размер изображение до 500 х 500 px», так как шапка шире чем 500 px. Галочку сняли, теперь жмем «Обзор», затем находим файл shapka.png и нажимаем «Открыть».
Далее нажмите на кнопку «Загрузить изображение на сервер»
После того, как Вы загрузили изображение, ниже Вы увидите ссылку, где находится шапка нашего сайта.
Эту ссылку мы будем использовать при замене старой шапки на новую.
Зайдите в редактор CSS -> Редактировать CSS. На этот раз мы воспользуемся вспомогательными кнопками. Нажмите на кнопку «Шапка сайта» и введите тот адрес ссылки на картинку с шапкой, который показан в админке Вашего сайта, после чего нажмите «Сохранить».
Нажмите «Обновить». Вы увидите, что в поле, где пишутся все стили, появился новый код:
div.art-header-jpeg {background: url(/ПУТЬ_К_ФАЙЛУ/shapka.png);}
Это и есть стили для шапки сайта.
В моём случае путь к файлу такой: /img/cocktail60/shapka.png
Значит в моей админке написан следующий код:
div.art-header-jpeg {background: url(/img/cocktail60/shapka.png);}
У Вас же ПУТЬ_К_ФАЙЛУ к шапке другой, поэтому Вы копируете ту ссылку, которая показывается у Вас в админке.
Обновите главную страницу сайта, и Вы увидите, что шапка поменялась. Но есть небольшой недочёт, который мы сейчас исправим — если Вы приглядитесь, то увидите, что в верхних уголках немного вылезает контур шапки, который не вписывается в наш дизайн.
Дело в том, что во всех шаблонах сайта okis.ru, где есть закругленные углы, шапка состоит из двух частей: из основной картинки, которую мы загрузили и из контура шапки. Давайте поменяем контур шапки. Зайдите снова в пункт «Загрузка фото» в панели управления сайта и загрузите там файл shapka_kontur.png. Перед загрузкой контура шапки не забудьте снять галочку с «Уменьшить размер изображение до 500 х 500 px». В админке нет кнопки «Контур шапки», поэтому мы добавим стили вручную для данного элемента. В редакторе CSS с новой строчки нам нужно прописать следующий код:
div.art-header-png {background: url(ПУТЬ_К_ФАЙЛУ/shapka_kontur.png);}
В моем случае путь к файлу контура шапки такой: /img/cocktail60/shapka_kontur.png
Поэтому я прописываю следующий код:
div.art-header-png {background: url(/img/cocktail60/shapka_kontur.png);}
Не забывайте о том, что Ваш путь к файлу отличается от моего.
Сохраните изменения.
Если Вы обновите наш сайт, то увидите, что синих уголков больше не наблюдается.
Теперь Вы знаете, как поменять шапку сайта в конструкторе сайтов ОКИС. В следующем уроке Вы узнаете, как поменять низ сайта на okis.ru.
Урок№5. Как поменять низ сайта на okis.ru
Урок№6. Как поменять фон сайта на okis.ru
Урок№7. Как поменять контур сайта на okis.ru
Урок№8. Всё, что нужно знать новичку об ОКИС.РУ (OKIS.RU)
Изменение дизайна на ОКИС.РУ (OKIS.RU). Общий список CSS-кодов
Дополнительные уроки по созданию и ведению сайта на OKIS:
Урок№9. Как организовать общение на сайте, сделанном на okis.ru
Урок№10. Как активировать сайт на okis.ru с помощью WebMoney
Урок №11. Учимся добавлять новую страничку на okis.ru и работать с содержимым страницы
