Урок№6. Как поменять фон сайта на okis.ru

Интересное

В этом уроке Вы узнаете, как поменять фон сайта на okis.ru.

Для начала нам нужно загрузить изображение фона. На этот раз мы сделаем это немного по-другому – не так, как в предыдущих уроках по изменению шапки сайта и нижней части сайта.

Зайдите в загрузку файлов

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

Нажмите «Обзор» и найдите файл fon.jpg в папке, которую Вы скачали для работы с нашим сайтом (скачайте файлы, если Вы этого ещё не делали). Нажимаем «Открыть» -> Загрузить файл на сервер

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

Урок№6. Как поменять фон сайта на okis.ru: Путь к файлу fon.jpg

Чтобы поменять фон сайта, сделанного на okis.ru, нам нужно в редакторе CSS с новой строчки прописать следующий код:

body {background: url(ПУТЬ_К_ФАЙЛУ/fon.jpg);}

В моём случае ПУТЬ_К_ФАЙЛУ такой: file/cocktail60/fon.jpg

Значит, я пишу следующий код:
body {background: url(file/cocktail60/fon.jpg);}

Вы же указываете в скобках СВОЙ_ПУТЬ_К_ФАЙЛУ/fon.jpg

Если на странице сайта нет никакой информации, то изменений Вы не увидите. Поэтому я Вам предлагаю с главной страницы сайта coctail60.okis.ru скопировать текст и вставить его на свой сайт, зайдя в раздел Страницы сайта и отредактировав страницу index.html.

Обновите главную страницу нашего сайта.  Теперь наш сайт выглядит так:

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

Как видите, в самом низу нашего сайта частично поменялся фон. На самом деле, фон изменился для всей страницы сайта, но мы этого не видим, поскольку поверх общего фона есть второй слой фона, который мы сейчас поменяем. Для этого в редакторе CSS на следующей строчке напишите следующий код:

#art-page-background-gradient {background: url(ПУТЬ_К_ФАЙЛУ/fon.jpg);}

В моём случае ПУТЬ_К_ФАЙЛУ такой: file/cocktail60/fon.jpg

Значит, я пишу следующий код:
#art-page-background-gradient {background: url(file/cocktail60/fon.jpg);}

Не забывайте о том, что Ваш ПУТЬ_К_ФАЙЛУ отличается от моего.

Обновим ещё раз страницу сайта и посмотрим, что получилось на этот раз:

Урок№6. Как поменять фон сайта на okis.ru: как поменялся фон сайта

Фон сайта поменялся, но вместе с ним не очень красиво поменялся фон всей области вокруг содержимого страницы. Давайте исправим это. На следующей строчке в редакторе CSS пропишите следующий код:

