任务1 赏析制造业类企业网站

1．任务引导

本任务目标是通过浏览“鸿雁电器”、“天马轴承”、“名城房产”、“海亮集团”等制造业类企业的电子商务形象网站，来分析其页面布局、导航条目设计、色彩搭配等，以便为同类型企业规划和设计网站。

2．任务实施

（1）分析“鸿雁电器”网站

“鸿雁电器”是浙江杭州一家专业的建筑电器连接和建筑电气控制系统的集成供应商，网址为“http://www.hongyan.com.cn”，其网站主页效果如图1-1所示。

其网站主页采用了“左拐角型”的页面布局设计，在顶部区域为企业的Logo、导航条和Banner。整体颜色风格为蓝色和浅灰绿及橘黄色，色调风格清新与企业Logo的颜色相一致，同时与Banner条广告中的绿竹部分相呼应，体现了在建筑建材领域追求绿色环保、适合人居的主题。

导航条类目设计主要由指示主页的“首页”，介绍企业的“了解我们”，展示新闻的“新闻中心”，展示产品的“产品中心”，体现服务的“服务与支持”、“下载中心”、“鸿雁之家”和人力资源的“加入我们”组成。

另外，在公司Logo栏目右侧的醒目位置展示了客户服务热线，也体现了公司服务客户的理念。

Banner条中显示的动画主要由产品图像，以及修饰衬托产品的绿竹、家居和体现公司文化的宣传口号“品质、生活、态度”，更好地体现了家的感觉。

在顶部区域下面的左拐角部分是新闻列表等类目列表，右侧大部分用于展示企业推荐的产品。

在底部区域是联系方式和版权信息。

（2）分析“天马轴承”网站

“天马轴承”是国内轴承行业的一家上市企业，网址为“http://www.zjtmb.com”，其网站主页效果如图1-2所示。

其网站主页采用了“同字型”的页面布局设计，在顶部区域为企业的Logo、导航条和Banner。整体颜色风格为蓝色，常用于企业形象网站。

导航条类目设计主要由指示主页的“首页”，介绍企业的“公司简介”，展示新闻的“信息发布”，展示产品的“产品展示”，体现服务的“营销网络”、“服务中心”，上市公司必需的“投资者关系”、人力资源的“在线招聘”和体现联系方式的“联系我们”组成。

Banner条中显示的动画主要由体现公司形象的“天马奔腾”、体现公司资质的“品牌图标”及公司文化的宣传口号“持之以恒、天马轴承”构成。

在主体区域为三列，左右为主要栏目信息，中间为主体新闻展示等。

在底部区域是联系方式、版权信息和友情链接。

二级页面选取了“信息发布”中的“天马新闻”，如图1-3所示。

二级页面采用了“左拐角型”的页面布局设计，在顶部区域依旧为企业的Logo、导航条和Banner。整体颜色风格同为蓝色，和首页风格统一。

在顶部中，其余内容保持不变，只是Banner的动画不同，里面的修饰图片由公司的一些新闻图像来修饰。

在主体区域，左侧为新闻分类等类目列表，右侧大部分用于提供具体新闻。

在底部基本和主页一致。

（3）分析“名城房产”网站

“名城房产”是浙江省一家民营房地产开发企业，网址为“http://www.zjmingcheng.com”，其网站主页效果如图1-4所示。

其网站主页采用了“同字型”的页面布局设计，在顶部区域为企业的Logo、导航条和Banner。整体颜色风格为浅灰色调，主要表现建筑及开发商的风格，自然干净。

导航条类目设计主要由介绍企业的“走进名城”、“名城文化”，展示新闻的“新闻中心”，展示产品的“名城产品”，体现服务的“《名城》刊物”、人力资源的“名城招牌”和体现联系方式的“联系我们”组成。

Banner条中显示的动画主要由体现公司形象的产品楼盘图片和公司文化的宣传口号“永远热爱生活”构成。

