Отображение нескольких документов HTML

На рис. 4.2 мы показали внешний вид содержимого нашего авторского компакт-диска, первый выпуск которого появился недавно в продаже.

Рис. 4.2. Авторский компакт-диск

Информация отображается в трех фреймах. Верхний фрейм используется для заголовка, левый выполняет роль оглавления, и, наконец, правый - служит для показа содержимого. Нажимая кнопки, расположенные в левом фрейме, вы можете просматривать в правой части окна различные документы HTML.

В первом выпуске компакт-диска мы не использовали сценарии JavaScript. Сейчас мы покажем, как можно с помощью несложного сценария усовершенствовать интерфейс пользователя.

Мы будем использовать фрейм заголовка, расположенный в верхней части окна, для размещения аннотации на материал, представленный в правом фрейме.

При этом если нажать кнопку с надписью “Добро пожаловать”, в заголовке появится наш логотип, показанный на рис. 4.2. Если же нажать кнопку “Книги” или “Статьи”, заголовок будет выглядеть так, как это показано на рис. 4.3 и 4.4, соответственно.

Рис. 4.3. Просмотр информации о книгах

Рис. 4.4. Просмотр информации о статьях

В листинге 4.5 мы показали исходный текст файла описания фреймов.

Листинг 4.5. Файл chapter4/ourCD/index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

<HEAD>

<TITLE>Авторский диск Александра Фролова и Григория Фролова</TITLE>

</HEAD>

</FRAMESET>

</BODY>

</NOFRAME>

</FRAMESET>

</HTML>

Так же как и в предыдущем примере, здесь описаны три фрейма.

Документ заголовка, который отображается сразу после загрузки фрейма, а также после того как пользователь нажмет кнопку “Добро пожаловать”, показан в листинге 4.6.

Листинг 4.6. Файл chapter4/ourCD/title.html

<HTML>

<HEAD>

    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">

</HEAD>

<BODY BACKGROUND="pic/FFON.GIF" BGCOLOR="#ffffff">

    <P>

    <TABLE >

      <TR>

        <TD VALIGN=TOP><A HREF="emailus.htm" TARGET="main page"><IMG SRC="pic/frlogo3.gif" ALT="Александр Фролов и Григорий Фролов, технические писатели из Москвы" BORDER=0></A>

        <TD VALIGN=TOP><A HREF="emailus.htm" TARGET="main page"><IMG SRC="pic/frlogo.gif" ALT="Александр Фролов и Григорий Фролов, технические писатели из Москвы" BORDER=0></A>

      </TD></TR>

    </TABLE>

    <P>

</BODY>

</HTML>

Файл main.html представлен в листинге 4.7 (в сокращенном виде). Он не имеет никаких интересных особенностей.

Листинг 4.7. Файл chapter4/ourCD/main.html

<HTML>

<HEAD>

    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">

    <TITLE>Untitled</TITLE>

</HEAD>

<BODY BGCOLOR="#FFFFFF">

    <H2>Добро пожаловать!</H2>

    <P>

    <IMG SRC="pic/cd.gif" ALIGN=LEFT HSPACE=5>

    <P>

    Вы приобрели первый выпуск авторского компакт-диска технических писателей Александра Фролова и Григория Фролова.

      . . .

    <P>

    <CENTER><A HREF="copyrihgt.htm" ><I><FONT SIZE=2>© Александр Фролов, Григорий Фролов, 1997   </FONT></I></A></CENTER>

</BODY>

</HTML>

Гораздо важней для нас файл toc.html. В этом файле находятся функции сценария JavaScript и ссылки на другие документы HTML. Этот файл с несущественными сокращениями показан в листинге 4.8.

Листинг 4.8. Файл chapter4/ourCD/toc.html

<HTML>

<BODY BGCOLOR="#B0FFD8">

<SCRIPT LANGUAGE="JavaScript">

    

</SCRIPT>

<FONT FACE="Arial, Helvetica" SIZE=1>

  <P>

<A HREF="javascript:loadPage('main.html', 'title.html');"><IMG SRC="pic/fcd_62.gif" BORDER=0 ALT="Добро пожаловать"></A>

<BR>

<A HREF="javascript:loadPage('books/home.html', 'books/title.html');"><IMG SRC="pic/fcd_82.gif" BORDER=0 ALT="Книги"></A>

<BR>

<A HREF="javascript:loadPage('articles/articles.html', 'articles/title.html');"><IMG SRC="pic/fcd_102.gif" BORDER=0 ALT="Статьи"></A>

<BR>

    . . .

<P>

</BODY>

</HTML>

Функция loadPage загружает в фреймы mainpage и title документы HTML, адреса URL которых передаются ей через параметры. Для загрузки мы устанавливаем свойство location.href для окна соответствующего фрейма:

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

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

Для вызова функции loadPage мы использовали следующую конструкцию:

<A HREF="javascript:loadPage('main.html', 'title.html');"><IMG SRC="pic/fcd_62.gif" BORDER=0 ALT="Добро пожаловать"></A>

Здесь в параметре HREF оператора ссылки <A> после ключевого слова javascript мы расположили строку вызова функции. Обратите внимание на использование одинарных и двойных кавычек. Так как в сценариях JavaScript вложение одинаковых кавычек недопустимо, для строк, передаваемых функции в качестве параметров, мы применили одинарные кавычки. Значение параметра HREF выделено при этом двойными кавычками.

Содержание раздела

Главная сайта