Сайт о телевидении

Сайт о телевидении

» » Как задать цвет в iframe. HTML iframe: пример и особенности применения

Как задать цвет в iframe. HTML iframe: пример и особенности применения

Наверняка Вы уже не один раз слышали о таком понятие, как фреймы. Прочитать о них можно в любом html-учебнике, а также на ресурсах о создании сайтов . Изучив множество примеров и описаний, я решил рассказать все о фреймах своими словами в очень простой форме. О плюсах, о минусах и о будущем фреймов будет сказано в самом низу этой страницы. Итак, что же такое фреймы в html?

Что такое Фреймы в html

Фрейм (англ. frame) - некоторая подключаемая независимая область на веб-странице.

Не пугайтесь, что это звучит немного непонятно. Давайте сразу приведем самый простой пример и тогда все станет ясно.

Отройте помощь (help) в любой программе (это может быть блокнот, какая-то программа, браузер и т.п.). Практически всегда Вы увидите хелп состоящий из двух частей (слева навигация, справа содержимое). Левая и правая части как раз и являются отдельными фреймами. Ниже представлен скриншот сделанный из хелпа самого обыкновенного блокнота Windows:

Рис 1. Использования фреймы на примере хелпа блокнота

То что Вы видите, является веб-страничкой состоящий из двух отдельных независимых фреймов. Приведем примерный html код такого фрейма из хелпа.

Пример с фреймами №1 (делаем помощь)

В каркасе выше рассмотренный хелп будет выглядеть следующим образом:


Рис 2. Каркас использования фреймов для примера №1

Разбиение страницы на области с помощью фреймов очень напоминает табличную верстку html (см. HTML тег table). Примерный код такой страницы может выглядеть следующим образом:

<span>Пример №1 html-страницы с фреймами </span>
Пояснение к примеру №1

Как видно из кода выше, страница созданная из фреймов очень похожа на обыкновенную html-страницу: есть открывающий тег html, раздел , заголовок , но есть одно большое различие. Наверное, Вы обратили внимание, что <a href="/chto-takoe-head-v-html-html-tegi-html-head-body-tegi-kotorye-est-v-lyuboi-stranichke.html">тег body</a>, который отвечает за тело страницы - отсутствует. Вместо него вставлен тег <frameset> , который отвечает за тело страницы. У этого тега есть два атрибут cols="25%,75%" , что означает разбить все тело страницы на две области по вертикали в пропорции 1:3. Первая область займет 25% от ширины всего экрана (в ней будет первый фрейм menu.html ), вторая область займет 75% от ширины всего экрана (в ней будет второй фрейм content.html ).</p> <p>Последний совсем <a href="/html5-primery-neobyazatelnye-tegi-v-html5-traktovka-russkogo-yazyka-kak.html">необязательный тег</a> это <noframes> . Он нужен для браузеров, которые не поддерживают фреймы. Если браузер не поддерживает фреймы, то рекомендуется вежливо сообщить об этом пользователю через этот тег.</p> <p>Кстати, обратите внимание, что для тега <frame> не нужен закрывающий тег.</p> <p>Надеюсь, что теперь у Вас есть представления о фреймах. Чтобы понять более трудные примеры, давайте попробуем создать <a href="/sozdanie-prostoi-html-stranicy-sozdanie-pervoi-veb-stranicy.html">простую html-страницу</a> состоящую из 4 фреймов. Это будет пример №2.</p> <h2>Пример с 4 фреймами №2</h2> <p>Каркас для примера 2:</p> <p><img src='https://i1.wp.com/zarabotat-na-sajte.ru/uroki-html/img/primer2-frame-karkas.jpg' width="100%" loading=lazy><br>Рис 3. Каркас использования фреймов для примера №2</p> <p>Код исходной html-страницы с фреймом будет следующий:</p> <blockquote><html > <head > <title ><span>Пример №2 html-страницы с фреймами </span> <span>Ваш браузер не поддерживает отображение фреймов </span>

Код файла top.html

<span>Файл top.html - шапка сайта </span>

Пример №2

