Левый фрейм управления 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>

Листинг 3. Код левого фрейма

Опять же в данном коде можно выделить несколько фрагментов. Первый фрагмент – CSS, основное назначение которого – сделать скруглённые градиентные кнопки. Все кнопки сделаны без рисунков, можно сказать, что на голом CSS+HTML. А итоговый код этих кнопок также элементарный. JS-код представляет собой обработчик нажатий на кнопку, который создаётся в момент прорисовки DOM-дерева (то есть ссылкой-кнопкой является вся область кнопки, а не только текст, как было бы, если бы мы указали тэг <a>). Данный код управляет содержанием главного (правого) фрейма, причём все страницы, что он вызывает, зависят от id элементов.