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

Advanced

Re: [作業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/~1091445XXX/hw01-1091445XXX/

資料夾內含:
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.製作心得:

班級,學號



學長姐範例:
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/25/2021 02:40PM by JinJin.
(編輯記錄)

作業01網址

(2).請回答以下問題:
1.製作主題:Stars Align、愛笑的樣子
2.呈現之配色風格:楓木色、奶茶色
3.有無遇到的問題? 在家上傳學校雲端會鎖IP位置
4.花多少時間製作:3h
5.製作心得:剛開始會有點看不懂,到後期就是固定的語法,熟悉之後就會比較上手。

視傳2B,1091445002

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



(2).請回答以下問題:
1.製作主題:我們一樣可惜、我是一隻魚
2.呈現之配色風格:憂鬱的藍色系、藍白的海洋風
3.有無遇到的問題? 表單回覆一直無法登入
4.花多少時間製作:4h
5.製作心得:網頁設計真的不簡單,每堂課都依定要到且認真上課才會做,都不敢缺課
視傳2B,1091445104



Edited 4 time(s). Last edit at 11/29/2021 03:36PM by 1091445104.
(編輯記錄)

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

(2).請回答以下問題:
1.製作主題:萬千花蕊慈母悲哀 滷肉飯
2.呈現之配色風格:粉色 咖啡色
3.有無遇到的問題? 無
4.花多少時間製作:約.1小時
5.製作心得:在家研究語法相當有趣,遇到BUG在抵BUG的過程非常有成就感

視傳2B,1091445108

MEPOERs said:
JinJin: 第4行應為mata而非 meya 且未看到style.css
(1).作業網址:
作業01網址

(2).請回答以下問題:
1.製作主題:愛人錯過 幽靈東京
2.呈現之配色風格:第一首想呈現愛的感覺 第二首想呈現幽靈的配色風格
3.有無遇到的問題? 漏打字 後來有發現
4.花多少時間製作:1小時左右
5.製作心得:我覺得剛開始接觸網頁設計的時候會不清楚在幹嘛,但在這次做完作業1後對網頁設計有新的認知。

視傳2B 1091445060



Edited 1 time(s). Last edit at 10/31/2021 05:25PM by 1091445060.
(編輯記錄)

作業01網址

(2).請回答以下問題:
1.製作主題:diamond LAVA
2.呈現之配色風格:紅 黃
3.有無遇到的問題? 無
4.花多少時間製作:1小時
5.製作心得: 已有部分經驗 做起來也稍微有些概念

視傳2B 1091445016

MEPOERs said:
JinJin: 請單純上傳一個資料夾即可
(1).作業網址:
作業01網址

(2).請回答以下問題:
1.製作主題:蜂蜜&海
2.呈現之配色風格:黃白&藍紫
3.有無遇到的問題?同學卡關,他在html檔名那邊一直無法切換,我幫她處理之後就可以了。
4.花多少時間製作:2天
5.製作心得:藉由這次練習,讓我第一次了解網頁設計繁瑣複雜的過程,但也在之中漸漸找到規律,對於第一次接觸的我,覺得很新奇且有趣。

視傳2B,1091445028

MEPOERs said:
JinJin: 第二首的footer文字太隱密
作業01網址

(2).請回答以下問題:
1.製作主題:最勇敢的事、倒數
2.呈現之配色風格:
最勇敢的事:用黃色是代表青春熱血的校園愛情
倒數:用粉色是代表愛情的浪漫以及酸酸甜甜的感覺
3.有無遇到的問題?
在製作過程中很多語法都看不懂,因為語法穿插太多數字、標點符號、跟英文,看到都覺得好複雜。
4.花多少時間製作:
因為上課製作的時間有限,所以就回家利用周末的時間做完,也上網看很多補充的資料。
5.製作心得:
第一次接觸網頁真的有點難,但是經過這堂基礎的歌詞網頁,才知道原來網頁製作是用各種語法所完成的,希望透過這學期的網頁設計,之後可以製作出屬於自己的網頁。
班級:視傳2B,學號:1091445124

MEPOERs said:
JinJin: 製作不同效果很讚喔!
作業網址:作業01網址



1.製作主題:愛我的時候、你的情歌
2.呈現之配色風格:珊瑚粉色、紫色
3.有無遇到的問題? 在兩邊網址切換顏色一直卡住,無法切換。
4.花多少時間製作:2天
5.製作心得:剛開始會看不懂,之後照著老師的影片跟上課教學一步一步做有比較上手。

1091445032吳旻玲

作業01網址

(2).請回答以下問題:
1.製作主題:我的快樂 真實
2.呈現之配色風格:紫色跟綠色
3.有無遇到的問題?還好
4.花多少時間製作:3小時
5.製作心得:覺得做出一個網頁我好厲害

視傳2B,1091445094

MEPOERs said:
JinJin: 第13行結尾應為h2 / 結束 </h2>
(1).作業網址:
作業01網址

(2).請回答以下問題:
1.製作主題:Burning是以燒成灰燼的感覺來呈現,she是以甜甜的蜂蜜來呈現
2.呈現之配色風格:藍灰色像燒成灰燼,黃色蜂蜜。
3.有無遇到的問題?都還好
4.花多少時間製作:花了好久的時間
5.製作心得:網頁設計好難喔哈哈,要花好多時間來學習,希望我能學好,以後自己製作網站。

班級,學號 視傳2B
1091445008 彭丞育



Edited 3 time(s). Last edit at 11/29/2021 03:35PM by 1091445008.
(編輯記錄)

MEPOERs said:
JinJin: 未回覆作業網址
作業01網址

(2).請回答以下問題:
1.製作主題:不刪、丟了你
2.呈現之配色風格:悲傷帶點甜甜的
3.有無遇到的問題? 無
4.花多少時間製作:兩個小時
5.製作心得:
學習製作網頁不容易
想要好好學習
之後對製作網頁有極大的興趣
慢慢練習,多多學習 謝謝老師
班級 視傳2B,學號 1091445014

作業01網址

(2).請回答以下問題:
1.製作主題:我還年輕 我還年輕,安九
2.呈現之配色風格:復古
3.有無遇到的問題?順序會有點混亂
4.花多少時間製作:2-3小時
5.製作心得:第一次製作感覺很新鮮

班級 視傳2B 學號 1091445022

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

(2).請回答以下問題:
1.製作主題:NCT U-The 7th Sense/NCT 127-Sticker
2.呈現之配色風格:我以專輯原先的配色進行設計,紅色和黑色以及綠色和黑色。
3.有無遇到的問題?處理css檔案的初步設計時沒有細心檢查導致網站運行失敗。
4.花多少時間製作:大約四天(包含上課時間)。
5.製作心得:由於我第一次接觸網站設計,起初十分擔心,但也非常期待從未學習過的領域帶來的知識,製作作業的過程中感受到網站設計的有趣之處,完成作業之後感受到滿足的心情,希望未來能夠繼續學習網站設計。

視傳2B,1091445052



Edited 1 time(s). Last edit at 12/02/2021 08:33AM by 1091445052.
(編輯記錄)

作業01網址

(2).請回答以下問題:
1.製作主題:不遺憾 年輪說 歌詞
2.呈現之配色風格:藍色
3.有無遇到的問題?無
4.花多少時間製作:3小時
5.製作心得:第一次學網頁設計 學習到了很多也很開心

視傳2B 1091445012

1.製作主題:命に嫌われている Drown
2.呈現之配色風格:生命藍 溺水藍
3.有無遇到的問題?:手跟不上腦袋
4.花多少時間製作:兩小時
5.製作心得:好多東西看起來複雜但只要搞懂其實很簡單,但要記好多東西要很清楚自己在做甚麼。
作業網址:作業01網址

1.製作主題:命に嫌われている Drown
2.呈現之配色風格:生命藍 溺水藍
3.有無遇到的問題?:手跟不上腦袋
4.花多少時間製作:兩小時
5.製作心得:好多東西看起來複雜但只要搞懂其實很簡單,但要記好多東西要很清楚自己在做甚麼。
作業網址:作業01網址

視傳2B 1091445004

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

(2).請回答以下問題:
1.製作主題:無羈,如故
2.呈現之配色風格:霧藍與霧灰
3.有無遇到的問題?滿多的,例如歌詞沒跑出來之類
4.花多少時間製作:1天
5.製作心得:網頁設計真的好難,可能漏了哪一步整個網頁就跑不出來,就還要再回去慢慢檢查,所以做網頁真的要滿細心。

班級,學號
視傳2B 1091445036

(1).作業網址:
作業01網址
1.製作主題:Wherever you are、Somewhere only we know
2.呈現之配色風格:灰藍、叢林綠
3.有無遇到的問題?上傳的時候比較困難
4.花多少時間製作:3hr
5.製作心得:雖然花了很多時間,但透過這次的作業,讓我學到很多。

視傳2A,1091445069



Edited 3 time(s). Last edit at 10/29/2021 03:21PM by 1091445069.
(編輯記錄)

(1).作業網址:
file:///D:/hw01-066/indew.html

(2).請回答以下問題:
1.製作主題:愛情你比我想的閣較偉大 / better off without you
2.呈現之配色風格:米黃/磚紅/淡粉
3.有無遇到的問題? 有,程式寫錯
4.花多少時間製作:2~3h
5.製作心得:雖然花了一些時間做,有時遇到問題會覺得煩躁,但解決問題後及成功做完後,成就感滿滿也很充實!

班級,學號: 北視傳2A / 1091448066



Edited 1 time(s). Last edit at 10/30/2021 06:18PM by 1091448066.
(編輯記錄)

作業01網址

(2).請回答以下問題:
1.製作主題:古裝﹐陰鬱
2.呈現之配色風格:淺綠 、淺粉、白、墨綠
3.有無遇到的問題?:無
4.花多少時間製作:每節下課回家可能需要花費1-2小時趕上當天的進度。
5.製作心得:很有趣﹐沒有當初看到程式碼後想像中那麼的困難﹐只是工續繁瑣﹐即須耐性

視傳2A ,1091445077

作業網址:
作業01網址

1.製作主題:XMASwu歌手的歌曲 "IM NOT OK", "Sorry But"
2.呈現之配色風格:
配合歌詞意境做配色,簡潔不凌亂
"IM NOT OK" 藍色漸層,到結尾的淺藍色。暗喻疲累的心情、孤單一人,一個人在路上走遠的意境
"Sorry But" 雜亂的心情,裝作不會累,血卻滴在心裡面。以灰白色為底,乾枯玫瑰粉暗喻心情,同時也為畫面做點綴
3.有無遇到的問題?
這是第一次接觸到HTML與CSS語法,以前沒有碰過程式語言
中間遇到很多語法錯誤的問題,總要檢查多次才知道是哪一句或哪一部分需要修正
4.花多少時間製作:約12小時
5.製作心得:
接觸過後才知道其實寫網頁挺有趣的,以前總覺得很複雜,這次搞懂整體的概念後,大概能知道語法的順序與每一部分所代表的涵義
我自己是從第一堂課上完後就開始著手這次的作業,第一次接觸新的領域總是想更多的了解運作概念細節,所以在前面花了一些時間自己探索、學習,雖然主要還是在課堂上聽老師解說才完全明白,不過,多次複習讓我更熟悉網頁初階知識
期待後面更進階的課程!!!

視傳2A 1091445087

1091445091黃佳玗

作業網址:
作業01網址


1.製作主題:我要你、用破碎的心修好破碎的心
2.呈現之配色風格:粉色、淡黃色
3.有無遇到的問題? 一開始遇到亂碼問題,好險有老師替我解答。
4.花多少時間製作:3小時
5.製作心得:一開始以為很複雜,自己肯定做不出來,好險有老師的細心教導和朋友互相幫忙,最終才得以完成。

視傳2A 1091445091 黃佳玗



Edited 3 time(s). Last edit at 11/01/2021 01:29PM by 1091445091.
(編輯記錄)

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

(2).請回答以下問題:
1.製作主題:心中的圖畫 / 星空
2.呈現之配色風格:黃色 / 紫色
3.有無遇到的問題? 一開始操作都花上很多時間,因為不熟軟體
4.花多少時間製作:約兩天吧
5.製作心得:從一開始完全不會,到現在可以做出一個網頁。真的很感動

視傳2A 1091445011 盧毓庭



Edited 1 time(s). Last edit at 11/01/2021 12:58PM by 1091445011.
(編輯記錄)

作業01網址

(已上傳但無法呈現)

1.製作主題:陳芳語 愛你 & F.I.R 月牙灣
2.呈現之配色風格:愛的粉紅泡泡的配色、月亮的黃色
3.有無遇到的問題?:中間有打錯程式語言,導致沒有成功,但後來重新檢查一遍後就完成了!
4.花多少時間製作:8小時
5.製作心得:一開始沒有接觸過程式語言,覺得看起來很困難,但跟著老師的步驟發現其實也沒有很複雜,只是需要時間去熟悉和練習,製作的過程中覺得非常的有趣,尤其是在選配色的時候,試了好多遍才選到覺得蠻順眼的顏色!

視傳2A,1091445065林映均



Edited 5 time(s). Last edit at 11/01/2021 01:39PM by 1091445065.
(編輯記錄)

作業01網址

1.製作主題:溫馨風格
2.呈現之配色風格:暖色系
3.有無遇到的問題?一開始會有點卡卡的後來就好了許多
4.花多少時間製作:兩個禮拜
5.製作心得:
當網頁製作成功之後當下成就感滿滿的。

視傳2A 1091445113徐翊甄

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

(2).請回答以下問題:
1.製作主題:青空未來 在這座城市遺失了你
2.呈現之配色風格:綠色 紅色
3.有無遇到的問題? 無
4.花多少時間製作:約2個小時
5.製作心得:以前製作過,所以現在用起來順手許多

視傳2A 1091445142

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

(2).請回答以下問題:
1.製作主題:for ya 正想著你呢
2.呈現之配色風格:for ya是比較充滿戀愛感覺得一首歌,所以用粉色系的風格。正想著你呢是在思念一個人的一首歌,所以用藍色系的風格。
3.有無遇到的問題? 有時候會突然忘記那個名詞是改哪個項目的
4.花多少時間製作:兩小時
5.製作心得:第一次學習網頁設計覺得很有趣,而且看到自己成功設計完成的網頁就覺得很有成就感。

視傳2A,1091445019

1091445049

作業網址:
作業01網址



1.製作主題:少女青春
2.呈現之配色風格:粉色、橘色(演唱者代表色)
3.有無遇到的問題?css填顏色會突然搞混,製作第二次就還好了
4.花多少時間製作:2小時
5.製作心得:剛開始上課看到一堆代碼有點恐懼,但沒想到自系聽課還有看老師的講義簡單許多,是很好玩的功課經驗

作業01網址

(2).請回答以下問題:
1.製作主題:Believe Like Me
2.呈現之配色風格:繽紛
3.有無遇到的問題? 無
4.花多少時間製作:兩小時
5.製作心得:是第一次製作網頁,雖然只有簡單幾個基礎的指令,做到最後還是會有些搞混,熟悉過後還蠻有趣的,頗有成就感

視傳2A 1091445047

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

(2).請回答以下問題:好
1.製作主題:歌詞
2.呈現之配色風格:配合歌詞風格呈現
3.有無遇到的問題? 無
4.花多少時間製作:配合課程製作
5.製作心得:很有趣,做完很有成就感

班級,學號 視傳2A-1091445013

作業01網址

(2).請回答以下問題:
1.製作主題:刻在我心底的名字 兩隻老虎
2.呈現之配色風格:平靜帶點小活潑
3.有無遇到的問題? 老師有點教太快 較難吸收
4.花多少時間製作:5day
5.製作心得:做出來的的時候非常有成就感 也謝謝老師與同學的求救幫忙

視傳2A 1091445115

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

(2).請回答以下問題:
1.製作主題:歌詞網頁設計
2.呈現之配色風格:依照歌詞做搭配,兩首歌分別為暖色及冷色系對比
3.有無遇到的問題?:有,配色及網頁操作有遇到困難
4.花多少時間製作:1小時左右
5.製作心得:期望之後能學習到更多知識,更靈活運用網頁的設計

視傳2A,1091445085

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

(2).請回答以下問題:
1.製作主題:ネコアレルギー、すーぱーぬこになれんかった。兩首歌都以貓為主題,不同作曲作詞與歌手呈現出不一樣的風格。
2.呈現之配色風格:配合歌曲MV的色調,ネコアレルギー:神秘、平靜;すーぱーぬこになれんかった:可愛、活潑
3.有無遇到的問題?:途中有遇到檔案與檔案之間的連結問題,但後來都順利找到問題點並解決了。
4.花多少時間製作:一個禮拜
5.製作心得:在製作途中遇到很多有趣的挑戰,逐一把問題解決的感覺很棒,這次是第一次接觸網頁設計,開始對網頁設計產生了興趣,讓我想再更深入學習更多不同的語法,做出各種各樣有趣的網頁。

視傳2A,1091445079

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

(2).請回答以下問題:
1.製作主題:歌詞網頁。
2.呈現之配色風格:分手後的愉悅。
3.有無遇到的問題?交作業時遇到許多問題。
4.花多少時間製作:跟著老師一起。
5.製作心得:本身對網頁很有興趣,二年級有這堂課非常開心,學會許多網頁的編碼,實際操作後覺得真的很好玩,雖然有時會搞混,會繼續認真學習,謝謝老師!

視傳2A 1091445095

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

(2).請回答以下問題:
1.製作主題: 越過山丘/恰似你的溫柔
2.呈現之配色風格: 文青風
3.有無遇到的問題? 無
4.花多少時間製作: 上課時間
5.製作心得: 對於剛學程式的我能完成一個網站超感動

班級,學號 是傳2A 1091445045

作業01網址

(2).請回答以下問題:
1.製作主題:七里香 晴天
2.呈現之配色風格:藍色系 冷色調
3.有無遇到的問題? 無問題
4.花多少時間製作:依照課程進度
5.製作心得:學習到了如何設計一個網頁,以及設計網頁需要的程式和指令
班級:視傳二A,學號:1091445119

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

(2).請回答以下問題:
1.製作主題:復古/優雅
2.呈現之配色風格:冷暖色調混搭
3.有無遇到的問題? 有時會不小心打錯程式碼
4.花多少時間製作:兩三個小時
5.製作心得:多學了很多程式碼 棒~~~!

視傳2A 1081445108

作業01網址

(2).請回答以下問題:
1.製作主題:愛,存在 東西
2.呈現之配色風格:戀愛的粉紅泡泡 活潑歡樂
3.有無遇到的問題?無
4.花多少時間製作:五天
5.製作心得:網頁好難

視傳2a 1091445053

(1).作業網址:
作業01網址
(2).請回答以下問題:
1.製作主題:惡夢악몽 Fall
2.呈現之配色風格:藍紫漸層呈現噩夢的感覺 淺灰綠到暗紫紅色漸層呈現往下墜的感覺
3.有無遇到的問題?調色的時候有點混亂
4.花多少時間製作:約1小時左右
5.製作心得:一開始覺得好難好複雜但後來了解大概的形式之後就變得簡單很多

視傳2A 1091445109

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

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

視傳2A 1091445071

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

(2).請回答以下問題:
1.製作主題:饒舌歌手
2.呈現之配色風格:所以你睡了沒:用藍色想展示寧靜的風格,red lips:用紅色想展示熱血風格
3.有無遇到的問題? 程式碼寫錯,很難找到錯在哪
4.花多少時間製作:2個禮拜
5.製作心得:第一次嘗試網頁設計,做完很有成就感,也沒有想像的這麼難!

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

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

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

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

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

(2).請回答以下問題:
1.製作主題:外國饒舌歌手為主
2.呈現之配色風格:歐美驚豔顏色
3.有無遇到的問題?無
4.花多少時間製作:30分鐘
5.製作心得:

班級 視傳2A,學號1091445138

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

(2).請回答以下問題:
1.製作主題:愛情你比我想的閣較偉大 / better off without you
2.呈現之配色風格: 橘色、綠色 / 米白色、粉色
3.有無遇到的問題? 有,程式不知道怎麼打或打錯誤
4.花多少時間製作:2-3h
5.製作心得:雖然製作遇到問題時會很緊張或煩躁,但最後自己慢慢解決問題及完成程式時,成就感滿滿,也漸漸發覺到做網頁設計的樂趣!

班級,學號: 北視傳2A 1091448066

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

(2).請回答以下問題:
1.製作主題:抒情歌
2.呈現之配色風格:冷色調
3.有無遇到的問題? 有!切換的時候有出狀況
4.花多少時間製作:好多個小時
5.製作心得:第一次體驗製作網站有點出狀況但做完很有成就感

班級:視覺傳達2A,學號:1091445017

1).作業網址:
file:///C:/Users/USER/Desktop/HW1091445137/index.html

