處理檔案

操作檔案和資料夾

有許多不同的方法可以在計算機上建立和編輯檔案和資料夾。你可以透過計算機的命令列/終端使用一系列文字命令來完成，你將在下一篇文章中瞭解更多資訊。然而，許多人發現透過視覺方式開始學習檔案系統更容易，這也是我們在這裡要討論的。現代作業系統 (OS) 具有強大的檔案系統使用者介面 (UI)，你可以根據需要使用它來操作檔案和資料夾。

例如，在 macOS 上，你有 Finder 程式

而 Windows 有檔案資源管理器

基本結構

大多數現代作業系統都有一個 Users 資料夾，其中包含系統中每個使用者帳戶的資料夾，也稱為使用者的主資料夾。它通常用一個房屋圖標表示，以便更容易找到。反過來，主資料夾將包含與該使用者相關的其他重要標準資料夾（和檔案），例如文件、音樂等。你的計算機上還有許多其他檔案和資料夾，但現在不用擔心這些。

當前登入的使用者預設只能訪問其自己的主資料夾。

你應該將與你的工作相關的專案檔案建立在你的主資料夾中的某個位置，例如文件中。這很有意義，因為網頁檔案通常被稱為文件。

建立資料夾

讓我們建立一個新資料夾來儲存所有我們的網頁專案。

1. 在你的檔案系統 UI 中，點選你的主資料夾，然後雙擊你的文件資料夾。
2. 在此位置建立一個名為 web-projects 的新資料夾
   1. 在 Windows 上，可以透過選擇檔案資源管理器視窗中的新建按鈕並選擇資料夾（或按 Ctrl + Shift + N），然後輸入 web-projects 作為出現的新資料夾圖示的名稱，再按 Enter/Return 來完成。
   2. 在 macOS 上，可以透過在 Finder 選單中選擇檔案 > 新建資料夾（或按 Cmd + Shift + N）來完成——你會看到一個名為無標題資料夾的新資料夾出現。點選資料夾名稱開始編輯它，輸入 web-projects，然後按 Enter/Return。

如果你打錯了字，可以編輯資料夾名稱進行更正（這也適用於檔案）

• 在 Windows 上，右鍵點選資料夾，從選單中選擇重新命名，然後編輯它。某些 Windows 版本最初會顯示一個簡化選單——你可能需要右鍵點選，然後選擇顯示更多選項，再選擇重新命名！
• 在 macOS 上，點選/選擇資料夾名稱進行編輯。

在 VS Code 中開啟專案資料夾並建立檔案

雖然你可以在作業系統檔案系統 UI 中建立文字檔案，但在程式碼編輯器中建立它們通常更容易且不易出錯。事實上，VS Code 有自己的檔案資源管理器，允許你為你的網頁專案建立所需的所有資料夾和檔案。

那麼我們為什麼要讓你費勁地使用作業系統檔案系統 UI 建立資料夾呢？因為 VS Code 需要指向一個初始的頂級資料夾！

瞭解一些作業系統檔案系統的結構也很有用。當你以後開始使用更復雜的工具時，這會變得更加有用。

現在讓我們在 VS Code 中開啟我們的 web-projects 資料夾。

1. 開啟 VS Code。
2. 從選單中選擇檔案 > 開啟資料夾...。

   注意： 如果你是鍵盤使用者，在 Windows 中可以透過按住 Ctrl 鍵然後按 K 再按 O 來執行開啟資料夾命令。macOS 使用者最簡單的方法是使用 Cmd + Shift + P 開啟命令面板，輸入“Open Folder”來篩選命令列表，使用游標鍵向下移動到檔案：開啟資料夾，然後按 Enter。

3. 一個迷你版的作業系統檔案系統 UI 將出現。使用它找到你的 web-projects 資料夾，選中它，然後按選擇資料夾按鈕。
4. 你將看到一個名為你信任此資料夾中檔案的作者嗎？的對話方塊。仔細閱讀以瞭解其內容。目前，你將是唯一在此資料夾中建立檔案的人，因此你可以點選是的，我信任作者。

你應該會看到你的 web-projects 資料夾在 VS Code 的資源管理器窗格中開啟，如下圖所示

關於 VS Code 鍵盤導航的插曲

VS Code 雖不完美，但擁有一套廣泛的鍵盤快捷鍵。在本文中，我們嘗試儘可能包含有用的快捷鍵，但你可以在 VS Code 鍵盤快捷鍵參考中找到更全面的列表。

一般來說，如果你想透過鍵盤導航 VS Code，你可以按 Tab 鍵在 UI 的不同區域之間移動（Shift + Tab 將你移動到上一個 Tab 焦點位置）。如果一個 Tab 焦點位置有多個按鈕，你可以使用游標鍵在它們之間移動。

如果你當前正在編輯檔案，Tab 鍵不會在 UI 中導航——它會在檔案中新增製表符。要從正在編輯的檔案中移出到資源管理器窗格，在 macOS 上你可以按 Cmd + Shift + E，在 Windows 上則按 Ctrl + Shift + E。

要返回檔案編輯器窗格並開始在不同選項卡中開啟的不同檔案之間移動，請按住 Ctrl 鍵並使用 Tab 和 Shift + Tab 在開啟的選項卡列表中上下移動（在 macOS 和 Windows 上都是）。突出顯示要編輯的檔案後，釋放按鍵即可移動到該選項卡。

建立檔案

從這裡，你可以使用資源管理器窗格頂部的相關按鈕建立新檔案和資料夾。

1. 點選新建檔案...圖示（或 Tab 到它並按 Enter/Return）來建立新檔案。
2. 在出現的文字輸入框中輸入檔名“index.html”，然後按 Enter/Return。

此時，返回到你的作業系統檔案系統 UI，雙擊進入你的 web-projects 資料夾，你應該也會在那裡看到你的 index.html 檔案。VS Code 正在使用底層的作業系統檔案系統，而不是使用它自己的一些奇怪的檔案系統。

將 index.html 移動到其自己的子資料夾

你可以在其他資料夾（稱為子資料夾）中建立資料夾，深度可以任意多層。你還可以透過拖放檔案（和資料夾）到另一個資料夾中來移動它們。

讓我們探索這一點，並在此過程中，將我們的 index.html 檔案移動到它自己的子資料夾中。我們不希望它放在主 web-projects 資料夾中。

1. 在 web-projects 內部建立一個新資料夾，使用 VS Code 資源管理器窗格的新建資料夾...按鈕。
2. 將其命名為 test-site。
3. 現在你應該可以將 index.html 檔案拖放到 test-site 資料夾上，以將檔案移動到該資料夾中。

   注意： 如果你是鍵盤使用者，可以按照以下步驟操作

   1. 使用向上和向下箭頭鍵將焦點輪廓移動到 index.html 檔案上。
   2. 在 macOS 上按 Cmd + X（在 Windows 上按 Ctrl + X）選擇檔案進行移動。
   3. 使用箭頭鍵將焦點輪廓移動到資料夾上。
   4. 在 macOS 上按 Cmd + V（在 Windows 上按 Ctrl + V）將檔案移動到該資料夾中。

關於使用作業系統檔案系統 UI 和 VS Code，我們還有很多可以介紹的，但我們篇幅有限，所以暫時就到這裡。這為你提供了足夠的資訊來入門，我們鼓勵你搜索網路以獲取有關如何對檔案和資料夾執行其他操作的資訊。

接下來我們簡要討論一下網站結構。

網站應該有什麼結構？

當你在本地（在你的計算機上）處理網站時，你應該將每個網站的所有相關檔案儲存在一個資料夾中。反過來，你應該將所有網站資料夾儲存在一箇中心資料夾中，以便它們都易於查詢。

在本文前面，我們指導你建立了一個名為 web-projects 的中心資料夾來儲存你所有的網站專案。我們還讓你建立了一個名為 test-site 的子資料夾，其中包含一個空的 index.html 檔案。

讓我們在 test-site 中新增更多功能來演示典型的網站結構；在下一個模組中，我們將讓你在其中構建一個完整的網站示例。任何網站專案最常見的內容是索引 HTML 檔案以及包含影像、樣式檔案和指令碼檔案的資料夾

1. index.html：這個檔案通常包含你的主頁內容，也就是人們首次訪問你的網站時看到的文字和影像。
2. images 資料夾：這個資料夾將包含你在網站上使用的所有影像。
3. styles 資料夾：這個資料夾將包含用於樣式化內容的 CSS 程式碼（例如，設定文字和背景顏色）。
4. scripts 資料夾：這個資料夾將包含所有用於為你的網站新增互動功能的 JavaScript 程式碼（例如，定義點選按鈕時發生的事情）。

你現在應該已經在 test-site 中有一個 index.html 檔案了。現在在其中建立 images、styles 和 scripts 資料夾。

檔名

檔名通常分為兩部分——**名稱**和**副檔名**。以我們上面建立的檔案 index.html 為例。

• 在這種情況下，名稱是 index。檔名通常可以包含你喜歡的任何字元，儘管不同的計算機系統對可使用的字元會有各種限制。最好從數字和字母開始。此外，系統可能會對某些名稱或名稱的某些部分賦予特殊含義——正如我們已經說過的，index 檔案往往被認為是網站的主要主頁檔案。
• 副檔名標識了我們正在處理的檔案型別，計算機系統使用它來識別檔案中預期的內容型別、應該使用哪個程式開啟檔案等。在這種情況下，副檔名是 .html，這意味著檔案應該包含純文字，更具體地說，是 HTML 程式碼。由於副檔名，你的計算機知道當你嘗試開啟該檔案時，它應該使用你的預設文字編輯器開啟它，如果你一直按照我們的說明操作，那應該就是 VS Code。

並非所有情況都是如此，但大多數檔案需要副檔名才能正確處理。刪除或更改副檔名很可能會導致錯誤，因此除非你確實知道自己在做什麼，否則不應更改它。

在 Windows 計算機上，你可能很難看到某些檔案的副檔名，因為 Windows 預設啟用了**隱藏已知檔案型別的副檔名**選項。你可以透過進入檔案資源管理器，選擇**資料夾選項…**選項，取消勾選**隱藏已知檔案型別的副檔名**複選框，然後點選**確定**來關閉此功能。有關你 Windows 版本的更具體資訊，你可以在網上搜索。

檔案命名最佳實踐

在學習本課程的過程中，你會注意到我們總是要求你將資料夾和檔案完全用小寫字母命名，不帶空格。有很多情況下，忽略此建議會導致問題——一些更常見的問題如下：

1. 許多計算機系統，包括大多數網路伺服器，都區分大小寫。例如，如果你在網站上放置一張圖片在 test-site/images/MyImage.jpg，然後在另一個檔案中嘗試用 test-site/images/myimage.jpg 引用該圖片，它可能無法工作。
2. 當你在命令列上呼叫命令時，你必須用引號將帶有空格的檔名括起來，否則它們將被解釋為兩個單獨的專案。
3. 某些程式語言（例如 Python）在某些情況下（例如，如果這些檔案是需要匯入的模組）對檔名中的空格處理不好。
4. 檔名通常對映到網址/URL。例如，如果你的伺服器根資料夾中有一個名為 my file.html 的檔案，通常可以透過 https://example.com/my%20file.html 這樣的 URL 訪問它。Web 伺服器通常會將檔名中的空格替換為 %20（因為 URL 是百分比編碼的），如果某些系統假設檔名和 URL 完美匹配，這可能會導致一些細微的錯誤。

為了代替空格，許多開發人員使用連字元（-）等分隔符，而不是空格——例如 my-file.html 而不是 my file.html。這是一個好習慣。

最好養成將資料夾和檔名稱寫成小寫，不帶空格，並用連字元分隔單詞的習慣，至少在你瞭解自己在做什麼之前。這樣，你以後會遇到更少的問題。

檔案路徑

要從一個檔案引用另一個檔案，你必須提供一個檔案路徑——基本上是一條路線，以便一個檔案知道另一個檔案在哪裡。例如，當建立一個包含影像的網頁時，你的網頁程式碼將需要包含一個檔案路徑，指示你要顯示的影像的位置。

讓我們透過一個基本示例來演示這一點。你可能暫時不明白這意味著什麼，但沒關係。

1. 在網上搜索你喜歡的圖片（例如，使用 Google 圖片等服務）並下載。或者，你也可以直接獲取我們的 Firefox 圖示圖片用於此示例。
2. 將圖片放入你的images資料夾中。
3. 確保影像檔名簡短、簡單，不含空格。例如，firefox-icon.png 很好，cat.jpg 很好，但 efregre^%^£$£@%$^&YTJgfbgfdgt54656756_ertgrth-rtgtfghhyj.png 不好。此外，請確保保留副檔名。

現在我們將在 index.html 檔案中新增內容，以使其能夠定點陣圖像檔案並顯示它。

1. 在 VS Code 中開啟你的 index.html，並將以下內容完全按照所示插入檔案中。這是 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>
   

2. <img src="" alt="My test image"> 這一行是插入影像到頁面中的 HTML 程式碼。我們需要告訴 HTML 影像在哪裡。影像在 images 資料夾中，該資料夾與 index.html 位於同一資料夾。要從 index.html 沿檔案結構向下找到我們的影像，所需的檔案路徑是 images/你的圖片檔名。例如，如果你的影像名為 firefox-icon.png，檔案路徑將是 images/firefox-icon.png。

3. 將檔案路徑插入到你的 HTML 程式碼中 src="" 的雙引號之間。

4. 儲存你的 HTML 檔案，然後在你的網頁瀏覽器中載入它。你可以透過 Ctrl/右鍵點選 HTML 檔案，然後選擇開啟方式並從彈出的子選單中選擇一個網頁瀏覽器來完成此操作。你也可以在同一個螢幕上開啟你的檔案系統 UI 和一個網頁瀏覽器視窗，然後將 HTML 檔案拖放到網頁瀏覽器視窗的頂部。

你應該會看到一個顯示你的圖片的基本網頁！

檔案路徑的一般規則

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

• 上一頁
• 概述：環境設定
• 下一頁