《新媒体技术基础（双语）》课件-新媒体页面编辑

新媒体与新媒体编辑NewMedia&NewMediaEditor学习目标1了解H5页面的概念和特点。2熟悉H5页面的类型。3掌握H5页面的设计原则、方法与技巧。4掌握常用H5页面编辑工具的简单用法。LearningXiGoals1LearnabouttheconceptsandfeaturesofH5pages.2FamiliarizeyourselfwiththetypesofH5pages.3Masterthedesignprinciples,methodsandtechniquesofH5pages.4LearnhowtousethemostcommonH5pageeditingtools.本章导读近年来，H5页面越来越多地出现在新媒体营销场景中，成了各行各业必不可少的新媒体营销工具。本章从H5页面的概念入手，介绍新媒体H5页面编辑的相关知识，包括H5页面的特点、类型、设计原则、设计方法，以及常见的H5页面编辑工具等内容。Introductiontothischapter

Inrecentyears,H5pageshaveincreasinglyappearedinnewmediamarketingscenariosandhavebecomeanindispensablenewmediamarketingtoolforallwalksoflife.StartingfromtheconceptofH5pages,thischapterintroducestherelevantknowledgeofH5pageeditinginnewmedia,includingthecharacteristics,types,designprinciples,designmethods,andcommonH5pageeditingtoolsofH5pages.新媒体H5页面概述OverviewofthenewmediaH5page什么是H5页面H5是指第5代超文本标记语言（hypertextmarkuplanguage5，HTML5），它既是当代万维网（worldwideweb，WWW）的核心语言，也可以指代与之相关的技术、协议和标准规范。H5页面专指基于H5标准规范、利用H5技术制作的新媒体媒介产品，其表现形式多种多样，如翻页、长页、一镜到底、横屏等，且大都针对移动互联网和便携设备设计。

H5referstothefifthgenerationofhypertextmarkuplanguage5(HTML5),whichisnotonlythecorelanguageofthecontemporaryworldwideweb(WWW),butalsoreferstotherelatedtechnologies,protocols,andstandardspecifications.

H5pagereferstonewmediamediaproductsbasedonH5standardsandspecificationsandmadebyusingH5technology,whichhasavarietyofexpressions,suchaspageturning,longpages,one-shottotheend,horizontalscreen,etc.,andmostofthemaredesignedformobileInternetandportabledevices.什么是H5页面表现形式丰富H5页面可将信息以非常生动的形式展现出来，给受众带来出色的视听体验，使受众对H5页面所表现的信息留下深刻的印象。跨平台性H5页面无须安装，也不需要第三方插件支持，使用浏览器即可打开，因此它可以轻易地移植到不同的操作系统与开放应用平台上。ExpressionsareabundantTheH5pagecanpresenttheinformationinaveryvividform,givingtheaudienceanexcellentaudio-visualexperienceandmakingtheaudienceimpressedbytheinformationpresentedontheH5page.Cross-platformTheH5pagedoesnotrequireinstallationorthird-partyplug-insupport,andcanbeopenedusingabrowser,soitcanbeeasilyportedtodifferentoperatingsystemsandopenapplicationplatforms.什么是H5页面交互性强H5页面几乎支持所有的交互方式，如触屏、陀螺仪、定位、拍照、录音、相册、VR、AR等成本低H5页面具有跨平台性，无须开发不同版本，大大降低了开发成本。H5页面体量轻、加载快，受众只需花费较少的流量、时间和学习成本，即可获得良好的视听体验，从而降低了其浏览成本。It'sinteractiveTheH5pagesupportsalmostallinteractionmethods,suchastouchscreen,gyroscope,positioning,photography,audiorecording,photoalbum,VR,AR,etcLowcostH5pagesarecross-platform,sothereisnoneedtodevelopdifferentversions,whichgreatlyreducesdevelopmentcosts.H5pagesarelightinsizeandfasttoload,soaudiencesonlyneedtospendlesstraffic,time,andlearningXitogetagoodaudio-visualexperience,thusreducingtheirbrowsingcosts.什么是H5页面易传播H5页面凭借有趣的故事、酷炫的视觉画面等，很容易引导受众主动点击“分享”按钮，从而促使H5页面更快、更广地传播。易维护H5页面无须安装，对其中元素的添加、删除、修改等操作都可以实时进行，维护非常方便。EasytospreadEasytomaintainWithinterestingstoriesandcoolvisuals,theH5pagecaneasilyguidetheaudiencetoactivelyclickthe"share"button,thuspromotingtheH5pagetospreadfasterandwider.TheH5pagedoesnotneedtobeinstalled,andtheaddition,deletion,andmodificationofelementsinitcanbecarriedoutinrealtime,whichisveryconvenientformaintenance.H5页面的常见类型1．品牌宣传型品牌宣传型H5页面的作用是塑造品牌形象，向受众传达品牌理念。如今的很多品牌宣传型H5页面会通过讲故事、谈情怀的形式展现品牌形象。图8-2品牌宣传型H5页面CommontypesofH5pages1.BrandpromotionTheroleofabrandedH5pageistoshapethebrandimageandconveythebrandconcepttotheaudience.Manyoftoday'sbrandedH5pagesshowcasetheirbrandimagethroughstorytellingandsentimentalconversations.Figure8-2BrandedH5pageH5页面的常见类型2．产品介绍型产品介绍型H5页面与产品文案类似，主要用于介绍和推销产品，激发受众的购买兴趣。与文案相比，H5页面的表现形式更加丰富，故可将产品的功能特性非常形象地展示出来。图8-3产品介绍型H5页面CommontypesofH5pages2.ProductintroductiontypeSimilartoproductcopy,productintroductionH5pagesaremainlyusedtointroduceandpromoteproductsandstimulatetheaudience'sinterestinpurchasing.Comparedwithcopywriting,theH5pagehasaricherformofexpression,sothefunctionalcharacteristicsoftheproductcanbedisplayedveryvividly.Figure8-3ProductintroductionH5page8.1.2H5页面的常见类型3．活动推广型活动推广型H5页面是一种专为推广活动而设计的H5页面类型。与品牌宣传型H5页面不同的是，活动推广型H5页面的营销主体是具有时效性的活动。图8-4活动推广型H5页面CommontypesofH5pages3.PromotionCampaignPromotedH5PagesareatypeofH5pagedesignedspecificallyforpromotionalevents.UnlikethebrandedH5page,themarketingbodyoftheeventpromotionH5pageisatime-sensitiveactivity.Figure8-4H5pageofthePromotionalH5H5页面的常见类型4．职位招聘型通过职位招聘型H5页面，求职者可更直观地了解企业环境、面貌、文化、待遇等信息，并利用H5页面的交互性，将自身基本信息和个人简历上传给招聘人员，使得整个招聘过程变得高效便捷。图8-5职位招聘型H5页面CommontypesofH5pages4.JobrecruitmentThroughtheH5page,jobseekerscanmoreintuitivelyunderstandthecompany'senvironment,appearance,culture,treatmentandotherinformation,andusetheinteractivityoftheH5pagetouploadtheirbasicinformationandpersonalresumetorecruiters,makingthewholerecruitmentprocessefficientandconvenient.Figure8-5PageH5ofJobRecruitmentH5页面的常见类型5．总结报告型总结报告型H5页面利用H5优秀的动画和图文展示效果，将原本枯燥的总结报告变得生动有趣。图8-5职位招聘型H5页面CommontypesofH5pages5.SummaryreporttypeTheH5summaryreportpageusesH5'sexcellentanimationandgraphicdisplayeffectstomaketheoriginallyboringsummaryreportvividandinteresting.Figure8-5PageH5ofJobRecruitmentH5页面的常见类型6．知识分享型H5页面的强交互性使其很适合展现一些知识性内容，因此，知识分享型H5页面十分常见。图8-5职位招聘型H5页面CommontypesofH5pages6.KnowledgesharingThestronginteractivityofH5pagesmakesthemverysuitablefordisplayingsomeknowledgecontent,soknowledge-sharingH5pagesareverycommon.Figure8-5PageH5ofJobRecruitmentH5页面的展现形式（1）基础图文式基础图文式H5页面制作较简单，可在页面中添加各种动画和音效，这使其相比纯粹的图文文案更胜一筹。（2）贺卡、邀请函式。贺卡、邀请函式H5页面既可以运用在个人社交场合，也可用于商业场合，如企业会议邀请、产品推广、品牌宣传等。（3）问卷测试式问卷测试式H5页面就是利用人们的好奇心和求知欲，通过问卷调查或测试问题，吸引受众不断探索、寻找最终答案。（4）趣味游戏式。通过简单易懂的规则、炫目或幽默的效果，以及社交圈排行榜等富有挑战性的竞赛形式，迅速激发受众的兴趣，从而潜移默化地实现品牌宣传等目的。ThepresentationoftheH5page(1)BasicgraphicstyleThebasicgraphicH5pageisrelativelysimpletomake,andyoucanaddavarietyofanimationsandsoundeffectstothepage,whichmakesitsuperiortopuregraphiccopy.(2)Greetingcardsandinvitations.Greetingcardsandinvitation-styleH5pagescanbeusedforbothpersonalandbusinessoccasions,suchascorporatemeetinginvitations,productpromotion,brandpromotion,etc.(3)QuestionnairetesttypeThequestionnaire-basedH5pageusespeople'scuriosityanddesiretolearntoattracttheaudiencetoexploreandfindthefinalanswerthroughquestionnairesortestquestions.(4)Fungames.Witheasy-to-understandrules,dazzlingorhumorouseffects,andchallengingcontestssuchassocialcircleleaderboards,youcanquicklyexciteyouraudienceandsubtlyachieveyourbranding.新媒体H5页面设计NewmediaH5pagedesignH5页面设计原则页面内容有条理性在设计H5页面时，要先对内容做一个整体的规划，分清内容的主次、并列关系，将内容有条理地展示在H5页面中页面内容简洁保证内容的简洁性，只展示最精准、最核心的内容，避免给受众带来拖沓、麻烦的观赏感受，防止用户流失。页面加载流畅可以通过减少页面数量、合理添加图片、以及精简过渡动画等方法来提高H5页面的加载速度，使其加载流畅。Thecontentofthepageisorganized

