練習 - 設定 Web 應用程式的結構

  • 5 分鐘

建立和管理網站專案的方式有很多種。 根據您擁有的特定工具，以及您組織的偏好，上述項目可能會有一些差異。 建立網站時，由於網站會變得越來越複雜，因此專案結構在一段時間後變更是很常見的情況。 大型專案通常需要更高度的照護與關注，才能讓許多人將各項事務保持井然有序。 重點在於維持某種程度的組織性，而且有幾個常見的策略可協助您。

在此單元中，您會使用 Visual Studio Code 建立小型的專案結構。 專案會有三個檔案：HTML 檔案、CSS 檔案，以及 JavaScript 檔案。 您也會新增 Visual Studio Code 延伸模組，以簡化在您瀏覽器中執行網站的程序。

為您的網站建立新資料夾

  1. 打開 Visual Studio Code。

    當您開啟 Visual Studio Code 時，[歡迎] 頁面會隨即開啟。 請注意，您可以在 [開始] 清單中建立新檔案或開啟資料夾。

    Visual Studio Code 歡迎頁面的螢幕擷取畫面。

    如果未顯示 [歡迎使用] 頁面，您可以選取功能表上的 [說明]>[歡迎使用] 來加以顯示。 (或者，您可以在 Windows 電腦上使用鍵盤快速鍵 Shift+Ctrl+P，或在 macOS 上使用 Shift+Cmd+P，或是從 Visual Studio Code 功能表上選取 [檢視]>[命令選擇區] 來開啟 [命令選擇區]，以顯示 [歡迎使用] 頁面。顯示 [命令選擇區] 時，請在搜尋欄位中輸入>說明：歡迎使用，以開啟 [歡迎使用] 頁面。)

  2. 在 [歡迎使用] 的 [開始] 清單中選取 [開啟資料夾]，或從 Visual Studio Code 功能表選取 [檔案]>[開啟資料夾]。

    Windows 作業系統 [開啟資料夾] 對話方塊的螢幕擷取畫面。

    開啟資料夾時，作業系統會提供功能表選項以建立 [新資料夾]。

  3. 瀏覽至您想要為網站建立新資料夾的位置，然後選取 [新增資料夾]。

  4. 將資料夾命名為 simple-website，然後選取 [選取資料夾]。

    重要

    如果出現 Visual Studio Code 對話方塊，請選取 [信任上層資料夾中所有檔案的作者...]；此工作區信任功能可讓您決定您的專案資料夾應允許或限制自動程式碼執行。 由於您才剛剛建立資料夾，因此其為安全的。

建立一些檔案

  1. 從功能表選取 [檔案]>[新增檔案]，或在 Windows 上使用 Control+N，或在 macOS 上使用 Command+N 以建立新檔案。

  2. 在 Windows 上選取 Control+S，或在 macOS 上選取 Command+S 以儲存檔案。

  3. 輸入 index.html 作為檔案名稱，然後選取 [儲存]。

  4. 重複上述步驟，再建立兩個檔案：main.css 與 app.js。 完成時，Visual Studio Code Explorer 中的 simple-website 專案資料夾應該包含下列檔案：

    • index.html
    • main.css
    • app.js

    Visual Studio Code [檔案總管] 檢視中檔案的螢幕擷取畫面。

您可以在單一檔案中包含所有 HTML、CSS 樣式和 JavaScript 程式碼，以建置網站。 不過，在此練習中，您以 HTML 檔案來記錄內容、以 CSS 檔案設定樣式，並以 JavaScript 檔案來設定互動功能。

設定這三個檔案可協助您組織網站專案。 這種針對內容、樣式與邏輯的區隔，便是漸進增強的範例。 如果您的客戶未啟用或不支援 JavaScript，CSS 和 HTML 仍可運作。 但是，如果您的客戶不支援 CSS，則至少會顯示您的 HTML 內容。

安裝延伸模組或套件

您可以使用延伸模組 Marketplace 來擴充 Visual Studio Code 的功能。 請記住，這些延伸模組是社群開發的資源，且相同類型的功能通常會有數個解決方案可供使用。 您可以在編輯器中個別安裝延伸模組，或使用命令列一次安裝數個延伸模組。

對於網頁程式開發，您現在只需要[open in browser]。 此延伸模組可協助您在預設瀏覽器中快速開啟網站，而不是將檔案 URL 複製並貼入瀏覽器。

若要安裝此延伸模組，請使用下列步驟：

  1. 在垂直的 [活動列] \(左窗格\) 上選取 [延伸模組] 圖示。

  2. 在搜尋列中輸入開啟位置，然後選取由 TechER 發佈的 [在瀏覽器中開啟] 延伸模組。

  3. 選取 [安裝]，Visual Studio Code 即會安裝該延伸模組。

    螢幕擷取畫面顯示 [搜尋] 欄位中含有

  4. 按一下 [活動列] 的頂端圖示，或是在 Windows 上使用 Control+Shift-E，或在 macOS 上使用 Command+Shift-E 來切換回 [檔案總管]。

很好！ 安裝與設定需要一些額外的時間，但您只需安裝並設定一次。 現在您可以開始建立網站。