海之韻音畫網(wǎng)站

lvboyz 2010-04-20

展開全文

編寫:隨緣

其實,，制作邊框是很簡單的一件事。對初學者來說,，由于還不熟悉HTML代碼,，可以采用“照貓畫虎”的辦法進行學習。如果您不想在HTML方面進行深入的研究探討,，而只是滿足自己編輯文章音畫的需要,，這種方式已經(jīng)足夠您用的了。我們在這里假定您會使用電腦的復制和粘貼功能,。

第一步：選擇一套背景素材圖片備用,。它是編制邊框的“材料”。背景素材一般是共享的,。

(1)

(2)

(3)

(4)
　　　　　

邊框上方的裝飾圖片

邊框中間的裝飾圖片

動態(tài)文字

（注意：在實際操作中不需要把這些圖片復制到編輯頁面,，因為在編輯頁面這些圖片是不能顯示圖片地址的。你在平時收集一些你喜歡的資料,，并把這些資料上傳到你的空間作為備用,。）

第二步：確定您要制作的邊框的層數(shù)。邊框可以根據(jù)需要可以是一層的（由于太單調,，一般不采用）,，也可以是多層的，層數(shù)越多,，邊框結構越復雜,，也越美，當然也不能沒有限度,，層數(shù)太多反而會顯得零亂,，以不超過13層為最佳。我們以9層為例進行學習,。

操作過程：

　　1,、首先在網(wǎng)站登陸,。打開管理頁面后，鼠標左鍵點擊左上角的“發(fā)布新文章”,，進入文章編輯頁面,。

2、然后點擊編輯框右上角的“查看HTML源代碼”左邊的小框,，顯示,，您就可以開始制作了。如果用的是“16789網(wǎng)站”則點擊左下角的“源代碼”按鈕進入源代碼編輯狀態(tài)就可以

進行粘貼代碼制作邊框了,。
第三步：復制邊框代碼,。復制邊框代碼一般有兩種途徑。一是現(xiàn)成的套裝代碼,，一般在各網(wǎng)站的網(wǎng)頁資源欄目里都可以找到,，可直接復制過來。另一種途徑是將任何一個現(xiàn)成套裝

復制到自己的編輯頁面,，再點擊“查看HTML源代碼”左面的方框,，就會顯示完整的代碼。

我們先復制一套現(xiàn)成的套裝代碼：

復制完成后,，點擊“查看HTML源代碼”左面的方框,，如果用的是“16789網(wǎng)站”則點擊左下角的“源代碼”按鈕進入源代碼編輯狀態(tài)就可以進行粘貼代碼就會顯示邊框。這套代碼,，再點擊“查看HTML源代碼”左面的方框,，去掉方框里的勾。

這套代碼的前3行就是第一層邊框的代碼,。第一層代碼是最重要的,，因為一些基本參數(shù)要在這里確定。

有幾個基本代碼和數(shù)據(jù)必須交代給大家,。

　　1,、WIDTH: 1000px　是邊框整體外延的寬度，1000像素是寬屏頁面的寬度,。小于這個數(shù)邊框就會在頁面的兩邊留出空隙,，大于這個數(shù)就會突破正常頁面，變成寬幅邊框,。

　　2,、TOP: 0px　是邊框上延與頁面頂部的距離，除非有特殊需要,，一般取0,，否則邊框頂部與頁面會出現(xiàn)空隙，不美觀,。

　　3,、cellPadding=0 是第一層邊框與第二層邊框的距離,，數(shù)字越大，邊框最外層的寬度就越大,，一般根據(jù)需要調整,。第一層圖片地址的代碼就是第一層邊框圖片的代碼,。從第二層到第9層邊框的代碼是一樣的,，只是圖片代碼不同而已。從<TBODY>到下一個<TBODY>之間就是一層邊框的代碼,。

　　4,、cellSpacing=45 的代碼，這是確定每一層邊框寬度的代碼,，等號后面的數(shù)字就是這一層邊框的寬度,。可以根據(jù)需要隨意調整,。

5,、LEFT: 0px　是邊框與頁面邊界的距離，0即為與左邊界重合,，取負數(shù)邊框就會突破頁面左邊界,，取正數(shù)則邊框右邊就會突破頁面右邊界。

6,、align=center 表示的是居中,。

7、background=圖片地址 表示在此處插入圖片的絕對地址,。

8,、border=0　表示的是邊框的外裝飾效果。

下面我們著手對這個邊框進行“改裝”

第四步：逐層替換邊框圖案,。首先復制我們事先在另一頁面準備好的上面那些邊框素材代碼,。

方法是：

1、我們用教材里的（一號）號圖片的絕對地址替換原邊框的第一層圖片地址的代碼,。

2,、用第（二）號圖片替換第二層、第4層,、第6層和第八層的邊框,。

3、用第（三）幅圖片替換原邊框的第3,、第5,、第7層和第九層邊框。

新邊框是做出來了,，但仔細一瞧,，這個新邊框仍然是不盡如人意,。問題在哪里呢？

第五步: "照貓畫虎”完了之后,，我們要對這個新邊框進行再一次的修飾,。那就是：調整各層之間的距離。

朋友們仔細觀察可以在每一層邊框代碼中都有cellSpacing= 的代碼,，這是確定每一層邊框寬度的代碼,，等號后面的數(shù)字就是這一層邊框的寬度?？梢愿鶕?jù)需要隨意調整,。

我們對各層邊框的寬度作如下調整：第一層調整為60，第2,、4,、6、8層調整為10,，第3,、5、7層調整為8,，第8層調整為6,。

第9層，也就是最里面我們用來貼文字和貼圖的部分,，這個數(shù)字通常為零,，可以根據(jù)文字和貼圖內容的要求無限制拉長。這個新邊框好看多了吧,？但仍沒有結束,。我們發(fā)現(xiàn)第8層和第9層邊框之間的過渡有些別扭，解決的辦法是：在每一層邊框代碼的結尾處有border=0 的代碼,，把后面的0改為1,，就會在兩層圖案間出現(xiàn)一個窄條，起到突出兩層邊框之間過渡鮮明的作用,我們把第2,、4,、6、8層邊框結尾處的border=0改為border=1,。

到這里,，新邊框就等于基本完成了，最后就是將框內的裝飾圖案貼進去,。

第六步：裝飾框內空間,。最后一步是要把裝飾圖案貼進框內，這一步可以直接將裝飾圖片的地址復制,，然后點擊圖片粘貼按鈕將圖片插進框內,。這樣我們就做好了一個漂亮的邊框了,。

您對這個新邊框還滿意嗎？您可以根據(jù)這些步驟“照貓畫虎”地練習,，熟練后就可以運用自如了,！

最后完成的邊框效果如下