Главная | Обратная связь | Поможем написать вашу работу!

Атрибуты форматирования фреймов

Лабораторная работа №5.

СОЗДАНИЕ WEB-СТРАНИЦ С ПОМОЩЬЮ HTML.

Создание фреймов.

Цель работы: изучить назначение и правила записи основных тегов языка и их атрибуты.

Теоретические данные.

Создание фреймов (теги <FRAMESET> И <FRAME>).

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

Создание вертикальных и горизонтальных фреймов

Для создания фреймовой структуры применяется контейнер <FRAMESET>... </FRAMESET>, который заменяет контейнер <BODY>...</BODY> и используется для разделения экрана на области. Внутри него находятся теги <FRAME SRC=...>, которые указывают на HTML-документы, предназначенные для изначальной загрузки в созданные фреймы.

Фреймы бывают вертикальными и горизонтальными. В табл. 1 указаны возможные атрибуты тега <FRAMESET>. Все способы разделения окна применимы для обоих атрибутов — COLS и ROWS. Как видно из таблицы, отводимое под фреймы пространство можно указывать в процентах от общих размеров окна браузера (%), частями (*) или в абсолютных величинах (пикселях).

Таблица 1. Атрибуты тега <FBAMESET>

Атрибут	Способ задания размеров	Описание	Примеры
COLS	%, %	Вертикальное разделение окна браузера	<FRAMESET COLS="50%, 50%"> </FRAMESET> Окно браузера разделится вертикально на две равные части.
число, %,*	<FRAMESET COLS="150, 30%, * "> </FRAMESET> Под первый вертикальный фрейм отводится 150 пикселей, под второй — 30 % доступного пространства, а для третьего — вся оставшаяся область окна браузера.
ROWS	число, число	Горизонтальное разделение окна браузера	<FRAMESET ROWS="30, 70"> </FRAMESET> Задание горизонтальных фреймов с точным указанием их высоты: верхний — 30 пикселей, нижний — 70.
%,*	<FRAMESET ROWS="30%,*"> </FRAMESET> Задание горизонтальных фреймов, когда первый фрейм будет занимать 30 % от высоты окна браузера, а второй — все остальное пространство.

Пример.

Пусть нам нужно разбить рабочую область окна браузера на два фрейма с именамиfr1 и fr2, в которые будут загружаться одноименные web-документы.

В первый фрейм поместим фото «Храм Василия Блаженного» и соответствующий заголовок второго уровня:

Файл fr1.html

<HTML>

<HEAD>

<ТIТLЕ> Храм Василия Блаженного </ТIТLЕ> </HEAD>

<BODY>

<Н2 ALIGN=CENTER> Храм Василия Блаженного, г.Москва, Россия </Н1>

</BODY>

</HTML>

Во второй фрейм поместим фото «Олимпийский стадион» (г. Сочи) и заголовок второго уровня.

Файл fr2.html

<HTML>

<HEAD>

<ТIТLЕ>Стадион</ТIТLЕ>

</HEAD>

<BODY>

<H2 ALIGN=CENTER> Олимпийский стадион </Н1>

</BODY>

</HTML>

1. Создание двух вертикальных фреймов:

<HTML>

<HEAD>

<TITLE>Россия</ТIТLЕ>

</HEAD>

</FRAMESET>

</HTML>

2. Создание двух горизонтальных фреймов:

<HTML>

<HEAD>

<TITLE>Россия</ТIТLЕ>

</HEAD>

</FRAMESET>

</HTML>

Примеры создания сложных фреймов.

1. Пусть нужно создать фреймовую структуру, приведенную на рис. 1, где горизонтальному фрейму (с именемЗаголовок ) отведено 15 %, вертикальному (Меню) — 25 %, а фреймуСодержимое — все остальное пространство.

Заголовок
Меню	Содержимое

Рис. 1. Фреймовая структура из горизонтальных и вертикальных участков

В этом случае фреймовая структура будет кодироваться следующим образом:

<НТМL>

<HEAD>

</Т1ТLЕ>Фрейм с заголовком</Т1ТLЕ>

</HEAD>

</FRAMESET>

</HTML>

Здесь файл zagolovok.html содержит «титульный заголовок» web-страницы:

