web设计报告山东科技大学.docx

1、web设计报告山东科技大学Web设计说明书课程名称： Web应用设计 专 业： 计算机科学与技术 班级： 设 计 人： 山 东 科 技 大 学山 东 科 技 大 学课 程 设 计 任 务 书一、课程设计题目： Web动态网页（句子迷） 二、设计原始资料：Web编程入门经典:HTML、XHTML和CSS(第2版) 大话数据库 Web应用程序设计与开发技术 SQL Sever 2008 入门与提高 三、设计应解决下列各主要问题：网站的需求分析网站的结构设计 数据库搭建与后台程序的实现良好的用户界面（HTML+CCS） 四、设计说明书应附有下列图纸运行与开发环境 用户使用说明书五、命题发出日期：20

2、16.07.04设计完成日期： 2016.07.21 指导教师评语成绩： 指导教师（签章）：年月日一、需求分析句子迷的定位句子迷是一个美句佳句的分享社区，专属会员自己的句子摘抄本。在这里，用户可以轻松发布和收藏您喜欢的句子，和同好谈论感兴趣的佳句妙语、诗词歌赋。本次实验共设计7个页面，分别为句子迷首页、名人名言、佳句欣赏、美图美句、原创句子、会员注册与登录界面、关于我们。以下是各功能模块的功能描述：1.1会员注册与登录 本模块的主要功能链接数据库，将用户注册信息写入，并在登陆是从数据库中查询用户名对比密码。如若成功，跳转到首页。若不成功则在当页显示提示信息。1.2时钟模块（JS实现）本模块采用

3、js的主要功能是显示当前时间，方便用户确认时间。1.3导航栏模块 本模块的主要功能是讲7个页面进行链接，主要采用列表+CSS。并用js更改了鼠标移动到导航栏对应位置的的特效。1.4鼠标点击切换图片（JS实现） 本模块的主要功能是讲7个页面进行链接，主要采用列表+CSS。并用js更改了鼠标移动到导航栏对应位置的的特效。1.5页面布局模块本模块的主要采用+css对页面进行布局1.6良好用户界面包括图片的插入、超链接、字幕的滚动等等。二、概要设计2.1模块调用图三、详细设计3.1会员注册与登录会员的登陆 protected void btnLogin_Click(object sender, Eve

4、ntArgs e) string strConn = Data Source=LENOVO-PCCONSOLE2012;Initial Catalog=haojuzi;Integrated Security=True; System.Data.SqlClient.SqlConnection conn = new System.Data.SqlClient.SqlConnection(strConn); conn.Open(); string strUserName = txtUserName.Text; string strPassWord = txtPassword.Text; string

5、 strSelect = select count(*) from SUser where UserName = + strUserName+and UserPassword= + strPassWord + ; System.Data.SqlClient.SqlCommand selectCom = new System.Data.SqlClient.SqlCommand(strSelect, conn); int count = int.Parse(selectCom.ExecuteScalar().ToString(); conn.Close(); if (count 0) Respon

6、se.Redirect(Main.aspx); else Label1.Text = 用户名密码输入错误; 会员的注册public partial class Login : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) string strUserName = txt1UserName.Text; string strPassWord1 = txt1Password.Text; string strPassWord2 = txt2Password.Text; if (strUserName.Tr

7、im() = ) Label1.Text = 用户名不能为空！; return; string strConn = Data Source=LENOVO-PCCONSOLE2012;Initial Catalog=haojuzi;Integrated Security=True; System.Data.SqlClient.SqlConnection conn = new System.Data.SqlClient.SqlConnection(strConn); conn.Open(); string strSelect = select count(*) from SUser where U

