封面制作即把一本书的封面文字再拷贝一份放在下一页中，就像这样：
可以看到上面的字全是打上去的，但是修改了其样式，做成了和封面一样的形式。本章封面制作即介绍如何制作这样结构比较简单的封面。包括文字大小、颜色、外发光＆阴影、底色的设置；元素倾斜、位置调整；字体自定义设置。
首先我们来看一下上面成品的代码视图：
看起来是不是乱七八糟的？嘛不过这玩意可能就我看得懂吧，毕竟很多类都是自己随便命名的……不过如果仔细看的话，可以发现里面有一些零散的文字，那就是封面的标题文字了。但光看也没用，来重新做一遍。
首先，我们把标题上用的到的字全部重新打一遍：
记得在代码视图打，之后我们的操作未另外说明均使用代码视图。可以看到，在输入的时候，我给每段文字都加了一个div，这其实就是用div代替了p来进行分段。请记住虽然div是没有任何默认样式的，但是他会将其里面的元素当做一整块和其他元素分开来，也就是每个div都自成一段，想用它来定义字是很麻烦的。另外最外面的一个div框架是啥见上一章，我在最后有过说明。
还有，其实可以你用书籍是与来进行方便的写法。因为在书籍视图写的话软件会在敲下回车开始下一段的时候自动继承上一段的标签，所以如果在代码视图的div下写完了标题，然后回到书籍视图打完插画家和作者信息，回到代码视图就会发现软件已经自动给下面补上了div。或者使用搜索替换功能，因为一直点搜索按钮软件会按顺序选中搜索的内容，所以可以选择到需要的换行处在多点几下替换，就能依次通过替换添加div了。以上都是小技巧，大家找到自己习惯的就好了。
在文字录入后，我们就需要进行一些调整了。首先看图一，可以发现如果按列算标题是分了四块的，于是我们也把标题分成四个div：
其实只要去书籍视图找到相应的地方用回车分行就好了，在完成之后看书籍视图感觉并没有什么不一样的变化，就是一些文字分了行而已。为了方便编辑，我们就先做一点小准备。之前说过，把每一个div当做矩形框，然后进行编辑会很容易理解。如果你想象不了，就接着看下去：
首先我们打开css文件，在最上面加入这些：
“
div{border:1px solid green;}
span{border:1px solid red;}
body{border:1px solid orange;}
p{border:1px solid blue;}”
意思很简单，给各种标签显示边框，div是绿色，span是红色等等（如果患有色盲可以自己改一下？反正能看出来就行）。1px代表线宽一个像素，solid是线的样式，最后的是颜色。颜色支持英文代码比如“red”、“blue”、“MidnightBlue”、“FireBrick”等，也支持形如“#xxxxxx”的十六进制颜色，比如白色“#000000”。上面那一段样式是我们编辑的时候用的，在编辑完成后应该要删掉。首先我们看向书籍视图，是不是已经有了改变了：
因为这一页只有用到body和div，所以只能看到橙色和绿色的线框。蓝色的线框随便打开一个正文文件就可以看到，因为在一开始我们就没有规定范围嘛。并且在编辑的时候一定注意，这些框最后是要删除的（看本贴第一张图），然后虽然很小，但是也多加了一个宽为1像素的误差，两个贴合的框就是2个像素，依次叠加，也就是说在定位完成后，一旦把框删除，这些像素的消失会导致一定的误差，所以在删除后如有必要请记得检查一下。
制作这种页面，我们的顺序是先把大概的位置和样式调整好，竖排的做成竖排，然后把他们放到相应的位置上去。接下来修改字的大小、颜色以及外发光还有底色什么的，然后是把需要的字旋转相应的角度，旋转完成之后再粗略调整一下（旋转会产生位移，所以要调整。），完成之后再设置好相应的字体，接下来再调整一下位置就完成了。不过一般来说最后一下调整可以综合到第二次的粗略调整上面，因为一般改字体是不会弄得大变样的。
首先是文字的竖排。说实话当初我找了半天都没能找到有关于epub竖排的教程，所以考虑过两种方法：把文字宽度限制在一个字；手动在每个字之间分行。然后考虑过后选择了第二种方法，因为这种文字一般不会很多，只有封面和彩页可能用到，大量的竖排也不符合我们平常的阅读习惯；然后鬼知道一些乱七八糟的阅读器有什么各自千奇百怪的属性，为了兼容性更好一点，傻瓜式的写法反而更好。
看过之后，可以看到我们需要制作竖排的只有书本的标题，那么就用最蠢的方法来做：我们在每个字之间都插入一个“<br />”。“<br />”便是换行的意思，它和p或者div的换行不同，前者就是将文字分成两行，后二者则是分进了两个不同的元素，这个不用太深究。做完之后的两个视图应该是这样的：（紫色框中是代码视图）
那么文字的样子已经设置好了，接下来就是位置的设置了。首先，如果不作规定的话每个div都是占一行的，也就是说，它的左右两边都是无法排东西的。像第一张图那样，把div从右到左排着是不可能的。这时候就要用到定位属性了，我们所有元素的默认属性都是不浮动的，也就是占在最中间的位置。而且所有的元素都是不能重叠的，就算你能把两段文字通过移动重叠在一起，他们也要占两段文字的空间，只不过是显示过去了而已，原来所在的位置依然存在并且会一直占用着（有点说不清楚并且准确性存疑，不过这个了解与否并不影响制作）。总之因为上面的原因，单纯的调整位置是没有作用的。
解决办法就是让这些元素进行浮动。分别有左浮动和右浮动。我们观察一下封面就能看出，应该右浮动的文字就是“怕痛的我，”还有数字“5”，剩下的全部左浮动。我们先写两个样式，分别是左右浮动，然后在应用到相应的div中就可以了。在样式表中输入“.left {float:left;}”和“.right {float:right;}”，float便是规定框的浮动的，然后一个朝左一个朝右，类的名字很简单的设置成左和右。接下来运用到div中就行了，在对应的浮动框中加入“ class="right" ”和“ class="left" ”就好了：
上面有css和两种视图的效果。可以看到这些东西完全排乱掉了。这是因为浮动之后，按照从上到下的顺序，左浮动变成从左到右，右浮动变成从右到左。然后如果横着摆不下了，会自动跳转到下一行去。具体怎样大家可以通过鼠标拖动编辑框减小中间区域的宽度来查看变化。
然后为了让文字看起来顺序正确，我们就要调整一下他们在代码视图中的顺序。把竖排的三段文字倒着排，然后把第一行放到“数字5”的上面去，像这样：
可以比较上面两张图的区别，这样调整过后，你在书籍视图看到的东西位置就大概没错了。只要把左边的作者和插画名字挪到下面去，然后把右边的数字挪到下面去就行了。至于怎么挪动，还记得上面说的话么？所有元素在不设置的情况下都是不浮动的而且不能重叠。首先看左边的五个div框，前三个是标题另外两个是著名。只要我们在前三个和后两个之间再加上一个元素，然后禁止在这个元素左右浮动，那两个著名用的div框自然就被分到下面去了。右边也同理。
首先我们来创建一个表示不允许浮动的类：“.c {clear:both;}”。这个是写在css里面的，话说看到现在哪种东西写在哪应该不用再说明了吧，以后就直接贴了。然后在应该分行的地方加上内容空白的带有这个类的div：“<div class="c"></div>”，最后做成这样：
在哪里分了行应该能很方便的看出来，然后这里有一个建议，就是在最后那个地方也加一个“<div class="c"></div>”，这样的话一些阅读器就不会把浮动的东西不显示出来了。
但是啊，这样做完了之后，发现有个问题啊……右边的那些东西也被往下挪了啊。
看着那几条比较粗的绿线，我想大家也能猜出来。因为在代码视图中，右侧文字在最下面，所以在禁止浮动后飞，右侧文字也被禁止往上走了。比较粗的绿线就是新建的空白div，因为有外边框，所以上下加起来就是2像素宽度，这个就不多解释了。至于这种情况的解决办法，很简单，我们再多加几个div就好了。
首先可以看出，这个封面是很简单的左右分布，左边一堆东西右边一堆东西。我们把左边的用一个div单独框起来，然后再把右边的用一个div单独框起来。这样，之前设置的那几个分行用的div就也全都被框在那个打的div里面了，就像这样：
我写的时候加了几个回车方便看，其实紧挨着也是没什么问题的，自己能看懂就行。虽然说就是加几个div，但是别忘了这几个div也是要设置浮动的，一个向左一个向右。这样一来，那几个“<div class="c"></div>”就只管相应div框里面的分行了，完成的结果就是这样了：
这样一来这个封面页文字的位置就差不多规定好了。大家可以比较一下上面那张图和第一张图的区别，是不是位置什么的都已经做对了呢？接下来我们要做的就是调整一下这些字的颜色和大小，然后进行旋转，就万事大吉了。
由于这个帖子用的图片太多了（12张），论坛性能怎样我是不知道，万一图片给挂了就不好了，想了一会就分开来吧，下一贴应该就能把这个搞完了，这几天设呢么时候有空就再写吧。
本贴完，后续教程见合集
“=”
4 年前 0 回復
4 年前 0 回復
4 年前 0 回復
4 年前 0 回復
4 年前 0 回復
4 年前 0 回復
4 年前 0 回復