软景（HP）模板通用制作新手教程（适用三段式边框固定屏模板）

折翼之风 · 发表于 2020-6-5 11:00

本帖最后由折翼之风于 2020-6-5 15:53 编辑

　　（1-5楼）

　　如果你是一个E书爱好者，还是一个不懂网页代码却想做自己风格E书的新手，可以参看一下本教程，E书制作老手可以一笑而过了。

　　有人可能会问：“我只会简单的图片美工或是修图、裁切，甚至说就会往图片上打字和切图，看网页代码如看天书，<br><p>是什么都不知道，能做自己风格的电子书模板吗？”
　　我用一个字回答你：“能。”

　　有人可能会问：“你的模板网页代码，是否适合软景模板和HP模板三段式图片之间的相互替换呢？”
　　我用一个字回答你：“能。”

　　……

　　有人可能会幡然醒悟说：“你的模板网页代码真是万能代码啊，可以让所有边框图片对E书模板大包大揽。”
　　我用两个字回答你：“不能。”

　　如果你对代码不懂，这段网页代码仅仅适合三段式边框制作E书模板，还适合那些可以改装成三段式边框模板的图片制作E书模板（其实，绝大多数E书模板都可以改为三段式模板）。

　　***　　***　　***

　　现在论坛电子书制作教程不少，可是关于电子书初始的模板制作这一方面却没有几篇教程。这一篇称之为教程，其实有点大言不惭，不但不讲模板代码结构和软景（HP）如何制作电子书，而且还不讲图片美工。
　　那有人可能会说：“你在这里长篇大论了半天，唾沫星子四溅，却没有一点实用的内容，还耽误别人时间好久，你这不是唬弄人不上税——逗人玩吗？”
　　那说些什么呢？我只说说电子书的三段式边框固定屏模板如何替换模板图片和简单的更改网页模板相关代码数字，其实就是一些做模板的简单体会。

　　制作一个电子书模板，其实就包含两个方面：网页代码和边框美工。假如你是一个网页代码高手而不会图片美工，那么就主要从网页框架和CSS样式上下功夫；假如你是一个图片美工高手而对网页代码一知半解或不懂，那么就主要从边框美化上下功夫，相互取长补短。假如你什么都不会不懂，那么我只能说你与电子书模板制作无缘了。假如你什么都不会，还想成为电子书制作高手，那么唯一的途径就是套用别人的模板，自己从精校文本上下功夫了。
　　也许有人会说，我只会精校文本，然后不用模板也能做书，输出chm。那我只能说你的书可能有人会阅读，但是没人会赞赏你的制作，因为制作一本好的电子书就离不开E书模板，EPUB也是同理。

　　这里的模板代码是我精简过的做书基本代码，没有漂亮的样式，E书风格全在模板美工上下功夫，这里也不多说。代码部分可能还有废代码，还可以精简，但是我是一个代码菜鸟，让代码高手们见笑了。
　　这里的模板讲解是用易大的模板整体外观剖析。
　　为什么会用他的模板呢？因为他的模板是现在大多数做书者喜欢用的模板，也是用的最多的漂亮样式，而那些其他的很多漂亮模板，基本很少有人问津。而且，当你反编译他的书时会发现他的模板并不是三段式，图片文件夹里是很多边框切片。
　　百度图片搜索里有很多各式各样、美观亮丽的边框图片，如果你对Photoshop有一些简单了解或会其他图形软件修图，即使不懂代码，也完全可以做出属于自己风格、自己满意的电子书模板。

折翼之风 · 发表于 2020-6-5 11:01

本帖最后由折翼之风于 2021-8-30 20:45 编辑

　　软景模板代码如下：

<html>
<head>
<title>[PART1]</title>
<style type="text/css">

</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META http-equiv=Page-Enter content=blendTrans(Duration=1.0)>
<link rel="stylesheet" href="js/css.css" type="text/css">
<script language="JavaScript" type="text/javascript" src="js/gunpin.js"></script>
</head>
<body bgcolor="#FFFFFF" bgproperties="fixed">

<a name=top></a>
<table width="767" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
<td align="center"><img src="images/1.jpg" alt=""></td>
  </tr>
  <tr>
<td align="center" background="images/2.jpg"><table width="650" border="0">
      <tr>
      <td style="line-height:150%"><div align="center"><font size="5"><b style="line-height:150%">[PART1]<BR>
            <BR>
            </b></font></div>
         <font size="4">[PART0]</font>
         <div align="center"><BR>
         <font size="3"> ==================================<BR>
            本电子书由“(制作者签名)”免费制作<BR>
            ★资料收集于网上，版权属于原作者，请勿用于商业传播。★</font></div>
         </td>
      </tr>
   </table>
  </tr>
  <tr>
<td align="center"><img src="images/3.jpg" alt=""></td>
  </tr>
</table>
<div style="position:absolute;right:10;height:168;top:expression(document.body.clientHeight-this.style.pixelHeight+document.body.scrollTop)">
  <table align=center border=0 cellspacing=0 cellpadding=2 bgcolor="#efefef">
