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

zh-cn #13473

Merged
merged 6 commits into from
Jun 27, 2017
Merged

zh-cn #13473

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
50de2f6
Update urls.js
Jun 20, 2017
a0ea006
Create Getting Started
Jun 20, 2017
22af790
Delete Getting Started
Jun 20, 2017
93f593e
Create index.html
Jun 20, 2017
0bdb419
Create main.css
Jun 20, 2017
47187c1
Add files via upload
Jun 22, 2017
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
193 changes: 193 additions & 0 deletions samples/zh-cn/Getting Started/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,193 @@
<!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>

<!--
用 <3 跟 JAVASCRIPT 写出来的
-->

<p>
欢迎使用 Brackets，这是个很懂网页设计的现代化开放原始码程式编辑器。
轻巧又不失威力，整合多项视觉化的编辑功能，在需要时提供您适当的协助。
</p>

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

<!--
用您自己的档案开始上手
-->

<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">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you are missing this screenshot.

<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>

<!--
跟我们说说您的想法
-->
<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>
<!--

[[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]]
[:::::::::::::: ::::::::::::::]
[:::::::::::::: ::::::::::::::]
[::::::[[[[[[[: :]]]]]]]::::::]
[:::::[ ]:::::]
[:::::[ ]:::::]
[:::::[ ]:::::]
[:::::[ ]:::::]
[:::::[ CODE THE WEB ]:::::]
[:::::[ http://brackets.io ]:::::]
[:::::[ ]:::::]
[:::::[ ]:::::]
[:::::[ ]:::::]
[:::::[ ]:::::]
[::::::[[[[[[[: :]]]]]]]::::::]
[:::::::::::::: ::::::::::::::]
[:::::::::::::: ::::::::::::::]
[[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]]

-->
60 changes: 60 additions & 0 deletions samples/zh-cn/Getting Started/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
html {
background: #e6e9e9;
background-image: linear-gradient(270deg, rgb(230, 233, 233) 0%, rgb(216, 221, 221) 100%);
-webkit-font-smoothing: antialiased;
}

body {
background: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
color: #545454;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
margin: 0 auto;
max-width: 800px;
padding: 2em 2em 4em;
}

h1, h2, h3, h4, h5, h6 {
color: #222;
font-weight: 700;
line-height: 1.3;
}

h2 {
margin-top: 1.3em;
}

a {
color: #0083e8;
}

b, strong {
font-weight: 700;
}

samp {
display: none;
}

img {
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%;
}

@keyframes colorize {
0% {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
100% {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
}
1 change: 1 addition & 0 deletions src/nls/zh-cn/urls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@

define({
// Relative to the samples folder
"GETTING_STARTED" : "zh-cn/Getting Started",
"ADOBE_THIRD_PARTY" : "http://www.adobe.com/go/thirdparty/",
"WEB_PLATFORM_DOCS_LICENSE" : "http://creativecommons.org/licenses/by/3.0/deed.zh"
});