ASPNET动态Web开发技术项目化教学全套课件教程ch04.ppt

《ASPNET动态Web开发技术项目化教学全套课件教程ch04.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、《ASP.NET动态Web开发技术》第四章动态Web界面设计与编码主讲教师沈蕴梅第4章动态Web界面设计与编码本章要点：界面布局与设计基于控件的详细设计界面之间的调用与实现技能目标：会设计友好的用户界面会设计用户界面中的控件会在界面之间实现互相调用第4章动态Web界面设计与编码4.1项目导入【项目场景】苏州健雄职业技术学院要开发一个软件测评与外包科技服务平台，请你为该单位开发该平台。第4章动态Web界面设计与编码【问题引导】（1）如何设计用户注册界面？（2）如何设置界面中的控件？第4章动态Web界面设计与编码4.2技术与知识准备4.2.1界面布局与设计在进行界面布局时，

2、应先针对在整个网站的网页中重复出现的部分，如网页顶部的图片、导航以及网页底部的文字等，分析是否有必要将其做在母版页中。母版页是一个以“.master”作为后缀名的文件，它首先将页面上的公用元素（如网站Logo、广告条、导航条等）整合在一起。第4章动态Web界面设计与编码【示例4.1】新建母版页houtaiMaster.master。【步骤1】搭建系统架构，并添加各层之间的依赖关系。【步骤2】右击Dorm_OA，依次选择“添加”→“新建文件夹”，取名为“houtai”，右击“houtai”文件夹，依次选择“添加”→“添加新项”。【步骤3】左侧选择C#，右侧选择母版页，下侧

3、输入母版页名称houtaiMaster.master，点击【添加】按钮【步骤4】新创建的母版页上面默认有两个ContentPlaceHolder，分别是预留给内容页的头部和主体部分显示的控件。第4章动态Web界面设计与编码4.2.2基于控件的详细设计在母版页新建完成后，就可以根据需求制作具体母版页了，摆放相关控件，并设置控件的属性。【示例4.2】完成母版页制作第4章动态Web界面设计与编码【步骤1】在母版页中添加代码。【步骤2】TreeView控件是一种用于显示层次化结构的控件，可用于显示树形导航，TreeView控件的使用方式分为两种：视图中编辑和动态添加，这里我们只

4、介绍视图中编辑。（1）在“设计”视图中，右击TreeView控件，选择“编辑节点”。（2）在“TreeView节点编辑器”中的“节点”下，可以选择“添加根节点”，也可以选择“子节点”，在“TreeView节点编辑器”中的“属性”下可以对当前选中的节点进行属性设置。（3）在视图中添加节点，并设置相应属性。第4章动态Web界面设计与编码4.2.3界面之间的调用与实现【示例4.3】基于母版页添加AdminAdd.aspx管理员增加页面。第4章动态Web界面设计与编码【步骤1】在解决方案资源管理器中，右击houtai，选择“添加”→“添加新项”，弹出如图4.9所示的对话框，左侧

5、选择C#，右侧选择Web窗体，在下面输入名称“AdminAdd.aspx”，选择母版页前面把勾勾上，单击添加按钮。【步骤2】弹出选择母版页对话框，左侧项目文件夹选择houtai，右侧文件夹内容选择“houtaiMaster.master”，单击“确定”按钮。【步骤3】基于母版页生成的内容页“AdminAdd.aspx”第4章动态Web界面设计与编码4.3项目训练通过对以上内容的学习，了解了创建母版页的步骤，同时了解了控件属性的设置方法以及界面调用的方法，现在我们回到项目导入的任务中来。【步骤1】搭建系统框架，添加各层之间的依赖关系第4章动态Web界面设计与编码【步骤2】

6、新建一个母版页，右击Web，依次选择“添加”→“添加新项”，在弹出的窗口中，选择“母版页”，然后修改名称为：top.master，点击“确定”。【步骤3】在母版页中添加代码，完成母版页制作。【步骤4】右击Web，依次选择“添加”→“添加新项”。【步骤5】在弹出的对话框中选择“Web窗体”，更改名称为：register.aspx，并勾选“选择母版页”选项，最后点击“添加”按钮。【步骤6】在弹出的对话框中，选择之前制作好的top.master母版页。【步骤7】在register.aspx页面中进行布局，拖曳文本框与按钮。第4章动态Web界面设计与编码【步骤8】创建数据库We

7、bSites，添加数据表Company，并配置Web.config。【步骤9】根据数据表Company，在实体层添加类Company.cs。【步骤10】添加数据访问类SqlHelper.cs,并编写代码，见第三章内容。【步骤11】数据访问层添加类CompanyService.cs。【步骤12】业务逻辑层编写代码。【步骤13】编写“注册”按钮代码。第4章动态Web界面设计与编码4.4平行项目训练1．训练内容界面布局与设计、基于控件的详细设计2．训练目的（1）进一步训练和巩固学生对控件设计方法的理解；（2）使学生对友好的用户界面设计有一个比较