~~NOCACHE~~
|[[:inf:web:navigation_des_webauftritts:Fragen]]|**Inhalte**|[[:inf:web:navigation_des_webauftritts:Arbeitsaufträge]]|

====== Navigation des Webauftritts ======
===== Die Navigation planen =====
==== Navigationselemente, Navigationsleisten, Navigationsmenüs ====

Ein Webauftritt, auch Website oder Site genannt, besteht aus mehreren miteinander verknüpften HTML-Seiten und eventuell aus Ressourcen wie PDF-Dokumenten oder downloadbaren Dateien, z. B. ZIP-Archiven.
Diese HTML-Seiten und Ressourcen werden mithilfe von Navigationselementen, z. B. Text-Hyperlinks und Buttons, miteinander vernetzt. Sobald der Nutzer auf ein Navigationselement klickt, steuert er die damit verknüpfte Webseite oder andere Ressource an.

Häufig werden die Navigationselemente (Text-Hyperlinks oder Buttons) zu übersichtlichen Navigationsleisten oder Navigationsmenüs zusammengefasst. Die meisten Webauftritte verfügen über eine oder mehrere solcher Navigationsleisten oder -menüs, mit deren Hilfe sich der Nutzer durch den Webauftritt bewegen kann.

{{:inf:web:ik-06-1.jpg?700|}}

==== Navigationselemente richtig platzieren ====
Eine richtige Platzierung dieser Gesamtnavigation, die aus Navigationsleisten oder -menüs und zusätzlichen, im Textinhalt vorhandenen Hyperlinks bestehen kann, erleichtert dem Nutzer die Bewegung im Webauftritt.

Im Lauf der Zeit haben sich bestimmte Konventionen für die Platzierung der Navigationselemente herausgebildet. Diese Konventionen sollten Sie beachten, damit sich der Nutzer schnell und problemlos in Ihrem Webauftritt zurechtfindet.

{{:inf:web:ik-07-1.jpg?700|}}

Der früher häufig genutzte rechte Seitenbereich wird heute nicht mehr für die Hauptnavigation verwendet, weil hier nicht gewährleistet ist, dass die Navigationselemente bei allen Browsereinstellungen und Bildschirmgrößen sichtbar sind.

Muss ein Besucher beim Besuch eines Webauftritts überlegen, wo er sich gerade befindet und wohin er gelangen kann, steigt seine Bereitschaft, den Webauftritt zu verlassen.


==== Navigationselemente gestalten ====

  * **Symbole benennen und verwenden** Navigationselemente sollen möglichst sofort als solche erkennbar und allgemein verständlich sein. Versuchen Sie, eindeutige Hyperlinkbeschriftungen und/oder grafische Symbole zu finden, die möglichst jeder Nutzer versteht.\\ Ein typisches Beispiel ist das Briefsymbol, das im Web zum Standard für einen E-Mail-Hyperlink geworden ist. {{:inf:web:ik-07-2.jpg?30|}}

  * **Einheitlichkeit** Damit der Nutzer schon nach kurzer Zeit problemlos durch Ihren Webauftritt navigieren kann, sollten sich die wichtigsten Navigationselemente stets an derselben Stelle der Seiten befinden. Darüber hinaus sollten sie auch auf jeder Seite gleich gestaltet sein, um eine intuitive Orientierung zu ermöglichen. Eine solche konsistente Navigation nennt man persistente oder globale Navigation.

  * **Barrierefreiheit** Bei der Planung der Navigationselemente sollten Sie auch berücksichtigen, auf welche Weise diese von den Suchmaschinen erfasst und von alternativen Ausgabegeräten - wie etwa Screenreadern für sehbehinderte Nutzer - dargestellt werden. Im Idealfall können Ihre Navigationselemente von allen Browsern, Suchmaschinen und alternativen Ausgabegeräten problemlos erfasst und ausgewertet werden. Man spricht dann von einer vollständigen Barrierefreiheit.


Mit Adobe Flash oder JavaScript realisierte Navigationsmenüs sorgen eventuell dafür, dass nur die Startseite Ihres Webauftritts indiziert wird. Manche Ausgabegeräte haben Schwierigkeiten mit der Auswertung solcher Navigationsmenüs. Ähnliches gilt für Imagemaps. Wenn Sie sich für Navigationselemente mit JavaScript, Java oder Flash entscheiden, sollten Sie deshalb für alternative Navigationsmöglichkeiten sorgen, die von allen Ausgabegeräten angezeigt und von den Suchmaschinen erfasst werden können.

