Microsoft Word - 126期教材教法-網頁Transform.docx

Size: px

Start display at page:

Download "Microsoft Word - 126期教材教法-網頁Transform.docx"

甯赏杜
5 years ago
Views:

1 計算機概論 [ 網頁設計 :CSS3 變形與動畫 ] 教材教法壹前言台北市立松山家商資料處理科教師張美雀從網路上獲取知識已成為現代人求取知識的一種習慣, 網頁設計亦成為電腦資訊領域的重要發展之一良好的網頁設計除了要能正確傳達資訊, 更要利用圖片影音及良好的操作介面來吸引使用者 HTML5 網頁設計, 相較於傳統的 HTML 的網頁設計來說, 主要是在網頁內容呈現的強化 HTML5 網頁設計的架構在於 HTML5 + javascript + CSS3, 藉由前面三者的結合, 提供網頁設計應該更多的可能而 CSS3 transform 屬性的功能提供了網頁設計中對於網頁元素 (element) 變形特效的突破, 透過 CSS3 transform 屬性, 網頁設計師可以很輕易的讓網頁元素 (element) 呈現出 2D 旋轉 (rotate) 縮放(scale) 移動(move) 以及傾斜 (skew) 的特殊效果本次課程規劃是透過 CSS3 的變形來製作網頁上的 2D 特效及動畫, 捨棄以往利用 Flash 製作動畫的方式讓傳統網頁設計中, 需要透過繪圖軟體才能達到的效果, 透過 CSS3 transform 屬性快速達成貳教學方案科目名稱單元細分教學時數網頁設計單元名稱 CSS 樣式 CSS3 2D 變形及動畫編擬教師張美雀 1 節課 (50 分鐘 ) 教學年級二年級教材來源 1. W3C school 網站 2. HTML5&CSS3 辭典 ( 碁峰 ) 教學場地電腦教室教材研究透過 CSS3 的變形及動畫來製作網頁上的特效及動畫讓傳統網頁設計中, 需要透過繪圖軟體才能達到的效果, 透過 CSS3 transform 屬性快速達成各種變形特效

