CMS onweb
Unsere Idee
die eigene Website online wie in einem Textprogramm, die eigenen Webseiten weiter gestalten
und das bei bestehenden und neuen Websites.
Unsere Lösung
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.
Was kann onweb?
- Einloggen mit Benutzernamen und Passwort
- Speicherfunktion
- Backupfunktion
- Hinzufügen von neuen Seiten (nur onweb pro)
- mit css-Kenntnissen - Layoutgestaltung (nur onweb pro)
- formatierte Textübernahme aus Word oder Pages
- Sessionfunktion - Bearbeitung aller Seiten bis zum Ausloggen
- Einbau von Tabellen, Musikfiles, Videos und Bildern
- Umfangreiche Textformatierungen
- Erzeugen von Links und Ankern
- Einbinden von YouTube Videos
- HTML Quelltext-Bearbeitung
- Einbinden von HTML - Code
- Drag and Drop für leichtes Verändern von Positionen
- Kontextmenü rechte Maustaste für viele eingebundene Objekte
- Rechtsklick Kontextmenüs
- Hochladen von Fotos, Videos und Musikfiles von Ihrem Rechner oder der Kamera Ihres mobilen Gerätes
- Einbinden vordefiniereter Container für responsives Layout
- Nutzung von Vorlagen für abwechslungsreiches Layout
- Einbau von Bausteinen wie z.B.
- Akkordeon
- Lightbox
- Zeitleisten
- Terminleisten
- Zoom-, Graustufen und Unschärfefunktionen für Bilder
- Slider
Für wen ist onweb geeignet?
Besonders kleine bis mittelständige Unternehmen, Vereine und Privatpersonen haben hier ein sehr schlankes, direktes und leicht zu bedienendes Werkzeug. Das CMS kann zum Aufbau neuer Seiten und zum Nachrüsten bestehender HTML - Webseiten genutzt werden. Vorkenntnisse in HTML und css sind nicht notwendig, können als Ergänzung vorteilhaft sein. Die Einarbeitungszeit soll ganz gering sein.Was unterscheidet onweb von anderen CMS?
- 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.
Welche Voraussetzungen müssen erfüllt sein?
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.
- Voraussetzungen:
- php ab Version 5.5.x
- Speicherplatz ca. 9MB + Platz für individuelle Medien
- aktuelle Browserversionen
- Java Script muss aktiviert sein
- FTP-Programm zum Upkoad einer Datei
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.
Die Versionen von onweb / Kosten
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.
onweb - Rechtliches
Welche Lizenzen werden genutzt?
Unser CMS onweb unterliegt einer Domain-Lizenz, d.h. eine Lizenz darf nur auf der Domain verwendet werden, welche bei der Installation und Registrierung angegeben wurde. Eine Weitergabe an Dritte ist untersagt. Möchten Sie das CMS auf einer anderen Domain (Umzug) verwenden, nehmen Sie bitte mit uns Kontakt auf. Für den Einsatz auf einer neuen zusätzlichen Domain muss das CMS neu erworben werden. Unsere Software wurde nach aktuellem Kenntnisstand geprüft, Haftung für Schäden durch die Benutzung übernehmen wir nicht. Änderungen am Quellcode dürfen nur zur eigenen Verwendung durchgeführt werden.onweb nutzt den CKEditor und den Responsive Filemanager mit davon unabhängigen Lizenzrechten.
CKEditor
Der CKEditor steht unter der LGPL Lizenz http://ckeditor.com/about/license. Das open source Programm wird aus unserem CMS heraus verlinkt und kann vom registrierten Nutzer entfernt oder ausgetauscht werden. Dies erfolgt in der der Datei cms/loginform.php mit der der Zeile . Der Quelltext des Programms ist offen im Ordner cms/ckeditor und darf laut LGPL Lizenz (https://opensource.org/licenses/LGPL-3.0 ) modifiziert werden.
Responsive Filemanager
Der Responsive Filemanager steht unter Creative Commons Attribution-NonCommercial 3.0 Unported License (http://creativecommons.org/licenses/by-nc/3.0/). In dem Fall, dass die web-designwerkstatt das CMS onweb auf Ihrem Webspace installiert, erhalten Sie den Responsive Filmmanager mit einer kommerziellen Lizenz, für die an der Urheber tectrail / Valdagno (http://www.responsivefilemanager.com) eine Lizenzgebühr entrichtet wurde.
Darf ich onweb kopieren und weitergeben?
Nein, eine Weitergabe an Dritte ist untersagt. Es handelt sich um eine Lizenz für eine Domain.Datenschutz
Bei der Registrierung angegebene Daten wie email, Domainname, Benutzername und Passwort werden nur aus rechtlichen Gründen hinterlegt und keinesfalls an Dritte weitergegeben oder anderweitig unsachgemäß verwendet.onweb light
Umfang
onweb light besitzt den gleichen Editor und den gleichen Webseitenbaukasten wie die onweb pro-Version, lediglich das Ändern des Farbschemas und der Adminbereich sind bei bestehenden Websites nicht möglich. Dafür setzt sich onweb light vollautomatisch in bestehende Webseiten.Registrierung und Installation (einmalig)
- Sie erhalten eine Datei reg.php und einen Registrierungsschlüssel.
- Fertigen Sie ein Backup Ihrer Dateien auf Ihrem lokalen PC an.
- Laden Sie per FTP-Programm (z.B. FileZilla) die Datei reg.php ins Root-Verzeichnis (Stammverzeichnis, kein Unterverzeichnis) Ihres Webspaces.
- Rufen Sie im Browser Chrome in der Befehlszeile Ihre Adresse auf und geben Sie dahinter /reg.php ein. (Muster: www.musterseite.de/reg.php)
- Es öffnet sich die Registrierungsoberfläche, in die Sie die Registrierungsnummer eingeben, einen persönlichen Benutzernamen und ein Passwort zum Einloggen wählen.
- Die Installation von onweb erfolgt vollautomatisch.
- Nach Beendigung der Installation werden Sie in die Loginoberfläche geführt. Hier lohnt sich ein Lesezeichen anzulegen.
Einloggen (bei jeder neuen Sitzung)
- In die Loginoberfläche gelangen Sie über Ihr Lesezeichen oder über Ihre Adresse mit dem Anhang /login (Muster www.musterseite.de/login)
- Geben Sie Ihren selbst gewählten Benutzernamen und Ihr Passwort ein.
- Sie werden automatisch zur index-Seite Ihrer Domain geführt.
- Am Ende der Sitzung das Ausloggen nicht vergessen.
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.
Links in onweb light
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.
Speichern im onweb_light
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.
Backup im onweb light
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.
Update im onweb light
Wählen Sie 'Update' im onweb-Menü und das Update startet automatisch, falls eine neuere als Ihre Version verfügbar ist.
Deinstallieren des CMS onweb light
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
onweb pro
Login
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.
Inhalte bearbeiten
Sobald Sie mit der Maus über eine editierbare Textfläche fahren, wird diese durch einen grauen Schatten hervorgehoben.Klicken Sie auf eine solche editierbare Textfläche. Nach wenigen Sekunden wird der Editor eingeblendet und die Arbeit kann beginnen. (Ladezeit je nach Internetverbindung).
Speichern
Im CMS onweb stehen Ihnen in der unteren Menüleiste die selbsterklärenden Schaltflächen zur Verfügung.Beim 'Speichern' werden die Dateien mit dem Namen der Webseite und der Nummer des Textbereiches im Datenordner abgelegt. Im Responsive Filemanager können Sie diese Dateien kopieren bearbeiten. Bitte benennen Sie die Dateien jedoch keinesfalls um, da sie sonst nicht mehr in Ihre Webseite eingelesen werden können.
Backup
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.
Der Editor
Die rechte Maustaste
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.
Zeilenvorschub - eine neue Zeile am Ende eines Abschnitts
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.
Der Umfang des Editors
In den Versionen light und pro wird der gleiche Editor eingesetzt.
- Ausschneiden
- Kopieren
- Einfügen
- Als Klartext einfügen
- Aus Word einfügen
- Rückgängig
- Wiederherstellen
- Liste nummeriert
- Liste unnummeriert
- Textausrichtung (links, zentriert, rechts, Blocksatz)
- Link einfügen / bearbeiten
- Link entfernen
- Anker einfügen
- Textfarbe
- Texthintergrundfarbe
- Text formatieren - fett
- Text formatieren - schräg
- Text formatieren - unterstrichen
- Text formatieren - durchgestrichen
- Quelltext bearbeiten
- Stil des Abschnitts
- div Elemente markieren
- Überschriften formatieren: h1, h2, h3, h4, h5, h6
- Schriftart
- Zeilenhöhe
- Buchstabengröße
- Buchstabenabstand
- Schaltflächen
- Bild einfügen
- Bild direkt hochladen oder mobile fotografieren
- Audio-Datei / Musikfile einbinden
- Video einbinden
- Tabelle
- Horizontale Linie einfügen
- YouTube Video einbetten
- Container einbauen
- Vorlagen mit vordefinierten responsiven Gestaltungselementen
- Bausteine
- Alle Funktionen nutzen die Formatierungen aus dem css - Code der eigenen Webseite. Idealerweise sollte man diese Formatierungen auf allen Seiten bestehen lassen, um ein einheitliches Layout zu gestalten.
Links
Links
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
.Anker
Anker innerhalb einer Seite setzen
Schritte:Maus absetzen —> Fähnchensymbol
im Editor wählen —> Ankernamen eintragen. Der Anker bennennt sich im Editiermodus selbst und ist in der Gästeansicht nicht sichtbar. Deshalb bitte nicht vorhandene Wörter oder Wortgruppen als Ankerpunkte markieren, sonder immer einen neuen zusätzlichen Punkt setzen!
Anschließend den Ausgangspunkt des Links setzen.
Schritte:
Wort markieren —> Linksymbol im Texteditor wählen —> Link-Typ ‚Anker’ wählen.
Aus der Liste kann jetzt die Elementkennung! des gewünschten Ankerpunktes gewählt werden.
Anker zu einer anderen Seite setzen
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.
Bilder
Bilder einfügen
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.
Bilder verwalten - Filemanager
Den Responsiven Filemanager erreichen Sie nur über den geschützten Bereich als eingeloggter Nutzer. Um in den Filemanager zu gelangen, gibt es mehrere Möglichkeiten: Entweder Sie möchten Bilder bearbeiten, dann wählen Sie im Editor die Schaltfläche 'Bilder' und im sich öffnenden Fenster 'Server durchsuchen'. Beabsichtigen Sie Texte zu bearbeiten, wählen Sie die Schaltfläche 'Links' und anschließend ebenso 'Server durchsuchen'. An dieses Ziel gelangen Sie auch, wenn Sie auf Ihrer Webseite mit der rechten Maustaste Bild oder Link bearbeiten auswählen.
Der Filemanager führt Sie automatisch in den Datenordner des onweb. Sie können Bilder von Ihrem Rechner aus hochladen, Unterordner und Dateien neu anlegen und mit der Zwischenablage arbeiten (Schaltflächen links oben).Bei Wahl der Option 'U pload' können Sie auf auf Ihren lokalen Rechner zurückgegriffen. Laden Sie bevorzugt gut komprimierte Bilder hoch, um die Ladezeit Ihrer Webseite nicht zu verlangsamen. Muss ein Bild doch mal über 300kB groß sein, wählen Sie bitte den Java Uploader für große Dateien.
Ganz leicht auszuprobieren sind (Schaltflächen in der Mitte oben) die Optionen zum Darstellen von Dateien in Listen oder mit Vorschaufenstern ebenso wie die Sortierfunktionen, Aktualisierung, Sprachoptionen und Infos über den Filemanager (Schaltflächen rechts oben).
Auch im Filemanager sind alle Optionen als ToolTip (Maus hover) nachzulesen.
Beim Überfahren eines Dateinames am unteren Rand mit der Maus (hover) öffnet sich der Bereich mit den Optionen 'Download', 'Vorschau', 'Umbenennen' und 'Löschen'
Der Punkt 'Bild editieren' ist (noch) funktionslos.
Zusätzliche Effekte für Bilder
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
Bilder ändern
Doppelklicken Sie auf das Bild. Es öffnet sich das Fenster 'Bildeigenschaften', in dem Sie jetzt beliebig ändern können.
Bilder löschen
Die einfachste Methode ist - Bild anklicken und 'entf' auf der Tastatur wählen.Musik und Videos einfügen
Musik
'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.
Video
'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.Wir empfehlen, für Audio- und Video-Dateien gesonderte Ordner anzulegen.
Genutzt wird bei beiden Optionen HTML5 Technik.
YouTube Videos einfügen
Beim YouTube - Video den Code zum Einbetten (embeded) in die Zwischenablage kopieren und anschließend im Editor der Webseite das Symbol 'YouTube'
wählen. Im Fenster den kopierten YouTube-Code einfügen (rechte Maustaste 'Einfügen' oder Tastatur 'Strg'/'cmd' + 'v'). Optionen wählen und bestätigen.
Genutzt wird HTML5 Technik.
Beim YouTube - Video den Code zum Einbetten (embeded) in die Zwischenablage kopieren und anschließend im Editor der Webseite das Symbol 'YouTube'
wählen. Im Fenster den kopierten YouTube-Code einfügen (rechte Maustaste 'Einfügen' oder Tastatur 'Strg'/'cmd' + 'v'). Optionen wählen und bestätigen.
Genutzt wird HTML5 Technik.
Tabellen
Über das Symbol 'Tabelle'
auswählen. Die Optionen sind selbsterklärend. Jedoch möchten wir vor Tabellen im responsiven Webdesign für Handy und Tablet ausdrücklich warnen. Tabellenzellen hängen fest aneinander und ordnen sich nicht freiwillig untereinander an, wenn der Platz nicht ausreichend ist (z.B. Handydisplay). Wenn notwendig, nutzen Sie prozentuale Angaben. in der css-Datei zum System haben wir für kleine Geräte eine Auflösung des Tabellenformats hinterlegt. Ob diese Variante auch für Ihre spezielle Tabellenversion zutrifft, muss im Einzelfall geprüft werden.
Horizontale Linien
Ein Klick auf das Symbol 'Horizontale Linie'
fügt sofort eine Linie ein.Die Formatierung für die linie steht in der css-Datei Ihrer Webseite und kann im Admin-Bereich geändert werden.
Webseitenbaukasten
Container
Container einfügen
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.
Zusätzliche Eigenschaften für Container - Abstand, Farben und Rahmen
Container werden eng nebeneinander gesetzt, um 100% Seitenbreite zu füllen. Sie sind farblos und ohne Rahmen. Im Urzustand liegen die Container dicht beieinander ohne Abstände innen und aussen. Der erste Container besitzt jeweils die Klasse 'clear' um in einer neuen Zeile zu beginnen. Im Bearbeitungsmodus werden sie farblich beim Überfahren mit der Maus hervorgehoben.- Rahmen (rahmen)
- Innenabstand (innen)
- Außenabstand (aussen)
- Hintergrundfarben(hgfarbe_1, hgfarbe_2).
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.
Vorlagen für die Webseite
Karten sind Gruppen von Text- und Bildelementen, die fertig formatiert sind, auch für mobile Geräte. Ein Klick auf das Symbol V 'Vorlagen' blendet das Kontextmenü ein. Dieses wird stetig erweitert und ist mit den Updates verfügbar.Bausteine
Bausteine einfügen
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ü:
Auch hier empfehlen wir, auf einer Sonderseite einfach mal alles auszuprobieren. Alle Bausteine können mehrfach untereinander gesetzt werden. Sie haben in unserer css-Datei eine Formatierung zum Layout. Da Ihre persönliche Datei alles.css später geladen wird, können Sie im Admin - Bereich des CMS onweb Formatierungen ergänzen.
Lightboxen
Lightboxen (dt. Lichtkasten) sind vorformatiert in 3 Varianten. Sie werden in Container eingefügt. Ein Klick auf das Symbol 'Bausteine' öffnet das Kontextmenü:Auch hier empfehlen wir, auf einer Sonderseite einfach mal die 3 Varianten auszuprobieren. Bei der Variante 'Lightbox für ein Bild' wählen Sie sofort das Bild, welches automatisch mit der Lightbox verlinkt wird. Bei mehreren Bildern werden Sie sehen, dass sich jeweils Dummybilder einfügen.
Akkordeon
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.
Slider und einschwebende Bilder
Ü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.
Admin - Bereich (nur onweb pro)
Webseite hinzufügen
Im Admin-Bereich befindet sich im oberen Teil der Bereich zum Hinzufügen von Webseiten.Tragen Sie den Namen der neuen Seite ohne Endung in das Feld. Schreiben Sie am besten grundsätzlich klein und nutzen Sie keine Umlaute oder Sonderzeichen. Bestätigen Sie mit 'Seite anlegen'. Erzeugt wird eine Seite mit gewähltem Namen und Grundlayout der Webseite. Sollten Sie z.B. einen sich wiederholenden Bereich ganz oben haben, kopieren Sie bitte von einer anderen Seite die entprechenden Zeilen. 'Neue Seite anlegen' benötigt kein extra 'Speichern'.Tipp: Kombinieren Sie 'Neue Seite anlegen' gleich mit der Verlinkung im Menü.
Kopf der Webseite
Klicken Sie doppelt auf den Code des Kopfbereiches. Im Editorfenster können Sie jetzt Metagtags ändern, hinzufügen und löschen. Hier stehen auch die besonders wichtigen Schlüsselwörter für Suchmaschinen und die Beschreibung (Keywords und Description).Das Menü
Für Veränderungen arbeiten Sie im Quellcode mit einer Vorschau und Hilfe (?). Hier sind HTML Kenntnisse notwendig.Tipp: Wenn die Strukturen übersichtlich sind, kopieren Sie doch einfach Teile und fügen Sie diese zum Verändern wieder ein.
Das Layout der Seite - die Datei alles.css
Klicken Sie doppelt auf den Code der css-Datei. Im Editorfenster sind die css- Codezeilen hinterlegt, die das Aussehen, die Anpassung an Handy und Tablet und das Menü steuern. Hier sind css - Kenntnisse notwendig.Tipp: Die Datei alles.css wird nach der Datei bausteine.css geladen. Sollten Sie Bausteine nachträglich für Ihre Seite anpassen wollen, tragen Sie die Änderungen in die alles.css.
Update - Funktion
Mit dieser Funktion 'update' werden die aktuellen Neuerungen des CMS onweb auf Ihr System übertragen. Dabei werden weder das Template / die Vorlage Ihrer Webseite noch deren Inhalt verändert. Gehen Sie auf die Admin-Seite und wählen Sie im Update-Bereich den Schalter 'Update' ganz unten. Die Funktion startet automatisch und zeigt Ihnen in der Dokumentation das Ergebnis. Liegen Veränderungen in css-Dateien vor, ist bei manchen Browsern ein Neuladen mit geleertem Cache notwendig um Neues anzuzeigen.Backup der Admin Dateien
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.
Fehlersuche
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.
