电子商务企业网站设计

企业网站设计经济管理类专业核心课程1/15/20231知识要点★了解企业网络营销网站建设需要考虑的因素；★掌握企业网络营销网站建立的形式；★掌握域名设计的方法、域名申请与注册的流程；★掌握企业网络营销网站导航设计；1/15/20232能力要点★具有进行企业网络营销网站的设计的能力；★具有企业网络营销网站内容设计的能力；★具有域名设计、申请与注册的能力；★具有一定的网站色彩的搭配能力。1/15/20233

不同网页之间通常具有一定的逻辑关系，比如先后关系、包含关系、并列关系等，多个网页按照它们之间的逻辑关系组织在一起就形成了各种逻辑结构。在现在的网站中，最常见的逻辑结构就是层次型结构，其次是线形结构和网型结构。

网站的逻辑结构设计1/15/202341）线型结构线型结构是最为简单的逻辑结构，如图3-1所示，它将多个网页按照一定的先后顺序链接起来，使得用户在没有完成上一个网页的访问之前就无法进入下一个网页。网页1网页2网页3网页4图3-1线型结构1/15/20235

线型结构最常用于需要按步骤进行的栏目上，例如用户注册、建立定单、教程等。如在当当网购买图书或者音像制品，也必须按顺序进行选择商品、确认购物车、填写定单、生成定单四个步骤：如图3-2所示：选择商品确认购物填写定单生成定单图3-2当当网购物流程1/15/202362）层次型结构层次型结构是按照网页之间的包含关系组织而成。前面图3-3就是一个典型的层次型结构，它很像一棵倒置的树。层次型结构简单而且直观，能将所有的内容划分得非常清晰且便于理解，所以很多网站都采用这种结构来进行总体的栏目规划。1/15/20237

层次型结构也有不好的地方，就是用户如果要访问最底层的网页就不得不按照层次从上到下一级一级地访问，最终到达想要访问的网页。所以过深过于复杂的层次型结构反而会带来很多不良的影响，最好的深度是三层，另外，建立一个良好的导航系统也可以弥补层次型结构这方面的缺点。1/15/202383）网络型结构如图3-3所示，网络型结构是指多个网页相互之间都超链接的一种结构，这些网页可以是层次结构上的任意网页，但是因为导航的需要或者内容上的相关性而链接在一起。网页网页网页网页图3-3

网络型结构1/15/20239

