How To

Erstelle eine "normale", statische HTML5-Webseite.

  • alle .html-Dateien müssen sich in einem Verzeichnis befinden (nicht in Unterordnern)
  • benutze den HTML5-Doctype <!doctype html> und den UTF-8-Zeichensatz

Lege die editierbaren Bereiche fest.

Einen Bereich editierbar zu machen ist ganz einfach:

Ergänze deinen Code im gewünschten <div>Tag einfach um die Klasse "editable".
Aus <div class="content"> wird <div class="content editable">.
Aus <section> wird <section class="editable">.

Neben Bereichen können außerdem Headlines und Absätze editierbar gemacht werden.
Also z.B. <h1 class="editable_line"> oder <p class="editable_line">

Um ein Bild austauschbar zu machen, ergänze im <img>-Tag einfach class="editable_image"
Aus <img src="image.jpg"> wird <img src="image.jpg" class="editable_image">.
Im Backend können Bilder so einfach per drag&drop ausgetauscht werden. Bilder werden automatisch hochgeladen, auf die richtige Größe skaliert und ggf. zugeschnitten. Zur Zeit werden JPGs, PNGs, GIFs und PDFs unterstützt!

Installiere Coast CMS auf deinem Webserver.

  • CoastCMS.zip herunterladen & entpacken
  • die Datei "_settings.php" öffnen
  • Benutzername & Passwort ändern
  • die Datei "_settings.php" in "settings.php" (ohne Unterstrich) umbenennen
  • die Ordner "cms", "uploads", "backups" und die Datei "cms.php" per FTP auf deinen Webserver übertragen
  • img FTP-Programm die Rechte der Ordner "uploads" und "backups" und aller .html-Dateien auf 0777 ändern
  • Fertig.

Einloggen.

  • "www.deine-url.de/cms" aufrufen und anmelden.

Testen!

Coast CMS ist noch im Beta-Stadium und konnte noch nicht unter allen denkbaren Gegebenheiten getestet werden. Hier und da ist es also durchaus möglich, das etwas nicht funktioniert.

Erweiterte Funktionen

Neben den unter "How To" beschriebenen Basis-Funktionen, bietet Coast CMS auch noch erweiterte Funktionen. Diese sind nicht ganz so einfach zu implementieren, wie die Basis-Funktionen, werden aber in vielen Fällen auch gar nicht gebraucht.

Wiederkehrende Inhaltsbereiche

Ein "wiederkehrender Inhaltsbereich" kann z.B. eine Newsmeldung im Newsbereich sein. Also eine wiederkehrende Abfolge einzeler Elemente. Z.B. Headline, Fließtext & Bild.

Um einen "wiederkehrenden Inhaltsbereich" zu definieren, speichere den Quelltext des Bereichs in einer HTML-Datei z.B. im Ordner "cse" und nenne sie z.B. "news_section.html".

So könnte die Datei z.B. aussehen:

<div class="news_section">

<div class="news_text">
<h2 class="editable_line">Headline</h2>
<p class="editable_line">Text</p>
</div>

<div class="news_img">
<img src="img/spacer-lightgrey.jpg" width="120" height="120" class="editable_image">
</div>

<div class="clearer"></div>
</div>

Lege anschließend fest, an welcher Stelle auf deiner Webseite dieser Bereich erscheinen soll. Definiere hierzu ein umschließendes div und ergänze folgende Angaben:

<div class="content_section_wrap" data-cs-src="cse/news_section.html" data-cs-title="Newsmeldung hinzufügen" data-cs-pos="top">
...
</div>

Mit class="content_section_wrap" legst du fest, dass innerhalb dieses divs wiederkehrende Inhaltsbereiche platziert werden dürfen.

Mit data-cs-src="news_section.html" legst du die Quelle des einzelnen Inhaltsbereiches fest.

Mit data-cs-title="Newsmeldung hinzufügen" bestimmst du die Beschriftung des Buttons, mit dem man einen neuen Inhaltsbereich hinzufügen kann.

Und mit data-cs-pos="top" bestimmst du ob folgende Inhaltsbereiche oben, unten (data-cs-pos="bottom") oder an beliebiger Stelle (data-cs-pos="any") eingefügt werden sollen. Mit data-cs-pos="draggable" können Inhaltsbereiche jederzeit per drag&drop verschoben werden.

Wenn bereits editierbare Inhaltsbereiche auf der Website zu sehen sein sollen, müssen Sie von folgendem Code umgeben sein:

<div class="content_section_item">...</div>

Wie das Ganze umgesetzt aussieht, kannst Du Dir hier in der Demo anschauen: Demo.

Bildergalerie

Auf die gleiche Art und Weise lässt sich auch eine editierbare Bildergalerie erstellen. Hierzu brauchst du eine Datei mit z.B. folgendem Inhalt:

<img src="img/spacer-lightgrey.jpg" width="120" height="120" class="editable_image" data-type="thumb_and_big_image">

Die Datei speicherst du im Verzeichnis "cse" z.B. unter dem Namen "gallery_img.html". Lege anschließend fest, an welcher Stelle auf deiner Webseite die Galerie erscheinen soll. Definiere hierzu ein umschließendes div und ergänze folgende Angaben:

<div class="gallery_wrap content_section_wrap" data-cs-src="cse/gallery_img.html" data-cs-title="Bild hinzufügen" data-cs-pos="top">
</div>

Fertig.

Wie das Ganze umgesetzt aussieht, kannst Du Dir hier in der Demo anschauen: Demo.

Impressum Datenschutz