2019年5月23日,第1页,第6章 ASP.NET中的CSS、主题和母版页,2019年5月23日,第2页,教学目标,理解CSS的概念，掌握CSS的用法 理解布局的概念，掌握CSS和Div布局的方法 理解主题的概念，掌握主题的创建和引用 理解母版页和内容页的概念，掌握创建母版页和内容页的方法,2019年5月23日,第3页,6.1 CSS概述,6.1.1 CSS的简介 6.1.2 CSS的基础 6.1.3 创建CSS文件 6.1.4 CSS常用属性,2019年5月23日,第4页,6.1.1 CSS的简介,CSS发展于1994年10月，是为了补救HTML 3.2语法中的不足，但是由于当时网络的发展的不足和浏览器的支持率较低，直到1996年底，才正式发表了CSS 1.0规格，也正是1996年之后，浏览器才开始正式的支持CSS。简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计。,2019年5月23日,第5页,6.1.2 CSS的基础,CSS能够通过编写样式控制代码来进行页面布局，在编写相应的HTML标签时，可以通过Style属性进行CSS样式控制。,2019年5月23日,第6页,6.1.3 创建CSS文件,一个样式表由若干个样式规则组成。样式规则是指网页元素的样式定义，包括元素的显示方式以及元素在页中的位置等。在【解决方案资源管理器】中，添加一个样式表文件StyleSheet1.css，如图,2019年5月23日,第7页,6.1.4 CSS常用属性,CSS背景属性 CSS边框属性 CSS边距和间隙属性,2019年5月23日,第8页,6.2 页面布局,网页的基本布局方式 页面元素定位 表格布局 DIV和CSS布局,2019年5月23日,第9页,网页的基本布局方式,常见的网页布局方式有左对齐、居中和满宽度显示 默认情况下，网页内容水平左对齐,2019年5月23日,第10页,页面元素定位 （1/2）,页面元素的定位分为流布局和坐标定位布局两种，其中，坐标定位布局又分为绝对定位和相对定位 1. 流布局static 如果采用该布局，则页面中的元素将按照从左到右、从上到下的顺序显示，各元素之间不能重叠 如果不设置元素的定位方式，则默认是流式布局,2019年5月23日,第11页,页面元素定位 （2/2）,2. 坐标绝对定位absolute 在使用坐标绝对定位之前，必须先将style元素的position属性的值设置为absolute，然后就可以由style元素的left、top、right、bottom和z-index属性来决定元素在页面中的绝对显示位置 具体例子参见教材,2019年5月23日,第12页,表格布局（1/3）,利用表格可以将网页中的内容合理地放置在相应的区域，每个区域之间互不干扰 常见表格布局,2019年5月23日,第13页,表格布局（2/3）,实现方法 新建一个.aspx页面，设置body元素的style属性为“text-align:center“，div元素的style属性为“width: 780px; text-align:center“ 切换到【设计】视图，将鼠标光标停在div标记内。选择菜单【表】中的【插入表】命令，打开【插入表】对话框，定义表格大小为4行3列，指定宽度为100%，边框值为1，边框颜色为红色,2019年5月23日,第14页,表格布局（3/3）,表格中部分常用的属性,2019年5月23日,第15页,DIV和CSS布局 （1/6）,在XHTML中，每一个标签都可以称作是容器，能够放置内容 DIV是XHTML中专门用于布局设计的容器对象 以DIV对象为核心的页面布局中，通过层来定位，通过CSS定义外观，最大程度地实现了结构和外观彻底分离的布局效果,2019年5月23日,第16页,DIV和CSS布局 （2/6）,定义层 通过【工具箱】面板中的【HTML】选项卡中托拽一个“Div”项到设计视图中 一个简单的定义DIV的例子,2019年5月23日,第17页,DIV和CSS布局 （3/6）,盒子模型 盒子模型主要定义四个区域：内容(content)、边框距(padding)、边界(border)和边距(margin),2019年5月23日,第18页,DIV和CSS布局 （4/6）,层的定位 float浮动属性是DIV和CSS布局中的一个非常重要的属性 具体参数如下： float:none用于设置是否浮动 float:left用于表示对象向左浮动 float:right用于表示对象向右浮动,2019年5月23日,第19页,DIV和CSS布局 （5/6）,利用DIV和CSS实现页面布局 页面结构包含以下几块： 标题区（header），用来显示网站的标志和站点名称等。 导航区（navigation），用来表示网页的结构关系，如站点导航，通常放置主菜单。 主功能区（content），用来显示网站的主题内容，如商品展示、公司介绍等。 页脚（footer），用来显示网站的版权和有关法律声明等,2019年5月23日,第20页,DIV和CSS布局 （6/6）,利用DIV和CSS实现页面布局 通常采用 DIV元素来将这些结构先定义出来，类似这样： 具体例子参考教材,2019年5月23日,第21页,6.3 主题,主题的概念 在主题中定义外观 在主题中同时定义外观和样式 利用主题实现换肤,2019年5月23日,第22页,主题的概念（1/3）,主题是指页面和控件外观属性设置的集合 主题由一个文件组构成，包括皮肤文件（扩展名为.skin）、级联样式表文件（扩展名为.css）、图片和其他资源等的组合，但一个主题至少包含一个皮肤文件,2019年5月23日,第23页,主题的概念（2/3）,皮肤文件 是主题的核心文件，也称为外观文件，专门用于定义服务器控件的外观 在主题中可以包含一个或多个皮肤文件，后缀名为.skin,2019年5月23日,第24页,主题的概念（3/3）,级联样式表文件 主题中可以包含一个或多个CSS文件，一旦CSS文件被放在主题中，则应用时无需再在页面中指定CSS文件链接，而是通过设置页面或网站所使用的主题就可以了 当主题得到应用时，主题中的CSS文件会自动应用到页面中,2019年5月23日,第25页,在主题中定义外观,例子：创建一个包含一些简单外观的主题,设置外观前,设置外观后,2019年5月23日,第26页,在主题中同时定义外观和样式表,在主题中还可以定义 .css文件，在网页文件中设置“StyleSheetTheme”属性为定义的主题即可 注意：样式表主题和自定义主题都使用相同的主题文件，但是样式表主题在网页文件的控件和属性中的优先级最低,2019年5月23日,第27页,利用主题实现换肤,具体演示请参考教材,没有引入主题的日历,彩色型1主题,彩色型2主题,2019年5月23日,第28页,6.4 母版页,母版页和内容页的概念 创建母版页和内容页 从内容页访问母版页的成员,2019年5月23日,第29页,母版页和内容页的概念（1/2）,母版页 是用于设置页面外观的模板 是一种特殊的asp.net网页文件 扩展名是.master 内容页 引用母版页的.aspx页面称为内容页,2019年5月23日,第30页,母版页和内容页的概念（2/2）,母版页的优点如下 使用母版页可以集中处理页的通用功能，以便可以只在一个位置进行更新 使用母版页可以方便地创建一组控件和代码，并将结果应用一组新的页面。 通过允许控制占位符控件的呈现方式，母版页可以在细节上控制最终页的布局。 母版页提供一个对象模型，使用该对象模型可以从各个内容页自定义母版页,2019年5月23日,第31页,创建母版页和内容页,在母版页中包含一个内容占位符，这是母版页中的一个可变区域，可以使用内容页中的信息来替换此区域 创建例子请参考教材,2019年5月23日,第32页,从内容页访问母版页的成员,利用内容页的后台代码可以引用母版页上的成员，包括母版页上的任何公共属性或方法以及任何控件 要实现内容页对母版页中定义的属性或方法进行访问，则该属性或方法必须声明为公共成员（public），也可以对母版页动态地进行访问,2019年5月23日,第33页,从内容页访问母版页的成员,访问母版页的公共成员 动态访问母版页,