[作業02]html-css｜CSS3｜jQuary｜FontAwesome｜練習

[作業02] html-css｜CSS3｜jQuary｜FontAwesome｜練習

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

1. 製作說明

1. 作業範例

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

---

2. 參考之課堂講義

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

---

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

＊以FileZilla上傳至FTP

2. 評分標準

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


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


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


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


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


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

3. 繳交作業方式

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

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

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

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

上傳方法
https://service.taiwandns.com/?p=354

網址:ftp://my.cute.edu.tw/

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

資料夾內含：
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/~1115445XXX/hw02-1115445XXX/" target="_blank">作業02網址</a>
(2).請回答以下問題：
1.製作主題：
2.加入新效果愈呈現的風格為何：
3.遇到的問題?
4.花多少時間製作：
5.製作心得：

班級，學號



(編輯記錄)

(1).作業網址：
作業02網址

(2).請回答以下問題：
1.製作主題：專輯歌詞主題
2.呈現之配色風格：專輯封面配色
3.有無遇到的問題?無
4.花多少時間製作：兩個禮拜
5.製作心得：很好

視覺傳達2A，1115445008

(1).作業網址：
作業02網址

(2).請回答以下問題：
1.製作主題：韓團音樂
2.加入新效果愈呈現的風格為何：更貼切符合MV的感覺
3.遇到的問題?時常忘己怎麼打代碼，不知道該如何做
4.花多少時間製作：幾小時 5.製作心得：看到製作完成的樣貌非常有成就感，也覺得很好看，雖然製作過程不容易
班級，學號 視傳2A 1115445012

(1).作業網址
作業02網址

(2).請回答以下問題：
1.製作主題：愛是/Never Let Me Down Again
2.加入新效果愈呈現的風格為何：復古/年代感
3.遇到的問題? 有加入動態效果，所以要想歌詞怎麼動會比較漂亮
4.花多少時間製作：4~5hr
5.製作心得：學到將歌詞動態化的技巧

視2A 1115445004

(1).作業網址：
作業02網址

(2).請回答以下問題：
1.製作主題：歌詞
2.加入新效果愈呈現的風格為何：符合他們團體的名字
3.遇到的問題:影片跑掉
4.花多少時間製作：1、2天
5.製作心得:我努力了

班級，學號 視傳二A 1115445025 張恩瑜

作業02網址

(2).請回答以下問題：
1.製作主題：獨立樂團音樂
2.加入新效果愈呈現的風格為何：藍色系
3.遇到的問題:效果程式碼不清楚要放在哪邊
4.花多少時間製作：兩三周
5.製作心得：是一個新的學習，還不錯

班級:視傳2A
學號:1115445051

(1).作業網址：
作業02網址

(2).請回答以下問題：
1.製作主題：歌
2.加入新效果愈呈現的風格為何：橘色和藍色
3.遇到的問題? debug很多次
4.花多少時間製作：上課時間+回家2小時
5.製作心得：完成後感覺很厲害

班級 視傳2A，學號 1115445009

(1).作業網址：
作業02網址

(2).請回答以下問題：
1.製作主題：Back 2U Space
2.加入新效果愈呈現的風格為何：顏色有改善了
3.遇到的問題?:顏色不被反射
4.花多少時間製作：3週
5.製作心得：很好

班級視傳2A，學號1115445020



(編輯記錄)

(1).作業網址：
作業02網址

(2).請回答以下問題：
1.製作主題:韓團歌曲
2.加入新效果愈呈現的風格為何：黑粉色
3.遇到的問題? 忘記代碼
4.花多少時間製作:4節課
5.製作心得：很棒

班級，學號
視傳2A 1115445011



(編輯記錄)

(1).作業網址：
作業02網址

(2).請回答以下問題：
1.製作主題：鮮花 七里香
2.加入新效果愈呈現的風格為何：陽光
3.遇到的問題?太多代碼
4.花多少時間製作：2h
5.製作心得：很好

班級:視傳2A學號:1115445015

(1).作業網址：
作業02網址

(2).請回答以下問題：
1.製作主題：兩個人/不染
2.加入新效果愈呈現的風格為何：個人聽這首歌的感覺
3.遇到的問題? tabs不會變
4.花多少時間製作：兩個禮拜
5.製作心得：有一點小複雜

視傳2A-1115445053

(1)作業網址:
作業02網址
(2).請回答以下問題：
1.製作主題：認真的雪/天外來物
2.加入新效果愈呈現的風格為何：mv影片
3.遇到的問題?無
4.花多少時間製作：半學期
5.製作心得：加油

班級:視2A/學號:1115445010



(編輯記錄)

(1).作業網址：
作業02網址

(2).請回答以下問題：
1.製作主題：La Verdad /他舉起右手點名
2.加入新效果愈呈現的風格為何：延續上次的風格
3.遇到的問題?會找不到錯誤在哪個代碼
4.花多少時間製作：兩個禮拜
5.製作心得：很有趣

1115445007 吳怡青



(編輯記錄)

1).作業網址：
作業02網址
(2).請回答以下問題：
1.製作主題： Gyubin的兩首歌
2.加入新效果愈呈現的風格為何： 更有意境跟情緒
3.遇到的問題? 上傳太坎坷
4.花多少時間製作： 很久！！
5.製作心得： 好難，但是很有成就感

視2Ａ 1115445028 林佩瑩



(編輯記錄)

(1).作業網址：
作業02網址

(2).請回答以下問題：
1.製作主題：台灣有名歌曲(天使和菊花台)
2.加入新效果愈呈現的風格為何：一個為暖色系且照片為植物，另一個為寒色系照片用天空和大門
3.遇到的問題? 表格上的顏色需要回原始碼進行修改(但問題已解決)
4.花多少時間製作：3-4週
5.製作心得：隨然做好了但是對代碼的認知還是不行希望能找空閒時間請老師教我

班級 2A 視傳系，學號 1115445005



(編輯記錄)

作業02網址

(2).請回答以下問題：
1.製作主題：歌詞
2.加入新效果愈呈現的風格為何：根據歌曲內容
3.遇到的問題?尺寸大小跟語法不熟
4.花多少時間製作：3-4堂
5.製作心得：好玩

班級，學號
視傳2a 1115448030