網頁設計好好玩(下)

2. 第二週

一、編輯器

本次課程使用的預設編輯器為NotePad++（http://notepad-plus-plus.org/ ）或用Sublime Text(http://www.sublimetext.com/ )更好。這兩套都是執行快速，功能強大的免費軟體，而且都具有中文界面。當然您也可以使用自己熟悉的編輯軟體來操作。

設定中文：「Settings/General/Localization」=> 中文繁體
設定開啟檔案類型：「自訂/使用者自訂/副檔名連結設定」=> 可加入.php,ini,sql,css,conf,js等附檔名
下載檔案：https://notepad-plus-plus.org/repository/6.x/6.8.8/npp.6.8.8.bin.zip

二、FileZilla檔案傳輸軟體

FTP用來把檔案傳到主機
建議善用站台管理員，把常用的連線加入（此外，建議把樹狀目錄關閉）。
下載檔案 FileZilla 3.9.0.5 可攜版
主機位址：st.webugm.com
使用者名稱：xxxx@st.webugm.com
密碼： xxxx

三、設定自動轉址

如果想要使用自己的空間，則可以設定自動轉址
在 HTML 網頁的 </head> 前加入以下 HMTL 碼，網頁就會自動轉址。
其中 content=... 中的 0 是指 0 秒後自動重新整理，並轉址到 "http://tw.yahoo.com" 這個 URL。
請將下列語法加入 index.html 中
```
<meta http-equiv="refresh" content="0;url=http://tw.yahoo.com" />
```
byet免費虛擬主機申請
Hosting 免費虛擬主機申請

網頁設計好好玩(下)

3. 第三週

設計出每頁共同區塊，導航、輪播圖、頁尾

網頁設計好好玩(下)

3-1 bootstrap 介紹

網頁開發框架「BOOTSTRAP3」
Bootstrap 3 中文手冊
Bootstrap 3 下載
下載後解壓縮，即可使用。

空白的網頁架構
用文字編輯器(sublime、notepad++)
將下列範本存為index.html

<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 基礎範本 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js 讓 IE8 支援 HTML5 元素與媒體查詢 -->
    <!-- 警告：Respond.js 無法在 file:// 協定下運作 -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- jQuery (Bootstrap 所有外掛均需要使用) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- 依需要參考已編譯外掛版本（如下），或各自獨立的外掛版本 -->
    <script src="js/bootstrap.min.js"></script>

  </head>
  <body>
    <h1>哈囉, 世界!</h1>
  </body>
</html>

容器
.container 用於自適應且固定寬度的容器。
```
<div class="container">
  ...
</div>
```
.container-fluid 用於 100% 寬度的容器，橫跨可視區域的全部寬度。
```
<div class="container-fluid">
  ...
</div>
```

列、欄、格

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

網頁設計好好玩(下)

3-2 網頁組成

網頁組成

HTML

HTML 的全名為：HyperText Markup Language (超文本標記語言)
非程式，只是一種寬鬆的標籤語法，寫錯也不會怎樣，為網頁的最基礎。
HTML的檔案為純文字檔，副檔名為.html，瀏覽器即可讀取HTML檔。
HTML5於2014年發布正式版
廣義論及HTML5時，實際指的是HTML、CSS和JavaScript在內的技術組合
各瀏覽器HTML5支援：http://www.findmebyip.com/litmus/ 或 http://html5test.com
HTML標籤通常是一對的，如：<p>內容</p>或<div>文字</div>
HTML標籤也有單一的，如：<img src=”a.jpg”>
標籤裡有屬性，例如：<a href=”a.html”>連結</a>，其中href即為屬性。
HTML標籤及屬性是不分大小寫的：<IMG>和<img>一樣，但建議採用小寫。
HTML的元素分為：
block level元素：p div table dl ul ol form h1~h6 hr pre ....
inline元素：a span strong
inline-block元素：button img input select
英文手冊：http://www.w3schools.com/html/html5_intro.asp
中文手冊：http://www.w3school.com.cn/tags/index.asp

CSS

CSS 的全名為：Cascading Style Sheets (層級樣式表)
CSS 是用來撰寫 / 管理網頁的外觀

JavaScript

JavaScript 是用於客戶端的腳本語言，通常給 HTML 網頁增加動態效果
直譯式程式語言

HTML , CSS 與 JavaScript 的關係

HTML 架構
CSS 外觀
JavaScript 動作

網頁設計好好玩(下)

4. 第四週版型設計

網頁設計好好玩(下)

