零食网系统的网页设计.doc

_课程设计报告书课程名称：网页设计与制作 题 目： 零食网系统的网页设计 系 名： 信息工程系 专业班级： 姓 名： 学 号： 指导教师: 年 月 日课程设计任务书学生姓名： 专业班级： 指导教师： 工作单位： 设计题目：零食网系统的网页设计初始条件: Dreamweaver要求完成的主要任务:主要任务：运用HTML、CSS、Dreamweaver为主，以JavaScript、VBScript、ASP、ADO、IIS、ODBC访问Access数据库等技术为辅，设计一个以静态网站为主的系统，实现信息的浏览、查询等基本功能。具体要求为：(1) 网站要有一个明确的主题，界面友好美观，主题从参考题目中选择或自选，同一个题目最多只能3人使用。(2) 主页要求有用户登录显示，实现网页的浏览，信息的查询等基本功能，50个以上的超链接。(3) 网站内容不能雷同，雷同者全部以0分记载。每个人需要检查设计的网站，设计报告文档，并提交纸质版的课程报告和电子版的网站设计资料，包括：源程序，网站运行效果截图，电子版的资料以班为单位刻成光盘后由班长统一提交。设计报告撰写格式要求：1设计题目与要求 2 设计思想 3系统结构 4 系统详细设计，内容包括各个模块的设计，数据库的设计，数据库连接设计。5调试过程和运行结果及结果分析（其中包括网站各个模块的运行结果和结果数据分析）6自我评价与总结7 附录：程序清单，注意加注释（包括关键字、方法、变量等），在每个模块前加注释；时间安排 1月21日 布置课程设计任务；分配题目后，查阅资料、 准备程序； 1月221月25 日上机调试程序、书写课程设计报告；1月25 日 提交课程设计报告及相关文档。指 导 教 师 签 字： 年 月 日系 主 任 签 字： 年 月 日-可编辑修改-1 设计题目与要求1.1 设计题目零食网系统的网页设计1.2 要求运用HTML、CSS、Dreamweaver为主，以JavaScript、VBScript、ASP、ADO、IIS、ODBC访问Access数据库等技术为辅，设计一个以静态网站为主的系统，实现信息的浏览等基本功能。具体要求为：(1) 网站要有一个明确的主题，界面友好美观。(2) 主页要求有用户登录显示，实现网页的浏览，信息的查询等基本功能，50个以上的超链接。(3) 网站内容不能雷同。每个人需要检查设计的网站，设计报告文档，并提交纸质版的课程报告和电子版的网站设计资料，包括：源程序，网站运行效果截图等。2 设计思想2.1 需求分析制作一个零食销售网站，能够满足用户的基本需求。网站的界面应该具有人性化，美观大方。网站应具有商品的分类，分类应包括商品的大体分类和详细的分类，对于商品应该具有一定的介绍，商品最好有一定的图辅助介绍，以便用户能够更好的了解自己购买的商品。除了对于商品方面的类容外，网站还应该拥有对用户服务的界面，因此，网站需要有用户注册和登陆的界面。对于用户注册界面，需要判断用户名称是否重复和相关密码的验证。登陆界面以简单实用为主。用户选取商品后应该有支付的页面，支付页面需要有用户支付方式等相关的信息，用户确认商品后应该可以做出取消的操作。2.2 设计思想建立一个主页面，主页面有商品分类的链接、用户注册链接、用户登录链接以及部分商品的信息情况。打开商品大体分类的链接后，可以看到具体的商品，每个商品有图片介绍，在图片的下方有该商品的价格，点击商品的图片链接后，可以进入支付页面。在支付页面中用户可以输入需要订购的商品数量，然后可以确认支付和取消操作。在进入用户注册页面后，用户填写信息后可以进行核对操作，例如：核对用户名称是否重复、密码是否填写正确等。用户进入登陆页面后，输入信息后，如果输入的信息有误，可以重新填写，确认输入无误后可以登陆。3系统结构从首页可以进入用户注册、商品分类以及用户登陆页面，进入用户登陆页面后，用户填写账户密码后，进行验证操作，成功后登陆并返回首页。进入注册页面后，用户填写注册资料，验证成功后，注册成功并返回首页。进入商品分类后，可以看到相关的商品明细，确认商品后，进入结账页面，确认结账后，返回支付成功信息，并返回首页。首页用户登陆验证商品分类用户注册验证进口零食特产零食饮料罐头糖果巧克力肉类零食坚果炒货饼干糕点膨化食品支付网页验证否否否是是是系统流程图3-14 详细设计与实现4.1首页制作打开dreamweaver8 选择站点，然后点击新建站点，在显示出来的页面输入站点的名称，如下图所示。图4-1站点建立然后点击确认，就会建立一个叫“零食网”的站点文件夹，可以在dreamweaver8的右下角看到，如图图4-2文件夹视图在右下角的零食网文件夹出，右键点击该文件夹，选择新建文件夹，命名为CSS，用来存放建立的CSS样式文件。然后同理新建文件夹命名为images，用来保存建立网页所需要的相关媒体文件。点击左上角的新建选项，然后新建一个网页。在设计样式中，选择插入然后选择表格，在出现的界面中设置如下图4-3表格设置表格建立完成后，效果如下图所示图4-4页面布局然后在每个表格中插入先前准备好的背景图片即可。表格背景设置完成后，选择插入布局对象层，然后在出现的层中插入一张表格，用来设置主页中商品的“全部分类”选项。插入的表格设置为9行1列即可。在新建的这张表格中，填入需要设置的商品名称。然后将该层移动到最左边的大表格中即可。接着制作在主页中需要显示的部分商品的展示图片，制作方法如下：打开photoshop工具，新建一张图片，大小设置为283*283,接着插入3张静态的图片，在photoshop中找到导航栏中的窗口选项，然后选中动画，在动画窗口新建3张新的动画图片，在第一张新建动画中只显示插入的第一张图，然后，在第二张新建动画中只显示第二张插入的图片，最后，在第三张中只显示插入的第三张图，效果如图所示图4-5GIF图片制作然后设置播放动画的时间为1秒，如图所示图4-6动画最后，保存为gif格式，同理，创建其他需要的图片即可。在首页相应的位置插入制作好的图片，然后在最右边的大表格中填入商品的名称和资料，完善页面的布局。接着对字体和页面的背景设置CSS样式，部分代码如下.STYLE1 font-size: xx-large;color: #FF0000;.STYLE3 font-size: xx-large; color: #FF0000; font-family: 方正舒体; .STYLE5 font-size: medium; color: #333333; 然后设置3个热点区域，分别在登陆、注册和联系的位置并设置到链接，其中在联系的链接中，我们输入mailto:用于测试。完成后的页面如图所示图4-7首页截图4.2商品展示页面制作商品展示页面我们可以利用dreamweaver自带的模板进行修改，方法如下:选择新建一个页面，在弹出的窗口中选择如下图所示图4-8模板然后我们对新建的页面进行修改。首先将背景颜色更改为符合我们网站风格的颜色，用鼠标点击背景的空白处，我们可以再dreamweaver的下方看见背景的属性设置菜单，然后我们只需要将里面的属性修改为我们需要的属性即可，具体的参数设置如下图所示图4-9属性然后建立一个页面，在代码栏中我们写入需要设置的CSS样式代码，里面包括网页中文字的样式和部分背景图片的样式。然后保存为CSS后缀的文件即可。返回之前所建立的商品展示页面，在网页代码中应用建好的CSS样式，输入的代码如下接着，我们在页面下方的表格中设置滚动提示文字，输入的代码如下更多商品，添加中Ing.在网页顶部的位置，我们添加一个导航条，用于其他分类商品的链接和返回首页，从左到右输入的文字如下图4-10导航栏接着选中文字，然后在下方的属性栏中添加需要连接到的地址页面。最后对网页进行一些小的修整，完成后的页面如下图4-11商品展示页面4.3登陆界面的制作首先插入表格并进行分割，然后在分割好后的表格中插入事先准备好的图片，完成界面的基本制作。接着对网页的细节进行制作，在右侧的表格中，我们选择插入表单文本域，在此我们需要插入两个表单，一个用于填写用户名称，一个用于填写用户密码，并将这两个表单分别命名为t1和t2，接着在这两个表单的上方添加上文字提示。然后在两个表格的最下方添加两个按钮，一个命名为提交，用于提交表单内容，命名为取消，用于重置表单。完成后的效果如图所示图4-12登陆框接着我们编写一个简单的javascript程序，用于提示用户的登陆情况。代码如下function fun1()alert(登陆成功！);最后，我们在网页的左下角设置一个返回首页的链接，完成后的效果如图图4-13登陆页面4.4注册页面的制作插入一张表格设置为1列5行，在第一行中我们设置一个用于返回首页的链接并设置为向右对齐，在第3行中我们输入部分的文字，用于提醒注册的用户。在第5行中，我们插入5个文本域，分别用作输入用户名称，用户密码，验证密码，用户邮箱，用户昵称，然后在下面插入连个单选按钮用于用户设置性别。最后，在最下方设置两个按钮，用于用户提交表单和重置表单，完成的效果如下图所示图4-14注册页面接着我们编写用于验证用户输入的信息是否合理的javascript程序代码，部分代码如下function checkSubmit() /用于验证用户输入的信息是否正确if(document.form2.userid.value=)/判断用户是否输入了用户名 document.form2.userid.focus(); alert(用户名不能为空！); return false;if(document.form2.userpwd.value=)/判断两次输入的密码是否一致 document.form2.userpwd.focus(); alert(登陆密码不能为空！); return false;if(document.form2.userpwdok.value!=document.form2.userpwd.value) document.form2.userpwdok.focus(); alert(两次密码不一致！); return false;if(document.form2.email.value=)/判断用户是否输入了EMAIL地址 document.form2.email.focus(); alert(Email 不能为空！); return false;if(document.form2.uname.value=)/判断用户是否输入了昵称 document.form2.uname.focus(); alert(用户昵称不能为空！); return false;4.5结账页面的制作插入一张表格并进行分割，插入事先准备好的图片并设置好CSS样式，然后在页面表格中左侧插入一个文本域，用于输入购买的商品数量，接着在商品数量表单下面插入两个按钮，一个用于提交输入的数量并提示购买成功操作，另一个用于取消当前的操作，完成后的页面如图所示图4-15结账页面5 调试运行5.1调试将站点文件移动到别的文件夹，进行测试，这样可以检测网页中的链接是否添加正确。首先进入站点文件夹，打开index.html文件，在浏览器中显示如下图所示图5-1首页测试我们可以发现部分图片显示不正常，因此可以判定有部分图片的链接添加的不正确，检查后发现无法显示的图片是因为图片的地址设置为绝对路径，因此，当文件夹的位置改变后，发生了图片显示不正常的情况。修改后的结果如下图所示图5-2首页链接修改后可以看到网页已经可以正常显示。在打开的首页中，我们点击左侧导航栏中的“进口零食”链接，进入如下页面图5-3进口零食页面发现一切正常，然后在该页面中，我们点击顶部导航栏中特产零食链接图5-4导航栏测试发现一切正常，然后我们在任意点击顶部的其他任意链接图5-5其他链接测试发现一切正常，并且我们可以看到，下部的滚动文字提示运行正常，如图所示图5-6底部效果5.2 数据测试返回首页，然后我们进入注册页面,进入页面后，我们可以看到页面显示正常，然后我们输入数据进行测试，当我们不输入信息是，点击提交按钮，如图所示图5-7用户名提示弹出提示“用户名不能为空”，接着我们输入两组不同的密码数据，如图所示图5-8密码提示弹出提示“两次密码不一致”，接着我们输入正确的数据，成功跳转回首页，证明注册成功。在首页中，我们点击登录链接，输入任意用户账户和密码后，点击登录按钮，结果如图所示图5-9登陆提示提示“登录成功”，点击确认后，返回首页。当输入用户数据后，我们点击“清空”按钮，可以看到用户输入的数据已经清空。我们在商品展示页面，点击任意我们想要购买的商品后，进入结账页面，在结账页面中，我们可以看到默认的商品数量为1，接着修改商品数量，如图所示图5-10商品数量点击取消后图5-11成功提示弹出取消成功的提示并且商品的数量重置为1，如图所示图5-12重置结果当我们输入商品数量后，点击提交后图5-13成功提示弹出购买成功提示，并且返回首页。6自我评价与总结经过此次的课程设计，我对网页制作又有了更深一步的了解，对自己这次制作的网页感觉还是不错的。但是，在制作过程中我还是遇到了不少的麻烦，比如在编写javascript程序的时候，一些语法掌握的不够好，运行网页的时候的左下角总是显示“网页错误”，并且点击触发事件的按钮时，总是得不到想要的效果，于是，我借助网络、书籍和周围同学额的帮助，