[期中作業]OnePage-網頁製作

[期中作業] OnePage-網頁製作

作業範例：http://jinjin.mepopedia.com/~jinjin/hw/midterm

1. 製作說明

1.請參考以下講義

（1）[url=http://jinjin.mepopedia.com/~jinjin/webdesign-notes/homework-2.html][講義] 期中前置篇-header/nav/LOGO設計與導覽列設定/main/table[/url]
（2）[url=http://jinjin.mepopedia.com/~jinjin/webdesign-notes/homework-midterm.html][講義] 期中作業-onepage/main/article/section/圖文編排區塊單元/錨點連結/[/url]

的步驟製作。

期中作業為一頁式網頁（OnePage）

1.設計一一頁式網頁（OnePage)，自行設定主題，針對內容，設定配色及相關風格。

2.準備圖與文，需要設計logo、視覺主圖、以及其他頁面內容需要的圖文資料，需要原創或取得授權。

3.footer請設定個人的專屬版權聲明，並註明『本網頁為作業之用，如有侵權敬請告知』字樣。

5.以FileZilla上傳至FTP

本單元需達成的目標有：

1.header/nav/LOGO設計與導覽列設定
2.main主圖的設定
3.表格的設定
4.article/section/單元的設定
5.圖文編排區塊單元
6.錨點連結
7.footer版權說明設定

2. 教學影片

1.【作業02解析】(一) header/nav/LOGO設計與導覽列設定/main/table-初步設定
https://youtu.be/gGTm3UYMzqE

3. 繳交作業方式

1. 製作完成後，檔案命名方式：

期中作業FTP上的資料夾為：midterm

每位同學請將自己的資料夾命名為：midterm-學號
這個作業的網址則為: http://cute.mepopedia.com/~web107b/midterm/midterm-107xxxxxxx

資料夾內含：
1.html部分：首頁命名為index.html
2.css部分：命名為style.css
3.img：圖片資料夾

存放在 < midterm-學號 > 的資夾內
可由作業二資料夾複製修改為midterm

2. 上傳至FTP

3. 回覆本篇文章

請回答以下問題/可先於4/26前回覆前三項：

作業網址：http://cute.mepopedia.com/~web107b/midterm/midterm-107xxxxxxx
1.製作主題：
2.網頁類型（活動式/主題式/個人/企業/..)：
3.導覽列分類（網站內容/中英文）：
4.欲呈現之配色風格：
5.有無遇到的問題?
6.花多少時間製作：
7.製作心得：



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107b/midterm/midterm-1055433048
1.製作主題：自我介紹
2.網頁類型（活動式/主題式/個人/企業/..)：個人
3.導覽列分類（網站內容/中英文）：最新消息news、個人資料information、興趣interest、專長speciality、作品Portfolio
4.欲呈現之配色風格：簡約、現代風
5.有無遇到的問題? 無
6.花多少時間製作：1天
7.製作心得：學會如何將影片崁入。

1055433048 葉珈昀



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107b/midterm/midterm-1045445134
1.製作主題： 英劇介紹
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）： 系列劇集/選角/配樂/介紹
4.欲呈現之配色風格：藍色、灰色
5.有無遇到的問題? 照片置中不太會
6.花多少時間製作： 3天
7.製作心得： 看到英文頭眼昏花，好在終於完成了哈哈哈

作業網址：http://cute.mepopedia.com/~web107b/midterm/midterm-1075445086
1.製作主題： HOMETOWN
2.網頁類型（活動式/主題式/個人/企業/..)： 個人
3.導覽列分類（網站內容/中英文）：最新消息/news，服裝/cloth，關於HOMETOWN/aboutme，聯絡方式/contact
4.欲呈現之配色風格： 橘色，粉紅色，夕陽，夏天
5.有無遇到的問題? 無
6.花多少時間製作： 2天
7.製作心得：雖然很難，但我覺得很有趣

視傳1B 1075445086 比嘉伊津希



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107b/midterm/midterm-1075445034
1.製作主題： 甜點介紹
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）： 甜點介紹 店家資訊 教學製作 其它甜點
4.欲呈現之配色風格： 淡黃色、白色
5.有無遇到的問題? 無
6.花多少時間製作：
7.製作心得：

視傳一B 1075445034 鄭詳霖

