Методические указания1_2 (1084715), страница 7

Просмтор этого файла доступен только зарегистрированным пользователям. Но у нас супер быстрая регистрация: достаточно только электронной почты!

Текст из файла (страница 7)

height=высота

<TD>

Этот элемент определяет обычную ячейку таблицы. Для него допустимы те же

атрибуты, что и для элемента ТН.

Оба элемента — ТН и TD — могут не иметь конечных тегов. Функцию конечного тега выполняет следующий элемент, который определяет структуру таблицы.

Теперь, зная, какие элементы используются для создания таблицы, мы можем создать простейшую таблицу:

<TABLE border=4 cellspacing=3>

<CAPTION> Заголовок таблицы </caption>

<TR><TH bgcolor="yellow">Зarоловок 1

<TH bgcolor="yellow"> Зarоловок 2

<TR><TD>Ячейка 1

<TD>Ячейка 2

<TR><TD>Ячейка 3

<TD>Ячейка 4

</table>

И
з примера видно, что первая строка таблицы содержит только ячейки-заголовки. Внешний вид таблицы показан на рис. 3.9.

Рис. 3.9. Таблица с заголовками столбцов

Текст, расположенный после элементов TD, представляет собой содержимое ячейки. Таблица может форматироваться автоматически (если не заданы атрибуты) с учетом объема данных в ячейках. Последний пример можно несколько усложнить. При необходимости можно создать заголовки как для столбцов, так и для строк:

<TABLE border=4 cellspacing=3>

<CAPTION> Заголовок таблицы </caption>

<TR><TH bgcolor="yellow">

<TH bgcolor="yellow"> Зarоловок 1

<TH bgcolor="yellow"> Зarоловок 2

<TR><TH bgcolor="yellow"> Зarоловок 3

<TD>Ячейка 1

<TD>Ячейка 2

<TR><TH bgcolor="yellow"> Зarоловок 4

<TD>Ячейка 3

<TD>Ячейка 4

</table>

Эта таблица показана на рис. 3.10. Обратите внимание: несмотря на то, что левая верхняя ячейка не используется, для нее задан цвет фона так же, как и для других ячеек-заголовков. Это необходимо сделать для того, чтобы рамка таблицы в этом месте была правильно прорисована.

Рис. 3.10. Таблица с заголовками столбцов и строк

Еще один пример таблицы. В некоторых случаях возникает необходимость соединения ячеек. Тогда можно использовать атрибуты rowspan и colspan, как показано в этом примере:

<TABLE border="4" cellspacing=3 background="Velvet1.gif">

<CAPTION>Таблица с объединенными ячейками </CAPTION>

<TR><TH rowspan="2">&nbsp; <TH colspan="2">3aголовок 1

<TR><TH>Заголовок 1.1<TH>Заголовок 1.2

<TR><TH>3aголовок 2<TD>Ячейка1 <TD>Ячейка 2

<TR><TH>Заголовок 3<TD>Ячейка 3 <TD>Ячейка 4

</table>

Эта таблица показана на рис. 3.11. Обратите внимание, что в ячейке, не содержащей текста, помещен символ неразрывного пробела &nbsp;. Это необходимо для того, чтобы сетка таблицы была правильно прорисована.

Рис. 3.11. Таблица с объединенными ячейками

Группы строк: <THEAD>, <TFOOT> и <TBODY>

Существует возможность группировки строк таблицы. Для этого предусмотрен элемент блока заголовка THEAD, элемент обычных блоков строк TBODY и элемент нижнего блока строк TFOOT. В каждом блоке может присутствовать любое количе­ство строк (элементов TR). Эти три элемента могут использоваться как с конечны­ми тегами, так и без них. В качестве примера можно привести шаблон таблицы:

<TABLE border=2>

<THEAD>

<TR> <TD>Заголовок 1<TD>Заголовок 2

<TFOOT>

<TR> <TD>Нижний блок таблицы<TD>&nbsp;

<TBODY>

<TR> <TD>Строка 1 <TD>Ячейка 1.2

<TR> <TD>Строка 2 <TD>Ячейка 2.2

<TBODY>

<TR> <TD>Строка З <TD>Ячейка 3.2

<TR><TD>Строка 4 <TD>Ячейка 4.2

<TR><TD>Строка 5 <TD>Ячейка 5.2

</table>

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

Рис. 3.12 Таблица с группами строк

При использовании этих элементов надо придерживаться следующих правил.

• В таблице можно указывать по одному элементу ТНЕАD и TFOOT, но несколько элементов TBODY.

• Последовательность задания элементов следующая: THEAD, TFOOT, TBODY. Но в таблице на экране блок TFOOT окажется самым нижним.

• Все блоки должны содержать одинаковое количество колонок.

Группы колонок: <COLGROUP> и <COL>

Элемент COLGROUP позволяет создавать группы колонок с одинаковыми свойствами. Рассмотрим пример таблицы:

<TABLE border=4>

<COLGROUP span=1 width="30" bgcolor="lime">

<COLGROUP bgcolor="yellow">

<COL span=2 width="30">

<COL width="60">

<COLGROUP bgcolor="aqua">

<COL width="50">

<TR><TD> 1-1 <TD> 1-2 <TD> 1-3 <TD> 1-4 <TD> 1-5

<TR><TD> 2-1 <TD> 2-2 <TD> 2-3 <TD> 2-4 <TD> 2-5

</table> .

Е
е внешний вид показан на рис. 3.13.

Рис. 3.13. Таблица с элементами COLGROUP и COL

