Иллюстрированный самоучитель по созданию сайтов

       

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


Еще одно частое применение графических элементов — это оформление кнопок. Вообще говоря, кнопка — это элемент взаимодействия с пользователем, так как предполагается, что когда он на ней нажмет, то что-нибудь произойдет. В этом разделе мы не будем рассматривать методы такого взаимодействия — о них речь пойдет ниже. Пока же мы только научимся создавать кнопки и использовать в них элементы графики.

Чтобы создать кнопку, достаточно поместить некоторый текст между тегами

<BUTTON>

и

</BUTTON>

, например, вот так:

<BUTTON>ЭТO KHОПKА</BUTTON>

Правда, повторим, из этого совершенно не следует, что при нажатии на этой кнопке что-нибудь произойдет. Однако кнопка будет вполне полноценной и даже будет “вдавливаться” при нажатии.

Вообще говоря, такие кнопки можно было создать и в старых версиях языка HTML, хотя там не было тега

< BUTTON >

. Интереснее тот факт, что между тегами

<BUTTON>...</BUTTON>



можно поместить не только текст, а все, что угодно. Если мы поместим туда тег

<IMG>

, то получим кнопку с графическим изображением. Можно поместить на кнопку и текст, и изображение (только не надо забывать о форматировании — например, надо вставлять теги

<BR>

для переноса строк и т. д.). Наконец, как показано в следующем примере, можно поместить на кнопку вообще любой блок

НТМL! В нашем примере мы поместили туда целую таблицу с разноцветными клетками.

Итак, проиллюстрируем сказанное таким файлом.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">

<HTML>

<HEAD>

<TITLE>KHOПKИ</TITLE>

<STYLE>

TD {color: white;} </STYLE>

</HEAD> <BODY> <BUTTON>ПРОСТО КНОПКА</BUTTON>

<BR><BR>

<button><img SRC="Images/email_b-l.gif" BORDER="0" WIDTH="26"

HEIGHT="23" ALT=""></BUTTON><BR><BR>

<BUTTON>Internet Explorer<BR>


<IMG SRC="Images/ie4.jpg" WIDTH="62" HEIGHT="61" BORDER="0"><>BR> 4.0 </BUTTON><BR><BR> <BUTTON><H1> Это большая кнопка</Н1>

<TABLE ALIGN="center" BGCOLOR="#408080" WIDTH="280" CELLSPACING="2" CELLPADDING="2" BORDER="3">

<TR>

<TD ALIGN="center" BGCOLOR-"#400040">Oнa содержит</ТD>

<TD ALIGN="center">целую таблицу</ТR> </TR> <TR>

<TD ALIGN="center">c разноцветными</ТD>

<TD ALIGN="center" BGCOLOR="#400040">Клеточки</TD> </TR>

</TABLE>

<BR>И ГОРИЗОНТАЛЬНУЮ ЛИНИЮ <HR WIDTH="400" SIZE="10" COLOR="Navy"> </BUTTON> </BODY>

</HTML>

Кстати, вторую и третью кнопку можно использовать как шаблон для дальнейшей работы: кнопка с конвертом вполне подойдет для отсылки сообщения электронной почты, а следующая подходит для ссылки на новую версию Internet Explorer (возможно, вам потребуется такая ссылка, если ваш документ будет оптимизирован под этот броузер).

Можете пока не обращать внимание на тег

<STYLE>

, который был ненароком использован в этом примере для того, чтобы более быстрым способом отобразить белыми буквами текст в ячейках таблицы.

Итак, мы познакомились с различными приемами использования графических элементов на веб-странице. Однако в предыдущих разделах ничего не было сказано о том, как же эти изображения создавать. Подготовке изображений в графических программах мы и посвятим два следующих коротких раздела.


Содержание раздела