Lesson # 31. designing sites using html. bzd briefing
1. 1
Урок №31 8 __ клас 1 група ________________
2 група ________________
Тема. Конструювання сайтівз використанням HTML. Інструктаж з БЖД
Цілі:
навчальна: оволодіти практичними навичками використання html для
розробкивеб сайту, створити сайт певної тематики;
розвивальна: розвивати логічне мислення, дослідницькі навички,
інформаційну культуру учнів;
виховна: виховувати уважність та відповідальність, бажання мати
глибокіта якісні знання.
Тип уроку: Комбінований.
Обладнання та наочність: дошка, комп’ютери з підключенням до мережі
Інтернет.
Програмне забезпечення: браузер, офісні програми.
Хід уроку
І. Організаційний етап
І. Актуалізаціяопорнихзнань
1. Що таке дизайн? Які основніпринципи дизайну презентації та слайдів?
2. Що таке верстка? Яке її значення у процесістворення публікацій?
3. Що таке HTML-код сторінки? Дані яких видів він містить? Як можна
його переглянути?
4. Які складові структури веб-сторінки?
ІІІ. Мотивацій навчальноїдіяльності
IV. Формуваннявмінь та навичок
Практичне завдання (2 уроки):
Розробити засобами HTML веб сайт на тему «Гороскоп на 20___ рік».
Передбачити головну сторінку з переліком знаків зодіаку (таблиця 4х3, в
кожній комірці якої зображення відповідного знаку, його назва та часові
межі), а також окремі сторінки для кожного знаку з гороскопом на цілий
рік. Створити гіперпосилання між цими сторінками. Оформити
сторінки відповідно до власних вподобань та правил ергономічного
розміщення контенту на сторінцісайту.
2. 2
Хід виконання:
ЧАСТИНА 1:
1. Створитина ПК власну папку з іменем “Зодіак_ваше_прізвище”
2. У створеній папці створити ще дві папки з іменами “images” та
“pages”.
3. Створити каркас веб сторінки, вказати кодування в системі UTF-8,
заголовок – Гороскоп 20__. Зберегти створену сторінку у власній папці
під іменем “index.html”.
4. У головній сторінці створити відповідний заголовок та структуру
таблиці з 3 колонок та 4 рядків. Передбачити ширину таблиці на всю
ширину сторінки (100%), та однакову ширину стовпців (33%, 34%,
33%), встановитиширину рамки 1px.
5. Використовуючи пошукову систему, знайти в мережі 12 зображень для
відповідних знаків зодіаку та зберегти їх у папку “images”
(рекомендовано використовувати зображення формату png з прозорим
фоном та однаковим стильбом виконання).
6. Використовуючи знайдені зображення заповнити комірки таблиці
наступним чином: назва знаку зодіаку, часові рамки та зображення.
Вирівняти контент по ширині комірки. Назву знаку задати заголовком
2 рівня та напівжирним накресленням, а часові рамки – заголовок 3
рівня та курсив.
7. Після заповнення всієї таблиці зробити рамку невидимою. Задати колір
сторінки та сімейство шрифтів для всієї сторінки (використовуємо
атрибути тега <body> та тег <font> з атрибутами face, size та color)
VI. Підсумки уроку
Фронтальне опитування
1. Який сайт вважається ергономічним?
2. Які критерії потрібно враховувати для забезпечення ергономічності сайту?
Схарактеризуйте їх.
3. Яким чином під час створення сайту можна створити зручності для
користувачів з особливимипотребами?
Рефлексія
1. Під час уроку я
дізнався…
зрозумів…
навчився…
2. Найбільше мені сподобалося…
3. На уроці найкраще в мене виходило…
4. Я мав (-ла) труднощі з…
5. Я хотів би ще дізнатися про…
3. 3
VІI. Домашнє завдання
1. Створити список джерел для пошуку астрологічного прогнозу на
вказаний рік.
2. Підібрати текстовий контент для наповнення сайту (можна зберігати
інформацію на власному google диску).
VІІI. Оцінюванняроботи учнів
