|
|||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Фреймы
Время создания: 31.01.2019 21:25
Автор: alensav
Текстовые метки: Фреймы, HTML, httm
Раздел: MyTetra - INTERNET
Запись: alensav/MyTetra2/main/base/1548959135vikx5b1nkd/text.html на raw.githubusercontent.com
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||
|
HTML ID и CLASS HTML Макеты Фреймы Фреймы — это HTML-элементы, позволяющие разделить окно веб-браузера на несколько независимых окон, в каждое из которых можно загрузить отдельный HTML-документ. Каждое такое окно (фрейм) может иметь собственные полосы прокрутки и функционировать независимо от других независимых окон либо наоборот управлять их содержанием. Они могут применяться для организации постоянно находящегося в одном окне меню, в то время как в другом окне располагается непосредственно сама информация. Пользователи могут обращаться к меню в любой момент, и им не нужно возвращаться к предыдущей странице, чтобы выбрать другой пункт меню. Применение фреймов позволит вам «закрепить» в окне браузера изображения или другие неподвижные по замыслу элементы интерфейса, в то время как остальная часть страницы будет прокручиваться во фрейме. Создание фреймов Структура HTML-документа с фреймами внешне очень напоминает формат обычного HTML-документа. Как и в обычном HTML-документе, весь код помещен между парными тегами <html> и </html>, а в контейнере <head> располагаются заголовки. Основное отличие документа с фреймами от обычного HTML-документа — у документа с фреймами вместо тега <body> применяется парный тег <frameset> (от англ. frame set – набор фреймов). Пример: Структура HTML-документа с фреймами
В приведенном примере страница содержит три области, в каждую из которых первоначально загружаются HTML-документы frame_top.html, frame_left.html и frame_right.html. Помимо HTML-документов, фрейм может содержать и графику. Для этого необходимо указать адрес соответствующего изображения в атрибуте src, например src="image.gif". Обратите внимание, что элемент <frame> используется без закрывающего тега.
Области, полученные в результате такого разбиения страницы, и будут являться фреймами. Отсутствие этих атрибутов определяет один фрейм, который займет все окно браузера. В значении атрибутов rows и cols необходимо указывать не количество строк или столбцов, а значение ширины и высоты фреймов. Все значения в списке разделяются запятыми. Размеры могут быть указаны в абсолютных единицах (в пикселах) или в процентах:
Как видно из данного примера, контейнер <frameset> с атрибутом rows вначале создает два горизонтальных фрейма, а вместо второго фрейма подставляется еще один <frameset>, который разбивает нижний горизонтальный фрейм на две колонки с помощью атрибута cols, левая колонка занимает занимает 20%, а правая 80% окна браузера. Границы или пространство между фреймами По умолчанию, браузер отображает серую и, как правило, в виде трехмерной линии границу между фреймами, с помощью которой посетители могут регулировать размер фрейма. <frameset frameborder="0" framespacing="0" frameborder="no" border="0">
В следующем примере убираем границу между фреймами: Пример: Убираем границу между фреймами
Если вы удалите границу между фреймами, посетители не смогут изменять размер фрейма в браузере. Вы можете также не допустить изменения размера фрейма, сохранив границы, используя атрибут noresize: <frame src="frame_left.html" noresize>
С помощью атрибута bordercolor можно изменить цвет границы фрейма, необходимо только указать код или соответствующее зарезервированное имя цвета. Пример: Управление границей фреймов
Если вы хотите расположить страницу, отображаемую внутри фрейма, ближе к его границам, или, наоборот, отодвинуть дальше, измените атрибуты marginheight и marginwidth тэга <frame>. Атрибут marginheight определяет отступ между содержимым фрейма и его верхней и нижней границами. Синтаксис: <frame marginheight="число">
Атрибут marginwidth определяет отступ между содержимым фрейма и его правой и левой границами. Синтаксис: <frame marginwidth="число">
Данная строка html, например, располагает отображаемую страницу вплотную к границе фрейма: Если страница отображает нежелательную для вас полосу прокрутки, вы можете решить эту проблему, указав атрибут scrolling="no" в тэге <frame>. Но учтите, что если фрейм будет недостаточно большим, чтобы отобразить все содержимое страницы, то у посетителя не будет никакой возможности прокрутить отображаемую страницу. Ссылки внутри фреймов Переход по ссылке в обычном HTML-документе осуществляется следующим образом: нажимаете ссылку и текущий документ заменяется новым в текущем либо в новом окне браузера. При использовании фреймов схема загрузки html-документов отличается от обычной и главное отличие — это возможность загружать html-документ в один фрейм из другого фрейма.
Для внешних ссылок следует задавать в качестве значения для атрибута 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 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>
<title>Загрузка изображения во фрейм</title>
</head>
<body>
<iframe src="demo_iframe.html" name="iframe1" width="200" height="200">
</iframe>
<a href="#">Смайлик</a>
</body>
</html>
HTML ID и CLASS HTML Макеты |
|||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Так же в этом разделе:
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||
