編寫:隨緣
其實(shí),制作邊框是很簡(jiǎn)單的一件事。對(duì)初學(xué)者來(lái)說(shuō),由于還不熟悉HTML代碼,可以采用“照貓畫虎”的辦法進(jìn)行學(xué)習(xí)。如果您不想在HTML方面進(jìn)行深入的研究探討,而只是滿足自己編輯文章音畫的需要,這種方式已經(jīng)足夠您用的了。我們?cè)谶@里假定您會(huì)使用電腦的復(fù)制和粘貼功能。
第一步:選擇一套背景素材圖片備用。它是編制邊框的“材料”。背景素材一般是共享的。
(2)
邊框上方的裝飾圖片
邊框中間的裝飾圖片
動(dòng)態(tài)文字
(注意:在實(shí)際操作中不需要把這些圖片復(fù)制到編輯頁(yè)面,因?yàn)樵诰庉嬳?yè)面這些圖片是不能顯示圖片地址的。你在平時(shí)收集一些你喜歡的資料,并把這些資料上傳到你的空間作為備用。)
第二步:確定您要制作的邊框的層數(shù)。邊框可以根據(jù)需要可以是一層的(由于太單調(diào),一般不采用),也可以是多層的,層數(shù)越多,邊框結(jié)構(gòu)越復(fù)雜,也越美,當(dāng)然也不能沒(méi)有限度,層數(shù)太多反而會(huì)顯得零亂,以不超過(guò)13層為最佳。我們以9層為例進(jìn)行學(xué)習(xí)。
操作過(guò)程:
1、首先在網(wǎng)站登陸。打開(kāi)管理頁(yè)面后,鼠標(biāo)左鍵點(diǎn)擊左上角的“發(fā)布新文章”,進(jìn)入文章編輯頁(yè)面。
2、然后點(diǎn)擊編輯框右上角的“查看HTML源代碼”左邊的小框,顯示,您就可以開(kāi)始制作了。如果用的是“16789網(wǎng)站”則點(diǎn)擊左下角的“源代碼”按鈕進(jìn)入源代碼編輯狀態(tài)就可以
進(jìn)行粘貼代碼制作邊框了。
第三步:復(fù)制邊框代碼。復(fù)制邊框代碼一般有兩種途徑。一是現(xiàn)成的套裝代碼,一般在各網(wǎng)站的網(wǎng)頁(yè)資源欄目里都可以找到,可直接復(fù)制過(guò)來(lái)。另一種途徑是將任何一個(gè)現(xiàn)成套裝
復(fù)制到自己的編輯頁(yè)面,再點(diǎn)擊“查看HTML源代碼”左面的方框,就會(huì)顯示完整的代碼。
我們先復(fù)制一套現(xiàn)成的套裝代碼:
<TABLE style="LEFT: -120px; WIDTH: 1000px; POSITION: relative; TOP: 0px" cellSpacing=40 cellPadding=0 background=
第一層邊框圖片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=第二層邊框圖片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=第三層邊框圖片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=第四層邊框圖片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=第五層邊框圖片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=第六層邊框圖片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=第七層邊框圖片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=第八層邊框圖片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" background=第九層邊框圖片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<P align=center> </P>
<P></P></TABLE>
復(fù)制完成后,點(diǎn)擊“查看HTML源代碼”左面的方框,如果用的是“16789網(wǎng)站”則點(diǎn)擊左下角的“源代碼”按鈕進(jìn)入源代碼編輯狀態(tài)就可以進(jìn)行粘貼代碼就會(huì)顯示邊框。這套代碼,再點(diǎn)擊“查看HTML源代碼”左面的方框,去掉方框里的勾。
這套代碼的前3行就是第一層邊框的代碼。第一層代碼是最重要的,因?yàn)橐恍┗緟?shù)要在這里確定。
有幾個(gè)基本代碼和數(shù)據(jù)必須交代給大家。
1、WIDTH: 1000px 是邊框整體外延的寬度,1000像素是寬屏頁(yè)面的寬度。小于這個(gè)數(shù)邊框就會(huì)在頁(yè)面的兩邊留出空隙,大于這個(gè)數(shù)就會(huì)突破正常頁(yè)面,變成寬幅邊框。
2、TOP: 0px 是邊框上延與頁(yè)面頂部的距離,除非有特殊需要,一般取0,否則邊框頂部與頁(yè)面會(huì)出現(xiàn)空隙,不美觀。
3、cellPadding=0 是第一層邊框與第二層邊框的距離,數(shù)字越大,邊框最外層的寬度就越大,一般根據(jù)需要調(diào)整。 第一層圖片地址的代碼就是第一層邊框圖片的代碼。從第二層到第9層邊框的代碼是一樣的,只是圖片代碼不同而已。從<TBODY>到下一個(gè)<TBODY>之間就是一層邊框的代碼。
4、cellSpacing=45 的代碼,這是確定每一層邊框?qū)挾鹊拇a,等號(hào)后面的數(shù)字就是這一層邊框的寬度。可以根據(jù)需要隨意調(diào)整。
5、LEFT: 0px 是邊框與頁(yè)面邊界的距離,0即為與左邊界重合,取負(fù)數(shù)邊框就會(huì)突破頁(yè)面左邊界,取正數(shù)則邊框右邊就會(huì)突破頁(yè)面右邊界。
6、align=center 表示的是居中。
7、background=圖片地址 表示在此處插入圖片的絕對(duì)地址。
8、border=0 表示的是邊框的外裝飾效果。
下面我們著手對(duì)這個(gè)邊框進(jìn)行“改裝”
第四步:逐層替換邊框圖案。首先復(fù)制我們事先在另一頁(yè)面準(zhǔn)備好的上面那些邊框素材代碼。
方法是:
1、我們用教材里的(一號(hào))號(hào)圖片的絕對(duì)地址替換原邊框的第一層圖片地址的代碼。
2、用第(二)號(hào)圖片替換第二層、第4層、第6層和第八層的邊框。
3、用第(三)幅圖片替換原邊框的第3、第5、第7層和第九層邊框。
新邊框是做出來(lái)了,但仔細(xì)一瞧,這個(gè)新邊框仍然是不盡如人意。問(wèn)題在哪里呢?
第五步: "照貓畫虎”完了之后,我們要對(duì)這個(gè)新邊框進(jìn)行再一次的修飾。那就是:調(diào)整各層之間的距離。
朋友們仔細(xì)觀察可以在每一層邊框代碼中都有cellSpacing= 的代碼,這是確定每一層邊框?qū)挾鹊拇a,等號(hào)后面的數(shù)字就是這一層邊框的寬度??梢愿鶕?jù)需要隨意調(diào)整。
我們對(duì)各層邊框的寬度作如下調(diào)整:第一層調(diào)整為60,第2、4、6、8層調(diào)整為10,第3、5、7層調(diào)整為8,第8層調(diào)整為6。
第9層,也就是最里面我們用來(lái)貼文字和貼圖的部分,這個(gè)數(shù)字通常為零,可以根據(jù)文字和貼圖內(nèi)容的要求無(wú)限制拉長(zhǎng)。這個(gè)新邊框好看多了吧?但仍沒(méi)有結(jié)束。我們發(fā)現(xiàn)第8層和第9層邊框之間的過(guò)渡有些別扭,解決的辦法是:在每一層邊框代碼的結(jié)尾處有border=0 的代碼,把后面的0改為1,就會(huì)在兩層圖案間出現(xiàn)一個(gè)窄條,起到突出兩層邊框之間過(guò)渡鮮明的作用,我們把第2、4、6、8層邊框結(jié)尾處的border=0改為border=1。
到這里,新邊框就等于基本完成了,最后就是將框內(nèi)的裝飾圖案貼進(jìn)去。
第六步:裝飾框內(nèi)空間。最后一步是要把裝飾圖案貼進(jìn)框內(nèi),這一步可以直接將裝飾圖片的地址復(fù)制,然后點(diǎn)擊圖片粘貼按鈕將圖片插進(jìn)框內(nèi)。這樣我們就做好了一個(gè)漂亮的邊框了。
您對(duì)這個(gè)新邊框還滿意嗎?您可以根據(jù)這些步驟“照貓畫虎”地練習(xí),熟練后就可以運(yùn)用自如了!
注意事項(xiàng):
1、邊框素材選擇色彩要相近,(最好是同一色像的),反差太大反而不好看。但也不能
完全沒(méi)有色差,那樣會(huì)顯得單調(diào)呆板。
2、最里層的圖案最好使用單色或略有變化的圖案,因?yàn)檫@里要粘貼文字和圖片。
3、每一段代碼之間都留有一個(gè)字母的間隙,要留夠,否則這一層圖案就不顯示。
4、制作邊框用的圖片素材必須是jpg或gif格式,否則不能用(就是每個(gè)圖片地址代碼
的后綴)。
聯(lián)系客服