Skip to content
This repository was archived by the owner on Sep 6, 2021. It is now read-only.

Fix "Getting Started" translation for zh-CN #15024

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Fix "Getting Started" translation for zh-CN #15024

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
23d48ab
Fix translation for zh-CN
monstorix Jan 29, 2020
eb327d7
Correcting grammar errors
monstorix Jan 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
324 changes: 165 additions & 159 deletions samples/zh-cn/Getting Started/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,173 +1,179 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>BRACKETS 入门</title>
<meta name="description" content="Brackets 互动式入门指引。">
<link rel="stylesheet" href="main.css">
</head>
<body>

<h1>BRACKETS 入门</h1>
<h2>让我为你好好介绍!</h2>

<!--

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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，这是个很懂网页设计的现代化开放原始码程式编辑器。
轻巧又不失威力，整合多项视觉化的编辑功能，在需要时提供您适当的协助。
</p>
<!--
BRACKETS 是什麽?

<p>
欢迎使用 Brackets，这是一个很懂网页设计的现代化开放源代码编辑器。
轻巧而强大，整合了多项可视化的编辑功能，并在您需要时提供适当的帮助。
</p>

<!--
BRACKETS 是什么?
-->
<p>
<em>Brackets 与众不同。</em>
Brackets 提供「快速编辑」、「即时预览」等别的编辑器没有的独家功能。
而且 Brackets 是用 JavaScript, HTML 及 CSS 写出来的。这代表大多数使用 Brackets 的人都有能力修改及扩充它。
事实上，Brackets 本身就是我们用 Brackets 一天天打造出来的。
如果您想学会如何使用这些功能，请继续看下去。
</p>
<!--
用您自己的档案开始上手
<p>
<em>作为一个编辑器，Brackets 与众不同。</em>
Brackets 提供“快速编辑”、“实时预览”等独家功能。
Brackets 是用 JavaScript, HTML 及 CSS 写出来的。这代表大多数使用 Brackets 的人都有能力修改及扩展它的功能。
事实上，Brackets 本身就是我们用 Brackets 一步一步打造出来的。
如果您想学会如何使用这些功能，请继续浏览。
</p>

<!--
用您自己的文件开始上手
-->
<h3>Brackets 中的「专案」</h3>
<p>
只要开启包含您程式码的资料夹，就能使用 Brackets 来编辑。
Brackets 会将目前开启的资料夹视为一个「专案」，「程式提示」、「即时预览」及「快速编辑」等功能都只会参考到专案裡的档案。
</p>
<samp>
要是您已经准备好关掉这个范例专案，开始编辑自已的程式，可以使用左边侧栏的下拉式选单切换资料夹。
现在应该是选到「Getting Started」，也就是您看的这份文件所在的资料夹。
按一下下拉式选单，点选「开启资料夹…」选项，就能开启您自已的资料夹。
之后您也可以透过同样的下拉式选单切回开启过的资料夹，包含这个范例专案。
</samp>
<!--

<h3>Brackets 中的“项目”</h3>
<p>
只要打开含有您的代码的文件夹，就能使用 Brackets 来编辑。
Brackets 会将目前打开的文件夹视为一个“项目”，包括“代码提示”、“实时预览”及“快速编辑”在内的功能都只会作用于当前项目中的文件。
</p>

<samp>
如果您已经准备好关掉这个示例项目，开始编辑自已的代码，可以使用左侧边栏的下拉菜单切换文件夹。
现在下拉菜单中显示的是“Getting Started”，也就是当前打开的这份文件所在的文件夹。
点击下拉菜单，选择“打开目录…”选项，就能打开您自已的文件夹。

之后您也可以通过同样的下拉菜单切换到打开过的文件夹，包括这个示例项目。
</samp>

<!--
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> 键，就能关掉所有快速编辑器。
快速编辑也能找到定义在 LESS 及 SCSS 档案中的规则，就算是巢状规则也没问题。
</p>

<samp>
想亲身体验吗? 把游标移到上面的 <!-- <samp> --> 标籤中，按下 <kbd>Cmd/Ctrl + E</kbd>。
您应该就会看到 CSS 快速编辑器出现在上方，显示出所有套用到的 CSS 规则。
快速编辑功能也支援 class 及 id 属性。搭配 LESS 或 SCSS 档嘛会通喔。

您也可以透过这个方式新增规则。在上方随便一个 <!-- <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>
<p>
目前还不能在快速编辑器中巢状开启其他快速编辑器，只有游标在主编辑器时才能开快速编辑功能。
</p>

