Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

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

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

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


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 發掘台灣的故事




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

2. 期末範例


上課期末作業範例線上瀏覽
http://mepopedia.com/~jinjin/web/final/

上課期末範例下載


3. 參考講義


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

所有網站內容須為原創
包含文字、照片及插圖
若為他人之文字或圖片請務必取得授權並註明來源

*未依照要求,期末作業不及格*

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 期末考週-期末檢討-分數確認


5. 企劃大綱


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

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



6. 說明


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

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

第十六週上課前製作完成,課堂報告評分
*期末若未出席及繳交作業,期末成績以零分計算*


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



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.個人製作心得:

(請編輯於企劃之前)



8. 評分標準


1.視覺美感、創意
2.內容技巧,是否有應用所學技巧
3.網頁架構(HTML+CSS)網頁效能
4.網頁內容完整性、原創性
5.工作分配之項目



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

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

9. 網頁架構參考




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

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


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


10. 上課影音


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




Edited 2 time(s). Last edit at 12/10/2019 09:46PM by JinJin.
(編輯記錄)

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.資料分析



Edited 2 time(s). Last edit at 12/25/2019 11:26AM by JinJin.
(編輯記錄)

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

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



Edited 5 time(s). Last edit at 01/05/2020 02:27AM by 1075445068.
(編輯記錄)

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.資料分析



Edited 1 time(s). Last edit at 01/07/2020 09:21PM by 黃喬永.
(編輯記錄)

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.資料分析



Edited 4 time(s). Last edit at 12/25/2019 01:28AM by 1075445050.
(編輯記錄)

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改好了我要的顏色。



Edited 4 time(s). Last edit at 01/07/2020 11:02PM by 1075445086.
(編輯記錄)

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

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


1.網站主題:台中遊

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

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

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



6.色彩規劃(色調):黑灰白藍

7.組員名單(學號)1055440093

8.資料分析



Edited 6 time(s). Last edit at 01/08/2020 05:57AM by 1055440093.
(編輯記錄)

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.資料分析



Edited 2 time(s). Last edit at 12/26/2019 04:25PM by 1055461035.
(編輯記錄)

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

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



Edited 4 time(s). Last edit at 12/25/2019 02:17AM by 1075445054.
(編輯記錄)

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

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



Edited 4 time(s). Last edit at 12/18/2019 10:27AM by 1075445002-1.
(編輯記錄)

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.資料分析



Edited 1 time(s). Last edit at 12/25/2019 10:31AM by 1075445048.
(編輯記錄)

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



Edited 1 time(s). Last edit at 01/07/2020 11:19PM by 1075445018.
(編輯記錄)

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.個人製作心得:這次分頁蠻多頁的做起來需要更多時間去用,基本上大致都了解老師說明得很清楚讚~

1075445024

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

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