<tr>
   <td><img src=images/return.gif border=0></td>
   <td><a href="#top"><img src=images/top.gif border=0 alt=页首></a></td>
   <td><img src=images/return.gif border=0></td>
</tr>
<tr>
   <td><a href="[PREVPAGE]"><img src=images/back.gif border=0 alt=上页></a></td>
   <td><a href="[INDEXPAGE]"><img src=images/return.gif border=0 alt=目录></a></td>
   <td><a href="[NEXTPAGE]"><img src=images/next.gif border=0 alt=下页></a></td>
</tr>
<tr>
   <td><img src=images/return.gif border=0></td>
   <td><a href="#bottom"><img src=images/bottom.gif border=0 alt=页尾></a></td>
   <td><img src=images/return.gif border=0></td>
</tr>
  </table>
</div>
<script language="JavaScript">
document.onkeydown=nextpage
function nextpage() {
if (event.keyCode==37) location="[PREVPAGE]"
if (event.keyCode==46) location="[INDEXPAGE]"
if (event.keyCode==39) location="[NEXTPAGE]"
}
</script>
<a name=bottom></a>
</body>
</html>

折翼之风 · 发表于 2020-6-5 11:02

本帖最后由折翼之风于 2020-6-5 11:08 编辑

　　HP模板代码如下（此代码仅是正文模板代码）：

<html>
<head>
<style type="text/css">

</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META http-equiv=Page-Enter content=blendTrans(Duration=1.0)>
<link rel="stylesheet" href="js/css.css" type="text/css">
</head>
<body bgcolor="#FFFFFF" bgproperties="fixed">

<script language=javascript src='../js/page.js'></script>
<script language=javascript src='../js/chapter.js'></script>
<script language=javascript src="js/ad.js"></script>
<a name=top></a>
<table width="767" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
<td align="center"><img src="images/1.jpg" alt=""></td>
  </tr>
  <tr>
<td align="center" background="images/2.jpg"><table width="650" border="0">
      <tr>
      <td><div align="center">快捷键：[←]上页，[→]下页，[Enter]目录，[,.]字体大小，双击滚屏<br>
            <br>
            <A name="StranLink">  繁體</A> 
            <script language=javascript src="js/translate.js"></script>
            <script language=javascript src="js/pagetop.js"></script>
             <img style=CURSOR:hand onClick=reduce() src=images/nofollow.gif><img style=CURSOR:hand onClick=enlarge() src=images/plus.gif></div>
         <BR>
         <BR>
         <div align="">
            <table width="100%" height="30" border="0" align="center" cellPadding="0" cellSpacing="0">
            <tr>
               <td id=bkk width="100%" style='padding-left:40;padding-right:40' align="center"><div id=txt align="left">
                  <script language=javascript>loadtxt(parent.txt); setCookies("index",String(parent.txt)); setCookies("title",parent.document.title);</script>
                  </div></td>
            </tr>
            </table>
         </div>
         <div align="center"><font size="3" style="line-height:150%"><BR>
            ==================================<BR>
            本电子书由“(制作者签名)”免费制作<BR>
            ★资料收集于网上，版权属于原作者，请勿用于商业传播。★</font></div></td>
      </tr>
   </table>
  </tr>
  <tr>
<td align="center"><img src="images/3.jpg" alt=""></td>
  </tr>
</table>
<div id=float style="position:absolute;right:10;height:168;top:expression(document.body.clientHeight-this.style.pixelHeight+document.body.scrollTop)">
  <table align=center border=0 cellspacing=0 cellpadding=2 bgcolor="#efefef">
<tr>
   <td><img src=images/return.gif border=0></td>
   <td><a href="#top"><img src=images/top.gif border=0 alt=页首></a></td>
   <td><img src=images/return.gif border=0></td>
</tr>
<tr>
   <td><a href=javascript:loadurl("chapter.htm",prevpage)><img src=images/back.gif border=0 alt=上页></a></td>
   <td><a href=index.htm><img src=images/return.gif border=0 alt=目录></a></td>
   <td><a href=javascript:loadurl("chapter.htm",nextpage)><img src=images/next.gif border=0 alt=下页></a></td>
</tr>
<tr>
   <td><img src=images/return.gif border=0></td>
   <td><a href="#bottom"><img src=images/bottom.gif border=0 alt=页尾></a></td>
   <td><img src=images/return.gif border=0></td>
</tr>
  </table>
</div>
<a name=bottom></a>
</body>
</html>

　　上面的两篇代码，仔细的朋友可能发现了，代码大多数都是相同的。这也是我为什么说，软景和HP的模板图片可以通用。

折翼之风 · 发表于 2020-6-5 11:02

本帖最后由折翼之风于 2020-6-5 18:30 编辑

　　模板改装讲解套用的是易大最近做的《哈利·波特系列全集》，如果你用他做的《张小花作品集》那样的碎花边框模板改装，建议你jpg图片改为png图片保存。

　　首先，反编译《哈利·波特系列全集》，然后看好用哪一个页面做模板合适。再次，把正文尽量删除，避免图片过大。最后，保存整张图片（百度搜索的边框图片可以省略此步骤。）。

