Пример 11
<
HTML>
<HEAD>
<TITLE>Пример 11</TITLE>
</HEAD>
<BODY> <H1>Несколько более сложная форма </H1>
<FORM ACTION="http://win_pp.php" METHOD=post>
<H2>Расскажите немного о себе...</H2>
<P>Указывать подлинные данные совсем не обязательно.
Для целей демонстрации вполне подойдут и вымышленные.
</P>
<P>Имя: <INPUT TYPE=text SIZE=40 NAME=fn><BR>
Фамилия: <INPUT TYPE=text SIZE=40 NAME=ln><BR>
Пол: <INPUT TYPE=radio NAME=gender VALUE="male"
checked>мужской
<INPUT TYPE=radio NAME=gender VALUE="female">женский<BR>
Возраст: <INPUT TYPE=text SIZE=5 NAME=age> лет<BR>
<INPUT TYPE=submit VALUE="Запустить обработчик"></P>
</FORM>
</BODY>
</HTML>
HTML предоставляет в распоряжение довольно мощный механизм пересылки содержимого форм по электронной почте.
Изменим Пример 11. Вместо строки
<FORM ACTION="http://win_pp.php" METHOD=post>
введем строку
<FORM ACTION="mailto:user@mail.box" ENCTYPE=text/plain METHOD=post>
Обратите внимание, что мы изменили алгоритм кодирования на text/plain, то есть фактически выключили кодирование вообще.
Пользователь указал имя Иван, фамилию Петров, мужской пол и возраст 22 года. Теперь на адрес user@mail.box электронной почтой автоматически будет отправлено сообщение следующего содержания:
fn=Иван
ln=Петров
gender=male
age=22
8. Фреймы
Фреймы позволяют открыть в окне браузера - не один, а сразу несколько документов. Допустим,
-
документ menu.html содержит меню,
-
logo.html содержит логотип и шапку страницы,
-
content.html – документ с непосредственным содержанием сайта.
Для того чтобы браузер показал одновременно несколько документов, надо создать специальный фрейм-документ.
Создадим документ index.html.
Фрейм-документ не содержит тэга body, обязательного в других случаях:
<html> <head> <title> Страница с фреймами </title> <frameset></frameset> </head> </html>
|
logo |
|
content |
|
menu |
|
logo |
|
|
menu |
content |
|
logo |
menu |
content |
|
logo |
content |
|
menu |
|
logo |
|
content |
|
menu |
<head>
<title> Страница с фреймами </title>
<frameset rows="100,*,150">
<frame src="logo.html">
<frame src="content.html">
<frame src="menu.html">
</frameset>
</head>
</html>
Параметр rows="100, *, 150 " задает разделение на несколько рядов (строк). Высота первого ряда – 100 пикселей, третьего – 150, а второй занимает все оставшееся пространство.
Тег frame сообщает браузеру, какие документы будут в каждом ряду (строке). Первый ряд – logo.html, второй ряд – content.html, а третий – меню.
Если хотите, чтобы меню было во втором ряду, следует поменять его местами с content.html.
<html> <head> <title> Страница с фреймами </title> <frameset rows="100,*,150"> <frame src="logo.html"> <frame src="menu.html"> <frame src="content.html"> </frameset> </head> </html>
Теперь надо задать новые значения параметру rows, чтобы меню снова занимало только 150 пикселей по высоте, а содержание – все остальное:
<html> <head> <title> Страница с фреймами </title> <frameset rows="100,150,*"> <frame src="logo.html"> <frame src="menu.html"> <frame src="content.html"> </frameset> </head> </html>
Заменим теперь параметр rows, на cols:
|
logo |
menu |
content |
<head>
<title> Страница с фреймами </title>
<frameset cols="100,150,*">
<frame src="logo.html">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</head>
</html>
Параметр cols делит окно браузера не на ряды, а на колонки. Первая колонка имеет ширину 100 пикселов, вторая – 150, а третья занимает все оставшееся место".
Ширина и высота могут задаваться не только в пикселях, но и в процентах от общей ширины (высоты) окна:
<frameset cols="10%,15%,75%">
Следующий вариант расположения. В первом ряду будет располагаться logo.html, а второй ряд мы поделим на две колонки, в которых будут располагаться документы menu.html и content.html.
|
logo |
|
|
menu |
content |
<head>
<title> Страница с фреймами </title>
<frameset rows="100,*">
<frame src="logo.html">
<frameset cols="150,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</frameset>
</head>
</html>
С помощью параметра cols тега <frameset></frameset> мы делим второй ряд на две колонки (первая шириной 150 пикселей, вторая по ширине занимает все оставшееся пространство).
Следующий вариант расположения.
Будем делить окно на колонки. Вторая колонка будет содержать документ content.html, а первую колонку разобьем на два ряда и поместим в них документы logo.html и menu.html.
|
logo |
content |
|
menu |
<head>
<title> Страница с фреймами </title>
<frameset cols="100,*">
<frameset rows="100,*">
<frame src="logo.html">
<frame src="menu.html">
</frameset>
<frame src="content.html">
</frameset>
</head>
</html>
Удаление полосы прокрутки (скроллинга) во фрейме с logo.html.
<html> <head> <title> Страница с фреймами </title> <frameset cols="100,*"> <frameset rows="100,*"> <frame src="logo.html" scrolling="no"> <frame src="menu.html"> </frameset> <frame src="content.html"> </frameset> </head> </html>
Scrolling – параметр тега <frame>. Он может принимать несколько значений:
-
no – не будет полосы прокрутки;
-
yes – полоса прокрутки будет всегда;
-
auto – полоса прокрутки появиться только тогда, когда она нужна.
Удаление рамок между фреймами
Для этого используем параметр border="0".
<html> <head> <title> Страница с фреймами </title> <frameset cols="100,*" border="0"> <frameset rows="100,*"> <frame src="logo.html" scrolling="no"> <frame src="menu.html"> </frameset> <frame src="content.html"> </frameset> </head> </html>
Изменение полей
<html> <head> <title> Страница с фреймами </title> <frameset cols="100,*" border="0"> <frameset rows="100,*"> <frame src="logo.html" scrolling="no" marginwidth="0" marginheight="0"> <frame src="menu.html"> </frameset> <frame src="content.html"> </frameset> </head> </html>
Marginheight определяет ширину (в пикселях) верхнего и нижнего полей фрейма, а marginwidth определяет ширину левого и правого полей фрейма. В примере мы избавились от полей во фрейме, содержащим logo.html, задав значение marginheight и marginwidth = 0.
Загрузка страниц в определенные фреймы
Параметр name задает имя для фрейма документа content.html.
<html> <head> <title> Страница с фреймами </title> <frameset cols="100,*" border="0"> <frameset rows="100,*"> <frame src="logo.html" scrolling="no" marginwidth="0" marginheight="0"> <frame src="menu.html"> </frameset> <frame src="content.html" name="window"> </frameset> </head> </html>
Имя фрейма может быть в дальнейшем использовано для ссылки на него из других документов (фреймов) с помощью параметра тэга <А> TARGET (target="имя_фрейма").
Обратимся к документу menu.html.
Для каждой ссылки укажем параметр target="window", где window – имя фрейма, в котором располагается документ content.html.
<html> <head> <title>Документ с Меню</title> <body>
<a href="content.html" target="window">Главная</a> <a href="1.html" target="window">Биография</a> <a href="2.html" target="window">О семье</a>
</body> </head> </html>
Чтобы документ открылся в новое окно, надо параметру target задать значение top:
<a href="project.html" target="top">Мой проект</a>
Страница с проектом откроется в новое полное окно.