网络编程：第10章 样式、主题、母版.ppt

*添加图片文件到主题通常在App_Themes文件夹中创建Images文件夹，再添加合适的图片文件到Images文件夹中。要使用Images文件夹中的图片文件，可以通过控件的相关链接图片文件的Url属性进行访问。*第10章样式、主题、母版

*教学目的：了解CSS样式及使用了解主题并掌握建立和使用主题的方法理解母版页并能建立母版页掌握利用母版页创建一致网页布局的方法引言一个站点的美观与否直接影响站点的受欢迎度。人们更倾向于访问界面美观的站点。如何统一整个网站的风格？如今的网页网站、Web应用程序越来越注重页面的外观和可操作性。一致的外观能给用户良好的印象ASP.NET提供了多种用于统一页面外观的方法，主要有：样式：CSS标准的一部分，样式并不是ASP.NET中才有的技术，但是使用该技术能够为ASP.NETWeb项目提供一致的格式外观。主题：主题可以为Web服务器控件提供一致的外观设置，与样式属于相同的技术，但主题只针对服务器控件。母版页：母版页用于定义网站的一致性布局。ASP.NET的页面创作技术*10.1在ASP.NET中应用CSS样式随着Web的盛行，Web设计也越来越趋向于整体与结构化。在早期，比如在1999年以前，Web站点的设计者们使用HTML语法来格式化显示样式，这种方式具有多种限制，比如在不同的浏览器中的显示效果不一致、缺乏标准的支持、HTML代码结构混乱等等。解决这些问题的方案是使用CSS（CascadingStylesheet）标准，CSS支持所有现代的浏览器，并且提供了一整套统一的格式化属性，可以应用这些属性到任何的HTML元素上，比如添加边框、设置字体等等。CSS技术是Web标准的主要表现层技术，除了设置一些外观之外，现如今很多符合Web标准的站点都使用CSS来进行页面的布局。要设计一个标准的Web站点，应该多考虑使用CSS而较少的利用HTML的标签格式化语法。一、创建样式在ASP.NET中，可以创建三种类型的样式：1．内联样式内联样式直接放到HTML标签的内部，这种形式的样式会导致HTML代码的混乱。内联样式示例代码如下所示。pstyle=color:White;background:Blue;font-size:x-large;padding:10px这行文本显示为蓝色的背景./p2．内部样式表（嵌入式）放置在Web标签页的head区中的样式的集合。可以使用来自样式表的样式来格式化Web控件。使用内部样式，让格式与内容清楚的分离，并且可以对同一页面的格式进行多次重用。选择器{属性:值；属性:值…}CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。格式为：选择器{声明1;声明2;...声明N}选择器通常是需要改变样式的HTML元素。每条声明由一个属性和一个值组成。属性是希望设置的样式属性，每个属性有一个值。属性和值由冒号分开。选择器{property:value}举例：以下代码的作用是将h1元素内的文字颜色定义为红色，同时将字体大小设置为14像素。h1{color:red;font-size:14px;}在这个例子中，h1是选择器，color和font-size是属性，red和14px是值。如果仅是定义当前网页的样式，可使用嵌入式的样式表，将其“嵌”在网页的HEAD标记符内。嵌入的样式表中的样式只能在同一网页上使用。在head区定义样式：styletype=text/cssp{color:White;background:Blue;font-size:xx-large;padding:10px;}一、创建样式3．外部样式表与内部样式相似，但是样式放在一个单独的.css文件中，通过link标记引用其中对样式的定义。这样开发人员可以在应用程序的多个页面上应用相同的样式。*二、应用样式创建好了CSS样式表文件，并定义了CSS样式规则，就可以为Web页面应用样式。在Web页面中应用已创建的样式表文件，可以直接将样式表文件拖动到页面的设计视图即可，VS开发环境将生成如下所示的代码：linkhref=StyleSheet.cssrel=stylesheettype=text/css/*三、使用样式生成器向ASP.NET网站中添加一个CSS样式表后，系统自动向其中添加如下代码：body{}在{