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

Оголошення на сторінці

Оголошенням на сторінці називається спеціальним чином оформлений заголовок сторінки. Цей елемент сторінки також називають банером. За умовчанням при створенні банера передбачається, що як заголовок використовуватиметься ім'я сторінки, розташоване на прямокутнику в структурній схемі Web-узла|.

Ознайомимося з банером на простому прикладі, для створення якого виконаєте наступні дії:

1. Створіть новий односторінковий тестовий Web-узел|. Для цього на панелі Створення сторінки або веб-вузла (New| Page| or| Web|) виберіть команду Шаблони веб-вузлів(Web| Site| Templates|), а потім в діалоговому вікні , що відкрилося, Шаблони веб-узловдважды| клацніть мишею на значку Односторінковий веб-вузол (One| Page| Web|). 2. Для переходу в режим проглядання структури нового вузла натисніть кнопку Переходи(Navigation|) на панелі режимів Уявлення (Views|). 3. В центрі структурної схеми розташований прямокутник, що умовно позначає домашню сторінку нашого односторінкового Web-узла|. Встановите на нього курсор, клацніть на нім правою кнопкою миші і виберіть в контекстному меню командуПереименовать| (Rename|). 4. Введіть нову назву сторінки (наприклад, Заголовок сторінки), і натисніть клавішу <Enter|> (мал. 20.16). 5. Перейдіть в режим редагування сторінки. Для цього двічі клацніть на найменуванні сторінки в області Список тек (Folder| List|) або на прямокутнику, що позначає сторінку.

Мал. 20.16. Зміна назви сторінки в режимі Переходи

6. Щоб розмістити банер на сторінці, виберіть в меню Вставка (Insert|) командуОбъявление| на сторінці (Page| Banner|). Відкривається діалогове вікно Властивості оголошення на сторінці (Page| Banner| Properties|) (мал. 20.17), в полі Текст оголошення (Page| banner|) якого вже міститься текст Заголовок сторінки, введений нами в режимі Переходи (Navigation|).

Мал. 20.17. Діалогове вікно Властивості оголошення на сторінці

7. Введіть в це поле іншу назву заголовка (наприклад, Новий заголовок сторінки), і натисніть кнопку ОК. 8. Перейдіть в режим Переходи і переконайтеся, що нове, введене в діалоговому окнеСвойства| оголошення на сторінці значення заголовка відображається в центрі прямокутника, що позначає цю сторінку.

Зауваження

Введена нами назва заголовка достатня довге, щоб поміститися повністю в прямокутнику. Встановите на нього курсор. Повне ім'я сторінки буде показано у вигляді спливаючої підказки під курсором.

Якщо пізніше ви захочете змінити текст банера:

1. Відкрийте діалогове вікно Властивості оголошення на сторінці, використовуване також при створенні банера. Для цього встановите курсор на банер і виконаєте одну з наступних дій:

• Двічі клацніть мишею

• Клацніть правою кнопкою миші і виберіть в контекстному меню команду Властивості оголошення на сторінці

• Натисніть комбінацію клавіш <Alt>+<Enter|>

2. Введіть в поле Текст оголошення (Page| banner|) новий заголовок і натисніть кнопку ОК. Якщо ви тепер перейдете в режим переходів, то побачите, що змінилося найменування сторінки. Застосовуючи теми для оформлення Web-страницы|, можна зробити вашу сторінку привабливішою, розмістивши в банерах графічні зображення. На мал. 20.18 представлена наша тестова сторінка, оформлена з I застосуванням однієї з тем, пропонованих програмою FrontPage|.

Мал. 20.18. Використання теми в оформленні банера

Диспетчер оголошень

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

Розмістимо на наший тестовій Web-странице| декілька слайдів, які при прогляданні сторінки в оглядачі змінюватимуть один одного.

1. Підготуйте зображення, які хочете використовувати як слайдів, і розмістите їх в теці images| Web-узла|. 2. Відкрийте в режимі редагування Web-страницу|, на якій хочете розмістити рекламні оголошення, що чергуються. 3. Встановите курсор в місце їх передбачуваного розміщення. 4. У меню Вставка (Insert|) виберіть команду Веб-сервер-компонент (Web| Component|). Відкривається діалогове вікно Вставка компоненту веб-вузла (Insert| Web| Component|) (див. мал. 20.1). 5. Із списку компонентів виберіть значення Динамічні ефекти (Dynamic| Effect|). При цьому в правому списку вікна відображаються динамічні об'єкти програми FrontPage|.  6. Виберіть з цього списку значення Диспетчер оголошень (Banner| Ad| Manager|) і натисніть кнопку Готово (Finish|). Відкриється діалогове вікно Властивості диспетчера оголошень (Banner| Ad| Manager| Properties|) (мал. 20.19), що дозволяє визначити параметри рекламних оголошень, що розміщуються на Web-странице|.

Мал. 20.19. Діалогове вікно Властивості диспетчера оголошень

