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

Advanced

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

[作業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.製作心得:



Edited 6 time(s). Last edit at 04/12/2019 07:51AM by JinJin.
(編輯記錄)

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



Edited 1 time(s). Last edit at 04/12/2019 02:09PM by 1075445036朱儀瑄.
(編輯記錄)

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



Edited 2 time(s). Last edit at 04/17/2019 03:36PM by 1075445032.
(編輯記錄)

Attachments:
開啟 | 下載 - style.css (1.3 KB)
開啟 | 下載 - style2.css (1.3 KB)
開啟 | 下載 - index.html.html (2.6 KB)
開啟 | 下載 - next.html.html (2.7 KB)
(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.製作心得:自己在過程中努力的去研究,試著自己去找出答案,重要的是,雖然花了很多時間,不過能夠自己做完真的很有成就感



Edited 2 time(s). Last edit at 05/31/2019 12:29PM by 1075445004 葉沛妘.
(編輯記錄)

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

Attachments:
開啟 | 下載 - index.html (3.1 KB)
(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 spinning smiley sticking its tongue out smileys with beer

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

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

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

Attachments:
開啟 | 下載 - index1.html (2.6 KB)
開啟 | 下載 - next.html (2 KB)
開啟 | 下載 - style1.css (2.7 KB)
(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 莊傑宇



Edited 1 time(s). Last edit at 04/15/2019 01:55PM by 傑宇.
(編輯記錄)

(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.製作心得:配色很有趣



Edited 1 time(s). Last edit at 05/12/2019 09:50PM by 1075445086.
(編輯記錄)

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



Edited 3 time(s). Last edit at 05/30/2019 10:14PM by 1075445023.
(編輯記錄)

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.製作心得:還蠻好玩的,不過連結一直不成功會瘋掉



Edited 1 time(s). Last edit at 06/17/2019 10:37AM by JinJin.
(編輯記錄)

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/



Edited 1 time(s). Last edit at 06/17/2019 10:35AM by JinJin.
(編輯記錄)

(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.製作心得:就那樣



Edited 1 time(s). Last edit at 04/24/2019 10:51PM by 1075445060.
(編輯記錄)

Attachments:
開啟 | 下載 - index.html.html (2.7 KB)
開啟 | 下載 - next.html (2.8 KB)
開啟 | 下載 - style.css (1.3 KB)
開啟 | 下載 - style2.css (1.3 KB)
(1).作業網址:http://cute.mepopedia.com/~web107b/hw01/hw01-1075445079
(2).請回答以下問題:
1.製作主題:多喜歡你
2.欲呈現之配色風格: 可愛
3.有無遇到的問題?
4.花多少時間製作: 1-2小時
5.製作心得:熟能生巧



Edited 2 time(s). Last edit at 04/25/2019 04:43PM by monru.
(編輯記錄)

蒐集資料

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.製作心得:學到新東西!



Edited 1 time(s). Last edit at 06/17/2019 10:54AM by JinJin.
(編輯記錄)

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

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

Attachments:
開啟 | 下載 - index.html (2.5 KB)
開啟 | 下載 - next.html (2.6 KB)
開啟 | 下載 - style.css (1.3 KB)
開啟 | 下載 - style2.css (1.3 KB)
作業網址:http://cute.mepopedia.com/~web107b/hw01/hw01-1035461031/

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

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

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



Edited 2 time(s). Last edit at 05/30/2019 08:21PM by 1075445013.
(編輯記錄)

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



Edited 1 time(s). Last edit at 05/31/2019 12:31PM by 1075445004 葉沛妘.
(編輯記錄)

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.製作心得:可以把自己喜歡的歌製作成一個網站,是多麼神奇開心的事。