3.8. Фреймы в качестве парадигм
«До тех пор, пока не была создана эта парадигма схоластов (средневековая теория „первого толчка“), маятники как таковые не были известны людям, а ученые видели в них только качающиеся камни. Существование маятников было открыто благодаря
автора
Соколова Татьяна Юрьевна
Фреймы
Фреймы позволяют разделить веб-страницу на несколько независимых окон и в каждом из них разместить отдельную веб-страницу . Спор о том, нужно это или нет, продолжается. Я скажу одно: при умелом использовании фреймов можно создать страницу-шедевр, а в противном
Из книги
HTML, XHTML и CSS на 100%
автора
Квинт Игорь
5.1.10. Плавающие и внутристрочные объекты
Текстовый процессор Pages различает два вида объектов: плавающие и внутристрочные.Плавающие объектыПлавающие объекты не имеют привязки к тексту, ни форматирование символов, ни форматирование абзацев не влияет на положение объекта
Из книги
автора
Плавающие видовые экраны
Когда пользователь впервые переключается в пространство листа, графический экран пуст и представляет собой «чистый лист», где будет компоноваться чертеж. В пространстве листа создаются перекрывающиеся (плавающие) видовые экраны, содержащие
Из книги
автора
Плавающие видовые экраны
Когда пользователь впервые переключается в пространство листа, графический экран пуст и представляет собой «чистый лист», где будет компоноваться чертеж. В пространстве листа создаются перекрывающиеся (плавающие) видовые экраны, содержащие
Из книги
автора
Глава 5
Фреймы
5.1. Создание фреймов5.2. Границы фрейма5.3. Полосы прокрутки5.4. Ссылки внутри фреймов5.5. Изменение размеров фреймов5.6. Плавающие фреймы5.7. Управление пространством внутри фрейма5.8. Достоинства и недостатки фреймовФреймы (frames) – это HTML-элементы, позволяющие
Навигатор Microsoft
Internet
Explorer
позволяет создавать еще одну
разновидность фреймов - так называемые
плавающие фреймы.
Вы можете использовать плавающий фрейм
не только для размещения текста в тексте,
но и для организации ссылок на другие
документы.
Вокруг плавающего фрейма может
располагаться текст или другие графические
изображения. Вы можете указывать для
фрейма такие же атрибуты выравнивания,
как и для графических изображений.
Плавающий фрейм вставляется в документ
HTML
при помощи оператора . Для этого оператора
можно задавать параметрALIGN,
который задает выравнивание текста,
расположенного около плавающего фрейма,
параметры WIDTH и HEIGHT, задающие размеры
фрейма, а также параметры HSPACE и VSPACE.
Еще один параметр, который допустим при
описании плавающего фрейма - FRAMEBORDER. Он
может принимать значения 1 или 0. Если
значение этого параметра равно 1,
плавающий фрейм заключается в трехмерную
рамку (используется по умолчанию), а
если 0 - рамка не отображается.
Параметр SCROLLING может принимать значения
“yes”,“no”или“auto”.
Если указано значение“yes”,
окно плавающего фрейма будет иметь
полосы просмотра. Если“no”
- полос просмотра не будет. В том
случае, когда для параметра SCROLLING указано
значение“auto”,
полосы просмотра будут создаваться
только при необходимости, когда содержимое
документа не помещается в окне фрейма.
Пример
Плавающие
фреймы в документах HTML
Размещение
плавающих фреймов в документах HTML Вы
можете включить внутрь документа HTML
плавающий фрейм:
Если
указано выравнивание по левой границе,
текст,
расположенный рядом с плавающим фреймом,
будет
расположен
справа от фрейма
В
этом документе определен плавающий
фрейм, в который загружается документ
HTML,
расположенный в файлеinclude.html
Include.Html
Документ
для плавающего фрейма
Содержимое
этого документа отображается внутри
плавающего
фрейма.
Оно
отображается в окне, которое имеет
вертикальную
полосу просмотра.
Если
содержимое документа,
загруженного
в плавающий фрейм, не помещается в окне
фрейма,
пользователь
может пролистать его при помощи этой
полосы
просмотра.
Лабораторное задание №5 1) Создать документ с фреймами следующего
вида:
2) Создать документ с фреймами следующего
вида:
3) Создать документ с фреймами следующего
вида:
Первоначально
здесь должна быть расположена информация
об авторе
Видеофрагмент 1
н а
заранее созданныеhtmlдокументы, при нажатии на ссылки их
содержание должно отображаться в окне
фрейма №1.
В окне фрейма2 должна располагаться
страница с видеофрагментом1, при нажатии
на видеофрагмент1 в окно фрейма3 должна
загрузиться информация, содержащая:
описание видеофрагмента1 и ссылку на
видеофрагмент 2, при нажатии на эту
ссылку в окне фрейма 2 должен загрузиться
видеофрагмент 2, при нажатии на
видеофрагмент2 в окне фрейма 3 должна
загрузиться информация, содержащая:
описание видеофрагмента2 и ссылку на
видеофрагмент 1…
4) Самостоятельно придумать 4 примера
документов с фреймами для демонстрации
работы параметра TARGET
с предопределенными именами (_top,
_parent, _self,
_blank).
5) Самостоятельно придумать примеры
документов с фреймами, чтобы
продемонстрировать умение:
задавать размер фреймов
задавать рамки для фреймов
задавать расстояние между фреймами
задавать отступ
знать, как сделать невозможным изменение
окна фрейма
сделать появление полосы прокрутки ,
только при необходимости
6)Создать документ с плавающим фреймом,
без рамки, полоса прокрутки должна
появляться при необходимости, текст,
расположенный рядом с фреймом должен
быть расположен слева от фрейма.
Браузер Microsoft Internet Explorer разрешает использовать уникальный тег HTML
В ТЭГС применяются
точно такие же параметры, как и в теге описания обычных фреймов . Единственным исключением является параметр NORESIZE, применение которого бессмысленно, так как размер плавающих фреймов в любом случае не может быть изменен пользователем при просмотре документа.
Кроме того, для задания расположения и размеров плавающего фрейма в документе можно использовать следующие дополнительные параметры : WIDTH, HEIGHT, HSPACE, VSPACE, ALIGN. Их назначение и порядок использования совпадает с соответствующими параметрами для встроенных изображений, которые задаются тегом .
Приведем пример использования плавающих фреймов:
Использование плавающих фреймов Пример использования концепции плавающих фреймов СЕМТЕК>
Ваш браузер не позволяет отображать плавающие фреймы
Браузер Microsoft Internet Explorer - первый из браузеров (и пока
единственный), который поддерживает так называемые "плавающие" фреймы.
Такие фреймы могут размещаться в любом месте экрана так же, как
графические изображения и таблицы.
Фрейм справа от данного текста размещен на странице с помощью
специального тега . При создании фрейма было указано
выравнивание вправо.
Результат отображения данного примера браузером Microsoft Internet Explorer показан на рис. 5.16. Браузеры, не поддерживающие концепцию плавающих фреймов, для данного примера вместо отображения содержимого документа float.htm выдадут текст "Ваш браузер не позволяет отображать плавающие фреймы".
Рис. 5.16.
Плавающий фрейм в Microsoft Internet Explorer
Отметим, что концепция плавающих фреймов близка по идеологии к встроенным изображениям или таблицам. Здесь в нужное место HTML-документа целиком встраивается другой HTML-документ.
Совет
В настоящий момент применение плавающих фреймов ограничивается единственным браузером - Microsoft Internet Explorer версии 3.0 и выше. Следует помнить, что пользователи других браузеров (в частности, Netscape) не смогут увидеть содержимого плавающих фреймов.
Фреймы — это 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% окна браузера.
Если браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами
и
. Все, что находится между тегами
и
, игнорируется браузерами, поддерживающими фреймы. Таким образом разработчику нужно написать код, дублирующий содержимое фреймов другими средствами, и поместить этот код в контейнер
, тогда все пользователи смогут увидеть его веб-страницу.
Как уже отмечалось, для вставки в документ отдельного фрейма служит непарный тег
. Атрибут src
задает документ, который должен отображаться внутри данного фрейма , например: . Если атрибут src
отсутствует, отображается пустой фрейм.
Границы или пространство между фреймами
По умолчанию, браузер отображает серую и, как правило, в виде трехмерной линии границу между фреймами, с помощью которой посетители могут регулировать размер фрейма.
Границей фрейма можно управлять, как и любыми другими элементами фрейма. Для этого существует несколько атрибутов элемента
, позволяющих настраивать границы фреймов. Толщина линии границы определяется атрибутом border
. По умолчанию значение толщины границы равно пяти.
Чтобы скрыть границу фрейма, необходимо либо указать значение ширины границы равным нулю , либо присвоить значение «no» или «0» атрибуту frameborder
. Атрибут frameborder
может принимать только два противоположных значения. Если значение атрибута frameborder
равно «yes» или «1», то граница фреймов будет отображаться, а если «0» или «no», то нет. Учтите, что значения атрибута frameborder
различаются для разных браузеров . Чтобы решить эту проблему используйте дважды атрибут frameborder
, а для некоторых браузеров требуется еще добавить атрибут framespacing
со значением «0»:
В следующем примере убираем границу между фреймами:
Пример: Убираем границу между фреймами
Фреймы без границ
Если вы удалите границу между фреймами, посетители не смогут изменять размер фрейма в браузере. Вы можете также не допустить изменения размера фрейма, сохранив границы, используя атрибут noresize
:
С помощью атрибута bordercolor
можно изменить цвет границы фрейма, необходимо только указать код или соответствующее зарезервированное имя цвета.
Ниже приведен пример html-страницы, которая содержит описанные выше атрибуты управления границей фрейма: цвет границы — красный, изменять размер верхнего фрейма нельзя:
Пример: Управление границей фреймов
frame_top
frame_left
frame_right
Управление границей фреймов
Если вы хотите расположить страницу, отображаемую внутри фрейма, ближе к его границам, или, наоборот, отодвинуть дальше, измените атрибуты marginheight
и marginwidth
тэга
. Атрибут marginheight
определяет отступ между содержимым фрейма и его верхней и нижней границами. Синтаксис:
Атрибут marginwidth
определяет отступ между содержимым фрейма и его правой и левой границами. Синтаксис:
Данная строка html , например, располагает отображаемую страницу вплотную к границе фрейма:
Если страница отображает нежелательную для вас полосу прокрутки, вы можете решить эту проблему, указав атрибут scrolling
="no" в тэге
. Но учтите, что если фрейм будет недостаточно большим, чтобы отобразить все содержимое страницы, то у посетителя не будет никакой возможности прокрутить отображаемую страницу.
Ссылки внутри фреймов
Переход по ссылке в обычном HTML-документе осуществляется следующим образом : нажимаете ссылку и текущий документ заменяется новым в текущем либо в новом окне браузера. При использовании фреймов схема загрузки html-документов отличается от обычной и главное отличие — это возможность загружать html-документ в один фрейм из другого фрейма.
Для загрузки документа в определенный фрейм используется атрибут target
тега
. В качестве значения атрибута target
используется имя фрейма, в который будет загружаться документ, указанный атрибутом name
тега
. Стоит также отметить, что имя фрейма должно начинаться либо с цифры либо с латинской буквы. Следующие имена используются в качестве зарезервированных:
Для внешних ссылок следует задавать в качестве значения для атрибута target либо _top , либо _blank , для того, чтобы сторонние проекты отображались не в ваших фреймах, а занимали полное окно браузера.
В следующем примере изображен HTML-документ, в правый фрейм которого загружается страница по ссылке, помещенной в верхний фрейм. Ссылка на документ, который откроется в правом фрейме:
Google
Правому фрейму присваивается имя frame_right
:
Чтобы документ загружался в указанный фрейм, используется конструкция target="frame_right"
, как показано в примере:
Пример: Ссылка на другой фрейм
Ссылка на другой фрейм
Ваш браузер не отображает фреймы
Плавающие фреймы
Элемент
(сокращение английского термина «плавающий фрейм») позволяет встроить в любое место веб-страницы отдельный HTML-документ или другой ресурс.
Содержимым плавающего (встроенного) фрейма может быть любая НТМL-страница, как с вашего ресурса, так и с другого веб-сайта. Как вы уже поняли, плавающие фреймы создаются с помощью элемента
, который в отличие от тега
вставляется не между тегами
и
, а между тегами
и
.
В элементе
можно использовать те же атрибуты, что и для фрейма
, за исключением атрибута 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
определяет выравнивание фрейма
В следующем примере размеры плавающего фрейма заданы в пикселях, однако вы можете задавать их и в %:
Рекомендуем почитать
Вредоносное ПО (malware) - это назойливые или опасные программы,...
Лучшие программы для восстановления данных с любых носителей информации....
Здравствуйте.Одна из самых распространенных причин, по которым тормозит...
Наверх