悠然寫意的空間: 如何操作編輯文章框架或圖文編輯框架

**********(喵喵於 2010/05/24 編輯)**********

如何操作編輯文章框架或圖文編輯框架

延續喵喵加工編輯框+教學與註解分享教學

因為有格友詢問編輯文章框架的問題，喵也相信還是有很多新手不知道該如何下手，所以喵把程序一一寫下。

看似繁雜，但當您已經懂得如何使用時，它將是很簡單滴，希望新手要有耐心，照著程序一一的去操作演練，別想得太複雜，相信很快就可以駕輕就熟滴。

如在操作上碰到問題或疑惑，可以留言給喵喵，喵才可以針對您的疑惑解決問題囉。

或許問題只是一個很小的螺絲釘，只是自己還不熟悉整體運作，也沒有關係，留言給喵喵，讓喵可以把大家的問題跟盲點觀察出來，醬子對我自己跟對大家都是一種很好的學習經驗囉。

1.
首先先複製紅色☞(紅色☞ 的地方(background=

bgColor=#000000 ) 下面的語法 (在內文起始處按住滑鼠左鍵不放然後下拉一直到語法結尾處才放開滑鼠左鍵。此時內文均已返白然後按鍵盤上的 Ctrl+C 即是複製起來的動作)

2.
然後開啟自己的網頁(發表文章)，在空白處按鍵盤上的 Enter 一下(下移一格的意思)
再按鍵盤上的 Ctrl+V (即"貼上"的動作)或按滑鼠右鍵點選"貼上"，此時語法已經完整貼在內文裡了。

3.
然後您可以點選"點小圖看大圖"裡的圖檔，任選一樣自己喜歡或備用的框圖。點小圖後會另開網頁顯示大圖，您對著圖檔按滑鼠右鍵，點內容，裡面有"網址"後面即是圖片網址(http://.....png) 還有圖片的尺寸(寬x高)像素。

4.
複製網址，記住尺寸，套用在語法裡。(套用位置即是我有PO紅色框圖的地方。把游標移到語法有紅色框圖的右側，按鍵盤上的 Backspace 一下，即可刪除圖檔，然後貼上剛才您複製選用的圖框網址。*記得要與後面的 bgColor=#302006空一格喲! bgColor=#302006是【bgColor=#當圖檔失連時呈現的底色】)

5.
還有更改框圖的尺寸，在所有 style="WIDTH: 513px; HEIGHT: 701px" 處更改圖檔的尺寸。

6.
還有在捲軸語法裡更改呎吋 : (請參考語法裡面的範例)

WIDTH: 513px; 寬度

寬度因為 MARGIN-LEFT: 0px; /*左邊距離*/ 我設定為0，所以尺寸跟圖檔一樣即可。

HEIGHT: 670px; 高度

高度不可超出原高度尺寸，只可縮小尺寸至適當可以呈現的尺寸。如要搭配 MARGIN-TOP: 上面距離的尺寸px; ，可依呈現效果自行修改高度尺寸跟上面距離的尺寸。

7.
其它圖檔依樣複製您要使用的圖檔網址(參考第4.項動作)，把游標移到語法有圖檔的右側，按鍵盤上的 Backspace 一下，即可刪除圖檔，然後貼上您複製選用的圖框網址。)

8.待都編輯修改完成後，複製完整語法，貼到"記事本"裡備用。或是直接複製完整語法，點編輯文章內容左下側的觀看HTML原始碼，然後在空白處按鍵盤上的 Ctrl+V (貼上)，或按滑鼠右鍵點選貼上。

9.再按觀看HTML原始碼回文章編輯區裡觀看呈現結果。

10.編輯框的語法都已經完成後，再來就是貼上自己已經編輯好的文章內容囉!
複製自己已經編輯完成的文章內容(文章跟圖檔)，然後在框架裡面快點兩下滑鼠左鍵，使其週邊呈現白色虛框，先反白裡面的文字，在您要放置文章的位置貼上您的文章內容。

11.
完成後再輸入文章標題跟點選您自己設定好的文章分類，記得最好再點觀看HTML原始碼，複製裡面的語法(貼到記事本裡備用)，再點下面的隱藏文章，立即發表。

12.
後觀看呈現結果是否OK或還需要再修改，記得重新編輯時，語法要重貼(1.複製記事本裡的語法 2.點觀看HTML原始碼 3.全選刪除 4.貼上語法 5.點觀看HTML原始碼回文章內容編輯區觀看呈現結果 6.公開文章立即發表)

其它相關教學請看

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

好用的自動捲軸表格小框

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

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

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

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

**【叮嚀小語】**

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

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

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

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

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

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

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

/*單框語法*/

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

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

Tears

悠然寫意的空間

2010年6月24日星期四

如何操作編輯文章框架或圖文編輯框架

沒有留言:

張貼留言

2010年6月24日 星期四

如何操作編輯文章框架或圖文編輯框架

沒有留言:

張貼留言

2010年6月24日星期四