(2).請回答以下問題:
1.製作主題:California 墓仔埔也敢去
2.呈現之配色風格:亮色 黑色
3.有無遇到的問題? 無
4.花多少時間製作:跟著課堂進行
5.製作心得:我覺得學到了蠻多東西

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

1091445077

作業01網址

(2).請回答以下問題:
1.製作主題:無虞 . 續寫
2.呈現之配色風格:淺綠 、淺粉、白、墨綠
3.有無遇到的問題?:無
4.花多少時間製作:每節下課回家可能需要花費1-2小時趕上當天的進度。
5.製作心得:很有趣﹐沒有當初看到程式碼後想像中那麼的困難﹐只是工續繁瑣﹐即須耐性

視傳2A ,1091445077

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

(2).請回答以下問題:
1.製作主題:Giant/Inferno
2.呈現之配色風格:粉+黑,女性堅強/橘+紅棕,地獄烈焰
3.有無遇到的問題?有
4.花多少時間製作:共約5、6個小時
5.製作心得:第一次做網頁設計完全看不懂,不過跟著老師一步一步做,漸漸地比較熟悉了,最後做出來的成品也很有成就感。

班級,視傳2A 學號1091445029

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

(2).請回答以下問題:
1.製作主題:文青歌
2.呈現之配色風格:文青風
3.有無遇到的問題?有
4.花多少時間製作:4小時
5.製作心得:剛開始接觸覺得有點複雜,但最後還是蠻容易上手的。

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

作業01網址

(2).請回答以下問題:
1.製作主題:月牙灣.她說
2.呈現之配色風格:淺藍色.淡黃色
3.有無遇到的問題?無
4.花多少時間製作:3小時
5.製作心得:很有趣,學到了平常不會去碰的領域

班級視傳2B,學號1091445023

作業01網址

(2).請回答以下問題:
1.製作主題:怎麼了/修練愛情
2.呈現之配色風格:粉色/藍色
3.有無遇到的問題? 無
4.花多少時間製作:2小時
5.製作心得:覺得老師教太快有點反應不過來

班級,視傳2B
學號, 1091445096

作業01網址

(2).請回答以下問題:
1.製作主題:稻香、告白氣球
2.呈現之配色風格:大地色系、粉嫩色系
3.有無遇到的問題?背不太起來太多指令,容易搞混
4.花多少時間製作:3小時
5.製作心得:第一次接觸到網頁設計,真正做出來覺得滿有趣的,雖然常常搞混指令,但看到成品還是很開心。

班級 視傳2B 學號1091445024

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

(2).請回答以下問題:
1.製作主題:無間鳥& I Do Too
2.呈現之配色風格:無間鳥-海灣的碼頭 I Do Too-安詳而放鬆
3.有無遇到的問題?:無
4.花多少時間製作:課上製作,回家花2~3h再修改
5.製作心得:多打幾次語法就容易上手,找到問題出在哪相當有成就感,而且以歌詞網作為語法教學真的好懂很多。

