網頁設計筆記

本單元解說列表頁與內容頁：

• 列表頁｜List page

列表頁通常扮演著資訊索引目錄的功能，將網站所與呈現的資訊，以標題方式列表呈現。龐大的網站，不同的單元可能也會有不同的列表呈現方式，稱為單元列表頁，以下也提供多種列表形式供設計選擇。

• 內容頁（文章頁）｜Content page

內容頁是網站中很重要的部分，呈現網站欲介紹的內容細項說明，常以圖文並茂的方式呈現，有多種圖文組合形式，或者以單純文字內容呈現。

---

RWD多頁網站｜列表頁與內容頁｜架構說明｜

---

期末作業須製作之頁面

1. 首頁，包含導覽列之介紹頁、列表頁、文章頁、相簿列表頁等
2. 介紹頁：介紹網站大致內容
3. 列表頁（分為圖片列表頁與文字列表頁）：介紹內容之列表頁面
4. 文章頁（分為有圖片與無圖片）：為網站內容介紹主頁
5. 相簿列表頁（點開放大、幻燈輪播）
6. 聯絡我們

列表頁｜List page

列表頁通常扮演著資訊索引目錄的功能，將網站所與呈現的資訊，以標題方式列表呈現，本單元提供『橫式圖文列表』、『區塊圖文列表』、『分類圖文列表』三種版型供選擇，可選擇適合的列表形式製作。

---

1. 橫式圖文標題列表｜

http://mepopedia.com/~jinjin/web/final/news.html

---



---

html語法解析

---

html+css語法解析

---

2. 區塊圖文列表

http://mepopedia.com/~jinjin/web/final/news-images.html

---



---

html+css語法解析

---

3. 分類式圖文列表

http://mepopedia.com/~jinjin/web/final/news-sort.html

---



---

html+css語法解析

---



---

內容頁｜Content page

內容頁是網站中很重要的部分，常以圖文並茂的方式呈現，有多種圖文組合形式，或者以單純文字內容呈現。本單元提供『圖文並茂編排內容頁』、『單欄式大圖內容頁』、『圖文左右編排內容頁』、『單純文字內容頁』四種版型供選擇，可選擇適合的內容頁形式製作，更可自行改編為適合說明的內容。

---

1. 圖文並茂編排內容頁｜

本範例為較為豐富的圖文編排，若需要多個圖文編排可採用此範例。

http://mepopedia.com/~jinjin/web/final/news-img-text.html

---



---

html+css語法解析

---



---

2. 單欄式大圖內容頁

較單純的大圖片單欄式圖文編排，此範例為上個範例（圖文並茂編排）的上半部分，作法相同。

http://mepopedia.com/~jinjin/web/final/news-img.html

---



---

3. 圖文左右編排內容頁

本範例為圖文並茂編排範例的下半部分，作法類似。

http://mepopedia.com/~jinjin/web/final/news-img-2.html

---

4. 單純文字內容頁

本範例為單純文字版型，相對單純很多，不要放圖片即可。

http://mepopedia.com/~jinjin/web/final/news-text.html

---



---

---

麵包屑｜breadcrumb｜說明

麵包屑提供了導航功能，提供網頁間之關係路徑，並增加網頁親和性，在文章內容主頁中，通常會有麵包屑breadcrumb，提供文章路徑，說明所在位置，並方便返回前面位置。如：

1. 列表頁與麵包屑
https://www.gvm.com.tw/category/world_focus

---



---

2. 文章頁與麵包屑
https://www.gvm.com.tw/article/69594

---



---

3. 本範例的麵包屑位置


---

[講義] RWD多頁網頁編輯 (三) 網頁架構 / 列表頁 / 內容頁 /期末作業講解

---

https://youtu.be/K5Eol6qjXCE

---