Re: [期末作業]專題網站設計

[期末作業說明] 專題網站製作[hr]

1. 作業說明

請參考[期末作業說明] 專題網站製作--以網站新人王或全國慈善/科技/人文網頁設計比賽為例

1. 參考網址

2019年全國慈善/科技/人文網頁設計比賽暨行動APP創作比賽
https://www.cpmah.org.tw/2019/announcement-2019app.html

2019網頁設計比賽得獎名單
https://www.cpmah.org.tw/2019/20190911.html?showall=&start=2

1.2017-第16屆新人王網站設計大賽 http://2017.netking.tw
2.2016-第15屆新人王網站設計大賽 http://2016.netking.tw
3.2015-第14屆新人王網站設計大賽 http://2015.netking.tw
4.2014-第13屆新人王網站設計大賽 http://2014.netking.tw 發掘台灣新亮點
5.2013-第12屆新人王網站設計大賽 http://2013.netking.tw 台灣讚起來，讓全世界看見（行銷台灣）
6.2012-第11屆新人王網站設計大賽 http://2012.netking.tw 戀戀故鄉，點亮台灣
7.2011-第10屆新人王網站設計大賽 http://2011.netking.tw 建國一百，幸福台灣
8.2010-第9屆新人王網站設計大賽 http://2010.netking.tw 發掘台灣的故事
[hr]


請設計自己有興趣的主題或與台灣有關的主題
如：景點，小吃，行業，廟宇，風俗，文化，故事....等。

2. 期末範例

上課期末作業範例線上瀏覽
[講義] RWD多頁網頁編輯 (一) skin / navigation / Menu / video
2.[講義] RWD多頁網頁編輯 (二) 圖片列表頁 / 文章頁
3.[講義] RWD多頁網頁編輯 (三) 介紹頁面《關於我們》/ 頂圖微動畫設定
4.[講義] RWD多頁網頁編輯 (四) 相簿設定 / 聯絡我們
5.[講義] Google Fonts 網路中文字型應用

