JinJin 的視覺設計專區 - 106-2《中國》竹視傳二C-進階網頁設計 http://mepopedia.com/forum/list.php?2723 Wed, 29 Apr 2026 10:22:23 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?2723,88139,88139#msg-88139 [作業06] RWD網頁實作/列表頁/內容頁/Google Fonts網路中文字型應用 (31 replies) http://mepopedia.com/forum/read.php?2723,88139,88139#msg-88139
  1. 1. 參照講義製作
  2. 2. 參考範例
  3. 3. 作業說明
  4. 3.1 講義影音

1. 參照講義製作


moodle【講義11】RWD多頁網頁編輯 (二) 、【講義12】Google Fonts 中文網路字型應用

[hr]

2. 參考範例


請由ftp hw06下載

[hr]

3. 作業說明


1.請依上課範例版型修改。

2.設定好主題及網站風格。主題須為原創，不可使用他人作品。

3.本週進度：
延續作業五首頁內容，持續延伸：圖像列表頁及內容頁，可以期末作業主題製作。

(1)依主題製作圖像列表頁

(2)製作內容分頁
(3)使用Google Fonts 中文網路字型


4.上傳至hw06資料夾，並回覆於作業文章

(1).網址: ：http://mepopedia.com/~web106-2c/hw06/hw06-105ooooo

(2).主題、風格：

(3).設計概念與製作心得：


1. 講義影音

]]> JinJin 106-2《中國》竹視傳二C-進階網頁設計 Thu, 28 Jun 2018 11:38:45 +0800 http://mepopedia.com/forum/read.php?2723,88099,88099#msg-88099 [作業05] RWD網頁實作 navigation/dropdown/sub-menu/video (33 replies) http://mepopedia.com/forum/read.php?2723,88099,88099#msg-88099
  1. 1. 參照講義製作
  2. 2. 參考範例
  3. 3. 作業說明
  4. 3.1 講義影音
  5. 4. 參照 
[講義] RWD多頁網頁編輯 (一)
  6. 5. 參考範例
  7. 6. 作業說明
  8. 6.1 講義影音

4. 參照 
[講義] RWD多頁網頁編輯 (一)


moodle 
[講義] RWD多頁網頁編輯 (一)

[hr]

5. 參考範例


請由ftp hw05下載

[hr]

6. 作業說明


1.請上課範例版型修改。

2.設定好主題及網站風格。主題須為原創，不可使用他人作品。

3.本週進度：

(1)修改並設計自己的favicon

(2)修改title
(3)修改自己的主色 skins/mycolor.css

(4)修改導覽列選單/子選單/css背景底色

(5)替換影片

4.上傳至hw05資料夾，並回覆於作業文章

(1).網址: ：http://mepopedia.com/~web106-2c/hw05/hw05-105ooooo

(2).主題、風格：

(3).設計概念與製作心得：


1. 講義影音

]]> JinJin 106-2《中國》竹視傳二C-進階網頁設計 Thu, 28 Jun 2018 11:43:51 +0800 http://mepopedia.com/forum/read.php?2723,88098,88098#msg-88098 [期末作業] 專題網站設計 (36 replies) http://mepopedia.com/forum/read.php?2723,88098,88098#msg-88098
  1. 1. 參照講義製作
  2. 2. 參考範例
  3. 3. 作業說明
  4. 3.1 講義影音
  5. 4. 參照 
[講義] RWD多頁網頁編輯 (一)
  6. 5. 參考範例
  7. 6. 作業說明
  8. 6.1 講義影音
  9. 7. 作業說明
  10. 7.1 參考網址
  11. 8. 企劃大綱
  12. 9. 說明
  13. 10. 回覆項目
  14. 11. 評分標準
[期末作業說明] 專題網站製作--以網站新人王為例[hr]

7. 作業說明


請參考[期末作業說明] 專題網站製作--以網站新人王或全國慈善/科技/人文網頁設計比賽
為例


