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


Видеокурс «Все Технические Моменты Онлайн Бизнеса в Видеоформате 2 или PHP+MySQL для начинающих»

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





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

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

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

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

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

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

Метки:

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

16 комментариев к заметке «Урок№6. Как поменять фон сайта на okis.ru»

  • Вася
    5 апреля, 2012, 10:37
    Цитировать

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

  • admin
    5 апреля, 2012, 10:48
    Цитировать

    Цитата:

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

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

  • dima
    12 мая, 2012, 17:27
    Цитировать

    не получается!!!!!!!!

  • admin
    15 мая, 2012, 13:16
    Цитировать

    Цитата:

    не получается!!!!!!!!

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

  • Низам
    6 августа, 2012, 22:15
    Цитировать

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

  • admin
    15 августа, 2012, 2:49
    Цитировать

    Цитата:

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

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

  • Мария
    16 января, 2013, 14:58
    Цитировать

    Добрый день,

    столкнулась с проблемой.

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

  • Лилия
    27 января, 2013, 23:03
    Цитировать

    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. Скажите, пожалуйста, почему там, где текст, не меняется фон?

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

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

    Цитата:

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

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

    Цитата:

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

    Насколько мне известно — нельзя. Организовать общение на сайте, сделанном на окисе, разве что можно так: webcaum.ru/kak-organizova...m-na-okisru.html

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

    Цитата:

    Добрый день,

    столкнулась с проблемой.

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

    Если подсказка показывается квадратиками, то попробуйте воспользоваться другим браузером.

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

  • Лилия
    17 февраля, 2013, 13:54
    Цитировать

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

  • Ильдар
    14 августа, 2013, 14:16
    Цитировать

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

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

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

  • admin
    18 августа, 2013, 23:42
    Цитировать

    Цитата:

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

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

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

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

    body {

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

    }

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

  • Ильдар
    21 августа, 2013, 12:54
    Цитировать

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

  • Мяфкун
    30 октября, 2013, 12:38
    Цитировать

    спасибо за уроки

    а как растянуть фон во весь экран ?

  • Мяфкун
    30 октября, 2013, 14:33
    Цитировать

    Цитата:

    а как растянуть фон во весь экран ?

    вопрос решен.

    вот как решил:

    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;}

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

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