Створення сайту дистанційного навчання

Створення дистанційного навчального курсу за темою "Граматика англійської мови". Особливості використання каскадних таблиць стилю CSS. Функціональні можливості мови розмітки даних HTML. Інструкція для користувача, вимоги до програмного забезпечення.

Рубрика Программирование, компьютеры и кибернетика
Вид курсовая работа
Язык украинский
Дата добавления 06.06.2013
Размер файла 2,2 M

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.

Размещено на http://www.allbest.ru/

Содержание

  • Вступ
  • 1. Аналіз предметної області
  • 1.1 Особливості використання каскадних таблиць стилю CSS
  • 1.2 Функціональні можливості мови розмітки даних HTML
  • 1.3 Особливості JavaScript
  • 2. Розробка та створення сайта дистанційного курсу
  • 2.1 Макет сайта дистанційного курсу за темою: "Граматика англійської мови"
  • 2.2 Функції CSS, які були використані при розробці сайта
  • 2.3 Огляд існуючих сайтів дистанційного навчання
  • 3. Розробка сайта дистанційного курсу за темою "граматика англійської мови"
  • 3.1 Інструкція для користувача
  • 3.2 Вимоги до програмного забезпечення
  • Висновоки
  • Список джерел інформації
  • Додатки

Вступ

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

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

Мета курсової роботи - створення дистанційного навчального курсу за темою "Граматика англійської мови".

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

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

сайт дистанційне навчання програмне

1. Аналіз предметної області

1.1 Особливості використання каскадних таблиць стилю CSS

Каскадні таблиці стилів (англ. Cascading Style Sheets або скорочено CSS) - спеціальна мова, що використовується для відображення сторінок, написаних мовами розмітки даних. Найбільш часто CSS використовують для візуальної презентації сторінок, написаних HTML та XHTML, але формат CSS може застосовуватися до інших видів XML-документів.

Специфікації CSS були створені та розвиваються Консорціумом Всесвітньої мережі. У міру розвитку Web дизайнери почали шукати можливості форматування онлайнових документів. Щоб задовольнити збільшеним вимогам споживачів, виробники браузерів (тоді - Netscape і Microsoft) винайшли нові HTML-теги, такі, наприклад, як <font>, які відрізнялися від оригінальних HTML-тегів тим, що вони визначали зовнішній вигляд, а не структуру.

Це також призвело до того, що оригінальні теги структурування, такі як <table>, стали все більше застосовуватися для дизайну сторінок замість структурування тексту. Багато нових тегів дизайну, такі як <blink>, підтримувалися тільки одним браузером. "Вам необхідний браузер X для перегляду цієї сторінки" - така відмова стала звичайним явищем на web-сайтах.

CSS був створений для виправлення цієї ситуації шляхом надання web-дизайнерам можливостей точного дизайну, підтримуваних всіма браузерами. Одночасно відбувся поділ подання та вмісту документа, що значно спростило роботу [8].

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

CSS (каскадна або блочна верстка) прийшла на заміну табличній верстці веб-сторінок. Головна перевага блочної верстки - розділення змісту сторінки (даних) та їх візуальної презентації.

CSS використовується авторами та відвідувачами веб-сторінок для того щоб визначити кольори, шрифти, верстку та інші аспекти вигляду сторінки. Одна з головних переваг - можливість розділити зміст сторінки (або контент, наповнення, зазвичай HTML, XML або подібна мова розмітки) від вигляду документу (що описується в CSS). Таке розділення може покращити сприйняття та доступність контенту, забезпечити більшу гнучкість та контроль за відображенням контенту в різних умовах, зробити контент більш структурованим та простим, прибрати повтори та ін. CSS також дозволяє адаптувати контент до різних умов відображення (на екрані монітора, мобільного пристрою (КПК), у роздрукованому вигляді, на екрані телевізора, пристроях з підтримкою шрифту Брайля або голосових броузерах та ін.) [7].

Один і той самий HTML або XML документ може бути відображений по-різному в залежності від використаного CSS.

Стилі для відображення сторінки можуть бути:

· Стилі автора (інформація надана автором сторінки):

o зовнішні таблиці стилів (англ. stylesheet), частіше за все окремий файл або файли. css

o внутрішні таблиці стилів, включені як частина документу або блоку

o стилі для окремого елементу

· Стилі користувача

o локальний. css-файл, вказаний користувачем для використання на сторінках і вказаний в налаштуваннях браузера (наприклад Opera)

· Стилі переглядача (браузера)

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

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

Переваги

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

· Різна інформація про стилі для різних типів користувачів: наприклад великий розмір шрифту для користувачів з послабленим зором, стилі для виводу сторінки на принтер, стиль для мобільних пристроїв;

· Сторінки зменшуються в об'ємі та стають більш структурованими, за рахунок того що інформація про стилі відділена від тексту та має певні правила застосування і сторінка побудована з їх урахуванням;

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

· CSS це краща половина HTML. Але, в плані кодування, їх статус різниться: HTML піклується про загальний виведення інформації (її структурі), у той час як CSS виробляє тонке налаштування зовнішнього вигляду (layout).

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

