在 2015 年 4 月至元智大學資訊傳播約系舉辦網站製作工作坊，讓參與的學員在 4 週內學會 HTML/CSS 基礎，並運用 Bootstrap 建置靜態網站。

1. 網站製作⼯工作坊
開發⼯工具與環境建置
2015/04/11 元智⼤大學資訊傳播學系 范聖佑

2. 單元主題
• 在這個單元裡將討論以下幾個主題：
- 了解如何建置開發環境
- 了解開發⼯工具如何使⽤用
- 完成我的第⼀一個網⾴頁

3. 開發流程及⼯工具
版本控制
SourceTree
網站預覽
Google Chrome
程式編輯
Brackets
裝置預覽
Edge Inspect
佈署平台
DIVSHOT

4. 建置開發環境

5. 開發⼯工具⼀一覽表
• 需安裝的軟體
- Google Chrome (瀏覽器)
- Brackets (編輯器)
- Source Tree (版本控制)
- Edge Inspect (測試⼯工具)

6. 安裝 Google Chrome

7. 安裝 Google Chrome
• 請下載並執⾏行安裝程式
• 安裝過程中請都使⽤用預設設定 (Next到底)
★ 下載位址：https://www.google.com/chrome/browser/desktop/index.html

8. 安裝 Brackets

9. 安裝 Brackets
• 請下載並執⾏行安裝程式
• 安裝過程中請都使⽤用預設設定 (Next到底)
★ 下載位址：http://brackets.io/

10. 安裝 Source Tree

11. 安裝 SourceTree
• 請下載並執⾏行安裝程式
• 安裝過程中請都使⽤用預設設定 (Next到底)
★ 下載位址：http://www.sourcetreeapp.com/
- 安裝過程中會⾃自動下載 git 程式核⼼心，請在下載完成後按 Next 繼續
- 安裝完成後，會詢問是否⾃自動設定 global gitignore？按Yes 即可
- 接著會詢問是否要設定帳號？直接按 Skip 先跳過
- 最後會詢問是否已經有 SSH Key 要匯⼊入？先按 No 即可

12. 設定 SourceTree
• 在使⽤用 SourceTree 前，先設定 git 的識別資
料，這樣⽇日後在儲存版本時，git 才有辦法紀
錄是哪個使⽤用者儲存的
$ git config --global user.name "{請填⾃自⼰己的名字}"
$ git config --global user.email "{請填⾃自⼰己的 email }"
★ 指令參考：http://git-­‐scm.com/book/zh-­‐tw/v1/開始-­‐初次設定Git

13. SourceTree 授權提⽰示
• SourceTree 雖可免費使⽤用，但需註冊才可以
取得免費使⽤用的授權，若之後跳出到期提醒，
請先依以下步驟取得授權後，再匯⼊入⾄至
SourceTree

14. 取得 SourceTree 授權
• 先⾄至 https://my.atlassian.com/ 註冊帳號
• 註冊完畢後，下載授權

15. 匯⼊入 SourceTree 授權
1. 匯⼊入授權
2. 指向剛下載好的授權檔
3. 設定完關閉

16. 安裝 Edge Inspect

17. 安裝 Edge Inspect
• 請下載並執⾏行 Edge Inspect 安裝程式
• 安裝 Google Chrome 外掛程式
• 在⼿手機/平板上安裝 Edge Inspect ⽤用⼾戶端
★ 主程式：https://creative.adobe.com/zh-­‐tw/products/inspect
★ 外掛程式：http://www.adobe.com/go/inspect_chrome_app_tw
★ iOS ⽤用⼾戶端：http://www.adobe.com/go/inspect_ios_app_tw
★ Android ⽤用⼾戶端：http://www.adobe.com/go/inspect_android_app_tw

18. 使⽤用開發⼯工具

19. 使⽤用 SourceTree

20. 什麼是版本控制？
• 就是將每⼀一階段的程式碼都送進版本控制系
統內做紀錄，讓開發過程中的每⼀一個階段都
有紀錄可尋、可查、可回溯
• 就像玩遊戲都會找存檔點⼀一樣，萬⼀一開發過
程出了差錯，我們還可以回復到上⼀一個存檔
點

21. git 版本控制
• 本⼯工作坊使⽤用的版本控制系統為 git，是⺫⽬目前
開放原始碼社群內最熱⾨門的系統。其分散式
的特性，讓眾多知名開發原始碼軟體都是使
⽤用 git 做版本控制
• git 是透過命令提⽰示字元操作，為降低難度，
本⼯工作坊採⽤用 SourceTree 軟體，透過圖型化
介⾯面教學 git 操作
★ 參考：https://www.atlassian.com/git/

22. 什麼是 SourceTree？
• 由 Atlassian 公司開發的 git 圖型化介⾯面軟體，
讓操作 git、瀏覽 git 線圖都變得更簡易、直
覺
• ⺫⽬目前⽀支援 Windows 及 Mac 兩個平台，只要
簡單的註冊就可以免費使⽤用，還可搭配
Bitbucket、Github 等平台使⽤用

23. 操作介⾯面
書籤管理
常⽤用功能鈕
working directory
staging area
檔案差異
儲存庫⾴頁籤

24. 開啟書籤管理

25. 新增⼀一個儲存庫

26. 儲存⼀一個版本
加⼊入檔案
輸⼊入儲存紀錄

27. 瀏覽歷史線圖

28. ⼩小提醒
• ⼯工作坊每⼀一個階段都會將該階段結果輸⼊入⾄至
儲存庫內，當各階段完成後，可以瀏覽各階
段程式碼的變更
• 若在任⼀一階段發⽣生錯誤的話，還可以透過版
本控制系統回復成上⼀一個版本

29. 使⽤用 Brackets

30. Brackets
• 由 Adobe 開放原始碼的網⾴頁編輯軟體
- 免費且可跨平台使⽤用
- 與 Google Chrome 良好的整合
- 有眾多針對前端開發的外掛可以擴充更多功
能

31. 基本操作介⾯面
編輯區
專案資料夾
已開啟的檔案
即時預覽、外掛

32. 語法⾼高亮度
• 藍⾊色
• 標籤名稱
• 綠⾊色
• 屬性名
• 橘⾊色
• 屬性值
• ⿊黑⾊色
• ⾮非HTML⽂文字

33. 語法提⽰示
• 在輸⼊入HTML標籤
時，Brackets 會⾃自動
依照⺫⽬目前輸⼊入的值進
⾏行提⽰示
• 確認輸⼊入的HTML標
籤後，Brackets也會
⾃自動輸⼊入關閉標籤

34. 語法偵錯
• 若Brackets發現有
HTML語法錯誤，則
會⾃自動將可能發⽣生錯
誤的部份以紅⾊色顯⽰示，
提⽰示錯誤發⽣生位置

35. 即時預覽
• 開發流程：修改 > 即時更新 > 存檔
即時同步

36. 開發/操作流程
• 指定專案資料夾
• 新增/開啟檔案
• 在編輯區中撰寫 HTML 原始檔
• 點擊最右邊閃電符號啟動 Google Chrome 進
⾏行同步預覽
• 編輯 > 預覽 > 存檔 (循環流程)

37. 使⽤用 Edge Inspect

38. 開發/操作流程
• 將⼯工作電腦與測試裝置連線⾄至同⼀一個 Wifi 區
網內
• 開啟 Edge Inspect 桌⾯面端及⽤用⼾戶端程式
• 開啟在⼯工作電腦上開啟 Google Chrome 並啟
動 Edge Inspect 外掛
• 輸⼊入配對碼後連線同步
• 在 Google Chrome 內瀏覽的⾴頁⾯面應可同步顯
⽰示於⼿手機裝置上
★ ⽰示範影⽚片：http://tv.adobe.com/watch/adobe-­‐evangelists-­‐paul-­‐
trani/introducing-­‐adobe-­‐edge-­‐inspect/

39. Chrome 操作補充

40. 檢視原始碼

41. 開發⼈人員⼯工具

42. 清除快取

43. 設定清除時間及範圍

44. 我的第⼀一個網⾴頁

45. HTML 基本結構
• doctype
• html
• head
• meta
• title
• body

46. doctype
• HTML⽂文件的格式定義，簡稱DTD
(Document Type Definition)
• ⼀一定放在 HTML ⽂文件的第⼀一⾏行
• ⽤用來告知瀏覽器這個 HTML ⽂文件內語法使⽤用
的版本

47. html
• HTML ⽂文件內最頂(外)層的標籤
• 所有標籤都⼀一定包在 html 這個標籤裡
• 標籤前後成對

48. head
• ⽤用來標記網⾴頁內額外的資訊，包括 meta、
title、link、script
• head裡的東⻄西都不會顯⽰示在網⾴頁上

49. meta
• ⽤用來設定網⾴頁的額外資訊
• 設定網⾴頁使⽤用編碼為 utf-8
• 沒有成對的標籤

50. • ⽤用來標記該網⾴頁的名稱，會顯⽰示在瀏覽器的
分⾴頁上
title

51. body
• 所有網⾴頁上看得⾒見的內容，都寫在 body 區
塊內。也就是說，只有 body 的內容會顯⽰示
在網⾴頁上

52. 實作
• 試著依照範本製作第⼀一個網⾴頁

53. 常⾒見疑問及排解
• HTML 的語法特性
• 檔案命名注意事項
• Mac 副檔名儲存提⽰示
• 編碼問題

54. 語法特性
• ⼤大多數 tag 是彼此成對組合的，中間夾著要
標記的內容
• tag 本⾝身並不會顯⽰示在畫⾯面上
• HTML檔案裡，⽂文字間再多的空⽩白也只會顯
⽰示⼀一個

55. 存檔提⽰示
• 存檔命名時
• 所有的檔名請⽤用半形、全英⽂文、⼩小寫
• 附檔名請⽤用 html
• ⾸首⾴頁請依照慣例使⽤用 index.html

56. 編碼問題
• 問：我在 Brackets
裡打中⽂文字，可是
在 Google Chrome
裡看到的卻是亂碼，
為什麼？
• 答：因為我們在
html 裡未指定正確
的編碼⽅方式。

57. 單元⼩小結
• 在這個單元裡，我們討論了：
- 安裝網站製作所需使⽤用的開發軟體
- 學習如何使⽤用這些開發⼯工具
- 了解⼀一個網⾴頁的基本元素，並完成我的第⼀一
個網⾴頁

58. 課後任務
• 在⾃自⼰己使⽤用的電腦上，安裝今天在⼯工作坊使
⽤用的所有開發⼯工具
• 依照今⽇日所學 HTML 的基礎結構，完成「我
的第⼀一個網⾴頁」作業，練習過程中，請確認
⾃自⼰己了解網站開發的⼯工作流程
• 參考講義內容，確認已申請⼯工作坊所需的網
路服務帳號

59. 問與答
學員可開始練習、實作

60. 下週主題
• 主題：HTML 與 CSS 語法
• 內容：
- HTML 語法教學
- CSS 語法教學
- 綜合演練