Adobe Brackets simple use graphic tutorial

Adobe Brackets is an open source, simple and powerful integrated development environment for HTML, CSS and JavaScript. It supports adding plug-ins to provide additional functional extensions. Currently available plug-ins support adding debugging, browser-specific CSS prefixes, JSDoc annotations, etc. The following is a brief introduction to the use and settings of Brackets:

Adobe Brackets v1.13 official English installation version

• Type: Web Design
• Size: 69.6MB
• Language: Multilingual
• Time: 2018-06-20

check the details

1. Project Setup

1. Open Brackets. The entire interface is very simple. The top menu bar only provides the function of exiting the editor by clicking file > exit. On the left is the file tree of the project organization structure. Use Ctrl/Cmd+Shift+H to call out and close the file tree. The right side is the editing area, the top is the toolbar, the middle is the document area, and the bottom is the prompt area.

2. Open the project. Use the File > Open Folder command to open the project folder. The project name in the file tree on the left is updated to the project folder name, and the file tree is updated to the file tree of the current project.

Click the left mouse button on the project name to pop up the project editing menu. The editing menu will display historical projects and project editing commands.

Open Folder command: Open a new project.

Project Settings command: Set the web address of the current project, which will be used when debugging and previewing the page.

Setting requirements: The web address must start with http://.

As shown in the figure above, when set to http://127.0.0.1/demo/slide, the corresponding page will be opened through the web address when previewing in the browser.

If not set, the page will be opened using the file's drive letter address.

2. File Editing

Click index.html in the file tree and the index.html document will open in the main area.

1. Brackest will detect whether the document complies with the HTML specification. As shown in the figure below, there is a style block on line 20 that needs to be placed in the head node.

2. Place the cursor on a tag name with a class or id attribute and press Ctrl/Cmd + E ("Edit") or exit editing. Brackets will search for all CSS files in your project and then open an embedded editor embedded in the HTML file, allowing you to quickly modify the CSS code.

When the current class/id tag has multiple style definitions, the editing window provides a switch button to switch the display style, or you can use Alt + Up/Down arrow keys to switch.

It should be noted that Brackets will detect the current HTML document and all CSS files in the project to find class/id styles, even if some CSS files are not referenced in the current HTML document.

3. Brackets also supports quick preview/editing of JS object definitions. Place the cursor on a JS function name and press Ctrl/Cmd + E ("Edit") or exit editing.

4. Brackets has a built-in color picker that provides RGBa, HEX, and HSLa color encoding formats. Place the cursor on a color code and press Ctrl/Cmd + E ("Edit"). To exit the color picker window, use the Esc key.

3. Instant Preview

Brackets provides instant preview of web pages. When using this function, Brackets calls the Chrome browser to open the current page. After that, after modifying the HTML, CSS, and JavaScript and saving them, the modified content will be immediately responded to the page in the browser without manually refreshing the page. This is one of the biggest highlights of Brackets. Coders with two monitors are blessed. They can display Brackets and Chrome on split screen, and make changes and preview them instantly without switching editors/browsers and refreshing the page.

There are some current limitations of the instant preview feature:

It only works with Chrome as the target browser and you must have Chrome installed.

It relies on the remote debugging feature in the Chrome browser, which is enabled with a command-line flag. On Mac, if you are already using Chrome and launch Instant Preview, Brackets will ask you if you want to restart Chrome to enable remote debugging.

Only one HTML file can be previewed at a time - if you switch to another HTML file, Brackets will close the original preview.

4. Some shortcut keys

Ctrl/Cmd+Shift+H can call out and close the file tree

Ctrl/Cmd + E Quickly preview/edit CSS style/javascript function

Ctrl/Cmd + +/- Zoom in and out the font size of the editing area

Ctrl/Cmd + 0 Reset the editing area font size

Ctrl/Cmd + Alt + P to open the instant preview function

Ctrl/Cmd + / Line Comment

Ctrl/Cmd + Alt + / Block Comment

Note: When commenting CSS and HTML codes, you can only use the block comment shortcut key