4任务单情境1：前台设计与数据传递——外观设计_主题情境与任务设计

4任务单情境1：前台设计与数据传递——外观设计由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“主题情境与任务设计”。

情境1：前台设计与数据传递——外观设计

姓名

学号

组别

一、任务目标 知识目标

熟悉母版页的运行机制和优点； 掌握创建母版页和内容页的方法； 掌握创建嵌套母版页的方法。能力目标

能利用母版进行网站布局。

二、任务实施

情境拓展1：创建母版页

资讯：

1、添加新项—母版页；

2、教师提供所用的图片、任务单、考核单。

实施方案：

成果展示（关键技术总结）： 沟通交流：

归纳总结（对老师总结的知识进行梳理）： 情境拓展2：添加内容页

母版页可以被多个内容页所共有，内容页是每个页面单独的内容。使用母版页节省了开发时间，一旦某个母版页创建完毕，只需要开发内容页中的内容即可。

资讯：

1、右击网站名称——添加新项——WEB窗体——选择母版页；

在母版页上右击——添加内容页；

2、教师提供所用的图片、任务单、考核单。

实施方案：

成果展示（关键技术总结）： 沟通交流：

归纳总结（对老师总结的知识进行梳理）： 情境拓展2：添加内容页

情境拓展3：嵌套母版页的方式开发博客主页

资讯：

1、在已经创建好的母版页基础上创建子母版页；

2、创建一个页面作为子母版页的内容页；

3、教师提供所用的图片、任务单、考核单。

实施方案：

成果展示（关键技术总结）： 沟通交流：

归纳总结（对老师总结的知识进行梳理）：

情境拓展4：访问母版页上的控件

资讯：

1、创建一个母版页，创建一个内容页；

2、在母版页上添加一个Label 控件用于显示系统日期； 显示当前系统日期的方法：

3、在内容页上添加一个Label 控件用于显示母版页Label 控件的Text 属性值；

4、教师提供所用的图片、任务单、考核单。

实施方案：

成果展示（关键技术总结）： 沟通交流：

归纳总结（对老师总结的知识进行梳理）： 任务：外观设计——主题与皮肤 情境展示

个性化的外观直接决定网站受欢迎的程度。这就意味着在网站开发过程中，设计和实现美观实用的用户界面的重要性。在ASP.NET中提供了一种称为主题的新功能，主题是定义网站中页和控件外观的属性集合。主题包括外观文件CSS文件盒图形。通过应用主题，可以为网站中的页提供一致的外观。

知识目标

掌握创建和使用主题的方法； 掌握动态加载网站主题的方法。能力目标

能利用主题进行网站布局。

情境拓展1：在留言板中应用主题

为单个页面设置一个样式表主题，即StyleSheetTheme主题。

资讯：

1、利用表格进行布局；

2、在网站的根目录下创建一个主题文件夹，在主题文件夹下面创建一个子文件夹，在子文件夹下面创建一个外观文件,在外观文件中，设置TextBox背景颜色为银色，字体为蓝色。

3、应用主题：

<%@ Page StyleSheetTheme=“themename” %>

<%@ Page Theme=“themename” %>

4、教师提供所用的图片、任务单、考核单。实施方案：

成果展示（关键技术总结）： 沟通交流：

归纳总结（对老师总结的知识进行梳理）：

情境拓展2：为会员注册换几套新装

资讯：

1、利用表格进行布局；

2、在外观文件中定义多个Skin选项：

3、通过SkinID属性设置控件加载外观：

3、教师提供所用的图片、任务单、考核单。

实施方案：

成果展示（关键技术总结）： 沟通交流：

归纳总结（对老师总结的知识进行梳理）： 情境拓展3：在主题中添加绚丽图片

假设完善了一幅图片，想把这些图片用于整个网站的“确定”和“取消”按钮，就可以把图片存放到主题中。

资讯：

1、利用表格进行布局；

2、利用外观文件把图片放置在按钮上： ImageUrl=“w/cancel.gif“

3、通过SkinID属性设置控件加载外观；

4、教师提供所用的图片、任务单、考核单。实施方案：

成果展示（关键技术总结）： 沟通交流：

归纳总结（对老师总结的知识进行梳理）： 情境拓展4：在留言板中设置文本框主题

资讯：

1、利用表格进行布局；

2、在外观文件中定义多个Skin选项；

3、通过SkinID属性设置控件加载外观；

4、教师提供所用的图片、任务单、考核单。实施方案：

成果展示（关键技术总结）： 沟通交流：

归纳总结（对老师总结的知识进行梳理）：

情境拓展5：通过SkinID为控件换主题

设置控件加载主题时，除了可以通过HTML代码设置SkinID属性外，还可以通过编程方式在后台代码中设置SkinID属性。

资讯：

1、利用表格进行布局；

2、在外观文件中定义多个Skin选项；

3、在页面的PreInit事件中以编程的方式设置控件的SkinID 属性；

4、教师提供所用的图片、任务单、考核单。实施方案：

成果展示（关键技术总结）： 沟通交流：

归纳总结（对老师总结的知识进行梳理）：

情境拓展6：禁止服务器控件更换主题

设置控件加载主题时，除了可以通过HTML代码设置SkinID属性外，还可以通过编程方式在后台代码中设置SkinID属性。

资讯：

1、利用表格进行布局；

2、在外观文件中定义多个Skin选项；

3、为了 快速的为整个网站的所有页面设置相同的主题，还可以打开web.config文件，找到 节点，在该节点下找到

节点添加主题属性；

4、禁用方法：

快速的为整个网站的所有页面禁用主题，打开web.config文件，找到 节点，在该节点下找到

节点把属性设置为空；

单个页面：<%@ Page EnableTheming=”false“ %> 禁用某个控件：只要把某个控件的EnableTheming=”false“ EnableTheming属性设置为false;

5、教师提供所用的图片、任务单、考核单。

实施方案：

成果展示（关键技术总结）： 沟通交流：

归纳总结（对老师总结的知识进行梳理）：