学习制作学校网页第二期，制作焦点图

第二期

本期内容：

⊙1.1下载焦点图插件

⊙1.2 制作焦点图

⊙1.3 添加ico图标

上面的动画，就是本期要实现的最终效果

喜欢本期的记得给小信点个赞哦~(●'◡'●)

1.1

下载焦点图插件

何为焦点图？

答：网站焦点图是一种网站内容的展现形式，可简单理解为一张图片或多张图片展现在网页上就是网站焦点图。据国外的设计机构调查统计，网站焦点图的点击率明显高于纯文字，转化率高于使用在文字标题5倍，所以焦点图也成了网站的一重大内容。

根据焦点图实现的技术，目前可分为js焦点图，flash焦点图，css焦点图，jq焦点图。

相信做过一个相对完整网页的同学们，对flash怎么制作焦点图多多少少有一定的了解和制作经验。它的体积量大，代码结构复杂，频频崩溃的不稳定性，所以使得用flash来制作是一件头疼的事情，因此flash也逐渐被市场抛弃......

而小编介绍一款小巧，高效，易用的焦点图插件，myFocus。

myFocus是一个专注于网站焦点图/轮换图的JS库。该焦点图插件集成了30多种风格图片切换效果，体积小，（其2.0.4版本体积不足1MB）且使用简单，兼容ie6+和所有的主流浏览器。

（myFocus官网）

由于myFocus官网上提供的“Demo演示打包下载”已经GG了，所以小编为同学们提供云盘链接，以方便同学们备留下载。

同学们只要在公众号后台回复myFocus。

云盘文件下载好的同学就可以解压对应的版本包了，小编使用的是2.0.4版本，所以解压完如图所示。

（压缩后的V2.0.4 根目录）

接下来就把根目录下的“js”文件夹拷贝到自己网站的站点下面。

打开“js”文件夹中可以看到一个myFocus的库文件-“myfocus-2.0.4.min”，再打开“mf-pattern”文件夹，可以看到myfocus提供的许多风格文件，而每一种风格文件由两个文件组成，一个是层叠样式表（CSS）文件，一个是JavaScript文件。如图1.1.2所示。

（图1.1.2）

1.2

制作焦点图

介绍完myFocus，我们回到网页制作中，打开上一期的html，我们首先引用myFocus文件。在标签结束之前，添加一个标签来引用我们的myFocus脚本文件。代码如下：

HTML代码：

台州科技职业学院

--上一期其余代码省略--

标签的相关属性如图1.1.3所示

（图1.2.1）

下面我们再引用myFocus的一种风格文件，这里小编用的风格是“mF_YSlider”，同样用标签来引用，代码如下：

HTML代码：

台州科技职业学院

--上一期其余代码省略--

添加完js风格文件后，最好再引用这个风格文件的对应CSS文件，而CSS文件引用我们用

标签，代码如下：

HTML代码：

台州科技职业学院

--其余代码省略--

rel="stylesheet"type="text/css"/>

引用好三个文件后，我们就要准备布局制作焦点图所在的区域。看过上一期的同学会知道学校主页的大致排版情况，而本期就是制作其五大板块的“wrap”区域。

在warp板块中小编把它分为一个如图1.2.2所示的盒子模型

（图1.2.2）

首先，在上一期的nav导航栏之后加入新的

标签，为其添加id为“wrap”的最外层盒子，然后在“wrap”的

标签中再添入一个class为wrap_main的div盒子，用作包裹另外两个小盒子（wrap_fouce和wrap_news），代码如下：

HTML代码：

布局好模型后，接下来就为其添加CSS页面样式，代码如下：

CSS代码

#wrap{

height:700px;

width:85%;

background-color:#3AAF3C;

}

.wrap_main{

height:670px;

width:90%;

background-color:aquamarine;

}

.wrap_fouce{

height:670px;

width:75%;

background-color:#33CCFF;

}

.wrap_news{

height:670px;

width:25%;

background-color:#006239;

}

以上代码中，小编将最外层的div元素“wrap”的宽度设为85%，而高度为700像素。第二层div元素“wrap_main”宽度则基于父元素“wrap”盒子宽度的90%。而其两个子元素“wrap_fouce”和”.wrap_news”的宽度分别为“wrap_main”宽度的75%，25%。因为高度则都为670像素，所以，小编建议同学们另外一种代码写法，就是把相同的代码用“连写”方式书写（中间一定要加“,”）代码如下：

CSS代码

.wrap_main,.wrap_fouce,.wrap_news{

height:670px;

}

另外为了更直观的查看这几个盒子的排列情况，小编给它们都添加了不同的背景颜色。测试页面，如图1.2.3所示。

（图1.2.3）

测试页面发现，wrap_news被挤到外面去了。而学校的wrap板块是居中在页面中的，其中“wrap”div还设置了一张“学校大门彩绘”的背景图片，所以我们先对“wrap”元素加入新的css样式。代码如下：

CSS代码

#wrap{

margin:auto;

background-image:url(../img/中国风背景图片.gif);

}

以上代码中，小编对margin属性设为0 auto，意思就是设置对象上下间距为0，左右自动，这样就能实现水平居中了。还有，值得一提的是，图片的引用，最好用相对路径，而非绝对路径。测试页面，如图1.2.4所示。

（图1.2.4）

可以看到“wrap”已经水平居中对齐了。接下来，对“wrap_main”进行垂直居中对齐，另外在对其两个子元素“wrap_fouce”和”.wrap_news”并排在一起。加入新的css修饰，代码如下：

