檔案、資料夾與副檔名 — Start Here 01

這一課完成後：你會建立自己的第一個專案資料夾，能看懂基本路徑與副檔名，也知道為什麼「檔名看起來對」不代表檔案真的正確。

先做：建立你的第一個專案

先不要背任何名詞。找一個你之後找得到的位置，建立一個新資料夾，名稱叫：

norelyn-first-project

接著打開它，在裡面建立兩個檔案和一個資料夾：

norelyn-first-project/
├─ README.md
├─ notes.txt
└─ assets/

如果你的系統沒有直接提供「建立空白檔案」，可以先用任何文字編輯器建立，再另存成指定名稱。這裡暫時不在意檔案內容，我們只在意它們真的存在，而且真的放在同一個專案資料夾裡。

現在先檢查：你應該看到一個資料夾，裡面有 README.md、notes.txt，以及 assets 資料夾。

剛才其實已經建立了一個檔案結構

電腦裡的檔案不是漂在一起的。它們會被放進資料夾，資料夾還能再包含其他資料夾。你剛才做出的結構，可以想成一棵很小的樹。

專案資料夾 → 檔案 / 子資料夾 → 更深一層的檔案

之後一個真正的網站可能會變成：

my-site/
├─ index.html
├─ styles.css
├─ script.js
└─ images/
   ├─ logo.svg
   └─ hero.jpg

瀏覽器、程式、Git、終端機和部署平台都會依賴這個結構。它們不是看你的桌面畫面猜檔案在哪，而是依照路徑找到它。

路徑就是「這個東西在哪裡」

假設你現在要描述 logo.svg 的位置，單講「logo.svg」不一定夠，因為別的資料夾裡也可能有同名檔案。你需要連它所在的位置一起描述。

my-site/images/logo.svg

這就是一條路徑。它表示：先找到 my-site，再進入 images，最後找到 logo.svg。

現在回到你自己的專案。notes.txt 相對於專案根目錄的位置很簡單：

notes.txt

如果你把它移進 assets：

assets/notes.txt

路徑跟著變了。這也是為什麼有時候你「只是整理了一下資料夾」，網站上的圖片卻突然不見：程式還在找舊位置。

試一次：移動檔案，觀察路徑改變

把 notes.txt 移進 assets。現在你的專案應該變成：

norelyn-first-project/
├─ README.md
└─ assets/
   └─ notes.txt

接著再把它移回專案根目錄。這個動作看起來很普通，但之後你在 Terminal 使用 cd、在 HTML 寫圖片路徑、在 JavaScript 匯入檔案時，做的其實都是同一件事：告訴系統要去哪裡找東西。

副檔名是在告訴你「這通常是什麼格式」

notes.txt 最後的 .txt，以及 README.md 最後的 .md，就是副檔名。常見的還有：

.html   網頁文件
.css    樣式表
.js     JavaScript
.json   JSON 資料
.png    PNG 圖片
.jpg    JPEG 圖片
.svg    SVG 圖像
.py     Python 程式
.md     Markdown 文件

副檔名會幫作業系統和應用程式判斷該怎麼處理檔案，也讓人一眼知道它大概屬於哪一類。之後你會一直看到 index.html、styles.css、script.js，這些名稱不是裝飾，它們代表不同格式與用途。

請確認你的系統有顯示副檔名。有些檔案管理器會把已知副檔名隱藏起來，結果你以為檔案叫 index.html，實際上可能是 index.html.txt。如果你看不到檔名最後的 .txt、.md 等部分，先在檔案管理器裡開啟「顯示副檔名」或同等設定。

但改副檔名，不會把檔案變成另一種格式

這件事很重要。假設你把一張 JPEG 圖片從：

photo.jpg

直接改名成：

photo.png

你只是改了名字，檔案內容沒有因此重新編碼成 PNG。某些程式可能因此打不開它，因為副檔名說「我是 PNG」，實際內容卻還是 JPEG。

文字檔也一樣。把 notes.txt 改成 notes.js，不會自動產生一段能執行的 JavaScript；只是讓這段文字開始被當成 JavaScript 檔案看待。副檔名描述格式或用途，但真正決定檔案內容的是裡面實際存了什麼。

專案資料夾，是一個工作的邊界

之後我們會把 VS Code、Terminal 和 Git 都對準同一個資料夾。這樣你可以很清楚地知道：「這些檔案屬於這個專案」。

例如：

Projects/
├─ school-site/
├─ weather-app/
└─ norelyn-first-project/

每個專案各自有自己的資料夾，比把 HTML、圖片、筆記和壓縮檔全部混在桌面上可靠得多。之後如果要搬家、備份、放進 Git，通常也只需要處理整個專案資料夾。

小挑戰：整理成一個更像專案的樣子

現在不要照著完整答案複製。把你的 norelyn-first-project 整理成下面的需求：

需求 1：根目錄必須保留 README.md。

需求 2：建立一個 notes 資料夾，把 notes.txt 放進去。

需求 3：在 assets 裡再建立一個 images 資料夾。

需求 4：最後自己說出 notes.txt 和 images 的相對路徑。

完成後，你的結構應該接近這樣：

norelyn-first-project/
├─ README.md
├─ notes/
│  └─ notes.txt
└─ assets/
   └─ images/

所以 notes.txt 的相對路徑是：

notes/notes.txt

而 images 資料夾的相對路徑是：

assets/images/

你剛剛真正學會了什麼？

你沒有寫任何程式，但已經碰到之後幾乎每一堂課都會用到的四個基礎概念：

檔案 → 資料夾 → 路徑 → 副檔名

檔案保存內容；資料夾整理檔案；路徑描述位置；副檔名告訴系統與人這個檔案通常使用什麼格式。

接下來我們不會再用一般文字編輯器一個一個開檔案。下一課會把整個 norelyn-first-project 放進 VS Code，第一次用「專案」的方式工作。

這一課不需要背指令。你只需要確定自己真的有一個整理好的 norelyn-first-project 資料夾。

下一課：用 VS Code 打開第一個專案。