最近接的一个业务，写一个直播系统使用说明的页面（用时是2小时）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用说明</title>
<style>
.helptext{
display:none;
padding-left:30px;
}
.helptitle{
background-color: #CCC;
height: 40px;
line-height: 40px;
margin-bottom:10px;
}
.helptitle h4{
font-size: 20px;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<div id="maincontent">
<div class="helpcontent">
<div class="helptitle"><h4>1、创建直播活动</h4></div>
<div class="helptext">
<div class="wenben">创建直播活动：单击“新建直播活动”—>选中“新建直播活动”，界面如下图：</div>
<div><img src="images/image001.jpg"/></div>
<div>直播活动创建成功，这时用户可以根据自己喜欢配置直播播放器，设置播放限制条件，或者进行设 备直播，又或者进行录屏直播。界面如下图：</div>
<div><img src="images/image002.jpg"/></div>
</div>
</div>
<div class="helpcontent">
<div class="helptitle"><h4>2、设备直播</h4></div>
<div class="helptext">
<div class="wenben">设备直播：单击“我的直播活动”—>选择相应的直播活动单击“直播”（下拉）—>单 击“开始设备直播”。界面如下图：</div>
<div><img src="images/image003.jpg"/></div>
<div>把直播设备接入电脑—>安装你所持直播设备支持的直播驱动（可以询问你的设备购买商，或者阅读 你购买的直播设备的使用说明书）—>登录POLYV直播系统—>选择相应的视频源—>选择相应的音频源（耳 麦、立体混音、内置式麦克风、不直播音频数据（即无声））—>开始直播。界面如下图：下图：</div>
<div><img src="images/image004.jpg"/></div>
<div>直播进行中的界面如下图：</div>
<div><img src="images/image005.jpg"/></div>
</div>
</div>
<div class="helpcontent">
<div class="helptitle"><h4>3、录屏直播</h4></div>
<div class="helptext">
<div class="wenben">录屏直播：单击“我的直播活动”—>选择相应的直播活动单击“直播”（下拉）—>单 击“开始录屏直播”—>之后直播系统会进行硬件检测。界面如下图：</div>
<div><img src="images/image006.jpg"/></div>
<div>单击“开始录屏直播”—>之后直播系统会进行硬件检测，界面如下图：</div>
<div><img src="images/image007.jpg"/></div>
<div>安装驱动：把已经下载下来的POLYV-SCR-v0.9.7录屏驱动解压，并安装。界面如下图：</div>
<div><img src="images/image008.jpg"/></div>
</div>
</div>
<div class="helpcontent">
<div class="helptitle"><h4>4、直播预览</h4></div>
<div class="helptext">
<div class="wenben">直播预览：单击“我的直播活动”—>选择相应的直播活动单击“直播”（下拉）—>单 击“直播预览”。界面如下图：</div>
<div><img src="images/image009.jpg"/></div>
<div>拷贝播放代码：单击“我的直播活动”—>选择相应的直播活动单击“直播”（下拉）—>单击“直播预览 ”(把屏幕滚到最下面就能看到如下界面了)。</div>
<div><img src="images/image010.jpg"/></div>
<div>拷贝播放代码演示：用户可以将代码拷贝到自己的网站的网页中，就能将直播视频推送到自己的 网站。演示如下图：</div>
<div><img src="images/image011.jpg"/></div>
<div><img src="images/image012.jpg"/></div>
</div>
</div>
<div class="helpcontent">
<div class="helptitle"><h4>5、删除直播活动</h4></div>
<div class="helptext">
<div class="wenben">删除直播活动：单击“我的直播活动”—>选择相应的直播活动单击“管理”（下拉 ）—>单击“删除直播”。界面如下图：</div>
<div><img src="images/image013.jpg"/></div>
</div>
<div class="helpcontent">
<div class="helptitle"><h4>6、播放器设置</h4></div>
<div class="helptext">
<div class="wenben">播放器设置：单击“我的直播活动”—>选择相应的直播活动单击“管理”（下拉）—> 单击“播放器设置”。界面如下图：</div>
<div><img src="images/image014.jpg"/></div>
<div>播放器颜色设置：单击“我的直播活动”—>选择相应的直播活动单击“管理”（下拉）—>单击“播放器 设置”—>选择单击“播放器颜色设置”。界面如下图：了)。</div>
<div><img src="images/image015.jpg"/></div>
<div>播放器Logo：单击“我的直播活动”—>选择相应的直播活动单击“管理”（下拉）—>单击“播放器设置 ”—>选择单击“播放器Logo”。界面如下图：</div>
<div><img src="images/image016.jpg"/></div>
<div>播放器Logo预览效果，界面如下图：</div>
<div><img src="images/image017.jpg"/></div>
<div>直播封面图片：单击“我的直播活动”—>选择相应的直播活动单击“管理”（下拉）—>单击“播放器 设置”—>选择单击“封面图片”。界面如下图：</div>
<div><img src="images/image018.jpg"/></div>
<div>直播封面图片：界面如下</div>
<div><img src="images/image019.jpg"/></div>
<div>直播等待图片：单击“我的直播活动”—>选择相应的直播活动单击“管理”（下拉）—>单击“播放器 设置”—>选择单击“等待图片”。界面如下图：</div>
<div><img src="images/image020.jpg"/></div>
<div>直播等待图片（直播没开始的时候显示的图片），界面如下：</div>
<div><img src="images/image021.jpg"/></div>
<div>直播断流图片：单击“我的直播活动”—>选择相应的直播活动单击“管理”（下拉）—>单击“播放器 设置”—>选择单击“断流图片”。界面如下图：</div>
<div><img src="images/image022.jpg"/></div>
<div>直播断流图片效果，界面如下图：</div>
<div><img src="images/image023.jpg"/></div>
</div>
</div>
<div class="helpcontent">
<div class="helptitle"><h4>7、广告设置</h4></div>
<div class="helptext">
<div class="wenben">图片广告：单击“我的直播活动”—>选择相应的直播活动单击“管理”（下拉）—>单 击“广告设置”—>选择“图片广告”。界面如下图：</div>
<div><img src="images/image024.jpg"/></div>
<div>用户可以自定义广告显示的宽度、高度、时长。界面如下图：</div>
<div><img src="images/image025.jpg"/></div>
<div>直播时播放广告的效果，界面如下图：</div>
<div><img src="images/image026.jpg"/></div>
<div>视频广告：单击“我的直播活动”—>选择相应的直播活动单击“管理”（下拉）—>单击“广告设置”—> 选择“视频广告”。界面如下图：</div>
<div><img src="images/image027.jpg"/></div>
<div>直播开始时，播放FLV视频广告效果</div>
<div><img src="images/image028.jpg"/></div>
</div>
</div>
<div class="helpcontent">
<div class="helptitle"><h4>8、观看限制</h4></div>
<div class="helptext">
<div class="wenben"> 观看限制：单击“我的直播活动”—>选择相应的直播活动单击“管理”（下拉）—>单 击“设置观看条件”。界面如下图：下图：</div>
<div><img src="images/image029.jpg"/></div>
<div>同时在线人数的限制：</div>
<div><img src="images/image030.jpg"/></div>
<div>每日流量限制：</div>
<div><img src="images/image031.jpg"/></div>
<div>播放网站限制 <br />
白名单：（观众只能通过白名单网站才能观看直播内容，在白名单之外的网站不能播放）<br />
黑名单：（观众在黑名单网站不能观看直播内容）
</div>
<div><img src="images/image032.jpg"/></div>
<div>播放地域限制（白名单、黑名单）如果用户开启了设置播放地域的白名单该项功能时，就只有白 名单选项里被选中的地域才能播放直播。反之，如果用户开启了设置播放地域的黑名单该项功能时 ，黑名单选项里被选中的地域就不能能播放直播。</div>
<div><img src="images/image033.jpg"/></div>
<div>设置播放密码：如果用户设置了密码并开启该项功能时，观众就要输入密码才能观看直播。</div>
<div><img src="images/image034.jpg"/></div>
<div>直播观看密码界面如下：</div>
<div><img src="images/image035.jpg"/></div>
</div>
</div>
<div class="helpcontent">
<div class="helptitle"><h4>9、直播数据统计（统计单个直播活动的数据）</h4></div>
<div class="helptext">
<div class="wenben"> 直播数据统计：单击“我的直播活动”—>选择相应的直播活动单击“统计”（下拉）—>单击“实时人数观看统计”。界面如下图：</div>
<div><img src="images/image036.jpg"/></div>
<div>实时观看人数：单击“我的直播活动”—>选择相应的直播活动单击“统计”（下拉）—>单击“实时观看人数”。界面如下图：</div>
<div><img src="images/image037.jpg"/></div>
<div>观众统计：单击“我的直播活动”—>选择相应的直播活动单击“统计”（下拉）—>单击“观众统计”。界面如下图：</div>
<div><img src="images/image038.jpg"/></div>
<div>流量统计：单击“我的直播活动”—>选择相应的直播活动单击“统计”（下拉）—>单击“流量统计”。界面如下图：</div>
<div><img src="images/image039.jpg"/></div>
<div>时长统计：单击“我的直播活动”—>选择相应的直播活动单击“统计”（下拉）—>单击“时长统计”。界面如下图：</div>
<div><img src="images/image040.jpg"/></div>
<div>地域分布：单击“我的直播活动”—>选择相应的直播活动单击“统计”（下拉）—>单击“地域分布”。界面如下图：</div>
<div><img src="images/image041.jpg"/></div>
</div>
</div>
<div class="helpcontent">
<div class="helptitle"><h4>10、统计数据（统计用户所有直播活动的数据）</h4></div>
<div class="helptext">
<div class="wenben"> 统计数据：点击“统计数据”—>点击“统计数据”，界面如下图：</div>
<div><img src="images/image042.jpg"/></div>
<div>观众统计：点击“统计数据”—>点击“观众统计”，界面如下图：</div>
<div><img src="images/image043.jpg"/></div>
<div>流量统计：点击“统计数据”—>点击“流量统计”，界面如下图：</div>
<div><img src="images/image044.jpg"/></div>
<div>时长统计：点击“统计数据”—>点击“时长统计”，界面如下图：</div>
<div><img src="images/image045.jpg"/></div>
<div>地域分布：点击“统计数据”—>点击“地域分布”，界面如下图：</div>
<div><img src="images/image046.jpg"/></div>
</div>
</div>
<div class="helpcontent">
<div class="helptitle"><h4>11、用户账户信息设置</h4></div>
<div class="helptext">
<div class="wenben"> 账号信息查看：单击“用户账号”（右上角）—>单击“账号信息”。界面如下图：</div>
<div><img src="images/image047.jpg"/></div>
<div>账号信息设置：单击“用户账号”（右上角）—>单击“信息设置”。界面如下图：</div>
<div><img src="images/image048.jpg"/></div>
<div>账号密码修改：单击“用户账号”（右上角）—>单击“密码修改”。界面如下图：</div>
<div><img src="images/image049.jpg"/></div>
</div>
</div>
</div>
<script src="http://live.polyv.net/js/jquery.min.js"></script>
<script src="http://live.polyv.net/bootstrap/js/bootstrap.min.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<script>
$(".helptitle").click(function(){
$(this).next().toggle(300);
});
</script>
</body>
</html>
效果图：
