Институт / FI-12 / 13 / Lab_Int_13

Лабораторна робота № 13

Мета: Створення web-сторінок за допомогою програми MS FrontPage.

Теоретичні відомості.

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

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

Програма дає змогу вставляти набагато більше об'єктів і готових web-компонет, ніж програма Word. Користувач може вставити, наприклад, кнопки (Hover Button), тексти, що руха­ються (Marquee), лічильники відвідувань (Hit Counter), аркуші електронних таблиць (Office Spredsheet), діаграми (Office Chart), елементи ActiveX, аплети (Java Applet), створити гра­фічні мініатюри (Thumbnail), таблиці, карти, фрейми, інтерак­тивні форми, надати об'єктам анімаційні ефекти (Dynamic HTML Effects), задати способи зміни сторінок (Page Transmition), подібні до способів зміни кадрів у програмі PowerPoint тощо.

Як і у програмі Word 2000/XP, тут є декілька десятків тем, які можна застосувати для естетичного оформлення сто­рінки чи всього сайту командою Format Theme.

Особливість програми Microsoft FrontPage у тому, що вона є зручною для створення та адміністрування великого професійного сайту. Це досягається за допомогою таких режимів роботи з сайтом: звіт (Reports), навігаційна карта сайту (Navigation), схема гіперпосилань (Hiperlinks), завдання для колективу дизайнерів і виконавців (Tasks).

Для успішної роботи з програмою потрібно знати голов­ні принципи її функціонування, зберігати файли сторінок сайту в конкретній папці і вручну не переміщати їх, щоб не переривати зв'язків між сторінками тощо. Після створення сайту користувач може його опублікувати на web-сервері командою Publish. Переглянути створений сайт можна і в домашніх умовах. Однак, якщо застосовувались деякі компо­ненти чи елементи управління формою, що потребують про­грамної підтримки, то повноцінне функціонування такого сайту буде можливе лише на web-сервері, який має відповідні засоби для їх опрацювання, що називаються Microsoft Front­Page Extensions. Сервери, які працюють з операційною систе­мою Unix, такими засобами зазвичай не володіють.

2. Режими роботи програми. Програму запускають за допомогою головного меню: Start=>Programms=>Microsoft FrontPage. Отримують вікно з традиційними для офісних програм пунктами меню: File, Edit, View, Insert, Format, Tools, Table, Frames, Window, Help.

Програма дає змогу працювати у декількох режимах ві­дображення інформації про сайт, які користувач може задати чи змінити такими командами з пункту View:

• Сторінка (Page);

• Папки (Folders);

• Звіти (Reports);

• Навігаційна карта (Navigation);

• Гіперзв'язки (Hyperlinks);

• Завдання (Tasks).

Вікно програми містить дві або три вертикальні панелі: ліворуч - панель керування режимами (Views) з кнопками для перемикання режимів, праворуч - панель, де відобража­ється поточна сторінка, папка, звіт, навігаційна карта, гіперзв'язки чи відповідно список завдань. Корисною є панель Folder List, яка відображається між цими панелями. Вона не лише містить список папок і файлів поточного вузла, але й функціонує як програма Провідник у Windows.

Перед початком роботи над сайтом варто увімкнути па­нелі Стандартну і Форматування, а інші зайві панелі - вимк­нути за допомогою команд View=>Toolbars.

Для створення сторінки чи її редагування використову­ють команду Page. Після запуску програма знаходиться в ре­жимі Normal. Це режим створення нової сторінки з назвою new_page_l.htm. Інші режими (HTML, Preview) можна задати за допомогою закладок, що розташовані внизу сторінки.

У режимі Normal сторінку створюють так, як це прийня­то у програмі Word, тобто вводять тексти, вставляють картинки, створюють гіперпосилання тощо, як у звичайному текстовому редакторі.

Режимом HTML користуються для перегляду HTML-коду сторінки з метою його модифікації чи вивчення. Режим Preview дає змогу побачити, як виглядатиме сторінка у броузері Internet Explorer.

