НазадСодержаниеВперед

Фреймы

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

  Простая фреймовая структура

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

Разобьем область экрана на два фрейма. Левый фрейм занимает 25% ширины всего окна и будет содержать оглавление разделов документа, который загрузим в правый фрейм. Пусть имя файла, содержащего оглавление — contents.htm, а имя документа — ch.htm. Фреймовая структура задает способ организации экрана и определяет, какие документы должны быть первоначально загружены во фреймы. Создать описанную фреймовую структуру можно, если использовать документ, содержащий HTML-код, представленный в листинге 7.1, а.

Листинг 7.1, а. Создание простой фреймовой структуры

<HTML> 

<HEAD>

<TITLE>Простая фреймовая структура</TITLE> 

</HEAD> 

<frameset cols="25%,75%">

<frarae src=contents0.htm name=left>

<frame src= ch.htm name=right> 

</frameset> 

</HTML>

Параметр cols тега <frameset> имеет вид соls="слисок_значений". В списке через запятую перечисляются значения, которые определяют размеры фреймов. Список должен содержать не менее двух значений. Значения могут задаваться в процентах, в пикселах, в относительных единицах.

Тег <f rame> определяет один фрейм. Он должен располагаться внутри парного тега <frameset> и </framesetx Число тегов <frame> должно совпадать с количеством тегов, определенных при описании фреймовой структуры. В рассматриваемом примере в теге <frameset cois="25%,75%"> определено два фрейма, поэтому в дальнейшем следует описание каждого из фреймов с помощью тега <frame>.

Значение параметра src тега <frame> определяет адрес документа, который первоначально загружается во фрейм. В рассматриваемом случае в левый фрейм загружается документ с именем contents0.htm, а в правый фрейм — документ с именем ch.htm. В теге параметр name определяет имя фрейма, необходимое для указания, в какой фрейм загрузить документ. Если имя фрейма не задавать, то будет создан фрейм без имени, но сослаться на него из других фреймов будет нельзя.

Связь между фреймами и документами для описанного примера изображена на рис. 7.1.

Рис 7.1. Связь между фреймами и документами

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

Перед заголовком, поясняющим действие параметра при выравнивании по левому краю, написан тег <А name=chapter_ix/A>, помечающий начало раздела. К этому разделу можно осуществить переход, например, по ссылке Возврат, заданной следующим образом:

<А href="#chapter_l">Возврат</A>

Рис 7.2. Содержимое документа ch.htm

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

Листинг 7.1, б. Содержимое документа contents0.htm

<HTML>

<HEAD>

<TITLE>Ссьшки внутри документа</TITLE>

</HEAD>

<BODY background="decor.gif" bgcolor=silver> 

<H4 align=center>Выравнивание</H4>

<A href="ch.htm#chapter_l" target=right>no левому краю</А><br>

<A href="ch.htm#chapter_2" target=right>no правому краю</А><br> 

<A href="ch.htm#chapter_3" target=right>no центру</А><br> 

<A href="ch.htm#chapter_4" target=right>no ширине</А><br>

</BODY> 

</HTML>

Ссылка устанавливается на соответствующий раздел документа заданием параметра href="ch.htm#chapter_1" . К каждой из частей осуществляется переход по ссылке из оглавления, расположенного в левом фрейме.

Параметр target определяет имя фрейма, в который загружается документ, на который установлена ссылка. В рассматриваемом случае это фрейм с именем right. По умолчанию или при отсутствии параметра target документ загружается в текущий фрейм или окно. На рис. 7.3 представлен документ, имеющий описанную фреймовую структуру.

Рис 7.3. Документ, имеющий фреймовую структуру

Для всех ссылок в документе с именем contents.htm указано одинаковое значение параметра target. Если все документы, загружаемые по ссылкам, должны загружаться в один и тот же фрейм, то можно задать параметр target в теге <BASE>. В этом случае HTML-код файла, содержащего оглавление можно описать так, как указано в листинге 7.1, в.

Листинг 7.1, в. Ссылки внутри документа

<HTML> 

<HEAD>

<TITLE>Ссьшки внутри документа</TITLE> 

</HEAD> 

<BODY background="decor.gif" bgcolor=silver>

<base target=right >

<A name=chapter_0> </A>

<h4 align=center>Выравнивание</h4>

