Фрейми в html

Приклад фреймової структури

Вікно браузера може бути розділене на фрейми, тобто на області розташовані поруч один з одним. У кожну з цих областей можна завантажувати свої html-сторінки. На прикладі буде зрозуміліше, створіть новий файл з назвою index.html з наступним кодом:


У вікні браузера це буде виглядати так:

Вікно браузера розділене на 3 частини. Треба сказати, що це єдиний випадок, коли в html-документі відсутні теги . Замість них використовуються теги . які і вказують браузеру розбити вікно на декілька областей - фреймів.

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

  • rows - вказує розбити вікно на горизонтальні області. Причому, скільки значень у цього параметра, стільки і областей. У нашому прикладі rows = "30%, 10%, 60%". тобто три горизонтальні області: ширина першої - 30% від ширини екрану, ширина другий - 10%, а третьої - 60%.
  • cols - вказує розбити вікно на вертикальні області.

  • всередині тегів розташовуються поодинокі теги . причому їх повинно бути стільки, скільки задано областей. Без параметрів ці теги не приносять користі.

    Ми розглянемо параметри тега на прикладах.

    Давайте визначимо цей параметр для наших фреймів в прикладі. Для цього створіть три звичайні html-сторінки:

    top.html з наступним кодом:

    Фрейми в html шапка сайту

    menu.html з наступним кодом:

    content.html з кодом:

    Контент Вміст сторінки з контентом.


    Ці сторінки повинні лежати в тому ж каталозі, що і index.html.
    А тепер додамо параметр src в теги на нашій сторінці index.html:


    Тепер в браузері наша сторінка index.html буде виглядати так:

  • name - ім'я фрейму, яке буде використовуватися для посилання до даного кадру.

    Додамо цей параметр тегу .


    Тепер створіть ще одну сторінку other.html з кодом:

    Контент other.html Вміст сторінки other.html


    А тепер на сторінці menu.html зробимо перший пункт меню посиланням на цю сторінку і вкажемо, що відкривати сторінку other.html слід у фреймі з ім'ям content:


    Тепер при натисканні на першому пункту меню, у фрейм content буде завантажуватися сторінка other.html

    Параметру target можна задати і інші значення:
    _self - завантажувати в той же фрейм з якого посилаються.
    _top - завантажувати в повне вікно, закриваючи інші кадри (зазвичай використовується для посилань на інші сайти).

  • marginwidth - визначає відступ у розіграші від лівого краю до вмісту.

  • marginheight - визначає відступ у розіграші від верхнього краю до вмісту.

  • scrolling - якщо вміст фрейма не поміщається у вікно, то будуть з'являтися смуги прокрутки, іноді це порушує дизайн. Цей параметр допомагає керувати відображенням смуг прокрутки. Може приймати значення: yes, no, auto.

  • noresize - якщо встановити курсор миші на межі фрейму, то можна виконати його переміщення. Для запобігання цієї можливості і використовується цей параметр.

    Давайте внесемо останні чотири параметра в код нашої сторінки index.html:


    Тепер наша сторінка виглядає так:

  • Ось ми і розглянули всі параметри тега .

    Останній штрих: приберемо рамки фреймів. Для цього в тег додамо два параметра border = "0" frameborder = "0".


    Тепер наша сторінка виглядає так:

    Плюси і мінуси фреймів

    Тепер, коли ви маєте уявлення про фрейми, прийшов час сказати про переваги і недоліки сайтів з фреймової структурою.

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

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

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

    І нарешті, фреймової структуру підтримують не всі браузери. Тому существуюте теги . вони розташовуються усередині тегів і містять альтернативну інформацію для браузерів які не підтримують фрейми. По суті вам доведеться виконати подвійну роботу і створити дві версії сайту: з фреймами і без них.

    Звідси висновок - не використовуйте фрейми без гострої необхідності.

    Приклади фреймових структур

    Як ви пам'ятаєте за поділ на фрейми відповідають два параметри: rows і cols. Комбінуючи їх, можна розбити вікно на фрейми будь-яким чином. Приклади такого розбиття ми і розглянемо.


    Отримаємо три вертикальних фрейма. Ширина першого - 150 пікселів, другого - 300, а третього - все інше простір вікна.


    Отримаємо два вертикальних фрейми. Ширина першого приймається рівною за одиницю, а другий - в два рази ширше першого (тобто 33% і 67% від ширини вікна).


    Отримаємо два горизонтальні фрейми. Висота першого - 100 пікселів, а другого - весь інший простір.
    Другий горизонтальний кадр розіб'ємо на два вертикальних: один шириною 200 пікселів, а другий буде займати все інше місце. Це досягається за допомогою вкладених тегів .


    Отримаємо два вертикальних фрейми. Ширина першого - 25%, а другого - весь інший простір.
    Другий вертикальний фрейм розіб'ємо на два однакових горизонтальних.

    На цьому урок про фрейми закінчений. На наступному уроці будемо робити наші сторінки музичними.

    Якщо цей сайт виявився вам корисний, ви можете допомогти в його розвитку, поставивши одну з цих посилань на свій сайт.