资源描述
,*,Click To Edit Title Style,*,*,Click To Edit Title Style,Click To Edit Title Style,*,LOGO,COMPANY LOGOTYPE INSERT,Click To Edit Title Style,情境六：网站风格设计,任务,1,：网站主题设计,主 讲：吴 金 秀,WEB,应 用 开 发,情境六：网站风格设计任务1：网站主题设计主 讲：吴 金 秀,1,皮肤文件的设计与使用,1,样式文件的使用,2,主 要 内 容,皮肤文件的设计与使用1样式文件的使用2主 要 内 容,2,学习目标,知识目标：,能力目标：,掌握皮肤的设计与使用方法,掌握样式的设计与使用方法,能设计特定主题的网站,学习目标知识目标：能力目标：掌握皮肤的设计与使用方法能设计特,3,技术应用的背景,为了给访问者一致的感受，每个网站都需要具有统一的风格和布局。将网站的样式文件应用在站点的网页中。,技术应用的背景 为了给访问者一致的感受，每个网站都需要,4,一、任务,1,任务描述：设计网站的首页的样式。如下图所示，整个首页布局分为上中下结构，中间部分又分为左、右两部分。,一、任务1任务描述：设计网站的首页的样式。如下图所示，整个首,5,二、基本知识与技能,主题概述,主题是属性设置的集合，使用这些属性设置可以定义页面中控件的外观，然后在某个,Web,应用程序中的所有页、整个,Web,应用程序或服务器上的所有相关,Web,应用程序中一致地应用此外观。,默认情况下主题存储在站点的,App_Themes,根目录下。,二、基本知识与技能主题概述 主题是属性设置的集合，,6,二、,基本知识与技能,主题概述,1.,外观文件,外观文件,(.skin),又称皮肤文件，存储在,Theme,文件夹。主题可包含多个外观文件。服务器控件的样式设置在皮肤文件中。,2.CSS,文件,主题中可以包含一个或多个,CSS,文件，主题中的,CSS,文件会自动地应用到页面上（该页必须定义,），,HTML,元素和页面的样式属性设置在,CSS,文件中,主题由一组元素组成，主要包括：外观文件、,CSS,文件和图像等其他文件,3.,图像等其他文件,在主题中可以放置图像、音频、文本等文件。主题中的图像等资源文件通常与该主题的皮肤文件放在同一文件夹中。,操作：在网站上“添加,ASP.NET,文件夹,/,主题,”,二、基本知识与技能主题概述1.外观文件主题由一组元素组成，,7,二、基本知识与技能,皮肤文件,1.,皮肤文件,在一个皮肤文件中可以为同类控件定义多种不同的样式。,命名皮肤：定义皮肤时设置,SkinID,属性,默认皮肤：没有设置,ShinID,的皮肤,2.,皮肤文件的应用,在页面应用主题时，默认皮肤自动地应用于同一类型的所有控件。一种类型的控件仅能设置一个默认皮肤,。,二、基本知识与技能皮肤文件,8,实例,1,：分别给两个文本框应用两种不同的皮肤,操作步骤：,（,1,）新建页面文件”,page1.aspx”,文件,（,2,）添加两个文本框，分别设置相关属性,（,3,）新建一个主题“,theme1”,添加一个外观文件,SkinFile.skin,文件,（,4,）将”源”视图中两个文本框的代码,剪切,下来，粘贴到,SkinFile.skin,文件中，删除,ID,属性，并给第,2,个文本框加上,skinID=“skin1”,默认皮肤,命名皮肤,实例1：分别给两个文本框应用两种不同的皮肤操作步骤：as,文字部分,文字部分,(5),在,page1.aspx,“,源”视图,中添加属性,Theme=“theme1”,，使主题应用于页面中,（,6,）在,Page1.aspx,页面中再添加两个文本框，给第,2,个文本框添加属性,SkinID=skin1”,(7),浏览页面,并分别在文本框中输入文字，观察两个文本框中文字的效果,(8),新建,page2.aspx,，重复上面的,(5)(7),asp:TextBox ID=TextBox1 run,二、基本知识与技能,css,文件,1,主题中的,CSS,文件主要用于设置页面和,HTML,标签的外观样式。,2,在主题中添加样式规则的方法,工具栏“添加样式规则”按钮,空白处右键单击，选择“添加样式规则”菜单,CSS,大纲视图中，右键单击“元素”，选择“添加样式规则”菜单,二、基本知识与技能css文件2在主题中添加样式规则的方法,11,二、基本知识与技能,页面指定主题,为页面指定主题有两种方法：,利用,Theme,属性为页面指定主题时，页面同一类控件的默认的主题的优先级比页面中设置属性的优先级高。,利用,StyleSheetTheme,属性指定主题时，在皮肤文件中对控件的属性设置可以被页面中声明的同一类型的控件的相同属性所替代。,二、基本知识与技能页面指定主题为页面指定主题有两种方法,12,三、任务,1,的实施,1.,新建一个首页,defult.aspx,2.,为首页编写,html,代码,版权所有,三、任务1的实施1.新建一个首页defult.aspx f,13,3.,新建,index.css,文件，,编写,css,代码,#container,width:980px;,height:800px;,margin:0 auto;,#header,width:980px;,height:120px;,background:url(./image/banner1.gif),left top no-repeat;,#content,width:980px;,height:580px;,#left,float:left;,width:150px;,height:580px;,border:1px solid black;,#right,float:left;,width:825px;,height:580px;,border:1px solid black;,#clear,float:clear;,#footer,width:980px;,height:50px;,background-color:#1288ee;,text-align:center;,padding-top:30px;,3.新建index.css文件，#container#lef,4.,在,default.aspx,文件中应用样式文件,5.,运行并观察结果,4.在default.aspx文件中应用样式文件head,四、小结,学习了皮肤文件及其应用,学习了样式文件及其应用,四、小结学习了皮肤文件及其应用,16,五、作业,设计一个新闻网站的主题,五、作业设计一个新闻网站的主题,17,
展开阅读全文