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

 

1.4.3 Навігація  по сайту

Навігація по сайту –  саме вона не дає відвідувачеві заплутатись  в нетрях сайту.

Завжди потрібно залишати для відвідувача можливість переходу на головну сторінку публікації.

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

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

 

1.4.4 Стилі оформлення  типів сторінок

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

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

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

• Інтерфейсний дизайн – його ще називають usability. Стиль, покликаний максимально полегшити життя користувачеві у всіх його виявах: від завантаження сторінки (мінімізування коду й граничної оптимізації зображень) до ретельного виконання кожного елементу;
• Динамічний дизайн – у примітивному варіанті рухливі зображення переважно флеш, але сюди ж належать і DHTML, аплети на Java і навіть анімаційний Gif. У добре продуманому сценарії це може бути цілий витвір мистецтва, що послідовно розгортає перед глядачем думку автора або художній образ;
• Змішані типи – комбінація всіх цих типів.

 

1.4.5 Компоненти  оформлення 

Ідею з оформлення слід реалізувати покроково:

1. Композиція. Іншими словами, компонування – загальний вигляд сторінки: що, де і як. Це співвідношення між різними об’єктами, їхніх позицій. Потрібно врахувати, що на сторінці будуть деякі службові компоненти: елементи навігації/субнавігації, рекламні банери, вибір кодування, форми для взаємодії з користувачем, написи (останнє відновлення, copyright …) – все це якимось чином має вкластися в загальну композицію сторінки.
2. Колірна гама. Потрібно визначитися з кольорами. Вибір кольорів залежить від особистих переваг, концепції сайту.
3. Графіка. Використання графіки має бути виправданим.
4. Шрифти. У межах сайту або типу сторінок повинні бути однакові стилі оформлення тексту (заголовки різних рівнів, цитати, посилання).

Під накресленням шрифту розуміється  комплект знаків певного малюнка.

 

Незважаючи на величезну  кількість шрифтів, створених для  комп’ютерних видавничих систем, шрифти можна поділити на групи:

• Шрифти із зарубками (антиква – serif);
• Шрифти без зарубок (гротески – sans serif);
• Декоративні (decorative);
• Рукописні (script);

Різні дослідження показали, що шрифти із зарубками читаються  легше, тому що зарубки допомагають  погляду пересунутись від букви  до букви, і букви при цьому  не зливаються. З іншого боку, букви  без зарубок легше читати в  шрифтах дуже великого або дуже малого розміру. Але встановити однакові правила  дуже складно (а якщо точніше, то неможливо), оскільки крім накреслення, величезне  значення має кегель шрифту, довжина  рядків, інтерліньяж, вільний простір  і навіть папір.

Насиченістю називається  візуально сприйнятий колір шрифту, що залежить від товщини його штрихів. Безперервний ряд накреслень становлять: світлий (light), нормальний (regular, book), напівжирний (demi), жирний (bold), темний (heavy), чорний (black), і дуже жирний (extra bold).

Залежно від пропорцій  знаків, шрифт може бути вузьким  (condensed), нормальним (normal) і широким (extended). Звичайно у комплекті йдуть шрифти з нормальним накресленням, але більшість програм дають змогу міняти співвідношення висота-ширина шрифту й одержувати потрібний ефект.

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

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

 

1.5 Створення веб-сторінок для моніторів з різною роздільною здатністю

 

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

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

Роздільна здатність –  це кількість пікселів, що може відображати монітор. Більшість моніторів можуть працювати з роздільною здатністю 640x480, 800x600 і 1024x768 пікселів. За більшої роздільної здатності можна відобразити більше інформації, ніж за меншої. Наприклад, за роздільної здатності 800x600 відображається 600.000 пікселів, а за роздільної здатності 1024x768 – 768.432 пікселя.

Отже, розмір кожного пікселя зменшується при збільшенні роздільної здатності. Це відбувається тому, що на однаковій площі екрана відображається більше пік селів.

Малюнки й тексти також  зменшуються при збільшенні роздільної здатності.

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

