Методика создания компьютерного учебника в формате HTML:

1) Подготовить все разделы учебника (оглавление, названия информационных разделов, главы, параграфы, примеры, контрольные вопросы и т.д.) в текстовом редакторе Word и сохранить из в виде отдельных файлов, например, oglavlenie.doc, title1.doc, title2.doc, …, titleN.doc, ch1. doc, 1.1. doc, 1.2. doc, …, 1.N. doc, ch2. doc, 2.1. doc, 2.2. doc, …, 2.N. doc, …, chN. doc, N.1. doc, N.2. doc, …, N.N. doc.

2) Преобразовать все файлы разделов учебника в формат HTML, для чего использовать опцию меню “Файл\Сохранить в формате HTML”. Например, oglavlenie.html, title1. html, title2. html, …, titleN. html, ch1.html, 1.1.html, 1.2.html, …, 1.N.html, ch2.html, 2.1.html, 2.2.html, …, 2.N.html, …, chN.html, N.1.html, N.2.html, …, N.N.html.

3) Организовать основной загрузочный файл Учебника index.html, из которого будет осуществляться управление Учебником.

В нашем случае создается HTML-файл с именем index.html, который является основным (первоначально загружающимся) файлом компьютерного учебника, из которого осуществляется все дальнейшее управление Учебником.

<html>

<head>

<title>Название учебника</title>

</head>

<frameset FRAMEBORDER=“1” rows=“100,*”>

<frame SCROLLING=“no” NAME=“title” SRC=“title.html” MARGINHEIGHT=“1”>

<frameset FRAMEBORDER=“1” cols=“300,*”>

<frame SCROLLING=“auto” NAME=“oglavlenie” SRC=“oglavlenie.html”>

<frame SCROLLING=“auto” NAME=“main” SRC=“main.html”>

</frameset>

<noframes>

<body BGCOLOR=“#FFFFFF”>

</body>

</noframes>

</frameset>

</html>

В нашем примере мы создаем три фрейма с именами oglavlenie, title и main. Результатом открытия этого файла в браузере является появление окна, представленного на рис. 7.4.

[image]

4) Организовать гипертекстовую среду Учебника. Последним шагом в разработке компьютерного учебника является реализация гиперссылок из фрейма oglavlenie, загружающих соответствующие HTML-документы во фреймы title и main. Для этого следует открыть в программе Блокнот файл oglavlenie.html и вставить в него после тега <body> следующую запись

<P><SCRIPT LANGUAGE=“JavaScript”><!--

function loadPage(szNewURL,szTitle)

{

parent.main.window.location.href=szNewURL;

parent.title.window.location.href=szTitle;

}

// --></SCRIPT>

В каждую строку оглавления, из которой осуществляется гиперссылка к какому-либо информационному разделу, следует вставить запись, указывающую, какие файлы будут загружаться во фреймы main и title:

<A HREF=“javascript:loadPage('Имя html-файла, помещаемого

в фрейм main',' Имя html-файла, помещаемого в фрейм title');”>

Получаем следующий код для файла oglavlenie.html:

<HTML>

<HEAD>

<TITLE>ОГЛАВЛЕНИЕ</TITLE>

</HEAD>

<BODY>

<P><SCRIPT LANGUAGE=“JavaScript”><!--

function loadPage(szNewURL,szTitle)

{

parent.main.window.location.href=szNewURL;

parent.title.window.location.href=szTitle;

}

// --></SCRIPT>

<FONT FACE=“Times New Roman”><P>ОГЛАВЛЕНИЕ</P>

<P><A HREF=“javascript:loadPage('ch1.html','title.html');”>Глава1.</P> </FONT>

<P><A HREF=“javascript:loadPage('1.1.html','title.html');”>1.1.</P>

<P><A HREF=“javascript:loadPage('1.2.html','title.html');”>1.2.</P>

<P><A HREF=“javascript:loadPage('1.N.html','title.html');”>1.N.</P>

<FONT FACE=“Times New Roman”>

<P><A HREF=“javascript:loadPage('ch2.html','title.html');”>Глава 2.</P></FONT>

<P><A HREF=“javascript:loadPage('2.1.html','title.html');”>2.1.</P>

<P><A HREF=“javascript:loadPage('2.2.html','title.html');”>2.2.</P>

<P><A HREF=“javascript:loadPage('2.N.html','title.html');”>2.N.</P>

<FONT FACE=“Times New Roman”>

<P><A HREF=“javascript:loadPage('chN.html','title.html');”>Глава N.</P> </FONT>

<P><A HREF=“javascript:loadPage('N.1.html','title.html');”>N.1.</P>

<P><A HREF=“javascript:loadPage('N.2.html','title.html');”>N.2.</P>

<P><A HREF=“javascript:loadPage('N.N.html','title.html');”>N.N.</P>

</BODY>

</HTML>

После указанной процедуры открытый в браузере основной управляющий файл Учебника index.html, приобретает вид, представленный на рис. 7.5.

[image]