Sposoby nawigacji w serwisie internetowym
Podstawowym zadaniem twórcy serwisu internetowego jest zorganizowanie sprawnego i czytelnego dla użytkownika systemu nawigowania po poszczególnych stronach.
Nowe przeglądarki internetowe udostępniają szerokie możliwości manipulowania odsyłaczami, które są elementarnymi elementami dokumentu hipertekstowego. Aby umożliwić użytkownikowi jak najszybsze znalezienie szukanej przez niego informacji tworzy się bardziej lub mniej skomplikowane spisy treści i indeksy.
Tworzenie dynamicznego menu
Nawigowanie po stronach internetowych za pomocą menu, które wykorzystuje możliwości dynamicznego tworzenia stron jest często znacznie bardziej wygodne dla użytkownika niż tradycyjne "statyczne" odsyłacze. Tworzenie serwisów internetowych w oparciu o takie rozwiązania umożliwia także wykorzystanie ciekawszej kompozycji graficznej witryny.
Jeden z pomysłów realizacji systemu umożliwiającego poruszanie się po stronach WWW został zastosowany na stronie, której kod przedstawia się następująco:
<html>
<head>
<style>
#menu_1,
#menu_2{position:absolute;left:-110px;width:130px;
top:20px;border:3px solid white;background-color:silver;
layer-background-color:silver;font:bold 12px Arial;}
</style>
</head>
<body bgcolor=navy>
<script>
//dla Internet Explorera
if (document.all)
document.write('<div id="menu_2" style="left:-110"
onMouseover="show()" onMouseout="hide()">')
</script>
<!-- warstwa z naszym ruhomym menu -->
<layer id="menu_1" onMouseover="show()"
onMouseout="hide()">
<script>
//tablica przechowujaca nazwy odnosnikow
var linkName=new Array()
linkName[0]="Strona główna"
linkName[1]="Strona 1"
linkName[2]="Strona 2"
linkName[3]="Strona 3"
linkName[4]="Strona 4"
linkName[5]="Strona 5"
//tablica przechowujaca ondosniki
var lLinks=new Array()
lLinks[0]="main.html"
lLinks[1]="strona1.html"
lLinks[2]="strona2.html"
lLinks[3]="strona3.html"
lLinks[4]="strona4.html"
lLinks[5]="strona5.html"
//wyswietlenie odsylaczy na warstwie
for (i=0;i<=linkName.length-1;i++)
document.write('<a href='+lLinks[i]+'>'+linkName[i]+
'</a><br>')
</script>
</layer>
<script>
//w przypadku Internet Explorera
if (document.all)
{
document.write('</div>')
menuLink=document.all.menu_2.style
right=20
left=-110
}
else
{
menuLink=document.layers.menu_1
right=110
left=20
}
//dla pokazanie menu
function show()
{
if (window.hideT)
clearInterval(hideT)
showT=setInterval("show1()",60)
}
//dla ukrycia menu
function hide()
{
clearInterval(showT)
hideT=setInterval("hide1()",60)
}
//pokazywanie menu
function show1()
{
if (document.all&&menuLink.pixelLeft<right)
menuLink.pixelLeft+=3
else if(document.layers&&menuLink.left<right)
menuLink.left+=3
else if (window.showT)
clearInterval(showT)
}
//ukrywanie menu
function hide1()
{
if (document.all&&menuLink.pixelLeft>left)
menuLink.pixelLeft-=3
else if(document.layers&&menuLink.left>left)
menuLink.left-=3
else if (window.hideT)
clearInterval(hideT)
}
</script>
<!-- DALSZA ZAWARTOSC STRONY -->
</body>
</html>
Zawarty na stronie skrypt buduje dynamiczne menu z odsyłaczami, których nazwy i adresy przechowywane są w tablicach
linkName i
linkAdr. Ponieważ organizacja warstw w różnych przeglądarkach jest nieco inna (patrz MI 5/99) wykorzystano zagnieżdżony znacznik
<LAYER>.
Po wskazaniu kursorem myszy widocznego na ekranie monitora fragmentu warstwy wywoływana jest - za pomocą procedury obsługi zdarzeń
onMouseover - funkcja wyświetlająca menu
Show(). Procedura
onMouseout jest wykorzystywana przy ukrywaniu menu - funkcją Hide().Do manipulacji naszym menu wykorzystywana jest funkcja
setInterval(..) języka
JavaScript, która umożliwia nadanie obiektowi płynnego ruchu. W efekcie widoczny jest tylko margines prostokąta, który jest naszym menu, a na życzenie użytkownika wysuwa się cała lista dostępnych odsyłaczy.
Lista odsyłaczy strony WWW
Produkty
Netscape'a i
Microsoftu umożliwiają użytkownikowi dostęp do specjalnego zbioru zawierającego wszystkie zastosowane na danej stronie odsyłacze. Przeanalizujmy poniższy skrypt:
<script>
//czy mamy przegladarka to Internet Explorer?
var ifie4 = (document.all!=null)
//funkcja sporzadazajaca liste odsylaczy
function makeList()
{
var linkList = ""
//wykorzystujemy rozmiar tablicy 'links'
for (var i = 0; i < document.links.length; i++)
{
var oneLink = document.links[i]
if (ifie4)
linkList += oneLink.outerHTML + "<BR>"
else
if (oneLink.text!=null)
linkList += "<A HREF=\""+oneLink.href+"\">"+
oneLink.text + "</A><BR>"
}
return linkList
}
//funkcja wyswietlajaca liste na ekranie
function printList()
{
// wykrycie przegladarki
if (parseInt(navigator.appVersion)>=4)
{
line = "<DIV ID=zbiorL>"
//dla przegladarki Microsoftu
if (ifie4)
window.onload =
new Function("document.all.zbiorL.innerHTML =
makeList()")
//dla Netscape'a
else
line += makeList()
line += "</DIV>"
document.write(line)
}
}
</script>
Funkcja
makeList() tworzy listę odnośników zawartych na stronie WWW (dane przechowywane są w tablicy). Analizując kod funkcji łatwo zauważyć, że przeglądarki
Netscape'a i
Microsoftu w tablicy przechowującej informacje o wszystkich odsyłaczach zawierają nieco różne informacje -
Netscape przechowuje nazwę odsyłacza, a
Explorer przechowuje cały odnośnik. W przeglądarce
Microsoftu - w przeciwieństwie do produktu
Netscape'a - elementy listy odnośników mogą zawierać znaczniki języka HTML. Zatem na stronie internetowej, która zawiera różne typy znaczników tekstowych i graficznych wyświetlana za pomocą naszego skryptu lista może prezentować się w różny sposób - zależny od programu. W
Internet Explorerze będzie zawierała także obrazki i elementy formatowania, a w przeglądarce Netscape'a tylko odnośniki tekstowe, które nie zawierają znaczników HTML. Na przykład odsyłacz:
<a href="index.html">Zobacz <b>moją stronę</b>
prywatną</a>
nasz skrypt w
Internet Explorerze wyświetli uwzględniając zagnieżdżony znacznik
. W przeglądarce firmy Netscape wyświetli tylko ostanie słowo naszego odnośnika (przeglądarka w liście odnośników uwzględnia tylko tekst zawarty za występującym znacznikiem).
Funkcja
printList() odpowiada za wyświetlenie na ekranie listy.
Wykorzystując powyższy skrypt na stronie WWW otrzymujemy w żądanym miejscu listę wszystkich zawartych na niej odsyłaczy. Można w ten sposób tworzyć systemy nawigacji po stronach serwisów internetowych oraz jednolite menu.
Przed przystąpieniem do tworzenia serwisu internetowego należy dobrze przemyśleć jego organizację, czyli zasady przemieszczania się po poszczególnych jego stronach. Opanowanie możliwości manipulowania odsyłaczami w nowych przeglądarkach może przynieść bardzo ciekawe efekty zarówno wizualne, jak i czysto praktyczne. Należy pamiętać, że szybkość i prostota dotarcia do informacji powinny być celem podstawowym każdego webmastera.
