Лекция 17 Списки и рамки в HTML

. Списки

Иногда при создании веб-страниц бывает полезно как-то упорядочить представленную на них информацию. Традиционно для этого применяют списки. В качестве первого примера давайте рассмотрим веб-страницу гипотетической фирмы «Лентяй». Допустим, мы сначала хотим перечислить предоставляемые услуги, а затем указать последовательность действий, необходимых для их заказа.

Маркированные и нумерованные списки

Перечисление услуг хорошо смотрится в виде маркированного списка. Для его организации применяется тег <UL> (Unorerer List). Все, что находится между ним и его закрывающим тегом (UL>), считается маркированным списком. Каждый элемент списка должен быть при этом обозначен тегом <LI>. Этот тег можно употреблять без закрывающего (хотя можно и с ним). То есть, можно написать:

<LI>Вкручивание электрических лампочек

ИЛИ

  • Вкручивание электрических лампочекLI>

    И то и другое будет считаться элементом списка, и практически все броузеры интерпретируют эти записи корректно. Каждый элемент маркированного списка будет при просмотре отмечаться закрашенным кружком.

    Что касается перечисления порядка действий для заказа, то его целесообразно организовать в виде нумерованного списка. Для этого служит тег <OL>,(Orderer List) а элементы списка также обозначаются тегом <LI>. И нумерованные, и маркированные списки в большинстве броузеров выделяются небольшим отступом.

    Итак, давайте посмотрим, как может выглядеть эта страничка. (Элемент выравнивания DIV – парный, SMALL – уменьшает шрифт)

    <НЕАD>

    <ТIТLЕ>Фирма "ЛЕНТЯЙ"

    ТЕХТ="#003737" LINK="#006A6A" VLINK="#006A6A" ALINK="#006A6A">

    Фирма «ЛЕНТЯЙ»

    <FONT SIZE="+1">Наша фирма предоставляет следующие услуги FONT>

    <UL>

    <LI>Вкручивание электрических лампочек

  • Подметание пола

  • Вынесение мусора из квартиры

  • Мытье посуды

  • Дефрагментация жестких дисков

    UL>

    <FONT SIZE="+1">Чтобы воспользоваться нашими услугами,следует:

    FONT>

    <OL>

  • Зарегистрироваться (HREF="reg.html">здесьA>)

    <LI>Заполнить форму заказа (HREF="form1.html">здесьA>)

    <LI>Получив письмо с паролем, послать пустой ответ

  • Заполнить форму-подтверждение заказа

    (<А HREF="form2.html">Здесь<:/A>)

    <LI>Приготовить деньги для оплаты услуг OL>

    См. файл:spiski1.html

    . Как видите, мы здесь не употребляли закрывающий тег LI>. Броузер обычно все равно понимает, где кончается элемент списка, поскольку после любого элемента стоит либо тег следующего элемента <LI>, либо тег завершения списка UL> или OL>.

    Другой вопрос, что будет, если код написан некорректно: например, указаны теги <LI> без тега списка <OL> или <UL>, или в списке есть элементы без тега <LI>?

    Вообще говоря, такого допускать не следует, так как некоторые «строгие» броузеры в этом случае не будут отображать практически ничего. Большинство популярных броузеров, правда, попытаются угодить даже автору странички, написавшему такой код. Например, Internet Explorer 5, если встретит теги <LI> без тега начала списка, интерпретирует их как маркированный список, хотя и не будет выделять его отступом, а не помеченные тегом <LI> элементы списка оставит без маркера. Однако, повторяю, это из ряда вон выходящие случаи.

    Благодаря тому, что списки отображаются с отступом, легко можно организовывать вложенные списки с помощью тех же тегов. Для этого надо просто начать новый список внутри уже начатого. Схема расположения тегов списка при этом получится примерно такая:

    Разумеется, отступы здесь обозначены только для наглядности — чтобы не перепутать, какой закрывающий тег к какому открывающему тегу относится.

    Далее, при вложении нескольких маркированных списков хочется каждый из них обозначить своим типом маркера. Некоторые броузеры так и делают по умолчанию. Например, Internet Explorer элементы первого списка из серии вложенных обозначает закрашенным кружком, элементы вто­рого — незакрашенным кружком, а элементы всех следующих — квадратиком. Однако, во-первых, так поступают не все броузеры, а во-вторых, нам может захотеться изменить порядок маркеров. Для явного определения типа маркера в теге <UL> следует установить атрибут TYPE=. У него могут быть три значения: "disc", "square" и "circle", что означает, соответственно, закрашенный кружок, квадратик и незакрашенный кружок.

    В теге нумерованного списка <OL> можно установить атрибут TYPE= для определения типа нумерации. Если не указано ничего или установлено значение TYPE=”1”, то нумерация происходит обычными цифрами. Если установить TYPE="I" или "i", то получится нумерация римскими цифрами (соответственно, с использованием прописных или строчных букв).

    И, наконец, для буквенных обозначений элементов списка устанавливают атрибут TYPE="A" или "а". Кроме того, иногда может потребоваться начать нумерацию не с единицы, а с какого-нибудь иного числа. Для этого существует атрибут START=. Например, запись <OL START="43"> вызовет нумерацию элементов списка, начиная с числа 43. Далее пойдут элементы с номерами 44, 45 и т. д.

    Может возникнуть естественный вопрос: а как использовать другие типы маркеров списков — разнообразные галочки, цветные кружки и прочие, которые мы так часто видим в WWW! Действительно, такая возможность есть, однако мы рассмотрим ее несколько позже, а пока приведем пример веб-странички фирмы «Лентяй» с использованием вложенных списков:

    </span>Фирма<span lang="en-US">"</span>ЛЕНТЯЙ<span lang="en-US">"

    Фирма «ЛЕНТЯЙ»

    <FONT SIZE="+l">Haшa фирма предоставляет следующие услуги:FONT>

      <LI>Бытовые услуги

      <UL TYPE="square">

      <LI>Вкручивание электрических лампочек

      <LI>Услуги по наведению чистоты

      • Подметание пола

      • Bынeceниe мусора из квартиры

        <LI> посуды

        UL>

        UL>

      • Приготовление пищи

      • Koмпьютepныe услуги

        • Дeфpaгмeнтaция жестких дисков

          <LI> Переустановка Windows

          UL>

          UL>

          <FONT SIZE="+1">Для того, чтобы воспользоваться нашими услугами, следует:FONT>

          <OL>

        • Зарегистрироваться (<А HREF="reg.html">ЗдесьA>)

          <LI>Заполнить форму заказа (<А HREF="forml.htm1"> Здесь A>)

          <LI>Подтвердить заказ:

            <LI>Получив письмо с паролем подтверждения, послать пустой ответ, нажав "Reply"

          1. Заполнить форму-подтверждение заказа

            (<А HREF="form2.html">здесь)

            OL>

            <LI>Приготовить деньги для оплаты услуг

          (См. Файл 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-страницах. С помощью рамок экран разделяется на несколько областей, в каждой из которых отображается содержимое отдельной страницы и даже Web-узла.

                  Создание рамок

                  Для создания рамок (областей страницы) иcпользуют флаг <FRAMESET> и парный ему флаг FRAMESET>, а для их описания — флаги < FRAME >. Начнем с простого примера.

                  Создайте в текстовом редакторе два маленьких Web-документа и сохраните их как файлы a.htm и b.htm. Эти страницы будут отличаться только названиями.

                  Файл a.htm:

                  <ТIТLЕ>Рамки. Страничка A

                  <ВОDY>страничка АBODY>HTML>

                  Файл b.htm:

                  </span></font><font size="3" class="CL_3">Рамки</font><font size="3" class="CL_3"><span lang="en-US">. </span></font><font size="3" class="CL_3">Страничка</font><font size="3" class="CL_3"><span lang="en-US"> B

                  <ВОDY>страничка ВBODY>HTML>

                  Создайте базовую страницу, на которой будут отображаться рамки, и сохраните baza.htm:

                  Pa</span>мки<span lang="en-US">

                  Откройте страницу baza.htm в программе просмотра, и Вы увидите, что она состоит из двух областей:

                  Приведем небольшой комментарий к использованию флага <FRAMESET>. В нем указывается, что экран подразделяется на две колонки (параметр COLS), каждая из которых занимает ровно половину экрана (COLS="50°/o, 50%").


    Случайные файлы

    Файл
    72289.doc
    17987.rtf
    166379.rtf
    kurs_inf.doc
    23522.rtf




  • Чтобы не видеть здесь видео-рекламу достаточно стать зарегистрированным пользователем.
    Чтобы не видеть никакую рекламу на сайте, нужно стать VIP-пользователем.
    Это можно сделать совершенно бесплатно. Читайте подробности тут.