RWD 多頁網頁編輯 (三) 網頁架構 | 列表頁 | 內容頁

RWD多頁網站|列表頁與內容頁架構

本單元解說列表頁與內容頁:
  • 列表頁|List page

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

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

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


期末作業須製作之頁面

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

單元列表頁|List page

列表頁|List page

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


  1. 橫式圖文標題列表|

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

    html語法解析
    html+css語法解析
  3. 區塊圖文列表

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

    html+css語法解析
  5. 分類式圖文列表

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

    html+css語法解析

內容頁|文章頁|Content page

內容頁|Content page

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


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

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

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

    html+css語法解析

  3. 單欄式大圖內容頁

  4. 較單純的大圖片單欄式圖文編排,此範例為上個範例(圖文並茂編排)的上半部分,作法相同。

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

  5. 圖文左右編排內容頁

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

    http://mepopedia.com/~jinjin/web/final/news-img-2.html
  7. 單純文字內容頁

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

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


麵包屑|breadcrumb

麵包屑|breadcrumb|說明

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

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

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

  5. 本範例的麵包屑位置

2019|上課影音

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