Литература
Типовое задание
Фреймы
Чтобы браузер показал одновременно несколько документов, надо создать специальный фрейм-документ, в котором необходимо указать сколько документов откроется в окне браузера, сколько места будет занимать каждый, каким образом они будут располагаться.
Фреим
Для создания страниц с фреймами необходимо обязательное построение двух групп HTML-файлов.
o к первой группе относятся документы содержания (content) , которые обеспечивают заполнение информацией каждой области страницы.
o ко второй группе относят документы-раскладки (layout) , которые применяются для разделения Web-страницы на области.
Разделение Web-страницы на области (фреймы) определенных типов осуществляется в документах-раскладках с помощью тэгов <Frameset></frameset> и внутреннего тэга <Frame> .
В тэге <Framese > за горизонтальное деление экрана отвечает атрибут rows , а за вертикальное деление — атрибут cols . Значение этих атрибутов выражается в пикселях, процентах или с помощью * для обозначения оставшейся части экрана.
Например:
cols = 40%, 60% — деление области просмотра по вертикали в отношении два к трем;
rows = 100, 40%, * — верхняя горизонтальная область имеет размер 100 пикселей, 40% доступного пространства под среднюю область, а все остальное — под нижнюю.
Внутри тэга <Frameset> </frameset> устанавливается тэг <Frame>, который предназначен для организации ссылок на документы содержания. I'
Тэг <Frame> имеет собственные атрибуты:
< src = "имя файаа-Ыт" — для вызова документа содержания;
scrolling = "yes" — обеспечивает прокрутку внутри области;
scrolling = "по" — запрещает прокрутку внутри области;
scrolling = "Auto" — разрешает построение полос прокрутки при необходимости.
Тэг < Noframes ></noframes > применяется для ситуации, когда браузер не поддерживает фреймы.
Проанализируйте решение приведенной ниже задачи.
Разместите на Web-странице пять областей (фреймов), сопроводив центральный фрейм вертикальной полосой прокрутки, как показано ниже:
Верхняя часть страницы
Левый фрейм
Центральный
фрейм
Правый фрейм
Для выполнения данного задания сначала необходимо описать пять отдельных документов содержания для каждой из областей (фреймов).
ü Документ содержания верхнего фрейма :
<Html>
<Head>
<Title> Верхний фрейм</Тitlе^>
<Meta http-equiv='"Content-Typett content="text/html;
charset=windows-1251">
</head>
<Body bgcolor='"pink">
<Center><Font size=5 color="blue ">
Верхняя часть страницы</font></сепtеr>
</body>
</html>
ü Документ содержания нижнего фрейма (bottomfr.htm):
<Html>
<Head><
<Title> Нижний фрейм</Тitle>
<Meta http-equiv= "Content-Type " content="text/html;
charset=windows-1251 ">
</head>
<Body bgcolor= "yellow">
<Center> <Font size=5 color= "indigo ">
Нижняя часть страницы</Fопt></сепtеr>
</body></html>
ü Документ содержания левого фрейма (lefthtm):
<Html>
<Head>
<Тitle>Левый фрейм</Title>
<Meta http-equiv="Content-Type" content="text/html;
sharset=windows-1251 ">
</head>
<Body bgcolor="white">
<Center><Font size=5 со1оr="blие">Левый фрейм</fопt></сепter>
</body></html>
ü Документ содержания центрального фрейма (centerfr.htm):
<Html>
<Head> -,
<Title>Фрейм</title>
<Meta http-equiv="Content-Type" content="text/html,
charset=windows-1251">
</head>
<Body bgcolor= "lime ">
<Center>
<Font size=4 со1оr="bluе">Центральный фрейм</fопt>-
</center> ,,
</body></html>
ü Документ содержания правого фрейма (rightfr.htni):
<Html>
<Head>
<Тitle>Правый фрейм</title>
<META http-equiv="Content-Type" content="text/html;
charset=windows-1251"
</head>
<Body bgcolor="white">
<Centeт><Font size=5 color="blue">
Правый фрейм <font></font></center>
</body></html>
После построения документов содержания строится документ-раскладка:
<Html>
<Head>
<Title> Организация фреймов </title>
<Meta http-equiv="Content-Type" content=text/html;
charset=windows-1251">
</head>
<! горизонтальное деление экрана>
<Frameset rows="40%,20%,*">
<! вставка документа "topfr. htm " в верхний фрейм>
<Frame src= "topfr. htm" noresize scrolling="no">
<! вертикальное деление центральной области экрана>
<Framese cols="40%,20%,40%">
<! вставка документа "leftfr.htm" в левый фрейм>
<Frame src = "leftfr. htm " scrolling= "no ">
<! вставка документа "centerfr.htm" в центральный фрейм>
<Frame src= "centerfr. htm" scrolling="yes" marginwidth="50" margin-height="15">
<! вставка документа "rightfr.htm" в правый фрейм>
<Frame src= "rightfr. htm " scrolling= "no " >
</frameset>
<! вставка документа "bottomfr.htm" в нижний фрейм>
<Frame src = "bottomfr. htm ">
</frameset>
<Noframes>
<Center><Font size=6>Фреймы</font></center>
<Hr color="blue">
Этот браузер не может воспроизводить фреймы
</noframes>
</frameset>
</html>
1. Закарян И., Рафалович В. Что такое Internet, WWW и HTML. – М., 1998.
2. В.Дорот, Ф.Новиков. Толковый словарь современной компьютерной лексики. С-Пб.,2001.
3. Информатика. Базовый курс / Под ред.Симоновича. С-Пб., 2001.
4. Айзенменгер Р. HTML 3.2/4.0: Справочник. — М.: БИНОМ, 1998.
5. Браун М., Хоникатт Дж. Использование HTML 4. — М., СПб.: Вильяме, 1999.
6. Воген Т. Мультимедиа: Практическое руководство. — Мн., 1997.
7. Гончаров А. HTML в примерах.—СПб.: ПИТЕР, 1997.
8. Кирмайер М. Мультимедиа.—-СПб.: ВНV,1994.
9. Коржинский С. Настольная книга Web-мастера.— М.: ЗАО «Кнорус», 2000.
10. Werbach К. Краткое руководство по HTML. /http://werbach.com/barebones.
11. Korpela J. Изучение HTML 3.2 на примерах http://www.hut.fi/~jkorpela/HTML 3.2/all.html.
12. Матросов А.В., Сергеев А.О., Чаунин М.П. HTML 4/0 – CПб. «БХВ – Санкт-Петербург, 1999
13. Хоумер А. Уилмен К. Dynamic HTML: – справочник. – СПб.: Питер Ком, 1999
14. Шарф Д. HTML 3.2: справочник – СПб: Питер, 1998
15. Мулен Р. HTML 4: справочник программиста – СПб.: Питер Ком, 1998
Приложение2
Тэг
Назначение
<html>и </html>
начало/конец документа
<head>и</head>
пара тэгов указывает на начало и конец служебной области документа
<title>и</title>
все, что находится между тэгами <title> и </title>, толкуется браузером как название документа (появляется в строке заголовка окна браузера)
<body>и </body>
пара меток указывает на начало и конец тела (основной области) HTML-документа
<H1>и </H1> — <H6>и </H6>
заголовки от первого до шестого уровня
<P>и</P>
начало/конец абзаца
<BR>
конец строки
<HR>
горизонтальная линия
<B>и</B>
полужирный шрифт
<I>и</I>
наклонный текст (курсив)
<TT>и</TT>
шрифт пишущей машинки
<U>и</U>
подчеркнутый шрифт
<SUP>и</SUP>
верхний индекс
<SUB>и </SUB>
нижний индекс
<BIG>и</BIG>
увеличить размер шрифта
<SMALL>и</SMALL>
уменьшить размер шрифта
<PRE>и</PRE>
предварительно отформатированный текст, выводится браузером на экран как есть
<BLOCKQUOTE>и</BLOCKQUOTE>
текст, заключенный между тэгами, выводится браузером на экран с увеличенным левым полем.
<FONT>и</FONT>
тэг для определения типа, размера и цвета шрифта
Атрибут COLOR тэга <FONT>
цвет шрифта для фрагмента текста
<BDO>и</BDO>
изменение направления текста.
<MARQUEE>и</ MARQUEE>
текст представляется в виде бегущей строки
<UL>и</UL>
маркированный список
<OL>и</OL>
нумерованный список
<DL>и</DL>
список определений
<A HREF="[адрес перехода]"> выделенный фрагмент текста </A>
переход от одного фрагмента текста к другому
<IMG SRC="[имя файла]">
вставка графического изображения
<TABLE>и</TABLE>
создание таблицы
Атрибут BORDERтэга <TABLE>
Выделение каждой ячейки и таблицы в целом рамкой; задание ширины рамки в пикселях
<CAPTION>и</CAPTION>
задает имя (заголовок) таблицы
<CAPTION ALIGN=TOP>
заголовок помещается над таблицей
<CAPTION ALIGN=BOTTOM>
заголовок помещается под таблицей
<TR>и</TR>
строка таблицы
<TD>и </TD>
ячейка таблицы
Атрибут ALIGNтэга <TR>,
может принимать значение LEFT, RIGHT, CENTER
горизонтальное выравнивание соответственно в строках или ячейках по левому краю, по правому краю, посередине
Атрибут WIDTH тэга <TABLE> или <TD>
ширина таблицы или ячейки в процентах от ширины экрана (таблицы) или в пикселях
Атрибут CELLSPACING тэга <TABLE>
ширина рамки вокруг каждой ячейки в пикселях
Атрибут CELLPADDING тэга <TABLE>
устанавливает величину пустых полей между содержимым ячейки и ее рамкой в пикселях
Атрибут VALIGNтэга <TD>
вертикальное выравнивание текста в ячейках строки
АтрибутCOLSPAN тэга <TD>
объединение нескольких соседних ячеек по горизонтали
Атрибут ROWSPANтэга <TD>
объединение нескольких соседних ячеек по вертикали
<FORM>и/FORM>
создание формы
<INPUT TYPE=submit>
создание кнопки отправки
<INPUT TYPE= text>
создание текстового поля
<INPUT TYPE= password>
создание поля ввода пароля
<INPUT TYPE= radio>
создание переключателей
<INPUT TYPE= checkbox>
создание флажков
<INPUT TYPE= hidden>
создает скрытый элемент данных, который не виден пользователю при заполнении формы и передается обработчику без изменений.
<INPUT TYPE= reset>
определяет кнопку, при нажатии на которую форма возвращается в исходное состояние
<Frameset> и </Frameset>
задание фреймов
Атрибуты ROWSи COLS тэга <Frameset>
Определение раскладки фреймов в окне браузера и размера каждого фрейма в пикселах или процентах от размера окна
