ФРЕЙМЫ
Создание фреймов
Фреймы (Frame – кадр или рамка) – мощный механизм представления информации на веб-страницах. С помощью фреймов экран разделяется на несколько областей, в каждой из которых отображается содержимое отдельной страницы.
Фреймы часто используют для организации навигации по сайту. В один фрейм загружается список гиперссылок. При щелчке по любой из них содержимое новой страницы отображается в другом фрейме.
Так как документ с фреймами состоит из нескольких документов, для создания фреймовой структуры тег <body> не используют. Вместо него необходим тег <frameset> и парный ему тег </frameset>.
Этот тег имеет следующие атрибуты.
• cols – количество фреймов-столбцов. Значением этого атрибута является список размеров каждого из фреймов.
Например, тег <frameset cols ="20%, 60%, 20%"> задает три вертикальных фрейма соответствующих размеров. Размер последнего фрейма можно задавать с помощью символа *, означающего оставшуюся часть экрана. Размеры фреймов можно задавать не только в процентах, но и в пикселях.
• rows – количество фреймов-строк.
Например, тег <frameset rows="10%, *"> задает два горизонтальных фрейма, причем первый занимает 10 % экрана, второй – всю оставшуюся часть.
Если указать эти два атрибута одновременно, каждый горизонтальный фрейм будет разбит на указанное число вертикальных фреймов.
• border – ширина рамки между фреймами. При border=" 0" границы будут отсутствовать.
• bordercolor – цвет рамки.
Для описания каждого из фреймов используется тег <frame> с атрибутом src="имя файла".
• Атрибут scrolling определяет наличие линеек прокрутки содержимого фрейма. Возможные значения: yes – линейки прокрутки отображаются всегда, nо – не отображаются, auto – появляются в случае необходимости.
|
|
Например:
<html>
<frameset rows="50%, *” cols="35%,65%">
<frame src="a.html">
<frame src="b.html">
<frame src="c.html">
<frame src="d.html">
</frameset>
</html>
Коротко о главном
<frameset> – создание фреймовой структуры
<frame> – определение фрейма и его свойств
• Задание 1
Создайте два HTML-документа. Сохраните их как файлы a.html и B.html. Эти страницы будут отличаться названиями и цветом фона.
Файл a.html
<html>
<head>
<Тitle>Синий цвет</Тitle>
</head>
<BODY bgcolor="blue" text="yellow">
<Н1>Страничка a</H1>
</BODY>
</html>
Файл B.html
<html>
<head>
<Тitle>Желтый цвет</Тitle>
</head>
<BODY bgcolor="yellow" text="blue">
<Н1>Страничка B</H1>
</BODY>
</html>
Создайте базовую страницу, на которой будут отображаться фреймы, и сохраните ее в файле с именем baza.html:
<HTML> <HEAD>
<Тitle>Фреймы</Тitle>
</HEAD>
<FRAMESET cols="50%, 50%">
<FRAME src="A.html">
<FRAME src="B.html">
</FRAMESET>
</HTML>
Создание «плавающих» фреймов
Разместить фрейм в обычном HTML-документе можно с помощью тега <iframe>. Фреймы, которые создаются с помощью этого тега, называются «плавающими».
Тег-контейнер <iframe> может располагаться в любом месте документа (внутри тега-контейнера <body>).
Атрибуты тега:
src – указывает URL-адрес HTML-документа, который будет располагаться в плавающем фрейме;
width, height – ширина и высота плавающего фрейма;
align – выравнивание относительно окна браузера;
marginwidth – размеры свободных полей слева и справа от фрейма;
|
|
marginheight – размеры свободных полей сверху и снизу от фрейма;
frameborder – вывод рамки фрейма;
name – имя фрейма;
scrolling – вывод полос прокрутки.
Создание гиперссылок с учетом фреймов
Чтобы при гиперссылке страничка открывалась в нужном фрейме, необходимо:
1) при создании фреймов задать им имена с помощью атрибута: name = "имя фрейма"
<frameset cols="30%,*">
<frame src="C.html" name="left">
<frame src="D.html" name="right">
</frameset>
2) при вставке гиперссылки указать, в каком фрейме необходимо открыть страничку с помощью атрибута target = "имя фрейма":
<а href="strl.html" target="right">... </a>
<a href="spisok.html" target="left">... </a>
Коротко о главном
<iframe> – создание плавающего фрейма.
Атрибут target тега <А> задает имя фрейма, в котором нужно открыть вызванный по гиперссылке HTML-документ.
• Задание 1
Создайте папку Фреймы. Скопируйте в нее файлы с рисунками компьютерной мыши, монитора, клавиатуры, компьютера. Создайте четыре HTML-документа. Сохраните их как файлы Processor.html, Mouse.html, Monitor.html, Keyboard.html. Эти страницы будут отличаться названиями, цветом фона и картинкой. Они будут отображаться в плавающем фрейме при щелчке по соответствующей гиперссылке.
Создайте HTML-документ Computers.html по следующему образцу:
<HTML>
<HEAD> <ТIТLЕ>Компьютеры</ТIТLЕ> </HEAD>
<BODY>
<Н1 align="center">Компьютеры</H1>
<HR>
<IFRAME src="Monitor.html" width="200" height="200" align="right" name="a"> </IFRAME>
<UL>Компьютер состоит из четырех основных частей:
<LI><A href="Processor.html" target="а">Главная из них – процессор</А>
|
|
<LI><A href="Monitor.html" target="a">Монитор</A>
<LI><A href="Keyboard.html" target="a">Клавиатура</A>
<LI><A href = "Mouse.html" target = "a">Мышь</A>
</UL>
<IMG src="computer.gif" widht="150" heigh="150">
</BODY>
</HTML>