Экономико-математическое моделирование /
←предыдущая следующая→
1 2
Лекция 17 Списки и рамки в HTML
. Списки
Иногда при создании веб-страниц бывает полезно как-то упорядочить представленную на них инфор-мацию. Традиционно для этого применяют списки. В качестве первого примера давайте рассмотрим веб-страницу гипотетической фирмы «Лентяй». Допустим, мы сначала хотим перечислить предостав-ляемые услуги, а затем указать последовательность действий, необходимых для их заказа.
Маркированные и нумерованные списки
Перечисление услуг хорошо смотрится в виде маркированного списка. Для его организации применяет-ся тег
[li]Вкручивание электрических лампочек
ИЛИ
[li]Вкручивание электрических лампочек
И то и другое будет считаться элементом списка, и практически все броузеры интерпретируют эти за-писи корректно. Каждый элемент маркированного списка будет при просмотре отмечаться закрашен-ным кружком.
Что касается перечисления порядка действий для заказа, то его целесообразно организовать в виде ну-мерованного списка. Для этого служит тег
Итак, давайте посмотрим, как может выглядеть эта страничка. (Элемент выравнивания DIV – парный, SMALL – уменьшает шрифт)
Фирма "ЛЕНТЯЙ"
Фирма «ЛЕНТЯЙ»
Наша фирма предоставляет следующие услуги
[li]Вкручивание электрических лампочек
[li]Подметание пола
[li]Вынесение мусора из квартиры
[li]Мытье посуды
[li]Дефрагментация жестких дисков
Чтобы воспользоваться нашими услугами,следует:
[ol]
[li]Зарегистрироваться (здесь)
[li]Заполнить форму заказа (здесь)
[li]Получив письмо с паролем, послать пустой ответ
[li]Заполнить форму-подтверждение заказа
(Здесь)
[li]Приготовить деньги для оплаты услуг
См. файл:spiski1.html
. Как видите, мы здесь не употребляли закрывающий тег . Броузер обычно все равно понимает, где кончается элемент списка, поскольку после любого элемента стоит либо тег следующего элемента [li], либо тег завершения списка [/ul] или [/ol].
Другой вопрос, что будет, если код написан некорректно: например, указаны теги [li] без тега списка
Вообще говоря, такого допускать не следует, так как некоторые «строгие» броузеры в этом случае не будут отображать практически ничего. Большинство популярных броузеров, правда, попытаются уго-дить даже автору странички, написавшему такой код. Например, Internet Explorer 5, если встретит теги [li] без тега начала списка, интерпретирует их как маркированный список, хотя и не будет выделять его отступом, а не помеченные тегом [li] элементы списка оставит без маркера. Однако, повторяю, это из ряда вон выходящие случаи.
Благодаря тому, что списки отображаются с отступом, легко можно организовывать вложенные списки с помощью тех же тегов. Для этого надо просто начать новый список внутри уже начатого. Схема рас-положения тегов списка при этом получится примерно такая:
[ul]
[ul]
[ul]
[/ul]
[/ul]
Разумеется, отступы здесь обозначены только для наглядности — чтобы не перепутать, какой закры-вающий тег к какому открывающему тегу относится.
Далее, при вложении нескольких маркированных списков хочется каждый из них обозначить своим ти-пом маркера. Некоторые броузеры так и делают по умолчанию. Например, Internet Explorer элементы первого списка из серии вложенных обозначает закрашенным кружком, элементы вто¬рого — незакра-шенным кружком, а элементы всех следующих — квадратиком. Однако, во-первых, так поступают не все броузеры, а во-вторых, нам может захотеться изменить порядок маркеров. Для явного определения типа маркера в теге
В теге нумерованного списка [ol] можно установить атрибут TYPE= для определения типа нумера-ции. Если не указано ничего или установлено значение TYPE=”1”, то нумерация происходит обычными цифрами. Если установить TYPE="I" или "i", то получится нумерация римскими цифрами (соответст-венно, с использованием прописных или строчных букв).
И, наконец, для буквенных обозначений элементов списка устанавливают атрибут TYPE="A" или "а". Кроме того, иногда может потребоваться начать нумерацию не с единицы, а с какого-нибудь иного чис-ла. Для этого существует атрибут START=. Например, запись вызовет нумерацию элементов списка, начиная с числа 43. Далее пойдут элементы с номерами 44, 45 и т. д.
Может возникнуть естественный вопрос: а как использовать другие типы маркеров списков — разнооб-разные галочки, цветные кружки и прочие, которые мы так часто видим в WWW! Действительно, такая возможность есть, однако мы рассмотрим ее несколько позже, а пока приведем пример веб-странички фирмы «Лентяй» с использованием вложенных списков:
Фирма"ЛЕНТЯЙ"
Фирма «ЛЕНТЯЙ»
Haшa фирма предоставляет следующие услуги:
[li]Бытовые услуги
[li]Вкручивание электрических лампочек
[li]Услуги по наведению чистоты
[li]Подметание пола
[li]Bынeceниe мусора из квартиры
[li] посуды
[/ul]
[li]Приготовление пищи
[li]Koмпьютepныe услуги
[li]Дeфpaгмeнтaция жестких дисков
[li] Переустановка Windows
[/ul]
[/ul]
Для того, чтобы воспользоваться нашими услугами, следует:
[ol]
[li]Зарегистрироваться (Здесь)
[li]Заполнить форму заказа ( Здесь )
[li]Подтвердить заказ:
[li]Получив письмо с паролем подтверждения, послать пустой ответ, нажав "Reply"
[li]Заполнить форму-подтверждение заказа
(здесь)
[li]Приготовить деньги для оплаты услуг
[/ol]
(См. Файл spiski2.html)
Графические маркеры
Итак, выше мы упомянули о возможности создания графических маркеров списков. Она настолько привлекла создателей веб-страниц, что для их удобства были созданы специальные средства. Действи-тельно, одно дело, когда маркерами списка являются стандартные кружочки или квадратики, и совсем другое — когда каждый сам имеет возможность создать маркер! Маркером может быть все что угодно — от просто цветных и немного выпуклых кружков и квадратов до изощренных миниатюрных художе-ственных работ. Однако обратите внимание на то, что именно миниатюрных: маркеры списков должны по размеру как-то соответствовать высоте текстовой строки, и забота об этом ложится на автора еще на этапе создания изображения. Старайтесь создавать подоб¬ные изображения сразу в «натуральную вели-чину». Если создавать сна¬чала крупные рисунки, а потом просто уменьшать их, то при уменьшении они могут стать неузнаваемыми! Все дело в том, что компьютер «не зна¬ет» , какие детали рисунка важны для нашего восприятия. Если при уменьшении исчезнут важные детали, результат будет ужасным. Если исчезнут второстепенные детали, качество восприятия ухудшится, но общее впе-; чатление останется.
Чтобы проиллюстрировать возможность вставки в список графических маркеров, воспользуемся од-ним из примеров — веб-страницей фирмы «Лентяй». Если помните, там мы создали два списка:
маркированный (список услуг) и нумерованный (порядок оформления заказа). Теперь, допустим, мы хотим заменить кружки в маркированном списке на красные треугольники.
Сначала надо создать такой треугольник в любой программе, предназначенной для работы с изобра-жениями. В нашем примере мы тоже создали такой треугольник, даже отбрасывающий небольшую тень, и назвали этот файл marker1.jpg. Теперь вспомним, как мы задавали тип маркера списка:
Чтобы пойти дальше, заменим атрибут TYPE= на атрибут STYLE= (как, кстати, и положено делать в соответствии со спецификацией HTML 4.0):
Tenepь, чтобы заменить кружок на графический маркер, заменим свойство list-style-type на свойство list-style-image и определим местоположение нашего файла-рисунка:
Вот и все! Можно наслаждаться списком с графическими маркерами. Обратите внимание на то, что при указании имени файла мы заключили его не в обычные двойные кавычки, а в одинарные. Это сделано потому, что все значе-ние атрибута STYLE= заключено в двойные кавычки. Поэтому если бы мы ошибочно написали
то кавычка перед словом Images была бы воспринята как закрывающая, то есть атрибуту STYLE= было бы присвоено значение "list-style-image: url(", a все, что следует за этим, стало бы еще одним, нераспо-знанным атрибутом тега [ul].
Рамки
Рамки (или фреймы — Frame) — мощный механизм представления информации на Web-страницах. С помощью
←предыдущая следующая→
1 2
|
|