Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

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

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

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

1. 製作說明


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


2. 評分標準



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

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

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

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

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

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



3. 繳交作業方式


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.製作心得:

班級,學號



Edited 2 time(s). Last edit at 11/15/2021 12:32PM by JinJin.
(編輯記錄)

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

(2).請回答以下問題:
1.製作主題: 日文歌曲
2.加入新效果愈呈現的風格為何: 第一首還是以粉色調為主,第二首是以深色調為主,加入圖片與效果後更能感受歌曲的氛圍
3.遇到的問題? 無
4.花多少時間製作: 2-3小時
5.製作心得: 做完後很有成就感

班級,學號:視傳2A-1095445027

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

(2).請回答以下問題:
1.製作主題:抒情歌曲合輯
2.加入新效果愈呈現的風格為何:顏色配色以及圖片對應歌曲的感觸
3.遇到的問題?有時候語法打錯,效果沒出現
4.花多少時間製作:一周
5.製作心得:比起第一次作業,也慢慢熟悉做網頁的技巧

班級,視傳2A 學號 1095445002



Edited 1 time(s). Last edit at 11/17/2021 10:40AM by 1095445002.
(編輯記錄)

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

(2).請回答以下問題:
1.製作主題:中文/英文歌
2.加入新效果愈呈現的風格為何:是以冷色調的照片呈現歌詞的悲傷
3.遇到的問題?沒有
4.花多少時間製作:2-5小時
5.製作心得:學到新的東西很開心

班級:視傳2A
學號:1095445019



Edited 4 time(s). Last edit at 11/17/2021 10:44AM by 1095445019..
(編輯記錄)

作業02網址
(2).請回答以下問題:
1.製作主題:KPOP
2.加入新效果愈呈現的風格為何:加入了圖片讓人更加感受歌曲。第一首是以宇宙該念去製作,第二首是以歌曲風格製作。
3.遇到的問題? 語法會錯亂
4.花多少時間製作:2~3小時。
5.製作心得:整個完成後很有成就感。

班級,學號 視傳2A 1095445020



Edited 1 time(s). Last edit at 11/17/2021 10:43AM by 1095445020.
(編輯記錄)

(1).作業網址:
作業02網址
(2).請回答以下問題:
1.製作主題: 懷舊、懷念、感傷、抒發情感
2.加入新效果愈呈現的風格為何: 第一首以橘色調作為整體配色,表現出溫馨、溫暖之感;第二首歌披星戴月的想你,以小孩坐在月亮上來應景
3.遇到的問題? :這次問題遇到的很多,有透明度無法做調整、語錄欄插入卻沒東西出現
4.花多少時間製作: 三週
5.製作心得:越後面越難學習,但是做完卻很有成就感

視傳2A 1095445024

MEPOERs said:
JinJin: 圖示字體
(1).作業網址:
作業02網址

(2).請回答以下問題:
1.製作主題:韓文曲
2.加入新效果愈呈現的風格為何:顏色配色以及加入圖片與效果
3.遇到的問題?語法打錯
4.花多少時間製作:3~5小時
5.製作心得:做完有成就感,慢慢的有經驗了。


視傳2A-1095445032

作業02網址

(2).請回答以下問題:
1.製作主題:溫柔 清淡
2.加入新效果愈呈現的風格為何:色調偏淡 溫柔 一點點憂鬱
3.遇到的問題? tab框顏色 一直找不到在檢查的哪裡 也一直找不到改顏色的地方
4.花多少時間製作:每周兩小時
5.製作心得:有完成一個作品的感覺,之後有時間再繼續研究 JQUERY的其他功能

視傳3A 1085445089



Edited 1 time(s). Last edit at 11/17/2021 12:12PM by 1085445089.
(編輯記錄)

MEPOERs said:
JinJin: 請放單一資料夾即可
(1).作業網址:
作業02網址

(2).請回答以下問題:
1.製作主題:抒情歌曲
2.加入新效果愈呈現的風格為何:比較小憂鬱的感覺
3.遇到的問題?目前就是覺得比較複雜而已
4.花多少時間製作:4小時以上
5.製作心得:好複雜

班級:視傳2A
學號:1095445015

MEPOERs said:
JinJin: 缺底圖、間曾、透明等設定
(1).作業網址:
作業02網址