Кожна сторінка характеризується заголовком, як: придумує користувач відповідно до сюжету сайту, і назвою html-файлу сторінки. Створену сторінку слід зберегти коман­дою Save as... на диску. За замовчуванням програма пропо­нує для цього папку My Webs, що є у папці My Documents, однак користувач може вибрати будь-яку іншу папку. Важливо, щоб усі наступні сторінки свого сайту він зберігав власне у цій папці. Вікно зі сторінкою можна закрити, клацнувши на кнопці закривання, що стосується даної сторінки. Якщо сторінка не була збережена у файлі, то після підтвердження запиту на зберігання відкриється вікно Save as..., де у полі File name користувач може ввести назву відповідного html-файлу, а також змінити за допомогою кнопки Change заголовок сторінки (page title). За замовчу­ванням заголовком є перше слово на сторінці. Заголовок сторінки буде відображатися броузером у рядку заголовків, тому користувач повинен подбати, щоб він був інформа­тивним і цікавим.

Зауваження. Якщо після запуску програми у вікно Nor­mal чи у панель Folder Lists завантажується деяка сторінка чи сайт, то це означає, що програма функціонує у режимі авто­ завантаження сторінки, з якою працювали востаннє. Такий режим можна задати або скасувати командами Tools=>Opti­ons=>закладка General=>Open last Web automatically.

3. Створення сторінки. Щоб створити нову сторінку, ви­конують команди File=>New=>Page. На закладці General ви­бирають Normal Page і натискають на кнопку Ok. На цій же закладці можна ознайомитися і вибрати готовий шаблон для І власної сторінки, якщо він влаштує користувача. Є такі шаблони: бібліографія; вузький текст, розташований ліворуч від картинки (Narrow, Left-Alligned Body); текст-праворуч (Nar­row, Right-Alligned Body); текст у центрі сторінки (One-Column Body) та ін. Зразки оформлення шаблонів можна тут же переглянути у полі Preview, клацнувши один раз мишею на його назві.

На закладці Frames Pages можна вибрати шаблон для створення сторінки з фреймами: Banners and Contents, Con­tents, Header, Nested Hierarchy тощо. Тут також можна заздале­гідь переглянути результат застосування шаблону і вибрати потрібний.

Під час створення сторінки з фреймами користувачеві надаються дві кнопки: 1) Set Initial Page, якщо він хоче розта­шувати у фреймі вже існуючу сторінку, що є на диску; 2) New Page, якщо вміст фрейму створюватиметься з нуля.

Закладку Style Sheets (Таблиця стилів) розглянемо пізніше.

Щоб унести зміни у сайт, його потрібно відкрити коман­дами File=>Open, вибрати потрібну папку і файл index.htm чи інший і натиснути на кнопку Open. Щоб швидко відкрити сайт, який є у web-папці, потрібно виконати команди File=>Open Web=>вибрати потрібну папку=>Open.

4. Створення сайту. Сайт як сукупність взаємозв'язаних сторінок можна будувати відразу після запуску програми, ви­користовуючи для створення нових сторінок команди Window=>New Window. Однак ліпше виконати такі команди: File=>New=>Web.

На закладці Web Sites вибирають шаблон One Page Web чи Empty Web (порожній сайт), зазначають шлях до папки сайту, наприклад, D:\My Webs\MyNewWebl і натискають на кнопку Ok. Програма створить web-папку, яка відрізняється від звичайної тим, що містить у собі папку private зі служ­бовими файлами і папку images, куди автоматично заносити­муться графічні файли. Нові сторінки для сайту, що розбудо­вується, можна створювати командами Window=>New Window.

Серед корисних шаблонів сайтів зазначимо Customer Support Web (сайт споживача), Corporate Presence Wizard (май­стер створення сайту фірми), Personal Web (персональний сайт), Project Web (сайт проекту), Discussion Web Wizard (майстер створення форуму).

