任务2 赏析服务业类企业网站
1．任务引导
本任务目标是通过浏览“外婆家”、“杭州大厦”、“恒生电子”等服务业类企业的电子商务网站，来分析其页面布局、导航条目设计、色彩搭配等，以便为同类型企业规划和设计网站。
2．任务实施
（1）分析“外婆家”网站
“外婆家”是浙江杭州一家知名中式餐饮连锁企业，网址为“http://www.waipojia.com.cn”，其网站主页效果如图1-9所示。
图1-9 外婆家网站主页
其网站主页采用了“左拐角型”的页面布局设计，在顶部为企业的Logo、导航条和Banner。整体颜色风格以深色调的绿色为主，和各实体店的装修风格相搭配。由于是服务业行业，客户服务应放在很重要的位置，可以在顶部Banner条上看到“在线投诉”栏目、投诉电话，同时又体现餐饮的特殊性，将订座电话也放在醒目的Banner条上。
导航条类目设计上，有和制造业类企业类似的“首页”、“公司简介”、体现产品中心的“名菜名点”、体现经营网络的“门店介绍”及反映新闻的“活动新闻”。但在这些类似的栏目中又有其新特点，新闻中心对于餐饮企业网站的访问者来说，更关注的是该企业的最新活动促销信息，所以命名为“活动新闻”。同样餐饮企业网站展示了自己后，往往是需要告之访问者店的位置，因此“门店介绍”也是必不可少的。另外，餐饮企业最能体现其特色的就是“名菜名点”，来介绍其特色菜肴。
在主体区域中，“左拐角”部分是具体的“活动新闻”列表，右侧则是体现餐饮企业的门店装修实景和特色菜品的信息，也是最能运用图像来展示其特点的。
在底部区域是友情链接和版权信息。
（2）分析“杭州大厦”网站
“杭州大厦”是浙江杭州一家集购物、娱乐、休闲于一体，汇集国际国内一线品牌的高端商贸综合体，网址为“http://www.hangzhoutower.com”，其网站主页效果如图1-10所示。
图1-10 杭州大厦网站主页
该网站在输入网址后，首先会有一个以大幅动画图片展示杭州大厦环境的封面性页面作为首页，在选择“杭州大厦”后可进入真正的主页。
该主页也是采用了类似“左拐角型”的页面布局设计。服务类型企业网站往往在页面布局上较传统制造类型企业更为突破，运用更多图像、动画效果加以渲染。该网站主色调为香槟色，可以很好地体现其风格定位，与“杭州大厦”位于杭州商场高端的市场定位相吻合。
在左上角依然为Logo，在导航条类目设计中，比餐饮企业更注重促销活动的信息展示，而且商场也往往非常注重会员卡的运用，因此会员卡专区也是“杭州大厦”网站在栏目设计中的主要规划内容。另外，“走进购物城”的“楼层指南”栏目也是商场主题网站的常见项目。在主体区域，也通过位于醒目位置的图像来展示最新的品牌活动信息和促销海报。
在底部区域和其他网站一样是版权信息。
（3）分析“恒生电子”网站
“恒生电子”是一家国内领先的提供金融软件服务和网络服务的高新技术企业，网址为“http://www.handsome.com.cn”，其网站主页效果如图1-11所示。
图1-11 恒生电子网站主页
其网站主页采用了“同字型”的页面布局设计，在顶部为企业的Logo、Banner和导航条。整体颜色风格以蓝色为主基调，也是企业网站中经常使用的颜色搭配，给人年轻活力、稳步成长的感觉。
导航条类目设计也和前面所说的企业类似，即指示首页的“首页”，企业介绍的“关于恒生”，产品展示的“行业领域”，上市公司所需要的“投资者关系”，展示新闻的“公司新闻”和如何联系的“联系我们”。将人才招聘的“诚聘英才”、服务内容的“恒生世界”和“恒生E社区”放到了主体部分的右侧列表。
在Banner条的构成主要有文字部分主要阐述企业的文化、领导寄语和领先成果，也就是体现资质，图像部分主要用于修饰衬托文字。
在主体部分的左侧列表为一些最新公告信息，中间部分是具体的公司新闻信息，右侧列表为前面所说部分导航类目。
在底部区域是版权信息和企业联系方式。
（4）网站分析总结
该类型企业的网站整体版面设计、栏目构成和传统制造业类企业网站基本还是类似的，只是在一些具体为人们生活提供服务的餐饮、娱乐、购物、休闲等网站时，在页面的布局上更为开放，图像、动画、色彩运用的更多，为了能更好地吸引普通访问者的单击，在栏目设计上也会有自身行业的一些特色。
3．任务分析
（1）网页制作基本原则
主要包含三个方面，即内容、速度和页面美感。根据不同的网络环境和服务对象，这三个方面的次序不同。
网页设计也同样需要遵循设计的3C原则，即简洁、一致性、好的对比度。
（2）网页版面布局类型
网页版面布局大致可分为“同字型”、“拐角型”、“标题正文型”、“封面型”、“框架型”、“Flash型”等。
“同字型”也称为“回字型”，是国内企业类网站主页最常用的类型，即分为顶端、主体和底部区域三个部分。顶端区域常为网站Logo、Banner和导航条。主体部分区域由网站的主要内容构成，一般分为三列，左右分列一些栏目，中间是主要栏目，有时也分为均分的四列。“同字型”最主要的特点就是沿中轴线左右大致对称。底部区域是网站的一些基本信息、联系方式、版权声明等。这种结构是一般企业电子商务网站主页的首选，这种布局能很好地体现出稳重的风格，现阶段还往往将Banner条扩大来增加美感、更好地宣传企业，同时也能显现出大气。
“拐角型”分为“左拐角型”和“右拐角型”，国内企业网站常采用“左拐角型”，这种结构与“同字型”很接近，只是形式上的区别。主要区别就是在主体部分区域，“拐角型”分为两列，“左拐角型”左侧列表为一窄列，右列则很宽；“右拐角型”反之，顶端和底部与“同字型”类似。因此，这种布局经常和“同字型”结合运用，很多企业网站主页采用“同字型”，二级页面采用“左拐角型”，能够很好地体现整个网站一贯的风格。
“标题正文型”即最上面是标题或类似的一些东西，然后是分割线，接着就是正文，很像平时的文章。这种类型多用于网站的新闻页面中。
“封面型”基本上出现在一些网站的首页，整个页面绝大部分内容为一个动画或精美的图像，然后通过几个简单的链接，或者是标识“进入”的链接，或者直接通过单击可以链接到真正的主页。这种类型主要就是起着美化和点题的作用，如同杂志的封面。
“框架型”就是采用框架的结构布局。常见的是“左右框架”，该结构是左右分别为两页，一般左面是导航链接，右面是正文，常用于一些大型论坛的结构布局。这种类型结构非常清晰，一目了然。此外，还有“上下框架”结构等。
“Flash型”的结构与“封面型”的结构类似，只是这种类型采用了Flash来设计制作，正因为Flash强大的功能，页面所表达的信息更为丰富，也能直接在封面上显示交互的导航栏，主要用于服装、娱乐等更注重展示效果的网页。
4．任务拓展
（1）电子政务类网站分析
除了企业网站外，随着电子政务的大力推广，政府网站也是电子商务网站的一类。分析“杭州财税局”网站，网址为“http://www.hzft.gov.cn”，网站主页效果如图1-12所示。分析该网站的特点及面向访问群体是哪些，由面向群体确定了网站主题后，在网站设计上是怎么围绕该主题实现的。
图1-12 杭州财税局网站主页
（2）为“浙江内利信息技术公司”规划网站
浙江内利信息技术有限公司是一家专业从事现代电子服务业的高科技企业，公司主营线上线下的多元化产品及服务，打造实体商户加盟的内利商城，自主创新研发支持线下电子支付的终端POS机，发行集支付、储值、积分、打折优惠于一体的内利卡，实现落地电子商务的新模式。
公司文化是：内容万象，利行德广。“内”指“内利商城”，“容万象”指通过内利商城的平台，让加盟商、用户及上游生产商等各类人群都可以从内利商城中得到各类综合服务，“利”指“盈利模式”，“行德广”指通过内利商城的盈利模式推广加盟商，为客户、上游生产商带来实实在在的好处，恩泽广众。
规划并设计出该企业主页的版面布局，色调风格和栏目构成。