做邊框

06-02

做音畫或寫日誌怎樣添加製作邊框

製作邊框的第一步一、以下是一層邊框的代碼,將邊框代碼複製粘貼第一次，在圖片地址處粘貼圖片地址，將邊框的單元格距離設定為30（ cellSpacing=30 ）是邊框的外露部份,（說明:這單元格距離30部份,要加上第二層才能顯現出來）,邊框的寬度設定為750（width＝750），（說明:邊框的寬度能大能小,這裡是特意設定為750.但是在實際寫日誌時最大寬度可以設置為900.）詳見以下代碼實樣；<TABLE borderColor=#cccccc cellSpacing=30 cellPadding=0 width_=750 align=center bgColor=#ffffff background=在此添加第一層圖片地址 border=0><TBODY><TR><TD>純紅色圖片實樣

這張原圖片的寬100高為100純紅色圖片地址:http://image59.360doc.com/DownloadImg/2013/03/0717/30768471_2.jpg代入圖片後的代碼<TABLE borderColor=#cccccc cellSpacing=30 cellPadding=0 width_=750 align=center bgColor=#ffffff background=http://image59.360doc.com/DownloadImg/2013/03/0717/30768471_2.jpg border=0><TBODY><TR><TD>代入純紅色圖片後的效果如下代入純紅色圖片後的效果製作邊框的第二步二、在第一層純紅色圖片的基礎上,依然將開始那段邊框代碼複製粘貼第二次，第二次用純綠色圖片,地址處粘貼代碼中，將整個邊框的寬度（width_=）在第一層700的基礎上設為（），（注:邊框的寬度能大能小,除了第一層要用數值控制之外,從第二層開始,只要用百分比來控制,《》）並將第二層單元格距離cellSpacing的值設為10，插入的純綠色圖片實樣

這張原圖片的寬為60高為60純綠色圖片地http://image59.360doc.com/DownloadImg/2013/03/0717/30768471_3.jpg代入圖片地址後的代碼如下；<TABLE borderColor=#cccccc cellSpacing=30 cellPadding=0 width_=750 align=center bgColor=#ffffff background=http://image59.360doc.com/DownloadImg/2013/03/0717/30768471_2.jpg border=0><TBODY><TR><TD><TABLE borderColor=#cccccc cellSpacing=10 cellPadding=0 align=center bgColor=#ffffff background=http://image59.360doc.com/DownloadImg/2013/03/0717/30768471_3.jpgborder=0><TBODY><TR><TD>第二次看效果:加了第二層圖片後的效果製作邊框的第三步三、為了能讓朋友們充分理解,現在依然將第一層的代碼複製後,粘貼到第二層的下邊作為第三層處理,將整個邊框的寬度（width）在第一層700的基礎上,第三層的寬度也要設定為，將cellSpacing的值設為10，修改後新組成的代碼如下；<TABLE borderColor=#cccccc cellSpacing=30 cellPadding=0 width_=750 align=center bgColor=#ffffff background=http://image59.360doc.com/DownloadImg/2013/03/0717/30768471_2.jpg border=0><TBODY><TR><TD><TABLE borderColor=#cccccc cellSpacing=10 cellPadding=0 align=center bgColor=#ffffff background=http://image59.360doc.com/DownloadImg/2013/03/0717/30768471_3.jpg border=0><TBODY><TR><TD><TABLE borderColor=#cccccc cellSpacing=10 cellPadding=0 align=center bgColor=#ffffff background=http://image59.360doc.com/DownloadImg/2013/03/0717/30768471_2.jpg border=0><TBODY><TR><TD>第三次看看效果:加了第三層圖片後的效果製作邊框的第四步四、依然將開始那段邊框代碼複製粘貼第四次，在圖片地址處粘貼純色圖片地址，將整個邊框的寬度（width）設為640，將cellSpacing的值設為10，看看效果怎樣；第四張圖片作為寫日誌用的背景底版面圖片,故而就用淡色的

此圖片的寬為60高為26.圖片地址 http://image59.360doc.com/DownloadImg/2013/03/0717/30768471_4.jpg第四次代碼<TABLE borderColor=#cccccc cellSpacing=30 cellPadding=0 width_=750 align=center bgColor=#ffffff background=http://image59.360doc.com/DownloadImg/2013/03/0717/30768471_2.jpg border=0><TBODY><TR><TD><TABLE borderColor=#cccccc cellSpacing=10 cellPadding=0 align=center bgColor=#ffffff background=http://image59.360doc.com/DownloadImg/2013/03/0717/30768471_3.jpg border=0><TBODY><TR><TD><TABLE borderColor=#cccccc cellSpacing=10 cellPadding=0 align=center bgColor=#ffffff background=http://image59.360doc.com/DownloadImg/2013/03/0717/30768471_2.jpg border=0><TBODY><TR><TD><TABLE borderColor=#cccccc cellSpacing=10 cellPadding=0 align=center bgColor=#ffffff background=http://image59.360doc.com/DownloadImg/2013/03/0717/30768471_4.jpg border=0><TBODY><TR><TD>第四次效果加了第四層背景圖片後的效果小結1、從以上實驗來看,寫日誌採用做任何邊框,實際上就是做表格框的代碼.由不同顏色的表格框架,分層次疊加而成,四周沒有被遮蓋的部分就形成了邊界；2、做幾層邊框你就把同一個邊框代碼複製粘貼幾次，然每個層次只要修改一下單元格 cellSpacing=? 外露部份寬度、變換一下不同顏色或不同花色的背景圖片地址background=?,邊框無論加多少層次,從第二層開的寬度只要用百分比控制就行了；3、從以上可見,邊框只限寬度,高度沒有特別的控制,這原因是只要你把日誌內容寫進去,高度就會無限的增長,是看來這個四層的邊框很小，但只要一把內容放進去，它就會擴大了。內容放得越多，邊框就會自動撐得越大。總結以上資料解析現在用一組由六個層面的實用代碼製作完整的框架實樣如下由六個層面組建的實樣以上由六個層面組建的模型代碼如下<P align=center><TABLE borderColor=#cccccc cellSpacing=5 cellPadding=0 width_=750 align=center bgColor=#ffffff background=http://image59.360doc.com/DownloadImg/2013/03/0717/30768471_13.gif border=0><TBODY><TR><TD><TABLE borderColor=#cccccc cellSpacing=26 cellPadding=0 align=center bgColor=#ffffff background=http://image59.360doc.com/DownloadImg/2013/03/0717/30768471_16.gif border=0><TBODY><TR><TD><TABLE borderColor=#cccccc cellSpacing=5 cellPadding=0 align=center bgColor=#ffffff background=http://image59.360doc.com/DownloadImg/2013/03/0717/30768471_13.gif border=0><TBODY><TR><TD><TABLE borderColor=#cccccc cellSpacing=20 cellPadding=0 align=center bgColor=#ffffff background=http://image59.360doc.com/DownloadImg/2013/03/0717/30768471_17.gif border=0><TBODY><TR><TD><TABLE borderColor=#cccccc cellSpacing=10 cellPadding=0 align=center bgColor=#ffffff background=http://image59.360doc.com/DownloadImg/2013/03/0717/30768471_14.gif border=0><TBODY><TR><TD><TABLE borderColor=#cccccc cellSpacing=25 cellPadding=0 align=center bgColor=#ffffff background=http://image59.360doc.com/DownloadImg/2013/03/0717/30768471_18.jpg border=0><TBODY><TR><TD><P align=center></P><DIV style="FONT-SIZE: 30pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 40%; FONT-FAMILY: 華文彩雲" FONT scrollAmount="8"><P align=center><FONT face=黑體><B>由六個層面組建的實樣</B></FONT></P></DIV><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR><P></P><BR></TBODY></TABLE></P>簡要說明單從這組代碼看,第一層的寬度width_=750這是最外層的邊緣寬度,（符加說明:一般實用時,最外層的寬度可以設定為880或890,這裡設定的750是為寫此博,能讓朋友們容易理解而特意縮小的）然而這個單元格距離cellSpacing=5 是指第一層面最外邊所顯現的一條框架裝飾部份為5,是很細的外邊。然後第二層的cellSpacing=26這是一個能轉動的動態軸圖片,這圖片自身的寬度為26,為了能讓這個動態圖片充分發揮作用所以設定為26,第三層是同第一層同樣的圖片,也設定為cellSpacing=5 第四層是一張閃光圖,這張圖片是楊東小園自製的,原圖寬34,沒有全部利用,,第五層是一根動態直條,第六層是寫博的底版層面.cellSpacing=20這是為了在寫入日誌文字時,促使所寫入的文字左右二邊不頂足邊緣所設定的空隙距離.可見以上這六個層面中每個層面都是用的同一個框圖代碼,但是不同之處是每個層面用的圖片有所不同也有相同的,層次的距離數值有所不同也有相同的,另外相同之處是除了第一層面的寬長限止為750以外,其他的五個層面都用"100%" 來規範,這是因為從第二層到第六層,是在第一層面的基礎上確定的,不需要求再用量化來處理的結果.編後申明本作品製作雖拙劣粗糙,但從構思創意、精心編著都純屬原創.目的是為了與愛好博客寫作的朋友們學習探索,如若此作品,有錯誤之處,懇請朋友們在以下評論欄中提出賜教指正意見,或良好的改進建議.楊東為此不勝銘感,特此申明,深表謝意.相關鏈接

如何取得《圖片或相片》的地址相關鏈接

如何設置改善擴展日誌頁面的方法