中国科学技术大学

1、中国科学技术大学现代远程教育毕业论文报告论文题目： 动态网页设计 学员姓名： 程建军 学 号： WS 专 业： 计算机科学与技术 工作单位: 青岛市公安消防支队李沧区大队 导师姓名： 日 期： 2014年 12 月 8 日摘 要 在Internet飞速发展的今天，互联网已成为人们快速获取、发布和传递信息的重要渠道，正以一种前所未有的冲击力影响着人类的活动。它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显的格外重要，它已成为政府、企事业单位信息化建设中的重要组成部分。现今的社会，人们已经离不开了网络，网络已经成为人与人之间交流的一种形式，它能够把事

2、情的复杂化转为简单化，摆脱了时间和空间的限制。网站为消费者提供了一个网络生活空间，通过其网页展示了企业介绍、企业荣誉、产品介绍、招商信息、加盟程序、留言等一系列内容的介绍。浏览者不仅可以利用留言板经济而又快捷地与外界进行各种信息的沟通，也可以直接在网上申请加盟。本论文还介绍了网页的结构分析和具体功能实现，网页的界面和运作方式，尽力模拟近代网页普遍性形式，成为一个完整的动态网站关键字Dreamweaver；Php；PhpMyAdmin；动态网页目 录1引言12 网页制作概述22.1 网页的类型22.2 网页设计流程23 设计及具体代码实现33.1网页结构设计33.2创建数据库33.3主要模块的代

3、码实现53.3.1 注册代码的实现53.3.2 登陆及退出登录代码的实现73.3.3留言代码的实现93.4运行测试103.4.1 注册113.4.2 登陆123.4.3留言133.5遇到的问题及解决方法14结 束 语161 引言网页是网站信息发布与表现的一种主要形式。因此要实现一个网站，必须了解网页制作的相关知识。较流行的开发工具有：Dreamweaver，Php，PhpMyAdmin。网页制作要能充分吸引访问者的注意力，让访问者产生视觉上的愉悦感。因此在网页创作的时候就必须将网站的整体设计与网页设计的相关原理紧密结合起来。网站设计是将策划案中的内容、网站的主题模式，以及结合自己的认识通过艺术

4、的手法表现出来；网页制作通常就是将网页设计师所设计出来的设计稿，按照W3C规范用html语言将其制作成网页格式。2 网页制作概述2.1网页的类型通常，网页可以分为静态网页和动态网页。 静态网页页面上的内容和格式一般不会改变，只有网管可根据需要更新页面。 动态网页的内容随着用户的输入和互动而有所不同，或者随着用户，时间，数据修正等而改变。网页上的内容也可以由用户通过使用客户端描述语言(JavaScript, JScript, Actionscript,）来改变。当然更普遍的是由服务器端的描述语言（Perl，PHP, ASP, JSP, ColdFusion, 等)进行编译，从而对动态网页的内容进

5、行改变。无论是客户端还是服务器端的改变都需要使用较为复杂的应用软件。 随着信息技术的更加专业化，越来越明显的倾向表明，网页设计和网站的发展会逐渐成为两个不同的领域。 网页是借助于美术构图与程序互动、动画等方式向大众推广相关信息的媒体，所以网页设计包括了几大部分： 版面构图程序开发网站内容管理2.2 网页设计流程网页设计是一个互动的过程，不仅是设计师构思设计就可以完成的。从客户提出需求到最终发布，期间需要客户与设计人员共同参与协商才可以，具体流程如下：首先，获取客户需求和资料。在设计网站页面之前，设计师需要知道客户的需求，从而确定客户建立网站的目的。客户提出网站需求是非常重要的一个环节。没有详细

6、的需求，设计人员无法凭空进行设计制作。在这个步骤中，双方的沟通与交流是非常重要的。其次，确定网站内容。设计人员选择适合自己的图像编辑软件、动画制作软件和网页制作软件进行网页的初步设计，这中间可能还需要和客户进行多次沟通才能达到客户满意的效果。在具体设计时，设计人员应该为网站定位一个主题，从而保证所有网页都围绕这个主题进行设计制作，保证风格的和谐统一。然后，申请域名和空间。使用该方法能够有效同步管理文件。还可以通过FTP软件连接到服务器空间上，然后上传发布文件。最后，后期维护。一般静态网站上传后，如果客户方没有专业人员维护，这样就需要设计人员从客户方获取新资料进行定期或不定期的更新。如果是动态网

