10 Tipps zum Optimieren deiner Website nach den Standards des DIV Konsortiums:
Tipp 1)
DIVs sind ein sehr flexibles Element zur Formatierung der Seite. Setze sie überall ein, wo du gerade Lust hast.
Tipp 2)
Eine Seite ohne mindestens zwanzig DIVs ist keine Seite. Bedenke: Jeder kann deinen Quellcode sehen. Profis haben auch auf der obligatorischen Tunnelseite (mit nur einem mittig ausgerichteten Bild) rund zwanzig kompliziert geschachtelte DIVs mit jeweils unsichtbaren Inhalten, der nur die Suchmaschinen erfreut.
Tipp 3)
Am besten setzt man, um beim Formatieren der Seite freie Hand zu haben, erst einmal in den Body jeder Seite eine standardmäßige Auswahl DIVs.
Man kann nie zu viele DIVs verwenden.
Schreibe also statt
|
Quellcode
|
1
2
3
4
5
|
</head>
<body>
Inhalt der Seite
</body>
</html>
|
besser
|
|
Quellcode
|
1
2
3
4
5
6
7
8
9
10
11
|
</head>
<body>
<div id="aussendiv">
<div id="mitteldiv">
<div id="innendiv">
Inhalt der Seite
</div>
</div>
</div>
</body>
</html>
|
Du musst sie erst einmal nicht formatieren, sie stören auch nicht die Übersichtlichkeit der Seite, erlauben aber nachträglich noch viele Veränderungen.
Ähnlich kann man überall verfahren, wo man sich nicht sicher ist, ob man nicht irgendwann einmal noch ein DIV mehr brauchen könnte.
Tipp 4)
Wenn du die Verschachtelung deiner DIVs nicht mehr verstehst, das macht nichts - der Browser versteht es bestimmt! Ein Browser ist ja schließlich kein Mensch, er kann nie den Überblick verlieren.
Tipp 5)
DIVs können viele Elemente ersetzen, zum Beispiel <h1> bis <h6>.
Schreibe also statt
|
|
Quellcode
|
1
|
<h1>Überschrift der Seite</h1>
|
oder gar
|
|
Quellcode
|
1
|
<p><font size="6" color="red">Überschrift der Seite</font></h1>
|
besser
|
|
Quellcode
|
1
|
<div style="font-size:1.5em; color:red;">Überschrift der Seite</div>
|
Tipp 6)
Am besten verwendet man <div> anstelle von <p>. Dies verhindert unschöne Probleme, wenn sich ein Browser dazu herablassen sollte, Absätze irgendwie anders darzustellen als dein Browser. Ein DIV ist immer unformatiert!
Schreibe also statt
|
|
Quellcode
|
1
|
<p>Dies ist ein Absatz</p>
|
besser
|
|
Quellcode
|
1
|
<div class="absatz">Dies ist ein Absatz</p>
|
Tipp 7)
Der horizontale Trenner ist überflüssig.
Schreibe also statt
|
|
Quellcode
|
1
|
<hr style="color:navy; background-color:navy; width:65%; height:2px;">
|
besser
|
|
Quellcode
|
1
|
<div style="width:65%; height:0px; border-bottom:2px solid navy;"></div>
|
Das erspart lästiges Nachdenken, ob <hr> oder <ht> oder <hw> der Trenner war...
Tipp
Zum Layouten nimm keine Tabellen, sondern DIVs.
Schreibe also statt
|
|
Quellcode
|
1
2
3
4
5
|
<table border="2">
<tr>
<td>Inhalt der Seite</td>
</tr>
</table>
|
besser
|
|
Quellcode
|
1
2
3
4
5
|
<div style="position:absolute; top:0px; left:0px; height:100%; width:2px; background-color:gray"></div>
<div style="position:absolute; top:0px; left:0px; height:2px; width:100%; background-color:gray"></div>
<div style="position:absolute; bottom:0px; left:0px; height:2px; width:100%; background-color:black"></div>
<div style="position:absolute; top:0px; right:0px; height:100%; width:2px; background-color:black"></div>
<div style="position:absolute; top:2px; right:2px; height:99%; width:99%; overflow:auto">Inhalt der Seite</div>
|
Es lohnt sich!
Tipp 9)
Tabellen sind allgemein out, sie benötigen zu viele Elemente (<table>, <thead>, <tbody>, <tfoot>, <tr>, <td>, <th> etc).
Schreibe also statt
|
|
Quellcode
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<table caption="Entwicklung 2002-2003">
<tr>
<th></th>
<th>2002</th>
<th>2003</th>
</tr>
<tr>
<th>Umsatz</th>
<td> 20,4 Mio.</td>
<td> 21,6 Mio.</td>
</tr>
<tr>
<th>Gewinn</th>
<td> 0,8 Mio.</td>
<td> 1,1 Mio.</td>
</tr>
</table>
|
besser
|
|
Quellcode
|
1
|
<div style="float:left; width:5em;" title="Entwicklung 2002-2003"></div><div style="float:left; width:5em;">2002</div><div style="float:left; width:5em;">2003</div><div style="float:left; width:5em; clear:left;">Umsatz</div><div style="float:left; width:5em;"> 20,4 Mio.</div><div style="float:left; width:5em;"> 21,6 Mio.</div><div style="float:left; width:5em; clear:left;">Gewinn</div><div style="float:left; width:5em;"> 0,8 Mio.</div><div style="float:left; width:5em;"> 1,1 Mio.</div>
|
Jeder weiß sofort, was gemeint ist, und unschöne Unterschiede zwischen den Darstellungen einiger Browser werden vermieden.
Tipp 10)
Wenn du auch nur einen der neun obigen Tipps jederzeit befolgen würdest, lass das Webdesign lieber bleiben.
WebStyleBoard »
Webmaster »
Sonstiges »
Zitat von »t-ob-i«
wir sollten vielleicht drauf hinweisen das wir uns hier mit ironie beschäftigen
Samstag, 26. Mai 2012, 07:46
Zum Seitenanfang
