Website ohne Frames...

[Jeena Paradies]

Hallo,

Ich habe auch mitbekommen, dass man auf Frames und Tabellen verzichten soll, so weit wie möglich halt. Man soll auch auf die alten Browser rücksicht nehmen und alles. Wie mache ich das denn jetzt mit "Frames". [...] Wie mache ich das ohne Frames, wozu Frames eigentlich gedacht sind?

Das mit den alten Browsern kommt wohl erst durch erfahrung. Frames sind egentlich nicht dazu gedacht irgendwelche Sachen irgendwo zu positionieren (wozu im übrigen Tabellen auch nicht gedacht sind) sondern um zwei oder mehrere Dokumente innerhalb eines Browserfensters gleichzeitig anzuzeigen. Viele Fälle wo es sinnvoll ist fallen mir aber nicht ein, außer vielleicht bei einem Glossar.

Also wie Teile ich die Seite auf. Ich brauche ja eine Navigationsleiste und oben vielleicht noch ein Banner oder sowas.

Als erstes erstellst du dir mal ein so genanntes Template, in welches du dann deine Inhalte einpflegst. Anfangen tun wir mit einem XHTML Grundgerüst. Wenn das steht machen wir eine Navigationsleiste rein:

<ul id="navi">
 <li><a href="aboutme.html">Über mich</a></li>
 <li><a href="news.html">News</a></li>
 <li><a href="albums.html">Meine Alben</a></li>
  ... und so weiter ...
</ul>

Mehr musst du innerhalb von HTML für die Navigation nicht machen. Alles was das Aussehen dieser Navigationsleiste betrifft machst du mittels CSS, wobei dir Listamatic von maxdesign hervorragende Dienste leisten wird. Dieses CSS lagerst du dann in einer externen Datei aus.

Dann kommt der Banner. Hier gibt es die möglichkeit alles rechts oder links an ihm vorbeifließen zu lassen, dazu dient die CSS Eigenschaft float.

Im HTML würde das zum Beispiel so aussehen:

[KOPFDATEN]
<div id="header">
 <img id="logo" src="img/logo.png" alt="Logo: shyne" />
 [hier die Navigationsliste rein]
</div>
[FUßDATEN]

Das div mit der id="header" gruppiert das Logo und die Navigationsliste zur einer Gruppe mit der ID header. Das ist später beim formatieren mit CSS sehr nützlich, und außerdem muss bei manchen Versionen von XHTML ein Bild immer innerhalb eines Blockelementes sitzen. Also gleich zwei Fliegen mit einer Klappe geschlagen.

Jetzt fehlt uns noch der eigentliche Inhalt. Diesen musst du natürlich auch vernünftig auszeichnen, also <p> für Absätze benutzen, <h1>-<h6> für Überschriften, <ul> für ungeordnete Listen und so weiter. Um das alles als Inhalt zu gruppieren nehmen wir wieder ein <div> und grupieren das alles damit. Wir legen also alles in ein:

<div id="content">
 [hier kommt der ganze Inhalt rein]
</div>

das fügen wir dann noch zwischen das header div und die Fußdaten ein. Auf jeder Seite fügst du natürlich einen anderen Inhalt ein. Am besten speicherst du dir mal ein Template ohne Inhalt in einer extra Datei ab, die du zum Beispiel template.html nennst. Wenn du dann wieder eine neue Seite mit Inhalt machst lädst du einfach diese Templateseite und fügst deinen Inhalt ein. Dann natürlich unter einem anderen Namen abspeichern und fertig.

Das mit dem CSS ist aber ein wenig aufwendig, und man muss einfach erst einmal das CSS Kapitel von SELFHTML durchlesen, und dann einfach immer wieder üben, und in den Quelltext anderer gucken, oder sich seiten Suchen die sich damit beschäftigen und dort lesen und selbst ausprobieren.

Wenn du dann konkrete Fragen hast dann Frag einfach hier noch einmal nach.

Grüße
Jeena Paradies