亚洲欧美日韩综合系列在线_91精品人妻一区二区_欧美大肥婆一级特大AA片_九色91视频免费观看_亚洲综合国产精品_av中文字幕在线不卡_久久精品色综合网_看黄色视频的软件_无卡无码高清中文字幕码2024_亚洲欧美日韩天堂网

rackets 是一款使用 HTML，CSS，JavaScript 創(chuàng)建的開源的針對(duì) Web 開發(fā)的編輯器。你可能在寧皓網(wǎng)的視頻里見過這款編輯器。實(shí)時(shí)預(yù)覽，快速編輯，跨平臺(tái)，可擴(kuò)展，開源，讓 Brackets 成為一款非常優(yōu)秀的編輯器。

安裝

打開 Brackets.io，點(diǎn)擊 Download Brackets ，網(wǎng)頁會(huì)根據(jù)你的操作系統(tǒng)，為你提供對(duì)應(yīng)版本的 Brackets 編輯器。你也可以在所有發(fā)布版本里面自己來選擇。如果是自己選擇下載，需要注意軟件的格式，一般 .dmg 是用在 Mac 系統(tǒng)上的軟件，.msi 可以在 Windows 系統(tǒng)上安裝。

切換語言

Brackets 支持多種語言，默認(rèn)安裝以后界面上是英文的，你可以選擇自己喜歡的語言。

1. Debug -> Switch Language

2. 點(diǎn)開下拉菜單，選擇你想要的語言

3. 點(diǎn)擊 Reload Brackets

打開目錄

一般開始一個(gè)項(xiàng)目，你可以去新建一個(gè)目錄，把項(xiàng)目所需求的文件放在這個(gè)目錄下面，Brackets 支持打開整個(gè)目錄，通過編輯器邊欄上的樹形結(jié)構(gòu)，可以方便的管理項(xiàng)目文件 。

• 方法一：打開菜單，文件 -> 打開目錄

• 方法二：使用快捷鍵：alt + command + O

這個(gè)目錄的結(jié)構(gòu)會(huì)顯示在編輯器的邊欄上，點(diǎn)開對(duì)應(yīng)的目錄，會(huì)繼續(xù)顯示這個(gè)目錄里所包含的東西。你也可以在不需要邊欄的時(shí)候隱藏它（視圖 -> 隱藏邊欄 或 shift + command + H）。

快速導(dǎo)航

使用快速導(dǎo)航，可以快速找到項(xiàng)目里的文件。

• 方法一：打開菜單：導(dǎo)航 -> 打開快速導(dǎo)航

• 方法二：使用快捷鍵：shift + command + O

直接輸入想要找的文件名稱，Brackets 會(huì)給你一個(gè)包含這個(gè)文件名的文件列表，點(diǎn)擊對(duì)應(yīng)的文件，可以打開這個(gè)文件。

工作區(qū)

打開的文件，會(huì)在 工作區(qū) 里面顯示出來，點(diǎn)擊對(duì)應(yīng)的文件，可以快速地在不同的文件之間切換。已經(jīng)修改的文件沒有保存，在文件名稱的左邊會(huì)顯示一個(gè) 圓點(diǎn)。

實(shí)時(shí)預(yù)覽

• 方法一：打開菜單：文件 -> 實(shí)時(shí)預(yù)覽

• 方法二：使用快捷鍵：alt + command + P

• 方法三：點(diǎn)擊主界面右上角的 閃電 圖標(biāo)

Brackets 會(huì)為你打開一個(gè) Chrome 瀏覽器的窗口，實(shí)時(shí)顯示正在編輯的文檔。也就是，你現(xiàn)在可以去修改文檔里的內(nèi)容，或者文檔所鏈接的樣式表還有腳本文件，所做的修改會(huì)實(shí)時(shí)的在瀏覽器中顯示。注意，在實(shí)時(shí)預(yù)覽時(shí)，你不能使用瀏覽器的開發(fā)者工具，一但打開開發(fā)者工具，實(shí)時(shí)預(yù)覽就會(huì)失效了。

