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

Commit 475dfc2

Browse files
rex nathanficristo
rex nathan
authored and
ficristo
committed
zh-cn (#13473)
* Update urls.js * Create Getting Started * Delete Getting Started * Create index.html * Create main.css * Add files via upload quick-edit.png
1 parent 940660e commit 475dfc2

4 files changed

Lines changed: 254 additions & 0 deletions

File tree

‎samples/zh-cn/Getting Started/index.html‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<title>BRACKETS 入门</title>
8+
<meta name="description" content="Brackets 互动式入门指引。">
9+
<link rel="stylesheet" href="main.css">
10+
</head>
11+
<body>
12+
13+
<h1>BRACKETS 入门</h1>
14+
<h2>让我为你好好介绍!</h2>
15+
16+
<!--
17+
用 <3 跟 JAVASCRIPT 写出来的
18+
-->
19+
20+
<p>
21+
欢迎使用 Brackets，这是个很懂网页设计的现代化开放原始码程式编辑器。
22+
轻巧又不失威力，整合多项视觉化的编辑功能，在需要时提供您适当的协助。
23+
</p>
24+
25+
<!--
26+
BRACKETS 是什麽?
27+
-->
28+
<p>
29+
<em>Brackets 与众不同。</em>
30+
Brackets 提供「快速编辑」、「即时预览」等别的编辑器没有的独家功能。
31+
而且 Brackets 是用 JavaScript, HTML 及 CSS 写出来的。这代表大多数使用 Brackets 的人都有能力修改及扩充它。
32+
事实上，Brackets 本身就是我们用 Brackets 一天天打造出来的。
33+
如果您想学会如何使用这些功能，请继续看下去。
34+
</p>
35+
36+
<!--
37+
用您自己的档案开始上手
38+
-->
39+
40+
<h3>Brackets 中的「专案」</h3>
41+
<p>
42+
只要开启包含您程式码的资料夹，就能使用 Brackets 来编辑。
43+
Brackets 会将目前开启的资料夹视为一个「专案」，「程式提示」、「即时预览」及「快速编辑」等功能都只会参考到专案裡的档案。
44+
</p>
45+
46+
<samp>
47+
要是您已经准备好关掉这个范例专案，开始编辑自已的程式，可以使用左边侧栏的下拉式选单切换资料夹。
48+
现在应该是选到「Getting Started」，也就是您看的这份文件所在的资料夹。
49+
按一下下拉式选单，点选「开启资料夹…」选项，就能开启您自已的资料夹。
50+
51+
之后您也可以透过同样的下拉式选单切回开启过的资料夹，包含这个范例专案。
52+
</samp>
53+
54+
<!--
55+
HTML, CSS 及 JAVASCRIPT 之间的关系
56+
-->
57+
<h3>CSS 及 JavaScript 快速编辑</h3>
58+
<p>
59+
别再因为不断切换档案而一直分神失焦了。编辑 HTML 时，按下 <kbd>Cmd/Ctrl + E</kbd>
60+
快速键就地开启编辑器，秀出所有相关的 CSS 规则。
61+
调好 CSS 样式后按 <kbd>ESC</kbd> 马上就能回到 HTML 继续编辑。
62+
此外，也可以放手让那些 CSS 规则一直开在 HTML 编辑器裡。
63+
只要在快速编辑器的范围外按下 <kbd>ESC</kbd> 键，就能关掉所有快速编辑器。
64+
快速编辑也能找到定义在 LESS 及 SCSS 档案中的规则，就算是巢状规则也没问题。
65+
</p>
66+
67+
<samp>
68+
想亲身体验吗? 把游标移到上面的 <!-- <samp> --> 标籤中，按下 <kbd>Cmd/Ctrl + E</kbd>。
69+
您应该就会看到 CSS 快速编辑器出现在上方，显示出所有套用到的 CSS 规则。
70+
快速编辑功能也支援 class 及 id 属性。搭配 LESS 或 SCSS 档嘛会通喔。
71+
72+
您也可以透过这个方式新增规则。在上方随便一个 <!-- <p> --> 标籤上点一下，按 <kbd>Cmd/Ctrl + E</kbd>。
73+
可以看到它上面并没有任何 CSS　规则，但您可以按一下「新增规则」按钮，就会新增 <!-- <p> --> 规则。
74+
</samp>
75+
76+
<a href="screenshots/quick-edit.png">
77+
<img alt="使用 CSS 快速编辑的画面撷图" src="screenshots/quick-edit.png" />
78+
</a>
79+
80+
<p>
81+
您也能使用相同的快速键编辑其他东西，例如 JavaScript 函式、CSS 色彩、CSS 动画计时函式等，持续增加中。
82+
</p>
83+
<p>
84+
目前还不能在快速编辑器中巢状开启其他快速编辑器，只有游标在主编辑器时才能开快速编辑功能。
85+
</p>
86+
87+
<!--
88+
即时预览
89+
-->
90+
<h3>在浏览器裡即时预览 HTML 及 CSS 变更</h3>
91+
<p>
92+
有一种舞叫做「存档再重新载入探戈」，我们跳了好多年，您听过吗?
93+
就是在编辑器裡改一改东西，储存好，马上再切过去浏览器，按「重新整理」后才能真正的看到结果，超鸟的!
94+
用 Brackets，您永远不必再这麽「跳」。
95+
</p>
96+
<p>
97+
Brackets 会跟您本机的浏览器<em>即时连线</em>，在您修改的同时将 HTML 及 CSS 内容更新过去!
98+
说不定活在 21 世纪的您已经用浏览器提供的开发者工具做过类似的事了。
99+
但是用 Brackets，您不用再手动把总算是会动的程式複製贴回编辑器。
100+
您的程式虽然是跑在浏览器上，但是所有的血与肉都还是在编辑器裡啊!
101+
</p>
102+
103+
<h3>即时突显 HTML 元素及 CSS 规则</h3>
104+
<p>
105+
Brackets 让您更容易看到 HTML 及 CSS 的修改会对页面造成什麽影响。
106+
当游标停在 CSS 规则上时，Brackets 会在浏览器裡将所有会受影响的元素突显出来。
107+
编辑 HTML 档案时，Brackets 也会在浏览器中突显对应的 HTML 元素。
108+
</p>
109+
110+
<samp>
111+
如果您安装了 Google Chrome，马上就可以试看看。
112+
按一下 Brackets 视窗右上角的闪电图示，或是按 <kbd>Cmd/Ctrl + Alt + P</kbd>。
113+
当即时预览功能在 HTML 档案上启用后，所有连结到的 CSS 档案也都可以马上编辑马上生效。
114+
Brackets 与您的浏览器建立连线时，图示会由灰转金。
115+
116+
就是现在，把游标移到上面的 <!-- <img> --> 标籤。注意看 Chrome 在图片上显示的蓝色框。
117+
接下来，按 <kbd>Cmd/Ctrl + E</kbd> 开启相关的 CSS 规则定义。
118+
试著将框线 (border) 值由 10px 改成 20px，或将背景色 (background-color) 由透明 "transparent" 改成 "hotpink"。
119+
如果您把 Brackets 跟浏览器并排放好，就能看到所有异动都直接反应在浏览器上了。酷吧?!
120+
</samp>
121+
122+
<p class="note">
123+
目前 Brackets 只能即时预览 HTML 及 CSS。不过，储存修改过的 JavaScript 档案时也会自动重新载入页面。
124+
我们正在努力让即时预览功能支援 JavaScript。
125+
此外，即时预览现在只能在 Google Chrome 上执行，我们希望将来能支援所有主流的浏览器。
126+
</p>
127+
128+
<h3>快速检视</h3>
129+
<p>
130+
为了那些记不得色彩十六进位值或是 RGB 值的人，Brackets 能快速又简单的让您看见色彩的真相。
131+
不管在 CSS 或 HTML 中，只要将滑鼠游标移到任何色彩值或是渐变色上，Brackets 就会自动显示预览。
132+
对图片也同样有用，在 Brackets 裡将滑鼠游标移到图片连结上，就会自动显示预览缩图。
133+
</p>
134+
135+
<samp>
136+
自已试试快速检视，只要将游标移到这份文件最上方的 <!-- <body> --> 标籤上，按下 <kbd>Cmd/Ctrl + E</kbd>
137+
开启 CSS 快速编辑器，将滑鼠游标移到 CSS 上的任何一个色彩值上就能看到。
138+
想要预览渐变色，您也可以在 <!-- <html> --> 标籤上开启 CSS 快速编辑器，移到随便一个背景图片 (background-image) 值就能看到。
139+
要试图片预览，则是将游标移到前几段提到的画面撷图上就能看到。
140+
</samp>
141+
142+
<h3>还不够吗? 安装扩充功能吧!</h3>
143+
<p>
144+
除了 Brackets 内建的这些好物外，我们那深具规模，且日益状大的开发者社群已经写出了数百个扩充功能。
145+
如果您觉得 Brackets 少了什麽，说不定早就有人写好扩充功能了。
146+
点一下 <strong>档案 > 扩充功能管理员...</strong>，再点一下「可使用」页籤，就能浏览或搜寻扩充功能清单。
147+
一旦找到想要的扩充功能，按一下后面的「安装」按钮就可以了。
148+
</p>
149+
150+
<!--
151+
跟我们说说您的想法
152+
-->
153+
<h2>一起参与</h2>
154+
<p>
155+
Brackets 专案是开放原始码的。世界各地的网页开发者贡献一己之力，只为打造出更好的程式编辑器。
156+
也有不少人正在开发扩充功能，让 Brackets 更强大。
157+
告诉我们您的想法，分享您的构想，或是直接为本专案做点事吧。
158+
</p>
159+
<ul>
160+
<li><a href="http://brackets.io">Brackets.io</a></li>
161+
<li><a href="http://blog.brackets.io">Brackets 开发团队网志</a></li>
162+
<li><a href="https://github.com/adobe/brackets">GitHub 上的 Brackets</a></li>
163+
<li><a href="https://brackets-registry.aboutweb.com">Brackets 扩充功能登录库</a></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>
168+
</ul>
169+
170+
</body>
171+
</html>
172+
<!--
173+
174+
[[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]]
175+
[:::::::::::::: ::::::::::::::]
176+
[:::::::::::::: ::::::::::::::]
177+
[::::::[[[[[[[: :]]]]]]]::::::]
178+
[:::::[ ]:::::]
179+
[:::::[ ]:::::]
180+
[:::::[ ]:::::]
181+
[:::::[ ]:::::]
182+
[:::::[ CODE THE WEB ]:::::]
183+
[:::::[ http://brackets.io ]:::::]
184+
[:::::[ ]:::::]
185+
[:::::[ ]:::::]
186+
[:::::[ ]:::::]
187+
[:::::[ ]:::::]
188+
[::::::[[[[[[[: :]]]]]]]::::::]
189+
[:::::::::::::: ::::::::::::::]
190+
[:::::::::::::: ::::::::::::::]
191+
[[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]]
192+
193+
-->

‎samples/zh-cn/Getting Started/main.css‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
html {
2+
background: #e6e9e9;
3+
background-image: linear-gradient(270deg, rgb(230, 233, 233) 0%, rgb(216, 221, 221) 100%);
4+
-webkit-font-smoothing: antialiased;
5+
}
6+
7+
body {
8+
background: #fff;
9+
box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
10+
color: #545454;
11+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
12+
font-size: 16px;
13+
line-height: 1.5;
14+
margin: 0 auto;
15+
max-width: 800px;
16+
padding: 2em 2em 4em;
17+
}
18+
19+
h1, h2, h3, h4, h5, h6 {
20+
color: #222;
21+
font-weight: 700;
22+
line-height: 1.3;
23+
}
24+
25+
h2 {
26+
margin-top: 1.3em;
27+
}
28+
29+
a {
30+
color: #0083e8;
31+
}
32+
33+
b, strong {
34+
font-weight: 700;
35+
}
36+
37+
samp {
38+
display: none;
39+
}
40+
41+
img {
42+
animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
43+
background: transparent;
44+
border: 10px solid rgba(0, 0, 0, 0.12);
45+
border-radius: 4px;
46+
display: block;
47+
margin: 1.3em auto;
48+
max-width: 95%;
49+
}
50+
51+
@keyframes colorize {
52+
0% {
53+
-webkit-filter: grayscale(100%);
54+
filter: grayscale(100%);
55+
}
56+
100% {
57+
-webkit-filter: grayscale(0%);
58+
filter: grayscale(0%);
59+
}
60+
}

‎samples/zh-cn/Getting Started/screenshots/quick-edit.png‎

265 KB
Loading

‎src/nls/zh-cn/urls.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323

2424
define({
2525
// Relative to the samples folder
26+
"GETTING_STARTED" : "zh-cn/Getting Started",
2627
"ADOBE_THIRD_PARTY" : "http://www.adobe.com/go/thirdparty/",
2728
"MDN_DOCS_LICENSE" : "http://creativecommons.org/licenses/by-sa/2.5/deed.zh"
2829
});

0 commit comments

Comments
 (0)
⚡