42566

Организация HTML-документов с помощью фреймов

Лабораторная работа

Информатика, кибернетика и программирование

Организация HTMLдокументов с помощью фреймов Фреймы это области которые создаются в окне браузера для одновременного просмотра нескольких документов. При создании страницы с фреймами разрабатывается несколько HTMLфайлов которые отличаются по своему назначению. Шаблон элемента FRMESET Для создания WEBстраницы с фреймами в языке HTML существует элемент FRMESET. Второй этап создания страницы с фреймами: подготовка HTMLфайлов для каждой области деления экрана с помощью элемента FRME В документе раскладки элемент FRMESET используется...

Русский

2013-10-30

48 KB

14 чел.

Лабораторная работа №8. Организация HTML-документов с помощью фреймов

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

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

Элемент FRAMESET для создания WEB-страницы с фреймами. Шаблон элемента FRAMESET

Для создания WEB-страницы с фреймами в языке HTML существует элемент FRAMESET. Состоит из одноименных парных тегов <FRAMESET> </FRAMESET>. Внутри открывающего тега с помощью атрибута rows задается горизонтальное деление экрана, с помощью атрибута cols задается вертикальное деление экрана. Документы содержания включаются в структуру фрейма с помощью элементов FRAME, которые находятся между открывающим и закрывающим тегами элемента FRAMESET и состоят из одного тега. Для каждой области экрана должен быть создан свой элемент <FRAME>. Таким образом, элемент FRAMESET имеет шаблон:

<FRAMESET> <FRAME> </FRAMESET>.

Создание горизонтальных областей с помощью атрибута rows в открывающем теге элемента FRAMESET 

Горизонтальное деление экрана задается при помощи атрибута rows. Значение атрибута может быть выражено в пикселах или в процентах. Также используется символ * для обозначения оставшейся части экрана. Примеры.

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


Для верхней горизонтальной области отводится 20 процентов, для нижней - 80 процентов.

<FRAMESET rows="100, 40%, *">


Для верхней горизонтальной области отводится 100 пикселов , для средней 40 процентов, для нижней - что останется.

Создание вертикальных областей с помощью атрибута cols в открывающем теге элемента FRAMESET 

Вертикальное деление экрана задается при помощи атрибута cols. Значение атрибута может быть выражено в пикселах или в процентах. Также используется символ * для обозначения оставшейся части экрана. Примеры.

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


Левая вертикальная область в три раза уже правой.

<FRAMESET cols="50%, *">


Левая вертикальная область занимает 50 процентов, правая вертикальная область - также 50 процентов.

Атрибуты элемента FRAMESET: frameborder, framespacing. Размерность атрибутов 

В открывающем теге элемента FRAMESET можно также использовать следующие атрибуты:

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

Второй этап создания страницы с фреймами: подготовка HTML-файлов для каждой области деления экрана с помощью элемента FRAME 

В документе раскладки элемент FRAMESET используется вместо элемента BODY. Второй этап создания страницы с фреймами - распределение документов (HTML-файлов) содержания по областям деления экрана и включение этих документов (файлов) в структуру фреймов с помощью элемента FRAME. Каждая область экрана описывается своим элементом FRAME. Структура и свойства такой области определяется значениями атрибутов элемента FRAME.

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

  •  name
    Имя фрейма.
  •  src
    Ссылка на документ содержания, помещаемый в данную область.
  •  noresize
    Запрет на перемещение границ фрейма при помощи мыши.
  •  scrolling

Управление прокруткой внутри одной области.

Значения:

  •  YES
    Полосы прокрутки создаются в обязательном порядке.
    •  NO
      Прокрутка запрещена.
    •  AUTO
      Браузер создает полосы прокрутки, когда документ не умещается целиком в отведенной области. Этот режим создается также, когда атрибут scrolling отсутствует.
  •  marginheight
    Величина отступа страницы от верхнего и нижнего краев фрейма в пикселах.
  •  marginwidth
    Величина полей страницы на левом и правом краях в пикселах.

Пример описания экранной области с помощью элемента FRAME :

<FRAME name="Имя фрейма" src="Имя файла.html" noresize scrolling="yes" marginheight=20 marginwidth=10 >

Примеры листингов HTML-файлов документов раскладки для создания WEB-страниц с фреймами. Две области. Три области 

Пример HTML-файла документа раскладки для создания WEB-страницы с фреймами в двух вертикальных областях. 

<HTML>

<HEAD>

<TITLE>WEB-страница с двумя вертикальными фреймами.</TITLE>

</HEAD>

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

  <FRAME name="left" src="frame1.html" noresize>

  <FRAME name="right" src="frame2.html"

      scrolling="yes" marginheight=10 marginwidth=5>

</FRAMESET>

</HTML>

Пример HTML-файла документа раскладки для создания WEB-страницы с фреймами в трех областях: двух вертикальных и верхней горизонтальной 

<HTML>

<HEAD>

<TITLE>WEB-страница с тремя фреймами. </TITLE>

</HEAD>

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

 <FRAME name="top" src="frame1.html" noresize>

