[作業01] html-css基礎概念練習-歌詞篇 製作說明 歌詞作業範例：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上傳自己製作的網頁到雲端空間，成為自己專屬的網頁。 教學影片 1.HTML CSS基礎概念練習一 html架構與內容建置 https://youtu.be/Uq011dmJkv8 2.HTML-CSS基礎概念練習（二） css視覺設定解析 https://youtu.be/sqEV6TSnxDw 繳交作業方式 製作完成後，檔案命名方式： 第一個作業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-學號 > 的資夾內 以FileZilla上傳至FTP 回覆本篇文章 (1).作業網址： 作業01網址 (2).請回答以下問題： 1.製作主題： 2.呈現之配色風格： 3.有無遇到的問題? 4.花多少時間製作： 5.製作心得： 班級，學號 學長姐範例： http://cute.mepopedia.com/~web107a/hw01/hw01-1055440119-1/ http://cute.mepopedia.com/~web107a/hw01/hw01-1075445010/ http://mepopedia.com/forum/read.php?2893,92951,92951#msg-92951 Tue, 25 Aug 2026 22:57:21 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?2893,92951,94590#msg-94590 http://mepopedia.com/forum/read.php?2893,92951,94590#msg-94590 作業01網址

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

班級:視傳2A
學號:1115445051]]> 1115445051 110-1《中國》竹視傳二A-網頁設計 Thu, 28 Mar 2024 11:56:15 +0800 http://mepopedia.com/forum/read.php?2893,92951,94586#msg-94586 http://mepopedia.com/forum/read.php?2893,92951,94586#msg-94586 作業01網址

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

班級，學號1115448030]]> 1115448030 110-1《中國》竹視傳二A-網頁設計 Thu, 28 Mar 2024 11:32:13 +0800 http://mepopedia.com/forum/read.php?2893,92951,94583#msg-94583 http://mepopedia.com/forum/read.php?2893,92951,94583#msg-94583 作業01網址

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

班級 碩一A班
學號 1125745012]]> 1125745012 110-1《中國》竹視傳二A-網頁設計 Thu, 28 Mar 2024 11:24:32 +0800 http://mepopedia.com/forum/read.php?2893,92951,94571#msg-94571 http://mepopedia.com/forum/read.php?2893,92951,94571#msg-94571 作業01網址

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


班級 視傳系 碩一A班
學號 1125745012]]> 1125745012 110-1《中國》竹視傳二A-網頁設計 Wed, 13 Mar 2024 21:31:23 +0800 http://mepopedia.com/forum/read.php?2893,92951,94570#msg-94570 http://mepopedia.com/forum/read.php?2893,92951,94570#msg-94570 作業01網址

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


班級 視傳系 碩一A班
學號 1125745012]]> 1125745012 110-1《中國》竹視傳二A-網頁設計 Wed, 13 Mar 2024 21:31:28 +0800 http://mepopedia.com/forum/read.php?2893,92951,93171#msg-93171 http://mepopedia.com/forum/read.php?2893,92951,93171#msg-93171 作業01網址

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

班級:視傳2A 學號:1095445039]]> 1095445039 110-1《中國》竹視傳二A-網頁設計 Wed, 24 Nov 2021 13:19:55 +0800 http://mepopedia.com/forum/read.php?2893,92951,93166#msg-93166 http://mepopedia.com/forum/read.php?2893,92951,93166#msg-93166 作業01網址

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

竹視傳二A，1095445053]]> 1095445053 110-1《中國》竹視傳二A-網頁設計 Wed, 24 Nov 2021 13:02:26 +0800 http://mepopedia.com/forum/read.php?2893,92951,93115#msg-93115 http://mepopedia.com/forum/read.php?2893,92951,93115#msg-93115 作業01網址

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

班級，學號
視4A、1065445151]]> 1065445151 110-1《中國》竹視傳二A-網頁設計 Wed, 10 Nov 2021 12:20:24 +0800 http://mepopedia.com/forum/read.php?2893,92951,93114#msg-93114 http://mepopedia.com/forum/read.php?2893,92951,93114#msg-93114

作業01網址


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

班級:視傳4A 學號:1075445013]]> 1075445013 110-1《中國》竹視傳二A-網頁設計 Wed, 10 Nov 2021 11:46:25 +0800 http://mepopedia.com/forum/read.php?2893,92951,93113#msg-93113 http://mepopedia.com/forum/read.php?2893,92951,93113#msg-93113 作業01網址

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

