《第5章 网站设计》由会员分享，可在线阅读，更多相关《第5章 网站设计（25页珍藏版）》请在金锄头文库上搜索。
1、第5章 网站设计本章开始讨论ASP.NET的页面设计技术，现如今的网页网站、Web Base应用程序越来越注重页面的外观和用户的体验。一致的外观能给用户良好的印象，并能充份展示企业的形象和文化内涵，如可口可乐官方网站是以红飘带为主题的，农业银行官方网站是以绿色为主色调等。章节内容5.1在ASP.NET中应用CSS样式5.2母版技术5.3主题5.4网站地图和导航5.5Web部件5.1在ASP.NET中应用CSS样式在任何Web应用程序的开发过程中，CSS都是非常重要的页面布局方法，而且CSS也是最高效的页面布局方法。CSS发展于1994年10月，为了补救HTML3.2语法中的不足，但是由于当时网
2、络的发展的不足和浏览器的支持率较低，直到1996年底，才正式发表了CSS 1.0规格，也正是1996年之后，浏览器才开始正式支持CSS。5.1.1 创建样式在ASP.NET 3.5中提供了创建CSS样式的功能。打开VS2008，新建lession05网站项目，在解决方案资源管理器中，右击“网站名称”，在右键菜单中单击“添加新项”命令，打开“添加新项”窗口。选择“样式表”选项，可以重命名文档的名称，然后单击“添加”按钮即可创建一个后缀名为.css的样式表文件。5.1.1 创建样式对于样式表的创建形式可以分为以下3种。（1）内联样式 内联样式直接放到HTML标签的内部，CSS能够通过编写样式控制代
3、码来进行页面布局，在编写相应的HTML标签时，可以通过Style属性进行CSS样式控制。 这是一段文字 （2）内部样式表 内部样式表是放置在Web标签页的区中的样式的集合。可以使用来自样式表的样式来格式化Web控件。使用内联样式，让格式与内容清楚的分离，并且可以对同一页面的格式进行多次重用。5.1.1 创建样式（3）外部样式表 外部样式表与内部样式相似，但是必须创建一个.css文件后缀的文件，样式放在一个单独的文件中，并在当前页面中添加引用，这样开发人员可以在应用程序的多个页面上应用相同的样式。5.1.2 应用样式CSS不仅能够用来进行页面布局，同样也可以应用在控件中，使用CSS能够让控件更具
4、美感。在空间上使用CSS的方法和在页面上使用CSS的方法相同。通过编写样式能够让控件的呈现更加丰富，让用户体验更加友好。当用户访问页面时，能够提高用户对网站的满意程度。控件的样式控制，不仅能够使用默认的属性进行样式控制，同样可以使用style属性进行样式控制。5.2 母版技术母版页类似于Word中的模板，允许在多个页面中共享相同的内容，如网站的LOGO，可能需要在多个页面中重用，则可以将其放在母版页中。在Dreamweaver中可以使用模板页，ASP.NET的母版页与此类似。使用母版页可以简化维护、扩展和修改网站的过程，并能提供一致、统一的外观。5.2.1 创建母版页在“添加新项”窗口中，当选
5、择“母版页”选项后，单击“添加”按钮即可向项目中添加一个母版页。母版页的后缀名为.master。母版页同Web窗体在结构上基本相同，与Web窗体不同的是，母版页的声明方法不是使用Page的方法声明，而是使用Master关键字进行声明。5.2.2 在web.config中配置母版页 可以在web.config配置文件中定义母版页，这样母版将被应用到网站中所有的文件或者是某个指定文件夹的文件。假如内容页中没有包含任何Content控件，则母版页将自动被忽略，配置代码如下。 5.2.3 创建内容页使用母版页的页面被称作内容窗体（也称内容页）。内容窗体不是专门负责设计的页面，它们只需要关注一般页面的布
6、局、事件以及窗体结构即可，所以内容窗体无需过多的考虑页面布局。当用户请求内容窗体时，内容窗体将与母版页合并，并将母版页的布局和内容窗体的布局组合在一起呈现到浏览器。创建内容窗体的方法基本同Web窗体一样，在VS2005中创建Web窗体时，必须勾选“选择母版页”复选框，而在VS2008中，有单独的内容页可以选择，单击“添加”按钮，系统会提示选择相应的母版页，选择相应的母版页后，单击“确定”按钮即可创建内容窗体。5.2.4 嵌套母版页母版页与母版页之间能够嵌套运行，让一个母版页作为另一个母版页的子母版，能够方便地对页面进行模块化。当编写Web应用时，可以使用母版页进行较大型的框架布局，对一个页面进
7、行整体的样式控制。同样可以使用母版页进行嵌套，对细节的地方进行细分。嵌套母版页之后，使用子母版页的页面将不能直接进行页面编辑，在VS2008中，使用子母版页的页面将显示为空白，但并不表示页面显示将为空白。5.3 主题读者一定非常熟悉Windows主题，当选择不同的主题设置时，Windows用户界面将会有不同的变化。ASP.NET提供了同样主题的技术，这让用户可以对Web站点进行统一的控制，很多Blog站点都提供了主题选择功能，如控件的显示、页面的布局等。很多初学者容易混淆主题与CSS的区别，CSS用于控制HTML格式的呈现，而主题则可以控制ASP.NET服务器控件的很多属性，一些属性可能会生产
8、生不一样的HTML输出。5.3.1 创建主题主题是属性设置的集合，通过使用主题的设置能够定义页面和控件的样式，然后在某个Web应用程序中应用到所有的页面以及页面上的控件，以简化样式控制。主题包括一系列元素，这些元素分别是皮肤、级联样式表（CSS）、图像和其他资源。主题文件的后缀名称为.skin，创建主题后，主题文件通常保存在Web应用程序的特殊目录下。5.3.1 创建主题创建外观文件。5.3.2 处理主题冲突当应用一个主题到页面上时，ASP.NET会检查Web页面上的控件以及定义的皮肤文件以查看是否为控件定义了属性，如果在皮肤文件中存在匹配的皮肤定义，将覆盖控件本身的属性定义而使用皮肤定义。也
9、就是说，如果页面上应用了皮肤，那么在皮肤中定义的属性将具有优先权。5.3.2 处理主题冲突在某些情况下可能需要改变这个行为，如可能让某个TextBox控件的属性设置能够覆盖皮肤文件中的设置，此时可以使用StyleSheetTheme属性来代替Theme属性，可以在VS2008的属性窗口中为StyleSheetTheme属性指定一个皮肤，声明代码如下。任何由多个页面组成的网站都需要某种导航用户接口。首先，必须定义站点的逻辑结构；然后，添加用户接口元素来允许用户在站点结构的各个部分之间来回移动。在ASP.NET 2.0以前，要求开发者自己来解决这两个问题，到了2.0版本以后，ASP.NET提供了一
10、个简单的方法来定义站点的结构，并且包括大量的Web控件专门设计来显示站点导航用户接口。5.4.1 创建网站地图 5.4.2 导航控件在网站制作中，常常需要制作导航来让用户能够更加方便快捷地查阅到相关的信息和资讯，或能跳转到相关的板块。在Web应用中，导航是非常重要的。ASP.NET提供了一种站点导航的简单方法，即使用站点图形导航控件SiteMapPath、TreeView和Menu，这3个控件都可以在页面中轻松建立导航，它们的基本特征如下。SiteMapPath：检索用户当前页面并显示层次结构的控件。这使用户可以导航回到层次结构中的其他页。SiteMap控件专门与SiteMapProvider
11、一起使用。TreeView：提供纵向用户界面以展开和折叠网页上的选定节点，以及为选定项提供复选框功能。TreeView控件还支持数据绑定。Menu：提供在用户将鼠标指针悬停在某一项时，弹出附加子菜单的水平或垂直用户界面。5.4.2 导航控件TreeView和Menu控件有以下区别。Menu展开时，是弹出形式的展开，而TreeView控件则是就地展开。Menu控件并不是按需下载，而TreeView控件则是按需下载的。Menu控件不包含复选框，而TreeView控件包含复选框。Menu控件允许编辑模板，而TreeView控件不允许模板编辑。Menu在布局上是水平和垂直的，而TreeView只是垂直
12、布局。Menu可以选择样式，而TreeView不行。5.5 Web部件在ASP.NET中提供了Web部件，所谓的Web部件是指用户可以灵活、自由地改变界面，包括指定功能模块的显示与隐藏、摆放位置等。而这些更改可以适用于网站上的所有用户和个体用户。5.5.1 Web部件概述为了提高用户体验度，使用户可以随意地更改自己的风格和浏览方式，ASP.NET 3.5提供了Web部件。Web部件可以分为3个组成部分，即个性化设置、Web部件结构组件和Web部件控件。5.5.1 Web部件概述在ASP.NET 3.5控件中提供的WebParts控件可以分为以下5种类型。实现Web部件管理：包括WebPartM
13、anager和ProxyWebPartManager。WebPart Manager是整个Web部件的控制中心，如果母版页中使用了WebPartManager，与之关联的内容页必须使用ProxyWebPartManager。作为容器的WebPartZone控件：在这个容器中可以添加Web服务器控件，用户控件或者继承自WebPart类的控件。实现目录管理的控件：包括CatalogZone、DeclarativeCatalogZone、PageCatalog Zone、ImportCatalogZone。实现WebPart编辑的控件：包括AppearanceEditorZone、BehaviorE
14、ditorZone、EditorZone、LayoutEditorZone、PropertyGridEditorZone。实现Web部件之间通信的ConnectionsZone控件。5.5.2 Web部件的应用在ASP.NET中创建Web部件的具体步骤如下。（1）创建Web窗体页面，使用表格将页面划分不同的区域。（2）在页面中添加一个WebPartManager控件。WebPartManager控件是Web部件中控件的依赖控件。（3）在页面划分的不同区域中添加WebPartZone控件。可以在WebPart Zone控件中添加其他控件，WebPartZone控件用来控制控件组的显示和隐藏。（4
15、）向WebPartZone控件中添加ASP.NET控件或自定义控件。5.5.2 Web部件的应用控件描述WebPartManager管理页面上的所有Web部件控件。每个Web部件页都需要一个（且只需要一个）WebPartManager控件CatalogZone 包含CatalogPart控件。使用此区域创建Web部件控件目录，用户可以从该目录中选择要添加到页上的控件EditorZone包含EditorPart控件。使用此区域使用户可以对页面上的 Web部件控件进行编辑和个性化设置WebPartZone包含并提供WebPart控件（构成页面的主要用户界面）的整体布局。只要您创建具有Web部件控件的页，就会使用此区域。页面可以包含一个或多个区域ConnectionsZone包含WebPartConnection控件，并提供用于管理连接的用户界面AppearanceEditorPartLayoutEditorPartBehaviorEditorPartPropertyGridEditorPart允许用户对页面上Web部件用户界面控件的各个方面进行个性化设置
