Тема: Списки на Web-страницах

Язык HTML поддерживает три вида списков: упорядоченные (нумерованные), неупорядоченные (ненумерованные) и списки определений.

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

Нумерованные списки задаются с помощью парного тега <OL>. Список содержит, естественно, элементы списка, которые определяются парным тегом <LI>. Закрывающий тег </LI> можно опускать.

Ненумерованные списки задаются парным тегом <UL>. Элементы списка задаются также тегом <LI>. С помощью атрибута TYPE тега <UL> можно задать вид маркера списка:

“disc” – круг,

“square” – квадрат,

“circle”- окружность.

Замечание: по умолчанию маркеры имеют атрибут “circle”.

3. С помощью языка HTML можно создавать списки определений, т.е. определения понятий оформляются также как в словаре. Списки определений задаются парным тегом <DL>. Внутри него текст оформляется в виде т е р м и н а , который выделятся непарным тегом <DT> и о п р е д е л е н и я, которое следует за непарным тегом <DD>.

Тема: Фреймы

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

Документ, использующий фреймы, содержит только описание внешнего вида фреймов, которое выполняется в таге <frameset>...</frameset>, используемом вместо тага <body>. У тага <frameset> есть две главных опции - rows="список величин" и cols="список величин", описывающие, соответственно, строки и столбцы таблицы фреймов.

Строка "список величин" представляет собой разделенный запятыми перечень значений в пикселах, процентах или относительных величинах. Например, таг <frameset rows="100,240,140"> создает сетку из 3 кадров, высота которых равна 100, 240 и 140 пикселов соответственно, <frameset cols="25%,75%"> создает 2 кадра с шириной 25 и 75 процентов от ширины окна браузера, а <frameset cols="*,2*"> - 2 кадра с шириной 1/3 и 2/3 ширины окна браузера.

Эти способы можно использовать и совместно - например, <frameset cols="128,*"> указывает оставить 128 пикселов слева под первый фрейм, а все остальное пространство - под второй. При определении обоих атрибутов rows и cols, например, <frameset rows="*,2*" cols="*,2*"> получается сетка кадров.

Другие опции тага <frameset>:

border="ширина" - указывает ширину обрамления всех рамок для всех кадров, в пискелах;

frameborder=yes или frameborder=no - включает или выключает отображение обрамления кадров. В случае yes рамка имеет трехмерную форму, иначе она невидима, то есть имеет цвет фона окна по умолчанию. Некоторые браузеры "понимают" эту опцию только в виде frameborder=1 или frameborder=0, поэтому обычно указывают оба способа;

framespacing="ширина" - указать ширину промежутка между смежными кадрами в пискелах. Не действует в Netscape Navigator.

Внутри тага <frameset> находятся описания отдельных кадров, каждое в собственном таге <frame>, закрывать который не нужно. Число тагов <frame> должно быть равно числу кадров, определенных в таге <frameset>, при этом считается, что кадры описываются слева направо и сверху вниз.

Перечислим основные опции тага <frame>:

1. опция src="url" указывает URL исходного документа для данного кадра;

2. опция name="строка" указывает имя кадра. Это необходимо сделать, если предполагается ссылаться из одних кадров на другие;

3. опция scrolling="значение" управляет линейками прокрутки кадра. Значение может быть задано в виде yes (линейки есть всегда), no (никогда) или auto (если необходимо);

4. опция noresize запрещает изменять размеры кадра. Опция noresize, указанная для данного кадра, влияет также и на все кадры, смежные с ним;

5. опция frameborder может указываться также внутри тага <frame>, со всеми замечаниями, которые сделаны относительно нее. Указание этой опции в таге <frame> отменяет указание, сделанное в таге <frameset> для данного кадра и всех, смежных с ним;

6. опции magrinheight="ширина" и marginwidth="ширина" задают размещение по верхней-нижней и боковым сторонам кадра областей свободного пространства, ширина которых указывается в пикселах.

После того, как таг <frameset> закрыт, можно использовать таг <noframes>...</noframes>, определяющий содержимое, которое будет выводиться браузерами, не поддерживающими кадры.

Для создания более сложных конфигураций кадров таги <frameset> могут вкладываться друг в друга - внутренний таг <frameset> может быть вложен вместо любого из тагов <frame>.

Пример документа с фреймами:

<html>

</frameset>

Извините, Ваш браузер не поддерживает кадры!

</noframes>

</html>

Здесь верхний кадр высотой 40 пикселов может служить, например, для вывода рекламы и связан с файлом reclama.html. Остальная часть окна разбита на 2 колонки. Левая колонка имеет ширину 128 пикселов и может быть предназначена для вывода меню (документ menu.html). Третий кадр занимает основную часть окна и предназначен для вывода информации (файл index.html).

Для создания ссылки из одного кадра в другой достаточно указать в таге ссылки опцию вида target="имя кадра". Например, для ссылки из кадра menu в кадр main достаточно написать в документе menu.html ссылку вида <a href="URL нового документа" target="main">...</a> При щелчке по этой ссылке содержимое правого кадра, то есть, документ index.html, будет заменено на новый документ.

При работе с кадрами можно также указывать опцию target в одном из видов _self (загрузить в тот же кадр, откуда делается ссылка), _parent (загрузить в родительский для данного кадр; если такого нет - результат действия аналогичен _self) или _top (загрузить в полное окно, разрушая все кадры).

Задание по теме "Работа с фреймами"

Создайте документ, содержащий 2 вертикально расположенных фрейма. Левый фрейм (узкий) предназначен для вывода меню, правый (широкий) - для вывода содержимого документов, на которые Вы ссылаетесь из меню. Размеры фреймов должны быть изменяемы. Оставьте небольшое свободное пространство между фреймами.

Создайте в левом фрейме меню для навигации по всем страницам Вашего сайта. Проверьте работу документа с фреймами.