А здесь могло быть лого и не только:)

Код файла menu.html

<span>Файл menu.html - меню сайта </span>

Код файла content.html

<span>Файл content.html - контент сайта </span>

Главная страница

Содержимое сайта. Сейчас открыт файл content.html
Это исходное состояние нашего фрейма. Назовем этот файл "Главной страницей"

Код файла about-site.html

<span>Файл about-site.html - Страница о сайте </span>

О сайте

Страница о сайте. Сейчас открыт файл about-site.html

Код файла about-autor.html

<span>Файл about-autor.html - об авторе </span>

Об авторе

Страница об авторе. Сейчас открыт файл about-autor.html

Код файла footer.html

<span>Файл footer.html - о сайте </span> Футер сайта. Сейчас открыт файл footer.html
Пояснение к примеру №2

Первоначально вся страница разбивается на три области по горизонтали в пропорции 3:14:3. За это отвечает атрибут rows="15%,70%,15%" . Первый фрейм в нашем примере - шапка (мы её обозвали top.html ), на нее отводится 15% места по высоте. Далее идет большой фрейм занимающий 70% по высоте. Мы его разбиваем на две части с помощью cols="25%,75%" в пропорции 1:3. Слева будет фрейм menu.html , справа content.html . Мы специально дали имя второму фрейму name="main" с целью возможности переключения страниц. Обратите внимание, что в файле menu.html к каждой ссылки приписан атрибут target="main" , что позволяет при нажатии на эту ссылку загружать элементы в область с именем main. Внизу сайта расположился последний фрейм footer.html .

Если вы реализуете пример №2, то должны получить такую html-страницу в исходном состоянии:


Рис 4. Пример №2 - исходное состояние

При переходе на страницу о сайте страница будет выглядеть следующим образом:


Рис 5. Пример №2 - второе состояние


Рис 6. Пример №2 - третье состояние

Тег

Необязательные атрибуты этого тега являются width="ширина" и height="высота" , а обязательный атрибут src="адрес фрейма" .

Атрибуты и свойства тега

1. Атрибут COLS="Параметры"
Задает количество разбиений страницы по вертикали.

2. Атрибут ROWS="Параметры"
Задает количество разбиений страницы по горизонтали.

Теперь рассмотрим каким образом можно задать параметры разбиение.

а) С помощью числа , которому будет соответствовать количество пикселей. Например, cols = "100,100,300" задает разбиение страницы на три области, каждая из которых будет по ширине: 100 пикселей, 100 пикселей и 300 пикселей соответственно.

б) С помощью процентов от общей ширины/высоты. В рассмотренных выше примерах мы использовали именно процентное разбиение, поэтому приводить пример мне кажется бессмысленно.

в) С помощью * (звездочки). Например, cols = "2*,3*,100" задает первые две области в соотношение 2:3, а третья область будет шириной в 100 пикселей.

Все три способа можно совмещать. Например, cols="2*,100,15%,4*" .

3. Атрибут frameborder="{yes|no}"
Определяет наличие рамки у фрейма. Если ответ yes, то следующий четвертый атрибут border имеет силу.

4. Атрибут border="параметр"
В пикселях border задает толщину обводки области фрейма. Например, frameborder = "2" задает область с выделенным контуром в 2 пикселя.

5. Атрибут bordercolor="цвет"
Определяет цвет рамки, если она есть. Цвет можно задать как словами, так и кодом (см. цветовая палитра html).

Примечание: обратите внимание, что тегу нужен закрывающий тег .

Атрибуты и свойства тега

1. Атрибут src="адрес элемента"
В качестве параметра здесь должен указываться полный URL к адресу элемента. Этот атрибут обязателен. Он уже знаком Вам, т.к. он присутствовал в примерах 1 и 2.

2. Атрибут marginwidth="число"
Задает отступ внутри фрейма от границ в пикселях по ширине. Например, marginwidth="10" задаст отступ содержимого слева и справа от границы фрейма.

3. Атрибут marginhight="число"
Аналогичен второму с той лишь разницей, что задает отступ по высоте.

4. Атрибут scrolling="{yes|no|auto}"
Задает возможность прокрутки фрейма, в случае если он не смог уместиться в рамки отведенной ему области. По умолчанию стоит значение auto (означает, что при необходимости создавать скролл).

5. Атрибут noresize
Если установлен этот атрибут, то пользователю запрещается самостоятельно менять границы фрейма. По умолчанию этот атрибут не стоит и пользователь может менять границы как хочет.

5. Атрибут name="название"
С помощью этого атрибута можно давать фрейму имя. Это нужно для того, чтобы к этому фрейму могли обращаться другие фреймы. В примере №2 как раз рассматривается такой случай.

Примечание:
Имя не должно начинаться с нижнего подчеркивания "_".

6. Атрибуты frameborder, border и bordercolor
Эти три атрибута такие же как и у frameset (см. атрибуты frameset выше).

Преимущества и недостатки фреймов

Плюсы фреймов

  • Возможность отображения в одном окне независимо несколько страниц (пример 1 и 2 выше);
  • Возможность переключать содержимое страницы не перезагружая страницу (меняется только одна область экрана);
  • Возможность построить гибко структуру сайта (шапка, меню, футер и т.д. - вся статическая информация хранится отдельно в файлах, а это позволяет быстро отредактировать часть сайта);
  • Пользователь может сам изменять размер области просмотра, в случае если не установлена опция noresize;

Минусы фреймов

  • Поисковые системы плохо индексируют сайты на фреймах, поскольку не в состоянии интерпретировать подгружаемые файлы во фреймах. Поисковая машина различает страницы по их адресу (URL), а у фреймов несмотря на разные состояния, адрес страницы не изменяется. Это противоречит правилам поисковой машины, а значит не факт, что поисковик сможет проиндексировать сайт.
  • Невозможно сохранить в закладки сайт на фреймах, т.к. URL страницы будет одинаковый. Таким образом, можно лишь сохранить исходное состояние фрейма.
  • Не все браузеры поддерживают фреймы.

Будущее фреймов:
От фреймов уже давно стали отказываться многие вебмастеры. Это связано с трудностями продвижения в поисковиках. Сейчас все переходят на Ajax, как более динамичный и современный способ отображения информации на одной странице сайта.

Уважаемый читатель, мы рассмотрели теги html документа касающиеся фреймов. Несмотря на сомнительное будущее этого направления, знать про фреймы должен каждый вебмастер.

На заре сайтостроения веб-ресурсы широко использовали фреймы для отображения отдельных частей страниц. Но с приходом новой версии HTML 5 всё изменилось. Элементы разметки <frame >, <frameset > и <noframes > признаны устаревшими. Заменой им стал один-единственный тег - <iframe >. Как добавить в html

В приведённой разметке достаточно заменить адрес сайта на любой другой и, если это необходимо, скорректировать размеры фрейма.

Элемент .

Синтаксис

Закрывающий тег

Обязателен.

Атрибуты

align Определяет, как фрейм будет выравниваться по краю, а также способ обтекания его текстом. allowfullscreen
Разрешает для фрейма полноэкранный режим. allowtransparency
Устанавливает прозрачный фон фрейма, через который виден фон страницы. frameborder Устанавливает, отображать границу вокруг фрейма или нет. height Высота фрейма. hspace Горизонтальный отступ от фрейма до окружающего контента. marginheight Отступ сверху и снизу от содержания до границы фрейма. marginwidth Отступ слева и справа от содержимого до границы фрейма. name Имя фрейма. sandbox Позволяет задать ряд ограничений на контент загружаемый во фрейме. scrolling Способ отображения полосы прокрутки во фрейме. seamless Определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа. src Путь к файлу, содержимое которого будет загружаться во фрейм. srcdoc Хранит содержимое фрейма непосредственно в атрибуте. vspace Вертикальный отступ от фрейма до окружающего контента. width Ширина фрейма.

Пример

IFRAME

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации ) - первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living ) - он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Тег .

Синтаксис

Параметры

