Лекция17
СОДЕРЖАНИЕ: Списки и рамки в HTML . Списки Иногда при создании веб-страниц бывает полезно как-то упорядочить представленную на них информацию. Традиционно для этого применяют списки. В качестве первого примера давайте рассмотрим веб-страницу гипотетической фирмы «Лентяй». Допустим, мы сначала хотим перечислить предоставляемые услуги, а затем указать последовательность действий, необходимых для их заказа.Лекция 17 Списки и рамки в HTML
. Списки
Иногда при создании веб-страниц бывает полезно как-то упорядочить представленную на них информацию. Традиционно для этого применяют списки. В качестве первого примера давайте рассмотрим веб-страницу гипотетической фирмы «Лентяй». Допустим, мы сначала хотим перечислить предоставляемые услуги, а затем указать последовательность действий, необходимых для их заказа.
Маркированные и нумерованные списки
Перечисление услуг хорошо смотрится в виде маркированного списка. Для его организации применяется тег UL (UnorererList). Все, что находится между ним и его закрывающим тегом (/UL), считается маркированным списком. Каждый элемент списка должен быть при этом обозначен тегом LI. Этот тег можно употреблять без закрывающего (хотя можно и с ним). То есть, можно написать:
LIВкручивание электрических лампочек
ИЛИ
LIВкручивание электрических лампочек/LI
И то и другое будет считаться элементом списка, и практически все броузеры интерпретируют эти записи корректно. Каждый элемент маркированного списка будет при просмотре отмечаться закрашенным кружком.
Что касается перечисления порядка действий для заказа, то его целесообразно организовать в виде нумерованного списка. Для этого служит тег OL,(OrdererList) а элементы списка также обозначаются тегом 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
FONTSIZE=+1Наша фирма предоставляет следующие услуги /FONT
UL
LIВкручивание электрических лампочек
LIПодметание пола
LIВынесение мусора из квартиры
LIМытье посуды
LIДефрагментация жестких дисков
/UL
FONTSIZE=+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?
Вообще говоря, такого допускать не следует, так как некоторые «строгие» броузеры в этом случае не будут отображать практически ничего. Большинство популярных броузеров, правда, попытаются угодить даже автору странички, написавшему такой код. Например, InternetExplorer 5, если встретит теги LI без тега начала списка, интерпретирует их как маркированный список, хотя и не будет выделять его отступом, а не помеченные тегом LI элементы списка оставит без маркера. Однако, повторяю, это из ряда вон выходящие случаи.
Благодаря тому, что списки отображаются с отступом, легко можно организовывать вложенные списки с помощью тех же тегов. Для этого надо просто начать новый список внутри уже начатого. Схема расположения тегов списка при этом получится примерно такая:
UL
UL
UL
/UL
/UL
/UL
Разумеется, отступы здесь обозначены только для наглядности — чтобы не перепутать, какой закрывающий тег к какому открывающему тегу относится.
Далее, при вложении нескольких маркированных списков хочется каждый из них обозначить своим типом маркера. Некоторые броузеры так и делают по умолчанию. Например, InternetExplorer элементы первого списка из серии вложенных обозначает закрашенным кружком, элементы второго — незакрашенным кружком, а элементы всех следующих — квадратиком. Однако, во-первых, так поступают не все броузеры, а во-вторых, нам может захотеться изменить порядок маркеров. Для явного определения типа маркера в теге UL следует установить атрибут TYPE=. У него могут быть три значения: disc, square и circle, что означает, соответственно, закрашенный кружок, квадратик и незакрашенный кружок.
В теге нумерованного списка OL можно установить атрибут TYPE= для определения типа нумерации. Если не указано ничего или установлено значение TYPE=”1”, то нумерация происходит обычными цифрами. Если установить TYPE=I или i, то получится нумерация римскими цифрами (соответственно, с использованием прописных или строчных букв).
И, наконец, для буквенных обозначений элементов списка устанавливают атрибут TYPE=A или а. Кроме того, иногда может потребоваться начать нумерацию не с единицы, а с какого-нибудь иного числа. Для этого существует атрибут START=. Например, запись OLSTART=43 вызовет нумерацию элементов списка, начиная с числа 43. Далее пойдут элементы с номерами 44, 45 и т. д.
Может возникнуть естественный вопрос: а как использовать другие типы маркеров списков — разнообразные галочки, цветные кружки и прочие, которые мы так часто видим в WWW! Действительно, такая возможность есть, однако мы рассмотрим ее несколько позже, а пока приведем пример веб-странички фирмы «Лентяй» с использованием вложенных списков:
HTML HEAD
TITLEФирмаЛЕНТЯЙ/TITLE /HEAD
BODY BGCOLOR=#D2FFFF TEXT=#003737 LINK=#006A6A VLINK=#006A6A ALINK=#006A6A
DIV ALIGN=centerHlФирма laquo;ЛЕНТЯЙraquo;/H1DIV
FONTSIZE=+lHaшa фирма предоставляет следующие услуги:/FONT
UL TYPE=disc
LIБытовые услуги
ULTYPE=square
LIВкручивание электрических лампочек
LIУслуги по наведению чистоты
UL TYPE=circle
LIПодметание пола
LIBынeceниe мусора из квартиры
LI посуды
/UL
/UL
LIПриготовление пищи
LIKoмпьютepныe услуги
UL TYPE=square
LIДeфpaгмeнтaция жестких дисков
LI Переустановка Windows
/UL
/UL
FONTSIZE=+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 STYLE=list-style-type: disc;
Tenepь, чтобы заменить кружок на графический маркер, заменим свойство list-style-type на свойство list-style-image и определим местоположение нашего файла-рисунка:
UL STYLE=list-style-image: url(images/p>
Вот и все! Можно наслаждаться списком с графическими маркерами. Обратите внимание на то, что при указании имени файла мы заключили его не в обычные двойные кавычки, а в одинарные. Это сделано потому, что все значение атрибута STYLE = заключено в двойные кавычки. Поэтому если бы мы ошибочно написали
UL STYLE=list-style-image: url(images/p>
то кавычка перед словом Images была бы воспринята как закрывающая, то есть атрибуту STYLE= было бы присвоено значение list-style-image: url(, a все, что следует за этим, стало бы еще одним, нераспознанным атрибутом тега UL.
Рамки
Рамки (или фреймы — Frame) — мощный механизм представления информации на Web-страницах. С помощью рамок экран разделяется на несколько областей, в каждой из которых отображается содержимое отдельной страницы и даже Web-узла.
Создание рамок
Для создания рамок (областей страницы) иcпользуют флаг FRAMESET и парный ему флаг /FRAMESET, а для их описания — флаги FRAME . Начнем с простого примера.
Создайте в текстовом редакторе два маленьких Web-документа и сохраните их как файлы a.htm и b.htm. Эти страницы будут отличаться только названиями.
Файл a.htm:
HTMLHEADТIТLЕРамки. Страничка A/TITLE/HEADBODY
ВОDYстраничка А/BODY/HTML
Файл b . htm :
HTMLHEADTITLE Рамки. Страничка B/TITLE/HEADBODY
ВОDYстраничка В/BODY/HTML
Создайте базовую страницу, на которой будут отображаться рамки, и сохраните baza.htm:
HTMLHEADTITLEPaмки/TITLE/HEAD
FRAMESET COLS=50%, 50%
FRAME SRC=a.htmFRAME SRC =b.htm/FBAMESET/HTML
Откройте страницу baza.htm в программе просмотра, и Вы увидите, что она состоит из двух областей:
Приведем небольшой комментарий к использованию флага FRAMESET. В нем указывается, что экран подразделяется на две колонки (параметр COLS), каждая из которых занимает ровно половину экрана (COLS=50°/o, 50%).
Флаг FRAMESET представляет собой флаг-контейнер, то есть флаг, который может включать в себя другие флаги. Флаг - контейнер заканчивается парным ему флагом /FRAMESET. Флаг FRAME не является флагом - контейнером и не требует парного закрывающего флага.
Как разделить страницу на большее число областей?
Создайте четыре HTML-файла: a.htm, b.htm, c.htm, d.htm. Кроме того, измените цвет фона каждой страницы, для чего используйте атрибут BGCOLOR флага BODY: на странице А укажите цвет FFOOFF, на странице В — OOFFOO, на странице С — FFFFOO и на странице D —FFFFFF.
Файл a.htm:
HTMLHEADТ1ТLЕРамки. Страничка A/TITLE/HEAD
BODY BGCOLOR=#FFOOFFФреймАрозовогоцвета/BODY/HTML
Файл b.htm:
HTMLHEADТ1ТLЕРамки. Страничка B/TITLE/HEAD
BODY BGCOLOR=#OOFFOOФреймВзеленогоцвета •/BODY/HTML
Файл c.htm:
HTMLHEADТ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 )
HTMLHEADТ1ТLЕДемонстрация фреймов/Т1ТLЕ/HEAD
FRAMESET COLS=25%, 25%, 25%, 25%
FRAME SRC=a.htmFRAME SRC=b.htm
FRAME SRC=c.htmFRAME 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.htmFRAME 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, Вы использовали флаг FRAMESETCOLS. Измените базовый файл с четырьмя рамками указанным ниже образом, используя флаг FRAMESETROWS. Сохраните его как файл 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:
HTMLHEADТ1ТLЕДемонстрация фреймов 4/TITLE/HEAD
FRAMESET COLS=100, *, 2*
FRAME SRC=a.htmFRAME SRC=b.htmFRAME SRC=c.htm
/FBAMESET /HTML
Откройте файл в программе просмотра :
Разберемся, как задан размер трех рамок в данном примере: FRAMESETCOLS=100, *, 2*
Самая левая рамка имеет горизонтальный размер 100 пикселей, вторая должна занимать всю оставшуюся часть главной страницы, а третья (самая правая) — в два раза больше второй.
Теперь разделите третью рамку пополам. Текст на языке HTML в Вашем файле demo5.htm должен выглядеть следующим образом:
HTMLHEADТ1ТLЕДемонстрация фреймов 5/TITLE/HEAD
FRAMESET COLS=100, *, 2*
FRAME SRC=a.htmFRAME SRC=b.htmFRAMESET ROWS=50%,50%
FRAME SRC=c.htm/FRAMESET/FRAMESET/HTML
На экране компьютера Вы увидите, что рамка С разделена на две части
Рамки — мощное и удобное средство, но не следует злоупотреблять ими. Не располагайте на экране более трех рамок и старайтесь не применять их без надобности.
Вернемся к примеру с двумя рамками, каждая из которых занимает ровно половину области главной страницы (файл baza.htm):
HTMLHEADТ1ТLЕДемонстрация фреймов/ТIТLЕ/HEAD
FRAMESET COLS=50%,50%
FRAME SRC=a.htm FRAME SRC=b.htm/FBAMESET/HTML
„Найдите какую-нибудь небольшую картинку в формате .gif или .jpg. Измените значение второгo флага FRAME так, чтобы он указывал не на страницу, а на графическое изображение:
HTMLHEADТ1ТLЕДемонстрация фреймов 6 /TITLE /HEAD
FRAMESET COLS=50%,50%FRAME SRC=”a.htm”
FRAME SRC: =fly.gif /FBAMESET /HTML
Вы можете сделать страницу более элегантной, если укажете, что размер рамки, содержащей графическое изображение, равен размеру изображения, а вторая рамка покрывает оставшуюся часть главного окна.
Отобразите это в файле demo7.htm так:
HTMLHEAD Т1ТLЕДемонстрация фреймов 7/TITLE/HEAD
FRAMESET COLS=*, 78% -
FRAME SRC =fly.gifFRAME SRC=a.htm/FBAMESET/HTML
Если мы зададим размер рамки-фрейма, содержащей графическое изображение, меньшим, чем раз мер изображения, то увидим появление полос прокрутки (файл demo8.htm):
HTMLHEADТ1ТLЕДемонстраЦия фреймов 8/TITLE/HEAD
FRAMESET COLS=*, 85% FRAME SRC =fly.gifFRAME SRC=a.htm
/FBAMESET /HTML
На экране Вы увидите стрелочки, появившиеся внизу левой рамки
Введя атрибут SCROLLING в соответствующий флаг FRAME, можно управлять появлением на экране полос прокрутки. Возможные значения атрибута SCROLLING
SCROLLING = YES — у рамки всегда будут полосы прокрутки, независимо от того, нужны ли они или нет.
SCROLLING=NO—у рамки не будет полос прокрутки, независимо от того, нужны ли они или нет.
SCROLLING = AUTO — у рамки будут полосы прокрутки только в случае необходимости.
Проведем эксперимент с полосами прокрутки
Создадим файл demo9.htm
HTMLHEADTITLEneMOHCTpauuH фреймов 9/TITLE/HEAD
FRAMESET COLS=*, 85%
FRAME SRC =fly.gif SCROLLING=NO FRAME SRC=a.htm/FBAMESET|/HTML
Обратите внимание на то, что на экране на левой рамке, где размещено графическое изображение, исчезла полоса прокрутки. Теперь мы не можем просмотреть изображение полностью.
Давайте посмотрим, как выровнять графическое изображение по левой границе рамки. Как видно из предыдущего рисунка, графическое изображение не-много смещено вправо от границы рамки. Выровнять его можно с помощью атрибутов MARGINWIDTH и MARGINHEIGHT. Эти атрибуты управляют отступом изображения внутри рамки Создайте файл demolO.htm. и установите минимальные значения каждого атрибута:
HTMLHEAD TITLEдемонстрацияфреймов 10/TITLE/HEAD
FRAMESET COLS=*,80 %
FRAME SRC=fly.gifMARGINWIDTH=1MARGINHEIGHT=1
FRAME SRC= a.htm
/FBAMESET
/HTML
На экране Вы увидите, что графическое изображение выровнялось:
Связь между рамками
Вернемся к часто используемому нами примеру с двумя рамками (baza.htm). Измените содержимое файла a.htm, добавив ссылку на другой файл (c.htm):
HTML HEADТ1ТЬЕДемонстрация фреймов (ссылка) /TITLE /HEAD
A link to A HREF=c.htmc.htm/A /BODY /HTML
Если Вы загрузите базовый пример с двумя рамками и активизируете ссылку, то получите содержимое страницы С, отображенное внутри рамки А. А как отобразить содержимое страницы С внутри рамки В? Внимательно изучите пример:
HTMLHEADТ1ТLЕДемонстрация фреймов /TITLE/HEAD
FRAMESET COLS=50%, 50%FRAME SRC=a.htm
frame SRC =b.htm NAME=FRAME_B/FBAMESET/HTML
Добавление имени не отражается на его внешнем виде — это лишь внутреннее изменение. Но Вы можете использовать это имя в качестве параметра атрибута targetфлага А:
HTMLHEAD;Т1ТLЕДемонстрацияфреймов /TITLE /HEADBODY
A HREF=c.htm TARGET=FRAME B c.htm/A/BODY /HTML
Посмотрев на этот пример в программе просмо тра, Вы обнаружите, что содержимое страницы С отображается теперь внутри фрейма В.