作業網址：http://cute.mepopedia.com/~web107b/midterm/midterm-1075445068
1.製作主題： 偶像
2.網頁類型（活動式/主題式/個人/企業/..)： 主題
3.導覽列分類（網站內容/中英文）： 關於他們/about，出道節目/program，歷代專輯/album，專屬團綜/variety
4.欲呈現之配色風格： 粉、藍
5.有無遇到的問題? 無
6.花多少時間製作： 2.5天
7.製作心得：能製作出來覺得很開心



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107b/midterm/midterm-1075445062
1.製作主題：自我介紹
2.網頁類型（活動式/主題式/個人/企業/..)：主題式
3.導覽列分類（網站內容/中英文）： 個人介紹、個性、興趣、才藝、特殊經歷
4.欲呈現之配色風格： 橘色系列和可愛風格
5.有無遇到的問題? 有
6.花多少時間製作： 1天
7.製作心得：比較更了解排版了。



(編輯記錄)

1.作業網址：http://cute.mepopedia.com/~web107b/hw02/hw02-1075445080
(2)回答問題：
1.製作主題： 剷屎官
2.網頁類型（活動式/主題式/個人/企業/..)： 個人
3.導覽列分類（網站內容/中英文）：最新消息 認識鏟屎官 精選照片
4.欲呈現之配色風格： 咖啡色，黃色
5.有無遇到的問題? 背景不會變色
6.花多少時間製作： 2天
7.製作心得：



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107b/midterm/midterm-1055433049
1.製作主題：
2.網頁類型（活動式/主題式/個人/企業/..)： ONE PIECE 航海王
3.導覽列分類（網站內容/中英文）： 成員介紹 故事介紹 惡魔果實 one piece 航海王劇場版
4.欲呈現之配色風格： 簡單風格
5.有無遇到的問題? 背景不會變色
6.花多少時間製作： 1天
7.製作心得：學到如何排版，然後一直改，學到如何加圖片跟排版



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107b/midterm/midterm-1075445085
1.製作主題：東京喰種
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）：登場人物 劇情大綱 特殊設定 電視電影 遊戲 舞台劇
4.欲呈現之配色風格：黑色、白色、部分紅色、陰鬱風
5.有無遇到的問題? 無
6.花多少時間製作：2天
7.製作心得：整理的時間有點久，不過做的蠻開心的。

作業網址:http://cute.mepopedia.com/~web107b/midterm/midterm-1075445072
1.製作主題：傳說對決凱撒霸主
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）： 中文
4.欲呈現之配色風格： 青綠色
5.有無遇到的問題? 尚無 只是需要動腦
6.花多少時間製作： 一個小時
7.製作心得：頭好痛
視傳1B朱廷翌



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107b/midterm/midterm-1075445045/
1.製作主題： 寵物狗
2.網頁類型（活動式/主題式/個人/企業/..)： 個人
3.導覽列分類（網站內容/中英文）：關於寵物的檔案
4.欲呈現之配色風格：咖啡色
5.有無遇到的問題? 文字設定有點困難
6.花多少時間製作： 5小時
7.製作心得：css設定有問題!

作業網址：http://cute.mepopedia.com/~web107b/midterm/midterm-1075445023/
1.製作主題：我的攝影作品
2.網頁類型（活動式/主題式/個人/企業/..)：個人
3.導覽列分類（網站內容/中英文）：紀錄、風景、動物、植物、天空
4.欲呈現之配色風格：小清新
5.有無遇到的問題? 網址沒辦法改
6.花多少時間製作：1個禮拜
7.製作心得:覺得好難，花了很多時間才做完。



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107b/midterm/midterm-1075445049
1.製作主題： WANNA ONE介紹
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）： 團員介紹 團體資料 音樂作品 廣告代言 演唱會
4.欲呈現之配色風格： 可愛簡單
5.有無遇到的問題:改顏色很難
6.花多少時間製作： 兩小時
7.製作心得：可以做自己的偶像很開心 耶比

作業網址：http://cute.mepopedia.com/~web107b/midterm/midterm-1075445079
1.製作主題： 偶像
2.網頁類型（活動式/主題式/個人/企業/..)：主題式
3.導覽列分類（網站內容/中英文）： 歌手介紹 個人生活 音樂作品 演唱會 影視作品
4.欲呈現之配色風格： 橘黃色
5.有無遇到的問題? 沒有
6.花多少時間製作： 3跟4小時
7.製作心得：成就感

http://cute.mepopedia.com/~web107b/midterm/midterm-1075445033


1.製作主題：Seventeen
2.網頁類型： 主題式
3.導覽列分類：介紹Seventeen/中文
4.欲呈現之配色風格：Seventeen應援色
5.有無遇到的問題? 影片嵌入格式錯誤
6.花多少時間製作：一個禮拜
7.製作心得：對電腦不是很擅長，所以做的很辛苦很久，但是成就感還是有的。

