Конспект уроку "Поняття про структуру веб-сайту. Теги, фрейми й атрибути фреймів. Використання посилань у фреймах"

Опис документу:
Конспект уроку в 11 класі. Тема уроку: "Поняття про структуру веб-сайту. Теги, фрейми й атрибути фреймів. Використання посилань у фреймах". Презентація до цього уроку та коротка довідка з теми Фрейми.

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

Оберіть документ з архіву для перегляду:
Перегляд
матеріалу
Отримати код

Довідка з теми Фрейми

<FRAMESET> … </FRAMESET>

Атрибути

COLS – розділяє на декілька вертикальних вікон;

ROWS– розділяє на декілька горизонтальних вікон;

<FRAME>

Атрибути

SRC — задає ім'я файлу;

NAME — задає ім'я фрейму;

SCROLLING — визначає наявність смуг прокручування;

NORESIZE — забороняє користувачу змінювати розміри фрейму;

BORDER — визначає ширину розділювальної смуги між фреймами в пікселах;

BORDERCOLOR — визначає колір розділювальної смуги між фреймами;

MARGINHEIGHT — додає порожнє поле, висота якого визначена в пікселах, між верхньою межею фрейму і початком тексту або графіки;

MARGNWDTH — додає порожнє поле, ширина якого визначена в пікселах, між боковими межами фрейму і початком тексту або графіки.

Довідка з теми Фрейми

<FRAMESET> … </FRAMESET>

Атрибути

COLS – розділяє на декілька вертикальних вікон;

ROWS– розділяє на декілька горизонтальних вікон;

<FRAME>

Атрибути

SRC — задає ім'я файлу;

NAME — задає ім'я фрейму;

SCROLLING — визначає наявність смуг прокручування;

NORESIZE — забороняє користувачу змінювати розміри фрейму;

BORDER — визначає ширину розділювальної смуги між фреймами в пікселах;

BORDERCOLOR — визначає колір розділювальної смуги між фреймами;

MARGINHEIGHT — додає порожнє поле, висота якого визначена в пікселах, між верхньою межею фрейму і початком тексту або графіки;

MARGNWDTH — додає порожнє поле, ширина якого визначена в пікселах, між боковими межами фрейму і початком тексту або графіки.

Довідка з гіперпосилань у фреймах

<А>...</А> — створює гіперпосилання

Атрибути

href вказує URL адресу сторінки на яку перейде користувач після клацання по посиланню

target – визначає куди буде завантажено сторінку після клацання по посиланню;

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

Наприклад <FRAME SRC="kontent.html" name="Window1">.

В файлі з навігаційним меню крім адреси файлу, пов'язаного з гіперпосиланням, слід зазначити ім'я фрейму, в якому цей файл відображатиметься (в атрибуті ТARGЕТ).

Наприклад:

<А HREF="1.html" TARGET=" Window1"> Живопис </А>

Довідка з гіперпосилань у фреймах

<А>...</А> — створює гіперпосилання

Атрибути

href вказує URL адресу сторінки на яку перейде користувач після клацання по посиланню

target – визначає куди буде завантажено сторінку після клацання по посиланню;

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

Наприклад <FRAME SRC="kontent.html" name="Window1">.

В файлі з навігаційним меню крім адреси файлу, пов'язаного з гіперпосиланням, слід зазначити ім'я фрейму, в якому цей файл відображатиметься (в атрибуті ТARGЕТ).

Наприклад:

<А HREF="1.html" TARGET=" Window1"> Живопис </А>

Перегляд
матеріалу
Отримати код

Урок № 62. Дата: Клас: 11

Тема уроку: Поняття про структуру веб-сайту. Теги, фрейми й атрибути фреймів. Використання посилань у фреймах.

Мета уроку: сприяти ознайомленню учнів з поняттям структури веб-сайту, фреймів, їх атрибутів;

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

сприяти розвитку у учнів логічного мислення;

сприяти вихованню у учнів інтересу до професії веб-дизайнера.

Інструменти і матеріали: комп’ютерний клас „Celeron”, програмне забезпечення google chrome, блокнот, набір таблиць „Основи інформатики і обчислювальної техніки”, підручник з інформатики.

Тип уроку: формування умінь і навичок.

Тривалість уроку: 45 хвилин.

Хід уроку.

І. Теоретична частина.

1. Організаційний момент.

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

2. Актуалізація опорних знань.

2.1. Перевірка вивченого матеріалу.

Активний прийом ”впізнай термін”

  1. Тег, який створює таблицю в html документі.

  2. Атрибут тега створення таблиці, який встановлює товщину ліній рамки.

  3. Атрибут тега створення таблиці, який встановлює колір ліній рамки.

  4. Атрибут тега створення таблиці, який встановлює фон таблиці.

  5. Атрибут тега створення таблиці, який встановлює ширину таблиці.

  6. Тег, який створює рядок в таблиці.

  7. Тег, який створює клітинку в таблиці.

  8. Атрибут тега створення клітинки, який обʼєднує декілька клітинок по вертикалі.

  9. Атрибут тега створення клітинки, який обʼєднує декілька клітинок по горизонталі.

  10. Атрибут тега створення клітинки, який вказує її висоту.

Робота з картками.

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

2.2. Техніка безпеки.

3. Мотивація навчальної діяльності.

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

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

- Повідомлення теми та мети уроку.

4. Викладення нового матеріалу.

Фрейми, їхні теги й атрибути

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

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

Сторінка з розміткою, як і звичайна, починається з тегу <HTML> і закінчується тегом </HTML>. Для поділу екрана на кілька фрей­мів використовують теги <FRAMESET> і </FRAMESET>. Перший має бути розташований після тегу заголовка, але перед тегом <BODY>. Іноді в таких документах зовсім не використовують тег <BODY>.

Два фрейми можна розташовувати поруч по вертикалі або один над одним. У першому випадку використовують атрибут COLS, а в другому — атрибут ROWS тегу <FRAMESЕТ>. Для поділу вік­на на фрейми через кому записують два числа, які визначають розміри фреймів. Для трьох фреймів потрібно три числа. Розміри фреймів вимірюють у пікселах або відсотках від розміру екрана. Якщо потрібно зазначити, що фрейм займає те місце, яке зали­шилося, використовують символ *.

Наприклад, тег <FRAMESET ROWS="150, *"> задає поділ вікна на два горизонтальні фрейми, один з яких має висоту 150 пікселів, a другий займає те місце, що залишилося. Тег <FRAMESET COLS=”20%, 55%, *"> задає поділ вікна на три вертикальні фрей­ми, один з яких займає 20 % від ширини екрана, другий — 55 %, а третій займає те місце, що залишилося. Можна використовува­ти одночасно і горизонтальний, і вертикальний поділ вікна на фрейми — це роблять за допомогою вкладення тегів <FRAMESET> один в один.

Після поділу екрана на вікна для кожного фрейму слід задати HTML-документ, який відображатиметься в ньому. Для цього ви­користовують тег <FRAME> з атрибутами, що керують властиво­стями фреймів:

  • SRC — задає ім'я файлу, що відображатиметься у фреймі;

  • NAME — задає ім'я фрейму;

  • SCROLLING — визначає наявність (значення yes) або відсут­ність (значення no) смуг прокручування у вікні фрейму (за умовчанням — yes);

  • NORESIZE — забороняє користувачу змінювати розміри фрейму;

  • BORDER — визначає ширину розділювальної смуги між фрей­мами в пікселах;

  • BORDERCOLOR — визначає колір розділювальної смуги між фреймами;

  • MARGINHEIGHT — додає порожнє поле, висота якого визначена в пікселах, між верхньою межею фрейму і початком тексту або графіки;

  • MARGNWDTH — додає порожнє поле, ширина якого визначена в пікселах, між боковими межами фрейму і початком тексту або графіки.

