Template Turtorial von Hackvoid ... Übersetzung

[kweitzel]

Ich wurde gebeten einmal das Template Tutorial von Hackvoid in die Deutsche Sprache zu Übersetzen.

Da das Tutorial mehrere Kapitel hat, bietet es sich an, mehrere Posts daraus zu machen ... Ich habe die einzelnen Textpassagen der Verständlichkeit halber auch ein wenig abgeändert.

Die einzelnen Teile dieser Übersicht sind jeweils verlinkt.

[li]Teil 1 - Die WebsiteBaker speziefischen Tags in der Datei index.php[/li]
[li]Teil 2 - Erklärung des Aufbaus anhand eines Tabellen basierten Layouts[/li]
[li]Teil 3 - Die Info Datei[/li]
[li]Teil 4 - Die CSS Datei[/li]
[/list]
Korrekturen bitte per PM an mich ... Danke.
Gruss

Klaus

[kweitzel]

Die WebsiteBaker Tags (oder was hinter dem Template steht)

Schritt 1 - Der HTML-Kopf (Header)

Seiten Titel
Das Erste, was sich in unserer HTML Seite befinden sollte, ist der Seitentitel. Dieser wird bei der Erstellung einer Seite via Admin Interface (Seite zufügen) vergeben.

Code:

<title><?php page_title(); ?></title>

Seiten Beschreibung und Schlüsselwörter
Als nächstes benötigen wir die Seitenbeschreibung und die Schlüsselwörter. Diese sind für Suchseiten (wie google, msn-search, etc ...) und Optimierung der Suchbegriffe wichtig. Wir benötigen die dazugehörigen Tags nur einmal einzutragen. Der Inhalt für diese Felder wird in der Admin Seite - Sektion "Einstellungen" festgelegt. Man kann aber auch den einzelnen Seiten eigene Beschreibungen and Schlüsselwörter zuweisen. Dies geschieht indem man die Seite ändert und den Link "Einstellungen ändern" anklickt.

Code:

<meta name="description" content="<?php page_description(); ?>" />
<meta name="keywords" content="<?php page_keywords(); ?>" />

CSS Stylesheets
Als letyten Schritt für den Kopf unserer Seite benötigen wir die Stylesheets. Die Aufgabe der Stylesheets ist es Design/Layout Informationen weiterzugeben. Diese brauchen wir dann nur in einer Datei zu ändern, anstelle für jedes HTML-Element einzeln. Es ist ratsam, für jedes Ausgabemedium (Bildschirm, Drucker, Sprachausgabe) ein eigenes Stylesheet anzugeben um Designelemente zu unterdrücken, die auf dem Bildschirm gut aussehen, aber bei der Sprach oder Druckerausgabe nur störend sind. Diese Informationen können auch in einer Stzle Sektion des Templates hinterlegt werden

Code:

<link href="<?php echo TEMPLATE_DIR; ?>/screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="<?php echo TEMPLATE_DIR; ?>/print.css" rel="stylesheet" type="text/css" media="print" />

Schritt 2 - Der HTML-Körper

Der Seiten Titel in der Anzeige

Als typische erste Information, die wir an die Besucher weitergeben, setzen wir den Seiten Titel für die Anzeigeleiste unseres Browsers. Dies kann ein ganzer Satz oder auch nur ein Firmen oder Organisationstitel sein. Diese Information wird wieder in der Admin Sektion "Einstellungen" eingegeben.

Code:

<?php page_title('','[WEBSITE_TITLE]'); ?>

Das Seiten Menü

Wir werden hier nicht auf die weitere Menü Thematik eingehen, soviel sei gesagt: Das Menü ist für die Darsetellung der Navigation auf der Seite verantwortlich und wird durch die Stzlesheets im aussehen verändert. Es gibt erweiterungen zu dem Standartmenü (siehe WebsiteBaker Forum).

Code:

<?php if(SHOW_MENU) { /* Only shown menu if we need to */ ?>
<?php page_menu(); ?>
<?php } ?>

Die Suche

Nächste Element des Templates ist die Suchfunktion. Diese erlaubt es dem Besucher, der spezielle Informationen wünscht auf unserer Seite danach zu suchen. Bitte bei diesem Code beachten, daß die Suche nur angezeigt wird, wenn die Funktion auch in den Einstellungen aktiviert ist.

Code:

<?php if(SHOW_SEARCH) { /* Only show search box if search is enabled */ ?>
<form name="search" action="<?php echo WB_URL; ?>/search/index<?php echo PAGE_EXTENSION; ?>" method="post">
<input type="text" name="string" style="width: 100%;" />
<input type="submit" name="submit" value="Search" style="width: 100%;" />
</form>
<?php } ?>

Der Seiteninhalt

Als wichtigstes Element kommt nun der Seiteninhalt. Dieser wird durch diesen Ausdruck dargestellt:

Code:

<?php page_content(); ?>

Die Fusszeile

In der Fuszeile kann man zusätzliche Informationen, wie z.b. einen Slogan, Copyright Informationen oder ähnliches and den Besucher weiterleiten. Der Inhalt wird wieder Über die Einstellungen hinterlegt.

Code:

<?php page_footer(); ?>

[kweitzel]

Das eigentliche Template

Was ist eigentlich ein Template ... Ein Template definiert das Aussehen der Webseite. Dies beinhaltet normalerweise Dinge wie Schriftart, Farben, Bilder (Hintergrund und andere, sich nicht ändernde Bilder), Layout und viele andere Elemente. Die Hauptdatei des Templates ist die Datei index.php, welche Hand in Hand mit den CSS Stylesheet Dateien arbeitet und die Kontrolle über die Verschiedenen Elemente ausübt. Mit dieser Datei kann man Modul Platzierung, Rahmen, das Aussehen von Hyperlinks und vieles mehr beeinflussen.

Es gibt viele Wege ein Template zu entwerfen. In diesem Tutorial wird ein Tabellen basiertes Layout entworfen. Das Lazout besteht aus vier Zeilen, von denen die dritte in 2 Spalten aufgeteilt ist. Die erste Zeile enthält die Kopfzeile der Seite, dann folgt eine Zeile als Abstandshalter. Die dritte Zeile enthält auf der linken Seite das Navigationsmenü und das Eingabefeld für die Suche, auf der rechten Seite den eigentlichen Inhalt der Seite. In der vierten Zeile befindet sich dann noch die Fusszeile.



Schritt 1

Wir benötigen eine leere HTML Seite. Dazu können wir z.B. einen HTML Editor oder einen Texteditor öffnen und eine leere Seite erstellen.


Schritt 2

Jetzt erstellen wir das Tabellen Grundgerüst mit einer Weite von 750 Pixeln, diese Tabelle zentrieren wir dann.

Code:

<table cellpadding="5" cellspacing="0" border="0" width="750" align="center">

Schritt 3

Wir benötigen nun unsere erste Zeile. Diese geht über 2 Spalten Wir weisen die CSS-Klasse "Header" zu. Dann fügen wir den Titel der Webseite ein.

Code:

<tr>
<td colspan="2" class="header">
<?php page_title('','[WEBSITE_TITLE]'); ?>
</td>
</tr>

Schritt 4

Jetzt fügen wir die Abstandshalter-Zeile ein. Diese bekommt die CSS-Klasse "footer" und trennt die Kopfzeile vom Rest der Seite. Auch diese Zeile erstreckt sich über 2 Spalten.

Code:

<tr>
<td colspan="2" class="footer">
</td>
</tr>

Schritt 5

Nun kommt die Zeile drei, die wir in 2 Spalten auf teilen. In Spalte 1 befinden sich das Navigationsmenü und die Sucheingabe. Beide werden nur angezeigt, wenn auch die jeweilige Option in den Einstellungen auf "AN" gesetzt ist. Die Werte in der Klammer des Menübefehls sagen, daß es sich um das erste Menü handelt. WebsiteBaker ist in der Lage mehrere Menüs darzustellen und zu verwalten. Zusätzlich fügen wir noch einen Hyperlink zu WebsiteBaker ein.

Code:

<tr>
<td class="menu">
<?php if(SHOW_MENU) { /* Only shown menu if we need to */ ?>
Menu: <br />
<?php page_menu(0,1); ?>
<?php } ?>

<?php if(SHOW_SEARCH) { /* Only show search box if search is enabled */ ?>
<br />
Search: <br />
<form name="search" action="<?php echo WB_URL; ?>/search/index<?php echo PAGE_EXTENSION; ?>" method="post">
<input type="text" name="string" style="width: 100px;" />
<input type="submit" name="submit" value="Search" style="width: 100px;" />
</form>
<?php } ?>

<br />
<a href="http://www.websitebaker.org" target="_blank">Powered by <br /> websitebaker</a>
</td>

