电子商务毕业设计（论文）-海洋新世界网站的设计与实现.doc

. 论文题目 海洋新世界网站的设计与实现 姓 名 学 院 大连东软信息技术职业学院 专 业 电子商务 指导教师 备 注 2012 年 11 月 11 日 海洋新世界网站的设计与实现 作者姓名： 指导教师： 单位名称： 信息技术与商务管理 专业名称： 电子商务 大连东软信息技术职业学院 2012 年 11 月 Design and Production of the New Sea world Sales Website By Yu kailiang Supervisor: Lecturer Song xilian Dalian Neusoft Institute of Information Technology November 2011 - 电子商务网页实训综合大作业任务书 电子商务网页实训综合大作业题目： 海洋新世界网站的设计与实现 设计（论文）的基本内容： 电子商务是当今世界上发展速度最快、应用前景最广、内容不断变 化的一个领域。商务活动是人类社会发展历程中逐渐发展起来的，经历 了易货交易、货币式交换、现代商业等阶段中国的上网人群已使它成为 全球互联网人口第二的国家，仅次于美国。在中国，庞大的上网人群必 将产生一个规模可观的上网购物用户群，这也是众多国际和国内互联网 从业者看好中国这一市场的原因。海产品销售网站是 B2C(Business to Customer)电子商务模式，也就是通常所说的“网上购物网站”。我们为客 户提供一个在线销售购买海产品的平台。顾客可以通过浏览商家的网页， 获得海产品的信息，选购自己所需要的产品进行在线购买，通过建立本 网站，大大方便了商户进行海产品销售，顾客也便于选购。本设计主要 通过 CSS+DIV，以及 POTOSHOP 来实现的。 毕业设计（论文）专题部分： 题目： 设计或论文专题的基本内容： - 学生接受毕业设计（论文）题目日期 第 1 周 指导教师签字： 2012 年 11 月 30 日 大连东软信息技术职业学院毕业设计(论文) 摘要 - 海洋新世纪网站的设计与实现海洋新世纪网站的设计与实现 摘 要 随着网络的高速发展越来越多的人喜欢足不出户的在家用自己的电脑上网购物， 这使得实体店中一部分客流随着网络的高速发展变的很少，那么一个企业的发展必然 会随着时代的变迁而随之改变，迎合现在的物流发展，为企业做个销售网站是很有必 要的，既剩了实体店的租金费用，又节省了雇佣员工的费用，而且面对的客户是针对 全部可以上网的人，会大大提高一个企业的利润与知名度，既可以让广大老百姓足不 出户买到称心的商品，又能提高企业的利润。所以本设计以围绕海产品中海参与鲍鱼 产品为大家做一个与海参鲍鱼有关的销售网站。 怎样才能使一个网站在茫茫的 INTERNET 市场中拥有一定的客流量呢？首先我们的 通过 POTOSHOP 来制作一个漂亮的 LOGO 来吸引客流，要有个漂亮的招牌才是最重要的。 其次主页要用 CSS+DIV 来实现的，使得主页尽量简约而不简单，让人浏览各种商品一 目了然，可以快速的找到想找的商品。网站的设计要以方便快捷为优点，因为大部分 顾客不了解海参鲍鱼该怎么做，所以应该多增加一些该产品的介绍与食谱，给人一种 很周全的感觉。 网站功能包括：(1)网站将按照类别分成栏目。预期分成公司简介、产品介绍、水 产信息、媒体信息、促销信息、饮食健康、加盟我们等栏目。(2)每个栏目下展示出该 栏目下便列出属于这个栏目的所有相关信息列表。(3)产品展示主要包括一些图片的展 示。用户很方便的通过网站便可以购买到自己所好的产品和对公司的了解，为用户提 供了快捷的服务，同时为用户节省了大量的购买时间。 关键词：关键词：电子商务，网站，HTML,DIV+CSS 大连东软信息技术职业学院毕业设计(论文) Abstract - IV- Design and production for the seafood sales website Along with the network high-speed development more and more people like never leave home in household own computer net shopping, making it a part of the entity shop passenger with the rapid development of the network, then a little change of enterprise development will with the changes of The Times change and cater to the logistics development, for now make a sales site is enterprise is necessary, both left the entity shop rent expense, and save the hiring employees' expense, and face client is aimed at all can access the Internet, will greatly improve a enterprise profit and popularity, already can let the general common people never leave home buy gratifying of merchandise, and improve enterprise profits. So this design with cnooc around seafood for everybody involved in abalone products do a and sea cucumber abalone related sales website. How to make a web site in the boundless INTERNET market has certain passenger? First, our POTOSHOP to create a beautiful by the LOGO to attract passenger, want to have a beautiful placard is the most important. Secondly homepage to use CSS + DIV implemented to make homepage as far as possible contracted and not simple, let a person browsing various commodity be clear at a glance, and can quickly find looking for goods. Website design with convenient for good, for most of the customers don't know what to do, abalone, sea cucumber to add some more so should the product introduction and recipes, give a person a kind of very thorough feeling. Web features include: (1) website will according to category into columns. Expected into company introduction, product introduction, aquatic information, media information,promotional information, curing treasure dian, contact us and other columns. (2) each column under this column under show belonging to this column will list all relevant information list. (3) products show mainly includes some pictures show. Users easily through a web site can buy their products and good for the company's understanding, provides the user with quick service, at the same time for the user can save them a lot of buy time. Keywords: electronic commerce, website, HTML, DIV + CSS 大连东软信息技术职业学院毕业设计(论文) 目录 - V- 目 录 摘 要II ABSTRACIII 第 1 章 绪 论1 1.1 课题背景.1 1.2 目的和意义1 1.3 网站的现状.2 第 2 章 关键技术介绍3 2.1 HTML 介绍3 2.2 DREAMWEAVER介绍.3 2.3 PHOTOSHOP 介绍4 第 3 章 网站设计5 3.1 网站的风格定位.5 3.2 LOGO 设计5 3.3 网页设计.6 3.4 网站的目录.8 第 4 章 网站实现9 4.1 网站的实现9 4.2 首页页面展示9 4.3 二级页面展示10 4.4 三级页面展示11 第 5 章 问题及解决方案12 5.1 遇到的问题12 5.2 解决方案.12 大连东软信息技术职业学院毕业设计(论文) 目录 - VI- 第 6 章 结 论13 参考文献14 致 谢15 大连东软信息技术职业学院毕业设计(论文) 第 1 章 绪论 - 1- 第 1 章 绪 论 1.1 课题背景 电子商务是当今世界上发展速度最快、应用前景最广、内容不断变化的一个领域。商 务活动是人类社会发展历程中逐渐发展起来的，经历了易货交易、货币式交换、现代 商业等阶段。而现代商业的商品交易又可以分为：柜台式售货、开架自选、电视电话 购物以及最先进的电子购物。互联网的发展使商家有了更加宽广的市场，许多商家推 出了电子购物系统，形成了顾客选择商品、定货、付款、送货等一系列电子购物过程。 而随之出现了虚拟商店、电子银行、电子货币等一系列与之配套的设施，电子商务正 逐渐成为各商家最重视、投入力度最大的一个领域。 说起交易网站就一定少不了 eBay2，这家美国网站缔造了一个美妙的网络发家致富的 奇迹。 几年前 eBay 出现的时候，它还只是个小不点，但崭新的商业思想却使 eBay 在 短时间内成为网络巨人。它带动起网络时代新的行为方式，为买卖双方在网上提供交 易的场所，供应一些别人看不上眼的零碎物品，例如二手电脑，旧书等等。这个点子 引出了一颗闪耀的新星，如今的 eBay 已经成为交易网站中首屈一指的名牌。 1.2 目的和意义 随着全社会信息化程度加强，各种条件的成熟，CtoC (Consumer to Consumer)模式越来 越呈现出蓬勃发展的强劲势头。目前在我国，采用这种方式的网站有近 20 家。较早进 入此领域的有雅宝、网猎、易趣、新网、酷必得、万象、大中华等交易网站。从每周 的用户浏览交易网站的频率来看，但无论是交易品还是服务都已经对客户形成极强的 吸引力。不远的未来，CtoC (Consumer to Consumer) 电子商务会成为电子商务领域的 一个引人瞩目的新亮点。 在我国，互联网正以惊人的速度发展起来。电子商务也逐渐得到政府和企业和重视， 各政府部门和企业不仅建立了自己的网站，而且还在积极开展电子商务（政务）领域， 而这些都属于 B2B，B2C，B2G，C2G 模式。为了迎合用户日益增长的物资交流需要， 在消费者之间提供便利，灵活，自由的电子商务的交易中介，设计并实现这个 C2C 的 小型电子商务平台。拥有合法身份的广大网络用户都可以通过该系统进行网上的个人 物品交易活动。 洋口海产品销售网站是 B2C(Business to Customer)电子商务模式，也就是通常所说的 “网上购物网站”。我们为客户提供一个在线销售购买海产品的平台。顾客可以通过浏 览商家的网页，获得海产品的信息，选购自己所需要的产品进行在线购买，通过建立 本网站，大大方便了商户进行海产品销售，顾客也便于选购。针对成长型企业业务管 理的要求以及企业对信息化投入的预期，满足这类企业要求的解决方案必须灵活，易 大连东软信息技术职业学院毕业设计(论文) 第 1 章 绪论 - 2- 于实施，并有良好的拓展性，可以满足企业业务及管理持续发展的要求,有效保护企业 的投资。 1.3 网站的现状 本设计现在大体已经成形，但是还有很多细节需要去调整，一个好的网站不仅要让 自己满意，更要让客户满意，顾客满意了才是一个好网站，现在的工作就是把网站的 一些细节工作处理好，比如说，网站的 LOGO 颜色问题，一开始用的是红底白字，现 在改成灰底黑字。之所以这么改是因为如果用前者的话，那么整个网站一眼看去那个 LOGO 显的太突兀。还有内间距与外间距的问题，字体的颜色大小与整体的搭配问题。 大连东软信息技术职业学院毕业设计(论文) 第 1 章 绪论 - 3- 第 2 章 关键技术介绍 2.1 HTML 介绍 HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言， 是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字、图形、动画、声音、表格、 链接等。HTML 的结构包括头部（Head） 、主体（Body）两大部分，其中头部描述浏 览器所需的信息，而主体则包含所要说明的具体内容。 HTML 只不过是组合成一个文本文件的一系列标签。它们像乐队的指挥,告诉乐手 们哪里需要停顿,哪里需要激昂。 2.2 Dreamweaver 介绍 1最佳的制作效率 Dreamweaver 可以用最快速的方式将 Fireworks，FreeHand，或 Photoshop 等档案移至 网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单， 快捷键与格式控制，都只要一个简单步骤便可完成。Dremweaver 能与您喜爱的设计工 具，如 Playback Flash，Shockwave 和外挂模组等搭配，不需离开 Dreamweaver 便可完 成，整体运用流程自然顺畅。除此之外，只要单击便可使 Dreamweaver 自动开启 Firework 或 Photoshop 来进行编辑与设定图档的最佳化。 2无可比拟的控制能力 Dreamweaver 是唯一提供 Roundtrip HTML、视觉化编辑与原始码编辑同步的设计 工具。它包含 HomeSite 和 BBEdit 等主流文字编辑器。帧(frames)和表格的制作速度快 的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。 甚至可以排序或格式化表格群组，Dreamweaver 支援精准定位，利用可轻易转换成表 格的图层以拖拉置放的方式进行版面配置。所见即所得 Dreamweaver 成功整合动态式 出版视觉编辑及电子商务功能，提供超强的支援能力给 Third-party 厂商，包含 ASP， Apache，BroadVision， Cold Fusion，iCAT， Tango 与自行发展的应用软体。当您正 使用 Dreamweaver 在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就 大连东软信息技术职业学院毕业设计(论文) 第 2 章 关键技术介绍 - 4- 能预览网页。梦幻样版和 XML Dreamweaver 将内容与设计分开，应用于快速网页更新 和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提 供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版 正确地输入或输出 XML 内容。 2.3 PHOTOSHOP 介绍 从功能上看，Photoshop 可分为图像编辑、图像合成、校色调色及特效制作部分。 图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜 像、透视等。也可进行复制、去除斑点、修补、修饰图像的残损等。这在婚纱摄影、 人像处理制作中有非常大的用场，去除人像上不满意的部分，进行美化加工，得到让 人非常满意的效果。图像合成则是将几幅图像通过图层操作、工具应用合成完整的、 传达明确意义的图像，这是美术设计的必经之路。photoshop 提供的绘图工具让外来图 像与创意很好地融合，成为可能使图像的合成天衣无缝。特效制作在 photoshop 中主要 由滤镜、通道及工具综合应用完成。包括图像的特效创意和特效字的制作，如油画、 浮雕、石膏画、素描等常用的传统美术技巧都可藉由 photoshop 特效完成。而各种特效 字的制作更是很多美术设计师热衷于 photoshop 的研究的原因。 大连东软信息技术职业学院毕业设计(论文) 第 3 章 网站设计 - 5- 第 3 章 网站设计 3.1 网站的风格定位 生活中我们都离不开海产品，但是海产品中的海参鲍鱼确不是我们饭桌上的常客， 海参与鲍鱼行业是海产品中的一支，这个行业历史悠久，唐太宗曾说过“食补者，参 也，鲍也。 ” 现在随着科学对海参鲍鱼的保健功效的认可，海参鲍鱼的价格越来越高，所以针 对的人群为中高等收入的人，那么本设计必须围绕这个群体来进行网站设计，所以说 在色彩上不要那么艳丽，要大气一点。让顾客看见你的网站的时候有一种很有档次的 感觉。 3.2 LOGO 设计 LOGO 是一个企业的简约表达方式，LOGO 的好坏会直接影响企业在消费者心目中 的形象。由于海参鲍鱼行业有一个很深的文化积淀，所以说，本设计的 LOGO 风格要 有一种古朴的风格。 本设计的 LOGO 是用 PHOTOSHOP 来完成的，采用灰底黑字与中国传统印章的结 合。如下图所示： 图 3.1 LOGO 效果图 3.3 网页设计 海产品销售网站的大体有三个部分：首页、二级页面、三级页面。每个页面都有 每个页面的特点。 大连东软信息技术职业学院毕业设计(论文) 第 3 章 网站设计 - 6- 3.3.1 首页的设计 首页就是一个网站的脸面。由于海参鲍鱼属中高档消费，所以本设计已暗红色为 主要基调。左上角部分为网站的 LOGO 部分，按照中国人的阅览习惯一般人都会从页 面的左上角开始读起，右边部分为导航条，导航条上有首页、公司简介、产品介绍等 连接。通过导航条可以找到在本网站中你想获得的任何相关信息。下面以左到右分别 是网站公告、图片展示、快捷导航。网站公告会告诉顾客本企业最近有什么打折消费， 会员卡办理等信息。图片展示为一个能代表海参鲍鱼古朴文化的图片。快捷导航显示 的是各种会员套餐，打折大礼包等等。再下者则为销售热线、商品推荐、在线客服、 公司简介与养生宝典。其中商品推荐的是最近这几个月热卖的产品，在线客户可以方 便的与企业进行沟通，排除消费者的疑问。公司简介放在最下面是让顾客浏览满意后 看到公司简介，进而为公司作宣传。至于养生宝典是为了更好的方便顾客，里面主要 介绍海参鲍鱼的食谱与营养功效。如下图所示为网站首页的结构图。 网站导航 版权 网站公告 LOGO 商品推荐 图片展示 销售热线 在线客服 快捷导航 公司简介养生宝典 图 3.2 首页结构图 大连东软信息技术职业学院毕业设计(论文) 第 3 章 网站设计 - 7- 3.3.2 二级页面设计 二主要为商品的展示，各式各样的商品为顾客展示，总有一件顾客会喜欢。二级页 面主要包含了：LOGO、产品分类、产地分类、网站公告、销售热线、网站导航、产品 列表。如果在产品列表中找到喜欢的商品可以通过在线客户来了解购买本商品的详细 信息及流程，也可以选中产品列表中的信息进入三级页面自己来了解产品信息。如下 图所示为二级页面结构图： 图 3.3 二级页面结构图 3.3.3 三级页面设计 三级页面主要为具体产品的详细信息，通过这里顾客可以看到产品的产地，以及对 产品的详细说明，购买和收藏该产品也是在这级页面实现的。三级页面结构图如下图所 示： 大连东软信息技术职业学院毕业设计(论文) 第 3 章 网站设计 - 8- 图 3.4 三级页面结构图 3.4 网站的目录 下图为本网站的目录图 大连东软信息技术职业学院毕业设计(论文) 第 3 章 网站设计 - 9- 图 3.5 目录结构设计图 第 4 章 网站实现 4.1 网站的实现 本设计总共分三个部分：首页、二级页面和三级页面。每页都采用相同的底色、 格调。 4.2 首页页面展示 不同主题的网站所应用的色彩是不同的。做到有针对性地用色是相当重要的，本 设计的主要颜色基调为暗红色，暗红代表着古朴与高贵。这样可以加强访问者对网站 的印象，当然也可以搭配其他的辅助色彩，简洁明了的暖颜色给人以温馨的感觉，搭 配美味的食物，让人心旷神怡，流连忘分。 首页部分左上角为LOGO，浏览者可以很快的感觉到网站设计的初衷就是一种古朴 的风格，图片净字则结合了禅语让人感觉到超然的境界。快捷导航可以指引顾客快速 大连东软信息技术职业学院毕业设计(论文) 第 4 章 网站实现 - 10- 的浏览本网站推出的大礼包系列产品。首页效果图如下所示： 图 4.1 首页效果图 4.4 二级页面展示 切实从消费者出发，围绕用户第一的原则，结合需要传达的信息推导出一个最适 合的网页架构。整个网站色调新颖，给人一种相当轻松的订购环境。 产品列表可以快速的查询到顾客想要的产品，可以详细的看到产品的价格，与产地 分类。左侧产品分类可以让顾客快速的找到顾客想要找的类别。如果顾客有什么问题 可以直接点击在线客服，在线客服会帮顾客迅速解决在网站中遇到的一些问题。 大连东软信息技术职业学院毕业设计(论文) 第 4 章 网站实现 - 11- 图 4.3 二级页图 4.3 三级页面展示 三级页面的实现功能比较简单；主要采用流水布局的形式进行排布。三级页面是二 级页面的延伸，重要是通过点击来实现的。主要介绍产品的详细信息，可以了解到产 品的产地、规状态、以及价格。顾客可以购买产品也是在这个页面实现的，模式是按 照超市购物的模式，顾客看到满意的产品然后点击放入购物篮，方便快捷的就实现了 在线下单。如果购买欲不三很强烈可以把本页加入收藏页，以后用到的时候就不用找 网站直接就进入到产品页面。三级页面效果图如下所示： 大连东软信息技术职业学院毕业设计(论文) 第 4 章 网站实现 - 12- 图 4.5 三级页图 大连东软信息技术职业学院毕业设计(论文) 第 5 章 问题及解决方案 - 13- 第 5 章 问题及解决方案 5.1 遇到的问题 (1) 由于缺乏美术功底，对网站配色方面很难掌握。很容易使整个色彩页面过于单 调或搭配突兀。造成主次不分或视觉冲击太大的缺憾。 (2) 相关信息资料繁多，且内容分配不适合一直运用到网页中。需要对大量信息进 行阅读研究，条例清晰的重新分配信息资料，进行目录结构设置。 (3) 资料中存在大量表格，影响页面的美观。 5.2 解决方案 (1) 阅读网页布局和色彩方面的资料和书籍，掌握相关知识，凭借自己的理解并参 考其他网站的配色方案，决定该网站的配色方案。向同学老师征求意见，对不足进行 修改。 (2) 通过自己对中国石化企业相关知识的了解，并向本专业教师了解该行业的情况。 观察其他行业建设网站的栏目结构。从中得到好的方案。 (3)采用 CSS border-collapse 属性，将属性值设置为 collapse。使表格边框呈现立体 效果。增加页面的美感。 大连东软信息技术职业学院毕业设计(论文) 第 6 章 结论 - 14- 第 6 章 结 论 本人在这次软件开发中最大的心得就是一个人完成一个软件的开发需要有足够的 时间和精力，重要的一点是细心，在软件设计的各个方面都不可以产生错误，只有在 各个阶段软件设计开发的步骤都顺利完成才可以造就整个软件开发的成功。 在软件开发过程中软件开发工具的使用十分的重要，在进行实际的实训开发以前 必须对所使用的工具进行全面和详细的了解，把实训中相关软件的使用提高到一个高 度，在对软件开发过程中相关软件使用可能产生的问题进行深入的学习和体会。编码 的过程一定要细心而且遵守规则，对运行后产生的例外进行有效的处理，从而真正正 确的实现相应的功能。需求的获取是一个重要而考虑实现是一个重要过程，做为软件 开发的第一部，必须仔细把握，才可以为软件开发的完成打下基础。编码的过程一定 要仔细谨慎，在相应的地方做好例外处理机智，对例外进行捕获，以免不严谨的编码 过程，虽不报错但较难发现错误。 实训之后，本人对软件开发有了更进一步的了解。总结起来我认为好的程序应该 具有: 易读性，易扩展性，容错性。所有变量和函数以及类名用简单易懂易记忆的命 名方式。所有类和函数甚至变量都有关键的注释说明。这点很重要，也是最基础的。 如果代码书写不够美观和易懂，我想自己以后也不想再看。就更别谈功能的扩展和新 版本开发了。整体系统架构逻辑简单清晰。模块与模块之间尽量做到互不影响，也就 是尽可能的独立。这部分工作主要体现在前期设计工作中，需要掌握好的设计经验和 方法才能够做得比较好。最后感谢所有的老师和同学对我在这次设计中的帮助。 大连东软信息技术职业学院毕业设计(论文) 参考文献 - 15- 参考文献 1庄永龙.Instant ASP 实例解析 ASP 网站编程M.北京：宇航出版社，2007. 2作者:中国就业培训技术指导中心 .电子商务师M .北京:中国广播电视大学出版社， 2008 3作者: 温谦 王赡程.别具光芒 CSS. M.大连：大连东软出版社，2008 4作者:袁磊 等.网页设计与实例教程M.北京：清华大学出版社，2008 5作者:陆俊维 等.计算机网络技术使用教程M.北京：电子工业出版社，2007 6作者:林波 卢艳霞.电子商务理论M.大连：大连东软出版社，2008 7阿里巴巴（中国）网络技术有限公司.中心企业电子商务之路M.北京：清华大学出 版社，2006 大连东软信息技术职业学院毕业设计(论文) 致谢 - 16- 致 谢 本论文从开题到最终完成历时 20 天时间。在此过程中，很多老师、同学和朋友给 了我莫大的帮助，在此表示我衷心的感谢。 特别要感谢的为我的论文研究和写作付出最多的是我的论文指导教师，他对我的 论文从选题、研究到论文写作的全过程都给予了非常有效的具体指导，是他使我的研 究能力和写作水平的到了本质的提高。为此，特向他致以衷心的谢意。 感谢软件学院提供和创造的良好的学习氛围，让我学到了软件工程的先进理念和 方法。感谢学院的各个领导、老师、同学为我提供了一个融洽的学习环境。感谢学院 在各方面所作的工作和无微不至到关怀。 感谢学院的同学们，他们在我平时的学习和生活中给了我很大的帮助，尤其是寝 室的同学们，他们在我的论文研究过程中给我提供了许多宝贵的信息、意见和帮助！ 使得我们的毕业设计更加完备。 最后，向百忙之中进行论文审查的老师与专家们致以深深的敬意，你们辛苦了！