【喵喵文框運用教學-4】

2009082917:27

 

 
【文框運用教學-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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</div>
<div class=msgcontent align=center><font color=#e0dcaa size=5>文章編輯區</font></div>
<div class=msgcontent align=center>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</div>