网页设计论文.docx
《网页设计论文.docx》由会员分享，可在线阅读，更多相关《网页设计论文.docx（21页珍藏版）》请在冰豆网上搜索。
网页设计论文
武汉长江工商学院
计算机科学系
项目名称：
购物网站设计与制作
学生姓名：
黄昊
学号：
1008030116
班级：
10801班
指导教师：
王慧娟李凤麟
2012年6月8日
目录
摘要：
1
Abstract：
1
1引言2
1.1课题背景及意义2
1.2研究工作2
2需求分析3
2.1可行性分析3
2.2综合需求分析4
3购物网站的总体设计5
3.1网站的整体规划设计5
3.2网站制作的细节工作6
4网站详细设计7
4.1网页falsh的设计7
4.2主网页设计8
4.3车饰品网页设计9
4.4图书销售网页设计9
4.5体育用品网页设计10
5系统性能测试12
5.1系统测试概述12
5.2不同浏览器测试12
6网站的宣传13
6.2登陆搜索引擎14
6.3广告宣传14
6.4向亲朋好友宣传14
6.5论坛，招聘网站发布消息14
设计小结15
致谢16
参考文献17
购物销售网站
摘要：
伴随着Internet的蓬勃发展，网络购物系统作为电子商务的一种形式正以其高效、低成本的优势逐步成为新兴的经营模式和概念，人们已经不再满足用途信息的浏览和发布，而是渴望能够充分享受网络所带来的更多的便利。
网络购物正适应了当今社会快节奏地生活，使顾客足不出户便可以方便快捷轻松地选购自己喜欢的商品。
在国内，中国的信息产业实现了快速发展，电子信息产业的规模居世界前列，网络事业也得到逐步提高，互联网产业正在逐步形成。
互联网在中国正在改变着人们的工作和生活方式，在促进经济发展。
推动社会进步和提高人民生活质量方面，发挥着越来越重要的作用。
基于我国互联网的新形势，我们要抓住机遇，适应互联网的新发展，积极应用新技术，努力开发新业务。
满足网民的网络需求。
Abstract：
AlongwiththevigorousdevelopmentoftheInternet,thenetworkshoppingsystemasaformofelectroniccommerceisitshighefficiency,lowcostadvantagegraduallybecometheemergingbusinessmodelandconcept,peoplenolongercontentuseofinformationbrowseandrelease,butalongingtobeabletoenjoyfullynetworkbringsmoreconvenient.Thenetworkshoppingistoadaptthefastpaceintoday'ssocietylife,makecustomeranddidnotresurfaceandeasytochooseandbuyyourselfeasilylikedproducts.
Athome,China'sinformationindustryrealizedthefastdevelopment,thescaleoftheelectronicinformationindustryhighintheworld,thenetworkalsobeengraduallyimprovebusiness,theInternetindustryistakingshape.TheInternetinChinaischangingpeople'sworkandthewayoflife,inpromotingeconomicdevelopment.Promotingsocialprogressandimprovingpeople'squalityoflife,playsamoreandmoreimportantrole.China'sInternetbasedonthenewsituation,weshouldseizetheopportunity,toadapttothenewdevelopmentoftheInternet,andactivelyapplyingnewtechnology,todevelopnewbusiness.MeettheneedsofInternetusersnetwork.
1引言
1.1课题背景及意义
伴随着Internet的蓬勃发展，网络购物系统作为电子商务的一种形式正以其高效、低成本的优势逐步成为新兴的经营模式和概念，人们已经不再满足用途信息的浏览和发布，而是渴望能够充分享受网络所带来的更多的便利。
网络购物正适应了当今社会快节奏地生活，使顾客足不出户便可以方便快捷轻松地选购自己喜欢的商品。
在国内，中国的信息产业实现了快速发展，电子信息产业的规模居世界前列，网络事业也得到逐步提高，互联网产业正在逐步形成。
互联网在中国正在改变着人们的工作和生活方式，在促进经济发展。
推动社会进步和提高人民生活质量方面，发挥着越来越重要的作用。
基于我国互联网的新形势，我们要抓住机遇，适应互联网的新发展，积极应用新技术，努力开发新业务。
满足网民的网络需求。
由于互联网的快速发展，网络对人们的影响越来越大，网络购物商城，为商家和网民搭建一个销购平台，电子商务不仅改变了企业营销方式，而且推动企业对管理理念、决策方式、业务过程等系列问题的战略性思考和变革，最重要的是，电子商务支持并形成战略性伙伴关系和需拟企业。
在今天，信息化大潮已经不可逆转，全球经济在一体化发展。
对总共企业而言，这是一个充满机遇与挑战的全新的经济时代。
对人们，它改变着人的生活方式和概念，所以网上购物是很有前景和必要的。
1.2研究工作
本网站是一个购物网站,在购物网站中需要有一个主页，主页中有各种引导和列出其他三个子网页的一个导航，而在其他的三个子网页中需要也需要一些符合本网站的广告，在做网站的时候需要注意一个整体的排版问题，让整体拥有一个连贯性。
由于是一个购物的网站，所以一些色彩和版面的颜色问题需要很多的研究，让一个购物网站充满激情。
让用户有一个视觉上的刺激。
2需求分析
2.1可行性分析
可行性分析法是对工程项目进行系统技术经济论证，经济合理性综合分析的方法。
其目的是通过对技术先进程度，经济合理性和条件可能性的分析论证，选择以最小的人力、物力、财力耗费，取得最佳技术、经济、社会效益的切实方案。
它是解决项目投资前期分析的主要手段。
本讨论系统的可行性主要从经济可行性、技术可行性、操作可信性和社会可行性分析来考虑。
2.1.1经济可行性分析
在经济上，该项目是可行的。
该项目在网购流行的今天是具有价值的。
它极大的方便了社会群体，具有极高的利益价值。
本项目的系统是比较简单易于完成的，本系统只需要几十人就能合作开发完成，在开发成本上不需要投入很大。
本项目使用的是免费的开源框架，只需要对其进行一定的维护就可以了。
2.1.2技术可行性分析
在技术上，该项目是可行的。
本网站系统是采用Dreamweavercs3框架开发，这些软件可方面在windows上安装和调试，程序员通过对后台的操作来来管理网页，在技术上是可行的。
在制作本网站的过程中我主要运用了网页设计的三剑客Dreamweaver、Flash、Fireworks这三款常用网页设计软件。
2.1.2.1Dreamweaver简介
Dreamweavercs3在多媒体方面颇有建树的adobe公司推出的可视化网页制作工具，它与Flash、Fireworks合在一起被称为网页制作三剑客，这三个软件相辅相承，是制作网页的最佳选择。
Dreamweaver主要用来制作网页文件。
该工具制作出来的网页兼容性比较好，制作效率也很高,它还包括可视化编辑、HTML代码编辑的软件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等特性，而且它还能通过拖拽从头到尾制作动态的HTML动画，支持动态HTML（DynamicHTML）的设计，使得页面没有plug－in也能够在Netscape和IE6.0浏览器中正确地显示页面的动画。
同时它还提供了自动更新页面信息的功能。
2.1.2.2Flash介绍
使用矢量图形和流式播放技术。
与位图图形不同的是，矢量图形可以任意缩放尺寸而不影响图形的质量；流式播放技术使得动画可以边播放边下载，从而缓解了网页浏览者焦急等待的情绪。
通过使用关键帧和图符使得所生成的动画（.swf）文件非常小，几K字节的动画文件已经可以实现许多令人心动的动画效果，用在网页设计上不仅可以使网页更加生动，而且小巧玲珑下载迅速，使得动画可以在打开网页很短的时间里就得以播放。
把音乐，动画，声效，交互方式融合在一起，越来越多的人已经把Flash作为网页动画设计的首选工具，并且创作出了许多令人叹为观止的动画（电影）效果。
而且在Flash4.0的版本中已经可以支持MP3的音乐格式，这使得加入音乐的动画文件也能保持小巧的‘身材’。
强大的动画编辑功能使得设计者可以随心所欲地设计出高品质的动画，通过ACTION和FSCOMMAND可以实现交互性，使Flash具有更大的设计自由度，另外，它与当今最流行的网页设计工具Dreamweaver配合默契，可以直接嵌入网页的任一位置，非常方便。
总之，Flash已经慢慢成为网页动画的标准，成为一种新兴的技术发展方向。
2.1.2.3Fireworks介绍
Fireworkscs4是adobe公司发布的一款专为网络图形设计的图形编辑软件，它大大简化了网络图形设计的工作难度，无论是专业设计家还是业余爱好者，使Fireworks都不仅可以轻松地制作出十分动感的GIF动画，还可以轻易地完成大图切割、动态按钮、动态翻转图等，因此，对于辅助网页编辑来说，Fireworks将是最大的功臣。
借助于adobeFireworkscs4，可以在直观、可定制的环境中创建和优化用于网页的图像并进行精确控制。
Fireworks业界领先的优化工具可帮助创作者在最佳图像品质和最小压缩大小之间达到平衡。
利用可视化工具，无需学习代码即可创建具有专业品质的网页图形和动画，如变换图像和弹出菜单等。
2.1.3操作可行性
在操作上，该项目是可行的。
在用户登录网站页面之后可以很方便的浏览网站的主页以及几个子页面，可以在不同的浏览器上面正常的浏览。
2.1.4社会可行性
当今社会是一个信息技术的时代，计算机的发展越来越快，同时接触和使用计算机的用户也显著增加，在这样一个时代，网上购物已成为一种时尚，因此，该购物网站能够很好的满足社会的需求。
2.2综合需求分析
需求分析是一个项目提出方和承担方相互沟通的过程，一方是系统的使用者，一方是系统的制造者，在系统涉及过程中，只有双方相互配合，共同对系统进行设计才能最后达到使用的要求。
用户是业务上的熟悉者，对业务流程有非常清晰的了解，但是，对于软件需求方面的描述是不了解的，他们所能提供的只是他们最终要达到的功能，但是，这其中包含的业务流程是非常复杂的。
我们拿到用户需求后，应该根据功能、流程进行初步的设计，构造出业务流程图，再让用户进行评审，提出业务流程上不对的地方进行修改。
这样来回的交流，最终才能取得较全面的需求，并减少后期的修改。
2.2.1可靠性需求
硬件可靠性：
包括服务器硬盘、CPU、网络环境的运行可靠性等，保证这些硬件介质正常可靠运行。
软件可靠性：
要求软件在承载一定用户在线等复杂的条件下也能稳定运行，不会产生异常情况。
2.2.2安全性需求
（1）运行系统的安全：
保证信息处理和传输系统的安全，简称“系统安全”。
系统安全主要包括计算机系统机房环境的保护，计算机网络拓扑结构设计的安全性考虑，硬件系统的可靠安全运行，计算机操作系统和应用软件的安全，数据库系统的安全等，本质上是保护系统的合法操作和正常运行。
（2）网络安全：
运行系统的安全、信息传播的安全和信息内容的安全的集合体。
3购物网站的总体设计
3.1网站的整体规划设计
（1）网站的大体设计
关于这个网站的要求是有主页和三个子页面以及有联系我们的一个链接，所以我设计一个大体的结构图如下。
图3-1网站结构图
（2）站点的访客定位
该站点是一个购物类网站，主包括关于汽车饰品、图书销售、体育用品的一个购物网站。
该网站主要是为了方便任务购物而设计的一个免费浏览和注册的网站。
网站含有三个子页面，分别是三个不同类物品的销售，每个页面都有关于各自主题的一个物品的推销和导购，以及一些flash做的广告，吸引购物者的眼光。
（3）站点的主题选择
在选择做这个站点之前，我也想着做一个个人主页，但是感觉个人主页的内容太少，而且扩展性不好，而且以前也做过一个个人主页，在做个话或许没有什么创新的意义了，再者老师给了一个关于购物的主题，我觉得这或许也是一个新的挑战，对于给出的题目然后在短时间给出具体的设计并且把这个主题做成功，于是我尝试着去做这个关于购物的网站。
（4）站点整体风格的确定
网页的制作首先要定位改网站的风格。
任何网页都要根据主题的内容决定其风格与形式，因为只有形式与内容的完美统一才能达到理想的宣传效果。
该网站是一个购物类网站，所以我觉得色调应该是暖色调，采取红色或者橙色之类的一些能够刺激眼球的颜色，给人一种激情的感觉，让购物者觉得充满活力的一个色调，然而却又不能缺乏文雅，所以我觉得可以在插入一点点的微微的冷色调，因为这个是人们在休闲时刻来浏览的网站，所以还要加入一些休闲的元素，让购物者享受，这样我觉得更加能做好这个购物网站的风格。
（5）站点的版面编排
主页的设计在网站设计中尤为重要，首先涉及的就是页面的编排问题。
网页作为一种版面，既有文字，又有图片，但不能简单地罗列在一个页面上，必须根据内容的需要，将图片和文字按照一定的次序进行合理的布局，所以在主页比较经典的传统的布局，以显示网站的专业性与权威性，首页中定制了一个大型的标题“一起购物”体现出一种大众的感觉，标题栏的下面就是专栏页面的链接，然后下面就是各个分栏，从整体显示出改网站的功能。
在该网站的排版中，我主要运用的就是表格布局的方式进行排版，这样既可以更多的显示出网站的内容，又可以让浏览者不感觉繁琐。
当然不同的专栏页面采用的表格布局也是不一样的，以致产生更好的吸引力，吸引浏览者的眼球。
3.2网站制作的细节工作
（1）浏览器版本和分辩率
不同的浏览对网页会做出不同的显示。
1024x768,800x600,640x480是使最多的3种分辩率。
1024*768分辩率下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间，就不会出现水平滚动条和垂直滚动条。
目前的主流浏览器是IE或搜狗浏览器。
（2）导航栏的设计
导航栏是网页的重要组成元素之一，它的任务是帮助浏览者在站点内快速查找信息。
在我的网站中，导航栏根据排版和美工设计要求，导航栏我选择的是标题栏下面，这样可以方便浏览者的浏览选择。
（3）使用表格布局
要做出一张整齐的网页需要定位，该网站中我选择了表格进行定位和无缝拼接，使得整个网站更加的整齐，更有美感。
（5）色彩的搭配
浅桔色是一种特殊的颜色，使用恰当，合理设计，就能产生很强烈的艺术效果，使整个王章呈现一种温馨和谐的感觉。
我将浅黄色作为我主页和部分专栏页面的背景色，与其他纯度色彩搭配使用。
同时，白色是内涵最为丰富和复杂的，白色有很强烈的感染力，它能够表现出特殊的高贵。
白色也是一种流行的主题颜色，适合和许多色彩作搭配，白色具有高贵、稳重、科技的意象，和适合与科技相关的网站,还有，黑色与白色表现出了两个极端的亮度，这两种颜色的搭配使用通常可以表现出都市化、现代的感觉。
所以我在部分的专题页面和内容页面中以白色作为了背景色。
（8）联系方法
浏览者如果喜欢该网站，可以在与我联系的页面中留下他的宝贵意见和联系方式，这样可以使得我的网站越来越完美。
4网站详细设计
4.1网页falsh的设计
（1）首先每一个网站都有一个logo，在做一个网站的时候我觉得应该先考虑logo的设计，我设计个logo是一个动态的水漂文字，我认为一个热情的购物网站就要给人一种动感，但是也要不失大气，所以我设计了一个“一起购物”的一个动态logo如图5-1所示。
图5-1logo
具体的操作步骤为：
首先建一个图形元件1，正方形的几条黑白相间的图形元件，然后将元件1放入“舞台”图层一中。
并且在二十帧插入关键帧，移动元件1的位置。
并且创建补间动画，使得黑白相间的条纹可以来回的移动。
建立图层2，图层二中如图输入“一起购物”四个字，并且将颜色调整为亮丽的红色，这样更能刺激购物者的眼球。
处理完之后将图层2设置为遮罩层。
建立图层3，图层三中输入大小和图层二中一样的四个“一起购物”大字。
并且将图层3中的四个字放于图层二字的左下方一点点
（2）有了logo之后只是完成了第一步，一个好的网页对于自己的商品是有flash的广告的，这样才能够让购物者第一时间了解我们购物网站所要推销的产品。
给人一目了然的感觉。
如图5-2是一个图书销售网页的一个flash广告。
图5-2图书广告
具体操作步骤为：
文件导入五张广告的图片，然后新建图层1，将五张图片放入图层1中，一次从上往下排图片，放入后ctrl+G整合五张图片
图层1中的图片做成动画样式，首先在10帧的位置插入关键帧，在10帧的位置将图片像上提一个图片的距离，在后5帧继续插入关键帧，位置不变，后几十帧都采用相同的步骤。
创建图层2，用矩形工具画一个和图片相同大小的矩形，设置完之后将图层2设置为遮罩层，并且在图层1的帧的最后位置插入帧，使得图层2一直存在。
做完之后的效果是一个图片出现后，暂停一会后出现第二张，依次出现。
4.2主网页设计
所谓一个好的主页面是一个网站的心灵，所以一个网站的主页要简洁大方，让购物者第一眼就被吸引从而慢慢的开始浏览这个购物网站，我在把主页分为三列，左边一列用一个falsh，一个类似于地球自转的flash，里面旋转着三个子页面的卖点，让客户第一眼知道网站的销售内容和实品。
而中间这一列则选择了在插入一个三行一列的表格，三行分别写入三个子页面的一些卖品。
而最右边则放入了一个客户注册的内容，以及一个鼠标进过的图像广告。
图5-3主页面设计
4.3车饰品网页设计
车饰品的网页采用的是一个传统的表格布局，一个网页的板块有很多，比如有些地方我想插入一些购物导航的条框而另外的一些地方我想插入一些flash的广告，所以我认为用表格可以很好的将这些东西整齐的排版。
如图所示。
创建一个一行两列的表格，在左边的表格中设置商品分类，关于一些汽车饰品、功能用品、汽车养护等等。
这一列可以让客户很好的找到自己想要的商品，而右边那列再次分为上下两行，上行放置了一个flash的汽车饰品广告，在flash的右边在放置一个本网站的销售热爱的排行榜，这个的放置只为了让客户更好的了解到该网站的精品所在。
然后在下行放置商品的图片以及标注商品的价格，让客户更加直观的看物品，
图5-4车饰品网页
4.4图书销售网页设计
图书销售的网页的设计大体也是采用了表格的布局，内容表格上大体上分了三列，左列大体对于图书分类做了一个具体的划分，让图书爱好者可以很好的找到自己需要的书籍，书籍一般分为文艺、少儿。
社科等等。
中间这一列包含了一个flash做的书籍的推销广告，多吸引客户的眼球。
Falsh的下面是本网页所推销的书籍，也是在客户没有搜索前给客户的一些购买建议，右边的那一列大体上是对客户列出了一些本网页的一些热点，比如一些最近很热的书籍，还有最近卖的比较好的书籍，在更好的出售书籍的同时考虑到让客户更加的了解自己所要出售的一些好书籍。
起到一个促销的作用。
图5-5图书销售网页
图5-5图书销售网页
4.5体育用品网页设计
该网页的设计大体上和车饰品设计差不多，在结构上采取了同种的设计，在导航条下面插入了一个体育的falsh广告，宣传出售的最新产品，在左列放置的是商品的分类，有关于乒乓球、羽毛球之类的一些分类，让一些体育爱好者能够很好的选择自己所需要的物品，页面中列给出的是本网页的一个特色产品，红双喜的产品，让客户在第一时间了解到是特色，而且在右列给出了商品的一个销售排行榜，在最下面给出了一些小广告和一些本店所要销售的产品列表。
图5-6体育用品网页
5系统性能测试
5.1系统测试概述
软件测试是软件开发过程中必不可少一个阶段，软件测试是保证软件质量的关键步骤。
在设计过程中。
面对复杂的问题，人的主观认识不可能完全符合客观现实，在软件生命周期的每个阶段都不可避免地会产生差错。
测试的目的就是在软件投入生产性运行之前，尽可能多的发现软件中的错误。
它是对软件规格说明。
设计和编码的最后审查。
软件测试在软件生命周期中横跨两个阶段。
通常在编写出第个模块后就对它做必要的测试，称之为单元测试，然后再对软件系统进行各种综合测试。
这个阶段由专门的测试人员承担这项工作。
把各个子系统组装成完整的面向对象软件系统，在组装过程中同时进行测试。
测试作为软件工程的一个阶段，它的根本任务是保证软件的质量，因此软件测试是必不可少的。
具体测试的设计，在面向对象设计的测试方案中传统技术如：
逻辑覆盖，等价划分，边界值分析和错误推测等方法作可作为测试类中每个方法的主要技术面积对象测试的主要目标也是用尽可能低的测试成本和尽可能少的测试方案发现尽可能多的错误。
5.2不同浏览器测试
对于相同的一个页面在不同的浏览器中可能会出现混乱或者排版不整齐，于是我做了在360浏览器和IE浏览器的测试，如图6-1和图6-2所示。
图6-1360浏览器支持
图6-1IE浏览器支持
此处由于论文的限制便只将测试的这一个截图观看，其他的页面经过反复的测试，都可以支持在不同的浏览器中正常的显示出来
6网站的宣传
网站做完之后，就要考虑如何宣传自己的网站，怎么样让别人知道自己的网站。
俗话说“酒香不怕巷子深”，但这句话对于网页来说好像不太适用，因为网页本身不会自动发出任何信息，即使你的主页再好，没人知道也不会有人访问。
通过查找相关的资料我认为网站的的人气主要是通过网站的流量来统计的，而网站的流量来源主要有一下四种方式：
6.1网站之间的友情链接
访问者会通过别的站点上的链接来访问你的网站，尽可能多的去和别的网站做友情链接，同样，在自己的网站上也需要为别人做一些友情链接。
但是千万记住别和被搜索引擎开除的网站互换链接，这点尤为重要。
6.2登陆搜索引擎
推广网站第一步：
花时间在搜索引擎中提交你的网址，一般半月后可收录你的网站，能够从XX等大型搜索引擎中搜到你的网站。
点击进行登陆（XX搜索google搜索网址之家爱问搜索雅虎搜索有道搜索tom搜索天网搜索msn09最新引擎大全）
6.3广告宣传
这是网站前期宣传最有效的方法是网上可以粘贴广告的地方确实很多，比如各种免费论坛、BBS、留言簿等等。
当一个好的网站制作完成后，也可以找一些专业的推广公司，让公司帮助我们做网站的推广工作，当然这个还得需要有一定的资金量才行。
6.4向亲朋好友宣传
好机会要与好朋友分享，做成功任何一件
升级会员 