|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
2.3. Как создать списки на веб-странице Иногда при создании веб-страниц бывает полезно (а порой даже необходимо) как-то упорядочить представленную на них информацию. В традиционном языке HTML для этого применяют списки и таблицы. Более гибко это можно сделать с помощью каскадных таблиц стилей, однако сначало мы рассмотрим стандартные методы. В качестве первого примера давайте рассмотрим веб-страницу гипотетической фирмы “Лентяй”. Допустим, мы сначала хотим перечислить предоставляемые услуги, а затем указать последовательность действий, необходимых для их заказа. Маркированные и нумерованные списки Перечисление услуг хорошо смотрится в виде маркированного списка. Для его организации применяется тег <UL> . Все, что находится между ним и его открывающим тегом ( </UL> ), считается маркированным списком. Каждый элемент списка должен быть при этом обозначен тегом <LI>. Этот тег можно употреблять без закрывающего (хотя можно и с ним). То есть, можно написать: <LI>Вкручивание электрических лампочек или <LI>Вкручивание электрических лампочек</LI> И то и другое будет считаться элементом списка, и практически все броузеры интерпретируют эти записи корректно. Каждый элемент маркированного списка будет при просмотре отмечаться закрашенным кружком. Что о касается перечисления порядка действий для заказа, то его целесооб- разно организовать в виде нумерованного списка. Для этого служит тег <OL> , а элементы списка также обозначаются тегом <LI> . И нумерованные, и маркированные списки в большинстве броузеров выделяются небольшим отступом. Итак, давайте посмотрим, как может выглядеть эта страничка. <HTML> <HEAD> <TITLE> фирма "ЛЕНТЯЙ"</TITLE> </HEAD> <BODY BGCOLOR="#D2FFFF" TEXT="#003737" LINK="#006A6A" VLINK="#006A6A" ALINK="#006A6A"> <DIV ALIGN""center"><H1> фирма «ЛЕНТЯЙ «</H1></DIV> <FONT SIZE="+l">Haшa фирма предоставляет следующие услуги </FONT> <UL> <li>Вкручивание электрических лампочек <li>Подметание пола <li>Вынесение мусора из квартиры <li>Мытье посуды <li>Дефрагментация жестких дисков </UL> <FONT SIZE="+l">Чтобы воспользоваться нашими услугами,следует: </FONT> <OL> <li>Зарегистрироваться (<a HRЕF="#reg.html"> здесь</a>) <li>Заполнить форму заказа (<a HRЕF="forml.html">здесь</a>) <li>Получив письмо с паролем, послать пустой ответ <li>Заполнить форму-подтверждение заказа (<a HRЕF="form2.html">здесь</a>) <li>Приготовить деньги для оплаты услуг </OL> </BODY> </HTML>
Рис. 2.9. Применение маркированного и нумерованного списков Результат показан на рис. 2.9. Как видите, мы здесь не употребляли закрывающий тег </LI> . Броузер обычно все равно понимает, где кончается элемент списка, поскольку после любого элемента стоит либо тег следующего элемента <U> , либо тег завершения списка </UL> или </OL>. Другой вопрос, что будет, если код написан некорректно: например, указаны теги <LI> без тега списка <OL> или <UL> , или в списке есть элементы без тега <LI> ? Вообще говоря, такого допускать не следует, так как некоторые “строгие” браузеры в этом случае не будут отображать практически ничего. Большинство популярных броузеров, правда, попытаются угодить даже автору странички, написавшему такой код. Например, Internet Explorer 5, если встретит теги <LI> без тега начала списка, интерпретирует их как маркирован ный список, хотя и не будет выделять его отступом, а не помеченные тегом <LI> элементы списка оставит без маркера. Однако, повторяю, это из ряда вон выходящие случаи. Благодаря тому, что списки отображаются с отступом, легко можно организовывать вложенные списки с помощью тех же тегов. Для этого надо просто начать новый список внутри уже начатого. Схема расположения тегов списка при этом получится примерно такая: <UL> <UL> <UL> </UL> </UL> </UL> Разумеется, отступы здесь обозначены только для наглядности — чтобы не перепутать, какой закрывающий тег к какому открывающему тегу относится. Далее, при вложении нескольких маркированных списков хочется каждый из них обозначить своим типом маркера. Некоторые броузеры так и делают по умолчанию. Например, Internet Explorer элементы первого списка из серии вложенных обозначает закрашенным кружком, элементы второго — незакрашенным кружком, а элементы всех следующих — квадратиком. Однако, во-первых, так поступают не все броузеры, а во-вторых, нам может захотеться изменить порядок маркеров. Для явного определения типа маркера в теге <UL> следует установить атрибут TYPE=. У него могут быть три значения: "disc", "square" и "circle", что означает, соответственно, закрашенный кружок, квадратик и незакрашенный кружок. В теге нумерованного списка <OL> можно установить атрибут TYPE= для определения типа нумерации. Если не указано ничего или установлено значение TYPE="1", то нумерация происходит обычными цифрами. Если установить TYPE="I" или "i", то получится нумерацию римскими цифрами (соответственно, с использованием прописных или строчных букв). И, наконец, для буквенных обозначений элементов списка устанавливают атрибут TYPE="A" или "а". Кроме того, иногда может потребоваться начать нумерацию не с единицы, а с какого-нибудь иного числа. Для этого существует атрибут START=. Например, запись <OL START="43"> вызовет нумерацию элементов списка, начиная с числа 43. Далее пойдут элементы с номерами 44, 45 и т. д. Может возникнуть естественный вопрос: а как использовать другие типы маркеров списков — разнообразные галочки, цветные кружки и прочие, которые мы так часто видим в WWW,? Действительно, такая возможность есть, однако мы рассмотрим ее несколько позже, в разделе Si.3. А пока приведем пример веб-странички фирмы “Лентяй” с использованием вложенных списков: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <head> <title>Фирма "ЛЕНТЯЙ"</title> </head> <body BGCOLOR="#D2FFFF" TEXT="#003737" LINK="#006A6A" VLINK="#006A6A" ALINK="#006A6A"> <DIV ALING="center"><H1>Фирма «ЛEHTЯЙ»</H1></DIV> <FONT SIZE="+l">Haшa фирма предоставляет следующие услуги: </FONТ> <UL TYPE="disc"> <LI>Бытовые услуги <UL TYPE="square"> <LI>Вкручивание электрических лампочек <LI>Услуги по наведению чистоты <UL TYPE="circle"> <LI>Подметание пола <LI>Вынесение мусора из квартиры <LI>Мытье посуды </UL> </UL> <LI>Приготовление пищи <LI>Компьютерные услуги <UL TYPE="square"> <LI>Дефрагментация жестких дисков <LI>Переустановка Windows </UL> </UL> <FONT SIZE="+1">Для того, чтобы воспользоваться нашими услугами, следует:</FONT> <OL> <LI>Зарегистрироваться (<A HREF="reg.html">здесь</A>) <LI>Заполнить форму заказа (<A HREF="forml.htm1">здесь</А>) <LI>Пoдтвepдить заказ: <OL TYPE="I"> <LI>Получив письмо с паролем подтверждения, послать пустой ответ, нажав "Reply" <LI>Заполнить форму-подтверждение заказа (<A HREF="form2.html">здесь</A>) </OL> <LI>Приготовить деньги для оплаты услуг </OL> </body> </html> Результат показан на рис .2.10. Между прочим, при желании можно изменить вид маркера даже у отдельного элемента списка. Для этого следует установить атрибут TYPE= у тега <LI> . Однако это не будет смотреться очень хорошо, за исключением специальных случаев. Мы пока намеренно не приводим примеры того, что могло бы быть в файлах reg.html, form! .html и form2.html, на которые есть ссылки в этом примере. Списки определений Теперь давайте рассмотрим совершенно иной пример. Допустим, у нас уже есть сайт, на котором используется довольно много терминов, и мы хотим сделать отдельную страничку, поясняющую их. Давайте попробуем организовать такую страничку-словарь, а заодно рассмотрим еще один вид HTML-списка. Кстати, впоследствии мы вполне сможем использовать эту страничку как шаблон для своего словаря терминов. Итак, нам необходима страничка, организованная, как словарик. Это значит, что в ее начале целесообразно расположить алфавит, чтобы читатель, щелкнувший на какой-либо букве, мог тотчас попасть на соответствую-
Рис. 2.10. Применение вложенных списков щее место в словаре. Для этого каждая буква алфавита должна быть оформлена как гиперссылка, например: <A HREF="#BukvaV">B</A> а в соответствующее место в словаре нужно не забыть поставить соответствующий якорь, например: <A NAME="BukvaV">B</A> Для улучшения наглядного отделения раздела одной буквы от другой выделим каждую букву словаря самым крупным шрифтом, используя тег <Н1> , а также введем разделительную горизонтальную черту. Поскольку словарь — вещь достаточно официальная и строгая, пусть наши горизонтальные разделители тоже примут строгий вид — для этого достаточно выровнять их не по центру, а по левому краю, и сделать относительно короткими, например, вот так: <HR ALIGN="left" WIDTH="40%"> Кстати, цветовую схему нужно в этом случае выбрать тоже достаточно строгую. Можно вообще подать черные буквы на белом фоне, но в нашем примере мы решили все же чуть-чуть смягчить контраст. Кроме того, читателю нужно предоставить возможность быстрого перемещения в любое место словаря. Вы скажете, что у нас уже есть для этого алфавит? Но ведь он расположен в верхней части страницы, а в поисках описаний терминов (кроме нескольких первых), пользователь неизбежно уйдет по страничке вниз и алфавит ему будет недоступен. Идеальный случай, когда алфавит все время виден сверху, а пока примем простое решение: время от времени (лучше всего в конце каждой буквенной рубрики) поставим небольшие (в смысле напечатанные мелким шрифтом) гиперссылки, ведущие наверх, к алфавиту: <SMALL><A HREF="#Top">B начало</А></SMALL> Теперь обсудим, как организовать объяснение терминов. Для этого в HTML предусмотрен тег <DL> . Все, что находится между ним и его закрывающей парой </DL> , считается списком определений. Внутри этого списка возможно применение тегов <DT> для выделения самих терминов и <DD> для их определений. Теги <DT> и <DD> могут использоваться без соответствующей закрывающей пары (сравните с рассмотренным ранее тегом <LI> ). Элементы, обозначенные как термины ( <DT> ), выводятся практически без отступа, а элементы, обозначенные как определения ( <DD> ) — с довольно большим отступом. Ни те, ни другие элементы не маркируются. На наш взгляд, хорошо бы еще элементы-термины выделять, например полужирным начертанием. Некоторые броузеры так и делают, однако большинство — нет. Поэтому в нашем примере мы сами на всякий случай заботимся об этом, заключая каждый термин между тегами <В>...</В>. Итак, приведем пример странички-словаря терминов. Для экономии места алфавит здесь обрывается на букве “Е”. Далее его легко можно продолжить самостоятельно (а если терминов много, то, возможно, стоит его продолжить в другом файле, чтобы не заставлять пользователя ждать загрузки слишком большого файла с сервера). Более того, здесь заполнены только разделы на буквы “А” и “Б”, чего для примера вполне достаточно. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <HTML> <HEAD> <TITLE>Словарь терминов</TITLE> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html;charset=windows-1251"> </HEAD> <BODY BGCOLOR="#EAEAEA" TEXT="Black" LINK="#7A3F51" VLINK="#7A3F51" ALINK="#7A3F51"> <H1><A NАМЕ="Тор">Словарь терминов</А></Н1> <HR ALIGN="left" WIDTH="40%"> <BR> <А HREF=="#BukvaA">A</A> <А HREF="#BukvaB">Б</A> <А HREF="#BukvaV">B</A> <А HREF="#BukvaG">Г</A> <А HREF="#BukvaD">Д</A> <А HREF="#BukvaE">E</A> </НR> <HR ALIGN="left" WIDTH="40%"> <H1><A NAME="BukvaA">A</A></H> <DL> <DT><A NAME="avtentich"><B>ABTEHTИЧECKИЙ КАДАНС</В></А> <DD>кадансовый оборот, в котором заключительная тоническая гармония предваряется доминантовой <DT><A NAME="aliquot"><B>AЛИKBOTHЫE СТРУНЫ</В></А> <DD>резонирующие струны, к которым исполнитель не прикасается во время игры <DT><A NAME="atakta"><B>ATAKTA</B></A> <DD>гармоническйй элемент на басу нижнего или верхнего вводного тона </DL> <SMALL><A HREF="#Top">B начало</А></SMALL> <HR ALIGN="left" WIDTH="40%"> <H1><A NAME="BukvaB">B</A></H1> <DL> <DT><A NAME="bagatel"><B>БАГАТЕЛЬ</B></A> <DD>небольшая нетрудная для исполнения пьеса <DT><A NAME="bartok"><B>БAPTOKOBCKOE ПИЦЦИКАТО</В></А> <DD>сильный щипок струны с последующим ударом струны о гриф <DT><A NAME="bonang"><B>БOHAHГ</B></A> <DD>Ha6op из 10-12 гонгов разного размера </DL> <SMALL><A HREF="#Top">B начало</А></SMALL> <HR ALIGN="left" WIDTH="40%"> <H1><A NAME="BukvaV">B</A></Hl> <DL> </DL> <SMALL><A HREF=<"#Top">B начало</А></SMALL> <HR ALIGN="left" WIDTH="40%"> <H1XA NAME=<"#BukvaG">Г</A></H1> <DL> </DL> <SMALL><A HREF="#Top">B начало</А></Small> <HR ALIGN="left" WIDTH="40%"> <H1><A NAME=="#BukvaD">A</A></H1> <DL> </DL> <SMALL><A HREF="#Top">B начало</А></Small> <HR ALIGN="left" WIDTH="40%"> <H1><A NAME="BukvaE">E</A></Hl> <DL> </DL> </DL> <SMALL><A HREF="#Top">B начало</А></Small> </BODY> </HTML> Результат показан на рис. 2.11. Как видите, все достаточно строго и наглядно. Кстати, обратите внимание на то, что каждый термин мы также оформили как якорь. Это сделано для того, чтобы с других страниц нашего предполагаемого сайта можно было ссылаться непосредственно на объяснение этого термина. Например, если наш файл-словарь терминов называется glossary, html, то в каком-нибудь другом файле на этом сайте мы можем написать приблизительно следующее: ...характеризуется частым использованием <А HREF="glossary.html #bartok">6apтоковскoгo пиццикато</А>, а также приемов типа постукивания по декам и обечайке... В этом случае, пользователь, читающий этот текст и не понявший смысл термина бартоковское пиццикато может щелкнуть на нем и попасть в
Рис. 2.11. Использование списка терминов соответствующий раздел словаря терминов, причем не куда-нибудь, а точно в то место, где этот термин поясняется. Если вы внимательно просмотрели последний листинг, то, вероятно, заметили еще одну строку, значение которой ранее не пояснялось: <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=windows-1251"> Здесь применен тег < МЕТА> . Он может, вообще говоря, использоваться для ввода различной дополнительной информации: ключевых слов, описания веб-страницы, указания ее автора, программы-генератора и т. п. Но в дан- ном случае этот тег используется для определения кодировки символов. Поскольку в тексте используются русские буквы, то есть, символы с ASCII-кодами, большими 128, необходимо указать, в какой кодировке эти символы нужно отображать. Если кто не совсем понял, о чем речь, тому можно это место пропустить, но лучше обратиться к соответствующей литературе. Большинство броузеров обычно это делают автоматически, и кроме того, имеют встроенную возможность выбора кодировки. Как правило она находится в меню View (Вид). Однако иногда бывает полезно указать кодировку в явном виде. В данном случае мы имеем дело с файлом в кодировке Windows, поэтому в качестве значение свойства charset указано "windows-1251". Кстати, если вы работаете в другой кодировке, например, KOI8, вам следует ввести другое значение — "koi8-r", иначе эта страничка будет нечитаемой. К сожалению, для явного указания кодировки приходится использовать столь длинный тег. Правда, многие броузеры сейчас начинают понимать и просто указание “без лишних слов”: <МЕТА CHARSET="windows-1251"> . Однако этот метод не универсален, поэтому для лучшей совместимости стоит всегда писать длинную строку, приведенную выше. |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|