(2).請回答以下問題:
1.製作主題:R&B 抒情
2.加入新效果愈呈現的風格為何:好讚ˋˊ
3.遇到的問題 午餐不知道要ㄘ什麼ㄝ
4.花多少時間製作: 三週
製作心得:老師很好用 耶 不會做ㄉ呼喚老師就好 大好き せんせい


視傳2A 1095445006

MEPOERs said:
JinJin: 缺圖示字體設定喔!
(1).作業網址:
作業02網址

(2).請回答以下問題:
1.製作主題:日文歌曲
2.加入新效果愈呈現的風格為何:更有意境
3.遇到的問題?找不到步驟
4.花多少時間製作:4小時
5.製作心得:有點複雜

視傳2A,1095445014

MEPOERs said:
JinJin: 海之幽靈的header設定有誤
(1).作業網址:
作業02網址

(2).請回答以下問題:
1.製作主題:抒情歌曲。
2.加入新效果愈呈現的風格為何:第一首跟派對與煙火有關,訴說寂寞的心情;第二首是輕快的歌曲,表現純純的感情。
3.遇到的問題?有時忘記打叫出圖示的原始碼。
4.花多少時間製作:2小時。
5.製作心得:感覺跟第一個作業看起來的效果差很多,有一種成就感,而且學到很多東西。

視傳2A,1095445036

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

(2).請回答以下問題:
1.製作主題:R&B
2.加入新效果愈呈現的風格為何:溫暖大地
3.遇到的問題?越來越多設定
4.花多少時間製作:3週
5.製作心得:希望可以跟上老師進度

班級視傳2A,學號1095445004

作業02網址

(2).請回答以下問題:
1.製作主題:憂鬱暗黑風格
2.呈現之配色風格:深沉&冷系色調
3.有無遇到的問題? 我想在背景加影片,使網頁更有氣氛,可是太複雜做不到,應該之後再挑戰
4.花多少時間製作:2星期
5.製作心得:很好玩

班級,學號 3A 1105245001

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

(2).請回答以下問題:
1.製作主題:avid、霧裡
2.加入新效果愈呈現的風格為何:avid : 增加了淺咖啡色漸層讓整體有種戰爭時沙塵飛揚的感覺。
霧裡 : 用淺灰色漸層營照出在霧中霧濛濛的感覺。
3.遇到的問題? 有些東西要叫出前需要在前方加一串東西,有的時候會遺忘他。
4.花多少時間製作: 3-4個小時
5.製作心得:有時會忘記要叫出一些東西時前面要加一串語法,但現在已經知道了。原本覺得很難但真的做出來時的那種成就感是很大的。

視傳2A 1095445007



Edited 1 time(s). Last edit at 11/17/2021 11:46AM by 1095445007.
(編輯記錄)

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

(2).請回答以下問題:
1.製作主題:年輪 STAY
2.加入新效果愈呈現的風格為何:新穎
3.遇到的問題?還好 都可以解決
4.花多少時間製作:課堂時間
5.製作心得:還蠻好玩的,講義也都很清楚,可以跟得上進度

班級:視傳2A 學號:1085445038

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

(2).請回答以下問題:
1.製作主題:有點感傷的情歌
2.加入新效果愈呈現的風格為何:感傷陰沈和明亮輕快
3.遇到的問題? 少一個英文或符號效果就出不來了
4.花多少時間製作:1個禮拜
5.製作心得:比起作業1難度增加很多,但做完會很有成就感,很有趣。

視傳2A,1095445010

作業02網址

1.製作主題:憂傷 , 失戀
2.加入新效果愈呈現的風格為何:藍色和紅色系
3.遇到的問題? 背景圖片不能原尺寸顯示,放大了背景圖片
4.花多少時間製作:2星期
5.製作心得:只要有一個code錯,整個效果就會不同或者會顯示不了

班級3A,學號1105245002



Edited 1 time(s). Last edit at 11/17/2021 12:13PM by 1105245002.
(編輯記錄)

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

(2).請回答以下問題:
1.製作主題:中文歌
2.加入新效果愈呈現的風格為何:以藍灰色為主,有著悲傷的感覺
3.遇到的問題? 我本來做好了,結果傳上去的時候,全部消失........害我當下重做呵呵
4.花多少時間製作:原本是3.4禮拜,重做2個小時
5.製作心得:人生好難...好在及時補救成功.....

