Проанализируйте решение приведенной ниже задачи.
Разместите на 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>
| Определение раскладки фреймов в окне браузера и размера каждого фрейма в пикселах или процентах от размера окна
|
