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


Создание Web-сайта с плавающими и связанными фреймами

4.1 Цель работы: Приобретение знаний и навыков разработки с использованием языка HTML Web-сайтов с плавающими и перекрестно-связанными фреймами.

4.2 Задание: Разработать Web-сайт с одним управляющим и одним демонстрационным фреймом с вложенным в него плавающем фреймом.

4.3 Математические расчеты:

Расположение управляющего фрейма:

Цвет управляющего фрейма:

1+1 mod3=2 – зеленый

Цвет демонстрационного фрейма:

1+2 mod3=3 – синий

Размеры плавающего фрейма:

30+10*(1 mod4)=40% — горизонтальный

20+10*(3 mod4)=50% — вертикальный

Горизонтально: 1+1 mod2=2 – правый край

Вертикально: 1+1 mod3=2 – середина

4.4 Програмный код:

Разpаботать Web-сайт с одним упpавляющим и одним демонстpа-

ционным фpеймом с вложенным в него плавающим фpеймом.

Упpавляющий фpейм должен занимать до 15% площади экpана и в

зависимости от номеpа N автоpа в учебном жуpнале пpимыкать к

гpанице экpана, опpеделяемой выpажением [ 1 + ( N ) mod 4 ],

где pезультат имеет следующий смысл: 1-нижняя, 2-пpавая, 3-

веpхняя и 4-левая гpаницы экpана.

Цвет фона упpавляющего фpейма задается выpажением

[ 1 + ( N ) mod 3 ], где pезультат тpактуется как: 1-кpасный,

2-зеленый, 3-синий цвет.

В упpавляющий фpейм должен быть выведен HTML-документ с фа-

милией, инициалами и номеpом гpуппы автоpа, а также двумя кноп-

ками-гипеpссылками для вывода двух pазных pисунков в плавающий

Демонстpационный фpейм должен занимать оставшуюся часть эк-

pана, в нем должен быть сфоpмиpован плавающий фpейм, а в осталь-

ную часть этого фpейма должен быть выведен HTML-документ с текс-

том настоящего задания и цветом фона [ 1 + ( N + 1 ) mod 3 ] с

указанной выше интеpпpетацией значения.

Паpаметp выpавнивания плавающего фpейма по гоpизонтали задает-

ся выpажением [ 1 + ( N ) mod 2 ] , где pезультат означает:

1-по левому кpаю, 2-по пpавому кpаю.

Веpтикальное выpавнивание плавающего фpейма опpеделяется выpа-

жением [ 1 + ( N ) mod 3 ] , где pезультат означает: 1-к веpх-

ней гpанице, 2-к сеpедине, 3-к нижней гpанице демонстpационного

Гpафические файлы для вывода в плавающий фpейм автоp подбиpа-

ет из имеющихся в компьютеpе, по своему усмотpению.

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

На этом шаге мы рассмотрим создание плавающих фреймов .

Для вставки одного HTML -документа в тело другого средствами браузера пользователя, а не сервера, служит тег-контейнер :

Элемент, задаваемый этим тегом, можно позиционировать с помощью параметров таблицы стилей (тэг или атрибут STYLE ). Если его положение не указано явно, то он позиционируется в соответствии с положением в HTML -коде. Внешне этот элемент выглядит как прямоугольная область (с полосами прокрутки или без них), в которой отображается документ из некоторого HTML -файла. Такие окна иногда называют плавающими фреймами .

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

Файл 47_1.html (основной).

Результат просмотра этих документов в браузере изображен на рисунках 1 и 2.

Рис.1. Результат просмотра документа в браузере (до нажатия кнопки)

Рис.1. Результат просмотра документа в браузере (после нажатия кнопки)

В качестве примеров документов, отображаемых в плавающих фреймах, взяты HTML -документы, соответственно, из шагов 31 и 37. Они иллюстрируют то положение, что документы, отображаемые в плавающих фреймах, ничем не отличаются от обычных документов, отображаемых в браузере.

Наибольший интерес в этом примере вызывает функция zagr() (файл Frame1.html ), которая вызывается в ответ на нажатие клавиши. Прокомментируем строку

которая помещает в переменную nm имя загружаемого файла.

Опишем назначение каждого элемента указанной конструкции. Элемент top показывает, что отсчет начинается с верхнего окна window . Конструкция document говорит о том, что нас интересует объект документ . В этом документе два плавающих фрейма. Конструкция frames[1] позволяет нам получить доступ ко второму плавающему фрейму. В нем располагаются еще два фрейма. Вторая конструкция frames[1] говорит о том, что нас интересует второй фрейм. Остальные конструкции не вызывают затруднений: они позволяют получить доступ к имени HTML -документа.

Плавающий фрейм ведет себя почти так же, как и обычный фрейм. Если он создан, то его можно найти в коллекции frames . Среди его свойств рассмотрим свойство align — выравнивание плавающего фрейма относительно окружающего содержимого документа. Возможные значения:

  • absbottom — выравнивает нижнюю границу фрейма по нижней границе символов окружающего текста;
  • absmiddle — выравнивает середину фрейма но центральной линии между top и absbottom окружающего текста;
  • baseline — выравнивает нижнюю границу фрейма по базовой линии окружающего текста;
  • bottom — совпадает с baseline (только в Internet Explorer );
  • left — выравнивает фрейм по левому краю элемента-контейнера;
  • middle — выравнивает воображаемую центральную линию окружающего текста по воображаемой центральной линии фрейма;
  • right — выравнивает фрейм по правому краю элемента-контейнера;
  • texttop — выравнивает верхнюю границу фрейма по надстрочной линии символов окружающего текста;
  • top — выравнивает верхнюю границу фрейма по верхней границе окружающего текста.

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

На следующем шаге мы рассмотрим всплывающие окна .


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

Фреймы, которые размещаются в обычном HTML-документе в пределах тега с использованием тега , называются плавающими, его также называют строчным от сокращения английского термина «inline frame». Задание плавающего фрейма аналогично описанию тега . Кратко перечислим только допустимые атрибуты тега:

SRC – задает URL-адрес загружаемого файла;

WIDTH, HEIGHT – определяют ширину и высоту плавающего фрейма;

ALIGN – устанавливает выравнивание фрейма относительно окна браузера;

MARGINWIDTH, MARGINHEIGHT, FRAMEBORDER SCROLLING – назначают размеры свободных полей, вывод рамки фрейма и полос прокрутки;

NAME – задает имя фрейма, используемого при определении целевого фрейма.

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

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

Рис. 4.9. HTML-документ с плавающим фреймом

Содержимое основной части документа

Содержимое основной части документа

Содержимое основной части документа

Содержимое основной части документа

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

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

РАЗМЕТКА WEB-СТРАНИЦЫ С ПОМОЩЬЮ ФРЕЙМОВ

1. Разметка web-страницы с использованием фреймов простой организации.Наберите в простом редакторе «Блокнот» структуру гипертекстовой программы.

Фреймы простой структуры

После закрытия заголовка вставьте тег для создания шести фреймов на странице (две строки и три столбца) – значения атрибутов ROWS и COLSзадайте в процентах. В этом же теге используйте атрибуты задания ширины рамок BORDER и цвет рамок BORDERCOLOR. Сохраните изменения в файле и просмотрите исходный файл в браузере. Есть ли разделительные границы между фреймами? И если нет, то почему?

Затем внутрь тега вставьте 6 тегов , соответственно количеству фреймов. Сохраните файл и просмотрите в браузере. Отметьте, что изменилось сейчас. Задайте значения для атрибута SRС (для каждого фрейма задайте название файла, содержащего страницы page1.htm, page2.htm и т. д., созданные в предыдущих практических заданиях). Сохраните изменения и просмотрите в браузере.

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

Поэкспериментируйте: задайте различные цвета рамок для каждого фрейма.

2. Разметка web-страницы с использованием фреймов сложной организации.Используйте предыдущую страницу в качестве исходного текста программы. Для этого сначала сохраните его в другом файле, а затем внесите изменения согласно рис. 4.10.

Рис. 4.10. Структура фреймов для второго задания

3. Создание навигации по сайту.Создайте самостоятельно web-страницу, оформленную с использованием фреймов (рис. 4.11).

Заголовок страницы
Гиперссылки Содержание
Дополнительная информация или адрес

Рис. 4.11. Фреймовая структура для навигации по сайту

Содержание файла с гиперссылками выводится во фрейме «Гиперссылки». При активизации гиперссылки содержимое вызываемого файла должно открываться во фрейме «Содержание». Для привязки файлов к гиперссылкам используйте готовые страницы из предыдущих практических заданий.

Контрольные вопросы и задания

1. Что такое фрейм?

2. Для чего предназначен фрейм?

