ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ
«САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ТЕЛЕКОММУНИКАЦИЙ ИМ. ПРОФ. М.А. БОНЧ-БРУЕВИЧА»
(СПбГУТ)
ФАКУЛЬТЕТ ИНФОКОММУНИКАЦИОННЫХ СЕТЕЙ И СИСТЕМ (ИКСС)
КАФЕДРА ПРОГРАММНОЙ ИНЖЕНЕРИИ И ВЫЧИСЛИТЕЛЬНОЙ ТЕХНИКИ
(ПИ И ВТ)
ДИСЦИПЛИНА: «Web-технологии»
Лабораторная работа №4.
Разработка HTML-файла, имеющего фреймовую структуру
Выполнил:
Цыганков М.А.
Подпись____________
Принял:
Бузюков Л.Б.
Подпись____________
«_____»________ 2021
Цель работы
Код программы
task.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Фреймы</title>
</head>
<iframeset rows="14%,*"> <iframeset cols="50%,*">
<iframe src="graphics.html" name="GRAPHICS" style = "align-self: center;" width="300"></iframe>
<iframe src="links.html" name="LINKS" scrolling="no" width="300"></iframe> </iframeset>
<br>
<iframeset cols="100%">
<iframe src="content.html" name="CONTENT" width="609" height="163"></frame>
</iframeset>
</iframeset>
</html>
graphics.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Графика</title>
</head>
<body>
<div style="line-height: 120px; text-align: center;">
<img src="logo.jfif" width="235px" style="vertical-align: middle;" /> </div>
</body>
</html>
content.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Переменная область</title>
</head>
<body style="text-align: center;">
Overpass – это карта, которая была введена в пул соревновательных карт спустя некоторое время после выпуска CS:GO,
обретя несколько обновлений, которые кардинально изменили ее структуру. Она также известна своими противоречивыми подсадками,
из-за одной из которых команда Fnatic утратила свое место в плей-офф
DreamHack Winter 2014. После того,
как команда использовала подсадку, которая обеспечила им огромный комбек, приведший к победе в матче,
но привела к негативу всего сообщества, в том числе несколько других профессиональных игроков.
</body>
</html>
links.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Ссылки</title>
</head>
<body>
<ul>
<li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a></li> <li><a href="#">Ссылка 3</a></li>
</ul>
</body>
</html>
Пример работы программы
Код программы
task1.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Фреймы</title>
</head>
<iframeset rows="14%,*"> <iframeset cols="50%,*">
<iframe src="menu.html" name="MENU" style = "align-self: center;" width="300"></iframe>
<iframe src="links.html" name="LINKS" scrolling="no" width="300"></iframe></iframe>
</iframeset>
<br>
<iframeset cols="100%">
<iframe src="content.html" name="CONTENT" width="609" height="163"></frame>
</iframeset>
</iframeset>
</html>
menu.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Меню</title>
</head>
<body>
<div style="line-height: 80px; text-align: center;">
<a href="menu1.html" target="LINKS" style="vertical-align: middle;">Меню 1</a> <a href="menu2.html" target="LINKS" style="vertical-align: middle;">Меню 2</a> <a href="menu3.html" target="LINKS" style="vertical-align:middle;">Меню 3</a>
</div>
</body>
</html>
menu1.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Меню <MENU></title>
</head>
<body>
<div style="line-height: 80px; text-align: center;">
<a href="menup.html" target="CONTENT" style="vertical-align:middle;">Меню 1.
Пункт 1</a>
<a href="menup.html" target="CONTENT" style="vertical-align: middle;">Меню 1.
Пункт 2</a> </div>
</body>
</html>
menup.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Меню <MENU>. Пункт <P_MENU></title>
</head>
<body>
<h1>Меню <MENU>. Пункт <P_MENU></h1> </body>
</html>
Пример работы программы