На главной странице располагаются часы (текущее время), кнопки перехода («История колледжа», «Приступить к изучению»), также название электронного учебника.
Для того, чтобы понять как все это получилось необходимо посмотреть HTML код страницы:
<HTML><HEAD><TITLE>Информационнаябезопасность</TITLE><script language="JavaScript">function JSClock() {var time = new Date() var hour = time.getHours() var minute = time.getMinutes() var second = time.getSeconds() var temp = "" + hour
temp += ((minute < 10) ? ":0" : ":") + minute temp += ((second < 10) ? ":0" : ":") + second
document.clockForm.digits.value = temp id = setTimeout("JSClock()",1000) }</script>
</head><body onLoad="JSClock()"BGCOLOR=lightgrey> <form name="clockForm"><center>Текущеевремя: <input type="text" name="digits" size="8" value=""></center></form>
<a href=histori.html><img src=истор.jpg align=left alt="ИсторияНППК" border=0></a>
<BR><BR><BR><center><font size=7 face="Comic Sans MS" color="darkblue"> Информационнаябезопасность</font></center><BR><BR><BR><BR>
<a href="фрейм.html"><img src="изучить.jpg" align=left alt="Приступитькизучению" border=0></a><BR><BR><BR><BR><br><br><br><br> <font size=3 face="Comic Sans MS"><P align=right> Разработчик: ГригорьеваАнна. </P></font></BODY></HTML>
Эта страница создана с помощью фреймов
<HTML><HEAD><TITLE>Информационная безопасность</TITLE>
<FRAMESET ROWS="10%,*%" frameborder=1 framespacing=1>
<FRAME NAME="head" SRC="head.html">
<FRAMESET COLS="20%,80%">
<FRAME NAME="index" src="index.HTML">
<FRAME NAME="main" src="main.HTML"></FRAMESET></HEAD></HTML>
Здесь происходит разделение страницы на три части, в каждой из которых находится соответствующая информация. В верхнем фрейме располагается название электронного учебника (заголовок) и кнопка перехода на главную страницу, в левом – список, с помощью которого осуществляется переход на соответствующую страницу, в правом открывается информация при нажатии соответствующей темы из левого фрейма.
Рассмотрим код каждой части фрейма в отдельности:
Верхний фрейм (заголовок учебника):
<HTML><HEAD><TITLE>Информационная безопасность</TITLE>
<BODYBGCOLOR=lightgrey>
<ahref="главная.html" target="_top"><imgsrc=к1.jpgalign=leftalt="на главную страницу"border=0></a><h1 align="center">Информационная безопасность</h1>
</HEAD></HTML>
В этом коде прописано заголовок страницы, цвет фона, кнопка перехода и название учебника.
Левыйфрейм:
<HTML><BODY BGCOLOR=lightgrey>
<HEAD><style>DIV.clTop{position:absolute; width:170}
DIV.clSub{position:absolute; left:10; width:170}
#divCont{position:relative; left:1; top:0; height:600; width:170;}
A.clMain{font-family:Book Antiqua; font-size:14px; text-decoration:none; font-weight:bold; color:202020}A.clSubb{font-family:Book Antiqua; font-size:12px; text-decoration:none; color:darkblue}#divMain{position:absolute}
</style><script language="JavaScript">
var stayFolded=false
var unImg=new Image(); unImg.src='arrow.gif'
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;
var browser=((n || ie) && parseInt(navigator.appVersion)>=4)
function makeMenu(obj,nest){ nest=(!nest) ? '':'document.'+nest+'.'
this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')
this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('document');
this.height=n?this.ref.height:eval(obj+'.offsetHeight')
this.x=(n)? this.css.left:this.css.pixelLeft;this.y=(n)? this.css.top:this.css.pixelTop;
this.hideIt=b_hideIt; this.showIt=b_showIt; this.vis=b_vis; this.moveIt=b_moveIt return this}
function b_showIt(){this.css.visibility="visible"}
function b_hideIt(){this.css.visibility="hidden"}
function b_vis(){if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true;}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
function init(){
oTop=new Array()
oTop[0]=new makeMenu('divTop1','divCont')
oTop[1]=new makeMenu('divTop2','divCont')
oTop[2]=new makeMenu('divTop3','divCont')
oTop[3]=new makeMenu('divTop4','divCont')
oTop[4]=new makeMenu('divTop5','divCont')
oSub=new Array()
oSub[0]=new makeMenu('divSub1','divCont.document.divTop1')
oSub[1]=new makeMenu('divSub2','divCont.document.divTop2')
oSub[2]=new makeMenu('divSub3','divCont.document.divTop3')
oSub[3]=new makeMenu('divSub4','divCont.document.divTop4')
oSub[4]=new makeMenu('divSub5','divCont.document.divTop5')
for(i=0;i<oSub.length;i++){ oSub[i].hideIt() }for(i=1;i<oTop.length;i++){ oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) }}
function menu(num){if(browser){if(!stayFolded){
for(i=0;i<oSub.length;i++){if(i!=num){oSub[i].hideIt()
oTop[i].ref["imgA"+i].src=unImg.src}}for(i=1;i<oTop.length;i++){oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)}}if(oSub[num].vis()){oSub[num].showIt()
oTop[num].ref["imgA"+num].src=exImg.src}else{oSub[num].hideIt()oTop[num].ref["imgA"+num].src=unImg.src}for(i=1;i<oTop.length;i++){if(!oSub[i-1].vis()) oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height+oSub[i-1].height)else oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height</script></HEAD><body text="#202020" bgcolor="ivory" link="#0000FF" vlink="#FFA500" alink="#FF000" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">
<!-- МЕНЮ--><div id="divCont"><div id="divTop1" class="clTop">
<a href="#" onclick="menu(0); return false" class="clMain">
<img src="arrow.gif" name="imgA0" width=12 height=12 alt="" border="0">
Информационная безопасность. Основные положения</a><br>
<div id="divSub1" class="clSub"><br>
<h3><ahref="2.html" target="main" class="clSubb">-Основные составляющие национальных интересов РФ.</a><br></h3>
<h3><ahref="3.html" target="main" class="clSubb">-Интересы государства, общества, личности.</a><br></h3>
<h3><a href="4.html" target="main" class="clSubb">-Информация. Свойства информации, пути получения.</a><br></h3>
<h3><a href="1.html" target="main" class="clSubb">-Организационные, физико-технические, информационные, программно-математические угрозы. </a><br></h3>
<h3><a href="31.html" target="main" class="clSubb">-Комплексное обеспечение ИБ государства.</a><br></h3>
<h3><a href="32.html" target="main" class="clSubb">-Основные функции системы обеспечения ИБ РФ.</a><br></h3>
<h3><a href="33.html" target="main" class="clSubb">-Внутренние и внешние источни-ки угроз ИБ РФ.</a><br></h3>
</div><br></div><div id="divTop2" class="clTop">
<a href="#" onclick="menu(1); return false" class="clMain">
<img src="arrow.gif" name="imgA1" width=12 height=12 alt="" border="0">
Защитаинформации</a><br><div id="divSub2" class="clSub"><br> <h3> <a href="5.html"target="main" class="clSubb">-ЭлементыиобъектызащитыинформационнойдеятельностииобеспеченияИБ</a></h3><h3><a href="6.html"target="main" class="clSubb">-Технологииобеспечениябезопасностиобработкиинформации.</a></h3>
<h3><a href="7.html" target="main" class="clSubb">-ТехнологиипредотвращенияугрозИБ.</a></h3><h3><a href="8.html" target="main" class="clSubb">-Методыисредствапарированияугроз.
</a></h3><h3><a href="9.html" target="main" class="clSubb">-Методыисредстванейтрализацииугроз.</a></h3></div><br></div><div id="divTop3" class="clTop">
<a href="#" onclick="menu(2); return false" class="clMain">
<img src="arrow.gif" name="imgA2" width=12 height=12 alt="" border="0">
Криптографические методы и средства обеспечения ИБ</a><br>
<divid="divSub3" class="clSub"><br><h3> <ahref="10.html"target="main" class="clSubb">-Криптология и этапы ее развития. </a></h3><h3> <a href="11.html"target="main" class="clSubb">-Шифрованиезаменой (подстановка). Монофоническаязамена.</a></h3>
<h3> <a href="12.html"target="main" class="clSubb">-Шифрованиеметодомперестановки. </a></h3><h3>
<a href="13.html"target="main" class="clSubb">-Шифрование с помощью аналитических преобразований. Шифрование методом гаммирования. </a></h3>
<h3> <a href="14.html"target="main" class="clSubb">-Комбинированные методы шифрования. Кодирование. Другие виды криптографического закрытия информации. </a></h3>
<h3> <ahref="15.html"target="main" class="clSubb">-Системы с открытым ключом. </a></h3>
<h3> <a href="16.html"target="main" class="clSubb">-Электроннаяцифроваяподпись. Распределениеключей. </a></h3></div><br> </div>
<div id="divTop4" class="clTop"><a href="" onclick="menu(3); return false" class="clMain">
<img src="arrow.gif" name="imgA3" width=12 height=12 alt="" border="0">
Компьютерные вирусы и антивирусные программы </a><br>
<div id="divSub4" class="clSub">
<br> <h3><a href="17.html" target="main" class="clSubb">-Вирусы.</a></h3>
<h3><a href="18.html" target="main" class="clSubb">-Классификациявирусов.Строениевируса.</a></h3><h3><a href="19.html" target="main" class="clSubb">-Способызараженияпрограмм. Как работает вирус. Признаки заражения компьютера вирусами.</a></h3>
<h3><a href="20.html" target="main" class="clSubb">-Методы и технологии борьбы с компьютерными вирусами. Обнаружение вирусов и удаление последствий.</a></h3>
<h3><ahref="21.html" target="main" class="clSubb">-Виды антивирусных программ.</a></h3>
</div><br> </div><div id="divTop5" class="clTop">
<a href="" onclick="menu(4); return false" class="clMain">
<img src="arrow.gif" name="imgA4" width=12 height=12 alt="" border="0">
Прочее</a><br><div id="divSub5" class="clSub"><br>
<h3><a href="Условныеобозначения.html"target="main" class="clSubb">-Условныеобозначения</a></h3></div><br><br><br><br> <a href="27.html" target="main"><img src=тест.jpg align=left alt="пройтитест" border=0></a></div></div>
</HEAD></HTML>
В данном коде прописывается принцип работа раскрывающегося списка, также прописана кнопка перехода на страницу с тестом.
Тест был разработан таким образом, что при ответах не на все вопросы результат тестирования не выдается
В правом фрейме, как уже было сказано выше, открываются страницы из левого фрейма.
Не следует выпускать из внимания кнопки перехода, которые создавались в графическом редакторе Paint.NET
Основной задачей при выборе кнопки перехода был выбор графического вида, это обоснованно тем, что кнопка перехода не должна выпадать из общей концепции учебника. Таким образом, мною было принято решение выбрать кнопку перехода такого вида
Далее рисунок кнопки загружается в Paint.NET и в последующем создается фон, на котором находится кнопка, и пишется название кнопки, при этом мною был выбран шрифт для текста кнопки – Monotype Corsiva.
С помощью этих кнопок создается навигация по электронному учебнику.