WhendesigninganH5page,youshouldfirstmakeanoverallplanforthecontent,distinguishthepriorityandjuxtapositionofthecontent,anddisplaythecontentinanorganizedmannerontheH5pageThecontentofthepageisconciseEnsuretheconcisenessofthecontent,onlydisplaythemostaccurateandcorecontent,avoidprocrastinationandtroublesomeviewingexperiencetotheaudience,andpreventuserloss.ThepageloadssmoothlyYoucanimprovetheloadingspeedofH5pagesbyreducingthenumberofpages,addingimagesreasonably,andstreamliningtransitionanimationstomakethemloadsmoothly.H5PageDesignPrinciplesH5页面设计方法与技巧增强交互性设计H5页面时，应设计一些交互元素（如多分支选择、绘图、摇一摇、重力感应、3D视图等），让受众参与其中，并在极具趣味性的交互中深入感知和体验H5页面所宣传的品牌或产品。-内容故事化在设计H5页面时，可将H5页面的内容以故事的形式展现，最好将故事设置为大多数受众都亲身经历过的场景，如校园、职场、家庭经历等。H5pagedesignmethodsandskillsEnhanceinteractivityStorytellingWhendesigninganH5page,youshoulddesignsomeinteractiveelements(suchasmulti-branchselection,drawing,shaking,gravitysensing,3Dview,etc.)toallowtheaudiencetoparticipateinitanddeeplyperceiveandexperiencethebrandorproductpromotedontheH5pageinaveryinterestinginteraction.-WhendesigninganH5page,youcanpresentthecontentoftheH5pageintheformofastory,anditisbesttosetthestoryasascenethatmostaudienceshavepersonallyexperienced,suchasschool,workplace,familyexperience,etc.H5页面设计方法与技巧借势营销在设计H5页面时，应当尽量将其与时下话题度较高的热点事件、节日、知名机构等相结合，借助它们的热度，使H5页面在短时间内获得大量浏览和转发，以达到更好的宣传效果。融入社交元素在H5页面中融入社交元素，使得H5页面得到裂变式传播。例如，在H5页面中加入好友排行榜、PK挑战等，激起受众的求胜欲和分享欲，能够主动将H5页面转发分享给他人。H5pagedesignmethodsandskillsTakeadvantageofmarketingIncorporateasocialelementWhendesigningtheH5page,weshouldtrytocombineitwiththecurrenthotevents,festivals,well-knowninstitutions,etc.,withthehelpoftheirpopularity,sothattheH5pagecangetalargenumberofviewsandforwardsinashortperiodoftime,soastoachievebetterpublicityeffects.IntegratesocialelementsintotheH5page,sothattheH5pagecanbepropagatedinafission-likemanner.Forexample,addingfriendleaderboards,PKchallenges,etc.totheH5pagecanarousetheaudience'sdesiretowinandshare,andtheycantaketheinitiativetoforwardandsharetheH5pagewithothers.常用的H5页面编辑工具CommonlyusedH5pageeditingtools易企秀易企秀是一款针对移动互联网营销的在线编辑工具，内置H5页面、海报、长页、表单、互动、视频六大品类的编辑器和数十款实用小工具。图8-8易企秀网页版的工作界面EasytoshowupYiqixiuisanonlineeditingtoolformobileInternetmarketing,withbuilt-ineditorsforsixcategories:H5pages,posters,longpages,forms,interactions,andvideos,anddozensofpracticalgadgets.Figure8-8TheworkinterfaceofthewebversionofE-Qixiu人人秀人人秀是一款专业的在线H5页面编辑工具，以操作简便、互动功能多而受到广大用户的广泛好评。人人秀汇集了数千位设计师和超过5万套H5页面的素材模板，可满足不同的使用场景，如会议邀请、企业招聘、学校招生、店铺活动等。Everybody'sshowRenrenxiuisaprofessionalonlineH5pageeditingtool,whichiswidelypraisedbyusersforitseasyoperationandinteractivefunctions.Renrenxiubringstogetherthousandsofdesignersandmorethan50,000setsofH5pagematerialtemplatestomeetdifferentusagescenarios,suchasconferenceinvitations,corporaterecruitment,schooladmissions,storeactivities,etc.MAKAMAKA是全球最受欢迎的在线H5页面编辑工具和平面设计工具之一，其用户超过了3000万。使用MAKA可轻松制作出宣传海报、电子传单、节日贺卡、婚礼请柬等H5页面。MAKA提供了多种精美的动画和炫酷特效，如刹车、向下滑入、左右翻转、向上飞入等，用户轻点鼠标即可制作出酷炫的动态效果。MAKAisoneofthemostpopularonlineH5pageeditingtoolsandgraphicdesigntoolsintheworld,withmorethan30millionusers.MAKAmakesiteasytocreateH5pagessuchasposters,e-flyers,holidaycards,weddinginvitations,andmore.MAKAprovidesavarietyofbeautifulanimationsandcoolspecialeffects,suchasbraking,slidingdown,flippingleftandright,flyingup,etc.,anduserscancreatecooldynamiceffectswithafewclicksofthemouse.凡科互动凡科互动是凡科网旗下的一款备受好评的在线H5页面编辑工具。它具有海量模板、丰富的控件和强大的动画效果，可帮助用户轻松制作出包含弹幕、720°全景、画中画等多种绚丽动效的H5页面。FancoInteractiveFankeInteractiveisahighlyacclaimedonlineH5pageeditingtoolownedbyF.Ithasalargenumberoftemplates,richcontrolsandpowerfulanimationeffects,whichcanhelpuserseasilycreateH5pageswithavarietyofgorgeousdynamiceffectssuchasbarrage,720°panorama,andpicture-in-picture.编辑实战

制作企业宣传手册Editinginaction

Productionofcorporatebrochures实战目标

使用本章提到的H5页面编辑工具易企秀，为金企鹅公司制作企业宣传手册，具体包括制作图文内容，设置地图、表单等控件，为H5页面设置翻页动画，为H5页面中的元素添加动画和背景音乐，发布H5页面等操作，页面最终效果如图8-9所示。

UsetheH5pageeditingtoolmentionedinthischapter,YiQixiu,tomakeacorporatebrochureforGoldenPenguin,includingmakinggraphiccontent,settingmaps,formsandothercontrols,settingpageturninganimationsforH5pages,addinganimationsandbackgroundmusictoelementsinH5pages,publishingH5pages,etc.,andthefinaleffectofthepageisshowninFigure8-9.Combatobjectives

图8-9金企鹅公司宣传手册（部分）Figure8-9GoldenPenguinbrochure(partial)实战步骤1．选择H5页面模板

步骤1登录易企秀。打开浏览器并访问易企秀官网（），单击右上角的“免费注册”按钮，按照提示注册并登录易企秀账号，自动进入“免费模板”页面。

步骤2选择H5页面模板。在“全部商品分类”组中选择“H5”选项，在打开的界面的搜索框中输入“企业宣传”，单击“搜索”按钮（或按“Enter”键），然后在下方搜索结果中选择所需H5页面模板Practicalsteps1.SelecttheH5pagetemplateStep1Step2LogintoE-Show.Openthebrowserandvisittheofficialwebsite(),clickthe"FreeRegistration"buttonintheupperrightcorner,followthepromptstoregisterandlogintotheE-EnterpriseShowaccount,andautomaticallyenterthe"FreeTemplate"page.SelecttheH5pagetemplate.Selectthe"H5"optioninthe"AllProductCategories"group,enter"CorporateCommunications"inthesearchboxthatopens,clickthe"Search"button(orpress"Enter"),andselectthedesiredH5pagetemplateinthesearchresultsbelow实战步骤2．制作H5页面内容

步骤1单击界面右上角的“工作台”按钮，进入易企秀的“工作台”界面。在“全部作品”组中选择刚刚购买的H5页面模板，然后单击“编辑”按钮，见图8-11。进入工作界面，画布上将默认显示该H5页面模板的封面。