.art-content-layout {background-color: #BFCFD7;}

background-color – сообщает браузеру о том, каким должен быть цвет заднего фона.
#BFCFD7 – код серо-синего цвета.

Сохраните изменения и обновите главную страницу нашего сайта. Задний фон вокруг содержимого страницы поменялся:

Урок№6. Как поменять фон сайта на okis.ru: как поменялся фон сайта

Теперь Вы знаете, как поменять фон сайта на okis.ru. Осталось поменять контур нашего сайта. Как это сделать, Вы узнаете в следующем уроке.

Урок№7. Как поменять контур сайта на okis.ru
Урок№8. Всё, что нужно знать новичку об ОКИС.РУ (OKIS.RU)
Изменение дизайна на ОКИС.РУ (OKIS.RU). Общий список CSS-кодов

Дополнительные уроки по созданию и ведению сайта на OKIS:
Урок№9. Как организовать общение на сайте, сделанном на okis.ru
Урок№10. Как активировать сайт на okis.ru с помощью WebMoney
Урок №11. Учимся добавлять новую страничку на okis.ru и работать с содержимым страницы

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

16 comments

  • Цитата:
    а как растянуть фон во весь экран ?

    вопрос решен.
    вот как решил:

    body {background-image: url(ссылка на картинку);
    background-attachment:fixed;
    background-size: 100% 100%, auto;
    }
    #art-page-background-gradient {background: url(ссылка на картинку);
    background-attachment:fixed;
    background-size: 100% 100%, auto;
    }
    .art-content-layout {background-color: #BFCFD7;}

  • ВООООО. Спасибо, теперь получилось. Блин, какой-то пробел. :)))

  • Цитата:

    Здравствуйте!!! Сделал всё как вы сказали вот только фон не меняется, что делать??? Просматривая код страницы вижу вот такие вещи — body {

    background: url (my-domainguain.okis.ru/file/my-domainguain/fon.jpg);

    } только всё зачеркнуто. Что это может быть???

    Между url и скобкой не должно быть пробела. У меня в начале статьи была ошибка, я её исправил. Т.е. у Вас должно быть так:

    body {
    background: url(/file/my-domainguain/fon.jpg);
    }

    Этого кода будет достаточно. Проверьте во всех браузерах потом.

  • Здравствуйте!!! Сделал всё как вы сказали вот только фон не меняется, что делать??? Просматривая код страницы вижу вот такие вещи — body {
    background: url (my-domainguain.okis.ru/file/my-domainguain/fon.jpg);
    } только всё зачеркнуто. Что это может быть???

  • Я думала это идет 2 в одном, но раз так, в идеале, хотелось бы, где меню и лента новостей, иначе очень резкий переход от красивого фона к белой странице получается.

  • Цитата:
    Добрый день,
    столкнулась с проблемой.
    Подскажите, как прописать ссылку на странице для загрузки файла. Сам файл на сервер загружен, а вот дальше, какую ссылку прописывать не ясно. Нажимаю на подсказку в окисе — все отображается квадратиками.

    Если подсказка показывается квадратиками, то попробуйте воспользоваться другим браузером.
    По поводу того, как прописать ссылку на странице для загрузки файла. На примере урока https://webcaum.ru/kak-pomenyat-shapku-sajta-sdelannogo-na-okisru.html Вы можете узнать, как это сделать.

  • Цитата:
    Скажите, пожалуйста, почему там, где текст, не меняется фон?

    Вы хотите, где поменять фон. Там, где основной текст или, где меню?

    Цитата:
    И второй вопрос: На окис можно создать гостевую книгу?

    Насколько мне известно – нельзя. Организовать общение на сайте, сделанном на окисе, разве что можно так: https://webcaum.ru/kak-organizovat-obshhenie-na-sajte-sdelannom-na-okisru.html

  • body{background:url(/img/fruktovyiy-ray_r/summer-foods.jpg)}
    #art-page-background-gradient {background: url(/img/fruktovyiy-ray_r/fon.jpg/fon.jpg);}
    эти коды я вставила в редакторе CSS.
    адрес сайта fruktovyiy-ray.ru. Скажите, пожалуйста, почему там, где текст, не меняется фон?
    И второй вопрос: На окис можно создать гостевую книгу?

  • Добрый день,
    столкнулась с проблемой.
    Подскажите, как прописать ссылку на странице для загрузки файла. Сам файл на сервер загружен, а вот дальше, какую ссылку прописывать не ясно. Нажимаю на подсказку в окисе — все отображается квадратиками.

  • Цитата:
    upwap.ru/2724324 — получается вот так. Что мне делать?

    Зайдя на сайт b-onicq.okis.ru, я увидел, что Вы поменяли только шапку. Изучите внимательно данный урок и сделайте всё, как в нём написано. Потом я посмотрю код страницы и уже смогу сказать, что нужно доработать, если это потребуется.

  • Цитата:
    не получается!!!!!!!!

    Пришлите адрес сайта, шаблон, который Вы используете, и я посмотрю, что не так. Всё должно получаться. На сайте coctail60.okis.ru используются именно такие коды. Как видите, всё нормально отображается.

  • Цитата:
    На окисе разные шаблоны и данный урок не ко всем подходит.

    Возможно, но данные уроки были созданы не с целью дать универсальное решение для всех шаблонов, а с целью показать, как происходит процесс изменения дизайна сайта. У меня есть другой мини сайт на окисе, сделанный на другом шаблоне и там это решение работает. Нужно просто внимательно изучить весь урок и всё получится. Вообще HTML-код практически для всех шаблонов одинаков, за исключением небольших мелочей (например, в каких-то шаблонах есть закруглённые углы, а в каких-то нет). Отличается только ширина, оформление, дизайн и т.д. А так структура везде одинаковая. Найдите мне хотя бы один шаблон, который кардинальным образом отличается от остальных, и я с Вами соглашусь на все 100%.

  • На окисе разные шаблоны и данный урок не ко всем подходит.

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