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

第二期

本期内容:

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181223G0ZEKY00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券