Фреймы
Фреймы используются для того, чтобы в одном окне броузера
показать несколько HTML-документов. Например, мы разобьем окно на три
части. В первый фрейм загрузим меню для навигации. Во второй будем загружать
документы, на которые пользователь будет щелкать по пунктам меню. В третьем будет
крутиться баннер. Такой подход к созданию страниц экономит время закачивания
информации. Меню закачивается один раз. Недостатком является внешний вид.
Примеров удачного использования фреймов в Интернет очень мало. Фреймы
были популярны в 90х годах. Сейчас от них практически отошли. Мало где
на серьезном сайте вы найдете страницы с фреймами. Они могут быть полезны
для создания домашних страничек или любительских сайтов. Также возможно
их использование на второстепенных страничках сайта, которые не обязаны
выглядеть блестяще. Здесь я привожу краткое описание фреймов, для того
чтобы вы знали с чем их едят, если придется с ними столкнуться. При использовании
фреймов, старайтесь избегать линеек прокрутки. Они смотрятся неестественно
в середине HTML-страницы. Единственное более или менее удачное применение
фреймов, на мой взгляд, для меню, которое всегда должно оставаться наверху,
а не сползать вниз при прокрутке документа. Посмотрите пример на сайте
http://www.mjk.msk.ru/~dron/.
Но та же идея может быть не очень удачно реализована, как, например, на
сайте http://computerclub.dore.ru/.
Прокручивать меню неудобно, когда там раскрыто несколько подпунктов, затрудняется
навигация и работа с сайтом.
Начнем со встроенных фреймов. Они появились в стандарте языка HTML, начиная
с версии 4.0, поэтому не все броузеры их поддерживают. Например, Netscape
4.06 их не понимает. Но зато самый распространенный броузер InternetExplorer
четвертой и более поздней версии умеет с ними работать. Встроенный фрейм
позволяет вам в вашем документе выделить прямоугольную область и загрузить
туда html-документ.
Пример:
<iframe name="test" src="http://itsoft.ru" width="400" height="300"
scrolling="auto" frameborder="1">
Ваш броузер не поддерживает встроенных фреймов. Вы можете
посмотреть этот документ <a href="http://itsoft.ru">здесь</a>
</iframe> |
|
Атрибут name служит для задания имени фрейму затем, чтобы в этот фрейм
можно было загружать другие документы при помощи гиперссылок. У гиперссылок
есть соответствующий атрибут target, который указывает куда загружать документ,
на который она указывает. В предыдущей главе мы рассмотрели только одно
значение этого атрибута - _blank.
Пример загрузки других документов во встроенный фрейм:
Команда <iframe> принимает следующие атрибуты:
- name
- имя фрейма
- src
- URL документа для загрузки
- width
- ширина прямоугольной области
- height
- высота прямоугольной области
- align
- выравнивание области относительно других объектов, принимает значения
left, rigth, top, middle, bottom
- scrolling
- определяет наличие прокрутки, возможные значения - (yes, no, auto)
- frameborder
- наличие рамки, возможные значения 0 или 1
- marginwidth
- ширина отступа от левой и правой границ рамки
- marginheight
- ширина отступа от верхней и нижней границ рамки
-
-
Следующй вариант использования фреймов - это разбиение окна на несколько частей.
Вот пример.
<html>
<head>
<title>Окно, разбитое на несколько частей</title>
</head>
<frameset cols="20%, 80%">
<frameset rows="100, 200">
<frame src="contents_of_frame1.html">
<frame src="contents_of_frame2.gif">
</frameset>
<frame src="contents_of_frame3.html">
</frameset>
</html>
Окно будет разбито следующим образом:
---------------------------------------
| | |
| | |
| Frame 1 | |
| | |
| | |
|---------| |
| | Frame 3 |
| | |
| | |
| | |
| Frame 2 | |
| | |
| | |
| | |
| | |
---------------------------------------
Команда <frameset> разбивает область не несколько колонок и рядов.
Например, для того чтобы получить разбиение 2х3, надо дать следующую команду:
<frameset cols="20%,*" rows="*,30%, 20%" frameborder="1">
<frame src="url_1">
<frame src="url_2">
<frame src="url_3">
<frame src="url_4">
<frame src="url_5">
<frame src="url_6">
</frameset>
|
Вы указываете разбиение по колонкам и по рядам. В данном случае у нас будет две
колонки, причем первая занимает 20% от экрана, а вторая все остальное, т.е.
80%. Далее у нас деление на три ряда. Второй - 30% от высоты экрана, третий
- 20%, а первый, соответственно, 50%. Эти параметры можно задавать и в пикселях,
для этого не надо указывать знак процента. Результатом будет:
---------------------------------------
| | |
| | |
| | |
| url_1 | url_2 |
| | |
| | |
| | |
|---------|-----------------------------|
| | |
| | |
| url_3 | url_4 |
| | |
|---------|-----------------------------|
| | |
| url_5 | url_6 |
---------------------------------------
Каждая из этих ячеек может быть разбита еще на подразделы. Вместо соответствующей
команды <frame> надо дать команду <frameset>.
<frameset cols="20%,*" rows="*,30%, 20%" frameborder="1">
<frame src="url_1">
<frameset cols="50%,*" rows="50,*" frameborder="1">
<frame src="url_2_1">
<frame src="url_2_2">
<frame src="url_2_3">
<frame src="url_2_4">
</frameset>
<frame src="url_3">
<frame src="url_4">
<frame src="url_5">
<frame src="url_6">
</frameset>
|
Результат:
---------------------------------------
| | | |
| | | |
| | | |
| url_1 |______________|______________|
| | | |
| | | |
| | | |
|---------|-----------------------------|
| | |
| | |
| url_3 | url_4 |
| | |
|---------|-----------------------------|
| | |
| url_5 | url_6 |
---------------------------------------
Щелкнув здесь, вы загрузите фреймовую
структуру в наш встроенный фрейм. У команды <frame> присутствуют все
те же атрибуты, что и у команды <iframe>, плюс есть еще один - noresize.
Он не принимает никаких значений, а просто указывает, что границы фрейма
изменять нельзя. Если его не указать, то мышкой вы легко можете изменять
размеры разбиения окна.
Упражнения
Создайте следующую фреймовую структуру.
---------------------------------------
| |
| заголовок |
| |
|_______________________________________|
| | |
| | |
| | |
| меню | |
| | документы |
| | |
| | |
| | |
|---------|-----------------------------|
| |
| баннер |
---------------------------------------
|