[期末作業] 多頁專題網站設計

1. 製作RWD｜多頁專題網站設計

---

1.參照講義製作
［講義］RWD網頁複習｜HTML引用公共佈局(多個HTML共用HEADER與FOOTER)｜斷點 (BREAKPOINTS)｜計數器｜FONT AWESOME 6.1.1
［講義］多頁網頁編輯 (一)｜NAVIGATION｜ MENU ｜ VIDEO
［講義］多頁網頁編輯 (二)｜介紹頁面《關於我們》｜ 頂圖微動畫設定
［講義］多頁網頁編輯 (三) 網頁架構 ｜ 列表頁 ｜ 內容頁
［講義］多頁網頁編輯 (四) 相簿設定 ｜ 聯絡我們

---

2. 作業說明

1.請以期中企劃為主，繼續完成網站，作品須原創，不可使用他人作品。

2.參照上課範例，或其他免費版型(但須至少符合以下項目)，挑選一適合期末作業主題的版型，結合選擇之版型製作。

3.每週皆有製作進度，請至Moodle繳交。

4.需完成之製作項目：
(1) 完成網頁企劃書，期中企劃修改，上傳至Moodle。
(2) 製作『個人圖示favicon』、『LOGO』。
(3) 使用『圖示字體(icon font) Font Awesome』。
(4) 依據範本替換文字或圖片修改，可選擇需要的部分即可。
(5) 針對企劃書方向，完成一個專業RWD多頁網站｜至少10頁（基本70分，並依團隊人數斟酌給分）
(6) 製作『首頁影片』、『微動圖』等頂圖效果，不限制，依設計需求。
(7) 製作『介紹頁面』，並進行修改。
(8) 製作『列表頁』以及『內容頁（文章頁）』，不限定類型，依設計需求。
(9) 製作『相簿』，並進行修改，不限定類型，依設計需求。
(10) 製作『網站架構圖』。
(11) 請務必調整為與主題相符的色彩，以及調整字體、粗細等樣式設定，使修改之網站產生全新的風格與面貌，並與設定之網頁屬性相符。
(12) 需要連結的部分，請務必補上連結，每個連結都必須有作用。不必要的地方務必刪除，整個網站需無錯誤。

---

3. 評分標準：

1.美感性與精緻性（配色、圖片、排版效果、字體調整、整體效果、擺脫原有的感覺、表現獨特風格）。
2.完整性（符合規定，且連結點選都完整）。
3.正確性（語法正確，不出錯、連結需完整）。
4.加分項（內容豐富且完整，超過規定的要求）。

---

4.製作完畢請上傳FTP，資料夾命名為英文：請依主題自行命名。

請回覆於作業文章
：
(1)網站主題：
(2)作業網址 ：
<a href="http://my.cute.edu.tw/~1095445XXX/OOO" target="_blank">[期末作業] 多頁專題網站設計</a>
每組除上傳外，並需至Moodle繳交資料夾壓縮檔
(若無法上傳，請註明)
(3)原有網站網址：
(4) 參考之版型網址：
(5) 製作時間:
(6) 製作心得:
(7) 組員分工 (個人組不需填寫)

班級，學號



(編輯記錄)

(1) 作業網址 ：
[期末作業] 多頁專題網站設計


(3) 參考之版型網址：http://jinjin.mepopedia.com/~jinjin/web-design/rwd-temp/%EF%BC%8Aasher-html/
(4) 製作時間:2個禮拜
(5) 製作心得:對我們來說還是會不熟悉語法，常常打錯，精神會崩潰但有收穫也很多，做出完整的網站。
(6) 組員分工:各半一起做

組員：視傳2A 1095445019簡詩蓉 1095445020邵筠庭



(編輯記錄)

(1) 網站主題：澎湖旅遊網
(2) 作業網址 ：[期末作業] 多頁專題網站設計
(3) 原有網站網址：無
(4) 參考之版型網址：參考版型
(5) 製作時間:時間加總起來應該算一週多
(6) 製作心得:經過這次進階網頁課程的洗禮，我們發現設計網頁真的是一件，非常需要精密計畫、安排的事情，它必須經由條列式的案例搜尋、網頁排版、清楚的思路等等，才有辦法一一設計出正確的架構，而當完成一個完整架構的網站，同時也會感受到滿滿的成就感，這可能就是製作網頁的樂趣吧！
(7) 組員分工
視傳3A 1085445013 頁面彙整、頁面主要撰寫
視傳3A 1085445041 內容頁撰寫
視傳3A 1085445045 內容資料收集彙整
視傳3A 1085445047 內容資料收集彙整、內容頁撰寫



(編輯記錄)

(1) 作業網址 ：無法上傳至雲端
[期末作業]

(2)原來的網站:http://www.gotobali.org.tw/default2.aspx?EpfJdId9UuBtAWQNka145x3cacVHPbvL
(3) 參考之版型網址：http://jinjin.mepopedia.com/~jinjin/web-design/rwd-temp/76%20humanity/
(4) 製作時間:2個禮拜
(5) 製作心得:使用不熟悉的新方式製作網頁，從中獲得許多學習，但因疫情而縮減的時限讓成果不甚滿意
(6) 組員分工:自己圖利完成

組員1045448124陳芊儒



(編輯記錄)

(1) 作業網址 ：
[期末作業] 多頁專題網站設計

(3) 參考之版型網址： http://jinjin.mepopedia.com/~jinjin/web-design/rwd-temp/0-trim/index.html
(4) 製作時間: 2個禮拜
(5) 製作心得: 實際製作網頁時會發現與原本視覺設計上有落差，在語法上還有很多不懂所以花了蠻多時間。


1095445027-王妤如



(編輯記錄)

(1) 作業網址 ：
[期末作業] 多頁專題網站設計
(2) 參考之版型網址：http://jinjin.mepopedia.com/~jinjin/web-design/rwd-temp/0-trim/
(3) 製作時間:一兩個禮拜吧
(4) 製作心得:很有趣，學到更多東西，完成網頁時很有成就感。

視傳3B，1085445048，陳美璉

(1) 作業網址 ：[期末作業] 多頁專題網站設計
(3) 參考之版型網址：http://jinjin.mepopedia.com/~jinjin/web-design/final-temp/
(4) 製作時間: 2個禮拜
(5) 製作心得: 我們原先設計的網頁視覺跟最終製作的網頁有一些不同，因為對於某些語法還不太熟悉，在製作上有所差異，但這次的製作讓我們有所學習也有所進步。

1095445007-許銘樺
1095445016-徐喆宸
1095445023-黃思齊



(編輯記錄)

(1)網站主題：緯來日本台
(2)作業網址 ：
[期末作業] 多頁專題網站設計

已將壓縮檔上傳moodle，再麻煩老師上傳。

(3)原有網站網址：http://japan.videoland.com.tw/
(4)參考之版型網址：http://jinjin.mepopedia.com/~jinjin/web-design/final-temp/index-video.html
(5)製作時間：一個禮拜
(6)製作心得：雖然進度有點趕，但完成了比之前更豐富的網頁，增加了更多網頁知識。
(7)組員分工

視傳3A 1085445053 首頁+電視網+相簿
視傳3A 1085445083 日劇+日本學問大



(編輯記錄)

1)網站主題： 北京青年旅行社股份有限公司
(2)作業網址 ：
[期末作業] 多頁專題網站設計
(3)原有網站網址： http://www.byts.com.cn/
(4) 參考之版型網址： http://jinjin.mepopedia.com/~jinjin/web-design/final-temp/
(5) 製作時間: ３個禮拜
(6) 製作心得: 發現與原本視覺設計上有落差，在語法上還有很多不懂花蠻多時間。

視傳3A，1085445031



(編輯記錄)

(1)網站主題：台灣流浪兔保護協會
(2)作業網址 ：
[期末作業] 多頁專題網站設計
(3)原有網站網址：http://www.rabbitsos.org/index.php
(4) 參考之版型網址：http://jinjin.mepopedia.com/~jinjin/web-design/final-temp/
(5) 製作時間:一周
(6) 製作心得:在整理和摸索版型上花了一點時間，一些視覺規劃和想像中的有點落差，但對於網頁製作概念與操作有變得更加熟悉！
(7) 組員
1085445021李嘉敏
1095445034姚毓軒

