webEdition Benutzerhandbuch PLUS

webEdition Benutzerhandbuch PLUS

113

4 Vorlagen erstellen – Aufgabe des

Administrators

Dieses Kapitel richtet sich an Administratoren. In diesem Kapitel wird unter

Administrator derjenige verstanden, der Struktur und Layout der Webseiten in

Vorlagen erstellt. Es richtet sich also vornehmlich an den entwickelnden und weniger an den technischen Adminstrator der Website.

Dieses Kapitel behandelt folgende Themen:

"Was ist eine Vorlage?"

"Was sind we:tags?"

"Ansichten für Vorlagen"

"Hauptvorlage (Mastertemplate) erstellen"

"Vorlagen erstellen"

"Variable Inhalte durch we:tags ersetzen"

"Weitere Funktionen über we:tags definieren"

— "Tags für das Navigationstool"

— "Bearbeitbare Linkliste bzw. bearbeitbare Links erstellen"

— "Übersicht über Inhalte der Website generieren"

— "Bildergalerie erstellen"

— "Seiten und Objekte im Frontend erstellen und bearbeiten"

— "Dokument einbinden"

— "Suche realisieren"

— "Formular per E-Mail verschicken"

— "Mit Frames arbeiten"

— "Vorlagen automatisch erzeugen"

— "Externen RSS-feed einbinden"

— "webEdition Seiten als RSS-Feed ausgeben"

Benutzerhandbuch

114 Vorlagen erstellen – Aufgabe des Administrators

Es werden erweiterte Grundkenntnisse in HTML vorausgesetzt. PHP- und

MySQL-Kenntnisse sind von Vorteil, aber nicht unbedingt erforderlich.

Hinweis: Die Beispiele in diesem Kapitel beziehen sich auf die Beispielseiten

we_demo. Diese finden Sie nach der Installation von webEdition im linken Bereich des webEdition Fensters in einer Baumstrukturansicht.

4.1 Was ist eine Vorlage?

Eine Vorlage, auch Template genannt, bildet Struktur und Design der Website als

HTML-Gerüst ab. Sie enthält Elemente, die im Sinne der Corporate Identity auf jeder

Webseite erscheinen sollen. Für Texte und Bilder, die Redakteure ändern können sollen, enthält die Vorlage Platzhalter wie z. B. Texteingabefelder oder Buttons zum

Hochladen von Bildern). Die Platzhalter werden durch we:tags realisiert.

Abb. 156 Beispiel einer Vorlage (we_demo/accessible/accessibleText.tmpl) in der

Ansicht Vorschau Editmode

Eine Vorlage wird i.a. für mehrere Dokumente benutzt. Sind die Vorlagen fertiggestellt, legen Redakteure auf der Basis dieser Vorlagen Dokumente an, füllen die Dokumente mit Inhalt bzw. pflegen den Inhalt.

Standard 4.1.1 Oktober 2006

Vorlagen erstellen – Aufgabe des Administrators 115

Abb. 157 Dokument, basierend auf einer Vorlage, gefüllt mit Inhalt

(we_demo/accessible/demo.html)

Aus den Vorlagen und den Inhalten der Dokumente generiert webEdition die Website.

Platzhalter, die nicht mit Inhalt gefüllt wurden, ignoriert webEdition.

Abb. 158 Webseite, generiert aus Vorlage und Inhalten des Dokuments

Benutzerhandbuch

116 Vorlagen erstellen – Aufgabe des Administrators

Hier sehen Sie den Inhalt der Vorlage we_demo/accessible/accessibleText.tmpl in der

Quellcodeansicht (Ansicht Bearbeiten). In diesem Fall wurde die headline über

<we:include> eingebunden und ein Hauptvorlage in den Eigenschaften definiert:

<we:include type="template" id="98" />

<div class="contentBox">

<we:ifEditmode>

<div class="editmode">

Hier kann ein Fließtext eingegeben werden.

</div>

</we:ifEditmode>

<we:textarea wysiwyg="true" name="accessibleText" cols="60" inlineedit="false" rows="20" xml="true" removefirstparagraph="true" buttonpos="bottom" classes="imageRight,imageLeft" />

</div>

4.2 Was sind we:tags?

Mit we:tags werden Platzhalter für die Bereiche der Website erzeugt, die später von den

Redakteuren gepflegt werden sollen (Texte, Grafiken, Bilder, Navigationsleiste etc.).

Sie ermöglichen das Erstellen von Textbereichen, das Hochladen von Bildern und das

Erstellen von Übersichtsseiten.

we:tags sind eine an XML angelehnte Tag-Sprache, die HTML-, Javascript- und PHP-

Funktionalitäten beinhaltet. we:tags speichern Funktionen in Bibliotheken. Diese

Funktionen werden ausgeführt, wenn eine Seite aufgerufen wird.

Sie beginnen immer mit "we:". Es gibt we:Tags, die ein Endtag benötigen (z. B.

<we:block> </we:block>), die meisten benötigen kein Endtag (z. B. <we:textarea/>).

4.3 Ansichten für Vorlagen

Im Folgenden werden die Ansichten, in denen Sie eine webEdition Vorlage anzeigen können, beschrieben.

4.3.1 Eigenschaften Ansicht

Hier können Sie Namen und Speicherort ihrer Vorlage festlegen oder eine bereits bestehende Vorlage kopieren.

Standard 4.1.1 Oktober 2006

Vorlagen erstellen – Aufgabe des Administrators 117

Abb. 159 Vorlagenansicht Eigenschaften

Es gibt hier die folgenden Bereiche:

Pfad: Hier legen Sie Namen und Speicherort Ihrer Vorlage fest. Klicken Sie auf den

Auswählen Button, um im Dateimanager das Verzeichnis auszuwählen. Um

Eingabefehlern vorzubeugen, ist eine manuelle Eingabe nicht vorgesehen. Die

Dateierweiterung ist auf .tmpl (für Template) voreingestellt.

Hauptvorlage: Klicken Sie auf den Auswählen Button, um der Vorlage eine

Hauptvorlage zuzuweisen, auf der Sie basieren soll. Näheres zu Hauptvolagen

erfahren Sie in Abschnitt 4.4, "Hauptvorlage (Mastertemplate) erstellen,".

Dokumente: Hier werden die Dokumente angezeigt, die auf dieser Vorlage basieren.

Mit einem Klicke auf eines dieser Dokumente gelangen Sie direkt zu dem entsprechenden Dokument.

Zeichenkodierung: Hier können Sie die Zeichenkodierung für die Vorlage einstellen (z.B. UTF-8 oder ISO_8859-1). Diese wird dann für auf dieser Vorlage basierende Dokumente verwendet.

Vorlage kopieren: Hier können Sie eine bereits bestehende webEdition Vorlage importieren um auf deren Basis eine neue Vorlage zu erstellen. Wählen Sie dazu die

Benutzerhandbuch

118 Vorlagen erstellen – Aufgabe des Administrators gewünschte Vorlage im Dateimanager aus und importieren Sie sie dann mit einem

Klick auf OK.

Abb. 160 Vorlage mit dem Dateimanager importieren

4.3.2 Bearbeiten Ansicht

Die Ansicht Bearbeiten zeigt die Vorlage im HTML-Code. Hier können Sie selbstständig Veränderungen vornehmen oder den Standard HTML-Code durch verschiedene we:Tags erweitern.

Standard 4.1.1 Oktober 2006

Abb. 161 Vorlagenansicht Bearbeiten

Vorlagen erstellen – Aufgabe des Administrators 119

Unter dem Textbearbeitungsbereich mit dem Code finden Sie den webEdition

Tagwizard, der Ihnen hilft, die korrekten we:tags mit den entsprechenden Attributen zu finden (siehe Prozedur 14 "Tagwizard benutzen" auf Seite 130).

4.3.3 Information Ansicht

Hier finden Sie Informationen über Speicherpfad, Größe und Erstellungs- bzw.

Bearbeitungsdatum der Vorlage. Wenn die Benutzerverwaltung (PRO) installiert ist, werden auch der Ersteller und der letzte Bearbeiter der Vorlage angezeigt.

Benutzerhandbuch

120 Vorlagen erstellen – Aufgabe des Administrators

Abb. 162 Vorlagenansicht Information

4.3.4 Vorschau Editmode Ansicht

Die Ansicht Vorschau Editmode zeigt, wie die Seite in der Bearbeitungsansicht des

Redakteurs aussieht.

Abb. 163 Vorlagenansicht Vorschau Editmode

Standard 4.1.1 Oktober 2006

Vorlagen erstellen – Aufgabe des Administrators 121

4.3.5 Vorschau Ansicht

In der Ansicht Vorschau können Sie die Vorschau eines auf der Vorlage basierenden

Dokumentes sehen, wie es später den Websitebesuchern angezeigt werden würde.

Abb. 164 Ansicht Vorschau

Im Beispiel in Abb. 164 ist der Designrahmen der Vorlage durch die Auswahl des

Mastertemplates bereits definiert.

4.4 Hauptvorlage (Mastertemplate) erstellen

Mit einer Hauptvorlage kann man das komplette Layout einer ganzen Website festlegen, sie bildet den Designrahmen der Website. Unter eine Inhaltsvorlage versteht man eine Vorlage, welche von der Hauptvorlage "umhüllt" wird. Die Hauptvorlage wird genauso erstellt wie eine normale Vorlage, sie muss jedoch das Tag <we:content> enthalten. Das komplette Start- und Endtag, inklusive allem was dazwischensteht, wird später mit dem Code der Inhalts-Vorlage ersetzt. Es kann allerdings zwischen dem

Start- und Endtag Code stehen, welcher dann auch in der Vorschau der Vorlagen angezeigt wird, damit man eine bessere Vorstellung des letztendlichen Dokuments hat.

Das <we:content> Tag kann auch ohne Endtag benutzt werden.

Beispiel

<html>

<head>

<we:title></we:title>

<we:keywords></we:keywords>

<we:description ></we:description>

</head>

<body>

<we:content><b>Beispiel-Code</b> Wird in der Vorschau der

Vorlage angezeigt</we:content>

</body>

</html> bzw. ohne Endtag:

<html>

Benutzerhandbuch

122 Vorlagen erstellen – Aufgabe des Administrators

<head>

<we:title></we:title>

<we:keywords></we:keywords>

<we:description ></we:description>

</head>

<body>

<we:content/>

</body>

</html>

Abb. 165 Schematische Darstellung

3

1

2

<we:content> Bereich

Die Hauptvorlage masterTemplate.tmpl in der we_demo umschliesst die gesamte

Seite.

• 1: In den <we:content> Bereich werden die verschiedenen Vorlagen eingebunden

• 2: Die Navigation wird über ein <we:include> einmal in die Hauptvorlage eingebunden und steht so stets zur Verfügung

• 3: Auch der Header ist über ein includiertes Dokument eingebunden, da er ja nicht ständig verändert werden muß

Die Hauptvorlage kann Vorlagen ganz einfach über die Eigenschaften der betreffenden

Vorlage zugewiesen werden (vergleiche Abschnitt 4.3.1, "Eigenschaften Ansicht,").

Standard 4.1.1 Oktober 2006

Abb. 166 Eigenschaften der Vorlage

Vorlagen erstellen – Aufgabe des Administrators 123

Wenn man eine Vorlage mit Hauptvorlage speichert, werden beim Speichern die beiden

Vorlagen zusammengefügt und ins Dateisystem geschrieben. Diese zusammengefügte

Vorlage wird dann wie eine einzelne Vorlage von webEdition weiter behandelt. Daher muss auch ein Rebuild über Vorlagen und ggf. über die betroffenen Dokumente erfolgen, wenn die Hauptvorlage später geändert wird.

4.4.1 Vorlagen includieren

Wenn man im <we:include> Tag das Attribut type="template" setzt (<we:include type="template" id="templateID">), dann wird anstelle eines Dokuments eine Vorlage

(mit der angegebenen ID) eingefügt.

4.4.2 Vorlagen Rebuild

Um alle Vorlagen neu zu schreiben, kann man einen Vorlagen-Rebuild durchführen.

Dies ist z.B. notwendig, wenn eine Hauptvorlage geändert und der Rebuild Vorgang beim Speichern der Vorlage nicht durchgeführt wurde. Wählen Sie hierzu Datei >

Rebuild.... Im darauf folgenden Dialog wählen Sie Dokumente und Vorlagen und klicken dann auf Weiter. Nun wählen Sie Alle Vorlagen und betätigen den Weiter

Button.

Abb. 167 Vorlagen Rebuild

Benutzerhandbuch

124 Vorlagen erstellen – Aufgabe des Administrators

4.5 Vorlagen erstellen

Analysieren Sie zuerst, wieviele Grundlayouts Ihre Website beinhaltet bzw. beinhalten soll. Gruppieren Sie HTML-Seiten mit ähnlichem Grundlayout. Erstellen Sie dann für jede dieser Gruppen eine Vorlage. Aus jeder Vorlagen können dann (wieder) unterschiedliche Webseiten erstellt werden.

Wenn Sie nur einige Webseiten Ihres Internetauftritts mit webEdition verwalten wollen, reicht es aus, nur auf diesen Seiten die zu pflegenden Bereiche durch we:Tags zu ersetzen und diese als Vorlage abzuspeichern.

Hinweis: Verlinken Sie auf Layoutgrafiken absolut. Layoutgrafiken sind

Bilder/Grafiken, die das Corporate Design bestimmen und nicht von Redakteuren ausgetauscht werden sollen. Geben Sie die Pfadangabe ausgehend vom

Root-Verzeichnis des Webservers (Ihres Hosts) an. Nur so kann gewährleistet werden, dass eine Layoutgrafik unabhängig von dem Ort, an dem die Datei abgespeichert ist, gefunden wird.

Es gibt folgende Vorgehensweisen, eine webEdition Vorlage zu erstellen:

• Website existiert bereits:

Importieren Sie die bestehende Webseiten als webEdition Vorlage nach webEdition. Ersetzen Sie anschließend die Bereiche, die später von den

Redakteuren gepflegt werden sollen, durch we:tags.

Siehe Prozedur 10 "Eine Vorlage aus einer bestehenden Webseite erstellen" auf

Seite 125.

• Website existiert noch nicht:

— 1. Möglichkeit: Sie erstellen eine Vorlage direkt in webEdition.

Hinweis: webEdition beinhaltet keinen HTML-Editor wie z. B.

Dreamweaver. Deshalb wird diese Möglichkeit nicht empfohlen.

Siehe Prozedur 11 "Neue Vorlage erstellen" auf Seite 125.

— 2. Möglichkeit: Sie haben einen HTML-Editor wie Dreamweaver oder

Frontpage zur Verfügung. In diesem Fall erstellen Sie eine Website mit

Beispieltexten und -grafiken in dem HTML-Editor, kopieren den Quellcode der

HTML-Datei und fügen ihn in webEdition ein. Mit we:tags definieren Sie die

Bereiche, die von den Redakteuren gepflegt werden sollen, und zusätzliche

Funktionalitäten.

Siehe Prozedur 12 "Vorlage mit Hilfe eines HTML-Editors erstellen" auf Seite

125.

— 3. Möglichkeit: Sie benutzen die bei webEdition mitgelieferten Vorlagen der

we_demo bzw. we_demo2 als Ausgangsbasis und passen diese entsprechend an.

Siehe Prozedur 13 "Vorlage kopieren" auf Seite 126 und Abschnitt 4.5.2

"Vorlage bearbeiten" auf Seite 126.

Standard 4.1.1 Oktober 2006

Vorlagen erstellen – Aufgabe des Administrators 125

Prozedur 10 Eine Vorlage aus einer bestehenden Webseite erstellen

Im webEdition Hauptbildschirm

1

Legen Sie eine Vorlage an. Siehe Prozedur 11 "Neue Vorlage erstellen" auf Seite 125.

2

Kopieren Sie per Copy & Paste den Quellcode der HTML-Seite in den Texteditor von webEdition (Ansicht Bearbeiten, obere Textbox).

3

Ersetzen Sie die Bereiche, die später von den Redakteuren gepflegt werden sollen, durch

die entsprechenden we:Tags. Siehe Abschnitt 4.6 "Variable Inhalte durch we:tags ersetzen" auf Seite 127.

4

Definieren Sie alle gewünschten Funktionalitäten mit den entsprechenden we:Tags. Siehe

Abschnitt 4.7, "Weitere Funktionen über we:tags definieren,"

Die Vorlage ist nun erstellt. Wenn Sie die Inhalte der ursprünglichen Website in webEdition haben möchten, erstellen Sie nun in webEdition ein neues Dokument, das auf der Vorlage

basiert (Datei > Neu > webEdition Seite > “Name der neu erstellten Vorlage”) und fügen Sie

die Inhalte in dieses Dokument ein (siehe Kapitel 3 "Mit Dokumenten arbeiten – Aufgabe des Redakteurs" auf Seite 49).

Diese Prozedur ist hiermit abgeschlossen.

Prozedur 11 Neue Vorlage erstellen

Am webEdition Hauptbildschirm

1

Wählen Sie Datei > Neu > Vorlage oder wählen Sie im Quickstart Menü Neue Vorlage aus.

Die Ansicht Eigenschaften wird angezeigt.

2

Geben Sie im Bereich Pfad in das Feld Dateiname den Namen der Vorlage ein.

3

Klicken Sie darunter bei Verzeichnis auf Auswählen.

a

Suchen Sie im Dateimanager nach dem passenden Ordner oder erstellen Sie einen neuen.

b

Klicken Sie auf das gewünschte Verzeichnis und dann auf OK.

4

Klicken Sie auf Speichern am unteren Bildschirmrand.

webEdition informiert Sie nun über das erfolgreiche Speichern der neuen Vorlage.

5

Klicken Sie auf OK.

Die neue Vorlage wird links im Explorerfenster angezeigt.

Diese Prozedur ist hiermit abgeschlossen.

Prozedur 12 Vorlage mit Hilfe eines HTML-Editors erstellen

Starten Sie Ihren HTML-Editor

1

Erstellen Sie eine Webseite wie gewohnt in Ihrem bevorzugten HTML-Editor.

2

Legen Sie alle Layoutgrafiken in einen Ordner namens images, welcher sich im gleichen

Arbeitsverzeichnis wie die zu erstellende Seite befindet.

3

Laden Sie die Bilder per FTP auf Ihren Webserver in das gewünschte Verzeichnis, z. B. layout_images, im Root-Verzeichnis.

4

Ersetzen Sie mit der Suchen/Ersetzen-Funktion alle images/ zu /images/.

5

Kopieren Sie per Copy & Paste den Quellcode der HTML-Seite in den Texteditor von webEdition (Ansicht Bearbeiten, obere Textbox).

6

Ersetzen Sie die Bereiche, die später von den Redakteuren gepflegt werden sollen, durch

die entsprechenden we:Tags. Siehe Abschnitt 4.6 "Variable Inhalte durch we:tags ersetzen" auf Seite 127.

7

Definieren Sie alle gewünschten Funktionalitäten mit den entsprechenden we:Tags. Siehe

Abschnitt 4.7, "Weitere Funktionen über we:tags definieren,"

Benutzerhandbuch

126 Vorlagen erstellen – Aufgabe des Administrators

8

Speichern Sie die Vorlage.

Die Prozedur ist hiermit abgeschlossen.

Prozedur 13 Vorlage kopieren

Am webEdition Hauptbildschirm

1

Wählen Sie Datei > Neu > Vorlage.

Die Ansicht Eigenschaften wird angezeigt.

2

Geben Sie im Bereich Pfad in das Feld Dateiname den Namen der Vorlage ein.

3

Klicken Sie darunter bei Verzeichnis auf Auswählen.

a

Suchen Sie im Dateimanager nach dem passenden Ordner oder erstellen Sie einen neuen.

b

Klicken Sie auf das gewünschte Verzeichnis und dann auf OK.

4

Klicken Sie auf Auswählen im Bereich Vorlage kopieren.

a

Wählen Sie im Dateimanager die gewünschte Vorlage.

b

Klicken Sie auf die entsprechende Vorlage und dann auf OK.

5

Klicken Sie auf Speichern am unteren Bildschirmrand.

webEdition informiert Sie nun über das erfolgreiche Speichern der neuen Vorlage.

6

Klicken Sie auf OK.

Die neue Vorlage wird links im Explorerfenster angezeigt und kann als Basis für ein neues

Dokument benutzt oder bearbeitet werden.

Diese Prozedur ist hiermit abgeschlossen.

4.5.1 Vorlage speichern

Sichern Sie Änderungen an der Vorlage durch einen Klick auf Speichern.

Abb. 168 Speichern Button

Wenn Sie eine Vorlage bearbeiten, auf der bereits Dokumente basieren, fragt webEdition, ob sich die Änderungen an der Vorlage auch auf die entsprechenden

Dokumente auswirken sollen.

• Antworten Sie mit ja, werden die Vorlage und dann alle Dokumente, welche auf dieser Vorlage basieren, mit den Änderungen neu abgespeichert.

• Antworten Sie mit nein, wird nur die Vorlage mit den Änderungen gespeichert. Die

Dokumente, die auf dieser Vorlage basieren, nutzen dann nicht die neue Vorlage, sondern basieren weiter auf der alten Vorlage, bis die Dokumente selbst neu gespeichert werden.

Die Option Automatischer Rebuild bewirkt ein automatisches Neuspeichern aller

Dokumente, die auf dieser Vorlage basieren.

4.5.2 Vorlage bearbeiten

Um eine Vorlage zu bearbeiten, klicken Sie diese entweder einmal im Explorermenü an oder wählen Sie Datei > Öffnen > Vorlage.... Nehmen Sie nun Ihre Änderungen in der

Ansicht Bearbeiten vor und speichern Sie die Vorlage neu ab. Siehe auch Abschnitt

4.3.2 "Bearbeiten Ansicht" auf Seite 118.

Standard 4.1.1 Oktober 2006

Vorlagen erstellen – Aufgabe des Administrators 127

4.5.3 Vorlage löschen

Eine Vorlage löschen Sie, indem Sie im Menü Datei > Löschen > Vorlage wählen. Die

Anwendung schaltet dann in den Löschmodus um. Wählen Sie dann die entsprechende

Vorlage im Explorermenü aus und klicken Sie auf den Button OK. Sie werden dann gefragt, ob Sie die Vorlage wirklich löschen wollen. Wenn Sie mit ja antworten, wird die Vorlage endgültig gelöscht.

Hinweis: Falls eine Vorlage schon von einem oder mehreren Dokumenten benutzt wird, kann sie nicht gelöscht werden. Sie erhalten in diesem Fall eine Fehlermeldung mit dem entsprechenden Hinweis. Löschen oder ändern Sie dann zuerst alle

Dokumente, welche diese Vorlage benutzen, und danach die eigentliche Vorlage.

4.6 Variable Inhalte durch we:tags ersetzen

we:tags werden in der Bearbeiten Ansicht in den HTML Quellcode eingefügt. Aus den we:tags generiert webEdition automatisch entsprechende Eingabemasken für die

Redakteure. In der Vorschau Editmode Ansicht können Sie überprüfen, wie die Seite für die Redakteure aussieht.

In folgender Tabelle sehen Sie, durch welche we:tags zu pflegende Überschriften, Texte und Bilder ersetzt werden.

Table 1 we:tags für Überschriften, Texte und Bilder

HTMLTag we:tag

<h1>...</h1> (Überschrift)

<p>...</p> (Text, evtl. mehrzeilig)

<img src="...> (Bilder)

<we:input type="text">

<we:textarea>

<we:img>

Die we:tags sind für Redakteure als entsprechende Eingabemasken sichtbar.

• <we:input type=”text”> erzeugt ein Texteingabefeld, in das eine Zeile Text eingegeben werden kann.

Abb. 169 Einzeiliges Texteingabefeld

• <we:textarea> erzeugt ein mehrzeiliges Texteingabefeld, in das mehrere Zeilen

Text eingegeben werden kann.

Benutzerhandbuch

128 Vorlagen erstellen – Aufgabe des Administrators

Abb. 170 Mehrzeiliges Texteingabefeld

• <we:img> erzeugt Buttons zum Einfügen, Austauschen und Löschen von Bildern.

Abb. 171 Button zum Einfügen, Austauschen und Löschen von Bildern

Nachfolgend einige Beispiele dazu.

Beispiel

Ein Text in Fettschrift soll für Redakteure pflegbar sein. Der Text wird durch das we:tag ersetzt, das ein einzeiliges Texteingabefeld generiert (<we:input type=”text”). Das HTML-Tag <bold> bleibt bestehen.

Vorher:

<b>Das ist ein Text in Fettschrift.</b>

Nachher:

<b><we:input type="text" name="Fettschrifttext" size="20"></b>

Beispiel

Text aus einer Tabellenzelle wird durch das we:tag ersetzt, das ein mehrzeiliges

Texteingabefeld generiert (<we:textarea>).

Vorher:

<tr>

<td align="left" valign="top">

Talai: Die Insel bietet außer freundlichen Menschen eine ansprechende Landschaft.

</td>

</tr>

Nachher:

<tr>

<td align="left" valign="top">

<we:textarea name="Text" cols="60" rows="30" WYSIWYG="true" showMenues="on"/>

</td>

</tr>

Redakteure können nun auf der Basis der Vorlage ein Dokument anlegen und in das

Texteingabefeld Text eingeben und bearbeiten.

Beispiel

Eine Tabellenzeile enthält zwei Tabellenzellen mit jeweils einem Bild. Das erste

Bild gehört zum Layout der Seite und wird deshalb nicht ersetzt. Das zweite Bild soll später von den Redakteuren ausgetauscht oder gelöscht werden können.

Standard 4.1.1 Oktober 2006

Vorlagen erstellen – Aufgabe des Administrators 129

Deshalb wird es durch ein we:tag ersetzt, das Buttons generiert, die diese

Funktionen ermöglichen (<we:img>).

Vorher:

<tr>

<td>

<img scr="bild1.jpg" width="100" height="30" border="1">

</td>

<td>

<img src="bild2.jpg" width="120" height="30" border="1">

</td>

</tr>

Nachher:

<tr>

<td>

<img scr="bild1.jpg" width="100" height="30" border="1">

</td>

<td>

<we:img name=”bild2”>

</td>

</tr>

Eine Auflistung der am häufigsten verwendeten we:tags finden Sie in folgender

Tabelle:

Table 2 Häufige we:tags und ihr Resultat we:tag (mit Attribut) Resultat

<we:textarea>

<we:img>

<we:input type=”text”>

<we:input type=”choice”>

Mehrzeiliges Texteingabefeld

Buttons zum Einfügen, Austauschen oder Löschen von Bildern

Einzeiliges Texteingabefeld

<we:input type=”date”>

Einzeiliges Eingabefeld mit einer

Auswahlliste

Auswahlfelder für Datums- und

Zeitangaben

<we:input type=”checkbox”>

<we:search type=”textinput”>

<we:search type=”textarea”>

<we:select>>

<we:category>

Checkbox, mit der man ein Feld auf ein oder aus setzen kann

Einzeiliges Texteingabefeld für

Suchanfragen der Websitebesucher

Mehrzeiliges Texteingabefeld für

Suchanfragen der Websitebesucher

Auswahlbox für Einträge

<we:linklist>

Zuordnung einer Seite zu einer

Kategorie (wichtig für Übersichten)

Erweiterbare Linkliste

Benutzerhandbuch

130 Vorlagen erstellen – Aufgabe des Administrators

Table 2 Häufige we:tags und ihr Resultat we:tag (mit Attribut) Resultat

<we:link>

<we:title>

<we:keywords>

Link-Definition in Linklisten

Texteingabefeld für das Meta-Tag

<title>

Texteingabefeld für das Meta-Tag

<keywords>

<we:description> Texteingabefeld für das Meta-Tag

<description>

4.6.1 Wie erfahre ich die korrekte Syntax? Der Tagwizard

Der Tagwizard (siehe Abb. 173) hilft Ihnen, das gesuchte Tag und die passenden

Attributeinstellungen schnell zu finden. Er listet die we:tags auf, nennt zu jedem we:tag

Pflicht- und optionale Attribute und generiert aus Ihrer Auswahl die korrekte Syntax.

Prozedur 14 Tagwizard benutzen

In der Bearbeiten-Ansicht der Vorlage

1

Blenden Sie den Tagwizard ein.

Abb. 172 Tagwizard anzeigen

Der Tagwizard wird eingeblendet (siehe folgende Abbildung).

Abb. 173 Tagwizard

Im linken Bereich des Tagwizards sind alle we:tags in alphabetischer Reihenfolge aufgelistet.

2

Beschränken Sie ggf. die Anzeige auf Tags mit speziellen Funktionen (Eingabe-Tags,

If-Tags etc) mit Hilfe der Selectbox links oben.

3

Wählen Sie das gewünschte we:tag aus, indem Sie entweder darauf doppelklicken oder indem Sie das Tag markieren und auf den Pfeil zwischen den beiden Kästen klicken.

Falls das we:tag Attribute erlaubt oder benötigt, öffnet sich ein neues Fenster mit einer kurzen Beschreibung des we:tags und den Feldern mit allen möglichen Attributen.

Zwingend benötigte Attribute sind mit einem Stern (*) gekennzeichnet.

Standard 4.1.1 Oktober 2006

Vorlagen erstellen – Aufgabe des Administrators 131

Abb. 174 Mit dem Tagwizard Attribute zuweisen

4

Nehmen Sie ggf. die Attributeinstellungen vor und klicken Sie dann auf Speichern.

Das Fenster schließt sich und das we:tag erscheint samt gewünschten Attributen in der

Textbox rechts des Pfeil-Buttons in der korrekten Syntax.

Hinweis: Einige we:tags verfügen über sehr viele Attribute, die oftmals nur unter gewissen Einstellungen Sinn machen. Je nach ausgewähltem Attribut - in obigem

Beispiel das “type“ Attribut - werden nur die dazu passenden zusätzlichen Attribute angezeigt. Dies dient der besseren Übersicht und Bedienbarkeit

5

Fügen Sie nun das we:tag per Copy & Paste in den entsprechenden Platzhalter für

Quellcode (oberes Texteingabefeld) ein. Mit den Buttons vorne einfügen oder hinten

einfügen bestimmen Sie, ob der Code am Anfang oder am Ende des in der oberen Textbox enthaltenen Codes angefügt wird.

4.6.2 Eigene we:tags einbinden

Es ist nun möglich, eigene we:tags in webEdition einzubauen. Damit diese we:tags korrekt vom System erkannt und eingebunden werden, müssen einige Regeln beachtet werden. Soll z.B. der we:tag <we:b> angelegt werden, so müssen folgende Schritte durchgeführt werden:

Prozedur 15 Eigenen we:tag erstellen

1

Erstellen der php-Funktion: Für we:b muss die Datei

/webEdition/we/include/we_tags/custom_tags/we_tag_b.inc.php mit der Funktion function we_tag_b($attribs, $content) {

... php - code ...

return $text;

} erstellt werden. Diese kann beliebigen php-Code enthalten.

Benutzerhandbuch

132 Vorlagen erstellen – Aufgabe des Administrators

$attribs

enthält einen assoziativen Array mit Attributnamen als key und Attributwert als Wert.

$content

enthält den Inhalt zwischen öffnendem und schließendem we:tag

php-code

ist der Platzhalter für Ihren eigenen funktionalen Code

2

Erstellen der Informationsdatei für den Tag Wizard: Die Informationsdatei für eigene we:tags, auf welche der Tag Wizard zugreift, befindet sich im Verzeichnis

/webEdition/we/include/weTagWizard/we_tags/custom_tags. Für <we:b> muss die Datei

we_tag_b.inc.php angelegt werden.

3

Für die benötigten Attribute bietet es sich an, einen vorhandenen we:tag zu kopieren und die Attributnamen/Attributtypen anzupassen. Ist das eigene we:tag korrekt eingesetzt, erscheint es sowohl in der Liste aller we:tags auf der Bearbeiten Seite einer Vorlage als auch im Tag Wizard.

4.7 Weitere Funktionen über we:tags definieren

Im Folgenden werden weitere Funktionen vorgestellt, die Sie über we:tags realisieren können und die für die Entwicklung von Vorlagen wichtig sind.

4.7.1 Tags für das Navigationstool

Die Ausgabe einer Navigation unterscheidet sich stark von anderen Elementen mit wiederholendem Charakter wie we:block oder we:listview. Nachdem die Navigation initialisiert wird, kann jeder Eintrag in der Navigation explizit gestaltet werden.

Anstelle auf viele unterschiedliche if-Tags zugreifen zu müssen, kann man nun das

Aussehen einzelner Einträge verändern. Vor allem das Bearbeiten von Navigationen mit mehreren Ebenen ist so viel übersichtlicher.

4.7.1.1 we:navigation

Mit we:navigation wird eine Navigation initialisiert. we:navigation hat die beiden

Attribute "name" und "parentid". Der Parameter "name" weist der Navigation einen

Namen zu, mit dem später auf diese Navigation zugegriffen werden kann. Der

Parameter parentid bestimmt, von welchem Element aus die Navigation erstellt werden soll. Mit parentid=0 wird die komplette Navigation initialisiert.

<we:navigation navigationname="default" parentid="0" />

4.7.1.2 we:navigationEntry

Das Aussehen eines Navigationsitems wird mit we:navigationEntry festgelegt. Anders als bei einer listview wird hier explizit das Aussehen eines Eintrags eines bestimmten

Typs auf einer bestimmten Ebene festgelegt. we:navigationEntry hat die Parameter navigationname, type, level, current und position. Mit navigationname verweist man auf den im we:navigation vergebenen Namen. Als type stehen "folder" und "entry" zur

Auswahl, diese können verschieden dargestellt werden. Mit level kann man auf eine bestimmte Ebene der Navigation zugreifen. Mit dem Parameter current kann man aktive Elemente von inaktiven differenziert darstellen. Über den Parameter position kann man auf Elemente einer Hierarchieebene der Navigation an einer bestimmten

Position gesondert zugreifen. Als position kann eine beliebige Zahl (1,2,3, …) oder

"odd", "even" oder “last” verwendet werden. Lediglich navigationname und type sind

Pflichtattribute. Verwendet man ansonsten keine Attribute, legt man das Aussehen für alle Einträge des genannten Typs global fest.

Das Aussehen aller Ordner (aller Ebenen) der Navigation legt man wie folgt fest:

Standard 4.1.1 Oktober 2006

Vorlagen erstellen – Aufgabe des Administrators 133

<we:navigationEntry type="folder" navigationname="default">

<li><we:navigationField name="text" />

<ul><we:navigationEntries /></ul>

</li>

</we:navigationEntry>

Auf Aktive Ordner (aller Ebenen) kann man mit dem zusätzlichen Parameter current="true" zugreifen:

<we:navigationEntry type="folder" navigationname="default" current="true">

<li id="currentFolder"><strong><we:navigationField name="text"

/></strong>

<ul><we:navigationEntries /></ul>

</li>

</we:navigationEntry>

Das Erscheinungsbild normaler Navigationseinträge:

<we:navigationEntry type="item" navigationname="default">

<li><a href="<we:navigationField name="href"

/>"><we:navigationField name="text" /></a></li>

</we:navigationEntry>

Sowie aktiver Navigationseinträge:

<we:navigationEntry type="item" navigationname="default" current="true">

<li><a id="currentA" href="<we:navigationField name="href"

/>"><we:navigationField name="text" /></a></li>

</we:navigationEntry>

4.7.1.3 we:navigationEntries

Das we:navigationEntries Tag kann nur innerhalb eines we:navigationEntry Tags verwendet werden. Es dient als Platzhalter für alle Einträge innerhalb eines

Navigationsordners. we:navigationEntries hat keine Parameter.

<we:navigationEntry type="folder" navigationname="default" current="true">

<li id="currentFolder"><strong><we:navigationField name="text"

/></strong>

<ul><we:navigationEntries /></ul>

</li>

</we:navigationEntry>

4.7.1.4 we:navigationField

we:navigationField kann nur innerhalb eines we:navigationEntry verwendet werden. Es wird als Platzhalter eines Feldes eines Navigationseintrags verwendet. Der Parameter

"name" gibt den Namen des Feldes aus, das ausgegeben werden soll.

Mögliche Werte sind:

• text: Eingetragener Text

• href: Pfad zum Zieldokument

• icon: Pfad zum Ausgewählten Icon

• level: Ebene, auf welcher sich der Eintrag befindet

• position: Position des Eintrags

• current: Ist Eintrag gerade aktiv

Benutzerhandbuch

134 Vorlagen erstellen – Aufgabe des Administrators

• id: id des Navigationsitems

• parentid: Id des Elternelements des Navigationseintrags

• type: folder oder entry

4.7.1.5 we:navigationWrite

Schließlich wird mit we:navigationWrite die Navigation noch ausgegeben, einziger

Parameter ist "navigationname", dieser verweist auf die Navigation, die mit demselben

Namen erstellt wurde.

<ul>

<we:navigationWrite name="default" />

</ul>

4.7.2 Beispiel

Mit dem Navigationstool erstellte Navigationen können beliebig gestaltet werden. Im folgenden Beispiel wird dies anhand der Navigation der webEdition Demo “we_demo“ verdeutlicht. Ausgangspunkt ist eine schon eingepflegte Navigation und ein komplettes

Highlighting-Regelwerk. Hier soll nur noch der Einsatz der we:tags erklärt werden.

Hinweis: Sie können dieses Beispiel in der bei der Installation mitgelieferten

we_demo jederzeit nachvollziehen.

Zunächst wird die Navigation initialisiert:

<we:navigation parentid="0" navigationname="mainNavigation" />

Name der Navigation ist mainNavigation

, als parentid

wird 0 gewählt: dies bewirkt, dass die komplette Navigation verwendet wird.

Die darzustellende Navigation enthält 2 Ebenen. Sie soll, soweit möglich, barrierefrei gestaltet werden. Die Navigation wird daher als verschachtelte unsortierte Liste ausgegeben, sämtliche Layoutinformationen sind in einer CSS-Datei enthalten

(/we_demo/css/screen/basic.css). Bei Ordnern soll nur der Inhalt des gerade aktiven

Ordners angezeigt werden, dieser soll gleichzeitig optisch hervorgehoben werden.

Gleiches gilt für die "normalen" Navigationseinträge, auch hier soll der aktive Eintrag visuell hervorgehoben werden.

Zunächst wird die Ausgabe der Ordner festgelegt. Bei nicht aktiven Ordnern wird lediglich ein Link zur Startseite der betreffenden Rubrik ausgegeben:

<we:navigationEntry navigationname="mainNavigation" type="folder">

<li>

<a href="<we:navigationField name="href" />">

<we:navigationField name="text" />

</a>

</li>

</we:navigationEntry>

Aktive Ordner sollen zusätzlich alle Unterpunkte anzeigen. Zusätzlich wird noch eine id vergeben. Anhand dieser wird dem aktiven Element mittels der CSS-Datei (s.o.) ein anderes Aussehen gegeben. Ein aktiver Ordner enthält ein Listenelement mit dem eigentlichen Link sowie alle enthaltenen Elemente innerhalb einer weiteren unsortierten

Liste.

Standard 4.1.1 Oktober 2006

Vorlagen erstellen – Aufgabe des Administrators 135

<we:navigationEntry navigationname="mainNavigation" type="folder" current="true">

<li id="li_nav1_open">

<a id="a_nav1_open" href="<we:navigationField name="href" />">

<we:navigationField name="text" />

</a>

<ul><we:navigationEntries /></ul>

</li>

</we:navigationEntry>

Es fehlen nun noch die Standardnavigationseinträge. Diese werden als Listenelement ausgegeben.

<we:navigationEntry navigationname="mainNavigation" type="item">

<li>

<a href="<we:navigationField name="href" />">

<we:navigationField name="text" />

</a>

</li>

</we:navigationEntry>

Aktive Elemente werden mit einer bestimmten "id" versehen und durch die CSS-Datei visuell hervorgehoben.

<we:navigationEntry navigationname="mainNavigation" type="item" current="true">

<li id="li_nav2_open">

<a id="a_nav2_open" href="<we:navigationField name="href" />">

<we:navigationField name="text" />

</a>

</li>

</we:navigationEntry>

Schließlich muss die Navigation ausgegeben werden. Dies geschieht mit

we:navigationWrite. Da die Navigation eine unsortierte Liste enthält, muss

we:navigationWrite von einem <ul>-tag umschlossen werden.

<ul>

<we:navigationWrite name="mainNavigation" />

</ul>

Ein Auszug aus der fomatierten Ausgabe dieser Navigation könnte dann wie folgt aussehen:

<ul>

<li id="li_nav1_open">

<a id="a_nav1_open" href="/we_demo/accessible/index.php">

Barrierefreiheit

</a>

<ul>

<li>

<a href="/we_demo/accessible/information.html">Information</a>

</li>

<li>

<a href="/we_demo/accessible/demo.html">Diese Demo</a>

</li>

</ul>

</li>

Benutzerhandbuch

136 Vorlagen erstellen – Aufgabe des Administrators

<li><a href="/we_demo/news/index.php">News</a></li>

<li><a href="/we_demo/blog/index.php">Blog</a></li>

<li><a href="/we_demo/events/index.php">Veranstaltungen</a></li>

<li><a href="/we_demo/company/index.php">Unternehmen</a></li>

<li><a href="/we_demo/imprint/index.html">Impressum</a></li>

<li><a href="/we_demo/image_gallery/index.php">Bildergalerie</a></li>

<li><a href="/we_demo/customer/index.php">Kundenbereich</a></li>

<li><a href="/we_demo/shop/index.php">Shop</a></li>

<li><a href="/we_demo/guestbook/index.php">Gästebuch</a></li>

<li><a href="/we_demo/newsletter/index.php">Newsletter</a></li>

<li><a href="/we_demo/voting/index.php">Voting</a></li>

</ul>

Abb. 175 Navigation auf we_demo

Dies ergibt inklusive des CSS auf unserer we_demo Webseite die folgende Ausgabe.

4.7.3 Bearbeitbare Linkliste bzw. bearbeitbare Links erstellen

Mithilfe des

<we:linklist>

-Tags können Sie eine variable Linkliste auf Ihrer

Webseite einbinden. Redakteure können dann selbst den Linkanker (Text oder Grafik) und das Linkziel bearbeiten, neue Links einfügen, die Reihenfolge der Links ändern, etc.

Hinweis: Das folgende Beispiel ist der bei der webEdition Installation mitgelieferten we_demo_2 entnommen. Es zeigt eine Linklist-Navigation, die ohne das Navigationstool erstellt wurde

Standard 4.1.1 Oktober 2006

Vorlagen erstellen – Aufgabe des Administrators 137

Abb. 176 Ausschnitt einer Navigation als bearbeitbare Linkliste

(we_demo_2/include/navigation.php)

Abb. 177 Navigation ausgegeben auf der Website

Wenn Sie nur einen einzelnen Link für Redakteure bearbeitbar machen wollen, benutzen Sie dafür das

<we:link>

-Tag.

Abb. 178 <we:link> in der Vorschau Ansicht

Wie das Bearbeiten von Linklisten und Links funktioniert, ist in Abschnitt 3.9.7

"Linkliste (<we:linklist>)" auf Seite 98 detailliert beschrieben.

Zu Linklisten, bei denen die Links mit Zeichen oder Steuerbefehlen getrennt werden sollen:

Wenn Sie die einzelnen Links innerhalb einer Linkliste mit Zeichen oder mit einem

Steuerbefehl trennen wollen, z. B. mit einem

<p>

, ist es in der Regel nicht erwünscht, dass diese Zeichen (z. B. das

<p>

) auch vor und nach der Linkliste steht. Um dies zu verhindern gibt es die we:tags

<we:prelink>

und

<we:postlink>

. Alle Zeichen und

Benutzerhandbuch

138 Vorlagen erstellen – Aufgabe des Administrators

Steuerbefehle, die zwischen

<we:prelink>

und

</we:prelink>

stehen, werden vor dem ersten Link der Linkliste nicht angezeigt. Alle Zeichen und Steuerbefehle, die zwischen

<we:postlink>

und

</we:postlink>

stehen, werden nach dem letzten Link der Linkliste nicht angezeigt. Der

<we:link>

-Tag innerhalb der Linkliste leitet den eigentlichen Link ein.

Beispiel

Sie wollen das

<p>

vor dem ersten Link einer Linkliste ausblenden:

<we:linklist name="linklist">

<we:prelink><p></we:prelink>

<we:link/>

</we:linklist>

Dies ergibt bei einem einzigen Link innerhalb der Linkliste:

<a href="link">Linktext</a><p> und bei zwei Links innerhalb der Linkliste

<a href="link">Linktext</a><p><a href="link">Linktext</a><p>.

Ohne das <we:prelink>-Tag würde es bei einem einzigen Link innerhalb der Linkliste so aussehen:

<p><a href="link">Linktext</a><p>

Und bei zwei Links innerhalb der Linkliste:

<p><a href="link">Linktext</a><p><a href="link">Linktext</a><p>

So weisen Sie dem <we:link>-Tag ein Stylesheet zu:

<we:link name="MyLink" class="foo"/>

4.7.4 Übersicht über Inhalte der Website generieren

Eine Übersichtsseite generiert eine Liste von Elementen, die auf bestimmten oder allen

Seiten enthalten sind. Anwendungen von Übersichtsseiten sind z. B.:

Aktueller Abschnitt "Übersicht über Inhalte der Website generieren"

• Abschnitt 4.7.4.1, "Übersicht der aktuellsten News und Newsarchiv erstellen,"

• Abschnitt 4.7.4.2, "Ergebnisse einer Suchanfrage ausgeben,"

• Abschnitt 4.7.4.3, "Bildergalerie erstellen,"

• Navigation bei einer kleinen Webseite mit wenigen Seiten

Für jede Übersichtsseite benötigen Sie die beiden folgenden Tags:

<we:listview> </we:listview>

Diese Tag umschließt alle anderen benötigten Tags. Um eine Übersicht über einen bestimmten Bereich zu erstellen, kann die Ausgabe über die Attribut doctype und / oder categories des

<we:listview>

-Tags eingegrenzt werden.

<we:repeat> </we:repeat>

Dieses Tag steht innerhalb von <we:listview>. Zwischen dessen Tags wird

Standard 4.1.1 Oktober 2006

Vorlagen erstellen – Aufgabe des Administrators 139 definiert, aus welchen Elementen jede Zeile der Übersicht bestehen soll. Dies kann normales HTML sein (z. B. Zeilen einer Tabelle) und / oder

<we:field />

.

<we:field />

Dieses wE-Tag steht innerhalb von

<we:repeat>

und stellt den Inhalt eines

Platzhalters dar.

Beispiel

Sie haben eine Vorlage für News erstellt. Die Vorlage hat den Dokumenttyp

"News" und die Texteingabefelder

<we:input type="text" name="Ueberschrift"/>

und

<we:input type="date" name="Datum"/>

. Nun möchten Sie eine Übersicht generieren, die von allen eingegebenen News der

Kategorie Sport und Politik das jeweilige Datum und die Newsüberschrift mit Link auf die Newsseite anzeigt:

<we:listview doctype="News" categories="Sport,Politik">

<we:repeat>

<we:field type="date" name="Date"/>

<we:field type="text" name="Header">

</we:repeat>

</we:listview>

Wenn die erzeugte Übersicht aus vielen Zeilen besteht, wird die Übersicht schnell unübersichtlich. Deshalb ist es sinnvoll, die Anzahl der angezeigten Zeilen pro Seite durch das Attribut rows des Tags

<we:listview> zu begrenzen. Beispiel: rows=”10”

-> Es werden maximal 10 Zeilen pro Seite angezeigt, die Übersicht wird ggf. über mehrere Seiten verteilt. Der Websitebesucher soll zwischen den Seiten über die

Linkanker “Weiter” und “Zurück” navigieren können. Um die Links zur vorigen bzw. nächsten Seite der Übersicht zu erzeugen, verwenden Sie die Tags

<we:back>

und

<we:next>

. Diese stehen innerhalb von

<we:listview>

, aber außerhalb von

<we:repeat>

.

Beispiel

Sie möchten Datum und Header der Newsartikel auf einer Übersichtsseite ausgeben. Dabei soll die Übersicht aus maximal 10 Zeilen pro Seite bestehen und

Links zum Navigieren zwischen den Seiten enthalten.

<we:listview doctype="newsArticle" rows="10">

<we:repeat>

<we:field type="date" name="Date"/>

<we:field type="text" name="Header">

</we:repeat>

<we:back>Zurück</we:back>

<we:next>Weiter</we:next>

</we:listview>

4.7.4.1 Übersicht der aktuellsten News und Newsarchiv erstellen

In Prozedur 16 wird anhand folgendem Beispiel beschrieben, wie Sie dazu vorgehen.

Beispiel

Sie wollen eine Übersichtsseite erzeugt, die Name und Überschrift der zehn

aktuellsten News auflistet (vgl. Abschnitt 4.7.4). Außerdem möchten Sie ein Archiv

erzeugen, das Name und Überschrift aller älteren News auflistet.

Zur Realisierung dieses Beispiels sind zwei Übersichtsseiten nötig: eine Übersichtsseite für die aktuellen News und eine Übersichtsseite für das Archiv.

Benutzerhandbuch

140 Vorlagen erstellen – Aufgabe des Administrators

Prozedur 16 Übersicht der aktuellsten News und Newsarchiv erstellen

1

Erstellen Sie zunächst den Quellcode, der eine Übersicht über die zehn aktuellsten News generiert.

Achten Sie dabei darauf, dass die Newsartikel das Datumsfeld Date besitzen. Lassen Sie die Tags <we:next> und <we:back> weg, da bei zehn Einträgen eine Seite ausreicht.

Setzen Sie stattdessen einen Link zur Übersichtsseite des Archivs.

<we:listview doctype="News" rows="10" order="Date" desc="true">

<we:repeat>

<we:field type="date" name="Date"/>

<we:field type="text" name="Headline" hyperlink="true"/><br>

</we:repeat>

</we:listview>

2

Erstellen Sie nun den Quellcode, der die Übersichtsseite für das Archiv generiert.

Ergänzen sie dabei das <we:listview>-Tag um das Attribut offset mit dem Wert 10. Dies bewirkt, dass die ersten zehn Einträge nicht ausgegeben werden. Der erste Eintrag der

Übersicht ist also die 11. aktuellste News. Geben Sie <we:back> und <we:next> an, um das

Navigieren zu den weiteren Seiten des Archivs zu ermöglichen.

<we:listview doctype="News" order="Date" desc="true" offset="10">

<we:repeat>

<we:field type="date" name="Date"/>

<we:field type="text" name="Headline" hyperlink="true"/><br>

</we:repeat>

<we:back>Zurück</we:back>

<we:next>Weiter</we:next>

</we:listview>

4.7.4.2 Ergebnisse einer Suchanfrage ausgeben

So könnte eine Überssichtsseite aussehen, die Ergebnisse einer Suchanfrage generiert:

Abb. 179 Übersicht der Ergebnisse einer Suchanfrage

Standard 4.1.1 Oktober 2006

Vorlagen erstellen – Aufgabe des Administrators 141

Prozedur 17 Ergebnisseite einer Suchanfrage anlegen

1

Schreiben Sie den Quellcode für eine Übersichtsseite (siehe Abschnitt 4.7.4), <we:listview>

hat dabei keine Attribute.

2

Stellen Sie sicher, dass die relevanten Felder (z. B. Headline und Datum) auf allen Seiten gleich benannt sind. Ansonsten muss im <we:field>-Tag ein Alternativfeld durch das

Attribut alt angegeben werden (z. B. <field name="Title" alt="Headline"/>).

Wenn das Titel-Feld (siehe Ansicht Eigenschaften!) leer ist, wird der Inhalt des Feldes

Headline angezeigt, sofern es ein Feld Headline gibt und es gefüllt ist.

3

Geben Sie we_path bzw. we_text als Wert des Attributs alt beim Tag <we:field> an, um zu gewährleisten, dass praktisch immer ein Ergebnis zurückgeliefert wird (optional). we_path zeigt den Pfad der Seite an, we_text den Textinhalt der Seite. Begrenzen Sie die Anzahl der ausgegebenen Zeichen des Textinhalts mit dem Attribut max.

Hinweis: Die korrekte Syntax lautet we_path, nicht we:path; we_text, nicht we:text.

4

Für den Fall, dass die Übersichtsseite kein Ergebnis anzeigen kann, können Sie eine entsprechende Meldung ausgeben lassen. Verwenden Sie dazu das Tag <we:ifNotFound>

</we:ifNotFound> und schreiben Sie zwischen die Tags die gewünschte Meldung.

Beispiel

Sie wollen eine Übersicht über alle Seiten generieren. Die Einträge sollen aus dem

Titel der Seite und der Beschreibung (wie bei webEdition-Seiten unter

Eigenschaften eingetragen) bestehen. Ist kein Titel eingetragen oder handelt es sich um eine HTML-Seite, soll anstelle des Titels der Pfad angezeigt werden

(alt="we_path"). Falls keine Ergebnisse angezeigt werden können, soll die Meldung

“Leider nichts gefunden” ausgegeben werden. Bei der Beschreibung (Description) soll der Inhalt der Seite auf maximal 200 Zeichen beschnitten angezeigt werden.

<we:listview type=”search” rows="6">

<we:repeat>

<we:field name="Title" alt="we_path" hyperlink="true" />

<we:field name="Description" alt="we_text" max="200" />

</we:repeat>

<we:ifNotFound>Leider nichts gefunden<we:else />

</we:ifNotFound>

</we:listview>

Abb. 180 Übersicht über alle Seiten (Ausschnitt)

Wenn Sie die Ausgabe mit “zurück” und “weiter” erweitern wollen, fügen Sie im

Template eine Tabelle mit drei Spalten ein: 1. Spalte: zurück, 3. Spalte: weiter, 1-3.

Spalte: Ausgabetext).

Benutzerhandbuch

142 Vorlagen erstellen – Aufgabe des Administrators

4.7.4.3 Bildergalerie erstellen

Eine Bildergalerie (siehe auch Abschnitt 3.4.6) besteht aus einer Übersicht von

Miniaturansichten von Bilddateien.

Abb. 181 Übersicht über Miniaturansichten von Bildern

Klickt man auf eine Miniaturansicht, so erscheint das Bild in der Originalgröße in einem separaten Popup-Fenster oder in demselben Fenster.

Abb. 182 Detailansicht eines Bildes aus der Bildergalerie

Um eine Bildergalerie anzulegen, benötigen Sie für die Übersicht und die Detailansicht jeweils eine Vorlage. Fertige Beispielvorlagen sind in der we_demo:

we_demo/image_gallery/index.tmpl und we_demo/image_gallery/detail.tmpl.

So gehen Sie vor, um selbst eine Bildergalerie zu erstellen.

Standard 4.1.1 Oktober 2006

Vorlagen erstellen – Aufgabe des Administrators 143

Prozedur 18 Bildergalerie erstellen

1

Erstellen Sie zunächst die Vorlage für die Übersicht der Bilder (vgl.

we_demo/image_gallery/index.tmpl). Legen Sie eine neue Vorlage an und erstellen Sie darin eine Listview: <we:listview> </we:listview>. Geben Sie zur Listview folgende Attribute und Subtags an:

• name=”ImageGallery”

Geben Sie der Listview einen aussagekräftigen Namen (optional).

contenttypes=”img”

Dies bedeutet, dass Bilder in der Listview angezeigt werden. Neben “img” (Bilder) wären die Attributwerte “wepage” (webEdition Dokumente) und “binary” (sonstige

Dokumente) möglich. Prinzipiell könnten mehrere Werte mit Komma getrennt angegeben werden. Bei Fotoalben macht dies aber keinen Sinn.

rows=“3“

Der Attributwert von rows gibt an, wie viele Bilder auf einer Übersichtsseite gleichzeitig angezeigt werden.

searchable=”false”

Wenn bei den Bilder für die Bildergalerie unter Eigenschaften die Checkbox Ist

durchsuchbar? nicht aktiviert ist, setzen Sie hier das Attribut searchable=“false“.

Dadurch werden auch Bilder, die als nicht durchsuchbar gekennzeichnet sind, in die

Bildergalerie aufgenommen.

Wenn die Checkbox Ist durchsuchbar? aktiviert ist, setzen Sie das Attribut

searchable=“true“. Dadurch werden nur Bilder, die als durchsuchbar gekennzeichnet sind, in die Bildergalerie aufgenommen.

Abb. 183 Checkbox Ist durchsuchbar? in Eigenschaften

workspaceID=“15“

Dieses Attribut ist optional. Damit können Sie über die ID das Verzeichnis, in dem sich ihre Bilder für die Bildergalerie befinden. Es wird für die Bildergalerie dann nur in diesem Verzeichnis nach Bildern gesucht.

<we:ifFound>Zeige Bild: <we:listviewStart /> - <we:listviewEnd /> von

<we:listviewRows />

ergibt folgende Ausgabe:

Abb. 184 Zeige Bild 1-4 von 5

Benutzerhandbuch

144 Vorlagen erstellen – Aufgabe des Administrators

• Innerhalb von <we:repeat> </we:repeat> steht dasjenige, was bei der Übersicht wiederholt angezeigt wird, also in diesem Fall die Bilder. Da die Bilder variabel sind, werden sie über ein Feld (<we:field/>) angesprochen.

<we:field/>

hat folgende Attribute:

type="img"

Dies bedeutet, dass die Felder Bilddateien sind.

id="86"

Geben Sie hier die ID der Detailseite an.

thumbnail="200x150"

Dieses Attribut benötigen Sie, wenn Sie statt des Originalbildes eine

Miniaturansicht anzeigen wollen. Definieren Sie dazu unter Optionen >

Miniaturansichten die gewünschten Einstellungen für Miniaturansichten (z. B. die

Bildgröße der Miniaturansicht und den Namen für diese Einstellungen). Geben Sie dann hier als Attributwert den Namen für die Miniaturansichtseinstellungen an.

200x150 ein Beispielname für eine Benennung von Miniaturansichtseinstellungen.

hyperlink="true"

Sie benötigen dieses Attribut, wenn es möglich sein soll, durch einen Klick auf ein

Bild in der Übersicht auf die Detailansicht zu springen.

winprops="width=900,height=650,left=-1,top=-1"

Dieses Attribut macht ein neues Fenster auf. Damit können Sie festlegen, dass die

Vergrößerung des Bildes in einem neuen Popup-Fenster erscheint. Mit width und height

geben Sie die Fenstergröße an. Zum Zentrieren des Fensters geben sie für left und top jeweils den Wert -1 an.

Mit <we:field> können Sie außerdem auf die Meta-Informationen der Grafik (Titel,

Beschreibung, Schlüsselworte) zugreifen:

<we:field name="Title" />

<we:field name="Description" />

<we:field name="Keywords" />

Der Quellcode sieht dann wie folgt aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<we:title></we:title>

<we:description/>

<we:keywords/>

<we:charset defined="ISO-8859-1">ISO-8859-1</we:charset>

</head>

<body>

<we:listview contenttypes="img" rows="3" searchable="false" workspaceID="15">

<we:ifFound>

Zeige Bild: <we:listviewStart /> - <we:listviewEnd /> von

<we:listviewRows /><br />

<we:repeat>

<we:field type="img" thumbnail="200x150" hyperlink="true" id="86" winprops="width=900,height=650,left=-1,top=-1" />

</we:repeat>

<br />

<we:ifBack>

<we:back class="linkButton">&laquo;&nbsp;zurück</we:back>

</we:ifBack>

<we:ifNext>

<we:next class="linkButton">weiter&nbsp;&raquo;</we:next>

</we:ifNext>

<we:else />

Konnte kein Bild finden.

</we:ifFound>

</we:listview>

</body>

</html>

Standard 4.1.1 Oktober 2006

Vorlagen erstellen – Aufgabe des Administrators 145

Hinweis 1: Um eine HTML Tabelle mit einer Listview darzustellen, benutzen Sie das

Attribut cols des <we:listview> Tags und das Tag <we:tr>. Wenn "cols" gesetzt ist, werden rows * cols Einträge angezeigt. Das Tag <we:tr> erzeugt am Anfang einer neuen

Zeile das HTML-<tr>-Tag; das Tag </we:tr> erzeugt am Ende einer Zeile das

HTML-</tr>-Tag.

Hinweis 2: Normalerweise wird direkt auf das Bild verlinkt. Wenn Sie dies nicht wollen, geben Sie beim <we:field> Tag das Attribut id mit dem Wert “ID eines webEdition

Dokuments” an. In diesem webEdition Dokument wird die Detailansicht der Grafik angezeigt. In der Vorlage eines solchen webEdition Dokuments wird mit einer Listview mit rows="1" die Grafik dargestellt. Alle notwendigen Einstellungen (wie "offset", "name" der Listview, "workspaceID", "contenttype" usw.) werden dem Dokument und somit der

Listview automatisch übergeben. Der Listview-Code sieht dann in etwa wie folgt aus:

<we:listview rows="1">

</p>

<we:repeat>

<we:field name="Title"><br>

<we:field type="img"><br><br>

</we:repeat>

</p>

</we:listview>

2

Erstellen Sie nun - falls gewünscht - die Vorlage für die Detailansicht (vgl.

we_demo/image_gallery/detail.tmpl). Kopieren Sie dazu den Quelltext der Vorlage für die

Übersicht in eine neue Vorlage und nehmen Sie folgende Änderungen vor:

• Löschen Sie

Zeige Bild: <we:listviewStart /> - <we:listviewEnd /> von

<we:listviewRows /><br />

• Löschen Sie beim <we:field>-Tag die Attribute thumbnail und winprops.

• Ergänzen Sie <we:ifBack> und <we:ifNext> um das Attribut useparent=“true“.

Dies bewirkt, dass der Besucher der Bildergalerie nur bis zum letzten Bild der Galerie zurück- und bis zum ersten Bild vorblättern kann.

Der Quelltext sieht dann folgendermaßen aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<we:title></we:title>

<we:description/>

<we:keywords/>

<we:charset defined="ISO-8859-1">ISO-8859-1</we:charset>

</head>

<body>

<we:listview contenttypes="img" rows="1" searchable="false" workspaceID="15">

<we:ifFound>

<we:ifBack useparent="true">

<we:back>zurück</we:back> </we:ifBack>&nbsp;&nbsp;

<we:ifNext useparent="true">

<we:next>weiter</we:next> </we:ifNext>

<we:repeat>

<we:field type="img" hyperlink="true" id="86" />

</we:repeat>

<br />

<we:else />

Konnte kein Bild finden.

</we:ifFound>

</we:listview>

Benutzerhandbuch

146 Vorlagen erstellen – Aufgabe des Administrators

</body>

</html>

3

Wenn Sie nur eine Bildergalerie veröffentlichen wollen, ist die Prozedur hiermit beendet.

Ansonsten gehen Sie wie folgt vor:

a

Legen Sie pro Bildergalerie ein Verzeichnis an. In diese Verzeichnisse legen Sie bzw.

(später) die Redakteure die Bilder ab, die für die entsprechende Bildergalerien bestimmt sind.

b

Legen Sie eine Vorlage an, mit der aus verschiedenen Bildergalerien eine Galerie ausgewählt werden kann. Verlinken Sie dabei die Namen der Bildergalerien über <a href>

mit der entsprechenden Übersichtsseite der Bildergalerie.

<ul>

<li><a href="/gallery/egypt.php">Ägypten</a> (2004)</li>

<li><a href="/gallery/france.php">Frankreich</a> (2003)</li>

</ul>

Abb. 185 Bildergalerien Auswahl c

Öffnen Sie die Vorlage, die Sie in Schritt 1 erstellt haben. Dies ist die Vorlage mit der

Übersicht über die Bilder einer Galerie in Miniaturansichten.

Ersetzen Sie dort die Bezeichnung des Verzeichnisses, in dem die Bilder für die

Bildergalerie liegen, durch eine Variable. (Da Sie mehrere Galerien haben möchten, brauchen Sie auch mehrere Verzeichnisse, in denen die Bilder je nach Galerie eingeordnet werden können. Deshalb können Sie nun nicht mehr das Bilderverzeichnis direkt angeben, sondern benötigen eine globale Variable, wenn alle Galerien sinnvollerweise auf derselben Vorlage basieren sollen). Fügen sie dazu folgenden

Quelltext zwischen den Tags <body> und <we:listview ...> ein:

Hinweis: Fügen Sie folgenden Quelltext zwischen die Tags <body> und

<we:listview ...>

ein:

<we:ifEditmode>

Pfad des Bilderverzeichnisses:<br>

<we:href reload="true" directory="true" file="false" type="int" name="album" output="id">

<br>

</we:ifEditmode>

<we:setVar to="global" nameto="album" from="top" namefrom="album_we_jkhdsf_intID" />

<we:listview contenttypes="img" searchable="false" rows="5" cols="5" workspaceID="\$album">

Erklärung:

<we:ifEditmode>Pfad des

Bilderverzeichnisses:<br>...</we:ifEditmode>

Alles, was innerhalb dieser Tags steht, ist nur für Redakteure während dem

Bearbeiten des Dokuments sichtbar. Die Redakteure sehen den Text Pfad des

Standard 4.1.1 Oktober 2006

Vorlagen erstellen – Aufgabe des Administrators 147

Bilderverzeichnisses: und können durch Klick auf einen Button im Dateimanager das gewünschte Verzeichnis auswählen.

<we:href reload="true" directory="true" file="false" type="int" name="album" output="id">

reload=“true“ bewirkt, dass die Seite nach der Auswahl des Verzeichnisses neu geladen wird.

directory="true" und file="false" bewirken, dass Verzeichnisse, aber keine Dateien ausgewählt werden können.

type=“int“ bedeutet, dass das Verzeichnis in webEdition angelegt worden sein muss.

Den Attributwert bei name=“album“ können Sie frei wählen, allerdings müssen Sie den Namen konsistent verwenden.

output=“id“ bedeutet, dass eine ID als Wert der Variablen ausgegeben wird.

<we:setVar

to="global" nameto="album" from="top" namefrom="album_we_jkhdsf_intID" />

Der durch den Link gewählte Wert wird mit <we:setVar> in eine globale Variable geschrieben.

Geben Sie bei dem Attribut nameto als Wert den Name an, der auch bei <we:href> als Attributwert von name gesetzt wurde.

from=“top“ bedeutet, dass es sich auf das aktuelle Dokument bezieht.

Schreiben Sie bei dem Attribut namefrom an den Anfang ebenfalls diesen Namen.

Anschließend fügen Sie _we_jkhdsf_intID an.

<we:listview contenttypes="img" searchable="false" rows="5" cols="5" workspaceID="\$album">

Ersetzen Sie bei dem Attribut workspaceID des Tags <we:listview> die ID durch die Entität des Attributwert von name des Tags <we:href>.

4.7.5 Seiten und Objekte im Frontend erstellen und bearbeiten

Für manche Anwendungen, z. B. bei einem Gästebuch oder einem Kleinanzeigenmarkt, ist es nötig, dass Besucher der Website webEdition Dokumente und Objekte erzeugen und ändern können. Grundlage dafür ist das

<we:form>

-Tag.

Dieses Tag kann um zwei Attribute erweitert werden:

<we:form type="document">

: zur Erzeugung von webEdition Dokumenten

<we:form type="object">

: zur Erzeugung von webEdition Objekten

Geben Sie bei webEdition Dokumenten den Dokumenttyp als Wert des Attributes

"doctype" an. webEdition Dokumente ohne Dokumenttyp können nicht erzeugt oder geändert werden. Geben Sie bei Objekten die ID der Klasse als Wert des Attributs

"classid" an.

Zwischen Start- und Endtag von

<we:form>

werden die einzelnen Felder durch das Tag

<we:userInput/>

dargestellt. Dabei wird durch den Wert, den man dem Attribut

"type" zuweist, festgelegt, um welchen Typ es sich handelt. Die genaue Beschreibung dieses Tags und seiner Attribute finden Sie in der webEdition Tag-Referenz.

Beispiel

<we:form type="document" id="56" doctype="Gaestebucheintrag">

<table width="500" border="0" cellspacing="0" cellpadding="5" align="center">

<tr>

<td class="t4"><strong>G&auml;stebuch-Eintrag</strong></td>

<td align="right" nowrap>

<img src="/images/pixel.gif" width="1" height="1">

</td>

</tr>

<tr>

Benutzerhandbuch

148 Vorlagen erstellen – Aufgabe des Administrators

<td class="t3" colspan="2">

<p>

<strong>Ihr Name:</strong><br>

<we:UserInput name="Name" type="text" size="60"/>

</p>

<p>

<strong>Ihr Ort:</strong><br>

<we:UserInput name="Ort" type="text" size="60"/>

</p><we:userInput name="Datum" type="date" hidden="true"/>

</td>

</tr>

<tr>

<td class="t3" colspan="2">

<strong>Ihr Eintrag:</strong><br>

<we:userInput type="textarea" name="Text" width="500" height="200" autobr="true" wysiwyg="true" commands="prop,list,link,color"/></td>

</tr>

<tr>

<td class="t3" colspan="2"><input type="submit" value="eintragen">&nbsp;<input type="reset" value="zur&uuml;cksetzen">

</td>

</tr>

</table>

</we:form>

Geben Sie beim

<we:form>

-Tag als Wert des Attributs “id” die ID des webEdition

Dokuments an, an das Formular verschickt werden soll, also die ID der Folgeseite. Dies kann eine Zwischenseite sein, auf der man die Eingaben noch einmal anzeigt oder auch eine Seite, die die Eingaben speichert und gegebenenfalls veröffentlicht. Im Folgenden werden beide Möglichkeiten gezeigt:

• 1. Möglichkeit: Sie möchten die Eingaben speichern und gegebenenfalls veröffentlichen. Setzen Sie dazu sofort am Anfang der Vorlage das

<we:write>

-Tag eingesetzt, um die vom Formular übertragenen Daten zu speichern:

<we:write type="document" publish="true" doctype="Gaestebucheintrag"/>

Nach dem

<we:write>

-Tag können Sie mit dem Tag

<we:ifWritten>

bzw.

<we:ifNotWritten>

feststellen, ob der Schreibvorgang des webEdition-Dokuments bzw. des Objekts erfolgreich war und eine entsprechende

Meldung ausgeben:

<we:ifWritten type="document">

Danke für den Eintrag in unser Gästebuch!

<we:else/>

Leider trat beim Eintrag in das Gästebuch ein Fehler auf.

</we:ifWritten>

• 2. Möglichkeit: Sie möchten die eingegebenen Daten erst an eine Zwischenseite schicken. Verwenden Sie dazu das

<we:form>

-Tag in Kombination mit dem

<we:userInput>

-Tag. Im Gegensatz zur Eingabeseite stellen Sie nun die

