Тема: ознайомлення з графічним конструктором сайтів.

Мета: сформувати предметні компетенції щодо технологій створення сайтів.

Учень повинен:

• пояснювати призначення:
  • середовища KompoZer;
  • пунктів меню середовища KompoZer;
  • панелей інструментів;
  • лінійок і смуг прокрутки;
  • різних вкладинок;
  • робочої області;
  • шаблонів та сторінок;
  • кожного з трьох режимів роботи в середовищі KompoZer;


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

Обладнання: комп’ютери зі встановленими ОС, браузером і KompoZer.

Структура уроку

1. Організаційний момент.
2. Актуалізація опорних знань.
3. Інструктаж з ТБ.
4. Формування навчального досвіду.
5. Підбиття підсумків уроку.
6. Домашнє завдання.

Хід уроку

1. Організаційний момент
Вітання з класом. Перевірка присутності і готовності учнів до уроку. Перевірка виконання домашнього завдання.

Сьогодні у нас урок з темою «Графічний конструктор сайтів KompoZer». На цьому уроці ми ознайомимося з новою програмою, отримаємо нові знання, закріпимо уміння і навички створення html-сторінок, набуті раніше.

2. Актуалізація опорних знань
Індивідуальний письмовий контроль (cамостійна робота)

І варіант

1. Що таке форматування тексту?
2. Що таке редагування тексту у середовищі текстового редактора?
3. Записати алгоритм встановлення таблиці до тексту у середовищі текстового редактора.
4. Записати теги та їх призначення, які ви запам'ятали, коли вивчали HTML-програмування.
5. Що таке контекстне меню?

1. Сайт – це …
   
2. Графічний редактор – це …
   
3. Записати алгоритм встановлення малюнку до тексту у середовищі текстового редактора.
4. Записати дії для збереження та відкриття будь-якого файлу.
5. Що таке меню, що випадає при натисканні на окремі елементи?

3. Інструктаж з ТБ
4. Формування навчального досвіду

1. Завантажити середовище KompoZer.

   

2. Під рядком назви розташовано рядок меню зі знайомими назвами категорій вказівок. У більшості випадків вказівки мають знайомі або щонайменше зрозумілі назви.

   

3. Використати вказівку Файл / Створити або натиснути клавіші Ctrl + N, щоб створити новий документ.

4. У вікні діалогу Створити новий документ чи шаблон вибрати Порожній документ і натиснути кнопку Створити.

   

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

5. Для кожної вказівки меню з категорії Вставити

   

   зробити таке:

   • виконати вказівку;
   • у разі потреби ввести довільний текст для того, щоб унаочнити створену структуру;
   • переглянути документ у різних режимах перегляду на вкладинках Дизайн, Об'єднаний і Початковий код знизу вікна перегляду.

6. Зробити те саме для таких кнопок:
   
   — вставити новий якір або змінити властивості виділеного;
   
   — створити стиль редагованого HTML-документа за допомогою Редактора CSS;
   
   — вставити нову форму або змінити властивості виділенної;
   
   — відкрити поточний документ у зовнішньому виділеному редакторі;
   
   — вставити нову таблицю або змінити властивості виділеної;
   
   — вставити нове зображення або змінити властивості виділеного;
   
   — вставити нове посилання або змінити властивості виділеного;
   
   — cтворити нову сторінку;
   
   — відкрити локальний файл;
   
   — зберегти файл локально;
   
   — додати або вилучити нумерований список;
   
   — додати або вилучити маркований список;
   
   — завантажити файл на віддалений сервер;
   
   — завантажити поточну сторінку у браузер;
   
   — повернути;
   
   — повторити;
   
   — вибір кольору тексту, тла та підсвічування тексту;
   
   — менший розмір шрифту;
   
   — більший розмір шрифту;
   
   — напівжирне написання;
   
   — курсив;
   
   — підкреслений текст;
   
   — вирівняти за лівим краєм;
   
   — центрувати текст;
   
   — вирівняти за привим краєм;
   
   — вирівняти текст за шириною;
   
   — виділити;
   
   — виділити сильно;
   
   — відступ ліворуч;
   
   — відступ праворуч;
   
   — опис терміну;
   
   — опис визначення;
   
   — вибір шрифту;
   
   — вибір формату абзацa.

