Розробка електронного підручника : Курсовая работа (т) по Информационное обеспечение, программирование

Рубрикатор

Информационное обеспечение, программирование

Курсовые работы (т)

Розробка електронного підручника

Міністерство освіти і науки України

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

Циклова комісія спеціальності 5.05010101

„Обслуговування програмних систем і комплексів

КУРСОВИЙ ПРОЕКТ

з предмету Web-технології та web-дизайн

Студента____ 4__ курсу 411 - ік групи

напряму підготовки 050101

«Інформатика та обчислювальна техніка»

спеціальності 5.05010101 .

м. Суми - 2015 рік

Зміст

Вступ

. Постановка задачі

. Дослідження предметної галузі

. Структура електронного підручника та схема навігації

.1 Карта сайту

. Сценарії та основні модулі

.1 Головна сторінка підручника

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

.3 Сторінка самоконтролю

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

Висновок

Література

Додаток А

Додаток Б

Додаток В

Додаток Г

Вступ

, Hyper Text Markup Language, або, по-українськи, «мова розмітки гіпертексту », є фундаментальною, базовою технологією Інтернету. Не дивлячись на існуюче серед користувачів Всесвітньої мережі думка, що HTML є повнофункціональною мовою програмування, яка володіє практично всіма рисами, характерними для інших аналогічних мов.

Практично весь вміст web-вузлів, який відображається на екрані підключених до Інтернету комп'ютерів, є набором документів, що містять програмний код HTML.дозволяє формувати на сторінці сайту текстові блоки, включати в них зображення, організовувати таблиці, управляти відображенням кольору документа і тексту, додавати в дизайн сайту звуковий супровід, організовувати гіперпосилання з контекстним переходом в інші розділи серверу або звертатися до інших ресурсів Мережі і компонувати всі ці елементи між собою. Файли, що містять гіпертекстовий код, мають розширення .htm або .html., Hyper Text Markup Language (мова розмітки гіпертексту) - мова, що використовується для створення документів в Інтернеті. HTML-документом називається файл, що містить код HTML. Такі документи є основним інформаційним наповненням web-вузлів, вони дозволяють відображати текст, графіку, аудіо та відеоінформацію, а також інші компоненти ресурсів Інтернету.

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

Гіперпосилання (Hyperlink) - базовий функціональний елемент html-документа, що є реалізацією динамічного зв'язку якого-небудь об'єкту даної web-сторінки з контекстним вмістом іншого документа.

Щоб роз'яснити цей термін, приведу простий приклад. Припустимо, що створений вами html-документ включає текст, в якому зустрічається слово «гіперпосилання », а докладне розкриття цього терміну приведено в іншому документі, розміщеному в Інтернеті незалежно від першого. Перетворивши дане слово в гіперпосилання і пов'язавши її з вказаним вище документом, ви організовуєте тим самим найпростіший гіперзвязок: користувачу, охочому ознайомитися із значенням терміну «гіперпосилання », достатньо клацнути мишею на цьому слові, щоб перейти до web-сторінки з відповідними поясненнями. Слід зазначити, що як гіперпосилання може використовуватися як елемент текста, так і графічний об'єкт, а сам гіперзвязок можна встановлювати як між декількома документами, розташованими на одному фізичному сервері, так і з об'єктами, розміщеними на різних вузлах Інтернету.

На відміну від інших мов програмування, HTML - мова не трансльована, але що інтерпретується. Це означає, що для виконання готового коду його не потрібно компілювати, вбудований в спеціальне програмне забезпечення, призначене для перегляду web-сторінок, інтерпретатор «компілює» код безпосередньо в процесі відкриття документа. При цьому, знайшовши в тексті помилку, така програма не видає відповідного попередження(якщо сторінка не містить вбудованих скриптів Java), а просто ігнорує всю «помилковий » рядок.

Це слідує мати у вигляді, складаючи HTML-програму, оскільки можна ненароком пропустити «непомітну» помилку і виявити її наявність вже тоді, коли сторінка буде опублікована в Web.

1. Постановка задачі

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

Розробити та програмно реалізувати електронний підручник - з всесвітньої історії (частина 1).

2. Дослідження предметної області

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

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

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

