(中职）2022-2023学年SP.NET动态网页设计第九章. ASP课件.ppt

《(中职）2022-2023学年SP.NET动态网页设计第九章. ASP课件.ppt》由会员分享，可在线阅读，更多相关《(中职）2022-2023学年SP.NET动态网页设计第九章. ASP课件.ppt（54页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、(中职）2022-2023学年SP.NET动态网页设计第九章.ppt ASP课件第九章套用网站主题学习目标n n1认识主题的功能n n2创建主题文件夹n n3创建与设计面板文件n n4设置同一个控件不同的SkinIDn n5创建与设计样式表n n6将网站套用主题n n7将指定的控件不套用主题n n8设计动态选择主题的程序9-1创建主题n n利用主题定义网页与控件的外观后，可以将网站中的所有网页与控件套用相同的外观。9-1-1主题的简介n n（1）面板：设置Button、Label、TextBox或Calendar等WebServer控件的外观，面板文件的扩展名为.skin。n n（2）样式表：

2、设置网页的外观，样式表的扩展名为.css。n n（3）其他资源：主题可以包含图片文件、MasterPage或音乐文件等资源，建议用户在主题文件夹下创建Images子文件夹，存放这些资源。9-1-2创建主题文件夹 从快捷菜单中选择添加ASP.NET文件夹 从弹出的菜单中选择主题在“解决方案资源管理器”窗口的网站上右击在子文件夹右击，然后从快捷菜单中选择新增文件夹，就可以新增存放其他资源的Images文件夹生成App_The-mes文件夹后，输入子文件夹的名称n n1 1（）下列哪个是面板文件的扩展名？）下列哪个是面板文件的扩展名？n n.master.master.theme.theme.css

3、.css.skin.skinn n2 2（）下列哪个是样式表文件的扩展名？）下列哪个是样式表文件的扩展名？n n.master.master.theme.theme.css.css.skin.skinn n3 3（）在主题中利用什么可以设置网页的外观？）在主题中利用什么可以设置网页的外观？n n样式表样式表面板面板母版页面母版页面设置文件设置文件n n4 4（）在主题中利用什么可以设置）在主题中利用什么可以设置WebServerWebServer控件的外观？控件的外观？n n样式表样式表面板面板母版页面母版页面设置文件设置文件n n5 5（）VisualWebDeveloper2005Visu

4、alWebDeveloper2005将网站的主题文件夹保存在下列哪一个文件夹中？将网站的主题文件夹保存在下列哪一个文件夹中？n nBrowsersBrowsersApp_BrowsersApp_Browsersn nThemesThemesApp_ThemesApp_Themesn n6 6（）在下列哪一个窗口中可以创建网站的主题文件夹？）在下列哪一个窗口中可以创建网站的主题文件夹？n n“工具箱工具箱”窗口窗口“属性属性”窗口窗口n n“解放方案资源管理器解放方案资源管理器”窗口窗口“数据库资源管理器数据库资源管理器”窗口窗口n n新增一个01_EX01的ASP.NET网站程序，按题意操作：

5、n n在网站中创建“Formal”、“Grace”、“Modern”与“Sports”4个主题文件夹。n n在Grace主题文件夹中新增一个Images文件夹。9-2利用Skin文件设置控件的外观n n面板属于主题的一部分，利用Skin面板文件可以设置网页的控件外观。2-1创建与设置Skin文件n n（1）在VisualWebDeveloper2005的设计视图中，添加想要设置的控件，然后设置为想要呈现的外观。n n（2）将设置好格式的控件程序代码复制到Skin文件中。n n（3）在Skin文件中将控件程序代码的ID与Text属性删除。从快捷菜单中选择“添加新项”选项 在“解决方案资源管理器”

6、窗口的Sweet主题文件夹右击 弹出添加新项的对话框后，选择外观文件模板 单击:添加”按钮 在“名称”文本框输入面板名称（建议面板名称与主题名称相同，以方便辨识）在Default.aspx的设计视图中，添加想要设置的控件，然后设置为想要呈现的外观9-2-2设置不同的SkinLdn n（1）默认面板：是指没有设置SkinId属性的控件面板，若面板中的控件都没有设置SkinId属性，则网页中的该控件只能套用预设的控件面板。n n（2）具名面板：是指设置SkinId属性的控件面板，利用具名面板可以将网页中相同的控件套用不同的面板，但是它不会自动套用到控件上，所以用户必须在控件中指定SkinId属性。

7、n n1 1（）设置）设置SkinSkin文件的方式，是将设置好格式的控件程文件的方式，是将设置好格式的控件程序代码复制到面板文件后，然后将控件程序代码的哪些属序代码复制到面板文件后，然后将控件程序代码的哪些属性删除？性删除？n nIDID与与TextText属性属性SkinIdSkinId与与TextText属属性性IDID与与runatrunat属性属性SkinIdSkinId与与runatrunat属属性性n n2 2（）关于控件面板的叙述，下列哪个是错误的？）关于控件面板的叙述，下列哪个是错误的？n n没有设置没有设置SkinIdSkinId属性的控件面板称为属性的控件面板称为“预设面

8、板预设面板”n n有设置有设置SkinIdSkinId属性的控件面板称为属性的控件面板称为“具名面板具名面板”n n在相同的主题，每一种控件只能有一个预设面板在相同的主题，每一种控件只能有一个预设面板n n在相同的主题，具名面板的每一种控件可以重复设置在相同的主题，具名面板的每一种控件可以重复设置SkinIdSkinIdn n打开练习文件打开练习文件CH0902_EX01CH0902_EX01（Defau-lt.aspxDefau-lt.aspx），），然后在然后在SportsSports主题中添加一个主题中添加一个SportsSports面板文件，规面板文件，规则如下：则如下：n n 编辑编

9、辑ImageImage与与ButtonButton控件面板，设置控件面板，设置ImageImage控控件的图片为件的图片为ImagesImages文件夹的文件夹的image1.bmpimage1.bmp，边框，边框宽度宽度5px5px。n n 两个两个ButtonButton控件面板设计如下：控件面板设计如下：n nSkinIdSkinId为为button1button1，高度，高度40px40px，边框宽度，边框宽度3px3px，背，背景颜色为景颜色为SkyBlueSkyBlue。n nSkinIdSkinId为为button2button2，字形为粗体，颜色为，字形为粗体，颜色为NavyN

10、avy。n n打开练习文件CH0902_EX02（Defau-lt.aspx），然后在Grace主题中新增一个Grace面板文件，接着添加一个自动化格式为“色彩1”的Calendar控件面板。9-3利用CSS文件设置HTML的标签样式 在“解决方案资源管理器”窗口的Sweet主题文件夹上右击 从快捷菜单中选择添加新项 弹出添加新项的对话框后，选择“样式表”模板 在“名称”文本框输入面板名称（建议样式表名称与主题名称相同，以便辨识），然后单击”添加”按钮 从快捷菜单中选择生成样式 创建CSS文件后，在CSS大纲窗口选择想要设置样式的项目，然后右击CSS大纲窗口会显示CSS样式表的层叠式结构 在“

11、字体属性”区设置颜色与粗体 弹出“样式产生器”窗口后，在窗口左方单击“字体”n n1 1（）在）在CSSCSS样式表中，可以在哪一个窗口中设置样式表中，可以在哪一个窗口中设置HTMLHTML项目或自定义类的样式？项目或自定义类的样式？n n“添加样式规则添加样式规则”窗口窗口“添加新项目添加新项目”窗窗口口n n“样式生成器样式生成器”窗口窗口“属性属性”窗窗口口n n2 2（）下列哪一个窗口会显示样式表的阶层式结构？）下列哪一个窗口会显示样式表的阶层式结构？n n“解决方案资源管理器解决方案资源管理器”窗口窗口“CSS“CSS大纲大纲”窗口窗口n n“书签书签”窗口窗口“属性属性”窗窗口口n

12、 n打开练习文件打开练习文件CH0903_EX01CH0903_EX01（Default.aspxDefault.aspx），），然后在然后在SportsSports主题中新增一个主题中新增一个SportsSports样式表，规则样式表，规则如下：如下：n n 设置设置与与标签的样式。标签的样式。n n的样式设计如下：的样式设计如下：n n鼠标光标为沙漏样式。鼠标光标为沙漏样式。n n网页四周的边框样式为双线，宽度为网页四周的边框样式为双线，宽度为 n n 中，颜色为中，颜色为SilverSilver。n n的字体为楷体，颜色为的字体为楷体，颜色为NavyNavy。n n（提示：在样式产生器窗

13、口的（提示：在样式产生器窗口的“其他其他”标签设置标签设置光标，在光标，在“边缘边缘”标签设置框线标签设置框线 n n2打开练习文件CH0903_EX02（Default.aspx），然后在Grace主题中新增一个Grace样式表，规则如下：设置与标签的样式。标签的背景颜色为moccasin。的字体为楷体，颜色为Purple。9-4设置主题n n创建好主题，并设计面板与CSS样板后，就可以将网页套用主题，呈现指定的外观。9-4-1套用主题n n将单一网页套用主题 在标签中按空格键 从弹出的菜单中选择“Theme”选项 输入“=”从提示菜单中选择想要套用的主题名称将整个网站套用主题n n网站中有

14、很多网页时，如果要将每个网页都套用网站中有很多网页时，如果要将每个网页都套用主题，只要在主题，只要在web.configweb.config设置文件指定设置文件指定标签的标签的ThemeTheme属性，就可以将网站中的所有网页属性，就可以将网站中的所有网页套用同样的主题，其语法如下：套用同样的主题，其语法如下：n nn nn npagestheme=n nn n9-4-2让控件不套用主题n n（1）整个网页的控件均不套用主题。n nn n（2）指定的控件不套用主题。n n在 标签中按空格键从弹出的菜单中选择“EnableTheming”选项 从提示菜单中选择“false”选项 输入“=”9-4

15、-3让用户选择要套用的主题从对象和事件菜单中选择“Page”选项从事件菜单中选择“PreInit”选项n n显示显示Page_PreInitPage_PreInit子程序后，在此子程序中编写下面的程序代码子程序后，在此子程序中编写下面的程序代码n nProtectedSubPage_PreInit(ByValsenderAsObject,ByValeAsProtectedSubPage_PreInit(ByValsenderAsObject,ByValeAsn nSystem.EventArgs)System.EventArgs)n n 利用利用Request.QueryStringReque

16、st.QueryString查询查询themetheme字符串中传递的值字符串中传递的值n nSelectCaseRequest.QueryString(theme)SelectCaseRequest.QueryString(theme)n n 使用使用SelectcaseSelectcase条件式设置网页的主题条件式设置网页的主题n n CaseNoThemeCaseNoThemen nPage.ThemePage.Theme可以设置主题，只能在可以设置主题，只能在Page_PreInitPage_PreInit事件设置事件设置n nPage.Theme=Page.Theme=不套用主题不套

17、用主题n nCaseSweetCaseSweetn nPage.Theme=SweetPage.Theme=Sweetn nCaseClassicCaseClassicn nPage.Theme=ClassicPage.Theme=Classicn nEndSelectEndSelectn nEndSubEndSub在HTML程序代码的“选择主题：”后面按”ENTER”键n n在在“选择主题：选择主题：”的后面编写下面的程序代码。的后面编写下面的程序代码。n n!-!-利用利用标签，传递标签，传递Page_PreInitPage_PreInit子程序中需子程序中需要的要的themetheme值

18、值-n naNoThehref=Default2.aspx?theme=NoThemeNoThememen naSweetSweetn naClassicClassicn n1 1（）利用下列哪一个属性设置主题，网页本身的控件设置不会被）利用下列哪一个属性设置主题，网页本身的控件设置不会被主题的设置所覆盖？主题的设置所覆盖？n nMasterPageFileMasterPageFileEnableThemingEnableThemingThemeThemeStyleSheetThemeStyleSheetThemen n2 2（）利用哪一个属性可以让指定的控件不套用主题？）利用哪一个属性可以让

19、指定的控件不套用主题？n nMasterPageFileMasterPageFileEnableThemingEnableThemingThemeThemeStyleSheetThemeStyleSheetThemen n3 3（）PagePage网页对象发生哪一个事件时，会加载个人化信息与网页网页对象发生哪一个事件时，会加载个人化信息与网页的主题？的主题？n nPreInitPreInitPreRenderPreRenderInitInitLoadLoadn n4 4（）关于网页的主题，下列叙述哪一个是错误的？）关于网页的主题，下列叙述哪一个是错误的？n n在在web.configweb.c

20、onfig的的标签可以设置套用整个网站的主题标签可以设置套用整个网站的主题n n将控件的将控件的EnableThemingEnableTheming属性设置为属性设置为flaseflase可不套用主题可不套用主题n n若若web.configweb.config与网页皆设置主题，则会优先采用与网页皆设置主题，则会优先采用web.configweb.confign nPage.ThemePage.Theme可以设置主题，只能在可以设置主题，只能在Page_PreInitPage_PreInit事件设置事件设置n n打开练习文件CH0904_EX01（De-fault.as-px），然后按题意操作

21、：n n在标题下方新增Grace、Modern与Sports超链接标签，分别表示网站中的3种主题。n n当单击超链接文字后，会将Calen-dar控件套用指定的主题。n n（提示：Code-Behind模式的网页必须将服务器端程序代码编写在.vb文件中。）n n1 1（）在面板中设置哪一个属性，可以让网页的同一个控件套用不）在面板中设置哪一个属性，可以让网页的同一个控件套用不同的面板？同的面板？n nIdIdSkinIdSkinIdTextTextThemeThemen n2 2（）在）在CSSCSS样式表中不可以设置下列哪个样式？样式表中不可以设置下列哪个样式？n n自定义类别自定义类别控件

22、控件HTMLHTML项目项目自定义项目自定义项目IDIDn n3 3（）在）在web.configweb.config设置文件的哪一个标签中可以设置要套用整个设置文件的哪一个标签中可以设置要套用整个网站的主题？网站的主题？n nn n4 4（）在程序中利用）在程序中利用Page.ThemePage.Theme可以设置网页主题，它只能在哪可以设置网页主题，它只能在哪一个事件程序中设置？一个事件程序中设置？n nLoadLoadPreRenderPreRenderPreInitPreInitInitInitn n1打开练习文件CH09Q01（Default.aspx），然后编写程序，规则如下：设计Default.aspx的内容如下：新增Image控件与水平线。新增标题文字，文字内容为“欢迎进入网站”。新增Button控件，显示文字为“登录”，SkinID为“button1”。将Default.aspx套用Sports主题。套用后n n打开练习文件CH09Q04（Default.aspx），然后设计自行选择主题的程序，单击网页上的“钻石蓝”会套用Blue，“缤纷绿”会套用Green，“粉红豹”会套用Pink，“金矿山”会套用Yellow