《ASP.NET程序設(shè)計(jì)》

1、ASP.NET程序設(shè)計(jì)單元教學(xué)設(shè)計(jì)任課教師： 梅成才 本單元標(biāo)題： 模塊二 企業(yè)信息發(fā)布系統(tǒng)整體外觀設(shè)計(jì)授課班級(jí)上課時(shí)間 周 月 日 第 節(jié)上課地點(diǎn) 周 月 日 第 節(jié)教學(xué)目的 掌握母板頁(yè)用法 掌握主題的用法 掌握皮膚文件的設(shè)置方法教學(xué)目標(biāo)能力（技能）目標(biāo)知識(shí)目標(biāo) 利用母版頁(yè)和主題皮膚的知識(shí)設(shè)計(jì)企業(yè)信息發(fā)布系統(tǒng)的整體外觀了解和掌握母版的概念了解和掌握主題的概念了解和掌握皮膚的概念重點(diǎn)難點(diǎn)及解決方法重點(diǎn)：母版、主題、皮膚難點(diǎn)：皮膚，樣式的使用解決方法： 以DreamWeaver里的模板為對(duì)照，可以使學(xué)生比較容易掌握母版的概念。以具體案例為例子介紹皮膚。 參考資料教材：梅成才ASP.NET程序設(shè)計(jì)

2、案例化教材北京大學(xué)出版社單元教學(xué)設(shè)計(jì)基本框架第一部分：組織教學(xué)和復(fù)習(xí)上次課主要內(nèi)容 （時(shí)間： 分鐘） 讓學(xué)生來(lái)介紹主流的Web開發(fā)技術(shù)以及不同開發(fā)技術(shù)之間的異同。第二部分：學(xué)習(xí)新內(nèi)容【步驟一】說(shuō)明主要教學(xué)內(nèi)容、目的 （時(shí)間：5分鐘） 本單元主要的內(nèi)容有 1 掌握母板頁(yè)用法2 掌握主題的用法3 掌握皮膚文件的設(shè)置方法 【步驟二】 新知識(shí)的引入 （時(shí)間：5 分鐘） 在介紹母版概念之前先給學(xué)生展示一些使用了母版的網(wǎng)站（如浙江工商大學(xué)的網(wǎng)站）,讓學(xué)生了解母版的應(yīng)用，然后讓學(xué)生思考怎樣能實(shí)現(xiàn)這種效果。引導(dǎo)學(xué)生討論DreamWeaver中模板的特點(diǎn)。指出學(xué)生ASP.NET中可以利用母版來(lái)實(shí)現(xiàn)相似的外觀，但

3、是具有更好的優(yōu)越性。【步驟三】操練1（通過(guò)任務(wù)訓(xùn)練或案例分析，懂得新知識(shí)的初步運(yùn)用） （時(shí)間：40 分鐘） 在DreamWeaver里做好導(dǎo)航（事先準(zhǔn)備好素材）。 創(chuàng)建母版頁(yè)，然后將DreamWeaver中編輯好的標(biāo)題頁(yè)面拷入。 創(chuàng)建CSS文件，然后將CSS文件添加到主題中，設(shè)置所有頁(yè)面統(tǒng)一的樣式。 在Web.Config文件里繼續(xù)配置?！静襟E四】知識(shí)和能力的歸納 （時(shí)間：10分鐘）母版頁(yè)概述使用母版頁(yè)可以為應(yīng)用程序中的頁(yè)創(chuàng)建一致的布局。單個(gè)母版頁(yè)可以為應(yīng)用程序中的所有頁(yè)（或一組頁(yè)）定義所需的外觀和標(biāo)準(zhǔn)行為。 母版頁(yè)為具有擴(kuò)展名 .Master的 ASP.NET 文件，它具有可以包括靜態(tài)文本、

4、HTML 元素和服務(wù)器控件的預(yù)定義布局。母版頁(yè)由特殊的 Master 指令識(shí)別。該指令類看起來(lái)類似下面這樣 <% Master Language="C#" %> 主題和皮膚ASP.NET  2.0的主題和皮膚特性使你能夠把樣式和布局信息存放到一組獨(dú)立的文件中，總稱為主題（Theme）。接下來(lái)我們可以把這個(gè)主題應(yīng)用到任何站點(diǎn)，用于改變?cè)撜军c(diǎn)內(nèi)的頁(yè)面和控件的外觀和感覺(jué)。通過(guò)改變主題的內(nèi)容，而不用改變站點(diǎn)的單個(gè)頁(yè)面，就可以輕易地改變站點(diǎn)的樣式。 ASP.NET包含了大量的用于定制應(yīng)用程序的頁(yè)面和控件的外觀和感覺(jué)的特性?？丶С质褂肧tyle（樣式）對(duì)象模型來(lái)

5、設(shè)置格式屬性（例如字體、邊框、背景和前景顏色、寬度、高度等等）?？丶仓С质褂脴邮奖恚–SS）來(lái)單獨(dú)設(shè)置控件的樣式。你可以用控件屬性或CSS來(lái)定義控件的樣式信息，或者把這些定義信息存放到單獨(dú)的一組文件中（稱為主題），然后把它應(yīng)用到程序的所有或部分頁(yè)面上。單獨(dú)的控件樣式是用主題的皮膚（Skin）屬性來(lái)指定的。 在App_Themes文件夾下有一個(gè)所創(chuàng)建的主題Button，在Button文件夾下有一個(gè)Button.skin文件，這就是我們添加的主題文件，雙擊Button.skin文件，為其添加皮膚設(shè)置代碼。 代碼如下：<asp:Button runat="server"

6、BorderColor="yellow" BackColor="yellow" BorderStyle="dotted" /><asp:Button runat="server" BorderColor="blue" BackColor="white" SkinID="Blue" />說(shuō)明：教師在演示設(shè)置皮膚文件的時(shí)候要強(qiáng)調(diào)控件的id一定要去掉，只留下共有的屬性。 通過(guò)將 % Page " Theme="Button" % 指令設(shè)置為全局主題或應(yīng)用程序級(jí)主題的名稱（Themes 或 App_Themes 目錄下的文件夾的名稱），可為單個(gè)頁(yè)指定主題。一頁(yè)只能應(yīng)用一個(gè)主題，但該主題中可以有多個(gè)外觀文件，用于將樣式設(shè)置應(yīng)用于該頁(yè)中的控件。這樣Button.skin中設(shè)置的屬性就應(yīng)用到頁(yè)面中。也可通過(guò)在 Web.config 中指定 pages theme="."/ 節(jié)，也可以為應(yīng)用程序中的所有頁(yè)定義應(yīng)用的主題。 【步驟五】 總結(jié) （時(shí)間：5分鐘）本單元重點(diǎn)介紹了企業(yè)信息發(fā)布系統(tǒng)外觀設(shè)置的一些技術(shù)。（）母版技術(shù)類似于DreamWeaver中的模板概念，可以保持頁(yè)