Як встановити фон на сайт
Дизайн будь-якого сайту базується на фонових малюнках і колірних гамах, як будинок на фундаменті. Якщо у вас є бажання замінити типовий фундамент свого інтернет-ресурсу на щось більш індивідуальне, то почати слід з розробки дизайну. А коли він готовий - залишиться чисто технічна частина, тобто заміна заданого в вихідному коді сторінок старого оформлення фону сайту на нове. Реалізувати це на практиці можна декількома способами.
Спочатку слід з`ясувати, яким із способів заданий фон в чинній версії сайту. Для цього відкрийте HTML-код сторінки. Можна зробити це простим текстовим редактором, скачавши попередньо файл з сервера. А можна скористатися редактором сторінок системи управління сайтом, якщо ви таку використовуєте. Редактор сторінок не вимагає скачування файлу, а змінює його прямо на сервері, використовуючи браузер в якості інтерфейса.HTML-код (HyperText Markup Language - «мова розмітки гіпертексту») сторінки, відкритої вами, складається з рядків-інструкцій для браузера. У них описані типи, оформлення зовнішнього вигляду і розташування кожного з елементів веб-сторінки. Ці інструкції прийнято називати «тегами». Порядок проходження самих тегів в коді сторінки теж підпорядковується правилам мови HTML - вони розбиті на блоки, першим з яких обов`язково повинен бути заголовки блок, що починається з тега і завершується . За ним повинен слідувати блок, який вас зараз цікавить більше - тіло документа. Він обмежений тегами і . У відкриває тег цього блоку () Можна поміщати інформацію про фон сторінки. Таку інформацію всередині тегів називають «атрибутами». Атрибут тега body, який задає колір фону позначається як bgcolor і в коді може виглядати так:Тут заданий сріблястий колір фону для сторінки. Деякі з квітів браузер може впізнавати за назвами, але щоб не помилитися, краще вказувати їх шістнадцяткові коди. Виглядати цей варіант з сріблястим кольором в шістнадцятковому вираженні буде так:Отже, вам потрібно в коді сторінки знайти тег, що починається з
2
Фон в поточному оформленні вашого сайту може бути заданий не колір, а картинкою. Відповідний атрибут тега body називається background, і виглядати в коді може так:Тут в якості фону задана картинка bg.jpg з папки img вашого сервера. Якщо такий атрибут присутній, замініть ім`я файлу картинки на ім`я нової картинки, не забувши завантажити її на сервер.Еслі ви хочете замінити картинку на колір, замініть атрибут background атрибутом bgcolor, який ми описали вище.
3
При описі зовнішнього вигляду сторінок з відносно складним дизайном використовують «каскадні таблиці стилів» - CSS (Cascading Style Sheets). Блоки коду CSS можуть бути включені безпосередньо в код сторінки або міститися в зовнішньому файлі з розширенням "css". Вам треба в головній частині коду сторінки (між тегами і ) Пошукати тег опису стилю, що починається з Тут наведено посилання на файл стилів з ім`ям style.css. Зазначений файл вам потрібно відкрити для редагування. А якщо посилання немає, а після відкриваючого тега 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, то фоновою картинкою буде вимощена фонове простір сторінки у всіх напрямках.
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 або скориставшись онлайн конвертерами квітів.
Статті за темою "Як встановити фон на сайт"
Оцініть, будь ласка статтю