- •Хід уроку
- •1.Актуалізація опорних знань. Перевірка вивченого матеріалу.
- •2. Мотивація навчальної діяльності.
- •3. Повідомлення теми і мети уроку.
- •4. Пояснення нового матеріалу та виконання практичних вправ.
- •5.Підведення підсумків
- •6. Домашнє завдання
- •Урок №2
- •Хід уроку.
- •1 Актуалізація опорних знань.
- •2. Мотивація навчальної діяльності
- •3.Повідомлення теми та завдань уроку.
- •3. Вивчення нового матеріалу, виконання практичних завдань.
- •5.Підведення підсумків
- •6. Домашнє завдання
- •Урок № 3
- •Мотивація навчальної діяльності.
- •Повідомлення теми і мети уроку.
- •Актуалізація опорних знань.
- •Вивчення нового матеріалу, виконання практичної роботи.
- •5.Підведення підсумків.
- •6 Домашнє завдання.
- •Хід уроку.
- •Актуалізація опорних знань.
- •Мотивація навчальної діяльності.
- •Повідомлення теми і постановка завдань уроку.
- •Вивчення нової теми, виконання практичних завдань.
- •Підведення підсумків уроків.
- •Домашнє завдання.
- •Урок №5
- •Хід уроку.
- •1.Актуалізація опорних знань.
- •2. Мотивація навчальної діяльності.
- •3. Повідомлення теми і завдань уроку.
- •4. Виклад навчального матеріалу, виконання практичних завдань.
- •5. Підведення підсумків.
- •6. Домашнє завдання.
- •Урок №6
- •Перевірка домашнього завдання. Актуалізація опорних знань.
- •Мотивація навчальної діяльності.
- •Повідомлення теми та мети уроку.
- •Вивчення нового матеріалу та виконання практичних завдань.
- •Підведення підсумків уроку.
- •Домашнє завдання.
- •Хід уроку
- •Перевірка домашнього завдання. Актуалізація опорних знань.
- •Мотивація навчальної діяльності.
- •Виконання практичних завдань.
- •Підведення підсумків уроку.
- •Домашнє завдання.
- •Урок №8
- •Хід уроку
5. Підведення підсумків.
Ми завершили роботу по створенню найпростішого веб-сайту.
6. Домашнє завдання.
Запишіть вивчені теги до словника. Підготуйтеся до захисту своєї роботи. Продумайте план захисту, слова, якими ви розкажете про свою сторінку.
Для підготовки використайте таку літературу:
О.Г. Пасічник, О.В.Пасічник, І.В. Стеценко «Основи веб-дизайну»
Додаток 1
Інструкція до виконання практичного завдання
Розмістимо на сторінці три документи про навчальні заклади (див. вправу 2.5). Як видно з таблиці, сторінку поділено спочатку на два рядки у спів відношенні приблизно 60 % та 40 %, перший рядок поділено на впіл на два стовпці, а в утворених комірках розташовано відповідні веб-сторінки про навчальні заклади. Документи 1.html, 2.html та 3.html лежать в папці ЗАГАЛЬНЕ/ВЕБ-ДИЗАЙН/
1. Створіть файл головної сторінки та збережіть його як main.html у тій самій папці, що й решту документів.
<HTML>
<ТІТLЕ>Навчальні заклади</ТІТLЕ>
<FRAMESET ROWS="60%, 40%">
<FRAMESET COLS="50%, 50%">
<FRAME SRC="2.html">
<FRAME SRC="3.html">
</FRAMESET>
<FRAME SRC="l.html">
</FRAMESET>
</HTML>
2. Відкрийте файл main.html. Всі файли, відображені у вікні браузера одночасно, а оскільки документи не вмістилися у визначені для них області, то кадри мають смуги прокручування.
Використання посилань у фреймах
Якщо заплановано використовувати певний фрейм для відображення інформації, яка змінюватиметься після вибору відвідувачами іншого посилання, то йому надають ім'я. Наприклад, <FRAME NAME="framel". Веб-сторінка з гіперпосиланнями, що виконуватиме роль навігаційної панелі, складається із сукупності тегів <А>...</А>. У них крім адреси файлу, пов'язаного з гіперпосиланням, слід зазначити ім'я фрейму, в якому цей файл відображатиметься. Для цього використовують атрибут TARGET, значенням якого є ім'я відповідного фрейму. Наприклад:
<А HREF="2.html" TARGET="fгате1">Гімназія «Сихівська»</А>
3. Сформуємо веб-сторінку з навігаційною панеллю та областю відображення документів. Використайте файли з описами навчальних закладів із вправи 2.5, а сторінку np.html з навігаційною панеллю та поділену на фрейми сторінку index.html створіть самостійно. 1. Створіть HTML-документ, який розмітьте за допомогою фреймів і збережіть у файлі index.html.
<HTML>
<FRAMESET COLS="20%,*"> <FRAME SRC="np.html"> <FRAME NAME="framel"> </FRAMESET> </HTML>
4. Створіть HTML-документ, який міститиме навігаційну панель, і збережіть його у файлі np.html.
<HTML>
<ТІТЬЕ>Школи, ліцеї, гімназії</ТІТЬЕ>
<BODY>
<Н2ХА HREF="l.html" TARGET="fгате1">Школа «Дивосвіт»
</АХ/Н2>
<Н2ХА HREF="2.html" TARGET="fгате1">Гімназія
«Сихівська»</АХ/Н2>
<Н2ХА HREF="3.html" TARGET="fгате1">Ліцей «Оріяна»</А>
</Н2>
</BODY>
</HTML>
5. Відкрийте файл index.html у вікні браузера.
Урок №6
Тема: Вставка графічних зображень в HTML- документ.
Мета: познайомити учнів із тегами вставки графіки до веб-сторінок;
вчити учнів використовувати графічні зображення для оформлення
HTML- документів;
розвивати творчий підхід до роботи з мовою HTML, логічне мислення,
здібності оригінального представлення інформації;
виховувати естетичність та культуру представлення інформації.
Використане обладнання: комп’ютер; дошка;
Хід уроку