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

Цель урока: изучение возможностей создания фреймов в 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>

Атрибуты тега 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">
  3. в файле с меню в гиперссылке добавить атрибут target
  4. Пример:

    <a href="glava1.html" target="mainFrame">

Посмотрим полный код обоих файлов:
Файл 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><a href="glava1.html" target="mainFrame">Глава 1</a></li>
<li><a href="glava2.html" target="mainFrame">Глава 2</a></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 — отступ внутренней страницы от границы фрейма по вертикали

Поделитесь уроком с коллегами и друзьями:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*
*

Вставить формулу как
Блок
Строка
Дополнительные настройки
Цвет формулы
Цвет текста
#333333
Используйте LaTeX для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить