SharePoint Responsive 網頁設計

隨著智慧型手機、平板等行動裝置興起。要如何讓一個網頁的排版能夠正常顯示在不同大小的螢幕上成為一個重要的問題。如果要為每一個網頁都做一次程式客製化，既不容易維護，也非常消耗成本。我們可以運用Responsive Web Design達到只需寫一次程式碼，就能夠適應不同的裝置大小。使用SharePoint平台來做為網站，再利用Bootstrap來實作Responsive Web Design的效果。 SharePoint 是在企業經常使用的軟體中一套微軟產品，是一套為了企業內部溝通或是外部溝通而開發出來的協作平台，其利用網頁的形式讓使用者可從任何裝置使用。SharePoint有許多功能，而最常被使用的是用來製作網頁。它可以像用Word一般來編輯頁面、可以設定檢視或編輯權限、可設計工作流程，且不需要寫程式。 Responsive Web Design 中很常見的一項功能是當一個網頁在不同的解析度下，會呈現不同的介面，也就是在不同的介面上適應。 Bootstrap是一組用於製作網站及網路應用程式的工具，裡面包含有HTML、CSS及JavaScript的框架，提供字體排印、表單、按鈕、導航及其他各種元件。對於同時要供不同上網裝置及瀏覽器，如一般電腦、手機及平板電腦等瀏覽的網站及網路應用程式，Bootstrap提供了CSS媒體查詢（Media Query），節省網站製作者分別製作不同版本的時間及不便。

關鍵字

Responsive ； Responsive Web Design ； SharePoint Responsive Web Desig ； SharePoint

並列摘要

As various hand held devices such as mobile phones and tablets become more and more popular, how to design a web page that can be displayed properly on the screens of all devices becomes a very important question. If we were to design the same web page for each possible device, then the maintenance afterwards will become very troublesome and will cost a lot of money. By using Responsive Web Design, we can design a web page once and have it displayed properly on various devices. In this study, we will experiment how to deliver Responsive Web Design web pages on SharePoint platform using Bootstrap. SharePoint Server is one of Microsoft’s product that we can ever encounter in enterprises. It is a product that can be used as a collaboration platform to promote internal or external communication of an enterprise. By using the web pages that SharePoint provides, users can communicate with any device that they have. Among the numerous functions that SharePoint provide, one of which is to let user edit a web page just like the way we usually type our Word document, and can easily configure different ways to view it and set permissions for it. Users can also design workflows on SharePoint without writing a single line of code. One frequently mentioned of Responsive Web Design is when displaying a web page using different screen resolution, the web page will adapt to the screen resolution and modify its content of display. Bootstrap is a set of tools that can be applied on web sites and web applications. It content includes frameworks for HTML, CSS and JavaScript, providing various effects on typesetting, controls used on web pages and navigations of web pages. For web sites and web applications that need to provide service to various devices and their browsers, Bootstrap provides CSS media query that can save web designers a huge amount of time and work since they will no longer to have a version for each of their client devices.