4-1 第四週 - 網站導航

參考網站：https://kkbruce.tw/bs3/Components#navbar
示範網站：https://www.ugm.com.tw/tncomu/nav.html

加入 .navbar-fixed-top 類別可以讓巡覽列固定至頂端，包含 .container 或 .container-fluid 類別讓巡覽列內容置中對齊和左右加入 padding 設置。

<!--導覽列 start-->
    <nav class="navbar navbar-default" role="navigation">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">網站名稱</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">首頁</a></li>
            <li><a href="#">最新消息</a></li>
            <li><a href="#">關於我們</a></li>
            <li><a href="#">聯絡我們</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">管理 <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">後台</a></li>
                <li><a href="#">新聞管理</a></li>
                <li><a href="#">聯絡我們管理</a></li>
                <!--分隔線-->
                <li class="divider"></li>
                <li><a href="#">關於我們</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav><!-- /.nav -->

網頁設計好好玩(下)

5. 第五週 Bootstrap 響應架構

一、Bootstrap 響應架構

網頁開發框架「BOOTSTRAP3」
Bootstrap 3 中文手冊
Bootstrap 3 下載
下載後解壓縮，即可使用。

空白的網頁架構
用文字編輯器(sublime、notepad++)
將下列範本存為index.html

<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 基礎範本 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js 讓 IE8 支援 HTML5 元素與媒體查詢 -->
    <!-- 警告：Respond.js 無法在 file:// 協定下運作 -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- jQuery (Bootstrap 所有外掛均需要使用) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- 依需要參考已編譯外掛版本（如下），或各自獨立的外掛版本 -->
    <script src="js/bootstrap.min.js"></script>

  </head>
  <body>
    <h1>哈囉, 世界!</h1>
  </body>
</html>

容器
.container 用於自適應且固定寬度的容器。
```
<div class="container">
  ...
</div>
```
.container-fluid 用於 100% 寬度的容器，橫跨可視區域的全部寬度。
```
<div class="container-fluid">
  ...
</div>
```

列、欄、格

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

二、練習

檔案名稱： ex1.html
請利用上課教過的語法做出下圖的版型(顏色自訂，內容可以隨便輸入，或至其他網頁複製)
請在 index.html 加上導航，並將 ex1.html 加入導航中，方便切換網頁

網頁設計好好玩(下)

6. 第六週分頁

請建立下圖的網站架構

index.html 、prod.html、news.html、contact.html、about_us.html

各網頁的導航，請設定好，再複製即可

網頁設計好好玩(下)

6-1 Byet FileZilla 設定

「檔案/站台管理員」
上傳檔案

網頁設計好好玩(下)

7. 第七週縮圖列表

一、複習

如何使用bootstrap架構
如何使用filezilla FTP 檔案傳輸軟體
為了方便管理網站，會在本地端建立資料夾，來管理遠端的網站
新增網頁時，為何要複製「空白網頁架構」
練習修改導航的連結與標題

二、縮圖列表

預設樣式

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
     <img src="http://fakeimg.pl/800x600/">
    </a>
  </div>
</div>

假圖：http://fakeimg.pl/

<img src="http://fakeimg.pl/300/">
<img src="http://fakeimg.pl/250x100/">
<img src="http://fakeimg.pl/250x100/ff0000/">
<img src="http://fakeimg.pl/350x200/ff0000/000">
<img src="http://fakeimg.pl/350x200/ff0000,128/000,255">
<img src="http://fakeimg.pl/350x200/?text=Hello">
<img src="http://fakeimg.pl/350x200/?text=World&font=lobster">

HTML img tag 圖片標籤語法
```
<img src="插入的圖片網址" alt="圖片替代文字" title="圖片提示文字">
```
alt - 圖片替代文字，當圖片無法呈現時，可以顯示 alt 的文字內容。
title - 圖片的提示文字，也就是當滑鼠移到圖片上方會顯示的文字。

自定義樣式


      <div class="row">

        <div class="col-sm-6 col-md-4">
          <div class="thumbnail">
            <img src="http://fakeimg.pl/800x600/" alt="假圖">
            <div class="caption">
              <h3>Thumbnail label</h3>
              <p>
                Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
              </p>
              <p>
                <a href="#" class="btn btn-primary" role="button">Button</a>
                <a href="#" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>

        <div class="col-sm-6 col-md-4">
          <div class="thumbnail">
            <img src="http://fakeimg.pl/800x600/" alt="假圖">
            <div class="caption">
              <h3>Thumbnail label</h3>
              <p>
                Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
              </p>
              <p>
                <a href="#" class="btn btn-primary" role="button">Button</a>
                <a href="#" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>

        <div class="col-sm-6 col-md-4">
          <div class="thumbnail">
            <img src="http://fakeimg.pl/800x600/" alt="假圖">
            <div class="caption">
              <h3>Thumbnail label</h3>
              <p>
                Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
              </p>
              <p>
                <a href="#" class="btn btn-primary" role="button">Button</a>
                <a href="#" class="btn btn-default" role="button">Button</a>
              </p>
            </div>
          </div>
        </div>

      </div>

