喵喵文框運用教學-4 ~980903~－bambooyeh的部落格

圖圖框框

【文框運用教學-4】

【文框運用教學:】

在文章編輯區裡面用滑鼠左鍵快點兩下

使其周邊呈現白色虛框始可編輯或貼圖。

若要更改文字大小請進入【觀看HTML原始碼】裡

更改(您要更改的)文字前面的<size=數值1~7>

範例 : <size=4>

更改文字顏色<color=#色碼>

範例 : <color=#000000>

更改字型<face=字體>

範例 : <face=標楷體>

完整範例 : <font color=#e6e6e6 size=4 face=標楷體>

【特效範例教學:】

/*圖檔加SWF特效語法範例*/
<div align=center>
<div style="FILTER: Alpha(opacity=100,style=4); BACKGROUND: url(http://c-photo.i-part.com.tw/n1v1/3/7/0/7/1607073/photo/book221/12514742439354t.jpg); HEIGHT: 323px">
<div align=left><embed height=323 type=application/x-shockwave-flash width=500 src=http://img22.imageshack.us/img22/9717/48347417.swf allowscriptaccess="never" wmode="transparent"></embed></div></div></div>

/*雙圖重疊語法範例*/
<div align=center>
<div style="FILTER: Alpha(opacity=100,style=4); WIDTH: 450px; BACKGROUND: url(http://img194.imageshack.us/img194/592/64087928.jpg); HEIGHT: 330px">
<div style="FILTER: Alpha(opacity=100,style=4); WIDTH: 207px; BACKGROUND: url(http://farm1.i-part.com.tw/n1v1/3/7/0/7/1607073/photo/book230/12510164699114.gif); HEIGHT: 170px"></div></div></div>

漸層語法 : (數值 1~3 )

1 為左明右漸層

2 為圓形漸層

3 為方型漸層

4 為沒有漸層效果的漸層數字

/*一般漸層語法*/
style="FILTER: Alpha(opacity=100,style=3)"

/*特效大圖漸層語法*/
FILTER: Alpha(opacity=100,style=3);

/*常用內框捲軸語法範例*/
/*(主軸區#000000 2、4、6/邊線區#941100 1、3、5、7)*/

<div style="SCROLLBAR-ARROW-COLOR: #941100; SCROLLBAR-FACE-COLOR: #000000; SCROLLBAR-DARKSHADOW-COLOR: #941100; HEIGHT: 500px; SCROLLBAR-HIGHLIGHT-COLOR: #000000; SCROLLBAR-SHADOW-COLOR: #941100; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #941100"><font color=#e6e6e6 face=標楷體>

/*小框語法範例註解*/
<div align=center>
<table border=0 cellSpacing=2 cellPadding=0 background=第一外框邊線圖片網址 bgColor=#4f3a00 align=center>
<tbody>
<tr>
<td>
<div align=center>
<table border=0 cellSpacing=5 cellPadding=0 background=中間寬邊圖片網址 bgColor=#4f3a00 align=center>
<tbody>
<tr>
<td>
<div align=center>
<table border=0 cellSpacing=2 cellPadding=0 background=內層邊線圖片網址 bgColor=#4f3a00 align=center>
<tbody>
<tr>
<td>
<div align=center>
<table border=0 cellSpacing=0 cellPadding=0 background=底圖網址 bgColor=#000000>
<tbody>
<tr>
<td width="100%">
<div style="FONT-FAMILY: 標楷體; LETTER-SPACING: 1px; OVERFLOW: auto" align=center>

==========================

文框語法範例 (圖片越大文框也依樣會被擠壓的越大所以慎選自己適宜的團片大小)

【文框語法】~給大家拿去自己測試或更改運用囉~

<p> </p>
<div align=center><img border=0 src="http://farm1.i-part.com.tw/n1v1/3/7/0/7/1607073/photo/book185/124966944220s.jpeg" /></div>
<div align=center>
<table border=0 cellSpacing=4 cellPadding=0 background=http://farm1.i-part.com.tw/n1v1/3/7/0/7/1607073/photo/book10/12478531601.jpeg align=center>
<tbody>
<tr>
<td>
<div align=center>
<table border=0 cellSpacing=25 width="100%" background=http://farm1.i-part.com.tw/n1v1/3/7/0/7/1607073/photo/book157/124687183278.jpeg>
<tbody>
<tr>
<td width="100%">
<div align=center>
<table border=0 cellSpacing=3 cellPadding=0 background=http://farm1.i-part.com.tw/n1v1/3/7/0/7/1607073/photo/book10/12478531601.jpeg align=center>
<tbody>
<tr>
<td>
<table border=0 cellPadding=0 background=http://c-photo.i-part.com.tw/n1v1/3/7/0/7/1607073/photo/book157/124687196799t.jpeg align=center>
<tbody>
<tr>
<td>
<p align=center><font color=#e0dcaa></font></p>
<div align=center>
<div style="FILTER: Alpha(opacity=100,style=4); WIDTH: 450px; BACKGROUND: url(http://c-photo.i-part.com.tw/n1v1/3/7/0/7/1607073/photo/book185/124966944220t.jpeg); HEIGHT: 375px">
<div align=left><embed height=375 type=application/x-shockwave-flash width=450 src=http://img3.imageshack.us/img3/6219/57295848.swf allowscriptaccess="never" wmode="transparent"></embed></div></div></div>
<div class=msgcontent align=center>
<div class=msgcontent align=center><font color=#e0dcaa size=3 face=標楷體></font></div>
<div class=msgcontent align=center><strong><font color=#e0dcaa size=3 face=標楷體></font></strong> </div>
<div class=msgcontent align=center><strong><font face=標楷體><font color=#e0dcaa size=5>文章標題</font></font></strong></div>
<div class=msgcontent align=center><strong><font color=#e0dcaa size=3 face=標楷體></font></strong> </div>
<div align=center>
<div style="SCROLLBAR-ARROW-COLOR: #8a7550; SCROLLBAR-FACE-COLOR: #0c3327; SCROLLBAR-DARKSHADOW-COLOR: #8a7550; HEIGHT: 450px; SCROLLBAR-HIGHLIGHT-COLOR: #0c3327; SCROLLBAR-SHADOW-COLOR: #8a7550; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #0c3327; SCROLLBAR-3DLIGHT-COLOR: #8a7550"><font color=#e0dcaa face=標楷體>
<div class=msgcontent align=center><img border=0 src="http://farm1.i-part.com.tw/n1v1/3/7/0/7/1607073/photo/book185/124966944220s.jpeg" /></div>
<div class=msgcontent align=center> </div>
<div class=msgcontent align=center><font color=#e0dcaa size=5>文章編輯區</font></div>
<div class=msgcontent align=center> </div>
<div align=center>
<table style="WIDTH: 300px; HEIGHT: 200px" border=0 cellSpacing=2 cellPadding=0 background=http://farm1.i-part.com.tw/n1v1/3/7/0/7/1607073/photo/book10/12478531601.jpeg bgColor=#4f3a00 align=center>
<tbody>
<tr>
<td>
<div align=center>
<table style="WIDTH: 300px; HEIGHT: 200px" border=0 cellSpacing=15 cellPadding=0 background=http://farm1.i-part.com.tw/n1v1/3/7/0/7/1607073/photo/book157/124687183278.jpeg bgColor=#4f3a00 align=center>
<tbody>
<tr>
<td>
<div align=center>
<table style="WIDTH: 300px; HEIGHT: 200px" border=0 cellSpacing=2 cellPadding=0 background=http://farm1.i-part.com.tw/n1v1/3/7/0/7/1607073/photo/book10/12478531601.jpeg bgColor=#4f3a00 align=center>
<tbody>
<tr>
<td>
<div align=center>
<table style="WIDTH: 300px; HEIGHT: 200px" border=0 cellSpacing=0 cellPadding=0 background=http://farm1.i-part.com.tw/n1v1/3/7/0/7/1607073/photo/book157/124687183278m.jpeg bgColor=#000000>
<tbody>
<tr>
<td width="100%">
<div style="FONT-FAMILY: 標楷體; LETTER-SPACING: 1px; HEIGHT: 180px; FONT-SIZE: 14px; OVERFLOW: auto" align=center>
<p align=center><font color=#e0dcaa></font> </p>
<div class=msgcontent align=center><font color=#e0dcaa size=4>小框架</font><font color=#e0dcaa size=4>適合放置公告文字、圖片或語法 </font><font color=#e0dcaa size=4>在框內快點兩下</font></div>
<div class=msgcontent align=center><font color=#e0dcaa size=4>反白文字 </font><font color=#e0dcaa size=4>貼上新編內容即可。</font></div>
<div class=msgcontent align=center><font color=#e0dcaa size=4></font> </div>
<div class=msgcontent align=center><font color=#e0dcaa size=4>如若不想使用</font></div>
<div class=msgcontent align=center><font color=#e0dcaa size=4>游標左鍵快點兩下</font></div>
<div class=msgcontent align=center><font color=#e0dcaa size=4>游標移到小框外側</font></div>
<div class=msgcontent align=center><font color=#e0dcaa size=4>按鍵盤上的Backspace鍵刪除即可。</font></div>
<div class=msgcontent align=center><font color=#e0dcaa size=4>小框可自行調整寬高。</font></div>
<div class=msgcontent align=center> </div></div>
<div></div>
<div></div></td></tr></tbody></tbody></table></div></td></tr></tbody></table></div></td></tr></tr></tbody></table></div></td></tr></tbody></table></div></font>
<div class=msgcontent align=center> </div>
<div class=msgcontent align=center><img border=0 src="http://farm1.i-part.com.tw/n1v1/3/7/0/7/1607073/photo/book185/124966944220m.jpeg" /></div></div></div>
<div></div>
<div></div>
<div> </div>
<div><img id=photo border=0 src="http://c-photo.i-part.com.tw/n1v1/3/7/0/7/1607073/photo/book186/1246478415131t.gif" /></div>
<div></div></div></td></tr></tbody></table></td></tr></tbody></tbody></table>
<div></div></div></td></tr></tbody></tr></tbody></tr></tbody></tr></tr></tr></tbody></table></div></td></tr></tbody></table></div>
<div></div>
<div align=center><img border=0 src="http://farm1.i-part.com.tw/n1v1/3/7/0/7/1607073/photo/book185/124966944220s.jpeg" /></div>
<div align=center> </div>