Курсовая_работа_Web__Матвиенко._Вариант_0033_д3

5.2 Шаблон web-інтрфейсу

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

CSS (Cascading Style Sheets) - це каскадні таблиці стилів або технологія опису зовнішнього вигляду сторінок, написаних на HTML.

За допомогою CSS описано блоки сторінки з використанням таких властивостей:

margin – встановлює величину відступу від кожного краю елемента .

Відступом є простір від кордону поточного елемента до внутрішньої межі його батьківського елементу.

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

height/width - визначає висоту/ширину елемента.

border-radius дозволяє встановити радіус скруглення куточків блоку.

background - властивості, які використовуються для визначення фону.

float - визначає по якій стороні буде вирівнюватися об'єкт.

list-style - дозволяє одночасно задати стиль маркера, його положення, а

також зображення, яке буде використовуватися в якості маркера.

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

text-decoration - визначає оформлення тексту.

Position- використовується для позиціонування (щодо вікна браузера або

інших об'єктів на веб-сторінці) елемента.

5.3 Сторінка з питаннями для самоконтролю

Сторінка призначена для перевірки засвоєння пройденого матеріалу з даних тем. ( Додаток В )

Сторінка містить інтерфейс показаний на рисунку 3. Після вибору пункту головного меню з’являються запитання з декількома відповідями. Для перевірки своїх знань треба вибрати лише одну правильну відповідь. Перевірити правильність можливо після натиснення на кнопку «Перевірити тест», після цього Ви будете переадресовані на іншу сторінку, на якій буде показано, яку саме кількість балів отримали, та зможете побачити правильну відповідь завдяки визначнику біля питання («+» – вірна відповідь, «-»– невірна відповідь).

Рисунок 3 – Інтерфейс

Рисунок 4 – Вікно результатів проходження тесту

5.4 Опис інтерактивних елементів

У електронному підручнику було використано такі інтерактивні елементи,

як кнопка піднятися вверх (рис. 5) вивід фідеофільмів з дисципліни за допомогою відеохостнга та спойлерів (для комфорту та збереження та скорочення памяті обробки системи) (рис. 6) ( Додаток Г )

Рисунок 5 – Кнопка вверх

Рисунок 6 – Вивід відеофільмів

Висновок

Результатом виконання курсової роботи на оснві Web-технологій є електронний підручник з предмету «Всесвітня Історія частина 1», що містить пункти головного меню: головна сторінка, зміст, Опорний конспект (випадаюче меню), сторінку самоконтролю, словник термінів та Біографічний довідник. Web-інтерфейс створенний за допомогою мови html,, css, javascript. Програмний продукт призначений для навчання студентів, містить зручну і інтуїтивно зрозумілу схему навігації за допомогою якої можно легко знайти потрібну інформацію з певної дисципліни.

При проведенні курсової роботи я оволодів сучасною методологією розроблення інформаційного та програмного забезпечення інформаційної системи на основі використання Web-технологій, ознайомився з сучасними технологіями передачі та обробки інформаційних потоків через Інтернет,

архітектурою програмних продуктів, новітніми методами розробки динамічних

Web-додатків.

padding: 5px 15px; /* Поля вокруг текста */

-o-transform: skewX(30deg); /* Для Opera */ -ms-transform: skewX(30deg); /* Для IE */ transform: skewX(30deg); /* CSS3 */

}

li hover {

background: #333; /* Цвет фона при наведении курсора мыши */

}

}

</style>

<script type="text/javascript" language="javascript" src="js/jquery.js"></script> <script type="text/javascript" language="javascript" src="js/menu.js"></script> <script type="text/javascript" language="javascript">

function printBlock() {

PrintContent = $('#PrintContent').html(); $('body').addClass('printSelected'); $('body').append('<div

class="printSelection">'+PrintContent+'</div>');

window.print();

window.setTimeout(pageCleaner,0); return false;

}

function pageCleaner(){ $('body').removeClass('printSelected'); $('.printSelection').remove();

}

</script>

</head>

<div style="height:1000px"> <body>

<div id="pageBody"> <ul class="menu">

<li><a href="index.html"> <font face="Monotype Corsiva" size="5"><b>Головна</b></font><p></a>

<li><b><font face="Monotype Corsiva"><a href="#"><font size="5">Програма</font></a><font size="5"> </font>

</font></b>

<ul>

<li><b><a href='seminar.html'><font size="5" face="Monotype

Corsiva">Семінар</font></a></b></li>

<li><b><a href="o_1.html"><font size="5" face="Monotype Corsiva">Всесвітня історія Опорний коеспект</font></a></b></li>

<li><b><a href="mod_kartka.html"><font size="5" face="Monotype Corsiva">Модульна картка</font></a></b></li>

<li><b><a href="dvd.html"><font size="5" face="Monotype Corsiva">Список відеофільмів та

DVD</font></a></b></li>

</ul>

<li><b><font face="Monotype Corsiva"><a href="#"><font size="5">Словники</font></a><font size="5"> </font>

</font></b>

<ul>

<li><b><a href="biograph_dov.html"><font size="5" face="Monotype Corsiva">Біографічний довідник</font></a></b></li>

<li><b><a href="slovar.html"><font size="5" face="Monotype Corsiva">Словник Термінів</font></a></b></li>

</ul>

<li><b><font face="Monotype Corsiva"><a href="#"><font size="5">Тести</font></a><font size="5"> </font>

</font></b>

<ul>

<li><b><a href='1914—1918.html'><font size="5" face="Monotype Corsiva">Перша світова війна 1914—1918 рр. Повоєнне облаштування світу</font></a></b></li>

<li><b><a href="1917—1923.html"><font size="5" face="Monotype Corsiva">Період повоєнної кризи та революцій 1917—1923</font></a></b></li>

<li><b><a href="1924—1929.html"><font size="5" face="Monotype Corsiva">Період стабілізації в Європі та в Північній Америці 1924—

1929</font></a></b></li>

<li><b><a href="1929—1933.html"><font size="5" face="Monotype Corsiva">Світ в період економічної кризи 1929—1933 рр. та подолання її наслідків</font></a></b></li>

</ul>

<li><a href='connect.html'><b><font face="Monotype Corsiva" size="5">Контакти</font></b></a></li>

</ul>

<table width="1000" border="0" align="center" cellspacing="0" cellpadding="0">

<tr><td>

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td valign="top"

width="0" align="right">

<td valign="top"> <table

width="100%" border="0" cellspacing="0" cellpadding="0">

<h1>

</div>

</h1>

<div id="content"> <article class="post">

<h3 style="color: rgb(0, 0, 0); font-family: Classica One; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; textindent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit- text-stroke-width: 0px">

 </h3>

<h3 style="color: rgb(0, 0, 0); font-family: Classica One; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; textindent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit- text-stroke-width: 0px">

 </h3>

<h3 style="color: rgb(0, 0, 0); font-family: Classica One; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; textindent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit- text-stroke-width: 0px">

<font size="7">Всесв<span lang="en-us">i</span>тня <span lang="en-us">I</span>стор<span lang="enus">i</span>я</font></h3>

<tr><td align="right"><img src="images/hr_line.gif" width="432" height="1" alt=""></td></tr>

<tr>

<td>