12780

Фреймы (FRAME)

Практическая работа

Информатика, кибернетика и программирование

Фреймы В какомто смысле фрейм это рамка вокруг картинки окошко или страница. Вводя тег FRAME дизайнер НТМLстраницы разделяет экран браузера на части. В результате человек просматривающий страницу может изучать только одну ее часть независимо от остального содержим

Русский

2013-05-03

1.16 MB

11 чел.

Фреймы

В каком-то смысле фрейм — это рамка вокруг картинки, окошко или страница. Вводя тег <FRAME>, дизайнер НТМL-страницы разделяет экран браузера на части. В результате человек, просматривающий страницу, может изучать только одну ее часть, независимо от остального содержимого. Фактически браузер, распознающий фреймы, загружает разные страницы в разные секции, или фреймы, экрана. Например, вы можете построить страницу таким образом, что фирменный знак будет зафиксирован в верхней части экрана, в то время как остальную часть страницы пользователь пролистывает обычным способом. Можно расположить сбоку кнопки навигации, которые не перемещаются, когда читатель щелкает по ним мышкой, так что изменяется только часть экрана, а сама полоска навигации остается неподвижной.

Как работают фреймы

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

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

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

Экран с фреймами описывается в НТМL-странице, в контейнере

          (1)

FRAMESET.

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

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

Создание простой страницы с фреймами

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

Задание фреймовой структуры

Для начала мы должны представить себе общий вид страницы – где расположить фреймы и какого они будут размера. Затем можно подумать об их содержании. Ниже приводится код простой фреймовой структуры с использованием тега <FRAMESET>. Обратите внимание: страница с фреймовой структурой не содержит тега <ВОDY>.

УПРАЖНЕНИЕ 7.1

Создать файл «Фреймовая_структура.html в соответствии с приведенным ниже кодом:

<HTML>

<HEAD>

<TITLE>Пример фреймов</TITLE>

</HEAD>

<FRAMESET COLS="25%, 75%">

<FRAME SRC="menu.html">

<FRAME SRC="main.html" NAME="main">

</FRAMESET>

</HTML>


Рис. 7.1. 

В результате мы получили экран, разделенный на два окна. Левое окно занимает 25% экрана и содержит страницу с названием menu.html. Окно справа займет 75% экрана и содержит файл main.html. Пока у нас их нет, так что вы увидите страницу с двумя пустыми фреймами. Прежде чем она появится, нам придется пару раз щелкнуть мышкой в ответ на сообщения об ошибках, потому что браузер будет пытаться найти несуществующие страницы. Заметьте, что правую страницу мы назвали "main" (<главная>) с помощью строки:

<FRAME SRC="main.html" NAMЕ="main">

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

Подготовка содержимого фрейма

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

menu.html — это обычная НТМL-страница, построенная как оглавление. Имейте в виду, что этот фрейм узкий и высокий.

Теперь мы должны определить, где будут появляться другие страницы при щелчке мышкой на ссылке. Поскольку мы хотим, чтобы они отображались в правом фрейме, добавим атрибут ТАRGET (TARGЕТ="main") в тег ссылки. Это означает, что, когда пользователь щелкает на ссылке, вызываемая страница появляется в фрейме   main. Мы отображаем все страницы в фрейме main, поэтому давайте добавим атрибут ТАRGЕТ="main" во все теги ссылок в оглавлении. Если мы не определим атрибут ТАRGЕТ, то страница появится там, где мы щелкнули мышкой, — в левом фрейме.

Пример 7.1

Снимок окна браузера при загрузке «Управляющий фреймами файл.html».

В левом окне выбрана ссылка: «КОРАБЛИ РАССТАЮТСЯ КАК ЖЕНЩИНЫ».

В правое окно загрузился соответствующий текст песни.

Упражнение 7.2

Создать «Управляющий фреймами файл.html»

Подготовка фрейма main

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

Использование тега   <NOFRAMES>

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

Пример 7.2

страница с фреймовой структурой с добавленным в конце разделом <NOFRAMES>

<HTML>

<HEAD>

<TITLE>Пример фреймов</TITLE>

</HEAD>

<FRAMESET COLS="25%, 75%">

Игнорируется старым браузером,

не поддерживающим фреймы

<FRAME SRC="menu.html">

<FRAME SRC="main.html" NAME="main">

<NOFRAMES>

Игнорируется

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

Вы просматриваете эту страницу с помощью

браузера, не поддерживающего фреймы.

</NOFRAMES>

</FRAMESET>

