Ohne HTML-Kenntnisse und mit ein paar Mausklicks lassen sich recht schnell private Webseiten und Mini-Shops bauen. Zahlreiche Provider bieten dafür eigene Homepagebaukästen an.

Nicht jeder Mensch hat Zeit und Muße, sich mal eben HTML, CSS, JavaScript anzueignen – geschweige denn all die anderen neuen Webtechnologien. Wozu auch: Häufig brauchen Sie und Ihre Bekannten lediglich eine einfache Webseite, die Informationen anbietet, und – womöglich – einen Warenkorb, um Produkte zu verkaufen.

Das haben mittlerweile auch Webhoster erkannt und bieten gegen Geld Baukästen an, mit denen Sie Webseiten einfach zusammenklicken. Besonders 1&1 macht seit geraumer Zeit im Fernsehen groß Werbung für seine Baukästen, andere Provider haben inzwischen nachgezogen und bieten eigene Lösungen.

Der Nachteil dieser Fertighäuser besteht darin, dass sie Ihnen wenig Spielraum lassen: Sie müssen mit den Komponenten leben, die da sind. Zudem können Sie die Inhalte meist nicht ohne weiteres mitnehmen – sie sind im System des Anbieters gefangen. Doch es gibt auch viele Vorteile: Sie kommen schnell ans Ziel, ohne sich mit dem Code zu plagen – selbst bei einfachen Seiten kostet die Umsetzung oft mehr Zeit, als man denkt. Zudem sehen die Fertigseiten inzwischen recht professionell aus. Sie müssen zudem nicht die Katze im Sack kaufen: Die meisten Baukästen lassen sich vor dem Kauf testen.

Kommt eine Fertigbauseite für Sie in Frage, machen Sie sich auf die Anbietersuche. Die kleineren Webhoster bieten solche Lösungen eher selten an, schauen Sie sich also bei den größeren Läden um, ein Online-Artikel [1] bringt Sie hier weiter. Abseits der Webhoster gibt es kommerzielle Webseiten, die sich auf Homepagebaukästen spezialisieren. Diese bieten ihre Dienste mitunter sogar kostenlos an, Sie sollten jedoch einen Blick ins Kleingedruckte werfen: Teilweise überschreiben Sie dem Anbieter auch die Inhalte der Seite, und es stehen zudem nur wenig Speicherplatz und Datentransfervolumen zur Verfügung. Für winzige Webseiten mag das reichen; wächst Ihre Seite jedoch, müssen Sie womöglich woanders von vorn anfangen. Planen Sie also langfristig und informieren Sie sich, bevor Sie eine Lösung wählen.

Ein zweites Problem: Mitunter trägt die Webseite den Namen des Anbieters in der URL. Die lässt sich zwar über Tricks verstecken, aber praktischer ist es, wenn die gebaute Webseite unter Ihrer eigenen Domain läuft, wie es die Webhoster vorsehen.

Stellvertretend für solche Baukästen testen wir Hosteuropes Webbuilder. Der Webhoster bietet – wie andere Anbieter auch – eine kostenlose Demoversion des Baukastens an. An ihr demonstrieren wir, wie Sie solche Webseiten zusammenklicken.

Der Einstieg

Zunächst rufen Sie die Webseite auf, welche die Demoversion des Webbuilder anbietet [2]. Wir testen die Pro-Variante, die nach einer Testphase von 30 Tagen mit 13 Euro im Monat zu Buche schlägt – wenn Sie den Service dann ausdrücklich bestellen (andernfalls verfällt die Seite). Es gibt auch eine Basic-Variante für 6 Euro/Monat, die jedoch keine Möglichkeit bietet, Videos, Social-Media-Elemente, Formulare und Warenkörbe zu verwenden. Benötigen Sie nur eine einfache statische Informationsseite, testen Sie diese Variante.

Um Zugang zur Demoversion zu erhalten, geben Sie einen Namen und eine Mail-Adresse an und erhalten eine E-Mail mit Ihren Zugangsdaten sowie einen Link zur Startseite von Webbuilder [3]. Dort melden Sie sich mit Ihren Daten an und landen auf einer ersten Seite (Abbildung 1), auf der Sie ein Design auswählen. Zur Zeit stehen 30 Themes bereit, die nach dem Anklicken im rechten Bereich auftauchen. Sie passen diese zur Not auch noch später an, treffen aber am besten gleich die richtige Wahl.

Abbildung 1: Nach dem Anmelden auf der Webbuilder-Seite stehen zunächst 30 Designs zur Auswahl. Entscheiden Sie sich für eines, das Sie dann an Ihre Zwecke anpassen.

Webseite entwerfen

