JinJin 的視覺設計專區 - 104-1《中國》竹視傳二B-網頁設計 http://mepopedia.com/forum/list.php?2480 Wed, 29 Apr 2026 10:21:55 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?2480,83076,83076#msg-83076 1045445104 (no replies) http://mepopedia.com/forum/read.php?2480,83076,83076#msg-83076 (2)製作動機：很喜歡這部卡通
(3)製作內容：關於我們這一家主要角色介紹故事劇照作者介紹

(4)資料蒐集分析

◎設計優良網站(風格)列表與分析：http://www.e-muse.com.tw/property/ata_shin_chi/introduction/20061121_ova/about.html
我覺得這個網站的動線設計得不錯，配色也讓人看得很舒服。

◎相關網站列表與分析：http://www.e-muse.com.tw/property/ata_shin_chi/introduction/20070404/people.html
網站的動線不很好，背景顏色太亮讓人分散了視覺的焦點!看完容易眼花撩亂
完成品
請將這項放置於文章最前面
(1)作業網址:http://mepopedia.com/~web104-2b/midterm/midterm-1045445104
(2)
1有無遇到的問題頁面歪掉.....
2.製作感想 :是一個非常令人挫敗的作業花了很長的時間製作但成效還不如預期...
3.製作作業的時間:很久很久]]> 1045445104 104-1《中國》竹視傳二B-網頁設計 Sat, 26 Nov 2016 15:57:28 +0800 http://mepopedia.com/forum/read.php?2480,78934,78934#msg-78934 [期末作業 ]以雙欄為主的網站設計 (62 replies) http://mepopedia.com/forum/read.php?2480,78934,78934#msg-78934

1. 製作說明：
2. 作業設計重點
3. 評分標準與製作檢核
4. 繳交作業方式
5. 回覆說明
6. 學長姐作品參考
6.1 其他作品

[color=#990000][期末作業] 以雙欄為主的網站設計[/color]

[hr]

1. 製作說明：

1.請參考期末之前教過的做法及講義，製作以雙欄(多欄)為主的網站。

2.題目自訂，可以延續期中作業的主題，也可以是全新的主題。

3.必須考慮設計風格與質感，並需自行設計圖片，製作網站內容。

4.需以Float浮動的方式建立雙欄(多欄)(不限定每頁都須雙欄)、DIV搭配CSS的方式完成，設定尺寸、字體、顏色等等。

5.至少需包含
(1).Table：表格→匯整資料，
(2)Float→繞圖排文，
(3)臉書、噗浪等推文設定，
(4)圖片跳窗連結，
(5)導覽列設定。

6.製作完成上傳至FTP

[hr]

2. 作業設計重點

[color=#CC0000](1)能自行設計以DIV與CSS製作的網站
(2)利用float設計雙欄網站
(3)利用項目清單設計導覽列
(4)利用自已設計的圖片、色彩搭配與字體設定等設計出具有質感的網頁[/color]

3. 評分標準與製作檢核

1.雙欄的製作(Float的使用)，不同的連結方式
2.HTML的正確架構(DIV的使用)
3.整體設計美感(CSS運用，風格及配色，字體設定、圖片製作)
4.導覽列的正確性(含導覽超連結)
5.表格、繞圖排文、推文等設定
6.HTML Title的設定，Footer的版權宣告
7.內容的完整性
8.製作說明

[hr]

4. 繳交作業方式

[color=#CC0066]1.製作完成後，檔案命名方式：[/color]

[color=#669900]期中作業FTP上的資料夾為：final

每位同學請將自己的資料夾命名為：final-學號
這個作業的網址則為:http://mepopedia.com/~web104-2b/final/final-10354452XX

資料夾內含：
(1).首頁命名為index.html
(2).其他頁面請自行命名，但需注意命名為則，不可出現中文及全形字、特殊符號等等
(3).一個命名為style.css的css樣式檔
(4).存放圖檔的images資料夾

存放在 < final-學號 > 的資夾內[/color]

[color=#CC0066]2.全部完成後上傳至FTP[/color]

[color=#CC0066]3.依進度回覆本篇文章[/color]

[hr]

5. 回覆說明

[color=#0066CC]完成品[/color](1/7前)
[color=#FF0066]請將這項放置於文章最前面[/color]
(1)作業網址：
(2).
1.製作作業的時間：
2.有無遇到的問題：
3.製作心得與感想：
4.本學期於網頁設計課程上的收穫：
[color=#CC0066]4.請務必在1/6前回覆，否則為遲交[/color]

[color=#0066CC]前置作業[/color](12/24)
(1)網站主題：
(2)導覽列架構設定

範例參考(可下載參考附檔的做法)：
[IMG]http://i556.photobucket.com/albums/ss1/whc915/webtree.jpg[/IMG]

(3)尺寸與架構設定

範例參考：
[IMG]http://i556.photobucket.com/albums/ss1/whc915/web-layout.jpg[/IMG]

(4)主要瀏覽族群：
(5)風格設定：
(6)主色調，輔助色調：
(7)製作動機：
(8)製作目的：
預期效果：

(8)資料蒐集分析

[color=#CC0099]◎設計優良網站(風格)列表與分析
[作業] 優良設計網站蒐集與分析 http://mepopedia.com/forum/read.php?2023,68211
並將網站分析於12/17前回覆於前述網址[/color]

◎相關網站列表與分析：

[hr]
[color=#CC0066]進階參考：ubuntu網頁設計規範手冊 ubuntu Web Design Guidelines[/color]
http://design.ubuntu.com/web
下載：http://design.canonical.com/brand/D.%20Ubuntu%20Web%20Guidelines.pdf
[hr]

6. 學長姐作品參考

-

[size=small](1) 作業網址： http://mepopedia.com/~web100b/final/final-1001445022
(2).
　1. 製作作業的時間：超過二十四小時
　2. 有無遇到的問題：[color=#9999CC]同樣是跨瀏覽器的問題
　　　　　　　　　　還有關於 content 裡面的 L 跟 R 的問題
　　　　　　　　　　就算跟著老師的方法做也一樣不會跟著跑這樣[/color]
　　　　　　　　　　[color=#FF0000]這些問題已經從老師那裡得到解答，解決囉！：）[/color]
　3. 製作心得與感想：雙欄式的網頁真的困難重重
　　　　　　　　　　但很高興我能從這樣的網頁中學會自己克服困難、解決問題
　　　　　　　　　　做完之後很有成就感，很高興：）

-

(1) 網站主題：金在中／東方神起
(2) 導覽列架構設定：
[IMG]http://i.imgur.com/E8uEV.jpg[/IMG]
(3) 尺寸與架構設定：
[IMG]http://i.imgur.com/FUmdw.jpg[/IMG]
(4) 風格設定：簡約、華麗、精緻
(5) 主色調，輔助色調：紅、黑；白、飽和度不依的紅、灰，等
(6) 製作動機：
　　　喜歡一個人不能只是看外表，很多人因為他的長相而喜歡他
　　　哪天他的髮型換了，身材變了，沒有了原本的帥氣，就不喜歡了
　　　最討厭這種人‥
(7) 製作目的：讓更多人認識金在中這個人

預期效果：呈現擁有自我風格的雙欄式網頁[/size]

[hr]

1. 其他作品

作業參考
(1) http://mepopedia.com/~web100b/final/final-1001445022/
(2) http://mepopedia.com/~web100b/final/final-1001445042/
(3) http://mepopedia.com/~web101c/final/final-1015445243/
http://mepopedia.com/~web101c/final/final-1015445243-1/
(4) http://mepopedia.com/~web103-a/final/final-1025445124/
(5) http://mepopedia.com/~web103-a/final/final-1025445055/
(6) http://mepopedia.com/~web103-a/final/final-1025445001/
(7) http://mepopedia.com/~web103-a/final/final-1025445040/
(8) http://mepopedia.com/~web103-a/final/final-1025445043/
(9) http://mepopedia.com/~web103-a/final/final-1005445193/
(10) http://mepopedia.com/~web103-a/final/final-1025445070/

http://mepopedia.com/forum/read.php?2023,67943

[hr]

=================================================
[color=#CC0066]※期末作業無論如何請一定要繳交，否則以期末以零分計※
※若經發現作業為直接複製同學檔案以零分計※[/color]
=================================================

http://youtu.be/JhWaXP7wCrI

[hr]
上傳圖片可使用
http://imgur.com/

若寬度太寬，請使用以下語法，將圖片網址帶入：
<img width="100%" src="圖片網址" border="0"> ]]> JinJin 104-1《中國》竹視傳二B-網頁設計 Thu, 07 Jan 2016 21:50:09 +0800 http://mepopedia.com/forum/read.php?2480,78929,78929#msg-78929 [作業07 ] 以Float：浮動，製作雙欄網頁 (44 replies) http://mepopedia.com/forum/read.php?2480,78929,78929#msg-78929

1. 製作說明：
2. 作業設計重點
3. 評分標準與製作檢核
4. 繳交作業方式
5. 回覆說明
6. 學長姐作品參考
6.1 其他作品
7. 一、製作步驟
8. 二、繳交作業方式
9. 上課影音

請參考

[color=#CC3300][講義07] 以Float：浮動，製作雙欄網頁
http://mepopedia.com/forum/read.php?804,18255[/color]

[color=#CC0066]本講義範例網址
http://mepopedia.com/~jinjin/web/hw07/[/color]

的步驟製作，並符合以下條件：

7. 一、製作步驟

1.下載附件的練習檔(或直接由期末作業方式製作，但必須是全新的內容的一頁，不要與範例內容相同)

2.找文字及圖片資料，並設定#header的標題與副標題

3.重新設定#content及#footer的CSS

4.在#content中插入#content-L及#content-R利用Float:浮動屬性，製作雙欄網頁。

5.在#content-L放入垂直檔覽列。

6.將#content-R的資料以表格整理，複習表格的做法。

[hr]

7.在[color=#990033]title的部分打上『自己作業的命名』[/color]

8.在#footer打上自己的版權聲明

9.請每位同學依步驟完成本單元後，上傳至FTP

10.本次作業的重點在於：

[color=#CC0066]（1 ）認識多欄網頁。
（2 ）雙欄網頁製作
（3 ）製作垂直導覽列
（4 ）複習表格的做法
（5 ）利用CSS，做更細緻的網頁美化設定。 ([/color]

[hr]

8. 二、繳交作業方式

1.製作完成後，檔案命名方式：

[color=#669900]第七個平時作業FTP上的資料夾為：hw07

每位同學請將自己的資料夾命名為：hw07-學號
這個作業的網址則為:http://mepopedia.com/~web104-2b/hw07/hw07-103xxxxxxx

資料夾內含：
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.images圖檔資料夾

存放在 < hw07-學號 > 的資夾內[/color]

2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :http://mepopedia.com/~web104-2b/hw07/hw07-103xxxxxxx

(2).請回答以下問題：
1.網頁主題：配色與風格設定：
2.有無遇到的問題?
3.製作感想
4.製作作業的時間

[hr]

9. 上課影音

以Float：浮動，製作雙欄網頁雙欄Float：浮動、Table：表格、錨點、垂直導覽列
http://youtu.be/pj6f8GQKIu8

2.作業參考
(1) http://mepopedia.com/~jinjin/web/hw07/
(2) http://mepopedia.com/~web103-a/hw07/hw07-1005445193/
(3) http://mepopedia.com/~web103-a/hw07/hw07-1025445139/team.html
(4) http://mepopedia.com/~web103-a/hw07/hw07-1005445195/
(5) http://mepopedia.com/~web103-a/hw07/hw07-1025445001/album.html
(6) http://mepopedia.com/~web103-a/hw07/hw07-1025445040/]]> JinJin 104-1《中國》竹視傳二B-網頁設計 Tue, 12 Jan 2016 00:59:07 +0800 http://mepopedia.com/forum/read.php?2480,78757,78757#msg-78757 [作業06] 表格的製作美化與資料整理 (47 replies) http://mepopedia.com/forum/read.php?2480,78757,78757#msg-78757

1. 製作說明：
2. 作業設計重點
3. 評分標準與製作檢核
4. 繳交作業方式
5. 回覆說明
6. 學長姐作品參考
6.1 其他作品
7. 一、製作步驟
8. 二、繳交作業方式
9. 上課影音
10. 一、製作步驟
11. 二、繳交作業方式

請參考

[color=#CC3300][講義06] 表格的製作
http://mepopedia.com/forum/read.php?804,18062[/color]

[color=#CC0066]本講義範例網址
http://mepopedia.com/~jinjin/web/hw06-ex/[/color]

的步驟製作，並符合以下條件：

10. 一、製作步驟

1.下載講義中附件的練習檔(或自行設計，必須是全新的內容的一頁)

2.找文字及圖片資料，並設定#header的標題與副標題

3.重新設定#content及#footer的CSS，可參考影音步驟，但不可為一樣的設定

Dreamweaver中#content、#footer、h2、項目清單的CSS設定
http://www.youtube.com/watch?v=gvI0qYcn9ko

4.製作並以美化表格，將資料以表格做整理

Dreamweaver表格製作-TABLE,TR TD TH caption的CSS設定

http://www.youtube.com/watch?v=3gPx_YYE1yI

[hr]

Dreamweaver表格製作-細部調整、圖片開啟新視窗、超連結等CSS的設定

http://www.youtube.com/watch?v=69CMaum2WPY

[hr]

Dreamweaver中表格CSS設定以及影音嵌入

http://www.youtube.com/watch?v=lXMUKwYmBqQ

[hr]

5.在[color=#990033]title的部分打上『自己作業的命名』[/color]

6.在#footer打上自己的版權聲明

7.請每位同學依步驟完成本單元後，上傳至FTP

8.本次作業的重點在於：

[color=#CC0066]（1 ）資料整理，表格製作與美化
（2 ）利用CSS，做更細緻的網頁美化設定
（4 ）如何利用表格，將圖片、影音與文字的編排搭配出有質感的網頁。[/color]

[hr]

11. 二、繳交作業方式

1.製作完成後，檔案命名方式：

[color=#669900]第六個平時作業FTP上的資料夾為：hw06

每位同學請將自己的資料夾命名為：hw06-學號
這個作業的網址則為:http://mepopedia.com/~web104-2b/hw06/hw06-103xxxxxxx

資料夾內含：
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.images圖檔資料夾

存放在 < hw06-學號 > 的資夾內[/color]

2.上傳至FTP

3.回覆本篇文章

(1).作業網址：

(2).請回答以下問題：
1.網頁主題：配色與風格設定：
2.有無遇到的問題?
3.製作感想
4.製作作業的時間

[color=#CC0099]請務必在下次上課前回覆，否則為遲交[/color]

]]> JinJin 104-1《中國》竹視傳二B-網頁設計 Sat, 09 Jan 2016 06:01:50 +0800 http://mepopedia.com/forum/read.php?2480,78668,78668#msg-78668 1035445224 (no replies) http://mepopedia.com/forum/read.php?2480,78668,78668#msg-78668
(2).請回答以下問題：
1.導覽列配色與風格設定按鍵以我喜歡黃色按鍵凸顯
2.有無遇到的問題? ：有
3.製作感想(你認為導覽列的意義為何?)：導覽列可讓閱覽者快速找看到想了解的內容，也可以讓然方便閱讀。
4.製作作業的時間：1.5小時]]> 1035445224 104-1《中國》竹視傳二B-網頁設計 Thu, 03 Dec 2015 00:55:11 +0800 http://mepopedia.com/forum/read.php?2480,78629,78629#msg-78629 [作業05] 繞圖排文與推文按鈕的應用 (47 replies) http://mepopedia.com/forum/read.php?2480,78629,78629#msg-78629

1. 製作說明：
2. 作業設計重點
3. 評分標準與製作檢核
4. 繳交作業方式
5. 回覆說明
6. 學長姐作品參考
6.1 其他作品
7. 一、製作步驟
8. 二、繳交作業方式
9. 上課影音
10. 一、製作步驟
11. 二、繳交作業方式
12. 一、製作步驟
13. 二、繳交作業方式

請參考

[color=#CC3300][講義05] 繞圖排文與推文按鈕的應用
http://mepopedia.com/forum/read.php?804,17878,17878[/color]

[color=#CC0066]本講義範例網址
http://mepopedia.com/~jinjin/web/hw05/story.html　[/color]

的步驟製作，並符合以下條件：

12. 一、製作步驟

1.下載附件的練習檔(或自行設計，必須是全新的內容的一頁)

2.蒐集文字及圖片資料，並設定#header的標題與副標題

3.重新設定#content及#footer的CSS，可參考圖示步驟，但不可為一樣的設定

(1)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/text004.jpg[/IMG]

(2)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/text005.jpg[/IMG]

(3)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/text006.jpg[/IMG]

4.設定內文的主標題h2，可參考圖示步驟，但不可為一樣的設定
(1)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/img-10-2.jpg[/IMG]

(2)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/img-10.jpg[/IMG]

5.設定類別作者介紹的CSS，可參考圖示步驟，但不可為一樣的設定

(1)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/text001.jpg[/IMG]

(2)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/text002.jpg[/IMG]

(3)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/text003.jpg[/IMG]

6.設定繞圖排文

7.設定臉書、噗浪以及推特的按鈕及分享語法

8.製作圖片跳出視窗的設定

9.在[color=#990033]title的部分打上『自己作業的命名』[/color]

10.在#footer打上自己的版權聲明

11.請每位同學依步驟完成本單元後，上傳至FTP

12.本次作業的重點在於：

[color=#CC0066]（1 ）善用CSS導覽列功能
（2 ）繞圖排文
（3 ）推文設定
（4 ）利用CSS，做更細緻的內文設定
（5 ）如何利用圖片與文字的編排搭配出有質感的網頁。[/color]

[hr]

13. 二、繳交作業方式

1.製作完成後，檔案命名方式：

[color=#669900]第五個平時作業FTP上的資料夾為：hw05

每位同學請將自己的資料夾命名為：hw05-學號
這個作業的網址則為:http://mepopedia.com/~web104-2b/hw05/hw05-103xxxxxxx

資料夾內含：
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.images圖檔資料夾

存放在 < hw05-學號 > 的資夾內[/color]

2.上傳至FTP

3.回覆本篇文章

(1).作業網址：

(2).請回答以下問題：
1.網頁主題：配色與風格設定：
2.有無遇到的問題?
3.製作感想
4.製作作業的時間

]]> JinJin 104-1《中國》竹視傳二B-網頁設計 Thu, 07 Jan 2016 21:10:41 +0800 http://mepopedia.com/forum/read.php?2480,78167,78167#msg-78167 [作業04] 以CSS製作網頁導覽列 (50 replies) http://mepopedia.com/forum/read.php?2480,78167,78167#msg-78167

14. 參考講義

[講義04] 以CSS製作網頁導覽列
http://mepopedia.com/forum/read.php?804,17032

15. 製作說明

1.請參考 [講義04] 以CSS製作網頁導覽列的步驟製作，以及使用以下的語法完成。

2.只要做導覽列就好，參考以下語法，修改成自己設定的風格，顏色及樣式都需要改變，並可設著加上圖片，記得tilte註明學號。

3.須包含index.html style.css 也可以使用圖片資料夾images，儲存在hw04-103xxxxxxx 資料夾中

4.請每位同學依步驟完成本單元後，上傳至FTP

5.本次作業的重點在於：

（1 ）以清單方式＜ul＞及＜li＞利用CSS製作導覽列
（3 ）熟悉以清單方式＜ul＞及＜li＞製作導覽列的語法，自行修改成設定的風格
（4 ）如何將圖片與色彩搭配出有質感的導覽列。

16. 參考語法

1. 新增index.html檔案，貼上以下語法

<ul id="button"> <li><a href="index.html">About</a></li> <li><a href="works.html">Works</a></li> <li><a href="video.html">Video</a></li> <li><a href="links.html">Links</a></li> <li><a href="story.html">Story</a></li> </ul>

2. 完整語法（含header)

<!DOCTYPE html> <html> <head> <title>網頁導覽列</title> <link rel="stylesheet" href="style.css" media="screen" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div id="wrapper"> <div id="header"></div> <ul id="button"> <li><a href="index.html">About</a></li> <li><a href="works.html">Works</a></li> <li><a href="video.html">Video</a></li> <li><a href="links.html">Links</a></li> <li><a href="story.html">Story</a></li> </ul> </div> </body> </html>

[hr]

3. 新增style.css檔案(index.html 儲存於hw04-學號資料夾中)，選擇以下兩種語法其中一個即可

[hr]

1. 第一種靠左型

#wrapper { width: 900px; margin: auto; } #header { height: px; background-image: url( ); background-repeat: no-repeat; } #button { font-weight: bolder; color: #FFF; background-color: #6E6E6E; padding-bottom: 2px; height: 20px; padding-top: 2px; font-size: 14px; margin: 0px; } #button a { display: block; float: left; width: 150px; color: #FFF; text-decoration: none; } #button a:hover{ color: #7CCBDC; } #button li { float: left; list-style-type: none; letter-spacing: 2px; border-left-width: 1px; border-left-style: solid; border-left-color: #FFF; padding-left: 10px; }

2. 第二種置中型

#wrapper { width: 900px; margin: auto; } #header { height: px; background-image: url( ); background-repeat: no-repeat; } #button { font-weight: bolder; color: #FFF; font-size: 14px; background-color:#6E6E6E; margin: 0px; padding:0px; } #button li { width:178px; text-align:center; list-style-type:none; background-color:#6E6E6E; float:left; letter-spacing: 2px; border-left-width: 1px; border-left-style: solid; border-left-color: #FFF; margin-right:1px; } #button li a { display: block; line-height: 22px; color: #FFF; text-decoration: none; } #button li a:hover{ background-color:#39919F }
[hr]

17. 繳交方式

1.製作完成後，檔案命名方式：

第四個作業FTP上的資料夾為：hw04

每位同學請將自己的資料夾命名為：hw04-學號
這個作業的網址則為:http://mepopedia.com/~web104-2b/hw04/hw04-1035445XXX

資料夾內含：
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.images圖檔資料夾(非必要)

存放在 < hw04-學號 > 的資夾內

2.上傳至FTP

3.回覆本篇文章

(1).作業網址：

(2).請回答以下問題：
1.導覽列配色與風格設定：
2.有無遇到的問題?
3.製作感想(你認為導覽列的意義維和
4.製作作業的時間

[hr]

18. 參考範例

http://mepopedia.com/forum/read.php?2023,67216
http://mepopedia.com/forum/read.php?2024,67217
http://mepopedia.com/forum/read.php?1173,27953

作業參考
[color=#0033CC]永遠的印象--莫內，範例網址：[/color]
[color=#CC3366]1.透過CSS，以清單＜ul＞及＜li＞製作網頁導覽列[/color]
http://mepopedia.com/~jinjin/web/hw04/　（滑入僅文字變色的導覽列）
http://mepopedia.com/~jinjin/web/hw04-1/　（滑入底色變色及文字置中的導覽列）

[color=#CC3366]2.以圖片按鈕製作的導覽列[/color]
http://mepopedia.com/~jinjin/web/hw04-2/　

(1) http://mepopedia.com/~web103-a/hw04/hw04-1025445040/
(2) http://mepopedia.com/~web103-a/hw04/hw04-1005445193/
(3) http://mepopedia.com/~web103-a/hw04/hw04-1025445064/
(4) http://mepopedia.com/~web103-a/hw04/hw04-1025445178/
(5) http://mepopedia.com/~web103-a/hw04/hw04-1025445001/
(6) http://mepopedia.com/~web101c/hw04/hw04-1015445243/]]> JinJin 104-1《中國》竹視傳二B-網頁設計 Wed, 06 Jan 2016 23:02:11 +0800 http://mepopedia.com/forum/read.php?2480,78006,78006#msg-78006 [期中作業 ] 以單欄為主的網站設計 (61 replies) http://mepopedia.com/forum/read.php?2480,78006,78006#msg-78006

[color=#990000][期中作業] 以單欄為主的網站設計[/color]

19. 一、製作說明：

1.請參考期中之前教過的做法及講義，製作以單欄為主的網站

2.每個同學記得在[color=#990033]title的部分打上"自訂的主題"[/color]

在#footer 註明 Designed by 某某某(可自行取名) 1035445ooo

3.題目自訂，請設計出符合網站主題的配色及設計風格。

4.需自行設計圖片，製作網站內容。

5.需以DIV搭配CSS的方式完成，設定尺寸、字體、顏色等等。

6.至少完成三頁的內容(60分)，若內容完整，沒有錯誤與法，且全部頁面完成(最少80分)。

[color=#993300]7.若真的不會做，可下載附檔，參考老師的檔案，加以修改完成，但圖片及文字內容不可一樣。
(附檔有兩組：
一組是以圖片按鈕為主，需自行製作圖片
一組是以導覽列為主(色彩編排)，請選擇一組參考製作)[/color]

8.製作完成上傳至FTP

9.本次作業的重點在於：

[color=#CC0000](1)能自行設計以DIV與CSS製作的網站
(2)利用自已設計的圖片、色彩搭配與字體設定等設計出具有質感的網頁[/color]

20. 二、評分標準與製作檢核

1.HTML的正確架構(DIV的使用)
2.整體設計美感(CSS運用，風格及配色，字體設定、圖片製作)
3.導覽列的正確性(含導覽超連結)
4.h1或h2的使用
5.class(類別)的運用
6.HTML Title的設定
7.Footer的版權宣告
8.內容完整的兩頁(至少)的連結
9.製作說明

加分：
1.內容完整度，連結頁面全部做完最少八十分，最多100分。

21. 三、繳交作業方式

[color=#CC0066]1.製作完成後，檔案命名方式：[/color]

[color=#669900]期中作業FTP上的資料夾為：midterm

每位同學請將自己的資料夾命名為：midterm-學號
這個作業的網址則為:http://mepopedia.com/~web104-2b/midterm/midterm-103xxxxxxx

資料夾內含：
(1).首頁命名為index.html
(2).其他頁面請自行命名，但需注意命名為則，不可出現中文及全形字、特殊符號等等
(3).一個命名為style.css的css樣式檔
(4).存放圖檔的images資料夾

存放在 < midterm-學號 > 的資夾內[/color]

[color=#CC0066]2.全部完成後上傳至FTP[/color]

[color=#CC0066]3.依進度回覆本篇文章[/color]

[color=#0066CC]前置作業[/color](11/05)
(1)網站主題：
(2)製作動機：
(3)製作內容：
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析：
◎相關網站列表與分析：

[color=#0066CC]完成品[/color](11/19前)
[color=#FF0066]請將這項放置於文章最前面[/color]
(1)作業網址
(2)
1有無遇到的問題
2.製作感想
3.製作作業的時間

[color=#CC0066]4.請務必在11/19前回覆，否則為遲交[/color]

22. 五、同學常見問題之注意事項

隨時補充：

1.網頁圖檔不宜太大，否則網頁開啟速度會變慢，請盡量在Photoshop或Illustrator的『儲存為網頁與裝置用』的功能裡，修改圖檔的大小至100KB以下，100KB會佔1Mb頻寬(每秒鐘)，以此類推。

2.有文字出現的區塊，要記得設定padding，文字才不會跟邊框黏在一起。

3.導覽列的超連結

請記得先將第一頁所有的連結都先設定好，再以另存新檔的方式，存成其他檔案，如此就不用每次都要設定超連結。

4.亂碼問題，放在　＜head＞＜/head＞之間
編碼方式記得存utf-8

5.CSS檔案的路徑，放在　＜head＞＜/head＞　之間

6.檔案宣告，在HTML檔最前面放
7.任何出現在網頁裡的命名不能出現中文及全形字。

8.圖片必須放在images圖片資料夾裡

[hr]

23. 參考範例

http://mepopedia.com/forum/read.php?851,16485

http://mepopedia.com/forum/read.php?855,16484

[hr]
http://mepopedia.com/~web100b/midterm/midterm-1001445022/
http://mepopedia.com/~web100b/midterm/midterm-1001445042/
http://mepopedia.com/~web100b/midterm/midterm-1001445006/
http://mepopedia.com/~web100a/midterm/midterm-1001445068/
http://mepopedia.com/~web100a/midterm/midterm-1001445096/
http://mepopedia.com/~web100a/midterm/midterm-1001445015/
http://mepopedia.com/~web100b/midterm/midterm-1001445049/
http://mepopedia.com/~web100b/midterm/midterm-1001445123/
http://mepopedia.com/~web100b/midterm/midterm-1001445026/
http://mepopedia.com/~web100a/midterm/midterm-1001445072/
http://mepopedia.com/~web100a/midterm/midterm-1001445080/

http://mepopedia.com/~web103-a/midterm/midterm-1025445001/
http://mepopedia.com/~web103-a/midterm/midterm-1025445070/
http://mepopedia.com/~web103-c/midterm/midterm-1025445069/

=================================================
[color=#CC0066]若經發現作業為直接複製同學檔案以零分計[/color]
=================================================]]> JinJin 104-1《中國》竹視傳二B-網頁設計 Wed, 26 Sep 2018 13:34:52 +0800 http://mepopedia.com/forum/read.php?2480,77898,77898#msg-77898 [作業03 ]利用Div標籤與CSS建立基本網頁版型- 圖片篇 (46 replies) http://mepopedia.com/forum/read.php?2480,77898,77898#msg-77898
1. 製作說明：
2. 作業設計重點
3. 評分標準與製作檢核
4. 繳交作業方式
5. 回覆說明
6. 學長姐作品參考
6.1 其他作品
7. 一、製作步驟
8. 二、繳交作業方式
9. 上課影音
10. 一、製作步驟
11. 二、繳交作業方式
12. 一、製作步驟
13. 二、繳交作業方式
14. 參考講義
15. 製作說明
16. 參考語法
16.1 新增index.html檔案，貼上以下語法
16.2 完整語法（含header)
16.3 新增style.css檔案(index.html 儲存於hw04-學號資料夾中)，選擇以下兩種語法其中一個即可
16.3.1 第一種靠左型
16.3.2 第二種置中型
17. 繳交方式
18. 參考範例
19. 一、製作說明：
20. 二、評分標準與製作檢核
21. 三、繳交作業方式
22. 五、同學常見問題之注意事項
23. 參考範例
24. [color=#663300]一、製作說明：[/color]
25. [color=#663300]二、繳交作業方式[/color]
[color=#990000][作業03] 利用Div標籤與CSS建立基本網頁版型--圖片篇[/color]

24. [color=#663300]一、製作說明：[/color]

1.請參考 [url=http://mepopedia.com/forum/read.php?804,16271][講義03] 利用Div標籤與CSS建立基本網頁版型[/url]
的步驟製作

2.下載附件
(或以自己設定的主題與圖片製作）

3.每個同學記得在[color=#990033]title的部分打上"自訂的主題"[/color]
在#footer 註明 Designed by 某某某(可自行取名)

4. 在#wrapper寬度上打上 px的數值

5. #content內，自行打入不同的內容文字，自行隨意設定

6. 以本單元的架構下，文字、圖片及設定，可依講義或自行發揮

7.本作業的的重點為：新增圖片按鈕，頂圖及內文圖。可依參考檔製作，或自訂主題製作（加分）

25. [color=#663300]二、繳交作業方式[/color]

1.製作完成後，檔案命名方式：

[color=#669900]第三個作業FTP上的資料夾為：hw03

每位同學請將自己的資料夾命名為：hw03-學號
這個作業的網址則為:http://mepopedia.com/~web104-2b/hw03/hw03-102xxxxxxx

資料夾內含：
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.images圖檔資料夾

存放在 < hw03-學號 > 的資夾內[/color]

2. 上傳至FTP

3.回覆本篇文章

　(1) 作業網址: http://mepopedia.com/~web104-2b/hw03/hw03-103xxxxxxx

　(2) 風格設定（色彩設定部份）（加分）

　(3) 有無遇到的問題

　(4) 製作感想

　(5) 製作作業的時間

[color=#CC3300]範例參考網站：[/color]
http://mepopedia.com/~jinjin/web/hw03/

作業參考
(1) http://mepopedia.com/~jinjin/web/hw03/
(2) http://mepopedia.com/~web103-a/hw03/hw03-1025445001/
(3) http://mepopedia.com/~web101c/hw03/hw03-1015445231/
(4) http://mepopedia.com/~web100-a/hw03/hw03-1006445010/
(5) http://mepopedia.com/~web101c/hw03/hw03-1015445203/
(6) http://mepopedia.com/~web101c/hw03/hw03-1015445243/Introduction.html

http://mepopedia.com/~web100-a/hw03/hw03-1006445010/

http://mepopedia.com/~web100b/hw03/hw03-1001445006/

===========================================
[color=#CC0066]若經發現作業為直接複製同學檔案以零分計[/color]
===========================================]]> JinJin 104-1《中國》竹視傳二B-網頁設計 Wed, 26 Sep 2018 17:36:03 +0800 http://mepopedia.com/forum/read.php?2480,77622,77622#msg-77622 [作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例 (52 replies) http://mepopedia.com/forum/read.php?2480,77622,77622#msg-77622
1. 製作說明：
2. 作業設計重點
3. 評分標準與製作檢核
4. 繳交作業方式
5. 回覆說明
6. 學長姐作品參考
6.1 其他作品
7. 一、製作步驟
8. 二、繳交作業方式
9. 上課影音
10. 一、製作步驟
11. 二、繳交作業方式
12. 一、製作步驟
13. 二、繳交作業方式
14. 參考講義
15. 製作說明
16. 參考語法
16.1 新增index.html檔案，貼上以下語法
16.2 完整語法（含header)
16.3 新增style.css檔案(index.html 儲存於hw04-學號資料夾中)，選擇以下兩種語法其中一個即可
16.3.1 第一種靠左型
16.3.2 第二種置中型
17. 繳交方式
18. 參考範例
19. 一、製作說明：
20. 二、評分標準與製作檢核
21. 三、繳交作業方式
22. 五、同學常見問題之注意事項
23. 參考範例
24. [color=#663300]一、製作說明：[/color]
25. [color=#663300]二、繳交作業方式[/color]
26. 繳交作業方式
[作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例

製作說明

1.請參考
[url=http://mepopedia.com/forum/read.php?804,16481][講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例[/url]
的步驟製作，自行選擇一主題，設定網頁風格，依照所設定風格進行配色。

2.每個同學記得在[color=#990033]title的部分打上"視傳二A-學號-以色塊建構的網頁單欄排版"，或其他適合的名稱[/color]

3.在#wrapper寬度上打上 px的數值

4.#header、#content及#footer內，自行打入不同的內容文字，自行隨意設定

5.請每位同學依步驟完成本單元─網頁版面基本架構與背景色及字體設定後，上傳至FTP

6.本次作業的重點在於：

[color=#CC0000](1)DIV與CSS的設定
(2)利用單純色彩搭配與字體設定，針對內容設計出符合主題並具有質感的網頁[/color]

26. 繳交作業方式

1.製作完成後，檔案命名方式：

[color=#669900]第二個作業FTP上的資料夾為：hw02

每位同學請將自己的資料夾命名為：hw02-學號
這個作業的網址則為:http://mepopedia.com/~web104-2b/hw02/hw02-103xxxxxxx

資料夾內含：
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔

存放在 < hw02-學號 > 的資夾內[/color]

2.上傳至FTP

3.回覆本篇文章

(1).作業網址:http://mepopedia.com/~web104-2b/hw02/hw02-103xxxxxxx

(2).請回答以下問題：
1.製作主題
2.欲呈現之配色風格：
3..有無遇到的問題?
4.製作感想

[hr]
同學的範例喔！

(1) http://mepopedia.com/~web103-c/hw02/hw02-1025445036/
(2) http://mepopedia.com/~web103-a/hw02/hw02-1025445040/
(3) http://mepopedia.com/~web103-a/hw02/hw02-1025445070/
(4) http://mepopedia.com/~web103-a/hw02/hw02-1025445001/
(5) http://mepopedia.com/~web103-a/hw02/hw02-1025445025/
(6) http://mepopedia.com/~web100b/hw02/hw02-1001445055/
(7) http://mepopedia.com/~web100b/hw02/hw02-1001445095/

===========================================
[color=#CC0066]請務必在下次上課前回覆，否則為遲交，扣十分[/color]
===========================================]]> JinJin 104-1《中國》竹視傳二B-網頁設計 Sat, 19 Dec 2015 16:45:21 +0800 http://mepopedia.com/forum/read.php?2480,77364,77364#msg-77364 [作業00] 網頁設計課前準備與基本認識 (no replies) http://mepopedia.com/forum/read.php?2480,77364,77364#msg-77364 希望能給予足夠時間吸收課程內容，並對未來的工作有所幫助。

期望在將來的課堂上，學到很多這課的相關。

2.請將瀏覽過不錯及值得推薦的網站，網站名稱及網址列出，並試著說明及分析。
網站名稱: five5
網誌:http://www.five5.com.tw/

1.字不大也不小剛剛好
2.簡潔有力大方
3.有自己的獨特風格]]> 1035445044 104-1《中國》竹視傳二B-網頁設計 Tue, 22 Sep 2015 00:27:31 +0800 http://mepopedia.com/forum/read.php?2480,77223,77223#msg-77223 [作業01] 以HTML與CSS完成第一個網頁 (49 replies) http://mepopedia.com/forum/read.php?2480,77223,77223#msg-77223
1. 製作說明：
2. 作業設計重點
3. 評分標準與製作檢核
4. 繳交作業方式
5. 回覆說明
6. 學長姐作品參考
6.1 其他作品
7. 一、製作步驟
8. 二、繳交作業方式
9. 上課影音
10. 一、製作步驟
11. 二、繳交作業方式
12. 一、製作步驟
13. 二、繳交作業方式
14. 參考講義
15. 製作說明
16. 參考語法
16.1 新增index.html檔案，貼上以下語法
16.2 完整語法（含header)
16.3 新增style.css檔案(index.html 儲存於hw04-學號資料夾中)，選擇以下兩種語法其中一個即可
16.3.1 第一種靠左型
16.3.2 第二種置中型
17. 繳交方式
18. 參考範例
19. 一、製作說明：
20. 二、評分標準與製作檢核
21. 三、繳交作業方式
22. 五、同學常見問題之注意事項
23. 參考範例
24. [color=#663300]一、製作說明：[/color]
25. [color=#663300]二、繳交作業方式[/color]
26. 繳交作業方式
27. 參考講義
28. 需下載的軟體
29. 繳交作業的方式
30. 參考範例
27. 參考講義

1.[url=http://mepopedia.com/forum/read.php?804,16668][講義01] 以 HTML 與 CSS 完成第一個網頁[/url]

[hr]

28. 需下載的軟體

FileZilla 免費又好用的FTP軟體，供客戶端和伺服器端使用
官方下載網頁：http://filezilla-project.org/

[hr]

29. 繳交作業的方式

1.以FTP上傳至老師指定位置，每一個作業都會有一個相對應的資料夾
如：[color=#CC3300]第一個作業的資料夾為：hw01[/color]
每位同學請將自己的資料夾命名為：[color=#993300]hw01-學號[/color]
這個作業的網址則為:http://mepopedia.com/~web104-2b/hw01/hw01-104xxxxxxx

2.切勿擅改別人的資料檔案，若經發現則以零分計

[hr]

這禮拜請同學按照講義的步驟及做法，自選文字主題。

1.以自己設定的文字內容，字體大小、文字、背景顏色等，盡可能以最具美感的配色與配置為主
做html與css的設定

2.至少兩個可以互相連結的html檔，其中首頁命名為index.html，另一檔案可命名為about.html
3.以及一個命名為style.css的css樣式檔

存放在hw01-學號的資夾內

[IMG]http://i.imgur.com/pUK69i6.jpg[/IMG]

[hr]
並請回覆本篇文章

1.作業網址：http://mepopedia.com/~web104-2b/hw01/hw01-104xxxxxxx

2.有無遇到的問題，製作心得，風格設定與製作作業的時間

30. 參考範例

作業參考
(1) http://mepopedia.com/~web103-a/hw01/hw01-1005445193/
(2) http://mepopedia.com/~web103-a/hw01/hw01-1025445151/
(3) http://mepopedia.com/~web103-c/hw01/hw01-1025443044/]]> JinJin 104-1《中國》竹視傳二B-網頁設計 Sat, 19 Dec 2015 15:41:00 +0800 http://mepopedia.com/forum/read.php?2480,77222,77222#msg-77222 [作業00] 網頁設計課前準備與基本認識 (47 replies) http://mepopedia.com/forum/read.php?2480,77222,77222#msg-77222

1. 製作說明：
2. 作業設計重點
3. 評分標準與製作檢核
4. 繳交作業方式
5. 回覆說明
6. 學長姐作品參考
6.1 其他作品
7. 一、製作步驟
8. 二、繳交作業方式
9. 上課影音
10. 一、製作步驟
11. 二、繳交作業方式
12. 一、製作步驟
13. 二、繳交作業方式
14. 參考講義
15. 製作說明
16. 參考語法
16.1 新增index.html檔案，貼上以下語法
16.2 完整語法（含header)
16.3 新增style.css檔案(index.html 儲存於hw04-學號資料夾中)，選擇以下兩種語法其中一個即可
16.3.1 第一種靠左型
16.3.2 第二種置中型
17. 繳交方式
18. 參考範例
19. 一、製作說明：
20. 二、評分標準與製作檢核
21. 三、繳交作業方式
22. 五、同學常見問題之注意事項
23. 參考範例
24. [color=#663300]一、製作說明：[/color]
25. [color=#663300]二、繳交作業方式[/color]
26. 繳交作業方式
27. 參考講義
28. 需下載的軟體
29. 繳交作業的方式
30. 參考範例
31. 安裝軟體
31.0.1 FileZilla
31.0.2 Notepad++
31.0.3 Dreamweaver
32. 閱讀關於html、css相關書籍，建立網頁設計基本概念
33. 教學網站註冊
34. 認識瀏覽器
34.0.1 Internet Explorer (IE)
34.0.2 Google Chrome
34.0.3 Firefox
35. 多觀摩與紀錄優良網站
36. 預備週課後問答

第一週須完成的任務：

31. 安裝軟體

安裝必備軟體

[hr]

1. FileZilla

免費好用的FTP軟體

https://filezilla-project.org/

FileZilla是一套開放原始碼的免費FTP檔案傳輸軟體，內建44種語言的多國語系介面，且還提供Windows、Linux、Mac OS X等多種作業系統平台的版本。除了支援一般FTP檔案傳輸之外，還可支援SFTP與「FTP over SSL/TLS」…等傳輸模式，是個相當穩定而好用的免費軟體。

安裝說明：
http://blog.xuite.net/yh96301/blog/30931988-%E5%85%8D%E8%B2%BBFTP%E9%80%A3%E7%B7%9A%E8%BB%9F%E9%AB%94FileZilla+Client%E4%B8%8B%E8%BC%89%E8%88%87%E5%AE%89%E8%A3%9D

[hr]

2. Notepad++

http://notepad-plus-plus.org/

實用的免費文字編輯軟體 - Notepad++，是旅法台灣人作品，體積輕巧不佔系統記憶體，支援多分頁功能，是一套用來取代Windows記事本的工具，他的操作方式與記事本完全相同。

具有好用的中文搜尋取代、開啟檔案群組、在目錄中的指定副檔名搜尋特定字串、程式語言高亮度顯示等功能，支援ANSI、UTF-8（支援檔首無BOM）、UCS-2...等格式的編譯及轉換，是必備的原始碼編輯軟體。可以替許多的程式語言的語法上色，而且還有半透明視窗的效果，是撰寫程式的好幫手。

[hr]

3. Dreamweaver

視覺設計師常用的網頁設計軟體，不過不宜太依賴內建的功能，先了解網頁背後的結構與語法才是王道。

[hr]

32. 閱讀關於html、css相關書籍，建立網頁設計基本概念

請多多利用圖書館或網路資源

[hr]

33. 教學網站註冊

http://mepopedia.com/forum/register.php?804
註冊完畢後，請至右上角『設定』→『個人資訊（編輯）』至少填寫學號
每位同學都必須註冊，有任何註冊問題請隨時反應。可以寄信到 mepo@mepopedia.com 申請開通帳號，或於課堂上留下帳號及 email 由老師統一申請開通。

34. 認識瀏覽器

安裝目前主流的三個瀏覽器：IE、Google Chrome、FireFox至少三種瀏覽器。

http://gs.statcounter.com/

1. Internet Explorer (IE)

特色：是目前全球使用人口最多的瀏覽器，因為是Microsoft開發的軟體，因為有許多先天的優勢，也因為最多人使用，所以大部分的網站、論壇甚至是一些php或java程式編碼都採用IE可以普遍認得的編碼。在其他不同瀏覽器上觀看這些網頁的時候，有可能發生網頁顯示不正常或者部分功能無法使用的情況。現階段而言，聰明的網頁編輯人員都會在製作網站的時候，根據這三種瀏覽器作為測試的平台，基本上以符合三種瀏覽器使用為原則。。
缺點：速度慢、網頁編碼方式不符合html發佈的官方寫法，因此較容易出現網頁顯示異常。
下載 Internet Explorer
http://windows.microsoft.com/zh-TW/internet-explorer/products/ie/home

[hr]

2. Google Chrome

快速啟動?Google Chrome 瞬間即可啟動。
迅速載入?Google Chrome 的網頁載入速度飛快。
高速搜尋?直接從網址列搜尋網頁。
下載Google Chrome
http://www.google.com/chrome?hl=zh-TW

[hr]

3. Firefox

Mozilla Firefox是目前市占率第三名的瀏覽器，它有著豐富的擴充套件，可打造出相當個人化的瀏覽環境。今天Mozilla基金會釋出了最新的Firefox 29.0正式版，最大的特色在於新設計的界面以及方便的網路同步功能，能將你的分書籤、密碼、分頁、附加元件…等資料自動同步到雲端的Firefox帳號中，比前一版(28.0)更加美觀、直覺、好用
下載FireFox
http://moztw.org/

[hr]

35. 多觀摩與紀錄優良網站

1.瀏覽網站時可隨時觀察或記錄不同瀏覽器閱讀時的差異<
2.多看多觀摩美觀且優良網站的設計，並隨時記錄優良網站的網址，以供後續設計的參考

[hr]

36. 預備週課後問答

1.請寫下你對於本課程的期許，希望可以學習哪些網頁上的知識及技能，以作為後續課程的參考。
2.請將瀏覽過不錯及值得推薦的網站，網站名稱及網址列出，並試著說明及分析。

回覆完畢請註明學號。

範例：

[hr]
（一）網站名稱：Foodsense食品感官
網址：http://foodsense.is/
說明：
1.符合響應式設計，為最新的網頁設計技術，符合不同的行動裝置使用。
2.風格清新簡潔，明確的表現出健康蔬食網站的氣質。

（二）網站名稱：TOBI'S STORY
網址：http://tobisstory.lesavignons.com/#future
說明：
1.有趣的動畫，使網頁顯得生動活潑，讓閱讀網頁不乏悶。
2.2014 年的趨勢還有 HTML5 被廣泛使用來呈現網站不同部分的動畫。Tobi’s Story 網站就是以很棒的方式將很酷的東西作了最佳的使用，滾動距離的次標題與動畫良好的結合，是未來的趨勢。

（三）網站名稱：Realtii
網址：http://realtii.com/
說明：
1.使用用大圖作為主視覺，只有少量的文字，放置在網頁的最頂端。
2.大面積圖像區塊已經慢慢取代滑動區塊（sliders），掌握人們的視線。

（四）網站名稱：Cider Co西雅圖
網址：http://www.seattlecidercompany.com/
說明：
1.將一張照片編修放在大面積圖像區域，塑造成一種仿古和質樸的感覺，以符合網站的整體風格。
2.不用側邊欄，整合所有選單、內容至網頁，只要下拉滾輪即可看見的趨勢正流行。

[hr]
補出說明：
1.響應式網頁設計(Responsive Web Design)

[img]http://www.ibest.tw/images/01/responsive_design_1.png[/img]
http://www.ibest.tw/page01.php

響應式網頁設計(Responsive Web Design)簡稱RWD，又稱適應性網頁、自適應網頁設計、回應式網頁設計、多螢網頁設計，這是一項被公認在2014年網頁設計開發技術的趨勢，網站使用CSS3，以百分比的方式以及彈性的畫面設計，在不同解析度下改變網頁頁面的佈局排版，讓不同的設備都可以正常瀏覽同一網站，提供最佳的視覺體驗，是個因移動平台的用戶大量增加而想出的一個對應方法。響應式網站如同HTML5一樣，絕對是未來網頁設計的一個重要方向

http://blog.iprefer.com.tw/?projects=%E3%80%90%E6%95%B8%E4%BD%8D%E6%8A%80%E8%A1%93%E6%87%89%E7%94%A8%E3%80%91%E9%9F%BF%E6%87%89%E5%BC%8F%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88responsive-web-design

2.其他響應式設計網站：
http://mediaqueri.es/
http://www.worldwildlife.org/
http://zomigi.com/blog/full-width-pinned-layouts-with-flexbox/

3.其他推薦網站：
http://www.morphix.si/#portfolio
http://www.thefwa.com/]]> JinJin 104-1《中國》竹視傳二B-網頁設計 Wed, 28 Oct 2015 17:12:49 +0800

[color=#990000][期末作業] 以雙欄為主的網站設計[/color]

1. 製作說明：

2. 作業設計重點

3. 評分標準與製作檢核

4. 繳交作業方式

5. 回覆說明

6. 學長姐作品參考

1. 其他作品

7. 一、製作步驟

8. 二、繳交作業方式

9. 上課影音

10. 一、製作步驟

11. 二、繳交作業方式

12. 一、製作步驟

13. 二、繳交作業方式

14. 參考講義

15. 製作說明

16. 參考語法

1. 新增index.html檔案，貼上以下語法

2. 完整語法（含header)

3. 新增style.css檔案(index.html 儲存於hw04-學號資料夾中)，選擇以下兩種語法其中一個即可

1. 第一種靠左型

2. 第二種置中型

17. 繳交方式

18. 參考範例

[color=#990000][期中作業] 以單欄為主的網站設計[/color]

19. 一、製作說明：

20. 二、評分標準與製作檢核

21. 三、繳交作業方式

22. 五、同學常見問題之注意事項

23. 參考範例

[color=#990000][作業03] 利用Div標籤與CSS建立基本網頁版型--圖片篇[/color]

24. [color=#663300]一、製作說明：[/color]

25. [color=#663300]二、繳交作業方式[/color]

製作說明

26. 繳交作業方式

27. 參考講義

28. 需下載的軟體

29. 繳交作業的方式