实训项目一 体验移动电子商务—— 手机购物及应用
实训项目二 安卓（Android）手机模拟器的安装和使用
实训项目三 二维码制作及应用
实训项目四 基本的移动Web网页制作
实训项目五 移动支付
实训项目六 微店搭建与运营
实训项目七 电脑、平板电脑手机响应式（自适应）Web设计
实训项目八 微信公众平台的搭建与运营
实训项目九 “今日头条”自媒体推广
实训项目十 H5易企秀制作与微营销
实训项目一 体验移动电子商务—— 手机购物及应用
一、实训目标
（1）通过手机淘宝购物，了解移动商务网店的基本购物流程。
（2）掌握移动电子商务手机购物及支付的方法。
（3）体验移动电子商务的基本应用。
二、实训环境
3G/4G Android或iOS智能手机，开通3G/4G网络或连接Wi-Fi。
三、实训背景知识—— 手机购物
手机购物是移动电子商务最基本的形式，是利用手机上网、实现网购的过程，移动通信进入3G/4G时代并已逐渐普及。手机购物让人们可以随时随地便捷地利用电子商务，满足人们可能随时随地产生的消费冲动。但这不等于手机网购可以轻松获得成功，因为用户需求的开发和使用习惯的培养是要花费时间和精力的。手机购物蕴含的巨大潜力，足以成为电子商务的另一个杀手级应用。其中，淘宝手机购物主要通过淘宝手机客户端完成，其依托淘宝网强大的自身优势，整合旗下团购产品聚划算和淘宝商城为一体，为用户提供每日最新的购物信息，同时具有搜索比价、订单查询、购买、收藏、管理和导航等功能，为用户带来方便快捷的手机购物新体验。淘宝手机购物流程如图1-8所示。
图1-8 淘宝手机购物流程
四、实训指导
1．淘宝手机客户端的下载安装及打开
（1）在淘宝网（http://www.taobao.com）首页单击“手机逛淘宝”链接进入手机淘宝下载页面，如图1-9所示。单击图1-9中符合自身设备的客户端，并用手机扫描弹出的二维码下载手机淘宝客户端软件，下载完成后在手机上安装，安装完成后在手机应用中将出现“手机淘宝”应用，如图1-10所示。
图1-9 手机淘宝下载页面 图1-10 手机淘宝应用
（2）打开“手机淘宝”，界面如图1-11所示。
图1-11 “手机淘宝”客户端的界面
2．宝贝（商品）搜索与选购
（1）宝贝或店铺搜索。手机淘宝为方便用户购物而提供了功能强大的站内分类索引及快速搜索功能，分类索引包括商品种类、品牌分类、功能分类和价格分区等，而快速搜索能够满足用户不具体的关键词搜索，让用户快速找到所需商品。在搜索框中输入所需商品关键字，这里搜索“茵曼”并进入店铺，商品展示如图1-12所示。
（2）宝贝选择。如果找到需要的商品，可以随时将该商品添加到“购物车”中，只要手机淘宝处于用户登录状态，“购物车”便会一直保存用户信息直到用户清空购物车为止，无须担心购物车中的商品信息丢失。单击“加入购物车”按钮后可以继续选择商品，如图1-13所示。
图1-12 店铺商品展示 图1-13 宝贝选择
（3）购物车管理及订单确认。若选购好了商品，用户可以通过查看购物车来修改购物车中的商品数量，或删除不需要购买的商品，然后单击“结算”，进行结算。单击“确认”按钮确认订单，如图1-14所示。
图1-14 购物订单确认
图1-15 支付宝信息设置
3．物流配送信息及支付方式设置
（1）物流配送信息设置 为保证用户所购买的商品能及时送到收货人手中，用户首先需要正确填写送货信息，包括送货区域、详细地址、收货人姓名、电话，以及送货时间、邮政编码等，并提交保存，系统将根据用户指定的送货区域匹配相应的配送方式及配送机构。
（2）支付方式设置 淘宝购物需要通过第三方支付平台—— 支付宝进行支付，因此需要按支付方式设置流程绑定银行卡与支付宝账号，以便支付所确认购买的宝贝，如图1-15所示。
4．订单支付
支付宝信息设置完成后，输入支付宝密码并单击“付款”按钮进行支付。
5．宝贝配送与签收
（1）宝贝配送。支付成功后，将进入物流配送环节，用户可以在手机上查看自己订单的物流信息及当前的配送状态，如图1-16所示。
（2）宝贝签收。当用户收到配送机构送达的货物后，请按以下步骤进行签收：
1）检查货物的外包装是否完好，包括封条是否完整、包装是否完好、有无拆开痕迹、有无进水痕迹等，若发现有类似迹象，立即拒收货物。
2）若货物外观无异常，打开包装检查包装内货物有无破损、单据是否齐全、单据商品信息是否与实物一致等，若发现有异常，请立即拒收货物，并联系网站客服反馈信息；若无异常请直接签收，货到付款的订单需要用户现场全额付款。
3）若用户在开包后因为货物异常或其他原因要求退货，请协助配送人员现场包装好货物，以免在货物返回过程中出现货物丢失或调包的情况。
6．信用评价
当签收货物且没有发现问题时，应通知支付宝向卖家付款，并对卖家进行评价，其中包括描述相符、物流服务、发货速度和服务态度四方面，如图1-17所示。
图1-16 宝贝物流信息 图1-17 信用评价
实训项目二 安卓（Android）手机模拟器的安装和使用
一、实训目标
（1）了解在电脑上安装使用手机模拟器的方法。
（2）了解手机模拟器的安装环境和配置要求。
（3）能够正确下载、安装、配置和使用手机模拟器。
（4）能够熟练使用手机模拟器模拟手机应用和页面浏览。
二、实训环境
（1）连接互联网的个人电脑，安装Windows 7或Windows 10操作系统。
（2）3G/4G Android智能手机，开通3G/4G网络或连接Wi-Fi。
三、实训背景知识
随着移动电子商务和手游行业的高速发展，作为电脑端与手机应用桥梁的Android或iOS手机模拟器，也已经变成了独立的行业，越来越多的Android或iOS手机模拟器出现在用户的视野中。其中Android手机模拟器处于主导地位，它能够模拟除了接听和拨打电话外的所有移动设备上的典型功能和行为。Android手机模拟器提供了大量的导航和控制键，可以通过鼠标或键盘单击这些按键来为用户的应用程序产生事件。同时它还有一个屏幕用于显示Android自带应用程序和用户自己的应用程序。为了便于模拟和测试应用程序，Android手机模拟器允许应用程序通过Android平台服务调用其他程序、访问网络、播放音频和视频、保存和传输数据、通知用户、渲染图像过渡和场景。Android手机模拟器同样具有强大的调试能力，如能够记录内核输出的控制台、模拟程序中断（如接收短信或打入电话）、模拟数据通道中的延时效果和遗失。因此，手机模拟器可以在电脑上模拟完成手机的绝大部分功能，是手机移动应用开发和测试的必备工具。目前，安卓手机模拟器较多，典型的包括网易MuMu、Bluestacks、雷电安卓模拟器、夜神安卓模拟器、逍遥安卓模拟器等。
本实训以网易MuMu模拟器为例，正确设置安装环境、下载安装MuMu模拟器，设置手机界面和应用手机模拟器。
实训任务如下：
l 下载安装MuMu模拟器。
图1-18 MuMu模拟器没有正确
设置使用环境的提示
l 设置MuMu模拟器。
l 安装手机App应用。
l 浏览手机网页。
四、实训指导
1．设置MuMu模拟器安装使用环境
MuMu模拟器正常运行需要开启VT（CPU虚拟化），关闭Hyper-V，并且安装DirectX，否则使用时会出现问题。如果在MuMu模拟器的使用时出现如图1-18所示的对话框，就需要进行下面的三个步骤。
（1）开启VT（Virtualization Technology，即虚拟化技术，可以扩大硬件的容量，简化软件的重新配置过程）。重新开机，在Windows系统启动之前按“Del”或“F12”等键进入电脑主板（BIOS）设置，将BIOS中的“Virtualization”、“Intel Virtual Technology”或者“Intel虚拟技术”设置为“Enabled”（开启）。图1-19为华硕电脑的VT设置。
图1-19 华硕电脑BIOS中的VT设置
（2）关闭Hyper-v（虚拟机）。开机进入Windows后，打开电脑的控制面板，选择控制面板的“程序”后再选择“打开或关闭Windows功能”，如图1-20所示。
图1-20 在控制面板中打开或关闭Windows功能
图1-21 取消勾选Hyper-V
在“打开或关闭windows功能”界面中取消勾选“Hyper-V”后单击“确定”按钮，如图1-21所示。然后重启电脑完成设置。
（3）安装DirectX 11。DirectX（Direct eXtension，简称DX）是由微软公司创建的多媒体编程接口。由C++编程语言实现，遵循COM，适合运行在Windows操作系统之上。最新版本为DirectX 12，但目前最常用的还是DirectX 11。
下载完成后解压并运行安装程序。在出现的欢迎界面中选择“我接受此协议”并单击“下一步”按钮，如图1-22所示，继续按照提示单击“下一步”按钮完成安装。
图1-22 安装DirectX 11
2．下载安装MuMu模拟器
（1）在电脑浏览器地址栏输入MuMu模拟器网址“http://mumu.163.com”进入MuMu模拟器页面，如图1-23所示，单击图中的“Win版下载”按钮下载安装MuMu模拟器。
图1-23 MuMu模拟器下载界面
安装完成后启动MuMu模拟器，效果如图1-24所示。
图1-24 MuMu模拟器安装及启动
（2）初始安装完成后，MuMu模拟器可以模拟手机和平板的正常功能了，默认的是平板模式。可以将其设置为手机竖屏模式，单击模拟器右上角的设置按钮
，选择“设置中心”，再选择“界面设置”，然后选择“自定义”，将宽度设为1 080，高度设为1 920后单击“保存并关闭”按钮，重新启动MuMu模拟器，如图1-25所示。
图1-25 MuMu模拟器通过界面设置更改为手机的竖屏模式
（3）App安装使用。可以在MuMu模拟器的应用中心中选择安装应用，也可以下载APK安装文件放到MuMu共享文件夹中，然后安装使用。例如，安装手机QQ，可以在MuMu模拟器中单击“应用中心”_“应用”_“通讯社交”，然后下载安装QQ，如图1-26所示。
图1-26 MuMu模拟器App安装使用
安装完成后，QQ图标就建立在MuMu模拟器桌面，手机QQ就可以使用了。按照同样的方法安装手机版搜狗浏览器。
（4）浏览自己设计的手机网页。在MuMu模拟器底部，图标
表示MuMu共享文件夹，需要测试的文件或网页放到该文件夹就可以进行测试。单击共享文件夹图标
，将自己设计的手机网页相关文件复制到该文件夹中，这里是eclayout.html、eclayout1.css和图像文件夹images，如图1-27所示。
图1-27 复制文件到共享文件夹
在手机桌面选择“系统应用”_“文件管理器”_
，单击“eclayout.html”文件，然后在“打开方式”对话框中，选择“搜狗浏览器”进行网页效果浏览，如图1-28所示。
图1-28 网页效果浏览
一、实训目标
（1）了解不同的二维码及其应用场景。
（2）掌握移动电子商务应用中不同种类的二维码制作方法。
（3）掌握二维码编辑及个性化方法。
（4）能够使用二维码进行移动营销。
二、实训环境
（1）连接互联网的个人电脑，安装Windows 7或Windows 8操作系统。
（2）3G/4G Android或iOS智能手机，开通3G/4G网络或链接Wi-Fi。
三、实训背景知识
自从二维码出现以后，无论走到哪里，线上还是线下，总能看到大量的二维码，有商家的，也有个人的。二维码的火爆预示着移动营销时代到来了，出现了很多免费的二维码制作软件，图2-7所示的是二维码大师软件界面。如何做好二维码营销，现在还处于摸索状态。本实训旨在从移动商务营销的角度出发，为读者深度解密二维码，并详细介绍二维码的具体实操方法，从中挖掘出二维码的真正潜能。
实训任务如下：
l 制作文本功能二维码。
l 制作网址二维码。
l 制作短信功能二维码。
l 制作Wi-Fi功能二维码。
l 制作电话功能二维码。
l 制作邮箱功能二维码。
l 制作地图功能二维码。
l 制作带Logo的二维码。
图2-7 二维码大师软件界面
四、实训指导
1．制作文本功能二维码
（1）输入网址“http://www.liantu.com”进入联图网页面，在左侧导航栏单击图标
，输入想要展示的内容，这里输入“O2O电子商务异军突起。”，输入文字完成后，直接在右侧产生相应文本二维码，如图2-8所示。
图2-8 制作文本二维码
当然，还可以在二维码下面设置不同风格的个性化文本二维码。
（2）用手机微信的“扫一扫”功能扫描该二维码，产生的扫描结果为“O2O电子商务异军突起。”，如图2-9所示。
图2-9 手机扫描生成的文本二维码后还原的文本信息
（3）如果单击右下方的“保存图片”按钮，可以将该二维码保存为图片形式，用于文本、海报和图片广告等营销设计中。
2．制作其他功能的二维码。
按照“1．制作文本功能二维码”的方法制作其他功能的二维码（名片功能二维码、网址二维码、短信功能二维码、Wi-Fi功能二维码、电话功能二维码、邮箱功能二维码、地图功能二维码），其中地图二维码制作效果如图2-10所示。
图2-10 制作地图二维码
使用手机扫描该二维码，将在手机浏览器中打开百度地图显示所设定的位置，如图2-11所示。
图2-11 手机扫描生成的地图二维码直接显示设定的位置
3．制作带Logo的二维码
准备好需要嵌入二维码的Logo图片，注意，Logo图片应该是高纠错等级的图片，嵌入的Logo不能超过二维码图案区域的30%。
（1）在联图网中制作一个地图二维码，在二维码右下方单击“嵌入Logo”选项卡，然后浏览并选择Logo图片文件，保存后即可生成带Logo的二维码，如图2-12所示。
图2-12 制作带Logo的二维码
（2）使用手机扫描该二维码，将在手机浏览器中打开百度地图显示所设定的位置，如图2-13所示。
图2-13 手机扫描生成的带Logo的二维码直接显示设定的位置
一、实训目标
（1）了解移动Web页面设计技术的发展现状。
（2）掌握HTML5和CSS3的新增标记及属性用法。
（3）能够使用HTML5和CSS3设计手机Web页面。
二、实训环境
（1）连接互联网的个人电脑，安装Windows7或Windows8操作系统，安装Dreamweaver和高版本浏览器。
（2）3G/4G Android或iOS智能手机，开通3G/4G网络或连接Wi-Fi。
图2-14 手机页面设计参考效果
三、实训背景知识
HTML5将成为新一代的Web技术标准，将改变整个Web应用领域的游戏规则（如实现移动商务应用的本地化，摆脱对Flash和Silverlight等浏览器插件的依赖），它在给移动Web应用带来无限可能性的同时，还能带来更快、更好、更炫的用户体验。CSS3也将为移动商务Web开发带来革命性的影响，很多以前需要JavaScript和Ajax框架才能实现的复杂效果（如多背景、圆角、3D动画等），现在使用CSS3就能简单地实现，极大地提高了移动网页设计人员的开发效率。本实训项目是使用HTML5和CSS3技术设计简单的移动电子商务页面，并在手机中浏览，效果如图2-14所示。
实训任务如下：
l 准备页面素材。
l 使用HTML5标记及属性设计手机页面结构。
l 使用CSS3设计手机页面的呈现效果。
l 在个人电脑和手机浏览器中进行页面的浏览。
四、实训指导
1．准备页面素材
本实训中的手机网页素材包括页面描述文字、图片和视频三个部分，先建立一个站点文件夹mobilepage，在mobilepage中再建立一个images文件夹，将上述准备好的文件都放在images文件夹中，如图2-15所示。
图2-15 准备页面素材
其中，body-bg.jpg是页面背景图片；nav-bar-bg.png是导航条分割线；takemetoyourheart.mp4和takemetoyourheart.webm是视频文件；vv.jpg是页面banner。
2．使用HTML5标记及属性设计手机页面结构
建立一个HTML5网页文件，保存文件index.html，使用Dreamweaver或记事本设计页面结构，代码如下：
|
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>手机网站首页示例</title> </head> <body> <div id="pagewrap"> <header id="header"> <hgroup> <h1 id="site-logo"><a href="#"> × × 数码</a></h1> <h2 id="site-description">站点描述</h2> </hgroup> <nav> <ul id="main-nav" class="clearfix"> <li><a href="#">首页</a></li> <li><a href="#">数码商城</a></li> <li><a href="#">技术服务</a> </li> <li><a href="#">数码论坛</a></li> </ul> </nav> <form id="searchform"> <input type="search" id="s" placeholder="搜索"> </form> </header> <div id="content"> <article class="post clearfix"> <header> <h1 class="post-title"><a href="#">xxxx介绍</a></h1> <p class="post-meta"> <time class="post-date" datetime="2015-05-15" pubdate> 2015-5-16 </time> <a href="#">宝贝列表</a> </p> </header> <figure class="post-image"> <img src="images/vv.jpg" /> </figure> <p> xxxx运动型摄像机为您提供专业的外观和拍摄风格，是婚礼、企业交流和教育机构的理想选择。这款摄录一体机重量轻，便于携带，其肩扛式整体设计意味着您的客户一眼就能看出您的专业精神。可以按高清和标清格式直接录制到可移动存储卡或 32GB 内置存储卡，从而增强工作流程灵活性。与内置存储卡和记忆卡相结合，支持"接力记录"和"同步记录"等录制功能。使用索尼的L系列InfoLithium电池NP-F970（选配）时，该摄像机可连续记录长达14小时，非常适合婚礼或商务会议等想要一直录制的场合。xxxx运动型摄像机是理想的入门级产品，适用于几乎任何类型的非线性工作流程。该流程是极为经济高效的DVD和蓝光内容生产套装，足以灵活地表达您的创意并满足客户的要求 </p> <h3>视频演示</h3> <video class="video" controls> <source src="images/takemetoyourheart.mp4"> <source src="images/takemetoyourheart.webm"> </video> </article> </div> <aside id="sidebar"> <section class="widget"> <h4 class="widgettitle">宝贝列表</h4> <ul> <li><a href="#">数码相机</a> (3)</li> <li><a href="#">数码摄像机</a> (23)</li> <li><a href="#">数码配件 </a>(18)</li> </ul> </section> <section class="widget clearfix"> <h4 class="widgettitle">店铺热销</h4> <ul> <li><a href="#"> × × × × 相机</a> </li> <li><a href="#"> × × × × 摄像机</a> </li> <li><a href="#"> × × × × 存储卡 </a></li> </ul> </section> </aside> <footer id="footer"> <p>2015-2020© × × × × 数码版权所有 <a href="#">公司介绍</a> </p> </footer> </div> </body> </html> |
使用Dreamweaver建立HTML5手机页面结构，如图2-16所示。
图2-16 在Dreamweaver下设计手机页面
3．使用CSS3设计页面效果
（1）建立样式表文件style.css和media-queries.css，放在站点文件夹mobilepage中，如图2-17所示。
图2-17 站点目录结构及CSS文件存放位置
（2）使用Dreamweaver或记事本设计style.css，代码如下：
|
/************************************************************************************ RESET *************************************************************************************/ html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object, a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span, strong, sub, sup, tt, var, legend, fieldset { margin: 0; padding: 0; } img, fieldset { border: 0; } img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } /************************************************************************************ GENERAL STYLING *************************************************************************************/ body { background: #0d1424 url(images/body-bg.jpg) no-repeat center top; font: .81em/150% 微软雅黑 Light，宋体; color: #666; } a { color: #026acb; text-decoration: none; outline: none; } a:hover { text-decoration: underline; } p { margin: 0 0 1.2em; padding: 0; } ul, ol { margin: 1em 0 1.4em 24px; padding: 0; line-height: 140%; } li { margin: 0 0 .5em 0; padding: 0; } h1, h2, h3, h4, h5, h6 { line-height: 1.4em; margin: 20px 0 .4em; color: #000; font-family:微软雅黑 Light; } h1 { font-size: 2em; } h2 { font-size: 1.6em; } h3 { font-size: 1.4em; } h4 { font-size: 1.2em; } h5 { font-size: 1.1em; } h6 { font-size: 1em; } input[type=search] { outline: none; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { display: none; } /************************************************************************************ STRUCTURE *************************************************************************************/ #pagewrap { width: 980px; margin: 0 auto; } /************************************************************************************ HEADER *************************************************************************************/ #header { position: relative; height: 160px; } /* site logo */ #site-logo { position: absolute; top: 10px; } #site-logo a { font: 30px/100% 微软雅黑; color: #fff; text-decoration: none; } #site-description { font: italic 100%/130% 宋体; color: #eee; position: absolute; top: 55px; } #searchform { position: absolute;right:10px;bottom: 6px;z-index: 100;width: 160px;} #searchform #s { width: 140px; float: right;background: #fff;border:none;padding: 6px 10px; border-radius: 5px; box-shadow: inset 0 1px 2px rgba(0,0,0,.2); transition: width .7s; } /************************************************************************************ MAIN NAVIGATION *************************************************************************************/ #main-nav { width: 100%;background: #ccc;margin: 0; padding: 0; position: absolute; left: 0; bottom: 0; z-index: 100; background: #6a6a6a url(images/nav-bar-bg.png) repeat-x; background: linear-gradient(-90deg, #b9b9b9, #6a6a6a); border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4); } #main-nav li { margin: 0; padding: 0; list-style: none; float: left; position: relative; } #main-nav li:first-child { margin-left: 10px; } #main-nav a { line-height: 100%;font-weight: bold;color: #fff;display: block;padding: 14px 15px; text-decoration: none; text-shadow: 0 -1px 0 rgba(0,0,0,.5); font: 1em/110% 微软雅黑 Light; } #main-nav a:hover { color: #fff;background: #474747; background: linear-gradient(-90deg, #282828, #4f4f4f); } /************************************************************************************ CONTENT *************************************************************************************/ #content { background: #fff;margin: 30px 0 30px;padding: 20px 35px;width: 600px;float: left; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.4); } .post { margin-bottom: 40px; } .post-title { margin: 0 0 5px; padding: 0; font: 26px/120% 微软雅黑; } .post-title a { text-decoration: none; color: #000; } .post-meta { margin: 0 0 10px; font-size: 90%; } .post-image { margin: 0 0 15px; } /************************************************************************************ SIDEBAR *************************************************************************************/ #sidebar { width: 280px;float: right; margin: 30px 0 30px; } .widget { background: #fff; margin: 0 0 30px; padding: 10px 20px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.4); } .widgettitle { margin: 0 0 5px;padding: 0; } .widget ul { margin: 0; padding: 0; } .widget li { margin: 0; padding: 6px 0; list-style: none; clear: both;border-top: solid 1px #eee; } .widget .flickr_badge_image { margin-top: 10px; } .widget .flickr_badge_image img { width: 48px;height: 48px;margin-right: 12px; margin-bottom: 12px; float: left; } /************************************************************************************ FOOTER *************************************************************************************/ #footer { clear: both;color: #ccc;font-size: 85%; } #footer a { color: #fff;} /************************************************************************************ CLEARFIX *************************************************************************************/ .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } .clearfix { display: block; zoom: 1; } |
（3）使用Dreamweaver或记事本设计media-queries.css，代码如下：
|
.video { width: 100%; height: auto; min-height: 300px; } #pagewrap { width: 95%; } #header { height: auto; } #searchform { position: absolute; top: 5px;right: 0; z-index: 100;height: 40px; } #searchform #s { width: 70px; } #searchform #s:focus { width: 150px; } #main-nav { position: static; } #site-logo { margin: 15px 100px 5px 0; position: static; } #site-description { margin: 0 0 15px; position: static; } #content { width: auto; float: none; margin: 20px 0; } #sidebar { width: 100%; margin: 0; float: none; } #sidebar .widget { padding: 3% 4%; margin: 0 0 10px; } @media screen and (max-width: 480px) { html { -webkit-text-size-adjust: none; } #main-nav a { font-size: 90%; padding: 10px 8px; } |
（4）使用Dreamweaver或记事本设计在index.html页面文件中增加并链接上述样式文件的代码，放在<head>标记中，代码如下（粗体部分）：
|
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>手机网站首页示例</title> <!-- main css --> <link href="style.css" rel="stylesheet" type="text/css"> <!-- media queries css --> <link href="media-queries.css" rel="stylesheet" type="text/css"> </head> <body> <div id="pagewrap"> …… |
4．在个人电脑和手机浏览器中进行浏览
在个人电脑的浏览器中的预览效果如图2-18所示，在手机浏览器中的预览效果如图2-19所示。
图2-18 手机页面在个人电脑中的浏览效果 图2-19 手机页面在手机中的浏览效果
实训项目五 移动支付
一、实训目标
（1）了解移动支付相关知识。
（2）通过移动支付项目，了解移动支付的基本流程。
二、实训环境
（1）Android或iOS智能手机，开通3G/4G网络或连接Wi-Fi
（2）个人身份证。
三、实训背景知识
移动支付是指用户通过移动终端设备（通常是手机），对所消费的商品或服务进行账务支付的一种服务方式。它的主要原理是用户通过移动设备、互联网或者近距离传感直接或间接向银行金融机构发送支付指令，产生货币支付和货币转移行为，从而实现移动支付功能。移动支付将移动终端设备、互联网、移动应用提供商以及金融机构相结合，为用户提供货币支付等金融业务。它是移动金融服务的一种，是移动商务的重要环节。
移动支付具有以下三个方面的特点：
1．移动性
由于移动终端具有特定服务实现的随身性和极好的移动性，可以使使用者从长途奔波到指定地点办理业务的束缚中解脱出来，摆脱支付实现的营业厅特定地域限制。
2．实时性
移动通信终端和互联网平台的交互取代了传统的人工操作，使移动支付不再受限于相关金融企业、商家的营业时间限制，实现了全天候的实时服务。
3．便捷性
移动支付同时具有缴费准确、无须兑付零钱、快捷、多功能、全天候服务、网点无人值守的便捷性。
移动支付按照商业模式可以分为以下三类：①以金融机构为主体的移动支付，主要指的是金融机构提供的手机银行服务；②以移动终端设备提供商为主体的移动支付，主要指的是移动终端设备提供商，如苹果公司提供的Apple Pay服务；③以第三方支付机构为主体的移动支付，主要指的是一些具有实力的第三方经济体通过与不同的银行进行签约的方式提供交易平台，如支付宝、微信支付等，整个交易是在第三方支付平台的介入下进行的，责任明晰，分工明确。
四、实训指导
（一）招商银行手机银行
1．简介
招商银行手机银行是专门为智能手机和移动终端客户量身打造的移动金融服务平台，为广大客户提供全天候银行金融服务的自助理财系统。新版招商银行手机银行创新推出理财频道、智能提醒、闪电贷、收支智能分类以及财经资讯参考频道等，为用户提供丰富实用的金融服务。
其常用金融服务功能如下：
账户管理：一卡通、信用卡账户查询、交易查询、密码管理、挂失、ATM/POS限额修改等。
自助转账：转一卡通、信用卡、存折、他行账户，定活互转、银证转账、通知存款转账等。
投资管理：基金查询、基金申购赎回、理财专户管理、证券行情、受托理财购买赎回、银证转账等。
信用卡管理：信用卡额度管理、交易明细查询、还款设置、积分管理等。
一卡通、信用卡自助缴费：缴手机费、电话费等其他费用。
外汇管理：外汇购汇、外汇结汇。
2．下载招商银行App
（1）登录招商银行网站“http://www.cmbchina.com”，在右边“手机银行”选项卡中单击“个人手机银行”选项。招商银行官方网站如图3-8所示。
图3-8 招商银行官方网站
图3-9 招商手机银行客户端
安装二维码入口
（2）根据自己的手机类型（Android、iPhone），选择下载手机银行客户端，这里以Android系统的智能手机为例，有如下两种方法，选择其一下载并安装招商银行手机银行客户端。
1）使用安卓手机上网登录手机一网通http://m.cmbchina.
com，选择手机银行Android版直接下载安装。
2）使用手机扫描如图3-9所示的二维码直接打开链接下载。
3．招商银行手机银行注册
用户可以通过手机银行客户端自助注册，也可以通过个人网银或到营业网点柜台签约开通。下面以客户端自助注册进行说明，如图3-10所示。
（1）准备好招商银行借记卡和信用卡等，在手机中打开已经下载好的招商银行客户端，进入登录界面，选择“注册一网通”。
（2）输入手机号和验证码，单击“下一步”。
图3-10 招商银行手机注册
4．招商银行手机银行的使用
（1）在手机客户端登录招商银行手机银行，选择“转账”功能，然后选择“银行账号转账”，即可实现手机转账，如图3-11所示。
图3-11 招商银行手机转账
（2）单击“城市服务”，选择“话费流量”，尝试手机缴费。
（3）尝试招商银行手机银行的其他功能。
（二）手机支付宝
1．简介
支付宝（中国）网络技术有限公司是国内领先的第三方支付平台，是阿里巴巴集团的关联公司。支付宝致力提供“简单、安全、快速”的支付解决方案。支付宝公司从2004年建立开始，始终以“信任”作为产品和服务的核心。目前，支付宝已发展成为融合了支付、生活服务、政务服务、社交、理财、保险、公益等多个场景与行业的开放性平台。除提供便捷的支付、转账、收款等基础功能外，还能快速完成信用卡还款、充话费、缴水电煤费。通过智能语音机器人一步触达上百种生活服务，不仅能享受消费打折，跟好友建群互动，还能轻松理财，累积信用。
支付宝交易是指买卖双方使用“支付宝”软件系统，且约定买卖合同项下的付款方式为通过该公司于买方收货后代为支付货款的中介支付。即在交易过程中，买方将货款支付给第三方的支付宝，待买方收到货物后，支付宝再将货款支付给卖家，这样可以避免货款直接支付给卖家后，卖家不发货的风险。
支付宝的主要功能如下：
支持余额宝，理财收益随时查看。
支持各种场景关系，群聊群付更方便。
提供本地生活服务，买单打折尽享优惠。
为子女父母建立亲情账户。
随时随地查询淘宝账单、账户余额、物流信息。
异地跨行转账，信用卡还款、充值、缴水电煤气费。
行走捐，支持接入iPhone健康数据，可与好友一起健康行走及互动，还可以参与公益。
2．下载支付宝App
（1）登录支付宝网站“https://mobile.alipay.com/index.htm”，如图3-12所示，在页面上单击“立即下载”选项。
图3-12 支付宝页面
（2）可以选择手机扫码下载，也可以根据自己的手机类型（Android、iPhone），选择下载支付宝手机客户端，如图3-13所示。
图3-13 手机扫码下载支付宝手机客户端
3．注册支付宝
使用支付宝支付服务需要先注册一个支付宝账户，分为“个人账户”和“企业账户”两类。
（1）登录支付宝官方网站“https://www.alipay.com”，在页面上单击“立即注册”选项。
（2）选择“同意”。
（3）根据自己的情况选择邮箱或者手机号注册。
（4）根据提示设置身份信息和支付方式。
用户使用支付服务需要实名认证是央行等监管机构提出的要求，实名认证之后可以在淘宝开店，增加更多的支付服务，更重要的是有助于提升账户的安全性。
实名认证需要同时核实会员身份信息和银行账户信息。
2016年7月1日开始，实名认证不完善的用户，其余额支付和转账等功能会受到限制。
需要注意的是，支付宝账户有两个密码，登录密码和支付密码。登录密码是用来登录支付宝账户的密码通常在确认付款的时候才会用到。为了保护账户安全，建议务必设置不一样的支付密码和登录密码。但是如果注册淘宝时选择同时创建支付宝账户，那么这个账户的支付密码就是注册淘宝时的密码。在淘宝购物时，必须绑定淘宝账户和支付宝账户。
4．支付宝的主要功能
手机支付宝的主界面如图3-14所示。
（1）转账。在主界面单击“转账”功能，转账可以“转给我的朋友”，“转到支付宝账户”以及“转到银行卡”，如图3-15所示。
（2）生活缴费。可以缴纳水电燃气费、有线电视费、固话费、宽带费、物业费和暖气费等。
（3）信用卡还款。单击界面的“信用卡还款”，可以免费查询信用卡账单、免费还款，还有自动还款/还款提醒等增值服务。
（4）付款。线上付款的流程是，拍下宝贝→确认付款→收银台→卖家发货→确认收货→评价。
其中有九种付款方式供网购选择，分别是快捷支付、网上银行、余额支付、找人代付、货到付款、信用卡分期、网点支付、消费卡支付和国际信用卡支付。
线下付款，单击界面上方的“扫一扫”，扫描商家的二维码进行付款；也可以单击“付钱”，让商家扫描付款二维码进行付款。线下付款无须开通网上银行。
（5）余额宝。余额宝是支付宝推出的理财服务，但也能用于日常的购物、信用卡还款等操作。单击界面的“余额宝”。可以把绑定的银行卡里的资金或支付宝的余额转入余额宝，也可以把余额宝里的资金转出到银行卡或余额。
（6）尝试支付宝的其他功能。
图3-14 手机支付宝主界面 图3-15 手机支付宝转账界面
5．支付宝的安全保护
为了保障支付宝账户安全，应启用双密码保护，注册时，填写不一样的登录密码和支付密码，这相当于给账户加了两把坚固的“锁”。尤其是支付密码，能保护用户的资金安全。另外，要绑定手机号以帮助用户找回密码、管理安全产品等，更能实时接收变动信息。
（三）微信支付
1．简介
微信支付是集成在微信客户端的支付功能，用户可以通过手机完成快速的支付流程。微信支付以绑定银行卡的快捷支付为基础，向用户提供安全、快捷、高效的支付服务。目前微信支付已实现公众号支付、App支付、扫码支付、刷卡支付和微信买单，并提供企业红包、代金券、立减优惠等营销新工具，满足用户及商户的不同支付场景。
2．绑定银行卡
（2）进入“钱包”选项后，单击右上角“银行卡”，进入“银行卡”选项后，单击“添加银行卡”。
（3）根据提示输入银行卡的持卡人姓名和卡号。
（4）填写卡类型、手机号码，进行绑定。
（5）手机会收到一条附带验证码的短信，填写后确认。
（6）输入两次，完成设置支付密码，银行卡绑定成功，如图3-16所示。
图3-16 微信绑定银行卡
3．支付场景
（1）公众号支付。公众号支付是指用户在微信中打开商户的H5页面，商户在H5页面通过调用微信支付提供的JSAPI接口调起微信支付模块来完成支付。适用于在公众号、朋友圈、聊天窗口等微信内完成支付的场景。操作流程是：在公众号内商品消息推送上选购商品，商品下单，输入密码，使用微信支付。
卖家申请流程：申请公众号→申请微信支付商户号→在线签署协议。首先，前往微信公众平台注册公众号，选择账号类型为服务号（政府或媒体订阅号），并完成微信认证。其次，提交资料申请微信支付，待资料审核通过后，前往商户平台完成账户验证。最后，在线完成协议签署，即开启资金结算功能，启动设计和开发。
（2）App支付。App支付是指商户通过在移动端应用App中集成开放SDK调起微信支付模块来完成支付。适用于在移动端App中集成微信支付功能的场景。操作流程是：在App内提交订单，确认商品信息，输入密码，使用微信支付，页面显示支付成功。
卖家申请流程：创建App→申请微信支付商户号→在线签署协议。首先，前往开放平台注册成为微信开放平台开发者，完成微信认证和创建App并通过审核。其次，提交资料申请微信支付，待资料审核通过后，前往商户平台完成账户验证。最后，在线完成协议签署，即开启资金结算功能，启动设计和开发。
（3）扫码支付。扫码支付是指商户系统按微信支付协议生成支付二维码，用户再用微信“扫一扫”来完成支付。适用于电脑端网站支付、实体店单品等场景。操作流程是：使用微信扫描商品二维码，确认商品信息，输入密码，使用微信支付。
卖家申请流程：申请公众号→申请微信支付商户号→在线签署协议。首先，前往微信公众平台注册公众号，选择账号类型为服务号（政府或媒体订阅号），并完成微信认证。其次，提交资料申请微信支付，待资料审核通过后，前往商户平台完成账户验证。最后，在线完成协议签署，即开启资金结算功能，启动设计和开发。
（4）刷卡支付。刷卡支付是指用户展示微信钱包内的“刷卡条码/二维码”给商户，经系统扫描后直接完成支付。刷卡支付适用于线下面对面收银的场景，如超市、便利店等。操作流程是：打开微信→我→钱包→收付款，向收银员出示条码，收银员扫码，消费者支付成功。
卖家申请流程：申请公众号→申请微信支付商户号→在线签署协议。首先，前往微信公众平台注册公众号，选择账号类型为服务号（政府或媒体订阅号），并完成微信认证。其次，提交资料申请微信支付，待资料审核通过后，前往商户平台完成账户验证。最后，在线完成协议签署，即开启资金结算功能，启动设计和开发。
图3-17 扫码提交资料
（5）微信买单。微信买单是一款可自助开通、免开发的微信支付收款产品。微信买单为中小商户、多门店商户提供了双重模式收款、店员管理、收款通知、简易对账等功能，帮助商家更好地经营店铺。适用于无开发能力的商户。
卖家申请流程：扫码提交资料→回填打款金额→使用微信买单。首先，扫描下方二维码（如图3-17所示），在手机端完成填写并提交。其次，待资料审核通过后，在手机端回填打款金额，完成微信买单的开通。最后，在微信买单主页，添加门店、设置店员，申请官方物料或打印收款二维码摆放在收银台处。
（四）苹果支付（Apple Pay）
1．简介
Apple Pay是苹果公司发布的一种基于NFC的手机支付功能，于2014年10月20日在美国正式上线。2016年2月18日凌晨5点，Apple Pay业务在中国上线。
苹果支付服务采用近场通信技术，用户可用苹果手机进行免接触支付，免去刷信用卡支付步骤。用户的信用卡、借记卡信息事先存储在手机中，用户将手指放在手机的指纹识别传感器上，将手机靠近读卡器，即完成支付。
Apple Pay的特点：
（1）免现支付很便捷。Apple Pay简单易用，并且支持日常所用的多款Apple设备，无论在店里还是App中，用户都可安心支付。与以往许多支付手段相比，Apple Pay更加简单易用，也更为安全。
（2）店内支付很轻松。在iPhone或Apple Watch上使用Apple Pay付款，免去了许多烦琐的支付步骤。让用户无须在收银台花费更多时间，便可完成消费。
（3）App内支付很便捷。可以在各类App中使用Apple Pay进行消费支付。无论是支付车费、订购外卖，还是购买一双新运动鞋，只需轻触一下，即可快速、轻松又安全地完成付款。
（4）隐私及安全保护。用Apple Pay支付很安全。在进行支付时，Apple Pay会使用一个设备特定号码和一个独有的交易代码。因此，用户的卡号从来都不会存储到其设备或苹果的服务器上。在进行付款时，Apple Pay也从来不会将用户的卡号共享给商家，以保护用户的购物隐私。
当用户使用借记卡或信用卡支付时，Apple Pay不会储存可以对用户进行追踪的交易信息。
（5）一个“钱包”全包揽。登机牌、各种票券，还有用户的借记卡、信用卡和商店卡都能存放在“钱包”App中。Apple Pay支持国内众多银行的大多数信用卡和借记卡，只需把适用的卡添加至“钱包”App，用户就能照样享受该卡的积分和优惠。
2．使用方法
iPhone、iPad、Apple Watch或Mac都可以添加银行卡使用Apple Pay，下面以iPhone7为例演示如何设置Apple Pay。
使用Apple Pay需要在苹果系统自带的“钱包”APP里添加银行卡。iPhone用户进入“钱包”后，单击屏幕右上方的+号，再单击“继续”就可进入申请页面，然后将银行卡正面放置在iPhone摄像头前，使卡面出现在屏幕的提示框内，系统会自动识别卡号，当然也可以手动输入卡号，接下来需要手动输入姓名、卡片有效期与安全码，还要阅读业务须知并选择接受。添加卡片成功后需激活才能使用，客户要确认手机号，并接收和输入验证码，才能成功激活。
同一台设备可以添加多张银行卡。首张添加卡即为默认卡。客户可以在“钱包”中通过长按卡片并将该卡排列为首位的方式将该卡设为默认付款卡，也可在“设置”的“钱包”与“Apple Pay”功能中设置默认付款卡。
使用Apple Pay不需要手机接入互联网，也不需要点击进入App，甚至无须唤醒显示屏，只要将iPhone靠近有银联闪付标志的读卡器，并将手指放在HOME键上验证指纹，即可进行支付。也可以在iPhone处于黑屏锁定状态时，轻点两下主屏幕按钮进入“钱包”，快速进行购买。如果交易终端显示需要输入密码，还需要输入银行卡的交易密码。只需一两秒钟就可以完成Apple Pay支付。
3．使用地点
在商店、餐厅、酒店以及众多消费场所，都可使用Apple Pay进行支付。用户还可以在iPhone和iPad上的各类App内使用Apple Pay。
线下结账时，请留意是否有Apple Pay标志和银联云闪付标志二者中的任意一个，如没有，请询问店家是否可使用Apple Pay。
实训项目六 微店搭建与运营
一、实训目标
（1）了解微店相关知识。
（2）熟悉常见的微店平台。
（3）了解微店的搭建与运营。
二、实训环境
（1）Android或iOS智能手机，开通3G/4G网络或连接Wi-Fi。
（2）连接互联网的电脑，安装Windows7或Windows8的操作系统。
三、实训背景知识
微店又称移动端店铺，是一种能够让人们在手机App里浏览的同时进行购买的手机App平台。同时，它也是给中小企业提供移动零售网店入驻、经营、商品管理、订单管理、物流管理、客户管理等服务的平台。微店是零成本开设的小型网店，是电子商务创业的新形式，具有零成本、无库存、无物流的优势。比较常见的微店平台有微信公众平台的微信小店、有赞的微商城、口袋购物的微店和微盟旺铺等。
2014年5月29日，微信公众平台宣布正式推出“微信小店”，将形形色色的小店“搬进”了微信里，微信小店的开通方式比较简单，只要是已经进行了微信认证的微信公众服务号，即可自助申请。“微信小店”基于微信支付，通过微信公众平台来售卖商品，可实现包括开店、商品上架、货架管理、客户关系维护、维权等功能。目前“微信小店”不收取任何费用，但是商家在开微信小店前要开通微信支付功能，因为微信小店只能用微信支付，不能使用支付宝、信用卡等其他支付方式，这对个人商家来说，无疑提高了进入的门槛。
2014年11月27日，“口袋通”更名为“有赞”，是帮助商家在微信上搭建微信商城的平台，提供店铺、商品、订单、物流、消息和客户的管理模块，同时还提供丰富的营销应用和活动插件。“有赞”致力打造“微商城系统+服务商平台+分销平台”。“有赞”在刚推进市场时入驻是免费的，获得了小而美的商家青睐，但是从2016年8月起，入驻“有赞”需要交纳费用，微商城基础版是4 800元/年，可以满足品牌展示，实现小成本试水电商业务。微商城专业版是9 800元/年，可以提供更多营销工具，以带来流量与销量。还有进阶版15 800元/年，提供更多经营渠道，并生成专享小程序抢占市场红利。
“微盟旺铺”是一个专门针对微信公众号提供营销推广服务的第三方平台，是目前国内最大的微信开发服务商。“微盟”的主要功能是针对微信商家公众号提供与众不同的、有针对性的营销推广服务。通过“微盟旺铺”，用户可以轻松管理自己的各类微信信息，对微信公众号进行维护，开展在线发放优惠券、抽奖、刮奖、派发会员卡、打造微官网、开启微团购等多种活动。
四、实训指导
微店的设置远没有淘宝网店那样复杂，无论是前期准备，还是安装注册、店铺优化，都可以在一部手机上随心玩转。下面将以口袋购物的微店为例，简要介绍微店的搭建与运营。
1．注册微店账号
注册微店账号有两种方式，一种是电脑端的注册，另一种是手机端的注册。这里以电脑注册微店账号为例。电脑端是通过网页来注册，首先进入微店官方网站“https://www.weidian.com”单击“注册”，整个注册过程需要通过注册账号、选择主体类型和填写相关信息三步完成。
（1）通过手机号注册账号。分别进行填写手机号、图形验证码、短信验证码，设置密码和确认密码等操作。
（2）选择主体类型（如个人或企业），个人商家选择个人类型。
（3）填写“店铺信息”，上传照片，输入店铺名称和店铺介绍。单击下一步，即开店成功，如图4-9所示。
图4-9 微店注册成功后电脑端页面
提醒：注册时要填写真实信息，若注册姓名与身份证上的姓名和银行卡开户人不一致，会导致提现失败。如需更改个人注册信息，请登录“http://d.weidian.com”。
2．微店实名认证
根据国家《网络交易管理办法》，应监管部门要求，微店对卖家进行实名制核实，实名认证有利于确定商家身份，营造更安全的网络交易环境，避免不法分子通过网络欺骗消费者。注册成功后，卖家需要进行实名认证才能继续使用微店的其他功能，如图4-10所示。
按照页面提示，输入真实姓名、身份证号、银行卡号后，单击“实名认证并绑卡”，如图4-11所示。要求姓名与身份证、银行卡注册信息一致。输入无误即可完成认证。
图4-10 微店认证图 图4-11 微店实名认证界面
除了实名认证，微信认证信息还包括“在微信中点亮微店”“实体店认证”“特殊行业认证”“诚信联盟认证”“保证金保障”“退货保障”。设置“在微信中点亮微店”方便朋友圈的人进店下单，让顾客感觉你随时在他们身边，同时也省去给“回头客”频频发店铺链接的麻烦。顾客可以直接点卖家的微信资料，里面就有店铺入口。开通“保障金保障”可以消除买家对商品质量、售后问题的顾虑，吸引陌生买家。完成“诚信联盟认证”可以提高店铺信誉和潜在转化率，持续引导以获得买家的关注和信任。开通“退货保障”可以让进店的买家不用担心受骗，购买更放心。
3．店铺基本信息设置
（1）店铺资料完善
微店首次注册的时候，默认名称为“我的微店”，店铺图标默认为微店的“店”，如需要修改基础设置，需要点击微店主界面上方“微店白色区域”（如图4-12所示），进入店铺管理界面（如图4-13所示）。在微店“店铺管理”界面，单击“店铺资料”如图4-14所示，在“店铺资料”界面分别上传店铺LOGO、店铺名称、店铺公告、店铺等级、主营类目、店铺地址以及客服电话。
店铺LOGO需要选择（250´250像素）图片进行修改；店铺名称是所开店铺的店名；店铺公告将买家关心的问题以公告的形式展示，如店铺故事、快递、店铺客服的联系方式，还可以将店铺促销活动及时在公告中进行更新，可大大提升店铺关注度。在“店铺等级”选项中，卖家单击查看评分规则，可查看微店卖家等级计算方式与积分规则。如果卖家有实体店铺可以添加实体店铺地址，便于买家光顾实体店铺。
图4-12 微店主界面 图4-13 微店店铺管理界面 图4-14 微店店铺资料界面
（2）其他资料完善。除了店铺资料基本信息的完善，还需要完善店长资料、交易设置、子账号管理等信息。
店长资料中需要依次完善店长头像、店长昵称、店长标签、店长名片、微信号和微信二维码。认证信息中需要维护实名认证、证件认证、微博认证和达人认证。
交易设置中需要依次完善运费设置、减库存方式、自动确认收货时间、担保交易、直接到账、货到付款和同城配送。
子账号管理是根据岗位的需求，新建子账号。
4．商品管理
（1）商品上架。可以通过手机或电脑等途径添加商品、下架商品或删除商品。
有两种方式可以快速添加商品。一种方式是单击微店主界面上方微店下的“创建商品”按钮。添加商品图片、标题、类目、首单积分优惠、型号、价格、库存、商品详情、分类等，如图4-15所示。一个商品最多支持15张图片，第一张图片系统默认为商品主图。
宝贝上架的过程中，尤其要注意商品详情的编辑。因为商品详情是用于介绍产品的功能（价值点）以及那些与众不同的地方，进而促进买家购买的关键信息。优秀的商品详情可以提高宝贝转化率，促进买家购买。同时关联营销更多商品，增加顾客购买其他商品的可能性，从而让客户有更多的选择机会，可以留住客户。
简单有特色的宝贝描述可以增加宝贝销量，一个商品的描述应该包括三个部分：第一部分是“主标题”，以精炼的文字让顾客一眼就能够明白这是什么东西；第二部分由一些“感官词”组成，增加对方打开宝贝链接的兴趣；第三部分由“优化词”组成，需使用与本产品相关的词来增加宝贝被搜索到的概率。例如“顶尖皇冠店天梭名匠五针全自动机械表/手表/男表/世界名表”这个标题，“天梭名匠五针全自动机械表”就叫做主标题，“顶尖皇冠店”叫感官词，这个词会让顾客产生对产品的信赖感，“手表/男表/世界名表”这三个词是优化词，能够让潜在顾客更容易找到宝贝。在宝贝标题中，感官词和优化词是增加搜索量和点击量的重要组成部分，但也不是非要出现。主标题是必需的，因为它可以详细描述出产品名称。
图4-15 添加商品
消费者在购买商品时看重的是商品的物质属性和价值属性，所以应为买家提供详尽的商品属性。在添加商品时，可以选择商品的型号、价格、库存等基本属性，同时还要展示商品的品牌、包装、重量、规格、产地等基本属性，对这些描述越详细，买家就越容易购买。
成功添加商品后，在“商品”页面，还可以预览所添加的商品，可以显示商品的详情。
同时，还可以在“商品”页面继续一个一个地添加商品，也可以“批量管理”和“分类管理”所添加的商品。
另外一种方式是单击主界面下方六宫格中的“商品”，如果卖家有货源，直接选择“快速添加商品”，添加内容同前。
如果卖家没有货源，无需资金和囤货，只需要单击“前往选货中心”，快速选货，一键代理（上架），并且不收取任何代理费用。若想寻找货源，还可以滑到第二屏“货源”进入后单击“找品牌或加盟微店”，凡是商品或店铺有“微店上心”均可放心代理。最后选择货源，单击“我要代理”将商品代理到自己的店铺，如图4-16所示。
微店店主在选择商品发布时间时，应该尽量增加店铺的曝光度，有以下技巧：①分析目标客户，如分析目标客户群体可能上网购物的时间段。②分析淘宝网上出现的浏览高峰，方便有购买欲望的客户快捷进入微店。③精准控制在线时间，根据客户的时间选择在线的时间。④制订商品上架计划，让买家时刻觉得微店有新商品上架，时刻关注微店。
如果通过某件商品进入店铺的消费者觉得不满意，可以考虑利用关联推荐的方式，如推荐正在进行折扣优惠活动的商品、近期热销的商品等，有效扩大交易面。
图4-16 商品货源
成功添加商品后，下面还有更多的商品设置，可以设置运费、开售时间，是否设置为店长推荐以及帮我卖货，如图4-17所示。
（2）商品下架和删除。在微店的主界面，单击“商品”宫格，进入“商品”界面，最下方有“下架”或“删除”按钮，可以将商品下架和删除。还可以单击商品图片进入编辑商品，将商品库存更改为“0”即为下架。
（3）商品分类。在微店的主界面进入“商品”，单击“分类管理”，可新建分类与管理分类；商品分类添加成功后，选择未分类商品，单击“管理”，单击“批量分类”，勾选你想设置在已勾选分类中的商品，单击“分类至”，即可批量将商品设置在某个商品分类中，如图4-18所示。
图4-17 编辑商品界面 图4-18 商品分类管理界面
5．店铺装修
（1）店铺装修基础设置。选择微店主界面上方“店铺编辑区域”，进入“店铺管理”，单击“打理店铺”按钮后出现自定义装修页面进行操作。
（2）店铺封面设置。店铺封面是以导航形式设置店铺分类展示，把更具吸引力的商品类型优先展示给买家。点击右上角封面设置，可设置无封面、封面大图、封面导航1列、封面导航2列。店铺封面尺寸为720´1 334像素，如图4-19所示。店铺封面背景图可设置系统默认，也可自助添加。
图4-19 店铺封面设置
（3）店招设置。微店的招牌，简称店招。一个店招的好坏，能够在一定程度上影响整体的店面效果甚至营销效果。设置店招，单击店招位置旁边的“插入”按钮，选择2:1（640´320像素）或者8:5（640´400像素）样式，如图4-20所示，并单击更换店招图片，如果没有好看的图片，选择“素材中心”使用更多美图，素材中心还可以不同风格分类切换，然后编辑文字与更换图片，图片也可以选择自己拍照或从手机相册上传。最后单击完成按钮即可生成新店招。店招以宣传微店为主，所以建议选用能体现微店商品特色的图片和文字来装点店招。尤其是店铺近期有关于商品的优惠活动，也可以在店招中突出表现。
（4）店铺信息编辑。单击“店铺动态”旁的编辑按钮，可编辑头像样式：头像居左、图像居中、极简样式，还可设置店铺Logo、店铺名称、店铺公告。
（5）店长信息设置。店长信息也是很关键的信息。单击“店铺动态”旁的“插入”按钮，进入添加店长信息编辑区域，可编辑店长头像样式（头像居中、头像居左）、店长头像、店长昵称、微博认证、微信号、店长标签。店长头像的尺寸为250´250像素。
图4-20 店招设置
（6）导航设置。单击“店铺动态”旁的插入按钮，可设置文本导航、图片导航。
（7）广告设置。单击“店铺动态”旁的插入按钮，进行广告设置。广告分为大图广告、轮播广告、两列广告。
（8）推荐商品设置。单击“店铺动态”旁的插入按钮，可设置推荐商品。推荐商品可设置为两列式、大图样式、详细列表。
（9）推荐店长笔记模块。店长笔记模块有横向滑动式（节省空间）、列表式（强化展示）两种样式。单击店长笔记模块，进入编辑店长笔记页面，单击添加店长笔记，进入店长笔记选择列表页，选择笔记后，返回到编辑店长笔记页面，店长笔记添加完成，展示缩略样式。推荐笔记模块最多添加10条笔记，已添加的店长笔记，可删除、可更换；可设置列表名称（15字以内）；单击“删除”，可直接删除笔记；单击“更换”，进入店长笔记选择列表，选择店长笔记后，替换原来的笔记。
（10）商品展示方式设置。可设置商品展示样式、排列规则等。商品展示样式包括两列式样、大图样式、详细列表。商品排序规则包括按上架时间、按商品分类展示。编辑好店铺装修后，单击“应用到店铺”即可。
（11）店铺装修模块。店铺装修分为免费模板和付费模板。单击未购买的收费模板，会进入模板预览页，可预览真实数据的模板效果。单击页面底部购买后弹起付费方式选择，选择后单击“确定”，进入收银台支付流程。进入店铺装修页面，弹层提示购买成功，单击“立即体验”后，可直接进行模块编辑，如图4-21所示。
6．店铺分享与推广方式
卖家可将微店通过转发链接、二维码方式分享至微信朋友圈、QQ空间、新浪微博，让大家帮忙互相转发推荐。
图4-21 店铺装修
单击微店主界面，选择“推广”按钮，获得新客的方式有入驻买家版、买家版招商、微积分、微店拼团、疯狂砍价、微客多、群团购、收藏送积分。营销工具有限时折扣、秒杀、会员优惠、满减、满送、满包邮、优惠券、优惠套餐、私密优惠。分享互动有微店秀秀、微积分海报、大转盘。推广服务可以使用公众号推广、笔记推广、活动推广、分成推广和分享赚钱。还可以选择感兴趣的线下活动参加，如图4-22所示。
图4-22 店铺推广
店铺推广都会产生一定的费用，卖家需要仔细衡量。
7．淘宝搬家
使用微店App的淘宝搬家助手，可以快速地把淘宝店的商品复制到微店。
首先，打开微店App，单击右下方的小齿轮按钮，进入“设置”界面，单击“淘宝搬家助手”选项。进入“淘宝搬家助手”界面，可以看到“快速搬家”和“普通搬家”两种方式。单击“快速搬家”按钮，进入页面后输入淘宝搬家的账号和密码，等待系统搬家，24小时操作完成。
实训项目七 电脑、平板电脑手机响应式（自适应）Web设计
一、实训目标
（1）掌握移动Web响应式（自适应）页面设计原理。
（2）能够设计电脑、平板电脑手机响应式（自适应）页面。
（3）能够将电脑站点页面重构为响应式（自适应）页面。
二、实训环境
（1）连接互联网的电脑，安装Windows 7或Windows 8操作系统，安装Dreamweaver和高版本浏览器。
（2）3G/4G Android或iOS智能手机，开通3G/4G网络或连接Wi-Fi。
三、实训背景知识
移动开发设计面对的手机或平板电脑的屏幕尺寸相当丰富。在电脑端常用的两种布局方式是固定布局和弹性布局，前者设置一个绝大多数电脑能正常显示的固定宽度，后者则采用百分比。但是，对于移动设备来说，这种布局方式就显得力不从心了。于是，响应式（自适应）页面布局应运而生。响应式布局使用的是Media Query技术，它在css2中就已经出现了，随着html5和css3的到来又增添了新的生机。响应式web设计并非新的技术，只是将已有的开发技巧（弹性布局、弹性图片和媒体查询等）整合在了电子商务页面中。
响应式（自适应）页面布局主要基于以下技术：
（1）CSS3的Media Query技术。其语法结构为：
|
@media screen and 屏幕大小 {样式} |
例如：
|
@media srceen and (max-width：600px){ width：400px; color:red; } |
（2）CSS3的Viewport技术。Viewport技术用于正确识别移动设备的宽度，其语法结构为：
|
<meta name="viewport" content="..."> |
例如：
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
实训任务如下：
l 设计一个基本的响应式（自适应）页面布局框架。
l 将实训项目四的手机页面重构为响应式（自适应）页面。
四、实训指导
图4-23 实训站点文件夹结构
1．设计基本的响应式（自适应）页面布局框架
（1）本实训中的手机网页素材包括页面描述文字、图片和视频三个部分，先建立一个站点文件夹respage，在respage中再建立一个index.html页面文件，如图4-23所示。
（2）使用HTML标记及属性设计页面结构。使用Dreamweaver或记事本设计index.html页面结构，代码如下：
|
<!doctype html> <html> <head> <meta charset="utf-8"> <title>电脑、平板电脑、手机响应式页面设计框架</title> </head> <body> <div id="pagewrap"> <div id="header"> <h1>头部（header）</h1> <p>页面描述 <a href="#">作者信息</a> (或者 <a href="#">延伸阅读</a>)</p> </div> <div id="content"> <h2>内容标题</h2> <p>文本</p> <p>文本</p> <p>文本</p> <p>文本</p> <p>文本</p> <p>文本</p> <p>文本</p> <p>文本</p> <p>文本</p> <p>文本</p> </div> <div id="sidebar"> <h3>边栏(sidebar)</h3> <p>文本</p> <p>文本</p> </div> <div id="footer"> <h4>页脚（footer）</h4> </div> </div> </body> </html> |
（3）增加viewport和Media query代码（粗体部分）。
|
/*<!doctype html> <html> <head> <meta charset="utf-8"> <!-- viewport meta to reset iPhone inital scale --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>电脑、平板电脑、手机响应式页面设计框架</title> <style type="text/css"> body { font: 1em/150% Arial, Helvetica, sans-serif;} a { color: #669; text-decoration: none; } a:hover { text-decoration: underline; } h1 { font: bold 36px/100% Arial, Helvetica, sans-serif;}
/************************************************************************************ STRUCTURE *************************************************************************************/ #pagewrap { padding: 5px; width: 960px; margin: 20px auto; } #header { height: 180px; } #content { width: 600px; float: left; } #sidebar { width: 300px; float: right; } #footer { clear: both;}
/************************************************************************************ MEDIA QUERIES *************************************************************************************/ /* 980px以下的屏幕尺寸有效 */ @media screen and (max-width: 980px) { #pagewrap { width: 94%; } #content { width: 65%; } #sidebar { width: 30%; } } /* 700px以下的屏幕尺寸有效*/ @media screen and (max-width: 700px) { #content { width: auto; float: none; } #sidebar { width: auto; float: none; } } /* 480px以下的屏幕尺寸有效*/ @media screen and (max-width: 480px) { #header { height: auto; } h1 { font-size: 24px; } #sidebar { display: none; } } #content { background: #f8f8f8; } #sidebar { background: #f0efef; } #header, #content, #sidebar { margin-bottom: 5px; } #pagewrap, #header, #content, #sidebar, #footer { border: solid 1px #ccc; } </style> </head> <body> <div id="pagewrap"> <div id="header"> <h1>头部（header）</h1> <p>页面描述 <a href="#">作者信息</a> (或者 <a href="#">延伸阅读</a>)</p> </div> <div id="content"> <h2>内容标题</h2> <p>文本</p> <p>文本</p> <p>文本</p> <p>文本</p> <p>文本</p> <p>文本</p> <p>文本</p> <p>文本</p> <p>文本</p> <p>文本</p> </div> <div id="sidebar"> <h3>边栏(sidebar)</h3> <p>文本</p> <p>文本</p> </div> <div id="footer"> <h4>页脚（footer）</h4> </div> </div> </body> </html> …… |
（4）在电脑、平板电脑和手机浏览器中的预览效果，如图4-24所示。
a）
图4-24 基本自适应框架的浏览效果
b） c）
图4-4 基本自适应框架的浏览效果（续）
a）电脑预览效果 b）平板电脑预览效果 c）手机预览效果
2．将实训项目三的手机页面重构为响应式（自适应）页面
（1）将media-queries.css文件进行修改，根据电脑、平板电脑和手机的宽度增加Media query代码。修改后的media-queries.css文件完整代码如下：
|
.video { width: 100%; height: auto; min-height: 300px; } /************************************************************************************ smaller than 980 *************************************************************************************/ @media screen and (max-width: 980px) { #pagewrap { width: 95%; } #content { width: 60%; padding: 3% 4%; } #sidebar { width: 30%; } #sidebar .widget { padding: 8% 7%; margin-bottom: 10px; } } /************************************************************************************ smaller than 650 *************************************************************************************/ @media screen and (max-width: 650px) { #header { height: auto; } #searchform { position: absolute; top: 5px;right: 0;z-index: 100;height: 40px; } #searchform #s { width: 70px; } #searchform #s:focus { width: 150px; } #main-nav { position: static; } #site-logo { margin: 15px 100px 5px 0; position: static; } #site-description { margin: 0 0 15px; position: static; } #content { width: auto; float: none; margin: 20px 0; } #sidebar { width: 100%; margin: 0; float: none; } #sidebar .widget { padding: 3% 4%; margin: 0 0 10px; } /************************************************************************************ smaller than 560 *************************************************************************************/ @media screen and (max-width: 480px) { html { -webkit-text-size-adjust: none; } #main-nav a { font-size: 90%; padding: 10px 8px; } } |
（2）在电脑、平板电脑和手机浏览器中的预览效果，如图4-25所示。
a）
b） c）
图4-25 修改后的页面在电脑、平板电脑和手机上的浏览效果
a）电脑预览效果 b）平板电脑预览效果 c）手机预览效果
实训项目八 微信公众平台的搭建与运营
一、实训目标
（1）掌握订阅号、服务号、企业微信（原企业号）的区别和联系。
（2）掌握微信公众号的开通流程和认证步骤。
（3）能够使用微信公众号进行移动微营销。
二、实训环境
（1）Android或iOS智能手机，开通3G/4G网络或连接Wi-Fi。
（2）连接互联网的电脑，安装Windows 7或Windows 8的操作系统。
（3）个人身份证、银行卡等资料；中小企业资质材料（营业执照、法人代表信息和保证函等）。
三、实训背景知识
微信公众平台简称公众号。企业利用公众号进行自媒体活动就是企业对消费者进行一对多的媒体性行为活动，如商家通过申请微信服务公众号进行二次开发，展示商家微官网、微会员、微推送、微支付、微活动、微报名、微分享、微名片等，已经形成了一种主流的线上线下微信互动营销方式。
微信公众号分为订阅号、服务号、企业微信和小程序。
订阅号为媒体和个人提供一种新的信息传播方式，可以构建与读者之间更好的沟通与管理模式。其功能类似报纸杂志，提供新闻信息或娱乐趣事。适用于个人、媒体、企业、政府或其他组织。订阅号（认证用户、非认证用户）一天内可群发一条消息。发给订阅用户（粉丝）的消息将会显示在对方的“订阅号”文件夹中，单击两次才可以打开。在订阅用户（粉丝）的通讯录中，订阅号将被放入订阅号文件夹中。个人只能申请订阅号。
服务号给企业和组织提供更强大的业务服务与用户管理能力，能帮助企业快速实现全新的公众号服务平台。服务号旨在为用户提供服务，主要偏向服务类交互（功能类似12315、114、银行、提供绑定信息）。适用于媒体、企业、政府或其他组织。一个月（自然月）内仅可以发送四条群发消息。发给订阅用户（粉丝）的消息，会显示在对方的聊天列表中，相对应微信的首页。服务号会出现在订阅用户（粉丝）的通讯录中。通讯录中有一个公众号的文件夹，点开可以查看所有服务号。
企业微信旨在帮助企业、政府机关、学校、医院等事业单位和非政府组织建立与员工、上下游合作伙伴及内部IT系统间的连接，并能有效地简化管理流程、提高信息的沟通和协同效率、提升对一线员工的服务及管理能力。企业微信主要用于公司内部通信使用，需要先有成员的通信信息验证才能关注企业微信。
小程序是一种新的开放能力，可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
如何选择合适的公众号，需要根据自身情况而定。如果想发送消息做宣传推广服务，达到宣传效果，建议选择订阅号。如果想进行商品销售，建议申请服务号，后续可以认证再申请成微信支付商户。如果想做好内部管理，面向企业内部员工或企业的上下游用户，建议申请企业微信。
四、实训指导
1．申请微信公众平台
下面以订阅号的操作为例演示申请过程。
（1）打开微信公众平台官网：https://mp.weixin.qq.com，在右上角单击“立即注册”，如图5-3所示。
图5-3 微信公众平台官网
（2）按照相应的提示完成相应操作。
2．微信公众号的注销
目前只有个人类型订阅号或者已将支付、卡券、广告、公众号第三方服务等服务或功能关闭后的组织类型订阅号可以注销公众号。
微信公众号注销流程图，如图5-4所示。
图5-4 微信公众号注销流程
3．微信认证
微信认证是微信公众平台为了确保公众号信息的真实性、安全性，提供给微信公众号进行微信认证的服务。申请微信认证后，公众号会有专门的认证标识，在用户搜索时可以排名靠前，用户关注的机会会更大一些。需要注意的是：个体工商户无对公账户，可提供营业执照上法人的银行卡信息申请认证；企业必须要有对公账户，请先办理对公账户再申请公众号或认证；事业单位如无对公账户，可以使用结算中心或财政账户支付验证（如国库集中收付结算中心等），也可以使用证书上法人的对私银行卡号及姓名；政府类型若没有对公账号，可以在“机构开户银行”“机构银行账号”栏填写“无”。
微信认证的流程如下：
第一步：进入微信认证页面。有两种方法进入微信认证页面。一是进入微信公众平台，在“设置”中选择“公众号设置”，在“账号详情”下单击“申请微信认证”。二是进入微信公众平台，单击“设置”中的微信认证，再单击开通即可。
第二步：勾选同意“微信公众平台认证服务协议”，选择认证主体类型，提交相应的材料，确认名称，填写发票信息并支付费用。
4．微信公众平台后台功能模块介绍
（1）自动回复。自动回复功能是指公众号运营者可以通过简单的编辑，设置“关键词回复”“收到消息回复”“被关注回复”的功能。可以设定常用的文字、语言、图片、录音作为回复消息，并制定自动回复的规则。当订阅用户的行为符合自动回复规则的时候，就会收到自动回复的消息。
1）关键词回复。订阅用户发送的信息含有多个设置的关键词，则会随机回复。具体操作流程为：登录微信公众平台→功能→自动回复→关键词回复→添加回复，即可添加相应的关键词自动回复信息。
2）收到消息回复。订阅用户只要对公众号发送消息便会回复，如粉丝发送的消息包含关键词将会优先关键词回复（如开启了全匹配，需粉丝发送与设置一样的关键词才会自动回复）。具体操作流程为：登录微信公众平台→功能→自动回复→收到消息回复。在设置收到消息回复后，系统会自动回复设置的文字、语音、图片、视频给粉丝，但是只能设置一条信息回复，暂不支持设置图文、网页地址消息回复；一个小时内可回复1～2条内容。
3）被关注回复。用户关注公众号时将会立即收到恢复。具体操作流程为：登录微信公众平台→功能→自动回复→被关注回复。可设置文字、语音、图片、视频为被关注回复内容。
设置时需要注意：设置完全匹配功能时，若选择了全匹配，在编辑页面则会显示“已全匹配”，对方发送的内容与设置的关键词须完全一样，才会触发关键词回复，不能多一个字符也不能少一个字符。例如，设置的关键词为“123”，仅回复“123”才会触发关键词回复。在没有选择全匹配的情况下，编辑页面则会显示“未全匹配”。只要对方发送内容包含设置的完整关键词，就会触发关键词回复给对方。例如，设置的关键词为“123”，回复“1234”会触发，但回复不完整的关键词“12”则不会触发关键词回复。
（2）自定义菜单。公众号可以在会话界面底部设置自定义菜单，菜单项可按需设定，并可为其设置响应动作。用户可以通过单击菜单项，收到设定的响应，如发送消息、跳转链接等。
开通自定义菜单的操作流程为：进入微信公众平台→功能→自定义菜单→开启。
设置自定义菜单的操作流程为：进入微信公众平台→功能→自定义菜单→添加菜单→选择“+”添加子菜单→设置动作→发布。最多创建三个一级菜单，一级菜单名称名字不多于4个汉字或8个字母。每个一级菜单下的子菜单最多可创建五个，子菜单名称名字不多于8个汉字或16个字母。在子菜单下可设置动作。
发送信息：可发送信息类型包括文字、图片、语音、视频和图文消息等。但未认证订阅号暂时不支持文字类型。
跳转到网页：所有公众号均可在自定义菜单中直接选择素材库中的图文消息作为跳转到网页的对象。认证订阅和服务号还可直接输入外部链接。编辑中的菜单不会马上被用户看到，选择发布后，会在24小时后在手机端同步显示，粉丝不会收到更新提示，若多次编辑，以最后一次保存为准。
跳转小程序：自定义菜单可跳转已经绑定的小程序。
（3）投票管理。投票功能可对使用微信公众平台的用户进行有关于比赛、活动、选举等意见的收集。登录微信公众平台→功能→投票管理→查看对应投票标题→单击详情，即可查询投票结果，如图5-5所示。
图5-5 投票管理
提示：同一个投票模板在各个渠道、不同图文中的投票结果也会累计，但同一投票模板同一个微信用户仅支持投票一次。微信公众平台新建投票的操作流程为：登录公众平台→功能→投票管理→新建投票。
5．微信公众平台管理模块
在管理模块下，一个刚注册成功的订阅号有三个基础功能：消息管理、用户管理和素材管理。
（1）消息管理。消息管理用于接收用户对公众号发送的消息。若一个订阅用户48小时内未与公众号互动，那运营者是无法主动发送消息给用户的，直到用户下次主动发消息方可对其回复。
接收到的订阅用户发送的消息，系统会保留最近五天的消息（图片和语音只保留三天），超过时间的消息会自动清空。另外，与单个订阅用户的实时聊天消息最多保留20条。
如果对订阅用户发送的消息标记为“星标”消息，将永久保存该信息。在“消息管理”中可以对关注用户发送的消息进行“标记星标”收藏，便于永久查看和永久保存该消息。鼠标指针移动到想要收藏的消息中，单击“星标”就可以收藏，若需要取消收藏过的消息，在已收藏消息内单击“星标”取消收藏即可。
若勾选“隐藏关键词消息”，粉丝发来的关键词消息会隐藏掉，让公众号运营者更方便人工回复用户消息。
（2）用户管理 用户管理不支持显示粉丝微信号，只能看到昵称。新关注的粉丝，关注24小时后才可以快速搜索；更新昵称的粉丝，新昵称需要经过48小时同步后，才可以根据新昵称快速搜索。
如果要给用户添加备注，选择需要修改备注的粉丝，单击即可修改（支持特殊符号，在30个字符内，修改没有次数上限）。
在微信公众平台“用户管理”中可以将关注用户进行分组。将鼠标放在头像上，在浮出的用户信息上单击“加入黑名单”或添加“标签”，也可以批量勾选后进行操作。
目前微信公众平台粉丝分组最高可以设置100个，单击建立的分组进入，可以对该组重命名；若要删除分组，可从“用户管理”进入需要删除的分组，单击“删除“即可。
在微信公众平台“用户管理”中将关注的粉丝添加到黑名单分组后，该粉丝将无法收到公众号的群发消息及自动回复消息，但可以通过“查看历史消息”查阅10条历史消息。
（3）素材管理。素材管理主要有四个类型：图文消息、图片、语音和视频。图片素材管理有一个分组功能，可以将上传过的图片新建分组进行分门别类整理，方便索引使用。
图文消息是可以把需要发布给粉丝的相关资讯进行编辑、排版的功能，可展现活动内容、相关产品资讯等。进入微信公众平台→管理→素材管理→新建图文素材，即可编辑单图文，输入标题、作者、正文内容，把需要发布给用户的相关资讯进行编辑、排版，展现活动内容、相关产品资讯等。如果需要编辑多图文消息，直接点击左侧图文导航中的“＋”可增加一条图文消息，最多可编辑八条图文内容。
目前设置图文消息内容没有图片数量限制，正文里必须要有文字内容，图片大小加正文内容不超过20 000字符即可，如图5-6所示。
图5-6 素材管理
利用微信公众平台的编辑器可以进行简易排版，但要实现比较复杂的效果需要借助一些第三方编辑器，如秀米编辑器或135编辑器。
秀米编辑器是相对来说容易上手的微信编辑器，它的界面友好清新，推荐新手入门使用，如图5-7所示。
图5-7 秀米编辑页面
6．添加客服
微信公众平台新版客服功能，是微信公众平台团队为了满足公众号客服需求而推出的网页版客服聊天工具，使用微信扫码登录方式，登录后支持实时回复粉丝咨询，满足多个客服人员同时为一个公众号提供服务的运营需求。
通过微信认证的微信公众号，登录公众平台后，可以在“功能—添加功能插件”中，找到“客服功能”插件并开通。
如若要添加客服人员，开通“客服功能”插件的权限后，可在“功能—客服功能”中，添加和管理客服人员。客服人数支持100人。
首先，单击“添加客服”按钮，设置客服账号的昵称和头像（昵称和头像将会显示在微信公众号的对话框中）
其次，绑定微信号。输入客服人员的微信号（支持微信号、QQ号、手机号搜索），发送绑定操作的邀请信息。输入微信号并邀请绑定，发送验证消息到手机微信。
等待客服人员在手机微信客户端中接受邀请。
最后，在手机微信客户端接受邀请后，客服账号绑定成功。
7．微信小店
微信小店是基于微信公众平台打造的一套原生电商模式。企业商家可以基于自己的微信公众号，通过微信小店来售卖商品。通过微信小店提供的接口能力，企业商家可以更方便地管理后台的商品系统，以自定义菜单、公众号消息下发等多途径、多入口的运营形式来经营和宣传自己的公众号。同时，通过微信小店的后台系统也能更加方便地联系和维护企业与用户的关系。微信小店再次提升了微信“连接一切”的能力。
开通微信小店的操作流程为：进入微信公众平台→功能→添加功能插件→微信小店→开通。填写微信支付的商户号、商户密钥等，然后再单击“提交审核”，即可完成申请步骤。在页面提交申请后，大约1～3工作日内即可查看审核结果。
需要注意的是：微信小店功能入口，目前仅对微信认证的服务号，并且成功申请微信支付商户的用户开放使用。
微信小店申请完全免费，只要满足条件即可申请运营使用。微信小店目前暂不支持关闭或注销，只需把商品下架。若把微信小店链接放在自定义菜单中，在自定义菜单中去掉链接即可。
开发者可以通过小店接口来实现快速开店，目前支持以下接口：商品管理接口、库存管理接口、邮费模板管理接口、分组管理接口、货架管理接口、订单管理接口和功能接口。
8．小程序管理
小程序注册流程与订阅号、服务号、企业微信注册流程非常类似。在填写小程序信息时需要注意以下事项：
（1）小程序名称。小程序在发布前，名称设置成功以后有两次修改名称机会，两次机会用完，必须先发布，再通过微信认证进行改名。
（2）小程序头像。新头像不允许涉及政治敏感与色情；图片格式必须为bmp、jpeg、jpg、gif；不可大于2M。一个月内可修改五次。
（3）小程序介绍。请确认介绍内容不含国家相关法律法规禁止内容，介绍字数为4～120个字符，一个中文占两个字符。一个月内可申请五次修改。
（4）服务范围选择。可申请不少于一个不多于五个服务范围。服务范围分两级，每级不能为空。特殊行业需提示特殊资质。一个月内可修改一次。
为扩展小程序的使用场景，便于用户使用小程序的服务，公众号可关联小程序，并在公众号图文消息、自定义菜单、模板消息等场景中使用已关联的小程序。
公众号关联小程序的操作流程是：登录公众号→小程序→管理小程序→添加，管理员扫码确认，输入需要绑定的小程序App ID，查找小程序并发送绑定邀请，小程序管理员接受邀请，绑定完成。关联小程序后系统将自动向公众号粉丝推送关联成功消息，单击消息即可跳转至小程序。
公众号可将已关联的小程序页面放置到自定义菜单中，用户单击后可打开该小程序页面。公众号运营者可在公众平台进行设置，小程序可被添加至一级菜单和二级菜单内。用户单击自定义菜单即可跳转至小程序页面。
9．推广功能
（1）广告主。公众号运营者通过广告主功能可向不同性别、年龄、地区的微信用户精准推广自己的服务，获得潜在用户。微信认证的公众号可申请开通投放服务，成为广告主。
展示位置：图文消息的全文页面底部。
要想使用广告主服务，必须先开通广告主服务。公众平台广告主功能开通需要已通过微信认证的公众号（订阅号、服务号）。具体流程如下：进入公众平台→广告主→申请开通→同意确认协议→选择主营行业以及行业资质材料，提交审核。
（2）流量主。公众号运营者自愿将公众号内指定位置分享给广告主做广告展示，按月获得广告收入。粉丝人数超过5 000人的微信公众号均可提供广告展示服务，成为流量主。
展示位置：图文消息的全文页面底部
流量主申请条件为注册类型为企业、个人、网店商家、其他组织类型的公众号（订阅号、服务号），粉丝超过5 000人。
如若需要开通流量主，需点击公众平台→流量主→申请开通→同意协议→选择广告标签（最多可选择三个标签）→填写结算财务资料→提交。
流量主的收益主要由广告主的出价、广告质量得分、用户有效点击量等综合因素计算得出。
目前没有捷径和固定模式可循，建议通过扎实运营，提高自身公众号内容的质量，来吸引更多关注用户，提高有效点击量；运营的内容最好与自己公众号定位一致，这样可吸引到精准人群，提高有效点击率。
实训项目九 “今日头条”自媒体推广
一、实训目标
1）了解“头条号”不同类别的区别。
2）掌握“头条号”注册等相关设置。
3）了解如何运营“头条号”。
二、实训环境
1）Android或iOS智能手机，开通3G/4G网络或连接Wi-Fi。
2）连接互联网的电脑，安装Windows 7或Windows 8的操作系统。
3）个人身份证以及身份证名字开户的银行卡。
三、实训背景知识
“今日头条”于2012年8月上线，是一款基于数据挖掘技术的个性化推荐引擎产品，它为用户推荐有价值的、个性化的信息，提供连接人与信息的新型服务，是国内移动互联网领域成长最快的产品之一。
在信息爆炸的时代，人们面对的选择越来越多，选择过多，信息超载，也常常会使人无所适从。在这种情况下，推荐引擎便开始展现技术优势，发挥威力。“今日头条”就是一款基于数据挖掘的推荐引擎产品，它不是传统意义上的新闻用户端，没有采编人员，不生产内容，运转核心是一套由代码搭建而成的算法。算法模型会记录用户在“今日头条”上的每一次行为，在海量的资讯里知道用户感兴趣的内容，甚至知道用户可能感兴趣的内容，并将它们精准推送给用户。
基于个性化推荐引擎技术，根据每个用户的兴趣、位置等多个维度进行个性化推荐，推荐内容不仅包括狭义上的新闻，还包括音乐、电影、游戏、购物等资讯。
“今日头条”推出了开放的内容创作与分发平台——“头条号”，是针对媒体、国家机构、企业以及自媒体推出的专业信息发布平台，致力帮助内容生产者在移动互联网上高效率地获得更多的曝光和关注。截至2017年10月，“头条号”平台的账号数量已超过110万个。“头条号”可以发布文章、视频、图集、趣味测试等。申请入驻“今日头条”可选择个人、媒体、国家机构、企业及其他组织五个类别中的一种。
以下以个人自媒体为例讲解“个人”类“今日头条”写作平台的设置和运营。
四、实训指导
1．申请“头条号”
登录“头条号”官网，单击“注册”。“头条号”注册方式有多种：手机号、邮箱和第三方登录（新浪微博、QQ、微信），可选择任一方式进行注册。
注册成功后，还需要进行实名认证才可使用后续功能。使用注册“头条号”时所用的登录方式（手机、微博、微信、QQ等），登录“今日头条”用户端，在“我的”→“实名认证”页面，按系统提示进行操作。
随后，单击右上角“头条产品”中的“头条号”，如图5-8所示。进入“头条号”后，选择入驻类别。
图5-8 今日头条官方网站
根据申请注册“头条号”的不同类型，申请者需提交不同材料，如图5-9所示。
图5-9 不同类型的“头条号”需提交的材料
选择入驻类别后，将进行入驻材料的填写，并设置头条号名称、头条号介绍、头条号头像等信息。
2．注销“头条号”账号
注销个人类型账号需要提交的材料（仅限账号注册人申请）有：申请注销函、注册人手持身份证的照片（各项内容需清晰可见）。申请人签字必须是本人手写签字；账号注销后，不支持申请恢复，不支持自主提现。
每个主体可申请的账号数量不随账号注销而变更；账号注销后，注册人的身份证信息、账号所绑定的手机号和邮箱均将无法再次注册使用。
3．忘记“头条号”登录方式的解决方法
如果无法登录“头条号”账号（如忘记了账号的登录方式），请发送以“登录问题反馈”为标题的邮件到邮箱mp@toutiao.com，并根据不同的账号类型提供相应的资料及信息。
（1）个人账号需提供：媒体名字、申请账号时使用的身份证号、身份证正反面彩色扫描件、账号绑定的手机号码、申请者手持身份证照片。
（2）非个人账号需提供：媒体名字、注册时使用的营业执照、加盖企业公章的登录方式查询授权书（授权书无模板，写清楚为什么需要查询并加盖公章即可）。
4．“头条号”的主页
“头条号”的主页包括私信、评论管理、粉丝管理、数据分析、实验室和号外六个选项。
（1）私信。“头条号”私信新增“关键词自动回复”功能。设置完关键词，“头条号”在收到含关键词的私信内容后，系统将自动回复已设置好的回复内容。可设置最多200个规则，每个规则最多可设置10个关键词和5条回复，每条回复内容需在300字以内。
关键词回复可设置“精准匹配”或“模糊匹配”。当设置为“精准匹配”时，私信内容需与关键词完全相同才能触发自动回复；当设置为“模糊匹配”时，私信内容只需包含关键词即可触发自动回复，但包含的关键词需完整、准确，否则将不会触发自动回复。例如，设置关键词“烘焙技巧”模糊匹配，当收到私信“烘焙技巧”“烘焙技巧有哪些”时可触发自动回复，当收到私信“烘焙”“烘焙的技巧”时不会触发自动回复。
目前仅支持设置文本回复（可含网页地址），暂不支持图片、音频、视频、超链接等消息类型。
（2）评论管理。在评论管理选项中可以看到粉丝所有评论内容，作者与读者（特别是与粉丝）互动有助于提升“头条号指数”中的“关注度”。评论管理功能可以对优质评论进行推荐，被推荐的评论将突出展示，每篇文章可推荐一条评论。
（3）粉丝管理。粉丝管理包括粉丝概况、粉丝画像和粉丝列表。
1）粉丝概况包括用户数据增长，主要有四个：新增粉丝数、取消关注数、净增粉丝数、累计粉丝数。作者可以选择不同的时间段对新增粉丝数进一步分析，更好地了解“头条号”运营的状态，并分析粉丝增长对应的文章，从而找出原因，以便更好地规划、更好地运营。
2）粉丝画像包括性别比例、年龄分布、地域分布、终端分布。通过查看这些数据，作者能更好地了解粉丝的喜好，便于有针对性地推送文章。通过兴趣探索，可以看到粉丝最喜欢文章的类型和关键词，有利于作者规划文章。还可以看到粉丝关心的其他头条号，从而全面地了解粉丝的喜好，有利于更有针对性地推送文章。
3）粉丝列表中可以查看粉丝的具体账号，通过查看粉丝主页，可以全面地了解粉丝的喜好，从而更好地与粉丝互动。
（4）数据分析。数据分析包括概况分析、图文分析、视频分析、微头条分析和问答分析。在概况中，作者可以查询当天、7天、14天及30天的文章统计情况，其中包括文章量、推荐量、阅读量、粉丝阅读量和评论量。作者可以根据这个统计数据，找到用户的调性，从而形成稳定的写作风格。文章分析是根据文章的标题分析文章对应的阅读属性，如推荐量、阅读量、评论量、收藏量、转发量。
（5）实验室。功能实验室主要有懂车帝、正版图库、热词分析和趣味测试四个功能。
（6）号外。为帮助“头条号”作者获得更好的曝光和推广，“今日头条”官方推出了“号外”功能，运营者可以通过付费增加文章的参与度。在使用“号外”推广时，首先要选择需要推广的级别，其次为推广的文章设置标签，标签越精确，推荐的精确性就越大。
5．“头条号”内容发布
“头条号”主要是发布图文、西瓜视频、微头条和悟空问答等。下面以发布图文和视频为例进行讲解。
（1）图文。在图文下单击“发表文章”，利用“头条号”的编辑功能，可以实现快速排版，有利于提高用户写作体验，如图5-10所示。同时也可以发表图集，进行内容管理、评论管理、素材管理和图文数据分析。
图5-10 发表图文
（2）西瓜视频。在西瓜视频下单击“发表视频”，可以单个上传视频，也可以批量上传视频，如图5-11所示。同时也可以发表合辑，进行视频管理、合辑管理、评论管理、视频数据分析和收益分析。
图5-11 发表视频
实训项目十 H5易企秀制作与微营销
一、实训目标
（1）了解H5制作工具。
（2）能够使用H5制作平台和工具进行微营销。
二、实训环境
（1）安装Windows XP/7/10操作系统。
（2）Android或iOS智能手机，开通3G/4G网络或连接Wi-Fi。
三、实训背景知识
H5指的是第五代HTML，HTML是“超文本标记语言”的英文缩写。“超文本”是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。“标记”指的是这些超文本必须由包含属性的开头和结尾标志来标记。浏览器通过解码HTML就可以把网页内容显示出来，也构成了互联网兴起的基础。HTML的第一版是在1991年开始研发的，1993年发布。2006年开始创建了第五代的HTML，经过长达八年的努力，HTML5标准规范最终制作完成并向全世界开放。
H5自发布以来引发了广泛的关注，不仅仅因为它是一种标记语言，还因为H5是一系列制作网页互动效果的技术集合，即H5就是移动端的Web页面。它为下一代互联网提供了全新的框架和平台，包括提供免插件的音频、视频、图像、动画、本地存储以及更多炫酷而且重要的功能，并使这些应用标准化和开放化，从而使互联网也能够轻松实现类似桌面的应用体验。
简单来说，H5具有以下特点：无须下载安装，即点即玩；不受平台限制；高度支持影音、图像和交互动画。
初学者对于H5的设计可在免代码设计平台进行，在无代码基础的情况下，通过免代码H5设计平台，可以很方便地设计H5作品。H5制作工具包括易企秀、MAKA、兔展等，设计方法相似。
这里以易企秀为例进行讲解。易企秀是一款针对移动互联网营销的手机网页DIY制作工具，用户可以编辑手机网页，分享到社交网络，通过报名表单收集潜在用户或其他反馈信息。
用户通过易企秀无须掌握复杂的编程技术就能简单、轻松制作基于H5的精美手机幻灯片页面。同时，易企秀与主流社会化媒体打通，让用户通过自身的社会化媒体账号就能进行传播，展示业务，收集潜在用户。易企秀提供统计功能，让用户随时了解传播效果，明确营销重点，优化营销策略。易企秀提供免费平台，让用户零门槛就可以进行移动自营销，从而持续积累用户。
易企秀适用的地方包括：企业宣传、产品介绍、活动促销、预约报名、会议组织、收集反馈、微信增粉、网站导流、婚礼邀请、新年祝福等。
易企秀的主要功能如下：
（1）一键生成H5 创作只需几秒钟，H5简历、旅游自拍、拜年贺卡、生日祝福、宝宝照、旅游照统统一键生成，摇一摇还可以更换模板。还可以分享至微信朋友圈、微博、QQ群和QQ空间等。
（2）海量模板素材 请帖、贺卡、电子相册、邀请函、简历模板、企业招聘、公司宣传、产品介绍均可轻松套用。
（3）随时随地查数据 动态图表展示H5场景的浏览次数，实时掌握用户提交的信息，金牌数据管家，助力市场营销。
（4）手机与电脑跨平台操作 手机与电脑的场景数据互通，登录app可编辑、分享、管理电脑上的场景。
四、实训指导
1．易企秀注册
打开浏览器输入“www.eqxiu.com”，登录易企秀官网（如图6-1所示）。
图6-1 易企秀官方网站
为了获得更好的体验，建议使用谷歌浏览器。单击右上角的“注册”按钮，以手机号注册为例，输入手机号，获得验证码，随后输入密码，单击“注册”，如图6-2所示。
图6-2 易企秀注册
需要注意的是：个人账号永久免费使用，可免费升级到企业账号或秀客账号，企业账号可创建子账号，并可使用更多会员特权。
2．易企秀登录
易企秀也开通了第三方账号登录方式，如QQ和微信授权登录。请注意登录方式统一即可，如用邮箱注册，手机上也应用邮箱登录。如果用不同的方式登录，就会创建一个新的账户，造成原来的场景不见了的情况。这种问题，只要保持登录原账号就可以解决。
3．创建场景
登录易企秀官方网站后，单击“我的场景”，进入场景页面。选择“制作场景”，进入模板商城。模板商城有大量的模板，并且按照用途、行业、节假、功能、风格和使用人群进行划分，如图6-3所示。
图6-3 选择模板
选择模板后，进入H5模板编辑器页面，如图6-4所示。
图6-4 H5模板编辑器页面
接下来介绍一下编辑器页面每个组件的功能。
编辑器页面最左边是“模板中心”，选择“功能模板”可以将“模板中心”收缩进去。在“模板中心”可以根据“推荐”“互动”“营销”“动效”“排版”“常用”或者按关键字搜索自己想要的模板，但此处选择的都是单页模板。
在编辑器页面右边的“页面管理”中，可以单击各个页面快速切换。在“页面管理”中可以添加页面，复制当前页，删除当前页，还可以添加长页面（长页面是付费企业才能使用的功能，个人用户是不能使用的）。“页面管理”左边的“图层管理”是针对这一页添加的元素都会有的组件管理。
中间的手机框是H5的操作画布，是可编辑区域，画布的分辨率大小为640*1 008像素，可以根据这个分辨率制作图片素材和背景素材。画布旁边是一个长条的快捷菜单，分别是撤销、恢复、刷新预览、复制当前页、页面设置、音乐、特效、网格设置、编辑区域缩放、手机边框。
编辑器顶部就是导航栏，可以添加各种元素，分别是文本、图片、背景、音乐、形状、组件、表单和特效。
（1）选择导航栏中的“文本”，下拉“新文本”，就可以在画布上编辑文本，同时在文本框的周围有一个“组件设置”。“组件设置”中有三个选项卡，分别是“样式”“动画”“触发”。“样式”是文字的配置项，非常完备，极大地方便了设计师对元素进行微调。可以输入组件名称，选择字体、字号、文字颜色、背景颜色、行高、字距等，还可以进行功能设置，如在“点击跳转”的下拉菜单里有“跳转链接”“跳转页面”“拨打电话”，设置边框、阴影等，如图6-5所示。
图6-5 “文本”选项卡组件设置
在“动画”选项卡可以添加动画，动画设置（如图6-6所示）主要包括以下内容：
图6-6 “文本”选项卡“动画”组件设置
时间：设置文字动画时间，1秒、2秒、3秒等，以达到自己的预期效果。
延迟：设置文字动画延迟，即在设定的延迟时间后呈现文字效果，以达到自己的预期效果。
次数：设置文字动画次数，保存、发布后，会按设定好的次数播放文字，以达到自己的预期效果。
循环播放：设置文字是否循环呈现，如勾选，保存、发布后，会循环播放文字，以达到自己的预期效果。
出现顺序：选择文字的出现顺序，有正序、反序和随机三种。
（2）单击导航栏中组件“图片”，可以选择图片库中的图片，选择使用后，进入图片的组件设置页面，同样可以设置样式、动画和触发。样式中可以进行更换图片、裁切图片，图片翻转（左右、上下），选择背景颜色，以及进行功能设置，如重力感应等，如图6-7所示。
也可以上传自己的图片，大小不超过3M，支持JPG、PNG、GIF等格式。在已经上传了的图片中，可以进行分组管理。
图6-7 “图片”选项卡“样式”组件设置
如果需要透明背景底色，需要去除图片的底色，可以借助第三方图片工具，如PhotoShop，扣掉图片背景，保存为PNG格式，再上传到易企秀（原图在电脑预览时是透明背景，上传到易企秀才是透明背景）。
（3）导航栏中“背景”的使用方法和“图片”类似，要求上传的背景图片大小不超过3M，支持JPG、PNG、GIF等格式，一次最多上传10张图片。
（4）导航栏中组件“音乐”要求上传的“音乐”大小不超过10M，格式为MP3，上传好的音乐可以进行手动裁切，尽量控制在20秒内，因为音乐的大小会影响加载速度和流量消耗，影响用户的体验。也可以在右边的竖条栏中单击“音乐符号”，选择更换或删除。
有时背景音乐不能自动播放，这是由多种原因导致的：一方面跟手机有关，有的手机系统不支持对背景音乐流媒体的播放；另一方面也跟网络有关，网络不好或者网络设置里限制了流媒体播放，都有可能导致背景音乐不能播放。
（5）组件“形状”包括了三个大类：分别是图形、文字和图标。特点是不可上传，矢量素材，可以任意改变颜色和大小，不失真，内存比较小，它的用法可以作为图层、半透明图层和透明图层。
形状样式中包括基础设置、边框设置和阴影设置等。
1）在基础设置中可给形状命名、更换形状、形状反转，选择形状颜色、背景颜色等。
2）在边框设置中可选择边框样式、边框颜色、边框尺寸、边框弧度和边距。
3）阴影设置即添加对话框的阴影效果，并对阴影颜色、大小、方向和模糊度进行设置。
（6）“特效”指的是页面特效，可以在设置界面看到效果。特效包括涂抹、指纹、环境、渐变、重力感应、砸玻璃。
4．具体操作
选择好模板后，需要根据情况修改文字、修改图片、添加页面、设计页面具体内容等。
修改文字：双击文字即可修改，如果对文字的效果还不满意，还可以在“文字工具栏”和“样式窗口”为文字做进一步的修改，如图6-8所示。
图6-8 修改文字内容
修改图片：直接在图片上双击就可以进行图片替换，如图6-9所示。替换了图片后，所有样式以及动画都会保留下来，同时，可以对图片的尺寸进行调整。
图6-9 修改图片
添加页面：有时候模板的页数不够，不符合内容编辑的需求，可以添加新的页面来满足更多的内容。添加页面之前，要先确定添加什么类型的页面，有的页面是纯文字类的页面，有的页面是图形+文字类页面，有的页面是纯图片类页面。确定好需要添加的页面类型后，先选择对应的页面，然后点击页面窗口右上角或者画布右边的“复制当前页面”按钮。最后为新的页面填入新的内容即可。
更改音乐：如果不喜欢模板的音乐，可以重新上传音乐。在搜集相关主题音乐的时候，不要盲目搜索。可以在音乐应用中搜索与H5主题相关的歌单。例如：在网易云音乐上可以搜索“舒缓”“气势”等关键词，找到适合各种场合的歌曲，下载后添加上传使用。
5．发布分享
修改好内容后，先保存，暂时不发布。可以选择右上角的“预览和设置”，进入“预览和设置”页面。“预览和设置”页面包括常用设置、分享设置和高级设置。在常用设置中，可以设置封面、场景的标题、场景的描述，微信分享时显示要添加的标题、描述，场景访问状态，翻页方式、场景类型和场景页码。分享设置可以申请为电脑端模板、申请加入秀场、分享流量以及参加活动。高级设置包括加载设置（自定义载入LOGO）和尾页与底标。
在预览和设置页面，设置好H5的标题、描述等，单击“确定”并在跳转页面选择“发布”即可拿到二维码进行预览，如图6-10所示。
图6-10 预览和设置
场景推广有如下六种方式：
（1）社会化媒体推广：可分享至微博等社交渠道。
（2）微信朋友圈推广：扫描二维码分享至朋友圈和微信好友。
（3）推广至微信公众号、手机用户端等移动产品：将场景链接放到微信公众号或手机用户端即可。
（4）推广至物料、名片、宣传单等：将场景二维码印刷在物料上即可。
（5）推广至App、WAP网页等：直接添加场景链接。
（6）推广至广告Banner：直接用场景链接。
6．训练
请制作一个“学校介绍”的展示型H5，要求包括文字、图片和音乐等。
