资源描述
,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,*,页,2024年8月23日,第,1,页,第,7,章,样式、主题和母版页,2023年8月30日第1页第7章样式、主题和母版页,2024年8月23日,第,2,页,教学目标,理解CSS的概念,掌握CSS的用法,CSS和Div布局的方法,理解主题的概念,掌握主题的创建和引用,理解母版页和内容页的概念,掌握创建母版页和内容页的方法,2023年8月30日第2页教学目标理解CSS的概念,掌握CS,2024年8月23日,第,3,页,7.1 CSS,概述,7.1.1 CSS,的简介,7.1.2 CSS,的基础,7.1.3,创建,CSS,文件,7.1.4 CSS,常用属性,7.1.5 DIV,和,CSS,布局,2023年8月30日第3页7.1 CSS概述7.1.1,2024年8月23日,第,4,页,7.1.1 CSS,的简介,CSS,发展于,1994,年,10,月,是为了补救,HTML 3.2,语法中的不足,但是由于当时网络的发展的不足和浏览器的支持率较低,直到,1996,年底,才正式发表了,CSS 1.0,规格,也正是,1996,年之后,浏览器才开始正式的支持,CSS,。简单的说,CSS,的引入就是为了使得,HTML,能够更好的适应页面的美工设计。,2023年8月30日第4页7.1.1 CSS的简介CSS,2024年8月23日,第,5,页,7.1.2 CSS,的基础,CSS,能够通过编写样式控制代码来进行页面布局,在编写相应的,HTML,标签时,可以通过,Style,属性进行,CSS,样式控制。,2023年8月30日第5页7.1.2 CSS的基础CSS能,2024年8月23日,第,6,页,7.1.3,创建,CSS,文件,一个样式表由若干个样式规则组成。样式规则是指网页元素的样式定义,包括元素的显示方式以及元素在页中的位置等。在,【,解决方案资源管理器,】,中,添加一个样式表文件,StyleSheet1.css,,如图,2023年8月30日第6页7.1.3 创建CSS文件一个样,2024年8月23日,第,7,页,7.1.4 CSS,常用属性,CSS,背景属性,CSS,边框属性,CSS,边距和间隙属性,2023年8月30日第7页7.1.4 CSS常用属性CSS,2024年8月23日,第,8,页,7.1.5 DIV,和,CSS,布局,(,1/6,),在,XHTML,中,每一个标签都可以称作是容器,能够放置内容,DIV,是,XHTML,中专门用于布局设计的容器对象,以,DIV,对象为核心的页面布局中,通过层来定位,通过,CSS,定义外观,最大程度地实现了结构和外观彻底分离的布局效果,2023年8月30日第8页7.1.5 DIV和CSS布局 (,2024年8月23日,第,9,页,DIV,和,CSS,布局,(,2/6,),定义层,通过,【,工具箱,】,面板中的,【HTML】,选项卡中托拽一个“,Div”,项到设计视图中,一个简单的定义,DIV,的例子,2023年8月30日第9页DIV和CSS布局 (2/6)定义,2024年8月23日,第,10,页,DIV,和,CSS,布局,(,3/6,),盒子模型,盒子模型主要定义四个区域:内容,(content),、边框距,(padding),、边界,(border),和边距,(margin),2023年8月30日第10页DIV和CSS布局 (3/6)盒,2024年8月23日,第,11,页,DIV,和,CSS,布局,(,4/6,),层的定位,float,浮动属性是,DIV,和,CSS,布局中的一个非常重要的属性,具体参数如下:,float:none,用于设置是否浮动,float:left,用于表示对象向左浮动,float:right,用于表示对象向右浮动,2023年8月30日第11页DIV和CSS布局 (4/6)层,2024年8月23日,第,12,页,DIV,和,CSS,布局,(,5/6,),利用,DIV,和,CSS,实现页面布局,页面结构包含以下几块:,标题区(,header,),用来显示网站的标志和站点名称等。,导航区(,navigation,),用来表示网页的结构关系,如站点导航,通常放置主菜单。,主功能区(,content,),用来显示网站的主题内容,如商品展示、公司介绍等。,页脚(,footer,),用来显示网站的版权和有关法律声明等,2023年8月30日第12页DIV和CSS布局 (5/6)利,2024年8月23日,第,13,页,DIV,和,CSS,布局,(,6/6,),利用,DIV,和,CSS,实现页面布局,通常采用,DIV,元素来将这些结构先定义出来,类似这样:,具体例子参考教材,2023年8月30日第13页DIV和CSS布局 (6/6)利,2024年8月23日,第,14,页,7.2,主题,主题的概念,在主题中定义外观,在主题中同时定义外观和样式,2023年8月30日第14页7.2 主题主题的概念,2024年8月23日,第,15,页,主题的概念,(,1/3,),主题是指页面和控件外观属性设置的集合,主题由一个文件组构成,包括皮肤文件(扩展名为,.skin,)、级联样式表文件(扩展名为,.css,)、图片和其他资源等的组合,但一个主题至少包含一个皮肤文件,2023年8月30日第15页主题的概念(1/3)主题是指页面,2024年8月23日,第,16,页,主题的概念,(,2/3,),皮肤文件,是主题的核心文件,也称为外观文件,专门用于定义服务器控件的外观,在主题中可以包含一个或多个皮肤文件,后缀名为,.skin,2023年8月30日第16页主题的概念(2/3)皮肤文件,2024年8月23日,第,17,页,主题的概念,(,3/3,),级联样式表文件,主题中可以包含一个或多个,CSS,文件,一旦,CSS,文件被放在主题中,则应用时无需再在页面中指定,CSS,文件链接,而是通过设置页面或网站所使用的主题就可以了,当主题得到应用时,主题中的,CSS,文件会自动应用到页面中,2023年8月30日第17页主题的概念(3/3)级联样式表文,2024年8月23日,第,18,页,在主题中定义外观,例子:创建一个包含一些简单外观的主题,设置外观前,设置外观后,2023年8月30日第18页在主题中定义外观例子:创建一个包,2024年8月23日,第,19,页,在主题中同时定义外观和样式表,在主题中还可以定义,.css,文件,在网页文件中设置“,StyleSheetTheme”,属性为定义的主题即可,注意:样式表主题和自定义主题都使用相同的主题文件,但是样式表主题在网页文件的控件和属性中的优先级最低,2023年8月30日第19页在主题中同时定义外观和样式表 在,2024年8月23日,第,20,页,7.3,母版页,母版页和内容页的概念,创建母版页和内容页,从内容页访问母版页的成员,2023年8月30日第20页7.3 母版页母版页和内容页的概,2024年8月23日,第,21,页,母版页和内容页的概念,(,1/2,),母版页,是用于设置页面外观的模板,是一种特殊的,网页文件,扩展名是,.master,内容页,引用母版页的,.aspx,页面称为内容页,2023年8月30日第21页母版页和内容页的概念(1/2)母,2024年8月23日,第,22,页,母版页和内容页的概念,(,2/2,),母版页的优点如下,使用母版页可以集中处理页的通用功能,以便可以只在一个位置进行更新,使用母版页可以方便地创建一组控件和代码,并将结果应用一组新的页面。,通过允许控制占位符控件的呈现方式,母版页可以在细节上控制最终页的布局。,母版页提供一个对象模型,使用该对象模型可以从各个内容页自定义母版页,2023年8月30日第22页母版页和内容页的概念(2/2)母,2024年8月23日,第,23,页,创建母版页和内容页,在母版页中包含一个内容占位符,这是母版页中的一个可变区域,可以使用内容页中的信息来替换此区域,创建例子请参考教材,2023年8月30日第23页创建母版页和内容页在母版页中包含,2024年8月23日,第,24,页,从内容页访问母版页的成员,利用内容页的后台代码可以引用母版页上的成员,包括母版页上的任何公共属性或方法以及任何控件,要实现内容页对母版页中定义的属性或方法进行访问,则该属性或方法必须声明为公共成员(,public,),也可以对母版页动态地进行访问,2023年8月30日第24页从内容页访问母版页的成员利用内容,2024年8月23日,第,25,页,从内容页访问母版页的成员,访问母版页的公共成员,动态访问母版页,2023年8月30日第25页从内容页访问母版页的成员访问母版,
展开阅读全文