JinJin 的視覺設計專區 - 107-1《中國》竹視傳二A-進階網頁設計 http://mepopedia.com/forum/list.php?2758 Wed, 29 Apr 2026 10:22:27 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?2758,88909,88909#msg-88909 [期中作業] OnePage-個人網頁製作 (no replies) http://mepopedia.com/forum/read.php?2758,88909,88909#msg-88909 1) 作業網址 ：
http://ftp.mepopedia.com/~css107c/midterm/midterm-1065445032
(2) 參考之版型網址： 老師上課的範例版型
(3) 設計主題 / 風格： 貓咪介紹/簡約
(4) 導覽列項目: 照片 小知識 宣導
(5) 遇到之問題: 功能還沒摸很熟ˊ
(6) 製作時間: 5天
(7) 製作心得:研究很久但做的不是很好

(2) 參考之版型網址： 老師上課的範例版型
(3) 設計主題 / 風格： 貓咪介紹/簡約
(4) 導覽列項目: 照片 小知識 宣導
(5) 遇到之問題: 功能還沒摸很熟
(6) 製作時間: 5天
(7) 製作心得:研究很久但做的不是很好]]> 丁姵文 107-1《中國》竹視傳二A-進階網頁設計 Wed, 16 Jan 2019 23:50:58 +0800 http://mepopedia.com/forum/read.php?2758,88908,88908#msg-88908 期末作業 (no replies) http://mepopedia.com/forum/read.php?2758,88908,88908#msg-88908 http://ftp.mepopedia.com/~css107c/final/final-1065445032
2.網站主題： 我的日常與大學生活.
3.內容描述： 每天生活的點點滴滴
4.風格設計： 簡約
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：
6.個人製作心得：這次做得分頁比較多要消耗的耐心也會比較多，在做的過程中一度覺得自己的網頁會做不完，但經過2.3天的熬夜終於把網頁給做完了，做完後有種成就感超級棒的！！！

1.網站主題： 我的日常與大學生活 .
2.內容大綱(導覽列/中文/檔名)：我的首頁 隨手拍 毛小孩與日常生活 與我聯絡
3.參考版型: 老師上課版型
4.主要對象(分析)：精采生活的回憶
5.網頁架構圖(樹狀圖)：https://imgur.com/plmwjLy
6.色彩規劃(色調）： 彩色
7.組員名單(學號）:1065445032]]> 丁姵文 107-1《中國》竹視傳二A-進階網頁設計 Wed, 16 Jan 2019 22:38:53 +0800 http://mepopedia.com/forum/read.php?2758,88734,88734#msg-88734 [期末作業] 專題網站設計 (24 replies) http://mepopedia.com/forum/read.php?2758,88734,88734#msg-88734
  1. 1. 作業說明
  2. 1.1 參考網址
  3. 2. 進度規劃
  4. 3. 企劃大綱
  5. 4. 說明
  6. 5. 製作完成後回覆項目
  7. 6. 評分標準
  8. 7. 參考範例
[期末作業說明] 專題網站製作[hr]

1. 作業說明


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


1. 參考網址


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

所有網站內容須為原創
包含文字、照片及插圖
若為他人之文字或圖片請務必取得授權並註明來源
[color=#CC0066]＊未依照要求，期末作業不及格＊[/color]

2. 進度規劃


第十三週12/13　RWD網頁實作/列表頁/內容頁/Google Fonts網路中文字型應用
第十四週12/20　RWD首頁-Slider輪播與animation微動畫
第十五週12/27　RWD-相簿設定（繳交企劃大綱）
第十六週01/03　RWD多頁網站製作/案例分析/問題討論
第十七週01/10　期末作業/RWD多頁專題網站製作-繳交、報告與檢討
第十八週01/17　期末考週-期末檢討-分數確認
[hr]

3. 企劃大綱


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

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

[hr]

4. 說明


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

每週上課確實依照進度製作，期末即可完成期末作業

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

將資料夾命名為 final-學號(組長)，以ＦＴＰ上傳至final資料夾
作業網址為
Ａ班：http://ftp.mepopedia.com/~css107a/final/final-1065445XXX
Ｃ班：http://ftp.mepopedia.com/~css107c/final/final-1065445XXX

[hr]

5. 製作完成後回覆項目


製作完成後，請在企劃內容前編輯加入以下內容：

1.作業網址：
Ａ班：http://ftp.mepopedia.com/~css107a/final/final-1065445XXX
Ｃ班：http://ftp.mepopedia.com/~css107c/final/final-1065445XXX

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

(請編輯於企劃之前)

[hr]

6. 評分標準


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

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

若寬度太寬，請使用以下語法，將圖片網址帶入：
<img width="100%" src="圖片網址" border="0">

7. 參考範例


http://mepopedia.com/forum/read.php?2723,88098]]> JinJin 107-1《中國》竹視傳二A-進階網頁設計 Thu, 17 Jan 2019 23:03:24 +0800 http://mepopedia.com/forum/read.php?2758,88708,88708#msg-88708 [期中作業] OnePage-個人網頁製作 (no replies) http://mepopedia.com/forum/read.php?2758,88708,88708#msg-88708 http://ftp.mepopedia.com/~css107c/midterm/midterm-1065445039/html/
(2) 參考之版型網址： 老師上課的範例版型
(3) 設計主題 / 風格： 貓咪生活
(4) 導覽列項目: 首頁 關於 結紮大小事 貓咪大解密
(5) 遇到之問題: 滑鼠滑過去發圖到另一邊了...有點困擾
(6) 製作時間: 1周左右
(7) 製作心得:總覺得比大一弄的網頁好很多 或許是有點上手吧! 可是好像做錯了...X(]]> yu0520 107-1《中國》竹視傳二A-進階網頁設計 Thu, 06 Dec 2018 10:51:00 +0800 http://mepopedia.com/forum/read.php?2758,88586,88586#msg-88586 [期中作業] OnePage-個人網頁製作 (25 replies) http://mepopedia.com/forum/read.php?2758,88586,88586#msg-88586
  1. 1. 作業說明
  2. 1.1 參考網址
  3. 2. 進度規劃
  4. 3. 企劃大綱
  5. 4. 說明
  6. 5. 製作完成後回覆項目
  7. 6. 評分標準
  8. 7. 參考範例
  9. 8. 製作OnePage網頁
  10. 9. 參照期中前講義製作
  11. 10. 作業說明
  12. 11. 製作進度
  13. 12. 學長姐範例
  14. 13. 課程影片

