Сфери застосування фреймів
Розробникам HTML-документів надається досить багатий вибір форм відображення інформації на сторінках. Текстова і графічна інформація може бути впорядкована і організована за допомогою списків, таблиць або просто за допомогою параметрів вирівнювання, завдання горизонтальних ліній, поділу на абзаци. Іноді цих можливостей виявляється недостатньо і тоді доводиться розбивати вікно перегляду браузера на окремі області або фрейми (frames). У ряді російськомовних описів мови HTML замість терміна фрейми використовується термін кадри. Частота використання обох термінів приблизно однакова.
Вибір фреймової структури відображення інформації на WWW виправданий в наступних випадках:
- при необхідності організувати управління завантаженням документів в одну з подобластей вікна перегляду браузера при роботі в інший подобласти;
- для розташування в певному місці вікна перегляду інформації, яка повинна постійно перебувати на екрані незалежно від змісту інших підгалузей екрану;
- для подання інформації, яку зручно розташувати в декількох суміжних підгалузях вікна, кожна з яких може проглядатися незалежно.
Наведений перелік не є вичерпним все можливі випадки, Де можна застосувати фрейми, а носить рекомендаційний характер.
Розглянемо спочатку типові варіанти використання фреймів на прикладах реально існуючих HTML-документів, а потім звернемося до правил розробки документів, що містять фрейми.
На рис. 5.1 показана одна з HTML-сторінок агентства "Фінмаркет", що спеціалізується на наданні інформації з фінансових і фондових ринків Росії.
Мал. 5.1. Типовий Web-документ з фреймової структурою
На цій сторінці вікно браузера розбивається на три фрейми. Нижня частина вікна займає 20% висоти всього вікна і містить постійну інформацію, яка в даному випадку є графічне меню, що дозволяє в будь-який момент звернутися до найбільш важливих розділів. Цей фрейм не може змінювати свої розміри по командам користувача і не має смуг прокрутки. Верхня частина вікна (складова 80% висоти) розділена по горизонталі на два фрейми. Лівий фрейм містить зміст документів, які можуть бути переглянуті користувачем. Правий фрейм, що займає більшу частину вікна перегляду, призначений для відображення самих документів. При первинному завантаженні ці два фрейми ділять вікно браузера по горизонталі в співвідношенні 15% на 85%. Це співвідношення може змінюватися користувачем при перегляді, що дозволяє вибрати оптимальні розміри фреймів з урахуванням вмісту завантажених документів. Кожен з цих фреймів має свою смугу прокрутки, що забезпечує можливість перегляду всього вмісту фрейма незалежно від розміру самого фрейму, всього вікна браузера і використовуваних шрифтів. При виборі будь-якого посилання в лівому фреймі відповідний документ буде завантажений в правий фрейм. Така структура дозволяє одночасно бачити на екрані і зміст документів, і вміст обраного документа.
Наведемо без пояснень фрагмент HTML-коду, за яким побудований документ з даною структурою:
Даний приклад показує найбільш типове використання фреймових структур, коли один фрейм служить змістом документів, а інший використовується для завантаження їх вмісту. Рішення такого завдання без застосування фреймів зазвичай виконується наступним чином. На одній зі сторінок розташовують зміст, що складається з посилань на інші документи або їх окремі фрагменти. При переході по такому посиланню зміст зникає, а на його місце завантажується потрібний документ, після прочитання якого зазвичай необхідно знову повернутися до змісту. При використанні фреймів таке повернення стає непотрібним, так як зміст постійно розташовується на частині екрана.
В інтернеті можна знайти
сайт електронного видання популярного в Санкт-Петербурзі адресно-телефонного довідника "Весь Петербург".
Електронна версія довідника доступна за адресою http://www.allpetersburg.ru і дозволяє знаходити потрібні відомості за запитами користувача. Дана сторінка документа також має фреймову структуру і складається з двох фреймів, причому перший з них має ширину 100 пікселів, а другий займає все ширину вікна перегляду. Фрейм, розташований з лівого боку, використовується для графічного меню, Постійно присутнього на екрані, а також містить логотип компанії "Nevalink". Другий фрейм містить документ, який в даному випадку є формою для запиту користувача. Структура цієї сторінки визначена наступним HTML-кодом:
Фрейми дуже схожі на таблиці - і ті і інші здійснюють розбиття вікна перегляду браузера на прямокутні області, в яких розташовується деяка інформація. Однак за допомогою фреймів можна вирішити не тільки завдання форматування сторінок документа, але організувати взаємодію між ними. Принципова різниця між фреймами і таблицями полягає в тому, що кожному кадру повинен відповідати окремий HTML-документ, а вміст всіх елементів таблиці завжди є частиною одного документа. Крім того, відображається у фреймі сторінка може прокручуватися при перегляді незалежно від інших. Кожен фрейм по суті є окремим "міні-браузером". На відміну від фреймів, вся структура яких завжди представлена \u200b\u200bна екрані, таблиці можуть повністю не поміщатися в вікні і бути переглянуті тільки по частинах. Звідси випливає висновок, що якщо в HTML-таблицях загальне число осередків практично не обмежена і може досягати декількох сотень, то число фреймів в документі зазвичай не перевищує кількох одиниць.
Порада
Якщо потрібно тільки відформатувати документ, то для цього достатньо обмежитися застосуванням таблиць. Якщо ж необхідно вирішити більш складні завдання, наприклад, організувати взаємодію між підобласті вікна або створити подобласти, постійно розташовані на екрані, то тут зручно застосувати фрейми.
В кінцевому підсумку, вибір структури документа - табличній або фреймовой - залежить від багатьох факторів і не може бути однозначно визначений.
існують також сторінки, які на вигляд побудована аналогічно попереднім. Для прикладу можна взяти сторінку дуже популярного в усьому світі збірника програмних продуктів, Призначених в основному для роботи з Інтернетом. Адреса сервера http://www.tucows.com. Зауважимо, що ім'я сервера визначила абревіатура, отримана від скорочення повної назви збірки - The Ultimate Collection of Winsock Software. Оскільки скорочення tucows виявилося співзвучним словосполученню two cows (дві корови), то на сторінках сервера часто-густо зустрічається зображення корів, а рейтинг програмних продуктів оцінюється в кількості мукання ( "Моо") і графічно зображується у вигляді ряду з відповідного числа корів. Більшість сторінок сервера побудовано однотипно - в лівій частині вікна наводиться список доступних розділів, а в правій частині - перелік програмних продуктів, обрана Вами. На перший погляд структура документа повинна мати приблизно такий же вигляд, як і в попередніх прикладах. Однак в цьому документі фрейми не використовуються! Дана сторінка побудована за допомогою таблиці, яка складається всього лише з одного рядка з двома осередками. Таблиця не має обрамлення і лише має на меті форматування сторінки. Враження поділу екрана на дві частини по вертикалі створено шляхом використання фонового графічного зображення, що містить вертикальну лінію, А зовсім не сіткою таблиці. У цьому можна переконатися, якщо виконувати перегляд сторінки без завантаження зображень. Використання таблиці тут, мабуть, обумовлено міркуваннями більшої доступності документів, оскільки фрейми дозволяють відображати не всі браузери.
Недоліком такого підходу в даному випадку є необхідність повторення в кожному документі всього списку розділів (ліва частина сторінки), що незначно збільшує розмір файлів.
Порівняння наведених прикладів показує, що використання таблиць і фреймів може іноді бути взаємозамінним і визначається побажаннями розробників. Зауважимо, що часто при погляді на сторінку з відображеним на ній документом неможливо визначити, як вона побудована. Кінцевому користувачеві знання внутрішньої структури документа не потрібно, однак при розробці власних Web-сторінок ознайомлення з вихідним кодом існуючих документів було б вкрай корисно. У першому прикладі (див. Рис. 5.1) фреймова структура документа відразу ж видно - наявність двох вертикальних смуг прокрутки вже визначає присутність окремих фреймів. Наступні два приклади зовні дуже схожі, причому неможливо визначити, що перший з них побудований за допомогою фреймів, а другий - за допомогою таблиць. Відмінності будуть проявлятися тільки при роботі з ними. У прикладі адресно-телефонного справочнікапрі прокручуванні документа ліва частина вікна буде залишатися на місці, що можливо тільки при наявності фреймової структури. У наступному прикладі (збірки програмних продуктів) при прокручуванні зміщуватиметься весь вміст вікна.
Подивитися структуру документа при роботі з браузером Netscape можна скориставшись пунктом Page Info (у версіях 3.x браузера Netscape цей пункт меню називався Document Info) меню View (рис. 5.2).
Мал. 5. 2
.
Меню View браузера Netscape
Крім того, завжди можна ознайомитися з вихідним HTML-кодом всього документа, скориставшись пунктом Page Source меню View (або пунктом View Frame Source контекстного меню, що викликається правою кнопкою миші, для перегляду HTML-коду документа, завантаженого в обраний фрейм).
Порада
Не слід без необхідності зловживати використанням фреймів, причому їх кількість не повинна перевищувати трьох-чотирьох.
Нерідко на реальних сторінках в інтернеті можна побачити і такі випадки використання фреймів: два суміжних фрейма використані для завантаження документів, які зручно переглядати одночасно і зіставляти один з одним. У кожному з двох документів, що завантажуються у фрейми, використана табличная форма подання інформації. В результаті такої організації даних кожна з двох таблиць може бути переглянута (або роздрукована) окремо, а може вивчатися в порівнянні з іншого.
Всі наведені приклади даного розділу взяті зі сторінок популярних WWW-серверів і, мабуть, можуть служити зразками застосування фреймів в HTML-документах.
Наступні розділи даної глави присвячені правилам запису документів, що містять фрейми.
Правила опису фреймів
Перейдемо тепер до розгляду правил записи тегів, які використовуються для документів з фреймової структури.
Давайте для початку розглянемо повний HTML-код, який створює документ з фреймами середньої складності:
<![CDATA[
</p>
<p>]]>
Цей приклад створює сторінку з фреймами, показану на рис. 5.3. Як ви бачите, цей HTML-код визначає чотири фрейми. Верхній фрейм займає всю ширину сторінки і містить заголовок. Далі йдуть два центральних фрейма, один з яких розташований з лівого боку і займає 25 відсотків від ширини екрану, а другий займає місце, що залишилося. Останній, четвертий фрейм займає нижню чверть екрану. У кожен з фреймів завантажується окремий HTML-документ, ім'я якого визначається параметром SRC.
Як видно з прикладу, для опису структури фреймів застосовуються теги