3.5 Полученные результаты:
демонстрация.html при вертикальном делении.
рис.5. демонстрация.html при горизонтальном делении.
3.6 Вывод: Приобрели знания и навыки описания простых и сложных таблиц, а также создания простых фреймов в Web-страницах средствами языка HTML.
4. Создание Web-сайта с плавающими и связанными фреймами.
4.1 Цель работы: Приобретение знаний и навыков разработки с использованием языка HTML Web-сайтов с плавающими и перекрестно-связанными фреймами.
4.2 Задание: Разработать Web-сайт с одним управляющим и одним демонстрационным фреймом с вложенным в него плавающем фреймом.
4.3 Математические расчеты:
Расположение управляющего фрейма:
1+1mod4=2 - справа
Цвет управляющего фрейма:
1+1 mod3=2 – зеленый
Цвет демонстрационного фрейма:
1+2 mod3=3 – синий
Размеры плавающего фрейма:
30+10*(1 mod4)=40% - горизонтальный
20+10*(3 mod4)=50% - вертикальный
Параметры выравнивания:
Горизонтально: 1+1 mod2=2 – правый край
Вертикально: 1+1 mod3=2 – середина
4.4 Програмный код:
text.html
<html>
<body bgcolor="blue">
<iframe style="color:green" width="40%" height="50%" align="right" name="frame1" hspase="5"></iframe>
Разpаботать Web-сайт с одним упpавляющим и одним демонстpа-
ционным фpеймом с вложенным в него плавающим фpеймом.
Упpавляющий фpейм должен занимать до 15% площади экpана и в
зависимости от номеpа N автоpа в учебном жуpнале пpимыкать к
гpанице экpана, опpеделяемой выpажением [ 1 + ( N ) mod 4 ],
где pезультат имеет следующий смысл: 1-нижняя, 2-пpавая, 3-
веpхняя и 4-левая гpаницы экpана.
Цвет фона упpавляющего фpейма задается выpажением
[ 1 + ( N ) mod 3 ], где pезультат тpактуется как: 1-кpасный,
2-зеленый, 3-синий цвет.
В упpавляющий фpейм должен быть выведен HTML-документ с фа-
милией, инициалами и номеpом гpуппы автоpа, а также двумя кноп-
ками-гипеpссылками для вывода двух pазных pисунков в плавающий
фpейм.
Демонстpационный фpейм должен занимать оставшуюся часть эк-
pана, в нем должен быть сфоpмиpован плавающий фpейм, а в осталь-
ную часть этого фpейма должен быть выведен HTML-документ с текс-
том настоящего задания и цветом фона [ 1 + ( N + 1 ) mod 3 ] с
указанной выше интеpпpетацией значения.
<iframe style="color:green" width="40%" height="50%" align="right"
Гоpизонтальный pазмеp плавающего фpейма опpеделяется выpаже-
нием [ 30 + 10 * ( N mod 4 ) ] % , а веpтикальный pазмеp выpа-
жением - [ 20 + 10 * (( N + 2 ) mod 4 ) ] % соответствующего
pазмеpа экpана.
Паpаметp выpавнивания плавающего фpейма по гоpизонтали задает-
ся выpажением [ 1 + ( N ) mod 2 ] , где pезультат означает:
1-по левому кpаю, 2-по пpавому кpаю.
Веpтикальное выpавнивание плавающего фpейма опpеделяется выpа-
жением [ 1 + ( N ) mod 3 ] , где pезультат означает: 1-к веpх-
ней гpанице, 2-к сеpедине, 3-к нижней гpанице демонстpационного
фpейма.
Гpафические файлы для вывода в плавающий фpейм автоp подбиpа-
ет из имеющихся в компьютеpе, по своему усмотpению.
</body></html>
ctrl.html
<html>
<body bgcolor="green">
<table align="right" border="0">
<center><b>Артебякин А.А. гр 2220</b></center>
<tr><td width="100"><a href="aaa.jpg" target="frame1"><img src="knop1.jpg"></a></td></tr>
<tr><td width="100"><a href="bbb.jpg" target="frame1"><img src="knop2.jpg"></a></td></tr>
</body></html>
demo.html
<html>
<frameset cols ="85%,*">
<frame src="text.html">
<frame src="ctrl.html">
<NOFRAMES>
<P>Для просмотра этой страницы нужен браузер, поддерживающий фреймы!</p>
<P>Вы можете посмотреть страницу <a href="без_фреймов.htm"> без фреймов</a></p>
</noframes>
</frameset>
</html>
4.5 Полученные результаты:
text.html
ctrl.html
demo.html
4.6 Вывод: Приобрел знания и навыки разработки с использованием языка HTML Web-сайтов с плавающими и перекрестно-связанными фреймами.
5 Создание Web-сайта с навигацией по карте-меню.
5.1 Цель работы: Приобретение знаний и навыков описания с помощью языка HTML Web-страниц с бегущими строками и гиперсвязями по карте-меню.
5.2 Задание: Разработать Web-сайт с управляющим и демонстрационным фреймами, занимающими по 50% площади экрана.
5.3 Математические расчеты:
1+1 mod2=2 горизонтальная ориентация
Форма активной области:
1+1 mod5=2 – четырехугольник
Размер шрифта в пикселях:
20+1 mod20=21
Цвет фона документа:
1+1 mod3=2 – зеленый
Цвет шрифта:
1+(1+1) mod3=3 – синий
5.4 Программный код:
doc1.html
<html>
<body bgcolor="008000" text="blue">
<font size="+21">
<br><marquee direction="left" behavior="slide">группа 2220</marquee></br>
<br><marquee direction="left" behavior="slide">Артебякин</marquee></br>
<br><marquee direction="left" behavior="slide">Александр</marquee></br>
<br><marquee direction="left" behavior="slide">Александрович</marquee></br>
</font>
</body>
</html>
<html>
<body bgcolor="008000" text="blue">
<font size="+21">
<br><marquee direction="left" scrolldelay="200" loop="3">группа_2220</marquee></br>
<br><marquee direction="left" scrolldelay="200" loop="3">Артебякин__</marquee></br>
<br><marquee direction="left" scrolldelay="200" loop="3">Александр______</marquee></br>
<br><marquee direction="left" scrolldelay="200" loop="3">Александрович_</marquee></br>
</font>
</body>
</html>
mapmenu.html
<html>
<body bgcolor="008000">
<img src="x_0a8a8499.jpg" width="215" height="286" usemap="#map1">
<map name="map1">
<area shape="rect" coords="5,5,100,100" href="doc1.html" target="demo">
<area shape="default" href="doc2.html" target="demo">
</map>
</body>
</html>
main.html
<html>
<frameset rows="*,*">
<frame src="mapmenu.html">
<frame src "doc1.html" name="demo">
</frameset>
</html>