(1)網站主題：Hi Life萊爾富
(2)作業網址 ：
[期末作業] 多頁專題網站設計
(3)原有網站網址：原有網站
(4) 參考之版型網址：參考版型
(5) 製作時間:4個禮拜
(6) 製作心得:進階網頁感覺比之前學的還要難， 雖然這次也是用老師的模板來製作，但這次模板不是每個健都可以連結，而是必須自己做出連結的網頁及東西出來，所以很多都搞不太懂要如何完成，花的時間也就比較多，雖然設計網頁還不是這麼熟練，但也因為需要思考及製作讓我們對網頁設計有更深入一點的了解，也因此收穫良多
(7) 組員分工
視傳3A 1085445001 資料蒐集、 網頁配色、網頁編排設計、圖片連結與製作、網頁內容撰寫
視傳3A 1085445011 資料蒐集、 網頁配色、網頁編排設計、圖片連結與製作、網頁內容撰寫
視傳3A 1085445067 資料蒐集、 網頁配色



Edited 3 time(s). Last edit at 06/07/2022 07:37PM by 1085445011.



(編輯記錄)

(1)網站主題：社團法人台灣愛兔協會
(2)作業網址 ：
[期末作業] 多頁專題網站設計

(3)原有網站網址：https://www.loverabbit.org/products/all/1
(4) 參考之版型網址：http://jinjin.mepopedia.com/~jinjin/web-design/final-temp/index.html
(5) 製作時間:兩個禮拜
(6) 製作心得:有學習到很多，但製作過程有點辛苦，因為不知道為什麼我有好幾次 ctrl s 完我排版就壞掉了，所以重作好幾次了。

視傳3B 1085445028 許佩怡



(編輯記錄)

(1)網站主題：
(2)作業網址 ：
[期末作業] 多頁專題網站設計

(3)原有網站網址：http://www.greenidea.com.tw/m/411-1306-1103.php
(4) 參考之版型網址：http://jinjin.mepopedia.com/~jinjin/web-design/rwd-temp/suitcase/
(5) 製作時間:兩個禮拜
(6) 製作心得:因為期末提前了，時間上很急，但能完成也很開心

視傳3B，1085445070

(1)網站主題：威尼斯影城
(2)作業網址 ：
[期末作業] 多頁專題網站設計

(3) 原有網站網址: http://www.venice-cinemas.com.tw/
(4) 參考之版型網址：file:///C:/Users/User/AppData/Local/Temp/Rar$EXa3212.8657/final-temp/index.html

(5) 製作時間: 2週多
(6) 製作心得: 網站這一次比較複雜,分組上需要多花一點時間來分配網站製作,不然容易搞混,完成之後很有成就感
(7) 組員&分工: 視覺討論好之後 網頁平分製作 再由一人統整
視傳3A 1085445043
視傳3A 1085445063
視傳3A 1085445059

(1)網站主題：佳樂精緻蛋糕專賣店

(2)作業網址 ：[期末作業] 多頁專題網站設計

(3)原有網站網址：http://www.cakeking.com.tw/front/bin/home.phtml

(4) 參考之版型網址 ：http://jinjin.mepopedia.com/~jinjin/web-design/final-temp/index.html

(5) 製作時間 : 大約兩周

(6) 製作心得 : 因為遠距的關係很多東西都跟不上要重複去看錄影 但一步一步完成的感覺很好

(7) 組員分工 : 網頁平分製作 各自有各自要完成的
1085443060 林志熹
1085443090 江軍
1085443012 游輝彣



(編輯記錄)

(1)網站主題：家扶基金會
(2)作業網址 ：
[期末作業] 多頁專題網站設計

(3)原有網站網址：家扶基金會
(4) 參考之版型網址：參考版型網址
(5) 製作時間:約1~2週
(6) 製作心得:因為參考版型有很多地方不是我想要的，所以有自行添加class跟css還有區塊等等，與之前相比更有自己在設計網站，而不是單單套版型改色彩而已，雖然還有一些地方不是一開始預想的，不過能改到接近預想我很滿意了!還有很多不同網站版型想互相套用的地方還需要再研究!

視傳3B，1085445046

(1)網站主題：小琉球旅遊
(2)作業網址 ：
[期末作業] 多頁專題網站設計
(3)原有網站網址：https://liuqiu.pthg.gov.tw/liuqiu/web_tw.php
(4) 參考之版型網址：http://jinjin.mepopedia.com/~jinjin/web-design/rwd-temp/%EF%BC%8Aasher-html/
(5) 製作時間:零碎時間
(6) 製作心得:第一次學到很多,雖然有點難,但過程很有趣,也稍微學到課本上不會教的事情。
(7) 組員分工
主要都是大家一起討論
視傳2A 1095445036 戴柏玉

