Лабораторная работа №5. Работа с фреймами
Работа с фреймами
Цель работы:получить навыки создания фреймов.
Задачи:
· научиться создавать фреймы;
· научиться создавать плавающие фреймы.
Порядок выполнения работы
Раздел 1. Работа с фреймами
Фреймы HTML позволяют авторам представить документ одновременно в нескольких окнах, которые могут быть независимыми окнами или подокнами. Такой вид позволяет сохранить видимой важную информацию, в то время как другие фреймы могут прокручиваться и меняться. Например, в одном общем окне один фрейм может содержать статичный баннер, второй - меню навигации, третий - главный документ, который может прокручиваться или заменяться при навигации по второму фрейму.
Каждый фрейм имеет свой URL, что позволяет загружать его независимо от других фреймов. Каждый фрейм имеет собственное имя (параметр NAME), позволяющее переходить к нему из другого фрейма. Размер фрейма может быть изменен пользователем прямо на экране при помощи мыши (если это не запрещено указанием специального параметра).
Формат документа, использующего фреймы, внешне очень напоминает формат обычного документа, только вместо тэга BODY используется контейнер FRAMESET, содержащий описание внутренних HTML-документов, содержащий собственно информацию, размещаемую во фреймах. Документ, содержащий фреймы имеет следующую структуру:
<HTML>
<HEAD>...</HEAD>
<FRAMESET>..
<.frame>…</frame>
.</FRAMESET>
</HTML>
1.1. Тег <FRAMESET>
<FRAMESET [COLS="value" | ROWS="value"]>
Тэг <FRAMESET> имеет завершающий тэг </FRAMESET>. Все, что может находиться между этими двумя тэгами, это тэг <FRAME>, вложенные тэги <FRAMESET> и </FRAMESET>, а также контейнер из тэгов <NOFRAME&g который позволяет строить двойные документы для браузеров, поддерживающих фреймы и не поддерживающих фреймы.
Данный тэг имеет два взаимоисключающих параметра: ROWS и COLS. ROWS="список-определений-горизонтальных-подокон" Данный тэг содержит описания некоторого количества подокон, разделенные запятыми. Каждое описание представляет собой числовое значение размера подокна в пикселах, процентах от всего размера окна или связанное масштабное значение. Количество подокон определяется количеством значений в списке. Общая сумма высот подокон должна составлять высоту всего окна (в любых измеряемых величинах). Отсутствие атрибута ROWS определяет один фрейм, величиной во все окно браузера.
Синтаксис используемых видов описания величин подокон:
Value
Простое числовое значение определяет фиксированную высоту подокна в пикселях. Это далеко не самый лучший способ описания высоты подокна, поскольку различные браузеры имеют различный размер рабочего поля, не говоря уже о различных экранных разрешениях у пользователя. Если вы, все же, используете данный способ описания размера, то настоятельно рекомендуется сочетать его с каким-либо другим, чтобы в результате вы точно получили 100%-ное заполнение окна браузера вашего пользователя.
value%
Значение величины подокна в процентах от 1 до 100. Если общая сумма процентов описываемых подокон превышает 100, то размеры всех фреймов пропорционально уменьшаются до суммы 100%. Если, соответственно, сумма меньше 100, то размеры пропорционально увеличиваются.
value*
Вообще говоря, значение value в данном описании является необязательным. Символ "*" указывает на то, что все оставшееся место будет принадлежать данному фрейму. Если указывается два или более фрейма с описанием "*" (например "*,*"), то оставшееся пространство делится поровну между этими фреймами. Если перед звездочкой стоит цифра, то она указывает пропорцию для данного фрейма (во сколько раз од будет больше аналогично описанного чистой звездочкой). Например, описание "3*,*,*", говорит, что будет создано три фрейма с размерами 3/5 свободного пространства для первого фрейма и по 1/5 для двух других.
COLS="список-определений-горизонтальных-подокон" То же самое, что и ROWS, но делит окно по вертикали, а не по горизонтали.
Совместное использование данных параметров может привести к непредсказуемым результатам. Например, строка: <FRAMESET ROWS="50%,50%" COLS "50%,50%"> может привести к ошибочной ситуации.
1.2. Тег <FRAME>
<FRAME SRC="url" [NAME="frame_name"] [MARGINWIDTH="nw"] [MARGINHEIGHT="nh"] [SCROLLING=yes|no|auto] [NORESIZE]>
Данный тэг определяет фрейм внутри контейнера FRAMESET.
SRC="url"
Описывает URL документа, который будет отображен внутри данного фрейма. Если он отсутствует, то будет отображен пустой фрейм.
NAME="frame_name"
Данный параметр описывает имя фрейма. Имя фрейма может быть использовано для определения действия с данным фреймом из другого HTML-документа или фрейма (как правило, из соседнего фрейма этого же документа). Имя обязательно должно начинаться с символа. Содержимое поименованных фреймов может быть задействовано из других документов при помощи специального атрибута TARGET, описываемого ниже.
MARGINWIDTH="value"
Это атрибут может быть использован, если автор документа хочет указать величину разделительных полос между фреймами сбоку. Значение value указывается в пикселях и не может быть меньше единицы. По умолчанию данное значение зависит от реализации поддержки фреймов используемым клиентом браузером.
MARGINHEIGHT="value"
То же самое, что и MARGINWIDTH, но для верхних и нижних величин разделительных полос.
SCROLLING="yes | no | auto"
Этот атрибут позволяет задавать наличие полос прокрутки у фрэйма. Параметр yes указывает, что полосы прокрутки будут в любом случае присутствовать у фрейма, параметр no наоборот, что полос прокрутки не будет. Auto определяет полосы прокрутки только при их необходимости (значение по умолчанию).
NORESIZE
Данный атрибут позволяет создавать фреймы без возможности изменения размеров. По умолчанию, размер фрейма можно изменить при помощи мыши так же просто, как и размер окна Windows. NORESIZE отменяет данную возможность. Если у одного фрейма установлен атрибут NORESIZE, то у соседних фреймов тоже не может быть изменен размер со стороны данного.
NOFRAMES
Данный тэг используется в случае, если вы создаете документ, который может просматриваться как браузерами, поддерживающими фреймы, так и браузерами, их не поддерживающими. Данный тэг помещается внутри контейнера FRAMESET, а все, что находится внутри тэгов <NOFRAMES> и </NOFRAMES> игнорируется браузерами, поддерживающими фреймы.
Задание 5.1. Вывод трех горизонтальных фреймов внутри окна браузера.
Наберите в редакторе «блокнот» текст следующего HTML-документа:
Сохраните документ с именем пример5_1.htm, откройте в браузере.
Задание 5.2 вывод двух вертикальных фреймов внутри браузера.
Наберите в редакторе «блокнот» текст следующего HTML-документа:
Сохраните документ с именем пример5_2.htm, откройте в браузере.
Тэги <FRAMESET> могут быть вложенными, т.е. например:
<FRAMESET ROWS="50%,50%">
<FRAMESET COLS="*,*"
</FRAMESET>
</FRAMESET>
Задание 5.3. В первом ряду у нас будет располагаться один рисунок, а второй ряд мы поделим на две колонки, в которых будут располагаться два других рисунка.
Наберите в редакторе «блокнот» текст следующего HTML-документа:
Сохраните документ с именем пример5_3.htm, откройте в браузере.
Задание 5.4. Здесь мы будем делить окно на колонки. Вторая колонка будет содержать в себе один рисунок, а первую колонку мы разобьем на два ряда, и поместим в них по рисунку.
Наберите в редакторе «блокнот» текст следующего HTML-документа:
Сохраните документ с именем пример5_4.htm, откройте в браузере.
Задание 5.5. В данном примере убираются полосы прокрутки во фрейме с изображением птички с помощью атрибута тэга <frame>. Scrolling Он может принимать несколько значений: nо - это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes - это значит полоса прокрутки будет всегда; auto - полоса прокрутки появиться только тогда, когда она нужна.
Собственно, параметр scrolling="auto", можно не прописывать, т.к. если параметр scrolling не задан, то полоса прокрутки появиться, если она нужна, а если нет - ее не будет.
Внесите коррективы в предыдущий HTML-документ:
Сохраните документ с именем пример5_5.htm, откройте в браузере.
Задание 5.6. В данном примере убираются рамки фреймами.
Внесите коррективы в предыдущий HTML-документ:
Сохраните документ с именем пример5_6.htm, откройте в браузере.
Задание 5.7. В данном примере убираются поля во фрейме, содержащем изображение птички с помощью атрибутов marginheight и marginwidth, задающих размер полей в пикселах , соответственно верхнего и нижнего поля и правого, левого.
Внесите коррективы в предыдущий HTML-документ:
Сохраните документ с именем пример5_7.htm, откройте в браузере.
Задания для самостоятельного выполнения:
1. Создайте документ со следующим разбиением на фреймы (в центральном нижнем фрейме удалите поля, в первом нижнем- полосы прокрутки): Сохраните полученный документ с именем пример5_8.htm
2 Создайте документ со следующим разбиением на фреймы (удалите поля и полосы прокрутки). Сохраните полученный документ с именем пример5_9.htm
 |