==== Barrierefreiheit durch Trennung von Struktur und Darstellung ====
Navigationsleisten und -menüs aus Text- oder grafischen Hyperlinks ohne JavaScript sind barrierefrei. Deshalb konzentrieren wir uns in diesem Kapitel auf die Erstellung solcher Navigationselemente. Sie lernen, wie Sie ausschließlich in HTML und CSS erstellte Navigationsleisten und -menüs gestalten. Dabei verwenden Sie für die Strukturierung der Navigation reinen HTML-Code und für die attraktive Darstellung als Navigationsleiste oder -menü CSS-Formatierungen.

Diese strikte Trennung in der Vorgehensweise ist eine Vorbedingung für die problemlose Gestaltung barrierefreier Systeme: Entwickeln Sie zuerst die Inhalte und die Funktionalität bis zum Ende, testen Sie sie und beschäftigen Sie sich danach mit der Gestaltung.

Ein weiterer Vorteil dieser Lösungen ist, dass sie schnell und ohne großen Aufwand anpassbar sind, besonders wenn Sie externe Stylesheets verwenden. Wenn sich das Site-Design ändern soll, müssen Sie nur einige CSS-Definitionen ändern, um für ein neues Erscheinungsbild Ihrer Navigation zu sorgen, sie beispielsweise statt vertikal nun horizontal anzuzeigen.

\\ \\

===== Navigationsleisten mit HTML und CSS erstellen =====
==== Horizontale Navigationsleiste aus nicht formatierten Text-Hyperlinks erstellen ====
Die einfachste Möglichkeit, eine Navigationsleiste zu erstellen, ist die Aneinanderreihung von Text- oder grafischen Hyperlinks.

**Beispiel: Text-Navigationsleiste ohne Formatierung** 
++++ Quelltext |
<code html textnavigation.html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Navigationsleiste</title>
</head>

<body>
<p><a href="home.html">Home</a> | 
<a href="profil.html">Profil</a> | 
<a href="service.html">Service</a> | 
<a href="jobs.html">Jobs</a> | 
<a href="impress.html">Impressum</a> | 
<a href="hilfe.html">Hilfe</a></p>
</body>
</html>
</code>
++++

Der folgende Code und die zugehörige Abbildung zeigen eine horizontale Navigationsleiste aus Text-Hyperlinks (<a> ... </a>):

{{:inf:web:ik-08-1.jpg?700|}}

  * Text-Navigationsleisten, die dynamisch auf die Mausaktionen des Benutzers (Zeigen, Klicken) reagieren;
  * unterschiedliche Button-Navigationsleisten, wahlweise auch mit Reaktion auf die Mausaktionen des Benutzers.

Der Vorteil dieser Technik ist, dass solche Navigationselemente schnell geladen werden können und immer funktionieren - selbst in nicht CSS-fähigen oder Nur-Text-Browsern. Dort werden sie als Aneinanderreihung normaler Hyperlinks dargestellt.

==== Text-Navigationsleisten mit CSS gestalten ====
Die einfachste Möglichkeit, das Aussehen und die Reaktion der oben gezeigten Text-Navigationsleiste textnavigation.htmlzu verbessern, sind die Pseudoklassen ''a:link, a:visited, a:hover'' und ''a:active''. Mit diesen können Sie das Aussehen von Text-Hyperlinks während bestimmter und nach bestimmten Mausaktionen des Anwenders ändern, also sogenannte Mouseover-Effekte erzeugen:

Pseudoklassen ermöglichen die CSS-Formatierung von HTML-Elementen, die sich nicht durch ein eindeutiges HTML-Tag ausdrücken lassen. Grundsätzlich geben Sie zuerst das jeweilige Element an, im Beispiel das Tag <a> für einen Hyperlink. Anschließend notieren Sie einen Doppelpunkt und eine definierte Angabe wie etwa link für einen noch nicht besuchten Hyperlink. Das Aussehen der Pseudoklassen legen Sie wie gewohnt mit-hilfe von CSS-Eigenschaften fest.

{{:inf:web:ik-09-1.jpg?700|}}

Achten Sie darauf, bei der Definition der a-Pseudoklassen die in der Tabelle gezeigte Reihenfolge einzuhalten, damit sich die Angaben nicht gegenseitig außer Kraft setzen.

