|
|
|---|
|
壹、運用說明： 您不必懂CGI、ASP等互動程式，只要懂的HTML語法及一些技巧便行。 製作過程：申請一個免費CGI程式  套用登錄畫面HTML語法完成。輸入登錄頁面是一個模擬密碼保護的CGI程式畫面，其實並未真正使用到CGI程式。 |
|
貳、申請免費CGI程式： 我們用的是國外(hostedscripts)免費CGI程式，申請方式請參考81.04.25日電子報，超棒網站蓷薦第二期《23種免費 CGI scripts 程式給您使用》  。 |
|
參、製作登錄畫面： 這個畫面包括HTML、CSS、CGI、JavaScript，分別介紹如下；如果您不懂這些語法或程式，只要套用便可。 |
|
肆、<BODY>....</BODY>內的HTML、CSS語法： <Center> <DIV class=outborder style="WIDTH: 350px"> <!--class=xxxx style=xxxx，這是CSS表單--> <DIV class=inborder style="WIDTH: 350px"> <DIV class=title style="TEXT-ALIGN: left"> 網站登錄</DIV> <TABLE border=0> <TR> <TD vAlign=middle><IMG src="http://iwebs.url.com.tw/gallery/314/20020803171402/img/KEY.GIF" alt="網站登錄" align=absmiddle border=0 hspace=0 vspace=0 height=38 width=38> <TD> <TABLE border=0> <TR> <TD ColSpan=2>這是測試畫面，名稱請使用 test 密碼請使用 1111</TD></TR> <TR> <TD align=left>名 稱：</TD> <TD><INPUT class=inputtxt maxLength=100 name=userx onfocus=this.select() size=30></TD></TR> <TR> <TD align=left>密 碼：</TD> <TD><INPUT class=inputtxt maxLength=100 name=passx onfocus=this.select() size=30 type=password></TD></TR> </TABLE> </TD></TR> </TABLE> <CENTER> <INPUT class=button name=Action2 type=submit value=確定> </DIV></DIV> </FORM> </CENTER> |
|
伍、<HEAD>...</HEAD>內的CSS語法： <STYLE> .button { FONT-SIZE: 9pt; HEIGHT: 20px} .inputtxt { FONT-FAMILY: Arial; FONT-SIZE: 9pt; HEIGHT: 20px} TD {FONT-FAMILY: Arial; FONT-SIZE: 9pt} .outborder {BACKGROUND-COLOR: gray; BORDER-BOTTOM: black 1px solid; BORDER-LEFT: gray 1px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: gray 1px solid; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px; WIDTH: 500px} .inborder {BACKGROUND-COLOR: #c0c0c0; BORDER-BOTTOM: gray 1px solid; BORDER-LEFT: white 1px solid; BORDER-RIGHT: gray 2px solid; BORDER-TOP: white 1px solid; COLOR: #000000; FONT-SIZE: 9pt; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px} .title {BACKGROUND-COLOR: #000088; BORDER-BOTTOM: gray 1px solid; BORDER-RIGHT: gray 1px solid; COLOR: #ffffff; FONT-SIZE: 9pt; HEIGHT: 20px; PADDING-BOTTOM: 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 0px; PADDING-TOP: 5px; WIDTH: 100%} </STYLE> |
|
陸、<HEAD>...</HEAD>內的JavaScript程式： <!--密碼查核JavaScript程式--> <SCRIPT language=JavaScript> <!-- function chkinput(){ var ErrString = "" ; if (document.form1.userx.value.length == 0){ErrString = ErrString + "必須輸入使用者代號。" + unescape('%0D%0A')} if (document.form1.passx.value.length == 0){ErrString = ErrString + "必須輸入密碼。" + unescape('%0D%0A')} if (ErrString != "") { alert(ErrString); return false; } return true; } // --> </SCRIPT> <!--密碼查核JavaScript程式--> |
|
柒、BODY內部的HTML語法、JavaScript程式： <BODY bgColor=#ffffff onload=document.form1.userx.select() topMargin=120> |
|
捌、<BODY>....</BODY>內的CGI程式： <!--user=dp00改成您申請到的資料--> <Form Action="http://members.hostedscripts.com/password.cgi?user=dp00" Method=post name=form1 onsubmit="return chkinput()"> <!--user=dp00改成您申請到的資料--> |
|
玖、實作範例及原始碼： 名稱請使用 test 密碼請使用 1111 。
|
|
拾、更多學習技巧： 更多學習技巧.....，在本報教學會員教材中，歡迎加入，謝謝使用。 |
|
結論與建議：(網站想長久經營與服務，有賴加值收益才能持續，以下為廣告內容，敬請支持) 01.這個【實用進階語法】單元，將會以最實用的各類程式，為大家介紹如何規劃與套用，敬請期待並歡迎訂閱！ 02.本報導資料取自網頁研習室教學會員檔案資料，內另附更多範例介紹，歡迎加入教學會員進一步研習。 03.我們還是強烈建議您學會HTML語法，她真的簡單易學，懂了她您就能駕馭她，不要再用所見即所得軟體了。 04.如果您找不到有人可以詢問，又想徹底學會HTML語法，建議您加入我們的教學會員。 05.現在加入教學會員，提供一整年的諮詢顧問服務，並在半年內以無痛苦的學習方式，讓您自然輕鬆學會HTML。 06.贊助本報，一次取得本報第一階段所有資料，即可完整全部獲得近110餘篇精採報導內容。 07.本報自2002年開始接受網站委製，協助極需網站朋友，採最迅速、最便宜的方式，完整取得自己的網站。 08.對本報導有興趣，歡迎完整資料下載，俾利離線詳研；也拜託將本報導推薦給您需要的朋友，一起分享與成長。 09.電子報第二階段報導資料，持續每隔10日發表一次，歡迎訂閱，或加入教學會員完整取得。 10.本報導內容或資料，因限人數眾多，非本報教學會員，不接受任何疑惑解答，敬請見諒。 |
|
第二階段91.08.05.發行第022期 前期：徹底學會網站規劃之原則與運用技巧 |
|