Горизонтальне меню, що випадає. Створення Web-сторінок у прикладній програмі FrontPage Створення простого меню

Горизонтальне меню, що випадає. Створення Web-сторінок у прикладній програмі FrontPage Створення простого меню

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

"Це теж роловер!"

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

"Я теж роловер"

З напису випливає, що це теж роловер, але при наведенні курсору миші він на це не реагує. А тепер спробуйте натиснути на написи мишею, що сталося? Навколо напису з'явилася червона рамка. Навіть якщо тепер прибрати від напису курсор миші, він не набуде вихідного вигляду. Для того, щоб повернути наш напис у вихідний стан, потрібно зробити повторне клацання на роловері. З усього сказаного ми робимо висновок, що роловер може реагувати не тільки на рух миші, але і на клацання мишею. Отже, що ж роловер. Як правило, на практиці чаші застосовують роловери, що реагують на рух миші. Саме такий роловер ми спробуємо створити на цьому уроці. Як вихідний стан роловера ми використовуємо невеликий малюнок (див. нижче), який виконуватиме роль кнопки навігації. Як ви ведете, на малюнку зображений кіт, якщо я не помиляюся це Джеррі, але це абсолютно не важливо. Важливе інше під яким ім'ям зберегти цей малюнок. Якщо ви плануєте розмістити свій сайт у глобальній мережі Інтернет, то необхідно малюнку присвоїти ім'я, що складається з латинських символів у нижньому регістрі. Справа в тому, що інакше у вас можуть виникнути проблеми з розміщення файлів на сервері, що надає хостинг. Отже, вихідний малюнок я зберігаю під ім'ям cat_up, зверніть увагу, що ім'я файлу має смислове навантаження і в ньому немає пропуску. Використовувати пробіл в іменах файлу не можна, з вказаної вище причини. Для того, щоб виготовити роловер, нам знадобиться другий малюнок. Для цього ми просто змінимо вигляд вихідного файлу cat_up і збережемо його під ім'ям cat_over. Для цієї мети я використовував програму Photoshop, але ви можете використовувати будь-який інший редактор для роботи з растровою графікою. .Після того, як обидва малюнки готові та інтегровані в наш сайт, можна приступати до роботи. Розмістіть вихідний малюнок у будь-якому місці Web-сторінки та виділяємо його шовком лівої клавіші миші. Далі в меню "Формат" виберете пункт "Динамік HTML ефекти", після цього на екрані з'явиться відповідна панель (якщо вона не була запущена раніше), що складається з трьох випадаючих меню. Використовуючи мишу, у першому випадаючому меню вибираємо подію, на яку буде реагувати наш роловет. Як ми вже вирішили, цією подією буде розміщення курсору миші над малюнком, тому ми вбираємо пункт "Рух миші". У другому меню, що випадає, ми вибираємо ефект, який відбудеться при наведенні миші на роловер. У принципі, у разі нам і вибирати щось нічого не доводиться т.к. пункт всього один "Змінити картинки". Звичайно його ми і вибираємо клацанням миші. У третьому меню, що випадає, у нас знову немає альтернативи і ми вибираємо єдиний пункт "Вибір картинки...". Після того як відкриється вікно вибору малюнка, ми знаходимо наш файл з ім'ям cat_over і робимо на ньому подвійне клацання миші. Якщо ви все зробили правильно, то при наведенні курсору миші має з'являтися малюнок зі світлим фоном. Невже все так просто? Так, справді просто, вся річ у тому, що левову частину роботи зі створення роловера програма FrontPage взяла на собі. Програмою FrontPage був автоматично згенерований код на мові JavaScript, а нам залишилося лише милуватися результатами своєї роботи. Зробіть самостійно.У цьому уроці було описано створення роловеру на основі малюнка. Самостійно спробуйте виготовити роловер на основі фрагмента тексту, використовуючи як зразок наведені вище приклади. Якщо у вас виникли питання, то ви їх можете поставити на

З розвитком Інтернетуз'явився протокол обміну інформацією, протокол називається HTTP (HyperText Transfer Protocol- Протокол передачі гіпертексту). Разом з цим протоколом з'явилася і служба World Wide Web(часто звана WWWабо просто Web), яка є великою мережею серверів HTTP, що передають файли через Інтернет.

Основну частину цих файлів є Web-сторінки– спеціальні файли, написані мовою HTML (HyperText Markup Language- Мова розмітки гіпертексту). Web-сторінкипублікуються в Інтернетшляхом розміщення таких файлів на серверах HTTP (Web-вузли). Зміст Web-сторінокможе бути різним і присвяченим абсолютно довільним темам, але всі вони використовують одну й ту ж основу – мову HTML.
Більшість людей, які бажають створити свій власний сайт або сторінку, знайомі з мовою HTMLтільки з чуток. Тому їм на допомогу може прийти програма Microsoft FrontPageодин з найвідоміших конструкторів сайтів.

FrontPage, входить до пакету додатків Microsoft Office, став першим продуктом широкого використання для Internet, що поєднує в собі клієнтську та серверну частини та забезпечує можливість розробки сайту в цілому та встановлення його на більшість популярних серверів. FrontPageздатний взяти він всю необхідну роботу з програмування. Однак FrontPageстане досить серйозним помічником і для професійних розробників, які віддають перевагу повному контролю над творчим процесом.

Вікно програми FrontPage 2003.

Програма FrontPageвипущена компанією Microsoftі виконана в єдиному стилі продуктів, що входять до пакету Microsoft Officeтому зовнішній вигляд програми практично не відрізняється від текстового процесора. Word .