**Beispiel: Text-Navigationsleiste mit Mouseover-Effekten** 

++++ Quelltext |
<code html mouseover.html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Menüleiste</title>
<style type="text/css">
<!--
a:link,a:visited,a:hover,a:active {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:small;
	text-decoration:none;
}
a:link {
	color:#339;
}
a:visited {
	color:#909;
}
a:hover {
	color:#C00;
}
a:active {
	color:#999;
}
-->
</style>
</head>
<body>
<p><a href="home.html">Home</a> | 
<a href="profil.html">Profil</a> | 
<a href="service.html">Service</a> | 
<a href="jobs.html">Jobs</a> | 
<a href="impress.html">Impressum</a> | <a href="hilfe.html">Hilfe</a></p>
</body>
</html>
</code>
++++



Im folgenden Beispiel versehen Sie die zuvor erzeugte einfache Text-Navigationsleiste mit Mouseover-Effekten, sodass sie optisch auf die Aktionen des Benutzers reagiert.
  * Öffnen Sie die Beispieldatei textnavigation.html.
  * Geben Sie innerhalb des Tagpaars ''<head> ... </head>'' den nachfolgenden Code ein.\\ Zu Übungszwecken legen Sie die CSS-Stildefinitionen damit in einem eingebetteten Stylesheet fest.
  * 
In der Praxis würden Sie statt eines eingebetteten eher ein externes Stylesheet erstellen und im Seitenkopf der einzelnen HTML-Seiten darauf verweisen. Dann könnten Sie bei Bedarf alle Navigationsleisten der Webseiten, in denen auf das externe Stylesheet verwiesen wird, gleichzeitig neu formatieren. Sie müssten dazu nur die Stildefinitionen in der externen Stylesheet-Datei abändern.

{{:inf:web:ik-09-2.jpg?700|}}

{{:inf:web:ik-10-1.jpg?700|}}

==== Button-Navigationsleisten mit CSS gestalten ====
Die einfache Text-Navigationsleiste im Beispiel textnavigation.html kann mit CSS so formatiert werden, dass die einzelnen Hyperlinks das Aussehen von dreidimensionalen Buttons annehmen. Auch dazu verwenden Sie die Pseudoklassen ''a:link, a:visited,  a:hover'' und ''a:active''.

**Beispiel: Button-Navigationsleiste** 

++++ Quelltext |
<code html 3d-navigation.html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Navigationsleiste</title>
<style type="text/css">
<!--
a:link, a:visited, a:hover, a:active {
	border-style:solid;
	border-width:thin;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:small;
	padding:4px 8px;
	text-align:center;
	text-decoration:none;
	text-transform:uppercase;
}
a:link {
	background-color:#BDB76B;
	border-color:#F0E68C olive olive #F0E68C;
	color:#000;
}
a:visited {
	background-color:#BDB76B;
	border-color:#F0E68C olive olive #F0E68C;
	color:#8B008B;
}
a:hover {
	background-color:#F0E68C;
	border-color:olive #F0E68C #F0E68C olive;
	color:#FF8C00;
}
a:active {
	background-color:#BDB76B;
	border-color:#F0E68C olive olive #F0E68C;
	color:#F0E68C;
}
-->
</style>

</head>
<body>
<p><a href="home.html">Home</a><a href="profil.html">Profil</a><a href="service.html">Service</a><a href="jobs.html">Jobs</a><a href="impress.html">Impressum</a><a href="hilfe.html">Hilfe</a></p>
</body>
</html>

</code>
++++

Im folgenden Beispiel versehen Sie die verschiedenen Hyperlink-Zustände der einfachen Text-Navigationsleiste textnavigation.html mit unterschiedlichen Füllungen und Rahmenfarben, sodass sie wie grafische Buttons aussehen, die beim Anklicken eingedrückt erscheinen und ansonsten hervortreten.
  * Öffnen Sie die Beispieldatei textnavigation.html.
  * Löschen Sie die senkrechten Striche (|) zwischen den einzelnen Hyperlinks.
  * Geben Sie innerhalb des Tagpaars ''<head> ... </head>'' den nachfolgenden Code ein.

{{:inf:web:ik-10-2.jpg?700|}}

{{:inf:web:ik-11-1.jpg?700|}}

==== Button-Navigationsleisten mit CSS und Bilddateien gestalten ====
Bei Bedarf können Sie die zuvor gezeigte Technik zur Gestaltung von Button-Navigationsleisten mit CSS durch Bilder ergänzen. Dadurch ergeben sich weitere Gestaltungsmöglichkeiten, beispielsweise mit Farbverläufen oder Texturen.

