Материал: Використання складних елементів при оформленні Web

Для розміщення на домашній сторінці посилань на всі сторінки Web-узла| можна використовувати компонент Зміст (Table| of| Contents|), що створює ієрархічний зміст вузла з посиланнями. У програмі FrontPage| для розміщення на Web-страницах| компонентів використовується діалогове вікно Вставка компоненту веб-вузла (Insert| Web| Component|) (мал. 21.1) із списком компонентів. Щоб відкрити це вікно, виконаєте одну з наступних дій:

• У меню Вставка (Insert|) виберіть команду Веб-сервер-компонент (Web| Component|)

• Натисніть кнопку Веб-сервер-компонент (Web| Component|) на стандартній панелі інструментів

Мал. 21.1. Діалогове вікно Вставка компоненту веб-вузла

За допомогою компоненту підстановка (Substitution|) на сторінках Web-узла| розміщують інформацію, зміна якої автоматично приведе до модифікації даних на всіх Web-страницах| вузла.

Розглянемо такий приклад. На сторінках Web-узла| ви розмістили адресу підприємства, контактні телефони, прізвища розробників і так далі Як бути, якщо змінився один з цих параметрів (наприклад, номер телефону)?

Якщо при розміщенні цієї інформації не використовувалися підстановлювальні компоненти, вам необхідно перевірити всі сторінки, де цей номер телефону може знаходитися, і ввести необхідні зміни. Це легко зробити, якщо сторінок небагато, і ви пам'ятаєте, на якій з них розташований параметр, що змінився. А що робити, якщо Web-узел| містить величезна кількість сторінок? Вірогідність того, що ви не скрізь введете потрібні зміни, велика. При використанні на Web-страницах| підстановлювальних компонентів ви позбавляєте себе від проблем, пов'язаних як з їх розміщенням, так і із зміною значень, заданих за допомогою змінних. Для розміщення на Web-странице| підстановлювального компоненту виконаєте наступні дії:

1. Відкрийте редаговану Web-страницу|. 2. Встановите курсор в місце передбачуваного розміщення компоненту Підстановка. 3. У меню Вставка (Insert|) виберіть команду Веб-сервер-компонент (Web| Component|). Відкривається діалогове вікно Вставка компоненту веб-вузла (Insert| Web| Component|) (див. мал. 21.1). 4. Із списку Тип компоненту (Component| type|) виберіть значення Включений вміст (Included| Content|), при цьому в правій області вікна з'являється списокВыберите| тип вмісту (Choose| а type| of| content|). 5. Виберіть з цього списку значення Підстановка (Substitution|) і натисніть кнопкуГотово| (Finish|). На екрані відкривається діалогове вікно Властивості підстановки(Substitution| Properties|). 6. Натисніть кнопку розкриття списку Замінити на (Substitude| with|) і виберіть значення змінної, що визначає розміщуваний параметр (мал. 21.2). 7. Натисніть кнопку ОК. На Web-странице| з'являється значення, що задається даною змінною.

Мал. 21.2. Діалогове вікно Властивості підстановки

За умовчанням в списку Замінити на розташовані змінні, называемыепеременными| конфігурації (табл. 21.1).

Таблиця 21.1. Змінні конфігурації, що формуються програмою FrontPage|

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

Мал. 21.3. Вкладка Зведення діалогового вікна властивостей сторінки

При створенні Web-узла| за допомогою майстра список змінних конфігурації формується на основі відповідей на питання, що задаються майстром. Їх значення можна подивитися і відредагувати на вкладці Параметри (Parameters|) діалогового окнаНастройка| веб-вузла (Web| Settings|) (мал. 21.4). Для його відкриття в меню Сервіс(Tools|) виберіть команду Настройка веб-вузла (Web| Settings|). При розробці Web-узла| без використання майстра список змінних конфігурації ви повинні сформувати самостійно.

Для додавання в список змінних, які потім можуть використовуватися як підстановлювальні компоненти, призначена кнопка Додати (Add|). При її натисненні відкривається діалогове вікно Додати ім'я і значення (Add| Name| and| Value|) (мал. 21.5), що містить два поля. Поле Ім'я (Name|) використовується для введення найменування змінної, а поле Значення (Value|) — її значення. Завершивши введення даних в діалоговому вікні, натисніть кнопку ОК для його закриття. Введена змінна і її значення з'являться в списку діалогового вікна Настройка веб-вузла. 

Мал. 21.4. Діалогове вікно Настройка веб-вузла

Мал. 21.5. Діалогове вікно Додати ім'я і значення

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

1. У меню Сервіс (Tools|) виберіть команду Настройка веб-вузла (Web| Settings|). 2. У діалоговому вікні , що відкрилося, Настройка веб-вузла перейдіть на вкладкуПараметры| (Parameters|). 3. У списку змінних конфігурації виберіть змінну, задаючу номер телефону підприємства, що змінився. 4. Натисніть кнопку Змінити (Modify|). 5. У полі Значення (Value|) діалогового вікна , що відкрилося, Зміну імені і значення (Modify| Name| and| Value|) введіть нове значення телефону підприємства. 6. Натисніть кнопку ОК. 7. Закрийте діалогове вікно Настройка веб-вузла.

Програма FrontPage| відновить номер телефону на всіх сторінках Web-узла|.

Лічильник відвідин

