前言
学习3种设计网站的技术:导航控件、主题、母版页机制。
一、网站导航
3种导航控件:TreeView控件、Menu控件、SiteMapPath控件。
连接数据源控件:SiteMapDataSource控件。
1.网站地图
网站地图Web.sitemap是一个标准的、有固有格式的XML文件,它存储着网站的导航结构信息。它必须遵顼以下规则:
(1)以<siteMap>元素开始
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
...
</siteMap>
(2)每一页由<siteMapNode>元素来描述
这个页面包含一些基本信息:URL、页面的名称、页面的描述。
<siteMapNode url="~/default.aspx" title="主页" description="网站的主页面" />
(3)<siteMapNode>元素可以嵌套
一个 <siteMapNode>元素表示一个页面,通过嵌套可以形成树形结构的页面组织结构。
<siteMapNode url="~/Default.aspx" title="主页" description="主页面">
<siteMapNode url="~/WebForm1.aspx" title="页面1" description="页面1" />
<siteMapNode url="~/WebForm2.aspx" title="页面2" description="页面2" />
</siteMapNode>
BUG:(IIS配置)没有为请求的 URL 配置默认文档,并且没有在服务器上启用目录浏览
(IIS配置)没有为请求的 URL 配置默认文档,并且没有在服务器上启用目录浏览。_没有为请求的 url 配置默认文档,并且没有在服务器上启用目录浏览。-CSDN博客
2.SiteMapDataSource控件
SiteMapDataSource控件是网站地图的数据源,Web导航控件可以通过SiteMapDataSource控件和分层的网站地图数据绑定,而网站地图中的数据则由网站地图提供程序负责存储。
SiteMapDataSource控件专用于导航数据,但不支持排序、筛选、分页或缓存之类的常规数据源操作,也不支持更新、插入、或删除之类的数据记录操作。
从工具箱拖入SiteMapDataSource控件,代码如下:
<asp:SiteMapDataSpurce ID="SiteMapDataSource1" runat="server" />
为了把导航控件与SiteMapDataSource控件联系起来,需要添加一个绑定到SiteMapDataSource控件的导航控件,关键是设置导航控件的DataSourceID属性为SiteMapDataSource控件的ID。示例代码如下:
<asp:TreeView ID="TreeView" runat="server" DataSourceID="SiteMapDataSource1">
3.导航控件
(1)TreeView控件
TreeView控件以树形结构对网站进行导航,它支持以下功能:
- 数据绑定,允许控件的节点绑定到XML、表格、关系数据。
- 站点导航,通过与SiteMapDataSource控件集成实现。
- 节点文本既可以显示为纯文本,也可以显示为超链接。
- 借助编程方式访问TreeView对象模型,以动态地创建树、填充节点、设置属性等。
- 客户端节点填充
- 在每个节点旁显示复选框的功能
- 通过主题、用户定义的图像和样式可实现自定义外观
拥有众多常用属性:
- CheckedNodes
- ExpandDepth
- ImageSet
- LevelStyle
- Nodes
- SelectedNode
- SelectedNodeStyle
- SelectedValue
- ShowCheckBoxes
- ShowLines
- Target
(2)Menu控件
菜单结构,采用水平或竖直方向形式导航。功能:
- 通过与SiteMapDataSource控件集成提供对站点导航的支持
- 可以显示为可选择文本或超链接文本
- 通过编程访问Menu对象模型,使程序员可以动态创建菜单、填充菜单、以及设置属性等。
- 能够采用水平方向或竖直方向的形式导航。
- 支持静态或动态的显示模式。
用户点击菜单项:
①设置NavigeteUrl属性可跳转页,否则回发到服务器进行处理。
②默认下在同一窗口显示,设置Target属性在新窗口显示链接内容。
常用属性自行查阅......
(3)SiteMapPath控件
SiteMapPath控件显示一个导航路径,此路径为用户显示当前页的位置,并显示返回到主页的路径链接。SiteMapPath控件包含来自站点地图的导航数据,此数据包括有关网站中的页的信息,如URL、标题、说明和导航层次结构中的位置。
二、主题
1.主题简介
主题是有关页面和控件的外观属性设置的集合,由外观文件、级联样式表(CSS)、图像和其他资源组成。项目->App_Themes->主题->.skin文件
1.外观文件
具有文件扩展名.skin的文件。可以定义控件的外观属性。
<asp:LinkButton runat="server" BackColor="Red"></asp:LinkButton>
2.级联样式表
简称样式表,即常用CSS文件,是具有文件扩展名.css的文件,也是用来存放定义控件外观属性的代码文件。
3.图像和其他资源
图像就是图形文件,其他资源可以是声音文件、脚本文件等。
4.主题的应用范围
(1)页面主题应用于单个Web应用程序,它是一个主题文件夹,其中包含控件外观、样式表、图形文件和其他资源,该文件夹是作为网站中的\App_Themes文件夹的子文件夹创建的。每个主题都是\App_Themes文件夹的一个不同的子文件夹。
(2)全局主题应用于服务器上的所有网站,全局主题与页面主题类似,它们都包含属性设置、样式表设置和图形文件。但是,全局主题存储在对Web服务器具有全局性质的名为Themes的文件夹中。服务器上的任何网站以及任何网站中的任何页面都可以引用全局主题。
2.主题的应用
在网页中使用某个主题要在网页定义上加上"Theme=[主题目录]"属性。
<%@ Page Theme="主题1" ...%>
全局主题,应用于整个项目,在项目根目录下的Web.config文件进行配置
<configuration>
<system.web>
<Pages Themes="主题1"></Pages>
</system.web>
</configuration>
优先级规则:如果设置了页的属性,则主题和页合并。如果同时在控件和主题设置了同样属性,则主题会覆盖控件。
3.禁用主题
不希望主题重写控件属性。
1.禁用页的主题通过设置@Page的EnableTheming属性为false实现。
<%@ Page EnableTheming="false"%>
2.禁用控件的主题通过设置控件的EnableTheming属性为false实现。
<asp:Calendar id="Calendar1" runat="server" EnableTheming="false" />
三、母版页
母版页可以为应用程序中的页面创建一致的布局。单个母版页可以为应用程序中的所有页定义所需的外观和标准行为,然后可以创建包含要显示的内容的各个内容项。当用户请求内容页时,这些内容与母版页合并以将母版页的布局与内容页的内容组合一起输出。
1.母版页简介
(1)第一行代码是Master
<%@ Master Language="C#" %>
(2)母版页中声明了控件ContentPlaceHolder,有一个或多个,这些占位符可以替换内容出现的地方。
2.内容页
绑定到特定母版页的ASP.NET页(.aspx)通过创建各个内容页来定义母版页的占位符的内容。
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"%>
<asp:Content ID="Content1" ContentPlaceHolderID="Main" runat="server"
主要内容
</asp:Content>
Tips:内容页写内容通过占位符显示到母版页创建的布局中