Програма Microsoft FrontPage. Режими роботи1. Призначення програми Microsoft FrontPage. Програма Microsoft FrontPage призначена для створення web-сторінок і сайтів без застосування користувачем мови HTML. Окрім цього, програму використовують для розташування сайтів на web-сервері та їхньої наступної експлуатації. Користувач має змогу створити окрему сторінку чи сайт, двома способами: з нуля чи скориставшись шаблоном з колекції програми FrontPage. Шаблонів окремих сторінок тут є і більше, ніж шаблонів у колекції програми Word, а шаблони сайтів заслуговують на детальне ознайомлення та практичне застосування. Програма дає змогу вставляти набагато більше об'єктів і готових web-компонент, ніж програма Word. Користувач можеш вставити, наприклад, кнопки (Hover Button), тексти, що рухаються (Marquee), лічильники відвідувань (Hit Counter), аркуші електронних таблиць (Office Spredsheet), діаграми (Qffica Chart), елементи ActiveX, аплети (Java Applet), створити графічні мініатюри (Thumbnail), таблиці, карти, фрейми, інтерактивні форми, надати об'єктам анімаційні ефекти (Dуnamic HTML Effects), задати способи зміни сторінок (Page Transmition) подібні до способів зміни кадрів у програмі PowerPoint тощо. Як і у програмі Word 2000/XP, тут є декілька десятків тем, які можна застосувати для естетичного оформлення сторінки чи всього сайту командою Format - Theme. Особливість програми Microsoft FrontPage у тому, що вона є зручною для створення та адміністрування великого професійного сайту. Це досягається за допомогою таких режимів роботи з сайтом: звіт (Reports), навігаційна карта сайту(Navigation), схема гіперпосилань (Hiperlinks), завдання для колективу дизайнерів і виконавців (Tasks). Для успішної роботи з програмою потрібно знати головні принципи її функціонування, зберігати файли сторінок сайту в конкретній папці і вручну не переміщати їх, щоб не переривати зв'язків між сторінками тощо. Після створеній сайту користувач може його опублікувати на web-сервері командою Publish. Переглянути створений сайт можна і в домашніх умовах. Однак, якщо застосовувались деякі компоненти чи елементи управління формою, що потребують програмної підтримки, то повноцінне функціонування такого сайту буде можливе лише на web-сервері, який має відповідні засоби для їх опрацювання, що називаються Microsoft FrontPage Extensions. Сервери, які працюють з операційною системою Unix, такими засобами зазвичай не володіють. 2. Режими роботи програми. Програму запускають за допомогою головного меню: Start - Programs - Microsoft FrontPage. Отримують вікно з традиційними для офісних програм пунктами меню: File, Edit, View, Insert, Format, Tools, Table, Frames, Window, Help. Програма дає змогу працювати у декількох режимах відображення інформації про сайт, які користувач може задати чи змінити такими командами з пункту View: • Сторінка (Page); • Папки (Folders); • Звіти (Reports); • Навігаційна карта (Navigation); • Гіперзв'язки (Hyperlinks); • Завдання (Tasks). Вікно програми містить дві або три вертикальні панелі: ліворуч - панель керування режимами (Views) з кнопками для перемикання режимів, праворуч - панель, де відображається поточна сторінка, папка, звіт, навігаційна карта, гіперзв'язки чи відповідно список завдань (рис. 1). Корисною є панель 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, що є у папці Му Document однак користувач може вибрати будь-яку іншу папку. Важливо, щоб усі наступні сторінки свого сайту він зберігав власне у цій папці. Вікно зі сторінкою можна закрити, клацнувши на кнопці закривання, що стосується даної сторінки. Якщо сторінка не була збережена у файлі, то після підтвердження запиту на зберігання відкриється вікно Save as..., де у полі File name користувач може ввести назву відповідного html-файлу, а також змінити за допомогою кнопки Change заголовок сторінки (page title). За замовчуванням заголовком є перше слово на сторінці. Заголовок сторінки буде відображатися броузером у рядку заголовків, тому користувач повинен подбати, щоб він був інформативним і цікавим. Зауваження. Якщо після запуску програми у вікно Normal чи у панель Folder Lists завантажується деяка сторінка чи сайт, то це означає, що програма функціонує у режимі автозавантаження сторінки, з якою працювали востаннє. Такий режим можна задати або скасувати командами Tools => Options => закладка General => Open last Web automatically. 3. Створення сторінки. Щоб створити нову сторінку, виконують команди File => New => Page. На закладці General вибирають Normal Page і натискають на кнопку Ok. На цій же закладці можна ознайомитися і вибрати готовий шаблон для власної сторінки, якщо він влаштує користувача. Є такі Шаблони: бібліографія; вузький текст, розташований ліворуч від картинки (Narrow, Left-AIligned Body); текст-праворуч (Narrow, Right-Alligned Body); текст у центрі сторінки (One-Column Body) та ін. Зразки оформлення шаблонів можна тут же переглянути у полі Preview, клацнувши один раз мишею на його назві (рис. 2). На закладці Frames Pages можна вибрати шаблон створення сторінки з фреймами: Banners and Contents, Contents, 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\MyNewWeb1 і натискають на кнопку 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. Щоб відкрити для редагування будь-яку сторінку сайту, потрібно двічі клацнути мишею на назві файлу у панелі Folder 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 (рис. 3) користувач особисто пояснює програмі, що таке повільні, давні і свіжі сторінки. Режим Navigation дає змогу додавати чи вилучати сторінки, змінювати структуру методом перетягування піктограм сторінок у потрібне місце схеми. У цьому режимі можна також почати створювати сайт, додаючи до базової сторінки (Home page) чи поточної сторінки нову сторінку за допомогою команди New page з контекстових меню сторінок вищого рівня. Режим Hyperlinks застосовують до сайтів, що мають значну кількість сторінок і гіперпосилань з метою візуальної перевірки зв'язків між сторінками. Режим Tasks застосовують, якщо над сайтом працює колектив дизайнерів. Керівник проекту має змогу сформулювати завдання (задачу), призначити виконавців і визначити пріоритет робіт над окремими фрагментами сайту. Після завершення роботи над завданням властивості Status надають значення Completed. Основи web-дизайну у програмі FrontPage 1. Шрифти й абзаци. Головним елементом будь-якої сторінки є текст, зовнішній вигляд якого визначається шрифтом, його властивостями й ефектами. Щоб задати чи змінити властивості шрифту, потрібно виконати команди Format => Font. У діалоговому вікні Font задають потрібні властивості (назву шрифту, розмір, стиль, колір), ефекти, густину символів і позиціювання їх як індексів (character spacing), після цього натискають на кнопку Apply чи Ok. Як і у програмі Word, головні властивості можна задати за допомогою панелі форматування. Є сім розмірів шрифту. Цим розмірам відповідають такі значення (у пунктах) програми Word: розмір 1-8 пунктів, розмір 2 - 10, розмір 3 - 12, 4 - 14, 5 - 18, 6 - 24, 7 - 36. Зазначимо, що 1 см = 28 пунктів. Серед ефектів, які застосовують до символів, є такі: закреслення, надкреслення, підкреслення, миготіння, верхній чи нижній індекс тощо. Властивості абзацу (вирівнювання на сторінці, відступи зліва, справа, у першому рядку, зверху, знизу, між рядками) можна задати, вибравши абзац і виконавши команди Format => Paragraph. На відміну від текстового редактора, наступний параграф не успадковує властивості попереднього, а створюється у стилі Normal. Для поширення властивостей абзацу на інший фрагмент тексту слід виконати копіювання формату з абзацу-зразка за допомогою кнопки Format Painter. Для цього спочатку клацають у абзаці-зразку, потім - на кнопці копіювання формату, потім - на деякому фрагменті тексту. 2. Заголовки і списки. Щоб текст зробити заголовком, до нього треба застосувати один з відповідних стилів Неаding1 (найбільший рівень), Heading2,..., Heading6 зі списку стилів на панелі форматування. Списки створюють за допомогою стандартних стилі Numbered List, Bulleted List, Directory List, Menu List, чи кнопок панелі форматування, чи командами з меню Format - Bullet and Numbering, чи контекстового меню. Рівні у списках можна підвищувати чи понижувати, користуючись кнопками Increase Indent чи Decrease Indent. 3. Лінії і фон. Горизонтальні лінії застосовують для відокремлення логічних частин сторінки. Для їх вставляння застосовують команди Insert-Horyzontal line. За допомогою контекстового меню лінії можна змінити її властивості (Ногуzontal Line Properties): ширину, висоту, спосіб вирівнюванні відносно сторінки, колір, стиль. Декоративні лінії вставляють із графічних файлів як картинки. Фон створюють за допомогою команд Format-Background. Фон можна задати з файлу (Background Picture), і, скориставшись кнопкою Browse..., знайти файл на диску; можна; запозичити фон з іншої сторінки (Get background information from another page - Browse...), можна задати стандартний колір (Color) фону, тексту чи створити власну кольорову палітру. Фону можна надати властивість водяного знака (Watermark), а гіперпосиланням - задати кольори чи спеціальний динамічний ефект (Enable hyperlink rollover effects). Корисною є команда File => Properties... На її загальній закладці General сторінці можна задати заголовок (Title) і розташування (Location), створити для сторінки звуковий фон з деякого звукового файлу (Background sound => Location => Browse), зазначити кількість повторень (Loop) звукового фрагмента чи задати звучати постійно (Forever).
Рис. 4. Вікно команди Insert Table
Рис. 5. Вікно з властивостями таблиці 4. Таблиці. Таблиці застосовують для наочного подання текстової чи графічної інформації, а також для подання матеріалів у вигляді колонок чи для поділу сторінки на логічні частини. Як і у програмі Word, таблицю можна створити чотирма способами: • вставляння таблиці командами Table => Insert => Table; • рисування таблиці командами Table => Draw Table; • вставляння за допомогою кнопки на стандартній панелі інструментів; • перетворення тексту в таблицю командами Table =>Convert => Text to Table. Для першого способу у вікні Insert Table (рис. 4) потрібно задати кількість рядків (Rows) і стовпців (Columns), спосіб вирівнювання таблиці відносно сторінки (Alignment) і ширину таблиці (Specify width) у пікселях чи у відсотках, ширину зовнішньої рамки у пікселях (Border size), відступ тексту у клітинках від рамок (Cell padding) і відстань між клітинками (Cell spacing), Ok. У другому способі вмикається панель інструментів Table і за допомогою інструментів олівець, гумка та інших рисуємо таблицю: спочатку зовнішню рамку, пізніше внутрішні тощо. Властивості елементів таблиці можна змінити за допомогою команд Table-Properties-Table чи команди Table Properties... з контекстового меню таблиці (рис. 5) Властивість Float задає спосіб обтікання таблиці текстом. Для рамок можна визначити один колір (Color) або два: Light border для верхньої і лівої меж і Dack border для нижньої і правої. Ці кольори будуть відображатися інверсно. Можна змінити властивості окремої клітинки командами Table => Properties => Cell чи командою Cell Properties з її контекстового меню. Тут задають, зокрема, спосіб вирівнювання текстів відносно рамок клітинок, наприклад у вертикальному напрямку. Описані команди служать для задання кольору рамкам клітинки чи таблиці, фону для клітинки чи таблиці, внесення структурних змін до таблиці тощо. Фон клітинки перекриває фон таблиці, а фон таблиці перекриває фон сторінки. Якщо колір рамок, фону таблиці і фону сторінки однаковий, то отримаємо ефект невидимої таблиці. Цей прийом застосовують для структурованого подання інформації на сторінці вигляді колонок тощо. Клітинки можна з'єднувати. Для цього їх спочатку треба виокремити, а потім застосувати команди Table => Merge Cells. Клітинку можна поділити на дві чи більше клітинок у вертикальному чи горизонтальному напрямку, застосувавши команди Table => Split Cells. Підпис до таблиці створюють за допомогою команд Table => Insert => Caption. За допомогою команди Caption Properties підпис розташовують над чи під таблицею. Переміщуватись від клітинки до клітинки можна за допомогою клавіші Tab. Натискання на неї в останній клітинці таблиці додає новий рядок. Рядки чи стовпці вставляють у таблицю командами Table => Insert => Row and Columns, а зайві вибирають і вилучають командою Delete Cells. Команди Distribute Rows (Columns) Evenly застосовують для поліпшення розподілу простору між рядками та стовпцями.
Рис. 6. Засоби для пошуку картинки 5. Графічні об'єкти і мініатюри. На сторінку можна вставляти графічні об'єкти як файли різних форматів: bmp, gif jpg тощо командами Insert => Picture => From File. Тут важливо знати заздалегідь і правильно зазначити URL-адресу до графічного файлу або скористатися у вікні Picture кнопками пошуку файлу у web-просторі чи на дисках комп'ютера (рис. 6). Можна вставляти картинки з Clip Art, а також відеофільми. Під час роботи з картинками корисними є дві панелі: для позиціювання - Positioning, яка дає змогу правильно розташувати картинку на сторінці й організувати перекриття картинок; а також панель Pictures, що дає змогу модифікувати картинку часто до невпізнання. Ця панель містить кнопки для вставляння тексту в картинку, організації перекривань, поворотів, зміни яскравості, зняття фону, обрізання, промивання тощо. З командами цієї панелі варто проекспериментувати. Для побудови композицій важливою є можливість забирати фон навколо деякого зображення на картинці. Для цього потрібно клацнути на кнопці Set Transparent Color, а пізніше клацнути на тлі картинки, який потрібно усунути. Позвольте програмі змінити графічний формат картинки для роботи з цим інструментом. Якщо текст має обтікати картинку, то до картинки застосовують команди Format => Position... і у діалоговому вікні position вибирають стиль обтікання і стиль позиціювання (наприклад, relative - відносний), а також відступи від картинки до тексту. Властивість Z-order картинок визначає чергу (послідовність) прорисовування їх у броузері. Мініатюра - це пропорційно зменшена копія великої картинки (формату jpg). Мініатюра завантажується у броузері користувача першою. Якщо користувач має намір оглянути основне зображення, потрібно клацнути мишею на мініатюрі, тобто мініатюра відіграє роль гіперпосилання на оригінал картинки. Щоб для вибраної картинки створити мініатюру достатньо застосувати кнопку Auto Thumbnail на панелі інструментів Pictures. Важливо вдало вибрати спосіб відображення мініатюр на сторінці, що досягають за допомогою команд Tools => Page Options => Auto Thumbnail: без рамки, в рамці, у випуклій рамці (Beveled adge) і задати один з розмірів мініатюри: ширину або довжину. Інший розмір програма визначить автоматично. 6. Гіперпосилання. Вибраний фрагмент тексту чи графічний об'єкт можна перетворити у гіперпосилання за допомогою команди Insert => Hyperlink чи кнопки на стандартній панелі. У вікні Create Hyperlink потрібно задати адресу папки з сайтом і вибрати конкретну сторінку сайту чи задати URL-адресу потрібної сторінки вручну або використовуючи наступні кнопки (рис. 7): 1) броузер для пошуку сторінки у web-просторі, 2) посилання на файл на власному комп'ютері, 3) гіперпосилання для відправляння листа, 4) гіперпосилання на сторінку, яка тільки буде створюватися. Якщо є фрейми, потрібно зазначити, в якому фреймі броузер має відображати сторінку. Якщо посилання виконуватиметься на закладку (Bookmark), то зазначають назву закладки. Закладки бажано створити на сторінках заздалегідь. Для цього потрібно клацнути у потрібному місці сторінки чи вибрати деякий об'єкт і виконати команди Insert => Bookmark, дати назву закладці, Ok.
Рис. 7. Вставляння гіперпосилань Внести зміни до існуючого гіперзв'язку можна за допомогою команди Hyperlink Properties. Правильність функціонування гіперпосилань можна відстежити у режимі Normal, клацаючи на них із натиснутою клавішею Ctrl. Однак зазвичай цю перевірку виконують у режимі попереднього перегляду Preview або безпосередньо у броузері. Інші можливості програми FrontPage 1. Динамічні ефекти. Динамічні (рухомі, анімаційні) ефекти застосовують з метою привертання уваги відвідувачів сайту до окремих елементів сторінки: тексту чи картинки або для наповнення їх новим змістом. Щоб створити ефект, вибирають елемент і виконують команди Format => Dynamic HTML Effects. На екрані з'явиться панель інструментів Dynamic HTML Effects, за допомогою якої потрібно вибрати деяку подію. Після настання цієї події у вікні броузера почне діяти ефект. Подіями можуть бути відкривання сторінки або клацання мишею над елементом, або подвійне клацання, або наведення укажчика миші на елемент. Відповідні події називаються On Page Load, On Click, On Double Click, On Mouse Over. Коли подія вибрана, вибирають ефект: миготіння, вилучення, політ, заміни тощо (рис. 8).
Рис. 8. Панель інструментів для динамічних ефектів До картинки можна застосувати ефект вилучення-відлітання (Apply: Fly Out) чи ефект заміни її іншою картинкою (Apply: Swap Picture), після чого треба задати шлях до іншої картинки командою Choose Picture. Для ефекту відлітання треба задати також напрямок польоту з багатьох можливих: вгору-ліворуч, вниз-праворуч тощо.
Рис. 9. Меню команд Вставити і Компоненти (справа) До тексту можна застосувати ефекти польоту чи форматування Apply: Formatting. Є такі ефекти форматування: взяти текст у рамку (Choose Border), вибрати колір рамки і колір заливки тла, а також змінити шрифт (Choose Font) тексту. Для сторінки можна задати ефекти-способи їх появи чи закриття подібно до способів зміни кадрів у програмі PowerPoint. Для цього виконують команду Format => Page Transition, вибирають ефект зі списку, задають його тривалість три-чотири секунди і натискають на кнопку Ok. Ефект рухомого тексту задають командою Marquee. Вилучити ефект можна командою Remove Effect, що є на панелі Dynamic HTML Effects. 2. Компоненти. Урізноманітнити сторінку можна за допомогою компонент. Компоненти вставляють командою Insert => Insert Component. Список компонент подано на рис. 9. Командою 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. 3. Карти і гарячі області. Карта - це графічний об'єкт, що містить декілька гіперпосилань на ресурси сайту чи web-простору, Для створення карти на сторінку потрібно заздалегідь вставити графічний об'єкт-картинку і нарисувати на ній гарячі області. Кожній гарячій області слід поставити у відповідність гіперпосилання на деякий ресурс. Для рисування використовують такі інструменти панелі Pictures: прямокутна гаряча область (Rectangular Hotspot), кругова гаряча область (Circular Hotspot), гаряча область неправильної форми (Polygonal Hotspot). Рисують так: спочатку клацають на кнопці-інструменті, а потім створюють контур у межах картинки. Зауважимо, що область-полігон утворюють, клацаючи у потрібних точках, а після повернення у стартову точку клацають двічі. Коли контур гарячої області створено, автоматично відкривається вікно Create Hyperlink, яке потрібно заповнити адресою ресурсу і натиснути на кнопку Ok. На етапі конструювання гарячих областей варто вимкнути відображення картинки (кнопка Highlight Hotspots), щоб візуально простежити за правильністю побудов, оскільки контури гарячих областей не повинні перетинатися. Графічні карти застосовують для створення навігаційних панелей. Карта відображається у броузері як звичайна картинка, але коли над нею провести мишею, укажчик миші перетворюватиметься на долоню, а у рядку стану відображатиметься адреса вибраного ресурсу. Рисунками для карти можуть слугувати фотографії, картинки з бібліотеки Clip Art чи малюнки, створені власноруч за допомогою редактора Paint, або зображення географічних карт, якщо це доцільно. Не рекомендують застосовувати громіздкі рисунки, обсяг яких перевищує 30 Кбайт. Окрім цього, графічні навігаційні панелі варто дублювати текстовими, оскільки завантаження графіки у своєму броузері клієнт може відмінити. 4. Фрейми. Щоб створити сайт із фреймами, потрібно запустити програму FrontPage без автозавантаження останнього сайту і виконати команди File => New => Page. На закладці Frames Pages вибираємо шаблон сторінки з фреймами, наприклад, Contents — шаблон сторінки з двома фреймами (рис. 10). Буде створено файл new_page_2.htm, що міститиме структуру фреймів. Якщо цей файл має відкривати домашньою сторінкою сайту, то пізніше його перейменовують на index.htm. Для заповнення фреймів користуємося кнопками Set Initial Page (зв'язати фрейм з існуючою сторінкою) чи New Page (створити у фреймі нову сторінку).
Рис. 10. Шаблони сторінок з фреймами Розглянемо головні етапи створення сайту з використанням двох фреймів. Зазвичай лівий фрейм використовують як навігаційний, а всі інформативні сторінки сайту переглядають у правому. На лівій сторінці створимо зміст сайту, а права сторінка (main) спочатку буде головною домашньою сторінкою. Заповнюємо сторінки текстами і картинками згідно сюжетом сайту, задаємо їм властивості за допомогою контекстового меню. Для кожної сторінки зазначаємо заголовок, інакше перше слово на сторінці автоматично стане її заголовком. Закриваємо сторінки і зберігаємо їх у файлах, ввівши назви файлів у діалоговому вікні. Зазначаємо також, у якому фреймі має відкриватися кожна сторінка. Тексти у лівому фреймі перетворюємо у гіперпосилання і зв’язуємо їх з існуючими сторінками на диску у web-просторі створюємо для них нові сторінки. Стежимо, щоб усі нові сторінки відображалися у правому фреймі. Межі фреймів можна переміщати, а можна не відображати зовсім. Можна задати відстань між фреймами, а також відстань текстів від меж фреймів тощо. Для задання чи зміни властивостей фреймів варто користуватися командою Frame Properties з контекстового меню фрейми. Фрейми можна редагувати, вилучати, поділяти на частини за допомогою пункту Frames з головного меню програми FrontPage. 5. Форми. Для створення інтерактивних сторінок, тобто сторінок, що дають змогу вести двосторонній обмін даними між клієнтом-відвідувачем і сервером чи прямо з господарем сайту, на сторінку вставляють форми командою Insert => Forms. Форми застосовують під час створення сайтів фірм для отримання відгуків від клієнтів про товари, для реєстрації клієнтів з метою автоматизації розсилання додаткових матеріалів, отримання замовлень на товари через Інтернет, ведення форумів, дискусій, пошуку додаткової інформації тощо.
Форма може містити такі елементи управління: текстове поле для введення клієнтом деякого тексту, поле-список для вибору потрібного тексту, перемикач, радіокнопку, кнопку для відсилання даних і кнопку для витирання даних тощо. Програма FrontPage дає змогу початківцям використати готові сторінки-шаблони з формами: форма-відгук, форма-пошук, форма-форум тощо. Однак робота з формами-шаблонами у програмі FrontPage має одне суттєве обмеження - форми працюють після публікації сайту на сервері, який підтримує засоби Microsoft FrontPage Extensions, інакше форми потрібно супроводжувати спеціальними програмами опрацювання сценаріїв їх використання (їх ми не розглядаємо). 6. Каскадні таблиці стилів. Є такі елементи web-сторінки: * абзаци тексту (що є в body) з властивостями: назва шрифту (font-family), колір тексту (color), колірфону (background-color); * гіперпосилання (а), які поділяють на звичайні(a:link), відвідані (a:visited), активізовані у даний момент (a:active);* таблиці (table) з різними власними властивостями, зокрема, світлими і темними кольорами рамок; * заголовки шести рівнів (hi, h2,..., h.6) з властивостями 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. На другому етапі відкривають сайт чи сторінку і з'єднують їх з існуючою таблицею стилів за допомогою команд Format => Style Sheet Links => Add =>; зазначають шлях до потрібної таблиці стилів на диску чи у web-просторі =>; натискають на кнопку Ok — отримують результат. Якщо таблицю стилів вибрано невдало, то її вилучають і застосовують іншу. 7. Теми. Ще один спосіб автоматизації процесу створення сайту полягає у застосуванні тем. Тема - це сукупність таблиці стилів і графічних елементів. Тем є декілька десятків, серед яких виокремимо такі: Arcs, Automotive, Blends, Cactus, Canvas, Chalkboard, Classic, ClearDay, Corporate, Cypress, Downtown, Highway, Kids, Laverne, Leaves, Nature, Safari, Sunflower, Sweets, Tidepool. Тему застосовують до окремих сторінок чи до всіх командою Format => Theme на початку створення сайту або наприкінці. Вибирають зі списку потрібну тему, модифікують її (часто до невпізнання) за допомогою кнопки Modify і натискають на кнопку Ok. Теми можна змінювати. Щоб вилучити тему, серед назв вибирають фразу No Theme.
|
