早安论坛Ｅ书软件的模板制作教程

天空72号 · 发表于 2014-10-8 21:17

一、电子书源文件的构成
1、单本电子书模板就是由“演示.htm”预览文件和“index”目录里的文件组合而成——这“index”目录里包括图片、JS和CSS文件等（需要的话，还可能包含flash、mp3等多媒体），默认必需CSS调用文件为“style.css”文件，而“float”目录为十字导航浮动窗口调用的JS和图片文件。
　　凡是电子书藏家“Ｅ书制作”做出来的电子书，只要把这个“index”目录简单替换为别的模板“index”目录，即可形成不同模板风格的电子书来；同理反推，只要把这个“index”目录拷贝复制到相对应的模板目录去，就等于导出了模板来。
2、除了模板的“index”目录外，生成的单本电子书包括有“Index.htm、Cover*.htm、Home*.htm、Chapter*.htm、Volume*.htm”5个网页文件和“panel、txt、Upload”3个目录，还有1个封面图片文件。
　　单本电子书默认生成“Cover*.htm”文件会自动跳转到“Home*.htm”书目页面去，如需制作电子书的封面文件就可以利用“Cover*.htm”文件来实现——先去掉源文件里的“<meta http-equiv="refresh"content="0;url=Home*.htm">”自动跳转代码，然后手工人为修改源代码来实现所需封面样式，再做个链接到“Home*.htm”即可（请参考“猫眼鬼差”范例目录）。
3、我制作调试模板，通常是找个现成的模板，然后慢慢修改“index”目录里的“style.css”文件而成（其中包括图片的编辑操作）。
　　先在每行五列的“范例1”目录里修改好模板，再把“index”目录拷贝替换到每行二列的“范例2”目录进行二次调试，完成后即可到处为新的模板。如果在“范例1”目录里修改好，其实模板基本上就完成了；至于“范例2”目录的调试，只是改改“div_volume_a_*”的边框色或者“table_intro_*”的边框线，就这两个小地方而已。
二、单本模板CSS制作步骤
　　按照下列1、2、3……步骤来编辑修改即可。
　　电子书模板的制作核心技术就是CSS控制，由于CSS的概念太抽象了，估计很多人是看不明白下面教程步骤的；即便作为开发者，对于全部单元的CSS属性重新把握也很困难，建议找个范例来慢慢修改为自己想要的样式（注，范例的CSS文件里注释内容有一定帮助的）。
1、CSS框架示意图

图上标识的名称，即为每个单元CSS类的class名称。

　　可见电子书模板的CSS是九宫格结构，加上层与层的嵌套而成。
　　近300种模板的方案，都是按上图示的九宫格结构，由背景图铺垫形成。
　　正所谓一生二，二生三，三生万物……要说简单也不简单，要说复杂也不复杂，就看人们根据需要来灵活变通了。
2、设定各层次的Div和Table，以及Td的宽度和高度
　　一般情况下根据背景图的宽和高来决定，保持table_top、table_middle和table_bottom宽度自上而下一致，同时要求宽度“table_*_td_left ＋ table_*_td_center ＋ table_*_td_right ＝ table_*”。
　　利用“text-align:center;”和“margin: 0 auto;”来对“table_*”单元进行水平居中设置。
3、电子书模板的背景形成
　　利用九个Td单元来进行背景图铺垫，特殊情况还可以利用层与层的嵌套进行多层次背景设置：通过CSS的background-image、background-repeat、background-position三个参数来设定背景图，如需要还可以加上background-color来设定背景颜色。详细内容请查考CSS.chm手册，或参照范例修改。
　　主要是在CSS文件里的“/*===模板图层===*/”模块进行修改。
4、设置各单元的内外间距
　　table_middle_td_center设置页面内容的上右下左间距，div_title设置标题的上下间距，td_chapter_top_*设置阅读控制条的间距——就这三处需要注意，而其他的间距基本上没什么要修改的。
5、设置各元素的颜色
　　一是body的color参数，二是链接A属性，三是标题“div_title table td”属性（这里常用到CSS的滤镜功能），四是intro_font_*的属性，剩下就是list_volume_span_a、bottom_font和div_volume_*需要对color参数设定。
6、设置边线的颜色
　　table_intro、table_intro_td_left、table_list_b就这四处地方的边线颜色需要设定同一颜色，找到后就全部替换为自己想要的颜色数值即可。
　　另外div_chapter_top table或div_chapter_down可能有边线要设定颜色，还有一个地方就是div_volume_a_*也需要设定边线颜色。
7、浮动面板
　　请在在CSS文件里的“/*===浮动面板===*/”模块进行修改。
　　一共有两种模式，参见模板“A01古卷绿色”和“A03长相依人”的两者区别。
　　主要设定包括背景图、背景色、边线色，以及相关间距。
　　建议把两种模式的浮动面板CSS模块代码，需要那一种就拷贝过来修改即可，相关图片直接到“float”目录里替换。
8、背景样式
　　主要是scrollbar滚动条的样式设置，加上特殊情况下需要对select和td_chapter_top_right img进行背景色设定。
9、顶部或者底部JS操作
　　比如顶部需要加上一个flash，或者加上书籍名称，都可以新增一个flash.js文件，然后自己添加编辑源代码，参考模板“A03雨亭新绿”和“D06洪荒封神”。
　　至于底部需要加上一个flash，或者加上说明文字，请新增intro.js文件，参考模板“I03忘情铁路”和“E01边框千瞳”。
三、合集模板制作简介
　　合集模板和单本模板差不多，只不过一个是“cover”目录一个是“index”目录，目录下都必须有一个“style.css”文件，但是合集模板多了一个控制列表结构显示的“cover.js”文件——列表结构有两种模式（类似<table><td>和<ul><li>两种单元来控制），请参考“D02羊皮书卷”和“V02质感蓝色”合集模板的差异。
　　在生成合集封面“Cover.htm”文件里，由于是先后加载“index”和“cover”目录下的“style.css”文件，这样使得合集模板后定义CSS具有覆盖的优先级，从而可以重新定义新的CSS元素属性，形成兼容而又不同于单本模板的风格样式来。
　　最后要说明的是，合集模板CSS制作步骤和单本模板的差不多，甚至更为简单……除了要继承单本模板的部分CSS元素外，还根据合集结构需要增加定义新单元的CSS属性。