Аквт.2101.Лр27.0500

14 Оформление web-страниц с помощью таблиц

1. Цель работы

1.1. Изучить теги создания таблиц.

1.2. Научиться создавать Web-страницы с использованием таблиц.

2. Приборы и оборудование

2.1. Текстовый редактор "Блокнот".

2.2. MS Internet Explorer.

3. Порядок выполнения работы

3.1. Изучить основные теоретические сведения.

3.3. Создать страницу с использованием вложенных таблиц в соответствии с приложением 1.

3.3. Создать таблицу, предложенную в приложении 2

3.4. Создайте собственную таблицу на странице

3.4. Оформить отчет.

4. Контрольные вопросы

4.1. Таблицы, назначение и применение?

4.2. Вложенные таблицы, как способ оформления web-страниц?

П риложение 1

Приложение 2

Приложение3

Таблицы и фреймы

Таблицы

Изначально HTML не поддерживал таблицы ни в каком виде. Сейчас таблицы используются не только для представления данных, но и как элемент оформления Web-страниц. Благодаря таблицам можно очень точно позиционировать текстовые фрагменты и графику, создать элементы оформления, линейки и заливки, отступы и выступы почти как в печатных изданиях.

Тег таблицы имеет следующий формат:

<TABLE [BORDER="{Толщина рамки}"]

[CELLPADDING="{Расстояние между границей и содержимым ячейки}"]

[CELLSPACING="{Расстояние между ячейками}"]

[WIDTH="{Ширина таблицы}"] [HEIGHT="(Высота таблицы}"]

[ALIGN="left|center|right"] [ВGСОLOR="Цвет фона таблицы}"]

[BORDERCOLOR="{Цвет рамки}"] [BACKGROUND="{Адрес фонового рисунка}"]

[FRAME="none|above|below|hsides|Ihs|rhs|vsides|vsides|box"]

[RULES="none|rows|cols|all"]>

<! - - Определения строк - ->

</TABLE>

Теперь разберем все атрибуты этого тега.

Атрибут BORDER задает толщину рамки таблицы в пикселях. Если он отсутствует, рамка не видна, но Web-обозреватель при отображении таблицы считает, что она имеется. Если дать этому атрибуту значение о, рамки у таблицы не будет вообще.

Атрибут CELLPADDING позволяет задать размер в пикселях свободного пространства между рамкой и содержимым ячейки. По умолчанию оно равно 1.

Атрибут CELLSPACING позволяет задать размер в пикселях свободного пространства между ячейками таблицы. По умолчанию оно равно 2.

Атрибуты WIDTH и HEIGHT позволяют установить размеры таблицы. Допускается указывать размер и в виде абсолютной величины, в пикселях, и в процентах относительно размеров окна Web-обозревателя (в последнем случае не забудьте добавить к числу знак процента "%"). Если эти атрибуты пропущены, Web-обозреватель сам задает размеры таблицы так, чтобы все содержимое поместилось в ней.

Атрибут ALIGN задает "обтекание" таблицы текстом. Значение left заставляет таблицу прижаться к левой границе окна Web-обозревателя, а текст будет "обтекать" ее справа, значение right задает обратное расположение, а значение center размещает таблицу в центре страницы.

Атрибуты BGCOLOR и BACKGROUND задают соответственно цвет фона и адрес фонового рисунка для таблицы.

Атрибут BORDERCOLOR позволяет задать цвет рамки таблицы. Он не стандартизирован W³C и поддерживается только Internet Explorer.

Атрибут FRAME определяет, какие части внешней рамки таблицы будут рисоваться. Доступны следующие значения:

• void - внешней рамки нет вообще (значение по умолчанию);

• above - рисуется только верхняя линия внешней рамки;

• below - рисуется только нижняя линия внешней рамки;

• hsides - рисуются только горизонтальные линии внешней рамки, т.е. верхняя и нижняя;

• ihs - рисуется только левая линия внешней рамки;

• rhs - рисуется только правая линия внешней рамки;

