期中提案：
OnePage 網站企劃
寫程式之前，先把網站「想清楚」。這一頁帶你走完 8 個步驟：找題目 → 定目標 → 認識用戶 → 決定風格 → 規劃區塊 → 排時程 → 做企劃書 → 上台提案。每一步都能直接在頁面上填寫，自動存在這台電腦，最後自動產生提案簡報（PowerPoint／HTML／PDF）與企劃書（PDF／Word）。每一個產出都可以下載使用。
01期中提案，到底要交什麼？
期中提案是整學期 OnePage 專題的「設計藍圖」：還不用把網站做出來，但要讓老師和同學看懂——你要為誰、做一個什麼樣的網站、長什麼樣子、怎麼在期限內做完。期末再依照這份藍圖把網站真正做出來。
① 企劃書／提案簡報
封面、動機目標、用戶分析、風格、LOGO、色彩字體、架構、時程、呈現。可用本頁的簡報產生器（PowerPoint／PDF），或用 Figma 範本製作。
② 版面線框
OnePage 由上到下有哪些區塊、導覽列怎麼連、手機版怎麼排。這頁的產生器可以直接幫你畫出草圖。
③ 課堂發表
約 3 分鐘，用播放模式報告企劃重點，接受老師與同學回饋，再修正企劃。
8 個步驟、4 週完成
找題目：決定做什麼網站
從自己有興趣、有素材、能在一頁說完的主題開始，並用「題目健檢」確認可行。
定目標、認識用戶
寫出設計動機與 3 個具體目標；建立一位「目標用戶」人物誌（persona）。
決定風格、規劃區塊
風格關鍵字、色彩計畫、字體；把 OnePage 拆成 5–8 個區塊並畫出線框。
排時程、做企劃書、上台提案
把期末前每週要做的事排進時程表，套入 Figma 企劃範本，第 9 週發表。
評分參考
| 項目 | 比例 | 老師會看什麼 |
|---|---|---|
| 題目與動機 | 15% | 題目清楚、範圍適合 OnePage；動機真實，目標具體可檢查。 |
| 目標用戶分析 | 15% | 描述到年齡、身分、上網習慣、使用裝置與「他想在網站上完成什麼事」。 |
| 風格與視覺設定 | 20% | 風格關鍵字、LOGO／Favicon、色彩計畫（含色碼）、字體與用途一致。 |
| 網站架構與線框 | 20% | 區塊順序合理、導覽列對應區塊、有考慮手機版。 |
| 時程可行性 | 10% | 每週有可交付的進度，預留測試與上傳時間。 |
| 企劃書版面 | 10% | 頁面完整、文字精簡、圖文排版符合自己設定的風格。 |
| 口頭發表 | 10% | 3 分鐘內講完重點、聲音清楚、能回應提問。 |
02STEP 1｜找題目：做一個「講得完」的網站
OnePage（單頁式網站）把所有內容放在同一頁、由上往下捲動，用導覽列跳到各區塊。它適合主題單一、重點明確的內容：一個人、一個品牌、一場活動、一個興趣。題目太大（例如「台灣美食」）會講不完；太小又撐不起 5 個區塊。
適合 OnePage
個人作品集、社團招生、校內活動、小店或品牌介紹、一本書／一部電影的推廣、單一興趣（植物、攝影、咖啡）、在地小旅行、公益議題倡議。
不適合（或要縮小）
需要會員登入、購物車、大量文章或每天更新的內容；範圍太廣（「全台灣景點」）可縮小為「我家鄉的三條散步路線」。
互動工具：題目發想器
先選一種網站類型，再點選 1–3 個你有興趣的關鍵字，按「產生靈感」。喜歡的題目按「用這個題目」，會自動填進下方工作台。
互動工具：題目健檢
03STEP 2–4｜企劃工作台：目標、用戶、風格
左邊一步一步填，右邊的「企劃卡」即時預覽會套用你選的色彩與字體。每一步都有寫作提示與範例，卡住時按「看範例」參考寫法（請改成自己的內容，不要照抄）。所有內容會自動儲存。
04STEP 5｜OnePage 架構：區塊順序與線框
一般網站的「網站地圖」是很多頁面；OnePage 的網站地圖是「由上到下的區塊順序」。每個區塊用一個 <section id="…"> 表示，導覽列的連結 href="#about" 會跳到對應區塊。先決定區塊，再畫線框，最後才寫程式。
開頭：抓住注意
Hero 主視覺：一張大圖＋網站名稱＋一句話＋行動按鈕，3 秒內說清楚「這是什麼」。
中段：說服與展示
關於、特色、作品、歷程、評價…依照「用戶最想知道的順序」排列。
結尾：帶他行動
聯絡、報名、追蹤社群、地圖資訊，最後是頁尾（版權、作者、學號）。
互動工具：區塊線框產生器
點「區塊庫」加入區塊；在清單中可以拖拉或用 調整順序、修改區塊名稱、寫下這一區要放的內容。建議 5–8 個區塊。
| 線框的原則 | 說明 |
|---|---|
| 灰階先行 | 線框只畫「位置與大小」：用方框代表圖片、用線條代表文字，先不管顏色與細節。 |
| 手機優先想一次 | 電腦版並排的 3 欄，到手機要變成上下排；導覽列在手機收成 ☰ 漢堡選單。 |
| 一區一重點 | 每個區塊只回答一個問題（是什麼？有什麼特色？去哪裡找你？）。 |
| 導覽對應區塊 | 導覽列的文字＝區塊名稱，最多 5–6 個，太多就合併。 |
05STEP 6｜製作項目與時程
企劃書要說明「怎麼在期末前做完」。把工作拆成小項目，排進每一週。好的時程有三個特徵：每週都有看得到的進度、困難的部分提早做、最後預留一週測試與上傳。
每一列是一個製作項目，點選格子標示要在哪幾週進行；再點一次取消。可以改項目名稱、新增或刪除項目。已經預先填好建議時程，請依自己的情況調整。
06STEP 7｜產出企劃書與提案簡報
企劃的內容都填好了，接下來要把它變成能繳交、能上台的成品。這一頁會依你的工作台內容、色彩與字體，自動排好 15 張提案簡報和一份 A4 企劃書。下載後可以再用 PowerPoint、Google 簡報、Keynote 或 Word 修改。Figma 範本是另一種做法（見下一節）。
選一種你習慣的形式
| 形式 | 怎麼做 | 適合 |
|---|---|---|
| PowerPoint（.pptx） | 本頁產生 → 用 PowerPoint 開啟，或上傳 Google 雲端用 Google 簡報開啟、用 Keynote 開啟 | 想再自由修改文字、換版面的人 推薦 |
| 網頁簡報（.html） | 本頁產生 → 雙擊用瀏覽器開啟，按 ← → 換頁、F 全螢幕、N 看備註 | 不想安裝軟體，直接在教室電腦播放 |
| 本頁「簡報 PDF」或「企劃書 PDF」→ 列印視窗選「另存為 PDF」 | 繳交到 Moodle 的正式檔案 | |
| Word（.doc） | 本頁產生 A4 企劃書 → Word 開啟後可修改 | 習慣文件形式、要加更多文字說明 |
| Figma | 複製老師的 Figma 範本，把內容貼進去重新設計（下一節） | 想練習版面設計、要做出最有個人風格的企劃 |
封面資料與我的圖片
沒有圖片也可以先產生，畫面會留下預留框。圖片只存在這台電腦；「下載備份」會一起帶走圖片。請使用自己拍攝、繪製或有授權的圖片（如 Unsplash）。
把企劃套入簡報：前後呼應
前面每一步的內容都會對應到一張投影片：選題 → 動機與目的 → 目標 → 用戶 → 風格 → 架構與線框 → 時程，最後用「目標與區塊的對應」回到一開始的目標，讓提案前後呼應。下面會列出每一項是否完成；按「套入企劃到簡報」會顯示這些投影片、擷取 STEP 5 的線框圖，並自動建議目標對應的區塊。套入後仍然可以繼續修改。
提案簡報產生器（15 張，可自由編輯）
簡報會先用工作台的內容自動排好。接著你可以：直接點投影片上的任何文字修改（或用下方「本張內容」表單）、換配色與字體、隱藏／調整順序、新增自己的投影片，時程表也可以在「製作項目與時程」那張直接排。標示 ⇄ 同步企劃 的欄位，改了會一起更新上面的工作台。
企劃書文件版（A4）
把企劃整理成直式 A4 文件：封面（含主視覺）、動機與目標、用戶分析、風格與情境圖、LOGO、字體與色彩表、架構表、時程表、網址。標題與色塊會套用你的配色與字體。
07STEP 7（另一種做法）｜套進 Figma 企劃範本
企劃範本以 Figma 製作，共 9 頁。下面每一頁都說明要寫什麼、常見錯誤，並把你在工作台填的內容整理好，可以直接複製貼進 Figma。版面請依自己的風格與色彩修改，不要只換文字。
逐頁對照：要寫什麼 × 我的內容
Figma 操作流程
- 複製範本（Duplicate）開啟編輯網址，點上方檔名旁的選單 → Duplicate to your drafts，之後只編輯自己的副本。
- 依頁面填入內容、改成自己的風格使用上面「我的內容」複製貼上；替換色彩、字體、圖片，讓企劃書本身就展示你的網站風格。
- 分享播放連結右上角 Share → 權限設為「Anyone with the link can view」，複製播放（Present）連結，發表時使用。
- 輸出 PDF主選單 File → Export frames to PDF，或選取所有頁面框架後輸出。
- 繳交PDF 檔名建議為「學號_姓名_期中企劃.pdf」，依公告上傳 Moodle，並在作業回覆貼上 Figma 播放連結。
一鍵整理：企劃書全文
08STEP 8｜上台提案：3 分鐘說清楚
發表不是把企劃書一字一字念完，而是讓聽眾記住「這是什麼網站、給誰用、有什麼特色」。下面的講稿依你的企劃自動產生，可以修改後練習；計時器幫你控制在 3 分鐘內。
按開始，跟著提示段落練習。
發表前檢查
Figma 播放連結可以在別台電腦打開；字級在投影上看得清楚（內文 ≥ 24px）；準備好回答「為什麼選這個配色？」「手機版怎麼排？」。
當聽眾時也有任務
每位同學給一個「我喜歡…」和一個「如果…會更好」。收到的回饋請記下來，在期末前修正企劃。
09AI 協作：讓 AI 當企劃顧問，不是代筆
AI 很適合用來擴充想法、挑毛病、整理文字，但企劃的核心（為什麼做、為誰做、你的風格）一定要來自你自己。下面的問法會自動帶入你的企劃內容，複製後貼到 ChatGPT、Gemini 或 Claude。
10學長姐企劃與網站參考
對照看：企劃書裡的配色、字體、區塊規劃，最後在網站上是怎麼實現的？請注意他們從企劃到成品有哪些改變。
天文 Astronomy
主題型網站：深色宇宙意象，介紹天文知識。
個人網站 MUYA
個人品牌型網站：介紹自己與作品。
Dreamcatcher
主題推廣型網站：捕夢網的由來與意象。
觀察作業：看範例時，回答這 4 題
- 企劃書的主色，在網站上用在哪裡？比例大約多少？
- 導覽列有幾個項目？和企劃書的區塊規劃一樣嗎？
- 用手機打開網站，哪個區塊排得最好？哪個最需要改進？
- 如果是你，會為這個網站多加或刪掉哪一個區塊？為什麼？
11下載中心：所有產出一次帶走
這一頁產生的每一份內容都可以下載。檔名會用你的網站名稱開頭。需要網路的項目（PNG、PowerPoint、zip）第一次按下時會稍等一下。
提案簡報
企劃書
題目
企劃卡與風格
架構與網站骨架
時程表
發表與 AI
備份
index.html（導覽列與每個 section 已建好）、css/style.css（色彩與字體變數、基本 RWD）、js/main.js、images/（含需要準備的圖片清單與你上傳的圖片）。期中後的實作單元可以直接從這裡開始。