拾、結論與建議：

本站所有報導資料，歡迎網友加入鏈結或轉載內容，惟請保留文章完整，並註明此 引用來源 ，謝謝您的支持與配合。
本報每篇報導都花上 8 小時以上搜集、整理及撰稿，絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
強烈建議您 學會 HTML 語法 ，她真的簡單易學，懂了她您就能駕馭她，讓您使用所見即所得軟體更得心應手。
本報導屬於完全免費性質， 索取教材資料 屬個人自由意願，而回饋給您的光碟片，則是我們的誠意而已。
一篇保證前所未見的 HTML 教學課程，絕對是您學習 HTML 的好教材，強烈建議您進入實際體驗一下。
本電子報報導資料，未來將繼續每隔 30 日發表一次，以嘉惠更多想學會 HTML 網友，歡迎 繼續訂閱 。
本報導內容或資料，因限人力、時間，非教學會員，不接受任何疑惑解答，敬請見諒。

壹、報導前言：

國內目前使用最多的線上即時通工具，不外是 Skype、 MSN、 Yahoo 這三個常見免費的線上工具。
大部份的網站使用這三個工具，多數是採用固定的設定方式，無法隨視窗下拉而移動位置，是確實有些不便。
本次報導特別為網友整合這些免費資源，製作成一個可以浮動的線上即時通工具，讓訪客更方便跟您聯絡。
建議想學習本篇者，最好具備基本 HTML 語法、 CSS 串接樣式表及 JavaScript 程式基礎，以利修改或套用。
有此需要或興趣者，歡迎進一步參訪捌、本站各期電子報相關報導，此處不再詳加逐一介紹這些語法。
我們先以 MSN 為例，為大家介紹如何製作這隻網站浮動線上免 MSN 即時通工具。

參、抓取 JS Floating 程式：

我在 JTricks - Javascript Tricks and Code Samples 網站找到這個不錯的浮動 JavaScript 程式 Go 。
我們想要的是使用 Absolute Floating Menu Go 及 Absolute Floating Menu Close Link/Button Go 這兩個組合程式。
這個網站是英文版的，如果您有興趣可以好好研究一下，自己練習將這些 JavaScript 程式碼抓下來組合看看。
否則，請先套用我已抓下來並做簡單整合過的浮動可開關 JavaScript 程式，請點擊 web.htm 打開來看。
經實際測試本程式適用 IE、Firefox、Safari、Chrome、Avant、Netscape、和 Opera Browser。

玖、本站會員注意事項：

您需要這份完整報導資料嗎？學習上有困難嗎？您想永久長期取得網頁研習室有關網頁製作教材嗎？
如果您想完整取得電子報內所有檔案資料，我們提供完整的燒錄光碟片給您 Go 。
凡加入教學會員者，可獲得半年期線上指導及所有報導完整的資料光碟乙片 Go 。
教才內容：語法教學、第一電子報、第二電子報、第三期電子報、第四期電子報、網頁圖窟。
為讓您學習不終斷，即日起推出凡購買教材，可加選是否於第四期電子報報導完閉後補送完整教材一片！
已購買教材或教學會員，如需本報導資料歡迎寫信註明編號免費索取，您也可加價 100 元，於本期報導完畢後一次完整取得。

捌、與本篇有關的前幾期報導：

第一期電子報：詳析各種 HTML 語法、特殊網頁製作運用技巧、繪製網頁圖檔、實用 Script 程式 Go 。
第二期電子報：實用進階語法、網頁繪圖技巧、各種程式選用 Go 。
第三期電子報：進階網路運用、網站製作經驗、實用程式彙報 Go

肆、進一步整合運用程式：

前面設定或抓取的各種資料，當然不適合我們要的製作需求，接下來就是做適當的整合工作。
找一張或自己製作一張代表浮動的圖檔，取代 web.htm 檔內的 This is a floating javascript. 文字。
注意：我使用的這張浮動圖檔，是我製作 詹姆士夢工廠網站 所有，他是有版權喔，未經許可請勿使用。
然後改用這段 CSS 標籤，取代原本 web.htm 檔內 CSS 標籤，目的是將原本的表格框隱藏起來。
做出來的結果，如範例 float.htm。
接下來我們要將網頁上的 Show 及 Hide 移到浮動圖檔的右上角，並加上 MSN 視窗連結，這樣就可以與浮動圖檔同步移動。

伍、修改 Show 及 Hide 位置：

要將網頁上的 Show 及 Hide 移到浮動圖檔的右上角很簡單，我們只要將原有的 floatingMenu.hide() 移到 <div id=floatdiv ..> 內即可。
為了好看我將 Show 及 Hide 的文字，改用一張 <img src=close.gif width=11 height=11 border=0 alt='關閉浮動對話圖示'> 代替。
然後用 <div align=right> </div> 區塊語法，將它固定於浮動圖檔的右上角。
接下來就是加入指定尺寸的 MSN 視窗連結 (如下)，用法也不會很難，我在前幾期電子報內有詳細報導過。
<a onclick="window.open('http://settings.messenger...=zh-tw','msn','resizable=no,...'); return false"><img src=float.gif border=0></a>
最後再依據您自己的喜好，調整左右邊界及上下位置，請用檢視原使碼查看 float2.htm 內備註說明。
targetX: -100, //調整左右邊界
targetY: 300, //調整上下位置
做出來的結果，如範例 float2.htm。

