 Tutorial: Grundlagen für die Designanpassung eines WBB 2.3.x |
|
|
| Tutorial: Grundlagen für die Designanpassung eines WBB 2.3.x |
Beitrag Nr.: 1      |
Da hier in der letzten Zeit immer wieder Fragen zur Anpassung des Designs aufkamen, möchte ich hier einmal ein Grundlagentutorial verfassen.
Ich bitte darum, nicht hier in diesem Tread zu antworten, sondern im Falle von Nachfragen einen gesonderten tread dafür zu benutzen. So kann ich diesen Tread hier im Zweifel anpassen, ohne das er völlig zerissen wird!
Erst einmal eine wichtige Grundlage.
Das Forum besteht grundsätzlich aus 3 Teilen.
<br />
<br />
Das <br /> jeweils am Ende fügt eine Leerzeile ein, dazu aber später mehr. Wichtig ist für jeden, erst einmal zu erkennen, das egal, welche Seite wir aufrufen, die gezeigte Seite grundsätzlich aus 3 separaten, einzelnen Bereichen besteht.
Rufe ich die Teamseite auf, so tritt der eigendliche Teambereich anstelle der Index, Footer und Header aber bleiben. Rufe ich das Portal auf, so ändert sich der mittlere Bereich zum Portal, der Footer und Header aber bleibt.
Jeder dieser 3 Bereiche stellt zugleich eine Tabelle dar.
__________________
Bis auf weiteres nur eingeschränkter Support
|
|
26.03.2011 14:00 |
 
|
|
|
|
| Dazu nun erst mal die Erklärung, was eine Tabelle ist. |
Beitrag Nr.: 2 |
Kümmern wir uns erst einmal darum, was ist eigendlich eine Tabelle.
Im Prinzip stellt eine Tabelle einen Rahmen dar. Wenn man so will ist eine Tabelle auch ein Designinstrument.
(Eine Tabelle mit 3 Zeilen und 3 Spalten
Tabellen kennen wir alle. Man macht Abrechnungen damit, oder stellt etwas Gegenüber. Im HTML-Bereich benutzen wir sie als "Korsett", wir gestalten ein Design damit, oder trennen etwas optisch etwas voneinander.
Eine HTML-Tabelle kann aber auch ganz einfach nur ein Rahmen sein, wie z.B. ein Bildrahmen
(Eine Tabelle mit einer Zeile und einer Spalte, also nur ein Rahmen)
Der reine Grundcode einer Tabelle ist
| code: |
1:
2:
3:
4:
5:
6:
|
<table>
<tr>
<td>
</td>
</tr>
</table> |
|
Erklärung des Codes:
<table> <------------- Beginn der Tabelle
<tr> <----------------- Beginn einer Zeile
<td> <----------------- Beginn einer Spalte
</td> <----------------- Ende einer Spalte
</tr> <----------------- Ende einer Zeile
</table> <------------ Ende der Tabelle
Dieser Grundcode wird innerhalb einer Programierung um bestimmte Attribute erweitert, die den einzelnen Tabellen/Zeilen/Spalten zusätzliche Eigenschaften zuweisen können, z.B.
<table style="width:100%"> <------------- Besagt, das die Tabelle 100% Breite einnehmen soll
<td align="left"> <------------- Besagt, das innerhalb der Spalte Linksbündige Ausrichtung herrschtl
Diese Erweiterungen lassen wir hier aber erst einmal außer acht, dazu könnte man ein gesondertes Tut verfassen. Kümmern wir uns also erst einmal weiter um den Grundcode
Der Code für die Tabelle ganz am Anfang, die mit den 3 Zeilen zu jeweils 3 Spalten lautet
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
|
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table> |
|
Wir sehen jetzt eine gewisse "Hierachie"
Ganz am Anfang beginnt die Tabelle mit <table>
Direkt unter dem Attribut <table> sitzt das Attribut <tr> für eine Zeile
Spalten <td> werden innerhalb des "Tags" <tr> geschrieben.
Jedesmal, wenn eine Spalte endet, muß man sie schließen mit </td>
Jedesmal wenn eine Zeile endet, schließt man sie mit </tr>
Endet die Tabelle, schließt man sie mit </table>
Der Code für die reine Zeile a 3 Spalten ist also immer
| code: |
1:
2:
3:
4:
5:
|
<tr>
<td></td>
<td></td>
<td></td>
</tr> |
|
Schauen wir uns die Index an, so beginnt sie immer mit einem
<table>
und endet mit einem
</table>
oder
</table> <br />
Das <br /> steht für Zeilenumbruch, wird aber hinter der Tabelle als "Leerstelle" eingesetzt, also einen Leerraum zwischen der Tabelle, und dem, was darunter beginnt.
Genauso, wie die Index innerhalb einer Tabelle aufgerufen wird, so wird auch jeder andere Forenzusatz innerhalb einer Tabelle aufgerufen!
__________________
Bis auf weiteres nur eingeschränkter Support
|
|
|
26.03.2011 14:29 |
|
|
|
|
| Die Rahmentabelle |
Beitrag Nr.: 4 |
Das ganze würde in etwa so aussehen
Der gelbe Bereich wäre unser vorhandenes Forum, also Header, Index und Footer
Da es sich um einen Rahmen handeln soll, müßen wir ja Rahmengrafiken um das ganze legen, dazu brauchen wir 8 zusätzliche Spalten zu der Spalte, in der sich unser Forum befindet.
1. Spalte Ecke Oben Links
2. Spalte Oberer Rahmen
3. Spalte Ecke Oben Rechts
4. Spalte Linker Rahmen
5. Spalte Unser Forum
6. Spalte Rechter Rahmen
7. Spalte Ecke Unten Links
8. Spalte Unterer Rahmen
9. Spalte Ecke Unten Rechts
Beziehen wir das auf unseren Code
<table cellpadding=0 cellspacing=0 border=0 width="98%">
<tr>
<td><img alt="" src="{$style['imagefolder']}/Rahmen/OL.gif"></td>
<td background="{$style['imagefolder']}/Rahmen/OM.gif" width="100%" height="9px"></td>
<td><img alt="" src="{$style['imagefolder']}/Rahmen/OR.gif"></td>
</tr>
<tr>
<td valign="top" background="{$style['imagefolder']}/Rahmen/LM.gif" width="9px"></td>
<td>
Hier die 3 Tabellen für Header/Index/Footer
</td>
<td valign="top" background="{$style['imagefolder']}/Rahmen/RM.gif" width="9px"></td>
</tr>
<tr>
<td><img alt="" src="{$style['imagefolder']}/Rahmen/UL.gif"></td>
<td background="{$style['imagefolder']}/Rahmen/UM.gif" width="100%" height="9px"></td>
<td><img alt="" src="{$style['imagefolder']}/Rahmen/UR.gif"></td>
</tr>
</table>
Grün: Tabellenbereich ... Anfang und Ende der Tabelle
Pink: Unsere erste Zeile mit 3 Spalten... den einzelnen Spalten sind Grafiken zugewiesen, sowie die Größe dieser Grafiken, in diesem Fall 9 Pixel
Braun: Unsere zweite Zeile. In der Spalte <td>Hier die 3 Tabellen für Header/Index/Footer</td> ist nachher unser Forum. In dieser Zeile sind die beiden Grafiken für Links und Rechts
Teakgrün: Unsere dritte Zeile mit den 3 Grafiken für den unteren Bereich
Wollen wir nun den Rahmen um das gesamte Forum legen, so müßte der Code in etwa so aussehen
<table cellpadding=0 cellspacing=0 border=0 width="98%">
<tr>
<td><img alt="" src="{$style['imagefolder']}/Rahmen/OL.gif"></td>
<td background="{$style['imagefolder']}/Rahmen/OM.gif" width="100%" height="9px"></td>
<td><img alt="" src="{$style['imagefolder']}/Rahmen/OR.gif"></td>
</tr>
<tr>
<td valign="top" background="{$style['imagefolder']}/Rahmen/LM.gif" width="9px"></td>
<td>
<table>
<tr>
<td>
</td>
</tr>
</table>
<br />
<table>
<tr>
<td>
</td>
</tr>
</table>
<br />
<table>
<tr>
<td>
</td>
</tr>
</table>
</td>
<td valign="top" background="{$style['imagefolder']}/Rahmen/RM.gif" width="9px"></td>
</tr>
<tr>
<td><img alt="" src="{$style['imagefolder']}/Rahmen/UL.gif"></td>
<td background="{$style['imagefolder']}/Rahmen/UM.gif" width="100%" height="9px"></td>
<td><img alt="" src="{$style['imagefolder']}/Rahmen/UR.gif"></td>
</tr>
</table>
Der Pinke Code ist der neue Tabellencode, der Schwarze Code ist unser Forum, bestehend aus 3 Tabellen.
Da unsere erste Tabelle im Header beginnt, können wir nun hier ganz leicht VOR dem ersten <table> unseren ersten Teil des Codes schreiben. Damit haben wir dann 2 Zeilen eingefügt, die erste Zeile mit den beiden oberen Ecken, und dem oberen "Strich, und eine zweite Zeile, mit unserem linken Rand. Enden tut der erste Code mit <td>, dort beginnt also die zweite Spalte der zweiten Zeile, wo das gesamte Forum drin sitzen soll.
Dann brauchen wir nur noch den Footer öffnen, und UNTER das letzte </table> den zweiten Teil unseres Codes darunter schreiben. Da unser Code dort mit </td> beginnt schließt sich hier die Spalte Zwei der zweiten Zeile. Dahinter kommt dann noch eine Spalte mit der Grafik Rechts. Zusätzlich ist im Code noch die dritte Zeile für die Grafiken unten enthalten.
__________________
Bis auf weiteres nur eingeschränkter Support
|
|
|
26.03.2011 15:20 |
|
|
|
|
Kommen wir nun zu einem weiteren Bereich des Designs,
Foren Trennen und Beiträge trennen.
(Bild von einem Testforum. Die einzelnen Forenbereiche sind getrennt. Um jede Kategorie ist ein Rahmen)
(Bild aus dem Testforum von Beiträgen. Die einzelnen Beiträge sind nun getrennt, und um jeden Beitrag ist ein Rahmen)
Für diese beiden Sachen gibt es ausgezeichnete Tutorials von Fi®eb@ll
Ich werde diese Tutorials hier nicht wiedergeben, dazu müßte ich mir erst die Erlaubniss des Autoren einholen. Ich denke aber, wer etwas über das Designen lernen will kann auch ruhig aus die Seite von myWBB gehen, und es dort nachlesen. Ich poste dazu also hier nur die Links
Beiträge trennen mit und ohne Abschlussgrafiken + thread_postbit re-design
Tutorial: Foren trennen und mit Rahmengrafiken versehen
Tutorial: Beiträge trennen und mit Rahmengrafiken versehen
Template-Tutorial: Beiträge trennen und mit Rahmengrafiken versehen
Foren trennen & mit Rahmengrafiken versehen
An dieser Stelle ein Dank an Fi®eb@ll, der sich die Mühe gemacht hat, diese völlig verschachtelte Hirachie des Forums zu durchforsten, um die Trennung im Design zu ermöglichen.
WICHTIG! Rahmen um Foren funktionieren NICHT, wenn man im Forum folgende Hirachie aufbaut:
Überkategorie
Kategorie
Forum
----Unterforen und ----Unterunterforen
Sobald man eine Überkategorie einrichtet, in der dann Kategorien sitzen, kommt es zu Styleverschiebungen, wenn man einen Rahmen um die Foren (Kategorien) legen will. Ich selbst habe Wochen dabei zugebracht die verschachtelte Hirachie zu durchforsten, um dort einen Fehler zu finden. Auch mir ist es nicht gelungen, dieses Problem zu lösen. Wer also in seinem Forum auch Überkategorien einsetzt, sollte auf Rahmen um die Foren verzichten!
__________________
Bis auf weiteres nur eingeschränkter Support
|
|
|
27.03.2011 00:12 |
|
|
|
