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/~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/



Edited 2 time(s). Last edit at 10/12/2021 09:03PM by JinJin.
(編輯記錄)

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

(2).請回答以下問題:
1.製作主題:抒情歌曲
2.呈現之配色風格:小清新及溫暖的風格
3.有無遇到的問題?CSS檔名存錯 next.html忘記存檔
4.花多少時間製作:2小時
5.製作心得:一開始對於網頁設計很陌生,經過老師耐心的教導後,其實還蠻容易上手的,不過有些小細節也要注意,小地方可以看出一個設計師的專業度

竹視傳二A,1095445036

MEPOERs said:
JinJin: 很棒喔!動作很快!
1).作業網址:
作業01網址

(2).請回答以下問題:
1.製作主題: 抒情歌
2.呈現之配色風格: 利用冷色調的顏色,帶給人有種憂鬱,悲傷的感覺
3.有無遇到的問題? 有時候找不到顏色在哪裡改
4.花多少時間製作:一個禮拜
5.製作心得:剛開始很不熟悉,慢慢地比較有經驗了

班級 視傳2A 學號 1095445002

(1).作業網址:
作業01網址
(2).請回答以下問題:
1.製作主題:chill pop
2.呈現之配色風格:復古色調
3.有無遇到的問題? 要記一些語法
4.花多少時間製作:3小時
5.製作心得:製作過程還蠻有趣的,發現了很多網站的架構
班級:視傳2A 學號:1095445041

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

(2).請回答以下問題:
1.製作主題:抒情歌曲
2.呈現之配色風格:小清新!
3.有無遇到的問題?上傳好難...
4.花多少時間製作:2小時
5.製作心得:上傳個作業太難了QQ 而且要認好多指令!

竹視傳二A,1095445040



Edited 1 time(s). Last edit at 10/20/2021 11:45AM by 1095445040.
(編輯記錄)

作業網址:
作業01網址

(2).請回答以下問題:
1.製作主題:感傷抒情、煩惱輕快
2.呈現之配色風格:微微感傷的暗色系、跟歌曲一樣輕快的亮色系
3.有無遇到的問題?有時候會想不到主要的兩個顏色系該怎麼選,同色系會顯得太單調,但不同色系沒選好會有奇怪差異的感覺。
4.花多少時間製作:4天
5.製作心得:打程式編碼蠻麻煩的,打錯一個字可能網頁就會變得很奇怪,但做完覺得非常有成就感,挑戰了一個自己從沒接觸過的東西,很新奇。

視傳2A,1095445010

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

(2).請回答以下問題:
1.製作主題:感傷懷念抒情
2.呈現之配色風格: 溫柔風格
3.有無遇到的問題? :背景顏色改不了、導覽列沒有出現
4.花多少時間製作: 一週
5.製作心得: css語法比較複雜

班級:視傳二A
學號 :1095445024



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

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

(2).請回答以下問題:
1.製作主題:日文歌曲
2.呈現之配色風格:第一首歌"花びらたちのマーチ"(花瓣紛飛的三月)所以我用粉黃配色,第二首歌"願い~あの頃のキミへ~"(把回憶拼好給你)所以我用藍色調為主
3.有無遇到的問題?沒有
4.花多少時間製作:2-3小時
5.製作心得:架網頁其實蠻好玩的,有成就感

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



Edited 2 time(s). Last edit at 10/20/2021 11:47AM by 1095445027.
(編輯記錄)

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

(2).請回答以下問題:
1.製作主題:KPOP
2.呈現之配色風格:第一首My Universe是歌手的代表色紫色為主,第二首I Know I Love You是用這首專輯的主要顏色配色
3.有無遇到的問題?打語法時會打錯
4.花多少時間製作:2~3小時
5.製作心得:一開始會覺得很難,但做完後有成就感

班級:視傳2A 學號:1095445020



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

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

(2).請回答以下問題:
1.製作主題: 歌詞
2.呈現之配色風格:看得舒服
3.有無遇到的問題? 打錯連結
4.花多少時間製作:半小時
5.製作心得: 一開始到好多英文頭就很痛 但當我做完時非常有成就感

班級 :視傳二A
學號 :1095445017

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