視傳2A 1095445010 姜詠馨

視傳2A 1095445032 江紫瑄

視傳2A 1095445045 高柴彩花

視傳2A 1095445046 洪子濰

視傳2A，1095445036

(1)網站主題：美髮髮廊
(2)作業網址 ：
[期末作業] 多頁專題網站設計

(3)原有網站網址：https://www.shop1688.com.tw/aom20191127017/?fbclid=IwAR2I3Hb3WwwE-Oel64b4YsUD_sSaQ1RMYDw65jIk3h-XVl-AzrfbKOj6mPQ
(4) 參考之版型網址：http://jinjin.mepopedia.com/~jinjin/web-design/rwd-temp/0-trim/index.html
(5) 製作時間:三天
(6) 製作心得:雖然之前有上過網頁設計了，但還是有很多細節的部分沒辦法自己修改，還是會遇到很多狀況，但是製作起來還是挺開心的，畢業之後有時間還是會繼續鑽研這一塊。

(7) 組員分工 (個人組不需填寫)
視傳4A 1075445094 李秉澤 主要大部分製作
視傳4B 1075445020 林孟涵 資料蒐集

.製作完畢請上傳FTP，資料夾命名為英文：請依主題自行命名。

請回覆於作業文章
：
(1)網站主題：
(2)作業網址 ：
[期末作業] 多頁專題網站設計


(3)原有網站網址：https://www.85cafe.com/
(4) 參考之版型網址：file:///C:/Users/qiuxu/Desktop/11%20megakit-master/HTML/index.html
(5) 製作時間:一個禮拜
(6) 製作心得:
雖然網頁很複雜，但做完之後很有成就感

視傳3A 1085445039 邱玄綺



(編輯記錄)

(1)網站主題:新竹玻工館
(2)作業網址:
[期末作業] 多頁專題網站設計

每組除上傳外，並需至Moodle繳交資料夾壓縮檔
(若無法上傳，請註明)
(3) 參考之版型網址:http://jinjin.mepopedia.com/~jinjin/web-design/final-temp/
(4) 製作時間:3個星期以上
(5) 製作心得:之前還不太熟悉時做錯直接打掉重做...不過做到現在已經熟練了一些了！非常有成就感~語法也比較能看的懂了~

視傳2A ｜吳嘉怡｜ 1095445005



(編輯記錄)

(1)網站主題：小琉球
(2)作業網址 ：
[期末作業] 多頁專題網站設計
https://drive.google.com/file/d/1JO8zKX6Z__SDeXcCnww4BU91tp7rhvUB/view?usp=sharing

每組除上傳外，並需至Moodle繳交資料夾壓縮檔
(3)原有網站網址：https://liuqiu.pthg.gov.tw/liuqiu/web_tw.php
(4) 參考之版型網址：http://jinjin.mepopedia.com/~jinjin/web-design/rwd-temp/%EF%BC%8Aasher-html/
(5) 製作時間:連續幾天在207早上/中午,一直製作到晚上~
(6) 製作心得:由於是上網課,大家地方都不一樣,無法聚集在一起討論,所以完成得很困難,可是幸好最後趕上了~(子濰和彩花每天來學校很累哈哈)
(7) 組員分工 (個人組不需填寫)
(#)工作分配表(#)
(/)企劃書討論：戴柏玉、江紫瑄、姜詠馨、洪子濰、高柴彩花
(/)企劃書整合：洪子濰
(/)Logo設計：戴柏玉、姜詠馨、洪子濰、高柴彩花
(/)Figma：江紫瑄、洪子濰、高柴彩花
(/)Figma整合：高柴彩花
(/)資料分析：高柴彩花
(/)收集資料：戴柏玉、江紫瑄、洪子濰、高柴彩花
(/)圖片搜尋：戴柏玉、江紫瑄、洪子濰、高柴彩花
(/)網頁編碼：戴柏玉、洪子濰、高柴彩花
(/)網頁整合：洪子濰、高柴彩花
(/)期中&期末報告：洪子濰

班級，學號
1095445045 高柴彩花,1095445046 洪子濰,1095445036 戴柏玉,1095445032 江紫瑄,1095445010 姜詠馨



(編輯記錄)