Антон Орлов - Тайны и секреты компьютера
Очень хорошим способом было бы размещение всей информации (например, краткого содержания остальных страниц сайта) на его первой странице так, чтобы она была доступна вся сразу, но без прокрутки. Например, так, как сделано на странице http://antorlov.euro.ru/resurses.htm (рис. 22.8).
Рис. 22.8. Чтобы прочитать реферат статьи, не надо даже ни на что нажимать. Достаточно просто подвести курсор к ее названию.
При заходе на нее в левой части страницы пользователь видит список статей, а справа от списка — небольшое приветствие. Как только он просто наведет, даже не нажмет, курсор мыши на какое-либо название статьи в списке, то на месте приветствия появится краткий реферат статьи. Нажав же на название, он может загрузить архив со статьей. Если посетитель пожелает прочитать статью в online-режиме, то для этого на странице предназначены кнопки справа, ведущие на страницы, содержащие тексты статей.
В результате посетителю, пришедшему на эту страничку, достаточно «пробежать» курсором по списку и, даже не переводя глаза, прочитать все рефераты, чтобы получить полное представление о содержании сайта. Удобно? Да, действительно. Одно движение руки и чтение текста на одном и том же месте — и вся информация сайта вам известна.
Для тех же, кто привык к традиционным длинным прокручивающимся спискам статей с рефератами, предназначена специальная кнопка внизу справа под списком. При нажатии на нее на экране появится новое окно со списком статей, причем появится почти мгновенно, так как список будет не грузиться с сервера, а сгенерируется из содержимого странички.
Как же это реализовать? Использовать возможности VBScript и Dynamic HTML. Скачайте страничку с вышеуказанного адреса и посмотрите, как она устроена. Графики там мало (только фон, портрет и кнопки навигации), так что ее дизайн без графики заметно не изменится.
Для того, чтобы устройство подобной страницы было понятно, приведу краткую ее схему, в которой содержатся основные структурные элементы. Данное пояснение также демонстрирует возможности HTML и языков сценариев.
Вначале — краткое пояснение. Тэг <div> выделяет из основного текста страницы какой-либо фрагмент, которому с помощью этого тэга можно задать какие-либо свойства, назначить скрипт для выполнения. «Onmouseover» — это команда Dynamic HTML, означающая, что другая команда, заключенная в круглые скобки после нее, будет выполняться при наведении курсора мыши на тот обьект, в тэге описания которого команда «Onmouseover» присутствует. Параметр "rowspan=NN" означает слияние между собой ячеек таблицы, расположенных в одной колонке, на протяжении NN строк таблицы. «Id» — это уникальное имя какого-либо обьекта, позволяющее управлять свойствами этого обьекта с помощью скриптов. Обьяснение назначения каждой строки кода — под ней.
<html><head><title></title></head><body>
Заголовок страницы.
<div onmouseover=(document.all.txt0.innerHTML= =document.all.privet.innerHTML)>
Верхняя часть страницы. При наведении курсора на нее текст в правой части таблицы меняется на приветствие.
</div><table width="100 %">
Начало самой таблицы
<tr><td> </td>
Первая колонка, соответствующая названиям статей
<td rowspan=NN>
Создание места для отображения рефератов путем слияния ячеек между собой. Число NN должно быть равно количеству статей плюс один.
<div id=txt0>
Тот самый тэг, содержимое которого будет меняться при наведении курсора на ссылки. Изначально здесь может быть короткий текст, который будет виден во время загрузки страницы — пока она полностью не загрузится.
</div>
<div style="display: none" id=privet>Приветствие</div>
Приветствие посетителю. Оно будет загружаться тогда, когда курсор находится над верхней или нижней частью таблицы, замещая собой текст предыдущего тэга. Само по себе не видно посетителю — это просто "место хранения" текста приветствия.
<SCRIPT FOR=window EVENT=onload LANGUAGE="JScript">
document.all.txt0.innerHTML=document.all.privet.innerHTML;
</SCRIPT>
Этот скрипт исполняется сразу после окончания загрузки страницы и автоматически замещает изначальный текст тэга <div id=txt0> на приветствие, без каких-либо движений курсора.
<div style="display: none">
<div id=txt1>Реферат 1</div>
…
Основное «хранилище» текстов рефератов. Каждая строка типа <div id=txtNN>Реферат NN</div> содержит текст одного реферата. Поскольку перед этой группой строк стоит тэг <div style="display: none">, то посетителю содержимое этих строк не видно — они служат лишь "источником текстов": тексты рефератов берутся отсюда по мере необходимости.
</div></td><td> </td></tr>
Правая часть первой строки таблицы. Содержит описание еще одной колонки — для того, чтобы можно было разместить в правой колонке ссылки на online-варианты статей.
<tr onmouseover=(document.all.txt0.innerHTML= =document.all.txt1.innerHTML)>
<td><a href="file1.zip">Статья 1 — загрузить</a></td>
<td><a href="stat1.htm">Прочитать</a></td></tr>
…
Основной блок сценария. Каждый такой фрагмент описывает одну строку таблицы, строка содержит название статьи, ссылку на ее архив, ссылку на online-вариант статьи, а также команду Dynamic HTML, выпол няющуюся при наведении курсора на строку и заменяющую содержимое видимого тэга <div id=txt0> содержимым соответствующего невидимого тэга <div id=txtNN>Реферат NN</div>.
Таких фрагментов должно стоять друг за другом столько, сколько рефератов и статей представлено на странице. Естественно, в каждом следующем фрагменте ссылки и параметр onmouseover должны быть другими, — document.all.txt0.innerHTML=document.all.txt2.innerHTML и т. д.
</table>
Конец таблицы
<INPUT TYPE=button id=btn1 value="Прочитать все описания">
Кнопка, запускающая скрипт, помещенный ниже. Он выводит содержимое всех тэгов <div id=txtNN>Реферат NN</div> в отдельное окно — чтобы те, что привык читать длинные страницы со списками ресурсов сайта, могли бы прочесть все рефераты в привычной обстановке.
<SCRIPT ID=clientEventHandlersVBS LANGUAGE=vbscript>
Заголовок скрипта. В нем указывается язык скрипта — VBScript.
Sub btn1_onClick()
Означает, что скрипт выполняется при клике на кнопку btn1.
Set nwnd=window.open
Эта команда открывает новое окно браузера и подготавливает его для вывода в него данных.
er="URL сайта"
Адрес сайта, на котором расположены архивы статей (с знаком "/" в конце). Подставляется в адреса для скачивания файлов в тексте открытого нового окна — чтобы можно было сохранить этот текст на жестком диске и впоследствии загрузить файлы.
nwnd.document.writeln ("<html><title>Статьи</title> <body>
Список
")Запись заголовка новой страницы.
nwnd.document.writeln (txtNN.innerHTML+"
<a href="+er+"fileNN.zip> Скачать </a>")…Собственно выведение текстов рефератов в новое окно. Таких строчек должно быть столько же, сколько и рефератов. В каждой строчке должно быть указано соответствующее значение txtNN и fileNN — для каждого реферата.
nwnd.document.writeln ("
Эти статьи доступны на <a href="+er+">сайте</a>
</body></html>")Запись конца страницы.
End Sub
</SCRIPT>
Конец скрипта.
<div onmouseover=(document.all.txt0.innerHTML= =document.all.privet.innerHTML)>
Нижняя часть страницы. При наведении курсора на нее текст в правой части таблицы меняется на приветствие.
</div></body></html>
Конец страницы.
Этот текст является основой, «костяком» страницы. При разработке сайта на эту основу можно добавлять графику, текст, другие скрипты. Так, поскольку Netscape Navigator и остальные браузеры не поддерживают многие возможности Dynamic HTML, то для них не стоило бы скрывать текст рефератов — они ведь тогда не смогут его отобразить! Выход — в небольшом скрипте:
<SCRIPT language="JavaScript">
if (navigator.appName == "Microsoft Internet Explorer")
{
document.write ("<div style="DISPLAY: none">");
}
</SCRIPT>
Этот скрипт нужно расположить на месте тэга "<div style="display: none">" перед текстами рефератов, и тогда они будут скрыты от посетителя тогда и только тогда, когда посетитель использует браузер Microsoft Internet Explorer, поддерживающий Dynamic HTML в полном обьеме. Однако, поскольку в настоящее время браузер Netscape Navigator и другие используется где-то в 5-10 % случаев (данные по счетчику Hotlog на весну 2002 г., рис. 22.9), то лучше использовать только реализацию для Microsoft Internet Explorer, а для Netscape Navigator, Opera и других браузеров сделать отдельную страницу с автоматическим переходом на нее, вставив для этого в самое начало страницы следующий скрипт:
