ЗМІСТ

ВСТУП........................................................................................................................2
1 ЗАГАЛЬНИЙ РОЗДІЛ.........................................................................................3

1.1 Перелік основних функцій........................................................................3

1.2 Вимоги до технічних засобів.....................................................................3
1.3 Вимоги до програмних засобів.................................................................3
1.4 Вимоги до надійності.................................................................................3
1.5 Перелік документів, які є джерелами даних............................................3
1.6 Необхідне обґрунтування вибору середовища програмування.............4

2 ОСНОВНИЙ РОЗДІЛ..........................................................................................5

2.1 Характеристику етапів проектування архітектури системи, окремих

підсистем і модулів. Моделі повинні бути представлені графічно............................5
2.2 Вимоги до користувацького інтерфейсу і особливості його
проектування. У звіті мають бути представлені в графічному вигляді елементи
інтерфейсу ……………………………………………………………………………..7
2.3 Особливості реалізації (програмування) окремих модулів і їх збірки..8
2.4 Особливості верифікації і атестації системи.........................................10

ВИСНОВКИ.............................................................................................................11
ДОДАТКИ
 2

ВСТУП
Моїм індивідуальним завданням було створення сайту-візитки підприємства з
обробки деревини.
Сайт-візитка – невеликий сайт, як правило, складається з однієї (або
декількох) веб-сторінки і містить основну інформацію про організацію, приватну
особу, компанію, товари або послуги, прайс-листи, контактні дані.
Для створення сайту-візитки необхідно використовувати переважну кількість
графічних елементів для приваблення потенційних клієнтів. Вміщена інформація
повинна бути лаконічною, точною, стислою, яка як найкраще може
охарактеризувати підприємство чи організацію.
Існує два підхода створення сайту-візитки:
 статичний сайт;
 динамічний сайт.
Для реалізації індивідуального завдання використовувався статичний підхід.
 3

1 ЗАГАЛЬНИЙ РОЗДІЛ
1.1 Перелік основних функцій
Основна функція сайту-візитки – це надання інформації про підприємство,
компанію.
У випадку з моїм індивідуальним завданням основними функціями є:
 надання інформації про продукцію підприємства;
 надання адреси і контактних даних підприємства;
 надання головних переваг, чому саме це підприємство слід обрати.
1.2 Вимоги до технічних засобів
Основними вимогами до технічних засобів є:
 наявність системного блоку, монітора;
 наявність мережевої карти;
 можливий вихід в інтернет.
1.3 Вимоги до програмних засобів
Основними вимогами до програмних засобів є:
 встановлена операційна система;
 наявність браузеру (ІЕ 8 і вище, Opera, Google Chrome).
1.4 Вимоги до надійності
Даний сайт-візитка не повинен мати збоїв при роботі. Основним критеріями
надійності є:
 правильність написання структури сайту;
 правильність посилань на сторінкі;
 збереження відображення елементів при різних розширеннях.
1.5 Перелік документів, які є джерелами даних
Документи, які є джерелами даних являються документами підприємства в
яких зазначається юридична адреса, контакти, прайс-листи, в яких вміщена
інформація про продукцію.
 4

1.6 Необхідне обґрунтування вибору середовища програмування

Для реалізації даного індивідуального завдання я використовував середовище
програмування IntelliJ IDEA 14.0.2 компанії «JetBrains». Обране середовище
програмування надає всі необхідні можливості для розмітки і оформлення web-
сторінок. Інтерфейс програмного середовища не створює складнощів при роботі.
При додатковому завантаження бібліотек для роботи з HTML і CSS, не виникає
проблем з використанням структурних елементів в HTML чи параметрів в CSS,
адже IntelliJ IDEA автоматично пропонує всі можливі варіанти.
1.7
 5

2 ОСНОВНИЙ РОЗДІЛ
2.1 Характеристику етапів проектування архітектури системи, окремих
підсистем і модулів. Моделі повинні бути представлені графічно
При проектуванні сайту-візитки було виділено 3 основних етапів:
 проектування макету;
 підбір контенту;
 реалізація в середовищі програмування за допомогою HTML і CSS.
