[作業01] html-css基礎概念練習-歌詞篇

[作業01] html-css基礎概念練習-歌詞篇

1. 製作說明

歌詞作業範例：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上傳自己製作的網頁到雲端空間，成為自己專屬的網頁。

2. 教學影片

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

https://youtu.be/Uq011dmJkv8

---

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

https://youtu.be/sqEV6TSnxDw

3. 繳交作業方式

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

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

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

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


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

資料夾內含：
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/~10914450XX/hw01-10914450XX/" target="_blank">作業01網址</a>
(2).請回答以下問題：
1.製作主題：
2.呈現之配色風格：
3.有無遇到的問題?
4.花多少時間製作：
5.製作心得：

班級，學號

---

學長姐範例：
1091445002
1091445008
1091445052

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

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

視覺傳達2A，1115445008

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

(2).請回答以下問題：
1.製作主題：歌詞
2.呈現之配色風格：個人喜好
3.有無遇到的問題?眼睛花掉
4.花多少時間製作：2個禮拜
5.製作心得：很有成就

班級，學號
視傳2A1115445015

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

(2).請回答以下問題：
1.製作主題：歌詞
2.呈現之配色風格：符合歌詞內容的顏色
3.有無遇到的問題?電腦奇怪
4.花多少時間製作：三個禮拜
5.製作心得：很好

視傳2A 1115445020奧野詩

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

(2).請回答以下問題：
1.製作主題：歌詞
2.呈現之配色風格：根據該音樂相關的人的服裝配色為參考
3.有無遇到的問題?除了眼花以外都沒有
4.花多少時間製作：5小時(製作時間) 大多時間都在調整
5.製作心得：要把代碼的順序調好會比較好做

視傳4A1075445009



(編輯記錄)

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

(2).請回答以下問題：
1.製作主題：認真的雪/天外來物
2.呈現之配色風格：馬卡龍色
3.有無遇到的問題?沒什麼問題
4.花多少時間製作：3~4堂課
5.製作心得：沒什麼心得

班級:視2A，學號:1115445010

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

(2).請回答以下問題：
1.製作主題：韓團歌曲歌詞
2.呈現之配色風格：鮮明
3.有無遇到的問題? 有，不小心打錯代碼
4.花多少時間製作：幾堂課的時間
5.製作心得：第一次體驗自己架設網站，很新奇也了解到不容易

視傳2A 1115445012

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

(2).請回答以下問題：
1.製作主題：歌詞
2.呈現之配色風格：橘色和藍白色
3.有無遇到的問題? 目前 無
4.花多少時間製作：上課時間和回家2個小時
5.製作心得：無

班級 視傳2A ，學號 1115445009

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

(2).請回答以下問題：
1.製作主題：天使、菊花台
2.呈現之配色風格：天使:冷色系 菊花台:暖色系
3.有無遇到的問題:代碼有些無法成功記住或打錯
4.花多少時間製作：三周
5.製作心得：我希望能找老師約時間練習

班級 2A視傳系，學號:1115445005

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

(2).請回答以下問題：
1.製作主題：愛是/Never Let Me Down Again
2.呈現之配色風格：清新/強烈
3.有無遇到的問題? 調整配色花了比較多時間
4.花多少時間製作：4~5hr
5.製作心得：做出自己的歌詞網頁，真的可以在網頁搜尋到覺得超級酷

視2A 1115445004

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

(2).請回答以下問題：
1.製作主題：歌詞
2.呈現之配色風根據 顏色跟歌詞相呼應
3.有無遇到的問題?無
4.花多少時間製作：4小時
5.製作心得：讚

班級，學號
視2a 1115448030

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

(2).請回答以下問題：
1.製作主題：hot like sun、要確
2.呈現之配色風格：都是用他們團體的顏色來搭配
3.有無遇到的問題?有，上傳的時候內容沒有改變
4.花多少時間製作：花不少時間
5.製作心得：剛開始製作的時候是有點麻煩，出錯的地方也很多，但到了後面就開始慢慢熟悉，製作起來也變輕鬆多了。

班級，學號
視傳二A-1115445025

1).作業網址：
作業01網址

(2).請回答以下問題：
1.製作主題：歌詞分享
2.呈現之配色風格：呼應歌曲意境
3.有無遇到的問題? 有，但是都解決了
4.花多少時間製作： 兩個禮拜
5.製作心得： 很有趣

班級，學號 視傳2A 1115445028 林佩瑩

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

(2).請回答以下問題：
1.製作主題：歌詞
2.呈現之配色風格：根據自己聽到歌曲的感覺
3.有無遇到的問題? 有 另一篇歌詞頁跑掉
4.花多少時間製作：3~4天
5.製作心得：覺得很有趣,也很複雜

視2A-1115445053

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

(2).請回答以下問題：
1.製作主題：Pink Venom. pretty savage
2.呈現之配色風格：粉色
3.有無遇到的問題?無
4.花多少時間製作：3.4堂課
5.製作心得：很棒

班級，學號 :視傳2A1115445011

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

(2).請回答以下問題：
1.製作主題：歌詞 : La Verdad / 他舉起右手點名
2.呈現之配色風格：天藍(溫雅)/紅(強烈)
3.有無遇到的問題?有，後來解決了
4.花多少時間製作：課堂中與課餘幾小時
5.製作心得：操作比較複雜，不過很有趣

視傳2A 1115445007