Коли шаблон вибрано і клавіша Ok натиснута, потрібно дати відповіді на деякі запитання, що стосуються конкретного сайту, і натиснути на кнопку Finish. Через декілька секунд сайт буде створено. Його можна удосконалити методом редагування сторінок у режимі Normal чи HTML, перекласти рід­ною мовою, оскільки шаблони зазвичай англомовні тощо.

Загальноприйнято, що перша сторінка сайту - сторінка із заголовком Home Page, що знаходиться у файлі index.htm.

Щоб відкрити для редагування будь-яку сторінку сайту, потрібно двічі клацнути мишею на назві файлу у панелі Fol­der List. Щоб переглянути сайт, слід перейти в режим Preview. У режимі Normal також можна гортати сторінки сайту, кла­цаючи на гіперпосиланнях із натиснутою клавішею Ctrl.

5. Публікація сайту. Готовий сайт слід розташувати на web-сервері або на диску користувача, щоб його можна було переглядати броузером незалежно від програми Microsoft FrontPage. Для цього виконують команди File=>Publish Web...=>у полі Specify the location to publish your Web... зазна­чають URL-адресу серверу чи шлях до папки на диску=>на­тискають на кнопку Publish.

6. Інші режими роботи із сайтом. Режим Reports дає доступ до статистичної інформації про сайт: кількість файлів, картинок, гіперпосилань зовнішніх та внутрішніх, повільних сторінок, давніх та свіжих файлів, незв'язаних файлів, неза­вершених завдань, невикористаних тем тощо. На закладці Report Views команди Tools=>Options користувач осо­бисто пояснює програмі, що таке повільні, давні і свіжі сторінки.

Режим Navigation графічно відображає структуру сайту і дає змогу додавати чи вилучати сторінки, змінювати структуру методом перетягування піктограм сторінок у потрібне місце схеми. У цьому режимі можна також почати створювати сайт, додаючи до базової сторінки (Home page) чи поточної сторінки нову сторінку за допомогою команди New page з контекстових меню сторінок вищого рівня.

Режим Hyperlinks застосовують до сайтів, що мають значну кількість сторінок і гіперпосилань з метою візуальної перевірки зв'язків між сторінками.

Режим Tasks застосовують, якщо над сайтом працює ко­лектив дизайнерів. Керівник проекту має змогу сформулюва­ти завдання (задачу), призначити виконавців і визначити пріоритет робіт над окремими фрагментами сайту. Після завер­шення роботи над завданням властивості Status надають значення Completed.

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

Щоб створити ефект, вибирають елемент і виконують ко­манди Format=>Dynamic HTML Effects. На екрані з'явиться па­нель інструментів Dynamic HTML Effects, за допомогою якої по­трібно вибрати деяку подію. Після настання цієї події у вікні броузера почне діяти ефект. Подіями можуть бути відкривання сторінки або клацання мишею над елементом, або подвійне клацання, або наведення укажчика миші на елемент. Відповід­ні події називаються On Page Load, On Click, On Double Click, On Mouse Over. Коли подія вибрана, вибирають ефект: миготіння, вилучення, політ, заміни тощо.

До картинки можна застосувати ефект вилучення-відлі­тання (Apply: Fly Out) чи ефект заміни її іншою картинкою (Apply: Swap Picture), після чого треба задати шлях до іншої картинки командою Choose Picture. Для ефекту відлітання треба задати також напрямок польоту з багатьох можливих: вгору-ліворуч, вниз-праворуч тощо.

До тексту можна застосувати ефекти польоту чи формату­вання Apply: Formatting. Є такі ефекти форматування: взяти текст у рамку (Choose Border), вибрати колір рамки і колір за­ливки тла, а також змінити шрифт (Choose Font) тексту.