<!--
即时预览
<h3>CSS 及 JavaScript 快速编辑</h3>
<p>
频繁切换文件使您分心？编辑 HTML 时，按下 <kbd>Cmd/Ctrl + E</kbd>
快捷键打开行内快速编辑器，就能列出所有相关的 CSS 规则。
修改好 CSS 样式后按下 <kbd>ESC</kbd> 即可隐藏并返回 HTML 文件继续编辑，当然您也可以让规则继续显示，以供参考。
只要在快速编辑器的外面按下 <kbd>ESC</kbd> 键，就能折叠所有行内编辑器。
快速编辑也能找到定义在 LESS 及 SCSS 文件中的规则，包括嵌套规则。
</p>

<samp>
想亲自上手吗? 在编辑器中，把光标移到上方的
<!-- <samp> --> 标签中，按下 <kbd>Cmd/Ctrl + E</kbd>。
您应该就会看到 CSS 快速编辑器出现在上方，显示出所有套用到的 CSS 规则。
快速编辑功能也支持 class 及 id 属性。对于 LESS 或 SCSS 文档也是一样的。

您也可以通过这个方式新建规则。在上方随便一个
<!-- <p> --> 标签上点击，按下 <kbd>Cmd/Ctrl + E</kbd>。
可以看到它上面并没有任何 CSS 规则，但您可以点击“新 CSS 规则”按钮，就会新建
<!-- <p> --> 规则。
</samp>

<a href="screenshots/quick-edit.png">
<img alt="使用 CSS 快速编辑的屏幕截图" src="screenshots/quick-edit.png" />
</a>

<p>
您也可以使用这一快捷键编辑其他东西，例如 JavaScript 函数、CSS 颜色、CSS 动画计时函数等，我们仍在持续增加更多的支持。
</p>
<p>
目前还不能在快速编辑器中嵌套打开更多的快速编辑器，只有光标在主编辑器时才能开启快速编辑功能。
</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，或将背景色 (background-color) 由透明 "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>在浏览器中实时预览 HTML 及 CSS 修改</h3>
<p>
您知道有一种舞蹈，叫做“保存，然后刷新”，我们已经跳了很多年吗？
简单来说，就是在编辑器中修改一下文件，保存，然后立刻切换到浏览器，按下“刷新”后才能真正的看到结果。
这非常令人不快，使用 Brackets，您不需要再这么“跳舞”了。
</p>
<p>
Brackets 会与您的浏览器建立一个<em>实时连接</em>，将您对 HTML 及 CSS 内容改动推送至浏览器中！
您或许已经在浏览器提供的开发者工具中做过类似的事了, 但使用 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，或将背景色 (background-color) 由透明 "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>

<!--
跟我们说说您的想法
-->
<h2>一起参与</h2>
<p>
Brackets 专案是开放原始码的。世界各地的网页开发者贡献一己之力，只为打造出更好的程式编辑器。
也有不少人正在开发扩充功能，让 Brackets 更强大。
告诉我们您的想法，分享您的构想，或是直接为本专案做点事吧。
</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="https://github.com/adobe/brackets">GitHub 上的 Brackets</a></li>
<li><a href="https://brackets-registry.aboutweb.com">Brackets 扩充功能登录库</a></li>
<li><a href="https://github.com/adobe/brackets/wiki">Brackets 维基</a></li>
<li><a href="https://groups.google.com/forum/#!forum/brackets-dev">Brackets 开发者邮寄清单</a></li>
<li><a href="https://twitter.com/brackets">Twitter 上的 @brackets</a></li>
<li>在 <a href="http://webchat.freenode.net/?channels=brackets&uio=d4">Freenode 的 #brackets</a> IRC 频道上与 Brackets 开发者聊天</li>
</ul>

</body>
<h2>参与进来</h2>
<p>
Brackets 项目是开放源代码的。世界各地的网页开发者贡献自己的力量，只为打造出更好的编辑器。
还有不少人正在开发扩展，让 Brackets 更强大。
告诉我们您的想法，分享您的创意，或是直接为项目做点贡献吧。
</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="https://github.com/adobe/brackets">GitHub 上的 Brackets</a></li>
<li><a href="https://brackets-registry.aboutweb.com">Brackets 扩展仓库</a></li>
<li><a href="https://github.com/adobe/brackets/wiki">Brackets 项目维基</a></li>
<li><a href="https://groups.google.com/forum/#!forum/brackets-dev">Brackets 开发者邮件列表</a></li>
<li><a href="https://twitter.com/brackets">Twitter 上的 @brackets</a></li>
<li>在 <a href="http://webchat.freenode.net/?channels=brackets&uio=d4">在 Freenode 的 #brackets</a> IRC 频道上与 Brackets 开发者聊天</li>
</ul>

</body>

</html>
<!--

Expand Down