align Определяет как фрейм будет выравниваться по краю, а также способ обтекания его текстом. frameborder Устанавливает, отображать границу вокруг фрейма или нет. height Высота фрейма. hspace Горизонтальный отступ от фрейма до окружающего контента. name Имя фрейма. scrolling Способ отображения полосы прокрутки во фрейме. src Путь к файлу, содержимое которого будет загружаться во фрейм. vspace Вертикальный отступ от фрейма до окружающего контента. width Ширина фрейма.

Закрывающий тег

Обязателен.

Пример 1. Использование тега


Описание параметров тега

Аргументы

absmiddle Выравнивание середины фрейма по середине текущей строки. baseline Выравнивание фрейма по базовой линии текущей строки. bottom Выравнивание нижней границы фрейма по окружающему тексту. left Выравнивает фрейм по левому краю окна. middle Выравнивание середины фрейма по базовой линии текущей строки. right Выравнивает фрейм по правому краю окна. texttop Верхняя граница фрейма выравнивается по самому высокому текстовому элементу текущей строки. top Верхняя граница фрейма выравнивается по самому высокому элементу текущей строки.

Наиболее популярные параметры — left и right , создающие обтекание текста вокруг фрейма. Чтобы текст не прилегал плотно к содержимому фрейма, рекомендуется в теге

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Параметр FRAMEBORDER

Описание

По умолчанию вокруг содержимого фрейма рисуется рамка с эффектом трехмерности. Чтобы ее скрыть применяется параметр frameborder .

Синтаксис


Аргументы

yes (или 1) Отображает рамку вокруг фрейма. no (или 0) Скрывает рамку вокруг фрейма.

Значение по умолчанию

Пример 3. Сокрытие исходной рамки вокруг фрейма





Тег IFRAME, параметр frameborder




Параметр HEIGHT и WIDTH

Описание

Для изменения размеров фрейма средствами HTML предусмотрены параметры width и height . Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры фрейма вычисляются относительно родительского элемента — контейнера, где находится тег

Аргументы

Любое целое положительное число в пикселах или процентах.

Значение по умолчанию

width — 300 пикселов, height — 150 пикселов.

Пример 4. Ширина и высота фрейма





Тег IFRAME, параметр width




Параметр HSPACE и VSPACE

HTML: 3.2 4 XHTML: 1.0 1.1

Описание

Для любого фрейма можно задать невидимые отступы по горизонтали и вертикали с помощью, соответственно, параметров hspace и vspace . Особенно это актуально при обтекании содержимого фрейма текстом. В этом случае, чтобы текст не «наезжал» плотно на границу фрейма, необходимо вокруг него добавить пустое пространство.

Синтаксис


Аргументы

Любое целое положительное число в пикселах.

Значение по умолчанию

Пример 5. Поля вокруг фрейма





Тег IFRAME, параметр hspace




Параметр NAME

Описание

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

Синтаксис

Аргументы

Для указания имени используется набор символов, включая числа и буквы. При обращении к фрейму по имени соблюдайте то же написание, что и в параметре name .

Значение по умолчанию





Тег IFRAME, параметр name


Чебурашка

Крокодил Гена

Шапокляк


Параметр SCROLLING

Описание

Если содержимое фрейма не помещается в отведенные размеры, автоматически появляются полосы прокрутки для просмотра информации. В некоторых случаях, полосы прокрутки нарушают дизайн веб-страницы, поэтому от них можно отказаться. Для управления отображением полос прокрутки используется параметр scrolling .

Синтаксис

Аргументы

auto Полосы прокрутки добавляются браузером только по необходимости, в том случае, когда содержимое фрейма превышает его видимую часть. no Запрещает отображение полос прокрутки. yes Всегда вызывает появление полос прокрутки, независимо от объема информации.

Значение по умолчанию

Пример 7. Сокрытие полос прокрутки





Тег IFRAME, параметр scrolling




Параметр SRC

Описание

Указывает адрес файла (URL), который будет загружаться во фрейм. Это может быть HTML-документ, изображение или серверная программа. Допустимо использовать не только путь к файлу, но также имя функции JavaScript, которое возвращает значение.

