Урок: "Поняття про структуру веб-сайту. Фрейми, теги й атрибути фреймів. Використання посилань у фреймах."
Мета уроку: ✔ познайомити учнів з видами гіперпосилань; формувати навички створення гіперпосилань між HTML-документами та в межах одного HTML-документа; ✔ розвивати логічне мислення, творчий підхід до роботи; ✔ виховувати культуру спілкування, культуру представлення інформації.
Тема: Поняття про структуру веб-сайту. Фрейми, теги й атрибути фреймів. Використання посилань у фреймах. Використання посилань у фреймах
Мета:
- познайомити учнів з видами гіперпосилань; формувати навички створення гіперпосилань між HTML-документами та в межах одного HTML-документа;
- розвивати логічне мислення, творчий підхід до роботи;
- виховувати культуру спілкування, культуру представлення інформації.
Використане обладнання: комп’ютер; дошка;
Хід уроку.
1.Актуалізація опорних знань.
Фронтальне опитування:
- Як створюється таблиця на веб-сторінках?
- Які використовуються атрибути для оформлення таблиці?
2. Мотивація навчальної діяльності.
Ви, мабуть, помітили, що користуватися створеним сайтом не дуже зручно, оскільки для переходу на сторінку з головним меню необхідно клацати кнопку Назад. Тому в мові HTML є засіб, за допомогою якого можна створити меню, що постійно відображатиметься під час перегляду сайту. Інформація, що відкривається за допомогою його посилань, буде розташована в іншому наперед визначеному місці.
Список усіх таких посилань, який фактично є змістом веб-сайту і постійно відображається на екрані, називають меню сайту або навігаційним меню. Типове меню складається з графічних зображень у вигляді кнопок або з текстових гіперпосилань, призначених для переходу в основні розділи сайту. Продумане навігаційне меню може легко провести відвідувача сайту всіма основними і додатковими розділами. Постійне відображення меню суттєво спрощує навігацію розділами, тому відвідувачі можуть більше часу присвячувати опрацюванню веб-сайту.
3. Повідомлення теми і завдань уроку.
На уроці ви повинні:
- познайомитись з тегами створення фреймів;
- вивчити теги створення фреймів;
- навчитися застосовувати теги створення посилань;
- зв’язати свої та HTML-документи, заготовлені вашими однокласниками із вашою домашньою сторінкою.
4. Виклад навчального матеріалу, виконання практичних завдань.
Фрейми, їхні теги й атрибути
Веб-сторінка сайту може містити кілька блоків або вікон, які називають фреймами, або кадрами. У кожному з них відображається свій HTML-документ. В одному фреймі може міститися навігацій не меню, а в іншому - відкриватися веб-сторінки, на які вказують його пункти.
Для того, щоб створити веб-сторінку з фреймами, потрібно кілька HTML-документів. В одному з них задають розмітку екрана, тобто розташовують у вікні браузера фрейми, кожному з яких призначають свої документи.
Сторінка з розміткою, як і звичайна, починається з тегу <HTML> і закінчується тегом </HTML>. Для поділу екрана на кілька фреймів використовують теги <FRAMESET> і </FRAMESET>. Перший має бути розташований після тегу заголовка, але перед тегом <BODY>. Іноді в таких документах зовсім не використовують тег <BODY>. Два фрейми можна розташовувати поруч по горизонталі або один над одним. У першому випадку використовують атрибут COLS, а в другому — атрибут ROWS тегу <FRAMESET>. Для поділу вікна на фрейми через кому записують два числа, які визначають розміри фреймів. Для трьох фреймів потрібно три числа. Розміри фреймів вимірюють у пікселах або відсотках від розміру екрана. Якщо потрібно зазначити, що фрейм займає те місце, яке зали шилося, використовують символ.
Наприклад, тег <FRAMESET ROWS="150, *"> задає поділ вікна на два горизонтальні фрейми, один з яких має висоту 150 пікселів, а другий займає те місце, що залишилося. Тег <FRAMESET COLS="20%, 55%, *"> задає поділ вікна на три вертикальні фрейми, один з яких займає 20 % від ширини екрана, другий — 55 %, а третій займає те місце, що залишилося. Можна використовувати одночасно і горизонтальний, і вертикальний поділ вікна на фрейми — це роблять за допомогою вкладення тегів <FRAMESET> один в один.
Після поділу екрана на вікна для кожного фрейму слід задати HTML-документ, який відображатиметься в ньому. Для цього використовують тег <FRAME> з атрибутами, що керують властивостями фреймів:
- SRC — задає ім'я файлу, що відображатиметься у фреймі;
- NAME — задає ім'я фрейму;
- SCROLLING — визначає наявність (значення yes) або відсутність (значення по) смуг прокручування у вікні фрейму (за замовчуванням — yes);
- NORESIZE — забороняє користувачу змінювати розміри фрейму;
- BORDER — визначає ширину розділювальної смуги між фреймами в пікселях;
- BORDERCOLOR — визначає колір розділювальної смуги між фреймами;
- MARGINHEIGHT — додає порожнє поле, висота якого визначена в пікселях, між верхньою межею фрейму і початком тексту або графіки;
- MARGINWIDTH — додає порожнє поле, ширина якого визначена в пікселах, між боковими межами фрейму і початком тексту або графіки.
Оскільки фрейми підтримують не всі браузери, необхідно помістити тег <NOFRAME> перед тегом <BODY>, а між <BODY> І </BODY> записати повідомлення, яке з'являтиметься у вікні, якщо браузер не підтримує фрейми. Після </B0DY> має йти </N0FRAME>.
Робота з підручником
Практичне завдання
Розмістимо на сторінці три документи про навчальні заклади (див. вправу 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 у вікні браузера.
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 у вікні браузера.
про публікацію авторської розробки
Додати розробку