ASP第六章样式、主题和母版.ppt

第6章ASP.NET的样式、主题和母版页,本章开始讨论ASP.NET的页面创作技术，现如今的网页网站、WebBase应用程序越来越注重页面的外观和可操作性。一致的外观能给用户良好的印象，并能充份展示企业的形象和文化内涵。ASP.NET提供了多种用于统一页面外观的方法，主要有：样式：CSS标准的一部分，样式并不是ASP.NET中才有的技术，但是使用这个技术能够为ASP.NETWeb项目提供一致的格式外观。主题：主题可以为Web服务器控件提供一致的外观设置，与样式属于相同的技术，但主题只针对服务器控件。,6.1在ASP.NET中应用CSS样式,随着Web的越来越盛行，Web设计也越来越趋向于整体与结构化。在早期，比如在1999年以前，Web站点的设计者们使用HTML语法来格式化显示样式，这种方式具有多种限制，比如在不同的浏览器中的显示效果不一致、缺乏标准的支持、HTML代码结构混乱等等。解决这些问题的方案是使用CSS标准，CSS支持所有现代的浏览器，并且提供了一整套统一的格式化属性，可以应用这些属性到任何的HTML元素上，比如添加边框、设置字体等等。CSS技术是Web标准的主要表现层技术，除了设置一些外观之外，现如今很多符合Web标准的站点都使用CSS来进行页面的布局。要设计一个标准的Web站点，应该多考虑使用CSS而较少的利用HTML的标签格式化语法。,6.1.1CSS简介,CSS是一组定义的格式设置规则，用来控制Web页面的外观，通过引用CSS样式设置页面的格式，从而实现页面的内容与表现形式分离。CSS不仅有传统的格式属性，还可设置位置、特殊效果、鼠标滑过等属性。在网页布局中，CSS经常被使用于页面样式布局和样式控制。熟练地使用CSS能够让网页布局更加方便，在页面维护时，也能够减少工作量。CSS通常支持三种定义方式一是直接将样式控制放置于单个HTML元素内，称为内联式；二是在网页的head部分定义样式，称为嵌入式；三是以扩展名为“.css”的文件保存样式，称为外联式。,6.1.2CSS基础,内联式样式：这是一段文字嵌入式样式：定义了2种字体.font1font-size:14px;.font2font-size:18px;color:Red;,使用class属性来定义样式，代码如下：,这是应用了font1样式这是应用了font2样式程序运行结果如图：,外联式样式：必须创建一个.css后缀的文件，在解决方案资源管理器中右击根目录，在弹出的对话框中选择“添加新项”，在对话框中选择“样式表”，生成扩展名为.css的文件，并在当前面添加代码如下。,有两种方法可在页面中应用样式表：第一种：在Default.aspx页面中添加代码引用样式表，代码如下：这是外联样式font1这是外联样式font2运行结果如右图,第二种，设置控件属性应用样式表，步骤如下：1、打开管理样式面板，选择附加样式表按钮如下左图所示，在弹出的对话框中选中需要应用的样式如下右图所示。,单击确定后添加两个样式,2、在主页中添加2个Label控件，选择要应用的样式的控件，打开“CssClass”属性的下拉列表选择样式，如下图所示。,6.1.2CSS基础,1CSS背景属性背景颜色属性(background-color)背景图片属性(background-image)背景重复属性(background-repeat)背景附着属性(background-attachment)背景位置属性(background-position)背景属性(background)2CSS边框属性风格属性(border-style)宽度属性(border-width)颜色属性(border-color)属性(border),3CSS边距和间隙属性边距属性(margin)有以下属性。左边距属性(margin-left)右边距属性(margin-right)上边距属性(margin-top)下边距属性(margin-bottom)边距属性(margin)间隙属性基本同边距属性，只是margin改为了padding，其属性如下所示。左间隙属性(padding-left)右间隙属性(padding-right)上间隙属性(padding-top)下间隙属性(margin-bottom)间隙属性(padding),6.2布局设置,网页是网站构成的基本元素。所谓布局设置就是指网页的布局，通俗地说，就是确定网页上的网站标志、导航栏、菜单等元素的位置。常用的网页布局方法有两种：纸上布局和软件布局。不同的网页，各种网页元素所处的地位不同，它们的位置也就不同。一般情况下，重要的元素都放在突出的位置，在对网页插入各种对象、修饰效果前，首先要确定网页的总体风格。,6.2.1网页的基本布局方式,针对不同的网页风格，大体可以将网页分为两大类：商业网页和个人网页。网页的布局一般可以分为“厂”字型、“同”字型、标题正文型、分栏型、Flash型、封面型等。(1)“厂”字型结构的特点是内容清晰，一目了然。网页顶端是徽标和图片(广告)栏，下半部分的左边是导航链接，右边是信息发布区。(2)“同”字型结构的特点是超链接多、信息量大。(3)标题正文型结构的顶端是网站标识和标题，下面是网页正文，内容比较简单。(4)分栏型结构一般分为左右(或上下)两栏，也有的分为多栏。(5)Flash型结构采用Flash技术来完成，其视觉效果和听觉效果与传统网页不同，往往能够给浏览者以极大的冲击，这种网页逐渐被年轻人所喜爱。(6)封面型结构，往往首先看到的是一幅图片或动画，在图片或动画的下面有一个进入下一级网页的超链接提示文字。,6.2.2页面元素定位,在网页文件中，会涉及到很多的页面元素，如何将这些页面元素有机地组合起来，达到满意的视觉效果，必须把这些元素放在合适的位置上，这就是页面元素的定位，或称页面布局。(1)用表格定位页面元素(2)使用层定位页面元素(3)使用布局视图设计页面布局,6.3主题,读者一定非常了解Windows主题，当选择不同的主题设置时，Windows用户界面将会发生很大的变化。ASP.NET提供了同样的主题的技术，这让用户可以对Web站点进行统一的控制，很多Blog站点都提供了主题选择功能，当选择不同的主题时会发现页面的很多方面发生了变化，比如控件的显示，页面的布局等等。很多初学者容易混淆主题与CSS的区别，CSS用于控制HTML格式的呈现，而主题则可以控制ASP.NET服务器控件的很多属性，一些属性可能会生产生不一样的HTML输出。,6.3.1主题和样式,主题由外观、CSS、图像和其他资源组成，主题中至少包含外观，它是在网站或Web服务器上的特殊目录中定义的为了在ASP.NET中创建主题，需要先创建一个名为App_Themes的主题文件夹用来存放主题，该文件夹必须位于应用程序的根目录中。在该文件夹中可以存放多个主题设置。每个主题必须用一个单独的子文件夹进行存放。,在解决方案资源管理器中选择网站，右击打开快捷菜单选择“添加ASP.NET文件夹”下的主题，如右图所示：,外观：是主题的核心内容，用于定义页面中服务器控件的外观级联样式表（CSS）：主题还可以包含.css文件。将.css文件放在主题目录中时，样式表自动作为主题的一部分应用。图像和其他资源：主题还可以包含图形和其他资源。通常，主题的资源文件与该主题的外观文件位于同一个文件夹中，但也可以在Web应用程序中的其他地方。,主题文件存储和组织方式,主题文件必须存储在根目录的App_Themes文件夹下，下图为App_Themes文件夹的示意图。,右击主题在弹出的对话框中选择“外观文件”，扩展名为.skin。,例6-1创建一个简单的外观文件,本示例主要通过两个TextBox控件分别介绍如何创建默认外观和命名外观。程序实现的主要步骤为：1、新建一个网站，应用程序根目录下创建一个App_Themes文件夹用于存储主题。主题名为t1，在主题下新建一个外观文件SkinFile.skin，用于设置页面中TextBox控件的外观。SkinFile.skin外观文件的源代码如下：,2、在网站默认页Default.aspx中添加2个TextBox控件，应用SkinFile.skin中的控件外观。在Page中设置一个Themes属性用来应用主题。3、如果控件设置默认外观，则不用设置控件的SkinID属性，如果设置为控件设置了命名外观，则需要设置控件的SkinID属性，页面源代码如下：,6.3.2页面主题和全局主题,用户可以为每个页面设置主题，这种情况被称为“页面主题”。也可以为应用程序的每个页面都使用主题，在每个页面使用默认主题，这种情况被称为“全局主题”。页面主题：单个页面使用Theme或者是StyleSheetTheme属性设置主题全局主题：为整个网站应用主题可以在web.config配置文件中配置Web应用程序的所有页面都可用的主题，代码如下所示。,6.3.3应用和禁用主题,在上一节中为TextBox控件创建了一个皮肤，当在页面上应用主题后，会发现所有的TextBox控件的呈现外观都发生了改变，这种皮肤称为默认皮肤。开发人员可能想为某个指定的TextBox控件应用一种不同的皮肤，此时可以考虑使用命名皮肤。创建命名皮肤与创建默认皮肤类似，唯一不同点是需要为命名皮肤指定一个SkinID属性，用于命名一个皮肤。注意：在一个皮肤文件中，可以有多个命名的皮肤文件，但是只能具有一个默认的皮肤文件。下面在TextBox.skin文件中添加一个命名皮肤文件，代码如下所示。,禁用主题,在页面中禁用主题代码如下：单个控件不被主题描述时，同样可以通过EnableTheming属性进行主题禁用，在控件中加入代码：,6.3.4用编程的方法来控制主题,例6-2动态加载主题:本示例主要通过选择相应的主题，实现对页面应用所选主题。程序实现的主要步骤如下：1、新建一个网站，添加两个主题，分别名为Theme1和Theme2，并且每个主题包含一个外观文件TextBoxSkin.skin和一个CSS文件StyleSheet.css，用于设置页面外观及控件外观。主题文件夹Theme1中的外观文件源代码如下：,2、级联样式表文件StyleSheet.css的源代码如下：,bodytext-align:center;,3、主题文件Theme2中的外观文件TextBoxSkin.skin的源代码如下：,4、级联样式表文件StyleSheet.css的源代码如下：,bodytext-align:center;color:#004000;background-color:Aqua;,5、在网站的默认主页Default.aspx中添加1个DropDownList控件、2个TextBox控件。DropDownList控件中包含两个选项，一个是主题一，另一个是主题二。添加一个按钮控件，单击按钮选择控件主题，并重新加载页面其代码如下：protectedvoidButton1_Click(objectsender,EventArgse)Response.Redirect(Request.Path+?t=+DropDownList1.SelectedValue);,6、在PreInit事件发生过程中修改Page对象的Theme属性值。其代码如下：protectedvoidPage_PreInit(objectsender,EventArgse)stringtheme=;if(Request.QueryStringt=null)theme=;elsetheme=Request.QueryStringt.ToString();Page.Theme=theme;if(theme!=null)DropDownList1.SelectedValue=theme;,6.4母版页,母版页的主要功能是为ASP.NET应用程序创建统一的用户界面和样式，比如网站的LOGO，可能需要在多个页面中重用，则可以将其放在母版页中。在Dreamweaver中可以使用模板页，ASP.NET的母版页与此类似。使用母版页可以简化维护、扩展和修改网站的过程。并能提供一致、统一的外观。母版页由两部分构成，一个母版页和一个（或多个）内容页。,6.4.1创建母版页,母版页中包含的是页面的公共部分，在创建母版页之前，必须判断哪些内容是页面的公共部分。如图所示,功能菜单,页头,内容页,6.4.1创建母版页,母版页的后缀名为.master。母版页同Web窗体在结构上基本相同，与Web窗体不同的是，母版页的声明方法不是使用Page的方法声明，而是使用Master关键字进行声明，其语法如下所示：母版页的结构基本同于Web窗体，但是母版页通常情况下是用来进行页面布局的。,6.4.1创建母版页步骤如下：,在网站的解决方案下右击网站名称，在弹出的快捷菜单中选择“添加新项”命令。打开“添加新项”对话框，选择“母版页”，默认名为MasterPage.master，创建一个新的母版页。如下图：,母版页由Master指令开始并提供和Page指令相同的信息，如下所示：母版页至少有一个ContentPlaceHolder控件,在母版页中添加一个一列三行的表格，结构如图所示：,ContentPlaceHolder控件是添加内容页的,打开“添加新项”对话框，在对话框中选择Web窗体并为其他命名，同时选中“选择母版页”复选框。如图所示：,在内容页中的ContentPlaceHolder控件中添加所需内容，源代码如下：这是内容页运行结果如图：他继承了母版页的内容,6.4.3母版页的运行方法,在使用母版页时，母版页和内容页通常是一起协调运作的。在母版页运行后，内容窗体中ContentPlaceHolder控件会被映射到母版页的ContentPlaceHolder控件，并向母版页中的ContentPlaceHolder控件填充自定义控件。运行后，母版页和内容窗体将会整合形成结果页面，然后呈现给用户的浏览器。母版页运行的具