Реферат: Програма курсу за вибором "основи веб-дизайну" для основної школи

, ;

…;

, , ;

, , , ;

, ,

а також основних атрибутів цих тегів.

Застосовує всі вказані вище теги для опису структури веб-сторінок і форматування їх елементів.

Пояснює правила коректного вкладення тегів.

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

Знає принцип означення кольору в мові HTML.

Задає фоновий колір веб-сторінки.

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

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

Застосовує тег
для виведення наперед відформатованого тексту.

Створює на веб-сторінках однорівневі марковані й нумеровані списки.

Використовує внутрішні, зовнішні, змішані посилання, а також посилання на файли й адреси електронної пошти.

Створює веб-сайт з кількох сторінок, що зв’язані текстовими гіперпосиланнями.

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

Вміє створювати таблиці із об’єднаними клітинками.

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

Створює веб-сайт, що складається з веб-сторінок, поділених на кілька (до п’яти) фреймів.

Використовує посилання у сторінках, поділених на фрейми.

Вміє додавати теги HTML до сторінок, створених на безкоштовному сервері.

Вміє створювати прості веб-сторінки засобами мови HTML і текстового редактора.




^ 3. Графіка, аудіо- та відеоінформація на веб-сторінках (4 год.)

Формати зображень, що використовуються в Інтернеті, їхні особливості.

Розміщення й вирівнювання зображень на веб-сторінках.

Зображення й карти посилань.

Створення й розміщення на сайтах gif-анімації.

Розміщення на веб-сторінках аудіо-файлів і настроювання параметрів їх програвання.

Формати відеофайлів, їхні особливості.

Вставляння відеофайлів і настроювання параметрів їхнього відтворення.

Відтворення аудіо- та відеофайлів в онлайновому режимі.


Практична робота №6. Розміщення на веб-сторінці графічних об’єктів.


Учень

Описує основні характеристики та призначення графічних форматів JPEG, GIF, PNG.

Імпортує зображення у веб-сторінки за допомогою тегу , використовує такі його атрибути як SRC, WIDTH, HEIGTH, TITLE, ALIGN, ALT, LOWSRC, VSPACE, HSPACE.

Вміє вирівнювати зображення відносно тексту довкола.

Використовує зображення як фон і як посилання.

Створює карти посилань.

Створює анімовані зображення у gif-файлах та імпортує їх у веб-сторінки.

Називає формати аудіо- та відеофайлів, що найчастіше використовуються в Інтернеті.

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

Створює посилання на аудіо- та відеоресурси й відтворює їх в онлайновому режимі.

Пояснює обмеження, пов’язані з пропускною здатністю інтернет-з’єднання та допустимими розмірами аудіо- та відео файлів.

^ 4. Графічний редактор веб-сайтів (6 год.)


Інтерфейс програми. Режими перегляду веб-документа.

Створення сайту за допомогою майстра.

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

Структурування веб-сторінок та сайтів: таблиці та фрейми.

Керування графікою на веб-сторінках.

Додавання до веб-сторінок мультимедійного вмісту.


Практична робота №7. Розробка сайту в середовищі графічного редактора сайтів.



Учень

Запускає на виконання веб-редактор, відкриває й зберігає проекти веб-сайтів, завершує роботу з редактором.

Створює сайти за допомогою майстра.

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

Застосовує шаблони для створення сайтів й розробляє власні шаблони.

У візуальному режимі форматує веб-сторінки та їхні елементи.

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

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

Створює гіперпосилання на основі текстових фрагментів, а також на основі зображень.

Розробляє в середовищі веб-редактора сайти, що складаються з кількох веб-сторінок, зв’язаних посиланнями.

Розробляє в середовищі веб-редактора сайти, сторінки яких складаються з кількох фреймів.

^ 5. Каскадні аркуші стилів і динамічні веб-сайти (4 год.)

Поняття про каскадні аркуші стилів.

Означення й застосування стилів, зв’язування аркушів стилів з гіпертекстовими документами.

Поняття про об’єктну модель документа DOM і мову DHTML.

Поняття про події та обробку подій, що підтримується мовою DHTML.

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

Поняття про мови веб-скриптів та спосіб використання скриптів у гіпертекстових документах.

Автоматичне генерування веб-скриптів засобами графічного редактора веб-сторінок, обробка форм.


Практична робота №8. Створення динамічних елементів на веб-сторінках.


Практична робота №9. Обробка форм за допомогою веб-скриптів.


Учень

Пояснює поняття стилю й аркушу стилю.

Описує принцип зв’язування аркушів стилів з гіпертекстовими документами й застосування стилів до їхніх елементів.

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

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

Називає 8–10 об’єктів DOM: window, screen, frames, location тощо, а також їхні основні властивості.

Описує поняття події та називає близько 10 основних подій об’єктів.

Програмує динамічне змінення значень атрибутів HTML-тегів.

Пояснює призначення мови JavaScript або VB-Script, спосіб використання веб-скриптів у гіпертекстових документах, призначення контейнерів
^ 6. Хостинг і популяризація сайтів (2 год.)

Вибір домена й реєстрація у провайдреа.

Дизайн URL-адреси.

Створення FTP-з’єднання й вивантаження файлів на віддалений сервер.

Публікування сайту на SharePoint-порталі.

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


Практична робота №10. Публікування веб-сайту та його реєстрація в пошуковій системі.

Учень

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

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

Описує процес отримання безкоштовного й платного хостингу.

Описує принцип керування вмістом віддаленого веб-сайту.

Встановлює FTP-з’єднання засобами графічного редактора веб-сайтів.

Керує вмістом сайту, розміщеного на віддаленому сервері, через FTP-доступ.

Описує призначення й принцип функціонування SharePoint-порталів.

Пояснює поняття банера й банерної мережі.

Пояснює принцип дії пошукових систем, дає означення понять індексації та релевантності.

Вміє реєструвати веб-сайти в пошукових системах.

Використовує тег та його атрибути NAME і CONTENT з метою керування індексацією й релевантністю сторінок у пошукових системах.

Називає близько 10 популярних пошукових систем, знає адреси 3–4 пошукових систем.

Описує такі способи популяризації сайту, як обмін посиланнями й платна реклама.

^ 7. Дизайн веб-сайтів (8 год.)

Типи сайтів, їхні особливості.

Планування веб-сайту.

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

Дизайн кольору, форми, текстури, шрифтів.

Поняття про єдність стилю веб-сторінки, баланс, контраст.

Дизайн інформаційного наповнення сайту: створення, розміщення й настроювання параметрів текстових блоків, формування заголовків.

Дизайн структури сайту: принципи розподілу вмісту за сторінками, організація навігації сайтом, різновиди веб-сторінок (головна, тематична, сторінка-зміст тощо) та особливості їх дизайну;

Типові помилки дизайнерів-початківців.


Практична робота №11. Оформлення сайту.

Учень

Пояснює особливості дизайну особистих, некомерційних, комерційних, рекламних та інших сайтів.

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

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

Описує кольорові системи RGB, HSV, CMYK, особливості відображення кольорів на екрані монітора.

Наводить приклади вдалих і невдалих сполучень кольорів. Вміє добирати вдалі кольорові співвідношення тексту й фону, об’єкту й фону, сусідніх об’єктів.

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

Описує будову геометричних, піксельних, фотографічних, предметних текстур та вміє застосовувати ті чи інші текстури там, де це доречно.

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

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

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

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

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

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

Називає 10–15 найтиповіших помилок дизайнерів-початківців і вміє уникати їх.





Додаток 1

Критерії оцінювання навчальних досягнень учнів з курсу за вибором «Основи веб-дизайну»


^ Рівні навчальних досягнень

Бали

Критерії оцінювання рівня навчальних досягнень учнів

І. Початковий

1

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

2

Учень має початкові знання про структуру гіпертекстового документа й мову HTML. Пояснює особливості дизайну особистих, некомерційних, комерційних, рекламних та інших сайтів.

3

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

Дає означення тегу й атрибуту тегу. Класифікує теги за призначенням.

Описує основні характеристики та призначення графічних форматів JPEG, GIF, PNG.

Запускає на виконання веб-редактор, відкриває й зберігає проекти веб-сайтів, завершує роботу з редактором.

ІІ. Середній

4

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

Створює сайти за допомогою майстра у середовищі веб-редактора.

Описує процес отримання безкоштовного й платного хостингу.

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

5

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

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

Описує принцип керування вмістом віддаленого веб-сайту й основні способи популяризації сайтів.

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

6

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

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

Імпортує зображення у веб-сторінки за допомогою тегу , використовує його основні атрибути.

ІІІ. Достатній

7

Учень створює на безкоштовному сервері й адмініструє форуми й чати.

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

Створює анімовані зображення у gif-файлах та імпортує їх у веб-сторінки.

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

8

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

Вміє додавати теги HTML до сторінок, створених на безкоштовному сервері.

Зв’язує веб-сторінки з аудіо- та відеофайлами. Створює посилання на аудіо- та відеоресурси й відтворює їх в онлайновому режимі.

Пояснює поняття стилю й аркушу стилю. Описує принцип зв’язування аркушів стилів з гіпертекстовими документами й застосування стилів до їхніх елементів.

9

Учень має уявлення про аркуші стилів, об’єктну модель документа, мову DHTML та мови веб-скриптів. Вміє створювати й застосовувати кілька стилів з каскадних аркушів стилів. Пояснює призначення й загальний синтаксис опису об’єктної моделі документа. Дає означення понять об’єкта, документа, властивості, методу.

Учень описує принципи ергономічного співвідношення розмірів елементів веб-сторінки, їх форми, розташування, щільності. Описує кольорові системи RGB, HSV, CMYK, особливості відображення кольорів на екрані монітора.

Описує принцип керування вмістом віддаленого веб-сайту. Встановлює FTP-з’єднання засобами графічного редактора веб-сайтів. Керує вмістом сайту, розміщеного на віддаленому сервері, через FTP-доступ.

IV. Високий

10

Учень досконало (у межах навчальної програми) знає й використовує можливості мови HTML і графічного веб-редаткора.

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

Описує й застосовує принципи дизайну шрифтів, форми, кольору, текстур.

11

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

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

12

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

Додаток 2

Список літератури

Інформатика. Програми для загальносвітніх навчальних закладів. – Запоріжжя: Прем'єр, 2003. – 304 с.

Державний стандарт загальної середньої освіти в Україні. Інформатика. Освітня галузь “Технології” — К., Освіта України, 2003.

Концепція загальної середньої освіти (12-річна школа). // Інформаційний збірник Міністерства освіти і науки України. Січень 2002.
№ 2 — К., Педагогічна преса, 2002 — 23 с.

В.Д. Руденко, О.М. Макарчук, М.О. Патланжоглу. Базовий курс інформатики. Книга 2. Інформаційні технології. — К., Видавнича група BHV, 2006 — 368 c.

А. Кириленко. Самоучитель HTML. — СПб.: Питер; Киев: Издательская группа BHV, 2005. — 272 c.

В. Иванов. Интернет для начинающих. Самоучитель. — СПб.: Питер; Киев: Издательская группа BHV, 2005. — 240 c.

С. Хольцнер. DHTML. — К., Издательская группа BHV, 2001. — 512 c.

Д. Кирсанов. Веб-дизайн. — СПб.: Символ-Плюс, 2006. — 376 с.

Я. Нильсен. Веб-дизайн. — СПб.: Символ-Плюс, 2003. — 512 с.

Дж. Джонсон. Web-дизайн: типичные ляпы и как их избежать. — М.: КУДИЦ-ОБРАЗ, 2005. — 400с.