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

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

 

Мета:

•           познайомити учнів з видами гіперпосилань; формувати навички створення гіперпосилань між 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 у вікні браузера.