• vsides - рисуются только вертикальные линии внешней рамки, т.е. левая и правая;

• box - рисуются все линии внешней рамки.

Этот атрибут поддерживается только Internet Explorer, хотя и стандартизирован W³C.

Атрибут RULES задает, как будут рисоваться внутренние рамки таблицы. Здесь доступны следующие значения:

• none - никаких внутренних рамок;

• rows - рисуются только горизонтальные линии (между строками);

• cols - рисуются только вертикальные линии (между столбцами);

• all - рисуются все внутренние рамки.

Этот атрибут поддерживается только Internet Explorer, хотя также стандартизирован W³C.

Строки определяются внутри тега таблицы с помощью пар тегов <TR> и </TR>.

<TR [ALIGN="left|center|right|justify"]

[VALIGN="left|middle|bottom|baseline"] [BGCOLOR="{Цвет фона строки}"] [BORDERCOLOR="{Цвет рамки}"] [WIDTH="{Ширина ячейки}"] [HEIGHT="{Высота ячейки)"]>

<!- - Определения ячеек - - >

</TR>

Атрибут ALIGN задает горизонтальное выравнивание текста в ячейках таблицы. Доступные значения left, center, right и justify устанавливают выравнивание по левому краю, центру, правому краю ячейки и полное выравнивание по ширине соответственно. По умолчанию текст выравнивается по левому краю.

Атрибут VALIGN задает вертикальное выравнивание текста в ячейках таблицы. Доступные значения top, middle, bottom и baseline устанавливают выравнивание по верхнему краю, центру, нижнему краю ячейки и базовой линии соответственно. По умолчанию текст выравнивается по центру.

Атрибуты BGCOLOR, BORDERCOLOR, HEIGHT и WIDTH ведут себя так же и выполняют те же функции, что и одноименные атрибуты тега <TABLE>. Они задают цвет фона, цвет рамки, высоту и ширину строки таблицы соответственно.

Ячейки таблицы определяются внутри тега строки с помощью пар тегов <TD> и </TD>. Как раз в ячейках и находится полезное содержимое таблицы.

<TD [ALIGN="left|center|right|justify"] [VALIGN="left|middle|bottom |baseline"] [WIDTH="{Ширина ячейки}"] [HEIGHT="{Высота ячейки}"] [NOWRAP] [COLSPAN="{Количество объединяемых ячеек по вертикали}"] [ROWSPAN="{Количество объединяемых ячеек по горизонтали }"] [ВGCOLOR="{Цвет фона ячейки}"] [BORDERCOLOR="{Цвет рамки}"] [BACKGROUND="{Адрес фонового рисунка}"]>

<!- - Содержимое ячейки - ->

</TD>

Атрибуты ALIGN и VALIGN задают горизонтальное и вертикальное выравнивание текста в ячейке соответственно.

Атрибуты WIDTH и HEIGHT позволяют установить ширину и высоту ячейки. Допускается указывать размер и в виде абсолютной величины, в пикселах, и в процентах относительно размеров таблицы (атрибут WIDTH) или окна Web-обозревателя (атрибут HEIGHT). (He забудьте добавить к числу знак процента "%", если задаете относительный размер.) Если эти атрибуты пропущены, Web-обозреватель сам задает размеры ячейки так, чтобы все содержимое поместилось в ней.

Атрибут NOWRAP отменяет перенос текста со строки на строку. Он не "свертывается" в несколько строк для того, чтобы полностью вместиться в ячейку, а "выстраивается" в виде одной длинной строки. Будьте осторожны с этим атрибутом, т.к. при его использовании ваша таблица может сильно "раздуться" в ширину и не поместиться в окне Web-обозревателя; пользователю придется прокручивать вашу таблицу по горизонтали, и будьте уверены - он перемоет вам все косточки.

Атрибуты ROWSPAN и COLSPAN мы рассмотрим чуть позже, когда будем гово­рить о сложных таблицах с объединенными ячейками. А пока наберитесь терпения.

