	Главная \| Случайная страница \| Контакты \| Мы поможем в написании вашей работы!

Фрейми

⇐ Предыдущая 1 2 3 4 567 8 9 10 Следующая ⇒

Використання фреймів (frames) дозволяє розділити сторінку на частини, кожний з яких обновляється окремо.

Щоб отримати сторінку, що містить фрейми, необхідно спочатку створити декілька документів:

1. документи, які будуть поміщатися у фрейми;

2. документ, визначальний загальну структуру сторінки.

Останній звичайно називають документом фреймовой структури (frameset document), або просто структурним документом.

Для створення структурного документа використовується контейнер FRAMESET. Дескрипторна пара <FRAMESET></FRAMESET> повністю замінює в структурному документі пару <BODY></BODY>.

Створюючи фрейми необхідно визначити, як буде розділена сторінка: по вертикалі (за допомогою атрибута COLS) або по горизонталі (за допомогою атрибута ROWS). Для цих атрибутів використовується наступний формат:

Числові значення указуються у відсотках або в пікселях.

В окремому дескрипторі <FRAMESET> може використовуватися тільки один з атрибутів - COLS або ROWS. Щоб створити рядки всередині столбцов (або навпаки) потрібні вкладені дескриптори. Наприклад:

</FRAMESET>

</FRAMESET>

Використовуючи наведений приклад, сторінку можна спочатку розбити на два стовпці (лівий займає 25%, а правий - 75% її простори). Потім перший стовпець був розділений на два рядки, кожний з яких займає по 50% простори стовпця. Другий стовпець також розділений на два рядки, перша з яких займає 10%, а друга - 90% простори.

За допомогою одиночного дескриптора <FRAME>, поміщеного в контейнер FRAMESET, можна визначити, що повинне відображуватися в конкретному фреймі. З його допомогою можна указати URL або ім'я, пов'язане з конкретним фреймом:

.....

</FRAMESET>

Кожний дескриптор <FRAME> створює окреме вікно фрейма (frame window). Ці вікна відповідають визначенням рядків або столбцов в дескрипторі <FRAMESET>; але на екрані ніякі розділові лінії не з'являться до тих пір, поки кожне вікно не буде визначено за допомогою дескриптора <FRAME>.

Атрибути MARGINWIDTH і MADGIHEIGHT використовуються для визначення правого/левого і верхнего/нижнего полів тексту і графіки всередині фрейма відповідно. Обидва ці атрибута приймають числові значення в пікселях.

Атрибут SCROLLING може приймати значення yes, no і auto. Він дозволяє визначити, чи присутні у вікні фрейма смуги прокрутки. За умовчанням приймається auto.

Атрибут NORESIZE не приймає ніяких значень; він використовується для того, щоб не дозволити користувачу змінити розміри вікна фрейма, тобто робить межі фрейма «жестко закрепленными». При цьому фіксуються розміри всіх фреймів, що мають із закріпленим загальну межу.

На зовнішній вигляд фрейма впливають атрибути FRAMEBODER, BODER і BODERCOLOR.

Атрибут FRAMEBODER можна використовувати в дескрипторах <FRAME> і <FRAMESET>. Він може приймати значення yes (приймається за умовчанням) і no (означає відсутність меж).

За допомогою атрибута BODER можна визначити ширину рамки в пікселях. Якщо встановити значення FRAMEBODER=«no», а BODER=«0», то межі фреймів будуть невидимі.

За допомогою атрибута BODERCOLOR в дескрипторах <FRAME> і <FRAMESET> можна визначати колір рамок (тобто меж фреймів). За умовчанням межі мають сірий відтінок.

Щоб контролювати процес завантаження фреймів, потрібно привласнити вікнам фреймів імена. Для цього призначений атрибут NAME, який використовується в дескрипторі <FRAME>:

Привласнивши фреймам імена, можна указати їх в гіпертекстовому посиланні за допомогою атрибута TARGET, який поміщається в дескриптор прив'язки <А>:

<Ђ HREF=_®ўл©_URL» TARGET=_Ёп_®Є»>вҐЄбв ббл«ЄЁ</Ђ>

Тут новый URL - це адреса нового документа, який необхідно завантажити в певне вікно фрейма; имя окна - це ім'я, яке привласнюється вікну за допомогою атрибута NAME в дескрипторі <FRAME>.

