Home
Webseiten gestalten
Musik digitalisieren
Unterhaltungselektronik
Digitalfotografie
Witzige Web Shops
Reale Welt
Fasaneriestr. 14

Gestaltung von Internetseiten

Die Erkenntnis ist ernüchternd: Der Cyberspace ist rechteckig, flach und besteht aus ineinander verschachtelten Kästen. Seine Tiefe bekommt das Internet dadurch, dass die Kästen durch Hyperlinks miteinander verbunden sind. Mehr ist nicht dahinter - alles nur rechteckige Kästen. Bunt und optisch ansprechend werden Webseiten dadurch, dass man den Kästen Gestalt verleihen kann: Größe, Farbe, Ränder, Schriftarten, Illustrationen und vieles mehr. Aber letztendlich bleiben es doch nur ineinander verschachtelte Rechtecke. Schauen Sie sich doch mal unter diesem Geschichtspunkt Ihre Lieblings-Web-Site etwas genauer an!

Ich möchte Sie hier ein wenig hinter die Kulissen von www.bajak.de schauen lassen. Vielleicht bekommen Sie ja Lust, sich auch ein Heim im Cyberspace einzurichten. Das ist gar nicht so schwierig!

Der Werkzeugkasten

Neben meinem PC brauche ich nur 3 weitere Werkzeuge: ein Buch, eine Web Site und einen HTML-Editor.

Das Buch ist für die theoretischen Grundlagen und zum Nachschlagen.

Stefan Münz
Professionelle Websites
Addison-Wesley Verlag, 2006

Das gibt es gedruckt z.B. bei Buch bei amazon amazon oder als kostenloses eBook bei eBook bei Ciando Chip.de.

Die Web Site Selfhtml Web Site Selfhtml (auch von Stefan Münz) bietet unzählige Beispiele, die sich meist mit Kopieren und Einfügen direkt  in die eigene Seite übernehmen lassen.

Zum Bearbeiten schließlich verwende ich den kostenlosen HTML-Editor Download Freeware KompoZer KompoZer aus dem Mozilla-Projekt.

Seitenstruktur und Elemente

Das Gerüst meiner Webseiten bildet eine transparente Tabelle ohne Ränder, deren Zellen sich elastisch um die oben angesprochenen Rechtecke legt, welche die Elemente der Seite bilden. Für jede Zelle ist festgelegt, wie das enthaltene Rechteck ausgerichtet sein soll (links oben, rechts unten usw.). Die Tabelle als Ganzes ist entweder flexibel oder sie füllt einen bestimmten Prozentsatz der Seitenbreite aus. So wird die Struktur der Seite festgelegt.

Das Layout wird durch die Eigenschaften der Elemente bestimmt. Folgende Typen von Elementen werden verwendet (in Klammern jeweils die HTML-Namen):

  • Kästen (div),
  • Überschriften (h1, h2, ...),
  • Absätze (p),
  • Textbereiche (span),
  • Numerierte Listen und Bommel-Listen (ol, ul),
  • Bilder (img),
  • und natürlich Tabellen (table, tr, td), denn die können beliebig ineinander verschachtelt werden.

Diese Seite bespielsweise besteht aus einer zweispaltigen Tabelle mit zwei Zellen. Die Navigation ist in der linken Zelle untergebracht und besteht aus untereinander angeordneten Kästen, die die Navigationsschaltflächen in Form von JPG-Bildern enthalten. Der Textbereich in der rechten Zelle ist ein Kasten mit Überschriften, Absätzen und einer Bommel-Liste mit runden Bommeln. Einige Textbereiche sind zur Hervorhebung fett gestaltet.

Style Sheets

Die Eigenschaften der Elemente in einer Webseite werden in Formularen festgelegt, den Cascading Style Sheets (CSS). "Cascading" soll zum Ausdruck bringen, dass diese Formulare auf verschiedenen Ebenen vorkommen können: direkt am Element, gültig für alle gleichartigen Elemente einer Seite sowie extern und damit gültig für alle zusammengehörenden Seiten einer Web-Präsenz. Wenn Sie sich den Quelltext dieser Seite anschauen, dann finden Sie Style Sheets überall dort, wo "style" steht. Was die Eintragungen bewirken, versteht sich fast von selbst. Einige nicht so klare Eigenschaften sind vielleicht:

  • cellspacing - Raum zwischen den Zellen einer Tabelle
  • padding - Raum zwischen Kasten und Inhalt
  • margin - Außenabstand des Elements zu anderen Elementen

Die Menüstruktur im HTML-Editor KompoZer unterstützt das hier beschriebene Layoutkonzept in idealer Weise. Deshalb ist es eine wahre Freude, mit diesem Programm zu arbeiten, wenn man das Konzept einmal verstanden hat.

Weil die Kästen in meiner Web-Präsenz einen gewissen Abstand zueinander haben und die Struktur gebende Tabelle durchsichtig ist, scheint dazwischen der schwarze Hintergrund durch.

Stand: Dezember 2012 | Impressum