Підручник html для новачків - фон для web-сайту - урок 18
Bgcolor і Background
Ну, що ж ... прийшла пора визначитися, на чиєму ж фоні ми будемо умопомрачающе виглядати! І де ж той чудовий тег, який за цю справу відповідає? Які у нього є, висловлюючись розумним словом атрибути? І, головне, яким чином розмістити всю нашу красу?
Коротше, питань - безліч! А відповідь всього один. Ну немає такого тега взагалі! Ще не придумали!
Але не засмучуйтеся! Немає тега і не треба! Зате є два чудових атрибута відомого нам дескриптора BODY. Так що зустрічайте старого знайомого!
Фон, або як прийнято називати задній фон в перекладі на англійську означає background. Тому немає нічого простіше запам'ятати два атрибутика, створених в його честь. Один - background. а інший - bgcolor.
Так чому ж вони відрізняються? Якими можливостями володіють? І, головне, чим будуть нам корисні?
Почнемо, з самого простого - bgcolor. Цей атрибут відповідає за колір фону. Ви можете підставити будь-яке значення, в буквеному або в числовому значенні кольору і ваш фон забарвиться як за помахом чарівної палички.
Що ж, заради прикладу можемо відкрити наш шаблон, або будь-який, створений нами раніше файл і спробувати залити сторінку улюбленим кольором. Я ж відкрию свою сторінку index.html в NotePad (Блокнот) і внесу такі зміни:
Лістинг 11. Файл index.html
Ура! Привіт світ! Привіт люди! Зустрічайте!
Збережемо наше творіння під тим же ім'ям і подивимося, що вийшло:
Я на синьому тлі
Цей атрибут вказує не на колір зображення, а на картинку, яку варто помістити в якості фону, або як ще кажуть, фонових шпалер. Шпалери можна підібрати будь-які, які тільки підкаже вам фантазія. Моя фантазія підказала мені взяти картинку, на якій я в новому піджаку. А тому, не мудруючи лукаво, відкриваю свій файл index.html і роблю такі зміни:
Лістинг 12. Файл index.html
Ура! Привіт світ! Привіт люди! Зустрічайте!
Зберігаємо цей файл і дивимося, що у нас вийшло
воно - фонове зображення!
Що ж, з одного боку, приємно бачити стільки розумних людей в одному місці, але з іншого боку ... ну куди стільки. Однак, відкинувши жарти в сторону, можна зрозуміти, що ж зробив атрибут background - він просто взяв і розмножив вихідне зображення, заповнивши їм весь екран.
Але чи не можна завантажити одну картину, але на весь екран? В принципі, можна! І ми зараз цим займаємося. Єдино, що необхідно врахувати, так це розміри зображення. Так, при розмірі екрану 800 х 600, вільного місця для зображення, якщо відняти всі верхні і нижні панелі, залишається 781 х 476 пікселів. Ось і підберемо таке зображення.
Тому я знову відкриваю програму Adobe Photoshop. вибираю фотографію з зображенням моря, підганяю його розміри під шукані 781 х 476, оптимізує для web і зберігаю під ім'ям fonsea.jpg в своїй папці foto. Ну і потім, йду уторованим шляхом: відкриваю файл index.html і вводжу такі зміни:
Лістинг 13. Файл index.html
Ура! Привіт світ! Привіт люди! Зустрічайте!
Знову зберігаємо і дивимося результат
І ось воно - море! Грає, шумить на просторі ...
Красиво, правда? От якби це дозвіл екрана було встановлено у всіх користувачів! Але нажаль! Варто мені збільшити дозвіл до 1152 х 864 і виходить вже наступна картина:
Сумно я дивлюся на це отраженье.
Погодьтеся, це зовсім не те, що хотілося. Звичайно, краса вимагає жертв, і ви можете спокійно відкинути тих користувачів, чия думка про дозвіл екрану не збігається з вашим, або запропонувати їм вибрати настройки, які ви їм вкажете. Вирішувати, в кінцевому рахунку, тільки вам.
Хоча буває краса і без жертв. Яка чудово виглядатиме на всіх моніторах без винятку. І я спробую в цьому допомогти. Як ви помітили, фон заповнюється копіями малюнка. І цією властивістю не гріх і скористатися. Адже ми можемо зробити одну маленьку картинку, яка займе пам'яті набагато менше великий, і заповнимо нею весь екран. Тут головна хитрість постаратися зробити цю картинку "без швів". Тобто, щоб не було видно стиків між сусідніми зображеннями. І для цього нам знову знадобиться незамінна програма Adobe Photoshop.
Звичайно, можна особливо і не напружуватися, і взяти готові фонові картинки з Інтернету, де вони просто аж кишать. Для цього можна набрати в будь-якій пошуковій системі (www.yandex.ru, www.apport.ru, www.ramber.ru і багатьох інших) заповітні слова (фон, фонові шпалери, background) і до ваших послуг постануть десятки і десятки сайтів, готові віддати вам ці фони за заради бога, і що особливо радує, абсолютно безкоштовно.
Тільки не дивуйтеся потім, що точно такий фон ви знайдете і на інших сайтах. Так що якщо ви хочете зробити щось, хай і сопливе, але СВОЄ, пропоную закатати рукава, і взятися за справу. Тим більше це дуже захоплююче заняття, від якого просто важко відірватися.
І цією справою ми зараз і займемося.