У верхній частині вікна розміщується рядок меню та дві панелі інструментів: Стандартна та Форматування. Вмикати або вимикати відображення панелей інструментів дозволяє меню Вид.
У лівій частині знаходиться Панель уявлень, за допомогою якої можна перемикати режими документа.
Основну частину вікна займає робоча область, де можуть бути відкриті одне або кілька вікон, що містять окремі документи.
У нижній частині вікна розташовується рядок стану, що містить довідкову інформацію. Також у нижній частині вікна знаходяться три кнопки перегляду документа.
Відображення панелей інструментів.
Для управління панелями інструментів FrontPageможна скористатися тими ж способами, як у Microsoft Word. А саме:
у меню Видтреба вибрати пункт Панелі інструментів, а в новому підменю, що відкрилося - встановити прапорцінавпроти тих панелей інструментів, які вам потрібні; або клацнути правою кнопкою мишіза будь-якою панелі керування(або по області поряд з нею) і так само скористатися контекстним меню.

FrontPage, як і інші додатки Microsoft Office, дозволяє додавати, видаляти, міняти місцями пункти меню та кнопки на панелях інструментів. Також є можливість створювати повністю свої панелі.
Для цього треба:

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

Створення нової Web-сторінки.

Якщо ви запустили FrontPageотже, нова Web-сторінкау вас вже створена (при запуску FrontPageодразу відкривається нова порожня Web-сторінка, готова для розміщення тексту та інших елементів).
Створити нову Web-сторінкуможна й іншими способами:

За допомогою кнопки Нова сторінкана Стандартної панеліінструментів.
меню Файлвибрати підменю Створити, а потім - Сторінкаабо Web-вузол;
за допомогою комбінацій Ctrl+N;
за допомогою контекстного меню(працює у всіх режимах, крім режимів Завдання та Звіти) - для цього всередині Списку папокданого Web) треба клацнути правою кнопкою миші і в контекстному меню вибрати пункт Створити  Сторінка.

Створення сторінок за допомогою майстра та шаблонів.

Як уже говорилося вище, якщо для створення нової сторінки ви скористалися меню Файл  Створити  Сторінка або веб-сайт, то FrontPageзапропонує скористатися шаблоном для створення нової сторінки.
Для цього він відкриє діалогове вікно, зовнішній вигляд якого наведено нижче:

На вкладці Загальніданого діалогового вікна виводиться перелік шаблонів FrontPage, доступних зараз. Вибравши будь-який із шаблонів, можна переглянути його опис у поле Зразок.
Створення FrontPage Web.
Microsoft FrontPage Web- це набір Web-сторінок, файлів із зображеннями та інших компонентів, які можна розглядати як єдине ціле.
Якщо робити сайт у FrontPage, то для його зберігання найзручніше використовувати FrontPage Web.
найголовніший плюс - це можливість перейменовувати файли, що входять до складу FrontPage Web.
Уявіть собі, що перед публікацією вашого сайту Інтернетви раптом помітили, що пара файлів у вас названо російськими іменами. - «Тепер по всіх файлах доведеться лазити та посилання ручками міняти!» Думете Ви. Ось тут і допоможе FrontPage Web- Ви можете спокійно перейменувати файли, а FrontPageсамостійно пройдеться по всіх інших файлах, що входять до FrontPage Webі перейменує всі посилання виправлений вами файл.
всі інші переваги описувати не буду, але хочеться сказати, що для використання всіх можливостей FrontPage, то краще використовувати FrontPage Web.
Отже, щоб створити новий FrontPage Webнатисніть на стрілочку, розташовану ліворуч від кнопки Нова сторінка на панелі інструментів і в меню, що випадає, виберіть пункт Веб-вузол.

Відкриття веб-сторінок.

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

Відкрити вже існуючу Web-сторінкуможна у будь-якому з існуючих режимів.

З режиму Page Viewsє чотири способи відкрити існуючу сторінку:

1 спосіб

Якщо ви працюєте з FrontPage Web, то просто виберіть потрібний файл у Списку папокі двічі клацніть мишею.

2 спосіб

У меню Файл виберіть пункт Останні файли. З каскадного меню, що з'явилося, виберіть потрібний файл.

3 спосіб

За допомогою діалогового вікна Відкриття файлу: Файл  Відкрити.

Попередній перегляд.

Для того, щоб подивитися, як ваша сторінка виглядає безпосередньо в браузері, можна скористатися вкладкою Перегляд в режимі редагування Web-сторінки. Але в цьому випадку може виявитися, що браузер FrontPageне цілком коректно відобразить деякі елементи вашої сторінкитому найкраще:
скористатися кнопкою на панелі інструментів
або в меню Файлвибрати пункт Попередній просмотр в браузері.

Якщо ви скористалися першим способом, вміст вашої сторінки відобразиться у вбудованому браузері FrontPage.
Якщо ж ви скористалися другим способом, то FrontPageвиведе діалогове вікно Перегляд в браузері…

Тут можна:
Вибрати браузер, в якому ви хочете переглянути свою Web-сторінку. Як правило, спочатку тут відображається браузер, який встановлено на вашій машині за замовчуванням.
Додати будь-який інший браузер, для чого необхідно скористатися кнопкою Додати.
Редагувати або видалити встановлені браузери.
Встановити розмір екрану, на якому переглядатиметься ваша Web-сторінка

Збереження Web-сторінок.

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

Вилучення Web-сторінок.

При роботі з Web-сайтомрано чи пізно станеться так, що якісь сторінки вам будуть більше не потрібні і вам захочеться видалити їх.

Існує три способи видалення Web-сторінки.

1 спосіб

У панелі Список папоквиділіть файл, який потрібно видалити і натисніть кнопку Deleteна клавіатурі.

2 спосіб

У панелі Список папокклацніть правою кнопкою миші по файлу(або значок файлу), який необхідно видалити і в контекстному меню виберіть пункт Видалити.

3 спосіб

У панелі Списокпапок виділіть файл, який потрібно видалити, а потім виберіть пункт Видалити в меню Правка.

Робота з текстом.

