第八章-维护web-office办公自动化网站(一)---副本.doc

第八章 维护web-office办公自动化网站（一）8.1 web-office办公自动化网站8.2 部署并运行web-office办公自动化网站网站源文件和数据库都设置好后,还需要使用IIS创建虚拟目录，步骤如下。推荐步骤：1. 新建虚拟目录 单击桌面上的“开始”按钮，选择“程序”-“管理工具”-Internet信息服务“窗口，右击”默认网站 ,然后选择“新建 -虚拟目录”，可新建虚拟目录，如图8.8所示。2.设置虚拟目录别名 单击“虚拟目录”，出现虚拟目录创建向导，单击下一步“，输入别名hotop100oa,接下来将使用此名称来访问站点，如图8.9所示。3.单击下一步“，设置网站内容目录，单击“浏览”按钮选择网站原代码所在的物理路径，如图8.10所示。4.设置虚拟目录访问权限 单击下一步按钮，出现如图8.11所示的设置虚拟目录访问权限的窗口，选择权限为“读取”和“运行脚本,这些权限是服务器上的所有ASP.NET应用程序的公共权限。5，完成虚拟目录的创建 单击“下一步“，然后再单击”完成“按钮，完成虚拟目录的设置。右击”hotop100oa”,选择“属性”命令如图8.12所示6.设置ASPNET的版本 根据 网站开发的环境使用的版本选择对应的ASPNET版本，选择“ASPNET”选项，设置如图8.13所示。8.2.2修改数据库连接 ASPNET最常用的连接数据库的配置文件是web.config,利用dreamweaver打开web.Config文件，如图8.14所示。 在web.Config文件中找到和,这段代码是连接数据库 代码，server是服务器的名称 ，database是数据库名称，uid和pwd分别是服务器数据库的登录名和密码。 修改完数据库连接后，测试网站环境是否配置成功，打开浏览器在地址栏中输入http:/localhost/hotop100oa/login.aspx,如果出现如图8.15所示的登录界面，表示网站环境配置成功，此办公自动化系统可以使用了。8.3 修改登录页面 需求分析：l 修改用户名和密码的textbox控件长度 为130px,高为20px,背景颜色修改为#EFEFEF，字体颜色为红色，控件边框的颜色修改为#333333，边框粗细为1px.l 利用CSS制作样式，把登录“控件”修改为图片控钮。Textbox控件并没有专门的字体颜色的属性，利用控件的forecolor属性来控制字体颜色，修改完后的结果如图8.16所示。推荐步骤1) 使用dreamweaver打开用户登录页面，显示代码视图查看代码，找到创建用户名和密码的textbox的控件代码，如图8.17所示。2) 增加控件的属性，分别设置控件的背景颜色和字体颜色以及控件的边框属性，修改代码如图8.18所示。3) 设置按钮控件样式,在页面login.aspx中，在CSS面板中创建样式login,设置背景颜色 为transparent,背景图像为login.gif,背景图像不重复显示，水平位置和垂直位置均居中，方框的宽度为70px,高为40px,边框的宽为0，光标的视觉效果为hand,设置完成的login代码如下所示。/.login Background-image:ur1(image/login.gif); Background-repeat:no-repeat; Background-position:center center; Height:40px; Width:70px; Background-color:transparent; /背景颜色为透明 Cursor:hand; Border-top-width:0px; Border-right-width:0px; Border-bottom-width:0px; Border-left-width:0px; (4) 设置按钮控件button的样式 ，在ASPNET中，CSSclass表示设置控件的CSS样式，相当于HTML的class,如图8.19所示。（5）页面修改完毕，保存页面，在浏览器中查看页面效果如图8.16所示。注意：在ASPNET中，CSS样式的设置是用cssclass,相当于HTML页面中设置样式不同的地方。8.4 修改人事管理模块的页面 人事管理功能模块下主要分为机构信息、部门信息、人员管理和人员照片四个功能模块，下面主要对 这四个功能模块下的页面进行编辑，主要编辑控件的位置、大小等属性，以改变页面的显示逻辑。8.4.1 修改机构信息页面 需求分析l 增加显示脚注,设置”更新机构信息”对应列的脚注为” 打印机构信息”,并且设置脚注的背景颜色为#DEDEDE,行高为30px,字体加粗显示。l 改变机构信息标头的背景颜色为#DEDEDE，,行高为30px,字体加粗显示。l 修改机构信息显示表的行高为25px,奇数行背景颜色为白色，偶数行的背景颜色为#DEDEDE，并且偶数行的字体颜色为红色。l 页面修改前后的对比效果分别如图8.20和图8.21 所示推荐步骤:1) 使用dreamweaver打开机构信息页面mr/branchinf.aspx,查看代码视图，找到设置datagrid控件的代码，添加显示脚注的代码showfooter=”true，如图8.22所示。2) 找到设置标头和脚注的代码,设置背景颜色 为#DEDEDE,行高为30px,字体加粗显示，如图8.23所示。3) 在“更新机构信息”对应列中，增加显示脚注信息的代码（footertext=”打印机构信息“），如图8.24所示4) 修改奇偶行代码，设置偶数行的背景颜色、行高和字体颜色（backcolor=#DEDEDE“height=” 25” forecolor=”#FF0000）如图8.25所示。注意了：在ASPNET中，字体加粗显示是font-bold=”true“，相当于HTML中的,设置字体颜色是forecolor,与HTML中的color是一样的。5）页面修改完毕，保存页面，在浏览器中查看页面效果如图8.21所示，共显示5条记录，在数据库中查看数据表mrbranch中一共有7条数据，如图8.26所示。6）可以看到字段delflag列中为true的记录没有显示出来，只显示delflag字段列的值为flase的记录。在机构名称“和”机构简称”中分别输入“青鸟教育”，然后单击“添加 按钮，查看数据库mrbranch表，可以看到添加了一条记录，并且delflag列的字段值为false,如图8.27所示。 7）在机构信息“页面可以看到多了一条 青鸟教育“的记录，如图8.28所示。 8）如果要删除“青鸟教育“这行记录，可以单击删除按钮，这样就删除了这条记录，页面上将不显示”青鸟教育“的记录。然后再数据库中查看数据表mrbranch,可以看到”青鸟教育“这条记录依然存在，如图8.29 所示，只是字段delflag的值变为true了。8.4.2 修改部门列表页面需求分析 修改部门列表页面mr/depinf.aspx,如图8.3所示。l 增加“新增“控件按钮 所在单元格的高度。l 修改页面显示部门信息的数量，设置每页显示10条信息。l 把显示页面链接数字居中显示，并且设置所在单元格的高度为30。l 修改标头的背景颜色为#DEDEDE,文字加粗显示。l 设置列表奇偶行的背景颜色分别为白色和#DEDEDE，并且设置行高为25，完成效果如图8.31所示。推荐步骤1） 使用dreamweaver打开添加部门信息页面mr/depinf.asp,查看代码视图，找到”新增“按钮所在的单元格，设置单元格高度为30。2） 找到空件datagrid,修改页面显示信息数量的代码为pagesize=10,如图8.32所示，使每页显示10条信息。经验总结：有时候设了pagesize=10,但是datagrid将所有的记录都显示出了，pagesize不起作用，为什么呢？答案：把datagrid的属性allowpaging设置为true了3）找到设置显示页面链接的代码和,在这段代码之间设置高度为20，居中显示horizontalalign=”center”,如图8.33所示，设置完成的效果如图8.34所示4）设置控件datagrid的单元格的内容和单元格边界的空白大小为0（cellpadding=”0”）.找到和之间的代码，修改背景颜色为#DEDEDE,高度为25。找到和之间的代码，修改背景颜色为白色，高度为25。找到设置标头样式的和的代码，设置背景颜色为#DEDEDE,高度为30，字体加粗显示，如图8.35所示。5）页面设置完成后，在浏览器中查看页面效果如图8.31所示。在数据库中查看数据表mrdepartment中的数据，如图8.36所示。6）从数据表mrdepartment中的记录 可以看到，此表也有一列字段delflag,其值均为false,并且从部门信息页面也可以看到，这些记录都在页面上显示。现在把数据表中前5条记录的delflag一列的字段值手动修改为true,然后刷新部门信息页面。可以看到delflag一列被设置为true的记录信息没有显示在页面上，如图8.37所示。7）修改“综合部“的部门信息，直接单击”综合部“超链接，打开修改部门信息页面，修改部门所属的机构为”日新“，并且增加其负责人、电话号码、传真等信息，如图8.38所示。8）单击“保存退出“按钮，页面跳转到部门信息列表页面，可以看到”综合部“的相关信息发生了变化，如图8.39所示。 直接修改数据表中字段的值和在页面上修改信息，都可以导致页面显示的记录发生变化。从而可知道，对数据记录的修改，即可以通过在页面上删除记录来改变字段值，也可以直接在数据库中修改记录的字段值，这两种方式可以达到同样的效果。因此作为一个网站的维护者，既要会在页面上对数据记录进行各种操作，也要掌握直接在数据库中对数据记录进行修改的技能。例如在修改机构信息页面中，当删除一条记录后，记录将不再在页面中显示。而如果要恢复这条记录在页面上显示，可是在页面中又没有这样的功能来恢复，这是就需要网站维护者在数据库中修改数据记录，达到页面需求的功能。但是在数据库中修改记录的字段值时，要注意与其他数据表中字段值关联。9）部门信息表mrdepartment中的字段branchid与机构信息表mrbranch中的字段branchid相关联，因此在数据库中改变“产品研发部“所属机构为”创新科技“，首先查看mrdepartment表中机构为”创新科技“的branchid为2。然后修改mrdepartment中”产品研发部“记录的字段的branchid为2。修改完成后，查看部门信息页面，可以看到”产品研发部“所属机构变为”创新科技“，如图8.40所示。 由于部门信息表mrdepartment和机构信息表mrbranch相关联，如果设置mrdepartment表中字段branchid的值是mrbranch表中没有的值，将提示发生错误，如图8.41所示如果一次修改一条记录，直接在数据表中修改就可以了。但是有时候会对数据表中的多条记录进行修改，数据量非常大，一条一条地修改将非常费时间。例如修改部门信息表中的传真，统一改为87456819，这时需要使用T-SQL语句来统一修改。10）在microsoft SQL server management studio中，单击“新建查询“，输入修改传真字段值的update语句，单击”分析“按钮，当显示”命令已成功完成“时，再单击”执行“按钮，执行成功，如图8.42所示。11）在数据库中查看mrdepartment中的记录，传真一列的值全部被改变，如图8.43所示。12）查看部门列表页面，所有部门的传真均被改变，如图8.44所示。8.4.3修改部门信息页面 需求分析： 修改部门信息下添加部门信息页面mr/depnew.aspx,如图8.45所示。n 将电话号码1对应的控件移到下一行的负责人下面。n 将传真对应的控件移到所在机构下面。n 将邮编对应的控件移到左侧位置。n 移动完控件位置后，改变控件的长度，修改完成的页面 效果如图8.46所示。推荐步骤：1) 使用dreamweaver打开添加部门信息页面mr/depnew.asp,查看代码视图，找到输入“负责人“的lable,改变距左位置为35px,距上位置为60px.同时找到输入” 负责人“控件textbox,设置距左位置为55px ,并且设置textbox控件长度为145px,如图8.47所示。2) 修改“电话号码1“控件label的位置，距左和距上的位置分别为16px 和92px,控件textbox的位置距左为94px ,距上为92px,textbox控件的长度为145px,修改完成后的页面如图8.48所示。3) 修改“传真”对应的控件lable和textbox的位置，lable的左和上位置分别为300px和60px,textbox的左和上的位置分别为342px和60px,控件宽为150px,如图8.49所示4) 修改“电话号码2”对应的控件lable的距左位置为16px.同时修改“邮编 ”对应的控件lable的距左位置为50px,textbox距左位置为94px,textbox控件的宽度为145px,修改完成之后对应的页面效果如图8.50所示5) 设置地址所对应的控件左侧位置，id为lable7, lable8, lable10的lable控件 距离左侧位置分别为50px,160px,320px,id为txtprovince、txtcity、txtdistrict、txtstreet的textbox控件的距左侧位置分别为94px,210px,270px,350px,并且设置id为txtstreet的textbox控件长度为145，代码如图8.51所示。6) 设置“保存继续”按钮控件所在单元格的高度为40 ，居中显示，设置完成页面效果如图8.46所示8.4.4 编辑人员信息页面 需求分析：在人员管理页面，单击人员姓名，可对人员的基本信息、个人信息、福利待遇、学历信息、履历信息、档案信息和合同信息进行编辑，如图8，52所示为基本信息页面。修改基本信息页面mr/empbase.aspx、学历信息页面empedu.asp中的控件位置、长度，并且制作样式使鼠标指针移动至“保存继续“，保存退出”和“退出“按钮控件上时，鼠标指针成手状。 修改履历信息页面mr/empvisainf.aspx、档案信息页面mr/emparcinf.aspx、合同信息页面mr/empcontinf.aspx,修改标头的行高为30，背景颜色为#666666,字体颜色为白色，字体加粗显示，并且为最后两列增加标头“编辑”和“删除”，显示列表信息的行高修改为25 。推荐步骤：1.修改基本信息页面1) 在Dreamweaver中打开基本信息页面mr/empbase.aspx,修改登录账号对应的控件lable和textbox位置和长度。首先修改lable的位置为LEFT:24px,TOP:19px、其次修改textbox的位置为LEFT:91px,TOP:16px、控件高度和宽度为height=“20px”、width=”153px”,如图8.53所示。2) 同步骤（1）一样修改其他控件的位置、大小。3) 在CSS面板中创建样式hand,设置光标的视觉效果为hand,代码如下所示。.hand Cursor: hand;4)设置“保存继续”、保存退出“和退出”按钮控件的样式为hand,代码如下所示。 5)设置三个按钮控件所在单元格居中显示，修改完成的页面效果如图8.54所示。2.修改个人信息页面1) 打开个人信息页面mr/emppers.aspx,修改“备注“对应的控件lable和textbox的位置和长度。首先修改lable的位置为LEFT:43px,TOP:230px,其次修改textbox的位置为LEFT:93px,TOP:207px，控件高度为height=”60px”、width=”499px”,如图8.55所示。2) 同步骤（1）一样修改其他控件的位置和大小，并且设置最下面的三个按钮控件居中显示，设置完成后的页面效果如图8.56所示。3.修改福利待遇页面 （1）打开福利待遇页面mr/empwelinf.aspx,如图8.57所示。 （2）修改页面控件的位置和大小，把“进入方式”的控件移动到“进入日期”之后，“岗位级别”和“工资职别”控件移动到第二行，保险福利移动到第三行。修改“备注”控件的高度，并且设置最下面得三个按钮控件居中显示，鼠标指针移到按钮上时呈手状，设置完成后的页面效果如图8.58所示。4.修改学历信息页面1) 打开学历信息页面mr/empedu.aspx