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

МІНІСТЕРСТВО  ОСВІТИ І НАУКИ УКРАЇНИ

ТЕРНОПІЛЬСЬКИЙ  НАЦІОНАЛЬНИЙ ТЕХНІЧНИЙ 

УНІВЕРСИТЕТ ІМЕНІ  ІВАНА ПУЛЮЯ

 

 

Кафедра комп’ютерних наук

 

 

 

 

 

КУРСОВА РОБОТА

з дисципліни

«Основи автоматизованого проектування та

системної інтеграції КІТ»

на тему:

«Розробка сайту  загальноосвітньої школи 

I-III ступенів с. Кобзарівка»

 

 

 

Виконала

студентка групи СН-41___________________________________Барабаш  С. Б.

Залікова книжка № ПК 07-002                     (підпис)

 

 

Керівник роботи______________________________________ Маєвський О. В.

                                               (дата, оцінка, підпис)

 

 

Керівник роботи______________________________________ Козак Р. О.

                                               (дата, оцінка, підпис)

 

 

 

Тернопіль – 2011

РЕФЕРАТ

Курсова робота // Розробка сайту  загальноосвітньої школи I-III ступенів  с. Кобзарівка // Барабаш Світлана Богданівна // Тернопільський національний технічний університет імені Івана Пулюя, факультет комп’ютерно-інформаційних систем і програмної інженерії, кафедра комп’ютерних наук, група СН-41 // Тернопіль, 2011 // ст. 32, рис. 14.

 

Ключові слова: ІНТЕРНЕТ, ВЕБ-САЙТ, БРАУЗЕР.

 

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

ПЕРЕЛІК УМОВНИХ  ПОЗНАЧЕНЬ, СИМВОЛІВ, ОДИНИЦЬ,

СКОРОЧЕНЬ І ТЕРМІНІВ

 

CMS – Content Management Systems  (система керування контентом)

CSS – cascading style sheets (каскадні таблиці стилів)

PHP – hypertext preprocessor (гіпертекстовий препроцесор)

HTML – hyper text markup language (мова розмітки гіпертекстових документів)

URI – universal resource identification (універсальна форма адресації інформаційних ресурсів)

URL – universal resource locator (універсальний спосіб адресації ресурсів у мережі)

WWW – world wide web (всесвітня павутина)

ІС – інформаційна система

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ЗМІСТ

 

Вступ………………………………………………………………………………….6

1 Теоретичні основи поняття  веб-сайту та основи проектування  веб-сайту…….7

1.1 Сайт та веб-сторінка………………………………………………………7

1.2 Мета створення сайту…………………………………………………….8

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

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

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

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

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

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

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

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

2 Створення сайту…………………………………………………………………..25

2.1 Структура сайту………………………………………………………….25

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

2.3 Проблеми, що виникли  під час розробки сайту……………………….31

3 Тестування сайту…………………………………………………………………33

Висновки……………………………………………………………………………34

Перелік джерел……………………………………………………………………..35

 

 

 

 

 

 

 

ВСТУП

 

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

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

Завдяки Інтернету можна  дізнатись багато нового, знайти корисні  програми для комп’ютера, можна  передивлятись улюблені телевізійні  програми, дізнатись про останні  новини у світі кіно та музики, бронювати  номера в готелях та заказувати квитки на любі рейси, можна підписатись  на отримання новин і тоді останні  новини завжди будуть на даному комп’ютері.

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

Представлена нижче курсова  робота пов’язана з автоматизацією процесу представлення користувачам інформації через Інтернет.

 

 

 

 

 

 

 

 

1 ТЕОРЕТИЧНІ ОСНОВИ  ПОНЯТТЯ ВЕБ-САЙТУ ТА 

ОСНОВИ ПРОЕКТУВАННЯ ВЕБ-САЙТУ

 

1.1 Сайт та веб-сторінка

 

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

Веб-сторінка – це логічна одиниця Інтернету, однозначно обумовлена адресою. Можна сказати, що Інтернет складається із сайтів, а сайти, у свою чергу, - зі сторінок. URL – це адреса сторінки в Інтернеті. URL складається з доменного імені, шляхів до сторінки на сайті та назви файлу сторінки. Наприклад: http://kobzarivka.ua/index.html/, тут http://kobzarivka.ua – доменне ім’я, index.html – ім’я файлу. Як правило, файли, що містять веб-сторінки, мають розширення .htm або .html. Коли говорять «адреса сайту», мають на увазі його доменне ім’я, при звертанні дот якого завантажується стартова сторінка сайту.

За міжнародною згодою кожній країні в Інтернеті зарезервоване  деяке кодове позначення довжиною у 2 – 3 літери, що називається доменом  першого рівня або доменом  цієї країни. Так, наприклад, якщо адреса сайту закінчується на .ua – сайт знаходиться в домені України, .fr – Франції, .de – Німеччини. До того ж, деякі домени першого рівня, пов’язані не з географією, а зі спрямованістю сайту – наприклад, .com – для комерційних організацій, .org – для не комерційних, .edu – для освітніх.

 

 

 

1.2 Мета створення  сайту

 

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

Проектування сайту зазвичай передбачає такі кроки:

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

Відповідно освітні сайти  можна класифікувати в такий  спосіб:

• домашня сторінка;
• сайт школи;
• освітній портал.

Як правило якісний  шкільний сайт:

1. Містить довідкову інформацію, що цікавить батьків, дитина яких вступає до школи (зокрема, про вчителів, навчальні програми, традиції школи тощо).
2. Відображає події, що відбуваються в школі (свята, конференції, конкурси, олімпіади).
3. Відображає постійно діючі напрями в роботі школи (шкільний музей, участь у проектах).
4. Є місцем, де учні можуть подати свої творчі роботи (зокрема, гумористичні).
5. Надає можливість учителям розмістити свої матеріали (аж до окремого розділу з предмету).
6. Містить елементи дистанційної підтримки навчання (наприклад, віртуальний консультаційний пункт).
7. Підтримує особисті сторінки учнів, учителів, цілих класів.
8. Містить спеціальний розділ для випускників.
9. Представляє освітню установу міжнародному загалу.

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

Структура шкільного сайту  може бути такою:

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

 

• фотоальбом – електронний альбом з фотографіями учнів, учителів, сцен зі шкільного життя;

Крок 3. Визначити топологію сайту. Виділяють п’ять основних структур сайту – лінійна, лінійна з альтернативними варіантами, лінійна структура з відгалуженням, деревоподібна структура, ґратчаста структура.

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

Рисунок 1.1 – Лінійна структура  сайту

 

Лінійну структуру реалізувати  не складно. Найпростіший варіант сайту  – набір HTML- сторінок, в кожній з яких є посилання на наступну і попередню (винятком є крайні сторінки).

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

Рисунок 1.2 – Лінійна структура  з альтернативними варіантами

 

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

Рисунок 1.3 – Лінійна структура  з відгалуженнями

 

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