Second_magistr / ВЕБ-програм / методичка
.pdfHTML и VBScript |
23 |
Основная идея использования фреймов состоит в том, чтобы разделить окно просмотра на несколько частей, и загрузить в каждую из них отдельные HTML-документы. Каждая из областей (фреймов, или кадров) может содержать свои полосы прокрутки и просматриваться независимо. Цель такого разделения – в том, чтобы зафиксировать на странице некоторую информацию независимо от того, какая часть документа просматривается. Такие постоянные детали страницы используются для размещения заголовков, логотипов, подсказок, ссылок на другие страницы сайта и т.д. Пример Web-страницы с фреймами показан на рис. 5.1.
Для создания сложной страницы с фреймами разрабатывается несколько HTML-файлов. Документ раскладки (layout) используется для определения общей структуры страницы, то есть ее разделения на области. Документы содержания (content) предназначены для заполнения информацией каждой из областей.
Файл раскладки сложной Web-страницы должен содержать теги <FRAMESET> – </frameset>. Атрибуты этого элемента управляют расположением и размерами фреймов. Внутри <FRAMESET> располагается несколько элементов <FRAME>, которые связывают каждую область просмотра с определенным файлом содержания. Теги <FRAMESET> и <FRAME> в файле раскладки должны распо-
лагаться за пределами блока <BODY> (до него).
Рассмотрим пример создания файла раскладки. Для начала необходимо продумать разбиение экрана на области. Горизонтальное деление экрана задается при помощи атрибута cols, вертикальное – атрибута rows. Значения атрибутов могут быть выражены в пикселах или процентах. Кроме того, используется символ * для обозначения оставшейся части экрана. Несколько примеров:
– левая вертикальная область в три раза уже правой (стандартный стиль для Internet);
– верхняя горизонтальная область – 150 пикселов, средняя – 30% доступного пространства, нижняя – все остальное;
– правая вертикальная область в четыре раза шире левой области.
Вторым этапом является подготовка HTML-файлов для каждой из областей (документов содержания). Они создаются по тем
24
же правилам, что и другие HTML-документы. Нужно только учитывать размер области, в которой они будут отображены.
Далее в файле раскладке внутри элемента FRAMESET необходимо указать ссылки на все документы содержания. Делается это с помощью атрибута src элемента FRAME:
<FRAME src=“имя_файла.htm”>
Элемент FRAME имеет ряд дополнительных атрибутов. Атрибут scrolling управляет прокруткой внутри какой-либо из областей. Он может принимать значения YES (полосы прокрутки создаются в обязательном порядке), NO (прокрутка запрещена) и AUTO (полосы появляются тогда, когда это необходимо – это значение установлено по умолчанию). После загрузки всех страниц пользователь получает возможность изменять мышью размеры фрейма. Атрибут noresize запрещает делать это для определенного фрейма.
Рассмотрим пример. Создадим файлы top.htm, left.htm и right.htm следующего содержания:
top.htm:
<HTML>
<BODY bgcolor=“white”>
<H1 align=“center”>Верхняя часть страницы</h1> <CENTER><I>
Обычно содержит название проекта или организации
</i></center>
</body>
</html>
left.htm:
<HTML>
<BODY bgcolor=“yellow”>
<H1 align=“center”>Левая часть</h1>
<I>Область слева как правило содержит ссылки на все документы данного сайта. Ссылки часто организованы в виде списка или таблицы. Пользователь получает возможность видеть структуру сайта и быстро переходить от одного документа к другому. Ниже приведен пример</i> <UL>
<LI><A href=“struct.htm”>Ссылка 1</a> <LI><A href=“format.htm”>Ссылка 2</a> <LI><A href=“hlink.htm”>Ссылка 3</a> <LI><A href=“lists.htm”>Ссылка 4</a>
</ul>
</body>
HTML и VBScript |
25 |
</html>
right.htm:
<HTML>
<BODY bgcolor=“white”>
<H1 align=“center”>Правая часть страницы</h1>
<I>Область справа обычно используется для отображения активного HTML-документа. В конце документа часто имеется ссылка на e-mail адрес Web-мастера и дата последней модификации сайта.</i> <HR>
Last update: February 1, 2000. For comments contact to
<A href=“mailto:someone@address.city.ru”>Web-master</a>. </body>
</html>
Эти документы будут заполнять отдельные фреймы сложной страницы. Далее создадим файл раскладки:
main.htm:
<HTML>
<HEAD> <TITLE>Фреймы</title>
</head>
<FRAMESET rows=“20%, 80%”> <FRAME src=“top.htm” noresize> <FRAMESET cols=“25%, 75%”>
<FRAME src=“left.htm”>
<FRAME src=“right.htm” scrolling=“yes”> </frameset>
</frameset>
<BODY>
</body>
</html>
Как видно из описания, окно просмотра делится на три части. Для верхней области запрещено изменение границ, а для правой в обязательном порядке создаются полосы прокрутки. Обратите внимание, что для одновременного деления области просмотра по вертикали и горизонтали следует создать вложенный элемент
FRAMESET.
Загрузим файл main.htm в Internet Explorer. Вид страницы в окне браузера показан на рис. 5.1. При изменении размеров окна просмотра можно увидеть, что размеры фреймов будут также изменяться пропорционально. В HTML имеется возможность зафик-
26
сировать размер одного или нескольких фреймов. Для этого в атрибуте rows (или cols) необходимо указать размер соответствующей области в пикселах, а не в процентах.
Попробуйте активизировать ссылки в левом кадре. При этом происходит загрузка нового документа в левую часть экрана. Однако нашей задачей является загрузка нового файла в правую часть окна, которая специально выделена для этой цели.
Рис. 5.1. Cтраница с фреймами
Данная задача решается следующим образом. Сначала каждой из областей сложной страницы с помощью атрибута name тега FRAME присваивается некоторое имя. Внесем в файл main.htm следующие добавления (они выделены полужирным шрифтом):
main.htm:
HTML и VBScript |
27 |
<HTML>
<HEAD>
<TITLE>Фреймы №1</title> </head>
<BODY>
<FRAMESET rows=“20%, 80%”>
<FRAME src=“top.htm” name=“top” noresize> <FRAMESET cols=“25%, 75%”>
<FRAME src=“left.htm” name=“left”>
<FRAME src=“right.htm” name=“right” scrolling=“yes”> </frameset>
</frameset>
</body>
</html>
Далее с помощью атрибута target тега <A> определим, в какую область окна будет направляться вывод нового документа HTML. Для этого внесем изменения в файл left.htm:
left.htm:
<HTML>
<BODY bgcolor=“yellow”>
<H1 align=“center”>Левая часть</h1>
<I>Область слева как правило содержит ссылки на все документы данного сайта. Ссылки часто организованы в виде списка или таблицы. Пользователь получает возможность видеть структуру сайта и быстро переходить от одного документа к другому. Ниже приведен пример</i> <UL>
<LI><A href=“struct.htm” target=“right”>Ссылка 1</a> <LI><A href=“format.htm” target=“right”>Ссылка 2</a> <LI><A href=“hlink.htm” target=“right”>Ссылка 3</a> <LI><A href=“lists.htm” target=“right”>Ссылка 4</a>
</ul>
</body>
</html>
Если теперь загрузить основной документ main.htm в браузер и активизировать ссылку на левом фрейме, то новый документ будет загружен в правую часть окна просмотра.
ЗАДАНИЕ :
Разработайте сайт, содержащий Web-страницу с фреймами. По аналогии с последним примером организуйте основную страницу, с
28
которой можно поочередно просмотреть содержимое всех документов сайта. Ссылки на документы расположите в отдельном фрейме. В качестве примера можно взять некоторый текст, разбить его на разделы, и записать каждый из разделов в отдельном HTMLдокументе.
ЛАБОРАТОРНАЯ РАБОТА № 6
Формы
Формы введены в язык HTML для организации диалога с пользователем. С помощью этих конструкций Web-сервер имеет возможность получать информацию от пользователя (его анкетные данные, заявки и т.д.). Поисковые серверы также позволяют проводить поиск в Internet с использованием полученных от клиента ключевых слов или фраз.
Форма может содержать строки для ввода текстовой инфор-
мации (input lines), переключатели (radiobuttons), флажки
(checkboxes), списки выбора (listboxes), а также специальные кнопки для подтверждения или отмены введенной информации.
После того как форма заполнена пользователем и нажата кнопка подтверждения ввода, имеется две возможности: 1) браузер может отослать введенные данные на сервер для обработки специ-
альной CGI-программой (common gateway interface - CGI), связан-
ной с формой; 2) он может переслать данные по электронной почте. Мы не будем касаться вопросов программирования CGI, при необходимости их можно легко найти в литературе или в Интернет. Рассмотрим вариант пересылки введенных данных по электронной почте. Для проверки правильности функционирования формы нам потребуется, чтобы на компьютере было установлено программное обеспечение для электронной почты (для этой цели будет достато-
чен Outlook Express, поставляемый с ОС Windows).
Форма организуется с помощью тегов <FORM> – </form>. В атрибуте action стартового тега укажем e-mail адрес, по которому будут отосланы данные после подтверждения ввода, например:
action=“mailto:admin@volsu.ru”
HTML и VBScript |
29 |
Атрибут method этого же тега применяется для указания протокола, применяемого для пересылки данных. По умолчанию выбран протокол GET, но в большинстве случаев удобнее использовать протокол POST. Атрибут enctype указывает на способ кодировки содержимого (мы будем использовать “text/plain”). Запись тегов формы, к примеру, может выглядеть так
<FORM action=“admin@volsu.ru” method=post enctype=“text/plain”>
...описание деталей формы...
</form>
<INPUT>
Большинство деталей формы организуется с помощью элемента INPUT. Атрибут type определяет вид элемента. Его возможные значения:
type=“text” – создание текстового поля ввода. type=“password” – создание строки для ввода пароля. От обычного
текстового поля отличается тем, что вводимая информация отображается звездочками.
type=“checkbox” – создание флажка.
type=“radio” – определение одного переключателя. Для создания группы переключателей используются несколько элементов INPUT.
type=“hidden” – скрытый от пользователя элемент. Предназначен для включения в набор данных некоторой фиксированной информации.
type=“submit” – создание кнопки, нажатие на которую подтверждает ввод информации в форму. type=“reset” – кнопка, используемая для отмены ввода
информации (очистка формы).
Каждому из элементов INPUT должно быть присвоено имя (атрибут name), которое в дальнейшем будет использоваться при отправке заполненной формы по e-mail. К примеру, если текстовое поле ввода было описано с атрибутом name=“Address”, и в момент нажатия кнопки подтверждения содержало строку “Baker Street 13,
London”, то в отправленном по |
электронной почте письме будет, |
|||
в |
частности, |
содержаться |
следующая |
информация: |
Address=Baker Street 13, London. |
|
|
||
30
Теперь рассмотрим каждый из элементов подробнее. Простая строка ввода создается с помощью записи type=“text”. В строке можно заранее разместить произвольный текст, используя атрибут value. Длина
поля ввода (количество символов) задается атрибутом size. Пример
<H3>Введите слово</h3>
<INPUT type=“text” name=“Search” value=“Слово”>
Для создания группы переключателей необходимо использовать несколько элементов INPUT с атрибутом type=“radio”. Для того чтобы они могли работать совместно, все они должны использовать одно и то же имя (к примеру, name=“Имя”). Кроме того, каждому из элементов необходимо задать атрибут value=значение. Если в момент нажатия кнопки подтверждения элемент оказался выбранным, то в отправляемом сообщении будет содержаться строка Имя=значение. Вот пример группы из трех переключателей:
<H3>Выберите Ваш вариант</h3>
<INPUT type=“radio” name=“Choice” value=“first”> Вариант 1<BR>
<INPUT type=“radio” name=“Choice” value=“second” checked> Вариант 2<BR> <INPUT type=“radio” name=“Choice” value=“third”> Вариант 3<BR>
Обратите внимание на использование атрибута checked для индикации того, какой из элементов будет выбранным по умолчанию при загрузке страницы. Вид группы переключателей в окне браузера показан на рис. 6.2. На рисунке выбран
элемент с атрибутом value=“second”, поэтому при нажатии на кнопку “submit” в почтовое сообщение будет введена строка
Choice=second.
В отличие от группы переключателей, из которых может быть выбран только один элемент, флажки (checkboxes) могут быть отмечены независимо друг от друга. В определении флажка атрибут name также задает имя элемента, а атрибут checked определяет его состояние – отмеченное (checked) или нет:
HTML и VBScript |
31 |
<H3>Установите нужные флаги</h3>
<INPUT type=“checkbox” name=“Flag1” checked> Флаг 1 <BR> <INPUT type=“checkbox” name=“Flag2”> Флаг 2 <BR> <INPUT type=“checkbox” name=“Flag3” checked> Флаг 3 <BR>
Группа из трех флагов изображена на рис. 6.3.
При |
отправке |
почтового |
|
|
сообщения браузер добавит |
|
|||
в него строки имя=on для |
|
|||
каждого отмеченного |
эле- |
|
||
мента (в приведенном при- |
|
|||
мере: |
Flag1=on |
и |
Рис. 6.3. Группа флагов |
|
Flag3=on). |
|
|
|
|
|
Как было сказано выше, каждая форма может иметь кнопки |
|||
подтверждения |
ввода |
(type=“submit”) и очистки формы |
||
(type=“reset”). По умолчанию эти кнопки имеют соответствующие подписи Submit и Reset. Изменить подписи по умолчанию можно с помощью атрибута value:
<INPUT type=“submit” value=“Ok”> <INPUT type=“reset” value=“Cancel”>
<SELECT> <OPTION> </select>
Еще один элемент, часто встречающийся в формах, — список выбора SELECT. В стартовом теге этого элемента могут быть заданы три атрибута. Атрибут name определяет имя элемента. При помощи атрибута multiple пользователю разрешается выбирать сразу несколько пунктов списка. Атрибут size определяет количество видимых на экране пунктов списка. Когда size не задан, список выглядит следующим образом: вначале видна только первая строка, а позиционирование на ней указателя мыши раскрывает все пункты меню. Когда значение атрибута size задано жестко, список не раскрывается, а прокручивается, причем пользователь видит только указанное в size число строк.
Элемент OPTION используется для создания отдельного пункта в списке SELECT. Он имеет два атрибута. Первый – selected
– определяет, какой из пунктов будет выбран по умолчанию. Отмеченным может быть только один из элементов OPTION. Другой атрибут – value – необходим при отправке данных по почте. При
32
этом отправляемая строка формируется следующим образом:
Имя=Значение, где Имя – атрибут name списка SELECT, Значение
– атрибут value отмеченного пункта OPTION. Приведем пример:
<H3>Список SELECT <SELECT name=“choice”> <OPTION value=“first”> Пункт 1
<OPTION value=“second”> Пункт 2 <OPTION value=“third”> Пункт 3 <OPTION value=“fourth”> Пункт 4 </select></h3>
На рис. 6.4 показано отображение этого списка. Так как в списке выделен третий пункт, то при нажатии кнопки Submit браузер добавит в почтовое сообщение строку choice=third. В приведенном примере ни один из пунктов не отмечен как selected, поэтому при загрузке
страницы по умолчанию будет выделен первый пункт.
<TEXTAREA> </textarea>
При помощи элемента TEXTAREA создается область для просмотра и редактирования текста. Размеры области задаются атрибутами rows (количество строк) и cols (число символов в строке). Назначение атрибута name такое же, как и в предыдущих случаях. Между стартовым и конечным тегами может быть помещен некоторый текст, который будет отображен в области ввода при загрузке страницы. Пример:
<H3>Элемент TEXTAREA
<TEXTAREA name=“notes” rows=3 cols=30>
Область для ввода и редактирования текста
</textarea></h3>