【部落格素材教學法】喵喵應用文章框架教學彙整簡篇4＠☆★風吹向落葉。隨風飄落的楓葉。學習的園地-落葉之楓的新聞台★☆

2010-04-24 21:23:37 | 人氣20| 回應0 | 上一篇 | 下一篇

【部落格素材教學法】喵喵應用文章框架教學彙整簡篇4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

**【應用小撇步】**

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

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

文字內容

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

width=寬度 height=高度

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

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

size=4 /*文字大小*/

/*center為物件置中*/

/*left為物件置左*/

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

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

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">

/*註解-1*/

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

http://c-photo.i-part.com.tw/n1v1/3/7/0/7/1607073/photo/book165/12411083223t.gif); HEIGHT: 200px">

http://c-photo.i-part.com.tw/n1v1/3/7/0/7/1607073/photo/book155/124105256415t.jpeg); HEIGHT: 200px">

/*註解-2*/

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

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

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

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

style="FILTER: Alpha(opacity=100,style=3)" src="http://photo.i-part.com.tw/n1v1/3/7/0/7/1607073/photo/book83/12342389369s.gif" border=0 />

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

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

http://c-photo.i-part.com.tw/n1v1/3/7/0/7/1607073/photo/book165/12411083223t.gif); HEIGHT: 200px">

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">

【重新編輯】

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

再按【編輯】

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

再按滑鼠右鍵【全選】

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

再勾選【觀看HTML原始碼】回文章編輯內容區

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

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

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

/*一般捲軸設定語法範例*/

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">

/*一般捲軸設定語法範例語法註解*/

上下三角箭頭; SCROLLBAR-FACE-COLOR: #上下拉動軸面; SCROLLBAR-DARKSHADOW-COLOR: #右方立體邊; HEIGHT: 450px; SCROLLBAR-HIGHLIGHT-COLOR: #軸面左內邊; SCROLLBAR-SHADOW-COLOR: #軸面右內邊; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #軸軌顏色; SCROLLBAR-3DLIGHT-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">

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

上下三角箭頭; 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://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;}

↓改成如下語法↓↓↓

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