Методические указания1_2 (1084715), страница 8
Текст из файла (страница 8)
<FRAMESET cols="22%,78%">
<FRAME src="fr2.htm">
<FRAME src="fr3.htm" scrolling="yes" marginwidth="10"
marginheight="75">
</frameset>
<FRAME src="fr4.htm">
</frameset>
</html>
В данном примере экран делится на четыре части, как показано на рис. 3.14.
Рис. 3.14. Шаблон Web-страницы с фреймами
Для верхней части страницы запрещено удаление с экрана, а для правой в обязательном порядке создаются полосы прокрутки. Обратите внимание, что для одновременного деления области просмотра по вертикали и по горизонтали следует создать вложенный элемент FRAMESET.
Левую часть страницы делают, как правило, узкой и размещают на ней ссылки или индекс.
<NOFRAMES> </noframes>
Этот элемент используется для того, чтобы предусмотреть ситуацию, когда браузер не поддерживает фреймы. В этом случае надо вывести на экран предупреждающее сообщение или адресовать клиента к другой странице. Фрагмент кода может быть написан следующим образом.
Листинг 3.2. Шаблон страницы с элементом NOFRAMES
<HTML>
<HEAD>
<TITLE>Текст 3aгoловок</title>
</head>
<FRAMESET cols="nn%, mm%">
<FRAME src="Страница1. htm">
<FRAME src=" Страница2.htm">
<NOFRAMES>
<P>Для просмотра этой страницы необходим браузер,
поддерживающий фреймы</p>
<P>Вы можете посмотреть
<A href="Бeз-фpeймoв.htm"> упрощенную версию </a> страницы</p>
</noframes>
</frameset>
</html>
Разумеется, браузеры, поддерживающие фреймы, не станут воспроизводить информацию из секции NOFRAMES.
Организация переходов по фреймам
В качестве примера рассмотрим несколько взаимосвязанных страниц (рис. 3.15). Пусть основная страница (Main.htm) не имеет фреймов, а две другие построены по стандартному принципу: слева меню, справа информация. Конфигурацию фреймов в нашем случае задает файл Framel.htm. Такую структуру имеют многие сайты. Кроме того, «цепочки» страниц удобно использовать для создания виртуальных книг, галерей изображений, то есть там, где пользователю требуется последовательно просматривать ряд страниц, В данном случае важно правильно организовать ссылки.
Ниже приведены листинги используемых файлов.
Main.htm ![]() | |
| Right1. htm |
Frame1.htm | |
| Right2. htm |
Рис. 3.15. Схема переходов по страницам
Листинг 3.3. Файл Main.htm
<HTML>
<HEAD>
<TITLE>Основная страница</title>
</HEAD>
<BODY bgcolor="aqua">
<H2>Основная страница</h2>
<HR>
<A href="frame1.htm"> Следующая страница </a>
<HR>
</body>
</html>
Листинг 3.4. Файл Frame1.htm
<HTML>
<HEAD>
<TITLE>Заголовок для фреймов</title>
</head>
<FRAMESET frameborder=1 framespacing=5 cols="160,*">
<FRAME name="menu01" scrolling=AUTO src="m1.htm">
<FRAME name="info01" src="right1.htm">
<NOFRAMES>
<P>Ваш броузер не поддерживает фреймы
</noframes>
</frameset>
</html>
Листинг 3.5. Файл Ml. htm
<HTML>
<HEAD>
<TITLE>Левый фрейм</title>
</head>
<BODY text="black" bgcolor="gold" link="green" vlink="purple" alink="red" >
<H3>Меню</h3>
<HR>
<A target=_parent href="main.htm" > Основная </a>
<A target="info01" href="right1.htm" > Правый 1 </a>
<A target="info01" href="right2.htm" > Правый 2 </a>
<HR>
</body>
</html>
Листинг 3.6. Файл Right1.htm
<HTML>
<HEAD>
<TITLE>Правый фрейм</title>
</head>
<BODY text="black" bgcolor=#C0C4D0 link="green" vlink="purple" alink="red">
<H2> Правый фрейм № 1 </h2>
<A href=main.htm target=_parent> Предыдущая страница </a>
<A href=right2.htm> Следующая страница </a>
<HR>
</body>
</html>
Листинг 3.7. Файл Right2.htm
<HTML>
<HEAD>
<TITLE>Правый фрейм</title>
</head>
<BODY text="black" bgcolor=#9AC159 link="blue" vlink="purple" alink="red">
<H2>Правый фрейм № 2</h2>
<HR>
<A href=right1.htm> Предыдущая страница </a>
<A href=main.htm target=_parent> Основная страница </a>
<HR>
</body>
</html>
Теперь разберем, как организованы ссылки. Гиперссылка на основной странице (Main.htm) указывает на документ раскладки: файл Frame1.htm. Он не содержит полезной информации, но позволяет задать размеры областей и указать необходимые документы содержания.
Здесь важно, что каждому фрейму дается имя при помощи атрибута name, например:
name="info01"
Страницы, показываемые внутри фрейма, могут быть разными, а имя останется постоянным и будет использовано в гиперссылках. В левом фрейме демонстрируется страница m1.htm, которая выполняет функции меню: с его помощью можно вернуться на основную страницу или выбрать страницу для правого фрейма: в нашем примере их две, но можно использовать любое количество. Левый фрейм сделан более узким (рис. 3.16).
Рис. 3.16. Просмотр файлов m1.htm и Rightl.htm
Обратите внимание, что в строке заголовка браузера присутствует заголовок из файла Framel.htm. Это единственная информация из этого файла, которую мы увидим на экране, но зато все данные из элементов TITLE других страниц будут скрыты.
В реальной задаче файлы Rightl.htm и Right2.htm должны быть заполнены полезной информацией. Кроме нее для удобства пользователя можно разместить ссылки типа «переход к следующей странице», «переход к предыдущей странице», «переход к основной странице». Часто такие ссылки выполняются в виде пиктограмм.
В нашем примере используется два независимых способа передвижения по страницам: при помощи ссылок в меню (левом фрейме) и при помощи ссылок в информативных документах (правом фрейме).
Файл ml.htm содержит три гиперссылки. Первая ведет на страницу без фреймов, поэтому в ней обязательно должен быть указан атрибут target со значением _parent. В противном случае при переходе возникла бы ошибка: было бы открыто еще одно окно браузера или страница Main.htm оказалась бы внутри фрейма. В общем случае шаблон гиперссылки такой:
<А target=_parent href="Имя.htm"> Текст подсказки </а>
Другие значения атрибута target:
• _self — как будто атрибута target нет, то есть страница открывается внутри текущего фрейма;
• _top — то же, что и _рагеnt;
• _blank — открытие еще одного окна браузера и показ страницы в нем.
Две другие ссылки позволяют менять содержимое правого фрейма, оставляя левый неизменным. Здесь важно указать атрибут target с именем правого фрейма (используем ссылку в одном фрейме, а страницу загружаем в другой):
target="info01"
На страницах Rightl.htm и Right2.htm гиперссылки построены по такому же принципу, но их синтаксис зависит от того, на страницу какого типа следует выполнить переход. Для перехода на страницу без фреймов используется атрибут:
target=_parent
Для перехода на «следующую» («предыдущую») страницу внутри текущего фрейма атрибут target не нужен: действует правило умолчания.
ПРИМЕЧАНИЕ
Файлы Main.htm, Framel.htm, Ml.htm, Rightl.htm и Right2.htm имеются на прилагаемой дискете.
<IFRAME> </iframe>
Этот элемент позволяет создать на странице область с полосами прокрутки (inline frame) для демонстрации содержимого другой страницы. Шаблон для использования элемента (просмотра файла Имя файла, htm) такой:
<IFRAME src="Имя файла.htm" width="nnn" height="mmm">
Ваш броузер не поддерживает фреймы. Эту страницу можно просмотреть
<А href="Имя файла.htm">отдельно. </а>
</iframe>
Атрибуты width и height определяют ширину и высоту фрейма соответственно. Если атрибуты не указаны, используется окно размером 300х150 пикселов.
Атрибут scrolling управляет полосами прокрутки и может иметь следующие значения:
• auto — браузер определяет необходимость показа полос;
• yes — показ полос прокрутки (вертикальной — обязательно);
• no — без полос прокрутки.
Можно использовать атрибуты target и frameborder, а также другие атрибуты стандартных фреймов:
longdesc="URL"
паmе="имя фрейма"
4. Объекты и формы
Достаточно трудно определить, что на самом деле является объектом, а что нет. Можно утверждать, что обычный текст объектом не является. С другими деталями документов дело обстоит сложнее. Строго говоря, объектами являются горизонтальные линии, таблицы и окна. Но в HTML существует понятие объекта как некой нестандартной части Web-страницы, которую определил пользователь. К объектам, например, относятся рисунки. Другая большая группа объектов — программы. При помощи программных кодов создаются нестандартные детали; страниц. Для их включения в состав страницы используется универсальный элемент OBJECT.
4.1. Общие атрибуты объектов
Элементы объектов (IMG, OBJECT, APPLET) позволяют использовать общие атрибуты align, border, width, height, hspace, vspace и ряд стандартных атрибутов.
Как правило, объект занимает прямоугольную область на экране, поэтому одним из самых полезных является атрибут, который определяет ширину рамки (border):
border=число пикселов
Рамка нужна не только для красоты. Если объект используется внутри элемента А, то изменение цвета рамки позволяет отличить пройденную гиперссылку от нетронутой.
Размеры объекта можно задавать так:
height=высота в пикселах
и
width=ширина в пикселах
Можно использовать атрибуты выравнивания:
• align="bottom" — по нижнему краю;
• align="left" — влево;
• align="middle" — по центру;
• align=" right" — вправо;
• align="top" — по верхнему краю.