3. Какие этапы используются при создании простой организации фреймов?

4. В чем отличие простого HTML-документа от документа с фреймовой организацией?

5. Какие теги используют для оформления фреймов?

6. Какие атрибуты тега определяют количество вертикальных и горизонтальных отрезков во фреймовом наборе?

7. Какие атрибуты предназначены для изменения параметров рамок фреймов?

8. Какая существует последовательность для задания параметров фреймов на странице?

9. Какие единицы используются для задания размеров фрейма?

10. Для чего предназначен тег ?

11. Для чего используется атрибут NORESIZE тега ?

12. Перечислите остальные атрибуты тега и их назначения.

13. Как происходит оформление web-страницы фреймами простой организации?

14. Как происходит оформление web-страницы с использованием сложной организации фреймов?

15. Для чего используются атрибуты NAME и TARGET тега ?

16. Перечислите зарезервированные имена фреймов.

17. Что такое целевой и базовый фрейм?

18. Назовите способ задания базового фрейма.

6 Фреймы

Большинство документов HTML не помещается на одной странице, поэтому для их просмотра пользователю приходится сдвигать документ в окне навигатора. Кроме того, для навигации необходимо искать ссылки на другие документы, которые могут быть расположены в любом, самом неожиданном месте страницы.

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

Рис. 6.1. Страница нашего сервера WWW, реализованная с использованием фреймов

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

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

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

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

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


Прежде всего необходимо подготовить документ HTML, в котором содержится описание размеров, расположения и других параметров фреймов. Этот документ должен иметь следующий вид:

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

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

Помимо операторов , внутри пары операторов и необходимо разместить операторы и . Между этими операторами вы должны расположить документ HTML, который будет отображаться навигаторами, не способными работать с фреймами. К числу таких относятся, например, навигаторы NSCA Mosaic и Microsoft Internet Explorer версии 2.0, а также Netscape Navigator версий, более ранних чем 2.0.

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

Заметим, что можно создавать вложенные фреймы, определяя наборы фреймов внутри пары операторов и :

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

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

Определение параметров фреймов

Прежде всего рассмотрим параметры оператора , предназначенного для определения набора фреймов.

Фреймы (теги frame, frameset, noframe, iframe)

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

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

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

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

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

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

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

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

Пояснение к примеру №1

Как видно из кода выше, страница созданная из фреймов очень похожа на обыкновенную html-страницу: есть открывающий тег html, раздел , заголовок , но есть одно большое различие. Наверное, Вы обратили внимание, что тег body, который отвечает за тело страницы — отсутствует. Вместо него вставлен тег , который отвечает за тело страницы. У этого тега есть два атрибут cols=»25%,75%» , что означает разбить все тело страницы на две области по вертикали в пропорции 1:3. Первая область займет 25% от ширины всего экрана (в ней будет первый фрейм menu.html ), вторая область займет 75% от ширины всего экрана (в ней будет второй фрейм content.html ).

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

Кстати, обратите внимание, что для тега не нужен закрывающий тег.

Надеюсь, что теперь у Вас есть представления о фреймах. Чтобы понять более трудные примеры, давайте попробуем создать простую html-страницу состоящую из 4 фреймов. Это будет пример №2.

Пример с 4 фреймами №2

Каркас для примера 2:

Код исходной html-страницы с фреймом будет следующий:

Код файла top.html

Код файла menu.html

Код файла content.html

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

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

Код файла 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-страницу в исходном состоянии:

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

При переходе на страницу об авторе вы увидите следующие:

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

Необязательные атрибуты этого тега являются w и height=»высота» , а обязательный атрибут src=»https://zarabotat-na-sajte.ru/uroki-html/%D0%B0%D0%B4%D1%80%D0%B5%D1%81%20%D1%84%D1%80%D0%B5%D0%B9%D0%BC%D0%B0″ .

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

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, то следующий четвертый атрибут border имеет силу.

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

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

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

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

1. Атрибут src=»https://zarabotat-na-sajte.ru/uroki-html/%D0%B0%D0%B4%D1%80%D0%B5%D1%81%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B0″
В качестве параметра здесь должен указываться полный URL к адресу элемента. Этот атрибут обязателен. Он уже знаком Вам, т.к. он присутствовал в примерах 1 и 2.

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

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

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

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


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

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

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

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

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

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

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

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

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

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

Ссылка на следующий урок: Урок 12. Свойство CSS position

лабы по информатике, егэ