3. Структура електронного підручника та схема навігації

Веб-додаток має структуру, що зазначена на (рис. 1.1). Для переходу між складовими підручника застосовується схема навігації. Щоб здійснити переміщення між сторінками: головна, зміст, опорний конспект, сторінка самоконтролю, словник політологічних термінів використовувалася складна система гіперсилок. ( рис. 1.2 )

Рисунок 1.1 Схема навігації веб-додатку

Рисунок 1.2 Перехід між темами

.1 Карта сайту

Список системи (карти) навігації сайту:

üГоловна сторінка

üПрограма

·Семінар

·Практичні

·Тестування

üСловники

·Словник термінів

·Біографічний довідник

üТести

·Тест по темi: "Перша свiтова вiйна 1914-1918 рр. Повоэнне облаштування свiту"

·Період повоєнної кризи та революцій 1917-1923

·Період стабілізації в Європі та в Північній Америці 1924-1929

·Світ в період економічної кризи 1929-1933 рр. та подолання її наслідків

üКонтакти

4. Сценарії та основні модулі

.1 Головна сторінка

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

При блокової верстки істотне значення приділяється універсальному тегу <div> , який виконує безліч функцій. Елемент <div> є блоковим елементом і призначений для виділення фрагмента документа з метою зміни виду вмісту. Як правило, вид блоку управляється за допомогою стилів. Щоб не описувати кожен раз стиль всередині тега , можна виділити стиль в зовнішню таблицю стилів, а для тега додати атрибут class або id з ім'ям селектора. ( Додаток А )

Рисунок 2 - Головна сторінка

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

Веб-інтерфейс - це сукупність засобів, за допомогою яких користувач взаємодіє з веб-сайтом <#"justify">·margin - встановлює величину відступу від кожного краю елемента . Відступом є простір від кордону поточного елемента до внутрішньої межі його батьківського елементу;

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

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

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

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

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

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

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

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