班級:視傳2B,學號:1091445078

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

(2).請回答以下問題:
1.製作主題:路過人間、雪落下的聲音
2.呈現之配色風格:
(路過人間)人生許多無奈,但心中還是要有一塊屬於自己的天地。
(雪落下的聲音)冷冷的雪,一層層覆蓋。
3.有無遇到的問題?有時候會漏掉小符號,要花較多時間去找。
4.花多少時間製作:一、二個小時。
5.製作心得:本來還很擔心網頁設計會很難,但經過老師上課教的內容後,蠻容易吸收的,把網頁做出來好有成就感!!

視傳2B 1091445080



Edited 1 time(s). Last edit at 11/01/2021 03:37PM by 1091445080.
(編輯記錄)

作業01網址

(2).請回答以下問題:
1.製作主題:戒菸,年少有為
2.呈現之配色風格:莓果配色
3.有無遇到的問題?配色方面需要多加思考
4.花多少時間製作:5~6個小時
5.製作心得:第一次接觸網頁設計,真的沒想到所有網站都是要寫程式的,不只文字,連顏色都是程式寫的,這堂課真的讓我收益良多

班級 視傳2B 學號 1091445088

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

(2).請回答以下問題:
1.製作主題:泡沫 空城
2.呈現之配色:兩首歌整體走冷色調,依照歌詞給人的意象來配色,第一首歌泡沫,以灰藍色調,第二首歌空城,以灰黑色調
3.有無遇到的問題?寫錯程式,導致網頁有問體
4.花多少時間製作:課堂上及在家裡大約30分鐘
5.製作心得:第一次嘗試寫程式,覺得蠻有趣及新鮮的,雖然有點難,但依照老師給的教學網站來製作,會很好理解!

班級:視傳2B,學號:1091445074



Edited 1 time(s). Last edit at 11/01/2021 03:41PM by 1091445074.
(編輯記錄)

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

(2).請回答以下問題:
1.製作主題:一半人生/好想愛這個世界啊
2.呈現之配色風格:溫暖與寒冷的顏色
3.有無遇到的問題? 沒有
4.花多少時間製作:很久
5.製作心得:我覺得網站設計其實並沒有想像中的困難 很有趣

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

(2).請回答以下問題:
1.製作主題:With you 、行星
2.呈現之配色風格:第一首"With you"是犬夜叉的片尾曲,整體配色是呈現犬夜叉的頭髮跟衣服的樣子。第二首的"行星"是用他們的MV來做配色。
3.有無遇到的問題? 配色!!!實際配出來的跟預想的有落差,在配色上的調整花的時間很多。
4.花多少時間製作:課堂上製作與回家花30-60分鐘針對課堂上沒精細搭色去做修改。
5.製作心得:能把喜歡的歌順利地寫出程式來成就感up!up! 雖然眼殘把ul打成u1???

班級﹔視傳2B ,學號﹔1091445122

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

(2).請回答以下問題:
1.製作主題:摯愛 明明就
2.呈現之配色風格:對比色
3.有無遇到的問題? 幾乎都有些困難 因為第一次接觸
4.花多少時間製作:蠻久的
5.製作心得:我認為對我來說很困難,但我會努力學的。

