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

Лекция: Лекция№17

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

ИЛИ

<LI>Вкручивание электрических лампочек</LI> И то и другое будет считаться элементом списка, и практически все броузеры интерпретируют эти записи корректно. Каждый элемент маркированного списка будет при просмотре отмечаться закрашенным кружком. Что касается перечисления порядка действий для заказа, то его целесообразно организовать в виде нумерованного списка. Для этого служит тег <OL>,(Orderer List) а элементы списка также обозначаются тегом <LI>. И нумерованные, и маркированные списки в большинстве броузеров выделяются небольшим отступом. Итак, давайте посмотрим, как может выглядеть эта страничка. (Элемент выравнивания DIV – парный, SMALL – уменьшает шрифт) <HTML> <НЕАD> <ТIТLЕ>Фирма "ЛЕНТЯЙ"</ТIТLЕ> </НЕАD> <BODY BGCOLOR="#D2FFFF" ТЕХТ="#003737" LINK="#006A6A" VLINK="#006A6A" ALINK="#006A6A"> <DIV ALIGN=”center”><H1>Фирма &laquo;ЛЕНТЯЙ&raquo;</H1></DIV> <FONT SIZE="+1">Наша фирма предоставляет следующие услуги </FONT> <UL> <LI>Вкручивание электрических лампочек <LI>Подметание пола <LI>Вынесение мусора из квартиры <LI>Мытье посуды <LI>Дефрагментация жестких дисков </UL> <FONT SIZE="+1">Чтобы воспользоваться нашими услугами,следует: </FONT> <OL> <LI>Зарегистрироваться (<A HREF="reg.html">здесь</A>) <LI>Заполнить форму заказа (<A HREF="form1.html">здесь</A>) <LI>Получив письмо с паролем, послать пустой ответ <LI>Заполнить форму-подтверждение заказа (<А HREF="form2.html">Здесь<:/A>) <LI>Приготовить деньги для оплаты услуг </OL> </BODY> </HTML> См. файл:spiski1.html . Как видите, мы здесь не употребляли закрывающий тег </LI>. Броузер обычно все равно понимает, где кончается элемент списка, поскольку после любого элемента стоит либо тег следующего элемента <LI>, либо тег завершения списка </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! Действительно, такая возможность есть, однако мы рассмотрим ее несколько позже, а пока приведем пример веб-странички фирмы «Лентяй» с использованием вложенных списков: <HTML> <HEAD> <TITLE>Фирма"ЛЕНТЯЙ"</TITLE> </HEAD> <BODY BGCOLOR="#D2FFFF" TEXT="#003737" LINK="#006A6A" VLINK="#006A6A" ALINK="#006A6A"> <DIV ALIGN="center"><Hl>Фирма &laquo;ЛЕНТЯЙ&raquo;</H1><DIV> <FONT SIZE="+l">Haшa фирма предоставляет следующие услуги:</FONT> <UL TYPE="disc"> <LI>Бытовые услуги <UL TYPE="square"> <LI>Вкручивание электрических лампочек <LI>Услуги по наведению чистоты <UL TYPE="circle"> <LI>Подметание пола <LI>Bынeceниe мусора из квартиры <LI> посуды </UL> </UL> <LI>Приготовление пищи <LI>Koмпьютepныe услуги <UL TYPE="square"> <LI>Дeфpaгмeнтaция жестких дисков <LI> Переустановка Windows </UL> </UL> <FONT SIZE="+1">Для того, чтобы воспользоваться нашими услугами, следует:</FONT> <OL> <LI>Зарегистрироваться (<А HREF="reg.html">Здесь</A>) <LI>Заполнить форму заказа (<А HREF="forml.htm1"> Здесь </A>) <LI>Подтвердить заказ: <OL TYPE="I"> <LI>Получив письмо с паролем подтверждения, послать пустой ответ, нажав "Reply" <LI>Заполнить форму-подтверждение заказа (<А HREF="form2.html">здесь</А>) </OL> <LI>Приготовить деньги для оплаты услуг </OL> </body> </html> (См. Файл spiski2.html)

Графические маркеры

