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

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


請參考
[講義]FunTaipei HTML/CSS/jQuery 動態效果分析
http://mepopedia.com/forum/read.php?804,46224

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

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

並請回覆：

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

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

2. 學長姊範例


http://mepopedia.com/~web102-c/hw08/hw08-1015445243/
http://mepopedia.com/~web102-c/hw08/hw08-1015445218/
http://mepopedia.com/~web102-c/hw08/hw08-1015445231/
http://mepopedia.com/~web102-a/hw08/hw08-1015445006/
http://mepopedia.com/~web102-a/hw08/hw07-1015445001/
http://mepopedia.com/~web102-c/hw08/hw08-1015445219/
http://mepopedia.com/~web102-c/hw08/hw08-1015445212/1.html
http://mepopedia.com/~web102-a/final/0519BPL/0519BPL/Bopiliao.html

[hr]

3. 2015/5/28上課影音


HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
]]> JinJin 103-2《中國》竹視傳二A-進階網頁設計 Fri, 03 Jul 2015 01:08:32 +0800 http://mepopedia.com/forum/read.php?2428,76078,76078#msg-76078 [ 作業07] jQuery動態換頁效果 (59 replies) http://mepopedia.com/forum/read.php?2428,76078,76078#msg-76078
  1. 1. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明
  2. 2. 學長姊範例
  3. 3. 2015/5/28上課影音
  4. 4. jQuery動態換頁效果作業說明

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


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

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

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

並請回覆：

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

[hr]
請於規定時間準時繳交作業。
[hr]]]> JinJin 103-2《中國》竹視傳二A-進階網頁設計 Fri, 03 Jul 2015 01:06:09 +0800 http://mepopedia.com/forum/read.php?2428,75966,75966#msg-75966 [期末作業] 專 題網站設計 (19 replies) http://mepopedia.com/forum/read.php?2428,75966,75966#msg-75966
  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

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

[hr]

6. 企劃大綱


請於第十三週5/20/21前回覆
企劃大綱的內容製作

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

[hr]

7. 說明


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

第十八週6/24/25上課前製作完成，課堂討論評分
期末若未出席及繳交作業，期末成績以零分計算

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

[hr]

8. 回覆項目


1.作業網址：

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

[hr]
企劃大綱

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

9. 評分標準


1.內容技巧，是否有應用所學技巧
2.視覺美感
3.網頁架構（ＨＴＭＬ＋ＣＳＳ）網頁效能
4.工作分配之項目]]> JinJin 103-2《中國》竹視傳二A-進階網頁設計 Thu, 02 Jul 2015 18:22:57 +0800 http://mepopedia.com/forum/read.php?2428,75962,75962#msg-75962 [作業06] jQuery動態網頁初探-fadein (57 replies) http://mepopedia.com/forum/read.php?2428,75962,75962#msg-75962
  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/~web103-2a/hw06/hw06-1025445XXX 。

並請回覆：

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

[hr]
請於規定時間準時繳交作業，逾期不後。
[hr]]]> JinJin 103-2《中國》竹視傳二A-進階網頁設計 Fri, 03 Jul 2015 01:03:22 +0800 http://mepopedia.com/forum/read.php?2428,75914,75914#msg-75914 [期末作業說明] 專題網站製作--以網站新人王為例 (no replies) http://mepopedia.com/forum/read.php?2428,75914,75914#msg-75914
  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. 參考範例
[期末作業說明] 專題網站製作--以網站新人王為例[hr]

13. 參考網址


1.2014-第13屆新人王網站設計大賽 http://2014.netking.tw 發掘台灣新亮點
2.2013-第12屆新人王網站設計大賽 http://2013.netking.tw 台灣讚起來，讓全世界看見（行銷台灣）
3.2012-第11屆新人王網站設計大賽 http://2012.netking.tw 戀戀故鄉，點亮台灣
4.2011-第10屆新人王網站設計大賽 http://2011.netking.tw 建國一百，幸福台灣
5.2010-第9屆新人王網站設計大賽 http://2010.netking.tw 發掘台灣的故事
[hr]

14. 期末作業上課說明影片


期末作業講說影片
http://youtu.be/4w9Y5HlxXQU



[hr]

15. 作業說明


請參考歷屆競賽說明：http://2013.netking.tw/competition.html

