- •Тема 2 Структура й елементи гіпертекстових документів
- •Загальна характеристика і структура html-документа
- •2.Тіло документа та оформлення його основних фрагментів
- •2.1. Тіло документа
- •2.2. Теги логічного форматування тексту
- •2.3. Теги фізичного форматування тексту
- •3. Оформлення списків термінів і визначень
- •3.1. Марковані списки
- •3.2. Створення нумерованих списків
- •3.3. Списки визначень
- •3.4. Багаторівневі спискові структури
- •4. Використання графіки при оформленні електронного видання
- •5.Включення до видання посилань та коментарів
- •6. Оформлення таблиць
- •7.Фреймова структура електронного видання
- •8. Html-форми
- •9. Поняття про динамічний html і його компоненти
7.Фреймова структура електронного видання
Для зручності роботи з електронним виданням вікно перегляду браузера може бути примусово розбито на кілька прямокутних областей, що безпосередньо прилягають одна до одної. У кожну таку область можна завантажувати окремі HTML-документи, переглядаючи кожен з них незалежно від інших. Вперше можливість роботи з фреймових структур була реалізована в браузері фірми Netscape версії 2.0. MS Internet Explorer підтримує фрейми починаючи з версії 3.0.
Фреймова структура доцільна для застосування в таких випадках:
• для представлення інформації в декількох суміжних областях вікна перегляду браузера, кожна з яких проглядається незалежно, щоб мати можливість зіставити цю інформацію;
• для того щоб у певній частині екрану розміщувалася інформація, яка повинна постійно перебувати в полі зору користувача;
• для того щоб мати можливість керувати завантаженням документів в одну з областей, працюючи в іншій частині екрана.
В цілому ж фреймова структура надає користувачеві зручні засоби навігації в межах електронного документа, практично не реалізовуються при інших варіантах. Мабуть, з цих причин фреймова структура досить часто використовується для реалізації Web-сторінок, особливо вхідних або особових сторінок сайтів, тобто тих, на які користувач потрапляє при початковому завантаженні цього сайту.
Принципова відмінність HTML-коду, що задає фреймову структуру, полягає в тому, що замість тегу <BODY> в ньому використовується тег-контейнер <FRAМESET>, параметри якого і визначають розбиття площі вікна браузера на окремі ділянки або області. Для цього у тегові <FRAMESET> використовується два параметри: ROWS і COLS. Параметр ROWS ділить вікно браузера на горизонтальні смуги, a COLS - на вертикальні. Розміри цих смуг можуть встановлюватися в абсолютних одиницях - пікселях і у відносних - відсотках або пропорційних одиницях. Перші два способи завдання вже розглядалися раніше і не потребують додаткових коментарів, третій же спосіб використовує кількість зірочок (*), кожна з яких представляє одну частину цілого, величина цієї частини в даному випадку визначається як висота вікна браузера, поділена на сумарну кількість зірочок під знаком параметра ROW. Всі три способи ділення вікна на смуги ілюструється наведеними нижче прикладами:
<FRAMESET ROWS='10%,80%,10%'>
<FRAMESET ROWS='60,480,60'>
<FRAMESET ROWS='*,8*,*'>.
Всі три варіанти з міткою <FRAMESET> описують розподіл екрану на три горизонтальні смуги, з яких верхня і нижня однакової ширини, а середня у вісім разів ширше кожної з них. Аналогічо описується і поділ на вертикальні смуги за допомогою параметра COLS. Для параметрів ROWS і COLS можливий і змішаний варіант задання значень, коли використовуються два або навіть всі три способи одночасно. Наприклад:
<FRAMESET COLS='70,4*,*,15%'>.
Тег задає розподіл вікна на чотири колонки, перша з яких має ширину в 70 пікселів, остання - 15% від ширини вікна, ширина третьої колонки складає 1 / 5, а другий - 4 / 5 від решти ширини вікна.
Всередині контейнера <FRAMESET> і </ FRAMESET> можуть використовуватися лише вкладені такі ж контейнери або теги <FRAME>, які визначають кожен одиночний кадр. До речі, в тілі документа може бути кілька розташованих послідовно тегів-контейнерів <FRAMESET>, в кожному з яких можуть бути і вкладені аналогічні контейнери. Практично ж такі конструкції використовуються вкрай рідко. Тег <FRAME> розміщується всередині контейнера <FRAMESET> і </ FRAMESET>, причому кількість тегів <FRAME> всередині цього контейнера повинна точно збігатися з числом окремих фреймів, тобто кожен фрейм повинен бути описаний своїм тегом <FRAME>. Тег <FRAME> містить шість параметрів, а саме: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING і NORESIZE.
Найбільш важливий з перерахованих параметрів SRC визначає URL або адресу документа, який спочатку завантажується в даний фрейм. Зазвичай це HTML-документ, що містить і заголовну частину, і тіло. Параметр NAME дозволяє присвоїти цьому фрейму унікальне (не повторюється) ім'я, яке може використовуватися для адреси данному фрейму. У тегу <А> для адресації по фреймах використовується спеціальний параметр TARGET, значенням якого є ім'я відповідного фрейму. Проілюструємо сказане прикладом:
<FRAME SRC='maintenance.htm' NAME='main_frame'>
<A HREF='main_doc.htm' TAR6ET='main_frame'> Основний документ </ A>.
У представленому прикладі в основний кадр (ім'я цього кадру - main_f rame) спочатку був завантажений документ maintenance.htm, тобто зміст електронного видання. Якщо ж підвести покажчик миші до слів «Основний документ», які є покажчиком посилання, і клацнути лівою кнопкою, то в цей фрейм буде завантажений новий документ під назвою main_doc.htm, який знаходиться в тому ж каталозі і являє собою змістову частину цього видання. Таким чином, надання фрейму певного імені дозволяє надалі завантажувати в нього документи.
Параметри MARGINWIDTH і MARGINHEIGHT тегу <FRAME> дозволяють встановити ширину полів фрейму по ширині і висоті. Зазначимо, що ліве і праве поле мають однакову ширину. Те ж саме можна сказати і про верхнє і нижнє поля. Значення цих параметрів задається в абсолютних одиницях-пікселях. Під полями тут мається на увазі вільний простір, де не можуть бути наявні ілюстрації і текст (як і в друкованому виданні). Мінімальне значення цих параметрів, що встановлюється за умовчанням, дорівнює 1 пікселю.
Якщо вміст фрейму не поміщається у відведеній частині вікна браузера, для нього будуть автоматично створюватися смуги прокрутки по потрібній координаті. Для управління цим процесом служить параметр SCROLLING, який може набувати одного з трьох допустимих значень: Yes, No і Auto. Останнє значення встановлюється за умовчанням. Значення No забороняє створення смуг прокрутки, a Yes приводить до обов'язкового їх створення, незалежно від того, потрібні вони чи ні.
Зазвичай користувач може самостійно змінювати розміри фреймів, так само, як і розміри вікна браузера, де вони розміщуються. При таких операціях може порушуватися оптимальне співвідношення між розмірами фреймів і погіршуватися сприйняття інформації з екрана комп'ютера. Для того, щоб запобігти цим дії користувача, служить параметр NORESIZE. Для цього параметра не передбачено будь-яких значень, але саме його використання в описі одного з фреймів забороняє не тільки зміну розміру цього кадру, а й кожного суміжного з ним. Наведемо кілька прикладів видань з використанням фреймових структур. Перший приклад задає структуру з п'яти фреймів, яка утворюється в результаті поділу вікна браузера на три горизонтальні смуги, середня з яких ділиться ще й на дві колонки. Ширина нижньої смуги, як випливає з рядка 3 HTML-коду, становить 50 пікселів, а верхній - восьму частину від висоти залишилася області вікна браузера. Середня смуга розділена на вузьку смужку зліва і вчетверо більше широку частину, що залишилася (див. рядок 5 HTML-коду). Нарешті, ця частина поділена навпіл по горизонталі (см.рядок 7 HTML-коду).
<HTML> <HEAD> <TITLE> Цифрова обробка зображень </ TITLE>
<МЕТА NAME = 'Author' СОNTENT = 'В. А. Вуль'> </ HEAD>
<FRAMESET ROWS='*,7*,50'>
<FRAME SRC='zag.html'scrolling='no'>
<FRAMESET COLS='20%,80%'>
<FRAME SRC='ogl.html'>
<FRAMESET ROWS='*,*'>
<FRAME SRC='lg.html' NAME='gl'>
<FRAME SRC='2g.html' NAME='g2'>
</ FRAMESET> </ FRAMESET>
<FRAME SRC='inf.html' scrolling='no'>
</ FRAMESET>
</ HTML>
Обидва фрейми, в яких виводиться вміст електронного видання, мають найбільші розміри. У більшості випадків зміст можна виводити в один великий кадр, в цьому ж конкретному випадку їх два, що дозволяє в одному вивчати конкретний графічний пакет PhotoShop, а в іншому - загальні методи обробки цифрового зображення, використовувані в даному конкретному випадку, наприклад, стискування зображення.
Якщо пронумерувати розташовані на екрані фрейми, присвоївши їм номери з 1-го по 5-й, то можна помітити, що зміст 1-го, 2-го та 5-го фреймів не змінюється: в 1-й постійно завантажений HTML-файл, відображає заголовок документа (див. рядок 4 вихідного коду), в 5-й - інформація про навчальний заклад та автора електронної допомоги (щоб можна було подивитися інші підручнику на сайті uprint.spb.ru або електронною поштою зв'язатися з автором), а по другий - файл змісту (див. рядок б вихідного коду). У 3-м і 4-м фреймах виводяться параграфи 1-й і 2-й глав: в 3-м фреймі виводиться § 1.1, посилання на який у фреймі 2 Перейдіть іншим кольором як вже використана, а у фреймі 4 відображаються § 2.1. Таким чином, з одного кадру за допомогою посилань здійснюється управління інформацією в двох інших фреймах.
Зазначимо, що фахівці з педагогіки і психології освіти вважають, що не слід відображати на екрані більше 3-х - 4-х фреймів, інакше погіршується процес сприйняття інформації з екрана. Тому наведемо наступний варіант того ж електронного навчального посібника, але з лаконічною 2-фреймовою структурою. Вихідний HTML-код для нього:
<html> <head> <title> Підручник з графіки </ title> </ head>
<frameset cols='20%,*'>
<frame пате='Навігація' target='main' scrolling='auto' src='naviagation.htm' noresize>
<frame name='main' src='content.htm' target='main'> <noframes> <body> <р> Ваш браузер не підтримує фрейми </ р> </ body> </ noframes> </ frameset> </ html>.
Тут відсутні фрейми заголовка і загальної інформації, а змістова частина представлена в одному кадрі замість двох. Кожен читач може сам оцінити, яка структура йому більше подобається, і спробувати сформулювати причини цього. Тут перший фрейм названий «Навігація» (див. рядок 3 вихідного коду), а другий - «main», тобто головний (див. рядок 5 вихідного коду). При початковій завантаженні в головному фреймі виводиться зміст, так як у фреймі «Навігація» назви розділів дано у скороченій формі, щоб зменшити протяжність цього кадру по вертикалі.
Основна адресація виробляється з кадру «Навігація», але посилання працюють і зі змісту в головному фреймі. Для повернення до змісту у фреймі «Навігація» є спеціальна кнопка «Назад до змісту». Під фреймах зроблений фоновий малюнок, який поліпшує дизайн видання. Розміри фреймів не можна змінити (див. рядок 4 у вихідному коді).
З інших відмінностей відзначимо вставку у вихідний код рядків 6 і 7 для того випадку, коли браузер користувача не підтримує фреймової структури. У цьому випадку буде видане повідомлення «Ваш браузер не підтримує фрейми», оскільки тег-контейнер <NOFRAMES> містить усередині контейнер <BODY> і </ BODY>, розпізнається усіма без винятку браузерами, в результаті чого вони виводять у вікні вміст цього контейнера . При відсутності цих двох контейнерів такий браузер видав би повідомлення про помилку або ж, що ще гірше, не вивів би нічого в своєму вікні. Тег-контейнер <NOFRAMES> передбачений спеціально для такого випадку.
З інших зауважень можна вказати, що зірочка (*) у другому рядку вихідного коду інтерпретується як «решта», замість неї можна було б написати 80% - і нічого б не змінилося. Ще раз хочеться звернути увагу на особливості навігації при використанні фреймів, інакше - на взаємодію фреймів. У зв’язку х тим, що у фреймі «Навігація» як значення параметра «TARGET» вказано «main» (див. рядок 3 вихідного коду), то всі посилання з кадру «Навігація» будуть завантажувати документи у фрейм «main». Кнопка у фреймі «Навігація» відіграє ту саму роль, що й зображення - покажчик посилання. Нарешті, малюнки в цьому підручнику виводяться в плаваючих вікнах, які можна розташувати так, як зручно користувачеві.