查看完整版本: 封面版式E书简易教程【转帖】

封面版式E书简易教程【转帖】

[color=DarkRed][size=6][align=center]作者：zcq101[/align][/size][/color]
在WBZD的航行，大海，红狮等专区下过E书的朋友都只道，他们的书很有特色。目录结构不同于一般的E书。这种方式原理是通过修改HP软件输出的数组pages的结构，在配合编写相应的脚本来实现的。
我以《天誓》为例说说这种样式书的制作，例程种所用到的部分代码取自或修改于航星。墨水、狂鹰等诸多高手，电子书文本、封面图片取自暗夜刺血，在这向他们表示感谢！
首先看看效果
封面
[attach]917072[/attach]

每一卷的目录

[attach]917073[/attach]

正式进入制作
1、准备工作和数组的修改
按照正常的排版，切割文本，但不要打包。下面进行准备工作的最重要的一步：修改数组结构
这是修改前的数组结构，即HP软件输出的样式（由于数组下标有点长，只贴出部分内容，其它结构与贴出代码是一样的）[code]var pages = new Array();
pages[0]=['1_01','本集简介','0','第一集 大风歌'];
pages[1]=['1_02','第一章  乱世','7764'];
pages[2]=['1_03','第二章  帝女花','6532'];
pages[3]=['1_04','第三章  定襄城','6537'];
pages[4]=['1_05','第四章  大风歌','6341'];
pages[5]=['1_06','第五章  去长安','7669'];
pages[6]=['1_07','第六章  梦入京华','7728'];
pages[7]=['1_08','第七章  长安之夜','7595'];
pages[8]=['1_09','第八章  如此受邀','6581'];
pages[9]=['1_10','第九章  夜宴','6986'];
pages[10]=['2_01','本集简介','0','第二集 九鼎传说'];
pages[11]=['2_02','第一章  阶下囚','6832'];
pages[12]=['2_03','第二章  生死状','7266'];
pages[13]=['2_04','第三章  霸王会','7265'];
pages[14]=['2_05','第四章  百鬼迎宾','7168'];
pages[15]=['2_06','第五章  楚巫','7186'];
pages[16]=['2_07','第六章  淮南旧事','7181'];
pages[17]=['2_08','第七章  大楚宝藏','7368'];
pages[18]=['2_09','第八章  火熠神鼎','5551'];
pages[19]=['2_10','第九章  釜底抽薪','6844'];
pages[20]=['3_01','本集简介','0','第三集 菊中秘'];
pages[21]=['3_02','第一章  失算','7180'];
pages[22]=['3_03','第二章  死敌','6729'];
pages[23]=['3_04','第三章  死亡车队','7109'];
pages[24]=['3_05','第四章  怀玉其罪','6371'];
pages[25]=['3_06','第五章  高凡的身世','7103'];
pages[26]=['3_07','第六章  五年前的往事谜团','6123'];
pages[27]=['3_08','第七章  高廉风之死','9757'];
pages[28]=['3_09','第八章  回京','6541'];
pages[29]=['3_10','第九章  巫蛊','5996']; [/code]下面是修改后结构[code]var pages = new Array();
pages[0]=['1_01','本集简介','0','第一集 大风歌',''];
pages[1]=['1_02','第一章  乱世','7764'];
pages[2]=['1_03','第二章  帝女花','6532'];
pages[3]=['1_04','第三章  定襄城','6537'];
pages[4]=['1_05','第四章  大风歌','6341'];
pages[5]=['1_06','第五章  去长安','7669'];
pages[6]=['1_07','第六章  梦入京华','7728'];
pages[7]=['1_08','第七章  长安之夜','7595'];
pages[8]=['1_09','第八章  如此受邀','6581'];
pages[9]=['1_10','第九章  夜宴','6986'];
pages[10]=['2_01','本集简介','0','第二集 九鼎传说',''];
pages[11]=['2_02','第一章  阶下囚','6832'];
pages[12]=['2_03','第二章  生死状','7266'];
pages[13]=['2_04','第三章  霸王会','7265'];
pages[14]=['2_05','第四章  百鬼迎宾','7168'];
pages[15]=['2_06','第五章  楚巫','7186'];
pages[16]=['2_07','第六章  淮南旧事','7181'];
pages[17]=['2_08','第七章  大楚宝藏','7368'];
pages[18]=['2_09','第八章  火熠神鼎','5551'];
pages[19]=['2_10','第九章  釜底抽薪','6844'];
pages[20]=['3_01','本集简介','0','第三集 菊中秘',''];
pages[21]=['3_02','第一章  失算','7180'];
pages[22]=['3_03','第二章  死敌','6729'];
pages[23]=['3_04','第三章  死亡车队','7109'];
pages[24]=['3_05','第四章  怀玉其罪','6371'];
pages[25]=['3_06','第五章  高凡的身世','7103'];
pages[26]=['3_07','第六章  五年前的往事谜团','6123'];
pages[27]=['3_08','第七章  高廉风之死','9757'];
pages[28]=['3_09','第八章  回京','6541'];
pages[29]=['3_10','第九章  巫蛊','5996']; [/code]通过对比，我们可以发现只是在原来记录中卷名的4维数组中，有添加了一个新数据用来记录封面图片的地址
例如：原来的
pages[0]=['1_01','本集简介','0','第一集 大风歌'];
修改后的
pages[0]=['1_01','本集简介','0','第一集 大风歌','<img src=../txt/1.jpg class=cover1>'];

说明：修改后的记录中最后一维数组中有个  class=cover1  。这个是对该图片应用一个名叫cover1的CSS类

其代码是[code].cover1{  width:180px;  height:250px;border:5px solid #FFFFFF;   filter:progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=135,strength=5);  }[/code]给图片添加这个CSS类的目的是统一控制图片的宽度，高度，添加滤镜效果。这样封面显示中，所有的图片都一样的大小和阴影效果，比较好看。

好了，到此准备工作完毕。下面进入封面制作

3、分卷目录页的制作
这部分包含两个内容
一、分卷目录的显示；二、各卷之间的互相切换。

3.1、分卷目录的显示
思路：不知大家注意过HP电子书分卷阅读的样式没。上面是该卷的章节目录，下面是具体内容。如果我们去掉章节内容，那正好是该卷目录。因此可以利用这一点，对volume.htm进行修改。

目录显示的代码在volume_index.js文件中，这是里面的代码
注：代码是根据航星的改写的，感谢航星O(∩_∩)O[code]if (parent.txt == undefined)
{
parent.txt = Number(ReadCookies("index"));
}

if(pages[parent.txt][4]==undefined)
{
     for(var a=parent.txt ; a>-1; a--)
   {
         if(pages[a][4]!=undefined)  {   break;  }   
    }
parent.txt=a;
}
//alert(parent.txt)
function volumeIndex(){
var i=parent.txt;
var end=pages.length;
document.write("<tr ><td><table width=100% align=center><tr><td><font style='font-size:16px;'>"+pages[i][3]+"</font></td></tr>");
document.write("<tr align=center><td><table width=90% border=0><tr><td><div class='dccss'><a href=javascript:loadurl('chapter.htm',"+i+") title='本章字数："+pages[i][2]+"'>"+pages[i][1]+"</a> ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div></td><td width=10><div class='dccss'>"+(i+1)+"<div></td></tr></table></td></tr>");
i++;
while(i!=end)
{
document.write("<tr align=center>");
if(pages[i][4]!=undefined)
{
  break;  
}
else
{
  document.write("<td class='volumeccss'><table width=90% border=0><tr><td><div class='dccss'><a href=javascript:loadurl('chapter.htm',"+i+") title='本章字数："+pages[i][2]+"'>"+pages[i][1]+"</a> ----------------------------------------------------------------------------------------------------------------------------------------------------</div></td><td width=10><div class='dccss'>"+(i+1)+"<div></td></tr></table></td>");
}
document.write("</tr>");
i++;
}
document.write("</table></td></tr>");
}

function daohang(){
var z=0,y=1;
var end=pages.length;
document.write("<table align=center width=90% border=0 cellspacing=0 cellpadding=0><tr><td>");
document.write("<div class='dccss' align=center><b>第 </b>");
while(z!=end)
{
if(pages[z][3]!=undefined)
{
  document.write("<a href=javascript:loadurl('volume.htm',"+z+") title='"+pages[z][3]+"'>"+y+"</a> ");
  y++;
  z++;
}
else
{
  z++;
}
}
document.write("<b>集</b></div></td></tr>");
document.write("</table>");  
}
function volume_image(){
document.write(pages[parent.txt][4])
  
}
setCookies("index",String(parent.txt)); [/code]简单说明：带页码目录的显示脚本是volumeIndex()函数，图片输出是volume_image()函数，输出各卷之间的互换是daohang()函数，

在volume.htm中用下列方式调用

volume.htm的代码[code]<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" >
<title>龙卡</title>
<meta HTTP-EQUIV="Page-Enter" CONTENT="revealtrans(duration=1.0, transition=23)">
<meta HTTP-EQUIV="Page-Exit" CONTENT="revealtrans(duration=1.0, transition=23)">
<link rel="stylesheet" href="js/style.css" type="text/css">
<script language=javascript src='../js/page.js'></script>
<script language="javascript" src="js/volume.js"></script>
<script language="javascript" src="js/volume_index.js"></script>
</head><body>
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="119" height="67" background="images/001.png"> </td>
    <td align="center" background="images/002.png"><font class="f3">快捷键：[←]上一集，下一集[→]，[Enter]目录</font></td>
    <td width="119" background="images/003.png"> </td>
  </tr>
</table>
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="65" height="33" align="right" valign="middle" background="images/031.png"><img src="images/xing1.gif" width="15" height="17" ></td>
    <td valign="middle" background="images/032.png"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="50%" height="33" class="f2">龙卡</td>
        <td width="50%" height="33" align="right" class="f2">作者：骷髅精灵&铁男</td>
      </tr>
    </table></td>
    <td width="65" align="left" valign="middle" background="images/033.png"><img src="images/xing1.gif" width="15" height="17" ></td>
  </tr>
</table>
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="43" height="30" background="images/011.png"> </td>
    <td background="images/012.png"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><table width="85%" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td><hr  color=#506080 size="1"><script language=javascript>daohang();</script><hr  color=#506080 size="1">
<table border="0" cellpadding="0"  cellspacing="0" align="center" width="100%">
<tr><td width="30%" align="center" valign="middle"><script language="javascript">volume_image()</script></td>
<td width="70%"><table border=0 frame=box rules=all width=98% align=center cellspacing=0 cellpadding=0>
        
  <script language="javascript">volumeIndex()</script>
     </table>
  </td></tr></table>
     <table width="80%" border="0" bordercolor="#c88633" cellspacing=0 cellpadding=0>
       <tr>
         <td align=center><script language="javascript">next("上一集","封面","下一集",2);</script></td>
       </tr>
     </table></td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td><hr  class="hr1" size="1">
</td>
      </tr>
    </table></td>
    <td width="43" background="images/013.PNG"> </td>
  </tr>
</table>
<table width="80%" height="33" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="65" align="right" valign="middle" background="images/041.png"><img src="images/xing1.gif" width="15" height="17" ></td>
    <td background="images/042.png"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="50%" height="33" class="f2">ZCQ101E书</td>
        <td width="50%" height="33" align="right" class="f2">我不知道论坛</td>
      </tr>
    </table></td>
    <td width="65" align="left" valign="middle" background="images/043.png"><img src="images/xing1.gif" width="15" height="17" ></td>
  </tr>
</table>
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="119" height="67" background="images/021.png"> </td>
    <td align="center" background="images/022.png"><font class="f3">资料收集于网上，版权属于原作者，请勿用于商业传播。</font></td>
    <td width="119" background="images/023.png"> </td>
  </tr>
</table>
<a name=bottom></a>
<div id="float" style="position:absolute;right:27;height:180pt;top:expression(document.body.clientHeight-this.style.pixelHeight+document.body.scrollTop)">
<table border=1 cellspacing=2 cellpadding=0 bordercolorlight=#528888 bordercolordark=#bdc9db bgcolor=#E0E8E8>
<tr align=center>
<td><a href=#top><img src=images/top.gif border=0 alt=页首></a></td></tr></tr>
<tr><td><a href=javascript:loadurl("volume.htm",prevol)><img src=images/back.gif alt=上页 width="16" height="16" border=0></a><a href=index.htm><img src=images/return.gif alt=目录 width="16" height="16" border=0></a><a href=javascript:loadurl("volume.htm",nextvol)><img src=images/next.gif alt=下页 width="16" height="16" border=0></a></td></tr>
<tr align=center><td><a href=#bottom><img src=images/bottom.gif border=0 alt=页尾></a></td></tr>
</table>
</div>
</body>
</html> [/code]在这段代码中通过下面代码加载外部的JS文件，当然也可以直接写在HTML文件中，但是那样显得不够简洁
<script language=javascript src='../js/page.js'></script>
<script language="javascript" src="js/volume_index.js"></script>



这样就加载了page.js和volume_index.js两个文件

再通过下面得代码执行相关的函数（添加到你想要产生效果的地方，如某个单元格）
<script language="javascript">volume_image()</script>
<script language="javascript">volumeIndex()</script>
<script language="javascript">danghang()</script>

效果如下
[attach]917074[/attach]

[[i] 本帖最后由 swimmingcake 于 2009-6-7 18:24 编辑 [/i]]

3.2、各卷之间的切换
思路：在贴代码前，大家可以看看HP软件生成的chapter.js中关于章节切换的代码。其实各卷之间的切换也可以这样做。只要取得“上一卷”，“下一卷”开始章节所在的数组下标和对2种特殊情况进行处理（当前卷是“首卷”或者“末卷”）
各卷切换的代码在volume.js文件中，下面是具体内容
注：代码是根据狂鹰和航星的改写的。部分代码没有做变动[code]var prevol=-1;
var nextvol=-1;
var end=pages.length;
var m,n;
/*-----防止刷新出错-----------*/
if (parent.txt == undefined)
{
parent.txt = Number(ReadCookies("index"));
}
/*-----从当前卷开始向上取得上一卷开始所在的数组下标 ------*/
for(m=parent.txt-1;m>-1;m--)
{  
if(m!=-1&&pages[m][4]!=undefined){prevol=m;break;}
}
/*-----从当前卷开始向下取得下一卷开始所在的数组下标 ------*/
for(n=parent.txt+1;n"+a+"");
if(j>0)for(i=1;i"+b+""+s);
if(nextvol!=-1&&c!="")document.write(""+c+"");
}
/*----键盘翻页代码------*/
function gotoVolume()
{
  if(window.event.keyCode==13)document.location='index.htm';
  if(window.event.keyCode==37&&prevol!=-1)loadurl("volume.htm",prevol);
  if(window.event.keyCode==39&&nextvol!=-1)loadurl("volume.htm",nextvol);
}
document.onkeydown=gotoVolume;[/code]说明：代码已经做了简要的注释，当前卷是“首卷”和“末卷”时，执行loadurl()函数直接跳转到封面页即index.htm。
在volume.htm通过下面代码加载volume.js文件[code]<script language="javascript" src="js/volume.js"></script>[/code]通过下面代码和键盘事件执行各卷之间的切换[code]<script language="javascript">next("上一集","封面","下一集",2);</script>[/code][code]<div id="float" style="position:absolute;right:27;height:180pt;top:expression(document.body.clientHeight-this.style.pixelHeight+document.body.scrollTop)">
<table border=1 cellspacing=2 cellpadding=0 bordercolorlight=#528888 bordercolordark=#bdc9db bgcolor=#E0E8E8>
<tr align=center>
<td><a href=#top><img src=images/top.gif border=0 alt=页首></a></td></tr></tr>
<tr><td><a href=javascript:loadurl("volume.htm",prevol)><img src=images/back.gif alt=上页 width="16" height="16" border=0></a><a href=index.htm><img src=images/return.gif alt=目录 width="16" height="16" border=0></a><a href=javascript:loadurl("volume.htm",nextvol)><img src=images/next.gif alt=下页 width="16" height="16" border=0></a></td></tr>
<tr align=center><td><a href=#bottom><img src=images/bottom.gif border=0 alt=页尾></a></td></tr>
</table>
</div>[/code]

4 、一些小修改

由于现在从章节直接返回的是每卷的目录，而不是封面目录，因此要对chapter.htm和chapter.js做一些小修改
将<a href=index.htm></a>改为<a href=volume.htm></a>
另外分卷阅读的制作同上面的方法类似，在这就不重复啦。
最后在说下
在上面的代码中用到对cookie的操作，这是仿照狂鹰大大解决以前HP电子书刷新出错而加的。
所用到的函数是由HP自动生成的，这儿不贴了
下面是附件

[quote]这种方式原理是通过修改HP软件输出的数组[color=red]paegs[/color]的结构，在配合编写相应的脚本来实现的。[/quote]
应为pages，已修改。
建议不要使用图床，链接失效。
请上传图片附件后，使用一下代码嵌入。
[code][attachimg]图片id号[/attachimg][/code]

代码部分显示有点问题
这个对俺来说还太难了
暂时先不研究

:sleep
貌似很难很难的，学起来有点吃力，复制收藏先，私底下慢慢研究:teeth

这篇教程非常榜，其中page。js文件是关键，就是css文件很难修改，里面的代码大都看不懂

*** 作者被禁止或删除 内容自动屏蔽 ***

楼上的高手来了，整理下看看有什么问题要请教。

好东西啊，一定要认真学习！
欢迎8楼的兄弟，希望你能加入E书区的原创制作团队，我们太需要你这样的人才了！:lol:

这个教程写的实诚，好，我怎么看像大海啊，风格有点像是你吗？大海，如果是你欢迎了，

JS编码和HTML编码很类似嘛！用UE去查下应该也可以吧？

这个就有点点 看不懂了，是不是EBOOK都是这样的，手机可以看不？

看不明白代码，呵还是找个简单的能看明的，来看看吧

楼主太伟大了，这么高难度地都懂，我们一定要好好学习，不怕困难，不怕吃苦。

看了很多教程，还是学不会，感觉很难的。而且有的和看到的优秀书不一样。

可能是我太弱了，我连楼主列出来的两列数组有什么区别都没看出来...

我还是采用另一位高手那个不用修改page的做法吧！

学习,楼主高手,看来要做好电子书要学的太多了

谢谢，太及时了
怪不得一直用图床不可以呢

呵呵，谢谢分享，先顶后下，留名占座，此贴必火