Auch hier gilt: Kann das Bild aus irgendeinem Grund nicht geladen werden, schadet dies der Funktionalität der Navigationsleiste nicht.

**Beispiel: Button-Navigationsleiste mit Hintergrundbild**

++++ Quelltext |
<code html 3d-navigation-bild.html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Navigationsleiste</title>
<style type="text/css">
<!--
a:link, a:visited, a:hover, a:active {
	border-style:solid;
	border-width:thin;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:small;
	padding:4px 8px;
	text-align:center;
	text-decoration:none;
	text-transform:uppercase;
}
a:link {
	background-color:#BDB76B;
	border-color:#F0E68C olive olive #F0E68C;
	color:#000;
}
a:visited {
	background-color:#BDB76B;
	border-color:#F0E68C olive olive #F0E68C;
	color:#8B008B;
}
a:hover {
	background-color:#F0E68C;
	background-image:url(burst.jpg);
	border-color:olive #F0E68C #F0E68C olive;
	color:#FFFFFF;
}
a:active {
	background-color:#BDB76B;
	border-color:#F0E68C olive olive #F0E68C;
	color:#F0E68C;
}
-->
</style>

</head>
<body>
<p><a href="home.html">Home</a><a href="profil.html">Profil</a><a href="service.html">Service</a><a href="jobs.html">Jobs</a><a href="impress.html">Impressum</a><a href="hilfe.html">Hilfe</a></p>
</body>
</html>
</code>
++++

Im folgenden Beispiel erhalten die als Buttons dargestellten Hyperlinks beim Hovern ein Hintergrundbild mit einem radialen Farbverlauf.
  * Speichern Sie die Beispieldatei ''3d-navigation.html'' aus dem vorigen Beispiel und die Beispieldatei burst.jpg {{:inf:web:burst.jpg}} in demselben Ordner.
  * Öffnen Sie die Datei ''3d-navigation.html''
  * Ändern Sie die Definition der Pseudoklasse ''a:hover'' folgendermaßen ab:

{{:inf:web:ik-11-2.jpg?700|}}

{{:inf:web:ik-12-1.jpg?700|}}


\\ \\ 
===== Navigationsmenüs erstellen =====

{{:inf:web:ik-12-2.jpg?500|}}

Nicht nur Navigationsleisten, sondern auch mehrstufige Navigationsmenüs lassen sich in HTML strukturieren und mit CSS gestalten.

Durch diese Möglichkeit können Sie völlig auf JavaScript, Flash und sonstige Technologien verzichten, die häufig zur Erstellung von Navigationsmenüs verwendet werden. Sie stellen damit sicher, dass Ihre Navigationsmenüs sowohl von Suchmaschinen als auch von den alternativen Ausgabegeräten und von Nur-Text-Browsern problemlos ausgewertet werden können.



==== Die HTML-Struktur eines Navigationsmenüs erstellen ====
Als Grundlage für das Navigationsmenü bietet sich eine unsortierte HTML-Liste an.

**Beispiel: HTML-Menüstruktur**

++++ Quelltext |
<code html menuestruktur.html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Navigationsmenü</title>
</head>

<body>
<ul>
  <li><a href="#">Über uns</a>
    <ul>
      <li><a href="philos.html">Philosophie</a></li>
      <li><a href="firmeng.html">Firmengeschichte</a></li>
    </ul>
  </li>
  <li><a href="#">Produkte</a>
    <ul>
      <li><a href="buecher.html">Bücher</a></li>
      <li><a href="zeitschr.html">Zeitschriften</a></li>
      <li><a href="software.html">Software</a></li>
    </ul>
  </li>
  <li><a href="#">Kontakt</a>
    <ul>
      <li><a href="beratung.html">Beratung</a></li>
      <li><a href="vertrieb.html">Vertrieb</a></li>
    </ul>
  </li>
</ul>
</body>
</html>
</code>
++++

{{:inf:web:ik-12-3.jpg?700|}}

{{:inf:web:ik-13-1.jpg?700|}}

Von der inhaltlichen Seite her ist das Navigationsmenü fertig. Es funktioniert in allen Browsern und mit sämtlichen alternativen Ausgabegeräten. Sie können sich jetzt mit der Anordnung der Menüpunkte und danach mit der Gestaltung beschäftigen.

==== Das Navigationsmenü mit CSS anordnen ====
Für die Anordnung der Menüpunkte verwenden Sie CSS.

**Beispiel: CSS-Menüanordnung** 

++++ Quelltext |
<code html menueanordnung.html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Navigationsmenü</title>
<style type=text/css>
ul {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:x-small;
	list-style:none;
	margin:0;
	padding:0;
}
li {
	float:left;
	position:relative;
	width:10em;
}
li ul {
	display:none;
	position:absolute;
	top:1.2em;
	left:0;
}
li:hover ul {
	display:block;
}
</style>

</head>

<body>
<ul>
  <li><a href="#">Über uns</a>
    <ul>
      <li><a href="philos.html">Philosophie</a></li>
      <li><a href="firmeng.html">Firmengeschichte</a></li>
    </ul>
  </li>
  <li><a href="#">Produkte</a>
    <ul>
      <li><a href="buecher.html">Bücher</a></li>
      <li><a href="zeitschr.html">Zeitschriften</a></li>
      <li><a href="software.html">Software</a></li>
    </ul>
  </li>
  <li><a href="#">Kontakt</a>
    <ul>
      <li><a href="beratung.html">Beratung</a></li>
      <li><a href="vertrieb.html">Vertrieb</a></li>
    </ul>
  </li>
</ul>
</body>
</html>
</code>
++++

Zuerst entfernen Sie die Listenpunkte vor den einzelnen Elementen und definieren Schrift und Positionierung. Mit der Positionierung ordnen Sie die Liste in Menüform an. Erstellen Sie dazu im head-Bereich die folgende CSS-Regel:

{{:inf:web:ik-13-2.jpg?700|}}

{{:inf:web:ik-14-1.jpg?700|}}

Ohne weitere Angaben werden HTML-Elemente im Browser in der Reihenfolge, wie sie im Quelltext auftauchen, angezeigt. Mit der CSS-Eigenschaft ''float'' können Sie Elemente jedoch von Text umfließen lassen.
Mit ''float:left'' steht das Element links und wird rechts umflossen. Detaillierte Informationen über ''float'' erhalten Sie in Abschnitt 2.
Enthält Ihr Navigationsmenü längere Einträge, erhöhen Sie den Wert ''10em'' entsprechend.

{{:inf:web:ik-14-2.jpg?700|}}


==== Das Navigationsmenü mit CSS gestalten ====
Bisher gefällt das Navigationsmenü sicherlich nur absoluten Design-Puristen. Sie haben aber alle von CSS gebotenen Gestaltungsmöglichkeiten, sodass das fertige Navigationsmenü zum Design Ihres Webauftritts passt.

**Beispiel: CSS-Menügestaltung**

++++ Quelltext |
<code html menuegestaltung.html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Barrierefreies Menü</title>
<style type=text/css>
<!--
ul {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:small;
	list-style:none;
	margin:0;
	padding:0;
}
li {
	background-color:#999;
	border-bottom-color:#F90;
	border-bottom-style:solid;
	border-bottom-width:.1em;
	border-right-color:#F90;
	border-right-style:solid;
	border-right-width:thick;
	float:left;
	padding:.5em;
	position:relative;
	width:13em;
}
li a {
	color:#FFF;
	text-decoration:none;
}
li a[href=#] {
	font-weight:700;
	text-transform:uppercase;
}
li ul {
	display:none;
	left:0;
	position:absolute;
	top:2.3em;
}
li ul a:hover {
	border-bottom-style:solid;
	border-bottom-width:thin;
	border-left-color:#FC0;
	color:#FC6;
}
li:hover ul {
	display:block;
}
-->
</style>
</head>
<body>
<ul>
  <li><a href="#">Über uns</a>
    <ul>
      <li><a href="philos.html">Philosophie</a></li>
      <li><a href="firmeng.html">Firmengeschichte</a></li>
    </ul>
  </li>
  <li><a href="#">Produkte</a>
    <ul>
      <li><a href="buecher.html">Bücher</a></li>
      <li><a href="zeitschr.html">Zeitschriften</a></li>
      <li><a href="software.html">Software</a></li>
    </ul>
  </li>
  <li><a href="#">Kontakt</a>
    <ul>
      <li><a href="beratung.html">Beratung</a></li>
      <li><a href="vertrieb.html">Vertrieb</a></li>
    </ul>
  </li>
</ul>
</body>
</html>
</code>
++++

{{:inf:web:ik-15-1.jpg?700|}}

{{:inf:web:ik-15-2.jpg?700|}}

{{:inf:web:ik-16-1.jpg?700|}}

==== Das horizontale Navigationsmenü mit CSS vertikal ausrichten ====

Ungefähr genauso häufig wie ein horizontales benötigen Sie ein vertikales Menü. Da in der vorliegenden Lösung Inhalt und Gestaltung strikt voneinander getrennt sind, lässt sich das horizontale mit wenigen Handgriffen in ein vertikales Navigationsmenü konvertieren.

**Beispiel: Navigationsmenü mit CSS vertikal ausrichten**

++++ Quelltext |
<code html menue-vertikal.html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Barrierefreies Navigationsmenü</title>
<style type="text/css">
<!--
ul {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	padding: 0;
	margin: 0;
	list-style: none;
}
li {
	float: none;
	position: relative;
	width: 13em;
	background-color: #999999;
	padding: 0.5em;
	border-right-width: thick;
	border-right-color: #FF9900;
	border-right-style: solid;
	border-bottom-width: 0.1em;
	border-bottom-style: solid;
	border-bottom-color: #FF9900;
}
li a {
	color: #FFFFFF;
	text-decoration: none;
}
li a[href="#"] {
	text-transform: uppercase;
	font-weight: bold;
}
li ul {
	display: none;
	position: absolute;
	top: 0em;
	left: 14.4em;
}
li ul a:hover {
	color: #FFCC66;
	border-left-color: #FFCC00;
	border-bottom-style: solid;
	border-bottom-width: thin;
}
li.zeiger ul {
	display: block;
}
li:hover ul{
	display: block;
} 

-->
</style>
</head>

<body>
  <ul id="navigation">
    <li><a href="#">&Uuml;ber uns</a> 
      <ul>
        <li><a href="philosophie.htm">Philosophie</a></li>
        <li><a href="geschichte.htm">Firmengeschichte</a></li>
        <li><a href="niederlassungen.htm">Niederlassungen</a></li>
      </ul>
    </li>
    <li><a href="#">Produkte</a>
      <ul>
        <li><a href="landschaftsbau.htm">Landschaftsbau</a></li>
        <li><a href="reitplatzbau.htm">Reitplatzbau</a></li>
        <li><a href="strassenbau.htm">Stra&szlig;enbau</a></li>
      </ul>
    </li>
    <li><a href="#">Kontakt</a>
      <ul>
        <li><a href="beratung.htm">Beratung</a></li>
        <li><a href="vertrieb.htm">Vertrieb</a></li>
      </ul>
    </li>
  </ul>
</body>
</html>
</code>
++++

{{:inf:web:ik-16-2.jpg?700|}}

{{:inf:web:ik-17-1.jpg?700|}}


\\ \\ 

===== Imagemaps =====
==== Was sind Imagemaps? ====
Als Imagemaps werden Grafiken bezeichnet, in denen bestimmte Bereiche, sogenannte Hotspots, mit einem Hyperlink belegt sind. Diese Bereiche können rechteckig, rund oder polygonförmig (vieleckig) sein. Der Benutzer erkennt den Hyperlink am veränderten Mauszeiger, wenn er den Mauszeiger über das Bild bewegt.

==== Imagemaps verwenden ====
Oft werden Land- bzw. Regionalkarten als Imagemaps angeboten. Der Besucher klickt beispielsweise auf eine Region, und die damit verbundene Seite wird geöffnet.

{{:inf:web:ik-17-2.jpg?200|}}
 
Früher waren Imagemaps als Navigationselemente äußerst beliebt. Man setzte auf grafisch aufwendig gestaltete Designs und machte sich noch nicht viele Gedanken über die Barrierefreiheit der Seiten. In der heutigen Zeit werden Imagemaps kritisch gesehen, denn sie können nicht von allen alternativen Ausgabegeräten interpretiert werden. Zwar können Sie die Hotspots für eine bessere Zugänglichkeit für die alternativen Ausgabegeräte mit Alternativtexten versehen, doch kommen Textbrowser wie Lynx mit einer herkömmlichen Imagemap nicht klar. Dies ist immer ein deutliches Anzeichen dafür, dass die Seite auch für einige alternative Ausgabegeräte nicht zugänglich sein wird. Aus diesem Grund sollten Sie Imagemaps möglichst nur als alternative Navigationsmöglichkeit zu einer barrierefreien Hauptnavigation verwenden.

