[作業03]期末作業首頁篇

[作業03] 期末作業首頁篇

作業範例：http://jinjin.mepopedia.com/~jinjin/hw/hw03/
期末作業：http://jinjin.mepopedia.com/~jinjin/webdesign-notes/

1. 製作說明

1.請參考以下講義

[url=http://jinjin.mepopedia.com/~jinjin/webdesign-notes/homeworks-3.html][作業03講義] 期末作業首頁設計/article/section/table[/url] 的步驟製作。

本單元為作業03，為期末作業首頁設計，首頁內容通常包含整個網站的概述與精華內容統整。

設定header中的LOGO設計與導覽列設定，以及main區塊內table表格的基本設定，加入區塊，呈現不同分類主題，設定繞圖排文，並加入圖片，增加網頁的豐富性。綜合期中作業所學，可依期末作業內容，自行設定版面。

設計內容：
1.設計多頁式網站，自行設定主題，針對內容，設定配色及主要風格。
2.可以以主題式網站為主，介紹一個地方文化、特色、美食或喜歡的事物、喜歡的明星、介紹自己，也可延續期中作業主題，使之更完整。
3.準備網站內容所需之圖與文，需要設計logo、視覺主圖、以及其他頁面內容需要的圖文資料，需要原創或取得授權。
4.footer請設定個人的專屬版權聲明，並註明『本網頁為作業之用，如有侵權敬請告知』字樣。

5.以FileZilla上傳至FTP

2. 繳交作業方式

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

第一個作業FTP上的資料夾為：hw03

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

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

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

2. 上傳至FTP

3. 回覆本篇文章

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



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1075445050
1.製作主題： 鯨魚
2.網頁類型（活動式/主題式/個人/企業/..)：主題式
3.導覽列分類（網站內容/中英文）: 首頁index，焦點新聞news，生物種類介紹kind，捕鯨waling，相關網站related
4.欲呈現之配色風格： 日本傳統色
5.有無遇到的問題? 第二個表格的字跟表格下方的距離，已解決
6.花多少時間製作： 2天
7.製作心得：比上一個複雜



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1075445038
1.製作主題：肯德基
2.網頁類型（活動式/主題式/個人/企業/..)：企業
3.導覽列分類（網站內容/中英文）: https://www.kfcclub.com.tw/tw/
4.欲呈現之配色風格： 美味顏色
5.有無遇到的問題? 不知道怎麼配色
6.花多少時間製作： 5小時
7.製作心得：心累累

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1075445054
1.製作主題： 韓劇
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）: | 韓劇介紹 | 演員陣容 | 分集劇情 | 原聲帶 | 幕後花絮
4.欲呈現之配色風格： 粉色浪漫
5.有無遇到的問題? 顏色配色
6.花多少時間製作： 三小時
7.製作心得：做完自己最喜歡的一部韓劇真爽，很有成就感



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1075445036
1.製作主題：美食紀錄
2.網頁類型（活動式/主題式/個人/企業/..)： 個人
3.導覽列分類（網站內容/中英文）: news最新食肥 / konwAbout155女孩 / diary豬的肥食記 / Punch豬的踏青 / life豬與老大的生活
4.欲呈現之配色風格： 繽紛好吃
5.有無遇到的問題? 放影片mp4的程式
6.花多少時間製作： 2天
7.製作心得：很開心

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1075445010
1.製作主題： 個人網站
2.網頁類型（活動式/主題式/個人/企業/..)： 個人
3.導覽列分類（網站內容/中英文）: 首頁／關於我／IDOL／商品／分享區
4.欲呈現之配色風格： 輕柔可愛
5.有無遇到的問題? 很想自己加東西上去,但是用一用就亂掉了(;´༎ຶД༎ຶ`)
6.花多少時間製作： 兩小時
7.製作心得：加油啊一定要努力記得語法(´;ω;`)ヾ(･∀･`)

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1075445024
1.製作主題： Kanahei’s Small animals
2.網頁類型（活動式/主題式/個人/企業/..)：主題式
3.導覽列分類（網站內容/中英文）: 主頁/作者介紹/角色介紹/小小知識/了解更多
4.欲呈現之配色風格： 活潑俏皮可愛
5.有無遇到的問題?
6.花多少時間製作： 4小時
7.製作心得：越來越上手了!



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1075445066
1.製作主題：YOUTUBER
2.網頁類型（活動式/主題式/個人/企業/..)：個人
3.導覽列分類（網站內容/中英文）: 首頁 / 認識MARK / 有趣遊戲影片 / YOUTUBER好友 / 大型計畫
4.欲呈現之配色風格：文青
5.有無遇到的問題? 無
6.花多少時間製作：6小時
7.製作心得：有比較上手

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1075445018
1.製作主題： 宜蘭新生活。旅遊
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）: 首頁(Home)， 關於宜蘭(about)，旅玩景點(Travel)，美食(Food)，住宿消費(Accom)
4.欲呈現之配色風格：藍色調
5.有無遇到的問題? 不知道該如何置中
6.花多少時間製作： 3小時
7.製作心得：很有趣，也能比較上手了。

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1075445028
1.製作主題：介紹桃園
2.網頁類型（活動式/主題式/個人/企業/..)： 介紹
3.導覽列分類（網站內容/中英文）:首頁 關於桃園 旅遊景點 美食 住宿消費
4.欲呈現之配色風格： 青綠
5.有無遇到的問題? 無
6.花多少時間製作： 兩個多小時
7.製作心得：好累

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1075445005
1.製作主題： 鄭秀晶
2.網頁類型（活動式/主題式/個人/企業/..)：
3.導覽列分類（網站內容/中英文）: 中
4.欲呈現之配色風格： 白咖啡
5.有無遇到的問題? 無
6.花多少時間製作： 半天
7.製作心得：有成就感

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1075445022
1.製作主題： 韓團偶像
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）: 首頁 演藝經歷 音樂作品 獲獎紀錄 演唱會
4.欲呈現之配色風格： 暗色
5.有無遇到的問題? 無
6.花多少時間製作： 2小時
7.製作心得：做完很開心

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1075445044
1.製作主題： 大陸劇
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）: 中文
4.欲呈現之配色風格： 單一
5.有無遇到的問題? 沒有
6.花多少時間製作： 還好
7.製作心得：更進一步的了解網頁設計。

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1075445048
1.製作主題：
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）: 最新消息/認識英雄/平行宇宙/主宇宙事件/最愛的英雄
4.欲呈現之配色風格： 冷
5.有無遇到的問題? 頭痛
6.花多少時間製作： 2小時
7.製作心得：頭太痛了

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1055445221
1.製作主題： 個人網頁
2.網頁類型（活動式/主題式/個人/企業/..)：個人
3.導覽列分類（網站內容/中英文）: 中
4.欲呈現之配色風格： 溫暖簡單
5.有無遇到的問題?
6.花多少時間製作： 一小時
7.製作心得：當訊息變大量時也要花費不少時間完成,太小看一頁了

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1075445059
1.製作主題：
2.網頁類型（活動式/主題式/個人/企業/..)： 個人作品集
3.導覽列分類（網站內容/中英文）: 首頁 平面設計 繪畫類 攝影 專題製作
4.欲呈現之配色風格： 寧靜 簡潔
5.有無遇到的問題?
6.花多少時間製作： 3hr
7.製作心得：

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1075445063
1.製作主題： 時裝介紹
2.網頁類型（活動式/主題式/個人/企業/..)： 雜誌類別
3.導覽列分類（網站內容/中英文）HOW/ Brand Introduction/ The Shows video/ Most Favorite/ NEWS!
4.欲呈現之配色風格：簡約風
5.有無遇到的問題? 太多問題
6.花多少時間製作： 2小時
7.製作心得：網業應該是我人生中最挫折的東西了哈哈

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1075445063
1.製作主題： 時裝介紹
2.網頁類型（活動式/主題式/個人/企業/..)： 雜誌類別
3.導覽列分類（網站內容/中英文）SHOW/ Brand Introduction/ The Shows video/ NEWS!
4.欲呈現之配色風格：簡約風
5.有無遇到的問題? 太多問題
6.花多少時間製作： 2小時
7.製作心得：網業應該是我人生中最挫折的東西了哈哈



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1075445021
1.製作主題：
2.網頁類型（活動式/主題式/個人/企業/..)： 個人網站
3.導覽列分類（網站內容/中英文）:食記.IG景點
4.欲呈現之配色風格： 粉色
5.有無遇到的問題? 上傳
6.花多少時間製作：6個小時
7.製作心得：比上次難度增加

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1075445012
1.製作主題：偶像
2.網頁類型（活動式/主題式/個人/企業/..)：主題式
3.導覽列分類（網站內容/中英文）: 專輯介紹，生活歷程，個人演唱會，戲劇作品
4.欲呈現之配色風格:簡約
5.有無遇到的問題? 文字無法置中
6.花多少時間製作：一天
7.製作心得：好累~

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1075445075
1.製作主題： troye sivan
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）: 首頁，about him，youth，mymymy
4.欲呈現之配色風格： 藍色
5.有無遇到的問題? 無
6.花多少時間製作： 全部4-5hr在拆開來交
7.製作心得：感覺自己沒有做得很理想



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1075445063
1.製作主題： 時裝週介紹
2.網頁類型（活動式/主題式/個人/企業/..)： 雜誌
3.導覽列分類（網站內容/中英文）: SHOW/Brand Introduction/ The Shows video/ NEWS!
4.欲呈現之配色風格： 簡約風
5.有無遇到的問題? 很多問題
6.花多少時間製作： 6小時
7.製作心得：真的超難，做的過程中也發生超多問題，但慢慢靜下心來做，其實慢慢的就可以做要做的出來。

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1055440093
1.製作主題：ONE OK ROCK
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）: 樂團介紹index/ 吉他手&主唱 concept/貝斯手&鼓手html/ 專輯css /演唱會advanced
4.欲呈現之配色風格： 搖滾
5.有無遇到的問題? 暫無
6.花多少時間製作： 2.5小時
7.製作心得：還可以

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1075445073/
1.製作主題： 韓國藝人
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）: 個人介紹/粉絲名稱 /音樂作品 /影視作品/ 活動歷程
4.欲呈現之配色風格： 粉嫩色系]
5.有無遇到的問題? 常找不到換顏色的地方
6.花多少時間製作： 3hr
7.製作心得：換顏色真的很累哈哈

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1075445037
1.製作主題：熱門音樂社
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）: 首頁/精彩活動/相關連結/入社報名
4.欲呈現之配色風格：黑色系
5.有無遇到的問題? 有網頁設計真的好難
6.花多少時間製作：5小時
7.製作心得：都快哭了

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1075445026
1.製作主題： 遊戲網頁
2.網頁類型（活動式/主題式/個人/企業/..)： 遊戲
3.導覽列分類（網站內容/中英文）: =-=
4.欲呈現之配色風格：黑暗 髒髒的
5.有無遇到的問題? 從頭到尾都是問題
6.花多少時間製作： 數不清
7.製作心得：我試著想理解 卻理解不能

http://cute.mepopedia.com/~web107a/hw02/hw02-1075445035

(2).請回答以下問題：
1.製作主題： 偶像介紹
2.欲呈現之配色風格：活潑糖果色系
3.有無遇到的問題? 無
4.花多少時間製作：兩天
5.製作心得：還可以

http://cute.mepopedia.com/~web107a/hw02/hw02-1075445035

(2).請回答以下問題：
1.製作主題： 偶像介紹
2.欲呈現之配色風格：活潑糖果色系
3.有無遇到的問題? 無
4.花多少時間製作：1天
5.製作心得：還可以

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1075445061
1.製作主題：我的自我介紹
2.網頁類型（活動式/主題式/個人/企業/..)：個人
3.導覽列分類（網站內容/中英文）: 個人介紹、求學階段、讀書計畫、我的目標
4.欲呈現之配色風格：黃色
5.有無遇到的問題? 有
6.花多少時間製作：2天
7.製作心得：有學到東西。



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1055445208
1.製作主題：輕黏土DIY
2.網頁類型（活動式/主題式/個人/企業/..)： 個人
3.導覽列分類（網站內容/中英文）: 首頁index 、基本工具介紹concept、黏土介紹html、基礎作品css、進階作品advanced
4.欲呈現之配色風格: 活潑可愛
5.有無遇到的問題? 無
6.花多少時間製作： 1天
7.製作心得：很有成就感

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1055440119
1.製作主題： こまつなな 小松菜奈
2.網頁類型： idol主題
3.導覽列分類: 首頁 index 最新消息nana 演出作品show 相片集photo 文章連結link
4.欲呈現之配色風格： 紫橘色配色
5.有無遇到的問題? 無
6.花多少時間製作： 2HR
7.製作心得：還行！



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1075445002
1.製作主題：模型製作 DIY
2.網頁類型（活動式/主題式/個人/企業/..)：活動式和連結式
3.導覽列分類（網站內容/中英文）: 中英文
4.欲呈現之配色風格：棕色、淡紅色
5.有無遇到的問題? 圖片調整有困難
6.花多少時間製作：50分鐘

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1075445002
1.製作主題： 模型製作DIY
2.網頁類型（活動式/主題式/個人/企業/..)： 活動式和連結式
3.導覽列分類（網站內容/中英文）: 中英文
4.欲呈現之配色風格： 棕色和淡紅色
5.有無遇到的問題? 沒時間用
6.花多少時間製作：50分鐘
7.製作心得：製作有部分困難

作業網址：http://cute.mepopedia.com/~web107a/hw03/hw03-1075445058/index.html
1.製作主題： 個人
2.網頁類型（活動式/主題式/個人/企業/..)：個人
3.導覽列分類（網站內容/中英文）：💕 最新消息 /品牌概念/ 品牌形象 /用心精匠/ 風格 💕
4.欲呈現之配色風格：溫暖
5.有無遇到的問題? 分頁連結打錯
6.花多少時間製作：4天
7.製作心得：錯一個地方又沒發覺那裡錯，感慨。