开发工具与环境建置
1 like2,338 views
在 2015 年 4 月至元智大學資訊傳播約系舉辦網站製作工作坊，讓參與的學員在 4 週內學會 HTML/CSS 基礎，並運用 Bootstrap 建置靜態網站。
More Related Content
What's hot (20)
Viewers also liked (15)
Similar to 开发工具与环境建置 (20)
More from Shengyou Fan (20)
![[JCConf 2024] Kotlin/Wasm：為 Kotlin 多平台帶來更多可能性](https://cdn.slidesharecdn.com/ss_thumbnails/kotlin-wasm-the-new-target-in-kmp-241004034547-e11ec4a4-thumbnail.jpg?width=560&fit=bounds)
![[GDG Kaohsiung DevFest 2023] 以 Compose 及 Kotlin Multiplatform 打造多平台應用程式](https://cdn.slidesharecdn.com/ss_thumbnails/building-multiplaftorm-application-using-kotlin-and-compose-multiplatform-231127165717-6bee7d0b-thumbnail.jpg?width=560&fit=bounds)
![[JCConf 2023] 從 Kotlin Multiplatform 到 Compose Multiplatform：在多平台間輕鬆共用業務邏輯與 U...](https://cdn.slidesharecdn.com/ss_thumbnails/kotlin-multiplatform-with-compose-231011174559-d4d22a45-thumbnail.jpg?width=560&fit=bounds)
![[Kotlin 讀書會第五梯次] 深入淺出 Kotlin 第一章導讀](https://cdn.slidesharecdn.com/ss_thumbnails/guided-reading-on-head-first-kotlin-chapter-one-230816095202-c328f541-thumbnail.jpg?width=560&fit=bounds)
![[WebConf Taiwan 2023] 一份 Zend Engine 外帶！透過 Micro 讓一次打包、多處運行變得可能](https://cdn.slidesharecdn.com/ss_thumbnails/building-app-with-zend-engine-using-micro-230816092930-84eda384-thumbnail.jpg?width=560&fit=bounds)
![[Effective Kotlin 讀書會] 第八章 Efficient collection processing 導讀](https://cdn.slidesharecdn.com/ss_thumbnails/effective-kotlin-chapter8-221208155318-f914a841-thumbnail.jpg?width=560&fit=bounds)
![[MOPCON 2022] 以 Kotlin Multiplatform 制霸全平台](https://cdn.slidesharecdn.com/ss_thumbnails/kotlin-multiplatform-221017125206-52db0fac-thumbnail.jpg?width=560&fit=bounds)
![[JCConf 2022] Compose for Desktop - 開發桌面軟體的新選擇](https://cdn.slidesharecdn.com/ss_thumbnails/compose-for-desktop-221008111948-4f59ebda-thumbnail.jpg?width=560&fit=bounds)
![[COSCUP 2022] 讓黑畫面再次偉大 - 用 PHP 寫 CLI 工具](https://cdn.slidesharecdn.com/ss_thumbnails/make-cli-great-again-by-using-php-220803083302-2be4b800-thumbnail.jpg?width=560&fit=bounds)
![[COSCUP 2022] Kotlin Collection 遊樂園](https://cdn.slidesharecdn.com/ss_thumbnails/kotlin-collection-playground-220803082529-17e4a226-thumbnail.jpg?width=560&fit=bounds)
![[PHP 也有 Day #64] PHP 升級指南](https://cdn.slidesharecdn.com/ss_thumbnails/php-upgrade-guide-220301051052-thumbnail.jpg?width=560&fit=bounds)
![[Kotlin Serverless 工作坊] 單元 4 - 實作 RSS Aggregator](https://cdn.slidesharecdn.com/ss_thumbnails/kotlin-serverless-ep4-rss-aggregator-210423105251-thumbnail.jpg?width=560&fit=bounds)
![[Kotlin Serverless 工作坊] 單元 3 - 實作 JSON API](https://cdn.slidesharecdn.com/ss_thumbnails/kotlin-serverless-ep3-json-handling-210423105249-thumbnail.jpg?width=560&fit=bounds)
开发工具与环境建置
- 2. 單元主題 ? 在這個單元裡將討論以下幾個主題： - 了解如何建置开发环境 - 了解開發?工具如何使?用 - 完成我的第?一个网?页
- 4. 建置开发环境
- 5. 開發?工具?一覽表 ? 需安裝的軟體 - Google Chrome (瀏覽器) - Brackets (編輯器) - Source Tree (版本控制) - Edge Inspect (測試?工具)
- 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 con?g --global user.name "{請填?自?己的名字}" $ git con?g --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
- 21. git 版本控制 ? 本?工作坊使?用的版本控制系統為 git，是??目前 開放原始碼社群內最熱?門的系統。其分散式 的特性，讓眾多知名開發原始碼軟體都是使 ?用 git 做版本控制 ? git 是透過命令提?示字元操作，為降低難度， 本?工作坊採?用 SourceTree 軟體，透過圖型化 介?面教學 git 操作 ★ 參考：https://www.atlassian.com/git/
- 22. 什麼是 SourceTree？ ? 由 Atlassian 公司開發的 git 圖型化介?面軟體， 讓操作 git、瀏覽 git 線圖都變得更簡易、直 覺 ? ??目前?支援 Windows 及 Mac 兩個平台，只要 簡單的註冊就可以免費使?用，還可搭配 Bitbucket、Github 等平台使?用
- 24. 开啟书籤管理
- 25. 新增?一个储存库
- 27. 瀏览歷史线图
- 28. ?小提醒 ? ?工作坊每?一個階段都會將該階段結果輸?入?至 儲存庫內，當各階段完成後，可以瀏覽各階 段程式碼的變更 ? 若在任?一階段發?生錯誤的話，還可以透過版 本控制系統回復成上?一個版本
- 29. 使?用 Brackets
- 30. Brackets ? 由 Adobe 開放原始碼的網?頁編輯軟體 - 免費且可跨平台使?用 - 與 Google Chrome 良好的整合 - 有眾多針對前端開發的外掛可以擴充更多功 能
- 32. 語法?高亮度 ? 藍?色 ? 標籤名稱 ? 綠?色 ? 屬性名 ? 橘?色 ? 屬性值 ? ?黑?色 ? ?非HTML?文字
- 33. 語法提?示 ? 在輸?入HTML標籤 時，Brackets 會?自動 依照??目前輸?入的值進 ?行提?示 ? 確認輸?入的HTML標 籤後，Brackets也會 ?自動輸?入關閉標籤
- 35. 即時預覽 ? 開發流程：修改 > 即時更新 > 存檔 即時同步
- 36. 開發/操作流程 ? 指定專案資料夾 ? 新增/開啟檔案 ? 在編輯區中撰寫 HTML 原始檔 ? 點擊最右邊閃電符號啟動 Google Chrome 進 ?行同步預覽 ? 編輯 > 預覽 > 存檔 (循環流程)
- 37. 使?用 Edge Inspect
- 38. 開發/操作流程 ? 將?工作電腦與測試裝置連線?至同?一個 Wi? 區 網內 ? 開啟 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 De?nition) ? ?一定放在 HTML ?文件的第?一?行 ? ?用來告知瀏覽器這個 HTML ?文件內語法使?用 的版本
- 47. html ? HTML ?文件內最頂(外)層的標籤 ? 所有標籤都?一定包在 html 這個標籤裡 ? 標籤前後成對
- 48. head ? ?用來標記網?頁內額外的資訊，包括 meta、 title、link、script ? 丑别补诲裡的东?西都不会显?示在网?页上
- 49. meta ? ?用來設定網?頁的額外資訊 ? 設定網?頁使?用編碼為 utf-8 ? 沒有成對的標籤
- 51. body ? 所有網?頁上看得?見的內容，都寫在 body 區 塊內。也就是說，只有 body 的內容會顯?示 在網?頁上
- 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 語法教學 - 綜合演練