网络型结构的实现在于所有相关的网页上保留到其他网页的超链接。这种结构使用户更方便地在网络上遨游，但同时也带来一个庞大的超链接数的问题。一般来说，总的超链接数应该等于网页数乘以网页数减一，如有10个网页，那么就有99个超链接，这么庞大的超链接数维护起来相当麻烦，某个网页的1/15/202310改动（（如改改名、、删除除、增增加））就可可能同同时需需要对对所有有的网网页进进行相相应的的修改改，所所以在在网站站中需需要谨谨慎使使用这这种结结构。。4、网网站目目录结结构设设计目录结结构又又称为为物理理结构构，它它设计计解决决的是是如何何在硬硬盘上上更好好地存存放包包括网网页、、图片片、Flash动画画、JavaApplet、、数据据库等等各种种资源源在内内的所所有网网站资资源。。12/31/202211目录结结构是是否合合理，，对网网站的的创建建效率率会产产生较较大的的影响响，但但更主主要的的，会会对未未来网网站的的性能能、网网站的的维护护及扩扩展产产生很很大的的影响响。目录结结构对对用户户来说说是不不可见见的，，它只只针对对网站站管理理员，，所以以它的的设计计是为为了网网站管管理员员能从从文件件的角角度更更好地地管理理网站站的所所有资资源。。12/31/202212目录结构的的设计通常常需要遵循循以下原则则：1）不要将将所有的文文件都放在在根目录下下2）根据栏栏目规划来来设计目录录结构3）每个目目录下都建建立独立的的images子目目录4）目录的的层次不要要太深5）不要使使用中文目目录名6）可执行行文件和不不可执行文文件分开7）数据库库文件单独独放置8）不要使使用过长的的目录12/31/202213实例3－1“淡蓝蓝的天空””个人网站站的栏目设设计一、要求与与目的掌握网站的的色彩搭配配掌握网站的的版面布局局设计掌握网站的的导航设计计二、规划分分析过程1、风格设设计：风格设计包包含很多内内容，为了了体现个人人风格，符符合网站的的名称和定定位，下面面我们在色色彩搭配和和版面布局局方面做一一些规划和和设计。12/31/202214常见的版面面布局形式式----“T”结结构“T”结构构:所谓““T”结构构，就是指指网页上边边和左边相相结合，页页面顶部为为横条网站站标志和广广告条，下下方左面为为主菜单，，右面显示示内容的布布局，这是是网页设计计中用得最最广泛的一一种布局方方式。这样的布局局有其固有有的优点，，因为人的的注意力主主要在右下下角，所以以企业想要要发布给用用户的信息息都能被用用户以最大大可能性获获取；其次次是页面结结构清晰。。缺点是规矩矩呆板，如如果细节色色彩上不注注意，很容容易让人““看之无味味”。12/31/202215页面版面布局局原则与技巧巧（1）正常平平衡：正常平平衡亦称“匀匀称”。多指指左右、上下下对照形式，，主要强调秩秩序，能达到到安定诚实、、信赖的效果果。（2）异常平平衡：异常平平衡即非对照照形式，都是是不均衡的，，此种布局能能达到强调性性、不安性、、高注目性的的效果。（3）对比：：所谓对比，，不仅利用色色彩、色调等等技巧来作表表现，在内容容上也可涉及及古与今、新新与旧、贫与与富等对比。。（4）空白：：这种表现方方法对体现网网页的格调十十分有效。12/31/202216网页色彩设计计网页中最难处处理的就是色色彩搭配的问问题所以网页设计计不仅仅涉及及到技术问题题，还包含了了很重的艺术术因素根据专业的研研究机构研究究表明：彩色色的记忆效果果是黑白色的的3.5倍，，也就是说，，在一般情况况下，彩色页页面较黑白页页面更加吸引引人。网页色彩搭配配的原理网页色彩搭配配的技巧12/31/202217网页色彩搭配配原理色彩的鲜明性性：引人注目目色彩的独特性性：突出企业业形象色彩的合适性性：要与网站站的主题相符符色彩的联想性性：与网站的的内容相关联联12/31/202218网页色彩搭配配技巧相同色系色彩彩运用对比色或或互补色尽量控制在三三种色彩以内内背景和文字色色差对比大根据区域或客客户群的构成成选择12/31/202219首页设计首页是一个网网站的“门面面”，马虎不不得网站是否能够够吸引浏览者者，能否促使使浏览者继续续点击进入，，首页至关重重要首页的设计应应该遵循：快快速、简洁、、吸引人、信信息概括能力力强、易于导导航的原则，，同时融入企企业形象，突突出企业特点点，争取在第第一时间吸引引浏览者的眼眼球12/31/202220首页几大基本本要素版权信息、联络信息、电子邮件地址广告条—通常应体现出企业网站的主题企业的名称、标语、徽号或图像主菜单最新消息搜索友情链接邮件列表计数器用户登录……视觉兴趣点——通常是一幅图片，表示企业最新的产品、最新的服务等；或是一些重点推荐的产品页头内容页页尾12/31/202221首页要注意的的问题商业网站要避避免封面问题题，只有一个个Logo的的首页是不合合适的首页明确，主主题突出。使使浏览者进入入网站就知道道该网站的类类型、业务，，最好有一个个突出的主题题句，除非你你的知名度=可口可乐尽可能缩短下下载时间。合合理运用图片片和新技术，，注意图片的的大小考虑不同显示示器的分辨率率，不同的浏浏览软件版本本兼容12/31/2022221）色彩的选选取及搭配本网站名为““淡蓝的天空空”，因此整整个网站拟采采用蓝色为主主要色调，再再辅助于一些些绿等其它颜颜色，体现凉凉爽、清新、、淡雅、浪漫漫的氛围。比比如首页就采采用一副包含含网站名称、、各主要栏目目，以蓝色为为主要色调的的图片来作为为整个首页的的界面，如图图3-4所示示。12/31/202223图3-4““淡蓝的天空空”首页图形形界面12/31/2022242））版版面面布布局局首页页布布局局：：首页页虽虽然然采采用用图图3－－10的的图图片片作作为为整整个个网网页页的的界界面面，，但但在在布布局局上上基基本本属属于于图图3－－11所所示示的的布布局局方方式式。。12/31/202225图标题题文字字栏目目图3-5““淡淡蓝蓝的的天天空空””首首页页版版面面布布局局12/31/202226“感感动动你你的的心心灵灵””栏栏目目主主要要是是文文摘摘、、网网文文、、杂杂文文、、专专栏栏等等，，界界面面利利用用图图形形设设计计成成一一本本打打开开的的书书如如图图3－－6所所示示，，但但在在版版面面布布局局上上采采用用如如图图3－－7所所示示的的布布局局方方式式。。12/31/202227图3-6““感感动动你你的的心心灵灵””栏栏目目图图12/31/202228图3-7““感感动动你你的的心心灵灵””版版面面布布局局图图交替变化的图栏目内容子栏目目录12/31/202229其他他栏栏目目布布局局基基本本采采用用类类似似的的布布局局方方式式。。3））导导航航设设计计由于于本本案案例例栏栏目目数数量量、、网网页页数数量量都都不不多多，，导导航航系系统统选选择择栏栏目目名名称称直直接接导导航航的的形形式式。。三、、本本案案例例知知识识点点1、、网网站站的的风风格格设设计计网站站的的风风格格是是抽抽象象的的，，它它往往往往无无法法用用一一个个具具体体的的物物体体来来描描述述，，它它是是指指用用户户12/31/202230对网网站站整整体体形形象象的的一一种种感感觉觉。。这这个个整整体体形形象象包包括括网网站站标标志志、、色色彩彩、、版版面面布布局局、、交交互互方方式式、、文文字字编编排排、、图图片片、、动动画画等等诸诸多多因因素素。。风格格又又是是独独特特的的，，是是网网站站最最不不同同于于其其他他网网站站的的地地方方。。统统一一的的风风格格使使用用户户无无论论处处在在网网站站的的哪哪一一页页，，都都明明确确知知道道自自己己正正在在访访问问的的是是这这个个网网站站。。比比如如，，微微软软公公司司的的网网站站，，任任何何一一个个网网页页都都有有微微软软特特有有的的蓝蓝色色和和““Microsoft””网网站站标标志志。。12/31/2022311））色色彩彩搭搭配配网站站的的色色彩彩是是最最影影响响网网站站整整体体风风格格的的因因素素，，也也是是站站点点美美工工设设计计中中最最令令人人头头疼疼的的问问题题。。因因此此，，在在介介绍绍色色彩彩搭搭配配之之前前，，先先来来看看看看色色彩彩的的基基本本知知识识。。色彩的的基本本知识识在物理理学中中，颜颜色是是因为为光的的折射射而产产生的的。颜颜色不不同，，光的的波长长也就就不同同，红红、绿绿、蓝蓝是自自然界界的三三原色色，12/31/202232红色：：是一种种激奋奋的色色彩，，给人人以冲冲动、、愤怒怒、热热情和和活力力的感感觉。。绿色：：介于冷冷暖两两种色色彩的的中间间，显显得和和睦、、宁静静、健健康、、安全全。它它和金金黄、、淡白白搭配配，可可以产产生优优雅、、舒适适的气气氛。。橙色：：也是一一种激激奋的的色彩彩，具具有轻轻快、、欢欣欣、热热烈、、温馨馨和时时尚的的效果果。黄色：：充满快快乐、、希望望、智智慧和和轻快快，它它也是是