systemconsulting: Seitengestaltung 3

Überlegungen zur optimalen Webseitengestaltung:

Bevor wir uns mit der Bildschirmanpassung und der Integration der Navigationsleiste beschäftigen, klären wir ab (gehört eigentlich bereits zu Punkt 5. unserer Punkteliste), wie wir Kardinanalfehler in der Suchmaschinenoptimierung vermeiden. Bei Betrachtung des Menüs links könnte man leicht auf den Gedanken kommen, der Entwickler hat noch nie etwas von Selektionsfeldern gelesen oder gehört (<select><option>irgend was</option></select>) - keine Angst - hat er doch und von den damit einhergehenden Fehlern auch.

Suchmaschinen und Javascript-Links sind wie "Feuer und Eis". Damit Ihre Web-Seite indiziert wird ist das bewährteste und sicherste Mittel auch eines der ältesten aus den HTML-Elementen - der Link-Operator "<a href="">Link</a>" und der funktioniert eben gar nicht mit Auswahlfeldern (Selects), weshalb dringend empfohlen wird, Auswahlfelder zu simulieren und mit originären "<a href="">Link</a>"s zu arbeiten. Natürlich können Sie den Suchmaschinen eine Link-Seite "unterjubeln" aber damit beginnt der Betrugsversuch und aus eigener Erfahrung möchte ich davor ausdrücklich warnen.

Wir arbeiten also in der Navigation für unsere Hotelseite mit ordentlichen Links und schreiben deshalb die einzelnen Verweise (Links) in ein <div>-Element. Demnach sieht unserem Browsermodell entsprechend die Navigation folgendermaßen aus:

Der Innnere <div> zwischen den Links und der Adresse dient dabei einzig und alleine der Höhenanpassung der Adresse als "Schieber" und könnte mit etwas "Fuscheln" auch mit <br>s ersetzt werden. Wir wollen hier "punktgenau" arbeiten und greifen auf diesen "Höhenregler" zurück.

Damit kann allerdings Javascript noch nicht viel anfangen. Wir haben zwei Möglichkeiten: a) wir machen aus dem obigen Menü einen Bandwurm und entfernen alle Leerzeichen, um diesen "Bandwurm" dann mit der Anweisung document.write() ind unsere Tabellenzelle zu schreiben - oder - b) wir schreiben die Navigation Zeile für Zeile in eine Variable (bei Änderungen werden Sie wahrscheinlich den "Bandwurm" eh wieder auflösen) und können auch in Zukunft bei erforderlichen Änderungen schnell und strukturiert reagieren. Also, wählen wir die Vorgehensweise b)

navigation='';
navigation=navigation+'<div>';
navigation=navigation+'<a href="hotel.html">UNSER HOTEL</a><br>';
navigation=navigation+'<a href="restaurant.html">UNSER RESTAURANT</a><br>';
navigation=navigation+'<a href="speisekarte.html">DIE SPEISEKARTE</a><br>';
navigation=navigation+'<a href="getraenkekarte.html">DIE GETRÄNKEKARTE</a><br>';
navigation=navigation+'<a href="reservierung.html">RESERVIERUNGEN</a><br>';
navigation=navigation+'<a href="anfahrt.html">ANFAHRT</a><br>';
navigation=navigation+'<a href="impressum.html">IMPRESSUM</a><br>';
navigation=navigation+'<a href="disclaimer.html">DISCLAIMER</a>';

if(screen.availHeight>1000){
navigation=navigation+'<div style="height: n px;"></div>';
}else{
navigation=navigation+'<div style="height: m px;"></div>';
}

navigation=navigation+'GUSTAV-AUERBACHWEG 6<br>';
navigation=navigation+'989877 MUSTERHAUSEN<br>';
navigation=navigation+'FON: (0 47 11) 2 40 80<br>';
navigation=navigation+'FAX: (0 47 11) 2 40 66<br>';
navigation=navigation+'E-MAIL: INFO@ZUM BÄREN<br>';
navigation=navigation+'WWW.ZUM-BÄREN.D';
navigation=navigation+'</div>';

document.write(navigation);

Die Parameter n bzw. m im Script können Mathe-Fans aus dem Parameter n4 (der Höhe des <div>s für Informationen errechnen lassen oder es wird ganz einfach "getüfftelt". Nachdem solchermaßen die Voraussetzungen geklärt sind, wollen wir mit einer ordentlichen DEMO unseren Punkt 6. zur Web-Seiten-Gestaltung abschließen. Die erforderlichen Dateien können Sie auf der Folgeseite kopieren und Ihren jeweiligen Anforderungen anpassen. Schauen Sie sich bitte die Quelltexte zur DEMO an - Sie werden nicht einen Eintrag zu Inhalten finden:

Übrigens: Nur die Links "Hotel" und "Restaurant" sind belegt - Sie sollen ja auch selbst noch üben.

<<<< Zu Seite 2 "Seitengestaltung" Zu Seite 4 "Seitengestaltung" >>>