Підставляємо тепер цю таблицю в нашу сторінку, на якій у нас зроблені всі таблиці для нашого сайту і весь код буде виглядати так:
 |
1.4. Завантажимо всю цю конструкцію на нашу сторінку. Вийде ось що:
Наша перша сторінка
2. Колір фону і фонове зображення (bgcolor і background)
2.1. Для того, щоб наша сторінка була певного кольору, необхідно задати колір фону. Оскільки колір прописується для всієї сторінки, тобто для її "тіла", необхідно прописати атрибут кольору всередину тега Колір фону задається атрибутом bgcolor, якому присвоюється значення того кольору, який вам потрібен. Наприклад, ми хочемо, щоб фон сторінки був світло-сірий. Ми знаходимо в таблиці кольорів, або в фотошопі відповідний колір # c0c0c0 - який відповідає саме за світло-сірий, і прописуємо атрибут з його значенням, так само, як ми прописували значення інших атрибутів: bgcolor = "# c0c0c0". А тепер цей атрибут поміщаємо всередину тега Вставляємо даний змінений тег в нашу сторінку і виходить ось що:
Наша перша сторінка, фон сірий
Потрібний вам колір можна знайти ось в цих таблицях:
2.2. Тепер поставимо інше значення - background. Цей атрибут і означає фонову картинку.
Вставимо в фон ось таку картинку:
Я поясню, чому вона така маленька.
При бажанні можна поставити фоновим зображенням картинку, яка буде займати весь екран. Але врахуйте, що це зображення в фоні має кілька властивих йому якостей:
Припустимо, у нас є якась дуже гарна картинка, наприклад який-небудь зимовий пейзаж. Картинка розміром 1024х768. І якщо на неї дивитися монітора, дозвіл якого 1024 на 768 - все буде виглядати прекрасно. Але якщо на наш сайт подивиться користувач у якого дозвіл монітора 1280х1024, він побачить, що сама картинка від'їхала в верхній лівий кут, а вільні місця знизу і праворуч від неї заповнилися шматками цієї ж картинки, абсолютно не зістикованими з початковим зображенням. Загалом, наш фон виявиться на такому дозволі знівеченим.
Якщо ж раптом у користувача дозвіл монітора менше, ніж 1024х768 він побачить тільки шматочок вашого фону, точніше, його лівий верхній кут.
Нам це не підходить.
Друга складність: чим більше картинка розміром, тим більше її вагу, тим довше вона буде завантажуватися і тим більше витрачати трафіку користувача.
Отже, підсумуємо: вага фонової картинки додається до загальної ваги сторінки, тому не завантажуйте сильно важкі картинки, економте трафік.
Фонове зображення може з якихось причин не відкриватися відразу, особливо якщо ви захочете завантажити його не на свій сайт, а для економії місця скористаєтеся чиїмось сервісом картинок. Наприклад, тим же Радикалом. І якщо на Радикалові відбудеться збій, ваше зображення може не завантажитися зовсім.
Потрібно враховувати також, що якщо у вас текст набраний чорними буквами, а ви поклали під фонове зображення чорний фон - якщо фонове зображення не відкриється, чорний текст на чорному тлі прочитати буде неможливо і гість буде дуже здивований, побачивши суцільне чорне пляма замість вашої сторінки .
Іншими словами, підбираючи фонове зображення, ви повинні враховувати контрастність тексту по відношенню до фонового зображення і фону під ним. Щоб ваш текст ЗАВЖДИ був ДОБРЕ ЧИТАЕМ!
Для фону я в даному випадку взяла дуже маленьку картинку, 30 на 28 пікселів, яка важить дуже мало, близько 51 байта. І вага всієї сторінки буде вважатися тільки по одній картинці, яка просто розмножується в тлі незліченна безліч разів. Тепер давайте подивимося, як поставити фонове зображення.
2.3. Припустимо, ми завантажили в нашу папку, де лежать усі наші сторінки, фонову картинку і привласнили їй ім'я "f3.gif" (формат може бути і jpg).
Оскільки фон варто для всієї сторінки, то і прописати його потрібно в "тіло" сторінки, тобто все в той же Виглядати це буде так: Наша перша сторінка, фон сірий + фонова картинка
Фонове зображення можна прописати не тільки для всієї сторінки. Його можна прописати в клітинку таблиці або в якусь певну таблицю. Фонове зображення на відміну від вставленої картинки, завжди масштабується і поверх нього можна вставляти текст. А картинка не масштабується, має строго певний розмір і поверх неї нічого написати не можна.
Урок завершено.
Схожі статті
|