Layout

Aus DeDi-Help

Inhaltsverzeichnis 1 Design > Layouts 2 Einbinden von Grafiken 3 Feste Grafiken 4 Variable Grafiken 5 Einbinden Flash und anderen grafischen Elementen 6 Layoutvariablen 7 Verwendung von PHP / DEDIPHP

[bearbeiten] Design > Layouts

Grundlage einer jeden DeDi Internetpräsenz ist das Layout. Als Layout können Sie mit jedem beliebigen HTML-Editor eine ganz normale HTML-Datei erstellen, allerdings ohne Inhalte. Dort wo später Inhalte mit dem System platziert werden sollen, setzen Sie so genannte Container mit den DeDi-Tag <dedi:lay type="container" id="1" title="Seiten-Content"/>. Container sind unsere "Platzhalter" im HTML Code um später unsere Module und Inhalte zu platzieren.

Zum Start erstellen Sie, wie bei jedem Aufbau einer Webseite die Grafiken, die innerhalb des Layouts verwenden sollen. Anschließend programmieren Sie eine normale HTML Seite, als wenn Sie eine statische Seite erstellen wollten. Hier können natürlich gewinnbringend auch WYSIWYG Editoren (z.B. Frontpage, Dreamweaver und Co.) eingesetzt werden. Bei der Programmierung sind keinerlei Grenzen gesetzt. Lediglich eine Webseite mit Frame ist nicht so einfach möglich. Es gibt's zwar auch Wege, framebasierte Seiten mit DeDi aufzubauen, jedoch möchten wir hier darauf vorerst nicht eingehen. Das Kapitel Frames wird in der Anlage detaillierter erklärt. Wir empfehlen Ihnen vorerst, zum besseren Verständnis, den Seitenbasierten Aufbau mit einer entsprechenden Tabellenstruktur.

Beim erstellen der HTML-Seite verzichten Sie völlig auf das Anlegen von Inhalten. Sparen Sie sich also das Menü, Links, Text und Inhaltsbilder, da diese Teile später mit DeDi verwaltet und angelegt werden. An die Stelle wo später Inhalte platziert werden sollen, setzen Sie einfach einen "Platzhalter". Das bedeutet das Sie an die Stelle wo z.B. die Navigation hin soll, vorerst einfach nur das Wort "Navigation" schreiben, an die Stelle wo der Content (Inhalt) hin soll, dass Wort "Content" usw. Das gibt beim Design einen besseren Überblick und erleichtert später die Strukturierung der DeDi-Container.

Um später alle Bild- und Dateipfade in DeDi übertragen zu können erstellen Sie ein lokales Verzeichnis, z.B. mit dem Namen "DeDi Vorlagen". In dieses Verzeichnis speichern Sie Ihre Layoutvorlage einfach als HTML-Datei mit einem beliebigen Namen, z.B. "layout01.html".

[bearbeiten] Einbinden von Grafiken

Dedi unterstützt die Verwendung aller gängigen Internet-Grafikformate. So zum Beispiel .gif, .jpg, .png. Auf die Verwendung von .bmp und anderen Grafikformaten sollten Sie aus Kompatibilitätsgründen verzichten. Bei der Erstellung von Grafiken ist auf eine Internet-konforme Bezeichnung zu achten. Internetgrafiken dürfen keine Leerzeichen, Umlaute (ö, ü, ä usw.) sowie Sonderzeichen (@, $ usw.) enthalten. Eine Grafikbezeichnung sollte also z.B. so aussehen:

mein-bild_aus-Oestereich.gif

Sie können auf verschiedene Weise Grafiken in das Layout einbinden:

[bearbeiten] Feste Grafiken

Wenn Sie ein festes Layout verwenden wollen, können wir wie gewohnt die Grafiken im HTMLCode einbinden. Hierzu müssen Sie jedoch wissen, dass diese Grafiken später nicht mit DeDi verwalten können. Sie sind also fest und können anschließend nur durch anpassen des Layout-HTML-Codes verändert werden. Dieses Verfahren bietet sich an, wenn Sie ein vorgegebenes, festes Layout verwenden wollen und spätere Benutzer der Internetseite das Layout auch nicht ändern sollen bzw. dürfen. Natürlich sind bei diesem Verfahren dem Designer keine Grenzen gesetzt.

Um später die Bildpfade im Layout auch richtig zu haben, sollten Sie in dem Verzeichnis in dem Sie Ihre HTML Seite lokal abspeichern (z.B. "DeDi Vorlagen"), die Ordnerstruktur Ihres Basisverzeichnis anlegen. Hier braucht vorerst jedoch nur das Bildverzeichnis (img), die Ordnerstruktur sieht dann z.B. so aus:

/ DeDi Vorlagen
. / media
. /. / img

Im Verzeichnis "DeDi Vorlagen" speichern Sie nun Ihre HTML-Layout-Vorlage und im Verzeichnis "media/img" die Bilder. Nun steht im HTML Code der Pfad zum Bild etwa so:

<img border="0" src="media/img/bild.gif" width="200" height="100">

DeDi bewegt sich beim aufrufen der Seiten immer nur im entsprechenden Projektverzeichnis (z.B. projekt01). Durch den gesetzten Bildpfad zieht sich der Browser nun die Bilder aus dem entsprechenden Unterverzeichnis "/ media / img", das Sie bereits bei der Installation angelegt haben.

Wenn Sie unter dieser DeDi-Installation später mehrere Projekte (z.B. projekt01, projekt02) verwalten möchten und den anderen Projekten auch Ihr Layout zur Verfügung stellen möchten, empfiehl es sich die Pfade als absoluten Link zu setzen. In diesem Falle würde der Bildpfad im HTML Code wie folgt aussehen:

<img border="0" src="http://ihreDomain.de/projekt01/media/img/bild.gif" width="200" height="100">

Durch die Angabe des absoluten Pfades erreichen Sie, dass das Layout z.B. auch in Projekt02 benutzt werden kann, ohne die verwendeten Grafiken erneut hoch zu laden (Verzeichnis projekt02/media/img). Die Grafiken können nun also aus dem Basisverzeichnis des projekt01 gezogen werden.

Die Dateien im Verzeichnis "/ media / img" können später per FTP-Programm oder per DeDi-Dateimanager auf den Webserver übertragen. Da das Verzeichnis "img" die Rechte 777 bei der Installation bekommen hat, können die Dateien später auch per DeDi-Dateimanager verwalt werden.

In machen Füllen ist die offene Verwaltung der Dateien über den Dateimanager aber auch nicht Sinnvoll. Wenn zum Beispiel mehrere Benutzer auf der Seite arbeiten und diese auch über Rechte im Dateimanager verfügen sollen, können Sie Layout-Grafiken eventuell auch löschen und so das Layout zerstören. Um dieses zu unterbinden, legen Sie einfach im Hauptverzeichnis ein neues Unterverzeichnis an und benennen es z.B. "layout". In diesem Verzeichnis speichern Sie einfach Ihre Layout-Grafiken ab und übertragen das Verzeichnis später auf den Webserver.

Der Pfad im HTML-Layout zu den Grafiken währe dann z.B.:

http://ihreDomain/projekt01/layout/bild.gif

Der Effekt ist, dass dieses Verzeichnis nun nicht im Dateimanager auftaucht und für andere Benutzer kein Zugriff besteht, bzw. nicht Sichtbar ist. Dieses Verzeichnis benötigt natürlich keine Rechte 777, da es nur per FTP-Programm und nicht per Dateimanager ansprechen können.

[bearbeiten] Variable Grafiken

Sie können Layout-Grafiken auch komplett über DeDi verwalten. Das bietet sich an, wenn man ein einfaches Grundlayout hat, in dem man die Grafiken schnell wechseln möchte. Z.B. können Sie so eine Headlinegrafik verwenden die angepasst, z.B. an die Jahreszeit, geändert wird. Natürlich sind hier der Phantasie des Designers keine Grenzen gesetzt. Für die Verwendung der variablen Grafiken und die Verwaltung über den Dateimanager, verfahren Sie beim erstellen und speichern Ihrer Grafiken einfach wie oben beschrieben.

Wenn Sie Ihr Layout fertig gestellt haben, ersetzen Sie Ihren HTML-Code:

<img border="0" src="media/img/bild.gif" width="200" height="100">

einfach gegen den Platzhalter

<dedi type="container" id="4" name="Bild">

Durch die Einbindung des DeDi-Containers können Sie später das Modul "Bild" verwenden und so Ihre Grafiken über DeDi komfortabel verwalten. Den Platzhalter können Sie an beliebig vielen Stellen, so oft wie sie möchten einsetzen. Allerdings ist auf eine fortlaufende Nummerierung und eine eindeutige Bezeichnung aller Container im Layout zu achten. Z.B.

<dedi type="container" id="4" name="Bild1 ">
<dedi type="container" id="5" name="Bild2">
<dedi type="container" id="6" name="Bild3">

Mehr Informationen zu DeDi-Container erhalten Sie in den folgenden Kapiteln.

[bearbeiten] Einbinden Flash und anderen grafischen Elementen

Für die Einbindung von Flash-Komponenten oder anderen Elementen verfahren Sie entsprechend der Anleitung >Einbindung von Grafiken. Natürlich müssen Sie hier den entsprechenden HTMLCode für das einzubindende Element und die Pfade beachten. Zurzeit stellt DeDi noch kein offizielles Modul zur Einbindung von Flash-Elementen zur Verfügung. Sie können daher nur "Feste Grafiken" verfahren und den HTML-Code direkt in das Layout schreiben.

[bearbeiten] Layoutvariablen

Nach dem erstellen des Layout als normale HTML Datei muss Quellcode für DeDi modifiziert werden. Zur Erklärung sehen Sie sich einen einfachen Quellcode für DeDi an:

HTML Quellcode:

<html>
<head>
<title> <DEDIPHP> print($con_side[$idcatside]['name']); </DEDIPHP> </title>
<dedi:lay type="head"/>
</head>
<body>
<dedi:lay type="container" id="1" title="Seiten-Content"/>
<dedi:lay type="config"/>
</body>
</html>

Erklärung des Quellcode:

<title> <DEDIPHP> print($con_side[$idcatside]['name']); </DEDIPHP> </title>

Den Titel-Tag unseres HTML-Codes ersetzen wir gegen unseren DEDI-Titel-Tag. Wir sehen an dieser Code-Zeile schon, dass der Titel der Seite mit DEDIPHP dynamisch generiert wird. Wir brauchen also nicht mehr jeder einzelnen Seite einen Titel geben. DeDi zieht sich den Titel der Seite im Browser automatisch aus der Seitenbezeichnung, die Sie beim anlegen der Seite in DeDi angegeben. Hier würde jetzt in der Browsertitelleiste beim Aufruf der Startseite zum Beispiel „Startseite“ stehen.

Um den Titel ein wenig zu verfeinern, können wir auch Feste Werte mit einbauen (z.B. Firmennamen). Dieses würde so aussehen:

<title> Firma Mustermann - <DEDIPHP> print($con_side[$idcatside]['name']); </DEDIPHP>
</title>

Hier würde jetzt in der Browsertitelleiste beim Aufruf der Startseite z.B. „Firma Mustermann – Startseite“ stehen. Die Bezeichnung „Firma Mustermann“ ist nun fest mit dem Layout verbunden und wird bei allen Seiten die diese Layout verwenden ausgegeben. „Startseite“ wird dynamisch aus der Seitenbezeichnung generiert.

<dedi:lay type="head"/>

Sollte Sinnvollerweise am Ende Head-Bereichs stehen. An der Stelle von <dedi type="head"> steht später im HTML Code des Browsers die Metaangaben, die wir innerhalb von DeDi definieren. Dieses sind z.B. die Pfad-Angaben für CSS, die Java-Befehle sowie die Meta-Tags für die Suchbegriffe. Die Einbindung erfolgt durch DeDi automatisch und wird im Backend beim anlegend des neuen Layouts festgelegt.

<dedi:lay type="container" id="1" title="Seiten-Content"/>

DeDi-Container sind die wichtigsten Layoutvariablen. Container sind Platzhalter, an deren Stelle später unseren Content ausgeben wird. Container können an beliebigen Stellen so oft wie wir möchten im Quelltext verankert werden. Ein Container ersetzt immer einen bestimmten Bereich. Dieses kann z.B. die Navigation, der Inhalt der Seite, ein Modul oder ein Bild sein. Im Einzelnen besteht unser Container aus folgenden Bestandteilen

<dedi

lay :Pflichtfeld - Beginn der Code-Zeile für Container

type="container" 

Pflichtfeld – Bezeichnung für einen Container

id="1“ 

Pflichtfeld – Eindeutige Nummer des Containers. Wichtig dabei ist, dass jeder Container eine eigene „ID“ bekommt. Die ID kann beliebig hoch sein, dass heißt von 1 bis 999999. Durch die Reihenfolge der IDs können wir auch die Ausgabe der Bereiche im Backend zur Bearbeitung festlegen. Im Bereich „Design > Templates > Template bearbeiten“ würde der Container mit der ID 1 als erstes, dann der Container mit der ID 2 als zweites usw., erscheinen. Diese Sortierung erleichtert später eine Übersichtliche Bearbeitung der Templates.

Für die Übersichtliche Strukturierung der Container empfiehlt es sich ID-Gruppen zu bilden. So erhalten zum Beispiel

Navigationselemente 

ID 1-10

Inhaltselemente 

ID 11-20

Footerelemete 

ID 21-30

Die Bildung von Gruppen hat den Vorteil, das wir in der Templatebearbeitung immer erst die Navigationsmodule, dann die Contentmodule und zum Schluss die Footermodule bearbeiten. Auch das zufügen und löschen von Containern wird dadurch vereinfacht. Durch die Gruppenbildung kann man zum Beispiel direkt im Layoutcode weitere Inhaltselemente einbauen, ohne dafür das ganze Layout zu studieren. Das könnte z.B. so aussehen:

<table >
<tr>
<td></td>
<td width="100%"><dedi:lay type="container" id="10" title="WYSIWYG"/></td>
</tr>
</table>

Wollen wir nun unter dem WYSIWYG-Editor (Container 10) schnell ein Kontaktformular einfügen, brauchen wir nur im Backend das Layout aufrufen und den Quelltext mit einfachen Mitteln verändern. Z.B.:

<table>
<tr>
<td></td>
<td width="100%">
<dedi:lay type="container" id="10" title="WYSIWYG"/><br>
<dedi:lay type="container" id="11" title="Kontaktformular">
</td>
</tr>
</table>

Wir können auch von vorneherein mehrere Container anlegen, z.B. 2 oder 3 Inhaltscontainer. In unseren Templateeinstellungen können wir dann später festlegen ob dort ein Modul ausgegeben werden soll oder nicht (kein Modul).

title="Seiten-Content"

Freie Bezeichnung des Containers. Diese wird später bei der Templateauswahl und der Bearbeitung des Seitencontent angezeigt. Die Bezeichnung dient nur der besseren Übersicht und Definition der Container. Wollen Sie keine Bezeichnung angeben, lassen Sie diesen Tag einfach weg. In diesem Falle wird nur die ID des Containers angezeigt. Wir empfehlen Ihnen jedoch, zur besseren Übersicht, die Verwendung von eindeutigen Containertiteln.

/>

Pflichtfeld - Ende der Code-Zeile für Container

<dedi:lay type="config"/>

DeDi-Type-Config muss am Ende des Bodybereiches stehen. Dies erzeugt später im Backend einen kleinen Bearbeitungslayer, mit dem Sie neue Seiten und Ordner anlegen oder diese, aus der Seite heraus, konfigurieren können. Der Tag ist zwar nicht zwingend erforderlich, erleichtert aber später enorm die Arbeit mit DeDi und macht den Backendbereich sehr komfortabel.

[bearbeiten] Verwendung von PHP / DEDIPHP

Wir können in unserem Layout auch ohne weiteres PHP-Code einbauen. Hier sind keine Grenzen gesetzt. PHP-Code kann wie gewohnt mit dem Variablen <? oder <php begonnen werden und mit ? > beendet werden.

Zum schnelleren Seitenaufbau nutzt DEDI für alle Seiten einen internen Cache. Das bedeutet, dass alle generierten Seiten im Cache zwischengespeichert werden und nur bei Änderungen aktualisiert werden. Das gibt auf der einen Seite mehr Geschwindigkeit beim Seitenaufbau, hat aber auch den Nachteil, das einige PHP-Elemente eventuell nicht richtig aktualisiert werden. Sie können den Cache aufheben, indem Sie beim Einbinden des PHP-Code statt "<? oder <?php" nun "<DEDIPHP>" schreiben und zum Schluss nicht "?>" sondern "</DEDIPHP>" den Code beenden. Grundsätzlich gilt folgendes zum DeDi-Cache zu beachten:

<i>
Ich bin normales HTML und werde gecacht
</i>

<?PHP
echo 'Ich bin PHP- Code und werde beim ersten Aufruf generiert und dann gecacht - Man beachte
meinen Timestamp, den der ändert sich nicht mehr -->' . time();
?>

<DEDIPHP>
Ich bin PHP- Code und werde IMMER neu generiert und NIE gecacht - Deshalb ändert sich auch
mein Timestamp bei jedem aktualisieren der Seite -->'. time()
</DEDIPHP>