Головна Головна -> Підручники -> Підручник Вивчаємо FrontPage скачати онлайн-> Компоненти FrontPage рівня сторінки

Компоненти FrontPage рівня сторінки



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

Деякі компоненти FrontPage є самодостатніми. Інші можуть працювати тільки в складі FrontPage Web. Для третіх же необхідно встановити на Web-сервері спеціальне програмне забезпечення під назвою FrontPage Server Extensions. Детальніше про ці спеціальні різновиди компонентів FrontPage розповідається далі.

У цьому розділі буде розказано тільки про «самодостатні» компоненти FrontPage (вони також називаються компонентами рівня сторінки – Page-Level FrontPage Components). Для нормальної роботи цих компонентів немає спеціальної необхідності ні у FrontPage Web, ні у FrontPage Server Extensions. Вони будуть працювати навіть на окремо взятій Web-сторінці. Всього таких компонентів вісім.

Banner Ad Manager – цей компонент призначений для безперервного показу серії зображень, які будуть мінятися через вказаний вами інтервал часу. Зміна зображень буде відбуватися безперервно, поки ця сторінка відкрита в браузері відвідувача Web-сайта.
Comment – призначений для вставки тексту, який буде видимим при роботі у FrontPage, але не при відкритті сторінки в браузері.
Date and Time – це дата і час останнього оновлення сторінки.
Hover Button – при використанні цього компонента кнопка у вікні браузера буде міняти свій зовнішній вигляд, коли над ним буде вміщений покажчик миші. Натиснення на таку кнопку активізує гіперпосилання.
Include Page – відображає вміст однієї Web-сторінки на частині іншої. Звичайно цей засіб використовується, коли є необхідність розмістити на сторінках вашого Web-сайта якісь дані, що повторюються. Перевага полягає в тому, що при зміні цього вмісту, що повторюється, вам знадобиться внести зміни тільки один раз, замість того щоб правити кожну сторінку окремо.
Marquee – по екрану буде пропливати вибраний вами рядок тексту.
Scheduled Include Page – це той же самий компонент Include Page, який, однак, працює тільки у вказаному вами тимчасовому діапазоні. Для нього ви можете вказати дві дати: коли він може почати роботу і коли він повинен припинити роботу. Завдання цього компонента – гарантувати показ даних тільки в потрібний час (наприклад, захиститися від показу застарілих даних).
Scheduled Picture – використовується в тих же ситуаціях, що і Scheduled Include Page. Однак, замість вмісту цілої Web-сторінки у цьому випадку ви настроюєте час показу єдиного зображення (наприклад, в якийсь час кнопка на сторінці є, а в інший час її просто немає).

Banner Ad Manager

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

Багато банерних рулеток, які розміщені на Web-сторінках, міняють зображення на банерах тільки один раз – під час завантаження сторінки. На відміну від них Banner Ad Manager буде міняти зображення постійно, весь час, поки Web-сторінка відкрита в браузері відвідувача Web-сайта. Ще одна відмінність Banner Ad Manager– для нього можна вказати тільки одне гіперпосилання (загальне для всіх зображень, що показуються ). Це гіперпосилання буде активізоване незалежно від того, на яке із зображень, що змінюють одне одного, клацнула миша відвідувача Web-сайта.

Приклад компонента Banner Ad Manager, вміщеного на Web-сторінку, показаний на мал. 1.

Мал. 1. Приклад застосування Banner Ad Manager

Що трапилося з WebBots?
Як ви, напевно, вже зрозуміли, у FrontPage  відсутні будь-які згадки про WebBots, не знайдете ви їх ні в меню, ні в діалогових вікнах. Так як вони активно рекламувалися в попередніх версіях FrontPage, їх зникнення здатне викликати шок.Насправді ж, вони нікуди не зникли. Просто у FrontPage вони стали називатися компонентами FrontPage. Причина – було вирішено, що назва WebBots (його можна приблизно перевести як «основа Web» або «дно Web») дуже звужує значення тих можливостей, які втілені в цих технологіях. Назва «компоненти FrontPage» було визнано більш вдалим.

Однак сліди старої назви досі можна знайти в коді HTML, який генерується FrontPage. На всіх сторінках, створених із застосуванням компонентів FrontPage, властивості цих компонентів записані двічі: один раз як код HTML (для відображення в браузері), а другий раз – як коментарі HTML (це гарантує, що в браузері вони показані не будуть). Коментарі HTML активно використовуються FrontPage для отримання інформації про властивості збережених на сторінках компонентів. Якщо ви подивитеся в режимі HTML на код такої сторінки, ви зможете побачити, що коментарі HTML посилаються на WebBots.

Перед розміщенням цього компонента на сторінці вам потрібно потурбуватися про набір зображень. Найкраще, якщо всі зображення будуть однакового розміру (хоч це і не обов’язково). Якщо використати зображення різного розміру, то може вийти так, що браузер буде по-різному компонувати вміст сторінки. Це навряд чи те, на що ви розраховували.

Після підготовки набору зображень відкрийте ту сторінку, на якій ви хочете його розмістити, у FrontPage. Для цього в меню Insert виберіть Components, а потім – Banner Ad Manager. Відкриється діалогове вікно Banner Ad Manager Properties (мал. 2).

Мал. 2. Діалогове вікно Banner Ad Manager Properties

  • Width і Height – це ширина і висота простору, що відводиться під банер. Якщо зображення виявиться меншим, ніж простір, що відводиться на нього, FrontPage заповнить пусту область нейтральним кольором (сірим). Якщо ж зображення буде більшим, ніж цей простір, FrontPage одріже виступаючі частини.
  • Transition effect – визначає, який відеоефект буде застосований при зміні зображень:
    • None – одне зображення просто буде змінювати інше без будь-яких відеоефектів;
    • Blinds Horizontal – буде створюватися враження, що зображення розміщене на спеціальному рекламному щиті, розділеному на окремі смуги-трикутники, які розташовані по горизонталі. Поворот цих смуг приводить до зміни зображення;
    • Blinds Vertical – те ж саме, тільки смуги розташовані вертикально;
    • Dissolve – старе зображення буде «розчинятися» в новому;
    • Box In – старе зображення буде стискуватися у дрібніші прямокутники в центрі, поки не зникне зовсім;
    • Box Out – все навпаки: нове зображення з’явиться у невеликому прямокутнику в центрі банера, а потім після декількох збільшень заповнить весь банер.
  • Show each picture for (seconds) – протягом якого буде показане одне зображення до заміни його іншим.
  • Link to – гіперпосилання для всіх зображень відразу. Можна просто вписати адресу в цьому полі, а можна вибрати потрібну сторінку за допомогою кнопки Browse.
  • Picture to display – в цьому полі надається список зображень, які будуть змінювати одне одного в браузері. Кнопка Add дозволяє додати ще одне зображення, Remove – видалити непотрібне, Move Up – перемістити в черзі на показ вперед, а Move Down – навпаки, назад.

При вставці Banner Ad Manager в код HTML вставляється посилання на Java-аплет, який називається fprotate.class. У свою чергу, цей аплет викликає інший, який називається fprotatx.class. Для правильної роботи Banner Ad Manager ці файли повинні бути доступні при відкритті Web-сторінки з цим компонентом в браузері. Тому при збереженні Web-сторінки з Banner Ad Manager FrontPage поводиться по-різному в залежності від того, чи належить ця сторінка до FrontPage Web або це повністю самостійна сторінка.

Якщо це окрема Web-сторінка, то обидва файли з розширенням .Class будуть вміщені в той же самий каталог, в якому зберігається сама сторінка. Якщо ж зберігається Web-сторінка з FrontPage Web, то необхідні файли будуть вміщені до складу Web, а при публікації на Web-сервері передані на цей сервер. Пам’ятайте про те, що ці файли необхідні для правильної роботи Banner Ad Manager при роботі із сторінками.

Comment

Компонент Comment призначений для розміщення на Web-сторінці прихованого тексту, який буде видимий тільки у FrontPage (або при перегляді коду HTML). Звичайно, чим більше досвіду у розробника, тим активніше він користується коментарями. Коментарі корисні не тільки в тому випадку, якщо до роботи над Web-сайтом підключився інший фахівець. Насамперед вони допомагають самому розробнику: йому не треба згадувати, чому він вибрав саме це рішення, а не інше і що означає той або інший елемент або частину коду. Однак пам’ятайте, що код цих коментарів так і залишиться на Web-сторінці і буде впливати на час завантаження. Крім того, відвідувач Web-сайта зможе ознайомитися з цими коментарями, переглянувши код HTML в браузері (для цього в Internet Explorer, наприклад, призначена команда View Source).

У списку компонентів (меню Insert > Component) Comment ви не знайдете, однак це справжній компонент FrontPage (це видно з коду HTML). Для того? щоб вставити його, просто виберіть Comment в меню Insert і у вікні, що відкриється, введіть текст коментарю.

Date and Time

Компонент  Date and Time призначений для автоматичної вказівки дати і часу, коли сторінка була змінена в останній раз. Ця мітка встановлюється FrontPage, і вона не залежить від часу зміни, вказаного для файла Web-сторінки у файловій системі. Вставка цього компонента також проводиться не зі списку компонентів, а з меню Insert напряму (пункт Date and Time), При цьому відкриється діалогове вікно для настройки властивостей цього компонента (мал. 3).

Мал. 3. Діалогове вікно Date and Time

Date this page was last edited – буде показана дата останнього збереження Web-сторінки у FrontPage.

Date this page was last automatically updated – буде показана дата або останнього збереження Web-сторінки у FrontPage, або останньої зміни Web-сторінки в автоматичному режимі внаслідок якихось змін у FrontPage Web, в залежності від того, що сталося пізніше.

Date format – дозволяє вибрати формат дати (або взагалі відмовитися від показу дати, якщо ви виберете None)

Time format – вибір формату відображення часу (None – час показаний не буде).

Частіше за все компонент Date and Time використовується для вказівки часу останнього оновлення сторінки і розміщується в її нижній частині.

Hover Button

Тексти, зображення і кнопки з гіперпосиланнями – це дуже поширені елементи Web-дизайну. Однак до деяких гіперпосилань хочеться привернути особливу увагу. Для цієї мети можна використати компонент FrontPage під назвою Hover Button (його назву можна приблизно перевести як «кнопка, над якою щось пропливає»).

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

Для розміщення цього компонента на Web-сторінці в меню Insert виберіть Component, а потім – Hover Button. Буде відкрите діалогове вікно Hover Button (мал. .5)

Мал. 5. Діалогове вікно Hover Button
  • Button text – це текст, який буде вміщений на кнопку.
  • Link to – пов’язана кнопкою з гіперпосиланням. Якщо вам так зручніше, можете вибрати гіперпосилання за допомогою кнопки Browse.
  • Button color – колір, який буде використаний для кнопки в звичайному положенні (коли покажчик миші не знаходиться над нею)
  • Background color – цей колір фону для кнопки буде використовуватися тільки для деяких візуальних ефектів. Прозорий колір вибрати не можна, але можна вибрати колір, що співпадає з фоном Web-сторінки.
  • Effect color – колір, який буде використаний для візуального ефекту при розміщенні над кнопкою покажчика миші.
  • Effect – можна вибрати один з семи можливих візуальних ефектів:
    1. Color fill – колір, вибраний в Button color, буде змінений на Effect color;
    2. Color average – колір кнопки буде мінятися на складовий, створений на основі Background color і Effect color;
    3. Glow – буде імітоване сяйво (кольори Effect color), що виходить з центра кнопки;
    4. Reverse glow – те ж саме, але свічення буде виходити не з центра, а з країв кнопки;
    5. Light glow – по центру кнопки буде використаний той же колір Button color, але з великою кількістю білого (тобто світліший). Effect color при виборі цього ефекту не використовується;
    6. Bevel out – кнопка при розміщенні курсору підіймається вгору і неначе тягнеться до нього;
    7. Bevel in – кнопка при розміщенні над нею курсору «вдавлюється».
  • Width і Height – ширина і висота кнопки в пікселях. Можна настроїти значення і простим перетягуванням країв кнопки.
  • Font – відкриває додаткове діалогове вікно для настройки властивостей шрифту напису на Hover Button.
  • Custom – натиснення на цю кнопку приводить до відкриття ще одного діалогового вікна (мал. 6), в якому ви зможете настроїти додаткові властивості Hover Button.
Мал. 6. Діалогове вікно Custom для настройки додаткових параметрів Hover Button

У розділі Play sound в цьому вікні ви можете вказати звукові файли, які будуть програватися при певних діях відвідувача Web-сайта. В обох випадках краще вибирати файли невеликого розміру.

  • On click – ви можете вказати ім’я звукового файла, який буде програватися при натисненні на кнопку.
  • On hover – файл буде звучати при переміщенні курсору миші над цією кнопкою.

Розділ Custom призначений для розміщення всередині кнопки Hover Button зображення. Якщо ви вкажете як зображення, так і напис (Button text в попередньому діалоговому вікні), текст буде розміщений над зображенням. У ньому ви можете вказати два графічних файли:

  • Button – зображення, яке буде показане в звичайному режимі;
  • On hover – зображення, яке буде показане браузером при розміщенні над кнопкою покажчика миші.

ПОРАДА

Щоб уникнути проблем, пов’язаних з компонуванням, вибирайте графічні зображення одного розміру з кнопкою.

