资源描述
,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,*,页,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页从内容页访问母版页的成员访问母版,
展开阅读全文