Web编程技术-布局与导航_第1页
Web编程技术-布局与导航_第2页
Web编程技术-布局与导航_第3页
Web编程技术-布局与导航_第4页
Web编程技术-布局与导航_第5页
已阅读5页，还剩61页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

--布局与导航Web编程技术潘冰1、网站布局：主题用户控件母版页2、站点导航：站点地图文件TreeView控件：提供树状结构导航超链接。Menu控件：提供菜单式导航超链接。SiteMapPath控件：显示一些链接的列表。主要内容1.网站布局网站布局概述1〕站点布局传统解决方案使用框架、〔表格、层〕使用包含文件使用用户自己定义控件2〕提供网站布局技术主题母版用户控件1.网站布局1.1主题1.2母版1.3用户控件有关实例在samples/myLayOut1.1主题1.1.1什么是主题1.1.2创立主题和外观1.1.3主题文件的应用1.1.1什么是主题主题(Theme)是指控件和页面外观属性设置的集合〔文件组〕。主题是一个目录，允许三种类型文件：外观文件、样式文件和一些图形文件。外观文件〔皮肤文件,后缀为.skin〕：用来定义一批效劳器控件的外貌。例如，可以定义一批TextBox或者Button效劳器控件的底色、前景色。样式文件〔后缀为.css〕：用来定义HTML的标签。主题必须放在App_Themes目录下。App_Themes下可以创立多个主题。主题可以应用于任何站点，影响站点中页和控件的外观。1.1.2创立主题和外观1右击主题文件夹Themes1名，在弹出的菜单中选择【外观文件】234主题使用效果在网页的定义语句增加Theme=“[主题目录”的属性.如：<%@PageTheme="Themes1"…%>用皮肤文件定义控件的外貌1.1.3主题文件的应用1、在单个文件中使用：〔用Page指令〕在网页文件的第一行参加代码：如，主题目录为theme1。<%@Pagetheme=“Theme1”……%>2、在网站中使用：〔用Web.config文件〕在应用工程根目录下的Web.config文件中进行定义。例，<configuration><system.web><pagestheme="Themes1"/></system.web></configuration>这样就不用在每个网页中定义使用的主题文件了。1.1.3主题文件的应用3、禁止控件使用主题控件的属性EnableTheming=false,可以是控件不受主题影响。如，<asp:TextBoxid="TextBox2"EnableTheming=“False"runat="Server"/>4、同一控件使用不同的外观1.1.3主题文件的应用有时需要对同一种控件定义多种显示风格，此时可以在外观文件中，在控件显示的定义中用SkinID属性来区别。例如，在TextBox.skin文件中对TextBox的显示定义了三种显示风格：<asp:TextBox〔作用于所有不注明SkinID的TextBox控件〕BackColor="Green"Runat=“Server”/><asp:TextBox〔作用于SkinID相同的TextBox控件〕SkinID="BlueTextBox"BackColor="Blue"Runat="Server"/><asp:TextBoxSkinID="RedTextBox"BackColor="Red"Runat="Server"/><%@PageTheme="Themes1"%><html><headrunat="server"><title>用皮肤文件定义TextBox的外貌</title></head><body><formid="form1"runat="server"><asp:TextBoxid="TextBox1"Runat="Server"/><br/><asp:TextBoxid="TextBox2"

SkinID="BlueTextBox"Runat="Server"/><br/><asp:TextBoxid="TextBox3"

SkinID="RedTextBox"Runat="Server"/></form></body></html>不同定义下的三个TextBox控件效果控件属性的应用顺序首先，使用StyleSheetTheme属性〔主题中的.CSS文件〕然后，应用页中的控件属性最后，应用Theme属性1.网站布局1.1主题1.2母版1.3用户控件1.2母版页1.2.1母版页概述1.2.2创立母版页1.2.3定义使用母版页的内容页1.2.4母版页应用举例1.2.1母版页概述母版页(MasterPage)为Web站点创立统一的布局。母版页定义Web页面〔内容页〕的外观和标准行为。可以为站点定义公用的结构和界面元素，如页眉、页脚或导航栏。母版页以“.master”作为后缀的ASP.NET文件，当用户请求ASPX页时，这些ASPX页内容与母版页合并一起输出。1.2.1母版页概述相同的布局例，用母版定义页眉和菜单栏1.2.2创立母版页(.master)母版页由特殊的@Master指令识别。例如： <%@MasterLanguage="VB/C#"……%>母版页可以包含静态文本、HTML元素、效劳器控件以及代码。母版页可以包含一种特殊类型的控件：ContentPlaceHolder控件〔可替换内容占位符〕，ContentPlaceHolder定义了一个母版页呈现区域，可由与母版页关联的内容页的内容来替换。1.2.2创立母版页例1，定义ContentPlaceHolder控件FlowerText：<asp:contentplaceholderid="FlowerText"runat="server"/>ContentPlaceHolder控件只是定义可替换内容的名称，真正的内容由内容页提供。1.2.3定义使用母版页的内容页(.aspx)通过创立各个内容页来定义母版页的占位符控件的内容，在内容页的@Page指令中，通过MasterFile属性与母版页建立绑定。例如，将该内容页绑定到Master1.master母版页。<%@PageLanguage=“C#"MasterPageFile="~/Master1.master"Title="ContentPage"%>1.2.3定义使用母版页的内容页(.aspx)内容页可声明Content控件，通过ContentPlaceHolderID属性与特定的ContentPlaceHolder控件关联，实现内容页与母版页的融合。例如，内容页使用母板页Site.master,并重写了母版页中的内容占位符局部：(content控件自动生成)<%@PageMasterPageFile="Site.master"%><asp:contentid="Content1"contentplaceholderid="FlowerText"runat="server">Withsunshine,water,andcarefultending,roseswillbloomseveraltimesinaseason.</asp:content>例1:创立花鸟网站的母版页Site.master1.创立花鸟网站的母版页(MasterPage1.master)。在Samples下。1.2.4母版页应用举例母版页Site.master效果图：定义控件，在内容页中用关联内容来替换。相关代码页面文件：UseMaster.aspx，rose.aspx，lotus.aspx。都是用了母版文件MastePage1.master。2.创立花鸟网站的ASP.NET内容页(UseMaster.aspx)相关代码演示效果1.网站显示风格1.1主题1.2母版1.3用户控件1.3用户控件1.3.1用户控件概述1.3.2用户控件举例1.3.4使用用户控件本卷须知1.3.1用户控件概述用户控件(UserControl)是一种将页面的局部内容单独保存起来的页面，供多个页面重复使用。通常由系统提供的可视化控件组合而成，在用户控件中可以定义显示界面，还可以编写事件处理代码。用户控件可以减少编写代码的重复劳动，可以使得多个网页的显示风格一致。需要改变网页的显示界面时，只需要修改用户控件本身，所有网页中的用户控件都会自动跟随变化。用户控件与网页之间关系：相同点： 用户控件本身就相当于一个小型的网页，可以为它选择单文件模式或者代码别离模式。区别：用户控件文件的扩展名为.ascx而不是.aspx；代码的别离(隐藏)文件的扩展名是.ascx.cs而不是.aspx.cs；在用户控件中不能包含<HTML>、<BODY>和<FORM>等HTML语言的标记；用户控件可以单独编译，但不能单独运行。只有将用户控件嵌入到.aspx文件中时，才能和ASP.NET网页一起运行。母版页与用户控件之间的区别：用户控件是基于局部的界面设计，而母版页是基于全局性的界面设计。用户控件只能在某些局部上使各网页的显示取得一致，而母版页却可以在整体的外观上取得一致。用户控件通常被嵌入到母版页中一起使用。1.3.2用户控件举例：制作菜单项〔1〕创立用户控件myWebUserControl.ascx实现菜单。将Panel控件拖入设计窗口，然后在其中拖入HyperLink控件，将它们的Text属性分别设成“首页”“花的世界”等，并设置NavigateUrl。1.3.2用户控件举例：制作菜单项〔2〕网页文件中使用用户控件。将用控件文件拖曳到网页文件的适当位置即可。网页中相关代码如下：<%@RegisterSrc="myWebUserControl.ascx"TagName="myWebUserControl"TagPrefix="uc1"%><body><formid="Form1"method="post"runat="server"> <tdstyle="width:100px;height:118px;"bgcolor="#ccffcc"><uc1:myWebUserControlID="MyWebUserControl1"runat="server"/></td></form></body>TagPrefix：代表用户控件的命名空间(这里是ucl)，它是用户控件名称的前缀。TagName：是用户控件的名称，它与命名空间一起来惟一标识用户控件，如代码中的“uc1:WebUserControl1”。Src：用来指明用户控件的虚拟路径。1.3.4使用用户控件本卷须知用户控件只能在同一应用程序的网页中共享。每一个网页可以使用多种不同的用户控件。如果一个网页中需要使用多个用户控件时，最好先进行布局，然后再将用户控件分别拖到相应的位置。更多实例见教材ch10小结为了使得网站中一批网页的显示风格保持一致，ASP.NET2.0提供了主题、用户控件和母版页技术。主题、用户控件和母版主控页虽然都是对控件显示的定义，但是它们定义的层次和影响的范围不同。主题是利用皮肤文件对一批单个控件显示的定义，皮肤文件必须放在主题目录之下，而主题目录又必须放在专用目录App_Themes之下。用户控件与母版页都是由设计者利用标准控件自行创立的组合控件，用户控件只能作用于网页的局部，而母版页是对整体布局的定义。恰当地将三者结合，就可以使网站的多个网页之间，从单个控件到局部、再到整体布局方面在显示风格上取得一致。1、网站布局：主题用户控件母版页2、站点导航：站点地图文件TreeView控件：提供树状结构导航超链接。Menu控件：提供菜单式导航超链接。SiteMapPath控件：显示一些链接的列表。主要内容2.站点导航2.1ASP.NET站点导航概述2.2ASP.NET导航控件2.1ASP.NET站点导航概述2.1.1传统的导航解决方案每个站点都需要一致的导航解决方案，以帮助用户在不同的页面之间进行跳转。传统的解决方案一般包括以下几种：使用超链接标记：缺点是需要大量的手工编码和维护。使用效劳器控件〔如HyperLink、LinkButton〕：缺点是需要手工编码。使用编程方法：缺点是增加了程序开发的复杂性。2.1.2ASP.NET站点导航ASP.NET2.0站点导航功能为用户导航站点提供一致的方法。ASP.NET站点导航将页面的链接存储在一个中央位置〔站点地图〕，并使用特定Web效劳器导航控件在每页上显示导航菜单。默认情况下，站点导航系统使用一个包含站点层次结构的XML文件Web.sitemap，也可以将站点导航系统配置为使用其他数据源，如数据库表。2.1.3站点地图文件站点地图文件定义了应用程序中所有页面的导航结构以及他们之间的关系。站点地图文件Web.sitemap，按XML结构描述站点的结构。必须位于应用程序的根目录。给网站“添加新项”，选择“站点地图”，自动生成Web.sitemap文件，根本结构如下，自己添加内容。2.1.3站点地图文件在Web.sitemap文件中，为网站中的每一页添加一个siteMapNode元素，也可以嵌套siteMapNode元素创立层次结构。Web.sitemap文件包含单个顶级<siteMap>元素。<siteMap>元素中至少嵌套一个<siteMapNode>元素。每一个<siteMapNode>元素通常包含Url、Title和Description和siteMapFiles属性.通过定义<siteMapNode>元素的嵌套来定义项的层次关系。2.1.3站点地图文件网站可有多个站点地图文件，需要在Web.config中进行配置。如，有站点地图文件web1.sitemap和web2.sitemap。2.1.3站点地图文件Web.config配置如下：<configuration><system.web>

<siteMapdefaultProvider=“XmlSiteMapProvider>

<providers>

<addname=“web1.SiteMap”type=“”siteMapFile=“~/web1.sitemap/> <addname=“web2.SiteMap”type=“”siteMapFile=“~/web2.sitemap/></providers></siteMap></system.web></configuration>2.站点导航2.1ASP.NET站点导航概述2.2ASP.NET导航控件有关实例在samples/myLayOut/default.aspx2.2ASP.NET导航控件通过站点导航效劳器控件，将控件绑定到站点地图数据源，可以动态读取站点地图中的导航信息，在Web页面上生成导航超链接。ASP.NET提供的站点导航效劳器控件包括：TreeView：提供树状结构导航超链接。允许用户展开或折叠选定节点。Menu：提供菜单式导航超链接。将光标悬停在菜单上时，将展开包含子节点的节点。SiteMapPath：显示一些链接的列表，这些链接表示用户的当前页以及返回至网站根目录的层次路径。2.2.1TreeView控件1、TreeView概述ASP.NETTreeView控件用于以树状结构图形界面显示分层数据。TreeView包括三种类型的节点：根节点、父节点和叶节点。公开TreeNodeStyle的自定义属性，允许其具有多种外观。TreeView应用例如：完全展开的TreeView控件节点类型：RootNodeCurrentNodeParentNode2、TreeView支持的编程模型：通过声明方法静态定义可以直接在TreeView中创立网站的逻辑结构使用数据绑定：通过SiteMapDataSource控件绑定站点地图文件web.sitemap。通过XmlDataSource控件绑定XML文件。通过编程方法动态构造〔1〕静态定义TreeView属性NavigateUrl与实际网页链接属性ExpaneDepth初始节点显示的深度123效果添加节点和子节点(2)TreeView绑定到站点地图文件通过SiteMapDataSource数据控件将站点地图文件〔web.stitemap〕和绑定到TreeView控件上。(2)TreeView绑定到站点地图文件通过TreeView控件只能标记，“编辑TreeNode数据绑定”，指定TreeView中要显示和链接的内容。〔可选〕12〔3〕编程的方式构成层次结构节点TreeView控件的属性、方法和事件属性：Nodes属性：是TreeView控件中所有节点的集合。一个节点时一个TreeNode对象。如：TreeView1.nodes表示TreeView1控件的所有节点集合。TreeView1.Nodes[0]表示TreeView1控件中第1个根节点。TreeView1。Nodes[0].ChildNodes表示TreeView1kongjian中第一个根节点的子节点集合。TreeView1.Nodes[0].ChildNodes[0]表示TreeView1控件中第一个根节点的第1个子节点。TreeNodeCollection类TreeView控件的Nodes属性是一个TreeNodeCollection类对象。Add方法：向TreeNodeCollection对象添加一个TreeNode对象。如，添加一个节点：TreeNodenode=newTreeNode(“中华大学”)〔node〕〔3〕编程的方式构成层次结构节点TreeNode类TreeView控件中的一个节点是一个TreeNode类对象。TreTreeNode对象属性：Text和Value。TreeNode类提供的构造函数：PublicTreeNode()PublicTreeNode(stringtext)PublicTreeNode(stringtext,stringvalue)PublicTreeNode(stringtext,stringvalue,stringimageUrl)PublicTreeNode(stringtext,stringvalue,stringimageUrl,stringnavigateUrl,stringtarget)实例例7-1生成层次结构导航2.2.2Menu控件1、Menu概述ASP.NETMenu控件用于在ASP.NET网页中显示静态和动态菜单。很适合让终端用户在较大的选项层次结构中导航。显示模式：静态模式:Menu控件完全展开,整个结构是可视的：动态模式:指定局部是静态的,当鼠标指针移动到父节点上时显示其子节点。菜单控件由一个或多个MenuItem组成，这些MenuItem一般组织在层次结构的不同级别中。每个MenuItem包含一些属性，这些属性确定MenuItem的外观〔如文本和navigateURL等〕。2、Menu控件的三种编程模型:通过声明方法静态构成：使用数据绑定:允许将控件的节点绑定到分层数据,如XML文件。也绑定到SiteMapDataSource控件。通过编程方法动态构成:如,从关系数据库中创立菜单。见下页例如。Menu控件Items属性Items属性指定Menu控件中所有菜单项的集合，一个菜单项是一个MenuItem对象。

人人文库> 全部分类> 行业资料 > 管理策划

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论