步骤2单击画布上“LOGO”字样的图片，在右侧弹出的“组件设置”面板中单击“更换图片”按钮，如图8-12所示。Practicalsteps2.MakeH5pagecontentStep1Step2Clickthe"Workbench"buttonintheupperrightcorneroftheinterfacetoenterthe"Workbench"interfaceofE-Qixiu.Inthe"AllWorks"group,selecttheH5pagetemplateyoujustpurchasedandclickthe"Edit"button,asshowninFigure8-11.Whenyouentertheworkinterface,thecoveroftheH5pagetemplatewillbedisplayedonthecanvasbydefault.ClicktheimagewiththewordLOGOonthecanvasandclickChangeImageintheComponentSettingspanelthatpopsupontheright,asshowninFigure8-12.实战步骤2．制作H5页面内容图8-11单击“编辑”按钮图8-12单击“更换图片”按钮Practicalsteps2.MakeH5pagecontentFigure8-11ClickingEdit

Figure8-12ClickingChangeImage实战步骤2．制作H5页面内容

步骤3打开“图片库”面板，单击“本地上传”按钮，弹出“打开”对话框，选择本书配套素材“素材”/“第8章”/“实战”文件夹中的“封面-LOGO.png”图片，然后单击“打开”按钮，返回“图片库”面板，切换至“我的图片”选项卡，可看到图片已上传到易企秀的图片库中。

步骤4单击“封面-LOGO.png”图片，即可用该图片替换原图片。返回画布中，拖动图片四周的尺寸控制点调整其尺寸和位置，使其显示完全且大小适中。Practicalsteps2.MakeH5pagecontentStep4

Step3Openthe"ImageLibrary"panel,clickthe"LocalUpload"button,popupthe"Open"dialogbox,selectthe"Cover-LOGO.png"pictureinthe"Materials"/"Chapter8"/"ActualCombat"folderofthebook'ssupportingmaterials,andthenclickthe"Open"button,returntothe"ImageLibrary"panel,switchtothe"MyPictures"tab,youcanseethatthepictureshavebeenuploadedtothepicturelibraryofYiqixiu.Clickthe"Cover-LOGO.png"imagetoreplacetheoriginalimagewiththisimage.Backinthecanvas,dragthesizecontrolpointsaroundtheimagetoadjustitssizeandpositionsothatitappearsfullandappropriatelysized.实战步骤2．制作H5页面内容

步骤5双击“企业宣传册”文本框，按“Delete”键删除原内容，然后输入“金企鹅宣传手册”，在弹出的文本工具栏或“组件设置”面板中设置文本的字体、字号、颜色、对齐方式等参数。

步骤6参考步骤5的操作，对封面页的其他文字内容进行编辑，使其效果如图8-9（a）所示。Practicalsteps2.MakeH5pagecontentStep5Step6Double-clickthe"CorporateBrochure"textbox,pressthe"Delete"keytodeletetheoriginalcontent,andthenenter"GoldenPenguinBrochure",andsetthefont,fontsize,color,alignmentandotherparametersofthetextinthepop-uptexttoolbaror"ComponentSettings"panel.RefertoStep5toedittheothertextcontentonthecoverpagetomakeitlookasshowninFigure8-9(a).实战步骤2．制作H5页面内容

步骤7在工作界面右侧的“页面与图层管理”面板中切换至“页面管理”选项卡，选择“列表展示”选项，然后单击“2”页面，将画布内容切换至下一个H5页面（以下简称页面），如图8-15所示。

步骤8制作“公司简介”页面。参考前面的方法，对当前页面中的图片和文本进行编辑，使其效果如图8-16所示。Practicalsteps2.MakeH5pagecontentStep7Step8InthePages&Layerspanelontherightsideoftheworkspace,switchtothePageManagementtab,selecttheListoption,andclick2toswitchthecanvascontenttothenextH5page(hereinafterreferredtoasthepage),asshowninFigure8-15.Makea"CompanyProfile"page.EdittheimageandtextonthecurrentpageasshowninFigure8-16.实战步骤2．制作H5页面内容

图8-15切换至下一个H5页面图8-16“公司简介”页面效果Practicalsteps2.MakeH5pagecontentFigure8-15SwitchtothenextH5page

Figure8-16TheCompanyProfilepagelookslikethis实战步骤2．制作H5页面内容

步骤9在“页面与图层管理”面板中选中“3”页面，并将其拖动至“4”页面下方，调换两者的顺序。

步骤10参考前面的方法，将“3”页面制作为“发展历程”页面，将“4”页面制作为“企业文化”页面，Prac