Оскільки фрейми підтримують не всі браузери, необхідно помісти­ти тег <NOFRAME> перед тегом <BODY>, а між <BODY> і  </BODY> записати повідомлення, яке з'являтиметься у вікні, якщо браузер не підтримує фрейми. Після </BODY> має йти </NOFRAME>.

Використання посилань у фреймах

Якщо заплановано використовувати певний фрейм для відображення інформації, яка змінюватиметься після вибору відвідувачами іншого посилання, то йому надають ім'я. Наприклад, <FRAME NАМЕ=”frame1">. Веб-сторінка з гіперпосиланнями, що виконуватиме роль навігаційної панелі, складається із сукупності тегів <А>...</А>. У них крім адреси файлу, пов'язаного з гіперпосиланням, слід зазначити ім'я фрейму, в якому цей файл відображати­меться. Для цього використовують атрибут ТARGЕТ, значенням якого є ім'я відповідного фрейму. Наприклад:

<А HREF="2.html" TARGET="frame1">Гімназія «Сихівська»</А>


Недоліки використання фреймів

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

ІІ. Практична робота.

5.1. Організаційний момент.

5.2. Вступний інструктаж. (Фронтальний та індивідуальний)

Пояснити правила виконання роботи, характеризувати вимоги до якості роботи:

Від керівника та членів гуртка „Художня студія” нам надійшло замовлення на виготовлення локального веб-сайту. Вам пропонується виступити у ролі веб-дизайнера.

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

Ви будете працювати у два етапи:

1-й етап – створення структури сайту.

2-й етап – наповнення сайту.

Над першим етапом ви будете працювати на сьогоднішньому уроці. Кожен з вас буде працювати окремо. Найкраща структура буде взята за основу сайту.

На другому етапі ви будете працювати командно. Кожен буде відповідати за свою сторінку веб-сайту, але всі вони повинні бути виконані в одному стилі. Над другим етапом ви будете працювати на протязі наступних 2 уроків.

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

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

Зліва повинно бути створене меню сайту. Заготовка для меню розміщена в файлі menu.html. Але вам необхідно внести зміни в форматування цього файлу, щоб меню виглядало гарно і працювали гіперпосилання.

Файли-заготовки до кожного пункту меню розміщені у папці «Сайт» і названі на пунктами меню. Звісно, що вони поки мають тільки фон, наповните ви їх пізніше.

Якщо вам важко виконати всі завдання, то мінімум, що вам треба зробити – це створити структуру за допомогою фреймів. (учні І та ІІ рівня навчальних досягнень)

Але я вірю, що ви всі творчі люди та гарні спеціалісти, тому виконаєте всі завдання і отримаєте максимальні бали. То ж почнемо роботу.

5.3. Самостійна робота.

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

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

Учні І-ІІ рівня навчальних досягнень працюють за моєю допомогою.

Учні ІІІ-IV рівня навчальних досягнень працюють самостійно.

Під час роботи учні виконують вправи для розвантаження органів зору.

5.4. Поточний інструктаж.

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

ІІІ. Підсумок заняття.

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

- Коментар оцінок.

При оцінці роботи враховується:

  1. Правильність виконання прийома.

  2. Вміння пояснити техніку його виконання.

  3. Оптимальна кількість часу, витраченого на роботу.

  4. Охайність при виконанні завдання.

  5. Дисциплинованість та уміння працювати у колективі.

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

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

Перевірка домашнього завдання

Прізвище та імʼя ________________________________________ Бали ________________

  1. ___________________

  2. ___________________

  3. ___________________

  4. ___________________

  5. ___________________

  6. ___________________

  7. ___________________

  8. ___________________

  9. ___________________

  10. ___________________

__________

__________

__________

__________

__________

__________

__________

__________

__________

__________

