零食销售网站的设计.docxVIP

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-