Фрейми в HTML — це спосіб поділу вікна браузера на кілька розділів, кожен з яких може завантажувати та відображати інший документ HTML. У цій статті ми побачимо практичні приклади фреймів у HTML.

Незважаючи на те, що останніми роками його використання скоротилося через впровадження більш сучасних і гнучких методів, таких як CSS і JavaScript все ще можна знайти на деяких веб-сайтах, особливо на тих, які були створені в 1990-х і на початку 1990-х років. що 2000 року.

Як фрейми або фрейми працюють у HTML?

Каркаси складаються з двох елементів:

1. Frameset: Стихія використовується для поділу вікна браузера на прямокутні секції, кожна з яких може завантажувати власний HTML-документ.

2. кадрів: Стихія використовується в межах a щоб визначити кожен із окремих розділів. І він надсилає на виклик якийсь інший документ, який завантажується всередині набору фреймів.

   instagram story viewer

• Дотримуйтеся: Приклади iFrame

Як створити фрейми в HTML

Щоб створити документ HTML із фреймами, виконайте два дуже прості кроки:

1. Створіть документ HTML, який визначає структуру фреймів за допомогою елемента. Наприклад:

Файл 1: frameset.html

2. Створіть один або кілька HTML-документів, які завантажуватимуться у фрейми.

Файл 2: frame1.html

Це Кадр 1

Файл 3: frame2.html

Це Кадр 2

Атрибути фрейму в HTML

Деякі з найважливіших атрибутів елементів є:

• прокручування: Цей атрибут використовується для керування зовнішнім виглядом смуг прокрутки у кадрі. Він може мати значення «авто», «так» або «ні».

• noresize: Цей атрибут використовується, щоб запобігти зміні розміру кадру користувачем.

• ямс: Цей атрибут використовується для надання імені фрейму, яке може бути корисним для посилання на фрейм у посиланнях і сценаріях.

• src: Цей атрибут використовується для визначення URL-адреси HTML-документа, який буде завантажено у фрейм.

• рамка рамки: Цей атрибут визначає, чи повинні кадри мати межі чи ні. Можливі значення: «1» (щоб відображати межі) або «0» (щоб не показувати межі). Наприклад, .

• кордону: Цей атрибут визначає ширину межі між кадрами в пікселях. Наприклад, створить межу 5 пікселів між кадрами.

• інтервал кадрів: Цей атрибут схожий на кордону. Він також визначає відстань між кадрами в пікселях. Наприклад, встановить проміжок 10 пікселів між кадрами.

• колір кордону: Цей атрибут дозволяє змінювати колір межі рамок. Можна вказати будь-який дійсний колір. Наприклад, зробить межі рамок червоними.

Приклад використання:

Як зробити посилання на певний кадр

Ми можемо відкрити посилання в певному кадрі за допомогою атрибута мета В етикетці. Значення мета має збігатися з назвою кадру (ямс атрибутом ). Наприклад:

в menu.html
Сторінка 1
Сторінка 2

У цьому випадку натискання посилань «Сторінка 1» або «Сторінка 2» у фреймі меню завантажить відповідну сторінку у фреймі «вмісту».

Як зламати рами

Якщо ви хочете, щоб посилання відкривало сторінку за межами набору фреймів (тобто замінювало весь набір фреймів), ви можете використати спеціальне значення _top для атрибута мета. Наприклад:

в menu.html
вийти з кадрів

Коли ви натискаєте «Вийти з фреймів», браузер завантажує «pageOutofFrames.html» у повному вікні, замінюючи набір фреймів.

Приклад поділу екрана на дві колонки з рамками

У цьому прикладі екран розділено на дві колонки однакового розміру. Кожен стовпець завантажує окрему сторінку HTML.

Приклад створення бічної панелі навігації з рамками

У цьому прикладі створено бічну панель, яка займає 25% екрана та використовується для навігації. Решта екрана використовується для відображення основного вмісту.

Приклад поділу екрана на рядки та стовпці

Цей більш складний приклад ділить екран на чотири рівні частини. Кожен розділ завантажує окрему сторінку HTML.

Приклад верхньої навігації з фреймами HTML

Створіть файл, який визначає два кадри поспіль. Він визначає два файли: один для навігації (який займає 20% ширини вікна) і один для основного вмісту (який займає решту ширини вікна).

Далі вам потрібно буде створити файли "navigation.html" і "content.html". Наприклад, "navigation.html" може виглядати так:

Сторінка 1

Сторінка 2

Сторінка 3


А "content.html" може бути приблизно таким:

Ласкаво просимо на наш сайт!

Тут буде розміщено вміст сторінки, вибраної в навігації.

У цьому випадку, коли ви клацаєте посилання в "navigation.html", відповідна сторінка завантажується у фрейм "контент".