Примечание 5 страница

Чтобы продемонстрировать использование группировки строк таблицы на практике, можно модифицировать таблицу из примера 7. 4 (пример 7. 7).

Пример 7. 7. Группировка строк таблицы

< TITLE> Группировка строк таблицы< /TITLE>

< TABLE align = center border = 3 bordercolor = black rules = groups>

< CAPTION align = top> < B> Доходы от продаж за второе полугодие XXXX

года< /B> < /CAPTION>

< THEAD>

<! –формирование первой строки шапки таблицы–>

< TR>

< TH rowspan = 2> Филиал\Период

< TH colspan = 3> 3 квартал

< TH colspan = 3> 4 квартал

<! –формирование второй строки шапки (названия месяцев)–>

< TR>

< TH> Июль< TH> Август< TH> Сентябрь

< TH> Октябрь< TH> Ноябрь< TH> Декабрь

< TBODY align = right>

<! –далее следуют строки с данными (первая ячейка каждой строки – название филиала–>

< TR> < TD align = left> Филиал 1< TD> 123123< TD> 323233

< TD> 323453< TD> 231423< TD> 323212< TD> 243673

< TR> < TD align = left> Филиал 2< TD> 223523< TD> 225243

< TD> 314423< TD> 212445< TD> 373812< TD> 274673

< TR> < TD align = left> Филиал 3< TD> 183123< TD> 186834

< TD> 323453< TD> 231423< TD> 323212< TD> 243673

< TR> < TD align = left> Филиал 4< TD> 125163< TD> 334343

< TD> 123553< TD> 167423< TD> 254412< TD> 132367

< TBODY align = right>

<! –Строка с итоговыми данными–>

< TR> < TD align = left> Всего: < TD> 654932< TD> 1069653

< TD> 1084882< TD> 842714< TD> 1274648< TD> 894386

< /TABLE>

Таблица, задаваемая в примере 7. 7, выглядит так, как показано на рис. 7. 6.

Рис. 7. 6. Таблица со сгруппированными строками

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

Описание и группировка столбцов

Помимо группировки строк таблицы, в HTML присутствуют элементы, позволяющие определять столбцы и формировать группы столбцов: HTML‑ элементы COL и COLGROUP. Если элементы COL или COLGROUP используются, то они должны следовать до элементов, группирующих строки таблицы (или до первой строки данных при отсутствии явной группировки строк). Сначала будет рассмотрено использование элемента COL.

Итак, HTML‑ элемент COL задается одиночным тегом < COL>. Этот элемент позволяет установить общие параметры отображения всех ячеек, входящих в столбец или столбцы, заданием следующих атрибутов:

• align – задает горизонтальное выравнивание текста ячеек столбца (столбцов), может принимать значения left, right, center или justify;

• valign – задает вертикальное выравнивание текста ячеек столбца (столбцов), может принимать значения top, bottom, middle или baseline;

• bgcolor – задает цвет фона ячеек столбца (столбцов);

• width – позволяет указать ширину столбца (столбцов);

• span – задает количество столбцов, к которым применяются параметры, заданные в описанных выше атрибутах (по умолчанию имеет значение 1).

Использование элемента COL не позволяет создавать группы столбцов – для этого используется HTML‑ элемент COLGROUP. Однако использование элемента COL значительно облегчает настройку внешнего вида таблицы, позволяя задавать одинаковые настройки для нескольких столбцов одновременно. Например, чтобы создать таблицу, показанную на рис. 7. 7, пришлось бы задавать значения атрибутов bgcolor почти для всех ячеек таблицы.

Рис. 7. 7. Раскрашенная таблица

При использовании элемента COL все гораздо проще (пример 7. 8).

Пример 7. 8. Задание параметров отображения столбцов

< TITLE> Использование элемента COL< /TITLE>

< TABLE align = center border = 3 bordercolor = black rules = groups>

< CAPTION align = top> < B> Доходы от продаж за второе полугодие XXXX

года< /B> < /CAPTION>

<! –Определение столбцов таблицы–>

< COL align = left bgcolor = green>

< COL span = 3 bgcolor = blue>

< COL span = 3 bgcolor = yellow>

< THEAD>

<! –формирование первой строки шапки таблицы–>

< TR bgcolor = magenta>

< TH rowspan = 2> Филиал\Период

< TH colspan = 3> 3 квартал

< TH colspan = 3> 4 квартал

<! –формирование второй строки шапки (названия месяцев)–>

< TR bgcolor = magenta>

< TH> Июль< TH> Август< TH> Сентябрь

< TH> Октябрь< TH> Ноябрь< TH> Декабрь

< TBODY align = right>

<! –далее следуют строки с данными (первая ячейка каждой строки – название филиала–>

< TR> < TD> Филиал 1< TD> 123123< TD> 323233< TD> 323453

< TD> 231423< TD> 323212< TD> 243673

< TR> < TD> Филиал 2< TD> 223523< TD> 225243< TD> 314423

< TD> 212445< TD> 373812< TD> 274673

< TR> < TD> Филиал 3< TD> 183123< TD> 186834< TD> 323453

< TD> 231423< TD> 323212< TD> 243673

< TR> < TD> Филиал 4< TD> 125163< TD> 334343< TD> 123553

< TD> 167423< TD> 254412< TD> 132367

< TBODY align = right>

<! –Строка с итоговыми данными–>

< TR bgcolor = red> < TD> Всего: < TD> 654932< TD> 1069653

< TD> 1084882< TD> 842714< TD> 1274648< TD> 894386

< /TABLE>

В приведенном примере, кроме задания цвета столбцов, указание значения left атрибута align для первого столбца избавило от необходимости задавать для первой ячейки каждой строки выравнивание текста по левому краю, как это было в предыдущих примерах.

Обратите внимание, что в примере 7. 8 также использовалось задание цвета двух первых и последней строки при помощи атрибута bgcolor элемента TR. В этом и подобных случаях при отображении каждой ячейки браузеры выбирают параметры в следующем порядке.

1. Атрибуты элементов TD и TH.

2. Атрибуты элемента TR.

3. Атрибуты элемента COL.

4. Атрибуты элемента COLGROUP.

5. Атрибуты элементов THEAD, TFOOT, TBODY.

6. Атрибуты элемента TABLE.

Приведенный список отражает приоритет, с которым используются значения каждого атрибута HTML‑ элементов, описывающих данные таблицы. Проще всего это пояснить на примере 7. 9.

Пример 7. 9. Приоритеты элементов при отображении ячеек

< TABLE width = 300>

< THEAD align = center bgcolor = yellow>

< TR align = right>

< TD> Ячейка 1

< TD bgcolor = green> Ячейка 2

< /THEAD>

< /TABLE>

В данном случае ячейка с текстом Ячейка 1 будет иметь желтый фон, выравнивание по правому краю, ширину 300 пикселов. Ячейка с текстом Ячейка 2 будет отображаться аналогично первой, но с зеленым фоном.

Следует сказать несколько слов о возможностях задания значения атрибута width. Итак, значением атрибута может быть либо абсолютная ширина ячеек в пикселах, либо доля от ширины таблицы (в процентах), либо относительный или пропорциональный размер ячеек. Для задания пропорционального размера используется запись вида width = " i*", где i является целым положительным числом (" *" интерпретируется как " 1*" ). Рассмотрим, каким образом по пропорциональному размеру определяется абсолютный размер. Пусть есть столбцы, заданные в следующем виде:

...

< COL width = " 2*" >

< COL width = " 3*" >

< COL width = " 30%" >

...

Кроме того, пусть таблица имеет ширину 100 пикселов. Сначала вычисляются процентные размеры, а потом пропорциональные, поэтому третий столбец таблицы будет иметь ширину 30. Оставшиеся 70 пикселов распределяются между первым и вторым столбцами в соотношении 2: 3, то есть ширина этих столбцов получится равной 70: 5 × 2 = 28 и 70: 5 × 3 = 42 соответственно.

Теперь, после достаточно долгого изучения HTML‑ элемента COL, рассмотрим, как можно создавать группы столбцов таблицы с использованием элемента COLGROUP. Элемент COLGROUP задается парными тегами < COLGROUP> и < /COLGROUP> (закрывающий тег необязателен). Он поддерживает тот же набор атрибутов, что и элемент COL.

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

Например, если нужно создать группу из десяти столбцов, имеющих одинаковую ширину 30, а также одинаковые остальные параметры, то это можно сделать так:

< COLGROUP span = 10 width = 30>

или

< COLGROUP>

< COL span = 10 width = 30>

< /COLGROUP>

или

< COLGROUP>

< COL width = 30>

...

< /COLGROUP>

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

Без явного определения столбцов не обойтись в том случае, если нужно включить в группу столбцы с различными параметрами отображения (например, с различным выравниванием). Допустим, нужно создать группу из десяти столбцов: выравнивание первого столбца левое, со второго по восьмой – правое, девятого и десятого – по центру. Группу столбцов наиболее кратко можно задать следующим образом:

< COLGOUP>

< COL align = left>

< COL span = 7 align = right>

< COL span = 2 align = center>

< /COLGROUP>

Напоследок рассмотрим, как отразится наличие групп столбцов на отображении таблицы браузером. Можно дополнить таблицу из примера 7. 7 группировкой столбцов следующим образом (оставлены только части текста HTML‑ документа, отличные от приведенного в примере 7. 7) (пример 7. 10).

Пример 7. 10. Группировка столбцов

< TITLE> Группировка строк и столбцов таблицы< /TITLE>

< TABLE align = center border = 3 bordercolor = black rules = groups>

< CAPTION align = top> < B> Доходы от продаж за второе полугодие XXXX

года< /B> < /CAPTION>

< COLGROUP align = left>

< COLGROUP span = 3>

< THEAD>

...

< TBODY align = right>

...

< TR> < TD> Филиал 1...

< TR> < TD> Филиал 2...

< TR> < TD> Филиал 3...

< TR> < TD> Филиал 4...

< TBODY align = right>

< TR> < TD> Всего:...

< /TABLE>

Теперь таблица примет окончательный вид, показанный на рис. 7. 8.

Рис. 7. 8. Таблица со сгруппированными столбцами и строками

Особенности задания ширины столбцов

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

Дело в том, что самой трудной задачей при отображении таблицы является определение ширины как таблицы в целом, так и каждого столбца таблицы, а также определение количества столбцов в ней. Если ширина и количество столбцов не указаны явно, то браузер вынужден дожидаться загрузки всей таблицы, после чего определяется количество ячеек в самой длинной строке – количество столбцов. Ширина каждого столбца выбирается такой, чтобы поместить содержимое самой широкой ячейки этого столбца.

Чтобы браузер мог начать отображение таблицы по частям, он должен до получения первой строки с данными ячеек обладать сведениями о количестве и абсолютной (в пикселах) ширине каждого столбца, о созданных группах столбцов. Для этого нужно определить все столбцы с использованием COL или COLGROUP, а также указать ширину таблицы и ее столбцов так, чтобы абсолютные значения могли быть однозначно определены, например:

< TABLE width = 300>

< COLGROUP>

< COL width = 30>

< COL width = " *" >

< /COLGROUP>

< COLGROUP width = 50 span = 4>

...

< /TABLE>

В этом случае точно известно, что таблица, содержащая два столбца, будет шириной 300 пикселов. На первый столбец приходится 30 пикселов и, соответственно, на второй – оставшиеся 270.

Можно также задавать для таблицы и ее столбцов процентную ширину, но это нужно делать внимательно, чтобы, зная размер окна браузера, можно было всегда однозначно определить точную ширину каждого столбца.

7. 4. Использование таблиц для формирования дизайна HTML-документа

Ранее были рассмотрены возможности использования таблиц только по своему прямому назначению – для группировки данных. Теперь пришло самое время рассказать о применении таблиц для формирования дизайна HTML‑ документов. Здесь перед автором документа открываются поистине огромные возможности: точное позиционирование и упорядочивание элементов страницы, создание областей переменной или постоянной ширины и многие другие возможности, позволяющие сделать документ не только информативным, но и приятным глазу пользователя, удобным в использовании.

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

Рис. 7. 9. Расположение элементов страницы

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

С учетом всего вышеизложенного можно написать следующий HTML‑ документ (пример 7. 11).

Пример 7. 11. Страница на таблицах

< HTML>

< HEAD>

< TITLE> Страница, построенная на таблицах< /TITLE>

< /HEAD>

< BODY>

< TABLE width = " 100%" >

< COL width = 100 align = left valign = top bgcolor = yellow>

< COL width = " *" align = justify valign = top>

< TR>

< TD bgcolor = white>

< TD>

< TABLE width = " 100%" >

< COL width = " *" align = center>

< COL width = 57> <! –Столбец растягивается по ширине изображения–>

< TR>

< TD bgcolor = yellow> < H1> 7. Таблицы< /H1>

< TD> < IMG src = " 7. 11. html.files/logo.jpg" >

< /TABLE>

< TR>

< TD> <! –В первом столбце помещаются гиперссылки на примеры–>

< P> < A href = " 7. 1. html" > Пример 7. 1< /A>

< P> < A href = " 7. 2. html" > Пример 7. 2< /A>

< P> < A href = " 7. 3. html" > Пример 7. 3< /A>

< P> < A href = " 7. 4. html" > Пример 7. 4< /A>

< P> < A href = " 7. 5. html" > Пример 7. 5< /A>

< P> < A href = " 7. 6. html" > Пример 7. 6< /A>

< P> < A href = " 7. 7. html" > Пример 7. 7< /A>

< P> < A href = " 7. 8. html" > Пример 7. 8< /A>

< P> < A href = " 7. 9. html" > Пример 7. 9< /A>

< P> < A href = " 7. 10. html" > Пример 7. 10< /A>

< TD> <! –Весь текст помещается в одной ячейке таблицы–>

< P> Таблицы в том виде, в котором они реализованы в HTML,

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

Кроме группировки информации, таблицы являются чрезвычайно полезными при разработке дизайна HTML-документа.

В данном разделе рассмотрены оба способа использования таблиц.

Но для начала разберемся с тем, как добавлять таблицы в HTML-документ, а также рассмотрим возможности,

предоставляемые HTML для работы с таблицами.

< H2> Структура простейшей таблицы< /H2>

< P> Таблица в HTML представляется множеством ячеек, которые заключены в строки. Совокупность же всех строк и образует целую таблицу. Для обозначения таблицы используется HTML-

элемент TABLE, который задается парными обязательными тегами < TABLE> и < /TABLE>.

< P> Строки таблицы задаются HTML-элементом TR (парные теги

< TR> и < /TR>, закрывающий тег необязателен).

Ячейки в простейшем случае задаются HTML-элементом TD (парные теги < TD> и < /TD>, закрывающий тег необязателен).

< /TABLE>

< /BODY>

< /HTML>

Страница из приведенного примера выглядит так, как показано на рис. 7. 10.

Рис. 7. 10. Страница, построенная на таблицах

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

Попробуйте открыть любую прилично выглядящую страницу при помощи того же редактора Блокнот, и почти наверняка вы увидите, что для ее создания использовались всего лишь таблицы в сочетании со списками и изображениями. Все, с чем «поиграли» авторы, – это умело сгруппировали ячейки таблиц, раскрасили их и добавили в нужные ячейки списки, текст и рисунки. Вот она – настоящая мощь такого, казалось бы, простого средства, как таблицы.

Глава 8 Фреймы

Эта глава посвящена одному из самых интересных и удобных способов организации информации на веб‑ страницах: использованию фреймов. Если раньше в этой книге в основном рассматривалось создание отдельных HTML‑ документов (страниц сайта), то в примерах данной главы упор делается на создании сайтов, состоящих из нескольких страниц. Это обусловлено тем, что само по себе использование фреймов предполагает наличие нескольких страниц, одновременно показываемых пользователю.

8. 1. Понятие фрейма

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

Во всех примерах ранее в книге рассматривалось выравнивание текста, графики, таблицы и прочего наполнения HTML‑ документов в окне браузера. При этом в нем могло отображаться содержимое только одного документа. Использование фреймов позволяет разбить окно браузера на несколько частей, в которых могут отображаться разные HTML‑ документы. Например, так, как показано на рис. 8. 1.

Рис. 8. 1. Три документа в одном окне

При этом содержимое каждого документа выравнивается относительно своего собственного окна – фрейма. Теперь представьте себе, что в левом верхнем фрейме находятся ссылки на ресурсы сайта, в левом нижнем – какая‑ то рекламная или другая информация, в правом большом фрейме помещается текст. Допустим, при навигации по сайту изменяется только текст, отображаемый в правом фрейме. В этом случае использование фреймов позволяет следующее.

• Прокручивать содержимое одних фреймов независимо от содержимого других.

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

Теперь, после знакомства с фреймами, можно рассмотреть, как выполняются создание и настройка сайтов с использованием фреймов.

8. 2. Создание набора фреймов

Даже самый простой сайт, показанный на рис. 8. 1, состоит из четырех HTML‑ документов. Содержимое трех из них показывается в окне браузера. Четвертый документ, который и нужно открывать браузером, содержит описания фреймов, на которые разбивается окно, а также включает в себя указания браузеру, откуда загружать страницы в созданные фреймы. Содержимое HTML‑ документа приведено в примере 8. 1.

Пример 8. 1. Файл с описанием фреймов

< HTML>

< HEAD>

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

< /HEAD>

< FRAMESET cols = " 200, *" >

< FRAMESET rows = " 70%, *" >

< FRAME src = " page1. html" >

< FRAME src = " page2. html" >

< /FRAMESET>

< FRAME src = " page3. html" >

< /FRAMESET>

< /HTML>

Здесь можно увидеть два новых HTML‑ элемента: FRAMESET и FRAME. Первый из них используется для разбиения окна браузера или окна родительского фрейма на отдельные фреймы. Элемент FRAMESET задается парными тегами < FRAMESET> и < /FRAMESET>. При разбиении окна на фреймы используются следующие атрибуты элемента FRAMESET:

• cols – список значений ширины создаваемых фреймов (могут использоваться как абсолютные значения в пикселах, так и процентные, а также пропорциональные, см. пример 8. 1);

• rows – список значений высоты создаваемых фреймов (значения аналогичны значениям атрибута cols).

Можно задавать значения только одного из атрибутов. При этом если задано значение только атрибута col, то созданные фреймы будут занимать всю высоту окна браузера. Если задано значение только атрибута rows, то созданные фреймы будут занимать всю ширину окна браузера. Если заданы значения обоих атрибутов, то фреймы создаются слева направо и сверху вниз.

Между тегами < FRAMESET> и < /FRAMESET> должны содержаться либо описания каждого фрейма с использованием HTML‑ элемента FRAME, либо определения вложенных фреймов. Рассмотрим сначала описание фреймов при помощи элемента FRAME. Этот HTML‑ элемент задается при помощи одиночного тега < FRAME>. Ниже приведены его атрибуты, используемые чаще всего:

• name – задает имя фрейма, позволяя использовать его в качестве целевого фрейма в гиперссылках;

• src – URI документа, содержимое которого отображается в окне фрейма;

• noresize – булев атрибут, блокирует возможность изменения размера окна фрейма;

• scrolling – позволяет показать или убрать полосы прокрутки в окне фрейма, может принимать значения yes (показать полосы прокрутки), no (не отображать полосы прокрутки) или auto (используется по умолчанию: показать полосы прокрутки только в том случае, если содержимое не умещается в окне фрейма);

• frameborder – указывает, должен ли браузер показывать рамку окна фрейма, может принимать значения 1 (рамка показывается, как на рис. 8. 1, используется по умолчанию) или 0 (рамка не показывается);

• marginwidth – задает расстояние между границами фрейма и его содержимым по горизонтали (в пикселах);

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

Ранее было затронуто понятие вложенных фреймов. Теперь пришло время рассмотреть вложение фреймов подробно. В HTML фреймы могут вкладываться друг в друга любое количество раз. Это находит применение тогда, когда нужно разбить окно браузера, например так, как сделано на рис. 8. 1. Изучите внимательно следующий фрагмент.

< FRAMESET cols = «200, *»>

< FRAMESET rows = " 70%, *" >

< FRAME src = " page1. html" >

< FRAME src = " page2. html" >

< /FRAMESET>

< FRAME src = " page3. html" >

< /FRAMESET>

Здесь создается внешний набор из двух фреймов, занимающих всю высоту окна браузера. При этом в левом фрейме внешнего набора создается еще один набор фреймов. Нужно заметить, что блок < FRAMESET> …< /FRAMESET> аналогичен одному элементу FRAME (описывает содержимое одного фрейма из внешнего набора). Анализируя приведенный выше фрагмент, можно однозначно сказать, что левый фрейм внешнего набора разбивается, а в правый фрейм загружается содержимое документа page3. html.

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

8. 3. Новые возможности гиперссылок

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

Целевой фрейм отдельных гиперссылок

Для указания целевого фрейма каждой гиперссылки, то есть фрейма, в котором будет показано содержимое открываемого по ссылке HTML‑ документа, используется атрибут target. Значением этого атрибута может быть либо имя нужного фрейма (значений атрибута name этого фрейма), либо одно из следующих предопределенных строковых значений:

• _blank – открыть документ в новом окне;

• _self – открыть документ в том же окне, где находится гиперссылка;

• _parent – открыть документ в окне родительского фрейма (аналогично _self, если фрейм, в котором находится гиперссылка, не имеет родителя);

• _top – заменить содержимое окна браузера содержимым открываемого документа, отменяя все созданные ранее фреймы.

Атрибут target поддерживается для всех HTML‑ элементов, позволяющих создавать гиперссылки: A, LINK, AREA.

Теперь для закрепления полученных знаний переделаем документ из примера 7. 11 предыдущей главы, поместив ссылки, название и текст сайта в отдельные фреймы.

Документ с описанием набора фреймов будет иметь имя index. html. Его содержимое приведено в примере 8. 2.

Пример 8. 2. Файл с описанием набора фреймов

< HTML>

< HEAD>

< TITLE> Новый сайт с фреймами< /TITLE>

< /HEAD>

< FRAMESET cols = " 130, *" >

< FRAME src = " links. html" frameborder = 0>

< FRAMESET rows = " 65, *" >

< FRAME src = " title. html" scrolling = no marginwidth = 0

marginheight = 0 frameborder = 0>

< FRAME src = " start. html" name = textframe frameborder = 0>

< /FRAMESET>

< /HTML>

В приведенном выше примере имя назначено только одному фрейму (правому нижнему). Именно в этом фрейме и будет отображаться содержимое документов.

В файле links. html находится документ с гиперссылками на файлы примеров (в него также добавлена ссылка на стартовую страницу). Предполагается, что файлы примеров расположены в папке Examples. Ниже приводится содержимое файла links. html (обратите внимание на задание значения атрибута target гиперссылок) (пример 8. 3).

Пример 8. 3. Файл с гиперссылками

< HTML>

< TITLE> Ссылки на примеры< /TITLE>

< BODY bgcolor = yellow>

< P> < A href = " start. html" target = textframe> Текст главы< /A>

< HR>

< P> < A href = " examples/7. 1. html" target = textframe> Пример 7. 1< /A>

< P> < A href = " examples/7. 2. html" target = textframe> Пример 7. 2< /A>

< P> < A href = " examples/7. 3. html" target = textframe> Пример 7. 3< /A>

< P> < A href = " examples/7. 4. html" target = textframe> Пример 7. 4< /A>

< P> < A href = " examples/7. 5. html" target = textframe> Пример 7. 5< /A>

< P> < A href = " examples/7. 6. html" target = textframe> Пример 7. 6< /A>

< P> < A href = " examples/7. 7. html" target = textframe> Пример 7. 7< /A>

⇐ Предыдущая 2 3 4 5 678 9 10 11 Следующая ⇒