Интернет-журнал 'Домашняя лаборатория', 2007 №3 - Живцов
Шрифт:
Интервал:
Закладка:
<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>Peфepaт 1</div>
Основное "хранилище" текстов рефератов. Каждая строка типа <div id=txtNN>Peфepaт 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="filel.zip">Статья 1 — Загрузить</a></td>
<td><a href="statl.htm">Прочитать</а></td></tr>
Основной блок сценария. Каждый такой фрагмент описывает одну строку таблицы, строка содержит название статьи, ссылку на ее архив, ссылку на online-вариант статьи, а также команду Dynamic HTML, выполняющуюся при наведении курсора на строку и заменяющую содержимое видимого тэга <div id=txt0> содержимым соответствующего невидимого тэга <div id=txtNN>Peфepaт NN</div>.
Таких фрагментов должно стоять друг за другом столько, сколько рефератов и статей представлено на странице. Естественно, в каждом следующем фрагменте ссылки и параметр onmouseover должны быть другими, document.all.txt0.innerHTML=document.all.txt2.innerHTML и т. д.
</table>
Конец таблицы
<INPUT TYPE=button id=btn1 value="прочитать все описания">
Кнопка, запускающая скрипт, помещенный ниже. Он выводит содержимое всех тэгов <div id=txtNN>Peфepaт NN</div> в отдельное окно — чтобы те, что привык читать длинные страницы со списками ресурсов сайта, могли бы прочесть все рефераты в привычной обстановке.
<SCRIPT ID=clientEventHandlersVBS LANGUAGE=vbscript>
Заголовок скрипта. В нем указывается язык скрипта — VBScript.
Sub btn1_onClick()
Означает, что скрипт выполняется при клике на кнопку btn1.
Set nwnd=window.open
Эта команда открывает новое окно браузера и подготавливает его для вывода в него данных.
er="URL сайта"
Адрес сайта, на котором расположены архивы статей (с знаком "/" в конце). Подставляется в адреса для скачивания файлов в тексте открытого нового окна — чтобы можно было сохранить этот текст на жестком диске и впоследствии загрузить файлы.
nwnd.document.writeln ("<htm1><title>Статьи</title> <body><p>Список</p>")
Запись заголовка новой страницы.
nwnd.document.writeln (txtNN.innerHTML+"</p> <a href="+er+"fileNN.zip> Скачать </a>")…
Собственно выведение текстов рефератов в новое окно. Таких строчек должно быть столько же, сколько и рефератов. В каждой строчке должно быть указано соответствующее значение txtNN и fileNN — для каждого реферата.
nwnd.document.writeln ("<р>Эти статьи доступны на <а href="+er+ ">caйте</a></p></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 и других браузеров сделать отдельную страницу с автоматическим переходом на нее, вставив для этого в самое начало страницы следующий скрипт:
<SCRIPT LANGUAGE="JAVASCRIРТ">
if (navigator.appName != "Microsoft Internet Explorer")
{
window.location.replace("Cтpaницa_для_NN.htm");
}
</SCRIPT>
Для Netscape Navigator можно использовать традиционную структуру страницы без использования вышеописанных возможностей.
Рис. 22.9. Статистика использования браузеров
Затемняющиеся иконки
Один из основных законов так называемого "usability" — принципов создания удобных вещей, в данном случае web-сайтов, гласит, что интерфейс объекта, с которым работает пользователь, должен быть ему знакомым. То есть, в данном случае, — зайдя на web-страницу, посетитель не должен гадать и думать, для чего предназначен тот или иной ее элемент. Достигнуть этого можно с помощью похожести интерфейса web-страницы на какой-нибудь другой, привычный пользователю. Например, интерфейс операционной системы.
Наверняка все, работающие с Windows 98 и более старшими версиями этой операционной системы, помнят о возможности настроить вид папок так, что при наведении курсора иконка файла будет