· Крім зміни виду: кольори, типу шрифту і т.п., CSS можна використовувати також для керування настройками сторінки та поданням (поля, спливання, вирівнювання, ширина, висота і т.д.). Регулюючи різні елементи за допомогою CSS, ви можете відображати ваші сторінки елегантно і точно.

· поданням для різних носіїв інформації (екран, друк, і т.д.);

· складна і пророблена техніка дизайну [7].

Синтаксис. CSS має порівняно простий синтаксис і використовує невелику кількість англійських слів для найменування різних складових стилю.

Стилі складаються зі списку правил. Кожне правило містить один або більше селектор (англ. selector) та блок визначення (англ. declaration block). Блок визначення складається із оточеного фігурними дужками списку властивостей. Властивості в списку оформлюються у вигляді назва властивості, двокрапка (:), значення, крапка з комою (;). Приклад:

p {

font-family: Verdana, sans-serif;

}

Селектори та Псевдо-класи. CSS має спеціальні позначення (селектори, від англ. selector) для визначення діапазону застосування правила.

За назвою елементу: наприклад для всіх p або h2;

Контекстний селектор: <p>Текст<strong> Текст </strong> Текст </p>;

Селектор по класу: <p style=”color: red”> Текст</p>

<p style=”color: blue”> Текст</p>

<p class=”red” <p class=” blue”

p. red{color: red; }

p. blue {color: blue; }

Селектор за ідентифікатором (id): p# red{color: red; } p id=”red”> Текст</p>

<div id=”blue”> Текст</p>

Для більш точного визначення стилю можуть використовуватися псевдо-класи (англ. pseudo-classes). Мабуть найбільш відомим є псевдо-клас: hover, що застосовується коли користувач вкаже на елемент, зазвичай наведенням курсору. Стиль визначається для a: hover або #elementid: hover. Інші псевдо-класи, наприклад,: first-line (перша строка тексту),: first-letter (перша літера): visited (посилання, що вже відкривалось) або: before (визначає стиль перед елементом). Спеціальний псевдо-клас: lang (c) буде застосовано до елементів якщо їх мова (англ. language)"c". Підтримка псевдо-класів залежить від браузеру, наприклад Internet Explorer 6 підтримує псевдо-клас: hover лише для посилань.

Селектори можуть поєднуватися і іншим чином для досягнення більшої гнучкості. В наступному прикладі декілька селекторів об'єднуються через кому. Правило встановлює шрифт для HTML-заголовків всіх рівнів.

h1, h2, h3, h4, h5, h6 {

font-family: "Arial", sans-serif;

1.2 Функціональні можливості мови розмітки даних HTML

HTML це скорочення від "HyperText Mark-up Language - мова гіпертекстової розмітки".

· Hyper протилежно linear / порядково. У старі часи - комп'ютерні програми працювали порядково: програма виконувала один рядок, потім переходила до виконання наступного, і т.д. Але HTML працює по-іншому - ви можете перейти куди і коли захочете. Наприклад, не потрібно відвідувати MSN.com до того, як відвідати Htmlbook. at.ua.

· Text - робота з текстом.

· Mark-up - це розмітка, те, що ми робимо з текстом. Розмічаємо текст так само, як це робиться в текстових редакторах: виставляємо заголовки, списки, виділяємо текст жирним шрифтом і т.д.

· Language це мова - HTML. У ньому використовується багато англійських слів [1].

HTML це "рідна мова" браузера (програми перегляду веб-сторінок).

HTML був винайдений в 1990 році вченим, Тімом Бернсом-Лі (Tim Berners-Lee), і призначався для полегшення обміну документами між вченими різних університетів. Проект мав більший успіх, ніж Тім Бернс-Лі міг очікувати. Цим винаходом HTML він заклав основи сучасної мережі Інтернет.

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

HTML це мова, яка дозволяє представляти інформацію (наприклад, наукові дослідження) в Інтернеті. Те, що ми бачимо при перегляді сторінки в Інтернеті, це інтерпретація браузером HTML-тексту. Можна відобразити html код сторінки прямо у вікні браузера. Для цього необхідно перейти до необхідної сторінки, і вибрати у браузері команду Вид-> Перегляд html-коду. Для перегляду в браузері Opera потрібно навести курсор на сторінку, клацнути правою кнопкою миші і вибрати в меню, "Джерело", або натисніть одночасно Ctrl + U. Відкриється нове вікно браузера з html кодом сторінки. У цьому вікні можна не лише переглянути код, але й скопіювати його для використання в якості основи своєї web-сторінки. Створення web-сайту, не обійдеться без HTML. Навіть при наявності для такої програми, як Dreamweaver, знання основ HTML значно спрощує життя, а web-сайт стане набагато цікавішим. Мова HTML не чутливий до регістру букв, тому всі дескриптори можна задавати як великими, так і малими літерами. Браузер буде їх однозначно інтерпретувати в будь-якому написанні [2].

Форматування тексту: вивід на екран тексту, виділеного певним шрифтом або з певними атрибутами. Для форматування тексту потрібно укласти рядок або рядки тексту між парою дескрипторів. Дескриптори або теги (теги) <META> - необов'язкові дескриптори html-сторінки. Вони розташовуються в тілі <HEAD>, після заголовка <TITLE>. Ці дескриптори вміщають опис сторінци, ключові слова, інформацію про автора, команди для роботи та іншу службову інформацію. Іншими словами можна сказати, що це візитна картка сторінки для різноманітних служб Інтернету.

Теги це мітки, які використовуються для вказівки браузеру, як він повинен показувати ваш web-сайт. Всі теги мають однаковий формат: вони починаються знаком "<" і закінчуються знаком sign ">". Зазвичай є два теги - відкриваючий: <html> і закриваючий: </html>. Різниця в тому, що в закриваючому є слеш "/".

Весь вміст, що вміщено між відкриваючими і закриваючими тегами, є вмістом тега. Але, як то кажуть, в кожному правилі є винятки, і в HTML також є теги, які є і відкривають, і закривають. Ці теги не містять тексту, а є мітками, наприклад, перенесення рядка виглядає так: </br>.

HTML - це теги, і нічого крім тегів. Для вивчення HTML потрібно вивчити різні теги.

При складанні документа необхідно враховувати, що браузер ігнорує пробіли між словами та переведення рядків під час форматування тексту, тому він розглядає як абзац тільки той текст, який знаходиться між дескрипторами. Якщо ж потрібно вивести на екран текст з потрібною кількістю пробілів і розривами рядків, необхідно укласти його в дескриптори. Це звичайно використовується для виведення на екран лістингів вихідного тексту програм. При цьому текст буде виведений моноширійним шрифтом. Заголовки різного рівня задаються за допомогою дескрипторів, де h - число від 1 до 6. Посилання є одним з основних елементів мови HTML. Посилання пропонують користувачу швидкий і зручний засіб для переміщення в те чи інше місце в документі або навіть в інший документ. Наприклад, замість того, щоб перегортати довгий Web-документ у пошуках потрібного фрагмента, можна за допомогою простого клацання миші миттєво переміститися на потрібне місце (якщо, звичайно, для цього передбачена відповідна посилання). Якщо є два різних документи, то для того, щоб забезпечити доступ з одного документа в інший, не обов'язково їх поєднувати разом, достатньо в одному документі зробити посилання на інший і все буде зводитися до простого клацанням мишки. Для вставки ілюстрацій в документ використовується дескриптор:

атрибут задає ім'я файлу картинки. Файл може вказувати на як локальний файл, так і на віддалений файл, для чого слід вказати відповідний URL. Файл може являти собою статичне зображення і мати графічний формат, який розуміється оглядачем, або динамічне зображення, представлене в форматі GIF89A. В останньому випадку у вікні броузера файл буде виведений як анімація.

Атрибут ALT вказує на текст, який буде виводитися у вікні броузера замість зображення, якщо, наприклад, броузер користувача не підтримує графіком або ж відключена функція завантаження зображень. Цей атрибут не є обов'язковим, однак його використання вважається гарним стилем при складанні Web-документів.

Часто при підготовці сторінок з використанням графіки трапляється, що бажаний розмір зображення не збігається з дійсним. Наприклад, необхідно помістити картинку на певній площі з певним розміром. Для цього потрібно використовувати атрибути WIDTH і HEIGHT, які задають необхідні розміри зображення в ширину і висоту відповідно. Велика кількість графіки в документі, з одного боку, покращує її загальний вигляд, з іншого боку, істотно збільшує время його завантаження. Щоб знайти компроміс між швидкістю завантаження документа і його наочністю, дизайнери Web-сторінок часто вдаються до такого прийому: зображення розміщують на сторінці в меншому форматі і роблять його посиланням на себе. Якщо клацнути мишкою на такому зображенні, то браузер завантажить його і відобразить в оригінальних розмірах [10].

Цікавою можливістю є "обтікання" зображення текстом. Це дуже популярний спосіб оформлення Web-сторінок. При цьому на екрані картинка оточена текстом, наприклад, зліва і знизу. "Обтікання" тексту досягається використанням атрибута ALIGN, який має такі параметри, як:

LEFT - текст буде охоплювати зображення зліва-знизу.

RIGHT - текст обхоплює зображення праворуч-знизу TOP - зображення оточене текстом справа-зверху BOTTOM - зображення оточене текстом справа-знизу MIDDLE - зображення оточене текстом справа-посередині.

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

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

Фрейми. Одними з останніх нововведень в офіційній версії мови HTML є так звані фрейми. При використанні фреймів вікно браузера розбивається на кілька підвікон, в кожному з яких можна відображати будь-які Web-документи, здійснювати їх прокрутку незалежно від інших вікон. Добре продумана структура фреймів може істотно полегшити навігацію по документах і поліпшити сприйняття інформації. Як приклад можна навести електронний варіант книги чи журналу, коли в одному вікні можна вибирати розділи-посилання змісту, а в сусідньому вікні переглядати інформацію, що відноситься безпосередньо до конкретного розділу зі змісту.

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

Мова HTML є основним засобом організації даних у World Wide Web і поки що не існує інших мов, які служили б їй повною альтернативою.

1.3 Особливості JavaScript

JavaScript - назва реалізації стандарту мови програмування ECMAScript компанії Netscape, базується на принципах прототипного програмування. Найпоширеніше і найвідоміше застосування мови - написання сценаріїв для веб-сторінок, але, також, використовується для впровадження сценаріїв керування об'єктами вбудованими в інші програми. JavaScript - скриптова мова, призначена для створення інтерактивних веб-сторінок. JavaScript не потрібно компілювати, вона підключається до html-сторінки і працює "як є".

Незважаючи на схожість назв, JavaScript та мова програмування Java мають дуже мало спільного. Права на назву Java належать компанії Sun Microsystems.

Розроблена в компанії Netscape. На сьогоднішній день підтримується більшістю браузерів. Текст програми включається безпосередньо в HTML-документ і інтерпретується самим браузером. Застосовується в основному для часткової автоматизації обробки і маніпуляції даними, які використовує сторінка.

Станом на 2006 рік, останній стандарт мови - JavaScript 1. 7. Якщо спрощено, то ECMA-262 є стандартизованим варіантом мови JavaScript. Стандартом ECMA-357 визначено E4X, розширення мови для роботи з XML.

JavaScript має низку властивостей об'єктно-орієнтованої мови, але завдяки концепції прототипів підтримка об'єктів в ній відрізняється від традиційних мов ООП. Крім того, JavaScript має ряд властивостей, властивих функціональним мовам, - функції як об'єкти першого рівня, об'єкти як списки, каррінг (currying), анонімні функції, замикання (closures) - що додає мові додаткову гнучкість.

JavaScript має C-подібний синтаксис, але в порівнянні з мовою Сі має такі корінні відмінності:

· об'єкти, з можливістю інтроспекції і динамічної зміни типу через механізм прототипів

· функції як об'єкти першого класу

· обробка винятків

· автоматичне приведення типів

· автоматичне прибирання сміття

· анонімні функції

JavaScript містить декілька вбудованих об'єктів: Global, Object, Error, Function, Array, String, Boolean, Number, Math, Date, RegExp. Крім того, JavaScript містить набір вбудованих операцій, які, строго кажучи, не обов'язково є функціями або методами, а також набір вбудованих операторів, що управляють логікою виконання програм. Синтаксис JavaScript в основному відповідає синтаксису мови Java (тобто, зрештою, успадкований від C), але спрощений порівняно з ним, щоб зробити мову сценаріїв легкою для вивчення. Так, приміром, декларація змінної не містить її типу, властивості також не мають типів, а декларація функції може стояти в тексті програми після неї [11].

JavaScript може змінювати сторінку, писати на ній текст, додавати і видаляти теги, міняти стилі елементів, реагувати на події: скрипт може чекати, коли що-небудь станеться (клік миші, закінчення завантаження сторінки) і реагувати на це виконанням функції, виконувати запити до сервера і завантажувати дані без перезавантаження сторінки. Це інколи називають "AJAX", встановлювати і прочитувати cookie, валідувати дані, виводити повідомлення і багато що інше.

Перевага JavaScript полягають всього в декількох пунктах:

1) повна інтеграція з браузером;