<FRAMESET cols="30%, *">

    <FRAME name="left" src="frame2.html" noresize>

    <FRAME name="right" src="frame3.html"  

           scrolling="yes"

           marginheight=5 marginwidth=3>

</FRAMESET>

</FRAMESET>

</HTML>

При сложном делении экрана на области, когда одновременно есть горизонтальные и вертикальные фреймы, создается вложенный элемент <FRAMESET>.

Элемент NOFRAMES

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

<HTML>

<HEAD>

<TITLE> WEB-страница с  фреймами. </TITLE>

<FRAMESET cols="50%, 50%">

  <FRAME name="left" src="frame1.html" noresize>

  <FRAME name="right" src="frame2.html scrolling="yes"

            marginheight=10 marginwidth=10>

<NOFRAMES>

<P>Для просмотра этой страницы необходим браузер,

поддерживающий фреймы</P>

<P>Щелкните для просмотра<A href="File.html>

версию страницы без фреймов</A>

</P>

</NOFRAMES>

</FRAMESET>

</HTML>

Организация переходов по фреймам. Атрибут элемента гиперссылки target. 

HTML-файл документа раскладки основной страницы Index.html

<HTML>

<HEAD>

<TITLE>WEB-страница с двумя вертикальными фреймами.</TITLE>

</HEAD>

<FRAMESET cols="25%, 75%" frameborder=1 framespacing=5>

 <FRAME name="contents" src="leftdoc.html" noresize >

 <FRAME name="inform" src="rightdoc1.html" scrolling="yes"

        marginheight=10 marginwidth=10 >

</FRAMESET>

</HTML>

Документы содержания для заполнения левой и правой областей:

HTML-файл документа содержания левой области leftdoc.html

<HTML>

<HEAD>

<TITLE>Левый фрейм</TITLE>

</HEAD>

<BODY link="blue" vlink="green" alink="red">

  <H3>Содержание</H3>

  <HR>

  <A target="inform" href="rightdoc1.html">Глава 1</A><BR>

  <A target="inform" href="rightdoc2.html">Глава 2</A>

</BODY >

</HTML>

HTML-файл 1го документа содержания правой области rightdoc1.html

<HTML>

<HEAD>

<TITLE>Правый фрейм</TITLE>

</HEAD>

<BODY link="blue" vlink="green" alink="red">

<H1>Глава 1</H1>

<H2>Введение. Понятие о фреймах.<H2>

<P align="justify">

Фреймы - это области, которые создаются в окне браузера для

одновременного   просмотра     нескольких       документов.   

Последние   версии     браузеров   поддерживают    фреймы    

в обязательном порядке.

<HR>   

  <A  href="rightdoc2.html">Следующая глава</A>   

</BODY >

</HTML>

HTML-файл 2годокумента содержания правой области rightdoc2.html

<HTML>

<HEAD>

<TITLE>Правый фрейм</TITLE>

</HEAD>

<BODY link="blue" vlink="green" alink="red">

<H1>Глава 2</H1>

<H2>Структура WEB-страницы с фреймами.

Документы раскладки. Документы содержания. <H2>

<P align="justify">

При создании страницы с фреймами разрабатывается несколько  

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

Документ (файл) раскладки определяет

структуру окна, то есть количество и вид областей, на которые

разделено окно. Необходимое количество областей и их вид

(горизонтальные или вертикальные или комбинация)

определяется разработчиком WEB-страницы.

Документы (файлы) содержания предназначены

для заполнения информацией каждой из областей.

<HR>    

  <A  href="rightdoc1.html">Предыдущая глава</A>   

</BODY >

</HTML>

Документ раскладки основной страницы: файл Index.html задает размеры областей вертикального деления экрана и указывает документы содержания этих областей: файл leftdoc.html для левой области и файл rightdoc1.html для правой области.

В левом фрейме с именем name="contents" помещается оглавление всего документа: файл leftdoc.html, который выполняет функцию меню. Меню представляет собой набор ссылок, с помощью которых можно выбрать страницу для правого фрейма. В примере их две, но можно использовать любое количество. Правому фрейму присвоено имя name="inform". Страницы, показываемые внутри правого фрейма могут быть разными, а имя области остается постоянным и используется в ссылках левого фрейма с помощью атрибута target элемента гиперссылки A.

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

Таким образом, элемент гиперссылки с использованием атрибута target имеет шаблон:

<A target="Имя фрейма" href="Имя файла.html">"Текст пункта меню"</A>

Для перемещения по страницам документа используются два независимых способа:

  •  При помощи ссылок в меню левого фрейма.
  •  При помощи ссылок в документах содержания правой области: файлах rightdoc1.html и rightdoc2.html.

Для перехода на следующую или предыдущую страницу внутри текущего фрейма (второй способ) атрибут target в гиперссылках документов содержания правой области не указывается. Он действует по умолчанию.

Задание к лабораторной работе 

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


 

А также другие работы, которые могут Вас заинтересовать

