3.如何制作横向滚动栏20051010.docxVIP

如何制作横向滚动栏

制表人：何磊明日期1.横向滚动栏里的每个图标可以向左或右连续滚动，鼠标移上去即停止滚动，每个图标都可以单独设置超链接，点击即可实现页面跳转。效果图如下：

2.制作横向滚动栏主要包含3大步骤。第一设计图标素材，第二调整页面布局，第三设置参数。其中图标设计是在Photoshop中完成的，案例中的图标采用的宽高像素分别是142px及139px。选取合适的图片配上文字后输出成jpg图片备用。

案例中的滚动栏图标设计.psd源文件下载：/s/1kT2FsEz

3.在课程后台管理页面中点击课程建设——网站栏目管理——新增网站类栏目——输入栏目名称，本案例中输入“滚动栏”

4.此时在栏目名称这一栏就增加了一个滚动栏一项，点击“详细信息”即可上传展开，可以添加文档

5.在滚动栏目下新建八个文档后，点击“编辑”即可上传第一步准备好的8个图标。每一个新建文档对应一个图标。在图片上传页面可设置超链接，链接到任意网址或者某个文档，案例中我们设置了，当我们点击图标时就可以跳转到百度的页面了。

6.图片上传完毕后，通过快捷通道返回申报站点页面进行设置。

7.发布“滚动栏”栏目。只有发布过的栏目才能在站点上显示。

8.点击“预览申报站点”

9.将鼠标移至申报站点顶端，在弹出的工具栏中点击页面设置选项。在页面设置模式下选择要显示布局模块，这里我们选择滚动栏既可将滚动栏显示在内容区域。

10.滚动栏虽然显示出来了，但是并不是我们要的效果，我们可以选择设置栏目属性来调整。

11.设置栏目属性。选择图文列表模式

12.切记勾选了列表项滚动，设置好显示模式、图片宽高度、排列方式相关参数，点击保存

13.上图中滚动效果是出来了，但是滚动栏的宽度不够，看起来显得小气。这个问题我们可以通过调整页面布局来解决。

14.页面布局调整界面，首先单击栏目选择需要调整的模块（变成黄色），设置宽度为1000，再次单击模块后其宽度增加为1000，点击保存即可。

15.刷新站点页面查看效果，完成滚动栏的创建。