·position- використовується для позиціонування (щодо вікна браузера або інших об'єктів на веб-сторінці) елемента.

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

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

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

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

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

електронний підручник навігація інтерфейс

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

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

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

Рисунок 6 - Перегляд відеофільмів

Висновок

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

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

Література

1Баррет Д. JavaScript. Web-профессионалам. - Киев: БХВ - Киев, 2001.

2Хоумер А., Улмен К., Dynamic HTML. Справочник. - СПб.: Питер, 2000.

Эрик А. Мейер "CSS. Каскадные таблицы стилей. Подробное руковоство " 3-е издание. Издательство: Символ-Плюс, 2008 г.

4Бабушкин М., Коростелев В. «Как правильно организовать свой Web-сервер.», Мир Internet. - 1997г.

5Браун С. «Мозайка и Всемирная паутина для доступа в INTERNET» изд. «МИР» «СК ПРЕСС» «МАЛИП» М. 1996г.

6Бикнер К. «Экономичный Web-дизайн» - М.: «НТ ПРЕСС» 2005г.

Вин Д.«Искусство Web-дизайна. Самоучитель» - СПб.: «Питер» 2002 г.

Гончаров М.В. Шрайберг Я.Л. «ч-2. Создание собственных Web-страниц», М.: ГПНТБ 2001г.

Гончаров А. «HTML в примерах: Спецификация HTML 3.2. Примеры гипертекста. Обзор HTML-редакторов», СПб. И др.: Питер, 1997г.

Гото К., Котлер Э. «Веб-редизайн: книга Келли Гото и Эмили Котлер», 2 изд. СПб.: Символ-Плюс 2007г.

Габбасов Ю.Ф. «Internet 2000». - СПб.: БХВ - Санкт - Петербург, 2000.

Дунаев В. «Web-графика, нужные программы». - СПб.: «БХВ-Петербург» 2006г.

Джонсон Д. «Web-дизайн: типичные ляпы и как их избежать.» 2005г.

Донцов Д. «1000 лучших программ» энциклопедия, СПб.: «Питер» 2007г.Дунаев В.

Додаток А

Код головної сторінки «index.html»:

<html>

<head>

<title>Всесвітня Історія Е.П.</title>

</head>

moz-background-size: 20%; /* Firefox 3.6+ */

webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */position: left, right;repeat: repeat-y, repeat-y;

o-background-size: 100%; /* Opera 9.6+ */size: 100%; /* Современные браузеры */{: inline-block; /* Строчно-блочные элементы */: #CA181A; /* Цвет фона */right: 3px; /* Расстояние между пунктами меню */

webkit-transform: skewX(-30deg); /* Для Safari и Chrome */

moz-transform: skewX(-30deg); /* Для Firefox */

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

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

}{: #fff; /* Цвет ссылок */: block; /* Блочный элемент */: 5px 15px; /* Поля вокруг текста */decoration: none; /* Убираем подчёркивание */

webkit-transform: skewX(30deg); /* Для Safari и Chrome */

moz-transform: skewX(30deg); /* Для Firefox */

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

ms-transform: skewX(30deg); /* Для IE */: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px">

 </h3>

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

<tr>

<td>

<tr>

<p>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td></tr>

<div>

<span style="font-size:

.0pt;font-family:"Monotype Corsiva";color:black">Ми рад</span><span lang="EN-US" style="font-size: 18.0pt; font-family: Monotype Corsiva; color: black">i</span><span lang="EN-US" style="font-size:

.0pt;font-family:"Monotype Corsiva";color:black"> </span>

<span style="font-size:18.0pt;font-family:

"Monotype Corsiva";color:black">в</span><span lang="EN-US" style="font-size: 18.0pt; font-family: Monotype Corsiva; color: black">i</span><span style="font-size:18.0pt;family:"Monotype Corsiva";color:black">тати вас!!!</span></font></p>

<p><font size="5" color="black" face="Monotype Corsiva">: skewX(30deg); /* CSS3 */

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

}

</style>

$('body').addClass('printSelected');

$('body').append('<div>

}pageCleaner(){

$('body').removeClass('printSelected');

$('.printSelection').remove();

}

</script>

</head>

<body>

<ul>

<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>

<tr>

<h1>

</div>

</h1>

 </h3>

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

<tr>

<td>

<tr>

<p>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td></tr>

<div>

<span style="font-size:

.0pt;font-family:"Monotype Corsiva";color:black"> </span>

<span style="font-size:18.0pt;font-family:

<span style="font-size:

.0pt;font-family:"Monotype Corsiva";color:black">Учбовий заклад: Ма</span><span lang="UK" style="font-size: 18.0pt; font-family: Monotype Corsiva; color: black">шинобудівний

коледж СумДУ</span></font></p>

Спеціальність: для студентів усіх спеціальностей та рівнів підготовки.</span></font></p>

Курс 1-2.</span></font></p>

Дисципліна: "Всесвітня Історія".</span></font></p>

Викладачі: Бондаренко Д.І.</span></font></p>

                    Титаренко А.В.</span></font></p>

<span style="font-size:

.0pt;font-family:"Monotype Corsiva";color:black">Елеккторнний п</span><span lang="EN-US" style="font-size: 18.0pt; font-family: Monotype Corsiva; color: black">i</span><span style="font-size:18.0pt;family:"Monotype Corsiva";color:black">дручник включатиме  курс з

предмету "Всесв</span><span lang="EN-US" style="font-size: 18.0pt; font-family: Monotype Corsiva; color: black">i</span><span style="font-size:18.0pt;font-family:"Monotype Corsiva";:black">тня </span>

<span style="font-size:

.0pt;font-family:"Monotype Corsiva";color:black">Навчальна програма

складатиметься з 35 год 7,8,9,10,11-го класу.</span></font></p>

<p>

<span style="font-size:

.0pt;font-family:"Monotype Corsiva""> </span></font></p>

</div>

</div>

</td>

</tr>

<a href="index.html">Головна</a> |<a href="slovar.html">Словник Термінів</a> |<a href="biograph_dov.html">Біографічний довідник</a> |<a href='connect.html'>Контакти</a>

<div>

<p>Сайт розробив <span> <a target=_new href ="http://vk.com/matvienko_bogdan"="Cторінка ВК Матвієнко Богданна.">Матвієнко Богдан</A></span>.<p>

</div>

</div>

</article>

</div> </html>

Додаток Б

Код каскадної таблиці стилів «drop_gor_menu.css»:

ul.menu {: auto;: 0;: 30px;: 100%;: url("images/gor_menu_hover") repeat-x;

}.menu li {: url("images/gor_menu_punkt.png") 12px 5px no-repeat;: left;style: none;

}.menu li a {: #8B4513;: block;: 6px 32px 0px;decoration: none;

}.menu li a:hover {: url("images/gor_menu_punkt.png.png") 12px 5px no-repeat;

}.menu li ul {: none;left: 12px;: 0px;

}.menu li:hover ul {: block;: absolute;

}.menu li:hover ul li {: none;

}: #8B4513;: url("images/gor_menu_punkt.png") 12px 5px no-repeat;: 6px 12px 0px;

}.menu ul li:hover {: #8B4513;: url("images/gor_menu_hover.png") repeat-x;: 6px 12px 0px;

}.menu ul li a {: #8B4513;: 6px 12px 0px;

}.menu ul li a:hover {: url("images/gor_menu_hover") repeat-x;: #FF7F50;: 6px 12px 0px;

}.menu li:hover ul li a {: 0px 0 8px;

}

