Webgestaltung

Kostenloser Webdesigner-Editor von Google

Das neue Projekt "Web Designer" von Google ist weit mehr als nur ein einfacher HTML-Editor. Er bietet sowohl Einsteigern als auch versierten Entwicklern eine ideale Arbeitsumgebung.

Google Web Designer

© Hersteller/Archiv

Der Google Webdesigner wartet mit einem großen Leistungsumfang, ausgezeichneter Bedienung und vielen interaktiven Features auf.

Zur Überraschung der Web-Gemeinde hat Google einen Webeditor veröffentlicht. Die Idee dahinter ist, den Anwendern ein einfaches Tool zur Gestaltung von Werbebannern an die Hand zu geben. Doch letztendlich handelt es sich um einen vollständigen Editor für HTML, CSS, XML und JavaScript. Um einen sehr guten dazu, den Sie als Entwickler sehr schätzen werden.

Der Leistungsumfang des Google Web Designers übersteigt den gewöhnlicher HTML-Editoren bei Weitem. Das Programm stellt modernste interaktive Features zur Verfügung, erzeugt sauberen HTML5- und CSS3-Code, bietet ein ausgewogenes Verhältnis zwischen Code- und WYSIWYG-Unterstützung und last, but not least ist die Software kostenfrei.

Die Resultate funktionieren laut Google auf jedem Gerät. Leider besteht die Einschränkung, dass Sie keine Dateien öffnen können, die Sie nicht mit dem Tool erstellt haben. Wenngleich sich Google Web Designer noch in der Beta-Phase befindet, ist das Programm auch für den anspruchsvollen Anwender schon zum jetzigen Zeitpunkt bestens einsatzfähig. Sie können das Tool kostenfrei über die Web Designer Homepage beziehen.

Tipp: Webdesign mit Flash

Es ist für die Betriebssysteme Windows 7, 8 und Mac OS X 10.7.x oder höher konzipiert und bietet eine Design- und eine Codeansicht, zwischen denen Sie nach Belieben wechseln können. Änderungen werden vom anderen Teil sofort übernommen. An ein paar Beispielen wollen wir die Funktionen des neuen Designers zeigen. 

Google Webdesigner

© Weka

Mit dem 3D-Objektdrehungs- Tool können Sie ein Objekt in verschiedene Richtungen drehen.

Ads für Profis

Für Online-Anzeigen (Ads) bietet das Tool besondere Funktionen: Dafür gibt es drei verschiedene Projekttypen: Banner, Expandable und Interstitial. Für eine normale HTML-Seite legen Sie einfach eine neue Datei an, in gewohnter Weise über das Datei- Menü (alternativ Strg+N). Dieses bietet auch eine Option, Ads zu veröffentlichen (die gleiche Option findet sich auch als Button unterhalb des Arbeitsbereichs).

Die Komponenten im entsprechenden Bereich auf der rechten Leiste können bis jetzt nur für Anzeigen genutzt werden. Das Gleiche gilt auch für den Ereignisbereich, hier können Sie eine Komponente mit bestimmten Ereignissen verbinden. Allerdings will Google diesbezüglich noch nachbessern und Komponenten und Ereignisse zukünftig auch für die konventionellen Projekte verfügbar machen.

Google Web Designer: Videos einbinden mit HTML5

Im Übrigen stehen für diese aber jetzt schon alle Funktionen zur Verfügung, die man von einem modernen HTML-, CSS-, XML- bzw. JavaScript-Editor erwartet. Außerdem können Sie den für eine Anzeige generierten Code per Copy & Paste und eventuellen Anpassungen gegebenenfalls auch im Code Ihrer HTML-Datei verwerten.

Google Webdesigner

© Weka Screenshot

Symbolleisten für Tools (linke Seite) und Optionen: Die obere Optionen-Leiste ist kontextsensitiv und bietet Optionen zum Einfügen von HTMLElementen, wenn in der Tool-Leiste das Tag-Tool aktiviert ist.

WYSIWYG und noch viel mehr

Für ein und dieselbe Aufgabe gibt es in Google Web Designer meist mehrere Alternativen. Bilder und Grafiken können Sie natürlich einbinden, indem Sie das Image-Tag direkt in den HTML-Code schreiben. Um in die Codeansicht zu wechseln, klicken Sie unterhalb der Arbeitsfläche auf den entsprechenden Button. In der Designansicht können Sie das Image-Tag mit dem Tag-Tool folgendermaßen generieren lassen.

Klicken Sie in der Tool-Leiste am linken Fensterrand auf das Tag-Tool (das vierte Symbol von oben). Die obere Leiste zeigt Optionen für das aktuell ausgewählte Tool an. Um ein Image-Tag generieren zu lassen, klicken Sie hier auf das Image-Element (zweites Symbol von links). Ziehen Sie anschließend auf der Designfläche einen Rahmen mit den gewünschten Ausmaßen des Bildes. Google Web Designer generiert im Code das <img>-Tag mit einem Style Sheet, das die entsprechenden Eigenschaften definiert (width, height, left und top).

Google Webdesigner

© Weka Screenshot

Im Eigenschaftenfenster können Sie die Werte für die Attribute des in der Designoberfläche ausgewählten Elements direkt setzen.

Auch diese können Sie nachträglich direkt im Code oder in der Designansicht anpassen. Hier können Sie z. B. den Rahmen ziehen oder stauchen oder an eine andere Position verschieben, die oben genannten Eigenschaften ändern sich dann automatisch. Die Werte für Höhe und Breite, die Position und weitere Attribute können Sie in der Designansicht aber auch direkt im Eigenschaftenfenster bearbeiten.

Beachten Sie, dass in beiden Fällen das entsprechende Element - hier das Image-Element - auf der Designoberfläche ausgewählt sein muss. Um ein Element auszuwählen, klicken Sie in der Tool-Leiste auf das Auswahl-Tool - alternativ können Sie auch die Taste V drücken - und klicken anschließend in der Arbeitsfläche einmal auf das Element. Ausgewählte Elemente sind an einer blauen Umrandung zu erkennen.

Google Webdesigner

© Weka Screenshot

Die Vorschau bietet eine Auswahl aller auf dem Computer zur Verfügung stehenden Browser.

Auf die beschriebene Weise können Sie auch jedes andere Tag erstellen. Wenn das Element nicht direkt in den Tool-Optionen angeboten wird, klicken Sie hier auf Benutzerdefiniertes Element (Symbol mit je einer öffnenden und schließenden spitzen Klammer) und tippen den Namen des Tags im nebenstehenden Feld ein. Eine Vorschlagsliste, deren Einträge Sie übernehmen können, erscheint bereits nach Eingabe des ersten Zeichens.

Tipp: Für alle Änderungen gibt es eine Vorschaufunktion: Während der Entwicklungsphase können Sie den Stand Ihres Webprojekts im Browser Ihrer Wahl betrachten. Klicken Sie unterhalb der Arbeitsfläche auf die kleine Schaltfläche neben dem Vorschau-Button, um alle installierten Browser anzuzeigen. Wenn Sie direkt auf den Vorschau-Button klicken, öffnet der Standardbrowser.

Schließlich können Sie Bilder in die HTML- Seite einbinden, indem Sie diese vom Windows-Explorer auf die Arbeitsfläche ziehen. Google Web Designer generiert daraufhin im Code das Image-Tag mit einem Verweis auf das Bild und einem Style Sheet (z. B. <img src="images/PCM-Logo-rgb4_01. png" class="gwd-img-j230">). Die Namen von Style-Sheet-Klassen beginnen übrigens alle mit gwd, was für Google Web Designer steht, gefolgt von einem Bindestrich und dem Namen des Elements. Aber selbst das könnten Sie im Code ohne Weiteres ändern.

Fazit

Google Web Designer bietet zwar nicht den Funktionsumfang von Dreamweaver und ersetzt auch kein Content-Management-System. Mit dem Fokus auf Ads ist er auch keine Komplettlösung für Webdesigner. Nach unserer Einschätzung rangiert der Web Designer aber deutlich vor den anderen konventionellen HTML-Editoren. Der Leistungsumfang ist groß, die Bedienung ausgezeichnet, es gibt viele interaktive Features, und der erzeugte Code ist sauber. 

Mehr zum Thema

social business, tools, software
Skype, Teamviewer und Co.

Skype, Teamviever oder doch Prezi? Wir stellen die Vor- und Nachteile verschiedener Webkonferenz-Lösungen vor.
HTML 5
Webgestaltung

Google Web Designer ist spezialisiert auf HTML5. Ein Vorteil dieses Standards ist das einfache Einbinden von Videos mit dem Element video. Wir zeigen…
Incomedia WebAnimator
Software für Animationen

Incomedia hat mit dem Webanimator eine Applikation entwickelt, mit der Laien ohne Vorkenntnisse aufwendige Web-Animationen herstellen können.
Syspectr
Systemverwaltung

Mit der Web-Anwendung Syspectr behalten Sie die Windows-Systeme im Unternehmen im Griff. Wir haben die Software im Test.
Powerpoint-Präsentation
Anleitung

Für eine gute Powerpoint-Präsentation gilt es einiges zu beachten - vom Design über Gliederung bis hin zu Vorlagen. Wir erklären die Grundlagen.