лабораторные работы и задачи по программированию и информатике, егэ по информатике

HTML Урок 6. Фреймовая структура html

Фреймовая структура в HTML

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

Элемент frameset

Синтаксис деления по вертикали (на колонки):

где n — ширина фреймов в процентах слева направо

Синтаксис деления по горизонтали:

где n — высота фреймов в процентах сверху вниз

Фреймов в структуре может быть не два, а более.

Файл с фреймовой структурой называется файлом-раскладкой и обычно называется index.html

Как происходит загрузка файлов во фрейм рассмотрим на примере.

Атрибуты тега frameset:
frameborder — значение 1 или 0 (есть или нету)
border — значение размера границы
bordercolor — цвет границы
framespacing — ширина граней фреймов в пикселях (только в IE)

Атрибуты элемента frame:
name — имя фрейма
noresize — запрещает изменение размеров для определенного фрейма.
scrolling — управляет прокруткой внутри одной области ( yes , no , auto ).
marginheight — задает величину отступа фрейма от верхнего и нижнего краев страницы.
marginwidth — создает поля слева и справа
frameborder — указывает, нужна или нет рамка вокруг фрейма (0 и 1)
bordercolor – цвет рамки

Правила создания ссылки во фреймах в html

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

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

    добавить название необходимого фрейма при помощи атрибута name (в файле-раскладке)

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

Браузер Microsoft Internet Explorer разрешает использование так называемых плавающих фреймов, описание которых может быть расположено в тексте обычного HTML-документа. Для определения плавающего фрейма используется тег . В указанном теге могут встречаться те же параметры, что и в теге описания обычных фреймов, кроме параметра NORESIZE, т. к. размер плавающего фрейма не может быть изменен пользователем.

Вопросы для повторения

  1. Для чего служит тэг ?
  2. Сколько тэгов должно быть в документе?
  3. Что определяет параметр SRC, параметр NAME, параметр MARGINWIDTH, параметр SCROLING тэга ?
  4. Для чего используют тэги ?
  5. Что определяет параметр target тэга ?
  6. Что такое плавающий фрейм, какой тэг служит для определения плавающего фрейма?

Упражнение

1. Опишите фреймовую структуру с использованием пропорционального деления пространства (*). Пусть первый столбец занимает 1/6 от общей ширины окна, второй – 1/3, третий – 1/2.

  1. Создайте документ, разбивающий окно просмотра с помощью фреймов на четыре прямоугольные области. В области А поместите оглавление. При выборе пункта оглавления в область В должен помещаться теоретический материал, соответствующий выбранному пункту меню, в область С – список контрольных вопросов по рассматриваемой теме, в область В практическая работа. Представьте материалы в виде НТМL-документов описанной структуры.
А
В C
25% 75%
D
70%
10%

Не нашли то, что искали? Воспользуйтесь поиском:

Лучшие изречения: Да какие ж вы математики, если запаролиться нормально не можете. 8425 — | 7328 — или читать все.

188.64.174.135 © studopedia.ru Не является автором материалов, которые размещены. Но предоставляет возможность бесплатного использования. Есть нарушение авторского права? Напишите нам | Обратная связь.

Отключите adBlock!
и обновите страницу (F5)

очень нужно

HTML фреймы

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

