環境安裝

tags: NKFW 網頁設計入門

Visual Studio Code (VS Code)

VS Code是一款免費的整合式開發環境(IDE)，我們經常使用IDE提供的功能來加速、輔助開發，VS Code有不少方便的快捷功能及好用的擴充元件可安裝。

  1. 前往VS Code官網 https://code.visualstudio.com/

  1. 尋找對應版本下載

  1. 開始安裝
    a. 開啟安裝檔
    b. 同意條款

    c. 附加工作(不須更改)

    d. 點擊安裝

Live Server

Live Server是VS Code的擴充元件，即時更新的特性有利我們撰寫及修改網頁。

  1. 打開VS Code

  2. 點開右側欄位的Extensions

  3. 在上方搜尋欄搜尋「Live Server」，找到下圖的擴充套件

  4. 點擊install下載

  5. 看到畫面右下角多了「Go Live」的按鍵就代表成功了喔！

Chinese Language Pack (optional)

Chinese Language Pack是Microsoft官方提供的擴充套件，可以將介面轉為中文。

  1. 在Extensions的搜尋欄中搜尋「Chinese Language Pack」

  2. 點擊install下載下圖的擴充套件

  3. 右下角會跳出提示窗，按下「Change Language and Restart」

基本操作

  1. 建立資料夾

  2. 透過「File」中的「Open Folder」開啟資料夾

  3. 透過上圖右上方的「New File」開啟新檔並取名，記得要包括主要檔名及副檔名

  4. 試著建立一個「demo.html」

  5. 在裡面打上一些簡單的文字

  6. 點擊右下角的Go Live觀察效果

Select a repo