Домінуючою тенденцією розвитку сучасної цивілізації є перехід від індустріального до інформаційного суспільства, в якому об‘єктами і результатами праці стануть інформаційні ресурси і наукові знання.
Стрімко розвивається мережа Internet, яка вже нараховує сотні мільйонів користувачів і є глобальною світовою інформаційною системою. Зростання Internet та World Wide Web (WWW) привело до перетворення комп‘ютерної революції в інформаційну, яка зробила комп‘ютер основним засобом телекомунікації, зберігши усі властивості опрацювання інформації.
Але, у програмах шкільного курсу, як правило, мало годин на вивчення мови HTML, без знання якої користувач не може повною мірою скористатися всіма можливостями WWW. Створивши Web-сторінки і розмістивши їх в мережі Internet, користувач стає активним учасником, а не спостерігачем. Публікуючи власні Web-сторінки учень само реалізовується, підвищується власний статус.
Розроблена програма факультативу "Web-дизайн" призначена для загальноосвітніх навчальних закладів (класів) універсального, філологічного, суспільно-гуманітарного, художньо-естетичного, природничого, спортивного, технологічного профілю. Вона передбачає обов’язковий освітній мінімум підготовки учнів з інформатики у відповідності до проекту державного стандарту загальної середньої освіти в Україні стосовно шкільного курсу "Інформатика" і концепції інформатизації загальноосвітніх навчальних закладів.
Факультатив “Web-дизайн”, розрахований для учнів 8, 9, 10 класів, навіть якщо учні не мають первинних навичок користування комп‘ютером.

Метою спецкурсу є формування теоретичної бази знань учнів з основ створення Web-сторінок та практичних навичок використання засобів сучасних інформаційних технологій у повсякденній практичній, зокрема навчально-пізнавальній, діяльності учнів.
До теоретичної бази знань відносяться: основи мови HTML, поняття таблиць каскадних стилів, поняття комп’ютерної графіки (растрової, векторної, анімаційної), основи мови програмування JavaScript.
До практичних навичок відносяться: навички створення Web-сторінок за допомогою мови HTML; навички створення веб-сторінок за допомогою візуального редактора веб-сайтів; створення веб-сторінок, використовуючи таблиці каскадних стилів; підготовка графічних (статичних, анімаційних) зображень для Web-сторінок; розроблення дизайну веб-сторінки, використовуючи комп‘ютерну графіку; створення інтерактивів з елементами JavaScript. Після оволодіння всім курсом "Web-дизайн", учні повинні вміти самостійно створювати свій власний веб-сайт, вміти розміщувати його на сервері.

Мета спецкурсу досягається через практичне оволодіння учнями навичками роботи з сучасними засобами створення Web-сторінок.
На спецкурс “Web-дизайн” відводиться 1 година на тиждень з варіативної частини учбового плану. Вивчення курсу сплановано на 2 роки з загальною кількістю годин – 70 годин.

У викладені курсу використовується таке програмне забезпечення:
 Текстовий редактор Блокнот;
 Браузер Microsoft Internet Explorer;
 Візуальний редактор веб-сайтів Adobe Dreamweaver;
 Растровий графічний редактор Adobe Photoshop;
 Векторний графічний редактор Corel Draw;
 Редактор анімацій Macromedia Flash.
Кількість годин відведених на вивчення тієї чи іншої теми, а також перелік програмного забезпечення є орієнтовним, і тому може змінюватись у процесі роботи.

Тема Кількість годин
1 рік навчання
1 Вступ. Оформлення тексту. 5 год.
2 Таблиці. Малюнки. Гіперпосилання. 5 год.
3 Розробка Web-сайту. 10 год.
4 Розміщення Web-сайту в Інтернеті 3 год.
5 Візуальний редактор Adobe Dreamweaver 9 год.
Резерв 3 год
2 рік навчання
6 Таблиці каскадних стилів. 6 год.
7 Використання графічного редактору Adobe Photoshop для створення дизайну Web-сайту. 8 год.
8 Використання графічного редактора CorelDraw для створення дизайну. 6 год.
9 Створення анімаційних зображень за допомогою програми Flash. 6 год.
10 Елементи JavaScript: використання сценаріїв 6 год.
Резерв 3 год

1. Вступ. Оформлення тексту. (5 год.)
Поняття про мову розмітки гіпертексту. Програми для створення HTML-файлів. Класифікація засобів створення гіпертексту. Microsoft FrontPage, Adobe Dreamweaver. Конвертори файлів у гіпертекст.
Теги і структура HTML-документа. Поняття тегу. Теги заголовку та тіла документа. Атрибути тегів. Коментарі. Створення і збереження HTML-документа.
Форматування абзаців, рядків, шрифту. Створення заголовків. Вирівнювання абзаців. Форматування шрифту. Керування кольорами шрифту і фону сторінки. Кольори в HTML.
Створення списків. Маркіровані списки. Нумеровані списки. Вимоги до оформлення тексту Web-сторінки.
Практична робота "Створення простих HTML-документів"
Учні повинні знати:
• поняття тегу, види тегів;
• структуру html-документу;
• основні теги для побудови сторінки.
Учні повинні вміти:
• створювати найпростіші веб-сторінки, використовуючи теги для побудови сторінок.

2. Таблиці. Малюнки. Гіперпосилання. (5 год.)
Створення та використання таблиць. Елементи таблиці. Опис параметрів таблиці. Атрибути елементів рядків і стовпчиків. Колір у таблицях. Об’єднання комірок у таблицях.
Графіка на Web-сторінках. Графічні формати зображень для Web-сторінок. Тег вставлення зображень та його атрибути.
Підготовка зображень для використання на сайтах. Основні параметри зображення в растровій графіці. Графічний редактор Paint: вирізання і збереження фрагменту, масштабування малюнків. Графічний редактор Adobe Photoshop: встановлення розмірів малюнка, підготовка фрагментів, регулювання яскравості та контрастності, збереження малюнків для Web.
Створення гіперпосилань. Поняття про гіперпосилання. Типи гіперпосилань. Посилання на поштову скриньку. Поради щодо оформлення посилань. Вимоги до об’єму Web-сторінок.
Практична робота "Створення HTML-документів, які містять зображення та гіперпосилання."
Учні повинні знати:
• теги для побудови таблиць;
• тег зображень та його атрибути;
• поняття гіперпосилань, типи гіперпосилань.
Учні повинні вміти:
• створювати веб-сторінки, які містять зображення та гіперпосилання;
• обробляти зображення, використовуючи графічний редактор.

3. Розробка Web-сайту. (10 год.)
Підготовчі етапи. Розробка структури сайту.
Розробка Web-сайту: створення шаблону сторінок, наповнення папки графікою та створення гіперпосилань, наповнення сторінок сайту інформацією.
Практична робота "Створення шаблону Web-сайту".
Практична робота "Використання графіки та гіперпосилань на Web-сторінках".
Практична робота "Наповнення сторінок сайту інформацією".
Учні повинні знати:
• структури сайту.
Учні повинні вміти:
• побудувати Web-сайт, який складається з кількох сторінок з використанням основних тегів для роботи з текстом, зображень та гіперпосилань.

4. Розміщення Web-сайту в Інтернеті. (3 год.)
Підготовка сайту до опублікування. Поняття про тег . Вибір Web-сервера. Поняття про хостинг.
Використання протоколу HTTP. Розміщення сайту на безкоштовному Web-сервері www.narod.ru. Редагування Web-сайту.
Захист Web-сайту.
Учні повинні знати:
• поняття тегу ;
• поняття про хостинг, безкоштовний хостинг;
• поняття протоколу, Web-сервера.
Учні повинні вміти:
• використовувати протокол HTTP;
• розміщувати свій Web-сайт на безкоштовному Web-сервері

5. Візуальний редактор Adobe Dreamweaver. (9 год.)
Інтерфейс та режими роботи програми. Вікно програми. Режими перегляду Web-документа.
Робота з Web-сторінками. Відкривання та створення сайтів і Web-сторінок. Форматування тексту.
Розміщення і настроювання зображень. Загальні параметри зображень. Редагування зображень.
Створення таблиць.
Створення гіперпосилань.
Створення Web-сайту за допомогою майстра або шаблону. Використання майстрів та шаблонів для сайтів. Шаблони Web-сторінок.
Практична робота "Створення Web-сайту в середовищі Dreamweaver"
Учні повинні знати:
• інтерфейс, режими роботи редактора;
• режими перегляду документа;
• загальні параметри зображень;
Учні повинні вміти:
• створювати Web -сайти в середовищі Dreamweaver.

Резерв часу – 3 години

6. Таблиці каскадних стилів. (6 год.)
Поняття про таблиці каскадних стилів. Застосування каскадних стилів у HTML-документах: підключення зовнішньої таблиці стилів, використання стилів внутрішньої таблиці, вбудовані стилі.).
Застосування стилів у редакторі Dreamweaver: створення та підключення зовнішньої таблиці, створення внутрішньої таблиці стилів.
Практична робота "Оформлення Web-сторінок за допомогою каскадних таблиць стилів"
Практична робота "Використання стилів у редакторі Dreamweaver "
Учні повинні знати:
• поняття про каскадні стилі;
• способи використання таблиці у HTML-документах;
• теги каскадних стилів.
Учні повинні вміти:
• оформлювати Web-сторінок за допомогою каскадних стилів.

7. Використання графічного редактору Adobe Photoshop для створення дизайну Web-сайту. (8 год.)
Поняття растрової графіки. Інтерфейс програми. Основні інструменти й панелі властивостей. Виділення областей на зображеннях.
Створення колажів для Web-сайтів. Робота з шарами на зображеннях. Використання масок і каналів.
Обробка графічних зображень: корекція кольору, використання фільтрів
Робота з текстом.
Створення логотипу для Web-сайту.
Створення анімаційних зображень за допомогою Adobe Photoshop.
Практична робота "Створення колажу"
Практична робота "Обробка графічних зображень"
Практична робота "Створення логотипу для Web-сайту"
Учні повинні знати:
• поняття растрової графіки;
• інтерфейс програми, основні інструменти, панелі властивостей;
• формати збереження;
• інструменти виділення зображень;
• інструменти обробки графічних зображень;
• інструменти тексту.
Учні повинні вміти:
• виділяти області на зображеннях;
• створювати колажі;
• працювати з шарами, використовувати маски і канали;
• виконувати корекцію кольору;
• використовувати фільтри;
• працювати з текстом, форматувати текст;
• створювати логотип для Web-сайту;
• створювати анімаційні зображення.

8. Використання графічного редактора CorelDraw для створення дизайну. (6 год.)
Поняття векторної графіки. Інтерфейс програми. Основні інструменти. Побудова ліній.
Використання заливки. Робота з текстом.
Робота з інструментом Форма, Ластик, Ніж.
Підготовка зображень за допомогою векторного редактору.
Практична робота "Використання заливки"
Практична робота "Робота з текстом"
Практична робота "Обробка зображень"
Учні повинні знати:
• поняття векторної графіки, інтерфейс програми;
• основні інструменти;
• формати збереження.
Учні повинні вміти:
• працювати з текстом;
• використовувати заливку;
• працювати з інструментами Форма, Ластик, Нож;
• обробляти зображення.

9. Створення анімаційних зображень за допомогою програми Flash. (6 год.)
Поняття про Flash-анімацію. Інтерфейс програми. Типи анімації.
Кадри, шари, символи, шкала часу.
Покадрова анімація. Анімація з створенням кадрів.
Направляючі шари. Кольорові ефекти.
Практична робота "Створення анімаційних зображень та використання їх на Web-сторінках"
Учні повинні знати:
• поняття анімації;
• типи анімації;
• інтерфейс програми.
Учні повинні вміти:
• створювати анімаційні зображення;
• використовувати анімацію на Web -сторінках.

10. Елементи JavaScript: використання сценаріїв. (6 год.)
Поняття об‘єктної моделі. Об‘єктна модель браузера.
Знайомство з JavaScript. Синтаксис мови JavaScript. Опис змінних.
Оператори циклу, розгалуження, управління.
Обробка форм за допомогою скрипів.
Розміщення JavaScript сценаріїв в HTML-документі.
Практична робота "Створення найпростіших скриптів"
Учні повинні знати:
• поняття об‘єктної моделі;
• синтаксис JavaScript;
• опис змінних;
• оператори циклу, розгалуження, управління;
• способи розміщення скриптів в HTML-документі.
Учні повинні вміти:
• створювати найпростіші скрипти.

Резерв часу 3 год

Література.
1. Жалдак М.І., Морзе Н. В., Науменко Г.Г.. Програма для середніх закладів освіти “Основи інформатики та обчислювальної техніки”.
2. Ковшун М.І.. Інформатика. Web-дизайн. 8 клас. Навчальний посібник/-Шепетівка: "ПП Шестопалов Е.А.", 2007.-112с.
3. Рамський Ю.С., Іваськів І.С., Ніколаєнко О.Ю.. Вивчення Web-програмування в школі. Навчальний посібник. – Тернопіль: Навчальна книга – Богдан, 2006.-200 с.
4. Пасічник О.Г., Пасічник О.В.,. Стеценко І.В. Основи веб-дизайну. Навальний посібник. – К.: Вид. група BHV, 2008. – 336 с.
5. Інформатика. Графічний редактор векторного типу Corel Draw. Практичні роботи. //Шкільний світ. 2006. № 9-10. – с. 46.
6. Жалдак М.І.. Яким бути шкільному курсу “Основи інформатики” //Комп’ютер в школі та сім’ї. 1998. №1.– с.3-8.
7. Зарецкая И.Т., Колодяжный Б.Г., Гуржий А.Н.,.Соколов А.Ю/ Информатика 10-11., Харьков, "Факт", 2001 г.
8. Дженнифер Нидерст. Карманный справочник HTML. Пер. с англ. – Тернополь: Навчальна книга – Богдан. 2001. – с. 96.
9. Глушаков С.И., Капитанчук А.В., Вещев Е.В., Кнабе Г.А. Компьютерная графика. 3-е изд., доп. и перераб. – Харьков: Фолио. 2006. – с. 511.

Предмети: Інформатика

Класи: 11 клас, 10 клас, 9 клас