На перший погляд, введення тексту в FrontPageнічим не відрізняється від введення тексту в будь-якому текстовому редакторі (наприклад, Microsoft Word).
Для того, щоб набрати текст, достатньо клацнути мишею в будь-якому місці сторінки, і курсор буде поміщений у найближчу точку, до якої можна ввести текст.
Набір великих літер, редагування тексту (видалення символів, вставка тексту і т.д.) проводиться так само, як у Microsoft Word.
Є лише одне невелике АЛЕ: при натисканні клавіші Enterво FrontPageздійснюється примусовий перехід курсору на новий рядок, при цьому до та після абзацу ставляться фіксовані абзацні відступи.
Якщо вам не потрібно створювати абзаци, то для переходу на новий рядок найкраще використовувати комбінацію клавіш Shift+Enter.

Робота із зображеннями.

Графічно формати Web.

Всі комп'ютерні зображення, всі формати для їх зберігання (а отже, і всі програми для їх обробки) поділяються на два великі класи - векторні та растрові. Векторне зображенняскладається з об'єктів - геометричних форм, складених з прямих, дуг, кіл і кривих Безьє. Переваг у векторної графікичимало. З погляду дизайнера, найголовніша її перевага полягає в тому, що векторну графіку можна "крутити" як завгодно, не боячись "протерти дірку" у зображенні або втратити частину інформації. Інша перевага - невеликий обсяг файлів (порівняно з растровими зображеннями) і незалежність від дозволу пристроїв виведення (чи то принтер або екран монітора). Ці фактори зробили векторну графікуймовірним кандидатом для використання в Internet. Правда варто обмовитися, що на сьогоднішній момент векторна графіка зустрічається не так часто, як хотілося б.
Тим не менш, серед реально застосовуваних векторних форматів хотілося б відзначити формат Shockwave Flash фірми Macromedia. Для перегляду цього формату браузеріпотрібен модуль, що підключається ( plug-in), що безкоштовно розповсюджується фірмою Macromedia. На сьогоднішній день існують як сайти повністю і повністю створені за цією технологією, так і сайти, які використовуються Flash-форматлише частково.
Растрове представлення графіки виходить з понятті растру. Растр– це сукупність об'єктів (у разі пікселів), розміщених у однакові рядки і стовпці. Тобто. растровий комп'ютерний файлможна розглядати як набір маленьких кольорових або сірих квадратиків, що утворюють зображення мозаїки. Т.к. розмір цих квадратиків свідомо малий, то під час перегляду растрової графіки ці квадратики зливаються друг з одним, утворюючи безперервну зміну кольорів.

Растровий формат зберігання зображення має свої переваги, так і недоліки. Однією з високих плюсів растрової графіки є можливість роботи з півтонами, тобто. можливість передавати зображення так само, як воно виглядає в житті. А ось серед недоліків основною проблемою є розмір файлу. Звичайно, чим більше пікселів відведено для формування зображення, тим вище якість переданого зображення, проте, тим більше буде і розмір файла.
Якщо ми тепер повернемося до браузерів, то можна сказати, що більшість браузерів без проблем можуть відображати графічні файли чотирьох форматів (* .gif, *.jpg, *.png, *.bmp), використовувати з яких на сьогоднішній момент найкраще два - * .gif та *.jpg. Та й то після попередньої оптимізації.
Вставка зображень на Web-сторінку.
Вставляти зображення на ваше Web-сторінкуможна кількома способами:
1. Перетягнути зображення з Windows Explorer(Тобто прямо з провідника).
2. Перетягнути зображення з Internet Explorer.
3. Перетягнути файл із зображенням із панелі Список папокпрямо на сторінку.
4. За допомогою буфер обміну- скопіювати зображення до буфера обміну з будь-якої іншої програми, а потім на сторінці вставити його з буфера обміну.
5. За допомогою кнопки Додатималюнок із файлу на панелі інструментів Стандартна.
6. За допомогою меню Вставка  Малюнок.
Розглянемо ці методи докладніше:
Спосіб 1
Windows Explorer(тобто прямо з провідника) треба:
во FrontPage
відкрити вікно провідника;
у вікні провідника виділити файл із картинкою, яку ви хочете вставити на свою сторінку;
лівою клавішею миші перетягнути файл-картинку на свою Web-сторінкукартинка вставиться в те місце, де на сторінці знаходився курсор вставки.
Спосіб 2
Для того щоб перетягнути зображення з Internet Explorerтреба:
во FrontPageвідкрити сторінку, на яку потрібно додати зображення;
в браузерівідкрийте те зображення, яке ви хочете помістити на своїй Web-сторінці браузераназва файлу має закінчуватися на jpg, jpeg, gif);
лівою клавішою миші перетягніть виділену картинку на свою Web-сторінку;
Спосіб 3
Для того щоб перетягнути файліз зображенням з панелі Списокпапок, прямо на сторінку треба:
во FrontPageвідкрити сторінку, на яку потрібно додати зображення;
вибрати необхідний файл із картинкою на панелі Список папок;
лівою клавішею мишіперетягніть виділену картинку на свою Web-сторінку;
вибране зображення вставляється в те місце, де на сторінці знаходився курсор вставки.
Спосіб 4
Для того, щоб вставити зображення на свою Web-сторінкуза допомогою буфера обміну, треба:
у тому додатку, з якого ви хочете скопіювати картинку, виділити зображення та за допомогою клавіш Ctrl+Cскопіювати малюнок у буфер обміну;
на своїй Web-сторінцівставити це зображення з буфера обміну за допомогою клавіш Ctrl+V
Спосіб 5
Web-сторінкуви вирішили скористатися кнопкою Додати зображенняз файлу на панелі інструментів Стандартна, то FrontPageвідкриє діалогове вікно Малюнок.
В даному діалоговому вікні вкажіть файл з картинкою, який ви хотіли б додати на свій Web-сторінкута натисніть кнопку Вставити.

