PAGEPAGE1《ASP.Net應(yīng)用開發(fā)》課程單元教學(xué)設(shè)計(jì)4_1教學(xué)單元使用母版頁(yè)搭建“新知書店”后臺(tái)頁(yè)面框架授課班級(jí)授課學(xué)時(shí)課時(shí)授課日期年月日第周周第節(jié)授課教師授課地點(diǎn)教學(xué)目標(biāo)知識(shí)目標(biāo)1.頁(yè)面框架;2.母版頁(yè)與內(nèi)容頁(yè)。能力目標(biāo)1.掌握頁(yè)面布局的方法；2.能創(chuàng)建母版頁(yè)及基于母版頁(yè)的內(nèi)容頁(yè)素質(zhì)目標(biāo)規(guī)范管理能力;自我學(xué)習(xí)能力;相互協(xié)作能力。教學(xué)重點(diǎn)母版頁(yè)的應(yīng)用教學(xué)難點(diǎn)母版頁(yè)與內(nèi)容頁(yè)的關(guān)系能力訓(xùn)練任務(wù)或案例使用母版頁(yè)搭建“新知書店”后臺(tái)頁(yè)面框架教學(xué)策略(教學(xué)方法與組織形式)1.課件：根據(jù)本節(jié)課程設(shè)計(jì)的內(nèi)容及教學(xué)計(jì)劃，逐步展現(xiàn)知識(shí)點(diǎn)。2.板書：針對(duì)學(xué)生在學(xué)習(xí)和練習(xí)過(guò)程中出現(xiàn)的問(wèn)題，進(jìn)行補(bǔ)充講解。調(diào)節(jié)課堂節(jié)奏，給學(xué)生思考的時(shí)間。3.教師程序編寫：讓學(xué)生體驗(yàn)使用母版頁(yè)搭建“新知書店”后臺(tái)頁(yè)面框架，與所學(xué)知識(shí)點(diǎn)一一對(duì)應(yīng)，加深理解。4.問(wèn)答：就一些知識(shí)點(diǎn)的靈活性與學(xué)生進(jìn)行問(wèn)答互動(dòng)。5.就（3）和（4）中同學(xué)們的表現(xiàn)給出部分平時(shí)分，為了鼓勵(lì)同學(xué)們的參與積極性，參與者加1分，答對(duì)者加2-3分。課后練習(xí)搭建“新知圖書”前臺(tái)頁(yè)面框架教學(xué)后記教學(xué)過(guò)程教學(xué)引入：討論：我們看到一個(gè)網(wǎng)站，幾乎每個(gè)頁(yè)面都有“長(zhǎng)得”一樣的地方，是不是每個(gè)頁(yè)面都是單獨(dú)設(shè)計(jì)的呢？。教學(xué)內(nèi)容：4.1CSS樣式控制4.1.1頁(yè)面中使用CSS的三種方法通常在網(wǎng)頁(yè)中CSS規(guī)定了3種定義樣式的方法：內(nèi)聯(lián)式：直接將樣式控制放置在單個(gè)HTML元素內(nèi)。嵌入式：在網(wǎng)頁(yè)的head部分定義樣式。外部鏈接式：以擴(kuò)展名.css的文件保存被稱為CSS文件的樣式定義，將CSS文件鏈接到相應(yīng)的網(wǎng)頁(yè)中。1.內(nèi)聯(lián)式樣式【示例4-1】：style屬性的內(nèi)聯(lián)式樣式演示。2.嵌入式樣式【示例4-2】：style屬性的嵌入式樣式演示。3.鏈接式樣式4.1.2樣式規(guī)則1.元素選擇符2.類選擇符3.id選擇符注意：如果在一個(gè)元素的樣式定義中，既引用了元素選擇符，又引用了類選擇符和id選擇符，則id選擇符的優(yōu)先級(jí)最高，其次是類選擇符，元素選擇符的優(yōu)先級(jí)最低。4.偽類5.包含選擇符6.并列選擇符4.2頁(yè)面框架4..2.1“新知書店”項(xiàng)目概況4..2.2網(wǎng)頁(yè)布局和框架技術(shù)1.網(wǎng)頁(yè)布局欄式結(jié)構(gòu)是很常見(jiàn)的頁(yè)面結(jié)構(gòu)，其特點(diǎn)是簡(jiǎn)單實(shí)用、條理分明、格局清晰嚴(yán)謹(jǐn)，適合信息量大的頁(yè)面。圖4-1列出了幾種常見(jiàn)的欄式結(jié)構(gòu)。圖4-1常見(jiàn)的網(wǎng)頁(yè)欄式結(jié)構(gòu)區(qū)域結(jié)構(gòu)現(xiàn)在使用比較少，其特點(diǎn)是頁(yè)面精美、主題突出、空間感很強(qiáng)，不過(guò)僅適合信息量比較少的頁(yè)面。圖4-2是一個(gè)區(qū)域結(jié)構(gòu)的樣例，頁(yè)面被劃分成了多個(gè)區(qū)域，有很大的空間留給背景。圖4-2區(qū)域結(jié)構(gòu)示例注意：”<table>”用于頁(yè)面布局越來(lái)越少，但并不代表tabel標(biāo)簽應(yīng)被丟棄，在DIV布局的頁(yè)面上，常常會(huì)有<table>的表格。在許多項(xiàng)目中，往往用DIV實(shí)現(xiàn)頁(yè)面的整體布局，而頁(yè)面中列表的顯示還是常常使用Table標(biāo)簽。2.Frameset和Iframe圖4-3使用框架構(gòu)建的“新知書店”管理后臺(tái)首頁(yè)4.3母版頁(yè)4.3.1母版頁(yè)概述1.母版頁(yè)母版頁(yè)為具有擴(kuò)展名.master(如MyMaster.master)的ASP.NET文件，它具有可以包括靜態(tài)文本、HTML元素和服務(wù)器控件的預(yù)定義布局。母版頁(yè)由特殊的@Master指令識(shí)別,該指令替換了用于普通.aspx頁(yè)的@Page指令。2.內(nèi)容頁(yè)注意：使用母版頁(yè)，必須首先創(chuàng)建母版頁(yè)再創(chuàng)建內(nèi)容頁(yè)。3.母版頁(yè)運(yùn)行機(jī)制4.母版頁(yè)的優(yōu)點(diǎn)使用母版頁(yè)可以集中處理頁(yè)的通用功能,以便只在一個(gè)位置上進(jìn)行更新,在很大程度上提高了工作效率使用母版頁(yè)可以方便地創(chuàng)建一組公共控件和代碼,并將其應(yīng)用于網(wǎng)站中所有引用該母版頁(yè)的網(wǎng)頁(yè)。例如,可以在母版頁(yè)上使用控件來(lái)創(chuàng)建一個(gè)應(yīng)用于所有頁(yè)的功能菜單?？梢酝ㄟ^(guò)控制母版頁(yè)中的占位符ContentPlaceHolder對(duì)網(wǎng)頁(yè)進(jìn)行布局由內(nèi)容頁(yè)和母版頁(yè)組成的對(duì)象模型,能夠?yàn)閼?yīng)用程序提供一種高效、易用的實(shí)現(xiàn)方式，并且這種對(duì)象模型的執(zhí)行效率比以前的處理方式有了很大的提高。4.3.2創(chuàng)建母版頁(yè)創(chuàng)建母版頁(yè)的方法和創(chuàng)建一般頁(yè)面的方法非常相似，區(qū)別在于母版頁(yè)無(wú)法單獨(dú)在瀏覽器中查看，而必須通過(guò)創(chuàng)建內(nèi)容頁(yè)才能瀏覽。說(shuō)明：母版頁(yè)中可以包含一個(gè)或多個(gè)ContentPlaceHolder控件。4.3.3創(chuàng)建內(nèi)容頁(yè)創(chuàng)建完母版頁(yè)后，接下來(lái)就可以基于母版頁(yè)創(chuàng)建內(nèi)容頁(yè)。說(shuō)明：添加內(nèi)容頁(yè)的其他方法:在母版頁(yè)中右擊,在彈出的快捷菜單中選擇“添加內(nèi)容頁(yè)”命令即可，或者右擊解決方案資源管理器”中母版頁(yè)的名稱,在彈出的快捷菜單中選擇“添加內(nèi)容頁(yè)”命令。4.3.4訪問(wèn)母版頁(yè)的控件和屬性1.使用Master.FindControl()方法訪問(wèn)母版頁(yè)上的控件【示例4-3】使用FindControl方法,獲取母版頁(yè)中用于顯示系統(tǒng)時(shí)間的Label控件。實(shí)例運(yùn)行效果如圖4-8所示。說(shuō)明：由于在母版頁(yè)的Page_Load事件引發(fā)之前,內(nèi)容頁(yè)P(yáng)age_Load事件已經(jīng)引發(fā),所以,此時(shí)從內(nèi)容頁(yè)中訪問(wèn)母版頁(yè)中的控件比較困難。所以,本示例使用ASP.NET2.0(及以上版本)新增的Page_LoadComplete事件,利用FindControl()方法來(lái)獲取母版頁(yè)的控件,其中Page_LoadComplete事件是在生命周期內(nèi)和網(wǎng)頁(yè)加載結(jié)束時(shí)觸發(fā)。當(dāng)然還可以在Label控件的PreRender事件下完成此功能。2.引用@MasterType指令訪問(wèn)母版頁(yè)上的屬性【示例4-4】使用MasterType指令引用母版頁(yè)的公共屬性演示。說(shuō)明：由于母版頁(yè)本身也是個(gè)類，所以可以在其中添加公共屬性。圖4-9根據(jù)用戶選擇提供不同主題任務(wù)實(shí)施：使用母版頁(yè)搭建“新知書店”后臺(tái)頁(yè)面框架1.任務(wù)描述：使用母版頁(yè)搭建