Студопедия

КАТЕГОРИИ:

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника



Создание электронного учебника




Читайте также:
  1. Delphi. Страничные раскладки. Создание их и использование
  2. I.Создание принципиальной схемы.
  3. V. Создание и поддержание продуктивной атмосферы на уроке
  4. Банковского резервирования и создание денег
  5. Введение в программирование. Создание приложений на языке Visual Basic for Applications
  6. Ввод и редактирование данных. Создание форм
  7. Воссоздание Большого взрыва
  8. Вставка и создание таблицы
  9. ГЛАВА 1 СОЗДАНИЕ СОЮЗА ДИЗАЙНЕРОВ
  10. Глава 4 Создание части 10003

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

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

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

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

Файл index.html :

HTML 4.01IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Фреймы</title>

</head>

<frameset cols="100,*">

<frame src="menu.html" name="MENU">

<frame src="content.html" name="CONTENT">

</frameset>

</html>

В случае использования фреймов в первой строке кода пишется следующий тип документа.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Данный <!DOCTYPE> указывают браузеру, что он имеет дело с фреймами, эта строка кода является обязательной. Контейнер <head> содержит типовую информацию вроде кодировки страницы и заголовка документа. Вот только учтите, что заголовок остается неизменным, пока HTML-файлы открываются внутри фреймов.



В данном примере окно браузера разбивается на две колонки с помощью атрибута cols, левая колонка занимает 100 пикселов, а правая — оставшееся пространство, заданное символом звездочки. Ширину или высоту фреймов можно также задавать в процентном отношении, наподобие таблиц.

В теге <frame> задается имя HTML-файла, загружаемого в указанную область с помощью атрибута src. В левое окно будет загружен файл, названный menu.html, а в правое — content.html. Каждому фрейму желательно задать его уникальное имя, чтобы документы можно было загружать в указанное окно с помощью атрибута name.

Файл menu.html:

HTML 4.01IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<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 4.01IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Содержание сайта</title>

</head>

<body>

<p>СОДЕРЖАНИЕ</p>

</body>

</html>

Рассмотрим более сложный пример уже с тремя фреймами.

В данном случае опять используется тег <frameset>, но два раза, причем один тег вкладывается в другой. Горизонтальное разбиение создается через атрибут rows, где для разнообразия применяется процентная запись.

Пример. Три фрейма

HTML 4.01IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Фреймы</title>

</head>

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

<frame src="top.html" name="TOP" scrolling="no" noresize>

<frameset cols="100,*">

<frame src="menu.html" name="MENU">

<frame src="content.html" name="CONTENT">

</frameset>

</frameset>



</html>

 

Как видно из данного примера, контейнер <frameset> с атрибутом rows вначале создает два горизонтальных фрейма, но вместо второго фрейма подставляется еще один <frameset>, который повторяет уже известную вам структуру из примера. Чтобы не появилась вертикальная полоса прокрутки, и пользователь не мог самостоятельно изменить размер верхнего фрейма, добавлены атрибуты scrolling="no" и noresize.


Дата добавления: 2015-09-15; просмотров: 7; Нарушение авторских прав







lektsii.com - Лекции.Ком - 2014-2021 год. (0.014 сек.) Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав
Главная страница Случайная страница Контакты