　　我用的Photoshop，就以他来说话。首先，用标尺找好图片边框外缘，然后裁切。如图（这步骤是为了知道图片的宽度，如果你对Photoshop非常了解，也可以拼接原书的图片切片。我裁切完，图片宽度是767像素）。

　　然后，横向找到合适位置，裁切三段作为模板(要注意的是三段图片宽度值必须保持一致，高度不限)。如图

　　因为是为了模板美工，上段（我通常喜欢叫做片头）可能要添加美化过的书名或更好看一些的彩图作为模板片头，所以高度可以适当多保留一些。如图

折翼之风 · 发表于 2020-6-5 11:03

本帖最后由折翼之风于 2020-6-5 15:32 编辑

　　三段模板图片都弄好了，那么如何对应模板网页代码呢？注意以下几项。
　　注意一、看软景（HP）这段代码<table width="767" border="0" align="center" cellpadding="0" cellspacing="0">。
　　width="767"，是指模板宽度，如果你裁切的图片宽度和他不一样，只要知道你的边框图片宽度，调节"767"这个数字和你的图片宽度值一样就可以了（HP要同时调整两个网页）。建议把模板边框宽度控制在800像素或以内，因为电脑显示器最小分辨率是800X600。

　　注意二、看<td align="center" background="images/2.jpg"><table width="650" border="0">。
　　width="650" ，是指你的文字正文宽度，对照你的模板宽度适当调节"650"这个数字就可以了。

　　现在你打开模板网页会发现，新的模板制作完成。虽然写了很多，但是这个模板修改代码是不是很简单？

　　其他注意事项：

　　一、此模板背景图我用的原背景，如果你想用其他背景，替换相应图片就可以，替换的背景图片大小随意，不会影响模板的代码框架。

　　二、<table align=center border=0 cellspacing=0 cellpadding=2 bgcolor="#efefef">。
　　bgcolor="#efefef"，这是定义按钮的背景颜色，如果不喜欢，可以随意更改颜色代码。如果你喜欢竖排按钮，只要找到相关模板，替换代码就可以。

　　三、body {
　　       margin-left: 0px;
　　       margin-top: 0px;
　　       margin-right: 0px;
　　       margin-bottom: 0px;
　　       scrollbar-face-color: #dfdfdf;
　　       scrollbar-track-color: #787878;
　　       scrollbar-arrow-color: #666666;
　　       scrollbar-highlight-color: #ffffff;
　　       scrollbar-shadow-color: #666666;
　　       scrollbar-3dlight-color: #666666;
　　       scrollbar-darkshadow-color: #ffffff;
　　       background-attachment: fixed;}
　　这是滚动条代码，在CSS.CSS样式表里，只要对照Photoshop颜色表就可以知道哪种颜色对应滚动条哪一部分，然后，修改成自己喜欢的颜色就可以了。

　　四、看这段软景CSS.CSS样式表代码，
　　.TitleLinks{ /*索引列表的停靠方位*/
　　       text-align: center;
　　}
　　.TitleLinks .content { /*索引页使用文字列表符时，修改行距*/
　　       line-height: 23pt;font-size: 16pt;
　　}
　　.TitleLinks .content img { /*索引页使用图形列表符时，修改行距*/
　　       margin-top: 5px;
　　       margin-bottom: 5px;
　　}
　　他是定义此模板索引目录页目录的代码，如果感觉目录字体大小不合适。只需要修改line-height: 23pt;font-size: 16pt;里的数字就可以了。你也可以自己定义目录文字颜色。
　　       margin-top: 5px;
　　       margin-bottom: 5px;
　　是指如果你的目录前面有图形列表符，可以适当修改这里的数字。

　　下附模板，以便参考(两个模板图片一模一样)。

芝宝 · 发表于 2020-6-7 20:51

折翼之风大大这个教程真是宝藏呀，好多知识点呀，软景与HP可以模板可私人订制啦，这教程牛皮呀，谢谢大师分享的精品教程呀

lkhtty · 发表于 2020-6-29 15:49

折翼大大的教程受教学习了，很多学习点，确实，制作模板，那怕不会写，至少CSS代码和HTML代码要看懂是什么意思，你才能照搬，我做书就参考了很多大神，利用HP制作，然后照搬易大的模板，哈哈，分享一下。
EPUB其实也一样，只要看懂CSS和HTML，比CHM还简单。
CHM的JS脚本，我现在都是一头包，看的头大，也只能知道这一段是干啥用的，完全不会写。

1393880753 · 发表于 2022-11-22 19:05

我这里有四个模板，不知道为什么无法在HP电子书制作软件上使用，望请教导一二。

ysjd22 · 发表于 2023-2-7 18:14

如果chm有搜索功能就好了。比如说百科类的chm文档，没有搜索功能的话找东西很不方便

兵河之心 · 发表于 2023-2-13 12:28

赶紧下载收藏！！！

账号		自动登录	找回密码
密码			立即注册

[教程] 软景（HP）模板通用制作新手教程（适用三段式边框固定屏模板）

评分

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源