網頁設計與雲端應用

1. 體驗課

一、課程訊息：

  1. 上課時間：每週三 晚上07:00～09:50 第一次上課日期：03 月 08 日
  2. 上課地點：大成國中（南區西門路一段306號），一人一機
  3. 報名地點：
    2/24以後，後甲國中-台南社大辦公室
  4. 參加體驗課後報名可享95折優惠
  5. 本課程為網頁設計初階課程
  6. 本學期課程結束，會實做一個網站，上傳至免費空間，可商業使用
  7. 搭配雲端使用，可快速建立各式「線上報名表」、「購物清單」.....

二、課程內容

  1. 網頁設計編輯工具sublime txt介紹 
  2. 下載免費響應式網頁樣板 
  3. 修改樣板成為自己網站 
  4. 結合雲端，設計購物車表單 
  5. 上傳至雲端，開啟行銷網站大門 

三、網站實例

  1. 順興鐵工廠
    這個網站是一個簡單的網站，但它的關鍵字搜尋，是排在第1頁，所以對網站行銷起了大作用
  2. 一個簡單的行銷網站
    用最簡單方式，建立行銷網站

四、課程規劃

  1. 本期課程(網頁初階)
  2. 網頁中階
  3. 網頁進階
  4. 手機app開發

網頁設計與雲端應用

2. HTML5的特性與開發環境

一、HTML5介紹

  1. HTML是HyperText Markup Language(超文件標籤語言)的縮寫，雖然說HTML也算是一種程式語言，但事實上HTML並不像C++或Visual Basic語言一樣必須記憶大量的語法，正確的說HTML只是一種標籤(Tags)，每個標籤都是一個特定的指令，這些指令組合起來就是我們在瀏覽器看到的網頁了。
  2. 廣義的HTML5包含HTML5、CSS3、Javascript

二、建立HTML文件的工具

  1. 瀏覽器(IE、Chrome、Firefox、Opera、Safari都支援HTML5，但IE9以後的版本才有較佳的支援)
  2. 純文字編輯軟體
  3. sublime txt介紹 
    64位元 
    32位元 
  4. sublime txt 操作 
    改變文字大小：「設定/字型」「ctrl + =」增大 「ctrl + -」減少
分割視窗：「檢視/佈局」
切換全螢幕：「F11」
切換側邊欄：「檢視/側邊欄」
加入專案資料夾：直接拖曳資料夾至左側或「檔案/資料夾」
開關左側「專案資料夾」： ctrl+k , ctrl+b 請注意順序

     

  5. EMMET 快捷鍵 

三、我的第一個網頁

  1. 請建立一個資料夾『github」：以後所有的網站資料將會放在這個資料夾
  2. 在「github」底下建立資料夾「website」：website資料夾存放一個網站的資料
  3. 請用sublime txt 建立 index.html
    「ctrl+!」：記得檔案副檔名先調為「html」
    善用工具，即可得到事半功倍的效果 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>

     

  4. HTML5宣告：<!DOCTYPE html>
    HTML4宣告：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  5. <html lang="en"> ..... </html>：代表這是一份網頁文件，其中「lang="en"」lang：屬性 , "en"：值，台灣的正體中文：「lang="zh-Hant-TW"」語系
  6. <head>.....</head>：網頁的檔頭，是給瀏覽器或搜尋引擎看的。(這是閉合標籤)
  7. <meta charset="UTF-8">：是獨立標籤，<meta>標籤用來描述網頁，其charset屬性是用來指定所使用的編碼，目前幾乎都是使用「UTF-8」
  8. <title>Document</title>：網頁的標題，此標題會顯示在瀏覽器標題列
  9. <body>.....</body>：放置網頁內容，內容將呈現在網頁上
  10. index.html：首頁，若網址沒有指定檔名，則會直接開啟 index.html 、index.php .....

四、雲端工具

  1. Google Gmail 帳號 
  2. GitHub帳號 
  3. Dropbox帳號 
  4. Hellofax線上傳真 

五、實做

  1. 「github/website/index.html」這個檔案存放在本地端的電腦，外界無法瀏覽
  2. 當我們申請了 Github帳號，Githbu其中有一個服務「Github Pages」可以做為靜態網站的伺服器
  3. 因此把「github/website/index.html」上傳至「Github Pages」那麼外界就可以瀏覽我們製作的網頁

網頁設計與雲端應用

3. HTML5元素，屬性和格式化

一、HTML

  1. HyperText Markup Language：超文本標記語言，通過定義的內容，例如，標題，段落或圖像給人的內容結構和含義。用來處理網站的架構。
  2. 非程式，只是一種寬鬆的標籤語法，寫錯也不會怎樣，為網頁的最基礎。
  3. HTML的檔案為純文字檔，副檔名為.html，瀏覽器即可讀取HTML檔。
  4. 廣義論及HTML5時，實際指的是HTML、CSS和JavaScript在內的技術組合。
  5. 各瀏覽器HTML5支援：http://www.findmebyip.com/litmus/ 或 http://html5test.com
  6. HTML標籤及屬性是不分大小寫的： <IMG>和<img> 一樣，但建議採用小寫。
  7. 英文手冊：http://www.w3schools.com/html/html5_intro.asp
  8. 中文手冊：http://www.w3school.com.cn/tags/index.asp
  9. HTML：由 elements(元素), tags(標籤) , attributes(屬性) 組成
  10. 元素：h1~h6、div、p、a .....等
  11. 標籤：<>，使用<>將元素與屬素包裝起來。通常由開始標籤到結束標籤，例 <div>.....</div>，但也自閉標籤如 <img> <meta>.....
  12. 屬性：屬性是用來提供有關元素的附加信息的屬性。最常見的屬性包括id屬性，它標識的元素; 的class屬性，該屬性分類的元素; src屬性，該屬性指定嵌入內容的來源; 及href屬性，它提供了一個超鏈接引用到一個鏈接資源。

二、CSS

  1. Cascading Style Sheets：串接樣式表，是創造的樣式與內容使用的外觀展現語言，例如，字體或顏色。用來處理網站的外觀。
  2. CSS可以自定 CLASS(.) 與 ID(#) 兩種選擇器。
  3. CLASS 可以重複 ， ID則是唯一

  4. CSS 套用方式
    行內套用 (Inline)
    嵌入套用 (Embed)
    外部連接套用 (External Link)
    匯入套用 (Import)

三、JavaScript

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

四、Github 操作 

 

五、HTML元素

  1. <h1>~<h6>標題：HTML5不再支援 align屬性，如要設定對齊，可用css語法調整，每個頁面只能有一個<h1>，這樣可以加強網頁的seo
  2. <div>區域</div>：容器，可將許多html 元素包在一起
  3. <p>段落</p>：一般用來顯示文章內容，在下方會多一個空白列 sublime：lorem 、tab、shift+tab
  4. <br />：換行 XHTML規定 單一標籤必須加上「 / 」，故建議使用「<br />」
  5. <pre>程式碼</pre>
  6. <hr />：分隔線
  7. <!-- 註解 -->
  8. <b>粗體</b>、<u>底線</u>、<i>斜體</i>
  9. <sup>上標</sup>、<sub>下標</sub>
  10. <table>表格</table>
  11. <a>連結</a> 
  12. <img />：圖片
  13. <span>區域</span>

六、HTML屬性

  1. <img src='圖片位置' alt='圖片說明' class='img-responsive' id='slider_img' style='width:100px;height:100px;'/>
  2. 屬性以 「鍵/值」出現，如 src='圖片位置'
  3. 通用屬性：
    class：規定元素的類名
    id：規定元素唯一的ID
    style：規定元素的樣式
    title：規定元素的額外訊息

七、HTML格式

	<b>粗體</b>
	<big>大號字</big>
	<em>著重文字</em>
	<i>斜體字</i>
	<small>小號字</small>
	<strong>加重語氣</strong>
	<sub>下標字</sub>
	<sup>上標字</sup>
	<ins>插入字</ins>
	<del>刪除字</del>

 

網頁設計與雲端應用

3-1 Github操作

  1. 新增數據庫
  2. 設定為Github Pages
  3. 得到網址
  4. 刪除數據庫

 

網頁設計與雲端應用

4. HTML列表與CSS介紹

1.無序列表
2.有序列表
3.嵌套列表
4.自定義列表
5.行內套用 (Inline)
 

<h2 style=color:blue;font-family:"標楷體">......</h2>


6.嵌入套用 (Embed)

<style type="text/css"> 
  h2 {color:blue} 
</style>


7.外部連接套用 (External Link)
 

<link rel=stylesheet type="text/css" href="../main.css">

 

網頁設計與雲端應用

4-1 練習

  1. 無序列表
    https://webugm.github.io/tncomu10601/3-1.html 
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>無序列表3-1</title>
</head>
<body>
	
	<ul>
		<li>蘋果</li>
		<li>香蕉</li>
		<li>橘子</li>
		<li>水蜜桃</li>
	</ul>
	
</body>
</html>

     

  2. 有序列表
    https://webugm.github.io/tncomu10601/3-2.html 
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>有序列表3-2</title>
</head>
<body>
	
	<ol>
		<li>蘋果</li>
		<li>香蕉</li>
		<li>橘子</li>
		<li>水蜜桃</li>
	</ol>
	
</body>
</html>

     

  3. 嵌套列表
    https://webugm.github.io/tncomu10601/3-3.html 
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>嵌套列表3-3</title>
</head>
<body>
	
	<ul>
		<li>高中</li>
		<ul>
			<li>台南一中</li>
			<li>台南女中</li>
			<li>台南二中</li>
		</ul>
		<li>國中</li>
		<ul>
			<li>新興國中</li>
			<li>建興國中</li>
			<li>中山國中</li>
		</ul>
		<li>國小</li>
		<ul>
			<li>新興國小</li>
			<li>日新國小</li>
			<li>安平國小</li>
		</ul>
	</ul>
	
</body>
</html>

     

  4. 自定義列表
    https://webugm.github.io/tncomu10601/3-4.html​​​​​​​ 
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自定義列表3-4</title>
</head>
<body>

	<dl>
		<dt>咖啡</dt>
		<dd>黑色的飲料</dd>
		<dt>牛奶</dt>
		<dd>白色的飲料</dd>
	</dl>
	
</body>
</html>

     

  5. 有序列表的屬性 
    https://webugm.github.io/tncomu10601/3-5.html

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>有序列表的屬性3-5</title>
</head>
<body>
	
	<ol type="A">
		<li>蘋果</li>
		<li>香蕉</li>
		<li>橘子</li>
		<li>水蜜桃</li>
	</ol>
	<ol type="a">
		<li>蘋果</li>
		<li>香蕉</li>
		<li>橘子</li>
		<li>水蜜桃</li>
	</ol>
	<ol type="I">
		<li>蘋果</li>
		<li>香蕉</li>
		<li>橘子</li>
		<li>水蜜桃</li>
	</ol>
	<ol type="i">
		<li>蘋果</li>
		<li>香蕉</li>
		<li>橘子</li>
		<li>水蜜桃</li>
	</ol>
	<ol start="6">
		<li>蘋果</li>
		<li>香蕉</li>
		<li>橘子</li>
		<li>水蜜桃</li>
	</ol>
	
</body>
</html>

     

  6. 無序列表的屬性 ​​​​​​​
    https://webugm.github.io/tncomu10601/3-6.html

    <!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>無序列表</title>
	</head>
	<body>	
		<ul type="disc">
			<li>蘋果</li>
			<li>香蕉</li>
			<li>橘子</li>
			<li>水蜜桃</li>
		</ul>
		<ul type="circle">
			<li>蘋果</li>
			<li>香蕉</li>
			<li>橘子</li>
			<li>水蜜桃</li>
		</ul>
		<ul type="square">
			<li>蘋果</li>
			<li>香蕉</li>
			<li>橘子</li>
			<li>水蜜桃</li>
		</ul>
	</body>
</html>


     

 

網頁設計與雲端應用

5. HTML區塊元素與樣式表使用

HTML5塊元素標籤的使用

本單元通過講解HTML區塊元素、行內元素等，掌握HTML區塊元素，並認識HTML5區塊元素。

  1. HTML區塊元素(block)
    區塊元素在顯示時，通常會以新行開始，高度，行高以及頂和底邊距都可控制，寬度預設是它的容器的100%，除非設定一個寬度。
    如 <h1> <p> <ul>
    sublime 假字 lorem
  2. HTML行內元素(inline)
    行內元素通常不會以新行開始，高，行高及頂和底邊距不可改變；寬度就是它的文字或圖片的寬度
    <b> <a> <img>
    <a href="7-1.html" target="_blank">7-1.html</a>
  3. HTML <div> 元素
    <div>元素是區塊元素，其主要是組合 HTML的容器
  4. HTML <span>元素
    <span>元素是行內元素，可做為文本的容器
  5. 更多標籤：http://www.w3school.com.cn/tags/

HTML樣式

本單元講解HTML樣式，包含基本標籤、屬性、三種樣式表插入方法（外部樣式表、內部樣式表、內聯樣式表）

  1. 標籤：
    <style>：樣式定義
    <link>：資源引用
  2. 屬性：
    rel="stylesheet"：外部樣式表
    type="text/css"：引入文檔的類型
  3. 三種樣式表插入的方法：
    外部樣式表： 
    <link rel="stylesheet" type="text/css" href="css/style.css" />

    內部樣式表： 
    <style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>

    行內樣式表： 
    <p style="color: sienna; margin-left: 20px">
這是行內樣式表
</p>

     

 

網頁設計與雲端應用

5-1 git操作

一、Git官網  

  1. 下載 portable版本
  2. 安裝
    執行「PortableGit-2.12.0-64-bit.7z.exe」
  3.  執行 Git
    雙按「git-bash.exe」
    輸入「git version」檢查是否安裝成功

二、設定Git

  1. 設定作者的訊息 
    git config --global user.name "tawan158"
git config --global user.email "tawan158@ugm.com.tw"

    git config --global user.name "tawan158"
    git config --global user.email "tawan158@ugm.com.tw"
    請輸入自己申請的Github帳號與email

    在每一次的 Git commit (提交，我們稍後會提到) 都會記錄作者的訊息像是 name 及 email ，
    --global 代表全域設定，所有的數據庫
    由於電腦教室會還原，因此每次到教室安裝「git」後，記得都要設定

  2. 查看訊息 
    git config --list

     

  3. 輸出時加上顏色 
    git config --global color.ui true

     

三、Windows 提示字元操作

  1. cd：改變目錄
  2. mkdir：建立一個目錄
  3. ls：顯示目錄下的檔案
  4. touch：建立新檔案
  5. 「.」 ：代表本層
  6.  「..」 ：代表上層
  7. 目錄 「/」
  8. 如果不想記太多指令，那麼請記一個「cd」就可以了

四、Git操作(這裡僅介紹與上傳有關的指令)

  1. git init ：建立本地端數據庫
  2. git clone xxx：複製遠端數據庫
  3. git add .：將所有異動的檔案設成 stage 狀態
  4. git commit -m "commit訊息"  ：由於我主要是想更新網站資料，所以commit訊息，可以輸入"1"即可，-m是快速提交
  5. git push origin master：將 Commit 送出去
  6. 修改檔案 => 加入 stage (git add .) => 提交( git commit -m '1' )=> 上傳(git push origin master)

網頁設計與雲端應用

5-2 成果驗證

網頁設計與雲端應用

6. 綜合練習

一、建立網頁檔案，上傳至github

  1. 檔案管理：這裡有二個部份，分為「本地端」「伺服端」
  2. git bash：幫我們將網頁檔案傳至「伺服端」
    git add .
    git commit -m '1'
    git push origin master
  3. sublime text3：用它來建立網頁檔案，
  5. 常用標籤： 
    <h1>~<h6>標題
<p>段落</p>
<div>區域</div>
<pre>程式碼</pre>
<ol>有序清單</ol><ul>無序清單</ul>
<table></table>
--------------------------------------------------
<a>連結</a>
<br />換行
<img />圖片
<span>區域</span>

    5-1.html
     

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>練習5-1</title>
</head>
<body>
	<h1>練習5-1</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>	
</body>
</html>


    5-2.html
     

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>練習5-2</title>
</head>
<body>
	<h1>練習5-2</h1>
	<h2>練習5-2</h2>
	<h3>練習5-2</h3>
	<h4>練習5-2</h4>
	<h5>練習5-2</h5>
	<h6>練習5-2</h6>
	練習5-2
	<p>練習5-2</p>
	<div>練習5-2</div><div>練習5-2</div>	
	<span>練習5-2</span><span>練習5-2</span>
</body>
</html>

    5-3.html ：請自行至 tw.yahoo.com 複制一段標題與段落
     

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>練習5-3</title>
</head>
<body>
	<h1>MLB／為了這一分 他受盡了苦難</h1>
	<p>紅雀隊今天以1比2輸給小熊隊，不過紅雀隊攻下的唯一1分，可是Stephen Piscotty歷經各種苦難之後拿下來的。</p>
	<p>紅雀隊今天遭到小熊隊強投Jake Arrieta的全力封鎖，打擊無法發揮。5局下Piscotty被Arrieta投出的球擊中右手肘上一壘，接著Arrieta暴投，Piscotty衝上二壘時，又被捕手Willson Contreras的傳球打到另一隻手的手肘。</p>	
</body>
</html>



    index.html
     

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首頁</title>
</head>
<body>
	<h1>首頁</h1>
	<ul>
		<li><a href="5-1.html">練習5-1</a></li>
		<li><a href="5-2.html">練習5-2</a></li>
		<li><a href="5-3.html" target="_blank">練習5-3</a></li>
	</ul>
</body>
</html>


    5-4.html ：練習插入圖片，請先將上面圖片下載至專案 img/ex5.png
    這裡需了解「圖片放置位置」「網頁檔案位置」之間的關係
     

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>練習5-4</title>
</head>
<body>
	<h1>插入圖片</h1>
	<div><img src="img/ex5.png"></div>
</body>
</html>

     

 

三、CSS盒子模式

  1. 內容 content
  2. 內邊距 padding
    padding、padding-top、padding-right、padding-bottom、padding-left
  3. 框線 border
    border樣式
  4. 外邊距 margin
  5. 5-5.html
    「檢視/佈局/列:2」左邊->html 右邊->css
    引入css檔
    ctrl + / ：註解
    p100 
    m50
    ctrl+shift+c 
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<title>練習5-5</title>
</head>
<body>
	<h1>padding</h1>
	<table border=1>
		<tr>
			<td>內邊距</td>
		</tr>
	</table>
</body>
</html>

     

  6.  

網頁設計與雲端應用

6-1 程式碼

  1. 5-5.html 
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<title>練習5-5</title>
</head>
<body>
	<h1>padding</h1>
	<table border=1>
		<tr>
			<td>內邊距</td>
		</tr>
	</table>
	<div class="d1">
		
	</div>
	<div class="d2">
		
	</div>
</body>
</html>

     

  2. css/style.css 
    td{
	/*padding: 100px;*/
	padding-left: 50px;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-right: 20px;
}

.d1{
	background-color: red;
	border: solid black 2px;
	margin: 30px;
	padding: 20px;
	width: 50%;
	height: 300px;
}
.d2{
	background-color: #188417;
	border: solid #2112CD 10px;
	margin: 60px;
	padding: 20px;
	width: 50%;
	height: 100px;
}

     

網頁設計與雲端應用

7. CSS 常用語法

  1. CSS position 属性
    position:static「靜態」這是網頁的預設值。沒有定位，元素出現在正常的流中（忽略top, bottom, left, right 或者z-index 聲明）。
    position:relative 「相對」指的是相對於其正常位置進行定位，可用 top、bottom、left、right來調整該元素位置。
    position:absolute「絕對」相對於static 定位以外的第一個父元素進行定位。脫離資訊流，一樣可用top、bottom、left、right來調整該元素位置。position:absolute搭配z-index，可以將元素進行上下排列。一般而言，z-index預設值為0。
    position:fixed 「固定」相對於瀏覽器窗口進行定位。脫離資訊流，一樣可用top、bottom、left、right來調整該元素位置。不管視窗如何捲動，永遠保持在固定位置（可用來做浮動視窗）。
    position:inherit    規定應該從父元素繼承position 屬性的值。
    這裡有一篇文章：請參考
    html實體名稱
    範例 6-2.html 6-3.html
  2. QR CODE 
    QR CODE 說明
    線上產生器
    範例 6-1.html
  3. Google AutoDraw
    說明
    網站

網頁設計與雲端應用

7-1 CSS常用操作-對齊

  1. margin：水平左右對齊
    http://tncomu10601.ugm.com.tw/css/margin_align.html 
    <!DOCTYPE html>
<html lang="en">
  <head>
  	<meta charset="UTF-8">
  	<title>margin_左右對齊</title>
    <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      .container{
        width: 70%;
        height: 1000px;
        margin: 0 auto;
        background-color: #A62626;
      }
    </style>
  </head>
  <body>
    <div class="container"></div> 
  </body>
</html>

     

  2. position_左右對齊 
    <!DOCTYPE html>
<html lang="en">
  <head>
  	<meta charset="UTF-8">
  	<title>position_左右對齊</title>
    <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      /**/
      .container{
        width: 70%;
        height: 1000px;
        background-color: red;
        position: absolute;
        left:0px;
      }
    </style>
  </head>
  <body>
    <div class="container"></div> 
  </body>
</html>

     

  3. float_左右對齊 
    <!DOCTYPE html>
<html lang="en">
  <head>
  	<meta charset="UTF-8">
  	<title>float_左右對齊</title>
    <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      /**/
      .container{
        width: 70%;
        height: 1000px;
        background-color: red;
        float: right;
      }
    </style>
  </head>
  <body>
    <div class="container"></div> 
  </body>
</html>

     

  4.  

網頁設計與雲端應用

8. 網站佈局

  1. 自定義盒子模形：內容(content)->留白(padding)->框線(border)->邊距(margin)
    7-1.html
    這個網頁引入一個外部的樣式表 css/style7.css
    因此我們必須在 7-1.html 這個檔案位置底下的「css」資料夾 建立一個外部樣式表檔案 style7.css (相對路徑) 
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/style7.css">
	<title>練習7-1 自定義盒子模式</title>
</head>
<body>
	<div class="container">
		<div class="bd">
			<div class="pd">
				<div class="content">
					練習7-1 自定義盒子模式
				</div>
			</div>
		</div>
	</div>
</body>
</html>

    css/style7.css
     

    body{
	margin: 0;	
}
.container{
	width: 500px;
	height: 200px;
	background-color: #1E0CB9;
	padding: 20px;
}
.bd{
	border: solid 20px #D82323;
	background-color: #15DF27;
}

.pd{
	background-color: #EFE41B;
	padding: 20px;

}
.content{
	background-color: #fff;
	height: 100px;
	padding: 10px;
}

     

  2. 盒子模形的應用

    7-2.html 
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/style7-2.css">
	<title>7-2.html</title>
</head>
<body>
	<div class="head">
		<div class="nav"></div>
	</div>
	<div class="body">
		<div class="slider">
			
		</div>
		<div class="content">
			
		</div>
		<div class="footer">
			<div class="footer-content"></div>
			<div class="footer-nav"></div>
		</div>
	</div>
</body>
</html>
    style7-2.css 
    *{
	margin: 0;
	padding: 0;
}
.head{
	height: 50px;
	background-color: #000;
}
.nav{
	width: 75%;
	height: 50px;
	margin: 0 auto;
	background-color: #0000FF;

}
.body{
	/*background-color: #82EED9;*/
}
.slider{
	width: 75%;
	margin: 0 auto;
	height: 300px;
	background-color: #FFFF00;
}

     

  3. 上圖是根據本網站，所建立的html架構，請用網頁表現出來
    7-2.html
    style-72.css

網頁設計與雲端應用

9. Bootstrap介紹與安裝

  1. 響應式網頁介紹
    簡單來說，響應式網頁就是一個網頁可以在不同的載具上呈現，早期網頁同時要制作不同的版本，如手機版、電腦版，如今只要制作一個即可。
    優點：
    1. 開發成本與時間比APP低
    2. 不需下載APP就能使用
    3. 維護成本比APP低
    4. 符合使用者習慣
    5. 利於SEO(搜尋引擎最佳化)

    缺點：
    1. 舊版瀏覽器不支援
    2. 小尺寸螢幕不適合複雑的功能或介面
    3. 載入速度問題
    4. 不同載具間的瀏覽方式
    5. 開發時間較長
  2. 認識Viewport
    Viewport的作用是告訴瀏覽器，目前裝置有多寬或多高，以讓訪客在透過不同的裝置瀏覽網站時，作為縮放的基準比例 
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

    width：使用device-width(裝置寬度)作為可視區域的寬度。
    initial-scale：初始比例，用1表示100%，範圍從0.1~1可任填。
     maximum-scale=1.0
    minimum-scale：最小可以縮放到0.8比例
    maximum-scale：最大可以縮放到2.0比例
    user-scalable：是否允許縮放，1 或 0 (yes 或 no)

  3. 何謂bootstrap
    Bootstrap原名Twitter Blueprint，由Twitter的Mark Otto和Jacob Thornton編寫，本意是製作一套可以保持一致性的工具和框架。
    官網：http://getbootstrap.com/
    正體中文：https://kkbruce.tw/bs3
    簡體中文：http://www.bootcss.com/

網頁設計與雲端應用

9-1 BOOTSTRAP安裝

一、安裝：

  1. 下載：http://v3.bootcss.com/getting-started/#download
  2. 將檔案下載至「github/site」底下
  3. 解壓縮，並修改資料夾名稱「bootstrap-3.3.7-dist => web」
  4. web底下有 css、fonts、js 三個資料夾
  5. 複製「基本模版」存檔至 web/index.html
  6. 將語言改為<html lang="zh-Hant-TW">
  7. X-UA-Compatible用來指定IE瀏覽器的渲染模式 ，不分大小寫，必須用在 head 中，必須在除 title 外的其他 meta 之前使用。IE=edge指定IE用最新的渲染模式解析頁面。
  8. 如果網頁需要在離線使用，建議將「jquery」下載，並移至上面<head></head>
  9. 範例：http://tncomu10601.ugm.com.tw/web/

二、容器：

  1. 「.container」最大寬度為1170px左右；「.container-fluid」則是滿版容器。
  2. 練習 
        <!-- 自訂樣式表 -->
    <link rel="stylesheet" type="text/css" href="css/style.css">

    當然這時我們必須在 css/ 底下建立一個 style.css 的樣式表

    在index.html

        <div></div>
    <div class="container"></div>
    <div class="container-fluid"></div>

    由於三個「div」都沒有內容，所以我們需指定它們的寬、高、背景，這樣才有辦法顯示在瀏覽器上

  3. css的使用方式有
    行內套用 (Inline) => <div style="....;....;"> </div>
    嵌入套用 (Embed) => <style> ...... </style>
    外部連接套用 (External Link) => <link rel="stylesheet" type="text/css" href="style.css">
  4. 範例 
    <div style="height: 100px;background-color: #1312B5"></div>

    css/style.css
     

    .container{
	height: 100px;
	background-color: #4BDC55;
}
.container-fluid{
	height: 100px;
	background-color: #E01FCF;
}
  6. bootstrap 已經幫我們建立了許多css的class，所以我們只要知道如何使用即可，網頁設計是不是愈來愈簡單！
    css/style.css的位置是擺在後面，所以它的優先順序比較高

網頁設計與雲端應用

9-2 格線系統

一、工作原理

  1. 頁面由row(列)、column(欄)所組成，資料放在由row、column所組成的框框裡

  2. 一列數據(row)必須包含在 .container(固定) 或 .container-fluid(滿版) 中，以便為其賦予合適的對齊方式與留白(padding)
  3. 使用 row，在水平方向創建 column
  4. column用來放置「具體的內容」，且只它可以作為 row 的直接子元素
  5. 格線系統：將畫面分成12格（等份），透過列 (row) 與欄 (column) 的組合建立頁面佈局。
      超小屏幕 手機(<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） 是
    列排序 是
  6. 練習 
        <div class="container">
      <div class="row">
        <div class="col-md-3"><h2>HTML</h2></div>
        <div class="col-md-3"><h2>CSS</h2></div>
        <div class="col-md-3"><h2>JS</h2></div>
        <div class="col-md-3"><h2>BOOTSTRAP</h2></div>
      </div>
    </div>

二、Media Queries的分段點

  1. 手機 – xs ( < 768px )
  2. 平板 – sm ( 768~991px )
  3. 桌機 – md ( 992~1200px )
  4. 大螢幕 - lg ( >= 1200px )

三、常用

  1. 超過12欄，則會在下方另起一列
  2. 只要是放在col-xx中，就一定會有所謂的gutter（欄和欄之間的間距）
  3. Bootstrap將<body>和所有段落元素的font-size預設為 14px，line-height預設為 1.428。<p>元素的margin-bottom預設了 1/2 行高（即 10px）
  4. 段落中內容對齊：.text-left（靠左對齊）；.text-center（置中對齊）；.text-right（靠右對齊）；.text-justify（分散對齊）；.text-nowrap（不換行）
  5. 向左浮動是.pull-left；向右浮動是.pull-right；要清除浮動則用.clearfix
  6. 顯示某元件可套用.show，隱藏某元件則用.hidden

網頁設計與雲端應用

10. Bootstrap樣式

一、排版：範例 http://tncomu10601.ugm.com.tw/web/9-1.html

  1. 對齊： 
    <!-- 靠左對齊，預設值 -->
<p class="text-left">Left aligned text.</p>
<!-- 置中對齊 -->
<p class="text-center">Center aligned text.</p>
<!-- 靠右對齊 -->
<p class="text-right">Right aligned text.</p>
<!-- 分散對齊 -->
<p class="text-justify">Justified text.</p>
<!-- 不換行 -->
<p class="text-nowrap">No wrap text.</p>
    表格 
    <table class="table table-bordered">
<tr>
<td class="text-center">text-center</td>
<td class="text-left">text-left</td>
<td class="text-right">text-right</td>
<td class="text-justify">text-justify</td>
<td class="text-nowrap">text-nowrap</td>
</tr>
</table>

     

  2. 背景 
    <div class="bg-primary">bg-primary</div>
<div class="bg-success">bg-success</div>
<div class="bg-info">bg-info</div>
<div class="bg-warning">bg-warning</div>
<div class="bg-danger">bg-danger</div>

     

二、表格

  1. 為任意 <table> 標籤添加 .table 類可以為其賦予基本的樣式—少量的內補（padding）和水平方向的分隔線。
  2. 條紋狀表格：通過 .table-striped 類可以給 <tbody> 之內的每一行增加斑馬條紋樣式。
  3. 帶邊框的表格：添加 .table-bordered 類為表格和其中的每個單元格增加邊框。
  4. 狀態類
    Class 描述
    .active 鼠標懸停在行或單元格上時所設置的顏色
    .success 標識成功或積極的動作
    .info 標識普通的提示信息或動作
    .warning 標識警告或需要用戶注意
    .danger 標識危險或潛在的帶來負面影響的動作
  5. 響應式表格
    將任何 .table 元素包裹在 .table-responsive 元素內，即可創建響應式表格，其會在小屏幕設備上（小於768px）水平滾動。當屏幕大於768px寬度時，水平滾動條消失。

三、響應式圖片

  1. 在Bootstrap版本3中，通過為圖片添加 .img-responsive 類可以讓圖片支持響應式佈局。其實質是為圖片設置了 max-width: 100%; 、 height: auto; 和 display: block; 屬性，從而讓圖片在其父元素中更好的縮放。

  2. 如果需要讓使用了 .img-responsive 類的圖片水平居中，請使用 .center-block 類，不要用 .text-center 。請參考助手類章節了解更多關於 .center-block 的用法。

  3. 範例 
    <img src="..." class="img-responsive" alt="Responsive image">
  4. 圖片型狀 
    <img src="..." alt="圓角" class="img-rounded">
<img src="..." alt="圓形" class="img-circle">
<img src="..." alt="縮圖" class="img-thumbnail">

四、情境文本顏色

  1. 範例 
    <p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

五、按鈕：http://tncomu10601.ugm.com.tw/web/9-5-1.html

  1. 預定義樣式 
    <!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

     

  2. 尺吋：需要讓按鈕具有不同尺寸嗎？使用.btn-lg、.btn-sm或.btn-xs就可以獲得不同尺寸的按鈕。 
    <p>
  <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
  <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
  <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
  <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>
  3. 通過給按鈕添加.btn-block類可以將其拉伸至父元素100%的寬度，而且按鈕也變為了塊級（block）元素。

網頁設計與雲端應用

11. 設計Google雲互動表單

一、輕鬆的建立互動表單

  1. 登入gmail
  2. 啟動 雲端硬碟(google drive)
  3. 移至表單存放目錄
  4. 「新增/google表單」
  5. 問卷「標題」「說明」：台南社大網頁設計期中聚餐調查 、星期六用晚上時間、星期日用早午餐時間
  6. 問題：
    姓名(簡答)
    電話(簡答)
    email(簡答)：回應驗證=> 文字：電子郵件地址
    是否願意參加(單選)：是、否
    日期(核取方塊)：說明=>可以複選，星期六用晚上時間、星期日用早午餐時間 , 2017-05-20(六)、2017-05-21(日)、2017-05-27(六)、2017-05-28(日)、其他
    推廌餐廰(段落)：說明=>請填店名，請簡述推廌理由
  7. 建立試算表：回覆
  8. 改變外觀：調色盤
  9. 預覽表單
  10. 設定：收集電子郵件地址、需要登入、在提交後進行編輯
  11. 傳送表單

二、將表單嵌入至網頁

  1. 使用bootstrap容器，放置嵌入碼
  2. 將寬度改成響應式，並調整適合高度 
    <!DOCTYPE html>
<html lang="zh-Hant-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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 自訂樣式表 -->
    <link rel="stylesheet" type="text/css" href="css/style.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <style type="text/css">
      
    </style>
  </head>
  <body>
    <div class="container">
      <h1>台南社大網頁設計期中聚餐調查</h1>
      <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdy8tcdkLy2pQhrNYfEUOintb7f042rZm1Re3FYqzuypuYX0g/viewform?embedded=true" style="width:100%;height:1700px;" frameborder="0" marginheight="0" marginwidth="0">載入中…</iframe>
      
    </div>



    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

     

三、將Google雲的資料權限設定

  1. 開啟「網頁設計班期中聚餐調查表 (回應)」：這是表單接收資料的地方
  2. 請按「共用」=> 選擇「進階」
  3. 變更「擁有存取權的使用者」=> 公開在網路上
  4. 「檔案/發佈到網路」=> 選擇「內嵌」、「工作表」
  5. 取得嵌入碼
  6. 使用bootstrap容器，放置嵌入碼
  7. 將寬度改成響應式，並調整適合高度

網頁設計與雲端應用

12. Bootstrap組件

無數可複用的組件，包括

一、Glyphicons 字體圖標

  1. 不要和其他組件混合使用
    圖標類不能和其它組件直接聯合使用。它們不能在同一個元素上與其他類共同存在。應該創建一個嵌套的<span>標籤，並將圖標類應用到這個<span>標籤上。
  2. 只對內容為空的元素起作用
    圖標類只能應用在不包含任何文本內容或子元素的元素上。
  3. 實例 
    <button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
  4. alert組件中所包含的圖標是用來表示這是一條錯誤消息的，通過添加額外的 .sr-only 文本就可以讓輔助設備知道這條提示所要表達的意思了。 
    <div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

二、下拉菜單

  1. 將下拉菜單觸發器和下拉菜單都包裹在.dropdown裡，或者另一個聲明了position: relative;的元素。然後加入組成菜單的HTML代碼。
  2. 實例 
    <div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
  3. 向上：通過為下拉菜單的父元素設置.dropup類，可以讓菜單向上彈出（默認是向下彈出的）。 
        <div class="container" style="margin-top:400px;">
      <div class="dropup">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropup
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div>
    </div>

     

三、導航

  1. 標籤頁 
    <ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>
  2. 膠囊式標籤頁：nav-pills 
    <ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

    膠囊是標籤頁也是可以垂直方向堆疊排列的。只需添加.nav-stacked類。
     

    <ul class="nav nav-pills nav-stacked">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

     

四、導航條

  1. 實例：http://site.ugm.twgg.org/web/11-1.html 
    <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- 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" aria-expanded="false">
        <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="#">Brand</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">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

     

五、縮略圖

  1. 實例：http://tncomu10601.ugm.com.tw/web/11-5.html 
    假圖：https://fakeimg.pl/ 
        
      <div class="bs-example" data-example-id="thumbnails-with-custom-content">
        <div class="row">
          <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
              <img src="http://fakeimg.pl/800x600/">
              <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/">
              <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/">
              <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>
      </div>

     

六、警告框

  1. 實例 
    <div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
  2. 可關閉的警告框
    為警告框添加一個可選的.alert-dismissible類和一個關閉按鈕。 
    <div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

七、面板

  1. 基本實例
    默認的 .panel 組件所做的只是設置基本的邊框（border）和內補（padding）來包含內容。 
    <div class="panel panel-default">
  <div class="panel-body">
    基本實例
  </div>
</div>
  2. 帶標題的面板

    通過 .panel-heading 可以很簡單地為面板加入一個標題容器。你也可以通過添加設置了 .panel-title 類的 <h1> -  <h6> 標籤，添加一個預定義樣式的標題。不過， <h1> -  <h6> 標籤的字體大小將被 .panel-heading 的樣式所覆蓋。

    為了給鏈接設置合適的顏色，務必將鏈接放到帶有 .panel-title 類的標題標籤內。

    <div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    面板內容
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">面板標題</h3>
  </div>
  <div class="panel-body">
    面板內容
  </div>
</div>

     

網頁設計與雲端應用

13. Bootstrap插件

一、下拉選單

  1. 源文件：dropdown.js、dropdowns.less，css文件：bootstrap.css 2985行之後
  2. 一般下拉選單都是在導航列(navbar)、(tal)上實現
  3. 實例：http://tncomu10601.ugm.com.tw/web/12-1.html
  4. 上述代碼，首先navbar 的父容器要應用 「.navbar」的樣式，其次頂級ul塊上要應用「.nav」「.navbar-nav」樣式。「下拉選單3」應用了「navbar-right」，就變成了「向右浮動對齊」
  5. download插件在網頁加載的時候，對所有「data-toggle="dropdown"」的樣式元素進行綁定
  6. 用戶單擊帶有「data-toggle="dropdown"」樣式的鏈接或按鈕，觸發javascript事件代碼
  7. javascript事件代碼在父容器「<li class="dropdown">」上加一個 .open樣式
  8. 默認隱藏的「‧dropdown-menu」選單在外部有了 .open樣式後，即可顯示出來，而達到預期的效果
  9. 「.navbar-fixed-top」固定在上方、「.navbar-fixed-bottom」固定在下方
  10. 教學：https://pjchender.blogspot.tw/2015/04/bootstraptabsnavigation-bar.html

二、滾動監聽

  1. 源文件：scrollspy.js
  2. 滾動監聽(scrollspy)插件是根據滾動位置自動更新導航條中相應的導航項
  3. 指定滾動區：data-spy="scroll"
  4. 指定作用的導航列：data-target=".navbar"
  5. 指定位移px：data-offset="50"
  6. 以上通常是對「body」元素設定：<body data-spy="scroll" data-target=".navbar" data-offset="50">
  7. nav 
      <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
        </button>
        <a class="navbar-brand" href="#">網站標題</a>
      </div>
      <div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li><a href="#section1">區塊 1</a></li>
            <li><a href="#section2">區塊 2</a></li>
            <li><a href="#section3">區塊 3</a></li>
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">區塊 4 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#section41">區塊 4-1</a></li>
                <li><a href="#section42">區塊 4-2</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
  8. 內容 
      <div id="section1" class="container">
    <h1>區塊 1</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
  <div id="section2" class="container">
    <h1>區塊 2</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
  <div id="section3" class="container">
    <h1>區塊 3</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
  <div id="section41" class="container">
    <h1>區塊 4 Submenu 1</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
  <div id="section42" class="container">
    <h1>區塊 4 Submenu 2</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
  9. css 
      <style>
    body {
        position: relative; 
    }
    #section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
    #section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
    #section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
    #section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
    #section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
  </style>
  10. 實例：http://tncomu10601.ugm.com.tw/web/12-2.html

三、標籤頁

  1. 源文件：tab.js
  2. 標籤頁是我們常用的功能，單擊一個標籤，下面就顯示對應的標籤頁面
  3. 添加data-toggle="tab"到每個選項卡，並添加一個.tab-pane類為每個標籤的唯一ID，並在將它們包裝.tab-content類。
  4. 代碼： 
        <div class="container">
      <h2>標籤頁</h2>
      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
        <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
        <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
        <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
      </ul>

      <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
          <h3>HOME</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div id="menu1" class="tab-pane fade">
          <h3>Menu 1</h3>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <div id="menu2" class="tab-pane fade">
          <h3>Menu 2</h3>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
        </div>
        <div id="menu3" class="tab-pane fade">
          <h3>Menu 3</h3>
          <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
        </div>
      </div>
    </div>
  5. 實例：http://tncomu10601.ugm.com.tw/web/12-3.html

四、工具提示

  1. 文源件：tooltip.js
  2. 提示框(tooltip)也是一個比較常見的功能，一般來說是鼠標移到特定的元素上時，顯示相關的提示語
  3. 該data-toggle="tooltip"激活提示。
  4. 該title屬性指定要在工具提示中顯示的文本。
  5. 提示不僅是CSS-插件，因此必須用jQuery初始化：選擇指定的元素並調用tooltip()方法。
  6. 代碼 
        <div class="container">
      <h3>Tooltip Example</h3>
      <p>Tooltips are not CSS-only plugins, and must therefore be initialized with jQuery: select the specified element and call the tooltip() method.</p>
      <a href="#" data-toggle="tooltip" title="Hooray!" class="tool_tip">Hover over me</a>
      
      <h3>工具提示範例2</h3>
      <p>Tooltips are not CSS-only plugins, and must therefore be initialized with jQuery: select the specified element and call the tooltip() method.</p>
      <a href="#" data-toggle="tooltip" title="工具提示範例2!" class="tool_tip">Hover over me</a>
    </div>

    <script>
    $(document).ready(function(){
        $('.tool_tip').tooltip();   
    });
    </script>
  7. 實例：http://tncomu10601.ugm.com.tw/web/12-4.html

五、折疊：http://tncomu10601.ugm.com.tw/web/12-5.html

  1. 手風琴 
    <div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        Collapsible Group 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Collapsible Group 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
        Collapsible Group 3</a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
</div>

     

六、更多範例參考：https://www.w3schools.com/bootstrap/default.asp

網頁設計與雲端應用

13-1 modal 模態彈窗

請參考：http://bootstrap.ugm.com.tw/modal.html

網頁設計與雲端應用

14. Bootstrap免費樣板

當您懂得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 頁面轉向 
    <!DOCTYPE html>
<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.)

  1. 引入：注意(jquery.backstretch.min.js)檔案位置 
    <script src="js/backstretch/jquery.backstretch.min.js"></script>
  2. 調用插件，指定的類別、ID 必須有寬度、高度 
    <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

網頁設計與雲端應用

15. 網頁優化提升網站搜尋排名

一、網頁應該注意事項

  1. 網頁標題：例 商品 商品類別 網站名稱
    http://bootstrap.ugm.com.tw/modal.html 
    <title>modal 模態彈窗 bootstrap 育將電腦工作室</title>
  2. 設定META 
    <meta name="author" content="作者名稱">
<meta name="copyright" content="版權所有人名稱">

    例：https://www.hsin-hc.com
    keywords：搜尋關鍵字，思考方向，訪客會用什麼「關鍵字」來搜尋網站
    description：當網站被搜尋出來時，在網頁出現的描述 
    <meta name="keywords" content="肉乾,肉鬆,肉脯,豬肉乾,豬肉鬆,魚鬆,魚脯,杏仁肉乾,乾貨零嘴,臘味肉品,贈品禮盒,馨香珍,香腸">
<meta name="description" content="馨香珍肉鬆肉乾專賣店，訂購專線(日)06-595-8300、(夜)06-213-7301(行動)0916-055028、0970-426206，台南市關廟區市場內67號">
<meta name="robots" content="index,follow">
<meta name="rating" content="general">
<meta name="author" content="育將電腦工作室">
<meta name="generator" content="XOOPS">
    例：香純豬肉鬆

     
  3. Favicon：
    如果沒有它，網站就會返回 404 Not Found 
    <!-- Favicon -->
<link rel="shortcut icon" type="image/ico" href="https://www.jinghung.com/themes/u_jinghung/icon/favicon.ico">
<link rel="icon" type="image/png" href="https://www.jinghung.com/themes/u_jinghung/icon/favicon.png">

     

  4. 設定OG
    清除快取： Facebook Debugger 
    <meta property="og:title" content="網站名稱或標題" >
<meta property="og:url" content="網址">
<meta property="og:image" content="要顯示的縮圖網址">
<meta property="og:description" content="網頁描述" >

     

二、做好網頁優化提升網站搜尋排名

  1. 每頁只有一個h1，其他依重要性給予h2、h3、......
  2. 適當的文字敘述，對應meta keywords
  3. 圖片記得加 alt 屬性

三、善用Google的網站管理工具：Search Console

  1. Search Console 網址：https://www.google.com/webmasters/tools/home?hl=zh-TW
  2. Google Search Console 以前的名稱是 Google Webmaster（網站管理工具），是 Google開發的 免費SEO工具
  3. 安裝
    輸入網址=>「新增內容」

    下載驗證檔=>上傳至網站根目錄=>確認檔案=>「驗證」

    下載檔案至「本地端專案根目錄」

    上傳

    驗證

    驗證成功

 

網頁設計與雲端應用

16. Google流量分析

一、前言：Google分析本身可以提供訪客瀏覽人次、網頁瀏覽人次、用戶的瀏覽器、作業系統、螢幕解析度、網站熱門文章、熱門關鍵字、訪客來自於何處等等資料，十分的詳細，而且這些資料都是儲存在Google伺服器，不用擔心自己網站掛了資料不見，也不必擔心統計這些資料會讓資料庫爆掉喔！

二、註冊：https://analytics.google.com/analytics/web/provision/?authuser=0#provision/SignUp/

  1. 帳戶名稱：台南社大10601
  2. 網站名稱：網頁設計與雲端應用
  3. 網址：http://tncomu10601.ugm.com.tw/
  4. 產業類別：職業和教育
  5. 報表時區：(GMT+08:00) 台北

三、取得網站追蹤程式碼

  1. 將取得程式碼，貼在每頁 </body>之前
  2. 記得每頁都需要
  3. 上傳至網站
  4. 請用「右鍵/檢查」，看追蹤碼是否已在網頁上

四、觀看流量來源

  1. 「報表/即時/流量來源」
  2. 連結「Search Console」：可以放上追蹤碼後，執行「連結所有產品」
  3. 找到「Search Console」：按「連結Search Console」，由於我們已放上追蹤碼，代表我們有網站的所有權，因此直接「驗證」即可

網頁設計與雲端應用

17. Google地圖、影音套件

一、嵌入Google地圖

  1. 網址：maps.google.com
  2. 輸入搜尋地點的關鍵字、地址.....：台南市大成國中
  3. 「分享/嵌入地圖/自訂大小/1170 x 300」
  4. 得到嵌入碼 
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3673.221962794082!2d120.19572831442864!3d22.978863984975167!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x346e75d66763542d%3A0x75457923247277f7!2z6Ie65Y2X5biC56uL5aSn5oiQ5ZyL5rCR5Lit5a24!5e0!3m2!1szh-TW!2stw!4v1498002096290" width="1170" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>

     

  5. 修改css 
    style="width:100%;height:300px;"
  6. new-age/index.html 
    
                    <li>
                        <a class="page-scroll" href="#maps">電子地圖</a>
                    </li>
    
    <!-- 電子地圖 -->
    <section id="maps" class="maps">
      <div class="container">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3673.221962794082!2d120.19572831442864!3d22.978863984975167!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x346e75d66763542d%3A0x75457923247277f7!2z6Ie65Y2X5biC56uL5aSn5oiQ5ZyL5rCR5Lit5a24!5e0!3m2!1szh-TW!2stw!4v1498002577802" style="width:100%;height:300px;" frameborder="0" style="border:0" allowfullscreen></iframe>
      </div>
    </section>
    new-agenew-age/css/new-age.css 
    
/* ugm */
.maps{  
  background: url("../img/bg-pattern.png"), #7b4397;
  /* fallback for old browsers */
  background: url("../img/bg-pattern.png"), -webkit-linear-gradient(to left, #7b4397, #dc2430);
  /* Chrome 10-25, Safari 5.1-6 */
  background: url("../img/bg-pattern.png"), linear-gradient(to left, #7b4397, #dc2430);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

     

二、將影音放上Youtube，再嵌入網站

  1. 網址：https://www.youtube.com/
  2. 搜尋「育將電腦工作室」，找到「台南社大-網頁設計-整體觀念20170509」
  3. 「分享/嵌入」
  4. 接下來與嵌入地圖同

三、google日曆

  1. 網址：https://calendar.google.com/
  2. 建立日曆
  3. 設定日曆、共用日曆
  4. 得到嵌入碼，接下來與嵌入地圖同

 

網頁設計與雲端應用

18. 臉書粉絲專頁

一、成立臉書粉絲專頁

粉絲專頁可協助企業、品牌、組織及公眾人物分享動態，與用戶連結。如同個人檔案一樣，您可以自訂粉絲專頁的動態和活動等內容。對粉絲專頁按讚或加以追蹤的用戶會在動態消息中收到該專頁的更新內容。

若要建立粉絲專頁：

  1. 前往 facebook.com/pages/create
  2. 點擊選擇粉絲專頁類別
  3. 從下拉式功能表選擇更明確的類別，並填寫所需資訊
  4. 點擊立即開始並按照螢幕上的指示操作

二、美化粉絲頁

  1. 大圖下載：https://unsplash.com/
  2. 線上圖片：https://unsplash.it/
  3. 更換封面
  4. 更換大頭照
  5. 新增簡短說明
  6. 為你的粉絲專頁建立用戶名稱
    粉絲專頁網址：fb.me/用戶名稱
    粉絲專頁訊息：m.me/用戶名稱
  7. 連結到網站或應用程式

網頁設計與雲端應用

19. 網站與社群網站連接

一、申請 Facebook APP ID

  1. 必須先有一個Facebook帳號
  2. Facebook Developer 開發者中心：https://developers.facebook.com/
  3. 註冊 Facebook APP 帳號
  4. 新增聯絡電話，取得簡訊，確認碼
  5. 成為FACEBOOK 開發人員

     
  6. 發布應用程式

二、社交外掛程式：https://developers.facebook.com/docs/plugins/like-button

  1. 臉書「讚」按鈕連結：讓網站的使用者可以利用「讚」連結與網站互動
  2. 臉書「粉絲專頁外掛程式」：連結粉絲專頁，加強網站的行銷
  3. 臉書「粉絲專頁訊息」：做為網站的客服系統
    FontAwesome：http://fontawesome.io/ 
    
  <!-- Facebook 客服 -->
  <style type="text/css">
    
    .fab-fixed-wrap {
      position: fixed;
      z-index: 1045;
      right: 30px;
      bottom: 30px;
    }
    .fa {
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .fab {
        font-size: 32px;
        display: block;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        color: #fff;
        background-color: #e89a3e;
        text-align: center;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 1px rgba(0,0,0,0.175);
        text-decoration: none;
        line-height: 50px;
        opacity: 0.8;
    }
    .fab-facebook {
      background-color: #e8ac3e;
    }
    .fab-facebook:hover, .fab-facebook:focus, .fab-facebook:active {
      outline: 0; opacity: 0.6; color: #eee;
    }

  </style>
  <div class="fab-fixed-wrap">
      <a href="https://www.messenger.com/t/tw.ugm" target="_blank" class="fab fab-facebook" title="Facebook 客服">
      <span class="h2">
        <span class="fa fa-comments-o"></span>
      </span>
    </a>
  </div>
  4. 完成一個行銷網站，有商品介紹、聯絡我們、關於我們、Google地圖、Youtube影音、同時也可接單(小型購物車)

網頁設計與雲端應用

20. 線上資源

  1. codepen：以後若是有問題，可將語法傳至這裡
  2. chrome擴充套件：ColorPick Eyedropper 顏色擷取器
  3. 大圖下載：https://unsplash.com/
  4. 線上假圖：https://fakeimg.pl/
  5. FASTSTONE：http://www.faststone.org
  6. 線上QR CODE：http://www.quickmark.com.tw/cht/qrcode-datamatrix-generator/default.asp?qrLink
  7. 線上圖片編輯：https://pixlr.com/editor/
  8. 免費去背：https://burner.bonanza.com/
  9. 背景產生器：https://testdrive-archive.azurewebsites.net/graphics/cssgradientbackgroundmaker/
  10. 按鈕產生器：https://dabuttonfactory.com/
  11. Favicon Generator：http://realfavicongenerator.net/