2) прості речі робляться просто;

3) підтримується майже скрізь.

Цей компот переваг не можна знайти ні в одній з інших технологій. Наприклад, такі технології як ACTIVEX, Vbscript, XUL - підтримуються не в кожному браузері. Такі технології як Flash, Silverlight, Java - не повністю інтегровані з браузером, працюють в своєму оточенні. Тому Javascript - унікальна технологія, і такою залишиться. Зараз вона розвивається, створюється мова Javascript 2 і новий інтерпретатор [5].

Приклад оголошення і використання класу в JavaScript (клас є одночасно функцією, оскільки функції - це об'єкти першого рівня):

function MyClass ()

{

this. myValue1 = 1;

this. myValue2 = 2;

}

var mc = new MyClass ();

mc. myValue1 = mc. myValue2 * 2;

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

При використанні в рамках технології DHTML JavaScript код включається в HTML-код сторінки і виконується інтерпретатором, вбудованим в браузер. Код JavaScript вставляється в теги <script></script> з обов'язковим по специфікації HTML 4. 01 атрибутом type="text/javascript", хоча в більшості браузерів мова сценаріїв за умовчанням саме JavaScript [2].

При розробці великих і нетривіальних веб-застосунків з використанням JavaScript, критично важливим є доступ до інструментів зневадження. Оскільки браузери від різних виробників дещо відрізняються у поведінці JavaScript і реалізації Об'єктної Моделі Документа, треба мати в руках зневаджувач для кожного браузера, якщо веб-застосування орієнтовано на нього.

На даний час Internet Explorer, Firefox, Opera, Google Chrome та Safari мають зневаджувачі для себе. Internet Explorer має три звеваджувача для себе: Microsoft Visual Studio є найпотужнішим з цих трьох, слідом йде Microsoft Script Editor (компонента Microsoft Office), і нарешті існує безплатний Microsoft Script Debugger з базовими функціями. Веб-застосування для Firefox допоможе привести до розуму додаток Firebug (зручно вбудований безпосередньо в браузер), або давніший відладчик Venkman, котрий також працює з браузером Mozilla. Drosera - це зневаджувач з WebKit engine, що супроводжує Apple Safari.

Також існують кілька інструментів, як вільних, наприклад JSLint [5] , інструмент перевірки якості коду, що сканує JavaScript програму, шукаючи проблеми коду, так і комерційних продуктів типу інструменту з назвою JavaScript Debugger. Оскільки JavaScript є інтерпретатором, без строгої типізації, і може виконуватися в різних середовищах, кожне зі своїми власними особливостями сумісності, програміст має бути дуже уважним, і повинен перевіряти, що його код виконується як очікується в широкому переліку можливих конфігурацій. Дуже часто трапляються випадки, коли скрипт, що чудово працює в одному середовищі, видає некоректні результати в іншому.

Кожен блок сценарію інтерпретатор розбирає окремо. На веб-сторінках, коли треба комбінувати блоки JavaScript та HTML, синтаксичні помилки найти легше, якщо тримати функції сценарію в окремому блоці коду, або (ще краще) використовувати багато малих пов'язаних. js файлів. В такий спосіб синтаксична помилка не спричинятиме "падіння" цілої сторінки, і можна надати допомогу, елегантно вийшовши зі сторінки.

2. Розробка та створення сайта дистанційного курсу

2.1 Макет сайта дистанційного курсу за темою: "Граматика англійської мови"

Сайт має п'ять блоків: заголовок, лівий та правий блок, центральна (головна) частина і нижній горизонтальний блок.

Рисунок 2.1 Головна сторінка сайта

Рисунок 2.2 Головна сторінка сайта

Ширина заголовку 950px, висота 100px, шрифт курсивний Verdana 12pt, межа 1см. Лівий блок маэ 148px ширини, висота 650px. Ліва межа в 2 px, пунктиром, жовтого кольору. Правий блок також оформлений шириною 148px, висотою 650px, права межа в 2 px, пунктиром, жовтого кольору. Центральна частина оформлена шириною 600px, відступ від межі 20px, абзац 2em. Нижній блок має ширину 950px, висоту 70px. Чотири перших блоки мають резинову верстку (float).

На головній сторінці (index.html) у правому блоці розміщений календар, написаній мовою JavaScript.

Меню на лівому блоці на перших п'яти сторінках і меню у правому блоці на дев'яти сторінках лекцій, завдань та контрольних робіт створене за допомогою псевдо класів: link, active, visited та hover. В результаті посилання в меню при наведенні змінює колір на червоний, жирний та збільшується в розмірі до 25 pt.

На головній сторінці контрольних робіт (4.html), щоб створити буквицю, було використано властивість first-letter зі значеннями кольору, розміру та стилю шрифта (color, font, font-size). В результаті перша літера голубого кольору, шрифтом lange Verdana, напівжирна, та розміром 30px.

У завданнях контрольних робіт на посиланнях на сторінки Past Simple, Present Simple та Future Simple встановлена допоміжна функція для студента (Підказочка). Під час написання контрольної роботи по певній темі, студент може звернутися до підказки, яка знаходиться у лівому верхньому кутку сайта та обрати потрібну тему та перейти через посилання до лекцій по потрібній тематиці. Та на кожній сторінці лекцій по трём темам (Past Simple, Present Simple та Future Simple) вбудована кнопка Назад (створені за допомогою форм), для зручності повертатися назад до контрольної роботи після перегляду лекції. Підказка написана мовою сценарію JavaScript.

Також на кожній сторінці контрольних робіт вбудована таблиця зв'язку із тьютором або кнопка Відправити для відсилання результатів контрольних робіт тьютору. На сайті розташовані три фотографії за допомогою <img src="1. jpeg" >.

2.2 Функції CSS, які були використані при розробці сайта

Сайт створений за домогою блокової моделі CSS. В CSS прописані чотири блоки: заголовок (header), лівий (left_bl) та правий (right_bl) вертикальні блоки, центральна (головна) частина (center_bl) та нижній горизонтальний блок (footer).

Для підключення CSS до HTML прописуємо: <link rel="stylesheet" type="text/css" href="style. css">;

Кожна веб-сторінка та кожний блок має свої функції прописані в CSS. Розглянемо головну сторінку (index.html) заголовок (header):

Width - встановлює ширину блоку;

Height - висоту блоку;

Font - стиль шрифта;

Padding - дозволяє відділити основний уміст блоку від межі;

Ліва блокова частина (left_bl):

Width - встановлює ширину блоку;

Height - висоту блоку;

Font - стиль шрифта;

Float - визначає чи буде блок плаваючим чи ні, і в яку сторону він буде переміщатися;

border-right - встановлює межу з права;

margin-bottomє - поле знизу;

color - встановлює колір елементу;

text-decoration - задає параметри слів, рядків та їх взаємного роз положення;

background - встановлює фонове зображення;

Права блокова частина (right_bl):

Width - встановлює ширину блоку;

Hover - посилання, на якому наведена мишка.

Height - висоту блоку;

Float - визначає чи буде блок плаваючим чи ні, і в яку сторону він буде переміщатися;

margin - встановлює ширину полей (%);

border-left - встановлює межу з ліва;

margin-bottomє - поле знизу;

Центральна частина (center_bl):

Width - встановлює ширину блоку;

Float - визначає чи буде блок плаваючим чи ні, і в яку сторону він буде переміщатися;

Padding - дозволяє відділити основний уміст блоку від межі;

text-indent - встановлює відступ червоного рядка для абзаців та заголовків. Розмір довжини відступу вказується в одиницях довжини або у відсотках;

Overflow - керує переповненням блоку;

Line-height - дозволяє встановити відстань між рядками тексту, тобто відстань між двома базовими лініями сусідніх рядків;

Img - дає можливість загрузити графічний файл;

Використовуємо чотири псевдо класи, які дозволяють працювати із посиланнями:

Link - звичайне просте посилання;

Active - активне посилання;

Visited - відвідане посилання;

Hover - посилання, на якому наведена мишка.

Font-size - вказує розмір штифта;

Font-family - встановлює гарнітуру штифта;

Border - встановлює межу;

A href - встановлює зв'язок між головним документом та посиланням;

Календар на головній сторінці прописаний мовою JavaScript.

Cторінкa Реєстрації (1.html):

Width - встановлює ширину блоку;

Height - висоту блоку;

Font - стиль шрифта;

Padding - дозволяє відділити основний уміст блоку від межі;

Сolor - встановлює колір елементу;

Background - встановлює фонове зображення;

Link - звичайне просте посилання;

Active - активне посилання;

Visited - відвідане посилання;

Hover - посилання, на якому наведена мишка.

margin - поле;

Таблиця Реєстрація та кнопка Назад створені за допомогою форм (<Form></Form>)

Cторінка Лекцій (2.html):

Width - встановлює ширину блоку;

Height - висоту блоку;

Font - стиль шрифта;

Padding - дозволяє відділити основний уміст блоку від межі;

Сolor - встановлює колір елементу;

Background - встановлює фонове зображення;

A href - встановлює зв'язок між головним документом та посиланням;

Img - дає можливість загрузити графічний файл;

text-indent - встановлює відступ червоного рядка для абзаців та заголовків. Розмір довжини відступу вказується в одиницях довжини або у відсотках;

Overflow - керує переповненням блоку;

Line-height - дозволяє встановити відстань між рядками тексту, тобто відстань між двома базовими лініями сусідніх рядків;

Link - звичайне просте посилання;

Active - активне посилання;

Visited - відвідане посилання;

Hover - посилання, на якому наведена мишка;

margin - поле;

STYLE - створює внутрішній лист стилю.

Cторінка Завдань (3.html):

Width - встановлює ширину блоку;

Height - висоту блоку;

Font - стиль шрифта;

Padding - дозволяє відділити основний уміст блоку від межі;

Сolor - встановлює колір елементу;

Background - встановлює фонове зображення;

A href - встановлює зв'язок між головним документом та посиланням;

Img - дає можливість загрузити графічний файл;

text-indent - встановлює відступ червоного рядка для абзаців та заголовків. Розмір довжини відступу вказується в одиницях довжини або у відсотках;

Overflow - керує переповненням блоку;

Line-height - дозволяє встановити відстань між рядками тексту, тобто відстань між двома базовими лініями сусідніх рядків;

Link - звичайне просте посилання;

Active - активне посилання;

Visited - відвідане посилання;

Hover - посилання, на якому наведена мишка.

Cторінка Контрольних робіт (4.html):

First-letter - цей псевдо елемент дозволяє створювати буквицю, тобто спеціальне оформлення першої літери;

Width - встановлює ширину блоку;

Height - висоту блоку;

Font - стиль шрифта;

Padding - дозволяє відділити основний уміст блоку від межі;

Сolor - встановлює колір елементу;

Background - встановлює фонове зображення;

A href - встановлює зв'язок між головним документом та посиланням;

Img - дає можливість загрузити графічний файл;

text-indent - встановлює відступ червоного рядка для абзаців та заголовків. Розмір довжини відступу вказується в одиницях довжини або у відсотках;

Overflow - керує переповненням блоку;

Line-height - дозволяє встановити відстань між рядками тексту, тобто відстань між двома базовими лініями сусідніх рядків;

margin-bottomє - поле знизу;

text-decoration - задає параметри слів, рядків та їх взаємного роз положення;

Link - звичайне просте посилання;

Active - активне посилання;

Visited - відвідане посилання;

Hover - посилання, на якому наведена мишка.

Cторінка Зв'язок із тьютором (5.html):

Link - звичайне просте посилання;

Active - активне посилання;

Visited - відвідане посилання;

Hover - посилання, на якому наведена мишка.

Width - встановлює ширину блоку;

Height - висоту блоку;

Font - стиль шрифта;

Padding - дозволяє відділити основний уміст блоку від межі;

Сolor - встановлює колір елементу;

Background - встановлює фонове зображення;

A href - встановлює зв'язок між головним документом та посиланням;

margin - поле;

Таблицю зв'язку там кнопки Відправити та Стерти створені за допомогою форм (<Form></Form>) [7].

2.3 Огляд існуючих сайтів дистанційного навчання

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

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

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

Можливість оперативної зміни інформації через мережу Інтернет зі свого робочого місця.

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

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

Можливість оперативної зміни інформації через мережу Інтернет зі свого робочого місця.

Ефективність будь-якого виду навчання на відстані залежить від чотирьох складових:

1) ефективної взаємодії викладача і учня, незважаючи на те, що вони фізично розділені відстанню;

2) використовуваних при цьому педагогічних технологій;

3) ефективності розроблених методичних матеріалів і способів їх доставки;

4) ефективності зворотного зв'язку [3].

Існує дуже багато сайтів дистанційного навчання, особливо по вивченню англійської мови. В основному на сайтах можна знайти будь-який розділ, будь-яку тему: граматика, лексика, фонетика, вимова, говоріння і т.д. Наприклад на рисунку 2. 1 зображений сайт "Англійська мова" на якому можна знайти теми по лексиці, морфології, синтаксису, словотворення, також можна знайти таблицю граматики, тексти на переклад, он-лайн тести, та форум для спілкування та допомоги при навчанні. Також тут присутні каталог репетиторів та англійських шкіл. Сайт має офіційну групу в соціальній мережі "В контакті" та блок останніх змін та новин на сайті [6].

Рисунок 2.1 Сайт "Англійська мова"

На рисунку 2. 2 зображений сайт "Навчання в Центрі англійської мови", на якому можна знайти різні методики викладанні, викладачі, різні програми, он-лайн вікторини та он-лайн тести, рєстрації, розцінки за семестр. Також на цоьму сайті користувач може обрати мову на якій буде проводитись навчання: російську, українську чи англійську.

Рисунок 2.2 Сайт "Навчання в Центрі англійської мови"

