Die Ausgabe der Inhalte

Erstellen Sie Ihr eigenes Layout

Bei der Website für das peterCMS  wird bei jedem Aufruf per Zufallsgenerator ein anderes Farbset geladen. Farbsets wirken sich in allen Bereichen der Website aus. 
Layouts für das System können natürlich auch ganz anders aussehen, hier einige Beispiele:

Innerhalb einer peterCMS Website können Sie beliebig viele Ausgabe Projekte anlegen (z.B. Sprachvarianten) (Administrationsbereich->Einstellungen->Projektverwaltung). Jedes Projekt kann sein eigenes Layout haben. Jedes dieser Layouts liegt in einem eigenen Ordner im  Ordner "lays" innerhalb des Siteordners. 
Um ein eigenes Laout zu erstellen, sollten Sie einige Vorbereitungen treffen:
Entweder editieren Sie direkt eins der bestehenden Layouts, besser ist aber Sie duplizieren einen der vorhandenen Layoutordner. Die Layoutordner befinden sich in dem Ordner "lays" innerhalb des Siteordners (z.B. "Site2"). Alle Layoutordner bekommen Sie im Ausklappmenü innerhalb des Administrationsbereich (/webadmin_x.x) unter "Einstellungen->Projektstruktur"angezeigt, wenn Sie dort eins der vorhandenen Projekte zum editieren wählen. Wählen Sie also das Projekt, welches Sie für Ihre Website verwenden wollen, klicken Sie den "edit-Button", wählen Sie bei dem Design-Ausklappmenu ihren neuen Ordner an, klicken Sie übernehmen. Jetzt wird als Layout dieses Projektes der neue Ordner verwendet, Sie können also die Dateien dort editieren und ihre Eingaben direkt auf der Website überprüfen.

Folgende Dateien müssen Sie editieren:
lay.php - Dies ist das HTML Template in welchem die Inhalte per echo-Befehl ausgegeben werden.
farben.php - hier ist das Farbset definiert, welches sich auf alle Bereiche der Website auswirkt
schrift-self.css - der Stylesheet
menu.php - hier werden Einstellungen zur Darstellung des Menüs getroffen

Die Dateien im einzelnen:


Die Datei - lay.php
Diese Datei ist das eigentliche Template. Wenn Sie diese Datei in einem Editor öffnen, sehen Sie das es sich um einfache html Datei handelt, in die einige php-Befehle eingebettet sind, welche nur zur Ausgabe der aus der Datenbank ausgelesenen Informationen dienen.
Sie können diese Datei editieren, oder wenn Sie schon eine html-Layout haben können Sie auch die benötigten php-Befehle einfach aus dieser Datei in die neue html Datei kopieren.

Welche Ausgaben stehen zur Verfügung

<?php echo $hauptmenu; ?>


Ausgabe des Hauptmenüs, dieses wird in der Datei menu.php formatiert

<?php 
if(file_exists($a_site['bildordner'].'/'.$tt_bild) AND !empty($tt_bild)){
$bildhier = thumbnailErzeugen($tt_bild,"",130);
$bild = imgTagErstellen($bildhier,$bildbez,"top","",0,1);
echo $bild;
}
?>


Durch dies Funktionsaufrufe wird das Hauptbild in der entsprechenden Grösse erstellt und in den entsprechenden html-Tag gepackt. Das Hauptbild eines Datensatzes ist immer das Bild, welches ihm direkt in der Eingabemaske zugeordnet ist. Welches Bild in dieser Varialble steht hängt also immer davon ab, welche Informationen gerade angezeigt werden.
Erklärung der Funktion.
Zuerst wird geprüft,ob es das Bild gibt if(file_exists($a_site['bildordner'].'/'.$tt_bild) AND !empty($tt_bild))
Jetzt wird das Bild in der entsprechenden Größe errechnet - $bildhier = thumbnailErzeugen($tt_bild,"",130);
Ersetzen Sie hier nur die Grösse (130) durch die Grösse, die Sie benötigen - es handelt sich hier um die Breite, die Höhe wird proportional errechnet. Wenn Sie eine feste Höhe haben wollen, ändern Sie den Aufruf wie folgt - $bildhier = thumbnailErzeugen($tt_bild,"","",130); - so wird die Höhe des Bildes auf 130 Pixel und die Breite proportional dazu berechnet. Wenn Sie möchten, dass das Bild eine maximale Kantenlänge von 130 Pixeln haben soll, also Hochformate 130 Pixel hoch und Querformate 130 Pixel breit, müssen Sie den Aufruf wie folgt ändern - $bildhier = thumbnailErzeugen($tt_bild,"","","",130);
Als letztes wird das Bild in den benötigten HTML-Tag gepackt, Durch diese Funktionen werden Jpegs, Gifs, Pngs und Flashfilme korrekt eingebunden.

<?php echo $bildbez; ?></span>


Wenn Sie eine Bildunterschrift ausgeben wollen.

