HTML Урок 6. Фреймовая структура html

Авторadmin / Опубликовано

Назад
К оглавлению
Далее
Цель урока: изучение возможностей создания фреймов в html

Фреймовая структура в HTML

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

Элемент frameset

Синтаксис деления по вертикали (на колонки):

<FRAMESET cols="n%,n%"> … </FRAMESET>

где n — ширина фреймов в процентах слева направо

Синтаксис деления по горизонтали:

<FRAMESET rows="n%,n%"> … </FRAMESET>

где n — высота фреймов в процентах сверху вниз

Фреймов в структуре может быть не два, а более.

Фреймовая структура в HTML пример

Файл с фреймовой структурой называется файлом-раскладкой и обычно называется index.html

Как происходит загрузка файлов во фрейм рассмотрим на примере.

Синтаксис:

<FRAME  src="Имя файла.html"  name="имя фрейма">
Пример: Создать файл с фреймовой структурой с двумя колонками: в левую (ширина 25%) загружать файл menu.html, в правую (ширина 70%) загружать файл content.html

Выполнение:

<html>
<head>
	<title>Пример</title>
</head>
<frameset cols="25%, 75%">
	<frame src="menu.html">
	<frame src="content.html">
</frameset>
</html>
Задание 1:
Создать файл с фреймовой структурой (имя файла index.html) с тремя колонками (ширина: 25%, 50%, *). Создать три файла для загрузки в фреймы, расположить их в той же папке, в которой находится index.html: 1. menu.html (в нем расположить заголовок h1 «Меню»), 2. content.html (в нем расположить заголовок h1 «Контент»), 3. news.html (в нем расположить заголовок h1 «Новости»).
Поменяйте расположение с колонок на ряды (горизонтальное деление), посмотрите на результат.

Атрибуты тега frameset:
frameborder — значение 1 или 0 (есть или нету)
border — значение размера границы
bordercolor — цвет границы
framespacing — ширина граней фреймов в пикселях (только в IE)

<frameset cols="25%, 75%" frameborder="1" bordercolor="red" border="1">

Атрибуты элемента frame:
name — имя фрейма
noresize — запрещает изменение размеров для определенного фрейма.
scrolling — управляет прокруткой внутри одной области (yes, no, auto).
marginheight — задает величину отступа фрейма от верхнего и нижнего краев страницы.
marginwidth — создает поля слева и справа
frameborder — указывает, нужна или нет рамка вокруг фрейма (0 и 1)
bordercolor – цвет рамки

Правила создания ссылки во фреймах в html

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

Важно: для загрузки пункта меню в определенный фрейм необходимо:

  1. добавить название необходимого фрейма при помощи атрибута name (в файле-раскладке)

    2. Пример:

    <frame src="content.html" name="mainFrame">
  2. в файле с меню в гиперссылке добавить атрибут target

    3. Пример:

    <а href="glava1.html" target="mainFrame" rel="noopener noreferrer">

Посмотрим полный код обоих файлов:
Файл index.html

<html>
...
<frameset cols="25%, 75%">
	<frame src="menu.html">
	<frame src="content.html" name="mainFrame">
</frameset>
</html>

Файл menu.html:

<html>
...
<body>
	<h2>Меню:</h2>
<ul>
<li><а href="glava1.html" target="mainFrame" rel="noopener noreferrer">Глава 1</а></li>
<li><а href="glava2.html" target="mainFrame" rel="noopener noreferrer">Глава 2</а></li>
</ul>
</html>

Вложенные фреймы

Работа с фреймами в html подразумевает и более сложную структуру.
Рассмотрим на примере:
Вложенные фреймы html
Каким будет результат?

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

Встроенные (плавающие) фреймы

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

1
2
3
4
5
6
7
8

<html>
...
<body>
...
<iframe src="main.html" width="150" height="100"></iframe>
...
</body>
</html>

Фрейм будет вставлен в виде окна указанных размеров (атрибуты width и height).
Встроенные (плавающие) фреймы

Дополнительные атрибуты:

  • name — имя фрейма
  • frameborder — граница фрейма
  • scrolling — полоса прокрутки
  • hspace — отступы по горизонтали
  • vspace — отступы по вертикали
  • marginwidth — отступ внутренней страницы от границы фрейма по горизонтали
  • marginheight — отступ внутренней страницы от границы фрейма по вертикали
Лабораторная работа 2: Создать фреймовую структуру и загружаемые в нее файлы согласно изображению и списку файлов. В файле с меню необходимо организовать две гиперссылки: по щелчку на первую из них — файл glava1.html загружается в левый фрейм (там, где Главная домашняя страница), по щелчку на вторую из них — файл glava2.html загружается тоже в левый фрейм. В качестве внутреннего фрейма использовать плавающий фрейм (iframе).

фреймы
Список файлов:

index.html - Главная раскладка с фреймовой структурой
shapka.html - Название сайта
menu.html - Меню
home.html - Главная домашняя страница
podval.html - Нижняя часть
inner.html - Встроенный фрейм
glava1.html - Глава 1
glava2.html - Глава 2

Назад
К оглавлению
Далее