Schritt 6

In der zweiten Spalte von Zeile drei setzten wir nun den eigentlichen Inhalt der Seite ein, Als CSS-Klasse wir hier "content" verwendet.

Code:

<td class="content">
<?php page_content(1); ?> </td>
</tr>

Schritt 7 (letzter Schritt)

Wir schliessen die Seite mit dem Inhalt der Fusszeile, wieder mit der CSS-Klasse "footer".

Code:

<tr>
<td colspan="2" class="footer">
<?php page_footer(); ?>
</td>
</tr>
</table>

[kweitzel]

Die Info Datei

info.php

Schritt 1

Wir erstellen uns wieder eine leere Datei und benennen diese info.php. Dann müssen wir folgenden Code einfügen: Die einzelnen Felder können mit eigenem Inhalt (Name, Template Version, Beschreibung etc ...) belegt werden.

Code:

<?php
$template_directory = 'Tutorial';
$template_name = 'Tutorial';
$template_version = '1.0';
$template_designed_for = '2.x';
$template_author = 'Neme Hier';
$template_description = 'Beschreibung hier ...';
?>

Schritt 2 (Optional)

Folgende Informationen werden zusätzlich in dieser Datei benötigt, wenn mehrere Navigationsmenüs oder Inhaltsblöcke dargestellt werden sollen

Code:

$menu[2]='Menu 2';
$block[2]='Block 2';

[kweitzel]

Die Cascading Stylesheets (CSS)

screen.css und print.css

Schritt 1

Hier setzten wir zuerst die generellen Einstellungen für den Körper der Seite. Es werden Schriftart, Größe und Farbe sowie Hintergrundfarbe und Einzug gesetzt.

Code:

body,td,th {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 12px;
     color: #000000;
}
body {
     background-color: #333333;
     margin: 10px;
}

Schritt 2

Nun werden wir das Aussehen der Hyperlinks festlegen. Beim Einfügen dieses Codes bitte darauf achten, daß kein anderer CSS "Container" überschrieben oder aufgebrochen wird. Dieser Code bestimmt, wie die Hyperlinks  aussehen, wenn sie dargestellt werden (a:link), wenn dere Mauszeiger darüber schwebt (a:hover), wenn ein Mausklick durchgeführt wird (a:active) und wenn der Link schon besucht wurde (a:visited).

Code:

a:link, a:visited, a:active {
     color: #003366;
     text-decoration: none;
}
a:hover {
     color: #336699;
     text-decoration: none;
}

Schritt 3

Der folgende Code bestimmt das Aussehen von Eingabeformularen (z.B. Das Eingabefeld für die Suche). Wir können hier Einzüge, Farben und ähnliches festlegen.

Code:

form {
     margin: 0;
}

Schritt 4

Hier werden wir jetzt die Ausgabe der Überschriften (H1 bis H5) beeinflussen. Die kann entweder in einer Gruppe geschehen (wie hier) oder, um die Ausgabe bis ins Detail zu beeinflussen, für die einzelnen Elemente.

Code:

h1, h2, h3, h4, h5 {
     margin: 5px 0px 5px 0px;
}

Schritt 5 (letzter Schritt)

Wir erstellen eine weitere CSS Datei für die Druckerausgabe. Einzelne Elemente sollen nicht dargestellt werden.

Code:

body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
body {
background-color: #FFFFFF;
margin: 0px;
}
a:link, a:visited, a:active {
color: #003366;
text-decoration: none;
}
a:hover {
color: #336699;
text-decoration: none;
}
.content {
vertical-align: top;
}

[ruebenwurzel]

Hallo Klaus,

du bist der King        . So schnell hab ich nicht damit gerechnet. Alles drin alles dran, schaut super aus. Wenn ich mal was für dich tun kann sag Bescheid.

Matthias

[kweitzel]

gern geschehen ... ist halt was, was ich so halbwegs kann ...

Gruss

Klaus

[neue.medien]

Hallo, ich habe gerade mal 'schnell und schmutzig' Dein Tutorial in eine PDF-Datei gewandelt. Falls es erlaubt ist. Stelle diese auch gerne zur Verfügung. (88kB)

Viele Grüße
Bert

[kweitzel]

Hallo Bert, ist fuer mich kein Problem. Das Original hat Ryan geschrieben, ich habe nur Uebersetzt und es ein wenig up-to-date gebracht ...

Gruss

Klaus