班級，學號 視傳4A 1075445001]]> 1075445001 110-1《中國》竹視傳二A-網頁設計 Wed, 10 Nov 2021 11:26:09 +0800 http://mepopedia.com/forum/read.php?2893,92951,93104#msg-93104 http://mepopedia.com/forum/read.php?2893,92951,93104#msg-93104 作業01網址

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

班級3A，學號1105245002]]> 1105245002 110-1《中國》竹視傳二A-網頁設計 Wed, 03 Nov 2021 12:03:35 +0800 http://mepopedia.com/forum/read.php?2893,92951,93103#msg-93103 http://mepopedia.com/forum/read.php?2893,92951,93103#msg-93103 作業01網址

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

班級視2A，學號1095445030]]> 1095445030 110-1《中國》竹視傳二A-網頁設計 Wed, 03 Nov 2021 12:02:28 +0800 http://mepopedia.com/forum/read.php?2893,92951,93102#msg-93102 http://mepopedia.com/forum/read.php?2893,92951,93102#msg-93102 作業01網址

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

班級，學號 3A 1105245001]]> 1105245001 110-1《中國》竹視傳二A-網頁設計 Wed, 03 Nov 2021 11:44:14 +0800 http://mepopedia.com/forum/read.php?2893,92951,93101#msg-93101 http://mepopedia.com/forum/read.php?2893,92951,93101#msg-93101 作業01網址

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

班級，視二A 學號 1095445003]]> 1095445003 110-1《中國》竹視傳二A-網頁設計 Wed, 03 Nov 2021 11:15:52 +0800 http://mepopedia.com/forum/read.php?2893,92951,93051#msg-93051 http://mepopedia.com/forum/read.php?2893,92951,93051#msg-93051 作業01網址

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

視傳2A 1091445071]]> 1091445071 110-1《中國》竹視傳二A-網頁設計 Mon, 01 Nov 2021 13:34:45 +0800 http://mepopedia.com/forum/read.php?2893,92951,93050#msg-93050 http://mepopedia.com/forum/read.php?2893,92951,93050#msg-93050 作業01網址

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

班級: 視傳2A ，學號:1091445025]]> 1091445025 110-1《中國》竹視傳二A-網頁設計 Mon, 01 Nov 2021 13:34:41 +0800 http://mepopedia.com/forum/read.php?2893,92951,93022#msg-93022 http://mepopedia.com/forum/read.php?2893,92951,93022#msg-93022 作業01網址

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

竹視傳二A，1095445005]]> 1095445005 110-1《中國》竹視傳二A-網頁設計 Wed, 20 Oct 2021 12:13:45 +0800 http://mepopedia.com/forum/read.php?2893,92951,93013#msg-93013 http://mepopedia.com/forum/read.php?2893,92951,93013#msg-93013
1.製作主題：
Hip-Hop

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

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

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

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

視傳A 1095445035]]> 1095445035 110-1《中國》竹視傳二A-網頁設計 Wed, 27 Oct 2021 12:17:06 +0800 http://mepopedia.com/forum/read.php?2893,92951,93012#msg-93012 http://mepopedia.com/forum/read.php?2893,92951,93012#msg-93012 作業01網址
1.製作主題:深色風格
2.呈現之配色風格：冷色搭配
3.有無遇到的問題:css不熟悉
4.花多少時間製作：90分鐘
5.製作心得：雖然很複雜，但學起來之後很好用

班級:視傳2A 學號:1095445014]]> 1095445014 110-1《中國》竹視傳二A-網頁設計 Wed, 27 Oct 2021 11:23:46 +0800 http://mepopedia.com/forum/read.php?2893,92951,93011#msg-93011 http://mepopedia.com/forum/read.php?2893,92951,93011#msg-93011 作業01網址
1.製作主題:符合歌詞的感覺
2.呈現之配色風格：前:冷色搭配 後:暖冷色搭配
3.有無遇到的問題:css不熟悉 導致製作時間極長
4.花多少時間製作：數不清的久
5.製作心得：學會做網站很棒而且做完很有成就感
1095445015李宜珊]]> 1095445015 110-1《中國》竹視傳二A-網頁設計 Wed, 27 Oct 2021 11:23:40 +0800 http://mepopedia.com/forum/read.php?2893,92951,93010#msg-93010 http://mepopedia.com/forum/read.php?2893,92951,93010#msg-93010 作業01網址
(2).請回答以下問題：
1.製作主題：抒情伤感歌曲
2.呈現之配色風格：冷色暗色系
3.有無遇到的問題? 打的代码呈现不出画面 结果是因为打错一些标点符号或者字母就会发生改变
4.花多少時間製作： 8-10小时
5.製作心得：刚接触特别难搞,好多代码有时都会搞混,有时打错也不知道然后就一直卡在那边

