网站开发基础教程8

ASP.NET4.0网站建设基础教程主编：王翔LOGO第八章创建统一风格的网站在实际的Web项目开发中，我们往往需要使网站各页面保持一致的风格与外观，同时也希望网站的这种风格与外观能让访问者耳目一新，增强用户体验。一个设计良好的网站界面与清晰的布局结构及导航指引往往能够提升访问者对网站的兴趣和继续浏览的耐心。ASP.NET提供了主题、皮肤、母版页及站点导航等一系列功能用于增强其页面布局和界面优化的能力，借助它们我们即可轻松的实现对网站整体风格与外观的控制。LOGO8.1主题和皮肤所谓主题，是指页面和控件外观设置的集合。主题由一组文件构成，其中至少包含一个或多个皮肤文件，另外还可以包含CSS文件、图片和其它资源。主题文件必须放在应用程序根目录下的App_Themes文件夹下。皮肤文件是主题的核心内容，用于定义页面中服务器控件的外观。皮肤文件的扩展名是.skin，其中包含对页面中出现的各种类型服务器控件的属性设置。LOGO8.1.1CSS基础通常CSS能够支持三种定义方式：内联式：直接将样式控制放置于单个HTML元素内。适用于对单个标签进行样式控制，使用方便，但在页面维护时，需要针对每个页面进行修改，非常不便；嵌入式：在页面的head部分进行样式定义。可以控制一个页面的多个样式，当需要对页面样式进行修改时，只需要修改head标签中的style标签即可，不过这样仍然没有让布局代码和页面代码完全分离；外联式：以扩展名为.css文件保存样式。能够将布局代码和页面代码相分离，使页面结构清晰简洁，从而在维护时有效减少工作量。LOGO1.内联式样式表内联式样式表通过页面元素的style属性进行样式控制，示例代码如下所示：bodydivstyle=font-size:10px;内联式样式表/div/body如果需要同时包含多个属性值时，也可以将其写在同一个style属性中，中间用分号间隔，示例代码如下所示：bodydivstyle=font-size:10px;font-weight:bold;color:blue内联式样式表/div/body用内联式方法进行样式控制虽然简单方便，但当在页面中加入了过多的内联式样式后，既不利于我们理清页面布局结构，又会在更新维护时因需要单独修改每一处内联样式而增大工作量。LOGO2.嵌入式样式表嵌入式样式表将样式定义放于页面的head部分，并以styletype=text/css/style标识。示例代码如下所示：headtitle嵌入式样式表/titlestyletype=text/css.font1{font-size:10px;}.font2{font-size:10px;font-weight:bold;color:blue;}/style/head在定义了字体样式后，就可以在相应的标签中使用class属性来定义样式，示例代码如下所示：bodydivclass=font1示例文字1/divdivclass=font2示例文字2/divdivclass=font2示例文字3/div/bodyLOGO3.外联式样式表外联式样式表把样式定义单独存放在一个以.css为后缀名的样式表文件中。在.css文件中，只需将嵌入式样式表styletype=text/css/style中的内容移入即可。在完成.css文件的设计后，需要在使用的页面的head部分添加引用。假设我们已经创建并定义了一个样式表文件mycss.css，并且存放在网站的css文件夹中，当我们需要在使用这个样式表文件时，需要加以引入，示例代码如下：linkrel=stylesheettype=text/csshref=/css/mycss.css使用外联式能够很好的将页面的布局代码和HTML代码相分离，不仅能够让多个页面同时共享一个CSS样式表文件，实现统一的样式控制，同时在维护过程中，只需要修改.css文件中的样式属性即可实现引用该文件的页面的全局更新。LOGO4.CSS选择器准确而简洁的运用CSS选择器才能达到最好的效果，最常用的选择器有以下五类：（1）标记选择器：顾名思义，标记选择器是直接将HTML标记作为选择器，如：body、p、h1等，它对页面中的所有同类标记有效。body{font-family:微软雅黑,verdana;/*字体系列*/font-size:medium;/*字体大小*/color:#000000;/*文本颜色*/margin:0;/*四个外边距的宽度*/padding:0;/*四个内边距的宽度*/margin-right:30;/*右外边距的宽度*/text-align:left;/*文本的水平对齐方式*/}LOGO（2）id选择器：为了对页面元素加以区分，我们通常会给它们定义id。例如，在采用div+css模式布局时，定义了一个层＜divid=menubar＜/div，在样式表里可以这样定义：#menubar{margin:0auto;background:#ffdab9;/*层的背景色*/color:#cc0000;}其中“menubar”是自定义的页面元素的id名称，注意在名称前面一定要加#号。LOGO（3）class（类别）选择器：class选择器可以作用在一组页面元素上，在CSS里用一个点开头表示class选择器定义，例如：.font3{color:#cc0000;font-size:14px;}在页面中，用class=类别名的方法调用，如：＜divclass=font3示例文字4＜/div。这个方法比较简单灵活，可以随时根据页面需要新建和删除，但也应避免对它的滥用。LOGO（4）群组选择器：当若干个元素需要使用同样的样式属性时，可以使用群组选择器，元素之间用逗号分隔。如：p,td,li{line-height:20px;/*行间距*/color:#cc0000;}使用组群选择器，可以将具有多个相同属性的元素，合并群组进行选择，定义同样的CSS属性，这大大的提高了编码效率并减小了CSS文件体积。LOGO（5）后代选择器：后代选择器也叫派生选择器。可以使用后代选择器给一个元素里的子元素定义样式，例如：ulli{height:40px;line-height:40px;color:#000000;}上面的CSS代码对无序列表ul的列表项元素li进行了属性设置，它通常被用于创建页面导航条上。后代选择器的合理使用是非常有好处的，如果父元素内包括的HTML元素具有唯一性，则不必给内部元素再指定class或id，直接应用此选择器即可。LOGO8.1.2皮肤文件皮肤文件中一个image控件及一个Login（登录）控件的样式设置示例代码如下：asp:imagerunat=serverImageurl=Images/logo.jpgSkinId=logo/asp:Loginrunat=serverSkinID=LoginViewBackColor=#D6DFF5BorderColor=#6487DCBorderPadding=10BorderStyle=SolidBorderWidth=1pxFont-Names=微软雅黑Font-Size=1emForeColor=#333333LoginButtonStyleBackColor=WhiteBorderColor=#6487DCBorderStyle=SolidBorderWidth=2pxFont-Size=1emForeColor=#6487DC/TextBoxStyleFont-Size=1em/TitleTextStyleBackColor=#6487DCFont-Bold=TrueFont-Size=1emForeColor=White/InstructionTextStyleFont-Italic=TrueForeColor=Black//asp:Login使用皮肤文件时，只需在服务器控件中添加SkinID属性，如下所示：asp:ImageID=Image1runat=serverSkinId=logo/asp:LoginID=Login1runat=serverSkinID=LoginViewLOGO8.1.3主题1.页面主题和全局主题用户可以为每个页面单独设置主题，这种形式被称为“页面主题”。也可以为应用程序的每个页面都使用同一主题，这种形式被称为“全局主题”。每个主题都对应一个主题文件夹，其中包括控件的皮肤文件、CSS文件、图形文件和其他资源文件，这个文件夹是作为网站中的“App_Themes”文件夹的子文件夹创建的。在使用页面主题时，必须首先在要使用该主题的页面声明主题，示例代码如下所示：%@PageLanguage=C#AutoEventWireup=trueCodeFile=Default.aspx.csTheme=主题1Inherits=_Default%或%@PageLanguage=C#AutoEventWireup=trueCodeFile=Default.aspx.csStylesheetThem=主题1Inherits=_Default%【注意】StyleSheetTheme和Theme这两个属性用法基本一样，但页面加载时的优先级不同。LOGO当需要使用全局主题时，则是通过修改web.config配置文件中的pages配置节进行主题的全局设定，从而使该站点应用程序下的所有Web页呈现统一的样式，配置方法如下：system.webpagestheme=全局主题名称/pages/system.web其中pages节的theme指定了主题的名称，该名称同样对应网站中App_Themes文件夹的一个子文件夹的名字，若配置的主题不存在，则会产生编译错误。此外，对于新创建的.aspx文件，必须强制其head标记具有runat=server属性，否则会在运行时抛出异常。LOGO2.主题的创建和文件组织方式默认情况下，主题以子文件夹形式存储在网站中的App_Themes文件夹下，如果网站中不存在该文件夹，在“解决方案资源管理器”中右击项目名称，选择“添加”→“添加ASP.NET文件夹”→“主题”，系统就可以自动创建该文件夹并添加一个新主题，如果已经存在App_Themes文件夹，则只会在该文件夹下添加新的主题。主题创建后，就可以根据需要向其中添加皮肤文件（外观文件）、样式表文件、图形文件或其他资源文件。一个典型的主题文件组织结构。在App_Themes文件夹下包括了两个子文件夹“主题1”和“主题2”，表示网站中已经定义了两个主题。每个主题文件夹下都包含了一个外观文件及一个样式表文件，并以文件夹的形式将样式设计所需的图片文件组织起来。LOGO3.禁用主题对于有些情况，主题会重写页和控件外观的本地设置。当控件或页面已经定义了外观，而又不希望主题将它进行重写和覆盖时，可以禁用主题的覆盖行为。对于页面，可以用声明的方法进行禁用，示例代码如下所示：%@PageLanguage=C#AutoEventWireup=trueEnableTheming=false%当页面需要某个主题的样式，而又希望某个控件不被主题影响时，同样可以通过EnableTheming属性对控件进行主题禁止，示例代码如下所示：asp:LoginID=Login1runat=serverEnableTheming=False/asp:Login这样就可以保证该控件不会被主题样式描述和控制，而页面和页面的其他元素仍然可以使用主题中的样式。LOGO【案例8-1】使用表格对页面进行布局，并实现页面主题的动态切换。LOGO8.2母版页与内容页8.2.1母版页的创建与代码结构1.创建母版页LOGO2.母版页的代码结构母版页代码和普通的Web页面代码结构与格式基本一致，仅有如下两点区别：（1）母版