班級,學號 視傳2B 1091445038

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

(2).請回答以下問題:
1.製作主題:怎麼了 一路向北
2.呈現之配色風格:活潑的黃色和憂鬱的藍色
3.有無遇到的問題? 無
4.花多少時間製作:每堂課的時間
5.製作心得:第一次學網頁設計,雖然沒有到很難,但還是有很多複雜的地方。

視傳2b 1091445082

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

(2).請回答以下問題:
1.製作主題:啵啦、輸情歌
2.呈現之配色風格:藍色、咖啡色
3.有無遇到的問題? 無
4.花多少時間製作:1小時
5.製作心得:之前有做過簡單的網頁,這次做得更加複雜有挑戰性,完成後很開心!

視傳2B 1091445140

1.製作主題:秒針を噛む、stitches
2.呈現之配色風格:該樂團另一首歌的MV配色風格、咖啡色系簡約低調風格
3.有無遇到的問題? 無
4.花多少時間製作:1小時內
5.製作心得:前面覺得一堆東西看不懂後面發現基本上是固定的語法就沒太大問題

視傳2B,1091445044

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

(2).請回答以下問題:
1.製作主題:Stray Kids不會結束的故事 (끝나지 않을 이야기)、原子邦妮 忽然想你的時候
2.呈現之配色風格:藍綠色、紫色
3.有無遇到的問題? 目前沒有
4.花多少時間製作:大概1-2個小時的時間 因為上課我有錄影
5.製作心得:第一次做網站感覺很新鮮 第一次接觸這個 還蠻喜歡的

班級 視傳2B,學號 1091445090

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

(2).請回答以下問題:
1.製作主題: 不遺憾、 雨愛
2.呈現之配色風格:紅粉色、藍綠色
3.有無遇到的問題? 無
4.花多少時間製作:除了每堂課的時間跟課後一小時
5.製作心得:剛開始打語法的時候會覺得很不習慣,多練習幾次就比較上手了

班級:視傳2B學號:1091445054

作業01網址

(2).請回答以下問題:
1.製作主題:whithout you
2.呈現之配色風格:藍配紫
3.有無遇到的問題?
4.花多少時間製作:2小時
5.製作心得:第一次製作網頁 ,平常都是看別人做的歌詞網站,現在可以自己嘗試作歌詞放在網路上

班級,學號
視傳3B 1081445034

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

(2).請回答以下問題:
1.製作主題:給我一首歌的時間/我想和你一起
2.呈現之配色風格:看歌給我的心情來配色
3.有無遇到的問題? 沒
4.花多少時間製作:每堂上課+在家2小時修改
5.製作心得:有些英文分不清楚

班級,視傳2B 學號 1091445086

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

(2).請回答以下問題:
1.製作主題:
對立面
for ya
2.呈現之配色風格:
對立面:以一個星空紫色為主題,總覺得很適合這首歌的顏色
for ya:因為這首歌是很甜的一首歌,所以以粉色為主題
3.有無遇到的問題?

4.花多少時間製作:
上課期間加上回家做一點點,就完成了
5.製作心得:
覺得很有趣,跟以往的學的都不一樣
班級:視傳2B 學號:1091445070 陳奕錡

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

(2).請回答以下問題:
1.製作主題:在這座城市遺失了你 醜人多作怪
2.呈現之配色風格:
在這座城市遺失了你:有點失落的感覺 藍色
醜人多作怪:歌詞帶給人的感覺 橘色
3.有無遇到的問題?
有時會找不到問題錯在哪裡
4.花多少時間製作:每次上完課後回到家再多花一點時間加以修改與檢察
5.製作心得:在一開始沒有接觸過編輯程式,覺得做起來一定很複雜,但在老師與同學的協助下,成功地寫完了它,感覺非常有成就感。

班級:視傳2B,學號:1091445102

作業01網址

(2).請回答以下問題:
1.製作主題:七里香、我很好騙
2.呈現之配色風格:黃色、藍色
3.有無遇到的問題? 沒有
4.花多少時間製作:3-4小時
5.製作心得:
能自己製作出一個網頁好酷,好好玩。

視傳2B、1091445042

作業01網址

(2).請回答以下問題:
1.製作主題:餘波盪漾:用看起來比較憂鬱的藍色呈現 仰望:用有活力的深紫色及淺紫呈現
2.呈現之配色風格:藍色 紫色
3.有無遇到的問題:有些地方編碼會打錯,但最後都有自己找到問題解決
4.花多少時間製作:2小時
5.製作心得:覺得自己做網頁很有趣,想嘗試更多

