Haumis wbb hilfe | Druckvorschau: Die indexseite Schritt für Schritt erstellen

Geschrieben von haumi am 15.11.2010 um 15:10:

Die indexseite Schritt für Schritt erstellen

Die Indexseite besteht im wesendlichen aus den drei Teilen

dem header - zu finden im Template header!
der index - zu finden im Template index!
dem footer - zu finden im Template footer!

templates sind Dokumentenvorlagen und können ineinander verschachtelt werden.

Bei der Software wbb2 sind die beiden Teile header und footer
eigenständige templates und per php im template index integriert.
Hier sieht man mal wie es aussieht, wenn in allen drei Templates nur ein Satz geschrieben steht.

Inhalt des templates header:

code:
1: 2: 3: 4: 5: 6: 7: 8:	<table> <tr> <td> Ich bin der Kopfbereich der Indexseite und befinde mich im template header. </td> </tr> </table> <hr align="left" width="50 %" />

Inhalt des templates index:
Der Deklarationsbereich (die ersten drei Zeilen haben keine Aussagekraft bezüglich unseres Dokuments!
auch der head-Bereich nicht. Sichtbar im Browser ist nur das, was zwischen body und /body steht,)

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:

<?xml version="1.0" encoding="{$lang->items['LANG_GLOBAL_ENCODING']}"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{$lang->items['LANG_GLOBAL_DIRECTION']}" lang="{$lang->items['LANG_GLOBAL_LANGCODE']}" xml:lang="{$lang->items['LANG_GLOBAL_LANGCODE']}">
<head>
<title>$master_board_name | {$lang->items['LANG_START_TITLE']}</title>
$headinclude
</head>

<body>
$header

<table>
<tr>
<td>
Ich bin der Hauptteil der Indexseite und befinde mich im template index.
</td>
</tr>
</table>
<hr align="left" width="50%"  />

$footer
</body>
</html>

Inhalt des templates footer:

code:
1: 2: 3: 4: 5: 6: 7: 8:	<table> <tr> <td> Ich bin der Fußbereich der Indexseite und befinde mich im template footer. </td> </tr> </table> <hr align="left" width="50 %" />

in der Datei global.php wird der header als Variable deklariert und mit

eval("\$header = \"".$tpl->get("header")."\";");

ins indextemplate eingebunden.

der footer ebenfalls mit:

eval("\$footer = \"".$tpl->get("footer")."\";");

darum erscheinen sie im Template index als php-Variable: $header und $footer.

Die Zusammenarbeit der Templates mit den php-Dateien wird später noch genau erläutert.

Als nächstes möchte ich die jetzt schon vorhandenen Formatierungen in html
hier die Argumente des tags hr (zeichnet eine Linie) align="left" width="50%" entfernen und durch css ersetzen.

Dazu schaffe ich mir eine eigene Datei mit namen basic.css und binde diese denn ins html-Dokument ein.

Soweit der erste Überblick.
So nach und nach werden die Templates nun mit dem Code von woltlab gefüllt
aber erst mal mit eigenen css-Anweisungen um auch das nebenbei zu üben und zu verstehen.