找回密码
 注register册

QQ登录

只需一步,快速开始

查看: 39641|回复: 35

[〖制作经验〗] EBOOK简单入门教程

发表于 2008-11-7 21:45:14 |阅读模式
UVhKR0M=DEZ81J
第一次写教程,语言表达能力也不好,如果看不懂的话,请版主大人及各位姑娘抽打时轻点>_<
[j]DEZ81J RV2FTS[/j]P.S:年纪大了,说话啰嗦,步骤会比较多,我是边做边贴,请各位耐心点,谢谢~[j]DEZ81J RV2FUN[/j]

[j]DEZ81J RV2FTU[/j]===============================我是教程开始的分割线============================================
[j]DEZ81J RV2FU3[/j]
[j]DEZ81J RV2FV7[/j]
通常我们所做Ebook用的是800*600px的图(我有600*600方正图的偏执爱好,请各位不要学我= =)
[j]DEZ81J RV2FU4[/j]新建一个文件夹,此文件夹内只可存放这份Ebook的相关文件(包括图片、html、图标等)
[j]DEZ81J RV2FUG[/j][j]DEZ81J RV2FTW[/j]
以我之前做的月刊图鉴为例:(我用的是Dreamweaver 8)
[j]DEZ81J RV2FUY[/j]1打开Dreamweaver——>创建新项目——>HTML[j]DEZ81J RV2FV8[/j]

[j]DEZ81J RV2FUL[/j]2、默认出现以下这个界面,删去第12行(鼠标选取的两行),在</body>后加“<body style="overflow:hidden">”然后保存一下,文件名自己起,否则做出的网页图片就只能在自己的电脑里显示[j]DEZ81J RV2FUW[/j]

[j]DEZ81J RV2FUU[/j]                               
需要注册成功才可查看大图
[j]DEZ81J RV2FVB[/j]

[j]DEZ81J RV2FUI[/j]3点击设计,进入设计页面
[j]DEZ81J RV2FUF[/j]
[j]DEZ81J RV2FUS[/j]

[j]DEZ81J RV2FTS[/j]                               
需要注册成功才可查看大图

[j]DEZ81J RV2FUN[/j]
[j]DEZ81J RV2FTZ[/j]4、在最上方的菜单栏里点击”插入”——>”布局对象”——>”层”,出现一个闪动着   ***下载/download/otomedream/ダウンロード***   光标的蓝色框,敲”ENTER”——>删除键[j]DEZ81J RV2FVD[/j]

[j]DEZ81J RV2FTV[/j]

[j]DEZ81J RV2FU3[/j]5点击步骤3图中的代码,找到层1的代码,修改如下图
[j]DEZ81J RV2FUL[/j]

[j]DEZ81J RV2FUV[/j]                               
需要注册成功才可查看大图

[j]DEZ81J RV2FUF[/j]
[j]DEZ81J RV2FVE[/j]6回到设计页面插入——>”图像,选择你要用的图片,保存,这样一个基本的图片网页就做好了
[j]DEZ81J RV2FUI[/j]
[j]DEZ81J RV2FUN[/j]

[j]DEZ81J RV2FTW[/j]                               
需要注册成功才可查看大图

[j]DEZ81J RV2FUN[/j][j]DEZ81J RV2FU7[/j]
====================================小分一下====================================================
[j]DEZ81J RV2FTS[/j]
接下来是在网页上加flash,某只是相~当~滴喜欢加flash滴~ >///<[j]DEZ81J RV2FUR[/j]
1、在图上任一处点击一下,然后重复上贴中的步骤4
[j]DEZ81J RV2FU5[/j]
[j]DEZ81J RV2FUF[/j]
[j]DEZ81J RV2FTU[/j]
2、“插入——>媒体——>FLASH,选择你要用flash文件
[j]DEZ81J RV2FUD[/j][j]DEZ81J RV2FUV[/j]

[j]DEZ81J RV2FUK[/j]3点击代码,在

[j]DEZ81J RV2FU8[/j]                               
需要注册成功才可查看大图
下方加上
[j]DEZ81J RV2FUX[/j]
                               
需要注册成功才可查看大图

[j]DEZ81J RV2FUK[/j]
[j]DEZ81J RV2FUC[/j]这样flash就可以变为透明的了
[j]DEZ81J RV2FVC[/j][j]DEZ81J RV2FTU[/j]
[j]DEZ81J RV2FUP[/j]
[j]DEZ81J RV2FUB[/j]
4在设计页面可以拖动flash到你想摆放的位置[j]DEZ81J RV2FUO[/j]

[j]DEZ81J RV2FTQ[/j]                               
需要注册成功才可查看大图

[j]DEZ81J RV2FU6[/j]
[j]DEZ81J RV2FV9[/j]=========================================3分线=======================================[j]DEZ81J RV2FUO[/j]
在网页上做链接(一):针对图中的某处区域做链接
[j]DEZ81J RV2FUH[/j]1、重复第一部分步骤1-6,命名为封面2.html,插入下图
[j]DEZ81J RV2FVE[/j]

[j]DEZ81J RV2FUY[/j]                               
需要注册成功才可查看大图

[j]DEZ81J RV2FTY[/j][j]DEZ81J RV2FUR[/j]
我要做的是,点击图片上的ENTER,可以进入下一个页面(我命名为index.html)[j]DEZ81J RV2FVE[/j]
2、在图片上任意一处点击一下,然后注意左下角(嘛,我左右不太分,错的话告诉我= =)此处
[j]DEZ81J RV2FV7[/j]

[j]DEZ81J RV2FV5[/j]                               
需要注册成功才可查看大图
[j]DEZ81J RV2FTZ[/j]
3、添加热点
[j]DEZ81J RV2FTX[/j]
                               
需要注册成功才可查看大图
点击这个蓝色区域,输入你想要做链接的网页的名称

[j]DEZ81J RV2FUZ[/j]                               
需要注册成功才可查看大图
[j]DEZ81J RV2FU3[/j]
[j]DEZ81J RV2FV0[/j]

[j]DEZ81J RV2FUZ[/j]在网页上做链接(二):用图片做链接[j]DEZ81J RV2FU5[/j]
这是针对以图片做背景(<——这个一会我会讲到)的链接,即我们通常说的内页的链接方式[j]DEZ81J RV2FUP[/j]
1、在层1layer 1)上点击一下

[j]DEZ81J RV2FTV[/j]                               
需要注册成功才可查看大图
再次重复第一部分步骤
4,插入做链接用的图片:下一页

[j]DEZ81J RV2FUX[/j]                               
需要注册成功才可查看大图
[j]DEZ81J RV2FTX[/j]
[j]DEZ81J RV2FUG[/j]
[j]DEZ81J RV2FVB[/j]

[j]DEZ81J RV2FV5[/j]2点击图片,下方出现以下界面

[j]DEZ81J RV2FTV[/j]                               
需要注册成功才可查看大图
链接里填上想要链接的页面名称
[j]DEZ81J RV2FUO[/j]
[j]DEZ81J RV2FUI[/j]
[j]DEZ81J RV2FU4[/j]
3于是两种常用的链接方式完成~^O^

[j]DEZ81J RV2FTV[/j][j]DEZ81J RV2FU5[/j]
==============================分啊分啊~我是努力分的小线线>_<===============================
[j]DEZ81J RV2FV2[/j]俺最不喜欢的部分终于到来了——内页= =|||[j]DEZ81J RV2FU2[/j]
1[j]DEZ81J RV2FV8[/j]
新建html——>修改代码——>保存——>插入——>布局对象——>层(请重复第一部分的步骤)
[j]DEZ81J RV2FV2[/j]
[j]DEZ81J RV2FV9[/j][j]DEZ81J RV2FUT[/j]
2、当出现有   ***下载/download/otomedream/ダウンロード***   光标的蓝色框时不要敲ENTER,进入代码页面,修改如下

[j]DEZ81J RV2FTS[/j]                               
需要注册成功才可查看大图
[j]DEZ81J RV2FTZ[/j]

[j]DEZ81J RV2FUM[/j]
[j]DEZ81J RV2FUV[/j]3、回设计页面,在下方属(xing)处,点击页面属(xing)

[j]DEZ81J RV2FV4[/j]                               
需要注册成功才可查看大图

[j]DEZ81J RV2FUC[/j]
[j]DEZ81J RV2FU9[/j]

[j]DEZ81J RV2FUT[/j]4跳出这个界面[j]DEZ81J RV2FU7[/j]

[j]DEZ81J RV2FTQ[/j]                               
需要注册成功才可查看大图

[j]DEZ81J RV2FUP[/j][j]DEZ81J RV2FUW[/j]
[j]DEZ81J RV2FU5[/j]
[j]DEZ81J RV2FUV[/j]
这样内页的背景就做好了[j]DEZ81J RV2FV8[/j]

[j]DEZ81J RV2FV8[/j]5点击一下layer1,插入——>布局对象——>层——>ENTER——>删除,我们开始做layer2
[j]DEZ81J RV2FUQ[/j][j]DEZ81J RV2FU2[/j]
[j]DEZ81J RV2FUL[/j]
6layer2的层放置到你想摆放文的地方,并调整长宽度
[j]DEZ81J RV2FU4[/j]
[j]DEZ81J RV2FUH[/j]
[j]DEZ81J RV2FTW[/j]
7进入代码页面,注意[j]DEZ81J RV2FVC[/j]

[j]DEZ81J RV2FUS[/j]

[j]DEZ81J RV2FTZ[/j]                               
需要注册成功才可查看大图
[j]DEZ81J RV2FV1[/j]

[j]DEZ81J RV2FTR[/j]<p></p>之间加入代码<iframe name="main" src="bai01-wen.html" width=565 height=485 scrolling="auto" frameborder="0" class="STYLE1" style="filter:chroma(color=<颜色代码>)" allowtransparency="true"></iframe>
[j]DEZ81J RV2FUZ[/j]bai01-wen.html是我做的文字网页,width=565 height=485是文字页面所占的长宽度,要与layer2的长宽度一致,color是文字的底色
[j]DEZ81J RV2FU1[/j][j]DEZ81J RV2FTU[/j]
[j]DEZ81J RV2FU4[/j]
内页至此完成~撒花~[j]DEZ81J RV2FV3[/j]

[j]DEZ81J RV2FUG[/j]
[j]DEZ81J RV2FTT[/j]=====================================快要做完,稍稍喘口气的小分分==================================
[j]DEZ81J RV2FV2[/j]最后我们来说一下文字页面
[j]DEZ81J RV2FUQ[/j]1、新建网页——>保存为bai01-wen.html,在代码页面
[j]DEZ81J RV2FV8[/j]
                               
需要注册成功才可查看大图

[j]DEZ81J RV2FUK[/j]2、坛子里姑娘给的翻译大多是WORD文档,必须先把文字复制进记事本中,再从记事本中复制到"设计"页面,保存[j]DEZ81J RV2FUN[/j]

[j]DEZ81J RV2FTY[/j]3、点击F12,预览一下整个EBOOK是否有疏漏,没有就可以用E书软件进行压制了
[j]DEZ81J RV2FTV[/j][j]DEZ81J RV2FV3[/j]
=========================完成撒花ing的小分分及其相方小线线=======================================
[j]DEZ81J RV2FUH[/j]

[j]DEZ81J RV2FTZ[/j]以上内容皆为原创[j]DEZ81J RV2FUR[/j]
请勿随意转载,否则SM   ***下载/download/otomedream/ダウンロード***   之= =+
[j]DEZ81J RV2FTX[/j]
[j]DEZ81J RV2FU2[/j]

[j]DEZ81J RV2FV6[/j]

[j]DEZ81J RV2FV7[/j]

[j]DEZ81J RV2FUD[/j]
[j]DEZ81J RV2FV5[/j]
[j]DEZ81J RV2FUM[/j]
[j]DEZ81J RV2FUT[/j]
[j]DEZ81J RV2FUE[/j]
[j]DEZ81J RV2FVD[/j]

[j]DEZ81J RV2FUM[/j]
[j]DEZ81J RV2FTR[/j]
[j]DEZ81J RV2FUA[/j]
[j]DEZ81J RV2FUV[/j]
【论坛搜索关键词】:🔍EBOOK简单入门教程

评分

参与人数 1论坛币 +30 威望 +3 魅力 +10 收起 理由
赭彦 + 30 + 3 + 10 感谢=3=姑娘如果有需要以后可以随时补充更新 ...