Спосіб 6
Якщо для вставки зображення на свою Web-сторінкуви вирішили скористатися меню Вставка  Малюнок, то FrontPageзапропонує зробити вам подальший вибір:

Зображення… – вибір того пункту меню надає можливість скористатися готовою бібліотекою картинок.
З файлу… – вибір цього пункту меню надає можливість самостійно вказати місцезнаходження файлу з картинкою, який ви хочете додати на свою Web-сторінку(використання цього пункту призведе до відкриття діалогового вікна Малюнок, робота з яким була описана вище).
Створити фото колекцію… - за допомогою цього пункту меню можна створити колекцію зображень у певному стилі. Для цього у вікні, що відкрилося Властивостіколекції фотографій за допомогою кнопки Додатина вкладці Малюнкивибрати зображення, а на вкладці МакетВибрати формат оформлення.
Додавання мультимедійних файлів.

Крім простої графіки, як – зображення у форматах * .gif, *.jpg, *.pngі т.д. FrontPageдозволяє розміщувати на ваших Web-сторінкахмультимедійні файли. До них відносяться: відеокліпи, звуки...

Для вставки відеокліпу потрібно в меню Вставкавибрати пункт Малюнок, а потім Відеозапис..

Відкриється діалогове вікно Відео, у ньому відображатимуться відеокліпи у форматі * .avi, *.asf, *.ram, *.ra.

Додати звук на Web-сторінкуможна на вкладці Загальні діалогового вікна Властивості сторінки.

Робота із таблицями.

Таблиця- один з найпотужніших інструментів, які використовуються при створенні сайтів.
Спочатку таблицізастосовувалися лише подання структурованих даних. Однак поступово вони перетворилися на потужний універсальний засіб для компонування. Web-сторінок.

Створення таблиць

Найпростіший спосіб створення таблиці- Використовувати кнопку Додати таблицю, розташовану на панелі інструментів Стандартна.
Ще один спосіб – за допомогою пункту меню Таблиця  Вставити  Таблиця.
А так само таблицюможна намалювати та вставити за допомогою буфера обміну.

Введення даних та навігація по таблиці.

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

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

Однак зручніше для переміщення між осередками використовувати комбінації клавіш:
Поєднання клавіш: Дія:

Tabу будь-якому місці таблиці, крім кінця останнього рядка перейти в сусідній осередок і виділити її вміст
Tabв кінці останнього рядка додати новий рядок донизу таблиці
Shift+Tabперейти в попередній осередок і виділити його вміст
Enterпочати новий абзац
Enterна початку першого осередку додати текст перед таблицею на початку документа

Створення та застосування форм.

Формиявляють собою текстові поля, перемикачі, прапорці, кнопки та багато інших елементів керування. Відвідувачу сайту достатньо ввести якусь інформацію в те чи інше текстове поле, вибрати якісь дані із запропонованого списку, натиснути на кнопку Відправити, щоб дані вирушили на Web-сервердля обробки (або обробилися відразу на сторінці).

Давай познайомимося з тобою – будь ласка, заповни наступні поля:
Твоє ім'я:

Твоє прізвище:

Дата твого народження: рік місяць число

Дякую! А тепер – у дорогу!
1. Мала, а спритна.
Де буває, там наказує.
У намет зайде
Богатиря переверне.
Хто це?
Муха Блоха Капризна дитина
2. Випука очі сидить,
По-французьки каже,
По-блоші стрибає,
По-людськи плаває.
Про кого йдеться?
Кіт Жаба Папуга

3. Чим дихає тюлень, пірнувши під кригу?

4. Чому плачуть великі черепахи?

5. Який одяг може і оселедець носити?
Шубу Пальто Тільняшку
6. Кого називають «річковим конем»?
Видру Бегемота Крокодила

7. Які птахи не висиджують пташенят?

8. Які птахи не вміють літати?

Якщо вам необхідно вибрати кілька відповідей – натисніть та не відпускайте клавішу Ctrlі клацніть лівою клавішею миші по відповіді

Але створення формна самій сторінціце лише половина роботи. Тому що обов'язково має існувати програма, яка зможе обробити дані, введені користувачем за допомогою форм.
Така програма може бути розміщена на сервері; вона може перебувати у вашому Web-сайтіу вигляді окремого файлу, а може бути просто прописана в коді htmlна вашій Web-сторінці.
Саме вона визначає - що ж станеться з тією інформацією, яку запровадив користувач:

інформаціяможе бути додана до бази даних і на її основі можуть бути побудовані різні графіки, рейтинги…;
інформаціяможе бути переправлена ​​електронною поштою (це часто використовують для отримання інформації про користувача в анкетах різного роду);
інформаціяможе бути оброблена прямо на місці і відвідувач вашого сайту відразу отримає відповідну інформацію (наприклад - отримає бали за тест, побачить введену ним інформацію в гостьову книгу ...).

Щодо форміснує кілька основних правил:

1. Кожна формазаймає певну ділянку Web-сторінки. На одній Web-сторінціможе бути розташована одна або декілька форм.
2. Всередині кожної форми повинен розміщуватися принаймні один з елементів форм (хоча, як правило, їх декілька).
3.Кожен елемент формимає ім'я та значення. Ім'я ідентифікує поле введення інформації, а значення прирівнюється до значення, вибраного користувачем.
4. Один із елементів форми (їм може бути звичайна кнопка або будь-який малюнок) повинен виконувати функцію кнопки Надіслати.

Створення форм у FrontPage.
Щоб додати форму на Web-сторінку, Треба:

