1、BENET3.0第一学期课程,第八章 维护Web-Office办公自动化网站(一),2,课程回顾,如何创建IIS虚拟目录、搭建ASP.NET运行环境？ GridView控件有哪些属性？ 如何添加GridView控件的脚注？如何设置交替行不同字体颜色？ 如何在web.config文件中修改数据库连接字符串？,3,技能展示,会使用IIS建设网站虚拟目录 会修改数据库链接文件 会修改ASP.NET的页面内容 掌握CSS样式,4,本章结构,Web-Office办 公自动化网站,修改登录页面,使用IIS创建虚拟目录,修改机构信息页面,修改数据库连接,维护Web-Office办公自动化网站（一）,部署并运
2、行 Web-Office办公 自动化网站,修改部门列表页面,修改部门信息页面,修改人事管理 模块的页面,编辑人员信息页面,5,Web-Office办公自动化网站介绍,Web-office办公自动化网站,人事管理,日程管理,项目管理,文档管理,信息传递,系统管理,机构信息,部门信息,人员管理,人员照片,6,机构信息,显示所有机构名称 添加机构 编辑和删除原有机构,7,部门信息,显示所有部门信息 部门名称、所属机构、负责人、电话和传真 增加部门信息 编辑和删除部门信息,8,人员管理,显示人员列表 查询人员信息列表 新增人员人息 编辑和删除人员信息,9,人员照片,查询人员照片 显示所有人员照片,10
3、,部署并运行Web-Office办公自动化网站,附加数据库 使用IIS创建虚拟目录 修改数据库连接,11,使用IIS创建虚拟目录,创建虚拟目录 设置虚拟目录别名 选择网站目录 设置ASP.NET的版本,12,修改数据库连接,修改数据库连接字符串 服务器名称 数据库名称 数据库用户名 数据库用户密码 测试网站是否配置成功,13,修改登录页面（1）,需求描述 修改用户名和密码TextBox控件的长度为130，高为20，背景颜色修改为#EFEFEF，字体颜色为红色，控件边框的颜色修改为#333333，边框的粗细为1 利用CSS制作样式，把登录控件修改为图片控钮,14,修改登录页面（2）,实现思路 使
4、用ForeColor属性修改TextBox控件的字体颜色 ASP.NET控件的CSS设置使用CssClass,20分钟完成,15,修改人事管理模块的页面,修改机构信息页面 修改部门列表页面 修改部门信息页面 编辑人员信息页面 基本信息、个人信息、福利待遇、学历信息、履历信息、档案信息和合同信息,16,修改机构信息页面（1）,需求描述 增加并显示脚注，并设置脚注显示的样式 修改标头的背景颜色、行高 修改列表的行高，并且交替行的字体颜色不同,17,修改机构信息页面（2）,实现思路 显示脚注的代码：ShowFooter=“true“ 在中设置标头样式，在中设置脚注样式 字体加粗显示是Font-Bol
5、d=“true“,25分钟完成,18,修改机构信息页面（3）,数据验证 查看数据库的记录与页面记录是否一致，为什么？ 在页面上增加、编辑或删除机构信息，查看数据表的变化以及页面内容的变化,19,修改部门列表页面（1）,需求描述 增加“新增”控件按钮所在单元格的高度 修改页面信息的数量，每页显示10条信息 页面链接数字居中显示，所在单元格的高度设为30 修改标头的背景颜色，文字加粗显示 列表奇偶行的背景颜色不同，行高为25,20,修改部门列表页面（2）,实现思路 页面显示数据记录，设置PageSize，并且同时设置AllowPaging的值 文本居中显示设置属性HorizontalAlign 统
6、一设置所有行样式时，可以在和标记中设置,25分钟完成,21,修改部门列表页面（3）,数据验证 查看数据表中的记录和页面记录是否一致？为什么？ 查看字段为DelFlag的值的不同对显示在页面上的记录有什么影响？ 添加部门列表信息，然后查看数据库表中记录的变化 在数据表中手动修改记录内容，特别是BranchID字段的值，是否可以修改成功？为什么？ 在“新建查询”中统一修改电话信息,22,修改部门信息页面（1）,需求描述 将电话号码1对应的控件移到下一行的负责人下面 将传真对应的控件移到所在机构下面 将邮编对应的控件移到左侧位置 控件移动完位置后，改变控件的长度，使其看起来协调,23,修改部门信息页
7、面（2）,实现思路 改变控件的位置，主要改变各个控件的左侧位置LEFT及距上位置TOP 修改控件的长度，使整体效果美观 文本内容居中显示使用属性HorizontalAlign,25分钟完成,24,编辑人员信息页面（1）,需求描述 改变基本信息、个人信息、福利待遇、学历信息页面中的控件位置、长度，使整体看起来协调，并且鼠标移至按钮上时呈手状 改变履历信息、档案信息、合同信息页面的标头行高为30、背景颜色、字体颜色，并且修改列表行高，为最后两列增加标头,25,编辑人员信息页面（2）,实现思路1设置光标视觉效果 使用CSS设置按钮应用CSS样式,.hand cursor: hand;,26,编辑人员
8、信息页面（3）,实现思路2文本框样式设置,.text border: 1px solid #333333;,27,编辑人员信息页面（4）,实现思路3GridView控件设置 增加标头：设置HeaderText属性的值 设置行高：交替行不同样式，既设置AlternatingItemStyle行高，也设置ItemStyle行高,28,编辑人员信息页面（5）,修改各个页面内容 学员独立完成基本信息、个人信息、福利待遇、学历信息、履历信息、档案信息和合同信息页面的编辑,60分钟完成,29,编辑人员信息页面（6）,完成的页面效果,30,编辑人员信息页面（7）,完成的页面效果,31,本章总结,Web-Office办 公自动化网站,修改登录页面,使用IIS创建虚拟目录,修改机构信息页面,修改数据库连接,修改部门列表页面,修改部门信息页面,修改人事管理 模块的页面,编辑人员信息页面,部署并运行 Web-Office办公 自动化网站,维护Web-Office办公自动化网站（一）,32,
