网页设计课程设计报告

1、动态网页设计与制作课程设计报告学校： 华南农业大学珠江学院 系别： 信息工程系 课题： “浪漫婚纱”动态网站设计 专业班级： 08计算机科学与技术1班 姓名： 詹昌健 学号： 2 指导教师： 丁蕾 19 / 21文档可自由编辑打印目 录一、设计目的 .1二、课程设计题目要求及描述 .11设计要求 .12描述 .1三、网站设计思想和详细设计分析 .21网站整体结构规划思想 .22主页设计思想与分析 .33子页设计思想与分析 .6 3.1 子页婚纱展示 .73.2 子页在线订购 .73.3 子页访客留言（留言板）.83.4 子页万年历查询 .9四、网站站点建立与数据库连接测试 .10 1建立站点

2、.10 2建立布局 .123数据库连接测试 .14五、设计总结 .151. 心得体会 .152. 展望 .15六、附件关键代码片段 .15参考文献: .18一、设计目的随着网络技术的发展与互联网的普及，网站建设与网页制作越来越成为各行各业以及个人宣传自己的有利工具，网站在当今时代被越来越多的人用来宣传。本课程的设计目的是通过实践使同学们经历Dreamweaver cs4开发的全过程和受到一次综合训练，以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例，理解并初步掌握运用Dreamweaver cs4可视化开发工具进行网页开发的方法；了解网页设计制作过程。通过设计达到掌握网页设计、

3、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。熟练掌握Dreamweaver cs4、Photoshop cs5.1、Flash5.0、Firework5.0、Access 2010等软件的的操作和应用。增强动手实践能力，进一步加强自身综合素质。学会和团队配合，逐渐培养做一个完整项目的能力。我们小组本次主要设计的是以“浪漫婚纱”为主题的网页，作为一个商业网站，充分体现该公司的企业文化和商业价值，以达到预期的盈利目的。通过对"浪漫婚纱"网站结构设计、调试、连接、巩固、加深并扩大

4、所学的理论知识，培养基本理论分析，解决实际问题的能力，逐步掌握企业网站设计和调试的基本步骤，同时培养严肃认真、细致踏实、刻苦钻研、有所创作、事实求是的科学作风。二、课程设计题目要求及描述 动态网站的课程设计要求网站的风格要与所建网站的主题相协调，而且还要突出独特之处，充分体现网站的价值，既要追求人性化也要具有个性化的特点。1设计要求（1）整个课程设计的各个环节都要求小组成员自己动手，并相互协作共同完成网站设计与制作；（2）确定的网站主题应大小适中、内容健康、具有时代气息，具有一定的代表性；（3）网站提供的信息应与网站主题相符合；（4）网站LOGO与网页风格应该协调一致，网站结构应层次分明，内容

5、重点突出；（5）对课程设计进行总结，撰写课程设计报告；（6）设计时限为2个星期。2描述 我们小组确定设计以婚纱展示与销售为主题的“浪漫婚纱”企业门户网站，提供最时尚、最浪漫的婚纱礼服资讯。 主要包括：1、公司简介2、婚纱展示3、会员注册/登陆4、访客留言（留言板）5、在线订购 等等。 各个栏目布局合理，简约而美观，各子页面可通过导航栏/超链接作用跳转自如。三、设计思想1. 网站整体结构规划思想 网站结构图如下：浪漫婚纱首页 万年历查询/友情链接会员登录/员工登陆访客留言（留言板）幸福度调查通讯录管理会员注册公司简介在线订购婚纱展示关于我们添加/删除/修改进入进入进入百度首页/查看日历提交返回首

6、页管理留言写留言管理员登陆删除/回复留言图 3.1.1 网站结构图网站首页效果图如下：图 3.1.2 “浪漫婚纱”首页首页baner及logo是运用Photoshop cs5.1、Flash5.0、Firework5.0制作而成的：图 3.1.2 首页baner及logo设计2. 主页设计思想 主页依照合理、简约、美观的概念去整体布局，思路清晰，简单明了。让用户一进入主页就有种宾至如归的感觉，而且“浪漫婚纱”所散发出来的时尚气息也会扣人心弦。 （1）首先，一进入首页会弹出“消息提示框”，这是为了方便用户浏览网页时需要及时知晓的一些信息，提示框里显示的信息是：图 3.2.1 进入首页弹出消息提示

7、框这部分的代码如下：<script language="javascript" type="text/javascript">/Window Onloadwindow.onload = function()fbMenuBar.importCSS("css.css");var fb = new fbMenuBar("fbmenubar");fb.showBtn();window.alert('温馨提示：本站点里的所有网页可能需要在<<IE8.0以上版本>>才能正常显示，不同

8、的IE版本对CSS的定义不同，在其他版本浏览器下可能会出现排版位置出错。网页还添加了一首好听的背景音乐今天你要嫁给我。详情请看站点文件夹下附带的网站说明。');</script>（2）首页最上方是利用一个JavaScript脚本实现当前时间的显示，并仿照实现了IE、Google浏览器的“设置主页”及“收藏当前网页”的实用小功能：图 3.2.2 显示当前时间及一些页面功能这部分的代码如下：<td height="26"><table width="900" border="1" align=&quo

9、t;center" cellpadding="0" cellspacing="0" bgcolor="339966"><tr> <td class="font_top">欢迎光临浪漫婚纱! 今天是 <SCRIPT language=JavaScript>today=new Date();function initArray()this.length=initArray.arguments.lengthfor(var i=0;i<this.length;i+)

10、thisi+1=initArray.argumentsi var d=new initArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六");document.write("<font style='font-size:9pt;font-family: 宋体'> ",today.getFullYear(),"年",today.getMonth()+

11、1,"月",today.getDate(),"日", dtoday.getDay()+1,"</font>" ); document.write("&nbsp;<span class='STYLE9'><font style='font-size:9pt;font-family: 宋体'> ",today.getHours(),":",today.getMinutes()+1,"</span><

12、;/font>" ); </SCRIPT> </td><td width="230" class="font_top"><a href="浪漫婚纱首页.html" class="b">公司首页</a> | <a href="javascript:window.external.AddFavorite('', '百度一下，你就知道')" class="b">收

13、藏百度</a> | <a class="b" href="javascript:void(0)" onClick="this.style.behavior='url(#default#homepage)'this.setHomePage('');" style="CURSOR: hand">设百度为首页</a> </td></tr> </table></td></tr>（3）首页左中间位置

14、的文字“自下而上滚动显示”和右下角的婚纱图片“自右向左循环展示”，当鼠标移动到上面就自动停止，这部分采用的同样是JavaScript脚本：图 3.2.3 “浪漫婚纱”首页图片循环显示这部分的代码如下：<div id="imgMarquee" style="overflow: hidden; width: 570px; padding: 2px;" onmouseover="stopscroll();" onmouseout="doscroll()"> <div id="imgMarque

15、eList" style="white-space: nowrap; padding: 0;"> <img src="S11203ev2-1.jpg" width="151" height="227" /> <img src="S11204ev2-1.jpg" width="151" height="227" /> <img src="S11210ev2-1.jpg" width="

16、;151" height="227" /> <img src="S11201ev4-1.jpg" width="151" height="227" /> <img src="S11202ev5-1.jpg" width="151" height="227" /> <img src="S11223ev3-1.jpg" width="151" height="227

17、" /> <img src="S11232ev3-1.jpg" width="151" height="227" /> <img src="S11238ev2-1.jpg" width="151" height="227" /> <img src="S11218ev3-1.jpg" width="151" height="227" /> <img src=&q

18、uot;S11205ev3-1.jpg" width="151" height="227" /> <img src="S11207ev3-1.jpg" width="151" height="227" /> </div> <script>var t=imgMarquee.scrollWidthimgMarqueeList.innerHTML+=imgMarqueeList.innerHTMLfunction doMarquee()imgMarq

19、uee.scrollLeft=imgMarquee.scrollLeft<imgMarquee.scrollWidth-imgMarquee.offsetWidth?imgMarquee.scrollLeft+1:t-imgMarquee.offsetWidthfunction doscroll() sc=setInterval(doMarquee,10)function stopscroll() clearInterval(sc)doscroll()</script> </div> （4）还有一个比较人性化的设计，就是巧妙借鉴淘宝网（）以及腾讯拍拍（）的在线客服

20、JavaScript代码，在可联网的条件下，可以和网站管理员（也就是设计者本人）进行交流，在线咨询。图 3.2.4-1 在线客服功能 这部分在首页的调用代码如下：<script language="javascript" type="text/javascript" src="js/qqz.js"></script><script language="javascript" type="text/javascript" src="js.js"&g

21、t;</script>其源文件在站点目录下的“动态-期末网页设计jsqqz.js和index_qq.js”文件中，这里不再具体展示。图 3.2.4-2 在线客服源文件目录 （5）最后还不得不提到的一点就是网页的背景音乐在这里我添加的是今天你要嫁给我这首歌，这个就相对简单了，只要一行代码就能解决的了。<p><bgsound src="今天你要嫁给我.swf" loop="-1"></p> 其中src=* 是背景音乐的源文件的相对地址；loop=-1是指单曲循环的播放模式。3. 子页设计思想 子页的设计是对主页

22、的更仔细地阐述，是为了更好地突出网站的主题和特色。我本人所承担的是以下几个子页的设计和制作。包括婚纱展示、在线订购、访客留言（留言板）、万年历查询等等3.1 子页婚纱展示婚纱展示这个子页意在向人们展示“浪漫婚纱”的系列产品，以供顾客观赏和选择购买，网页采用极具个性化的效果，当鼠标移动到某张图片上面时，图片会跟着鼠标在一定范围内一起移动，单击鼠标左键可以放大图片。如图 3.3.1所示：图 3.3.1 婚纱展示页面3.2 子页在线订购 在线订购系统可以说是整个网站设计过程中尤为重要的一步，因为它直接关系到这个婚纱企业的盈利问题。在设计这个网页的时候要搭建一个数据库平台，可以选用Access或者SQ

23、L server建立数据表，用来保存顾客的订购信息，在第一时间反馈给销售部。该子页效果图如下：图 3.3.2 在线订购页面3.3 子页访客留言（留言板） 访客留言这个子页就有点像论坛的味道了，这个子系统在整个动态网站的设计中可以算得上是最难的一个了。因为它除了要求连接数据库以外，附带的各种功能也要顺利实现，包括访客登记留言、管理员登陆、管理删除/回复留言等等。废话不多说，代码在后面的附件中会详细说明，先看效果图： 图 3.3.3-1 留言版首页图 3.3.3-2 用户写留言页面 图 3.3.3-3 管理员登陆与管理页面3.4 子页万年历查询 万年历是浪漫婚纱网站的一个附带功能，它可以提供一个包

24、括农历、新历，包括世界各地不同国家的时区和确切时间，同时包含了中国的各个传统节日和节气，可以帮助一些准备结婚的顾客挑选良辰吉日。效果图如下：图 3.3.4 万年历查询四、网站站点建立与数据库连接测试 在本地建立站点必须先配置好IIS服务器，然后打开DreamWeaver CS4新建站点，在IIS服务器中浏览asp动态网页，在DreamWeaver CS4中设计各个网页，包括布局和动态asp技术设计。 在此次网站设计中，一共要建立至少3个以上的数据库，里面包含了多张数据表，需要分别对其与网页进行连接并测试，不断修正错误，改进功能。1 建立站点（1） win7系统下IIS7.5配置，如下图所示：图

25、 4.1.1 点击鼠标右键添加网站并配置（2） 配置完成，查看网站目录下的文件，选中任意网页文件在IE浏览器中浏览效果：图 4.1.2 IIS服务器站点目录配置成功（3） 在DreamWeaver CS4新建站点，步骤如下： 图 4.1.3在DreamWeaver CS4新建站点2 建立布局 建立布局通常是通过CSS格式、表格等等来规范网页界面的排版，并且尽可能地将JavaScript脚本集中在一起，方便设计人员的调试与修改，以下是首页的CSS格式代码：<style type="text/css"><!-.dx font-size: 12px;.adf f

26、ont-family: "幼圆".adf font-family: "幼圆".adf font-family: "幼圆".adf font-family: "幼圆".adf font-family: "幼圆".adf font-family: "幼圆".adf font-family: "幼圆"font-size: 14px;color: #010D2C;text-align: left;.ad text-align: center;color: #CCC

27、;.ad1 font-size: 12px;color: #000;body font-size: 14px;background-color: #509090;background-attachment: fixed;background-repeat: no-repeat;background-position: 50% 50%;.font_top font-size: 12px;text-align: left;border-color: #92532A;.jjj text-align: center;.jjj text-align: center;.kkk font-size: 12p

28、x;.yyy text-align: center;.ooo font-family: "华文新魏".ooo font-family: "方正姚体"font-size: 14px;color: #360;text-align: center;.ppp font-family: Georgia, "Times New Roman", Times, serif;font-size: 12px;color: #000;.fbmenubg1 height:43px;.fbmenubtn1 height:43px;.fbmenubg2 heig

29、ht:34px;.fbmenubtn2 height:34px;.fbmenubg3 height:35px;.fbmenubtn3 height:35px;-></style>3 数据库连接测试这里，我以留言板的数据库测试为例，新建一个数据库data.mdb，每次调用数据库都会间接访问conn.asp文件，这个文件就是建立服务器与数据库之间的连接。经过反复测试，网站所涉及的多个数据库连接都是成功的。conn.asp文件代码如下：<%set conn=server.createobject("adodb.connection")connstr=&qu

30、ot;Provider=Microsoft.jet.oledb.4.0;data source="&server.mappath("data.mdb")conn.open connstr%>图4.3 访客留言子页面文件详情(包括数据库)五、设计总结 历时一个多星期的动态网站课程设计终于完成了，在这次的实践中让我学到了不少东西，更让我体会到制作网站的乐趣。下面就畅谈一下此次课程设计的心得体会和对未来的展望吧1. 心得体会通过这次网页课程设计进一步激发了学习兴趣，调动学习的自觉性，自己动脑动手，跟小组成员们一起讨论，运用网络资源，结合教材和老师的知道，通

31、过自身实践，创作出极具风格的网站。总体来说，就是让我受益匪浅。在设计网页的这几天里，我充分利用了这次设计的机会，全身心地投入到网页设计的海洋中，不断地学习和探索网页设计的奥秘，不断地完善自我，提高设计水准。在这个过程中，我也深深体会到，想把页面做好并非一件容易的事，它包括网站主题的选择，内容的采集，图片的处理，页面的排版等等，还包括了数据库连接测试等一系列难点。本次课设还有许多不足的地方，还需要我不断地学习、综合运用各种知识，努力设计出更好地Web页面。2. 展望这次动态网站的设计与制作让我对网页设计这一块有了更大的兴趣，我相信自己将来制作出来的网页会更加专业、更加完善的。我想用一句话来表达我

32、对未来的无限期待：让我飞得更高，飞得更高非常感谢老师、同学在这次课程设计中给我的帮助和指导。谢谢六、附件关键代码片段 1、留言板管理员登陆检查（checkpass.asp）页面代码，检查通过自动跳转到管理页面。<!-#include file="conn.asp"-><% 'ASP起始admin=request.form("admin") '定义admin的值是表单传过来的用户名域名称adminpassword=request.form("password") '定义admin的值是表单传过来

33、的用户名域名称adminif admin="" or password="" then '这句的意思是假如用户名和密码没有输入的话那么执行下一句response.Write("<script language=javascript>alert('请填写完整!');history.go(-1)</script>") '用javascript脚本提示用户end if '结束if语句sql="select * from admin where admin='&

34、quot;&admin&"' and password='"&password&"'"set rs=conn.execute(sql) '设定记录集rs，用conn执行SQL语句if rs.eof or rs.bof then '当没有符合筛选结果时，则执行下面的句子response.write "<script language=javascript>"response.write "alert('用户或密码不对!');&q

35、uot;response.write "javascript:history.go(-1);"response.write "</script>" '用javascript脚本提示用户else '如果符合条件的时候session("admin")=admin '新建session，值等于表单传来的用户名response.redirect "manage.asp" '转向到manage.asp，进入管理页end if '结束if语句%>2、留言板留言保存（ch

36、eckpass.asp）页面代码，保存完毕自动跳转到留言板主显示页面。<%LANGUAGE="VBScript" codepage="936"%><!-#include file="conn.asp"-><%set rs=server.createobject("adodb.recordset")sql="select user,qq,email,content,icon from main"rs.open sql,conn,1,3rs.addnewuser=req

37、uest.form("user")qq=request.form("qq")email=request.form("email")content=request.form("content")icon=request.form("icon")rs("user")=userrs("qq")=qqrs("email")=emailrs("content")=contentrs("icon")=iconrs.updaters.closeset rs=nothingconn.closeset rs=n