育將電腦工作室 - 線上書籍

網頁設計與雲端應用
=========

當您懂得HTML的語法，再也不用單打獨鬥自己開發網頁，網站上有很多免費的整套網站系統，可以下載，再修改成自己的網站即可。  
 Bootstrap免費樣板是我們的首選，它是目前最夯的響應式網站的框架，它會自動調整畫面來適應桌機、平板、手機。  
 Bootstrap免費樣板 + Github Pages + Sublime text3 + 臉書 + Google雲  
 讓我們可以用最少的成本，建立超高CP值的網站，來做行銷

一、google搜尋

1. bootstrap theme
2. bootstrap theme free
 
二、bootstrap免費樣板

1. <https://startbootstrap.com/>
2. 由上面網站我們可以得到更多有關bootstrap資源
3. 付費樣板：<https://wrapbootstrap.com/?ref=StartBootstrap>
4. 授權： Start Bootstrap上的所有免費模板和主題現在都是根據MIT許可而不是Apache 2.0進行授權的。
 
 麻省理工學院的許可證很簡單，它允許你做任何你想要的模板。
 
 簡而言之，使用MIT許可證，您可以使用Start Bootstrap中的任何模板或主題進行商業或私人用途，您可以根據需要分發和/或修改模板。
 
 Start Bootstrap中的每個模板都有一個自定義的CSS文件，有些還有一個自定義的JS文件，它在前幾行代碼中有一個註釋。
 
 Start Bootstrap的全部內容是保持開放源代碼，並保持模板和主題可以使用和擴展到廣泛的用戶。切換到麻省理工學院的許可證只是這個方向的另一個步驟。
5. 相關資源：<https://startbootstrap.com/bootstrap-resources/>
6. 免費樣板：<https://gridgum.com/themes/category/free/>
 
三、下載免費的bootstrap theme

1. 請挑選喜愛的樣板，至少2個
2. 一個放入 site
3. 一個請建立新的專案
 
四、頁面轉向

1. index.html 頁面轉向 ```
 <pre class="brush:as3;">
 
 <html>
 <head>
 <meta http-equiv="refresh" content="0;url=new-age/index.html" />
 </head>
 </html>
 ```
2. 當我們連至網站，打開index.html，會馬上轉至「/new-age/index.html」
 
五、使用JQUERY套件

1. 引入CSS
2. 引入JS(必須在jquery.js的後面)
3. 調用插件(關鍵在 class、id)
 
六、BACKSTRETCH 輪播插件 
 <http://www.jquery-backstretch.com/>

backstretch 一個簡單的jQuery插件，它允許你動態調整大小，幻燈片功能的背景圖像添加到任何頁面或元素( [MIT license](https://raw.github.com/srobbin/jquery-backstretch/master/LICENSE-MIT).)

1. 引入：注意(jquery.backstretch.min.js)檔案位置 ```
 <pre class="brush:as3;">
 <script src="js/backstretch/jquery.backstretch.min.js"></script>
 ```
2. 調用插件，指定的類別、ID 必須有寬度、高度 ```
 <pre class="brush:as3;">
 <script type="text/javascript">
 $(document).ready(function(){
 $('.top-content').backstretch([
 "img/3.jpg"
 , "img/2.jpg"
 , "img/1.jpg"
 ], {duration: 3000, fade: 750});
 });
 </script>
 ```
 
 範例：<https://www.ugm.com.tw/tncomu/backstretch.html>
 
</body></html>

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown