JinJin 的視覺設計專區 - 104-2《中國》竹視傳二A-進階網頁設計 http://mepopedia.com/forum/list.php?2560 Wed, 29 Apr 2026 09:43:01 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?2560,81403,81403#msg-81403 [作業08]HTML/CSS/jQuery 物件小動畫、燈箱效果 (35 replies) http://mepopedia.com/forum/read.php?2560,81403,81403#msg-81403
  1. 1. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明
  2. 2. 學長姊範例
  3. 3. 2015/5/28上課影音

1. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明


請參考

http://mepopedia.com/forum/read.php?804,81401

上課範例
http://mepopedia.com/~css104-2c/hw08/ex/hw08-1025445070

[hr]
1.參考上課與講義上之作法，以jQuery做出物件小動畫、燈箱效果(有效果即可)
2.也可以期末主題製作物件小動畫、燈箱效果

3.將資料夾命名為 hw08-學號，以ＦＴＰ上傳至hw08資料夾
作業網址為http://mepopedia.com/~css104-2a/hw08/hw08-1035445XXX 。

並請回覆：

(1)作業網址：
(2)製作心得：
學號

[hr]
請於規定時間準時繳交作業。
[hr]

2. 學長姊範例


http://mepopedia.com/~css104-2c/hw08/ex/hw08-1025445070/
http://mepopedia.com/~css104-2c/hw08/ex/final-1015445215
http://mepopedia.com/~css104-2c/hw08/ex/final-1015445218
http://mepopedia.com/~css104-2c/hw08/ex/final-1025445044
http://mepopedia.com/~css104-2c/hw08/ex/final-1025445055
http://mepopedia.com/~css104-2c/hw08/ex/final-1025445205
http://mepopedia.com/~css104-2c/hw08/ex/0519BPL


[hr]

3. 2015/5/28上課影音


HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
]]> JinJin 104-2《中國》竹視傳二A-進階網頁設計 Thu, 16 Jun 2016 00:22:25 +0800 http://mepopedia.com/forum/read.php?2560,81302,81302#msg-81302 [ 作業07] jQuery動態換頁效果 (41 replies) http://mepopedia.com/forum/read.php?2560,81302,81302#msg-81302
  1. 1. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明
  2. 2. 學長姊範例
  3. 3. 2015/5/28上課影音
  4. 4. jQuery動態換頁效果作業說明

4. jQuery動態換頁效果作業說明


請參考
[講義]jQuery動態換頁效果
http://mepopedia.com/forum/read.php?804,81301

[hr]
1.參考上課與講義上之作法，以jQuery做出翻頁效果(有效果即可)

2.將資料夾命名為 hw07-學號，以ＦＴＰ上傳至hw07資料夾
作業網址為http://mepopedia.com/~css104-2a/hw07/hw07-1035445XXX

並請回覆：

(1)作業網址：
(2)製作心得：


[hr]
學長姊範例
1. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445005/
2. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445070/
3. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445205/
[hr]
請於規定時間準時繳交作業。
[hr]]]> JinJin 104-2《中國》竹視傳二A-進階網頁設計 Sat, 18 Jun 2016 00:21:32 +0800 http://mepopedia.com/forum/read.php?2560,81300,81300#msg-81300 [期末作業]專題網站設計 (18 replies) http://mepopedia.com/forum/read.php?2560,81300,81300#msg-81300
  1. 1. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明
  2. 2. 學長姊範例
  3. 3. 2015/5/28上課影音
  4. 4. jQuery動態換頁效果作業說明
  5. 5. 作業說明
  6. 6. 企劃大綱
  7. 7. 說明
  8. 8. 回覆項目
  9. 9. 評分標準

5. 作業說明


請參考[期末作業說明] 專題網站製作--以網站新人王為例
http://mepopedia.com/forum/read.php?2428,75914

網站新人王網站
http://2015.netking.tw

請設計與台灣有關的主題
如：景點，小吃，行業，廟宇，風俗，文化，故事....等。

[hr]

6. 企劃大綱


請於第十六週前回覆
企劃大綱的內容製作

1.網站主題：
2.內容大綱：
3.主要對象(分析)：
4.網頁架構圖(樹狀圖)：
5.網頁版型設計圖
6.色彩規劃：
7.歷屆得獎分析(至少三組)
8.組員名單(學號）

[hr]

7. 說明


盡可能地將本學期學習的技術應用於其中
仍須以視覺美感為主，設計頁數請盡量至少以十頁以上為主
設計上若有困難，請找老師討論

第十八週上課前製作完成，課堂報告評分
期末若未出席及繳交作業，期末成績以零分計算

將資料夾命名為 final-學號(組長)，以ＦＴＰ上傳至final資料夾
作業網址為http://mepopedia.com/~css104-2a/final/final-1035445XXX

[hr]

8. 回覆項目


1.作業網址：

2.網站主題：
3.網站架構（導覽）
4.內容描述：
5.風格設計：
6.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：
7.個人製作心得：

[hr]
企劃大綱

1.網站主題：
2.內容大綱：
3.主要對象(分析)：
4.網頁架構圖(樹狀圖)：
5.網頁版型設計圖
6.色彩規劃：
7.歷屆得獎分析(至少三組)

[hr]

9. 評分標準


1.內容技巧，是否有應用所學技巧
2.視覺美感
3.網頁架構（ＨＴＭＬ＋ＣＳＳ）網頁效能 jQuery
4.工作分配之項目]]> JinJin 104-2《中國》竹視傳二A-進階網頁設計 Fri, 17 Jun 2016 04:57:44 +0800 http://mepopedia.com/forum/read.php?2560,81193,81193#msg-81193 [作業06] jQuery動態網頁初探-fadein (43 replies) http://mepopedia.com/forum/read.php?2560,81193,81193#msg-81193
  1. 1. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明
  2. 2. 學長姊範例
  3. 3. 2015/5/28上課影音
  4. 4. jQuery動態換頁效果作業說明
  5. 5. 作業說明
  6. 6. 企劃大綱
  7. 7. 說明
  8. 8. 回覆項目
  9. 9. 評分標準
  10. 10. jQuery動態網頁初探講義
  11. 11. jQuery動態網頁初探作業說明影音
  12. 12. 作業步驟

10. jQuery動態網頁初探講義


請參考
[講義] jQuery講義
http://mepopedia.com/forum/read.php?1497,45619


[hr]

11. jQuery動態網頁初探作業說明影音


http://youtu.be/ScKyR0mrh1s



[hr]

12. 作業步驟

1.修改期中作業檔案，使#main產生fadein效果
2.學習重點
<head> <!--jQuery 語法--> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script> $(function() { $( "#main" ).hide(); $( "#main" ).fadeIn(2000); }); </script> </head> 3.將資料夾命名為 hw06-學號，以FTP上傳至hw06資料夾
作業網址為http://mepopedia.com/~css104-2a/hw06/hw06-1035445XXX 。

並請回覆：

(1)作業網址：
(2)製作心得：
學號

[hr]
請於規定時間準時繳交作業，逾期不後。
[hr]]]> JinJin 104-2《中國》竹視傳二A-進階網頁設計 Fri, 17 Jun 2016 23:57:47 +0800 http://mepopedia.com/forum/read.php?2560,80855,80855#msg-80855 [作業05] 網頁美感排版設計 (31 replies) http://mepopedia.com/forum/read.php?2560,80855,80855#msg-80855
  1. 1. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明
  2. 2. 學長姊範例
  3. 3. 2015/5/28上課影音
  4. 4. jQuery動態換頁效果作業說明
  5. 5. 作業說明
  6. 6. 企劃大綱
  7. 7. 說明
  8. 8. 回覆項目
  9. 9. 評分標準
  10. 10. jQuery動態網頁初探講義
  11. 11. jQuery動態網頁初探作業說明影音
  12. 12. 作業步驟
  13. 13. 網頁美感排版設計參考講義
  14. 14. 設計目的
  15. 15. 設計主題
  16. 16. 製作步驟
  17. 17. 注意事項
  18. 18. Adobe Creative Cloud
  19. 19. 作業繳交
  20. 20. 上課影音

13. 網頁美感排版設計參考講義


請參考[講義] 網頁美感排版設計：http://mepopedia.com/forum/read.php?804,75770

[hr]

14. 設計目的

1.了解以photoshop製作mockup的提案與展示方式並實際製作。
2.解讀與思考設計主題如何透過網頁形式表現
3.了解網頁實際內容與細節
4.觀察優良網站的設計原則
5.增強網頁排版的能力與技巧

15. 設計主題


1.請選擇一需要修改的網站，並列出需要修改的原因
2.蒐集優良參考範例，並提出修改方案
3.以photoshop製作：
(1)首頁 http://www.most.gov.tw （http://www.moc.gov.tw）
(2)滑鼠移過的效果
(3)進入後的至少其中一子頁(內頁，文章頁或活動頁等)