</HTML>

Поддерживающий фреймы браузер проигнорирует все, что находится между тегами <NOFRAMES> и </NOFRAMES>. Наоборот, не поддерживающий фреймы браузер проигнорирует все, что находится между тегами <FRAMESET> и </FRAMESET>. Код без фреймов можно поместить и в начало, и в конец страницы.

Макетирование фреймов — тег   <FRAMESET>

Теги <FRAMESET> обрамляют текст, описывающий компоновку фреймов. Здесь размещается информация о числе фреймов, их размерах и ориентации (горизонтальной или вертикальной).

У тега <FRAMESET> только два возможных атрибута: ROWS, задающий число строк, и СОLS, задающий число столбцов.

Между тегами <FRAMESET> не требуется указывать тег <ВОDY>, но его можно поместить между тегами <NOFRAME> в конце фреймовой структуры. Между тегами <FRAMESET> не должно быть никаких тегов или атрибутов, которые обычно используются между тегами <ВОDY>. Единственными тегами, которые могут находиться между тегами <FRAMESET> и </FRAMESET>, являются теги <FRAME>, <FRAMESET> и <NOFRAME>. Это упрощает задачу.

В основном все связано с тегами <FRАМЕ> и их атрибутами. Если же вы хотите поэкспериментировать, можно создать вложенные друг в друга теги <FRAMESET> аналогично тегам <ТАВLЕ>.

Атрибуты ROWS и СОLS

Для каждой строки и столбца, упомянутых в теге <FRAMESET>, необходим свой набор тегов <FRАМЕ>.

Атрибут ROWS

Атрибут ROWS тега <FRAMESET> задает число и размер строк на странице. Количество тегов <FRАМЕ> должно соответствовать указанному числу строк. Справа от знака "=" можно определить размер каждой строки в пикселах, процентах от высоты экрана или в относительных величинах (обычно это указание занять оставшуюся часть места). Следует пользоваться кавычками и запятыми, а также оставлять пробелы между значениями атрибутов. Например, следующая запись формирует экран, состоящий из трех строк: высота верхней — 20 пикселов, средней — 80 пикселов, нижней — 20 пикселов:

<FRAMESET ROWS="20, 80, 20">

Следующий тег — <FRAMESET> — создает экран, на котором верхняя строка занимает 10% высоты экрана, средняя — 60%, а нижняя — оставшиеся 30%:

        

<FRAMESET ROWS="10%, 60%, 30%">

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

<FRAMESET ROWS="20, 80, *">

УПРАЖНЕНИЕ 7.3

Создать Феймовую структуру в соответствии с приведенной копией экрана:

    Рис. 7.2

Атрибут СOLS

Столбцы задаются так же, как строки. Для них применимы те же атрибуты.

Тег <FRАМЕ> - Задание содержимого фрейма 

Тег <FRАМЕ> определяет внешний вид и поведение фрейма. Этот тег не имеет закрывающего тега, поскольку в нем ничего не содержится. Вся суть тега <FRАМЕ> в его атрибутах. Их шесть: NАМЕ, MARGINWIDTH, MARGINHEIGHT, SCROLLING, NORESIZE и SRC.

Атрибут NАМЕ

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

Фрейм, в котором отображаются страницы, называется целевым (target). Фреймы, которые не являются целевыми, именовать не обязательно. Например, можно записать такую строку:

<FRАМЕ SRC="my.html" NАМЕ="main">

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

УПРАЖНЕНИЕ 7.4

  1.  В примере 7.2 попробуйте изменить в строке

<FRAME SRC="main.html" NAME="main"> значение NAME="main" на NAME="sain".

  1.  Создать файл «Многоуровневые списки1.html», содержащий html-код:

<a href="second1.html" TARGET="main">ПОДЪЕМНИК ТРОНЕТСЯ</a><br><br>

<a href="one.html" TARGET="main">ГОЛУБАЯ ЗВЕЗДА</a><br><br>

<a href="two.html" TARGET="main">ШТИЛИ ВЫМЕТАЯ ОБЛАКАМИ</a><br><br>

<a href="three.html" TARGET="main">КОРАБЛИ РАССТАЮТСЯ, КАК ЖЕНЩИНЫ</a>

  1.  Создать, на основе файла «Визбор.html» файлы «second1.html», «one.html», «two.html», «three.html», с текстами песен.
  2.  Создать файл «Домашняя страница1.html». Загруженный в Internet Explorer файл должен выводить на экран заставку - портрет поэта Юрия Визбора.
  3.  Убедиться, что при загрузке файла «Управляющий фреймами файл.html» и наличии файлов созданных в данном упражнении, на экран выводится