Встановити курсор на те місце, де ви хочете вставити форму.
У меню Вставкавибрати пункт Форма, у меню знову вибрати пункт Форма. Формабуде поміщена на вашу Web-сторінку- з'явитись область, позначена пунктирною рамочкою, з двома кнопками: Надіслати та Скинути.
Користуючись тим самим пунктом меню Вставка  Формапослідовно вставити необхідні вам елементи форм, вибираючи їх з каскадного меню, що розкривається (при цьому необхідно пам'ятати, що всі елементи форми вставляються всередині області форми, позначеної пунктирною рамочкою).
Після того, як формастворена, залишається тільки наповнити її змістом – елементами форм, текстом, зображеннями, таблицями… (при цьому розміри формизмінюватимуться автоматично).
Додавати зміст формможна звичайним чином. Наприклад, текст можна набирати, а можна вставляти з буфера обміну… Усі дії з доданими об'єктами аналогічні.
Однак створення форми- це лише початок роботи. Після її створення необхідно налаштувати властивості, як самої форми, і її елементів.

Налаштування властивостей форми.

Для обробки або збереження даних, які вводять відвідувачі Web-сторінки, необхідно або скористатися можливостями, що надаються FrontPage Server Extensions, або якоюсь іншою програмою, що працює на Web-сервері.
Але яку б програму ви не вибрали, вам все одно доведеться налаштувати властивості форми та елементів у ній.
Щоб відкрити вікно властивостей форми, треба:
в меню Вставкавибрати пункт Форма, а потім -
або
викликати контекстне меню до форми і у контекстному меню вибрати пункт Властивості форми.
В результаті відкриється діалогове вікно Властивості форми.

1. У поле Збереженнярезультатів необхідно вказати, що треба буде зробити з даними, введеними в форму. Ви можете вибрати такі варіанти:
o Надсилання Ім'я файлу- дані будуть поміщені у вказаний файл на Web-сервері. Цей файл може бути Web-сторінкою, яка з часом буде ставати все довшою і довшою, або файлом даних, який потім можна буде обробити в Excel, Accessабо будь-якою іншою програмою;
o Надсилання Адреса пошти- у цьому випадку щоразу при натисканні відвідувачем Web-сторінкикнопки Надіслати на формібуде генеруватися електронне повідомлення, яке надсилатиметься за вказаною вами адресою. У цьому повідомленні будуть утримуватись всі дані, які були введені користувачем на Web-сторінці.
o У базі даних- у цьому випадку дані формибудуть відправлені до бази даних. База повинна бути на Web-сервері(Або бути доступною для нього).
2. У поле Властивостіформи необхідно вказати ім'я форми
Режими перегляду в FrontPage.
FrontPageпропонує шість різних режимів для перегляду вмісту Web-сайту:

Сторінка,
Папки,
Звіти,
Переходи,
Гіперпосилання,
Завдання.
Для вибору потрібного режиму можна скористатися панеллю Подання, розташованої в лівій частині екрана, або в меню Видна панелі інструментів Стандартнавибрати пункт меню.

Сторінка
У цьому режимі здійснюється створення та редагування Web-сторінок.Тут можна створювати порожні Web-сторінкита сторінки, що базуються на шаблонах, призначати сторінкам теми (набір стилів представлення сторінки на екрані). У цьому режимі можна додавати та форматувати текст, оформляти сторінкиз використанням графічних та відеозображень (підтримується перетворення ряду графічних форматів у формати * .gif, *.jpg і *.png), додавати до сторінки звуковий супровід, подавати інформацію в таблицях, кадрах та формах і, нарешті, створювати гіперпосилання. Такий далеко не повний перелік можливостей FrontPageз редагування вмісту Web-сторінок.
Папки
У цьому режимі можна переглядати структуру Web-вузла(файли та папки) і керувати нею аналогічно тому, як ви це робите в Windows, цей режим дає можливість отримати більш детальну інформацію про файли та папки, ніж це передбачено в режимі перегляду Сторінка.
Звіти
Надає вашій увазі більше десятка звітів, що містять різноманітну інформацію про Web-вузлі, відкритому в FrontPage.
Переходи
Призначена для перегляду ієрархії сайту. У цьому режимі можна керувати ієрархією, перетягуючи прямокутники (кожен з яких представляє певну Web-сторінку).
Гіперпосилання
Демонструє систему гіперпосилань, якими пов'язані між собою сторінки Web-вузла(а також систему гіперпосилань на інші вузли), забезпечує перевірку їхньої цілісності та можливість зміни.
Завдання
Цей режим призначений для керування завданнями Web-вузла(Додавання, видалення, виконання, встановлення пріоритету виконання, а також відстеження стану завдань).

Завантажити БЕЗКОШТОВНО FrontPageможна за наступним посиланням:

http://letitbit.net/download/28576.28615a37d4f2a575882748541adf3bf00/Microsoft_Office_FrontPage_2003.rar.html

У попередніх розділах ми розглянули створення сайту, який містить одну сторінку. Але, як правило, сайт складається з кількох сторінок. Для додавання до сайту нових або створених сторінок раніше використовуються команди меню, комбінації клавіш, кнопка Створити (New) на стандартній панелі інструментів.

Для переміщення по Web-сторінці, як і в будь-якому текстовому редакторі, можна використовувати смуги прокручування, клавіші зі стрілками на клавіатурі та комбінації клавіш. Так, наприклад, для початку сторінки використовується комбінація клавіш +, наприкінці сторінки - +. Клавіші І Дозволяють переміститися на один екран вгору або вниз відповідно.

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

Діалогове вікно Шаблони веб-сайтів(Web Site Templates), що відкривається під час створення нового сайту, містить шаблони, що пропонують створити порожній або односторінковий сайт. Необхідну для розміщення інформації кількість сторінок ви додаєте до сайту самостійно. Це можуть бути нові сторінки, на яких ви розмістите інформацію пізніше, або Web-сторінки, створені раніше як з використанням програми FrontPage, так і за допомогою інших програмних продуктів.

Зауваження

Питання імпортування файлів у даному уроці не зачеплять, оскільки цьому буде присвячений окремий урок.

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

  • Кнопку Створити(New) на стандартній панелі інструментів
  • Команду Створити(New) меню Файл(File), що розміщує у вікні програми FrontPage панель Створення веб-сторінки або вузла(New Page or Web)
  • Комбінація клавіш +

При використанні комбінації клавіш або натискання кнопки Створити(New) на стандартній панелі інструментів до сайту за замовчуванням додається порожня сторінка, створена за допомогою шаблону Звичайна сторінка(Normal Page).

Якщо при створенні нової сторінки ви хочете використовувати будь-який інший шаблон, вам необхідно відкрити діалогове вікно Шаблони сторінок(Page Templates) (рис. 16.1), що містить перелік шаблонів сторінок, запропонованих програмою FrontPage. Щоб відкрити вікно, виконайте одну з таких дій:

  • У меню кнопки Створити(New) стандартної панелі інструментів виберіть команду Сторінка(Page)
  • У меню Файл(File) виберіть команду Створити(New), а потім з підменю, що відкрилося - опцію Сторінка або веб-сайт(Page or Web). У вікні FrontPage з'являється панель Створення веб-сторінки або вузла(New Page or Web), на якій виберіть команду Шаблони сторінок(Page Templates)

Мал. 16.1. Діалогове вікно для вибору шаблону створюваної сторінки

Діалогове вікно Шаблони сторінок(Page Templates) містить список шаблонів. Виберіть шаблон, який ви бажаєте використовувати для створення нової сторінки. Використовуючи область Зразок(Preview) діалогового вікна, перегляньте, який вигляд вона матиме. Натисніть кнопку ОКдля закриття вікна та розміщення шаблону сторінки у сайті.

В результаті додавання нової сторінки до сайту у робочій області програми FrontPage з'явиться порожня сторінка з назвою newjage_l.htm(Рис. 16.2). Ця назва вказує на те, що ця сторінка є першою, яку ви створюєте з моменту запуску програми. Під час створення наступних сторінок FrontPage надає їм імена зі зростаючими номерами: new_page_2.htm, newjage_3.htm і т.д.

Мал. 16.2. До сайту додано нову сторінку, створену з використанням шаблону "Звичайна сторінка"

Кнопка Видалити… (6)

дозволяє

виділений

селектор

Користувальницькі

стилі.

на кнопку

Створити...

відкриває

діалогове

Створення

стилю, в якому

створюються

селектори. Натискання

на кнопку Змінити… (8)

відкриває діалогове

Зміна

стилю, яке

Рисунок 5.40 – Діалогове вікно Стиль

повністю збігається з вікном Створення стилю та служить для зміни опису виділеного селектора. У разі зміни стилю для тега зі списку HTML Теги, цей селектор тега переноситься до списку стилі користувача.

Працюючи з діалоговим вікном

Зміна

(Створення) стилю

використовуються наступні поля та кнопки.

У полі Ім'я (для вибору) (1) : вводиться

ім'я селектора (ім'я селектора тега має

збігатися з ім'ям самого тега; ім'я

селектора класупочинається з точки (.).

Кнопка Формат (2) дозволяє отримати

доступ до випадаючого списку, в якому

можна вибрати такі пункти:

Шрифт… –

відкриває

діалогове

Рисунок 5.41 – Вікно Зміна стилю

Шрифт,

що дозволяє зробити

стильові налаштування шрифту.

Абзац… – відкриває діалогове вікно Абзац, яке дозволяє встановити абзацні відступи (ліворуч та праворуч) від вікна браузера, відступ для першого рядка, налаштувати інтервали між рядками та абзацами, налаштувати інтервали між словами в абзацах;

Кордон… – відкриває діалогове вікно Межі та заливання, за допомогою якого можна встановити кордон для виділеного абзацу, залити абзац будь-яким

кольором; Нумерація… – відкриває діалогове вікно Список, за допомогою якого можна

створити нумеровані, марковані та інші списки; Положення… – відкриває діалогове вікно Положення, за допомогою якого

Ви можете точно розмістити різні елементи на сторінці.

Поле Зразок (3) показує, як виглядатиме об'єкт, до якого буде застосований створений стиль.

У полі Опис (4) відображається текстовий опис атрибутів цього стилю.

Випадаюче меню Тип стилю (5) активно у разі створення селектора класу. При виборі типу Знак до початку імені селектора додається слово span.

селектори тегів застосовуються автоматично після вибору

відповідних команд;

шляхом вибору їх з інших стилів у випадаючому

списку Стиль (рис.5.42) на панелі інструментів

Форматування;

шляхом вибору

з випадаючого вікна Клас: діалогового

Малюнок 5.42 –

Список стилів

Зміна

(рис.5.43), що відкривається

кнопкою Стиль… з різних

діалогових вікнах (наприклад:

Властивості малюнка,

Властивості

таблиці, Властивості осередку,

Список, Розрив, Властивості

горизонтальну лінію).

використання

впроваджених

стилів їх

необхідно налаштовувати для кожної

веб-сторінки.

Рисунок 5.43 – Вікно Зміна стилю

5.4.3. Зовнішні таблиці стилів.

У цьому випадку для визначення стилів CSS приділяється окремий файл, на який будуть посилатися web-сторінки. Такий підхід:

забезпечується централізоване керування стилями CSS на всіх web-сторінках

(внесені зміни будуть автоматично застосовуватися одразу на всіх web-сторінках, які посилаються на файл, що містить CSS);

зменшується сумарний обсяг веб-сайту;

збільшується швидкість завантаження веб-сторінок.

Для створення зовнішнього файлу, що містить каскадні таблиці стилів, необхідно виконати такі дії (рис.5.44).

Виконати команду Файл→Створити та вибрати команду Інші шаблони сторінок.

У діалоговому вікні Шаблони сторінок , вибрати вкладку Таблиці стилів (2), на якій показані шаблони таблиць стилів, що входять до складу FrontPage

Для самостійного створення таблиці стилів вибрати шаблон Звичайна таблиця стилів(3) і натисніть кнопку OK.

Рисунок 5.44 – Створення зовнішнього файлу стилів

Отриману сторінку з розширенням.css необхідно зберегти (команда Файл→Зберегти ) в одну з папок web-сайту з заданим ім'ям обов'язково

латинськими літерами та розширенням .css .

Створити опис для селекторів тегіві селекторів класів, використовуючи команду Формат→Стиль… , яка відкриває діалогове вікно Стиль (рис.5.40), описане у попередньому розділі.

Створену таблицю стилів необхідно зв'язати зі сторінками веб-сайту. Для цього потрібно.

Виконати командуФормат→Зв'язки з таблицями стилів… .

У діалоговому вікні, що відкрилосяЗв'язати з

таблицею стилів

можна встановити

такі параметри:

перемикач всі сторінки (1) застосовує

стилі до всіх виділених сторінок веб-сайту;

перемикач

виділені

сторінки

застосовує стилі до поточної сторінки або до web-

сторінкам, виділеним на панелі Список папок;

кнопка Додати… (3) служить для додавання

Малюнок 5.45 – Діалогове вікно

кнопка Видалити (4) служить для видалення файлу,

Зв'язати із таблицею стилів

з таблицями каскадних стилів до web-сторінок (якщо використовують кілька таблиць каскадних стилів);

Кнопка Змінити (7) відкриває виділений у вікні URL-адреса: (8) css-файл для редагування.

Натисніть OK.

До виділених об'єктів селектори застосовуються по-різному:

селектори тегів використовуються автоматично після вибору відповідних команд;

селектори класів застосовуються:

Шляхом вибору їх з числа інших стилів у списку Стиль (рис.5.42) на панелі інструментів Форматування :

Шляхом вибору з вікна, що випадає Клас: діалогового вікна Зміна стилю

(рис.5.43), яке відкривається кнопкою Стиль… з різних діалогових вікнах

(наприклад: Властивості малюнка, Властивості таблиці, Властивості осередку, Список,

Розрив, властивості горизонтальної лінії).

5.5. Фрейми (кадри) у FrontPage 2003.

Фрейми – засіб для поділу вікна браузера на декілька областей

(фреймів), у кожній з яких відображається вміст окремої web-сторінки. Кожна область може мати свої смуги прокручування та її перегляд за допомогою них, що не впливає на інші області. За допомогою програми FrontPage 2003 можна створювати різні кадрові структури, вставляти вбудовані кадри і залежно від

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

Для організації кадрової структури необхідно (рис.5.46).

Малюнок 5.46 – Створення сторінки кадрів Виконати команду Файл→Створити та вибрати команду Інші шаблони сторінок.

(1) в галузі завдань Створення .

У діалоговому вікні Шаблони сторінок , вибрати вкладку Сторінка рамок (2), на якій показані шаблони (3) web-сторінок з фреймовою структурою,

що входять до складу MS FrontPage 2003.

Виділити найбільш вдалий шаблон і натиснути кнопку "OK".

Вікно нової web-сторінки кадрів (рис.5.47) буде розбите на частини відповідно до обраної структури. Цю сторінку необхідно зберегти (Файл→Зберегти ) в одну з папок веб-сайту з ім'ям (1) заданим обов'язково латинськими літерами.

Малюнок 5.47 – Нова web-сторінка кадрів

1) Кнопка Задати початкову сторінку…(2) дозволяє вибрати вже готову web-5

