RWD多⾴頁網⾴頁編輯 (⼆二)列列表⾴頁 / ⽂文章⾴頁

王曉今 編制

進階網⾴頁設計講義11

網站基本架構

影片/圖片輪輪播各單元之導覽

⾸首⾴頁

單元⼀一列列表 （圖片列列表）

單元⼆二列列表 （⽂文字列列表）

介紹⾴頁相簿列列表

（幻燈片導覽）

⽂文章1

⽂文章2

⽂文章3

內容1

內容2

內容3

須製作之⾴頁⾯面

1選擇⾸首⾴頁導覽列列⽂文章列列表⾴頁⾯面

2

點擊圖片或標題，進入⽂文章⾴頁⾯面

⾸首⾴頁導覽選單

圖片列列表⾴頁

portfolio-4columns.html

index.html

須製作之⾴頁⾯面

3單欄欄 / 純⽂文字⽂文章⾴頁⾯面

單欄欄⽂文章⾴頁

4雙欄欄 / ⽂文加圖 / ⽂文章⾴頁⾯面

雙欄欄⽂文章⾴頁

portfolio-2.html

portfolio-single.html

麵包屑breadcrumb

麵包屑breadcrumb麵包屑提供了了導航功能，提供網⾴頁間之關係路路徑，並增加網⾴頁親和性

麵包屑breadcrumb

麵包屑breadcrumb麵包屑提供了了導航功能，提供網⾴頁間之關係路路徑，並增加網⾴頁親和性

提供完整導覽與連結

portfolio-2.html 109⾏行行

圖片列列表⾴頁

data-cat的內容都可修改成⾃自⼰己的設定，但必須對應

portfolio-4columns.html

圖片列列表⾴頁

三處⽂文章⾴頁⾯面檔案超連結：1.圖片2.圖片上按鈕3.⽂文章標題

portfolio-4columns.html

可設定不只⼀一組分類關鍵字

圖片位置（每篇⽂文章替換新的圖片）

col-md-3為4欄欄4columns可⾃自⾏行行調整數值為不同欄欄位

1

2

3