Урок№4. Как поменять шапку сайта на okis.ru

Интересное

Прежде чем приступить к изменению шапки сайта, сделанного на okis.ru, скачайте файлы для дальнейшей работы.

Итак, как поменять шапку сайта на okis.ru? Для начала разархивируйте файл, который Вы скачали и найдите там шапку сайта, которая имеет название shapka.png. Нам нужно её загрузить на наш сайт. Как это сделать? Зайдите в пункт «Загрузка фото» в панели управления сайта.

Урок№4. Как поменять шапку сайта на okis.ru: Зайдите в пункт «Загрузка фото» в панели управления сайта

Здесь Вы можете загружать изображения на сайт.

Урок№4. Как поменять шапку сайта на okis.ru: Здесь Вы можете загружать изображения на сайт

Прежде чем загружать шапку нашего коктейльного сайта, обязательно снимите галочку с «Уменьшить размер изображение до 500 х 500 px», так как шапка шире чем 500 px. Галочку сняли, теперь жмем «Обзор», затем находим файл shapka.png и нажимаем «Открыть».

Загрузка шапки на сайт

Далее нажмите на кнопку «Загрузить изображение на сервер»

После того, как Вы загрузили изображение, ниже Вы увидите ссылку, где находится шапка нашего сайта.

Урок№4. Как поменять шапку сайта на okis.ru: Ссылка на шапку сайта

Эту ссылку мы будем использовать при замене старой шапки на новую.

Зайдите в редактор CSS -> Редактировать CSS. На этот раз мы воспользуемся вспомогательными кнопками. Нажмите на кнопку «Шапка сайта» и введите тот адрес ссылки на картинку с шапкой, который показан в админке Вашего сайта, после чего нажмите «Сохранить».

Урок№4. Как поменять шапку сайта на okis.ru: Ссылка на шапку сайта

Нажмите «Обновить». Вы увидите, что в поле, где пишутся все стили, появился новый код:

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 и работать с содержимым страницы

Перейти в начало к урокам по созданию сайта на OKIS>>>