Следующая картинка:

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

Атрибут МАRGINWIDTH 

Атрибут МАRGINWIDTH действует аналогично атрибуту таблиц CELLPADDING. Он задает горизонтальный отступ между содержимым кадра и его границами. Наименьшее значение этого атрибута равно 1. Нельзя указать 0. Можно не присваивать ничего — по умолчанию атрибут равен 6.

Атрибут МАRGINHEIGHT

Атрибут МАRGINHEIGHT действует так же, как и МАRGINWIDTH. Он задает поля в верхней и нижней частях фрейма.

Атрибут SCROLLING

SCROLLING=yes означает, что во фрейме всегда будут полосы прокрутки, даже если это не нужно. Если задать SCROLLING=no, полос прокрутки не будет, даже когда это необходимо. SCROLLING=аutо – соответствует результату «по умолчанию».

УПРАЖНЕНИЕ 7.5

Создать файл «МАRGINWIDTH Горизонтальный отступ от краев кадра.html» в соответствии с приведенным снимком экрана:

УПРАЖНЕНИЕ 7.6

  1.  Создать файл «MARGINHEIGHT Вертикальный отступ от краев кадра» в соответствии с приведенным снимком экрана:

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

Атрибут NORESIZE

Как правило, пользователь может, перемещая границу фрейма мышкой, изменить его размер. Это удобно, но не всегда. Иногда требуется атрибут NORESIZE. Помните: все границы фрейма, для которого вы задали NORESIZE, становятся неподвижными – соответственно, может оказаться так, что размеры соседних фреймов тоже станут фиксированными. Пользуйтесь этим атрибутом с осторожностью.

Атрибут SRС

Атрибут SRС применяется в теге FRАМЕ при разработке фреймовой структуры для того, чтобы определить, какая страница появится в том или ином кадре. Если вы зададите атрибут SRС не для всех фреймов, у вас возникнут проблемы. Даже если страницы, отображаемые во фрейме, выбираются в соседнем фрейме, вы должны по крайней мере задать для каждого фрейма начальную страницу. Если вы не укажете начальную страницу и URL, фрейм окажется пустым, а результаты могут быть самыми неожиданными.

Атрибут ТАRGЕТ

Вернемся к простому примеру с кадром оглавления. Когда пользователь щелкает мышкой на одной из ссылок в левом фрейме, соответствующая страница должна появиться в правом фрейме, а оглавление остается неизменным. Чтобы этого добиться, нужно определить целевой фрейм ТАRGЕТ, в котором будет отображаться страница для каждого пункта оглавления. Целевые фреймы задаются в ссылках левого фрейма. Вот зачем всем кадрам во фреймовой структуре были присвоены имена. Правый фрейм называется main, так что нужно в каждой ссылке добавить атрибут ТАRGЕТ="main", в результате чего соответствующая страница появится во фрейме main. Обратите внимание: каждая ссылка содержит атрибут ТАRGЕТ="main", который по щелчку мыши отображает страницу во фрейме main.

Атрибут ТАRGЕТ можно задавать для нескольких различных тегов. При использовании в теге <ВАSЕ> он направляет все ссылки в определенный целевой фрейм, если в дальнейшем не предусмотрено другое. Можно задать атрибут ТАRGЕТ в теге <АRЕА> в активном изображении или в теге <FОRМ>. Фреймы полезны для организации форм. Пользователи будут видеть одновременно и форму, и результат своего выбора. Обычно при щелчке мышью кнопки Submit форма исчезает, и появляется страница с результатами выбора. Сочетание форм и фреймов может оказаться удобным способом навигации.

Вложенные и множественные кадровые структуры

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

В основном вложенные фреймы действуют так же, как вложенные таблицы. Задайте кадровую структуру, а внутри какого-нибудь фрейма в ней — еще одну структуру. Необходимо помнить, что тег <FRАМЕ> не имеет закрывающего тега.

При работе с фреймами не используются теги <СОLSРАN> и <ROWSРАN>. Их роль играют множественные, или вложенные, фреймы. Задав внутри одной объемлющей фреймовой структуры две независимых подструктуры, можно поместить в левой части экрана столбец из двух, а в правой — из трех фреймов.


Рис. 7.2.  Вложенные фреймы

УПРАЖНЕНИЕ 7.7

Создать Феймовую структуру в соответствии с приведенной копией экрана:

