Фреймы в HTML — это способ разделения окна браузера на несколько секций, каждая из которых может загружать и отображать разные HTML-документы. В этой статье мы увидим практические примеры фреймов в HTML.

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

Как фреймы или фреймы работают в HTML?

Каркас состоит из двух элементов:

1. Фреймсет: Элемент используется для разделения окна браузера на прямоугольные секции, каждая из которых может загружать свой HTML-документ.

2. кадры: Элемент используется в течение для определения каждого из отдельных разделов. И он отправляет вызов какого-то другого документа, загруженного внутри набора фреймов.

   instagram story viewer

• Следите за: Примеры iFrame

Как сделать фреймы в HTML

Чтобы создать HTML-документ с фреймами, выполните два очень простых шага:

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

Файл 1: frameset.html

2. Создайте один или несколько документов HTML для загрузки во фреймах.

Файл 2: frame1.html

Это кадр 1

Файл 3: frame2.html

Это кадр 2

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

Некоторые из наиболее важных атрибутов элемента являются:

• прокрутка: Этот атрибут используется для управления внешним видом полос прокрутки в кадре. Может иметь значения «авто», «да» или «нет».

• изменить размер: Этот атрибут используется для предотвращения изменения размера кадра пользователем.

• сладкий картофель: Этот атрибут используется для присвоения фрейму имени, которое может быть полезно для ссылки на фрейм в ссылках и скриптах.

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

• рамка: Этот атрибут указывает, должны ли фреймы иметь границы или нет. Возможные значения: «1» (для отображения границ) или «0» (для отсутствия границ). Например, .

• граница: Этот атрибут определяет ширину границы между кадрами в пикселях. Например, создаст границу 5px между кадрами.

• кадрирование: этот атрибут аналогичен граница. Он также определяет пространство между кадрами в пикселях. Например, между кадрами будет установлен зазор в 10 пикселей.

• цвет границы: этот атрибут позволяет изменить цвет границы фреймов. Можно указать любой допустимый цвет. Например, сделает границу рамок красной.

Пример использования:

Как сделать ссылку на конкретный кадр

Мы можем сделать ссылку открытой в определенном фрейме, используя атрибут цель На этикетке. Значение цель должно совпадать с именем кадра (сладкий картофель атрибут ). Например:

в меню.html
Страница 1
Страница 2

В этом случае нажатие на ссылки «Страница 1» или «Страница 2» во фрейме меню загрузит соответствующую страницу во фрейме «контент».

Как разбить рамки

Если вы хотите, чтобы ссылка открывала страницу за пределами набора фреймов (т.е. заменяла весь набор фреймов), вы можете использовать специальное значение _вершина для атрибута цель. Например:

в меню.html
выйти за рамки

Когда вы нажмете «Выйти из фреймов», браузер загрузит «pageOutofFrames.html» в полном окне, заменив набор фреймов.

Пример разделения экрана на две колонки с рамками

В этом примере экран разделен на две колонки одинакового размера. Каждый столбец загружает отдельную HTML-страницу.

Пример создания боковой панели навигации с фреймами

В этом примере создается боковая панель, занимающая 25 % экрана и используемая для навигации. Остальная часть экрана используется для отображения основного контента.

Пример разделения экрана на строки и столбцы

Этот более сложный пример делит экран на четыре равные части. Каждый раздел загружает отдельную HTML-страницу.

Пример верхней навигации с HTML-фреймами

Создайте файл, определяющий два кадра подряд. Он определяет два файла: один для навигации (который занимает 20% ширины окна) и один для основного содержимого (который занимает остальную часть ширины окна).

Затем вам нужно будет создать файлы «navigation.html» и «content.html». Например, «navigation.html» может выглядеть так:

Страница 1

Страница 2

Страница 3


И «content.html» может быть примерно таким:

Добро пожаловать на наш веб-сайт!

Здесь будет содержимое страницы, выбранной в навигации.

В этом случае, когда вы щелкаете ссылку в «navigation.html», соответствующая страница загружается во фрейме «content».