零食网系统的网设计.docx
《零食网系统的网设计.docx》由会员分享,可在线阅读,更多相关《零食网系统的网设计.docx(12页珍藏版)》请在冰豆网上搜索。
零食网系统的网设计
课程设计报告书
网页设计与制作课程名称:
题目零食网系统的网页设计:
系名:
信息工程系
专业班级:
姓名:
学号:
指导教师:
年月日
课程设计任务书
学生姓名:
专业班级:
指导教师:
工作单位:
设计题目:
零食网系统的网页设计
初始条件:
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;
}
}方正舒体;color:
{font-size:
xx-large;#FF0000;font-family:
.STYLE3
.STYLE5{font-size:
medium;color:
#333333;}
个热点区域,分别在登陆、注册和联系的位置并设置到链接,然后设置3其中在联系的链接中,我们输入用于测试。
完成后的页面如图所示图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(){
污牥?
登陆成功!
);
}
最后,我们在网页的左下角设置一个返回首页的链接,完成后的效果如图
图4-13登陆页面
4.4注册页面的制作
插入一张表格设置为1列5行,在第一行中我们设置一个用于返回首页的链接并设置为向右对齐,在第3行中我们输入部分的文字,用于提醒注册的用户。
在第5行中,我们插入5个文本域,分别用作输入用户名称,用户密码,验证密码,用户邮箱,用户昵称,然后在下面插入连个单选按钮用于用户设置性别。
最后,在最下方设置两个按钮,用于用户提交表单和重置表单,完成的效果如下图所示
图4-14注册页面
接着我们编写用于验证用户输入的信息是否合理的javascript程序代码,部分代码如下
functioncheckSubmit()//用于验证用户输入的信息是否正确
{
//判断用户是否输入了用户名
{
愠敬瑲尨用户名不能为空!
);
returnfalse;
}
//判断两次输入的密码是否一致
{
愠敬瑲尨登陆密码不能为空!
);
returnfalse;
}
{
愠敬瑲尨两次密码不一致!
);
returnfalse;
}
//判断用户是否输入了EMAIL地址
{
alert(Email不能为空!
);
returnfalse;
}
//判断用户是否输入了昵称
{
愠敬瑲尨用户昵称不能为空!
);
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