Сьогодні важко побачити Web - сайт. що не містить будь-якої ні будь графіки. Підібрані графічні зображення не тільки роблять сайт ефективніше і привабливіше, але і часом замінюють собою безліч слів.
Щоб грамотно створювати зображення і правильно їх використовувати при Web - проектуванні, потрібно знати кілька основних прийомів, використовуваних в цій технології.
До недавнього часу в World Wide Web були найбільш поширені тільки два формати графічних файлів - GIF і JPG. Тепер все більшу заслужену популярність отримує порівняно новий вид формату -PNG.
Растрове (точкове) зображення - це зображення, яке сприймається, як набір безлічі окремих точок, складових повну картину. Фотографії, зроблені цифровою камерою, відскановані малюнки, а також малюнки, створені в деяких графічних програмах все це приклади растрових зображень.
Кожен з наведених форматів володіє своїми недоліками і перевагами, наприклад якість зображень формату PNG вище, ніж в GIF, але на жаль, деякі старі версії браузерів не підтримують PNG формат. Іноді необхідно перетворювати графічні зображення одного формату в інший, наприклад, для зменшення розміру файлу.
Web - сторінки можна розглядати як багаторівневі шари. Так як графічне зображення може бути розміщено на одному рівні з текстовим об'єктом. слід встановити певні правила співіснування на одній Web - сторінці тексту і графіки. Це означає, що для зображень обов'язково потрібно ставити правильні розміри, параметри обтікання графіки текстом, рамки навколо зображення і т.д.
У дескриптора зображення немає закриває дескриптора.
Створення альтернативного тексту - відмінне підмога для тих користувачів, які відключають завантаження графіки. У цьому випадку замість малюнка на Web - сторінці відображається його коротка текстова анотація.
Щоб створити альтернативний текст, використовуються дескриптор з обов'язковим атрибутом src плюс alt. Значення атрибута alt і вказує текст, який буде відображатися в якості підказки або відображатися поруч з піктограмою графічного зображення.
Ось як це виглядає. (В нашому випадку ми не стали завантажувати файл, але при завантаженні файлу і при наведенні мишки на це зображення - вираз «Квіти» будить з'являтися.)
Вирівнювання зображення на Web сторінці. Всі Web браузери вирівнюють малюнки Web сторінки по нижньому краю тексту. Для того щоб змінити таке розташування графіки щодо тексту, необхідно скористатися значенням атрибута align. Значення атрибута align з вертикальним положенням фрагмента щодо графічного зображення. Застосування атрибуту align із значенням top призводить до того. що текст вирівнюється по верхній межі ...
Якщо не додавати до дескриптора img значення, що задають розміри вставляється на Web сторінку графічного зображення, то Web браузер відобразить дане зображення на весь екран. Задавати розміри графічного зображення необхідно з кількох причин. По - перше, зображення нормально виглядає на Web - сторінці По - друге, Web браузер швидше відкриває таку сторінку, так як йому не ...
Щоб домогтися оригінальності та чіткості зображення, зробити його більш контрастним на тлі сторінки, тим самим візуально виділивши графіком, рекомендується укласти зображення в кольорову рамку. Для створення рамки навколо зображення використовують атрибут border. Визначення значення даного атрибута, такі як товщина рамки, колір та інше, дозволяють сформувати її зовнішній вигляд. При цьому треба стежити за тим, щоб ...
Використання малюнків як посилань. Графічні зображення, розміщені на Web сторінці, можуть не тільки прикрашати її та нести якусь додаткову до поточного тексту смислове навантаження, але і використовуватися в якості оригінальних гіперпосилань на інші HTML-документи. наприклад:
Їжа -як шлях до довголіття
Графічне зображення можна не тільки розміщувати на Web- сторінку, але і використовувати його в якості фонової заливки в якості всієї сторінки. Вдало підібраний кольоровий малюнок, що займає все вікно Web браузера, додасть сайту ефективний зовнішній вигляд. Головне враховувати такий факт, не слід вибирати темні тони для фонових зображень. Щоб забезпечити Web сторінку графічним фоном, приймають атрибут ...
Створення горизонтальної лінійки. Щоб візуально розділити групи елементів Web сторінок, не пов'язані за змістом, або підкреслити якісь фрагменти тексту або заголовки, використовують горизонтальні лінійки. Для створення лінійок використовують дескриптор
. За замовчуванням Web браузер створює лінійки чорного кольору товщиною 2 пікселя. Певні атрибути дескриптора
дозволяють призначити лінійці будь-який бажаний колір, товщину, довжину і вирівняти ...