Adobe Brackets simple use graphic tutorial_HTML/Xhtml_web page production

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

　1. Project settings

1. Open Brackets. The entire interface is very simple. The top menu bar only provides the file > exit function to exit the editor. 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 upper part is the toolbar, the middle part is the document area, and the lower part is the prompt area.

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

Left-click 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 during page debugging and preview.

Setting requirements: It must be a web address starting with http://.

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

If there is no setting, the page will be opened through the drive letter address of the file.

　2. File editing

Click index.html in the file tree to open the index.html document 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 the label name of a class or id attribute, and press Ctrl/Cmd E ("Edit") or exit editing. Brackets will search all CSS files under the 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. You can also use the Alt Up/Down arrow keys to switch.

It should be noted that Brackets will detect the current HTML document and all CSS files under 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, providing color coding forms of RGBa, HEX, and HSLa. 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 real-time 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 the need to manually refresh the page. This is one of the biggest highlights of Brackets. Coders with two monitors are blessed. Brackets and chrome can be displayed in split-screen mode, allowing for instant preview of modifications without the need to switch editors/browsers and refresh the page.

Some limitations of the current instant preview function:

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

It relies on the remote debugging feature in Chrome, which is enabled with a command line flag. On a 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 the same 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 Quick preview/edit css style/javascript function

　Ctrl/Cmd /- enlarge or reduce the font size of the editing area

　Ctrl/Cmd 0 reset the font size of the editing area

　Ctrl/Cmd Alt P opens the instant preview function

　Ctrl/Cmd / line comment

　Ctrl/Cmd Alt / Block comment

Note: Only block comment shortcut keys can be used when commenting on css code and html code