77234. Обонятельный мозг развивается из вентральной части конечного мозга и состоит из двух отделов: центрального и переферического 243.57 KB
  Рецептор переферические отростки биполярных клеток 1 нейроны в regio olfctori сллизистой полости носа. Центральные отростки биполярных клеток образуют nn. Аксоны митральных клеток проходят в составе обонятельного тракта и вблизи обонятельного треугольника распадаются на три пучка: Медиальный пучок Промежуточный пучок Латеральный пучок Через переднюю спайку мозга в обонятельный тракт противоположной стороны к митральным клеткам обонятельной луковицы. Образованы центральными отростками биполярных клеток расположенных в обонятельной области...
77235. Борозды и извилины лобной доли. Динамическая локализация функций в лобной доле 80.82 KB
  precentrlis inferiorчасто сливается с верхней в единую предцентральную борозду gyrus frontlis inferior Проекционные центры участки коры полушарий большого мозга представляющие собой корковую часть анлизатора имеющие непосредственную морфофункциональную связь через проводящие пути с подкорковыми центрами. Ассоциативные центры участки коры не имеющие непосредственной связи с подкорковыми центрами связанные временной двусторонней связью с проекционными центрами. Центры лобной доли.
77236. Борозды и извилины теменной и затылочной долей коры больший полушарий. Динамическая локализация функций 252.5 KB
  Теменная доля: Борозды: Постцентральная борозда Внутритеменная борозда Извилины: Постцентральная извилина Нижняя теменная долька состоит из надкраевой и угловой извилин Центры: Проекционный центр общей чувствительности g. postcentrlis Проекционный центр схемы тела s. intrprietlis Ассоциативный центр стереогнозии узнавания предметов на ощупь lobus prietlis superior Ассоциативный центр праксии целенаправленных отработанных движений g. suprmrginlis Ассоциативный центр лексии зрительный анализатор письменной...
77237. Борозды и извилины височной доли больших полушарий. Динамическая локализация 248.5 KB
  Височная доля: Борозды: Верхняя височная борозда Нижняя височная борозда Извилины: Верхняя височная извилина Средняя височная извилина Нижняя височная извилина Центры: Проекционный центр слуха ядро слухового анализатора g. temporlis superior Проекционный центр вкуса ядро вкусового анализатора prhippocmplis et incus Проекционный центр обоняния старый prhippocmplis et incus Проекционный центр висцероцепции нижняя треть постцентральной и предцентральной извилин Проекционный центр вестибулярных функций g....
77238. Желудочки головного мозга, их сообщения между собой и с подпаутинным пространстовм. Цистерны подпаутинного пространства. Третий желудочек, его стенки 504.84 KB
  Третий желудочек его стенки Желудочки Боковые желудочки ventriculi lterles полости конечного мозга полушарий большого мозга. III желудочек ventriculus tertius полость промежуточного мозга diencephlon Латеральная стенка: таламус thlmus Нижняя стенка: гипоталамус hypothlmus: tuber cinerum recessus infundibul chism opticum recessus opticus corpor mmmilri частично pedunculu cerebelli Задняя стенка: comissur posterior et recessus pinelis; Верхняя: tel choroide ventriculu tertii сосудистая оболочка III желудочка...
77240. КОРКОВО-СПИННОМОЗГОВЫЕ ПУТИ. ПОКАЗАТЬ ИХ НА ТАБЛИЦЕ, ПРЕПАРАТЕ 439.43 KB
  Также проводит тормозные импульсы от коры полушарий большого мозга к нейронам двигательных ядер передних рогов спинного мозга т. оказывает тормозное действие на сегментарный аппарат спинного мозга. Тракт идет в нисходящем направлении во внутреннюю капсулу занимая передние 2 3 задней ножки В стволе головного мозга тракт проходит в prs bsilris I зона и в пирамидах продолговатого мозга В области нижней границы продолговатого мозга большая часть волокон каждой пирамиды переходит на противоположную сторону 80 образуя с аналогичными...
77241. ПРОВОДЯЩИЙ ПУТЬ БОЛЕВЫХ И ТЕМПЕРАТУРНЫХ ИМПУЛЬСОВ 183.39 KB
  Spinothlmicus lterlis болевая и температурная чуствительность Tr. Spinothlmicus nterior тактильная чувствительность В СМ эти тракты проходят в боковом и переднем канатиках соответственно В продолговатом мозге латеральный и передний тракты объединяются в единый tr. Spinothlmicus lemniscus spinlis Спинноталамический тракт проходит в покрышке моста и среднего мозга II зона ствола и заканчивается на вентролатеральных ядрах таламуса Большая часть аксонов nuclei ventrolterles thlmi 3 нейроны в составе таламокоркового тракта через заднюю...
77242. Экстрапирамидная система. Современные представления о строении и связи с другими отделами ЦНС 16.55 KB
  Нейроны клетки коры полушарий мозжечка 2 нейроны клетки зубчатых ядер аксоны которых переходят на противоположную сторону в среднем мозге перекрёст Вернекинга и заканчиваются на нейронах красного ядра. Аксоны переходят на противоположную сторону decusstio tegmenti dorslis фонтановидный Мейнерта. rubrospinlis пучок Монакова обеспечивает выполнение сложных привычных движений ходьба бег делая их пластичными способствует длительному сохранению позы и поддержанию тонуса мускулатуры;...