JinJin 的視覺設計專區 - 105-2《中國》竹視傳二B-進階網頁設計 http://mepopedia.com/forum/list.php?2644 Wed, 29 Apr 2026 12:26:47 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?2644,84955,84955#msg-84955 [作業8] Free templates 試做 (36 replies) http://mepopedia.com/forum/read.php?2644,84955,84955#msg-84955
[講義] Free templates及LongPage版型製作初探
http://mepopedia.com/forum/read.php?804,84881

不同網站中之不同版型，挑選一適合期末作業主題的版型
以期末作業主題，結合選擇之版型，嘗試製作，

製作完成後上傳到hw08資料夾

並請回答:

作業網址：http://mepopedia.com/~css105-2b/hw08/hw08-1045445XXX

(1) 參考之版型網址：
(2) 設計主題 / 風格
(2) 遇到之問題:
(3) 製作時間:
(4) 製作心得:]]> JinJin 105-2《中國》竹視傳二B-進階網頁設計 Sun, 25 Jun 2017 21:24:08 +0800 http://mepopedia.com/forum/read.php?2644,84771,84771#msg-84771 [作業07] HTML/CSS/jQuery 物件小動畫、燈箱效果 (45 replies) http://mepopedia.com/forum/read.php?2644,84771,84771#msg-84771
  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.將資料夾命名為 hw0-7學號，以ＦＴＰ上傳至hw08資料夾
作業網址為http://mepopedia.com/~css105-2b/hw07/hw07-1045445XXX

並請回覆：

(1)作業網址：http://mepopedia.com/~css105-2b/hw07/hw07-1045445XXX
(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-2a/hw08/hw08-1035445073/
http://mepopedia.com/~css104-2b/hw08/hw08-1035445209/
http://mepopedia.com/~css104-2b/hw08/hw08-1035445218/
http://mepopedia.com/~css104-2b/hw08/hw08-1035445191/
http://mepopedia.com/~css104-2c/hw08/ex/0519BPL


[hr]

3. 2015/5/28上課影音


HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
]]> JinJin 105-2《中國》竹視傳二B-進階網頁設計 Sun, 25 Jun 2017 21:28:17 +0800 http://mepopedia.com/forum/read.php?2644,84749,84749#msg-84749 [期末作業] 專題網站設計 (27 replies) http://mepopedia.com/forum/read.php?2644,84749,84749#msg-84749
  1. 1. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明
  2. 2. 學長姊範例
  3. 3. 2015/5/28上課影音
  4. 4. 作業說明
  5. 5. 企劃大綱
  6. 6. 說明
  7. 7. 回覆項目
  8. 8. 評分標準

4. 作業說明


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

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

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

[hr]

5. 企劃大綱


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

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

[hr]

6. 說明


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

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

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

[hr]

7. 回覆項目


1.作業網址：http://mepopedia.com/~css105-2b/final/final-1045445XXX

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

[hr]
企劃大綱

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

[hr]

8. 評分標準


1.視覺美感
2.內容技巧，是否有應用所學技巧
3.網頁架構（ＨＴＭＬ＋ＣＳＳ）網頁效能 jQuery
4.網頁內容完整性、原創性
4.工作分配之項目

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

若寬度太寬，請使用以下語法，將圖片網址帶入：
<img width="100%" src="圖片網址" border="0"> ]]> JinJin 105-2《中國》竹視傳二B-進階網頁設計 Sun, 25 Jun 2017 23:59:40 +0800 http://mepopedia.com/forum/read.php?2644,84679,84679#msg-84679 [ 作業06] jQuery動態換頁效果 (45 replies) http://mepopedia.com/forum/read.php?2644,84679,84679#msg-84679
  1. 1. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明
  2. 2. 學長姊範例
  3. 3. 2015/5/28上課影音
  4. 4. 作業說明
  5. 5. 企劃大綱
  6. 6. 說明
  7. 7. 回覆項目
  8. 8. 評分標準
  9. 9. jQuery動態換頁效果作業說明

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


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

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

