Всім доброго часу доби! З Вами Бернацький Андрій.
Перш, ніж перейти безпосередньо до статті, я Вам хочу дати посилання на відео-версію даної теми:
Відео версія 14 уроку
У цьому випуску ми поговоримо про фреймів у HTML. Фрейми по своїй суті дуже схожі на таблиці, але на відміну від таблиць, кожен фрейм незалежний і в кожному з них може бути окрема web-сторінка з своєю адресою.
На малюнку бачимо досить поширену структуру сайту. Її можна представити у вигляді таблиці, а можна все це зробити за допомогою фреймів. У верхній фрейм можна завантажити сторінку з логотипом і меню, лівий – сторінку з навігацією по сайту, у центральному фреймі сторінка з основним вмістом сайту, правий фрейм завантажимо сторінку з рекламними банерами, а в нижній – сторінку з контактною інформацією. Ось коротенько що таке фрейми.
Тепер розглянемо, як це можна здійснити.
Особливістю документа, що містить фрейми, є те, що він не містить контейнера 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.
Використовуючи ці параметри, можна отримати сторінку, у якій не відображаються межі між фреймами, немає можливості змінювати розміри фреймів і в двох останніх фреймів заборонимо скролінг. Код такої сторінки виглядає наступним чином:
Є ще кілька параметрів, але вони не однозначно працюють, тому я вважаю доцільним їх навіть не згадувати у випуску.
Мабуть, з параметрами все. Розглянули на прикладі, як їх застосовувати.
Тепер створимо фреймову структуру, про яку я говорив на самому початку випуску.
Для цього, створюємо структуру з трьох фреймів з розбиттям по вертикалі.
Пишемо:
Тобто, там де логотип і меню сайту висота буде 100 пікселів. Де контактна інформація висота 70 пікселів. Все інше місце посяде рядок з навігацією сайту, основним вмістом сайту і рекламними банерами.
Далі описуємо перший кадр. Це буде меню і логотип сайту.
Далі у другому рядку у нас йде три колонки, кожна зі своєю адресою сторінки.
Відповідно, замість тега , ми повинні вставити ще один контейнер .. з трьома стовпцями, і кожен записати свою адресу сторінки. Бачите, нічого складного, ми просто замість тега вставляємо новий, потрібний нам, контейнер …
Після цього вставляємо наш третій кадр з контактною інформацією і закриваємо головний контейнер
Повний код цієї сторінки наведено нижче:
Звичайно, адреси для фреймів я взяв з попередніх випусків розсилки, і ніякого меню, логотипу, навігації і так далі ми тут не побачили. Але таку структуру як ми отримали. Але якщо створити реальні потрібні сторінки, то можна отримати красиву структуру.
Що ми отримали в результаті. Чим це зручно чи незручно (вирішувати вам), але при фреймової структури, завжди всі наші кадри залишаються на сторінці. Незалежно від величини вмісту у нас завжди буде видно логотип і меню сайту, нижня частина сайту контактною інформацією, блок навігації і банери. Ось, загалом-то, суть і сенс фреймів.
Існує можливість взаємодії між фреймами. Можна зробити так, щоб натиснувши на посилання в одному фреймі, інформація з’явилася в іншому. Зараз ми подивимося, як це робиться.
Створимо кадр наступного виду:
У лівому фреймі, будуть розташовуватися наші посилання. А в правому – сторінки, на які ведуть посилання.
Створюємо такий кадр:
Тут, сподіваюся, все зрозуміло. Єдиний момент – це у другого кадру параметр name=”fram1″. Саме значення параметра name ми і будемо використовувати надалі. Запам’ятаємо його.
Тепер створюємо документ ind2.html. у ньому буде розташовуватися наш набір посилань. Загалом — це звичайний html документ, тільки в посилань, ми вкажемо параметр target і в якості значення цього параметру вкажемо ім’я нашого кадру — “fram1”. Тобто:
on webformyself.com
on mail.ru
on google.ru
Створимо документ ind3.html. Можна його залишити порожнім, а можна в ньому розташувати те, що ви хочете бачити на початковій сторінці.
Зараз у нас створений кадр з двох колонок. У лівому розташовується перелік посилань, а в правому буде відображатися та сторінка, на яку веде посилання з лівого кадру.
Розповім ще про один тег стосується кадрів і буду закінчувати цей випуск.
Тег . У контейнер зазвичай пишеться інформація про те, що браузер не підтримує фрейми. Якщо браузер підтримує фрейми, то дана інформація ігнорується. Контейнер ставиться всередині html-документа, в будь-яке місце, куди захочеться чи це потрібно. У параметрі src вказується адресу сторінки, яка буде завантажуватися у кадр. Наприклад, поставимо у другий випуск розсилки сайт webformyself.com. Для цього в будь-якому місці html-документа другого випуску напишемо:
У тега