柒、將其他工具運用到此程式：

。
採用相同的要領，我特別幫會員們製作以下幾個可直接套用範例，製作細節詳各檔案內說明與介紹。
一、這是我實際完成後完整的範例，floatme.htm 存放於 maillist4/skill/01/more/ 內，請打開慢慢研究。
二、運用 Skype 的 call、chat 及 add 功能做出來的 Skype 按鈕，如範例 floatskype.htm，請用檢視原使碼查看備註說明。
說明：範例已將 floatskype.htm 整合成一個 floatskype.js 外部連結程式碼，存放於 maillist4/skill/01/more/ 內。
三、使用 Skype、 NSN、 Yahoo 做出來的三合一結果，如範例 floatsmy.htm，請用檢視原使碼查看備註說明。
說明：範例已將 floatsmy.htm 整合成一個 floatsmy.js 外部連結程式碼，存放於 maillist4/skill/01/more/ 內。
四、使用聯絡我們表單做出來的結果，如範例 floatform.htm，請用檢視原使碼查看備註說明。
說明：範例已將 floatform.htm 整合成一個 floatform.js 外部連結程式碼，存放於 maillist4/skill/01/more/ 內。
五、使用這隻浮動 JavaScript 程式也能製作出不一樣的聯絡我們表單，，包括 Email + GuestBook + Tele ，如範例 folat3.htm。
說明：本範例使用 JavaScript 程式 + Div 程式碼，請直接使用檢視原使碼查看即可，存放於 maillist4/skill/01/more/ 內。
六、另一個固定在網頁右下角的浮動 JavaScript 程式，如果您擔心擋到內文時可使用這個方式，如範例 folat4.htm。
說明：本範例使用 DHTML 程式碼，請直接使用檢視原使碼查看，存放於 maillist4/skill/01/more/ 內。
七、使用漂亮的表格框整合 MSN、 Skype、 Email、 Tele，相信這一個浮動 JavaScript 程式您一定會喜歡，如範例 folat5.htm。
說明：本範例使用 DHTML 程式碼，請直接使用檢視原使碼查看，存放於 maillist4/skill/01/more/ 內。
八、這是一個可以使用滑鼠移動位置並隨視窗浮動的 JavaScript 程式，很特殊詳的用法，詳如範例 folat6.htm。
說明：本範例是有版權的，請直接使用檢視原使碼查看，存放於 maillist4/skill/01/more/ 內。
九、這是一個固定在網頁左邊，隨視窗上下自由浮動的 JavaScript 程式，只要修改 2 個地方就可使用，如範例 folat7.htm。
說明：本範例使用 JavaScript 程式碼，請直接使用檢視原使碼查看，存放於 maillist4/skill/01/more/ 內。
十、更多不用費付的範例資料與相關好站，存放於 maillist4/skill/01/more/url.txt 內，請慢慢享用吧。

陸、最後整合為單一檔案：

也就是將 float2.htm 整合成一個 floatmsn.js 外部連結程式碼。
做出來的結果檔案縮小只剩 2 KB，如範例 floatmsn.htm，請用檢視原使碼查看 floatmsn.htm 內備註說明。
您也可以使用 MSN 提供的現成按鈕，製作成一個沒有浮動圖檔的「免申請 MSN 帳號」即時通工具。
要領：點選網頁設定建立 HTML選擇您的網頁要顯示的控制項按鈕 (自行調整大小和主題)複製 HTML 碼。
做出來的結果，如範例 floatmsn2.htm，請用檢視原使碼查看 floatmsn2.htm 內備註說明。
說明：範例已將 floatmsn2.htm 整合成一個 floatmsn2.js 外部連結程式碼。
注意：本教材版權屬網頁研習室作者【李文能】所有，如需轉載請註明出處：網頁研習室 - 電子報。

貳、由設定 MSN 開始：

最近 MSN messenger 線上即時諮詢客服，提供了一項更人性化的功能，那就是「免申請 MSN 帳號」即時通工具。
瀏覽者只要按下 MSN messenger 線上連結，就可以直接的與線上人員對話，不需要 MSN 帳號或軟體就可立即使用。
一、首先，您必需申請一個 MSN 帳號，無者請先註冊一個 Windows Live ID (已有者免再申請) Go 。
二、然後登入 Windows Live Messenger 管理您的 Messenger Go 。
三、按一下 [網頁設定]記得讓 (允許在網路上的任何使用者看見我的狀態，並可傳送訊息給我) 保持打勾狀態。
四、按建立 HTML選擇您網頁要顯示的控制項即時通訊視窗 (自行調整大小和主題)將 HTML 複製到您的網頁上。
以下是我取得的 HTML 碼 (此碼每個人都不一樣，您不能直接套用喔) 。
<iframe src="http://settings.messenger.live.com/...=zh-tw" width="300" height="300" style="border: solid 1px black;..." frameborder="0"></iframe>
打開空白的記事本 (Notepad) 或您熟悉的網頁編輯器，將這段 HTML 碼貼上，另存為 code.htm 檔後，雙擊打開來看。
如果您已經安裝並打開 MSN 軟體在連上帳號後，該視窗左上角會出現顯示名稱 + (線上)，否則便會顯示 (離線)。