<A href="ch.htm#chapter_l">no левому краю</А><br>

<A href="ch.htm#chapter_2">no правому краю</А><br> 

<А href="ch.htm#chapter_3">no центру</А><br> 

<А href="ch.htm#chapter_4">no ширине</А><br> 

</BODY> 

</HTML>

  Фреймовая структура с загружаемыми документами

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

При решении задачи экран по-прежнему разбивается на два фрейма. Левый фрейм занимает 30% ширины всего окна и будет содержать оглавление документов, которые могут быть просмотрены пользователем при выборе соответствующего пункта. Правый фрейм занимает большую часть окна просмотра и предназначен для отображения самих документов. При первоначальной загрузке оба фрейма делят окно просмотра по вертикали в соотношении 30% и 70%. Данное соотношение может меняться при просмотре.. Каждый из фреймов имеет свою полосу прокрутки, обеспечивающую просмотр всего документа. При выборе ссылки в левом фрейме соответствующий документ будет загружен в правый фрейм. Такая структура позволяет одновременно видеть на экране и оглавление документов, и сами документы.

Пусть оглавление документа содержит шесть пунктов и располагается в файле с именем contents.htm. Требуется, чтобы файл, содержащий оглавление, загружался в левый фрейм. Файлы с именами chl.htm, ch2.htm, ..., ch6.htm содержат документы, соответствующие пунктам оглавления. Взаимодействие между фреймами и документами представлено на рис. 7.4.

Рис 7.4. Фреймовая структура с загружаемыми документами

Фреймовая структура мало отличается от той, какая была рассмотрена в предыдущем примере (листинг 7.2, а).

Листинг 7.2, а. Задание фреймовой структуры

<HTML> 

<HEAD>

<TITLE>Простая фреймовая структура</TITLE> 

</HEAD> <frameset cols="30%,70%">

<frame src=contents.htm name=left> 

<frame src=empty.htm name=right> 

</frameset> 

</HTML>

В правый фрейм первоначально загружается файл с именем empty.htm. Если сразу неизвестно, какой файл загружать во фрейм, то можно использовать файл, содержащий HTML-код (листинг 7.2, б).

Листинг 7.2, б. Документ для первоначальной загрузки

<HTML>

<HEAD>

<TITLE>Пустой документ</TITLE>

</HEAD>

<BODY>

</BODY> 

</HTML>

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

Листинг 7.2, в. Оглавление, загружаемое в левый фрейм

<HTML> 

<HEAD>

<TITLE>Оглавление</TITLE> 

</HEAD> 

<BODY background="decor.gif" bgcolor=silver>

<base target=right> 

<h3>Оглавление</h3> 

<OL>

<LI><A href="chl.htm">Ocновы языка HTML </A>

<LI><A href="ch2.htm">Графика </A>

<LI><A href="ch3.htm">Изoбpaжeниe-кapтa </A>

<LI><A href="ch4.htm">Списки </A>

<LI><A href="сh5.htm">Таблицы </А>

<LI><A href="ch6.htm">Фpeймы </A> 

</OL> 

</BODY> 

</HTML>

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

Рис 7.5. Документ со стартовой страницей

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

  Фреймовая структура с раскрывающимся оглавлением одиночного пункта

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

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

Для каждого пункта меню создадим документ, в котором соответствующий пункт меню "раскрыт". Имена документов contl.htm, cont2.htm, ..., cont6.htm. Документ с именем cont5.htm содержит оглавление с подпунктами пятого пункта основного оглавления. При выборе соответствующего подпункта происходит переход к соответствующему разделу документа с именем ch5.htm. HTML-код документа cont5.htm имеет вид, представленный в листинге 7.3.

Листинг 7.3. Оглавление с раскрытым пунктом 5

<HTML> 

<HEAD>

<TITLE>Оглавление с раскрытым пунктом 5</TITLE> 

</HEAD>

<BODY background="decor.gif" bgcolor=silver> 

<base target=right> 

<h3>Оглавление</h3> 

<OL>

<LI><A href="chl.htm">Ocновы языка HTML </A>

<LI><A href="ch2.htm">Графика </A>

<LI><A href="ch3.htm">Карта-изображение </А>

<LI><A href="ch4.htm">Списки </A>

<LIXA href="ch5.htm"

onclick="top.left.location='contentsR.htm'">Габлицы </А> 

<UL>

<LI><A href="ch5.htm#5ch_l">Простые таблицы</А> 

<LI><A href="ch5.htm#5ch_2">Данные внутри таблицы</А> 

<LI><A href="сh5.htm#5сh_3">Вложенные таблицы</А>

</UL>

<LI><A href="ch6.htm">Фреймы </А> 

</OL> 

</BODY> 

</HTML>

В документе ch5.htm расположены теги, отмечающие те разделы, к которым в дальнейшем можно обратиться по соответствующему подпункту:

<А name=5ch_l></A> 

<А name=5ch_2></A> 

<А name=5ch_3></A>

В рассмотренных примерах страница разбивалась на два вертикальных фрейма: левый с именем left и правый с именем right. Фреймы образуют иерархическую модель объектов Frame. На верхнем уровне расположен объект top, являющийся родителем двух описанных фреймов. Для ссылки на фреймы можно использовать имена. Для того чтобы сослаться на левый фрейм, следует указать конструкцию top.left. Аналогично, для ссылки на правый фрейм— top.right. Свойство фрейма location определяет URL-адрес загруженного во фрейм документа. При выполнении присваивания top.left.iocation='contentsR.htm' во фрейм с именем left загружается файл с именем 'contentsR.htm' из текущей папки.

Вид документа с "раскрытым" пунктом меню после перехода по ссылке изображен на рис. 7.6.

Рис 7.6. Пример оглавления с раскрытым пунктом меню

После щелчка мышью по основному пункту меню, подменю "сворачивается". Реакция на событие onciick — загрузка в. левый фрейм файла, содержащего основное меню, т. е. меню с именем contentsR.htm. При щелчке по пункту меню Таблицы в основном меню происходит загрузка в левый фрейм файла contS.chm. Когда пункт меню раскрыт, можно осуществлять переходы по подпунктам к соответствующим разделам документа.

Для ссылки на фреймы страницы можно использовать свойство-массив frames объекта top, в котором содержатся ссылки на все фреймы страницы. В рассмотренных примерах на фреймы можно было сослаться следующим образом:

top.frames[0] top. frames [ 1 ]

  Фреймовая структура с раскрывающимся оглавлением всех пунктов

Создадим документ, разбивающий окно просмотра с помощью фреймов на две прямоугольные области: левую и правую. В левой области поместите оглавление в виде списка, в правом — документ, загруженный в соответствии с выбранным пунктом оглавления. Предусмотрите возможность работы в режиме, когда пользователь может "раскрыть" или "свернуть" одновременно все пункты оглавления.

При решении задачи поступим следующим образом: создадим два оглавления, одно содержит только пункты верхнего уровня, т. е. "свернутое" оглавление, а во втором оглавлении все пункты раскрыты. В обоих документах предусмотрены кнопки, при нажатии которых меню "сворачивается" или "раскрывается". Приведем пример основного оглавления (листинг 7.4).

Листинг 7.4. Основное оглавление

<HTML> 

<HEAD>

<TITLE>Ocновнoe оглавление</TITLE>

<script>

<!—- //

function chcont(n) 

{ if (n==l)

top.left.location="contents.htm" 

else

top.left.location="contall.htm" 

}

//-—>

</script> 

</HEAD>

<BODY background="decor.gif" bgcolor=silver> 

<base target=right > 

<FORM name=form1>

<input type="button" value= раскрыть onclick="chcont(0)"> 

<input type="button" value= свернуть onclick="chcont(1)"> 

</FORM>

<Н3>Оглавление</Н3> 

<OL>

<LI><A href="chl.htm">Ocновы языка HTML </A> 

<LI><A href="сh2.htm">Графика </А> 

<LI><A href="ch3.htm">Kapтa-изoбpaжeниe </A> 

<LI><A html="сh4.htm">Списки </A> 

<LI><A html="сh5.htm">Таблицы </А> 

<LI><A href="ch6.htm">Фреймы </A> 

</OL> 

</BODY> 

</HTML>

Рис 7.7. Оглавление в "раскрытом" виде

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

  Фреймовая структура из трех фреймов

Создадим документ, разбивающий окно просмотра с помощью фреймов на три прямоугольные области. Левая область состоит из двух частей: в верхней части должны быть расположены кнопки, управляющие видом оглавления, в нижней части — само оглавление в свернутом или развернутом виде. Правая часть обязана содержать собственно документ, соответствующий выбранному пункту оглавления.

При решении этой задачи будет сформирована фреймовая структура более сложного вида, чем та, которую рассматривали ранее. Документ делится по вертикали на две области. Левая область, в свою очередь, разбивается с помощью фреймов по горизонтали еще на две части. Параметр rows="список_эначений"  задает количество и размеры фреймов по горизонтали. При решении нашей задачи определим для верхнего фрейма 60% высоты окна просмотра и 40% — для нижнего. Фреймовая структура описана в листинге 7.5.

Листинг 7.5. Задание фреймовой структуры из трех фреймов

<HTML> 

<HEAD>

<TITLE>Три фрейма и раскрывающееся оглавление</TITLE> 

</HEAD>

<frameset cols="32%,*"> 

<frameset rows="60,*">

<frame src=but.htm name=topleft> 

<frame src=contents.htm name=left> 

</frameset>

<frame src=start.htm name=right marginwidth=l> 

</frameset> 

</HTML>

Рис 7.8. Документ с кнопками управления видом оглавления

В левый верхний фрейм загружается документ, содержащий описание кнопок и действий при щелчке по этим кнопкам. HTML- код документа имеет вид:

<HTML> 

<HEAD>

<TITLE>Кнопки раскрывающегося меню</TITLE>

<script>

<!—-//

function chcont(n) 

{ if (n==l)

top.left.location="contents.htm" 

else

top.left.location="contall.htm" 

}

//-—> 

</script> 

</HEAD> 

<BODY> 

<BODY background="decor.gif" bgcolor=silver>

<FORM name=form1>

<input type="button" value= раскрыть onclick="chcont(0)"> 

<input type="button" value= свернуть onclick="chcont(1)"> 

</FORM> 

</BODY> 

</HTML>

В левый нижний фрейм загружается оглавление. Первоначально это файл, содержащий нераскрытое оглавление. В правый фрейм загружается файл, содержащий титульный лист. На рис. 7.8 представлен документ, соответствующий описанной структуре.

  Обмен содержимым фреймов

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

Область окна просмотра сначала разбивается на два фрейма по горизонтали. При описании тега <frameset rows="*,50"> определяется, что размер нижнего фрейма 50 пикселов, остальное пространство отводится под верхний фрейм. Верхний фрейм в свою очередь делится по вертикали на два фрейма, размеры которых заданы в процентах к области просмотра. HTML-код документа, создающий описанную фреймовую структуру, выглядит так, как указано в листинге 7.6, а.

Листинг 7.6, а. Три фрейма с кнопкой для обмена содержимого фреймов

<HTML> 

<HEAD>

<TITLE>Три фрейма с кнопкой для обмена</TITLE> 

</HEAD> 

<frameset rows="*,50">

<frameset cols="55%,45%">

<frame src=lpict.htm name=left>

<frame src=rtext.htm name=right> 

</frameset>

<frame src=but1.htm name=butt> 

</frameset> 

</HTML>

Для ссылки на фреймы будем, как и ранее, использовать имена. Сначала следует запомнить имя файла, загруженного в левый фрейм. Для этого используется переменная 1. Затем в левый фрейм загружается документ, расположенный в правом фрейме. Это достигается выполнением оператора присваивания

top.left.location=top.right.location

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

HTML-код для нижнего фрейма представлен в листинге 7.6, б.

Листинг 7.6, б. Сценарий для нижнего фрейма

<HTML> 

<HEAD>

<TITLE>Кнопка для смены содержимого фреймов</TITLE>

<script>

<!—-//

function chframe() 

{ var l=top.left.location

top.left.location=top.right.location 

top.right.location=l 

}

//-—> 

</script> 

</HEAD>

<BODY background="decor.gif" bgcolor=silver> 

<CENTER> 

<FORM name=form1>

<input type="button" value=Обмен onclick="chframe()"> 

</FORM> 

</CENTER> 

</BODY> 

</HTML>

 

На рис. 7.9. приведен документ с описанной фреймовой структурой.

При щелчке по кнопке Обмен содержимое верхних фреймов поменяется местами.

Рис. 7.9. Обмен содержимых двух фреймов

Функция, осуществляющая обмен содержимым фреймов, может быть описана следующим образом:

function chframe() 