8、serName = + strUserName + ; System.Data.SqlClient.SqlCommand selectCom = new System.Data.SqlClient.SqlCommand(strSelect, conn); int count = int.Parse(selectCom.ExecuteScalar().ToString(); if (count 0) Label2.Text = 用户名已存在！; else if (strPassWord1 != strPassWord2) Label2.Text = 两次输入密码不一致！; return; els

9、e string strInsert = INSERT INTO SUser(UserName,UserPassword) VALUES ( + strUserName + , + strPassWord1 + ); SqlCommand insertCom = new SqlCommand(strInsert, conn); insertCom.ExecuteNonQuery(); Label2.Text = 注册成功！; conn.Close(); Response.Redirect(Main.aspx); conn.Close(); 3.2时钟模块（JS实现） function Butt

10、onClock() day = new Date(); HourNow = day.getHours(); MinuteNow = day.getMinutes(); SecondNow = day.getSeconds(); TimeNow = day.getTime(); if (HourNow = 0) hour = 12;ap = am; else if(HourNow = 13) hour = (HourNow - 12);ap = pm; if (HourNow = 13) hour = HourNow - 12; if (MinuteNow = 9) minute = 0 + M

11、inuteNow; else (minute = MinuteNow) if (SecondNow = 9) second = 0 + SecondNow; else second = SecondNow; time = hour + : + minute + : + second + ap; document.form.button.value = time; self.status = time; setTimeout(ButtonClock(), 1000); document.write( + ); onError = null; function AlertWindow() Butt

12、onClock(); 3.3导航栏模块 句子迷首页 名人名言 佳句欣赏 美图美句 原创句子 会员登录 关于我们 jQuery(.nav).slide( type: menu, titCell: .m, targetCell: .sub, effect: slideDown, delayTime: 300, triggerTime: 100, returnDefault: true ); 3.4鼠标点击切换图片（JS实现） 本模块的主要功能是实现图片的横向点击移动 /* 控制左右按钮显示 */ jQuery(.fullSlide).hover(function () jQuery(this).f

13、ind(.prev,.next).stop(true, true).fadeTo(show, 0.5) , function () jQuery(this).find(.prev,.next).fadeOut() ); /* 调用SuperSlide */ jQuery(.fullSlide).slide( titCell: .hd ul, mainCell: .bd ul, effect: fold, autoPlay: true, autoPage: true, trigger: click, startFun: function (i) var curLi = jQuery(.fullS

14、lide .bd li).eq(i); /* 当前大图的li */ if (!curLi.attr(_src) curLi.css(background-image, curLi.attr(_src).removeAttr(_src) /* 将_src地址赋予li背景，然后删除_src */ ); 3.5页面布局模块本模块的主要采用+css对页面进行布局.sideBox padding:10px; height:220px; overflow:hidden; background:#fff; margin-bottom:10px; .sideBox .hd height:30px; line-

15、height:30px; background:#1b73b8; padding:0 10px; .sideBox .hd h3 font-weight:bold; font-size:14px; color:#fff; .sideBox .hd h3 a color:#fff; .sideBox .bd padding:10px 0 10px 5px; .sideBox .bd li line-height:24px; overflow:hidden; .sideBox .bd li span color:#999; margin-right:5px; 3.6良好用户界面包括图片的插入、超链

16、接、字幕的滚动等等。名人名言四、调试分析4.1遇到的问题本机部署了网站测试出现HTTP 错误 500.19找到配置文件所在的文件夹，右键，点击属性，切换到“安全”选项卡上，将 IIS-IUSRS 用户组添加到安全列表中，并按需求赋予其权限。查看 web.config 的安全权限，如果有此用户组的权限则说明成功，否则进行下一步退回到根文件夹，打开“安全”选项卡，选中 IIS-IUSRS 用户组，点“高级”打开高级安全设置对话框，选中 IIS-IUSRS 用户组，点击“更改权限”，打开可编辑的高级安全设置对话框，把下图红色区域的复选按钮选上，然后点击确定，将权限继承给所有子对象，就可以了。CSS可

17、以大大缩减页面代码，提高页面浏览速度；结构清晰，对搜索引擎更加友好，缩短了改版时间，具有强大的自体控制和排版能力。样式表的冲突的解决方法： （原则： 就近原则）行级 内部 外部id 类选择器 标签选择器 外部样式表中 id选择器 内部样式表的标签选择器五、用户使用说明点击运行程序，进入句子迷首页。点击会员登陆，进入登陆界面，若没有注册，请先注册一个账户。若已经注册请登录。登陆成功后直接跳转到首页。接着就可以自由浏览网页了。六、实验反思总结这次Web实验使我更加深入的了解到HTML的特点：简易性、可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统

18、扩展带来保证。平台无关性，虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上，这也是万维网盛行的另一个原因。它还具有很好的移植性和编辑性。同时此次实验也使我接触到了动态网页设计的理念。动态网页，是指跟静态网页相对的一种网页编程技术。静态网页，随着html代码的生成，页面的内容和显示效果就基本上不会发生变化了除非你修改页面代码。而动态网页则不然，页面代码虽然没有变，但是显示的内容却是可以随着时间、环境或者数据库操作的结果而发生改变的。它是基本的html语法规范与Java、VB、VC等高级程序设计语言、数据库编程等多种技术的融合，以期实现对网站内容和风格的高效、动态和交互式的管理。因此，从这个意义上来讲，凡是结合了HTML以外的高级程序设计语言和数据库技术进行的网页编程技术生成的网页都是动态网页。在实践过程中我意识到遇到不懂的要学会自学，手边有很多可以学习的资料，不一定要等到老师在课上讲。刻课下的自学也尤为重要。