In der Codeansicht navigieren

In der Codeansicht können Sie andere Projektdateien sehen, zu verschiedenen Stellen in Ihrem Dokument springen und sich Ihren Code ansehen.

Dateien ansehen

Wenn sich Google Web Designer in der Codeansicht befindet, wird auf dem Steuerfeld Dateien links eine Liste mit Dateien und Unterordnern in Ihrem Projektordner angezeigt. Das Steuerfeld wird automatisch aktualisiert, um Änderungen der Liste zu berücksichtigen.

Dateien öffnen

Wählen Sie im Steuerfeld eine Datei aus, um sie in einem neuen Tab zu öffnen. Sie können die folgenden Dateitypen öffnen:

• HTML-Quelldateien, die in Web Designer erstellt wurden
• Andere HTML-Dateien *
• CSS*
• JS*
• JSON*
• SVG*
• XML*

^{* Nur zur Bearbeitung in der Codeansicht}

Sie können auch Bilddateien (JPG/JPEG, PNG, GIF) zur Ansicht öffnen. Bewegen Sie den Mauszeiger im Steuerfeld "Dateien" über den Dateinamen eines Bilds, um eine Miniaturansicht einzublenden.

Dateien, die Web Designer nicht öffnen kann, sind ausgegraut.

Wenn Sie Dateien für andere Projekte oder in anderen Ordnern öffnen möchten, können Sie den Menübefehl Datei > Öffnen… verwenden.

Liste der Dateien filtern

Geben Sie einen Teil des Dateinamens in das Feld Dateien filtern  ein, um nur übereinstimmende Dateien anzeigen zu lassen.

Steuerfeld "Dateien" ausblenden

Klicken Sie rechts oben auf die Schaltfläche Minimieren , um die Dateiliste auszublenden. Über die Schaltfläche Maximieren  können Sie sie wieder einblenden.

Im Dokument navigieren

Wenn Sie ein Element in der Designansicht auswählen und zur Codeansicht wechseln, wird der Cursor beim Codeabschnitt für das jeweils ausgewählte Element positioniert.

Zu einer Zeile springen

Klicken Sie auf die Zeilen- oder Spaltennummer in der Fußzeile, um einen neuen Wert einzugeben, und drücken Sie die Eingabetaste.

Minimap verwenden

Auf der Minimap rechts im Fenster ist eine Miniaturversion Ihres gesamten Dokuments in der Codeansicht zu sehen. Der Teil des Codes, der im Editor sichtbar ist, wird in der Minimap hervorgehoben.

Klicken Sie in die Minimap, um zum jeweiligen Abschnitt des Dokuments zu springen, oder ziehen Sie nach oben oder unten, um durch das Dokument zu scrollen.

Sie können die Minimap in den Einstellungen deaktivieren.

Im Code suchen

Text finden:

1. Gehen Sie zu Bearbeiten > Suchen oder drücken Sie Strg+F (Windows) oder ⌘+F(Mac), um die Suchleiste unten im Fenster zu öffnen.
2. Geben Sie einen Suchbegriff in das Feld Suchen… ein.
3. Wählen Sie die gewünschten Suchoptionen aus:
   • Reguläre Ausdrücke (.*)
   • Groß-/Kleinschreibung beachten (Aa)
   • Ganze Wörter ()
   • Auf Auswahl eingrenzen ()
4. Google Web Designer zeigt die Gesamtzahl der Übereinstimmungen an und hebt die erste Übereinstimmung nach der Cursorposition hervor.
   • So finden Sie die nächste Übereinstimmung: Klicken Sie auf  oder drücken Sie Strg+G (Windows) oder ⌘+G (Mac).
   • So finden Sie die vorherige Übereinstimmung: Klicken Sie auf oder drücken Sie Umschalttaste+Strg+G (Windows) oder Umschalt+⌘+G (Mac).
   • Alle Übereinstimmungen auswählen und gleichzeitig bearbeiten: Klicken Sie auf Alle suchen.

Drücken Sie die Esc-Taste oder klicken Sie auf das X, um die Suchleiste zu schließen.

Text suchen und ersetzen

1. Gehen Sie zu Bearbeiten > Suchen/Ersetzen oder drücken Sie Strg+Umschalttaste+F (Windows) oder ⌘+Umschalt+F (Mac), um die Leiste zum Suchen und Ersetzen unten im Fenster zu öffnen.
2. Geben Sie einen Suchbegriff in das Feld Suchen… und den Text, der stattdessen eingefügt werden soll, in das Feld Ersetzen ein.
3. Sie können die gleichen Optionen wie beim Suchen nach Text verwenden (siehe oben), zusätzlich aber Text ersetzen:
   • Klicken Sie auf Ersetzen, wenn die aktuelle Übereinstimmung ersetzt und zur nächsten Übereinstimmung gewechselt werden soll.
   • Klicken Sie auf Alle ersetzen, wenn alle Übereinstimmungen ersetzt werden sollen.

Zur Designansicht wechseln

Klicken Sie rechts oben im Fenster auf die Schaltfläche Designansicht .