Day 02：建立專案資料夾

17th鐵人賽

nanako77

2025-09-16 23:22:04

13 瀏覽

分享至

昨天我們完成了網站功能的規劃與草圖設計，今天就來動手把專案的骨架先搭好！雖然今天的進度看起來很簡單，但這一步非常重要，因為一個乾淨的檔案結構可以讓後續的開發更有條理，也方便維護。

建立專案資料夾

1. 建立專案資料夾

先在你的電腦上建立一個新的資料夾，這個資料夾就是我們專案的根目錄，可以取一個好記的名字，例如：

drama-web/

接著在裡面再建立一些子資料夾，方便之後管理程式碼、樣式與圖片：

drama-web/
├─ index.html
├─ favorites.html
├─ diary.html
├─ css/
│   └─ style.css
├─ js/
│   └─ app.js
└─ assets/
    └─ img/

說明：

index.html：主頁面（顯示追劇清單、篩選、搜尋）
favorites.html：顯示使用者收藏的劇集
diary.html：心得牆頁面
css/：放所有樣式檔，先建立一個 style.css
js/：放所有 JavaScript 檔案，今天先建立 app.js
assets/img/：放封面或網站 Logo 等圖片

2. 建立基本檔案

現在我們可以先建立三個 HTML 檔案和一個 CSS、JS 檔案。
檔案可以是空的，先打好基礎：

index.html

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DramaWeb</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <!-- 之後會放導覽列與劇集清單 -->
  <script src="js/app.js"></script>
</body>
</html>

其他 favorites.html 和 diary.html 也可以先複製相同的基本結構，之後再填內容。