Тайны и секреты компьютера
Шрифт:
А для того, чтобы при выборе того или иного пункта меню происходило открытие выбранной страницы в новом окне, первая строка сценария должна иметь вид
<form><select name="P2" size="1" onchange="window.open (this.options[this.selectedIndex].value); this.selectedIndex=0">
Событие onchange происходит при изменении значения меню — при выборе того или иного его пункта. Команда top.location.href="#" заставляет браузер перейти по указанному адресу, а команда window.open="адрес" открывает web-страницу по этому адресу в отдельном окне. «This» — это заменитель имени обьекта select. Свойство
Если ваш сайт не очень большой, но содержит много различных материалов, то в качестве карты сайта удобно использовать не отдельную страницу, а такое выпадающее меню, в котором перечислены все матералы.
Всплывающая подсказка
Это простой прием, но о нем, увы, знают не все web-мастера. Чтобы добавить к любому обьекту web-страницы всплывающую подсказку, как, скажем, на рис. 22.7, добавьте в его тэг параметр title="Подсказка". К примеру, для тэга <a href=""> это будет выглядеть как <a href="#" title="Интересная газета">.
Добавлять всплывающие подсказки можно практически к любым тэгам web-страницы. И к тэгу , и <table>, и <img…>. Если вам надо добавить подсказку к тэгу, который не допускает такого (скажем, кнопка формы), то просто окружите этот обьект тэгами <div>…</div> и укажите параметр title именно в нем: <div title="Подсказка">…</div>. Таким образом вы сможете всю web-страницу снабдить всплывающими подсказками и поместить в них различную полезную для посетителей информацию.
Рис. 22.7.Добавить к гиперссылке всплывающую подсказку просто, а для посетителя — удобно.
Динамическая карта сайта
Представим себе, что нам надо разработать сайт, содержащий научные статьи по различным областям, скажем, медицины. Статей немного — всего десять-пятнадцать штук, но необходимо обеспечить удобство посетителя при работе с сайтом, и, поскольку статьи большие, дать каждой краткое описание ее содержания — реферат, поскольку загружать все статьи посетителю вряд ли потребуется. Возникает вопрос — а как разместить на сайте эти рефераты и список статей? На одной заглавной странице? Но тогда она получится очень большая, и ее придется прокручивать, что, во-первых, потребует от посетителя лишних движений мышью или нажатий на клавиши, а, во-вторых, приведет к трудности восприятия всего обьема информации на странице. Разместить каждый реферат на своей странице (или даже на специальной странице с рефератами)? Но тогда для перехода на страницу с рефератом посетителю придется нажимать мышью ссылку, что, во-первых, требует лишних действий, а, во-вторых, и это главное, уводит посетителя с главной страницы, а он может затем туда и не вернуться и не посмотреть остальные разделы сайта. Как же быть? Как обеспечить удобство работы с насыщенной информацией главной страницей?
Очень хорошим способом было бы размещение всей информации (например, краткого содержания остальных страниц сайта) на его первой странице так, чтобы она была доступна вся сразу, но без прокрутки. Например, так, как сделано на странице(рис. 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> на приветствие, без каких-либо движений курсора.