С одной стороны, хороший веб-сайт должен содержать много полезной информации. С другой стороны, читатель не должен испытывать трудности в поиске нужной ему информации на сайте. Фреймы дают возможность создания наглядной и удобной для переходов структуры.
При использовании технологии фреймов окно браузера представляется как фреймсет (frameset). Фреймсет разбивается на части, которые называются фреймами (frame). Так в одном окне браузера можно вывести несколько веб-страниц. Каждый фрейм - это отдельный html-файл, который, в принципе, можно просматривать в отдельном окне.
Одновременное отображение нескольких веб-страниц на экране обязывает веб-мастера делать эти страницы связанными, как логически, так и технически.
Работа с фреймами сравнима со следующим. Представим окно браузера как некую плоскость, которую нужно покрыть тканью. До этого момента мы как бы покрывали плоскость одним целым куском ткани. Использование фреймов позволяет покрыть эту плоскость несколькими лоскутами разных тканей. Только надо понимать, что все лоскуты - прямоугольники.
Для начала создадим страницу, которая состоит из трех независимых горизонтальных частей. Для этого Вам нужно создать три веб-страницы с любым содержанием и назвать их top.htm, middle.htm и bottom.htm. Теперь создайте пустой html-файл и назовите его index.htm.
Для создания простого фреймсета нужно в файле index.htm набрать:
1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
2.<HTML>
3. <HEAD>
4. <TITLE>
5. Текст заголовка
6. </TITLE>
7. </HEAD>
8. После строки с тегом </HEAD>:
<FRAMESET ROWS='a
где a высота первой части. Высоту можно задать процентами (%) или точно в пикселях. Также a можно присвоить звездочку (*), что делает зависимой высоту этой части от высоты других частей фреймсета.
9. ,b, где b – высота второй части. Высоту можно задать процентами (%) или точно в пикселях. Также b можно присвоить звездочку (*), что делает зависимой высоту этой части от высоты других частей фреймсета.
10. Пункт 9 повторить для каждой следующей части.
11. '> для завершения определения частей.
12. <FRAME для того чтобы привязать каждый фрейм с конкретным html-файлом.
13. NAME='name'
где name - любое слово латинскими буквами, которое будет именем этого фрейма. Это имя понадобится в последующих шагах. Примеры имен: fr_top, contents, banner.
14. src='content.htm'
где content.htm - это URL веб-страницы, которая должна отображаться в этом фрейме.
15. > для завершения определения фрейма.
16. Пункты 12-15 повторить для каждого из фреймов, которые были определены в пунктах 8-11.
17. </FRAMESET>
Примечание. В файле фреймсета нет тега <BODY>.
Итак, код файла index.htm:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>
Мой сайт: Три горизонтальных фрейма
</TITLE>
</HEAD>
<FRAMESET ROWS="50,*,50">
<FRAME NAME='fTop' src='top.htm'>
<FRAME NAME='fMiddle' src='middle.htm'>
<FRAME NAME='fBottom' src='bottom.htm'>
</FRAMESET>
</HTML>
Все четыре файла index.html, top.htm, middle.htm и bottom.htm должны находиться в одном каталоге.
Откройте в браузере файл index.htm.
Теперь создадим страницу, которая состоит из трех независимых вертикальных частей. Для этого Вам нужно создать три веб-страницы с любым содержанием и назвать их left.htm, center.htm и rigth.htm. Теперь создайте пустой html-файл и назовите его index2.htm.
Для создания такого фреймсета нужно в файле index2.htm набрать:
1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
2.<HTML>
3. <HEAD>
4. <TITLE>
5. Текст заголовка
6. </TITLE>
7. </HEAD>
8. После строки с тегом </HEAD>:
<FRAMESET COLS='a
где a ширина первой части. Ширину можно задать процентами (%) или точно в пикселях. Также a можно присвоить звездочку (*), что делает зависимой ширину этой части от ширины других частей фреймсета.
9. ,b, где b – ширина второй части. Ширину можно задать процентами (%) или точно в пикселях. Также b можно присвоить звездочку (*), что делает зависимой высоту этой части от ширины других частей фреймсета.
10. Пункт 9 повторить для каждой следующей части.
11. '> для завершения определения частей.
12. <FRAME для того чтобы привязать каждый фрейм с конкретным html-файлом.
13. NAME='name'
где name - любое слово латинскими буквами, которое будет именем этого фрейма. Это имя понадобится в последующих шагах. Примеры имен: fr_left, f_center, right_frame.
14. src='content.htm'
где content.htm - это URL веб-страницы, которая должна отображаться в этом фрейме.
15. > для завершения определения фрейма.
16. Пункты 12-15 повторить для каждого из фреймов, которые были определены в пунктах 8-11.
17. </FRAMESET>
Итак, код файла index2.htm:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>
Мой сайт: Три вертикальных фрейма
</TITLE>
</HEAD>
<FRAMESET COLS="150,*,150">
<FRAME NAME='fLeft' src='left.htm'>
<FRAME NAME='fCenter' src='center.htm'>
<FRAME NAME='fRight' src='right.htm'>
</FRAMESET>
</HTML>
Пример фреймсета, в котором существуют как строки, так и столбцы:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>
Мой сайт: Работа с фреймами
</TITLE>
</HEAD>
<FRAMESET ROWS="50,*">
<FRAME NAME='fTop' src='top.htm'>
<FRAMESET COLS="200,*">
<FRAME NAME='fLeft' src='left.htm'>
<FRAME NAME='fCenter' src='center.htm'>
</FRAMESET>
</FRAMESET>
</HTML>
Другой пример фреймсета, в котором существуют как строки, так и столбцы:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>
Мой сайт: Работа с фреймами
</TITLE>
</HEAD>
<FRAMESET COLS="200,*">
<FRAME NAME='fLeft' src='left.htm'>
<FRAMESET ROWS="150,*,150">
<FRAME NAME='fLeft' src='left.htm'>
<FRAME NAME='fCenter' src='center.htm'>
<FRAME NAME='fRight' src='right.htm'>
</FRAMESET>
</FRAMESET>
</HTML>
Примечание. HTML5 не поддерживает теги FRAMESET и FRAME. Для совместимости с HTML5 можно воспользоваться тегом IFRAME.
