Пример 7. Сценарий, реализующий работу разворачивающихся абзацев

//Функция разворачивает или сворачивает абзац, на котором щелкнул

//пользователь (если, конечно, абзац для этого предназначен)

function expand(element){

if (element.className == "exp_hidden"){

//Показываем абзац element.className = "expbody";

}

else if (element.className == "expbody"){

//Скрываем элемент element.className = "exp_hidden";

}

}

Приведенная в примере функция expand() скрывает или показывает элемент страницы, ссылка на который передана ей в качестве параметра, путем изменения его стилевого класса (описание используемых стилевых таблиц приведено далее).

Прочие сценарии

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

Первый из указанных сценариев находится в файле load_info.js и выглядит следующим образом (пример 8).

Пример 8. Содержимое файла load_info.Js

/*

Сценарий в этом файле загружает картинки яблок

и рекламные сообщения

*/

//Функция генерации случайного значения (целого)

function rand(min, max){

return Math.floor(Math.random()*(max-min)+min);

}

//Загрузка изображения document.write("<TABLE width = \"100%\" height = \"100%\">");

document.write("<TR><TD><IMG id = \"apple_image\" width = \"100%\"");

document.write("src = \"apples/" + rand(1,14.9) + ".jpg\"></TD></TR>");

//Типа загрузка рекламы...

document.write("<TR><TD>Здесь могла быть Ваша реклама</TD></TR>");

document.write("</TABLE>");

При анализе текста приведенного сценария можно увидеть, что сценарием создается таблица, занимающая все доступное пространство (имеется в виду левая часть страницы). В ячейки этой таблицы и добавляются различные сведения. В данном случае это одна из 14 картинок с изображением яблок в папке apples, а также надпись.

Еще один сценарий используется для заполнения ячейки в нижней части страницы сведениями об авторских правах. Он записан в файле copyright.js и состоит из одной‑единственной строки:

document.write(«© Чиртик Александр 2006»);

Используемые таблицы стилей

В двух CSS‑файлах помещены используемые таблицы стилей. В файле page.css находится таблица стилей, используемая для оформления текста страниц (плюс оформление основной таблицы страниц) (пример 9).

Пример 9. Содержимое файла page.Css

/*

Определения стилей для таблицы, форматирующей страницу

*/

TABLE.main_table {width: 100%; border-style: none;

background-color: green}

COL.info {width: 100px; background-color: rgb(180,255,200)}

COL.content {background-color: rgb(200,255,200)}

TR.copyright {background-color: green; color: white; text-align: right;

padding: 5; font-size: 3mm}

/*

Стили рецептов

*/

.process {font-size: 85%}

.products {font-style: italic; font-size: 85%}

/*

Прочие стили разметки

*/

H1 {text-align: center}

В файле menu.css находится таблица стилей, используемая для оформления пунктов меню и рецептов (пример 10).