[作業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/~1091445XXX/hw01-1091445XXX/ 資料夾內含： 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?2892,92953,92953#msg-92953 Wed, 29 Jul 2026 05:06:38 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?2892,92953,93394#msg-93394 http://mepopedia.com/forum/read.php?2892,92953,93394#msg-93394 作業01網址

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

班級，學號 視傳2A 1091445134 張瀞予]]> 1091445093 110-1《中國》北視傳二-網頁設計 Mon, 10 Jan 2022 14:55:52 +0800 http://mepopedia.com/forum/read.php?2892,92953,93391#msg-93391 http://mepopedia.com/forum/read.php?2892,92953,93391#msg-93391 作業02網址

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

班級，視傳二A 學號1091443075 周伯諠]]> 1091443075 110-1《中國》北視傳二-網頁設計 Mon, 10 Jan 2022 14:50:42 +0800 http://mepopedia.com/forum/read.php?2892,92953,93250#msg-93250 http://mepopedia.com/forum/read.php?2892,92953,93250#msg-93250 作業01網址
1.製作主題：瘋起來 塵埃
2.呈現之配色風格：螢光色 暗灰色
3.有無遇到的問題：語法容易在小地方輸入錯誤，導致效果出不來。
4.花多少時間製作？3小時
5.製作心得：能夠從零基礎到對網頁程式的製作，真的感到非常高興，希望日後自己的能力能夠更進步
1091445062 視傳2B 周芯怡]]> 1091445062 110-1《中國》北視傳二-網頁設計 Mon, 29 Nov 2021 16:37:13 +0800 http://mepopedia.com/forum/read.php?2892,92953,93183#msg-93183 http://mepopedia.com/forum/read.php?2892,92953,93183#msg-93183 作業01網址



(2).請回答以下問題：
1.製作主題：我們一樣可惜、我是一隻魚
2.呈現之配色風格：憂鬱的藍色系、藍白的海洋風
3.有無遇到的問題? 表單回覆一直無法登入
4.花多少時間製作：4h
5.製作心得：網頁設計真的不簡單，每堂課都依定要到且認真上課才會做，都不敢缺課
視傳2B，1091445104]]> 1091445104 110-1《中國》北視傳二-網頁設計 Sat, 27 Nov 2021 16:44:19 +0800 http://mepopedia.com/forum/read.php?2892,92953,93157#msg-93157 http://mepopedia.com/forum/read.php?2892,92953,93157#msg-93157 作業01網址

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

班級，學號
視傳1A ，1091445081]]> 1091445007 110-1《中國》北視傳二-網頁設計 Tue, 23 Nov 2021 15:58:22 +0800 http://mepopedia.com/forum/read.php?2892,92953,93156#msg-93156 http://mepopedia.com/forum/read.php?2892,92953,93156#msg-93156 作業01網址

(2).請回答以下問題：
1.製作主題：Rainbow、Glowin' Up
2.呈現之配色風格：彩虹色、皇家紫
3.有無遇到的問題?：第一項作業沒有
4.花多少時間製作：５小時
5.製作心得：
第一個作業需要製作的範圍，我認為還在我可以了解的範圍內，製做起來比較沒有難度。
班級，學號：視傳2A－1091445007]]> 1091445007 110-1《中國》北視傳二-網頁設計 Tue, 23 Nov 2021 15:47:46 +0800 http://mepopedia.com/forum/read.php?2892,92953,93128#msg-93128 http://mepopedia.com/forum/read.php?2892,92953,93128#msg-93128 作業01網址
(2).請回答以下問題：
1.製作主題：save your tears Better
2.呈現之配色風格：粉紫
3.有無遇到的問題?第一次接觸網頁設計,對語法很陌生
4.花多少時間製作：兩個禮拜
5.製作心得：這堂課學了很多網頁設計的基本概念,希望未來可以更進步