Синтаксис

Аргументы

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Пример 8. Путь к файлу





Тег IFRAME, параметр src




Теги фреймов

  • FRAME определяет свойства отдельного фрейма, на которые делится окно браузера.
  • FRAMESET определяет структуру фреймов на веб-странице. Фреймы разделяют окно браузера на отдельные области, расположенные вплотную друг к другу. В каждую из таких областей загружается самостоятельная веб-страница определяемая с помощью тега FRAME.
  • IFRAME создает плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.
  • NOFRAMES отображается в браузере, когда он не поддерживает фреймы и не умеет их интерпретировать. Браузеры, которые работают с фреймами, полностью игнорируют содержимое тега NOFRAMES.
  • Фреймы — это HTML-элементы, позволяющие разделить окно веб-браузера на несколько независимых окон, в каждое из которых можно загрузить отдельный HTML-документ. Каждое такое окно (фрейм) может иметь собственные полосы прокрутки и функционировать независимо от других независимых окон либо наоборот управлять их содержанием. Они могут применяться для организации постоянно находящегося в одном окне меню, в то время как в другом окне располагается непосредственно сама информация. Пользователи могут обращаться к меню в любой момент, и им не нужно возвращаться к предыдущей странице, чтобы выбрать другой пункт меню. Применение фреймов позволит вам «закрепить» в окне браузера изображения или другие неподвижные по замыслу элементы интерфейса, в то время как остальная часть страницы будет прокручиваться во фрейме.
    Однако, стоит отметить, что в наши дни фреймы считаются устаревшим средством, а сайты с фреймами теперь считаются несолидными, так как профессиональные веб-мастера никогда не используют фреймы в своих проектах. С фреймами связан целый ряд печально известных проблем. Они, например, сбивают с толку поисковые машины, поскольку на страницах, которые содержат контент, нет ссылок на другие документы. Если вы хотите получать посетителей с поисковых систем, забудьте о фреймах. Понравившуюся страницу пользователю невозможно поместить в раздел закладки браузера, так как фреймы скрывают адрес страницы, на которой он находится, и всегда показывают только адрес веб-сайта. По этой причине они создают проблемы для браузеров при отслеживании хронологии и еще они не слишком приспособлены для разных размеров экранов и мобильных устройств.
    Несмотря на то, что проекты с фреймами встречаются во всемирной паутине все реже, изучение HTML было бы неполным без рассмотрения темы о фреймах. У фреймов наряду с недостатками есть и некоторые достоинства, которые не позволяют отбросить эту технологию как бесперспективную.

    Создание фреймов

    Структура HTML-документа с фреймами внешне очень напоминает формат обычного HTML-документа. Как и в обычном HTML-документе, весь код помещен между парными тегами и , а в контейнере располагаются заголовки. Основное отличие документа с фреймами от обычного HTML-документа — у документа с фреймами вместо тега применяется парный тег (от англ. frame set – набор фреймов).
    В следующем примере приведена структура HTML-документа с фреймами:

    Пример: Структура HTML-документа с фреймами

    • Попробуй сам »
    frame_top
    frame_left frame_right



    Документ с фреймами

    В приведенном примере страница содержит три области, в каждую из которых первоначально загружаются HTML-документы frame_top.html, frame_left.html и frame_right.html. Помимо HTML-документов, фрейм может содержать и графику. Для этого необходимо указать адрес соответствующего изображения в атрибуте src , например src="image.gif" . Обратите внимание, что элемент используется без закрывающего тега.
    Внутри контейнера могут содержаться только теги или другой набор фреймов, охваченный тегами и .
    Тег имеет следующие атрибуты:

    • rows — описывает разбиение страницы на строки:
    • cols — описывает разбиение страницы на столбцы:
    Области, полученные в результате такого разбиения страницы, и будут являться фреймами. Отсутствие этих атрибутов определяет один фрейм, который займет все окно браузера.

    В значении атрибутов rows и cols необходимо указывать не количество строк или столбцов, а значение ширины и высоты фреймов. Все значения в списке разделяются запятыми. Размеры могут быть указаны в абсолютных единицах (в пикселах) или в процентах:

    • cols="20%, 80%" — окно браузера разбивается на две колонки с помощью атрибута cols , левая колонка занимает 20%, а правая 80% окна браузера.
    • rows="100, *" окно браузера разбивается на два горизонтальных окна с помощью атрибута rows , верхнее окно занимает 100 пикселов, а нижнее — оставшееся пространство, заданное символом звездочки.

    Как видно из данного примера, контейнер с атрибутом rows вначале создает два горизонтальных фрейма, а вместо второго фрейма подставляется еще один , который разбивает нижний горизонтальный фрейм на две колонки с помощью атрибута cols , левая колонка занимает занимает 20%, а правая 80% окна браузера.
    Если браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами </b> и <b> . Все, что находится между тегами </b> и <b> , игнорируется браузерами, поддерживающими фреймы. Таким образом разработчику нужно написать код, дублирующий содержимое фреймов другими средствами, и поместить этот код в контейнер </b> , тогда все пользователи смогут увидеть его веб-страницу.<br> Как уже отмечалось, для вставки в документ отдельного фрейма служит непарный тег <b><frame> </b> . Атрибут <b>src </b> задает документ, который должен отображаться внутри данного фрейма, например: <frame src="frame_top.html">. Если атрибут <b>src </b> отсутствует, отображается пустой фрейм.</p> <h2>Границы или пространство между фреймами</h2> <p>По умолчанию, браузер отображает серую и, как правило, в виде трехмерной линии границу между фреймами, с помощью которой посетители могут регулировать размер фрейма.<br> Границей фрейма можно управлять, как и любыми другими элементами фрейма. Для этого существует несколько атрибутов элемента <b><frameset> </b> , позволяющих настраивать границы фреймов. Толщина линии границы определяется атрибутом <b>border </b>. По умолчанию значение толщины границы равно пяти.<br> Чтобы скрыть границу фрейма, необходимо либо указать значение ширины границы <a href="/java-peremennaya-ravna-nulyu-posle-deleniya-izuchaem-java.html">равным нулю</a>, либо присвоить значение «no» или «0» атрибуту <b>frameborder </b>. Атрибут <b>frameborder </b> может принимать только два противоположных значения. Если значение атрибута <b>frameborder </b> равно «yes» или «1», то граница фреймов будет отображаться, а если «0» или «no», то нет. Учтите, что значения атрибута <b>frameborder </b> различаются для <a href="/kak-postavit-parol-na-raznye-brauzery-skryvaem-sekrety-brauzera-ot.html">разных браузеров</a>. Чтобы решить эту проблему используйте дважды атрибут <b>frameborder </b>, а для некоторых браузеров требуется еще добавить атрибут <b>framespacing </b> со значением «0»:</p><p> <frameset frameborder="0" framespacing="0" frameborder="no" border="0"> </p><p>В следующем примере убираем границу между фреймами:</p> <h3>Пример: Убираем границу между фреймами</h3> <ul><li>Попробуй сам »</li> </ul><table><tr><td style="width: 10px;background-color:green;color: white;"> frame_left </td> <td style="width: 90%;background-color:lime;color: white;"> frame_right </td> </tr></table><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Фреймы без границ</title> </head> <frameset cols="100,*" frameborder="0" framespacing="0" frameborder="no" border="0"> <frame src="frame_left.html" name=" frame_left" > <frame src="frame_right.html" name="frame_right" > </frameset> </html></p> <p>Если вы удалите границу между фреймами, посетители не смогут изменять размер фрейма в браузере. Вы можете также не допустить изменения размера фрейма, сохранив границы, используя атрибут <b>noresize </b>:</p><p> <frame src="frame_left.html" noresize> </p><p>С помощью атрибута <b>bordercolor </b> можно изменить цвет границы фрейма, необходимо только указать код или соответствующее зарезервированное имя цвета.<br> Ниже приведен пример html-страницы, которая содержит описанные выше атрибуты управления границей фрейма: цвет границы — красный, изменять размер верхнего фрейма нельзя:</p> <h3>Пример: Управление границей фреймов</h3> <ul><li>Попробуй сам »</li> </ul><table style="border-collapse:collapse;"><tr><td style="border-bottom: 4px solid red;background-color:blue;color: white;" colspan="2">frame_top</td> </tr><tr><td style="border-right: 4px solid red;width: 20%;background-color:green;color: white;">frame_left</td> <td style="width: 80%;background-color:lime;color: white;">frame_right</td> </tr></table><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Управление границей фреймов</title> </head> <frameset rows="150, *" border="10" bordercolor="red" frameborder="1" frameborder="yes"> <frame src="frame_top.html" noresize> <frameset cols="20%, 80%"> <frame src="frame_left.html"> <frame src="frame_right.html"> </frameset> </frameset> </html></p> <p>Если вы хотите расположить страницу, отображаемую внутри фрейма, ближе к его границам, или, наоборот, отодвинуть дальше, измените атрибуты <b>marginheight </b> и <b>marginwidth </b> тэга <b><frame> </b> . Атрибут <b>marginheight </b> определяет отступ между содержимым фрейма и его верхней и нижней границами. Синтаксис:</p><p> <frame marginheight="число"> </p><p>Атрибут <b>marginwidth </b> определяет отступ между содержимым фрейма и его правой и левой границами. Синтаксис:</p><p> <frame marginwidth="число"> </p><p>Данная <a href="/kak-sdelat-elementy-html-v-stroku-delaem-adaptivnyi-html-dobavlyaya-odnu-stroku-v.html">строка html</a>, например, располагает отображаемую страницу вплотную к границе фрейма:</p> <p>Если страница отображает нежелательную для вас полосу прокрутки, вы можете решить эту проблему, указав атрибут <b>scrolling </b>="no" в тэге <b><frame> </b> . Но учтите, что если фрейм будет недостаточно большим, чтобы отобразить все содержимое страницы, то у посетителя не будет никакой возможности прокрутить отображаемую страницу.</p> <h2>Ссылки внутри фреймов</h2> <p>Переход по ссылке в обычном HTML-документе осуществляется следующим образом: нажимаете ссылку и текущий документ заменяется новым в текущем либо в новом окне браузера. При использовании фреймов схема загрузки html-документов отличается от обычной и главное отличие — это возможность загружать html-документ в один фрейм из другого фрейма.<br> Для загрузки документа в определенный фрейм используется атрибут <b>target </b> тега <b><a> </b> . В качестве значения атрибута <b>target </b> используется имя фрейма, в который будет загружаться документ, указанный атрибутом <b>name </b> тега <b><frame> </b> . Стоит также отметить, что имя фрейма должно начинаться либо с цифры либо с латинской буквы. Следующие имена используются в качестве зарезервированных:</p> <p>Для внешних ссылок следует задавать в качестве значения для атрибута target либо _top , либо _blank , для того, чтобы сторонние проекты отображались не в ваших фреймах, а занимали полное окно браузера.</p> <p>В следующем примере изображен HTML-документ, в правый фрейм которого загружается страница по ссылке, помещенной в верхний фрейм. Ссылка на документ, который откроется в правом фрейме:</p><p> <a href="http://www.google.com" target="frame_right">Google</a> </p><p>Правому фрейму присваивается имя <i>frame_right </i>:</p><p> <frame src="frame_right.html" name="frame_right"> </p><p>Чтобы документ загружался в указанный фрейм, используется конструкция <i>target="frame_right" </i>, как показано в примере:</p> <h3>Пример: Ссылка на другой фрейм</h3> <ul><li>Попробуй сам »</li> </ul><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Ссылка на другой фрейм</title> </head> <frameset rows="100, *"> <frame src="frame_topic.html"> <frameset cols="20%, 80%"> <frame src="frame_left.html"> <frame src="frame_right.html" name="frame_right"> </frameset> <noframes> <p>Ваш браузер не отображает фреймы</p>

    Плавающие фреймы

    Элемент