第二階段【網頁製作系列報導】電子報【實用進階語法】

[ 家電維修服務 | 家電維修站 | 虛擬主機,網頁空間,網頁diy ]

輸入Email訂閱

以下為電子報內容

測試示範時須外部鏈結，請連線使用

實用進階語法

第一篇
運用MailTo製作一個互動回信表單

01.設計理念：
MailTo寄信表單，是Form標籤中最簡單的互動語法之一；她的優點是不用借助CGI、ASP、PHP等互動程式，就可以達到蒐集訪客回信表單資料；很可惜的是她是靜態不動的，常讓訪客不知所措，基於這個原因，我想出以下這個辦法來改進她的缺點。

02.運作程序：
當訪客按下【我要訂購】或【意見回覆】等表單選項時，我們先讓她打開一個適合您表單尺寸大小的新視窗(如下語法)，這個目的是便於她可以自動關閉(不用您去按【確定】離開)，並產生互動的假象。這完全是因為MailTo標籤只能提供轉信服務，並不能讓訪客明顯的知道，這封信是否已確實被寄出的訊息；所以我們要讓她在關閉的同時，也能自動產生一個告知訊息。
<BODY>
<a href="#" onClick="window.open('mail.htm','mail','width=500,height=400,directories=no,.........');return false">MailTo表單示範</A>
</BODY>

03.兩個關鍵：( //...................以下這個符號表示註解)
為了要讓這個MailTo標籤能自動產生互動訊息，所以加了以下兩個JavaScript功能(A. & B.)：
A.當訪客按下送出【我要訂購】或【意見回覆】等按鈕時，我們除了讓她能正常提供轉信服務功能外，同時將新開啟的這個視窗關閉。
<HEAD>
<script language=javascript>
function exit()
{
window.close();
}
</script>
</HEAD>
<BODY>
<Form Method="POST" Action="mailto:YourName@mail.com.tw" Enctype="text/plain">
//MailTo自動寄信語法，將YourName@mail.com.tw換成您的信箱，其餘不用修改
--依自己需要填入各式表單語法--
//如果您不熟悉表單的用法，請參考第一階段一次學完表單製作教學
<Input Type="Submit" Value="送出表單" onClick="setTimeout('exit()', 2000)")">
//呼叫exit() JavaScipt程式，並於2秒內關閉這個視窗
</FORM>
</BODY>
B.在關閉本視窗同時，我們讓她自動產生一個新訊息網頁視窗，明顯的讓網友知道，這封信已確實寄出或告知我已收到本資料等訊息。
<HEAD>
<script language=javascript>
function sendwin(){ windowLeaving=window.open("這裡填入您的HTML需求');
//請用檢視原始碼，參考示範檔案寫法
windowLeaving.document.writeln("這裡填入您的HTML需求");
windowLeaving.document.writeln("這裡填入您的HTML需求");
--這裡填入您的HTML需求--
//如果您不熟悉HTML & JavaScript的用法，請參考第一階段實用HTML語法蒐整及JavaScript大全教學
windowLeaving.document.writeln("這裡填入您的HTML需求");
windowLeaving.document.writeln("這裡填入您的HTML需求");
}
//---->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
--依自己需要填入各式表單語法--
<input type="submit" Value="送出表單" onClick="sendwin();">
//呼叫sendwin JavaScipt程式，並自動產生一個新訊息網頁視窗
</FORM>
</BODY>

04.檢查設定：
為了達到這個目的，我們還要檢查或完成以下設定：
(一般只要您電腦設有SMTP & POP3寄收信軟體，如Microsoft Outlook，她就會自動產生好設定)
請打開IE瀏覽器=>按工具Internet選項=>選程式標籤=>internet程式電子郵件(E)=>選擇您電腦內使用中的通訊軟體=>按確定完成設定！

05.補充說明：
為了讓您更加瞭解範例，我另外加了一個使用說明頁say.htm=>(mail.htm)及警告JavaScript程式(如下語法)，這兩個過程您可以省略不用。
<HEAD>
<script language="JavaScript">

</script>
</HEAD>
<BODY>
<FORM>
--依自己需要填入各式表單語法--
<input type="submit" Value="送出表單" onClick="FunAlert());">
//呼叫FunAlert() JavaScipt程式，並自動跳出的警告信息對話
</FORM>
</BODY>

06.顯示狀況：
填完表單送出後，其操作正常顯示狀況如下：
按【送出表單】按鈕後=>會跳出【警告訊息】視窗=>請按【確定】按鈕=> 傳送檔案畫面(她會呼叫您上面所完成設定的信件軟體來發信)=>然後自動關閉寄信表單視窗=>打開已送出本資料訊息視窗。
注意：因為我加了上一段(06.)對話，所以這裡您會了多一個【確定】按鈕。

07.運用要領：
這裡的送出表單按鈕，我同時用了三個 onClick JavaScript程式，您可以參考我的方式，將她們合並來用！
<BODY>
<FORM>
--依自己需要填入各式表單語法--
<input type="submit" Value="送出表單" onClick="FunAlert();sendwin();setTimeout('exit()', 2000)")">
//依序同時呼叫FunAlert() & sendwin() & setTimeout('exit()', 2000) JavaScipt程式
</FORM>
</BODY>

08.技巧變化：
除了使用上述這個方式外，您也可以想一想，自己另外創造出更多的其他變化哦！
例如：將sendwin JavaScipt程式拿掉，改為當網頁被關閉後，跳出訊息對話：
<BODY onUnload="alert('嗨！謝謝您的來信')">
//網頁被關閉後，跳出[嗨！謝謝您的來信]對話
或新網頁：
<script>
var exit=true;
function goodbye()
{
if (exit)
{
open("infon.htm","OpenWindow","width=600,height=180,resizable=0,scrollbars=0");
//網頁被關閉後，跳出infon.htm新網頁，內容您可以寫一些收到或感謝語等客套話
}
}
//-->
</script>
或新網頁 & 訊息對話：(略)
//請自己練習！以上這些方式，有一個不好的缺點：當訪客只要關閉這個視窗，就會出現此訊息

09.結論與建議：
A.網頁HTML語法或JS等程式都是死的，要如何運用她是活的，這個單元就是要創造出更多好用的功能，敬請期待及歡迎訂閱！
B.本報導資料全部取自網頁研習室教學會員檔案資料；如果您已是會員，請直接研習教材便可。
C.我們還是強烈建議您學會HTML語法，她真的很簡單易學，懂了她您就能駕馭她，不要再用所見即所得軟體了。
D.如果您不想再依賴呆板的HTML編輯軟體，而想徹底學會HTML語法，建議您加入我們的教學會員，一整年的顧問服務及半年內在無痛苦的學習環境中，自然輕鬆學會她。
E.如果您想一次取得本報第一階段所有資料，建議您以新台幣100元贊助本報繼續成長，並可完整全部取得近110餘篇精採報導資料。

10.大功告成：
A.如果您想收(看)到，您寄給我的結(效)果，請記得填入正確電子信箱哦！
B.請按示範案例，進入後，記得用檢視原始碼查看哦！
C.本程式，適用IE & NC Browser，請自行轉換測試！

第二階段91.01.05.發行第001期前期：成立【第二階段】網頁製作系列報導快訊