如果要響應，記得用容器 .container 、 .container-fluid
單獨圖片要響應，請用「.img-responsive」

栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
`.container` 最大宽度	None （自动）	750px	970px	1170px
类前缀	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

網頁設計好好玩(下)

8. 第八週圖像縮放器

一、官網：http://zoomsl.sergeland.ru/example/

http://zoomsl.sergeland.ru/images/fashion-054.jpg

二、安裝：

JAVASCRIPT
引入 zoomsl-3.0.js ，必須放在jquery.js的後面


    <script src="class/zoomer/zoomsl-3.0.min.js"></script>


    <script>
       jQuery(function(){

          $(".my-foto").imagezoomsl({
             zoomrange: [1, 12],
             zoomstart: 4,
             innerzoom: true,
             magnifierborder: "none"
          });
       });
    </script>

HTML


    <div class="container">
      <div class="row">
        <div class="col-md-6 big-caption text-center">
          <!-- .zoom -->
          <img class="my-foto img-responsive" src="images/show1.jpg" data-large="images/show1.jpg" data-title="show1" data-help="滑鼠滾輪 +/-" data-text-bottom="2013/14 / 商品名稱： <span style='text-decoration:underline;color:#CC3300;'>show1</span>" alt=""  style="max-height:500px;" />

        </div>
        <div class="col-md-6">

        </div>
      </div>
    </div>

三、範例：http://tncomu.890m.com/templates/show_one/index.html

四、複習：

容器使用 .container
如何將容器分為2欄
如何讓圖片響應 .img-responsive
響應圖片置中： <img src="" class=" center-block"> .center-block
文字如何置中： .text-center

網頁設計好好玩(下)

9. 第九週圖片輪播

backstretch 一個簡單的jQuery插件，它允許你動態調整大小，幻燈片功能的背景圖像添加到任何頁面或元素

官網：http://srobbin.com/jquery-plugins/backstretch/

示範：https://www.ugm.com.tw/tncomu/backstretch.html

用法：

引入

<script src="js/backstretch/jquery.backstretch.min.js"></script>

設定


    <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

網頁設計好好玩(下)

9-1 練習1

複製「網頁空白架構」至編輯器貼上，並存檔至「網站根目錄 / no_9.html 」

<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 基礎範本 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js 讓 IE8 支援 HTML5 元素與媒體查詢 -->
    <!-- 警告：Respond.js 無法在 file:// 協定下運作 -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- jQuery (Bootstrap 所有外掛均需要使用) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- 依需要參考已編譯外掛版本（如下），或各自獨立的外掛版本 -->
    <script src="js/bootstrap.min.js"></script>

  </head>
  <body>
    <h1>哈囉, 世界!</h1>
  </body>
</html>

請修改第7行 <title>Bootstrap 基礎範本 Template</title> => <title>第九週圖片輪播</title>

請加入導覽列


    <!--導覽列 start-->
    <nav class="navbar navbar-default" role="navigation">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html">網站名稱</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="index.html">首頁</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">練習 <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="index.html">第七週 縮圖列表</a></li>
                <li><a href="ex1.html">第八週 圖像縮放器</a></li>
                <li><a href="no_9.html">第九週 圖片輪播</a></li>
                <!--分隔線-->
                <li class="divider"></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav><!-- /.nav -->

將26行 <h1>哈囉, 世界!</h1> 改為 <h1>第九週圖片輪播</h1> => <h1 class="text-center">第九週圖片輪播</h1>，請確認網頁的變化。
文字置中：class="text-center"
請將 index.html 的導航列，更換為上面的導航列