Не так давно фреймы использовались в качестве навигации по сайту, когда навигационная страница располагалась в одном окне, а страницы с контентом, располагались в других документах. В настоящее время использование фреймов на страницах сайтов можно встретить все реже, это как правило, какие-то примеры кода с «песочниц» (выделенная среда для исполнения компьютерного кода), участки Google Maps (необходимо задавать адрес в такой форме: https://maps.google.com?output=embed ), либо видео, размещенное с видео хостинга YouTube.

Тег (HTML Inline Frame Element) определяет встроенную в веб-страницу область, которая может отображать содержимое отдельно взятого документа (например, *.pdf), медиа-контента или другого веб-сайта в заданном пространстве. Содержимое внутри области существует независимо от окружающей страницы.


Синтаксис для добавления фрейма:

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

В следующем примере мы возьмем в качестве загрузки во фрейм отличный сайт — TinyPng.com, который предоставляет возможность сжимать изображения, предназначенные к загрузке на Ваш сайт. Как правило, удаётся уменьшить размер изображений на 50%, а то и больше, что значительно уменьшает их объем, экономит дисковое пространство и увеличивает скорость загрузки страниц.

В этом примере мы:

  • Элементом создали фрейм, которому атрибутом name задали имя — «myframe» , атрибутом width установили ширину фрейма «665px» , а атрибутом height высоту фрейма «265px» . В обязательном атрибуте src указали абсолютный адрес сайта, который хотим открыть во фрейме «https://tinypng.com» .
  • Разместили четыре ссылки, при клике на которые ссылка открывается непосредственно во фрейме (в значении атрибута target указано имя нашего фрейма — «myframe» ). Первая ссылка открывает сайт, загруженный изначально, а остальные три загружают различные изображения, находящиеся в той же папке, что и файл с примером.

Результат нашего примера:

Рис. 27 Пример использования фреймов в HTML.

HTML аббревиатура и контактная информация

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

В данном примере мы:

  • Поместили аббревиатуру института в тег и применили глобальный атрибут title, для того, чтобы при наведении на нее мышкой было понятно, что это высшее учебное заведение, а не то, что вы подумали.
  • Кроме того загрузили во фрейм сайт данного учебного заведения (в обязательном атрибуте src указали абсолютный адрес сайта).
  • Внизу страницы (внутри тега ) добавили адрес и контактные данные института, указанные на официальном сайте. Текст, помещенный внутрь этого тега, по умолчанию отображается курсивом. Кроме того для элемента добавили глобальный атрибут style, которым задали встроенный CSS стиль (цвет заднего фона).

Рис 28 Аббревиатура и контактная информация в HTML.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива в любую папку на вашем жестком диске:
  • Используя полученные знания составьте HTML страницу (practice_19.html в архиве), которая содержит фрейм и четыре ссылки:
  1. Первая ссылка загружает сайт «Википедии», или любой другой.
  2. Вторая ссылка загружает во фрейм изображение из папки (practice_19_1.jpg).
  3. Третяя ссылка загружает во фрейм изображение из папки (practice_19_2.jpg).
  4. Четвертая ссылка загружает во фрейм изображение из папки (practice_19_3.jpg).

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

  • Результат примера вы можете скачать после выполнения задачи для самопроверки:

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

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

Нажав кнопку «Принять и продолжить», вы соглашаетесь с Политики конфиденциальности

Мы запустили рейтинг зарплат интернет-маркетологов! Прими участие в анонимном опросе.

How-to – Читать 7 минут – 7 декабря 2020

Использование данного тега зачастую рискованно получением фильтра: сайт перестает полностью контролировать содержимое документа, так как его часть подгружается с другого сайта через iframe.

Поскольку мы перестаем контролировать содержимое, то через iframe возможна подгрузка нежелательного контента (18+, вирусы и прочее), что, в свою очередь, может привести к санкциям. А это отразится на продвижении в выдаче.

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

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

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

Так выглядит простейший пример iframe: фрагмент кода с заданным размером фонового окна под баннер:

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

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

Например, вы вызываете кликом справку, в ответ появляется общее меню, рядом с которым в фоне открывается окошко, отвечающее за выбранный вами блок информации:

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

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

  • встраивание медиаконтента — как своего, так и стороннего;
  • встраивание примеров фрагментов кода;
  • встраивание апплетов — приложений, работающих в контексте веб-сайта, например, формы оплаты или интерактивные карты. Так Яндекс предоставляет возможность запускать Яндекс.Карты через iFrame.
  • фотогалереи;
  • окно чата;
  • навигация;
  • накрутка фонового трафика.

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

А самое главное — это подгружать контент только из доверенных источников!

Преимущества:

    Быстрая подгрузка видеоматериалов, карт, презентаций и прочего контента.

Фреймы в HTML позволяют показать посетителю одновременно несколько страниц, которые абсолютно самостоятельны.

Посетитель сможет переключать экраны, не перезагружая при этом страницу.

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

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

      Существует вероятность, что индексирование веб-сайта поисковыми роботами будет прерываться при переходе на фрейм.

    Ряд браузеров не поддерживает подобное отображение. Они либо устаревшие, либо предназначены только для аудио и т.п.

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

    С технической точки зрения получается следующий код:

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

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

    Линейные фреймы создают с помощью тега

    Листинг 10.15. Общая форма тега является обязательным, даже если он ничего не замыкает. На странице Web можно определить любое количество плавающих фреймов.

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

    Листинг 10.16. Код линейного фрейма (html, txt)

    Илон Маск рекомендует:  form в HTML
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL