Überlegungen zur optimalen Webseitengestaltung:

Wir hatten auf der vorherigen Seite ein kleines Browsermodell mit drei wichtigen Elementen entwickelt:

a) Man kann Seiteninhalte mit Javascript schreiben und das entsprechende Script (im Beispiel ein Menü) in beliebig viele Webseiten einbinden. Änderungen, die später erforderlich werden, vollzieht man in genau diesem Script und alle Seiten, welche mit diesem Script arbeiten sind aktualisiert.

b) Mit einem bzw. mehreren Tabellenkonstrukt(en) kann der Anwenderbildschirm so aufgeteilt werden, dass unabhängig von der eingestellten Bildschirmauflösung ein vernünftiges Gesamtbild angeboten wird. Auf diese Konstrukte kann in den Formatanweisungen (Höhe und Breite oder "height" and "width") gut Einfluss genommen werden, so dass die Bedienbarkeit der Seite weitestgehend unabhängig vom System der Anwender gemacht werden kann.

c) Das dritte und tragende Element zur Präsentation der eigentlichen Seiteninhalte ist ein "<div>", der die Seiteninhalte im Sinne einer "Masterfolie" präsentiert (wohl beinahe nicht notwendig zu erwähnen, dass es auch mehrere "<div>"s sein können) und damit verabschieden wir uns von einem Browser - dem Opera. Opera bringt das Div-handling seit Generationen nicht auf die Reihe und gehört eigentlich für dieses Verhalten aus der Browserlegion ausgeschlossen. Selbstverständlich arbeitet unser Browsermodell auch in Opera, nur eben nicht so komfortabel.

Kurzbemerkung zu Browsern, Javascript etc.:

Es gab eine Zeit, in der durfte die "heilige Kuh" User-System nicht "geschlachtet" werden. Web-Entwickler mussten für die Minimal-Auflösung 640 x 480 Pixel entwickeln (noch heute sehen Sie hinreichend Web-Seiten mit kleinem Anzeigefenster und fettem, inhaltslosem Rand. Diese oder deren Entwickler stammen aus diesen Zeiten), Javascript war verpöhnt und vieles mehr. Die Kuh ist von selbst gestorben. Ohne Javascript kann niemand "googlen" oder "ebayen" ... Und wer heute noch auf einem schwarz-orangen Hercules-Bildschirm mit 640 x 480 Pixeln "surft" hat einfach "den Zug der Zeit verpasst". Wir gehen hier schon von Javascript fähigen Browsern und einer Mindestauflösung von 1024 x 768 Pixeln aus. Die vorgestellten Scripts können zwar auch auf niederere Bildschirmauflösungen eingestellt werden - aber - nicht ohne Javascript.

Zurück zu unserem Browser-Modell:

Wir hatten als Grundmodell eine Tabelle mit drei Zeilen und ein bzw. im Mittelteil zwei Spalten. Die HTML-CSS-Struktur kann (vereinfacht) dem nachfolgenden Schema entnommen werden. Wichtig sind dabei die rot gekennzeichneten Formatanweisungen. 

      <table align="center" width="100%">

        <tr>
          <td colspan=2> Header <td>
        </tr>
      
        <tr>
          <td style="width:n1 px;">
            <script src="menu.js"></script>
            <div style="height:n2 px;">Höhenregler</div>
            <script src="adresse.js"></script>
          </td>
          <td>
            <div style="height:n3 px; width:n4 px; overflow-x:hidden; overflow-y:scroll;"
          </td>
        </tr>
      
        <tr>
          <td colspan=2> Footer <td>
        </tr>

      </table>


Damit kamen wir zur Darstellung dieser Tabelle (Browsermodell):



Ehrlich - Sie haben geschaut - geschaut, ob diese Tabelle nun im Seitentext steht? Nein, tut sie nicht. Diese Tabelle wurde mit allen Funktionen via Javascript eingefügt. Wenn sich das machen lässt, dann können wir wohl erst recht darauf vertrauen, dass sich die Navigation regeln lässt. Doch zunächst sollen die oben (im Tabellenschema) rot geschriebenen Größenangaben diskutiert werden.

Wir haben genau drei Größenangaben, wie folgt:

  • n1 gibt an, wie viel Platz in Pixeln für die Breite der Navigation reserviert wird
  • n2 ist ein "Höhenregler" und schiebt die Adresse nach unten, genau da, wo wir diese haben wollen

  • n3 bestimmt die Breite des Bereichs mit den Informationen

  • n4 bestimmt die Höhe des Bereichs mit den INformationen


    • n3 und n4 sind damit die wichtigsten Parameter unseres ganzen Browsermodells. Sie bestimmen, ob der Browser rechts ein hässliches Scrollbar anzeigt, oder ob die Information mit integriertem Scrollbar elegant in der Seite plaziert wird. Voraussetzung: wir müssen die Bildschirmauflösung abfragen können und diese beiden Parameter entsprechend zuweisen. Und die Bildschirmauflösung abzufragen ist gar kein Problem:



    Kicken Sie ruhig einmal den obigen Button. So, und damit hätten wir nun alle Voraussetzungen für eine Maßanpassung des Browserfensters unserer Seitenbesucher zusammen und können an die Arbeit gehen.



    <<<< Zu Seite 1 "Seitengestaltung"     Zu Seite 3 "Seitengestaltung" >>>