Здрастуйте, шановні читачі блогу . Сьогодні мова піде про фрейми в мові Html. Ясна річ, що ми почнемо спочатку, а саме з того, що це таке за звір. Так само поговоримо про сьогодення (Frame) і майбутньому (Iframe) цих елементів у мові гіпертекстової розмітки поточної версії і в новому стандарті Html 5 при верстці сайтів.
В кінці статті, після детального опису процесу створення вбудованих фреймів і їх класичної структури в Html коді (вже рідко використовується), ми торкнемося питання актуальності побудови сайту на них, а так само обговоримо можливі способи їх застосування в поточний період часу на прикладі мого блогу.
Що це таке і чим відрізняється Iframe від Frame
Що ж це таке? Виявляється, що вони можуть використовуватися не тільки на сайтах, але і в будь-яких додатках до програм, але відрізняються тим, що вікно web-сторінки або програми буде розділено на кілька областей, в кожну з яких завантажений якийсь окремий документ. Причому, ці області фреймів поводяться незалежно один від одного.
Напевно, самий наочний приклад їх використання, з яким стикалися практично всі з вас, це так звані файли допомоги (хелпи), які є в багатьох програм, встановлених на вашому комп’ютері.
У ліве вікно завантажений файл з меню хелп, а в правому виводиться відповідний вибраному пункту меню документ. Примітно, що така структура не дозволяє довантажувати в ліве вікно повторно файл з меню при відкритті нового документа в правому. Саме в цьому і полягає основна перевага використання фреймів у Html.
Власне, сама назва цих елементів слід трактувати саме як самостійне вікно. За допомогою фреймів у нас з’являється можливість розбити одне велике вікно на декілька фрагментів, які в свою чергу можуть служити приймачами для окремих незалежних один від одного документів (сторінок, текстів, зображень, відео тощо).
Як створюється фреймову структуру в мові гіпертекстової розмітки? Якщо говорити про стандарт Html 4.01 (за класифікацією валідатора W3C), який є основним на поточний момент часу, то для цього використовуються три елемента — Frame, Frameset і Noframes.
Iframe — вбудований кадр в стандарті Html 5
Якщо ж говорити про стандарт Html 5 (наше майбутнє, деякі елементи якого вже підтримуються багатьма браузерами), то там тегів Frame, Frameset і Noframes, а рівно і класичної фреймової структури вже не буде, замість них передбачений один єдиний тег Iframe (вбудований фрейм), про який ми і поговоримо на початку, а потім вже все звернемо увагу на класичну схему з версії 4.01, яка зараз, власне, і використовується.
Iframe на відміну від класики, яка розглянута нижче, не вимагає заміни тега Body на теги Frameset. Тобто цей тег можна буде вставляти на звичайні сторінки, наприклад, всередині параграфа або в будь-якому іншому місці. За своєю суттю цей елемент дуже вже схожий на розглянутий нами тег Img.
Він є рядковим з замещаемым контентом, бо веде себе в точності як рядковий елемент, але всередині нього з’являється сторонній зовнішній контент. Таких елементів у мові Html всього чотири — Img, Iframe, Object і Embed. Тому наш герой передбачає наявність зовнішнього файлу, який буде подгружаться в область, розмір якої визначається за допомогою атрибутів цього тегу.
Т. о. Iframe є стічних елементом, який завантажується зовнішній об’єкт (наприклад, відеоролик). А для вказівки шляху до файлу, який повинен подгружаться на сторінці, служить спеціальний атрибут Src. Але на відміну від Img елемент Iframe парний, тобто є ще і закриваючий тег:
У даному прикладі показано висновок на сторінці відеоролика з Youtube за допомогою Iframe. Для того, щоб обмежити область кадру (вікна), куди буде подгружаться зовнішній файл, передбачені атрибути Width і Height, значення яких задаються в пікселях:
Тобто цей тег створює область, в яку завантажується якийсь зовнішній об’єкт (не важливо, з вашого чи сайту або ж з іншого ресурсу). Ширина і висота області задаються з допомогою Width і Height, а в атрибуті Src вказується шлях до цього об’єкта.
Всі ці атрибути елемент Iframe успадкував від подібних йому рядкових тегів з замещаемым контентом (типу вже згаданого вище Img). Ну, і ще в картинок він взяв та атрибути Hspace і Vspace, які дозволяють задати відступи від меж кадру до оточуючого його тексту.
Так само показово, що вирівнювання вбудованого фрейма здійснюється абсолютно так само, як ми це могли бачити при вивченні графіки в Html — Обтікання і вирівнювання картинки текстом — Align у Img. Все той же Align, але вже для тега Iframe з можливими значеннями Bottom, Top, Middle, Left і Right.
Але цей елемент взяв так само і кілька атрибутів від тега Frame з класичної фреймової структури, про яку ми дуже і дуже докладно поговоримо нижче по тексту. До таких атрибутів відноситься Name, значення якого можна використовувати в якості значення атрибута гіперпосилань Target для того, щоб потрібний вам документ при переході по посиланню відкривався саме у вікні цього кадру (подробиці читайте нижче).
Так само в Iframe з тега Frame перекочував атрибут Frameborder, який має лише два значення — або 0 (рамка навколо фрейма не відображається), 1 (рамка видно). За замовчуванням використовується значення Frameborder=1, тому для її видалення вам потрібно прописати Frameborder=»0″:
З Frame у цей елемент перейшов ще й атрибут Scrolling, що має за замовчуванням значення Auto — смуги прокручування в кадрі будуть з’являтися у міру необхідності, коли контент буде більше за розміром вікна, призначеного для його відображення.
Ну, та атрибути Marginwidth і Marginheight теж перейшли з елемента Frame. Вони будуть детально розглянуті нижче по тексту, але в двох словах — вони дозволяють задати відступ по ширині і висоті від країв кадру до контенту, який в нього вкладається.
Як я вже згадував, наочним прикладом використання Iframe є вставка відео з ютуба на свій сайт:
Вставивши Iframe безпосередньо в веб-сторінку, ви отримаєте виведення ролика з ютуба. Робимо висновок, що цей елемент є поміссю рядкових елементів з замещаемым контентом і, власне, класичних кадрів, про яких зараз і піде мова.
Фрейми на основі тегів Frame і Frameset — їх структура
Отже, створення класичної фреймової структури починається з того, що ви прописуєте в Html коді замість відкриває і закриває тега Body, який зазвичай має бути присутнім в будь-якому документі, що його замінює контейнер на основі елементів Frameset.
Принциповим моментом є те, що елемент Body в цьому випадку використовувати не можна — небудь Body (для звичайного документа), або Frameset (при створенні фреймової структури документа):
Кожен фрейм, який ми з вами формуємо всередині головного, створюється з допомогою окремого елемента Frame. Цей тег є поодиноким і в ньому ми задаємо шлях до того документа, який повинен буде подгружаться у це вікно.
Третій елемент, який ми ще з вами не зачепили — це Noframes. Він парний і дозволяє написати усередині себе якийсь текст, який буде оброблений браузером і відображається на web сторінці тільки в тому випадку, якщо цей самий браузер (або інший пристрій відображення) не підтримує фрейми. Це може статися, наприклад, у разі використання якого-небудь браузера для мобільних пристроїв.
Зазвичай в Noframes додають не тільки інформацію про ситуацію, що склалася з неможливістю обробки фреймової структури, але і додають так само можливість перейти на інші сторінки, де можна буде продовжити роботу без їх використання. Сказати про нього щось ще важко, тому продовжимо.
Виходить так, що елемент Frameset, що використовується замість тега Body, займає все місце, яке відведено для перегляду, а вже всередині цієї області будуть створюватися кадри з допомогою окремих елементів Frame. У зв’язку з цим виникає питання — як ділити область перегляду між окремими вікнами або, іншими словами, як визначити розмір кожного з них.
Робиться це з допомогою додавання відповідних атрибутів елемента Frameset. Їх є цілих два — Cols і Rows. Cols задає розділення великого вікна на вертикальні кадри або ж колонки, а Rows дозволяє розділити його на горизонтальні вікна або ж рядка.
Створення структури на основі Frameset і його атрибутів Cols і Rows
В якості значень для Cols і Rows Html тегу Frameset виступають числа, проставлені через кому (без пробілів). Ці числа задають пропорції тих вікон, які ми з вами хочемо отримати в результаті. Отже, скільки буде написано чисел через кому в Cols або в Rows, стільки у нас фреймів і повинно вийти в результаті.
Наприклад, за допомогою такого запису ми отримаємо три вертикальні колонки, які по ширині будуть відповідати пропорціям 2:5:3.
Раз ми поставили пропорції для трьох фреймів, то ми повинні будемо обов’язково прописати між відкриваючим і закриваючим тегом Frameset три елемента Frame, хоча б і без зазначення додаткових атрибутів:
В результаті наша фреймову структуру, що складається з трьох порожніх вікон, виглядатиме так:
В даному прикладі розміри вікон (Frame) ми ставили за допомогою відсотків, які беруться від ширини області перегляду (це у випадку використання Cols) або від її висоти (Rows). При зміні області перегляду процентне співвідношення між розмірами фреймів буде зберігатися. Але замість відсотків можна використовувати і просто числа, які будуть означати ширину або висоту в пікселях. Тут, думаю, теж ніяких труднощів у розумінні виникнути не повинно.
Але є в позначеннях розмірів і досить незвичайний варіант, який виглядає як зірочка «*». Причому, може стояти як просто «*», так і зірочка з цифрою попереду, наприклад, так: «3*». Хитра штука, дуже схожа на відсотки і означає, що ми ділимо простір для Frame пропорційно.
Давайте подивимося на прикладі. Тепер виберемо поділ області перегляду на горизонтальні рядки з допомогою Rows:
Що означає ця запис? Вся область перегляду, доступна нам по вертикалі, буде розділена на три рядки. Висота першої буде взята в 200 пікселів, другий — 500, а ось третій рядок буде займати весь простір, що залишився по висоті, т. к. як її розміру використовувалася «*».
Що примітно, значення «*» і «1*» означають одне і те ж — все простір, що залишився, ми ділимо на один і цю одну частину віддаємо даного фрейму (ну, тобто все, що залишився простір).
А ось подивіться що вийде, якщо використовувати значення «*» з цифрою для поділу в пропорції:
Як ви думаєте, які повинні будуть вийти розміри Frame в цьому випадку? Зрозуміло, що другий рядок буде однозначно мати висоту в 100 пікселів. Але як поділиться простір, що залишився по висоті між третьою і першою рядком?
Це досить просто порахувати — достатньо додати до двох (2*) чотири (4*) і розділити на цей знаменник (пам’ятаєте дробу зі шкільної програми) двійку і четвірку. Тобто ми отримаємо, що перша колонка з фреймом займе одну третину від решти простору по висоті, а третя колонка — дві третини. Або ж, іншими словами, третя буде в два рази вище першій:
Можна використовувати усі три способи завдання розмірів вікон фреймів в одному атрибуті, наприклад:
В результаті ми отримаємо першу колонку Frame шириною в десять відсотків від усієї доступної області, другу — 100 пікселів, а три залишилися будуть мати ширину в пропорціях чотири, три і дві дев’ятих від решти простору по ширині. Ось так все просто і наочно.
Якщо ви хочете розбити головне вікно не тільки на горизонтальні і вертикальні кадри, а, наприклад, на їх комбінації, то можна для цього використовувати вкладену структуру елементів Frameset окремо для колонок і окремо для рядків. Наприклад, щоб отримати структуру, показану на скріншоті трохи нижче, то достатньо використовувати таку конструкцію:
Тобто спочатку ми розбиваємо з допомогою «frameset cols=»20%,80%»« весь доступний простір на дві колонки по вертикалі і задаємо тегом „frame“ вміст правої колонки, а от замість того, що додати елемент „frame“ для лівої колонки, ми відкриваємо новий „frameset rows=“10%,*»».
І вже з допомогою нього розбиваємо праву колонку на два рядки з фреймами, вміст яких ставимо за допомогою двох тегів «frame», після чого закриваємо обидва контейнера «frameset». Все просто і логічно.
Вказуємо шлях в атрибуті Src елемента Frame
Але це ми всі говорили про елемент Frameset і його атрибути Cols і Rows, з допомогою яких формуємо структуру і ставимо їх розміри. Тепер давайте розберемося з тим, як виводити в потрібних кадрів потрібні документи і як налаштувати взаємодія між їхніми вікнами.
Отже, як же ми управляємо зовнішнім виглядом створюваних вікон? Все це закладено в атрибути тега Frame. Перший з них, про який варто згадати — це Src. Ми вже зустрічали його в тег Img, коли розглядали вставку зображень в Html код. Суть його не змінилася і він як і раніше дозволяє вказати шлях до того документа, який необхідно завантажити у фрейм.
Шлях до документа у Src може бути зазначений у вигляді відносної або абсолютної посилання. Відносні шляхи зазвичай використовуються для документа, який розташований на вашому ж ресурсі, а ось абсолютні вам знадобляться, коли ви захочете завантажити у вікно фрейма документ з іншого сайту.
Якщо не буде прописаний атрибут Src із зазначенням шляху до потрібного документа, то вікно буде завантажений, порожній документ. Особисто я колись робив подібну річ для свого блогу (як додатковий елемент навігації) і при цьому створював на сервері хостингу окрему папку для нього і поміщав туди не тільки Html файлик з фреймової структури (який назвав index.html), але і всі завантажувані в різні вікна документи, а так же файли зображень, які використовувалися в якості фону.
Тому мені було простіше всього використовувати саме відносні посилання, в атрибуті Src тега Frame:
Що примітно, якщо ви заміните всі наведені у цьому коді посилання з відносних на абсолютні (типу https:///navigator/joomla.html) і відкриєте цей файл у браузері, зазначені у Frame документи будуть завантажені з мого сервера і ви побачите аналогічну картинку в своєму браузері. Причому не важливо, де буде лежати ваш файл з фреймової структури (index.html — на вашому комп’ютері або ж на хостингу.
У наведеному на рисунку прикладі, у вікно лівого кадру в мене завантажується сторінка з якимсь меню, яке представляє з себе звичайний маркований Html список. Але не суть важливо як формується меню, а важливо те, що відбудеться після натискання на будь-яку з його посилань.
Якщо ви зробите це, то все відбудеться саме так, як треба — документ відкриється в правому нижньому вікні. Але для цього мені довелося застосувати одну невелику хитрість, бо у варіанті за замовчуванням документ відкривався на весь розмір вікна, замінюючи собою фреймову структуру, що мені було зовсім не потрібно, бо зникало навігаційне меню в лівому верхньому кадрі.
Як відкривати документи за посиланням у фреймі
Отже, коли ми говорили про гіперпосилання, то згадували такий атрибут тега «A», як Target=_blank. Пам’ятайте для чого він потрібен? Правильно, щоб відкрити документ, на який є посилання в новому вікні. За замовчуванням ж, він повинен відкриватися в тому ж самому вікні, що еквівалентно target=»_self».
Але цим можливості Target не обмежуються. Виявляється можна додавати в нього значення у вигляді назви фрейму, яке попередньо зазначається у спеціальному атрибуті Name тега Frame. Тоді документ за цим посиланням буде відкриватися не в тому ж вікні, займаючи всі його простір, а в зазначеному вами Frame. Зрозуміло? Якщо не зовсім, то зараз буде зрозуміло при розборі прикладу.
Отже, повернемося до нашого прикладу наведеним на розташованому трохи вище малюнку. Нам потрібно відкривати сторінки по посиланнях з лівого вікна у правому нижньому (великому) фреймі. Отже, для початку потрібно цього великого вікна дати назву за допомогою атрибута Name в тезі Frame.
Зробили і назвали його «ktona». Тепер можна сміливо відкривати той файл, що підвантажується як меню в ліве вікно і додавати до всіх тегам A в ньому атрибут Target=»ktona»:
Історія появи Joomla та компонента VirtueMart
Звичайно ж, з допомогою інструменту пошуку і заміни в Html-редакторі Notepad проставити його для всіх гіперпосилань буде не важко, але навіщо ж надміру завантажувати код, коли у нас є прекрасна можливість використовувати спеціальний тег Base, про який ми вже згадували в тій же статті про гіперпосилання, коли говорили про використання Target blank.
Достатньо лише поставити між відкриваючим і закриваючим тегами Head елемент base target=»ktona» і всі посилання в Html коді цього документа будуть відкривати нові сторінки у вказаному кадрі під назвою «ktona»:
До речі, якщо розглядати мій колись існував інструмент в якості прикладу, то потрібно ще зробити так, щоб всі посилання з верхнього горизонтального вікна відкривали свої сторінки саме в лівому вертикальному фреймі, який служить у мене лівим меню. Що потрібно для цього зробити?
Ну, по-перше, потрібно дати ім’я лівому вертикальному кадру:
А у файлі, який завантажується у верхнє вікно (gor.html), потрібно додати елемент base target=»gor»:
Все, тепер ми зробили все як треба. Всі документи по посиланнях з верхнього кадру відкриваються у лівому вікні, а всі посилання вже з нього будуть відкривати документи в центральному і самому великому Frame. По-моєму, все просто і логічно.
Атрибути тега Frame для налаштування зовнішнього вигляду вікон
Давайте тепер подивимося, які атрибути крім Src й Name можна використовувати в тегу Frame для налаштування зовнішнього вигляду фреймів. Почнемо з Scrolling. За допомогою нього ми можемо налаштувати відображення смуг прокручування для кожного вікна вашої фреймової структури окремо.
Scrolling має значення за замовчуванням Auto — браузер буде автоматично вирішувати, на основі розміру подгружаемого у кадр документа, показувати смугу прокручування чи ні. Якщо документ не буде повністю поміщатися в вікно, то з’являється смуга прокрутки, що дозволяє переглянути його весь до кінця.
Так само в якості значень для Scrolling можна використовувати значення Yes (смуги прокрутки у вікні будуть відображатися завжди, навіть якщо документ повністю влазить в нього) і No (смуги прокручування взагалі ніколи з’являтися не будуть, навіть якщо частина документа не влізе).
Я в своєму, колись існував інструменті, використовував значення за замовчуванням Auto і смуги прокрутки у фреймах з’являлися по мірі необхідності:
Наступний атрибут тега Frame — Noresize — є поодиноким (у нього немає значень). Прописавши його, ви тим самим забороніть зміну його розмірів, що за замовчуванням здійснюється простим перетягуванням межі фреймів мишею.
При підведенні курсору миші до границі ви побачите, що курсор перетвориться на двонаправлену стрілку і тепер, натиснувши на ліву кнопку миші, можна пересувати кордон за вашим бажанням. Noresize накладає на це свавілля заборону (при підведенні курсору миші до границі вікон, двонаправлену стрілку ви вже не побачите).
Ще один візуальний атрибут — Frameborder. C допомогою нього ви можете вказати — малювати рамку (кордон) між фреймами чи ж не малювати. Frameborder може мати тільки два можливих значення — або 0 (рамку не малювати), 1 (кордон відображати). За замовчуванням, природно, використовується значення 1.
Є одна тонкість. Якщо ви хочете прибрати видиму рамку, то вам доведеться додати Frameborder=0 у всі теги Frame тих кадрів, видимі межі між якими ви хочете прибрати.
Ну, і ще нам залишилося розглянути пару атрибутів тега Frame — Marginwidth і Marginheight, які задають відступи по ширині (праворуч і ліворуч) і висоті (зверху і знизу) від границь вікна до вмісту завантаженої в нього (число означає кількість пікселів відступу):
Чому не можна робити сайт на кадрах?
Давайте подивимося в чому полягає принциповий недолік класичних структур, який, по суті, ставить хрест на їх використанні при створенні сайту. Він полягає в тому, що за адресою Url цієї фреймової структури неможливо відстежити її стан.
У складних структур можуть бути тисячі різних станів (варіанти документів відкритих у різних вікнах фреймів), але при цьому Url цієї самої структури не змінюється. З-за цього буде неможливо користуватися закладками браузера або ж відправляти посилання на вподобані сторінки іншим користувачам. Чому?
Тому що адреса залишається незмінним і при відкритті його з закладок браузера, або ж з листа електронної пошти, ви отримаєте сторінку зі стартовим станом фреймової структури, а не її стан, яке ви хотіли б зберегти.
Хоча, звичайно ж, ця проблема вирішувана, але вже не засобами Html, а з допомогою серверних (наприклад, Php) або клієнтських мов (ДжаваСкрипт) програмування, і ці рішення будуть працездатними не на всі сто відсотків. Такі рішення, по суті, дозволяють дописувати до Url адресою фреймової структури додаткові дані про її поточний стан, але зробити це не просто, а надійність буде не абсолютною.
Це перший мінус використання фреймів для створення сайтів і дуже вагомий, але є і ще один величезний мінус. Пошуковики, звичайно ж, вже давно навчилися індексувати їх і витягати з них адреси тих документів, які завантажуються у їхні вікна. Проблема в іншому.
Коли користувач переходить з пошукової видачі Яндекса або Google на ваш сайт, побудований на базі фреймової структури, то відкриється тільки той документ, який завантажувався в один із кадрів, а не вся структура. Розумієте, про що я кажу?
Користувач побачить документ і не побачить переходів з вашого сайту, бо вона буде зашита в інших вікнах, а вони завантажуються тільки у складі всієї структури.
В результаті сайт, побудований на фреймах, стає просто не юзабельним. Хоча знову ж таки є рішення цієї проблеми на базі серверних скриптів, коли буде здійснюватися редирект з адрес окремих документів на фреймову структуру знаходиться в потрібному стані, але це знову ж таки дуже складно і не завжди надійно.
Загалом, висновок можна зробити однозначний — створювати сайти на фреймах не потрібно. Але зате вони постійно використовуються для створення хелпов для різних додатків, ну і ще по дрібниці можуть стати в нагоді.
Наприклад, я створив фреймову структуру, яку обізвав «Навігатор» (зараз її тимчасово прибрав) і яка стала своєрідним розгорнутою зовнішнім меню для мого блогу, яке, як мені здається, має спростити роботу з ресурсом і підвищити його юзабіліті, а відтак і поліпшити поведінкові фактори, які зараз «без балди» дуже і дуже сильно впливають на просування сайту.
Але, правда, під уникнення будь-яких проблем з пошуковими системами, я закрив від індексації через robots.txt всю цю фреймову структуру, а так само додав на всякий випадок її в Html файли мета тег Rodots з забороною їх індексації:
JOOMLA
Але всі ці обмеження стосуються тільки структур на тегах Frame і Frameset, а вбудовані кадри на тегах Iframe не мають ніяких видимих недоліків, і їх цілком можна і навіть потрібно використовувати на свої проекти, хоча б для вставки відео з Ютуба.
Удачі вам! До зустрічей на сторінках блогу