35 comments

  • Цитата:
    Нашла в библиотеке кодов, что прописывать. Вот только теперь картинка не влезла в шапку, как исправить? Ссылка на сайт: castricumvirgo.okis.ru.

    Для данного шаблона Вам нужна шапка 986×420 px. Вы же загрузили слишком большую шапку – 1920x619px. Поэтому и не умещается.

  • Цитата:
    Здравствуйте. У меня такая проблема. Когда я захожу в раздел «Редактировать CSS», то справа, как показано у вас на примерах, у меня отсутствуют вспомогательные кнопки. Что делать?

    Кнопки должны быть, возможно, вы заходите не в «Редактировать CSS», а в «шаблон», который находится рядом с данном разделом. Кликните точно по ссылке «Редактировать CSS», и вы перейдёте в нужный раздел. Либо попробуйте через другой браузер зайти в админку. Может быть ошибка у браузера.

  • Нашла в библиотеке кодов, что прописывать. Вот только теперь картинка не влезла в шапку, как исправить? Ссылка на сайт: castricumvirgo.okis.ru.

  • Здравствуйте. У меня такая проблема. Когда я захожу в раздел «Редактировать CSS», то справа, как показано у вас на примерах, у меня отсутствуют вспомогательные кнопки. Что делать?

  • Цитата:
    Помогите, пожалуйста, у меня не получается поменять шапку и низ сайта.

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

    Чтобы поменять низ сайта следуйте инструкциям, представленным на странице https://webcaum.ru/kak-pomenyat-niz-sajta-sdelannogo-na-okisru.html

    Сначала внесите изменения на сайт, а потом, если не получится, я посмотрю, что не так.

  • Помогите, пожалуйста, у меня не получается поменять шапку и низ сайта.
    Я не знаю, как подвинуть название страниц влево, чтобы увеличить шрифт названия страниц.
    Мой сайт business.okis.ru

  • Цитата:
    Спасибо за подсказку. Я изменила размеры шапки на 988 х 230, но грузится картинка с предыдущими размерами (272 х 230), Я почистила куки, но это не помогло. Кстати, если гружу картинку через Фото (загрузить фото ) упорно появляются коктейли, загружается правильная шапка только через файлы (загрузить файлы). Но только не те размеры. Подскажите, пожалуйста, как это исправить.
    Спасибо.

    Попробуйте переименовать файл, который Вы загружаете, и всё у Вас получится.

  • Цитата:
    Добрый день! Подскажите, как сделать шапку по ширине?

    Я так понимаю, Вы уже сами сделали шапку по той ширине, которая нужна была.

  • Добрый день! Подскажите, как сделать шапку по ширине?
    вот мой сайт izuminka.okis.ru

  • Спасибо за подсказку. Я изменила размеры шапки на 988 х 230, но грузится картинка с предыдущими размерами (272 х 230), Я почистила куки, но это не помогло. Кстати, если гружу картинку через Фото (загрузить фото ) упорно появляются коктейли, загружается правильная шапка только через файлы (загрузить файлы). Но только не те размеры. Подскажите, пожалуйста, как это исправить.
    Спасибо.

  • Цитата:
    Добрый день! Мой сайт Healthyfood. Пытаюсь который раз поменять шапку сайта. Шапка, которая загрузилась мала и получилась срезанная снизу. Нашла подходящую по теме картинку, изменила формат (на png) и загружаю ее на сервер. В результате вижу шапку с коктейлями. Так происходило несколько раз. Подскажите, пожалуйста, что не так?
    healthyfood.okis.ru/img/healthyfood/shapka.png
    Спасибо

    В Вашем случае нужна шапка 988 x 250 пикселей, как у шаблона сайта по умолчанию healthyfood.okis.ru/shablons/334/images/header.jpg

    У вашей же шапки сейчас размеры 972 x 230 пикселей, поэтому шапка и неправильно разместилась.

  • Добрый день! Мой сайт Healthyfood. Пытаюсь который раз поменять шапку сайта. Шапка, которая загрузилась мала и получилась срезанная снизу. Нашла подходящую по теме картинку, изменила формат (на png) и загружаю ее на сервер. В результате вижу шапку с коктейлями. Так происходило несколько раз. Подскажите, пожалуйста, что не так?
    healthyfood.okis.ru/img/healthyfood/shapka.png
    Спасибо

  • Цитата:
    Помогите, в общем, всё сделал как вы, но картинка не полностью влазит в шапку. Как сделать, чтобы она растянулась по всему размеру шапки.

    Вам нужно просто сделать шапку, размеры которой соответствуют шаблону. Скиньте ссылку на сайт, и Вам скажу, какие размеры должны быть у шапки.

  • Помогите, в общем, всё сделал как вы, но картинка не полностью влазит в шапку. Как сделать, чтобы она растянулась по всему размеру шапки.

  • Цитата:
    а как можно в шапке цвет надписи поменять? а то сливается с картинкой, выглядит не очень красиво))) mountain-dress.okis.ru

    В заметке https://webcaum.ru/izmenenie-dizajna-na-okisru-okisru-obshhij-spisok-css-kodov.html собраны основные CSS-коды, которые необходимо использовать при изменении дизайна сайта на ОКИС.РУ (OKIS.RU). Пользуйтесь на здоровье:) . Там же есть информация о том, как поменять заголовок в шапке:
    h1.art-logo-name, h1.art-logo-name a, h1.art-logo-name a:link, h1.art-logo-name a:visited, h1.art-logo-name a:hover {
    color: #цвет_заголовка_в_шапке !important;
    font-size: размер_текста_заголовкаpx;
    }
    Обязательно ставьте !important после указания цвета заголовка в шапке, иначе цвет не поменяется. !important — означает, что если для одного и того же элемента в таблице CSS указываются разные данные, то отображаться будут те данные, где указан !important. По всей видимости в шаблонах окис так и происходит, поэтому при изменении цвета заголовка в шапке обязательно указывайте !important.

  • а как можно в шапке цвет надписи поменять? а то сливается с картинкой, выглядит не очень красиво))) mountain-dress.okis.ru

  • Цитата:
    Как сделать круглые верхние углы, и я что то не могу разобраться с размером, то оно очень широкое и короткое то просто короткое, big-shot.okis.ru вот ссылка

    Вам нужно подогнать размер шапки под шаблон. В данном случае шапка состоит из двух частей – контур шапки и логотип шапки.

    Как выглядит контур шапки стандартного шаблона можно посмотреть на странице big-shot.okis.ru/shablons/309/images/header.png

    Как выглядит логотип шапки стандартного шаблона можно посмотреть на странице big-shot.okis.ru/shablons/309/images/header.jpg

    Соответственно нужны те же самые размеры, чтобы шапка нормально отображалась, т.е. код должен быть таким:
    div.art-header-jpeg {background: url(ПУТЬ_К_ЛОГОТИПУ_ШАПКИ); width:958px; height: 120px;}
    div.art-header-png {background: url(ПУТЬ_К_КОНТУРУ_ШАПКИ); width: 988px; height: 150px;}
    ,где width и height – это ширина и высота. Их указывать необязательно, но желательно.

    Теперь о том, как сделать круглые верхние углы. Чтобы белые уголочки не показывались нужно создать контур шапки в формате png (пример названия файла: header.png), и там, где углы закруглены, нужно острые уголочки сделать прозрачными. Смотрите пример на странице big-shot.okis.ru/shablons/309/images/header.png – можете скачать этот файл и открыть его в фотошопе, и Вы увидите, что эти уголочки прозрачны.

  • Как сделать круглые верхние углы, и я что то не могу разобраться с размером, то оно очень широкое и короткое то просто короткое, big-shot.okis.ru вот ссылка

  • Цитата:
    а чтоб картинка по центру была,не подскажите?

    div.art-header-jpeg{background:url(/file/helppc/robo-mon.jpg) no-repeat;}
    У стиля div.art-header-jpeg прописана команда position: absolute;, поэтому в данном случае нужно сделать отступ с помощью команды left или right, например, так:

    div.art-header-jpeg{background:url(/file/helppc/robo-mon.jpg) no-repeat; left:150px; }
    а потом подравнять, подставив значение либо больше чем 150px, либо меньше

  • Цитата:
    Проще сделать шапку такого же размера, как у исходника. Как видите, шапка начинает повторяться по горизонтали, т.к. она меньше по размеру, чем у шаблона сайта. Чтобы шапка не повторялась, нужно добавить команду no-repeat. В Вашем случае нужно прописать так div.art-header-jpeg{background:url(/file/helppc/robo-mon.jpg) no-repeat;}

    а чтоб картинка по центру была,не подскажите?

  • Цитата:
    helppc.okis.ru помогите сделать шапку по центру

    Проще сделать шапку такого же размера, как у исходника. Как видите, шапка начинает повторяться по горизонтали, т.к. она меньше по размеру, чем у шаблона сайта. Чтобы шапка не повторялась, нужно добавить команду no-repeat. В Вашем случае нужно прописать так div.art-header-jpeg{background:url(/file/helppc/robo-mon.jpg) no-repeat;}

  • Цитата:
    какой размер шапки?

    Ширина и длина шапки такие:
    width: 972px;
    height: 200px;

    Размер шапки я не указал намеренно, дабы не усложнять урок. Имейте ввиду, что уроки рассчитаны на новичков, которые даже CSS не знают. Да, по-хорошему, нужно указывать ширину, длину шапки, а также background-repeat: no-repeat; . Но все эти значения уже указаны в общей таблице CSS, которые находятся по адресу coctail60.okis.ru/shablons/327/style.css (если мы говорим о представленной на данном сайте серии уроков по созданию сайтов на окис). В данном уроке мы просто меняем одну шапку на другую.

    Можно было бы написать в CSS для большей надёжности так:

    div.art-header-jpeg {background: url(ПУТЬ_К_ФАЙЛУ/shapka.png) no-repeat; width: 972px; height: 200px;}

    div.art-header-png {background: url(ПУТЬ_К_ФАЙЛУ/shapka_kontur.png) no-repeat; width: 972px; height: 200px;}

    , где no-repeat означает, что шапка не будет дублироваться.

  • Цитата:
    у вас есть скайп?

    Нет скайпа, у меня нет, и индивидуальными консультациями я не занимаюсь. На все вопросы я всё равно не смогу Вам ответить. Изучайте HTML, CSS, а также научитесь работать с программой Photoshop. Это не сложно. Всё равно при создании сайтов эти знания НЕОБХОДИМЫ! Могу посоветовать Вам новый курс Евгения Попова, который я сам недавно приобрёл. Подробнее почитать об этом курсе Вы можете, перейдя по следующей ссылке:
    https://webcaum.ru/kursy-sajtostroeniya/novyj-videokurs-vse-texnicheskie-momenty-onlajn-biznesa-v-videoformate-2011.html

  • Цитата:
    мне надо именно чтобы deva1 был по середини и растянутый

    В таком случае Вам нужно загрузить изображение 986 x 225 пикселей. Изображение deva1.jpg слишком маленькое для шапки.

    Цитата:
    да и ёщё это ваш сайт admin coctail60.okis.ru

    Да это мой сайт, на примере которого я сделал уроки по созданию сайта на окис

  • нет не совсем но всё ровно спасибо

    мне надо именно чтобы deva1 был по середини и растянутый

  • Цитата:
    помогите мне, я сменил шапку, но только старая шапка на новой, что делать подскажите мне, буду благодарен

    Цитата:
    мой сайт tonus-club.okis.ru помогите

    Как я понял, Вы хотите, чтобы в шапке показывалось изображение deva1.jpg, которое будет размножено. В таком случае попробуйте добавить ещё такой код:
    div.art-header-jpeg {background: url(img/tonus-club/deva1.jpg);}
    Также рекомендую Вам внимательно изучить ещё раз этот урок, а также все остальные, начиная с первого (https://webcaum.ru/sozdanie-sajta/kak-sdelat-besplatnyj-sajt-na-okis.html). Что-то Вы уже умеете, а что-то нет. Изучив все уроки, многие вопросы отпадут сразу же в дальнейшем.

  • помогите мне, я сменил шапку, но только старая шапка на новой, что делать подскажите мне, буду благодарен

  • Цитата:
    Подскажите как подтянуть шапку вверх, что бы не было отступа

    Попробуйте в CSS прописать следующий код:
    .art-sheet {margin-top: 0px !important;}

    Должен работать

  • Здравствуйте.
    Подскажите как подтянуть шапку вверх, что бы не было отступа

Добавить комментарий