# 環境安裝 ###### tags: `NKFW 網頁設計入門` ## WIFI 帳號:NKFW2024 密碼:nkfw2024 ## Visual Studio Code (VS Code) :::info VS Code是一款免費的整合式開發環境(IDE)，我們經常使用IDE提供的功能來加速、輔助開發，VS Code有不少方便的快捷功能及好用的擴充元件可安裝。 ::: 1. 前往<a href="https://code.visualstudio.com/">VS Code官網</a> https://code.visualstudio.com/ ![](https://i.imgur.com/ng67d2g.png) ![](https://i.imgur.com/QTpVpae.png) 2. 尋找對應版本下載 ![](https://i.imgur.com/sVDf5ab.png) ![](https://i.imgur.com/Tgeyxk6.png) 3. 開始安裝 a. 開啟安裝檔 b. 同意條款 ![](https://i.imgur.com/exXiY69.png) c. 附加工作(不須更改) ![](https://i.imgur.com/ABExZIN.png) d. 點擊安裝 ## Live Server :::info Live Server是VS Code的擴充元件，即時更新的特性有利我們撰寫及修改網頁。 ::: 1. 打開VS Code ![](https://i.imgur.com/gwlDaCt.png) 2. 點開右側欄位的Extensions ![](https://i.imgur.com/BXu8jtI.png) 3. 在上方搜尋欄搜尋「Live Server」，找到下圖的擴充套件 ![](https://i.imgur.com/FPJyoSL.png) 4. 點擊install下載 5. 看到畫面右下角多了「Go Live」的按鍵就代表成功了喔！ ![](https://i.imgur.com/WbEj0Tr.png) ## Chinese Language Pack (optional) :::info Chinese Language Pack是Microsoft官方提供的擴充套件，可以將介面轉為中文。 ::: 1. 在Extensions的搜尋欄中搜尋「Chinese Language Pack」 2. 點擊install下載下圖的擴充套件 ![](https://i.imgur.com/ZqUARmM.png) 3. 右下角會跳出提示窗，按下「Change Language and Restart」 ![](https://i.imgur.com/leyo6sS.png) ## 基本操作 1. 建立資料夾 2. 透過「File」中的「Open Folder」開啟資料夾 ![](https://i.imgur.com/TSAmhDp.png) 3. 透過上圖右上方的「New File」開啟新檔並取名，記得要包括主要檔名及副檔名 4. 試著建立一個「demo.html」 ![](https://i.imgur.com/gQrds0x.png) 5. 在裡面打上一些簡單的文字 6. 點擊右下角的Go Live觀察效果 ![](https://i.imgur.com/WbEj0Tr.png)