如果不特別指定，Brackets 會(huì)使用內(nèi)置的 Web Server 實(shí)時(shí)預(yù)覽文件，你也可以去為實(shí)時(shí)預(yù)覽指定一個(gè) Web Server ，比如你可能想實(shí)時(shí)預(yù)覽 PHP 文件，那么，你可以使用搭建在本地電腦上的開發(fā)環(huán)境，把項(xiàng)目目錄放在你自己的服務(wù)器的目錄里面，比如 semantic 這個(gè)目錄的下面，這樣，使用 localhost/semantic 這個(gè)地址可以訪問到你的項(xiàng)目，那么你可以把這個(gè)地址做為實(shí)時(shí)預(yù)覽的基本地址。

打開 文件 -> 項(xiàng)目設(shè)置，然后輸入預(yù)覽的地址，例如：http://localhost/semantic，這樣你在使用實(shí)時(shí)預(yù)覽的時(shí)候，會(huì)基于這個(gè)地址去預(yù)覽文件。

快速編輯

• 方法一：打開菜單：導(dǎo)航 -> 快速編輯

• 方法二：使用快捷鍵：command + E

Brackets 允許我們快速去編輯 HTML 或者 CSS 文檔。快速編輯 HTML 文檔，可以去為選中的元素快速添加或者修改樣式。編輯器會(huì)給你顯示出應(yīng)用在所選中元素上的所有的樣式，選中對(duì)應(yīng)的樣式，直接去修改，這樣你就不需要再去找到對(duì)應(yīng)的樣式表，對(duì)應(yīng)的地方去修改了?？焖倬庉嬐瑯舆m用 CSS 文檔，比如放在顏色屬性上，會(huì)顯示一個(gè)顏色選擇器，或者動(dòng)畫屬性上，會(huì)顯示一個(gè)可以調(diào)整動(dòng)畫曲線的工具。非常非常方便。

擴(kuò)展

你可以為 Brackets 編輯安裝擴(kuò)展來增加它的功能。 在 Brackets Extension Registry 里可以查看可用的擴(kuò)展，在這里，你也可以提交自己編寫的擴(kuò)展。

• 方法一：文件 -> 擴(kuò)展管理器

• 方法二：點(diǎn)擊主界面右上角的積木樣式的圖標(biāo)（閃電圖標(biāo)下面的那個(gè)）

打開 擴(kuò)展管理器 以后，在 可獲取 這個(gè)選項(xiàng)卡里面，可以找到想要使用的擴(kuò)展，點(diǎn)擊 安裝，可以安裝這個(gè)擴(kuò)展。打開 已安裝 這個(gè)選項(xiàng)卡，可以管理已經(jīng)安裝在編輯器上的擴(kuò)展，在這里，你可以升級(jí)或移除這些擴(kuò)展。

常用擴(kuò)展

快速編輯代碼 - Emmet

emmet 可以讓我們使用編寫形式去撰寫 HTML 與 CSS 代碼，非常方便。寧皓網(wǎng)有個(gè)課程專門介紹了 emmet 插件。

改變樣式 - Themes

可以改變編輯器的樣式。安裝以后，主菜單上會(huì)多出一個(gè) Themes ，打開以后，選擇想要的主題。

折疊代碼塊 - Code Folding

讓 HTML，CSS，JavaScript，PHP 的代碼可以折疊起來。在 視圖 菜單下，會(huì)多出幾個(gè)菜單項(xiàng)目。

• Collapse Current：折疊當(dāng)前代碼塊

• Expand Current：展開當(dāng)前代碼塊

• Collapse All：折疊所有代碼

• Expand All：展開所有代碼

自動(dòng)格式化 - Beautify

自動(dòng)給你格式化 JavaScript，HTML，CSS 等代碼。在 編輯 菜單下，多了兩個(gè)菜單項(xiàng)：Beautify 還有 Beautify On Save。

PHP 幫助文檔 - QuickDocsPHP

選中位置，使用快捷鍵 command + K（mac），ctrl + K （windows），可以快速查看 PHP 的幫助文檔。

JS 幫助文檔 - QuickDocsJS

選中位置，使用快捷鍵 command + K（mac），ctrl + K （windows），可以快速查看 JavaScript 的幫助文檔。

總結(jié)

如果你還在用 Dreamweaver 開發(fā) Web 項(xiàng)目，暫時(shí)把它放在一邊，來試試 Brackets 。