所有網站內容須為原創
包含文字、照片及插圖
若為他人之文字或圖片請務必取得授權並註明來源
[color=#CC0066]＊未依照要求，期末作業不及格＊[/color]

4. 進度規劃

第十一週11/20　RWD網頁實作 navigation/dropdown/sub-menu/video
第十二週12/27　RWD網頁實作/列表頁/內容頁/
第十三週12/04　RWD首頁-Slider輪播與animation微動畫/Google Fonts網路中文字型應用
第十四週12/11　RWD-相簿設定【繳交企劃大綱】
第十五週12/18　RWD多頁網站製作/案例分析/問題討論
第十六週01/25　期末作業/RWD多頁專題網站製作-繳交、報告與檢討
第十七週01/01　1/1(三)開國紀念日放假
第十八週01/08　期末考週-期末檢討-分數確認
[hr]

5. 企劃大綱

請於第十四週12/11前回覆
企劃大綱的內容製作

1.網站主題：
2.內容大綱(導覽列/中文/檔名)：
3.主要對象(分析)：
5.網頁架構圖(樹狀圖)：
6.色彩規劃(色調）：
7.組員名單(學號）
8.資料分析

[hr]

6. 說明

盡可能地將本學期學習的技術應用於其中
仍須以視覺美感為主，設計頁數請盡量至少以十頁以上為主
設計上若有困難，請找老師討論

每週上課確實依照進度製作，期末即可完成期末作業

[color=#CC0066]第十六週上課前製作完成，課堂報告評分
＊期末若未出席及繳交作業，期末成績以零分計算＊[/color]

將資料夾命名為 final-學號(組長)，以ＦＴＰ上傳至final資料夾
作業網址為
A班：http://file.mepopedia.com/~css108a/final/final-1075445XXX
B班：http://file.mepopedia.com/~css108b/final/final-1075445XXX

[hr]

7. 製作完成後回覆項目

製作完成後，請在企劃內容前編輯加入以下內容：

1.作業網址：
A班：http://file.mepopedia.com/~css108a/final/final-1075445XXX
B班：http://file.mepopedia.com/~css108b/final/final-1075445XXX

2.網站主題：
3.內容描述：
4.風格設計：
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：
6.個人製作心得：

(請編輯於企劃之前)

[hr]

8. 評分標準

1.視覺美感、創意
2.內容技巧，是否有應用所學技巧
3.網頁架構（ＨＴＭＬ＋ＣＳＳ）網頁效能
4.網頁內容完整性、原創性
5.工作分配之項目

[hr]
上傳圖片可使用
http://imgur.com/

若寬度太寬，請使用以下語法，將圖片網址帶入：
<img width="100%" src="圖片網址" border="0"> [hr]

9. 網頁架構參考

[img]http://i.imgur.com/0j9UKzY.jpg?1[/img]

● 大溪-街角遇見博物館-公有館網頁架構圖


● 大溪-街角遇見博物館-街角館網頁架構圖

10. 上課影音

[講義] RWD多頁網頁編輯 (二) 網頁架構 / 列表頁 / 內容頁 /期末作業講解
https://youtu.be/K5Eol6qjXCE




(編輯記錄)

http://file.mepopedia.com/~css108b/final/final-1075445076

2.網站主題：Lamigo
3.內容描述：介紹職業棒球隊 Lamigo
4.風格設計：依照球團的視覺風格做設計
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：組員:1075445076莊傑宇
6.個人製作心得：感覺更上一層樓 學到的網頁都越來越有質感

1.網站主題：lamigo
2.內容大綱(導覽列/中文/檔名)：首頁.關於我.周邊.相簿.主場位置/桃猿隊/index
3.主要對象(分析)：職業棒球隊
5.網頁架構圖(樹狀圖)：
6.色彩規劃(色調）：藍
7.組員名單(學號）1075445076
8.資料分析



(編輯記錄)

1.作業網址：首頁影片有聲音，要小心音量。
http://file.mepopedia.com/~css108b/final/final-1075445068

2.網站主題：GOT7
3.內容描述：介紹偶像出道到現在的所有大事
4.風格設計：黑灰白配色
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：1075445068(自己製作)
6.個人製作心得：原來一個好的網頁要一個人完成是有點吃力的事，不過一個人做完有很大的成就感。



(編輯記錄)

B班：http://file.mepopedia.com/~css108b/final/final-1035445064

2.網站主題：韓國男星 李泰民
3.內容描述：專輯介紹 與個人簡介
4.風格設計：帥氣風格 深藍色
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：首頁 、個人簡介、專輯介紹、照片精選 、聯絡資訊
6.個人製作心得：
這學期學的很多有關網頁的製作課程，雖然這次製作過程失敗一次又重做，但是做完的成品很有成就感
雖然時間花的很多，不過做完真的很開心。

http://file.mepopedia.com/~css108b/final/final-1055443132

1.網站主題：陆游
2.內容大綱(導覽列/中文/檔名)：首頁、介绍、全台天气状况、时事新闻、大富翁
3.主要對象(分析)：来台大陆人
5.網頁架構圖(樹狀圖)：
介绍——摘要、陆客常去景点
全台天气状况——天气状况、海上强风特报、1周天气概况、温馨提示、空气品质
时事新闻——大陆、台湾
大富翁——LOGO、主视觉海报、棋盘 。。。。。。

6.色彩規劃(色調）：橙、黑 （暂定）
7.組員名單(學號）1055443132
8.資料分析



(編輯記錄)

1.作業網址：
B班：http://file.mepopedia.com/~css108b/final/final-1075445050

2.網站主題：哈利波特×怪獸與牠們的產地
3.內容描述：哈利波特×怪獸與牠們的產地 系列電影詳細介紹
4.風格設計：葛來分多的紅色
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：1075445050 吳金葉
6.個人製作心得：眼睛快脫窗




1.網站主題：哈利波特×怪獸與牠們的產地
2.內容大綱(導覽列/中文/檔名)：首頁 index / 最新消息 news / 電影介紹 movie / 霍格華茲 hogwarts / 奇獸 fantastic666 / 劇照欣賞 stills / 與我聯絡 contact / contact / 資料來源 data
3.主要對象(分析)：哈利波特×怪獸與牠們的產地 系列電影
5.網頁架構圖(樹狀圖)：https://imgur.com/spzMymd

6.色彩規劃(色調）：暗紅色為主 藍色為輔
7.組員名單(學號）：1075445050
8.資料分析



(編輯記錄)

http://file.mepopedia.com/~css108b/final/final-1075445086
1.網站主題：首里城
2.內容大綱(導覽列/中文/檔名)：ホーム(首頁)/index,首里城とは(關於首里城)/about,イベント(活動)/events,フォトギャラリー/photogallery,お問い合わせ(聯絡)/contact
3.主要對象(分析)：首里城歷史
5.網頁架構圖(樹狀圖)：
6.色彩規劃(色調）：橘色,紅色
7.組員名單(學號）1075445086
8.個人製作心得：最後遇到困難，一直找不到有一個顏色，問老師才知道有mycolour的css。然後在mycolour的css改好了我要的顏色。



(編輯記錄)

1.作業網址：
http://file.mepopedia.com/~css108b/final/final-1055440093

2.網站主題：台中遊
3.內容描述：台中的景點
4.風格設計：日系
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：一個人
6.個人製作心得：
能學會網頁設計診的很棒，雖然要花一點時間，但是可以把所有統整起來，省去了還要一項一項查其他資料，整理完有種舒暢感。


1.網站主題：台中遊

2.內容大綱(導覽列/中文/檔名)：首頁、建築、美食、文藝、文青市集、休閒

3.主要對象(分析)：想去台中玩的旅客們

5.網頁架構圖(樹狀圖)：

6.色彩規劃(色調）：黑灰白藍

7.組員名單(學號）1055440093

8.資料分析



(編輯記錄)

1.網址： http://file.mepopedia.com/~css108b/final/final-1055461035

2.網站主題：Rordia-遊戲新世界
3.內容描述：介紹遊戲 遊戲攻略 遊戲圖片(截圖)
4.風格設計：淡藍 淡紫 淡粉 色調
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：1055461035 彭煒淳
6.個人製作心得：


1.網站主題：介紹手遊
2.內容大綱(導覽列/中文/檔名)： 首頁(index-slider.html)/關於遊戲(about.html)/遊戲攻略(news-images.html)/相簿圖集(gallery-4.html)/暖四(contact.html)
3.主要對象(分析)： 奇蹟暖暖 介紹/詳解/攻略 介紹閃耀暖暖
5.網頁架構圖(樹狀圖)：
6.色彩規劃(色調）： 淡藍色調 淡粉
7.組員名單(學號） 1055461035
8.資料分析



(編輯記錄)

1.作業網址：
http://file.mepopedia.com/~css108b/final/final-1075445054

2.網站主題： 韓劇鬼怪
3.內容描述： 鬼怪介紹
4.風格設計： 咖啡色色調為主
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)： 1075445054許惟婷
6.個人製作心得： 好累



(編輯記錄)

1.網站主題：世界公正全球貿易公司 World fair global trading company
2.內容大綱(導覽列/中文/檔名)：公司介紹、成立由來、合作和經驗、公司的產品、聯絡我們。
3.主要對象(分析)：不同時代的文化，國際大事、跨世代領域、不同類型的設計，之後檢討過去和討論未來的設計。
5.網頁架構圖(樹狀圖)：

6.色彩規劃(色調）：未來和過去的顏色
7.組員名單(學號）1075445002
8.資料分析：



(編輯記錄)

B班：http://file.mepopedia.com/~css108b/final/final-1075445024

2.網站主題： 甜點介紹
3.內容描述： 首頁，關於甜點，甜點小機密，照片，聯絡我們
4.風格設計： 文青風
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)： 自行完成
6.個人製作心得： 個人認為自己沒有分配好時間，如果時間充足，也許自己就可以做得更好！

http://file.mepopedia.com/~css108b/final/final-1075445076

2.網站主題：Lamigo
3.內容描述：介紹職業棒球隊 Lamigo
4.風格設計：依照球團的視覺風格做設計
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：組員:1075445076莊傑宇
6.個人製作心得：感覺更上一層樓 學到的網頁都越來越有質感

1.網站主題：我最愛的英雄聯盟的英雄
2.內容大綱(導覽列/中文/檔名):歐拉夫 關於銳空 達瑞斯 聯絡我們 主要對象 (分析):英雄聯盟官方網站
5.網頁架構圖(樹狀圖):
6.色彩規劃(色調）：BLACK WHITE GREEN WHITE MONKEY DRAGON
7.組員名單(學號）1075445072
8.資料分析 英雄聯盟官方網站
http://file.mepopedia.com/~css108b/final/final-1075445072/

1.網站主題：aov
2.內容大綱(導覽列/中文/檔名)：腳色故事 腳色背景 腳色操作
3.主要對象(分析)：英雄
5.網頁架構圖(樹狀圖)：
6.色彩規劃(色調）：
7.組員名單(學號）1075445048
8.資料分析

http://file.mepopedia.com/~css108b/final/final-1075445048

1.網站主題：aov
2.內容大綱(導覽列/中文/檔名)：腳色故事 腳色背景 腳色操作
3.主要對象(分析)：遊戲角色
5.網頁架構圖(樹狀圖)：
6.色彩規劃(色調）：
7.組員名單(學號）1075445048
8.資料分析



(編輯記錄)

http://file.mepopedia.com/~css108b/final/final-1075445018
1.網站主題：女神異聞錄5
2.內容大綱(導覽列/中文/檔名)：首頁/index,女神異聞錄5/about,角色介紹/Characters,遊戲延伸/game 聯絡/contact
3.主要對象(分析) : 遊戲內容、角色、衍伸
5.網頁架構圖(樹狀圖)：
6.色彩規劃(色調）：黑、紅、黃、白
7.組員名單(學號）1075445018
8.心得感想:主要是主題想了很久，而且還要有這麼多內容，把以前和現在學的東西都用上，做完覺得很有成就感，這學期也學到了很多東西。



(編輯記錄)

http://file.mepopedia.com/~css108b/final/final-1075445048

2.網站主題：aov
3.內容描述：介紹遊戲
4.風格設計：電競視覺風格
5.組員名單 :1075445048
6.個人製作心得：更上一層樓 受益良多


3.主要對象(分析)：傳說對決
5.網頁架構圖(樹狀圖)：
6.色彩規劃(色調）：黑
7.組員名單(學號）1075445048
8.資料分析

http://file.mepopedia.com/~css108b/final/final-1075445080

2.網站主題：水瀬いのり
3.內容描述：介紹水瀬いのり
4.風格設計：依照聲優個人特色做設計
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：組員:1075445080陳俊宏
6.個人製作心得：感覺學到很多
1.網站主題：水瀬いのり
2.內容大綱(導覽列/中文/檔名)：首頁/關於我/文章列表/相簿/與我聯絡
3.主要對象(分析)：日本聲優
5.網頁架構圖(樹狀圖)：
6.色彩規劃(色調）：藍
7.組員名單(學號）1075445080
8.資料分析

網址 : http://file.mepopedia.com/~css108b/final/final-1075445066

1.網站主題 ：Don't starve together
2.內容大綱(導覽列/中文/檔名)：首頁/index、DST/DST、角色介紹/角色介紹、活動介紹/活動介紹、遊戲相片/gallery、與我聯絡/contact
3.主要對象(分析) : 遊戲內容、遊戲活動、角色
5.網頁架構圖(樹狀圖)：
6.色彩規劃(色調）：綠、藍、黃、白
7.組員名單(學號）1075445066
8.心得感想:有很多頁要做很擔心會亂掉，做完很有成就感，學會很多東西。

1.作業網址：
http://file.mepopedia.com/~css108b/final/final-1075445012
首頁音量要注意~

2.網站主題：UNIQ
3.內容描述：團體、專輯，演唱會介紹
4.風格設計：應援色(紫色)帶點藍色
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：1075445012 謝雅芸
6.個人製作心得：花了很久才完成，有些地方雖然還是不太熟悉，但是有比較熟練了

1.作業網址：
http://file.mepopedia.com/~css108b/final/final-1075445002

2.網站主題：世界公正全球貿易公司
3.內容描述：成立貿易公正平台
4.風格設計：普通風格
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：一個人製作
6.個人製作心得：原本是多頁製作，後來省時間無法做多頁。

1.作業網址：

B班：http://file.mepopedia.com/~css108b/final/final-1075445058

2.網站主題：作品集
3.內容描述：心動城的作品
4.風格設計：溫緩
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：1075445058 曾五美
6.個人製作心得：這次分頁蠻多頁的做起來需要更多時間去用，基本上大致都了解老師說明得很清楚讚~

B班：http://file.mepopedia.com/~css108b/final/final-1075445024

2.網站主題： 甜點介紹
3.內容描述： 首頁，關於甜點，甜點小機密，照片，聯絡我們
4.風格設計： 文青風
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)： 自行完成
6.個人製作心得： 個人認為自己沒有分配好時間，如果時間充足，也許自己就可以做得更好！