班級-視二A,學號-1095445026

MEPOERs said:
JinJin: main下方應該padding,閱讀較順暢
(1).作業網址:
作業02網址

(2).請回答以下問題:
1.製作主題:韓文歌曲 / 英文歌曲
2.加入新效果愈呈現的風格為何:配合歌詞意境及專輯風格,偏向於清新風格
3.遇到的問題? 文字顏色會一直跳掉,但後面會自己恢復
4.花多少時間製作:大概5小時
5.製作心得:和第一次比較起來,有比較上手一點了,雖然有時候還會忘記一點點,但是弄完挺有成就感

班級:視傳2A
學號:1095445031



Edited 1 time(s). Last edit at 11/24/2021 10:32AM by 1095445031.
(編輯記錄)

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

(2).請回答以下問題:
1.製作主題:chill pop
2.加入新效果愈呈現的風格為何:慵懶 放鬆
3.遇到的問題? 有些語法加進去很常沒有東西
4.花多少時間製作:3~4小時
5.製作心得:眼睛很酸,語法好多,有點吸收不太好
視傳2A 1095445041

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

(2).請回答以下問題:
1.製作主題:咩噗QQ
2.加入新效果愈呈現的風格為何:更QQ了
3.遇到的問題? 好多好多問題...
4.花多少時間製作:6~7小時
5.製作心得:我太難了...嗚嗚

視傳2A,1095445040

MEPOERs said:
JinJin: 只有一種配色
(1).作業網址:
作業02網址

(2).請回答以下問題:
1.製作主題:休閒
2.加入新效果愈呈現的風格為何: 第一首用藍色調
3.遇到的問題? 語錄欄
4.花多少時間製作: 半小時
5.製作心得:好難

班級,學號視2A 1095445017

作業02網址

(2).請回答以下問題:
1.製作主題:訴說人的愛情,使用動物詞語帶入
2.加入新效果愈呈現的風格為何:都是以偏冷為主軸,但配合照片顏色
3.遇到的問題? 和第一個作業一 樣,需要再多加練習程式語法,對於這方面理解力偏弱,很容易忘記
4.花多少時間製作:一週以上
5.製作心得 : 做完會很有成就感,但仍需加強努力,看到同堂課程同學製作出來的東西很漂亮都會很驚艷

班級,學號

視4A 、1065445151

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

(2).請回答以下問題:
1.製作主題:日文歌曲
2.加入新效果愈呈現的風格為何:第一首運用陽光和藍天的圖去襯托那曾經逝去夏日/第二首音歌曲名為檸檬,故以檸檬為背景且檸檬的圖也剛好也表示著歌曲裡的酸味。
3.遇到的問題? 語法變多後,有時會搞混
4.花多少時間製作:2週
5.製作心得:只要一個步驟出錯且沒發現,就有可能出現很多的問題。

班級,學號:視傳2A-1095445023

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

(2).請回答以下問題:
1.製作主題:,輕快
2.加入新效果愈呈現的風格為何:兩首都偏冷色調,第一首偏灰黯、第二首篇柔美輕快
3.遇到的問題?圖片進不去,或是進去了一開始圖片位置很好,再開一次位置就不見了
4.花多少時間製作:5-6小時
5.製作心得:製作上相比第一次會更熟練,雖然有時候發生一些錯誤會很難找,但是還是有學到很多

班級,學號
視2A-1095445025



Edited 1 time(s). Last edit at 11/24/2021 11:04AM by 1095445025.
(編輯記錄)

MEPOERs said:
JinJin: main下方應該padding,閱讀較順暢
(1).作業網址:作業02網址

(2).請回答以下問題:
1.製作主題:幽暗
2.加入新效果愈呈現的風格為何:優美
3.遇到的問題? 沒跟上 ,混亂
4.花多少時間製作:3-4小時
5.製作心得:酷

班級視2A,學號1095445008

MEPOERs said:
JinJin: 應設行間及padding
1).作業網址:
作業02網址

(2).請回答以下問題:
1.製作主題:K-POP
2.加入新效果愈呈現的風格為何:還是盡量依照影片mv去製作
3.遇到的問題? 常常忘記上次改到哪,自己打得有點混亂
4.花多少時間製作:課餘時間,我也不知道耶
5.製作心得:喜歡做鼠標。