Вимоги замовника до структури та дизайну сайту

  1. Структура сайту

Заголовок сайту

Меню сайту

Контент

Графік роботи гуртка

  1. Меню повинно бути оформлено за зразком:

Види образотворчого мистецтва

Живопис

Графіка

Скульптура

Архітектура

Дизайн

Жанри образотворчого мистецтва

Пейзаж

Натюрморт

Портрет

Історичний

Театрально-декораційний

  1. Заголовок сайту повинен фонову картинку за темою гуртка та назву гуртка.

Вимоги щодо дизайну сторінок будуть надані пізніше.

Критерії оцінювання

Перевірка вивченого матеріалу

20 балів

Структура сайту

8 балів

Виведення файлів у фреймах

4 бали

Форматування меню

6 балів

Створення гіперпосилань

12 балів

Виведення гіперпосилань у вікні ”контент”

5 балів

Створення заголовка

5 балів

Бал

Оцінка

0-5

1

6-10

2

11-15

3

16-20

4

21-25

5

26-30

6

31-35

7

36-40

8

41-45

9

46-50

10

51-55

11

56-60

12

Перегляд
матеріалу
Отримати код
Опис презентації окремими слайдами:
1.<FRAMESET rows="50%,50%"> 2.<FRAME SRC="1.html"> 3.<FRAMESET cols="40%,60%"> 4.<FRAME SRC="2.html"> 5.<FRAMESET rows="50%,50%"> 6.<FRAME SRC="3.h...
Слайд № 1

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 1.html 2.html 3.html 4.html

1.<FRAMESET rows="50%,50%"> 2.<FRAME SRC="1.html"> 3.<FRAMESET cols="40%,60%"> 4.<FRAMESET rows="50%,50%"> 5.<FRAME SRC="3.html"> 6.<FRAME SRC="4.h...
Слайд № 2

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 1.html 2.html 4.html 3.html 1.html 2.html 3.html 4.html

1.<FRAMESET rows="30%,70%"> 2.<FRAMESET cols="50%,50%"> 3.<FRAME SRC="1.html"> 4.<FRAME SRC="2.html"> 5.</FRAMESET> 6.<FRAMESET cols="40%,60%"> 7.<...
Слайд № 3

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13 14 15. 1.html 2.html 3.html 4.html 5.html 6.html

1.<FRAMESET rows="30%,33%,*"> 2.<FRAMESET cols="50%,50%"> 3.<FRAME SRC="1.html"> 4.<FRAME SRC="2.html"> 5.</FRAMESET> 6.<FRAMESET cols="40%,60%"> 7...
Слайд № 4

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 1.html 2.html 3.html 4.html 5.html 6.html

1.<FRAMESET cols="30%,70%"> 2. <FRAME SRC="1.html"> 3.<FRAMESET rows="30%,70%"> 4.<FRAMESET cols="50%,50%"> 5.<FRAME SRC="2.html"> 6.<FRAME SRC="3....
Слайд № 5

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 10. 12. 13. 14. 1.html 2.html 3.html 4.html 5.html 6.html

Зверніть увагу, свідоцтва знаходяться в Вашому особистому кабінеті в розділі «Досягнення»

Всеосвіта є суб’єктом підвищення кваліфікації.

Сертифікат від «Всеосвіти» відповідає п. 13 постанови КМУ від 21 серпня 2019 року № 800 (із змінами і доповненнями, внесеними постановою КМУ від 27 грудня 2019 року № 1133)

Обрати Курс або Вебінар.

Співпраця із закладами освіти.

Дізнатись більше про сертифікати.


Приклад завдання з олімпіади Українська мова. Спробуйте!

Всеосвіті 3 роки!

Святкуємо гучно та з подарунками!

+ 10 подарункових боксів з фірмовими товарами від «Всеосвіти»!

+ 10 подарункових боксів з фірмовими товарами від «Всеосвіти»!

до розіграшу подарунків залишилось
00
00
00
00