Якщо необхідно, щоб більшість посилань указувала на певне вікно фрейма, то для цього вимагається помістити в елемент HEAD HTML - кода сторінки дескриптор <BASE> таким чином:

<HEAD>

</HEAD>

Таким чином всі документи, відповідні гіперпосиланням, будуть відкриватися в конкретному вікні фрейма або в новому вікні броузера. Наперед визначивши за допомогою атрибута TARGET імена, можна одержувати спеціальні ефекти:

n TARGET=«blank» - документ, URL якого визначений в цьому посиланні, завжди завантажується в нове вікно броузера. Нове вікно не має імені, тому на нього не можна послатися з сценарія, що знаходиться на початковій сторінці. В результаті ім'я вікна не можна указати в атрибуті TARGET при визначенні подальшого посилання.

n TARGET=«self» - це ім'я використовується для заміщення однойменного імені дескриптора <BASE>. В результаті документ, визначений в посиланні, завантажується в поточне вікно.

n TARGET=«parent» - документ завантажується в поточне батьківське вікно фрейма. Звичайно це вікно фрейма, яке описане у визначенні <FRAMESET> безпосередній перед поточним вікном. Якщо батьківських вікон не існує, то ім'я _parent стає тотожним _self.

n TARGET=«top» - документ завантажується в самий верхній фрейм поточного вікна броузера.

В основному ці службові імена призначені для того, щоб тим або іншим способом «вырваться» з поточної фреймовой структури.

Контейнер NOFRAMES призначений для зберігання HTML - коду, адресованого тим броузерам, які не підтримують фрейми. Броузери, підтримуючі фрейми, ігнорують все, що міститься всередині дескрипторної пари <NOFRAMES></NOFRAMES>. Інші броузеры ігнорують всі дескриптори фреймів і сприймають тільки текст, ув'язнений в контейнер NOFRAMES. Приклад використання контейнера:

<Р>Для перегляду цієї сторінки необхідний броузер, підтримуючий фрейми.

Існують «плавающие фреймы» - дозволяють помістити один фрейм в звичайний HTML - документ. За допомогою елемента <IFRAME> можна помістити вбудований фрейм в текст документа так само, як при використанні дескрипторів <IMG> і <OBJECT>. Атрибути цього дескриптора перераховані в таблиці 3.1.

Таблиця 3.1.

Атрибути цього дескриптора <IFRAME>

Атрибут	Значення
ALIGN FRAMEBODER HEIGHT WIDTH MARINHEIGHT MARGINWIDTH NAME SCROLLING SRC	left/center/right 1/0 Числове значення в пікселях Числове значення в пікселях Числове значення в пікселях Числове значення в пікселях Ім'я yes/no URL джерела

3.2. Створення базової форми

Для створення форми використовується спеціальна директива (тег), визначення всіх елементів керівників повинні знаходитися всередині неї. При використанні цієї директиви необхідно указати деякі опції. Визначення форми:

...

</FORM>

Із самого початку необхідно указати метод передачі даних, отриманих від користувача на Web-сервер. Цей метод указується в опції METHOD, яка є першим параметром директиви <FORM>.

Опція METHOD може приймати два різні значення. METHOD="GET" примушує броузер закодувати отриману інформацію у вигляді URL і у такому вигляді відіслати на сервер. На сервері це значення привласнюється певній переменной оточення. Якщо сервер працює під управлінням операційної системи UNIX, можна отримати інформацію, введену користувачем, звернувшись до переменной оточення QUERY STRING. Цей метод обмежує кількість передаваних даних (декілька сотень байтів, залежно від того, як встановлені інші змінні оточення).

METHOD="POST" примушує передавати зібрану інформацію за допомогою стандартних процедур введення-виведення. Рекомендується використовувати саме цей метод для доступу до даних, введених у форму.

Крім того, необхідно указати, де саме на сервері буде зберігатися отримана інформація. Це можна зробити за допомогою опції ACTION, яка повинна указувати на будь-який файл. Залежно від використовуваного серверу, це може або стандартний дисковий файл, або сценарій CGI, який інтерпретує дані, отримані від користувача.

Таким чином, мінімальне визначення форми буде виглядати так:

<HTML>

<HEAD>

<TITLE> Форма </TITLE>

</HEAD>

<BODY>

….

</FORM>

</BODY>

