ЛПР №10 Розміщення елементів на сторінці.
Звичайно, графічні елементи, з одного боку, річ небезпечна, оскільки графічні файли мають великі розміри і, відповідно, довго завантажуються з Інтернету. Але якщо на сторінці зовсім не використані елементи графіки, вона теж сприйматиметься неадекватно: одноманітність текстового викладу заважає читачеві сприймати матеріал, що навіть цікавить його.
Традиційні варіанти застосування графіки:
графічні роздільники
кнопки
маркери списків
буквиці.
Різні графічні роздільники, зазвичай горизонтальні, вживані замість горизонтальної межі (<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>
Наприклад:
<HTML><HEAD>
<TITLE>KHOПKИ</TITLE>
<STYLE>TD {color: white;} </STYLE>
</HEAD> <BODY>
<BUTTON>ЦЕ - ПРОСТО КНОПКА</BUTTON><br><br>
<BUTTON><img SRC="321.png" BORDER="0" WIDTH="57" height="57" ALT=""></BUTTON><br><br>
<BUTTON>Internet Explorer<BR><IMG SRC="123.png" WIDTH="62" HEIGHT="61" BORDER="0"><BR> 4.0 </BUTTON><br><br>
<BUTTON><H1> А це - велика кнопка</Н1>
<TABLE ALIGN="center" BGCOLOR="#408080" WIDTH="200" CELLSPACING="2" CELLPADDING="2" BORDER="3">
<TR>
<TD ALIGN="center" BGCOLOR-"#400040">Вона містить</ТD>
<TD ALIGN="center">цілу таблицю</ТR> </TR> <TR>
<TD ALIGN="center">з різнокольоровими</ТD>
<TD ALIGN="center" BGCOLOR="#400040">клітинками</TD> </TR>
</TABLE>
<BR>І горизонтальну пряму<HR WIDTH="150" SIZE="10" COLOR="red"> </BUTTON> </BODY></HTML>