7、站，设计人员需要负责培训客户方如何使用后台管理，这样客户就可以自己通过后台管理添加信息，设计人员只要及时更正动态网站的错误即可。3.1网页结构设计css+div结构目前用的人最多，框架结构现在很少有人使用了，而表格结构目前用的人也不多，但并不意味着已经被淘汰，它也有DIV所不能取代的效果 方便快速的布局，只要不是经常改动的小部分就可以用表格。DIV可以与表格一起用，大布局用DIV，而小地方就用表格 ，效果会很好。比如本次论文所涉及的网页就用到了表格与css+div相结合的思想，其上、下、左、右和中间分别是一个单独的div模块。具体框架结构如图4-1。图4-1 网页框架图3.2创建数据库 本论文

8、设计的网页，所用到的数据库test是通过数据库管理工具PhpMyAdmin做的，具体创建过程就不在这一一介绍了。其包含两个表分别为：liuyan、test2，如图4-2和4-3。 图4-2 信息存储表1本表主要存储游客名、游客留言内容和留言时间等数据。图4-3 信息存储表2本表主要存储数据有：游客注册名、性别、年龄、学历、专业、爱好、备注、密码（密码就是注册时，所输入的验证码）和注册时间。3.3主要模块的代码实现3.3.1 注册代码的实现?phpif($_POSTname)include(conn.php);$up=$_FILEStx;$hh=$uptype;$fff=$uptmp_name;