Для сторінки можна задати ефекти-способи їх появи чи закриття подібно до способів зміни кадрів у програмі Power­Point, Для цього виконують команду Format=>Page Transition, вибирають ефект зі списку, задають його тривалість три — чотири секунди і натискають на кнопку Ok.

Ефект рухомого тексту задають командою Marquee.

Вилучити ефект можна командою Remove Effect, що є на панелі Dynamic HTML Effects.

8. Компоненти. Урізноманітнити сторінку можна за до­помогою компонент. Компоненти встеляють командою Insert=>Insert Component.

Командою Insert=ЮComment текст, важливий для дизай­нера сторінки, перетворюють у коментар, який відвідувач у броузері не побачить.

Компонент Hit Counter веде підрахунок відвідувань сто­рінки. Він враховує повторне перезавантаження сторінки від­відувачем чи автором у броузері, що робить відповідний під­рахунок не об'єктивним. Цього недоліку не мають спеціальні лічильники, які можна отримати у web-дизайнерів чи на спе­ціалізованих серверах Spylog тощо. Зауважимо, що чутки про те, що відвідування сайтів, на яких є лічильники типу Spylog, небезпечне для вашого комп'ютера через їхню шпі­онську активність, дещо перебільшені.

Компонент Include Page дає змогу вставити деякий текст, наприклад заголовок сайту тощо, у верхню частину кожної сторінки. Такий текст має бути заздалегідь оформле­ний як окрема сторінка. Зміни до такого тексту у разі потре­би дизайнер вноситиме лише у цю сторінку. Подібного ефек­ту можна дибитися командами Format=>Shared Borders. У спільну область можна вставляти, наприклад, навігаційну панель командою Insert=>Navigation Bar.

Компоненти Sheduled Include Page і Sheduled Picture да­ють змогу відображати у броузері деяку сторінку чи картин­ку у зазначений термін.

Компонент Date and Time вставляє дату останньої модер­нізації сайту.

Компонент Table of Contents автоматично створює навіга­ційну таблицю зі змістом сайту, яку він створює із заголовків сторінок. Такий зміст автоматично поновлюватиметься під час внесення структурних змін до сайту: приєднання чи вилу­чення сторінок, зміни їхніх заголовків тощо.

Компонент Search Form вставляє на сторінку форму для пошуку заданого відвідувачем тексту на всіх сторінках сайту.

Компонент Marquee призначений для створення ефекту рухомого тексту.

Зауважимо, що деякі компоненти, такі як Hit Counter чи Search Form, функціонуватимуть лише після публікації сайту на сервері, що підтримує Microsoft FrontPage Extensions.

9. Карти і гарячі області. Карта - це графічний об'єкт, що містить декілька гіперпосилань на ресурси сайту чи web-простору. Для створення карти на сторінку потрібно заздале­гідь вставити графічний об'єкт-картинку і намалювати на ній гарячі області. Кожній гарячій області слід поставити у відповідність гіперпосилання на деякий ресурс. Для рисування використовують такі інструменти панелі Pictures: прямокутна гаряча область (Rectangular Hotspot), кругова гаряча область (Circular Hotspot), гаряча область неправильної форми (Poly­gonal Hotspot).

Малюють так: спочатку клацають на кнопці-інструменті, а потім створюють контур у межах картинки. Зауважимо, що область-полігон утворюють, клацаючи у потрібних точках, а після повернення у стартову точку клацають двічі. Коли кон­тур гарячої області створено, автоматично відкривається вік­но Create Hyperlink, яке потрібно заповнити адресою ресурсу і натиснути на кнопку Ok. На етапі конструювання гарячих областей варто вимкнути відображення картинки (кнопка Highlight Hotspots), щоб візуально простежити за правильністю побудов, оскільки контури гарячих областей не повинні пере­тинатися.

