喵喵運用文章框架教學整理篇-3 (重編)

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

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

現在喵說說自己的小撇步

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

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

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

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

******空一格******

運用文章框架編輯文章時

要更換圖片網址、更換字體、改變文字顏色、文字大小

最好是進入【觀看HTML原始碼】裡面去更改。

url(圖片網址)

font face=標楷體 =字體

color=#c49b71 為文字顏色

size=6 為文字大小

<div align=center> 為圖片置中

【重新編輯】:

不要忘了整篇先反白複製起來

再按【編輯】，

再文章內容裡用滑鼠右鍵點一下，點【全選】，

待全部返白或反黑時，

再按鍵盤上的【Delete】刪除健全部刪除掉，

再重新貼上新複製好的內容。(Ctrl+V)

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

再按滑鼠右鍵【全選】

在按鍵盤上的【Delete】刪除。

再重新貼上新複製好的內容。

上下的大圖跟內框裡面上下的小圖，

最好不要去移動，

否則很容易錯亂，

如果自己不懂得如何去更正，

那就毀啦。

記得內框文章內容裡上下最好是要空一格

(即上圖下面空一格 跟下圖上面空一格)

如果一定要更換圖片

就請進入【觀看HTML原始碼】裡

去更換 url(圖片網址)

跟更改圖片寬跟高 width=434 height=500 喲。

【上下大圖語法範例註解如下】:

註明顏色的都是可以更改的地方，

但是切記後面有空一格的部分不可遺漏喲。

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

