1111 < body >
1212
1313 < h1 > BRACKETS 入門</ h1 >
14- < h2 > 為您而寫的指引 !</ h2 >
14+ < h2 > 讓我為您好好介紹 !</ h2 >
1515
1616 <!--
1717 用 <3 跟 JAVASCRIPT 寫出來的
1818 -->
1919
2020 < p >
21- 歡迎使用先行版的 Brackets，這是個專為次世代網頁開發所設計的開放原始碼編輯器。
22- 我們是標準規範的狂熱分子，致力於打造更適合編寫 JavaScript, HTML, CSS 及其他相關開放式網頁技術的工具。
23- 而這只是我們的一小步。
21+ 歡迎使用 Brackets，這是個很懂網頁設計的現代化開放原始碼程式編輯器。
22+ 輕巧又不失威力，整合多項視覺化的編輯功能，在需要時提供您適當的協助。
2423 </ p >
2524
2625 <!--
2726 BRACKETS 是什麼?
2827 -->
2928 < p >
3029 < em > Brackets 與眾不同。</ em >
31- 其中一項值得拿來說嘴的地方，就是這個編輯器是用 JavaScript, HTML 及 CSS 寫出來的 。
32- 這意味著大多數使用 Brackets 的人都有能力修改並擴充它。事實上，我們每天都用 Brackets 來打造 Brackets。
33- 此外 ，Brackets 還有「快速編輯」、「即時預覽」等別人沒有的功能 。
30+ Brackets 提供「快速編輯」、「即時預覽」等別的編輯器沒有的獨家功能 。
31+ 而且 Brackets 是用 JavaScript, HTML 及 CSS 寫出來的。這代表大多數使用 Brackets 的人都有能力修改及擴充它 。
32+ 事實上 ，Brackets 本身就是我們用 Brackets 一天天打造出來的 。
3433 如果您想學會如何使用這些功能，請繼續看下去。
3534 </ p >
3635
36+ <!--
37+ 用您自己的檔案開始上手
38+ -->
3739
38- < h2 > 我們正在玩一些新東西</ h2 >
40+ < h3 > Brackets 中的「專案」</ h3 >
41+ < p >
42+ 只要開啟包含您程式碼的資料夾，就能使用 Brackets 來編輯。
43+ Brackets 會將目前開啟的資料夾視為一個「專案」，「程式提示」、「即時預覽」及「快速編輯」等功能都只會參考到專案裡的檔案。
44+ </ p >
45+
46+ < samp >
47+ 要是您已經準備好關掉這個範例專案，開始編輯自已的程式，可以使用左邊側欄的下拉式選單切換資料夾。
48+ 現在應該是選到「Getting Started」，也就是您看的這份文件所在的資料夾。
49+ 按一下下拉式選單，點選「開啟資料夾…」選項，就能開啟您自已的資料夾。
50+
51+ 之後您也可以透過同樣的下拉式選單切回開啟過的資料夾，包含這個範例專案。
52+ </ samp >
3953
4054 <!--
41- HTML, CSS 跟 JAVASCRIPT 的三角關係
55+ HTML, CSS 及 JAVASCRIPT 之間的關係
4256 -->
4357 < h3 > CSS 及 JavaScript 快速編輯</ h3 >
4458 < p >
4559 別再因為不斷切換檔案而一直分神失焦了。編輯 HTML 時，按下 < kbd > Cmd/Ctrl + E</ kbd >
4660 快速鍵就地開啟編輯器，秀出所有相關的 CSS 規則。
47- 調好 CSS 後按 < kbd > ESC</ kbd > 馬上就回到 HTML 繼續編輯。
48- 此外，也可以就讓那些 CSS 規則一直開著，成為 HTML 編輯器的一部分。
49- 如果您在快速編輯器的範圍外按下 < kbd > ESC</ kbd > 鍵，所有快速編輯器都會收合起來。
61+ 調好 CSS 樣式後按 < kbd > ESC</ kbd > 馬上就能回到 HTML 繼續編輯。
62+ 此外，也可以放手讓那些 CSS 規則一直開在 HTML 編輯器裡。
63+ 只要在快速編輯器的範圍外按下 < kbd > ESC</ kbd > 鍵，就能關掉所有快速編輯器。
64+ 快速編輯也能找到定義在 LESS 及 SCSS 檔案中的規則，就算是巢狀規則也沒問題。
5065 </ p >
5166
5267 < samp >
5368 想親身體驗嗎? 把游標移到上面的 <!-- <samp> --> 標籤中，按下 < kbd > Cmd/Ctrl + E</ kbd > 。
54- 您應該就會看到 CSS 快速編輯器出現在上方，馬上就能看到並修改套用在該標籤上的 CSS 規則。
55- 快速編輯功能也支援 class 及 id 屬性喔!
69+ 您應該就會看到 CSS 快速編輯器出現在上方，顯示出所有套用到的 CSS 規則。
70+ 快速編輯功能也支援 class 及 id 屬性。搭配 LESS 或 SCSS 檔嘛會通喔。
5671
5772 您也可以透過這個方式新增規則。在上方隨便一個 <!-- <p> --> 標籤上點一下，按 < kbd > Cmd/Ctrl + E</ kbd > 。
5873 可以看到它上面並沒有任何 CSS 規則，但您可以按一下「新增規則」按鈕，就會新增 <!-- <p> --> 規則。
5974 </ samp >
6075
6176 < a href ="screenshots/quick-edit.png ">
62- < img alt ="用到 CSS 快速編輯的畫面擷圖src ="screenshots/quick-edit.png " />
77+ < img alt ="使用 CSS 快速編輯的畫面擷圖src ="screenshots/quick-edit.png " />
6378 </ a >
6479
6580 < p >
66- 您也能使用相同的快速鍵編輯其他東西，例如 JavaScript 函式、CSS 色彩、CSS 動畫計時函式等，且持續增加中。
81+ 您也能使用相同的快速鍵編輯其他東西，例如 JavaScript 函式、CSS 色彩、CSS 動畫計時函式等，持續增加中。
82+ </ p >
83+ < p >
6784 目前還不能在快速編輯器中巢狀開啟其他快速編輯器，只有游標在主編輯器時才能開快速編輯功能。
6885 </ p >
6986
@@ -73,21 +90,21 @@ <h3>CSS 及 JavaScript 快速編輯</h3>
7390 < h3 > 在瀏覽器裡即時預覽 HTML 及 CSS 變更</ h3 >
7491 < p >
7592 有一種舞叫做「存檔再重新載入探戈」，我們跳了好多年，您聽過嗎?
76- 就是在編輯器裡改一改東西，儲存好，馬上再切過去瀏覽器，按「重新整理」後才能真正的看到結果這鳥事?
93+ 就是在編輯器裡改一改東西，儲存好，馬上再切過去瀏覽器，按「重新整理」後才能真正的看到結果，超鳥的!
7794 用 Brackets，您永遠不必再這麼「跳」。
7895 </ p >
7996 < p >
80- Brackets 會跟您本機的瀏覽器< em > 即時連線</ em > ，在您輸入的同時將 HTML 及 CSS 內容更新過去!
81- 說不定活在 21 世紀的您已經用瀏覽器提供的工具做過類似的事了，但是用 Brackets
82- 您不用再把最後終於會動的程式複製貼回編輯器 。
83- 您的程式雖然身在瀏覽器上，但靈魂可還一直活在編輯器裡啊 !
97+ Brackets 會跟您本機的瀏覽器< em > 即時連線</ em > ，在您修改的同時將 HTML 及 CSS 內容更新過去!
98+ 說不定活在 21 世紀的您已經用瀏覽器提供的開發者工具做過類似的事了。
99+ 但是用 Brackets，您不用再手動把總算是會動的程式複製貼回編輯器 。
100+ 您的程式雖然是跑在瀏覽器上，但是所有的血與肉都還是在編輯器裡啊 !
84101 </ p >
85102
86- < h3 > 即時強調顯示 HTML 元素及 CSS 規則</ h3 >
103+ < h3 > 即時突顯 HTML 元素及 CSS 規則</ h3 >
87104 < p >
88105 Brackets 讓您更容易看到 HTML 及 CSS 的修改會對頁面造成什麼影響。
89- 當游標停在 CSS 規則上時，Brackets 會在瀏覽器裡將所有會受影響的元素強調出來 。
90- 編輯 HTML 檔案時，Brackets 也會在瀏覽器中強調顯示對應的 HTML 元素。
106+ 當游標停在 CSS 規則上時，Brackets 會在瀏覽器裡將所有會受影響的元素突顯出來 。
107+ 編輯 HTML 檔案時，Brackets 也會在瀏覽器中突顯對應的 HTML 元素。
91108 </ p >
92109
93110 < samp >
@@ -98,12 +115,12 @@ <h3>即時強調顯示 HTML 元素及 CSS 規則</h3>
98115
99116 就是現在，把游標移到上面的 <!-- <img> --> 標籤。注意看 Chrome 在圖片上顯示的藍色框。
100117 接下來，按 < kbd > Cmd/Ctrl + E</ kbd > 開啟相關的 CSS 規則定義。
101- 試著將框線 (border) 值由 10px 改成 20px，或將背景色由透明 "transparent" 改成 "hotpink"。
102- 如果您把 Brackets 跟瀏覽器並排放好，就能看到所有異動馬上就反應到瀏覽器上了 。酷吧?!
118+ 試著將框線 (border) 值由 10px 改成 20px，或將背景色 (background-color) 由透明 "transparent" 改成 "hotpink"。
119+ 如果您把 Brackets 跟瀏覽器並排放好，就能看到所有異動都直接反應在瀏覽器上了 。酷吧?!
103120 </ samp >
104121
105122 < p class ="note ">
106- 目前 Brackets 只能即時預覽 HTML 及 CSS。不過修改 JavaScript 檔案時，一儲存就會自動將頁面重新載入 。
123+ 目前 Brackets 只能即時預覽 HTML 及 CSS。不過，儲存修改過的 JavaScript 檔案時也會自動重新載入頁面 。
107124 我們正在努力讓即時預覽功能支援 JavaScript。
108125 此外，即時預覽現在只能在 Google Chrome 上執行，我們希望將來能支援所有主流的瀏覽器。
109126 </ p >
@@ -119,49 +136,35 @@ <h3>快速檢視</h3>
119136 自已試試快速檢視，只要將游標移到這份文件最上方的 <!-- <body> --> 標籤上，按下 < kbd > Cmd/Ctrl + E</ kbd >
120137 開啟 CSS 快速編輯器，將滑鼠游標移到 CSS 上的任何一個色彩值上就能看到。
121138 想要預覽漸變色，您也可以在 <!-- <html> --> 標籤上開啟 CSS 快速編輯器，移到隨便一個背景圖片 (background-image) 值就能看到。
122- 要試圖片預覽，則是將游標移到這個檔案前幾段提到的畫面擷圖上就能看到 。
139+ 要試圖片預覽，則是將游標移到前幾段提到的畫面擷圖上就能看到 。
123140 </ samp >
124141
125- < h3 > 還欠什麼嗎 ? 安裝擴充功能吧!</ h3 >
142+ < h3 > 還不夠嗎 ? 安裝擴充功能吧!</ h3 >
126143 < p >
127- 除了 Brackets 內建的這些好東西外，我們那已具規模，且日益狀大的開發者社群已經寫了上百種擴充功能 。
128- 如果您覺得 Brackets 少了些什麼，說不定早就有人寫出擴充功能了 。
129- 點一下 < strong > 檔案 > 擴充功能管理員</ strong > ，再點一下「可使用」頁籤，就能瀏覽或搜尋擴充功能清單。
144+ 除了 Brackets 內建的這些好物外，我們那深具規模，且日益狀大的開發者社群已經寫出了數百個擴充功能 。
145+ 如果您覺得 Brackets 少了什麼，說不定早就有人寫好擴充功能了 。
146+ 點一下 < strong > 檔案 > 擴充功能管理員... </ strong > ，再點一下「可使用」頁籤，就能瀏覽或搜尋擴充功能清單。
130147 一旦找到想要的擴充功能，按一下後面的「安裝」按鈕就可以了。
131148 </ p >
132149
133- < h3 > Brackets 中的「專案」</ h3 >
134- < p >
135- 為了讓 Brackets 能編輯您的程式，請開啟包含所有相關檔案的資料夾。
136- Brackets 會將當下開啟的資料夾視為一個「專案」，程式提示、即時預覽及快速編輯等功能都只會參考到專案裡的檔案。
137- </ p >
138-
139- < samp >
140- 要是您已經準備好關掉這個範例專案，開始編輯自已的程式，可以使用左邊側欄的下拉式選單切換資料夾。
141- 現在應該是選到「Getting Started」，也就是您現在看到的這份文件所在的資料夾。
142- 按一下下拉式選單，點選「開啟資料夾…」選項，就能開啟您自已的資料夾。
143-
144- 之後您也可以透過同樣的下拉式選單切回開啟過的資料夾，包含這個範例專案。
145- </ samp >
146-
147150 <!--
148151 跟我們說說您的想法
149152 -->
150153 < h2 > 一起參與</ h2 >
151154 < p >
152155 Brackets 專案是開放原始碼的。世界各地的網頁開發者貢獻一己之力，只為打造出更好的程式編輯器。
153- 也有不少人正在開發擴充功能，讓 Brackets 越有能耐 。
156+ 也有不少人正在開發擴充功能，讓 Brackets 更強大 。
154157 告訴我們您的想法，分享您的 ieda，或是直接為本專案做點事吧。
155158 </ p >
156159 < ul >
157160 < li > < a href ="http://brackets.io "> Brackets.io</ a > </ li >
158161 < li > < a href ="http://blog.brackets.io "> Brackets 開發團隊網誌</ a > </ li >
159- < li > < a href ="http ://github.com/adobe/brackets> GitHub 上的 Brackets</ a > </ li >
162+ < li > < a href ="https ://github.com/adobe/brackets> GitHub 上的 Brackets</ a > </ li >
160163 < li > < a href ="https://brackets-registry.aboutweb.com "> Brackets 擴充功能登錄庫</ a > </ li >
161- < li > < a href ="http ://github.com/adobe/brackets/wiki> Brackets 維基</ a > </ li >
162- < li > < a href ="http ://groups.google.com/group /brackets-dev> Brackets 開發者郵寄清單</ a > </ li >
163- < li > < a href ="https://twitter.com/#!/ brackets "> Twitter 上的 @brackets</ a > </ li >
164- < li > 在 Freenode 的 #brackets IRC 頻道上與 Brackets 開發者聊天</ li >
164+ < li > < a href ="https ://github.com/adobe/brackets/wiki> Brackets 維基</ a > </ li >
165+ < li > < a href ="https ://groups.google.com/forum/#!forum /brackets-dev> Brackets 開發者郵寄清單</ a > </ li >
166+ < li > < a href ="https://twitter.com/brackets "> Twitter 上的 @brackets</ a > </ li >
167+ < li > 在 < a href =" http://webchat.freenode.net/?channels=brackets&uio=d4 " > Freenode 的 #brackets</ a > IRC 頻道上與 Brackets 開發者聊天</ li >
165168 </ ul >
166169
167170 </ body >
@@ -189,4 +192,4 @@ <h2>一起參與</h2>
189192
190193-->
191194
192- <!-- Last translated for 0fa50d0e19bb5f7abd6fdf3963f57cae225ed2b3 -->
195+ <!-- Last translated for e3ecc9e7ac7b94f1107a8e3ca7064ac39b345280 -->
0 commit comments