Як встановлювати фон на сайт

Як встановлювати фон на сайт

Дизайн будь-якого сайту базується на фонових малюнках і колірних гамах, як будинок на фундаменті. Якщо у вас є бажання замінити типової фундамент свого інтернет-ресурсу на щось більш індивідуальне, то почати слід з розробки дизайну. А коли він готовий — залишиться чисто технічна частина, тобто заміна заданого у вихідному коді сторінок старого оформлення фону сайту на нове. Реалізувати це на практиці можна кількома способами.

Інструкція

  1. Спочатку слід з’ясувати, яким із способів заданий фон у чинній версії сайту. Для цього відкрийте HTML-код сторінки. Можна зробити це простим текстовим редактором, скачавши попередньо файл з сервера. А можна скористатися редактором сторінок системи управління сайтом, якщо ви таку використовуєте. Редактор сторінок не вимагає скачування файлу, а змінює його прямо на сервері, використовуючи браузер в якості інтерфейсу.

    HTML-код (HyperText Markup Language — «мова розмітки гіпертексту») сторінки, відкритої вами, складається з рядків-інструкцій для браузера. У них описані типи, оформлення зовнішнього вигляду і розташування кожного з елементів веб-сторінки. Ці інструкції прийнято називати «тегами». Порядок проходження самих тегів в коді сторінки теж підпорядковується правилам мови HTML — вони розбиті на блоки, першим з яких обов’язково повинен бути заголовний блок, що починається з тега <head> і завершується </ head>. За ним повинен слідувати блок, який вас зараз цікавить більше — тіло документа. Він обмежений тегами <body> і </ body>. У відкриває тег цього блоку (<body>) можна поміщати інформацію про фон сторінки. Таку інформацію всередині тегів називають «атрибутами». Атрибут тега body, який задає колір фону позначається як bgcolor і в коді може виглядати так:

    <body bgcolor=»Silver»>

    Тут заданий сріблястий колір фону для сторінки. Деякі з квітів браузер може впізнавати за назвами, але щоб не помилитися, краще вказувати їх шістнадцяткові коди. Виглядати цей варіант зі сріблястим кольором в шістнадцятковому вираженні буде так:

    <body bgcolor=»#C0C0C0″>

    Отже, вам потрібно в коді сторінки знайти тег, що починається з <body і перевірити, заданий в ньому колір фону. Якщо так — замініть у ньому вказівка ​​кольору на свій новий варіант і збережіть зміни в сторінці.
  2. Фон в поточному оформленні вашого сайту може бути заданий не кольором, а картинкою. Відповідний атрибут тега body називається background, і виглядати в коді може так:

    <body background=»url(img/bg.jpg)»>

    Тут в якості фону задана картинка bg.jpg з папки img вашого сервера. Якщо такий атрибут присутній, замініть ім’я файлу картинки на ім’я нової картинки, не забувши завантажити її на сервер.

    Якщо ви хочете замінити картинку на колір, замініть атрибут background атрибутом bgcolor, який ми описали вище.
  3. При описі зовнішнього вигляду сторінок з відносно складним дизайном використовують «каскадні таблиці стилів» — CSS (Cascading Style Sheets). Блоки коду CSS можуть бути включені безпосередньо в код сторінки або міститися в зовнішньому файлі з розширенням «css». Вам треба в заголовній частині коду сторінки (між тегами <head> і </ head>) пошукати тег опису стилю, що починається з <style. Якщо в ньому зазначене посилання на зовнішній файл, то виглядати це буде приблизно так:

    <style type=»text/css» media=»all»> @ import «style.css»; </ style>

    Тут наведено посилання на файл стилів з ім’ям style.css. Зазначений файл вам потрібно відкрити для редагування. А якщо посилання немає, а після відкриваючого тега <style йдуть інструкції стилів, то редагувати їх потрібно тут. В обох варіантах серед описів стилів вам потрібно шукати ті, які належить до тіла документа (body). Виглядати цей блок описів може, наприклад, так:

    body {

     background-color: Silver;

     color: Black;

    }

    Тут значення параметра background-color вам потрібно замінити на значення вашого нового кольору і краще в тих же шістнадцятиричних значеннях. Варіант з фоновою картинкою в інструкціях CSS повинен виглядати, наприклад, так:

    body {

     background: # C0C0C0 url (img / bg.jpg) repeat-y;

     color: Black;

    }

    Тут посилання на картинку аналогічна розглянутій вище, а # C0C0C0 перед посиланням означає, що простір сторінки, не зайняте фоновим зображенням, матиме сріблястий фон. «Repeat-y» вказує, що фонова картинка повинна бути розмножена по осі Y (по вертикалі). «Repeat-y» можна замінити на «repeat-x» (реплікація по горизонталі) або «no-repeat» (не розмножувати). Якщо ви взагалі не вкажіть repeat, то фонової картинкою буде вимощена фонове простір сторінки у всіх напрямках.

Корисні поради

З’ясувати значення шістнадцяткового коду потрібного вам відтінку кольору можна за допомогою програм ColorImpact і Ruler або скориставшись онлайн конвертерами квітів.