die eigene Website online wie in einem Textprogramm, die eigenen Webseiten weiter gestalten
und das bei bestehenden und neuen Websites.
ein direktes und intuitiv zu bedienendes CMS (Content Managment System - dt. Inhaltsverwaltungssystem)
ohne Datenbank, bei dem Sie mit einem Klick auf den Bereich sofort Ihre Inhalte auf der
Webseite bearbeiten können -Bilder hinzufügen, Links einbauen, Texte verändern und schreiben,
Videos und Musik einbauen …
Dabei unterscheiden wir nicht zwischen Backend und Frontend,
sondern greifen direkt auf die Webseite WYSIWYG ('What you see is what you get' - dt. 'Was du siehst bekommst du.') zu.
In der Version onweb light baut sich das CMS automatisch in bestehende statische HTML - Webseiten ein.
- keine Vorkenntnisse bei der Bedienung notwendig. Diese erfolgt ganz direkt wie in Textverarbeitungsprogrammen WYSIWYG.
- keine Datenbank notwendig
- keine Wechsel zwischen Backend und Frontend
- geringer Speicherplatz
- leichter Umzug zu neuer Domain, falls das mal notwendig ist
- onweb light baut sich vollautomatisch in vorhandene Websites ein.
Das CMS basiert auf dem CKEditor und dem Responsive Filemanager. Php und JavaScript regeln die Kommunikation mit dem Server und dem Client. Textbasiert werden Daten ohne Datenbank gespeichert.
Responsives Webdesign - das CMS ist grundsätzlich bedienbar auf mobilen Geräten. Jedoch wird eine Displaygröße von mind. 8’’ wird aber dringend empfohlen, da unterhalb dieser Größe aus Platzgründen ein 'abgespeckter' Editor eingeblendet wird.
1. Version - onweb light
onweb light baut sich vollautomatisch in eine bestehende statische HTML - Website ein. Dfür muss eine Registrierungsdatei auf Ihren Webspace nach oben geladen und dann aufgerufen werden. Ob Ihre Website dafür geeignet ist, können Sie in der Demo testen >>> Demo
2. Version - onweb pro
Mittels einer >>> Vorlage erhalten Sie komplettes Webseitenlayout mit dem CMS onweb ab 64 €.
Ein Template 'Eigenbau' steht zum Kauf bereit.
Sie können unter Webseitenlayouts wählen, in die onweb bereits integriert ist und anschließend selbst mit Ihren Inhalten füllen. Probieren Sie es doch einmal aus: >>> Demo
Selbstverständlich erstellen wir Ihnen auch ein Layout nach Ihren Vorstellungen und bauen das CMS onweb ein.
Hinweis: onweb_light dokumentiert, wenn ein Nutzer eingeloggt ist oder sich ausloggt mit einem Signal. Sollten Sie das Ausloggen vergessen, ist ein erneutes Einloggen erst nach einer Sperrzeit von insgesamt 30 Minuten möglich. In dieser Zeit kann auch keine weitere Person an der Seite arbeiten.
onweb_light sieht die gesamte Seite als zu bearbeitende Fläche. Dabei können auch Links (auch das Menü) editiert werden ('Link' im onweb-Menü mit Sperrzeichen).
Wenn Sie einem Link als Link folgen wollen, klicken Sie im onweb-Menü (untere Leiste) 'Link' an.
Damit fungiert der Link als Link ('Link' im onweb-Menü mit Häkchen). Falls Sie sich anders entscheiden, wählen Sie aktualisieren und Link ist wieder deaktiviert, ist wieder im Editiermodus.
Webseiten sind aus sehr unterschiedlichem Code aufgebaut. Beim Speichern wird geparst, d.h. der HTML-Code wird nach gültigem Standard validiert / korrigiert. Deshalb ist speziell für onweb light der 'Sandkasten' (engl 'sandbox') eingeführt worden, weil sich Veränderungen ergeben können, die sonst Browser einfach tolerieren. Alle Seiten werden zur Sicherheit zuerst im Sandkasten gespeichert und müssen dann ins Original überführt werden.
Rufen Sie Ihre Seite auf und verändern Sie diese.
Sobald Sie das erste mal 'Speichern' wählen, speichert onweb light automatisch in den Sandkasten (Unterordner=Domainname). Das wird mit einem Häkchen am 'Speichern' bestätigt. Sobald Sie wieder in der Seite arbeiten, erlischt das Häkchen.
Im Sandkasten können Sie beliebig lange weiterarbeiten und speichern, auch Ihre Sitzung unterbrechen durch Ausloggen. Beim nächsten Einloggen gelangen Sie wieder in die 'sandbox'.
Wenn Ihre Seite fertig bearbeitet ist und alles überprüft ist, wählen Sie '>> Original' (leuchtet zur Erinnerung grün) und die Seite wird mit Nachfrage ins Original überführt.
Jede Seite wird einzeln bearbeitet und ins Original überführt. es lohnt sich, auf eine andere Kartei die Originalseite zu legen und zu vergleichen.
Achtung: onweb light arbeitet mit HTML-Webseiten. Speichern Sie php-Seiten werden diese als HTML-Code unter gleichem Namen gespeichert. Dabei bleibt die Optik erhalten, jedoch verlieren die Seite den php-Code. Funktionen von z.B. Kontaktformularen gehen verloren. Warnung und Abbruch beim Übertrag ins Original sind eingebaut.
Das beste und einfachste Backup bei datenbanklosen Systemen wie onweb ist immer noch copy&paste (Seite oder Quelltext) markieren, Str+C, offline in Datei speichern
Im onweb-Menü wählen Sie 'Backup'. Es wird automatisch das Backup der offenen Seite (nur von dieser) mit Datum im Unterverzeichnis /backup erstellt.
Wählen Sie 'Update' im onweb-Menü und das Update startet automatisch, falls eine neuere als Ihre Version verfügbar ist.
Geben Sie, während Sie eingeloggt sind, in die Befehlszeile hinter die Adresse /cms/onweblight_loeschen.php ein.
Muster: www.musterseite.de/cms/onweblight_loeschen.php
Auf jeder Webseite finden Sie einen Loginbereich in der Regel am unteren linken Seitenrand.
Klicken Sie darauf. Es öffnet sich am unteren Bildschirmrand das Loginfenster:
Geben Sie Benutzernamen und Passwort ein und bestätigen Sie mit 'Einloggen'. 'x' steht für 'Ausloggen', '?' führt Sie zu dieser Hilfeseite.
Das untere Loginfenster ändert sein Aussehen und bestätigt damit, dass Sie sich im geschützen Bereich befinden.
In der Demoversion sind die Schaltflächen 'Backup', 'Admin' und 'Speichern' aus Sicherheitsgründen deaktiviert.
Klicken Sie auf eine solche editierbare Textfläche. Nach wenigen Sekunden wird der Editor eingeblendet und die Arbeit kann beginnen. (Ladezeit je nach Internetverbindung).
Beim Betätigen der Schaltfläche 'Backup' wird im Datenordner im Unterrordner 'backup' auf Ihrem Serverplatz ein neuer Ordner mit Datum und Uhrzeit erzeugt. In ihm befindet sich dann ein Abbild Ihrer aktuellen Texte. Damit wird nicht die gesamte Webseite gespeichert.
Möchten Sie ein Backup wieder herstellen?
onweb pro
bietet im Adminbereich die Möglichkeit, aus den vorhandenen Backups (mit Datum gekennzeichnet) das auzuwählen, welches wieder herhgestellt werden soll.
onweb light
Innerhalb des Filemanagers (Anwahl im Editor über das 'Link'-Symbol!) können Sie die richtigen Backupdateien wiederfinden, mit der rechten Maus kopieren und in den Textordner 'txt' über das Editorsymbol 'Inhalt der Zwischenablage einfügen' überschreiben.
Alternativ können Sie mit der rechten Maustaste beim Klick auf die richtige Backupdatei 'Dateiinhalt bearbeiten' wählen. Dort erhalten Sie den Quelltext des Abschnitts und können diesen in den Originalquelltext einarbeiten.
Natürlich lohnt sich auch ein Aufräumen des Backupordners von Zeit zu Zeit über den Filemanager.
Für alle Bereiche Ihrer Seite sollten Sie Erfahrungen mit der rechten Maustaste sammeln. Je nach Vorhandensein blendet sich im Kontextmenü des angeklickten Bereichs sofort 'Bildeigenschaften', 'Link bearbeiten', 'Link entfernen', 'div bearbeiten'... ein. Der wohl schnellste Weg zum Ziel.
Vor jeden jedem Containerblock wird wird beim Überfahren mit der Maus eine rote Linie aufleuchten.
Klicken Sie auf das rote Rechteck am Ende und Sie erstellen eine neue Zeile und schaffen somit neuen Platz.
Möchten Sie selbst einen solchen Zeilenvorschub erzeugen, bitte Maus positionieren und im Editor für 'neue Zeile' wählen.
Markieren Sie auf Ihrer Webseite eine Wort oder eine Wortgruppe zum Verlinken. Wählen Sie anschließend im Editor das Symbol 'Link' . Das Fenster zeigt das Wort oder die Wortgruppe.
Verlinkung zu einer internen Seite
Anzeigentext: Das ist die markierte Wortgruppe.
Link Typ: URL
Protokoll: andere
URL: von Hand die Webseite eintragen z.B. team.php (Tipp: Namen der Seiten sieht man beim Überfahren des Menüs mit der Maus browserabhängig meist links unten in der Browserleiste. Server durchsuchen bringt Sie aus Sicherheitsgründen nicht in die untere Dateiebene.)
Verlinkung zu einer externen Seite
Anzeigentext: Das ist die markierte Wortgruppe.
Link Typ: URL
Protokoll: http:// oder besser https://
URL: von Hand die Webseite eintragen z.B. www.musterseite.de
Schritte:
1. Maus absetzen —> Fähnchensymbol im Editor wählen —> Ankernamen eintragen.
2. Wort auf der Ursprungseite markieren —> Linksymbol im Texteditor wählen —> URL der Zielseite angeben und dahinter #Ankername schreiben.
Variante A für direktes Hochladen oder Fotografieren mit der mobilen Kamera
Platzieren Sie die Maus an der gewünschten Stelle und wählen Sie 'Bild plus' im Editor.
Es öffnet sich der Filemaneger oder bei mobilen geräten kann zwischen Kamera oder Filemanager gewählt werden. >> Videoanleitung
Variante B
Platzieren Sie die Maus an der gewünschten Stelle und wählen Sie 'Bild' im Editor. Im Fenster
können Sie über 'Server durchsuchen' das passende Bild im Filemanager wählen. Falls dieses noch offline auf Ihrem Rechner liegt, laden Sie es im Filemanager über das Symbol 'hochladen' in den gewünschten Ordner und klicken Sie es anschließend an. Vergessen Sie für die Suchmachinen und den Fehlerfall nicht, den alternativen Text einzugeben, der das Bild kurz beschreibt. Die Bildgröße kann als absolute Zahl ohne Einheit (autom. px) eingegeben werden bzw. wird vom Originalbild übernommen. Für responsives Webdesign sind prozentuale Angaben bezogen auf den umgebenden Bereich (meist Container) wichtig. Tragen Sie i.R. '100%' ein und löschen Sie die Höhenangabe! Diese wird automatisch proportional bestimmt. Wundern Sie sich bitte nicht über das verzerrte Vorschaubild. Das Original stimmt. (Eine Aufgabe für uns.)
Das Ausprobieren der Ausrichtung im Zusammenhang mit Abständen lohnt sich:
Ausrichtung 'links' - der Text umfließt das linksstehende Bild mit entsprechendem Abstand (absolut ohne Einheit).
Über den Karteikartenreiter 'Link' kann gleich verlinkt werden, 'Erweitert' lässt Klassenzuweisungen und individuelle Styles und id's zu.
Für Bildeffekte sind im CMS onweb Klassen mit Bildeigenschaften für Graustufen, Rahmen und Zoom hinterlegt. >> Videoanleitung
Diese können einzeln oder kombiniert angewendet werden:
Klicken Sie mit der rechten Maustaste auf das Bild und wählen Sie Bildeigenschaften.
Im Karteikartenreiter 'Erweitert' finden Sie den Bereich Klassen:
Hier können Sie einzeln oder in Kombination im Klassennamen eintragen:
- grau (wird bei Maus:hover farbig)
- zoom
- rahmen
- rund (bitte quadratische Bilder verwenden)
- unscharf (wird bei Maus:hover scharf)
- scharf (wird bei Maus:hover unscharf)
- schatten
- bildhoch (-70px)
- bildrunter (+70px)
- bildrechts (+70px)
- bildlinks (-70px)
Bitte unbedingt alles klein schreiben.
Videoanleitung vorhanden: https://www.cms-onweb.de/video.php
Doppelklicken Sie auf das Bild. Es öffnet sich das Fenster 'Bildeigenschaften', in dem Sie jetzt beliebig ändern können.
'Musik' oder 'Video'
wählen.
Über 'Server durchsuchen' das Medium, Ausrichtung / Breite wählen und Auswahl im Bereich 'Erweitert' treffen. Falls sich die Datei noch offline auf Ihrem Rechner befindet, laden Sie sie im Filemanager über das Symbol 'hochladen' in den gewünschten Ordner und klicken Sie sie anschließend an. >> Videoanleitung
Wir empfehlen, für Audio- und Video-Dateien gesonderte Ordner anzulegen.
Genutzt wird bei beiden Optionen HTML5 Technik.
Unsere Container sind Bereiche, die Inhalte aufnehmen. In der css-Datei sind die Eigenschaften der Container so gewählt, dass sie sich automatisch den Displaygrößen von Handy und Tablet anpassen. Somit werden Ihre Webseiteninhalte gleich responsive (dt. beweglich, sich anordnend) angezeigt. Ein Klick auf das Symbol 'Container' öffnet das Kontextmenü
Positionieren Sie die Maus in einem freien Bereich und wählen Sie die Stückelung der Container auf dem Desktopmonitor.
Es werden automatisch ganze Blöcke von Container in eine Zeile passend eingefügt. Ihre Bezeichnungen entsprechen den Stückelungen und beim Überfahren mit der Maus zeigen graue Flächen die zugehörigen Bereiche an.
Die Zusatzeigenschaften werden automatisch eingetragen. Rahmen besitzen bereits Innen- und Außenabstände. Diese sollten nicht zusätzlich gewählt werden. >> Videoanleitung
Ganz wichtig beim ersten Bearbeiten: Löschen Sie nicht die Wörter 'Container ..%', sie löschen dadurch den gesamten Container. Markieren Sie stattdessen die Wortgruppe und überschreiben Sie diese durch Text, Bilder ... Sie können auch zuerst Neues einfügen und die Wortgruppe anschließend löschen.
Es ist möglich, beliebig viele Containervarianten ineinander zu schachteln. Dies bietet sich an, wenn Ihre Vorlage einen breiten Bereich über den gesamten Monitor anzeigt. Dann können Sie zuerst eine 'Mitte' wählen und in diese Mitte Stückelungen einfügen.
Diese müssen als Klassen ergänzt werden. Wir bearbeiten dies hier am Beispiel von 3 Containern:
1. äußere Abstände vergrößern
Klicken Sie mit der rechten Maustaste in den linken Container und wählen Sie 'div bearbeiten'
Im folgenden Menü ergänzen Sie den Klassennamen (Gruppe von Eigenschaften) um den Befehl 'aussen'.
Verfahren Sie mit dem mittleren Container genau so.
Im Container ganz rechts ergänzen Sie den Klassennamen 'aussen rechts'. So wird die Gruppe gleichmäßig verteilt.
2. innere Abstände vergrößern (z.B. in farbigen Containern)
Der Ablauf ist der gleiche wie bei den äußeren Abständen (siehe oben):
- Container einfügen
- in den Container mit rechter Maus klicken
- 'div bearbeiten' wählen
- Klassenname ergänzen: im linken und mittleren Container die Klasse 'innen', im rechten Container die Klassen 'innen rechts'
3. Rahmen um Container setzen
Der Ablauf ist der gleiche wie bei den äußeren Abständen (siehe oben):
- Container einfügen
- in den Container mit rechter Maus klicken
- 'div bearbeiten' wählen
- Klassenname ergänzen: im linken und mittleren Container die Klasse 'rahmen', im rechten Container die Klassen 'rahmen rechts'
4. Hintergrundfarben
2 Hintergrundfarben sind pro Vorlage / Template hinterlegt: hgfarbe_1 (weiß) und hgfarbe_2 (hellgrau). Auch Sie können mittels Klassen zugeodnet werden:
- Container einfügen
- in den Container mit rechter Maus klicken
- 'div bearbeiten' wählen
- Klassenname ergänzen: hgfarbe_1 oder hgfarbe_2
Im Adminbereich können Sie die alles.css - Datei ändern. Hier können Codes von Hand zusätzlich eingetragen werden, die Farben ändern oder Klassen hinzufügen: .hgfarbe_1{background-color:red} usw.
Bausteine sind einzelne Elemente, die Ihre Webseite in kurzer Zeit optisch aufwerten. Sie werden in Container eingefügt. Ein Klick auf das Symbol 'Bausteine' öffnet das Kontextmenü:
Ein Akkordeon ist immer dann sehr sinvoll, wenn viel Inhalt auf einer Seite (wie auch dieser) untergebracht werden soll ohne den Leser damit zu 'erschlagen'. Zeigen Sie Überschriften und animieren Sie den Besucher, sich bewußt für Inhalte zu entscheiden.
Über 'Bausteine' fügen Sie ein oder mehrere Akkordeon ein. Bitte nicht wundern - zum Bearbeiten bleiben diese immer offen und sind nicht bedienbar. Erst wenn Sie 'Speichern' und 'Ausloggen' sehen Sie die Funktion.
Über 'Bausteine' fügen Sie unterschiedliche Slider ein. Bitte nicht wundern - zum Bearbeiten bleiben diese immer offen und sind nicht bedienbar. Erst wenn Sie 'Speichern' und 'Ausloggen' sehen Sie die Funktion.
Wie der Name sagt werden hier die head.css und die alles.css kopiert und abgelegt. Dieses 'Backup' ist sehr sinnvoll, wenn Ihnen der Code besonders gut gelungen ist. Bei einem erneuten 'Experiment' können Sie dann nur 'speichern' und gegebenfalls die Originale wieder herstellen.
Dies geht in der pro Version im Admin-Bereich. head.css und alles.css können einzeln wieder hergestellt werden.
Wir bemühen uns ständig, Fehlerquellen aufzuspüren und abzustellen. Trotz allem kann bei der rasanten Entwicklung z.B. von Browsern im Detail eine Tücke stecken. Wir freuen uns über jeden Hinweis, aktualisieren und geben dies ins Update.