班級視傳2B學號1091445132]]> 1091445132 110-1《中國》北視傳二-網頁設計 Mon, 15 Nov 2021 17:23:16 +0800 http://mepopedia.com/forum/read.php?2892,92953,93127#msg-93127 http://mepopedia.com/forum/read.php?2892,92953,93127#msg-93127 作業01網址
(2).請回答以下問題：
1.製作主題：whithout you
2.呈現之配色風格：藍配紫
3.有無遇到的問題?
4.花多少時間製作：2小時
5.製作心得：第一次製作網頁 ,平常都是看別人做的歌詞網站，現在可以自己嘗試作歌詞放在網路上

班級，學號
視傳3B 1081445034]]> Ytong0103 110-1《中國》北視傳二-網頁設計 Mon, 15 Nov 2021 17:15:19 +0800 http://mepopedia.com/forum/read.php?2892,92953,93120#msg-93120 http://mepopedia.com/forum/read.php?2892,92953,93120#msg-93120 作業01網址

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

視傳2A 1091445130]]> 1091445130 110-1《中國》北視傳二-網頁設計 Mon, 15 Nov 2021 12:57:41 +0800 http://mepopedia.com/forum/read.php?2892,92953,93119#msg-93119 http://mepopedia.com/forum/read.php?2892,92953,93119#msg-93119 作業01網址



1.製作主題：少女青春
2.呈現之配色風格：粉色、橘色(演唱者代表色)
3.有無遇到的問題?css填顏色會突然搞混，製作第二次就還好了
4.花多少時間製作：2小時
5.製作心得：剛開始上課看到一堆代碼有點恐懼，但沒想到自系聽課還有看老師的講義簡單許多，是很好玩的功課經驗]]> 1091445049 110-1《中國》北視傳二-網頁設計 Mon, 01 Nov 2021 12:47:11 +0800 http://mepopedia.com/forum/read.php?2892,92953,93117#msg-93117 http://mepopedia.com/forum/read.php?2892,92953,93117#msg-93117 1.製作主題： 紅、 大風吹
2.呈現之配色風格：暖色、暗色系
3.有無遇到的問題? 上傳flz、打錯字沒辦法顯示。
4.花多少時間製作： 4h
5.製作心得：一開始覺得蠻麻煩的，不過到後期經由老師講解說明發現還是有它固定的語法，熟悉之後就會比較上手。

視傳2B 1091445050]]> 1091445050 110-1《中國》北視傳二-網頁設計 Thu, 11 Nov 2021 05:44:08 +0800 http://mepopedia.com/forum/read.php?2892,92953,93112#msg-93112 http://mepopedia.com/forum/read.php?2892,92953,93112#msg-93112 作業01網址


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

班級：視傳2B
學號：1091445072]]> 1091445072 110-1《中國》北視傳二-網頁設計 Tue, 09 Nov 2021 01:27:14 +0800 http://mepopedia.com/forum/read.php?2892,92953,93111#msg-93111 http://mepopedia.com/forum/read.php?2892,92953,93111#msg-93111 2.呈現之配色風格：對比色配色
3.有無遇到的問題?無
4.花多少時間製作：一個月
5.製作心得：第一次接觸網頁設計，覺得蠻特別的是以前沒接觸過的東西，希望未來可以學習到更多。

班級 2B 學號1091445010]]> 1091445010 110-1《中國》北視傳二-網頁設計 Mon, 08 Nov 2021 16:08:20 +0800 http://mepopedia.com/forum/read.php?2892,92953,93110#msg-93110 http://mepopedia.com/forum/read.php?2892,92953,93110#msg-93110 作業01網址
(2).請回答以下問題：
1.製作主題：很久以後Long After / 還是分開
2.呈現之配色風格：藍色、橘色
3.有無遇到的問題? 有，沒跟上只能自己慢慢找出少打的!
4.花多少時間製作：2h
5.製作心得：剛開始會有點看不懂任何語法，也沒碰過，到後面跟著老師一步一步做就比較熟悉操作，較容易上手，比較部會混亂

