Hype

Hype中文官网 > 常见问题 > 案例:Hype中如何添加网页标签图标

案例:Hype中如何添加网页标签图标

发布时间:2021/02/23 09:52:29

在Hype 4交互动效制作软件的文稿面板的基础选项中,还有一个“编辑头HTML”按钮选项,它是这款H5创作工具提供给用户的一个编辑HTML5文档头部head的入口。在排印面板讲到的添加字体,就可以通过这个按钮选项对添加的字体代码进行编辑。

本章节将通过一个“添加网页标签图标”的案例,详细讲述在“编辑头HTML”中head里的元素语句的编写规则,以及其功能与作用。

案例的讲解涉及到一些代码,不过都相当的简单,相信小伙伴通过这样一个案例能够举一反三,掌握HTML5元素语句的编写,以及文档头部head里的元素的功能和作用。

一、什么是网页标签图标

打开一个网站,在网页标签上除了有这个网页的标题(title)外,在标题的左边还有一个图标,这个就是网页标签图标,被称为favicon。大多数情况,这个图标就是该网站公司的Logo。

网页标签图标
图1:网页标签图标

二、准备工作

网页标签图标为正方形图形,通常选用png格式。图标宽高没有特别的要求,可以选择“36px*36px”、“72px*72px”、“96px*96px”、“128px*128px”等等。图标的容量大小最好不要超过100KB。小伙伴可以通过图像编辑软件调整图标的大小。

1、编辑图标

将一个SVG图标拖到Photoshop软件中,在“栅格化SVG格式”弹窗中,把图标的宽和高设定为128px,并点击“确定”后返回Photoshop工作界面。

选择一个前景颜色,用“油漆桶”更改图标的颜色。选择菜单“文件”中的“存储为”,“保存类型”选择png,把文件名称改为favicon-128x128。

编辑图标
图2:编辑图标

2、把图标导入Hype资源库中

在Hype 4资源库面板中,点击“+”按钮,在“访达”弹窗选择刚才保存的图标添加到资源库中。

把图标导入到资源库中
图3:把图标导入到资源库中

三、link元素及属性

添加网页标签图标是在HTML5文档头部head里使用link元素,其中会用到link元素的三个属性:rel、type和href。

rel:注析链接的文档是做什么的。在这里链接的文档是一个图标,这里填写的就是icon,即rel=“icon”。

type:注析链接的文档是什么类型的文档。在这里链接的文档是一个png格式的图形,所以填写image/png,即type=“image/png”。

href:被链接文档的位置,也就是图标保存的路径位置。这里要特别注意,由于图标已经添加到Hype的资源库文件夹中,所以要加载的图标路径已经不是原来电脑存放的路径了,而是指向Hype的资源库文件夹。

在Hype中,资源库文件夹的位置是${resourcesFolderName},那么图标的具体路径为${resourcesFolderName}/favicon-128x128.png。

四、实现图标的添加

在Hype文稿面板,点击“编辑头HTML”按钮打开一个HTML编辑界面。

编辑界面分为上下两部分——上部分是HTML文档头部head元素部分,可以在head元素部分添加元素语句;下部分是Hype内部变量及其说明,例如资源库文件夹位置替代变量${resourcesFolderName}的说明。

这些变量名不需要专门记忆,使用的时候点击变量旁边的图标,就能添加到上部分鼠标光标的位置上。

添加Hype变量
图4:添加Hype变量

在中间部分,输入link元素及属性语句:

小伙伴要注意:整个语句必须是英文输入,不要出现中文符号,例如中文的双引号。(上面的语句是给小伙伴参考的,不要拷贝使用,因为小编使用了中文的双引号。)

输入link元素语句
图5:输入link元素语句

五、网页上显示图标

link元素语句输入结束后,返回场景界面,点击预览打开浏览器,在浏览器网页标签上,就可以看到添加的图标了。

显示网页标签图标
图6:显示网页标签图标

六、总结

对于初学者来说,看到代码总会恐惧。其实在HTML5文档头部head的内容相对来说都是比较简单固定的,例如本章讲述的添加网页标签图标,语句都是固定的,要添加不同的图标,只要更换png图标即可。

小伙伴可以自己尝试下载Hype,使用meta元素添加关键字(name=“keyword”)和网页简介(name=“description”)。

作者:东佛

标签:网页标签图标favicon

读者也访问过这里:
Hype中文版
创建漂亮的HTML5网页内容
立即购买
QQ 群
官方交流群:1046763737 立即加群
kefu@makeding.com
热门文章
基础教程:Hype 4软件界面介绍
Hype是一款基于MacOS系统的交互动效制作软件,延续了苹果软件的简洁风格,与Keynote软件的界面基本一致。
2020-07-23
基础教程:Hype 4工作流程(一)
本章节通过一个简单的案例,完整讲述Hype 4的基础操作,让小伙伴了解怎么样使用Hype 4交互动效制作软件设计一个动效。
2020-11-09
H5制作软件Hype导出功能详解
Hype是一款Mac端网页制作工具,它可以通过时间线录制功能制作各种各样的网页炫酷动画效果,同时也支持使用物理引擎制作动画。当然,它的强大不仅仅体现于动画制作方面,它的导出功能同样也是功能齐全,下面小编就通过使用Hype 4版本,为大家详细介绍下这款H5制作软件的导出功能。
2020-06-05
盘点那些简单易用的H5动画制作软件
现在的生活中很多方面都要用到H5动画,比如公众号的推文、电子婚礼请帖、活动邀请函等等,H5动画在我们的生活中扮演着越来越重要的角色,会做H5动画和也成为了工作技能的加分项,那么简单易用的H5动画制作软件又有哪些呢?下面我们一起来盘点两款较为常用的H5制作软件吧。
2021-01-20
Hype 如何进行安装与激活
本篇将为各位小伙伴们集中介绍一下H5制作软件Hype的安装与激活教程。
2020-12-24
Hype软件持久符号的应用
Hype是一款支持无代码创作炫酷网页的Mac端应用软件,它支持各种动画、元素。其中有一个强大的符号功能,该功能分为基本符号和持久符号两种,本文中,小编将使用Hype 4版本,为大家演示和讲解Hype中的持久符号。
2020-06-04