ros 的無線認證功能強大，可以安裝自身的需要新增試用客戶，認證客戶，免認證客戶等。
工具/原料
ros路由器
ps影象處理軟體
dw網頁編輯軟體
方法/步驟
看一下效果圖。這是一套自適應的網頁介面
瞭解一下網頁架構：
網頁內容包括使用者登入選項（尊貴使用者登入，試用使用者登入，關於製作著的說明），站標，廣告區。
建立所用圖片資料夾site，包含下面幾個檔案
開啟dreamever編輯首頁login.html:
“wifi廣告營銷服務”
洞察敏銳商機的您是否發現，在大街上,交通工具,餐廳,戶外場所,旅遊和行程中，越來越多人使用智慧手機上網，您是否也意識到，這種趨勢和背景下，移動網際網路擁有廣闊的市場和優越的商機。
在人們享受傳統網際網路帶來的極大的生活方便的同時，習慣和趨勢也在發生極大變化。智慧手機已經成為市民最為主要的隨身攜帶品之一，而開啟手機的WIFI功能，進行無線網路搜尋，也已成為手機控的日常習慣性動作之一。
為顧客提供免費上網服務在國外已蔚然成風，免費wifi熱點成為店面的形象招牌和拉近消費者並促銷購買的重要助力。
當您的顧客光臨並使用店鋪內提供的 Wi-Fi 服務，您可曾考慮過可以通過 Wi-Fi 網路，宣傳一下您店鋪的資訊，最起碼讓顧客瞭解到正在使用的 Wi-Fi 網路是誰提供的吧。
WiFi廣告營銷就是在顧客使用免費wifi的時候推送店內的促銷資訊，一般的展現方式是使用者使用商家提供的免費上網的同時，會在入口頁面看到商家的廣告促銷資訊。 因為消費者希望免費使用WiFi，所以他們樂意接受一定的廣告。
.
這其中連結了jquery中的兩個檔案，jquery.leanModal.min.js和jquery-1.9.1.min.js
把這兩個檔案放在資料夾js中，這兩個檔案可以去juery官網下載。另外還包含common.min.js，cookie.min.js，style.css檔案，下面就把這三個檔案程式碼展示如下
common.min.js檔案程式碼：
function $(objStr){return document.getElementByIdx_x_x(objStr);}
window.onload = function(){
//分析cookie值，顯示上次的登陸資訊
var userNameValue = getCookieValue("userName");
$("userName").value = userNameValue;
var passwordValue = getCookieValue("password");
$("password").value = passwordValue;
//寫入點選事件
$("submit").onclick = function()
{
var userNameValue = $("userName").value;
var passwordValue = $("password").value;
//伺服器驗證（模擬）
var isAdmin = userNameValue == "admin" && passwordValue =="123456";
var isUserA = userNameValue == "userA" && passwordValue =="userA";
var isMatched = isAdmin isUserA;
if(isMatched){
if( $("saveCookie").checked){
setCookie("userName",$("userName").value,24,"/");
setCookie("password",$("password").value,24,"/");
}
alert("登陸成功,歡迎你," + userNameValue + "!");
self.location.replace("welcome.html");
}
else alert("使用者名稱或密碼錯誤，請重新輸入！");
}
}
cookie.min.js程式碼如下：
//新建cookie。
//hours為空字串時,cookie的生存期至瀏覽器會話結束。hours為數字0時,建立的是一個失效的cookie,這個cookie會覆蓋已經建立過的同名、同path的cookie（如果這個cookie存在）。
function setCookie(name,value,hours,path){
var name = escape(name);
var value = escape(value);
var expires = new Date();
expires.setTime(expires.getTime() + hours*3600000);
path = path == "" ? "" : ";path=" + path;
_expires = (typeof hours) == "string" ? "" : ";expires=" + expires.toUTCString();
document.cookie = name + "=" + value + _expires + path;
}
//獲取cookie值
function getCookieValue(name){
var name = escape(name);
//讀cookie屬性，這將返回文件的所有cookie
var allcookies = document.cookie;
//查詢名為name的cookie的開始位置
name += "=";
var pos = allcookies.indexOf(name);
//如果找到了具有該名字的cookie，那麼提取並使用它的值
if (pos != -1){ //如果pos值為-1則說明搜尋"version="失敗
var start = pos + name.length; //cookie值開始的位置
var end = allcookies.indexOf(";",start); //從cookie值開始的位置起搜尋第一個";"的位置,即cookie值結尾的位置
if (end == -1) end = allcookies.length; //如果end值為-1說明cookie列表裡只有一個cookie
var value = allcookies.substring(start,end); //提取cookie的值
return (value); //對它解碼
}
else return ""; //搜尋失敗，返回空字串
}
//刪除cookie
function deleteCookie(name,path){
var name = escape(name);
var expires = new Date(0);
path = path == "" ? "" : ";path=" + path;
document.cookie = name + "="+ ";expires=" + expires.toUTCString() + path;
}
style.css程式碼如下;
/** page structure **/
#w {
display: block;
width: 750px;
margin: 0 auto;
padding-top: 30px;
}
#content {
display: block;
width: 100%;
background: #fff;
padding: 25px 20px;
padding-bottom: 35px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}
.flatbtn {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
outline: 0;
border: 0;
color: #f3faef;
text-decoration: none;
background-color: #6bb642;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
font-size: 1.2em;
font-weight: bold;
padding: 12px 22px 12px 22px;
line-height: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(0,0,0,0.3);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
-moz-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
}
.flatbtn:hover {
color: #fff;
background-color: #73c437;
}
.flatbtn:active {
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
}
/** custom login button **/
.flatbtn-blu {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
outline: 0;
border: 0;
color: #edf4f9;
text-decoration: none;
background-color: #4f94cf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
font-size: 1.3em;
font-weight: bold;
padding: 12px 26px 12px 26px;
line-height: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(0,0,0,0.3);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.flatbtn-blu:hover {
color: #fff;
background-color: #519dde;
}
.flatbtn-blu:active {
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
}
/** modal window styles **/
#lean_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
height:100%;
width:100%;
background: #000;
display: none;
}
#loginmodal {
width: 300px;
padding: 15px 20px;
background: #f3f6fa;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}
#loginform { /* no default styles */ }
#loginform label { display: block; font-size: 1.1em; font-weight: bold; color: #7c8291; margin-bottom: 3px; }
.txtfield {
display: block;
width: 100%;
padding: 6px 5px;
margin-bottom: 15px;
font-family: 'Helvetica Neue', Helvetica, Verdana, sans-serif;
color: #7988a3;
font-size: 1.4em;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8);
background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#edf3f9), to(#fff));
background-image: -webkit-linear-gradient(top, #edf3f9, #fff);
background-image: -moz-linear-gradient(top, #edf3f9, #fff);
background-image: -ms-linear-gradient(top, #edf3f9, #fff);
background-image: -o-linear-gradient(top, #edf3f9, #fff);
background-image: linear-gradient(top, #edf3f9, #fff);
border: 1px solid;
border-color: #abbce8 #c3cae0 #b9c8ef;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.4);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.4);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.4);
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
transition: all 0.25s linear;
}
.txtfield:focus {
outline: none;
color: #525864;
border-color: #84c0ee;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 7px #96c7ec;
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 7px #96c7ec;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 7px #96c7ec;
}
好了 最後來看一下文件結構：
注意事項
這是我製作的一套模板，具體內容可以根據自己的需要修改。