1.含首頁與內頁至少需10頁以上
2.主題需與台灣有關
3.內容需原創（包含照片，插畫，文案）（如有部分取材自他處，請務必取得授權並註明出處）
4.加強內容豐富度與設計感
5.請盡量以新的網頁技術製作(HTML+CSS)
6.可以團體製作，一組不得超過六人，每人需有詳細的工作分配與製作項目

[hr]

16. 評分標準


1.視覺美感
2.CSS設計
3.動態效果

[hr]

17. 進度規劃


1.作業講解/資料搜集
2.企劃大綱(主題、內容大綱、資料蒐集、歷屆得獎分析、組員名單)
範例http://mepopedia.com/forum/read.php?1651,45589

3.架構圖/企劃/實地訪查
4.版型圖稿、版型製作
5.HTML/CSS/jQuery 物件小動畫、燈箱效果
6.期末作業討論
7.期末作業繳交，完整企畫書與作品


[hr]

18. 參考範例


節識臺灣 http://mepopedia.com/~web102-a/final/final-1015445002/taiwan
剝皮寮介紹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
心台中 Heart Taichung http://mepopedia.com/~web102-c/final/final-1015445243/]]> JinJin 103-2《中國》竹視傳二A-進階網頁設計 Mon, 11 May 2015 22:13:46 +0800 http://mepopedia.com/forum/read.php?2428,75790,75790#msg-75790 [作業05] 網頁美感排版設計 (44 replies) http://mepopedia.com/forum/read.php?2428,75790,75790#msg-75790
  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. 參考範例
  19. 19. 網頁美感排版設計參考講義
  20. 20. 設計目的
  21. 21. 設計主題
  22. 22. 製作步驟
  23. 23. 注意事項
  24. 24. Adobe Creative Cloud
  25. 25. 作業繳交
  26. 26. 上課影音

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


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

[hr]

20. 設計目的

1.解讀與思考設計主題如何透過網頁形式表現
2.了解網頁實際內容與細節
3.觀察優良網站的設計原則
4.增強網頁排版的能力與技巧

21. 設計主題

請選擇一需要修改的網站，並列出需要修改的原因
或以科技部，或文化部等網站為修改範例
http://www.most.gov.tw
http://www.moc.gov.tw

蒐集優良參考範例，並提出修改方案
以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]

22. 製作步驟


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]

23. 注意事項


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

[hr]

24. Adobe Creative Cloud


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

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

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

[hr]

25. 作業繳交


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

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

[hr]

26. 上課影音


網頁視覺提案作業講解



[hr]
上傳Adobe CC 教學



[hr]]]> JinJin 103-2《中國》竹視傳二A-進階網頁設計 Thu, 11 Jun 2015 23:38:36 +0800 http://mepopedia.com/forum/read.php?2428,75133,75133#msg-75133 [期中作業] HTML與CSS練習--網站實作 (57 replies) http://mepopedia.com/forum/read.php?2428,75133,75133#msg-75133
  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. 參考範例
  19. 19. 網頁美感排版設計參考講義
  20. 20. 設計目的
  21. 21. 設計主題
  22. 22. 製作步驟
  23. 23. 注意事項
  24. 24. Adobe Creative Cloud
  25. 25. 作業繳交
  26. 26. 上課影音
  27. 27. 期中作業說明
  28. 27.1 範例

27. 期中作業說明


請參考期中前之講義製作

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

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

並請回覆：

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

學號

[hr]

1. 範例



http://mepopedia.com/~web102-a/midterm/hw03_1015445024/
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/
[hr]
請於規定時間準時繳交作業，本作業佔學期分數30%，逾期不後。
[hr]]]> JinJin 103-2《中國》竹視傳二A-進階網頁設計 Thu, 23 Apr 2015 08:56:05 +0800 http://mepopedia.com/forum/read.php?2428,75068,75068#msg-75068 [作業04] HTML與CSS練習-- 內頁實作篇--其他頁面完成 (52 replies) http://mepopedia.com/forum/read.php?2428,75068,75068#msg-75068
  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. 參考範例
  19. 19. 網頁美感排版設計參考講義
  20. 20. 設計目的
  21. 21. 設計主題
  22. 22. 製作步驟
  23. 23. 注意事項
  24. 24. Adobe Creative Cloud
  25. 25. 作業繳交
  26. 26. 上課影音
  27. 27. 期中作業說明
  28. 27.1 範例
  29. 28. HTML與CSS練習--內頁實作篇--其他頁面完成
  30. 28.1 作業說明
  31. 28.2 作業步驟

28. 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/~web103-2a/hw04/hw04-1025445XXX/link.html (此檔名可自行設定)


並請回覆：

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

[hr]
請於規定時間準時繳交作業，逾期不後。
[hr]]]> JinJin 103-2《中國》竹視傳二A-進階網頁設計 Fri, 03 Jul 2015 00:53:46 +0800 http://mepopedia.com/forum/read.php?2428,74966,74966#msg-74966 [作業03] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果 (51 replies) http://mepopedia.com/forum/read.php?2428,74966,74966#msg-74966
  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. 參考範例
  19. 19. 網頁美感排版設計參考講義
  20. 20. 設計目的
  21. 21. 設計主題
  22. 22. 製作步驟
  23. 23. 注意事項
  24. 24. Adobe Creative Cloud
  25. 25. 作業繳交
  26. 26. 上課影音
  27. 27. 期中作業說明
  28. 27.1 範例
  29. 28. HTML與CSS練習--內頁實作篇--其他頁面完成
  30. 28.1 作業說明
  31. 28.2 作業步驟
  32. 29. HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果作業說明
  33. 29.1 作業說明
  34. 29.2 作業步驟

29. 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/~web103-2a/hw03/hw03-1025445XXX/works.html (此檔名可自行設定)

並請回覆：

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

[hr]
請於規定時間準時繳交作業，逾期不後。
[hr]]]> JinJin 103-2《中國》竹視傳二A-進階網頁設計 Fri, 03 Jul 2015 00:14:02 +0800 http://mepopedia.com/forum/read.php?2428,74596,74596#msg-74596 [作業02] HTML與CSS練習--首頁實作篇 (55 replies) http://mepopedia.com/forum/read.php?2428,74596,74596#msg-74596
  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. 參考範例
  19. 19. 網頁美感排版設計參考講義
  20. 20. 設計目的
  21. 21. 設計主題
  22. 22. 製作步驟
  23. 23. 注意事項
  24. 24. Adobe Creative Cloud
  25. 25. 作業繳交
  26. 26. 上課影音
  27. 27. 期中作業說明
  28. 27.1 範例
  29. 28. HTML與CSS練習--內頁實作篇--其他頁面完成
  30. 28.1 作業說明
  31. 28.2 作業步驟
  32. 29. HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果作業說明
  33. 29.1 作業說明
  34. 29.2 作業步驟
  35. 30. HTML與CSS練習--首頁實作篇作業說明
  36. 30.1 作業目的
  37. 30.2 作業說明
  38. 30.3 作業步驟
  39. 30.4 學長姐範例

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


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

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/~web103-2a/hw02/hw02-1025445XXX 。

並請回覆：

(1)作業網址：
(2)網站主題/網站名稱：
(3)分類項目:
(4)對象：
(5)色彩計畫：
(6)風格設定、網頁看點、預期成效：
(7)請整理以下數值：
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(8)製作心得：
學號

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

4. 學長姐範例


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 103-2《中國》竹視傳二A-進階網頁設計 Fri, 03 Jul 2015 00:10:54 +0800 http://mepopedia.com/forum/read.php?2428,74366,74366#msg-74366 [作業01] DIV與CSS複習--以色塊為主的基本單欄網頁版型 (48 replies) http://mepopedia.com/forum/read.php?2428,74366,74366#msg-74366
  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. 參考範例
  19. 19. 網頁美感排版設計參考講義
  20. 20. 設計目的
  21. 21. 設計主題
  22. 22. 製作步驟
  23. 23. 注意事項
  24. 24. Adobe Creative Cloud
  25. 25. 作業繳交
  26. 26. 上課影音
  27. 27. 期中作業說明
  28. 27.1 範例
  29. 28. HTML與CSS練習--內頁實作篇--其他頁面完成
  30. 28.1 作業說明
  31. 28.2 作業步驟
  32. 29. HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果作業說明
  33. 29.1 作業說明
  34. 29.2 作業步驟
  35. 30. HTML與CSS練習--首頁實作篇作業說明
  36. 30.1 作業目的
  37. 30.2 作業說明
  38. 30.3 作業步驟
  39. 30.4 學長姐範例
  40. 31. 網頁基礎複習
  41. 32. 課堂範例
  42. 33. 盒子模型／區塊模型（Box Model）
  43. 34. 作業說明
  44. 35. 上課影音
經過了一個寒假，為了讓大家回復記憶，請先複習基礎的網頁設計概念

31. 網頁基礎複習


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

[hr]

32. 課堂範例


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

[hr]

33. 盒子模型／區塊模型（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]

34. 作業說明


參照講義
[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/~web103-2a/hw01/hw01-102xxxxxxx
2.設計概念與製作心得：
3.何謂HTML、DIV及CSS
4.附上至少一個覺得設計很有質感的網站，並說明原因
5.期待這門課的學習成果與收穫為何?

[hr]
範例：
http://mepopedia.com/~web101-a/hw01/hw01-1006445002/
http://mepopedia.com/~web101-a/hw01/hw01-1006445010/
http://mepopedia.com/forum/read.php?1651,42170

[hr]

35. 上課影音



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

]]> JinJin 103-2《中國》竹視傳二A-進階網頁設計 Wed, 16 Mar 2016 20:33:16 +0800 http://mepopedia.com/forum/read.php?2428,74365,74365#msg-74365 [範例] HTML+CSS設計--網頁設計版型列表 (no replies) http://mepopedia.com/forum/read.php?2428,74365,74365#msg-74365 http://mepopedia.com/forum/read.php?804,16668

[hr]
http://mepopedia.com/~web103-c/hw01/hw01-1025445051/
http://mepopedia.com/~web103-c/hw01/hw01-1025445111/

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

http://mepopedia.com/~web100b/hw02/hw02-1001445055/
http://mepopedia.com/~web103-c/hw02/hw02-1025445036/
http://mepopedia.com/~web103-c/hw02/hw02-1025445141/

[hr]
3.利用Div標籤與CSS建立基本網頁版型--圖片篇
http://mepopedia.com/forum/read.php?804,16271

http://mepopedia.com/group/comparative/

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

1.透過CSS，以清單 ＜ul＞及＜li＞製作網頁導覽列
http://mepopedia.com/~jinjin/web/hw04/　（滑入僅文字變色的導覽列）
http://mepopedia.com/~jinjin/web/hw04-1/　（滑入底色變色及文字置中的導覽列）

2.以圖片按鈕製作的導覽列
http://mepopedia.com/~jinjin/web/hw04-2/　

[hr]
5.繞圖排文與推文按鈕的應用
http://mepopedia.com/forum/read.php?804,17878,17878

http://mepopedia.com/~jinjin/web/hw05/story.html　

[hr]
6.表格的製作
http://mepopedia.com/forum/read.php?804,18062

http://mepopedia.com/~jinjin/web/hw06-ex/

[hr]
7.以Float：浮動，製作雙欄網頁
http://mepopedia.com/forum/read.php?804,18255

http://mepopedia.com/~jinjin/web/hw07/


[hr]
期中作業--以單欄為主的網站設計
http://mepopedia.com/~web100b/midterm/midterm-1001445022/
http://mepopedia.com/~web100b/midterm/midterm-1001445042/


[hr]
期末作業--以雙欄為主的網站設計

http://mepopedia.com/~web100b/final/final-1001445022
http://mepopedia.com/~web100b/final/final-1001445042/
http://mepopedia.com/~web103-a/final/final-1025445055/


[hr]
網頁探索-切版練習與HTML+CSS設計
http://mepopedia.com/~web102-c/hw09/hw09-1-1015445218/

[hr]
期中作業--HTML與CSS3--網站實作
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/

[hr]
期末作業--專題分組網站設計
http://mepopedia.com/~web102-a/final/0519BPL/0519BPL/Bopiliao.html
http://mepopedia.com/~web102-a/final/final-1015445002/taiwan
http://mepopedia.com/~web102-c/final/final-1015445218/
http://mepopedia.com/~web102-c/final/final-1015445215/
http://mepopedia.com/~web102-c/final/final-1015445219/
http://mepopedia.com/~web102-a/final/fanil-YA%20SI/

http://ccnt1.cute.edu.tw/hphys/web/hphys/]]> JinJin 103-2《中國》竹視傳二A-進階網頁設計 Tue, 24 Feb 2015 22:58:37 +0800