Задание 5.10
Наберите HTML-документ:
Сохраните документ с именем пример5_10.htm, откройте в браузере.
Нажмите на любую из ссылок. Документ, на который введет ссылка, откроется в том же фрейме, в котором располагается документ с меню. А нам нужно, чтобы он открылся во фрейме с основным содержанием, а меню осталось в нетронутом виде. Как это сделать? Для этого следует воспользоваться атрибутом тэга <frame> - name . Параметр name задает уникальное имя для фрейма (в нашем случае для того, который содержит документ пример2_2.htm). Имя фрейма может быть в дальнейшем использовано для ссылки на него из других документов (фреймов), с помощью атрибута тэга <a> target (target="имя_фрейма.
Задание 5.11
Введем атрибут target в документе со ссылками – пример2_1.htm.
Внесите изменения в файл пример2_1.htm, и сохраните его под именем пример2_17.htm:
Внесите коррективы в файл пример5_10.htm и сохраните его под именем пример5.11.htm:
Теперь, все ссылки открываются в нужном нам фрейме, а меню никуда не исчезает, при этом мы изменили немного два документа – наш фрейм-документ (пример5_10.htm) и документ, содержащий ссылки (пример2_1. .htm).
Задание 5.12. Бывают ситуации, когда нам нужно, чтобы открываемый документ открылся во все окно, для этого надо параметру target задать значение _top. В приведенном ниже примере файл "пример1.htm"откроется в полное окно, закрыв (уничтожив) остальные кадры (фреймы).
Внесите изменения в файл пример2_17.htm и сохраните его под именем пример2_17_2.htm:
Задание 5.13.Внесите коррективы в файл пример5_10.htm и сохраните его под именем пример5_13.htm:
Сохраните документ с именем пример5_13.htm, откройте в браузере.
Раздел 2. Создание плавающих фреймов - тэг <IFRAME>.
Для создания плавающих фреймов служит тэг <IFRAME>. Плавающим называется фрейм, представляющий собой часть вэб-страницы и не требующий построения отдельной страницы с описанием фреймов. Атрибут NAME служит для задания имени плавающего фрейма, которое может затем быть использовано в определении гиперссылки с целью открытия в этом фрейме соответствующей страницы. Iframe позволяет нам вставить один html-документ в другой html-документ.
Например, <IFRAME src="ancorpri.html" width="300" height="250" scrolling="auto" frameborder="1"></IFRAME>
В атрибуте src указывается путь к документу, который отобразиться во встроенном фрейме.
Атрибуты height и width отвечают за ширину и высоту встроенного фрейма.
Атрибут scrolling (полоса прокрутки) и его значения мы тоже уже знаем из уроков по фреймам: он может принимать несколько значений: no - это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes - это значит полоса прокрутки будет всегда; auto - полоса прокрутки появится только тогда, когда она нужна.
Атрибут frameborder указывает отображать или нет границы встроенного фрейма, возможные значения 1 (да, отображать) и 0 (нет, не отображать). Границы встроенного фрейма растягивать при помощи мыши ваш посетитель не может, поэтому атрибута noresize встроенные фреймы не имеют.
Iframe может выравниваться относительно содержимого страницы: текста и картинок, и может, соответственно, быть заключен в тэги выравнивания и таблицы.
Плавающие фреймы в данное время поддерживаются только Microsoft IE.
Задание 5.14
Наберите в редакторе «блокнот» текст следующего HTML-документа:
Сохраните документ с именем пример5_14 htm, откройте в браузере.
Самостоятельно откорректируйте пример 5_14.htm таким образом, чтобы в окне, вместо заголовков первого уровня выводились в виде маркированного списка гиперссылок перечень графических изображений, находящихся в текущей папке и предусмотрите открытие каждого из них в плавающем фрейме. Сохраните созданный документ под именем пример5_15.htm