《单元6.3 HTML5 应用制作和发布》由会员分享，可在线阅读，更多相关《单元6.3 HTML5 应用制作和发布（39页珍藏版）》请在金锄头文库上搜索。
1、模块六模块六 数字媒体技术数字媒体技术单元6.3 HTML5 应用制作和发布01 导入案例02 技术分析03 知识与技能04案例实现目 录ONTENTSONTENTS05练习与提高导入案例：导入案例：电子邀请函 新年联欢会还有一周就要举行了，大家都很期待，可请柬因为各种原因还没有送出去，这件事让外联小组犯了愁。消息传到了学网络应用技术的小王耳朵里，他提议使用电子邀请函，直接将电子邀请函通过微信发给被邀请人，既不失礼貌，又快捷方便，还环保。他的建议得到了大家的支持，很快，电子邀请函做出来了，如图所示。导入案例：导入案例：电子邀请函电子邀请函 任务中的电子邀请函，它的制作和运行都是在HTML5技术
2、平台基础上实现的。除此之外，邀请函中使用了文本、图像、音乐、动画等形式。因此，完成本任务主要涉及HTML5页面设计与制作，以及文本、图像等媒体编辑技术。技术分析技术分析一、一、HTML5HTML5简介简介二、二、HTML5HTML5页面设计页面设计三、三、HTML5HTML5页面编辑工具页面编辑工具知识与技能知识与技能 HTML5（hyper text markup language 5）即第5代超文本标记语言，针对移动互联网和便携设备设计。而超文本标记语言（HTML）一直被用作万维网（world wide web，WWW）的信息表示语言，使用HTML描述的文件需要通过web浏览器显示出效果。
3、HTML5页面具有表现形式丰富、跨平台性、互动性强、成本低、易传播、易维护等特点。一、一、HTML5HTML5简介简介产品介绍型产品介绍型与产品文案类似，产品介绍型HTML5页面主要用于介绍和推销产品。与文案相比，HTML5页面的表现形式更加丰富，可将产品的功能特性非常形象地展示出来。活动推广型活动推广型活动推广型HTML5页面是一种专为推广活动而设计的HTML5页面类型。活动都具有时效性，因此，活动推广型HTML5页面通常具有很强的互动性、话题性和吸引力，利于并引导受众主动分享和传播。总结报告型总结报告型总结报告型HTML5页面具有优秀的动画和图文展示效果，将原本枯燥的总结报告变得生动有趣。
4、职位招聘型职位招聘型通过职位招聘型HTML5页面，求职者可更直观地了解企业环境、面貌、文化、待遇等信息，同时利用HTML5页面的交互性，将求职资料直接上传给招聘人员，整个招聘过程变得高效便捷。知识分享型知识分享型HTML5页面的强交互性使其很适合展现一些知识性内容。通常，知识分享型HTML5页面一页展示一个步骤，受众可根据页面上的提示，通过各种交互形式学习知识。一、一、HTML5HTML5简介简介（一）HTML5页面的常见类型（一）HTML5页面的常见类型一、一、HTML5HTML5简介简介产品介绍型页面一、一、HTML5HTML5简介简介（一）HTML5页面的常见类型活动推广型页面一、一、H
5、TML5HTML5简介简介（一）HTML5页面的常见类型职位招聘型页面一、一、HTML5HTML5简介简介（一）HTML5页面的常见类型总结报告型页面（二）HTML5页面的展现形式 HTML5页面几乎支持所有的媒体形式，相同内容可通过不同形式进行展现，达到不同的效果。一般来说，HTML5页面最常见的展现形式包括基础图文式、贺卡式、邀请函式，问卷测试式和趣味游戏式等5种类型。一、一、HTML5HTML5简介简介（一）设计原则二、二、HTML5HTML5页面设计页面设计页面内容有条理页面内容有条理HTML5页面通常包含多个页面。无论页面长短，包含元素多少，都要按照一定顺序进行展示。如果HTML5页
6、面中包含的信息量太大，或页面之间的关联太复杂，都会增加受众的阅读压力。因此，在设计最初，要对内容做一个整体规划，分清内容主次，理清内容之间的关系，将内容有条理地呈现出来。页面内容要简洁页面内容要简洁设计HTML5页面时，应尽量保证内容的简洁性，一个页面只讲一件事，擅用小标题，只展示最精准、最核心的内容，避免给受众带来拖沓的观赏感受，流失用户。页面加载需流畅页面加载需流畅HTML5页面加载速度较快，但这也使得受众对其流畅性有了更高的期望。有研究显示，受众给HTML5页面的加载时间通常不超过5s。因此，在设计HTML5页面时，要合理控制页面、图片数量，并通过精简过渡动画等方法来保障HTML5页面的
7、加载速度，或者设置“跳过”按钮，使其加载流畅。（二）方法和技巧二、二、HTML5HTML5页面设计页面设计故事化故事化将HTML5页面的内容以故事的形式展现，以大多数受众都亲身经历过的场景为故事背景，容易引发受众内心共鸣，使其更乐于接受和转发。紧跟热点紧跟热点在设计HTML5页面时，要增强其话题性，可以将其与时下话题度较高的热点事件、节日等相结合，以达到更好的宣传效果。借助热点话题要把握好度，绝不可以肆意夸大，甚至歪曲事实。增强交互增强交互强大的交互性是HTML5页面的最大优势。因此，在设计HTML5页面时，设计一些交互元素（重力感应、3D视图、摇一摇、分支选择等）增加HTML5页面的趣味性。
8、在设计交互时，要保证交互简单易操作，避免让受众失去耐心和兴趣。融入社交元素融入社交元素在HTML5页面中融入杜交元素，使HTML5页面得到裂变式传播。例如在HTML5页面中加入分享按钮、挑战赛、好友排行榜等。（一）了解易企秀 易企秀是一款针对移动互联网营销的在线编辑工具，有网页版和手机APP版本。易企秀提供HTML5页面、海报、长页、表单、互动、视频六大品类的编辑器和数十款实用小工具。此外，易企秀还提供了大量精美的模板，包含企业宣传、活动邀约、品牌推广、数据收集、电商促销、人才招聘等多种情景，可为用户设计和制作HTML5作品提供参考和灵感。三、三、HTML5HTML5页面编辑工具页面编辑工具（
9、二）主要操作 1.启动易企秀网页版 在浏览器地址栏输入https:/并进入易企秀网页版首页。单击右上角“登陆”按钮，选择微信、QQ或手机号完成登陆。三、三、HTML5HTML5页面编辑工具页面编辑工具（二）主要操作 2.选择模板或空白创建 二者的区别不言而喻，起点不同。“选择模板”可以在模板原有基础上进行修改，主要是文字、图像等内容的修改，这样减少了大量工作，但在互联网中很容易发现相似款。“空白创建”则是从零开始进行设计、添加、修改素材等，纯粹的DIY，充分体现创作者的设计思路和制作技巧。三、三、HTML5HTML5页面编辑工具页面编辑工具（二）主要操作 2.选择模板或空白创建 无论是“选择模
10、板”还是“空白创建”，单击后将进入工作界面。三、三、HTML5HTML5页面编辑工具页面编辑工具（二）主要操作 易企秀的工作界面可以划分为四个区域。（1）工具栏：紧贴地址栏的部分，称为工具栏。l“文本”：在页面插入文本。输入文本内容，修改文字格式等。l“图片”：打开“图片库”，将图片插入页面，可以是网络图片，也可以是本地图片。使用本地图片时，需要先将图片上传，然后在“我的图片”中选择。图片插入后，会出现“组件设置”窗口，可以设置图片的样式、格式等。三、三、HTML5HTML5页面编辑工具页面编辑工具（二）主要操作 易企秀的工作界面可以划分为四个区域。（1）工具栏：紧贴地址栏的部分，称为工具栏。
11、三、三、HTML5HTML5页面编辑工具页面编辑工具l“音乐”：打开音乐库，可以为作品添加场景音乐，即作品的背景音乐。如果作品中有其他音乐或音效，建议不使用场景音乐。添加音频素材后不会出现设置窗口，但“音乐”菜单会出现下拉菜单，可更换、删除音乐等。（二）主要操作 易企秀的工作界面可以划分为四个区域。（1）工具栏：紧贴地址栏的部分，称为工具栏。l“视频”：平台支持两种在页面中插入视频的方式，一是“从视频库添加”，二是使用“外部链接”。前者的操作与前面插入图片的操作方法相似。后者则需要在“组件设置”中输入视频的通用代码（例如，腾讯视频中的“分享”，选择“嵌入代码”），并且只支持腾讯视频。视频插入后
12、，可以通过“组件设置”设置相关参数。三、三、HTML5HTML5页面编辑工具页面编辑工具（二）主要操作 易企秀的工作界面可以划分为四个区域。（1）工具栏：紧贴地址栏的部分，称为工具栏。l组件：通过“组件”可以为页面添加视觉、功能、表单、微信及活动相关组件，使页面具有交互、统计数据等功能。l智能组件：在页面中插入“立体魔方”“人脸识别”等智能交互。l特效：在页面中使用特效场景。三、三、HTML5HTML5页面编辑工具页面编辑工具（二）主要操作 易企秀的工作界面可以划分为四个区域。（1）工具栏：紧贴地址栏的部分，称为工具栏。三、三、HTML5HTML5页面编辑工具页面编辑工具l其他工具：“协作”主
13、要用于作品发布后协同工作，主要是查看、复制。“更多”的下拉菜单如图所示，其中“批量制作”可以基于页面元素对作品进行复制，即在复制作品前可以对每个页面中的元素进行筛选。（二）主要操作 易企秀的工作界面可以划分为四个区域。（1）工具栏：紧贴地址栏的部分，称为工具栏。三、三、HTML5HTML5页面编辑工具页面编辑工具l“预览和设置”:单击后会弹出设置面板，如图所示。主要对分享作品的标题、互动方式进行设置，还可对页面的整体效果进行预览。“预览和设置”设置面板（二）主要操作 易企秀的工作界面可以划分为四个区域。（1）工具栏：紧贴地址栏的部分，称为工具栏。三、三、HTML5HTML5页面编辑工具页面编辑
14、工具l“预览和设置”：设置后，可单击“保存”对作品进行保存，或单击“发布”打开“发布”设置面板，将作品分享至社交平台。“发布”设置面板（二）主要操作 （2）编辑区：编辑区是进行操作的“舞台”，也可以称为画布。按照选择创建的作品类型，这个舞台会有所不同，如图所示为HTML5页面的编辑区。三、三、HTML5HTML5页面编辑工具页面编辑工具HTML5页面的编辑区（二）主要操作 （3）素材面板：素材面板位于工作界面的左侧，提供了图文、页面、装饰性元素、艺术字等大量设计素材，这些素材可以直接单击添加到页面中。（4）设置面板：设置面板在工作界面的右侧，分为“页面设置”“图层管理”“页面管理”三个标签。l
15、“页面设置”主要设置页面的背景、音乐、滤镜和翻页效果，这里设置的音乐只在当前页面有效；l“图层管理”是对页面中应用的元素进行隐藏、锁定的设置；l“页面管理”主要是对整个页面进行复制、删除等操作。三、三、HTML5HTML5页面编辑工具页面编辑工具1.选择HTML5页面模板 案例实现案例实现选择HTML5页面模板。工作台页面左侧选择“创建设计”，在打开的页面选择HTML5的“模板商城”，在打开的界面的搜索框中输入“邀请函”，单击“搜索”按钮，然后在下方搜索结果中选择所需HTML5页面模板，进入模板详情页面。登录易企秀。登陆成功后直接进入“工作台”。1 12 21.选择HTML5页面模板 案例实现
16、案例实现单击“制作”按钮进入编辑工作界面。2 2编辑模板的工作界面单击画布上“LOGO”字样的图片，在右侧弹出的“组件设置”面板中单击“更换图片”按钮，更改为与主题适切的图片。返回画布中，拖动图片四周的尺寸控制点调整其尺寸和位置，使其显示完全且大小适 中。注：如果没有合适的图片，可以使用“在线制作”选项，打开海报编辑工作台制作一张适合的图片。制作完成后，要注意保存、下载到本地电脑。这样，我们就可以在“图片库”面板，单击“本地上传”按钮，弹出“打开”对话框，选择刚才保存下载的图片，然后单击“打开”按钮，返回“图片库”，切换至“我的图片”选项卡，可看到图片已上传到易企秀的图片库中。确保页面背景图片超出全面屏虚线框。如果没有，单击图片，拖曳边框进行放大。1 12 22.制作HTML5页面内容案例实现案例实现重复步骤3的操作，对封面页的其他文字内容进行编辑。双击“时间地点”文本框，修改文本框中的内容，输入“12月29日会议中心演艺厅”，在弹出的文本工具栏或“组件设置”面板中设置文本的字体、字号、颜色、对齐方式等参数。3 34 42.制作HTML5页面内容案例实现案例实现删除不需要的元素组件，完