(WIDTH: 434px; HEIGHT: 500px

width=434 height=500

記得圖片網址跟SWF圖檔的圖寬跟高度要一樣喲。

如果不想加上SWF檔圖片下面這一段語法可以刪除掉(範例:)

/*漸層語法(不用的話刪除即可)*/

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

/*大圖漸層語法刪除這一段即可*/

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

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

文章內容最好事先編輯好

再貼到記事本裡

然後再剪下貼到文章框架的外面的最下面

待全部編輯好再一次剪下

貼進內框文章內容編輯區裡

【內框文章內容編輯方法】:

在內框裡面用滑鼠左鍵快點兩下，

使其周邊呈現白框，

先把其它不用的內框文字反白刪除，

再反白您要的文字大小

直接貼上新的文章內容即可。

記得內框文章內容上下最好是要空一格喲!

【更改您要的字體、色碼跟文字大小或更改圖片網址】:

輸入隨意數字做記號如: 123123

再進入【觀看HTML原始碼】裡

去更改您要的字體、色碼跟文字大小

或更改圖片網址 url(圖片網址)

即複製新的圖片網址

貼在 url(圖片網址這裡)(按鍵盤上的Ctrl+V)

記得每次編輯內框時都要用滑鼠快點兩下

使其周邊呈現白框時才能繼續編輯喲!

【小撇步】:

要進入【觀看HTML原始碼】編輯時

如果怕找不到要更改的位置

可以先在要編輯的文字或圖片前面

輸入隨意數字以做標記

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

333333333

【進入【觀看HTML原始碼】裡面更改之相關重點】:

【標題文字】

【內框文章內容編輯區~size=5】

<p align=center><font face=標楷體 color=#00407f size=5>內框文章內容編輯區~size=5</font></p>

【內框文章內容編輯區~size=4】

<p align=center><font face=標楷體 color=#00407f size=4>內框文章內容編輯區~size=4</font></p>

【內框文章內容編輯區~size=3】

<p align=center><font face=標楷體 color=#00407f size=3>內框文章內容編輯區~size=3</font></p>

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

【內框捲軸是要內框文章內容高過 HEIGHT: 450px(自行設定) 才會顯示捲軸滴喲】

#e6e6e6 為主捲軸色碼

#000000 為邊線捲軸色碼

*==================* 彙整篇 *================*

編輯文章框架有很多方法
每個人習慣方式均不盡相同
只要是OK的都行囉

【編輯文章框架內框一般重要步驟如下】:

先複製您要使用的文章框架再點【發表文章】

在文章內容裡先用滑鼠點一下

再按Enter下移一格

再貼上框架

記得要再按Enter一下

讓底文再下移一格喔。

請先把想要放在內框的文章內容先貼在【記事本】裡

再反白記事本裡的內容

【剪下】貼在文章框架外(最底下)備用

再稍做編輯

因為有的還要另外貼語法如音樂盒

記得這個步驟很重要喔。

再來反白刪除內框裡不要用的文字

再輸入隨便數字如33333333

再反白數字333..

再上色套上自己想要的文字顏色。

如果想要更改文字大小請先勾選【觀看HTML原始碼】

先找到自己輸入的數字記號如33333的前面

去更改 size=? 後面的數字數越大字體也越大

再勾選【觀看HTML原始碼】回到文章編輯內容頁面。

再把框外備用的文章內容反白【剪下】

再反白已經上色的數字符號333..

直接貼上剛剛複製或剪下的文章內容。

【記得發表文章前最後一定要做一次檢視】OK後立即發表。

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

【發表文章前一定要做最後一次檢視】OK後立即發表。

除了參考如上教學裡的步驟去做之外，

當您全部編輯完成即將發表之時，

請再進入【觀看HTML原始碼】裡去做最後的檢視，

語法裡如還有如下喵標識紅色的部分，

請把註明紅色的部分刪除掉。

( 請找到下面兩段語法，把註明紅色的部分刪除掉再按預覽或發表。)

========/*範例1*/============

<p align=center><font face=標楷體 color=#ffffff size=5><strong>內框編輯區-size=5</strong></font></p>
<p align=center><font face=標楷體 color=#ffffff size=4><strong>內框編輯區-size=4</strong></font></p>
<p align=center><font face=標楷體 color=#ffffff size=3><strong>內框編輯區-size=3</strong></font></p>
<p align=center><strong><font color=#ffffff></font></strong> </p>
<p align=center><font color=#ffffff></font></p>
<p align=center><img src="http://photo.i-part.com.tw/n1v1/3/7/0/7/1607073/photo/book4/12411059308m.jpeg" border=0 /></p>
<p></p>
</font></div></td></tr></tr></tr></tbody></table></div><strong><font face=Arial size=2></font></strong></td></tr></tbody></table></div></td></tr></tbody></tr></tbody></tr></tbody></tr></tr></tr></tbody></table></div>
<div></div></td></tr></tbody></tbody>
<p></p>
<p align=center>
<p></p>
<p></p>

==========/*範例2*/============

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

記得在這個區塊裡不要有這些紅色的字出現

尤其是</font>.....

</font></div></td></tr></tr></tr></tbody></table></div><strong><font face=Arial size=2></font></strong></td></tr></tbody></table></div></td></tr></tbody></tr></tbody></tr></tbody></tr></tr></tr></tbody></table></div>
<div></div></td></tr></tbody></tbody>
<p></p>
<p align=center>
<p></p>
<p></p>

</div></div></td></tr></tbody></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>
<div><font color=#fcddb5></font></div></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>
<div></div></td></tr></tbody></table>
<div></div></td></tr></tbody></table></div>

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

記得每次要編輯內框內容時都要先在內框區用滑鼠左鍵快點兩下

使其周邊呈現白框時始可編輯
。
重編也記得要先複製再重貼，否則語法會亂掉喲
。

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

喵的版型通常都做得比較大些，

小螢幕的朋友常會說文框都被遮掉一點，

一般版型我們只要刪除下面兩段語法

/*二欄板型寬度設定*/ 跟 /*三欄板型寬度設定*/就可以了。

但是現在很多使用的版型是已經把欄位跟文章欄位設限在圖片裡了!

所以即使您刪掉/*二、三欄寬度設定*/的語法，也是不會很好看滴!

所以喵喵建議使用沒有設限欄寬的版型圖片，

屆時只要刪除下面兩段語法，

中間的文章欄就會自動變成大的版型啦。

/*二欄板型寬度設定*/
.twocolga .yc3main {width:100%;float:left;}
.twocolga .yc3mainbd {margin-right:30px;}
.twocolga .yc3pri {width:100%;}
.twocolga .yc3subbd {width:180px;position:absolute;right:0px;}
.twocolga .yc3sec {display:none;}
.twocolga #yhtw_mastfoot, .twocoldr #yhtw_mastfoot {width:970px;margin:0 auto;}
.twocolga[class], .twocoldr[class]{min-width:970px;}
.twocolga .ycnt3col, .twocoldr .ycnt3col {zoom:1;width:970px;text-align:left;margin:0 auto;}

/*三欄板型寬度設定*/
.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://wabis.biz/up0015/200906170728282853472238.png) transparent no-repeat;background-position:50% 0;}
html{background:url(http://wabis.biz/up0015/200906170728477969664437.png) repeat-y;background-position:50% 0;}

↓改成如下語法↓↓↓

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

/*三欄式版面寬度設定*/
.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:203px;}
.thrcol .yc3pri {width:100%;float:right;}
.thrcol .yc3pribd {margin-right:205px;}
.thrcol .yc3subbd {width:200px;float:left;position:absolute;right:-15px;}
.thrcol .yc3sec {width:200px;float:right;position:absolute;left:-15px;}

↓改成如下語法↓↓↓

/*三欄加寬*/
.thrcol .yc3main {width:100%;float:left;}
.thrcol .yc3mainbd {margin-left:203px;}
.thrcol .yc3pri {width:100%;float:right;}
.thrcol .yc3pribd {margin-right:205px;}
.thrcol .yc3subbd {width:200px;float:left;position:absolute;right:15px;}
.thrcol .yc3sec {width:200px;float:right;position:absolute;left:15px;}

******空一格******

最後再次叮嚀一次

把文章先貼到記事本後，

再剪下，

切記

一定還要再貼到發表文章內容裡的框架外面的下面，

待完全編輯好後或直接再剪下，

才能再貼到內框內容編輯區裡面喲，

醬子裡面的語法跟格式才不會花掉嘿。

還有~~

貼到內框文章內容編輯區裡的文章

記得上下最好要空一格

醬子下面的圖片才不會偏左甚或又亂掉囉。

皓媽咪

*｡◕‿◕｡*♡★☆皓皓寶貝&皓媽咪的快樂園地☆★♡*｡◕‿◕｡*

皓媽咪發表在痞客邦留言(0) 人氣( 0 )

個人分類：達人教學

▲top

請先登入以發表留言。

｡◕‿◕｡♡★☆皓皓寶貝&皓媽咪的快樂園地☆★♡｡◕‿◕｡

歡迎光臨皓皓寶貝&皓媽咪在痞客邦的快樂園地（●ᴥ●）