Лекция№17
Работа из раздела: «
Экономико-математическое моделирование»
Лекция 17 Списки и рамки в HTML
. Списки
Иногда при создании веб-страниц бывает полезно как-то упорядочить
представленную на них информацию. Традиционно для этого применяют списки. В
качестве первого примера давайте рассмотрим веб-страницу гипотетической
фирмы «Лентяй». Допустим, мы сначала хотим перечислить предоставляемые
услуги, а затем указать последовательность действий, необходимых для их
заказа.
Маркированные и нумерованные списки
Перечисление услуг хорошо смотрится в виде маркированного списка. Для его
организации применяется тег
(Unorerer List). Все, что находится между
ним и его закрывающим тегом (
), считается маркированным списком.
Каждый элемент списка должен быть при этом обозначен тегом
. Этот тег
можно употреблять без закрывающего (хотя можно и с ним). То есть, можно
написать:
Вкручивание электрических лампочек
ИЛИ
Вкручивание электрических лампочек
И то и другое будет считаться элементом списка, и практически все броузеры
интерпретируют эти записи корректно. Каждый элемент маркированного списка
будет при просмотре отмечаться закрашенным кружком.
Что касается перечисления порядка действий для заказа, то его целесообразно
организовать в виде нумерованного списка. Для этого служит тег
,(Orderer List) а элементы списка также обозначаются тегом - . И
нумерованные, и маркированные списки в большинстве броузеров выделяются
небольшим отступом.
Итак, давайте посмотрим, как может выглядеть эта страничка. (Элемент
выравнивания DIV – парный, SMALL – уменьшает шрифт)
<НЕАD>
<ТIТLЕ>Фирма 'ЛЕНТЯЙ'ТIТLЕ> НЕАD>
Фирма «ЛЕНТЯЙ»
Наша фирма предоставляет следующие услуги
- Вкручивание электрических лампочек
- Подметание пола
- Вынесение мусора из квартиры
- Мытье посуды
- Дефрагментация жестких дисков
Чтобы воспользоваться нашими услугами,следует:
- Зарегистрироваться (здесь)
- Заполнить форму заказа (здесь)
- Получив письмо с паролем, послать пустой ответ
- Заполнить форму-подтверждение заказа
(<А HREF='form2.html'>Здесь<:/A>)
- Приготовить деньги для оплаты услуг
См. файл:spiski1.html
. Как видите, мы здесь не употребляли закрывающий тег . Броузер обычно
все равно понимает, где кончается элемент списка, поскольку после любого
элемента стоит либо тег следующего элемента - , либо тег завершения
списка или
.
Другой вопрос, что будет, если код написан некорректно: например, указаны
теги
без тега списка или , или в списке есть элементы без
тега - ?
Вообще говоря, такого допускать не следует, так как некоторые «строгие»
броузеры в этом случае не будут отображать практически ничего. Большинство
популярных броузеров, правда, попытаются угодить даже автору странички,
написавшему такой код. Например, Internet Explorer 5, если встретит теги
- без тега начала списка, интерпретирует их как маркированный список,
хотя и не будет выделять его отступом, а не помеченные тегом
- элементы
списка оставит без маркера. Однако, повторяю, это из ряда вон выходящие
случаи.
Благодаря тому, что списки отображаются с отступом, легко можно
организовывать вложенные списки с помощью тех же тегов. Для этого надо
просто начать новый список внутри уже начатого. Схема расположения тегов
списка при этом получится примерно такая:
Разумеется, отступы здесь обозначены только для наглядности — чтобы не
перепутать, какой закрывающий тег к какому открывающему тегу относится.
Далее, при вложении нескольких маркированных списков хочется каждый из них
обозначить своим типом маркера. Некоторые броузеры так и делают по
умолчанию. Например, Internet Explorer элементы первого списка из серии
вложенных обозначает закрашенным кружком, элементы второго — незакрашенным
кружком, а элементы всех следующих — квадратиком. Однако, во-первых, так
поступают не все броузеры, а во-вторых, нам может захотеться изменить
порядок маркеров. Для явного определения типа маркера в теге
следует
установить атрибут TYPE=. У него могут быть три значения: 'disc', 'square'
и 'circle', что означает, соответственно, закрашенный кружок, квадратик и
незакрашенный кружок.
В теге нумерованного списка можно установить атрибут TYPE= для
определения типа нумерации. Если не указано ничего или установлено значение
TYPE=”1”, то нумерация происходит обычными цифрами. Если установить
TYPE='I' или 'i', то получится нумерация римскими цифрами (соответственно,
с использованием прописных или строчных букв).
И, наконец, для буквенных обозначений элементов списка устанавливают
атрибут TYPE='A' или 'а'. Кроме того, иногда может потребоваться начать
нумерацию не с единицы, а с какого-нибудь иного числа. Для этого существует
атрибут START=. Например, запись вызовет нумерацию
элементов списка, начиная с числа 43. Далее пойдут элементы с номерами 44,
45 и т. д.
Может возникнуть естественный вопрос: а как использовать другие типы
маркеров списков — разнообразные галочки, цветные кружки и прочие, которые
мы так часто видим в WWW! Действительно, такая возможность есть, однако мы
рассмотрим ее несколько позже, а пока приведем пример веб-странички фирмы
«Лентяй» с использованием вложенных списков:
Фирма'ЛЕНТЯЙ'
Фирма «ЛЕНТЯЙ»
Haшa фирма предоставляет следующие услуги:
- Бытовые услуги
- Вкручивание электрических лампочек
- Услуги по наведению чистоты
- Подметание пола
- Bынeceниe мусора из квартиры
- посуды
- Приготовление пищи
- Koмпьютepныe услуги
- Дeфpaгмeнтaция жестких дисков
- Переустановка Windows
Для того, чтобы воспользоваться нашими услугами,
следует:
- Зарегистрироваться (<А HREF='reg.html'>Здесь)
- Заполнить форму заказа (<А HREF='forml.htm1'> Здесь )
- Подтвердить заказ:
- Получив письмо с паролем подтверждения, послать пустой ответ, нажав
'Reply'
- Заполнить форму-подтверждение заказа
(<А HREF='form2.html'>здесьА>)
- Приготовить деньги для оплаты услуг
(См. Файл spiski2.html)
Графические маркеры
Итак, выше мы упомянули о возможности создания графических маркеров
списков. Она настолько привлекла создателей веб-страниц, что для их
удобства были созданы специальные средства. Действительно, одно дело, когда
маркерами списка являются стандартные кружочки или квадратики, и совсем
другое — когда каждый сам имеет возможность создать маркер! Маркером может
быть все что угодно — от просто цветных и немного выпуклых кружков и
квадратов до изощренных миниатюрных художественных работ. Однако обратите
внимание на то, что именно миниатюрных: маркеры списков должны по размеру
как-то соответствовать высоте текстовой строки, и забота об этом ложится на
автора еще на этапе создания изображения. Старайтесь создавать подобные
изображения сразу в «натуральную величину». Если создавать сначала крупные
рисунки, а потом просто уменьшать их, то при уменьшении они могут стать
неузнаваемыми! Все дело в том, что компьютер «не знает» , какие детали
рисунка важны для нашего восприятия. Если при уменьшении исчезнут важные
детали, результат будет ужасным. Если исчезнут второстепенные детали,
качество восприятия ухудшится, но общее впе-; чатление останется.
Чтобы проиллюстрировать возможность вставки в список графических
маркеров, воспользуемся одним из примеров — веб-страницей фирмы «Лентяй».
Если помните, там мы создали два списка:
[pic]маркированный (список услуг) и нумерованный (порядок оформления
заказа). Теперь, допустим, мы хотим заменить кружки в маркированном списке
на красные треугольники.
Сначала надо создать такой треугольник в любой программе, предназначенной
для работы с изображениями. В нашем примере мы тоже создали такой
треугольник, даже отбрасывающий небольшую тень, и назвали этот файл
marker1.jpg. Теперь вспомним, как мы задавали тип маркера списка:
Чтобы пойти дальше, заменим атрибут TYPE= на атрибут STYLE= (как, кстати,
и положено делать в соответствии со спецификацией HTML 4.0):
Tenepь, чтобы заменить кружок на графический маркер, заменим свойство list-
style-type на свойство list-style-image и определим местоположение нашего
файла-рисунка:
Вот и все! Можно наслаждаться списком с графическими маркерами. Обратите
внимание на то, что при указании имени файла мы заключили его не в обычные
двойные кавычки, а в одинарные. Это сделано потому, что все значение
атрибута STYLE= заключено в двойные кавычки. Поэтому если бы мы ошибочно
написали
то кавычка перед словом Images была бы воспринята как закрывающая, то есть
атрибуту STYLE= было бы присвоено значение 'list-style-image: url(', a все,
что следует за этим, стало бы еще одним, нераспознанным атрибутом тега
.
Рамки
Рамки (или фреймы — Frame) — мощный механизм представления информации
на Web-страницах. С помощью рамок экран разделяется на несколько областей,
в каждой из которых отображается содержимое отдельной страницы и даже Web-
узла.
Создание рамок
Для создания рамок (областей страницы) иcпользуют флаг , а для их описания — флаги < FRAME >. Начнем с
простого примера.
Создайте в текстовом редакторе два маленьких Web-документа и сохраните
их как файлы a.htm и b.htm. Эти страницы будут отличаться только
названиями.
Файл a.htm:
<ТIТLЕ>Рамки. Страничка A
<ВОDY>страничка А
Файл b.htm:
Рамки. Страничка B
<ВОDY>страничка В
Создайте базовую страницу, на которой будут отображаться рамки, и
сохраните baza.htm:
Paмки