JinJin 的視覺設計專區 - 110-1《中國》竹視傳二A-網頁設計 http://mepopedia.com/forum/list.php?2893 Wed, 29 Apr 2026 12:25:47 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?2893,93130,93130#msg-93130 [OnePage作業] OnePage作業｜輪播圖｜格線系統｜相簿｜地圖 (37 replies) http://mepopedia.com/forum/read.php?2893,93130,93130#msg-93130
  1. 1. 製作RWD｜OnePage網頁
  2. 2. 作業說明
  3. 3. 評分標準：

1. 製作RWD｜OnePage網頁



1.參照講義製作
［講義］OnePage 網頁｜網頁企劃
［講義］OnePage 網頁｜實作解析(一）｜輪播圖｜Grid System格線系統
［講義］OnePage 網頁｜實作解析(二）｜相片分類與燈箱效果｜地圖設定
［講義］OnePage 網頁｜實作解析(三）地圖設定｜表格設定
［講義］RWD網頁解析｜Google Fonts 網路中文字型｜補充說明


2. 作業說明


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

2.參照上課範例，或其他免費版型(但須至少符合以下項目)，挑選一適合期末作業主題的版型，結合選擇之版型製作。
除了上課版型，在製作其他網頁者可加分。

3.每週皆有製作進度，請至Moodle繳交。

4.需完成之製作項目：
(1) 完成網頁企劃書
(2) 製作『個人圖示favicon』、『LOGO』。
(3) 使用『圖示字體(icon font) Font Awesome』。
(4) 製作『輪播圖』。
(5) 了解『網頁格線概念』，並進行修改。
(6) 製作『相簿作品分類』，並進行修改。
(7) 製作『表格』，並進行修改。
(8) 製作『地圖』，並進行修改。
(9) 其他部分可替換文字或圖片修改，可選擇需要的部分即可。
(10) 請務必調整為與主題相符的色彩，以及調整字體、粗細等樣式設定，使修改之網站產生全新的風格與面貌，並與設定之網頁屬性相符。
(11) 需要連結的部分，請務必補上連結，每個連結都必須有作用。不必要的地方務必刪除，整個網站需無錯誤。

3. 評分標準：


1.美感性與精緻性（配色、圖片、排版效果、字體調整、整體效果、擺脫原有的感覺、表現獨特風格）。
2.完整性（符合規定，且連結點選都完整）。
3.正確性（語法正確，不出錯、連結需完整）。
4.加分項（內容豐富且完整，超過規定的要求）。


重點加分項目：除了上課範例外，可參考其他版型，挑選一適合的版型，製作另一個新主題的OnePage網頁。
有額外製作另一網頁的同學，總分額外加5-10分。


4.製作完畢請上傳FTP，資料夾命名：onepage。

請回覆於作業文章
：
(1) 作業網址 ：
<a href="http://my.cute.edu.tw/~1095445XXX/onepage" target="_blank">OnePage作業網址</a>
(2) 企劃書網址：
<a href="企劃書網址" target="_blank">OnePage網頁企劃書</a>
(3) 參考之版型網址：
(4) 製作時間:
(5) 製作心得:

班級，學號]]> JinJin 110-1《中國》竹視傳二A-網頁設計 Thu, 20 Jun 2024 10:46:34 +0800 http://mepopedia.com/forum/read.php?2893,92963,92963#msg-92963 [作業02] html-css｜CSS3｜jQuary｜FontAwesome｜練習 (37 replies) http://mepopedia.com/forum/read.php?2893,92963,92963#msg-92963
  1. 1. 製作RWD｜OnePage網頁
  2. 2. 作業說明
  3. 3. 評分標準：
  4. 4. 製作說明
  5. 4.1 作業範例
  6. 4.2 參考之課堂講義
  7. 5. 評分標準
  8. 6. 繳交作業方式
  9. 6.0.1 製作完成後，檔案命名方式：
  10. 6.0.2 以FileZilla上傳至FTP
  11. 6.0.3 回覆本篇文章
[作業02] html-css｜CSS3｜jQuary｜FontAwesome｜練習

請參照講義製作：
[講義] 作業二語法解析｜jQuery動態網頁｜CSS3語法｜圖示字體｜初探

4. 製作說明


1. 作業範例


作業02課堂範例：作業02範例
作業02學長姊範例：
作業02範例-1
作業02範例-2
作業02範例-3
作業02範例-4

2. 參考之課堂講義


［講義06］jQuery動態網頁初探
［講義07］使用圖示字體(icon font) Font Awesome
［講義08］CSS進階語法補充


＊請分別於兩首歌詞，加入CSS3視覺效果、jQuary動態效果、FontAwesome圖示字體等，設定出具有符合歌詞意境的網頁，加入圖片、影片、Tabs、及效果使其產生：透明感、漸層、陰影..等。

＊以FileZilla上傳至FTP


5. 評分標準



  1. 完成兩個檔案且分別設定符合要求的css，無錯誤，至少八十分

  2. 完成以上說明，並符合歌詞意境，且設計符合設計美感，八十五分以上，優秀作品九十分以上

  3. 只完成一個檔案css設定，無錯誤，至多七十分

  4. 只完成一個檔案css設定，且有錯誤，至多六十分

  5. 完成兩個檔案，部分設定未符合要求，且有錯誤，至多七十分

  6. 請確實上傳檔案至雲端，且正確回覆，如有問題請提出，未確實上傳回覆扣總分十分



6. 繳交作業方式


1. 製作完成後，檔案命名方式：


第二個作業FTP上的資料夾為：hw02

每位同學請將自己的資料夾命名為：hw02-學號

中國科技大學｜個人網頁伺服器空間
主機名稱: my.cute.edu.tw
使用者: 學號
密碼: 單一入口密碼
第一次登入，須建public_html目錄，請將網頁資料置於該目錄內


這個作業的網址則為：
http://my.cute.edu.tw/~1095445XXX/hw02-1095445XXX/

資料夾內含：
1.html部分：首頁命名為index.html，第二個檔名為next.html
2.css部分：命名為style.css與style2.css

存放在 < hw02-學號 > 的資夾內

2. 以FileZilla上傳至FTP


3. 回覆本篇文章


(1).作業網址：
<a href="http://my.cute.edu.tw/~1095445XXX/hw02-1095445XXX/" target="_blank">作業02網址</a>
(2).請回答以下問題：
1.製作主題：
2.加入新效果愈呈現的風格為何：
3.遇到的問題?
4.花多少時間製作：
5.製作心得：

班級，學號]]> JinJin 110-1《中國》竹視傳二A-網頁設計 Thu, 25 Apr 2024 11:17:38 +0800 http://mepopedia.com/forum/read.php?2893,92951,92951#msg-92951 [作業01] html-css基礎概念練習-歌詞篇 (46 replies) http://mepopedia.com/forum/read.php?2893,92951,92951#msg-92951
  1. 1. 製作RWD｜OnePage網頁
  2. 2. 作業說明
  3. 3. 評分標準：
  4. 4. 製作說明
  5. 4.1 作業範例
  6. 4.2 參考之課堂講義
  7. 5. 評分標準
  8. 6. 繳交作業方式
  9. 6.0.1 製作完成後，檔案命名方式：
  10. 6.0.2 以FileZilla上傳至FTP
  11. 6.0.3 回覆本篇文章
  12. 7. 製作說明
  13. 8. 教學影片
  14. 9. 繳交作業方式
  15. 9.0.1 製作完成後，檔案命名方式：
  16. 9.0.2 以FileZilla上傳至FTP
  17. 9.0.3 回覆本篇文章