На рисунку 2. 3 розміщений сайт під назвою: "Learn English". Сайт створений для студентів які вже мають базові знання та навички, тому що сайт створений англійською мовою та навчання проводиться також англійською мовою. Тут можна отримати знання теоретичні та практичні граматики та вимови. Також вбудоване мультимедійне прослухування аудіювання, чат та скайп для спілкування з носіями мови. Користувачу надається можливість проглядати архів газет, дивитися мультфільми, читати статті, новини, грати в ігри англійською, дізнатися більше про британську культуру. Щодо перевірки знань: кожного дня можна тренувати свій словниковий запас та писати диктанти.

Рисунок 2.3 Сайт вивчення англійської мови "Learn English"

На рисунку 2.4 зображений сайт "British council". Сайт створений для студентів, які вже володіють англійською мовою, тому що навчання проводиться англійською мовою. Ціль сайта - удосконалення мови. Сайт має дві категорії: Вивчення англійської мови та Навчання дітей англійської мови. Зайшовши на сайт потрібно одразу обрати необхідну категорію. В горизонтальному меню можна обрати розділ навчання: аудіювання та відео-ролики; граматика та лексика; ігри та веселощі; бізнес та робота; вимова, змагання та спілкування. Також є великий перелік тем: видатні люди, поезія, проза, історія, спорт, наука та новітні технології, культура й звичаї, навколо світу та багато інших тем для опрацювання.