7. Змінити параметри зображення: спосіб обтікання текстом або вирівнювання щодо тексту. Для цього зробити таке:

   • виділити довільне попередньо вставлене зображення (натисканням лівої кнопки миші);

   • натиснути праву кнопку миші для виклику контекстного меню;

     
     

   • використати вказівку контексного меню Властивості зображення…;

   • у вікні діалогу Властивості зображення

     

     перейти на вкладення Зовнішній вигляд змінити Поля та Розташування тексту по відношенню до зображення;

     

8. Виконати вказівку меню Файл / Змінити і зберегти кодування.

Примітка. Саме таку вказівку потрібно використати при першому збереженні файлу, щоб впевнитися, що кодування файлу збігається з тим, що оголошене у заголовку html-сторінки. Інакше використовують вказівки меню:

• Файл / Зберегти (Ctrl + S) при збереженні файлу з тим самим кодуванням, з тією самою назвою й у тому самому місці носія пам'яті;

• Файл / Зберегти як… при збереженні файлу з тим самим кодуванням, але (можливо) іншими назвою чи місцем зберіганння.

9. У вікні діалогу Зберегти зі зміненим кодуванням вказати заголовок поточної сторінки (вміст контейнера title) Ваше прізвище і кодування Кирилиця/Україна (КОІ8-U), прийнятне для роботи з українською мовою.

   

10. Обрати місце для збереження за вказівкою вчителя.

11. Пересвідчитися, що вкладинка поточної сторінки змінить назву.

    

12. Перейти на вкладинку Початковий код.

13. Вставити наприкінці сторінки рухомий рядок з текстом: «Все гаразд» за допомогою тега marquee.

    

14. Результат «гібридної» роботи на закладці Дизайн на перший погляд відсутній.

    

    Але у вікні браузері все має бути гаразд.

    

15. Пересвідчитися, що у процесі виконання практичної знайдено відповіді на такі питання:

    1. Як додати рухомий рядок?
    2. Яке розширення має шаблон програми KompoZer?
    3. Як встановити формат тексту та сторінки?
    4. Як додати малюнок на сторінку?
    5. Як додати таблицю на сторінку?
    6. Як змінити ширину стовпчика (рядка) у таблиці?
    7. Як встановити обрамлення малюнка текстом ліворуч? праворуч?
    8. Як встановити відстань між текстом і малюнком?
    9. Як змінити колір тексту і тла сторінки?

    Інакше потрібно підняти руку і попросити допомоги в учителя.

16. Зберегти кінцевий результат у теку з назвою Ваше прізвище і закрити вікно програми KompoZer.

Примітка. Наразі (на момент написання розробки уроку) локалізацію українською мовою програми KompoZer не завершено: мова інтерфейсу — українська, але довідку подано англійською мовою. Для поглибленого вивчення можливостей програми стане у нагоді російськомовна (у повному розумінні) версія програми.

5. Підбиття підсумків уроку
Гра «Мікрофон» (працювати парами).

Питання для інтерв'ю:

1. Що нового ви дізналися на уроці?
2. Які переваги програмного середовища Композер відчули у роботі з ним?
3. Які практичні навички, набуті при вивчанні інших програм, вам сьогодні знадобилися?

Виставлення оцінок.

6. Домашнє завдання

1. Завантажити KompoZer.
2. Створити у середовищі KompoZer сайт на довільну тему (наприклад, за завданнями ІІІ етапу олімпіади з інформаційних технологій у номінації «Веб»-дизайн) з максимально повним і доречним використанням можли­востей середовища KompoZer.