CSS代码

.wrap_main{

margin:auto;

position:relative;

top:50%;

transform:translateY(-50%);

}

.wrap_fouce,.wrap_news{

float:left;

}

以上代码中，小编对“wrap_main”进行了position属性的相对定位，使其先脱离文档流，而垂直偏移需要用到top属性，所以小编为其添加50%的值，使它距离其父元素顶部50%的距离。另外，对wrap_fouce和wrap_news进行左浮动，让两个子元素并排在一起，测试页面，如图1.2.5所示。

（图1.2.5）

测试页面发现，“wrap_main”在垂直方向上面还并没有居中，从上图中的两个箭头指示发现明显是偏下了。所以还要让它中心再移动其自身高度的一半就可以垂直居中了。只需要在wrap_main中再加入一句css代码就能完成，代码如下：

CSS代码

.wrap_main{

transform:translateY(-50%);

}

以上代码中小编通过设置transform属性的:translateY(-50%)值，意思就是使得wrap_main向上平移自身高度的一半，也就是50%。transform具体属性如图1.2.6所示。

（图1.2.6）

测试页面，如图1.2.7所示。

（图1.2.7）

整个布局完后，我们开始往wrap_fouce中添加图片。这里可以用

列表标签来添加。代码如下：

HTML代码

以上代码中，小编定义了四个列表项目，每个列表项目都添加了一张图片，测试页面，如图所示：

测试页面发现，四张图片都分开了，而且都脱离wrap_fouce了，那怎么让这四张图片都在“框”里又不脱离出去呢？

其实只需给wrap_fouce加一个overflow属性，代码如下：

CSS代码

.wrap_fouce{

overflow:hidden;

}

这一句代码意思就是当内容溢出其高度时就隐藏，测试页面，如图1.2.8所示。

（图1.2.8)

现在，图片就只显示第一张图片了，但是这四张图还不能切换，接下来就要添加脚本代码，使其能调用myFocus方法。

首先在结束之前添加一个标签，另外，在初始化之前，先给我们的wrap_foucediv取一个“id”，代码如下：

HTML代码

myFocus.set()

以上代码中，首先给wrap_foucediv取了一个“id”为warp_Box,然后在标签中添加调用myFocus方法的代码，id中为盒子的id。测试页面，如图1.2.9所示。

（图1.2.9）

测试页面发现，好像并没有什么变化？这是什么原因造成的捏？

其实一方面原因是，“myFocus.set()”代码中id值与我们给wrap_fouce定义的id值不一致，所以为了保持一致，就要对id中的值”boxID"改为"warp_Box"。代码如下：

HTML代码

myFocus.set()

重新测试页面，如图1.2.10所示

（图1.2.10）

测试页面发现，除了底部多了一灰色长框外，这个焦点图依然木有效果，那怎么回事呢？

其实在我们构建图片列表的时候，还需要一个创建一个div把图片列表包裹起来，那么只需要在

标签之前，加入一个

标签，而类名必须为”pic“，代码如下。

HTML代码

------代码省略------

删除盒子背景颜色，测试页面，如图1.2.11所示

（图1.2.11）

但是，制作完焦点图后，回去看上一期的导航栏，发现其出现了问题，如图1.2.12所示。

（图1.2.12）

观看图上发现，二级导航栏的其它的内容被焦点图挡着了，所以可以用z-index属性来解决这个问题。

那么只需要在二级导航栏的css中加入z-index属性来设置元素的堆叠顺序，而这里的值，小编把它设为1（或更大）。意思就是z-index的值如果为正数，则离用户更近，为负数则表示离用户更远，值越大，该元素就越在上面，这样就不会被其它元素挡着了。测试页面，最终效果如图1.2.13所示。

（图1.2.13）

以上就是本期焦点图的制作，感兴趣的同学不妨试试哦~

-END-

3

添加ico图标

上一期中有一位同学留言，怎么给网页的标题前添加ico小图标？

首先，要想给网站添加图标，我们首先需要准备一张ico图片。而这里小编则用学校的logo用作ico图标。要做ico图标，那图片格式一定是为带ico的后缀，为此，小编提供同学们一个ico图片格式在线转换的网站（http://www.bitbug.net/）。

转换完后，把图片命名为favicon.ico，记住图片的后缀一定要是ico，然后把图片上传到自己网站的根目录下，就是和主页一起，如图1.2.14所示。

（图1.2.14）

最后在结束之前添加一段HTML代码，代码如下：

HTML代码

最后测试页面，如下图所示。

总言

在编写代码的过程中，由于小编时间及技术水平上的原因，可能会存在不全面和错误，还敬请各位老师同学在留言区指出，提出宝贵的批评和意见。小编在此以最诚挚的心希望与同学们共同进步，共同交流，共同成长。

最后，推荐同学们一个学习网页制作的网站--w3school

（http://www.w3school.com.cn/index.html）

以及一个在线学习HTML和其它语言的视频网站--慕课网

（https://www.imooc.com/）

end

“技术者板块”

往期回顾

Review of previous periods

●

技术者 | 初探HTML5：学习制作学校网页（第一期

）

●技术者 | Ps之快速换脸，杨洋瞬间变张艺兴

汽车与信息工程学院团委宣传部

责编：陈贤好

审核：李乐琛 温鑫

投稿邮箱：qxtwxcb@126.com

汽信BigFamily

带给你不一样的校园资讯

汽车与信息工程学院官方微信

微信号：tkyqxxy