Чтение онлайн

на главную

Жанры

HTML: Популярный самоучитель
Шрифт:

Чтобы сделать из приведенного в примере 14.1 файла страницу на конкретную тему, достаточно изменить название страницы, а также добавить на нее содержимое (место вставки содержимого указано HTML-комментарием). Страница шаблона выглядит так, как показано на рис. 14.2.

Рис. 14.2. Внешний вид страницы шаблона

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

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

Однако за достигнутую с помощью сценариев универсальность надо платить, прежде всего тем, что пользователи, браузеры которых не поддерживают сценарии (что,

однако, сегодня встречается крайне редко), смогут увидеть только текстовое наполнение страниц. Им будет недоступно меню, без которого в данной реализации сайта недоступна навигация.

Чтобы такого не случилось, можно добавить, например, в начало и конец текста каждой страницы гиперссылку на дополнительную страницу сайта, в которой содержится оглавление в виде гиперссылок. Тогда пользователь «ущербного» браузера сможет перемещаться по страницам сайта. Если же браузер пользователя поддерживает сценарии, то упомянутые гиперссылки целесообразно скрывать, для чего им можно присвоить идентификаторы, например index1, index2, а в один из файлов сценариев вставить следующие строки:

index1.style.display = «none»;

index2.style.display = "none";

Итак, после рассмотрения файла шаблона страниц сайта можно назвать первую причину, по которой все файлы помещаются в одной папке, – это отсутствие необходимости изменения значений атрибутов в тегах <SCRIPT>, <LINK> и <META> каждой новой страницы. Вторая причина станет очевидна при рассмотрении сценария, создающего меню при загрузке страницы.

Реализация меню

Итак, с меню связаны два сценария. Первый находится в файле create_menu.js и записывает в HTML-документ строки, создающие таблицы – раскрывающиеся меню и таблицу строки меню. Рассмотрим содержимое этого файла (пример 14.2).

Пример 14.2. Содержимое файла create_menu.js

/*

Сценарий в этом файле вставляет в документ определение пунктов меню,

а также определение строки главного меню (выполняется при загрузке)

*/

//Определение меню "Информация"

document.write("<TABLE id = \"general\" class = \"hidden\">");

document.write("<TR id = \"general_history\" class = \"item\"");

document.write("onMouseOver = \"general_history.className = 'selected'\"");

document.write("onMouseOut = \"general_history.className = 'item'\">");

document.write("<TD><A href = \"history.html\">История</A></TD>");

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

document.write("<TR id = \"general_values\" class = \"item\"");

document.write("onMouseOver = \"general_values.className = 'selected'\"");

document.write("onMouseOut = \"general_values.className = 'item'\">");

document.write("<TD><A href = \"values.html\">Пищевая ценность яблок</A></TD>");

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

document.write("<TR id = \"general_collectsave\" class = \"item\"");

document.write("onMouseOver = \"general_collectsave.className = 'selected'\"");

document.write("onMouseOut = \"general_collectsave.className = 'item'\">");

document.write("<TD><A href = \"collectsave.html\">Сбор и хранение яблок</A></TD>");

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

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

//Определение меню «Сорта яблок»

document.write("<TABLE id = \"types\" class = \"hidden\">");

document.write("<TR id = \"types_summer\" class = \"item\"");

document.write("onMouseOver = \"types_summer.className = 'selected'\"");

document.write("onMouseOut = \"types_summer.className = 'item'\">");

document.write("<TD><A href = \"summer.html\">Летние</A></TD>");

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

document.write("<TR id = \"types_autumn\" class = \"item\"");

document.write("onMouseOver = \"types_autumn.className = 'selected'\"");

document.write("onMouseOut = \"types_autumn.className = 'item'\">");

document.write("<TD><A href = \"autumn.html\">Осенние</A></TD>");

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

document.write("<TR id = \"types_winter\" class = \"item\"");

document.write("onMouseOver = \"types_winter.className = 'selected'\"");

document.write("onMouseOut = \"types_winter.className = 'item'\">");

document.write("<TD><A href = \"winter.html\">Зимние</A></TD>");

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

document.write("<TR id = \"types_deepwinter\" class = \"item\"");

document.write("onMouseOver = \"types_deepwinter.className = 'selected'\"");

document.write("onMouseOut = \"types_deepwinter.className = 'item'\">");

document.write("<TD><A href = \"deepwinter.html\">Позднезимние</A></TD>");

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

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

//Определение меню «Рецепты»

document.write("<TABLE id = \"recepts\" class = \"hidden\">");

document.write("<TR id = \"recepts_salat\" class = \"item\"");

document.write("onMouseOver = \"recepts_salat.className = 'selected'\"");

document.write("onMouseOut = \"recepts_salat.className = 'item'\">");

document.write("<TD><A href = \"salat.html\">Салаты с яблоками</A></TD>");

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

document.write("<TR id = \"recepts_soup\" class = \"item\"");

document.write("onMouseOver = \"recepts_soup.className = 'selected'\"");

