Оформление кнопок
Еще одно частое применение графических элементов — это оформление кнопок. Вообще говоря, кнопка — это элемент взаимодействия с пользователем, так как предполагается, что когда он на ней нажмет, то что-нибудь произойдет. В этом разделе мы не будем рассматривать методы такого взаимодействия — о них речь пойдет ниже. Пока же мы только научимся создавать кнопки и использовать в них элементы графики.
Чтобы создать кнопку, достаточно поместить некоторый текст между тегами
<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>
, который был ненароком использован в этом примере для того, чтобы более быстрым способом отобразить белыми буквами текст в ячейках таблицы.
Итак, мы познакомились с различными приемами использования графических элементов на веб-странице. Однако в предыдущих разделах ничего не было сказано о том, как же эти изображения создавать. Подготовке изображений в графических программах мы и посвятим два следующих коротких раздела.
