臺灣博碩士論文加值系統

中文摘要
企業的官方網站，一般是由企業組織自行建立管理的對外網站，通常以訊息及服務提供為主。官方網站為公司品牌形象的第一站，代表著公司的門面，企業會透過官方網站傳達最即時的訊息。利用網路無遠弗屆的優勢，更能夠達到業務人員難以觸及的地區進行品牌的推廣。
威勁國際股份有限公司在建構舊的官方網站時，使用許多Flash的技術進行編寫。但在未來趨勢中，Flash技術將逐漸被淘汰，因以Flash所建構的網站不僅無法顯示在行動裝置及手機上，且網站內容不易維護。更重要的是使用Flash技術所建構的網站，在進行SEO(Search Engine Optimization，簡稱SEO，搜尋引擎最佳化)時所獲得的效果很差，因此搜尋排名難以提升。
在本研究中，將針對未來企業網站形象推廣之新趨勢，研究導入新網頁技術，重新設計新的企業形象網，並增加多國語言頁面設計，及會員管理，提高對客戶的服務，增加企業在未來網路世界的競爭力。
本研究的主要目的有二個：
(1) 利用較新的HTML5技術搭配Bootstrap 3建構威勁國際股份有限公司的新網頁，將網頁進行優化及更遙遠的佈局，以便未來的維護及修改更加容易。
(2) 威勁國際股份有限公司的新官方網站將會進行RWD設計(響應式網頁設計)，網站將隨著不同的裝置平臺及跟著不同的佈局進行排版與顯示，以提供最佳的視覺體驗。透過RWD設計所建置的新官方網站，將有利於提高SEO執行的效果。

關鍵詞：官方網站、HTML5、Bootstrap 3、RWD設計(響應式網頁設計)。

Abstract
The official website of the enterprise is generally set up by the enterprise organizations to manage their own external sites, usually based on information and service delivery. The official website is the company brand image, the most immediate message of the enterprise is communicated through the official website. The advantages of the network are utilized so that sales can carry out branding in hard-to-reach areas.
Many Flash technologies had been used to build the old official website of Nicelink International Co., Ltd. However, in the future trend, the old official website can not be displayed on mobile devices and mobile phones, and the site content is not easy to maintain, so Flash technology will gradually be eliminated. More importantly, the website built by Flash technology that the SEO (Search Engine Optimization) result is poor, then the search ranking is difficult to upgrade.
In this study, the new trend of corporate website image promotion will be focused, the new web technology will be imported and the new corporate image network will be redesigned so that the company's competitiveness in the future web world can be increased.
(1) The HTML5 technology and Bootstrap 3 are used to built the website of Nicelink International Co., Ltd.; therefore, the web page will be optimized and more distant layout, then the web page can easier to maintain and modify in the future.
(2) The new website of Nicelink International Co., Ltd. is built by the technology of RWD, and then the content of new website will be displayed along with the different device platforms to provide the best possible visual experience. Using the new official website was built by RWD, the effecience of SEO will be improved.

Keywords: Official Website, HTML5, Bootstrap 3, Responsive Web Design (RWD)

目錄
中文摘要 I
Abstract III
謝誌 V
目錄 VI
圖目錄 VIII
表目錄 XIV
第 1 章 緒論 1
1.1研究背景 1
1.2研究動機 2
1.3研究目的 3
1.4論文之架構 4
第 2 章 文獻探討 6
2.1威勁國際股份有限公司現況說明 6
2.2 威勁國際股份有限公司目前網站的架構與內容 8
第 3 章 威勁國際股份有限公司官網設計 42
3.1 威勁國際股份有限公司新官網架構設計 42
3.2 威勁國際股份有限公司新官網資料關係設計 45
3.3 威勁國際股份有限公司新官網資料設計 46
第 4 章 威勁國際股份有限公司官網具體成果 60
4.1 威勁國際股份有限公網站之前端功能 60
4.2威勁國際股份有限公司網站之後端功能 72
第 5 章 結論 102
5.1 成果檢討與建議 102
5.2 未來研究 103
參考文獻 104

