ConPresso How To - Wie man eine Websiete mit ConPresso erstellt :: ConPresso Content Management und Module

News

mod_menu goes PHP 7.3 (07.01.2019)
Das Menü-Modul wurde für PHP 7.3 fit gemacht
mod_track - File Injection Detection (03.01.2019)
mod_track jetzt für PHP 7.2 mit Update-Link im Mail
Wie man ein Modul updatet (18.12.2018)
Einfach nur Dateien hochladen ist meist zu wenig
mod_maintenance (21.03.2015)
Neue Version 4.1 mit direkter Erstellung einer Wartungsseite
mod_gallery wird 10 Jahre alt (23.01.2014)
Daher gibt es eine neue Version 4.3b
mod_database 4.1b (18.01.2014)
aktualisiert auf Adminer 4.0.2
mod_newsletter 4.3e (03.01.2014)
eine komplett überarbeitete und durchgetestete Version. Ein Update wird dringend empfohlen!
mod_backup 4.1a (22.10.2013)
Set it and forget it - Der Retter im Hintergrund.
Kennzeichnungspflicht (22.10.2013)
Die früher erforderliche Kennzeichnung mit dem ratsnappers-Logo per eingebundenem Code entfällt.
mod_gallery 4.3a (20.09.2013)
Bei Einsatz unter CPO 4.1.6 können bei bestimmten Arbeitsabfolgen Probleme mit der Bildumrechnung auftreten. Dieses Upgrade von 4.3 auf 4.3a löst diese Probleme

Service-Links

Die Seite befindet sich gerade in einer Umstrukturierungsphase. Daher sind einige Funktionen nicht erreichbar. Bei Bedarf nehmen Sie einfach Kontakt mit uns auf.

Schnell mal eine Homepage mit ConPresso!

Weil es immer, immer und immer wieder gefragt wird, obwohl es im Handbuch beschrieben ist:

Wie setzt man ein vorh. Layout in eine ConPresso-Webseite um?

Ich benutze jetzt mal ein template von
http://www.on-mouseover.de/templates/
und zwar dieses
http://www.on-mouseover.de/templates/hp13/index.html
von dieser Seite
http://www.on-mouseover.de/templates/templates_09_16.html