2 教學方法教學資源單元目標教學目標學生學習條件分析法問答法實作示範 ( 電腦廣播教學 ) 電腦廣播系統白板建立網頁, 透過 CSS3 transform 屬性, 網頁設計師可以很輕易的讓網頁元素呈現出旋轉縮放移動以及傾斜的特殊效果, 並透過設定 transform-origin 更改 2D 變形的基礎點位置, 以產生不同動畫效果熟悉 CSS3 transform 屬性設定方式因應不同特效, 能更改 transform-origin 以產生不同效果一學生需具備 HTML5 及 CSS3 的基礎知識二學生需具備 Box Model 盒模型的基本知識三學生需已熟悉 DreamWeaver 的操作方式四學生需熟悉 CSS 的語法設定方式教學活動教師活動 ( 教學內容描述 ) 學生活動教具時間 ( 分 ) 教學方法成果評量一準備活動紙筆 5 等文 1. 擬定教學目標具 2. 蒐集相關資料準備教材置放好 3. 編寫教案個人物 4. 將教材電子檔上傳至網路品供學生下載查看依座位表就坐二發展活動教學 2-1. 開啓課程內容 PDF 檔下載課廣播 2 程 PDF 系統 2-2. 說明 transform 函數效果 3 白板 [ 移動 ] translate(x 軸方向的距離,Y 軸方向

3 的距離 ) translatex(x 軸方向的距離 ) translatey(y 軸方向的距離 ) [ 放大及縮小 ] scale(x 軸方向的倍率,Y 軸方向的倍率 ) scalex(x 軸方向的倍率 ) scaley(y 軸方向的倍率 ) [ 旋轉 ] rotate( 角度 ) [ 傾斜 ] skewx(x 軸方向的角度 ) skewy(y 軸方向的角度 ) [ 變形矩陣 ] matrix(a, b, c, d, tx, ty) 2-3. 示範 transform 函數效果教學 5 示範操作廣播操作完成建立一個新的檔案 test.html DW, 建系統 test.html 為 html5 格式, 並加入立新檔檔案製作 DIV,CSS 樣式名稱 test.htm 白板為.box, 並設置寬高及底 l 色, 作為 transform 示範可使用.box { background-color: #F93; 問答 height: 100px; 設定 width: 100px;} CSS 示範

軸 200PX 的位移練習不完成同示範 transform 2-5. 依上列步驟, 修改 CSS 內容.

4 2-4. 在滑鼠滑入 DIV 的時候, 5 我們執行變形動作, 因此我教學們需要設定 CSS 如下廣播.box:hover{ 系統 transform:translatex(200px) } 白板完成如下圖正常情形滑鼠移入後的變形效果產生 X 軸 200PX 的位移練習不完成同示範 transform 2-5. 依上列步驟, 修改 CSS 內容.box:hover{transform:**} 依序示範移動效果放大及縮小旋轉傾斜變形矩陣 transfor m 特效, 自行練習修改 CSS 教學廣播系統白板 3 示範問答特效實作練習網頁變形矩陣的操作, 並將變形

2-6. 參考變形矩陣的使用方式練習網 2 矩陣結果 http://www.eion.com.tw/blo 頁上變套用到 gger/?pid=1168 形矩陣 test.html 讓學生清楚知道變形矩陣的設定檔案中設定後的結果方式 2-7.

5 2-6. 參考變形矩陣的使用方式練習網 2 矩陣結果頁上變套用到 gger/?pid=1168 形矩陣 test.html 讓學生清楚知道變形矩陣的設定檔案中設定後的結果方式 2-7. 示範設定不同 2D 變形的練習設 3 基礎點位置說明定基礎實作 transform-origin 屬性點位置示範 ( 範例檔案, 參見下列課程內容之程式 ) 三變形效果應用 20 利用變形效果, 使用 5 張撲克學生依教學完成牌圖片, 使之開放與收合教師示廣播 poker.html 範實作系統示範撲克牌變實作形效果白板需於課前先準備好 5 張撲克牌圖片供學生下載使用 3-1. 建立 poker.html 3-2. 建立 div 並置入 5 張圖片 3-3. 設定.outsidebox 的 CSS 3-4. 設定.box 的 CSS 3-5. 分別設定 5 張圖片的 CSS 3-6. 設定變形特效, 滑鼠滑入 outsidebox 時產生變形, 將 5 張撲克牌收合 2 完成作業四作業上傳上傳

參課程教材內容 [transform 變形效果介紹 ] 使用 transform 屬性可以對元素盒子套用 2D 或 3D 的變形效果 2D 變形效果主要是橫向 (X 軸 ) 和縱向 (Y 軸 ) 的效果, 包括移動放大縮小旋轉傾斜的變形效果如果要套用多種效果, 要在各變形函數之間加入半形的空白例如 :transform:rotate(45deg)

6 參課程教材內容 [transform 變形效果介紹 ] 使用 transform 屬性可以對元素盒子套用 2D 或 3D 的變形效果 2D 變形效果主要是橫向 (X 軸 ) 和縱向 (Y 軸 ) 的效果, 包括移動放大縮小旋轉傾斜的變形效果如果要套用多種效果, 要在各變形函數之間加入半形的空白例如 :transform:rotate(45deg) translatex(200px); 表示同時套用旋轉 45 度, 及產生位移 X 軸 200px 變形基準點是區塊的中心 (50%,50%), 如需改變基準點, 要透過設定 transform-origin 改變之 [CSS3 transform-origin 屬性 ] CSS3 transform-origin 是個用來與 transform 搭配的屬性, 可以用來定義 " 有設定 transform 屬性的網頁元素 " 的旋轉基礎點位置, 另外一種說法是用來改變其旋轉基礎點的位置, 因為 transform 屬性預設的旋轉基礎點位置並不一定能滿足設計師的要求, 所以 CSS3 推出了 transform-origin 屬性來搭配, 讓網頁設計師能夠輕易的調整要在哪個地方旋轉, 為了要達到這樣的功能, 所以 CSS3 transform-origin 屬性可以設定 X 軸 Y 軸的旋轉位置, 甚至連 Z 軸的旋轉位置都能設定, 換言之,CSS3 transform-origin 屬性可以處理 2D 與 3D 的效果以下為設定 2D 變形的基礎點位置, 我們只需使用 X 軸 Y 軸來設定語法 :transform-origin: x 軸 y 軸 ; 請注意 transform-origin 屬性參數的順序, 由左而右分別是 X 軸 Y 軸以及 Z 軸, 可以設定的參數列舉於下 : X 軸方向可以設定 :left, center, right, 長度或百分比 Y 軸方向可以設定 :left, center, right, 長度或百分比

box1{background-color: #F93; transform:rotate(45deg); transform-origin:center;}.box2{transform:rotate(45deg); transform-origin:left; background-color:#c30;}.

7 未設定變形基礎點設定變形基礎分別為 center,left,bottom 修改 transform-origin 屬性範例程式如下 : <!doctype html> <html> <head> <meta charset="utf-8"> <title>transform 變形教學 </title> <style type="text/css">.box {height: 100px; width: 100px;}.box1{background-color: #F93; transform:rotate(45deg); transform-origin:center;}.box2{transform:rotate(45deg); transform-origin:left; background-color:#c30;}.box3{transform:rotate(45deg); transform-origin:bottom; background-color:#3ff;}.outsidebox { position: relative; left: 500px; top: 200px;} </style> </head> <body> <div class="outsidebox"> <div class="box box1">center</div> <div class="box box2">left</div> <div class="box box3">bottom</div> </div> </body> </html>

8 [ 變形效果應用 ] 作業說明 : 利用變形效果, 使用 5 張撲克牌圖片, 使之開放與收合變形效果變形函數移動 translate(x 軸方向的距離,Y 軸方向的距離 ) translatex(x 軸方向的距離 ) translatey(y 軸方向的距離 ) 放大及縮小 scale(x 軸方向的倍率,Y 軸方向的倍率 ) scalex(x 軸方向的倍率 ) scaley(y 軸方向的倍率 ) 旋轉 rotate( 角度 ): 角度可使用 deg( 角度 ) rad( 弧度 ) grad( 百分度 ) 來指定如果使用正的值, 就是以順時針方向旋轉傾斜 skewx(x 軸方向的角度 ) skewy(y 軸方向的角度 ) 變形矩陣 matrix(a, b, c, d, tx, ty) a 縮放 (scale X),b 傾斜 (skew Y),c 傾斜 (skew X),d 縮放 (scale Y),tX 移動 (move X),tY 移動 (move Y) 參考變形矩陣的使用方式作業操作流程 : 1. 建立 6 個 div, 建立最外層的 div,css 樣式為 outsidebox, 並在 outsidebox 中置入 5 個 div, 分別放入 5 張圖片 <body> <div class="outsidebox"> <div class="box box1"><img src="9.jpg" width="96" height="145"></div> <div class="box box2"><img src="10.jpg" width="96" height="145"></div> <div class="box box3"><img src="j.jpg" width="96" height="145"></div> <div class="box box4"><img src="q.jpg" width="96" height="145"></div> <div class="box box5"><img src="k.jpg" width="96" height="145"></div> </div> </body>

9 2. 設定最外層的 div 位置, 不要太靠近邊線, 留位置給展開的撲克牌.outsidebox { position: absolute; left: 50%; top: 50%;} 3. 設定所有撲克牌先重壘在一起.box { display:inline; position: absolute; left: 0%; top: 0%;} 4. 設定每一張撲克牌, 移動及旋轉的角度.box1 {transform:translatex(-20px) rotate(-40deg);}.box2 {transform:translatex(-10px) rotate(-20deg);}.box3 {transform:translatex(0px) rotate(0deg);}.box4 {transform:translatex(10px) rotate(20deg);}.box5 {transform:translatex(20px) rotate(40deg);} 5. 設定將滑鼠放置 DIV 上時, 把撲克牌收合.outsidebox:hover div{transform:translatex(0px) rotate(0deg);} 6. 完成作業, 上傳到網頁伺服器, 提醒學生圖片檔案及 poker.html 要一起傳送肆參考資料 1. wibibi 網頁設計教學百科, A7, 檢索日期 :2017/05/31 2. 漢頡網棧, 檢索日期 :2017/05/31 3. W3Cplus, 檢索日期 :2017/05/31 4. W3schools, 檢索日期 :2017/05/31 5. 彭俊人 ( 民 103) HTML5 & CSS3 辭典第二版出版地 : 台灣碁峰

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05