7. У полях Ширина (Width|) і Висота (Height|) задайте розміри слайдів (у пікселах). Якщо слайди мають різні розміри, встановите розмір найбільшого з них. В цьому випадку слайди меншого розміру розміщуватимуться в центрі виділеної для них області на нейтральному фоні. 8. Використовуючи список , що розкривається, Ефект (Transition| effect|), задайте, яким чином один слайд змінюватиме інший. Список містить наступні значення:

• None| — слайди виводяться без застосування ефектів переходу

• Жалюзі вертикальні (Blinds| Vertical|) — слайди виводяться через вертикальні жалюзі

• Жалюзі горизонтальні (Blinds| Horizontal|) — слайди виводяться через горизонтальні жалюзі

• Розчинення (Dissolve|) — поточний слайд розчиняється, замінюючись наступним слайдом, що виявляється

• Прямокутник всередину (Box| In|) — поточний слайд зменшується в розмірах, замінюючись наступним слайдом

• Прямокутник назовні (Box| Out|) — новий слайд збільшується в розмірі, замінюючи поточний

Виберіть будь-який з вподобаних ефектів. Розділ 20. Використання складних елементів приоформлении|

9. У полі Показувати кожен малюнок (Show| each| picture| for|) введіть час демонстрації слайду в секундах або залиште значення, встановлене за умовчанням програмою FrontPage|. 10. Використовуючи кнопку Огляд (Browse|) і що відкривається при натисненні на неї діалогове вікно Виберіть гіперпосилання оголошення (Select| Banner| Ad| Hyperlink|), ви можете ввести інформацію в поле Посилання на (Link| to|), пов'язавши тим самим слайд з гіперпосиланням. Цю можливість зручно використовувати для відкриття сторінок реклами при клацанні. 11. Область Показувати малюнки (Pictures| to| display|) служить для формування списку зображень, що розміщуються в рекламному банері, в порядку їх показу. Для формування списку зображень призначені кнопки, розташовані справа:

• Додати (Add|) — відкриває діалогове вікно Додавання малюнка для оголошення (Add| Picture| for| Banner| Ad|), використовуючи яке можна додати в список зображення з тек поточного Web-узла|, з диска, з Інтернету

• Видалити (Remove|) — видаляє із списку виділений файл зображення

• Вгору (Move| Up|) — переміщає виділений файл зображення на одну позицію списку вгору

• Вниз (Move| Down|) — переміщає виділений файл зображення на одну позицію списку вниз

Використовуючи кнопку Додати (Add|) і що відкривається при її натисненні діалогове окноДобавление| малюнка для оголошення, сформуйте список зображень банера. За допомогою кнопок Вгору (Move| Up|) і Вниз (Move| Down|) задайте порядок показу слайдів.

12. Завершивши введення всіх параметрів, натисніть кнопку ОК для закриття діалогового окнаСвойства| диспетчера оголошень.

Зауваження

Якщо ви вирішите змінити які-небудь з параметрів, клацніть на слайді правою кнопкою миші і виберіть в контекстному меню, що з'явилося, команду Властивості диспетчера оголошень (Banner| Ad| Manager| Properties|) (мал. 20.20) або натисніть комбінацію клавіш <Alt>+<Enter|>.

Завантажите сторінку в оглядач, вибравши в меню Файл (File|) команду Перегляд в оглядачі (Preview| in| Browser|), і подивитеся, як виглядає ваше рекламне оголошення. Одне зображення змінює інше. Після того, як список пройдений до кінця, починається показ першого слайду. І так до тих пір, поки ви не перейдете на іншу сторінку. 

Мал. 20.20. Розміщене на Web-странице| рекламне оголошення з контекстним мін

Використання фреймів при створенні Web-страниц|

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

Зауваження

Іноді фрейми називають рамками. Ми дотримуватимемося поширенішого серед користувачів, а відповідно, і звичнішого терміну фрейми.

Розглянемо такий приклад використання фреймів. Ви створюєте фрейм, що містить дві області. У лівій області розміщуєте зміст з посиланнями на сторінки вашого Web-узла|. У правій області відображаєте вибрану по посиланню Web-страницу|.

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

Фрейм має очевидні переваги. Проте, якщо в нього входить велика кількість сторінок, завантаження фрейма відбуватиметься поволі, оскільки для завантаження кожній із сторінок, складових його, потрібне окреме звернення до сервера. Тому при створенні фреймів слід проявляти відчуття міри і обмежуватися невеликою кількістю сторінок. Інформація про сторінки, що входять до складу фрейма, зберігається на окремій сторінці, званою фреймсетом|. Тому, якщо ви створюєте двохсторінковий фрейм, то при підрахунку звернень до сервера необхідно враховувати і фреймсет|.

Шаблони фреймів

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