сторінку сайту у вікні Додавання гіперпосилання.

2) Кнопка Створити сторінку(3) завантажує у кадр нову порожню web-сторінку,

редагування якої може бути здійснено звичайним чином.

Якщо частина кадрів заповнюється за допомогою кнопки Створити сторінку, то при збереженні сторінки кадрів (Файл→Зберегти ) окремо зберігається кожна нова web-сторінка (імена обов'язково задаються латинськими літерами).

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

Робота над web-сторінками, що входять у фреймову структуру, можлива як окремо, так і через сторінку фреймів.

Для вибору одного з кадрів потрібно натиснути на нього лівою кнопкою миші. Активний кадр відрізняється від інших кольоровою рамкою (5). Якщо натиснути лівою кнопкою миші на зовнішню рамку сторінки кадрів, то виділеною виявиться вся кадрова структура. Кордони кадрів можна переміщати натиснутою лівою кнопкою миші.

Для роботи з виділеним кадром можна скористатися командами меню

Рамки.

Команда Розділити рамку дозволяє розбити кадр на дві частини по вертикалі або горизонталі.

Команда Видалити кадр видаляє кадр зі сторінки кадрів. При цьому якщо web-

сторінку, що завантажується в цей кадр, була збережена раніше, вона залишається в структурі web-сайту.

Команда Відкрити сторінку в новому вікнівідкриває веб-сторінку кадру для редагування окремо від кадрової структури.

Команда Властивість рамки.відкриває діалогове вікно

Властивості рамки , в якому можна встановити різні параметри кадру: ім'я, опис, розміри, ширина і відображення меж, властивості смуг прокручування, відступи.

Малюнок 5.48 – Вбудований кадр

Ще один варіант використання фреймів – вставка у звичайну web-сторінку вбудованого кадру (рамки) (рис.5.48) командою Вставка→Вбудована рамка. У

результаті в тому місці, де було встановлено курсор, вставляється рамка, яку можна заповнити двома способами: Задати початкову сторінку…або Створити сторінку.

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

кадру: ім'я кадру, назва, розміри, відступи, вирівнювання, текст, що заміщає.

організації

гіперпосилань

сторінками

фреймовий

структури

необхідно з

діалогове

Кінцева рамка (рис.5.49)

та вказати, куди буде

завантажувати

новий об'єкт.

Поле Поточна

сторінка

Рисунок 5.49 – Діалогове вікно Кінцева рамка

рамок (2) дозволяє клацанням лівої кнопки миші вибрати кадр для завантаження нового об'єкта. У списку (завантаження до того ж кадру, звідки організовувалося гіперпосилання), (завантаження у нове вікно браузера), (завантаження у вбудовану рамку).

5.6. Форми у програмі FrontPage 2003.

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

У програмі FrontPage 2003 підтримуються різні обробники форм, які розміщені на web-серверах, що працюють під керуванням FrontPage Server

Extensions (серверні розширення Microsoft FrontPage - набір програм та сценаріїв, що підтримують створення сторінок у Microsoft FrontPage та розширюють функціональні можливості веб-сервера), SharePoint Team Services версія 1.0 (Microsoft) або Microsoft Windows SharePoint Services 2.0. Ці обробники приймають результати форм і роблять з них різні дії. У програмі FrontPage

підтримуються також сценарії, наприклад ISAPI, NSAPI, CGI та ASP.

Існують три способи створення форми у MS FrontPage 2003.

1) Додавання порожньої форми з кнопкамиНадіслати та Скинути, командою

Вставка→Форма→Форма.

2) Вставка першого поля форми командоюВставка→Форма→Поле форми. Область форми з кнопками Надіслати та Скидання додається автоматично.

3) Вибір та використання доступного шаблону форми або майстра сторінки форм за допомогою таких дій.

У сфері завдань Створення сторінки(команда Файл→Створити) потрібно вибрати

команду Інші шаблони сторінок… та вкладку Загальні.

Вибір одного із шаблонівГостьова книга, Реєстраційна форма, Сторінка пошуку, Форма зворотнього зв'язку дозволяє створити нову web-сторінку із типовою формою.

Вибір шаблону Майстер сторінки формизапускає майстер сторінки форми визначення кількості, типу, змісту елементів форми.

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

Для завдання властивостей форми необхідно встановити курсор всередині форми, і виконати команду Вставка→Форма→Властивості форми…або клацнути правою кнопкою миші в область форми та вибрати команду контекстного меню Властивості форми.. Через війну відкривається діалогове вікно Властивості форми (1 рис.5.50), у якому встановлюються різні параметри форми.

Секція Збереження результатів(2) визначає кінцевий сценарій обробки даних форми. У разі використання власних сценаріїв необхідно встановити перемикач в іншому місці (3) та зі списку вибрати Сценарій, що настроюється..

