- •Отчёт по лабораторным работам №2, №3
- •Оглавление
- •Введение
- •Задание №3. Цель работы
- •Задание
- •Выполнение работы Основной файл frame1.Htm
- •Листинг 2. Код основной страницы
- •Верхний фрейм header.Html
- •Листинг 2. Код верхнего фрейма
- •Левый фрейм управления left.Html
- •Листинг 3. Код левого фрейма
- •Начальный правый фрейм right.Html
- •Листинг 4. Код начального правого фрейма
- •Основная страница about.Html
- •Листинг 5. Код основного фрейма
- •Форма обратной связи form.Html
- •Листинг 6. Код формы Выводы
Листинг 2. Код верхнего фрейма
В данном коде можно выделить 3 ключевых фрагмента. Первый фрагмент – это CSS, который задаёт все стили, такие как вид страницы, её фоновый рисунок и параметры для элементов HTML. Второй ключевой фрагмент – JavaScript код, написанный с использованием фреймворка jQuery, который позволяет легко и просто управлять содержимым страницы. Здесь используется setTimeout, который раз в 5 секунд меняет содержание цитаты на случайное из представленного списка.
Левый фрейм управления left.Html
<html>
<head>
<style type="text/css">
body {
background: url('headerBackground.png') repeat-y;
background-position: 0% 0%;
background-color: #9e4384;
}
.button {
width: 250px; height: 50px; color: white; background-color: #99CF00;
text-align: center; font-size: 30px; line-height: 50px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#99CF00), to(#6DB700));
background: -moz-linear-gradient(19% 75% 90deg,#6DB700, #99CF00);
border-left: solid 1px #c3f83a;
border-top: solid 1px #c3f83a;
border-right: solid 1px #82a528;
border-bottom: solid 1px #58701b;
padding-top: 0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#99CF00), to(#6DB700))
}
.button h3 {
font-size: 20px;
line-height: 35px;
font-family: helvetica, sans-serif;
padding-top: 0px;
margin-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
}
.button p {
font-size: 12px;
padding-top: 0px;
margin-top: 0px;
line-height: 4px;
font-family: helvetica, sans-serif;
}
a {
text-decoration: none;
color: fff;
}
.button:hover {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2EB700), to(#C0C0C0));
background: -moz-linear-gradient(19% 75% 90deg,#C0C0C0, #2EB700);
cursor: pointer;
}
.button2 {
width: 250px; height: 50px; color: white; background-color: #d46d45;
text-align: center; font-size: 30px; line-height: 50px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d46d45), to(#b1432a));
background: -moz-linear-gradient(19% 75% 90deg,#b1432a, #d46d45);
border-top: solid 2px #e28d79;
border-bottom: solid 1px #51281f;
border-right: solid 1px #d46d45;
border-left: solid 1px #d46d45;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
margin-left: 50px;
}
.button2 p {
font-size: 25px;
line-height: 50px;
font-family: 'Trebuchet MS', sans-serif;
padding-top: 0px;
margin-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
}
.button2:hover {
cursor: pointer;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b1432a), to(#d46d45));
background: -moz-linear-gradient(19% 75% 90deg,#d46d45, #b1432a);
border-top: solid 2px #b1432a;
border-bottom: solid 1px #e28d79;
}
</style>
<script type="text/javascript" src="./jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(function() {
$('.button').click(function(){
parent.right.location = ''+$(this).attr('id')+'.html';
});
$('.button2').click(function(){
parent.right.location = 'about.html#'+$(this).attr('id');
});
});
</script>
</head>
<body>
<div class="button" id="right">
<h3>Главная</h3>
<p>страница</p>
</div>
<div class="button" id="about">
<h3>Обо мне</h3>
<p>Оглавление</p>
</div>
<div class="button2" id="bio">
<p>Биография</p>
</div>
<div class="button2" id="work">
<p>Работа</p>
</div>
<div class="button2" id="free">
<p>Отдых</p>
</div>
<div class="button" id="form">
<h3>Форма</h3>
<p>обратной связи</p>
</div>
</body>
</html>