找回密码
 立即注册
搜索
查看: 24494|回复: 2
收起左侧

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

[复制链接]

管理员 - 管理勋章

发表于 2014-10-8 21:17 | 显示全部楼层 |阅读模式
一、电子书源文件的构成
1、单本电子书模板就是由“演示.htm”预览文件和“index”目录里的文件组合而成——这“index”目录里包括图片、JS和CSS文件等(需要的话,还可能包含flash、mp3等多媒体),默认必需CSS调用文件为“style.css”文件,而“float”目录为十字导航浮动窗口调用的JS和图片文件。
  凡是电子书藏家“E书制作”做出来的电子书,只要把这个“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属性。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

俺下过您的E书了,谢谢啦 。。。查看更多↓

管理员 - 管理勋章

 楼主| 发表于 2014-10-8 21:23 | 显示全部楼层
附件里有我制作模板常用的两个小东西,一个是《CSS查询手册》,一个是《屏幕取色器》……后者主要是用来屏幕取色调和模板色调的!建议最好去下载最新的E书制作程序,里面内含全部模板可以参考借鉴。

大家有什么意见、建议或困惑,可在此留言说明,我会尽快答复处理的。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 支持 反对

使用道具 举报

 成长值: 25410

绿铜v3_01绿银v3_01绿金v3_01紫金v1_02灰铜v1_01紫铜v3_02灵晶土豪

发表于 2016-4-2 17:43 | 显示全部楼层
赞一下天空,呵呵
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋| ( Q群816270601 )

GMT+8, 2024-3-28 23:27 , Processed in 0.548699 second(s), 52 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表