Рисунок 5.50 – Налаштування параметрів форми

Поле Ім'я форми: (4) служить

для вказівки імені форми.

Кнопка Кінцева рамка

відкриває діалогове вікно

Кінцева рамка, в якому

можна вибрати вікно, з якого робитиметься запит.

Кнопка Параметри… (6)

відкриває діалогове вікно

Параметри оброблювача

форм (7). У полі Дія:

(8) вказується ім'я скрипта для обробки форми або mailto: e-mail для надсилання даних форми на адресу електронної пошти e-mail. У полі Метод: (9) вибирається спосіб передачі (GET спосіб передачі через адресний рядок, POST – спосіб передачі у тілі HTTP запиту). У полі Тип кодування: (10)

вказується тип кодування даних форми під час відправки на web-сервер. Можливі типи кодувань: application/x-www-form-urlencoded - дані форми кодуються як пари імені та значення, що використовується за умовчанням; multipart/form -data - дані форми кодуються як повідомлення з окремими частинами кожного елемента управління на сторінці, використовується для відправлення форм, містять файли; text/plain – дані форми кодуються як відкритий текст, без керуючих та форматуючих символів,

використовується для надсилання даних на адресу електронної пошти.

Кнопка Додатково… (11) відкриває вікноДодаткові властивості форми

для редагування прихованих полів форми (кнопки Додати… , Змінити… ,

Видалити).

Щоб додати форму форми, потрібно виконати команду Вставка→Форма

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

визначає послідовність заповнення полів форми у браузері. Кнопку Перевірити… у цьому вікні можна використовувати лише у випадку, якщо використовується стандартний обробники форм FrontPage 2003. Кнопка Стиль…

текстове

застосовується для введення короткого

повідомлення, наприклад імен та

електронної

Параметри

поля (ім'я, початкове значення,

встановлюються

діалоговому

вікно Властивості текстового поля.

Малюнок 5.51 – Поля форми

Текстове

використовуються для введення одного або кількох рядків тексту, наприклад, коментаря.

Це поле прокручується, що дозволяє вводити тексти різного об'єму. Параметри поля (ім'я, початкове значення, ширина у знаках, число рядків) встановлюються у діалоговому вікні Властивості текстового поля.

Поле відправлення файлу(3) – служить для надсилання файлу на web-сервер у вказану папку web-сайту, складається з поля для введення імені файлу та кнопки огляд, яка дозволяє відкрити діалогове вікно Вибір файлу. Параметри поля (ім'я, ширина у знаках) встановлюються у діалоговому вікні Властивості поля надсилання файлу.

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

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

Список, що розкривається(6) – служить для організації вибору з списку одного або декількох варіантів. Заповнення поля (кнопки Додати… , Змінити… , Видалити , Вгору , Вниз ) та його параметри (ім'я, висота в рядках,

роздільна здатність вибору декількох елементів) встановлюються в діалоговому вікні

Властивості списку . При заповненні поля (кнопкиДодати…,

Змінити… ) відкривається додаткове діалогове вікно Додавання або

Зміна варіанта. У цьому вікні задається назва варіанта (поле Варіант: ),

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

 

 

Це цікаво: