如何制作ros的hotspot热点认证网页
1、看一下效果图。这是一套自适应的网页界面
2、了解一下网页架构：
网页内容包括用户登录选项（尊贵用户登录，试用用户登录，关于制作着的说明），站标，广告区。
3、建立所用图片文件夹site，包含下面几个文件
4、打开dreamever编辑首页login.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>wifi technology</title>
<meta name="DC.creator" content="Ethan Marcotte - http://unstoppablerobotninja.com/" />
<meta name="DC.language" content="en" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.leanModal.min.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css" media="screen, projection">
.section:after,
ul.nav:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; }
body { line-height:1; }
ol,ul { list-style:none; }
blockquote,q { quotes:none; }
blockquote:before,blockquote:after,q:before,q:after { content:'';content:none; }
ins { text-decoration:none; }
del { text-decoration:line-through; }
table { border-collapse:collapse;border-spacing:0; }
body {
background: #E4E4E4 url("site/bg.png");
color: #292929;
color: rgba(0, 0, 0, 0.82);
font: normal 100% Cambria, Georgia, serif;
-moz-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
-webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
-webkit-text-size-adjust: none;
}
a {
color: #890101;
text-decoration: none;
-moz-transition: 0.2s color linear;
-webkit-transition: 0.2s color linear;
transition: 0.2s color linear;
}
a:hover {
color: #DF3030;
}
#page {
background: url("site/rag.png") repeat-x;
padding: 2em 0;
}
.inner {
margin: 0 auto;
width: 93.75%; /* 960px / 1024px */
}
img {
max-width: 100%;
}
.amp {
font-family: Baskerville, Garamond, Palatino, "Palatino Linotype", "Hoefler Text", "Times New Roman", serif;
font-style: italic;
font-weight: normal;
}
.mast {
float: left;
width: 31.875%; /* 306px / 960px */
}
h1 {
background: url("site/logo-bg.png") no-repeat 50% 0;
}
h1 a {
padding-top: 280px;
height: 100px;
display: block;
text-align: center;
}
.intro,
.main,
.footer {
float: right;
width: 65.9375%; /* 633px / 960px */
}
.intro {
margin-top: 117px;
}
.intro div {
line-height: 1.4;
}
ul.nav {
border-top: 1px solid #888583;
margin: 2em auto 0;
width: 64.379%;
}
ul.nav a {
background: url("site/ornament.png") no-repeat 0 100%;
font: bold 14px/1.2 "Book Antiqua", "Palatino Linotype", Georgia, serif;
display: block;
text-align: center;
letter-spacing: 0.1em;
padding: 1em 0.5em 3em;
margin-bottom: -1em;
text-transform: uppercase;
}
ul.nav a:hover {
background-position: 50% 100%;
}
li.first a {
border-top: 1px solid #FFF9EF;
padding-top: 1.25em;
}
ul.nav i {
font: normal 10px Baskerville, Garamond, Palatino, "Palatino Linotype", "Hoefler Text", "Times New Roman", serif;
display: block;
letter-spacing: 0.05em;
}
.intro h2 {
font: normal 2em "Hoefler Text", "Baskerville old face", Garamond, "Times New Roman", serif;
text-align: center;
margin-bottom: 0.25em;
}
.main h2 {
background: url("site/ornament.png") no-repeat 0 50%;
font-size: 1.4em;
text-transform: lowercase;
text-align: center;
margin: 0.75em 0 1em;
}
.main h2 b {
background: url("site/bg.png");
font-weight: normal;
padding: 0 1em;
}
.figure {
float: left;
font-size: 10px;
line-height: 1.1;
margin: 0 3.317535545023696682% 1.5em 0; /* 21px / 633px */
text-align: center;
width: 31.121642969984202211%; /* 197px / 633px */
text-transform: uppercase;
letter-spacing: 0.05em;
}
.figure b {
display: block;
font-size: 14px;
font-family: "Book Antiqua", "Palatino Linotype", Georgia, serif;
letter-spacing: 0.1em;
}
.figure img {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);;
display: block;
margin: 0 auto 1em;
}
li#f-mycroft,
li#f-winter {
margin-right: 0;
}
.footer {
background: url("site/ornament.png") 50% 0 repeat-x;
font-size: 12px;
text-align: center;
padding: 40px 0 20px;
}
.footer p {
margin-bottom: 0.5em;
}
@media (max-width: 600px) {
/* 633px grid (88x6 col, 21x5 gut; 88+21+88+21+88+21+88+21+88+21+88) */
.inner {
position: relative;
}
.mast,
.intro,
.main,
.footer {
float: none;
width: auto;
}
h1 {
background: none;
}
h1 a {
padding-top: 70px;
height: 87px;
}
ul.nav {
background: url("site/ornament.png") no-repeat 0 -20px;
border-top: none;
margin: 0 auto;
position: absolute;
top: 0;
width: 100%;
}
ul.nav li {
float: left;
margin-right: 3.317535545023696682%; /* 21px / 633px */
width: 31.121642969984202211%; /* 197px / 633px */
}
ul.nav a,
ul.nav i {
font: 10px Helvetica, Arial, sans-serif;
letter-spacing: 0;
}
ul.nav a:hover,
ul.nav a:focus {
background-position: 0 100%;
}
li.first a {
border-top: none;
padding-top: 1em;
}
ul.nav li.last {
margin-right: 0;
}
.intro {
margin-top: 18px;
}
.intro h2 {
font-size: 1.4em;
}
}
@media (max-width: 400px) {
.figure,
li#f-mycroft {
margin-right: 3.317535545023696682%; /* 21px / 633px */
width: 48.341232227488151658%; /* 306px / 633px */
}
li#f-watson,
li#f-moriarty {
margin-right: 0;
}
}
@media (min-width: 1300px) {
.mast {
float: none;
width: auto;
}
h1 {
float: left;
width: 31.875%; /* 306px / 960px */
}
ul.nav {
float: right;
margin: 40px 0 1em;
text-align: center;
width: 65.9375%; /* 633px / 960px */
}
ul.nav {
border-top: none;
}
ul.nav li.first a {
border-top: none;
padding-top: 1em;
}
ul.nav li {
float: left;
margin-right: 3.317535545023696682%; /* 21px / 633px */
width: 31.121642969984202211%; /* 197px / 633px */
}
ul.nav li.last {
margin-right: 0;
}
.intro {
margin-top: 1em;
}
.figure,
li#f-mycroft {
margin-right: 3.317535545023696682%; /* 21px / 633px */
width: 13.902053712480252764%; /* 88px / 633px */
}
.footer {
clear: both;
float: none;
margin-left: 56.770833333333333333%; /* 327px / 960px */
width: 20.520833333333333333%; /* 197px / 960px */
}
}
</style>
</head>
<body>
<div id="loginmodal" style="display:none;">
<h2>用户登陆通道</h2>
$(if chap-id)
<form name="sendin" action="$(link-login-only)" method="post">
<input type="hidden" name="username" />
<input type="hidden" name="password" />
<input type="hidden" name="dst" value="$(link-orig)" />
<input type="hidden" name="popup" value="true" />
</form>
<script type="text/javascript" src="/md5.js"></script>
<script type="text/javascript">
<!--
function doLogin() {
document.sendin.username.value = document.login.username.value;
document.sendin.password.value = hexMD5('$(chap-id)' + document.login.password.value + '$(chap-challenge)');
document.sendin.submit();
return false;
}
//-->
</script>
$(endif)
<form id="loginform" name="login" method="post" action="$(link-login-only)" $(if chap-id) onSubmit="return doLogin()" $(endif)>
<input type="hidden" name="dst" value="$(link-orig)" />
<input type="hidden" name="popup" value="true" />
<label for="username">账号:</label>
<input type="text" name="username" id="username" class="txtfield" tabindex="1" value="$(username)">
<label for="password">密码:</label>
<input type="password" name="password" id="password" class="txtfield" tabindex="2">
<div style = "text-align:right;"> <input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="登陆" tabindex="3"></div>
<script type="text/javascript">
$(function(){
$('#loginform').submit(function(){
return ture;<!--成功提交表单，若是return faulse是阻止提交表单-->
});
$('#modaltrigger').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" });
});
</script>
</form>
</div>
<div id="page">
<div class="inner">
<div class="mast">
<h1 id="logo"><a ><img src="site/logo.png" alt="The Baker Street Inquirer" /></a></h1>
<ul class="nav">
<li class="first"><a href="#loginmodal" id="modaltrigger"><i>VIP Channel</i> 尊贵用户登录</a></li>
<li>$(if trial == 'yes') <a href="$(link-login-only)?dst=$(link-orig-esc)&username=T-$(mac-esc)"><i>trial channel</i> 试用用户登录</a>.$(endif)</a></li>
<li class="last"><a href="tzb217.html"><i>About tzb217 </i> 特种兵217</a></li>
</ul><!-- /end .nav -->
</div><!-- /end .mast -->
<div class="section intro">
<div>
<h2>“wifi广告营销服务”</h2>
<p style="font-family:'楷体'"> 洞察敏锐商机的您是否发现，在大街上,交通工具,餐厅,户外场所,旅游和行程中，越来越多人使用智能手机上网，您是否也意识到，这种趋势和背景下，移动互联网拥有广阔的市场和优越的商机。
在人们享受传统互联网带来的极大的生活方便的同时，习惯和趋势也在发生极大变化。智能手机已经成为市民最为主要的随身携带品之一，而打开手机的WIFI功能，进行无线网络搜索，也已成为手机控的日常习惯性动作之一。
为顾客提供免费上网服务在国外已蔚然成风，免费wifi热点成为店面的形象招牌和拉近消费者并促销购买的重要助力。
当您的顾客光临并使用店铺内提供的 Wi-Fi 服务，您可曾考虑过可以通过 Wi-Fi 网络，宣传一下您店铺的信息，最起码让顾客了解到正在使用的 Wi-Fi 网络是谁提供的吧。
WiFi广告营销就是在顾客使用免费wifi的时候推送店内的促销信息，一般的展现方式是用户使用商家提供的免费上网的同时，会在入口页面看到商家的广告促销信息。 因为消费者希望免费使用WiFi，所以他们乐意接受一定的广告。
.
</div>
</div><!-- /end .section.intro -->
<div class="section main">
<h2><img src="site/wifi_c.png" alt="wifi" width="100%"/></h2>
<ol>
<li id="f-holmes" class="figure">
<a href="#">
<img src="site/f-holmes.jpg" alt="" />
<span class="figcaption">提示牌 <b>快餐店</b></span>
</a>
</li><!-- /end .figure -->
<li id="f-watson" class="figure">
<a href="#">
<img src="site/f-watson.jpg" alt="" />
<span class="figcaption">适用于<b>家庭无线覆盖</b></span>
</a>
</li><!-- /end .figure -->
<li id="f-mycroft" class="figure">
<a href="#">
<img src="site/f-mycroft.jpg" alt="" />
<span class="figcaption">提示牌 <b>内有无线覆盖</b></span>
</a>
</li><!-- /end .figure -->
<li id="f-moriarty" class="figure">
<a href="#">
<img src="site/1.png" alt="" />
<span class="figcaption">无线覆盖适用于 <b>宾馆</b></span>
</a>
</li><!-- /end .figure -->
<li id="f-adler" class="figure">
<a href="#">
<img src="site/2.png" alt="" />
<span class="figcaption">无线覆盖适用于 <b>办公环境</b></span>
</a>
</li><!-- /end .figure -->
<li id="f-winter" class="figure">
<a href="#">
<img src="site/3.png" alt="" />
<span class="figcaption">无线覆盖适用于 <b>学校环境</b></span>
</a>
</li><!-- /end .figure -->
</ol>
</div><!-- /end .section.main -->
<div class="footer">
Copyright © 2013 BORUI Technology Limited All Rights Reserved.
<br>
博锐科技 版权所有
</div><!-- /end .footer -->
</div><!-- /end .inner -->
</div><!-- /end #page -->
<!--[if lte IE 7]><script type="text/javascript" src="site/imgSizer.js"></script>
<script type="text/javascript">
window.onload = function() {
imgSizer.collate();
}
</script><![endif]-->
<!--[if lte IE 6]><script type="text/javascript" src="share/ddpng.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('body, #page, h1, h1 img, ul.nav, ul.nav a, .main h2, .main h2 b, .footer');
</script><![endif]-->
</body>
</html>
这其中链接了jquery中的两个文件，jquery.leanModal.min.js和jquery-1.9.1.min.js
把这两个文件放在文件夹js中，这两个文件可以去juery官网下载。另外还包含common.min.js，cookie.min.js，style.css文件，下面就把这三个文件代码展示如下
5、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("用户名或密码错误，请重新输入！");
}
}
6、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;
}
7、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;
}
8、好了 最后来看一下文档结构：
