ЛАБ11_HTML_1
.pdf
Вообще говоря, значение value в данном описании является необязательным. Символ "*" указывает на то, что все оставшееся место будет принадлежать данному фрейму. Если указывается два или более фрейма с описанием "*" (например "*,*"), то оставшееся пространство делится поровну между этими фреймами. Если перед звездочкой стоит цифра, то она указывает пропорцию для данного фрейма (во сколько раз од будет больше аналогично описанного чистой звездочкой). Например, описание "3*,*,*", говорит, что будет создано три фрейма с размерами 3/5 свободного пространства для первого фрейма и по 1/5 для двух других.
COLS="список-определений-горизонтальных-подокон"
То же самое, что и ROWS, но делит окно по вертикали, а не по горизонтали.
Примеры:
HTML-страница, создающая два фрейма, в общем случае может выглядеть следующим образом:
<html> |
<html> |
<frameset rows="50%,50%"> |
<frameset rows="50%,50%"> |
<frame src="1 файл.htm"> |
<frame src="dog.jpg"> |
<frame src="2 файл.htm"> |
<frame src="cat.jpg"> |
</frameset> |
</frameset> |
</html> |
</html> |
|
|
В результате будут созданы два фрейма. Вы можете заметить, что во фрейме <frameset> мы используем атрибут строк rows. Это означает, два наших фрейма будут расположены друг над другом. В верхний фрейм будет загружена HTML-страница 1файл.htm, а в нижнем фрейме разместится документ 2 файл.htm. Окончательно созданная структура фреймов будет выглядеть следующим образом:
Рис.1. Горизонтальные фреймы
Все рамки предполагаются прямоугольными. Установка атрибута rows определяет число рамок по горизонтали, а атрибут cols задает число рамок по вертикали. Таким образом, задается сетка рамок. Если атрибут rows не задан, каждая колонка занимает всю длину страницы. Если атрибут cols не задан, каждый
51
ряд занимает всю ширину страницы. Если не заданы оба атрибута, на странице присутствует одна рамка, занимающая всю страницу.
HTML-страница, создающая три вертикальных фрейма выглядит следующим образом:
<frameset cols="33%,33%,*"> |
<frameset cols="33%,33%,* "> |
<frame src="1 фрейм-столбец.htm"> |
<frame src="dog.jpg"> |
<frame src="2 фрейм-столбец.htm"> |
<frame src="animals/dog04.jpg"> |
<frame src="3 фрейм-столбец.htm"> |
<frame src="animals/dog05.jpg"> |
</frameset> |
</frameset> |
Рис.2. Вертикальные фреймы
Рис.3. Вертикальные фреймы с рисунками
Теперь построим фрейм-кадры из пяти ячеек – первый столбец из двух строк и второй столбец из трех строк:
<frameset cols="50%,50%"> <frameset rows="50%,50%">
<frame src="1 ячейка.htm"> <frame src="2 ячейка.htm">
52
</frameset>
<frameset rows="33%,33%,33%"> <frame src="3 ячейка.htm"> <frame src="4 ячейка.htm">
<frame src="5 ячейка.htm"> </frameset>
</frameset>
Рис.3. Деление окна на фреймы
В следующем примере создается три колонки: вторая имеет фиксированную ширину в 250 пикселей (что удобно для картинки известного размера). Первая получает 25% оставшегося пространства, а третья – 75%.
<FRAMESET cols=”1*,250,3*”> … остальная часть определения … </FRAMESET>
В следующем примере создается решетка 2х3:
<FRAMESET rows=”30%,70%” cols=”33%,34%,33%”> … остальная часть определения …
</FRAMESET>
В следующем примере предполагается, что высота окна равна 1000 пикселей. Для первой рамки выделяется 30% общей высоты (300 пикселей). Для второй рамки выделено точно 400 пикселей. Это оставляет 300 пикселей на две оставшиеся рамки. Высота четвертой рамки определена как “2*”, а третей - *, следовательно, третья получит 100, а четвертая – 200 пикселей.
<FRAMESET rows=”30%,400,*,2*” > … остальная часть определения … </FRAMESET>
Если при задании абсолютных размеров остается свободное место, или возникает перерасход пространства, броузер пропорционально увеличит или уменьшит размеры рамок. FRAMESET могут вкладываться друг в друга на любом уровне. В приведенном примере внешний FRAMESET делит имеющееся пространство на три равные колонки. Внутренний FRAMESET делит вторую область на два ряда не равной высоты.
<FRAMESET rows=”33%,33%,34%” > …содержимое первой рамки…
53
<FRAMESET rows=”40%,50%” > …содержимое второй рамки первого ряда… …содержимое второй рамки второго ряда… </FRAMESET>
…содержимое третей рамки…
</FRAMESET>
Атрибут src определяет источник текста, помещаемого в рамку. Содержимое рамки не может быть записано в том же документе, в котором описана сама рамка. Пример: <HTML>
<FRAMESET cols=”33%, 33%, 33%”> <FRAMESET rows=”*,200”>
<FRAME src=”contents_of_frame1.html”> <FRAME src=”contents_of_frame2.gif”>
</FRAMESET>
<FRAME> src=”contents_of_frame3.html”> <FRAME> src=”contents_of_frame4.html”>
</FRAMESET>
</HTML>
В результате будет получена раскладка рамок, показанная ниже на рисунке.
Ниже приведенный пример содержит в себе ошибку, так как текст второй рамки включен в описание самой рамки.
<HTML>
<FRAMESET cols=”50%,50%”>
<FRAME src=”contents_of_frame1.html”> <FRAME src=”#anchor_in_same_document”>
</FRAMESET>
<BODY>
… некоторый текст…
<H2><A name=”anchor_in_same_document”>Important section</A></H2> … некоторый текст…
</BODY>
</HTML>
5.3 Тег FRAME
Данный тег определяет фрейм внутри контейнера FRAMESET. В общем виде он записывается следующим образом:
54
<FRAME SRC="url" [NAME="frame_name"] [MARGINWIDTH="nw"] [MARGIN-
HEIGHT="nh"] [SCROLLING=yes|no|auto] [NORESIZE]>
Описание атрибутов:
SRC="url"
Описывает URL документа, который будет отображен внутри данного фрейма. Если он отсутствует, то будет отображен пустой фрейм.
NAME="frame_name"
Данный параметр описывает имя фрейма. Имя фрейма может быть использовано для определения действия с данным фреймом из другого HTMLдокумента или фрейма (как правило, из соседнего фрейма этого же документа). Имя обязательно должно начинаться с символа. Содержимое поименованных фреймов может быть задействовано из других документов при помощи специального атрибута TARGET, описываемого ниже.
MARGINWIDTH="value"
Это атрибут может быть использован, если автор документа хочет указать величину разделительных полос между фреймами сбоку. Значение value указывается в пикселах и не может быть меньше единицы. По умолчанию данное значение зависит от реализации поддержки фреймов используемым клиентом броузером.
MARGINHEIGHT="value"
То же самое, что и MARGINWIDTH, но для верхних и нижних величин разделительных полос.
SCROLLING="yes | no | auto"
Этот атрибут позволяет задавать наличие полос прокрутки у фрейма. Параметр yes указывает, что полосы прокрутки будут в любом случае присутствовать у фрейма, параметр no наоборот, что полос прокрутки не будет. Auto определяет наличие полос прокрутки только при их необходимости (значение по умолчанию).
NORESIZE
Данный атрибут позволяет создавать фреймы без возможности изменения размеров. По умолчанию, размер фрейма можно изменить при помощи мыши так же просто, как и размер окна Windows. NORESIZE отменяет данную возможность. Если у одного фрейма установлен атрибут NORESIZE, то у соседних фреймов тоже не может быть изменен размер со стороны данного.
NOFRAMES
Данный тег используется в случае, если вы создаете документ, который может просматриваться как броузерами, поддерживающими фреймы, так и броузерами, их не поддерживающими. Данный тег помещяется внутри контейнера FRAMESET,
55
а все, что находится внутри тегов <NOFRAMES> и </NOFRAMES> игнорируется броузерами, поддерживающими фреймы.
Примеры :
Рассмотрим реализацию фреймов для подобного разбиения окна:
Link1 |
Link2 |
||
|
|
|
|
Link3 |
Link4 |
|
Link3 |
|
|
|
|
<FRAMESET ROWS="*,*">
<NOFRAMES>
<H1>Ваша версия WEB-броузера не поддерживает фреймы!</H1>
</NOFRAMES>
<FRAMESET COLS="65%,35%">
<FRAME SRC="link1.html">
<FRAME SRC="link2.html"> </FRAMESET>
<FRAMESET COLS="*,40%,*">
<FRAME SRC="link3.html">
<FRAME SRC="link4.html">
<FRAME SRC="link5.html"> </FRAMESET>
</FRAMESET>
Планирование фреймов и взаимодействия между фреймами
С появлением фреймов сразу возникает вопрос: "А как сделать так, чтобы нажимая на ссылку в одном фрейме инициировать появление информации в другом?"
Ответом на данный вопрос является планирование взаимодействия фреймов (далее - планирование). Каждый фрейм может иметь собственное имя, определяемое параметром NAME при описании данного фрейма. Существует, также, специальный атрибут - TARGET, позволяющий определять, к какому фрейму относится та или иная операция. Формат данного атрибута следующий:
TARGET="windows_name"
Данный атрибут может встречаться внутри различных тегов:
TARGET в теге A
Это самое прямое использование TARGET. Обычно, при активизации пользователем ссылки соответствующий документ появляется в том же окне (или фрейме), что и исходный, в котором была ссылка. Добавление атрибута TARGET позволяет произвести вывод документа в другой фрейм. Например:
56
<A HREF="mydoc.html" TARGET="Frame1"> Переход в фрейм № 1 </A>
TARGET в теге BASE
Размещение TARGET в теге BASE позволит вам не указывать при описании каждой ссылки фрейм-приемник документов, вызываемых по ссылкам. Это очень удобно, если в одном фрейме у вас находится меню, а в другой - выводится информация.
Например:
Документ 1.
<FRAMESET ROWS="20,*">
<FRAME SRC="doc2.htm" NAME="Frame1"> <FRAME SRC="doc3.htm" NAME="Frame2"> </FRAMESET>
Документ 2 (doc2.htm).
<HTML>
<HEAD>
<BASE TARGET="Frame2"> </HEAD>
<BODY>
<A HREF="url1"> Первая часть</A> | <A HREF="url2"> Вторая часть</A>
</BODY>
</HTML>
TARGET в теге AREA
Таже можно включать тег TARGET в описание ссылки при создании карты изображения. Например:
<AREA SHAPE="circle" COORDS="100,100,50"
HREF="http://www.softexpress.com" TARGET="Frame1">
TARGET в теге FORM
То же относится и к определению формы. В данном случае, после обработки переданных параметров формы результирующий документ появится в указанном фрейме.
<FORM ACTION="url" TARGET="window_name">
Внимание! Имя окна (фрейма) в параметре TARGET должно начинаться с латинской буквы или цифры. Также необходимо помнить, что существуют зарезервированные имена для разрешения специальных ситуаций.
Зарезервированные имена фреймов
Зарезервированные имена фреймов служат для разрешения специальных ситуаций. Все они начинаются со знака подчеруивания. Любые другие имена фреймов, начинающиеся с подчеркивания будут игнорироваться броузером.
TARGET="_blank"
Данное значение определяет, что документ, полученный по ссылке будет отображаться в новом окне броузера.
TARGET="_self"
57
Данное значение определяет, что документ, полученный по ссылке будет отображаться в том же фрейме, в котором находится ссылка. Это имя удобно для переопределения окна назначения, указанного ранее в теге BASE.
TARGET="_parent"
Данное значение определяет, что документ, полученный по ссылке будет отображаться в родительском окне, вне зависимости от параметров FRAMESET. Если родительского окна нет, то данное имя аналогично "_self".
TARGET="_top"
Данное значение определяет, что документ, полученный по ссылке будет отображаться на всей поверхности окна, вне зависимости от наличия фреймов. Использование данного параметра удобно в случае вложенных фреймов.
58
Лабораторная работа №6 Формы в HTML-документах
Цель работы научить студентов:
использованию основных тегов по созданию форм,
создавать различные элементы форм в HTML-документах.
Формы HTML позволяют получать информацию от читателей. До сих пор мы обсуждали только способы вывода данных, теперь речь пойдет об обратном действии. Формы дают возможность запрашивать информацию в виде свободного текста, получать ответы типа "да/нет" или делать выбор из нескольких опций.
Вы можете использовать формы с различными целями. Простейшим примером является размещение формы, куда читатели, посетившие сайт, смогут записать свои отзывы. Круг применения форм HTML ограничивается только вашей фантазией.
В виде форм создаются экранные элементы такие, как поля ввода, checkboxes, radiobuttons, выпадающие меню, скроллируемые списки, кнопки и т.д. Когда пользователь заполняет форму и нажимает кнопку "Подтверждение" (SUBMIT – специальный тип кнопки, который задается при описании документа), информация, введенная пользователем в форму, посылается HTTPсерверу для обработки и передаче другим программам, работающим под сервером, в соответствии с CGI (Common Gateway Interface) интерфейсом.
Тег <FORM>
Все формы начинаются тэгом <FORM> и завершаются тэгом </FORM>. В нем нужно определить два атрибута, указывающих используемый скрипт и метод посылки данных.
Атрибут 
ACTION
METHOD
Назначение
Определяет URL, который примет и обработает данные формы. Если этот атрибут не определен, данные отправляются по адресу страницы, на которой помещена форма
Указывает форме, как послать информацию соответствующей программе обработки (скрипту). Обычно он получает значение post, тогда информация формы посылается отдельно от URL.
Значению get соответствует посылка вместе с URL
Пример:
<FORM METHOD="post" ACTION="/cgi-bin/comment_script">
...
</FORM>
В этом примере дано указание браузеру отправить заполненную форму для обработки скриптом comment_script, расположенным в каталоге cgi-bin вашего сервера, и использовать метод посылки post.
59
Атрибут METHOD в зависимости от используемого метода может посылать результаты ввода данных в форму двумя путями:
GET: Информация из формы добавляется в конец URL, который был указан в описании заголовка формы. Ваша CGI-программа (CGI-скрипт) получает данные из формы в виде параметра переменной среды QUERY_STRING. Использование метода GET не рекомендуется.
POST: Данный метод передает всю информацию о форме немедленно после обращения к указанному URL. Ваша CGI-программа получает данные из формы в стандартный поток ввода. Сервер не будет пересылать вам сообщение об окончании пересылки данных в стандартный поток ввода; вместо этого используется переменная среды CONTENT_LENGTH для определения, какое количество данных вам необходимо считать из стандартного потока ввода. Данный метод рекомендуется к использованию.
Работа с тегами форм
В HTML существует три тега для создания различного типа полей в форме: <TEXTAREA>, <SELECT> и <INPUT>. Любое их количество может быть размещено в контейнере между тегами <FORM> и </FORM>. Ниже дано их краткое описание, а подробнее они будут рассмотрены чуть позже.
Тег |
Назначение |
<TEXTAREA> |
Определяет поле, в которое пользователь вводит многострочную |
|
текстовую информацию |
<SELECT> |
Позволяет пользователю сделать выбор в окне с полосой прокрутки, |
|
либо в раскрывающемся меню |
<INPUT> |
Обеспечивает некоторые другие виды ввода информации: ввод од- |
|
ной строки текста, установку и сброс флажков (check boxes), выбор |
|
переключателя (radio buttons) и нажатие кнопки для отправки дан- |
|
ных или очистки формы |
Тег <TEXTAREA> предназначен для построения поля с целью ввода многострочный текстовой информации. В контейнере TEXTAREA допускается размещать любой текст, который будет выведен в поле ввода по умолчанию. Перечислим атрибуты этого тега.
Атрибут |
Назначение |
NAME |
Определяет название поля, обязателен |
ROWS |
Устанавливает высоту поля ввода в символах, т. е. число строк в нем |
COLS |
Устанавливает ширину поля ввода в символах, т. е. длину строки |
Если вы хотите, чтобы в поле ввода по умолчанию выдавался какой-либо текст, то необходимо вставить его внутри тэгов <TEXTAREA> и </TEXT– AREA>.
Например:
<HTML><BODY>
<FORM>
<TEXTAREA NAME="address" ROWS=2 COLS=40>
60