#container_2 {width:1100px;:100%align: left;: 0 auto;: none;

#slider-container21 { width: 100%}

#djslider-loader21 {width: 100%}

#djslider21 { width: 71%}

.images img{width:70%;padding:200px 0;}, body {: 100%;: 100%;: 0px;: 0px;align: center;

}: url(images/12.jpg);repeat: no-repeat;

/* если ширина окна <= 1000px ... */

/*открываем media query*/

@media screen and (max-width: 1000px) {

/* Делаем основной контент немного шире */

#content {

width: 75%;

}

/* Переносим навигацию наверх сайдбара */

#nav, #sidebar {

width: 25%;

}

/* Регулируем отступы сайдбара */

#sidebar .inner {

margin-right: 0;top: 20px;

}

.page {height: 100%;: auto !important;: 100%;: #999;

}

#content {: left;: 65%;: 0 0 20px 0;: 0;

}

#content .inner {right: 20px;: 20px;: #333;: #E0E4CC;

}

.wrap {padding-bottom: 100px;}

.footer {: 100px;top: -100px;: #f00;

}

@media screen and (max-width: 980px) {

#pagewrap {: 95%;

}

#content {: 60%;: 3% 4%;

#sidebar {: 30%;

}

#sidebar .widget {: 8% 7%;bottom: 10px;

}

/*закрываем media query*/

moz-background-size: 100%; /* Firefox 3.6+ */

webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */

webkit-transform: skewX(-30deg); /* Для Safari и Chrome */

moz-transform: skewX(-30deg); /* Для Firefox */

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

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

}{: #fff; /* Цвет ссылок */: block; /* Блочный элемент */: 5px 15px; /* Поля вокруг текста */

text-decoration: none; /* Убираем подчёркивание */

webkit-transform: skewX(30deg); /* Для Safari и Chrome */

moz-transform: skewX(30deg); /* Для Firefox */

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

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

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

}

#footer { height: 50px;: #f7f7f7;: absolute;: 0;: 100%;background:url(images/12.jpg);background-repeat:repeat-x;font-family:Times;font-size:14px;font-weight:bold;color:#ee7e1f;text-align:center;text-decoration:none;padding:25px 0 0 0 }

#footer span{color:white;}