</HTML>

де /cgi-bin/data - колія до сценарія CGI, який повинен обробляти отримані дані.

Ця форма цілком даремна, оскільки вона не містить ніяких елементів управління, за допомогою яких користувач може вводити дані. Проте вона демонструє базову структуру форми HTML.

Всі елементи управління, які ви будете добавляти у форму, повинні визначатися всередині директиви <FORM>...</FORM>.

3.3. Введення тексту.

Рядки введення дозволяють запрошувати у користувача текстові дані. При введенні тексту можна вибирати з декількох типів елементів управління, залежно від того, який текст і в яких кількостях хочете запитати.

Перша директива, пов'язана з введенням тексту - це INPUT, яка дозволяє користувачу вводити текст від одного слова до цілого рядка. За умовчанням максимальна довжина тексту, що вводиться, обмежується 20 символами.

В загальному вигляді директива виглядає таким чином:

<INPUT TYPE="text" NAME="var-name" VALUE="строка за умовчанням"

SIZE="размер" MAXLENGTH="макс длина">

Опція TYPE дозволяє указувати, який саме тип елемента керівника описується. Кожний тип має своє унікальне ім'я, як показано в табл. 3.2.

Табл. 3.2

Типи тегов, використовуваних при введенні інформації

Ім'я типу	Опис
checkbox	Елемент керівника - перемикач (прапор перевірки)
hidden	Прихований текст, використовуваний для обміну даними між формами
password	Рядок введення пароля
reset	Кнопка "Reset"
submit	Кнопка "Submit"
text	Рядок для введення тексту
radio	Перемикачі радіокнопки

Опція NAME указує ім'я переменной, в якій система буде берегти отримане значення. Ім'я не повинне містити в собі пропуски.

