电子商务网站建设与维护实训电子商务网站栏目与风格的设计项目二精品课件

1、电子商务网站建设与维护实训项目二-电子商务网站栏目与风格的设计高等教育出版社2项目二-电子商务网站栏目与风格的设计【项目概述】在小王所在的网络公司为ABC公司规划了电子商务网站之后，需要进行ABC公司电子商务网站的具体设计。经理布置给小王几项任务，要求小王为ABC公司网站进行栏目的设计、风格的设计，并对该网站目录结构等方面进行设计，以便为以后的设计工作做好准备。 3【项目分析】 如何设计网站的栏目？ 网站风格的设计包括哪些方面？ 如何进行网站目录结构的设计？ 4【任务分解】 任务1：设计网站的栏目。任务2：设计网站的风格。任务3：设计网站的目录结构。5任务1：设计网站的栏目1参考成功网站的内容

2、规划2确定网站的主要内容 3设想网站可选内容项 4正确进行网站特色的定位 5运用网站内容设计的技巧 61参考成功网站的内容规划先确定与要设计网站的公司类似企业的网站35个为参考对象；然后将确定的网站的主要栏目进行记录与比较，再确定这些同类网站的最常用的栏目，并确定本网站需要保留的栏目；最后，再确定本网站需要新增的同类网站没有的栏目与特色栏目。 72确定网站的主要内容（1）主页（2）公司简介（3）产品介绍（4）最新消息（最新动态）（5）客户反馈（6）网上订单（7）联系方式 83设想网站可选内容项（1）技术支持（2）招聘信息（3）总裁致辞（4）专业常识（5）招商信息（6）最新报价（7）网上采购系统

3、（含数据库） 94正确进行网站特色的定位挑选与提炼企业的关键信息，利用一个逻辑结构有序地组织起来，开发一个页面设计原型，选择用户代表来进行测试，并逐步精炼这个原型，形成创意。最好能用15个以内的字准确地描述网站的特色，而这个特色要尽可能让人感觉到其与同类网站的不同之处。要做到特色鲜明突出，力求简洁，要点明确 105运用网站内容设计的技巧（1）开动脑筋（2）提供有用的信息及其获取的办法（3）签上自己的名字，并展示得到的荣誉（4）设置一些有特色的友情链接对象（5）登载或转载对本企业肯定性的相关报道（6）精心安排网站的文字叙述部分（7）设计合理且吸引客户的排版方式（8）安排适当的交互功能 11任务2

4、：设计网站的风格1网站名称与标志的设计2网站标准色彩的设计 3网站标准字体的设计 4网站相关页面的布局设计5掌握色彩设计要点：用色和谐、重点突出6掌握形式设计要点：形式与内容和谐统一7三维空间的风格设计8多媒体功能的风格设计9文字与段落的风格设计10图像运用的风格设计11网站规划设计方面的创意121网站名称与标志的设计对于网站的名称，起名时应该做到合法、合理、合情。 网站标志与名称关系到网站的总体形象，也是企业CI（企业形象）设计的一个方面。 在网站的主要页面上的显要位置（一般在正上方），应该设计一个包含网站标志、网站名称的横幅，它可以是静态的图像，但最好能设计具有动态效果的动画。 132网站

5、标准色彩的设计网站的标准色彩不要超过3种 标准色彩要用于网站的标志、标题、主菜单和主色块 ，网页的色彩搭配中除了基本的颜色对比外，还应注意以下一些基本的色彩特点 143网站标准字体的设计标准字体是指用于标志、标题、主菜单、主体内容的字体。一般，常用的字体可以自由设计，而对于不常用的字体最好通过图片形式显示。标准字体的设计中还应考虑中英文及其他可能用到的文字所使用的不同字体。154网站相关页面的布局设计版式设计可以通过文字图形的空间组合，表达出和谐与美。 努力做到整体布局合理化、有序化、整体化。 多页面站点页面的编排设计要求把页面之间的有机联系反映出来，这里主要的问题是页面之间和页面内的秩序与内

6、容的关系。 165掌握色彩设计要点应利用色彩对人们心理的影响的成果，合理地加以运用。 色调及黑、白、灰的三色空间关系不论在设计还是在绘画方面都起着重要的作用。 由于国家和种族的不同，宗教和信仰的不同，生活的地理位置、文化修养的差异，不同的人群对色彩的喜恶程度有着很大差异。 176掌握形式设计要点形式服务于内容，内容又为目的服务，形式与内容的统一是设计网页的基本原则之一。 应合理地运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，如通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。 点、线、面是视觉语言中的基本元素，可以使用点、线、面的互相穿插、互相衬托、互相补充构成最佳

7、的页面效果。 187三维空间的风格设计网络上的三维空间是一个假想空间，这种空间关系需借助动静变化、图像的比例关系等空间因素表现出来。 在页面中图片、文字位置前后叠压，或位置疏密，或页面上、左、右、中、下位置所产生的视觉效果都各不相同。 198多媒体功能的风格设计因特网最大的资源优势在于多媒体功能，因而应尽一切努力挖掘它，吸引浏览者保持注意力。 因而画面的内容应当有一定的实用性，如产品的介绍甚至可以用三维动画来表现。 应当关注一些新的网上商品展示的方法，目前，网上产品展示技术主要有Java插件模拟三维展示实景互动360度图片 360度全景摄影 虚拟现实模拟三维展示 209文字与段落的风格设计不要

8、轻易让文字居中和使用粗体或斜体字符。应尽量利用短的段落，多利用项目符号显示列表。应用影像地图指引主要连接，使页面能吸引人和容易阅读。对于较多内容的显示，应该注意显示的技巧。 2110图像运用的风格设计图像运用时，不必在以页面上填满图像来增加视觉趣味。图像的格式应做选择，在不影响图像效果的前提下，当然应该选择文件容量更小的图像。对用作背景的GIF要谨慎。 2211网站规划设计方面的创意把设计对象颠倒。把设计对象缩小。把颜色换一下。使设计对象闪动。把设计对象放进音乐里。使设计对象重复。使设计对象变成立体。分裂设计对象。使设计对象速度加快。使设计对象对称。结合文字音乐图画。设计一个比赛。设计一个竞猜

9、游戏。23任务3：设计网站的目录结构1网站链接结构的选择 2网站目录结构的设计241网站链接结构的选择（1）树状链接结构：条理清晰，每个分支的级数不一定相同，效率偏低。（2）星状链接结构：类似于树状链接结构，条理清晰，每个分支的级数一般相同，效率一般。（3）网状链接结构：可对链接目标重复利用，效率较高，但条理性较差。如搜索引擎网站，同一链接目标，可以用不同的分类方法进行链接。 252网站目录结构的设计一般，如果选择树状与星状链接结构形式，应该按各级栏目各建立一个文件夹；同时，应该把图像等文件放在同一文件夹，如图像文件常放在image文件夹下。如果选择网状链接结构形式，则可以根据某一种分类建立文件夹。关于网站目录结构的设计主要有以下一些技巧。不要将所有文件都存放在根目录下。按栏目内容建立子目录。在每个主栏目内部建立独立的images目录。目录层次不要太深。不要使用中文目录名。不要使用过长目录名。尽量使用意义明确的目录名。26【经验总结】 为了进行一个电子商务网站大项目的设计，应先做好电子商务规划准备的子项目。为了规划准备电子商务网站，主要涉及阅读电子商务网站建设的策划书、了解电子商务网站建设的客户需求、设计网站的内容、设计网站的风格及设计网站的目录结构等任务。这些工作会对整个电子商务网站建设产生较大的影响，因此