Як і компонент Banner Ad Manager, для правильної роботи Hover Button необхідні два Java-аплета: fphover.class і fphoverx.class. Принципи поведінки з ними розробляються у відповідності з тими ж правилами, що і для Banner Ad Manager.

Include Page

Компонент Include Page призначений для переміщення однієї Web-сторінки всередину іншої. Вставлена сторінка звичайно є невеликим сегментом зі специфічними даними, який розміщується на інших Web-сторінках. У такого рішення є три переваги:

  1. це гарантує, що деякі ділянки будуть виглядати однаково на декількох сторінках (з деякими обмовками);
  2. якщо необхідно буде змінити зміст такого сегмента, достатньо буде зробити це один раз;
  3. на відміну від фреймів сегменти, що вставляються, успадковують оформлення тієї сторінки, на яку вони вміщені.

Головне, на що потрібно звернути увагу, – це те, що вставлені сегменти повністю успадкували все оформлення від сторінки, на яку вони вміщені: фон, колірну схему і все інше. Результат не відрізнимо від простого копіювання і вставки вмісту.

Перед кожним вставленим сегментом і після нього обов’язково ставиться символ кінця абзацу. Це означає, що вставлений сегмент не буде обтікатися текстом. Якщо це створює для вас якісь проблеми, краще збільшити сегмент, що вставляється, включивши в нього додаткові дані. Інша можливість – використати для окремих слів або фраз підстановку з використанням компонента Substitution.

Є ще одна принципова відмінність Include Page від фреймів: при збереженні будь-якої Web-сторінки з використанням цього компонента весь вміст сегмента вміщується всередину коду HTML-сторінки, на якій розміщений компонент. Це дозволяє, по-перше, зекономити час при завантаженні сторінки (на відміну від фреймів з’єднання встановлюється тільки для завантаження однієї Web-сторінки, а не багатьох), по-друге, це дозволяє правильно відображати Web-сторінку з Include Page на Web-серверах без встановлених FrontPage Server Extensions.

Однак, якщо ви змінюєте вміст одночасно вставленого в декілька сторінок сегмента, ви чекаєте, що зміниться вміст кожної з таких сторінок. Це досягається за допомогою механізму індексування Web-сторінок, на яких використовується компонент Include Page. При збереженні Web-сторінки, яка є вбудованим сегментом для інших сторінок, за допомогою цього індексу оновлюються всі сторінки, на яких цей сегмент використовується. Однак подібні індекси можна використовувати тільки у FrontPage Web. Для окремих сторінок, що не входять до складу Web, ніяких індексів (а отже, і автоматичного оновлення) не передбачено. Тому для них компонент Include Page потрібно використовувати дуже обережно. Крім того, якщо ви працюєте з FrontPage Web, використання інших програм (наприклад, Notepad) для редагування Web-сторінок приведе до того, що механізм індексування при збереженні сторінки не спрацює. Тому краще відмовитися від застосування сторонніх програм для редагування сторінок, що входять до складу FrontPage Webs. Якщо ж ви все-таки їх використовуєте, після цього відкрийте Web у FrontPage і виконайте команду Recalculate Hyperlinks з меню Tools.

Marquee

Компонент Marqueeдозволяє створити рядок тексту, який буде пропливати вздовж екрана («рядок, що біжить »). Marquee буде працювати в Internet Explorer, починаючи з версії 3, але в Netscape Navigator (принаймні, включаючи версію 4) цей компонент не підтримується. Замість «рядка», що біжить, в Netscape Navigator буде показаний нерухомий рядок.

Щоб вмістити на сторінку компонент Marquee, виконайте наступні дії:

  1. Відкрийте потрібну сторінку і виділіть той текст, який ви хочете перетворити в той, що біжить (можна просто встановити курсор вставки в потрібне місце).
  2. У меню Insert виберіть Component, а потім – Marquee. Відкриється діалогове вікно Marquee Properties (мал. 10).
МАЛ. 10. Діалогове вікно Marquee Properties
  1. Настройте необхідні вам параметри.

Text – текст, який буде містити рядок, що біжить. У це поле автоматично вміщується весь текст, який був виділений вами перед відкриттям цього діалогового вікна.

У розділі Direction ви можете вибрати напрям руху: справа наліво (Left) або зліва направо (Right).

У розділі Speed ви можете настроїти параметри, пов’язані зі швидкістю руху рядка, що біжить:

  • Delay – затримка перед новою появою рядка, що біжить;
  • Amount – скільки пікселів за одиницю часу буде проходити рухомий текст.

