零食网系统的网页设计

经典word整理文档，仅参考，双击此处可删除页眉页脚。本资料属于网络整理，如有侵权，请联系删除，谢谢！课程设计报告书课程名称：网页设计与制作题目：系名：专业班级：零食网系统的网页设计信息工程系姓名：学号：指导教师:年月日课程设计任务书学生姓名：指导教师：专业班级：工作单位：设计题目：零食网系统的网页设计初始条件:Dreamweaver要求完成的主要任务:主要任务：运用HTML、CSS、Dreamweaver为主，以JavaScript、VBScript、、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设计题目与要求零食网系统的网页设计运用CSSDreamweaverJavaScript、、ODBC访问Access数据库等技术为辅，设计一个以静态网站为主的系统，实现信息的浏览等基本功能。具体要求为：(1)网站要有一个明确的主题，界面友好美观。(2)主页要求有用户登录显示，实现网页的浏览，信息的查询等基本功能，50个以上的超链接。(3)网站内容不能雷同。每个人需要检查设计的网站，设计报告文档，并提交等。2设计思想2制作一个零食销售网站，能够满足用户的基本需求。网站的界面应该具有用户选取商品后应该有支付的页面，支付页面需要有用户支付方式等相关的信息，用户确认商品后应该可以做出取消的操作。以及部分商品的信息情况。打开商品大体分类的链接后，可以看到具体的商品，每个商品有图片介绍，在图片的下方有该商品的价格，点击商品的图片链接后，输入信息后，如果输入的信息有误，可以重新填写，确认输入无误后可以登陆。3系统结构从首页可以进入用户注册、商品分类以及用户登陆页面，进入用户登陆页后，可以看到相关的商品明细，确认商品后，进入结账页面，确认结账后，返回支付成功信息，并返回首页。系统流程图3-14详细设计与实现打开dreamweaver8站点的名称，如下图所示。图4-1站点建立dreamweaver8的右下角看到，如图图4-2文件夹视图在右下角的零食网文件夹出，右键点击该文件夹，选择新建文件夹，命名为CSSCSSimages来保存建立网页所需要的相关媒体文件。点击左上角的新建选项，然后新建一个网页。在设计样式中，选择插入然后选择表格，在出现的界面中设置如下图4-3表格设置表格建立完成后，效果如下图所示图4-4页面布局然后在每个表格中插入先前准备好的背景图片即可。表格背景设置完成后，选择插入—布局对象—层，然后在出现的层中插入一张表格，用来设置主页中商品的“全部分类”选项。插入的表格设置为9行1列即可。在新建的这张表格中，填入需要设置的商品名称。然后将该层移动到最左photoshop283*283,接着插入3photoshop画窗口新建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@163.com如图所示图4-7首页截图商品展示页面我们可以利用dreamweaver:选择新建一个页面，在弹出的窗口中选择如下图所示图4-8模板然后我们对新建的页面进行修改。首先将背景颜色更改为符合我们网站风格的颜色，用鼠标点击背景的空白dreamweaver将里面的属性修改为我们需要的属性即可，具体的参数设置如下图所示图4-9属性然后建立一个页面，在代码栏中我们写入需要设置的CSS样式代码，里面包括网页中文字的样式和部分背景图片的样式。然后保存为CSS后缀的文件即CSS的代码如下<linkrel="stylesheet"href="css/mm_restaurant1.css"type="text/css"/>接着，我们在页面下方的表格中设置滚动提示文字，输入的代码如下<P><MARQUEEclass="pageName">更多商品，添加中Ing...</MARQUEE></P>在网页顶部的位置，我们添加一个导航条，用于其他分类商品的链接和返回首页，从左到右输入的文字如下图4-10导航栏进行一些小的修整，完成后的页面如下图4-11商品展示页面首先插入表格并进行分割，然后在分割好后的表格中插入事先准备好的图一个用于填写用户密码，并将这两个表单分别命名为t1和t2，接着在这两个表图4-12登陆框接着我们编写一个简单的javascript程序，用于提示用户的登陆情况。代码如下<scriptlanguage="javascript">functionfun1(){alert("登陆成功！");}</script>最后，我们在网页的左下角设置一个返回首页的链接，完成后的效果如图图4-13登陆页面插入一张表格设置为1列5行，在第一行中我们设置一个用于返回首页的3在第55所示图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;}}插入一张表格并进行分割，插入事先准备好的图片并设置好CSS样式，然个用于取消当前的操作，完成后的页面如图所示图4-15结账页面5调试运行将站点文件移动到别的文件夹，进行测试，这样可以检测网页中的链接是否添加正确。首先进入站点文件夹，打开index.html文件，在浏览器中显示如下图所示图5-1首页测试我们可以发现部分图片显示不正常，因此可以判定有部分图片的链接添加当文件夹的位置改变后，发生了图片显示不正常的情况。修改后的结果如下图所示图5-2首页链接修改后可以看到网页已经可以正常显示。在打开的首页中，我们点击左侧导航栏中的“进口零食”链接，进入如下页面图5-3进口零食页面发现一切正常，然后在该页面中，我们点击顶部导航栏中特产零食链接图5-4导航栏测试发现一切正常，然后我们在任意点击顶部的其他任意链接图5-5其他链接测试发现一切正常，并且我们可以看到，下部的滚动文字提示运行正常，如图所示图5-6底部效果,进入页面后，我们可以看到页面显示正示图5-7用户名提示图5-8密码提示明注册成功。果如图所示图5-9登陆提示空”按钮，可以看到用户输入的数据已经清空。页面中，我们可以看到默认的商品数量为1，接着修改商品数量，如图所示图5-10商品数量点击取消后图5-11成功提示弹出取消成功的提示并且商品的数量重置为1，如图所示图5-12重置结果当我们输入商品数量后，点击提交后图5-13成功提示弹出购买成功提示，并且返回首页。6自我评价与总结在编写javascript程序的时候，一些语法掌握的不够好，运行网页的时候的左下收了不少的知识。在这次网页制作我的总结有下面几点，首先对于一个网站来说，首页设计、是一个很好的布局工具，另外div层的应用更能够锦上添花。