Антон Орлов, http://antorlov.nm.ru
В этой
небольшой заметке будет рассказано о
двух интересных приемах в Web-дизайне,
основанных на использовании технологий
Dynamic HTML и VBScript. Эти приемы могут быть
полезными web-мастерам небольших сайтов,
позволяя сделать свои творения более
удобными и приятными для посещения.
Часть 1.
Представим себе, что
нам надо разработать сайт, содержащий
научные статьи по различным областям,
скажем, медицины. Статей немного - всего
десять-пятнадцать штук, но необходимо
обеспечить удобство посетителя при
работе с сайтом, и, поскольку статьи
большие, дать каждой краткое описание ее
содержания - реферат, поскольку
загружать все статьи посетителю вряд ли
потребуется. Возникает вопрос - а как
разместить на сайте эти рефераты и
список статей? На одной заглавной
странице? Но тогда она получится очень
большая, и ее придется прокручивать, что,
во-первых, потребует от посетителя
лишних движений мышью или нажатий на
клавиши, а, во-вторых, приведет к
трудности восприятия всего обьема
информации на странице. Или разместить
каждый реферат на своей странице (или
даже на специальной странице с
рефератами)? Но тогда для перехода на
страницу с рефератом посетителю
придется нажимать мышью ссылку, что, во-первых,
требует лишних действий, а, во-вторых, и
это главное, уводит посетителя с главной
страницы, а он может затем туда и не
вернуться, и не посмотреть остальные
разделы сайта. Как же быть? Как
обеспечить удобство работы с насыщенной
информацией главной страницей сайта?
Очень хорошим способом было бы
размещение всей информации (например,
краткого содержания остальных страниц
сайта) на его первой странице так, чтобы
она была доступна вся сразу, но без
прокрутки. Например, так, как сделано на
страницах http://antorlov.nm.ru/statistc.htm
и http://antorlov.nm.ru/resurses.htm.
При заходе, например, на страницу http://antorlov.nm.ru/resurses.htm
в левой части страницы пользователь
видит список статей, а справа от списка -
небольшое приветствие. Как только он
просто наведет, даже не нажмет, курсор
мыши на какое-либо название статьи в
списке, то на месте приветствия появится
краткий реферат статьи. Нажав же на
название, он может загрузить архив со
статьей:

Если посетитель
пожелает прочитать статью в online-режиме,
то для этого предназначены кнопки
справа, ведущие на страницы, содержащие
тексты статей.
В результате посетителю,
пришедшему на эту страничку, достаточно
"пробежать" курсором по списку и,
даже не переводя глаза, прочитать все
рефераты, чтобы получить полное
представление о содержании сайта.
Удобно? Да, действительно. Одно движение
руки и чтение текста на одном и том же
месте - и вся информация сайта вам
известна.
Для тех же, кто привык к
традиционным длинным прокручивающимся
спискам статей с рефератами,
предназначена специальная кнопка внизу
справа под списком. При нажатии на нее на
экране появится новое окно со списком
статей, причем оно появится мгновенно,
так как список будет не грузиться с
сервера, а сразу сгенерируется из
содержимого странички:

Как же это
реализовать? Использовать возможности
VBScript и Dynamic HTML. Скачайте страничку с
вышеуказанного адреса и посмотрите, как
она устроена. Графики там мало (только
фон, портрет и кнопки навигации), так что
ее дизайн без графики заметно не
изменится.
Для того, чтобы вам была лучше
понятно устройство подобной страницы,
приведу краткую ее схему, в которой
содержатся основные структурные
элементы. Вначале - краткое пояснение
для тех, кто пока еще мало знаком с HTML.
Тэг <div> выделяет из основного текста
страницы какой-либо фрагмент, которому с
помощью этого тэга можно задать какие-либо
свойства, назначить скрипт для
выполнения. Символы <!-- - это
комментарии в тексте страницы: все, что
заключено между тэгами <!-- и -->, браузером
игнорируется. В тексте скрипта на VBScript
такую же роль играет апостроф в начале
строки. "Onmouseover" - это команда Dynamic HTML,
означающая, что другая команда,
заключенная в круглые скобки после нее,
будет выполняться при наведении курсора
мыши на тот обьект, в тэге описания
которого команда "Onmouseover"
присутствует. Параметр "rowspan=NN"
означает слияние между собой ячеек
таблицы, расположенных в одной колонке,
на протяжении NN строк таблицы. "Id" -
это уникальное имя какого-либо обьекта,
позволяющее управлять свойствами этого
обьекта с помощью скриптов. Ну, а для
описания всех команд Dynamic HTML и VBScript
обьема этой заметки не хватит - если эта
тема вас заинтересует, воспользуйтесь
специальной литературой.
<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>
<!--Приветствие посетителю.
Будет загружаться тогда, когда курсор
находится над верхней или нижней частью
таблицы, замещая собой текст
предыдущего тэга. Само по себе не видно
посетителю - это просто "место
хранения" текста приветствия.-->
</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=txt2>Реферат 2</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"><img
src="o.gif">
</a></td></div></tr>
<tr onmouseover=(document.all.txt0.innerHTML=document.all.txt2.innerHTML)>
<td><a href="file2.zip">Статья
1</a></td><td><a href="stat2.htm"><img
src="o.gif">
</a></td></div></tr>
...
<!-- Каждая строка содержит
название статьи, ссылку на ее архив,
ссылку на online-вариант статьи, а также
команду Dynamic HTML, выполняющуюся при
наведении курсора на строку и
заменяющую содержимое видимого тэга <div
id=txt0> содержимым соответствующего
невидимого тэга <div id=txtNN>Реферат NN</div>.-->
</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 сайта"
'URL сайта, на котором
расположены архивы статей (с знаком
"/" в конце). Подставляется в адреса
для скачивания файлов в тексте
открытого нового окна - чтобы можно было
сохранить этот текст на жестком диске и
впоследствии загрузить файлы.
nwnd.document.writeln ("<html><title>Статьи</title><body><p>Список</p>")
'Запись заголовка новой
страницы
nwnd.document.writeln (txtNN.innerHTML+"</p>
<a href="+er+"fileNN.zip> Скачать </a>")
...
'Собственно выведение текстов
рефератов в новое окно. Таких строчек
должно быть столько же, сколько и
рефератов. В каждой строчке должно быть
указано соответствующее значение txtNN и
fileNN - для каждого реферата.
nwnd.document.writeln ("<p>Эти
статьи доступны на <a href="+er+">сайте</a>
</p></body></html>")
'Запись конца страницы
End Sub
</SCRIPT>
<!--Конец скрипта-->
<div onmouseover=(document.all.txt0.innerHTML=document.all.privet.innerHTML)>
<!--Нижняя часть страницы. При
наведении курсора на нее текст в правой
части таблицы меняется на приветствие.-->
</div></body></html>
<!-- Конец страницы.-->
Этот текст является
основой, "костяком" страницы. При
разработке собственного сайта на эту
основу можно добавлять нужные графику,
текст, другие скрипты. Страницы, адреса
которых помещены выше, устроены
несколько более сложно, чем описанная
выше страница, - там добавлен еще один
скрипт, о котором речь пойдет ниже, а
также обеспечена определенная
совместимость страниц с браузерами,
отличными от Microsoft Internet Explorer. Так,
поскольку 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 и другие используется
где-то в 15% случаев (данные по счетчику
SpyLog), то лучше использовать только
реализацию для Microsoft Internet Explorer, а для
Netscape Navigator и других браузеров сделать
отдельную страницу с автоматическим
переходом на нее, вставив для этого в
самое начало страницы следующий скрипт:
<SCRIPT LANGUAGE="JAVASCRIPT">
if (navigator.appName != "Microsoft Internet
Explorer")
{
document.write("</body></html>")
window.location.replace("Страница_для_NN.htm");
};
</SCRIPT>
Функция
window.location.replace запрещает помещать адрес
первой страницы в список посещенных
сайтов ("историю"), что
предотвращает неприятную ситуацию,
когда посетитель, желающий перейти на
предыдущий посещенный им сайт с помощью
кнопки Back, вновь и вновь
перенаправляется с предыдущей страницы,
содержащей перенаправление, на ту, где
он находится. На странице для Netscape Navigator
можно использовать традиционную
структуру страницы без использования
вышеописанных возможностей.
Посетите страницы http://antorlov.nm.ru/statistc.htm,
http://antorlov.nm.ru/resurses.htm
и изучите их структуру. Надеюсь, что эта
идея пригодится вам при разработке
ваших сайтов.
Часть 2.
Если на сайте
находится большое количество архивов с
различными материалами или программами,
то наверняка у его Web-мастера возникало
желание оформить сайт по подобию
Интернет-магазина: чтобы, например,
посетитель мог во время путешествия по
сайту или просмотра страницы с
каталогом архивов выбрать желаемые,
нажать кнопку под названием, скажем, "Получить"
и чтобы в этот момент на компьютер
посетителя были загружены все выбранные
им материалы. Если сервер допускает
использование CGI-скриптов, то проблем
нет - можно написать скрипт, который бы с
помощью программы Pkzip.exe "на ходу"
архивировал бы выбранные посетителем
материалы и передавал бы полученный
архив на загрузку. Ну, а если CGI-скрипты
нельзя использовать, как, например, на
серверах бесплатного хостинга, да и на
многих провайдерских узлах? Как тогда
обеспечить множественную загрузку?
На страницах http://antorlov.nm.ru/statistc.htm,
http://antorlov.nm.ru/resurses.htm
предложен способ автоматизации
загрузки нескольких файлов на VBScript. К
сожалению, осуществить архивацию
выбранных файлов "на ходу" и
загрузку посетителем одного архива со
всеми выбранными им материалами без CGI
нельзя - все же программа архивации
должна запускаться на сервере. Поэтому
здесь при работе скрипта просто
передаются на загрузку посетителю
выбранные им файлы один за другим.
Скрипт выглядит так:
<SCRIPT ID=clientEventHandlersVBS
LANGUAGE=vbscript>
'Заголовок скрипта и указание
языка, на котором он написан - vbscript.
Sub runscr()
files=array("", "file1.zip",
"file2.zip", "file3.zip", "file4.zip" ... )
'Имена всех файлов, могущих
быть загруженными с сайта. Имена
помещаются в массив строк.
a=0: c=0: sdf=""
'Установка начальных значений
некоторых служебных переменных
if checkbox1.status=True then a=a+1: c=1
if checkbox2.status=True then a=a+1: c=2
...
'Таких строчек должно быть
столько, сколько файлов может быть
загружено со страницы. В каждой
последующей строчке значение
переменной "с" должно возрастать на
единицу. Это - подсчет количества
отмеченных checkbox'ов (квадратиков, куда
можно ставить галочку), нужный для
генерации нижеописанного сообщения
посетителю.
if a=0 then MyVar = MsgBox ("Пожалуйста,
отметьте файлы для загрузки и нажмите
кнопку", 64, "Множественная загрузка"):
Exit Sub
'Это - команда вывода на экран
предупреждающего сообщения посетителю,
если он нажал кнопку загрузки, не выбрав
ни одного файла.
if a<4 then yu="a" else yu="ов"
'Формирование окончания для
слова "файлы", используемого в
следующем сообщении, в зависимости от
количества передаваемых файлов..
MyVar = MsgBox ("Сейчас на Ваш
компьютер будет передано "+CStr(a)+"
файл"+yu+" в формате Zip. Дождитесь,
когда кончит передаваться последний
файл - "+b(c)+". Если у Вас установлен
режим сохранения их на диске, то укажите
каждому файлу место для сохранения. Если
у Вас установлен режим открытия таких
файлов в их текущем месте, то извлеките
нужные Вам файлы из раскрывшихся
архивов. Вы можете отменить загрузку
каждого из файлов.",65,"Множественная
загрузка")
'Информационное сообщение
посетителю о начале загрузки файлов с
возможностью ее отменить. Используется
переменная "а" - количество файлов,
подлежащих загрузке, и переменная "с"
- номер последнего файла, подлежащего
загрузке.
if not MyVar=2 then
'Если посетитель не отменил
загрузку файлов, то выполнять:
strf="top=3000, left=3000, width=200, height=200"
'К сожалению, команд загрузки
Web-страницы по своему формату ничем не
отличается от команды загрузки файла.
Поэтому для загрузки архивов приходится
использовать команду открытия нового
окна - "window.open". При ее выполнении
браузер открывает новое окно и начинает
загружать файл. Когда же он определяет,
что загружаемый файл является архивом и
открывается по умолчанию не браузером, а
другой программой, то открытое окно
замещается стандартным окном
сохранения файлов из Сети. Поэтому и в
скрипте используется команда открытия
окна. Но, так как нежелательно, чтобы
перед глазами посетителя мелькали
открывающиеся окна, то эти окна
открываются вне обозримого
пространства - в точке на расстоянии в 3000
пикселов от верхнего края экрана. Так
как эта точка вне видимой области экрана,
то окно изначально не видно, а, когда
откроется окно сохранения файла, оно
будет находиться уже в видимой области
экрана, - об этом позаботится браузер.
Формат команды "window.open" допускает
указание места отображения
открываемого окна, и даже позволяет
использовать для этого заранее
определенную переменную, поэтому
команда "window.open files(1), "qw", strf"
открывает в новом окне файл, стоящий в
массиве "files()" первым, дает окну имя
"qw" и задает открываемому окну
параметы переменной "strf" -
расстояние до верхнего края экрана в 3000
пикселов и.т.д.
if checkbox1.status=True then window.open files(1),
"qw", strf
if checkbox2.status=True then window.open files(2),
"qw", strf
if checkbox3.status=True then window.open files(3),
"qw", strf
...
'Таких строчек должно быть
столько, сколько файлов может быть
загружено со страницы. Это - команды
загрузки выбранных файлов. ...
end if
checkbox1.status=False
checkbox2.status=False
checkbox3.status=False
checkbox4.status=False
...
'Таких строчек должно быть
столько, сколько файлов может быть
загружено со страницы. Это - команда
приведения всех checkbox'ов в неотмеченное
состояние для возможного нового
выполнения скрипта.
End Sub
</SCRIPT>
Этот скрипт должен
располагаться в разделе <head> Web-страницы.
В тексте страницы в месте
каталога файлов для загрузки должны
стоять элементы управления CheckBox'ы -
квадратики, куда можно ставить галочку:
<INPUT id=checkbox1 name=checkbox1
type=checkbox>
<INPUT id=checkbox2 name=checkbox2 type=checkbox>
<INPUT id=checkbox3 name=checkbox3 type=checkbox>
<INPUT id=checkbox4 name=checkbox4 type=checkbox>
...
<!-- Таких строчек должно быть
столько, сколько файлов может быть
загружено со страницы - по одной на
каждый файл. -->
А в конце, под
списком файлов, надо разместить кнопку,
вызывающую программу множественной
загрузки:
<INPUT TYPE=button value="Загрузить
отмеченное" onClick=runscr()>
Все! Теперь при
нажатии посетителем кнопки скрипт
сначала подсчитает количество
отмеченных позиций и выдаст посетителю
соответствующее сообщение - сколько
файлов ему "ждать" и какой файл
будет ему передан последним:

Затем скрипт начнет
загрузку файлов. Посетителю останется
только дождаться появления запроса на
загрузку файла, который передастся
последним, а затем указать всем файлам
места на своем диске для их сохранения.
Они начнут загружаться, а посетитель
может продолжать просмотр других
страниц сайта.
Если пользователь нажмет на
кнопку загрузки, не отметив ни одного
файла, то ему будет об этом сообщено.
Предложенный скрипт позволяет
в какой-то мере упорядочить действия
посетителя - вместо того, чтобы
параллельно заниматься просмотром
сайта и действиями по сохранению
полюбившихся материалов, можно просто
отмечать нужные материалы, а потом сразу
все сохранить.
Имеется, правда, два
ограничения на использование этого
скрипта посетителем. Так как для
загрузки файлов используется та же
команда, что и для открытия нового окна
браузера - "window.open", то у посетителя
архивы должны открываться по умолчанию
именно архиватором, а не, скажем,
браузером, что бывает, хоть и редко, на
компьютерах, которыми пользуется
множество плохо разбирающихся в
компьютерных технологиях людей. Кроме
того, действие скрипта может привести к
непредсказуемому (но вполне безопасному
для посетителя) результату при
использовании программ загрузки файлов,
интегрированных с браузером, вроде
DownloadAccelerator или GetRight. Об этом стоит
предупредить посетителя в тексте на
сайте.
Скрипты также не будут
работать, если у посетителя в браузере
включен уровень высокой безопасности (для
Microsoft Internet Explorer 5.0 его можно установить
во вкладке Безопасность меню свойств
обозревателя), но такая ситуация
встречается редко.
Поскольку скрипт написан на
языке VBScript, то он не будет работать при
использовании браузера Netscape Navigator и
других. Поэтому желательно скрыть
кнопку его вызова и checkbox'ы от этого
браузера, например, с помощью скрипта
<SCRIPT language="JavaScript">
if (navigator.appName == "Microsoft Internet
Explorer")
document.write ("<INPUT id=checkbox1 name=checkbox1
type=checkbox>");
</SCRIPT>
Если заместить
подобными скриптами строки,
отображающие checkbox'ы, то они будут
отображаться только браузером Microsoft
Internet Explorer.
Посетите страницы http://antorlov.nm.ru/statistc.htm,
http://antorlov.nm.ru/resurses.htm
и посмотрите, как этот скрипт работает
на них.
Надеюсь, что эта идея
пригодится вам при разработке ваших
сайтов.
|