Guide Bedienung des Backends: Unterschied zwischen den Versionen

Aus DynPG-Wiki
Wechseln zu: Navigation, Suche
 
 
(Eine dazwischenliegende Version des gleichen Benutzers werden nicht angezeigt)
Zeile 45: Zeile 45:
 
[[Image:gruppen_verzeichnisse.png]]
 
[[Image:gruppen_verzeichnisse.png]]
  
Mehr zum Erstellen von Artikeln finden Sie unter [#Artikel].
+
Mehr zum Erstellen von Artikeln finden Sie unter [[#Artikel]].
  
 
=== Der Editor ===
 
=== Der Editor ===
Zeile 214: Zeile 214:
 
| <center>[[Image:unlink.gif]]</center>
 
| <center>[[Image:unlink.gif]]</center>
 
| Link entfernen
 
| Link entfernen
| Damit entfernen Sie einen Link im markierten Text. Mehr dazu in Kapitel [#Links erstellen].
+
| Damit entfernen Sie einen Link im markierten Text. Mehr dazu in Kapitel [[#Links erstellen]].
  
 
|-
 
|-
 
| <center>[[Image:anchor.gif]]</center>
 
| <center>[[Image:anchor.gif]]</center>
 
| Anker einfügen/bearbeiten
 
| Anker einfügen/bearbeiten
| Mehr dazu in Kapitel [#Links erstellen].
+
| Mehr dazu in Kapitel [[#Links erstellen]].
  
 
|-
 
|-
 
| <center>[[Image:image.gif]]</center>
 
| <center>[[Image:image.gif]]</center>
 
| Bild einfügen/bearbeiten
 
| Bild einfügen/bearbeiten
| Hiermit können Sie Bilder einfügen. Mehr dazu in Kapitel [#Bilder einfügen].
+
| Hiermit können Sie Bilder einfügen. Mehr dazu in Kapitel [[#Bilder einfügen]].
  
 
|-
 
|-
Zeile 269: Zeile 269:
 
| <center>[[Image:table.gif]]</center>
 
| <center>[[Image:table.gif]]</center>
 
| Tabelle einfügen/bearbeiten
 
| Tabelle einfügen/bearbeiten
| Fügt eine Tabelle ein. Mehr in Kapitel [#Tabellen].
+
| Fügt eine Tabelle ein. Mehr in Kapitel [[#Tabellen]].
  
 
|-
 
|-
 
| <center>[[Image:table_row_props.gif]]</center>
 
| <center>[[Image:table_row_props.gif]]</center>
 
| Zeileneigenschaften
 
| Zeileneigenschaften
| Kapitel [#Tabellen]
+
| Kapitel [[#Tabellen]]
  
 
|-
 
|-
 
| <center>[[Image:table_cell_props.gif]]</center>
 
| <center>[[Image:table_cell_props.gif]]</center>
 
| Zelleigenschaften
 
| Zelleigenschaften
| Kapitel [#Tabellen]
+
| Kapitel [[#Tabellen]]
  
 
|-
 
|-
 
| <center>[[Image:table_insert_row_before.gif]]</center>
 
| <center>[[Image:table_insert_row_before.gif]]</center>
 
| Zeile oberhalb einfügen
 
| Zeile oberhalb einfügen
| Kapitel [#Tabellen]
+
| Kapitel [[#Tabellen]]
  
 
|-
 
|-
 
| <center>[[Image:table_insert_row_after.gif]]</center>
 
| <center>[[Image:table_insert_row_after.gif]]</center>
 
| Zeile unterhalb einfügen
 
| Zeile unterhalb einfügen
| Kapitel [#Tabellen]
+
| Kapitel [[#Tabellen]]
  
 
|-
 
|-
 
| <center>[[Image:table_delete_row.gif]]</center>
 
| <center>[[Image:table_delete_row.gif]]</center>
 
| Zeile löschen
 
| Zeile löschen
| Kapitel [#Tabellen]
+
| Kapitel [[#Tabellen]]
  
 
|-
 
|-
 
| <center>[[Image:table_insert_col_before.gif]]</center>
 
| <center>[[Image:table_insert_col_before.gif]]</center>
 
| Spalte links einfügen
 
| Spalte links einfügen
| Kapitel [#Tabellen]
+
| Kapitel [[#Tabellen]]
  
 
|-
 
|-
 
| <center>[[Image:table_insert_col_after.gif]]</center>
 
| <center>[[Image:table_insert_col_after.gif]]</center>
 
| Spalte rechts einfügen
 
| Spalte rechts einfügen
| Kapitel [#Tabellen]
+
| Kapitel [[#Tabellen]]
  
 
|-
 
|-
 
| <center>[[Image:table_delete_col.gif]]</center>
 
| <center>[[Image:table_delete_col.gif]]</center>
 
| Spalte löschen
 
| Spalte löschen
| Kapitel [#Tabellen]
+
| Kapitel [[#Tabellen]]
  
 
|-
 
|-
 
| <center>[[Image:table_split_cells.gif]]</center>
 
| <center>[[Image:table_split_cells.gif]]</center>
 
| Zelle teilen
 
| Zelle teilen
| Kapitel [#Tabellen]
+
| Kapitel [[#Tabellen]]
  
 
|-
 
|-
 
| <center>[[Image:table_merge_cells.gif]]</center>
 
| <center>[[Image:table_merge_cells.gif]]</center>
 
| Zellen verbinden
 
| Zellen verbinden
| Kapitel [#Tabellen]
+
| Kapitel [[#Tabellen]]
  
 
|-
 
|-
Zeile 595: Zeile 595:
  
 
Den Besucherzähler können Sie auf null zurücksetzen, indem Sie das [[Image:counter-symbol.png]]-Symbol anklicken.
 
Den Besucherzähler können Sie auf null zurücksetzen, indem Sie das [[Image:counter-symbol.png]]-Symbol anklicken.
 +
 +
== Formulare erstellen in DynPG ==
 +
Bevor Sie beginnen ein Formular zu erstellen, ist es empfehlenswert, zuerst die Artikel, welche bei erfolgreichem bzw. bei erfolglosem Versenden des Formulars angezeigt werden zu erstellen.
 +
 +
=== Formulartabelle einfügen/bearbeiten ===
 +
Um ein Formular zu erstellen, wählen Sie die Schaltfläche "Formulartabelle einfügen/bearbeiten" ([[Bild:Formtable.gif]]). Nun öffnet sich ein Pop-Up-Fenster, in dem Sie weitere Angaben machen müssen.
 +
* '''Formularname'''
 +
:Hier müssen Sie einen Namen für das Formular angeben. Dieser ist dann in der Betreffzeile der E-Mail zu lesen.
 +
* '''Formulardaten an folgende E-Mailadresse senden'''
 +
:Geben Sie hier die E-Mailadresse ein, an welche die Formulardaten gesendet werden sollen.
 +
* '''Senden war erfolgreich'''
 +
:Hier müssen Sie den Artikel auswählen, der angezeigt werden soll, wenn das Formular erfolgreich gesendet wurde.
 +
* '''Senden ergab Fehler'''
 +
:Hier müssen Sie den Artikel auswählen, der angezeigt werden soll, wenn das Senden des Formulars einen Fehler ergab. Mögliche Ursachen für den Aufruf dieses Artikels:
 +
:* Der Kunde hat ein Feld, das als "Zwingend" (siehe Formularelemente) markiert ist, nicht ausgefüllt.
 +
:* Der Kunde hat ein Feld, das als „E-Mail“ (siehe Formularelemente) markiert ist mit ungültigen Angaben bzw. gar nicht ausgefüllt.
 +
:* Der Kunde hat das Formular bei diesem Besuch bereits gesendet.
 +
 +
Danach können Sie noch Angaben zur Gestaltung der Tabelle des Formulars machen. Diese wird gleich angewendet, wie die normale Tabelle.
 +
 +
Um die Daten zu bearbeiten, klicken Sie mit der Maus in die zu bearbeitende Tabelle. Nun wählen Sie die Schaltfläche „Formulartabelle einfügen/bearbeiten“ und das Pop-Up zum bearbeiten öffnet sich. Um die geänderten Daten zu übernehmen, drücken Sie den Aktualisieren-Button.
 +
 +
=== Formularelement einfügen ===
 +
 +
Um Formularelemente einzufügen, klicken Sie mit der Maus in die zuvor eingefügte Formulartabelle. Wählen Sie nun die Schaltfläche „Formularelement einfügen“ ([[Bild:Formular.gif]]). Nun öffnet sich ein Pop-Up Fenster, in dem die verschiedenen Formularelemente aufgelistet werden. Hier eine kurze Erläuterung:
 +
* '''Text Box'''
 +
:Ist ein einzeiliges Eingabefeld. Eignet sich besonders für einzelne Wörter wie z.B. Namen, Adresse usw.
 +
 +
:Weitere Angaben:
 +
:* ''Feldnamen'': Hier müssen Sie einen Namen für dieses Element angeben. Diesen Namen sehen Sie dann auch in der E-Mail eines gesendeten Formulars. Z.B. Feldname: Name --> ergibt in der E-Mail: <tt>Name:………………Hans Muster (eingegebener Name)</tt>
 +
:* ''Value'': Hier können Sie einen Text definieren, der dann bereits in der Text Box steht. Im Bild wäre der Valuewert „Text Box“.
 +
:* ''Grösse'': Hier können Sie die grösse der Text Box angeben. Standartwert ist 20.
 +
:* ''Max. Länge'': Hier können Sie die maximale Anzahl Zeichen, die eingegeben werden dürfen, angeben. Z.B. eine Postleitzahl darf höchstens 4 Zeichen haben, also setzen Sie den Wert auf 4.
 +
:* ''Weiteres'': Hier können Sie noch spezielle Optionen für diese Text Box wählen. „Zwingend“ heisst, das Feld muss ausgefüllt werden, ansonsten wird die Fehlerseite aufgerufen. „E-Mail“ heisst, dass dieses Feld eine E-Mailadresse enthalten muss. Das Feld wird beim senden des Formulars geprüft. Die Formulardaten werden dann als Bestätigung auch an diese Adresse gesendet.
 +
* '''Passwort Box'''
 +
:Ist gleich wie die Text Box, ausser dass die Eingabe mit Sternchen (*) ausgefüllt wird (in der E-Mail ist der Text jedoch in den eingetippten Buchstaben zu lesen).
 +
 +
:Weitere Angaben: Wie Textbox, jedoch statt ''Weiteres'':
 +
:* ''Zwingend'': Ist diese Box ausgewählt, muss dieses Feld asgefüllt werden, ansonsten wird die Fehlerseite aufgerufen.
 +
* '''Text Area'''
 +
:Ist ein mehrzeiliges Eingabefeld. Eignet sich besonders für längere Texte wie z.B. Mitteilungen, Wünsche usw.
 +
 +
:Weitere Angaben:
 +
:* ''Feldnamen'': Hier müssen Sie einen Namen für dieses Element angeben. Diesen Namen sehen Sie dann auch in der EMail eines gesendeten Formulars. Z.B. Feldname: Mitteilung --> ergibt in der E-Mail: <tt>Mitteilung:………………Danke! Ich war sehr zufrieden.</tt>
 +
:* ''Text'': Hier können Sie einen Text definieren, der dann bereits im Textarea steht. Im Bild wäre der Textwert „Textarea…“.
 +
:* ''Zeilen'': Hier können Sie die Anzahl Zeilen des Text Areas angeben. Standartwert ist 3.
 +
:* ''Breite'': Hier können Sie die Anzahl Zeichen pro Zeile angeben. Standartwert ist 15.
 +
:* ''Zwingend'': Ist diese Box ausgewählt, muss dieses Feld ausgefüllt werden, ansonsten wird die Fehlerseite aufgerufen.
 +
* '''Radio Button'''
 +
:Hier können Sie eine Liste von Auswahlmöglichkeiten erstellen. Es kann jedoch nur eine der Optionen ausgewählt werden.
 +
 +
:Weitere Angaben 1:
 +
:* ''Feldnamen'': Hier müssen Sie einen Namen für dieses Element angeben. Diesen Namen sehen Sie dann auch in der E-Mail eines gesendeten Formulars.
 +
:* ''Optionen'': Geben Sie hier die Anzahl der Wahlmöglichkeiten an und drücken Sie danach auf „Weiter“.
 +
 +
:Weitere Angaben 2:
 +
:* ''Option X'': Geben Sie hier nun die Beschriftung der einzelnen Auswahlmöglichkeiten an. Dahinter können Sie die Option bereits vorselektieren. Ist die Box „Nebeneinander“ (bei Radio Button und bei Check Box) ausgewählt, so stehen die verschiedenen Optionen Nebeneinander.
 +
* '''Check-Box'''
 +
:Ist ähnlich wie Radio Button. Hier kann man jedoch mehrere Optionen auswählen.
 +
 +
:Weitere Angaben:
 +
:*Siehe unter „Radio Button - Weitere Angaben“
 +
* '''List Box'''
 +
:Ist gleich wie Radio Button, ausser dass die Auswahlmöglichkeiten in einem Drop-Down Menü stehen.
 +
 +
:Weitere Angaben:
 +
:*Siehe unter „Radio Button - Weitere Angaben“
 +
* '''Submit Button'''
 +
:Erstellt einen Button, der gedrückt werden muss, um das Formular zu versenden. Das Formular muss also einen Submit-Button enthalten, damit es versendet werden kann.
 +
 +
:Weitere Angaben:
 +
:* ''Beschriftung'': Hier können Sie die Beschriftung des Submit Button festlegen. Sinnvoll ist der Wert „Senden“.
 +
* Reset Button
 +
:Erstellt einen Button, der gedrückt werden kann, um bereits ausgefüllte Formularelemente zurückzusetzen.
 +
 +
:Weitere Angaben:
 +
:* ''Beschriftung'': Hier können Sie die Beschriftung des Button festlegen. Sinnvoll ist der Wert „Reset“.
 +
 +
=== Editieren von Feldern ===
 +
Wenn Sie ein Feld editieren möchten, markieren Sie dieses und klicken auf die entsprechende Schaltfläche ([[Bild:Formular.gif]]).
 +
 +
=== Sonstiges ===
 +
* Achtung: Beim Einfügen einer Formulartabelle wird oben und unten je eine automatische Zeile mit dem Bild [[Bild:formular_top.jpg]] erstellt. Um Probleme zu vermeiden ändern oder löschen Sie diese Zeile nicht; sie soll Ihnen den Bereich anzeigen, in dem Sie Formularelemente platzieren können.
 +
* Beim Einfügen eines Feldes "Textareas" wird nur ein Bild angezeigt. Dieses kann von den getätigten Angaben abweichen. Auf der Webseite wird es jedoch anschliessend korrekt dargestellt.
 +
* Bei der Benutzung des Browsers Firefox kann es zu Problemen beim löschen einzelner Formularelemente kommen. Sollte dies geschehen verwenden Sie den Internet Explorer.
  
 
== Diese Informationen als PDF ==
 
== Diese Informationen als PDF ==
 
Diesen Artikel finden sie auch als [[Media:Oberflaeche.pdf|Oberflaeche.pdf]], diese Datei wird jedoch möglicherweise nicht mehr aktualisiert und ist damit nicht so aktuell wie dieser Artikel.
 
Diesen Artikel finden sie auch als [[Media:Oberflaeche.pdf|Oberflaeche.pdf]], diese Datei wird jedoch möglicherweise nicht mehr aktualisiert und ist damit nicht so aktuell wie dieser Artikel.

Aktuelle Version vom 23. März 2009, 17:28 Uhr

Ursprünglicher Autor: Urs Gamper, Patrick Rufer, Daniel Schliebner

Dateiverwaltung

Um Dateien hochzuladen und zu verwalten, klicken Sie in der linken Navigation auf "Dateiverwaltung". Hier können Sie nun nach Belieben Verzeichnisse und Unterverzeichnisse erstellen. Diese Struktur hat keinen Einfluss auf das Aussehen der Web-Site sondern dient lediglich Ihrer Übersicht. Die Verzeichnisse können frei editiert und gelöscht werden (rote Markierung).

Dateiverwaltung gruppen.png

Wenn Sie nun Ihre Verzeichnisse erstellt haben, klicken Sie in eines der Verzeichnisse (grüne Markierung), damit Sie Ihre Dateien (Bilder, PDF, Filme, etc.) hochladen können.

Erlaubt sind alle Medien, die Sie unter "Einstellungen -> 5.Einstellungen -> Erlaubte Dateitypen" freigegeben haben. Ausserdem werden alle bereits hochgeladenen Dateien aufgelistet.

Dateien hochladen

Dateiverwaltung upload.png

Für das Hochladen von Dateien gehen Sie folgendermassen vor:

  • Mit "Durchsuchen" Datei auf dem lokalen Arbeitsplatz suchen.
  • Titel für das Bild und IMMER eine Beschreibung eingeben (ist sichtbar auf der Webseite).
  • "Hochladen" Button drücken.

Für Bildergalerien kann es sich lohnen, ganze Verzeichnisse mit Bildern in einem Zug hochzuladen. Dazu müssen Sie die Dateien zippen und können diese zip-Files unter "Archiv hochladen" auf den Server verschieben.

Dateiverwaltung zip upload.png

Dateien verwalten

Alle hochgeladenen Dateien sind unterhalb des Upload-Bereichs aufgelistet.

Um eine Datei zu ändern, klicken Sie auf den Kugelschreiber (Imgbtn edit.jpg). Nun können Sie gleich wie beim Hochladen von Dateien vorgehen. Um den Vorgang abzuschliessen, drücken Sie den Button "Ändern".

Wollen Sie eine Datei löschen, klicken Sie auf das rote Kreuz (Imgbtn delete.jpg). Bestätigen Sie nun den Löschvorgang.

Um eine hochgeladene Datei zu betrachten, klicken Sie auf den Stempel(Imgbtn view.jpg).

Sie haben auch die Möglichkeit, Bilder zu verkleinern oder zu bescheiden (Imgbtn edit file.gif).

Bildbearbeitung.png

Ausserdem haben Sie über der Liste die Möglichkeit nach verschiedenen Kriterien Dateien zu suchen.

Artikelbezogene Texte

Um Texte zu erstellen und verwalten, klicken Sie in der linken Navigation auf "Texte". Nun erscheint ein grosses, weisses Textfeld. Darüber sehen Sie zahlreiche Schaltflächen. Das gesamte nennt sich "WYSIWYG-Editor". In diesem Editor können Sie Texte schreiben, diese formatieren, gestalten und vieles mehr.

Ebenso können Sie Artikel direkt über die Gruppen erfassen. Sie wählen sich als erstes bei den Gruppen in eine Gruppe/ein Verzeichnis ein.

Gruppen verzeichnisse.png

Mehr zum Erstellen von Artikeln finden Sie unter #Artikel.

Der Editor

Im weißen Feld des Editors können Sie Texte ganz normal schreiben. Mit den Schaltflächen darüber können Formatierungen vorgenommen, Bilder und Links eingefügt und einige andere Möglichkeiten, die das Internet bietet angewendet werden.

Beschreibung der Schaltflächen

In folgender Tabelle werden die einzelnen Schaltflächen genauer beschrieben:


Bedeutung Anwendung/Wirkung bei Klick
Newdocument.gif
Neues Dokument Löscht den Inhalt aus dem Textfeld. Nicht gespeicherte Daten werden gelöscht.
Print.gif
Drucken Druckt den Inhalt des Textfelds.
Bold de se.gif
Fette Schrift Formatiert markierten Text fett. Wenn die Markierung bereits fett ist, wird dies entfernt.

Ist kein Text markiert so, können Sie nach dem Klick fett schreiben.

Italic de se.gif
Kursive Schrift Formatiert markierten Text kursiv. Wenn die Markierung bereits kursiv ist, wird dies entfernt.

Ist kein Text markiert, so können Sie nach dem Klick kursiv schreiben.

Underline.gif
Unterstreichen Formatiert markierten Text unterstrichen. Wenn die Markierung bereits unterstrichen ist, wird dies entfernt.

Ist kein Text markiert, so können Sie nach dem Klick unterstrichen schreiben.

Strikethrough.gif
Durchstreichen Formatiert markierten Text durchstrichen. Wenn die Markierung bereits durchstrichen ist, wird dies entfernt.

Ist kein Text markiert, so können Sie nach dem Klick durchstrichen schreiben.

Justifyleft.gif
Linksbündig Richtet den markierten Bereich bzw. den aktuellen Block linksbündig mit einem unregelmässigen rechten Rand aus.
Justifyright.gif
Zentriert Zentriert den markierten Bereich / aktuellen Block.
Justifycenter.gif
Rechtsbündig Richtet den markierten Bereich bzw. den aktuellen Block rechtsbündig mit einem unregelmässigen linken Rand aus.
Justifyfull.gif
Blocksatz Richtet den markierten Bereich bzw. den aktuellen Block rechts- und linksbündig aus.
Css-stile.gif
CSS-Stil
VordefSchriftformate.gif
Schriftformat Hier können Sie eine Auswahl aus vordefinierten Formaten wie z.B. Überschriften oder Adresszeilen treffen.
Cut.gif
Ausschneiden Löscht den markierten Text und legt ihn in der Zwischenablage ab, so dass er mit "Einfügen" eingefügt werden kann.

Funktioniert nicht mit Mozilla und Firefox.

Copy.gif
Kopieren Kopiert den markierten Text in die Zwischenablage.

Funktioniert nicht mit Mozilla und Firefox.

Paste.gif
Einfügen Fügt den Text aus der Zwischenablage an der aktuellen Position ein.

Funktioniert nicht mit Mozilla und Firefox.

Pastetext.gif
Unformatierter Text einfügen Öffnet ein Popup, in dem Sie einen Text einfügen können. Bei Klick auf "Einfügen" wird dieser Text unformatiert in das aktuelle Dokument eingefügt.
Pasteword.gif
Text Word-Formatiert einfügen Öffnet ein Popup, in dem Sie einen mit MSWord formatierten Text einfügen können. Bei Klick auf "Einfügen" wird dieser Text samt Formatierungen in das aktuelle Dokument eingefügt.
Search.gif
Text Suche Hier können Sie nach bestimmten Zeichen oder Wörtern im Text suchen. Wird ein Wort gefunden, so ist es im Text grau markiert.
Replace.gif
Suchen/Ersetzen Hier können Sie nach bestimmten Zeichen oder Wörtern im Text suchen (Suchen nach) und diese durch ein anderes ersetzten (Ersetzen durch).

Mit "Ersetzen" tauschen Sie das aktuell markierte bzw. das erste gefundene Wort aus.

Mit "Alle ersetzen" werden alle Wörter im Text ersetzt.

Wollen Sie ein Wort überspringen drücken Sie "Weitersuchen" und das nächste Wort wird gesucht.

Bullist.gif
Aufzählung Fügt eine Aufzählung ein. Mit der Eingabetaste erreichen Sie einen neuen Aufzählungspunkt. Um die Aufzählung zu beenden, drücken Sie das Symbol erneut.

Sie können auch einen Text markieren und ihn mit einem Klick auf das Symbol als Aufzählung formatieren. Dabei wird für jeden Zeilenumbruch ein neuer Aufzählungspunkt erstellt. Nach gleichem Prinzip können Sie diese auch entfernen.

Numlist.gif
Nummerierung Gleich wie die Aufzählung, doch statt Aufzählungspunkte wird eine Nummerierung eingefügt.
Outdent.gif
Einzug verkleinern Falls ein Einzug (eingerückte Textstelle) vorhanden ist, kann er mit dieser Schaltfläche verkleinert/entfernt werden.
Indent.gif
Einzug vergrössern Hiermit wird der Text jeweils um ein Stück nach rechts eingerückt.
Undo.gif
Rückgängig Macht den letzten Befehl rückgängig oder löscht den zuletzt eingegebenen Textabschnitt.
Redo.gif
Wiederherstellen Macht die Aktion des Befehls "Rückgängig" rückgängig
Link.gif
Link einfügen/bearbeiten Markieren Sie eine Textstelle und fügen Sie mit dieser Schaltfläche einen Verweis auf eine andere Seite ein. Mehr dazu in Kapitel 2.1.3.
Unlink.gif
Link entfernen Damit entfernen Sie einen Link im markierten Text. Mehr dazu in Kapitel #Links erstellen.
Anchor.gif
Anker einfügen/bearbeiten Mehr dazu in Kapitel #Links erstellen.
Image.gif
Bild einfügen/bearbeiten Hiermit können Sie Bilder einfügen. Mehr dazu in Kapitel #Bilder einfügen.
Cleanup.gif
Unsauberen Code entfernen Hiermit entfernen Sie Fehlerhaften HTML-Code.
Help.gif
Hilfe Ruft ein Fenster mit einem Hilfemenü und Produktinformationen auf.
Code.gif
HTML-Quelltext editieren Öffnet ein Popup mit dem Quelltext des aktuellen Textes. Hier können Sie auch direkt HTML-Code schreiben. Änderungen werden mit einem Klick auf aktualisieren sichtbar.
Insertdate.gif
Datum einfügen Fügt das aktuelle Datum im Format DD.MM.YYYY ein.
Inserttime.gif
Zeit einfügen Fügt die aktuelle Zeit im Format HH:MM:SS ein.
Preview.gif
Vorschau Zeigt den aktuellen Text in einer weissen Vorschauseite an.
Forecolor.gif
Schriftfarbe wählen Ändert die Schriftfarbe von markiertem Text bzw. ab dem Klick. Wählen Sie einfach die gewünschte Farbe aus der Palette aus.
Backcolor.gif
Hintergrundfarbe Ändert die Schrifthintergrundfarbe von markiertem Text bzw. ab dem Klick. Wählen Sie einfach die gewünschte Farbe aus der Palette aus.
Table.gif
Tabelle einfügen/bearbeiten Fügt eine Tabelle ein. Mehr in Kapitel #Tabellen.
Table row props.gif
Zeileneigenschaften Kapitel #Tabellen
Table cell props.gif
Zelleigenschaften Kapitel #Tabellen
Table insert row before.gif
Zeile oberhalb einfügen Kapitel #Tabellen
Table insert row after.gif
Zeile unterhalb einfügen Kapitel #Tabellen
Table delete row.gif
Zeile löschen Kapitel #Tabellen
Table insert col before.gif
Spalte links einfügen Kapitel #Tabellen
Table insert col after.gif
Spalte rechts einfügen Kapitel #Tabellen
Table delete col.gif
Spalte löschen Kapitel #Tabellen
Table split cells.gif
Zelle teilen Kapitel #Tabellen
Table merge cells.gif
Zellen verbinden Kapitel #Tabellen
Hr1.gif
Horizontaler Balken Fügt einen einfachen, horizontalen Balken ein.
Removeformat.gif
Formatierung aufheben Hebt Formatierungen wie fett,kursiv usw. im markierten Text bzw. ab dieser Stelle auf.
Visualaid.gif
Hilfslinien ein/ausblenden Blendet Hilfslinien und Unsichtbare Elemente ein bzw. aus.
Sub.gif
Tiefgestellt Markierter Text bzw. Text ab hier wird tiefgestellt geschrieben.
Sup.gif
Hochgestellt Markierter Text bzw. Text ab hier wird hochgestellt geschrieben.
Charmap.gif
Sonderzeichen einfügen Öffnet ein Popup aus dem Sie ein Sonderzeichen auswählen und in den Text einfügen können.
Flash.gif
Flash-Datei einfügen Fügen Sie eine Flash-Datei ein. Geben Sie die URL ein und bestimmen Sie die Grösse des Fensters.
Advhr.gif
Horizontale Linie einfügen/bearbeiten Fügt einen benutzdefinierten, horizontalen Balken ein. Sie können die Breite (in Pixel oder Prozent) und die Höhe angeben. Ausserdem können Sie einen Schatten setzen.
Fullscreen.gif
Vollbildmodus Hier wechseln Sie in den Vollbildmodus, d.h. der Editor wird über die ganze Seite angezeigt.
Formular.gif
Formularelement einfügen Fügt ein Formularelement ein. Ein Popup öffnet sich und Sie können auswählen, welches Formularelement eingefügt werden soll und dafür weitere Einstellungen vornehmen. Diese Elemente dürfen Sie aber nur in einer Formulartabelle einfügen.
Formtable.gif
Formulartabelle einfügen Erstellt eine Formulartabelle. Die Bedienung ist gleich wie bei der normalen Tabelle. Hier müssen Sie aber noch eine Mailadresse angeben, an die ein gesendetes Formular geschickt wird und je einen Artikel der bei erfolgreichem bzw. fehlerhaftem Senden das Formulars angezeigt wird. Ausserdem enthält das Formular oben und unten zwei Bilder die nicht gelöscht werden dürfen. Sie sind auf der Website nicht mehr sichtbar.
Dynpg separator.gif
Seperator einfügen Fügt einen Seperator ein. Mehr in Kapitel [#Seperator]
Dynpg guestbook.gif
Gästebuch einfügen Fügt ein Gästebuch ein. Im Editor wird nur ein Platzhalter angezeigt.

Bilder einfügen

Bei einem Klick auf das Bildsymbol (Image.gif) öffnet sich ein Fenster. Dort können Sie das Bild auswählen und weitere Einstellungen vornehmen. Um diese danach wieder zu ändern, klicken Sie in das Bild und drücken dann das Bildsymbol oder machen Sie einen Rechtsklick im Bild und wählen dann "Bildeigenschaften".

Registerkarte "Allgemein":

Registerkarteallgemein.png

Unter "Bild-URL" können Sie das einzufügende Bild auswählen. Klicken Sie dazu auf das Symbol rechts des Feldes. Nun erhalten Sie eine Liste aller in der Dateiverwaltung hochgeladenen Bilder, aus der Sie das gewünschte auswählen können.

"Bildbeschreibung" noch offen.

"Titel" noch offen.

Registerkarte "Erscheinungsbild":

Registerkarteerscheinungsbild.png

Unter "Ausrichtung" können Sie wählen, wie das Bild im Text positioniert werden soll. Sie sehen rechts direkt eine Vorschau.

Darunter können Sie die Grösse des Bildes angeben. Die erste Angabe steht für die Höhe, die zweite für die Breite. Ist das Häkchen bei "Verhältnis beibehalten" gesetzt, so müssen Sie nur eine dieser Grössen angeben, die zweite wir automatisch angepasst. Haben Sie bereits ein Bild ausgewählt, stehen in den Feldern die Grössen des Originalbildes. Bei Grössenänderungen müssen Sie aufpassen: Das Bild sollte grundsätzlich in der Grösse hochgeladen werden, in der es benötigt wird, da bei Vergrösserungen das Bild pixelig und bei Verkleinerungen das Bild trotzdem noch in der original Dateigrösse heruntergeladen wird.

Bei "Vertikaler Raum" und "Horizontaler Raum" können Sie den Abstand um das Bild festlegen. "Vertikaler Raum" sind die Abstände links und rechts, "Horizontaler Raum" oben und unten. Die Angaben erfolgen in Pixel.

Bei Bedarf können Sie unter "Rahmen" einen Rand um das Bild setzen.

Unter "CSS-Klasse" können Sie dem Bild eine vordefinierte Klasse Ihres CSS zuweisen.

"CSS-Stil" noch offen.

Registerkarte "Erweitert":

Registerkarteerweitert.png

Hier können Sie ein Alternativbild für den Event "Mouse-Over" und "Mouse-Out" festlegen. Das heisst, dass bei diesen Events das Bild durch das hier ausgewählte ersetzt wird. Mouse-Over ist die Situation, in der der Mauszeiger über dem Bild liegt. Mouse-Out ist der Moment, in dem man mit dem Mauszeiger aus dem Bild fährt. Setzen Sie beispielsweise beide Events: Mouse-Over ein anderes als das Hauptbild und Mouse-Out das gleiche wie das Hauptbild. Somit kann man mit dem Mauszeiger über das Bild fahren und solange man sich über dem Bild befindet wird das Bild von "Mouse-Over" angezeigt. Sobald man wieder herausfährt (Mouse-Out) wird wieder das Hauptbild angezeigt. Die Auswahl des Bildes erfolgt auch hier über die Bildliste der hochgeladenen Dateien.

Die Einstellungen unter "Sonstiges" sollten nur bei Kenntnis Ihrer Bedeutung geändert werden. Deshalb werden Sie hier auch nicht aufgeführt.

Um den Vorgang abzuschliessen drücken Sie schlussendlich "Einfügen" um das Bild einzufügen bzw. "Aktualisieren" um die Änderungen zu speichern.

Links erstellen

Markieren Sie die Textstelle, der Sie einen Link zuweisen wollen. Nun klicken Sie auf das Linksymbol (Link.gif) und ein Fenster öffnet sich. Dort müssen Sie die Link-URL angeben und können weitere Einstellungen vornehmen. Um diese danach wieder zu ändern, Klicken Sie in den Link (blaue Schrift/unterstrichen) und drücken dann das Linksymbol oder machen Sie einen Rechtsklick und wählen dann "Link einfügen/bearbeiten".

Registerkarte "Allgemein":

Registerkarteallgemein2.png

Unter "Link-URL" geben Sie die Adresse (z.B. www.dynpg.ch) oder die Seite (z.B news.php) an auf die verwiesen werden soll. Sie können auch auf ein Bild verweisen, um so beispielsweise ein Bild in der Grossansicht anzuzeigen. Dazu klicken Sie aus das Bilderliste-Symbol rechts des Feldes.

Bei "Anker" können Sie den Anker auswählen, auf den gesprungen werden soll. Mehr zu Anker finden Sie am Ende dieses Kapitels.

Bestimmen Sie unter "Ziel" in welchem Fenster (aktuelles Fenster, neues Fenster) die verlinkte Seite öffnen soll.

Darunter haben Sie die Möglichkeit einen Titel für den Link zu vergeben.

Unter "CSS-Klasse" können Sie dem Bild eine vordefinierte Klasse Ihres CSS zuweisen.

Registerkarte "Popup":

Registerkartepopup.png

Hier können Sie ein JavaScript-Popup erstellen. Damit wird bei Klick auf den Link ein Fenster mit speziellen Eigenschaften geöffnet. Geben Sie in unter "Popup-URL" die zu öffnende Seite an. Darunter können Sie einen Namen vergeben. Unter "Grösse" bestimmen Sie die Fenstergrösse des Popups. Die erste Grösse steht für die breite, die zweite für die höhe. Unter "Position (X/Y)" können Sie festlegen wie viele Pixel das Fenster vom linken (X) bzw. vom oberen (Y) Bildschirmrand entfernt sein soll. Geben Sie beide mal ein 'c' ein um es zentral auszurichten. Bei den "Optionen" können Sie dann noch weitere Einstellungen für das Fenster vornehmen und bestimmte Leisten ein oder ausblenden.

Registerkarten "JS-Events" und "Erweitert":

Die einzelnen Punkte werden hier nicht mehr aufgeführt, da diese Registerkarten nur für Fortgeschrittene geeignet sind.

Unter "JS-Events" können Sie Aktionen für die Eventhandler von JavaScript festlegen.

Unter "Erweitert" können Sie erweiterte Einstellungen für diesen Link vornehmen.

Um einen Link zu entfernen, markieren Sie die entsprechende Stelle und drücken auf die Schaltfläche "Link entfernen" (Unlink.gif).

Der "Anker":

Ein Anker ist eine benannte Stelle im Text, den Sie mit Hilfe eines normalen Links gezielt anspringen können. Dies ist beispielsweise sinnvoll, um bei längeren Texten zu den einzelnen Kapiteln springen zu können oder um vom Textende mit einem Klick wieder nach oben zu gelangen. Um einen Anker zu setzen, klicken Sie an der anzuspringenden Stelle (z.B. vor einem Kapitel / einem wichtigen Absatz /einem bestimmten Bild) das Ankersymbol (Anchor.gif) und geben anschliessend einen Namen ein. Danach erstellen Sie an der Stelle von der man zum Anker gelangen soll einen Link (Link.gif) und wählen unter "Anker" den zuvor benannten Ankers aus. Den Ankernamen können Sie ändern, indem Sie den Anker (Anchor symbol.gif) und danach das Ankersymbol klicken.

Tabellen

Um eine Tabelle einzufügen klicken Sie auf das Symbol "Tabelle einfügen" (Table.gif). Nun öffnet sich ein Fenster, in dem Sie Einstellungen für die Tabelle vornehmen können. Um diese im nachhinein zu Ändern drücken Sie erneut auf das Symbol, während Sie sich mit der Maus in der Tabelle befinden.

Registerkarte "Allgemein":

Registerkarteallgemein3.png

Geben Sie in der ersten Zeile die Anzahl Spalten und Zeilen für diese Tabelle an.

Unter "Zellenauffüllung" legen Sie den Innenabstand, mit "Zellenabstand" den Aussenabstand jeder Zelle fest.

Danach können Sie die Ausrichtung der Tabelle im Text wählen.

Bei Bedarf haben Sie die Möglichkeit einen Rahmen für die Tabelle zu ziehen. Setzten Sie den Wert auf "0" wenn Sie keinen Rahmen wünschen. Dann werden lediglich Hilfslinien angezeigt.

In der vierten Zeile können Sie die Breite und die Höhe der Tabelle festlegen. Wenn Sie keine Angaben machen, wird die Grösse automatisch angepasst.

Unter "CSS-Klasse" können Sie der Tabelle eine vordefinierte Klasse Ihres CSS zuweisen.

Drücken Sie den "Erstellen" bzw. "Aktualisieren" Button, um den Vorgang abzuschliessen.

Registerkarte "Erweitert":

Hier können Sie erweiterte Einstellungen machen. Es werden allerdings im folgenden nur noch die wichtigsten erläutert.

Registerkarteerweitert2.png

Unter "Hintergrundbild" haben Sie die Möglichkeit ein Bild im Hintergrund der Tabelle anzuzeigen. Klicken Sie dazu das Symbol rechts des Feldes und wählen dann das Bild aus der Liste der hochgeladenen Dateien.

Insofern Sie dies nicht mittels einer CSS-Klasse definieren, eine Rahmen- und eine Hintergrundfarbe festlegen. Drücken Sie dazu auf das Farbauswahlsymbol rechts des entsprechenden Feldes und wählen dann die gewünschte Farbe aus der Farbpalette.

Drücken Sie den "Erstellen" bzw. "Aktualisieren" Button, um den Vorgang abzuschliessen.

Seperator

Texte können an bestimmten Stellen unterbrochen werden, so dass ein Besucher der Website vorerst nur einen Teil des Textes sieht und dann entscheiden kann, ob er weiterlesen will. Dies geschieht mit einem Klick auf einen Link (z.B. "Gesamten Artikel lesen"). Der Text wird an der Stelle unterbrochen, an welcher der Seperator (Dynpg separator.gif) gesetzt wird. Es muss nicht immer sein, dass ein Text der einen Seperator enthält auch unterbrochen wird. Denn wann und wo der Seperator berücksichtigt wird, legt jene Person fest, welche die Webseiten auch erstellt.

Texte speichern

Um einen Text zu speichern, drücken Sie im unteren Bereich des Editor den Button "Erstellen". Wollen Sie den Text speichern und gleich einen Artikel mit diesem Inhalt erstellen, geben Sie im Drop-Down Menü die gewünschte Gruppe an und drücken Sie anschliessend den Button "Text und zugehörigen Artikel erstellen". Sie wechseln dann automatisch zur Artikelverwaltung, wo Sie noch weitere Einstellungen für diesen Artikel machen können und ihn anschliessend speichern. Mehr zu Gruppen und Artikel in Kapitel 3 und 4.

Texte verwalten

Unterhalb des Editors sind alle Texte aufgelistet. Sie können unter der Spalte "Aktionen" diverse Änderungen vornehmen:

Mit einem Klick auf den Kugelschreiber (Imgbtn edit.jpg) können Sie die Texte bearbeiten. Wollen Sie die vorgenommenen Änderungen speichern, drücken Sie auf "Ändern".

Das Doppel-Blatt (Doppelblatt.png) erstellt ein Duplikat, also eine Kopie des jeweiligen Textes.

Mit dem roten Kreuz (Imgbtn delete.jpg) können Sie einen Text löschen.

Ausserdem haben Sie über der Auflistung der Texte die Möglichkeit nach verschiedenen Kriterien bestimmte Texte zu suchen. Wählen Sie eine Gruppe in welcher der gesuchte Text enthalten ist (nach Gruppen...) oder suchen Sie nach einem bestimmten Suchwort (nach Text suchen). Dann können Sie noch angeben welche Seitenzahl und wie viele Suchergebnisse pro Seite angezeigt werden sollen. Danach drücken Sie auf "anzeigen" und die gefundenen Texte werden in der Liste ausgegeben.

Gruppen

Mit DynPG haben Sie 3 Hauptansichtsebenen, die Sie auf Ihrer Website integrieren können. Die höchste Ebene ist die Gruppen-Liste. Sie listet alle Untergruppen einer Gruppe als Links auf. Mit einem Klick auf eine dieser, gelangen Sie zur Artikel-Liste, die zweithöchste Ebene, wo alle Artikel aufgelistet werden. Klicken Sie auf einen der Artikel gelangen Sie zur dritten und tiefsten Ansichtsebene, der Detailansicht des Artikels. Dort wird der Artikel dann komplett mit Titel, Lead und Inhalt angezeigt. Allerdings können mit der integrierten Navigation unzählig viele Ebenen erstellt werden.

Um Gruppen und Untergruppen zu erstellen und verwalten, klicken Sie in der linken Navigation auf "Gruppen".

Gruppen erstellen

Gruppen verwalten.gif

Geben Sie im ersten Feld einen Gruppennamen ein. Sollte die Gruppe zu einer Untergruppe werden, so wählen sie unter "Hierarchie" eine Übergruppe. Danach können Sie unter "Kurztext" eine Beschreibung zu dieser Gruppe abgeben.

Bei Gruppeninhalt klicken Sie hinten auf das Icon und wählen den Artikel an, welcher direkt angezeigt werden soll, wenn man auf einen Navigationspunkt klickt. Wenn hier nichts eingegeben ist, erscheint eine Gruppen- oder Artikelliste.

Falls Sie ein Vorschaubild für diese Gruppe wünschen, wählen Sie dieses aus der Bilderliste, die Sie mit einem Klick auf das Symbol rechts neben dem Feld "Vorschaubild" öffnen. Das Bild erscheint dann in der Ansicht der Gruppen-Liste auf Ihrer Website. Darunter haben Sie die Möglichkeit das Bild auszurichten, ausgegangen von der Anzeige des Gruppennamen.

Bei "Veröffentlichen" bestimmen Sie, wie und ob der Gruppenname bzw. die Untergruppen in der volldynamischen Navigation angezeigt werden soll.

  • Status "Ja" – Die Gruppe wird mit Untergruppen angezeigt
  • Status "Nein" – Die Gruppe wird überhaupt nicht angezeigt
  • Status "Ja ohne Navigation" – Die Gruppe wird zwar angezeigt, ist aber über die Navigation nicht erreichbar.
  • Status "Ja ohne Subnavigation" – Die Gruppe wird in der Navigation angezeigt, die zugehörigen Untergruppen werden nicht angezeigt.

Wenn Sie das Häkchen unter "Besucher anzeigen" setzen, werden in der Gruppen-Liste die Anzahl Klicks auf diese Gruppe in eckigen Klammern angezeigt.

Mit dem Sortierindex bestimmen Sie die Reihenfolge der einzelnen Gruppen bzw. Navigationspunkt. Ein Navigationspunkt mit z.B. der ID 10 kommt vor derjenigen mit der ID 11 oder höher. Wenn kein Sortierindex eingegeben ist, wird nach dem Alphabet eingereiht.

Um den Vorgang abzuschliessen, klicken Sie nun auf den Button "Erstellen".

Gruppen verwalten

Unterhalb des Bereichs um Gruppen zu erstellen, sind alle Gruppen und Untergruppen aufgelistet. Sie können unter der Spalte "Aktionen" diverse Änderungen vornehmen:

Mit einem Klick auf den Kugelschreiber (Imgbtn edit.jpg) können Sie die Gruppe bearbeiten. Wollen Sie die vorgenommenen Änderungen speichern, drücken Sie auf "Ändern".

Mit dem roten Kreuz (Imgbtn delete.jpg) können Sie eine Gruppe löschen. Dabei werden aber auch die Inhalte, also alle Artikel (nicht aber deren Texte) gelöscht. Um den Vorgang abzuschliessen, bestätigen Sie das Löschen mit einem Klick auf "Ja".

Sie haben auch die Möglichkeit, ganze Gruppen (Verzeichnisse) mit Untergruppen (Unterverzeichnissen) zu duplizieren (Doppelblatt.png). Wenn Sie also auf dieses Icon klicken gelangen Sie zum Dialog "Gruppe duplizieren", wo Sie noch diverse selbsterklärende Einstellungen vornehmen können. Erst mit einem Klick auf "Duplizieren" wird die Gruppe auch wirklich kopiert bzw. neu estellt.

Gruppen verwalten2.png

Artikel

Hier werden die Artikel erstellt, die auf Ihrer Website in der Detailansicht oder der Artikel-Liste angezeigt werden. Um einen Artikel zu erzeugen, muss mindestens eine Gruppe bestehen. Klicken Sie auf die Gruppe, in der Sie einen Artikel erstellen möchten. Nun gelangen Sie zum Artikelmenü, wo Sie neue Artikel erstellen und diese verwalten können. Klicken Sie als erstes auf das "+" vor "Artikel Formular anzeigen".

Artikel formular anzeigen.png

Artikel erstellen

Nun ist der Dialog zum Erstellen eines Artikels geöffnet. Wenn Sie sich gleich in der richtigen Gruppe befinden, dürfen Sie das Dropdown "Gruppen" vergessen. Andernfalls müssen Sie hier noch einmal bestimmen, wohin der Artikel in der Hierarchie bzw. in der Web-Site-Struktur zu liegen kommt. Danach geben Sie einen aussagekräftigen Titel ein. Wenn Sie bei Lead wiederum auf das "+" klicken, wird der Editor aufgeklappt und Sie können – je nach Vorgabe Ihres Webdesigners – jeglichen Inhalt einfügen.

Sollten Sie bereits einen vorhandenen Artikeltext haben, wählen Sie diesen bei "Inhalt des Artikels" mit dem Icon rechts (Lampe.png) aus. Nun öffnet sich ein Fenster indem die Texte aufgelistet sind. Wählen Sie den gewünschten Text aus mit einem Klick.

Artikel erstellen.png

Wenn Sie noch keinen Inhalt haben, klicken Sie wiederum auf das "+" bei Inhalt bearbeiten, damit sich der Texteditor öffnet.

Unter "Limitieren" haben Sie die Möglichkeit den Artikel zeitlich zu begrenzen, d.h. Sie können angeben von wann bis wann der Artikel publiziert werden soll. Geben Sie einfach unter "vom" Datum und Zeit ein, ab der der Artikel angezeigt werden soll und unter "bis" wann dieser wieder unsichtbar sein soll. Lassen Sie das Feld unverändert um die Limitierung zu deaktivieren. Alternativ können Sie unter "Zeitpunkt fixieren" Datum und Zeit festlegen, ab der der Artikel angezeigt werden soll.

Auch hier können Sie unter "Leadbild" ein Bild wählen, das in der Ansicht der Artikel-Liste erscheinen soll. Direkt darunter können Sie dieses Ausrichten. Dies Option wird aber auf der Web-Site nur angezeigt, wenn sie auch eingebaut ist. Fragen Sie den Verantwortlichen für Ihre Web-Site.

Setzten Sie das Häkchen bei "Veröffentlichen", wenn der Artikel publiziert werden soll. Ist keines gesetzt, so ist er für Besucher der Website nicht sichtbar. Danach können Sie bestimmen, ob der Artikel auf der Home-Seite angezeigt werden soll. Wollen Sie in der Artikel-Liste Ansicht die Anzahl Klicks auf diesen Artikel sichtbar machen, setzen Sie das Häkchen unter "Besucher anzeigen". Darunter können Sie noch das Erstelldatum sichtbar machen.

Zuletzt können Sie unter "Suchindizes" Wörter eingeben, mit denen der Besucher den Artikel in einer allfälligen Suche finden kann. Diese dient ebenso zum Generieren der Schlüsselwörter auf einer Seite. Trennen Sie die Wörter jeweils mit einem Leerzeichen.

Klicken Sie nun auf den Button "Erstellen" um den Vorgang abzuschliessen.

Artikel duplizieren

Wenn Sie aber möchten, dass ein Artikel gleich an mehreren Seiten Ihrer Web-Site angezeigt werden soll, klicken Sie wiederum auf das "+", womit sich das Fenster zum Duplizieren öffnet. Hier wählen Sie nun den Ort aus, wo der duplizierte Artikel erscheinen soll. Wenn Sie nun möchten, dass der Artikel mit dem Artikeltext dupliziert wird, wählen Sie dies ganz unten in diesem Fenster aus. Anschliessend wird mit dem Erstellen gleich ein neuer am entsprechenden Ort erstellt. Sie müssen dann zu diesem neuen Artikel wechseln, damit Sie den Artikel-Inhalt und allenfalls auch anderes noch ändern können.

Artikel duplizieren.png

Wenn Sie von Beginn weg einen Artikel haben, welchen Sie duplizieren möchten, klicken Sie beim bestehenden Artikel auf den Kugelschreiber (Imgbtn edit.jpg) und gehen Sie dann zum Feld "Duplizieren". Klicken Sie die entsprechenden Optionsfelder an und schliessen Sie den Vorgang mit "Ändern" ab. Nun gehen Sie zum duplizierten Artikel und ädern diesen ebenfalls wieder mit dem Symbol des Kugelschreibers (Imgbtn edit.jpg).

Artikel verwalten

Unterhalb des Bereichs um Artikel zu erstellen, sind alle Artikel aufgelistet. Sie können unter der Spalte "Aktionen" diverse Änderungen vornehmen:

Um den Inhalt eines Artikels anzusehen, klicken Sie auf das "Öffnen"-Symbol(Open symbol.png).

Das Doppel-Blatt (Doppelblatt.png) erstellt ein Duplikat, also eine Kopie des jeweiligen Artikels. Beachten Sie aber, dass nur der Artikel dupliziert wird, der Inhalt jedoch nicht! Sie haben also dann allenfalls mehrere Artikel, welche aber denselben Inhalt verwenden.

Mit einem Klick auf den Kugelschreiber (Imgbtn edit.jpg) können Sie den Artikel bearbeiten. Wollen Sie die vorgenommenen Änderungen speichern, drücken Sie auf "Ändern".

Mit dem roten Kreuz (Imgbtn delete.jpg) können Sie einen Artikel löschen. Nun werden Sie gefragt ob Sie nur den Artikel löschen wollen, oder den Artikel samt Inhalt. Wählen Sie "Ja" für ersteres oder "Ja, mit Inhalt" für letzteres.

Den Besucherzähler können Sie auf null zurücksetzen, indem Sie das Counter-symbol.png-Symbol anklicken.

Formulare erstellen in DynPG

Bevor Sie beginnen ein Formular zu erstellen, ist es empfehlenswert, zuerst die Artikel, welche bei erfolgreichem bzw. bei erfolglosem Versenden des Formulars angezeigt werden zu erstellen.

Formulartabelle einfügen/bearbeiten

Um ein Formular zu erstellen, wählen Sie die Schaltfläche "Formulartabelle einfügen/bearbeiten" (Formtable.gif). Nun öffnet sich ein Pop-Up-Fenster, in dem Sie weitere Angaben machen müssen.

  • Formularname
Hier müssen Sie einen Namen für das Formular angeben. Dieser ist dann in der Betreffzeile der E-Mail zu lesen.
  • Formulardaten an folgende E-Mailadresse senden
Geben Sie hier die E-Mailadresse ein, an welche die Formulardaten gesendet werden sollen.
  • Senden war erfolgreich
Hier müssen Sie den Artikel auswählen, der angezeigt werden soll, wenn das Formular erfolgreich gesendet wurde.
  • Senden ergab Fehler
Hier müssen Sie den Artikel auswählen, der angezeigt werden soll, wenn das Senden des Formulars einen Fehler ergab. Mögliche Ursachen für den Aufruf dieses Artikels:
  • Der Kunde hat ein Feld, das als "Zwingend" (siehe Formularelemente) markiert ist, nicht ausgefüllt.
  • Der Kunde hat ein Feld, das als „E-Mail“ (siehe Formularelemente) markiert ist mit ungültigen Angaben bzw. gar nicht ausgefüllt.
  • Der Kunde hat das Formular bei diesem Besuch bereits gesendet.

Danach können Sie noch Angaben zur Gestaltung der Tabelle des Formulars machen. Diese wird gleich angewendet, wie die normale Tabelle.

Um die Daten zu bearbeiten, klicken Sie mit der Maus in die zu bearbeitende Tabelle. Nun wählen Sie die Schaltfläche „Formulartabelle einfügen/bearbeiten“ und das Pop-Up zum bearbeiten öffnet sich. Um die geänderten Daten zu übernehmen, drücken Sie den Aktualisieren-Button.

Formularelement einfügen

Um Formularelemente einzufügen, klicken Sie mit der Maus in die zuvor eingefügte Formulartabelle. Wählen Sie nun die Schaltfläche „Formularelement einfügen“ (Formular.gif). Nun öffnet sich ein Pop-Up Fenster, in dem die verschiedenen Formularelemente aufgelistet werden. Hier eine kurze Erläuterung:

  • Text Box
Ist ein einzeiliges Eingabefeld. Eignet sich besonders für einzelne Wörter wie z.B. Namen, Adresse usw.
Weitere Angaben:
  • Feldnamen: Hier müssen Sie einen Namen für dieses Element angeben. Diesen Namen sehen Sie dann auch in der E-Mail eines gesendeten Formulars. Z.B. Feldname: Name --> ergibt in der E-Mail: Name:………………Hans Muster (eingegebener Name)
  • Value: Hier können Sie einen Text definieren, der dann bereits in der Text Box steht. Im Bild wäre der Valuewert „Text Box“.
  • Grösse: Hier können Sie die grösse der Text Box angeben. Standartwert ist 20.
  • Max. Länge: Hier können Sie die maximale Anzahl Zeichen, die eingegeben werden dürfen, angeben. Z.B. eine Postleitzahl darf höchstens 4 Zeichen haben, also setzen Sie den Wert auf 4.
  • Weiteres: Hier können Sie noch spezielle Optionen für diese Text Box wählen. „Zwingend“ heisst, das Feld muss ausgefüllt werden, ansonsten wird die Fehlerseite aufgerufen. „E-Mail“ heisst, dass dieses Feld eine E-Mailadresse enthalten muss. Das Feld wird beim senden des Formulars geprüft. Die Formulardaten werden dann als Bestätigung auch an diese Adresse gesendet.
  • Passwort Box
Ist gleich wie die Text Box, ausser dass die Eingabe mit Sternchen (*) ausgefüllt wird (in der E-Mail ist der Text jedoch in den eingetippten Buchstaben zu lesen).
Weitere Angaben: Wie Textbox, jedoch statt Weiteres:
  • Zwingend: Ist diese Box ausgewählt, muss dieses Feld asgefüllt werden, ansonsten wird die Fehlerseite aufgerufen.
  • Text Area
Ist ein mehrzeiliges Eingabefeld. Eignet sich besonders für längere Texte wie z.B. Mitteilungen, Wünsche usw.
Weitere Angaben:
  • Feldnamen: Hier müssen Sie einen Namen für dieses Element angeben. Diesen Namen sehen Sie dann auch in der EMail eines gesendeten Formulars. Z.B. Feldname: Mitteilung --> ergibt in der E-Mail: Mitteilung:………………Danke! Ich war sehr zufrieden.
  • Text: Hier können Sie einen Text definieren, der dann bereits im Textarea steht. Im Bild wäre der Textwert „Textarea…“.
  • Zeilen: Hier können Sie die Anzahl Zeilen des Text Areas angeben. Standartwert ist 3.
  • Breite: Hier können Sie die Anzahl Zeichen pro Zeile angeben. Standartwert ist 15.
  • Zwingend: Ist diese Box ausgewählt, muss dieses Feld ausgefüllt werden, ansonsten wird die Fehlerseite aufgerufen.
  • Radio Button
Hier können Sie eine Liste von Auswahlmöglichkeiten erstellen. Es kann jedoch nur eine der Optionen ausgewählt werden.
Weitere Angaben 1:
  • Feldnamen: Hier müssen Sie einen Namen für dieses Element angeben. Diesen Namen sehen Sie dann auch in der E-Mail eines gesendeten Formulars.
  • Optionen: Geben Sie hier die Anzahl der Wahlmöglichkeiten an und drücken Sie danach auf „Weiter“.
Weitere Angaben 2:
  • Option X: Geben Sie hier nun die Beschriftung der einzelnen Auswahlmöglichkeiten an. Dahinter können Sie die Option bereits vorselektieren. Ist die Box „Nebeneinander“ (bei Radio Button und bei Check Box) ausgewählt, so stehen die verschiedenen Optionen Nebeneinander.
  • Check-Box
Ist ähnlich wie Radio Button. Hier kann man jedoch mehrere Optionen auswählen.
Weitere Angaben:
  • Siehe unter „Radio Button - Weitere Angaben“
  • List Box
Ist gleich wie Radio Button, ausser dass die Auswahlmöglichkeiten in einem Drop-Down Menü stehen.
Weitere Angaben:
  • Siehe unter „Radio Button - Weitere Angaben“
  • Submit Button
Erstellt einen Button, der gedrückt werden muss, um das Formular zu versenden. Das Formular muss also einen Submit-Button enthalten, damit es versendet werden kann.
Weitere Angaben:
  • Beschriftung: Hier können Sie die Beschriftung des Submit Button festlegen. Sinnvoll ist der Wert „Senden“.
  • Reset Button
Erstellt einen Button, der gedrückt werden kann, um bereits ausgefüllte Formularelemente zurückzusetzen.
Weitere Angaben:
  • Beschriftung: Hier können Sie die Beschriftung des Button festlegen. Sinnvoll ist der Wert „Reset“.

Editieren von Feldern

Wenn Sie ein Feld editieren möchten, markieren Sie dieses und klicken auf die entsprechende Schaltfläche (Formular.gif).

Sonstiges

  • Achtung: Beim Einfügen einer Formulartabelle wird oben und unten je eine automatische Zeile mit dem Bild Formular top.jpg erstellt. Um Probleme zu vermeiden ändern oder löschen Sie diese Zeile nicht; sie soll Ihnen den Bereich anzeigen, in dem Sie Formularelemente platzieren können.
  • Beim Einfügen eines Feldes "Textareas" wird nur ein Bild angezeigt. Dieses kann von den getätigten Angaben abweichen. Auf der Webseite wird es jedoch anschliessend korrekt dargestellt.
  • Bei der Benutzung des Browsers Firefox kann es zu Problemen beim löschen einzelner Formularelemente kommen. Sollte dies geschehen verwenden Sie den Internet Explorer.

Diese Informationen als PDF

Diesen Artikel finden sie auch als Oberflaeche.pdf, diese Datei wird jedoch möglicherweise nicht mehr aktualisiert und ist damit nicht so aktuell wie dieser Artikel.