Итак, выше мы упомянули о возможности создания графических маркеров списков. Она настолько привлекла создателей веб-страниц, что для их удобства были созданы специальные средства. Действительно, одно дело, когда маркерами списка являются стандартные кружочки или квадратики, и совсем другое — когда каждый сам имеет возможность создать маркер! Маркером может быть все что угодно — от просто цветных и немного выпуклых кружков и квадратов до изощренных миниатюрных художественных работ. Однако обратите внимание на то, что именно миниатюрных: маркеры списков должны по размеру как-то соответствовать высоте текстовой строки, и забота об этом ложится на автора еще на этапе создания изображения. Старайтесь создавать подоб­ные изображения сразу в «натуральную величину». Если создавать сна­чала крупные рисунки, а потом просто уменьшать их, то при уменьшении они могут стать неузнаваемыми! Все дело в том, что компьютер «не зна­ет» , какие детали рисунка важны для нашего восприятия. Если при уменьшении исчезнут важные детали, результат будет ужасным. Если исчезнут второстепенные детали, качество восприятия ухудшится, но общее впе-; чатление останется. Чтобы проиллюстрировать возможность вставки в список графических маркеров, воспользуемся одним из примеров — веб-страницей фирмы «Лентяй». Если помните, там мы создали два списка: маркированный (список услуг) и нумерованный (порядок оформления заказа). Теперь, допустим, мы хотим заменить кружки в маркированном списке на красные треугольники. Сначала надо создать такой треугольник в любой программе, предназначенной для работы с изображениями. В нашем примере мы тоже создали такой треугольник, даже отбрасывающий небольшую тень, и назвали этот файл marker1.jpg. Теперь вспомним, как мы задавали тип маркера списка: <UL TYPE="disc"> Чтобы пойти дальше, заменим атрибут TYPE= на атрибут STYLE= (как, кстати, и положено делать в соответствии со спецификацией HTML 4.0): <UL> Tenepь, чтобы заменить кружок на графический маркер, заменим свойство list- style-type на свойство list-style-image и определим местоположение нашего файла-рисунка: <ULImages/marker1.jpg');"> Вот и все! Можно наслаждаться списком с графическими маркерами. Обратите внимание на то, что при указании имени файла мы заключили его не в обычные двойные кавычки, а в одинарные. Это сделано потому, что все значение атрибута STYLE= заключено в двойные кавычки. Поэтому если бы мы ошибочно написали <ULImages/marker1.jpg");"> то кавычка перед словом Images была бы воспринята как закрывающая, то есть атрибуту STYLE= было бы присвоено значение "list-style-image: url(", a все, что следует за этим, стало бы еще одним, нераспознанным атрибутом тега <UL>. Рамки Рамки (или фреймы — Frame) — мощный механизм представления информации на Web- страницах. С помощью рамок экран разделяется на несколько областей, в каждой из которых отображается содержимое отдельной страницы и даже Web-узла. Создание рамок Для создания рамок (областей страницы) иcпользуют флаг <FRAMESET> и парный ему флаг </FRAMESET>, а для их описания — флаги < FRAME >. Начнем с простого примера. Создайте в текстовом редакторе два маленьких Web-документа и сохраните их как файлы a.htm и b.htm. Эти страницы будут отличаться только названиями. Файл a.htm: <HTML><HEAD><ТIТLЕ>Рамки. Страничка A</TITLE></HEAD><BODY> <ВОDY>страничка А</BODY></HTML> Файл b.htm: <HTML><HEAD><TITLE> Рамки. Страничка B</TITLE></HEAD><BODY> <ВОDY>страничка В</BODY></HTML> Создайте базовую страницу, на которой будут отображаться рамки, и сохраните baza.htm: <HTML><HEAD><TITLE>Paмки</TITLE></HEAD> <FRAMESET COLS="50%, 50%"> <FRAME SRC="a.htm"><FRAME SRC ="b.htm"></FBAMESET></HTML> Откройте страницу baza.htm в программе просмотра, и Вы увидите, что она состоит из двух областей: Приведем небольшой комментарий к использованию флага <FRAMESET>. В нем указывается, что экран подразделяется на две колонки (параметр COLS), каждая из которых занимает ровно половину экрана (COLS="50°/o, 50%"). Флаг < FRAME SET> представляет собой флаг-контейнер, то есть флаг, который может включать в себя другие флаги. Флаг - контейнер заканчивается парным ему флагом </FRAMESET>. Флаг <FRAME > не является флагом - контейнером и не требует парного закрывающего флага. Как разделить страницу на большее число областей? Создайте четыре HTML-файла: a.htm, b.htm, c.htm, d.htm. Кроме того, измените цвет фона каждой страницы, для чего используйте атрибут BGCOLOR флага BODY: на странице А укажите цвет FFOOFF, на странице В — OOFFOO, на странице С — FFFFOO и на странице D —FFFFFF. Файл a.htm: <HTML><HEAD><Т1ТLЕ>Рамки. Страничка A</TITLE></HEAD> <BODY BGCOLOR="#FFOOFF">Фрейм А розового цвета</BODY></HTML> Файл b.htm: <HTML><HEAD><Т1ТLЕ>Рамки. Страничка B</TITLE></HEAD> <BODY BGCOLOR="#OOFFOO">Фрейм В зеленого цвета •</BODY></HTML> Файл c.htm: <HTML><HEAD><Т1ТЬЕ>Рамки. Страничка C</TITLE></HEAD> <BODY BGCOLOR="#FFFFOO">фрейм С желтого цвета</BODY> </HTML> Файл d.htm: <HTML> <HEAD><Т1ТЪЕ>Рамки. Страничка D</TITLE></HEAD> <BODY">фрейм D белого цвета </BODY></HTML> |Базовая страница demo.htm: (в нашем случае – это и есть index.html) <HTML><HEAD><Т1ТLЕ>Демонстрация фреймов</Т1ТLЕ></HEAD> FRAMESET COLS="25%, 25%, 25%, 25%"> <FRAME SRC="a.htm"><FRAME SRC="b.htm"> <FRAME SRC="c.htm"><FRAME SRC="d.htm"></FBAMESET></HTML> Откройте файл demo.htm в программе просмотра. На экране компьютера Вы увидите, как выглядят созданные Вами рамки Можно ли сделать рамки разного размера? Да вайте попробуем! Отредактируйте Ваш файл demo.htm и сохранитe его как demo2.htm: •<HTML> <HEAD> <Т1ТLЕ>Демонстрация фреймов 2</TITLE> </HEAD> <FRAMESET cols=”10%, 10%, *"> <FRAME SRC="a.htm"><FRAME SRC="b.htm"> <FRAME SRC="c.htm"> <FRAME SRC="d.htm"></FBAMESET> </HTML> Обратите внимание, что размер четвертой ;cамой правой рамки указан не числовым значением, символом «*». Это означает, что данная рамка должна занимать всю оставшуюся площадь главной стра-ицы. ; Просмотрите файл на экране: Размеры рамок можно задавать не только в процентах, но и в пикселях. Например, можно указать, что каждая из четырех рамок имеет горизонтальный размер в 60 пикселей: <HTML> <HEAD><Т1ТLЕ>Демонстрация фреймов 3</TITLE></HEAD> <FRAMESET COLS="60,60,60,60"> <FRAME SRC="a.htm">< FRAME SRC="b.htm"> <FRAME SRC="c.htm">< FRAME SRC="d.htin"></FBAMESET</HTML> Здесь следует сделать важное замечание. Созданные Вами страницы будут просматривать разные пользователи, у которых мониторы имеют разноe разрешение. Использование абсолютных величин может привести к нежелательным эффектам — страница, которая отлично смотрится с разрешением 1024х768, может выглядеть совсем по-другому в разрешении 800х600. Поэтому следует придерживаться простого правила: задавать размер одной из рамок символом «*». Во всех рассмотренных примерах использовались рамки в виде колонок. Естественно, что мы можем использовать и горизонтальные ряды. Обратите внимание, когда создавался файл demo.htm, Вы использовали флаг <FRAMESET COLS>. Измените базовый файл с четырьмя рамками указанным ниже образом, используя флаг <FRAMESET ROWS>. Сохраните его как файл demo3.htm. <HTML> <HEAD><Т1ТLЕ>Демонстрация фреймов 3</TITLE> </HEAD> <FRAMESET ROWS="25%, 2.5%, 25%, 25%"> <FRAME SRC="a.htm"> <FRAME SRC="b.htm"> <FRAME SRC="c.htm"> <FRAME SRC="d.htm"> </FBAMESET></HTML> Что еще можно делать с рамками? Например, можно задать соотношение между ними. Создайте файл demo4.htm: <HTML><HEAD><Т1ТLЕ>Демонстрация фреймов 4</TITLE></HEAD> <FRAMESET COLS="100, *, 2*"> <FRAME SRC="a.htm"><FRAME SRC="b.htm"><FRAME SRC="c.htm"> </FBAMESET> </HTML> Откройте файл в программе просмотра : Разберемся, как задан размер трех рамок в данном примере: <FRAMESET COLS="100, *, 2*"> Самая левая рамка имеет горизонтальный размер 100 пикселей, вторая должна занимать всю оставшуюся часть главной страницы, а третья (самая правая) — в два раза больше второй. Теперь разделите третью рамку пополам. Текст на языке HTML в Вашем файле demo5.htm должен выглядеть следующим образом: <HTML><HEAD><Т1ТLЕ>Демонстрация фреймов 5</TITLE></HEAD> <FRAMESET COLS="100, *, 2*"> <FRAME SRC="a.htm"><FRAME SRC="b.htm"><FRAMESET ROWS="50%, 50%"> <FRAME SRC="c.htm"></FRAMESET></FRAMESET></HTML> На экране компьютера Вы увидите, что рамка С разделена на две части Рамки — мощное и удобное средство, но не следует злоупотреблять ими. Не располагайте на экране более трех рамок и старайтесь не применять их без надобности. Вернемся к примеру с двумя рамками, каждая из которых занимает ровно половину области главной страницы (файл baza.htm): <HTML><HEAD><Т1ТLЕ>Демонстрация фреймов</ТIТLЕ></HEAD> <FRAMESET COLS="50%,50%"> <FRAME SRC="a.htm"><FRAME SRC="b.htm"></FBAMESET></HTML> „Найдите какую-нибудь небольшую картинку в формате .gif или .jpg. Измените значение второгo флага FRAME так, чтобы он указывал не на страницу, а на графическое изображение: <HTML><HEAD><Т1ТLЕ>Демонстрация фреймов 6 </TITLE> </HEAD> <FRAMESET COLS="50%,50%"><FRAME SRC=”a.htm”> <FRAME SRC:="fly.gif"> </FBAMESET> </HTML> Вы можете сделать страницу более элегантной, если укажете, что размер рамки, содержащей графическое изображение, равен размеру изображения, а вторая рамка покрывает оставшуюся часть главного окна. Отобразите это в файле demo7.htm так: <HTML><HEAD> <Т1ТLЕ>Демонстрация фреймов 7</TITLE></HEAD> <FRAMESET COLS="*, 78%"> - <FRAME SRC ="fly.gif"><FRAME SRC="a.htm"></FBAMESET></HTML> Если мы зададим размер рамки-фрейма, содержащей графическое изображение, меньшим, чем раз мер изображения, то увидим появление полос прокрутки (файл demo8.htm): <HTML><HEAD><Т1ТLЕ>ДемонстраЦия фреймов 8</TITLE></HEAD> FRAMESET COLS="*, 85%"> <FRAME SRC ="fly.gif"><FRAME SRC="a.htm"> </FBAMESET> </HTML> На экране Вы увидите стрелочки, появившиеся внизу левой рамки Введя атрибут SCROLLING в соответствующий флаг < FRAME >, можно управлять появлением на экране полос прокрутки. Возможные значения атрибута SCROLLING SCROLLING = YES — у рамки всегда будут полосы прокрутки, независимо от того, нужны ли они или нет. SCROLLING=NO—у рамки не будет полос прокрутки, независимо от того, нужны ли они или нет. SCROLLING = AUTO — у рамки будут полосы прокрутки только в случае необходимости. Проведем эксперимент с полосами прокрутки Создадим файл demo9.htm <HTML><HEAD><TITLE>neMOHCTpauuH фреймов 9</TITLE></HEAD> <FRAMESET COLS="*, 85%"> <FRAME SRC ="fly.gif" SCROLLING=NO><FRAME SRC="a.htm"></FBAMESET>|</HTML> Обратите внимание на то, что на экране на левой рамке, где размещено графическое изображение, ис­чезла полоса прокрутки. Теперь мы не можем просмотреть изображение полностью. Давайте посмотрим, как выровнять графическое изображение по левой границе рамки. Как видно из предыдущего рисунка, графическое изображение не-много смещено вправо от границы рамки. Выровнять его можно с помощью атрибутов MARGINWIDTH и MARGINHEIGHT. Эти атрибуты управляют отступом изображения внутри рамки Создайте файл demolO.htm. и установите минимальные значения каждого атрибута: <HTML><HEAD> <TITLE>демонстрация фреймов 10</TITLE></HEAD> <FRAMESET COLS="*,80 %"> <FRAME SRC="fly.gif" MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME SRC=" a.htm"> </FBAMESET> </HTML> На экране Вы увидите, что графическое изображение выровнялось: Связь между рамками Вернемся к часто используемому нами примеру с двумя рамками (baza.htm). Измените содержимое файла a.htm, добавив ссылку на другой файл (c.htm): <HTML> <HEAD><Т1ТЬЕ>Демонстрация фреймов (ссылка) </TITLE> </HEAD> A link to <A HREF="c.htm">c.htm</A> </BODY> </HTML> Если Вы загрузите базовый пример с двумя рамками и активизируете ссылку, то получите содержимое страницы С, отображенное внутри рамки А. А как отобразить содержимое страницы С внутри рамки В? Внимательно изучите пример: <HTML><HEAD><Т1ТLЕ>Демонстрация фреймов </TITLE></HEAD> <FRAMESET COLS="50%, 50%"><FRAME SRC="a.htm"> <frame SRC ="b.htm" NAME="FRAME_B"></FBAMESET></HTML> Добавление имени не отражается на его внешнем виде — это лишь внутреннее изменение. Но Вы можете использовать это имя в качестве параметра атрибута target флага <А>: <HTML><HEAD>;<Т1ТLЕ>Демонстрация фреймов </TITLE> </HEAD><BODY> <A HREF="c.htm" TARGET="FRAME B"> c.htm</A></BODY> </HTML> Посмотрев на этот пример в программе просмо тра, Вы обнаружите, что содержимое страницы С отображается теперь внутри фрейма В.