==== Imagemaps erzeugen ====
Sie können Imagemaps aus beliebigen Webgrafiken erzeugen. Die als Imagemap dienende Grafik wird wie ein "normales" Bild mit dem Tag ''img'' angegeben. Allerdings versehen Sie das Tag ''img'' mit dem Attribut
''usemap''.

**Beispiel: Imagemap mit runden Hotspots** 

++++ Quelltext |
<code html imagemap.html> 
<!doctype html>
<html>
<head>
<link rel="alternate" type="application/rss+xml" href="rss-feed.xml" title="RSS-Feed">
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<link rel="shortcut icon" type="image/x-icon" href="../../src/favicon.ico">
<link rel="author" title="Impressum" href="../../editorial/impressum.htm">
<link rel="contents" title="Inhaltsverzeichnis" href="../../navigation/inhalt.htm">
<link rel="index" title="Stichwortverzeichnis" href="../../navigation/stichwort.htm">
<link rel="search" title="Suche" href="../../navigation/suche/index.htm">
<link rel="help" title="Hilfe" href="../../editorial/index.htm">
<link rel="copyright" title="Urheberrecht" href="../../editorial/copyright.htm">
<link rel="top" title="SELFHTML" href="../../index.htm">
<link rel="up" title="HTML-Kopfdaten" href="index.htm">
<link rel="next" title="Durchsuchbarkeit mit Server-Kommunikation" href="durchsuchbarkeit.htm">
<link rel="prev" title="Adressbasis und Zielfensterbasis" href="basis.htm">
<link rel="first" title="Titel einer HTML-Datei" href="titel.htm">
<link rel="last" title="Durchsuchbarkeit mit Server-Kommunikation" href="durchsuchbarkeit.htm">
<meta charset="utf-8">
<title>Imagemap</title>
<style type="text/css">
.links {
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	width: 200px;
}
</style>
</head>

<body>
<p>
<img src="schaubild.gif" alt="Motivation" width="640" height="587" usemap="#Schaubild">
  <map name="Schaubild">
    <area shape="circle" coords="307,123,91" href="#" alt="Technologie">
    <area shape="circle" coords="173,296,97" href="#" alt="Organisation">
    <area shape="circle" coords="411,420,148" href="#">
  </map>
</p>
</body>
</html>
</code>
++++

{{:inf:web:schaubild.gif?100}}

{{:inf:web:ik-18-1.jpg?700|}}

{{:inf:web:ik-18-2.jpg?700|}}

{{:inf:web:ik-18-3.jpg?700|}}

Die benötigten Koordinaten finden Sie am besten heraus, wenn Sie die Grafik in einem Programm wie etwa Adobe Photoshop öffnen. Wenn Sie mit der Maus über die Grafik fahren, zeigt das Info-Bedienfeld Ihnen die Koordinaten des gerade überfahrenen Bereichs an. Außer Photoshop sind auch Freeware-Programme wie etwa The Gimp geeignet.

Achten Sie darauf, auch bei ''<area>-Tags <alt>''-Attribute zu verwenden, um die Benutzerfreundlichkeit zu verbessern. Falls die Grafik nicht dargestellt werden kann, werden dann stattdessen diese Texte angezeigt.


\\ \\ 

===== Logische Verlinkung =====
==== Hierarchische Beziehungen ====
Ein Webauftritt besteht gewöhnlich nicht einfach aus einer Anhäufung von Webseiten, die nichts miteinander zu tun haben. Vielmehr haben die meisten Seiten eine hierarchische Beziehung zueinander oder gehören zu einer Abfolge von Seiten (wie zum Beispiel bei einer Bedienungsanleitung). Zu vielen Sites gehören auch Stylesheet-Dateien, Favicons, Feeds usw.

Ein Feed oder Newsfeed ist ein über das Web angebotener Nachrichtenstrom, der mit einem Feedreader gelesen werden kann. Der Nutzer kann damit die Inhalte häufig aktualisierter Websites verfolgen, ohne den Webauftritt selbst besuchen zu müssen. Feeds liegen zumeist im RSS- oder Atom-Format vor.

Ein Favicon ist ein Symbol, das im Browser neben dem Dokumenttitel angezeigt wird.

{{:inf:web:ik-19-1.jpg?300|}}


Im ''head''-Bereich Ihrer Webseiten können Sie solche Beziehungen und die zugehörigen Ressourcen wie Stylesheets usw. notieren.

Eines der bekanntesten Einsatzgebiete für die logische Verlinkung ist ''<link rel="stylesheet">'' zum Einbinden eines externen Stylesheets.

==== Darstellung logischer Verlinkung ====
In manchen Browsern - zum Beispiel Opera, iCab, Netscape und Lynx - gibt es Schaltflächen, mit denen bestimmte logische Verlinkungen visualisiert und nutzbar gemacht werden. Geben Sie beispielsweise im Kopf Ihrer Seite eine logische Verlinkung zu einer Impressumsseite an und definieren dabei Copyright als Beziehung, wird die vordefinierte Copyright-Schaltfläche des Browsers aktiv und bringt den Nutzer nach einem Klick zu dieser Impressumsseite.

Im Kopfbereich der Wikipedia-Seite sind beispielsweise die Linktypen ''link rel="search"'' sowie ''link rel="Copyright"''  definiert und mit den URLs zu den entsprechenden Seiten versehen. Deshalb sind in der Opera-Menüleiste die beiden Schaltflächen Suchen und Copyright aktiviert.

{{:inf:web:ik-19-2.jpg?450|}}

In Opera zeigen Sie die Menüleiste für die logische Verlinkung mit dem Menübefehl Ansicht - Symbolleisten -Navigationsleiste an.
Andere Arten logischer Verlinkung, wie etwa Feeds oder Favicons, werden in der Adresszeile bzw. im Browser-Tab angezeigt.
Auch Suchdienste usw. haben es mit logischen Verlinkungen leichter, die Seitenstruktur Ihres Webauftritts zu erfassen. In Zukunft wird diese Möglichkeit sicherlich an Bedeutung gewinnen.

**Syntax des link-Elements**

{{:inf:web:ik-20-1.jpg?700|}}


==== Linktypen für logische Verlinkung ====
**Praxisrelevante Linktypen**

Momentan sind nur vier Linktypen für die Praxis von größerer Bedeutung:

{{:inf:web:ik-20-2.jpg?700|}}

{{:inf:web:ik-21-1.jpg?700|}}

Mit dem MIME-Typ (MIME = Multipurpose Internet Mail Extensions) werden die Struktur und der Aufbau von E-Mails festgelegt. Der MIME-Typ wird aber auch zur Deklaration von Inhalten in verschiedenen Internetprotokollen verwendet.

**Weitere Linktypen**

Außerdem gibt es noch weitere Linktypen für die logische Verlinkung, die in der Praxis aber eher selten verwendet werden. Viele davon aktivieren die entsprechende Schaltfläche im Browser, wenn dieser eine Menüleiste für die logische Verlinkung enthält.

Die folgende Tabelle bietet einen Überblick.

{{:inf:web:ik-20-2.jpg?700|}}

\\ \\ 

===== Auf eine andere Adresse umleiten =====

Sie können von der aktuellen Seite automatisch auf eine andere Seite umleiten. Diese Folgeseite wird nach einer festgelegten Zeit geladen und angezeigt. Man spricht auch von Tunnel- oder Doorway-Seiten.
Eine automatische Weiterleitung sollte nur mit gutem Grund angewendet werden, weil sie die Benutzerfreundlichkeit der Site verringert. Der Nutzer sollte kontrollieren können, was er im Browser darstellen und welche Seite er ansteuern möchte.

Achten Sie darauf, den Nutzer auf der Seite darauf hinzuweisen, in wie vielen Sekunden er weitergeleitet wird. Am besten bieten Sie zusätzlich einen direkten Hyperlink zum Weiterleitungsziel an.
Für die Weiterleitung verwenden Sie das Attribut ref resh des meta-Tags im head-Bereich Ihrer Seite:

<code html>
<meta http-equiv="Refresh" content="15;URL=../index-neu.html" />
</code>

Hier wird die Seite ''index-neu.html'' nach 15 Sekunden geladen.

Die meisten Suchmaschinen indizieren keine Seiten, deren ref resh-Wert kleiner als fünf Sekunden ist.
In der Praxis wird diese Technik auch verwendet, um auf die aktuelle Seite weiterzuleiten, diese also zu aktualisieren. So stellen Sie sicher, dass häufig aktualisierte Informationen tatsächlich immer aktuell sind und nicht etwa aus dem Browser-Cache geholt werden.