在主体区域左、中、右等分，分别为“企业概况”、“楼盘展示”和“新闻中心”三个栏目。

在底部区域为简要的版权信息。

二级页面选取“名城产品”为例，如图1-5所示。

二级页面采用了“左拐角型”的页面布局设计，在顶部区域依旧为企业的Logo、导航条和Banner。整体颜色风格同为浅灰色，和首页风格统一。

在左侧拐角部分为该导航条项目中具体各产品的列表，右侧的主体区域为具体产品楼盘的展示。

在底部基本和主页一致。

（4）分析“海亮集团”网站

“海亮集团”是浙江一家以铜加工、房地产、金属贸易、矿产资源、教育、商业百货等为主体的民营综合集团公司，网址为“http://www.hailiang.com”，其网站主页效果如图1-6所示。

其网站主页采用了和“同字型”近似的页面布局设计，在顶部区域为企业的Logo、导航条和Banner。整体颜色风格以浅蓝色调为主，也是企业Logo的主要颜色。除了浅蓝色调外，还搭配了浅灰，再加上留白的设计，这也是企业网站常见的色调搭配，显得大气自然。

导航条类目设计主要由介绍企业的“关于海亮”，展示产业结构的“海亮产业”，体现服务的“海亮与社会”，展示新闻的“新闻中心”和人力资源的“海亮人才”组成。

Banner条中显示的动画主要由体现公司形象的各主营产业的实体图像、该产业的说明文字和该产业资质宣传的文字描述构成。

在主体区域均分为四列，分别为“新闻信息”、“企业文化”、“社会责任”和“诚聘人才”四个栏目的具体内容信息。

在底部区域为海亮集团的简要联系方式和网站版权信息。

二级页面选取“海亮与社会”为例，如图1-7所示。

二级页面也采用了“左拐角型”的页面布局设计，在顶部依旧为企业的Logo、导航条，Banner条则为体现企业文化、价值观的文字内容。整体颜色风格同为浅蓝和浅灰色，和首页风格统一。

在左侧拐角部分为该导航条项目“海亮与社会”中具体实施的三级子菜单，右侧的主体部分为这些三级菜单对应的具体内容和辅助栏目列表。

在底部基本和主页一致。

（5）网站分析总结

该类型网站包含贸易类公司，这也是电子商务网站设计中经常遇到的公司类型。现阶段该类网站的布局通常为“同字型”和“拐角型”，整体网站风格颜色多采用公司的标准色、Logo的颜色，以及和企业主题相联系的颜色，或者是蓝、灰等体现商务风格简约的色调。

网站导航条的设计也基本决定了该网站的二级页面栏目分类，该类型企业网站常见的公共栏目有：指示主页的“首页”，介绍企业的“关于公司”，展示新闻的“新闻中心”，展示产品的“产品中心”，体现服务的“营销网络”、“售后服务”，人力资源的“加入我们”和体现联系方式的“联系我们”。

Banner条现在正逐渐变为首页中占主要修饰作用的模块，一般由动态动画或静态图像组成，大小也在逐渐变大，更为醒目。该修饰图像主要可由图像素材和文字组成。一般图像素材常为修饰企业产品、企业建筑、企业人员、企业工程项目、和主题有关的修饰图像、说明资质的图标等，文字主要由企业文化、宣传口号、产品描述等构成。

主体区域主要是各栏目具体信息。底部通常是版权信息、友情链接、企业联系方式、说明信息等。

二级页面为了保持整个网站的风格，往往只在主体区域部分保持不同。当然也有一些例外，如服装、汽车等制造业企业网站则更注重网站的展示功能，以大量修饰动画、图片素材修饰为主。

3．任务分析

（1）WWW

WWW是World Wide Web的缩写，也可以简称为Web，中文名字为“万维网”，是Internet众多服务应用中最普及、功能最丰富、最常见的一个。平时上网浏览的网页正是“万维网”页面，因此网页设计与制作也可称为Web设计与制作。

WWW是由遍布在Internet上许多互相链接的超文本文档组成的系统，它将不同信息资源以网页的形式，由统一资源定位符（Uniform/Universal Resource Locator，URL）标识。通过超链接（Hyperlink）的单击和超文本传输协议（HyperText Transfer Protocol，HTTP）有机地联系在一起，由Web浏览器软件进行浏览。

WWW的核心是由以下三个标准构成的：

① 统一资源定位符（URL），这是一个世界通用的负责给万维网上的资源（如网页）定位的系统。

② 超文本传输协议（HTTP），负责规定浏览器和服务器互相交流的方式。

③ 超文本标记语言（HTML），作用是定义超文本文档的结构和格式。

WWW的工作原理如下：

当想访问万维网上的某一个网页或者其他网络资源时，首先需要在浏览器上输入想访问网页的URL或者通过超链接方式链接到该网页或该网络资源。然后根据输入的URL服务器名部分，被分布于全球的因特网数据库的域名系统解析，并根据解析结果决定具体访问哪一个IP地址（IP address）。根据确定的IP地址向在该IP地址所在的服务器发送一个HTTP请求，最后该网页将被发送给用户。浏览器能将发送过来的该页面数据“翻译”成平时所看到的“网页”。

（2）网页和网站

网页是构成网站的基本元素，是承载各种网站应用的平台。网站就是由一系列围绕同一主题统一风格的网页组成的。网站具体的内容就是网页，访问网站就是通过网页浏览器来获取该网站的资源信息或网络服务。

主页又称为“Home Page”，它也是一个网页，但是一个特殊的网页。一般每一个网站必须有且只有一个主页，该主页与该网站的URL绑定，当在浏览器中输入一个网站URL时，在浏览器上显示的正是该网站的主页。主页相当于网站的正门。当然，访问一个网站不一定通过主页进入，但是想要规范系统地了解一个屋子，还是需要通过正门进入。主页作为网站的正门，也是一个标志，体现了整个网站的制作风格和主题，主页上通常还会包含整个网站的导航目录。

网站中的网页一般包括静态网页和动态网页两种形式。

静态网页是指不和后台数据库交互的网页，是显示HTML格式的网页，内容相对固定，当需要改变其信息内容时，必须重新使用网页制作工具来对其进行修改，修改后的网页还要重新上传到服务器上覆盖原来的页面。静态网页文件一般以.htm、.html、.shtml、.xml为扩展名。在静态网页上，可以出现各种动态的效果，如GIF动画、Flash、滚动字幕等，这些动态效果并不会改变页面本身的内容。

动态网页通常由数据库交互和相应的应用程序构成，采用动态网站技术生成。动态网页文件一般以.asp、.aspx、.jsp、.php等为扩展名，并且在动态网页网址中有一个标志性的符号——“?”，如“http://www.zmi.cn/news_info.asp?id=348”就是一个典型的动态网页URL形式。

（3）构成网页的基本元素

网页是网站的基本元素，而网页本身也是由一些基本元素构成的。做好网站的规划和设计，其实就是对各个网页的基本元素进行规划和设计。一般构成网页的基本元素包括Logo、Banner、导航条、文字、图像、多媒体、动态特效、表格、框架、超链接、表单等。

① Logo。Logo即网站的标志，也是一个网站的象征之一。网站标志一般放在网页的左上角，应体现该网站的特色、内容，以及其内在的文化内涵和理念。通常企业网站的Logo也就是该企业的Logo。除了具有代表性的人物、动物、物品等，如工行的标志、搜狐的狐狸外，最常用和最简单的方式是用网站或者企业的中英文名称，采用不同的字体，字母的变形和组合来制作标志。

② Banner。Banner即网站横幅，是一种常见的网络广告和企业宣传形式。一般放在网页顶部最显著的位置，使访问者注意，常用动画的形式表现。

③ 导航条。导航条是网站设计中的一个重要内容，为访问者提供方便地访问到所需内容的途径，利用导航条可以快速找到想要浏览的页面。同时，导航条能清晰展示整个网站的层次结构。一般来说，导航条在一个网站中各个页面出现的位置是比较固定的，而且风格也是一致的。在网站中，导航条通常可分为图像导航条和文字导航条，也可分为横向导航条和纵向导航条。

④ 文字。网页最基本的元素就是网页的内容。一般企业网站的网页中，文字始终是表达信息的主体。需要注意的是，页面中文字大小、字体、颜色对比的组合，背景颜色的衬托，以及与图像等网页元素之间的排版。

⑤ 图像。图像在网页中主要起着表达信息、展示形象、衬托主题和体现风格的作用。在网页中可以使用多种格式的图像文件，其中使用最广泛的是JPEG和GIF两种格式的图像。图像还能作为背景、按钮、导航条、标题等。需要注意的是，页面中的图像和网站主题的关系，以及和页面内容的关系。

⑥ 多媒体。多媒体元素主要包含动画、声音、视频等，主要起着美化页面，使网页效果更为丰富的作用。和图像一样，多媒体元素也需要注意和网站主题的关系，以及和页面内容的关系。此外，还需要注意的是多媒体的格式，多媒体的格式非常多，尽可能采用主流格式，在常见的网页浏览器中能够显示，而不需要再去下载解码器。动画主要使用GIF动画格式和更为丰富的Flash动画，格式为.swf。声音常见格式为.mp3、.wma、.rm、.midi、.wav等，视频常见格式为.avi、.mpeg、.mp4、.rm等及流媒体技术。

⑦ 动态特效。为了使网页效果更加丰富，增加与访问者的互动，在网页中也越来越多地使用各种动态特效，如飘浮广告、广告图片自动轮换、图像淡出等。动态特效主要依靠一些控件和脚本语言（如JavaScript、VBScript）的内容。

⑧ 表格。表格是网页中最常见的页面布局元素，控制着其他页面元素的位置及页面的显示效果。表格由单元格组成，表格布局完成后，各元素分别填充到表格的单元格中。

⑨ 框架。框架也是网页中比较常见的页面布局元素，作用就是把网页在一个浏览器窗口下分割成几个不同的区域，从而实现在一个浏览器窗口中显示多个页面。使用框架布局可以使网站的结构更加清晰，而且各个框架之间不存在干扰问题。

⑩ 超链接。超链接可以链接不同网页或站点，各个网页链接在一起后，才能构成一个网站。超链接实质是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是图像、电子邮件地址、文件，甚至是一个应用程序。而在网页中用于超链接的对象，通常是一段文字或一个图像文件。

⑪ 表单。表单是一种特殊的网页元素，通常用于收集信息或实现一些交互式的效果。表单的主要功能是接收用户在浏览器端的输入信息，然后将这些信息发送到服务器端，由服务器进行处理。常见于网页登录、注册、搜索部分。

（4）网页设计与制作工具

现在进行网页设计与制作，往往通过辅助软件来完成。教程中所用的辅助软件主要是：网页编辑工具——Dreamweaver，图像处理工具——Photoshop，动画制作工具——Flash。

4．任务拓展

（1）网站设计与制作的三个阶段

第一阶段，网站规划。主要包含确定网站主题、搜集网站材料和规划网站架构。

第二阶段，网站制作。主要包含网站制作过程、测试评估及将网站正式上传。

第三阶段，后期维护。主要包含网站的推广和营销，以及对网站的维护和内容的更新。

（2）贸易公司网站的分析

对“浙江物产国际贸易有限公司”的网站进行分析，网址为“http://www.zmi.cn”，其主页效果如图1-8所示，同时分别指出所用的网页基本元素。