网站设计-交通信息系统设计与实现.PPT

* * * 主讲 ：时云峰 第三讲 网站设计 目录页 CONTENTS PAGE 1 概述 2 问题 3 设计 4 解决方案 5 回顾总结 第三章 网站设计 2.1 　　　　　　在本阶段，主要结合ASP.NET 2.0的一些新特性。比如：母版页、主题与皮肤以及Web部件与个性化配置等，通过将这些技术综合运用于网站的设计，为网站设计出一个结构清晰、并可定制、可扩展的界面架构，为后期开发奠定基础。 1 概述 目录页 CONTENTS PAGE 1 概述 2 问题 3 设计 4 解决方案 5 回顾总结 第三章 网站设计 2.1 　　　用户体验设计一般总结起来，一般大致有以下几点： ??如何设计网站的颜色、风格，以及网页呈现大小，是否需要在不同的浏览器内显示等； ??如何划分网站版块，让用户能够方便的找到各类信息； ??如何设计网站的导航，让用户在网站的不同模块之间顺利导航切换； ??如何设计一个可自定义网页布局、显示风格等的网页架构，让用户在浏览网页时根据自己需要自定义网页的布局风格、内容以及行为等，并且为用户持久保存个性化设置信息； 2 问题 目录页 CONTENTS PAGE 1 概述 2 问题 3 设计 4 解决方案 5 回顾总结 第三章 网站设计 2.1 　　　针对“问题”部分所讨论的用户体验设计要点，我们需要结合ASP.NET 2.0提供的特性，比如：使用母版页技术统一控制网站的布局结构，并结合主题控制网站风格；使用站点导航技术控制网站导航路径；使用Web Part技术创建可动态更新布局的网页等。不过由于本案例重点在于讲述门户站点是如何完成信息集成，以及如何向用户提供一个可自定义的页面，其他功能涉及较少，因此，网站实现相对简单，对于站点导航设计相对也简单。 3 设计 第三章 网站设计 2.1 　　　确定网站的显示风格，主要根据实际企业需求来确定网站的色调搭配以及其他显示风格等。比如：一般企业往往具有自己的Logo，或是产品等宣传材料，网站需要考虑如何融入这些已有的风格，选择合适的风格设计。在确定显示风格的同时，还必须考虑如何安排布局，哪些功能应该被提取出来供所有页面共享等。比如：系统的导航菜单、登录等。 3.1 设计网站的外观 第三章 网站设计 2.1 Web部件其实是一组集成控件，通过使用它可以使最终用户在浏览网页时执行下列操作： ??对页内容进行个性化设置 ??对页面布局进行个性化设置 ??导出和导入控件 ??创建连接。 ??对站点级设置进行管理和个性化设置 3.2 设计可定制化的页面 第三章 网站设计 2.1 那么，Web部件是如何完成这些的呢？首先，讲解Web部件组件的构成，它包含三个构造块：个性化、UI结构组件和Web部件UI控件。 3.2 设计可定制化的页面 图3—1 Web部件组件层次结构 目录页 CONTENTS PAGE 1 概述 2 问题 3 设计 4 解决方案 5 回顾总结 第三章 网站设计 2.1 4 解决方案 4.1 设计页面布局 在VS 2005中打开该网站项目浏览如图所示 【浏览起始应用】 第三章 网站设计 2.1 【浏览母版页布局设计效果】 　　　本案例中通过母版页和主题技术为门户网站创建一致的外观风格。母版页设计效果如图3-3所示： 第三章 网站设计 2.1 第三章 网站设计 2.1 4.2 创建导航系统 我们首先创建站点地图文件web.sitemap，并编辑内容添加网站导航链接。完成编辑后内容如下： ?xml version=1.0 encoding=utf-8 ? siteMap xmlns=/AspNet/SiteMap-File-1.0 siteMapNode url=~/default.aspx title=主页 description= siteMapNode url=~/CredMapping.aspx title=管理用户映射 description= / siteMapNode url=~/Admin/ManageApps.aspx title=管理应用信息 description= / siteMapNode url=~/help.aspx title=系统帮助 description= / /siteMapNode /siteMap 第三章 网站设计 2.1 　　　然后，我们打开母版页在导航菜单位置（见“母版页设计”图）添加Menu控件，然后配置其数据源以及设置相关属性，代码如下： asp:Menu ID=Menu1 runat=server DataSourceID=SiteMapDataSource1 Orientation=Ho