圖目錄
圖1、前端架構 8
圖2、後端架構 9
圖3、威勁官網首頁最新消息及焦點商品 9
圖4、關於威勁-公司簡介頁面 10
圖5、關於威勁-經營理念頁面 11
圖6、關於威勁-公司位置頁面 11
圖7、關於威勁-公司徵才頁面 12
圖8、最新消息頁面 12
圖9、產品資訊總覽頁面 13
圖10、產品詳細資訊頁面 14
圖11、技術支援-檔案下載頁面 15
圖12、技術支援-Ｑ＆Ａ頁面 15
圖13、客戶服務-經銷據點頁面 16
圖14、客戶服務-全省服務頁面 17
圖15、網站總覽頁面 18
圖16、後端登入頁面 19
圖17、後台首頁頁面 19
圖18、最新消息管理頁面 20
圖19、最新消息檢修頁面 21
圖20、線上問答集管理頁面 22
圖21、線上問答集檢修頁面 22
圖22、產品分類管理頁面 23
圖23、產品大類別檢修畫面 24
圖24、產品大類別細分類管理頁面 24
圖25、產品細類別檢修頁面 25
圖26、各項產品管理頁面 26
圖27、各項產品檢修頁面 27
圖28、驅動程式下載管理頁面 28
圖29、驅動程式下載新增頁面 29
圖30、管理者帳號密碼修改頁面 30
圖31、後台操作人員帳號權限管理頁面 30
圖32、後台操作人員帳號權限管理-帳號密碼修改頁面 31
圖33、後台操作人員帳號權限管理-修改權限頁面 32
圖34、傳統網頁與RWD 網頁設計示意圖 33
圖35、舊官網PC 電腦畫面 36
圖36、舊官網平板電腦畫面 37
圖37、舊官網智慧型手機畫面 38
圖38、新官網PC 電腦畫面 39
圖39、新官網平板電腦畫面 40
圖40、新官網智慧型手機畫面 41
圖41、新官網前端架構 43
圖42、新官網後端架構 44
圖43、威勁國際股份有限公司新官網資料關係圖 46
圖44、首頁頁面 61
圖45、多語系呈現畫面 62
圖46、頁面上方分類表示圖 62
圖47、關於威勁頁面 63
圖48、關於威勁左側 64
圖49、最新消息頁面 65
圖50、產品資訊頁面 65
圖51、產品詳細資訊頁面 66
圖52、支援服務管理頁面 66
圖53、支援服務管理頁面 67
圖54、會員登入頁面 67
圖55、註冊會員頁面 68
圖56、加入會員頁面 69
圖57、會員資料修改頁面 70
圖58、產品保固登入頁面 71
圖59、會員保固紀錄頁面 72
圖60、會員保固記錄檢修頁面 72
圖61、會員登入頁面 73
圖62、會員登入確認框 73
圖63、後台左側 74
圖64、首頁管理頁面 75
圖65、首頁管理新增頁面 76
圖66、關於威勁管理頁面 77
圖67、關於威勁新增頁面 77
圖68、關於威勁頁面檢修頁面 78
圖69、關於威勁資料刪除頁面 78
圖70、最新消息管理頁面 79
圖71、最新消息新增頁面 80
圖72、最新消息檢修頁面 80
圖73、最新消息刪除資料頁面 81
圖74、各項產品管理頁面 82
圖75、各項產品新增頁面 82
圖76、各項產品檢修頁面 83
圖77、各項產品刪除資料頁面 84
圖78、產品分類管理頁面 85
圖79、新增大項產品分類頁面 85
圖80、新增中項分類頁面 86
圖81、新增小項產品分類頁面 86
圖82、檢修大項產品分類頁面 87
圖83、檢修中項產品分類頁面 87
圖84、檢修小項產品分類頁面 88
圖85、產品分類刪除資料頁面 88
圖86、產品線上問答集管理頁面 89
圖87、線上問答集新增頁面 90
圖88、線上問題檢修頁面 91
圖89、線上問答集資料刪除頁面 91
圖90、技術支援管理頁面 92
圖91、新增上傳檔案管理頁面 93
圖92、軟體下載檢修頁面 93
圖93、技術支援管理刪除資料頁面 94
圖94、會員產品註冊管理頁面 95
圖95、會員產品註冊檢修頁面 96
圖96、產品註冊資料刪除頁面 96
圖97、會員產品保固檢修頁面 97
圖98、管理員電子信箱管理頁面 97
圖99、管理員電子信箱頁面 98
圖100、待審核會員管理頁面 99
圖101、待審核會員帳號管理頁面 100
圖102、正式會員管理頁面 101
圖103、刪除帳號頁面 101

表目錄
表1、首頁資料表 47
表2、產品保固資訊資料表 48
表3、會員產品保固資訊資料表 49
表4、會員註冊資料表 50
表5、後台管理員資料表 51
表6、最新消息資料表 52
表7、關於威勁資料表 53
表8、技術支援資料表 54
表9、線上問答集資料表 55
表10、大項產品類別資料表 56
表11、中項產品類別資料表 57
表12、小項產品類別資料表 57
表13、產品資訊資料表 59

參考文獻
[1]J. Bryant and M. Jones, Responsive Web Design, Pro HTML5 Performance, pp. 37-49, Springer, 2012.
[2]什麼是回應式網頁設計RWD，http://www.ibest.com.tw/service/html5.php，擷取日期2016年4月9日。
[3]威勁國際股份有限公司，http://www.nicelink.com.tw/，威勁國際股份有限公司，擷取日期2016年4月9日。
[4]為什麼你應該選擇自適應網站(Responsive Web Design) --優缺分析，http://www.ibest.com.tw/service/responsive_why.php, 擷取日期2016年4月9日。
[5]經濟部商業司─公司資料查詢，https://gcis.nat.gov.tw/pub/cmpy/cmpyInfoAction.do?method=detail&banNo=28130829，擷取日期2016年4月9日。
[6]RWD自適應網站優缺點分析，http://www.injerry.com/blog-view.php?PID=4&sn=11，擷取日期2016年4月9日。