主題明確
一眼看懂網站要解決的問題與服務對象。
Why This Demo
這個頁面示範了什麼？
這是一個示範用的一頁式網頁，透過整理國防大學理工學院附近的美食資訊， 展示一頁式網站可以如何整合主題、排版、卡片、圖片與地圖資訊。 同學未來參賽時，也可以用類似方式發展自己的主題作品。
內容生活化
用同學熟悉的日常題材降低創作門檻。
結構容易模仿
Hero、分類、卡片、位置與 CTA 都清楚分段。
Food Categories
先用分類快速抓方向
分類不需要很複雜，只要能幫助使用者快速理解內容，也能讓頁面看起來更完整。
快速吃飽
適合午休時間有限，想快點補充體力。
台式小吃
飯、湯、小菜與在地口味都能放進來。
熱炒選擇
適合晚餐或多人一起討論吃什麼。
便當燒臘
資訊容易整理，也很適合做成卡片。
下課晚餐
把時段放進內容，使用情境會更清楚。
Recommended Shops
6 間推薦店家示範卡片
下方店家已整理成快速決策格式，包含推薦品項、推薦理由、價格區間與營業時間。
未來新增店家時，只要更新 script.js 裡的資料陣列即可。
Map & Location
固定 6 店位置地圖
點選地圖標記或店名，即可查看店家位置與導航。
點選店名可開啟 Google 地圖。
Try Your Own Topic
你也可以換成自己的主題
一頁式網頁不一定要很大型。只要主題清楚、資料有整理、版面有層次， 校園地圖、社團介紹、作品集、活動導覽都能做成完整示範作品。
回到頁首看結構