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

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

Ссылка на основную публикацию
Adblock
detector