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、HTML網頁設計:一個簡單的登錄界面可以連接到資料庫記錄的代碼
如下參考:
1.首先,在您的計算機桌面上創建一個新文件夾,然後在該文件夾中創建一個新的文本文檔。
2.然後用記事本雙擊打開文本文檔,如下圖所示,然後編寫一個簡單的HTML代碼。
3.點擊「另存為」功能選項,顯示默認的「另存為」代碼為ANSI。
4.我們將把編碼和文件名更改回圖中所示的圖像並保存它。
5.然後回到新創建的文件夾,找到一個額外的HTML文件。
6.最後,使用瀏覽器打開HTML文件。結果如圖所示。
3、html網頁設計:一個簡單的登錄界面代碼!
是這樣的效果嗎?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>3</title>
<script>
function r()
{
var username=document.getElementById("username");
var pass=document.getElementById("password");
if(username.value=="")
{
alert("請輸入用戶名");
username.focus();
return;
}
if(pass.value=="")
{
alert("請輸入密碼");
return;
}
return true;
}
</script>
</head>
<body>
<form>
<table width="350" bgcolor="#ccffcc" style="border-color" border="1">
<tr align=center>
<td>用戶名</td><td><input type="text" name="username" id="username"></td>
</tr>
<tr align=center><td>密 碼</td><td><input type="password" name="password" id="password"></td></tr>
<tr align=center><td>驗證碼</td><td><input type="text" name="yanzheng"></td></tr>
<tr align=center><td colspan="2"><input type="button" value="登 錄" onclick="r();"/> <input type="reset" value="重 置"/></td></tr>
</table>
</form>
</body>
</html>
4、如何用MyEclipse6.5製作簡單的圖書管理系統的登錄網頁
用javascript腳本。就可以了。 <input name="password" type="password" size="21"> <input name="userName" type="text" size="20"> 以上兩行代碼是Html標簽里的。 以下是判斷userName 和password 是否正確。 <script language="javascript"> function login() { var userName=document.forms[0].userName.value; var pass=document.forms[0].password.value; //用戶名為「admin」,密碼為「123456」 if(userName=="admin" && pass=="123456") { window.close(); window.open("showall.html"); //成功後打開的網頁 } } </script>
5、用html、css等網頁設計技術編寫代碼管理系統
private Response _post(String url, File file, String fileKey) throws IOException
{
Request request = buildMultipartFormRequest(url, new File[]{file}, new String[]{fileKey}, null);
return mOkHttpClient.newCall(request).execute();
}
private Response _post(String url, File file, String fileKey, Param... params) throws IOException
{
Request request = buildMultipartFormRequest(url, new File[]{file}, new String[]{fileKey}, params);
return mOkHttpClient.newCall(request).execute();
}
6、html網頁設計:一個簡單的登錄界面代碼!
<input
type='button'
text='登陸'
onclick='return
checknull()'>你說的要能識別是否輸入了用戶名和密碼!需要用腳本來驗證
<script>
function
checknull()
{
var
a=document.getElementById('用戶名文本框ID').text;
var
b=document.getElementById('密碼文本框ID').text;
if(a.length>0&&b.length)
return
true;
else
return
false;
}
<script>
7、關於html網頁製作的書?
HTML網頁設計參考手冊(珍藏版);
悟透javaScript;
Head First HTML與CSS、XHTML(中文版);
深入淺出HTML(簡明使用的Web開發入版門教程) ;
零基礎學權HTML+CSS;
巧學巧用HTML、CSS、Javascript製作網頁
在這里可以買到:
中國互動出版網 http://www.china-pub.com/s/?key1=html&type=&pz=1&t=2
8、網頁設計用html和js製作一個登錄界面,大神幫幫忙?
① 建議使用HTML標簽時用語義化標簽,比如主塊部分就先用一個section標簽括起來;
② 外加css樣式設置美化頁面,特別是登錄界面的靈動感;
③ JavaScript綁定事件,實現更加人性化的功能;
9、基於HTML5的圖書館網站設計
這個問題 可以給你一些建議,不過要是想要設計稿和程序的話,可以在網上找一些源碼,自己修改吧,