[作業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-學號
這個作業的網址則為：
http://cute.mepopedia.com/~t109a/hw01/hw01-108xxxxxxx (A班)
http://cute.mepopedia.com/~t109b/hw01/hw01-108xxxxxxx (B班)

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

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

2. 以FileZilla上傳至FTP

3. 回覆本篇文章

(1).作業網址：
<a href="作業一網址" target="_blank">作業一網址</a>
(2).請回答以下問題：
1.製作主題：
2.呈現之配色風格：
3.有無遇到的問題?
4.花多少時間製作：
5.製作心得：

班級，學號

---

學長姐範例：
http://cute.mepopedia.com/~web107a/hw01/hw01-1055440119-1/
http://cute.mepopedia.com/~web107a/hw01/hw01-1075445010/



(編輯記錄)

(1).作業網址：
作業一網址

(2).請回答以下問題：
1.製作主題：心動和背光的感覺
2.呈現之配色風格：黃色可以代表心動雀躍的心情 也可以代表背光的光的感覺
3.有無遇到的問題?無
4.花多少時間製作：2個小時
5.製作心得：學習到關於網站的一些基本知識

視傳2A 1081445048

(1).作業網址：
作業一網址

(2).請回答以下問題：
1.製作主題：雨天和戀愛的感覺
2.呈現之配色風格：繡球花的配色/喜歡的人所喜歡的顏色
3.有無遇到的問題?無
4.花多少時間製作：2個小時
5.製作心得：學習到關於網站的一些基本操作

視傳2A 1081445027

作業網址：
作業一網址

(2).請回答以下問題：
1.製作主題:符合歌詞內容的感覺
2.呈現之配色風格：聽歌時的意境感受
3.有無遇到的問題?無
4.花多少時間製作：3小時
5.製作心得：充分的學習到網頁設計的知識

視傳2A 1081445021

MEPOERs said:

作業一網址

(2).請回答以下問題：
1.製作主題： 鄧大福是一隻貓／太陽と向日葵
2.呈現之配色風格：溫暖陽光的橘色／優雅浪漫的紫色
3.有無遇到的問題? 常常忘記自己打到哪一行，所以網頁編輯有時會沒弄成功
4.花多少時間製作：好幾個禮拜
5.製作心得：第一次做網感覺很有成就感，也學到了許多基本的觀念

視傳2B 1081445079

(1).作業網址：
作業一網址

(2).請回答以下問題：
1.製作主題:自我癒合/孫盛希、說好的幸福呢/周杰倫
2.呈現之配色風格：橙色/灰色
3.有無遇到的問題? 無
4.花多少時間製作：2小時
5.製作心得：很有趣，且可以做自己喜歡的風格

班級2A，學號1081445013



(編輯記錄)

MEPOERs said:

(1).作業網址：
作業一網址

(2).請回答以下問題：
1.製作主題：
fade into you/Mazzy star
look on down from the bridge/Mazzy star
2.呈現之配色風格：
以樂團原專輯封面顏色為基礎，再進行思考配色。
3.有無遇到的問題?
目前還可以
4.花多少時間製作：
6hr
5.製作心得：
第一次架設基礎的網站，算小有成就感。

視傳2A 1081445037



(編輯記錄)

(1).作業網址：
作業一網址

(2).請回答以下問題：
1.製作主題：Calm down - G-Eazy/陳忻玥 - 炙愛
2.呈現之配色風格：粉紫
3.有無遇到的問題?無
4.花多少時間製作：上課時間
5.製作心得：無

2A1081445138

(1).作業網址：
作業一網址

(2).請回答以下問題：
1.製作主題：玫瑰少年 この指とまれ
2.呈現之配色風格：玫瑰少年:以紅色為主體，呈現玫瑰的色彩及內心的傷痕 この指とまれ:整體以橘黃為主，表現出楓葉飄落的意象
3.有無遇到的問題? 語法上有稍微遇到困難，以及配色上思考較久
4.花多少時間製作：約莫兩天
5.製作心得：很開心能做出一個網頁，非常有成就感

班級，學號
視2A 1081445003

(1).作業網址：
作業一網址

(2).請回答以下問題：
1.製作主題：without her/怎麼了
2.呈現之配色風格：上面以寶藍色為主,下面的配色是黃色看起來比較活潑
3.有無遇到的問題?有時候會忘記那些符號是做甚麼的
4.花多少時間製作：兩個禮拜
5.製作心得：網頁設計真的好難,我盡力ㄌ

班級 視傳2A，學號1081445039

MEPOERs said:

(1).作業網址：
作業一網址

(2).請回答以下問題：
1.製作主題：魏如萱_彼個所在及華晨宇_好想愛這個世界啊

2.呈現之配色風格：魏如萱的是比較偏韓系的配色，想要呈現出比較憂愁的感覺。而華晨宇則是想要表現出想要這個世界比較暖心的部分。

3.有無遇到的問題?：開始配色的部分很常會找不到要改的地方的語法，要對比較久或是要在嘗試一下才會找到。

4.花多少時間製作：大概兩個小時半

5.製作心得：很有趣的一項作業，因為之前都沒有嘗試過，所以做起來感覺很新鮮！而且看到自己的作業出來，感覺很像我的孩子終於生出來了!超棒!!

視傳2A，1081445098

MEPOERs said:

(1).作業網址：
作業一網址

(2).請回答以下問題：
1.製作主題：情非得已、血腥愛情故事
2.呈現之配色風格：一個是輕鬆愉快的感覺、一個是沉重的感覺
3.有無遇到的問題?有，之前在處理style的時候一直處理錯誤
4.花多少時間製作：3天
5.製作心得：覺得做完這個很有成就感

班級：視覺傳達2A，學號：1081445086

(1).作業網址：
作業一網址

(2).請回答以下問題：
1.製作主題：詩歌
2.呈現之配色風格：依照歌曲的風格選用比較清爽的顏色
3.有無遇到的問題?英文容易打錯
4.花多少時間製作：無法計算
5.製作心得：真的覺得非常不簡單，但也很簡單，在理解之後，可以做出自己的網站真的是覺得超酷!
還蠻好玩的，但因為前面業師協同教學，三周後大概都忘光光了，建議老師下次可以上
到一個段落後再找業師，不然要回想，真有點難。

班級:視傳2A，學號:1081445064

(1).作業網址：
作業一網址

(2).請回答以下問題：
1.製作主題：without her/怎麼了
2.呈現之配色風格：上面以寶藍色為主,下面的配色是黃色看起來比較活潑
3.有無遇到的問題?有時候會忘記那些符號是做甚麼的
4.花多少時間製作：兩個禮拜
5.製作心得：網頁設計真的好難,我盡力ㄌ

班級 視傳2A，學號1081445039



(編輯記錄)

(1).作業網址：
作業一網址

(2).請回答以下問題：
1.製作主題：反烏托邦
2.呈現之配色風格：橘灰
3.有無遇到的問題? 尚無
4.花多少時間製作：課堂時間
5.製作心得：我是酷酷網頁設計師

班級，學號
視傳二A 1081445062



(編輯記錄)

MEPOERs said:

(1).作業網址：
作業一網址

(2).請回答以下問題：
1.製作主題：輕盈
2.呈現之配色風格：空靈感
3.有無遇到的問題? CSS好難....認真研究很久
4.花多少時間製作：三小時
5.製作心得：一堆天文數字讓我頭好痛....顏色也挑很久但還是喜歡老師範本的...我回去要繼續研究了

班級，學號 視傳二A 1081445007

MEPOERs said:

(1).作業網址：
作業一網址

(2).請回答以下問題：
1.製作主題:魏如萱-don't cry don't cry
2.呈現之配色風格:憂鬱
3.有無遇到的問題?沒存到檔又重來
4.花多少時間製作:2.5小時
5.製作心得:不能錯過任何一句老師的話否則會進度落後，但老師資料給的很完整也救了我

視傳2a 1061431103

MEPOERs said:

(1).作業網址：
http://cute.mepopedia.com/~t109a/hw01/hw01-1081445092/
(2).請回答以下問題：
1.製作主題：就是失戀然後還愛著她的主題
2.呈現之配色風格：人生黑白的風格
3.有無遇到的問題? 不太會開CSS
4.花多少時間製作：大概一小時
5.製作心得：
前面還聽得懂 但到後面用CSS的時候不知道怎麼開檔案
班級 視傳2A 學號 1081445092



(編輯記錄)

1).作業網址：
作業一網址

(2).請回答以下問題：
1.製作主題： 張杰:他不懂你的心 /華晨宇:好想愛這個世界啊
2.呈現之配色風格：清新的色調，粉色的色調
3.有無遇到的問題? 有 覺得還不太熟悉
4.花多少時間製作：4節課的時間
5.製作心得：希望可以更加深入

班級 視傳3a 學號1071445148 邱名遠



(編輯記錄)

(1).作業網址：
作業一網址

(2).請回答以下問題：
1.製作主題：歌詞
2.呈現之配色風格：簡約樸素
3.有無遇到的問題?還好
4.花多少時間製作：加加減減大概3周的上課時間
5.製作心得：有挑戰性


班級視傳2A，學號1081445110

MEPOERs said:

(1).作業網址：
作業一網址
1.製作主題：愛
2.呈現之配色風格：甜
3.有無遇到的問題?無
4.花多少時間製作：3小時
5.製作心得：很開心

視傳2a 1061445004



(編輯記錄)

1).作業網址：
作業一網址

(2).請回答以下問題：
1.製作主題：
(1)還願
(2)君の脈で踊りたかった

2.呈現之配色風格：
(1)用鮮明的黃色和紫色，去引出孩童們純真的幻想與感受，彷彿將人帶入了夢境之中一樣。
(2)深黑的藍色之中穿插著幾道亮眼的淺色帶，希望能帶出在人生遇到困難時仍然會有希望出線的感覺在。

3.有無遇到的問題?
無。

4.花多少時間製作：
3-4小時

5.製作心得：
對於是第一次製作網站是非常新鮮的體驗，希望往後還能夠學習更多不同技術，對於往後的課程非常期待。

視傳2A 1081445029 劉家琪



(編輯記錄)

(1).作業網址：
作業一網址

(2).請回答以下問題：
1.製作主題: 星辰大海是你 / 曇花一現雨及時
2.呈現之配色風格：以藍色為主體，呈現海洋與星空的感覺 / 以粉色為主體，呈現花朵的感覺
3.有無遇到的問題?目前還好
4.花多少時間製作：3個小時
5.製作心得：特別有成就感，覺得非常新奇!感覺從程式碼變成一個網頁時特別感動~

視傳二A，1081445068

作業一網址

1.製作主題：在憂鬱時聽的歌
2.呈現之配色風格：兩首歌都是偏憂鬱的歌，配色選擇比較憂鬱的顏色
3.有無遇到的問題?無
4.花多少時間製作：上課時間內完成
5.製作心得：還蠻好玩的

班級 視2A，學號 1081445060

作業一網址

(2).請回答以下問題：
1.製作主題：星球墜落/see you again
2.呈現之配色風格：前面以宇宙風格呈現大多事藍色系，後面以紫色系的顏色搭配
3.有無遇到的問題?沒有問題，學起來非常有成就感
4.花多少時間製作：2小時
5.製作心得：學習這門課真的很棒，可以做自己喜歡的網站風格，希望後來能學到更多

視傳2A 1081445015

(1).作業網址：
作業一網址


1.製作主題：歷史、戰曲

2.加入新效果愈呈現的風格為何：
表現出熱血，卻又可感受到歌曲中那個時代的興衰。
第一首因曲調較熱血，以暖色調（紅）呈現，
第二首的歌詞有些滄桑感，於是以中偏冷色調（藍紫）

3.遇到的問題?
不知道如何開css，不過後還才知道要放入同個資料夾

4.花多少時間製作：
約1小時

5.製作心得：
一開始看到這麼多語法，密密麻麻的排成一串，滿可怕的。


班級：視傳2A，學號：1081445078



(編輯記錄)

MEPOERs said:

(1).作業網址：
作業一網址

(2).請回答以下問題：
1.製作主題：花樣年華以及帶點青澀的主題。
2.呈現之配色風格：甜美可愛的糖果色調，符合少女心的感覺。
3.有無遇到的問題? 沒有問題。
4.花多少時間製作：用每次上課的時間做完。
5.製作心得：一開始實際要做css的時候，有點不太會用，不過再去看了老師網站的教學步驟影片，就了解該怎麼做了!
整個網站做完之後，覺得頓時學到了很多語法的技巧，也感覺自己對網頁又更熟悉一點了!繼續加油!

視傳2A，1081445074

作業網址：
作業一網址

(2).請回答以下問題：
1.製作主題：歌
2.呈現之配色風格：藍色調
3.有無遇到的問題?有,顏色更正後直接全沒了,所以兩首歌曲的顏色都一樣
4.花多少時間製作：2-3小時
5.製作心得：第一次接觸網頁設計,能做出頁面覺得很開心,跟著老師每堂課一步一步的完成,完成 真的很有成就感

MEPOERs said: