课件章主题与_第1页
课件章主题与_第2页
课件章主题与_第3页
课件章主题与_第4页
课件章主题与_第5页
已阅读5页，还剩37页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1第10章样式、主题、母版

2教学目的：了解CSS样式及使用了解主题并掌握建立和使用主题的方法理解母版页并能建立母版页掌握利用母版页创建一致网页布局的方法引言一个站点的美观与否直接影响站点的受欢迎度。人们更倾向于访问界面美观的站点。如何统一整个网站的风格？如今的网页网站、Web应用程序越来越注重页面的外观和可操作性。一致的外观能给用户良好的印象ASP.NET提供了多种用于统一页面外观的方法，主要有：样式：CSS标准的一部分，样式并不是ASP.NET中才有的技术，但是使用该技术能够为ASP.NETWeb项目提供一致的格式外观。主题：主题可以为Web服务器控件提供一致的外观设置，与样式属于相同的技术，但主题只针对服务器控件。母版页：母版页用于定义网站的一致性布局。

ASP.NET的页面创作技术510.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">这行文本显示为蓝色的背景.</p>2．内部样式表（嵌入式）放置在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/css">p{color:White;background:Blue;font-size:xx-large;padding:10px;}一、创建样式3．外部样式表与内部样式相似，但是样式放在一个单独的.css文件中，通过<link>标记引用其中对样式的定义。这样开发人员可以在应用程序的多个页面上应用相同的样式。10二、应用样式创建好了CSS样式表文件，并定义了CSS样式规则，就可以为Web页面应用样式。在Web页面中应用已创建的样式表文件，可以直接将样式表文件拖动到页面的设计视图即可，VS开发环境将生成如下所示的代码：<linkhref="StyleSheet.css"rel="stylesheet"type="text/css"/>11三、使用样式生成器向ASP.NET网站中添加一个CSS样式表后，系统自动向其中添加如下代码：

body{}在{}中间右键鼠标

“生成样式”，进行样式设定。12四、创建和使用样式规则样式规则是指网页中元素的样式定义，包括元素的显示方式、位置等。三种选择符：（1）元素选择符:针对HTML或XHTML元素进行的设置。在“添加样式规则”元素下拉框中选择某元素，确定后生成样式规则代码框架，再添加具体的样式控制代码即可。（2）类名选择符：在页面中引用时，可在元素标记中添加class=“类名”。（3）元素ID选择符：在页面中引用时，可在元素标记中添加id=“ID名称”。类名选择符与ID选择符在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。这样，一般网站分为头，体，脚部分，因为考虑到它们在同一个页面只会出现一次，所以用id，其他的，比如定义了一个颜色为red的class，在同一个页面也许要多次用到，就用class定义。14五、页面布局页面布局决定了页面中各板块的显示位置和显示方式。页面布局的两种常用方法：

使用表格布局页面；使用DIV+CSS布局页面；15使用DIV+CSS布局页面体现了结构和表现分离的网页设计思想。设计时需要通过页面结构分析、页面布局、样式设置三个环节。页面结构分析：根据页面所表现的内容构思和规划页面组成的过程；页面布局：在页面结构确定后使用<div>标记创建需要的各板块区域；样式设置：对所有<div>及其他页面元素的表现进行设置。16例：使用CSS+DIV技术设计页面布局效果。（1）页面结构分析（如图所示）（2）创建DIV层在.aspx源视图<div></div>中添加6对<div>标记。（3）创建CSS样式表，编写StyleSheet.css代码（4）将StyleSheet.css文件拖动到.aspx的设计视图窗口中。（5）编写.aspx的XHTML代码有关float属性和clear属性说明：float属性用于确定是否允许元素在页面中浮动以及浮动的方向。none不允许元素浮动；left元素可以向左浮动；right元素可以向右浮动。clear属性用于设置元素周围是否允许其他浮动元素以及不允许其他浮动元素出现在该元素的哪边。10.2主题主题与CSS区别：

CSS用于控制HTML格式的呈现，而主题则可以控制ASP.NET服务器控件的很多属性。主题基于控件而不是HTML主题允许定义和重用几乎所有的控件属性CSS只是直接作用于HTML的样式特性主题与CSS分工协作：CSS文件：HTML控件和页面的样式属性主题：服务器控件的样式属性1810.2主题在Web应用程序中，通常所有的页面都有统一的外观和操作方式。通过应用主题，来提供统一的外观。主题是一组外观文件和CSS文件的集合。在解决方案资源管理器中，主题表现为一个ASP.NET特殊文件夹App_Themes下的一个或多个子文件夹，其中可以存放外观文件（.skin）和级联样式表文件（.css）、图像和其他资源文件等。主题至少应包含外观文件(.skin)。主题在存储时与一个主题文件夹对应，主题的名称就是文件夹的名称。一、主题概述19二、自定义主题自定义主题就是建立主题文件夹，然后添加外观文件（.skin）、样式文件（.css）、图片文件到主题文件夹中。主题和外观文件注意：主题文件夹包含在App_Themes中20主题和外观文件一个主题必须包含外观文件。创建主题：右击项目，“添加ASP.NET文件夹”→“主题”，在网站根文件夹下自动添加文件夹App_Themes，并在该文件夹下建立主题文件夹（可重命名如Red）

在主题中添加外观文件：右击主题文件夹Red→“添加新项”→“外观文件”（可重命名如Red.skin）21外观的概念

指Web服务器控件的属性设置集合，它保存在扩展名为.skin的文件中。例如Button控件的外观如下: <asp:Buttonrunat="server"BackColor=“Red"ForeColor=“Blue"/>注意

除外观文件（.skin文件）外，其他类型的文件也可以放在主题文件夹下。如将样式表文件（.css文件）保存在主题下，样式表将自动作为主题的一部分，在网页中只引用主题即可，不必再单独引用.css文件。外观的基本概念22默认的样式模板（Red.skin）<%--默认的外观模板。以下外观仅作为示例提供。1.命名的控件外观。SkinId的定义应唯一，因为在同一主题中不允许一个控件类型有重复的SkinId。<asp:GridViewrunat="server"SkinId="gridviewSkin"BackColor="White"><AlternatingRowStyleBackColor="Blue"/></asp:GridView>2.默认外观。未定义SkinId。在同一主题中每个控件类型只允许有一个默认的控件外观。<asp:Imagerunat="server"ImageUrl="~/images/image1.jpg"/>--%>注意：控件外观样式只能对外貌属性进行定义。23默认的样式模板（Red.skin）如果希望某些控件的外观和页面中具有相同类型的其他控件的外观不一样，在.skin文件中，给控件添加一个SkinID属性。<asp:Buttonrunat="server"ForeColor="Red"BackColor="Blue"FontName="隶书"Font-size="16pt"/><asp:Buttonrunat="server"SkinId="YButton"ForeColor="Yellow"BackColor="Red"Font-size="14pt"/>24默认外观和已命名外观利用属性SkinID可以为同种类型控件定义多种外观。默认外观：没有SkinID的外观。

<asp:Labelrunat="server"ForeColor="#FF0000"Font-Size="X-Small"/>已命名外观：有SkinID的外观。<asp:Labelrunat="server"ForeColor="#00FF00"Font-Size="X-Small"SkinID="LabelGreen"/><asp:Labelrunat="server"ForeColor="#0000FF"Font-Size="X-Small"SkinID="LabelBlue"/>

25使用外观当为同种类型控件定义多种外观后，在网页中使用主题时应通过控件的属性SkinID进行区分。如代码：<asp:LabelID="Lable1"SkinID="LabelBlue"Runat="Server"/><asp:LabelID="Lable2"Runat="Server"/>表示Label1控件使用LabelBlue外观，Label2控件使用默认外观。总结：通过外观文件使页面中的多个同类服务器控件具有相同的外观。26主题与外观小结主题文件夹App_Themes，在该文件夹下可以建立多个文件夹（多个主题），这些文件夹各自独立，包含各自的skin文件，css文件；在skin文件中可以对于特定的控件指定样式；27三、使用主题1.对单个网页应用主题使用@Page指令的Theme或StylesheetTheme属性。例如：<%@PageTheme=“主题名”%><%@PageStyleSheetTheme=“主题名”%>只指定StyleSheetTheme时，在控件中定义的样式会覆盖指定主题内的样式只指定Theme时，主题内的样式优先级则比控件内指定的高注意：（1）属性StylesheetTheme表示主题为本地控件的从属设置。也就是说，如果在页面上为某个控件设置了本地属性，则主题中与控件本地属性相同的属性将不起作用。（2）属性Theme本地属性会被覆盖（主题起作用，本地属性不起作用）。282.对网站应用主题

web.config文件中，完成如下设置，即可将主题应用于整个网站。<pagestheme=“主题名”

>3.禁用主题（1）某个控件禁用主题

可以指定控件的EnableTheming=”False”来禁用主题（2）整个页面禁用主题

<%@PageEnableTheming=“false”/>三、使用主题29四、利用主题实现页面换肤在ASP.NET程序运行时，可以通过代码实现页面主题的动态变更，即可以根据用户的选择变更主题，从而使页面具有不同的外观。

【例】在程序运行时动态变更页面主题。具体要求如下：页面打开时显示图1所示的缺省外观样式，登录对话框带有一个立体边框，背景为淡蓝色。单击“绿色”超链接控件，对话框背景变为“从绿到白”的渐变色，页面和按钮控件中的文字均为蓝色、隶书，如图2所示。单击“蓝色”超链接控件，对话框背景变为“从白到蓝”的渐变色，页面和按钮控件中的文字均为红色、楷体，如图3所示。单击“缺省”超链接控件，恢复到页面刚打开时的显示效果。图1缺省外观图2单击了”绿色“钮图3单击了”蓝色“钮实现换肤功能的思路：1、定义多个主题，在不同的主题下分别定义页面外观和样式。2、在后台代码中，重写页面的StyleSheetTheme属性。3、动态加载主题，在Page_PreInit事件中，更改Page.Theme属性

说明：Theme

属性必须在

PreInit

事件之前进行设置；在

PreInit

事件之后设置

Theme

属性将引发异常。30添加CSS到主题通过在主题中添加CSS文件来设置HTML或HTML服务器控件的样式。操作方式：右击主题文件夹Blue→“添加新项”→“样式表”，重命名为Blue.css。然后在Blue.css中添加HTML元素样式。31添加图片文件到主题通常在App_Themes文件夹中创建Images文件夹，再添加合适的图片文件到Images文件夹中。要使用Images文件夹中的图片文件，可以通过控件的相关链接图片文件的Url属性进行访问。3210.3母版页在设计网页时经常会遇到多个网页部分内容相同的情况，如果每个网页都设计一次显然是重复劳动且非常繁琐。而使用母版页可以很好的解决这个问题。除此之外，母版页还可以统一管理和定义页面，使多个页面具有相同的布局风格，给网页设计和修改带来很大方便。一、母版页和内容页的基本概念母版页的概念

指其他网页可以将其作为模板来引用的特殊网页。母版页的扩展名为.master。在母版页中，界面被分为公用区和可编辑区，公用区的设计方法与一般页面的设计方式相同，可编辑区用ContentPlaceHolder控件预留出来。一个母版页中可以有一个可编辑区，也可以有多个可编辑区。内容页的概念

引用母版页的.aspx页面即为内容页。在内容页中，母版页的ContentPlaceHolder控件预留的可编辑区会被自动替换为Content控件，开发人员只需在Content控件区域中填充内容即可，在母版页中定义的其他标记将自动出现在使用了该母版页的.aspx页面中。

34母版页与普通.aspx页面母版页和普通的Web页面一样，设计方法与一般网页的设计方法相似，它可以包含任何HTML、Web控件甚至代码的组合。母版页还可以包含内容占位符（定义的可修改区域）。母版页不能单独在浏览器中查看，而必须通过内容页在浏览器中查看。母版页为网页定义所需的外观和标准行为，然后在母版页基础上创建要包含显示内容的各个内容页。当用户请求内容页时，这些内容页将与母版页合并输出。35二、创建母版页和内容页

1.创建母版页在解决方案资源管理器中，右键单击网站名称，在弹出的快捷菜单中执行“添加新项”命令，在下图所示的对话框中选择“母版页”，并为母版页命名后单击“添加”按钮，即可在网站中创建一个新的空白母版页。

362.母版页的组成：说明：创建一个母版页后，会得到一个包含2个ContentPlaceHolder控件的空白页。第一个是在<head>区域定义的，它使内容页面能够增加页面元数据，比如搜索关键字和样式表链接。第二个也是更重要的ContentPlaceHolder，被定义在<body>区域，它代表页面显示的内容。37母版页和一般Web窗体的区别是：母版页由Master指令开始，并提供和Page指令相同的信息。而所有Web窗体都由Page指令开始。只有母版页才可以使用ContentPlaceHolder控件，这个控件是内容页可以插入内容的部分。母版页不能被直接请求，要使用母版页，必须创建一个关联的内容页。

38二、创建母版页和内容页

3.创建内容页

394.内容页组成母版页文件路径说明：1.在母版页中的ContentPlaceHolder控件区域会被内容页面中的

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论