{ var l=top.frames[0].location

top.frames[0].location=top.frames[1].location

top.frames [1].location=l 

}

  Простой пример использования плавающих фреймов

Браузер Microsoft Internet Explorer разрешает использование так называемых плавающих фреймов, описание которых может быть расположено в тексте обычного HTML-документа. Для определения плавающего фрейма используется тег <iframe>. В указанном теге могут встречаться те же параметры, что и в теге описания обычных фреймов, кроме параметра noresize, т. к. размер плавающего фрейма не может быть изменен пользователем. Браузеры, не поддерживающие тег <iframe>, отображают записанную между тега-ми <iframe> и </iframe> информацию. В следующем примере HTML-документа используется описание плавающего фрейма, которое напоминает синтаксис тега встраиваемого в документ изображения. Параметр src определяет адрес загружаемого во фрейм изображения. Параметр name задает имя фрейма для того, чтобы можно было получить доступ к фрейму, например, из сценария.

Сценарий представлен в листинге 7.7, а.

Листинг 7.7, а. Использование плавающих фреймов

<HTML> 

<HEAD>

<TITLE> Использование плавающих фреймов</TITLE> 

</HEAD> 

<BODY bgcolor="FFFFCC">

<Н4 align=center>Шишкин Иван Иванович</Н4> 

<iframe src=textsh.htm name="flframe">

Отображение плавающих фреймов в Вашем браузере не предусмотрено 

</iframe> 

<OL>

<LI><A href=pictsh.htm target="flframe">Kapтина</A></LI> 

<LI><A href=textsh.htm target="flfrаmе">Описание</А></LI> 

</OL> 

</BODY> 

</HTML>

В плавающий фрейм можно загрузить другие документы, используя определенные на странице гиперссылки. Результат отображения примера приведен на рис. 7.10.

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

Рис. 7.10.   Плавающие фреймы

Сценарий представлен в листинге 7.7, б 

Листинг 7.7, 6. Плавающие фреймы и их параметры

<HTML> 

<HEAD>

<TITLE> Плавающие фреймы и их параметры</TITLE> 

</HEAD> <BODY bgcolor="FFFFCC">

<h4 align=center>Творчество русских художников</h4>

<iframe src=pictsh.htm name="flframe" height=320 width=60% hspace=50

vspace=10 scrolling=auto align=right> 

Ваш браузер не позволяет отображать плавающие фреймы 

</iframe> <OL>

<LI><A href=pictsh.htm target="flframe">Kapтина</A></LI> 

<LI><A href=textsh.htm target="flframe">Описание</A></LI> 

</OL> 

</BODY> 

</HTML>

Приведенный пример броузер Microsoft Internet Explorer отобразит так, как на рис. 7.11.

Рис. 7.11.    Изменение содержимого плавающего фрейма

  Плавающие фреймы и организация гиперссылок

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

В документе с условиями задач перед условием первой задачи расположим два тега <a name="1"></A> , а далее перед условием задачи с номером i расположим тег <А> , параметр name которого равен i . Таким образом, мы подготовим текст условий задач для ссылок на задачи с соответствующим номером. Пусть имя файла с условиями задач indiv.htm. HTML-код документа, содержащего список задач, и плавающий фрейм, представлен в листинге 7.8.

Листинг 7.8, Использование плавающих фреймов

<HTML> 

<HEAD>

<TITLE> Использование плавающих фрейм6в</TITLE> 

</HEAD>

<BODY background="decor.gif"> 

<base target="flframe">

<H4 align=center>Для вьшолнения задания выберите задачу </Н4> 

<iframe src=indiv.htm name="flframe" height=350 width=70% hspace=10

scrolling=auto align=right>

Ваш браузер не позволяет отображать плавающие термы 

</iframe>

<Н4>Темы заданий </Н4> 

<OL>

<LI><A href="indiv.htm#l">экспорт товаров</А></LI> 

<LI><A href="indiv.htm#2">кypcoвые работы</А></LI> 

<LI><A href="indiv.htmf3">график обследования</А></LI> 

<LI><A href="indiv.htm#4">отгрузка со склада</А></LI> 

<LI><А href="indiv.htm#5">тexничecкий осмотр</А></LI> 

<LI><A href="indiv.htm#6">пансионат</A></LI> 

<LI><A href='4ndiv.htm#7">регистрация переговоров</А></LI> 

