Фрейми в html

 Фрейм  це HTML-елементи, що дозволяють розділити вікно веб-браузера на кілька незалежних вікон, у кожне з яких можна завантажити окремий документ HTML. Кожне таке вікно (фрейм) може мати власні смуги прокручування та функціонувати незалежно від інших незалежних вікон або навпаки керувати їх змістом.

Переваги фреймів — у можливості:

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

Недоліки фреймів:

  • головна перевага фреймів (відображення різної інформації в межах одного вікна) одночасно є і недоліком, бо доступна область веб-сторінки істотно зменшується;
  • при створенні фрейму правильно вибрати його розмір часто буває складно. У більшості випадків користувач вимушений постійно гортати фрейм за допомогою смуг прокручування;
  • при низькій роздільній здатності монітора об'єм видимої інформації істотно зменшується;
  • багато пошукових систем і каталоги відмовляються реєструвати сторінки, що використовують фрейми.

Для того щоб створити веб-сторінку з фреймами, потрібно в HTML-документі задати розмітку екрана, тобто розташувати у вікні браузера фрейми, кожному з яких призначити свої документи.

Сторінка з розміткою, як і звичайна, починається з тегу <html> і закінчується тегом </html>. Для поділу екрана на кілька фреймів використовують контейнер <frameset>…</frameset>.

Перший потрібно розташувати після тегу заголовка, але перед тегом <body>. У таких документах інколи зовсім не використовують контейнер <body>…</body>.

Фрейми можна розташовувати поруч по горизонталі або один над одним по вертикалі. У першому випадку використовують атрибут cols, а в другому — атрибут rows

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

Для k фреймів потрібно k чисел. Розміри фреймів вимірюють у пікселах або відсотках від розміру екрана. 

Якщо потрібно зазначити, що фрейм займає те місце, яке залишилося, використовують символ * замість числа.

Тег frameset

Це головний контейнер для створення кадру, всередині якого містяться інші елементи.

Атрибуты тега frameset:

  • Cols - вертикаль
  • Rows - горизонталь

У атрибутах cols і rows вказується на  скільки частин ділити вікно браузера.

Тег <frameset rows="150, *">, наприклад, задає поділ вікна на два горизон­тальні фрейми, один з яких має висоту 150 пікселів, a другий займає те місце, що залишилося.

Тег <frameset cols="20%, 55%, *">, наприклад, задає поділ вікна на три верти­кальні фрейми, один з яких займає 20% від ширини екрана, другий — 55%, а третій займає те місце, що залишилося, тобто 25%.

Можна використовувати одночасний і горизонтальний, і вертикальний поділ вікна на фрейми — це роблять за допомогою вкладення контейнерів <frameset>…</frameset> один в один.

Тег frame

Після поділу екрана на вікна для кожного фрейму потрібно задати HTML-документ, який буде відображено в ньому. Для цього використовують тег <frame> з атрибутами, що керують властивостями фреймів:

  • src — задає назву файлу, що відображатиметься у фреймі;
  • name — задає назву фрейму;
  • scrolling — визначає наявність або відсутність смуг прокручування у вікні фрейму (за умовчанням — yes, альтернатива — no);
  • noresize — забороняє користувачу змінювати розміри фрейму;
  • border — визначає ширину розділювальної смуги між фреймами у пікселах;
  • bordercolor — визначає колір розділювальної смуги між фреймами;
  • marginheight — визначає відстань у пікселах між верхньою межею фрейму і текстом або графікою;
  • marginwidth — визначає відстань у пікселах між боковими межами фрейму і текстом або графікою.

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


Html-коди файлів, що входять у фреймову структуру:

Файл index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Frame-макет сайту</title>
</head>
<Frameset rows="15%,70%,15%">
    <Frame src="top.html">
    <Frameset cols="25%,75%">
        <Frame src="menu.html">
        <Frame src="content.html" name="main">
    </Frameset>
    <Frame src="footer.html">
</Frameset>    
</html>

Файл top.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Файл top.html - шапка сайту</title>
  </head>
  <body bgcolor="blue" text="white">
    <h1>Приклад №1</h1>
    А тут могло бути лого і не тільки :)
  </body>
</html>

Файл menu.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Файл menu.html - меню сайту</title>
  </head>
  <body bgcolor="#b2bbff" text="#112cf5">
    <ul>
      <li><a target="main" href="content.html"> Головна сторінка </a></li>
      <li><a target="main" href="about-site.html"> Про сайт </a></li>
      <li><a target="main" href="about-autor.html"> Про автора </a></li>
      <li>...</li>
    </ul>
  </body>
</html>

Файл about-site.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Файл about-site.html - Сторінка про сайт</title>
  </head>
  <body bgcolor="#e3e5f8" text="#FF0055">
    <h1>Про сайт</h1>
    Сторінка про сайт. Зараз відкрито файл about-site.html
  </body>
</html>

Файл about-autor.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Файл about-autor.html - про автора</title>
  </head>
  <body bgcolor="#e3e5f8" text="#FF0055">
    <h1>Про автора</h1>
    Сторінка про автора. Зараз відкрито файл about-autor.html
  </body>
</html>

Файл content.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Файл content.html - контент сайту</title>
  </head>

  <body bgcolor="#e3e5f8" text="#FF0055">
    <h1>Головна сторінка</h1>
    Вміст сайту. Зараз відкрито файл content.html Вміст сайту. Зараз відкрито
    файл content.html <br />
    Це початковий стан нашого фрейму. Назвемо цей файл "Головною сторінкою"
  </body>
</html>

Файл footer.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Файл footer.html - про сайті</title>
  </head>
  <body bgcolor="#b2f2ff" text="#000000">
    Футер сайту. Зараз відкрито файл footer.html
  </body>
</html>


Завдання 1

Використовуючи фрейми, створити план-макет своєї квартири у вікні  браузера 
на зразок як цей макет








Нові Старіші