《07566ASP.NET动态网页设计.PPT 第九章.ppt ASP》由会员分享，可在线阅读，更多相关《07566ASP.NET动态网页设计.PPT 第九章.ppt ASP（53页珍藏版）》请在金锄头文库上搜索。
1、第九章,套用网站主题,学习目标,1认识主题的功能 2创建主题文件夹 3创建与设计面板文件 4设置同一个控件不同的SkinID 5创建与设计样式表 6将网站套用主题 7将指定的控件不套用主题 8设计动态选择主题的程序,9-1 创建主题,利用主题定义网页与控件的外观后，可以将网站中的所有网页与控件套用相同的外观。,9-1-1 主题的简介,（1）面板：设置Button、Label、TextBox或Calendar等Web Server控件的外观，面板文件的扩展名为.skin。 （2）样式表：设置网页的外观，样式表的扩展名为.css。 （3）其他资源：主题可以包含图片文件、Master Page或音乐
2、文件等资源，建议用户在主题文件夹下创建Images子文件夹，存放这些资源。,9-1-2 创建主题文件夹, 从快捷菜单中选择添加ASP.NET文件夹, 从弹出的菜单中选择主题,在“解决方案资源管理器”窗口的网站上右击,在子文件夹右击，然后从快捷菜单中选择新增文件夹，就可以新增存放其他资源的Images文件夹,生成App_The- mes文件夹后，输入子文件夹的名称,1（ ）下列哪个是面板文件的扩展名？ .master .theme .css .skin 2（ ）下列哪个是样式表文件的扩展名？ .master .theme .css .skin 3（ ）在主题中利用什么可以设置网页的外观？ 样式表
3、 面板 母版页面 设置文件 4（ ）在主题中利用什么可以设置Web Server控件的外观？ 样式表 面板 母版页面 设置文件 5（ ）Visual Web Developer 2005将网站的主题文件夹保存在下列哪一个文件夹中？ Browsers App_Browsers Themes App_Themes 6（ ）在下列哪一个窗口中可以创建网站的主题文件夹？ “工具箱”窗口 “属性”窗口 “解放方案资源管理器”窗口 “数据库资源管理器”窗口,新增一个01_EX01的ASP.NET网站程序，按题意操作： 在网站中创建“Formal”、“Grace”、“Modern”与“Sports”4个主题
4、文件夹。 在Grace主题文件夹中新增一个Images文件夹。,9-2 利用Skin文件设置控件的外观,面板属于主题的一部分，利用Skin面板文件可以设置网页的控件外观。,2-1 创建与设置Skin文件,（1）在Visual Web Developer 2005的设计视图中，添加想要设置的控件，然后设置为想要呈现的外观。 （2）将设置好格式的控件程序代码复制到Skin文件中。 （3）在Skin文件中将控件程序代码的ID与Text属性删除。, 从快捷菜单中选择“添加新项”选项, 在“解决方案资源管理器”窗口的Sweet主题文件夹右击, 弹出添加新项的对话框后，选择外观文件模板, 单击:添加”按钮
5、, 在“名称”文本框输入面板名称（建议面板名称与主题名称相同，以方便辨识）,在Default.aspx的设计视图中，添加想要设置的控件，然后设置为想要呈现的外观,9-2-2 设置不同的SkinLd,（1）默认面板：是指没有设置SkinId属性的控件面板，若面板中的控件都没有设置SkinId属性，则网页中的该控件只能套用预设的控件面板。 （2）具名面板：是指设置SkinId属性的控件面板，利用具名面板可以将网页中相同的控件套用不同的面板，但是它不会自动套用到控件上，所以用户必须在控件中指定SkinId属性。,1（ ）设置Skin文件的方式，是将设置好格式的控件程序代码复制到面板文件后，然后将控件
6、程序代码的哪些属性删除？ ID与Text属性 SkinId与Text属性 ID与runat属性 SkinId与runat属性 2（ ）关于控件面板的叙述，下列哪个是错误的？ 没有设置SkinId属性的控件面板称为“预设面板” 有设置SkinId属性的控件面板称为“具名面板” 在相同的主题，每一种控件只能有一个预设面板 在相同的主题，具名面板的每一种控件可以重复设置SkinId,打开练习文件CH0902_EX01（Defau- lt.aspx），然后在Sports主题中添加一个Sports面板文件，规则如下： 编辑Image与Button控件面板，设置Image控件的图片为Images文件夹的i
7、mage1.bmp，边框宽度5px。 两个Button控件面板设计如下： SkinId为button1，高度40px，边框宽度3px，背景颜色为SkyBlue。 SkinId为button2，字形为粗体，颜色为Navy。,打开练习文件CH0902_EX02（Defau- lt.aspx），然后在Grace主题中新增一个Grace面板文件，接着添加一个自动化格式为“色彩1”的Calendar控件面板。,9-3 利用CSS文件设置HTML的标签样式, 在“解决方案资源管理器”窗口的Sweet主题文件夹上右击, 从快捷菜单中选择添加新项, 弹出添加新项的对话框后，选择“样式表”模板, 在“名称”文本
8、框输入面板名称（建议样式表名称与主题名称相同，以便辨识），然后单击”添加”按钮, 从快捷菜单中选择生成样式, 创建CSS文件后，在CSS大纲窗口选择想要设置样式的项目，然后右击,CSS大纲窗口会显示CSS样式表的层叠式结构, 在“字体属性”区设置颜色与粗体, 弹出“样式产生器”窗口后，在窗口左方单击“字体”,1（ ）在CSS样式表中，可以在哪一个窗口中设置HTML项目或自定义类的样式？ “添加样式规则”窗口 “添加新项目”窗口 “样式生成器”窗口 “属性”窗口 2（ ）下列哪一个窗口会显示样式表的阶层式结构？ “解决方案资源管理器”窗口 “CSS大纲”窗口 “书签”窗口 “属性”窗口,打开练习
9、文件CH0903_EX01（Default.aspx），然后在Sports主题中新增一个Sports样式表，规则如下： 设置与标签的样式。 的样式设计如下： 鼠标光标为沙漏样式。 网页四周的边框样式为双线，宽度为 中，颜色为Silver。 的字体为楷体，颜色为Navy。 （提示：在样式产生器窗口的“其他”标签设置光标，在“边缘”标签设置框线,2 打开练习文件CH0903_EX02（Default.aspx），然后在Grace主题中新增一个Grace样式表，规则如下： 设置与标签的样式。 标签的背景颜色为moccasin。 的字体为楷体，颜色为Purple。,9-4 设置主题,创建好主题，并设计
10、面板与CSS样板后，就可以将网页套用主题，呈现指定的外观。,9-4-1 套用主题,将单一网页套用主题, 在标签中按空格键, 从弹出的菜单中选择“Theme”选项, 输入“=”, 从提示菜单中选择想要套用的主题名称,将整个网站套用主题,网站中有很多网页时，如果要将每个网页都套用主题，只要在web.config设置文件指定标签的Theme属性，就可以将网站中的所有网页套用同样的主题，其语法如下： ,9-4-2 让控件不套用主题,（1）整个网页的控件均不套用主题。 （2）指定的控件不套用主题。 ,在标签中按空格键,从弹出的菜单中选择 “EnableTheming”选项, 从提示菜单中选择“false
11、”选项, 输入“=”,9-4-3 让用户选择要套用的主题,从对象和事件菜单中选择“Page”选项,从事件菜单中选择“PreInit”选项,显示Page_PreInit子程序后，在此子程序中编写下面的程序代码 Protected Sub Page_PreInit(ByVal sender As Object,ByVal e As System.EventArgs) 利用Request.QueryString查询theme字符串中传递的值 Select Case Request.QueryString(“theme“) 使用Select case条件式设置网页的主题 Case “NoTheme“
12、Page.Theme可以设置主题，只能在Page_PreInit事件设置 Page.Theme = “ 不套用主题 Case “Sweet“ Page.Theme = “Sweet“ Case “Classic“ Page.Theme = “Classic“ End Select End Sub,在HTML程序代码的“选择主题：”后面按”ENTER”,键,在“选择主题：”的后面编写下面的程序代码。 标签，传递Page_PreInit子程序中需要的theme值 NoTheme Sweet Classic,1（ ）利用下列哪一个属性设置主题，网页本身的控件设置不会被主题的设置所覆盖？ Master
13、PageFile EnableTheming Theme StyleSheetTheme 2（ ）利用哪一个属性可以让指定的控件不套用主题？ MasterPageFile EnableTheming Theme StyleSheetTheme 3（ ）Page网页对象发生哪一个事件时，会加载个人化信息与网页的主题？ PreInit PreRender Init Load 4（ ）关于网页的主题，下列叙述哪一个是错误的？ 在web.config的标签可以设置套用整个网站的主题 将控件的EnableTheming属性设置为flase可不套用主题 若web.config与网页皆设置主题，则会优先采用
14、web.config Page.Theme可以设置主题，只能在Page_PreInit事件设置,打开练习文件CH0904_EX01（De- fault.as- px），然后按题意操作： 在标题下方新增Grace、Modern与Sports超链接标签，分别表示网站中的3种主题。 当单击超链接文字后，会将Calen- dar控件套用指定的主题。 （提示：Code-Behind模式的网页必须将服务器端程序代码编写在.vb文件中。）,1（ ）在面板中设置哪一个属性，可以让网页的同一个控件套用不同的面板？ Id SkinId Text Theme 2（ ）在CSS样式表中不可以设置下列哪个样式？ 自定义
15、类别 控件 HTML项目 自定义项目ID 3（ ）在web.config设置文件的哪一个标签中可以设置要套用整个网站的主题？ 4（ ）在程序中利用Page.Theme可以设置网页主题，它只能在哪一个事件程序中设置？ Load PreRender PreInit Init,1打开练习文件CH09Q01（Default.aspx），然后编写程序，规则如下： 设计Default.aspx的内容如下：新增Image控件与水平线。新增标题文字，文字内容为“欢迎进入网站”。新增Button控件，显示文字为“登录”，SkinID为“button1”。 将Default.aspx套用Sports主题。套用后,打开练习文件CH09Q04（Default.aspx），然后设计自行选择主题的程序，单击网页上的“钻石蓝”会套用Blue，“缤纷绿”会套用Green，“粉红豹”会套用Pink，“金矿山”会套用Yellow,