Атрибуты BGCOLOR, BACKGROUND и BORDERCOLOR уже должны быть вам знакомы. На этот раз они управляют параметрами индивидуальной ячейки таблицы.

Таблица целиком описывается парой тегов <TABLE> и </TABLE>, внутри которых помещаются описания строк. Отдельная строка описывается опять же парой тегов <TR> и </TR>, внутри которых помещаются описания ячеек. Каждая ячейка описывается парой тегов <TD> и </TD>, внутри которых помещается собственно содержимое ячейки.

В качестве содержимого может быть текст, в том числе и сложно отформатированный, рисунки и даже другие таблицы. Все, кроме фреймов.

Рассмотрим пример таблицы.

<HTML>

<HEAD>

<ТITLE>Хитрая таблица</TITLE>

</HEAD>

<BODY>

<Н1>Хитрая таблица</Н1>

<!- - Это наша таблица. Следите за тегами - ->

<TABLE BORDER="2" WIDTH="100%">

<TR ALIGN="center">

<ТD><Р>Просто текст</Р></ТD>

<!- - Здесь у нас рисунок - ->

<TD><IMG SRC="Tips.gif"></TD>

</TR>

<TR ALIGN="center">

<!- - Сложно отформатированный текст - - >

<TD>

<Р>Строка <В>1</В></Р>

<Р>Строка <В>2</В></Р>

<Р>Строка <В>3</В></Р>

</TD>

<!- - Здесь у нас вложена ДРУГАЯ ТАБЛИЦА!!! - ->

<TD>

<TABLE BORDER="1">

<TR ALIGN="center">

<TD>1</TD>

<TD>2</TD>

</TR>

<TR ALIGN="center">

<TD>3</TD>

<TD>4</TD>

</TABLE>

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Таблицы можно использовать для создания Web-страниц, не уступающих по качеству оформления документам, созданным в издательских программах.

Главным недостатком HTML является его ориентированность на текст, на простые текстовые документы. Можно сверстать документ в несколько колонок, сделать сноски, врезки и другие подобные типографские элементы, которые поддерживают все современные текстовые процессоры. Допускается только набирать текст и форматировать его, т.е. создавать простой текст, заполняющий Web-страницу от начала до конца, либо текст, с добавлением рисунков и таблиц.

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

Рассмотрим пример оформления Web-страницы с помощью таблицы:

<HTML>

<HEAD>

<ТITLE>Красивый сайт</TITLE>

</HEAD>

<BODY>

<!- - Весь наш документ будет представлять собой большую таблицу - - >

<TABLE BORDER="1" CELLPADDING="5">

<!- - Это заголовок нашего сайта. Он займет всю строку - ->

<TR>

<TD COLSPAN="3" BGCOLOR="bisque" NOWRAP>

<P ALIGN="center"><FONT SIZE="7" COLOR="midnightblue"> Красивый сайт< / FONT>< / P>

</TD>

</TR>

<!- - А это - содержимое - ->

<TR VALIGN="top">

<TD BGCOLOR="bisque"> <TABLE>

<TR>

<TD>

<P><A HREF="dunimy.htm">Введение</A></P>

</TD>

</TR>

<TR>

<TD>

<P><A HREF="dummy.htm">Глава l</A></P>

</TD>

</TR>

<TR>

<TD>

<P><A HREF="durniy.htm">Глава 2</A></P>

</TD>

</TR>

<TR>

<TD>

<P><A HREF="dumny.htm">Заключение</A></P>

</TD>

</TR>

</TABLE>

</TD>

<TD>

</TD>

<TD>

<Р>Сегодня этот сайт был создан.</Р>

</TD>

</TR>

<TR>

<TD COLSPAN="3" BGCOLOR="black">

<P ALIGN="right"><I><FONT COLOR= "white">Авторские права принадлежат мне<FONT></I></Р>

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Теперь таблицы используют в создании Web-страниц так же часто, как и фреймы