УПРАЖНЕНИЕ 7.8

Создать Феймовую структуру из 2-х фреймов, в соответствии с приведенной копией экрана:

УПРАЖНЕНИЕ 7.9

Создать Феймовую структуру в соответствии с приведенной копией экрана:

УПРАЖНЕНИЕ 7.10

Создать Феймовую структуру в соответствии с приведенной копией экрана:


 

А также другие работы, которые могут Вас заинтересовать

44053. Повышение эффективности деятельности планово-экономического отдела предприятия ЗАО «Атлант» 1.52 MB
  Эконометрическое моделирование временных рядов. Моделирование объемов производства с использованием анализа временных рядов Построение модели объема выпуска продукции на основе временных рядов Программная поддержка эконометрического моделирования объема выпуска продукции.
44054. Расчет потребного количества оборудования 502 KB
  Определение трудоёмкости по видам оборудования производится по данным базового предприятия по согласованию с преподавателем и пропорционально трудоёмкости изготовления детали-представителя
44055. Изучение взаимодействия морского и железнодорожного транспорта на примере ОАО «Архангельский морской торговый порт» 566 KB
  Все это уменьшает пропускные и перевозочные возможности железных дорог ведет к росту порожнего пробега вагонов к снижению производительности их использования и к другим отрицательным последствием. [29] Перевозки грузов осуществляемые в смешанном сообщении с двумя перевалками в основном менее эффективны чем с одной и в прямом железнодорожном сообщении как по общей величине приведенных затрат так и по потребному парку вагонов и по затратам трудовых ресурсов. Навалочные и насыпные грузы отправляемые маршрутами или группами вагонов...
44056. Проект мероприятий по разработке нового турпродукта в Сысертском районе Свердловской области на примере ООО «УРАЛ ТУР» 398 KB
  Туризм экскурсии – это важная форма отдыха людей ориентации их свободного времени тем более что состояние физического и нравственного здоровья вызывает серьезные опасения и требует использования всех возможных средств по исправлению сложившийся в последние годы ситуации. в стоимость тура должна быть включена хотя бы одна из перечисленных ниже услуг: трансфер экскурсии или аренда автомобиля.; памятки о сроках подачи заявок на авиабилеты проживание питание скидки на группу; заявка бронирования тура дата № заказа...
44057. Повышение социальной компетентности подростков 15-16 лет, выпускников детских домов, средствами социально-культурной деятельности 1.04 MB
  Теоретические основы формирования социальной компетентности подростков выпускников детских домов с помощью средств социально-культурной деятельности Сущность и определение социальной компетентности. Особенности процесса формирования социальной компетентности у подростков.
44058. Проектування дорожнього СТО-А 370 KB
  Автомобілі на станції технічного обслуговування СТО приймаються відповідно до встановлених правил. Значний ріст парку легкових автомобілів що належать населенню в Україні вимагає збільшення проектування дорожніх СТОА. Виробничотехнічну базу системи технічного обслуговування автомобілів в основному складають підприємства структурні одиниці трьох видів: СТОА у тому числі майстерні і пункти ТО і ремонту; бази і склади матеріальнотехнічного постачання; гаражі і стоянки автомобілів. Сучасні СТОА здійснюють: продаж і...
44059. Разработка бизнес-плана по производству кондитерских изделий ООО «Бансес» 251.5 KB
  Важнейшей задачей разработки бизнеспланов является проблема привлечения и обоснования инвестиций и кредитов в том числе зарубежных необходимых для осуществления проектов технического перевооружения и реконструкции предприятий. – 1337580 руб. – 5788080 руб. Общая стоимость проекта по производству кондитерских изделий 936671 руб.
44060. Психологізм творчості Михайла Коцюбинського 475 KB
  Зображення процесів внутрішнього життя героїв у дитячих оповіданнях письменника За об’єкт дослідження обрано дитячу та малу прозу Михайла Коцюбинського Цвіт яблуні Сон Що записано в книгу життя В дорозі Дорогою ціною Дебют Лялечка Ft morgn Харитя Ялинка Маленький грішник Intermezzo як найпоказовішу з погляду психологічного зображення зрілості авторської концепції. Із метою ширшого обґрунтування останньої комплексного розгляду художнього психологізму залучено інформацію про особисте життя...
44061. Расчет преобразовательного агрегата 2.27 MB
  Совместно с американскими специалистами были проанализированы достоинства и недостатки электроэнергетики России и США. Специалисты отрасли умели управлять ЕЭС и знали как её оптимально приспособить к рынку.