視傳二A,1095445034

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

(2).請回答以下問題:
1.製作主題:歌詞網站
2.加入新效果愈呈現的風格為何:Cry Baby風格比較灰暗,BEcause則是弄成星空的感覺(藍色調)
3.遇到的問題? 打錯或少打程式碼
4.花多少時間製作:加一加有一兩天
5.製作心得:網站內容設定更豐富了,不過也更複雜,做完也有成就感grinning smiley

視2A,1095445005

MEPOERs said:
JinJin: 連結檔案有問題,請修正喔!
(1).作業網址:
作業02網址

(2).請回答以下問題:
1.製作主題:抒情歌曲
2.加入新效果愈呈現的風格為何:顏色配色與效果
3.遇到的問題?有時候會忘記放到語法,就沒出現效果
4.花多少時間製作:一周
5.製作心得:比起第一次作業,整體的效果差很多。做完很有成就感!

班級,視2A 學號 1095445003

網址:

http://my.cute.edu.tw/~1095445035/hw02-1095445035/

請回答以下問題:

1.製作主題:
Hip-Hop

2.加入新效果愈呈現的風格為何:
延續第一次的冷色,但整體暗度增加,語歌詞相互配合,更有雨後憂鬱之感

3.遇到的問題?
語法變得更為複雜,故要來回確認自己的效果是否有成功,也是者透過學長姐的作品以及上網搜尋,來增加效果的可玩性


4.花多少時間製作:
沒有特別去計算

5.製作心得:
在老師說可以使用檢查來模擬效果後便開始努力尋找自己想做的東西,同時在網路上看有沒有可以使用的效果或是方式去呈現我腦中所想像的畫面

視傳2A 1095445035

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

(2).請回答以下問題:
1.製作主題:抒情
2.加入新效果愈呈現的風格為何:插入圖片 更有感覺
3.遇到的問題?程式碼不熟悉
4.花多少時間製作:半個月
5.製作心得:好難啊~~~~

班級 竹視2A,學號1095445030

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

(2).請回答以下問題:
1.製作主題:情歌
2.加入新效果愈呈現的風格為何:2首歌整體呈現粉配藍的戀愛色調
3.遇到的問題? 少了分號,以及配色還有fliezilla的上傳
4.花多少時間製作: 4-5小時
5.製作心得: 有點小崩潰q

班級,學號:視傳2A-1095445053



Edited 1 time(s). Last edit at 11/24/2021 01:01PM by 1095445053.
(編輯記錄)

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

(2).請回答以下問題:
1.製作主題:抒情的華語歌曲
2.加入新效果愈呈現的風格為何:小清新的風格
3.遇到的問題?:有點太複雜~
4.花多少時間製作:4小時多
5.製作心得:做完過後感覺好有成就感,只是不太熟練。

視傳2A-1095445046

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

(2).請回答以下問題:
1.製作主題:情人系列。
2.加入新效果愈呈現的風格為何:溫柔
3.遇到的問題? 語法還是好難喔
4.花多少時間製作:120分鐘
5.製作心得:做完有成就感

視傳2A,1095445039

作業02網址
1.製作主題:伤感抒情歌曲
2.加入新效果愈呈現的風格為何:大海且黯然 新效果的加入让整体有了不一样的感觉
3.遇到的問題? 太多代码 好难记 看得眼花缭乱
4.花多少時間製作:8小时
5.製作心得:太难记得这些代码了, 这些代码太多了看得太乱了,还是有点搞不清

班級 视传2A
學號 1095445044

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

(2).請回答以下問題:
1.製作主題: 讓我印象深刻的歌曲
2.加入新效果愈呈現的風格為何:都是以歌曲風格製作。表達了我從歌曲中感受到的情感和意象。
3.遇到的問題? :找不到寫錯的部分
4.花多少時間製作: 6個小時左右
5.製作心得: 我很有趣試行錯誤以接近理想的表現。

視傳2A 1095445045 高柴彩花

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

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

班級 2A 視傳系,學號 1115445005



Edited 1 time(s). Last edit at 04/25/2024 11:20AM by 1115445005.
(編輯記錄)