網頁設計筆記

• 確認題目後，請依下圖，依序完成規劃流程。

題目選定

請先選定欲製作之主題，可以以下兩個方向選擇：

• 改版主題｜選定一設計不良之網站進行改版規劃與設計，主題需符合完整網站之需求。
• 新訂主題｜主題式網站，模擬一完整之真實網站製作，主題式網站內容如：公司行號、活動、景點，小吃，行業，廟宇，風俗，文化，故事....等主題製作。

1. 現況整理與問題分析

• 改版主題｜針對現有網站之問題做詳細之整理，並列出因應的策略。
• 新訂主題｜針對設定之主題，整理出設計方針。

---

2. 網站架構圖

• 改版主題｜依據現有網站架構進行整理，規劃出新的網站架構圖（至少需規劃十頁以上，依組員人數調整）。
• 新訂主題｜針對設定之主題，規劃網站架構圖，（至少需規劃十頁以上，依組員人數調整）。

---

在進行網站架設時，網站架構可以說是網站的核心，規劃網站架構也因此變得十分重要。

網站規劃流程 5 大步驟

1. 整理網站基本資料與定位
首先需整理網站主題的基本資料，如主題簡介、品牌故事等，接著要確認網站的定位，是簡介網站、形象頁面、還是服務諮詢頁面等類別，了解自身定位之後再繼續進行規畫。
2. 決定網站版型與內容計畫
透過繪製網站架構圖(sitemap)，標示出明瞭的網站動線圖，以及各頁面的分類層級，接著再規劃網站要有什麼內容，如主題列表、聯絡我們、內容介紹等。是以網站地圖sitemap為基礎，規劃出網站進階資訊配置的表格，包括主要與次要關鍵字等設定。

---

RWD多頁網站架構說明｜



---

網站架構參考｜台北市室內設計裝修商業同業公會(TAID)



---

3. 視覺模組整理

依據網站需求，整理出所需要的模組，包含：

• 輪播圖模組
• 相簿模組
• 列表模組
• 文章模組
• 人物模組
• 影音模組
等等，依實際需求規劃。

---

1. 網站解析

• 尋找國內外相關主題優質網站做分析。
• 尋找國內外優質網站做分析。

---

• 案例分析參考｜E.ON Energie German


---

2. 優質網站模組分析

1. 導覽模組｜導覽列設定兩層，以灰底及格線區隔，將Logo設置於右側，為較不同的做法。


---

2. 輪播圖模組｜以人文關懷暖色系主圖，營造溫馨親和的視覺意象，文字同樣置左呈現。


---

3. 單元列表模組｜以圖片區塊為主，將單元標題以反白於圖片呈現，圖片下方搭配說明文字。

4. 頁尾模組｜以長頁尾Fat-Footer設計為主，將頁尾以網站地圖的方式呈現，讓使用者可快速了解網站架構，及找到相關資訊，Logo同樣置左呈現。


---

以上僅為示範範例，請依其他模組進行分析

---

選擇參考範例模組｜

1. 請依照提供的範本，或其他相關範本模組，挑選適合主題的模組，開始進行設計，期中至少需完成首頁製作。
2. 選定範本後，請以Figma製作首頁視覺設計提案，也可以程式碼完成首頁設計並上傳至my.cute，若無法以程式碼進行首頁設計，則至少需製作首頁視覺UI提案。
3. 參考範例模組
• RWD｜多頁式專題網站｜範例網址

---

• 範例參考及下載

---

• RWD｜範本｜Template｜下載

首頁分析｜

以 『上課說明範例』為主，進行以下範例說明。
• 選定適合之範例組模後，將首頁截圖進行分析。

首頁製作｜Figma視覺提案製作

1. 以Figma先進行視覺模擬製作。

2. 選擇適合的模組，進行製作，模組可移動位置，或將不需要的模組的刪除。
3. 選擇適合的頁框尺寸（如 MacBook Pro 14），將截圖置底，進行首頁製作：


---

左側圖層，請依區塊及模組單元，設定為群組，以方便修改及調整。



---



---

4. 設定Prototype，選擇Device裝置為MacBook Pro 14，底色設定為白色。


---

5. 選擇播放預覽效果，則呈現於MacBook Pro 14瀏覽之效果。

• 也可以直接使用 html.to.design — Import websites to Figma designs (web,html,css)。進行轉換，生成後再進行修改。

• html.to.design製作說明

• 特別注意：免費版本一個月最多只能生成10頁設計。
• 在Figma中使用AI ：開始習慣AI時代的來臨，善用AI、讓工作更有效率！

本單元僅針對部分語法做說明，完整製作說明，於期中課程後展開。

1. 導覽列設定｜navbar

• 請先規劃與設定該網站的選單項目，並加以修改。
• 請將導覽列替換成自己網站的選單標題，並分別對應到不同的section id（#） 。



---

2. skins｜mycolor.css｜網頁主色設定

1. 開啟 mycolor.css 檔案，檢視內容



---

2. mycolor.css｜網頁主色設定
需修改之主色部分



---

3. 使用搜尋快速鍵Ctrl+F(或搜尋與取代Ctrl+shift+F) 將原來色碼替換成欲取代的色碼





---

3. 等待動畫｜page-loader

等待動畫，可自行設計 gif 動畫後替換



---

4. 導覽列設定｜navbar｜dropdown

1. 導覽列與下拉式選單



---

2. 導覽列原始碼位置





---

3. 下拉式選單｜HTML 與 CSS背景色設定



---

4. 下拉式選單｜HTML｜子選單設定



---