Nachdem Sie Web Designer-Quelldateien für Anzeigen und HTML-Seiten geöffnet haben, können Sie zwischen der Codeansicht und der Designansicht wechseln. Die Änderungen, die Sie in der Codeansicht vornehmen, werden in der Designansicht angezeigt. So können Sie sofort testen, wie sich Änderungen in Ihrem Code auf Ihre Designs auswirken.
Zur Codeansicht wechseln:
Klicken Sie rechts oben im Fenster auf die Schaltfläche Codeansicht
.
Die Steuerfelder der Designansicht und einige Menübefehle sind in der Codeansicht nicht verfügbar.
.Einstellungen für Codeansicht
Sie können die Formatierungs- und Editor-Optionen für die Codeansicht in Ihren Einstellungen anpassen, einschließlich der folgenden Einstellungen:
- Farbdesign
- Tastenbelegung
- Zeilenumbruch
- Einzugsgröße
- Automatisches Einrücken
- Automatische Vervollständigung
- Leerzeichen für Tabulatoren verwenden
- Minimap-Sichtbarkeit
Eine vollständige Liste der Optionen finden Sie auf der Seite zum Festlegen von Einstellungen.
Code schreiben
Die folgenden Funktionen erleichtern das Schreiben und Bearbeiten von Code. Außerdem erfahren Sie in diesem Abschnitt, wie Sie in der Codeansicht innerhalb Ihres Dokuments oder zwischen Dateien navigieren.
Zoom
Mit den Steuerelementen für den Zoom (- und +) rechts auf der Fußzeile können Sie die Codetextgröße ändern. Die festgelegte Zoomstufe wird von Google Web Designer standardmäßig gespeichert.
Codeblöcke minimieren
Verwenden Sie die Pfeile am linken Rand, um Codeblöcke zu minimieren und zu maximieren.
Einzug
Neue Zeilen werden in Google Web Designer bei der Eingabe automatisch eingerückt. Wenn ein Codeblock nicht richtig eingerückt ist, z. B. wenn Sie Code aus einer anderen Datei kopiert und eingefügt haben, können Sie den Code auswählen und die Tabulatortaste drücken, um ihn einzurücken.
Automatische Codevervollständigung
Google Web Designer zeigt während der Eingabe standardmäßig Vorschläge an. Wenn Sie diese Einstellung deaktiviert haben, können Sie Strg + Leertaste drücken, um die automatische Vervollständigung auszulösen.
Sprachmodus
Bei Google Web Designer basiert die Syntaxfärbung und die automatischen Vervollständigung von Code auf der Dateierweiterung. Um den Standardsprachmodus zu überschreiben, klicken Sie in der Fußzeile auf die aktuelle Sprache und wählen Sie im Pop-up-Menü die neue Sprache aus.
GreenSock-JavaScript-Bibliotheken
Sie können beliebte Animationstools von GreenSock direkt über einen Menübefehl hinzufügen, sofern Ihre Umgebung auf Display & Video 360 festgelegt oder Ihr Projekt eine HTML-Seite ist.
GreenSock-Bibliothek einfügen:
- Achten Sie darauf, dass Sie sich in der Codeansicht befinden.
- Wählen Sie im Menü Datei die Option JS-Bibliothek hinzufügen > GreenSock aus.
- Wählen Sie eine Bibliothek in der Liste aus.
Wiederholen Sie diesen Vorgang, um mehrere Bibliotheken hinzuzufügen.
Unterschiede zum veröffentlichten Code
Die Codeansicht spiegelt nicht unbedingt wider, wie der Code aussieht, wenn Sie das Dokument veröffentlichen. Der Code, den Sie beim Erstellen des Dokuments sehen, kann komprimiert sein, um Platz zu sparen. Mancher Code wird in der Codeansicht möglicherweise überhaupt nicht angezeigt, ist aber in der veröffentlichten Datei enthalten.