第七章 网页布局技术.ppt

1、第七章 网页布局技术,ASP.NET用户控件 Web用户控件：用户控件是能够在其中放置标记和 Web控件的容器。可以将用户控件作为一个单元对待，为其定义属性和方法。 自定义控件：自定义控件是编写的一个类，此类从 Control 或 WebControl 派生。,ASP.NET用户控件 Web用户控件和自定义控件都是为了实现代码的重用，使开发方便快捷，提高了开发效率。 创建Web用户控件要比创建自定义控件方便很多，因为它可以重用现有的控件，易于创建。而自定义控件是编译的代码，易于使用但较难于创建，自定义控件必须使用代码来创建。,创建用户控件,Control指令 后台代码,类似于Page指令,pu

2、blic partial class _Controls_UserLoginControl : System.Web.UI.UserControl protected void Page_Load(object sender, EventArgs e) . . ,也有Page_Load事件,ASP.NET用户控件 Web用户控件与 ASP.NET 网页有以下区别： (1) Web用户控件的文件扩展名为 .ascx。 (2) Web用户控件中没有 Page 指令，而是包含 Control 指令，该指令对配置及其他属性进行定义。 (3)Web用户控件不能作为独立文件运行，而必须像处理基本控件一样，

3、将它们添加到 ASP.NET 页中。 (4)Web用户控件中没有 HTML、body 或 form 元素。这些元素必须位于宿主页中;,ASP.NET用户控件 【例7-1】创建一个Web用户控件，用来作为网站中的导航条，当不同的用户登录时，导航条显示内容不同；,使用用户控件,页面中注册和使用 TagPrefix:该属性定义了用户控件所使用的前缀，就是说它将前缀与用户控件相关联，说明使用的是用户控件中的一种。 TagName：定义用户控件名称。 Src：包括在web窗体中用户控件的虚拟路径。,在页面中注册控件,将用户控件放入页面指定位置即可, ,注意事项,用户控件中可以使用其他用户控件 可以像页面

4、一样，在用户控件中使用其他用户控件 但用户控件中不可包含自己，也不能发生任何循环嵌套,用户控件1,用户控件2,用户控件1,用户控件与Page,用户控件与页面的区别？ 后缀名：用户控件以.ascx为后缀名，而页面后缀名是.aspx 指令：用户控件为Control，页面是Page 继承：用户控件继承自System.Web.UI.UserControl，而页面继承自System.Web.UI.Page 用户控件不可直接访问，页面可直接访问,页面：容器; 用户控件：内容。,使用母版页(MasterPage)可以为应用程序中的页创建统一的布局。母版页可以为应用程序中的所有页(或一组)定义所需的外观和标准

5、行为。 当用户请求内容页时，ASP.NET将会把母版页和内容页这两种文件的内容合并执行，输出结果对母版页的布局和内容页的内容进行了合并。,7.2 母版页和内容页,母版页 用于设置页面外观的模板 一种特殊的网页文件 扩展名是.master 内容页 引用母版页的.aspx页面称为内容页,母版页,它可以包括静态文本、HTML元素和服务器控件。通常是用于布局，即定义网站中不同网页的相同部分。 母版页代码和普通的.aspx代码格式很相近，最关键的不同是母版页由特殊的 Master指令识别，该指令替换了用于普通.aspx页的 Page指令，格式如下： ,母版页代码结构, Master page title

6、 ,内容页,以母版页为基础，可以在内容页中添加网站中的每个网页的不同部分。对于页面的非公共部分，在母版页中使用一个或多个ContentPlaceHolder控件来占位，而具体内容则放在内容页中。 例如，如上例代码所示，母版页包含两个ContentPlaceHolder控件，Main和Footer，用于占位。在内容页中，创建两个Content控件，一个映射到ContentPlaceHolder控件Main，而另一个映射到ContentPlaceHolder控件Footer，如图 41所示。,母版页和内容页的结构,母版页的运行过程,在运行时，母版页是按照下面的步骤处理的： 用户通过键入内容页的UR

7、L来请求某页。 获取该页后，读取 Page指令。如果该指令引用一个母版页，则也读取该母版页。如果这是第一次请求这两个页，则两个页都要进行编译。 包含更新的内容的母版页合并到内容页的控件树中。 各个Content控件的内容合并到母版页中相应的ContentPlaceHolder控件中。 浏览器中呈现得到的合并页。,创建母版页和内容页,母版页中包含一个内容占位符，这是母版页中的可变区域，使用内容页中的信息来替换此区域,创建母版页,首先创建一个普通的Web站点，然后在站点根目录下创建一个母版页，默认的情况下母版页的文件名为：MasterPage.master。母版页的扩展名是.master，以.ma