查看全部评分

其他会员正在看的帖子

UVhKR0M=
发表于 2008-11-8 13:59:16
````其实···有点复杂的说
[j]DEZ81J RV2FUD[/j]可不可以有那种比较现成的资源来制作电子书呢
[j]DEZ81J RV2FU0[/j]就是不用自己看着一长串字母的那种~~~houn113
回复

使用道具

UVhKR0M=
发表于 2008-11-11 13:32:02
to ls:
[j]DEZ81J RV2FUI[/j]照我的理解,电子书制作软件其实就是把现成的一组网页编辑成一个exe文件,只是一个转化过程
[j]DEZ81J RV2FVA[/j]难度还是在于怎么制作网页
[j]DEZ81J RV2FVD[/j]LZ这篇教程是在讲解网页的制作方法,也就是转化之前的准备工作,这也是我最头疼的部分[j]DEZ81J RV2FUS[/j]

[j]DEZ81J RV2FTU[/j]另外,问LZ个问题,关于内页
[j]DEZ81J RV2FUR[/j]为什么不把链接直接连到bai01-wen.html(教程中的例子),而必须要做layer?而且还是做2层?这样不就相当于最后阅读时的一页,实际做了2个html文件?这样做的好处是什么[j]DEZ81J RV2FV7[/j]
(个人揣测是为了让电子书每页的大小一样,因为就文字网页本身来讲,很难控制所有页都一样长,不知道对不对?)
[j]DEZ81J RV2FU4[/j]
[j]DEZ81J RV2FUG[/j]还有个E书软件的问题[j]DEZ81J RV2FU7[/j]
外面看到有些E书做出来的效果……其实和浏览网页没啥区别,一样在页面上方有工具栏,前进后退搜索什么的,看着就象……恩……windows的帮助
[j]DEZ81J RV2FUC[/j]不过翼之梦的E书都很漂亮,这些不必要的工具栏什么都没有,请问,是用什么软件压制的?还是说在压制时某些选项上的差别

评分

参与人数 1SP +1 收起 理由
赭彦 + 1 姑娘加油哦,得道之后欢迎加入论坛工作组

查看全部评分

回复

使用道具

电子花车 该用户已被删除
UVhKR0M=
发表于 2008-11-12 13:43:31
回LS的问题
[j]DEZ81J RV2FTU[/j]雪姑娘所说的是做网页中常见的一种形式--嵌入式文字..这样做.EB看起来美观很多.也能把翻译规定在我所决定的地方里显示出来.
[j]DEZ81J RV2FU6[/j]===============================================
[j]DEZ81J RV2FUX[/j]1、为什么不直接用bai01-wen.html。如果直接用这页的话。那么就没有做内页的必要了。而且bai01-wen.html这一页仅仅只有翻译文字。做起来的EB也不美观对不
[j]DEZ81J RV2FV9[/j]2、之所以做2个层是因为,第一层是用来放内页的底图。因为所嵌入的文字是放在底图的基础上,所以必须要建第2层来放嵌入的文字[j]DEZ81J RV2FTY[/j]
3、对的。确实如LS亲所说,做了2个HTML的文件来显示内页的,而且亲的推测也没有错。因为普通的文字页是满屏的。如果通过嵌入式来显示文字页。也就能达到我可以控制显示文字的框框大小。这样看起来就美观很多了。也不会只有文字那么单调了
[j]DEZ81J RV2FU2[/j]4、E书软件问题,我写了一个打包的过程。主要是针对各大论坛都比较常用的eBook Edit Pro
[j]DEZ81J RV2FTX[/j]================问题回答完毕======================
[j]DEZ81J RV2FUE[/j]亲有兴趣可以去看看。houn111
回复

使用道具

UVhKR0M=
 楼主| 发表于 2008-11-15 20:38:49
OTZ...自己写完教程就忘记这贴了,只抽
[j]DEZ81J RV2FU3[/j]感谢电子花车同学的帮忙m(_ _)m
[j]DEZ81J RV2FUJ[/j]
[j]DEZ81J RV2FTZ[/j]TO 2L的姑娘:比较现成的资源来制作电子书...回答你,其实是有的。遥想当年俺刚入这行时,俺用的都是电子   ***下载/download/otomedream/ダウンロード***   软件,有现成的模板,只要会P图,懂排版,就可以了。当年用的是POCO跟   ***下载/download/otomedream/ダウンロード***   中国这2种软件,姑娘可以在网上搜搜[j]DEZ81J RV2FUO[/j]

[j]DEZ81J RV2FTX[/j]TO 3L的姑娘:关于为啥要做2个层,如上贴所说
[j]DEZ81J RV2FUC[/j]1层是制作内页的背景,另一层是放文字层,以控制文字框的位置及大小,这个层是链接文字页的(1L里有)
[j]DEZ81J RV2FUE[/j]E书软件,我用的软件是eBook Edit Pro v3.31
[j]DEZ81J RV2FU0[/j]既然电子花车TX已写了打包教程,我这里就不多说了>_<
回复

使用道具

UVhKR0M=
发表于 2008-11-16 09:18:25
我自己试了一下,发现2层之中,第2层的大小最好比第一层略小
[j]DEZ81J RV2FV0[/j]就像教程中的例子,否则,一旦有滚动轴,就无法显示了,我后来就设成780*580了(layer1是800*600)[j]DEZ81J RV2FUC[/j]
不管怎么样,做成功电子书了,感谢教程
回复

使用道具

leannbabe 该用户已被删除
UVhKR0M=
发表于 2008-11-16 17:27:59
lz谢谢了~~虽然教程有点复杂(太多字了>///<)
[j]DEZ81J RV2FUM[/j]不过偶还是做成功电子书了!(感觉很棒!)
[j]DEZ81J RV2FTT[/j]p.s:LS几位大大所给的意见,带给偶很大的帮助。谢谢啦~~
回复

使用道具

头像被屏蔽
UVhKR0M=
发表于 2009-1-6 22:52:18
本帖最后由 菊一文字 于 2009-1-14 14:42 编辑
[j]DEZ81J RV2FV7[/j]
[j]DEZ81J RV2FUE[/j]首先谢谢LZ发的教程[j]DEZ81J RV2FVE[/j]
一直想交流e书儿都没人发帖,我有几个问题,还请指教啊
[j]DEZ81J RV2FU6[/j]——————分割——————
[j]DEZ81J RV2FUG[/j]1、滚动条
[j]DEZ81J RV2FTW[/j]滚动条透明
[j]DEZ81J RV2FUY[/j]用鼠标点击滚动条两端箭头与滚动滑块之间的区域,仍会有点击痕迹(就是会有一条颜色提示滑块移动了多少的),请问下怎么才能使这个效果也透明化
[j]DEZ81J RV2FUT[/j](也就是想使点击时没有颜色提示,也成透明的)[j]DEZ81J RV2FU3[/j]
2.还有一个效果
[j]DEZ81J RV2FUF[/j]2、 特效
[j]DEZ81J RV2FU8[/j]看了其他高手作的E书,在封面的地方有鼠标滑过的地方会有点点涟漪,这个效果很好看,请问是怎么弄的,能不能详细说说
[j]DEZ81J RV2FUT[/j]3。还有关于网页的过渡效果[j]DEZ81J RV2FTZ[/j]
为什么我切换的时候,页面过渡时框架部分的会变白色,过渡后就又好了
[j]DEZ81J RV2FTR[/j]4.就是关于目录的效果的
[j]DEZ81J RV2FUG[/j]之前看到有e书,当鼠标停留在某一个地方(如题目文字,标题时)[j]DEZ81J RV2FU9[/j]
目录就缓缓展开了,我想请教这个要怎么做[j]DEZ81J RV2FUL[/j]
我尝试用框架,做下拉列表的原理做,可是达不到缓缓展开的效果
[j]DEZ81J RV2FTY[/j](关于这个是小五千日版的是-ZE3的翻译的)
[j]DEZ81J RV2FVC[/j][j]DEZ81J RV2FV9[/j]
既然问到了就顺便贴个过渡效果的代码
[j]DEZ81J RV2FU4[/j]——————分割——————[j]DEZ81J RV2FTR[/j]
过渡效果[j]DEZ81J RV2FV0[/j]
<meta http-equiv="Page-Exit" content="revealTrans(Duration=1,Transition=14)">
[j]DEZ81J RV2FUU[/j]http-equiv="Page-entert":进入效果    http-equiv="Page-Exit"退出效果
[j]DEZ81J RV2FU0[/j]Duration的值为网页动态过渡的时间,单位为秒[j]DEZ81J RV2FU0[/j]
Transition是过渡方式,它的值为0到23,分别对应24种过渡方式。如下表:
[j]DEZ81J RV2FUG[/j]0 盒状收缩
[j]DEZ81J RV2FUL[/j]1 盒状放射
[j]DEZ81J RV2FU1[/j]2 圆形收缩
[j]DEZ81J RV2FUI[/j]3 圆形放射
[j]DEZ81J RV2FU4[/j]4 由下往上[j]DEZ81J RV2FUT[/j]
5 由上往下[j]DEZ81J RV2FU0[/j]
6 从左至右
[j]DEZ81J RV2FU3[/j]7 从右至左
[j]DEZ81J RV2FUC[/j]8 垂直百叶窗
[j]DEZ81J RV2FUE[/j]9 水平百叶窗
[j]DEZ81J RV2FUQ[/j]10 水平格状百叶窗[j]DEZ81J RV2FTX[/j]
11垂直格状百叶窗
[j]DEZ81J RV2FUM[/j]12 随意溶解[j]DEZ81J RV2FTS[/j]
13从左右两端向中间展开
[j]DEZ81J RV2FUJ[/j]14从中间向左右两端展开
[j]DEZ81J RV2FU7[/j]15从上下两端向中间展开
[j]DEZ81J RV2FUC[/j]16从中间向上下两端展开
[j]DEZ81J RV2FU7[/j]17 从右上角向左下角展开
[j]DEZ81J RV2FV9[/j]18 从右下角向左上角展开[j]DEZ81J RV2FUI[/j]
19 从左上角向右下角展开
[j]DEZ81J RV2FTS[/j]20 从左下角向右上角展开
[j]DEZ81J RV2FUM[/j]21 水平线状展开[j]DEZ81J RV2FUZ[/j]
22 垂直线状展开[j]DEZ81J RV2FUV[/j]
23 随机产生一种过渡方式
回复

使用道具

無靈 该用户已被删除
UVhKR0M=
发表于 2009-1-27 21:12:45
原來做 e-book 是將網頁轉成exe
[j]DEZ81J RV2FUN[/j]看來自己也可以動手做一做
[j]DEZ81J RV2FUL[/j]但 dreamwaver 已經是做網頁的軟件
[j]DEZ81J RV2FUW[/j]為什麼還要自己編寫 html
[j]DEZ81J RV2FU9[/j]雖然 懂 html 是好一些
[j]DEZ81J RV2FV0[/j]但不用這麼麻煩吧
回复

使用道具

櫻井悠 该用户已被删除
UVhKR0M=
发表于 2009-2-12 02:52:19
to 無靈:[j]DEZ81J RV2FUX[/j]
恩, 我也是這麼認為, 但是一般做網頁的時候也會與html交叉使用[j]DEZ81J RV2FUJ[/j]
畢竟有時候還是有不足的地方
[j]DEZ81J RV2FUI[/j]排版時還是需要調整一下
[j]DEZ81J RV2FVA[/j]
[j]DEZ81J RV2FU6[/j]而且一直依賴軟件的功能也不見得是件好事
[j]DEZ81J RV2FUA[/j]在讀html的過程中也可以慢慢知道html的用法[j]DEZ81J RV2FUS[/j]
[j]DEZ81J RV2FTU[/j]
============================
[j]DEZ81J RV2FUT[/j]
[j]DEZ81J RV2FVB[/j]有空時來惡補, 不知哪天可以加入翼夢工作組?
回复

使用道具

您需要登录后才可以回帖 登录 | 注register册

本版积分规则

银行|😀|手机版|Archiver|联系 翼梦管理员|联系 舞城管理员|☆翼の夢★舞の城☆聯盟 ( 苏ICP备13061143号 ) | 繁體中文化      

苏公网安备 32011302320404号

GMT+8, 2025-5-11 19:21 , Processed in 0.823636 second(s), 27 queries , Gzip On.      

快速回复 返回顶部 返回列表 立刻刷新