diff --git a/samples/zh-cn/Getting Started/index.html b/samples/zh-cn/Getting Started/index.html index 85e7ed810d8..79002d04086 100644 --- a/samples/zh-cn/Getting Started/index.html +++ b/samples/zh-cn/Getting Started/index.html @@ -1,173 +1,179 @@ - - - - - BRACKETS 入门 - - - - - -

BRACKETS 入门

-

让我为你好好介绍!

- - - -

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

- - -

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

- - - -

Brackets 中的「专案」

-

- 只要开启包含您程式码的资料夹,就能使用 Brackets 来编辑。 - Brackets 会将目前开启的资料夹视为一个「专案」,「程式提示」、「即时预览」及「快速编辑」等功能都只会参考到专案裡的档案。 -

- - - 要是您已经准备好关掉这个范例专案,开始编辑自已的程式,可以使用左边侧栏的下拉式选单切换资料夹。 - 现在应该是选到「Getting Started」,也就是您看的这份文件所在的资料夹。 - 按一下下拉式选单,点选「开启资料夹…」选项,就能开启您自已的资料夹。 - - 之后您也可以透过同样的下拉式选单切回开启过的资料夹,包含这个范例专案。 - - - -

CSS 及 JavaScript 快速编辑

-

- 别再因为不断切换档案而一直分神失焦了。编辑 HTML 时,按下 Cmd/Ctrl + E - 快速键就地开启编辑器,秀出所有相关的 CSS 规则。 - 调好 CSS 样式后按 ESC 马上就能回到 HTML 继续编辑。 - 此外,也可以放手让那些 CSS 规则一直开在 HTML 编辑器裡。 - 只要在快速编辑器的范围外按下 ESC 键,就能关掉所有快速编辑器。 - 快速编辑也能找到定义在 LESS 及 SCSS 档案中的规则,就算是巢状规则也没问题。 -

- - - 想亲身体验吗? 把游标移到上面的 标籤中,按下 Cmd/Ctrl + E。 - 您应该就会看到 CSS 快速编辑器出现在上方,显示出所有套用到的 CSS 规则。 - 快速编辑功能也支援 class 及 id 属性。搭配 LESS 或 SCSS 档嘛会通喔。 - - 您也可以透过这个方式新增规则。在上方随便一个 标籤上点一下,按 Cmd/Ctrl + E。 - 可以看到它上面并没有任何 CSS 规则,但您可以按一下「新增规则」按钮,就会新增 规则。 - - - - 使用 CSS 快速编辑的画面撷图 - - -

- 您也能使用相同的快速键编辑其他东西,例如 JavaScript 函式、CSS 色彩、CSS 动画计时函式等,持续增加中。 -

-

- 目前还不能在快速编辑器中巢状开启其他快速编辑器,只有游标在主编辑器时才能开快速编辑功能。 -

- - 标签中,按下 Cmd/Ctrl + E。 + 您应该就会看到 CSS 快速编辑器出现在上方,显示出所有套用到的 CSS 规则。 + 快速编辑功能也支持 class 及 id 属性。对于 LESS 或 SCSS 文档也是一样的。 + + 您也可以通过这个方式新建规则。在上方随便一个 + 标签上点击,按下 Cmd/Ctrl + E。 + 可以看到它上面并没有任何 CSS 规则,但您可以点击“新 CSS 规则”按钮,就会新建 + 规则。 + + + + 使用 CSS 快速编辑的屏幕截图 + + +

+ 您也可以使用这一快捷键编辑其他东西,例如 JavaScript 函数、CSS 颜色、CSS 动画计时函数等,我们仍在持续增加更多的支持。 +

+

+ 目前还不能在快速编辑器中嵌套打开更多的快速编辑器,只有光标在主编辑器时才能开启快速编辑功能。 +

+ + -

在浏览器裡即时预览 HTML 及 CSS 变更

-

- 有一种舞叫做「存档再重新载入探戈」,我们跳了好多年,您听过吗? - 就是在编辑器裡改一改东西,储存好,马上再切过去浏览器,按「重新整理」后才能真正的看到结果,超鸟的! - 用 Brackets,您永远不必再这麽「跳」。 -

-

- Brackets 会跟您本机的浏览器即时连线,在您修改的同时将 HTML 及 CSS 内容更新过去! - 说不定活在 21 世纪的您已经用浏览器提供的开发者工具做过类似的事了。 - 但是用 Brackets,您不用再手动把总算是会动的程式複製贴回编辑器。 - 您的程式虽然是跑在浏览器上,但是所有的血与肉都还是在编辑器裡啊! -

- -

即时突显 HTML 元素及 CSS 规则

-

- Brackets 让您更容易看到 HTML 及 CSS 的修改会对页面造成什麽影响。 - 当游标停在 CSS 规则上时,Brackets 会在浏览器裡将所有会受影响的元素突显出来。 - 编辑 HTML 档案时,Brackets 也会在浏览器中突显对应的 HTML 元素。 -

- - - 如果您安装了 Google Chrome,马上就可以试看看。 - 按一下 Brackets 视窗右上角的闪电图示,或是按 Cmd/Ctrl + Alt + P。 - 当即时预览功能在 HTML 档案上启用后,所有连结到的 CSS 档案也都可以马上编辑马上生效。 - Brackets 与您的浏览器建立连线时,图示会由灰转金。 - - 就是现在,把游标移到上面的 标籤。注意看 Chrome 在图片上显示的蓝色框。 - 接下来,按 Cmd/Ctrl + E 开启相关的 CSS 规则定义。 - 试著将框线 (border) 值由 10px 改成 20px,或将背景色 (background-color) 由透明 "transparent" 改成 "hotpink"。 - 如果您把 Brackets 跟浏览器并排放好,就能看到所有异动都直接反应在浏览器上了。酷吧?! - - -

- 目前 Brackets 只能即时预览 HTML 及 CSS。不过,储存修改过的 JavaScript 档案时也会自动重新载入页面。 - 我们正在努力让即时预览功能支援 JavaScript。 - 此外,即时预览现在只能在 Google Chrome 上执行,我们希望将来能支援所有主流的浏览器。 -

- -

快速检视

-

- 为了那些记不得色彩十六进位值或是 RGB 值的人,Brackets 能快速又简单的让您看见色彩的真相。 - 不管在 CSS 或 HTML 中,只要将滑鼠游标移到任何色彩值或是渐变色上,Brackets 就会自动显示预览。 - 对图片也同样有用,在 Brackets 裡将滑鼠游标移到图片连结上,就会自动显示预览缩图。 -

- - - 自已试试快速检视,只要将游标移到这份文件最上方的 标籤上,按下 Cmd/Ctrl + E - 开启 CSS 快速编辑器,将滑鼠游标移到 CSS 上的任何一个色彩值上就能看到。 - 想要预览渐变色,您也可以在 标籤上开启 CSS 快速编辑器,移到随便一个背景图片 (background-image) 值就能看到。 - 要试图片预览,则是将游标移到前几段提到的画面撷图上就能看到。 - - -

还不够吗? 安装扩充功能吧!

-

- 除了 Brackets 内建的这些好物外,我们那深具规模,且日益状大的开发者社群已经写出了数百个扩充功能。 - 如果您觉得 Brackets 少了什麽,说不定早就有人写好扩充功能了。 - 点一下 档案 > 扩充功能管理员...,再点一下「可使用」页籤,就能浏览或搜寻扩充功能清单。 - 一旦找到想要的扩充功能,按一下后面的「安装」按钮就可以了。 -

- - 标签。注意看 Chrome 在图片上显示的蓝色框。 + 接下来,按下 Cmd/Ctrl + E 打开相关的 CSS 规则定义。 + 试着将框线 (border) 值由 10px 改成 20px,或将背景色 (background-color) 由透明 "transparent" 改成 "hotpink"。 + 如果您把 Brackets 与浏览器并排显示,就能看到所有修改都直接反应在浏览器上了。很酷,是不是?! + + +

+ 目前 Brackets 只能实时预览 HTML 及 CSS。不过,保存修改过的 JavaScript 文件时也会自动重新载入页面。 + 我们正在努力让实时预览功能支持 JavaScript。 + 此外,实时预览现在只能在 Google Chrome 上运行,我们希望将来能支持所有主流的浏览器。 +

+ +

快速显示

+

+ 对于那些不记得颜色十六进位值或是 RGB 值的人士,Brackets 可以简单、快速地让您了解当前使用的颜色。 + 不管是在 CSS 还是在 HTML 中,只要将鼠标光标移到任何颜色值或是渐变色上,Brackets 就会自动显示预览。 + 对图片也同样有用,在 Brackets 中将鼠标光标移到图片链接上,就会自动显示缩略图。 +

+ + + 要尝试快速显示,只需将光标移到这份文件最上方的 + 标签上,按下 Cmd/Ctrl + E + 打开 CSS 快速编辑器,将鼠标光标移到 CSS 上的任何一个颜色值上就能看到。 + 您也可以在 + 标签上打开 CSS 快速编辑器,将鼠标移动到任意一个背景图片 (background-image) 值上预览渐变色。 + 要尝试图片预览,只需要在编辑器中将光标移到本文前述的截图上就能看到。 + + +

需要别的什么功能? 您可以安装扩展!

+

+ 除了 Brackets 内置的这些特色功能外,我们庞大且持续成长的开发者社区已经写出了数百个扩展。 + 如果您觉得 Brackets 少了什么,可能已经有人为此写好了扩展。 + 点击 文件 > 扩展管理器...,再点击“可获取”标签,就能浏览或搜索扩展列表。 + 当您找到想要的扩展,只需点击后面的“安装”按钮即可。 +

+ + -

一起参与

-

- Brackets 专案是开放原始码的。世界各地的网页开发者贡献一己之力,只为打造出更好的程式编辑器。 - 也有不少人正在开发扩充功能,让 Brackets 更强大。 - 告诉我们您的想法,分享您的构想,或是直接为本专案做点事吧。 -

- - - +

参与进来

+

+ Brackets 项目是开放源代码的。世界各地的网页开发者贡献自己的力量,只为打造出更好的编辑器。 + 还有不少人正在开发扩展,让 Brackets 更强大。 + 告诉我们您的想法,分享您的创意,或是直接为项目做点贡献吧。 +

+ + + +