<HTML>

<HEAD>

<TITLE>3aгoлoвок</Title>

</HEAD>

<BODY>

<H1 ALIGN=CENTER>3aгoлoвок</Hl>

</BODY>

</HTML>

Файл menu.html содержит меню web-страницы:

<HTML>

<HEAD>

<ТIТLЕ>Меню</ТIТLЕ>

</HEAD>

<BODY>

< H2 ALIGN=CENTER>Meню</H2>

</BODY>

</HTML>

Файл sodergimoe.html отображает основное содержимое страницы:

<HTML>

<HEAD>

<ТIТLЕ>Содержимое</ТIТLЕ>

</HEAD>

<BODY>

<Н2 ALIGN=CENTER>Coдержимoe</H2>

</BODY>

</HTML>

2. Пусть нужно создать фреймовую структуру, приведенную на рис.2, где горизонтальному фрейму Заголовок отведено 15 %, горизонтальному фрейму Адрес — 10 %, вертикальному фрейму Логотип — 20 %, вертикальному фрейму Меню — 25 %, фрейму Новости — 20 %, фрейму Содержимое — остальное пространство.

Логотип	Заголовок
Меню	Содержимое	Новости
Адрес

Рис.2

Здесь нужно сначала разделить окно браузера на горизонтальные фреймы, первый из которых занимает 15 % от высоты окна, третий — 10 %, а второму отводится все остальное (хотя можно было записать его высоту и в явном виде — как 75 %):

Первый горизонтальный фрейм должен состоять из двух вертикальных: Логотип — 20 % и Заголовок — все остальное пространство:

</FRAMESET>

Второй горизонтальный фрейм состоит из трех вертикальных: Меню — 25 %, Новости — 20 %, Содержимое — остальное пространство:

</FRAMESET>

Третий горизонтальный фрейм занимает всю область экрана. Не забудем и про последний, закрывающий тег </FRAMESET>,который был открыт в самом начале:

<FRАME SRC=adres.html>

</FRАMESET>

В итоге получается следующая конструкция:

<HTML>

<HEAD>

<ТIТLЕ>Сложный вид фреймов</ТIТLЕ>

</HEAD>

</PRAMESET>

</FRAMESET>

</FRAMESET>

</HTML>

Атрибуты форматирования фреймов

Каждому элементу <FRAME> желательно задать имя с помощью атрибута NAME. Это имя удобно использовать при создании гиперссылок и организации переходов по ссылкам внутри фреймовой структуры. Описание этого и остальных атрибутов см. в табл. 2.

Таблица 2

Атрибуты тегов <FRAMESET> И <FRAME>

Атрибут	Описание	Пример
NAME	Задание имени фрейма	<FRAME SRC=logotip.html NAME=log>
BORDЕR=0	Удаление линий границы между фреймами	<FRAMESET ROWS="15%,*,10%"BORDER=0>
BOBDER=2	Увеличение толщины линии границы (в нашем примере толщина разделительной линии будет равна 2 пикселям)	<FRAMESET ROWS="15%,*,10%" B0RDER=2>
NORESIZE	Запрет изменения размеров фрейма. По умолчанию размеры фреймов можно менять с помощью мыши, перетаскивая границу между фреймами. Для блокировки этой возможности следует воспользоваться параметром noresize	<FRAME SRC=logotip.html NORESIZE>
BORDERCOLOR	Задание цвета границ фрейма	<FRAMESET ROWS="15%,*,10%" BORDER=2 BORDERCOLOR=red>
MARGINHEIGHT	Задание полей сверху и снизу от краев фрейма. Значение указывается в пикселях. (Если задать нулевое значение, то содержимое фреймов растянется на всю ширину экрана, что испортит вид web-страницы)	<FRAMESET ROWS="15%,*,10%" MARGINHEIGHT=10 MARGINWIDTH=20 NORESIZE>
MARGINWIDTH
SCROLLING	NО	Полосы прокрутки внутри фрейма не создаются	<FRAME SRC=logotip.html SCROLLING=NO>
yes	Полосы прокрутки создаются обязательно, даже если в них нет необходимости
auto	Полосы прокрутки появляются, когда это необходимо (по умолчанию)

Воспользуйтесь поиском по сайту: