Пример: Транспортная логистика
Я ищу:
На главную  |  Добавить в избранное  

Экономико-математическое моделирование /

Лекция№17

←предыдущая  следующая→
1 2 



Скачать реферат


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

. Списки

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

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

Перечисление услуг хорошо смотрится в виде маркированного списка. Для его организации применяет-ся тег

), считается маркированным списком. Каждый элемент списка должен быть при этом обозначен тегом
  • . Этот тег можно употреблять без закрывающего (хотя можно и с ним). То есть, можно написать:

    [li]Вкручивание электрических лампочек

    ИЛИ

    [li]Вкручивание электрических лампочек

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

    Что касается перечисления порядка действий для заказа, то его целесообразно организовать в виде ну-мерованного списка. Для этого служит тег

      ,(Orderer List) а элементы списка также обозначаются тегом
    1. . И нумерованные, и маркированные списки в большинстве броузеров выделяются неболь-шим отступом.

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

      Фирма "ЛЕНТЯЙ"

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

      Наша фирма предоставляет следующие услуги

        [li]Вкручивание электрических лампочек

        [li]Подметание пола

        [li]Вынесение мусора из квартиры

        [li]Мытье посуды

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

      Чтобы воспользоваться нашими услугами,следует:

      [ol]

      [li]Зарегистрироваться (здесь)

      [li]Заполнить форму заказа (здесь)

      [li]Получив письмо с паролем, послать пустой ответ

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

      (Здесь)

      [li]Приготовить деньги для оплаты услуг

    См. файл:spiski1.html

    . Как видите, мы здесь не употребляли закрывающий тег . Броузер обычно все равно понимает, где кончается элемент списка, поскольку после любого элемента стоит либо тег следующего элемента [li], либо тег завершения списка [/ul] или [/ol].

    Другой вопрос, что будет, если код написан некорректно: например, указаны теги [li] без тега списка

      или

      [/ul]

      [/ul]

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

      Далее, при вложении нескольких маркированных списков хочется каждый из них обозначить своим ти-пом маркера. Некоторые броузеры так и делают по умолчанию. Например, Internet Explorer элементы первого списка из серии вложенных обозначает закрашенным кружком, элементы вто¬рого — незакра-шенным кружком, а элементы всех следующих — квадратиком. Однако, во-первых, так поступают не все броузеры, а во-вторых, нам может захотеться изменить порядок маркеров. Для явного определения типа маркера в теге

      [/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 



    Copyright © 2005—2007 «Mark5»