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

Advanced

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

[作業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



Edited 3 time(s). Last edit at 03/28/2024 11:20AM by 1075445009.
(編輯記錄)

(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

(1).作業網址:
http://127.0.0.1:6848/preview/app/index.html

(2).請回答以下問題:
1.製作主題:我們這一家
2.呈現之配色風格:可愛的配色
3.有無遇到的問題? DW的不熟悉的操作
4.花多少時間製作:2-3
5.製作心得:還蠻困難的

班級,學號
2A 1115445018

(1).作業網址:
http://127.0.0.1:6848/preview/app/index.html

(2).請回答以下問題:
1.製作主題:我們這一家
2.呈現之配色風格:可愛的配色
3.有無遇到的問題? DW的不熟悉的操作
4.花多少時間製作:2-3
5.製作心得:還蠻困難的

班級,學號
2A 1115445018