1、用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書的好壞與很多方面有關,包括內容編輯校對的情況、設計水平和製作水平等。
2、怎麼把PDF放在自己製作的html靜態頁面上
把PDF放在自己製作的html靜態頁面上,首先保證客戶端安裝有可以直接打開PDF的軟體,比如:Adobe Reader
具體解決辦法有三種,針對不同的瀏覽器兼容性方面要做稍微調整。
一、使用 <OBJECT> 標記在HTML 中嵌入PDF 文檔
如果您的用戶使用與 Internet Explorer 兼容、支持 ActiveX 控制項的瀏覽器,您可用 <OBJECT> 標記嵌入 PDF 文檔,而不需用 <EMBED> 標記。與Internet Explorer 3.0 或更高版本兼容的瀏覽器能支持 <OBJECT> 標記。
具體代碼如下:
如無法查看,請先下載安裝Adobe Reader X
<p style="margin-top: -2px; margin-bottom: 0">
<object classid="clsid:CA8A9780-280D-11CF-A24D-444553540000" id="Pdf1" width="730" height="606">
<param name="_Version" value="327680">
<param name="_ExtentX" value="19315">
<param name="_ExtentY" value="16034">
<param name="_StockProps" value="0">
<param name="SRC" value="pdf路徑">
</object>
直接嵌入PDF可能會顯示PDF頭部的功能按鈕,可以通過設置margin-top: -2px的值予以隱藏。相關參數調整嵌入的PDF的高寬。
二、使用iframe嵌入pdf
使用iframe包含pdf文件,格式上面就沒法保證,顯示出來的樣式不太好看。 具體代碼如下:
<iframe src="pdf路徑" with="" height="" scroll="no"></iframe>
三、直接打開pdf
直接打開pdf,使用連接形式打開,如果客戶端有安裝PDF閱讀軟體,可以直接打開,但是會整個顯示,全屏都是PDF內容了。
具體代碼如下:
<a href="pdf路徑">XXpdf</a>
iframe嵌入文件是最簡單的,直接載入就好.
3、html網頁設計怎麼提供文件下載
簡單點做個超鏈接,鏈接到某個文件。
4、HTML+CSS網頁設計與布局從入門到精通PDF格式下載
你這要求也太多了啊,很少有剛好符合你的要求的。
你要能百度一下,要麼Google一下,應該能找到不少資料的,雖然很零散,但是足夠你學習使用了。其實網頁設計主要是靠練習的,遇到不會的再找相關的資料。而不是先完全學會。
就像我當初學網頁設計,現在不做這一行,已經忘光了。
如果你有好的資料,不妨給我分享一下。
5、求 HTML+CSS+JavaScript網頁設計從入門到精通 胡曉霞版的書籍PDF 謝謝!
6、html+css網頁設計與布局的電子書
去http://www.lanrentuku.com/js/
看看吧。。。都是開源的東西