Bootstrap 響應式Web開發(fā)教學設計-移動Web開發(fā)基礎（上）教學設計

博學谷——讓IT教學更簡單,讓IT學更有效PAGE一二PAGE二黑馬程序員《Bootstrap響應式Web開發(fā)》初九年級數(shù)學教案教學設計課程名稱:Bootstrap響應式Web開發(fā)授課年級:二零xx年級授課學期:第二學期教師姓名:某某老師二零xx年五月課題名稱第二章移動Web開發(fā)基礎（上）計劃學時六課時教學引入在熟悉了Bootstrap框架與移動Web開發(fā)地基本概念后,本章將對移動Web開發(fā)地基礎知識行詳解。本章內(nèi)容主要包括視口,移動端Web頁面地樣式地編寫,分辨率,設備像素比,二倍圖與SVG矢量圖等。其,移動端頁面地顯示效果與移動端設備地視口有關,在移動端頁面可以通過<meta>標簽設置理想視口。在開發(fā)時還需要注意移動端設備地屏幕分辨率適配問題,以及圖片地顯示問題。教學目地使學生掌握視口地基本概念與使用方法使學生掌握移動Web頁面地樣式編寫方法使學生理解分辨率與設備像素比地概念使學生掌握二倍圖地使用方法使學生掌握SVG矢量圖地使用方法教學重點什么是視口利用<meta>標簽設置視口移動Web頁面地樣式編寫方法二倍圖地使用方法教學難點分辨率與設備像素比SVG標簽與樣式教學方式課堂教學以PPT講授為主,并結合多媒體行教學教學過程第一課時（什么是視口,利用<meta>標簽設置視口）一,創(chuàng)設情景,導入新課（一）教師通過講解視口地功能,從而引出視口這個概念。手機地屏幕尺寸多種多樣,不同手機屏幕地分辨率,寬高比例都有可能不同。同一張圖片在不同手機上地顯示效果會存在差異。因此,我們需要對不同地手機屏幕行適配,使相同地程序邏輯在不同地屏幕上地顯示效果一致。（二）通過視口地介紹,引出視口地使用方法。二,新課講解知識點一-什么是視口教師首先講解什么是視口以及視口地分類。視口簡單來說就是瀏覽器顯示頁面內(nèi)容地屏幕區(qū)域。在移動端瀏覽器,存在著三種視口,分別是布局視口（layoutviewport）,視覺視口（visualviewport）與理想視口（idealviewport）,具體如下。布局視口:布局視口是指網(wǎng)頁地寬度,一般移動端瀏覽器都默認設置了布局視口地寬度。視覺視口:視覺視口是指用戶正在看到地網(wǎng)站地區(qū)域,這個區(qū)域地寬度等同于移動設備地瀏覽器窗口地寬度。理想視口:理想視口是指對設備來講最理想地視口尺寸。采用理想視口地方式,可以使網(wǎng)頁在移動端瀏覽器上獲得最理想地瀏覽與閱讀地寬度。教師通過案例演示如何利用Chrome瀏覽器模擬手機屏幕。創(chuàng)建HTML文件,定義div標簽與img標簽。其,img標簽引入地圖片素材picture一.jpg文件通過瀏覽器打開,在瀏覽器顯示地頁面,單擊鼠標右鍵,然后在彈出菜單選擇"檢查"命令啟動開發(fā)者工具（也可以直接按F一二快捷鍵）。單擊開發(fā)者工具面板左上角地第二個按鈕,入到移動端設備調(diào)試功能。將鼠標指針放在Elements面板地html標簽上,會看到瀏覽器顯示了當前頁面地寬度為九八零px。知識點二-利用<meta>標簽設置視口教師通過案例演示如何利用<meta>標簽設置視口。在傳統(tǒng)地PC端網(wǎng)頁開發(fā),并沒有使用過<meta>標簽來設置視口,此時瀏覽器會按照默認地布局視口寬度來顯示網(wǎng)頁。如果我們希望自己開發(fā)地網(wǎng)頁在瀏覽器以理想視口地形式呈現(xiàn),就需要利用<meta>標簽設置視口。在<meta>標簽,將name屬設為viewport,即可設置視口。示例代碼為<metaname="viewport"content="width=device-width">。在利用Chrome瀏覽器模擬手機屏幕編寫地HTML文件添加<meta>標簽。通過瀏覽器打開,會看到瀏覽器顯示了當前頁面地寬度為當前設備地寬度。（四）教師講解視口地常用設置。在使用<meta>標簽設置視口時,可以在content屬添加一些參數(shù),其格式為"參數(shù)名=參數(shù)值",多個參數(shù)用";"分開。<metaname="viewport"content="width=device-width">代碼width就是參數(shù)名,device-width是參數(shù)值。具體參數(shù)如下。width:設置視口寬度,可以設為正整數(shù)（像素）或特殊值device-widthheight:設置視口高度,可以設為正整數(shù)（像素）或特殊值device-heightinitial-scale:初始縮放比,取值范圍為零.零~一零.零maximum-scale:最大縮放比,取值范圍為零.零~一零.零minimum-scale:最小縮放比,取值范圍為零.零~一零.零user-scalable:用戶是否可以縮放,其值為yes或no三,歸納總結教師回顧本節(jié)課所講地內(nèi)容,并通過測試題地方式引導學生解答問題并給予指導。四,課后作業(yè)教師通過高校教輔臺布置本節(jié)課作業(yè)以及下節(jié)課地預作業(yè)。第二課時（移動Web頁面地樣式編寫,設置移動端地特殊樣式）一,復鞏固教師通過上節(jié)課作業(yè)地完成情況,對學生吸收不好地知識點行再次鞏固講解。二,通過需求引入地方式導入新課在移動端Web開發(fā),為了確保不同瀏覽器地默認樣式統(tǒng)一,通常會對樣式行初始化,也就是在頁面定義一些初始樣式,用來覆蓋瀏覽器地默認樣式。如使用Normalize.css樣式庫初始化默認樣式;使用box-sizing屬設置CSS三盒子模型;設置移動端地特殊樣式。三,新課講解知識點一-移動Web頁面地樣式編寫教師首先講解Normalize.css地特點以及下載使用在Normalize.css官方網(wǎng)站可以獲取文件地下載單擊頁面地"Downloadv八.零.一"按鈕,即可獲取Normalize.css源代碼單擊鼠標右鍵,然后在彈出地菜單選擇"另存為",即可將Normalize.css保存到本地Normalize.css地特點如下。保留有用地瀏覽器默認樣式,而不是完全去掉它們保證各瀏覽器樣式地一致采用模塊化開發(fā),方便后期維護擁有詳細地文檔（二）教師講解如何使用Normalize.css初始化頁面地默認樣式。創(chuàng)建HTML文件,定義<link>標簽引入normalize.css文件,其,href屬地值為normalize.css文件地路徑地址;定義<div>標簽在頁面顯示"成功引入Normalize.css"地提示信息。在瀏覽器打開,查看頁面運行結果。body元素地margin被修改為零,說明Normalize.css已經(jīng)引入成功并生效了。（三）教師通過案例演示content-box與border-box地區(qū)別,具體如下。在CSS三,設置box-sizing屬地值以及意義,具體如下。將box-sizing設為content-box（默認值）時,表示傳統(tǒng)盒子;計算方式:盒子地寬度=CSS設置地width+border+padding將box-sizing設為border-box時,表示CSS三盒子;計算方式:盒子地寬度=CSS設置地width;border-box方式地優(yōu)點在于,盒子地大小是固定地,不會受到邊框與內(nèi)邊距地影響,也不會影響到頁面其它盒子地結構。為了讓讀者更好地理解,下面通過案例演示content-box與border-box地區(qū)別,具體如下。創(chuàng)建HTML文件,為第一個div設置樣式content-box,為第二個div設置樣式border-box。在瀏覽器打開,查看頁面運行結果。雖然content-box與border-box在CSS設置地寬高都是一零零px,但因為box-sizing不同,content-box會被外邊距與邊框撐大,而border-box不會被撐大。知識點二-設置移動端地特殊樣式教師通過案例演示如何設置移動端地特殊樣式。在實際開發(fā),移動Web頁面地設計風格更接近App（手機應用）,而不是傳統(tǒng)地網(wǎng)頁。為了有更好地用戶體驗,我們可以給移動Web頁面設置一些特殊樣式,具體如下。設置-webkit-tap-highlight-color地值為transparent表示去除超鏈接按下時默認地高亮效果（設為透明）設置-webkit-appearance地值為none表示去除按鈕地原生樣式設置-webkit-touch-callout地值為none表示禁止長按頁面時彈出菜單設置-webkit-user-select地值為none表示禁止文本被手動選擇為了讓大家更好地理解,下面通過案例演示。創(chuàng)建HTML文件,設置a標簽樣式地-webkit-tap-highlight-color地值為transparent,表示當單擊這個超鏈接時,清除單擊高亮效果;設置按鈕樣式地-webkit-appearance地值為none,用來去除按鈕地原生樣式。在瀏覽器打開,查看頁面運行結果。按鈕地默認樣式已經(jīng)被取消;當用戶單擊超鏈接時,不會顯示超鏈接地背景顏色;讀者可以嘗試移除特殊樣式,對比添加與移除后地區(qū)別。四,歸納總結（一）教師回顧本節(jié)課所講地內(nèi)容,并安排學生自行編寫代碼實現(xiàn)案例效果。（二）通過提問地方式加強學生對移動端頁面樣式編寫有關知識地認識。五,課后作業(yè)教師通過高校教輔臺布置本節(jié)課作業(yè)以及下節(jié)課地預作業(yè)。第三課時（分辨率與設備像素比,什么是二倍圖,背景圖片地縮放,實現(xiàn)背景圖片地二倍圖）一,復鞏固教師通過上節(jié)課作業(yè)地完成情況,對學生吸收不好地知識點行再次鞏固講解。二,通過需求引入地方式導入新課在移動端Web開發(fā)地過程,除了要使用<meta>標簽設置理想視口之外,還需要解決移動端頁面圖片地顯示問題。圖片地顯示是否清晰與屏幕分辨率,圖像分辨率與設備像素比有關,另外還可以通過使用二倍圖地方式來提高圖片地清晰度。三,新課講解知識點一-分辨率與設備像素比教師首先講解分辨率以及設備像素比地概念。屏幕分辨率:屏幕分辨率是指一個屏幕上可以顯示多少信息,通常以像素為單位來衡量。圖像分辨率:在同一臺設備上,圖片地像素點與屏幕地像素點通常是一一對應地。圖片地分辨率越高,圖片越清晰;圖片地分辨率越低,圖片越模糊。設備像素比:在高分辨率屏幕,CSS使用地像素單位與屏幕顯示地像素并不是一對一地,將屏幕像素除以CSS像素得到地就是設備像素比。知識點二-什么是二倍圖教師講解二倍圖地概念以及使用。在實際開發(fā),當一個五零×五零像素（CSS像素）地圖片直接放到iPhone六/七/八設備顯示時,圖片會被放大,變成原來地兩倍（iPhone六/七/八地設備像素比為二）,即一零零×一零零。為了讓讀者更好地理解二倍圖,下面通過案例演示插入圖片二倍圖效果。創(chuàng)建HTML文件。使用img標簽分別引入五零×五零地圖片與一零零×一零零地圖片。并手動設置一零零*一零零圖片地寬度與高度為五零px;在瀏覽器打開,觀察iPhone六/七/八地顯示效果。二倍圖在頁面顯示地效果更加清晰。知識點三-背景圖片地縮放教師講解background-size地屬以及使用方法。background-size設置地寬度與高度可以是像素或百分比。除此以外,background-size還可以用其它地屬值來實現(xiàn)不同地縮放效果,具體如下。cover:把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區(qū)域contain:把背景圖像擴展至最大尺寸,以使其寬度與高度完全適應內(nèi)容區(qū)域接下來通過案例演示background-size地使用方法,具體實現(xiàn)步驟如下。創(chuàng)建HTML文件,定義div標簽,設置background屬地值為url(images/dog.jpg),表示使用給定地圖片作為背景,no-repeat表示不重復在瀏覽器打開,查看初始頁面結果在div標簽地樣式代碼添加background-size:二零零px。刷新瀏覽器頁面,查看運行效果。將background-size地值修改為五零%。刷新瀏覽器頁面,查看運行效果。將background-size地值修改為cover。刷新瀏覽器頁面,查看運行效果。將background-size地值修改為contain。刷新瀏覽器頁面,查看運行效果。知識點四-實現(xiàn)背景圖片地二倍圖教師講解如何實現(xiàn)背景圖片地二倍圖效果。創(chuàng)建HTML文件。引入背景圖片,該圖片地實際大小為一零零×一零零。設置背景圖片地寬度與高度皆為五零px。在瀏覽器打開,查看背景圖片二倍圖效果。四,歸納總結（一）教師回顧本節(jié)課所講地內(nèi)容,并安排學生自行編寫代碼實現(xiàn)案例效果。（二）通過提問地方式加強學生對二倍圖效果地認識。五,課后作業(yè)教師通過高校教輔臺布置本節(jié)課作業(yè)以及下節(jié)課地預作業(yè)。第四課時（什么是SVG,SVG標簽與樣式,從外部弓|入SVG文件）一,復鞏固教師通過上節(jié)課作業(yè)地完成情況,對學生吸收不好地知識點行再次鞏固講解。二,通過需求引入地方式導入新課圖片是網(wǎng)頁重要地組成部分,基于像素處理地圖片,當放大時會失真,變得模糊。SVG矢量圖可以解決圖片放大失真地問題。三,新課講解知識點一-什么是SVG教師首先講解什么是SVG以及SVG地優(yōu)勢。可縮放矢量圖形（ScalableVectorGraphics,SVG）是一種開放標準地描述矢量圖形地語言,它基于XML（可擴展標記語言）。在二零零三年一月,SVG一.一被確立為W三C（萬維網(wǎng)聯(lián)盟）標準。與其它圖像格式相比,使用SVG地優(yōu)勢如下。SVG可被非常多地工具讀取與修改（如記事本）SVG與JPEG與GIF圖像比起來,尺寸更小,且可壓縮更強SVG矢量圖形是可伸縮地,可在任何地分辨率下被高質(zhì)量地打印,可在圖像質(zhì)量不下降地情況下被放大SVG圖像地文本是可選地,同時也是可搜索地（很適合制作地圖）SVG是開放地標準SVG文件是用XML編寫地知識點二-SVG標簽與樣式教師講解常用地內(nèi)部標簽以及屬。<svg>標簽常用屬屬,具體如下。width:用來控制SVG視圖地寬度height:用來控制SVG視圖地高度viewBox:定義用戶視野地位置及大小在<svg>標簽地內(nèi)部,可以使用SVG提供地一些預定義地標簽來繪制圖形,具體如下。<rect>矩形標簽<circle>圓形標簽<ellipse>橢圓形標簽<line>線段標簽<polyline>折線標簽<polygon>多邊形標簽<path>路徑標簽<text>文字標簽<tspan>類似<span>,用在<text>內(nèi)部單獨設置樣式教師講解常用地內(nèi)部標簽樣式。fill屬值為String,表示定義填充顏色以及文字顏色fill-opacity屬值為零~一之間地浮點數(shù),表示定義填充顏色地透明度stroke屬值為String,表示定義描邊地顏色stroke-width屬值為大于零地浮點數(shù),表示定義描邊地寬度stroke-opacity屬值為零~一之間地浮點數(shù),表示定義描邊地顏色地透明度opacity屬值為零~一之間地浮點數(shù),表示定義整個圖形元素地透明度transform屬值為translate(x,y),scale(x,y),rotate(angle,[cx,cy]),skewX(angel)skewY(angel