msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity

Merge pull request #390 from ChungZH/patch-2

Browse Source 
[zh-cn] 3/3/assignment.zh-cn.md
pull/398/head
Jen Looper 3 years ago committed by GitHub
parent c5dcf2a589 8b545695ce
commit 9c6ff0acd4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 30 additions and 19 deletions
Show Stats Download Patch File Download Diff File

2
3-terrarium/1-intro-to-html/translations/README.zh-tw.md
Unescape View File

@ -75,7 +75,7 @@ HTML 文件中 'head' 的區域包含很多網頁的重要資訊，也被稱作[
</head> </head>
``` ```
✅ 你認為設定下列視窗元資訊 `<meta name="viewport" content="width=600">` 會發生什麼事？ 請閱讀更多有關於[Viewport](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag)的資訊。 ✅ 你認為設定下列視窗元資訊 `<meta name="viewport" content="width=600">` 會發生什麼事？ 請閱讀更多有關於 [Viewport](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag) 的資訊。
--- ---

4
3-terrarium/2-intro-to-css/translations/README.zh-tw.md
Unescape View File

@ -11,7 +11,7 @@
階層式樣式表，CSS (Cascading Style Sheets)解決了網頁開發重要的問題：如何讓網頁變得漂亮。為你的應用造型化可以讓網頁更好用、更好看。你也可以使用 CSS 建立回應式網頁設計(Responsive Web Design - RWD)，依據你的視窗大小改變網頁的呈現方式。 CSS 不只讓網頁變美麗，它允許加入動畫以呈現更生動的互動體驗。CSS 工作組持續維護 CSS 的規格書，你可以在[全球資訊網協會官網](https://www.w3.org/Style/CSS/members)追蹤他們的作業。 階層式樣式表，CSS (Cascading Style Sheets)解決了網頁開發重要的問題：如何讓網頁變得漂亮。為你的應用造型化可以讓網頁更好用、更好看。你也可以使用 CSS 建立回應式網頁設計(Responsive Web Design - RWD)，依據你的視窗大小改變網頁的呈現方式。 CSS 不只讓網頁變美麗，它允許加入動畫以呈現更生動的互動體驗。CSS 工作組持續維護 CSS 的規格書，你可以在[全球資訊網協會官網](https://www.w3.org/Style/CSS/members)追蹤他們的作業。
> 筆記，CSS 是一種程式語言，但就像任何在網路上的東西一樣，並不是所有瀏覽器都支援最新的規格。請時常利用[CanIUse.com](https://caniuse.com)檢查你的設計是否支援相關瀏覽器。 > 筆記，CSS 是一種程式語言，但就像任何在網路上的東西一樣，並不是所有瀏覽器都支援最新的規格。請時常利用 [CanIUse.com](https://caniuse.com) 檢查你的設計是否支援相關瀏覽器。
這堂課中，我們會為我們的線上盆栽盒增加造型，學習更多 CSS 的概念：串接(Cascade)、繼承(Inheritance)、選擇器(Selectors)、定位(Positioning)與建立布局(Layout)。我們會規劃盆栽盒的布局，建立實際的盆栽盒。 這堂課中，我們會為我們的線上盆栽盒增加造型，學習更多 CSS 的概念：串接(Cascade)、繼承(Inheritance)、選擇器(Selectors)、定位(Positioning)與建立布局(Layout)。我們會規劃盆栽盒的布局，建立實際的盆栽盒。
@ -256,7 +256,7 @@ h1 {
## 複習與自學 ## 複習與自學
CSS 看似很好上手，但要在所有瀏覽器與螢幕大小上運作正常，也會面臨到許多挑戰。CSS-Grid 與 Flexbox 這兩種工具讓上述作業變得比較好規劃與調整。藉由遊玩[Flexbox Froggy](https://flexboxfroggy.com/)與[Grid Garden](https://codepip.com/games/grid-garden/)來學習它們。 CSS 看似很好上手，但要在所有瀏覽器與螢幕大小上運作正常，也會面臨到許多挑戰。CSS-Grid 與 Flexbox 這兩種工具讓上述作業變得比較好規劃與調整。藉由遊玩 [Flexbox Froggy](https://flexboxfroggy.com/) 與 [Grid Garden](https://codepip.com/games/grid-garden/) 來學習它們。
## 作業 ## 作業

6
3-terrarium/3-intro-to-DOM-and-closures/translations/README.zh-tw.md
Unescape View File

@ -9,7 +9,7 @@
### 大綱 ### 大綱
操作 DOM (Document Object Model) 是網頁開發的一項關鍵。根據[MDN 文件](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)， 「Document Object Model (DOM) 元素能根據網頁文件的結構與內容來呈現物件」。藉由使用 JavaScript 框架而非原始的 JavaScript 程式碼來管理 DOM，在網頁上操作 DOM 的挑戰已經不比以前困難了，但這裡我們要自己來管理它們！ 操作 DOM (Document Object Model) 是網頁開發的一項關鍵。根據 [MDN 文件](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)， 「Document Object Model (DOM) 元素能根據網頁文件的結構與內容來呈現物件」。藉由使用 JavaScript 框架而非原始的 JavaScript 程式碼來管理 DOM，在網頁上操作 DOM 的挑戰已經不比以前困難了，但這裡我們要自己來管理它們！
此外，這堂課也會介紹有關[JavaScript 閉包(Closure)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)的概念，你可以想像成一個函式被包在另一個函式中，以訪問外面函式範圍中的變數。 此外，這堂課也會介紹有關[JavaScript 閉包(Closure)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)的概念，你可以想像成一個函式被包在另一個函式中，以訪問外面函式範圍中的變數。
@ -209,9 +209,9 @@ function stopElementDrag() {
在螢幕上拖曳物件看似簡單，但依照不同的目的與實現方法會遭遇到不同的問題。事實上，這邊有一份關於你可以嘗試的[拖曳 API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)。我們沒在專案中使用是為了建立不一樣的實現方法，試著使用這些 API 到專案中，看看你能完成什麼。 在螢幕上拖曳物件看似簡單，但依照不同的目的與實現方法會遭遇到不同的問題。事實上，這邊有一份關於你可以嘗試的[拖曳 API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)。我們沒在專案中使用是為了建立不一樣的實現方法，試著使用這些 API 到專案中，看看你能完成什麼。
在[W3C 文件](https://www.w3.org/TR/pointerevents1/) 和 [MDN 網頁文件](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)上取得更多關於 pointer 的事件。 在 [W3C 文件](https://www.w3.org/TR/pointerevents1/) 和 [MDN 網頁文件](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)上取得更多關於 pointer 的事件。
記得習慣性用[CanIUse.com](https://caniuse.com/)檢查網頁的瀏覽器兼容性。 記得習慣性用 [CanIUse.com](https://caniuse.com/) 檢查網頁的瀏覽器兼容性。
## 作業 ## 作業

11
3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.zh-cn.md
Unescape View File

@ -0,0 +1,11 @@
# 用 DOM 干更多事
## 说明
选取一个 DOM 元素，并通过它对 DOM 进行更深入的研究。访问 MDN 的 [DOM 接口的清单](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) 并挑选一个。在网络上寻找一个使用了这个元素的网页，并解释如何使用它。
## 评价表
| 指标 | 优秀 | 良好 | 尚可进步 |
| --- | ---- | ---- | ------- |
| | 写了一段话，并且附带例子 | 写了一段话，没有附带例子 | 没有记录 |

2
3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.zh-tw.md
Unescape View File

@ -2,7 +2,7 @@
## 簡介 ## 簡介
調查其中一項 DOM 的元素。造訪 MDN 關於[DOM 介面的清單](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)挑選其中一項。在網路上找尋一個使用這項元素的網頁，並解釋如何使用它。 調查其中一項 DOM 的元素。造訪 MDN 關於 [DOM 介面的清單](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)挑選其中一項。在網路上找尋一個使用這項元素的網頁，並解釋如何使用它。
## 學習評量 ## 學習評量

4
6-space-game/translations/README.zh-cn.md
Unescape View File

@ -1,6 +1,6 @@
# 构建一款太空游戏 # 构建一款太空游戏
一个空间游戏来教授更高级的 JavaScript 基础知识 一个太空游戏来教授更高级的 JavaScript 基础知识
在本课中，你将学习如何建立你自己的太空游戏。如果你曾经玩过 "太空侵略者 "这个游戏，这个游戏的想法是一样的：驾驶飞船，向从上面下来的怪物开火。下面是完成后的游戏的样子。 在本课中，你将学习如何建立你自己的太空游戏。如果你曾经玩过 "太空侵略者 "这个游戏，这个游戏的想法是一样的：驾驶飞船，向从上面下来的怪物开火。下面是完成后的游戏的样子。
@ -28,4 +28,4 @@
## 贡献者 ## 贡献者
游戏资源来自于 https://www.kenney.nl/。 游戏资源来自于 https://www.kenney.nl/。
如果你喜欢建造游戏，这里有一些好东西，很多是免费的，也有些是付费的。 如果你喜欢制作游戏，这里有一些好东西，很多是免费的，也有些是付费的。

Write Preview
Loading…
Cancel
Save