.designedby {font-family:Arial;font-size:11px;font-weight:bold;color:#ee7e1f;text-align:center;text-decoration:none}

.designedby:hover {font-family:Arial;font-size:11px;font-weight:bold;color:#ee7e1f;text-align:center;text-decoration:underline}

.xhtml, .xhtml:hover {width:66px;height:17px;float:left;margin:0;padding:1px 0 0 0;font-family:Arial;font-size:11px;color:#000;text-align:center;text-decoration:none;background:url(images/xhtml.jpg) no-repeat}

.css, .css:hover {width:66px;height:18px;float:left;margin:0 0 0 5px;padding:0;font-family:Arial;font-size:11px;color:#000;text-align:center;text-decoration:none;background:url(images/xhtml.jpg) no-repeat}

.printSelected div{display:none;background:white;color:black;}

.printSelected h1,.printSelected h2, .printSelected p{color:black;}

.printSelected div.printSelection{display:block;}

.printSelected div.printSelection div{display:block;}

Додаток В

Код обробки для сторінки самоконтролю «1914-1918.html»:

<html>

<head>

<title>Всесвітня Історія Е.П.</title>

</head>

moz-background-size: 20%; /* Firefox 3.6+ */

webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */position: left, right;repeat: repeat-y, repeat-y;

webkit-transform: skewX(-30deg); /* Для Safari и Chrome */

moz-transform: skewX(-30deg); /* Для Firefox */

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

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

}{: #fff; /* Цвет ссылок */: block; /* Блочный элемент */: 5px 15px; /* Поля вокруг текста */decoration: none; /* Убираем подчёркивание */

webkit-transform: skewX(30deg); /* Для Safari и Chrome */

moz-transform: skewX(30deg); /* Для Firefox */

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

ms-transform: skewX(30deg); /* Для IE */: skewX(30deg); /* CSS3 */{: url(images/12.jpg) no-repeat;

moz-background-size: 20%; /* Firefox 3.6+ */

webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */position: left, right;repeat: repeat-y, repeat-y;

webkit-transform: skewX(-30deg); /* Для Safari и Chrome */

moz-transform: skewX(-30deg); /* Для Firefox */

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

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

}

$('body').addClass('printSelected');

$('body').append('<div>

}pageCleaner(){

$('body').removeClass('printSelected');

$('.printSelection').remove();

}

</script>

<body>

<ul>

<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>

</ul>

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

</ul>

<tr>

<td valign="top">="midtxt"></div></b></p>

 </p>

 </p>

 </p>

 </p>

 </p>

 </p>

<p>

<b>

<tr>

<td>

<tr>

<h1>

</div>

</h1>

 </h3>

 </p>

<b><font size="6" face="Classica One">Всесв<span lang="en-us">i</span>тня <span lang="en-us"></span>стор<span lang="en-us">i</span>я</font></b></p>

<p><b><font face="Classica One" size="5">Тест по тем<span lang="en-us">i</span>:

<span lang="en-us">"</span>Перша св<span lang="en-us">i</span>това в<span lang="en-us">i</span>йна

-1918 рр. Повоэнне облаштування св<span lang="en-us">i</span>ту<span lang="en-us">"</span></font></b></p>

<b>

<div>

 </div><div id="PrintContent"><div>

 </p>

 </p>

 </p>

 </p>

 </p>

 </p>

<p>

<b>

<tr>

<td>

<tr>

<p>

</td>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td></tr>

<div>

{count=0(document.test)

{(!Q1[0].checked&&!Q1[1].checked&&!Q1[2].checked&&!Q1[3].checked&&!Q1[4].checked)

{count+=1};(!Q2[0].checked&&!Q2[1].checked&&!Q2[2].checked&&!Q2[3].checked&&!Q2[4].checked)

{count+=1};(!Q3[0].checked&&!Q3[1].checked&&!Q3[2].checked&&!Q3[3].checked&&!Q3[4].checked)

{count+=1};(!Q4[0].checked&&!Q4[1].checked&&!Q4[2].checked&&!Q4[3].checked&&!Q4[4].checked)

{count+=1};(!Q5[0].checked&&!Q5[1].checked&&!Q5[2].checked&&!Q5[3].checked&&!Q5[4].checked)

{count+=1};(!Q6[0].checked&&!Q6[1].checked&&!Q6[2].checked&&!Q6[3].checked&&!Q6[4].checked)

{count+=1};

(!Q7[0].checked&&!Q7[1].checked&&!Q7[2].checked&&!Q7[3].checked&&!Q7[4].checked)

{count+=1};(!Q8[0].checked&&!Q8[1].checked&&!Q8[2].checked&&!Q8[3].checked&&!Q8[4].checked)

{count+=1};(count>0)

{alert("Проверьте пожалуйста ваши ответы, возможно вы дали ответ не на все вопросы") }answer()

}

}control(k, f1,f2,f3,f4,f5,f6,f7,f8) {(k==1&&f1.checked) return true;(k==2&&f2.checked) return true;(k==3&&f3.checked) return true;(k==4&&f4.checked) return true;(k==5&&f5.checked) return true;(k==6&&f6.checked) return true;(k==7&&f7.checked) return true;(k==8&&f8.checked) return true;false;

}answer()

{="";(document)

{+=control(res.charAt(0) ,test.Q1[0],test.Q1[1],test.Q1[2],test.Q1[3],test.Q1[4])?"1":"0"+=control(res.charAt(1) ,test.Q2[0],test.Q2[1],test.Q2[2],test.Q2[3],test.Q2[4])?"1":"0"+=control(res.charAt(2) ,test.Q3[0],test.Q3[1],test.Q3[2],test.Q3[3],test.Q3[4])?"1":"0"+=control(res.charAt(3) ,test.Q4[0],test.Q4[1],test.Q4[2],test.Q4[3],test.Q4[4])?"1":"0"+=control(res.charAt(4) ,test.Q5[0],test.Q5[1],test.Q5[2],test.Q5[3],test.Q5[4])?"1":"0"+=control(res.charAt(5) ,test.Q6[0],test.Q6[1],test.Q6[2],test.Q6[3],test.Q6[4])?"1":"0"+=control(res.charAt(6) ,test.Q7[0],test.Q7[1],test.Q7[2],test.Q7[3],test.Q7[4])?"1":"0"+=control(res.charAt(7) ,test.Q8[0],test.Q8[1],test.Q8[2],test.Q8[3],test.Q8[4])?"1":"0"();

}showResult()

{nok=0;i,s;(i=0; i<answ.length;i++) {nok+=answ.charAt(i)=="1"?1:0;}(nok==8) s="Відмінно";(nok<8) s="Добре";(nok<6) s="Задовільно";(nok<3) s="НЕзадовільно!";.test.s1.="Кількість правильних відповідей "+nok+". Ваша відмітка "+s+". Поглянте на вікно поруч з запитаннями. Якщо відповідь правильна, там (+). Якщо ви помилилися, там (-).";(document.test)

{(answ.charAt(0)=="1") {T1.value=" + "} else {T1.value=" - "};(answ.charAt(1)=="1") {T2.value=" + "} else {T2.value=" - "};(answ.charAt(2)=="1") {T3.value=" + "} else {T3.value=" - "};(answ.charAt(3)=="1") {T4.value=" + "} else {T4.value=" - "};(answ.charAt(4)=="1") {T5.value=" + "} else {T5.value=" - "};(answ.charAt(5)=="1") {T6.value=" + "} else {T6.value=" - "};(answ.charAt(6)=="1") {T7.value=" + "} else {T7.value=" - "};(answ.charAt(7)=="1") {T8.value=" + "} else {T8.value=" - "};

}

}showhide(obj){(obj == 'none') return 'inline';return 'none';

}

</script>

<!--<span style="color:#B6F070;text-decoration:underline;cursor:pointer;" onclick="document.getElementById('instruction').style.display = showhide(document.getElementById('instruction').style.display)">

Інстркуція</span>

<br/>

<ul>

<li>Виберіть один з варіантів на кожний з 8 питаннь;</li>

<li>Натисніть кнопку "Відобразити результати";</li>

<li>Скрипт не відобразить резудьтат, поки Ви не відповисте на всі запитання;</li>

<li>Подивіться в віконце біля кожного завдання. Якщо відповідь правильна, то там (+). Якщо Вы помилилися, там (-).</li>

<li>За кожну правильну відповідь Вам зараховується 1 балл;</li>

<li>Оцінки: менее 3 балів - НЕзадовільно, от 4 но менее 6 - УДОВЛЕТВОРИТЕЛЬНО, 6 и менее 8 - ХОРОШО, 8 - ОТЛИЧНО;</li>

<li>Щоб повторно пройти тест, натисніть кнопку "Пройти заново";</li>

</ul>

</div>-->

<input type="radio" name="Q1"/> створення воєнно-політичного блоку країн Центральної Європи - Троїстого союзу<br />

<input type="radio" name="Q1"/> прагнення Росії до захоплення чорноморських проток Босфор і Дарданелли<br />

<input type="radio" name="Q1"/> загострення протиріч між найбільшими капіталістичними державами<br />

<input type="radio" name="Q1"/> убивство в Сараєві спадкоємця австро-угорського престолу ерцгерцога Франца Фердінанда. <br />

<input type="radio" name="Q2"/> Великобританія, Болгарія, Франція<br />

<input type="radio" name="Q2"/> Франція, Росія, Австро-Угорщина»<br />

<input type="radio" name="Q2"/> Італія, Іспанія, Франція<br />

<input type="radio" name="Q2"/> Росія, Франція, Велика Британія.<br />

<input type="radio" name="Q3"/> план «Барбаросса»<br />

<input type="radio" name="Q3"/>«план Шліффена»<br />

<input type="radio" name="Q3"/>«план Гінденбурга»<br />

</b><br/>

<input type="radio" name="Q4"/> Генуезька<br />

<input type="radio" name="Q4"/> Паризька<br />

<input type="radio" name="Q4"/> Лондонська;<br />

<input type="radio" name="Q4"/> Потсдамська<br />

<input type="radio" name="Q5"/> США, Росії, Франції, Англії, Бельгії;<br />

<input type="radio" name="Q5"/> США, Франції, Італії, Англії, Японії<br />

<input type="radio" name="Q5"/> Англії, США, Франціїі<br />

<input type="radio" name="Q5"/> Німеччини, США, Англії, Франції, Італії<br />

<input type="radio" name="Q7"/> В. Ленін<br />

<input type="radio" name="Q7"/> Ж. Клемансо<br />

<input type="radio" name="Q7"/> Д. Ллойд Джордж<br />

<input type="radio" name="Q7"/> В. Вільсон<br />

<input type="radio" name="Q8"/> встановлення міжнародного військово-політичного контролю над переможеними країнами<br />

<input type="radio" name="Q8"/> організації боротьби з більшовицькою Росією<br />

<input type="radio" name="Q8"/> контролю за дотриманням міжнародного права й запобігання війнам<br />

</CENTER>

</form>

</td>

</tr>

</div>

<!-- <a href="index.html">Главная</a> | <a href="konspekt.html">Конспекты</a> | <a href="test.html">Тесты</a> | <a href="history.html">История</a> | <a href="contact.html">Контакты</a>

Додаток Г

Інтерактивні елементи «scrollup.css»:

<!- кнопка вверх -->

#scrollup {: fixed; /* фиксированная позиция */: 0.5; /* прозрачность */: 15px 10px 10px; /* отступы */: #aaa;radius: 5px; /* скругление углов */

webkit-border-radius: 5px;

moz-border-radius: 5px;: 10px; /* отступ слева */: 10px; /* отступ снизу */: none; /* спрятать блок */: pointer;

}

<dl><dt>

Больше работ по теме:

Розробка ігрової програми "Багатостороння дуель"
Курсовая работа (т)
Розробка інформаційної системи "Бібліотека"
Курсовая работа (т)
Розробка калькулятора для інженерних розрахунків
Курсовая работа (т)
Розробка композиції серії рекламних плакатiв
Курсовая работа (т)
Розробка комп’ютерної гри "Баліста"
Курсовая работа (т)

Предмет: Информационное обеспечение, программирование

Тип работы: Курсовая работа (т)

Новости образования

Российский государственный социальный университет реорганизует сеть своих филиалов
22 Июля 2016 16:26
Более 70 представителей крупных вузов АСЕАН подтвердили участие в форуме во Владивостоке
22 Июля 2016 12:51
Абызов: публикация первичных статсведений снизит бюрократическую нагрузку на школы
22 Июля 2016 11:53
В Чечне свыше 200 школьников сдали ЕГЭ с результатом свыше 90 баллов - министр
22 Июля 2016 05:36
Замглавы Минобрнауки РФ: задача сократить число людей с высшим образованием не стоит
21 Июля 2016 20:19

КОНТАКТНЫЙ EMAIL: [email protected]

Скачать Реферат

ПРОФЕССИОНАЛЬНАЯ ПОМОЩЬ СТУДЕНТАМ