2.將資料夾命名為 hw06-學號，以ＦＴＰ上傳至hw06資料夾
作業網址為http://mepopedia.com/~css105-2b/hw06/hw06-1045445XXX

並請回覆：

(1)作業網址：http://mepopedia.com/~css105-2b/hw06/hw06-1045445XXX
(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/
4. http://mepopedia.com/~css104-2a/hw07/hw07-1035445145/
5. http://mepopedia.com/~css104-2b/hw07/hw07-1035445209/
6. http://mepopedia.com/~css104-2b/hw07/hw07-1035445218/
7. http://mepopedia.com/~css104-2b/hw07/hw07-1035445191/
[hr]
請於規定時間準時繳交作業。
[hr]]]> JinJin 105-2《中國》竹視傳二B-進階網頁設計 Sun, 25 Jun 2017 21:51:19 +0800 http://mepopedia.com/forum/read.php?2644,84397,84397#msg-84397 [作業05] jQuery動態網頁初探 -fadein (38 replies) http://mepopedia.com/forum/read.php?2644,84397,84397#msg-84397
  1. 1. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明
  2. 2. 學長姊範例
  3. 3. 2015/5/28上課影音
  4. 4. 作業說明
  5. 5. 企劃大綱
  6. 6. 說明
  7. 7. 回覆項目
  8. 8. 評分標準
  9. 9. jQuery動態換頁效果作業說明
  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.直接以期中作業首頁或某一頁面繳交即可。
作業網址為http://mepopedia.com/~css104-2b/midterm/midterm-1045445XXX 。

並請回覆：

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

[hr]
請於規定時間準時繳交作業，逾期不後。
[hr]]]> JinJin 105-2《中國》竹視傳二B-進階網頁設計 Sun, 25 Jun 2017 21:43:56 +0800 http://mepopedia.com/forum/read.php?2644,84235,84235#msg-84235 [作業04]網頁排版設計-以Photoshop製作Mockup與Prototype (15 replies) http://mepopedia.com/forum/read.php?2644,84235,84235#msg-84235
  1. 1. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明
  2. 2. 學長姊範例
  3. 3. 2015/5/28上課影音
  4. 4. 作業說明
  5. 5. 企劃大綱
  6. 6. 說明
  7. 7. 回覆項目
  8. 8. 評分標準
  9. 9. jQuery動態換頁效果作業說明
  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


[講義] 網頁設計的美學原則：http://mepopedia.com/forum/read.php?804,42883
[講義] 以Photoshop製作網頁版型：http://mepopedia.com/forum/read.php?804,43354

[hr]

14. 設計目的


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

15. 設計主題


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


[hr]

16. 製作步驟


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

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

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

作業網址：http://mepopedia.com/~css105-2b/hw04/hw04-1045445XXX

(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.將製作好之圖檔，置入dreamweaver，製作連結提案模擬，上傳網址為
http://mepopedia.com/~css105-2b/hw04/hw04-1045445XXX

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


[hr]
以Photoshop製作網頁版型Mockup與Prototype
範例：http://mepopedia.com/~jinjin/TaiwanMuseum/

作業參考
(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/


作業網址:http://mepopedia.com/~css104-2b/hw05/hw05-1035445113
(1)原本網站網址及主題：中國科技大學新竹校區 http://ccnt1.cute.edu.tw/hc/
(2)參考網站網址與網站名稱：http://www.u-tokyo.ac.jp/en/index.html


作業網址：http://mepopedia.com/~css104-2b/hw05/hw05-1035445194/
1.首頁(右上) 2. 古蹟巡禮 3.景點簡介
(1)原本網站網站網址及主題： 新竹市觀光旅遊網 http://tourism.hccg.org.tw/index.php
(2)參考網站網址與網站名稱： 歐嬤德式美食 http://www.oma-de.com/

[hr]

20. 上課影音


網頁視覺提案作業講解



[hr]
上傳Adobe CC 教學



[hr]

截圖軟體
Awesome Screenshot


[hr]]]> JinJin 105-2《中國》竹視傳二B-進階網頁設計 Sun, 25 Jun 2017 23:06:31 +0800 http://mepopedia.com/forum/read.php?2644,84231,84231#msg-84231 [期中作業] HTML與CSS應用--網站實作 (45 replies) http://mepopedia.com/forum/read.php?2644,84231,84231#msg-84231
  1. 1. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明
  2. 2. 學長姊範例
  3. 3. 2015/5/28上課影音
  4. 4. 作業說明
  5. 5. 企劃大綱
  6. 6. 說明
  7. 7. 回覆項目
  8. 8. 評分標準
  9. 9. jQuery動態換頁效果作業說明
  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/~css105-2b/midterm/midterm-1045445XXX 。

並請回覆：

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


[hr]
請於期中考週完成繳交，準時繳交作業，逾期不後。
[hr]]]> JinJin 105-2《中國》竹視傳二B-進階網頁設計 Mon, 24 Apr 2017 01:17:39 +0800 http://mepopedia.com/forum/read.php?2644,84145,84145#msg-84145 [作業03] HTML與CSS練習--1.資料整理--以DIV製作表格效果。 2.其他頁面完成 (42 replies) http://mepopedia.com/forum/read.php?2644,84145,84145#msg-84145
  1. 1. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明
  2. 2. 學長姊範例
  3. 3. 2015/5/28上課影音
  4. 4. 作業說明
  5. 5. 企劃大綱
  6. 6. 說明
  7. 7. 回覆項目
  8. 8. 評分標準
  9. 9. jQuery動態換頁效果作業說明
  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. 請以以下兩個講義完成至少兩頁
  23. 22.1 作業說明
  24. 22.2 作業步驟

22. 請以以下兩個講義完成至少兩頁


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

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

[hr]

1. 作業說明

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

[hr]

2. 作業步驟

1.參考範例
http://mepopedia.com/~jinjin/web/hw04a/works.html
http://mepopedia.com/~jinjin/web/hw05a/link.html
2.延續作業02的內容
3.請以設計質感與創新設計為主要考量
4.將ＨＴＭＬ與ＣＳＳ語法分別貼上後，修改ＨＴＭＬ與ＣＳＳ語法。
5.將資料夾命名為 hw03-學號，以ＦＴＰ上傳至hw03資料夾 ，請延續作業二之內容存放於同意資料夾，至少共三個html檔案。
作業網址為http://mepopedia.com/~css105-2b/hw03/hw03-1045445XXX/works.html (此檔名可自行設定)

並請回覆：

(1)作業網址：http://mepopedia.com/~css105-2b/hw03/hw03-1045445XXX
(2)本頁設計重點：
(3)製作心得：
學號

[hr]
請於規定時間準時繳交作業，逾期不後。
[hr]]]> JinJin 105-2《中國》竹視傳二B-進階網頁設計 Sun, 25 Jun 2017 21:53:57 +0800 http://mepopedia.com/forum/read.php?2644,84101,84101#msg-84101 [作業02] HTML與CSS練習-- 首頁實作篇 (41 replies) http://mepopedia.com/forum/read.php?2644,84101,84101#msg-84101
  1. 1. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明
  2. 2. 學長姊範例
  3. 3. 2015/5/28上課影音
  4. 4. 作業說明
  5. 5. 企劃大綱
  6. 6. 說明
  7. 7. 回覆項目
  8. 8. 評分標準
  9. 9. jQuery動態換頁效果作業說明
  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. 請以以下兩個講義完成至少兩頁
  23. 22.1 作業說明
  24. 22.2 作業步驟
  25. 23. HTML與CSS練習--首頁實作篇作業說明
  26. 23.1 作業目的
  27. 23.2 作業說明
  28. 23.3 作業步驟
  29. 23.4 學長姐範例

23. 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)設定滑鼠移過的效果，其他頁面將陸續完成。
3.因後續作業須持續完成其他它作業，請先設定好一特定主題後開始製作，並考慮其設計美感以及配色、風格與主題搭配之關係。

[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/~css105-2b/hw02/hw02-1045445XXX 。

並請回覆：

(1)作業網址：http://mepopedia.com/~css105-2b/hw02/hw02-1045445XXX
(2)網站主題/網站名稱：
(3)分類項目(導覽列）:
(4)對象：
(5)色彩計畫：
(6)風格設定、網頁看點、預期成效：
(7)製作心得：


[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]]> JinJin 105-2《中國》竹視傳二B-進階網頁設計 Sun, 25 Jun 2017 21:47:55 +0800 http://mepopedia.com/forum/read.php?2644,84015,84015#msg-84015 [作業01] DIV與CSS複習--以色塊為主的基本單欄網頁版型（新增CSS3練習) (43 replies) http://mepopedia.com/forum/read.php?2644,84015,84015#msg-84015
  1. 1. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明
  2. 2. 學長姊範例
  3. 3. 2015/5/28上課影音
  4. 4. 作業說明
  5. 5. 企劃大綱
  6. 6. 說明
  7. 7. 回覆項目
  8. 8. 評分標準
  9. 9. jQuery動態換頁效果作業說明
  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. 請以以下兩個講義完成至少兩頁
  23. 22.1 作業說明
  24. 22.2 作業步驟
  25. 23. HTML與CSS練習--首頁實作篇作業說明
  26. 23.1 作業目的
  27. 23.2 作業說明
  28. 23.3 作業步驟
  29. 23.4 學長姐範例
  30. 24. 網頁基礎複習
  31. 25. 課堂範例
  32. 26. 盒子模型／區塊模型（Box Model）
  33. 27. 作業說明
  34. 28. 上課影音
經過了一個寒假，為了讓大家回復記憶，請先複習基礎的網頁設計概念

24. 網頁基礎複習


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

[hr]

25. 課堂範例


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

[hr]

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

27. 作業說明


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

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

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

圓角：border-radius: 20px; （請自行放入適當位置並改變數值）
區塊陰影：box-shadow:5px 5px 5px #000000;（請自行放入適當位置並改變數值）
文字陰影：text-shadow: 1px 1px 1px #000000;（請自行放入適當位置並改變數值）
透明度： rgba(102,153,255,0.5)
RGBA是代表Red（红色） Green（綠色） Blue（藍色）和 Alpha，Alpha 0代表透明、1代表不透明，請自行改變數值）
透明度：opacity: 0.5;（設定的元素有50%的透明度，請自行放入適當位置並改變數值）
線性漸層：background:-webkit-gradient(linear, 80% 20%, 10% 21%, from(#866400), to(#FF4E28));（請自行放入適當位置並改變數值）
放射漸層：background:-webkit-gradient(radial, 165 0, 0, 220 -257, 465, from(#866400), to(#FF4E28));（請自行放入適當位置並改變數值）
漸層語法:http://mepopedia.com/forum/read.php?844,17157


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

並回覆於此篇文章

1.網址:http://mepopedia.com/~css105-2b/hw01/hw01-104xxxxxxx
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/~css104-2a/hw01/hw01-1035445130/
(3) http://mepopedia.com/~css104-2b/hw01/hw01-1035445170/
(4) http://mepopedia.com/~css104-2b/hw01/hw01-1035445209/
(5) http://mepopedia.com/~css104-2c/hw01/hw01-1035445057/
(6) http://mepopedia.com/~css104-2c/hw01/hw01-1035443128/


[hr]

28. 上課影音



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

]]> JinJin 105-2《中國》竹視傳二B-進階網頁設計 Sun, 25 Jun 2017 21:40:25 +0800