Лекции (989962), страница 44
Текст из файла (страница 44)
Заказ книги через Internetмагазин, регистрация на почтовом сервере, запрос на поиск информации – все это требует заполненияразнообразных форм. Internet просто переполнен различными формами. Ниже, в качестве примера,приведен HTML-код формы и показан ее внешний вид.рис. 8.2. Пример создаваемой формы. Ляхевич А.Г., 2000 - 2002 год<FORM method="post" action="http://vino.com/zakaz.asp" name="primer"><P>ФИО <INPUT type="text" name="FIO" size="20">Совершеннолетний <INPUT type="checkbox" name="SovershLetn" value="ON" checked></P><P>Заказ <SELECT size="1" name="zakaz"><OPTION value="Спирт1">Шато Лафит</OPTION><OPTION value="Спирт2" selected>Токайское</OPTION><OPTION value="Спирт3">Дон Пириньон</OPTION></SELECT> </P><P>Форма оплаты <SELECT size="3" name="Raschet" multiple><OPTION selected>Налом</OPTION><OPTION>Безналичный расчет</OPTION><OPTION>Вот он заплатит</OPTION></SELECT> </P>Особые условия заказа <TEXTAREA rows="2" name="Yslovia" cols="24"> Быстро !</TEXTAREA><P><INPUT type="submit" value="Заказать" name="OKbutton"></P></FORM>Здесь тэги и параметры тэгов имеют следующее значение:Таблица 8.4.Тэги создания формы.Тэг<FORM></FORM>MethodActionName<P> </P><INPUT></INPUT><SELECT></SELECT><TEXTAREA></TEXTAREA>ЗначениеНачало и конец формыОпределяет метод, используемый для передачи данных на сервер.Если применяется метод GET, то информация, внесенная в форму пользователем,передается на сервер как часть URL-адреса, в заголовке HTTP-запроса , например:http://vino.com/zakaz.asp?FIO=Иванов&SovershLetn=ON&ZAKAZ=Спирт1&Raschet=НаломЕсли используется метод POST, то информация занесенная в форму, передается насервер в теле HTTP-запроса.Адрес программы на сервере, для которого предназначены занесенные в формуданные.
Обычно это какая-то CGI, ASP или ISAPI программа, способная приниматьотправляемую пользователем информацию и обрабатывать ее.Имя формы в HTML-документе. Необходимо для обращения к форме по ее имени изпрограммы на VBScript или JavaScript.Начало и конец абзаца.Начало и конец элемента управления формы. Имеет следующие параметры:TYPE – указывает один из следующих типов элементов управления: checkbox (флажок),radio(кружок-переключатель), text(поле для ввода текста), password(введенные символызаменяются на ****), hidden(скрытое поле), button(обычная кнопка), reset(кнопка дляочистки формы), submit(кнопка для отправки формы на сервер), image(кнопка submit ввиде рисунка, при отправке формы передаются координаты XY места рисунка накотором щелкнул пользователь).NAME – имя элемента управления, SIZE – длина элемента в символах,VALUE – значение, выбранное пользователем.Задает список/выпадающий список. Имеет следующие параметры:NAME – имя списка, VALUE – значение, выбранное пользователем, SIZE - количествозначений, одновременно отображаемых в списке, MULTIPLY – позволяет выбрать изсписок сразу несколько значений.<OPTION> </OPTION> - элемент списка.<OPTION SELECTED> </OPTION> - элемент списка, выбранный по умолчанию.<OPTION DISABLED> </OPTION> - отключенный элемент списка, отображаетсясерым цветом.Область с полосами прокрутки для ввода большого количества текста.
Имеет следующиепараметры: NAME – имя области текста, ROWS - высота области (строк), COLUMNS ширина области (колонок), WRAP - способ переноса текста в документе (off отключен, virtual – перенос отображается только при вводе в форму, реальносимволы конца строки не вставляются, physical – включен). Ляхевич А.Г., 2000 - 2002 годФреймы в HTMLФреймы делят HTML-страницу на несколько независимых областей, каждая из которых функционируетнезависимо и может отображать свой URL-адрес.
Возможен также случай, когда фрейм представлен в видеотдельного окна. Другими словами, фреймы – это попытка сделать HTML-страницу многооконной.Для того, чтобы страница HTML-страница могла содержать фреймы, тэги <BODY> </BODY>,обрамляющие тело HTML-документа должны быть заменены на тэги <FRAMESET></FRAMESET>. Нижеприведен текст HTML-страницы, содержащей фреймы, и даны пояснения некоторых тэгов.File2.htmFile1.htmFile3.htmFile4.htmрис. 8.4. Страница фреймов.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> <head> <title> Страница фрэймов </title> </head><frameset cols="45%,*"><frame name="levo" src="File1.htm" scrolling="no" frameborder="NO" noresize><frameset rows="100px,200px,*"><frame name="verx"src="File2.htm" scrolling="auto" frameborder="NO"><frame name="seredina" src="File3.htm" scrolling="yes"><frame name="niz"src="File4.htm" scrolling="yes"></frameset><noframes><body> Эта страница использует фреймы, однако Ваш браузер их не поддерживает.
</body></noframes></frameset></html>Значение некоторых тэгов пояснено ниже:Таблица 8.5.Тэги создания фреймов.Тэг<frameset></frameset><frame><noframes></noframes>ЗначениеКонтейнер фреймов. Параметры ROWS и COLS задают разбиение страницы или повертикали (COLS=45%,* указывает на 2 части: одна 45% ширины экрана, вторая – всеостальное пространство * ) или по горизонтали (ROWS=100,200,* указывает на 3 части:одна высотой 100 пикселей, вторая 200 пикселей и третяя – все остальное).
С помощьюконтейнера экран можно разбить по вертикали или по горизонтали. Если надоодновременно разбить экран и по вертикали и по горизонтали, то лучше всего вложитьодин контейнер в другой, как это показано в примере.Задает URL-адрес файла, отображаемого в контейнере и его параметры.Name – имя фрейма, Src – URL-адрес файла фрейма, Scrolling – наличие полос прокрутки(yes, no, auto), Noresize – запрещает изменять размер фрейма, FrameBoder – задаетотображение рамки фрейма (yes, no).Данные между этими тэгами предназначены для браузеров, которые не могут обрабатыватьфреймы.
В примере, в этих тэгах помещен текст, который увидят пользователи, если ихбраузер не воспринимает фреймы.Использование разделенного рисункаРазделенные рисунки — это один самых распространенных способов перемещения по страницам Web-узла.Они представляют собой рисунки, разделенные на несколько областей, каждая из которых выступает в ролиотдельной ссылки. Щелчок на каждой из областей одного рисунка приводит к выполнению разных командсценария. Существует два типа разделенных рисунков — клиентские и серверные. Клиентские разделенныерисунки определяют области ссылок на изображении в документе HTML и создаются с помощью HTML.Серверные разделенные рисунки требуют создания специального файла определения карты разделениярисунка, которым управляет Web-сервер.
Здесь будут рассматриваться клиентские разделенные рисунки. Ляхевич А.Г., 2000 - 2002 годЧтобы создать клиентский разделенный рисунок, сделайте следующее.1) В графическом редакторе создайте рисунок в формате GIF или JPEG.2) Задайте карту разбиения рисунка на области в формате:<MAP name="Имя_карты_разбиения"><AREA SHAPE="rect" COORDS="x1, y1, x2, y2" HREF="http://adress1.com"><AREA SHAPE="rect" COORDS="x1, y1, x2, y2" HREF="http://adress2.com"><AREA SHAPE="rect" COORDS="x1, y1, x2, y2" HREF="http://adressN.com"></MAP>3) Включите рисунок в страницу, указав, что для него необходимо использовать созданную вами карту:<IMG SRC="file.gif" alt="пример карты" USEMAP = "#Имя_карты_разбиения">Пример:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><BODY><MAP NAME="karta1"><AREA SHAPE=RECT COORDS="1,1,100,300" HREF="http://magazin.com/zal"><AREA SHAPE=RECT COORDS="110,1,200,300" HREF="http://magazin.com/sklad"></MAP><H1>Пример клиентского разделенного рисунка</H1> <BR><IMG SRC="file1.gif" alt="пример карты" USEMAP="#karta1" WIDTH="200px" HEIGHT="300px"></BODY> </HTML>Создание бегущей строки при помощи тэга <MARQUEE>.Используя тэг <MARQUEE> можно просто создать бегущую строку, например так:<marquee> Приветик </marquee>Или в более полном варианте:<marquee width="75%" height="20px" bgcolor="yellow" direction="left" behaviour="scroll" loop="10"scrollamount="30px" scrolldelay="30" align="top"> Приветик </marquee>Таблица 8.6.Тэг marquee.Параметрwidth, height, bgcolordirectionbehaviourloopscrollamountscrolldelayalignЗначениеСоответственно ширина, длина и цвет фона окна бегущей строки.Направление движения: left – слева, right – справа.Поведение: scroll – прокрутить текст n-раз и исчезнуть, slide-прокрутить текст nраз и остаться, alternate – отскакивать от краев экрана.Число раз прокрутки.
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
