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 3 time(s). Last edit at 12/10/2019 09:45PM by JinJin.
(編輯記錄)

1.網站主題: 咖啡廳
2.內容大綱(導覽列/中文/檔名):
3.主要對象(分析): 喜歡貓咪、咖啡廳的吸貓者
5.網頁架構圖(樹狀圖):
6.色彩規劃(色調): 沉穩色系
7.組員名單(學號) 1075445036、5037、5075
8.心得:有的網頁作好幾次了來是出不來(紅茶咖啡廳、食衣住行),甚至少好多東西,可是自己看就可以。
做的心很累,希望老師高抬貴手

http://file.mepopedia.com/~css108a/final/final-1075445036





Edited 5 time(s). Last edit at 01/12/2020 06:22PM by 1075445036朱儀瑄.
(編輯記錄)

1.網站主題:餵食包Feeding Bag
2.內容大綱(導覽列/中文/檔名):導覽列:1.美食介紹: (1)美食文章(2)優選部落客文章(3)美食攻略教學 2.美食DIY: (1)作法/食譜3.國際美食區: (1)亞洲區(2)歐洲區(3)美洲區 4.美食照片精選: (1)美食照(2)美食照片教學 5.與我聯絡: (1)聯絡我
3.主要對象(分析):給喜愛到處吃美食、不知道從哪裡找美食的群眾
5.網頁架構圖(樹狀圖):圖片網址:https://imgur.com/brbQN1U



6.色彩規劃(色調):暖色系:橘色
7.組員名單(學號):無分組

1.作業網址:
A班:http://file.mepopedia.com/~css108a/final/final-1075445045

2.網站主題:美食
3.內容描述:關於美食的介紹以及各地的美食。
4.風格設計:暖色調的橘色
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果):無
6.個人製作心得:花了好幾個星期製作,才製作完成。



Edited 2 time(s). Last edit at 12/18/2019 08:23AM by JinJin.
(編輯記錄)

Attachments:
開啟 | 下載 - 1075445045.jpg (1.85 MB)
1.網站主題:來自火星的歌手--華晨宇
2.內容大綱(導覽列/中文/檔名):首頁/關於花花/專輯/照片/聯絡方式
3.主要對象(分析):他的粉絲
5.網頁架構圖(樹狀圖):
6.色彩規劃(色調):主要以黑紅白色做搭配
7.組員名單(學號)無分組
8.資料分析

Attachments:
開啟 | 下載 - 網頁大綱-01.jpg (849.1 KB)
1.網站主題:My travel diary
2.內容大綱(導覽列/中文/檔名):旅遊介紹首頁 / 旅遊推薦 / 最愛的景點 / 紀錄 / 聯絡方式
3.主要對象(分析):喜歡旅行的人
5.網頁架構圖(樹狀圖):https://imgur.com/a/LanwClf
6.色彩規劃(色調):簡單的色調
7.組員名單(學號)無分組
8.資料分析:http://file.mepopedia.com/~css108a/final/final-1075445023
9.個人製作心得:能夠用自己拍的照片拿來做網頁覺得很棒



Edited 7 time(s). Last edit at 12/26/2019 05:29PM by 1075445023.
(編輯記錄)

1.網站主題:阿斯達年代記
2.內容大綱(導覽列/中文/檔名):首頁、劇情,陣容、聯絡我們
3.主要對象(分析):喜愛這個文化的人
5.網頁架構圖(樹狀圖):
6.色彩規劃(色調):黑 白
7.組員名單(學號):1075445005、1075445007,1075445015
8.資料分析http://file.mepopedia.com/~css108a/final/final-1075445005



Edited 2 time(s). Last edit at 01/08/2020 12:23AM by 陳鈺晴.
(編輯記錄)

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

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

1.網站主題:18歲的瞬間
2.內容大綱(導覽列/中文/檔名):首頁/演員介紹/THE MOMENT/劇照/拍攝地點
3.主要對象(分析)劇迷
5.網頁架構圖(樹狀圖):
6.色彩規劃(色調): 粉藍白
7.組員名單(學號) 1075445073
8.心得:花好多時間,心很累哈哈
http://file.mepopedia.com/~css108a/final/final-1075445073