网站的前台展示界面设计.docVIP

1.1网站的前台展示界面设计 木网站的界面整体结构采用的左右结构，左边的部分主要是显示相关的信 息，右边的部分显示的是网站的一些功能。前台的展示界面包括前台的主界面、 用户注册、课程浏览、用户留言、课程申报、友情链接、后台登录。 1.1.1网站的前台主界面 我们能通过前台主界面来了解一些关于精品课程网站的信息，用户也必须通 过前台主界面来进行登录和注册等操作。网站前台主界面如图5-1所示。 图5-1 图5-1网站前台主界面 1丄2用户注册界面 用户要使用该网站必须先注册成为该网站的用户，并且登录后才能对课程的 课件、作业和实验进行下载。网站的注册的信息包括用户的昵称、姓名、密码。 用户注册界面如图5-2所示。 图5?2用户注册界面 1.实现目标 用户通过填写相应的学牛信息，然后单击“保存”按钮学生信息就会相应的 添加到数据库中用户信息表中。如果觉得添加有误的话，可以单击“返回”按钮, 来实现填写信息的清除。如果添加的用户信息已经存在则有相应的提示。 2.实现过程 窗体名：UserRegist.aspx 用户注册主要控件信息列表如表5-3所示。 表5-3用户注册信息主要控件信息列表 名称 主要属性设置 作用 txtUserlD / 显示用户编号 txtUserName / 显示用户姓名 txtUserPwd / / 显示用户密码 1丄3课程浏览界面 单击“课程浏览”按钮，进入到课程浏览的界面会浏览到一些精品课程。 如图5-3所示。 ■ ” ft ? 0 ? ■€?? f ? XJIO ??? ■ ” ft ? 0 ? ■€?? f ? XJIO ??? Mr 11 .tw ?o??ma?iw w 图5-3课程浏览界面 实现目标 单击每个课程会浏览到课程的详细信息，登录后会看到关于该课程的课件、 作业和实验的下载。用户可以选择自己喜欢的课程进行相应的下载。 1.1.4用户留言界面 用户进入到网站的主页面就会看到“用户留言”按钮，用户留言的界面如图 5-4所示。 用户—■?a■ 用户 — ■?a ■ ■ ■■ p w、 ■ M m ?fH* .? BMi All puw I ??\ m ■” VI IM： 2W2U snsromns 图5-4用户留言界面 1.实现目标 单击“用户留言”按钮，可以查看留言的信息，提出自已的意见和建议。 并且可以和老师进行交流。留言包括留言人、留言的内容、留言的时间。 1.1.5友情链接界面 进入到“友情链接”界面，用户可以浏览到一些有关精品课程的网站。友情 链接界面如图5?5所示。 4otfl?Rg■ ■岁 ◎?国 4 4otfl?Rg ■ ■岁 ◎?国 4 ??? II Rem 图5-5友情链接界面 实现目标 单击“友情链接”按钮，进入到友情链接的界面，界面显示的是其它的精品 课程网站的网址和网站名称。用户可以通过链接进入到其它的精品课程网站。浏 览其精品课程。 1.2网站的后台管理界面 1.2.1管理员修改密码界面 管理员登還到后台首先显示的是修改管理员密码的界面。管理员修改密码界 面如图5-6所示。 东方大学楙品课程网站后台/xx?ueonjivj? tiMMIMVMOtAflTla.r.?rvUm?*TTt QliMW b”TW-WWTWS?■ 东方大学楙品课程网站后台 /xx?ueonjivj? tiMM IMVM OtAflTl a.r.?rv Um ?*TTt QliMW b”TW -WWTW S ?■? O?? □ULJ XU afWtW 6?a 图5-6管理员修改密码界面 实现目标 管理员进入后台管理，管理员可以对自己的密码进行修改。包括原密码、 新密码和确认密码。管理员添加密码后按“保存“按钮，就会成功的保存管理员 的信息。如果管理员添加的信息错误，可以单击“重置按钮进行修改。 实现过程 窗体名：PwdModi fy. aspx 管理员修改密码主要控件信息列表如表5-4所示。 表5-4管理员修改密码主要控件信息列表 名称 主要属性设置 作用 txtOldPwd / 显示旧密码 txtNwePwd / 显示新密码 txtConfirmPwd / 确认密码 122用户管理界面 单击“用户管理”进入到用户管理界面，可以查询用户的信息、删除用户和 垂置密码。用户管理界面如图5-7所示。 东方大学楙品课租网站后台 东方大学楙品课租网站后台 ?R^O- 去： 1 3 Ml ? C 2 1 1 □ ?v? ?a Ml SR o 4 TUB Vfl (Ml ■ □ * w W O w wt “ am m 皿r? ?we 存 MTW 伽n e?BTW 图5-7用户管理界面 1 ?实现目标 管理员可以对用户进行管理，可以查询用户的信息并且可以删除用户的信 息。当管理员单击“查询”按钮时，会