Міністерство освіти Російської Федерації
Воронезький Державний Педагогічний Університет
Кафедра інформатики і МПМ
Виконала: ст-ка фіз-мат. фак-ту,
3 курс, отд «інформатика»
Меграбян Е.
Науковий керівник: кандидат технічних наук,
Дацент кафедри інформатики і МПМ,
Богданова М. В.
Ворнонеж
2003
Зміст
FrontPage і його інтерфейс
Запуск редактора ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 4
Робота з панелями інструментів ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 4
Рядок стану та символи форматування ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. 5
Переміщення по сторінці ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 5
Властивості СТРОНИЦІ ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 5
Попередній перегляд ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .7
Основи роботи в FrontPage
Текс ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .8
Зміна розміру шрифту ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .9
Зміна шрифту ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 9
Зміна кольору тексту ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 9
Символи ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 10
Списки ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. 10
Створення списку ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. 11
Перетворення суцільного тексту в список ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 11
Зміна стилю всього списку ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 12
Вставка горизонтальної лінії ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .12
Форматування горизонтальних ліній ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .13
Використання декорацій ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. 13
Мініатюри для попереднього перегляду ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 14
Посилання ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .14
Створення посилання ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .14
Посилання, створювані автомотіческі ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 16
Створення посилань на сторінки сайтів у Internet ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. 16
Побудова таблиць ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. 16
Інструменти панелі таблиць ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. 17
Інші кнопки панелі таблиць ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .19
Вставка таблиці ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. 20
Зміна властивостей таблиці ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. 22
Розміщення зображень ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 23
Колекція ілюстрацій ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 24
Зміна властивостей зображення ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. 25
Звуки ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .30
Рухливі кнопки ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .31
Менеджер банерів ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 33
Рядки, що біжать ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 35
Зміна параметрів біжучого рядка ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 36
Лічильник візитів ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. 36
Вставка відеокадрів ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 37
Загальні поля сторінок ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 38
Перевірка орфографії ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .40
Шаблони і майстри
Шаблони сайтів ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. 41
Шаблони сторінок ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 42
Створення фреймів ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 43
Використання шаблонів фреймів ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 43
Замовні шаблони ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. 44
Замовні шаблони сайтів ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. 44
Майстри ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 45
Майстри сайтів ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 45
Компоненти про форми FrontPage
Додавання пошукового компонента ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .45
Штемпель ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .48
Зміст ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 49
Включення змісту ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 49
Додавання тимчасового зображення ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. 50
Додавання тимчасових сторінок ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 51
Створення форми зворотного зв'язку ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 52
FrontPage і його інтерфейс.
Запуск Редактора.
- Запустивши Редактор безпосередньо (або прямо з Microsoft Windows, або з Провідника Frontpage при натисканні на панелі інструментів кнопки Show Frontpage Editor або командою Show Frontpage Editor з меню Tools). У цьому випадку Редактор відкриється з порожнім екраном; щоб відкрити потрібну сторінку, використовуйте команду Open меню File і приступайте до редагування.
При запуску Редактор відкриє своє власне вікно, у верхній частині якого, як у більшості програм подібного класу, розташовані меню і панелі інструментів. Коли всі панелі інструментів видимі, Редактор виглядає так, як показано на рис. 1.
Рис. 1 Загальний вигляд вікна редактора Frontpage.
Спочатку він може здатися важкувато, але не лякайтеся: у цій главі ви дізнаєтеся, для чого призначені більшість цих кнопок і меню. Якщо ви вмієте користуватися Excel, ви помітите, що вкладки внизу вікна редагування - Normal (Звичайний вигляд), HTML (Код HTML) і Preview (Попередній перегляд) - схожі на вкладки робочих аркушів. Ці вкладки дозволяють побачити редаговану сторінку з різних точок зору. Для початку ми будемо працювати у звичайному режимі (вкладка Normal).
Робота з панелями інструментів.
Редактор має поруч панелей інструментів, якими можна керувати через меню View (Вид): Standard (Стандартна), Format (Оформлення), Image (Малювання), Forms (Форми), Advanced (Додатково) і Table (Таблиця). Коли вони всі видно, вони займають істотну частину вікна Редактора. Тому ті, що вам не потрібні, краще сховати. Щоб приховати панель інструментів, відкрийте меню View і приберіть галочку напроти імені цієї панелі. Щоб показати заховану панель, знайдіть її ім'я в меню View і поставте навпроти нього галочку, тоді панель з'явиться на тому ж самому місці, яке вона раніше займала. Придивившись, ви побачите в меню View пункти Status Bar (Рядок стану) і Format Marks (Символи форматування). Цим опцій присвячено наступний розділ даної глави.
Конфіденційність Редактора можна розташовувати в будь-якому місці екрана. Щоб пересунути панель інструментів, клацніть на будь-якому місці панелі, не зайнятому кнопками, і перетягніть її на нове місце. Якщо ви залишите її де завгодно у вікні редагування, то панель буде плаваючою. Якщо такий варіант вас не влаштовує, підтягнете панель до будь-якого краю вікна і залиште її там.
Рядок стану та символи форматування.
Рядок стану, розташовану в самому низу вікна Редактора, можна ховати і показувати; для цього служить команда Status Bar меню View.
Редактор в деяких випадках неявно використовує символи форматування, такі, як знаки абзацу. Щоб показати або заховати ці мітки на сторінці, виберіть у меню View опцію Format Marks.
Підказка: Щоб приховати або показати символи форматування, можна скористатися кнопкою Show / Hide Paragraph стандартної панелі інструментів. На ній зображений символ абзацу.
Переміщення по сторінці.
Переміщення по вмісту сторінки (якщо воно, звичайно, є) виробляється традиційним способом за допомогою клавіатури. Наприклад, для прокручування сторінки на один екран вгору або вниз використовуються клавіші
і
відповідно; комбінація клавіш
У редакторі Frontpage реалізовані 25 найбільш популярних клавіатурних комбінацій Microsoft Word, так що користувачі Office будуть відчувати себе в редакторі, як вдома.
Властивості сторінки.
Щоб встановити в редакторі властивості сторінки, виберіть команду Page Properties (Властивості сторінки) у меню File або в контекстному меню, що з'являються після клацання правою кнопкою миші. У діалоговому вікні Page Properties, крім загальної інформації, типу назви сторінки, встановлюються такі параметри, як фоновий малюнок і фоновий звук, колір фону, стандартні кольори тексту і гіперпосилань, поля сторінки, а також деякі змінні. Для редагування властивостей, сторінка повинна бути відкрита в редакторі. У цьому розділі ми докладно розберемо кожний з цих параметрів і почнемо з вкладки General (Загальні), показаної на рис. 2.
Рис. 2. Діалогове вікно Page Properties, вкладка General.
У текстовому полі Title можна ввести або відредагувати назву сторінки; поле Base Location призначено для завдання необов'язкового базового URL сторінки. Щоб встановити для посилань цієї сторінки цільової фрейм за замовчуванням, введіть його ім'я в текстовому полі Default Target Frame або натисніть кнопку Target Frame. Відкриється діалогове вікно Target Frame.
У секції Background Sound (Фоновий звук) можна змінити властивості фонового звуку; деталі цієї процедури будуть описані нижче в розділі "Звуки".
На вкладці Background (Фон), вигляд якої наведено на рис. 3, задаються параметри фону і кольору різних посилань.
Рис. 3. Діалогове вікно Page Properties, вкладка Background.
У секції Specify Background and Colors вашій увазі пропонуються наступні опції:
- Background Image (Фоновий малюнок). Встановивши цей прапорець, ви можете вибрати зображення, яким буде заповнений фон вашої сторінки. Браузери автоматично розмножують цей малюнок, викладаючи їм, як плиткою, задній план сторінки (в усякому разі, більшість браузерів).
- Watermark (Водяний знак). Фоновий малюнок, який при скролінгу сторінки залишається нерухомий. Щоб зробити фоновий малюнок статичним, встановіть прапорець Watermark, потім натисніть кнопку Browse і виберіть потрібний файл.
- Background (Колір фону). Якщо ви не використовуєте фонових малюнків, то майте на увазі можливість зміни кольору фону сторінки; щоб задати колір фону, відмінний від встановленого за замовчуванням, виберіть потрібний колір у списку Background. Вибираючи колір фону, переконайтеся, що текст і зображення будуть добре на ньому виглядатиме.
- Text (Колір тексту за замовчуванням). Щоб задати колір, у який за замовчуванням буде забарвлений текст на вашій сторінці, скористайтеся спадним списком Text. Стандартним є чорний колір (Black), проте не бійтеся експериментувати з будь-якими квітами, які будуть добре сприйматися на вибраному вами фоні. Явні установки кольору тексту, зроблені в редакторі при форматуванні, мають перевагу перед кольором, встановленим за замовчуванням.
- Hyperlink (Колір гіперпосилання). У цьому списку виберіть колір, яким будуть виділені на сторінці все ще не відвідані гіперпосилання.
- Visited Hyperlink (Колір відвіданих гіперпосилань). Після переходу за гіперпосиланням вона змінить свій колір на заданий цим параметром, більше того, всі посилання з тим же самим адресою призначення на всіх сторінках сайту також змінять свій колір. Щоб задати колір відвіданих посилань, виберіть його в списку, що Visited Hyperlink
За замовчуванням звичайним кольором посилань є синій (Blue), а для відвіданих посилань встановлений фіолетовий (Purple). Іноді корисно змінити обидва цих кольору, щоб всі бачили, скільки уваги ви приділяєте навіть таким дрібницям
- Active Hyperlink (Колір активної гіперпосилання). Активною гіперпосилання стає при натисканні на неї; щоб вибрати колір, в який будуть пофарбовані активні посилання, скористайтеся списком Active Hyperlink
У розділі Get Background and Colors from Page (Взяти установки фону і кольору зі сторінки) на вкладці Background ви можете вказати, що на даній сторінці варто використовувати такий же набір перерахованих вище параметрів (колір фону, малюнок, колір тексту і посилань), як на деякій іншій сторінці. Встановіть перемикач на цю опцію і виберіть відповідну сторінку поточного сайту, натиснувши кнопку Browse. Якщо у вас вже є потрібним чином оформлена сторінка, то ви заощадите час на повторній установці тих же самих значень для поточної сторінки.
Порада: Команда Get Background and Colors from Page є чудовим засобом для створення "стильових сторінок". Якщо, наприклад, ви вносите зміни в підкладку і набір квітів стильової сторінки, то ці зміни будуть відображені на всіх використовують її сторінках.
Щоб задати верхнє і / або ліве поля сторінки, перейдіть на вкладку Margins, встановіть відповідний прапорець і введіть у текстовому полі потрібне значення (в пікселях). Якщо ви захочете притиснути текст або зображення до самого краю вікна браузера, встановіть значення полів рівними нулю.
На вкладці Custom (Спеціальна інформація) ви побачите список використовуваних на вашій сторінці метапеременних (meta tags), які знаходяться в коді HTML сторінки і містять інформацію про сторінку, таку як тип вмісту, набір символів, назва програми згенерувати код і т. п. Вони ніколи ні в якому вигляді не відображаються, але для тих браузерів, які здатні їх розпізнати, вони несуть корисну інформацію. На цій вкладці можна додавати, видаляти і редагувати системні і призначені для користувача метапеременние.
Остання вкладка діалогового вікна Page Properties призначена для завдання кодування символів сторінок HTML; ця операція необхідна при створенні Web-сторінок на мовах, відмінних від англійської.
Попередній перегляд.
Будемо вважати, що ви працюєте над своїм сайтом off-line, без підключення до сервера. Час від часу вам хочеться подивитися, як ваша сторінка буде виглядати в реальності. Перейдіть в режим попереднього перегляду (Preview view), для цього треба просто перейти в редакторі на вкладку Preview (рис. 4)
Рис. 4. Режим перегляду Preview.
Напевно, ви питаєте себе: але якщо я не зберіг файл на сервері, на що ж я насправді дивлюся? Все правильно, коли Frontpage редагує файл, то насправді редагується його локальна копія, розташована на вашому комп'ютері. Файл записується локально до тих пір, поки ви реально не відправите його на ваш сервер Internet. To, що ви бачите в редакторі в режимі попереднього перегляду, - це насправді локальний файл, представлений таким чином, як якщо б він знаходився на сервері. Оскільки насправді ви до сервера не підключені, то деякі активні елементи на ваших сторінках можуть не працювати. Вкладка Preview дуже зручна для перегляду сайту за відсутності з'єднання з Internet, але щоб побачити сайт в реальних умовах, особливо для тестування, його необхідно дивитися в браузері, підключеному до Internet.
Якщо у вашому сайті використовуються фрейми, то в нижній частині вікна Редактора ви побачите ще дві додаткові вкладки; навіщо вони потрібні і як з ними поводитися, ми вивчали в главі 6.
Основи роботи у Frontpage.
Текст.
Щоб помістити на сторінку текст, просто-напросто введіть його з клавіатури. 1. Командою New меню File створіть у редакторі нову сторінку. У діалоговому вікні New виберіть Normal Page (Звичайна сторінка) і натисніть кнопку ОК. На вашому екрані з'явиться порожня сторінка (рис. 5).
Рис. 5. Нова сторінка в редакторі.
2. Наберіть слова Cascade Coffee Roasters.
Зверніть увагу, що текст починається з лівого краю поточного рядка. У вашій владі розташувати його яким-небудь більш цікавим чином: зробити відступ, вирівняти по правому краю або по центру. Можна змінити шрифт і кегль для тексту, зробити його заголовком або змінити його властивості ще масою способів.
Все те, що ви введете, буде так само виглядати в браузері. Щоб почати новий абзац, натисніть клавішу
Підказка: Для вирізання, копіювання і вставки в редакторі можна використовувати наступний варіант: клацанням правої кнопки відкрийте контекстне меню і виберіть відповідну команду з нього.
Зміна розміру шрифту.
Є два способи зміни розміру символів вашого тексту:
- Перейдіть ділянку тексту, який ви хочете змінити. Це може бути одне слово, рядок, абзац або ціла сторінка (щоб виділити сторінку цілком, натисніть
- Виділивши фрагмент тексту, ви можете використовувати команду Font (Шрифт) в меню Format (Формат).
Зміна шрифту.
Frontpage не обмежує вас у виборі шрифту. Якщо коли-небудь ви використовували Font (Шрифт) в Microsoft Word, то у вас не буде проблем з використанням цієї функції в редакторі Frontpage.
Для зміни шрифту виділіть текст, який ви хочете змінити, і виберіть потрібний шрифт зі списку, що розкривається.
Зміна кольору тексту.
Для оформлення тексту ви можете використовувати набір з 48 стандартних кольорів, пропонований Frontpage, або комбінувати кольори на власний смак. Для зміни кольору виділіть потрібний фрагмент тексту і натисніть кнопку Text Color (Колір тексту) на панелі інструментів.
У діалоговому вікні Color (Колір) виберіть колір зі стандартного набору, натисніть кнопку ОК. Якщо ви хочете використовувати додаткові кольори, натисніть кнопку Define Custom Colors (Визначити колір), визначте ваш колір і потім клацніть на кнопці Add To Custom Colors (Додати в набір). Створюючи комбінований колір, пам'ятайте, що для корекції кольору можна використовувати покажчик (повзунок) з правого боку вікна. Радимо при створенні сайту дотримуватися "безпечною" 216-кольорової палітри.
Символи.
Символи, також іноді звані спецсимволи, знаходяться поза основною кодової таблиці ASCII. Всі ви знаєте, що базова таблиця ASCII - найбільш широко поширена в світі система кодування символів. Але вона не включає в себе багато важливих символи: специфічні букви багатьох європейських мов, знак авторського права, знак торгової марки та ін Під Frontpage ви можете використовувати багато з цих спеціальних символів. Ось як це зробити:
1. Встановіть курсор там, де ви хочете вставити символ.
2. Виберіть пункт Symbol (Символ) в меню Insert (Вставка). Потім з'явиться діалогове вікно Symbol, зображене на рис. 6.
Рис. 6. Діалогове вікно Symbol.
3. Виберіть символ і клацніть на кнопці Insert. Frontpage вставить символ на сторінку, але не закриє діалогове вікно, щоб, повторюючи цю процедуру, ви змогли вставити потрібну кількість символів.
4. Для завершення роботи натисніть Close (Закрити).
Списки
Розмістивши інформацію на сторінках, не забувайте про те, що іноді зручно представляти матеріал не абзацами, а у вигляді списків. Списки читаються легше довгих безперервних абзаців, тому помірне використання списків може поліпшити сприйняття сторінок; однак занадто захоплюватися ними теж не варто, тому що є небезпека зробити сторінки сухими і нудними.
Точний вигляд списків усіх типів визначається браузером, використовуваним для перегляду сторінки. Тут ми наведемо лише коротку характеристику кожного типу; всі вони доступні в спадному списку стилів на панелі форматування:
- Bulleted List (Маркірований список). Елементи такого списку забезпечені маркерами. Марковані списки зазвичай використовуються для перерахування логічно пов'язаних одиниць інформації без певної послідовності.
- Directory List (Покажчик). Інший формат маркованих списків. Деякі браузери інтерпретують його дещо інакше, ніж звичайний нумерований список; зазвичай використовується в тих випадках, коли пункти списку дуже короткі.
- Menu List (Меню). Різновид маркованих списків, яку підтримувала більшість браузерів.
- Numbered List (Нумерований список). Цей список являє собою послідовність упорядкованих пунктів. Зазвичай вони нумеруються цифрами, починаючи з 1. Нумеровані списки є ідеальним засобом, наприклад, для запису послідовності дій.
Створення списку.
1. Відкривши сторінку в редакторі, помістити курсор на те місце, де має знаходитися початок списку, його можна встановити на початок, середину і навіть на кінець абзацу. Якщо в тому рядку, де стоїть курсор, вже є який-небудь текст, то Frontpage зробить цей абзац першим пунктом списку. Якщо потрібно почати новий список, то поставити курсор на порожню рядок.
2. Вибрати в списку стилів опцію Numbered List.
Frontpage відзначить перший рядок нового списку номером 1. Набрати текст першого пункту списку.
3. Ввівши перший пункт, натиснути клавішу
4. Завершивши введення списку, натиснути комбінацію клавіш
Перетворення суцільного тексту до списку.
Припустимо, що у вас є на сторінці кілька рядків, які ви хотіли б перетворити на список. Ви можете просто виділити всі елементи тексту і вибрати в меню Format позицію Bullets and Numbering (Маркери та Нумерація). Ви побачите діалогове вікно налаштувань маркування і нумерації, яке показано на рис. 7.
Рис. 7. Діалогове вікно Bullets and Numbering.
Діалогове вікно Bullets and Numbering має три вкладки. За допомогою першої вкладки ви зможете визначити вид маркера. Frontpage за замовчуванням запропонує вам застосувати маркування, що належить до тієї декорації, яку ви використовуєте для даної сторінки. Однак ви можете використовувати і інше зображення, вказавши його за допомогою кнопки Browse. Як ви розумієте, для того, щоб список виглядав привабливо, маркер повинен мати невеликі розміри.
Дві інші вкладки, Plain Bullets (Звичайні маркери) і Numbers (Нумерація), дозволяють вам використовувати маркери у вигляді шрифтових символів і нумерації. Ви можете оцінити зовнішній вигляд списку, використовуючи схему попереднього перегляду в лівій частині діалогового вікна. Заданий за замовчуванням стиль не передбачає ніякого форматування. Якщо ви хочете перетворити текст в нумерований список, то в цьому вам допоможуть опції на вкладці Numbers. Якщо список починається не з одиниці, і не з букви "а", то виділіть спочатку один із стилів у позиції "нумерація", потім у текстовому полі Start At (Почати з ..) і введіть номер, з якого треба починати нумерацію, потім натисніть кнопку ОК.
Зміна стилю всього списку.
Для зміни стилю списку встановіть курсор в межах переліку і натисніть праву клавішу миші. Потім виберіть позицію List Properties (Властивості списку) у контекстному меню. Ви побачите діалогове вікно List Properties, дуже схоже на діалогове вікно Bullets and Numbering, за винятком того, що в ньому присутня додаткова вкладка Other (Інше). У ній ви можете вибрати такі можливості, як маркування списку за допомогою графічних зображень, список-меню, список-покажчик (рис. 8). Вибравши стиль, натисніть кнопку ОК, і Frontpage відразу ж застосує зазначений стиль до списку.
Рис. 8. Діалогове вікно List Properties.
Вставка горизонтальної лінії.
Щоб вставити горизонтальну лінію, встановіть курсор там, де ви хотіли б, щоб з'явилася лінія, потім виберіть позицію Horizontal Line (Горизонтальна лінія) в меню Insert. Розгромна лінія буде використовувати ті ж параметри оформлення, що і попередня горизонтальна лінія, створена за допомогою Редактора. Лінії можуть використовуватися на сторінці з будь-якими розмірами і форматом. Також горизонтальні лінії можуть розташовуватися усередині комірки таблиці і будуть відповідати формату цього осередку.
Форматування горизонтальних ліній.
Щоб змінити вужеві створену лінію, натисніть праву кнопку миші і виберіть пункт Horizontal Line Properties з контекстного меню. З'явиться діалогове вікно Horizontal Line Properties, яке показано на рис. 9.
Рис. 9. Діалогове вікно Horizontal Line Properties.
У секції Width (Довжина) ви можете вказати довжину лінії в пікселах або у відсотках від ширини вікна в браузері. Потім в секції Height (Висота) введіть товщину лінії. У секції Alignment (Вирівнювання) ви можете позиціонувати лінію по лівому або правому краю або по центру, встановлюючи відповідно становище Left, Bight або Center. Із списку Color (Колір) ви зможете вибрати для лінії відповідний колір. Якщо значення кольору задане як Default (Колір за умовчанням), то ви також зможете вказати, чи потрібно для даної лінії використовувати затінення, встановивши прапорець Solid Line (Суцільна лінія). Якщо прапорець встановлений, то лінія відображається кольором, встановленим за замовчуванням (звичайно сірим), а якщо лінія використовує затінення, то колір за замовчуванням відтінений матовим кольором сторінки.
Використання декорацій.
Як вже зазначалося раніше, декорації представляють собою простий спосіб надати вашим Web-сторінок цілком професійний вигляд, причому для цього вам зовсім не обов'язково ставати професіоналом у графічному дизайні. Ви вже знаєте, як застосувати декорацію до всього сайту, а тут ми обговоримо, як застосувати декорацію до окремо взятої сторінці. Припустимо, що перебуваючи в Провіднику, ви вибрали вподобану вам декорацію, яка використовує як підкладки яке-небудь специфічне зображення. Але, відкриваючи сторінки в редакторі, ви раптом виявили, що на якійсь одній конкретній сторінці таке зображення буде контрастувати з рештою вмістом. У цьому випадку ви зможете замінити підкладку, не порушуючи інших елементів декорації.
Отже, виберіть у меню Format пункт Theme (Декорація), щоб відкрити вікно Choose Theme (Вибір декорації). Дане вікно діє точно так само, як і однойменне вікно в Провіднику. Вікно надає можливість вибрати відповідну декорацію з числа використовуваних для даного сайту або створити нову. Пам'ятайте про те, що будь-які зміни внесені вами, торкнуться тільки ту сторінку, яка в даний момент відкрито в редакторі.
Мініатюри для попереднього перегляду.
Як ви вже знаєте, присутність на сторінці графічних зображень великого розміру зазвичай не дуже радує відвідувачів ваших сторінок. Використовуючи команду Auto Thumbnails (Генерація мініатюр), ви можете змусити Frontpage автоматично створити зменшену копію будь-якого зображення і помістити її на сторінку, причому з цієї копії буде проставлена гіперпосилання, за якою можна досягти оригіналу. Таким чином, коли відвідувач заходить на вашу сторінку, він бачить зменшені копії зображень, які значно швидше передаються по каналу зв'язку, і вирішує, які з цих картинок він хоче побачити в оригіналі.
Щоб створити мініатюру для попереднього перегляду, виділіть ту картинку, зменшений варіант якої ви хочете зробити, і виберіть пункт Auto Thumbnails з меню Tools (Інструменти) або натисніть комбінацію клавіш
Посилання.
Посилання (вона ж гіперпосилання) - це з'єднання між двома точками. Відвідувачі сайту можуть, клацнувши по посиланню, "перестрибнути" туди, куди вона веде, і місце призначення посилання представляється у вигляді URL (Uniform Resource Locator, Уніфікований покажчик ресурсу). Посилання можуть вказувати на текст, зображення та інші файли (наприклад, на документи Microsoft Office), а також на закладки всередині документів. Наприклад, ви може проставити посилання з документа Microsoft Word на файл Excel. Коли ви клацаєте по такому посиланню, автоматично запускається програма Excel і відкриває файл, на який вказує посилання. Використовуючи Frontpage, ви зможете дуже просто пов'язувати між собою HTML-сторінки і файли Office, створюючи потужний і динамічний сайт.
Створення посилання.
Для того щоб встановити посилання, вьделіте ділянку тексту або зображення, з якого буде здійснюватися перехід, і натисніть комбінацію клавіш
Підказка: Ви можете швидко створити або відредагувати посилання, вибравши потрібний фрагмент тексту і натиснувши кнопку Create or Edit Hyperlink на панелі інструментів.
Рис. 10. Діалогове вікно Create Hyperlink.
Ви можете встановлювати посилання на об'єкти декількох різних типів:
на сторінку в Провіднику Frontpage, на будь-який URL, використовуючи при цьому ваш Web-браузер, на будь-який файл, що знаходиться на Вашому комп'ютері, на будь-яку адресу e-mail. Ви можете також створити нову сторінку і встановити посилання на неї. Крім цього, ви можете вказати, що метою переходу є певна закладка або фрейм. Нижче описані деякі способи створення гіперпосилань:
- Посилання на сторінки сайту, відкритого в даний момент в Провіднику. Якщо який-небудь сайт в даний момент відкрито у провіднику Frontpage, то в діалоговому вікні ви побачите перелік всіх сторінок цього сайту, і на будь-яку з них можна встановити гіперпосилання.
- Посилання на URL. Ви можете ввести точну адресу (URL) сторінки в текстовому полі або ж натиснути на кнопку Use your Web Browser to select a page (Вказати сторінку за допомогою браузера). По натисненню цієї кнопки запускається Web-браузер, встановлений на вашому комп'ютері. Коли ви знайдете потрібну сторінку в Internet, адресу цієї сторінки буде автоматично поміщений в текстове поле URL в діалоговому вікні Create Hyperlink.
- Посилання на локальні файли. Якщо ви хочете встановити гіперпосилання на файл, що знаходиться на вашому комп'ютері, ви можете зробити це, використовуючи кнопку Make a hyperlink to a file on your computer (Створити посилання на файл на вашому комп'ютері). У діалоговому вікні Select File (Вибір файлу) ви можете вказати потрібний файл.
- Посилання на адресу e-mail. Якщо ви хочете створити посилання, яка дозволяла б відвідувачам вашого сайту відправити лист з якого-небудь конкретною адресою, то в цьому випадку можна використовувати кнопку Make a hyperlink that sends E-mail (Створити посилання для відправлення листа по електронній пошті). Ви побачите діалогове вікно Create E-mail Hyperlink (Створення поштового посилання), зображене на рис. 11. Для того щоб таке посилання працювала, вам досить просто ввести адресу одержувача в текстовому полі.
Рис. 11. Діалогове вікно Create E-mail Hyperlink.
- Посилання на нову сторінку. Дана можливість дозволяє створити посилання, що вказує на ще не створену сторінку. Натискання на кнопку Create a page and link to the new page (Створити сторінку і проставити посилання) викликає появу діалогового вікна New (Нова сторінка).
Посилання, створювані автоматично.
Деякі послідовності символів, якими прийнято позначати популярні протоколи Internet, автоматично розпізнаються Frontpage як частини адрес, і на такі послідовності символів, набрані в тексті, посилання будуть проставлені без вашої участі. Наприклад, вам досить набрати в тексті www.microsoft.com, і оскільки www - це стандартний префікс адрес в World Wide Web (Всесвітній Павутині), Frontpage автоматично інтерпретує таку послідовність як URL і перетворює її на заслання виду http://www.microsoft . com /. Таким же чином ви зможете створювати посилання і для інших підтримуваних протоколів, наприклад, посилання для відправки електронної пошти і т. д.
Створення посилань на сторінки сайтів у Internet.
Завдяки Frontpage вам не знадобиться вручну набирати адреси сторінок в Internet, якщо раптом ви захочете проставити на них посилання зі свого документа. Ви зможете легко створювати подібні посилання двома способами:
- Розташуєте курсор на тому місці вашої сторінки, в якому ви хочете проставити посилання, натисніть на панелі інструментів кнопку Create or Edit Hyperlink і перейдіть на вкладку World Wide Web.
- Відкривши будь-який сайт в браузері Microsoft Internet Explorer або Netscape Navigator, просто клацніть по будь-якої посиланням на сторінці і, не відпускаючи кнопку миші, перетягніть її до редактора. Frontpage автоматично створить посилання на цю сторінку.
Побудова таблиць.
Таблиці на сьогоднішній день є одним з найбільш зручних та гнучких засобів організації матеріалу на Web-сторінках; в цій якості вони використовуються практично всіма Web-дизайнерами. Таблиці дозволяють у багатьох випадках спростити завдання форматування тексту і розміщення графічних зображень; крім цього, завдяки таблиць легше досягти однаковості уявленні ваших сторінок різними браузерами, оскільки більшість браузерів трактують таблиці більш-менш схожим чином.
Порада: Якщо ви відкриєте в редакторі документ Word, то що містяться в ньому таблиці будуть перетворені у формат HTML і з ними можна буде оперувати прямо в редакторі. Таблиці Frontpage абсолютно аналогічні за структурою таблицями Word, і всі маніпуляції з ними здійснюються точно так само, як і Word. Вони складаються з клітинок, які містять текст, графіку, фонові зображення, форми, компоненти Frontpage і навіть інші таблиці. Якщо вам знадобиться змінити розмір осередків вже готової таблиці, додати або видалити рядки і таке інше, то в редакторі ви зробите все це без всяких проблем. Створюючи таблицю, ви можете не думати про ширину і висоту її осередків - у міру додавання матеріалу їх розміри будуть підлаштовуватися автоматично.
Побудувати таблицю в редакторі Frontpage можна двома способами: або безпосередньо намалювати її на сторінці, користуючись інструментами панелі таблиць (Table Toolbar), або вставити за допомогою меню Table. Якщо вам важко буде вибрати, який з цих методів віддати перевагу, не турбуйтеся - ви зможете застосувати обидва підходи до однієї про ту ж таблиці. Наприклад, ви можете вставити таблицю через меню Table, а додавати в неї рядки за допомогою інструментів панелі таблиць. Але для ясності обидва ці методу будуть нижче описані окремо, а на закінчення ми порівняємо їх і подивимося, що в них спільного.
Інструменти панелі таблиць.
Побудова таблиць у Frontpage здійснюється практично тим же шляхом, що і в Microsoft Word, за допомогою інструментів панелі таблиць (рис. 12). Щоб показати панель таблиць на екрані, виберіть у меню View опцію Table Toolbar або Draw Table в меню Table.
Рис. 12. Інструменти панелі таблиць.
За допомогою цієї панелі ви можете малювати таблиці прямо на сторінці, а згодом за необхідності змінювати їх параметри. Першою на панелі таблиць розташована кнопка Draw Table (Намалювати таблицю); з неї ви зазвичай і будете починати побудову таблиць:
1. У меню Table опцію Draw Table або натисніть кнопку Draw Table на панелі таблиць; при цьому курсор миші прийме вид олівця.
2. Встановіть курсор в те місце, де ви припускаєте почати таблицю, натисніть кнопку миші і тягніть курсор вниз і направо. На захопленому просторі сторінки буде автоматично побудована таблиця, параметри якої ви потім зможете змінити довільним чином. Щоб ви уявляли собі величину вашої майбутньої таблиці, Редактор пунктирною лінією показує її зовнішній контур.
Отже, ви намалювали таблицю, що складається з одного осередку, з одним стовпцем і одним рядком, при цьому автоматично була намальована її рамка (щоб прибрати рамку, перейдіть у вікно установки властивостей таблиці Ваша таблиця буде виглядати приблизно так, як показано на рис. 13.
Рис. 13. Нова таблиця.
Якщо початковий результат вас не влаштовує, ви завжди можете, не перерісовивая таблицю, змінити її розміри. Встановіть курсор на межу таблиці; зауважте, що курсор змінив свою форму і перетворився на двосторонню стрілку. Натисніть кнопку миші і тягніть курсор в потрібну сторону: щоб змінити ширину таблиці, чіпляйтеся за її праву межу, а щоб змінити висоту - за нижню.
Порада: Якщо, перетягуючи кордон, ви будете утримувати натиснутою клавішу
Додавання рядків і стовпців.
Після того як ви додали своєї таблиці бажані розміри, розбийте її на кілька рядків і стовпців. За допомогою курсору-олівця можна побудувати в таблиці практично будь-які графи.
1. Виберіть на панелі таблиць олівець (якщо ви ще цього не зробили), натиснувши кнопку Draw Table.
2. Помістіть олівець всередину осередку, яку ви хочете розділити; при цьому курсор не повинен стосуватися рамки таблиці.
3. Натисніть кнопку миші і тягніть курсор горизонтально, щоб розбити клітинку по горизонталі, або вертикально, щоб розбити по вертикалі. Коли ви почнете тягнути курсор, за ним потягнеться пунктирна лінія, намічаються майбутню графу. Не намагайтеся малювати строго прямолінійно, тому що Frontpage випрямить лінію, яку ви ведете, головне - рухатися у вірному напрямку.
На рис. 14 представлена таблиця, розділена на дві колонки, причому права колонка розділена на два рядки.
Рис. 14. Таблиця ускладнюється.
Якщо ви хочете розбити таблицю на рівні рядки або стовпці, скористайтеся кнопками панелі таблиць Insert Rows (Вставити рядки) та Insert Columns (Вставити стовпці).
1. Помістіть курсор всередину осередку, яку ви хочете розділити.
2. Натисніть кнопку Insert Columns або Insert Rows. Frontpage створить два стовпці наполовину осередки шириною кожен або, відповідно, додасть рядок, висота якої буде дорівнює висоті осередки. Миготливий курсор залишиться в новій осередку.
На рис. 15 наведено приклад таблиці, розбитою за допомогою кнопки панелі таблиць Insert Columns. Зверніть увагу, що тепер у нас є одна таблиця, розділена на два однакових стовпця. Повторюючи вищеописані кроки, ви можете розбити кожну клітинку скільки завгодно разів. Рамку і сітку таблиці ви також абсолютно вільно можете рухати як буде потрібно, незалежно від складності таблиці і методу її побудови.
Рис. 15. Розбиття таблиці на два рівних стовпці.
Інші кнопки панелі таблиць.
Решта кнопки панелі надають у ваше розпорядження такі можливості:
- Delete Cells (Видалити комірки). Осередки можна видаляти ще й таким чином: відзначити рядок або стовпець, в яких містяться непотрібні осередки, і натиснути кнопку Delete Cells.
- Merge Cells (Об'єднати комірки). Щоб злити воєдино кілька суміжних клітинок, відзначте їх та натисніть кнопку Merge Cells на панелі таблиць.
- Split Cells (Розбити комірки). Щоб розбити певну клітинку, виділіть її та натисніть на панелі таблиць кнопку Split Cells. При цьому з'явиться діалогове вікно Split Cells.
- Align Top (Притиснути вгору), Center Vertically (відцентрувати по вертикалі), Align Bottom (Притиснути вниз). Ці кнопки відповідним чином діють на розташування тексту у клітинці таблиці.
- Distribute Rows Evenly (Рівномірно розподілити рядки), Distribute Columns Evenly (Рівномірно розподілити стовпці). Якщо ви хочете, щоб ряд суміжних рядків або стовпців були однакового розміру, відзначте їх та скористайтеся однією з цих кнопок.
- Background Color (Фоновий колір). Якщо ви хочете зробити фон однієї або кількох клітинок або таблиці в цілому кольоровим, виберіть потрібну область і натисніть кнопку Background Color. З'явиться діалогове вікно Color (Вибір кольору); виберіть у ньому вподобаний вам колір і натисніть ОК.
Вставка таблиці.
А ось як виглядає процес вставки таблиці з допомогою команд меню Frontpage:
1. Встановіть курсор в те місце, де ви хочете почати таблицю, і виберіть у меню Table команду Insert Table. Ви побачите діалогове вікно Insert Table, показане на рис. 16.
Рис. 16. Діалогове вікно Insert Table.
2. Введіть передбачуване число рядків і стовпців вашої таблиці. Згодом рядки і стовпці ви зможете як додавати, так і видаляти.
3. Виберіть варіант вирівнювання в таблиці в цілому: по лівому краю, по центру або по правому краю.
4. Введіть ширину рамки таблиці (Border Size) в пікселах. Якщо рамка не потрібна, встановіть це значення рівним нулю. Ця рамка буде оточувати всю таблицю в цілому. Якщо потрібно, виберіть її колір. Крім неї, рамкою можна оточити будь-які елементи таблиці, і їх ширина теж регулюється в цьому вікно. У будь-якому випадку точний вигляд таблиці в браузері в більшій мірі визначається особливостями самого браузера, ніж цими параметрами.
Порада: Якщо ви будуєте таблицю без рамки і без ліній сітки і хочете подивитися, як вона буде виглядати без символів форматування, то скористайтеся командою Format Marks меню View або кнопкою Show / Hide Paragraph стандартної панелі інструментів. У редакторі буде видно контури осередків, які браузери не покажуть.
5. Введіть значення Cell Padding (Відступ від кордону осередки) в пікселах. Це число встановлює мінімальну відстань між рамками таблиці та її вмістом. Цей параметр відноситься до всіх клітинок таблиці і індивідуально для окремих осередків не встановлюється. За умовчанням пропонується значення Cell Padding, рівне 1.
6. Введіть значення Cell Spacing (Інтервал між комірками) в пікселах. Цей параметр задає відстань між осередками таблиці і у вигляді рамки навколо кожного осередку (в тому числі навколо осередків, що знаходяться у країв таблиці). Стандартне значення проміжку між осередками дорівнює 2.
7. Введіть значення ширини таблиці (опція Specify Width). Ширину можна задавати як числом пікселів, так і у відсотках від ширини сторінки. Наприклад, якщо ви встановите ширину таблиці дорівнює 50%, то таблиця буде займати по ширині половину вікна браузера.
8. Натисніть кнопку ОК. Редактор створить таблицю і покаже її на екрані; картина, яку ви побачите, наведена на рис. 17. Frontpage за кількістю стовпців і по ширині таблиці сам обчислить ширину всіх стовпців.
Рис. 17. Таблиця має три рядки і два стовпці, розташовується по лівому краю сторінки, оточена рамкою шириною 2 пікселя, відстань між осередками (Cell Spacing) становить 2 пікселя, а відступ від кордону осередки (Cell Padding) - 1 піксель. Ширина таблиці дорівнює 50%.
Зміна властивостей таблиці.
При необхідності в будь-який момент можна змінити тип вирівнювання таблиці, ширину її рамки, інтервал між осередками, відступ від кордону осередки і сумарну ширину таблиці. Для цього існує команда Table Properties (Властивості таблиці). Клацніть на таблиці правою кнопкою миші і знайдіть у контекстному меню пункт Table Properties. Можна дістатися до цієї опції та іншим способом: встановіть курсор всередину таблиці і виберіть Table Properties в меню Table. Перед вами відкриється вікно діалогу Table Properties, показане на рис. 18.
Рис. 18. Діалогове вікно Table Properties.
Порада: Щоб в сторінку швидко вставити таблицю, натисніть на панелі інструментів кнопку Insert Table і що з'явилася сітці відміряйте потрібний фрагмент. Параметри нової таблиці будуть грунтуватися на останній за часом установці властивостей таблиці.
Щоб подивитися, як таблиця буде виглядати при тих чи інших значеннях різних параметрів, Відкрийте діалогове вікно Table Properties, зміните в ньому якесь значення і натисніть кнопку Apply (Застосувати). Ви можете змінювати параметри і натискати Apply скільки вам заманеться.
Крім усього іншого, ви ще можете давати таблиці фоновий малюнок або задати колір її тла. Щоб вибрати малюнок для фону вашої таблиці, встановіть прапорець Use Background Image (Використовувати фонове зображення). Після цього стане доступним текстове поле під ним. Можна ввести ім'я файлу з зображенням прямо в ньому, а можна натиснути розташовану поруч кнопку Browse; в цьому випадку відкриється вікно Select Background Image (Вибрати фонове зображення), де у вас буде кілька варіантів подальших дій:
- Якщо ви збираєтеся використовувати малюнок, присутній у відкритому сайті, знайдіть файл у відповідній папці і натисніть кнопку ОК.
- Якщо потрібний вам файл знаходиться в іншому місці (на дискеті, на жорсткому диску, де-то в локальній мережі), знайдіть його за допомогою стандартних засобів навігації діалогового вікна Select Background Image, а потім натисніть кнопку ОК. Ви можете навіть вибрати фонове зображення у Всесвітній Павутині або створити гіперпосилання на файл, що знаходиться на Вашому комп'ютері.
- І, нарешті, ви можете скористатися колекцією картинок (Clip Art), що поставляється разом з Frontpage. Для цього в діалоговому вікні натисніть кнопку Clip Art, виберіть вподобане зображення і натисніть кнопку ОК.
Якщо ваша таблиця має рамку, то в секції Custom Colors (Замовні кольору) вікна діалогу Table Properties ви можете підібрати для неї кольору. Якщо ви хочете встановити для рамок однорідний колір, то виберіть його у списку Border, якщо ж ви будете вибирати кольору зі списків Light Border і Dark Border, то зможете надати своїй таблиці деяку тривимірність. Зі списку Light Border виберіть колір освітлених площин рамки, а з Dark Border - колір тіньової частини. Поекспериментувавши з цими квітами, ви зможете надавати своїм таблиць вельми привабливий вигляд.
Примітка: Напевно, самий простий спосіб додавання нових рядків у таблицю - встановити курсор у праву нижню клітинку таблиці і натиснути клавішу <Таb>.
Розміщення зображень.
Тепер, коли ви знаєте трохи про види графічних форматів і про управління кольором, настав час з'ясувати, як розмістити зображення на Web-сторінках. Для цього в меню Insert Редактора виберіть команду Image (зображення) і далі слідуйте описаної нижче процедури:
1. У вікні редактора помістіть курсор в те місце, де ви хочете бачити зображення.
2. У меню Insert виберіть Image. Якщо при цьому у вас запущений Провідник, ви побачите показане на рис. 19 діалогове вікно Image.
Рис. 19. Діалогове вікно Image.
Тут ви можете вибрати будь-який файл у відкритому сайті, а також переглянути вміст його папок. Натиснувши на будь-якому файлі, ви побачите його вміст у правій області діалогового вікна. Якщо вам відомий URL файлу, то ви можете просто ввести його в текстовому полі, окрім цього, вибрати зображення можна також за допомогою браузера - для цього слід натиснути кнопку Use your Web Browser to select a page or file праворуч від текстового поля URL. Нарешті, ви можете вказати файл, розташований на вашому комп'ютері, натиснувши кнопку сусідню Select a file on your computer; в цьому випадку з'явиться описане далі діалогове вікно Select File.
При автономній роботі в редакторі ви відразу побачите діалогове вікно Select File, показане на рис. 20.
Рис. 20. Діалогове вікно Select File.
У цьому діалоговому вікні ви можете вибрати будь-який файл на вашому комп'ютері. Натиснувши кнопку Cancel, ви перейдете в діалогове вікно Image. Звичайно, якщо ви не відкрили сайт в Провіднику, то зможете тут вибрати файл зображення тільки за допомогою браузера.
Якщо у вас є сканер або цифрова камера, то у вашому розпорядженні є дуже цікава можливість. З діалогового вікна Image ви в будь-який момент можете, натиснувши кнопку Scan, вважати зображення прямо з наявного пристрої відеовведення. Далі ви можете помістити отримане зображення безпосередньо до редактора, зберігши його під будь-яким ім'ям у довільній папці. Якщо ви не вкажете ім'я, то файлу буде присвоєно ім'я за замовчуванням і він буде поміщений в папку TEMP каталогу, в якому встановлений Frontpage.
Колекція ілюстрацій.
Frontpage своєму розпорядженні цілою колекцією ілюстрацій (Clip Art), а крім цього йому доступна бібліотека ілюстрацій Microsoft Office (якщо такий у вас встановлений). Дістатися до колекції ілюстрацій можна двома способами: або після натискання кнопки Clip Art діалогового вікна Image, або командою Clipart меню Insert. В обох випадках ви побачите діалогове вікно Microsoft Clip Gallery, показане на рис. 21.
Рис. 21. Діалогове вікно Microsoft Clip Gallery.
З чотирьох наявних вкладок виберіть: Clip Art (Ілюстрації), Pictures (Зображення), Sounds (Звуки) або Video (Відео). Після того як ви знайдете потрібне зображення, виберіть його у вікні попереднього перегляду і натисніть Insert (Вставити). Якщо ви переглядаєте звуки або відеоролики, то перш ніж вставляти, ви можете їх програти, натиснувши кнопку Play. Якщо вам не сподобалися запропоновані зображення, то ви можете натиснути кнопку Connect to Web for additional clips (Піти за додатковими ілюстраціями в Internet), що знаходиться в правій нижній частині діалогового вікна. У цьому випадку ви відразу потрапите на сайт www.microsoft.com, де знайдете десятки безкоштовних ілюстрацій. Будь-які вибрані тут зображення будуть автоматично додані до вашої бібліотеці.
Зміна властивостей зображення.
При бажанні ви можете в широких межах змінювати багато характеристик зображення і його розташування на сторінці. Для того щоб змінити будь-яке з властивостей зображення, необхідно:
1. Вибрати зображення в редакторі, клацнувши на ньому мишкою.
2. Вибрати в меню Edit пункт Image Properties. Ви побачите діалогове вікно Image Properties, показане на рис. 22, що складається з трьох вкладок:
General (Загальні), Video (Відео) і Appearance (Оформлення).
Рис. 22. Діалогове вікно Image Properties.
3. Внести необхідні зміни. Після закінчення зміни параметрів настройки натисніть кнопку ОК. Природно, ці параметри не будуть висічені в камені, тому якщо вам знову буде потрібно їх змінити, то ви в будь-який момент зможете повернутися до діалогового вікна Image Properties.
Нижче детально розглядаються параметри налаштування діалогового вікна, починаючи з вкладки General.
Підказка: Вивести діалогове вікно Image Properties можна, клацнувши по зображенню правою кнопкою миші і вибравши в меню, що пункт Image Properties. Ще швидше відкрити діалогове вікно Image Properties можна, виділивши зображення і натиснувши комбінацію клавіш +
На вкладці General ви знайдете наступні параметри:
• Image Source (Джерело зображення). У цьому текстовому полі стоїть або відносний URL зображення, що знаходиться на відкритому сайті Frontpage, або абсолютний URL, якщо зображення береться з Internet, або шлях та ім'я локального файлу, якщо воно розташовується на вашому комп'ютері. Якщо ви хочете змінити зображення, то натисніть кнопку Browse; відкриється діалогове вікно Image. Якщо ви хочете відкрити зображення для подальшої обробки в графічному редакторі, натисніть кнопку Edit.
• Type (Тип). У цьому розділі задається формат поточного зображення (GIF або JPEG) і специфічні для обраного формату параметри. Положення перемикача Type відповідає поточному формату; якщо ви поставите його в інше положення, формат зображення буде автоматично перетворено.
При виборі опції GIF ви можете задати такі властивості зображення: Transparent (Прозорий) і Interlaced (Черезрядковий); обидва параметри можна задати одночасно.
• Transparent. Ця опція дозволений тільки для зображень у форматі GIF; прапорець Transparent автоматично встановлюється в тому випадку, якщо в зображенні присутній прозорий колір. Для того щоб повернути невидимим частинам зображення нормальний колір і зробити зображення непрозорим, приберіть цей прапорець. .
• Interlaced. Якщо встановлений перемикач Interlaced, то зображення при перегляді в браузері буде проявлятися поступово, спочатку грубо, стаючи у міру завантаження більш чітким.
При виборі опції JPEG стає доступним поле Quality (Якість).
• Quality (Якість). Якість зображення варіюється в межах від 1 до 100. Більше значення означає менший ступінь стиснення і більш високу якість зображення, а проте це також означає і більший розмір файлу зображення та більш тривалу завантаження. Чим менше це значення, тим, відповідно, більше стиск, що тягне за собою погіршення якості зображення, але разом з тим і зменшення розміру файлу. За замовчуванням значення Quality одно 75.
• Alternative Redivsentations (Альтернативні подання). Не всі браузери підтримують графіку і, крім того, в більшості браузерів висновок графіки можна відключити. З іншого боку, деякі браузери здатні по ходу завантаження з сервера зображень з високою роздільною здатністю виводити замість них зображення в низькому дозволі. У ваших силах забезпечити для кожного з цих випадків альтернативний варіант подання зображення.
• Low-Res (Низька дозвіл). Тут задається зображення з грубим дозволом, який під час завантаження зображення з високою роздільною здатністю буде відображатися замість нього. Натисніть кнопку Browse, виберіть альтернативне зображення і потім натисніть кнопку ОК. Для знавців HTML: завдання альтернативного зображення еквівалентно використанню атрибуту LOWSRC.
Порада: Ні Frontpage, ні браузер не перевіряють, чи є в дійсності грубе зображення версією реального зображення в низькому дозволі. В якості грубого зображення зручно використовувати півтонову версію з невеликою кількістю квітів.
• Text (Текст). У цьому полі задається альтернативний текст, який з'явиться замість зображення, якщо відображення графіки в браузері користувача відключено або відсутній зовсім. Якщо ви не вважаєте за потрібне відмовляти цим відвідувачам в гостинності, не пошкодуйте часу на те, щоб забезпечити текстом весь графічний матеріал вашого сайту. У деяких браузерах цей текст виводиться під час завантаження зображення. За замовчуванням Frontpage вставить в це поле ім'я і розмір зображення; ви ж, зі свого боку, можете довільним чином змінити цю інформацію.
• Default Hyperlink (Лінк за замовчуванням). Ви можете використати частину зображення або всі його цілком у якості активної області, яка є гіперпосиланням (як саме, ви дізнаєтеся трохи пізніше в цьому розділі). Якщо зображення містить декілька активних областей, то в цій секції ви можете задати гіперпосилання для тих його частин, які не потрапляють ні в одну активну область.
Щоб встановити посилання за замовчуванням: Натиснувши кнопку Browse, ви побачите діалогове вікно Edit Hyperlink. Як посилання ви можете використовувати одну з відкритих в даний час сторінок; сторінку або файл з сайтів WWW, Gopher, Newsgroup або FTP; нарешті, нову сторінку. Натиснувши кнопку Make a hyperlink that sends E-mail, ви поставите посилання, з якою можна буде відправляти електронну пошту. Встановіть посилання; щоб повернутися в діалогове вікно Image Properties, натисніть OK.
Щоб змінити посилання за замовчуванням: Якщо з зображенням уже пов'язана гіперпосилання, натисніть кнопку Browse; ви побачите діалогове вікно Edit Hyperlink. Редагування посилання виробляється точно так само, як і встановлення. Відредагуйте посилання та натисніть кнопку ОК, щоб повернутися в діалогове вікно Image Properties.
У текстовому полі Target Frame ви можете вказати цільової фрейм для посилання за замовчуванням. Для приєднання або редагування пов'язаної із зображенням таблиці стилів натисніть кнопку Style.
Вкладка Video діалогового вікна Image Properties, показана на рис. 23, дозволяє поміщати на сторінку файли типу AVI (аудіо-і відеофайли). Зображення, заданий на вкладці General, використовується в якості заставки на час завантаження файлу AVI. Додавання на сторінку відеороликів з допомогою команди Video меню Insert виглядає трохи інакше.
Рис. 23. Вкладка Video діалогового вікна Image Properties.
• Video Source (Джерело відеоданих). У цьому полі Ви можете ввести шлях і ім'я вашого відеофайлу або вказати файл, використовуючи кнопку Browse.
• Show Controls in Browser (Показувати в браузері елементи управління). При встановленому прапорці разом з відеороликом в браузері будуть відображатися такі елементи управління: Play (Пуск), Stop (Стоп) і повзунок перемотування ролика.
• Repeat (Повтор). У цьому розділі встановлюється частота і момент початку відтворення відеофайлу.
• Loop (Цикл). Вкажіть у цьому полі число повторень вашого відеофрагменту
• Loop fielay (Затримка). Цей параметр задає часовий інтервал у мілісекундах між послідовними повтореннями.
• Forever (Завжди). Встановіть цей прапорець в тому випадку, якщо ви хочете, щоб відеоролик крутився весь час показу сторінки.
• Start (Запуск). У цьому розділі ви можете вказати час початку програвання відеофайлу.
• On File Open (При відкритті файлу). При установці цього прапорця відеоролик буде запущений відразу після завантаження в браузер.
• On Mouse Over (За курсору миші). При установці цього прапорця відтворення відеофайлу розпочнеться в той момент, коли користувач встановить на його заставку курсор миші.
Третя вкладка діалогового вікна Image Properties називається Appearance (рис. 24), з її допомогою ви будете керувати деякими параметрами оформлення зображення.
Рис. 24. Вкладка Appearance діалогового вікна Image Properties.
• Layout (Розміщення). У цьому розділі визначається положення зображення на сторінці.
• Alignment (Вирівнювання). Визначає характер вирівнювання зображення по відношенню до навколишнього тексту. У вашому розпорядженні декілька варіантів вирівнювання.
Bottom: Вирівнювання тексту по нижній межі зображення таким чином, що текст починається внизу зображення.
Middle: Вирівнювання тексту по середині зображення Тор: Вирівнювання тексту по верхній межі зображення.
Absbottom: Вирівнювання зображення по нижній межі поточного рядка.
Absmiddle: Вирівнювання зображення по середині поточного рядка.
Texttop: Вирівнювання верхньої межі зображення по верху найвищої тексту в рядку.
Baseline: Вирівнювання зображення по опорної лінії поточного рядка.
Left: Зображення розміщується по лівому краю сторінки, наступний текст обтікає його по правій стороні.
Right: Зображення розміщується по правому краю сторінки, наступний текст обтікає його по лівій стороні.
Порада: Керувати розташуванням зображення (ліворуч, праворуч і по центру сторінки) можна також за допомогою кнопок вирівнювання панелі інструментів редактора. Всі ці операції відбуваються в режимі WYSIWYG, так що ви відразу зможете оцінити, як зображення буде виглядати в браузері.
Ці установки мають сенс тільки для зображень, розташованих на одному рядку з текстом. Якщо зображення є в рядку єдиним елементом, то вирівнювання буде мати значення Bottom.
• Border Thickness (Товщина рамки). Визначає ширину (в пікселях) чорної рамки навколо зображення. Щоб змінити ширину, виділіть значення в текстовому полі і введіть замість нього нове.
• Horizontal Spacing (Горизонтальний інтервал). Визначає горизонтальний інтервал у пікселах до найближчого зображення або тексту з обох сторін зображення.
• Vertical Spacing (Вертикальний інтервал). Визначає вертикальний інтервал у пікселах до найближчого зверху і / або знизу зображення або тексту.
• Size (Розмір). У цьому розділі відображається висота (Height) і ширина (Width) зображення в пікселах. Для того щоб вручну змінити розміри зображення, або для того, щоб в код HTML були включені теги ширини і висоти, встановіть прапорець Specify Size. Розміри обчислюються або в пікселях, або у відсотках від розмірів вікна браузера.
• Keep Aspect Ratio (Зберегти пропорції). Маніпулюючи розмірами зображення, встановіть цей прапорець, щоб зберегти пропорції зображення при зміні одного з розмірів.
Підказка: Можна міняти розмір зображення, чіпляючи його за сторони або кути і витягаючи в потрібному напрямку. Якщо ви будете тягти зображення за кути, то його розміри будуть змінюватися пропорційно. Пам'ятайте, що це впливає тільки на видимий розмір зображення, але не на розмір файлу.
Примітка: Коли браузер починає завантажувати сторінку, він шукає теги HTML. Один з цих тегів відноситься до зображень. Коли ширина і висота зображення відомі заздалегідь, браузер виділяє під нього простір на сторінці ще до завантаження зображення. Якщо теги ширини і висоти не задані, перш ніж виділити для зображення місце на сторінці, браузер очікує закінчення його завантаження. Коли воно буде додано, текст та інші елементи сторінки змістяться, звільняючи зображенню місце. Щоб гарантувати наявність цих тегів, встановіть на вкладці Appearance діалогового вікна Image Properties прапорець Specify Size.
Звуки.
Фонові звуки додадуть вашому сайту нову якість і зроблять його більш "мультимедійним". Фоновий звук включається в той момент, коли відвідувач заходить на сайт. Звук може відтворюватися задану кількість разів або безперервно. Непомірне використання фонового звуку може дратувати, тому застосовуйте фонові звуки в міру і до місця.
Frontpage підтримує кілька типів звукових файлів: оцифровані звуки (файли з розширенням WAV) і MIDI послідовності (файли MID), а також файли у форматі AIFF (розширення AIF, AIFC, AIFF) і AU (розширення AU, SND).
Вставка фонового звуку та встановлення його властивостей виробляється в діалоговому вікні Page Properties (Властивості сторінки). Щоб вставити в сторінку звук:
1. Клацніть на сторінці правою кнопкою миші і виберіть у контекстному меню пункт Page Properties (або знайдіть Page Properties в меню File); відкриється показане на рис. 25 діалогове вікно Page Properties.
Рис. 25. Діалогове вікно Page Properties.
2. На вкладці General (Загальні) у секції Background Sound (Фоновий звук) вкажіть шлях до потрібного звукового файлу. Можна не вводити шлях до файлу вручну, а вибрати файл, натиснувши кнопку Browse; з'явиться діалогове вікно Background Sound, показане на рис. 26.
Рис. 26. Діалогове вікно Background Sound.
Можна вибрати звук в цьому сайті, можна за допомогою браузера знайти потрібний файл в Internet, а можна вказати файл, що знаходиться на локальному диску вашого комп'ютера. Завершивши вибір файлу, натисніть кнопку ОК, щоб повернутися в діалогове вікно Page Properties.
3. У рядку Loop діалогового вікна Page Properties задайте кількість повторень звуку. Якщо ви хочете, щоб звук відтворювався циклічно, встановіть прапорець Forever (Завжди).
4. Вийдіть з діалогового вікна Page Properties, натиснувши кнопку ОК.
Рухливі кнопки.
Ви коли-небудь цікавилися, як влаштовані такі симпатичні кнопочки на деяких Web-сторінках, які можна натискати і при цьому вони змінюють колір, коли ви проводите над ними курсор миші? Звичайно, щоб самому сконструювати таку кнопку, потрібно дещо змислити в програмуванні та графічному дизайні. Проте ви вже знаєте, що за допомогою Frontpage ви можете дозволити собі таке, про що раніше і подумати не могли, і знову Frontpage не підведе вас: скористайтеся опцією Hover Button (Рухлива кнопка).
Щоб створити повноцінну рухливу кнопку, що реагує на рухи миші і забезпечену власної гіперпосиланням, вам знадобиться тільки зробити кілька нескладних установок Для початку виберіть у меню Insert команду Active Elements і потім Hover Button в меню, що В це вікно можна потрапити й іншим шляхом: клацнувши правою кнопкою миші на існуючій рухомий кнопці і вибравши в контекстному меню Java Applet Properties (Властивості Java-аплета), або подвійним клацанням на існуючій кнопці, або виділивши рухливу кнопку, натиснути комбінацію клавіш +
Рис. 27. Діалогове вікно Hover Button.
У вікні Hover Button знаходиться ряд стандартних опцій, а також кілька більш екзотичних, забезпечують цікаві додаткові можливості, такі, як програвання звукового файлу або використання зображення в якості кнопки. У число стандартних опцій входять наступні:
- Button Text (Текст на кнопці) Більшість кнопок на Web-сторінках забезпечені текстом, що пояснюють, чого слід очікувати при натисканні на них. Текст, який ви хотіли б розмістити на кнопці, введіть у текстовому полі Button Text.
- Link to (Посилання). Якщо з кнопкою повинна бути пов'язана гіперпосилання, введіть її URL в цьому текстовому полі або поставте URL, натиснувши кнопку Browse. Майте на увазі, що в більшості своїй ваші відвідувачі схильні припускати, що з кнопкою пов'язана з гіперпосилання, так що намагайтесь не обманювати їх очікувань.
- Button color (Колір кнопки). Цей список, що розкривається служить для завдання кольору кнопки. Якщо для кнопки ви виберете зображення (опція Custom), то ставити тут колір ні до чого.
- Effect (Ефект), Effect color (Колір ефекту). У списку Effect ви можете вибрати один з безлічі візуальних ефектів. Колір кнопки вибирається в списку Effect Color. Тут є ряд цікавих варіантів, так що поекспериментуйте і виберіть той, який краще всього підходить.
- Width (Ширіна), Height (Висота). Тут слід ввести значення відповідно ширини і висоти (в пікселях) вашої кнопки. Якщо в якості кнопки ви використовуєте зображення, то в цих полях слід проставити його розміри.
Щоб дістатися до спеціальних опцій рухомий кнопки, натисніть у нижній частині діалогового вікна Hover Button кнопку Custom; при цьому відкриється діалогове вікно Custom, показане на рис. 28.
(Це вікно поділено на дві частини, в кожній з яких мають місце всього по два параметри.).
Рис. 28. Діалогове вікно Custom.
- Play Sound (Програвати звук). У цій секції можна задати звук, який буде відтворюватися, коли користувач клацне по кнопці мишею (On click) або проведе курсор миші над нею (On hover). Можна програвати звук в обох випадках, але це не саме розумне рішення. Для пошуку звукових файлів використовується стандартний діалог Browse.
- Custom Image (Замовлене зображення). Якщо вам здається, що у графічному виконанні ваша кнопка буде виглядати краще, натисніть поруч з полем Button кнопку Browse і виберіть відповідний малюнок. А якщо вам потрібно, щоб зображення на кнопці з'являлося, коли користувач проводить над нею мишею, то аналогічно вкажіть зображення в полі On hover. He забудьте, що в діалоговому вікні Hover Button вам потрібно буде ввести для вибраних тут зображень правильні значення ширини і висоти.
Менеджер банерів.
Одним з найбільш популярних на сьогоднішній день способів заробляння грошей на Internet є продаж рекламного місця на сторінках. Ймовірно, подекуди ви помічали, що коли ви затримуєтеся на сторінці на більш-менш тривалий час, то банери на одному і тому ж місці змінюють один одного? Якщо ви хочете, щоб ваша сторінка виглядала не гірше за інших, то за допомогою Менеджера банерів (Banner Ad Manager) ви зможете організувати на своєму сайті чергуються банери.
Зрозуміло, ваші можливості не обмежуються одними банерами. Ви можете чергувати будь-які зображення і навіть забезпечувати плавні переходи між ними; наприклад, ви зможете створити свій власний маленьке слайд-шоу.
Frontpage створює чергуються банери у вигляді Java-аплетів, для конфігурування їх властивостей призначено діалогове вікно Banner Ad Manager, представлене на рис. 29.
Рис. 29. Діалогове вікно Banner Ad Manager.
Потрапити в цей діалогове вікно можна через меню Active Elements або за допомогою подвійного клацання на існуючому банері. Можна також клацнути на банері правою кнопкою миші і вибрати з контекстного меню опцію Java Applet Properties (Властивості Java-аплета) або натиснути комбінацію клавіш +
- Width (Ширіна), Height (Висота). Будьте уважні: тут слід ввести значення, що відповідають розмірам найбільшого з серії чергуються зображень. Всі інші зображення будуть розташовуватися на нейтральному тлі по центру. Якщо ви збираєтеся витягти максимум користі з цього ефекту, то стежте за тим, щоб всі зображення були приблизно однакові за розмірами.
- Transition (Перехід). Тут вам надається наступний вибір: Blinds Horizontal (Горизонтальний перехід), Blinds Vertical (Вертикальний перехід), Dissolve (Розчинення), Box In (Стиснення) або Box Out (Розширення). При значенні None зображення будуть виводитися без перехідних ефектів. Тут же можна встановити час (у секундах) демонстрації банера до зміни його наступним. Якщо банер містить текст, то цей час має бути не дуже великим, але достатнім для того, щоб ваші відвідувачі встигли його прочитати; практика показує, що час показу банера не повинен перевищувати 10 с. Якщо вам здається, що цього часу не вистачить для читання вашого банера, то, можливо, ви надмірно перевантажили його текстом. Уявіть собі, що банер - це рекламний щит на узбіччі шосе. Коли ви ведете машину, то на прочитання його у вас є одна-дві секунди; з таким розрахунком вони і проектуються, і ви також намагайтеся підходити до своїх банерів з цих же позицій.
- Link To (Посилання на ...). Якщо ви хочете, щоб з банером була пов'язана гіперпосилання, вкажіть у цьому полі її URL. Спробуйте уявити себе на місці користувача і прикиньте, що б ви зробили, зайшовши на вашу сторінку. Якщо ваш банер виглядає як рекламний, то користувач може захотіти клацнути на ньому, і значить, треба дати йому таку можливість, а якщо банер виконує чисто декоративну функцію, він не повинен викликати такого бажання. Для завдання посилання можна використовувати стандартну кнопку Browse.
- Images to Display (Зображення). У цьому списку містяться імена файлів зображень, які будуть чергуватися, тут їх можна додавати і видаляти. Щоб додати до списку нове зображення, натисніть кнопку Add, а щоб видалити з нього непотрібне, натисніть кнопку Remove. Зображення будуть відтворюватися зверху вниз по порядку; саме верхнє буде показано першим і т. д. Ви можете змінити порядок цей список довільним чином, для цього вибирайте імена файлів і переставляйте їх, як потрібно, за допомогою клавіш Move Up і Move Down (Менеджер банерів буде змінювати за списком банери на екрані до тих пір, поки користувач не покине сторінку).
Рядки, що біжать.
Рядки, що біжать (marquees) залучають до себе погляд, змушуючи відвідувачів приділяти вашому Саїто більш пильну увагу. Однак з біжать рядками, як і з усіма іншими сильнодіючими засобами, необхідно дотримуватися почуття міри - надлишок їх може дратувати; тоді ваші відвідувачі в кращому випадку будуть їх ігнорувати.
Біжучі рядки - це елементи HTML, що дозволяють вставити в сторінку рухомий текст; рядки, що біжать перетворюють статичні сторінки в динамічні і живі. Щоб помістити на сторінку біжучий рядок:
1. Встановіть курсор в те місце сторінки, де має розташовуватися рядок, що біжить. У меню Insert пункт Active Elements і далі Marquee в меню, що. На екрані з'явиться діалогове вікно Marquee Properties (Властивості рядка, що біжить), показане на рис. 30.
Рис. 30. Діалогове вікно Marquee Properties.
2. У полі Text введіть текст біжучого рядка.
3. У секції Direction (Напрям) вкажіть напрямок руху рядка - Left (Ліворуч) або Right (Вправо). (Якщо на кроці 5 у секції Behavior буде вибрано становище Alternate, то задавати напрямок руху в цьому місці не потрібно).
4. У секції Movement Speed (Швидкість руху) введіть значення затримки (Delay) і кроку (Amount). Затримка визначає інтервал у мілісекундах між послідовними переміщеннями рядка. Крок задає відстань у пікселях між послідовними положеннями рядка, тобто швидкість руху рядка можна підвищити, збільшуючи їх кількість. Маніпулюючи двома цими значеннями, можна змусити "бігати" вашу рядок з будь-якою швидкістю.
5. У секції Behavior (Поведінка) виберіть одну з наступних опцій:
• Scroll (Прокрутка). У цьому випадку рядок рухається по екрану в напрямку, зазначеному в секції Direction. Текст з'являється з-за кордону області, відведеній рухомому рядку, і зникає за протилежним краєм.
• Slide (Зрушення). Цей варіант відрізняється від попереднього тим, що рядок, досягнувши протилежного краю, зупиняється, і текст залишається на екрані.
• Alternate (Почергово). При цьому значенні параметра Behavior текст біжучого рядка рухається поперемінно то в одну, то в іншу сторону, ніколи не зникаючи з екрану.
6. У секції Align with Text (Розташування тексту) вкажіть, як текст повинен розташовуватися в просторі, відведеному рухомому рядку; розміри цієї області задаються в секції Size. Текст можна притиснути до верхньої межі поля рядка (Ton), до нижньої межі (Bottom) або розмістити посередині (Middle).
7. У секції Size встановлюється розмір прямокутної області, відведеній рухомому рядку. Щоб задати ширину, встановіть прапорець Specify Width. Якщо ви задаєте ширину в пікселах, то введіть потрібне значення і виберете перемикач In Pixels; якщо ширина повинна бути задана у відсотках від ширини екрану, то введіть її значення і виберіть перемикач In Percent.
Щоб задати розмір області рухомого рядка по вертикалі, встановіть прапорець Specify Height. Щоб задати висоту в пікселах, введіть число і виберіть In Pixels або, відповідно. In Percent, щоб задати висоту рядка у відсотках від висоти вікна браузера.
Порада: Щоб рядок, що біжить легко читалася, надайте їй більше свободи: відведіть їй поле достатньої висоти і розташуйте посередині поля (секція Align with Text, параметр Middle).
8. У секції Repeat задайте число "пробігів" рядки або, якщо ви хочете, щоб рядок бігла постійно, без кінця, встановіть прапорець Continuously (Безперервно).
9. При бажанні задайте для рухомого рядка колір фону, вибравши його із списку Background Color. Іноді фон рядка, що біжить, відмінний від фону решті сторінки, справляє сприятливе враження, але намагайтеся не перегодовувати свою аудиторію подібними експериментами.
10. Зробивши всі необхідні установки, натисніть кнопку ОК і вийдіть з діалогового вікна Marquee Properties.
Зміна параметрів біжучого рядка.
Щоб змінити параметри рухомого рядка, клацніть на ній правою кнопкою миші і виберіть в контекстному меню пункг Marquee Properties, або двічі клацніть лівою кнопкою, при цьому відкриється вже знайоме вам діалогове вікно Marquee Properties. Зробіть необхідні виправлення і натисніть кнопку ОK.
Лічильник візитів.
Лічильник візитів (Hit counter) дозволяє оцінити кількість відвідувачів вашої сторінки. Лічильник візитів - не та річ, яку варто вставляти в кожну сторінку, і найчастіше лічильники розташовуються на великих сторінках сайтів, як правило, в нижній частині. Щоб оснастити сторінку подібним лічильником, виберіть у меню Insert пункт Active Elements і далі в меню, що опцію Hit Counter. Відкриється діалогове вікно Hit Counter Properties (Властивості лічильника візитів), показане на рис. 31.
Рис. 31. Діалогове вікно Hit Counter Properties.
У ньому ви зможете вибрати стиль лічильника: перемикач Counter Style надає п'ять готових варіантів, а також можливість створення свого власного (опція Custom Image). У лічильника візитів є один великий недолік: він настільки ж наочно демонструє, скільки народу не відвідало ваш Саїто. Якщо хто-небудь, заглянувши до вас, побачить на лічильнику довгий ряд нулів, він може вирішити, що тут немає нічого цікавого. Якщо ви хочете зробити вигляд, що ваш сайт користується шаленою популярністю, введіть число відвідувань в полі Reset Counter To (Установити значення лічильника); поставтеся до цієї маленької безневинної брехні, як до спритного рекламного трюка. Останній параметр у цьому вікні (Fixed number of digits) дозволяє задати розрядність лічильника.
Вставка відеокадрів.
Ще одним чудовим способом урізноманітнити й прикрасити Web-сторінки є включення до них відеофрагментів. Але, як ви знаєте, відеофайли зазвичай досить великі, і хоча пропускна здатність Internet поступово зростає, її поки що недостатньо для швидкої передачі великих відеороликів.
У правому нижньому кутку вікна Редактора индицируется час завантаження сторінки (в секундах) при швидкості 28,8 Кбіт / с. При зміні сторінки (додаванні в неї відео, звуків, зображень та інших елементів) час завантаження перераховується
Frontpage підтримує формат AVI, стандартний формат Windows для відеофайлів. Щоб включити в свій Web-сайт відеоролик, спочатку його слід вставити в сторінку, а потім встановити параметри відтворення.
Встановивши курсор у те місце сторінок, де буде розташований відеофрагмент, виберіть у меню Insert пункт Active Elements і далі в меню опцію Video. На екрані з'явиться діалогове вікно Video. У ньому стандартним чином вибирається відеофайл, розташований в поточному відкритому сайті, на локальному диску або в Internet. Виберіть потрібний файл і натисніть кнопку ОК. На сторінці з'явиться заставка, що представляє собою перший кадр відеоролика.
Порада: Після подвійного клацання на заставці Редактор спробує запустити програму редагування відео. Оскільки така програма є далеко не в кожного, то, цілком імовірно, ви побачите повідомлення про те, що редактор для даного файлу не вказаний.
Після того як відеофайл вставлений, можна приступати до настроювання його параметрів:
1. Клацніть на заставці відеоролика правою кнопкою миші і виберіть з контекстного меню Image Properties. На екрані з'явиться діалогове вікно Image Properties, відкрите на вкладці Video (рис. 32).
Рис. 32. Діалогове вікно Image Properties.
2. Щоб замінити поточний відеофайл іншим, натисніть кнопку Browse, знайдіть потрібний AVI-файл і натисніть кнопку ОК.
3. Якщо ви хочете, щоб ролик демонструвався разом з елементами управління, тобто кнопками Play, Stop і повзунком прокрутки, встановіть прапорець Show Controls in Browser.
4. У секції Repeat задайте кількість повторень ролика (в полі Loop) і затримку між повторами у мілісекундах (у полі Loop Delay). Якщо файл має програватися необмежено довго, встановіть прапорець Forever.
5. У секції Start крутильного моменту початку відтворення відеофайлу. Якщо встановити прапорець On File Open (При відкритті файлу), відтворення почнеться відразу при відкритті сторінки в браузері, а при встановленому прапорці On Mouse Over (За курсору миші) програвання буде починатися, коли користувач проведе курсор миші над кадром ролика.
6. Зробивши всі необхідні настройки, натисніть кнопку ОК і покиньте діалогове вікно Image Properties.
Загальні поля сторінок.
Припустимо, що ви хочете розмістити логотип вашої компанії внизу кожної зі сторінок створюваного вами сайту. Ви, напевно, думаєте, що доведеться вручну вміщувати зображення на кожну сторінку або вдаватися до використання фреймів, але це не так. Для цього є інший, більш легкий спосіб. Ви можете вказати, що внизу кожної сторінки вашого сайту повинен розташовуватися ділянку, який насправді належить який-небудь іншій сторінці HTML. Таким чином, ви можете, помістивши логотип на такій сторінці, отримати його зображення на всіх документах вашого сайту.
Щоб застосувати такий спільний фрагмент до всього сайту, вам необхідно в Провіднику вибрати в меню Tools пункт Shared Borders (Загальні поля). Якщо ви хочете встановити загальні поля на окремо взятій сторінці, то вам слід зробити ті ж самі дії в редакторі.
Якщо ви вирішите встановити загальні поля на всіх сторінках сайту, то ви побачите діалогове вікно Shared Borders, показане на рис. 33.
Рис. 33. Діалогове вікно Shared Borders.
Якщо ви захочете помістити загальні поля на окремій сторінці, то отримаєте діалогове вікно Page Borders (Поля сторінки), зображене на рис. 34.
Рис. 34. Діалогове вікно Page Borders.
Обидва діалогових вікна працюють приблизно однаково, за винятком того, що в редакторі у вас є можливість застосувати всі налаштування, вже встановлені у Провіднику для всього сайту, або призначити їх окремо для поточної сторінки.
Попередження: Так як для кожного спільного поля створюється нова сторінка, не рекомендується використовувати їх на сторінках фреймів.
Щоб вбудувати в сторінку загальні поля, виберіть ті поля, які необхідно включити і натисніть кнопку ОК. Спільними можна зробити поля вгорі, внизу, з лівого або з правого боку сторінки. На рис. 35 представлена сторінка в редакторі із загальним нижнім полем. Якщо поле поки що порожньо, Frontpage заповнить його пояснювальним коментарем. Ви можете вставити будь-який текст або зображення на ділянку, що буде відображений на всіх сторінках вашого сайту, що використовують цю можливість. Кордон навколо спільного поля не буде показуватися в браузері.
Рис. 35. Сторінка в редакторі.
Перевірка орфографії.
Ось як виглядає процедура перевірки орфографії на сторінці, відкритої в редакторі:
1. Щоб перевірити фрагмент тексту, виділіть його; щоб перевірити сторінку цілком, нічого виділяти не потрібно.
2. Виберіть у меню Tools команду Spelling або натисніть клавішу
3. Якщо спеллер знайде слова, які не зможе розпізнати, ви побачите діалогове вікно Spelling, показане на рис. 36.
Рис. 36. Діалогове вікно Spelling.
Це діалогове вікно надає наступні можливості:
- Not in Dictionary (Немає в словнику). У цьому полі відображається слово, якого немає ні в словнику Office, ні в словнику.
- Ignore (Пропустити). Натисніть цю кнопку, щоб пропустити поточне невпізнане слово і продовжити пошук наступного.
- Ignore All (Пропустити все). Натисніть цю кнопку, щоб пропустити всі входження поточного слова і продовжити пошук.
- Change (Замінити). Натисніть цю кнопку, щоб замінити невпізнане слово в полі Not In Dictionary словом, зазначеним у полі Change To.
- Change All (Замінити все). Натисніть цю кнопку, щоб замінити всі входження поточного слова на сторінці вмістом поля Change To.
- Add (Додати). Натисніть цю кнопку, щоб додати слово з поля Not In Dictionary в тому вигляді, як воно є, в призначений для користувача словник.
Примітка: Frontpage використовує один і той же користувальницький словник спільно з Office, так що будь-які нові слова, які додаються до нього при роботі з додатками Office будуть доступні і у Frontpage, і навпаки.
- Suggest (Варіанти). Коли ця кнопка доступна, натиснувши на неї, ви отримаєте список варіантів заміни сумнівного слова.
- Cancel (Скасувати). Якщо натиснути цю кнопку, діалогове вікно буде закрито і перевірка орфографії припинена. Зміни, внесені в сторінку і призначений для користувача словник, будуть збережені.
Шаблони і майстри.
Шаблони сайтів.
Шаблони - це зразки сайтів або сторінок, які Frontpage пропонує заповнювати в міру необхідності. Як і майстри, вони створюють структуру, яка може служити хорошим стартовим майданчиком для розробки сайту або сторінки. Однак майстри пропонують вам процес замовного створення сайту або сторінки, тоді як вибравши шаблон, ви отримаєте точну копію цього шаблону, з зразком тексту, який ви зможете замінити своїм власним.
Ви можете отримати шаблон сайту в Провіднику Frontpage, вибравши пункт New (Створити) меню File (Файл) і потім вибравши Frontpage Web (Сайт Frontpage) з появи підменю. У вікні діалогу New Frontpage Web (Новий сайт Frontpage) (ви можете вибрати один з наступних шаблонів, щоб використовувати його в якості основи для вашого сайту або сторінки:
- Customer Support Web (Сайт підтримки замовників). Цей шаблон допоможе вам створити таке місце в мережі Internet, де ваші покупці і замовники можуть отримати списки помилок, рішення щодо усунення раніше знайдених проблем і запропонувати свої вдосконалення у вашу продукцію і послуги. Це ідеальний сайт для компаній, що виробляють програмне забезпечення, але він також може бути застосований і в багатьох інших галузях бізнесу.
- Empty Web (Порожній сайт). Коли ви хочете створити пусте робоче поле, ви можете використовувати цей "шаблон". У цьому випадку створюється порожній сайт, без сторінок, і ви можете зробити все інше, додаючи вміст в Провіднику і редакторі Frontpage.
- Project Web (Сайт проекту). Використовуйте цей шаблон для сайту, який буде служити як центральний інформаційний форум для будь-якого проекту. Цей шаблон створює домашню сторінку (home page), сторінку, на якій будуть перераховані учасники проекту, сторінку, на якій буде знаходиться розклад завдань за даним проектом, сторінку, де буде відображатись поточний стан справ за проектом, пошукову сторінку, різні форми і дискусійні сторінки , а також сторінку, яка буде містити посилання на всі інші адреси, де відбувається публічне обговорення даного проекту. Розповімо докладніше про майстрів, які є в списку в діалоговому вікні New Frontpage Web у розділі "Майстра сайтів", далі в цій главі.
Шаблони сторінок.
Frontpage запропонує вам величезне розмаїття шаблонів сторінок, починаючи з шаблону звичайної сторінки (Normal Page), який являє собою каркас чистого аркуша, до досить складної трехстолбцовой сторінки (Three Column Staggered). Додаючи до вже існуючого сайту сторінки, створені за допомогою шаблонів, ви швидко і просто налаштуєте свій Web-сайт.
Сторінки з допомогою шаблонів створюються в редакторі. Це досить простий процес:
1. Відкрийте сайт, в якому буде знаходитися нова сторінка, в Провіднику. (При бажанні можна пропустити цей крок, тому що після того, як ви збережете сторінку, її можна імпортувати в будь-який з існуючих сайтів).
2. У редакторі виберіть пункт New з меню File.
3. У діалоговому вікні New виберіть потрібний шаблон з запропонованого списку (рис. 37) і натисніть кнопку ОК.
Рис. 37. Діалогове вікно New, вкладка Page.
Вам надається багатий вибір різних шаблонів сторінок, які ви зможете використовувати в своєму сайті. Шаблони перераховані в списку в лівій частині діалогового вікна New, а в правій частині цього вікна відобразиться опис поточного шаблону та його приблизний вигляд. При бажанні ви можете переглянути список шаблонів у вигляді великих значків, натиснувши кнопку, яка знаходиться над секцією описів. Якщо в даний момент в редакторі відкрита сторінка фреймів, і ви хочете, щоб нова сторінка відкрилася в поточному фреймі, то в цьому випадку вам слід встановити прапорець Open in current frame (Відкрити в поточному фреймі). У тому випадку, якщо ваш сайт відкритий в Провіднику, і ви хочете внести створювану сторінку в перелік завдань з тим, щоб доопрацювати її згодом, поставте прапорець Just add web task (Тільки додати до переліку завдань).
У кожній новій сторінці, створеної за допомогою шаблону, присутній якийсь грецький текст, т. зв. lorem ipsum і зразок тексту, наприклад, Place Main Title Here (Помістіть тут основний заголовок), які ви згодом заміните своїм власним текстом. На рис. 38 наведено приклад, створений за допомогою шаблону четирехстолбцовой сторінки з шаховим розташуванням (Four Column Staggered page), де показані заголовок і зразок тексту.
Рис. 38. Приклад нової сторінки.
Створення фреймів.
Фрейми (frames) дозволяють розбивати сторінки на прямокутні області, в кожній з яких відображається своя власна сторінка. Ви можете розмістити один або кілька фреймів на сторінці (така сторінка називається сторінкою фреймів або фреймсет (frameset)). Це означає, що ви можете створити сторінку, різні області якої відображають різний зміст. Зміна змісту в одному з фреймів необов'язково тягне за собою зміну змісту в іншому, але якщо ви захочете, то зможете зробити так, щоб сторінка, одержувана за посиланням, що знаходиться в одному фреймі, відображалася в галузі іншого фрейму.
Фрейми вельми популярні у Web-дизайнерів, деякі з них ділять свої сторінки на п'ять, шість і навіть більше фреймів. Не кажучи вже про дражливому впливі, який чиниться на відвідувача, така структура може істотно уповільнити завантаження сайту. Frontpage пропонує вам десять шаблонів фреймів, кожен з яких містить не більше чотирьох фреймів у кожному фреймсете.
Використання шаблонів фреймів.
Сторінки фреймів ви будете створювати в редакторі. Цей процес відбувається приблизно так:
1. Відкрийте в Провіднику сайт, в якому ви хочете створити свій новий фреймсет.
2. У редакторі виберіть пункт New з меню File.
3. У діалоговому вікні New виберіть шаблон з вкладки Frames а потім натисніть кнопку ОК.
Ви зможете попередньо оцінити обраний вами фреймсет, тому що його макет буде показаний в правій частині діалогового вікна New. Дане діалогове вікно працює точно так само, як раніше описане. Як тільки ви зробите свій вибір, Frontpage згенерує сторінки і помістить їх до редактора.
Замовні шаблони.
Оскільки за допомогою набору шаблонів, хоч би великий він не був, неможливо задовольнити потреби будь-якої людини, Frontpage надає вам можливість створювати в редакторі і зберігати свої власні шаблони сторінок. Створення та збереження шаблону зажадає від вас всього декількох кроків:
1. Почніть з шаблону Normal Page (Звичайна сторінка) в редакторі та помістити в неї то вміст, який ви хочете бачити у власному шаблоні, наприклад, логотип вашої компанії, кнопки навігації і т. п.
2. Виберіть команду Save As (Зберегти як) з меню File. Якщо у вас запущений Провідник, то ви побачите діалогове вікно Save As. У тому випадку, якщо ви запустили тільки Редактор, відкриється діалогове вікно Save As, a поверх нього з'явиться діалогове вікно Save As File (Зберегти як файл). Діалогове вікно Save As File дозволяє зберегти файл як незалежну сторінку. Для того щоб перейти у вікно Save As, клацніть по кнопці Cancel у вікні Save As File.
3. У діалоговому вікні Save As натисніть кнопку As Template (Як шаблон). Вписувати URL і назву сторінки до натискання кнопки As Template необов'язково.
4. У діалоговому вікні Save As Template (мал. 39) дайте своєму шаблоном заголовок і назва, потім введіть короткий опис у текстовому вікні Description. Якщо ви хочете замістити своїм шаблоном який-небудь із вже існуючих, клацніть по кнопці Browse (Погортати) і знайдіть той шаблон, який ви хочете перевизначити.
Рис. 39. Діалогове вікно Save As Template.
5. Натисніть кнопку OK у вікні Save As Template. Frontpage збереже сторінку як шаблон поверне вас назад до редактора.
Після того як ви записали свій шаблон, завжди, коли ви будете створювати в редакторі нову сторінку, цей шаблон буде відображатися в списку серед інших шаблонів і майстрів, що поставляються з Frontpage.
Замовні шаблони сайтів.
Для створення замовних (custom) шаблонів сайтів, а також замовних майстрів сайтів і сторінок, які будуть обговорюватися пізніше, можна використовувати Frontpage Developer's Kit, який можна знайти в розділі Frontpage Web-сайту Microsoft за адресою www.microsoft.com/frontpage/.
Майстра.
Скільки часу, на вашу думку, займе створення з нуля Web-сайту вашої організації, що включає:
- Титульний лист з вітальною статтею, представленням компанії та контактною інформацією.
- Сторінку новин, що містить посилання на прес-релізи, замітки, огляди та інформацію про ваш сайт.
- Різні сторінки з описом продукції та послуг, на кожній з яких було б відведено місце під опис даного продукту, інформації про ціни, зображення товару та ін
- Сторінку змісту, яка містила б індекс по вашому сайту і поновлювалась би автоматично при кожній зміні в структурі сайту.
- Форму для зворотного зв'язку, яка б запрошувала у відвідувачів різноманітну інформацію, наприклад, ім'я, адресу, номер телефону, номер факсу та адресу електронної пошти.
Frontpage пропонує два майстри, які створюють повну структуру Web-сайтів, і ще один додатковий майстер, призначений для імпор сайтів, створених поза Frontpage. І, нарешті, є один майстер сторінок, за допомогою якого можна створити сторінку з формою (From Page Wizard) - наприклад, для збору інформації від відвідувачів.
Майстри сайтів.
До складу Frontpage включені два майстри сайтів - Майстер створення представництва компанії (Corporate Presence Wizard) і Майстер сайту дискусійних груп (Discussion Web Wizard). Спершу ми вивчимо Майстер створення представництва компанії, який створює структуру сайту, що складається з перерахованих у попередньому розділі елементів, а потім розглянемо Майстер сайту дискусійних груп, призначений для створення сайту, на якому відвідувачі можуть брати участь в дискусіях на різні теми.
Пам'ятайте, що при бажанні ви легко зможете змінити створений майстром сайт за допомогою Редактора. Ви зможете додати або видалити які-небудь елементи і сторінки або змінити їх відповідно до власних потреб.
Компоненти та форми Frontpage.
Додавання пошукового компонента.
Пошуковий компонент, як видно з рис. 40, створює форму, що дозволяє користувачам ввести слово або декілька слів для пошуку по сайту.
Frontpage насправді не перевіряє всі сторінки сайту; замість цього він переглядає список слів, створюваний і підтримуваний Серверні розширення Frontpage. Як результат Frontpage повертає список сторінок, що містять шукане слово або слова.
Щоб реалізувати можливість пошуку слів або фраз по своєму сайту, зробіть наступне:
1. Встановіть у редакторі курсор в те місце, де буде знаходитися верхній лівий кут пошукової форми (створені пошуковим компонентом мітка, поле введення і кнопки).
Рис. 40. Так виглядає пошуковий компонент Frontpage.
Якщо ви захочете виключити з пошуку деякі сторінки, запишіть їх прямо в папку _private каталогу вашого сайту на Web-сервері (Frontpage no замовчуванням не здійснює пошук по папках, імена яких починаються з символу підкреслення). Якщо ж ви запишете сторінку в будь-якому іншому місці, а потім перемістіть її в Провіднику в папку _private, то вам доведеться оновити пошуковий індекс командою Провідника Recalculate Hyperlinks.
2. У меню Insert виберіть пункт Active Elements, а потім Search Form меню, що випадає. На екрані з'явиться відтворене на рис. 41 діалогове вікно Search Form Properties (Властивості пошукової форми) з вкладками Search Form Properties і Search Results (Результати пошуку). Виберіть вкладку Search Form Properties.
3. У текстовому полі Label for Input (Мітка поля введення) введіть текст, який буде служити міткою поля пошуку. За умовчанням вам буде запропоновано рядок Search for:.
4. У полі Width in Characters (Ширина у символах) задайте ширину поля введення (у символах).
5. У текстовому полі Label for "Start Search" Button (Мітка кнопки Start Search) наберіть текст, який буде нанесений на кнопці запуску пошуку.
6. У текстовому полі Label for "Clear" Button (Мітка кнопки Clear) наберіть текст для кнопки зупинки пошуку.
Рис. 41. Діалогове вікно Search Form Properties.
На вкладці Search Results діалогового вікна Search Form Properties, показаної на рис. 42, розташований ряд опцій, що відносяться до результатів пошуку:
1. У текстовому полі Word List to Search (Список слів для пошуку) введіть Аll, якщо пошук повинен здійснюватися по всьому Web-сайту.
Рис. 942. Вкладка Search Results діалогового вікна Search Form Properties.
2. Три прапорця на цій вкладці визначають категорії інформації, що включається до звіту про результати пошуку:
• Score (Closeness of Match) (Точність збігу). Цей показник відображає якість відповідності результатів пошуку запиту, тобто дозволяє оцінити, наскільки знайдене слово близько до шуканого.
• File Date (Дата файлу). Установка цього прапорця включає в результат пошуку дату і час останньої модифікації документа, що містить знайдений текст.
• File Size (in До bytes) (Розмір файлу в кілобайтах). Цей прапорець призначений для виведення до звіту інформації про розмір знайдених документів, що може бути дуже нагальним для користувачів з повільним телефонним підключенням, яким важливо знати, наскільки великий документ, перш, ніж почати його завантажувати.
3. Ввівши всю необхідну інформацію в діалоговому вікні Search Form Properties, натисніть кнопку ОК. Frontpage помістить пошукову форму на відкриту в редакторі сторінку.
Властивості пошукового компонента легко можна переналаштувати, клацнувши в редакторі правою кнопкою миші на компоненті і вибравши в контекстному меню пункт Form Page Component Properties або виділивши компонент і натиснувши комбінацію клавіш +
Штемпель.
Щоб поставити на сторінці дату і час останнього редагування або автоматичного оновлення сторінки, використовуйте компонент Frontpage під назвою штемпель (timestamp).
Щоб вставити в сторінку штемпель, виконайте наступну процедуру:
1. Встановіть у редакторі курсор на те місце, де повинен буде перебувати штемпель. Зазвичай цьому компоненту передує фраза типу "Дата останньої зміни сторінки".
2. У меню Insert опцію Timestamp; відкриється діалогове вікно Timestamp Properties (Властивості штемпеля), наведене на рис. 43.
Рис. 43. Діалогове вікно Timestamp Properties.
3. У розділі Display вкажіть, яку саме дату ви хотіли б вивести: дату останнього редагування (Date this page was last edited) або останнього автоматичного оновлення (Date this page was last automatically updated). Між редагуванням і оновленням є невелика різниця. Сторінка вважається відредагованою, коли вона змінена і збережена на Web-сервері; сторінка вважається оновленою, коли змінена і збережена на сервері вона або її включається сторінка. Включення в сторінку вмісту інших сторінок здійснюється за допомогою компонента включення, що розглядається в цій главі нижче.
4. Виберіть зі списку, формат дати і часу на штемпелі. Символи TZ в рядках формату часу означають Time Zone (часовий пояс). Якщо штемпель не буде містити дату або час, встановіть у відповідному полі опцію None.
5. Завершивши в діалоговому вікні Timestamp Properties введення необхідної інформації, натисніть кнопку ОК, і штемпель з'явиться на вашій сторінці. Форматування тексту в штемпелі здійснюється стандартними інструментами Редактора.
Приклад використання штемпеля в редакторі наведено на рис. 44.
Рис. 44. Штемпель.
Зміст.
Компонент Table Of Contents (TOG) використовується для створення змісту Web-сайту, що містить посилання на кожну сторінку. Цей компонент можна налаштувати таким чином, щоб при додаванні, видаленні та редагуванні сторінок зміст оновлювалося автоматично.
Включення змісту.
Щоб включити в свою сторінку зміст, вам необхідно зробити наступне:
1. Встановити в редакторі курсор на те місце, де буде починатися зміст.
2. У меню Insert вибрати опцію Table of Contents. Перед вами відкриється діалогове вікно Table of Contents Properties (Властивості змісту), показане на рис. 45.
Рис. 45. Діалогове вікно Table of Contents Properties.
3. У полі Page URL for Starting Point of Table (Адреса початкової сторінки змісту) введіть URL сторінки, з якої буде починатися зміст. У oглавленіі будуть вказані всі сторінки, посилання на які є на початковій сторінці. Якщо ви задасте тут заголовну сторінку вашого Web-сайту (найчастіше вона називається default.htm або index.htm), то зміст буде охоплювати сайт повністю. Якщо ваш сайт відкритий в Провіднику Frontpage, то для перегляду списку його сторінок натисніть кнопку Browse; після цього виберіть сторінку в діалоговому вікні Current Web і натисніть кнопку ОК.
4. У списку, Heading Size (Розмір заголовка) виберіть розмір заголовка першого пункту змісту. Розмір можна задати в межах від 1 (найбільший) до 6 (самий дрібний) або залишити встановлений в браузері за замовчуванням, вибравши опцію None.
5. Решта опцій в цьому діалоговому вікні керують поведінкою компонента Table Of Contents:
• Show each page only once (Включати сторінки лише один раз). Щоб кожна сторінка була присутня у змісті один і тільки один раз, встановіть цей прапорець, в іншому випадку сторінки, посилання на які є в кількох місцях, будуть представлені у змісті у відповідній кількості примірників.
• Show pages with no incoming hyperlinks (Включити в зміст сторінки, на які немає посилань). Встановіть цей прапорець, щоб в зміст потрапили сторінки, на які немає посилань з інших сторінок вашого сайту.
• Recompute table of contents when any other page is edited (Перебудовувати зміст за будь-яких змінах). Встановіть цей прапорець для автоматичної перегенерації змісту при кожному додаванні, видаленні або редагуванні сторінок на вашому сайті. Якщо ваш сайт досить великий і сторінки на ньому оновлюються часто, то установка цього параметру може уповільнити вашу роботу, наприклад, при збереженні. Як контрзахід можна порекомендувати перебудовувати зміст вручну шляхом відкриття і збереження сторінки, яка містить компонент Table Of Contents.
6. Закінчивши в цьому діалоговому вікні всі необхідні налаштування, натисніть кнопку ОК. Зміст з'явиться на сторінці в редакторі. Ви не зможете форматувати окремі пункти змісту, будь-яке форматування на цій сторінці автоматично торкнеться всього змісту в цілому. Так, наприклад, ви не зможете виділити заголовки курсивом, залишивши при цьому список звичайним текстом.
На рис. 46. показано, як зміст виглядає в редакторі.
Рис. 46. Компонент Table Of Contents в редакторі.
Додавання тимчасового зображення.
Щоб реалізувати зображення, видиме протягом заданого періоду часу, зробіть наступне:
1. У редакторі встановіть курсор на те місце, де буде розташовуватися зображення.
2. У меню Insert виберіть Frontpage Component, потім у діалоговому вікні Insert Frontpage Component виберіть пункт Scheduled Image і натисніть кнопку ОК. Ви побачите діалогове вікно Scheduled Image Properties (Властивості змінного зображення), яке показано на рис. 47.
Рис. 47. Діалогове вікно Scheduled Image Properties.
3. У текстовому полі Image To Include (включає зображення) введіть ім'я зображення, яке ви хотіли б бачити. Потрібне зображення можна вибрати з доступних на цьому сайті, для цього слід натиснути кнопку Browse, виділити потрібний файл і потім натиснути кнопку ОК.
4. У секціях Starting date and time (Початкові дата і час) і Ending date and time (Кінцеві дата і час) введіть дату і час відповідно початку і кінця періоду демонстрації зображення.
5. При необхідності на місці тимчасового зображення до і після його демонстрації можна помістити заставку; для цього введіть ім'я зображення-заставки в останньому, самому нижньому текстовому полі діалогового вікна або натисніть кнопку Browse і виберіть зображення-заставку з доступних на сайті.
6. Закінчивши установку параметрів у діалоговому вікні Scheduled Image Properties, натисніть кнопку ОК.
Протягом певного періоду часу ви будете бачити вказане зображення на сторінці. Якщо цей час ще не настав (що найбільш імовірно) і для тимчасового зображення не визначена заміщає його заставка, то в редакторі (але не в браузері) на сторінці в місці включення компонента ви будете бачити напис Expired Scheduled Image (простроченого тимчасового зображення). Побачивши це повідомлення, не лякайтеся - зображення з'явиться на екрані в свій час. Якщо заставка визначена, то вона буде відображатися під час відсутності тимчасового зображення і в редакторі, і в браузері.
Додавання тимчасових сторінок.
Щоб вміст деякої сторінки було доступно користувачам протягом певного проміжку часу, зробіть наступні дії:
1. У редакторі встановіть курсор на те місце в поточній сторінці, де ви хочете бачити включається фрагмент.
2. У меню Insert пункт Frontpage Component, у діалоговому вікні Insert Frontpage Component виберіть Scheduled Include, натисніть кнопку ОК. На екрані відкриється діалогове вікно Scheduled Include Page Component Properties (Властивості тимчасово включається сторінки), показане на рис. 48.
3. У текстовому полі Page URL to include введіть відносний URL потрібної сторінки або виберіть її зі списку сторінок сайту за допомогою кнопки Browse; після цього натисніть кнопку ОК.
Рис. 48. Діалогове вікно Scheduled Include Page Component Properties.
4. Введіть кордону тимчасового діапазону демонстрації сторінки.
5. До і після показу тимчасової сторінки її місце можна заповнити вмістом іншої сторінки. Щоб скористатися цією можливістю, введіть ім'я замещающей сторінки в текстовому полі у нижній частині діалогового вікна або натисніть кнопку Browse, щоб побачити список доступних на сайті сторінок.
6. Після введення інформації в діалоговому вікні Scheduled Include Page Component Properties, натисніть кнопку ОК.
Створення форми зворотного зв'язку.
Почнемо зі створення в редакторі сторінки форми зворотного зв'язку.
1. Виберіть у меню File команду New, в списку шаблонів і майстрів на вкладці Page діалогового вікна New вкажіть Feedback Form і натисніть кнопку ОК.
2. Коли сторінка буде згенерована і завантажена до редактора, збережіть її під назвою Feedback Form і дайте їй у цьому сайті ім'я feedback.htm. Далі, говорячи про форму зворотного зв'язку, ми будемо мати на увазі саме цю сторінку; приклад її наведено на рис. 49.
Рис. 49. Щойно створена форма зворотного зв'язку.
Форма зворотнього зв'язку складається з декількох полів; точніше кажучи, до неї входить щонайменше по одному полю кожного з п'яти типів і дві кнопки команд.
- Перемикач. Кнопки на сторінці під рядком "What kind of comment would you like to send?" ("Якого роду коментарі ви хотіли б послати?") - Це перемикач. Хоча кожна з цих кнопок (radio button) додається до форми окремо, вони працюють як єдина група. Поруч з кожною кнопкою розташовується текст, коротко описує її значення; цей текст не є атрибутом кнопки і вводиться окремо. Перемикачі використовуються в тих випадках, коли необхідно дати користувачеві можливість вибору однієї з декількох опцій (з цією метою можна використовувати також список, що розкривається).
- Список, що розкривається. Поле під рядком "What about us do you want to comment on?" ("Що ви хотіли б сказати про нас?") - Це список (drop-down list). Пункти списку задаються при установці властивостей цього поля. У списку можна вибрати один або більше пунктів.
- Текстове поле. Слідом за розкриває списком розташовується поле, призначене для введення одного рядка тексту (one-line text box). Ширина його задається при встановленні властивостей поля.
- Текстове вікно. Велике поле під рядком "Enter your comments in the space provided below:" (Введіть свої коментарі у відведеному для цього місці) називається текстовим вікном (scrolling text box). Це поле призначене для введення тексту великого обсягу (довгих коментарів і т. п.).
- Прапорець. Маленький квадратик поблизу нижньої межі сторінки, початківець рядок "Please contact me as soon as possible regarding this matter" (Зв'яжіться зі мною як можна швидше) - це прапорець. Коли користувач клацає на порожньому прапорці, на ньому з'являється галочка; за допомогою прапорців користувачам надається вибір так / ні.
- Кнопка. Дві кнопки в самому низу форми зворотного зв'язку, помічені Submit Comments (Опублікувати коментарі) і Clear Form (Очистити форму), представляють собою звичайні кнопки (command buttons або pushbuttons). З їх допомогою користувачі можуть виконати відповідні дії.
Список літератури
Григор'єва Н. В. MS FrontPage 2002 "Крок за кроком", 2002, М.
Леонтьєв Б. Web-дизайн, 2001, М.
Омельченко Л., Федоров А. MS FrontPage 2002 "Самоучитель", 2001.
Усенков Д. уроки Web-майстра, 2002.
Хестер Н. FrontPage 2002 дляWindows "Швидкий старт", 2002.