Лабораторная работа №4.
Кадры. Основы создания кадров и организация ссылок.
Целью данной лабораторной работы является: изучение основ создания кадров о рганизации ссылок.
Правильно выбранная рама подчеркивает совершенство картины, а неудачная может испортить любое художественное полотно. То же самое относится к рамкам (кадрам, фреймам) HTML: их расчетливое применение поможет вам лучше организовать документ и сделать его вид более привлекательным. С другой стороны, если кадры использовать неправильно, ваша страница станет производить отталкивающее впечатление, а способ размещения информации на ней будет нелогичным и странным. Вы можете подумать: а стоит ли вообще пользоваться этим средством HTML, если оно поддерживается не всеми программами просмотра и не является стандартным в современной версии языка'? Однако два наиболее популярных браузера – Netscape Navigator и Microsoft Internet Explorer – поддерживают использование кадров. С этими программами работает более 90% аудитории Всемирной паутины. Даже если не брать в расчет оставшиеся 10% пользователей текстовых браузеров типа Lynx, игра стоит свеч. К тому же, как будет показано в этой главе, существуют альтернативные способы представления "кадрированной" информации.
Что это такое
Впервые появившиеся в программе Netscape Navigator 2.0 кадры HTML, позволяют разбить страницу на независимые (даже с прокруткой) окна, выводящие информацию различных типов. Кадры во многом похожи на таблицы HTML. Если вы понимаете, как работают таблицы, у вас не будет трудностей с кадрами HTML. В отличие от таблиц, кадры не только организовывают данные, но и размещают их на экране дисплея. Они делят окно браузера на отдельные независимые панели, каждая из которых выводит свой файл. Другими словами, каждая такая панель представляет собой "мини-браузер".
Основы создания кадров
Для начала рассмотрим код HTML-документа с кадрами средней сложности:
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="25%,50%,25%">
<FRAME SRC="header.htm">
<FRAMESET COLS="25%,75%">
<FRAME SRC="label.htm">
<FRAME SRC="info.htm">
</FRAMESET>
<FRAME SRC="footer.htm">
</FRAMESET>
<NOFRAMES>
Your browser cannot display frames.
</NOFRAMES>
</HTML>
На рис. представлен результат интерпретации этого кода программой просмотра Internet Explorer. Документ состоит из четырех кадров. Верхний занимает всю ширину окна и служит заголовком. Левый средний кадр, на долю которого приходится 25% ширины, может быть предназначен для логотипа или пиктограммы; справа от него находится панель для вывода информации. Нижний кадр, шириной во все окно, может содержать какие-то дополнительные данные.
Не вдаваясь пока в подробности, отметим, что каждому кадру соответствует свой HTML-документ (header.htm, label.htm, info.htm или footer.htm), содержащий выводимую в нем информацию.
Контейнер FRAMESET
Кадр должен быть расположен в контейнере FRAMESET, который занимает место знакомого уже нам контейнера BODY. HTML.-документ, имеющий структуру FRAMESET, не имеет структуры BODY, и наоборот.
Если включить контейнер BODY в документ, где используются контейнер FRAMESET и команды FRAME, кадры будут проигнорированы программой просмотра, и их информация не будет выведена. Будет показана только информация контейнера BODY.
Так как документ с кадрами не может содержать контейнер BODY, в нем не могут быть определены фоновые цвета и фоновые изображения (они задаются атрибутами BACKGROUND и BGCOLOR тэга <BODY>). Однако HTML-документ каждого индивидуального кадра может определить указанные атрибуты, так как он содержит тэг <BODY>.
Будьте внимательны и не используйте структуры BODY и FRAMESET в одном документе.
Парный тэг <FRAMESET></FRAMESET> используется при определении каждого кадра. Внутри этого контейнера могут располагаться только тэги <FRAME> или другие контейнеры FRAMESET.
Определение параметров кадров
Тэг <FRAMESET> имеет два главных атрибута: ROWS и COLS. Общий вид контейнера FRAMESET выглядит следующим образом:
<FRAMESET ROWS="value_list" COLS="value_list"> </FRAMESET>.
Можно определить любое число рядов и столбцов; необходимым условием является указание хотя бы одного из атрибутов ROWS или COLS.
Если вы определили не более одного ряда или столбца, программа просмотра проигнорирует контейнер FRAMESET, и экран останется пустым. Иными словами, кадр не может быть единственным. Если определены, по крайней мере, два ряда или два столбца, другой атрибут может быть опущен (ему по умолчанию присваивается значение в 100%).
Строка "value_list" представляет собой список значений в пикселах, процентах или относительных единицах, разделенных запятыми. Количество рядов или столбцов кадров определяется числом этих значений. Например,
<FRAMESET ROWS="100,240,140">
указывает на сетку кадров из трех рядов, высота которых 100, 240 и 140 пикселов соответственно.
Однако установка высоты ряда в пикселах является плохой практикой, так как не учитывается тот факт, что окна браузеров могут иметь самую разную величину. В абсолютных единицах стоит указывать размеры кадра лишь для маленьких изображений, в остальных же случаях лучше пользоваться относительными величинами, например:
<FRAMESET ROWS="25%, 50%, 25%">
что создает три кадра по 25%, 50% и 25% от высоты окна браузера.
Совет: Относительно точности указания в процентах можно не волноваться если сумма не равна 100%, масштаб кадров будет пропорционально изменен.
Задание параметров кадров в относительных единицах выглядит следующим образом:
<FRAMESET COLS="*,2*,3*">
где символ * обозначает пропорциональное деление окна программы просмотра. Таким образом, окно будет разделено на три вертикальных кадра, первый из которых будет иметь ширину в 1/6, второй – в 2/6 (или 1/3) и третий – в 3/6 ( или 1/2) от ширины окна браузера. Единица при указании относительных значений может быть опущена. Указание значений атрибутов ROWS и COLS может быть и смешанным, например:
<FRAMESET COLS=-"100,25%,*,2*">
Здесь первому кадру присвоено абсолютное значение в 100 пикселов по ширине, второму – 25% от ширины окна. Оставшееся пространство делится между третьим и четвёртым кадрами в пропорции 1/3 к 2/3.
Приоритеты в указаниях значений атрибутов следующие: в первую очередь слева направо отводится место для кадра с абсолютным значением, затем – для кадра со значением в процентах, а в последнюю очередь – для кадров с относительными величинами.
Если вы пользуетесь абсолютными величинами в атрибутах ROWS и COLS не делайте такие кадры большими – ведь они должны поместиться в окно браузера любого размера. Совместно с такими кадрами для лучшей балансировки рекомендуется использовать хотя бы один кадр, определенный в процентах или относительных величинах.
При определении обоих атрибутов, например:
<FRAMESET ROWS="*,2*,*" COLS="2*,*">
получается сетка кадров из трех рядов и двух столбцов. Первый и последний ряды занимают по 1/4, второй ряд – половину от высоты окна. Первый столбец размещается на 2/3, а второй – на 1/3 окна браузера.
Контейнеры FRAMESET могут вкладываться друг в друга, как будет показано ниже. Но не будем торопиться, а познакомимся сначала с тэгом <FRAME>.
Тэг <FRAME>
Тэг <FRAME> определяет отдельный кадр. Он должен располагаться внутри контейнера FRAMESET. Например:
<FRanESET ROWS="*,2*"> <FRAME> <FRAME> </FRAMESET>
Заметьте, что этот тэг не является контейнером и, в отличие от тэга <FRAMESET>, не имеет закрывающего тэга. Определение кадра происходит в одной строке кода HTML-документа.
Число тэгов <FRAME> должно быть равно числу кадров, определенных в тэге <FRAMESET>. В нашем примере определено два кадра, поэтому контейнер содержит соответственное количество тэгов <FRAME>. Пока наши кадры ничем не заполнены.
В HTML тэг <FRAME> располагает шестью атрибутами: SCR, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING и NORSIZE. Вот синтаксис использования этих атрибутов:
<FRAMESET SRC="url" NAME="window_ name" SCROLLING=YES|NO|AUTO MARGINWIDTH="value" NARGINHEIGHT="value" NORESIZE>
К счастью, использовать все атрибуты необязательно.
Указание источника информации для кадра.
Довольно часто вы будете пользоваться только одним атрибутом – SRC.
Строка <FRAME SRC="url">
определяет URL-адрес содержимого кадра. Это обычно файл HTML– документа, расположенный в том же каталоге, что и документ, содержащий контейнер FRAMESET, например:
<FRAME SRC="sample.htm">
Этот документ должен быть полноценным HTML-документом, т. е. содержать все обязательные части (контейнеры HTML, HEAD, BODY и т. д.).
Конечно, атрибут SRC может содержать любой правильный URL-адрес. Если вы хотите включить в ваш кадр изображение в формате GIF, находящееся, например, на машине в Тимбукту, вы включите в код вашего документа такую строку:
<FRAME SRC="http://www.timbuktu.com/budda.gif">
В случае, если программа просмотра не сможет найти указанный файл, кадр не будет построен, и браузер выведет сообщение об ошибке. Если же в тэге вовсе не указан атрибут SRC, кадр будет в любом случае создан и оставлен пустым.
Текст, заголовки, графика и другие элементы не могут напрямую включаться в документ с кадрами. Все они должны вводиться только с помощью указания URL-адреса элемента. Если контейнер FRAMESET содержит "инородное тело", оно будет выведено, а кадры полностью проигнорированы.
Альтернативный способ представления информации
Если вам не дает покоя мысль о пользователях, браузеры которых не поддерживают вывод кадров, не стоит волноваться: HTML дает возможность представить данные альтернативным способом при помощи контейнера NOFRAMES. Поместите между тэгами <NOFRAMES> и </NOFRAMES> необходимую информацию, размеченную обычными тэгами HTML, например:
<NOFRAMES> Некадрированная информация HTML. </NOFRAMES>
Программы просмотра, поддерживающие кадры, будут полностью игнорировать код, размещённый в контейнере NOFRAMES.
Примечание: Если вы хотите включить в альтернативную информацию фоновый рисунок или изображение, используйте тэг <BODY> и его атрибуты, например:
<NOFRAMES> <BODY BGCOLOR="red" BACKGROUND="image.gif"> Содержимое … </BODY> </NOFRAMES>
Пока контейнер BODY находится внутри контейнера NOFRAMES, всё в порядке. Однако, использовать тэг <BODY> внутри контейнера NOFRAMES особой нужды нет, если только вы не хотите воспользоваться его атрибутами, как было только что показано.
Простой пример использования кадров - страница с двумя кадрами
Самая простая страница имеет минимально возможное число кадров – два:
<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS="*, 2*">
<FRAME SRC="label.htm">
<FRAME SRC="info.htm">
</FRAMESET>
</HTML>
Кадры делят окно программы просмотра на две части по вертикали, причем левый занимает 1/3, а правый – 2/3 пространства. Первый содержит документ label.htm, а второй – info.htm
Таким же образом легко создать 10 и более вертикальных (или горизонтальных, используя атрибут Row) кадров. Однако на странице, как правило, не должно быть более трех или четырех кадров одновременно.
Примечание: Если вам хочется иметь больше трех-четырех вертикальных или горизонтальных кадров одновременно, вам следует воспользоваться табличным представлением информации. Кадры в основном нужны для включения в вашу страницу элементов управления областями окна браузера или для организации динамического обновления информации. Для размещения статичных данных по строкам и колонкам лучше всего годится обыкновенная таблица.
Примечание: Слишком большое количество кадров может вызвать серьезный сбой в работе программы просмотра.
Модификация внешнего вида кадров
Теперь пришло время обратиться к атрибутам, отвечающим за внешний вид кадра.
Внутренние границы кадра
Атрибуты MARGINWIDTH и MARGINHEIGHT тэга <FRAME>позволяют контролировать ширину внутренней границы кадра: MARGINWIDTH="value"
Значения атрибутов всегда задаются в абсолютных цифрах (пикселах), например:
<FRME MARGINHEIGHT="5" MARGINWIDTH="7">
что создает внутреннюю рамку на верхней и нижней границах кадра шириной в 5 пикселов, а на левой и правой границе – шириной в 7 пикселов. Внутри этой рамки данные выводиться не будут. Эти атрибуты не имеют ничего общего с рамкой кадра, определяемой браузером либо задаваемой при помощи атрибута BORDER.
Полосы прокрутки
К построенным вами кадрам автоматически добавляются полосы прокрутки, если содержание кадра больше его размера. Иногда это может нарушить эстетику страницы, поэтому в HTML предусмотрен атрибут SCROLLING тэга <FRAME>, имеющий следующий формат:
<FRАМЕ SCROLLING="YES|NO|AUTO">
Этот атрибут может принимать одно из трех значений: YES, NO и AUTO. Последнее значение подразумевается по умолчанию, т. е. когда атрибут не определен. Если указано значение YES, полоса прокрутки появится в любом случае, значение NO запрещает появление полосы. Например, определение атрибута SCROLLING может быть следующим: <FRAME SCROLLINC=YES>
Регулировка размеров кадра
По умолчанию размеры кадров могут легко изменяться читателями, однако понятно, что это может сильно нарушить ваш авторский замысел. Поэтому вы, скорее всего, захотите использовать атрибут NORESIZE тэга <FRAME>,запрещающий возможность "перекраивания" вашей страницы:
<FRAME NORESIZE>
Этот атрибут не имеет значений. Указав его в одном кадре, вы тем самым запретите изменять размеры и всех смежных кадров. Как правило, этого бывает достаточно, чтобы "закрепить" рамки всех кадров страницы на месте. Когда вы захватываете рамку кадра мышью, то указатель становится двунаправленной стрелкой, если перемещение рамки возможно. В противном случае, т.е. когда использован атрибут NORESIZE, двунаправленная стрелка не появляется.
Рамки кадра
Для определения рамки кадра в HTML существуют три атрибута: BORDER, FRAMEBORDER и BORDERCOLOR. Первый из этих атрибутов используется только с тэгом <FRAMESET> и устанавливает ширину всех рамок для всех кадров контейнера FRAMESET. Эта величина указывается в пикселах, например:
<FRAMESET BORDER="5">
Если этот атрибут задан равным нулю, все кадры контейнера будут без рамок.
Примечание: По умолчанию атрибут BORDER имеет значение 5.
Атрибут FRAMEBORDER используется с тэгами <FRAMESET> и <FRAME> и может принимать два значения: YES или NO. В случае YES рамка имеет трехмерную форму. Если FRAMEBORDER="NO", рамка невидима, т. е. она имеет цвет фона окна браузера, устанавливаемого по умолчанию.
По умолчанию атрибут FRAMEBORDER имеет значение YES, т. е. предусматривает наличие трехмерной рамки. Рамка кадра будет невидимой, если значение FRAMEBORDER="NO" установлено для всех кадров, смежных с ним.
Совет: Для того чтобы на странице все кадры не имели рамок, надо установить FRAMEBORDER="NO" и BORDER="0" в тэге <FRAMESET>.
Атрибут BORDERCOLOR может использоваться с тэгами <FRAMESET> и <FRAME>. Ему может быть присвоено стандартное имя цвета или RGB-значение. Например:
<FRAMESET BORDERCOLOR="red" ROWS="*,*"> <FRAME SRC="info.htm" BORDERCOLOR="FF00FF"> <FRAME SRC="info.htm"> </FRAMESET>
Здесь атрибут BORDERCOLOR тэга <FRAMESET> устанавливает красный цвет рамок ("red"), однако такой же атрибут тэга <FRAME> отменяет это значение и определяет цвет рамки первого кадра как фиолетовый. В результате второй кадр, в котором цветовой атрибут не определен, будет иметь часть рамки фиолетовой (на стороне, смежной с первым кадром), а остальную часть рамки – красной.
Примечание: Шестнадцатеричные значения цветов точны, но не очень понятны (что это за цвет такой – #FA10D7 ?). Стандартные имена цветов более удобны в использовании, однако браузеры могут трактовать их по-разному. Если же ограничиться шестнадцатью наиболее распространенными цветами, можно на этот счет не беспокоиться. Вот эти цвета: aqua, black, blue, fuchsia, gray, green, lime, maroon, nаvу, olive, purple, red, silver, teal, white и yellow.
Примечание: Если в двух смежных кадрах определены свои собственные атрибуты BORDERCOLOR, ни один из них не будет иметь силы. Цвет их рамок будет определяться соответствующим атрибутом контейнера FRAMESET.
<HTML>
<HEAD>
</HEAD>
<BODY>
<HTML><HEAD></HEAD>
<FRAMESET ROWS="2*,*,*" BORDER="20" BORDERCOLOR="red">
<FRAMESET COLS="4*,*">
<FRAME SRC="source2.htm">
<FRAME SRC="info.htm">
</FRAMESET>
<FRAMESET COLS="*,*,*">
<FRAME SRC="info.htm" BORDERCOLOR="#FF00FF">
<FRAME SRC="info.htm" FRAMEBORDER="NO">
<FRAME SRC="info.htm" FRAMEBORDER="NO">
</FRAMESET>
<FRAME SRC="info.htm">
</FRAMESET>
</HTML>
</BODY>
</HTML>
На рис. приведен пример использования атрибутов BORDER, FRAMESET и BORDERCOLOR. Отметьте, что значение атрибута BORDERCOLOR тэга <FRAMESET> ("red") касается лишь верхнего правого кадра, так как только он не является смежным с левым кадром среднего ряда, для которого цветовой атрибут переопределен на фиолетовый. Правый кадр среднего ряда должен был бы также иметь свою левую границу красного цвета, но он вообще (как, впрочем, и его сосед слева) не имеет рамки, так как его атрибут FRAMEBORDER="NO". Вы, наверное, поняли, что отношения кадров на странице весьма переплетены и правильное использование атрибутов рамок не такое простое дело, как может показаться.
Предупреждение: Программа Microsoft Internet Explorer поддерживает еще один атрибут тэга <FRAMESET> – FRAMESPACING. Он предназначен для определения расстояния между кадрами в пикселах. Однако ввиду того что остальные браузеры "не понимают" этот атрибут, его использовать не рекомендуется, если вы, конечно, не пишете для аудитории, располагающей исключительно браузерами компании Microsoft.
Организация ссылок
После того как вы узнали о методах создания кадров, пришло время познакомиться с их главным предназначением – управлением навигацией по сайту. Сначала посмотрим, как можно называть кадры и как ссылаться на них.
Определение имени кадра и ссылки на кадр
Для определения имени кадра служит атрибут NAME. Например, строка
<FRAME SRC="info.htm" NAME="Info">
создает кадр по имени "Info", на который можно сделать гипертекстовую ссылку следующим образом:
<А HREF="moreinfo.htm" TARGET="Info"> Click Неге То Jump To Info </A>
Атрибут TARGET гипертекстовой ссылки содержит имя кадра. При активизации этой ссылки содержимое кадра "Info", т.е. файл info.htm, размещенный в нем при создании, будет заменен файлом moreinfo.htm. Заметьте, что если атрибут TARGET отсутствует, файл moreinfo.htm будет выведен в том же окне или кадре, где находится указатель ссылки. Атрибут TARGET как раз и предназначен для указания "цели" – кадра, в котором должен быть размещен файл, определенный атрибутом HREF. Этот принцип замены файлов в одном кадре при управлении этим процессом из другого кадра и лежит в основе навигации по сайту.
Как правильно дать имя кадру
Если кадру не присвоить имени, на него нельзя будет ссылаться. Поэтому всем кадрам, содержание которых планируется менять, должны быть даны правильные имена. Имена кадров должны начинаться с алфавитно-цифрового символа. Ваши имена не должны начинаться с символа подчеркивания, так как он является первым символом зарезервированных имен кадров. Все остальные имена, начинающиеся указанным символом, игнорируются.
Имя |
Назначение |
_blank |
Загружает указанный файл в новое окно без названия. |
_self |
Загружает указанный файл в кадр, откуда делается вызов. |
_parent |
Загружает указанный файл в старший (родительский) кадр сетки кадров. Если такой кадр не определен, это результат действия аналогичен self. |
_top |
Загружает указанный файл в полное окно, разрушая всю структуру кадров. |
Ниже приведены несколько примеров, поясняющих использование зарезервированных имен кадров.
Если в кадре определена ссылка <А HREF="stuff.htm" TARGET="_blank">, то её активизация приведет к открытию нового, не имеющего названия, окна браузера и выводу в него содержимого файла stuff.htm Это может быть новый HTML.-документ, либо определение новой сетки кадров.
Строка <А HREF="stuff.htm" TARGET="_self"> указывает на то, что при активизации ссылки кадр, в котором она расположена, будет очищен, и в него будет выведен файл stuff.htm.
Если кадр содержит ссылку <А HREF="stuff.htm" TARGET="_parent">, то при активизации ссылки сетка кадров, к которой принадлежит вызывающий кадр, будет заменена содержимым stuff.htm.
И, наконец, строка <A HREF="stuff.htm" TARGET="_top"> означает, что при активизации ссылки все окно браузера будет заменено содержимым stuff.htm.