Как создать свой сайт
Блог сайтостроителя


Новый видеокурс «Все технические моменты онлайн-бизнеса в видеоформате 2011»!

Рубрика «Вопрос? Ответ!»





Урок№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>>>

Популярность заметки: 17%

Опубликовал admin 11 июня, 2011 | 35 комментариев | Просмотров: 14,185

Рейтинг заметки:

1 звезда2 звезды3 звезды4 звезды5 звезд (9 голосов, средний: 4.56 из 5)
Loading ... Loading ...

Размещено в рубрике: Сайт на OKIS

Метки:

Если Вам понравились материалы сайта http://webcaum.ru, и Вы хотите отблагодарить автора данного ресурса, то скопируйте код баннера, который представлен ниже, и вставьте его на любой странице Вашего сайта.

35 комментариев к заметке «Урок№4. Как поменять шапку сайта на okis.ru»

  • Анна
    16 ноября, 2011, 12:37
    Цитировать

    Здравствуйте.

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

  • admin
    20 ноября, 2011, 23:27
    Цитировать

    Цитата:

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

    Попробуйте в CSS прописать следующий код:

    .art-sheet {margin-top: 0px !important;}

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

  • vova
    11 декабря, 2011, 20:01
    Цитировать

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

  • vova
    11 декабря, 2011, 20:04
    Цитировать

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

  • admin
    11 декабря, 2011, 20:23
    Цитировать

    Цитата:

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

    Цитата:

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

    Как я понял, Вы хотите, чтобы в шапке показывалось изображение deva1.jpg, которое будет размножено. В таком случае попробуйте добавить ещё такой код:

    div.art-header-jpeg {background: url(img/tonus-club/deva1.jpg);}

    Также рекомендую Вам внимательно изучить ещё раз этот урок, а также все остальные, начиная с первого (webcaum.ru/sozdanie-sajta...ajt-na-okis.html). Что-то Вы уже умеете, а что-то нет. Изучив все уроки, многие вопросы отпадут сразу же в дальнейшем.

  • vova
    12 декабря, 2011, 16:28
    Цитировать

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

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

  • vova
    12 декабря, 2011, 16:32
    Цитировать

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

  • admin
    12 декабря, 2011, 21:10
    Цитировать

    Цитата:

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

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

    Цитата:

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

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

  • vova
    13 декабря, 2011, 12:49
    Цитировать

    у вас есть скайп?

  • admin
    17 декабря, 2011, 20:20
    Цитировать

    Цитата:

    у вас есть скайп?

    Нет скайпа, у меня нет, и индивидуальными консультациями я не занимаюсь. На все вопросы я всё равно не смогу Вам ответить. Изучайте HTML, CSS, а также научитесь работать с программой Photoshop. Это не сложно. Всё равно при создании сайтов эти знания НЕОБХОДИМЫ! Могу посоветовать Вам новый курс Евгения Попова, который я сам недавно приобрёл. Подробнее почитать об этом курсе Вы можете, перейдя по следующей ссылке:

    webcaum.ru/kursy-sajtostr...ormate-2011.html

  • дима
    22 января, 2012, 7:37
    Цитировать

    какой размер шапки?

  • admin
    22 января, 2012, 12:59
    Цитировать

    Цитата:

    какой размер шапки?

    Ширина и длина шапки такие:

    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 означает, что шапка не будет дублироваться.

  • Андрей
    31 января, 2012, 16:35
    Цитировать

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

  • admin
    31 января, 2012, 17:34
    Цитировать

    Цитата:

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

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

  • Андрей
    31 января, 2012, 18:23
    Цитировать

    Цитата:

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

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

  • admin
    31 января, 2012, 21:05
    Цитировать

    Цитата:

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

    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, либо меньше

  • BIGI
    12 марта, 2012, 19:42
    Цитировать

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

  • admin
    17 марта, 2012, 8:11
    Цитировать

    Цитата:

    Как сделать круглые верхние углы, и я что то не могу разобраться с размером, то оно очень широкое и короткое то просто короткое, 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 — можете скачать этот файл и открыть его в фотошопе, и Вы увидите, что эти уголочки прозрачны.

  • Екатерина
    11 ноября, 2012, 0:54
    Цитировать

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

  • admin
    11 ноября, 2012, 20:27
    Цитировать

    Цитата:

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

    В заметке webcaum.ru/izmenenie-diza...k-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.

  • Андрей
    14 ноября, 2012, 19:20
    Цитировать

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

  • admin
    22 ноября, 2012, 23:21
    Цитировать

    Цитата:

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

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

  • Галина
    14 января, 2013, 14:21
    Цитировать

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

    healthyfood.okis.ru/img/healthyfood/shapka.png

    Спасибо

  • admin
    15 января, 2013, 23:29
    Цитировать

    Цитата:

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

    healthyfood.okis.ru/img/healthyfood/shapka.png

    Спасибо

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

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

  • Галина
    16 января, 2013, 11:03
    Цитировать

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

    Спасибо.

  • Ваня
    25 января, 2013, 16:24
    Цитировать

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

    вот мой сайт izuminka.okis.ru

  • admin
    3 февраля, 2013, 18:37
    Цитировать

    Цитата:

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

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

  • admin
    3 февраля, 2013, 19:19
    Цитировать

    Цитата:

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

    Спасибо.

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

  • Игорь
    25 августа, 2013, 20:51
    Цитировать

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

    Я не знаю, как подвинуть название страниц влево, чтобы увеличить шрифт названия страниц.

    Мой сайт business.okis.ru

  • admin
    7 сентября, 2013, 19:55
    Цитировать

    Цитата:

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

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

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

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

  • Александр
    22 декабря, 2013, 1:29
    Цитировать

    Спасибо за ценные советы!!!

  • Виктория
    3 июля, 2014, 3:30
    Цитировать

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

  • Виктория
    3 июля, 2014, 4:18
    Цитировать

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

  • admin
    5 июля, 2014, 17:32
    Цитировать

    Цитата:

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

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

  • admin
    5 июля, 2014, 17:35
    Цитировать

    Цитата:

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

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

Внимание! На данный момент возможность комментирования на сайте закрыта по причине нехватки времени у автора отвечать на вопросы посетителей сайта. Как только у автора блога появится время, форма с отправкой комментариев обязательно будет установлена обратно.

© 2011 Все права защищены законодательством РФ.
Автор разрешает использовать материалы сайта только при одном условии – на страницу сайта webcaum.ru, от куда был скопирован материал (или частично скопирован), должна быть проставлена индексируемая ссылка Поднять страницу вверх