[期末作業] 多頁主題式網頁設計

[期末作業] 多頁主題式網頁設計

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

1. 製作說明

1.請延續作業三及作業四，繼續完成整個網站，將課堂所學應用於網頁之中。

2.請參考以下講義
[url=http://jinjin.mepopedia.com/~jinjin/webdesign-notes/homeworks-3.html][作業03講義] 期末作業首頁設計/article/section/table[/url] 的步驟製作。
[url=http://jinjin.mepopedia.com/~jinjin/webdesign-notes/homework-4.html][作業04講義] 期末作業-列表頁設計/article/section/[/url] 的步驟製作。

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

評分標準：
1.完成四頁，無重大錯誤，至少80分。未達到標準80分以下。
2.完成四頁，無重大錯誤，並達到設計水準則往上加分，設計優秀者則90分以上。
3.未達三頁，並含重大錯誤則不及格。

完成時間：
1.6/14前請務必上傳與回覆，當天上課發表與檢討期末作業，及其他作業最後繳交期限
2.6/21確認分數，期末作業可修改，期末作業最後修改期限。
[color=#CC0066]以上兩次上課請務必準時到課，未到課並未上傳與回覆作業者，期末分數零分。如不能出席，請事先告知，否則以零分計算，未到課分數如有問題，請自行負責[/color]。

2. 繳交作業方式

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

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

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

資料夾內含：
1.html部分：首頁命名為index.html，其他頁面請自行命名
2.css部分：命名為style.css
3.img：圖片資料夾
存放在 < final-學號 > 的資夾內
[color=#CC0066]切記，所有命名不可為中文，均為英文或數字[/color]

2. 上傳至FTP

3. 回覆本篇文章

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



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107b/final/final-1075445034
2.網頁類型（活動式/主題式/個人/企業/..)： 個人
3.導覽列分類（網站內容/中英文）: 首頁 、詳細介紹阿福、原來如此、天空島、自成一派、EP、翻唱歌曲
4.欲呈現之配色風格： 粉
5.有無遇到的問題?
6.花多少時間製作：
7.製作心得：

視傳一B 1075445034

作業網址：http://cute.mepopedia.com/~web107b/final/final-1075445076
2.網頁類型（活動式/主題式/個人/企業/..)： 寶藏巖藝術村介紹
3.導覽列分類（網站內容/中英文）: 藝術村介紹
4.欲呈現之配色風格： 黑 紅 白
5.有無遇到的問題? 有些顏色無法改
6.花多少時間製作：兩小時
7.製作心得：已經慢慢開始了解網頁
視傳1B 1075445076



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107b/final/final-1055433048
1.製作主題：介紹澎湖
2.網頁類型（活動式/主題式/個人/企業/..)：主題式
3.導覽列分類（網站內容/中英文）: 首頁index、關於澎湖about、景點推薦attractions、美食推薦food、水上活動推薦water、其他介紹other
4.欲呈現之配色風格：繽紛色彩
5.有無遇到的問題? 無
6.花多少時間製作：2天
7.製作心得：學到了如何做多頁式的網頁。

行管三A 1055433048 葉珈昀



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107b/final/final-1045445134
1.製作主題： 都市介紹
2.網頁類型（活動式/主題式/個人/企業/..)： 主題
3.導覽列分類（網站內容/中英文）: 歷史/地理/文化與生活/交通/旅遊
4.欲呈現之配色風格： 藍色與紅色
5.有無遇到的問題? 沒
6.花多少時間製作： 一天
7.製作心得：看電腦螢幕看到眼睛要脫窗了＠＠

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

作業網址：http://cute.mepopedia.com/~web107b/final/final-1075445085
1.製作主題： 東京喰種tokyo ghoul
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）: 首頁/index，登場人物/character，劇情大綱/outline，特殊設定/settings，電視電影/dramma，遊戲/gmae
4.欲呈現之配色風格： 黑白紅藍、簡潔
5.有無遇到的問題? 無
6.花多少時間製作： 3天
7.製作心得：登場人物的分頁的東西好像有點太多。

作業網址：http://cute.mepopedia.com/~web107b/final/final-1075445045/
1.製作主題:泰國華新旅遊介紹
2.網頁類型（活動式/主題式/個人/企業/..)： 主題
3.導覽列分類（網站內容/中英文）: | 首頁 | 文化習俗 | 熱門景點 | 必買美食 | 交通方式 | 更多景點
4.欲呈現之配色風格： 藍色度假風格
5.有無遇到的問題? 有~顏色要改很久，內文的文字不知如何改
6.花多少時間製作： 一星期
7.製作心得：認識更多華新~還想再去~

作業網址：http://cute.mepopedia.com/~web107b/final/final-1055433049
1.製作主題： 介紹美國歌手selena gomez
2.網頁類型（活動式/主題式/個人/企業/..)： 個人
3.導覽列分類（網站內容/中英文）: 首頁/歌手介紹/代言/熱門音樂作品
4.欲呈現之配色風格： 時尚簡單風格
5.有無遇到的問題? 無
6.花多少時間製作： 1個禮拜
7.製作心得：做很多個網頁比較難，但還好最後做完了，比較看得懂程式碼了。

file:///C:/Users/user/Desktop/final-1065445046/final/index.html

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

視傳1B 1075445084 黃章豪

作業網址：http://cute.mepopedia.com/~web107b/final/final-1075445004
1.製作主題：jenny的秘密小檔案
2.網頁類型（活動式/主題式/個人/企業/..)：個人
3.導覽列分類（網站內容/中英文）: 網站內容/中文
4.欲呈現之配色風格：粉色可愛
5.有無遇到的問題? 無
6.花多少時間製作：2天
7.製作心得：做完很開心

作業網址：http://cute.mepopedia.com/~web107b/final/final-1075445072
1.製作主題：聖鬥士星矢:覺醒
2.網頁類型（活動式/主題式/個人/企業/..)：主題式
3.導覽列分類（網站內容/中英文）: 首頁、聖鬥士介紹、隊伍推薦、小宇宙說明、戰鬥視頻
4.欲呈現之配色風格：憂鬱藍 黯然銷魂
5.有無遇到的問題? 有但是自己解決了
6.花多少時間製作：1天
7.製作心得：學到了如何做出一個完整網頁

視傳1B朱廷翌



(編輯記錄)

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

作業網址：http://cute.mepopedia.com/~web107b/final/final-1075445086
1.製作主題：Okinawa
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）: 首頁,景點推薦/touristsspots,美食推薦/food,交通工具/transportation,傳統文化/traditionalculture
4.欲呈現之配色風格：藍色
5.有無遇到的問題? : 無
6.花多少時間製作：2天
7.製作心得：雖然做很多頁很辛苦，但我覺得很好玩。

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



(編輯記錄)

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

作業網址：http://cute.mepopedia.com/~web107b/final/final-1075445007
1.製作主題： 偶像
2.網頁類型（活動式/主題式/個人/企業/..)：主題
3.導覽列分類（網站內容/中英文）: | 首頁 | 音樂作品 | 影視作品 | 主持 | 個人獎項
4.欲呈現之配色風格： 白 米白 土黃 橘色
5.有無遇到的問題? 找不到顏色替換，後來才發現要自己打
6.花多少時間製作： 2天
7.製作心得：看得眼花撩亂



(編輯記錄)

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

1.製作主題:seventeen
2.網頁類型（活動式/主題式/個人/企業/..)：主題式
3.導覽列分類（網站內容/中英文）: 中文
4.欲呈現之配色風格： 官方應援色
5.有無遇到的問題? 分業連結用很久
6.花多少時間製作： 2天
7.製作心得：眼睛看得很痠

作業網址：http://cute.mepopedia.com/~web107b/final/final-1055443132
1.製作主題： MIT（大陆人在台湾）
2.網頁類型（活動式/主題式/個人/企業/..)： 主题式
3.導覽列分類（網站內容/中英文）: 网站内容
4.欲呈現之配色風格： 黑灰白
5.有無遇到的問題? 不知道怎么把各个网页链接在一起，后来慢慢摸索尝试，最终解决了
6.花多少時間製作： 5张网页加起来差不多好几天
7.製作心得：看似简单的网页内容，其实对于初学者来说制作不简单

1055443132-黃喬永

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

作業網址：http://cute.mepopedia.com/~web107b/final/final-1075445011
1.製作主題： 偶像
2.網頁類型（活動式/主題式/個人/企業/..)： 主題
3.導覽列分類（網站內容/中英文）: 首頁 成員介紹 音樂作品 演出作品 現在的初代神七
4.欲呈現之配色風格： 粉 淺藍 淺黃
5.有無遇到的問題? 無
6.花多少時間製作： 5小時
7.製作心得：終於做完了 眼睛看久了非常酸

作業網址：http://cute.mepopedia.com/~web107b/final/final-1035461031/index.html
1.製作主題： 巴拉望
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）: 首頁/關於巴拉望/景點推薦/美食推薦/其他
4.欲呈現之配色風格： 簡單
5.有無遇到的問題? 還好
6.花多少時間製作： 4-5小時
7.製作心得：可以完成多頁式的網頁覺得很棒!學到很多東西~~

1035461031劉貞妏

作業網址：http://cute.mepopedia.com/~web107b/final/final-1075445070
1.製作主題：偶像
2.網頁類型（活動式/主題式/個人/企業/..)： 主題
3.導覽列分類（網站內容/中英文）: 首頁/index，團體介紹/Idol，成員介紹/about，音樂作品/musicworks，專屬團綜/variety
4.欲呈現之配色風格： 黃
5.有無遇到的問題? 不知道怎麼置中了ＱＱ
6.花多少時間製作： 3 Day
7.製作心得：眼睛花掉了 好難........



(編輯記錄)

作業網址：file:///Users/xiaoyouhan/Desktop/final-1075445025/css.html
1.製作主題： StreetSexy 攝影工作室
2.網頁類型（活動式/主題式/個人/企業/..)： 企業，個人
3.導覽列分類（網站內容/中英文）: 主頁home，關於about，購物shop，聯絡我們contact us
4.欲呈現之配色風格： 簡約
5.有無遇到的問題? 無
6.花多少時間製作： 2天
7.製作心得：複雜，需花時間

http://cute.mepopedia.com/~web107b/final/final-1075445015
1.製作主題： 育頡的老公
2.網頁類型（活動式/主題式/個人/企業/..)：偶像
3.導覽列分類（網站內容/中英文）: 首頁/音樂作品/影視作品/個人榮譽
4.欲呈現之配色風格： 藍紅
5.有無遇到的問題? 好像都是問題
6.花多少時間製作： 1個禮拜
7.製作心得：還蠻燒腦的

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

作業網址：http://cute.mepopedia.com/~web107b/final/final-1075445023
2.網頁類型（活動式/主題式/個人/企業/..)： 個人
3.導覽列分類（網站內容/中英文）: 風景 動物 旅遊 植物
5.有無遇到的問題? 網址不能改
6.花多少時間製作： 兩個禮拜
7.製作心得：覺得好難，但還好有做出來



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107b/final/final-1075445049
1.製作主題： wanna one
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）: | 團體介紹 | 音樂作品 | 廣告 | 演唱會 | 相關團體
4.欲呈現之配色風格： 藍色
5.有無遇到的問題:很難
6.花多少時間製作:四小時
7.製作心得：一直複製貼上好累，花了很多時間

作業網址：http://cute.mepopedia.com/~web107b/final/final-1075445027
1.製作主題：Twice
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
尚未完成作業

作業網址：http://cute.mepopedia.com/~web107b/final/final-1075445006
1.製作主題： 偶像
2.網頁類型（活動式/主題式/個人/企業/..)： 主題
3.導覽列分類（網站內容/中英文）: | 首頁 | 樂團歷史 | 成員介紹 | 歷代專輯 | 演唱會
4.欲呈現之配色風格： 黑 白 灰
5.有無遇到的問題? 有
6.花多少時間製作： 兩天
7.製作心得：很難

作業網址：http://cute.mepopedia.com/~web107b/final/final-1075445062
1.製作主題： 橘子-生活日記介紹
2.網頁類型（活動式/主題式/個人/企業/..)： 個人
3.導覽列分類（網站內容/中英文）: 個人介紹 / 我的興趣 / 讀書計畫 / 我的經歷
4.欲呈現之配色風格： 橘色
5.有無遇到的問題? 有
6.花多少時間製作： 1天
7.製作心得：遇到很多困難，但也更了解網頁設計了。



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107b/final/final-1075445029
1.製作主題：pink
2.網頁類型（活動式/主題式/個人/企業/..)： 個人式
3.導覽列分類（網站內容/中英文）: 首頁、我的家庭、喜歡的食物、喜歡的種類、喜歡的類別電影。
4.欲呈現之配色風格： 溫暖清新風
5.有無遇到的問題? 有遇到網頁要切換的問題，結果問了同學才知道原來是檔名的問題，感謝同學。
6.花多少時間製作： 12個小時
7.製作心得：從頭做到尾下來，那時卡在切換檔的時候共重複做了有20幾次的同個擋了吧，最後同學一講原來是檔名不是整體的問題，害得我重複做到心很累。

作業網址：http://cute.mepopedia.com/~web107b/final/final-1075445027
1.製作主題： Twice
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）: 首頁/團體介紹/最新專輯/熱門點播/私心收藏
4.欲呈現之配色風格：粉橘色
5.有無遇到的問題? 不太會繞圖排文，還有調整文字格式。
6.花多少時間製作：4天
7.製作心得：做完了肩膀很酸很累。

作業網址：http://cute.mepopedia.com/~web107b/final/final-1075445079
1.製作主題： 海綿寶寶
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）: | 個人介紹 | 興趣 | 地點 | 職業 | 人際關係
4.欲呈現之配色風格： 黃橘藍
5.有無遇到的問題? 有
6.花多少時間製作： 很久
7.製作心得：挖真的難ㄚㄚㄚㄚㄚ天要滅我

作業網址：http://cute.mepopedia.com/~web107b/final/final-1075445069
1.製作主題： 自我介紹
2.網頁類型（活動式/主題式/個人/企業/..)： 個人
3.導覽列分類（網站內容/中英文）: 關於我 經歷 專長 想成為的樣子
4.欲呈現之配色風格： 清晰
5.有無遇到的問題? 原本的ＤＷ破解版突然無法用，導致做得很趕，頭好痛
6.花多少時間製作： 3天 有2天在搞破解 (還沒成功....)
7.製作心得： 希望能pass

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

作業網址：http://cute.mepopedia.com/~web107b/final/final-1075445067/css.html
2.網頁類型（活動式/主題式/個人/企業/..)： 偶像
3.導覽列分類（網站內容/中英文）首頁 音樂作品 得獎 我的最愛
5.有無遇到的問題? 很多問題
6.花多少時間製作：5小時
7.製作心得： 摁!