Лекция№17

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

. Списки

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

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

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

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

ИЛИ

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

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

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

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

<HTML>

<НЕАD>

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

<DIV ALIGN=”center”><H2>Фирма «ЛЕНТЯЙ»</H2></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>

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

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

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

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

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

<TITLE>Фирма"ЛЕНТЯЙ"</TITLE> </HEAD>

<DIV ALIGN="center"><Hl>Фирма «ЛЕНТЯЙ»</H2><DIV>

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

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

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

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

<LI>Подметание пола

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

<LI> посуды

</UL>

<LI>Приготовление пищи

<LI>Koмпьютepныe услуги

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

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

</UL>

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

<OL>

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

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

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

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

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

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

</OL>

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

</OL>

</body> </html>

(См. Файл 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:

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

Откройте страницу 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 BGCOLOR=#tFFFFFF">фрейм D белого цвета </BODY></HTML>

|Базовая страница demo.htm: (в нашем случае – это и есть index.html)

<HTML><HEAD><Т1ТLЕ>Демонстрация фреймов</Т1ТLЕ></HEAD>

FRAMESET COLS="25%, 25%, 25%, 25%">

Откройте файл demo.htm в программе просмотра. На экране компьютера Вы увидите, как выглядят созданные Вами рамки

Можно ли сделать рамки разного размера? Да вайте попробуем!

Отредактируйте Ваш файл demo.htm и сохранитe его как demo2.htm:

•<HTML> <HEAD>

<Т1ТLЕ>Демонстрация фреймов 2</TITLE> </HEAD>

Обратите внимание, что размер четвертой ;cамой правой рамки указан не числовым значением, символом «*». Это означает, что данная рамка должна занимать всю оставшуюся площадь главной стра-ицы. ^; Просмотрите файл на экране:

Размеры рамок можно задавать не только в процентах, но и в пикселях. Например, можно указать, что каждая из четырех рамок имеет горизонтальный размер в 60 пикселей:

<HTML> <HEAD><Т1ТLЕ>Демонстрация фреймов 3</TITLE></HEAD>

Здесь следует сделать важное замечание. Созданные Вами страницы будут просматривать разные пользователи, у которых мониторы имеют разно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%">

Что еще можно делать с рамками?

Например, можно задать соотношение между ними.

Создайте файл demo4.htm:

<HTML><HEAD><Т1ТLЕ>Демонстрация фреймов 4</TITLE></HEAD>

</FBAMESET> </HTML>

Откройте файл в программе просмотра :

Разберемся, как задан размер трех рамок в данном примере: <FRAMESET COLS="100, *, 2*">

Самая левая рамка имеет горизонтальный размер 100 пикселей, вторая должна занимать всю оставшуюся часть главной страницы, а третья (самая правая) — в два раза больше второй.

Теперь разделите третью рамку пополам. Текст на языке HTML в Вашем файле demo5.htm должен выглядеть следующим образом:

<HTML><HEAD><Т1ТLЕ>Демонстрация фреймов 5</TITLE></HEAD>

На экране компьютера Вы увидите, что рамка С разделена на две части

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

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

<HTML><HEAD><Т1ТLЕ>Демонстрация фреймов</ТIТLЕ></HEAD>

„Найдите какую-нибудь небольшую картинку в формате .gif или .jpg. Измените значение второгo флага FRAME так, чтобы он указывал не на страницу, а на графическое изображение:

<HTML><HEAD><Т1ТLЕ>Демонстрация фреймов 6 </TITLE> </HEAD>

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

Отобразите это в файле demo7.htm так:

<HTML><HEAD> <Т1ТLЕ>Демонстрация фреймов 7</TITLE></HEAD>

<FRAMESET COLS="*, 78%"> -

Если мы зададим размер рамки-фрейма, содержащей графическое изображение, меньшим, чем раз мер изображения, то увидим появление полос прокрутки (файл 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>

Обратите внимание на то, что на экране на левой рамке, где размещено графическое изображение, исчезла полоса прокрутки. Теперь мы не можем просмотреть изображение полностью.

Давайте посмотрим, как выровнять графическое изображение по левой границе рамки. Как видно из предыдущего рисунка, графическое изображение не-много смещено вправо от границы рамки. Выровнять его можно с помощью атрибутов MARGINWIDTH и MARGINHEIGHT. Эти атрибуты управляют отступом изображения внутри рамки Создайте файл demolO.htm. и установите минимальные значения каждого атрибута:

<HTML><HEAD> <TITLE>демонстрация фреймов 10</TITLE></HEAD>

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

Добавление имени не отражается на его внешнем виде — это лишь внутреннее изменение. Но Вы можете использовать это имя в качестве параметра атрибута target флага <А>:

<HTML><HEAD>;<Т1ТLЕ>Демонстрация фреймов </TITLE> </HEAD><BODY>

Посмотрев на этот пример в программе просмо тра, Вы обнаружите, что содержимое страницы С отображается теперь внутри фрейма В.