近年來，隨著社會產業結構與生活習慣改變，人們使用網路的頻率大幅增加，社群平台的發展也日新月異。許多工作比起以往的紙上作業，改由透過網路完成的比率隨之提升，時下許多人也經常藉由網路分工來完成工作。本人因自身興趣的緣故，不時會將閒暇時間投入在文藝創作當中，但我發現我們所處之創作環境，不僅遭遇到了創作者間連絡困難的問題，更缺乏了便於創作者們共同創作與交流的空間。由於面臨此類難題，而後不斷與創作夥伴們進行討論，隨即誕生了構築一個適用於文藝創作的作品集協作平台之想法－它不但能提供創作者們進行作品交流，也結合了響應式網頁設計，方便使用者們能夠通過任何設備對此協作平台進行操作，不僅如此，平台亦提供了作品集編輯流程：內含圖片上傳、圖片版本編排與列印等新穎之功能，利於創作者們共同作業，以打造出更多協同創作的好作品。

In recent years, with the social industry structure and living habits change, people use the network frequency increased significantly.The development of community platform is also changing.For the sake of interest,I will spend my leisure time in artistic creation.ButI found that our creative environment, not only encountered the difficulties between the creators of the problem, but also the lack of creators to facilitate the creation and exchange of environment.As a result of this problem, and then continue to discuss with the creative partners.Immediately,the idea of creating a collaborative platform for works of art and creativity - not only provides creators for work exchange, but also combines responsive web design to enable users to operate on this platform through any device.Not only that, the platform also provides a collection of works editing process: including picture upload, picture layout, print and other novel features, which will help creators to work together to create more collaborative works of good works.

目錄
第一章緒論 1
1.1研究動機 1
1.2技術架構 2
1.3論文架構 4
第二章相關研究與背景知識 5
2.1FBlogin API 5
2.2 網頁前端技術 5
2.2.1HTML 6
2.2.2CSS 6
2.2.3JavaScript 7
2.3 前端套件與RWD 8
2.4 AJAX 11
第三章實作內容 12
3.1 網頁架構 13
3.2 資料庫規劃 17
3.2.1FBlogin 21
3.2.2 MySQL 23
3.3 協作功能 24
3.4 分區管理面板 28
3.5 輸出版面控制 31
第四章實作成果 36
4.1 實作環境 36
4.2 系統實作 37
第五章結論與未來展望 52
5.1結論 52
5.2未來展望 53
參考文獻 54
附錄-英文論文 55
 
圖片目錄
圖1. 1技術架構圖 3
圖2. 1BootstrapRWD效果示意圖 9
圖3. 1系統建置流程圖 12
圖3. 2網頁架構圖 15
圖3. 3資料庫規劃示意圖 20
圖3. 4 FBlogin登入驗證流程圖 22
圖3. 5成員管理 27
圖3. 6合作區塊顯示處 27
圖3. 7篩選原理示意圖 29
圖3. 8輸出機制流程圖 32
圖3. 9最終效果圖 33
圖3. 10版面長寬與圖片長寬 34
圖3. 11兩點座標 35
圖4. 1實作未登入狀態示意圖 37
圖4. 2實作Facebook登入示意圖 38
圖4. 3首頁 38
圖4. 4作品進度選擇 39
圖4. 5新增作品集按鈕 40
圖4. 6新增作品集填寫表單 40
圖4. 7編輯作品集 41
圖4. 8刪除作品集 42
圖4. 9成員列表 42
圖4. 10列表分區 43
圖4. 11詳細按鈕 44
圖4. 12圖片項目新增頁面 44
圖4. 13新增項目 45
圖4. 14修改刪除項目 45
圖4. 15自創項目與跳轉頁面 46
圖4. 16合作者項目與跳轉頁面 46
圖4. 17圖片上傳 47
圖4. 18確認請求 48
圖4. 19版本更新樣貌 48
圖4. 20點擊列印 49
圖4. 21樣式選擇 49
圖4. 22項目列表 50
圖4. 23版本勾選 51
圖4. 24 PDF輸出 51

[1]G.T.Wang. (2014, March 23). Web Application Architectures[Web blog message].Retrieved from https://blog.gtwang.org/programming/web-application-architectures/
[2]Flanagan, David.(2011). JavaScript - The definitive guide 6. Washington, DC: Oreilly & Associates Inc.
[3]Mozilla and individual contributors. (2005-2017). Web technology for developers[Online forum comment].Retrievedfromhttps://developer.mozilla.org/en-US/docs/Web/CSS
[4]Big John Design©positioniseverything.net. (2004,May 1) Internet Explorer vs. the Standards, a primer on standards violations in Explorer [Web blog message]. Retrieved fromhttp://www.positioniseverything.net/ie-primer.html
[5]EthanMarcotte. (2010, May 25). Responsive Web Design [Web blog message]. Retrieved from https://alistapart.com/article/responsive-web-design
[6]Jesse James Garrett.(2005, February 18). Ajax: A New Approach to Web Applications [Web blog message]. Retrieved from https://web.archive.org/web/20141208001549/http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications/