Випуск №14. Фрейми в HTML

21

Всім доброго часу доби! З Вами Бернацький Андрій.

Перш, ніж перейти безпосередньо до статті, я Вам хочу дати посилання на відео-версію даної теми:

Відео версія 14 уроку

У цьому випуску ми поговоримо про фреймів у HTML. Фрейми по своїй суті дуже схожі на таблиці, але на відміну від таблиць, кожен фрейм незалежний і в кожному з них може бути окрема web-сторінка з своєю адресою.

Випуск №14. Фрейми в HTML

На малюнку бачимо досить поширену структуру сайту. Її можна представити у вигляді таблиці, а можна все це зробити за допомогою фреймів. У верхній фрейм можна завантажити сторінку з логотипом і меню, лівий – сторінку з навігацією по сайту, у центральному фреймі сторінка з основним вмістом сайту, правий фрейм завантажимо сторінку з рекламними банерами, а в нижній – сторінку з контактною інформацією. Ось коротенько що таке фрейми.

Тепер розглянемо, як це можна здійснити.

Особливістю документа, що містить фрейми, є те, що він не містить контейнера BODY. Замість нього використовується контейнер FRAMESET. Загальний синтаксис фреймів виглядає наступним чином:


….

У першій рядку наведеного коду відкривається контейнер frameset, параметр cols зазначено, що буде три вкладених кадру. У першого ширина буде 30% від всієї ширини екрана. У третього ширина буде теж 30% від всієї ширини екрана. А другий кадр займе все місце, що залишилося. Так символ «*»(зірочка) означає зайняти все місце, що залишилося на екрані.

До речі, розглянемо, яким чином кадрах можна задавати розміри параметрів cols і rows:

Можна задати розмір, поставивши просто число. Це число, буде визначати розмір кадру в пікселях.

Можна задати значення ширини в процентах. Причому, якщо сума відсотків усіх колонок буде перевищувати 100%, то всі фрейми пропорційно зменшуватися, що було б загальна сума дорівнює 100%. Аналогічно ситуація буде, якщо сума відсотків усіх колонок буде менше 100%, то всі фрейми пропорційно збільшаться, що було б загальна сума дорівнює 100%.

Можна задавати розмір кадру символом «*» (зірочка). Це означає, що кадр повинен зайняти все місце, що залишилося. Якщо буде вказано, наприклад , є дві зірочки, то все місце, що залишилося, буде порівну розділено між цими двома фреймами (в даному випадку по 40%).

Можна комбінувати варіанти завдання розмірів фреймів у HTML. Наприклад:

Цей код означає, що у першого кадру, розмір 70 пікселів, у третього 40% ширини екрану, а другий займе все місце, що залишилося.

З першим рядком коду розібралися повністю. Йдемо далі.

Далі йдуть теги . Оскільки через кому в параметр cols тегу frameset задано три числа (тобто буде три фрейми), то і тегів повинно бути теж три. Значенням параметра src є адреса web-сторінки, яка буде завантажуватися в даний кадр. Адресу, як видно з прикладу, може бути абсолютним і відносним.

І в останньому рядку закривається контейнер .

Якщо замінити у першій рядку коду параметр cols на rows, то ми отримаємо такий же фреймовый документ, що складається з трьох фреймів. Тільки розбиття на фрейми буде йти по вертикалі.

Параметри rows і cols одночасно використовувати не можна. Це призводить до помилок, та невірного відображення вмісту.

У всіх зараз виникло питання про те, як створити таку структуру, про яку я говорив на самому початку статті. До цього повернемося трохи пізніше, а поки звернемося до того, що у нас зараз відбувається у браузері.

У браузері ми бачимо три сторінки, кожна з яких знаходиться в своєму фреймі.

При цьому ми, навівши курсор миші до кордонів фреймів, можемо змінювати розміри фреймів, так само видно смуги прокрутки і кордони між фреймами. Це не завжди потрібно, навіть швидше, зовсім не потрібно. А всім цим можна управляти завдяки параметрами тегів frame і frameset.

Параметри тегів frame і frameset:

src =»url» – обов’язковий параметр. Вказує адресу сторінки, яка буде відображена в межах кадру. Використовується тільки для frame.

noresize – скасовує можливість зміни розмірів. Використовується тільки для frame.

scrolling=»yes/no/auto» – визначає наявність смуг прокручування. Значення yes – вказує на наявність смуг прокручування. Значення no – вказує, що смуг прокрутки не буде. При значення auto – браузер сам визначає, чи смуги прокручування. Використовується тільки для frame.

