零食网系统的网页设计.docx
《零食网系统的网页设计.docx》由会员分享，可在线阅读，更多相关《零食网系统的网页设计.docx（19页珍藏版）》请在冰豆网上搜索。
零食网系统的网页设计
课程设计报告书
课程名称：
网页设计与制作
题目：
零食网系统的网页设计
系名：
信息工程系
专业班级：
姓名：
学号：
指导教师:
年月日
课程设计任务书
学生姓名：
专业班级：
指导教师：
工作单位：
设计题目：
零食网系统的网页设计
初始条件:
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月22～1月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-1
4详细设计与实现
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:
test@用于测试。
完成后的页面如图所示
图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程序，用于提示用户的登陆情况。
代码如下
functionfun1（）{
alert（"登陆成功！
"）;
}
最后，我们在网页的左下角设置一个返回首页的链接，完成后的效果如图
图4-13登陆页面
4.4注册页面的制作
插入一张表格设置为1列5行，在第一行中我们设置一个用于返回首页的链接并设置为向右对齐，在第3行中我们输入部分的文字，用于提醒注册的用户。
在第5行中，我们插入5个文本域，分别用作输入用户名称，用户密码，验证密码，用户邮箱，用户昵称，然后在下面插入连个单选按钮用于用户设置性别。
最后，在最下方设置两个按钮，用于用户提交表单和重置表单，完成的效果如下图所示
图4-14注册页面
接着我们编写用于验证用户输入的信息是否合理的javascript程序代码，部分代码如下
functioncheckSubmit（）//用于验证用户输入的信息是否正确
{
if（document.form2.userid.value==""）//判断用户是否输入了用户名
{
document.form2.userid.focus（）;
alert（"用户名不能为空！
"）;
returnfalse;
}
if（document.form2.userpwd.value==""）//判断两次输入的密码是否一致
{
document.form2.userpwd.focus（）;
alert（"登陆密码不能为空！
"）;
returnfalse;
}
if（document.form2.userpwdok.value!
=document.form2.userpwd.value）
{
document.form2.userpwdok.focus（）;
alert（"两次密码不一致！
"）;
returnfalse;
}
if（document.form2.email.value==""）//判断用户是否输入了EMAIL地址
{
document.form2.email.focus（）;
alert（"Email不能为空！
"）;
returnfalse;
}
if（document.form2.uname.value==""）//判断用户是否输入了昵称
{
document.form2.uname.focus（）;
alert（"用户昵称不能为空！
"）;
returnfalse;
}
}
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程序的时候，一些语法掌握的不够好，运行网页的时候的左下角总是显示“网页错误”，并且点击触发事件的按钮时，总是得不到想要的效果，于是，我借助网络、书籍和周围同学额的帮助，顺利解决了这些问题，我从中吸收了不少的知识。
在这次网页制作我的总结有下面几点，首先对于一个网站来说，首页设计、整体的风格很重要，这是给访问用户的第一感觉。
在进行首页设计的时候，需要一些专业工具的帮助来进行设计，或者从网络上收集一些别人设计好的资源，这样既可以节省时间，又能很好的制作出美观的页面。
在网页的整体布局时，表格是一个很好的布局工具，另外div层的应用更能够锦上添花。
关于滚动的文字等特殊效果能够起到一定的辅助作用。
其次，网站整体风格的统一可以通过一些内置模板来实现，这样可以节省我们很多的时间。
页面内容也是很重要的，充实的页面内容也能让页面看起来更加舒服，让用户能够获取更多的信息。
总之，通过这次网站的制作，我的收获很多，学到了很多新的知识，但是仍然需要继续努力，不断的完善自己。
设计过程中现场提问（或答辩）记载：
1.为什么有的页面图片显示不正常？
在页面中添加图片的时候，资源的链接的路径使用的是绝对路径，当文件置改变后，路径位置不正确造成。
2.在编写javascript程序时，有什么需要注意的?
编写时要注意语法的正确性，每条语句的结尾要加上分号，特别要注意逻辑上的错误。
3.你有什么好的方法来建立一个好的页面布局？
在建立页面的时候，可以利用表格、div层和框架来完成页面的布局。
指导教师评语：
成绩评定等级：
指导教师（签名）：
2013年1月25日
升级会员 