9、$yu=$upname;/获得客户端和服务器端的验证码。$host=$_SERVERHTTP_HOST;$host= md5($host);$cookie_=$_COOKIE$host;session_start();$y=$_SESSION$cookie_;$y_d=$_POSTyz;/*。核对客户端和服务器端的验证码库。*/if($y_d=$y)/*。查询数据库中的资源个数。*/$dd=mysql_query(SELECT * FROM test2);$hang=mysql_num_rows($dd);$hang=$hang+1;/*。values后不能有空格。(id,name,sex,a

10、ge,diploma,speciality,like,remark,mima,enrolDate)。*/ $sql=insert into test2 values($hang,$_POSTname,$_POSTsex,$_POSTage,.$_POSTdiploma,$_POSTspeciality,$_POSTlike,$_POSTremark,$_POSTyz,now();/*。检测是否插入成功。，。*/if(mysql_query($sql,$conn)if($hh=image/pjpeg|$hh=image/gif|$hh=image/png|$hh=image/bmp|$hh=im

11、age/jpg|$hh=image/jpeg)move_uploaded_file($fff,E:/zhandian/zhandian1/sousuo/touxiang/.$_POSTname.jpg);/目录地址不能用反斜杠。echo alert(注册成功,您是第.$hang.位注册用户!);else echo alert(对不起,您未能注册成功!);else echo alert(对不起您未能注册成功,因为您输入的验证码不正确或右侧的验证码已经失效。);mysql_close($conn);?这段代码主要是将游客注册信息插入到test2表，如果游客注册成功，会弹出一个注册成功提示框“注册成

12、功,您是第*位注册用户!”。如果没能注册成功，则会弹出一个注册失败提示框“对不起,您未能注册成功!”或“对不起您未能注册成功,因为您输入的验证码不正确或右侧的验证码已经失效。”,（出现此提示是因为游客在注册时，由于停留时间过长，对应的session已经不存在了）如图4-4所示。图4-4 注册界面3.3.2 登陆及退出登录代码的实现?phpheader(Content-Type:text/html;charset=GB2312);include(conn.php);$g=mysql_query(SELECT * FROM test2 WHERE name=$_GETusername and mi

13、ma=$_GETmima);$h=mysql_query(SELECT * FROM test2 WHERE mima=$_GETmima and name!=$_GETusername);$j=mysql_query(SELECT * FROM test2 WHERE name=$_GETusername and mima!=$_GETmima);$hang=mysql_num_rows($g);$hang_1=mysql_num_rows($h);$hang_2=mysql_num_rows($j);if($hang)$host=$_SERVERHTTP_HOST;$host= md5($

14、host);$cookie_=$_COOKIE$host.$_COOKIE$host;session_start();$_SESSION$cookie_ = $_GETusername;echo 欢迎.$_GETusername.登陆！;elseif($hang_1)echo 用户名有误;elseif($hang_2)echo 密码有误;elseecho 用户名和密码都有误;?这段代码主要是检测游客登录时，所提交的用户名和密码。如果表test2中有游客所提交的游客名，但没有游客所提交的密码，则会输出一个错误提示信息“密码有误”。如果表test2中有游客提交的密码，但没有游客提交的用户名，则会输

15、出一另一个错误信息“用户名有误”。如果表test2中既没有游客提交的游客名，也没有游客所提交的密码，则会输出“用户名和密码都有误”。如果表test2中既包含游客提交的游客名，又包含游客提交的密码，则输出“欢迎*登陆！”信息，并把游客的名字存入到一个名为$cookie_的SESSION中。这段代码主要是将值为要退出的游客名的SESSION设为空,登陆界面如图4-5：图4-5 登陆界面3.3.3留言代码的实现这段代码主要是将游客提交的留言内容插入到表liuyan中，如果游客留言信息被成功插入，则会输出插入位置（游客是第几位留言的）。如果插入失败。则会输出错误提示信息“留言失败”或“还没登陆”,（当

16、游客还没登录时就留言，会输出此错误信息）留言界面如图4-6。图4-6 留言界面3.4运行测试我们以游客张山为例，来测试一下本网页的几个主要功能模块。（游客注册、游客登录和游客留言）3.4.1 注册当游客张山输入注册信息时，界面如图4-7：图4-7 注册界面当游客张山提交信息成功后，将会弹出一个成功提示信息，如图4-8：图4-8 提示界面当我们查看数据库test中的表test2时，会发现其多了一条关于张山的游客信息。如图4-9：如图4-9 注册后的数据库图3.4.2 登陆当张山把名字和密码输入时，登陆界面如图4-10：图4-10 登陆界面当张山以正确的名字和密码登陆后，出现提示，如图4-11：图

17、4-11 提示界面3.4.3留言当张山写入留言时，留言界面如图4-12：图4-12 留言界面当张山成功将留言内容提交后，会弹出一个留言成功提示框，如图4-13：图4-13 成功留言界面当我们查看数据库test中的表liuyan时，会发现其多了一条有游客张山所写的留言内容，如图4-14：图4-14 留言图3.5遇到的问题及解决方法在本次论文设计中主要遇到两个大问题。第一，在输出注册框时出现了乱码。解决方法是:在要输出的注册框代码的开头处加上这么一段代码header(Content-Type:text/html;charset=GB2312);第二，在游客留言时，游客已经退出了登录，但还能以此游客

18、名进行留言。解决方法是：在游客登录时，在后台创建一个名为$cookie_（此名是有游客电脑中的关于本网页的cookie值相加得到的。）的session，将游客名存入其中。在用户退出登录时，就其值设为空（因为游客在提交留言时，会有一个专门的动态网页首先查看后台服务器中有没有名为$cookie_的session或其值是否为空，如果其不存在或值为空，则就说明此游客还没有登录，就会有相应的提示框弹出。）。总结：在制作本次论文所涉及的网页时，大大小小也遇到的不少问题，但主要的问题也就这两个，这些问题都是通过查阅一些相应的查考文献来一一解决的。结 束 语本设计根据毕业设计任务书的要求制作，功能基本实现，可以完成登陆、注册、留言、各产品展示等功能的实现。此次设计是查看了一些企业网站的结构然后进行设计的，虽然此次设计构造不能说是成熟，但也算是尽了