Оформлення Web-вузла

Об'єднання групи Web-сторінок у єдину структуру вузла дозволяє програмі FrontPage не тільки відслідковувати схему побудови посилань між сторінками, але і забезпечувати однотипне оформлення всіх сторінок вузла.

4.2.1. Вибір оформлення

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

1. Оберіть команду Format > Theme (Формат> Тема). Відкриється вікно діалогу, показане на рис. 4.18. У ньому ви побачите обрану схему, за допомогою якої оформлена сторінка, представлена раніше на рис. 4.17.

Рис. 4.18. Вибір стандартної схеми

2.У списку схем підшукайте те розфарбування, що найбільш підходить для вашого вузла, наприклад оберіть варіант Industrial (Индустриальный).

У лівій нижній частині вікна діалогу є чотири прапорці, установка яких дозволяє виконувати такі дії:

· Vivid Color (Яркие цвета) – розфарбовує обрану схему більш яскравими кольорами;

· Active Graphics (Сложная графика) – ускладнює малюнок посилань, кнопок і маркерів, додаючи тіні й дрібні деталі;

· Background Picture (Фоновый рисунок) – розміщає на задньому плані сторінки фоновий малюнок;

· Apply Using CSS (С использованием таблиц CSS) – призначає нове оформлення за допомогою каскадних таблиць стилів, що додаються до HTML-коду. Каскадні таблиці зі стилями можна підключати до будь-якого HTML-файлу, формуючи на основі цих стилів оформлення елементів сторінки. При такому підході для зміни вигляду цілого Web-вузла досить лише модифікувати таблиці стилів, що, як правило, зберігаються в окремих файлах. Це допомагає адміністраторам великих вузлів зберігати однаковість усіх документів, розміщених на Web-сервері.

3. Установіть прапорці Active Graphics (Сложная графика) і Apply Using CSS (С использованием таблиц CSS).

Якщо вас не влаштовують стандартні схеми, модифікуйте параметри однієї з них.

4. Клацніть на кнопці Modify (Изменить). У вікні з'являться додаткові кнопки, що дають доступ до таких інструментів:

· Кнопка Colors (Цвета) відкриває вікно діалогу з трьома вкладками.

o Color Schemes (Цветовая схема) – дозволяє обрати одне зі стандартних забарвлень, доступних для даного варіанта оформлення сторінок.

o Color Wheel (Цветовой круг) дає можливість задати колірний тон й установити яскравість розфарбування за допомогою движка Brightness (Яркость).

o Custom (Заказной) має два списки, що розкриваються.

У першому інструменті можна обрати будь-який стандартний елемент сторінки, а потім призначити йому довільний колір.

· Щиглик на кнопці Graphics (Графика) відкриває вікно, показане на рис. 4.19. У списку Item (Элемент), що розкрився, оберіть кожний зі стандартних елементів Web-сторінки. За допомогою кнопок Browse (Обзор) вкладки Picture (Рисунок) призначте як його оформлення будь-який графічний файл, а на вкладці Font (Шрифт) підберіть тексту цього елемента відповідне накреслення. Повторюючи ці операції, налаштуйте всі елементи сторінки.

· Кнопка Text (Текст) дозволяє настроїти накреслення шрифту звичайного тексту Web-сторінки і шести заголовних стилів. Обирайте у списку Item (Элемент) стиль, який потрібно змінити, а потім за допомогою списку Font (Шрифт) призначайте йому потрібний шрифт.

5. Закінчивши модифікацію схеми і повернувши у вікно діалогу Themes (Схемы), клацніть на кнопці Save As (Сохранить как).

6. Введіть у вікні, що відкрилося, назву Схема користувача і клацніть на кнопці ОК, щоб зберегти нову схему в бібліотеці.

Рис. 4.19. Зміна схеми

7. Щоб привласнити обрану схему всім сторінкам вузла, оберіть положення перемикача All Pages (Все страницы).

8. Клацніть на кнопці ОК.

Після додавання в бібліотеку нова схема стає доступною для всіх Web-вузлів, створених у FrontPage. Застосовуючи такі схеми, ви легко зможете задати однакове оформлення кільком тематично зв'язаним вузлам.

4.1.2. Загальні поля елементів

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

1. Клацніть на значку Navigation (Навигация) панелі режимів.

2. Двічі клацніть на сторінці Товари, щоб відкрити її в режимі перегляду Page (Страница). Загальні поля сторінки відокремлюються від основного змісту пунктирними лініями (рис. 4.20).

Рис. 4.20. Загальні поля

2. Оберіть команду Format > Shared Borders (Формат > Общие Границы). Відкриється вікно діалогу, показане на рис. 4.21.

Рис.4.21. Настроювання загальних полів

У ньому є чотири прапорці, що ініціюють розміщення загального поля з кожної з чотирьох сторін сторінки:

· Top (Сверху) – верхнє поле, у якому звичайно розміщається баннер (барвистий заголовок, іноді з набором гіперпосилань);

· Left (Слева) – поле уздовж лівого краю сторінки з кнопками посилань на підлеглі сторінки;

· Right (Справа) – загальне поле уздовж правого краю, що, як правило, не використовується;

· Bottom (Внизу) – поле по нижньому краї сторінки. У ньому звичайно розміщаються посилання на дочірні, материнську і домашню сторінки, виконані в текстовій формі на той випадок, якщо браузер користувача не може відображати графічні об'єкти або в ньому відключений відповідний режим.

Примітка. Якщо ви бажаєте самостійно розміщувати посилання і заголовки, вам потрібний такий варіант послідовних дій:

· Скиньте всі прапорці, оберіть варіант Current Page (Текущая страница) і клацніть на кнопці ОК. Ви побачите, що зі сторінки зникли кнопки навігації і заголовок, автоматично розташовувані в полях загальних елементів.

· Знову оберіть команду Format > Shared Borders (Формат > Общие Границы).

· Установіть прапорець Reset Borders For Current Page To Web Default (Установить стандартную конфигурацию для полей этой страницы).

· Клацніть на кнопці ОК. FrontPage поверне на сторінку елементи навігації, розташовані за замовчуванням.

3. Командою File > Close Web (Файл > Закрыть Web) закрийте Web-вузол й усі відкриті Web-сторінки, підтверджуючи збереження виконаних змін.

4.3. Редактор Web-сторінок

FrontPage підтримує безліч інструментів, що допомагають розглядати вузол не як набір сторінок, а як єдину структуру взаємозалежних компонентів. Але крім структури необхідно розробити самі Web-сторінки, що є основою будь-якого вузла.

До складу FrontPage входить могутній редактор Web-сторінок. Ви вже зустрічалися з ним, коли знайомились з режимом перегляду Page (Страница).

Щоб модифікувати Web-сторінку, досить відкрити її в зазначеному режимі за допомогою команди File > Open (Файл > Открыть) чи просто двічі клацнути на значку Web-сторінки в будь-якому з інших режимів FrontPage.

Редактор Web-сторінок FrontPage багато в чому схожий на редактор Word. Але формат HTML має свої правила створення файлів, що вносять певну специфіку в процес створення документів. На цьому занятті ви познайомитеся з основними прийомами створення змісту сторінок.

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