Как изменить цвет границы фрейма - Исправление ошибок и поиск оптимальных решений проблем

Границы между фреймами

Граница между фреймами отображается по умолчанию и, как правило, в виде трехмерной линии. Чтобы ее скрыть используется атрибут frameborder тега <frameset> со значением 0. Однако в браузере Opera граница хоть и становится в этом случае бледной, все же остается. Для этого браузера требуется добавить framespacing=»0″. Таким образом, комбинируя разные атрибуты тега <frameset>, получим универсальный код, который работает во всех браузерах. Линия при этом показываться никак не будет (пример 13.6).

Пример 13.6. Убираем границу между фреймами

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Фреймы</title>
 </head>
  <frameset cols="100,*" frameborder="0" framespacing="0">
   <frame src="menu.html" name="MENU">
   <frame src="content.html" name="CONTENT">
  </frameset>
</html>

Учтите, что атрибуты frameborder и framespacing не являются валидными и не соответствуют спецификации HTML.

Если граница между фреймами все же нужна, в браузере она рисуется по умолчанию, без задания каких-либо атрибутов. Можно, также, задать цвет рамки с помощью атрибута bordercolor, который может применяться в тегах <frameset> и <frame>. Цвет указывается по его названию или шестнадцатеричному значению (пример 13.7), а толщина линии управляется атрибутом border. Браузер Opera игнорирует этот атрибут и обычно отображает линию черного цвета.

Пример 13.7. Изменение цвета границы

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Фреймы</title>
 </head>
 <frameset cols="100,*" bordercolor="#000080" border="5">
   <frame src="menu.html" name="MENU">
   <frame src="content.html" name="CONTENT">
 </frameset>
</html>

Атрибуты bordercolor и border тега <frameset> также не являются валидными и не признаются спецификацией HTML.

В данном примере линия между фреймами задается синего цвета толщиной пять пикселов. Линии различается по своему виду в разных браузерах, несмотря на одинаковые параметры (рис. 13.3).

Рис. 13.3. Вид границы между фреймами в разных браузерах

Браузер Opera никак не изменяет цвет границы между фреймами, Internet Explorer устанавливает широкую границу практически сплошного цвета, а Firefox границу отображает в виде набора линий.

Источник

Фреймы

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

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

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

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

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

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

Тег <frameset> имеет следующие атрибуты:

rows — описывает разбиение страницы на строки: <frameset rows=»100, *»>
cols — описывает разбиение страницы на столбцы: <frameset cols=»20%, 80%»>

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

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

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

Как видно из данного примера, контейнер <frameset> с атрибутом rows вначале создает два горизонтальных фрейма, а вместо второго фрейма подставляется еще один <frameset>, который разбивает нижний горизонтальный фрейм на две колонки с помощью атрибута cols, левая колонка занимает занимает 20%, а правая 80% окна браузера.
Если браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами <noframes> и </noframes>. Все, что находится между тегами <noframes> и </noframes>, игнорируется браузерами, поддерживающими фреймы. Таким образом разработчику нужно написать код, дублирующий содержимое фреймов другими средствами, и поместить этот код в контейнер <noframes>, тогда все пользователи смогут увидеть его веб-страницу.

Как уже отмечалось, для вставки в документ отдельного фрейма служит непарный тег <frame>. Атрибут src задает документ, который должен отображаться внутри данного фрейма, например: <frame src=»frame_top.html»>. Если атрибут src отсутствует, отображается пустой фрейм.

Границы или пространство между фреймами

По умолчанию, браузер отображает серую и, как правило, в виде трехмерной линии границу между фреймами, с помощью которой посетители могут регулировать размер фрейма.
Границей фрейма можно управлять, как и любыми другими элементами фрейма. Для этого существует несколько атрибутов элемента <frameset>, позволяющих настраивать границы фреймов. Толщина линии границы определяется атрибутом border. По умолчанию значение толщины границы равно пяти.

Чтобы скрыть границу фрейма, необходимо либо указать значение ширины границы равным нулю, либо присвоить значение «no» или «0» атрибуту frameborder. Атрибут frameborder может принимать только два противоположных значения. Если значение атрибута frameborder равно «yes» или «1», то граница фреймов будет отображаться, а если «0» или «no», то нет. Учтите, что значения атрибута frameborder различаются для разных браузеров. Чтобы решить эту проблему используйте дважды атрибут frameborder, а для некоторых браузеров требуется еще добавить атрибут framespacing со значением «0»:

<frameset frameborder="0" framespacing="0" frameborder="no" border="0">

В следующем примере убираем границу между фреймами:

Если вы удалите границу между фреймами, посетители не смогут изменять размер фрейма в браузере. Вы можете также не допустить изменения размера фрейма, сохранив границы, используя атрибут noresize:

<frame src="frame_left.html" noresize>

С помощью атрибута bordercolor можно изменить цвет границы фрейма, необходимо только указать код или соответствующее зарезервированное имя цвета.

Ниже приведен пример html-страницы, которая содержит описанные выше атрибуты управления границей фрейма: цвет границы — красный, изменять размер верхнего фрейма нельзя:

Пример: Управление границей фреймов

Если вы хотите расположить страницу, отображаемую внутри фрейма, ближе к его границам, или, наоборот, отодвинуть дальше, измените атрибуты marginheight и marginwidth тэга <frame>. Атрибут marginheight определяет отступ между содержимым фрейма и его верхней и нижней границами. Синтаксис:

<frame marginheight="число">

Атрибут marginwidth определяет отступ между содержимым фрейма и его правой и левой границами. Синтаксис:

<frame marginwidth="число">

Данная строка html, например, располагает отображаемую страницу вплотную к границе фрейма:

Если страница отображает нежелательную для вас полосу прокрутки, вы можете решить эту проблему, указав атрибут scrolling=»no» в тэге <frame>. Но учтите, что если фрейм будет недостаточно большим, чтобы отобразить все содержимое страницы, то у посетителя не будет никакой возможности прокрутить отображаемую страницу.

Ссылки внутри фреймов

Переход по ссылке в обычном HTML-документе осуществляется следующим образом: нажимаете ссылку и текущий документ заменяется новым в текущем либо в новом окне браузера. При использовании фреймов схема загрузки html-документов отличается от обычной и главное отличие — это возможность загружать html-документ в один фрейм из другого фрейма.

Для загрузки документа в определенный фрейм используется атрибут target тега <a>. В качестве значения атрибута target используется имя фрейма, в который будет загружаться документ, указанный атрибутом name тега <frame>. Стоит также отметить, что имя фрейма должно начинаться либо с цифры либо с латинской буквы. Следующие имена используются в качестве зарезервированных:

Имя	Описание
_self	документ загрузится в текущий фрейм, т.е. в котором находится сама гиперссылка
_blank	документ загрузится в новом окне веб-браузера
_parent	документ загрузится в окне, являющееся родительским по отношению к текущему фрейму
_top	документ загрузится поверх всех фреймов
targetframe	документ загрузится в фрейм с указанным именем

Для внешних ссылок следует задавать в качестве значения для атрибута target либо _top, либо _blank, для того, чтобы сторонние проекты отображались не в ваших фреймах, а занимали полное окно браузера.

В следующем примере изображен HTML-документ, в правый фрейм которого загружается страница по ссылке, помещенной в верхний фрейм. Ссылка на документ, который откроется в правом фрейме:

<a href="http://www.google.com" target="frame_right">Google</a>

Правому фрейму присваивается имя frame_right:

<frame src="frame_right.html" name="frame_right">

Чтобы документ загружался в указанный фрейм, используется конструкция target=»frame_right», как показано в примере:

Пример: Ссылка на другой фрейм

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

Элемент <iframe> (сокращение английского термина «плавающий фрейм») позволяет встроить в любое место веб-страницы отдельный HTML-документ или другой ресурс.
Содержимым плавающего (встроенного) фрейма может быть любая НТМL-страница, как с вашего ресурса, так и с другого веб-сайта. Как вы уже поняли, плавающие фреймы создаются с помощью элемента <iframe>, который в отличие от тега <frame> вставляется не между тегами <frameset> и </frameset>, а между тегами <body> и </body>.

В элементе <iframe> можно использовать те же атрибуты, что и для фрейма </frame>, за исключением атрибута noresize — в отличие от обычных фреймов, для встроенных фреймов возможность изменения размеров на экране не предусмотрена:

Атрибут	Описание
src	используется для указания URL-aдpeca страницы, отображаемой во фрейме
height	устанавливает высоту окна плавающего фрейма в пикселах или %
width	устанавливает ширину окна плавающего фрейма в пикселах или %
name	имя фрейма, по которому к нему можно будет обращаться в ссылках
frameborder	задает обрамление у фреймов, может принимать значения 1 (есть обрамление) или 0 (нет об-рамления) (В HTML5 не поддерживается)
marginwidth	отступ слева и справа от содержания до границы фрейма (В HTML5 не поддерживается)
marginheight	отступ сверху и снизу от содержания до границы фрейма (В HTML5 не поддерживается)
scrolling	определяет вид полос прокрутки у фрейма и принимает значения yes (есть полосы), no (нет полос) и auto (полосы появляются при необходимости) (В HTML5 не поддерживается)
allowfullscreen	разрешает для фрейма полноэкранный режим
hspace	Горизонтальный отступ от фрейма до окружающего контента
vspace	вертикальный отступ от фрейма до окружающего контента
align	определяет выравнивание фрейма

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

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

По умолчанию плавающий (строчный) фрейм имеет границы черного цвета. Чтобы удалить границу, вместо атрибута frameborder воспользуйтесь свойством border таблицы стилей CSS:

Пример HTML:

Попробуй сам

<iframe src="demo_iframe.html" width="200" height="200" style="border:none">
</iframe>

Используя свойства каскадных таблиц стилей CSS Вы можете также изменить размер, стиль и цвет границы встроенного фрейма:

Пример HTML:

Попробуй сам

<iframe src="demo_iframe.html" style="border:5px dashed green">
</iframe>

В следующем примере при переходе по ссылкам соответствующая страница загружается в окно встроенного фрейма. Для этого
требуется задать имя фрейма через атрибут name, а в теге <a> указать это же имя в атрибуте target:

Пример HTML:

Попробуй сам

<iframe src="demo_iframe.html" name="chapter" align="right" width="100%" height="300">
<p>Ваш Web-браузер не отображает фреймы</p>
</iframe>
<h2>Оглавление</h2>
<ul>
<li><a href="orange.jpg" target="chapter">Апельсин</a></li>
<li><a href="rabbit.gif" target="chapter">Веселый кролик</a></li>
<li><a href="frame_topic.html" target="chapter">О GOOLE</a></li>
</ul>

Задачи

Загрузка картинки в окно фрейма

Сделайте так, чтобы при клике по ссылке изображение «smiley.jpg» загружалось в окно фрейма.

Задача HTML:

Реши сам »

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Загрузка изображения во фрейм</title>
</head>
 <body>  
   <iframe src="demo_iframe.html" name="iframe1" width="200" height="200">
   </iframe>
   <a href="#">Смайлик</a>
 </body>
</html>

Встроенный фрейм

Добавьте встроенный фрейм, URL-адресс которого «http://www.wm-school.ru» в HTML-документ. Размеры фрейма установите 250х250px.
Задача HTML:

Реши сам »
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Встроенный фрейм</title>
</head>
 <body>  
   
 </body>
</html>
```

Граница встроенного фрейма

Воспользуйтесь свойством CSS для удаления границы плавающего фрейма.
Задача HTML:

Реши сам »
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Граница встроенного фрейма</title>
</head>
 <body>  
   <iframe src="demo_iframe.html" width="200" height="200"></iframe>
 </body>
</html>
```

Цвет границы плавающего фрейма

Воспользуйтесь свойством CSS для изменения цвета границы плавающего фрейма на зеленый (green).
Задача HTML:

Реши сам »
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Цвет границы фрейма</title>
</head>
 <body>  
   <iframe src="demo_iframe.html" width="220" height="180" style="border:5px solid black"></iframe>
 </body>
