Интернет-журнал "Домашняя лаборатория", 2007 №3
Шрифт:
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>
Этот
перед текстами рефератов, и тогда они будут скрыты от посетителя тогда и только тогда, когда посетитель использует браузер 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 и более старшими версиями этой операционной системы, помнят о возможности настроить вид папок так, что при наведении курсора иконка файла будет затеняться, а при нажатии в этот момент левой кнопки мыши файл откроется. Так почему бы не реализовать такой же эффект на web-странице, содержащей файловый архив? Скажем, поставить в качестве ссылок такие же иконки этих файлов, как и соответствующие их формату в интерфейсе операционной системы (например, для архива формата Zip — изображение сжатых струбциной ящиков от стола,). Тогда посетитель, зайдя на страницу, сразу увидит знакомые значки и ему будет проще ориентироваться на ней — то, что предназначено для загрузки с сайта, будет видно сразу.
Однако просто использовать в качестве ссылок иконки архивов — это весьма банально и неинтересно. А что, если сделать их такими же затемняющимися, как и в Windows? Представьте себе — навел посетитель курсор мыши на значок, а он стал темным, увел — он стал обычным. Но как это реализовать?
Можно,
Однако для достижения вышеописанного эффекта вполне можно обойтись и одним изображением, если использовать так называемые "фильтры". Вот пример сценария, использующего их.
В начало страницы, в раздел "<head>" следует добавить скрипт:
<script language="JavaScript1.2">
Далее следует стандартный синтаксис сценария на Javascript. Для экономии места используется одна функция, которой сообщается имя графического объекта на web-странице, на котором используется затемнение, и требуемое действие — либо применение этого затемнения, либо его отмена.
function g(c,w)
{
if (w==0)
Если нужно "затемнить" картинку:
{
с. style.filter="light";
…применяем фильтр "light", который окрашивает картинку в определенный цвет…
if (с. filters.light)
{
с. filters.light.addAmbient(130,130,210,120)
}
и задаем в качестве затемняющего цвета — темно-синий оттенок. Эта команда используется лишь в том случае, когда браузер может работать с фильтра ми — именно поэтому она помещена после оператора if, проверяющего, существует ли для браузера фильтр light.
}
else с. style.filter=0
Ну, а если нужно, наоборот, вернуть картинке первоначальный вид, то просто отменяем все фильтры.
}
</script>
В тэг каждой картинки, для которой требуется реализация эффекта "затемнения", следует вставить команды "onMouseover="g(this,0)" onMouseout="g(this,1)":
<IMG src="z.gif" border=0 height=30 width=30 onMouseover="g(this,0)" onMouseout="g(thi s,1)">
В результате при наведении курсора мыши на картинку она будет затемняться — как на рисунке выше.
К сожалению, данный прием работает только в браузере Microsoft Internet Explorer версии 5.0 и старше. Пользователи же остальных браузеров увидят простую непереливающуюся картинку и ничего больше.
Примеры сценария и иконки архивов вы можете взять с адресовhttp://karamurza.chat.ru,http://ambarsum.chat.ru.
PowerPoint 2000/XP: готовый сайт — за пять минут
PowerPoint — это программа для создания презентаций: наборов изображений, содержащих графику и текст и предназначенных для удобного предоставления информации. Презентации часто используются при чтении лекций, проведении семинаров, заменяя столь распространенную ранее демонстрацию диапозитивов. PowerPoint входила еще в ранние версии Microsoft Office. В PowerPoint 97 появилась возможность сохранения презентации в формате HTML, а в PowerPoint 2000 и PowerPoint ХР эта возможность была значительно усовершенствована.