Александр Чиртик - HTML: Популярный самоучитель

<TABLE id = «general» class = «hidden»>

<TR id = "general_history" class = "item"

onMouseOver = "general_history.className = 'selected'"

onMouseOut = "general_history.className = 'item'">

<TD><A href = "history.html">История</A></TD>

</TR>

<TR id = "general_values" class = "item"

onMouseOver = "general_values.className = 'selected'"

onMouseOut = "general_values.className = 'item'">

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

</TR>

<TR id = "general_collectsave" class = "item"

onMouseOver = "general_collectsave.className = 'selected'"

onMouseOut = "general_collectsave.className = 'item'">

<TD><A href = "collectsave.html">Сбор и хранение яблок</A></TD>

</TR>

</TABLE>

При просмотре текста примера 14.5 можно увидеть, что текст пунктов меню, как и текст пунктов строки меню, заключен в теги <A> и </A>. Это сделано для упрощения, ведь, кроме навигации (основная функция гиперссылок), других функций на меню не возлагается.

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

Следует отметить один недостаток использованной реализации меню: хотя и подсвечивается вся ячейка таблицы, «срабатывает» пункт меню только при щелчке кнопкой мыши на тексте гиперссылки. Это потому, что внутрь тегов <A> и </A> заключен только текст, а не вся ячейка таблицы. Это сделано лишь для того, чтобы не усложнять еще больше сценарий, создающий меню. Вы можете устранить этот недостаток самостоятельно, изменив фрагменты типа

<TD><A href = «history.html»>История</A></TD>

на

<A href = «history.html»><TD><A href = «history.html»>История</A></TD></A>

Если же просто поместить внутрь элемента A ячейку (не помещая еще и текст), то меню тоже будет работать, но форма указателя над текстом будет уже не та (текстовый I‑указатель).

Разворачивающиеся абзацы

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

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

Собственно так и реализовано представление рецептов на сайте. Фрагмент HTML‑документа, в котором используется описанный подход (разворачивающиеся абзацы), приведен в примере 14.6.

...

<TD class = "content">

<!–Далее идет содержимое страницы–>

<P>Текст страницы...

<P class = "exp" onClick = "expand(recept1_body)">

<A href = "expand" class = "exp_ref"

onClick = "event.returnValue = false;">

Рецепт 1

</A>

<DIV class = "exp_hidden" id = "recept1_body">

<SPAN class = "process">

Порядок приготовления блюда

</SPAN>

<P class = "products">Состав блюда

</DIV>

<P class = "exp" onClick = "expand(recept2_body)">

<A href = "expand" class = "exp_ref"

onClick = "event.returnValue = false;">

Рецепт 2

</A>

<DIV class = "exp_hidden" id = "recept2_body">

<SPAN class = "process">

Порядок приготовления блюда

</SPAN>

<P class = "products">Состав блюда

</DIV>

<P>Прочий текст страницы...

</TD>

...

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

Страница, фрагмент которой приведен в примере 14.6, выглядит так, как показано на рис. 14.3.

Рис. 14.3. Представление рецептов

Работоспособность используемого способа представления рецептов обеспечивает небольшой сценарий (функция), находящийся там же, где и сценарий, отвечающий за всплывающее меню, то есть в файле popup_menu.js (пример 14.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 и выглядит следующим образом (пример 14.8).

/*

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

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

*/

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

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(«&copy; Чиртик Александр 2006»);

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

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

/*

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

*/

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 находится таблица стилей, используемая для оформления пунктов меню и рецептов (пример 14.10).

/*

Стиль строки меню и ее пунктов

*/

.menu_line {border-style: none; background-color: green;

width:100%; text-align: center}

.main_item {background-color: green}

.main_selected {background-color: magenta}

A.main_href {color: rgb(230,230,230); text-decoration: none;

font-family: "times new roman"}

/*

Стиль пунктов меню

*/

.item {background-color: rgb(230,230,230)}

.selected {background-color: magenta}

A.main_href {}

/*

Стили отображаемого и спрятанного меню

*/

.menu {border-style: solid; border-width: 1px;

visibility: visible; position: absolute;

background-color: rgb(230,230,230); border-color: black}

.hidden {display: none}

/*

Определение стилей для разворачиваемых элементов exp – класс элемента, при щелчке кнопкой мыши на котором будет показан соответствующий элемент класса expbody

*/

.exp {background-color: rgb(150, 255, 200)}

.exp_ref {text-decoration: none; font-weight: bold}

.expbody {display: block; background-color: rgb(150, 255, 150)}

.exp_hidden {display: none}

В приведенных таблицах стилей использовано небольшое количество настроек, чтобы слишком не увеличивать размер таблиц.

14.5. Примеры работы сайта

При открытии сайта пользователь попадает на главную (стартовую) страницу (файл index.html), показанную на рис. 14.4.

Рис. 14.4. Главная страница сайта

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

Рис. 14.5. Страница с рецептами

Сами рецепты выглядят так, как показано на рис. 14.6.

Рис. 14.6. Страница с рецептами (сами рецепты)

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

Глава 15

Публикация сайта в Интернете

После того как пройден путь от изучения основ HTML до создания собственного сайта, наступило время выйти в большой мир, то есть опубликовать сайт в Интернете. Для этого нужно узнать еще совсем немного (на первый взгляд): как, где помещается сайт в Сети.