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

 

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

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

因為有格友詢問編輯文章框架的問題，喵也相信還是有很多新手不知道該如何下手，所以喵把程序一一寫下。
 
看似繁雜，但當您已經懂得如何使用時，它將是很簡單滴，希望新手要有耐心，照著程序一一的去操作演練，別想得太複雜，相信很快就可以駕輕就熟滴。
 
如在操作上碰到問題或疑惑，可以留言給喵喵，喵才可以針對您的疑惑解決問題囉。
 
或許問題只是一個很小的螺絲釘，只是自己還不熟悉整體運作，也沒有關係，留言給喵喵，讓喵可以把大家的問題跟盲點觀察出來，醬子對我自己跟對大家都是一種很好的學習經驗囉。
 
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: 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

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

 

 
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 oreokimo 的頭像
    oreokimo

    培迪 的痞客邦部落格

    oreokimo 發表在 痞客邦 留言(1) 人氣()

    E-mail轉寄