很多类似的CMS网站都有电子书部分,做的不错的如百度和豆丁网的文库,但是他们的技术我们无法复制,实现起来困难很大,因此大多说CMS网站都是以以下几种方式呈现的
1.将文档转为PDF,利用一些在线查看PDF查看方法实现
弊端:如果PFD太大(一般用于CMS网站的电子书都不小,都会好几M,我们的电子书如果做成PDF大概是20多M),一般用户没有这种耐心慢慢等待这么大的文件下载完了才去看,电子书的优势荡然无存
2.或将电子书拆成一个个网页,允许用户一页页浏览
弊端:制作成本很大,几百页的电子书就需要制作几百个文件,及时动态的从数据库加载,也需要网编人员事先录入,还需要开发人员开发一个后来录入的功能
经过网上不断的淘宝,终于找到了一个比较合适的方案,该方案有以下特点:
1.打开速度快,每次仅仅需要加载两幅图片
2.看起来的效果和平常我们看书一样
3.制作起来也比较快,方案
4.能够离线发给客户,可以很方便的部署的客户自己的网站上去
那么我们掀开盖头,先预览一下该电子书的美丽人容颜吧:
实现方法介绍:
利用Flip-page制作的电子书,真正实现看书的效果;
可离线查看,离线查看时,部分菜单功能不能用,必须部署到Web上
如果想看效果,可以从
http://www.caigo365.com/magazine/cjcsc/1st/index.html
http://www.caigo365.com/magazine/Ksdhy/1st/index.html
下面讲述制作步骤:
每页内容为两张图片,1个是缺省打开时的图片,另外一张是放大时显示的图片
1.拷贝Flip-page源码,这个源码可以联系我取得
2.将平常打开时显示的图片拷贝到\pages目录下
3.将放大打开时显示的图片拷贝到\pages\large目录下
4.编辑Booksetting.js文件
- 指定显示哪些页码
flippingBook.pages = [
"pages/page-001.jpeg",
"pages/page-002.jpeg",
"pages/page-003.jpeg",
- 目录效果
// 跳转页设置处
flippingBook.contents = [
[ "首页", 1 ],
[ "目录", 2],
[ "尾页", 84 ],
[ "Modern", 4 ]
];
修改一下参数信息
// 默认杂志图片大小
flippingBook.settings.bookWidth = 750;
flippingBook.settings.bookHeight = 550;
flippingBook.settings.pageBackgroundColor = 0x5b7414;
flippingBook.settings.backgroundColor = 0x83a51c; // 背景颜色修改
flippingBook.settings.zoomUIColor = 0x919d6c;
flippingBook.settings.useCustomCursors = false;
flippingBook.settings.dropShadowEnabled = false,
flippingBook.settings.zoomImageWidth = 1240; // 放大后的 杂志图片大小修改处
flippingBook.settings.zoomImageHeight = 1683;
flippingBook.settings.downloadURL = "http://shanghai.zhiyuan365.com/pdf/zhiyuan_school_2012.pdf";
flippingBook.settings.flipSound = "sounds/02.mp3";
flippingBook.settings.flipCornerStyle = "first page only";
至此一个精美的电子书就制作完毕了。
注意关于如何将做这些图有几种办法:
排版时我们一般是只作为Tif文件或word文件
如果是Word文件,首先发布为PDF,利用工具能够将PDF文件截取为一张张图片
如果是Tif格式一般比较大,可以通过程序将Tif批量转为一般的图片格式,可批量转为大的或小的图片
这个程序的代码和Flippage制作的电子书,我会回头放到http://www.caigo365.com/magazine/index.shtml 下面做个几个链接供大家下载使用