Використання посилань у фреймах
У вправі 3 не використані гіперпосилання — між фреймами немає взаємозв'язку. Проте це не завжди зручно: навчальних закладів може бути багато, а поділ сторінки на велику кількість фреймів призводить до розпорошування уваги відвідувача сайту. Тому, розглянемо веб-сторінку з навігаційною панеллю, яка розміщена у лівій меншій частині екрана, при цьому необхідна інформація відображатиметься у більшій правій частині так, як це показано в табл.8.
Таблиця 8. Навігаційна панель
Схема розміщення фреймів, в якій використовується
Навігаційна панель |
Документ з інформацією про обрану відвідувачем сайту спеціальність
|
Якщо заплановано використовувати певний фрейм для відображення інформації, яка змінюватиметься після вибору відвідувачами іншого посилання, то йому надають ім'я. Наприклад, <FRAME NAME="frame1". Веб-сторінка з гіперпосиланнями, що виконуватиме роль навігаційної панелі, складається із сукупності тегів <А>...</А>. У них крім адреси файлу, пов'язаного з гіперпосиланням, слід зазначити ім'я фрейму, в якому цей файл відображатиметься. Для цього використовують атрибут TARGET, значенням якого є ім'я відповідного фрейму. Наприклад: <А HREF="2.html" TARGET="frame1">Спеціальність ЕП»</А>
Вправа 4
Сформуємо веб-сторінку з навігаційною панеллю та областю відображення документів. Використайте файли з описами спеціальностей із вправи 2, а сторінку np.html з навігаційною панеллю та поділену на фрейми сторінку lndex.html створіть самостійно.
1. Створіть HTML-документ, який розмітьте за допомогою фреймів і збережіть у файлі index.html.
<HTML>
<TITLE>Спеціальності</TITLE>
<FRAMESET COLS="20%,*">
<FRAME SRC="np.html">
<FRAME NAME="framel">
</FRAMESET>
</HTML>
2. Створіть HTML-документ, який міститиме навігаційну панель, і збережіть його у файлі np.html.
<HTML>
<TITLE>Спеціальності</TITLE>
<BODY>
<H2><A HREF="1.html" TARGET="frame1">Обслуговування комп’ютерних систем та мереж</A></H2>
<H2><A HREF="2.html" TARGET="frame1">Економіка підприємства</A></H2>
<H2><A HREF="3.html" TARGET="frame1">Монтаж і експлуатація електроустаткування підприємств і цивільних споруд</A></H2>
<H2><A HREF="4.html" TARGET="frame1">Обслуговування та ремонт електропобутової техніки </A></H2>
<H2><A HREF="5.html" TARGET="frame1">Технічне обслуговування і ремонт устаткування підприємств машинобудування</A></H2>
</BODY>
</HTML>
3. Відкрийте файл index.html у вікні браузера. На рис. 9 показано, який вигляд має поділене на фрейми вікно з навігаційною панеллю після першого завантаження веб-сторінки, поки користувач не вибрав гіперпосилання.
Рис.9. Веб-сторінка index.html після першого завантаження
У документі index.html у п'ятому рядку, в тегу <FRAME>, задано лише один атрибут — NAME, тому після першого завантаження веб-сторінки права частина буде порожньою. Щоб цього уникнути, використовують атрибут SRC для повідомлення адреси файлу, який повинен відкриватись у цьому фреймі під час першого завантаження сторінки. Зазвичай це файл веб-сторінки з графічними вставками та загальною інформацією про сайт.
Рис. 10. Вікно браузера після редагування
Лістінт файла index.html
<HTML>
<TITLE>Спеціальності</TITLE>
<FRAMESET COLS="20%,*">
<FRAME SRC="np.html">
<FRAME src="nemk.html" NAME="framel">
</FRAMESET>
</HTML>
Лістінт файла nemk.html
<HTML>
<TITLE>НЕМК</TITLE>
<img src="немк.jpg" align="center" HSPACE=200 VSPACE=5 ALT= WIDTH=800 HEIGHT=600>
<p align="center">
<a href="nemk.com.ua">nemk.com.ua - пишіть листи
</a>
</HTML>