Рисунок 2.4 Сайт "British council"

3. Розробка сайта дистанційного курсу за темою "граматика англійської мови"

3.1 Інструкція для користувача

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

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

Це можна зробити таким чином: за допомогою навігаційного меню зліва слід клацнути ссилку "Лекції". Ознайомившись із вступною інформацією, необхідно обрати тему в правому навігаційному меню. Опрацювавши тему слід переходити до практики, повернувшись за допомогою кнопки Назад, клацнувши ссилку Завдання в лівому навігаційному меню. На веб-сторінці Завданя перейдіть до практичних завдань обравши з права тему, яка відвідає опрацьованій лекціі. Відповіді вправ потрібно відіслати тьютору перейшовши на сторінку "Зв'язок із тьютором" скориставшись меню зліва. Після відправки відповідей результати та оцінка прийде Вам на електронну адресу протягом трьох днів. Через кнопку "Назад" можна повернутися на минулу сторінку або розпочинати контрольну роботу. Через ліве навігаційне меню натиснувши "Контрольна робота" Ви потрапите на веб-сторінку з контрольними завданнями. Ознайомившись із вступною інформацією слід обрати відповідну тему і перейти через посилання. Відповіді необхідно відіслати тьютору через таблицю зв'язку із тьютором, яка вбудована для зручності в кінці кожної сторінки контрольних робіт або через головне меню. На кожній сторінці контрольних робіт в лівому верхньому кутку також можна побачити та скористатися "Підказочкою", обравши тему, яка відповідає темі контрольної роботи, потрібну перейти клацнувши на ній мишкою. Ви потрапите до сторінок "Лекцій" на обрану Вами тему. Опрацювавши її за допомогою кнопки "Назад" можна повернутися назад до контрольної роботи і завершивши, обов'язково відіслати відповіді тьютору. Закінчивши і остаточно опрацювавши тему можна переходити до наступної. Вказівки та інструкції ті ж самі. Вивчати одночасно декілька тем не рекомендується.

3.2 Вимоги до програмного забезпечення

Программне забезпемчення (программні замсоби) (ПЗ; англ. software) - сукупність програм системи обробки інформації і програмних документів, необхідних для експлуатації цих програм.

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

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

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

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

Прикладне програмне забезпечення, призначено для розв'язання задач користувача. Наприклад: редактори тексту, електронні таблиці, бази даних, тощо.