Опція VALUE (є необов'язковою) дозволяє вам визначити текст, що поміщається в рядок введення при відображенні форми.

Опція SIZE визначає максимальне число символів, яке може побачити при введенні користувач. Ця опція працює спільно з опцією MAXLENGTH, яка визначає кількість символів, що вводиться користувачем. Якщо значення MAXLENGTH більше значення SIZE, і якщо користувач введе більше символів, ніж указано в SIZE, то текст буде прокручуватися по горизонталі.

Приклад форми з одним рядком введення:

Введіть своє ім'я:

<INPUT TYPE="text" NAME="username" VALUE="Студент" SIZE="25"

MAXLENGTH="45">

</FORM>

Результат: можна ввести в це текстове поле будь-яку послідовність символів, але після натиснення Enter нічого не станеться, оскільки розташований на сервері в каталозі СGI-BIN сценарій СGI data.cgi, який повинен обробляти інформацію, що вчинила, вам не доступний.

Top of Form 1

Введіть своє ім'я:

3.4. Введення пароля.

Рядок пароля забезпечує певний захист даних, оскільки вона замінює символи, що вводяться, в неї зірочками. Визначення рядка введення пароля дуже схоже на визначення рядка введення тексту, за винятком значення опції TYPE. Стандартний вид визначення рядка введення пароля виглядає так:

<INPUT TYPE="password" NAME="var-name" VALUE="строка за умовчанням"

SIZE="25" MAXLENGTH="15">

Опція TYPE повинна мати значення "password". Опція NAME указує ім'я переменной, в якій будуть зберігатися введені дані.

Опція VALUE (яка необов'язкова), є практично даремною, оскільки замість тексту за умовчанням відображують зірочки. Проте ця опція збережена - для сумісності з іншими типами елементів керівників.

Опція SIZE визначає максимальне число символів, яке може побачити користувач при введенні. Ця опція дозволяє спільно з опцією MAXLENGTH, яка визначає кількість символів, що вводиться користувачем.

От приклад форми, що запрошує у користувача пароль:

Що трапилося?

<INPUT TYPE="password" NAME="username" SIZE="10"

MAXSIZE="15">

</FORM>

Результат:

Що трапилося?

3.5. Введення декількох рядків тексту.

Якщо вам потрібно ввести великий текст, ви повинні використовувати область для введення тексту. Вона визначається тегом <TEXTAREA>, має наступний синтаксис:

Текст, що за умовчанням відображувався в області введення

</TEXTAREA>

Опція NAME указує ім'я переменной, в якій будуть зберігатися отримані дані, ROWS і COLS визначають розмір області в рядках і в стовпцях відповідно.

Текст, який ви хочете відображувати в області введення за умовчанням, повинен знаходитися між початковим тегом <TEXTAREA> і завершальним </TEXTAREA>.

Приклад форми, яка запрошує у користувача декілька рядків тексту:

Це текст, що відображувався за умовчанням

і це також.

</TEXTAREA>

Результат: на екрані відображується поле введення, що містить текст, заданий за умовчанням, і має лінійку скролінга.

Это текст, отображаемый по умолчанию и это тоже.

3.6. Використання перемикачів - радіокнопок.

Перемикачі - радіокнопки дуже схожі на перемикачі, з тією різницею, що одночасно може бути вибрана тільки одна кнопка з групи. Кнопки застосовуються для того, щоб організувати вибір одного елемента з декількох. В більшості Windows-броузеров вибраний елемент буде оточений штриховим кружком.

Радіокнопки отримали свою назву тому, що вони дуже схожі на кнопки старих автомобільних приймачів. Можна клацнути тільки на одній кнопці з декількох для того, щоб вибрати станцію. Якщо клацнути на іншій кнопці, то перша повертається в початкове положення.

Для опису кнопок використовується тег <INPUT> з опцією TYPE, рівною "radio". Можна групувати кнопки-перемикачі, привласнюючи деяким з них однакові значення опції NAME. Крім того, опція VALUE використовується для того, щоб указати значення, що повертається.

Приклад використання таких перемикачів:

Відзначте свій улюблений колір:

<Р>

<INPUT TYPE="radio" NAME="var-name" VALUE="red"> Червоний

<INPUT TYPE="radio" NAME="var-name" VALUE="grn"> Зелений

<INPUT TYPE="radio" NAME="var-name" VALUE="blu"> Голубий

<INPUT TYPE="radio" NAME="var-name" VALUE="yel"> Жовтий

<INPUT TYPE="radio" NAME="var-name" VALUE="pnk"> Рожевий

<Р>

</FORM>

Результат:

Top of Form 3

Відзначте свій улюблений колір:

Червоний

Зелений

Голубий

Жовтий

Рожевий

Bottom of Form 3

Кожний тег <INPUT> визначає окрему кнопку. Елементи, що мають однакове значення опції NAME, об'єднуються в групу. Опція VALUE є обов'язковою. Вона описує значення, що повертається.

Як і в попередньому прикладі з перемикачами, теги <Р> використовуються тільки для того, щоб відповідним чином відформатувати сторінку. Якщо ви їх видалите, кнопки будуть розміщені в одному рядку.

Можна групувати перемикачі всередині групи, відповідним чином змінюючи значення опції NAME.

За умовчанням жодна з кнопок не є поміченою. Проте можна указати опцію CHECKED для однієї з кнопок, щоб зробити її поміченою за умовчанням. Опцію CHECKED можна указувати тільки для однієї кнопки в кожній групі.

3.7. Використання спливаючих меню.

Спливаючі меню дозволяють користувачу вибрати один або декілька елементів з меню. Спливаючі меню аналогічні перемикачам - радіокнопкам в тому значенні, що вони дозволяють вибрати один елемент з декількох. Проте спливаючі меню посідають менше місця на екрані, якщо в списку містяться більше 3-4 елементів, то краще використовувати саме меню.

Меню визначається всередині тега <SELECT>...</SELECT>. Кожний пункт меню передує тегом <OPTION>.

Приклад використання спливаючого меню:

Виберіть свій улюблений фрукт:

<OPTION>Яблоко

<OPTION>Банан

<OPTION>Апельсин

<OPTION>Грейпфрут

<OPTION>Манго

<OPTION>Ананас

</SELECT>

</FORM>

Результат:

Виберіть свій улюблений фрукт:

Як правило, перший в списку елемент є елементом за умовчанням, проте можна змінити елемент за умовчанням, указавши опцію SELECTED.

⇐ Предыдущая 1 2 3 4 567 8 9 10 Следующая ⇒

Дата публикования: 2015-04-10; Прочитано: 401 | Нарушение авторского права страницы | Мы поможем в написании вашей работы!

studopedia.org - Студопедия.Орг - 2014-2024 год. Студопедия не является автором материалов, которые размещены. Но предоставляет возможность бесплатного использования (0.02 с)...