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

Advanced

[作業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基礎語法,利用單純色彩搭配字體設定設計出具有與歌詞意境吻合網頁


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/~web107a/hw01/hw01-107xxxxxxx

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

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


2. 上傳至FTP



3. 回覆本篇文章



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

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



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

(1).作業網址:file:///D:/%E4%B8%BB%E5%AA%92%E9%AB%94/%E6%A1%8C%E9%9D%A2/hw01-1075445058/index.html
網址應該是:http://cute.mepopedia.com/~web107a/hw01/hw01-1075445058/
(2).請回答以下問題:
1.製作主題: 鮮亮
2.欲呈現之配色風格: 亮麗顏色
3.有無遇到的問題? 無
4.花多少時間製作: 3H
5.製作心得:單單的基礎構成分配與認識指令



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

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

(2).請回答以下問題:
1.製作主題:療癒
2.欲呈現之配色風格:同色系配色
3.有無遇到的問題? 無
4.花多少時間製作:應該幾個小時吧
5.製作心得:做自己喜歡的歌很快樂



Edited 1 time(s). Last edit at 04/12/2019 01:59PM by 1075445050.
(編輯記錄)

1).作業網址:http://cute.mepopedia.com/~web107a/hw01/hw01-1075445048

(2).請回答以下問題:
1.製作主題:流行歌曲
2.欲呈現之配色風格: 把主題冷暖呼應
3.有無遇到的問題? 前面學習真的困難,但有同學跟老師的協助.所以還是很難
4.花多少時間製作:六天
5.製作心得:網頁設計真的困難........對很難



Edited 3 time(s). Last edit at 04/12/2019 02:09PM by 1075445048.
(編輯記錄)

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

(2).請回答以下問題:
1.製作主題:
古風
2.欲呈現之配色風格:
神秘的感覺
3.有無遇到的問題?
常常會搞錯檔案名稱
4.花多少時間製作:
兩個小時
5.製作心得:
很有成就感



Edited 1 time(s). Last edit at 04/13/2019 08:49PM by kaka6698.
(編輯記錄)

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

(2).請回答以下問題:
1.製作主題:純淨、繽紛
2.欲呈現之配色風格:index 純淨配色,next 粉色調。
3.有無遇到的問題? 因為還不熟悉,做CSS的時候想要修改字體顏色,但不容易找到修改的地方。
4.花多少時間製作:2小時
5.製作心得:做網頁邊聽喜歡的歌,最後能成功瀏覽很有趣。



Edited 5 time(s). Last edit at 04/21/2019 06:29PM by 1055440119.
(編輯記錄)

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

(2).請回答以下問題:
1.製作主題: 清晰
2.欲呈現之配色風格:色彩鮮艷,單色調
3.有無遇到的問題?沒有
4.花多少時間製作: 2小時
5.製作心得:更加了解自己喜歡的歌,熟悉了程式

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

(2).請回答以下問題:
1.製作主題: 簡約乾淨俐落
2.欲呈現之配色風格:index 虛擬的科技感,next 出山的森林感。
3.有無遇到的問題? 做一做會突然迷失在代碼中
4.花多少時間製作:1個半小時
5.製作心得:沉浸在配色和代碼迷宮中的樂趣

班級學號:影視3A-1055440093

(1).作業網址:http://cute.mepopedia.com/~web107a/hw01/hw01-1075445075
0
(2).請回答以下問題:
1.製作主題:平靜舒服
2.欲呈現之配色風格:同色系配色
3.有無遇到的問題? 無
4.花多少時間製作:大概1.30hr
5.製作心得:第一次認真玩dw做網頁,很有成就感很有趣。

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

(2).請回答以下問題:
1.製作主題: 抒情
2.欲呈現之配色風格:清新溫柔
3.有無遇到的問題? 無
4.花多少時間製作: 兩個半小時
5.製作心得:第一次製作網頁,沒有過的感覺,很酷。

(1).作業網址:http://cute.mepopedia.com/~web107a/hw01/hw01-1065445055/next.html

(2).請回答以下問題:
1.製作主題: 秋季
2.欲呈現之配色風格: 秋天的感覺
3.有無遇到的問題? 無
4.花多少時間製作: 半天
5.製作心得:第一次學習這方面的領域,有點麻煩,但很有趣。



Edited 1 time(s). Last edit at 04/19/2019 06:55PM by 1065445055.
(編輯記錄)

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

(2).請回答以下問題:
1.製作主題: 樂團
2.欲呈現之配色風格: 青春活力
3.有無遇到的問題? 會忘記怎麼樣連結
4.花多少時間製作: 2小時
5.製作心得:一開始覺得很難,但其實就是固定的東西,背熟就好。



Edited 1 time(s). Last edit at 04/19/2019 01:51PM by 1075445010.
(編輯記錄)

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

(2).請回答以下問題:
1.製作主題: 現代歌曲
2.欲呈現之配色風格: 馬卡龍色
3.有無遇到的問題? 製作css的時候地方顏色容易搞亂
4.花多少時間製作: 2小時半
5.製作心得:覺得挺難的,要記住一些代碼跟連結不能亂掉。

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

(2).請回答以下問題:
1.製作主題:古風,抒情
2.欲呈現之配色風格:柔美
3.有無遇到的問題? 配色位置配錯
4.花多少時間製作: 一天
5.製作心得:雖然很燒腦,但做得很開心

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

(2).請回答以下問題:
1.製作主題: 冷暖
2.欲呈現之配色風格: 冷色 暖色
3.有無遇到的問題? 無
4.花多少時間製作: 1天
5.製作心得:做完有成就感

1).作業網址:http://cute.mepopedia.com/~web107a/hw01/hw01-1075445064

(2).請回答以下問題:
1.製作主題: 藍色
2.欲呈現之配色風格: 藍色
3.有無遇到的問題? 顏色很難調整
4.花多少時間製作: 2小時
5.製作心得:
人生好困難ㄚㄚㄚㄚㄚ

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

(2).請回答以下問題:
1.製作主題: 流行音樂
2.欲呈現之配色風格: 少女心
3.有無遇到的問題? 連結的點有點複雜,但後面就有改善了。
4.花多少時間製作:2小時多
5.製作心得:一開始完全摸不著頭緒,後來就慢慢了解了。

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

(2).請回答以下問題:
1.製作主題: 溫柔
2.欲呈現之配色風格:同色系風格
3.有無遇到的問題? :無
4.花多少時間製作: 4小時
5.製作心得:第一次接觸,網頁設計覺得很有趣

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

(2).請回答以下問題:
1.製作主題: [作業01] html-css基礎概念練習-歌詞篇 (製作經典老歌的歌曲)
2.欲呈現之配色風格: 以灰色代表年代久遠,用藍色代表二十世紀八零年代代表搖滾
3.有無遇到的問題? 修改顏色的部分
4.花多少時間製作:2小時
5.製作心得:我選擇經典老歌,年代久遠的歌曲越來越珍貴,大部分的年輕族群追流行新的文化,許多原版年代久遠的歌曲失去原作,希望讓年輕族群和後代子孫了解年代久遠的歌曲。

http://cute.mepopedia.com/~web107a/hw01/hw01-1055445221


1.製作主題: 古風
2.欲呈現之配色風格: 中國古代色調
3.有無遇到的問題? 無
4.花多少時間製作: 半天
5.製作心得:第一次寫程式,發現程式上的每個字都可以估狗翻譯但上課不認真都不懂意義,刻意自己照著上面打來檢查甚麼字不懂意思再姑狗資料,發現其實還挺有趣的,過去也曾嘗試想寫其他程式,但是都知難而退,網頁作為起手式真的很好,看到自己成果出來好開心喔smiling bouncing smiley

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

(2).請回答以下問題:
1.製作主題: 溫暖
2.欲呈現之配色風格: 暖色系 可愛
3.有無遇到的問題?
4.花多少時間製作: 4H
5.製作心得:剛開始覺得網頁設計很難,之後慢慢發現其實蠻有趣的。

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

(2).請回答以下問題:
1.製作主題: 歌詞
2.欲呈現之配色風格:好看
3.有無遇到的問題? 有我學習進度慢
4.花多少時間製作: 很久
5.製作心得:我覺得網頁設計好難

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

1.製作主題:夢幻
2.欲呈現之配色風格:馬卡龍色
3.有無遇到的問題? 有
4.花多少時間製作:3hr
5.製作心得:很難,很多地方都不太了解

(1).作業網址:http://cute.mepopedia.com/~web107a/hw01/hw01-1075445061
(2).請回答以下問題:
1.製作主題:憂鬱
2.欲呈現之配色風格: 冷色和暖色系
3.有無遇到的問題? 有
4.花多少時間製作:2小時
5.製作心得:學習到怎麼配色。

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

(2).請回答以下問題:
1.製作主題:街頭 可愛
2.欲呈現之配色風格: 強烈風格
3.有無遇到的問題? 不太會用dw
4.花多少時間製作: 3小時
5.製作心得:很難的課程

(1).作業網址:http://cute.mepopedia.com/~web107a/hw01/hw01-1075445028
(2).請回答以下問題:
1.製作主題: 未單身、最佳男主角
2.欲呈現之配色風格: 粉紅色佳人
3.有無遇到的問題? 有白邊邊
4.花多少時間製作: 很久
5.製作心得:覺得有點好玩



Edited 1 time(s). Last edit at 05/10/2019 02:14PM by 悅嘉.
(編輯記錄)

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

(2).請回答以下問題:
1.製作主題:(2017太空漫遊)、(驢子)歌詞
2.欲呈現之配色風格:(奇幻)、(復古)配色
3.有無遇到的問題? 無
4.花多少時間製作:3小時
5.製作心得:thumbs up

(1).作業網址:http://cute.mepopedia.com/~web107a/hw01/hw01-1075445073/next.html

(2).請回答以下問題:
1.製作主題: 清新
2.欲呈現之配色風格: 同色系
3.有無遇到的問題? 兩個歌詞網無法轉換
4.花多少時間製作: 4hr
5.製作心得:雖然途中遇到問題,最終還是解決了!好像有所收穫~

file:///C:/Users/user/Desktop/%E6%AD%8C%E8%A9%9E%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88/index.html
1.製作主題:灰暗
2.欲呈現之配色風格:都以類似色調
3.有無遇到的問題? 網址好像怪怪的?
4.花多少時間製作:2小時
5.製作心得:算簡單又好難



Edited 1 time(s). Last edit at 06/11/2019 12:26AM by 郭沛婕.
(編輯記錄)

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

(2).請回答以下問題:
1.製作主題:
涼涼歌詞
2.欲呈現之配色風格:
配合歌名,用冷色系
3.有無遇到的問題?
沒有
4.花多少時間製作:
1天
5.製作心得:
很有趣。spinning smiley sticking its tongue out

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

(2).請回答以下問題:
1.製作主題:林宥嘉的歌
2.欲呈現之配色風格:暗色憂鬱的感覺
3.有無遇到的問題? 沒問題
4.花多少時間製作: 1個半小時
5.製作心得:還行

(1).作業網址:http://cute.mepopedia.com/~web107a/hw01/hw01-1075445026
(2).請回答以下問題:
1.製作主題: 藍藍的
2.欲呈現之配色風格: 統一
3.有無遇到的問題? 難
4.花多少時間製作: 5小時
5.製作心得:難爆

(1).作業網址:file:///C:/Users/user/Downloads/hw01-1075445052-20190621T045745Z-001/hw01-1075445052/next.html

(2).請回答以下問題:
1.製作主題: 日本歌曲
2.欲呈現之配色風格: 灰階、同色系
3.有無遇到的問題? 第二頁的配色還不太會設定
4.花多少時間製作: 幾小時
5.製作心得:雖然很難理解但做起來蠻好玩的