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

作者&投稿:华盛 (若有异议请与网页底部的电邮联系)
制作一个如下图所示的框架网页,写出HTML代码。~


#hifm{
width:1000px;
height:600px;
border:1px solid yellow;
float:left;
}
.head{
width:1000px;
height:80px;
border:1px solid yellow;
float:left;
}
.index{
width:160px;
height:455px;
border:1px solid yellow;
float:left;
}
.main{
width:836px;
height:455px;
border:1px solid yellow;
float:left;
}
.foot{
width:1000px;
height:60px;
border:1px solid yellow;
float:left;
}



Head
IndexMain
Foot

不知道你说的网站框架具体指的是什么?指的是一个完整的html前端模板吗?这个有很多的具体看你怎么去搜,一般都是可以免费下载的。不过下载下来的都是html静态。比如搜下bootstrap网站模板等,有很多的,或者搜网站静态模板。都是可以下载可以在线查看效果。不过你要做网站的话,只要模板是没用的,因为还要有服务器环境以及域名等才能上线运行。联系做网站的话还是做一个带后台的比较好,前端的话,很多功能是实现不了的

制作电子图书其实就是在制作网页,所以,如果你想制作出精美的电子图书,那么你也应该具有一定水平的网页制作功底。如果你从未接触过网页制作,那么制作一本电子图书就有一定的困难了。因为,我们需要掌握很多网页制作知识和技巧,而且还要至少熟练掌握一到两种图像处理软件。我们这里假定读者已经基本掌握了一些网页制作知识,接下来我们首先按照本站的制作过程来讲解一下制作前需要做的一些事情。
首先,你必须搞到一种或多种电子图书编译软件。
制作电子图书应该有相应的工具,这里给出一个最简单组合:
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书的好坏与很多方面有关,包括内容编辑校对的情况、设计水平和制作水平等。


用html如何制作一个简单的网页代码?
1、首先,在计算机桌面上创建一个新文件夹,然后在该文件夹中创建一个新的文本文档。2、然后双击打开带有记事本的文本文档,如下图所示,我们编写一个简单的html代码。3、单击“另存为”的功能选项,显示默认保存为编码为ANSI。4、我们将更改编码和文件名,将其更改为如图所示的图像并保存。5、然后返回...

用HTML设计一个带有框架的电子书页面代码
最后就是图书内容了:一般使用Dreamweaver设计的模板都放在Templates目录下面,我们可以使用已设计好的模板一章一章的制作,制作的时候要注意各章节之间的链接,一定要正确,不要怕麻烦。 最后就是利用一款电子图书制作工具编译输出了。四、制作电子图书流程 e书实际上是把一系列的网页文件HTML打包成的一个可执行文件,所以...

CSS里面一开始就要1个“.”是为什么呢
先要分清楚css书写含义 body { 代表html中body的标签,即<body><\/body>,html自带的标签是不用加 . 或者 # 号的 } .body { 代表class命名,即<div class="body"><\/div>; } body { 代表id命名,即<div id="body"><\/div> } 这三者所代表的含义不一样!你去掉点之后直接把类名变成标...

怎么打出来一个带边框的符号ヽ?
1、电脑打开搜狗输入法。如下图所示:2、搜狗输入法输入dian。如下图所示:3、点击下一页。如下图所示:4、选择ヽ这个符号。如下图所示:5、最后就可以打ヽ出来了。如下图所示:

html中怎么从一个页面跳转到另一个页面
3、如果您需要在从另一个页面移动到此页面后跳转到另一个位置,则需要将<a name='jump flag'> <\/a>添加到跳转位置作为跳转的标识符。4、使用时,在其他页面的地址末尾添加#jump标志。5、使用jquery跳转,引入jquery。6、比如:让页面平滑滚动到一个id为box的元素处,则JQuery代码只要一句话。

璀璨星辰中的女王,我的金色亮片礼服
飞宇谈财经 1 小时前 · 贡献了超过660个回答 关注 朋友们,有没有被杂志上的模特惊艳到?今天,我要带你们走进我的时尚宇宙,探索那件让我秒变女王的神器——一件金色的亮片礼服✨金色的亮片礼服,紧身的上半身和鱼尾裙设计,充满了优雅和动感。这件礼服来自marie claire,品牌的精湛工艺和独特设计,让...

拯救驼背宝贝!这款矫姿带让我挺直腰杆!
科技强人小林 1 小时前 · 贡献了超过1160个回答 关注 宝贝们,还在为驼背烦恼吗?快来看看我这款左点矫姿带,让我告别驼背,重拾自信!图片中的粉色背带矫姿带,交叉布条设计,中央有白色圆形标志。这款左点矫姿带真的让我惊艳了!它轻便舒适,穿在身上就能明显感觉到背部挺直了起来,整个人看起来都精神焕发。

帮我设计一个带有贤字的网名
贤︴情逸致~人逍遥 思贤梦雨 彷若秋色 り贤 红尘子贤 づ南贤俊╄→ ヤ^南贤俊íΟо 贤人伪装訫情

梦想中的家:完美蜕变
这里的空间布局合理,让人仿佛置身于一片宁静的天地中。家的温暖和亲情女儿的房间与父母房相对,充满了家的温暖和亲情。这里的每一个角落都充满了巧思和独特的美学,让人感到舒适和放松。移门被替换为带卡座的窗户设计师精心打造的每一个角落,都充满了巧思和独特的美学。餐桌紧邻沙发,移门被替换为带卡座的窗户...

设计一个二阶有源高滤波器,要求带通放大倍数为2,下限截止频率为2khz_百...
图如下:放大倍数2=(10K+10K)\/10K,截止频率2k=1\/(2π*0.01u*8k)

袁州区18273767147: 如何制作电子书网页 -
巨蔡黄连: 制作电子书网页推荐使用名编辑电子杂志大师.具体方法如下:1、点击“页面编辑面板”进入编辑页面. 2、添加链接,点击工具栏上的“添加链接”按钮->在页面上画框. 3、 此时弹出“动作选项”对话框,选择“调用javascript脚本”,在...

袁州区18273767147: 怎样在HTML中添加书籍 -
巨蔡黄连: <img src="书籍封面图片路径" onclick="javascript:location='文件路径'" /> 把文件直接拖到浏览器上,然后把浏览器里显示的路径copy到上面提到的文件路径.(这个方法只适合单个浏览器,想要各种浏览器都能访问,就把文件放到IIS里.而且文件是文本.如果是其他.如doc,则跳转后不是直接在浏览器里打开,而是提示你下载.)

袁州区18273767147: 如何制作自己的电子书?
巨蔡黄连: 步骤1.首先去软件网站上,下载Ebook Pack Express编辑工具(具体下载地址: http://www1.3800cc.com/Soft/zcpj/4581.html),然后将其解压到本地硬盘,并且双击释放出来的"程序"图标,会出现Ebook Pack Express工具的安装向导.这里...

袁州区18273767147: 用已编译的 HTML 帮助文件制作exe电子图书要怎样做?
巨蔡黄连: 以VB6.0为例: 选文件菜单的生成工程1.EXE选项,由其集成环境生成可执行EXE文件. 如需安装于其它机器,则需由VB生成安装包,将安装包在其它机器安装. 你所说的控件的位置,CAPTION等所有信息在VB的窗体(*.FRM)文件中.

袁州区18273767147: html帮助文件制作 -
巨蔡黄连: 也许你听说过许多可以编辑网页的软件,事实上,你不需要用任何专门的软件来建立HTML页面;你所需要的只是一个文字处理器(如McrosoftWord\记事本\写字板等等)以及HTML的工作常识.其实你很快就会发现,基础的HTML语言简直容易...

袁州区18273767147: 请问用软景HTML制造机V3.0和e书工场怎样制作精美的电子书? -
巨蔡黄连: 首先用HTML制作好书籍的每一个页面,然后用easychm或者你的e书做编辑组织,要精美在乎于你的美工,不是一个软件能办到的.

袁州区18273767147: HTML综合作业建立一个小型的个人Web站点,按以下要求进行网页设计: (1)设计一个框架网页文档,该文档由顶部(top)、左下侧(left)和右下侧(... -
巨蔡黄连:[答案] 晚上做一下,25号前做好.

袁州区18273767147: 在一个HTML里面如何调用txt文本文档或者其他HTML页面?可用追满分 -
巨蔡黄连: 后台用 php 读取文本文内容,file_get_contents; 取得字符串发给前端,前端将文本填入页面,OK. 要完整代码,你需要请个程序猿,呵呵.

袁州区18273767147: 怎么制作一本电子书 -
巨蔡黄连: 想不想制作自己的电子书?有些喜爱文学的朋友常常抱怨自己的一篇篇辛苦收集来的文章常常是由太多网页组成的,如果能做成象某些网站提供的“电子书”该多好.的确,“电子书”很大程度上方便了我们的阅读,它其实也就是我们经常见到...

袁州区18273767147: 怎样制作电子书
巨蔡黄连: 制作电子书的软件也很多,而且制作不同格式的电子书所选择的软件也不同. 火速链接:谁是个中高手?九大电子书制作工具横评 现在我们用网文快捕来做第一本电子书: 软件名称:网文快捕(CyberArticle) 软件版本:V4.01 软件大小:...

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 星空见康网