---
# System prepended metadata

title: 環境安裝

---

# 環境安裝
###### 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)