</html>
```

Источник

ВикиЧтение

HTML, XHTML и CSS на 100%
Квинт Игорь

5.2. Границы фрейма

Обращаю ваше внимание на то, что в описанном выше примере каждый фрейм имеет границу (см. рис. 5.1). Границей фрейма можно управлять, как и любыми другими элементами фрейма. Для этого существует несколько атрибутов элемента FRAMESET, позволяющих настраивать границы фреймов. Ширина границы определяется атрибутом border. По умолчанию значение ширины границы равно пяти. Чтобы граница фрейма отсутствовала, необходимо либо указать значение ширины границы равным нулю, либо присвоить значение no или 0 атрибуту frameborder. Данный атрибут может принимать только два противоположных значения. Если значение атрибута frameborder равно yes или 1, то граница фреймов будет отображаться, если 0 или no, то нет. Возможны конфликтные ситуации, так как значения атрибута frameborder различаются для разных браузеров. Однако эту проблему можно решить. Просто используйте дважды атрибут frameborder (<FRAMESET frameborder=»no» frameborder=»0″>), чтобы браузер выбрал себе значение по вкусу.

С помощью атрибута bordercolor определяется цвет границы фрейма, необходимо только указать код или соответствующее зарезервированное имя цвета.

В листинге 5.2 приведен пример HTML-страницы, которая содержит описанные выше атрибуты управления границей фрейма.

Листинг 5.2. Пример управления границей фреймов

<html>

<head>

<title>Эта страница содержит 4 фрейма</title>

</head>

</frameset>

</html>

На рис. 5.2 показано, как будет отображаться страница, описанная в листинге 5.2, в окне браузера Internet Explorer. Страница разделена на четыре области линиями черного цвета, за что отвечает атрибут bordercolor=»#000000″.

Рис. 5.2. Пример управления границами фреймов

Стоит отметить, что изменять границу одного из фреймов нельзя. Если же указать атрибуты, управляющие границей фреймов, в элементе FRAME (например, <FRAME src=frame1.HTML border=»10″ bordercolor=»#000000″ frameborder=»1″ frameborder=»yes»>), то браузер не проигнорирует это сообщение, а границы каждого фрейма непредсказуемо изменятся (рис. 5.3).

Рис. 5.3. Попытка изменить границы отдельного фрейма

Данный текст является ознакомительным фрагментом.

Границы между фреймами

этом случае бледной, все же остается. Для этого браузера требуется добавить framespacing=»0″. Таким образом, комбинируя разные атрибуты тега <frameset>, получим универсальный код, который работает во всех браузерах. Линия

при этом показываться никак не будет (пример 13.6).

Пример 13.6. Убираем границу между фреймами
HTML 4.01	IE 7	IE 8	IE 9	Cr 8	Op 11	Sa 5	Fx 3.6

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»>

<html>

<head>

</head>

</frameset>

</html>

Учтите, что атрибуты frameborder и framespacing не являются валидными и не соответствуют спецификации HTML.

<frame>. Цвет указывается по его названию или шестнадцатеричному значению (пример 13.7), а толщина линии управляется атрибутом border. Браузер Opera игнорирует этот атрибут и обычно отображает линию черного цвета.

Пример 13.7. Изменение цвета границы
HTML 4.01	IE 7	IE 8	IE 9	Cr 8	Op 11	Sa 5	Fx 3.6

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»>

<html>

<head>

</head>

</frameset>

</html>

Атрибуты bordercolor и border тега <frameset> также не являются валидными и не признаются спецификацией HTML.

Internet Explorer Opera Firefox

Рис. 13.3. Вид границы между фреймами в разных браузерах

Полосы прокрутки

Если содержимое фрейма не помещается в отведенное окно, автоматически появляются полосы прокрутки для просмотра информации. В некоторых случаях полосы прокрутки нарушают дизайн веб-страницы, поэтому от них можно отказаться. Для управления отображением полос прокрутки используется атрибут scrolling тега <frame>. Он может принимать два основных значения: yes — всегда вызывает появление полос прокрутки, независимо от объема информации и no — запрещает их появление (пример 13.9).

Пример 13.9. Запрет на изменение размера фреймов
HTML 4.01	IE 7	IE 8	IE 9	Cr 8	Op 11	Sa 5	Fx 3.6

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»>

<html>

<head>

</head>

</frameset>

</html>

При выключенных полосах прокрутки, если информация не помещается в окно фрейма, просмотреть ее будет сложно. Поэтому scrolling=»no» следует использовать осторожно.

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

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

Разговор о фреймах будет неполным без упоминания плавающих фреймов. Так называется фрейм, который можно добавлять в любое место веб-страницы. Еще одно его название — встроенный фрейм, он называется так из-за своей особенности встраиваться прямо в тело веб-страницы. На рис. 13.4 приведен пример такого фрейма.

Рис. 13.4. Плавающий фрейм на веб-странице

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

Создание плавающего фрейма происходит с помощью тега <iframe>, он имеет обязательный атрибут src, указывающий на загружаемый во фрейм документ (пример 13.10).

Пример 13.10. Использование тега <iframe>
HTML 4.01	IE 7	IE 8	IE 9	Cr 8	Op 11	Sa 5	Fx 3.6

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

</head>

<body>

</body>

</html>

В данном примере ширина и высота фрейма устанавливается через атрибуты width и height. Сам загружаемый во фрейм файл называется hsb.html. Заметьте, что если содержимое не помещается целиком в отведенную область, появляются полосы прокрутки.

Еще одно удобство плавающих фреймов состоит в том, что в него можно загружать документы по ссылке. Для этого требуется задать имя фрейма через атрибут name, а в теге <a> указать это же имя в атрибуте target (пример 13.11).

Пример 13.11. Загрузка документа во фрейм
HTML 4.01	IE 7	IE 8	IE 9	Cr 8	Op 11	Sa 5	Fx 3.6

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

</head>

<body>

</body>

</html>

В данном примере добавлено несколько ссылок, они открываются во фрейме с именем color.

Тег <iframe> проходит валидацию только при использовании переходного <!DOCTYPE>.

Источник

Браузер	Internet Explorer	Netscape	Opera	Safari	Mozilla	Firefox
Версия	5.5	6.0	7.0	6.0	7.0	8.0	7.0	8.0	9.0	1.0	1.7	1.0	2.0
Поддерживается	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

HTML:

3.2

XHTML:

1.0

1.1

Описание

Тег <FRAME> определяет свойства отдельного
фрейма, на которые делится окно браузера. Этот элемент должен располагаться
в контейнере <FRAMESET>, который к тому же задает
способ разметки страницы на отдельные области. В каждую из таких областей загружается
самостоятельная веб-страница определяемая с помощью параметра src.
Хотя обязательных атрибутов у тега <FRAME> и
нет, рекомендуется задавать каждому фрейму имя через атрибут name.
Это особенно важно, если требуется по ссылке из одного фрейма загружать документ
в другой.

Синтаксис

Параметры

bordercolor: Цвет линии границы.
frameborder: Отображать рамку вокруг фрейма или нет.
name: Задает уникальное имя фрейма.
noresize: Определяет, можно изменять размер фрейма пользователю или нет.
scrolling: Способ отображения полосы прокрутки во фрейме.
src: Путь к файлу, предназначенному для загрузки во фрейме.

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

Не требуется.

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

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
<title>Тег FRAME</title>
</head>
<frameset rows=»80,*» cols=»*»>
<frame src=»top.php» name=»topFrame» scrolling=»no» noresize>
<frameset cols=»80,*»>
<frame src=»left.php» name=»leftFrame» scrolling=»no» noresize>
<frame src=»main.php» name=»mainFrame»>
</frameset>
</frameset>
</html>

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

Параметр BORDERCOLOR

HTML:

3.2

XHTML:

1.0

1.1

Описание

Если у тега <FRAMESET> установлено отображение
границ, то для индивидуальных фреймов их цвет можно изменить через параметр
bordercolor тега <FRAME>.
Браузеры, как правило, по-разному отображают цветную границу, например, Opera
вообще игнорирует данный параметр. Если для тегов <FRAMESET>
и <FRAME> рамка устанавливается разного цвета,
то обычно приоритет имеет последний.

Синтаксис

Аргументы

Значение цвета можно задавать двумя способами.

1. По его названию

Браузеры поддерживают некоторые цвета по их названию.

2. По шестнадцатеричному значению

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная
система, в отличие от десятичной системы, базируется, как следует из ее названия,
на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D,
E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной
системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной
системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало
путаницы в определении системы счисления, перед шестнадцатеричным числом ставят
символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый
и синий — может принимать значения от 00 до FF. Таким образом, обозначение
цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают
красную компоненту цвета, два средних — зеленую, а два последних —
синюю.

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

Нет.

Аналог CSS

border

Пример 2. Изменение цвета границы

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
<title>Тег FRAME, параметр bordercolor</title>
</head>
<frameset rows=»*» cols=»80,*» bordercolor=»black»
border=»5″>
<frame src=»left.php» name=»leftFrame»>
<frameset rows=»80,*» bordercolor=»black» border=»5″>
<frame src=»top.php» name=»topFrame» bordercolor=»red»>
<frame src=»main.php» name=»mainFrame»>
</frameset>
</frameset>
</html>

Параметр FRAMEBORDER

HTML:

3.2

XHTML:

1.0

1.1

Описание

Определяет, отображать границу между фреймами или нет. Браузер Opera в любом
случае показывает тонкую линию, если у тега <FRAMESET>
не задан параметр framespacing=»0″. Этот
параметр отменяет действие атрибута frameborder
у тега <FRAMESET>.

Синтаксис

Аргументы

Допускается использовать значения 1
для отображения границы или 0,
чтобы ее скрыть.

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

Нет.

Пример 3. Отмена границы между фреймами

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
<title>Тег FRAME, параметр frameborder</title>
</head>
<frameset cols=»100,*,20%»>
<frame src=»left.php» name=»leftFrame»>
<frame src=»main.php» name=»mainFrame» frameborder=»0″>
<frame src=»right.php» name=»rightFrame»>
</frameset>
</html>

Параметр NAME

HTML:

3.2

XHTML:

1.0

1.1

Описание

В обычном HTML-документе при переходе по ссылке, в окне браузера текущий документ
заменяется новым. При использовании фреймов схема загрузки документов отличается
от стандартной. Основное отличие — возможность загружать документ в выбранный
фрейм из другого. Для этой цели используется параметр target
тега <А>. В качестве значения указывается имя
фрейма, в который будет загружаться документ, заданный параметром name.

Синтаксис

Аргументы

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

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

Нет.

Пример 4. Указание имени фрейма

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
<title>Тег FRAME, параметр name</title>
</head>
<frameset cols=»100,*,20%»>
<frame src=»left.php» name=»leftFrame»>
<frame src=»main.php» name=»mainFrame»>
<frame src=»right.php» name=»rightFrame»>
</frameset>
</html>

Параметр NORESIZE

HTML:

3.2

XHTML:

1.0

1.1

Описание

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

Рис. 1. Вид курсора мыши при изменении размера фрейма

Синтаксис

Аргументы

У этого параметра нет значений, если он присутствует, то пользователь не может
изменять размер фреймов.

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

По умолчанию размер фреймов можно изменять.

Пример 5. Запрет на изменение границы фрейма

Параметр SCROLLING

HTML:

3.2

XHTML:

1.0

1.1

Описание

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

Синтаксис

Аргументы

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

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

auto

Пример 6. Сокрытие полос прокрутки во фрейме

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
<title>Тег FRAME, параметр scrolling</title>
</head>
<frameset cols=»100,*»>
<frame src=»left.php» name=»leftFrame» noresize scrolling=»no»>
<frame src=»main.php» name=»mainFrame»>
</frameset>
</html>

Параметр SRC

HTML:

3.2

XHTML:

1.0

1.1

Описание

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

Синтаксис

Аргументы

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

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

Нет.

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

Источник

Рамки во фреймах

Граница между фреймами отображается по умолчанию и, как правило, в виде трехмерной
линии. Чтобы ее скрыть используется параметр frameborder тега <FRAMESET>
со значением no или 0.
Однако в браузере Опера граница хоть и становится в этом случае бледной, все
же остается. Для этого браузера требуется добавляем параметр framespacing=»0″.
Таким образом, комбинируя разные параметры тега <FRAMESET>,
получим универсальный код, который работает во всех браузерах. Линия при этом
показываться никак не будет (пример 1).

Пример 1. Отсутствующие рамки между фреймами

<!DOCTYPE ШТМЛ PUBLIC «-//W3C//DTD ШТМЛ 4.01 Frameset//EN» «http://www.w3.org/TR/ШТМЛ4/frameset.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Фреймы</title>
</head>
<frameset cols=»200,*» frameborder=»no»
framespacing=»0″>
<frame src=»menu.ШТМЛ» name=»MENU» noresize>
<frame src=»content.ШТМЛ» name=»CONTENT»>
</frameset>
</html>

Если граница между фреймами все же нужна, в браузере она рисуется по умолчанию,
без задания каких-либо параметров. Можно, также, задать цвет рамки с помощью
параметра bordercolor, который может применяться
в тегах <FRAMESET> и <FRAME>.
Цвет указывается по его названию или шестнадцатеричному значению (пример 2).
Браузер Опера игнорирует этот параметр и обычно отображает линию черного цвета.

Пример 2. Изменение цвета рамки

<!DOCTYPE ШТМЛ PUBLIC «-//W3C//DTD ШТМЛ 4.01 Frameset//EN» «http://www.w3.org/TR/ШТМЛ4/frameset.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Фреймы</title>
</head>
<frameset cols=»200,*» bordercolor=»navy»
border=»5″>
<frame src=»menu.ШТМЛ» name=»MENU» noresize>
<frame src=»content.ШТМЛ» name=»CONTENT»>
</frameset>
</html>

В примере рамка будет синего цвета. Вид линий различается виду в разных браузерах,
несмотря на одинаковые параметры (рис. 1).

Рис. 1. Вид границы между фреймами в разных браузерах

Браузер Опера (рис. 1б) никак не изменяет цвет границы между фреймами, Internet Эксплорер (рис. 1а)
устанавливает широкую границу практически сплошного цвета, а Файер фох (рис. 1в)
границу отображает в виде набора линий.

Статья опубликована: 12.09.2009

Последнее обновление: 16.04.2009

Источник

Как использовать Frame в Figma? Если вы начинающий пользователь программы, то этот урок откроет вам все секреты этого инструмента.

Видеоурок по работе с фреймами в фигме

Что такое Frame в Figma и с чем его едят?

Frame— это рабочая область, где будут размещаться элементы интерфейса, дизайна сайта или мобильного приложения.

Пример фрейма с элементами интерфейса

Как сделать фрейм в фигме?

Чтобы создать Frame в программе Figma выберите иконку слева и сверху в панели инструментов. Наведите на пустую область и нажмите левую кнопку мыши. Горячие клавиши для создания фреймов — «F» и «A».

Почему 2 горячих клавиши, а не одна? Это связано с тем, что существует программа Sketch. Там есть аналог фреймов, которые называются «Артборды». Чтобы в скетче создать артборд нужно нажать на клавишу «А». Поскольку скетч — это главный конкурент фигмы, чтобы облегчить работу тем, кто переходит на фигму со скетча, разработчики решили сделать привычное для этих людей сокращение.

Если не тянуть мышкой и просто нажать на левую клавишу мыши, то будет создан фрейм размерами 100 на 100px.

Если вы будете тянуть, то можно создать произвольный размер.

Выбираем другое разрешение фрейма из списка

Если выбрать фрейм, то можно изменить его выбрав в выпадающем списке справа другое разрешение либо изменить его на группу.

Чтобы изменить шаблон можно нажать на эту область и выбрать другое разрешение либо сделать из фрейма группу. Изменение «Frame» на «Group» или выбор других размеров из шаблонов. Группа позволяет объединять несколько элементов, но в отличие от фрейма в группе меньше возможностей и нет некоторых функций.

Меняем размер по умному. Как уменьшить или увеличить Frame в Figma?

Чтобы уменьшить, обрезать фрейм или увеличить фрейм, просто наведите курсор на край и потяните в сторону. Также вы можете использовать горячие клавиши, чтобы активировать дополнительные функции.

Если при изменении размера, вы будете использовать клавиши ниже, то будет вам счастье:
Ctrl — элементы внутри не привязаны к краям.
Alt — одновременное увеличение фрейма слева и справа, сверху и снизу.
Shift — пропорциональное изменение размеров.
Также можно использовать комбинации этих горячих клавиш.

Следующее как можно изменять размер фрейма — это менять ориентацию на горизонтальную и вертикальную. Например если ширина фрейма 500 пикселей, а высота 100, то можно поменять размеры местами, просто нажимая на эти иконки.

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

Чтобы изменить расположение фрейма по оси Х и Y можно использовать правую панель и значения которые там есть.

Значения W и H позволяют видеть и изменять размеры фрейма. Справа есть иконка цепи. Если её активировать, то размеры будут изменяться пропорционально. Например если включить эту иконку и создать фрейм 100 на 100px. То при изменении значения ширины на 140 высота тоже будет 140px. Если отключить эту иконку, то можно отдельно изменять размеры ширины или высоты.

Изменение угла наклона и скругление углов

Чтобы скруглить углы у фрейма (сделать его круглым), смотрите в правую панель. Сверху есть иконка скругления углов и иконка изменения размеров наклона угла. Также если нажать на самую правую иконку, то будет возможность скруглять любые углы отдельно.

Функция Clip content — что это?

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

Как превратить фрейм в Auto Layout?

Если выбрать фрейм, то в правой панели будет надпись Auto Layout.

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

При нажатии иконки стрелки справа, контент автоматически перестроиться. Элементы будут располагаться горизонтально.

Если выделить какой то элемент внутри Auto Layout и нажать на комбинацию клавиш «Ctrl» «D», то контент дублируется и все автоматически будет перестраиваться.

Подробнее о возможностях Auto Layout поговорим в отдельном уроке.

Сетки во фреймах

Чтобы создать сетку нажмите напротив надписи «Grids» на плюс.

После этого можно выбрать отображение сетки (Grid, column, row).

Column (колонки)

Row

Изменение цвета фрейма и создание обводки

Чтобы изменить цвет фрейма выделите его и измените цвет, как показано на рисунке выше.

Для создания обводки нажмите плюс напротив надписи Stroke

Как сохранить фрейм из Figma в PNG, JPG, SVG, PDF

Чтобы экспортировать фреймы из фигмы и сохранить их к себе на компьютер, выберите фрейм нажмите на плюс напротив надписи «Export» в правой панели, выберите нужный вам формат для экспорта (PNG, JPG, SVG, PDF) и нажмите на кнопку «Export». Перед этим можно сделать предварительный просмотр нажав на вкладку «Prewie».

Чтобы изменить размер при экспорте, нужно выбрать из списка 1х другое значение. Если выбрано 1х, то экспорт будет один к одному. Если выбрать 2х, то масштаб при экспорте будет в 2 раза больше. Например если поставить 2х и размер фрейма 300px на 300px, то сохраненное изображение будет размером 600px на 600px.

Привязки элементов во фрейме.

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

Закрепление элементов внутри фрейма при скроллинге

Елси выбрать какой-то элемент. Например меню (как на скриншоте выше), а затем поставить галочку напротив надписи «Fix position when scrolling», то этот элемент при прокрутке в режиме презентации будет закреплен.

Горячие клавиши при работе с фреймами в фигме

Как удалить фрейм в фигме

Если вам потребовалось удалить фрейм в фигме, просто нажмите клавишу «Backspace» на клавиатуре. Это позволит его убрать из вашего проекта.

2 способа как скопировать фрейм в фигме

Чтобы скопировать фрейм в Figma, выберите его и нажмите на клавиши «Ctrl» «С» одновременно. Затем нажмите клавиши «Ctrl» «V», чтобы его вставить.
Выделите фрейм, нажмите на клавиши «Ctrl» «D». Это позволит дублировать слой.

Как объединить Frame в Figma

Есть несколько способов объединить фреймы или элементы во фрейм. Выделите нужные вам фреймы и нажмите на клавиши «Ctrl» «G», либо на правую клавишу мыши и выберите пункт «Group selection». Это позволит объединить их с помощью инструмента «Группа».

Вы можете создать новый фрейм поверх этих 2 фреймов для их объединения. Для этого можно просто нарисовать его поверх тех элементов, которые хотите объединить.

Также можно использовать горячие клавиши. Нажмите оновременно «Ctrl Alt G», либо нажмите на правую клавиши мыши и выберите из списка надпись «Frame selection»

Автор видео и статьи: Владимир Чернышов

Все уроки Figma для начинающих с нуля

P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).

Источник

Границы между фреймами

Фреймы

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

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

Границы или пространство между фреймами

Пример: Управление границей фреймов

Ссылки внутри фреймов

Пример: Ссылка на другой фрейм

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

Пример HTML:

Пример HTML:

Пример HTML:

Задачи

Загрузка картинки в окно фрейма

Задача HTML:

Встроенный фрейм

Задача HTML:

Граница встроенного фрейма

Задача HTML:

Цвет границы плавающего фрейма

Задача HTML:

Читайте также

5.7. Управление пространством внутри фрейма

Границы

9.7. Границы

Ширина границы

Цвет границы

Стиль границы

Границы элементов

Заливка и границы текста

3.1.4. Внутренние границы

3.1.4. Внутренние границы

Границы и заливка

Границы

Таблицы и границы

Границы и заливка

Границы между фреймами

Полосы прокрутки

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

Описание

Синтаксис

Параметры

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

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

Параметр BORDERCOLOR

Описание

Синтаксис

Аргументы

1. По его названию

2. По шестнадцатеричному значению

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

Аналог CSS

Параметр FRAMEBORDER

Описание

Синтаксис

Аргументы

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

Параметр NAME

Описание

Синтаксис

Аргументы

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

Параметр NORESIZE

Описание

Синтаксис

Аргументы

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

Параметр SCROLLING

Описание

Синтаксис

Аргументы

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

Параметр SRC

Описание

Синтаксис

Аргументы

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

Рамки во фреймах

Что такое Frame в Figma и с чем его едят?

Как сделать фрейм в фигме?