<?php if(strlen($uber) > 0) echo '<h1 class="headline">'.$uber.'</h1>';
if(strlen($uber2) > 0) echo '<h2 class="subheadline">'.$uber2.'</span>';?>


Hier durch wir die Headline und die Subheadline mit der entsprechenden Formatierung generiert und es wird sichergestellt, dass nur zu Zeilenumbrüchen kommt, wenn auch Inhalte da sind.

<?php echo $tt_text;?>


Ausgabe des Textes des Menüpunktes. Wenn eine Detailinformation eines Moduls angewählt ist z.B. eine News, ist diese Variable leer.

<?php echo $tt_menuzusatz;?>


Ausgabe der TextBildBlöcke des Menüpunktes. Wenn eine Detailinformation eines Moduls angewählt ist z.B. eine News, ist diese Variable leer.

<?php echo $tt_text_modul;?>


Wenn bei einem Menüpunkt ein Modul angewählt ist, stehen in dieser Variablen die Inhalte des Moduls

<?php echo&nbsp; $tt_menuliste;?>


Ausgabe der erweiterten Listenpunkte

<?php echo&nbsp; $menuliste;?>


Ausgabe der Listenpunkte

<?php echo $tt_menuquer;?>


Ausgabe der Querverlinkungen

<?php
if($showbackbutton){
echo '<a href="javascript:history.back()" class=text>back</a>';
}?>


Generiert den Zurück-Link, wenn er benötigt wird.

<?php echo $pfad; ?>


Wenn eine Pfadinformation benötigt wird

<a class ="text" href="javascript: openPrint('<?php echo 
$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']; ?>')"> Druckversion</a>


Erzeugt den Link zur Druckversion

<?php echo $menuextra?>


Gibt die Menüpunkte aus, welche als Platzierung "extra" haben.

Die Datei - menu.php
Diese Datei generiert eine verschachtelte Liste unter Berücksichtigung, welcher Menüpunkt gerade angewählt ist.
Im normal Fall müssen Sie an dieser Datei nichts ändern, das Menü wird über den Stylesheet formatiert.

Die Datei - farben.php
Hier definieren Sie das Farbset Ihres Internetauftrittes. Sie können hier auch für ein Layout mehrere Farbsets definieren. Welches verwendet wird legen Sie durch den Eintrag in das Feld "Farbset" bei dem jeweiligen Projekt fest. Wenn Sie nur ein Farbset verwenden wollen, benötigen Sie en "switch"-Befehl nicht. Folgende Farben müssen definiert werden:
$hellhell - Eine wirklich helle Farbe  
$hell - Eine helle Farbe  
$mittel - Eine Farbe auf der man sowohl die hellen als auch die dunklen Töne lesen kann  
$mittel2 - siehe $mittel sollte sich aber von dieser unterscheiden  
$dunkel - Eine dunkle Farbe  
$dunkel2 - eine andere dunkle Farbe  
$dunkel3 - eine wirklich dunkle Farbe  
$link_fb - Farbe für Links*
$vlink_fb - Farbe für besuchte Links*  
$hlink_fb - Farbe für MouseOver links*  
$text_fb - Textfarbe*
$menu_fb - Farbe der Hauptmenüpunkte*  
$vmenu_fb - Farbe der gesehenen Hauptmenüpunkte*  
$hmenu_fb - Farbe MouseOver der Hauptmenüpunkte*
$bg_fb - Hintergrundfarbe*
*Wenn die entsprechende Farbe so innerhalb des Stylesheets eingesetzt wird

Die Datei - schrift-self.css
Bitte ändern Sie nicht die Namen der verwendeten Styles. Sie können hier aber die Art der Schrift, die Grösse, den Zeilenabstand und und und definieren. Die Farben werden auch hier durch die in der Datei farben.php definierten Variablen geregelt, nur so funktionieren die Farbsets.
Hier definieren Sie auch wie Ihr Untermenü und Unteruntermenü formatiert werden soll. Folgend Styles werdenbenötigt:
Für den Fließtext
.text, body, table  {}
Fließtext auf dunklen Flächen
.texthell  {}
Kleinerer Text
.text-klein  {}
Kleinerer heller Text
.texthell-klein  
Headline
.headline, h1
Subheadline  
.subheadline, h2
Sub-Subheadline
.headline2,h3,h4
Formatierung Pfadagabe
.pfad
Formatierung Extramenü
.menuoben
Textformatierung in Listen
.liste
Formatierung für Formularfelder
.formular
Formatierung für Abschicken-Button
.formular_submit
Formatierung für den div-Conteiner bei Fehlermeldungen
#error
Formatierungen für das Menü
das Menü befindet sich in einem Container mit der ID navcontainer, also müssen Sie Listen Formatierungen für diesen Container vornehmen. Ein gutes Tutorial zum Formartiern von Listen finden Sie z.B. unter http://css.maxdesign.com.au/listutorial/(englisch)





© telltarget