臺灣博碩士論文加值系統

隨著時代的進步與科技的發達，資訊的傳遞與整合應用已是現代生活中不可獲缺的一部份。以往 「透過網路可以快速地取得資訊」這種運作模式已無法滿足人類的需求，「雲端運算」乃應運而生衍生出來的概念。本論文研究『瀏覽器無須外掛程式即可進行線上繪圖』這項雲端運算技術，以雲端運算概念為出發點，利用網頁設計JavaScript為技術核心，不需透過任何應用軟體(如Microwoft Word、Adobe Dreamweaver等…)，且不需於瀏覽器中加載或鑲嵌任何外來元件與模組(如Adobe Flash、Microsoft Silverlight或ActiveX等…)即可進行跨瀏覽器與跨平台的線上視覺化框架佈局設計。使用者利用網路即可完成過去需藉助多種軟體方能完成的工作，也就是整合資訊處理之多種軟體功能於單一網路使用介面。

With the progress of the times and technological advancement, information transmission and integration of applications is an indispensable part of modern life.
The thought of "over the network people can quickly obtain the information they need", is no longer satisfactory. People want to not only get information over the network, but also to process and integrate information to get solutions at faster speed and lower cost. Scholars and the computing industry are making efforts toward such needs. And the concept of "cloud computing" is formed in order to achieve this goal.
This thesis is a research on the technology of cloud computing that is "capable of making drawing with browser, and without any extra component". The research is based on the concept of cloud computing and the use of the JavaScript as well as the Ajax as development core. The main focus is on the creation of a visualized online framing system which helps users do their frame works without the need to install any software (ex. Microsoft Word, Adobe Dreamweaver and so on…) and to attach any extra components (ex. Adobe Flash, Microsoft Silverlight, ActiveX and so on…) to their browser. Just only with the browser users can do their works which can only be done with multiple software in the past. And this is an integration of multiple functions in a single web interface.

目錄
中文摘要 i
Abstract ii
目錄 iii
表目錄 vii
圖目錄 viii
第一章 緒論 1
1.1 研究背景 1
1.2 研究動機 2
1.3 研究範圍與限制 3
1.4 研究目的 10
1.5 論文架構 10
第二章 文獻探討 13
2.1 雲端技術 13
2.2 超文件標示語言 14
2.3 文件物件模型 15
2.4 層疊樣式表 16
2.5 JavaScript 18
第三章 系統設計與架構 19
3.1 介面設計與平台選擇 19
3.2 基礎頁面架構 19
3.3 資源引用說明 20
3.3.1 JavaScript引用 20
3.3.2 CSS引用 22
3.3.3 JavaScript動態控制法 26
3.3.4 結語 26
3.4 設計模式說明 27
3.4.1 程序導向設計模式 27
3.4.2 物件導向設計模式 28
3.4.3 結語 28
3.5 網頁框架說明 29
3.5.1 frame標籤簡介 29
3.5.2 table標籤簡介 29
3.5.3 div標籤簡介 30
3.5.4 iFrame標籤簡介 30
3.6 結語 31
第四章 系統實作 33
4.1 實作目標設定 33
4.2 物件產生與嵌入方式 33
4.2.1 以document.createElement方式產生HTML物件 34
4.2.2 以嵌入字串方式產生HTML物件 34
4.2.3 結語 35
4.3 系統物件設計 35
4.3.1 物件顆粒設定 36
4.3.2 線條(Line) 類別設計 36
4.3.3 容器(Box)類別設計 39
4.4 實驗成果展示 42
4.4.1 框架外圍繪製展示 42
4.4.2 分割線繪製展示 46
4.4.3 複雜(非對稱)表格繪製展示 51
4.4.4 文字輸入效果展示 54
4.4.5 實際應用案例 57
4.5 內容管理系統簡介 58
4.5.1 CMS 操作流程 58
4.5.2 CMS操作功能簡介 60
4.5.3 結語 75
第五章 結論 77
5.1 研究成果 77
5.2 缺失與檢討 77
參考文獻 79


表目錄
表1.1創作者、發表日期、版本、公司、軟體執照比較表 4
表1.2作業系統支援比較表 5
表1.3瀏覽器附加服務比較表 6
表1.4網頁技術支援比較表 7
表1.5通訊協定支援比較表 8
表1.6圖像格式支援比較表 9