複製 index.html 的「container」至 no_9.html，做為網站的內容，並增加一個 class=" top-content"


    <div class="container top-content">
      <div class="row">

        <div class="col-xs-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="img/a1.jpg">
          </a>
        </div>

        <div class="col-xs-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="http://fakeimg.pl/800x600/">
          </a>
        </div>

        <div class="col-xs-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="http://fakeimg.pl/800x600/">
          </a>
        </div>

        <div class="col-xs-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="http://fakeimg.pl/800x600/">
          </a>
        </div>

        <div class="col-xs-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="http://fakeimg.pl/800x600/">
          </a>
        </div>

        <div class="col-xs-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="http://fakeimg.pl/800x600/">
          </a>
        </div>

        <div class="col-xs-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="http://fakeimg.pl/800x600/">
          </a>
        </div>

        <div class="col-xs-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="http://fakeimg.pl/800x600/">
          </a>
        </div>

      </div>
    </div>

下載backstretch套件：https://raw.githubusercontent.com/srobbin/jquery-backstretch/master/jquery.backstretch.min.js
請將檔案存至「本地端網站根目錄/js」，並上傳遠端主機
安裝套件，請將此標籤，貼在 jquery.js的後面
```
<script src="js/jquery.backstretch.min.js"></script>
```

設定動作,
當網站文件載入完成後，會去找 class="top-content", 執行backstretch套件

請自行尋找背景圖，並上傳後修改相對應的檔名，觀看網頁的變化


    <script type="text/javascript">
      $(document).ready(function(){
        $('.top-content').backstretch([
           "http://fakeimg.pl/1600x1200/ff0000/"
         , "http://fakeimg.pl/1600x1200/00ff00/"
         , "http://fakeimg.pl/1600x1200/0000ff/"
         ], {duration: 3000, fade: 750});
      });
    </script>

網頁設計好好玩(下)

9-2 no_9.html

no_9.html
範例：http://webugm.byethost33.com/no_9_t.html

<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>第九週 圖片輪播</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js 讓 IE8 支援 HTML5 元素與媒體查詢 -->
    <!-- 警告：Respond.js 無法在 file:// 協定下運作 -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- jQuery (Bootstrap 所有外掛均需要使用) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- 依需要參考已編譯外掛版本（如下），或各自獨立的外掛版本 -->
    <script src="js/bootstrap.min.js"></script>
    <!--backstretch-->
    <script src="js/jquery.backstretch.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('.top-content').backstretch([
           "http://fakeimg.pl/1600x1200/ff0000/"
         , "http://fakeimg.pl/1600x1200/00ff00/"
         , "http://fakeimg.pl/1600x1200/0000ff/"
         ], {duration: 3000, fade: 750});
      });
    </script>

  </head>
  <body>
    <!--導覽列 start-->
    <nav class="navbar navbar-default" role="navigation">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html">網站名稱</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="index.html">首頁</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">練習 <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="index.html">第七週 縮圖列表</a></li>
                <li><a href="ex1.html">第八週 圖像縮放器</a></li>
                <li><a href="no_9.html">第九週 圖片輪播</a></li>
                <!--分隔線-->
                <li class="divider"></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav><!-- /.nav -->
    <h1 class="text-center">第九週 圖片輪播</h1>
    <div class="container top-content">
      <div class="row">

        <div class="col-xs-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="img/a1.jpg">
          </a>
        </div>

        <div class="col-xs-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="http://fakeimg.pl/800x600/">
          </a>
        </div>

        <div class="col-xs-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="http://fakeimg.pl/800x600/">
          </a>
        </div>

        <div class="col-xs-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="http://fakeimg.pl/800x600/">
          </a>
        </div>

        <div class="col-xs-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="http://fakeimg.pl/800x600/">
          </a>
        </div>

        <div class="col-xs-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="http://fakeimg.pl/800x600/">
          </a>
        </div>

        <div class="col-xs-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="http://fakeimg.pl/800x600/">
          </a>
        </div>

        <div class="col-xs-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="http://fakeimg.pl/800x600/">
          </a>
        </div>

      </div>
    </div>
  </body>
</html>

網頁設計好好玩(下)

9-3 課後練習

請製做出下面範例：
並在「no_9.html」的導航增加一個「課後練習」的連結

http://webugm.byethost33.com/no_91.html

網頁設計好好玩(下)

10. 第十週 owl.carousel.js (上)

一、官網：

觸摸功能的jQuery插件，可以讓你創建一個美麗的旋轉木馬響應滑塊。

http://www.owlcarousel.owlgraphic.com/

二、安裝

引入CSS

<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

引入JS

<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>

設定HTML

<!-- Set up your HTML -->
<div class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>

調用插件

$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});

三、實做

網頁設計好好玩(下)

10-3 實做

請先連上FILEZILLA
下載檔案 FileZilla 3.9.0.5 可攜版
開啟notepad++
NotePad++（http://notepad-plus-plus.org/ ）
開啟一個新檔，存檔「本地端根目錄/owl-carousel.html」

複製空白架構

<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>OWL.CAROUSEL Template</title>
 
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
 
    <!-- HTML5 shim and Respond.js 讓 IE8 支援 HTML5 元素與媒體查詢 -->
    <!-- 警告：Respond.js 無法在 file:// 協定下運作 -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
 
    <!-- jQuery (Bootstrap 所有外掛均需要使用) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- 依需要參考已編譯外掛版本（如下），或各自獨立的外掛版本 -->
    <script src="js/bootstrap.min.js"></script>
 
  </head>
  <body>
    <h1>OWL.CAROUSEL Template</h1>
  </body>
</html>

在首頁的導航增加一個項目


            <li><a href="owl-carousel.html">旋轉木馬</a></li>

複製首頁的「NAV導航」至「owl-carousel.html」

    <!--導覽列 start-->
    <nav class="navbar navbar-default" role="navigation">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html">網站名稱</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="index.html">首頁</a></li>
            <li><a href="owl-carousel.html">旋轉木馬</a></li>
            <li><a href="news.html">最新消息</a></li>
            <li><a href="about_us.html">關於我們</a></li>
            <li><a href="prod.html">商品展示</a></li>
            <li><a href="contact.html">聯絡我們</a></li>

          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav><!-- /.nav -->

複製index.html 的縮圖列表


  	<div class="container">
  		<div class="row">

  		  <div class="col-xs-6 col-md-3">
    			<a href="#" class="thumbnail">
    			  <img src="http://fakeimg.pl/800x600/">
    			</a>
  		  </div>

  		  <div class="col-xs-6 col-md-3">
    			<a href="#" class="thumbnail">
    			  <img src="http://fakeimg.pl/800x600/">
    			</a>
  		  </div>

  		  <div class="col-xs-6 col-md-3">
    			<a href="#" class="thumbnail">
    			  <img src="http://fakeimg.pl/800x600/">
    			</a>
  		  </div>

  		  <div class="col-xs-6 col-md-3">
    			<a href="#" class="thumbnail">
    			  <img src="http://fakeimg.pl/800x600/">
    			</a>
  		  </div>

  		  <div class="col-xs-6 col-md-3">
    			<a href="#" class="thumbnail">
    			  <img src="http://fakeimg.pl/800x600/">
    			</a>
  		  </div>

  		  <div class="col-xs-6 col-md-3">
    			<a href="#" class="thumbnail">
    			  <img src="http://fakeimg.pl/800x600/">
    			</a>
  		  </div>

  		  <div class="col-xs-6 col-md-3">
    			<a href="#" class="thumbnail">
    			  <img src="http://fakeimg.pl/800x600/">
    			</a>
  		  </div>

  		  <div class="col-xs-6 col-md-3">
    			<a href="#" class="thumbnail">
    			  <img src="http://fakeimg.pl/800x600/">
    			</a>
  		  </div>

  	</div>

下載：http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css => 本地端根目錄/class/owlcarousel
下載：http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css => 本地端根目錄/class/owlcarousel
下載：http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js => 本地端根目錄/class/owlcarousel


  <!-- Owl Stylesheets -->
  <link rel="stylesheet" href="class/owlcarousel/owl.carousel.min.css">
  <link rel="stylesheet" href="class/owlcarousel/owl.theme.default.min.css">

  <script src="class/owlcarousel/owl.carousel.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $('.owl-carousel').owlCarousel({
          loop:true,
          margin:10,
          nav:true,
          dots:false,
          responsive:{
              0:{
                  items:1
              },
              600:{
                  items:2
              },
              1000:{
                  items:3
              }
          }
      })
    });

  </script>

網頁設計好好玩(下)

11. 第十一週 OWL.CAROUSEL.JS (下)

選項：http://www.owlcarousel.owlgraphic.com/docs/api-options.html

<script type="text/javascript">
	  $(document).ready(function(){
		$('.owl-carousel').owlCarousel({
			loop:true,//循環
			margin:10,//邊距
			nav:true,//導航
			dots:false,//導航點
			responsive:{
				0:{
					items:1//數量
				},
				600:{
					items:2
				},
				1000:{
					items:3
				}
			}
		})
	  });

	</script>

