This repository has been archived by the owner on Sep 6, 2021. It is now read-only.
Added Traditional Chinese translation. #8332
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,191 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | ||
| <title>BRACKETS 入門</title> | ||
| <meta name="description" content="Brackets 互動式入門指引。"> | ||
| <link rel="stylesheet" href="main.css"> | ||
| </head> | ||
| <body> | ||
|
|
||
| <h1>BRACKETS 入門</h1> | ||
| <h2>為您而寫的指引!</h2> | ||
|
|
||
| <!-- | ||
| 用 <3 跟 JAVASCRIPT 寫出來的 | ||
| --> | ||
|
|
||
| <p> | ||
| 歡迎使用先行版的 Brackets，這是個專為次世代網頁開發所設計的開放原始碼編輯器。 | ||
| 我們是標準規範的狂熱分子，致力於打造更適合編寫 JavaScript, HTML, CSS 及其他相關開放式網頁技術的工具。 | ||
| 而這只是我們的一小步。 | ||
| </p> | ||
|
|
||
| <!-- | ||
| BRACKETS 是什麼? | ||
| --> | ||
| <p> | ||
| <em>Brackets 與眾不同。</em> | ||
| 其中一項值得拿來說嘴的地方，就是這個編輯器是用 JavaScript, HTML 及 CSS 寫出來的。 | ||
| 這意味著大多數使用 Brackets 的人都有能力修改並擴充它。事實上，我們每天都用 Brackets 來打造 Brackets。 | ||
| 此外，Brackets 還有「快速編輯」、「即時預覽」等別人沒有的功能。 | ||
| 如果您想學會如何使用這些功能，請繼續看下去。 | ||
| </p> | ||
|
|
||
|
|
||
| <h2>我們正在玩一些新東西</h2> | ||
|
|
||
| <!-- | ||
| HTML, CSS 跟 JAVASCRIPT 的三角關係 | ||
| --> | ||
| <h3>CSS 及 JavaScript 快速編輯</h3> | ||
| <p> | ||
| 別再因為不斷切換檔案而一直分神失焦了。編輯 HTML 時，按下 <kbd>Cmd/Ctrl + E</kbd> | ||
| 快速鍵就地開啟編輯器，秀出所有相關的 CSS 規則。 | ||
| 調好 CSS 後按 <kbd>ESC</kbd> 馬上就回到 HTML 繼續編輯。 | ||
| 此外，也可以就讓那些 CSS 規則一直開著，成為 HTML 編輯器的一部分。 | ||
| 如果您在快速編輯器的範圍外按下 <kbd>ESC</kbd> 鍵，所有快速編輯器都會收合起來。 | ||
| </p> | ||
|
|
||
| <samp> | ||
| 想親身體驗嗎? 把游標移到上面的 <!-- <samp> --> 標籤中，按下 <kbd>Cmd/Ctrl + E</kbd>。 | ||
| 您應該就會看到 CSS 快速編輯器出現在上方，馬上就能看到並修改套用在該標籤上的 CSS 規則。 | ||
| 快速編輯功能也支援 class 及 id 屬性喔! | ||
|
|
||
| 您也可以透過這個方式新增規則。在上方隨便一個 <!-- <p> --> 標籤上點一下，按 <kbd>Cmd/Ctrl + E</kbd>。 | ||
| 可以看到它上面並沒有任何 CSS 規則，但您可以按一下「新增規則」按鈕，就會新增 <!-- <p> --> 規則。 | ||
| </samp> | ||
|
|
||
| <a href="screenshots/quick-edit.png"> | ||
| <img alt="用到 CSS 快速編輯的畫面擷圖" src="screenshots/quick-edit.png" /> | ||
| </a> | ||
|
|
||
| <p> | ||
| 您也能使用相同的快速鍵編輯其他東西，例如 JavaScript 函式、CSS 色彩、CSS 動畫計時函式等，且持續增加中。 | ||
| 目前還不能在快速編輯器中巢狀開啟其他快速編輯器，只有游標在主編輯器時才能開快速編輯功能。 | ||
| </p> | ||
|
|
||
| <!-- | ||
| 即時預覽 | ||
| --> | ||
| <h3>在瀏覽器裡即時預覽 HTML 及 CSS 變更</h3> | ||
| <p> | ||
| 有一種舞叫做「存檔再重新載入探戈」，我們跳了好多年，您聽過嗎? | ||
| 就是在編輯器裡改一改東西，儲存好，馬上再切過去瀏覽器，按「重新整理」後才能真正的看到結果這鳥事? | ||
| 用 Brackets，您永遠不必再這麼「跳」。 | ||
| </p> | ||
| <p> | ||
| Brackets 會跟您本機的瀏覽器<em>即時連線</em>，在您輸入的同時將 HTML 及 CSS 內容更新過去! | ||
| 說不定活在 21 世紀的您已經用瀏覽器提供的工具做過類似的事了，但是用 Brackets | ||
| 您不用再把最後終於會動的程式複製貼回編輯器。 | ||
| 您的程式雖然身在瀏覽器上，但靈魂可還一直活在編輯器裡啊! | ||
| </p> | ||
|
|
||
| <h3>即時強調顯示 HTML 元素及 CSS 規則</h3> | ||
| <p> | ||
| Brackets 讓您更容易看到 HTML 及 CSS 的修改會對頁面造成什麼影響。 | ||
| 當游標停在 CSS 規則上時，Brackets 會在瀏覽器裡將所有會受影響的元素強調出來。 | ||
| 編輯 HTML 檔案時，Brackets 也會在瀏覽器中強調顯示對應的 HTML 元素。 | ||
| </p> | ||
|
|
||
| <samp> | ||
| 如果您安裝了 Google Chrome，馬上就可以試看看。 | ||
| 按一下 Brackets 視窗右上角的閃電圖示，或是按 <kbd>Cmd/Ctrl + Alt + P</kbd>。 | ||
| 當即時預覽功能在 HTML 檔案上啟用後，所有連結到的 CSS 檔案也都可以馬上編輯馬上生效。 | ||
| Brackets 與您的瀏覽器建立連線時，圖示會由灰轉金。 | ||
|
|
||
| 就是現在，把游標移到上面的 <!-- <img> --> 標籤。注意看 Chrome 在圖片上顯示的藍色框。 | ||
| 接下來，按 <kbd>Cmd/Ctrl + E</kbd> 開啟相關的 CSS 規則定義。 | ||
| 試著將框線 (border) 值由 10px 改成 20px，或將背景色由透明 "transparent" 改成 "hotpink"。 | ||
| 如果您把 Brackets 跟瀏覽器並排放好，就能看到所有異動馬上就反應到瀏覽器上了。酷吧?! | ||
| </samp> | ||
|
|
||
| <p class="note"> | ||
| 目前 Brackets 只能即時預覽 HTML 及 CSS。不過修改 JavaScript 檔案時，一儲存就會自動將頁面重新載入。 | ||
| 我們正在努力讓即時預覽功能支援 JavaScript。 | ||
| 此外，即時預覽現在只能在 Google Chrome 上執行，我們希望將來能支援所有主流的瀏覽器。 | ||
| </p> | ||
|
|
||
| <h3>快速檢視</h3> | ||
| <p> | ||
| 為了那些記不得色彩十六進位值或是 RGB 值的人，Brackets 能快速又簡單的讓您看見色彩的真相。 | ||
| 不管在 CSS 或 HTML 中，只要將滑鼠游標移到任何色彩值或是漸變色上，Brackets 就會自動顯示預覽。 | ||
| 對圖片也同樣有用，在 Brackets 裡將滑鼠游標移到圖片連結上，就會自動顯示預覽縮圖。 | ||
| </p> | ||
|
|
||
| <samp> | ||
| 自已試試快速檢視，只要將游標移到這份文件最上方的 <!-- <body> --> 標籤上，按下 <kbd>Cmd/Ctrl + E</kbd> | ||
| 開啟 CSS 快速編輯器，將滑鼠游標移到 CSS 上的任何一個色彩值上就能看到。 | ||
| 想要預覽漸變色，您也可以在 <!-- <html> --> 標籤上開啟 CSS 快速編輯器，移到隨便一個背景圖片 (background-image) 值就能看到。 | ||
| 要試圖片預覽，則是將游標移到這個檔案前幾段提到的畫面擷圖上就能看到。 | ||
| </samp> | ||
|
|
||
| <h3>還欠什麼嗎? 安裝擴充功能吧!</h3> | ||
| <p> | ||
| 除了 Brackets 內建的這些好東西外，我們那已具規模，且日益狀大的開發者社群已經寫了上百種擴充功能。 | ||
| 如果您覺得 Brackets 少了些什麼，說不定早就有人寫出擴充功能了。 | ||
| 點一下 <strong>檔案 > 擴充功能管理員</strong>，再點一下「可使用」頁籤，就能瀏覽或搜尋擴充功能清單。 | ||
| 一旦找到想要的擴充功能，按一下後面的「安裝」按鈕就可以了。 | ||
| </p> | ||
|
|
||
| <h3>Brackets 中的「專案」</h3> | ||
| <p> | ||
| 為了讓 Brackets 能編輯您的程式，請開啟包含所有相關檔案的資料夾。 | ||
| Brackets 會將當下開啟的資料夾視為一個「專案」，程式提示、即時預覽及快速編輯等功能都只會參考到專案裡的檔案。 | ||
| </p> | ||
|
|
||
| <samp> | ||
| 要是您已經準備好關掉這個範例專案，開始編輯自已的程式，可以使用左邊側欄的下拉式選單切換資料夾。 | ||
| 現在應該是選到「Getting Started」，也就是您現在看到的這份文件所在的資料夾。 | ||
| 按一下下拉式選單，點選「開啟資料夾…」選項，就能開啟您自已的資料夾。 | ||
|
|
||
| 之後您也可以透過同樣的下拉式選單切回開啟過的資料夾，包含這個範例專案。 | ||
| </samp> | ||
|
|
||
| <!-- | ||
| 跟我們說說您的想法 | ||
| --> | ||
| <h2>一起參與</h2> | ||
| <p> | ||
| Brackets 專案是開放原始碼的。世界各地的網頁開發者貢獻一己之力，只為打造出更好的程式編輯器。 | ||
| 也有不少人正在開發擴充功能，讓 Brackets 越有能耐。 | ||
| 告訴我們您的想法，分享您的 ieda，或是直接為本專案做點事吧。 | ||
| </p> | ||
| <ul> | ||
| <li><a href="http://brackets.io">Brackets.io</a></li> | ||
| <li><a href="http://blog.brackets.io">Brackets 開發團隊網誌</a></li> | ||
| <li><a href="http://github.com/adobe/brackets">GitHub 上的 Brackets</a></li> | ||
| <li><a href="https://brackets-registry.aboutweb.com">Brackets 擴充功能登錄庫</a></li> | ||
| <li><a href="http://github.com/adobe/brackets/wiki">Brackets 維基</a></li> | ||
| <li><a href="http://groups.google.com/group/brackets-dev">Brackets 開發者郵寄清單</a></li> | ||
| <li><a href="https://twitter.com/#!/brackets">Twitter 上的 @brackets</a></li> | ||
| <li>在 Freenode 的 #brackets IRC 頻道上與 Brackets 開發者聊天</li> | ||
| </ul> | ||
|
|
||
| </body> | ||
| </html> | ||
| <!-- | ||
|
|
||
| [[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]] | ||
| [:::::::::::::: ::::::::::::::] | ||
| [:::::::::::::: ::::::::::::::] | ||
| [::::::[[[[[[[: :]]]]]]]::::::] | ||
| [:::::[ ]:::::] | ||
| [:::::[ ]:::::] | ||
| [:::::[ ]:::::] | ||
| [:::::[ ]:::::] | ||
| [:::::[ CODE THE WEB ]:::::] | ||
| [:::::[ http://brackets.io ]:::::] | ||
| [:::::[ ]:::::] | ||
| [:::::[ ]:::::] | ||
| [:::::[ ]:::::] | ||
| [:::::[ ]:::::] | ||
| [::::::[[[[[[[: :]]]]]]]::::::] | ||
| [:::::::::::::: ::::::::::::::] | ||
| [:::::::::::::: ::::::::::::::] | ||
| [[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]] | ||
|
|
||
| Last translated for 0fa50d0e19bb5f7abd6fdf3963f57cae225ed2b3 | ||
| --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| html { | ||
| background-color: #e6e9e9; | ||
| background-image: -webkit-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%); | ||
| background-image: linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%); | ||
| -webkit-font-smoothing: antialiased; | ||
| } | ||
|
|
||
| body { | ||
| margin: 0 auto; | ||
| padding: 2em 2em 4em; | ||
| max-width: 800px; | ||
| font-family: "Heiti TC", "LiHei Pro", "Microsoft JhengHei", "WenQuanYi Micro Hei", "Droid Sans Fallback", "Arial Unicode MS", sans-serif; | ||
| font-size: 16px; | ||
| line-height: 1.5em; | ||
| color: #545454; | ||
| background-color: #ffffff; | ||
| box-shadow: 0 0 2px rgba(0, 0, 0, 0.06); | ||
| } | ||
|
|
||
| h1, h2, h3, h4, h5, h6 { | ||
| color: #222; | ||
| font-weight: 600; | ||
| line-height: 1.3em; | ||
| font-family: "Heiti TC", "LiHei Pro", "Microsoft JhengHei Bold", "WenQuanYi Micro Hei", "Droid Sans Fallback", "Arial Unicode MS", sans-serif; | ||
| } | ||
|
|
||
| h2 { | ||
| margin-top: 1.3em; | ||
| } | ||
|
|
||
| a { | ||
| color: #0083e8; | ||
| } | ||
|
|
||
| b, strong { | ||
| font-weight: 600; | ||
| font-family: "Heiti TC", "LiHei Pro", "Microsoft JhengHei Bold", "WenQuanYi Micro Hei", "Droid Sans Fallback", "Arial Unicode MS", sans-serif; | ||
| } | ||
|
|
||
| samp { | ||
| display: none; | ||
| } | ||
|
|
||
| img { | ||
| -webkit-animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1; | ||
| animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1; | ||
| background: transparent; | ||
| border: 10px solid rgba(0, 0, 0, 0.12); | ||
| border-radius: 4px; | ||
| display: block; | ||
| margin: 1.3em auto; | ||
| max-width: 95%; | ||
| } | ||
|
|
||
| em { | ||
| font-style: normal; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| @-webkit-keyframes colorize { | ||
| 0% { | ||
| -webkit-filter: grayscale(100%); | ||
| } | ||
| 100% { | ||
| -webkit-filter: grayscale(0%); | ||
| } | ||
| } | ||
|
|
||
| @keyframes colorize { | ||
| 0% { | ||
| filter: grayscale(100%); | ||
| } | ||
| 100% { | ||
| filter: grayscale(0%); | ||
| } | ||
| } | ||
|
|
||
| /* Last localized for a77e108a2950fb3676b20224f50cef0e3cb2e58a */ |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this line is duplicated with next row, and lack of ","
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This means this change appended a "," to end of line, and GitHub doesn't display inline changes well.
-with red background means deletion of line,+with green background means addition of line.