Каждый элемент COLGROUP позволяет назначить свойства определенному числу колонок, задаваемому атрибутом span. Все эти колонки будут одинаковые. Можно также использовать элемент COL для указания свойств одной колонки. Тогда часть свойств будет совпадать для всех колонок, относящихся к одному элементу COLGROUP, а часть может отличаться. В таблице могут быть определены свойства для любого количества колонок, и если реальных колонок будет меньше, то некоторые (последние) определения окажутся невостребованными. Это не является ошибкой. Для задания свойств могут использоваться те же самые атрибуты, что и для других элементов таблицы. Есть несколько правил задания элементов. В смысле описания свойств элемент COLGROUP обладает более высоким приоритетом, а элементы COL располагаются внутри элементов COLGROUP. В таблице могут присутствовать несколько элементов COLGROUP. Если число колонок в одном таком элементе задается атрибутом span, использовать в нем элементы COL не имеет смысла. Если элементы COL существуют, то атрибут span соответствующего элемента COLGROUP игнорируется, то есть число колонок определяется числом элементов COL. Для отдельных элементов COL можно вводить собственные атрибуты span.

3.8. Фреймы

<FRAMESET> <FRAME> </frameset>

Фреймы — это области, которые создаются в окне броузера для одновременной демонстрации нескольких документов. Не все браузеры позволяли разделять область просмотра на части, но эта идея завоевала всеобщее признание. Новые версии браузеров поддерживают фреймы в обязательном порядке. При создании страниц с фреймами разрабатывается несколько Web-страниц. При этом HTML-файлы отличаются по типам. Документы раскладки (layout) используются для создания структуры окна, то есть для описания того, как оно должно быть разделено. Документы содержания (content) предназначены для заполнения информацией каждой из областей. Итак, как же создать Web-страницу с фреймами?

Вначале необходимо продумать, какие области потребуются. Горизонтальное деление экрана задается при помощи атрибута rows, а вертикальное — при помощи атрибута cols. Значения атрибутов могут быть выражены в пикселах или процентах. Кроме того, используется символ * для обозначения оставшейся части экрана. Приведем несколько примеров:

• cols=50%, 50% — деление области просмотра по вертикали пополам (принцип программы Norton Commander);

• cols=25%, 75% — левая вертикальная область в три раза уже правой. Такой стиль избрали многие фирмы, имеющие свои сайты в Интернете;

• rows=150, 30%, * —для верхней горизонтальной области отведено 150 пикселов, для средней — тридцать процентов доступного пространства, а для нижней — все, что останется;

• cols=*, 4* — стиль для любителей головоломок. Правая вертикальная область в четыре раза шире левой. Эту формулу можно записать и так: cols=20%, 80%.

В элементе FRAMESET можно использовать и стандартные атрибуты id, class, title, style, onload, onunload.

Вторым этапом является подготовка отдельных HTML-файлов для каждой области. Они создаются по таким же правилам, что и другие гипертекстовые документы. Нужно только учитывать размер области, в которой они будут демонстрироваться. До тех пор, пока эти файлы не будут созданы, открывать документ раскладки в браузере не имеет смысла: вы ничего не увидите. Кстати, из этого следует одна особенность общения с Интернетом. Если вы набрели на сайт с фреймами и хотите заполучить в свою личную папку понравившийся документ, не пытайтесь сохранять основной HTML-файл. Вместо этого просмотрите его в режиме источника и найдите ссылку на конкретный документ содержания. Затем загляните в папку кэша, где последний и должен находиться.

В документе раскладки секция FRAMESET используется вместо секции BODY.

Атрибуты элемента <FRAME>

Кроме стандартных атрибутов — id, class, title и style — этот элемент имеет ряд атрибутов, позволяющих усовершенствовать оконную структуру.

Внутри элемента FRAMESET должна быть создана ссылка на каждый документ содержания, входящий в сложную страницу. Кроме того, каждый элемент FRAME полезно снабдить именем с помощью атрибута name. Имя можно указывать в гиперссылках (см. листинг 3.5). В результате элемент FRAME может выглядеть так:

<FRAME src="Имя файла.htm" пате="имя фрейма">

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

Атрибут scrolling управляет прокруткой внутри одной области. Он может принимать значения YES (полосы прокрутки создаются в обязательном порядке), N0 (прокрутка запрещена) и AUTO (полосы прокрутки появляются, когда необходимо). Если этот атрибут отсутствует, браузер создает полосы прокрутки для тех документов, которые не умещаются целиком в отведенных им областях. Запретив прокрутку, можно создать так называемый баннер.

Значением атрибута longdesc является ссылка на другой файл (URL). Таким способом для фрейма создается описание любого объема. Это своего рода альтернатива использованию стандартного атрибута title, при помощи которого обычно задается короткий текстовый комментарий.

При помощи атрибута frameborder указывается, нужна или нет рамка вокруг фрейма. Значение 1 создает рамку, значение 0 — отменяет. Если необходимо убрать границу между фреймами, надо учитывать, что она создается рамками двух смежных областей.

Атрибут marginheight задает величину отступа страницы от верхнего и нижнего краев фрейма. Значение указывается в пикселах, например:

marginheight="75" Другой похожий атрибут, marginwidth, создает поля слева и справа, например:

marginwidth="10"

В качестве примера, поясняющего конструкцию фреймов, рассмотрим шаблон (файл Frame.htm) для создания сложной Web-страницы.

Листинг 3.1. Шаблон страницы с фреймами

<HTML>

<HEAD>

<TITLE> Фреймы </title>

</head> .

<FRAMESET rows="20%,60%,20%">

<FRAME src="fr1.htm" noresize>

Характеристики

Список файлов книги