[作業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/~web107b/hw03/hw03-107xxxxxxx

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

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

2. 上傳至FTP

3. 回覆本篇文章

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



(編輯記錄)

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

行管三A 1055433048 葉珈昀



(編輯記錄)

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

視傳1B 1075445068

作業網址：http://cute.mepopedia.com/~web107b/hw03/hw03-1075445045/
1.製作主題： 抹茶
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）: | 首頁 | 抹茶的由來 | 抹茶甜點 | 抹茶飲料 | 推薦抹茶的影片
4.欲呈現之配色風格： 綠色和深色
5.有無遇到的問題? 無
6.花多少時間製作： 4小時
7.製作心得：深入了解抹茶

作業網址：http://cute.mepopedia.com/~web107b/hw03/hw03-1075445086/
1.製作主題： 沖繩
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）： 首頁/index，關於沖繩/about，景點推薦/touristsspots，美食推薦/food，交通工具/transportation，傳統文化/traditionalculture
4.欲呈現之配色風格： 藍色
5.有無遇到的問題? 無
6.花多少時間製作： 2天
7.製作心得：終於會footer頁尾設定了。

視傳1B 1075445086



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107b/hw03/hw03-1075445023
1.製作主題： 我的攝影作品
2.網頁類型（活動式/主題式/個人/企業/..)： 個人
3.導覽列分類（網站內容/中英文）：風景 動物 旅遊 玩樂攻略 植物
4.欲呈現之配色風格： 藍 黃
5.有無遇到的問題? 改網址後網頁沒辦法顯示
6.花多少時間製作： 1天
7.製作心得：雖然很難，不過幸好有做出來

作業網址：http://cute.mepopedia.com/~web107b/hw03/hw03-1075445034
1.製作主題： 小時後的零食
2.網頁類型（活動式/主題式/個人/企業/..)： 個人
3.導覽列分類（網站內容/中英文）: 首頁\甜食類\不知到什麼類\其它簡介
4.欲呈現之配色風格： 淡黃色
5.有無遇到的問題?
6.花多少時間製作：
7.製作心得：黑眼圈很重

視傳系 1B 1075445034 鄭詳霖

作業網址：http://cute.mepopedia.com/~web107b/hw03/hw03-1055443132
1.製作主題： MIT
2.網頁類型（活動式/主題式/個人/企業/..)： 主题式
3.導覽列分類（網站內容/中英文）: 首页、时事新闻、全台天气状况、用词差异、线下产品
4.欲呈現之配色風格： 黑白灰
5.有無遇到的問題? html还算简单，css有的代码不知道在哪了改
6.花多少時間製作： 1week
7.製作心得：伤脑

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



(編輯記錄)

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

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

作業網址：http://cute.mepopedia.com/~web107b/hw03/hw03-1075445007/
1.製作主題：偶像
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）: | 首頁 | 音樂作品 | 影音作品 | 影視作品 | 個人榮譽
4.欲呈現之配色風格： 白色米色深色
5.有無遇到的問題? 無
6.花多少時間製作： 一天
7.製作心得：做了自己喜歡的偶像很開心

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



(編輯記錄)

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

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

1075445084 黃章豪



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107b/hw03/hw03-1055433049
1.製作主題： 介紹美國歌手selena gomez
2.網頁類型（活動式/主題式/個人/企業/..)： 個人
3.導覽列分類（網站內容/中英文）: 首頁/歌手介紹/代言/熱門音樂作品
4.欲呈現之配色風格： 時尚簡單風格
5.有無遇到的問題? 剛開始插入圖片很奇怪，現在好了
6.花多少時間製作： 3天
7.製作心得： 剛開始我想得太複雜，不太會做，還好有朋友教我，現在變得我越來越上手了，我學會如何設計一整頁的主頁跟排版。



(編輯記錄)

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

http://cute.mepopedia.com/~web107b/hw03/hw03-1035461031/
1.製作主題：巴拉望
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）: 簡介/關於巴拉望/景點推薦/美食推薦/交通介紹
4.欲呈現之配色風格： 間單
5.有無遇到的問題? 無
6.花多少時間製作： 2-3小時
7.製作心得：滿意

