Що важливо при проектуванні WEB сайтів
При проектуванні WEB сайту принципово відмінно осмислити схему ймовірних переходів з однієї сторінки на іншу за допомогою внутрішніх посилань. Така схема називається структурою навігації (navigation structure). Структура навігації повинна бути, перш за все, комфортна і зрозуміла для гостей WEB сайту. Схема переходів не повинна бути складною і заплутаною, і в той же час на WEB сайті не повинно залишитися важкодоступних сторінок.
Додавання сторінок в макет WEB сайту
Поки в нашому WEB сайті всього одна сторінка, тому перш ніж перейти до дослідження структури навігації, додамо в макет WEB сайту кілька нових сторінок.
Оберіть команду меню Файл - Зробити (File - New). У правій частині робочого вікна програми з'явиться Область завдань (Task Pane) з активною завданням Створення (New).
У розділі Зробити сторінку (New Page) Області завдань (Task Pane) клацніть мишею на посиланні Інші шаблони сторінок (More page templates). На дисплеї з'явиться діалог Шаблони сторінок (Page Templates).
Оберіть шаблон Рядова сторінка (Normal Page), який служить для створення порожній сторінки, і натисніть кнопку ОК. У робочій області програми з'явиться нова вкладка з порожньою сторінкою.
Точніше порожній буде її основна, центральна частина, а в спільних кордонах з боків сторінки будуть відображатися загальні для цих областей елементи. Припустимо, ця сторінка міститиме анонси.
Оберіть в меню команду Файл - Зберегти (File - Save). На дисплеї з'явиться стандартний діалог збереження файлів Зберегти як (Save As).
В поле Назва файлу (File Name) введіть ім'я файлу сторінки, наприклад news. Натисніть кнопку Зберегти (Save). Діалог Зберегти як (Save As) закриється, і сторінка буде збережена на диску.
Описаним вище чином зробіть і збережіть в папці WEB сайту ще три сторінки - наприклад для загального опис послуг services і для опису турів tour1 і tour2. Виберіть цих сторінок з'являться в робочому вікні програми FrontPage.
Натисніть комбінацію клавіш Ctrl + F1, щоб приховати область завдань.
Натисніть комбінацію клавіш Ctrl + F1, щоб показати Перелік папок (Folder List).
Як вірно зробити структуру навігації
Щоб гості змогли потрапити з домашньої сторінки WEB сайту на інші сторінки, необхідно зробити на їх посилання. Ви зможете самостійно знайти шляхи ймовірних переходів, зробити посилання і зв'язати їх з відповідними сторінками. Але краще скористатися можливостями FrontPage, що дозволяють спростити створення структури навігації.
Оберіть команду меню Вид - Переходи (View - Navigation). Програма перемкнеться в подання Переходи (Navigation), і в її робочому вікні буде відображена схема навігації.
Поки в схему навігації заходить тільки домашня сторінка. Щоб нові сторінки містили навігаційні меню і стали доступні з меню інших сторінок, потрібно включити їх в схему навігації.
Перетягніть за допомогою миші файл news з переліку файлів WEB сайту (Folder List) на схему навігації нижче домашньої сторінки. На схемі буде встановлено зв'язок між сторінками.
Після того, як нова сторінка буде додана в схему навігації, введемо для неї новий заголовок, замість присвоєного за замовчуванням.
Клацніть правою кнопкою миші на зображенні сторінки на схемі. На дисплеї з'явиться контекстне меню.
Оберіть в контекстному меню команду Перейменувати (Rename). На місці заголовка сторінки на схемі з'явиться поле введення.
Введіть заголовок для сторінки, наприклад Анонси, і натисніть кнопку Enter.
Розмістіть на схему навігації інші сторінки так, щоб сторінка services перебувала на одному рівні зі сторінкою новин, а сторінки з описом турів були пов'язані зі сторінкою services і розміщувалися на другому рівні. Поміняйте заголовки для нових сторінок.
Ви зможете поміняти положення сторінок на схемі навігації, перетягуючи їх за допомогою миші на різні рівні або в різні гілки схеми. Можна також зробити нову сторінку прямо на схемі, відразу вказавши для неї батьківську сторінку, іншими словами ту, під якою буде розміщуватися нова. Для цього потрібно натиснути правою кнопкою миші на одній зі сторінок схеми і в показаному контекстному меню обрати команду Зробити - Сторінка (New - Page). Щоб додати нову сторінку на самий верхній рівень схеми, необхідно натиснути правою кнопкою миші на вільній області схеми і в показаному контекстному меню обрати команду Зробити - Верхня сторінка (New - Top Page).
Річ у тім, структура навігації є багаторівневою. На першому рівні розміщена домашня сторінка, позначений піктограмою будиночка, також можуть знаходитися вхідні сторінки головних розділів WEB сайту. Зазвичай з основного розділу можна перейти в один з підрозділів, звідти до підрозділу наступного рівня і так далі Переходи показуються зв'язками між сторінками, які перебувають на прилеглих рівнях. У відповідності зі схемою навігації FrontPage автоматично оновлює навігаційні меню на всіх сторінках.
Коли WEB сайт великий, і всі сторінки не поміщаються на видимій частині схеми навігації, можна поміняти масштаб відображення.
Клацніть правою кнопкою миші на будь-якому місці фону схеми і в показаному контекстному меню виберіть команду Масштаб (Zoom). Відкриється меню другого рівня.
Оберіть команду За розміром даних (Size Те Fit) або необхідне значення масштабу.
За допомогою команди Книжкова / альбомна (Portrait / Landscape) в цьому ж контекстному меню можна розташувати схему в горизонтальному напрямку.
Крім посилань на певні сторінки, в навігаційне меню можуть включатися посилання для переходу на головну сторінку WEB сайту, на одну сторінку вгору, вперед або назад по схемі навігації. Для таких посилань можна вказати свої найменування.
Оберіть в меню програми команду Сервіс - Характеристики вузла (Tools - Site Settings). На дисплеї з'явиться діалог Характеристики вузла (Site Settings).
Оберіть вкладку Переходи (Navigation) і вкажіть найменування посилань для переходу на домашню сторінку (Home page), батьківську (Parent page), що передує (Previous page) і наступну (Next page) сторінки в відповідних полях введення.
Натисніть кнопку OK, щоб закрити діалог Характеристики вузла (Site Settings) і зберегти опції.
Тепер подивимося, які зміни відбулися на сторінках WEB сайту.
Два рази клацніть на зображенні домашньої сторінки на схемі навігації. Буде встановлено режим Конструктор (Design) Уявлення Сторінка (Page).
У лівій області сторінки в навігаційному меню з'явилися посилання для переходу до розділів послуг і новин.
Натисніть і утримуйте кнопку Ctrl. Підведіть покажчик миші до однієї з посилань. Покажчик прийме форму Клацніть на засланні. Буде відкрита відповідна сторінка.
Перевіримо, як працює зроблена структура навігації в браузері і як виглядає кожне з трьох навігаційних меню на різних сторінках WEB сайту.
Навігаційне меню можна налаштувати так, щоб в ньому показувалися посилання на сторінки певного рівня щодо поточного.
У режимі редагування сторінки Конструктор (Design) клацніть правою кнопкою миші на одному з навігаційних меню і в показаному контекстному меню виберіть пункт Характеристики панелі посилань (Link Bar Properties). На дисплеї розкриється діалог Характеристики панелі посилань (Link Bar Properties).
За допомогою перемикачів у верхній частині діалогу Характеристики панелі посилань (Link Bar Properties) можна включити до складу меню різні набори посилань:
посилання на сторінки верхнього, батьківського, рівня (Parent level);
посилання на сторінки поточного рівня (Same level);
посилання на сусідні сторінки поточного рівня (Back and next);
посилання на сторінки нижнього, дочірнього, рівня (Child level);
посилання на сторінки самого верхнього рівня (Global level);
посилання на сторінки другого рівня (Child pages under Home).
Крім того, за допомогою прапорів в правій частині діалогу до складу навігаційного меню можна включити посилання на домашню сторінку (Home page) і батьківську сторінку (Parent page), якщо це не передбачено обраним набором посилань. Обраний варіант схематично відображається на малюнку в лівій частині діалогу. Поточна сторінка на малюнку позначається жовтуватим прямокутником в блакитний рамці. Блакитним кольором показані сторінки, посилання на які міститимуться в навігаційному меню.
За допомогою перемикачів в нижній частині вкладки Стиль (Style) можна обрати стиль посилань, також горизонтальне (Horizontal) або вертикальне (Vertical) розміщення посилань в навігаційному меню і показати посилання у вигляді кнопок (Buttons) або звичайного тексту (Text).
Натисніть кнопку OK або кнопку Скасування (Cancel), щоб закрити діалог Характеристики панелі посилань (Link Bar Properties).
Якщо потрібно помістити на сторінки додаткове навігаційне меню, необхідно користуватися командою меню Вставка - Панель посилань (Insert - Navigation).
Час від часу може знадобитися не показувати навігаційне меню на певній сторінці і виключити посилання на цю сторінку з інших сторінок, але при всьому цьому кинути її в схемі навігації. Для цього необхідно натиснути правою кнопкою миші на зображенні сторінки в поданні WEB сайту Переходи (Navigation) і в показаному контекстному меню обрати команду Включено в панелі посилань (Included in Link Bars). Повторний вибір цієї команди відновлює посилання на сторінку.
Як налаштувати спільні кордони сторінок WEB сайту
При розробці макета WEB сайту майстер встановив з боків сторінки спільні кордони. У режимі редагування вони відділені від основного вмісту сторінки пунктирною лінією. Ми вже відзначали, що спільні кордони (shared borders) - це області, які містять єдину інформацію для кількох сторінок WEB сайту. Наприклад, щоб не вставляти логотип компанії на кожну сторінку, можна включити спільний кордон для всіх сторінок і помістити туди логотип.
Загальні кордону можна встановити для всіх сторінок WEB сайту або тільки для певних, або скасувати для певних сторінок.
Оберіть команду меню Формат - Загальні кордону (Format - Shared Borders). На дисплеї з'явиться діалог Загальні кордону (Shared Borders).
Перемикачі Застосувати (Apply to) дозволяють застосувати опції до всіх сторінках (All pages) або поточної сторінці (Current page) WEB сайту. Прапорці Зверху (Тор), Зліва (Left), Праворуч (Right), Знизу (Bottom) визначають наявність спільного кордону відповідно у верхній, лівій, правій і нижній областях сторінки. Опції, певні для всіх сторінок, використовуються за замовчуванням до кожної новостворюваної сторінці. Прапорці включити кнопки переходів (Include navigation buttons) дозволяють включити в загальну кордон кнопки навігаційного меню. Прапор Повернути кордону, що застосовуються за замовчуванням на WEB вузлі (Reset borders for current page to WEB default) скасовує особисті опції спільних кордонів сторінки і встановлює їх відповідно до прийнятих за замовчуванням для всього WEB сайту. Цей прапор доступний виключно в застосуванні до поточної сторінці.
Додаткові характеристики кордону можна встановити, натиснувши кнопку Характеристики кордону (Border Properties).
Закрийте діалог Загальні кордону (Shared Borders), натиснувши кнопку ОК або кнопку Скасування (Cancel).
Додаткова інформація по темі
У цій статті описується процес установки і настройки відображення інформації з баз даних на web-сторінках