網站運用技巧

第一篇
製作一個網站浮動線上即時通工具

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

貳、由設定 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 軟體在連上帳號後，該視窗左上角會出現顯示名稱 + (線上)，否則便會顯示 (離線)。

參、抓取 JavaScript 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。

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

伍、修改 Show 及 Hide 位置並加上 MSN 視窗連結：
要將網頁上的 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。

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

柒、您也可以將 Skype、Yahoo 及其他工具運用到這個程式上：
注意：本段教材 除教材會員可完整取得及教學會員可接受線上指導外，訪客與訂閱戶請自行參考以上免費學習 Go 。
採用相同的要領，我特別幫會員們製作以下幾個可直接套用範例，製作細節詳各檔案內說明與介紹。
一、這是我實際完成後完整的範例，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 內，請慢慢享用吧。

捌、與本篇有關值得您學習的本報前幾期報導：
第一期電子報：詳析各種 HTML 語法、特殊網頁製作運用技巧、繪製網頁圖檔、實用 Script 程式 Go 。
第二期電子報：實用進階語法、網頁繪圖技巧、各種程式選用 Go 。
第三期電子報：進階網路運用、網站製作經驗、實用程式彙報 Go 。

玖、如何取得：

拾、結論與建議：