Einfaches Grafik-Tutorial zur Verwendung von Adobe Brackets

Adobe Brackets ist eine Open Source-, einfache und leistungsstarke integrierte Entwicklungsumgebung für HTML, CSS und JavaScript. Sie unterstützt das Hinzufügen von Plug-Ins, um zusätzliche Funktionserweiterungen bereitzustellen. Derzeit verfügbare Plug-Ins unterstützen das Hinzufügen von Debugging, browserspezifischen CSS-Präfixen, JSDoc-Anmerkungen usw. Im Folgenden finden Sie eine kurze Einführung in die Verwendung und Einstellungen von Brackets:

Offizielle englische Installationsversion von Adobe Brackets v1.13

• Typ: Webdesign
• Größe: 69,6 MB
• Sprache: Mehrsprachig
• Zeit: 2018-06-20

Details ansehen

1. Projekt-Setup

1. Öffnen Sie Brackets. Die gesamte Benutzeroberfläche ist sehr einfach. Die obere Menüleiste bietet nur die Funktion, den Editor durch Klicken auf Datei > Beenden zu beenden. Links ist der Dateibaum der Projektorganisationsstruktur zu sehen. Mit Strg/Cmd+Shift+H können Sie den Dateibaum aufrufen und schließen. Die rechte Seite ist der Bearbeitungsbereich, oben die Symbolleiste, in der Mitte der Dokumentbereich und unten der Eingabeaufforderungsbereich.

2. Öffnen Sie das Projekt. Öffnen Sie den Projektordner mit dem Befehl Datei > Ordner öffnen. Der Projektname im Dateibaum links wird auf den Namen des Projektordners aktualisiert und der Dateibaum wird auf den Dateibaum des aktuellen Projekts aktualisiert.

Klicken Sie mit der linken Maustaste auf den Projektnamen, um das Projektbearbeitungsmenü aufzurufen. Im Bearbeitungsmenü werden frühere Projekte und Befehle zur Projektbearbeitung angezeigt.

Befehl „Ordner öffnen“: Öffnen Sie ein neues Projekt.

Befehl „Projekteinstellungen“: Legen Sie die Webadresse des aktuellen Projekts fest, die beim Debuggen und bei der Vorschau der Seite verwendet wird.

Einstellungsvoraussetzungen: Die Webadresse muss mit http:// beginnen.

Wie in der Abbildung oben gezeigt, wird bei der Einstellung http://127.0.0.1/demo/slide bei der Vorschau im Browser die entsprechende Seite über die Webadresse geöffnet.

Wenn nicht festgelegt, wird die Seite unter Verwendung der Laufwerksbuchstabenadresse der Datei geöffnet.

2. Dateibearbeitung

Klicken Sie im Dateibaum auf index.html und das Dokument index.html wird im Hauptbereich geöffnet.

1. Brackest erkennt, ob das Dokument der HTML-Spezifikation entspricht. Wie in der folgenden Abbildung gezeigt, gibt es in Zeile 20 einen Stilblock, der im Kopfknoten platziert werden muss.

2. Platzieren Sie den Cursor auf einem Tag-Namen mit einem Klassen- oder ID-Attribut und drücken Sie Strg/Befehlstaste + E („Bearbeiten“) oder beenden Sie die Bearbeitung. Brackets sucht nach allen CSS-Dateien in Ihrem Projekt und öffnet dann einen in die HTML-Datei eingebetteten Editor, mit dem Sie den CSS-Code schnell ändern können.

Wenn das aktuelle Klassen-/ID-Tag mehrere Stildefinitionen hat, bietet das Bearbeitungsfenster eine Umschalttaste zum Umschalten des Anzeigestils, oder Sie können zum Umschalten die Tasten Alt + Auf-/Ab-Pfeil verwenden.

Es ist zu beachten, dass Brackets das aktuelle HTML-Dokument und alle CSS-Dateien im Projekt erkennt, um Klassen-/ID-Stile zu finden, auch wenn auf einige CSS-Dateien im aktuellen HTML-Dokument nicht verwiesen wird.

3. Brackets unterstützt auch die schnelle Vorschau/Bearbeitung von JS-Objektdefinitionen. Platzieren Sie den Cursor auf einem JS-Funktionsnamen und drücken Sie Strg/Cmd + E („Bearbeiten“) oder beenden Sie die Bearbeitung.

4. Brackets verfügt über einen integrierten Farbwähler, der die Farbkodierungsformate RGBa, HEX und HSLa bereitstellt. Platzieren Sie den Cursor auf einem Farbcode und drücken Sie Strg/Cmd + E („Bearbeiten“). Um das Farbauswahlfenster zu verlassen, verwenden Sie die Esc-Taste.

3. Sofortige Vorschau

Brackets bietet eine sofortige Vorschau von Webseiten. Wenn Sie diese Funktion verwenden, ruft Brackets den Chrome-Browser auf, um die aktuelle Seite zu öffnen. Anschließend werden HTML, CSS und JavaScript geändert und gespeichert. Der geänderte Inhalt wird dann sofort auf der Seite im Browser angezeigt, ohne dass die Seite manuell aktualisiert werden muss. Dies ist eines der größten Highlights von Brackets. Programmierer mit zwei Monitoren haben Glück. Sie können Brackets und Chrome auf geteiltem Bildschirm anzeigen, Änderungen vornehmen und diese sofort in der Vorschau anzeigen, ohne zwischen Editoren/Browsern wechseln und die Seite aktualisieren zu müssen.

Für die Sofortvorschau gelten derzeit einige Einschränkungen:

Es funktioniert nur mit Chrome als Zielbrowser und Sie müssen Chrome installiert haben.

Es basiert auf der Remote-Debugging-Funktion im Chrome-Browser, die mit einem Befehlszeilenflag aktiviert wird. Wenn Sie auf dem Mac Chrome bereits verwenden und Instant Preview starten, werden Sie von Brackets gefragt, ob Sie Chrome neu starten möchten, um das Remote-Debugging zu aktivieren.

Es kann jeweils nur eine HTML-Datei in der Vorschau angezeigt werden. Wenn Sie zu einer anderen HTML-Datei wechseln, schließt Brackets die ursprüngliche Vorschau.

4. Einige Tastenkombinationen

Mit Strg/Cmd+Shift+H kann der Dateibaum aufgerufen und geschlossen werden.

Strg/Befehl + E Schnelle Vorschau/Bearbeitung von CSS-Stilen/Javascript-Funktionen

Strg/Befehl + +/- Vergrößern und Verkleinern der Schriftgröße im Bearbeitungsbereich

Strg/Befehl + 0 Setzt die Schriftgröße des Bearbeitungsbereichs zurück

Strg/Cmd + Alt + P zum Öffnen der Sofortvorschaufunktion

Strg/Befehl + / Zeilenkommentar

Strg/Befehl + Alt + / Kommentar blockieren

Hinweis: Beim Kommentieren von CSS- und HTML-Codes können Sie nur die Tastenkombination für Blockkommentare verwenden