Der Quellcode sieht so aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="robots" content="INDEX,FOLLOW"> <meta name="keywords" content="homepage,dokument,webpage,page,web,netz,homepage dokument webpage page web netz"> <meta name="description" content="homepage, dokument, webpage, page, web, netz" > <title>homepage, dokument, webpage, page, web, netz, homepage dokument webpage page web netz</title>    <link rel="stylesheet" href="format.css" type="text/css"> </head> <body > <table width="88%" align="center" cellspacing="0" cellpadding="0" border="0" > <tr> <td align="right" class="li" ><img src="images/pixelspace.gif" width="18" height="1" border="0" alt=""></td><td > <table align="center" width="100%" cellspacing="0" cellpadding="0" border="0" > <tr> <td valign="top" id="hpname">~ Just Natural ~</td> </tr> <tr> <td class="buleiste" > <table id="menu2" border="0" cellpadding="0" cellspacing="0" > <tr> <td ><a href="index.html" onfocus="this.blur()">Kontakt</a></td><td ><img src="images/line_menu.jpg" width="1" height="36" border="0" alt=""></td> <td ><a href="index.html" onfocus="this.blur()">Home</a></td><td ><img src="images/line_menu.jpg" width="1" height="36" border="0" alt=""></td> <td ><a href="index.html" onfocus="this.blur()">Preise</a></td><td ><img src="images/line_menu.jpg" width="1" height="36" border="0" alt=""></td> <td ><a href="index.html" onfocus="this.blur()">Impressum</a></td><td ><img src="images/line_menu.jpg" width="1" height="36" border="0" alt=""></td> <td ><a href="index.html" onfocus="this.blur()">Gaestebuch</a></td><td ><img src="images/line_menu.jpg" width="1" height="36" border="0" alt=""></td> </tr> </table>  </td> </tr> </table>  <table align="center" width="100%" border="0" cellpadding="0" cellspacing="0" > <tr> <td rowspan="2" id="nav" > <div id="menu01"> <ul > <li><a href="index.html" onfocus="this.blur()">Anfahrt</a></li> <li><a href="index.html" onfocus="this.blur()">Kontakt</a></li> <li><a href="index.html" onfocus="this.blur()">Email</a></li> <li><a href="index.html" onfocus="this.blur()">Gästebuch</a></li> <li><a href="index.html" onfocus="this.blur()">Preise</a></li> <li><a href="index.html" onfocus="this.blur()">Angebote</a></li> <li><a href="index.html" onfocus="this.blur()">Impressum</a></li> <li><a href="index.html" onfocus="this.blur()">Weitere Links</a></li> <li><a href="index.html" onfocus="this.blur()">So finden Sie uns</a></li> <li><a href="index.html" onfocus="this.blur()">Weitere Links</a></li> <li><a href="index.html" onfocus="this.blur()">Weitere Links</a></li> <li><a href="index.html" onfocus="this.blur()">Weitere Links</a></li> </ul> </div>  <div class="trenn2"> </div> <div class="box1">Ich bin eine Inhaltsbox.<br> Hier Platz für weiteren Inhalt z.b. Text oder Grafiken.<br> Diese Boxen erweitern sich nach unten bei mehr Inhalt automatisch.<br> <br> <br> <br> <br> <br> </div> <div class="box2">Ich bin eine zweite Inhaltsbox.<br> Das Layout der Boxen für zb. Schriftart, Schriftgrösse, Schriftstil, Schriftfarbe oder Zeilenabstand sowie Rahmenfarbe, Hintergrundfarbe, Randabstand o.ä. kann in der Datei format.css (dort bei ".box") angepasst werden.</div>  </td> <td width="100%" id="top" > </td> </tr> <tr> <td valign="top" id="sp2"> <h2>das layout.</h2> Dieses Layout heisst: <span style="letter-spacing:2px;font-family:tahoma;">"Just Natural" </span>. Die Boxen 1 und 2 unterhalb des Menüs auf der linken Seite könnten Sie für kleineren Inhalt wie Bilder, Text, Links o.ä. nutzen, sie verlängern sich nach unten automatisch. Wenn nicht benötigt, so lassen sich diese Boxen auch leicht entfernen. Dazu brauchen Sie einfach nur die <i>"div-Bereiche"</i> im Quelltext zu löschen. Fortgeschrittene könnten auch weitere Boxen hinzufügen, also darunter kopieren. <br> <br> <br> <h2>die technik.</h2> Seite ohne Frames.<br> <br> Wie üblich mit ausgelagerter CSS-Datei. Platz für <a href="#">Fusszeile</a> unten sowie oben der <a href="#">Homepagename</a> (oben bei "Just Natural") als einfacher Text einzutragen. <i>Anlegen von Links bzw. HTML-Seiten</i> wie folgt: Die Datei Startdatei "index.html" ist zu kopieren und jeweils unter einem neuen Namen abzuspeichern. <br> <br> <br> <h2>die navigation.</h2> Textlinks. Erweiterbar. <br> Die Beispiel-Textlinks sind durch Ihre Links zu ersetzen. <br> <br> <ol start="1" type="1"> <li><i>Menü links</i>: Beliebig viele Links.</li> <li><i>Menü oben</i>: Erweiterbar um einige Links. Die Buttons verbreitern sich automatisch bei längeren Linkwörtern bzw. verkleinern sich bei kürzeren Linkwörtern.</li> <li><i>Allgemeine Links</i>: So sehen die allgemeinen Links (Links im Text) zur Zeit aus: <a href="#" >Beispiel-Link</a></li> </ol> <br> <br> <h2>die boxen:</h2> <p>Die Inhalts-Boxen in der linken Spalte sind durch Kopieren auch leicht erweiterbar - bzw. auch leicht zu löschen ohne das sich das Grundlayout ändert.<br> Eine Box erkennen Sie im HTML-Code immer daran: <br> <br> <div class="box">...Inhalt...</div> </td> </tr> <tr> <td colspan="2" id="fussb" width="100%"> Mike Muster GmbH <br> <i>Greatest Product Line In Design</i><br> ~ www.ihre-webseiten-url.de ~</td> </tr> </table> <td class="re"><img src="images/pixelspace.gif" width="18" height="1" border="0" alt=""</td> </tr> </table> </body> </html>

Schritt 1

Das Layout zeichnet sich durch Navigation, Inhaltsbereich sowie zwei Inhaltsboxen aus.
Die obere Navigation ist fix (begrenzt erweiterbar), die seitliche Navigation beliebig erweiterbar.

Das ganze ist nun auf global_header und global_footer zu verteilen.

Alles bis Zeile 112 kommt in _cfg/global_header.php <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="robots" content="INDEX,FOLLOW"> <meta name="keywords" content="homepage,dokument,webpage,page,web,netz,homepage dokument webpage page web netz"> <meta name="description" content="homepage, dokument, webpage, page, web, netz" > <title>homepage, dokument, webpage, page, web, netz, homepage dokument webpage page web netz</title>    <link rel="stylesheet" href="format.css" type="text/css"> </head> <body > <table width="88%" align="center" cellspacing="0" cellpadding="0" border="0" > <tr> <td align="right" class="li" ><img src="images/pixelspace.gif" width="18" height="1" border="0" alt=""></td><td > <table align="center" width="100%" cellspacing="0" cellpadding="0" border="0" > <tr> <td valign="top" id="hpname">~ Just Natural ~</td> </tr> <tr> <td class="buleiste" > <table id="menu2" border="0" cellpadding="0" cellspacing="0" > <tr> <td ><a href="index.html" onfocus="this.blur()">Kontakt</a></td><td ><img src="images/line_menu.jpg" width="1" height="36" border="0" alt=""></td> <td ><a href="index.html" onfocus="this.blur()">Home</a></td><td ><img src="images/line_menu.jpg" width="1" height="36" border="0" alt=""></td> <td ><a href="index.html" onfocus="this.blur()">Preise</a></td><td ><img src="images/line_menu.jpg" width="1" height="36" border="0" alt=""></td> <td ><a href="index.html" onfocus="this.blur()">Impressum</a></td><td ><img src="images/line_menu.jpg" width="1" height="36" border="0" alt=""></td> <td ><a href="index.html" onfocus="this.blur()">Gaestebuch</a></td><td ><img src="images/line_menu.jpg" width="1" height="36" border="0" alt=""></td> </tr> </table>  </td> </tr> </table>  <table align="center" width="100%" border="0" cellpadding="0" cellspacing="0" > <tr> <td rowspan="2" id="nav" > <div id="menu01"> <ul > <li><a href="index.html" onfocus="this.blur()">Anfahrt</a></li> <li><a href="index.html" onfocus="this.blur()">Kontakt</a></li> <li><a href="index.html" onfocus="this.blur()">Email</a></li> <li><a href="index.html" onfocus="this.blur()">Gästebuch</a></li> <li><a href="index.html" onfocus="this.blur()">Preise</a></li> <li><a href="index.html" onfocus="this.blur()">Angebote</a></li> <li><a href="index.html" onfocus="this.blur()">Impressum</a></li> <li><a href="index.html" onfocus="this.blur()">Weitere Links</a></li> <li><a href="index.html" onfocus="this.blur()">So finden Sie uns</a></li> <li><a href="index.html" onfocus="this.blur()">Weitere Links</a></li> <li><a href="index.html" onfocus="this.blur()">Weitere Links</a></li> <li><a href="index.html" onfocus="this.blur()">Weitere Links</a></li> </ul> </div>  <div class="trenn2"> </div> <div class="box1">Ich bin eine Inhaltsbox.<br> Hier Platz für weiteren Inhalt z.b. Text oder Grafiken.<br> Diese Boxen erweitern sich nach unten bei mehr Inhalt automatisch.<br> <br> <br> <br> <br> <br> </div> <div class="box2">Ich bin eine zweite Inhaltsbox.<br> Das Layout der Boxen für zb. Schriftart, Schriftgrösse, Schriftstil, Schriftfarbe oder Zeilenabstand sowie Rahmenfarbe, Hintergrundfarbe, Randabstand o.ä. kann in der Datei format.css (dort bei ".box") angepasst werden.</div>  </td> <td width="100%" id="top" > </td> </tr> <tr> <td valign="top" id="sp2">

alles ab Zeile 166 kommt in _cfg/global_footer.php </td> </tr> <tr> <td colspan="2" id="fussb" width="100%"> Mike Muster GmbH <br> <i>Greatest Product Line In Design</i><br> ~ www.ihre-webseiten-url.de ~</td> </tr> </table> <td class="re"><img src="images/pixelspace.gif" width="18" height="1" border="0" alt=""</td> </tr> </table> </body> </html>

Schritt 2

Der Inhalt benötigt jetzt ein Template:

Nennen wir es mal "grünes Template" und packen in den index-Teil (Rubrik-Seite):

Detail (Artikel-Seite) und JS/PHP-Teil lassen wir erst mal außen vor.

Schritt 3

Jetzt sind da noch die zwei Inhaltsboxen, die man natürlich fest codiert lassen könnte, aber sowas schreit ja förmlich nach dem Inhalt einer CMS-Rubrik.

Also legen wir zwei Stück in ConPresso an, nennen wir sie mal "News1" und "News2" und nehmen wir mal an, daß sie die Nummern 10 und 11 tragen.

Dieser Code der Vorlage soll nun in diesen Teil des Headers

<div class="box1">Ich bin eine Inhaltsbox.<br> Hier Platz für weiteren Inhalt z.b. Text oder Grafiken.<br> Diese Boxen erweitern sich nach unten bei mehr Inhalt automatisch.<br> <br> <br> <br> <br> <br> </div> <div class="box2">Ich bin eine zweite Inhaltsbox.<br> Das Layout der Boxen für zb. Schriftart, Schriftgrösse, Schriftstil, Schriftfarbe oder Zeilenabstand sowie Rahmenfarbe, Hintergrundfarbe, Randabstand o.ä. kann in der Datei format.css (dort bei ".box") angepasst werden.</div>

Dazu kann man ein http-include (wenn auf dem Server erlaubt) benutzen.

Dann würde der Code so aussehen

Der komplette global_header sieht also so aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="robots" content="INDEX,FOLLOW"> <meta name="keywords" content="homepage,dokument,webpage,page,web,netz,homepage dokument webpage page web netz"> <meta name="description" content="homepage, dokument, webpage, page, web, netz" > <title>homepage, dokument, webpage, page, web, netz, homepage dokument webpage page web netz</title>    <link rel="stylesheet" href="format.css" type="text/css"> </head> <body > <table width="88%" align="center" cellspacing="0" cellpadding="0" border="0" > <tr> <td align="right" class="li" ><img src="images/pixelspace.gif" width="18" height="1" border="0" alt=""></td><td > <table align="center" width="100%" cellspacing="0" cellpadding="0" border="0" > <tr> <td valign="top" id="hpname">~ Just Natural ~</td> </tr> <tr> <td class="buleiste" > <table id="menu2" border="0" cellpadding="0" cellspacing="0" > <tr> <td ><a href="index.html" onfocus="this.blur()">Kontakt</a></td><td ><img src="images/line_menu.jpg" width="1" height="36" border="0" alt=""></td> <td ><a href="index.html" onfocus="this.blur()">Home</a></td><td ><img src="images/line_menu.jpg" width="1" height="36" border="0" alt=""></td> <td ><a href="index.html" onfocus="this.blur()">Preise</a></td><td ><img src="images/line_menu.jpg" width="1" height="36" border="0" alt=""></td> <td ><a href="index.html" onfocus="this.blur()">Impressum</a></td><td ><img src="images/line_menu.jpg" width="1" height="36" border="0" alt=""></td> <td ><a href="index.html" onfocus="this.blur()">Gaestebuch</a></td><td ><img src="images/line_menu.jpg" width="1" height="36" border="0" alt=""></td> </tr> </table>  </td> </tr> </table>  <table align="center" width="100%" border="0" cellpadding="0" cellspacing="0" > <tr> <td rowspan="2" id="nav" > <div id="menu01"> <ul > <li><a href="index.html" onfocus="this.blur()">Anfahrt</a></li> <li><a href="index.html" onfocus="this.blur()">Kontakt</a></li> <li><a href="index.html" onfocus="this.blur()">Email</a></li> <li><a href="index.html" onfocus="this.blur()">Gästebuch</a></li> <li><a href="index.html" onfocus="this.blur()">Preise</a></li> <li><a href="index.html" onfocus="this.blur()">Angebote</a></li> <li><a href="index.html" onfocus="this.blur()">Impressum</a></li> <li><a href="index.html" onfocus="this.blur()">Weitere Links</a></li> <li><a href="index.html" onfocus="this.blur()">So finden Sie uns</a></li> <li><a href="index.html" onfocus="this.blur()">Weitere Links</a></li> <li><a href="index.html" onfocus="this.blur()">Weitere Links</a></li> <li><a href="index.html" onfocus="this.blur()">Weitere Links</a></li> </ul> </div>  <div class="trenn2"> </div> <div class="box1"><?php include('http://......../_rubric/index_php.php?rubric=News1'); ?></div> <div class="box2"><?php include('http://......../_rubric/index_php.php?rubric=News2'); ?></div>  </td> <td width="100%" id="top" > </td> </tr> <tr> <td valign="top" id="sp2">

Schritt 4

Jetzt ist die Navigation dran:

Dieser Teil

<div id="menu01"> <ul > <li><a href="index.html" onfocus="this.blur()">Anfahrt</a></li> <li><a href="index.html" onfocus="this.blur()">Kontakt</a></li> <li><a href="index.html" onfocus="this.blur()">Email</a></li> <li><a href="index.html" onfocus="this.blur()">Gästebuch</a></li> <li><a href="index.html" onfocus="this.blur()">Preise</a></li> <li><a href="index.html" onfocus="this.blur()">Angebote</a></li> <li><a href="index.html" onfocus="this.blur()">Impressum</a></li> <li><a href="index.html" onfocus="this.blur()">Weitere Links</a></li> <li><a href="index.html" onfocus="this.blur()">So finden Sie uns</a></li> <li><a href="index.html" onfocus="this.blur()">Weitere Links</a></li> <li><a href="index.html" onfocus="this.blur()">Weitere Links</a></li> <li><a href="index.html" onfocus="this.blur()">Weitere Links</a></li> </ul> </div>

wird geändert zu

Jetzt müssen natürlich die gewünschten bzw. erforderlichen Rubriken angelegt werden und im Backend die Navigationsstruktur erstellt werden (siehe Handbuch).

Außerdem sollte man, wenn man kein rubrikspezifisches Design programmieren will, _rubric/local_header.php und _rubric/local_footer von jeglichem Inhalt befreien.

Schritt 5

Für die Inhaltsboxen bauen wir ein simples Template mit

im JS/PHP-Teil und nennen es "Inhaltsbox"

Dieses machen wir zum Standartemplate für News1 und News2

Und fertig...

Jetzt nur noch darauf achten, daß alle Links (in der festen Navi) auf die richtige Rubrik zeigen und daß die relativen Links zu Bildern und CSS-Datei stimmen... HTML-Grundkenntnisse eben.

Dann erhält man das hier
../demo/template58/index.php

zum Vergleich das Original
../demo/template58/index.html

Aufwand zum Erstellen aller Dateien, Einrichten des CMS, Anpassen aller Einstellungen sowie Schreiben dieser Anleitung ca. 1 Stunde...

Das Nutzen eines vorhanden Layouts auf ConPresso ist also kein großer Zauber...

ABER: RTFM (Read The Fucking Manual)
Da stehen alle Feinheiten drin, insbesondere die Bedienung des Backends, die ich hier nicht beschrieben habe.

Natürlich geht das alles auch noch wesentlich komplexer und man kann einiges optimieren, wer aber erst mal was vorzeigbares braucht, der hat es sich in wenigen Minuten zusammengeklickt...

Wenn ich einen Webauftritt erstelle, dann wird immer zuerst in einem HTML-Editor wie Dreamweaver eine oder mehrere Seiten als statisches HTML erstellt, um die Platzierungen, die Farben und auch das Verhalten von Links zu testen. Sieht das gut aus und vom Kunden abgesegnet, dann wird es wie beschrieben zerlegt und auf den Webspace gebracht.
Dann werden so viele Inhalte wie möglich (soweit vorhanden) im CMS eingetragen und dabei die Templates nach Bedarf angepasst und für fummeliges HTML-Zeug, was man Redakteuren nicht zumuten kann, noch die notwendigen Snippets angelegt.

Das alles kann man auch im Handbuch in Kapitel 15.2 ganz ausführlich am Beispiel der Demo-Webseite ConQuarium nachlesen.

Hinwies Diese Dokumentation ist urheberrechtlich geschützt. Alle Rechte, auch die der Modifikation, der Übersetzung, des Nachdrucks und der Vervielfältigung, im Ganzen oder in Teilen, bedürfen der vorherigen schriftlichen Genehmigung von Markus Rösel. Dies gilt unabhängig davon, auf welche Art und Weise, für welche Zwecke und mit welchen Mitteln dies geschieht.

Markus Rösel übernimmt weder Garantie für die Fehlerfreiheit und Aktualität dieses Dokumentation oder der Software, noch juristische Verantwortung oder irgendeine Haftung, die aus der Nutzung dieser Dokumentation oder der Software resultiert. Dies gilt auch für Auslassungen, fehlerhafte Angaben, fehlerhaften Code und daraus eventuell entstehende Schäden.

Sämtliche auch ohne besondere Kennzeichnung verwendeten Handels-, Waren-, Marken- und Gebrauchsnamen stehen ausschließlich den jeweiligen Inhabern zu. Alle in dieser Dokumentation oder der Software enthaltenen Angaben und Daten dienen ausschließlich Informationszwecken und können ohne vorherige Ankündigung geändert werden. Die in Beispielen verwendeten Namen und Daten sind frei erfunden.

ConPresso ist eine eingetragene Marke der Bartels Schöne GmbH & Co. KG, Münster (Nr. 301 66 567)

Bitte beachten Sie folgendes: Der Hersteller und Entwickler von ConPresso ist Bartels.Schöne aus Münster. Diese Seite (auf der Sie sich gerade befinden) ist keine Seite von Bartels.Schöne sondern ein eigenständiges Projekt, das sich mit dem CMS ConPresso beschäftigt und Module, Modifikationen sowie Dienstleistungen rund um ConPresso anbietet. Es gibt eine große Gemeinde von Nutzern und Entwicklern, die durch eigene Erfahrungen, Wünsche und Lösungen den offen verfügbaren und anpassbaren Quellcode erweitern. Diese Erweiterungen sind nicht Bestandteil von Conpresso und daher gibt Bartels.Schöne auf diese Anpassungen und Funktionserweiterungen auch keine Gewährleistung. Die Nutzung dieser Anpassungen und Funktionserweiterungen erfolgt auf eigene Verantwortung und eigenes Risiko, daher gilt wie immer folgender Grundsatz: vor jeder Anpassung/Änderung ein Backup machen, am besten täglich und vollautomatisch!

Scanning time: 0.2366s / Execution time: 0.9855s
Zeit für den Seitenaufbau: 1.2221s
Anzahl Datenbankabfragen: 106