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

2010052411:53

 

 
 

**********(喵喵於 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.公開文章 立即發表)
 
 
其它相關教學請看
 
 
好用的自動捲軸表格小框
好用的自動捲軸表格小框:

<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原始碼】裡面去更改。
*(切勿直接在框內貼圖 很容易爆框喲!)*


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

<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

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

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

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

/*單框語法*/

<div align=center>
<div class=msgcontent align=center></div><span>
<center class=btntrackback>
<table style="BORDER-BOTTOM: #6b160b 3px dashed; BORDER-LEFT: #6b160b 3px dashed; BORDER-TOP: #6b160b 3px dashed; BORDER-RIGHT: #6b160b 3px dashed" id=table6 cellSpacing=5 cellPadding=3 width=500 bgColor=black>
<tbody>
<tr>
<td style="BORDER-BOTTOM: #6b160b 2px dashed; BORDER-LEFT: #6b160b 2px dashed; BORDER-TOP: #6b160b 2px dashed; BORDER-RIGHT: #6b160b 2px dashed" bgColor=#000000>
<table id=table7>
<tbody>
<tr>
<td style="PADDING-BOTTOM: 6px; PADDING-LEFT: 6px; PADDING-RIGHT: 6px; PADDING-TOP: 6px" bgColor=black><font color=#ffffff size=5>
<div style="SCROLLBAR-ARROW-COLOR: #941100; SCROLLBAR-FACE-COLOR: #000000; SCROLLBAR-DARKSHADOW-COLOR: #941100; HEIGHT: 350px; SCROLLBAR-HIGHLIGHT-COLOR: #000000; SCROLLBAR-SHADOW-COLOR: #941100; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #941100">
<p align=center>輸入文字<br>&nbsp;<br></p>
<p align=center>&nbsp;</p>
</div></font></td></tr></tbody></tr></tbody></table></td></tr></tbody></table></center>
<center class=btntrackback></center>
<div class=msgcontent align=center></span></div></div></div>

 
 

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

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

Tears