集团公司的电子商务网站策划与设计论文.doc

目 录1、网站规划与设计21.1网页目标21.2 课程设计内容22、网站制作软件介绍32.1 Dreamweaver32.2 Flash32.3 Fireworks32.4 photoshop cs33、网站页面具体制作43.1首页的制作43.2首页图片制作43.3动态图片制作53.4滚动字幕的实现53.5 动态留言板的实现63.6 子网页的具体制作73.7动态鼠标文字效果的实现84、总结10集团公司的电子商务网站策划与设计【摘要】如今，在网络技术的迅猛发展下，互联网的不断普及，让人们都感受到网络的方便快捷，从而大家都喜欢选择从互联网上获取信息，因此，互联网逐渐成为一个宽广的信息发布平台和获取信息的平台。本网站主要是以建立Dreamweaver、flash、photoshop等技术的网页表现模块，使用了Dreamweaver技术的一个可视化的网页设计和网站管理工具，制作了一个简单的服务性企业网站系统，实现了企业网站的基本功能改变企业的生产与经营活动，也带来了人们的生活方式、文化教育、政府职能等的转变，电子商务的出现将真正把人类带入信息社会。【关键词】电子商务 策划 设计1、网站规划与设计网站：是指利用表格、行为、层和链接等网页设计技术设计页面（各页面之间要有链接）。网站的设计与制作需要用到网页三剑客（Dreamweaver、fireworks、flash），IIS，photoshop等工具。所以首先我们要了解这些工具的功能与用处，然后要能够熟练得掌握这些工具用法，只有你能熟练使用这些工具，你才能在设计过程中尽量避免技术上的问题，提高效率，做到“事半功倍”。1.1网页目标通过电子商务网站课程设计, 运用所学电子商务课程的理论知识和技能,分析和解决计算机应用实际问题，提高网页设计与制作能力；掌握利用软硬件资源制作一个具体网站的操作过程。制作网页软件：利用网页三剑客（Dreamweaver，Flash，Fireworks）等软件制作。1.2 课程设计内容创建一个好的站点离不开前期细致而周密的规划，而对于一个简单的小型网站来说，规划也同样非常重要。创建网页站点的第一步是规划，首先根据要建立的电子商务网站主题而进行构思模拟起草，找寻制作该网站需要的相关的素材。下一步，创建站点的基本结构，可通过“管理站点”进行系新建和管理。接下来便是创建网站，通过运用各种网页制作技术，设计页面，设置连接，最终完成站点并发布。具体步骤如下：（1）计划和准备，包括设置Dreamweaver站点；（2）寻找网站素材资源，并创建数据库；（3）制作模版，布置网站大体模块；（4）将网页链接到一起；（5）预览和发布站点。2、网站制作软件介绍 2.1 Dreamweaver一个可视化的网页设计和网站管理工具，支持最新的Web技术，包含HTML检查、HTML格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、可视化网页设计、图像编辑、全局查找替换、全FTP 功能、处理Flash和Shockwave等富媒体格式和动态HTML、基于团队的Web创作。在编辑上你可以选择可视化方式或者你喜欢的源码编辑方式。 2.2 FlashFlash是由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)。 2.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 中轻松地进行开发与部署。2.4 photoshop csPhotoshop CS是一款图形、图像编辑软件，在网页设计领域被广泛得应用。以下是其10大最新功能： （1）改进的文件浏览器 使用功能强大文件浏览器的可以快速预览、标注和排序图片；搜索或编辑图像的数据元或关键词；并且可以自动批量共享文件。 （2）匹配颜色命令 可以迅速从一张图片的颜色校正另外一张图像的颜色。 （3）直方图调色板 随时根据对图像的调整更新直方图调色板(Histogram Palette)。 （4）阴影/加亮区修正 使用“阴影/加亮区修正(hadow/Highlight correction)”可以快速调整照片中曝光过渡或欠缺的区域。3、网站页面具体制作3.1首页的制作 网站首页可以说是网站的门面，大家浏览你的网站首先看到的就是网站首页，所以首页不仅要做得美观，引人浏览，还要有丰富的内容。所以我们在首页就首页聚集了大量的信息，利用静中有“动”的效果可以抓住人的眼球，吸引人去点击。每页左下方都有我们的联系方式，这样就不用转到联系我们这张页面都能获取到公司的联系方式了，当然若想更深入的了解就可以转到联系我们页面。 网页示范：设计过程：3.2首页图片制作在首页的设计过程中利用了photoshop cs技术设计出了标题的浮雕字，让页面更具有立体感；用插入代码的方式实现滚动字； table border=1 cellpadding=0 cellspacing=0 3.3动态图片制作图片用flash进行了加工与制作；此外网页多处都有进行超链接，让网站更有连接性。3.4滚动字幕的实现style=border-collapse: collapse; border-width: 0 bordercolor=#111111 width=934 id=AutoNumber6 height=964 振阳集团欢迎您 集雄心壮志 创锦绣前程 3.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);3.6 子网页的具体制作 子页面的框架基本上是符合整个网站的整体风格的，banner，导航等都是和首页一样的，不一样的只是正文的内容，这个可以通过模板来实现。在网站的各页面制作好后，通过在Dreamweaver的一系列操作实现注册登录的功能。基本上是利用首页模版，按照设计具体排版，插入表格、层等，并在其中插入预先收集的文字、图片等资料等。网页示范：3.7动态鼠标文字效果的实现向鼠标移动的文字,图片展示：具体代码如下：!- 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 4、总结经过半个多月的努力，我的毕业设计和毕业设计说明书终于完成了。在这次的毕业设计使我一些课本知识掌握的更加牢固和熟练，而且也因为这次的毕业设计是紧接着课程安排的，这样有利于充分把书上内容与实际例子更好的结合。不仅巩固了之前学习的电子商务知识，更锻炼了我们的实际操作能力。在这次的毕业设计中，我通过老师和同学的帮主学会了很多课外的专业知识我觉得这就是最大的收获。虽然还没有琢磨地很透彻，但相比以前，已经有了很大的改进。之前我只会做最简单的静态网页，除了基本的超链接外什么功能都不会，页面上的登录注册和留言板功能都只是摆设（没法实现），可是通过这次毕业设计，我已经能独立完成简单的网站功能了。此外，对和网页设计相关的各软件的操作我也熟练了一些，像Phot