视传2A 1095445044]]> 1095445044 110-1《中國》竹視傳二A-網頁設計 Wed, 27 Oct 2021 11:20:47 +0800 http://mepopedia.com/forum/read.php?2893,92951,93007#msg-93007 http://mepopedia.com/forum/read.php?2893,92951,93007#msg-93007 作業01網址

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



學號:1085443060 姓名:林志熹]]> zhixilin 110-1《中國》竹視傳二A-網頁設計 Wed, 27 Oct 2021 11:02:59 +0800 http://mepopedia.com/forum/read.php?2893,92951,92989#msg-92989 http://mepopedia.com/forum/read.php?2893,92951,92989#msg-92989 作業01網址

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

視傳2A-1095445046]]> 1095445046 110-1《中國》竹視傳二A-網頁設計 Wed, 20 Oct 2021 12:52:02 +0800 http://mepopedia.com/forum/read.php?2893,92951,92988#msg-92988 http://mepopedia.com/forum/read.php?2893,92951,92988#msg-92988 作業01網址
(2).請回答以下問題：
1.製作主題：韓文曲
2.呈現之配色風格：溫暖,歡樂
3.有無遇到的問題:檔案存錯
4.花多少時間製作：3天
5.製作心得：CSS有點難,但做完後很有成就感

視傳2A，1095445032]]> 1095445032江紫瑄 110-1《中國》竹視傳二A-網頁設計 Wed, 20 Oct 2021 12:27:39 +0800 http://mepopedia.com/forum/read.php?2893,92951,92987#msg-92987 http://mepopedia.com/forum/read.php?2893,92951,92987#msg-92987 作業01網址

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

班級，學號　視傳2A 1095445045 高柴彩花]]> 1095445045 110-1《中國》竹視傳二A-網頁設計 Wed, 20 Oct 2021 12:23:35 +0800 http://mepopedia.com/forum/read.php?2893,92951,92986#msg-92986 http://mepopedia.com/forum/read.php?2893,92951,92986#msg-92986 作業01網址

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

班級:視傳2A 學號:1095445023]]> 黑皮 110-1《中國》竹視傳二A-網頁設計 Wed, 20 Oct 2021 12:20:00 +0800 http://mepopedia.com/forum/read.php?2893,92951,92983#msg-92983 http://mepopedia.com/forum/read.php?2893,92951,92983#msg-92983 作業01網址

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

班級視二A，學號1095445008]]> 1095445008 110-1《中國》竹視傳二A-網頁設計 Wed, 20 Oct 2021 12:12:04 +0800 http://mepopedia.com/forum/read.php?2893,92951,92982#msg-92982 http://mepopedia.com/forum/read.php?2893,92951,92982#msg-92982 作業01網址

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

班級:視2A
學號:1095445025]]> 1095445025 110-1《中國》竹視傳二A-網頁設計 Wed, 20 Oct 2021 12:06:45 +0800 http://mepopedia.com/forum/read.php?2893,92951,92981#msg-92981 http://mepopedia.com/forum/read.php?2893,92951,92981#msg-92981 作業01網址

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

班級:視傳2A 學號:1095445007]]> 1095445007 110-1《中國》竹視傳二A-網頁設計 Wed, 20 Oct 2021 11:48:16 +0800 http://mepopedia.com/forum/read.php?2893,92951,92980#msg-92980 http://mepopedia.com/forum/read.php?2893,92951,92980#msg-92980 作業01網址

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

視傳3A_1085445089]]> 1085445089 110-1《中國》竹視傳二A-網頁設計 Wed, 20 Oct 2021 11:45:10 +0800