(2).請回答以下問題:
1.製作主題:古風&快節奏
2.呈現之配色風格:黯淡的風格
3.有無遇到的問題? 有發現多一些符號,發現是多打了
4.花多少時間製作:課堂時間
5.製作心得:第一次接觸 蠻好玩的 複製貼上很有趣

視2A 1085445038

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

(2).請回答以下問題:
1.製作主題:K-POP
2.呈現之配色風格:稍稍沉重的色調、鮮明的黑紅白。都是配合MV的主要色彩
3.有無遇到的問題? 自己打真的很容易打錯,然後無法使用就會很暴躁、游標滑過連結改圖切換失敗
4.花多少時間製作:課餘時間約2小時吧?
5.製作心得:老師的講義萬歲!配色一直很猶豫,做自己喜歡的歌曲整體而言很快樂。

視傳二A,1095445034



Edited 1 time(s). Last edit at 10/20/2021 11:16AM by 1095445034.
(編輯記錄)

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

(2).請回答以下問題:
1.製作主題:中文歌/英文歌
2.呈現之配色風格:沉重配色
3.有無遇到的問題? 色彩上的搭配
4.花多少時間製作:3~4小時
5.製作心得:第一次做出來的網站,很有成就感

班級 視傳2A
學號 1095445019



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

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

(2).請回答以下問題:
1.製作主題:抒情歌曲
2.呈現之配色風格:低明度色系與藍色調
3.有無遇到的問題? 沒
4.花多少時間製作:2小時
5.製作心得:剛接觸時會覺得很困難受挫 但慢慢了解之後 還可以ㄉ
視傳二A 1095445006



Edited 1 time(s). Last edit at 10/20/2021 11:23AM by 1095445006.
(編輯記錄)

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

(2).請回答以下問題:
1.製作主題:懷舊歌詞
2.呈現之配色風格:懷舊.溫暖
3.有無遇到的問題?找不到哪裡打錯字
4.花多少時間製作:三個禮拜
5.製作心得:做完當下很有成就感,雖然過程有點複雜,但是能學到這項技術很不錯

班級:視二A 學號:1095445026

作業01網址
.請回答以下問題:
1.製作主題:R&B
2.呈現之配色風格:暖色系
3.有無遇到的問題?英文一直拼錯
4.花多少時間製作:2小時
5.製作心得:覺得有點小困難
1095445004 視2A



Edited 2 time(s). Last edit at 11/02/2021 08:20PM by 1095445004.
(編輯記錄)

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

(2).請回答以下問題:
1.製作主題:抒情 / 放鬆
2.呈現之配色風格:使用同色系,偏向於清新不過於複雜(專輯配色)
3.有無遇到的問題? 配色有點難,會不知道要怎麼配才會比較好看
4.花多少時間製作:2天
5.製作心得:
這次製作歌詞網頁真的學到了很多東西,了解到了打編碼真的要有耐心及細心,
經過老師細心教導過,感覺有比較上手了,打完也很有成就感

班級 視2A
學號 1095445031

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

(2).請回答以下問題:
1.製作主題:
2.呈現之配色風格:粉色
3.有無遇到的問題?網址打開沒有變顏色 但Microsoft Edge可以
4.花多少時間製作:三周
5.製作心得:

視傳3A_1085445089

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

(2).請回答以下問題:
1.製作主題:Avid,霧裡
2.呈現之配色風格:Avid:是想呈現出戰爭時塵土瀰漫,但彷彿還有一絲曙光希望 、霧裡:想表現出一個人在霧裡的深處的感覺。
3.有無遇到的問題? 剛開始製作時不太了解,對一些網頁設計的文法也不懂。
4.花多少時間製作:5-6個小時
5.製作心得:剛開始雖然有遇到瓶頸,但經過老師的教導與講解才慢慢理解。

班級:視傳2A 學號:1095445007

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

(2).請回答以下問題:
1.製作主題:輕快歌曲
2.呈現之配色風格:配色使用溫暖的色系歡快的風格,背景使用同色系背景用補色的黃色
3.有無遇到的問題?配色上可能會比較難配到符合的
4.花多少時間製作:三天
5.製作心得:編碼上要記住一些代碼不是容易,會搞混

