導航:首頁 > 萬維百科 > 帶框架網頁的設計

帶框架網頁的設計

發布時間:2020-11-05 11:51:48

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、網頁設計中的「框架頁」是什麼東西?

框架頁是一種特殊的網頁,主要作用是把屏幕分為2個或2個以上的區域,其中每一個區域都可以單獨顯示一個網頁。框架頁就是如何組織多個網頁在一起的定義文件,結構與一般網頁不同。

3、網頁設計中怎麼用框架集設計網頁

首先要了解框架集的概念。

框架集是構造整個框架結構的文檔,它不包含具體顯示的文本和圖像,而只包含如何組織安排各個框架位置、大小和初始頁面信息的設計。

它是框架使用中最基礎的文檔,常稱之為整個框架顯示時的主文檔。


框架集的基本格式如下:

注意到,框架組文檔中,用標記符代替了標記符。而標記符則用來指定每一個子窗口的內容。

1)窗口的分割用來分割瀏覽器窗口,它使用COLS和ROWS這2個屬性項把整個窗口按垂直方向或水平方向分割為多個框架。例如:。該標記符把窗口分成3個垂直的框架,指定左框架寬度值為150象素、中間框架占總寬度的50%,餘下的寬度留給右框架。


由上例可見,框架尺寸除使用象素值和百分數外,還可以使用*和n* ;使用*表示剩餘部分;當使用n*(如2*)時,n值確定框架之間的比例。例如:"*,2*,3*"表示左邊(或上邊)的框架占窗口寬度(或高度)的1/6,中間框架佔1/3,右邊(或下邊)框架佔1/2。


2)標記符的嵌套標記符可以嵌套使用。以構造包含橫向和縱向框架的窗口。以下代碼用嵌套框架結構建立一個多層框架的窗口。框架的實現

3)框架的初始化標記符用於對各個框架進行初始化設置。使用標記符中的SRC屬性指定需要在框架中顯示的頁面的文 褂肗AME屬性指定框架的名稱,以便在指定超級鏈接的目標框架時引用該框架名。標記符的個數應等於框架個數,並依出現的次序和層次先行後列對框架進行初始化。

例如:若要在指定框架顯示某頁面,則必須在SRC指定的URL位置存在指定的HTML文件。這就意味著要在所設計的框架中完整顯示出所有內容,總共要編制頁面個數為「框架數+1」。 

4、有關html網頁設計的框架問題(嵌入網頁)

<iframe name="mypage" width=900px height=600px src="默認頁面"></iframe>
其他頁面鏈接target="mypage"
就OK了。

5、網頁設計,只用一個網頁怎麼實現框架的功能?

只用一個頁面的話只能用層吧,點擊導航,顯示一個層,隱藏其他層。
網上有許多就js+css寫的滑動門也可以實現類似效果

6、網頁設計用框架

這個可以用HTML代碼以及PHP就可以實現的。一般來講,可以通過錨點鏈接或者是Dreamweaver進行。
<a href="鏈接跳轉地址" target="_blank"><img src="圖片地址"/></a>

7、網頁設計中如何使用嵌套的框架集

一個框架集文件可以包含多個嵌套的框架集。大多數使用框架的 Web 頁實際上都使用嵌套的框架,並且在 Dreamweaver 中大多數預定義的框架集也使用嵌套。如果在一組框架里,不同行或不同列中有不同數目的框架,則要求使用嵌套的框架集。 例如,最常見的框架布局在頂行有一個框架(框架中顯示公司的徽標),並且在底行有兩個框架(一個導航框架和一個內容框架)。此布局要求嵌套的框架集:一個兩行的框架集,在第二行中嵌套了一個兩列的框架集。 Dreamweaver 會根據需要自動嵌套框架集;如果您在 Dreamweaver 中使用框架拆分工具,則您就不需要考慮哪些框架將被嵌套、哪些框架不被嵌套這樣的細節。 有兩種方法可在 HTML 中嵌套框架集:內部框架集可以與外部框架集在同一文件中定義,也可以在不同文件中單獨定義。Dreamweaver 中每個預定義的框架集均在同一文件中定義其所有框架集。 這兩種類型的嵌套均產生相同的視覺效果;如果沒有看到代碼,很難判斷使用的是哪種類型的嵌套。在 Dreamweaver 中使用外部框架集文件的最常見情況如下:使用"在框架中打開"命令在框架內打開框架集文件時,可能導致設置鏈接目標時出現問題。

8、網頁設計的布局有哪幾種

網頁設計的布局有哪幾種?

1.「國」字型:

2.拐角型:

3.標題正文型:

4.左右框架型:

5.上下框架型:

6.綜合框架型:

7.封面型:

8.Flash型:網頁設計

9.變化型:網頁設計

與帶框架網頁的設計相關的知識