<LI><A href="indiv.htm#8">расписание экзаменов</А></LI> 

<LI><A href="indiv.htm#9">учет товаров</А></LI> 

<LI><A href="indiv.htm#10">выдача ключей</А></LI> 

<LI><A href="indiv.htm#ll">абонементы</A></LI> 

<LI><A href="indiv.htm#12">тестирование</A></LI> 

<LI><A href="indiv.htm#13">соревнование</A></LI> 

<LI><A href="indiv.htm#14">ceмeйный бюджет</А></LI>

<LI><A href="indiv.htm#15">экзамены</A></LI> 

</OL> 

</BODY> 

</HTML>

 Результат отображения описанной страницы приведен на рисю 7.12.

Рис. 7.12.   Оглавление плавающего фрейма

 

  Упражнения

1. Создайте документ, разбивающий окно просмотра с помощью фреймов на две прямоугольные области: верхнюю и нижнюю. В верхней области поместите оглавление в виде списка, при выборе пунктов которого соответствующий раздел должен появляться в нижней части окна.

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

3. Создайте документ, разбивающий окно просмотра с помощью фреймов на две прямоугольные области: верхнюю и нижнюю. В верхней области поместите оглавление. Оглавление представьте с помощью изображения-карты. При выборе активной области в нижнюю область окна должен быть загружен соответствующий пункту раздел.

4. Выполните предыдущие три задания при условии, что пункты меню соответствуют разделам одного документа.

5. Выполните первые три задания при условии, что пункты меню соответствуют разделам, хранящимся в разных документах.

6. Создайте документ, разбивающий окно просмотра с помощью фреймов на две прямоугольные области: левую и правую. В левой области поместите оглавление, при выборе пунктов которого соответствующий пункту раздел должен появляться в правой части окна. Оглавление представьте с помощью графического вертикального меню.

7. Создайте документ, разбивающий окно просмотра с помощью фреймов на две прямоугольные области: левую и правую. В левой области поместите оглавление, при выборе пунктов которого соответствующий пункту раздел должен появляться в правой части окна. Оглавление представьте с помощью изображения-карты.

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

• списком;

• графическим меню;

• изображением-картой.

Пунктам меню могут соответствовать разделы:

• одного документа;

• разных документов.

Представьте материалы в виде HTML-документов с описанной структурой.

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

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

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

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

13. Создайте документ, разбивающий окно просмотра с помощью фреймов на четыре прямоугольные области, как показано на рис. 7.13. В области А поместите оглавление. При выборе пункта оглавления в область В должен помещаться теоретический материал, соответствующий пункту меню, в область С — список контрольных вопросов по рассматриваемой теме, в область D — практическая работа. Представьте материалы в виде HTML-документов описанной структуры.

Рис 7.13. Фреймовая структура к упражнению 13

14. Создайте документ, разбивающий окно просмотра с помощью фреймов на четыре прямоугольные области. Первая область (А) занимает по ширине все окно и 10% высоты окна. В эту область следует помещать графические изображения, которые чередуются через каждые десять секунд. Две области — В и С — занимают по высоте 70% окна и по ширине 20% и 80% соответственно. В область В поместите оглавление в виде списка, в области С должны появляться разделы, соответствующие пунктам оглавления. Четвертая часть D занимает по ширине всю область окна и 20% высоты окна. В области D разместите четыре кнопки, обеспечивающие навигацию по пунктам оглавления. Одна кнопка позволяет осуществить переход к началу документа (первый пункт оглавления), вторая — к концу (последний пункт оглавления), две другие — к следующему и предыдущему разделу по отношению к текущему. Текущий раздел содержится в области С:

• разделы, соответствующие пунктам меню, расположены в одном документе;

• разделы, соответствующие пунктам меню, расположены в разных документах.

15. Создайте документ, разбивающий окно просмотра с помощью фреймов на четыре прямоугольные области, как показано на рис. 7.14. В область А помещается список тем. При выборе темы в области С отображаются разделы соответствующей темы. Выбор раздела области С приводит к отображению области В связанного документа. При этом в области D появляется соответствующее теме изображение. Оформите материал в виде HTML-документов так, чтобы он удовлетворял описанной схеме.

Рис 7.14. Фреймовая структура к упражнению 15

НазадСодержаниеВперед
Сайт создан в системе uCoz