Лекция 17 Списки и рамки в HTML
. Списки
Иногда при создании веб-страниц бывает полезно как-то упорядочить
представленную на них информацию. Традиционно для этого применяют списки. В
качестве первого примера давайте рассмотрим веб-страницу гипотетической
фирмы «Лентяй». Допустим, мы сначала хотим перечислить предоставляемые
услуги, а затем указать последовательность действий, необходимых для их
заказа.
Маркированные и нумерованные списки
Перечисление услуг хорошо смотрится в виде маркированного списка. Для его
организации применяется тег (Unorerer List). Все, что находится между
ним и его закрывающим тегом (), считается маркированным списком.
Каждый элемент списка должен быть при этом обозначен тегом . Этот тег
можно употреблять без закрывающего (хотя можно и с ним). То есть, можно
написать: Вкручивание электрических лампочек
ИЛИ
Вкручивание электрических лампочек
И то и другое будет считаться элементом списка, и практически все броузеры
интерпретируют эти записи корректно. Каждый элемент маркированного списка
будет при просмотре отмечаться закрашенным кружком.
Что касается перечисления порядка действий для заказа, то его целесообразно
организовать в виде нумерованного списка. Для этого служит тег
,(Orderer List) а элементы списка также обозначаются тегом . И
нумерованные, и маркированные списки в большинстве броузеров выделяются
небольшим отступом.
Итак, давайте посмотрим, как может выглядеть эта страничка. (Элемент
выравнивания DIV – парный, SMALL – уменьшает шрифт)
Фирма "ЛЕНТЯЙ"
Фирма «ЛЕНТЯЙ» Наша фирма предоставляет следующие услуги
Вкручивание электрических лампочек
Подметание пола
Вынесение мусора из квартиры
Мытье посуды
Дефрагментация жестких дисков
Чтобы воспользоваться нашими услугами,следует:
Зарегистрироваться (здесь)
Заполнить форму заказа (здесь)
Получив письмо с паролем, послать пустой ответ
Заполнить форму-подтверждение заказа
(Здесь)
Приготовить деньги для оплаты услуг
См. файл: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
Для того, чтобы воспользоваться нашими услугами, следует:
Зарегистрироваться (Здесь) Заполнить форму заказа ( Здесь ) Подтвердить заказ:
Получив письмо с паролем подтверждения, послать пустой ответ, нажав "Reply"
Заполнить форму-подтверждение заказа
(здесь)
Приготовить деньги для оплаты услуг
(См. Файл 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пользуют флаг и
парный ему флаг , а для их описания — флаги . Начнем с
простого примера.
Создайте в текстовом редакторе два маленьких Web-документа и сохраните
их как файлы a.htm и b.htm. Эти страницы будут отличаться только
названиями.
Файл a.htm:
Рамки. Страничка A
страничка А
Файл b.htm: Рамки. Страничка B
страничка В
Создайте базовую страницу, на которой будут отображаться рамки, и
сохраните baza.htm:
Paмки
Откройте страницу baza.htm в программе просмотра, и Вы увидите, что она
состоит из двух областей:
Приведем небольшой комментарий к использованию флага . В нем
указывается, что экран подразделяется на две колонки (параметр COLS),
каждая из которых занимает ровно половину экрана (COLS="50°/o, 50%").
Флаг представляет собой флаг-контейнер, то есть флаг,
который может включать в себя другие флаги. Флаг - контейнер заканчивается
парным ему флагом . Флаг не является флагом -
контейнером и не требует парного закрывающего флага.
Как разделить страницу на большее число областей?
Создайте четыре HTML-файла: a.htm, b.htm, c.htm, d.htm. Кроме того,
измените цвет фона каждой страницы, для чего используйте атрибут BGCOLOR
флага BODY: на странице А укажите цвет FFOOFF, на странице В — OOFFOO, на
странице С — FFFFOO и на странице D —FFFFFF.
Файл a.htm:
Рамки. Страничка A
Фрейм А розового цвета
Файл b.htm:
Рамки. Страничка B
Фрейм В зеленого цвета •
Файл c.htm:
Рамки. Страничка C фрейм С желтого цвета
Файл d.htm:
Рамки. Страничка D фрейм D белого цвета
|Базовая страница demo.htm: (в нашем случае – это и есть index.html)
Демонстрация фреймов
FRAMESET COLS="25%, 25%, 25%, 25%">
Откройте файл demo.htm в программе просмотра. На экране компьютера Вы
увидите, как выглядят созданные Вами рамки
Можно ли сделать рамки разного размера? Да вайте попробуем!
Отредактируйте Ваш файл demo.htm и сохранитe его как demo2.htm:
•
Демонстрация фреймов 2
Обратите внимание, что размер четвертой ;cамой правой рамки указан не
числовым значением, символом «*». Это означает, что данная рамка должна
занимать всю оставшуюся площадь главной стра-ицы. ; Просмотрите файл на
экране:
Размеры рамок можно задавать не только в процентах, но и в пикселях.
Например, можно указать, что каждая из четырех рамок имеет горизонтальный
размер в 60 пикселей:
Демонстрация фреймов 3
На экране Вы увидите стрелочки, появившиеся внизу левой рамки
Введя атрибут SCROLLING в соответствующий флаг , можно управлять
появлением на экране полос прокрутки. Возможные значения атрибута SCROLLING
SCROLLING = YES — у рамки всегда будут полосы прокрутки, независимо от того, нужны ли они или нет.
SCROLLING=NO—у рамки не будет полос прокрутки, независимо от того, нужны ли они или нет.
SCROLLING = AUTO — у рамки будут полосы прокрутки только в случае необходимости.
Проведем эксперимент с полосами прокрутки
Создадим файл demo9.htm neMOHCTpauuH фреймов 9
|
Обратите внимание на то, что на экране на левой рамке, где размещено
графическое изображение, исчезла полоса прокрутки. Теперь мы не можем
просмотреть изображение полностью.
Давайте посмотрим, как выровнять графическое изображение по левой
границе рамки. Как видно из предыдущего рисунка, графическое изображение не-
много смещено вправо от границы рамки. Выровнять его можно с помощью
атрибутов MARGINWIDTH и MARGINHEIGHT. Эти атрибуты управляют отступом
изображения внутри рамки Создайте файл demolO.htm. и установите минимальные
значения каждого атрибута: демонстрация фреймов 10
На экране Вы увидите, что графическое изображение выровнялось:
Связь между рамками
Вернемся к часто используемому нами примеру с двумя рамками (baza.htm).
Измените содержимое файла a.htm, добавив ссылку на другой файл (c.htm):
Демонстрация фреймов (ссылка)
A link to c.htm
Если Вы загрузите базовый пример с двумя рамками и активизируете ссылку, то получите содержимое страницы С, отображенное внутри рамки А. А как отобразить содержимое страницы С внутри рамки В? Внимательно изучите пример:
Демонстрация фреймов
Добавление имени не отражается на его внешнем виде — это лишь внутреннее
изменение. Но Вы можете использовать это имя в качестве параметра атрибута
target флага :
;Демонстрация фреймов c.htm
Посмотрев на этот пример в программе просмо тра, Вы обнаружите, что
содержимое страницы С отображается теперь внутри фрейма В.