css


  <style>
    .owl-carousel {
      position: relative;
    }
    .owl-prev,
    .owl-next {
      position: absolute;
      top: 50%;
    }

    .owl-theme .owl-controls .owl-nav [class*=owl-] {
       margin-top: -20px; // 按鈕高度的一半
    }
    .owl-prev {
      left: -50px;
    }
    .owl-next {
      right: -50px;
    }

  </style>

網頁設計好好玩(下)

12. 第十二週 GOOGLE 表單(上)

複製空白架構
登入gmail
右上角：google應用程式，進入「google需端硬碟」
新增「google」表單
輸入標題、及問題
回覆通知、選取回應目的地
設定選項
傳送表單
嵌入contact.html
測試

網頁設計好好玩(下)

12-1 空白架構

<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>OWL.CAROUSEL Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js 讓 IE8 支援 HTML5 元素與媒體查詢 -->
    <!-- 警告：Respond.js 無法在 file:// 協定下運作 -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- jQuery (Bootstrap 所有外掛均需要使用) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- 依需要參考已編譯外掛版本（如下），或各自獨立的外掛版本 -->
    <script src="js/bootstrap.min.js"></script>

  </head>
  <body>
    <!--導覽列 start-->
    <nav class="navbar navbar-default" role="navigation">
      <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="index.html">網站名稱</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
        <li><a href="index.html">首頁</a></li>
        <li><a href="owl-carousel.html">旋轉木馬</a></li>
        <li><a href="ex20160509.html">旋轉木馬1</a></li>
        <li><a href="news.html">最新消息</a></li>
        <li><a href="about_us.html">關於我們</a></li>
        <li><a href="prod.html">商品展示</a></li>
        <li><a href="contact.html">聯絡我們</a></li>

        </ul>
      </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav><!-- /.nav -->
    <h3 class="text-center">聯絡我們</h3>
    <div class="container">

    </div>

  </body>
</html>

網頁設計好好玩(下)

12-2 嵌入表單

<iframe src="https://docs.google.com/forms/d/1F4948dZ5uDMuTGxLOqrRohHvs6ZKO7houm4Xor_7P4w/viewform?embedded=true" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0">載入中…</iframe>

修改外觀

style="width:100%;height:1000px;"

網頁設計好好玩(下)

13. 第十三週 GOOGLE表單(下)

請利用google表單，建立一個訂便當的表單
在回覆選取：選取回應目的地建立新試算表=> 訂便當 (回應)
調色盤：調整外觀
傳送取得，嵌入HTML語法
將語法嵌入成一個 ex20160523.html (要有導航)
將首頁的導航增加一個訂便當的連結
訂便當 (回應) 設定通知

網頁設計好好玩(下)

14. 第十四週 Font-Awesome

一、複製空白框架，建立一個 ex20160530.html

二、複製index.html 的NAV，並加上一個，index.html先改完，再複製。


			<li><a href="ex20160530.html">Font-Awesome</a></li>

三、Font-Awesome中文網站

http://www.bootcss.com/p/font-awesome/

四、安裝

下載：https://github.com/FortAwesome/Font-Awesome/archive/v3.2.1.zip

請存至 class目錄下，並解壓縮，且將資料改名為「Font-Awesome」

在ex20160530.html 的<head> </head>加入

<link href="css/bootstrap.min.css" rel="stylesheet"> 的後面



    <!-- Font-Awesome -->
    <link rel="stylesheet" href="class/Font-Awesome/css/font-awesome.min.css">

五、範例

請用容器container建一個二等分的頁面

按鈕範例：http://v3.bootcss.com/css/#buttons


  
  <div class="container">
    <h3 class="text-center">按鈕</h3>
    <hr>
    <div class="row">
      <div class="col-md-6">
        <p>
          <a class="btn btn-default" href="#"><i class="icon-repeat"></i> 重新載入</a>
          <a class="btn btn-success" href="#"><i class="icon-shopping-cart icon-large"></i> 結帳</a>
          <a class="btn btn-danger" href="#"><i class="icon-trash icon-large"></i> 刪除</a>
         </p>
      </div>

      <div class="col-md-6">
        <p>
          <a class="btn btn-lg btn-primary" href="#"><i class="icon-comment"></i> 評論</a>
          <a class="btn btn-sm btn-warning" href="#"><i class="icon-cog"></i> 設定</a>
          <a class="btn btn-xs btn-info" href="#"><i class="icon-info-sign"></i> 資訊</a>
          <a class="btn " href="#"><i class="icon-facebook-sign"></i> FB</a>
        </p>
      </div>
    </div>
    <hr>
  </div>

