處理檔案

一個網站由許多檔案組成：文字內容、程式碼、樣式表、媒體內容等等。當你構建網站時，你需要將這些檔案組裝成一個合理的結構，儲存在你的本地計算機上，確保它們能夠相互通訊，並在最終上傳到伺服器之前使所有內容看起來都正確。檔案處理討論了一些你應該注意的問題，以便你可以為你的網站設定一個合理的資料夾結構。

您的網站應儲存在計算機上的哪個位置？

當你正在本地計算機上開發網站時，你應該將所有相關檔案儲存在一個單獨的資料夾中，該資料夾反映了伺服器上已釋出網站的檔案結構。這個資料夾可以放在任何你想要的地方，但你應該把它放在一個易於查詢的地方，例如你的桌面、主資料夾或硬碟的根目錄。

  1. 選擇一個位置來儲存你的網站專案。在你選擇的位置內，建立一個名為web-projects（或類似名稱）的新資料夾。這將是所有網站專案存放的地方。
  2. 在這個第一個資料夾內，建立另一個資料夾來儲存你的第一個網站。將其命名為test-site（或更具創意的名稱）。

關於大小寫和空格的說明

你會注意到，在本文中，我們要求你將資料夾和檔名全部使用小寫字母且不包含空格。這是因為

  1. 許多計算機，特別是 Web 伺服器，都是區分大小寫的。例如，如果你將影像放在網站上的test-site/MyImage.jpg，然後在另一個檔案中嘗試呼叫該影像為test-site/myimage.jpg，它可能無法工作。
  2. 在檔名中使用空格會產生很多問題
    • 當你在終端中呼叫命令時，你必須用引號括住包含空格的檔名，否則路徑將被解釋為兩個單獨的專案。
    • 一些程式語言（例如 Python）如果這些檔案是要匯入的模組，則無法很好地處理檔名中的空格。

檔名也會對映到 URL。例如，如果你的伺服器服務目錄的根目錄下有一個名為my_file.html的檔案，那麼大多數 Web 伺服器的預設行為通常可以透過https://example.com/my_file.html訪問它。一些伺服器會將檔名中的空格替換為“%20”（URL 中空格的字元程式碼），如果它們假設檔名和 URL 完全匹配，這可能會在某些伺服器端邏輯中產生細微的錯誤。

建議使用連字元而不是下劃線來分隔單詞：my-file.html與my_file.html。 Google 搜尋引擎將連字元視為單詞分隔符，但不會將下劃線視為單詞分隔符。這可以透過配置伺服器將下劃線替換為連字元來解決，但這需要額外的操作，並且檔名和 URL 出現差異時更容易出錯。

由於這些原因，最好養成使用小寫字母、不包含空格且使用連字元分隔單詞的資料夾和檔名書寫習慣，至少在你瞭解自己在做什麼之前。這樣，你以後遇到的問題就會更少。

您的網站應採用什麼結構？

接下來，讓我們看看我們的測試站點應該具有什麼結構。在任何我們建立的網站專案中，最常見的內容是 index HTML 檔案以及用於包含影像、樣式檔案和指令碼檔案的資料夾。現在讓我們建立這些檔案。

  1. index.html：此檔案通常包含你的主頁內容，即人們首次訪問你的網站時看到的文字和影像。使用你的文字編輯器，建立一個名為index.html的新檔案，並將其儲存在你的test-site資料夾內。
  2. images資料夾：此資料夾將包含你在網站上使用的所有影像。在你的test-site資料夾內建立一個名為images的資料夾。
  3. styles資料夾：此資料夾將包含用於設定內容樣式的 CSS 程式碼（例如，設定文字和背景顏色）。在你的test-site資料夾內建立一個名為styles的資料夾。
  4. scripts資料夾：此資料夾將包含用於向網站新增互動功能的所有 JavaScript 程式碼（例如，單擊時載入資料的按鈕）。在你的test-site資料夾內建立一個名為scripts的資料夾。

注意：在 Windows 計算機上，你可能無法看到檔名，因為 Windows 預設情況下啟用了名為隱藏已知檔案型別的副檔名的選項。通常，你可以透過進入 Windows 資源管理器，選擇資料夾選項…選項，取消選中隱藏已知檔案型別的副檔名複選框，然後單擊確定來關閉此選項。有關涵蓋你所用 Windows 版本的更具體資訊，你可以在網上搜索。

檔案路徑

為了使檔案能夠相互通訊，你必須在它們之間提供一個檔案路徑——基本上是一條路線，以便一個檔案知道另一個檔案在哪裡。為了演示這一點，我們將在index.html檔案中插入一些 HTML 程式碼，並使其顯示你在文章"你的網站會是什麼樣子？"中選擇的影像。或者，你可以選擇你現有的影像（在你的計算機上或從網路上），並在以下步驟中使用它。

  1. 將你之前選擇的影像複製到你的images資料夾中。
  2. 開啟你的index.html檔案，並將以下程式碼按原樣插入到檔案中。現在不用擔心它的含義——我們將在本系列的後面更詳細地研究這些結構。
    html
    <!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My test page</title>
  </head>
  <body>
    <img src="" alt="My test image" />
  </body>
</html>
  3. <img src="" alt="My test image">行是將影像插入頁面的 HTML 程式碼。我們需要告訴 HTML 影像在哪裡。影像位於images目錄內，該目錄與index.html位於同一目錄中。為了從index.html到我們的影像遍歷檔案結構，我們需要的檔案路徑是images/your-image-filename。例如，我們的影像名為firefox-icon.png，因此檔案路徑為images/firefox-icon.png。
  4. 將檔案路徑插入到src=""程式碼的雙引號之間。
  5. 將alt屬性的內容更改為你包含的影像的描述。在本例中，alt="Firefox logo: flaming fox wrapping the world"。
  6. 儲存你的 HTML 檔案，然後在你的 Web 瀏覽器中載入它（雙擊該檔案）。你應該會看到你的新網頁顯示你的影像！

A screenshot of our basic website showing just the Firefox logo - a flaming fox wrapping the world

一些檔案路徑的一般規則

  • 要連結到與呼叫 HTML 檔案位於同一目錄中的目標檔案，只需使用檔名，例如my-image.jpg。
  • 要引用子目錄中的檔案，請在路徑前面加上目錄名，再加上正斜槓，例如subdirectory/my-image.jpg。
  • 要連結到呼叫 HTML 檔案上方目錄中的目標檔案，請寫兩個點。例如，如果index.html位於test-site的子資料夾內，而my-image.jpg位於test-site內，則可以使用../my-image.jpg從index.html引用my-image.jpg。
  • 你可以根據需要組合這些路徑，例如../subdirectory/another-subdirectory/my-image.jpg。

目前，這就是你需要了解的所有內容。

注意：Windows 檔案系統傾向於使用反斜槓而不是正斜槓，例如C:\Windows。這在 HTML 中無關緊要——即使你在 Windows 上開發網站，也應該在程式碼中使用正斜槓。

還應執行哪些操作？

目前就是這樣。你的資料夾結構應該如下所示

A file structure in macOS finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file