Рассмотренный выше дизайн страницы - строка заголовка, колонка ссылок, колонка описания сайта, колонка новостей и строка сведений об авторских правах - очень популярен. Уже сейчас таких сайтов становится все больше и больше; кроме того, подобный дизайн завоевывает популярность и среди любителей. Главным достоинством этих страниц является то, что такие страницы легко читать. А с долгой загрузкой можно и смириться.

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

Когда Web-дизайнер форматирует таблицу, используя теги <TR> и <TD> (и парные им закрывающие теги), Web-обозреватель не знает, что будет помещаться в ячейках таблицы: может, это будет шапка таблицы, может, содержимое, а может, они останутся пустыми. Несмотря на то, что Web-дизайнер поместит в ячейки таблицы, все они будут одинаковыми, без каких-либо отличий в форматировании. Поэтому Web-дизайнер сам должен соответствующим образом отформатировать текст в соответствующих ячейках, основываясь на его предназначении.

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

Тег ячейки заголовка практически не отличается от тега простой ячейки. Его формат приведен ниже:

<TH [ALIGN="left|center|right|justify"] [VALIGN="left|middle|bottom |baseline"] [WIDTH="{Ширина ячейки}"] [HEIGHT="{Высота ячейки}"] [NOWRAP] [COLSPAN="{Количество объединяемых ячеек по вертикали}"][ROWSPAN=" {Количество объединяемых ячеек по горизонтали }"][BGCOLOR="Цвет фона ячейки}"] [BORDERCOLOR=" {Цвет рамки}][BACKGROUND="{Адрес фонового рисунка}"]>

<!-- Содержимое ячейки -->

</ТН>

Данный тег совсем не отличается от формата тега <TD>, ведь ячейка заголовка не должна, по идее, иметь каких-либо отличий от простых ячеек, кроме особого визуального представления: по умолчанию текст в ячейках заголовка выровнен по центру и выделен жирным шрифтом.

Заголовок таблицы устанавливают с помощью пары тегов <CAPTION> и </CAPTION>. Он появляется внутри рамки таблицы, но вне всех ее строк и ячеек.

<CAPTION [ALIGN="top|bottom|left|center|right"] [VALIGN="top |bottom"]> </CAPTION>

Атрибут ALIGN ведет себя по-разному в зависимости от Web-обозревателя. Для Navigator он задает местонахождение заголовка: значение top выводит заголовок вверху таблицы (это поведение по умолчанию), a bottom - внизу. Для Internet Explorer он задает выравнивание текста в заголовке: по левому краю (значение left), по центру (значение center, это же поведение по умолчанию) или по правому краю (значение right).

Атрибут VALIGN поддерживается только Internet Explorer и задает местонахождение заголовка таблицы. Значение top помещает его в верхней части таблицы, а значение bottom- в нижней.

Спецификацией HTML определены соответствующие теги. Но пока что их поддерживает только Internet Explorer, поэтому все Web-дизайнеры используют только обычное, нелогическое форматирование таблиц с помощью тегов, описанных выше. Если в таблице будут применено логическое разбиение, то правильно их отобразит только Internet Explorer.

За логическое форматирование таблиц отвечают пять тегов, из которых три - парные.

Тег <THEAD> выделяет заголовок и шапку таблицы, образуя так называемую секцию заголовка.

<THEAD [ALIGN="left|center|right|justify"] [VALIGN="left|middle |bottomlbaseline"] [BGCOLOR="{Цвет фона секции}"]>

<!- - Определения строк и ячеек - ->

</THEAD>

Все атрибуты этого тега ведут себя так же, как и во всех предыдущих случаях. Я не буду подробно на них останавливаться.

Тег <TBODY> образует секцию тела таблицы.

<TBODY [ALIGN="lef1|center|right|justify"][VALIGN="left|middle|bottom|baseline"] [BGCOLOR="{Цвет фона секции}"]>

<!- - Определения строк и ячеек - ->

</TBODY>

Тег <TFOOT> отвечает за секцию основания таблицы.

<TFOOT [ALIGN="left|center|right|justify"] [VALIGN="left|middle |bottom|baseline"] [BGCOLOR="{Цвет фона секции}"]>

<!-- Определения строк и ячеек —>

</TFOOT>

Теперь рассмотрим пример. Пусть это будет таблица умножения.

<TABLE BORDER="2">

<THEAD>

<TR>

<TH></TH><TH>1</TH><TH>2</TH>

<TH>3</TH><TH>4</TH><TH>5</TH>

</TR>

</THEAD>

</TBODY>

<TR>

<TD>1</TD><TD>1</TD><TD>2</TD>

<TD>3</TD><TD>4</TD><TD>5</TD>

</TR>

<TR>

<TD>2</TD><TD>2</TD><TD>4</TD>

<TD>6</TD><TD>8</TD><TD>10</TD>

</TR>

<TR>

<TD>3</TD><TD>3</TD><TD>6</TD>

<TD>9</TD><TD>12</TD><TD>15</TD>

</TR>

<TR>

<TD>4</TD><TD>4</TD><TD>8</TD>

<TD>12</TD><TD>16</TD><TD>20</TD>

</TR>

<TR>

<TD>5</TD><TD>5</TD><TD>10</TD>

<TD>15</TD><TD>20</TD><TD>25</TD>

</TR>

</TBODY>

<TFOOT ALIGN="right">

<TR><

TD COLSPAN="6"><I>Вот такая таблица умножения</I></ТD>

</ТR>

</TFOOT>

</TABLE>

Визуально эти теги ничего не делают. Они просто логически разделяют таблицу на три части. Это может быть полезно во многих случаях, особенно если планируется какая-либо дополнительная обработка таблицы. И, конечно, эти теги просто необходимы, если будут писаться какие-либо скриптовые программы для Web-страниц.

Теги логического форматирования таблиц можно использовать для задания каких-то общих атрибутов групп строк, например выравнивания и цвета фона. К сожалению, поймет все это правильно только Internet Explorer.

Теперь рассмотрим специальные теги логического форматирования для отдельных столбцов таблицы. Визуально эти теги ничего не дают, но помогут задать для целых групп столбцов общие параметры форматирования. Таких тегов два (причем, непарных): <COLGROUP> для группы столбцов и <COL> для отдельного столбца.

Тег <COLGROUP> объединяет несколько столбцов в группу.

<COLGROUP [ALIGN="left|center|right|justify"] [VALIGN="left| middle|bottom|baseline"] [SPAN="{Количество столбцов в группе)"]>

Атрибут ALIGN и VALIGN они делают то же самое, что и в рассмотренных ранее тегах.

Атрибут SPAN задает количество столбцов в группе. Тег <COLGROUP> - одинарный, поэтому объединять какое-то количество столбцов внутри себя, как парные теги, он не может. Количество входящих в группу столбцов нужно задавать другим способом - через специальный атрибут. По умолчанию значение атрибута SPAN равно единице, т.е. группа будет содержать один столбец.

И еще один тег - <COL>, задающий формат сразу нескольких колонок, но не объединяющий их в группу:

<COL [ALIGN="left|center|right|justify"] [VALIGN="left|middle |bottom |baseline"] [SPAN="{Количество столбцов, на которое распространяется форматирование}"]>

Здесь все атрибуты такие же, как у тега <COLGROUP>. За тем исключением, что атрибут SPAN задает не количество столбцов в группе, а количество столбцов, на которые будет распространяться указанное в теге <COL> форматирование. То есть тег <COL> не группирует столбцы в группу, а указывает, сколько столбцов будут иметь заданные в нем параметры форматирования текста.

Рассмотрим пример заголовка таблицы.

<COLGROUP SPAN="3" ALIGN="left">

<COLGROUP SPAN="2" ALIGN="right">

<COL SPAN="2" ALIGN="justify">

<THEAD>

<TR>

<ТD>Столбец 1</TD>

<ТD>Столбец 2</TD>

<ТD>Столбец 3</TD>

<ТD>Столбец 4</TD>

<ТD>Столбец 5</TD>

<ТD>Столбец 6</TD>

<ТD>Столбец 7</TD>

</TR>

</THEAD>

Эта таблица имеет пять столбцов, разбитых на две группы, и еще два дополнительных столбца, не входящих ни в одну группу. Первая группа охватит столбцы с первого по третий (атрибут SPAN равен 3), а вторая соответственно - четвертый и пятый (атрибут SPAN равен 2). Первая группа столбцов будет выровнена влево (вообще-то, атрибут ALIGN можно было бы и не писать: по умолчанию текст в ячейках выравнивается влево), а вторая - вправо. А оставшиеся два столбца останутся "сами по себе", и текст в них будет выровнен по обоим краям.

Фреймы

Фреймы в свое время произвели настоящую революцию в Web-дизайне. И это притом, что W³C стандартизировал их совсем недавно. Фреймы являются самыми нестандартными элементами HTML. Создавая страницу в виде набора фреймов, невозможно предугадать, как они будут показаны различными Web-обозревателям и. приходится многократно тестировать страницу во всех возможных браузерах, экспериментировать со значениями атрибутов, чтобы получить более-менее приемлемый результат.

Но несмотря на это фреймы используются и довольно часто.

Фреймы – это когда окно Web-обозревателя делится на несколько независимых окон, в каждом из которых может отображаться своя Web-страница. Это производится с помощью специальной Web-страницы, где описываются параметры такого разделения. Она называется набором фреймов, а отдельные окна обозревателя - фреймами. Каждый фрейм можно рассматривать как отдельное окошко Web-обозревателя; оно и ведет себя как отдельное окно.

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

Приведем пример программного кода с фреймами:

<HTML>

<HEAD>

<ТITLE>Сайт с фреймами</ТIТLЕ>

</HEAD>

<FRAMESET ROWS="50,*">

<FRAME SRC="1.7.header.htm" NAME="frmHeader">

<FRAMESET COLS="100,*">

<FRAME SRC="1.7.contents.htm" NAME="frmContents">

<FRAME SRC="1.7.1.htm" NAME="frmBody">

</FRAMESET>

</FRAMESET>

</HTML>

Вместо пары тегов <BODY> и </BODY> используются соответственно <FRAMESET> и </FRAMESET>. И еще одна важная деталь: в странице набора фреймов указывается только описание набора фреймов - никакого содержимого.

Теперь страница заголовка (файл 1.7.header.htm). Она простая.

<HTML>

<HEAD>

<ТITLЕ>Заголовок</ТITLE>

</HEAD>

<BODY TEXT="blue">

<Н1>Сайт с фреймами</Н1>

</BODY>

</HTML>

Здесь указаны тег заголовка страницы <TITLE> и </TITLE>. Этого требуют стандарты, хотя для страниц, которые будут отображаться во фреймах, это не обязательно: в данном случае всегда отображается заголовок набора фреймов.

Страница оглавления заметно интереснее (файл 1.7.contents.htm).

<HTML>

<HEAD>

<ТIТLЕ>Оглавление</ТIТLЕ>

</HEAD>

<BODY>

<Р><А HREF="1.7.1.htm" TARGET="frmBody">Страница 1</A> </P>

<P><A HREF="1.7.2.htm" TARGET="frmBody">Страница 2</A> </P>

<P><A HREF="1.7.3.htm" ТАRGЕТ="frmBody">Страница 3</А> </Р>

</BODY>

</HTML>

Здесь видно, что у тега <A> появился новый атрибут TARGET. О нем будет рассказано позже, нужно отметить только то, что с его помощью можно задать фрейм, отображающий страницу, на которую указывает ссылка.

Странички, которые будут изображать из себя содержимое сайта, совсем просты и отличаются друг от друга только выводимым текстом. Сохраните их в файлах 17.1.htm, 1.7.2.htm и 1.7.3.htm.

<HTML>

<HEAD>

<!- - Подставьте соответствующий номер - ->

<ТIТLЕ>Содержимое 1 (2, 3)</TITLE>

</HEAD>

<BODY>

<!- - Здесь тоже подставьте соответствующий номер - ->

<Н1>Страница 1 (2, 3)</Н1>

<Р>Это первая (вторая, третья) страница нашего сайта.</Р>

</BODY>

</HTML>

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

Набор фреймов описывается с помощью пары тегов <FRAMESET> и </FRAMESET>. Эта пара тегов заменяет теги <BODY> и </BODY>.

<FRAMESET ROWS |COLS="{Размеры фреймов}" [BORDER="{Толщина границы}"] [BORDERCOLOR="{Цвет границы}"] [FRAMEBORDER="yes|no|0"] [FRAMESPACING="{Расстояние между фреймами)"]>

</FRAMESET>

Атрибуты ROWS и COLS - они определяют разбиение Web-страницы на фреймы.

Атрибут ROWS задает разбиение на строки. То есть, пространство страницы-набора фреймов будет разделено на две строки, разделенные границей.

ROWS="{Абсолютное значение размера}| {Относительное значение размера}%}|*"

Абсолютное значение задает высоту строки в пикселях. Относительное значение - в процентах от высоты окна Web-обозревателя; в этом случае не забудьте поставить знак процента "%". Символ звездочки "*" указывает, что под строку нужно отвести все оставшееся пространство, и всегда используется для указания размера последнего фрейма в наборе. Например:

ROWS="100,20%, *"

Здесь определили три фрейма-строки: один высотой 100 пикселов, другой, занимающий 20% высоты окна, и третий, которому отдали все остальное пространство.

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

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

Атрибут BORDERCOLOR задает цвет границы между фреймами. По умолчанию граница имеет серый цвет.

Атрибут FRAMEBORDER позволяет включить или отключить показ границы между фреймами. Он поддерживается и Navigator, и Internet Explorer, но по-разному. Navigator принимает значение yes для включения показа границы и по для отключения. Internet Explorer позволяет задавать также значения 1 и 0. По умолчанию граница показывается.

Атрибут FRAMESPACING позволяет задать расстояние между фреймами. Эта величина задается в пикселах.

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

Сами фреймы описываются с помощью другого тега, который будет рассмотрен ниже.

Отдельные фреймы набора описываются тегом <FRAME>. Отметим, что это одиночный тег.

<FRАМЕ [SRC="{Адрес отображаемой во фрейме страницы}"] [NAME="{Имя фрейма}"] [MARGINWIDTH="{Горизонтальный отступ}"] [MARGINHEIGHT="(Вертикальный отступ}"] [SCROLLING="yes|no |auto"] [NORESIZE] [FRAMEBORDER="yes|no|0"] [BORDERCOLOR= "{Цвет границы}"]>

Адрес страницы, которая будет отображаться во фрейме, задается в атрибуте SRC.

Атрибут NAME задает уникальное имя фрейма. Оно используется впоследствии в атрибуте TARGET тега <A>. Если атрибут NAME пропущен, фрейм остается непоименованным.

Атрибуты MARGINWIDTH и MARGINHEIGHT устанавливают расстояние между границей фрейма и его содержимым соответственно по горизонтали и вертикали. Эта величина задается в пикселах. Минимально возможное значение равно 1; по умолчанию Web-обозреватель сам выбирает значение, наиболее подходящее к конкретному случаю.

Атрибут SCROLLING запрещает или разрешает отображение полос прокрутки во фрейме. Значение auto задает их отображение лишь в том случае, если содержимое не помещается во фрейме; это поведение по умолчанию. Значение yes задает отображение полос прокрутки в любом случае, даже если они и не нужны, а значение по отключает их совсем. Используйте последнее значение с осторожностью: кто знает, какими увидит пользователь ваши страницы и увидит ли их вообще.

Атрибут NORESIZE отключает возможность изменения размеров фрейма.

Атрибуты FRAMEBORDER и BORDERCOLOR работают аналогично одноименным атрибутам тега <FRAMESET>.

Сейчас мы рассмотрим атрибут тега <A>, специально предназначенный для поддержки фреймов. Это атрибут TARGET.

ТАRGЕТ="(Имя фрейма}|_self|_parent|_top|_blank"

Как видите, значением этого атрибута может быть как имя фрейма, указанное в атрибуте NAME тега <FRAME>, так и какое-либо из зарезервированных значений. С первым все просто: Web-страница, адрес которой указан в атрибуте HREF гиперссылки, отображается в указанном фрейме. А все зарезервированные значения рассмотрены в табл. 2.

Таблица 2

Значение	Описание
self	Страница отображается в том фрейме, где находится гиперссылка
parent	Страница отображается в окне, являющемся родительским по отношению к текущему фрейму. В нашем случае - в окне Web-обозревателя, затерев набор фреймов
top	Страница отображается в окне, находящемся на верхнем уровне иерархии окон и фреймов. В нашем случае - в окне Web-обозревателя, затерев набор фреймов, как и в предыдущем случае
blank	Страница отображается в новом окне Web-обозревателя

Давайте рассмотрим предыдущий пример с внесенными в него изменениями.

<HTML>

<HEAD>

<ТIТLЕ>Сайт с фреймами</ТIТLЕ>

</HEAD>

<FRAMESET ROWS="50,*">

<FRAME SRC="1.7.header.htm" NAME="frmHeader">

<FRAMESET COLS="100,*">

<FRAME SRC="1.7.contents.htm" NAME="frmContents"> <FRAME SRC="1.7.1.htm" NAME="frmBody">

</FRAMESET> </FRAMESET> </HTML>

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

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

<HTML>

<HEAD>

<ТIТLЕ>Новый сайт с фреймами</ТIТLЕ>

</HEAD>

<FRAMESET COLS="130,*" BORDER="0" FRAMEBORDER="0">

<FRAME SRC="1. 8. contents. htm" NORESIZE>

<FRAMESET ROWS="50,*" BORDER="0" FRAMEBORDER="0">

<FRAME SRC="1.8.header.htm" SCROLLING="no" NORESIZE >

<FRAME SRC="1.7.1.htm" NAME="frmBody" NORESIZE >

</FRAMESET >

</FRAMESET>

</HTML>

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

Ниже приведена новая страница заголовка, в которой были изменены цвета фона страницы и текста, выравнивание, а также убрали заголовок.

<HTML>

<BODY BGCOLOR="beige" TEXT="teal">

<H1><CENTER>Сайт с фреймами</СENTER></Н1>

</BODY>

</HTML>

А это - новая страница оглавления.

<HTML>

<BODY BGCOLOR="beige" TEXT="darkviolet" LINK="darkviolet VLINK="darkviolet">

<CENTER>

<P><A HREF="1.7.1.htm" TARGET="fгmВodу"> Страница1</А> </Р>

<P><A HREF="1.7.2.htm" TARGET="frmBody">Страница2</A> </P>

<P><A HREF="1.7.3.htm" TARGET="frmBody">Страница3</А> </Р>

</CENTER>

</BODY>

</HTML>

Здесь так же были изменены цвета страницы. Цвет для фона такой же, что и в странице заголовка.

Фреймы появились в HTML не сразу. И до сих пор кое-где используют программы Web-обозревателей, не поддерживающие их. Такой Web-обозреватель вместо набора фрейма не покажет ничего или отобразит исходный код HTML, описывающий набор фреймов.

Для таких программ и предусмотрен парный тег <NOFRAMES> и </NOFRAMES>. Внутри него располагается текст, который будет выведен в окно Web-обозревателя, не поддерживающего фреймы. Знакомые с фреймами Web-обозреватели просто проигнорируют этот тег.

<HTML>

<FRAMESET COLS="130,*" BORDER="0" FRAMEBORDER="0">

</FRAMESET>

<NOFRAMES>

Ваш Web-обозреватель не поддерживает фреймы. Поэтому вам будет

доступна урезанная версия сайта

<А HREF="chapter_l>Глава 1</A>

</NOFRAMES> </HTML>