資源描述：
《ASP NET程序設(shè)計(jì)(徐占鵬)教學(xué)資源_單元2 母版、主題和皮膚（四）母版.ppt》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。
1、單元二母版、主題和皮膚母版主講教師：徐占鵬學(xué)習(xí)目標(biāo)【知識(shí)目標(biāo)】熟練掌握網(wǎng)站母板的設(shè)計(jì)【技能目標(biāo)】能夠通過母版規(guī)劃網(wǎng)站頁(yè)面結(jié)構(gòu)布局，并熟練應(yīng)用。注：本課內(nèi)容參考教材單元二任務(wù)2.4任務(wù)陳述任務(wù)構(gòu)思與目標(biāo)：根據(jù)需求新建SelectOKShop網(wǎng)站的母板，并創(chuàng)建網(wǎng)站的首頁(yè)Index.aspx，應(yīng)用該母板，結(jié)果如下圖所示：任務(wù)陳述任務(wù)設(shè)計(jì)：頁(yè)面Index.aspx由4個(gè)部分組成：頁(yè)頭、頁(yè)尾、內(nèi)容1和內(nèi)容2。其中頁(yè)頭和頁(yè)尾是Index.aspx所在網(wǎng)站中頁(yè)面的公共部分：如圖所示：網(wǎng)站中許多頁(yè)面都包含相同的頁(yè)頭和頁(yè)尾。頁(yè)頭顯示的是Logo，和
2、菜單條，頁(yè)尾顯示的版權(quán)聲明等。內(nèi)容1和內(nèi)容2是頁(yè)面的非公共部分，是Index.aspx頁(yè)面所獨(dú)有的。結(jié)合母版頁(yè)和內(nèi)容頁(yè)的有關(guān)知識(shí)可知，如果使用母版頁(yè)和內(nèi)容頁(yè)來(lái)創(chuàng)建頁(yè)面Index.aspx，那么必須創(chuàng)建一個(gè)母版頁(yè)MasterPage.master和一個(gè)內(nèi)容頁(yè)Index.aspx。其中母版頁(yè)包含頁(yè)頭和頁(yè)尾等內(nèi)容，內(nèi)容頁(yè)中則包含內(nèi)容1和內(nèi)容2。母版頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)母版頁(yè)的基本概念允許開發(fā)人員創(chuàng)建具有指定的可編輯區(qū)域的站點(diǎn)級(jí)模板。隨后用戶友好網(wǎng)站的一個(gè)共同特征是其具有一致的站點(diǎn)級(jí)頁(yè)面布局，版頁(yè)，此模板可應(yīng)用到網(wǎng)站中的ASP.NET頁(yè)面上。
3、母版頁(yè)為具有擴(kuò)展名.master（如MyMaster.master）的ASP.NET文件，它具有可以包括靜態(tài)文本、HTML元素和服務(wù)器控件的預(yù)定義布局。母版頁(yè)由特殊的@Master指令識(shí)別，該指令替換了用于普通.aspx頁(yè)的@Page指令。母版頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)母版頁(yè)的基本概念用戶友好網(wǎng)站的一個(gè)共同特征是其具有一致的站點(diǎn)級(jí)頁(yè)面布局，版頁(yè)允許開發(fā)人員創(chuàng)建具有指定的可編輯區(qū)域的站點(diǎn)級(jí)模板。隨后，此模板可應(yīng)用到網(wǎng)站中的ASP.NET頁(yè)面上。母版頁(yè)為具有擴(kuò)展名.master（如MyMaster.master）的ASP.NET文件，它具有可以
4、包括靜態(tài)文本、HTML元素和服務(wù)器控件的預(yù)定義布局。母版頁(yè)由特殊的@Master指令識(shí)別，該指令替換了用于普通.aspx頁(yè)的@Page指令。創(chuàng)建并使用SelectOKShop電子商務(wù)網(wǎng)站母版1.新建母版頁(yè)。在網(wǎng)站的解決方案下，右擊網(wǎng)站名稱，在彈出的快捷菜單中選擇"添加新項(xiàng)"命令。打開"添加新項(xiàng)"對(duì)話框，選擇"母版頁(yè)"，默認(rèn)名為MasterPage.master，修改默認(rèn)名字為MasterPageQian.master。單擊【添加】按鈕就可以創(chuàng)建一個(gè)新的母版頁(yè)。創(chuàng)建并使用SelectOKShop電子商務(wù)網(wǎng)站母版2.利用DIV+CSS
5、進(jìn)行網(wǎng)頁(yè)布局。(1)新建CSS文件。參照步驟1，在網(wǎng)站的解決方案下，右擊網(wǎng)站名稱，在彈出的快捷菜單中選擇"添加新項(xiàng)"命令。打開"添加新項(xiàng)"對(duì)話框。選擇"樣式表"項(xiàng)，默認(rèn)名成為“StyleSheet.css”，單擊【添加】按鈕即可。（2）編寫CSS文件。打開StyleSheet.css文件，在空白出輸入代碼。創(chuàng)建并使用SelectOKShop電子商務(wù)網(wǎng)站母版3.設(shè)計(jì)母版頁(yè)的層布局4.ContentPlaceHolder控件的使用切換到母版頁(yè)的設(shè)計(jì)試圖，打開【工具箱】，將ContentPlaceHolder拖放到控件母版頁(yè)的bodyl
6、eft層中，并將ContentPlaceHolder控件名為為“ContentPlaceHolderLeft”。同樣步驟，將ContentPlaceHolder拖放到控件母版頁(yè)的bodyright層中并將ContentPlaceHolder控件名為為“ContentPlaceHolderRight”。創(chuàng)建并使用SelectOKShop電子商務(wù)網(wǎng)站母版5.創(chuàng)建內(nèi)容頁(yè)創(chuàng)建完母版頁(yè)后，接下來(lái)就要?jiǎng)?chuàng)建內(nèi)容頁(yè)。內(nèi)容頁(yè)的創(chuàng)建與母版頁(yè)的創(chuàng)建差不多，其創(chuàng)建步驟如下：（1）在網(wǎng)站的解決方案下，右擊網(wǎng)站名稱，在彈出的快捷菜單中選擇"添加新項(xiàng)"命令。（
7、2）打開"添加新項(xiàng)"對(duì)話框。在對(duì)話框中選擇"Web窗體"并為其命名為index.aspx，同時(shí)選中"將代碼放在單獨(dú)的文件中"和"選擇母版頁(yè)"復(fù)選框，單擊【添加】按鈕，彈出"選擇母版頁(yè)"對(duì)話框。在該對(duì)話框中，選擇一個(gè)母版頁(yè)，單擊【添加】按鈕，就可以創(chuàng)建一個(gè)新的內(nèi)容頁(yè)。創(chuàng)建并使用SelectOKShop電子商務(wù)網(wǎng)站母版(3)編輯內(nèi)容頁(yè)。打開index.aspx頁(yè)面，切換的設(shè)計(jì)視圖，在“ContentPlaceHolderLeft”控件中輸入“左側(cè)內(nèi)容頁(yè)”，在“ContentPlaceHolderRight”控件中輸入“右側(cè)內(nèi)容頁(yè)”。母
8、版頁(yè)運(yùn)行機(jī)制1．母版頁(yè)和內(nèi)容頁(yè)的運(yùn)行過程母版頁(yè)和內(nèi)容頁(yè)的運(yùn)行過程可以概括為以下5個(gè)步驟。（1）用戶通過鍵入內(nèi)容頁(yè)的URL來(lái)請(qǐng)求某頁(yè)。（2）獲取內(nèi)容頁(yè)后，讀取@Page指令。如果該指令引用一個(gè)母版頁(yè)，則也讀取該母版頁(yè)。如果是第一次請(qǐng)求這兩個(gè)頁(yè)，則兩個(gè)
