Розробка сайту загальноосвітньої школи I-III ступенів с. Кобзарівка

Деревоподібна структура  – це універсальний спосіб розміщення веб-сторінок (рис. 1.4). Вона підходить для створення будь яких типів веб-сайтів. Користувач при заході на головну сторінку опиняється перед вибором, куди йти далі. Після переходу в потрібний розділ він добирає перехід в відповідний підрозділ.

Рисунок 1.4 – Деревоподібна  структура

 

Ґратчаста структура, ця структура  вже на порядок складніша від  розглянутих раніше. У ній всі  сторінки також розміщуються в різних гілках (рис. 1.5). Але в користувача  є можливість переміщуватись по них  не тільки вертикально (вгору – вниз), але й горизонтально (тобто між  гілками на різних рівнях). Грати  переважно використовуються в каталогах. При цьому переміщення між  гілками в глибинних рівнях здійснюється за допомогою посилань на рубрики  в інших розділах.

 

Рисунок 1.5 – Ґратчаста  структура

 

Крок 4. Визначаємо функціональну структуру. Функціональна структура демонструє, які можливості обробки інформації й інтерактивної взаємодії надається відвідувачеві.

Приклад функціональної структури  типового шкільного сайту:

• віртуальний хол – для спілкування вчителів, учнів, батьків й вчителів;

 

• форум – обмін думками й відповіді на запитання між відвідувачами й службою підтримки сайту;

• індивідуальні настройки – можливість одержувати індивідуальне подання інформації;
• розсилання – можливість одержувати шкільні новини по електронній пошті;
• реєстрація – запам’ятовування відомостей про відвідувача з метою його «впізнання» при повторному відвідуванні або надання йому спеціальних можливостей;
• олімпіади – інтерактивний сервіс, що дає змогу брати участь у шкільних олімпіадах.

Крок 5. Розробка навігації. Логічна послідовність інформації на сайті досягається через влаштування системи навігації по сайту. Наявність навігаційної системи дає змогу відвідувачеві візуально визначити цінність інформації за допомогою вивчення тематичних заголовків. Кожний заголовок у стислій формі характеризує конкретний розділ або групу підрозділів сайту, присвячених певному питанню або темі, і є гіперпосиланням на їх повний варіант. Сукупність таких заголовків і становить систему навігації по сайту.

Елементи навігації по розділах сайту, що допомагають користувачам орієнтуватись на сайті й швидко діставатися його віддалених ресурсів:

1. Система крос навігації. Містить усі посилання на основні розділи сайту. Практика показує, що список посилань, що є на кожній сторінці веб-сайту, - дуже зручний інструмент навігації. Він дає змогу бачити схематичну картину сайту на кожній сторінці. За допомогою системи крос-навігації можна не тільки легко пересуватися по розділах, а й одержати інформацію про розмір сайту, а також визначити місцезнаходження користувача в цей момент. І якщо виділяти назву розділу, в якому знаходиться користувач, він ніколи не заблукає.
2. Колірне позначення розділів. Тобто, коли для кожного розділу застосовується свій колір кнопок й фону, що нагадуватиме користувачеві про те, де він зараз знаходиться. Якщо в дизайні вирішено використовувати колірні

позначення розділів, необхідно  й відбити це у системі крос-навігації. Колір кожного посилання має  відповідати кольору розділу. Рекомендується використовувати колірні позначення розділів, якщо на сайті їх не більше п’яти – семи. Але якщо розділів більше, сайт виглядатиме строкато. До того ж, бажано вибирати кольори, які добре сполучаються між собою й мають однакові значення яскравості й насиченості. Наприклад, не слід використовувати три світлих і один темний колір для фону сторінок.

3. Вкладки. Це посилання на розділи, що є одним з найпопулярніших способів використання крос-навігації. Щоб ширше використовувати вкладки, можна додавати до кожної з них систему крос-навігації. Наприклад, коли користувач клацає на вкладці, з’являється рядок з посиланням.
4. «Слід із хлібних крихт». Це ще один спосіб зорієнтувати користувача під час подорожі по сайту. Він дає змогу позначити маршрут його пересування по різних сторінках. Залишаючи за собою у такий спосіб «слід із хлібних крихт», користувач завжди може повернутися на головну сторінку. Такий спосіб навігації допомагає наочно продемонструвати користувачеві, як далеко він заблукав у нетрях сайту і як йому звідти вийти.

У розробці сайту можна використовувати такі варіанти навігації:

1. Текстові посилання – найпростіший у плані реалізації варіант інформування користувача про те, що його очікує в середині сайту.
2. Графічний варіант запису системи навігації є, мабуть, найпоширенішим в Інтернеті. Застосовуються фотографічні зображення, малюнки анімації.
3. HTML- форми. Специфікація мови гіпертекстової розмітки HTML дає змогу розміщувати на веб-сторінках спадаючі й вибіркові меню, які, як правило, дають змогу заощадити місце на сторінці і являють собою інтуїтивно зрозумілі користувачеві елементи робочого середовища Windows.
4. Java- апплети являють собою невеликі програми, які вбудовуються в HTML- код веб-сторінок і можуть містити як текст, так і графіку. Відображаються за наявності в браузері користувача опції підтримки Java.
5. Flash. Системи навігації, розроблені на основі Macromedia Flesh, можуть сполучати в собі растрову й векторну графіку, анімацію, аудіо й відео, а також реагувати на різні користувацькі маніпуляції: натискання «гарячих»