Наприклад, якщо встановити роздільну здатність 800x600, кожна комірка таблиці матиме ширину 200 пікселів. Ширина всієї таблиці дорівнюватиме 800 пікселям. Якщо ту саму таблицю переглянути на екрані з роздільною здатністю 1024x768, то вона буде ширшою. Кожна комірка матиме ширину 256 пікселів, а ширина таблиці дорівнюватиме 1024 пікселя.

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

Всі елементи таблиці повинні  бути повністю завантажені перед  тим, як браузер почне їх відображати. При використанні фіксованих таблиць  дизайнер може змусити браузер почати відображати дані в таблиці, не чикаючи  їхнього повного завантаження. Для  цього застосовується стиль CSS: <Table Style=”table-layout: fixed”>. Головним недоліком фіксованих таблиць є невикористання площі екрану за високої роздільної здатності екрану.

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

Піксель є основною одиницею вимірювання роздільної здатності екрану. Тому все, що стосується розміру екрану монітора, обчислюється в пікселях. Стандартною одиницею вимірювання розміру шрифту є «пункт». Коли визначати розмір тексту в «пунктах», комп’ютер має перетворити його на пік селі перед початком відображення на екрані. На жаль, перетворення між пікселями й пунктами не є універсальним. Це стає очевидним при створенні сторінок, призначених як для користувачів PC, так і для користувачів «Макінтош», які використовують менший коефіцієнт перетворення пунктів у пікселі. Тому текст, розмір якого заданий у пунктах, виглядатиме меншим при перегляді на «Макінтош».

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

 

 

 

2 СТВОРЕННЯ САЙТУ

 

2.1 Структура сайту

 

Розроблена структурна схема  наведена на рисунку 2.1, вона містить  структури, що описують процедури навігації  та виводу даних.

На головній сторінці сайту  ми можемо побачити наступні пункти меню:

1. Меню сайту, до якого входить головна сторінка, інформація про сайт (стисла історія ЗОШ I-III ступенів с. Кобзарівка), каталог статей (де розміщена доробка статей кожного зареєстрованого користувачами сайту), форум (питання та відповіді, спілкування на різні теми шкільного життя між користувачами веб-сторінки), фотоальбом (фотографій від початку створення школи і до сьогодення, альбоми окремих випусків, цікаві історій з життя школи, екскурсій, заходи, вечори дозвілля, та багато іншого).
2. Статистику (кількість зареєстрованих користувачів, гостей, і користавучів-онлайн).
3. Форму для входу в сайт (додаткові поля реєстрації та на випадок забуття паролю).
4. Друзі сайту (інші Інтернет-організації, які підтримують плідні відносини з даним сайтом).
5. Архів записів (останні опубліковані зміни).
6. Календар.
7. Пошукова система.

Рисунок 2.1 – Структура  сайту

 

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

 

2.2 Встановлення  компонентів для створення сайту,  його наповнення

 

Процес створення сайту я розділила на декілька етапів. Розглянемо кожен з цих етапів окремо.

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

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

Дизайн. Зовнішній вигляд сайту дуже важливий для створення першого враження користувача, поки він ще не встиг оцінити інформаційну складову сайту і зручність його користування. На основі розробленого на початковому етапі брифу створюються всі елементи дизайну сайту. При цьому дуже важливо витримати загальну концепцію. Іноді головна і внутрішні сторінки вимагають різного оформлення. У такому випадку дизайнер для кожної сторінки створює окремий макет.

Для прикладу наведено відкриття  вкладки фотоальбом.

Рисунок 2.2 - Вкладка фотоальбом

 

 

Верстка та програмування. На цьому етапі було втілено в життя напрацювання попередніх етапів: створення html-шаблону, єдину таблицю стилів CSS, встановлення і налаштування програмного пакету, що забезпечує необхідний функціонал сайту, перевірення і тестування єдності відображення в різних браузерах.

Термін HTML (HyperText Markup Language) означає «мова маркування гіпертексту». Це система верстки, яка визначає, як і які елементи повинні розташовуватися на сторінці. З часу створення першої версії (специфікації) HTML зазнав деяких змін і постійно розвивається. Поточну специфікацію HTML можна знайти на сайті міжнародної організації, що розробляє й впроваджує технологічні стандарти для всесвітньої павутини, w3.org.