查看文章详情

除了规范，除了胡掌柜的《写样章或模板样式的思路》，我们在设计篇章页的时候，还需要注意什么？傻瓜式步骤学到家！主要包括背景，标题，图片三方面的设计。

在阅读本分享之前，建议参考胡掌柜的权威文章《[写样章或模板样式的思路](http://www.iremaker.com/college/article/detail?id=161 "写样章或模板样式的思路")》，本文是在此基础上结合个人操作的经验分享。主要分为背景，标题，图片三方面来讲述。
#### 1. 背景
（1）原则上依据PDF原文，若PDF篇章页有图片，iremaker直接保存图片，或者截取高清质量图片保存，然后导入到sigil。
（2）若PDF原文图片与文字交错太多，不便截图或保存，建议选择相似风格图片，导入到sigil（推荐背景图片分为纯色、有底纹和内容图片三类进行下载，背景图片素材的网络：http://sc.chinaz.com/）
#### 2. 标题
（1）活用胡掌柜提供的样张epub，根据原PDF风格修改
（2）原则上不改动默认标题的CSS样式，应当重新编写
#### 3. 图片
（1）应注意篇章页图片设置为非交互
（2）根据PDF原文要求设置为居中或绕排

※以下以《战场决胜者002 ： 欧洲佣兵》（任务难度：2级，任务等级：1级）为例做案例解读：
#### 1. 背景
本文篇章页背景为图片，原图是以图片形式保留在sigil中，因此只需要修改body的代码即可完成背景的设置，参考cover页面的body代码，将cover.jpg替换为需要的图片：
```html
<body class="background-img-center" style="background-image:url(../Images/image_7_1_m.jpg);background-position: center center">
</body>
```
#### 2. 标题
篇章一级标题，此处标题只是有颜色的变化，因此加一个行内代码即可完成，因有明显的换行，所以用一个` `
```css
<h1 class="text-title-1-c">第一篇   强盛的根基</h1>
```
#### 3. 篇章页段落
（1）标题下的引言有下划线，利用Chapter-001.epub的模板略加修改即可完成
```html
所有的帝国和统治均在战争中发现了自己的起源。
```
```css
/* 段落横线-居中 */
p.border-center{
 color: #000000;
 font-weight: normal;
	line-height: 1.4em;
	border-bottom: 1px solid #000000;
	font-family: "ZY-ZW-SONGTI" , "羿创书宋二";
	zy-text-type: main-body;
	font-size: 16px;
	text-align: center;
	text-indent: 0em;
	margin-left: 10%;
	margin-right: 10%;
}
```
（2）引言出处直接用“落款右”样式
```css
/* 落款右 */
p.inscribed-right {
 margin-top: 1.3em;
 margin-bottom: 1.3em;
 font-family: "ZY-KAITI", "羿创楷体";
 font-size: 16px;
 font-weight: normal;
 text-align: right;
}
```
（3）段落刷楷体-独断的样式，由于从标题到段落结束所占页面的长度很短，所以在文末添加一个下边距，使得文字和背景图片的搭配比较合理：
```html
战争从来都离不开浩大的开支，每一场惊心动魄的战争背后都流淌着一条由真金白银汇聚而成的洪流。从文艺复兴以来，直至三十年战争，欧洲各国的无名小卒、天潢贵胄都围绕着叮当作响的金银演出了一幕幕悲喜剧。而铺设并行走在这条金光大道上的，是由金钱聚集起来的各式军队。
```
#### 4. 最后成图（左为sigil预览，右为iremaker原文预览）
![sigil和iremaker比对](http://book.img.ireader.com/group6/M00/90/89/CmQUNldomQGEfGR2AAAAAPHIFuU078163951.jpg?v=nb1ylwk- "sigil和iremaker比对")

※另可参考叶子的《[教你怎么去写篇章页](http://www.iremaker.com/college/article/detail?id=142 "教你怎么去写篇章页")》一文的案例分享。

Hi, Friend~

傻瓜式篇章页的设计：除了规范，还需要注意什么？

作者

相关文章

热门标签