电子商务网站策划毕业设计.doc

明达职业技术学院毕业设计 (论文)20112012学年度 信息工程系计算机应用 专业班级 09计算机 学号 41093102 课题名称 电子商务网站策划与设计学生姓名 指导教师 2011 年12 月12 日目录一、网站规划与设计41网页目标：42.制作网页软件43. 课程设计内容：4二、软件介绍61.Dreamweaver62. Flash63. Fireworks64.photoshop cs7三、网站页面介绍81.首页的具体制作8（1）、首页图片制作8（3）、动态图片制作9（5）、动态留言板的实现:102.子网页的具体制作12（1）、网页示范：12（2）、动态效果的实现：12四、总结15【参考文献】16振阳集团的电子商务网站策划与设计邓婉丽【摘 要】人类进入21世纪，电子商务伴随着IT的成熟，逐渐发展壮大，成为网络经济的核心。计算机、网络通信、信息技术、支付技术、安全技术的发展以及计算机的普及与网络应用等基础设施设为电子商务的应用提供硬件支持与安全保障，是电子商务发展的硬件基础；电子商务法的制定与发布为电子商务的发展提供了法律保障，成为电子商务发展的软件基础。在电子商务的发展过程中，人们意识到在线购物的无地域界限、安全、方便快捷及其价格优势，在线购物的队伍逐渐扩大，不断增长的强大需求正成为电子商务的发展动力。基础环境的成熟与需求欲望的增长将推动电子商务与商务网站的建设不断发展，因此，本设计通过以对棉纺织品销售公司电子商务网站的设计来探讨电子商务应用。 如今，在网络技术的迅猛发展下，互联网的不断普及，让人们都感受到网络的方便快捷，从而大家都喜欢选择从互联网上获取信息，因此，互联网逐渐成为一个宽广的信息发布平台和获取信息的平台。本网站主要是以建立Dreamweaver、flash、photoshop等技术的网页表现模块，使用了Dreamweaver技术的一个可视化的网页设计和网站管理工具，制作了一个简单的服务性企业网站系统，实现了企业网站的基本功能改变企业的生产与经营活动，也带来了人们的生活方式、文化教育、政府职能等的转变，电子商务的出现将真正把人类带入信息社会。【关键词】 电子商务，信息技术，商务网站一、网站规划与设计网站：利用表格、行为、层和链接等网页设计技术设计页面（各页面之间要有链接）。网站的设计与制作需要用到网页三剑客（Dreamweaver、fireworks、flash），IIS，photoshop等工具。所以首先我们要了解这些工具的功能与用处，然后要能够熟练得掌握这些工具用法，只有你能熟练使用这些工具，你才能在设计过程中尽量避免技术上的问题，提高效率，做到“事半功倍”。1网页目标：通过电子商务网站课程设计, 运用所学电子商务课程的理论知识和技能,分析和解决计算机应用实际问题，提高网页设计与制作能力；掌握利用软硬件资源制作一个具体网站的操作过程。2.制作网页软件：利用网页三剑客（Dreamweaver，Flash，Fireworks）等软件制作。3. 课程设计内容：创建一个好的站点离不开前期细致而周密的规划，而对于一个简单的小型网站来说，规划也同样非常重要。创建网页站点的第一步是规划，首先根据要建立的电子商务网站主题而进行构思模拟起草，找寻制作该网站需要的相关的素材。下一步，创建站点的基本结构，可通过“管理站点”进行系新建和管理。接下来便是创建网站，通过运用各种网页制作技术，设计页面，设置连接，最终完成站点并发布。具体步骤如下：（1）、计划和准备，包括设置Dreamweaver站点；（2）、寻找网站素材资源，并创建数据库；（3）、制作模版，布置网站大体模块；（4）、将网页链接到一起；（5）、预览和发布站点；二、软件介绍 1.Dreamweaver一个可视化的网页设计和网站管理工具，支持最新的Web技术，包含HTML检查、HTML格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、可视化网页设计、图像编辑、全局查找替换、全FTP 功能、处理Flash和Shockwave等富媒体格式和动态HTML、基于团队的Web创作。在编辑上你可以选择可视化方式或者你喜欢的源码编辑方式。 2. Flash Flash是由macromedia公司推出的交互式矢量图和 Web 动画的标准，由Adobe公司收购。网页设计者使用 Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。Flash也是存储芯片的一种，通过特定的程序可以修改里面的数据。Flash的前身是Future Wave公司的Future Splash，是世界上第一个商用的二维矢量动画软件，用于设计和编辑Flash文档。1996年11月，美国Macromedia公司收购了Future Wave，并将其改名为Flash。在出到Flash 8以后，Macromedia又被Adobe公司收购。Flash通常也指Macromedia Flash Player(现Adobe Flash Player)。 3. FireworksAdobe Fireworks CS4 是Adobe推出的一款网页作图软件，软件可以加速 Web 设计与开发， 是一款创建与优化 Web 图像和快速构建网站与 Web 界面原型的理想工具。Fireworks CS4 不仅具备编辑矢量图形与位图图像的灵活性， 还提供了一个预先构建资源的公用库， 并可与 Adobe Photoshop CS4、Adobe Illustrator CS4、Adobe Dreamweaver CS4 和 Adobe Flash CS4 软件省时集成。 在 Fireworks 中将设计迅速转变为模型， 或利用来自 Illustrator、Photoshop 和 Flash 的其它资源。 然后直接置入 Dreamweaver CS4 中轻松地进行开发与部署。4.photoshop csPhotoshop CS是一款图形、图像编辑软件，在网页设计领域被广泛得应用。以下是其10大最新功能： 1、改进的文件浏览器 使用功能强大文件浏览器的可以快速预览、标注和排序图片；搜索或编辑图像的数据元或关键词；并且可以自动批量共享文件。 2、匹配颜色命令 可以迅速从一张图片的颜色校正另外一张图像的颜色。 3、直方图调色板 随时根据对图像的调整更新直方图调色板(Histogram Palette)。 4、阴影/加亮区修正 使用“阴影/加亮区修正(hadow/Highlight correction)”可以快速调整照片中曝光过渡或欠缺的区域。三、网站页面介绍1.首页的具体制作 网站首页可以说是网站的门面，大家浏览你的网站首先看到的就是网站首页，所以首页不仅要做得美观，引人浏览，还要有丰富的内容。所以我们在首页就首页聚集了大量的信息，利用静中有“动”的效果可以抓住人的眼球，吸引人去点击。每页左下方都有我们的联系方式，这样就不用转到联系我们这张页面都能获取到公司的联系方式了，当然若想更深入的了解就可以转到联系我们页面。 网页示范：设计过程：（1）、首页图片制作在首页的设计过程中利用了photoshop cs技术设计出了标题的浮雕字，让页面更具有立体感；（2）、用插入代码的方式实现滚动字； table border=1 cellpadding=0 cellspacing=0 （3）、动态图片制作图片用flash进行了加工与制作；此外网页多处都有进行超链接，让网站更有连接性。（4）滚动字幕的实现style=border-collapse: collapse; border-width: 0 bordercolor=#111111 width=934 id=AutoNumber6 height=964 振阳集团欢迎您 集雄心壮志 创锦绣前程 （5）、动态留言板的实现: window.onload=tome;var brOK=false;var mie=false;var aver=parseInt(navigator.appVersion.substring(0,1);var aname=navigator.appName;var mystop=0;function checkbrOK()if(aname.indexOf(Internet Explorer)!=-1)if(aver=4) brOK=navigator.javaEnabled();mie=true;if(aname.indexOf(Netscape)!=-1) if(aver=4) brOK=navigator.javaEnabled();var vmin=2;var vmax=5;var vr=2;var timer1;chip.xx=pageX;chip.vx=vmin+vmax*Math.random();if(chip.xx=pageX+pageW-chip.w)chip.xx=pageX+pageW-chip.w;chip.vx=-vmin-vmax*Math.random();if(chip.yy=pageY+pageH-chip.h)chip.yy=pageY+pageH-chip.h;chip.vy=-vmin-vmax*Math.random();function stopme(x)brOk=true;mystop=x;movechip(tome);var tome;var chip;function tome()checkbrOK(); tome=new Chip(tome,80,80);if(brOK) movechip(tome);ns4=(document.layers)?true:false;ie4=(document.all)?true:false;function cncover()function cncout()if(ns4)c.visibility=hide;document.tome.visibility=show;else if(ie4) c.style.visibility=hidden;document.all.tome.style.visibility=visible;stopme(0);2.子网页的具体制作 子页面的框架基本上是符合整个网站的整体风格的，banner，导航等都是和首页一样的，不一样的只是正文的内容，这个可以通过模板来实现。在网站的各页面制作好后，通过在Dreamweaver的一系列操作实现注册登录的功能。基本上是利用首页模版，按照设计具体排版，插入表格、层等，并在其中插入预先收集的文字、图片等资料等。（1）、网页示范：（2）、动态效果的实现：向鼠标移动的文字,图片展示：具体代码如下：!- msg=欢迎登录振阳集团！;msgSize=4;/1-7FoNt=Arial;CoLoR=777777;speed=2;ns=(document.layers)?1:0;msg=msg.split(),amount=msg.length,Y=0,X=0,ypos=0,xpos=0,ybase=new Array(),xbase=new Array();angle = new Array(),divTop= new Array(),divLeft=new Array();/initial layer placement!for (i=0; i amount; i+)divTopi=Math.round(Math.random()*DocHeight);divLefti=Math.round(Math.random()*DocWidth);if (ns)for (i = 0; i amount; i+)document.write(+msgi+);window.captureEvents(Event.MOUSEMOVE);function nsMouse(evnt)ypos = evnt.pageY-20;xpos = evnt.pageX-10;DocWidth=(document.layers)?window.innerWidth:window.document.body.offsetWidth;var iscrll=(document.all)?document.body.scrollTop:0;var nscrll=(document.layers)?window.pageYOffset:0;if (!ns)hldr.style.top=iscrll;for (i=0; i amount; i+)Y = ypos - divTopi;X = xpos - divLefti;anglei = Math.round(Math.atan2(Y,X) * 180/Math.PI);if (anglei xpos-speed) & (divLefti = ypos-speed/1.5) & (divTopi 四、总结经过半个多月的努力，我的毕业设计和毕业设计说明书终于完成了。在这次的毕业设计使我一些课本知识掌握的更加牢固和熟练，而且也因为这次的毕业设计是紧接着课程安排的，这样有利于充分把书上内容与实际例子更好的结合。不仅巩固了之前学习的电子商务知识，更锻炼了我们的实际操作能力。在这次的毕业设计中，我通过老师和同学的帮主学会了很多课外的专业知识我觉得这就是最大的收获。虽然还没有琢磨地很透彻，但相比以前，已经有了很大的改进。之前我只会做最简单的静态网页，除了基本的超链接外什么功能都不会，页面上的登录注册和留言板功能都只是摆设（没法实现），可是通过这次毕业设计，我已经能独立完成简单的网站功能了。此外，对和网页设计相