班級,學號:視傳2B 1091445110

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

(2).請回答以下問題:
1.製作主題:不能說的秘密,稻香
2.呈現之配色風格:紛紅色,紫色
3.有無遇到的問題? 沒有
4.花多少時間製作:3~4小時
5.製作心得:第一次自己製作網頁,雖然非常不熟悉,但製作的過程真的很有趣

視傳2B 1091445040

作業01網址

(2).請回答以下問題:
1.製作主題:日常 下雨天
2.呈現之配色風格:藍色調
3.有無遇到的問題?有
4.花多少時間製作:2小時
5.製作心得:對我來說這是一個全新的領域 所以使用上比較困難 但我會認真學習的

班級 視傳2B 學號 1091445048

作業01網址
(2).請回答以下問題:
1.製作主題:愛情
2.呈現之配色風格:愛情的甜蜜帶一點孤獨委屈
3.有無遇到的問題? 感覺做出來常常跟別人不一樣
4.花多少時間製作:課堂時間完成
5.製作心得:覺得很特別能夠自己做出一個網站

視傳2B,1091445068

MEPOERs said:
JinJin: 導覽列有錯誤
作業01網址

(2).請回答以下問題:
1.製作主題:在這座城市遺失了你 / 我會披星戴月的想你
2.呈現之配色風格:在這座城市遺失了你:藍 / 我會披星戴月的想你:灰
3.有無遇到的問題? 有,不清楚程式碼
4.花多少時間製作:5小時
5.製作心得:第一次碰到程式設計,專業程式碼很多都還不清楚,多練習希望以後可以自己獨力完成一個網站!

班級,學號 視傳2 1091445030

作業01網址

(2).請回答以下問題:
1.製作主題:那種人/我不是饒舌歌手
2.呈現之配色風格:橘色/螢光綠
3.有無遇到的問題?
4.花多少時間製作:好久
5.製作心得:好好玩

班級/視傳2b 學號/1091445046

作業01網址



(2).請回答以下問題:
1.製作主題:魚.you are my sanshine
2.呈現之配色風格:粉加藍
3.有無遇到的問題?無
4.花多少時間製作:1hr
5.製作心得:網頁設計好複雜但蠻好玩的~

班級,學號 視傳2b1091445034



Edited 6 time(s). Last edit at 11/08/2021 04:31PM by Demi 1091445034.
(編輯記錄)

(2).請回答以下問題:
1.製作主題:stay/ peaches
2.呈現之配色風格:stay 草原海洋風格 peaches 蜜桃風格
3.有無遇到的問題?熟悉專業的術語,認識新的東西,有點挑戰。
4.花多少時間製作:3小時
5.製作心得:從這次的網頁設計課中,學習到了很多,第一次接觸到網頁設計,非常過癮,之前就有想碰觸很久了,但沒真真正正實作。
從認識介面,寫第一個網頁指令,熟悉程式的專業術語,到老師告訴我們每一個網頁的背後的指令原理,頓悟到原來平常我們隨手瀏覽的網頁原來是這樣生成的!!
班級,學號
視傳2B 1091445026

作業01網址

(2).請回答以下問題:
1.製作主題:千尋 光的方向
2.呈現之配色風格:藍色/靜 黃色/陽光
3.有無遇到的問題?沒有
4.花多少時間製作:3堂課
5.製作心得:第一次做屬於自己的網頁,雖然過程中遇到了一些
問題,但還是順利完成了
視傳2A 1091445043

作業01網址

(2).請回答以下問題:
1.製作主題:空嘆兮,那麼驕傲
2.呈現之配色風格:黃色,藍色
3.有無遇到的問題?有,很容易搞混
4.花多少時間製作:3HR
5.製作心得:剛開始覺得很難,後來慢慢的一步一步學習,很有成就感

視傳2A,1091445041

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

(2).請回答以下問題:
1.製作主題:你的名字(電影主題曲)
2.呈現之配色風格:藍白
3.有無遇到的問題?:沒有 老師教的很認真
4.花多少時間製作:2天
5.製作心得:很新奇!!

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

(1).作業網址:
作業01網址
(2).請回答以下問題:
1.製作主題:在這座城市遺失了你、醜人多作怪
2.呈現之配色風格:藍灰
3.有無遇到的問題? 有時會打完預覽發現和預想的成果不一樣
4.花多少時間製作:幾次課堂中完成
5.製作心得:一開始需要花點時間記語法代表的意思,仍需要時間去練習

視傳2B 1091445056



Edited 4 time(s). Last edit at 11/15/2021 05:01PM by cute1091445056.
(編輯記錄)

作業01網址
(2).請回答以下問題:
1.製作主題:很久以後Long After / 還是分開
2.呈現之配色風格:藍色、橘色
3.有無遇到的問題? 有,沒跟上只能自己慢慢找出少打的!
4.花多少時間製作:2h
5.製作心得:剛開始會有點看不懂任何語法,也沒碰過,到後面跟著老師一步一步做就比較熟悉操作,較容易上手,比較部會混亂

視傳3B,1081445133



Edited 1 time(s). Last edit at 11/08/2021 05:02PM by 1081445133.
(編輯記錄)

1.製作主題:歌詞網頁設計
2.呈現之配色風格:對比色配色
3.有無遇到的問題?無
4.花多少時間製作:一個月
5.製作心得:第一次接觸網頁設計,覺得蠻特別的是以前沒接觸過的東西,希望未來可以學習到更多。

班級 2B 學號1091445010

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


1.製作主題:Happy Merry Christmas / Shine a Light
2.呈現之配色風格:
Happy Merry Christmas / 歌詞以剛交往不久的情侶為主軸,因此使用會有浪漫氛圍且看起來柔和的粉色系
Shine a Light / 整體MV及主視覺為星空,使用了藍色系
3.有無遇到的問題?
常常忽略段落的分號,語法除了課程外在家也學了很久才清楚且弄懂
4.花多少時間製作:6-8小時
5.製作心得:
以前對網頁架構還蠻有興趣的,常常開網頁的程式碼看,結果第一次上課時,真的覺得也太複雜了吧,但語法雖然多,其實稍微記住較為常出現的語法後,在操作上變簡單許多

班級:視傳2B
學號:1091445072



Edited 2 time(s). Last edit at 11/29/2021 04:02PM by 1091445072.
(編輯記錄)

(2).請回答以下問題:
1.製作主題: 紅、 大風吹
2.呈現之配色風格:暖色、暗色系
3.有無遇到的問題? 上傳flz、打錯字沒辦法顯示。
4.花多少時間製作: 4h
5.製作心得:一開始覺得蠻麻煩的,不過到後期經由老師講解說明發現還是有它固定的語法,熟悉之後就會比較上手。

視傳2B 1091445050



Edited 1 time(s). Last edit at 11/11/2021 05:46AM by 1091445050.
(編輯記錄)

1091445049吳雨瞳

作業網址:
作業01網址



1.製作主題:少女青春
2.呈現之配色風格:粉色、橘色(演唱者代表色)
3.有無遇到的問題?css填顏色會突然搞混,製作第二次就還好了
4.花多少時間製作:2小時
5.製作心得:剛開始上課看到一堆代碼有點恐懼,但沒想到自系聽課還有看老師的講義簡單許多,是很好玩的功課經驗

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

(2).請回答以下問題:
1.製作主題:溫柔\青春住了誰
2.呈現之配色風格:陽光色\粉紫色
3.有無遇到的問題?好像沒有
4.花多少時間製作:兩個小時
5.製作心得:課堂上老師講的有點快進度有點趕不上,所以回家有看教學影片複習。

視傳2A 1091445130

作業01網址
(2).請回答以下問題:
1.製作主題:whithout you
2.呈現之配色風格:藍配紫
3.有無遇到的問題?
4.花多少時間製作:2小時
5.製作心得:第一次製作網頁 ,平常都是看別人做的歌詞網站,現在可以自己嘗試作歌詞放在網路上

班級,學號
視傳3B 1081445034

作業01網址
(2).請回答以下問題:
1.製作主題:save your tears Better
2.呈現之配色風格:粉紫
3.有無遇到的問題?第一次接觸網頁設計,對語法很陌生
4.花多少時間製作:兩個禮拜
5.製作心得:這堂課學了很多網頁設計的基本概念,希望未來可以更進步

班級視傳2B學號1091445132

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

(2).請回答以下問題:
1.製作主題:Rainbow、Glowin' Up
2.呈現之配色風格:彩虹色、皇家紫
3.有無遇到的問題?:第一項作業沒有
4.花多少時間製作:5小時
5.製作心得:
第一個作業需要製作的範圍,我認為還在我可以了解的範圍內,製做起來比較沒有難度。
班級,學號:視傳2A-1091445007

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

(2).請回答以下問題:
1.製作主題:懸日、safe and sound
2.呈現之配色風格:粉紫色、木樁憂傷氛圍
3.有無遇到的問題?低一項作業無
4.花多少時間製作:調CSS較久其他還好
5.製作心得:第二項作業難好多,但是做出來有相當大的成就感

班級,學號
視傳1A ,1091445081

作業01網址
1.製作主題:瘋起來 塵埃
2.呈現之配色風格:螢光色 暗灰色
3.有無遇到的問題:語法容易在小地方輸入錯誤,導致效果出不來。
4.花多少時間製作?3小時
5.製作心得:能夠從零基礎到對網頁程式的製作,真的感到非常高興,希望日後自己的能力能夠更進步
1091445062 視傳2B 周芯怡



Edited 1 time(s). Last edit at 11/29/2021 04:39PM by 1091445062.
(編輯記錄)

作業02網址

(2).請回答以下問題:
1.製作主題:hw02-1091443075
2.加入新效果愈呈現的風格為何:美式風
3.遇到的問題? 版面複雜
4.花多少時間製作:半學期
5.製作心得:若缺少一堂 進度就會落後很多

班級,視傳二A 學號1091443075 周伯諠



Edited 1 time(s). Last edit at 01/20/2022 03:25PM by 1091443075.
(編輯記錄)

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

(2).請回答以下問題:
1.製作主題:bts 主打歌
2.呈現之配色風格:灰白色與黃色
3.有無遇到的問題?很難,會加油
4.花多少時間製作:一個月
5.製作心得:希望能夠更好

班級,學號 視傳2A 1091445134 張瀞予