本篇开始为进阶教程。即与傻瓜式的5步走基础教程区分开来的教程。原教程查看旧版论坛贴子，不过那贴的进阶就当笑话吧，这个是重制的。
依然使用Sigil版本0.9.10来制作，但是可能还会用到一些其他的软件，比如PS。关于这些软件的使用以及下载本帖不保证有教程。
进阶教程说的最简单，就是在教怎么玩好HTML和CSS，其实到了后面都能自己理解过去，所以未来可能会逐渐草率一点。
在旧帖子我做了个大纲，不过后来发现没啥用，这个我就想到哪算哪了。如果有看不懂的或者是我表述有歧义的地方，建议先翻翻评论区，没准一些长评能解决你的问题。同时欢迎讨论以及提问，教程系个人业余制作，无更新周期随缘更帖。在主要教程制作完成之后会考虑对其他工具进行推荐介绍以及软件版本的更新教程。
对于收藏学习推荐使用合集收藏（虽然个人认为没有什么大不了的价值啦），投币请随意，虽然课税90%但没人会和硬币过不去是不是。
本帖及未来教程默认读者已经了解电子书构成，且能够手动做出一本有封面、插图和跳转目录的电子书。如果连这些都不了解推荐先去看基础教程。
》准备工作《
准备工作一般来说都是些很简单的小事，准备文本图片什么的。原来写了一堆后来发现没必要就放弃了，毕竟第一节又长又没货感觉特烂。
首先默认的sigil窗口有许多没有用处的东西，我们把它们全都清掉，留下文件列表、目录、搜索框和操作界面就行了。小窗口都可拖动，像这样看起来会很整洁：
上面只是举个例子，感觉好看就行了，尽量扩大中间的工作区。那么你们的准备工作已经做完了，现在是教程的。
在教程的某些地方经常要用到“搜索＆替换”功能，也就是上图中封面图片下面那一个窗口。注意本帖中所有情况搜索均使用“正则表达式”模式。而第二个下拉框是选择搜索＆替换的范围，总共有三种：“当前文件”、“全部文件”和“选中的所有文件”。这个范围的选择根据情况自选。
另外，因为轻国改版之后帖子本身似乎涉及了HTML结构，然后本帖介绍制作电子书必然也要用到html代码的举例等应用。之前帖子内容全丢了似乎也是这个原因。所以之后本帖的举例大多采用全角符号来表示，大家记得不要直接复制。在后面的学习中会用到大量的英文以及符号，切记，所有英文、符号均为半角英文符号，中文符号（比如“；”、“：”）或者全角符号（比如“＜＞”、“｛｝”）都是错误的。如果你是从本帖复制过去发现无用的，建议检查符号是否错误。
准备工作到此结束。
》文本导入《
进阶教程篇文本导入其实与普通的没什么不同，不过有一点要求，就是要能够方便之后的调整。至于要怎样才算方便之后的调整……这个应该是都行，毕竟不嫌麻烦的话再大的麻烦也不是麻烦。这里举例一个比较复杂的导入方式来介绍怎么做出比较漂亮的初始文本，当然也可以用你惯用的方法，简单的东西不多做阐述。
首先打开代码视图，快捷键F2或者是在上面的快捷栏点进去就行了（似乎更新的版本只有代码视图，暂未了解）。可以看到原来空无一物的地方多了一点东西：
我也不解释那么多毕竟咱也说不清，也没必要。先关注一下我的红框框出的内容，其前后有一对对应的“＜body＞”标签。“body”标签之间的内容就是最后会显示在电子书阅读器上的内容，其外面你写再多其他的除了可能出错外一点用都没有。
然后在看向蓝色框中的内容，“＆nbsp；”是一个普通英文半角空格的意思（大概，这个下面有回复说明，想多了解一点请自己翻翻）。在代码视图会显示成这样但是在书籍视图完全看不到。前后的一对“＜p＞＜/p＞”标签便起到划分段落的用途。每一个段落之间都会分开，段落内的文字会按照浏览器的宽度自动换行。有些教程会提示，在录入文本的时候不要再书籍视图按删除键原因就是这个。Sigil在书籍视图编辑的时候，如果你按下回车，后台代码视图会自动帮你复制上上一段的标签，接着你写的东西就会自动加入到那一对标签之中，如果把那个空格删掉了，Sigil的一些版本会自动吧那一对“p”标签也删掉且不会补全，这样一来段落就没了所有复制上去的文字都不分段成了一大坨。
更简单的说，读者可以把每个标签都理解成一个矩形框，这个标签决定了这个框内的元素属性。比如上面就是一个名为“body”的框框里面有一个名为“p”的框框里面有一个空格。嘛如果无法理解估计在谈彩页制作的时候就能理解了，不急。
解释完成了，那我们就开始讲导入吧。首先吧蓝框内的东西删掉，不管你那里有啥，删了，留下一对中间没有东西的“body”标签。然后确认你的文本本身没有问题而且储存方式没有问题（比如txt不要选择“自动换行”。不然复制下来你黏贴到sigil里面也到处都是换行）。接下来把你调整好的文本黏贴到“body”标签之间。
读过了上文的读者可能就有疑问了，不是说没有那个“p”的话就不会分段么？啊的确不会，不信你现在调回书籍视图看看(笑)。接下来就是要给它们加上那个段落标签了。我们先统一加上代表段落的“p”标签，至于标题什么的，因为比较少那就手动改吧。
事先说一下，我们的最后要求是什么。在完成了接下来的操作之后，每一段文字的前后都要加上成对的“＜p＞＜/p＞”标签，并且每一段第一个字都要和前面的“＜p＞”紧贴着。也就是说，那些段落前面和本帖一样加上了两个全角空格表示两格缩进的文本，要吧那两个空格什么的都删掉。因为两格缩进在这个帖子就会有介绍怎么制作，基本上用不到这两个巨大的空格，丑。
那么就开工了。首先明确要干的事，就是“在所有段落前后加上相同的标签”，另一种说法就是“在每一个换行的地方全部一样的标签”。很明显这是一个机械重复的操作，我们就应该用电脑来帮满解决。用到的就是“搜索＆替换”功能。原理很简单，搜索到每一个换行的位置，然后把换行的位置替换成成对的“p”标签便可。实际操作如下：
首先在搜索栏搜索“\ｎ”（注意英文半角，我打的全角）。“\ｎ”即为换行符，这里我们搜索所有的换行符。
然后在替换栏输入“＜/ｐ＞\ｒ＜ｐ＞”。“\ｒ”代表一个回车。我们搜索的时候使用“\ｎ”，然后替换的时候应该用“\ｒ”。并且这一对“p”标签的前后是颠倒的，带反斜杠的结束标签在前，不带的开始标签在后。因为换行符在一段末尾，这样写顺序才是对的，请自行理解一下。
接下来选择任意一个范围（因为只有一个文件所以怎么选都是一样的），点击“全部替换”就能过完成标签的加入了。
但这个操作是有点问题的，因为“body”标签上面的哪些地方也被替换了许多多余的“p”标签，就像这样：
红框框出来的都是多余的“p”标签。不过好在不多，我们手动删掉就行了。记得只删掉多加上去的，千万别把原来的删掉了。
那么导入的一种方法就介绍到这里了，其实稍微已考虑能够更改的地方就有很多很多。比如“＜body＞”上面那一大队东西如果提前复制下来在选择替换所有，然后直接把剪切板上的东西脸贴上去，就只需要改最后下面那个地方了。
或者你拿到的是前面带有两个全角空格的文本，那么在搜索的时候搜索“\ｎ ”（我这里打了两个全角空格），就能仅搜索文本内的断行了。当然前提是你确定所有断行前面都有两个全角空格，不然会少找几个。这也是一种常用的方式，不过这样的话就要记得手动去文本第一行和最后一行删除＆添加“＜ｐ＞”和“＜/ｐ＞”。当然也可能不是搜索上面说的那两种，自行判断就好。不过请记住，Sigil的“撤回”功能对于搜索替换是没有用的。也就是说点下了“全部替换”之后，如果出了错改了一大片东西，这是没有办法撤回的，所以大家在做的时候千万小心。如果觉得不保险，可以在制作前对文件进行备份等。
至此，文本导入篇结束
》段落处理《
这里的段落处理指的其实是文本处理之类的。详细点说，要做的就是给各种用途的文件分个类，然后再设置一下大体格式和正文的格式什么的。
首先是一些前置，承上面的文本导入篇，在进行本章操作时，要求读者已经做好这些：
●文本导入没有问题，段前没有空格缩进
●已经分好页，即将书本分为了多个HTML文件
●彩图每一图分一页
对电子书的编辑主要是靠css文件，其次才是HTML文件内置设置。现在就开始介绍一下如何使用css来简单的调整HTML的元素排布。
首先观察默认位于左边的文件列表，找到一个名为“styles”的文件夹（应该是在“Text”文件夹的下面一个），这里面应该是没有文件的。如果你事先通过sigil快速创建过一个html目录的话，里面会有一个后缀为.css的文件，如果有就删掉。
接下来右键选择文件夹选择“添加空白的样式表”，就能够新建一个空白的css文件了。默认名字为“Style0001.css”，只要保留后缀名字什么的任意改。这样，属于自己的css文件就创造完成了：
既然叫样式表，那么很明显的，我们要做的就是在这里面设置样式，然后应用到需要的地方便可，就和画图调好色然后让电脑帮你涂上去差不多（大概）。不过要注意的是，大部分阅读器（包括sigil）都不是白纸一张，他们都有自己默认的格式和样式。于是，我们先把那些有的没的都洗了，硬给他调成白纸去。
首先在css文件里面写入“*{margin:0;padding:0;border:none;outline-style:none;}”，重置一下段间距什么的。这里做一下仅有一次的解释，之后规则什么的就靠大家自己看了。
首先前面的“*”代表的是所有标签，什么“p”啊“body”啊都包括了。后面一个大括号括起来的就是表示设置这个标签带有的属性。上面的例子从左到右分别指的是：“外边距”、“内边距”、“边框”和“轮廓”，然后我们分别设置成0、0、无边框和无轮廓。这里对于文本，外边距和内边距即为段间距的意思，至于为什么看到后面如果你还记得这事那么估计也能够理解了。
如果感觉上面那一堆密密麻麻看不清楚，是可以换一种写法的。比如像下面这样：
* {
margin:0;
padding:0;
border:none;
outline-style:none;
}
解释一下，可以看到“*”和大括号之间有了一个空格，这是为了好看加上去的。括号内的4项一样一行写着，注意前面我打了两个全角空格，实际上你们在输入的时候是要按一下“tab”键的，不要和我一样打空格，我这是帖子如果不这样打显示不出来……不知道tab键是啥的话，它就在大小写切换键上方，这个操作当然也是为了好看。每一个样式都要用一个英文分号“;”分开，最后一个可以不写，不过写上是个好习惯，这样方便之后添加。因为帖子如果这么写就太麻烦了，我都会以第一种方法写出，实际使用的时候推荐使用第二种写法。
那么笼统的设置完成后，在设置一点其他的。比如说表格啊链接啊什么的。输入这些：
●“ul,ol {list-style:none;}”
○把列表属性重置掉（什么是列表？这个就是列表）
●“table {empty-cells:hide;width:100%;}”
○表格无边框（不显示边框）；宽度为最大（相对于父元素）
●“a {text-decoration:none;}”
○链接没有下划线（一般是目录那个跳转链接）
这样一来，默认设置就调好了（大概，我就考虑了这些）。什么？你看那些文本一点变化都没有？肯定啊，因为这个样式表根本就没有和那些HTML文件联系起来啊……如果不进行说明的话，阅读器就根本不会管你写的那些。
其实这个应该写在前面，不过我忘了……但是也无伤大雅，毕竟刚才看了下也不知道该怎么插进去。应用上面那些修改的办法很简单，在左边选中所有的HTML文件。不知道怎么弄的话这里有个仅此一次的教程。选择第一个文件后，按住SHIFT然后单击最后的文件，这样就全部选中了。读者可以自己试试按住SHIFT和Ctrl比较两种选择方式的差异，此后不再介绍如何选择文件。选中所有文件或右键任意文件，点击“链接样式表”按钮，勾住你刚刚创建的那个css文件或确定便可。
添加成功的话在HTML文件顶部会出现这样一行文字：
注意看文件名和你的那个样式表是不是一样的（不过这个基本上不可能错吧），然后再调回书籍视图看看，文字是不是已经变得上下无空隙了？是的话这个就算是完成了。
当我们把各种东西都调成默认后，就可以开始设置我们想要的东西了。首先，我们把文字的显示宽度设置成40个字，也就是一行最多40字。一般手机阅读字设置的再小一行也就是30到40字，电脑的话阅读也就是40到50字，如果设置显示2页40字也就差不多了。当然这个可以根据个人感觉，调整幅度在30到60就行了。至于为什么要这样调整最大宽度而不是就用浏览器默认的，emmm，首先是方便制作彩页，然后如果设置40个字但是人家字调的大一行20字那这个设置也没什么影响。而字调的小，说实话一行太长真的很难看……
操作方法是在css中输入“.all {max-width:40em;margin:auto;}”。注意在“all”的前面有一个英文句号“.”，这代表创建一个名为“all”的类，然后这个类带有后面“最大宽度为40个字，将元素居中”的样式设置。类的名称可以自定义，你觉得“all”不好听也可以写成“123”什么的，支持下划线“_”且不限字数。数字40后面的“em”是单位，代表一个汉字的宽度，另外从用的还有“px”，代表一个像素宽度，这个了解下就行了，用着就会了。
解释一下什么是类……好像也没这个必要。你可以理解成这是一个标签，然后到时候我们要运用这个标签下面的样式的时候，只要提一下这个标签就可以引用了这样子。类的名字应该可以使用中文不过不推荐，天知道会不会有阅读器出错……还有就是“table”和“.table”是不同的，前者设置的是表格，后者你甚至可以用它去设置图片大小。
好了那么，现在已经写好了一个样式模板，就是将元素设置宽度后居中。现在我们来引用这个模板。方法就是运用“div”标签，这个标签和“p”、“body”这些不一样， 是无色无毒无味的三无产品 是没有任何默认样式的标签，在任何阅读器中都是这样。也就是说加进来之后如果不加设置的话就完全看不出来（也就是加了div但是不div的话加了就是白加(雾)）。
我们要在所有文件中都运用“all”这个类，所以我们要给每个文件都加上div。
如上图，我们在所有文字的前后加上一对“<div></div>”标签，这样通过修改这个div框架的宽度就可以调整这其中所有段落的宽度了。大家可以把每一种标签想象成一个个方框（其实就是），然后在这里div是大框框住了里面的一堆小框，调整外面大框的宽度后里面的小框也就会相应的改变了。嘛看不懂之后做彩页就懂了，不急不急。
像这样加div是一个繁琐的重复操作，这种的就应该用电脑来完成，顺便把类也应用了。手打这一堆要麻烦死。至于方法就是使用sigil的“搜索＆替换”功能。
首先打开搜索栏，在里面输入“＜body＞(.*)＜/body＞”（注意全；半角符号，就是因为这个上次这帖子直接无了），然后在替换栏输入“＜body＞\ｒ<div class="all">\ｒ\１</div>\ｒ＜/body＞”，替换范围为所有文件，选择全部替换。
这个是正则表达式的运用，关于正则表达式之后有心思再写教程，总之注意大小写复制就好，这里简单说一下。“(.*)”代表任意字符，上面搜索的就是两个“body”标签和之间的所有文字。其中前后的“body”标签对应写好的“＜body＞”，中间的全部内容对应“(.*)”。之后替换的内容中，“body”标签还要写上去不然就没了，\ｒ是回车.然后没见过的“\１”代表上面“(.*)”对应的所有内容，也就是正文全都不变。加进去的两个“div”标签一个在前一个在后成一对，前面的尖括号里面有一个“ class="all" ”和前面的“div”分开，这个代表的就是应用名为“all”的类了。
如果看懂了上面的文字，可以很清楚的看出上面的替换操作完成之后所有文件内容的前后都加上了一个div，然后这个大的“<div>…</div>”框架框住了所有的内容并且运用了名为“all”的类，也就是说这个div便是宽度为40字居中的了。这样一来，被这个父元素框柱的子元素，也就是那些作为段落的“p”标签最大也就只有40个汉字宽度了。替换完成之后，看一眼书籍模式，是不是一瞬间这些文本就都整齐了？
接下来就是设置段间距行间距什么的了，其实这个设置顺序也不重要，我也不解释那么多，直接在css文件里打就好了。输入“.text p {line-height:1.5em;margin:0.75em 0;text-indent:2em;}”就行了。先解释下样式的意思，从左到右分别是设置行高、段间距和首行缩进两个汉字宽度。这也是我为什么要求去掉空格缩进的原因。
然后就是前面的解释了，可以看到这次大括号前面是“.text p”，也就是表示它设置的不是带有“ class="text" ”的元素，而是带有“ class="text" ”的元素里面的“p”元素。因为一般来说我们在彩页什么的是不会设置首行缩进和这么大的段间距的，所以我们就单纯给正文部分加上这些。引用的方法就是在正文的div标签里面的“class”后面再加上一个“text”便可（当然因为这个“text”是类所以能任意写，但是后面的“p”指的是“<p></p>”所以千万别乱写了）。不是说再加一个class，而是写成“ class="all text" ”或者“ class="text all" ”，顺序无所谓，不同的类用空格分开，这样就即应用了类“all”也应用了类“text”。
当然，上面那个操作也可以用替换来完成，搜索“<div class="all">”然后替换成“<div class="all text">”就好了，注意选择的范围。先选中你要替换的html文件，然后范围是“选中的所有文件”，不然给所有文件加上了标签那就没有特意分类的意义了。
这样一来，正文的规划大概就做好了。排版整齐且有两格缩进，也符合了大部分地方的发布要求了，基本上段落整理就是这样了。不过你们可能也发现了，如果一开始就使用部分替换的话，动作会快很多。于是我在最后也准备好了模板，当然是我自己用的，同时也是这个教程相同的类命名，如果是完全按照本帖进行试做的话推荐进行相同的划分。
我个人分出了5种不同的文件样式，分别是封面页、录入信息页、彩页、目录页和正文。不够大部分时候录入信息可以和正文通用啦……注意所有的都搜索“＜body＞(.*)＜/body＞”，然后替换的模板在下面：（注意全半角）
●封面页
○＜body＞\ｒ<div class="all cover">\ｒ\１</div>\ｒ＜/body＞
●录入信息页
○＜body＞\ｒ<div class="all information">\ｒ\１</div>\ｒ＜/body＞
●彩页
○＜body＞\ｒ<div class="all img">\ｒ\１</div>\ｒ＜/body＞
●目录页
○＜body＞\ｒ<div class="all content">\ｒ\１</div>\ｒ＜/body＞
●正文
○＜body＞\ｒ<div class="all text">\ｒ\１</div>\ｒ＜/body＞
虽然是写了全角不好复制，不过其实只要每个都差不多改一点就好了。这边把不同的地方都划蓝了，够贴心了吧(笑)。
那么至此，本节完，后续教程见新帖，一贴太长没目录之后再看不好找。</div></div>
4 年前 0 回復
4 年前 0 回復
4 年前 0 回復
4 年前 1 回復
4 年前 1 回復
4 年前 0 回復
4 年前 0 回復
4 年前 0 回復
4 年前 0 回復
4 年前 0 回復
4 年前 0 回復
4 年前 0 回復
4 年前 0 回復
4 年前 0 回復
4 年前 0 回復
4 年前 0 回復
4 年前 0 回復
4 年前 0 回復
4 年前 0 回復
4 年前 0 回復