班級:視2A
學號:1095445025

作業01網址

(2).請回答以下問題:
1.製作主題:英文歌曲
2.呈現之配色風格:清純
3.有無遇到的問題? 上傳, 顏色
4.花多少時間製作:5小時
5.製作心得:學到了不少東西

班級視二A,學號1095445008

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

(2).請回答以下問題:
1.製作主題:花に亡霊 Lemon
2.呈現之配色風格:花に亡霊是憂鬱的藍之中能然有溫暖的黃色,如同"想哭的我戴上了猫的面具"這部電影中的劇情一般,在憂鬱的背後能然有一絲光芒去照亮並改變了深色的藍/Lemon 以較為深沉的黃和帶有黃的藍色讓其與歌中的結局一般即便曾經失去未來還是要帶有希望。
3.有無遇到的問題? 製作初期較為不懂,到了中期就慢慢理解了。
4.花多少時間製作:5~6 小時
5.製作心得:了解到許多的編碼語法,也了解到如製作。

班級:視傳2A 學號:1095445023

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

(2).請回答以下問題:
1.製作主題: 表現歌詞的意思
2.呈現之配色風格: 冷静风格
3.有無遇到的問題?:html語法的意思難了解
4.花多少時間製作: 堂課時間+大概2.3個小時?
5.製作心得: 如果學習多html語法,做網頁更會有趣的

班級,學號 視傳2A 1095445045 高柴彩花

(1).作業網址:
作業01網址
(2).請回答以下問題:
1.製作主題:韓文曲
2.呈現之配色風格:溫暖,歡樂
3.有無遇到的問題:檔案存錯
4.花多少時間製作:3天
5.製作心得:CSS有點難,但做完後很有成就感

視傳2A,1095445032



Edited 4 time(s). Last edit at 10/20/2021 07:36PM by 1095445032江紫瑄.
(編輯記錄)

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

(2).請回答以下問題:
1.製作主題:抒情和輕快
2.呈現之配色風格:暖風格
3.有無遇到的問題? 太多字,有點複雜,需要重複看幾次影片和問別人,而且一個字或一個符號都會影響網頁出問題。
4.花多少時間製作:3小時
5.製作心得:太複雜了,但是希望可以學會,因爲很酷

視傳2A-1095445046

作業01網址

1.製作主題:慵懶
2.呈現之配色風格:藍灰色風格有種舒服紓壓的感覺
3.有無遇到的問題? 語法很長輸入錯誤 沒有把東西放在同一個
4.花多少時間製作:2~3個小時
5.製作心得:要比較有耐心仔細檢查有沒有錯誤 配色上也要搭配歌曲曲風 但總體來說很有趣希望可以多學習這方面的東西



學號:1085443060 姓名:林志熹



Edited 1 time(s). Last edit at 10/29/2021 10:42PM by JinJin.
(編輯記錄)

(1).作業網址:
作業01網址
(2).請回答以下問題:
1.製作主題:抒情伤感歌曲
2.呈現之配色風格:冷色暗色系
3.有無遇到的問題? 打的代码呈现不出画面 结果是因为打错一些标点符号或者字母就会发生改变
4.花多少時間製作: 8-10小时
5.製作心得:刚接触特别难搞,好多代码有时都会搞混,有时打错也不知道然后就一直卡在那边

视传2A 1095445044



Edited 3 time(s). Last edit at 10/27/2021 12:28PM by 1095445044.
(編輯記錄)

作業01網址
1.製作主題:符合歌詞的感覺
2.呈現之配色風格:前:冷色搭配 後:暖冷色搭配
3.有無遇到的問題:css不熟悉 導致製作時間極長
4.花多少時間製作:數不清的久
5.製作心得:學會做網站很棒而且做完很有成就感
1095445015李宜珊

(1).作業網址:
作業01網址
1.製作主題:深色風格
2.呈現之配色風格:冷色搭配
3.有無遇到的問題:css不熟悉
4.花多少時間製作:90分鐘
5.製作心得:雖然很複雜,但學起來之後很好用

班級:視傳2A 學號:1095445014

http://my.cute.edu.tw/~1095445035/hw01-1095445035/index.html