1. 參考網址


2018年全國慈善/科技/人文網頁設計比賽暨行動APP創作比賽
https://www.cpmah.org.tw/2018.html
2017網頁設計比賽得獎名單
https://www.cpmah.org.tw/2017/20160903.html

1.2017-第16屆新人王網站設計大賽 http://2017.netking.tw
2.2016-第15屆新人王網站設計大賽 http://2016.netking.tw
3.2015-第14屆新人王網站設計大賽 http://2015.netking.tw
4.2014-第13屆新人王網站設計大賽 http://2014.netking.tw 發掘台灣新亮點
5.2013-第12屆新人王網站設計大賽 http://2013.netking.tw 台灣讚起來，讓全世界看見（行銷台灣）
6.2012-第11屆新人王網站設計大賽 http://2012.netking.tw 戀戀故鄉，點亮台灣
7.2011-第10屆新人王網站設計大賽 http://2011.netking.tw 建國一百，幸福台灣
8.2010-第9屆新人王網站設計大賽 http://2010.netking.tw 發掘台灣的故事
[hr]


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

可參考現有免費版型製作，須為多頁版型
http://mepopedia.com/forum/read.php?804,87785

所有網站內容須為原創
包含文字、照片及插圖
若為他人之文字或圖片請務必取得授權並註明來源


[hr]

8. 企劃大綱


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

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

[hr]

9. 說明


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

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

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

[hr]

10. 回覆項目


1.作業網址：http://mepopedia.com/~web106-2c/final/final-1055445XXX

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

(請編輯於企劃之前)

[hr]

11. 評分標準


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

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

若寬度太寬，請使用以下語法，將圖片網址帶入：
<img width="100%" src="圖片網址" border="0"> ]]> JinJin 106-2《中國》竹視傳二C-進階網頁設計 Wed, 27 Jun 2018 19:37:41 +0800 http://mepopedia.com/forum/read.php?2723,87861,87861#msg-87861 [作業04] OnePage網頁實作/slider /Grid system (35 replies) http://mepopedia.com/forum/read.php?2723,87861,87861#msg-87861
  1. 1. 參照講義製作
  2. 2. 參考範例
  3. 3. 作業說明
  4. 3.1 講義影音
  5. 4. 參照 
[講義] RWD多頁網頁編輯 (一)
  6. 5. 參考範例
  7. 6. 作業說明
  8. 6.1 講義影音
  9. 7. 作業說明
  10. 7.1 參考網址
  11. 8. 企劃大綱
  12. 9. 說明
  13. 10. 回覆項目
  14. 11. 評分標準
  15. 12. 參照 
[講義] OnePage網頁實作解析(一）
  16. 13. 參考範例
  17. 14. 作業說明
  18. 14.1 講義影音

12. 參照 
[講義] OnePage網頁實作解析(一）


[講義] OnePage網頁實作解析(一）
http://mepopedia.com/forum/read.php?804,87859

[hr]

13. 參考範例


1.畢業專題

http://mepopedia.com/~css105-2a/lion_candy/

2. 活動網站
http://ccnt1.cute.edu.tw/cpland/4e/
http://ccnt1.cute.edu.tw/cpland/future/

http://www.cute.edu.tw/dvcd/master/

3. 品牌與導覽網站設計

http://ccnt1.cute.edu.tw/cpland/4e/
http://www.cute.edu.tw/dvcd/lieyu/

[hr]

14. 作業說明


1.可從免費版型中挑選適合的版型修改。
DreamTemplate

http://www.dreamtemplate.com

tooplate

http://www.tooplate.com/free-templates

templatemo

http://www.templatemo.com/page/1

Free CSS Free CSS Templates, CSS Layouts & More! 

http://www.free-css.com/free-css-templates

HTMLl5UP

https://html5up.net

W3.CSS Templates

https://www.w3schools.com/w3css/w3css_templates.asp

Free Responsive HTML5 CSS3 Website Templates 

https://medium.com/web-development-zone/free-responsive-html5-css3-website-templates-bcbe3f8a20b9


OnePage免費版型資源

https://onepagelove.com/templates
https://startbootstrap.com/template-categories/one-page/
https://colorlib.com/wp/best-one-page-wordpress-themes/

2.設定好主題及網站風格。主題須為原創，不可使用他人作品。

3.本週進度：

(1)修改前置設定，包含語系、網站描述等

(2)導覽列文字修改

(3)輪播圖片及文字修改

(4)格線系統版式修改

(5)Font Awesome修改

4.上傳至hw04資料夾，並回覆於作業文章

(1).網址: ：http://mepopedia.com/~web106-2c/hw04/hw04-105ooooo

(2).版型網址：

(3).主題、風格：

(4).設計概念與製作心得：


1. 講義影音

]]> JinJin 106-2《中國》竹視傳二C-進階網頁設計 Tue, 26 Jun 2018 20:28:48 +0800 http://mepopedia.com/forum/read.php?2723,87788,87788#msg-87788 [作業03] Font Awesome字型練習與應用 (36 replies) http://mepopedia.com/forum/read.php?2723,87788,87788#msg-87788
  1. 1. 參照講義製作
  2. 2. 參考範例
  3. 3. 作業說明
  4. 3.1 講義影音
  5. 4. 參照 
[講義] RWD多頁網頁編輯 (一)
  6. 5. 參考範例
  7. 6. 作業說明
  8. 6.1 講義影音
  9. 7. 作業說明
  10. 7.1 參考網址
  11. 8. 企劃大綱
  12. 9. 說明
  13. 10. 回覆項目
  14. 11. 評分標準
  15. 12. 參照 
[講義] OnePage網頁實作解析(一）
  16. 13. 參考範例
  17. 14. 作業說明
  18. 14.1 講義影音
  19. 15. 參照 
[講義] 製作
  20. 16. 作業說明
  21. 17. 於作業一中修改練習
  22. 18. 上課影片

15. 參照 
[講義] 製作


[講義] 使用圖示字體(icon font) Font Awesome
http://mepopedia.com/forum/read.php?804,87786


[hr]

16. 作業說明


1.可以作業一延續製作，將Font Awesome字型應用於其中

2.網頁內容若有涉及他人作品，請取得作者同意，或於footer註明，此網站為作業練習，如有侵權敬請告知


3.並回覆於本篇作業文章

(1).網址: ：http://mepopedia.com/~web106-2c/hw03/hw03-105ooooo

(2).設計概念與製作心得：


17. 於作業一中修改練習


如加入分享連結圖示，並放大兩倍fa-2x

<i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x">
於標題中加入旋轉圖示
<i class="fas fa-spinner fa-spin"></i>

18. 上課影片


https://youtu.be/BrslTed-BB4

]]> JinJin 106-2《中國》竹視傳二C-進階網頁設計 Sat, 05 May 2018 15:57:20 +0800 http://mepopedia.com/forum/read.php?2723,87776,87776#msg-87776 [期中作業] OnePage-個人網頁製作 (41 replies) http://mepopedia.com/forum/read.php?2723,87776,87776#msg-87776
  1. 1. 參照講義製作
  2. 2. 參考範例
  3. 3. 作業說明
  4. 3.1 講義影音
  5. 4. 參照 
[講義] RWD多頁網頁編輯 (一)
  6. 5. 參考範例
  7. 6. 作業說明
  8. 6.1 講義影音
  9. 7. 作業說明
  10. 7.1 參考網址
  11. 8. 企劃大綱
  12. 9. 說明
  13. 10. 回覆項目
  14. 11. 評分標準
  15. 12. 參照 
[講義] OnePage網頁實作解析(一）
  16. 13. 參考範例
  17. 14. 作業說明
  18. 14.1 講義影音
  19. 15. 參照 
[講義] 製作
  20. 16. 作業說明
  21. 17. 於作業一中修改練習
  22. 18. 上課影片
  23. 19. 製作OnePage網頁
  24. 20. 參照期中前講義製作
  25. 21. 作業說明
  26. 22. 課程影片

19. 製作OnePage網頁



20. 參照期中前講義製作



21. 作業說明


1.請以個人網站、作品集等主題製作，作品須原創，不可使用他人作品。

2.參照免費版型，挑選一適合期中作業主題的版型，結合選擇之版型製作。
DreamTemplate
http://www.dreamtemplate.com
tooplate 
http://www.tooplate.com/free-templates
templatemo 
http://www.templatemo.com/page/1
Free CSS Free CSS Templates, CSS Layouts & More! 
http://www.free-css.com/free-css-templates
HTMLl5UP 
https://html5up.net
W3.CSS Templates 
https://www.w3schools.com/w3css/w3css_templates.asp
Free Responsive HTML5 CSS3 Website Templates 
https://medium.com/web-development-zone/free-responsive-html5-css3-website-templates-bcbe3f8a20b9
https://onepagelove.com/templates
https://startbootstrap.com/template-categories/one-page/
https://colorlib.com/wp/best-one-page-wordpress-themes/

3.需完成之製作項目：
(1)製作個人favicon
(2)使用圖示字體(icon font) Font Awesome，並使用最新版本作更替。
(3)製作輪播圖
(4)了解網頁格線概念，並進行修改。
(5)製作作品分類，並進行修改。

4.製作完畢請上傳FTP，midterm資料夾。

請回覆於作業文章

(1) 作業網址 ：http://mepopedia.com/~web106-2c/midterm/midterm-105ooooo
(2) 參考之版型網址：
(3) 設計主題 / 風格
(4) 導覽列項目：
(5) 遇到之問題:
(6) 製作時間:
(7) 製作心得:

22. 課程影片


https://youtu.be/aGO1GQxbwTI

]]> JinJin 106-2《中國》竹視傳二C-進階網頁設計 Sun, 06 May 2018 09:55:07 +0800 http://mepopedia.com/forum/read.php?2723,87721,87721#msg-87721 [作業02] EDM/Newsletter製作 (37 replies) http://mepopedia.com/forum/read.php?2723,87721,87721#msg-87721
  1. 1. 參照講義製作
  2. 2. 參考範例
  3. 3. 作業說明
  4. 3.1 講義影音
  5. 4. 參照 
[講義] RWD多頁網頁編輯 (一)
  6. 5. 參考範例
  7. 6. 作業說明
  8. 6.1 講義影音
  9. 7. 作業說明
  10. 7.1 參考網址
  11. 8. 企劃大綱
  12. 9. 說明
  13. 10. 回覆項目
  14. 11. 評分標準
  15. 12. 參照 
[講義] OnePage網頁實作解析(一）
  16. 13. 參考範例
  17. 14. 作業說明
  18. 14.1 講義影音
  19. 15. 參照 
[講義] 製作
  20. 16. 作業說明
  21. 17. 於作業一中修改練習
  22. 18. 上課影片
  23. 19. 製作OnePage網頁
  24. 20. 參照期中前講義製作
  25. 21. 作業說明
  26. 22. 課程影片
  27. 23. 參照 
[講義] EDM/Newsletter製作
  28. 24. 課堂範例
  29. 25. 作業說明
  30. 25.1 講義影音

23. 參照 
[講義] EDM/Newsletter製作


[講義] EDM/Newsletter製作
http://mepopedia.com/forum/read.php?804,87725

[hr]

24. 課堂範例


(1) http://mepopedia.com/~jinjin/webclass/edm1.html
(2) http://mepopedia.com/~jinjin/webclass/edm2.html
(3) http://mepopedia.com/~jinjin/webclass/edm-3.html
[hr]

25. 作業說明


1.可參照範例
或從免費版型中挑選適合的版型修改。
Free newsletter templates 
http://templates.cakemail.com
Free Newsletter Templates 
https://www.templatesbox.com/newsletters/index.htm

2.自行選擇欲宣傳的主題製作，或以「金竹獎」主題製作。
「金竹獎」相關資料：
簡章：
http://mepopedia.com/~jinjin/webclass/gold.doc
海報：
http://mepopedia.com/~jinjin/webclass/gold.jpg


3.圖片可上傳至hw02資料夾後，貼上圖片絕對路徑。
如：http://mepopedia.com/~web106-2c/hw02/hw02-105/img/001.jpg

4.頁尾請註明學號。

5.製作完畢請上傳FTP


6.email給老師 whc915@gmail.com

7.並回覆於本篇作業文章

(1).網址: ：http://mepopedia.com/~web106-2c/hw02/hw02-105ooooo

(2).設計概念與製作心得：


1. 講義影音


https://youtu.be/y26OtUmRBUM

]]> JinJin 106-2《中國》竹視傳二C-進階網頁設計 Sat, 05 May 2018 15:09:51 +0800 http://mepopedia.com/forum/read.php?2723,87651,87651#msg-87651 [作業01] DIV與CSS複習--以色塊為主的基本單欄網頁版型（新增CSS3練習） (39 replies) http://mepopedia.com/forum/read.php?2723,87651,87651#msg-87651
  1. 1. 參照講義製作
  2. 2. 參考範例
  3. 3. 作業說明
  4. 3.1 講義影音
  5. 4. 參照 
[講義] RWD多頁網頁編輯 (一)
  6. 5. 參考範例
  7. 6. 作業說明
  8. 6.1 講義影音
  9. 7. 作業說明
  10. 7.1 參考網址
  11. 8. 企劃大綱
  12. 9. 說明
  13. 10. 回覆項目
  14. 11. 評分標準
  15. 12. 參照 
[講義] OnePage網頁實作解析(一）
  16. 13. 參考範例
  17. 14. 作業說明
  18. 14.1 講義影音
  19. 15. 參照 
[講義] 製作
  20. 16. 作業說明
  21. 17. 於作業一中修改練習
  22. 18. 上課影片
  23. 19. 製作OnePage網頁
  24. 20. 參照期中前講義製作
  25. 21. 作業說明
  26. 22. 課程影片
  27. 23. 參照 
[講義] EDM/Newsletter製作
  28. 24. 課堂範例
  29. 25. 作業說明
  30. 25.1 講義影音
  31. 26. 網頁基礎複習
  32. 27. 課堂範例
  33. 28. 作業說明
  34. 29. 上課影音
經過了一個寒假，為了讓大家回復記憶，請先複習基礎的網頁設計概念
以色塊為主的基本單欄網頁版型為基礎，加上其他使用過的功能，並配合CSS3語法，使網頁看起來更活潑！

26. 網頁基礎複習


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

[hr]

27. 課堂範例


http://mepopedia.com/~jinjin/ex/hw01/

[hr]

28. 作業說明


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

[hr]
作業參考
(1) http://mepopedia.com/~web103-2a/hw01/hw01-102/
(2) http://mepopedia.com/~css105-2b/hw01/hw01-1045445017/
(3) http://mepopedia.com/~web105-2c/hw01/hw01-1045445117-1/
(4) http://mepopedia.com/~web105-2c/hw01/hw01-1045445189-2/
(5) http://mepopedia.com/~css105-2c/hw01/hw01-1045445036/
(6) http://mepopedia.com/~css104-2b/hw01/hw01-1035445170/
(7) http://mepopedia.com/~css104-2c/hw01/hw01-1035445057/



[hr]

29. 上課影音



CSS3基礎語法練習
https://youtu.be/TM6wtac-LCc


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

]]> JinJin 106-2《中國》竹視傳二C-進階網頁設計 Thu, 03 May 2018 11:44:29 +0800