HTML_4 (Методические материалы к лабораторным работам 1, 2)
Описание файла
Файл "HTML_4" внутри архива находится в следующих папках: Методические материалы к лабораторным работам 1, 2, html. Документ из архива "Методические материалы к лабораторным работам 1, 2", который расположен в категории "". Всё это находится в предмете "разработка интернет-приложений" из 5 семестр, которые можно найти в файловом архиве МГТУ им. Н.Э.Баумана. Не смотря на прямую связь этого архива с МГТУ им. Н.Э.Баумана, его также можно найти и в других разделах. Архив можно найти в разделе "лабораторные работы", в предмете "разработка интернет-приложений" в общих файлах.
Онлайн просмотр документа "HTML_4"
Текст из документа "HTML_4"
13
Лекция №4. Фреймы. Элементы секции HEAD.
----------------------------------------------------------------
1. Фреймы
2. Элементы секции HEAD
----------------------------------------------------------------
1. Фреймы
Под фреймом (кадром) понимается фрагмент окна броузера, который выделяется как отдельное окно. С помощью фреймов возможно создание многооконных HTML-документов. В каждом фрейме отображается отдельный документ HTML. С использованием фреймов возможно в одном окне броузера просматривать несколько HTML-документов, каждый документ в своем фрейме.
----------------------
Пример: index.html
-----------------------------------------
| Заголовок (header.html) |
-----------------------------------------
| Меню (left) | Основное текст (right) |
| (menu.html) | (about.html) |
| | |
| | |
-----------------------------------------
| Нижний заголовок (footer.html) |
-----------------------------------------
Файл index.html (Как правило при создании сайта начальный файл называется index.html или default.html)
<HTML>
<HEAD>
<TITLE>Простой документ с фреймами</TITLE>
</HEAD>
<FRAMESET rows="50px,80%,*" border=5 bordercolor=green>
<!--
(rows="50px,80%,*")
rows="100px,100px,100px" - при масштабировании сохраняются пропорции
rows="30%,50%,*"
rows="30%,50%,20%
rows="3*,5*,2*" - в долях
rows="1*,200px,3*" - Второй фрейм занимает 200px, первый фрейм получает 25% оставшегося пространства, а третий - 75%.
rows="1*,50%,3*" - Второй фрейм занимает 50% высоты окна броузера, первый фрейм получает 25% оставшегося пространства, а третий - 75%.
rows="*,20px,50%,20px,3*" - Третий фрейм занимает 50% высоты окна броузера, второй и четвертый - 20px, первый фрейм получает 25% оставшегося пространства, а пятый - 75%. (* = 1*, если * встречается 1 раз, то обозначает все оставшееся пространство)
-->
<FRAME src="header.html" scrolling="no">
<FRAMESET cols="20%,*">
<!--
(cols="20%,*")
cols="20%,80%"
cols="1*,4*"
-->
<FRAME (noresize) name="left" src="menu.html">
<FRAME name="right" src="about.html">
</FRAMESET>
<FRAME src="footer.html" scrolling="no">
<NOFRAMES>
<P>Версия документа без фреймов
<P>В этом документе содержатся фреймы, но ваш броузер их не поддерживает.</P>
</NOFRAMES>
</FRAMESET>
</HTML>
----------------------
Документ HTML, в котором описывается компоновка фреймов называется документом с фреймами и выглядит не так, как обычный документ HTML. Стандартный документ имеет один раздел HEAD и один раздел BODY. Документ с фреймами имеет раздел HEAD и раздел FRAMESET, который заменяет раздел BODY.
В разделе FRAMESET задается расположение фреймов в окне броузера. Обычные визуальные элементы не должны присутствовать в документе с описанием фреймов.
Иерархия элементов:
FRAMESET
|
|-FRAMESET, FRAME, NOFRAMES
Элемент FRAMESET определяет набор фреймов, FRAME – содержимое и вид одного фрейма, NOFRAMES – задает альтернативное содержимое документа для броузеров без поддержки фреймов.
Элемент FRAMESET
Начальный тег: обязателен, конечный тег: обязателен
Определяет набор фреймов.
Атрибуты:
1. rows = список длин, определяющих высоту горизонтальных фреймов
(Разделенный запятыми список пикселов, процентов и относительных длин. По умолчанию используется 100%, что обозначат одну строку.)
2. cols = список длин, определяющих ширину вертикальных фреймов
(Разделенный запятыми список пикселов, процентов и относительных длин. По умолчанию используется 100%, что означат один столбец.)
(Пикселы – фиксированный размер, % - % от окна броузера, относительная длина (*) – доля от оставшегося пространства. Приоритет: 1.фиксированная ширина в PX, 2.%, 3.оставшаяся часть окна делится в долях(*).)
3. frameborder = 1|0 (IE: YES | NO)
Определяет видимость границ фреймов для данного FRAMESET. Возможные значения:
-
1,YES: Границы отображаются. (По умолчанию).
-
0,NO: Границы не отображаются. Однако, они могут все равно отображаться, если заданы в соседних фреймах.
4. border = толщина границы между фреймами в PX. Если border = 0, граница не отображается.
5. framespacing = дополнительное расстояние между фреймами в PX. Если явно задается framespacing= 0, то отображается тонкая граница.
Фактически, и тот и другой атрибут определяет толщину границы. Если задать оба атрибута, то отображается толщина, указанная во framespacing. (не складываются).
6. bordercolor=цвет границы
Элементы FRAMESET могут быть вложены друг в друга. Число уровней вложенности не ограничено.
Элемент FRAME
Начальный тег: обязателен, конечный тег: не используется
Определяет содержимое и вид одного фрейма.
Атрибуты:
1. name = строка
Имя фрейма. Может использоваться в качестве цели в гиперссылках (<A target=”цель”>).
2. src = uri
Начальное содержимое фрейма, например документ HTML. Может быть документом, содержащим фреймы. (без рекурсии)
3. noresize (логический)
Запрещает изменение размеров фрейма. (границы неперемещаемы).
4. scrolling = auto|yes|no
Задает информацию о полосах прокрутки (scrollbar’ах) фрейма. Возможные значения:
-
auto: Полосы прокрутки (scrollbar’ы) появляются по мере необходимости. (По умолчанию).
-
yes: Всегда появляются полосы прокрутки. (В IE: всегда появляется вертикальная полоса прокрутки, горизонтальная появляется по мере необходимости.)
-
no: Полосы прокрутки не появляются.
5. marginwidth = пикселы
Определяет ширину левого и правого отступа между границей фрейма и содержимым фрейма (текстом).
6. marginheight = пикселы
Определяет ширину верхнего и нижнего отступа между границей фрейма и содержимым фрейма.
Возможно использование атрибутов frameborder и bordercolor, которые перекрывают соответствующие значения элемента FRAMESET.
Элемент NOFRAMES
Начальный тег: обязателен, конечный тег: обязателен.
Задает альтернативное содержимое документа для броузеров без поддержки фреймов.
--------------
Пример 2. Совместное использование атрибутов cols и rows.
| 11 | 12 | 13 |
| 21 | 22 | 23 |
<!-- 2 строки Х 3 столбца -->
<FRAMESET rows="50%,*" cols="33%,33%,*">
<!-- Фреймы создаются построчно (строка,столбец) -->
<FRAME src="11.html">
<FRAME src="12.html">
<FRAME src="13.html">
<FRAME src="21.html">
<FRAME src="22.html">
<FRAME src="23.html">
</FRAMESET>
--------------
Задание целевого фрейма. Атрибут target.
В элементах A и AREA возможно указание целевого фрейма гиперссылки с помощью атрибута target (в начальном якоре можно указать фрейм, в котором будет открываться содержимое гиперссылки).
Атрибут target:
target = имя фрейма (<FRAME name=”имя фрейма”>) | зарезервированное имя фрейма
зарезервированное имя фрейма = _blank | _self | _parent | _top
_blank - целевым фреймом является новое окно броузера.
_self – целевым фреймом является текущий фрейм (по умолчанию) (элемент BASE)
_top – целевым фреймом является полное окно броузера (все остальные фреймы закрываются)
_parent – целевым фреймом является родительский фрейм
Броузер пытается загрузить документ в родительский фрейм. Как правило аналогично _top. (Если загрузить в один из фреймов (right) документ, содержащий фреймы, то ссылка с атрибутом target=_parent в любом из этих фреймов приведет к открытию документа во фрейме right).
---------------------
menu.html
<P>
<A href="1.html" target="right">Ссылка открывается в правом фрейме</A>
<P>
<A href="1.html#Anchor1" target="right">Ссылка на фрагмент документа открывается в правом фрейме</A>
<P>
<A href="1.html" target="_blank">Ссылка открывается в новом окне</A>
<P>
<A href="1.html" target="_top">Ссылка открывается в полном окне броузера</A>
---------------------
Встроенные (плавающие) фреймы. Элемент IFRAME.
(IFRAME – in-line floating frames)
Элемент IFRAME позволяет осуществлять вставку фрейма в тело HTML-документа.
-------------------
<P>
Текст
<IFRAME name=iframe1 src="1.html" width="200" height="200" scrolling="no" align=middle>
Ваш броузер не поддерживает фреймы
</IFRAME>
Текст
</P>
<P>
<A href="2.html" target=iframe1>гиперссылка</A>
-------------------
Встраиваемая информация определяется атрибутом src, а содержимое элемента IFRAME, отображается только если броузер не поддерживает фреймы (аналогично содержимому элемента NOFRAMES).
Атрибуты:
1. width = ширина встроенного фрейма в PX или %.
2. height = высота встроенного фрейма в PX или %.
3. ALIGN = TOP | MIDDLE | BOTTOM | LEFT | RIGHT
Задает выравнивание фрейма в тексте (как в случае с изображениями).
Атрибуты HSPACE и VSPACE задают горизонтальный и вертикальный внешние отступы (как в изображениях).
Атрибуты NAME, SRC, FRAMEBORDER, SCROLLING, MARGINHEIGHT, MARGINWIDTH используются так же, как и в обычных фреймах.
Атрибуты BORDER, BORDERCOLOR, FRAMESPACING определены спецификацией, но, похоже, что IE5.0 их игнорирует.
Изменять размер встроенных фреймов нельзя, поэтому у них нет атрибута noresize.
----------------------------------------------------------------
2. Элементы секции HEAD.
TITLE – определение заголовка документа
BASE – задание базового URI
META – определение метаданных
SCRIPT – создание сценариев на JavaScript и VBScript
STYLE – определение встроенной таблицы стилей
LINK – определение вспомогательных связей между документами (ссылка на внешние таблицы стилей)
Элемент BASE
Начальный тэг: обязателен, Конечный тэг: запрещен
Задание базового URI для гиперссылок.
Атрибуты:
href = URI
Базовый URI для относительных гиперссылок.
target = имя фрейма по умолчанию
Имя фрейма по умолчанию, в котором открываются гиперссылки.
---------------------------------------
Пример:
<HEAD>
<BASE href="http://iu5.bmstu.ru" target="_blank">
</HEAD>
<BODY>
<A href="one/one.html#Anchor1">Относительная гиперссылка</A>
