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