Додавання до веб-сторінки гіпертекстових та графічних елементів

ГРАФІЧНІ ЕЛЕМЕНТИ ОФОРМЛЕННЯ ВЕБ-СТОРІНОК

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

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

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

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

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

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

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

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

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

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

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

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

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

ГРАФІЧНІ МАРКЕРИ

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

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

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

Приклад коду:

<h1>Пори року

<ul style=”list-style-image: url(‘1.gif’);”>

<li>Весна</li>

<li>Літо</li>

<li>Осінь</li>

<li>Зима</li>

</ul></h1>

ОФОРМЛЕННЯ КНОПОК

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

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

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

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

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

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