Webgestaltung

Kostenloser Webdesigner-Editor von Google

28.2.2014 von Walter Saumweber

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.

ca. 4:50 Min

Mehr zu Google

Business-it
VG Wort Pixel
Google Web Designer
Der Google Webdesigner wartet mit einem großen Leistungsumfang, ausgezeichneter Bedienung und vielen interaktiven Features auf.
© Hersteller/Archiv

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
Mit dem 3D-Objektdrehungs- Tool können Sie ein Objekt in verschiedene Richtungen drehen.
© Weka

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
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.
© Weka Screenshot

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
Im Eigenschaftenfenster können Sie die Werte für die Attribute des in der Designoberfläche ausgewählten Elements direkt setzen.
© Weka Screenshot

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
Die Vorschau bietet eine Auswahl aller auf dem Computer zur Verfügung stehenden Browser.
© Weka Screenshot

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 zu Google

Nächste passende Artikel

Chrome Logo

Browser

Google Chrome: Neues Warnsystem für Malware-Addons
Gemini soll auch die Google-Suche vereinfachen.

Künstliche Intelligenz

Google Gemini: KI-Konkurrenz für ChatGPT soll im…
Google

Fitness

Fitbit bringt im Herbst neue App an den Start
Schlüssel statt Passwörter: So funktioniert ein sicheres Login mit einem Zugangsschlüssel

Passkey in der Praxis

Schlüssel statt Passwörter: So funktioniert ein…
Google Bard

KI-Assistenz

Google Bard: Deutschland-Start mit neuen…
Ein Sicherheitsschloss ist auf die Rückseite eines Bildschirm angebracht.

Neues Update

Chrome: Google schließt kritische…
Die rote Abspielen-Taste von YouTube (YouTube Logo) ist zu sehen und rote Blasen auf schwarzem Hintergrund

Google startet eigene…

YouTube plant Einstieg in die Gaming-Welt
Drei Laptops von Chromebooks

Für anspruchsvolle Nutzer

Chromebook X: Google plant leistungsfähigere…
Überrasch’ mich!
mehrweniger

Mehr zum Thema

social business, tools, software

Skype, Teamviewer und Co.

Die besten Social Business Tools

Mit Outlook 2010 haben Sie alle Kontakte übersichtlich im Blick.

Import, Export, Freigabe & Co.

Outlook 2010: Kontakte richtig organisieren - 10 Tipps

HTML 5

Webgestaltung

Google Web Designer: Videos einbinden mit HTML5

Syspectr

Systemverwaltung

O&O Syspectr im Test

kwiksupport.me im Test

Gratis-Fernwartungssoftware

kwiksupport.me im Test

Weiter zur Startseite