視傳3B，1081445133]]> 1081445133 110-1《中國》北視傳二-網頁設計 Mon, 08 Nov 2021 16:08:05 +0800 http://mepopedia.com/forum/read.php?2892,92953,93109#msg-93109 http://mepopedia.com/forum/read.php?2892,92953,93109#msg-93109 作業01網址
(2).請回答以下問題：
1.製作主題：在這座城市遺失了你、醜人多作怪
2.呈現之配色風格：藍灰
3.有無遇到的問題? 有時會打完預覽發現和預想的成果不一樣
4.花多少時間製作：幾次課堂中完成
5.製作心得：一開始需要花點時間記語法代表的意思，仍需要時間去練習

視傳2B 1091445056]]> cute1091445056 110-1《中國》北視傳二-網頁設計 Mon, 08 Nov 2021 16:02:21 +0800 http://mepopedia.com/forum/read.php?2892,92953,93108#msg-93108 http://mepopedia.com/forum/read.php?2892,92953,93108#msg-93108 作業01網址

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

班級:視傳2A，學號:1091445093]]> 1091445093 110-1《中國》北視傳二-網頁設計 Mon, 08 Nov 2021 13:15:35 +0800 http://mepopedia.com/forum/read.php?2892,92953,93107#msg-93107 http://mepopedia.com/forum/read.php?2892,92953,93107#msg-93107 作業01網址

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

視傳2A，1091445041]]> 1091445041 110-1《中國》北視傳二-網頁設計 Mon, 08 Nov 2021 12:51:15 +0800 http://mepopedia.com/forum/read.php?2892,92953,93106#msg-93106 http://mepopedia.com/forum/read.php?2892,92953,93106#msg-93106 作業01網址

(2).請回答以下問題：
1.製作主題：千尋 光的方向
2.呈現之配色風格：藍色/靜 黃色/陽光
3.有無遇到的問題?沒有
4.花多少時間製作：3堂課
5.製作心得：第一次做屬於自己的網頁，雖然過程中遇到了一些
問題，但還是順利完成了
視傳2A 1091445043]]> 1091445043 110-1《中國》北視傳二-網頁設計 Mon, 08 Nov 2021 12:45:52 +0800 http://mepopedia.com/forum/read.php?2892,92953,93105#msg-93105 http://mepopedia.com/forum/read.php?2892,92953,93105#msg-93105 1.製作主題：stay/ peaches
2.呈現之配色風格：stay 草原海洋風格 peaches 蜜桃風格
3.有無遇到的問題?熟悉專業的術語，認識新的東西，有點挑戰。
4.花多少時間製作：3小時
5.製作心得：從這次的網頁設計課中，學習到了很多，第一次接觸到網頁設計，非常過癮，之前就有想碰觸很久了，但沒真真正正實作。
從認識介面，寫第一個網頁指令，熟悉程式的專業術語，到老師告訴我們每一個網頁的背後的指令原理，頓悟到原來平常我們隨手瀏覽的網頁原來是這樣生成的!!
班級，學號
視傳2B 1091445026]]> 1091445026 110-1《中國》北視傳二-網頁設計 Wed, 03 Nov 2021 13:24:02 +0800 http://mepopedia.com/forum/read.php?2892,92953,93100#msg-93100 http://mepopedia.com/forum/read.php?2892,92953,93100#msg-93100 作業01網址



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

班級，學號 視傳2b1091445034]]> Demi 1091445034 110-1《中國》北視傳二-網頁設計 Mon, 01 Nov 2021 17:06:32 +0800 http://mepopedia.com/forum/read.php?2892,92953,93099#msg-93099 http://mepopedia.com/forum/read.php?2892,92953,93099#msg-93099 作業01網址

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

