想在部落格文章上加個框架、音樂盒、動畫等等美編嗎？試試下面介紹的這個聖手遊俠寫的圖文框產生器，只要幾個步驟就能做出美麗動人的圖文喔！我的動畫創作珍惜 這篇文章的框架就是使用這個產生器製作的。
詳細的操作方法我就直接引用聖手遊俠的介紹這樣比較清楚，以下我綜合了他的兩篇文章。
遊俠已經開格快一年了，一直都沒有自己做過圖文框。其實是因為遊俠工作內容，有一部份就是在從事 HTML、CSS 以及 Javascript 的設計工作，所以寫格子就不是很想在還花時間在裝飾上面。
不過呢！既然格慶一週年快到了，遊俠格子又是標榜放遊俠作品的地方，總不能連個最普通的圖文框都沒有吧！於是就想到要來做一個『圖文框』！？不對，這格子界裡圖文框達人太多了，再做圖文框的話，顯不出與眾不同。
嗯~ 左思右想之餘，對了，那就來個『圖文框產生器』好了！很多格友都引用過別人做好的現成圖文框，卻沒自己做過。這種事其實就跟第一次包水餃一樣，雖然包出來的"東西"被第三者辨識出是水餃的機率應該不超過20%，但是當自己煮了它，並且把它送到嘴裡的那種滋味 .... 嗯~ 正如孔子跟亞里斯多德說的『初戀最美，雖然不見得最好 ... 』
廢話不多說，底下就請大家自己體驗吧！
遊俠已經把產生器放在這個位址：http://163.32.57.37/generater1.htm，大家可以連過去使用。如果你不放心是否有病毒，也可以按右鍵，選『另存目標』到自己的電腦，掃毒後直接在自己電腦裡開啟來使用，也是一樣。這個『圖文框產生器』就只有一個 html 網頁檔而已。
開啟後你會看到圖一的示範圖文框。左邊的灰色設定區，就是讓你自己來設定想要什麼樣的圖文框，而正中間則是預覽區。當妳更改了設定值之後，按一下最下面的【更新】鍵，就可以預覽妳設定的圖文框長什麼樣。
確定做好自己的圖文框之後，把網頁捲到最下面，妳可以看到一個如圖三所示的文字區。這就是妳所做的圖文框內容。用滑鼠在文字區點一下，內容就會自動copy到剪貼簿裡，然後再到自己格子的編輯區，以檢視html原始碼的模式貼入，再寫上自己的文字內容就行了。很簡單吧！
左邊的灰色設定區會自動隨著畫面捲動而固定住，如果有人的螢幕高度不夠高，看不到設定區下面，請勾選設定區右上方的選取框，醬子捲螢幕時，設定區就不會跟著動了。
有任何建議，請留言給遊俠吧！好了，可以開始包你的餃子 ... 呃！是做你的圖文框了！
PS. 底下的圖若看不清楚，在相簿有原始大圖，可以點擊圖來開啟大圖
引用 : http://tw.myblog.yahoo.com/pen-sword/article?mid=8250&prev=8285&next=8005&l=f&fid=7
詳細的操作方法我就直接引用聖手遊俠的介紹這樣比較清楚，以下我綜合了他的兩篇文章。
遊俠已經開格快一年了，一直都沒有自己做過圖文框。其實是因為遊俠工作內容，有一部份就是在從事 HTML、CSS 以及 Javascript 的設計工作，所以寫格子就不是很想在還花時間在裝飾上面。
不過呢！既然格慶一週年快到了，遊俠格子又是標榜放遊俠作品的地方，總不能連個最普通的圖文框都沒有吧！於是就想到要來做一個『圖文框』！？不對，這格子界裡圖文框達人太多了，再做圖文框的話，顯不出與眾不同。
嗯~ 左思右想之餘，對了，那就來個『圖文框產生器』好了！很多格友都引用過別人做好的現成圖文框，卻沒自己做過。這種事其實就跟第一次包水餃一樣，雖然包出來的"東西"被第三者辨識出是水餃的機率應該不超過20%，但是當自己煮了它，並且把它送到嘴裡的那種滋味 .... 嗯~ 正如孔子跟亞里斯多德說的『初戀最美，雖然不見得最好 ... 』
廢話不多說，底下就請大家自己體驗吧！
遊俠已經把產生器放在這個位址：http://163.32.57.37/generater1.htm，大家可以連過去使用。如果你不放心是否有病毒，也可以按右鍵，選『另存目標』到自己的電腦，掃毒後直接在自己電腦裡開啟來使用，也是一樣。這個『圖文框產生器』就只有一個 html 網頁檔而已。
開啟後你會看到圖一的示範圖文框。左邊的灰色設定區，就是讓你自己來設定想要什麼樣的圖文框，而正中間則是預覽區。當妳更改了設定值之後，按一下最下面的【更新】鍵，就可以預覽妳設定的圖文框長什麼樣。
確定做好自己的圖文框之後，把網頁捲到最下面，妳可以看到一個如圖三所示的文字區。這就是妳所做的圖文框內容。用滑鼠在文字區點一下，內容就會自動copy到剪貼簿裡，然後再到自己格子的編輯區，以檢視html原始碼的模式貼入，再寫上自己的文字內容就行了。很簡單吧！
左邊的灰色設定區會自動隨著畫面捲動而固定住，如果有人的螢幕高度不夠高，看不到設定區下面，請勾選設定區右上方的選取框，醬子捲螢幕時，設定區就不會跟著動了。
有任何建議，請留言給遊俠吧！好了，可以開始包你的餃子 ... 呃！是做你的圖文框了！
PS. 底下的圖若看不清楚，在相簿有原始大圖，可以點擊圖來開啟大圖
引用 : http://tw.myblog.yahoo.com/pen-sword/article?mid=8250&prev=8285&next=8005&l=f&fid=7
圖框產生器 - 2010121401 改版
小弟的圖框產生器推出之後，感謝各方大德的愛用。試用心得如雪片般飛來，佳評如潮、有口皆碑 ... 不過都不是說這個產生器的 ...
沒關係，俗話說的好，打斷手骨顛倒勇，會嫌貨的才是識貨者。小弟稍事修改一下，茲異動如下：
1. 在文字框加上 class=mbd，如果你自己的格子對捲軸有套色的話，那麼文字框的捲軸也一樣會有顏色。
2. 可以直接在產生器上面寫文字了。請把頁面拉到最下方，文字就輸入到裡面，按【更新】就可以看到效果。
3. 加上音樂盒。請注意，音樂盒的輸入也是要用 <embed ... ./> 完整語法。
4. 產出的圖框自動加 <center> 來置中。
就是這四點的異動。另外要提醒：
因為 Yahoo 編輯框會自動修正 (其實是"修歪") html 語法，所以儘量在 html 模式下貼上 html 語法後，直接張貼，不要切回一般模式去看效果。要不然語法會被 Yahoo 編輯框改爛掉。
所以如果想要修改產生器 copy 出來的語法，請開一個記事本，將語法貼進去記事本，在記事本中修改完，再 copy 到 Yahoo 編輯框的 html 模式下貼上。
再提醒一點，【主圖flash特效】及【音樂盒特效】如果不想要，就直接清成空白即可。
假如小弟的產生器，產生出來的 html 不夠您做特效，可以把它貼入全功能html編輯器去自行修飾喔~
所謂全功能html編輯器，就是像 frontpage 或 Dreamwaver 這類的軟體。這邊介紹一個免費又強大的：KompoZer
引用 : http://tw.myblog.yahoo.com/pen-sword/article?mid=8428&prev=8524&next=8422&l=f&fid=7
圖文框產生器位址：http://163.32.57.37/generater1.htm
我的示範：珍惜
沒有留言:
張貼留言