ㄚ門助福網

為嵌入複製貼碼製作外框

常常看到別人的LOGO圖案,為了分享及轉貼便利,會於其圖案下方置放現成的複製代碼供他人(具有網站的版主)直接複製利用,使快速轉貼置放於個人網站,俾利達到宣導及再分享目的。

然而此方便性是有一些進程的:先前為了製作一個LOGO圖案且可以直接點選圖案就連結至該網站首頁之目的,是需要花很多工夫的!所謂需要花很多工夫,不外乎先複製該網站首頁的LOGO圖案,再用繪圖編輯軟體來剪裁合適大小,將此圖檔存放於有連結網址的圖床(網路硬碟)空間,再將此圖片連結網址合併該網站首頁或特別指定頁面網址,製成一些可以顯示及自動連結的HTML程式代碼等,如此再於網站公布此程式代碼即大功告成!

但是問題又接著出現,若按上述步驟流程處理,結果竟然出現兩個LOGO圖案,呈現上下片排列情形,與原先定義僅出現可點選之LOGO圖案,而圖案下方要出現可供人複製之嵌入貼碼等想法完全不同。然而!哪知,我們製作可點選之LOGO圖案所用的程式代碼與可供人複製之嵌入貼碼竟然一樣,難怪乎電腦會顯示出兩個LOGO圖案,按人的邏輯的確沒錯,一個顯示LOGO圖案,一個顯示於該圖案下面,問題就出在於不同的動作,卻使用了相同的程式代碼,但我們的確是要用同樣的程式代碼來運用呈現啊!

解決原理與作法:
1.原理:程式碼(大於、小於及雙引號等符號)係給電腦以HTML語法作為判斷用的,所以要顯示程式碼又不讓電腦執行(否則會出現兩個LOGO圖案),作法就是將html語法中的特殊符號如<>""等等,改由別的替代碼(特殊編碼方式)來顯示即可。當電腦碰到此特殊編碼就跳過不執行,而純粹只顯示原先定義符號,如此就達到我們的需求(僅顯示程式代碼)。相關特殊符號編碼對照表請參考 http://zerocyber.net/html_symbols.php
2.所以作法就是:點選圖案直接連接之方式,採用正確的HTML程式語法;另純顯示供人便利複製貼碼的作法就是改採特殊符號編碼對照表替換原程式碼即可符合需求。

底下提供一些個人摸索經驗與學習心得,欲使用者直接將相關HTML語法代碼複製利用即可!

 

一、製作可點選之LOGO圖案之html語法:

<a href="http://點選圖片後到達網址">
<img border="0" src="http://圖片存放網址" width="160" height="156" alt="">
</a>

說明:其中紅色網址為LOGO圖案供人點選後進入之畫面(一般為首頁或指定頁面)

藍色網址為該LOGO圖片本身存放位置之網址;width為LOGO圖案之寬度;height為LOGO圖案之長度,大小值可依需要調整。

 

二、製作嵌入複製貼碼:

只要將上述之大於、小於及雙引號等之符號改為特殊編碼即可。茲將上述語法改以特殊編碼如下

&lt;a href=&quot; http://點選圖片後到達網址&quot;&gt;
&lt;img border=&quot;0&quot; src=&quot; http://圖片存放網址&quot; width=&quot;160&quot; height=&quot;156&quot; alt=&quot;&quot;&gt;
&lt;/a&gt;

 

三、為嵌入複製貼碼製作可移動大小外框: (如上述範例圖119救地球)

<div id="post_trackback_main">
<textarea name="post_trackback_content" cols="30" rows="1"
id="post_trackback_content" readonly="" onclick="select_copytext('post_trackback_content');
" wrap="virtual" style="margin-left: 10px;margin-right: 2px; width: 231px;margin-top: 2px; margin-bottom: 2px; height: 36px; ">

上述第二段含有特殊編碼之代碼

</textarea>
</div>

 

以上作法僅供參考,所有代碼語法均取自於網路蒐集得來,歡迎轉寄分享,彼此學習!

延伸閱讀:
1.網路學習工作坊研習網頁http://www.ltes.tc.edu.tw/96myweb/ (部落格常用的簡易語法)
2.在網頁中插入blog parts的常用語法http://maybird.pixnet.net/blog/post/15070614
3.用Issuu線上製作電子書-You Publish
4.

Exit mobile version