Перший етап – проектування макету, при виборі макету сайту-візитки
ключову роль грали такі аспекти як надійність, простота для користувача,
привабливість. Оптимальним варіантом було обрано макет (рис. 2.1), який складався
з таких частин:
 меню (рис. 2.2);
 блок інформації про підприємство (рис. 2.3);
 блок з наведеною продукцією (рис. 2.4);
 блок з адресою і контактними даними (рис. 2.5).

Меню

Інформація про підприємство

Продукція

Адреса і контакті дані

Рисунок 2.1 – «Макет сайту-візитки»

 6

Логотип Про нас Адреса Продукція

Рисунок 2.2 – «Макет блоку меню»

Текст 1

Рисунок 2 Рисунок 3
Рисунок 1 Рисунок 4

Текст 2

Рисунок 2.3 – «Макет блоку інформації про підприємство»

Текст 1

Продукція 1 Продукція 2
Рисунок Рисунок
1 2

Продукція 3 Продукція 4
Рисунок Рисунок
3 4

Рисунок 2.4 – «Макет блоку з наведеною продукцією»

 7

Рисунок 1 Текст Рисунок 2

Рисунок 2.5 – «Макет блоку з адресою і контактними даними»

Другий етап – підбір контенту, на даному етапі важливо визначити ключову
інформацію, яка запевнить клієнта обрати саме це підприємство. Мною було обрано
основні переваги підприємства, стислу інформацію про продукція, а також
інформацію про адресу і контактні дані.
Третій етап – реалізація в програмного середовищі. Реалізація відбувалась
завдяки мові розмітки HTML і каскадних таблиць стилей CSS. Лістинг наведений в
підрозділі 2.3.
2.2 Вимоги до користувацького інтерфейсу і особливості його
проектування. У звіті мають бути представлені в графічному вигляді елементи
інтерфейсу
Користувацький інтерфейс представлений у зручному для користувача
вигляді, де вся інформація розміщена у відповідних блоках, відділених один від
одного, що забезпечує акцент уваги саме на певній інформації, а не на всій відразу.
Нижче представлені такі елементи інтерфейсу:
 меню (рис. 2.6);
 блок інформації про підприємство (рис. 2.7);
 блок з наведеною продукцією (рис. 2.8);
 блок з адресою і контактними даними (рис. 2.9).

Рисунок 2.6 – «Блок меню»

 8

Рисунок 2.7 – «Блок інформації про підприємство»

Рисунок 2.8 – «Блок інформації про продукцію»

Рисунок 2.9 – «Блок адреси і контактних даних»

 9

2.3 Особливості реалізації (програмування) окремих модулів і їх збірки

Процес реалізації сайту-візитки можна розділити на 2 окремі етапи. Перший
етап – це розмітка і внесення інформації за допомогою HTML.
Другий етап – це оформлення сторінки за допомогою каскадних таблиць
стилей, тобто CSS.
Результати першого етапу реалізації (стислий вигляд) приведений на рисунку
2.10. Більш детально інформація відображена у додатку А, Б, В.

Рисунок 2.10 – «Стислий лістинг HTML»

Результати другого етапу(перелік використаних класів) приведено на рисунку
2.11. Більш детально інформація відображена у додатку Г, Д, Ж.
 10

Рисунок 2.11 – «Перелік використаних класів CSS»

 11

2.4 Особливості верифікації і атестації системи

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

ВИСНОВКИ
При виконанні індивідуального завдання були використані отримані під час
проходження практики знання з HTML і CSS.
Виконання завдання включало в себе етапи і початкового проектування, і вже
власне реалізацію в середовищі розробки. Під час проектування були створені
макети:
 макет структури сайту;
 макет блоку інформації про підприємство;
 макет блоку інформації про продукцію;
 макет блоку інформації про адресу і контактні дані.
Також під час проектування відбувався відбір інформації для розміщенні її на
сторінці. Інформація відповідає таким вимогам як:
 достовірність;
 лаконічність;
 стислість;
 правильність.
Для реалізації даного завдання в програмному середовищі використовувалися
всі доступні для мене методи роботи з HTML і CSS.
 13

ДОДАТКИ