8. 製作OnePage網頁



9. 參照期中前講義製作



10. 作業說明


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) 作業網址 ：
A班：http://ftp.mepopedia.com/~css107a/midterm/midterm-106xxxxxxx
C班：http://ftp.mepopedia.com/~css107c/midterm/midterm-106xxxxxxx
(2) 參考之版型網址：
(3) 設計主題 / 風格：
(4) 導覽列項目：
(5) 遇到之問題:
(6) 製作時間:
(7) 製作心得:

[hr]

11. 製作進度


11/08 　OnePage網頁實作/使用圖示字體(icon font) Font Awesome
11/15 　OnePage網頁實作/slider /Grid system
11/22 　OnePage網頁實作/相片輪播 /
11/29 　期中作業繳交/OnePage網頁製作

[hr]

12. 學長姐範例


http://mepopedia.com/forum/read.php?2723,87776
http://mepopedia.com/forum/read.php?2722,87777

[hr]

13. 課程影片


https://youtu.be/aGO1GQxbwTI



[hr]

https://youtu.be/BrslTed-BB4

]]> JinJin 107-1《中國》竹視傳二A-進階網頁設計 Thu, 10 Jan 2019 10:39:59 +0800 http://mepopedia.com/forum/read.php?2758,88464,88464#msg-88464 [作業01]DIV與CSS練習--以色塊為主的基本單欄網頁版型 (8 replies) http://mepopedia.com/forum/read.php?2758,88464,88464#msg-88464
  1. 1. 作業說明
  2. 1.1 參考網址
  3. 2. 進度規劃
  4. 3. 企劃大綱
  5. 4. 說明
  6. 5. 製作完成後回覆項目
  7. 6. 評分標準
  8. 7. 參考範例
  9. 8. 製作OnePage網頁
  10. 9. 參照期中前講義製作
  11. 10. 作業說明
  12. 11. 製作進度
  13. 12. 學長姐範例
  14. 13. 課程影片
  15. 14. 網頁基礎複習
  16. 15. 課堂範例
  17. 16. 作業說明
  18. 17. 上課影音
請同學先複習基礎的網頁設計概念
以色塊為主的基本單欄網頁版型為基礎，加上其他使用過的功能，並配合CSS3語法，使網頁看起來更活潑！

14. 網頁基礎複習


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

[hr]

15. 課堂範例


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

[hr]

16. 作業說明


參照講義
[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

[hr]

若若於練習中加入h1滑入的動畫，可加入以下CSS語法練習：

h1 {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
padding-left: 100%;
width: 300%;
}
to {
padding-left: 0%;
width: 100%;
}
}

[hr]

Google語法補充
思源黑體
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);

font-family: 'Noto Sans TC', sans-serif;

圓體
@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);

font-family: ‘cwTeXYen’, sans-serif;
[hr]

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

並回覆於此篇文章

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

[hr]
作業參考
http://mepopedia.com/forum/read.php?2722,87650
http://mepopedia.com/forum/read.php?2723,87651
(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]

17. 上課影音


[練習一] DIV與CSS練習--以色塊為主的基本單欄網頁版型（2018/09/27課堂版本）
https://youtu.be/vSpHaQFZANs


[hr]

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




完整講義專頁
https://mepopedia.com/~jinjin/webdesign/]]> JinJin 107-1《中國》竹視傳二A-進階網頁設計 Mon, 14 Jan 2019 17:12:36 +0800