TML5多媒体作品以其对各种平台的兼容而见长,目前已获得了广泛的应用。如果我们需要制作自己的HTML5多媒体作品,一个方便之选就是利用现成的在线制作工具“百度H5”。
首先访问“百度H5”网页(https://h5.baidu.com/),可以看到非常简单的页面,仅有“我的H5”和“我的模板”两个选项。其中“我的模板”是通过套用模板的方式来制作HTML5作品,而“我的H5”则可以完全靠自定义各种参数来自由创作,制作好的作品也会显示在这里(图1)。
1. 通过创意模板轻松制作
在首页中选择“我的模板”,随后会进入一个模板展示页面,这些都是设计者们分享的模板。根据你所要设计的作品的类别,可以按类选择一个类似的作品作为制作的模板,然后在此基础上进行修改,即可快速形成自己的多媒体作品(图2)。
比如要制作一个招生方面的媒体作品,选择如图所示的秋季班招生模板,然后点击右下角的“使用模板”按钮(图3)。
接下来先要为作品命名,例如“我们的幼儿园招生了”。输入完毕点击“确定”按钮(图4)。
随后进入实质性的模板修改编辑阶段。对于不合适的内容,可先删除页面元素再添加。点击“文本”菜单插入所需文本内容。同理,可使用右边的“媒体”按钮插入图片、音频、视频、嵌入视频、全景图等内容。如果是PSD图片,则直接用PSD菜单载入。若版面中需要插入一些图标或形状,则点击“图形”菜单选择添加(图5)。
此外,对于作品中所要用到的展示数据,可以通过插入图表、表单等方式,非常轻松地完成数据展示制作(图6)。如果要实现更多的效果,可通过“插件”菜单,选择添加页面加载套件和加载进度、添加计数器、添加帧动画、添加相册或地图等。
对于需要修改的属性,可通过窗口右侧的分类属性窗口选择设置。通过窗口下方的编辑区域,可控制动画、加载页、全局全景和背景、当前页等参数设置。例如,要定制个性化的加载页面效果,点击“加载页”选项卡,然后通过下方的滑块,对加载页中的图片和进度进行自定义编辑(图7)。
对页面上的各种元素进行修改和编辑完成之后,点击工具栏左上角的磁盘按钮将作品保存在网上。注意,编辑过程中产生的内容软件会自动保存,但为了防止丢失,还是要养成勤于手动保存的习惯。
最后,就可以发布作品了。点击工具栏上的“发布”按钮执行发布操作(图8)。
由于作品是保存在网络服务器中的,因此作品的共享是以网址的形式体现的。发布时要填写作品分享的标题,设置个人域名。我们只需在“个性化域名”中填写自己命名的作品个性域名地址,发布后其他人就可以用这个域名来访问HTML5作品了(图9)。
小提示:使用上述服务需要使用自己的百度账号登录。为维护网络安全,目前发布信息需先经过用户实名制认证方可进行。
2. DIY 完全自己设计制作
套用模板适合于初学者或设计能力不强的用户。其实,不用套用模板,完全可以从头全部由自己来设计作品。
制作时,在主页中选择“我的H5”,然后点击空白页上印有圆圈套加号图标的按钮,向导会询问创建什么样的布局。从“分页布局”或“整页布局”中选择一种布局方式。如果是分页布局,则依靠页面间的前后滑动实现简单跳转;如果是整页布局,则将整个页面分为不同区域,各部分还可创建链接,实现不同的功能(图10)。
随后其他步骤与第1部分的添加和设置操作方法相当,只是全要亲自设计,不能套用现成的组件而已。在创作过程中,只要善于使用系统提供的文本工具编排文字内容,用媒体和图形工具添加图片、图形、音视频,数据相关的内容使用图表、表单等工具,借助于“插件”扩展来补充完善,发挥自由想象的创作空间,一定能创作出更具个性化的作品。
戏葡萄原创专稿,未经允许请勿转载
HTML5游戏有哪些做法?在很多人眼里,H5游戏对于他们可能还只是像《围住神经猫》那样简单的样子——产品形态简单、推广方式简单、盈利模式也很简单。
在白鹭时代(Egret)今天主办的HTML5游戏大会上,来自全国各地大大小小的厂商,给出了不同的答案。
关于推广方式(入口),现在有了QQ浏览器、QQ空间、360手机助手、百度贴吧、猎豹浏览器等;关于盈利模式,也有广告变现、游戏内购等;我们会在其他文章中盘点各路观点。
这里先介绍现在HTML5游戏研发上的一些“进化形态”。
《开心豆豆》于5月上线,墨麟旗下鱼之乐研发,已在腾讯玩吧平台上面运营了半年。基本上两周一个迭代。
《开心豆豆》针对12-65岁的女性用户,风格是日系Q版,核心玩法有三个:消除、闯关、手势效果,后者是玩法上的一个小小的创新。这个游戏看上去很像传统的三消类游戏,例如《糖果粉碎传奇》、《开心消消乐》,但实际上它是一款连线消除游戏。闯关模式有主线过关、大关套小关、三星完美闯关等设定。手势效果是新版本的设定,在同样的消除不同的连线方式可以产生不同的特效恶搞。此外游戏还设置了一些障碍物,比如巧克力奶油冰块等等。
该游戏在社交环节中也做了一些尝试。首先是好友邀请,好友之间可以互相赠送体力和道具。到5月23日为止有近400万的玩家,其中80%的活跃用户是女性玩家。未来还会加入主角系统,以美食为主题。主角可以在闯关的过程中收集食材,然后在甜品屋里制做甜品,再参加美食竞技。
墨麟鱼之乐今天展示的第二款游戏,之前的形态叫做《Q将水浒》,最早出现在QQ浏览器的游戏平台上。当时这款游戏是一款策略养成类游戏,混杂了社交、建设等元素。现在的《口袋江湖》是在《Q将水浒》基础上,把策划的数值和体系移植过来,把IP从水浒改为武侠题材,再强化了休闲策略的设定而成的。游戏里面是标准的武侠设定,玩家可以建设门派、招募弟子,称霸武林等。
游戏的界面不像传统卡牌,而是有着自己的主城。主城里面所有的建筑都有自己的功能,需要玩家自己去升级。游戏的战斗是回合制的,双方各出5个人,进行复杂的战斗,而不是撞卡式的。所有的英雄有自己的行军速度、攻击范围、攻击招数等。游戏还设定了资源战、擂台赛等体系,玩家之间还可以互相占领主城,而不是像《刀塔传奇》、《我叫MT》等类似于单机的设定。这样就突出了玩家之间互动,仇人和仇人之间有互动,邻居和邻居之间有互动。
《少女战机》是一款纯HTML5游戏。人设方面,游戏以机娘为中心,将少女的萌和机甲的燃相结合,让众多的宅男得以找到自己喜欢的那一款机娘。战斗模式方面,游戏保留的经典的关卡模式,通过设置出一些无尽关卡,让老玩家们得以延续他们的挑战。游戏也打造了一个斩首模式,在里面,玩家需要通过自己对关卡的了解,运用智慧挑战实力悬殊的BOSS。当玩家获得一定的成长之后,会需要更多的挑战来证明自己的实力,逃生模式就是为此而设计的。在逃生模式中,玩家将要在如潮的弹幕中生存下来。
指上缤纷研发一款三国题材的卡牌游戏。将策略游戏的玩法规则和Q版画风的幽默诙谐深度融合。
中娱在线研发,一款横版动作卡牌角色扮演类游戏。“我们精心设计了近百种不同的武器和技能,让玩家在游戏里面能非常自由的收集技能,体验组合搭建技能的乐趣。然后再围绕着这个核心创新点,我们采用情感体验式的设计理念,精心开创了一个相关的成长体系以及相关的一个玩法。然后再配上我们由顶级美术打造的一个一流的远古游戏世界,能让玩家从视角到其他游戏体验都能获得一流的游戏享受。最后我再确定以及肯定的告诉大家,这就是H5游戏。”
未来人科技研发,横版回合制战斗,九宫格策略布阵的游戏。“其实玩法上说白了没有什么太大的创新,但是我们在美术风格上确实做了很用心的一些设定。”“我们的核心的玩法,简单来说就是让玩家去积累一定的游戏内资源,然后去获取,去购买更多的武将,然后更高星别的武将。核心玩法的策略性上主要体现在九宫格布阵。”“训练场稍微给玩家开放了一点点类似于挂机类的玩法。你可以不用在线,你把它挂在上面,它就会慢慢的升级。然后这是每天会开的一个Boss战。”
梦启科技的一款放置类RPG游戏,也就是挂机游戏。核心玩法上,游戏有仇杀这种创新,也引进来类似传奇的红名机制,用这种新的交互方式来增加活跃。在挂机的过程中,玩家还可以通过PK来爆掉其他玩家的装备,游戏也会在之后增加爆装的机会和条件。爆掉别人的装备之后也会产生红名,上恶人排行榜,吸引别人PK。第二个系统是美人。不同的美人有不同的属性,有的美人适合打装备,有的美人适合PK,有的美人适合大BOSS。多个美人可以组成美人阵法,对玩家属性是一个很大的提升。最后一个核心是跨服。现有的挂机类游戏可以看到,出现了页游之前的快速开服、快速洗服的现象。这样会造成当服的用户活跃度不高,跨服就用来缓解这种问题。
山水地科技的一款重度策略类游戏,采用F2P加道具收费的模式。开发周期前后陆续加起来将近一年。这款游戏13年初已经初见成品,但当时的硬件无法支撑,因此项目停滞了一段时间。到了今年年中,游戏重新进行了一些开发,并且已经在手Q空间上线。
游戏的核心玩法与其他策略游戏类似,但也有航海题材的一些特色,包括航海、冒险、贸易、国战、占领城市等等。首先,游戏拥有一张非常巨大的地图,玩家可以在拥有180座城市的世界地图里航行,在航行的过程中还会遇到风暴等各种随机探险事件。游戏界面左下角的舵用来控制航行方向,玩家靠扔骰子的结果确定在海上航行的天数。
其次,游戏针对不同的地区设计了不同的建筑风格,如果玩家在加勒比诞生,那么建筑风格就为海盗风,此外还有英格兰、奥斯曼、华夏等风格。并且这些建筑风格还会发生变化,玩家的游戏行为会影响城市的发展度,发达的地区建筑风格也会相应的更加华丽。
再次,航海题材离不开航海贸易,每个城市都拥有自己的特色商品,这与另外两个系统相配合。第一,每个城市的商品除了可以低买高卖用来盈利以外,这些商品本身可以作为材料制造装备和恢复体力的食物。而这个制造系统又与游戏中重要的国战系统相联系,游戏中一共有四个国家,四个国家之间会因为争夺资源而产生冲突,如果城市被敌对国占领,玩家就无法购买这座城市的特色材料。
游戏的PVE基础系统为探险模式,呈现为第一人称视角的推图模式。探险过程中玩家会遇到包括战斗、好友互动、获得宝箱物品等多种事件。玩家可以在每个城市中参与到主线任务、日常任务和不同的随机委托等多种形式的任务。
PVP方面游戏提供多种战斗模式:海上劫掠遭遇战、城市切磋战、城市占领、竞技场天梯战与阵型战斗策越。
游戏中最重要的就是异步实时多人国战,每个国家的玩家不管等级高低可以随时航行到正在发生国战的城市进行战斗,每个人都可以做出自己的贡献。国战又与游戏中的选举与官职系统相结合,尤其是当玩家被选举为国王时,他会产生强烈的社交付费需求。
游戏中还包括卡牌抽取,并且进行了一定的创新。卡牌抽取分为很多类,通过人民币、红水晶、黄水晶等不同材料抽取,获得的英雄具有不同的功能,红水晶抽取的英雄善于PVE,黄水晶抽取的英雄善于贸易,每一种水晶都与玩家的游戏行为相结合,战斗时获得黄水晶,贸易获得红水晶等等。此外,每张卡牌都有自己的技能系统,并且可以互相继承,解决了传统卡牌游戏的缺陷。
山水地科技一款休闲社交游戏,包含宠物养成、牧场捕捉、战斗策略、配对交互四大系统,女性用户占60%以上。
游戏有以下核心玩法:一、配对,玩家可以为自己的小鸟向朋友的小鸟提亲、接受提亲、共同孵化新的小鸟。二、训练,玩家可以对小鸟进行训练和留学。三、入侵,玩家可以入侵猎场或帮助好友反抗。
游戏拥有很强的社交性,具有公会和结婚的功能,有利于增加收入和提高用户留存率。
游戏的盈利模式为通过群体PVP副本、群体PVE副本以及个人天梯赛等模式刺激玩家不断提升小鸟的战斗力。
有爱互动的一款放置类RPG网游,是由文字MUD游戏演化而成,具有实时RPG离线系统与离线挂机训练系统。游戏玩法包括竞技PVP、商城道具、装备强化、多人团战以及工会等,游戏中打怪、经验升级、获得金币、掉落装备都是自动的,游戏行为会在玩家离线后继续进行。
端工作都是从创建一个网页文件开始的,一个最小的网页文件应该总是包含一些东西。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>标题</title>
<link rel="stylesheet" href="css/main.css" />
<link rel="icon" href="images/favicon.png" />
</head>
<body>
<script src="js/scripts.js"></script>
</body>
</html>
其中,head 主要包含,提供有关页面的元信息标签 <meta>,比如 针对搜索引擎 ,关键词和描述及编码类型等,网页标题,css样式文件。
一般建议,script 标签写在body 结束之前。
是不是很简单,这是一个网页的基本框架,要想制作一个内容丰富,漂亮的网页,还需要学习很多知识。
https://www.w3school.com.cn/tags/tag_meta.asp
https://www.haorooms.com/post/html_meta_ds
到此,你基本已经了解了如何制作一个网页,建议能够亲手练习下,这样加深理解。
接下来,我会大概讲下,网页如何布局并填充内容,感谢您的关注。
*请认真填写需求信息,我们会在24小时内与您取得联系。