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

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

歌詞作業範例：http://jinjin.mepopedia.com/~jinjin/hw/hw01

1. 製作說明

1.請參考

[url=http://jinjin.mepopedia.com/~jinjin/webdesign-notes/homeworks.html#hw01][講義] html-css基礎概念練習-歌詞篇製作說明[/url] 的步驟製作。

2.每個同學記得在title的部分打上『歌詞名稱』。

3.自行選擇兩首歌詞，設定歌詞風格，依照所設定風格進行配色。

4.footer請設定個人的專屬版權聲明，並註明『本網頁為作業之用，如有侵權敬請告知』字樣。

5.以FileZilla上傳至FTP

6.本次作業的重點在於：

[color=#CC0000](1)認識基礎html網頁架構
(2)認識css基礎語法，利用單純色彩搭配字體設定設計出具有與歌詞意境吻合網頁[/color]

2. 教學影片

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

https://youtu.be/Uq011dmJkv8

---

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

https://youtu.be/sqEV6TSnxDw

3. 繳交作業方式

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

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

每位同學請將自己的資料夾命名為：hw01-學號
這個作業的網址則為:http://cute.mepopedia.com/~web107b/hw01/hw01-107xxxxxxx

資料夾內含：
1.html部分：首頁命名為index.html，第二個檔名為next.html
2.css部分：命名為style.css與style2.css

存放在 < hw01-學號 > 的資夾內

2. 上傳至FTP

3. 回覆本篇文章

(1).作業網址：http://cute.mepopedia.com/~web107b/hw01/hw01-107xxxxxxx

(2).請回答以下問題：
1.製作主題：
2.欲呈現之配色風格：
3.有無遇到的問題?
4.花多少時間製作：
5.製作心得：



(編輯記錄)

1.製作主題：夢如水
2.欲呈現之配色風格：憂鬱風格
3.有無遇到的問題? 不夠孰悉程式名稱和容易搞混
4.花多少時間製作： 1天
5.製作心得：很開心可以自己學會做出歌與第二首歌的連結，自己也能嘗試做出屬於自己的網頁。



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107b/hw01/hw01-1075445032
1.製作主題： 悲痛
2.欲呈現之配色風格:憂傷
3.有無遇到的問題? 有很多還不夠孰悉程式名稱和容易搞混連結的部分一直用不好
4.花多少時間製作： 2天
5.製作心得：這是一個非常大的挑戰，很有挑戰力，希望以後越用越上手



(編輯記錄)

(1).作業網址：http://cute.mepopedia.com/~web107b/hw01/hw01-1075445077/next.html
(2).請回答以下問題：
1.製作主題：唯美愛情
2.欲呈現之配色風格： 粉嫩
3.有無遇到的問題?沒有問題
4.花多少時間製作：一天
5.製作心得：做出來很有成就

http://cute.mepopedia.com/~web107b/hw01/hw01-1075445004
1.製作主題：感動虐心的歌
2.欲呈現之配色風格：優美動人
3.有無遇到的問題? ：一開始根本不了解語法，也不知道要怎麼應用，也聽不太懂，以前沒有接觸過這一方面
4.花多少時間製作：3天
5.製作心得：自己在過程中努力的去研究，試著自己去找出答案，重要的是，雖然花了很多時間，不過能夠自己做完真的很有成就感



(編輯記錄)

1.製作主題：流行樂
2.欲呈現之配色風格：優美動人
3.有無遇到的問題? ：一開始根本不了解語法
4.花多少時間製作：7天
5.製作心得：從不會到會

(1).作業網址：http://cute.mepopedia.com/~web107b/hw01/hw01-1045445134

(2).請回答以下問題：
1.製作主題： 黎明
2.欲呈現之配色風格：藍色與黃色
3.有無遇到的問題? 無
4.花多少時間製作： 3hr
5.製作心得：終於弄好超連結了好感動

http://cute.mepopedia.com/~web107b/hw01/hw01-1075445034
有無遇到的問題:無
視覺傳達設計系一B 1075445034 鄭詳霖

行三A 1055433049 鍾逸玟
(1).作業網址：http://cute.mepopedia.com/~web107b/hw01/hw01-1055433049/

(2).請回答以下問題：
1.製作主題：珍惜感情
2.欲呈現之配色風格： 柔和跟明亮
3.有無遇到的問題? 剛開始不太懂怎麼製作網頁，很容易忘記，感謝老師有錄成影片，讓我一直練習，我也會了
4.花多少時間製作： 1個禮拜多
5.製作心得：真的很感謝老師錄成影片給我們看，讓我一直練習，到最後都不用看影片，我就會了，我學會如何做一個網頁，也學習到編輯軟體的操作，我不太會用軟體，現在的我有慢慢地上手了

http://cute.mepopedia.com/~web107b/hw01/hw01-1075445072/

沒有遇到問題,只是剛學習還很不熟悉
視傳1B朱廷翌

(1).作業網址：http://cute.mepopedia.com/~web107b/hw01/hw01-1075445080
有無遇到的問題:無
視覺傳達設計系一年B班 1075445080 陳俊宏

(1).作業網址：http://cute.mepopedia.com/~web107b/hw01/hw01-1075445067
(2).請回答以下問題：
1.製作主題： 對比色
2.欲呈現之配色風格： 悲傷
3.有無遇到的問題? 不小心會把檔案名稱路徑打錯
4.花多少時間製作： 4小時左右
5.製作心得：因為不熟練花了一些時間摸索

作業網址：http://cute.mepopedia.com/~web107b/hw01/hw01-1075445070

1.製作主題： 快樂追星w
2.欲呈現之配色風格： 粉紅泡泡
3.有無遇到的問題? 覺得好難喔
4.花多少時間製作：兩天
5.製作心得：因為不太會所以研究了好久，有時候還不知道自己按了什麼，
然後常常混亂都不知道自己做到哪了，不過完成了感覺很有成就感XD

作業網址：http://cute.mepopedia.com/~web107b/hw01/hw01-1075445068

1.製作主題： wanna one
2.欲呈現之配色風格：直覺配色
3.有無遇到的問題? 有時忘記指令
4.花多少時間製作：4.5小時
5.製作心得：做完很有成就感

.製作主題： 療傷歌曲
2.欲呈現之配色風格： 簡約
3.有無遇到的問題?
4.花多少時間製作：2小時
5.製作心得：

(1).作業網址：http://cute.mepopedia.com/~web107a/hw01/hw01-1075445036
1.製作主題：夢如水
2.欲呈現之配色風格：憂鬱風格
3.有無遇到的問題? 不夠孰悉程式名稱和容易搞混
4.花多少時間製作： 1天
5.製作心得：很開心可以自己學會做出歌與第二首歌的連結，自己也能嘗試做出屬於自己的網頁。

(1).作業網址：http://cute.mepopedia.com/~web107b/hw01/hw01-1055433048

(2).請回答以下問題：
1.製作主題：渴望幸福
2.欲呈現之配色風格：彩色與黑白
3.有無遇到的問題? 沒有遇到問題
4.花多少時間製作：3天
5.製作心得：透過這堂課讓我學習如何製作一個網頁，也讓我學習透過歌詞的意境來做配色。

行管三A 1055433048 葉珈昀

http://cute.mepopedia.com/~web107b/hw01/hw01-1075445076

1b 1075445076 莊傑宇



(編輯記錄)

(1).作業網址：http://cute.mepopedia.com/~web107b/hw01/hw01-1075445062

(2).請回答以下問題：
1.製作主題： 彩虹
2.欲呈現之配色風格： 活潑 陽光
3.有無遇到的問題? 有
4.花多少時間製作： 1小時
5.製作心得：學到怎麼配顏色

1075445062 Wrote:
-------------------------------------------------------
> (1).作業網址：http://cute.mepopedia.com/~web107b/hw01/hw01-1075445062
> (2).請回答以下問題：
> 1.製作主題： 彩虹
> 2.欲呈現之配色風格： 活潑和陽光
> 3.有無遇到的問題? 有
> 4.花多少時間製作：1天
> 5.製作心得：在過程中遇到很多困難，現在有比較了解了，希望可以越來越熟。

作業網址：http://cute.mepopedia.com/~web107b/hw01/hw01-1075445045/
1.製作主題：悲情的歌曲
2.欲呈現之配色風格： 憂鬱的藍色跟陳年祕密的棕色
3.有無遇到的問題? 一開始很多問題之後看影片解決了
4.花多少時間製作： 3天
5.製作心得：配色很有趣

作業網址：http://cute.mepopedia.com/~web107b/hw01/hw01-1075445086/index.html
1.製作主題： 日本童謠
2.欲呈現之配色風格：可愛
3.有無遇到的問題? ：有
4.花多少時間製作：2天
5.製作心得：配色很有趣



(編輯記錄)

作業網址:http://cute.mepopedia.com/~web107b/hw01/hw01-1075445023/
1.製作主題： 流行抒情歌
2.欲呈現之配色風格：依照歌詞的感覺來配色
3.有無遇到的問題? 網址沒辦法改
4.花多少時間製作： 5天
5.製作心得：覺得做網頁設計非常困難



(編輯記錄)

sftp://web107b@cute.mepopedia.com/home/web107b/public_html/hw01/hw01-1075445033

網址應該是
http://cute.mepopedia.com/~web107b/hw01/hw01-1075445033/

1.製作主題: 讓人感動欣慰溫暖的歌
2.欲呈現之配色風格： 乾淨沉穩的
3.有無遇到的問題? :連結一直不成功
4.花多少時間製作：1hr
5.製作心得：還蠻好玩的，不過連結一直不成功會瘋掉



(編輯記錄)

http://cute.mepopedia.com/~web107b/hw01/hw01-1075445004
1.製作主題：讓人感動虐心的歌
2.欲呈現之配色風格：優美動人
3.有無遇到的問題? ：一開始根本不了解語法，也不知道要怎麼應用，也聽不太懂，以前沒有接觸過這一方面
4.花多少時間製作：7天
5.製作心得：從不會到會，自己在過程中努力的去研究，試著自己去找出答案，重要的是，在過程中我學習到了很多，雖然花了很多時間，不過能夠自己做完真的很有成就感

sftp://web107b@cute.mepopedia.com/home/web107b/public_html/hw01/hw01-1075445019

網址應該是
http://cute.mepopedia.com/~web107b/hw01/hw01-1075445019/



(編輯記錄)

(1).作業網址:http://cute.mepopedia.com/~web107b/hw01/hw01-1075445015/
(2)
1.製作主題: 傷
2.欲呈現之配色風格:簡約,灰白呈現傷痛的感
3.有無遇到的問題? 大致上是無
4.花多少時間製作: 1禮拜
5.製作心得：從不會到會,也謝謝朋友這麼熱心教導.

(1).作業網址：http://cute.mepopedia.com/~web107b/hw01/hw01-1075445007/next.html

(2).請回答以下問題：
1.製作主題： 少女
2.欲呈現之配色風格： 藍紫色
3.有無遇到的問題? 一開始會不懂網頁的語法
4.花多少時間製作： 1個禮拜
5.製作心得：從無到有，覺得很有成就感

(1).作業網址：http://cute.mepopedia.com/~web107b/hw01/hw01-1075445060


1.製作主題： 悲傷憂鬱
2.欲呈現之配色風格：酷
3.有無遇到的問題? 還好沒吧!
4.花多少時間製作： 2天
5.製作心得：就那樣



(編輯記錄)

(1).作業網址：http://cute.mepopedia.com/~web107b/hw01/hw01-1075445079
(2).請回答以下問題：
1.製作主題:多喜歡你
2.欲呈現之配色風格： 可愛
3.有無遇到的問題?
4.花多少時間製作： 1-2小時
5.製作心得：熟能生巧



(編輯記錄)

https://www.figma.com/file/atVCDesbv4WNSMboisRk2fsz/Untitled?node-id=0%3A1

file:///C:/Users/user/Desktop/hw01-1075445049/next.html
網址應該是：http://cute.mepopedia.com/~web107b/hw01/hw01-1075445049/
1.製作主題： 簡單
2.欲呈現之配色風格： 可愛
3.有無遇到的問題:一開始很難，因為都是英文
4.花多少時間製作： 2天
5.製作心得：學到新東西!



(編輯記錄)

(1).作業網址：http://cute.mepopedia.com/~web107b/hw01/hw01-1075445084

(2).請回答以下問題：
1.製作主題： 憂傷系列
2.欲呈現之配色風格： ]暖色系
3.有無遇到的問題? 好難
4.花多少時間製作： 1小時
5.製作心得：雖然很難但是我覺得有學習到很多東西

作業網址:http://cute.mepopedia.com/~web107b/hw01/hw01-1035461031/

1.製作主題： 傷
2.欲呈現之配色風格：低調
3.有無遇到的問題? 連結沒成功
4.花多少時間製作： 1-2小時
5.製作心得：從無到有很有成就感

1.製作主題：虐新的歌
2.欲呈現之配色風格：憂鬱風格
3.有無遇到的問題? 看得眼花撩亂、不太熟悉
4.花多少時間製作： 一天
5.製作心得：花了好多時間弄終於做完

作業網址:
1.製作主題：曦文喜歡的歌
2.欲呈現之配色風格：秋冬、冷漠
3.有無遇到的問題: 調整顏色時，會不知道自己在調哪裡的顏色、不會弄成網址
4.花多少時間製作： 五個小時內
5.製作心得：一開始會不懂，可是熟悉過後其實很容易上手，因為檔案遺失重做很多次，有耐心一點，就做得比較順利了。



(編輯記錄)

http://cute.mepopedia.com/~web107b/hw01/hw01-1075445004
1.製作主題：感動虐心的歌
2.欲呈現之配色風格：優美動人
3.有無遇到的問題? ：一開始根本不了解語法，也不知道要怎麼應用，也聽不太懂，以前沒有接觸過這一方面
4.花多少時間製作：3天
5.製作心得：自己在過程中努力的去研究，試著自己去找出答案，重要的是，雖然花了很多時間，不過能夠自己做完真的很有成就感



(編輯記錄)

1).作業網址：http://cute.mepopedia.com/~web107b/hw01/hw01-1075445029
(2).請回答以下問題：
1.製作主題： 五月天 / 轉眼，徐佳瑩 / 真得傻
2.欲呈現之配色風格： 依歌曲風格來配對顏色
3.有無遇到的問題? 一開始對分頁有些狀況後來解決了。
4.花多少時間製作： 2小時
5.製作心得：覺得又學習到了另一種製作方式。

(1).作業網址：http://cute.mepopedia.com/~web107b/hw01/hw01-1075445027

(2).請回答以下問題：
1.製作主題：校園青春歌曲
2.欲呈現之配色風格： 青春活潑與離別不捨
3.有無遇到的問題? 無
4.花多少時間製作： 2天
5.製作心得：可以把自己喜歡的歌製作成一個網站，是多麼神奇開心的事。