Anschließend landen Sie auf der eigentlichen Designoberfläche. Der wichtigste Reiter heißt Design, im linken Bereich gibt es zwei Steuerungsmenüs, die Sie mit einem Klick auf den Pfeil umschalten. Hier gibt es eine Leiste mit Icons, über die Sie Inhalte wie Bilder und Videos aber auch Widgets per Drag & Drop in den rechten Bereich einfügen (Abbildung 2). Klicken Sie auf den kleinen Pfeil rechts neben der Leiste, verändert sich das Menü: Sie sehen nun einen Kasten, der im oberen Bereich die Links zur Navigation enthält (Abbildung 3). Darunter stoßen Sie auf einen Abschnitt mit den Registern Widgets und Medien. Klicken Sie auf einen der Navigationslinks (etwa Kontakt oder Über Uns), erscheint im großen Bereich rechts die zugehörige Unterseite, die Sie nun anpassen.

Abbildung 2: Webbuilder bringt zwei Menüs mit. Diese Iconleiste erinnert an Ubuntus Unity-Launcher und erlaubt es, Inhalte per Drag & Drop nach rechts auf die Arbeitsfläche zu ziehen.

Abbildung 3: Hier finden Sie mehr Widgets als im ersten Menü, indem Sie die einzelnen Unterpunkte aufklappen. RSS-Feeds und Flickr-Elemente gibt es unter “Soziales Netzwerk”.

Hier im Beispiel greifen wir zum Theme Yang Media (de) und verwandeln es in eine EasyLinux-Seite. Dafür brauchen wir einen zusätzlichen Link in der Navigation, den wir Heftarchiv nennen. So einen Link legen Sie an, indem Sie die Maus oben links auf Hinzufügen schieben und aus dem Aufklappmenü Seite erstellen wählen. Anschließend bearbeiten Sie die neue Seite, die anfangs aus einem leeren Design besteht (Abbildung 3).

Aus Webbuilders Perspektive besteht eine Webseite aus mehreren Elementen, die Sie wie ein Puzzle anordnen. Wollen Sie zum Beispiel einen Text ändern, klicken Sie auf diesen. Webbuilder umrandet die Auswahl und zeigt nun daneben ein kleines Menü an, das stets ähnliche Funktionen anbietet (Abbildung 4). Über das rote Kreuzchen rechts löschen Sie die Textpassage, über die gekreuzten Pfeile in der Mitte verschieben Sie das Puzzleteil. Über das Zahnrad ganz links bearbeiten Sie den Inhalt des Elements. Bei Textelementen erscheint dann oberhalb eine weitere Menüleiste, über die Sie etwa die Schriftart und Schriftgröße festlegen, aber auch eine Farbe wählen.

Abbildung 4: Webbuilder behandelt Texte, Bilder und Widgets als einzelne Elemente, die Sie in einem Rutsch bearbeiten. Dafür steht Ihnen das gezeigte Menü zur Verfügung.

Wenn Sie HTML- und CSS-Kenntnisse haben, können Sie diese verwenden, denn einzelne Feinheiten lassen sich über ein CSS-Stylesheet festlegen. Auch hierzu ein Beispiel: Auf der Startseite der Designvorlage steht der Text schnell. Den wollen wir zu EasyLinux ändern. Das Wort passt allerdings nicht in den Kasten und sähe auch unattraktiv aus, wenn wir es einfach verkleinern. Splitten wir es in zwei Wörter, überlappen sich Easy und Linux so, dass der i-Punkt von Linux verschwindet. Webbuilder bietet keine Möglichkeit, den Zeilenabstand zu verändern – zumindest nicht über die grafische Oberfläche. Also markieren Sie den Text und klicken auf das Zahnrad, um ihn zu bearbeiten. In der Schaltfläche zur Textbearbeitung klicken Sie auf HTML. Nun erscheint in der Fußleiste ein Reiter HTML, der den zum Text gehörenden HTML-Code anzeigt (Abbildung 5). Aus

"font-size: 116px;"

machen Sie

"font-size: 116px; line-height: 80%;"

und klicken auf Änderungen speichern. In der Vorschau sehen Sie nun die beiden Worte mit ausreichendem Abstand. Alternativ tragen Sie gängige CSS-Befehle [4] in den Reiter CSS ein.

Abbildung 5: Es ist auch im Webbuilder möglich, eigenen HTML- und CSS-Code zu ergänzen.

Auch die Aufteilung der Reihen und Spalten spielt auf einer Webseite eine wichtige Rolle. Wollen Sie diese ändern, klicken Sie oben rechts auf die Schaltfläche Reihen/Spalten bearbeiten. Markieren Sie einen durchgehenden Bereich, den Sie in Spalten unterteilen wollen. Bewegen Sie die Maus auf die rechte Seite, erscheint ein kleiner blauer Button, auf dem Sie das mittlere Icon anklicken. Ein Fenster zeigt Ihnen jetzt, in wie viele Teile Sie die Zeile zerlegen können. Um vorhandene Spalten und Zellen zu löschen, müssen Sie im Vorfeld ihre Inhalte entfernen.

Videos, Maps und mehr

Zumindest in der Pro-Version von Webbuilder lassen sich zudem zahlreiche weitere Inhalte einbinden, etwa Videos und Social-Media-Daten (Abbildung 6). Um das umzusetzen, rufen Sie auf der linken Seite wieder die Ubuntu-artige Menüleiste auf und ziehen zum Beispiel das Video-Icon an eine passende Stelle in der Arbeitsfläche. Hier erscheint nun ein Testvideo. Um das auszuwechseln, klicken Sie auf dieses und dann auf das Zahnrad, um die Eigenschaften aufzurufen. Nun tragen Sie in das große Feld den “Embedded Code” für ein anderes Video auf YouTube, Vimeo oder einer anderen Videoplattform ein – den Link finden Sie meist auf den Videowebseiten selbst. Der Vorgang entpuppte sich im Test als etwas hakelig, da das Feld mit dem Code beim Bearbeiten plötzlich verschwindet, was ein Feintuning schwierig macht. Mitunter erscheint das Video nicht im Editor, sondern erst dann, wenn Sie die Seite veröffentlichen. Das geht schon, aber Sie müssen dann in den Bearbeitungsmodus zurück und die halbfertige Seite ist online. Das Problem betrifft übrigens auch die Karten von Google Maps.

Abbildung 6: Verwendbare Widgets von Webuilder: 1) Flickr-Bilder 2) Twitter Schlagwort-Suchen 3) RSS-Feeds 4) Bilder-Karrussels und 5) Google-Maps-Karten.

Interessant ist das Karussell-Widget: Sie verknüpfen es mit einer Anzahl an Bildern, die sich dann dynamisch ein- und ausblenden. Sinnigerweise sollten die Bilder dieselbe Größe besitzen. Auch das Flickr-Widget macht Spaß (Widgets / Soziales Netzwerk / Flickr): Es zeigt die Suchergebnisse einer Flickr-Suche in Form von Bildern an. Sie geben einen Suchbegriff (Keyword) oder einen Nutzernamen (Nutzer) ein und lassen sich jeweils die neuesten Bilder dazu auf der Webseite anzeigen. Wie viele Bilder das Widget anzeigt, bestimmen Sie in den Eigenschaften. Auf ähnliche Weise binden Sie auch Twitter-Feeds, Twitter-Nutzer und RSS-Feeds ein. Wollen Sie mit den Besuchern der Webseite interagieren, legen Sie unter einem Artikel jeweils ein Feld für Kommentare an (Widget / Inhalt / Kommentare). Daneben können Sie eine Leiste positionieren, über die Ihre Leser einen Artikel in den sozialen Medien veröffentlichen sowie einen Like-Button für Facebook-Nutzer.

E-Commerce und Veröffentlichung

Planen Sie letztlich auch, Waren über die Webseite zu verkaufen, legen Sie auf einfache Weise eine Bezahlmöglichkeit fest. Dazu verlassen Sie den Reiter Design und wechseln zu Verwalten. Hier tragen Sie im Bereich E-Commerce Ihre Google-Checkout- oder PayPal-Daten ein (Abbildung 7). Dann taucht ein Widget namens Warenkorb auf, das Sie in Ihre Webseite integrieren. Das Kauf-Interface bauen Sie über die Formular-Widgets und indem Sie eine Datenbank anlegen.

Abbildung 7: Nutzen Sie Google Checkout oder PayPal, integrieren Sie einen Warenkorb auf der Webseite.

Im Reiter Verwalten legen Sie nämlich noch weitere Parameter fest. In den allgemeinen Website-Einstellungen geben Sie dem Kind einen Namen und beschreiben den Zweck der Seite. Auf Wunsch legen Sie auch ein Favicon fest, also ein kleines Bild, das links in der URL-Leiste erscheint. Im Bereich SEO Einstellungen (SEO steht für “search engine optimization”) sorgen Sie dafür, dass Nutzer Ihre Webseite auch über Suchmaschinen besser finden, indem Sie das Suchergebnis für die Nutzer verständlich formulieren. Unter Kommentare verwalten Sie die Benutzerkommentare, falls Sie das entsprechende Modul einsetzen. Bleibt noch der Eintrag Datenbank, über den Sie Datenbanken hinzufügen, die Ihre Benutzer dann mit Hilfe von Formularen füllen. Die vorhandene Kontaktdatenbank verwenden Sie als Vorlage. Über Veröffentlichen bringen Sie die Seite schließlich ins Internet – können diese aber auch nachträglich noch bearbeiten.

Fazit

Nach einer Eingewöhnungszeit geht die Arbeit mit Webbuilder recht gut von der Hand. Die Module funktionieren (mit kleinen Einschränkungen) und ersparen Ihnen Arbeit beim Bauen der Seite. Wollen Sie soziale Medien, Videos, dynamische Elemente oder einen Shop integrieren, greifen Sie zur Profi-Version, für einen statischen Infoauftritt genügt auch die Basic-Variante. Webbuilder zeigt: Fertigwebseiten bieten sich durchaus als Alternative zu komplexeren selbst verwalteten Seiten an, wenn Sie mit den Einschränkungen leben können. In den folgenden Artikeln lesen Sie, wie Sie mit einem Content Mangagement System eine eigene Seite aufsetzen, ohne sich auf einen Baukasten zu beschränken.