http://www.most.gov.tw/newwp.aspx?act=Detail&id=29c94e68bc7243b0a9fd2ff5103d37a9&ctunit=31&ctnode=42&mp=1
http://www.moc.gov.tw/information_250_35497.html
http://event2.culture.tw/NCO/portal/Registration/C0103MAction?actId=50005

(4)列表頁(加分)
http://www.most.gov.tw/wlp.aspx?CtUnit=31&mp=1&CtNode=42
http://www.moc.gov.tw/informationlist_250.html

[hr]

16. 製作步驟


1.請分析欲製作主題網站風格與元素，並加以整理。
2.搜尋相關資料及網站，參考其排版與風格
3.以photoshop軟體選用其中一種參考版型製作。
4.請繪製草圖或選擇你認為值得學習的網站首頁作為練習對象，截圖置入photoshop當作背景。
5.以原參考網頁的版型與網頁資訊，重新以photoshop設計，包含標題文字、圖片、色彩。
6.存成html，並上傳至ＦＴＰ，於hw05中

7.請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud

6.上傳
(1)首頁，(2)滑鼠移過的效果，(3)進入後的至少其中一子頁。
並請回覆：

作業網址：

(1)網站網站網址及主題：
(2)參考網站網址與網站名稱：
(3)色彩計畫：
(4)風格特色：
(5)請整理以下數值：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得：

學號

[hr]

17. 注意事項


1.[color=#CC0066]排版比例、間距、字體大小、等請盡量以參考範本為主[/color]。
2.中文字體以微軟正黑、新細明體、標楷體為主，一般設定建議以微軟正黑為主，較具設計質感。
3.[color=#CC0066]網頁單位請務必以px標示，[/color]並注意整體網頁的寬度。
4.請於規定時間準時繳交作業，逾期不後。

[hr]

18. Adobe Creative Cloud


請至http://www.adobe.com/tw/
註冊帳號

將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud

體驗雲端共享ＰＳＤ的便利。

[hr]

19. 作業繳交


1.製作連結提案模擬，上傳網址為
http://mepopedia.com/~css104-2a/hw05/hw05-1035445XXX

2.請至http://www.adobe.com/tw/ 註冊帳號
在檔案內新增資料夾---學號姓名-進階網頁設計
將完成的檔案ＰＳＤ及ＪＰＧ，上傳至Adobe Creative Cloud

[hr]

20. 上課影音


網頁視覺提案作業講解



[hr]
上傳Adobe CC 教學



[hr]

截圖軟體
http://soft8ware.com/Graphic/2/455.html#ecms

[hr]
(1)原網站名稱及網址： [url=http://www.kh.edu.tw/]高雄市教育部網站-英文版[/url]
作業網址：http://mepopedia.com/~web103-2b/hw05/hw05-1025445005
(2)參考網站網址與網站名稱： [url=http://www.ok-studios.de/home/]OK-Studios[/url]

[hr]]]> JinJin 104-2《中國》竹視傳二A-進階網頁設計 Fri, 17 Jun 2016 01:25:55 +0800 http://mepopedia.com/forum/read.php?2560,80472,80472#msg-80472 [期中作業] HTML與CSS練習--網站實作 (53 replies) http://mepopedia.com/forum/read.php?2560,80472,80472#msg-80472
  1. 1. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明
  2. 2. 學長姊範例
  3. 3. 2015/5/28上課影音
  4. 4. jQuery動態換頁效果作業說明
  5. 5. 作業說明
  6. 6. 企劃大綱
  7. 7. 說明
  8. 8. 回覆項目
  9. 9. 評分標準
  10. 10. jQuery動態網頁初探講義
  11. 11. jQuery動態網頁初探作業說明影音
  12. 12. 作業步驟
  13. 13. 網頁美感排版設計參考講義
  14. 14. 設計目的
  15. 15. 設計主題
  16. 16. 製作步驟
  17. 17. 注意事項
  18. 18. Adobe Creative Cloud
  19. 19. 作業繳交
  20. 20. 上課影音
  21. 21. 期中作業說明

21. 期中作業說明


請參考期中前之講義製作

須具備
1.以課堂練習架構修改為一全新內容的網站。
2.每個連結都要有內容(導覽頁不可直接外連網站）
3.注意配色、設計質感、排版、字體、行間、字體大小等細節，設一一具有設計質感的網站。
4.需有CSS3的效果（圓角，陰影，漸層，透明度等），但不可過於誇張。

[hr]
將資料夾命名為 midterm-學號，以ＦＴＰ上傳至midterm資料夾
作業網址為http://mepopedia.com/~css104-2a/midterm/midterm-1035445XXX 。

並請回覆：

(1)作業網址：
(2)網站主題：
(3)導覽列選項：
(2)設計對象：
(3)色彩計畫：
(4)風格設定、預期成效：
(5)製作心得：

學號

[hr]
請於規定時間準時繳交作業，本作業佔學期分數30%，逾期不後。
[hr]]]> JinJin 104-2《中國》竹視傳二A-進階網頁設計 Sun, 24 Apr 2016 22:07:55 +0800 http://mepopedia.com/forum/read.php?2560,80254,80254#msg-80254 [作業04]HTML與CSS練習-- 內頁實作篇--其他頁面完成 (48 replies) http://mepopedia.com/forum/read.php?2560,80254,80254#msg-80254
  1. 1. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明
  2. 2. 學長姊範例
  3. 3. 2015/5/28上課影音
  4. 4. jQuery動態換頁效果作業說明
  5. 5. 作業說明
  6. 6. 企劃大綱
  7. 7. 說明
  8. 8. 回覆項目
  9. 9. 評分標準
  10. 10. jQuery動態網頁初探講義
  11. 11. jQuery動態網頁初探作業說明影音
  12. 12. 作業步驟
  13. 13. 網頁美感排版設計參考講義
  14. 14. 設計目的
  15. 15. 設計主題
  16. 16. 製作步驟
  17. 17. 注意事項
  18. 18. Adobe Creative Cloud
  19. 19. 作業繳交
  20. 20. 上課影音
  21. 21. 期中作業說明
  22. 22. HTML與CSS練習--內頁實作篇--其他頁面完成
  23. 22.1 作業說明
  24. 22.2 作業步驟

22. HTML與CSS練習--內頁實作篇--其他頁面完成


請參考
[講義] HTML與CSS練習--內頁實作篇--其他頁面完成與CSS3初探：
http://mepopedia.com/forum/read.php?804,44848

[hr]

1. 作業說明

1.延續作業03，繼續完成至少另一頁，含本作業至少共三頁
2.製作：(1)完成首頁，(2)設定滑鼠移過的效果，其他頁面將陸續完成。(3)適當加入ＣＳＳ3的效果

[hr]

2. 作業步驟

1.參考http://mepopedia.com/~jinjin/web/hw05a/link.html
http://mepopedia.com/~web102-a/midterm/hw03_1015445024/Sold.html

2.延續作業03的內容
3.請以設計質感與創新設計為主要考量
4.將ＨＴＭＬ與ＣＳＳ語法分別貼上後，修改ＨＴＭＬ與ＣＳＳ語法。
5.將資料夾命名為 hw04-學號，以ＦＴＰ上傳至hw03資料夾
作業網址為http://mepopedia.com/~css104-2a/hw04/hw04-1035445XXX/link.html (此檔名可自行設定)


並請回覆：

(1)作業網址：
(2)本頁設計重點：
(3)製作心得：
學號

[hr]
請於規定時間準時繳交作業，逾期不後。
[hr]]]> JinJin 104-2《中國》竹視傳二A-進階網頁設計 Tue, 31 May 2016 21:34:32 +0800 http://mepopedia.com/forum/read.php?2560,80168,80168#msg-80168 [作業03] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果 (50 replies) http://mepopedia.com/forum/read.php?2560,80168,80168#msg-80168
  1. 1. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明
  2. 2. 學長姊範例
  3. 3. 2015/5/28上課影音
  4. 4. jQuery動態換頁效果作業說明
  5. 5. 作業說明
  6. 6. 企劃大綱
  7. 7. 說明
  8. 8. 回覆項目
  9. 9. 評分標準
  10. 10. jQuery動態網頁初探講義
  11. 11. jQuery動態網頁初探作業說明影音
  12. 12. 作業步驟
  13. 13. 網頁美感排版設計參考講義
  14. 14. 設計目的
  15. 15. 設計主題
  16. 16. 製作步驟
  17. 17. 注意事項
  18. 18. Adobe Creative Cloud
  19. 19. 作業繳交
  20. 20. 上課影音
  21. 21. 期中作業說明
  22. 22. HTML與CSS練習--內頁實作篇--其他頁面完成
  23. 22.1 作業說明
  24. 22.2 作業步驟
  25. 23. HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果作業說明
  26. 23.1 作業說明
  27. 23.2 作業步驟

23. HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果作業說明


請參考
[講義] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果：
http://mepopedia.com/forum/read.php?804,44612

[hr]

1. 作業說明

1.延續作業02，繼續完成至少另一頁，
2.製作：(1)完成首頁，(2)設定滑鼠移過的效果，其他頁面將陸續完成。(3)適當加入ＣＳＳ3的效果

[hr]

2. 作業步驟

1.參考http://mepopedia.com/~jinjin/web/hw04a/works.html
並以講義中的語法為參考http://mepopedia.com/forum/read.php?804,44612
2.延續作業02的內容
3.請以設計質感與創新設計為主要考量
4.將ＨＴＭＬ與ＣＳＳ語法分別貼上後，修改ＨＴＭＬ與ＣＳＳ語法。
5.將資料夾命名為 hw03-學號，以ＦＴＰ上傳至hw03資料夾
作業網址為http://mepopedia.com/~css104-2a/hw03/hw03-1035445XXX/works.html (此檔名可自行設定)

並請回覆：

(1)作業網址：
(2)本頁設計重點：
(3)製作心得：
學號

[hr]
請於規定時間準時繳交作業，逾期不後。
[hr]]]> JinJin 104-2《中國》竹視傳二A-進階網頁設計 Tue, 14 Jun 2016 14:06:10 +0800 http://mepopedia.com/forum/read.php?2560,80046,80046#msg-80046 [作業02] HTML與CSS練習--首頁實作篇 (53 replies) http://mepopedia.com/forum/read.php?2560,80046,80046#msg-80046
  1. 1. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明
  2. 2. 學長姊範例
  3. 3. 2015/5/28上課影音
  4. 4. jQuery動態換頁效果作業說明
  5. 5. 作業說明
  6. 6. 企劃大綱
  7. 7. 說明
  8. 8. 回覆項目
  9. 9. 評分標準
  10. 10. jQuery動態網頁初探講義
  11. 11. jQuery動態網頁初探作業說明影音
  12. 12. 作業步驟
  13. 13. 網頁美感排版設計參考講義
  14. 14. 設計目的
  15. 15. 設計主題
  16. 16. 製作步驟
  17. 17. 注意事項
  18. 18. Adobe Creative Cloud
  19. 19. 作業繳交
  20. 20. 上課影音
  21. 21. 期中作業說明
  22. 22. HTML與CSS練習--內頁實作篇--其他頁面完成
  23. 22.1 作業說明
  24. 22.2 作業步驟
  25. 23. HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果作業說明
  26. 23.1 作業說明
  27. 23.2 作業步驟
  28. 24. HTML與CSS練習--首頁實作篇作業說明
  29. 24.1 作業目的
  30. 24.2 作業說明
  31. 24.3 作業步驟
  32. 24.4 學長姐範例

24. HTML與CSS練習--首頁實作篇作業說明


請參考
[url=http://mepopedia.com/forum/read.php?804,43670][講義] HTML與CSS練習--首頁實作篇[/url]

1. 作業目的

1.進一步熟悉HTML與CSS
2.練習將視覺與語法結合
3.學習如何修改HTML與CSS語法

[hr]

2. 作業說明

1.請以範例網站為基模，使用其排版概念，重新改編為一新的網站設計，除了架構一樣，其他資訊皆要更新。
2.製作：(1)完成首頁，(2)設定滑鼠移過的效果，其他頁面將陸續完成。

[hr]

3. 作業步驟

1.參考http://mepopedia.com/~web102-c/hw03/hw03/
並以講義中的語法為參考http://mepopedia.com/forum/read.php?804,43670。
2.重新設定一全新網站的主題，蒐集相關主題及內容資料
3.重新設定網站主題、使用對象、色彩計畫、圖片元素等。
4.製作背景圖片、整體色彩設定，標題及文字內容。
5.將ＨＴＭＬ與ＣＳＳ語法分別貼上後，修改ＨＴＭＬ與ＣＳＳ語法。
6.將資料夾命名為 hw02-學號，以ＦＴＰ上傳至hw02資料夾
作業網址為http://mepopedia.com/~css104-2a/hw02/hw02-1035445XXX 。

並請回覆：

(1)作業網址：
(2)網站主題/網站名稱：
(3)分類項目:
(4)對象：
(5)色彩計畫：
(6)風格設定、網頁看點、預期成效：
(7)請整理以下數值：
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)

(8)製作心得：

學號

[hr]
請於規定時間準時繳交作業，逾期不後。
[hr]

4. 學長姐範例


http://mepopedia.com/~web103-2a/hw02/hw02-1025445205/
http://mepopedia.com/~web102-c/midterm/midterm-1015445215/
http://mepopedia.com/~web102-c/midterm/midterm-1015445212/
http://mepopedia.com/~web102-c/midterm/midterm-1015445219

http://mepopedia.com/~web102-c/final/final-1015445212/]]> JinJin 104-2《中國》竹視傳二A-進階網頁設計 Tue, 31 May 2016 21:32:21 +0800 http://mepopedia.com/forum/read.php?2560,79947,79947#msg-79947 [作業01] DIV與CSS複習--以色塊為主的基本單欄網頁版型 (50 replies) http://mepopedia.com/forum/read.php?2560,79947,79947#msg-79947
  1. 1. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明
  2. 2. 學長姊範例
  3. 3. 2015/5/28上課影音
  4. 4. jQuery動態換頁效果作業說明
  5. 5. 作業說明
  6. 6. 企劃大綱
  7. 7. 說明
  8. 8. 回覆項目
  9. 9. 評分標準
  10. 10. jQuery動態網頁初探講義
  11. 11. jQuery動態網頁初探作業說明影音
  12. 12. 作業步驟
  13. 13. 網頁美感排版設計參考講義
  14. 14. 設計目的
  15. 15. 設計主題
  16. 16. 製作步驟
  17. 17. 注意事項
  18. 18. Adobe Creative Cloud
  19. 19. 作業繳交
  20. 20. 上課影音
  21. 21. 期中作業說明
  22. 22. HTML與CSS練習--內頁實作篇--其他頁面完成
  23. 22.1 作業說明
  24. 22.2 作業步驟
  25. 23. HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果作業說明
  26. 23.1 作業說明
  27. 23.2 作業步驟
  28. 24. HTML與CSS練習--首頁實作篇作業說明
  29. 24.1 作業目的
  30. 24.2 作業說明
  31. 24.3 作業步驟
  32. 24.4 學長姐範例
  33. 25. 網頁基礎複習
  34. 26. 課堂範例
  35. 27. 盒子模型／區塊模型（Box Model）
  36. 28. 作業說明
  37. 29. 上課影音
經過了一個寒假，為了讓大家回復記憶，請先複習基礎的網頁設計概念

25. 網頁基礎複習


[url=http://mepopedia.com/forum/read.php?804,41760][講義] HTML & CSS網頁基礎複習整理[/url]

[hr]

26. 課堂範例


http://mepopedia.com/~web103-2a/hw01/hw01-102

[hr]

27. 盒子模型／區塊模型（Box Model）


參考以下網址，並牢記下圖 盒子模型／區塊模型（Box Model）
http://mepopedia.com/forum/read.php?844,15917

[img]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/img]

[hr]
以及盒子與盒子(元素與元素)之間的關係



<<熟記元素與元素之間的關係，下週舉行小考>>

[hr]

28. 作業說明


參照講義
[url=http://mepopedia.com/forum/read.php?804,16481]利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例[/url]

自行選擇主題，製作以DIV架構搭配CSS的基本網頁，請注意字體大小、整體質感與配色

可參考http://www.css3maker.com/
適當加入CSS3效果

製作完畢請上傳FTP
下載：http://filezilla-project.org/download.php?type=client

並回覆於此篇文章

1.網址:http://mepopedia.com/~css104-2a/hw01/hw01-103xxxxxxx
2.設計概念與製作心得：
3.何謂HTML、DIV及CSS
4.附上至少一個覺得設計很有質感的網站，並說明原因
5.期待這門課的學習成果與收穫為何?

[hr]
範例：
http://mepopedia.com/~web103-2a/hw01/hw01-102/
(1) http://mepopedia.com/~web102-c/hw01/hw01-1015445243/
(2) http://mepopedia.com/~web103-2a/hw01/hw01-1025445058/
(3) http://mepopedia.com/~web103-2a/hw01/hw01-1025445178/
(4) http://mepopedia.com/~web103-2a/hw01/hw01-1025445073/
http://mepopedia.com/forum/read.php?1651,42170

[hr]

29. 上課影音



2015 03 05作業一課堂講解
http://youtu.be/TnaMIVYyf4Y

]]> JinJin 104-2《中國》竹視傳二A-進階網頁設計 Tue, 31 May 2016 21:29:43 +0800 http://mepopedia.com/forum/read.php?2560,79946,79946#msg-79946 [講義] 進階網頁設計-單元課程整理 (no replies) http://mepopedia.com/forum/read.php?2560,79946,79946#msg-79946
  1. 1. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明
  2. 2. 學長姊範例
  3. 3. 2015/5/28上課影音
  4. 4. jQuery動態換頁效果作業說明
  5. 5. 作業說明
  6. 6. 企劃大綱
  7. 7. 說明
  8. 8. 回覆項目
  9. 9. 評分標準
  10. 10. jQuery動態網頁初探講義
  11. 11. jQuery動態網頁初探作業說明影音
  12. 12. 作業步驟
  13. 13. 網頁美感排版設計參考講義
  14. 14. 設計目的
  15. 15. 設計主題
  16. 16. 製作步驟
  17. 17. 注意事項
  18. 18. Adobe Creative Cloud
  19. 19. 作業繳交
  20. 20. 上課影音
  21. 21. 期中作業說明
  22. 22. HTML與CSS練習--內頁實作篇--其他頁面完成
  23. 22.1 作業說明
  24. 22.2 作業步驟
  25. 23. HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果作業說明
  26. 23.1 作業說明
  27. 23.2 作業步驟
  28. 24. HTML與CSS練習--首頁實作篇作業說明
  29. 24.1 作業目的
  30. 24.2 作業說明
  31. 24.3 作業步驟
  32. 24.4 學長姐範例
  33. 25. 網頁基礎複習
  34. 26. 課堂範例
  35. 27. 盒子模型／區塊模型（Box Model）
  36. 28. 作業說明
  37. 29. 上課影音
  38. 30. [作業01] DIV與CSS複習--以色塊為主的基本單欄網頁版型
  39. 31. [作業02] HTML與CSS練習--首頁實作篇
  40. 32. [作業03] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果
  41. 33. [作業04] HTML與CSS練習-- 內頁實作篇--其他頁面完成
  42. 34. [期中作業] HTML與CSS練習--網站實作
  43. 35. [作業05] 網頁美感排版設計
  44. 36. [作業06] jQuery動態網頁初探-fadein
  45. 37. [ 作業07] jQuery動態換頁效果
  46. 38. [作業08] HTML/CSS/jQuery物件小動畫、燈箱效果
  47. 39. [期末作業] 專題網站設計
進階網頁設計延續網頁設計html+css的製作方式
加入css3的進階語法，以及不同的版型練習
並深度賞析現有網站的設計風格，養成網頁美感分析的能力

期末作業以分組製作動態網站，以參加網站新人王為目標

每個單元皆會有講義整理，搭配課後練習作業，講義內有語法及影音複習檔，供同學課後複習，請善加利用。

[hr]

30. [作業01] DIV與CSS複習--以色塊為主的基本單欄網頁版型


1.[url]http://mepopedia.com/forum/read.php?2428,74366[/url]

2.作業參考
http://mepopedia.com/~web103-2a/hw01/hw01-102/
(1) http://mepopedia.com/~web102-c/hw01/hw01-1015445243/
(2) http://mepopedia.com/~web103-2a/hw01/hw01-1025445058/
(3) http://mepopedia.com/~web103-2a/hw01/hw01-1025445178/
(4) http://mepopedia.com/~web103-2a/hw01/hw01-1025445073/

[hr]

31. [作業02] HTML與CSS練習--首頁實作篇


1.[url=http://mepopedia.com/forum/read.php?804,43670][講義] HTML與CSS練習--首頁實作篇[/url]

2.作業參考
http://mepopedia.com/~web102-c/hw03/hw03/
(1) http://mepopedia.com/~web102-c/midterm/midterm-1015445215/
(2) http://mepopedia.com/~web102-c/midterm/midterm-1015445212/
(3) http://mepopedia.com/~web102-c/midterm/midterm-1015445219
(4) http://mepopedia.com/~web103-2a/hw02/hw02-1025445205/

[hr]

32. [作業03] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果


1.[url=http://mepopedia.com/forum/read.php?804,44612][講義] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果 [/url]

2.作業參考
http://mepopedia.com/~jinjin/web/hw04a/works.html
(1) http://mepopedia.com/~web103-2b/hw03/hw03-1025445005/
(2) http://mepopedia.com/~web103-2a/hw03/hw03-1025445205/222222.html

[hr]

33. [作業04] HTML與CSS練習-- 內頁實作篇--其他頁面完成


1.[url=http://mepopedia.com/forum/read.php?804,44848 ][講義] HTML與CSS練習--內頁實作篇--其他頁面完成與CSS3初探[/url]

2.作業參考
http://mepopedia.com/~jinjin/web/hw05a/link.html
(1) http://mepopedia.com/~web103-2a/hw04/hw04-1025445001/links.html
(2) http://mepopedia.com/~web103-2b/hw04/hw04-1025445005/04
(3) http://mepopedia.com/~web103-2b/hw04/hw04-1025445062/link.html


[hr]

34. [期中作業] HTML與CSS練習--網站實作



作業參考
(1) http://mepopedia.com/~web103-2b/hw04/hw04-1025445005/indexD.html
(2) http://mepopedia.com/~web102-a/midterm/hw03_1015445024/
(3) http://mepopedia.com/~web102-c/midterm/midterm-1015445219

[hr]

35. [作業05] 網頁美感排版設計


1.[url=http://mepopedia.com/forum/read.php?804,75770][講義] 網頁美感排版設計[/url]

2.作業參考
(1)
(1)原網站名稱及網址： 高雄市教育部網站-英文版
作業網址：http://mepopedia.com/~web103-2b/hw05/hw05-1025445005
(2)參考網站網址與網站名稱： OK-Studios http://www.ok-studios.de/home/

(2)
網站網址: http://mepopedia.com/~web103-2a/hw05/hw05-1025445064/
(1)原網站名稱及網址：http://www.dill.com.tw/hot-cn.html
(2)參考網站網址與網站名稱： http://www.organic-restaurant.com.tw/

(3)
作業網址：http://mepopedia.com/~web103-2a/hw05/hw05-1025445040/
(1)原網站名稱及網址：http://www.taiwancoffee.org/index.asp

(4)
作業網址：http://mepopedia.com/~web103-2a/hw05/hw05-1025445073
(1)原網站名稱及網址：http://www.tianzicake.com/chan-pin-jie-shao/chang-tiao-mi-yue-dan-gao/
(2)參考網站網址與網站名稱： http://www.devildessert.com/

[hr]

36. [作業06] jQuery動態網頁初探-fadein


1.[url=http://mepopedia.com/forum/read.php?1497,45619 ][講義] jQuery講義 [/url]

2.作業參考
(1) http://mepopedia.com/~web103-2b/hw06/hw06-1025445005/
(2) http://mepopedia.com/~web103-2a/hw06/hw06-1025445205/

[hr]

37. [ 作業07] jQuery動態換頁效果


1.[url=http://mepopedia.com/forum/read.php?804,76063 ][講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 [/url]

2.作業參考
(1) http://mepopedia.com/~web103-2b/hw07/hw07-1025445005


[hr]

38. [作業08] HTML/CSS/jQuery物件小動畫、燈箱效果



1.[url=http://mepopedia.com/forum/read.php?804,46224 ][講義]FunTaipei HTML/CSS/jQuery 動態效果分析 [/url]
作業參考
(1) http://mepopedia.com/~web103-2b/hw08/hw08-1025445005/
(2) http://mepopedia.com/~web103-2b/hw08/hw08-1025445062/
(3) http://mepopedia.com/~web102-c/hw08/hw08-1015445243/
(4) http://mepopedia.com/~web102-c/hw08/hw08-1015445218/
(5) http://mepopedia.com/~web102-c/hw08/hw08-1015445231/
(6) http://mepopedia.com/~web102-a/hw08/hw08-1015445006/
(7) http://mepopedia.com/~web102-a/hw08/hw07-1015445001/
(8) http://mepopedia.com/~web102-c/hw08/hw08-1015445219/


[hr]

39. [期末作業] 專題網站設計


1.[url=http://mepopedia.com/forum/read.php?2428,75914 ][期末作業說明] 專題網站製作--以網站新人王為例[/url]

2.作業參考
節識臺灣 http://mepopedia.com/~web102-a/final/final-1015445002/taiwan
台灣健康五小吃 http://mepopedia.com/~web103-2b/final/final-1025445005
剝皮寮介紹 http://mepopedia.com/~web102-a/final/0519BPL/0519BPL/Bopiliao.html
黃鶯出谷 絕妙鶯歌 http://mepopedia.com/~web102-c/final/final-1015445218
平溪線http://mepopedia.com/~web102-c/final/final-1015445215
ReStart HZOO 重新啟動 http://mepopedia.com/~web103-2a/final/final-1025445043
相府香城(板橋府中介紹) http://mepopedia.com/~web103-2a/final/final-1025445055/
羅東遊 http://mepopedia.com/~web103-2b/final/final-1025445044
台灣國家公園 http://mepopedia.com/~web103-2b/final/final-1025445029
第四度空間 http://mepopedia.com/~web103-2a/final/final-1025445205/
樂遊風城 http://mepopedia.com/~web103-2c/final/final-1025445015
珍動台灣_Rare animals in Taiwan http://mepopedia.com/~web103-2c/final/final-1025445117]]> JinJin 104-2《中國》竹視傳二A-進階網頁設計 Sun, 14 Feb 2016 01:29:09 +0800