Использование фреймов для создания Web-документов

1.

13.12.2022
ПРАКТИЧЕСКОЕ ЗАНЯТИЕ 6/5.
Использование фреймов для создания
Web-документов

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

3.

Учебные вопросы
1. Понятие и особенности использования фреймов;
2. Форматирование фреймов;
3. Изучение особенностей использования гиперссылок в
Web-документе, содержащем фреймы.

4.

Несмотря на то, что сайты с фреймами встречаются все реже,
изучение HTML было бы неполным без рассмотрения темы о
фреймах. К тому же фреймы в каком-то смысле заняли свою нишу
и применяются для систем администрирования и справки. Там,
где недостатки фреймов не имеют особого значения, а
преимущества наоборот, активно востребованы.
Для создания фрейма используется тег <frameset>, который
заменяет тег <body> в документе и применяется для разделения
экрана на области. Внутри данного тега находятся теги <frame>,
которые указывают на HTML-документ, предназначенный для
загрузки в область

5.

Фреймы – области, которые создаются в окне браузера для
одновременной демонстрации нескольких документов.
Синтаксис
<FRAMESET параметр=«значение»>
<FRAME параметр=«значение» >
</FRAMESET>
Параметры тега <FRAMESET>
COLS= количество и размеры вертикальных фреймов,
ROWS= количество и размеры горизонтальных фреймов

6.

Описание параметров тега FRAMESET
Параметр COLS
Синтаксис
<frameset cols= "ширина 1, ширина 2, *">
…
</frameset>
Аргументы
Значения, перечисленные через запятую в виде
пикселов, процентов или символа *.
Значение по умолчанию - 100%

7.

Параметр ROWS
Синтаксис
<frameset rows="высота 1, высота 2, *...">
...
</frameset>
Аргументы
Значения, перечисленные через запятую в виде
пикселов (px или другие пометки указывать не
требуется), процентов или символа *.
Значение по умолчанию - 100%

8.

а также:
border - толщина границы между фреймами.
bordercolor - цвет линии границы.
frameborder - отображать рамку вокруг фрейма или нет.
framespacing - аналог параметра border, задает ширину
границы.

9.

При использовании фреймов необходимо как минимум три HTML-файла: первый
определяет фреймовую структуру и делит окно браузера на две части, а
оставшиеся два документа загружаются в заданные окна. Количество фреймов
не обязательно равно двум, может быть и больше, но никак не меньше двух,
иначе вообще теряется смысл применения фреймов.
Рассмотрим этапы создания фреймов на основе страницы, продемонстрированной
на рисунке
Нам понадобится три файла: index.html — определяет структуру
документа, menu.html — загружается в левый фрейм и content.html — загружается
в правый фрейм. Из них только index.html отличается по структуре своего кода от
других файлов

10.

Пример Файл index.html
<html>
<head>
<title>Фреймы</title>
</head>
<frameset cols="100,*">
<frame src="menu.html" name="MENU">
<frame src="content.html" name="CONTENT">
</frameset>
</html>
В данном примере окно браузера разбивается на две колонки с помощью
атрибута cols, левая колонка занимает 100 пикселей, а правая — оставшееся
пространство, заданное символом звездочки. Ширину или высоту фреймов
можно также задавать в процентном отношении, наподобие таблиц.
В теге <frame> задается имя HTML-файла, загружаемого в указанную область с
помощью атрибута src. В левое окно будет загружен файл,
названный menu.html а в правое — content.html . Каждому фрейму желательно
задать его уникальное имя, чтобы документы можно было загружать в
указанное окно с помощью атрибута name.

11.

Пример Файл menu.html
<html>
<head> <meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>Навигация по сайту</title> </head> <body style="background:
#f0f0f0">
<p>МЕНЮ</p>
</body>
</html>
Пример Файл content.html
<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Содержание сайта</title> </head> <body>
<p>СОДЕРЖАНИЕ</p>
</body>
</html>

12.

Например:
<FRAMESET ROWS="40%, 40%,*">,
<FRAMESET COLS=“40%, 40%,*">,
<FRAMESET COLS=“40%, 40%,*" ROWS="40%, 40%,*"> -
сетка фреймов
* - использовать все свободное пространство

13.

Тег <FRAME>
Тег <FRAME> определяет свойства отдельного
фрейма, на которые делится окно браузера.
Закрывающий тег: Не требуется.
Параметры:
name — задает уникальное имя фрейма.
src — путь к файлу, предназначенному для загрузки
во фрейме.

14.

Описание параметров тега FRAME
Параметр NAME
Синтаксис
<frame name=имя>
Аргументы
В качестве имени используется набор символов,
включая числа и буквы. При обращении к фрейму
по имени соблюдайте то же написание, что и в
параметре name.
Значение по умолчанию - Нет.

15.

Параметр SRC
Синтаксис
<frame src=URL>
Аргументы
В качестве значения принимается полный или
относительный путь к файлу.
Значение по умолчанию - Нет.

16.

Пример организации фрейма
<HTML>
<HEAD>
<TITLE> Таблица </TITLE>
</HEAD>
<frameset rows="33%,33%,*" cols="50%, 50%">
<frame src=r1c1.html name="Фрейм 1">
<frame src=r1c2.html name="Фрейм 2">
<frame src=r2c1.html name="Фрейм 3">
<frame src=r2c2.html name="Фрейм 4">
<frame src=r3c1.html name="Фрейм 5">
<frame src=r3c2.html name="Фрейм 6">
</frameset>
</HTML>

17.

Фрейм 1
Фрейм 2
Фрейм 3
Фрейм 4
Фрейм 5
Фрейм 6

18.

Задание для практического выполнения
1.
2.
3.
4.
В этой папке создать шесть htm-страниц по образцу на
раздаточном материале.
Скачать фотографии к занятию и разместить их в той же
папке, что и созданные страницы.
Запустить файл index.htm и проверить работу гиперссылок.
Представить результат преподавателю.
Дополнительное задание:
1.
2.
3.
4.
Разбить центральный фрейм на 2 вертикальных фрейма
одинаковой ширины.
Во 2-й из них (правый) вставить произвольную фотографию.
Переделать гиперссылки, чтобы их активизация приводила к
загрузке в 1-й (левый) из новых получившихся фреймов.
Сохранить все в своей папке на сервере.

English Русский Правила