close

Anmelden

Neues Passwort anfordern?

Anmeldung mit OpenID

Die Website Baker Tags (oder was hinter dem Template steht)

EinbettenHerunterladen
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.
•
•
•
•
Teil 1 - Die Website Baker speziefischen Tags in der Datei index.php
Teil 2 - Erklärung des Aufbaus anhand eines Tabellen basierten Layouts
Teil 3 - Die Info Datei
Teil 4 - Die CSS Datei
Die Website Baker 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(); ?>
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 CSSKlasse "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 /> Website
Baker</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>
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';
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;
}
Document
Kategorie
Internet
Seitenansichten
7
Dateigröße
86 KB
Tags
1/--Seiten
melden