電子課件單元主題皮膚四

單元二母版、主題和皮膚

母版主講教師：徐占鵬學(xué)習(xí)目標(biāo)【知識(shí)目標(biāo)】熟練掌握網(wǎng)站母板的設(shè)計(jì)

【技能目標(biāo)】能夠通過母版規(guī)劃網(wǎng)站頁面結(jié)構(gòu)布局，并熟練應(yīng)用。注：本課內(nèi)容參考教材單元二任務(wù)2.4

任務(wù)陳述任務(wù)構(gòu)思與目標(biāo)：根據(jù)需求新建SelectOKShop網(wǎng)站的母板，并創(chuàng)建網(wǎng)站的首頁Index.aspx，應(yīng)用該母板，結(jié)果如下圖所示：

任務(wù)陳述任務(wù)設(shè)計(jì)：

頁面Index.aspx由4個(gè)部分組成：頁頭、頁尾、內(nèi)容1和內(nèi)容2。其中頁頭和頁尾是Index.aspx所在網(wǎng)站中頁面的公共部分：如圖所示：網(wǎng)站中許多頁面都包含相同的頁頭和頁尾。頁頭顯示的是Logo，和菜單條，頁尾顯示的版權(quán)聲明等。內(nèi)容1和內(nèi)容2是頁面的非公共部分，是Index.aspx頁面所獨(dú)有的。結(jié)合母版頁和內(nèi)容頁的有關(guān)知識(shí)可知，如果使用母版頁和內(nèi)容頁來創(chuàng)建頁面Index.aspx，那么必須創(chuàng)建一個(gè)母版頁MasterPage.master和一個(gè)內(nèi)容頁Index.aspx。其中母版頁包含頁頭和頁尾等內(nèi)容，內(nèi)容頁中則包含內(nèi)容1和內(nèi)容2。

母版頁設(shè)計(jì)的基礎(chǔ)知識(shí)

母版頁的基本概念允許開發(fā)人員創(chuàng)建具有指定的可編輯區(qū)域的站點(diǎn)級(jí)模板。隨后用戶友好網(wǎng)站的一個(gè)共同特征是其具有一致的站點(diǎn)級(jí)頁面布局，版頁，此模板可應(yīng)用到網(wǎng)站中的ASP.NET

頁面上。母版頁為具有擴(kuò)展名.master（如MyMaster.master）的ASP.NET文件，它具有可以包括靜態(tài)文本、HTML元素和服務(wù)器控件的預(yù)定義布局。母版頁由特殊的@Master指令識(shí)別，該指令替換了用于普通.aspx頁的@Page指令。

母版頁設(shè)計(jì)的基礎(chǔ)知識(shí)

母版頁的基本概念用戶友好網(wǎng)站的一個(gè)共同特征是其具有一致的站點(diǎn)級(jí)頁面布局，版頁允許開發(fā)人員創(chuàng)建具有指定的可編輯區(qū)域的站點(diǎn)級(jí)模板。隨后，此模板可應(yīng)用到網(wǎng)站中的ASP.NET

頁面上。母版頁為具有擴(kuò)展名.master（如MyMaster.master）的ASP.NET文件，它具有可以包括靜態(tài)文本、HTML元素和服務(wù)器控件的預(yù)定義布局。母版頁由特殊的@Master指令識(shí)別，該指令替換了用于普通.aspx頁的@Page指令。創(chuàng)建并使用SelectOKShop電子商務(wù)網(wǎng)站母版1.新建母版頁。在網(wǎng)站的解決方案下，右擊網(wǎng)站名稱，在彈出的快捷菜單中選擇"添加新項(xiàng)"命令。打開"添加新項(xiàng)"對(duì)話框，選擇"母版頁"，默認(rèn)名為MasterPage.master，修改默認(rèn)名字為MasterPageQian.master。單擊【添加】按鈕就可以創(chuàng)建一個(gè)新的母版頁。創(chuàng)建并使用SelectOKShop電子商務(wù)網(wǎng)站母版2.利用DIV+CSS進(jìn)行網(wǎng)頁布局。(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ì)母版頁的層布局4.ContentPlaceHolder控件的使用切換到母版頁的設(shè)計(jì)試圖，打開【工具箱】，將ContentPlaceHolder拖放到控件母版頁的bodyleft層中，并將ContentPlaceHolder控件名為為“ContentPlaceHolderLeft”。同樣步驟，將ContentPlaceHolder拖放到控件母版頁的bodyright層中并將ContentPlaceHolder控件名為為“ContentPlaceHolderRight”。創(chuàng)建并使用SelectOKShop電子商務(wù)網(wǎng)站母版5.創(chuàng)建內(nèi)容頁創(chuàng)建完母版頁后，接下來就要?jiǎng)?chuàng)建內(nèi)容頁。內(nèi)容頁的創(chuàng)建與母版頁的創(chuàng)建差不多，其創(chuàng)建步驟如下：（1）在網(wǎng)站的解決方案下，右擊網(wǎng)站名稱，在彈出的快捷菜單中選擇"添加新項(xiàng)"命令。（2）打開"添加新項(xiàng)"對(duì)話框。在對(duì)話框中選擇"Web窗體"并為其命名為index.aspx，同時(shí)選中"將代碼放在單獨(dú)的文件中"和"選擇母版頁"復(fù)選框，單擊【添加】按鈕，彈出"選擇母版頁"對(duì)話框。在該對(duì)話框中，選擇一個(gè)母版頁，單擊【添加】按鈕，就可以創(chuàng)建一個(gè)新的內(nèi)容頁。創(chuàng)建并使用SelectOKShop電子商務(wù)網(wǎng)站母版(3)編輯內(nèi)容頁。打開index.aspx頁面，切換的設(shè)計(jì)視圖，在“ContentPlaceHolderLeft”控件中輸入“左側(cè)內(nèi)容頁”，在“ContentPlaceHolderRight”控件中輸入“右側(cè)內(nèi)容頁”。母版頁運(yùn)行機(jī)制1．母版頁和內(nèi)容頁的運(yùn)行過程母版頁和內(nèi)容頁的運(yùn)行過程可以概括為以下5個(gè)步驟。（1）用戶通過鍵入內(nèi)容頁的URL來請(qǐng)求某頁。（2）獲取內(nèi)容頁后，讀取@Page指令。如果該指令引用一個(gè)母版頁，則也讀取該母版頁。如果是第一次請(qǐng)求這兩個(gè)頁，則兩個(gè)頁都要進(jìn)行編譯。（3）母版頁合并到內(nèi)容頁的控件樹中。（4）各個(gè)Content控件的內(nèi)容合并到母版頁中相應(yīng)的ContentPlaceHolder控件中。（5）呈現(xiàn)得到結(jié)果頁。母版頁運(yùn)行機(jī)制2．母版頁的優(yōu)點(diǎn)使用母版頁，可以為ASP.NET應(yīng)用程序頁面創(chuàng)建一個(gè)通用的外觀。開發(fā)人員可以利用母版頁創(chuàng)建一個(gè)單頁布局，然后將其應(yīng)用到多個(gè)內(nèi)容頁中。母版頁具有下面的優(yōu)點(diǎn)：使用母版頁可以集中處理頁的通用功能，以便只在一個(gè)位置上進(jìn)行更新，在很大程度上提高了工作效率。使用母版頁可以方便地創(chuàng)建一組共公控件和代碼，并