Anzeige
Tutorialbeschreibung

Template erstellen für Websitebaker

Template erstellen für Websitebaker

Template erstellen

In diesem 3. Teil möchte ich auf die Erstellung von Templates eingehen. Ich werde mir hier ein tabellenloses, CSS-gesteuertes Template erstellen.

Für dieses Tutorial setze ich Grundkenntnisse in HTML und CSS voraus, und ich werde nicht auf jede Kleinigkeit eingehen oder alles dokumentieren!


Was ist ein Templates in Website Baker? 

Templates (der englische Begriff für Schablonen) sind Vorlagen für die Gestaltung, die mit Inhalt gefüllt werden. Sind also nur das äußere Erscheinungsbild, was komplett vom Inhalt getrennt ist.


Website-Baker-Template Aufbau:

Dateien

Das Template besteht aus wenigstens zwei Dateien:

index.php: beinhaltet den HTML-Code, der die Struktur und die CSS-Formatierungen festlegt

info.php: enthält die wichtigsten Informationen zum Template


Layout-Entwurf:

Wie es sich gehört, entwerfe ich mir erstmal ein Skizze, damit ich den Grundaufbau visuell vor Augen habe, da das die Arbeit sehr erleichtern kann und ich schon sehe, ob etwas nicht funktioniert.

Hier ist es eigentlich nicht nötig, da es sehr einfach ist. Aber das ist der Weg!


Layout

Wie in der Skizze zu erkennen ist, möchte ich im Kopf den Titel ausgeben und ein Suchfeld einbauen, die Navigation links mit der Anmeldung, einen Inhaltsbereich rechts mit den Bredcrumbs und einen Nach-oben-Link, die Fußzeile und darunter noch den Bereich für Entwicklerinformation.

ZeichnungBilder


beginnen wir mit dem Grundaufbau:

<div id="content">
  <div id="kopf">
    <div class="search_box"></div>
  </div>
  <div class="menu"></div>
  <div id="bredcrumbs"></div>
  <div id="inhalt">
    <div id="anker_oben"></div>
  </div>
  <div id="fuss"></div>
</div>
<div id="powered_by"></div>


Dies ist nun die Struktur des Template, was wir nun mit der screen.css formatieren. Diese Datei ist für die Ausgabe des Templates auf einem Bildschirm zuständig.

Die CSS Dateien müssen nicht erstellt werden. Die Formatierung kann auch direkt in die index.php eingefügt werden. Ich benutze hier aber die ausgelagerte Formatierung, da es übersichtlicher ist. Außerdem lege ich auch immer eine print.css an, die für die Druckversion zuständig ist.

Grundaufbau der screen.css 

#content {
    width: 750px;
    background-color: #FFFFFF;
    margin:5px auto;
}
#kopf {
    background-color: #FF9;
    height:150px;
    width:100%;
}
.search_box {
    background-color:#FF0;
    float: right;
    text-align:right;
}
.menu {
    background-color:#CCC;
    float: left;
    width: 25%;
    float:left;
}
#inhalt {
    background-color:#9FF;
    width:75%;
    float:right;
}
#fuss {
    background-color: #CFF;
    clear: both;
}
#powered_by {
    background-color:#fff;
    text-align: center;
}
#anker_oben {
    background-color:#FC3;
    float:right;
}
#bredcrumbs {
    float:left;
    background-color: #39C;
}


Mit dieser Formatierung erhalte ich folgendes Ergebnis:

RohfassungBilder

Vom HTML-Grundgerüst zum Template.

Codeschnipsel zum Einbau ins Template.

Damit die Daten ausgelesen werden können, muss eine Verbindung erstellt werden.

Noch vor dem Öffnen des Head-Bereichs muss folgender Code eingefügt werden:




Lizenzinformationen zu Website Baker


<?php

// $Id: index.php 691 2008-02-10 13:17:15Z doc $

/*

 Website Baker Project http://www.websitebaker.org/

 Copyright (C) 2004-2008, Ryan Djurovich

 Website Baker is free software; you can redistribute it and/or modify  it under the terms of the GNU General Public License as published by  the Free Software Foundation; either version 2 of the License, or  (at your option) any later version.

Website Baker is distributed in the hope that it will be useful,  but WITHOUT ANY WARRANTY; without even the implied warranty of  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the  GNU General Public License for more details.

 You should have received a copy of the GNU General Public License  along with Website Baker; if not, write to the Free Software  Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA

*/ 




generelle Adresse

if(!defined('WB_URL')) {

header('Location: ../index.php');

exit(0);

}

?>




Dokumententyp

<!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" xml:lang="en" lang="en"> 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" xml:lang="en" lang="en">




In den Head-Bereich der Seite kommen:

liest den Titel der Website aus

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




hiermit werden die Beschreibung und die Schlüsselwörter der Seite importiert

<meta http-equiv="Content-Type" content="text/html; charset=<?php if(defined('DEFAULT_CHARSET')) { echo DEFAULT_CHARSET; } else { echo 'utf-8'; }?>" /> 

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

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





Import der Formatierungsdateien (css)

<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" />





der Import des Headers

<?php 

if(function_exists('register_frontend_modfiles')) { 

 register_frontend_modfiles('css'); 

 register_frontend_modfiles('js'); 

} ?> 

<?php 

echo WEBSITE_HEADER; 

?> 




In den Body-Bereich der Seite kommen:

  

Ausgabe URL, Website Titel & Seiten Titel

<?php echo WB_URL; ?> 

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

<?php echo PAGE_TITLE; ?> 





Ausgabe des Menüs

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

<?php show_menu(); ?> 

<?php } ?>





Ausgabe des Suchfeldes

<?php if(SHOW_SEARCH) { /* Only show search box if search is enabled */ ?> 

<form name="search" action="<?php echo WB_URL; ?>/search/index.php" method="get"> 

<input type="text" name="string" style="width: 100%;" /> 

<input type="submit" name="submit" value="<?php echo $TEXT['SEARCH']; ?>" style="width: 100%;" /> 

</form> 

<?php } ?>





Ausgabe des Inhaltes

<?php page_content(); ?> 



Ausgabe des Fußes

<?php page_footer(); ?>



Wenn ich alle benötigten Befehle in die index.php eingefügt habe, muss ich noch die info.php anpassen. 

In dieser Datei sind die grundlegenden Informationen zu dem Template enthalten.

$template_directory =  Name des Template-Verzeichnisses 
$template_name =  Name des Templates 
$template_version =  Versionsnummer des Templates
$template_platform =  Versionsnummer von WB
$template_author =  Autor 
$template_license = welche Lizenz 
$template_description = Beschreibung des Templates
fertiger Code für dieses Template


<?php 

$template_directory = 'einfaches_css'; 
$template_name = 'einfaches_css'; 
$template_version = '0.1'; 
$template_platform = '2.7'; 
$template_author = 'stephan fischer'; 
$template_license = 'GNU General Public License'; 
$template_description = 'ein einfaches css template für das tutorial wb-templates erstellung der werbeagentur gotha'; 

?>


Nun brauche ich nur noch das Template zur Installation vorzubereiten. Dazu verpacke ich einfach die Dateien zu einem .zip Archiv mit dem Namen „css_valid“ (nicht den Ordner, sondern die einzelnen Dateien verpacken)


Installation des Template

Es gibt zwei Möglichkeiten, das Template zu installieren.

Über den Admin-Bereich des CMS kann ich das Template über Erweiterungen > Designvorlagen hochladen und in den Optionen > Dokumentenvorlage das Template aktivieren.

Ich bevorzuge den zweiten Weg, die Installation per FTP. Dazu lade ich das Template entpackt auf den Server. Bevor das Template aktiviert werden kann, muss ein Reload der Designvorlagen durchgeführt werden. Dies geht im Admin-Bereich in den Admin-Tools.
Der Vorteil dieser Methode ist, dass ich die Dateien noch per FTP anfassen und somit auch lokal bearbeiten kann.

Ich lege mir ein paar Links an und setze etwas Inhalt hinein und erhalte dieses Ergebnis:

FertigBilder


Jetzt mache ich mich daran, alles weiter mit CSS zu formatieren. Da dies den Rahmen sprengen würde, beende ich hier mein Tutorial. Ich lege aber als Arbeitsdateien das fertige Template dazu.
Dieses ist CSS und XHTML valid, was aber durch den Einsatz von Modulen verloren gehen kann!


Tipp!

Ich verwende für diese Arbeit den Browser Firefox mit der Erweiterung "Web Developer", die sehr viele nützliche Werkzeuge für die Entwicklung bereitstellt.


Für Fragen oder Anregungen stehe ich hier im fotum oder unter www.forum-websitebaker.de zur verfügung


Gruß sfischer


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von JayJay87
  • 08.04.2014 - 12:40

also das tut is mal 10 punkte wert und somit sehr hilfreich...vielen dank

Portrait von edaegelm
  • 15.02.2013 - 08:40

kurz und knapp ... was will man zum Anfang mehr

Portrait von hillschmidt
  • 28.06.2012 - 14:50

leicht verständlich geschrieben. danke.

Portrait von Susan99
  • 25.10.2010 - 18:55

Klasse! Vielen Dank. Genau so was habe ich gesucht.
MfG Susan

Portrait von Steve007
  • 06.03.2010 - 13:15

Vielen Dank für dieses Tutorial, es ist wirklich gut nachvollziehbar...

Gruss Steve

Portrait von egonP
  • 18.11.2009 - 12:15

Danke. Die Einführung in diesem Tutorial lässt sich gut auf die Erstellung von Templates allgemein übertragen.

Portrait von ri_floe
  • 18.09.2009 - 21:18

Super, das kann auch ein relativer Anfänger nachvollziehen

Portrait von Yoshida
  • 27.02.2009 - 14:10

Das Tutorial ist ziemlich gut und denke das es mir sehr hilft.
Einen kleinen Wehmutstropfen habe ich entdeckt, die PDF Ausgaben ist nicht ganz vollständig.

Portrait von marcecan
  • 19.02.2009 - 23:06

ganz gut teilweise bissel besser beschreiben wäre schön aber absonsten gut

Portrait von Graciosa
  • 19.02.2009 - 12:18

Super, das kann auch ein relativer Anfänger nachvollziehen.

Portrait von rojmiro
  • 14.02.2009 - 09:01

super hat mir sehr geholfen...

Portrait von trom
  • 13.02.2009 - 18:57

dank für die anleitung, herzlichen dank.

da musste ich aber lagen drauf warten ;)

:D trom

Portrait von sfischer
  • 18.02.2009 - 10:07

dafür wird der 4 teil "allgemeine optionen bald kommen." gruß sfischer

Portrait von johanna52
  • 13.02.2009 - 18:26

gut, dann kann es ja jetzt Braker weiter gehn ...

x
×
×