圖目錄
圖4.2框架外圍繪製程式碼 43
圖4.3 以IE瀏覽器進行框架外圍繪製 44
圖4.4 以Firefox瀏覽器進行框架外圍繪製 44
圖4.5 以Chrome瀏覽器進行框架外圍繪製 45
圖4.6 以Safari瀏覽器進行框架外圍繪製 45
圖4.7 以Opera瀏覽器進行框架外圍繪製 46
圖4.8分割線繪製程式碼 48
圖4.9 以IE瀏覽器進行分割線繪製 49
圖4.10 以FireFox瀏覽器進行分割線繪製 49
圖4.11 以FireFox瀏覽器進行分割線繪製 50
圖4.12 以Safari瀏覽器進行分割線繪製 50
圖4.13 以Opera瀏覽器進行分割線繪製 51
圖4.14 以IE瀏覽器進行複雜(非對乘)表格繪製 52
圖4.15 以FireFox瀏覽器進行複雜(非對乘)表格繪製 52
圖4.16 以Chrome瀏覽器進行複雜(非對乘)表格繪製 53
圖4.17 以Safari瀏覽器進行複雜(非對乘)表格繪製 53
圖4.18 以Opera瀏覽器進行複雜(非對乘)表格繪製 54
圖4.19 以IE瀏覽器進行文字輸入 55
圖4.20 以FireFox瀏覽器進行文字輸入 55
圖4.21 以Chrome瀏覽器進行文字輸入 56
圖4.22 以Safari瀏覽器進行文字輸入 56
圖4.23 以Opera瀏覽器進行文字輸入 57
圖4.24 CMS 操作流程圖 59
圖 4.25 CMS 內容管理 – 媒體列表 61
圖 4.26 CMS 內容管理 – 媒體新增 62
圖4.27腳本管理 – 腳本列表 63
圖4.28腳本管理 – 腳本新增 64
圖4.29腳本管理 – 腳本修改 65
圖4.30腳本管理 – 腳本預覽 66
圖4.31框架管理 – 框架列表 67
圖4.32框架管理 – 框架繪製 68
圖4.33排程管理 – 排程列表 70
圖4.34排程管理 – 排程新增 71
圖4.35排程管理 – 腳本選擇 72
圖4.36排程管理 – 排程修改 73
圖4.37排程管理 – 排程預覽 74

[1]J.W. Rittinghouse, J.F. Ransome, Taylor & Francis. Cloud Computing: Implementation, Management, and Security. Taylor & Francis Group , London, Aug.2009.
[2]B. Sosinsky. Cloud Computing Bible. Wiley Publishing, Inc, IN, January .2011.
[3]H. Refnes, S. Refnes, K.J. Refnes & J.E. Refnes. Learn HTML and CSS with w3schools. Wiley Publishing, Inc, IN, June.2010.
[4]R. Nixon. Learning PHP, MySQL, JavaScript, and CSS. Oreilly & Associates Inc, September.2012.
[5]J. Keith. DOM Scripting Web Design with JavaScript and the Document Object Model. Apress, 2005.
[6]楊東昱，HTML5 CSS3 精緻範例辭典，旗標，2012年7月。
[7]H. Christian, Beginning JavaScript with DOM Scripting and Ajax : From Novice to Professional. Springer-Verlag New York Inc, July 2006.
[8]R. Nixon. Web Developer’s Cookbook: More Than 300 Ready-made Php, Javascript, and Css Recipes. McGraw-Hill Osborne Media, March.2012.
[9]G. Rauch. Smashing Node.JS: Javascript Everywhere. John Wiley & Sons Inc, September.2012.
[10]A. Maccaw. JavaScript Web Applications. Oreilly & Associates Inc, Auguest.2011.
[11]B. Brinzarea-iamandi, C. Darie & A. Hendrix. AJAX and PHP: Building Modern Web Applications : Build User-Friendly Web 2.0 Applications with JavaScript and PHP. Lightning Source Inc, December.2009.
[12]J. Eichorn, Understanding Ajax: Using Javascript to Create Rich Internet Applications. Prentice Hall Ptr, August.2008.
[13]N.C. Zakas, J. Mcpeak & J.Fawcett, Professional Ajax. John Wiley & Sons Inc, March.2007.
[14]陸凌牛，王者歸來：HTML 5與CSS 3權威指南，佳魁資訊，2011年11月29日。
[15]I. Devlin，HTML 5多媒體開發與設計極速上手，上奇資訊，2012年8月28日。
[16]陳惠貞，網頁程式設計--HTML、JavaScript、CSS、XHTML、Ajax，碁峰，2010年01月15日。
[17]陳會安，從HTML5/CSS3/JavaScript 到 jQuery/PhoneGap Android 程式設計，旗標，2012年06月04日。
[18]陳會安，JavaScript與jQuery網頁設計範例教本，碁峰，2012年04月12日。
[19]S. Stefanov, JavaScript 設計模式，歐萊禮，2012年03月20號。
[20]朱印宏，王者歸來：征服JavaScript，佳魁資訊，2012年01月17日。
[21]張亞飛，JavaScript權威指南：ECMAScript5 + HTML5 DOM + HTML5 BOM 範例精粹，上奇資訊，2011年07月29日。