[作業01] html-css基礎概念練習-歌詞篇

7. 製作說明


歌詞作業範例：http://jinjin.mepopedia.com/~jinjin/hw/hw01

1.請參考

[講義] html-css基礎概念練習-歌詞篇製作說明 的步驟製作。

2.每個同學記得在title的部分打上『歌詞名稱』。

3.自行選擇兩首歌詞，設定歌詞風格，依照所設定風格進行配色。

4.footer請設定個人的專屬版權聲明，並註明『本網頁為作業之用，如有侵權敬請告知』字樣。

5.以FileZilla上傳至FTP

6.本次作業的重點在於：

(1)認識基礎html網頁架構、標題設定、連結設定。
(2)認識css基礎語法，利用單純色彩搭配字體，設計出具有符合歌詞意境的網頁。
(3)學會利用FileZilla上傳自己製作的網頁到雲端空間，成為自己專屬的網頁。

8. 教學影片


1.HTML CSS基礎概念練習一 html架構與內容建置

https://youtu.be/Uq011dmJkv8



2.HTML-CSS基礎概念練習（二） css視覺設定解析

https://youtu.be/sqEV6TSnxDw



9. 繳交作業方式


1. 製作完成後，檔案命名方式：


第一個作業FTP上的資料夾為：hw01

每位同學請將自己的資料夾命名為：hw01-學號

中國科技大學｜個人網頁伺服器空間
主機名稱: my.cute.edu.tw
使用者: 學號
密碼: 單一入口密碼
第一次登入，須建public_html目錄，請將網頁資料置於該目錄內


這個作業的網址則為：
http://my.cute.edu.tw/~1095445XXX/hw01-1095445XXX/

資料夾內含：
1.html部分：首頁命名為index.html，第二個檔名為next.html
2.css部分：命名為style.css與style2.css

存放在 < hw01-學號 > 的資夾內

2. 以FileZilla上傳至FTP


3. 回覆本篇文章


(1).作業網址：
<a href="http://my.cute.edu.tw/~1085445XXX/hw01-1085445XXX/" target="_blank">作業01網址</a>
(2).請回答以下問題：
1.製作主題：
2.呈現之配色風格：
3.有無遇到的問題?
4.花多少時間製作：
5.製作心得：

班級，學號


學長姐範例：
http://cute.mepopedia.com/~web107a/hw01/hw01-1055440119-1/
http://cute.mepopedia.com/~web107a/hw01/hw01-1075445010/]]> JinJin 110-1《中國》竹視傳二A-網頁設計 Thu, 28 Mar 2024 11:56:15 +0800