1035461031劉貞妏



(編輯記錄)

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

(1).作業網址：http://cute.mepopedia.com/~web107b/hw03/hw03-1075445040

(2).請回答以下問題：
1.製作主題： 蛋糕
2.欲呈現之配色風格： 簡單
3.有無遇到的問題? 沒有
4.花多少時間製作： 2小時
5.製作心得：終於做完了

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

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

視傳1B朱廷翌

作業網址：http://cute.mepopedia.com/~web107b/hw03/hw03-1075445027
1.製作主題： Twice
2.網頁類型（活動式/主題式/個人/企業/..)： 主題式
3.導覽列分類（網站內容/中英文）: 首頁/團體介紹/最新專輯/熱門點播/私心收藏
4.欲呈現之配色風格： 粉橘色、黃色、紫色
5.有無遇到的問題? 無
6.花多少時間製作： 6小時
7.製作心得：可以做自己喜歡的團體，還有配色，是件開心的是，希望可以繼續努力。



(編輯記錄)

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



(編輯記錄)

file:///C:/Users/User/Desktop/hw03-1075445015/index.html
1.製作主題： 育頡的老公
2.網頁類型（活動式/主題式/個人/企業/..)：偶像
3.導覽列分類（網站內容/中英文）: 首頁/音樂作品/影視作品/個人榮譽
4.欲呈現之配色風格： 藍紅
5.有無遇到的問題? 全部都是問題
6.花多少時間製作： 6個小時
7.製作心得：想撞豆腐

作業網址：http://cute.mepopedia.com/~web107b/hw03/hw03-1075445070
1.製作主題： 偶像
2.網頁類型（活動式/主題式/個人/企業/..)： 主題
3.導覽列分類（網站內容/中英文）： 首頁/index，團體介紹/Idol，成員介紹/about，音樂作品/musicworks，專屬團綜/variety
4.欲呈現之配色風格： 代表色黃色+粉色
5.有無遇到的問題? 無
6.花多少時間製作： 3天
7.製作心得：很有成就感

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

作業網址：http://cute.mepopedia.com/~web107b/hw03/hw03-1075445029
1.製作主題: pink
2.網頁類型（活動式/主題式/個人/企業/..)： 個人式
3.導覽列分類（網站內容/中英文）: 中文
4.欲呈現之配色風格： 溫暖清新風。
5.有無遇到的問題? 無
6.花多少時間製作：3個小時
7.製作心得： 覺得網頁是個很深奧的東西，要經由不斷學習才能慢慢懂得。



(編輯記錄)

作業網址：file:///Users/xiaoyouhan/Desktop/hw03-1075445025/index.html
1.製作主題：Nat Geo photographer in Taiwan
2.網頁類型（活動式/主題式/個人/企業/..)：主題式
3.導覽列分類（網站內容/中英文）: 首頁index、主頁home 、關於攝影師About photographer's 、作品Photos、聯絡我contact usr
4.欲呈現之配色風格：簡約色彩
5.有無遇到的問題? 影片及照片致中
6.花多少時間製作：2天
7.製作心得：學到了如何做區塊、表格、數字編號。

視1A 1075445025 蕭有涵

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



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107b/hw03/hw03-1075445067
1.製作主題：偶像
2.網頁類型（活動式/主題式/個人/企業/..)：主題式
3.導覽列分類（網站內容/中英文）: 首頁 音樂 得獎 我的最愛
4.欲呈現之配色風格：咖啡乳白
5.有無遇到的問題? 無
6.花多少時間製作：1天
7.製作心得：
視覺傳達一A李吟芳



(編輯記錄)

作業網址：http://cute.mepopedia.com/~web107b/hw03/hw03-1075445029
1.製作主題： pink
2.網頁類型（活動式/主題式/個人/企業/..)： 個人式
3.導覽列分類（網站內容/中英文）: 中文
4.欲呈現之配色風格： 溫暖清新風
5.有無遇到的問題? 無
6.花多少時間製作： 3個小時
7.製作心得：覺得慢慢做著有了解一些。

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

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