Оглавление

10.1. Разделение окна Web-браузера на несколько областей

Обычно заголовок и панель навигации для всех страниц сайта содержат одну и ту же информацию, а изменяется только основное содержание страниц. С помощью фреймовой структуры можно заголовок поместить в одно окно, панель навигации — во второе, а основное содержание страницы — в третье. Это позволит, оставляя в неизменном состоянии два первых окна, изменять содержание третьего.
Попробуем создать Web-страницу с такой структурой. Для этого создадим 5 файлов:
  -   doc1.html (листинг 11) — заголовок Web-страницы;
  -   doc2.html (листинг 12) — панель навигации;
  -   chapter1 .html (листинг 13) — содержание главы 1;

  -   chapter2.html (листинг 14) — содержание главы 2;
  -   test.html (листинг 15) — HTML-документ, описывающий фреймовую структуру.

 

Листинг 11. HTML-документ, содержащий заголовок (doc1.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
             "http://www.w3.org/TR/html4/strict,dtd">
<html>
<head>
<title>Заголовок</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<h1>Заголовок</h1>
</body>
</html>

 

Листинг 12. HTML-документ, содержащий панель навигации (doc2.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Панель навигации</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<h3>Оглавление</h3>
<ul>
<li><a href="chapterl.html"  target="chapter">Глава l</a></li>
<li><a href="chapter2.html"  target="chapter">Глава 2</a></li>
</ul>
</body>
</html>

 

Листинг 13. HTML-документ, в котором находится основное содержание главы 1 (chapter1.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
             "http://www.w3.org/TR/html4/strict,dtd">
<html>
<head>
<title>Глава l</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<h1>Глава l</h1>
<p>Содержание главы 1</p>
</body>
</html>

Листинг 14. HTML-документ, в котором находится основное содержание главы 2 (chapter2.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
             "http://www.w3.org/TR/html4/strict,dtd">
<html>
<head>
<title>Глава 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<h1>Глава 2</h1>
<p>Содержание главы 2</p>
</body>
</html>

 

Листинг 15. HTML-документ, описывающий фреймовую структуру (test.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
             "http://www.w3.org/TR/html4/strict,dtd">
<html>
<head>
<title>Пример использования фpeймoв</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<frameset rows="100, *">
<frame src="doc1.html" scrolling="no">
<frameset cols="20%, 80%">
<frame src="doc2.html">
<frame src="chapter1.html" name="chapter">
</frameset>
<noframes>
<p>Ваш Web-браузер не отображает фреймы</p>
</noframes>
</frameset>
</html>

 

Все созданные файлы сохраним в одной папке. Затем в Web-браузере откроем файл test.html. Итак, окно разделено на три прямоугольные области. В верхней части окна находится заголовок. В нижней части окна расположены панель навигации (слева) и основная часть документа (справа). При переходе по ссылкам содержимое основной части меняется, а остальные остаются неизменными.
Теперь попробуем изменить цвет фона заголовка. Для этого необходимо отобразить исходный код Web-страницы.
Как нам уже известно, отобразить исходный код обычной Web-страницы можно тремя способами:
  -   в меню Вид выбираем пункт Просмотр HTML-кода;
  -   правой кнопкой мыши щелкаем в любом месте окна Web-браузера. В появившемся контекстном меню выбираем пункт Просмотр HTML-кода;
  -   открываем файл, содержащий исходный код, с помощью Блокнота или другого текстового редактора.

 

Если документ содержит фреймы, результаты первых двух действий будут разными. Первый способ отобразит только код структуры Web-страницы, а не исходный код каждого из HTML-документов. Иными словами, будет отображен исходный код файла test.html. Второй способ позволяет отобразить код лишь одного HTML-документа, а от места щелчка зависит, код какого HTML-документа будет отображен. В нашем случае для отображения исходного кода файла заголовка (doc1.html) необходимо правой кнопкой мыши щелкнуть внутри области, содержащей заголовок. В появившемся контекстном меню нужно выбрать пункт Просмотр HTML-кода.


Заменяем строчку
    <body>
на

    <body style="background-color:#C0C0C0">
сохраняем файл и обновляем Web-страницу. В результате цвет фона заголовка изменится с белого на серый.

Примечания:
  • При использовании фреймов следует учитывать, что поисковые машины при индексации сайтов заносят в свои базы именно отдельные страницы структуры фреймов, а не саму структуру. Это обстоятельство полностью разрушает всю структуру сайта. Ведь если панель навигации расположена на одной странице, а основная часть страницы на другой, то при переходе посетителя с поискового портала он попадает сразу на основную часть, а панель навигации ему не доступна.
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити