AdobeBrackets simple use of graphic tutorials _ HTML/Xhtml _ web page creation

AdobeBrackets is an open-source, concise, and powerful integrated development environment for HTML, CSS, and JavaScript. It supports adding plug-ins to provide additional function extensions, currently, available plug-ins such as support for error detection, browser-specific CSS prefixes, and JSDoc annotations, the following section briefly introduces how to use and set up Brackets. Adobe Brackets is an open-source, concise, and powerful integrated development environment for HTML, CSS, and JavaScript. It supports adding plug-ins to provide additional function extensions, currently, available plug-ins such as support for adding debugging, browser-specific CSS prefixes, and JSDoc annotations. The following section briefly introduces the use and settings of Brackets:

Software Name:

Adobe Brackets v1.4 installation in English

Software size:

32 MB

Updated on:

Septem

　　I. Project Settings

1. open Brackets. The entire interface is simple. The top menu bar only provides the file> exit editor function. The left side is the file tree of the project organization structure. You can 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 and run 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 button on the project name to bring up the project editing menu. The editing menu displays 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 in page debugging and preview.

Configuration Requirements: the web address must start with http.

　　

For example, when http: // 127.0.0.1/demo/slide is set, the corresponding page is opened through the web address during browser preview.

　　

If not set, the page is opened through the drive letter address of the file.

　　

　　Ii. File editing

Click "index.html" in the file tree to open the "index.html" document in the main website.

　　

1. Brackest checks whether the document complies with html specifications. As prompted, there is a style block in the 20 rows 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 searches for all CSS files under the project and opens an embedded editor embedded in the HTML file, allowing you to quickly modify the CSS code.

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

Note that Brackets checks the current html document and all CSS files in the project to find the class/id style, 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, press Ctrl/Cmd + E ("edit"), or exit editing.

4. The Brackets built-in color filter provides color encoding formats such as RGBa, HEX, and HSLa. Place the cursor on a color code and press Ctrl/Cmd + E ("edit"). The Esc key is required to exit the color picker window.

　　3. Instant Preview

Brackets provides instant Web Page Preview. When this function is used, Brackets calls the Chrome browser to open the current page. After html, css, and javascript are modified and saved, the modified content will immediately respond to the page in the browser, you do not need to manually refresh the page. This is one of the biggest highlights of Brackets. coder with two monitors is blessed, and Brackets and chrome can be displayed on a split screen, instantly modifying instant preview without switching between Editor/browser and refreshing pages.

Current restrictions on the instant preview function:

It only applies to Chrome as the target browser. You must install Chrome.

It depends on the remote debugging function in the Chrome browser, which is a command line flag enabled. On Mac, if you are already using the Chrome browser, start "instant preview" and Brackets will ask if you want to restart the Chrome browser to enable remote debugging.

You can only preview one HTML file at the same time-if you switch to another HTML file, Brackets will disable the original preview.

　　Iv. 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 ++/-zoom in and out the font size of the editing area

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

Ctrl/Cmd + Alt + P enable the instant preview function

Ctrl/Cmd +/line comment

Ctrl/Cmd + Alt +/block comment

Note: You can only use block comment shortcuts when commenting on css and html code.