Графічні карти застосовують для створення навігацій­них панелей. Карта відображається у броузері як звичайна картинка, але коли над нею провести мишею, укажчик миші перетворюватиметься на долоню, а у рядку стану відобража­тиметься адреса вибраного ресурсу. Малюнками для карти мо­жуть слугувати фотографії, картинки з бібліотеки Clip Art чи малюнки, створені власноруч за допомогою редактора Paint, або зображення географічних карт, якщо це доцільно. Не ре­комендують застосовувати громіздкі рисунки, обсяг яких пе­ревищує 30 Кбайт. Окрім цього, графічні навігаційні панелі варто дублювати текстовими, оскільки завантаження графіки у своєму броузері клієнт може відмінити.

10. Фрейми. Щоб створити сайт із фреймами, потрібно запустити програму FrontPage без автозавантаження остан­нього сайту і виконати команди File=>New=>Page. На за­кладці Frames Pages вибираємо шаблон сторінки з фреймами, наприклад, Contents - шаблон сторінки з двома фреймами. Буде створено файл new_page_2.htm, що міститиме структуру фреймів. Якщо цей файл має відкривати домаш­ньою сторінкою сайту, то пізніше його перейменовують на index.htm. Для заповнення фреймів користуємося кнопками Set Initial Page (зв'язати фрейм з існуючою сторінкою) чи New Page (створити у фреймі нову сторінку).

Розглянемо головні етапи створення сайту з використан­ням двох фреймів. Зазвичай лівий фрейм використовують як навігаційний, а всі інформативні сторінки сайту перегляда­ють у правому. На лівій сторінці створимо зміст сайту, а пра­ва сторінка (main) спочатку буде головною домашньою сторін­кою. Заповнюємо сторінки текстами і картинками згідно із сюжетом сайту, задаємо їм властивості за допомогою контекс­тового меню. Для кожної сторінки зазначаємо заголовок, інакше перше слово на сторінці автоматично стане її за­головком. Закриваємо сторінки і зберігаємо їх у файлах, ввівши назви файлів у діалоговому вікні. Зазначаємо також, у якому фреймі має відкриватися кожна сторінка. Тексти у лівому фреймі перетворюємо у гіперпосилання і зв'язуємо їх з існуючими сторінками на диску у web-просторі чи створюємо для них нові сторінки. Стежимо, щоб усі нові сторінки відображалися у правому фреймі.

Межі фреймів можна переміщати, а можна не відобра­жати зовсім. Можна задати відстань між фреймами, а також відстань текстів від меж фреймів тощо. Для задання чи зміни властивостей фреймів варто користуватися командою Frame Properties з контекстового меню фрейма. Фрейми можна реда­гувати, вилучати, поділяти на частини за допомогою пункту Frames з головного меню програми FrontPage.

11. Форми. Для створення інтерактивних сторінок, тобто сторінок, що дають змогу вести двосторонній обмін даними між клієнтом-відвідувачем і сервером чи прямо з господарем сайту, на сторінку вставляють форми командою Insert=>Forms. Форми застосовують під час створення сайтів фірм для отримання відгуків від клієнтів про товари, для реєстрації клієнтів з метою автоматизації розсилання додаткових мате­ріалів, отримання замовлень на товари через Інтернет, веден­ня форумів, дискусій, пошуку додаткової інформації тощо.

Форма може містити такі елементи управління: текстове поле для введення клієнтом деякого тексту, поле-список для вибору потрібного тексту, перемикач, радіокнопку, кнопку для відсилання даних В кнопку для витирання даних тощо. Програма FrontPage дає змогу початківцям використати готові сторінки-шаблони з формами: форма-відгук, форма-пошук, форма-форум тощо. Однак робота з формами-шаблонами у програмі FrontPage має одне суттєве обмеження - форми працюють після публікації сайту на сервері, який підтримує засоби Місrosoft FrontPage Extensions, інакше форми потрібно супроводжувати спеціальними програмами опрацювання сценаріїв їх використання (їх ми не розглядаємо).

12. Каскадні таблиці стилів. Є такі елементами web-сторінки:

• абзаци тексту (що є в body) з властивостями: назва шрифту (font-family), колір тексту (color), колір фону (background-color);

• гіперпосилання (а), які поділяють на звичайні (a:link), відвідані (a:visited), активізовані у даний момент (a:active);

• таблиці (table) з різними власними властивостями, зокрема, світлими і темними кольорами рамок;

• заголовки шести рівнів (hi, h2, ..., h6) з власти­востями color, font-family тощо.

У дужках наведено англійські назви елементів сторінки згідно з правилами мови HTML, а також назви деяких властивостей.

Відповідно до правил web-дизайну елементи на сторінках і навіть у цілому сайті повинні бути виконані одним стилем. Стиль елемента — це сукупність конкретних значень властивостей елемента. Каскадна таблиця стилів (css) - це сукупність стилів різних елементів сторінки.

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

Каскадні таблиці стилів бувають зовнішні і внутрішні. Зовнішні знаходяться у файлах з розширенням css, а внутріш­ні — це описи стилів засобами мови CSS, які вставляються у html-код сторінки і мають локальну дію, тобто їхня дія поши­рюється лише на дану сторінку, чи навіть лише на окремі її елементи. На практиці частіше застосовують зовнішні таблиці стилів, безплатні чи умовно безплатні бібліотеки яких можна знайти у web-просторі, їх не потрібно копіювати на свій ком­п'ютер, достатньо зв'язати свій сайт із відповідною таблицею в мережі Інтернет командою Format=>Style Sheet Links.

Отже, робота з каскадними таблицями стилів складаєть­ся з двох етапів: створення і використання. На першому ета­пі слід знайти адресу потрібної таблиці стилів у web-просторі чи створити свою таблицю, наприклад, на основі шаблону. Для цього застосовують команди File=>New=>Page відкрива­ють закладку Style Sheets і вибирають один з шаблонів (Arcs, Bars, Blocks, Downtown, Poetic, Street, Sweets чи інший) і натис­кають на Ok. Тепер можна ознайомитися з описом стилю, внести власні зміни або доповнення вручну чи за допомогою команди Format=>Style. Останній спосіб особливо зручний і ми рекомендуємо його для початківців. Після створення таблицю стилів слід зберегти у файлі з розширенням css у папці сайту командою File=>Save as.

На другому етапі відкривають сайт чи сторінку і з'єдну­ють їх з існуючою таблицею стилів за допомогою команд For­mat=>Style Sheet Links=>Add=>зазначають шлях до потрібної таблиці стилів на диску чи у web-просторі=>натискають на кнопку Ok - отримують результат. Якщо таблицю стилів виб­рано невдало, то її вилучають і застосовують іншу.

13. Теми. Ще один спосіб автоматизації процесу створен­ня сайту полягає у застосуванні тем. Тема - це сукупність таблиці стилів і графічних елементів. Тем є декілька десят­ків, серед яких виокремимо такі: Arcs, Automotive, Blends, Cac­tus, Canvas, Chalkboard, Classic, ClearDay, Corporate, Cypress, Downtown, Highway, Kids, Laverne, Leaves, Nature, Safari, Sunflower, Sweets, Tidepool.

Тему застосовують до окремих сторінок чи до всіх командою Format=>Theme на початку створення сайту або наприкінці. Вибирають зі списку потрібну тему, модифікують її (часто до невпізнання) за допомогою кнопки Modify і натис­кають на кнопку Ok. Теми можна змінювати. Щоб вилучити тему, серед назв вибирають фразу No Theme.

Хід роботи

1. Створити сайт з рекламою послуг туристичної фірми з двома фреймами, динамічними ефектами над заго­ловками, з компонентами Hover Button, Marquee, Scheduled Picture, Scheduled Include Page.

2. Створити сайт фірми з трьома фреймами, навіга­ційною картою з трьома гарячими областями, застосувавши теми та внутрішні таблиці стилів і модифікувавши їх на свій смак.