Strukturplanung

von Philipe Fatio | 0 | 4749 Aufrufe

Anzeige Hier werben

Konzept

Eine Internet Seite besteht aus Elementen, wie z.B. dem Menü, der Kopfzeile oder dem Hauptinhalt. Bevor man eine Seite aufbaut, sollte man sich Gedanken über die Strukturierung machen.

  • Was soll alles auf der Seite stehen?
  • Welche Designmöglichkeiten soll die Seite bieten?
  • Wie soll die Seite aufgebaut werden?

Planung

Wir erstellen uns eine Liste mit allen wichtigen Elementen:

  • Überschrift
  • Menü
  • Primärinhalt
  • Sekundärinhalt
  • Fussnote

Danach müssen wir für jedes einzelne Element planen, welches HTML nötig ist.

Überschrift

Der Name der Seite ist die wichtigste Überschrift auf der Seite. Deshalb eignet sich das <h1> Tag perfekt.

 
HTML
1
<h1>Meine Seite</h1>

Das <h1> Tag bietet genügend Design- Flexibilität, um es z.B. mit CSS durch ein Bild zu ersetzen. Möchte man noch mehr Möglichkeiten fürs Design haben, dann kann man es in ein <div> einfügen, ist aber meist nicht nötig.

 
HTML
1
2
3
<div>
    <h1>Meine Seite</h1>
</div>

Falls es nicht das einzige <h1> Tag auf der Seite sein soll, kann man es mit einer ID versehen, um es per CSS einfacher zu formatieren.

 
HTML
1
<h1 id="ueberschrift">Meine Seite</h1>

Menü

Ein Menü besteht meistens aus einer Auflistung mehrerer Links. Deshalb eignet sich eine <ul> (Ungeordnete Liste) dafür. Die Links werden in <li> (Listen Element) eingeschlossen. Damit diese Liste per CSS formatiert werden kann, geben wir ihr noch eine ID.

 
HTML
1
2
3
4
5
6
<ul id="menue">
    <li><a href="#">Home</a></li>
    <li><a href="#">Produkte</a></li>
    <li><a href="#">Forum</a></li>
    <li><a href="#">Kontakt</a></li>
</ul>

Da Listen Blockelemente sind, ist ein umschliessendes <div> nicht nötig.

Inhalt

Der Primär- und Sekundärinhalt sind im Grunde Sektionen oder Bereiche der Seite. Deshalb werden hierfür die <div>'s verwendet. Wir geben beiden eine ID, damit man sie mit CSS formatieren kann.

 
HTML
1
2
3
4
5
6
<div id="primaer">
    Primärinhalt
</div>
<div id="sekundaer">
    Sekundärinhalt
</div>

Wenn man den Primär- und den Sekundärinhalt per CSS nebeneinander darstellen will (zweispaltig), muss man beide <div>'s in einem anderen platzieren. Dem geben wir ebenfalls eine ID.

 
HTML
1
2
3
4
5
6
7
8
<div id="inhalt">
    <div id="primaer">
        Primärinhalt
    </div>
    <div id="sekundaer">
        Sekundärinhalt
    </div>
</div>

Fussnote

Meistens besteht eine Fussnote einfach aus einem kurzen Text bzw. einem Paragraph Text wie z.B. "Copyright" oder ähnlich. Hierfür können wir einfach ein <p> verwenden. Ein <div> ist nicht nötig, da das <p> ein Blockelement ist. Dem geben wir ebenfalls eine ID.

 
HTML
1
2
3
<p id="fussnote">
    Copyright &#169; 2007
</p>

Hat man aber mehrere Links wie z.B. einen Link zum XHTML oder CSS Validator, kann man eine <ul> benutzen.

 
HTML
1
2
3
4
5
<ul id="fussnote">
    <li>Copyright &#169; 2007</li>
    <li><a href="http://validator.w3.org/check/referer">XHTML</a></li>
    <li><a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></li>
</ul>

Einpacken

Damit wir mehr Designfreiheit haben, wie z.B. die Seite zu zentrieren, packen wir alle oben genannten Elemente in ein <div> ein. Diesem geben wir eine ID.

 
HTML
1
2
3
<div id="packet">
    Alle andere Elemente hier
</div>

Resultat

Das Resultat ist ein sehr kompakter, kleiner und mobiler HTML Code, den man ohne Schwierigkeiten auf einem mobilen Gerät wie ein PDA oder sogar ein Handy darstellen kann. Bei diesem Beispiel wurden nur wenige <div>'s benutzt, da es überhaupt nicht nötig ist. Alle HTML Elemente wurden semantisch korrekt benutzt, d.h. die Elemente wurden so gebraucht, dass sie einen Sinn ergeben. Z.B. wurde eine Liste verwendet, um das Menü darzustellen und nicht einfach Textlinks, die mit einem Zeichen wie "|" getrennt sind. Dies kann man nämlich später per CSS problemlos erledigen.

Der Code sollte jetzt ungefähr so aussehen:

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
    <head>
        <title>Meine Seite</title>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    </head>
    <body>
        <div id="paket">
            <p id="springen"><a href="#inhalt">Direkt zum Inhalt</a></p>
            <h1>Meine Seite</h1>
            <ul id="menue">
                <li><a href="#">Home</a></li>
                <li><a href="#">Produkte</a></li>
                <li><a href="#">Forum</a></li>
                <li><a href="#">Kontakt</a></li>
            </ul>
            <hr />
            <div id="inhalt">
                <div id="primaer">
                    Primärinhalt
                </div>
                <hr />
                <div id="sekundaer">
                    Sekundärinhalt
                </div>
            </div>
            <hr />
            <ul id="fussnote">
                <li>Copyright &#169; 2007</li>
                <li><a href="http://validator.w3.org/check/referer">XHTML</a></li>
                <li><a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></li>
            </ul>
        </div>
    </body>
</html>

Kompatibilität

Wenn man diese Seite auf einem alten Browser, PDA oder Handy öffnen würde, würde kein CSS dargestellt werden (auf dem Computer würde auch kein CSS dargestellt werden, da wir noch kein CSS verlinkt haben). Damit der Besucher auf unserer Seite trotzdem problemlos navigieren kann, fügen wir noch kleine Hilfen ein: Wir erstellen als erstes HTML Element einen Link, damit der Besucher direkt zum Inhalt springt, da es auf dem Handy mühsam ist zu scrollen. Diesem Link geben wir eine ID, damit wir es für den Computer verstecken können. Einen Link, der nach oben springt bringen wir noch in die Fussnote hinein. Wir können auch <hr />'s (horizontale Linie) einfügen, damit die verschiedenen Elemente der Seite auch visuell getrennt sind.

Beim Betrachten des obigen Beispiels kann man sehen, wie die Datei ohne Formatierung aussieht. Hätte man es mit Tabellen gemacht, wäre es ohne Formatierung strukturell nicht verständlich und auf einem mobilen Gerät nicht darstellbar. Der Code wäre auch um einige Zeilen länger.

Über den Autor: Philipe Fatio
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
Profilseite betrachten