8、ster为后缀的文件都是母版页。, 这是母版页顶部 这是母版页底部 ,创建母版页,简单地说，每个母版页必须包含以下元素： 基本的HTML和XML等Web标记 代码的第一行是 ContentPlaceHolder控件和它的ID属性,创建内容页,创建母版页后，接下来创建内容页。内容页实际上是普通的.aspx文件，包含除母版页外的其他非公共部分。 对于内容页有两个概念需要强调：一是内容页中所有内容必须包含在Content控件中；二是内容页必须绑定母版页。, 这是内容页 ,简单地说，内容页应具有下列三个特点： 内容页中没有和标记，也没有、等这些Web元素，这些元素都被放置在母版页。 在代码的第一行应声

9、明所绑定的母版页 包含控件, ASP学习教程 欢迎光临本网站 ,母版页 【例7-2】为网站添加母版页；,母版页,母版页具有下面的优点： 使用母版页可以集中处理页的通用功能，以便可以只在一个位置上进行更新。 使用母版页可以方便地创建一组控件和代码，并将结果应用于一组页。例如，可以在母版页上使用控件来创建一个应用于所有页的菜单。 通过允许控制占位符控件的呈现方式，母版页可以在细节上控制最终页的布局。 母版页提供一个对象模型，使用该对象模型可以从各个内容页自定义母版页。,站点导航系统,站点导航方式,硬编码到页面文件,包含文件,用户控件,ASP.NET 站点导航系统,在页面散布超链接,编写困难 修改复

10、杂 不易维护,在每个页面上进行编写,包含一个文件,用户自己编写控件实现,基于站点地图,网站地图和导航,对于一个结构复杂网站，内容丰富的网站，应为用户提供一个好的网站导航。好的网站导航应可以使访问者在任何地方都可以清楚地了解自己的位置，且有好的、方便的途径返回首页或上一级菜单。 在ASP.NET 2.0中实现网站导航要涉及两个方面内容：网站地图和网站导航控件。,为了使用导航，必须利用一个标准的方法来描述网站中的每个网页，即网站结构。这个方法不仅要描述网站中每个页面的名称，还应描述出网站的逻辑结构。 网站地图是一种扩展名.sitemap的XML文件，其中包括了站点结构信息。,站点地图,站点地图,站

11、点地图是对站点结构的XML描述 文件名为Web.sitemap,要放在站点根目录下, ,根节点，一个站点地图只能有一个siteMap元素,对应于页面的节点 一个节点描述一个页面,提供链接的文本描述,文件在解决方案中的位置 注意：如果要表示根目录，需要用“/”,说明性文本 并提供光标停留时 显示的内容,Web.sitemap注意事项,注意事项 站点地图根节点为元素，每个文件有且仅有一个根节点。 下一级有且仅有一个节点。 下面可以包含多个新的节点。 站点地图中，同一个URL仅能出现一次。, ,ASP.NET 中的导航控件主要有3种：SiteMapPath控件、Menu控件、TreeView控件 ；

12、,导航控件,SiteMapPath控件,指示页面在站点的逻辑位置的导航。 该类型的导航可以帮助用户理解站点结构 通过该导航，可以迅速找到相关的位置,“面包屑”导航,SiteMapPath控件,SiteMapPath控件会显示一个导航路径，此路径为用户显示当前页的位置，并显示返回主页的的路径。如在上述示例中将SiteMapPath控件添加到在线书店的“计算机网络”页中，将显示如下内容，以超链接方式显示“主页”和“计算机数据”。 主页计算机书籍计算机网络, ,SiteMapPath重要属性,SiteMapPath控件以站点地图做为控件数据源，但是要求站点地图中必须有当前页导航，否则该站点导航控件不

13、会显示。 PathSeparator属性 控制分隔符的样式 可以通过编辑模板更改分隔符为任意样式 分隔符模板 PageLevelsDisplayed属性 控制导航显示的级数 导航过深，影像美观，可通过该属性控制级数,TreeView控件,TreeView控件在页面中是以树型结构来实现导航功能，主要用来显示分级数据，如目录和文件目录。 TreeView控件由一个或多个节点构成。树中的每一项被称为一个节点，由TreeNode对象表示。每个TreeNode还可以包括一个或多个TreeNode对象。包含TreeNode及其子节点的层次结构构成了TreeView控件所呈现的树结构。,TreeView控件

14、,以树形目录方式导航的控件,典型的树形目录,与WinForm中的树形控件相似， ASP.NET提供了方便的树形目录控件的使用方式,TreeView节点类型, ,Menu控件,SiteMapPath控件的意义在于可以准确定位当前位置以及浏览器路线，但作为导航控件而言，其导航功能还是有限的，因为无法实现用户在不同页面之间快速跳转。Menu控件可以帮助我们构建导航菜单。,Menu控件,Menu控件提供静态和动态混合的菜单功能。 静态部分是直接显示在页面上 动态部分是仅在需要的时候才显示,我们经常遇到静态和动态结合的菜单,动态菜单和静态菜单结合，可以提供更多的选项，又不必担心占用页面的空间,Menu控件的使用,与TreeView类似，只是增加了动态选择项。,选择静态还是动态菜单,在这里设置静态显示部分的级别数, , ,导航控件,以上介绍了三个不同的ASP.NET 站点导航控件，利用任何一个控件都可以