клавіш, переміщення курсору  та інше. Для їхнього відображення на веб-сторінці на комп’ютері відвідувача сайту має бути встановлений спеціальний plug-in – Macromedia Flаsh Player.

Кожна сторінка сайту повинна  мати зручну й інтуїтивно зрозумілу  систему навігації. Важливо, щоб  відвідувач відразу зміг зрозуміти, у якому підрозділі якого розділу  й на якій сторінці сайту він знаходиться. Існує вертикальний (ліворуч і  праворуч) та горизонтальний (зверху та знизу) способи організації навігації.

 

1.3 Організація  головної сторінки

 

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

Головна сторінка веб-сайту  – 

• Обличчя закладу у віртуальному світі. Відомо, що перше враження можна скласти лише один раз. Головна сторінка веб-сайту має бути гарною. Але гарною настільки, щоб не закривати своєю красою зміст. Тобто оформлення головної сторінки має бути стильним і не помітним.
• Фойє будинку. Фойє призначене для входу в будинок. Головна сторінка – для входу на веб-сайт. І, як у фойє, на головній сторінці веб-сайту має бути система покажчиків, причому не всі підряд, а найбільш важливих. Їхнє

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

• Зміст книги. Створення ієрархічної структури змісту – дуже важливе завдання оформлення книги. Правильно складений зміст допомагає читачеві не тільки легко орієнтуватися в книжці, а й швидко «схопити» основний зміст книжки, наприклад, при її покупці. Головна сторінка веб-сайту також має допомогти відвідувачеві не тільки орієнтуватися на веб-сайті, а й з першого погляду зрозуміти, про що йдеться й чи слід витрачати час на його подальше вивчення.
• Перша сторінка газети. На першій газетній сторінці у стислому вигляді з помітними заголовками подаються найцікавіші матеріали, продовження яких слід читати вже на інших сторінках. Головна сторінка веб-сайту також схожа на газетну сторінку.

Приклади головних сторінок шкільних сайтів подано на рис. 1.6, 1.7.

Рисунок 1.6 – Приклад шкільного  сайту

Рисунок 1.7 – Приклад шкільного  сайту

 

Рекомендації зі створення  головної сторінки:

1. Титульна сторінка не повинна бути перенасиченою різними рубриками. Недоцільно робити її фреймовою й робити більше однієї градації рубрик.
2. Кількість рубрик на титульній і кожній з навігаційних сторінок сайту бажано обмежити п’ятьма – шістьма. Принцип рубрикації має бути єдиним і логічним, назви простими й однозначними. Якщо не вдається підібрати простої назви, можна дати як назву коротку анотацію змісту рубрики.
3. Інформаційна структура сайту має бути деревом, тобто перехід з одного рівня на інший має бути вертикальним.
4. Навігаційний апарат має наочно підкріплювати рівневу структуру на кожній сторінці сайту, щоб легко можна було рухатись вгору-вниз за ієрархічною структурою.

5. Горизонтальні зв’язки бажано робити тільки всередині сайту. Якщо є необхідність дати посилання на матеріал, що входить до іншого пакету веб-сторінок, то рекомендується попередити користувача, що, входячи за посиланням, він залишає сайт. Це можна зробити, наприклад, записами-нагадуваннями. Також не слід робити посилання на інші сайти прямо в тексті. Краще для цього використовувати посилання внизу сторінки (у крайньому разі дужки) і ввести посилання з попереднім записом «Більш докладно з матеріалами можна ознайомитись…».
6. Посилання всередині матеріалу  доцільно розміщувати тільки на сторінки наступного вертикального рівня або по горизонталі одного з цією сторінкою рівня.
7. При виставлянні великого багатосторінкового матеріалу, наприклад, методичного посібника, на кожній сторінці на видному місці бажано вміщувати основні розділи посібника, причому розділ, з якого подається сторінка, слід виділяти таким чином, щоб він впадав у око.
8. У дизайні титульної сторінки й сторінок зі змістом слід вибирати яскраві насичені кольори, колірні гами слід робити різко контрастними, малюнки і банери також допустимі, однак на колірному фоні не повинні губитися позначення рубрик.

 

1.4 Створення власного  стилю сайту

 

1.4.1 Стиль веб-сайту

Стильний веб-сайт – це коли кожна сторінка веб-сайту має  яскраво виражену приналежність  до всього веб-сайту. Коли легко орієнтуватись  й пошук інформації не пов'язаний з небезпекою заблукати й згаяти час, коли сторінки завантажуються менш ніж одна хвилина.

Стиль веб-сайту залежить від:

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

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

 

1.4.2 Графічне оформлення  сайту

Графічне оформлення сайту  має відповідати загальній колірній схемі; по-друге, необхідно продумати загальну концепцію графічного оформлення. Всі графічні елементи можна поділити на два класи: мальовані й фото реалістичні. У випадку, якщо на сайті використовуються фотографії, як ілюстрації, перед використанням потрібно обробити їх – зробити, якщо буде потреба, тонову й колірну корекцію, кадрування, вибрати орієнтований розмір фотографії у публікації, знайти спосіб обробити край фотографії. А потім використати оформлення по всій публікації. І завжди потрібно писати пояснення до фотографії у параметрі ALT- теги IMG – це буде сприйматися як підпис до фотографії.

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