Графические маркеры
Итак, в предыдущем разделе мы упомянули о возможности создания графических маркеров списков. Она настолько привлекла создателей веб-страниц, что для их удобства были созданы специальные средства. Действительно, одно дело, когда маркерами списка являются стандартные кружочки или квадратики, и совсем другое – когда каждый сам имеет возможность создать маркер! Маркером может быть все что у годно – от просто цветных и немного выпуклых кружков и квадратов до изощренных миниатюрных художественных работ. Однако обратите внимание на то, что именно миниатюрных, маркеры списков должны по размеру как-то соответствовать высоте текстовой строки, и забота об этом ложится на автора еще на этапе создания изображения. Старайтесь создавать подобные изображения сразу в “натуральную величину”. Если создавать сначала крупные рисунки, а потом просто уменьшать их, то при уменьшении они могут стать неузнаваемыми! Все дело в том, что компьютер “не знает”, какие детали рисунка важны для нашего восприятия. Если при уменьшении исчезнут важные детали, результат будет ужасным. Если исчезнут второстепенные детали, качество восприятия ухудшится, но общее впечатление останется.
Чтобы проиллюстрировать возможность вставки в список графических маркеров, воспользуемся одним из примеров предыдущей главы – веб-страницей фирмы “Лентяй”. Если помните, там мы создали два списка: маркированный (список услуг) и нумерованный (порядок оформления заказа). Теперь, допустим, мы хотим заменить кружки в маркированном списке на красные треугольники.
Сначала надо создать такой треугольник в любой программе, предназначенной для работы с изображениями. В нашем примере мы тоже создали такой треугольник, даже отбрасывающий небольшую тень, и назвали этот файл marker1.gif. Теперь вспомним, как мы задавали тип маркера списка:
<UL TYPE="disc">Чтобы пойти дальше, чуть приподнимем завесу над материалом главы 4 и заменим атрибут TYPE= на атрибут STYLE= (как, кстати, и положено делать в соответствии со спецификацией HTML 4.0):
<UL STYLE="list-style-type: disc;">Теперь, чтобы заменить кружок на графический маркер, заменим свойство list-style-type на свойство list-style-image и определим местоположение нашего файла-рисунка:
<UL STYLE="list-style-image: url('Images/markerl.gif);">Вот и все! Можно наслаждаться списком с графическими маркерами. Обратите внимание на то, что при указании имени файла мы заключили его не в обычные двойные кавычки, а в одинарные. Это сделано потому, что все значение атрибута STYLE= заключено в двойные кавычки. Поэтому если бы мы ошибочно написали:
<UL STYLE="list-style-image: uri("Images/marker1.gif");">…то кавычка перед словом Images была бы воспринята как закрывающая, то есть атрибуту STYLE= было бы присвоено значение "list-style-image: url(", а все, что следует за этим, стало бы еще одним, нераспознанным атрибутом тега <UL>.
Оформление кнопок
Еще одно частое применение графических элементов – это оформление кнопок. Вообще говоря, кнопка – это элемент взаимодействия с пользователем, так как предполагается, что когда он на ней нажмет, то что-нибудь произойдет. В этом разделе мы не будем рассматривать методы такого взаимодействия – о них речь пойдет ниже. Пока же мы только научимся создавать кнопки и использовать в них элементы графики.
Чтобы создать кнопку, достаточно поместить некоторый текст между тегами <BUTTON> и </BUTTON>, например, вот так:
<BUTTON>ЭТО КНОПКА</BUTTON>Правда, повторим, из этого совершенно не следует, что при нажатии на этой кнопке что-нибудь произойдет. Однако кнопка будет вполне полноценной и даже будет “вдавливаться” при нажатии.
Вообще говоря, такие кнопки можно было создать и в старых версиях языка HTML, хотя там не было тега < BUTTON >. Интереснее тот факт, что между тегами <BUTTON>…</BUTTON> можно поместить не только текст, а все, что угодно. Если мы поместим туда тег <IMG>, то получим кнопку с графическим изображением. Можно поместить на кнопку и текст, и изображение (только не надо забывать о форматировании – например, надо вставлять теги <BR> для переноса строк и т. д.). Наконец, как показано в следующем примере, можно поместить на кнопку вообще любой блок НТМL!
В нашем примере мы поместили туда целую таблицу с разноцветными клетками.
Итак, проиллюстрируем сказанное таким файлом.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN"><HTML> <HEAD> <TITLE>КНОПКИ</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> Это большая кнопка</H1> <TABLE ALIGN="center" BGCOLOR="#408080" WIDTH="280" CELLSPACING="2" CELLPADDING="2" BORDER="3"> <TR> <TD ALIGN="center" BGCOLOR- "#400040">Она содержит</TD> <TD ALIGN="center">целую таблицу</TD> </TR> <TR> <TD ALIGN="center">с разноцветными</TD> <TD ALIGN="center" BGCOLOR="#400040">Клеточки</TD> </TR> </TABLE> <BR>И ГОРИЗОНТАЛЬНУЮ ЛИНИЮ <HR WIDTH="400" SIZE="10" COLOR="Navy"> </BUTTON></BODY> </HTML>Кстати, вторую и третью кнопку можно использовать как шаблон для дальнейшей работы: кнопка с конвертом вполне подойдет для отсылки сообщения электронной почты, а следующая подходит для ссылки на новую версию Internet Explorer (возможно, вам потребуется такая ссылка, если ваш документ будет оптимизирован под этот браузер).
Можете пока не обращать внимание на тег <STYLE>, который был ненароком использован в этом примере для того, чтобы более быстрым способом отобразить белыми буквами текст в ячейках таблицы.
Итак, мы познакомились с различными приемами использования графических элементов на веб-странице. Однако в предыдущих разделах ничего не было сказано о том, как же эти изображения создавать. Подготовке изображений в графических программах мы и посвятим два следующих коротких раздела.