alexp
/
l3lib
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
main
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'main'
${ noResults }
l3lib/html-doku/old_doku/work/Navigation.htm

202 lines
9.5 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>Die Navigation auf meiner Homepage</title>
<meta name="author" content="Rolf-Fredrik Matthaei">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" language="Javascript" src="Navigation-Dateien/navigate.js">
</script>
<link rel="stylesheet" type="text/css" href="Navigation-Dateien/gelb.css"></head><body>
<table align="center" border="2" bordercolor="red" cellpadding="5" cellspacing="0">
<tbody><tr>
<td bgcolor="#003366">
<h4 align="center"><font color="white">Die Navigation auf meiner Homepage</font></h4>
</td>
<td valign="top"><a href="http://home.arcor.de/fredrik.matthaei/HTML/index.htm" onmouseover="MausDrauf(0)" onmouseout="MausWeg(0)"><img src="Navigation-Dateien/zurueckoff.gif" border="0" height="19" width="32"><br>
Auswahlseite</a></td>
</tr>
</tbody></table>
<table align="center" border="2" bordercolor="red" cellpadding="5" cellspacing="0" width="600">
<tbody><tr>
<td colspan="2">Die Navigation soll für den Besucher möglichst einfach
und übersichtlich sein. Das wird durch Verwendung immer der gleichen
Navigationssymbole in auffälliger roter Farbe erreicht. Die Symbole sind<b>:</b>
<ul>
<li><img src="Navigation-Dateien/Home40x40off.gif" height="40" hspace="5" width="40">Zur Indexseite. Falls angegeben, befindet es sich links oben auf der Seite.</li>
<li><img src="Navigation-Dateien/Sitemap40x40off.gif" height="40" hspace="5" width="40">Zur Sitemap. Falls angegeben, befindet es sich links oben auf der Seite.</li>
<li><img src="Navigation-Dateien/Ganz_auf40x40off.gif" height="40" hspace="5" width="40">Zur vorigen Auswahlseite zurück. Eine Auswahlseite ist eine Seite, die eine Verteilfunktion hat.</li>
<li><img src="Navigation-Dateien/Ganz_ab40x40off.gif" height="40" hspace="5" width="40">Zur nächsten Auswahlseite vor.</li>
<li><img src="Navigation-Dateien/Auf40x40off.gif" height="40" hspace="5" width="40">oder<img src="Navigation-Dateien/Links40x40off.gif" height="40" hspace="5" width="40">Zur vorigen Seite zurück.</li>
<li><img src="Navigation-Dateien/Ab40x40off.gif" height="40" hspace="5" width="40">oder<img src="Navigation-Dateien/Rechts40x40off.gif" height="40" hspace="5" width="40">Zur nächsten Seite vor.</li>
<li><img src="Navigation-Dateien/Info40x40off.gif" height="40" hspace="5" width="40">oder<img src="Navigation-Dateien/Info15x16off.gif" height="16" hspace="5" width="15">Zur Informationsseite des Themas oder für weitere Informationen zum Thema
<b>innerhalb meiner Homepage</b>. Bei Zielen, die außerhalb meiner Homepage liegen, entfällt das Informationssymbol.</li>
<li><img src="Navigation-Dateien/zurueckoff.gif" height="19" hspace="5" width="32">Zurück zur vorigen Seite oder Auswahlseite.</li>
<li><img src="Navigation-Dateien/Frame40x40off.gif" height="40" hspace="5" width="40">Framedarstellung restaurieren.</li>
</ul>
Möglichst wird die Farbe des Navigationssymbols durch einen Javascript
in Blau geändert, wenn der Mauszeiger darauf liegt. Dies erleichtert
die Bedienung bei Geräten mit schlecht sichtbarem Mauszeiger.
<p>Ich habe gelegentlich Tadel erhalten, da die Navigationssymbole recht groß sind. Aber<b>:</b>
je größer das Navigationssymbol, desto einfacher und schneller kann man
es mit der Maus treffen. Die Navigationssymbole sind fast immer
beschriftet, denn dies vergrößert die anklickbare Fläche. Tatsächlich
ist die auf meiner Website benutzte Mindestgröße für Navigationssymbole
15*16 Pixel, die am häufigsten verwendete Größe ist 30*30 Pixel.</p></td></tr>
<tr>
<td colspan="2">
<p>Am oberen Rand jeder Seite befinden sich die Dinge, die man benötigt, um den Inhalt der Seite zu erkennen und um die Seite <b>sofort</b> wieder verlassen zu können, und zwar mindestens eines der Symbole<b>:</b></p>
<ul>
<ul>
<li>"Zur Indexseite", meistens mit "Home" beschriftet</li>
<li>"Zur Sitemap"</li>
<li>"Zurück zur vorigen Seite oder Auswahlseite"</li>
<li>"Zur Infoseite"</li>
</ul>
<li>In der Mitte<b>:</b> der Seitentitel, der etwas über den Inhalt der Seite aussagt.</li>
<li>Ganz rechts oben<b>:</b> Bei Frames das Restaurationssymbol für
Frames. Es ist für Diejenigen gedacht, die von einer Suchmaschine auf
die Seite gefunden haben, und denen deshalb die Framedarstellung fehlt.</li>
<li>Unmittelbar rechts neben dem Seitentitel befinden sich entweder
Verweise auf das vorige und/oder das nächste Thema. Falls eine
Themeneinteilung nicht vorgenommen wurde, befinden sich hier Verweise
auf die vorige und/oder nächste
Seite.</li>
<li>Bei Seiten mit Themeneinteilung befinden sich die Verweise auf die vorige und/oder nächste Seite am unteren Rand der Seite.</li>
</ul>
<p>Ein typisches Beispiel für einen Abschnitt mit Themeneinteilung und
ohne Frames ist das unterteilte Thema "Yorkshire". Schauen Sie ruhig
einmal bei der Seite über <a href="http://home.arcor.de/fredrik.matthaei/York/Bridlington5.htm" target="Vok"><img src="Navigation-Dateien/Info15x16off.gif" border="0" height="16" width="15">Bridlington</a>
nach. Das Thema "Bridlington" befindet sich zwischen den Themen "Goole"
und "The Sidings". "Bridlington" selbst beinhaltet mehrere Seiten,
durch die man sich hin
durchklicken kann! Ein Doppelklick auf "Infoseite" links oben auf der
Seite führt zur Übersichtsseite zurück.</p>
<p>Eine kleine Spielerei sind die Symbole, die etwas über das Thema aussagen. Es gibt mehrere solcher Symbole:</p>
<ol start="1" type="1">
<li>Ein <img src="Navigation-Dateien/V7.gif" alt="Sambawagen - Straßenbahnen in Hamburg" height="21" width="59"> Sambawagen für Straßenbahnthemen</li>
<li>Ein <img src="Navigation-Dateien/Minibear.gif" alt="Minibaer" align="bottom" height="16" width="16"> Teddybär für "Willkommen im Bärenland".</li>
</ol>
</td>
</tr>
<tr bgcolor="#ffe000">
<td colspan="2">
<h2 align="center">Die Verlinkung der Seiten</h2>
<p>Die Verlinkung der Seiten erfolgt in bestimmten Strukturen. Die
Strukturen lassen sich mit Kästchen gut veranschaulichen. Die Linien
zeigen dabei die Verlinkungen, die Rechtecke stellen einzelne Seiten
dar.</p>
<p>Die Links zu den Beispielen können angeklickt werden. Sie werden alle in dem <b>gleichen</b> Fenster dargestellt.</p>
</td>
</tr>
<tr>
<td align="center" bgcolor="#00ffc0"><img src="Navigation-Dateien/Baumstruktur.jpg" alt="Baumstruktur" height="193" width="356"></td>
<td>
<h4>Baumstruktur</h4>
<p>Jeder Knoten führt zu einer Anzahl von Abkömmlingen. Jeder Abkömmling hat nur einen Vorgänger.</p>
</td>
</tr>
<tr>
<td colspan="2">Beispiele für Baumstrukturen auf meiner Website sind:
<ol>
<li>Die Indexseite (Home) und die Sitemap. Die Indexseite führt zu den
Hauptthemen, die Sitemap führt zu den Hauptthemen und zusätzlich zu den
Unterthemen.</li>
<li>Die Seite, die Sie gerade lesen, ist der Abkömmling eines Knotens.
Sie kommen zu dem Knoten zurück, wenn Sie oben rechts auf der Seite das
Rückwärtssymbol anklicken.</li>
<li>Die Navigationsrahmen bei den Frames sind typische Knoten. Beispiel<b>:</b> <a href="http://home.arcor.de/fredrik.matthaei/London_Underground/index.htm" target="Vok">London's Underground</a></li>
<li>Eine Imagemap (Eine Grafik, die Links beinhaltet) bildet einen Knoten. Beispiel<b>:</b> <a href="http://home.arcor.de/fredrik.matthaei/HVV/Ringlinie/index.htm" target="Vok">Die Ringlinie</a></li>
<li>Eine Gruppe von Vorschaubildern bildet einen Knoten. Beispiel<b>:</b> <a href="http://home.arcor.de/fredrik.matthaei/dl8wa/index.htm" target="Vok">Amateurfunk</a></li>
</ol>
</td>
</tr>
<tr>
<td align="center" bgcolor="#c0ff00"><img src="Navigation-Dateien/Reihe.jpg" alt="Reihenstruktur" height="50" width="259"></td>
<td>
<h4>Reihenstruktur</h4>
<p>Die Seiten werden in einer einfachen Folge angeordnet. Diese
Struktur ist besonders leicht zu durchschauen. Allerdings ist der
Zugriff etwas unbequem, denn wenn man nur eine einzelne Seite
betrachten möchte, muss man sich durch andere
Seiten hindurchklicken, um dahin zu gelangen.</p>
</td>
</tr>
<tr>
<td align="center" bgcolor="#80ff00"><img src="Navigation-Dateien/Baum_mit_Reihe.jpg" alt="Baum- und Reihenstruktur" height="138" width="303"></td>
<td>
<h4>Baum- mit Reihenstruktur</h4>
<p>Hier werden die Vorteile der Baumstruktur (direkter Zugriff zu
einzelnen Seiten) mit der leichten Verständlichkeit der Reihenstruktur
verbunden. Ein Beispiel hierfür sind die Seiten über <a href="http://home.arcor.de/fredrik.matthaei/London_Underground/index.htm" target="Vok">London's Underground</a>.</p>
</td>
</tr>
<tr>
<td align="center" bgcolor="#40ff00"><img src="Navigation-Dateien/Jeder_mit_Jedem.jpg" alt="Jeder mit Jedem" height="98" width="110"></td>
<td>
<h4>Jeder mit Jedem</h4>
<p>Diese einfache Struktur kann bei vielen Knoten unübersichtlich
werden. Wenn nur drei Seiten miteinander so verbunden sind, ist sie
jedoch ideal!</p>
</td>
</tr>
<tr>
<td align="center" bgcolor="#00ffc0"><img src="Navigation-Dateien/Hotelstruktur.jpg" alt="Hotelstruktur" height="275" width="293"></td>
<td>
<h4>Hotelstruktur</h4>
<p>Die Bezeichnung "Hotelstruktur" fiel mir ein, da sie einem großen
Hotel nachempfunden ist: es gibt einen Empfang (grün angedeutet), eine
Art Treppenhaus und in jedem Stock Zimmer. Man kann von jedem Zimmer
unmittelbar zu den beiden
Nachbarzimmern und zum Treppenhaus gelangen. Zum "Empfang" kann man
ebenfalls unmittelbar von jedem Zimmer aus gelangen. Bei dem Thema <a href="http://home.arcor.de/fredrik.matthaei/York/index.htm" target="Vok">Yorkshire</a>
dient die "Infoseite" als "Empfang". Sie verweist
dort zusätzlich in Baumstruktur auf die einzelnen "Stockwerke" (Diese
überlagerte Baumstruktur ist in der Grafik nicht angedeutet).</p>
</td>
</tr>
</tbody></table>
</body></html>
Reference in New Issue View Git Blame Copy Permalink