*************(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> </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> </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;}
*********************************
