Розробка уроку дистанційного навчання з предмету "Основи компютерної графіки та Web-дизайну"
Розробка уроку
для дистанційного навчання з предмету
«Основи комп’ютерної графіки та Web - дизайну» № 18
для здобувачів освіти групи № 68
за професійною профільною компетентністю ООI та ПЗ-2.6.3.
Базові технології створення Web - сторінок
Тема уроку: ЛПР «Розмітка Web – сторінок за допомогою фреймів»
План роботи
1. Ознайомитись з поняттям фреймів
2. Навчитися форматувати сайти за допомогою фреймів
3. Практичне завдання
Зміст роботи
Створення нових вікон, фреймів
Фрейм (frame) – це окремий, закінчений HTML-документ, який разом з іншими HTML-документами може бути відображений у вікні web-браузера.
Фрейми за своєю суттю дуже схожі на клітинки таблиці, проте більш універсальні. Фрейми розбивають web-сторінку на окремі міні-кадри, розташовані на одному екрані, які є незалежними один від одного. Кожне вікно може мати власну адресу. При натисканні на будь-яку з посилань, розташованих в одному фреймі, ви можете розглядати сторінки, показані в іншому вікні.
Фрейми досить часто використовувалися для навігації по web-сайту. При цьому навігаційна сторінка розташовується в одному вікні, а сторінки з текстом – в іншому.
Формування фреймової структури
Для початку ми повинні уявити собі загальний вигляд сторінки – де розташувати фрейми та якого вони будуть розміру. Потім можна подумати про їх зміст. Нижче наводиться код простої фреймової структури з використанням тегу <FRAMESET>. Зверніть увагу: сторінка з фреймової структурою не містить тега <ВОDY>.
<HTML>
<HEAD>
<TITLE> Приклад фреймів </ TITLE>
</ HEAD>
<FRAMESET COLS="25%, 75%">
<FRAME SRC="menu.html">
<FRAME SRC="main.html" NAME="main">
</ FRAMESET>
</ HTML>
Підготовка вмісту фрейма
Тепер завантажимо фрейми з вмістом. Задамо сторінку menu.html в лівому фреймі, де ми збираємося клацати мишею, перемикаючись між двома сторінками у правому фреймі. menu.html – це звичайна НТМL-сторінка, побудована як зміст. Насправді ми можемо взяти готову сторінку зі змістом і використовувати її. Майте на увазі, що цей фрейм вузький і високий, так що сторінка, яка буде в нього завантажуватися, повинна бути спроектована відповідним чином. Тепер ми повинні визначити, де будуть з'являтися інші сторінки при натисканні мишкою на посиланні. Оскільки ми хочемо, щоб вони відображались в правому фреймі, додамо атрибут ТАRGET (TARGЕТ = "main") в тег посилання. Це означає, що, коли користувач клацає на посиланні, що викликається сторінка з'являється в фреймі main. Ми відображаємо всі сторінки у фреймі main, тому давайте додамо атрибут ТАRGЕТ = "main" в усі теги посилань у змісті. Якщо ми не визначимо атрибут ТАRGЕТ, то сторінка з'явиться там, де ми клацнули мишкою, – в лівому фреймі.
Підготовка фрейму main
Правий фрейм main буде містити самі HTML-сторінки. Ваше завдання – спроектувати їх так, щоб вони добре виглядали в меншому, ніж зазвичай, вікні, тому що частина екрана буде зайнята лівим кадром змісту. Але більше ці сторінки нічим не примітні.
Використання тега <NOFRAMES>
У деяких користувачів ще залишилися браузери, які не вміють поводитися з фреймами. З цієї причини розумно надати доступ до версії ваших основних сторінок без фреймів. Якщо читач із застарілим браузером опиниться на вашій сторінці з фреймової структурою, все, що знаходиться на ній між тегами <NOFRAMES> і </NOFRAMES>, буде виглядати відмінно – браузер просто проігнорує фрейми. Ось чому обов'язково потрібно використовувати теги <ВODY> </ВОDY>. Можливо, екран без фреймів доведеться організувати інакше.
Приклад сторінки з фреймової структурою з доданим в кінці розділом <NOFRAMES>.
<HTML>
<HEAD>
<TITLE> Приклад фреймів </TITLE>
</HEAD>
<FRAMESET COLS="25%, 75%">
<FRAME SRC="menu.html">
<FRAME SRC="main.html" NAME="main">
<NOFRAMES>
Ви переглядаєте цю сторінку за допомогою браузера, який не підтримує фрейми.
</NOFRAMES>
</FRAMESET>
</HTML>
Майте на увазі, що браузер, який підтримує фрейми, проігнорує все, що знаходиться між тегами <NOFRAMES> і </NOFRAMES>. І навпаки, не підтримуючий фрейми браузер проігнорує все, що знаходиться між тегами <FRAMESET> і </FRAMESET>. Код без фреймів можна помістити і в початок, і в кінець сторінки.
Макетування фреймів - тег <FRAMESET>
Теги <FRAMESET> обрамляють текст, що описує компонування фреймів. Тут розміщується інформація про кількість фреймів, їх розмірах і орієнтації (горизонтальної або вертикальної). У тега <FRAMESET> тільки два можливих атрибути: ROWS, що задає кількість рядків, і СОLS, що задає число стовпців. Між тегами <FRAMESET> не потрібно вказувати тег <ВОDY>, але його можна помістити між тегами <NOFRAMES> наприкінці фреймової структури. Між тегами <FRAMESET> не повинно бути ніяких тегів або атрибутів, які зазвичай використовуються між тегами <ВОDY>. Єдиними тегами, які можуть перебувати між тегами <FRAMESET> і </ FRAMESET>, є теги <FRAME>, <FRAMESET> і <NOFRAMES>. Це спрощує завдання. В основному все пов'язано з тегами <FRАМЕ> та їх атрибутами. Якщо ж ви хочете поекспериментувати, можна створити вкладені одна в одну теги <FRAMESET> аналогічно тегам <ТАВLЕ>.
Атрибути ROWS і СОLS. Для кожного рядка і стовпця, згаданих в тезі <FRAMESET>, необхідний свій набір тегів <FRАМЕ>.
Атрибут ROWS тега <FRAMESET> задає кількість і розмір рядків на сторінці. Кількість тегів <FRАМЕ> повинна відповідати зазначеному числу рядків. Праворуч від знаку "=" можна визначити розмір кожного рядка в пікселях, відсотках від висоти екрану або у відносних величинах (зазвичай це зазначення зайняти частину, що залишилася місця). Слід користуватися лапками та комами, а також залишати пробіли між значеннями атрибутів. Наприклад, наступний запис формує екран, що складається з трьох рядків: висота верхньої – 20 пікселів, середньої – 80 пікселів, нижньої – 20 пікселів:
<FRAMESET ROWS="20, 80, 20">
Наступний тег – <FRAMESET> – створює екран, на якому верхній рядок займає 10% висоти екрану, середня – 60%, а нижня – решту 30%:
<FRAMESET ROWS="10%, 60%, 30%">
Можна задати відносні значення в комбінації з фіксованими, вираженими у відсотках або пікселях. Наприклад, наступний тег створює екран, на якому верхній рядок має висоту 20 пікселів, середня – 80 пікселів, а нижня займає все місце, що залишилося:
<FRAMESET ROWS="20, 80, *">
Атрибут СOLS. Стовпці задаються так само, як рядки. Для них застосовні ті ж атрибути.
Тег <FRАМЕ> визначає зовнішній вигляд і поведінка фрейму. Цей тег не має закриває тега, оскільки в ньому нічого не міститься. Вся суть тега <FRАМЕ> в його атрибути. Їх шість: NАМЕ, MARGINWIDTH, MARGINHEIGHT, SCROLLING, NORESIZE і SRC.
Атрибут NАМЕ. Якщо ви хочете, щоб при клацанні мишею на посиланні нижче відповідна сторінка відображалась в певному фреймі, необхідно вказати цей фрейм, щоб сторінка "знала", що куди завантажувати. У попередніх прикладах ми назвали великий правий фрейм main, і саме в ньому з'являлися сторінки, вибрані з змісту в лівому фреймі. Фрейм, в якому відображаються сторінки, називається цільовим (target). Фрейми, які не є цільовими, іменувати не обов'язково. Наприклад, можна записати такий рядок:
RАМЕ SRC = "my.html" NАМЕ = "main">
Імена цільових фреймів повинні починатися з букви або цифри. Одні й ті ж імена дозволяється використовувати в декількох фреймових структурах. По клацанню миші відповідні сторінки будуть відображатися в іменованому фреймі.
Атрибут МАRGINWIDTH діє аналогічно атрибуту таблиць CELLPADDING. Він задає горизонтальний відступ між вмістом кадру і його межами. Найменше значення цього атрибута дорівнює 1. Не можна вказати 0. Можна не привласнювати нічого – за замовчуванням атрибут дорівнює 6.
Атрибут МАRGINHEIGHT діє так само, як і МАRGINWIDTH. Він задає поля у верхній і нижній частинах фрейму.
Атрибут SCROLLING дає можливість користуватися прокруткою у фреймі. Можливі варіанти: SCROLLING = yes, SCROLLING = nо, SCROLLING = аutо. SCROLLING = yes означає, що у фреймі завжди будуть смуги прокручування, навіть якщо це не потрібно. Якщо задати SCROLLING = no, смуг прокручування не буде, навіть коли це необхідно. Якщо документ занадто великий, а ви задали режим без прокручування, документ просто буде обрізаний. Атрибут SCROLLING = аutо надає браузеру самому вирішувати, потрібні смуги прокручування чи ні. Якщо атрибут SCROLLING відсутній, результат буде таким же, як при використанні SCROLLING = аutо.
Як правило, користувач може, переміщаючи кордон фрейму мишкою, змінити його розмір. Це зручно, але не завжди. Іноді потрібно атрибут NORESIZE. Пам'ятайте: всі межі фрейму, для якого ви задали NORESIZE, стають нерухомими – відповідно, може виявитися так, що розміри сусідніх фреймів теж стануть фіксованими. Скористайтеся цим атрибутом з обережністю.
Атрибут SRС застосовується в теге FRАМЕ при розробці фреймової структури для того, щоб визначити, яка сторінка з'явиться в тому чи іншому кадрі. Якщо ви задасте атрибут SRС не для всіх фреймів, у вас виникнуть проблеми. Навіть якщо сторінки, які відображаються у фреймі, вибираються в сусідньому фреймі, ви повинні як найменш задати для кожного фрейма початкову сторінку. Якщо ви не вкажете початкову сторінку і URL, фрейм виявиться порожнім, а результати можуть бути найнесподіванішими.
Щоб розібратися з атрибутом ТАRGЕТ, необхідно повернутися до простого прикладу з кадром змісту. Коли користувач клацає мишкою на одному з посилань у лівому фреймі, відповідна сторінка повинна з'явитися в правому фреймі, а зміст залишається незмінним. Щоб цього досягти, потрібно визначити цільової фрейм ТАRGЕТ, в якому буде відображатися сторінка для кожного пункту змісту. Цільові фрейми задаються в посиланнях лівого фрейму. От навіщо всім кадрам у фреймовій структурі були присвоєні імена. Правий фрейм називається main, так що потрібно в кожному посиланні додати атрибут ТАRGЕТ = "main", в результаті чого відповідна сторінка з'явиться у фреймі main. Зверніть увагу: кожне посилання містить атрибут ТАRGЕТ = "main", який по клацанню миші відображає сторінку у фреймі main.
Атрибут ТАRGЕТ можна задавати для декількох різних тегів. При використанні в тезі <ВАSЕ> він направляє всі посилання в певний цільової фрейм, якщо надалі не передбачено інше. Можна задати атрибут ТАRGЕТ в тезі <АRЕА> в активному зображенні або в тезі <FОRМ>. Фрейми корисні для організації форм. Користувачі будуть бачити одночасно і форму, і результат свого вибору. Зазвичай при клацанні мишею на кнопці Submit форма зникає, і з'являється сторінка з результатами вибору. Поєднання форм і фреймів може виявитися зручним способом навігації.
Завдання: створити сторінку з фреймами, таку, щоб в одному фреймі було навігаційне меню, в другому – загальні відомості, у третьому – фотографії.
Забезпечити відкриття сторінок завжди в одному фреймі, повернення на головну – на кожній сторінці.
1. Всі практичні роботи робимо у Word – документі. На диску D створюємо папку під назвою «ЛПР ГР. 68.»
2. Кожне завдання з практичної роботи зберігаємо в папку за допомогою скрін шоту.
3. По закінченню роботи відправляєте готову роботу на перевірку по електронній почті викладачу.
Павліна Білоус <pavlina_bilous290392@ukr.net>
1
про публікацію авторської розробки
Додати розробку