班級/視傳2b 學號/1091445046]]> 1091445046 110-1《中國》北視傳二-網頁設計 Mon, 01 Nov 2021 17:06:02 +0800 http://mepopedia.com/forum/read.php?2892,92953,93098#msg-93098 http://mepopedia.com/forum/read.php?2892,92953,93098#msg-93098 作業01網址

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

班級，學號 視傳2 1091445030]]> 1091445030 110-1《中國》北視傳二-網頁設計 Mon, 01 Nov 2021 17:03:02 +0800 http://mepopedia.com/forum/read.php?2892,92953,93096#msg-93096 http://mepopedia.com/forum/read.php?2892,92953,93096#msg-93096 作業01網址
(2).請回答以下問題：
1.製作主題：愛情
2.呈現之配色風格：愛情的甜蜜帶一點孤獨委屈
3.有無遇到的問題? 感覺做出來常常跟別人不一樣
4.花多少時間製作：課堂時間完成
5.製作心得：覺得很特別能夠自己做出一個網站

視傳2B，1091445068]]> 1091445068 110-1《中國》北視傳二-網頁設計 Mon, 01 Nov 2021 16:58:13 +0800 http://mepopedia.com/forum/read.php?2892,92953,93095#msg-93095 http://mepopedia.com/forum/read.php?2892,92953,93095#msg-93095 作業01網址

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

班級 視傳2B 學號 1091445048]]> 1091445048 110-1《中國》北視傳二-網頁設計 Mon, 01 Nov 2021 16:49:28 +0800 http://mepopedia.com/forum/read.php?2892,92953,93094#msg-93094 http://mepopedia.com/forum/read.php?2892,92953,93094#msg-93094 作業01網址

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

視傳2B 1091445040]]> 1091445040 110-1《中國》北視傳二-網頁設計 Mon, 01 Nov 2021 16:48:58 +0800 http://mepopedia.com/forum/read.php?2892,92953,93093#msg-93093 http://mepopedia.com/forum/read.php?2892,92953,93093#msg-93093 作業01網址

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

班級，學號：視傳2B 1091445110]]> 1091445110 110-1《中國》北視傳二-網頁設計 Mon, 01 Nov 2021 16:29:59 +0800 http://mepopedia.com/forum/read.php?2892,92953,93091#msg-93091 http://mepopedia.com/forum/read.php?2892,92953,93091#msg-93091 作業01網址

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

視傳2B、1091445042]]> 1091445042 110-1《中國》北視傳二-網頁設計 Mon, 01 Nov 2021 16:17:22 +0800 http://mepopedia.com/forum/read.php?2892,92953,93090#msg-93090 http://mepopedia.com/forum/read.php?2892,92953,93090#msg-93090 作業01網址

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

班級:視傳2B，學號:1091445102]]> 1091445102 110-1《中國》北視傳二-網頁設計 Mon, 01 Nov 2021 16:10:29 +0800 http://mepopedia.com/forum/read.php?2892,92953,93089#msg-93089 http://mepopedia.com/forum/read.php?2892,92953,93089#msg-93089 作業01網址

(2).請回答以下問題：
1.製作主題：
對立面
for ya
2.呈現之配色風格：
對立面:以一個星空紫色為主題，總覺得很適合這首歌的顏色
for ya:因為這首歌是很甜的一首歌，所以以粉色為主題
3.有無遇到的問題?
無
4.花多少時間製作：
上課期間加上回家做一點點，就完成了
5.製作心得：
覺得很有趣，跟以往的學的都不一樣
班級:視傳2B 學號:1091445070 陳奕錡]]> 1091445070 110-1《中國》北視傳二-網頁設計 Mon, 01 Nov 2021 16:09:20 +0800 http://mepopedia.com/forum/read.php?2892,92953,93088#msg-93088 http://mepopedia.com/forum/read.php?2892,92953,93088#msg-93088 作業01網址

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

班級，視傳2B 學號 1091445086]]> 1091445086 110-1《中國》北視傳二-網頁設計 Mon, 01 Nov 2021 16:07:37 +0800