<h2>期末範例</h2>
<b>上課期末作業範例線上瀏覽</b>
<a href="http://mepopedia.com/~jinjin/web/final/" target="_blank'><b>http://mepopedia.com/~jinjin/web/final/</b></a>
[url=http://mepopedia.com/~jinjin/web/final.zip]<b>上課期末範例下載</b>[/url]
<hr>
<h2>網站基本架構</h2>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-2-15.png" border="0">
<hr>
<h2>期末作業須製作之頁面</h2>
1.首頁，包含導覽列之介紹頁、列表頁、文章頁、相簿列表頁等
2.介紹頁：了解大概的內容
3.列表頁（分為圖片列表頁與文字列表頁）：介紹內容之列表頁面
4.文章頁（分為有圖片與無圖片）：為介紹之內容主頁
5.相簿列表頁（點開放大、幻燈輪播）
6.聯絡我們
<h2>內容列表頁</h2>
選擇其中適合的列表頁設計型式，至少一種作為期末作業列表頁設計
<h3>文字標題列表（圖文）</h3>
<a href="http://mepopedia.com/~jinjin/web/final/news.html" target="_blank'><b>http://mepopedia.com/~jinjin/web/final/news.html</b></a>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-2-12.jpg" border="0">
<hr>
<b>html語法解析</b>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-2-20.png" border="0">
<hr>
<b>html+css語法解析</b>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-2-21.png" border="0">
<hr>
<h3>圖文列表（以圖為主）</h3>
<a href="http://mepopedia.com/~jinjin/web/final/news-images.html" target="_blank'><b>http://mepopedia.com/~jinjin/web/final/news-images.html</b></a>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-2-13.jpg" border="0">
<hr>
<b>html+css語法解析</b>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-2-22.png" border="0">
<hr>
<h3>分類式圖文列表</h3>
<a href="http://mepopedia.com/~jinjin/web/final/news-sort.html" target="_blank'><b>http://mepopedia.com/~jinjin/web/final/news-sort.html</b></a>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-2-14.jpg" border="0">
<hr>
<b>html+css語法解析</b>
<b>html語法</b>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-2-05.png" border="0">
<hr>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-2-06.png" border="0">
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-2-07.png" border="0">
<hr>
<h2>文章內容頁</h2>
選擇其中適合的文章內容設計型式，作為期末作業文章內容頁設計
<h3>圖文並茂編排內容頁</h3>
<a href="http://mepopedia.com/~jinjin/web/final/news-img-text.html" target="_blank'><b>http://mepopedia.com/~jinjin/web/final/news-img-text.html</b></a>
b/final/news-img-text.html</b></a>
edia.com/~jinjin/web/img/rwd-2-05.png" border="0">
<hr>
<img width="100%" src="http://
<hr>
<b>html+css語法解析</b>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-2-30.png" border="0">
<hr>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-2-31.png" border="0">
計型式，作為期末作業文章內容頁設計
<h3>圖文並茂編排內容頁</h3>
<a href="http://mepopedia.com/~jinjin/web/final/news-img-text.html" target="_blank'><b>http://mepopedia.com/~jinjin/web/final/news-img-text.html</b></a>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-2-16.jpg" border="0">
<hr>
<b>html+css語法解析</b>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-2-30.png" border="0">
<hr>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-2-31.png" border="0">
<hr>
<h3>單欄式圖文內容頁</h3>
<a href="http://mepopedia.com/~jinjin/web/final/news-img.html" target="_blank'><b>http://mepopedia.com/~jinjin/web/final/news-img.html</b></a>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-2-17.jpg" border="0">
<hr>
<h3>單純文字內容頁</h3>
<a href="http://mepopedia.com/~jinjin/web/final/news-text.html" target="_blank'><b>http://mepopedia.com/~jinjin/web/final/news-text.html</b></a>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-2-18.jpg" border="0">
<hr>
<h3>圖文左右編排內容頁</h3>
<a href="http://mepopedia.com/~jinjin/web/final/news-img-2.html" target="_blank'><b>http://mepopedia.com/~jinjin/web/final/news-img-2.html</b></a>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-2-19.jpg" border="0">
<hr>
<h2>麵包屑breadcrumb</h2>
<b>麵包屑提供了導航功能，提供網頁間之關係路徑，並增加網頁親和性</b>
在文章內容主頁中，通常會有麵包屑breadcrumb，提供文章路徑，說明所在位置，並方便返回前面位置
如：
列表頁：https://www.gvm.com.tw/category/world_focus
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-2-11.jpg" border="0">
文章頁與麵包屑
https://www.gvm.com.tw/article/69594
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-2-09.jpg" border="0">
<hr>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-2-04.png" border="0">
<h2>上課影音</h2>
[講義] RWD多頁網頁編輯 (二) 網頁架構 / 列表頁 / 內容頁 /期末作業講解
https://youtu.be/K5Eol6qjXCE
<iframe width="800" height="400" src="https://www.youtube.com/embed/K5Eol6qjXCE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
jin/web/img/rwd-2-31.png" border="0">