Фреймы
Фреймы – это прямоугольные области экрана, каждая из которых содержит свой собственный html-документ. Фреймы использовались для оформления следующих документов:
- Оглавление. Если вы поместите на Web-страницу оглавление в виде вертикального столбца, то пользователь сможет обратиться к нему в любой момент, и ему не нужно будет постоянно щелкать на кнопке возврата к предыдущей странице. Поскольку, находясь во фрейме, оглавление всегда будет под рукой, пользователю нужно будет просто выбрать другой его пункт и сразу же получить нужную информацию.
- Неподвижные элементы интерфейса. Можно зафиксировать на экране какое-то графическое изображение, например, логотип фирмы, в то время как остальная часть страницы будет прокручиваться в другом фрейме.
- Формы и результаты. Можно создать форму в одном фрейме, а в другом отобразить результаты запроса.
Обычные фреймы на данный момент считаются устаревшей технологией и не поддерживаются в HTML5. Не используйте обычные фреймы в своих проектах! В HTML5 тегов frame, frameset и noframes уже просто нет, вместо них предусмотрен один единственный тег iframe (встроенный или плавающий фрейм).
Тег
Тег заменяет тег и используется для разделения экрана. Имеет закрывающий тег.
Атрибуты тега
cols Делит экран по вертикали. Принимает значения в пикселях, в процентах или просто *. Значение * говорит о том, что конкретный столбец будет занимать всю остальную часть экрана rows Делит экран по горизонтали. Принимает значения в пикселях, в процентах или просто *. Значение * говорит о том, что конкретная строка будет занимать всю остальную часть экрана frameborder Определяет наличие рамок, т.е. границ фреймов. Принимает значения «yes» или «no» border Ширина рамки в пикселях bordercolor Цвет рамок. По умолчанию (если используется стандартная цветовая схема системы Windows) границы фреймов имеют тусклый, серый оттенок. Но при желании можно выбрать любой другой цвет. При определении цвета можно выбрать как его название, так и числовой эквивалент в системе RGB. Например, blue или #0000ff
В отдельном теге имеет смысл использовать только один из атрибутов – cols или rows. Это означает, что фреймовая структура будет состоять или только из столбцов, или только из строк. Чтобы создать строки внутри столбцов или столбцы внутри строк, вам потребуется вложенные контейнеры .
Пример
Используя сразу оба атрибута – и cols, и rows в одном теге , вы не сможете получить такое разбиение экрана.
HTML Урок 6. Фреймовая структура html
С самого начала следует сказать, что прием использования фреймовой структуры хоть и очень удобен в некоторых случаях, тем не менее, использование структуры не желательно для коммерческих проектов.
Элемент frameset
Синтаксис деления по вертикали (на колонки):
FRAMESET cols="n%,n%"> … /FRAMESET>
где n — ширина фреймов в процентах слева направо
Синтаксис деления по горизонтали:
FRAMESET rows="n%,n%"> … /FRAMESET>
где n — высота фреймов в процентах сверху вниз
Фреймов в структуре может быть не два, а более.
Файл с фреймовой структурой называется файлом-раскладкой и обычно называется index.html
Как происходит загрузка файлов во фрейм рассмотрим на примере.
FRAME src="Имя файла.html" name="имя фрейма">
Пример: Создать файл с фреймовой структурой с двумя колонками: в левую (ширина 25%) загружать файл menu.html, в правую (ширина 70%) загружать файл content.html
html> head> title>Пример/title> /head> frameset cols="25%, 75%"> frame src="menu.html"> frame src="content.html"> /frameset> /html>
Задание 1:
Создать файл с фреймовой структурой (имя файла index.html) с тремя колонками (ширина: 25%, 50%, *). Создать три файла для загрузки в фреймы, расположить их в той же папке, в которой находится index.html: 1. menu.html (в нем расположить заголовок h1 «Меню»), 2. content.html (в нем расположить заголовок h1 «Контент»), 3. news.html (в нем расположить заголовок h1 «Новости»).
Поменяйте расположение с колонок на ряды (горизонтальное деление), посмотрите на результат.
Атрибуты тега frameset:
frameborder — значение 1 или 0 (есть или нету)
border — значение размера границы
bordercolor — цвет границы
framespacing — ширина граней фреймов в пикселях (только в IE)
frameset cols="25%, 75%" frameborder="1" bordercolor="red" border="1">
Атрибуты элемента frame:
name — имя фрейма
noresize — запрещает изменение размеров для определенного фрейма.
scrolling — управляет прокруткой внутри одной области ( yes , no , auto ).
marginheight — задает величину отступа фрейма от верхнего и нижнего краев страницы.
marginwidth — создает поля слева и справа
frameborder — указывает, нужна или нет рамка вокруг фрейма (0 и 1)
bordercolor – цвет рамки
Правила создания ссылки во фреймах в html
Если представить структуру, в которой слева находится фрейм с меню сайта, а справа фрейм, предназначенный для вывода содержимого выбранных пунктов меню, то становится очевидна следующая проблема:
при щелчке на пункте меню содержимое будет загружаться в тот же фрейм с меню, а не во фрейм, расположенный справа
- добавить название необходимого фрейма при помощи атрибута name (в файле-раскладке)
Пример:
frame src="content.html" name="mainFrame">
href="glava1.html" target="mainFrame" rel="noopener noreferrer">
Посмотрим полный код обоих файлов:
Файл index.html
html> . frameset cols="25%, 75%"> frame src="menu.html"> frame src="content.html" name="mainFrame"> /frameset> /html>
html> . body> h2>Меню:/h2> ul> li>href="glava1.html" target="mainFrame" rel="noopener noreferrer">Глава 1/а>/li> li>href="glava2.html" target="mainFrame" rel="noopener noreferrer">Глава 2/а>/li> /ul> /html>
Вложенные фреймы
Работа с фреймами в html подразумевает и более сложную структуру.
Рассмотрим на примере:
Каким будет результат?
Лабораторная работа: создать фреймовую структуру и загружаемые в нее файлы согласно изображению:
Встроенные (плавающие) фреймы
Такого вида фреймы нежелательно использовать в коммерческих проектах, они могут блокироваться браузером и неправильно восприниматься поисковыми системами
Пример плавающего фрейма:
html> . body> . iframe src="main.html" width="150" height="100">/iframe> . /body> /html>
Фрейм будет вставлен в виде окна указанных размеров (атрибуты width и height ).
Дополнительные атрибуты:
- name — имя фрейма
- frameborder — граница фрейма
- scrolling — полоса прокрутки
- hspace — отступы по горизонтали
- vspace — отступы по вертикали
- marginwidth — отступ внутренней страницы от границы фрейма по горизонтали
- marginheight — отступ внутренней страницы от границы фрейма по вертикали
Лабораторная работа 2: Создать фреймовую структуру и загружаемые в нее файлы согласно изображению и списку файлов. В файле с меню необходимо организовать две гиперссылки: по щелчку на первую из них — файл glava1.html загружается в левый фрейм (там, где Главная домашняя страница), по щелчку на вторую из них — файл glava2.html загружается тоже в левый фрейм. В качестве внутреннего фрейма использовать плавающий фрейм ( iframe ).
index.html - Главная раскладка с фреймовой структурой shapka.html - Название сайта menu.html - Меню home.html - Главная домашняя страница podval.html - Нижняя часть inner.html - Встроенный фрейм glava1.html - Глава 1 glava2.html - Глава 2
Фреймы
Фреймы — это HTML-элементы, позволяющие разделить окно веб-браузера на несколько независимых окон, в каждое из которых можно загрузить отдельный HTML-документ. Каждое такое окно (фрейм) может иметь собственные полосы прокрутки и функционировать независимо от других независимых окон либо наоборот управлять их содержанием. Они могут применяться для организации постоянно находящегося в одном окне меню, в то время как в другом окне располагается непосредственно сама информация. Пользователи могут обращаться к меню в любой момент, и им не нужно возвращаться к предыдущей странице, чтобы выбрать другой пункт меню. Применение фреймов позволит вам «закрепить» в окне браузера изображения или другие неподвижные по замыслу элементы интерфейса, в то время как остальная часть страницы будет прокручиваться во фрейме.
Однако, стоит отметить, что в наши дни фреймы считаются устаревшим средством, а сайты с фреймами теперь считаются несолидными, так как профессиональные веб-мастера никогда не используют фреймы в своих проектах. С фреймами связан целый ряд печально известных проблем. Они, например, сбивают с толку поисковые машины, поскольку на страницах, которые содержат контент, нет ссылок на другие документы. Если вы хотите получать посетителей с поисковых систем, забудьте о фреймах. Понравившуюся страницу пользователю невозможно поместить в раздел закладки браузера, так как фреймы скрывают адрес страницы, на которой он находится, и всегда показывают только адрес веб-сайта. По этой причине они создают проблемы для браузеров при отслеживании хронологии и еще они не слишком приспособлены для разных размеров экранов и мобильных устройств.
Несмотря на то, что проекты с фреймами встречаются во всемирной паутине все реже, изучение HTML было бы неполным без рассмотрения темы о фреймах. У фреймов наряду с недостатками есть и некоторые достоинства, которые не позволяют отбросить эту технологию как бесперспективную.
Создание фреймов
Структура HTML-документа с фреймами внешне очень напоминает формат обычного HTML-документа. Как и в обычном HTML-документе, весь код помещен между парными тегами и , а в контейнере располагаются заголовки. Основное отличие документа с фреймами от обычного HTML-документа — у документа с фреймами вместо тега применяется парный тег (от англ. frame set – набор фреймов).
В следующем примере приведена структура HTML-документа с фреймами:
Пример: Структура HTML-документа с фреймами
- rows — описывает разбиение страницы на строки:
- cols — описывает разбиение страницы на столбцы:
В значении атрибутов rows и cols необходимо указывать не количество строк или столбцов, а значение ширины и высоты фреймов. Все значения в списке разделяются запятыми. Размеры могут быть указаны в абсолютных единицах (в пикселах) или в процентах:
- cols=»20%, 80%» — окно браузера разбивается на две колонки с помощью атрибута cols, левая колонка занимает 20%, а правая 80% окна браузера.
- rows=»100, *» окно браузера разбивается на два горизонтальных окна с помощью атрибута rows, верхнее окно занимает 100 пикселов, а нижнее — оставшееся пространство, заданное символом звездочки.
Как видно из данного примера, контейнер с атрибутом rows вначале создает два горизонтальных фрейма, а вместо второго фрейма подставляется еще один , который разбивает нижний горизонтальный фрейм на две колонки с помощью атрибута cols, левая колонка занимает занимает 20%, а правая 80% окна браузера.
Если браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами и . Все, что находится между тегами и , игнорируется браузерами, поддерживающими фреймы. Таким образом разработчику нужно написать код, дублирующий содержимое фреймов другими средствами, и поместить этот код в контейнер , тогда все пользователи смогут увидеть его веб-страницу.
Как уже отмечалось, для вставки в документ отдельного фрейма служит непарный тег . Атрибут src задает документ, который должен отображаться внутри данного фрейма, например: . Если атрибут src отсутствует, отображается пустой фрейм.
Границы или пространство между фреймами
По умолчанию, браузер отображает серую и, как правило, в виде трехмерной линии границу между фреймами, с помощью которой посетители могут регулировать размер фрейма.
Границей фрейма можно управлять, как и любыми другими элементами фрейма. Для этого существует несколько атрибутов элемента , позволяющих настраивать границы фреймов. Толщина линии границы определяется атрибутом border. По умолчанию значение толщины границы равно пяти.
Чтобы скрыть границу фрейма, необходимо либо указать значение ширины границы равным нулю, либо присвоить значение «no» или «0» атрибуту frameborder. Атрибут frameborder может принимать только два противоположных значения. Если значение атрибута frameborder равно «yes» или «1», то граница фреймов будет отображаться, а если «0» или «no», то нет. Учтите, что значения атрибута frameborder различаются для разных браузеров. Чтобы решить эту проблему используйте дважды атрибут frameborder, а для некоторых браузеров требуется еще добавить атрибут framespacing со значением «0»:
В следующем примере убираем границу между фреймами: