实训项目一体验移动电子商务——手机购物及应用
实训项目二安卓（Android）手机模拟器的安装和使用
实训项目三二维码制作及应用
实训项目四基本的移动Web网页制作
实训项目五移动支付
实训项目六微店搭建与运营
实训项目七电脑、平板电脑手机响应式（自适应）Web设计
实训项目九“今日头条”自媒体推广
实训项目十H5易企秀制作与微营销
一、实训目标
（1）通过手机淘宝购物，了解移动商务网店的基本购物流程。
（2）掌握移动电子商务手机购物及支付的方法。
（3）体验移动电子商务的基本应用。
二、实训环境
3G/4GAndroid或iOS智能手机，开通3G/4G网络或连接Wi-Fi。
三、实训背景知识——手机购物
图1-8淘宝手机购物流程
四、实训指导
1．淘宝手机客户端的下载安装及打开
图1-9手机淘宝下载页面图1-10手机淘宝应用
（2）打开“手机淘宝”，界面如图1-11所示。
图1-11“手机淘宝”客户端的界面
2．宝贝（商品）搜索与选购
（1）宝贝或店铺搜索。手机淘宝为方便用户购物而提供了功能强大的站内分类索引及快速搜索功能，分类索引包括商品种类、品牌分类、功能分类和价格分区等，而快速搜索能够满足用户不具体的关键词搜索，让用户快速找到所需商品。在搜索框中输入所需商品关键字，这里搜索“茵曼”并进入店铺，商品展示如图1-12所示。
图1-12店铺商品展示图1-13宝贝选择
（3）购物车管理及订单确认。若选购好了商品，用户可以通过查看购物车来修改购物车中的商品数量，或删除不需要购买的商品，然后单击“结算”，进行结算。单击“确认”按钮确认订单，如图1-14所示。
图1-14购物订单确认
图1-15支付宝信息设置
3．物流配送信息及支付方式设置
（2）支付方式设置淘宝购物需要通过第三方支付平台——支付宝进行支付，因此需要按支付方式设置流程绑定银行卡与支付宝账号，以便支付所确认购买的宝贝，如图1-15所示。
4．订单支付
支付宝信息设置完成后，输入支付宝密码并单击“付款”按钮进行支付。
5．宝贝配送与签收
（1）宝贝配送。支付成功后，将进入物流配送环节，用户可以在手机上查看自己订单的物流信息及当前的配送状态，如图1-16所示。
（2）宝贝签收。当用户收到配送机构送达的货物后，请按以下步骤进行签收：
1）检查货物的外包装是否完好，包括封条是否完整、包装是否完好、有无拆开痕迹、有无进水痕迹等，若发现有类似迹象，立即拒收货物。
2）若货物外观无异常，打开包装检查包装内货物有无破损、单据是否齐全、单据商品信息是否与实物一致等，若发现有异常，请立即拒收货物，并联系网站客服反馈信息；若无异常请直接签收，货到付款的订单需要用户现场全额付款。
3）若用户在开包后因为货物异常或其他原因要求退货，请协助配送人员现场包装好货物，以免在货物返回过程中出现货物丢失或调包的情况。
6．信用评价
当签收货物且没有发现问题时，应通知支付宝向卖家付款，并对卖家进行评价，其中包括描述相符、物流服务、发货速度和服务态度四方面，如图1-17所示。
图1-16宝贝物流信息图1-17信用评价
（1）了解在电脑上安装使用手机模拟器的方法。
（2）了解手机模拟器的安装环境和配置要求。
（3）能够正确下载、安装、配置和使用手机模拟器。
（4）能够熟练使用手机模拟器模拟手机应用和页面浏览。
（1）连接互联网的个人电脑，安装Windows7或Windows10操作系统。
（2）3G/4GAndroid智能手机，开通3G/4G网络或连接Wi-Fi。
三、实训背景知识
本实训以网易MuMu模拟器为例，正确设置安装环境、下载安装MuMu模拟器，设置手机界面和应用手机模拟器。
实训任务如下：
l配置MuMu模拟器安装使用环境。
l下载安装MuMu模拟器。
图1-18MuMu模拟器没有正确设置使用环境的提示
l设置MuMu模拟器。
l安装手机App应用。
l浏览手机网页。
1．设置MuMu模拟器安装使用环境
MuMu模拟器正常运行需要开启VT（CPU虚拟化），关闭Hyper-V，并且安装DirectX，否则使用时会出现问题。如果在MuMu模拟器的使用时出现如图1-18所示的对话框，就需要进行下面的三个步骤。
（1）开启VT（VirtualizationTechnology，即虚拟化技术，可以扩大硬件的容量，简化软件的重新配置过程）。重新开机，在Windows系统启动之前按“Del”或“F12”等键进入电脑主板（BIOS）设置，将BIOS中的“Virtualization”、“IntelVirtualTechnology”或者“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）安装DirectX11。DirectX（DirecteXtension，简称DX）是由微软公司创建的多媒体编程接口。由C++编程语言实现，遵循COM，适合运行在Windows操作系统之上。最新版本为DirectX12，但目前最常用的还是DirectX11。
下载完成后解压并运行安装程序。在出现的欢迎界面中选择“我接受此协议”并单击“下一步”按钮，如图1-22所示，继续按照提示单击“下一步”按钮完成安装。
图1-22安装DirectX11
2．下载安装MuMu模拟器
图1-23MuMu模拟器下载界面
安装完成后启动MuMu模拟器，效果如图1-24所示。
图1-24MuMu模拟器安装及启动
（2）初始安装完成后，MuMu模拟器可以模拟手机和平板的正常功能了，默认的是平板模式。可以将其设置为手机竖屏模式，单击模拟器右上角的设置按钮，选择“设置中心”，再选择“界面设置”，然后选择“自定义”，将宽度设为1080，高度设为1920后单击“保存并关闭”按钮，重新启动MuMu模拟器，如图1-25所示。
图1-25MuMu模拟器通过界面设置更改为手机的竖屏模式
图1-26MuMu模拟器App安装使用
图1-27复制文件到共享文件夹
在手机桌面选择“系统应用”_“文件管理器”_，单击“eclayout.html”文件，然后在“打开方式”对话框中，选择“搜狗浏览器”进行网页效果浏览，如图1-28所示。
图1-28网页效果浏览
（1）了解不同的二维码及其应用场景。
（2）掌握移动电子商务应用中不同种类的二维码制作方法。
（3）掌握二维码编辑及个性化方法。
（4）能够使用二维码进行移动营销。
（1）连接互联网的个人电脑，安装Windows7或Windows8操作系统。
（2）3G/4GAndroid或iOS智能手机，开通3G/4G网络或链接Wi-Fi。
自从二维码出现以后，无论走到哪里，线上还是线下，总能看到大量的二维码，有商家的，也有个人的。二维码的火爆预示着移动营销时代到来了，出现了很多免费的二维码制作软件，图2-7所示的是二维码大师软件界面。如何做好二维码营销，现在还处于摸索状态。本实训旨在从移动商务营销的角度出发，为读者深度解密二维码，并详细介绍二维码的具体实操方法，从中挖掘出二维码的真正潜能。
l制作文本功能二维码。
l制作名片功能二维码。
l制作网址二维码。
l制作短信功能二维码。
l制作Wi-Fi功能二维码。
l制作地图功能二维码。
l制作带Logo的二维码。
图2-7二维码大师软件界面
1．制作文本功能二维码
图2-8制作文本二维码
当然，还可以在二维码下面设置不同风格的个性化文本二维码。
图2-9手机扫描生成的文本二维码后还原的文本信息
2．制作其他功能的二维码。
图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/4GAndroid或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或记事本设计页面结构，代码如下：
2015-5-16
xxxx运动型摄像机为您提供专业的外观和拍摄风格，是婚礼、企业交流和教育机构的理想选择。这款摄录一体机重量轻，便于携带，其肩扛式整体设计意味着您的客户一眼就能看出您的专业精神。可以按高清和标清格式直接录制到可移动存储卡或32GB内置存储卡，从而增强工作流程灵活性。与内置存储卡和记忆卡相结合，支持"接力记录"和"同步记录"等录制功能。使用索尼的L系列InfoLithium电池NP-F970（选配）时，该摄像机可连续记录长达14小时，非常适合婚礼或商务会议等想要一直录制的场合。xxxx运动型摄像机是理想的入门级产品，适用于几乎任何类型的非线性工作流程。该流程是极为经济高效的DVD和蓝光内容生产套装，足以灵活地表达您的创意并满足客户的要求
视频演示
使用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;}
GENERALSTYLING
body{
background:#0d1424url(images/body-bg.jpg)no-repeatcentertop;
font:.81em/150%微软雅黑Light，宋体;color:#666;}
a{color:#026acb;text-decoration:none;outline:none;}
a:hover{text-decoration:underline;}
p{margin:001.2em;padding:0;}
ul,ol{margin:1em01.4em24px;padding:0;line-height:140%;}
li{margin:00.5em0;padding:0;}
h1,h2,h3,h4,h5,h6{line-height:1.4em;margin:20px0.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:0auto;}
HEADER
#header{position:relative;height:160px;}
/*sitelogo*/
#site-logo{position:absolute;top:10px;}
#site-logoa{font:30px/100%微软雅黑;color:#fff;text-decoration:none;}
#site-description{
font:italic100%/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:6px10px;
border-radius:5px;box-shadow:inset01px2pxrgba(0,0,0,.2);transition:width.7s;
}
MAINNAVIGATION
#main-nav{width:100%;background:#ccc;margin:0;padding:0;position:absolute;
left:0;bottom:0;z-index:100;
background:#6a6a6aurl(images/nav-bar-bg.png)repeat-x;
background:linear-gradient(-90deg,#b9b9b9,#6a6a6a);
border-radius:8px;box-shadow:inset01px0rgba(255,255,255,.3),01px1pxrgba(0,0,0,.4);}
#main-navli{margin:0;padding:0;list-style:none;float:left;position:relative;}
#main-navli:first-child{margin-left:10px;}
#main-nava{line-height:100%;font-weight:bold;color:#fff;display:block;padding:14px15px;
text-decoration:none;text-shadow:0-1px0rgba(0,0,0,.5);
font:1em/110%微软雅黑Light;}
#main-nava:hover{color:#fff;background:#474747;
background:linear-gradient(-90deg,#282828,#4f4f4f);}
CONTENT
#content{
background:#fff;margin:30px030px;padding:20px35px;width:600px;float:left;
border-radius:8px;box-shadow:01px3pxrgba(0,0,0,.4);}
.post{margin-bottom:40px;}
.post-title{margin:005px;padding:0;font:26px/120%微软雅黑;}
.post-titlea{text-decoration:none;color:#000;}
.post-meta{margin:0010px;font-size:90%;}
.post-image{margin:0015px;}
SIDEBAR
#sidebar{width:280px;float:right;margin:30px030px;}
.widget{background:#fff;margin:0030px;padding:10px20px;
.widgettitle{margin:005px;padding:0;}
.widgetul{margin:0;padding:0;}
.widgetli{margin:0;padding:6px0;list-style:none;
clear:both;border-top:solid1px#eee;}
.widget.flickr_badge_image{margin-top:10px;}
.widget.flickr_badge_imageimg{width:48px;height:48px;margin-right:12px;
margin-bottom:12px;float:left;}
FOOTER
#footer{clear:both;color:#ccc;font-size:85%;}
#footera{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:15px100px5px0;position:static;}
#site-description{margin:0015px;position:static;}
#content{width:auto;float:none;margin:20px0;}
#sidebar{width:100%;margin:0;float:none;}
#sidebar.widget{padding:3%4%;margin:0010px;}
@mediascreenand(max-width:480px){
html{-webkit-text-size-adjust:none;}
#main-nava{font-size:90%;padding:10px8px;}
（4）使用Dreamweaver或记事本设计在index.html页面文件中增加并链接上述样式文件的代码，放在
标记中，代码如下（粗体部分）：……
4．在个人电脑和手机浏览器中进行浏览
在个人电脑的浏览器中的预览效果如图2-18所示，在手机浏览器中的预览效果如图2-19所示。
图2-18手机页面在个人电脑中的浏览效果图2-19手机页面在手机中的浏览效果
（2）通过移动支付项目，了解移动支付的基本流程。
（1）Android或iOS智能手机，开通3G/4G网络或连接Wi-Fi
（2）个人身份证。
移动支付是指用户通过移动终端设备（通常是手机），对所消费的商品或服务进行账务支付的一种服务方式。它的主要原理是用户通过移动设备、互联网或者近距离传感直接或间接向银行金融机构发送支付指令，产生货币支付和货币转移行为，从而实现移动支付功能。移动支付将移动终端设备、互联网、移动应用提供商以及金融机构相结合，为用户提供货币支付等金融业务。它是移动金融服务的一种，是移动商务的重要环节。
移动支付具有以下三个方面的特点：
1．移动性
由于移动终端具有特定服务实现的随身性和极好的移动性，可以使使用者从长途奔波到指定地点办理业务的束缚中解脱出来，摆脱支付实现的营业厅特定地域限制。
2．实时性
3．便捷性
移动支付同时具有缴费准确、无须兑付零钱、快捷、多功能、全天候服务、网点无人值守的便捷性。
（一）招商银行手机银行
1．简介
招商银行手机银行是专门为智能手机和移动终端客户量身打造的移动金融服务平台，为广大客户提供全天候银行金融服务的自助理财系统。新版招商银行手机银行创新推出理财频道、智能提醒、闪电贷、收支智能分类以及财经资讯参考频道等，为用户提供丰富实用的金融服务。
其常用金融服务功能如下：
账户管理：一卡通、信用卡账户查询、交易查询、密码管理、挂失、ATM/POS限额修改等。
自助转账：转一卡通、信用卡、存折、他行账户，定活互转、银证转账、通知存款转账等。
投资管理：基金查询、基金申购赎回、理财专户管理、证券行情、受托理财购买赎回、银证转账等。
信用卡管理：信用卡额度管理、交易明细查询、还款设置、积分管理等。
外汇管理：外汇购汇、外汇结汇。
2．下载招商银行App
图3-8招商银行官方网站
图3-9招商手机银行客户端安装二维码入口
（2）根据自己的手机类型（Android、iPhone），选择下载手机银行客户端，这里以Android系统的智能手机为例，有如下两种方法，选择其一下载并安装招商银行手机银行客户端。
2）使用手机扫描如图3-9所示的二维码直接打开链接下载。
3．招商银行手机银行注册
用户可以通过手机银行客户端自助注册，也可以通过个人网银或到营业网点柜台签约开通。下面以客户端自助注册进行说明，如图3-10所示。
（2）输入手机号和验证码，单击“下一步”。
图3-10招商银行手机注册
4．招商银行手机银行的使用
图3-11招商银行手机转账
（2）单击“城市服务”，选择“话费流量”，尝试手机缴费。
（3）尝试招商银行手机银行的其他功能。
（二）手机支付宝
支付宝交易是指买卖双方使用“支付宝”软件系统，且约定买卖合同项下的付款方式为通过该公司于买方收货后代为支付货款的中介支付。即在交易过程中，买方将货款支付给第三方的支付宝，待买方收到货物后，支付宝再将货款支付给卖家，这样可以避免货款直接支付给卖家后，卖家不发货的风险。
支付宝的主要功能如下：
支持余额宝，理财收益随时查看。
支持各种场景关系，群聊群付更方便。
提供本地生活服务，买单打折尽享优惠。
为子女父母建立亲情账户。
随时随地查询淘宝账单、账户余额、物流信息。
异地跨行转账，信用卡还款、充值、缴水电煤气费。
行走捐，支持接入iPhone健康数据，可与好友一起健康行走及互动，还可以参与公益。
2．下载支付宝App
图3-12支付宝页面
（2）可以选择手机扫码下载，也可以根据自己的手机类型（Android、iPhone），选择下载支付宝手机客户端，如图3-13所示。
图3-13手机扫码下载支付宝手机客户端
3．注册支付宝
使用支付宝支付服务需要先注册一个支付宝账户，分为“个人账户”和“企业账户”两类。
（2）选择“同意”。
（4）根据提示设置身份信息和支付方式。
用户使用支付服务需要实名认证是央行等监管机构提出的要求，实名认证之后可以在淘宝开店，增加更多的支付服务，更重要的是有助于提升账户的安全性。
实名认证需要同时核实会员身份信息和银行账户信息。
2016年7月1日开始，实名认证不完善的用户，其余额支付和转账等功能会受到限制。
4．支付宝的主要功能
手机支付宝的主界面如图3-14所示。
（1）转账。在主界面单击“转账”功能，转账可以“转给我的朋友”，“转到支付宝账户”以及“转到银行卡”，如图3-15所示。
（2）生活缴费。可以缴纳水电燃气费、有线电视费、固话费、宽带费、物业费和暖气费等。
（4）付款。线上付款的流程是，拍下宝贝→确认付款→收银台→卖家发货→确认收货→评价。
其中有九种付款方式供网购选择，分别是快捷支付、网上银行、余额支付、找人代付、货到付款、信用卡分期、网点支付、消费卡支付和国际信用卡支付。
线下付款，单击界面上方的“扫一扫”，扫描商家的二维码进行付款；也可以单击“付钱”，让商家扫描付款二维码进行付款。线下付款无须开通网上银行。
（5）余额宝。余额宝是支付宝推出的理财服务，但也能用于日常的购物、信用卡还款等操作。单击界面的“余额宝”。可以把绑定的银行卡里的资金或支付宝的余额转入余额宝，也可以把余额宝里的资金转出到银行卡或余额。
（6）尝试支付宝的其他功能。
图3-14手机支付宝主界面图3-15手机支付宝转账界面
5．支付宝的安全保护
2．绑定银行卡
（3）根据提示输入银行卡的持卡人姓名和卡号。
（4）填写卡类型、手机号码，进行绑定。
（5）手机会收到一条附带验证码的短信，填写后确认。
（6）输入两次，完成设置支付密码，银行卡绑定成功，如图3-16所示。
3．支付场景
图3-17扫码提交资料
（四）苹果支付（ApplePay）
苹果支付服务采用近场通信技术，用户可用苹果手机进行免接触支付，免去刷信用卡支付步骤。用户的信用卡、借记卡信息事先存储在手机中，用户将手指放在手机的指纹识别传感器上，将手机靠近读卡器，即完成支付。
ApplePay的特点：
（1）免现支付很便捷。ApplePay简单易用，并且支持日常所用的多款Apple设备，无论在店里还是App中，用户都可安心支付。与以往许多支付手段相比，ApplePay更加简单易用，也更为安全。
（3）App内支付很便捷。可以在各类App中使用ApplePay进行消费支付。无论是支付车费、订购外卖，还是购买一双新运动鞋，只需轻触一下，即可快速、轻松又安全地完成付款。
（4）隐私及安全保护。用ApplePay支付很安全。在进行支付时，ApplePay会使用一个设备特定号码和一个独有的交易代码。因此，用户的卡号从来都不会存储到其设备或苹果的服务器上。在进行付款时，ApplePay也从来不会将用户的卡号共享给商家，以保护用户的购物隐私。
当用户使用借记卡或信用卡支付时，ApplePay不会储存可以对用户进行追踪的交易信息。
（5）一个“钱包”全包揽。登机牌、各种票券，还有用户的借记卡、信用卡和商店卡都能存放在“钱包”App中。ApplePay支持国内众多银行的大多数信用卡和借记卡，只需把适用的卡添加至“钱包”App，用户就能照样享受该卡的积分和优惠。
2．使用方法
iPhone、iPad、AppleWatch或Mac都可以添加银行卡使用ApplePay，下面以iPhone7为例演示如何设置ApplePay。
使用ApplePay需要在苹果系统自带的“钱包”APP里添加银行卡。iPhone用户进入“钱包”后，单击屏幕右上方的+号，再单击“继续”就可进入申请页面，然后将银行卡正面放置在iPhone摄像头前，使卡面出现在屏幕的提示框内，系统会自动识别卡号，当然也可以手动输入卡号，接下来需要手动输入姓名、卡片有效期与安全码，还要阅读业务须知并选择接受。添加卡片成功后需激活才能使用，客户要确认手机号，并接收和输入验证码，才能成功激活。
同一台设备可以添加多张银行卡。首张添加卡即为默认卡。客户可以在“钱包”中通过长按卡片并将该卡排列为首位的方式将该卡设为默认付款卡，也可在“设置”的“钱包”与“ApplePay”功能中设置默认付款卡。
3．使用地点
在商店、餐厅、酒店以及众多消费场所，都可使用ApplePay进行支付。用户还可以在iPhone和iPad上的各类App内使用ApplePay。
线下结账时，请留意是否有ApplePay标志和银联云闪付标志二者中的任意一个，如没有，请询问店家是否可使用ApplePay。
（2）熟悉常见的微店平台。
（3）了解微店的搭建与运营。
（1）Android或iOS智能手机，开通3G/4G网络或连接Wi-Fi。
（2）连接互联网的电脑，安装Windows7或Windows8的操作系统。
微店的设置远没有淘宝网店那样复杂，无论是前期准备，还是安装注册、店铺优化，都可以在一部手机上随心玩转。下面将以口袋购物的微店为例，简要介绍微店的搭建与运营。
1．注册微店账号
（1）通过手机号注册账号。分别进行填写手机号、图形验证码、短信验证码，设置密码和确认密码等操作。
（2）选择主体类型（如个人或企业），个人商家选择个人类型。
（3）填写“店铺信息”，上传照片，输入店铺名称和店铺介绍。单击下一步，即开店成功，如图4-9所示。
图4-9微店注册成功后电脑端页面
2．微店实名认证
根据国家《网络交易管理办法》，应监管部门要求，微店对卖家进行实名制核实，实名认证有利于确定商家身份，营造更安全的网络交易环境，避免不法分子通过网络欺骗消费者。注册成功后，卖家需要进行实名认证才能继续使用微店的其他功能，如图4-10所示。
按照页面提示，输入真实姓名、身份证号、银行卡号后，单击“实名认证并绑卡”，如图4-11所示。要求姓名与身份证、银行卡注册信息一致。输入无误即可完成认证。
图4-10微店认证图图4-11微店实名认证界面
3．店铺基本信息设置
（1）店铺资料完善
图4-12微店主界面图4-13微店店铺管理界面图4-14微店店铺资料界面
（2）其他资料完善。除了店铺资料基本信息的完善，还需要完善店长资料、交易设置、子账号管理等信息。
子账号管理是根据岗位的需求，新建子账号。
4．商品管理
（1）商品上架。可以通过手机或电脑等途径添加商品、下架商品或删除商品。
有两种方式可以快速添加商品。一种方式是单击微店主界面上方微店下的“创建商品”按钮。添加商品图片、标题、类目、首单积分优惠、型号、价格、库存、商品详情、分类等，如图4-15所示。一个商品最多支持15张图片，第一张图片系统默认为商品主图。
宝贝上架的过程中，尤其要注意商品详情的编辑。因为商品详情是用于介绍产品的功能（价值点）以及那些与众不同的地方，进而促进买家购买的关键信息。优秀的商品详情可以提高宝贝转化率，促进买家购买。同时关联营销更多商品，增加顾客购买其他商品的可能性，从而让客户有更多的选择机会，可以留住客户。
图4-15添加商品
消费者在购买商品时看重的是商品的物质属性和价值属性，所以应为买家提供详尽的商品属性。在添加商品时，可以选择商品的型号、价格、库存等基本属性，同时还要展示商品的品牌、包装、重量、规格、产地等基本属性，对这些描述越详细，买家就越容易购买。
成功添加商品后，在“商品”页面，还可以预览所添加的商品，可以显示商品的详情。
同时，还可以在“商品”页面继续一个一个地添加商品，也可以“批量管理”和“分类管理”所添加的商品。
另外一种方式是单击主界面下方六宫格中的“商品”，如果卖家有货源，直接选择“快速添加商品”，添加内容同前。
如果卖家没有货源，无需资金和囤货，只需要单击“前往选货中心”，快速选货，一键代理（上架），并且不收取任何代理费用。若想寻找货源，还可以滑到第二屏“货源”进入后单击“找品牌或加盟微店”，凡是商品或店铺有“微店上心”均可放心代理。最后选择货源，单击“我要代理”将商品代理到自己的店铺，如图4-16所示。
如果通过某件商品进入店铺的消费者觉得不满意，可以考虑利用关联推荐的方式，如推荐正在进行折扣优惠活动的商品、近期热销的商品等，有效扩大交易面。
图4-16商品货源
（2）商品下架和删除。在微店的主界面，单击“商品”宫格，进入“商品”界面，最下方有“下架”或“删除”按钮，可以将商品下架和删除。还可以单击商品图片进入编辑商品，将商品库存更改为“0”即为下架。
（3）商品分类。在微店的主界面进入“商品”，单击“分类管理”，可新建分类与管理分类；商品分类添加成功后，选择未分类商品，单击“管理”，单击“批量分类”，勾选你想设置在已勾选分类中的商品，单击“分类至”，即可批量将商品设置在某个商品分类中，如图4-18所示。
图4-17编辑商品界面图4-18商品分类管理界面
5．店铺装修
（1）店铺装修基础设置。选择微店主界面上方“店铺编辑区域”，进入“店铺管理”，单击“打理店铺”按钮后出现自定义装修页面进行操作。
（2）店铺封面设置。店铺封面是以导航形式设置店铺分类展示，把更具吸引力的商品类型优先展示给买家。点击右上角封面设置，可设置无封面、封面大图、封面导航1列、封面导航2列。店铺封面尺寸为720′1334像素，如图4-19所示。店铺封面背景图可设置系统默认，也可自助添加。
图4-19店铺封面设置
（3）店招设置。微店的招牌，简称店招。一个店招的好坏，能够在一定程度上影响整体的店面效果甚至营销效果。设置店招，单击店招位置旁边的“插入”按钮，选择2:1（640′320像素）或者8:5（640′400像素）样式，如图4-20所示，并单击更换店招图片，如果没有好看的图片，选择“素材中心”使用更多美图，素材中心还可以不同风格分类切换，然后编辑文字与更换图片，图片也可以选择自己拍照或从手机相册上传。最后单击完成按钮即可生成新店招。店招以宣传微店为主，所以建议选用能体现微店商品特色的图片和文字来装点店招。尤其是店铺近期有关于商品的优惠活动，也可以在店招中突出表现。
（4）店铺信息编辑。单击“店铺动态”旁的编辑按钮，可编辑头像样式：头像居左、图像居中、极简样式，还可设置店铺Logo、店铺名称、店铺公告。
图4-20店招设置
（6）导航设置。单击“店铺动态”旁的插入按钮，可设置文本导航、图片导航。
（8）推荐商品设置。单击“店铺动态”旁的插入按钮，可设置推荐商品。推荐商品可设置为两列式、大图样式、详细列表。
（9）推荐店长笔记模块。店长笔记模块有横向滑动式（节省空间）、列表式（强化展示）两种样式。单击店长笔记模块，进入编辑店长笔记页面，单击添加店长笔记，进入店长笔记选择列表页，选择笔记后，返回到编辑店长笔记页面，店长笔记添加完成，展示缩略样式。推荐笔记模块最多添加10条笔记，已添加的店长笔记，可删除、可更换；可设置列表名称（15字以内）；单击“删除”，可直接删除笔记；单击“更换”，进入店长笔记选择列表，选择店长笔记后，替换原来的笔记。
（11）店铺装修模块。店铺装修分为免费模板和付费模板。单击未购买的收费模板，会进入模板预览页，可预览真实数据的模板效果。单击页面底部购买后弹起付费方式选择，选择后单击“确定”，进入收银台支付流程。进入店铺装修页面，弹层提示购买成功，单击“立即体验”后，可直接进行模块编辑，如图4-21所示。
图4-21店铺装修
图4-22店铺推广
店铺推广都会产生一定的费用，卖家需要仔细衡量。
7．淘宝搬家
使用微店App的淘宝搬家助手，可以快速地把淘宝店的商品复制到微店。
首先，打开微店App，单击右下方的小齿轮按钮，进入“设置”界面，单击“淘宝搬家助手”选项。进入“淘宝搬家助手”界面，可以看到“快速搬家”和“普通搬家”两种方式。单击“快速搬家”按钮，进入页面后输入淘宝搬家的账号和密码，等待系统搬家，24小时操作完成。
（1）掌握移动Web响应式（自适应）页面设计原理。
（2）能够设计电脑、平板电脑手机响应式（自适应）页面。
（3）能够将电脑站点页面重构为响应式（自适应）页面。
（1）连接互联网的电脑，安装Windows7或Windows8操作系统，安装Dreamweaver和高版本浏览器。
移动开发设计面对的手机或平板电脑的屏幕尺寸相当丰富。在电脑端常用的两种布局方式是固定布局和弹性布局，前者设置一个绝大多数电脑能正常显示的固定宽度，后者则采用百分比。但是，对于移动设备来说，这种布局方式就显得力不从心了。于是，响应式（自适应）页面布局应运而生。响应式布局使用的是MediaQuery技术，它在css2中就已经出现了，随着html5和css3的到来又增添了新的生机。响应式web设计并非新的技术，只是将已有的开发技巧（弹性布局、弹性图片和媒体查询等）整合在了电子商务页面中。
响应式（自适应）页面布局主要基于以下技术：
（1）CSS3的MediaQuery技术。其语法结构为：
@mediascreenand屏幕大小{样式}
例如：
@mediasrceenand(max-width：600px){width：400px;color:red;}
（2）CSS3的Viewport技术。Viewport技术用于正确识别移动设备的宽度，其语法结构为：
l设计一个基本的响应式（自适应）页面布局框架。
l将实训项目四的手机页面重构为响应式（自适应）页面。
图4-23实训站点文件夹结构
1．设计基本的响应式（自适应）页面布局框架
（1）本实训中的手机网页素材包括页面描述文字、图片和视频三个部分，先建立一个站点文件夹respage，在respage中再建立一个index.html页面文件，如图4-23所示。
（2）使用HTML标记及属性设计页面结构。使用Dreamweaver或记事本设计index.html页面结构，代码如下：
头部（header）
内容标题
文本
边栏(sidebar)
页脚（footer）
（3）增加viewport和Mediaquery代码（粗体部分）。
/*
body{font:1em/150%Arial,Helvetica,sans-serif;}
a{color:#669;text-decoration:none;}
h1{font:bold36px/100%Arial,Helvetica,sans-serif;}
#pagewrap{padding:5px;width:960px;margin:20pxauto;}
#header{height:180px;}
#content{width:600px;float:left;}
#sidebar{width:300px;float:right;}
#footer{clear:both;}
MEDIAQUERIES
/*980px以下的屏幕尺寸有效*/
@mediascreenand(max-width:980px){
#pagewrap{width:94%;}
#content{width:65%;}
#sidebar{width:30%;}
/*700px以下的屏幕尺寸有效*/
@mediascreenand(max-width:700px){
#content{width:auto;float:none;}
#sidebar{width:auto;float:none;}
/*480px以下的屏幕尺寸有效*/
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:solid1px#ccc;}
（4）在电脑、平板电脑和手机浏览器中的预览效果，如图4-24所示。
a）
图4-24基本自适应框架的浏览效果
b）c）
图4-4基本自适应框架的浏览效果（续）a）电脑预览效果b）平板电脑预览效果c）手机预览效果
2．将实训项目三的手机页面重构为响应式（自适应）页面
（1）将media-queries.css文件进行修改，根据电脑、平板电脑和手机的宽度增加Mediaquery代码。修改后的media-queries.css文件完整代码如下：
smallerthan980
#content{width:60%;padding:3%4%;}
#sidebar.widget{padding:8%7%;margin-bottom:10px;}
smallerthan650
@mediascreenand(max-width:650px){
smallerthan560
（2）在电脑、平板电脑和手机浏览器中的预览效果，如图4-25所示。
图4-25修改后的页面在电脑、平板电脑和手机上的浏览效果a）电脑预览效果b）平板电脑预览效果c）手机预览效果
（3）个人身份证、银行卡等资料；中小企业资质材料（营业执照、法人代表信息和保证函等）。
下面以订阅号的操作为例演示申请过程。
（2）按照相应的提示完成相应操作。
设置时需要注意：设置完全匹配功能时，若选择了全匹配，在编辑页面则会显示“已全匹配”，对方发送的内容与设置的关键词须完全一样，才会触发关键词回复，不能多一个字符也不能少一个字符。例如，设置的关键词为“123”，仅回复“123”才会触发关键词回复。在没有选择全匹配的情况下，编辑页面则会显示“未全匹配”。只要对方发送内容包含设置的完整关键词，就会触发关键词回复给对方。例如，设置的关键词为“123”，回复“1234”会触发，但回复不完整的关键词“12”则不会触发关键词回复。
（2）自定义菜单。公众号可以在会话界面底部设置自定义菜单，菜单项可按需设定，并可为其设置响应动作。用户可以通过单击菜单项，收到设定的响应，如发送消息、跳转链接等。
发送信息：可发送信息类型包括文字、图片、语音、视频和图文消息等。但未认证订阅号暂时不支持文字类型。
跳转小程序：自定义菜单可跳转已经绑定的小程序。
图5-5投票管理
在管理模块下，一个刚注册成功的订阅号有三个基础功能：消息管理、用户管理和素材管理。
（1）消息管理。消息管理用于接收用户对公众号发送的消息。若一个订阅用户48小时内未与公众号互动，那运营者是无法主动发送消息给用户的，直到用户下次主动发消息方可对其回复。
（3）素材管理。素材管理主要有四个类型：图文消息、图片、语音和视频。图片素材管理有一个分组功能，可以将上传过的图片新建分组进行分门别类整理，方便索引使用。
目前设置图文消息内容没有图片数量限制，正文里必须要有文字内容，图片大小加正文内容不超过20000字符即可，如图5-6所示。
图5-6素材管理
图5-7秀米编辑页面
6．添加客服
如若要添加客服人员，开通“客服功能”插件的权限后，可在“功能—客服功能”中，添加和管理客服人员。客服人数支持100人。
开发者可以通过小店接口来实现快速开店，目前支持以下接口：商品管理接口、库存管理接口、邮费模板管理接口、分组管理接口、货架管理接口、订单管理接口和功能接口。
8．小程序管理
（2）小程序头像。新头像不允许涉及政治敏感与色情；图片格式必须为bmp、jpeg、jpg、gif；不可大于2M。一个月内可修改五次。
（4）服务范围选择。可申请不少于一个不多于五个服务范围。服务范围分两级，每级不能为空。特殊行业需提示特殊资质。一个月内可修改一次。
为扩展小程序的使用场景，便于用户使用小程序的服务，公众号可关联小程序，并在公众号图文消息、自定义菜单、模板消息等场景中使用已关联的小程序。
公众号可将已关联的小程序页面放置到自定义菜单中，用户单击后可打开该小程序页面。公众号运营者可在公众平台进行设置，小程序可被添加至一级菜单和二级菜单内。用户单击自定义菜单即可跳转至小程序页面。
9．推广功能
展示位置：图文消息的全文页面底部。
展示位置：图文消息的全文页面底部
1）了解“头条号”不同类别的区别。
3）了解如何运营“头条号”。
1）Android或iOS智能手机，开通3G/4G网络或连接Wi-Fi。
2）连接互联网的电脑，安装Windows7或Windows8的操作系统。
3）个人身份证以及身份证名字开户的银行卡。
“今日头条”于2012年8月上线，是一款基于数据挖掘技术的个性化推荐引擎产品，它为用户推荐有价值的、个性化的信息，提供连接人与信息的新型服务，是国内移动互联网领域成长最快的产品之一。
在信息爆炸的时代，人们面对的选择越来越多，选择过多，信息超载，也常常会使人无所适从。在这种情况下，推荐引擎便开始展现技术优势，发挥威力。“今日头条”就是一款基于数据挖掘的推荐引擎产品，它不是传统意义上的新闻用户端，没有采编人员，不生产内容，运转核心是一套由代码搭建而成的算法。算法模型会记录用户在“今日头条”上的每一次行为，在海量的资讯里知道用户感兴趣的内容，甚至知道用户可能感兴趣的内容，并将它们精准推送给用户。
以下以个人自媒体为例讲解“个人”类“今日头条”写作平台的设置和运营。
1．申请“头条号”
随后，单击右上角“头条产品”中的“头条号”，如图5-8所示。进入“头条号”后，选择入驻类别。
图5-8今日头条官方网站
根据申请注册“头条号”的不同类型，申请者需提交不同材料，如图5-9所示。
图5-9不同类型的“头条号”需提交的材料
选择入驻类别后，将进行入驻材料的填写，并设置头条号名称、头条号介绍、头条号头像等信息。
2．注销“头条号”账号
注销个人类型账号需要提交的材料（仅限账号注册人申请）有：申请注销函、注册人手持身份证的照片（各项内容需清晰可见）。申请人签字必须是本人手写签字；账号注销后，不支持申请恢复，不支持自主提现。
（1）个人账号需提供：媒体名字、申请账号时使用的身份证号、身份证正反面彩色扫描件、账号绑定的手机号码、申请者手持身份证照片。
4．“头条号”的主页
（1）私信。“头条号”私信新增“关键词自动回复”功能。设置完关键词，“头条号”在收到含关键词的私信内容后，系统将自动回复已设置好的回复内容。可设置最多200个规则，每个规则最多可设置10个关键词和5条回复，每条回复内容需在300字以内。
关键词回复可设置“精准匹配”或“模糊匹配”。当设置为“精准匹配”时，私信内容需与关键词完全相同才能触发自动回复；当设置为“模糊匹配”时，私信内容只需包含关键词即可触发自动回复，但包含的关键词需完整、准确，否则将不会触发自动回复。例如，设置关键词“烘焙技巧”模糊匹配，当收到私信“烘焙技巧”“烘焙技巧有哪些”时可触发自动回复，当收到私信“烘焙”“烘焙的技巧”时不会触发自动回复。
目前仅支持设置文本回复（可含网页地址），暂不支持图片、音频、视频、超链接等消息类型。
（5）实验室。功能实验室主要有懂车帝、正版图库、热词分析和趣味测试四个功能。
5．“头条号”内容发布
“头条号”主要是发布图文、西瓜视频、微头条和悟空问答等。下面以发布图文和视频为例进行讲解。
图5-10发表图文
图5-11发表视频
（1）了解H5制作工具。
（2）能够使用H5制作平台和工具进行微营销。
（1）安装WindowsXP/7/10操作系统。
（2）Android或iOS智能手机，开通3G/4G网络或连接Wi-Fi。
H5指的是第五代HTML，HTML是“超文本标记语言”的英文缩写。“超文本”是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。“标记”指的是这些超文本必须由包含属性的开头和结尾标志来标记。浏览器通过解码HTML就可以把网页内容显示出来，也构成了互联网兴起的基础。HTML的第一版是在1991年开始研发的，1993年发布。2006年开始创建了第五代的HTML，经过长达八年的努力，HTML5标准规范最终制作完成并向全世界开放。
简单来说，H5具有以下特点：无须下载安装，即点即玩；不受平台限制；高度支持影音、图像和交互动画。
初学者对于H5的设计可在免代码设计平台进行，在无代码基础的情况下，通过免代码H5设计平台，可以很方便地设计H5作品。H5制作工具包括易企秀、MAKA、兔展等，设计方法相似。
用户通过易企秀无须掌握复杂的编程技术就能简单、轻松制作基于H5的精美手机幻灯片页面。同时，易企秀与主流社会化媒体打通，让用户通过自身的社会化媒体账号就能进行传播，展示业务，收集潜在用户。易企秀提供统计功能，让用户随时了解传播效果，明确营销重点，优化营销策略。易企秀提供免费平台，让用户零门槛就可以进行移动自营销，从而持续积累用户。
易企秀的主要功能如下：
（2）海量模板素材请帖、贺卡、电子相册、邀请函、简历模板、企业招聘、公司宣传、产品介绍均可轻松套用。
（3）随时随地查数据动态图表展示H5场景的浏览次数，实时掌握用户提交的信息，金牌数据管家，助力市场营销。
1．易企秀注册
图6-1易企秀官方网站
为了获得更好的体验，建议使用谷歌浏览器。单击右上角的“注册”按钮，以手机号注册为例，输入手机号，获得验证码，随后输入密码，单击“注册”，如图6-2所示。
图6-2易企秀注册
需要注意的是：个人账号永久免费使用，可免费升级到企业账号或秀客账号，企业账号可创建子账号，并可使用更多会员特权。
3．创建场景
图6-3选择模板
选择模板后，进入H5模板编辑器页面，如图6-4所示。
图6-4H5模板编辑器页面
接下来介绍一下编辑器页面每个组件的功能。
编辑器页面最左边是“模板中心”，选择“功能模板”可以将“模板中心”收缩进去。在“模板中心”可以根据“推荐”“互动”“营销”“动效”“排版”“常用”或者按关键字搜索自己想要的模板，但此处选择的都是单页模板。
在编辑器页面右边的“页面管理”中，可以单击各个页面快速切换。在“页面管理”中可以添加页面，复制当前页，删除当前页，还可以添加长页面（长页面是付费企业才能使用的功能，个人用户是不能使用的）。“页面管理”左边的“图层管理”是针对这一页添加的元素都会有的组件管理。
中间的手机框是H5的操作画布，是可编辑区域，画布的分辨率大小为640*1008像素，可以根据这个分辨率制作图片素材和背景素材。画布旁边是一个长条的快捷菜单，分别是撤销、恢复、刷新预览、复制当前页、页面设置、音乐、特效、网格设置、编辑区域缩放、手机边框。
编辑器顶部就是导航栏，可以添加各种元素，分别是文本、图片、背景、音乐、形状、组件、表单和特效。
图6-5“文本”选项卡组件设置
在“动画”选项卡可以添加动画，动画设置（如图6-6所示）主要包括以下内容：
图6-6“文本”选项卡“动画”组件设置
次数：设置文字动画次数，保存、发布后，会按设定好的次数播放文字，以达到自己的预期效果。
循环播放：设置文字是否循环呈现，如勾选，保存、发布后，会循环播放文字，以达到自己的预期效果。
出现顺序：选择文字的出现顺序，有正序、反序和随机三种。
（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的标题、描述等，单击“确定”并在跳转页面选择“发布”即可拿到二维码进行预览，如图6-10所示。
图6-10预览和设置
场景推广有如下六种方式：
（4）推广至物料、名片、宣传单等：将场景二维码印刷在物料上即可。
（5）推广至App、WAP网页等：直接添加场景链接。
6．训练
请制作一个“学校介绍”的展示型H5，要求包括文字、图片和音乐等。