Standard 4.1.1 Oktober 2006

Vorlagen erstellen – Aufgabe des Administrators 149

Eingabefelder auf "nicht editierbar". Geben Sie dazu bei allen

<we:userInput/>

-Tags beim Attribut "editable" als Wert "false" an:

Beispiel

<we:form type="document" id="57" doctype="Gaestebucheintrag">

<p>Hier k&ouml;nnen Sie noch einmal Ihre Eingaben kontrollieren:</p>

<table width="500" border="0" cellspacing="0" cellpadding="5" align="center">

<tr>

<td class="t4"><strong>G&auml;stebuch-Eintrag</strong></td>

<td align="right" nowrap>

<img src="/images/pixel.gif" width="1" height="1">

</td>

</tr>

<tr>

<td class="t3" colspan="2">

<p>

<strong>Ihr Name:</strong><br>

<we:UserInput name="Name" type="text" editable="false"/>

</p>

<p>

<strong>Ihr Ort:</strong><br>

<we:UserInput name="Ort" type="text" editable="false"/>

</p>

<we:userInput name="Datum" type="date" hidden="true"/>

</td>

</tr>

<tr>

<td class="t3" colspan="2">

<strong>Ihr Eintrag:</strong><br>

<we:userInput type="textarea" name="Text" editable="true"/>

</td>

</tr>

<tr>

<td class="t3" colspan="2">

<input type="button" value="zur&uuml;ck" onclick="history.back()">&nbsp;

<input type="submit" value="eintragen">&nbsp;

<input type="reset" value="zur&uuml;cksetzen">

</td>

</tr>

</table>

</we:form>

ACHTUNG !

Wenn Sie beim Attribut "name" des <we:form>-Tags einen Wert angeben, müssen Sie auch bei dem <we:write>-Tag als Wert des

Attributs "formname" den Namen des Formulars eintragen.

Wenn Besucher der Webseite ein webEdition Dokument bzw. Objekt ändern können sollen, benutzen Sie das

<we:a>

-Tag und geben beim Attribut "edit" als Wert

"document" bzw. "object" an. Wenn das Tag in einer

<we:listview>

verwendet wird, wird als Referenz automatisch der dazu gehörige Listview-Eintrag benutzt. Wenn nur der Ersteller eines webEdition Dokuments bzw. Objekts dieses auch ändern können

Benutzerhandbuch

150 Vorlagen erstellen – Aufgabe des Administrators soll, geben Sie im webEdition Dokument bzw. Objekt ein Feld an, in dem die ID des

Erstellers gespeichert wird.

Wenn Sie die Kundenverwaltung installiert haben, geben Sie beim

<we:write>

-Tag als

Wert des Attributs "userid" den Namen des entsprechenden Feldes an. Beim Attribut

"admin" können Sie zusätzlich als Wert den Namen eines Feldes der

Kundenverwaltung angeben. Wenn bei einem Kunden in diesem Feld etwas eingetragen ist (außer 0), darf dieser Besucher ebenfalls das webEdition-Dokument bzw. Objekt verändern. Mit dem Tag

<we:ifRegisteredUserCanChange>

kann man feststellen, ob ein Kunde ein webEdition-Dokument bzw. Objekt bearbeiten darf. Die beiden Attribute "userid" und "admin" haben die gleiche Bedeutung wie beim

<we:write>

-Tag.

Wenn auch die Kategorie eingegeben werden sollen kann, verwenden Sie das Tag

<we:categorySelect>

. Dies erzeugt ein Dropdownmenü, mit welchem sich die gewünschte Kategorie auswählen lässt. Beachten Sie bitte, dass bei diesem Tag auch das End-Tag angegeben werden muss, auch wenn Sie keine

<option>

Tags angegeben haben.

Die Eingaben können auch in einer PHP-Session gespeichert werden. Das bedeutet, dass die Eingaben nicht verloren gehen, auch wenn man zwischendurch auf eine andere

Seite verweist. Dazu müssen folgende Bedingungen erfüllt sein:

• Das Formular wurde zu einem webEdition Dokument geschickt

• Das Formular enthält ein

<we:form>

-Tag

• Als Wert des Attributs wurde "edit" "document" oder "object" angegeben

• Am Anfang jeder Vorlage steht das Tag

<we:sessionStart>

Die Daten der Session werden bei einem

<we:write>

automatisch gelöscht.

4.7.6 Dokument einbinden

Es ist sinnvoll, Teile einer Website, die in allen Vorlagen bzw. auf allen Seiten gleich sind (z. B. eine Navigation), in eine Datei auszulagern und diese Datei mit dem

<we:include>-Tag an allen gewünschten Stellen einzubinden. Dadurch ist Konsistenz sichergestellt und globale Änderungen werden möglich. Dazu gehen Sie wie folgt vor:

Prozedur 19 Dokument einbinden

1

Klicken Sie auf Datei > Neu> Vorlage. Geben Sie in der Ansicht Eigenschaften Dateinamen und Speicherort an. Geben Sie in der Ansicht Bearbeiten den Quellcode (z. B. für eine

Navigation) ein.

Sie haben die Vorlage für das Dokument erstellt, das Sie einbinden wollen.

2

Klicken Sie auf Datei > Neu > webEdition Seite > “Name der neu erstellten Vorlage”.

Benennen Sie das Dokument.

Sie haben das Dokument erstellt, das Sie einbinden wollen.

3

Öffnen Sie die Vorlage, in die Sie das Dokument einbinden wollen und wechseln Sie in die.

Ansicht Bearbeiten. Geben Sie die ID des einzubindenden Dokuments als Wert des id

Standard 4.1.1 Oktober 2006

Vorlagen erstellen – Aufgabe des Administrators 151

Attributs des Tags <we:include> an der Stelle an, an der das Dokument eingefügt werden soll.

Beispiel

Das einzubindende Dokument hat die ID 100 -> <we:include id="100"/>

Das Dokument ist nun eingebunden.

Hinweis 1: Bei dynamisch erzeugten Dokumenten gilt: Wenn Sie das einzubindende Dokument ändern und die Änderungen speichern, wird die Änderung sofort in alle Dokumenten übernommen, welche die entsprechende Vorlage benutzen. Bei statisch erzeugten Dokumenten müssen Sie erst einen Rebuild durchführen (Datei > Rebuild...), bevor die Änderung wirksam wird.

Hinweis 2: Wenn Sie HTML Dateien per

<we:include>

einfügen wollen, müssen entweder alle

<html>

-,

<head>

- und

<body>

-Tags einschließlich Endtags vorhanden sein oder keines dieser Tags.

Beispiel

Datei, die eingebunden werden soll (id=90):

<p>

<a href="/we_demo/index.php" style="text-decoration:none">

News

</a>

</p>

<p>

<a href="/we_demo/filmberichte/all.php" style="text-decoration:none">

Filmberichte

</a>

</p>

<p>

<a href="/we_demo/programm/programm.html" style="text-decoration:none">

Programm

</a>

</p>

<p>

<a href="/we_demo/links/links.html" style="text-decoration:none">

Links</a>

</p>

Einbindung:

<td class="normal" width="27"> </td>

<td colspan="2" class="normal" valign="top">

<we:include id="90"/> </td>

<td bgcolor="white" colspan="2" valign="top">

Ergebnis:

<td class="normal" width="27"></td>

<td colspan="2" class="normal" valign="top">

<p>

<a href="/we_demo/index.php" style="text-decoration:none">

News

Benutzerhandbuch

152 Vorlagen erstellen – Aufgabe des Administrators

</a>

</p>

<p>

<a href="/we_demo/filmberichte/all.php" style="text-decoration:none">

Filmberichte

</a>

</p>

<p>

<a href="/we_demo/programm/programm.html" style="text-decoration:none">

Programm

</a>

</p>

<p>

<a href="/we_demo/links/links.html" style="text-decoration:none">

Links

</a>

</p>

</td>

<td bgcolor="white" colspan="2" valign="top">

4.7.7 Suche realisieren

Die webEdition Datenbankarchitektur macht es leicht, eine Suchfunktion für alle Seiten zu erstellen. Sie müssen dazu nicht, wie bei den meisten Suchtools, Ihre komplette

Website indizieren. So funktionierts:

Prozedur 20 Suchfunktion realisieren

1

Erstellen Sie eine Seite, auf der die Ergebnisse der Suchanfrage anzeigt werden sollen.

Erstellen Sie diese Seite als Übersichtsseite (siehe Abschnitt 4.6.2.2 "Übersicht über alle

Seiten erstellen" auf Seite 116).

2

Fügen Sie in Ihrer Vorlage an der Stelle, an der das Eingabefeld für Suchbegriffe erscheinen soll, folgende Tags in folgender Reihenfolge ein:

• <we:form id=”id der Ergebnisseite”>

Beispiel: Die ID der Ergebnisseite ist 100 -> <we:form id=”100”>

• <we:search type=”textinput” size=”50”

Dieses Tag erzeugt das Feld, in das der Suchbegriff eingegeben werden kann.

• <input type="submit" value="Suchen">

Diese Tag erzeugt einen Submit-Button mit Beschriftung Suchen.

• </we:form>

Nun wird das <we:form>-Tag wieder geschlossen.

Beispiel

<we:form id="100">

<we:search type="textinput" size="50"/>

<input type="submit" value="Suchen">

</we:form>

Wenn Sie nun auf der fertig generierten Seite in das Suchfeld etwas eingeben und auf den

Button Suchen klicken (oder RETURN auf Ihrer Tastatur drücken), werden die Ergebnisse der Suchanfrage auf der in Schritt 1 erstellten Seite angezeigt.

Standard 4.1.1 Oktober 2006

Vorlagen erstellen – Aufgabe des Administrators 153

Hier ein weiteres Beispiel:

Beispiel

<td colspan="2" align="right">

<we:form id="114" method="get">

<span class="normal">

<b>Suche:</b>

<span class="normal">&nbsp;</span>

<we:search type="textinput" size="15"/>

<span class="normal">&nbsp;</span><input type="submit" value="ok">

<span class="normal">&nbsp;</span>

</we:form>

</td>

Dies erzeugt folgendes Eingabefeld:

Abb. 186 Eingabefeld für einen Suchbegriff mit Submit-Button

4.7.8 Formular per E-Mail verschicken

Sie können mit webEdition ein Formular per E-Mail an eine E-Mail-Adresse schicken.

Grundlage ist das Tag

<we:form>

.

Prozedur 21 Formular per E-Mail verschicken

1

Erstellen Sie wie ein Formular mit den üblichen HTML-Tags.

2

Ersetzen Sie das <form>-Tag mit dem <we:form>-Tag.

3

Ergänzen Sie das <we:form>-Tag mit folgenden Attributen (siehe auch nachfolgendes

Beispiel).

a

type="formmail"

b

recipient=”[email protected]

Tragen Sie als Wert des Attributs die E-Mail-Adresse des Empfängers ein.

c

required=”feld1,feld3

Tragen Sie als Attributwert die Namen derjenigen Felder ein, die im Formular ausgefüllt werden müssen. Trennen Sie die Feldnamen dabei durch Kommas. required ist ein optionales Attribut.

d

order=”feld2,feld1,feld3

Legen Sie mit dem Attribut order die Reihenfolge der Felder in der gesendeten E-Mail fest. Trennen Sie auch hier die Feldnamen durch Kommas.

e

onerror=”31” onsuccess=”16

Tragen Sie als Attributwert die IDs der Seiten ein, welche bei einem Fehler (benötigte

Felder nicht alle ausgefüllt) bzw. bei Erfolg angezeigt werden sollen.

f

subject=”Formular von unserer Website

Geben Sie als Attributwert die Betreffzeile für die E-Mail ein.

Benutzerhandbuch

154 Vorlagen erstellen – Aufgabe des Administrators

g

mimetype=”text/html”

Die E-Mail wird als HTML-Mail verschickt.

Hinweis: Setzen Sie das Attribut nicht, wenn Sie nicht sicher sind, dass der

Empfänger der E-Mail über ein E-Mail-Programm verfügt, das HTML-Mails darstellen kann.

4

Klicken Sie auf Optionen > Einstellungen > Formmail-Empfänger. Klicken Sie auf

Hinzufügen und geben Sie die E-Mail Adressen an, an die Formmails geschickt werden dürfen. An Adressen, die hier nicht eingetragen sind, können keine Formmails verschickt werden.

Abb. 187 Fenster Formmail-Empfänger

Beispiel

<we:form type="formmail" recipient="[email protected]" required="E-Mail,name,vorname" order="name,vorname,E-Mail" subject="Formular von meiner Website" onerror="66" on success="23" mimetype="text/html">

<p>E-Mail: <input type="text" name="E-Mail"></p>

<p>Name: <input type="text" name="name"></p>

<p>Forname: <input type="text" name="vorname"></p>

<p><input type="submit" value="Formular versenden"></p>

Hinweis: Wenn Sie einem Formularfeld den Namen "E-Mail" geben, wird dieser

Wert in die Absenderadresse der zu versendenden Mail geschrieben. Dies ist jedoch nur möglich, wenn die Adresse korrekt eingegeben wurde. Deshalb prüft webEdition ein solches Feld und gibt gegebenenfalls eine Warnmeldung aus.

4.7.9 Mit Frames arbeiten

Wenn Ihre Website mit Frames arbeitet, erzeugen Sie mit webEdition die Inhalte der

Framesets. Die Framesets selbst können Sie entweder direkt, also ohne webEdition, auf den Server hochladen oder als HTML Seite in webEdition programmieren.

Javascripte, die das zugehörige Frameset einer Seite nachladen oder fremde Framesets entfernen, können Sie mithilfe des we:Tags

<we:ifNotWebEdition>

innerhalb des

Standard 4.1.1 Oktober 2006

Vorlagen erstellen – Aufgabe des Administrators 155 webEdition Editors eliminieren. Der Code zwischen Start- und Endtag wird dann nicht ausgeführt bzw. angezeigt, wenn die Seite in webEdition editiert wird.

4.8 Website importieren

Wählen Sie hierfür Datei > Import/Export > Import.... Der Import-Wizard wird geöffnet

(siehe Abb. 188)

Abb. 188 Import Wizard

Wählen Sie Dateien vom Server importieren und klicken Sie auf Weiter. Im folgenden

Dialog muss die Checkbox Erzeuge webEdition Seiten aktiv sein.

Abb. 189 Checkbox bei Import

Dadurch ist es möglich eine komplette Website pflegegerecht automatisch zu importieren.

Es gibt zwei unterschiedliche Arten des Importes. Sie wählen dies Art des Importes

über den Einstellungen Dialog, den Sie durch Klick auf den Einstellungen... Button aufrufen. Dieser befindet sich direkt unter der Erzeuge webEdition Seiten Checkbox

(s.o.). Es gibt folgende Möglichkeiten:

4.8.1 Vorlagen automatisch erzeugen

webEdition erzeugt automatisch eine Vorlage für die zu importierende HTML-Seite.

Hier wird der gesamte Inhalt zwischen dem <body> Start- und Endtag in das Feld content importiert und in der Vorlage dafür ein Wysiwyg Editor eingesetzt

(<we:textarea wysiwyg="true" name="content" ...>).

Benutzerhandbuch

156 Vorlagen erstellen – Aufgabe des Administrators

Abb. 190 Vorlagen automatisch erzeugen

Title, Keywords, Description und Charset werden aus dem HTML Dokument extrahiert und in die entsprechenden Felder geschrieben. In der Vorlage werden dementsprechend die Tags angelegt (<we:title>, <we:description>, <we:keywords> und

<we:charset>). Bei dieser Importart kann man das Zielverzeichnis der Vorlage und einen Namen vergeben, welcher der erzeugten Vorlage zugeordnet wird. Bei mehreren

Vorlagen wird automatisch ein Zähler an den Namen angehängt.

4.8.2 Dedizierte Vorlage benutzen

webEdition benutzt eine von Ihnen selektierte Vorlage und importiert Teile aus der

HTML Datei in die Felder. Welche Teile in welches Feld importiert werden sollen, wird bestimmt, indem man zu jedem Feld eine Start- und Endmarkierung festlegt. webEdition sucht dann in den zu importierenden Seiten nach diesen Markierungen und importiert alles zwischen Start- und eine Endmarkierung in das entsprechende Feld.

Bei dieser Importart muss zuerst eine Vorlage ausgewählt werden. Klicken Sie hierfür auf Auswählen und wählen Sie eine Vorlage aus. Das Fenster wird entsprechend Ihrer

Auswahl angepaßt

Standard 4.1.1 Oktober 2006

Abb. 191 Bestimmte Vorlage

Vorlagen erstellen – Aufgabe des Administrators 157

Nach Auswahl der Vorlage werden die Felder der Vorlage angezeigt. Zu diesen Feldern kann dann jeweils eine Start- und Endmarkierung festgelegt werden. Unter Start- und

Endmarkierung versteht man ein einzigartiges Code Fragment direkt vor und nach dem zu importierenden Feldinhalt.

Beispiel

Sie haben ihre statischen Webseiten alle gleich aufgebaut:

<html>

<head>

</head>

<body>

<h1>

Überschrift

<h1>

<div id="content">

Hier steht der Content

</div>

<div id="footer">

Hier steht der Footer

</div>

</body>

</html>

Ihre Vorlage enthält zB. folgende Felder:

<we:input type="text" name="headline">

<we:textarea name="content">

<we:input type="text" name="footer">

Benutzerhandbuch

158 Vorlagen erstellen – Aufgabe des Administrators

Nun geben Sie bei Start- und Endmarkierung folgendes ein:

• Im Feld headline:

— Startmarkierung: <h1>

— Endmarkierung: </h1>

• Im Feld content:

— Startmarkierung: <div id="content">

— Endmarkierung: </div>

• Im Feld footer:

— Startmarkierung: <div id="footer">

— Endmarkierung: </div>

Wenn die Checkbox Reguläre Ausdrücke benutzen aktiv ist, dann können Sie in den

Markierungsfeldern reguläre Ausdrücke verwenden. Reguläre Ausdrücke sind ein spezieller Code, welcher einen Text beschreibt. Näheres über reguläre Ausdrücke finden Sie im Internet unter folgender Adresse http://de.wikipedia.org/wiki/Regex

Falls ein Datumsfeld in der Vorlage definiert wurde, kann zusätzlich noch das

Datumsformat eingestellt werden. Sie können hier zwischen 3 Formaten wählen:

UNIX Timestamp: Der Unix-Timestamp zählt die Anzahl der Sekunden seit dem

Beginn der Unix-Epoche (01.01.1970).

GMT Timestamp: General Mean Time bzw. Greenwich Mean Time (kurz GMT).

Eigenes Format: Innerhalb der Formatieranweisung sind folgende Symbole zulässig: Y (vierstellige Ausgabe des Jahres: 2004), y (zweistellige Ausgabe des

Jahres: 04),m (Monat mit führender Null: 01 bis 12), n (Monat ohne führende Null:

1 bis 12), d (Tag des Monats mit zwei Stellen und führender Null: 01 bis 31), j (Tag des Monats ohneführende Null: 1 bis 31), H (Stunde im 24-Stunden-Format: 00 bis

23), G (Stunde im 24-Stunden-Format ohne führende Null: 0 bis 23), i (Minuten: 00 bis 59), s (Sekunden mitführender Null: 00 bis 59)

4.9 RSS-Feeds

Die Anzeige von Inhalten als RSS-Feed wird immer beliebter. Mit webEdition ist es sehr einfach, sowohl externe RSS-Feeds auf Ihrer Seite anzeigen zu lassen, als auch webEdition Seiten (z.B. aktuelle News) als RSS-Feed auszugeben.

4.9.1 Externen RSS-feed einbinden

Mit dem folgenden Code wird, analog zur we_demo, ein externer RSS-Feed in webEdition eingebunden und ausgegeben.

<we:xmlfeed name="test" url="http://living-e.de/de/pressezentrum/pr-mitteilungen/rss2.xml" refresh="0" />

<we:xmlnode feed="test" xpath="/rss/channel">

<h2><we:xmlnode feed="test" xpath="title"></we:xmlnode></h2>

<h3><we:xmlnode feed="test" xpath="description"></we:xmlnode></h3>

<ul class="unformattedList">

<we:xmlnode xpath="item">

Standard 4.1.1 Oktober 2006

Vorlagen erstellen – Aufgabe des Administrators 159

<li>

<a href="<we:xmlnode xpath="link"></we:xmlnode

>" target="_blank"><we:xmlnode xpath="title"></we:xmlnode></a>

<div class="contentBox">

<we:xmlnode feed="test" xpath="description"></we:xmlnode><br />

</div>

</li>

</we:xmlnode>

</ul>

</we:xmlnode>

Der Code ist analog zu dem in

/we_demo/news/rssFeed.tmpl

verwendeten. Im obigen Beispiel wird der RSS-Feed von http://living-e.de/de/pressezentrum/pr-mitteilungen/rss2.xml

ausgegeben. Näheres zur Verwendung der we:tags <we:xmlfeed> und <we:xmlnode> entnehmen Sie bitte der webEdition Tag-Referenz.

4.9.2 webEdition Seiten als RSS-Feed ausgeben

Bieten Sie den Besuchern Ihrer Website eine bequeme Möglichkeit, immer über die letzten Neuigkeiten informiert zu sein. Auch hierfür ist ein Beispiel in der we_demo eingebunden. Somit bieten Sie eine simple Möglichkeit zur Newsaggregation.

Beispiel

<rss version="2.0">

<channel>

<title>webEdition Demo</title>

<link>http://<?php print $_SERVER['SERVER_NAME']; ?></link>

<description>News der webEdition-Demo-Seite</description>

<language>de</language>

<pubDate><?php print date("D, j M Y G:i:s \G\M\T");

?></pubDate>

<lastBuildDate><?php print date("D, j M Y G:i:s \G\M\T");

?></lastBuildDate>

<generator>webEdition</generator>

<managingEditor>[email protected]</managingEditor>

<webMaster>[email protected]</webMaster>

<copyright>Copyright © 2006 by living-e AG. Alle Rechte vorbehalten.</copyright>

<we:listview type="document" doctype="news - Article">

<we:repeat>

<item>

<title>[<we:field name="newsDate" type="date" format="d.m.Y" />] <we:field name="headline2" /></title>

<link>http://<?php print $_SERVER['SERVER_NAME'];

?><we:field name="we_path" /></link>

<pubDate><?php print date("D, j M Y G:i:s \G\M\T", substr($GLOBALS['lv']->f('newsDate'), 6, 10)); ?></pubDate>

<guid>http://<?php print $_SERVER['SERVER_NAME'];

?><we:field name="we_path" /></guid>

</item>

</we:repeat>

</we:listview>

</channel>

</rss>

Benutzerhandbuch

160 Vorlagen erstellen – Aufgabe des Administrators

Dies ist der Code der Vorlage

/we_demo/news/rss2.tmpl

. Die Spezifiaktionen entsprechen hier dem Standard RSS 2.0. Es wird eine Übersicht über alle Dokumente des Types “news - Article“ erstellt. Basierend auf dieser Vorlage wird die XML-Datei

/we_demo/news/rss/rss2.xml erzeugt. Damit den Besuchern der Feed auch angeboten wird, wird dieser in der Hauptvorlage /we_demo/masterTemplate.tmpl bekannt gemacht:

<!-- Offer subscription to rss-feed -->

<link rel="alternate" type="application/rss+xml" title="webEdition Demo News" href="/we_demo/news/rss/rss2.xml" />

Die Integration in die Hauptvorlage bietet hier den großen Vorteil, daß der Feed auf allen Seiten Ihrer Internetpräsenz annonciert wird.

Standard 4.1.1 Oktober 2006

Was this manual useful for you? yes no
Thank you for your participation!

* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project

Download PDF

advertisement

Table of contents