【毕业学位论文】（Word原稿）基于ASP自然美钻电子商务网站设计-电子商务

南京高等职业技术学校 毕业设计（论文）说明书 系部 计算机管理系 专业 电子商务 作者 学号 题 目： 基于 然美钻电子商务网站设计 指导教师 评阅教师 完成时间： 2012 年 5 月 18 日 2 毕业设计（论文）摘要 基于 然美钻电子商务网站 设计 摘要 ： 随着社会的日益发展和进步，人们的生活有着翻天覆地的变化，网购逐渐流行起来，人们可以足不出户的直接在网上购买到自己想要的物品，尤其现代白领工作繁忙等一系列因素，舍去逛街时间，却可以在网上满足她们的需求。本网站针对此类人群提供了一个饰品的购物平台，极大的提高了人们的生活效率。 本组 设计的 是一个饰品网站，以清新自然的风格为主。大方、简洁、时尚。 在页面设计中以蓝色为主要风格，蓝色代表静谧深邃，也给人舒服平静的感觉。 众多的挑选模式，给人们耳目一新的感觉。 在技术上，本网站只要采用 行设 计， 件进行页面美工等。网站有用户登录、注册、留言板、购物车、评价、搜索商品等功能。满足客户的需求。 关键词 ： 电子商务、 页面设计 、 饰品网站 3 目录 第一章 引言 . 4 第二章 自然美钻网站系统简要说明 . 4 2 1 网站开发所需语言 . 4 2 1 1 言 . 4 2 1 2 言 . 4 2 1 3 术 . 4 2 2 网站开发运用的软件 . 5 2 3 配置 . 5 第三章 网站 总体框架 . 7 3 1 结构设计 . 7 3 2 网站的功能介绍 . 8 3 3 数据库的建立 . 8 第四章 网站的页面设计与风格 . 9 4 1 主体 风格 . 9 4 2 界面设计 . 9 页 . 9 站子页面的展示 . 13 像及字体的设计 . 18 站按钮的制图介绍 . 19 第五章 前台模块的设计 . 20 页模块的功能介绍 . 20 页面模块功能介绍 . 20 结论 . 20 致谢 . 21 参考文献 . 21 4 第一章 引言 近年来，随着 快速发展 ， 越来越多的 行 业组织开始在互联网上建设网站 。 并以网页作为 各个行 业向外界展示形象、发布信息的窗口。 从而一个新兴的行业诞生 电子商务。许多商家在互联网上建立起在线商店，不限时间、地点、空间的向消费者展示出一种新颖的购物模式。 网购一个时髦的购物方式，它的好处在于： 1、不受时间、地点的限制，只要有互联网，随时随地可以购物； 2、 从订货、买货到货物上门无需亲临现场，既省时又省力； 3、 购物地点选择多，网络购物可以买到任何地方的商品，包括省外、国外的商品也可以购买到 ； 4、 网 上商品价格相对较低。相对于实体店， 网店 省去了店租、人力费用等可以适当的降低商品的价格。 综上所述，电子商务发展如此之迅速，中国网购人数的越来越普及，人们对网上购物有了更深刻的掌握。真正从电子商务的平台达到网络营销的效果，网上购物必然形成一种趋势，持续不断发展下去。无疑成为当下流行、极具前景和创新活动的商业模式。 第二章 自然美钻网站系统简要说明 2 1 网站开发所需语言 2 1 1 言 文本标记语言）的缩写，它是构成 面（ 主要工具，是用来表示网上信息的符号标记语言。 2 1 2 言 一种基于对象和事件驱动并具有安全性能的脚本语言，有了使网页变得生动。 2 1 3 术 简称，是服务器端脚本编写环境，使用它可以创建和运行动态、交互的 务器应用程序。 5 2 2 网站 开发 运用的软件 本系统基于 术设计，主要使用 据库的开发运用了 2 3 配置 以 例，下面介绍 安装及其配置： 双击 一键安装程序。 如下图所示： 2 2 系统会自动安装，安装完成后对话框自行关闭。 安装完成后在桌面选择鼠标右键我的电脑中的管理，选中左侧的服务和应用程序中的 务器下的网站默认网站。 如下图所示： 2 2 选择鼠标右键菜单中的“属性”选项， 弹出默认网站属性对话框。 可以对当前 点进行进一步的管理配置。如下图所示： 26 图 2 在“ 默认 网站属性” 的对话框中， 在“主目录”属性页面可以设置 且可以进行访问权限的设置，如“读取”、“写入”、“目录浏览”、“记录访问”、“脚本资源访问”和“索 引资源”。这里要把路径设成网站所在的位置。如下图所示： 2 2 在“文档”属性对话框中，需要添加“ 默认文档，并需要放置在最上面。如图所示： 27 图 2置好后可以直接使用于浏览网页。 第三章 网站总体框架 3 1 结构设计 如下图所示： 3 然 美 钻注 册 / 登 录最 新 商 品商 品 分 类商 品 活 动版 权 所 有首 页 广 告热 门 商 品 促 销 商 品商 品 分 类商 品 问 答 商 品 评 价商 品 列 表 商 品 内 容加 入 收 藏 直 接 购 买加 入 购 物 车商 品 结 算确 认 订 单我 的 商 城服 务 与 评 价 订 单 我 的 收 藏产 品 展 示 新 闻 发 布 留 言 板后 台流 量 统 计关 于 我 们 支 付 方 式客 户 服 务售 后 服 务 8 图 3 2 网站的功能介绍 网站的功能主要包括有 ： 用户的注册与登陆以及个人信息的修改 商品的搜索以及购买 用户对商品的评论以及提问 购物车的更新与清空 新闻的浏览以及后台的添加 3 3 数据库的建立 具体数据库内容： 作为一个动态的网站，数据库的连接是很重要的，本系统数据库采用003 数据库，系统数据库名称为 包含 10 张表 。如图 3-2 购物车列表。 用户对商品的评论列表。 登陆后台是的列表。 新闻管理页的列表。 用户购买的商品信息的列表。 商品信息的列表。 对商品的分类列表。 用户对商品提问的列表。 量子统计访问网站的信息列表。 记录用户注册信息的列表。 9 图 3四章 网站的页面设计与风格 4 1 主体 风格 毕业设计 做的是一个 钻石 饰品的网站， 该网站以简约、大方为主要风格，蓝色为主色调。 4 2 界面设计 页面分为 6 个板块，有 、广告板块、用户的登陆与注册板块、产品类别板块、产品展示板块、最新活动板块。 页 首页宽度为 900 像素。在最顶上是 ； 的左下方是用户的登陆与注册板块； 的右下方是一个 广告；在用户登陆与注册的板块下面是商品的分类与最新商品的板块； 告下面是展品的展示区域。由这六个板块组成网站首页。如图： 410 图 4 站采用的是图文并茂的 体颜色为淡蓝色。左侧是一个花形钻石，右侧是 “ 自然美钻 ” 四个字，在下面还有 倒影。如图 4图 411 ： 的底纹是由深蓝到浅蓝组成，配合网站整体颜色，由于 颜色没有层次感，上面又加少许变了透明度的圆圈。在 指、耳钉等做为主图。 的底部则是导航条，为了突出导航条，如图导航条 的文字用 较深的蓝色。 的整体颜色偏暗，所以加上一些白色的星星作为点缀。使整体看起来简约而又不失其精细。如图4示 图 4 用户登录 、 注册板块：此板块底纹与 颜色相呼应，整体也做了阴影，这样看起来更为立体，同时还多了一个埃菲尔铁塔图像，这与钻石的气质非常贴切。顶上的“欢迎来到自然美钻”用的是相对蓝色而言较为突出的酱红色，酱红色不失整体的大气而又醒目。而下面的“登录、注册、我的商城、我的购物车”字样则用的是深蓝色，与整体颜色较为协调。如图 4示 图 4 广告板块：广告采用 术制作了一个动态的广告，当鼠标移动到某一图片上时，图片会自动展开。移动到另一图片上时，则另一张图片自动打开。由于广告背景较为单调，所以这里设计改变透明度的圆圈作为底纹，正 好与上面的 相呼应。如图 4示 12 图 4 产品展示与最新活动板块：这两个板块的底纹用了渐变的效果，并且都采用的阴影，使其看起来更为立体，在板块顶部用了深蓝色的底纹，底纹上面则是所属板块的名称，名称采用了投影的效果。板块整体协调。适合该网站。如图 4示 图 4 产品排列展示板块：由于整个网站颜色整体偏暗，此板块在颜色上没有要求，产品为一排三个共两排展示给顾客，所展示的商品图片清晰，介绍完整，价格用醒目的红色标注。如图 4示 13 图 4 网站子页面的展示 商品列表： 商品列表布局与首页相同，唯一不同的是商品图片加上边框，规整的呈现在用户面前。并且商品的价格用了与页面相呼应的颜色，使整个页面看起来清爽、大气。如图 4示 14 图 4 新闻：新闻页面布局也与首页保持了相同的样式，陈列新闻的标题用了12 号的字体，并且字体颜色也采用了深蓝色。每个新闻标题前面都加上方形的项目符号，使整体看上去协调。如图 4示 15 图 4 银饰保养页面：银饰保养页面去除广告模块，字体则用偏土黄色的颜色，使整个页面看上去清爽、整齐。有利于用户阅读。如图 4示 16 图 4 商品详细 页：商品详细页利用一个九行三列的表格把各个商品对应的价格等相关信息展示给顾客，同时在表格下方添加了商品简介、商品评价、商品问答板块。有利于顾客更加详细的了解该商品。如图 4示 17 图 4 我的购物车：我的购物车页面是由一个六行五列的表格组成，第一行是标题“在线购物”底纹用的是深蓝色，下面五行则是用户购买商品显示的有关 18 信息。如图 4示 图 4像及字体的设计 网站设计要注意的两个要点：整体风格和色彩搭配。 该网站因为是卖钻石、水晶类电子商务型网站，所以风格大方、清新，没有过多的 装饰。给顾客一种大气的感觉。网站的 在最突出的位置，以便于顾客记住该网站的名字。在页面设计中以蓝色为主要风格， 用一种色彩。然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。 该网站就是用基色 蓝色。使其透明度与饱和度的不同。蓝色代表静谧深邃，也给人舒服平静的感觉。配上深蓝色的边框和文字，有层次感的搭配。网站卖的是钻 19 石、水晶等一些饰品，配上蓝色又给顾客一种透亮的感觉。 网站字体， 一般网页默认的字体是宋体。为了体现站点的 “ 与众不同 ” 和特有风格，可以根据需要选择一些特别字体。制作者可以根据自己 网站所表达的内涵，选择更贴切的字体。需要说明的是：使用非默认字体只能用图片的形式，因为很可能浏览者的计算机里没有安装特别字体，那么辛苦设计制作便可能付之东流了。 该网站主要采用的是宋体 12 号字体。主要颜色有与整体相呼应的蓝色等一系列颜色。 站按钮的制图介绍 首先介绍的是登录与确认按钮。这两个按钮设计思路相同，呈 一个圆角矩形状，并且填充上与网站整体相应的渐变色，再对其添加描边的效果，如图 4在圆角矩形上添加汉字与英文翻译，中间用线条隔开，这样整个按钮看上去较为舒适。如图 44示 。 图 4 图 4 图 4次介绍的是加入购物车、加入收藏夹按钮。这两个按钮用了投影的效果，在颜色上用了图层叠加的方法，在最底层的渐变色上又叠加一层深蓝色，文字则用的是白色。如图 4示。最后做了倒影，这样使按钮看上去更为生动些。如图 4示。 图 4 图 4后介绍的是前去结账按钮。前去结账按钮的 外观是一个箭头样，然后加上投影和斜面浮雕的效果，立体感立即出现。最后在图层上添加文字，文字右侧则是一个象征性的小手。用来引导顾客购买商品。如图 4示。 图 420 第五章 前台模块的 设计 页 模块的功能介绍 登录、注册功能：用户可以登录或注册成本网站会员，注册成功后且可以修改自己的资料。 商品搜索功能：为了提高用户对网站的使用效率，此功能可以直接输入用户想要买的商品，从而节约时间找商品。 产品分类功能：此功能将所有产品进行分类，从而可以节约用户更多的时间直接找到自己所想买的产品。 广告功能： 广告采用 术做成，用户用鼠标点击到一则广告可自动展开，生动形象的将产品展现在顾客眼前。 页面模块功能介绍 加入购物车功能：用户选择好商品后点击加入购物车按钮后，可以选择继续购物或修改当前商品的购买数量及清空购物车，购买商品可以填写自己的送货地址、方式等相应信息。从而购买商品成功。 商品评价功能：当用户购买商品成功后可以评价此商品，评价留在此商品信息的下面，任何用户访问该商品时都可以看见评价。 商品问答功能：此功能无需购买商品，但必须要用户登录方可对商品进行提问，所提问题任何用户访问该商品时 都可以看见提问。 结论 时间飞逝， 大专四年 在这最后 的毕业设计总结 中 划上一个圆满的句号 。 四年中学习了很多的软件，包括 ，在这次的毕业设计中 ，本组将所学的所有软件都运用起来，利用 行前台静态页面的设计，数据库用 行设计，动态页面用了版设计等。 本小组设计的是一个饰品网站， 在整个设计过程中我们遇到很多问题和错 21 误 。在老师的 指导 与 帮助 下，我们一步一步的改正成为现在运行良好的网站。在本 次的毕业设计中，融合了所有四年所学的专业知识，这不仅为我巩固了以前的知识，也为将来打好了结实的基础。 通过本次毕业设计让我明白了学习的重要性，学习是一个长期积累的事情，所以我们要活到老学到老。同时还明白了团队中成员合作的重要性，凭自己单独的力