1.製作主題:
Hip-Hop

2.呈現之配色風格:
配合曲調與歌詞,整體採用冷色調。

3.有無遇到的問題?
經常發生一個字或是全形半形輸入問題,導致效果做不出來

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

5.製作心得:
覺得網頁設計很有趣,雖然剛開始在看到英文的時候很頭痛,但了解後就越發覺得有趣。
也希望可以做出更多不一樣,也屬於自己的設計網站。

視傳A 1095445035

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

(2).請回答以下問題:
1.製作主題:日文歌曲(東卍)
2.呈現之配色風格:灰暗風及比較明亮的風格
3.有無遇到的問題? 語法輸入錯誤導致不能置中等問題
4.花多少時間製作:3~4小時
5.製作心得:的確剛開始接觸比較困難,坐久了比較熟悉一點會很有成就感

竹視傳二A,1095445005

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

(2).請回答以下問題:
1.製作主題:抒情
2.呈現之配色風格:一個灰暗難過,一個寮望無際
3.有無遇到的問題? 無
4.花多少時間製作:1天
5.製作心得:第一次學網頁設計語法,好多東西做出來都會有種好新奇的感覺,原來網頁是這麼做出來的阿!

班級: 視傳2A ,學號:1091445025

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

(2).請回答以下問題:
1.製作主題:抒情歌曲
2.呈現之配色風格:依照歌詞給予我的感覺去配色
3.有無遇到的問題?需要花較多時間去理解語法
4.花多少時間製作:兩天
5.製作心得:沒有想像中困難,過程還滿有趣的,雖然有時會遇到令人不解的問題,但總體來說還可以。

視傳2A 1091445071

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

(2).請回答以下問題:
1.製作主題:抒情歌
2.呈現之配色風格:廣大、寧靜
3.有無遇到的問題?程式碼好亂!!
4.花多少時間製作:2小時
5.製作心得:雖然過程有點複雜,但做成一個網頁還蠻有成就感的!

班級,視二A 學號 1095445003

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

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

班級,學號 3A 1105245001

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

(2).請回答以下問題:
1.製作主題:心靈音樂
2.呈現之配色風格:戀愛的粉紅泡泡/黑暗的一片光屬光
3.有無遇到的問題?顏色配色的障礙
4.花多少時間製作:非常多
5.製作心得:繁瑣的程式碼,卻可以稱產出屬於自己的網頁

班級視2A,學號1095445030

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

(2).請回答以下問題:
1.製作主題:憂傷
2.呈現之配色風格: 紫色和紅色系
3.有無遇到的問題? 標題的字體大少改不了
4.花多少時間製作:2星期
5.製作心得:需要好好記住制作效果的code 而且要多嘗試不同的效果

班級3A,學號1105245002

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

(2).請回答以下問題:
1.製作主題:《鬼滅之刃》第一季-紅蓮華&《鬼滅之刃》無限列車-炎
2.呈現之配色風格:《鬼滅之刃》不同角色顏色與歌詞的搭配
3.有無遇到的問題? 有 跟上進度與理解不佳
4.花多少時間製作:從開學到現在
5.製作心得:有老師的陪伴,我很開心。在面對困難的時候,老師與我一同面對,我一直相信,我辦得到的,我很感激老師的陪伴,謝謝您。grinning smiley

班級,學號 視傳4A 1075445001

(1).作業網址:


作業01網址


(2).請回答以下問題:
1.製作主題:周董歌單
2.呈現之配色風格:晴天以暖色系為主,代表著陽光、暖心。安靜用冷色系為主,代表孤獨、沉靜、冷漠。
3.有無遇到的問題?有時會不小心打錯指令,導致畫面沒有達到理想狀況
4.花多少時間製作:約兩天
5.製作心得:畫面呈現雖然簡單,但是在製作時需要分成很多不同部份製作,也需要細心檢查。

班級:視傳4A 學號:1075445013



Edited 2 time(s). Last edit at 11/10/2021 11:49AM by 1075445013.
(編輯記錄)

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

(2).請回答以下問題:
1.製作主題:冷與暖
2.呈現之配色風格:配合歌曲悲傷或者激動
3.有無遇到的問題? 字常常看得有點亂
4.花多少時間製作:很長
5.製作心得:
做完會有點小成就感,但還是很難