1. У меню Файл (File|) виберіть команду Створити (New|), а потім в тому, що з'явився підміню — опцію Сторінка або веб-вузол (Page| or| Web|). 2. На панелі , що з'явилася, Створення веб-сторінки або вузла (New| Page| or| Web|) виберіть команду Шаблони сторінок (Page| Templates|). 3. У діалоговому вікні , що відкрилося, Шаблони сторінок (мал. 20.21) перейдіть на вкладку Сторінка рамок (Frames| Pages|).

Мал. 20.21. Діалогове вікно Шаблони сторінок, що містить шаблони фреймів

4. У вікні вкладки знаходяться 10 значків шаблонів. Призначення шаблонів фреймів описане в табл. 20.4.

Таблиця 20.4. Шаблони фреймів

Створення фрейма

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

Процес створення Web-узла| складатиметься з наступних етапів:

1. Створення порожнього Web-узла|. 2. Створення трьох сторінок (по числу областей фрейма), що відображаються за умовчанням у фреймі при його завантаженні. 3. Створення сторінок, які розміщуватимуться в основній області фрейма при виборі значень списку, розміщеного в області змісту. Їх кількість визначається змістом. 4. Розміщення в Web-узле| фрейма.

Мал. 20.23. Фрейм в режимі перегляду

5. Пов'язання областей фрейма із завантажуваними в них за умовчанням сторінками. 6. Скріплення елементів списку, розміщених в змісті, із сторінками, що завантажуються для перегляду в основну область фрейма.

Ми розглянули основні етапи роботи, яку нам належить виконати. Приступимо до створення Web-узла|:

1. Створіть порожній Web-узел|. Для цього на панелі Створення веб-сторінки або вузла(New| Page| or| Web|) виберіть команду Шаблони веб-вузлів (Web| Sites| Templates|). 2. У полі Вкажіть розташування нового веб-вузла (Specify| the| location| of| the| new| web|) діалогового вікна , що відкрилося, Шаблони веб-вузлів (Web| Sites| Templates|) введіть найменування і розташування створюваного вузла, а потім двічі клацніть мишею на шаблоні Порожній веб-вузол (Empty| Web|). Відкриється порожній Web-узел|. 3. Для створення сторінки, що розміщується в заголовку фрейма, додайте в Web-узел| нову сторінку шаблону Звичайна сторінка (Normal| Page|). 4. У режимі редагування введіть у верхньому рядку сторінки заголовок Книжковий мир. Розташуєте його в центрі рядка. Для цього встановіть курсор в заголовок і натисніть кнопку По центру (Center|) на панелі форматування.  5. Для збереження сторінки натисніть кнопку Зберегти (Save|) на стандартній панелі інструментів. У діалоговому вікні , що відкрилося, Зберегти як (Save| As|) задайте найменування файлу і натисніть кнопку Зберегти.

Зауваження

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

6. Додайте в Web-узел| нову сторінку і розмістіть на ній текст змісту. Оформите його у вигляді списку і збережете на диску у файлі content_f|.htm. 7. На третю нову сторінку помістите текст, який за умовчанням завантажуватиметься в основну область фрейма, і збережете її у файлі main_f|.htm. 8. На цьому формування сторінок, що відображаються у фреймі при його завантаженні, завершене. Тепер необхідно підготувати сторінки, які з'являтимуться в правій області фрейма при виборі пунктів змісту. Створіть необхідні сторінки. Їх число повинне бути рівне кількості пунктів в області змісту. Першим рядком нашого змісту є Готуються до друку. Web-страница|, що з'являється при виборі цього пункту, повинна містити книги, які готуються до друку і найближчим часом повинні з'явитися на книжковому ринку. Підготуємо цю сторінку і збережемо її у файлі new_books|.htm. 9. Створіть і збережіть решту Web-страницы|, необхідних для проглядання інформації, представленої в змісті. 10. Всі сторінки підготовлені. Тепер їх необхідно розмістити у фреймі. Додамо в Web-узел| новий фрейм. Для цього на панелі Створення веб-сторінки або вузла (New| Page| or| Web|) виберіть команду Шаблони сторінок (Page| Templates|). 11. У діалоговому вікні , що відкрилося, Шаблони сторінок перейдіть на вкладкуСтраницы| рамок (Frames| Pages|) (див. мал. 20.21) і двічі клацніть на значку шаблонаОбъявление| і зміст (Banner| and| Contents|). Фрейм, створений з використанням цього шаблону, містить область заголовка, зміст і область відображення основної інформації (мал. 20.24). 12. Для вказівки сторінки, яка повинна розмішатися у верхній області фрейма при його завантаженні, натисніть кнопку Задати початкову сторінку (Set| Initial| Page|), розташовану в цій області. 13. У полі Адреса (Address|) діалогового вікна , що відкрилося, Додавання гіперпосилання(Insert| Hyperlink|) (мал. 20.25) вкажіть назва сторінки, що містить заголовок, клацнувши на файлі banner_f|.htm. Потім натисніть кнопку ОК для закриття вікна. Вказана нами в гіперпосиланні сторінка розмістилася у верхній області фрейма.