第三章 网站焦点图制作

1.焦点图

网站焦点图是网站内容的一种展现形式，简单来说就是让一张图片或多张图片展现在网页上很明显的位置，用图片组合的形式播放，类似焦点新闻的意思，只不过加上了图片。一般多用在网站首页版面或频道首页版面，因为是通过图片的形式呈现，所以视觉吸引力较强，容易吸引访问者的点击。据国外的设计机构调查统计，网站焦点图的点击率明显高于纯文字，转化率也高于使用文字标题的五倍。

焦点图必须有图片，不然纯文字的形式就是焦点文字或焦点新闻。

①JS焦点图：使用原生态的JS代码实现的焦点图，样式相对单一，借助CSS可实现多样的风格。

②Flash焦点图：使用Flash设计或用Flash AS编程设计的焦点图。该焦点图的优点是字体展现效果佳，比纯网页形式更具有美感，缺点是不利于SEO与引擎的抓取。

③CSS焦点图：网页设计现在流行HTML+CSS设计，CSS焦点图就是这样而来的，很多情况下需要结合JS代码实现。

④jQuery焦点图：现在很流行的实现方式，逐步取代JS原生态的焦点图，因为jQuery焦点图的代码书写简单，借助jQuery的类库很容易实现常见的JS焦点图效果，而且代码少，不过需要使用者有一定的网页设计基础。

图3-1、3-2、3-3、3-4所示为主流网站焦点图效果。

图3-1 CCTV焦点图效果

图3-2 当当网焦点图效果

图3-3 京东焦点图效果

图3-4 威锋网焦点图效果

焦点图基本要素包括三项：

①图片：根据网站需要，准备图片若干张，图片的尺寸要一致，格式不限，可以使用jpg、gif或者png格式的图片；

②导航指示标志：一方面用来标识当前显示图片，另一方面用来在焦点图之间进行切换；

③导航链接地址：当用户点击焦点图时显示的网址地址。