第4章项目界面设计(第三讲).pptVIP

第4章 项目界面设计4-3 主讲：许丽娟 本章主要内容 为普通用户提供访问系统的可视化窗口，使其通过界面访问WEB应用系统的一般信息和后台数据信息。 为WEB系统管理员用户提供维护管理系统的窗口。 （1）创建页面 创建空页面。 用模板创建页面。 复制其他已经创建好的页面并修改。 添加已有页面并修改。 （2）页面布局 直接用表格套用技术进行页面布局。 用AJAX组件和表格套用技术进行页面布局。 （3）拖放组件 将工具箱中的组件根据需要拖放到实现布局定位好的位置。 （4）设置组件属性 通过属性窗口修改各个组件的属性。 （5）运行测试页面界面效果 任务目标： 1.设计完成客户信息输入页面CustomerInfo.aspx，最终运行界面效果如图。 2.实现组合框DropDownList和数据表GridView组件的联动查询功能。 任务完成步骤： （1）在CustomerManagement文件夹目录下创建新页面CustomerInfo.aspx； （2）打开该页面，展开工具箱中AJAX工具 选择ScriptManager工具拖放到页面中； 选择UpdatePanel工具拖放到页面中ScriptManager工具下方。 （3）在UpdatePanel组件里面插入插入表格，设置表格所有内容的valign属性值为top; （4）从工具箱中选择导航类工具SiteMapPath拖放到表格第1行,并套用格式，并放置按钮、组合框组件; （5）如下图在指定行分别放置组件Panel1和Panel2； (6)分别在Panel1和Panel2中各放置一个Gridview组件,如下图； (7)选中界面上的组合框组件（ID为ddlCondition），从任务栏中为其建立数据源连接conn,选择数据表字段如下图所示; (8)选择要在组合框中显示的字段数据为AsseciatorNo,并按照向导提示完成对组合框组件的数据绑定功能，所创建的数据源对象为SqlDataSource1; (9)参考第7步骤，为GridView1组件创建数据源连接，选定同样7个字段，创建的数据源对象为SqlDataSource2，选中SqlDataSource2，打开SelectQuery属性设置窗口，完成如下设置 (10) 为GridView2组件绑定数据源对象SqlDataSource1； （11）完成以上步骤，即可进行测试，完成简单查询功能！也可进一步进行下一步。 （12）在程序代码窗口，编写代码如下，完成代码编写后进行测试，看看效果有什么不同： public partial class CustomerInfo : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Panel1.Visible = false; } protected void btnSearch_Click(object sender, EventArgs e) { Panel1.Visible = true ; Panel2.Visible = false; } protected void Button1_Click(object sender, EventArgs e) { Panel2.Visible = true; } } 完成本节2个任务目标，大功告成! 总结问题： 1.设计中使用了哪些组件？你能在界面上快速找出来吗？ 2.用到了这些组件对象的哪些重要属性？ 3.你学会实现组合框与数据表组件的联动查询功能了吗？ 4.体会到Panel组件的巧妙用法了吗？ 以上问题答错2个，建议你参考课件重新做一遍！ * LOGO * LOGO 设计WEB应用系统界面的目的 1 WEB应用系统界面设计的要求 2 WEB应用系统界面设计的一般流程 3 客户信息输入页面的设计 4 设计WEB应用系统界面的目的 1 WEB应用系统界面设计的要求 2 布局合理 设计美观 满足用户访问需求 界 面 友 好 WEB应用系统界面设计的一般流程 3 客户信息输入页面的设计 4 客户信息输入页面的设计 4 客户信息输入页面的设计 4 客户信息输入页面的设计 4 客户信息输入页面的设计 4 客户信息输入页面的设计 4 客户信息输入页面的设计 4 客户信息输入页面的设计 4 客户信息输入页面的设计 4 YES! 客户信息输入页面的设计 4 * LOGO