按鈕組



  <div class="container">
    <h3 class="text-center">按鈕組</h3>
    <hr>
    <div class="row">
      <div class="col-md-6">
        <div class="well" style="padding: 8px 0;">
          <ul class="nav">
            <li class="active"><a href="#"><i class="icon-home"></i> Home</a></li>
            <li><a href="#"><i class="icon-book"></i> Library</a></li>
            <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
            <li><a href="#"><i class="icon-cogs"></i> Settings</a></li>
          </ul>
        </div>
      </div>
      <div class="col-md-6">
        <div class="btn-toolbar">
          <div class="btn-group">
            <a class="btn" href="#"><i class="icon-align-left"></i></a>
            <a class="btn" href="#"><i class="icon-align-center"></i></a>
            <a class="btn" href="#"><i class="icon-align-right"></i></a>
            <a class="btn" href="#"><i class="icon-align-justify"></i></a>
          </div>
          <div class="btn-group">
            <a class="btn btn-primary" href="#"><i class="icon-user"></i> User</a>
            <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="icon-caret-down"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
              <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
              <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
              <li class="divider"></li>
              <li><a href="#"><i class="i"></i> Make admin</a></li>
            </ul>
          </div>
        </div>

      </div>
    </div>
    <hr>
  </div>

通过应用 icon-large (增大 33%), icon-2x, icon-3x 或 icon-4x 样式让图标变得更大。

<p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>

Animated Spinner

Use the icon-spin class to get any icon to rotate. Works best withicon-spinner and icon-refresh.
```
<i class="icon-spinner icon-spin"></i> Spinner icon when loading content...
```

Bordered & Pulled Icons

Use icon-border and pull-rightor pull-left for easy pull quotes or article graphics.

<i class="icon-quote-left icon-4x pull-left icon-muted"></i>
Use a few of the new styles together ... lots of new possibilities.

網頁設計好好玩(下)

15. 第十五週綜合練習

一、空白架構

下載bootstrap：https://github.com/twbs/bootstrap/releases/download/v3.3.1/bootstrap-3.3.1-dist.zip
下載Filezilla： FileZilla 3.9.0.5 可攜版
下載notepad++ ：https://notepad-plus-plus.org/repository/6.x/6.8.8/npp.6.8.8.bin.zip
將原本檔案移至 /web 資料夾做備份
將bootstrap 安裝至專案目錄中
建立index.html
修改導航連結

二、圖片處理

若無圖片可至這裡下載合法使用的圖片：https://pixabay.com/
裁圖若無軟體，建議使用FastStone Image Viewer（http://www.faststone.org/FSViewerDownload.htm），點兩下圖片，滑鼠往左，選「裁剪板」即可裁切圖片。
請下載三張 (1920x1280)的圖片至 img/

三、圖片輪播

四、頁尾


    <div style="padding:20px;background:#000;color:#fff;" class="text-center">
      <a href="index.html">育將電腦工作室</a>
    </div>

網頁設計好好玩(下)

15-1 空白架構含導航

<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>育將電腦工作室</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js 讓 IE8 支援 HTML5 元素與媒體查詢 -->
    <!-- 警告：Respond.js 無法在 file:// 協定下運作 -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- jQuery (Bootstrap 所有外掛均需要使用) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- 依需要參考已編譯外掛版本（如下），或各自獨立的外掛版本 -->
    <script src="js/bootstrap.min.js"></script>

  </head>
  <body>
    <!--導覽列--><!--導覽列 start-->
    <nav class="navbar navbar-default" role="navigation">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html">育將電腦工作室</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="index.html">首頁</a></li>
            <li><a href="prod.html">商品展示</a></li>
            <li><a href="about-us.html">關於我們</a></li>
            <li><a href="contact.html">聯絡我們</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav><!-- /.nav -->

  </body>
</html>

網頁設計好好玩(下)

15-3 圖片輪播

一、下載套件：

https://raw.githubusercontent.com/srobbin/jquery-backstretch/master/jquery.backstretch.min.js

將上列存至 class/backstretch/

二、引入套件：

<script src="class/backstretch/jquery.backstretch.min.js"></script>

三、設定

<script type="text/javascript">
  $(document).ready(function(){
    $('.top-content').backstretch([
       "img/3.jpg"
     , "img/2.jpg"
     , "img/1.jpg"
     ], {duration: 3000, fade: 750});
  });
</script>

四、HTML


    <div class="top-content" style="height:560px;">
    </div>

五、修正與導航的內距

 style="margin-bottom:0px;"

