1. 7. Організація зворотного зв'язку. форми Для отримання відгуку від людей, які переглядають ваш сайт,...
2. Збір даних формою
3. Створення форм в DreamWeaver
4. Як відправити форму поштою
5. 8. Мета-теги, Звук, Події, Шари
6. Вставка звукового файлу в web-сторінку
7. «Поведінка» об'єктів при настанні «подій». Behaviors
8. Створення шарів в DreamWeaver

7. Організація зворотного зв'язку. форми

Для отримання відгуку від людей, які переглядають ваш сайт, можна на web-сторінках вказати контактну інформацію та посилання на адресу вашої електронної пошти з побажаннями писати вам при необхідності. Однак, зручніше скористатися формами.

Форма - це інструмент, за допомогою якого html-документ може послати деяку інформацію в заздалегідь визначену точку зовнішнього світу, де інформація буде оброблена.

В якості такої «точки» зазвичай виступає програма, написана на мовах Perl, Сі або PHP, інструкції якого можна вбудовувати в html-документи (документи при цьому зберігаються у вигляді файлів з розширенням * .pht або * .php).

Програми, які обробляють дані, передані формами, називають CGI-скриптами (Common Gateways Interface - «загальноприйнятий інтерфейс шлюзів»). Форми передають інформацію програмами-обробникам у вигляді пар [ім'я змінної] = [значення змінної]. Імена змінних задають латинськими буквами. Значення змінних сприймаються обработчиками як рядки, навіть якщо вони містять тільки цифри.

пристрій форми

Форма відкривається тегом <form> і закінчується </ form>. Вона грає роль контейнера, в якому присутні елементи форми. У загальному вигляді контейнер form записується так:

<Form name = "імя_форми" target = "імя_окна" action = "glava2.htm" method = "get або post" enctype = "тіп_кодіровкі_данних" onsubmit = "обробник">

Елементи управління ...

</ Form>

Html-документ може містити в собі кілька форм. Форми не повинні знаходитися одна всередині іншої, але можуть містити html-текст.

Основні атрибути тега <form>:

• аction - обов'язковий атрибут, визначає місцезнаходження обробника форми (локальний адресу або обробник форми на сервері, наприклад скрипт script.pl, написаний на мові Perl - action = "http://host.com/cgi-bin/script.pl).
• method - визначає метод (протокол) передачі даних з форми обробнику. Значення: method = post і method = get (за замовчуванням). При локальній обробці даних не обов'язковий.
• enctype - спосіб кодування даних для передачі оброблювачу, використовується рідко.
• name - ім'я форми. Обов'язково тільки в тому випадку, якщо Ви збираєтеся згодом посилатися на форму зі сценарію JavaScript.
• target - відповідає аналогічному для тега <a> (посилання). Якщо результат обробки форми повинен з'явитися в окремому вікні, надайте цим параметром ім'я вікна або одне зі стандартних значень _blank, _top і т. Д.
• onsubmit - ім'я обробника події Submit. Коли після введення тексту в форму Ви натискаєте Enter або на спеціальну кнопку ( «Відправити», «Послати»), відбувається подія Submit, тобто дані з форми передаються відповідною програмою для обробки. Як правило, цей параметр опускається, т. К. Одним з типових елементів форми є спеціальна кнопка, яка ініціює подія Submit без використання додаткового коду. Якщо Ви обробляєте дані локально, ім'я обробника не ставить.

Збір даних формою

1.Елемент type = submit. Для того щоб запустити процес передачі даних з форми оброблювачу, потрібен наступний елемент управління:

<Input type = submit>

Зустрівши таку строчку всередині форми, браузер намалює на екрані кнопку з написом Submit, при натисканні на яку всі наявні в формі дані будуть передані оброблювачу, визначеному в тезі <form>. Напис на кнопці можна задати іншу атрибутом value = "[Напис]", наприклад:

<Form action = "glava2.htm">

<Input type = submit value = "Глава 2">

</ Form>

Ця форма не збирає даних, а просто завантажить в поточне вікно файл glava2.htm. Напис на кнопці, можна при необхідності передати оброблювачу атрибутом name = [ім'я], наприклад: <input type = submit name = button value = "Поїхали">.

При натисканні на таку кнопку обробник разом з іншими даними отримає і змінну button, зі значенням Поїхали. Ім'я повинно здаватися тільки латинськими літерами. У формі може бути кілька кнопок типу submit з різними іменами і / або значеннями. Оброблювач може діяти по-різному в залежності від того, яку саме кнопку submit натиснув користувач. Існують і інші типи елементів <input>:

2. type = text. Визначає вікно для введення рядка тексту. Використовується для введення інформації. Може містити атрибути size = [число] (ширина вікна введення в символах) і maxlength = [число] (максимальна кількість символів). приклад:

<Input type = text size = 20 name = "user" value = "Іван">

Визначає вікно - 20 символів для введення тексту. За замовчуванням у вікні знаходиться текст Іван, який можна редагувати. Текст передається обробнику в змінної user.

3. type = password. Визначає вікно для введення пароля. Аналогічний типу text, тільки замість символів тексту, що вводиться показує на екрані зірочки (*).

4.type = radio. Визначає радіокнопку-перемикач. Використовується для вибору з декількох варіантів. Може містити атрибут checked (показує, що кнопка позначена). Для зв'язування кнопок в групу досить дати всім необхідним кнопках одне і те ж ім'я. У групі радіокнопок може бути тільки одна помічена радіокнопка. приклад:

<Input type = "radio" name = "modem" value = "9600" checked> 9600 біт / с

<Input type = "radio" name = "modem" value = "14400"> 14400 біт / с

Визначає групу з двох радіокнопок, підписаних 9600 біт / с і 14400 біт / с. Спочатку позначена перша з кнопок. Якщо користувач не помітить іншу кнопку, обробнику буде передана змінна modem зі значенням 9600. Якщо користувач відзначить іншу кнопку, обробнику буде передана змінна modem зі значенням 14400.

5.type = checkbox. Визначає квадрат-перемикач, в якому можна зробити позначку. Може містити атрибут checked (показує, що квадрат позначений). На відміну від радіокнопок, в групі квадратів з однаковими іменами може бути кілька помічених квадратів.

6.type = hidden. Визначає прихований елемент даних, який не видно користувачеві при заповненні форми і передається обробнику без змін.

7. type = reset. Визначає кнопку, при натисканні на яку форма повертається в початковий стан. Кнопка reset може і не мати атрибута name.

Крім елементів <input>, форми можуть містити елементи <select> і поля для введення тексту <textarea>.

8. Список-меню <select> з n елементів дає користувачеві можливість вибору і виглядає приблизно так:

<Select name = "[ім'я]">

<Option value = "[значення 1]"> [текст 1]

...

<Option value = "[значення n]"> [текст n]

</ Select>

Меню знаходиться в контейнері <select> ... </ select>. Тег <select> містить обов'язковий атрибут name, який визначає ім'я змінної, яку генерує меню. Може також містити атрибут multiple, присутність якого показує, що з меню можна вибрати кілька елементів. Більшість браузерів показують меню <select multiple> у вигляді вікна, в якому присутні елементи меню (висоту вікна можна задати атрибутом size = [число рядків]). Меню <select> зазвичай показується у вигляді меню, що випадає.

Тег <option> визначає елемент меню. Обов'язковий атрибут value встановлює значення, яке буде передано оброблювачу, якщо обраний цей елемент меню. Мітка <option> може містити атрибут checked, що показує елемент, зазначений за замовчуванням.

9. <textarea> - многострочное текстове поле. наприклад:

<Textarea name = address rows = 5 cols = 50>

А тут - Вашу адресу ...

</ Textarea>

Всі атрибути обов'язкові. Name - ім'я, під яким вміст вікна буде передано оброблювачу. Rows - висота вікна в рядках. Cols - ширина вікна в символах. Текст, розміщений в контейнері <textarea> і </ textarea>, являє собою вміст вікна за замовчуванням. Користувач може його відредагувати або просто стерти.

Створення форм в DreamWeaver

Для створення форми в DreamWeaver виберіть на панелі об'єктів Forms кнопку Insert Form. З'явиться порожня форма - в DreamWeaver вона обрамлена червоною пунктирною лінією. Решта кнопки панелі об'єктів Forms дозволяють вставити:

- текстові поля типу Text, Password, Textarea;
- кнопки типу Submit, Reset;
- CheckBox і - Radiobutton;
- список Select - List / Menu і другий варіант - список Select з Jump Menu;
- об'єкт, за допомогою якого можна вказувати файл для заливки на сайт;
- варіант submit-кнопки, замість кнопки підставляється графічне зображення.

Як обробити форму без доступу до сервера і без програми обробника форми на сервері? В цьому випадку можна орієнтуватися на програмне забезпечення комп'ютера користувача, що переглядає ваш сайт. Найбільш доступні програми обробки за допомогою JavaScript або за допомогою комп'ютерної програми для електронної пошти.

У DreamWeaver за допомогою кнопки Jamp Menu можна створити меню, що випадає або меню-список, які обробляються JavaScript. У діалоговому вікні треба заповнити пункти

• Menu Item Text - текст пункту меню,
• Go To URL - html-файл або web-адреса для переходу при виборі пункту меню,
• Open URLs In - куди завантажувати цей файл,
• Menu Name - поле Name в тезі <select>.

Пункти меню можна додавати, натискаючи клавішу «плюс» у верхній частині діалогового вікна. При виборі будь-якого пункту в меню буде запущений скрипт, який завантажить в браузер html-файл, вказаний в Go To URL.

В JavaScript програмуванні використовується схема об'єкт-подія-обробник. Оброблювач спрацьовує в тому випадку, якщо з об'єктом відбулася подія. У ролі об'єкта на web-сторінці зазвичай виступає елемент сторінки, який має посилання (<a>) або компонент форми. Події бувають різні: клацнули по кнопці - з нею «трапився» onclick; курсором миші провели над посиланням - вона «пережила» mouseover; повели миша за межі посилання - стався mouseout. Посилання на обробник події вставляється в опис елемента так само, як інші його параметри.

При створенні нашого Jump Menu в DreamWeaver посилання на JavaScript-код вставляється в опис елемента select у вигляді рядка onChange = "MM_jumpMenu ( 'parent', this, 0)", тобто якщо з елементом трапиться подія onChange (вибір пункту меню), то в вікно буде завантажений файл, який підставляється замість this.

Як відправити форму поштою

Html надає механізм пересилання вмісту форм по електронній пошті. Ось як це виглядає на практиці. Вихідні дані в цю програму передасть форма:

<Form action = "mailto: [email protected]" enctype = text / plain>

<H2> Розкажіть про себе ... </ h2>

<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>

Заповнивши форму (наприклад, ім'я - Іван, прізвище - Петров, стать - чоловіча і вік - 22.) можна відправити її, натиснувши на кнопку. При цьому електронною поштою на адресу [email protected] автоматично буде відправлено повідомлення такого змісту:

fn = Іван, ln = Петров, gender = male, age = 22

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

8. Мета-теги, Звук, Події, Шари

Застосування META тегів

Для зручності пошуку сторінок в мережі Інтернет в набір команд мови html включена спеціальна група інструкцій meta, призначених в основному для опису і індексування документа пошуковими машинами. meta знаходяться всередині блоку: <head> ... </ head>. Найбільш важливі для пошукових машин два значення meta:

name = "description" (опис) і name = "keywords" (ключові слова).

синтаксис:

<Meta name = "description" content = "Ця сторінка присвячена проблемам web-дизайну">

<Meta name = "keywords" content = "пошук, рекомендації, підручник, посібник, інформація">

Ключові слова дозволяють підвищити «релевантність» (відповідність запиту) пошуку. При виведенні інформації про сторінку в результатах пошуку багато роботи, індексуючі документи html, користуються описом, які вони знаходять в інструкції "description". Якщо цієї інструкції в документі не виявиться, то пошукова машина поверне перші символи знайдені на сторінці, за вирахуванням команд html.

Крім двох розглянутих видів інструкцій meta (description і keywords) цей тег має і інші застосування. Зокрема, мета може містити інформацію про кодування документа: <meta http-equiv = "Content-type" content = "text / html; charset = Windows-1251">

Ця інструкція означає, що документ використовує кодову сторінку Windows-1251.

Meta може використовуватися і для створення динамічно оновлюваних документів:

<Meta http-equiv = "refresh" content = "15; url = http: //ftiudm.ru/">

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

«Сторінка поки відсутній ...»

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

У DreamWeaver для вставки різних інструкцій використовується панель інструментів HEAD. При цьому бажано включити додаткову панель перегляду вмісту заголовка, вибравши в меню View пункт Head Contents.

Вставка звукового файлу в web-сторінку

Якщо Ви хочете озвучити свою сторінку, вставте після тега <body> інструкцію:

<Bgsound src = "file.mid" loop = infinite>

Параметр src визначає ім'я музичного файлу file.mid, який буде програватися нескінченно або повториться стільки раз, скільки задано в параметрі loop, наприклад: loop = 1.

Більш загальний спосіб впровадження звуку з керуванням (працює не у всіх браузерах):

<Embed src = "file.mid" hidden = "true" autostart = "true" loop = "true"> </ embed>

Основні параметри контейнера embed:

1. height і width - задають вертикальний і горизонтальний розміри панелі управління;
2. autostart - можливість автозапуску при завантаженні, приймає значення true або false;
3. loop - кількість повторень. Можливі значення: true, false або число;
4. hidden - дозволяє приховати панель управління. Приймає значення true або false;
5. src - вказує програється файл;
6. volume - встановлює гучність звучання (0-100%).

«Поведінка» об'єктів при настанні «подій». Behaviors

У DreamWeaver за допомогою панелі Window> Behavior можна задати поведінку об'єктів у вікні браузера в залежності від відбуваються з ними. В панелі Behavior, значком +, можна додати ( "-" прибрати) дії, що виконуються при настанні різних подій, для виділеного об'єкта.
приклади:
1. Підказка на сторінці. Створіть пункт меню HELP і файл help.htm з вмістом допомоги. Зробіть посилання на цей пункт, але замість адреси впишіть символ #. Вкажіть курсором на це посилання, натисніть знак + в панелі Behavior і виберіть в меню пункт Open Browser Window. У вікні вкажіть URL - help.htm, Width = 600 і Height = 300. При натисканні на пункт меню HELP в браузері буде відкриватися додаткове вікно заданого розміру 600х300 з файлом help.htm всередині.

2. Повідомлення, спливаюче при наведенні на пункт меню (без натискання). Вкажіть пункт меню, натисніть + в Behavior, виберіть Popup Message і впишіть текст повідомлення. За замовчуванням дію відбудеться при натисканні мишею, тобто при настанні події onClick. Це відображено в панелі Behavior, де події (events) - onClick відповідає дія - Popup Message. Щоб повідомлення спливало без натискання тільки при наведенні, натисніть на кнопку з перевернутим трикутником (правіше події onClick) і в меню оберіть подія onMouseOver.

Наступні основні типи поведінки можна задати з панелі Behaviors:

• Call Javascript - виклик зовнішнього ява-скрипта на подію;
• Change Property - зміна властивостей об'єкта (кольору, наприклад);
• Check Browser - визначає тип браузера - корисно для перенаправлення користувача на сторінку найбільш йому відповідну;
• Drag Layer - переміщує шар; Show-Hide Layers - показує, ховає шари;
• Go To Url - перехід за посиланням;
• Jump Menu, Jump Menu Go - зміна меню;
• Open Browser Window - відкриває вікно браузера з заданими параметрами;
• Play Sound - відтворює звук;
• Popup Message - виводить стандартне windows-повідомлення із заданим текстом;
• Preload Images - завантажує зазначені картинки;
• Set Nav Bar Image -зміна картинок створених за допомогою Navigation Bar;
• Set Text - установка тексту у фреймах, текстової поле, шарі, рядку стану браузера;
• Swap Image - зміна однієї картинки інший (ефект перекочування);
• Swap Image Restore - відновлення вихідної картинки;
• TimeLine - про це далі.

Створення шарів в DreamWeaver

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

Html пропонує свою версію цієї техніки: користуючись спеціальними контейнерами, ми можемо позиціонувати прямокутні блоки з вмістом поверх базової сторінки, іноді навіть в кілька шарів, і міняти їх порядок.

Html пропонує кілька синтаксисів опису шарів. Ми розглянемо єдиний з використовуваних контейнерів, які розпізнаються всіма браузерами - контейнер <div>.

У загальному вигляді він записується приблизно так:

<Div id = "імя_слоя" style = "position: absolute; left: 0; top: 0; width: 637px; height: 266px; z-index: 0">
...
</ Div>

Область, обмежена цим контейнером, отримує незалежність в межах вікна браузера і може бути розміщена де завгодно в цьому вікні.

Параметр id визначає ідентифікатор об'єкта (контейнера) <div>, тобто задає ім'я шару.

Далі йде опис стилю об'єкта.

Запис position: absolute визначає тип позиціонування об'єкта. Координати задані для верхнього лівого кута шару (точка відліку прив'язана до верхнього лівого кута документа).

Запис z-index: 0 задає порядок проходження шарів. Шар з меншим індексом знаходиться нижче, з великим - вище. Шари можна «включати» і «вимикати», тобто робити їх видимими або невидимими - так працюють динамічні меню.

Шари можна аніміроавть в DreamWeaver за допомогою інструменту Timeline (з меню Window). Після того, як Ви виберете цей пункт в меню, з'явиться панель (схема) тимчасової розгортки, на якій для певного часу можна задати певні дії.

Розглянемо приклад.
Для качана натісніть на кнопку в панелі ІНСТРУМЕНТІВ и намалюйте кулю. После цього вкажіть на решітку зліва вгорі кулі и в панелі властівостей и заданих параметрах кулі, як показано на схемі (обов'язково дайте кулі имя в поле Layers ID).
Тепер вставте в кулю картинку. Це робиться так само, як і вставка картинки на сторінку (вказуємо всередину шару, натискаємо кнопку вставки картинки і вибираємо потрібну картинку).

Після цього виділіть об'єкт (шар), натисніть правою кнопкою миші в робочій області панелі TimeLine і виберіть пункт AddObject (додавати можна тільки картинки і шари).

У робочій області, навпаки цифри 1, з'явиться смуга з назвою Вашого шару і займає за замовчуванням 15 кадрів. Вкажіть мишею на будь-який кадр (наприклад, 10). При цьому до нього переміститься червона лінія.

На цьому кадрі правою клавішею миші викличте контекстне меню, в якому вкажіть пункт AddKeyframe. Обраний кадр стане «ключовим» і в панелі Timeline буде виділено зафарбовані гуртком. Ключові кадри - це «віхи» на шляху переміщення об'єкта. Всі проміжні переміщення DreamWeaver зробить сам.

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

Залишилося поставити на панелі Timeline частоту показу кадрів - Fps (наприклад, 20) і включити галочки AutoPlay (автопроігриваніе) і Loop (перемотування по колу).

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

наверх ^ • далі >>

Оновлене 20.05.2004