作業網址：http://cute.mepopedia.com/~web107b/public_html/midterm/midterm-1055443132
1.製作主題： MIT
2.網頁類型（活動式/主題式/個人/企業/..)： 主题式
3.導覽列分類（網站內容/中英文）： 首页、时事新闻、全台天气状况、用词差异、线下产品
4.欲呈現之配色風格： 黑白灰
5.有無遇到的問題? 有的css不知怎么调到自己预期的样式
6.花多少時間製作： 1week
7.製作心得：眼睛快看花了。。。

http://cute.mepopedia.com/~web107b/midterm/midterm-1075445004
1.製作主題： 自我介紹
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）： 我的日常、朋友、家人等......
4.欲呈現之配色風格：可愛甜美
5.有無遇到的問題? 圖片格式一直跑掉
6.花多少時間製作： 2天
7.製作心得：一開始根本聽不懂，慢慢會了就很有成就感

http://cute.mepopedia.com/~web107b/midterm/midterm-1075445004
1.製作主題： 自我介紹
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）： 我的日常、朋友、家人等......
4.欲呈現之配色風格：可愛甜美
5.有無遇到的問題? 圖片格式一直跑掉
6.花多少時間製作： 2天
7.製作心得：一開始根本聽不懂，慢慢會了就很有成就感

作業網址：http://cute.mepopedia.com/~web107b/midterm/midterm-1075445076

1.製作主題： 桃猿隊
2.網頁類型（活動式/主題式/個人/企業/..)：主題式
3.導覽列分類（網站內容/中英文）： 棒球隊/職業棒球隊
4.欲呈現之配色風格：藍白 紅
5.有無遇到的問題? 有些字無法改顏色
6.花多少時間製作： 兩小時
7.製作心得：
視傳1B 1075445076



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107b/midterm/midterm-1075445007/#top
1.製作主題：偶像介紹
2.網頁類型（活動式/主題式/個人/企業/..)：主題式
3.導覽列分類（網站內容/中英文）： 最新消息 個人簡介 音樂作品 影視作品 個人榮譽
4.欲呈現之配色風格：冷色 暗黑又溫暖的
5.有無遇到的問題? 無
6.花多少時間製作： 一天
7.製作心得：雖然過程中感到眼花撩亂，但做完後成就感很大

作業網址：http://cute.mepopedia.com/~web107b/midterm/midterm-1075445084
2.網頁類型（活動式/主題式/個人/企業/..)：個人
3.導覽列分類（網站內容/中英文）： 最新專輯 私人收藏
4.欲呈現之配色風格： 粉紅色 騷
5.有無遇到的問題? 沒有
6.花多少時間製作： 1小時
7.製作心得：愛你沒法度

1075445084 黃章豪

作業網址：http://cute.mepopedia.com/~web107b/midterm/midterm-1035461031/
1.製作主題： 西洋女歌手-亞莉安娜
2.網頁類型（活動式/主題式/個人/企業/..)：個人
3.導覽列分類（網站內容/中英文）：最新消息 個人介紹 演唱會 音樂作品 個人榮譽
4.欲呈現之配色風格： 黑灰 極簡
5.有無遇到的問題? 無
6.花多少時間製作：2-3小時
7.製作心得：很興奮

1035461031劉貞妏

作業網址：http://cute.mepopedia.com/~web107b/midterm/midterm-1075445032
1.製作主題： 美食
2.網頁類型（活動式/主題式/個人/企業/..)： 個人
3.導覽列分類（網站內容/中英文）： 中文
4.欲呈現之配色風格：優美
5.有無遇到的問題? 有
6.花多少時間製作： 2小時
7.製作心得：影片連結的問題

作業網址：http://cute.mepopedia.com/~web107b/midterm/midterm-1075445040
2.網頁類型（活動式/主題式/個人/企業/..)： 企業
3.導覽列分類（網站內容/中英文）： 首頁 甜點介紹 店家資訊 最新餐點
4.欲呈現之配色風格： 簡單
5.有無遇到的問題? 沒有
6.花多少時間製作： 2小時
7.製作心得：終於做完了

作業網址：http://cute.mepopedia.com/~web107b/midterm/midterm-1075445082
1.製作主題：兔子
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）： 中
4.欲呈現之配色風格： 乾淨
5.有無遇到的問題? 沒
6.花多少時間製作： 1天
7.製作心得：

作業網址：http://cute.mepopedia.com/~web107b/midterm/midterm-1075445011
1.製作主題： fgo
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）： 登場人物 英靈階職 遊戲介紹＆玩法 遊戲介面
4.欲呈現之配色風格： 藍 紫色
5.有無遇到的問題? 和hw2的圖片會跳來跳去 只能複製圖片來解決
6.花多少時間製作： 4小時多
7.製作心得：能用喜歡的東西做出來分享感覺不錯

作業網址：http://cute.mepopedia.com/~web107b/midterm/midterm-1075445006
1.製作主題： 音樂
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文) : news/演唱會. concept/樂團介紹,about/樂團成員, music/影音推薦
4.欲呈現之配色風格： 黑 白 黃
5.有無遇到的問題? 已經解決了!
6.花多少時間製作： 很長
7.製作心得：很累不過好玩

作業網址：http://cute.mepopedia.com/~web107b/midterm/midterm-1075445027
1.製作主題： 夜市美食
2.網頁類型（活動式/主題式/個人/企業/..)：主題式
3.導覽列分類（網站內容/中英文）： 台灣夜市/夜市小吃/小吃排行/相關地址
4.欲呈現之配色風格： 橘色、紅色
5.有無遇到的問題? 不太會調整圖片格式。
6.花多少時間製作： 一星期
7.製作心得：覺得這次作業又更難了，製作中很燒腦，一直找不到該要調整的地方。



(編輯記錄)

http://cute.mepopedia.com/~web107b/midterm/midterm-1075445015

1.製作主題：育頡的老公
2.網頁類型（活動式/主題式/個人/企業/..)： 偶像
3.導覽列分類（網站內容/中英文）：個人簡介/團體/關於公司/演藝生涯/演員
4.欲呈現之配色風格： 粉咖
5.有無遇到的問題? 都是問題
6.花多少時間製作： 2個禮拜
7.製作心得：一直撞牆



(編輯記錄)

作業網址：file:///Users/xiaoyouhan/Desktop/hw02-1075445025/index.html
1.製作主題：StreetSexy photo studio
2.網頁類型（活動式/主題式/個人/企業/..)：個人
3.導覽列分類（網站內容/中英文）：主頁home、關於about、購物shop、聯絡我們contact us
4.欲呈現之配色風格：簡約、現代風
5.有無遇到的問題? 無
6.花多少時間製作：1天
7.製作心得：學會如何將影片崁入。

作業網址：http://cute.mepopedia.com/~web107b/midterm/midterm-1075445067
1.製作主題：偶像
2.網頁類型（活動式/主題式/個人/企業/..)：主題
3.導覽列分類（網站內容/中英文）：
5.有無遇到的問題? 無
6.花多少時間製作：1天
7.製作心得：學會很多

作業網址: http://cute.mepopedia.com/~web107b/midterm/midterm-1075445029
1.製作主題：嚇奇驚影院
2.網頁類型（活動式/主題式/個人/企業/..)： 企業式
3.導覽列分類（網站內容/中英文）: 影院介紹、新嚇上映、嚇奇類別、驚影推薦。
4.欲呈現之配色風格： 讓觀看者的覺得驚悚的。
5.有無遇到的問題? 無。
6.花多少時間製作： 3個小時
7.製作心得：覺得還不賴。



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107b/midterm/midterm-1075445060
1.製作主題： 攝影
2.網頁類型（活動式/主題式/個人/企業/..)：主題式
3.導覽列分類（網站內容/中英文）： | Home | About | Photo | Story |
4.欲呈現之配色風格： 冷色系
5.有無遇到的問題? 還好
6.花多少時間製作： 2hr
7.製作心得：好累喔

作業網址：http://cute.mepopedia.com/~web107b/midterm/midterm-1075445069
1.製作主題：自我介紹
2.網頁類型（活動式/主題式/個人/企業/..)： 個人
3.導覽列分類（網站內容/中英文）：
4.欲呈現之配色風格： 清晰
5.有無遇到的問題? css一直跑掉
6.花多少時間製作： 3天
7.製作心得：終於做完很感動

作業網址：http://cute.mepopedia.com/~web107b/hw03/hw03-1075445077/
1.製作主題： 粄回一城
2.網頁類型（活動式/主題式/個人/企業/..)： 高中專題
3.導覽列分類（網站內容/中英文）： 研究動機 動畫呈現 包裝設計 成果發展等
4.欲呈現之配色風格： 可愛
5.有無遇到的問題? 無
6.花多少時間製作： 一天
7.製作心得：超級難的！！！



(編輯記錄)

作業網址：作業網址：http://cute.mepopedia.com/~web107b/midterm/midterm-107xxxxxxx
1.製作主題： 天竺鼠
2.網頁類型（活動式/主題式/個人/企業/..)： 自由式
3.導覽列分類（網站內容/中英文）：
4.欲呈現之配色風格： 綠白
5.有無遇到的問題? 教我的人不會教
6.花多少時間製作： 2h
7.製作心得：