Компонент Лічильник відвідин (Hit| counter|; призначений для підрахунку кількості клієнтів, що відвідали Web-страницу|, на якій він розташований. Як правило, лічильник відвідин розмішають в нижній частині домашньої сторінки, оскільки саме з неї починається подорож по Web-узлу|, і ця сторінка є найбільш відвідуваною.

Зауваження

Не можна повністю довіряти даним, що збираються за допомогою компоненту Лічильник відвідин. Він підраховує всі відвідини Web-страницы|, включаючи і повторні завантаження сторінки одним і тим же користувачем.

Для розміщення на Web-странице| лічильника відвідин виконаєте наступні дії:

1. Відкрийте Web-страницу|, на якій хочете розмістити даний компонент. 2. Встановите курсор в місце передбачуваного розміщення об'єкту Лічильник відвідин. 3. У меню Вставка (Insert|) виберіть команду Веб-сервер-компонент (Web| Component|). Відкривається діалогове вікно Вставка компоненту веб-вузла (Insert| Web| Component|) (див. мал. 21.1). 4. Із списку Тип компоненту (Component| type|) виберіть значення Лічильник відвідин, при цьому в правій області вікна з'являється список Виберіть стиль лічильника (Choose| а counter| style|) (мал. 21.6).

Мал. 21.6. Вибір компоненту Лічильник відвідин

5. Виберіть з цього списку стиль оформлення лічильника відвідин і натисніть кнопкуГотово| (Finish|). На екрані відкривається діалогове вікно Властивості лічильників відвідин (Hit| Counter| Properties|) (мал. 21.7).

Мал. 21.7. Діалогове вікно Властивості лічильників відвідин

6. Використовуючи опції області Стиль лічильника (Counter| Style|), можна змінити стиль оформлення лічильника, встановлений у вікні Вставка компоненту веб-вузла (Insert| Web| Component|). Вибрана опція Інший малюнок (Custom| Picture|) дозволяє використовувати стиль, розроблений користувачем. 7. Встановите прапорець Скинути лічильник (Reset| counter| to|), якщо хочете задати інший відлік числа відвідувачів. Потім в поле, розташоване праворуч від прапорця, введіть значення, з якого необхідно почати відлік. 8. Для зміни розрядності лічильника, заданою за умовчанням програмою FrontPage|, встановите прапорець Число розрядів (Fixed| number| of| digits|) і введіть в розташоване справа поле необхідне значення. 9. Натисніть кнопку ОК для закриття діалогового вікна Властивості лічильників відвідин.

Розміщення лічильника відвідин завершене. У режимі редагування на сторінці ви бачите тільки назву компоненту, поміщену в квадратні дужки, наступного вигляду:

[Лічильник відвідин]

Сторінка, що включається

Программаfrontpage дозволяє включати вміст Web-страницы| в інші сторінки поточного Web-узла|, використовуючи для цього компонент сторінка (Include| Page|). Даний компонент зручно використовувати в тому випадку, якщо одна і та ж періодично оновлювана інформація повинна відображатися на всіх або деяких сторінках Web-узла|. Наприклад, ви можете створити сторінку, на яку будете перешкодити найсвіжішу інформацію Web-узла|. Щоб користувач, що відкрив Web-узел| у пошуках новин, не витрачав багато часу на отримання потрібної інформації, ви можете включити цю сторінку в основні відвідувані сторінки вузла. Для оновлення інформації на всіх сторінках, що містять даний компонент, вам досить внести зміни на початковій сторінці і зберегти їх. В результаті введені зміни будуть відображені у всіх місцях включення цієї сторінки.

Для використання в Web-узле| сторінки, що включається, виконаєте наступні дії:

1. Відкрийте Web-узел|. 2. Додайте в нього нову сторінку. 3. Розмістите в ній інформацію, яку хочете використовувати на інших сторінках Web-узла|. 4. Збережете сторінку, натиснувши кнопку Зберегти (Save|) на стандартній панелі інструментів. У діалоговому вікні , що відкрилося, Зберегти як (Save| As|) введіть ім'я, наприклад, Incl_page|. 5. Відкрийте в режимі редагування Web-страницу|, в яку хочете включитьКомпонент| Сторінка (Include| Page|). 6. Встановите курсор в місце передбачуваного розміщення інформації. 7. У меню Вставка (Insert|) виберіть команду Веб-сервер-компонент (Web| Component|). Відкривається діалогове вікно Вставка компоненту веб-вузла (Insert| Web| Component|). 8. Із списку Тип компоненту (Component| type|) виберіть значення Включений вміст (Included| Content|), при цьому в правій області вікна з'являється списокВыберите| тип вмісту (Choose| а type| of| content|). 9.. Виберіть з цього списку значення Сторінка (Page|) і натисніть кнопку Готово(Finish|). На екрані відкривається діалогове вікно Властивості включеної сторінки(Include| Page| Properties|). 10. У полі Сторінка для включення (Page| to| include|) введіть URL| адреса сторінки, що включається (мал. 21.8). Для цього можете скористатися діалоговим вікном Поточний веб-вузол (Current| Web|), що відкривається при натисненні кнопки Огляд (Browse|), і вибрати необхідну сторінку із списку сторінок поточного Web-узла|.  11. Натисніть кнопку ОК для закриття діалогового вікна Властивості включеної сторінки. Інформація, розміщена на сторінці Incl_page|.htm, відобразиться в місці розміщення компоненту сторінка (include| Page|).

Мал. 21.8. Діалогове вікно Властивості включеної сторінки дозволяє вказати сторінку, що включається

  Рада

Для оновлення інформації в місцях, що містять сторінку, що включається, відкрийте сторінку lncl_page|.htm, введіть нову інформацію і збережіть зміни.

Сторінка, що включається за розкладом

Компонент Сторінка з розкладом (Scheduled| Include| Page|) назвою нагадує розглянутий нами раніше компонент сторінка (include| Page|). Відмінність між двома цими компонентами полягає в тому, що сторінка з розкладом включається в іншу сторінку в указаний час і в певний час виключається з неї.

Розглянемо такий приклад. Магазин проводить сезонний розпродаж товару і протягом цього часу на сторінках свого Web-узла| хоче відображати інформацію про встановлені знижки на товар. Після закінчення розпродажу це повідомлення повинне замінитися новою інформацією.

Для використання сторінки, що включається за розкладом, виконаєте наступні дії:

1. Відкрийте Web-узел|. 2. Додайте в нього дві нові сторінки. 3. На одній сторінці розмістите інформацію про знижки, які діятимуть під час розпродажу товару. Цю інформацію необхідно буде відображати в Web-узле| протягом часу, заданого за допомогою розкладу. 4. На другу сторінку помістите інформацію, яка відображатиметься в Web-узле| поза дією розкладу. 5. Відкрийте в режимі редагування Web-страницу|, в яку хочете включитькомпонент| Сторінка з розкладом.  6. Встановите курсор в місце передбачуваного розміщення інформації. 7. У меню Вставка (Insert|) виберіть команду Веб-сервер-компонент (Web| Component|). Відкривається діалогове вікно Вставка компоненту веб-вузла (Insert| Web| Component|). 8. Із списку Тваней компоненту (Component| type|) цього вікна виберіть значениеВключенное| вміст (Included| Content|), а з правого списку — Сторінка з розкладом (Page| Based| On| Schedule|), після чого натисніть кнопку Готово. На екрані відкривається диатоговое| вікно Властивості включеної сторінки з розкладом(Scheduled| Include| Page| Properties|) (мал. 21.9).

Мал. 21.9. Діалогове вікно Властивості включеної сторінки з розкладом

9. У полі протягом часу за розкладом (During| the| scheduled| time|) введіть URL| адреса сторінки, що містить інформацію про знижки. Для цього можете скористатися діалоговим вікном Поточний веб-вузол (Current| Web|), що відкривається при натисненні кнопки Огляд (Browse|), і вибрати необхідну сторінку. 10. У полі до і після часу за розкладом (Before| and| after| the| scheduled| time|) введіть URL| адреса сторінки, інформація з якої відображатиметься на сторінці поза часом, заданим розкладом. Для введення адреси можете також скористатися діалоговим вікном Поточний веб-вузол, що відкривається при натисненні кнопки Огляд. 11. За умовчанням в полях області Початок (Starting|) задані поточна дата і час, а в області Закінчення (Ending|) — дата і час, великі поточною на місяць. Скоректуйте інформацію в цих полях, вказавши часовий період дії розкладу. 12. Натисніть кнопку ОК для закриття діалогового вікна Властивості включеної сторінки з розкладом.

Зображення, що включається за розкладом

У програмі FrontPage| існує компонент р-лсунок| з розкладом (Scheduled| Picture|), який аналогічний компоненту Сторінка з розкладом (Scheduled| include| Page|). Відмінність між цими компонентами полягає в тому, що в певний час в іншу сторінку включається і в заданий розробником час виключається з неї не сторінка, а графічне зображення. Наприклад, даний компонент зручно використовувати для реклами нового товару, що поступив в магазин. Після закінчення певного часу на Web-странице| реклама одного товар замінюється рекламою іншого товару.

Для використання графічного зображення, що включається за розкладом, виконаєте наступні дії:

1. Відкрийте Web-узел|. 2. Додайте в теку images| два графічні зображення. Одне з них відображатиметься на Web-странице| протягом часу, заданого за допомогою розкладу, а друге — поза дією розкладу. 3. Відкрийте в режимі редагування Web-страницу|, в яку хочете включити компонент Малюнок з розкладом. 4. Встановите курсор в місце передбачуваного розміщення графічного зображення. 5. У меню Вставка (Insert|) виберіть команду Веб-сервер-компонент (Web| Component|). Відкривається діалогове вікно Вставка компоненту веб-вузла (Insert| Web| Component|). 6. Із списку Тип компоненту (Component| type|) цього вікна виберіть значениеВключенное| вміст (Included| Content|), а з правого списку — Малюнок з розкладом (Picture| Based| On| Schedule|), після чого натисніть кнопку Готово. На екрані відкривається діалогове вікно Властивості малюнка з розкладом (Scheduled| Picture| Properties|) (мал. 21.10). 7. Натисніть кнопку Огляд (Browse|), розташовану поряд з полем протягом часу за розкладом (During| the| scheduled| time|), і в діалоговому вікні , що відкрилося, Малюнок(Picture|) з теки images| поточного Web-узла| виберіть графічне зображення, яке відображатиметься на сторінці в інтервалі часі, заданому розкладом. Натисніть кнопку ОК для закриття діалогового вікна Малюнок. 8. Щоб вказати графічне зображення, яке відображатиметься на Web-странице| в решту часу, натисніть кнопку Огляд, розташовану поряд з полем до і після часу за розкладом (Before| and| after| the| scheduled| time|). Виберіть в діалоговому вікні , що відкрилося, Малюнок необхідне зображення.