網頁設計好好玩(下)

16. 第十六週綜合練習

一、縮圖列表

參考：https://www.ugm.com.tw/modules/tad_book3/page.php?tbdsn=94

二、下載圖片約12張

若無圖片可至這裡下載合法使用的圖片：https://pixabay.com/
裁圖若無軟體，建議使用FastStone Image Viewer（http://www.faststone.org/FSViewerDownload.htm），點兩下圖片，滑鼠往左，選「裁剪板」即可裁切圖片。
請下載 (800x600)的圖片至 img/ prod_1.jpg 、prod_2.jpg .........

三、HTML碼

網頁設計好好玩(下)

16-3 HTML碼

<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>育將電腦工作室</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js 讓 IE8 支援 HTML5 元素與媒體查詢 -->
    <!-- 警告：Respond.js 無法在 file:// 協定下運作 -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- jQuery (Bootstrap 所有外掛均需要使用) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- 依需要參考已編譯外掛版本（如下），或各自獨立的外掛版本 -->
    <script src="js/bootstrap.min.js"></script>

  </head>
  <body>
    <!--導覽列--><!--導覽列 start-->
    <nav class="navbar navbar-default" role="navigation"  style="margin-bottom:0px;">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html">育將電腦工作室</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="index.html">首頁</a></li>
            <li><a href="prod.html">商品展示</a></li>
            <li><a href="about-us.html">關於我們</a></li>
            <li><a href="contact.html">聯絡我們</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav><!-- /.nav -->

    <div class="container">
      <div class="row">

        <div class="col-xs-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="img/prod_1.jpg" alt="圖1">
          </a>
        </div>

        <div class="col-xs-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="img/prod_2.jpg" alt="圖2">
          </a>
        </div>


        <div class="col-xs-6 col-md-3">
          <a href="#" class="thumbnail">
            <img src="img/prod_3.jpg" alt="圖3">
          </a>
        </div>


      </div>
    </div>
    <div style="padding:20px;background:#000;color:#fff;" class="text-center">
      <a href="index.html">育將電腦工作室</a>
    </div>

  </body>
</html>

1. 第一週

2. 第二週

一、編輯器

二、FileZilla檔案傳輸軟體

三、設定自動轉址

3. 第三週

3-1 bootstrap 介紹

3-2 網頁組成

網頁組成

HTML

CSS

JavaScript

HTML , CSS 與 JavaScript 的關係

4. 第四週 版型設計

4-1 第四週 - 網站導航

5. 第五週 Bootstrap 響應架構

6. 第六週 分頁

請建立下圖的網站架構

index.html 、prod.html、news.html、contact.html、about_us.html

各網頁的導航，請設定好，再複製即可

6-1 Byet FileZilla 設定

「檔案/站台管理員」

上傳檔案

7. 第七週 縮圖列表

8. 第八週 圖像縮放器

一、官網：http://zoomsl.sergeland.ru/example/

二、安裝：

三、範例：http://tncomu.890m.com/templates/show_one/index.html

四、複習：

9. 第九週 圖片輪播

9-1 練習1

9-2 no_9.html

9-3 課後練習

10. 第十週 owl.carousel.js (上)

10-3 實做

11. 第十一週 OWL.CAROUSEL.JS (下)

12. 第十二週 GOOGLE 表單(上)

複製空白架構

登入gmail

右上角：google應用程式，進入 「google需端硬碟」

新增「google」表單

輸入標題、及問題

回覆通知、選取回應目的地

設定選項

傳送表單

嵌入contact.html

測試

12-1 空白架構

12-2 嵌入表單

13. 第十三週 GOOGLE表單(下)

14. 第十四週 Font-Awesome

Animated Spinner

Bordered & Pulled Icons

15. 第十五週 綜合練習

15-1 空白架構含導航

15-3 圖片輪播

16. 第十六週 綜合練習

一、縮圖列表

二、下載圖片約12張

三、HTML碼

16-3 HTML碼

17. 第十七週 綜合練習

請完成

關於我們 about-us.html

聯絡我們 contact.html

感謝同學這二個學期認真的上課，後續有問題可以透過 tawan158@gmail.com 詢問，謝謝

4. 第四週版型設計

6. 第六週分頁

7. 第七週縮圖列表

8. 第八週圖像縮放器

9. 第九週圖片輪播

右上角：google應用程式，進入「google需端硬碟」

15. 第十五週綜合練習

16. 第十六週綜合練習

17. 第十七週綜合練習