document.write("onMouseOut = \"recepts_soup.className = 'item'\">");

document.write("<TD><A href = \"soup.html\">Супы с яблоками</A></TD>");

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

document.write("<TR id = \"recepts_meat\" class = \"item\"");

document.write("onMouseOver = \"recepts_meat.className = 'selected'\"");

document.write("onMouseOut = \"recepts_meat.className = 'item'\">");

document.write("<TD><A href = \"meat.html\">Мясные блюда с яблоками</A></TD>");

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

document.write("<TR id = \"recepts_fish\" class = \"item\"");

document.write("onMouseOver = \"recepts_fish.className = 'selected'\"");

document.write("onMouseOut = \"recepts_fish.className = 'item'\">");

document.write("<TD><A href = \"fish.html\">Рыбные блюда с яблоками</A></TD>");

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

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

//Определение строки меню

document.write("<TABLE id = \"main_menu1\" class = \"menu_line\">");

document.write("<COL width = \"70\">");

document.write("<COL width = \"100\">");

document.write("<COL width = \"100\">");

document.write("<COL width = \"80\">");

document.write("<COL width = \"*\">");

document.write("<COL width = \"100\">");

document.write("<TR>");

document.write("<TD class = \"main_item\" id = \"main_index\"");

document.write("onMouseOver = \"main_index.className = 'main_selected'\"");

document.write("onMouseOut = \"main_index.className = 'main_item'\">");

document.write("<A href = \"index.html\" class = \"main_href\">Главная</A>");

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

document.write("<TD class = \"main_item\" id = \"main_general\"");

document.write("onClick = \"show_menu(general, main_menu1, main_general)\"");

document.write("onMouseOver = \"main_general.className = 'main_selected'\"");

document.write("onMouseOut = \"main_general.className = 'main_item'\">");

document.write("<A href = \"general\" class = \"main_href\" ");

document.write("onClick = \"event.returnValue = false\">");

document.write("Информация</A>");

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

document.write("<TD class = \"main_item\" id = \"main_types\"");

document.write("onClick = \"show_menu(types, main_menu1, main_types)\"");

document.write("onMouseOver = \"main_types.className = 'main_selected'\"");

document.write("onMouseOut = \"main_types.className = 'main_item'\">");

document.write("<A href = \"types\" class = \"main_href\" onClick = \"");

document.write("event.returnValue = false\">");

document.write("Сорта

яблок</A>");

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

document.write("<TD class = \"main_item\" id = \"main_recepts\"");

document.write("onClick = \"show_menu(recepts, main_menu1, main_recepts)\"");

document.write("onMouseOver = \"main_recepts.className = 'main_selected'\"");

document.write("onMouseOut = \"main_recepts.className = 'main_item'\">");

document.write("<A href = \"recepts\" class = \"main_href\" onClick = \"");

document.write("event.returnValue = false\">");

document.write("Рецепты</A>");

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

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

document.write("<TD class = \"main_item\" id = \"main_about\"");

document.write("onMouseOver = \"main_about.className = 'main_selected'\"");

document.write("onMouseOut = \"main_about.className = 'main_item'\">");

document.write("<A href = \"about.html\" class = \"main_href\"> О проекте</A>");

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

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

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

Приведенный пример является самым объемным в этой книге, однако его суть довольно проста. Вначале в документ записывается HTML-код создания трех таблиц, соответствующих раскрывающимся меню (идентификаторы таблиц: general, types, recepts). Четвертая таблица, добавляемая в документ сценарием, является строкой меню. Начнем рассмотрение именно с нее.

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

Пример 14.3. Таблица строки меню

<TABLE id = «main_menu1» class = «menu_line»>

<COL width = "70">

<COL width = "100">

<COL width = "100">

<COL width = "80">

<COL width = "*">

<COL width = "100">

<TR>

<TD class = "main_item" id = "main_index"

onMouseOver = "main_index.className = 'main_selected'"

onMouseOut = "main_index.className = 'main_item'">

<A href = "index.html" class = "main_href">Главная</A>

</TD>

<TD class = "main_item" id = "main_general"

onClick = "show_menu(general, main_menu1, main_general)"

onMouseOver = "main_general.className = 'main_selected'"

onMouseOut = "main_general.className = 'main_item'">

<A href = "general" class = "main_href"

onClick = "event.returnValue = false">

Информация

</A>

</TD>

<TD class = "main_item" id = "main_types"

onClick = "show_menu(types, main_menu1, main_types)"

onMouseOver = "main_types.className = 'main_selected'"

onMouseOut = "main_types.className = 'main_item'">

<A href = "types" class = "main_href" onClick = "

event.returnValue = false">

Сорта яблок

</A>

</TD>

<TD class = "main_item" id = "main_recepts"

onClick = "show_menu(recepts, main_menu1, main_recepts)"

onMouseOver = "main_recepts.className = 'main_selected'"

onMouseOut = "main_recepts.className = 'main_item'">

<A href = "recepts" class = "main_href" onClick = "

event.returnValue = false">

Рецепты

</A>

</TD>

<TD></TD><!–Эта ячейка просто занимает место–>

<TD class = "main_item" id = "main_about"

onMouseOver = "main_about.className = 'main_selected'"

onMouseOut = "main_about.className = 'main_item'">

<A href = "about.html" class = "main_href"> О проекте</A>

</TD>

</TR>

</TABLE>

Как можно увидеть, строка меню во многом аналогична той, что была создана в предыдущей главе. Исключением является использование гиперссылок вместо обработки событий onClick для пунктов Главная и О проекте. Конечно, можно было бы осуществлять переход к страницам для этих пунктов при обработке события onClick с использованием объекта location, но зачем? Ведь для простого перехода к другой странице проще использовать стандартную обработку выбора пользователем гиперссылки. Да и к тому же не нужно заботиться о форме указателя, когда он находится над текстом пункта меню.

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

Подсветка выделенных пунктов меню осуществляется за счет назначения ячейкам таблицы соответствующего стилевого класса при обработке событий onMouseOver (ячейка выделяется, включается подсветка) и onMouseOut (подсветка убирается).

При выборе одного из пунктов Информация, Сорта, Рецепты обработчиком события onClick вызывается функция show_menu, показывающая меню возле выбранного пункта. Эта функция вместе с функцией hide_menu находится в файле popup_menu.js. Они приводятся в примере 14.4.

Пример 14.4. Сценарий, показывающий и скрывающий всплывающее меню

var lastMenu = null; //Прошлое показанное меню

//Функция показывает меню function show_menu(menu, main_menu, item){

if (menu.className == "menu"){

//Закрываем открытое меню hide_menu;

return;

}

//Скрываем прошлое меню hide_menu;

//Определяем положение меню menu.className = "menu";

menu.style.top = main_menu.offsetTop + main_menu.clientHeight;

menu.style.left = main_menu.offsetLeft + item.offsetLeft;

lastMenu = menu;

//Сделаем так, чтобы до BODY событие onClick не дошло event.cancelBubble = true;

}

//Функция скрывает меню, открытое ранее

function hide_menu{

if (lastMenu != null){

lastMenu.className = "hidden";

lastMenu = null;

}

}

Поделиться:
Популярные книги

Черный Маг Императора 13

Герда Александр
13. Черный маг императора
Фантастика:
попаданцы
аниме
сказочная фантастика
фэнтези
5.00
рейтинг книги
Черный Маг Императора 13

Последняя Арена 4

Греков Сергей
4. Последняя Арена
Фантастика:
рпг
постапокалипсис
5.00
рейтинг книги
Последняя Арена 4

Маяк надежды

Кас Маркус
5. Артефактор
Фантастика:
городское фэнтези
попаданцы
аниме
5.00
рейтинг книги
Маяк надежды

Великий перелом

Ланцов Михаил Алексеевич
2. Фрунзе
Фантастика:
попаданцы
альтернативная история
5.00
рейтинг книги
Великий перелом

Сопротивляйся мне

Вечная Ольга
3. Порочная власть
Любовные романы:
современные любовные романы
эро литература
6.00
рейтинг книги
Сопротивляйся мне

Инквизитор Тьмы 2

Шмаков Алексей Семенович
2. Инквизитор Тьмы
Фантастика:
попаданцы
альтернативная история
аниме
5.00
рейтинг книги
Инквизитор Тьмы 2

Мастер Разума V

Кронос Александр
5. Мастер Разума
Фантастика:
городское фэнтези
попаданцы
5.00
рейтинг книги
Мастер Разума V

Бандит 2

Щепетнов Евгений Владимирович
2. Петр Синельников
Фантастика:
боевая фантастика
5.73
рейтинг книги
Бандит 2

Истребители. Трилогия

Поселягин Владимир Геннадьевич
Фантастика:
альтернативная история
7.30
рейтинг книги
Истребители. Трилогия

Гардемарин Ее Величества. Инкарнация

Уленгов Юрий
1. Гардемарин ее величества
Фантастика:
городское фэнтези
попаданцы
альтернативная история
аниме
фантастика: прочее
5.00
рейтинг книги
Гардемарин Ее Величества. Инкарнация

Падение Твердыни

Распопов Дмитрий Викторович
6. Венецианский купец
Фантастика:
попаданцы
альтернативная история
5.33
рейтинг книги
Падение Твердыни

"Дальние горизонты. Дух". Компиляция. Книги 1-25

Усманов Хайдарали
Собрание сочинений
Фантастика:
фэнтези
боевая фантастика
попаданцы
5.00
рейтинг книги
Дальние горизонты. Дух. Компиляция. Книги 1-25

Ох уж этот Мин Джин Хо 2

Кронос Александр
2. Мин Джин Хо
Фантастика:
попаданцы
5.00
рейтинг книги
Ох уж этот Мин Джин Хо 2

Энфис 6

Кронос Александр
6. Эрра
Фантастика:
героическая фантастика
рпг
аниме
5.00
рейтинг книги
Энфис 6