班級,學號
視4A、1065445151



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

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

(2).請回答以下問題:
1.製作主題:情歌
2.呈現之配色風格:標準紅配藍
3.有無遇到的問題?還可以
4.花多少時間製作:2小時
5.製作心得:基於之前的經驗對於網頁有一定的認識,看著自己獨利完成網頁感到感動。

竹視傳二A,1095445053

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

(2).請回答以下問題:
1.製作主題:符合歌曲的顏色
2.呈現之配色風格:冷色和暖色做協調
3.有無遇到的問題:語法好難!
4.花多少時間製作:150分鐘
5.製作心得:做出來很有成就感

班級:視傳2A 學號:1095445039

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

(2).請回答以下問題:
1.製作主題:
流行歌曲~莫文蔚 無奈地大聲喊叫、打破了黑夜的寧夜,就像宣告自己即將離開感情的三個人的生活、
一旦決定了,就無法再回頭,對他、對她、對自己,無論結局如何、多少都會留下傷口。
2.呈現之配色風格
很傷感的歌,很喜歡莫文蔚 失戀的顏色,是身上帶點灰的藍色, 藍藍的灰,又像是我心裡_陰暗的天.很悲 也想大聲說出來
3.有無遇到的問題?
A語法錯誤:在編碼中有一些拼字錯誤導致程式完全或部分沒有正常運作。工具熟悉了解錯誤訊息的意思,通常很好修正!
B邏輯錯誤:這種錯誤代表程式碼的語法正確,這種錯誤通常比語法錯誤還要難修正,。
4.花多少時間製作:
整整一週
5.製作心得:構建出自己的一套寫作風格,有一天就會發現自己可以獨立思考,不加思索的寫出自己原創的效果,這感覺真的相當開心。
老師的教案 真的有夠精彩 比補習班自編教材還更強 老師非常認真 用心 教學經驗累積數10年而成的。


班級 視傳系 碩一A班
學號 1125745012

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

(2).請回答以下問題:
1.製作主題:
流行歌曲~莫文蔚 無奈地大聲喊叫、打破了黑夜的寧夜,就像宣告自己即將離開感情的三個人的生活、
一旦決定了,就無法再回頭,對他、對她、對自己,無論結局如何、多少都會留下傷口。
2.呈現之配色風格
很傷感的歌,很喜歡莫文蔚 失戀的顏色,是身上帶點灰的藍色, 藍藍的灰,又像是我心裡_陰暗的天.很悲 也想大聲說出來
3.有無遇到的問題?
A語法錯誤:在編碼中有一些拼字錯誤導致程式完全或部分沒有正常運作。工具熟悉了解錯誤訊息的意思,通常很好修正!
B邏輯錯誤:這種錯誤代表程式碼的語法正確,這種錯誤通常比語法錯誤還要難修正,。
4.花多少時間製作:
整整一週
5.製作心得:構建出自己的一套寫作風格,有一天就會發現自己可以獨立思考,不加思索的寫出自己原創的效果,這感覺真的相當開心。
老師的教案 真的有夠精彩 比補習班自編教材還更強 老師非常認真 用心 教學經驗累積數10年而成的。


班級 視傳系 碩一A班
學號 1125745012

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

(2).請回答以下問題:
1.製作主題: 歌詞基礎修改
2.呈現之配色風格: 粉紅
3.有無遇到的問題? 有 蠻多的
4.花多少時間製作:2周
5.製作心得:為了工作(職場需要) 還是要忍耐加緊學習

班級 碩一A班
學號 1125745012

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

(2).請回答以下問題:
1.製作主題:歌詞網頁
2.呈現之配色風格:根據歌主題配色
3.有無遇到的問題?有 語法不夠熟練
4.花多少時間製作:3小時
5.製作心得:好玩

班級,學號1115448030

作業01網址

(2).請回答以下問題:
1.製作主題:與其愛你、水查
2.呈現之配色風格:藍色系
3.有無遇到的問題?進度有點快
4.花多少時間製作:兩三周
5.製作心得:有點複雜

班級:視傳2A
學號:1115445051