《asp.net应用开发教程教学资源案例12 设计网站外观》由会员分享，可在线阅读，更多相关《asp.net应用开发教程教学资源案例12 设计网站外观（26页珍藏版）》请在金锄头文库上搜索。
1、案例12 设计网站外观,授课课时：4课时（180分钟） 主编：刘志成,2,12.1 案例描述,ASP.NET2.0提供母版页设计方案可以快速创建风格一致的应用程序。母版页的主要功能是为应用程序提供创建统一的用户界面和样式，提供共享的HTML、控件和代码，可作为一个模板供网站内所有页面使用，从而提升了整个程序开发的效率。使用母版页设计的网站主页如图所示。,案例描述,3,12.1 案例描述,开发一些大型网站时，利用网页设计中的CSS样式可以使开发人员有效地设计出外观一致的网页。 ASP.NET 2.0提供主题实现相同效果的网页。 主题是指页面和控件外观属性设置的集合。开发人员可以利用主题定义页面和
2、控件的外观，还可以利用主题快速一致地设置所有应用程序的页面。应用主题的登录页面如图所示。,案例描述,4,12.2 案例完成步骤,12.2.1 创建项目与母板页,1创建项目 在Microsoft Visual Studio 2005中创建名称为ch12的网站的具体操作步骤如下： （1）依次选择“开始”“程序”“Microsoft Visual Studio 2005”“Microsoft Visual Studio 2005”命令，启动Microsoft Visual Studio 2005，进入.NET集成开发环境。 （2）在Microsoft Visual Studio 2005集成开发环境
3、中，依次选择“文件”|“新建”|“网站”命令，打开“新建网站”对话框，输入网站名称为ch12，创建名称为ch12的网站，如图所示。,5,12.2 案例完成步骤,12.2.1 创建项目与母板页,（3）将ch02中的“changsha.aspx”、“guangzhou.aspx”、“qingdao.aspx”、“shanghai.aspx”和“test.aspx”5个页面添加到ch12项目中。,6,12.2 案例完成步骤,12.2.1 创建项目与母板页,2创建母版页 （1）打开网站ch12。 （2）右键单击“解决方案资源管理器”中的项目名“ch12”，打开快捷菜单，然后选择“添加新项”选项，打开如
4、图所示的对话框。,7,12.2 案例完成步骤,12.2.1 创建项目与母板页,（3）在“模板”列表中选择“母版页”，在“名称”文本框将其命名为“MasterPage.master”，单击“添加”按钮，母版页即被添加到项目中。 （4）默认的母版页如图所示。,8,12.2 案例完成步骤,12.2.1 创建项目与母板页,（5）在Dreamweaver CS3新建一个页面，在新建的页面上插入一个1行2列的表格（第一个主表格），进行页面设计。,9,12.2 案例完成步骤,12.2.1 创建项目与母板页,（6）设计母版页，最终得到的母版页设计效果如图所示。 （7）母版页的代码参阅教材。,10,12.2 案
5、例完成步骤,12.2.1 创建项目与母板页,（8）编写LinkButton单击事件，单击母版页中的导航栏处的“长沙”打开一个新的页面，编写其单击事件代码如下：,protected void LBtn_CS_Click(object sender, EventArgs e) Response.Redirect(“changsha.aspx“); ,11,12.2 案例完成步骤,12.2.1 创建项目与母板页,3创建内容页 在创建母版页之后，接下来创建内容页。内容页的创建与母版页的创建类似，创建步骤如下： （1）打开网站ch12。 （2）右键单击“解决方案资源管理器”中的项目名“ch12”，打开快
6、捷菜单，然后选择“添加新项”选项，打开如图所示的对话框。,12,12.2 案例完成步骤,12.2.1 创建项目与母板页,（3）在“模板”列表中选择“Web窗体”，在“名称”文本框将其命名为“main.aspx”，同时选中“选择母版页”复选框。 （4）单击“添加”按钮，打开“选择母版页”对话框，如图12-12所示。在该对话框中选择前面创建的母版页“MasterPage.master”，单击“添加”按钮，就创建了一个新的内容页。,13,12.2 案例完成步骤,12.2.1 创建项目与母板页,（5）基于母版页生成的内容页如图所示。,14,12.2 案例完成步骤,12.2.1 创建项目与母板页,（6）
7、基于母版页生成的页面的代码如下所示。,15,12.2 案例完成步骤,12.2.1 创建项目与母板页,（7）在“Content1”处拖入1个ImageButton控件和1个Panel控件，Panel控件中拖入3个HyperLink控件；在“Content2”处拖入一个Image控件，控件属性设置同作业2的属性设置表。 （8）编写ImageButton单击事件，在Page对象的Load事件中添加如下代码：,16,12.2 案例完成步骤,12.2.1 创建项目与母板页,程序运行后，浏览内容页main.aspx的效果如图所示。,17,12.2 案例完成步骤,12.2.2 应用主题与外观,1在单个页面中
8、应用主题 在单个页面中应用主题，只要在页头设置Theme属性值为主题名就行，然后再设置控件的SkinID属性，就能看出效果。单个页面中应用主题页面的HTML代码如图12-15所示。请读者注意用椭圆突出显示的代码。,18,12.2 案例完成步骤,12.2.2 应用主题与外观,3动态加载主题 动态加载主题，就是通过编程方式应用主题，ASP.NET运行库在PerInit事件激发后，立即加载主题信息。实现动态加载主题的核心是修改Page对象的Theme属性值。 4登录页面应用主题 在程序运行后才能看到主题的应用效果，如图所示。,19,12.3 知识链接,12.3.1 母版页概述,1母版页 母版页是一个
9、以具有扩展名为.master的ASP.NET文件，它可以包含静态布局。母版页由特殊的Master指令识别，该指令的使用使母版页有别于内容页，每个.master文件只能包含一条Master指令。母版页除了开头的Master指令和一个或多个ContentPlaceHolder服务器控件外，类似于普通的ASP.NET页。 2内容页 内容页就是原来讲到的Web窗体，但它与母版页关系密切，母版页定义了网页的框架，内容页主要包含页面中的非公共的内容，每个内容页定义一个特定的ASP.ENT页上每个区域的内容。内容页的关键部分是Content控件，它为其他控件的容器。Content控件只能与对应的Conten
10、tPlaceHolder服务器控件结合使用，而不是一个独立的控件。,20,12.3 知识链接,12.3.2 主题的概述,主题是指页面和控件外观属性设置的集合。开发人员可以利用主题定义页面和控件的外观，还可以利用主题快速一致地设置所有应用程序的页面。 1主题的组成元素 主题由CSS级联样式表、外观、图像和其他资源组成，其中外观是必不可少的组成元素之一。 （1）CSS样式 （2）外观文件 （3）图像和其他资源,21,12.3 知识链接,12.3.2 主题的概述,2主题文件的存储和组织方式 若在项目中添加一个外观文件，其操作步骤如下。 （1）右键单击“解决方案资源管理器”中的项目名，打开快捷菜单，然
11、后选择“添加新项”选项，打开“添加新项”对话框。 （2）在“添加新项”对话框的“模板”列表中选择“外观文件”，单击“添加”按钮就弹出如图所示的警告框。单击“是”按钮就可以添加一个外观文件。,22,12.3 知识链接,12.3.3 主题的创建,1创建外观文件 创建外观文件的步骤如下： （1）右键单击“Label”，打开快捷菜单，然后选择“添加新项”选项，打开如图所示的对话框。,23,12.3 知识链接,12.3.3 主题的创建,（2）在“添加新项”对话框的“模板”列表中选择“外观文件”，在“名称”文本框中将其命名为“Label.skin”，单击“添加”按钮。 （3）添加外观文件之后，解决方案资源
12、管理器窗口中主题文件夹文件组织方式如图所示。,（4）在“Label.skin”外观文件中添加相关代码，用来设置页面中Label控件的外观。其代码如下：,24,12.3 知识链接,12.3.3 主题的创建,2创建CSS文件 在Visual Studio 2005中创建CSS文件的步骤如下： （1）右键单击“Label”，打开快捷菜单，然后选择“添加新项”选项，打开“添加新项”对话框。 （2）在“添加新项”对话框的“模板”列表中选择“样式表”，在“名称”文本框中将其命名为“text.css”，单击“添加”按钮。 （3）在打开“text.css”样式文件窗口的右边单击属性窗口中的“Style”属性，
13、打开“样式生成器”窗口，如图所示。 （4）根据需要设置相应的属性， 单击“确定”按钮，即可定义好样式文件。,25,12.4 拓展提高,选择题,1. 下面哪一个页面是母版页( )。 A. Default.aspx B. Default.ascx C. Default.master D. Default.skin 2. ContentPlaceHolder服务器控件起的作用是（ ）。 A. 创建母版页 B. 创建母版页上的可编辑区 C. 创建母版页上的不可编辑区 D. 创建内容页 3. 外观文件的扩展名是（ ）。 Aaspx Bascx Cmaster Dskin 4. 在控件中应用主题应设置下面哪个属性( )。 A. Theme B. SkinID C. MasterPageFile D. CodeFile,、,26,12.4 拓展提高,操作题,1操作要求 （1）在OnlineShop网站中创建一个主题，在主题中设置标题Label控件的样式和提示信息Label控件的样式。 （2）在OnlineShop网站中的用户注册页面和用户登录页面中应用主题。 （3）创建OnlineShop网站的母版页。 （4）利用母版页创建OnlineShop网站主页。 2操作说明 （1）比较使用母版页创建网页与不使用母版页创建网页的不同，体现母版页的用途。 （2）注意同一种控件不同样式的定义。,、,
