處理檔案

操作檔案與資料夾

在你的電腦上，有許多不同的方法可以建立和編輯檔案與資料夾。你可以透過電腦的命令列／終端機，使用一系列的文字指令來完成，這部分你將在下一篇文章中學到更多。然而，許多人發現從視覺上開始學習檔案系統會更容易，這也是我們在這裡要討論的。現代作業系統（OS）擁有強大的檔案系統使用者介面（UI），你可以用它來根據需要操作檔案和資料夾。

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

而 Windows 則有檔案總管：

基本結構

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

目前登入的使用者預設只能存取自己的家目錄。

你應該在你的家目錄中的某個地方建立與你工作相關的專案檔案，也許是在文件裡面。這很合理，因為網頁檔案通常被稱為文件。

建立一個資料夾

讓我們建立一個新資料夾來存放我們所有的 Web 專案。

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 有自己的檔案總管，可以讓你為你的 Web 專案建立所有需要的資料夾和檔案。

那麼，我們為什麼要讓你費心使用作業系統的檔案系統 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 鍵不會在 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. 使用 VS Code 檔案總管窗格的*新增資料夾...*按鈕，在 web-projects 內建立一個新資料夾。
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. 許多電腦系統，包括大多數 Web 伺服器，都是區分大小寫的。舉例來說，如果你在網站上放置了一張圖片，路徑是 test-site/images/MyImage.jpg，然後在另一個檔案中嘗試用 test-site/images/myimage.jpg 來引用這張圖片，它可能無法運作。
2. 當你在命令列中執行指令時，你必須在帶有空格的檔案名稱周圍加上引號，否則它們會被解釋為兩個獨立的項目。
3. 某些程式設計語言（例如 Python）在特定情況下（例如，當這些檔案是要被匯入的模組時）無法很好地處理檔案名稱中的空格。
4. 檔案名稱通常會對應到 Web 位址／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="zh-TW">
     <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width" />
       <title>我的測試頁面</title>
     </head>
     <body>
       <img src="" alt="我的測試圖片" />
     </body>
   </html>
   

2. <img src="" alt="我的測試圖片"> 這行是將圖片插入頁面的 HTML 程式碼。我們需要告訴 HTML 圖片在哪裡。圖片在 images 資料夾內，而這個資料夾與 index.html 在同一個資料夾中。要從 index.html 向下走到我們的圖片，我們需要的檔案路徑是 images/你的圖片檔名。例如，如果你的圖片叫做 firefox-icon.png，那麼檔案路徑就是 images/firefox-icon.png。

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

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

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

檔案路徑的一般規則

• 要連結到與呼叫的 HTML 檔案在同一個資料夾中的目標檔案，只需使用檔案名稱，例如 my-image.jpg。
• 要引用子資料夾中的檔案，請在路徑前面寫上資料夾名稱，再加上一個正斜線，例如 subfolder/my-image.jpg。
• 要連結到呼叫的 HTML 檔案上一層資料夾中的目標檔案，請寫上兩個點。例如，如果 index.html 在 test-site 的一個子資料夾中，而 my-image.jpg 在 test-site 中，你可以從 index.html 使用 ../my-image.jpg 來引用 my-image.jpg。
• 你可以隨意組合這些用法，例如 ../subfolder/another-subfolder/my-image.jpg。

• 前頁
• 概述：Environment Setup
• 次頁