【Asp.net精品源码栏目提醒】:网学会员,鉴于大家对Asp.net精品源码十分关注,论文会员在此为大家搜集整理了“母版 主题 用户控件 网页导航 - 软件工程”一文,供大家参考学习!
使用母版页(Master Page) 母版页是一个网站统一界面的基础,我们在浏览页面的时候经常看 到,有些网站的所有顶端和底端内容都是相同的。
实现这种相同有很 多种方法,最笨的一种方法是每个网页都进行同样的设计,最简单的 方法就是使用母版页。
母版页基础 在使用ASP的时候,要想让整个网站页眉页脚等格式统一,一般使用 frameset来解决。
它可以将页面分成3个框架,最上面和最下面的框 架保持不变,只允许更改中间的内容框架。
那时框架的内容以及部署 都需要手工完成。
而在
ASP.NET中新添加了Master Page页面,专门 用于统一界面框架。
建立一个母版页 首先学习创建一个母版页,然后再了解母版页的组成。
创建母版页的步骤如下。
(1)右击当前项目名称,单击“添加新项”菜单命令,打开“添加新项”对话框。
(2)选择“母版页”模板,系统将自动命名为“MasterPage.master”,这里不需要修改名字。
注意:母版页文件的扩展名为“.master”。
(3)单击“添加”按钮,在解决方案资源管理器中生成了一个母版页文件。
(4)双击“MasterPage.master”文件,在页面的“设计”视图的整个文件中,只有两个 ContentPlaceHolder服务器控件,这是允许改变的内容部分,一个在页面的head中,一个在页面的 body中。
而其他固定部分,在此控件以外的地方添加。
(5)在此文件中加个HTML表格,设置为3行2列。
(6)将“ContentPlaceHolder1”控件拖到第2行第2列中。
(7)在第1行中显示欢迎信息,主要是为了在母版页中显示固定的内容。
最终页面的设计都是一些 隐藏的网格线,并没有非常特殊的设计,如图9.1所示。
下面给出母版页的源代码。
建立一个内容页(Content Page) 上一节创建好了母版页,本节将在一个内容页中,应用这个母版,让读者看看
ASP.NET程序下的母 版页是什么样子。
(1)右击当前项目名称,单击“添加新项”菜单命令,打开“添加新项”对话框。
(2)此时,选中对话框右下角的“选择母版页”复选框。
然后选择“Web窗体”项,将这个窗体命名为 ContentP.aspx,单击“添加”按钮,此时打开一个对话框,让用户选择要应用哪个母版页。
(3)因为本例只创建了一个MasterPage.master母版,所以选择这个文件,然后单击“确定”按钮, 此时生成的页面源代码如下所示。
在母版页使用相对路径应注意的问题 在母版页中使用图像文件时,内容页是否可以正常显示这个图像。
下面通过试验来测试这个路径问 题。
(1)在网站下添加一个LOGO,本例使用了Google的LOGO。
(2)在母版页文件MasterPage.master中添加一个img控件,然后设置其图像文件属性如下所示。
(3)在网站根目录下添加一个新文件夹“Content”,将上节的ContentP.aspx页面拖到这个文件夹 内。
主要目的是让母版页和内容页不在同个目录下。
因为实际项目都很大,不同的内容都会分类在 不同的目录下。
(4)此时设置ContentP.aspx为起始页,运行后发现图像根本没有显示。
这就是经常遇到的母版页 路径问题。
凡是在母版页遇到文件路径时,如图像的文件来源、链接的文件去向等,都需要使用绝对路径,或 者使用ResolveUrl方法实现相对路径。
本例将img的属性修改为如下所示。
此时再运行程序,图像就可以正常显示了,如图9.3所示。
在配置文件中设定母版页 如果要修改现在的网站,让每个网页都能应用母版页,那么不需要修改每个 网页的属性,只需要在web.config文件中进行配置就可以,主要配置细节如 下所示。
这样做虽然很方便,但毕竟不很灵活,如果个别目录下的内容不需要应用母 版,那还有一个方法,将不需要应用母版页的内容页都集中在一个目录下, 然后在这个目录下单独设置web.config文件。
注意:即使设置了web.config中全部网页都应用母版页,但用户可以通过修 改网页的MasterPageFile属性来更改母版页。
修改标题 当一个内容页应用了母版页后,它的页面源代码中就少了“title”这一项,本节就学习没有了这个标题 项,如何修改网页的标题。
打开内容页ContentP.aspx,其头文件如下所示。
其中所有的属性就是针对当前页面的一些配置, 在任意属性后面,按“Space”键,就可以出现所能选择的属性,可以看到有“Title”项,选中此项,并 将其属性设置为“我是内容”。
好了,运行内容页,再看看内容的标题,如图9.4所示。
访问母版页中的控件 在.NET中,由于是先加载内容页,然后再加载母版页。
所以不能用常规的方 法在内容页中直接访问母版页的属性和方法。
母版页类提供了 “Master.FindControl”方法类帮助开发人员从内容页调用母版页的数据。
现在在母版页中添加一个Label控件,然后在内容页的“Page_Load”中修改这 个控件的显示文本,代码如下所示。
protected void Page_Loadobject sender EventArgs e Master.FindControlLabel1 as Label.Text 这是内容页的修改 运行内容页,看看母版页中的Label显示文本是否已经修改。
使用方法与处理事件 为了让内容页可以访问母版页的成员,Page类公开了Master属性。
如果想在某个内容页访问到其 母版页的属性和方法,只需要在内容页的源代码中增加下面的代码: 其中的MasterType指令就是创建对此母版页的强类型引用,而virtualPath则指明了需要强类型引用 的母版页文件名。
经过上面的设定后,即可以在内容页中调用母版页的公用属性及方法,如以下代 码所示。
this.Label1.Text this.Master.loginName this.Label2.Text this.Master.GetLoginTime 上面例子中的loginName和GetLoginTime就是母版页中提供的公有属性和方法。
下面就通过一个实 例来学习如何访问母版页的公有属性。
关于母版页嵌套(Nesting) 母版页嵌套,就是让一个母版页可以引用另外母版页。
利用嵌套的母版页我 们可以创建组件化的母版页。
如很多网站包含一个用于定义站点外观的总体 外观,这个外观就可以通过母版页来完成。
而且,不同的功能里又可以定义 各自的子母版页,这些子母版页引用了网站的总母版页,并相应定义当前主 体内容的外观。
在旧版本的VS中,并不提供第2个母版页的设计时支持,但VS2008可以。
打 开本章的案例,在网站下再添加一个新的母版页,命名为 “MasterPage2.master”。
在添加时,选中“选择母版页”复选框,然后把 MasterPage.master作为本页的母版页。
在MasterPage2.master的第2个 Content控件内输入“我是第2个母版”,用以在页面显示时进行区别。
然后在网站中添加一个Web窗体Default2.aspx,此窗体应用 MasterPage2.master作为母版,读者可运行Default2.aspx,测试嵌套母版页 的运行效果。
使用主题(Themes) 主题和外观是
ASP.NET时代的主要界面设计方法,本章介绍如何为 Web应用程序创建统一的主题和外观。
主题包括网页的CSS布局、按 钮的外观,以及一些图片、资源。
为了保持整个网站的美观,我们一 般会定义很多的CSS,现在通过
ASP.NET的主题,程序员可以更简 单地布局网站,而且能做到统一和更改方便。
创建主题 主题就是一个页面中的布局,它包括很多类布局,如控件外观的布 局、页面的布局等。
建立一个简单的主题 主题分为页面主题和全局主题两种应用。
页面主题是一个主题文件夹,其中 包含控件外观、样式表、图片和其他资源,该文件夹是作为网站中的 App_Themes文件夹的子文件夹创建的,下面就给出了一个网站的页面主题 文件夹结构。
全局主题是可以应用于服务器上的所有网站的主题。
其存储在 Web服务器的名为Themes的文件夹中。
WebSite1 App_Themes Theme1 Controls.skin Theme1.css Theme2 Controls.skin Theme2.css外观(Skins) 外观文件的扩展名是.skin,也被称为皮肤,其包含各个服务器控件(如Button、 Label、TextBox或Calendar控件)的属性设置。
控件外观设置类似于控件标记本身, 但只包含要作为主题的一部分来设置的属性。
例如下面是Button控件的外观。
如果页面中的控件并不都使用这一外观,则需要指定外观的“skinid”属性,如下所示。
这样带skinid的外观在页面中引用时,使用如下代码。
建立级联样式表单(CSS) 前面两节创建了一个主题和一个外观文件,这些都是针对页面中的控 件进行设置,现在再来对页面的整体布局进行控制,如设置页面的背 景色、表格的边框等,这些就需要用到级联样式表CSS。
本节简单介 绍下CSS在主题中的应用,具体的应用语法会在后面的第21章详细介 绍。
在“FirstTheme”下添加一个样式表,命名为“pagecss.css”,设置其中 的样式如下所示。
运行时更改主题和外观 现在的用户越来越喜欢用Blog来记录或分享自己的心情,在使用Blog时,可以看到网站提供很多风格供用户选择。
这些不同的风格就是网站提供的主题,不同的主题,外观将不同。
用户会在选择主题后,自动变化Blog的外观,本 节就介绍如何在
ASP.NET中实现在何种主题的动态切换。
还是接前面的实例,打开Default.aspx页面的源代码,在div层中添加两个链接,用于切换主题,代码如下所示。
选择页面主题: 第一个主题 第二个主题 注意,每个链接传递一个参数page_theme,这个参数的值就是要切换的主题的名称。
要实现主题的切换,必须在页面初始化的时候,就设置好主题,所以本例还需要在Page_ PreInit事件中书写调整主 题的代码,如下所示。
通过配置文件应用主题 前面介绍过,主题分为页面主题和全局主题。
要将一个主题设置为页面主 题,只需要在当前页的“Page”中,设置“Theme”属性即可,如果要将一个 主题设置为全局主题,就需要修改网站的配置文件web.config。
添加的配置 内容如下所示。
…… 如果某个文件夹下的网页都具有同一主题,则在此文件夹下添加一个 web.config文件,在其中使用来应用当前 文件夹的主题。
自定义日历控件的外观 本节通过设置一个日历的主题来学习如何方便的定义主题。
打开FirstTheme主题下的myControl.skin外观文件,添 加一个日历控件的外观,如下所示。
如何应用从网络下载的主题 网络提供了很多共享资源,随着
ASP.NET主题的应用越来越广,很多 网站也提供了主题的下载,本节介绍如何把这些下载的资源,应用在 自己的
ASP.NET程序中。
下载主题 笔者推荐一个有很多主题的国外网站 http://www.dotnettreats.com/SampleThemes/Default.aspx,这里有 多种MSN或XP风格的主题。
该网站提供一个下载包,其中包含了所 有的主题,地址是http://www.dotnettreats.com/tools/Default.aspx。
上一篇:
Silverlight4.0实务应用范例讲座
下一篇:
哈弗F7 VS名爵HS,谁更懂得年轻人的心?