喵喵應用文章框架教學彙整簡篇-4☞(4/26重編)

2010042314:46

 

 

 

 
 

*************(2010/04/26 重編)**********

喵喵應用文章框架教學彙整簡篇-4

喵喵發現很多人都還不會使用有內框的文章框架

要不就是很容易就弄亂掉~!!

現在喵說說自己的經驗跟小撇步

讓大家以後可以更容易使用文章框架

開心的編輯跟美化自己的文章。

當然每個人有自己的使用方法

有好的小撇步別忘了跟大家一起分享喲。

 

**請耐心看以下的操作程序**
就像我們剛開始在學習如何正確引用文章一樣 其實是很簡單滴


(一)先反白複製您想要使用的框架
開啟【發表文章】然後貼上

(二)*(請勿在框內直接貼圖以免爆框)
先在框架外的最下面編輯文章跟圖檔

(三)(準備一次貼到框架編輯內容區裡)
文章內容編輯好後 反白複製或剪下
(建議語法或文章文字內容先貼到記事本裡備用)

(四)要貼的文章內容複製好後
把游標移到文章框架的框內 用滑鼠左鍵快點兩下
使其週邊呈現白色虛框 始可開始編輯
然後再反白框內裡的文字(*僅僅反白文字就好*)
再貼上剛才複製或剪下的自己已經編輯好的文章

(五)最後是稍做整理再發表囉~以下是小撇步~

要進入【觀看HTML原始碼】編輯時 如果怕找不到要更改的位置

可以先在要編輯的文字或圖片前面 輸入隨意數字以做標記


範例如下:
(輸入隨意數字 333333333 做標記 長一點沒關係只要自己容易找到便可)

點 觀看HTML原始碼 在裡面找到隨意數字333333333標記 就方便更改囉。


如果要更改圖檔(或語法):
請先在要更改的圖片左邊輸入隨意數字記號(如 : 11111111111111 )
然後請勾點 觀看HTML原始碼
在裡面找到數字記號 11111111111111
然後就可以更改那一段的圖片網址跟呎吋還有漸層數值(如果有的話)
更改好後記得數字記號11111111111111要反白刪除喲

(六)如果您要輸入其它放置語法的小框框
您可以在想要貼置的位置輸入隨意數字記號(如: 33333333333 )
然後請勾點 觀看HTML原始碼
在裡面找到數字記號 33333333333
然後反白33333333333那一段語法
貼上事前先編輯好的小框語法
更改好後記得數字記號33333333333要反白刪除喲

包括輸入文字或文字特效都可以使用這方法(數字記號) 其它更改方式以此類推啦。

好用的自動捲軸表格小框:

<div style="border: 3px solid #000000; padding: 5px; overflow: auto;
width: 250px; height: 100px; ">

/*註解*/
<div style="border: 邊線寬度px solid #邊線色碼; padding: 內邊距px; overflow: 自動(跟版型一樣的)捲軸;
width: 寬度px; height: 高度px; ">

複製紅色的語法-開啟 可視化編輯器  按下面的 HTML  貼上複製的表格語法
再按下面的 Design 觀看顯示樣式 上面還有各式功能列。
邊線寬度、邊線色碼、寬高都可以設定自己想要的色碼跟呎吋

 

**【叮嚀小語】**

運用文章框架編輯文章時
要更換 圖片網址、更換字體、
改變文字顏色、文字大小....
最好是進入【觀看HTML原始碼】裡面去更改。
*(切勿直接在框內貼圖 很容易爆框喲!)*

 

**【更改範例註解】**

<p align=center><font face=標楷體 color=#00407f size=5>文字內容</font></p>

url(http://framboise782.free.fr/Roses/rose044.jpg/*圖片網址*/

width=寬度 height=高度

font face=標楷體  /*改變字體*/

color=#000000  /*文字色碼(或圖片色碼-觀看前面的命令語而定)*/

size=4  /*文字大小*/

<p align=center>  /*center為物件置中*/

<p align=left>  /*left為物件置左*/

 

**【特效與註解-自行操作測試看看效果喲】
複製有網址的語法 貼到 觀看HTML原始碼 裡的空白處
再點 觀看HTML原始碼 回文章編輯內容區裡
在圖片上用滑鼠左鍵快點兩下 就可以預看呈現效果囉。


/*圖片+SWF圖檔語法範例-1*/

<div style="BACKGROUND: url(http://c-photo.i-part.com.tw/n1v1/3/7/0/7/1607073/photo/book155/124105256415t.jpeg); FILTER: Alpha(opacity=100,style=3); WIDTH: 434px; HEIGHT: 500px">
<div align=left><embed src=http://img3.imageshack.us/img3/6219/57295848.swf width=434 height=500 type=application/x-shockwave-flash wmode="transparent" allowscriptaccess="never"></embed></div></div></div>


/*註解-1*/

<div style="BACKGROUND: url(圖片網址); FILTER: Alpha(opacity=100,style=3); WIDTH: 434px; HEIGHT: 500px">
<div align=left><embed src=swf檔圖網址 width=434 height=500 type=application/x-shockwave-flash wmode="transparent" allowscriptaccess="never"></embed></div></div></div>

 

/*雙圖片+SWF圖檔語法範例-2*/

<div align=center>&nbsp;</div>
<div align=center>
<div style="WIDTH: 500px; BACKGROUND: url(http://c-photo.i-part.com.tw/n1v1/3/7/0/7/1607073/photo/book165/12411083223t.gif); HEIGHT: 200px">
<div style="FILTER: Alpha(opacity=100,style=3); WIDTH: 500px; BACKGROUND: url(http://c-photo.i-part.com.tw/n1v1/3/7/0/7/1607073/photo/book155/124105256415t.jpeg); HEIGHT: 200px">
<div align=left><embed height=200 type=application/x-shockwave-flash width=500 src=http://img3.imageshack.us/img3/6219/57295848.swf wmode="transparent" allowscriptaccess="never"></embed></div></div></div></div>
<div></div>


/*註解-2*/

<div align=center>&nbsp;</div>
<div align=center>
<div style="WIDTH: px; BACKGROUND: url(背景底圖或星動圖網址); HEIGHT: px">
<div style="FILTER: Alpha(opacity=100,style=3); WIDTH: px; BACKGROUND: url(主圖網址); HEIGHT: px">
<div align=left><embed height= type=application/x-shockwave-flash width= src=swf圖檔網址 wmode="transparent" allowscriptaccess="never"></embed></div></div></div></div>


**記得圖片寬高跟SWF圖檔的圖寬跟圖高度 建議設定一樣的呎吋。


**【一般漸層語法-數值1-3】**

style="FILTER: Alpha(opacity=100,style=3)"


/*一般漸層語法使用範例*/

<p align=center><img

style="FILTER: Alpha(opacity=100,style=3)" 

 
**【特效漸層語法-數值1-3】**

FILTER: Alpha(opacity=100,style=3);

/*特效漸層語法使用範例*/
<div align=center>
<div style="WIDTH: 500px; BACKGROUND: url(http://c-photo.i-part.com.tw/n1v1/3/7/0/7/1607073/photo/book165/12411083223t.gif); HEIGHT: 200px">
<div FILTER: Alpha(opacity=100,style=3); WIDTH: 500px; BACKGROUND: url(http://c-photo.i-part.com.tw/n1v1/3/7/0/7/1607073/photo/book155/124105256415t.jpeg); HEIGHT: 200px">
<div align=left><embed height=200 type=application/x-shockwave-flash width=500 src=http://img3.imageshack.us/img3/6219/57295848.swf allowscriptaccess="never" wmode="transparent"></embed></div></div></div></div>


【重新編輯】

重新編輯時不要忘了要把文章整篇先反白複製起來

再按【編輯】

直接勾選【觀看HTML原始碼】

再按滑鼠右鍵【全選】

再按鍵盤上的【Delete】鍵把舊的語法全部刪除。

再勾選【觀看HTML原始碼】回文章編輯內容區(記得用滑鼠左鍵點一下使呈現游標線條)

(按Enter一下=下移一格的意思)再重新貼上新複製好的內容(Ctrl+V)。

 

**【內框捲軸語法簡略範例】**

【捲軸高度是要文章內容高過 HEIGHT: 450px(高度可自行設定) 才會顯示捲軸滴喲 一般文章在300px就已經很夠用啦】

/*一般捲軸設定語法範例*/
<div style="SCROLLBAR-ARROW-COLOR: #FFFFFF; SCROLLBAR-FACE-COLOR: #000000; SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF; HEIGHT: 450px; SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF; SCROLLBAR-SHADOW-COLOR: #FFFFFF; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF"><font color=#e6e6e6 face=標楷體>

/*一般捲軸設定語法範例語法註解*/
<div style="SCROLLBAR-ARROW-COLOR: #上下三角箭頭; SCROLLBAR-FACE-COLOR: #上下拉動軸面; SCROLLBAR-DARKSHADOW-COLOR: #右方立體邊; HEIGHT: 450px; SCROLLBAR-HIGHLIGHT-COLOR: #軸面左內邊; SCROLLBAR-SHADOW-COLOR: #軸面右內邊; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #軸軌顏色; SCROLLBAR-3DLIGHT-COLOR: #左方立體邊"><font color=#e6e6e6 face=字體>


/*設定呎吋捲軸語法範例*/

<div align=left>
<div style="SCROLLBAR-ARROW-COLOR: #FFFFFF; SCROLLBAR-FACE-COLOR: #000000; MARGIN-TOP: 0px; WIDTH: 288px; SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF; HEIGHT: 270px; SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF; MARGIN-LEFT: 240px; SCROLLBAR-SHADOW-COLOR: #FFFFFF; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF">


/*設定呎吋捲軸-範例語法註解*/

<div align=left>
<div style="SCROLLBAR-ARROW-COLOR: #上下三角箭頭; SCROLLBAR-FACE-COLOR: #上下拉動軸面; MARGIN-TOP: 調整文字內容靠上端的位置px; WIDTH: 整體文字內容的顯示寬度px; SCROLLBAR-DARKSHADOW-COLOR: #右方立體邊; HEIGHT: 整文字內容的顯示高度px; SCROLLBAR-HIGHLIGHT-COLOR: #軸面左內邊; MARGIN-LEFT: 調整文字內容靠左側的位置px; SCROLLBAR-SHADOW-COLOR: #軸面右內邊; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #軸軌顏色; SCROLLBAR-3DLIGHT-COLOR: #左方立體邊">


*附註: MARGIN-TOP: 10px + HEIGHT: 90px=100
*附註: MARGIN-LEFT: 5px + WIDTH: 95px =100

*數字可以自行調整,可以減少不等值 但不要超出總數。

 

**另詳細資料 請參考 : 淺談-CSS捲軸 


** CSS 版型底圖應用:

小螢幕的朋友常會說文框都被遮掉一點,一般版型我們只要刪除
/*二欄板型寬度設定*/  或 /*三欄板型寬度設定*/
寬度設定 中間的文章欄就會自動變大啦。

/*範例參考三欄板型寬度設定刪除紅色部分*/
.thrcol #yhtw_mastfoot {width:970px;margin:0 auto;}
.thrcol[class]{min-width:970px;}
.thrcol .ycnt3col {zoom:1;width:970px;text-align:left;margin:0 auto;}

.thrcol .yc3main {width:100%;float:left;}
.thrcol .yc3mainbd {margin-left:180px;}
.thrcol .yc3pri {width:100%;float:right;}
.thrcol .yc3pribd {margin-right:180px;}
.thrcol .yc3subbd {width:180px;float:left;position:absolute;right:0px;}
.thrcol .yc3sec {width:180px;float:right;position:absolute;left:0px;}

或是更改版型底圖,喵使用芯誼 版型18 作範例,希望大家看了就會明白如何應用囉。如下範例:


/*大標題圖背景+背景圖*/
body{background:url(http://img403.imageshack.us/img403/1545/10211.png) transparent no-repeat;background-position:50% 0;}
html{background:url(http://img391.imageshack.us/img391/2824/10212.png) repeat-y;background-position:50% 0;}


↓改成如下語法↓↓↓


/*大標題圖背景+背景圖(改成相容色系色碼或搭配相容圖片網址)*/
body{background:url(http://img403.imageshack.us/img403/1545/10211.png) transparent no-repeat;background-position:50% 0;}
html{background:url(http:// ) center top #000000 repeat-y;background-position:50% 0;}

*********************************

 
 
*如上之單框語法分享-黑底*

/*單框語法*/

<div align=center>
<div class=msgcontent align=center></div><span>
<center class=btntrackback>
<table style="BORDER-BOTTOM: #6b160b 3px dashed; BORDER-LEFT: #6b160b 3px dashed; BORDER-TOP: #6b160b 3px dashed; BORDER-RIGHT: #6b160b 3px dashed" id=table6 cellSpacing=5 cellPadding=3 width=500 bgColor=black>
<tbody>
<tr>
<td style="BORDER-BOTTOM: #6b160b 2px dashed; BORDER-LEFT: #6b160b 2px dashed; BORDER-TOP: #6b160b 2px dashed; BORDER-RIGHT: #6b160b 2px dashed" bgColor=#000000>
<table id=table7>
<tbody>
<tr>
<td style="PADDING-BOTTOM: 6px; PADDING-LEFT: 6px; PADDING-RIGHT: 6px; PADDING-TOP: 6px" bgColor=black><font color=#ffffff size=5>
<div style="SCROLLBAR-ARROW-COLOR: #941100; SCROLLBAR-FACE-COLOR: #000000; SCROLLBAR-DARKSHADOW-COLOR: #941100; HEIGHT: 350px; SCROLLBAR-HIGHLIGHT-COLOR: #000000; SCROLLBAR-SHADOW-COLOR: #941100; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #941100">
<p align=center>輸入文字<br>&nbsp;<br></p>
<p align=center>&nbsp;</p>
</div></font></td></tr></tbody></tr></tbody></table></td></tr></tbody></table></center>
<center class=btntrackback></center>
<div class=msgcontent align=center></span></div></div></div>

 
 

有問題歡迎大家一起來更正跟研討喔
喵更希望大家有一天都可以
自己親手製做自己喜歡的文章框架
那種感覺不但令人雀躍
裡面還有自己喜歡的元素跟風格
是不是很棒呀,大家加油喲!

ღ引用請整篇引用ღ
ღ也請帶走LOGOღ
ღ喵喵感謝您ღ

 
 

碰到雅虎的888時,或無法引用文章的時候,
把內文先複製剪下,
並在內文隨便打上任意數字123,
再按 立即發表。
發表完成後,再點選 編輯,
把內文貼上,
按 立即發表 就ok囉。