Layout

Aus DeDi-Help

(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
Version vom 20:27, 27. Jan. 2007 (bearbeiten)
Demian (Diskussion | Beiträge)
K (Layoutvariablen)
← Zum vorherigen Versionsunterschied
Aktuelle Version (10:24, 6. Okt. 2009) (bearbeiten) (Entfernen)
Eppi (Diskussion | Beiträge)

 
Zeile 1: Zeile 1:
== Design > Layouts == == Design > Layouts ==
-Grundlage einer jeden DeDi Internetprsenz ist das Layout. Als Layout knnen Sie mit jedem beliebigen HTML-Editor eine ganz normale HTML-Datei erstellen, allerdings ohne Inhalte. Dort wo spter 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+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 spter unsere Module und Inhalte zu platzieren.+"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. Anschlieend programmieren Sie eine normale HTML Seite, als wenn Sie eine statische Seite erstellen wollten. Hier knnen natrlich 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 mglich. Es gibts zwar auch Wege, framebasierte Seiten mit DeDi aufzubauen, jedoch mchten wir hier darauf vorerst nicht eingehen. Das Kapitel Frames wird in der Anlage detaillierter erklrt. Wir empfehlen Ihnen vorerst, zum besseren Verstndnis, den Seitenbasierten Aufbau mit einer entsprechenden Tabellenstruktur.+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 vllig auf das Anlegen von Inhalten. Sparen Sie sich also das Men, Links, Text und Inhaltsbilder, da diese Teile spter mit DeDi verwaltet und angelegt werden. An die Stelle wo spter 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 spter die Strukturierung der DeDi-Container.+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 spter alle Bild- und Dateipfade in DeDi bertragen zu knnen 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.+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".
== Einbinden von Grafiken == == Einbinden von Grafiken ==
-Dedi untersttzt die Verwendung aller gngigen Internet-Grafikformate. So zum Beispiel .gif, .jpg, .png. Auf die Verwendung von .bmp und anderen Grafikformaten sollten Sie aus Kompatibilittsgrnden verzichten. Bei der Erstellung von Grafiken ist auf eine Internet-konforme Bezeichnung zu achten. Internetgrafiken drfen keine Leerzeichen, Umlaute (, , usw.) sowie+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:+Sonderzeichen (@, $ usw.) enthalten. Eine Grafikbezeichnung sollte also z.B. so aussehen:
mein-bild_aus-Oestereich.gif mein-bild_aus-Oestereich.gif
-Sie knnen auf verschiedene Weise Grafiken in das Layout einbinden:+Sie können auf verschiedene Weise Grafiken in das Layout einbinden:
Zeile 29: Zeile 29:
-Wenn Sie ein festes Layout verwenden wollen, knnen wir wie gewohnt die Grafiken im HTMLCode einbinden. Hierzu mssen Sie jedoch wissen, dass diese Grafiken spter nicht mit DeDi verwalten knnen. Sie sind also fest und knnen anschlieend nur durch anpassen des Layout-HTML-Codes verndert werden. Dieses Verfahren bietet sich an, wenn Sie ein vorgegebenes, festes+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 sptere Benutzer der Internetseite das Layout auch nicht ndern sollen bzw. drfen. Natrlich sind bei diesem Verfahren dem Designer keine Grenzen gesetzt.+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 spter 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:+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 / DeDi Vorlagen
Zeile 39: Zeile 39:
. /. / img . /. / 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:+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:
<nowiki><img border="0" src="media/img/bild.gif" width="200" height="100"></nowiki> <nowiki><img border="0" src="media/img/bild.gif" width="200" height="100"></nowiki>
-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.+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 spter mehrere Projekte (z.B. projekt01, projekt02) verwalten mchten und den anderen Projekten auch Ihr Layout zur Verfgung stellen mchten, empfiehl es sich die Pfade als absoluten Link zu setzen. In diesem Falle wrde der Bildpfad im HTML Code wie folgt aussehen:+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:
<nowiki><img border="0" src="http://ihreDomain.de/projekt01/media/img/bild.gif" width="200" height="100"></nowiki> <nowiki><img border="0" src="http://ihreDomain.de/projekt01/media/img/bild.gif" width="200" height="100"></nowiki>
-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 knnen nun also aus dem Basisverzeichnis des projekt01 gezogen werden.+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 knnen pter per FTP-Programm oder per DeDi-Dateimanager auf den Webserver bertragen. Da das Verzeichnis img die Rechte 777 bei der Installation bekommen hat, knnen die Dateien spter auch per DeDi-Dateimanager verwalt 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 Fllen 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 verfgen sollen, knnen Sie Layout-Grafiken eventuell auch lschen und so das Layout zerstren. Um dieses zu unterbinden, legen Sie einfach im Hauptverzeichnis ein neues+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 spter auf den Webserver. +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 whre dann z.B.:+Der Pfad im HTML-Layout zu den Grafiken währe dann z.B.:
<nowiki>http://ihreDomain/projekt01/layout/bild.gif</nowiki> <nowiki>http://ihreDomain/projekt01/layout/bild.gif</nowiki>
-Der Effekt ist, dass dieses Verzeichnis nun nicht im Dateimanager auftaucht und fr andere Benutzer kein Zugriff besteht, bzw. nicht Sichtbar ist. Dieses Verzeichnis bentigt natrlich keine Rechte 777, da es nur per FTP-Programm und nicht per Dateimanager ansprechen knnen.+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.
== Variable Grafiken == == Variable Grafiken ==
-Sie knnen Layout-Grafiken auch komplett ber DeDi verwalten. Das bietet sich an, wenn man ein einfaches Grundlayout hat, in dem man die Grafiken schnell wechseln mchte. Z.B. knnen Sie so eine Headlinegrafik verwenden die angepasst, z.B. an die Jahreszeit, gendert wird. Natrlich sind hier der Phantasie des Designers keine Grenzen gesetzt. Fr die Verwendung der variablen Grafiken und die Verwaltung ber den Dateimanager, verfahren Sie beim erstellen und speichern Ihrer Grafiken einfach wie oben beschrieben. +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.
Zeile 79: Zeile 79:
<dedi type="container" id="4" name="Bild"> <dedi type="container" id="4" name="Bild">
-Durch die Einbindung des DeDi-Containers knnen Sie spter das Modul Bild verwenden und so Ihre Grafiken ber DeDi komfortabel verwalten. Den Platzhalter knnen Sie an beliebig vielen Stellen, so oft wie sie mchten einsetzen. Allerdings ist auf eine fortlaufende Nummerierung und eine eindeutige Bezeichnung aller Container im Layout zu achten. Z.B.+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="4" name="Bild1 ">
Zeile 92: Zeile 92:
-Fr die Einbindung von Flash-Komponenten oder anderen Elementen verfahren Sie entsprechend der Anleitung Einbindung von Grafiken. Natrlich mssen Sie hier den entsprechenden HTMLCode fr das einzubindende Element und die Pfade beachten.+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 Verfgung. Sie knnen daher nur Feste Grafiken verfahren und den HTML-Code direkt in das Layout schreiben.+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.
== Layoutvariablen == == Layoutvariablen ==
-Nach dem erstellen des Layout als normale HTML Datei muss Quellcode fr DeDi modifiziert werden. Zur Erklrung sehen Sie sich einen einfachen Quellcode fr DeDi an: +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:
Zeile 114: Zeile 114:
-Erklrung des Quellcode:+Erklärung des Quellcode:
<title> <DEDIPHP> print($con_side[$idcatside]['name']); </DEDIPHP> </title> <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 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 wrde jetzt in der Browsertitelleiste beim Aufruf der Startseite zum Beispiel &#8222;Startseite&#8220; stehen.+angegeben. Hier würde jetzt in der Browsertitelleiste beim Aufruf der Startseite zum Beispiel &#8222;Startseite&#8220; stehen.
-Um den Titel ein wenig zu verfeinern, knnen wir auch Feste Werte mit einbauen (z.B. Firmennamen). Dieses wrde so aussehen:+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> Firma Mustermann - <DEDIPHP> print($con_side[$idcatside]['name']); </DEDIPHP>
</title> </title>
-Hier wrde jetzt in der Browsertitelleiste beim Aufruf der Startseite z.B. &#8222;Firma Mustermann &#8211; Startseite&#8220; stehen. Die Bezeichnung &#8222;Firma Mustermann&#8220; ist nun fest mit dem Layout verbunden und wird bei allen Seiten die diese Layout verwenden ausgegeben. &#8222;Startseite&#8220; wird dynamisch aus der Seitenbezeichnung generiert.+Hier würde jetzt in der Browsertitelleiste beim Aufruf der Startseite z.B. &#8222;Firma Mustermann &#8211; Startseite&#8220; stehen. Die Bezeichnung &#8222;Firma Mustermann&#8220; ist nun fest mit dem Layout verbunden und wird bei allen Seiten die diese Layout verwenden ausgegeben. &#8222;Startseite&#8220; wird dynamisch aus der Seitenbezeichnung generiert.
<dedi:lay type="head"/> <dedi:lay type="head"/>
-Sollte Sinnvollerweise am Ende Head-Bereichs stehen. An der Stelle von <dedi type="head"> steht spter im HTML Code des Browsers die Metaangaben, die wir innerhalb von DeDi definieren. Dieses sind z.B. die Pfad-Angaben fr CSS, die Java-Befehle sowie die Meta-Tags fr die Suchbegriffe. Die Einbindung erfolgt durch DeDi automatisch und wird im Backend beim anlegend+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. des neuen Layouts festgelegt.
<dedi:lay type="container" id="1" title="Seiten-Content"/> <dedi:lay type="container" id="1" title="Seiten-Content"/>
-DeDi-Container sind die wichtigsten Layoutvariablen. Container sind Platzhalter, an deren Stelle spter unseren Content ausgeben wird. Container knnen an beliebigen Stellen so oft wie wir mchten 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.+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 Im Einzelnen besteht unser Container aus folgenden Bestandteilen
-; <dedi:lay :Pflichtfeld - Beginn der Code-Zeile fr Container+; <dedi:lay :Pflichtfeld - Beginn der Code-Zeile für Container
-; type="container" :Pflichtfeld &#8211; Bezeichnung fr einen Container+; type="container" :Pflichtfeld &#8211; Bezeichnung für einen Container
-; id="1&#8220; :Pflichtfeld &#8211; Eindeutige Nummer des Containers. Wichtig dabei ist, dass jeder Container eine eigene &#8222;ID&#8220; bekommt. Die ID kann beliebig hoch sein, dass heit von 1 bis 999999. Durch die Reihenfolge der IDs knnen wir auch die Ausgabe der Bereiche im Backend zur Bearbeitung festlegen. Im Bereich &#8222;Design > Templates > Template bearbeiten&#8220; wrde der Container mit der ID 1 als erstes, dann der Container mit der ID 2 als zweites usw., erscheinen. Diese Sortierung erleichtert spter eine bersichtliche Bearbeitung der Templates.+; id="1&#8220; :Pflichtfeld &#8211; Eindeutige Nummer des Containers. Wichtig dabei ist, dass jeder Container eine eigene &#8222;ID&#8220; 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 &#8222;Design > Templates > Template bearbeiten&#8220; 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.
-Fr die bersichtliche Strukturierung der Container empfiehlt es sich ID-Gruppen zu bilden. So+Für die Übersichtliche Strukturierung der Container empfiehlt es sich ID-Gruppen zu bilden. So
erhalten zum Beispiel erhalten zum Beispiel
Zeile 153: Zeile 153:
;Footerelemete :ID 21-30 ;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 zufgen und lschen von Containern wird dadurch vereinfacht. Durch die Gruppenbildung kann man zum Beispiel direkt im Layoutcode weitere Inhaltselemente einbauen, ohne dafr das ganze Layout zu studieren. Das knnte z.B. so aussehen:+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:
<nowiki><table ></nowiki> <nowiki><table ></nowiki>
Zeile 162: Zeile 162:
<nowiki></table></nowiki> <nowiki></table></nowiki>
-Wollen wir nun unter dem WYSIWYG-Editor (Container 10) schnell ein Kontaktformular einfgen, brauchen wir nur im Backend das Layout aufrufen und den Quelltext mit einfachen Mitteln verndern. Z.B.:+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.:
<nowiki><table></nowiki> <nowiki><table></nowiki>
Zeile 175: Zeile 175:
-Wir knnen auch von vorneherein mehrere Container anlegen, z.B. 2 oder 3 Inhaltscontainer. In unseren Templateeinstellungen knnen wir dann spter festlegen ob dort ein Modul ausgegeben werden soll oder nicht (kein Modul).+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" title="Seiten-Content"
-Freie Bezeichnung des Containers. Diese wird spter 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+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.+Übersicht, die Verwendung von eindeutigen Containertiteln.
/> />
-Pflichtfeld - Ende der Code-Zeile fr Container+Pflichtfeld - Ende der Code-Zeile für Container
<dedi:lay type="config"/> <dedi:lay type="config"/>
-DeDi-Type-Config muss am Ende des Bodybereiches stehen. Dies erzeugt spter im Backend einen kleinen Bearbeitungslayer, mit dem Sie neue Seiten und Ordner anlegen oder diese, aus der Seite heraus, konfigurieren knnen. Der Tag ist zwar nicht zwingend erforderlich, erleichtert aber spter enorm die Arbeit mit DeDi und macht den Backendbereich sehr komfortabel.+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.
== Verwendung von PHP / DEDIPHP == == Verwendung von PHP / DEDIPHP ==
-Wir knnen 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.+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 fr 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 knnen 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. Grundstzlich gilt folgendes zum DeDi-Cache zu beachten:+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:
<nowiki><i></nowiki> <nowiki><i></nowiki>
Zeile 206: Zeile 206:
<nowiki><?PHP</nowiki> <nowiki><?PHP</nowiki>
echo 'Ich bin PHP- Code und werde beim ersten Aufruf generiert und dann gecacht - Man beachte 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();+ meinen Timestamp, den der ändert sich nicht mehr -->' . time();
<nowiki>?></nowiki> <nowiki>?></nowiki>
<DEDIPHP> <DEDIPHP>
- Ich bin PHP- Code und werde IMMER neu generiert und NIE gecacht - Deshalb ndert sich auch+ Ich bin PHP- Code und werde IMMER neu generiert und NIE gecacht - Deshalb ändert sich auch
mein Timestamp bei jedem aktualisieren der Seite -->'. time() mein Timestamp bei jedem aktualisieren der Seite -->'. time()
</DEDIPHP> </DEDIPHP>
[[Category:Handbuch]] [[Category:Handbuch]]

Aktuelle Version

Inhaltsverzeichnis

[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>
Persönliche Werkzeuge