Програмне забезпечення можна розділити на корисне і шкідливе. Корисне програмне забезпечення створюється для виконання завдань, що відповідають побажанням користувача комп'ютера. Основна мета шкідливого програмного забезпечення - виконувати операції, які є небажаними для користувача, часто із завдаванням прихованої чи явної шкоди. Прикладом шкідливого програмного забезпечення є комп'ютерні віруси [4].

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

Розробка вимог до програмної системи може бути розділена на декілька етапів:

· Знаходження вимог (збір, визначення потреб заінтересованих осіб та систем).

· Аналіз вимог (перевірка цілісності та закінченості).

· Специфікація (документування вимог).

· Тестування вимог.

Види вимог за характером

· Функціональний характер - вимоги до поведінки системи

o Бізнес-вимоги

o Вимоги користувача

o Функціональні вимоги

· Нефункціональний характер - вимоги до характеру поведінки системи

o Бізнес-правила - визначають обмеження, о витікають з предметної області.

o Системні вимоги - вимоги до програмних інтерфейсів, надійності, обладнанню.

o Атрибути якості

o Зовнішні системи та інтерфейси

o Обмеження

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

Для цього створюються наступні документи:

· Бачення (Vision)

· Специфікація вимог до програмного забезпечення (англ. Software Requirements Specification, SRS)

Системні вимоги та програмне забезпечення. Отримати доступ до сайту дистанційного навчання дуже просто. Все, що потрібно: компґютер, модем або мережева карта та доступ до Інтернету через будь-якого провайдера послуг Інтернет [1].

Компґютер повинен відповідати наступним системним вимогам:

1) Процесор: 1ГГц або вище

2) Оперативна памґять (RAM): щонайменьше 256Mb, рекомендовано 512Mb

3) Операційна система: Microsoft Windows XP/Vista/Windows 7

4) Браузер: Firefox/3. 6. 24; Internet Explorer версії 6. 0, 7. 0, 8. 0.

Висновоки

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

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

Створення дистанційного курсу за темою "Граматика англійської мови" у рамках цієї курсової роботи - ще один крок у розвитку дистанційного навчання. Постійний розвиток засобів створення мультимедійних додатків дозволяє створювати з кожним днем більш зручні і функціональні форми дистанційного навчання. Для розробки даного дистанційного курсу було використано мову розмітки гіпертексту HTML, мову сценарію JavaScript та CSS технології.

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

Список джерел інформації

1 Вікіпедія: Вільна енциклопедія: http://uk. wikipedia.org

2 Дригалкін В.html в примерах v1. 1 //, 2002

3 Канаво В.А. Методичні рекомендації щодо створення курсу дистанційного навчання через Інтернет [Електронний ресурс] / В.А. Канава. Режим доступу: http://www.curator.ru/method.html

4 Фигурнов В.Э. IBM PC для пользователя. Краткий курс. Изд. 7-е. М.: ИНФРА-М, 1997, 432 с.

5 Гудман Д. JAVA SCRIPT Біблія користувача. - Москва: Діалектика, 2006.

6 http://www.englishnotes.ru

7 http://www.osvita.org.ua

8 http://css. manual.ru

9 http://www.native-english.ru

10 http://on-line-teaching.com

11 http://javascript.ru

Додатки

Додаток А

Таблиця стилів CSS розробленого дистанційного курсу

body{background-image: url (flag. jpg);

font-family: Verdana, sans-serif; text-decoration: none;

text-align: justify; line-height: 155%;

}

#block {width: 950px; margin: 0 auto;

background-color: braun}

. header {width: 950px; height: 100px; font: obligue 12pt Verdana, sans-serif;

padding: 1cm; color: mediumslateblue}

. left_bl {

width: 148px;

height: 650px;

float: left;

border-right: 2px dashed yellow;

margin-bottom: - 15px

}

A: link, a: active, a: visited{

color: yellow;

font: bold 0. 8em Arial, sans-serif;

text-decoration: none; }

a: hover

{

color: red;

font: bold 25pt Arial, sans-serif;

}

. bbb: first-letter{color: mediumslateblue; font: bold lange Verdana, sans-serif; font-size: 30px}

. ccc{padding: 30px; }

. center_bl {width: 600px; float: left; text-indent: 2em; padding: 20px; overflow: auto; text-align: justify}

. rrr{text-align: center; padding: 0px; margin: 0px; text-indent: 0px}

. xxx{text-indent: 2em}

. fff{text-align: center}

. right_bl {width: 148px; height: 650px;

float: left; border-left: 2px dashed yellow;

margin-bottom: - 15px

}

. footer {width: 950px; height: 70px; text-align: center;

clear: both }

Додаток Б

Таблиця стилів CSS розробленого дистанційного курсу

<html>

<head>

<title>Мой сайт/главная</title>

<link rel="stylesheet" type="text/css" href="style. css">

</head>

<body>

<div id="block">

<div class="header><h1 align="center" >Дистанционный курс грамматики английского языка</h1></div>

<div class="left_bl"><p align="center">Меню</p>

<center><a href="1.html">Регистрация</a></center><br>

<center><a href="2.html"> Лекции</a></center><br>


Подобные документы

Работы в архивах красиво оформлены согласно требованиям ВУЗов и содержат рисунки, диаграммы, формулы и т.д.
PPT, PPTX и PDF-файлы представлены только в архивах.
Рекомендуем скачать работу.