用HTML设计一个带有框架的电子书页面代码

制作电子图书其实就是在制作网页，所以，如果你想制作出精美的电子图书，那么你也应该具有一定水平的网页制作功底。如果你从未接触过网页制作，那么制作一本电子图书就有一定的困难了。因为，我们需要掌握很多网页制作知识和技巧，而且还要至少熟练掌握一到两种图像处理软件。我们这里假定读者已经基本掌握了一些网页制作知识，接下来我们首先按照本站的制作过程来讲解一下制作前需要做的一些事情。

首先，你必须搞到一种或多种电子图书编译软件。

制作电子图书应该有相应的工具，这里给出一个最简单组合：

1、一款文字处理软件（如Microsoft Word、WPS Office）

2、一款网页制作工具（如Dreamweaver、Frontpage）；

3、一款图形图象处理软件（如Photoshop、Fireworks、PhotoImpact）；

4、一款图标制作工具（如Macroangelo）；

5、一款电子图书制作工具（如[EXE格式] ebook edit pro3.31 汉化版eBook Workshop1.4；[CHM格式] QuickCHM2.6；[PDF格式]Acrobat）

以上为制作一本完整的电子图书所需的必要软件工具，以下工具为可选：

1、一款动画制作工具（如GIF Animator、Fireworks、ImageReady、Flash[只针对于支持.swf格式的电子图书编译软件]）；

2、一款网站前台脚本编辑工具（如EditPlus、NotePad、TextPad、XML Spy）

相信对于前面几个软件大家已经很熟悉了，这里不准备详细讲解以上这些软件的使用方法，只在必要的时候讲解一下使用的技巧问题。

好了，制作前的准备我们就先说到这里，最后总结为以下几点：

1.基本网页制作知识：包括定位、表格的使用、页面边距、框架、常见JScript脚本等；

2.图像处理软件的使用：最好选择带有切片功能的图像制作软件，如Fireworks或Photoshop等；

3.熟悉ebook edit pro3.31、eBook Workshop1.4或者QuickCHM2.6等电子图书制作工具的使用方法；

三、制作过程概述

首先，你必须告诉我你已经选好了一本要制作的图书，你得到的可能是HTML、DOC、TXT或者其他任何文档格式的文件，我们首先要对这些文件做制作前的校验以保证文档的可读性。根据制作的题材的不同，我们设计时的理念也不同，比如说，一本关于政治的书就最好不要使用太过艳丽的风格来做，而一本题材活泼的书使用太庄重和压抑的风格又会给人不舒服的感觉。所以，按照题材的不同，我们也要有不同的设计理念。

选好了题目，我们就要对这些文件进行处理了，因为我们制作的东西多数都是通过网上得到的，所以这么多复杂和庞大的文件是有很多错误的，所以我们要对这些文件进行文字校对和格式校对。如果你不想动用像Word这样大的字处理软件的话，使用记事本也可以。处理中需要注意的地方主要有：

1. 是否有强制换行的情况：如果有的话，一定要修改，因为如果不改这些强制换行的地方，阅读起来将相当难看。所以一定要保证文字能够自动换行。

2. 关于如何在Dreamweaver中插入空格的问题：如果你使用的是拼音输入法的话(智能ABC、微软拼音、全拼)，那么这个问题很好解决：使用快捷键“Shift+空格”将输入方式改为全角即可。以微软拼音来说，就是那个黄色的半圆牙变成圆形的就可以输入空格了。

3. 错别字的修改：说实话，作为一个制作者来说，校验错别字是一件枯燥而艰苦的工作，如果你不想做这一步，那么你最好到比较权威的站点去找资料，因为这些站点里的文字资料错别字往往很少，这也就减轻了我们的工作量。

接下来就改设计图书的样式了，简单的说，我们的设计主要包括：

1. 图书封面的设计

2. 图书目录的设计

3. 图书内容模板的设计

下面我们简单的介绍一下这三方面设计时需要注意的问题:

首先来说说封面的设计,我们前面已经说过,我们需要按照图书内容的风格来设计图书的风格,一个好的图书封面可以起到吸引读者的作用,所以我们一般的制作方法是使用现成的图片,然后在图像处理软件中加工一下但是如果手头没有合适的图片,我们就需要自己绘制一幅图片以适应图书的内容.如何自己绘制图片不属于我们讨论的范围,所以这里就不多说了.

其次，我们需要设计图书的目录。一般我制作电子图书都是使用Fireworks设计一个图片框架，然后在导出的时候进行切片，最后在Dreamweaver里进行处理。我们后面将会讲解如何设计图片框架和导出切片等问题。另外，由于每个人使用的显示器的分辨率的不同，所以我们必须考虑这一重要因素。在设计框架的时候最好按照800*600分辨率来设计，因为目前大多数人还在使用这个分辨率。在1024*768下面，只要保证框架居中对齐即可，不会影响浏览效果。这里给出参考大小如下：

800*600：最大化窗口大小为776*470；

1024*768：最大化窗口大小为1000*620；

当然，其中纵向长度对于我们来说并不是很重要，关键要注意宽度问题。如果宽度较大，一行容纳的文字就会很多，这样读者阅读起来就会很吃力。所以一定要注意这个问题。

图书模板的设计，和设计图书目录类似，不过我们一般都可以使用设计目录时使用的切片，只不过在格式的处理上面稍微需要改动一下。

设计好以上所说的一切以后，我们就可以开始制作了。我们按照上面设计的过程来依次制作图书：首先是封面，最好插入封面图片后在800*600和1024*768分辨率下进行测试，看看浏览效果是否正常，最好使封面位于窗口的正中央，否则会给人不舒服的感觉。其次是目录，在Dreamweaver里插入我们设计的切片后，进行简单的处理，然后根据图书章节的数量插入适当大小的表格，以定位各章的标题。最后就是图书内容了：一般使用Dreamweaver设计的模板都放在Templates目录下面，我们可以使用已设计好的模板一章一章的制作，制作的时候要注意各章节之间的链接，一定要正确，不要怕麻烦。

最后就是利用一款电子图书制作工具编译输出了。

四、制作电子图书流程

e书实际上是把一系列的网页文件HTML打包成的一个可执行文件，所以制作e书的关键就是HTML页面的制作，也即网页的设计和制作。如果你已掌握了设计网页方面的知识，那么10分钟内就会制作电子书了。

前面讲过，制作电子图书的软件是非常多的，一些初入门的朋友想自己动手制作电子书，往往又不知道选用什么软件好。这里介绍几种最简单、实用的软件。现在比较流行的有eBook Workshop1.4、 eBook Edit Pro 3.31、以及eBook Pack Express 、WebCompiler 2000等。具体的软件使用方法不在本篇讲述范围，请参考其它的使用教程文章

现在，我仔细介绍一下制作一本电子图书的全过程。对于电子图书的制作实际上和传统书的出版发行流程差不多，大致分为以下几大步：

选题：编辑根据自己了解的市场信息选择出书的主题，比如“大话西游”很热门，就可以针对这个选择好的主题；如果您想将自己站点或感兴趣的内容做成e书，那么你的主题就已经有了。

资料的收集和校对：选题确定了，就要根据该选题收集相关的资料和图片等。互联网是一个资料的大宝藏，可以找到很多有用的信息，但是互联网上的资料也很乱，需要进行大量校对和整理工作。在收集和校对过程中，要整理出书的大致结构（就是书的目录）和书籍风格（整体设计的风格）。

设计：设计师按照编辑整理好的资料、结构和风格说明进行设计，使用PhotoShop和Fireworks等图形处理工具以及一些Icon制作工具（例如Microangelo），设计出书的封面、内文版式以及Icon和Logo文件等。这一步相当于传统的装祯设计。

制作：Html制作员在设计师设计的基础上进行切图、添加文字内容和加入链接等制作工作。这一步的结果相当于一个完整的站点的目录，其中包括图片、Html、CSS、JavaScript等文件以及书中的Icon和Logo文件。使用的工具就是常规的网页制作工具，推荐使用DreamWeaver，它有很好的网站管理功能。

打包：现在包括图书内容的Html、图片、CSS、JavaScript以及书中的Icon和Logo文件都有了，接着就是使用一款制作电子图书的软件打包编译。

至此一本电子书完成，以后就是发布、宣传、推广了！

以上是制作e书的流程。对于大家，所有这些工作常常是一个人完成，从选题、编辑、设计、制作到打包，但是明白这个流程可以让我们的电子书制作的更专业。

下面我们介绍做电子书中设计、制作和打包中应该注意的一些技术细节问题。

编辑资料时应注意的问题：

对于文字资料，最好使用WORD格式，因为WORD中有很多控制符，这样能够方便的转换文本格式。

例如：换段（相当于HTML中的<p>）在WORD中用^p（CTRL+p）表示，一般换行（相当于HTML中的<br>）使用^l（CTRL+l）表示等，这样当我们在后面制作HTML页面需要文本自动换行时，就可以使用这些控制符去掉文本中的换行。而且还可以使用WORD中的“宏”批量处理文本。

设计时应注意的问题：

建议使用PSD（Photoshop）或PNG（Fireworks）格式的分层图，这样便于后续制作时的切割工作。分层图中的无用图层应删除掉。设计时背景和文字应该尽量避免使用过亮的颜色，否则读者阅读时会非常吃力，背景最好使用一些浅色的底纹等。

为了避免e书中出现下方的水平滚动条，页面宽度要按照以下标准：

在800X600分辨率下，宽度不要大于776（网页是778）；

在1024X768分辨率下，宽度不要大于1000（网页是1002）；

设计人员还需要制作电子书中的LOGO和ICON文件。

LOGO文件要求为GIF格式，大小为88X31；

ICON文件使用专门的Icon制作工具（我使用的是Microangelo98）制作，大小为32X32，要求是256色。

制作时应注意的问题：

在切割图片时注意gif和jpg文件格式的区别，选择合适的图片格式，从而在保证清晰度的情况下，让文件尽量的小；链接使用相对地址，同时书中的链接要认真检查，链接到外部的站点也需要确认OK；字体的控制最好不要用点大小，因为这样会使书中的字体大小无法变动。同时文本最好是自动换行。一系列的HTML网页文件名最好不要使用中文，如我喜欢取名为0文件夹，文件按照01.htm、02.htm、03.htm……；

好，到现在您对整个E书的制作过程有了一个了解，至于你制作出e书的好坏与很多方面有关，包括内容编辑校对的情况、设计水平和制作水平等。

1,利用WEB容器的SSI功能。直接2,js同步调用。新建内容为document.write("各种html内容")的js文件,然后在需要的地方引入这个js。3，js异步调用。使用ajax请求将请求的其他页面内容动态填充到指定位置，例如jQuery的load方法。$("#container").load("xxxx.html") 查看原帖>>

---