Створення елементів для веб-сторінок

Створення елементів для веб-сторінок.

Розробка дизайну та створення графічних проектів

Графічні елементи оформлення веб-сторінок

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

Звичайно, графічні елементи, з одного боку, річ небезпечна, оскільки графічні файли мають великі розміри і, відповідно, довго завантажуються з Інтернету. Але якщо на сторінці зовсім не використані елементи графіки, вона теж сприйматиметься неадекватно: одноманітність текстового викладу заважає читачеві сприймати матеріал, що навіть цікавить його.

Звичайно, можна багато чого досягти, використовуючи стильове оформлення сторінки за допомогою каскадних таблиць стилів. Проте є ще один спосіб “пожвавити” веб-сторінку. Він полягає у використанні невеликого числа дрібних графічних елементів як елементи оформлення. Звернете увагу на те, що ці елементи повинні бути дрібними. Це важливо по двох причинах: по-перше, вони не відволікають на себе увагу, а тільки надають веб-сторінці кращого зовнішнього вигляду, і по-друге, малі за розміром малюнки завантажуються з Мережі досить швидко.

Лінійки і буквиця

Які ж графічні елементи можливо застосовувати як таку «прикрасу»? Тут треба проявити фантазію. Якщо ви придумаєте що-небудь оригінальне, ваша веб-сторінка виглядатиме незвично, «не як інші», і запам'ятається відвідувачеві.

Традиційні варіанти застосування графіки:

- графічні роздільники
- кнопки
- маркери списків
- буквиці.

Різні графічні роздільники, зазвичай горизонтальні, вживані замість горизонтальної межі (<HR>). Хоча тег <HR> і піддається налаштуванню, графічний роздільник часто виглядає кращим.

Застосування графічних елементів оформлення - різні кнопки і маркери списків.

Можна також застосувати графічний елемент як буквицю. Взагалі-то, незабаром підтримка буквиці передбачається і в HTML, але ця буквиця виконана об'ємною, з тінню і навіть як би з віддзеркаленням світла (хоча палітра цього GIF-файлу для зменшення розміру містить всього 16 пікселів). Неважко здогадатися, яким чином вона вставлена в текст:

<IMG SRC="bukv.gif" WIDTH="52" HEIGHT="61" BORDER="0" ALIGN="LEFT" АLТ="Д"> <i>авним-давно жив-був на білому світі цар Горох. І були у нього поля горохові, і ліси горохові, і...</i>

Установка атрибуту ALIGN="left" забезпечує обтікання текстом малюнка (буквиця). Про всяк випадок як альтернативний текст дається буква “Д”, щоб користувачеві з відключеною графікою не доводилося будувати здогадки щодо першої букви.

Для завершення оформлення можна ще створити градієнтний фон . Не забувайте тільки обов'язково вказувати значення атрибуту ALT= у всіх тегах <IMG>.

І, звичайно, не нехтуйте можливістю зробити графічні елементи активними - перетворити їх на гіперпосилання або навіть в карту графічних посилань. Наявність гіперпосилання завжди проводить хороше враження.

Графічні маркери

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

Маркером може бути все що завгодно - від просто кольорових і трохи опуклих кружків і квадратів до витончених мініатюрних художніх робіт. Проте пам’ятайте, що саме мініатюрних, маркери списків мають за розміром якось відповідати висоті текстового рядка. Прагніть створювати подібні зображення відразу у натуральну величину.

Якщо створювати спочатку великі малюнки, а потім просто зменшувати їх, то при зменшенні вони можуть стати невпізнанними! Якщо зникнуть другорядні деталі, якість сприйняття погіршає, але загальне враження залишиться.

Оформлення кнопок

Ще одне часте застосування графічних елементів - це оформлення кнопок. Взагалі кажучи, кнопка - це елемент взаємодії з користувачем, оскільки передбачається, що коли на ній натиснути, щось відбудеться.

Навчимося створювати кнопки і використовувати в них елементи графіки.

Щоб створити кнопку, досить помістити деякий текст між тегамі <BUTTON> і </BUTTON>, наприклад, от так:

<BUTTON>Це моя кнопка</BUTTON>

Правда, при натисненні на цій кнопці поки що нічого не відбудеться. Проте кнопка буде цілком повноцінною і навіть «вдавлюватиметься» при натисненні.

Між тегами <BUTTON>...</BUTTON> можна помістити не тільки текст, а все, що завгодно. Якщо ми помістимо туди тег <IMG>, то отримаємо кнопку з графічним зображенням. Можна помістити на кнопку і текст, і зображення (тільки не треба забувати про форматування - наприклад, треба вставляти теги <BR> для перенесення рядків і т. д.). Нарешті, можна помістити на кнопку взагалі будь-який блок НТМL.