ЛР_№4 Фреймы
.docЛабораторная работа №4.
Создание фреймов на web-странице
Цель работы: Изучить принципы создания фреймов их использование для отображения информации на web-страницах сайта.
Фреймы (или рамки – Frame) – мощный механизм представления информации на Web-страницах. С помощью фреймов экран разделяется на несколько областей, в каждой из которых отображается содержимое отдельной страницы и даже Web-узла. Фреймы – удобное средство, но не следует злоупотреблять ими. Не располагайте на экране более трёх фреймов и старайтесь не применять их без надобности. Фреймы позволяют нам открыть в окне браузера - не один, а сразу несколько документов (допустим, документ menu.html, который содержит меню, logo.html - документ, который содержит логотип, шапку страницы, и content.html - документ с непосредственным содержанием нашего сайта). Базовая структура группы фреймов Web-страница, которая разделена на фреймы, собирается вместе с документом верхнего уровня — документом группы фреймов (frameset).
Документы группы фреймов содержат стандартный заголовок (задаваемый тегом <head>). В отличие от стандартных HTML-документов они не имеют тега <body>. Вместо него используют тег <frameset>, который применяется для определения строк и столбцов отдельных фреймов, каждый из которых обозначается тегом <frame>. Содержимое фреймовых документов поступает из различных файлов HTML. Оно выводится в различных фреймах. Прежде, чем размещать документы на Web-странице, используя фреймы, нужно решить по какому принципу мы это будем делать. Предлагаем классический вариант - logo.html, menu.html, content.html - о котором упоминалось выше. Расположение фреймов может быть различное, для примера рассмотрим четыре варианта из множества возможных (см. рис.14):
Рис.14 Пример расположения документов оформленных фреймами.
Рассмотрим первую схему на рисунке 14 и приведём его базовый html файл:
<html> <head>
<title>Хождение по фреймам</title>
<frameset rows="100,*,150">
<frame src="logo.html">
<frame src="content.html">
<frame src="menu.html">
</frameset>
</head> </html>
Поясним данный html файл. Параметр rows - в нашем примере это выглядит так: rows="100,*,150" - документ делиться на несколько рядов (строк). Высота первого ряда - 100 пикселей, третьего - 150, а второй занимает все оставшееся пространство. Тэг frame сообщает браузеру какие документы у нас будут в каждом ряду (строке). Если вы хотите, чтобы меню было во втором ряду, то вам следует поменять его местами с content.html. Если замените параметр rows, на cols, то получим расположение документов, изображённое на рисунке 14 схеме третьей, то есть, документы будут располагаться не по строкам, а по столбцам.
Рассмотрим вторую схему на рисунке 14. В первом ряду расположен logo.html, а второй ряд мы поделим на две колонки, в которых располагаются документы menu.html и content.html. Для данной схемы базовый html файл будет выглядеть следующим образом:
<html> <head>
<title>Хождение по фреймам</title>
<frameset rows="100,*">
<frame src="logo.html">
<frameset cols="150,*">
<frame src="menu.html">
<frame src="content.html">
</frameset> </frameset> </head> </html>
Рассмотрим четвёртую схему на рисунке 14. Здесь мы будем делить окно на колонки. Вторая колонка будет содержать в себе документ content.html, а первую колонку мы разобьем на два ряда, и поместим в них документы logo.html и menu.html. Базовый html файл, для данного примера будет выглядеть следующим образом:
<html> <head>
<title>Хождение по фреймам</title>
<frameset cols="100,*">
<frameset rows="100,*">
<frame src="logo.html">
<frame src="menu.html">
</frameset>
<frame src="content.html">
</frameset> </head> </html>
На уровне группы фреймов (то есть внутри открывающего тега <frameset>) вы задаете строки и столбцы и решаете, следует ли выводить границы между фреймами.
На уровне отдельного фрейма (в теге <frame>) вы задаете URL выводимого в этом фрейме документа и имя фрейма для последующих ссылок на него. Также вы имеете возможность управлять появлением полос прокрутки, разрешением пользователю изменять размер фрейма и полей, если они вообще есть.
Создание строк и столбцов
Строки и столбцы задаются внутри тега <frameset> атрибутами cols и rows. Эти атрибуты разделяют группу фреймов по принципу координатной сетки. Фреймы заполняются слева направо по столбцам и сверху вниз по строкам.
Размер каждой строки (или столбца) задается после имени атрибута списком значений в кавычках, разделенных запятыми. Количество значений в списке определяет число строк (столбцов) это выглядит следующим образом:
<frameset rows="50%, 50%">
Отключение вывода границ для браузеров
При разработке страниц много времени теряется на отмену вывода рамок, чтобы фреймовая страница имела ровный, бесшовный вид. Чтобы отключить отображение границ для всех браузеров, необходимо добавить в тег <frameset> избыточную информацию следующим образом:
<frameset frameborder=0 framespacing=0 frameborder=no border=0>
Полосы прокрутки
Атрибут scrolling в теге <frame> управляет появлением внутри фрейма полос прокрутки независимо от содержимого фрейма.
Значением атрибута по умолчанию является auto, обеспечивающее фрейму такое же поведение, как и у любого другого окна браузера: пока содержимое помещается во фрейм, полосы прокрутки в нем не появляются.
Для того чтобы полосы прокрутки появлялись всегда, даже в практически пустых фреймах, установите scrolling=yes.
Если вы хотите быть уверенными, что полосы прокрутки никогда не появятся во фрейме, даже если он полностью заполнен графикой и его границы плохо видны, установите scrolling=no.
Поля фрейма
Для настройки верхних и нижних полей фрейма задайте количество пикселей в атрибуте miarginheight. Размер левого и правого поля задает атрибут marginwidth. Они могут использоваться вместе.
Встраиваемые (плавающие) фреймы
Microsoft Internet Explorer 3.0 предложил так называемые встраиваемые фреймы, которые идентифицируются тегом <iframe>. Они позволяют помещать в любое место потока HTML-документа фрейм с полосой прокрутки. Это очень похоже на размещение изображения.
Как показано в следующем коде, внутри тега <iframe> задается ширина и высота фрейма и HTML-файл, который вы хотите вывести. Так же как и при размещении изображений, вы можете выровнять фрейм на странице и определить hspace и vspace. Вы также можете задать поля внутри фрейма и отображение границы.
Пример 14:
<html>
<head><title>примеры</title></head>
<body bgcolor=#e1c8dc>
<h2>это плавающий фрейм</h2>
<iframe width=300 height=100 align=left bgcolor=#b760a0 src="about.html"></iframe>
</body></html>
Результат:
Рис.17 Пример плавающего фрейма
Тег <frame>
<frame>
Тег <frame> определяет один фрейм в составе тега <frameset>.
Атрибуты
bordercolor = "#rrggbb" или название цвета
Задает цвет границ фрейма (если включено их ображение).
frameborder = 1 | 0
Задает вывод трехмерного разделителя между текущим и окружающими его фреймами. Значение 1 (или yes) включает появление границы. Значение 0 (или nо) отключает ее. Вы можете использовать этот атрибут и на уровне тега <frameset>. Это повысит надежность работы.
longdesk = uri
Определяет ссылку на документ, содержащий длинное описание фрейма и его содержимого.
marginwidth = число
Задает количество пикселов в промежутке между левым и правым краем фрейма и его содержимым.
marginheight = число
Определяет интервал (в пикселах) между верхней и нижней границей фрейма и его содержимым
name = текст
Назначает имя фрейму. Это имя может использоваться в ссылках для загрузки просматриваемого документа в именованный фрейм.
noresize
Предотвращает изменение размера фрейма пользователем. По умолчанию действует правило, по которому пользователи могут изменять размеры фрейма, щелкая мышью и перетаскивая его границы.
scrolling = yes | no | auto
Задает появление полосы прокрутки во фрейме. Значение yes указывает, что полоса прокрутки всегда появляется. Значение по указывает, что полосы прокрутки никогда не появляются. Значение auto (по умолчанию) указывает, что полосы прокрутки появляются автоматически, если содержимое не помещается в окне фрейма.
src = ur1
Задает местонахождение исходного HTML-файла, который должен появиться во фрейме.
Тег <frameset>
<frameset>...</frameset>
Тег <frameset> определяет образующее группу фреймов множество фреймов или других групп фреймов (<frameset>).
Атрибуты
border = число
Задает толщину границ фрейма (в пикселах) между всеми фреймами в группе (когда отображение границ включено).
borgdercolor = "#rrggbb" или название цвета
Устанавливает цвет всех границ в группе фреймов
cols = список
Устанавливает количество и размер столбцов в группе фреймов. Количество столбцов определяется количеством значений в списке. Значения размеров могут задаваться в пикселях, процентах или относительных значениях (*), распределяющих доступное свободное место.
frameborder = 1 | 0 или yes | no
Определяет вывод трехмерных разделителей между фреймами в данной группе фреймов. Значение 1 (или yes) включает появление разделителей; 0 (или no) — отключает.
rows = список (число, проценты или *)
Задает количество и размер строк в группе фреймов. Количество строк определяется по количеству значений в списке. Размеры могут быть заданы в абсолютных значениях (пикселях), процентных отношениях или относительных значениях (*), распределяющих доступное свободное место.
Тег <iframe>
<ifranie>.. .</iframe>
Тег <-ifranie> определяет в документе плавающий фрейм. Он имеет атрибуты, подобные атрибутам тега <img>. Закрывающий тег обязателен.
Атрибуты
align = top | middle | bottom | left | right
Задает выравнивание на странице в потоке текста внутреннего фрейма. Атрибуты left и right позволяют тексту обтекать фрейм.
frameborder = 1 | 0
Включает или отключает изображение объемных границ фрейма. По умолчанию равен 1, границы выводятся.
height = число
Задает высоту фрейма в пикселях или в процентах от размера окна.
hspace = число
Используется совместно с выравниванием влево и вправо. Атрибут определяет интервал (в пикселях) влево и вправо от фрейма.
marglnheight = число
Задает (в пикселях) размер интервала между верхним и нижним краями фрейма и его содержимым.
marginwidth = число
Задает (в пикселях) размер интервала между левым и правым краями фрейма и его содержимым.
name = текст
Назначает фрейму имя, по которому будут осуществляться ссылки
noresize
Предотвращает изменение размера фрейма со стороны пользователя. По умолчанию пользователь может изменить установки размеров фрейма, перетаскивая его границы мышью.
scrolling = yes | no | auto
Определяет, появляются ли полосы прокрутки на экране (см. тег <frame>).
src = ur1
Задает URL HTML-документа, который будет первым появляться во фрейме.
vspace = число
Используется совместно с атрибутом выравнивания влево или вправо, определяет размер интервала (в пикселях) сверху и снизу от фрейма.
width = number
Задает ширину фрейма в пикселях или процентах от размера окна.
Структура гиперссылок для фреймовых структур
Для создания гиперссылок во фреймовых структурах необходимо дать целевому фрейму название:
<frameset rows="100,*">
<frame src="URL1">
<frame src="URL2" name="right_frame">
</frameset>
В гиперссылке (размещенной в левом фрейме в файле URL1) для загрузки нового документа в правый фрейм добавляют атрибут TARGET значение которого – имя целевого фрейма:
<a href="URL3" target="right_frame">
Результат:
Практические задания.
*В каждом фреймовом окне должны отображаться страницы первых трех лабораторных работ!!!!!!!!!!!!!!!!
-
Создайте HTML документ, <head>, задайте название документа с помощью тега <title> и включите дополнительные сведения о документе используя тег <meta>.
-
С
оздать
фрейм со следующей структурой:
-
Создать
фрейм со следующей структурой:
-
Создать
фрейм со следующей структурой:
В данной фреймовой структуре в левос фрейме создайте несколько ссылок, которые при нажатии будут отображаться в нижнем центральном фрейме.
-
Создайте два плавающих фрейма, размеры и место положение на собственное усмотрение.
Теоретические вопросы:
-
Определение и основное назначение фреймов.
-
Виды фреймов и их отличия.