8.6 HTML5网页设计（课件）《网络编辑》（人民邮电出版社）

第8章 使用网络编辑工具 网络编辑：内容规划 文案创作 运营推广 1 目 录 CONTENTS 8.1 新媒体内容搜索引擎 8.7 本章实训 8.2 热门内容信息查询 8.3 内容编辑与排版 8.4 图片编辑 8.5 多媒体编辑 8.6 HTML5网页设计 2 8.6.1 HTML5网页的定义和作用 HTML5简称H5，它是针对超文本标记语言HTML的第五次修订，超文本是指页面内可以包含图片、超链接，甚至音乐、程序等非文字元素，而标记是指这些超文本必须由包含属性的开头与结尾标志来标记。HTML5网页对网络平台的宣传和增加曝光度都可以起到非常重要的作用，主要包括以下几点。 1 2 3 吸引用户主动分享，帮助网站快速吸粉 增加网站的曝光率 增强用户的活跃度和黏性 3 活动推广类 该类型的HTML5网页包含多种内容形式，如游戏、邀请函等，通过与用户互动，以及高质量和话题性的设计来提高传播效率。 品牌宣传类 总结报告类 该类型的HTML5网页更倾向于企业品牌形象塑造，以及向用户传达品牌的精神态度。 该类型的HTML5网页运用HTML5的互动技术优势来展示商品特性，从而帮助用户全方位了解商品，甚至吸引用户产生购买行为。 该类型的HTML5网页比较典型的案例就是支付宝十年账单，利用HTML5网页良好的互动体验令原本乏味的总结报告有趣、生动。 商品介绍类 8.6.2 HTML5网页的类型 01 02 03 04 05 06 表现 形式 场景型 测试型 展示型 视频型 礼物型 技术型 8.6.3 HTML5网页的表现形式 内容故事化 多用 场景 增加 互动 提升参与感 融入社交属性 将内容编辑成故事更容易引发用户的情感共鸣，提升HTML5网页的传播效果。。 将办公楼、住宅和地铁站等场景融入到HTML5网页中，既能带给用户真实熟悉的感受，又能唤起用户的认知，从而加深其对品牌的印象。 在HTML5网页中加入互动的元素，能让用户进一步感知体验宣传的品牌或商品，提高品牌的认知度和对商品的购买欲望。 结合品牌或商品本身的特性及用户的喜好进行参与机制的设置。 HTML5网页设计中应融入谈资、帮助、比较、炫耀、窥视等，能让用户分享的动机，借助受众的社交关系链进行传播推广。 8.6.4 HTML5网页的编辑技巧 8.6.5 在线HTML5网页编辑工具——易企秀 7 1 选择HTML5模板类型 易企秀是一款HTML5网页的编辑工具，它操作简单、易于上手，相当于移动版的PPT制作工具。下面将以制作某水果网站宣传HTML5网页为例，介绍易企秀的基本操作方法，其具体步骤如下。 8.6.5 在线HTML5网页编辑工具——易企秀 8 2 确定模板样式 8 8.6.5 在线HTML5网页编辑工具——易企秀 9 3 编辑模板中的文本对象 9 8.6.5 在线HTML5网页编辑工具——易企秀 10 4 在HTML5中插入组件 10 8.6.5 在线HTML5网页编辑工具——易企秀 11 5 设置组件的动画效果 6 对图片进行编辑 11 8.6.5 在线HTML5网页编辑工具——易企秀 12 7 替换图片 8 对文本框进行编辑 12 8.6.5 在线HTML5网页编辑工具——易企秀 13 9 应用单页模板 10 预览设置并发布 13 目 录 CONTENTS 8.1 新媒体内容搜索引擎 8.2 热门内容信息查询 8.3 内容编辑与排版 8.4 图片编辑 8.5 多媒体编辑 8.6 HTML5网页设计 8.7 本章实训 14 （1）假设本例只推广一种水果，因此需要将商家定位为一个网络店铺。 （2）宣传的内容包括该水果的产地、品质和卖点、购买须知、店铺简介等内容。 实训要求 8.7.1 制作网络店铺推广手册 实训步骤 （1）选择制作方式。一种是根据模板编辑，一种是全新创作，读者可以尝试用两种不同的方法来制作两个不同的推广手册。 （2）制作首页。首页中包括水果的主图，以及主要卖点和价格文字。 （3）制作商品介绍。通过图片、文字和视频等方式介绍水果，包括产地介绍，水果的主要特点和打折优惠活动，多使用图片，文字介绍尽量精炼。 （4）制作店铺介绍。展示实体店图片，以及员工和水果互动的图片。 （5）制作购买须知。向用户展示如何挑选、保存和购买水果，以及网购的注意事 项，并在最后添加二维码，以便于关注网店。 15 （1）创作详情页时，可以在其中加入水果的相关商品图片。 （2）详情页内容包括水果宣传的主题（或标明电商名称）、领券打折、推荐商品和新品上市4个主要部分，也可以根据需要增加内容。 实训要求 8.7.2 制作商品详情页 实训步骤 （1）制作主题区。先设置整个详情页图片的尺寸，创建空白的图片，然后为其添加主题区背景，从上到下依次为网店名称、商品卖点和折扣，最下面配上多种水果图片。 （2）制作优惠券区。利用形状或曲线制作优惠券区的标题（其他区域的标题风格与此相同），利用图形和文字制作优惠券。 （3）制作商品推荐区。最上边是标题，然后下面可以用不同的结构，如左右、上下和混合等，也可以采用不对称设计，推荐不同的水果，要配有图片和文字。 （4）制作新品区。最上边是标题，下面的商品都使用同一种排版样式，如都采用上边是图片下边是文字介绍的形式，或者左边放图片右边放文字介绍的形式。 16 $$