悠然寫意的空間: 喵喵應用文章框架教學彙整簡篇-4☞(4/26重編)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

複製紅色的語法-開啟可視化編輯器按下面的 HTML 貼上複製的表格語法
再按下面的 Design 觀看顯示樣式上面還有各式功能列。

邊線寬度、邊線色碼、寬高都可以設定自己想要的色碼跟呎吋

**【叮嚀小語】**

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

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

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*/

/*註解-1*/

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

/*註解-2*/

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

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

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

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

<p align=center><img

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 /></p>

**【特效漸層語法-數值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=字體>

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

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

*附註: 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;}

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

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

/*單框語法*/

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

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

碰到雅虎的888時，或無法引用文章的時候，

把內文先複製剪下，

並在內文隨便打上任意數字123，

再按立即發表。

發表完成後，再點選編輯，

把內文貼上，

按立即發表就ok囉。

悠然寫意的空間

2010年6月24日星期四

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

沒有留言:

張貼留言

2010年6月24日 星期四

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

沒有留言:

張貼留言

2010年6月24日星期四