name=»frame-name» – ім’я фрейму. Даний параметр використовується для взаємодії між фреймами. Детальніше про нього поговоримо трохи пізніше. Використовується тільки для frame.

border=число – товщина кордонів між фреймами. Якщо приймає значення 0, то межі між кадрами не відображаються. Використовується тільки для frameset.

framespacing=»число» – відстань між фреймами. Використовується тільки для frameset.

Використовуючи ці параметри, можна отримати сторінку, у якій не відображаються межі між фреймами, немає можливості змінювати розміри фреймів і в двох останніх фреймів заборонимо скролінг. Код такої сторінки виглядає наступним чином:

Є ще кілька параметрів, але вони не однозначно працюють, тому я вважаю доцільним їх навіть не згадувати у випуску.

Мабуть, з параметрами все. Розглянули на прикладі, як їх застосовувати.

Тепер створимо фреймову структуру, про яку я говорив на самому початку випуску.

Випуск №14. Фрейми в HTML

Для цього, створюємо структуру з трьох фреймів з розбиттям по вертикалі.

Пишемо:

Тобто, там де логотип і меню сайту висота буде 100 пікселів. Де контактна інформація висота 70 пікселів. Все інше місце посяде рядок з навігацією сайту, основним вмістом сайту і рекламними банерами.

Далі описуємо перший кадр. Це буде меню і логотип сайту.

Далі у другому рядку у нас йде три колонки, кожна зі своєю адресою сторінки.

Відповідно, замість тега , ми повинні вставити ще один контейнер .. з трьома стовпцями, і кожен записати свою адресу сторінки. Бачите, нічого складного, ми просто замість тега вставляємо новий, потрібний нам, контейнер …

Після цього вставляємо наш третій кадр з контактною інформацією і закриваємо головний контейнер

Повний код цієї сторінки наведено нижче:

Звичайно, адреси для фреймів я взяв з попередніх випусків розсилки, і ніякого меню, логотипу, навігації і так далі ми тут не побачили. Але таку структуру як ми отримали. Але якщо створити реальні потрібні сторінки, то можна отримати красиву структуру.

Що ми отримали в результаті. Чим це зручно чи незручно (вирішувати вам), але при фреймової структури, завжди всі наші кадри залишаються на сторінці. Незалежно від величини вмісту у нас завжди буде видно логотип і меню сайту, нижня частина сайту контактною інформацією, блок навігації і банери. Ось, загалом-то, суть і сенс фреймів.

Існує можливість взаємодії між фреймами. Можна зробити так, щоб натиснувши на посилання в одному фреймі, інформація з’явилася в іншому. Зараз ми подивимося, як це робиться.

Створимо кадр наступного виду:

Випуск №14. Фрейми в HTML

У лівому фреймі, будуть розташовуватися наші посилання. А в правому – сторінки, на які ведуть посилання.

Створюємо такий кадр:

Тут, сподіваюся, все зрозуміло. Єдиний момент – це у другого кадру параметр name=»fram1″. Саме значення параметра name ми і будемо використовувати надалі. Запам’ятаємо його.

Тепер створюємо документ ind2.html. у ньому буде розташовуватися наш набір посилань. Загалом — це звичайний html документ, тільки в посилань, ми вкажемо параметр target і в якості значення цього параметру вкажемо ім’я нашого кадру — «fram1». Тобто:

on webformyself.com
on mail.ru
on google.ru

Створимо документ ind3.html. Можна його залишити порожнім, а можна в ньому розташувати те, що ви хочете бачити на початковій сторінці.

Зараз у нас створений кадр з двох колонок. У лівому розташовується перелік посилань, а в правому буде відображатися та сторінка, на яку веде посилання з лівого кадру.

Розповім ще про один тег стосується кадрів і буду закінчувати цей випуск.

Тег . У контейнер зазвичай пишеться інформація про те, що браузер не підтримує фрейми. Якщо браузер підтримує фрейми, то дана інформація ігнорується. Контейнер ставиться всередині html-документа, в будь-яке місце, куди захочеться чи це потрібно. У параметрі src вказується адресу сторінки, яка буде завантажуватися у кадр. Наприклад, поставимо у другий випуск розсилки сайт webformyself.com. Для цього в будь-якому місці html-документа другого випуску напишемо:

У тега