У розділі Behavior ви можете настроїти тип переміщення:

  • Scroll – текст буде з’являтися з-за одного краю вікна і ховатися за іншим.
  • Slide – текст досягає протилежного краю екрана, зупиняється і зникає. Після цього рух починається спочатку.
  • Alternate – текст рухається то направо, то наліво від одного краю екрана до іншого. При цьому напис постійно видно на екрані.
  • Align with Text – визначає розташування рядка, що біжить, відносно оточуючого тексту: Тор – вирівнювання відносно вершини звичайного рядка, Middle – по центру і Bottom – вздовж нижнього кордону.

Size дозволяє настроїти розміри, що займаються рядком, що біжить, (в пікселях або процентах).

  • Width – довжина області, що займається рядком, що біжить. За умовчанням використовується вся ширина контейнера (вікна браузера, елемента таблиці, фрейма і т.д.). Установка прапорця відміняє значення за умовчанням і дозволяє вказати інше значення. Якщо розмістити рядок, що біжить, всередині елемента невидимої таблиці, то можна зробити так, що рядок буде пробігати на екрані від одного елемента зображення до іншого.
  • Height – висота рядка, що біжить. За умовчанням рівна висоті шрифту в рядку.

Розміри можна змінити не тільки в діалоговому вікні Marquee Properties, але і простим перетягуванням кордонів мишею.

Repeat визначає, скільки разів з’явиться рядок, що біжить. Встановлений прапорець Continusly означає, що рядок буде відображатися безперервно.

Background Color дозволяє настроїти колір фону рядка, що біжить. За умовчанням використовується загальний фон для сторінки.

Style відкриває стандартне вікно для застосування форматування CSS.

Крім використання кнопки Style змінити властивості шрифту рядка, що біжить, можна і за допомогою звичайних настройок шрифту в режимі Page View.

Scheduled Include Раge

Якщо є необхідність зробити так, щоб вміст Web-сторінки мінявся за розкладом, у вашому розпорядженні компонент Scheduled Include Page. На мал. 11 показані дві сторінки: верхня призначена для показу в січні, а нижня – у всі інші місяці.

Компонент Scheduled Include Page. дуже схожий на компонент Include Page (в ньому використовуються ті ж механізми), але він дозволяє настроїти і деякі додаткові параметри.

Для того, щоб вмістити компонент Scheduled Include Page. на Web-сторінку, спочатку підготуйте ті сторінки-сегменти, які будуть використовуватися на інших сторінках (оскільки в різний час будуть використовуватися різні сегменти, вони повинні бути підготовані у двох варіантах). Потім вмістіть курсор вставки на Web-сторінку, на якій ви хочете розмістити Scheduled Include Page., і виберіть в меню Insert Component, а потім – Scheduled Include Раge.

МАЛ. 12. Діалогове вікно Scheduled Include Page Properties

У ньому можна настроїти наступні параметри:

  • Page to include – вказуються сторінки, які ви хочете включити як сегменти на іншу сторінку. У полі During the scheduled time вводиться ім’я і адреса тієї Web-сторінки, яка буде відображатися у вибраний вами період, а в полі Before and after the scheduled time (optional) – те, що буде показано у весь інший час. Якщо ви залишите це поле пустим, після закінчення вказаного вами періоду перша вставлена сторінка просто зникне зі всіх сторінок, на яких вона розміщена.
  • Starting – вказується дата і час початку показу сегмента, вказаного в полі During the scheduled time.
  • Ending – закінчення цього періоду.

На жаль, у компонента Scheduled Include Page (як і у Scheduled Picture) є дуже істотний недолік: заплановані зміни повністю автоматично, без вашого втручання, не відбуваються. Це відноситься навіть до Web-серверу, на якому встановлені FrontPage Server Extensions. Щоб сторінка в потрібний момент була змінена, вносьте кожний день будь-які зміни у FrontPage Web (наприклад, міняйте значення будь-якою змінною, що настроюється ). Інша можливість – за допомогою програми fpsrvadm.exe організуйте автоматичний щоденний перерахунок гіперпосилань у вашому Web. Детальніше про цю програму розказано в розділі 17.

Scheduled Picture

Цей компонент є практично повною копією Scheduled Include Page. Єдина відмінність – за допомогою нього можна організувати показ за розкладом не вбудованої Web-сторінки (як в Scheduled Include Page), а зображення. Процедури для розміщення цього елемента на Web-сторінці і параметри, що настроюються, майже повністю співпадають з описаними вище для Scheduled Include Page.








Популярні глави цього підручника:



Всі глави цього підручника:

Вивчаємо FrontPage